/* Ironclad Tech - public site design system.
   One stylesheet for every public page, served as-is (not through the
   Tailwind pipeline) and cached across the whole site.

   Every colour on the site comes from the tokens below. Components, the
   TSX chrome and the seeded page content all reference these custom
   properties rather than repeating hex values, so a palette change is a
   change to this block and nothing else.

   The accent is reserved for things a visitor can act on: hover and active
   states, focus rings and the primary call-to-action buttons. Everything at
   rest is charcoal on white. */

:root {
  /* palette */
  --color-bg: #FFFFFF;
  --color-bg-alt: #F8F9FA;
  --color-text: #1E252B;
  --color-accent: #ED7700;

  /* derived from the palette */
  --color-text-muted: #4A5560;     /* body copy: 7.6:1 on white */
  --color-text-subtle: #66717B;    /* labels, metadata: 4.9:1 on white */
  --color-border: rgba(30, 37, 43, .12);
  --color-border-strong: rgba(30, 37, 43, .24);
  --color-accent-strong: #D46A00;  /* pressed / hovered accent fill */
  --color-accent-soft: rgba(237, 119, 0, .10);
  --color-accent-ring: rgba(237, 119, 0, .22);
  --color-on-accent: #1E252B;      /* charcoal on amber: 5.3:1 */
  --color-on-text: #FFFFFF;        /* text on a charcoal fill */

  /* brand metals — the logo, icon medallions, structural accents. Separate
     from --color-accent, which stays reserved for things a visitor can act
     on (buttons, links, active/hover states). These two are decorative /
     structural, not text colours: --color-gold-deep is the only one of the
     three with enough contrast (3.12:1) to sit on large/bold text, and only
     there — see the contrast notes on .eyebrow and .stat-v below. */
  --color-gold: #D4AF37;
  --color-gold-soft: #E8CE72;
  --color-gold-deep: #B08E22;      /* large/bold text only: 3.12:1 on white */
  --color-iron: #4A5560;           /* same value as --color-text-muted, named
                                       for its structural (border/badge) use */

  /* status colours (forms only) */
  --color-error: #B42318;
  --color-error-soft: rgba(180, 35, 24, .07);
  --color-success: #1C7A4A;
  --color-success-soft: rgba(28, 122, 74, .08);

  --shadow-sm: 0 1px 2px rgba(30, 37, 43, .06);
  --shadow-md: 0 14px 34px rgba(30, 37, 43, .10);
  --ease-out: cubic-bezier(.22, .9, .25, 1);

  --font-display: 'Space Grotesk', sans-serif;
  --font-body: 'IBM Plex Sans', sans-serif;
  --font-mono: 'IBM Plex Mono', monospace;

  color-scheme: light;
  interpolate-size: allow-keywords;
}

/* The header is sticky, so an anchor target has to stop clear of it or the
   first lines of the section land underneath. scroll-padding covers the
   smooth path, scroll-margin the per-element one. */
html { scroll-padding-top: 92px; scroll-behavior: smooth; }
[id] { scroll-margin-top: 92px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { margin: 0; background: var(--color-bg); color: var(--color-text); font-family: var(--font-body); -webkit-font-smoothing: antialiased; }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--color-text); text-decoration: none; transition: color .2s ease; }
a:hover { color: var(--color-accent); }
:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 3px; }
.wrap { position: relative; z-index: 1; max-width: 1200px; margin: 0 auto; padding: 0 40px; }
.row { display: flex; flex-wrap: wrap; }
/* The label text stays at its existing (already-accessible) colour — gold
   fails contrast at this size (2.1:1 on white, need 4.5:1), so the gold
   accent is a small decorative mark instead of the letters themselves.
   inline-flex (rather than an absolutely-positioned ::before) so the mark
   stays attached to the text as one unit even where a parent centers it
   (several fragments wrap an eyebrow in a text-align: center container). */
.eyebrow { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-mono); font-weight: 500; font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: var(--color-text-subtle); }
.eyebrow::before { content: ""; flex: 0 0 auto; width: 13px; height: 2px; background: var(--color-gold); border-radius: 1px; }
p.eyebrow { margin: 0 0 18px; }
.display { font-family: var(--font-display); font-weight: 700; letter-spacing: -.02em; line-height: .98; margin: 0; }
.h2 { font-family: var(--font-display); font-weight: 700; font-size: 44px; letter-spacing: -.02em; line-height: 1.05; margin: 0; }
.lead { font-size: 18px; line-height: 1.65; color: var(--color-text-muted); margin: 22px 0 0; }
.flink { color: var(--color-text-muted); font-size: 15px; line-height: 2.1; display: block; }
.flink:hover { color: var(--color-accent); }

/* ---- news line ---- */
/* The bar carries more than one notice. Plain CSS simply shows them all,
   stacked: with no JavaScript, or under reduced motion, nothing is hidden and
   nothing moves. The script adds .is-rotating, which stacks them into a single
   grid cell and shows one at a time. */
.newsbar { background: var(--color-bg-alt); border-bottom: 1px solid var(--color-border); }
.newsbar-item { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 14px; padding: 13px 24px; color: var(--color-text); font-size: 15px; text-decoration: none; transition: background .25s ease, color .25s ease, opacity .45s ease; }
.newsbar-item + .newsbar-item { border-top: 1px solid var(--color-border); }
.newsbar-item:hover { background: var(--color-bg); color: var(--color-text); }
.newsbar.is-rotating { display: grid; }
.newsbar.is-rotating .newsbar-item { grid-area: 1 / 1; border-top: 0; opacity: 0; visibility: hidden; }
.newsbar.is-rotating .newsbar-item.is-on { opacity: 1; visibility: visible; }
.newsbar-tag { font-family: var(--font-mono); font-weight: 500; font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--color-on-text); background: var(--color-text); border-radius: 999px; padding: 5px 12px; white-space: nowrap; }
/* the hiring notice is a call to action, so its tag carries the accent */
.newsbar-tag.is-hiring { background: var(--color-accent); color: var(--color-on-accent); }
.newsbar-date { font-family: var(--font-mono); font-size: 12px; letter-spacing: .1em; color: var(--color-text-subtle); white-space: nowrap; }
.newsbar-go { color: var(--color-text); display: inline-block; transition: transform .25s ease, color .25s ease; }
.newsbar-item:hover .newsbar-go { transform: translateX(5px); color: var(--color-accent); }

/* ---- shared card surface ----
   Every card family on the site sits on the same white surface with the same
   hairline border and hover lift; only padding, radius and inner layout
   differ, and those stay with each family below. */
.card, .ind-c, .why-c, .data-c, .tp-c, .plan, .post, .vert-c, .hstat, .step-in, .form-panel {
  background: var(--color-bg); border: 1px solid var(--color-border); box-shadow: var(--shadow-sm); }
.card:hover, .ind-c:hover, .why-c:hover, .data-c:hover, .tp-c:hover, .tp-c:focus-visible,
.plan:hover, .post:hover, .vert-c:hover, .step:hover .step-in {
  border-color: var(--color-accent); box-shadow: 0 0 0 4px var(--color-accent-soft), var(--shadow-md); }
/* the alternate band is off-white, so cards on it stay white to read as raised */
.band, .cta-band { background: var(--color-bg-alt); }

/* shared icon medallion: gold outline + gold glyph at rest (decorative, not
   text, so the lighter gold tones are fine here — see the contrast notes in
   :root), amber fill on hover/active, matching the "amber = actionable"
   rule. */
.node, .ind-m, .why-i, .tp-i, .vert-i, .ov-m {
  display: inline-flex; align-items: center; justify-content: center; position: relative; z-index: 1;
  border: 1px solid var(--color-iron); background: var(--color-bg-alt); color: var(--color-gold);
  transition: background .35s ease, border-color .35s ease, color .35s ease, transform .35s var(--ease-out), box-shadow .35s ease; }
.step:hover .node, .ind-c:hover .ind-m, .why-c:hover .why-i, .tp-c:hover .tp-i, .tp-c:focus-visible .tp-i,
.vert-c:hover .vert-i, .ov-i:hover .ov-m {
  background: var(--color-accent); border-color: var(--color-accent); color: var(--color-on-accent);
  transform: translateY(-2px) scale(1.06); box-shadow: 0 10px 24px var(--color-accent-ring); }

/* shared tick list marker — iron rather than flat charcoal, same reasoning
   as the medallion border above */
.card-list li::before, .bullets li::before, .vert-list li::before {
  content: ""; position: absolute; transform: rotate(-45deg);
  border-left: 2px solid var(--color-iron); border-bottom: 2px solid var(--color-iron); }

/* ---- service cards ---- */
.cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; margin-top: 56px; }
.card { display: flex; flex-direction: column; border-radius: 12px; overflow: hidden; transition: transform .3s var(--ease-out), border-color .3s ease, box-shadow .3s ease; }
.card:hover { transform: translateY(-6px); }
.card-img { display: block; aspect-ratio: 16 / 9; overflow: hidden; position: relative; background: var(--color-bg-alt); }
.card-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--ease-out); }
.card:hover .card-img img, .post:hover .card-img img { transform: scale(1.05); }
.hero-img { position: relative; border: 1px solid var(--color-border); border-radius: 12px; overflow: hidden; box-shadow: var(--shadow-md); }
.card-body { padding: 22px 22px 24px; display: flex; flex-direction: column; flex: 1; }
.card-t { display: block; margin: 0; font-family: var(--font-display); font-weight: 700; font-size: 19px; color: var(--color-text); }
.card-d { font-size: 14.5px; line-height: 1.6; color: var(--color-text-muted); margin: 9px 0 0; }
/* Each card is its own anchor target (#svc-...), so a link can point at one
   service instead of dumping everyone on the contact band. */
.card:target { border-color: var(--color-accent); box-shadow: 0 0 0 4px var(--color-accent-ring); }
.card-more { margin-top: 18px; border-top: 1px solid var(--color-border); }
.card-sum { list-style: none; cursor: pointer; padding: 15px 0 0; display: inline-flex; align-items: center; gap: 9px;
  font-family: var(--font-mono); font-size: 12px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--color-text); transition: color .25s ease; }
.card-sum::-webkit-details-marker { display: none; }
.card-sum::marker { content: ""; }
.card-sum:hover, .card-sum:focus-visible { color: var(--color-accent); outline: none; }
.card-sum:focus-visible { text-decoration: underline; text-underline-offset: 4px; }
.card-chev { flex: 0 0 auto; width: 14px; height: 14px; transition: transform .3s var(--ease-out); }
.card-more[open] .card-chev { transform: rotate(180deg); }
.card-list { list-style: none; margin: 16px 0 0; padding: 0; display: grid; gap: 9px; }
.card-list li { position: relative; padding-left: 21px; font-size: 14px; line-height: 1.5; color: var(--color-text-muted); }
.card-list li::before { left: 1px; top: 5px; width: 9px; height: 5px; border-width: 0 0 1.6px 1.6px; }
.card-cta { display: inline-flex; align-items: center; gap: 9px; margin-top: 20px; padding: 11px 17px; border-radius: 6px;
  min-height: 44px; box-sizing: border-box; background: transparent; border: 1px solid var(--color-iron);
  color: var(--color-text); font-size: 13.5px; font-weight: 500; transition: background .25s ease, border-color .25s ease, color .25s ease; }
.card-cta:hover, .card-cta:focus-visible { background: var(--color-accent); border-color: var(--color-accent); color: var(--color-on-accent); }
.card-cta span { display: inline-block; transition: transform .25s ease; }
.card-cta:hover span { transform: translateX(4px); }
/* Smooth open where the browser can interpolate to auto; everywhere else
   the panel simply appears, which is the normal <details> behaviour. */
@supports (interpolate-size: allow-keywords) {
  .card-more::details-content, .faq-i::details-content { block-size: 0; overflow: clip;
    transition: block-size .42s var(--ease-out), content-visibility .42s;
    transition-behavior: allow-discrete; }
  .card-more[open]::details-content, .faq-i[open]::details-content { block-size: auto; }
}

/* ---- process rail ---- */
.rail { display: flex; position: relative; margin-top: 76px; }
.step { flex: 1 1 0; min-width: 0; text-align: center; padding: 0 12px; position: relative; }
.step-in { position: relative; z-index: 1; display: block; height: 100%; box-sizing: border-box; padding: 0 18px 26px; border-radius: 16px; transition: transform .35s var(--ease-out), border-color .35s ease, box-shadow .35s ease; }
.step:hover .step-in { transform: translateY(-5px); }
.node { width: 64px; height: 64px; margin-top: -32px; border-radius: 20px; background: var(--color-bg); }
.node svg { width: 28px; height: 28px; overflow: visible; }
.step:hover .node { transform: translateY(-3px) scale(1.07); }
.step-n { position: absolute; right: -8px; bottom: -8px; min-width: 26px; height: 26px; padding: 0 7px; display: inline-flex; align-items: center; justify-content: center; border-radius: 999px; background: var(--color-iron); color: var(--color-on-text); border: 3px solid var(--color-bg); font-family: var(--font-mono); font-weight: 500; font-size: 12px; box-sizing: border-box; }
.step-first .node { background: var(--color-iron); border-color: var(--color-iron); color: var(--color-on-text); }
.day { display: block; font-family: var(--font-mono); font-weight: 500; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--color-text-subtle); margin-top: 16px; }
.step-t { font-family: var(--font-display); font-weight: 700; font-size: 18px; color: var(--color-text); margin: 16px 0 10px; }
.day + .step-t { margin-top: 8px; }
.step-d { font-size: 15px; line-height: 1.6; color: var(--color-text-muted); margin: 0; }
/* Process steps on the service pages carry a numeral rather than an icon:
   the numbering is the information there. */
.node-n { font-family: var(--font-display); font-weight: 700; font-size: 23px; line-height: 1; }
.step.is-in .step-in { animation: rise .6s var(--ease-out) both; }
.step.is-in:nth-child(2) .step-in { animation-delay: .07s; }
.step.is-in:nth-child(3) .step-in { animation-delay: .14s; }
.step.is-in:nth-child(4) .step-in { animation-delay: .21s; }
.step.is-in:nth-child(5) .step-in { animation-delay: .28s; }

/* Each connector segment belongs to its own step and runs node edge to node
   edge, so the geometry holds for four steps or five. It sits above the card
   (z-index 2) because the card's top edge is below the node centre and would
   otherwise cover it. */
.step::before, .step::after { content: ""; position: absolute; top: 7px;
  left: calc(50% + 34px); width: calc(100% - 68px); height: 2px; border-radius: 2px; z-index: 2; }
.step::before { background: var(--color-border); }
.step::after { background: var(--color-text); transform: scaleX(1); transform-origin: left; }
.step:last-child::before, .step:last-child::after { display: none; }
.rail.is-in .step::after { animation: seg-fill .5s cubic-bezier(.4,0,.2,1) both; }
.rail.is-in .step:nth-child(1)::after { animation-delay: .25s; }
.rail.is-in .step:nth-child(2)::after { animation-delay: .75s; }
.rail.is-in .step:nth-child(3)::after { animation-delay: 1.25s; }
.rail.is-in .step:nth-child(4)::after { animation-delay: 1.75s; }
@keyframes seg-fill { from { transform: scaleX(0); } to { transform: scaleX(1); } }
/* The ring that pulses outward as each node lights. It lives on a
   pseudo-element because a filled animation beats :hover for any property it
   touches - on the node's own box-shadow it would kill the hover glow. */
.node::after { content: ""; position: absolute; inset: -1px; border-radius: inherit;
  pointer-events: none; opacity: 0; }
.rail.is-in .node::after { animation: node-ring .55s ease-out both; }
.rail.is-in .step:nth-child(2) .node::after { animation-delay: .7s; }
.rail.is-in .step:nth-child(3) .node::after { animation-delay: 1.2s; }
.rail.is-in .step:nth-child(4) .node::after { animation-delay: 1.7s; }
.rail.is-in .step:nth-child(5) .node::after { animation-delay: 2.2s; }
@keyframes node-ring {
  from { opacity: 1; box-shadow: 0 0 0 0 rgba(30, 37, 43, .28); }
  to   { opacity: 0; box-shadow: 0 0 0 12px rgba(30, 37, 43, 0); }
}

/* ---- industries / scope grid ---- */
.ind { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; margin-top: 60px; }
.ind-c { position: relative; padding: 30px 26px 32px; border-radius: 14px;
  transition: border-color .35s ease, transform .35s var(--ease-out), box-shadow .35s ease; }
.ind-c:hover { transform: translateY(-4px); }
/* A soft accent sheen that sweeps across on hover. It clips itself rather
   than the card clipping it. */
.ind-sheen, .why-sheen, .tp-sheen { position: absolute; inset: 0; border-radius: inherit; overflow: hidden; pointer-events: none; z-index: 0; }
.ind-sheen::before, .why-sheen::before, .tp-sheen::before { content: ""; position: absolute; top: 0; bottom: 0; left: -60%; width: 45%;
  background: linear-gradient(100deg, transparent, var(--color-accent-soft), transparent); transform: skewX(-18deg); }
.ind-sheen::before, .why-sheen::before { transition: left .75s var(--ease-out); }
.ind-c:hover .ind-sheen::before, .why-c:hover .why-sheen::before { left: 115%; }
/* block-level, so the title below starts on its own line */
.ind-m, .why-i { display: flex; }
.ind-m { width: 54px; height: 54px; border-radius: 16px; }
.ind-m svg { width: 26px; height: 26px; }
.ind-t { position: relative; z-index: 1; font-family: var(--font-display); font-weight: 700; font-size: 19px; color: var(--color-text); margin: 20px 0 8px; }
.ind-d { position: relative; z-index: 1; font-size: 15px; line-height: 1.6; color: var(--color-text-muted); margin: 0; }
/* The resting state is the finished drawing; motion only runs while the
   cell is on screen or hovered. */
.ind-m svg .draw, .data-i .draw { stroke-dasharray: 1; stroke-dashoffset: 0; }
.ind-c.is-in .ind-m svg .draw, .ind-c:hover .ind-m svg .draw,
.data-c.is-in .data-i .draw, .data-c:hover .data-i .draw { animation: icon-draw 4s ease-out infinite; }
.ind-c.is-in .ind-m svg .d2, .ind-c:hover .ind-m svg .d2 { animation-delay: .35s; }
.data-c.is-in .data-i .d2, .data-c:hover .data-i .d2 { animation-delay: .3s; }
.ind-c.is-in .ind-m svg .pulse, .ind-c:hover .ind-m svg .pulse { animation: icon-pulse 2.6s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
@keyframes icon-draw { 0%, 8% { stroke-dashoffset: 1; } 45%, 100% { stroke-dashoffset: 0; } }
@keyframes icon-pulse { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.18); opacity: .75; } }
/* A closed role stays fully legible; the border and the chip carry the
   status instead. */
.ind-c.job-closed { border-style: dashed; box-shadow: none; }
.ind-c.job-closed:hover { border-color: var(--color-border-strong); transform: none; box-shadow: none; }

/* ---- industry data tiles ----
   A KPI row, not a chart: headline numbers with nothing to plot. */
.data { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 26px; margin-top: 56px; }
.data-c { position: relative; padding: 28px 24px 24px; border-radius: 12px;
  transition: border-color .35s ease, transform .35s var(--ease-out), box-shadow .35s ease; }
.data-c:hover { transform: translateY(-4px); }
.data-c::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; border-radius: 12px 12px 0 0;
  background: var(--color-text); transition: background .35s ease; }
.data-c:hover::before { background: var(--color-accent); }
.data-i { width: 26px; height: 26px; color: var(--color-text); }
.data-v { font-family: var(--font-body); font-weight: 600; font-size: 48px; line-height: 1.02; letter-spacing: -.025em;
  font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; color: var(--color-text); margin: 20px 0 0; }
.data-l { font-size: 15px; line-height: 1.55; color: var(--color-text-muted); margin: 10px 0 0; }
.data-s { font-family: var(--font-mono); font-size: 11px; letter-spacing: .06em; line-height: 1.6; color: var(--color-text-subtle); margin: 14px 0 0; }
.data-s a { color: var(--color-text-muted); border-bottom: 1px solid var(--color-border-strong); }
.data-s a:hover { color: var(--color-accent); border-bottom-color: var(--color-accent); }
.data-note { font-size: 15px; line-height: 1.65; color: var(--color-text-subtle); margin: 34px 0 0; max-width: 700px; }

/* ---- why choose ---- */
.why { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 30px; margin-top: 64px; }
.why-c { position: relative; padding: 30px 28px 32px; border-radius: 14px;
  transition: border-color .35s ease, transform .35s var(--ease-out), box-shadow .35s ease; }
.why-c:hover { transform: translateY(-4px); }
.why-i { width: 56px; height: 56px; border-radius: 16px; }
.why-i svg { width: 27px; height: 27px; overflow: visible; }
.why-t { position: relative; z-index: 1; font-family: var(--font-display); font-weight: 700; font-size: 20px; line-height: 1.25; color: var(--color-text); margin: 22px 0 0; display: inline-block; }
.why-t::after { content: ""; position: absolute; left: 0; bottom: -7px; height: 2px; width: 0; background: var(--color-accent); transition: width .4s var(--ease-out); }
.why-c:hover .why-t::after { width: 100%; }
.why-d { position: relative; z-index: 1; font-size: 16px; line-height: 1.7; color: var(--color-text-muted); margin: 18px 0 0; }
/* Verification link on a Why Choose card. Each claim in that section is
   documented on another page of this site; this is how a reader gets there. */
.why-foot { position: relative; z-index: 1; display: flex; flex-wrap: wrap; align-items: center; gap: 14px 18px; margin-top: 20px; }
.why-src { display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--font-mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--color-text); border-bottom: 1px solid var(--color-border-strong); padding-bottom: 2px;
  transition: color .3s ease, border-color .3s ease; }
.why-src:hover, .why-src:focus-visible { color: var(--color-accent); border-bottom-color: var(--color-accent); }
.why-src em { font-style: normal; display: inline-block; transition: transform .3s ease; }
.why-c:hover .why-src em { transform: translateX(4px); }

/* ---- ambient grid ----
   A faint grid behind a section's content, inert to the pointer. Sections
   that use it carry position:relative and .wrap lifts their content above. */
.amb { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; }
.amb::before { content: ""; position: absolute; inset: 0;
  background-image: linear-gradient(rgba(30, 37, 43, .045) 1px, transparent 1px),
                    linear-gradient(90deg, rgba(30, 37, 43, .045) 1px, transparent 1px);
  background-size: 72px 72px;
  -webkit-mask-image: radial-gradient(ellipse 80% 64% at 50% 44%, #000 24%, transparent 78%);
          mask-image: radial-gradient(ellipse 80% 64% at 50% 44%, #000 24%, transparent 78%); }

/* ---- trusted partner / premium cards ----
   1. A conic-gradient ring that rotates on hover. @property declares
      --tp-a as an angle so it can be animated in pure CSS; the two masks
      clip the gradient to a 1px frame.
   2. A spotlight that tracks the pointer: one pointermove listener on the
      grid (site.js) writes --mx/--my onto the card under the cursor.
   Neither is required for the section to work. */
@property --tp-a { syntax: "<angle>"; initial-value: 0deg; inherits: false; }

.tp { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 22px; margin-top: 56px; }
.tp-c { position: relative; display: flex; flex-direction: column; padding: 28px 24px 26px; border-radius: 16px; color: inherit;
  transition: transform .4s var(--ease-out), border-color .4s ease, box-shadow .4s ease; }
.tp-c:hover, .tp-c:focus-visible { transform: translateY(-6px); outline: none; }
.tp-ring { position: absolute; inset: 0; border-radius: 16px; padding: 1px; pointer-events: none; opacity: 0;
  background: conic-gradient(from var(--tp-a), transparent 0 58%, var(--color-accent) 76%, transparent 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  transition: opacity .4s ease; }
.tp-c:hover .tp-ring, .tp-c:focus-visible .tp-ring { opacity: 1; animation: tp-spin 3.4s linear infinite; }
@keyframes tp-spin { to { --tp-a: 360deg; } }
.tp-c::after { content: ""; position: absolute; inset: 0; border-radius: 16px; pointer-events: none; opacity: 0;
  background: radial-gradient(240px circle at var(--mx, 50%) var(--my, 0px), var(--color-accent-soft), transparent 62%);
  transition: opacity .4s ease; }
.tp-c:hover::after, .tp-c:focus-visible::after { opacity: 1; }
.tp-i { width: 52px; height: 52px; border-radius: 15px; margin-bottom: 4px; }
.tp-i svg { width: 26px; height: 26px; overflow: visible; }
.tp-n { position: absolute; z-index: 1; top: 26px; right: 24px; font-family: var(--font-mono); font-weight: 500;
  font-size: 11px; letter-spacing: .14em; color: var(--color-text-subtle); transition: color .35s ease; }
.tp-c:hover .tp-n, .tp-c:focus-visible .tp-n { color: var(--color-accent); }
.tp-t { position: relative; z-index: 1; font-family: var(--font-display); font-weight: 700; font-size: 18px; line-height: 1.3;
  color: var(--color-text); margin: 0; padding-right: 28px; }
/* only a card that leads with an icon needs space above its title; the
   right padding keeps a title clear of the corner number */
.tp-i + .tp-t { margin-top: 22px; }
.tp-d { position: relative; z-index: 1; font-size: 15px; line-height: 1.65; color: var(--color-text-muted); margin: 10px 0 0; flex: 1; }
/* visible at rest, so the card does not hide the fact that it is a link
   from anyone on a touch screen or a keyboard */
.tp-go { position: relative; z-index: 1; display: inline-flex; align-items: center; gap: 8px; margin-top: 20px;
  font-family: var(--font-mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--color-text); transition: color .35s ease; }
.tp-go em { font-style: normal; display: inline-block; transition: transform .3s ease; }
.tp-c:hover .tp-go, .tp-c:focus-visible .tp-go { color: var(--color-accent); }
.tp-c:hover .tp-go em, .tp-c:focus-visible .tp-go em { transform: translateX(5px); }
/* the sheen sweeps once as each card arrives, staggered */
.tp-c.is-in .tp-sheen::before { animation: tp-sweep 1.15s var(--ease-out) both; }
.tp-c.is-in:nth-child(2) .tp-sheen::before { animation-delay: .1s; }
.tp-c.is-in:nth-child(3) .tp-sheen::before { animation-delay: .2s; }
.tp-c.is-in:nth-child(4) .tp-sheen::before { animation-delay: .3s; }
@keyframes tp-sweep { from { left: -60%; } to { left: 120%; } }

/* ---- motion ---- */
/* This animates `translate`, not `transform`, and that is load-bearing.
   Every reveal runs with fill-mode `both`, so an animation on `transform`
   keeps winning the cascade after it finishes and silently kills every
   :hover lift on the same element. `translate` is a separate property that
   composes with `transform`, so the reveal and the hover never fight. */
@keyframes rise { from { opacity: 0; translate: 0 20px; } to { opacity: 1; translate: none; } }
.in { animation: rise .75s var(--ease-out) both; }
.in-1 { animation-delay: .05s; }
.in-2 { animation-delay: .13s; }
.in-3 { animation-delay: .21s; }
.in-4 { animation-delay: .29s; }

/* Scroll-driven CSS (animation-timeline) is Chromium-only today. Safari and
   Firefox get the same motion from a small IntersectionObserver that adds
   .is-in; the html.no-vt class decides which path is live, so the two can
   never both run. Nothing here hides content: every element is visible
   before its class arrives, so if the script never runs the page is simply
   static. */
.no-vt .reveal.is-in,
.no-vt .cards .card.is-in,
.no-vt .tp-c.is-in,
.no-vt .why-c.is-in { animation: rise .7s var(--ease-out) both; }
.no-vt .tp-c.is-in:nth-child(2) { animation-delay: .07s; }
.no-vt .tp-c.is-in:nth-child(3) { animation-delay: .14s; }
.no-vt .tp-c.is-in:nth-child(4) { animation-delay: .21s; }
.no-vt .why-c.is-in:nth-child(2) { animation-delay: .08s; }
.no-vt .why-c.is-in:nth-child(3) { animation-delay: .16s; }
.no-vt .why-c.is-in:nth-child(4) { animation-delay: .24s; }
.no-vt .cards .card.is-in:nth-child(4n+2) { animation-delay: .06s; }
.no-vt .cards .card.is-in:nth-child(4n+3) { animation-delay: .12s; }
.no-vt .cards .card.is-in:nth-child(4n+4) { animation-delay: .18s; }

@supports (animation-timeline: view()) {
  .reveal { animation: rise linear both; animation-timeline: view(); animation-range: entry 8% cover 26%; }
  .cards .card { animation: rise linear both; animation-timeline: view(); animation-range: entry 4% cover 20%; }
  .why-c { animation: rise linear both; animation-timeline: view(); animation-range: entry 6% cover 24%; }
  .tp-c { animation: rise linear both; animation-timeline: view(); animation-range: entry 5% cover 22%; }
}

/* ---- buttons ---- */
.btn-primary, .btn-line { display: inline-flex; align-items: center; justify-content: center; gap: 9px; min-height: 44px; box-sizing: border-box;
  padding: 14px 24px; border-radius: 6px; font-family: var(--font-body); font-size: 15px; line-height: 1.2; cursor: pointer;
  transition: transform .2s ease, box-shadow .2s ease, background .2s ease, border-color .2s ease, color .2s ease; }
.btn-primary { background: var(--color-accent); color: var(--color-on-accent); font-weight: 600; border: 1px solid var(--color-accent); }
.btn-primary:hover, .btn-primary:focus-visible { background: var(--color-accent-strong); border-color: var(--color-accent-strong); color: var(--color-on-accent);
  transform: translateY(-2px); box-shadow: 0 12px 28px var(--color-accent-ring); }
.btn-line { background: transparent; color: var(--color-text); font-weight: 500; border: 1px solid var(--color-iron); }
.btn-line:hover, .btn-line:focus-visible { border-color: var(--color-accent); background: var(--color-accent-soft); color: var(--color-text); }
.btn-lg { font-size: 17px; padding: 18px 32px; }
.btn-row { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 32px; }

/* ---- sections ---- */
.sec { padding: 96px 0; position: relative; }
.sec-tight { padding: 0 0 96px; }
.sec-head { max-width: 760px; }
.sec-lead { font-size: 17px; line-height: 1.7; color: var(--color-text-muted); margin: 22px 0 0; }
.band { border-top: 1px solid var(--color-border); border-bottom: 1px solid var(--color-border); }
/* The closing call-to-action band repeated at the foot of most pages. */
.cta-band { border-top: 1px solid var(--color-border); padding: 92px 0; }
.cta-tags { display: flex; flex-wrap: wrap; gap: 12px 28px; margin-top: 30px; }

/* ---- breadcrumb ---- */
.crumb { font-family: var(--font-mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--color-text-subtle); margin: 0 0 26px; }
.crumb a { color: var(--color-text-muted); }
.crumb a:hover { color: var(--color-accent); }
.crumb span { margin: 0 8px; color: var(--color-border-strong); }

/* ---- hero stat row ---- */
.hstats { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 38px; }
.hstat { flex: 1 1 150px; min-width: 0; padding: 18px 20px; border-radius: 12px; background: var(--color-bg-alt); box-shadow: none; }
.hstat-v { font-family: var(--font-body); font-weight: 600; font-size: 28px; line-height: 1.1;
  letter-spacing: -.02em; font-variant-numeric: tabular-nums; color: var(--color-text); margin: 0; }
.hstat-l { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .13em; text-transform: uppercase;
  color: var(--color-text-subtle); margin: 9px 0 0; line-height: 1.5; }

/* ---- homepage stat strip ---- */
.stats { background: var(--color-bg-alt); border-top: 1px solid var(--color-border); border-bottom: 1px solid var(--color-border); margin-top: 24px; }
.stat { flex: 1 1 190px; padding: 30px 24px; }
.stat:first-child { padding-left: 0; }
.stat:last-child { padding-right: 0; }
.stat-v { font-family: var(--font-display); font-weight: 700; font-size: 36px; letter-spacing: -.02em; line-height: .98; color: var(--color-gold-deep); margin: 0; }
.stat-l { font-size: 15px; color: var(--color-text-muted); margin: 8px 0 0; }

/* ---- tick list ---- */
.bullets { list-style: none; margin: 28px 0 0; padding: 0; display: grid; gap: 13px; }
.bullets li { position: relative; padding-left: 28px; font-size: 16px; line-height: 1.6; color: var(--color-text-muted); }
.bullets li::before { left: 2px; top: 7px; width: 11px; height: 6px; }
.bullets-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 13px 32px; }

/* ---- FAQ accordion ----
   Plain <details>, so it opens with no JavaScript and is keyboard operable
   for free. */
.faq { margin-top: 48px; border-top: 1px solid var(--color-border); }
.faq-i { border-bottom: 1px solid var(--color-border); }
.faq-q { list-style: none; cursor: pointer; display: flex; align-items: flex-start; justify-content: space-between; gap: 20px;
  padding: 22px 0; font-family: var(--font-display); font-weight: 700; font-size: 17.5px; line-height: 1.45;
  color: var(--color-text); transition: color .25s ease; }
.faq-q::-webkit-details-marker { display: none; }
.faq-q::marker { content: ""; }
.faq-q:hover, .faq-q:focus-visible { color: var(--color-accent); outline: none; }
.faq-q:focus-visible { text-decoration: underline; text-underline-offset: 5px; }
.faq-x { flex: 0 0 auto; width: 20px; height: 20px; margin-top: 2px; color: var(--color-text); transition: transform .35s var(--ease-out), color .25s ease; }
.faq-q:hover .faq-x, .faq-i[open] .faq-x { color: var(--color-accent); }
.faq-i[open] .faq-x { transform: rotate(45deg); }
.faq-a { font-size: 16px; line-height: 1.75; color: var(--color-text-muted); margin: 0 0 24px; max-width: 820px; }

/* ---- long-form text (legal pages, articles) ---- */
.prose { max-width: 760px; }
.prose h2 { font-family: var(--font-display); font-weight: 700; font-size: 26px; line-height: 1.25;
  color: var(--color-text); margin: 52px 0 0; letter-spacing: -.01em; }
.prose h3 { font-family: var(--font-display); font-weight: 700; font-size: 19px; color: var(--color-text); margin: 34px 0 0; }
.prose p { font-size: 16.5px; line-height: 1.8; color: var(--color-text-muted); margin: 18px 0 0; }
.prose ul, .prose ol { margin: 18px 0 0; padding-left: 22px; }
.prose li { font-size: 16.5px; line-height: 1.8; color: var(--color-text-muted); margin-top: 8px; }
.prose a, .data-note a, .lead a { color: var(--color-text); text-decoration: underline; text-decoration-color: var(--color-accent); text-underline-offset: 3px; }
.prose a:hover, .data-note a:hover, .lead a:hover { color: var(--color-accent); }
.prose strong { color: var(--color-text); font-weight: 600; }
.prose-meta { font-family: var(--font-mono); font-size: 12px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--color-text-subtle); margin: 0 0 20px; }

/* ---- forms ----
   The form scripts (site.js for contact/quote, ApplyForm.tsx for /apply)
   look up ids and toggle .is-invalid / .field-error, so those hooks are
   preserved exactly and only the appearance is styled here. */
.form { margin-top: 44px; }
.form-panel .form { margin-top: 0; }
/* the seeded forms stack one-row grids and bare fields, so rows need their
   own spacing */
.form form > .fgrid + *, .form form > .fctl + * { margin-top: 18px; }
.form-panel { position: relative; padding: 38px 36px 40px; border-radius: 18px; box-shadow: var(--shadow-md); }
.fgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 24px; }
.fgrid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.fspan { grid-column: 1 / -1; }
.flabel { display: block; font-family: var(--font-mono); font-size: 11px; letter-spacing: .13em;
  text-transform: uppercase; color: var(--color-text-muted); margin: 0 0 9px; }
.fctl { width: 100%; box-sizing: border-box; min-height: 48px; padding: 13px 15px; border-radius: 8px;
  border: 1px solid var(--color-border-strong); background: var(--color-bg); color: var(--color-text);
  font-family: var(--font-body); font-size: 15.5px; line-height: 1.5;
  transition: border-color .25s ease, box-shadow .25s ease; }
.fctl::placeholder { color: var(--color-text-subtle); }
.fctl:hover { border-color: var(--color-text-subtle); }
.fctl:focus { outline: none; border-color: var(--color-accent); box-shadow: 0 0 0 4px var(--color-accent-ring); }
textarea.fctl { min-height: 140px; resize: vertical; }
select.fctl { appearance: none; -webkit-appearance: none; cursor: pointer;
  background-image: linear-gradient(45deg, transparent 50%, var(--color-text) 50%), linear-gradient(135deg, var(--color-text) 50%, transparent 50%);
  background-position: calc(100% - 20px) 21px, calc(100% - 14px) 21px; background-size: 6px 6px, 6px 6px; background-repeat: no-repeat; }
.fhint { font-size: 13.5px; line-height: 1.6; color: var(--color-text-subtle); margin: 8px 0 0; }
.freq { color: var(--color-error); }
.fcheck { display: flex; align-items: flex-start; gap: 11px; font-size: 15px; line-height: 1.6; color: var(--color-text-muted); }
.fcheck input, .fchecks input { flex: 0 0 auto; accent-color: var(--color-accent); }
.fcheck input { width: 18px; height: 18px; margin: 2px 0 0; }
.fsec { font-family: var(--font-display); font-weight: 700; font-size: 17px; color: var(--color-text);
  margin: 46px 0 18px; padding-top: 26px; border-top: 1px solid var(--color-border); }
.fsec:first-of-type { margin-top: 0; padding-top: 0; border-top: 0; }
.fsub { font-size: 15px; line-height: 1.7; color: var(--color-text-muted); margin: -6px 0 18px; }
.fsub strong { color: var(--color-text); }
.fchecks { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 10px 20px; margin: 6px 0 10px; }
.fchecks label { display: flex; align-items: center; gap: 10px; font-size: 15px; color: var(--color-text-muted); cursor: pointer; }
.fchecks input { width: 17px; height: 17px; }
.fnote { font-size: 13.5px; line-height: 1.65; color: var(--color-text-subtle); margin-top: 16px; }
/* Spam trap: reachable to a bot's parser, invisible to people. The form
   scripts rely on it. */
.hp-field { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }
.fctl.is-invalid { border-color: var(--color-error); background: var(--color-error-soft); }
.fctl.is-invalid:focus { box-shadow: 0 0 0 4px var(--color-error-soft); border-color: var(--color-error); }
/* The consent tickbox carries no .fctl, so the border rules above cannot
   reach it. Without this it was the one required field that failed
   silently. */
input.is-invalid:not(.fctl) { outline: 2px solid var(--color-error); outline-offset: 3px; border-radius: 3px; }
/* the Turnstile widget is an iframe in a div, so it needs its own marker */
.cf-turnstile { margin: 18px 0 4px; }
.cf-turnstile.is-invalid { outline: 2px solid var(--color-error); outline-offset: 4px; border-radius: 6px; }
.field-error { display: block; color: var(--color-error); font-size: 13px; font-weight: 500; margin-top: 6px; }
/* The running verdict beside the submit button: how many fields are left,
   or that the form is ready to go. Hidden until there is something to say. */
.form-live { display: none; font-size: 14.5px; font-weight: 500; margin: 0 0 14px; }
.form-live.bad { display: block; color: var(--color-error); }
.form-live.ok { display: block; color: var(--color-success); }
.form-status { display: none; padding: 15px 18px; border-radius: 10px; margin-bottom: 20px; font-size: 14.5px; line-height: 1.6; }
.form-status.success { display: block; background: var(--color-success-soft); border: 1px solid var(--color-success); color: var(--color-success); }
.form-status.error { display: block; background: var(--color-error-soft); border: 1px solid var(--color-error); color: var(--color-error); }
.voice-box { border: 1px solid var(--color-border); border-left: 3px solid var(--color-text); border-radius: 12px;
  background: var(--color-bg-alt); padding: 22px 22px 20px; margin-top: 10px; }
.voice-script { border: 1px dashed var(--color-border-strong); border-radius: 10px; background: var(--color-bg);
  padding: 16px 18px; font-size: 15px; line-height: 1.65; color: var(--color-text-muted); margin: 14px 0; }
.voice-controls { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 8px; }
.rec-timer { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-weight: 500;
  font-size: 16px; color: var(--color-error); }

/* ---- pricing / plan cards ---- */
.plans { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; margin-top: 56px; }
.plan { position: relative; display: flex; flex-direction: column; padding: 32px 28px 30px; border-radius: 16px;
  transition: transform .4s var(--ease-out), border-color .4s ease, box-shadow .4s ease; }
.plan:hover { transform: translateY(-5px); }
.plan-f { border-color: var(--color-text); }
.plan-tag { position: absolute; top: -11px; left: 28px; padding: 5px 12px; border-radius: 999px; background: var(--color-text);
  color: var(--color-on-text); font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .13em; text-transform: uppercase; }
.plan-n { font-family: var(--font-display); font-weight: 700; font-size: 21px; color: var(--color-text); margin: 0; }
.plan-p { font-size: 15px; line-height: 1.65; color: var(--color-text-muted); margin: 12px 0 0; flex: 1; }

/* ---- article cards ---- */
.posts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; margin-top: 56px; }
.post { display: flex; flex-direction: column; border-radius: 14px; overflow: hidden; color: inherit;
  transition: transform .35s var(--ease-out), border-color .35s ease, box-shadow .35s ease; }
.post:hover { transform: translateY(-5px); color: inherit; }
.post-b { padding: 26px 24px 26px; display: flex; flex-direction: column; flex: 1; }
.post-t { font-family: var(--font-display); font-weight: 700; font-size: 19px; line-height: 1.32; color: var(--color-text); margin: 12px 0 0; }
.post-d { font-size: 15px; line-height: 1.65; color: var(--color-text-muted); margin: 11px 0 0; flex: 1; }
.post-meta { font-family: var(--font-mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--color-text-subtle); margin-top: 18px; }

/* ---- chip ---- */
.chip { display: inline-flex; align-items: center; gap: 8px; padding: 7px 14px; border-radius: 999px;
  border: 1px solid var(--color-border); background: var(--color-bg-alt);
  font-family: var(--font-mono); font-size: 11px; letter-spacing: .13em; text-transform: uppercase;
  color: var(--color-text-muted); }
.chip::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--color-text); }

/* ============================================================
   HEADER
   Sticky, with an accent wipe under each link and a mobile menu
   that is a <details>, so it opens with no JavaScript.
   ============================================================ */
.site-head { position: sticky; top: 0; z-index: 60;
  background: rgba(255, 255, 255, .92); -webkit-backdrop-filter: blur(14px) saturate(1.2); backdrop-filter: blur(14px) saturate(1.2);
  border-bottom: 1px solid var(--color-border);
  transition: background .35s ease, box-shadow .35s ease; }
.site-head.is-stuck { background: rgba(255, 255, 255, .98); box-shadow: var(--shadow-md); }
/* The mark itself is gold at rest via an SVG gradient fill (BrandMark.tsx),
   not currentColor — it's a brand identity element, not something a visitor
   acts on, so it doesn't follow the "amber on hover" rule the rest of the
   icon system uses. Only the lift/tilt motion signals interactivity. */
.brand { display: flex; align-items: center; gap: 12px; color: var(--color-text); }
.brand svg { transition: transform .4s var(--ease-out); }
.brand:hover svg { transform: translateY(-2px) rotate(-4deg); }
.brand-name { font-family: var(--font-display); font-weight: 700; font-size: 19px; letter-spacing: .01em; color: var(--color-text); }
.brand-name span { color: var(--color-gold-deep); } /* bold 19px clears the large-text 3:1 minimum (3.12:1) */

.nav { display: flex; align-items: center; gap: 2px; }
.navlink { position: relative; padding: 9px 13px; border-radius: 8px; font-size: 15px; color: var(--color-text);
  transition: color .25s ease, background .25s ease; }
.navlink::after { content: ""; position: absolute; left: 13px; right: 13px; bottom: 3px; height: 2px; border-radius: 2px;
  background: var(--color-accent);
  transform: scaleX(0); transform-origin: left; transition: transform .35s var(--ease-out); }
.navlink:hover, .navlink:focus-visible { color: var(--color-text); background: var(--color-bg-alt); outline: none; }
.navlink:hover::after, .navlink:focus-visible::after, .navlink[aria-current="page"]::after { transform: scaleX(1); }
.navlink[aria-current="page"] { font-weight: 500; }

.navmenu { display: none; position: relative; }
.navmenu-btn { list-style: none; cursor: pointer; display: inline-flex; align-items: center; justify-content: center;
  width: 46px; height: 46px; border-radius: 10px; border: 1px solid var(--color-border-strong);
  background: var(--color-bg); color: var(--color-text); transition: border-color .25s ease, background .25s ease, color .25s ease; }
.navmenu-btn::-webkit-details-marker { display: none; }
.navmenu-btn::marker { content: ""; }
.navmenu-btn:hover, .navmenu-btn:focus-visible, .navmenu[open] .navmenu-btn { border-color: var(--color-accent); color: var(--color-accent); outline: none; }
.navmenu-btn svg { width: 22px; height: 22px; }
.navmenu-btn .ico-close, .navmenu[open] .navmenu-btn .ico-open { display: none; }
.navmenu[open] .navmenu-btn .ico-close { display: block; }
.navmenu-panel { position: absolute; right: 0; top: calc(100% + 12px); width: min(78vw, 300px);
  padding: 12px; border-radius: 14px; border: 1px solid var(--color-border);
  background: var(--color-bg); box-shadow: var(--shadow-md); z-index: 61; }
.navmenu-panel a:not(.btn-primary) { display: block; padding: 13px 14px; border-radius: 9px; font-size: 16px; color: var(--color-text);
  transition: background .2s ease, color .2s ease; }
.navmenu-panel a:not(.btn-primary):hover, .navmenu-panel a:not(.btn-primary):focus-visible { background: var(--color-accent-soft); color: var(--color-text); outline: none; }
.navmenu-panel a[aria-current="page"] { box-shadow: inset 3px 0 0 var(--color-accent); background: var(--color-bg-alt); }
.navmenu-panel .btn-primary { width: 100%; margin-top: 8px; }
.navmenu[open] .navmenu-panel { animation: menu-in .28s var(--ease-out) both; }
@keyframes menu-in { from { opacity: 0; transform: translateY(-8px) scale(.98); } to { opacity: 1; transform: none; } }

/* ---- footer ---- */
.site-foot { background: var(--color-bg-alt); border-top: 1px solid var(--color-border); padding: 72px 0 40px; color: var(--color-text); }
.foot-text { font-size: 15px; line-height: 1.7; color: var(--color-text-muted); margin: 0; max-width: 340px; }
.foot-note { font-size: 14px; line-height: 1.7; color: var(--color-text-subtle); margin: 20px 0 0; max-width: 340px; }
.foot-h { color: var(--color-text); margin: 0 0 16px; }
.contact-lines { font-size: 15px; line-height: 1.9; color: var(--color-text-muted); margin: 0; }
.contact-lines a { color: var(--color-text-muted); }
.contact-lines a:hover { color: var(--color-accent); }
.foot-base { margin-top: 56px; padding-top: 24px; border-top: 1px solid var(--color-border); gap: 24px; justify-content: space-between; align-items: center; }
.foot-base p { font-size: 14px; color: var(--color-text-subtle); margin: 0; }
.foot-base .flink { display: inline; line-height: 1; }
.foot-sep { margin: 0 10px; color: var(--color-border-strong); }

/* ============================================================
   SERVICE DETAIL CARDS (what each service covers)
   ============================================================ */
.vert { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; margin-top: 56px; }
.vert-c { position: relative; display: flex; flex-direction: column; padding: 32px 30px 30px; border-radius: 18px;
  transition: transform .4s var(--ease-out), border-color .4s ease, box-shadow .4s ease; }
.vert-c:hover { transform: translateY(-5px); }
.vert-top { display: flex; align-items: center; gap: 16px; }
.vert-i { flex: 0 0 auto; width: 54px; height: 54px; border-radius: 16px; }
.vert-i svg { width: 27px; height: 27px; overflow: visible; }
.vert-t { font-family: var(--font-display); font-weight: 700; font-size: 22px; line-height: 1.25; color: var(--color-text); margin: 0; }
.vert-d { font-size: 16px; line-height: 1.75; color: var(--color-text-muted); margin: 20px 0 0; }
.vert-list { list-style: none; margin: 22px 0 0; padding: 20px 0 0; border-top: 1px solid var(--color-border);
  display: grid; gap: 11px; }
.vert-list li { position: relative; padding-left: 26px; font-size: 15px; line-height: 1.55; color: var(--color-text-muted); }
/* The tick's RESTING state is drawn, not hidden. The pop-in lives entirely in
   the keyframes, so reduced motion leaves a visible tick. */
.vert-list li::before { left: 1px; top: 6px; width: 10px; height: 5px; transform-origin: center; }
.vert-c.is-in .vert-list li::before { animation: tick-in .4s cubic-bezier(.3,1.4,.5,1) both; }
.vert-c.is-in .vert-list li:nth-child(2)::before { animation-delay: .07s; }
.vert-c.is-in .vert-list li:nth-child(3)::before { animation-delay: .14s; }
.vert-c.is-in .vert-list li:nth-child(4)::before { animation-delay: .21s; }
.vert-c.is-in .vert-list li:nth-child(5)::before { animation-delay: .28s; }
@keyframes tick-in { from { transform: rotate(-45deg) scale(0); } to { transform: rotate(-45deg) scale(1); } }

/* ============================================================
   SERVICE OVERVIEW RAIL
   Each item carries its own icon on a line that fills as the
   section is scrolled through.
   ============================================================ */
.ov { display: grid; grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr); gap: 60px; align-items: start; }
.ov-lead { font-size: 17px; line-height: 1.8; color: var(--color-text-muted); margin: 24px 0 0; }
.ov-cta { margin-top: 30px; }
.ov-list { position: relative; list-style: none; margin: 0; padding: 0; max-width: 560px; }
/* The track and its fill are pinned BEHIND the rows: the rows' `rise`
   animation makes each a stacking context, which traps the medallion's
   z-index inside the row. */
.ov-list::before, .ov-list::after { content: ""; position: absolute; left: 27px; width: 2px; border-radius: 2px; z-index: 0; }
.ov-list::before { top: 20px; bottom: 20px; background: var(--color-border); }
.ov-list::after { top: 20px; height: 0; background: var(--color-text); }
@supports (animation-timeline: view()) {
  .ov-list::after { animation: ov-fill linear both; animation-timeline: view();
    animation-range: entry 30% cover 62%; }
}
.no-vt .ov-list.is-in::after { animation: ov-fill 1.4s var(--ease-out) both; }
@keyframes ov-fill { from { height: 0; } to { height: calc(100% - 40px); } }
.ov-i { position: relative; z-index: 1; display: flex; align-items: flex-start; gap: 20px; padding: 13px 16px 13px 0;
  border-radius: 14px; transition: background .35s ease, transform .35s var(--ease-out); }
.ov-i + .ov-i { margin-top: 6px; }
.ov-i:hover { background: var(--color-bg-alt); transform: translateX(5px); }
.ov-m { flex: 0 0 auto; width: 56px; height: 56px; border-radius: 17px; background: var(--color-bg); }
.ov-m svg { width: 27px; height: 27px; overflow: visible; }
.ov-b { padding-top: 15px; }
.ov-t { display: block; font-size: 17px; line-height: 1.5; color: var(--color-text); margin: 0; }
.ov-d { display: block; font-size: 15px; line-height: 1.65; color: var(--color-text-muted); margin: 7px 0 0; }
.ov-n { display: block; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .14em;
  color: var(--color-text-subtle); margin: 0 0 5px; transition: color .3s ease; }
.ov-i:hover .ov-n { color: var(--color-accent); }
/* A whole row made clickable without nesting the content inside the link:
   the anchor is stretched over the row, above the medallion's z-index 1. */
.ov-go { position: absolute; inset: 0; z-index: 2; border-radius: inherit; }
/* A ring travels down the medallions one after the next, on a loop, so the
   section reads as live. It sits on a pseudo-element so :hover keeps
   control of the medallion's own box-shadow. */
.ov-m::after { content: ""; position: absolute; inset: -1px; border-radius: inherit;
  pointer-events: none; opacity: 0; box-shadow: 0 0 0 1px var(--color-text), 0 0 16px 1px rgba(30, 37, 43, .18); }
.ov-list.is-in .ov-m::after { animation: ov-travel 6s ease-in-out infinite; }
.ov-list.is-in .ov-i:nth-child(2) .ov-m::after { animation-delay: .45s; }
.ov-list.is-in .ov-i:nth-child(3) .ov-m::after { animation-delay: .9s; }
.ov-list.is-in .ov-i:nth-child(4) .ov-m::after { animation-delay: 1.35s; }
.ov-list.is-in .ov-i:nth-child(5) .ov-m::after { animation-delay: 1.8s; }
.ov-i:hover .ov-m::after { animation: none; opacity: 0; }
@keyframes ov-travel { 0% { opacity: 0; } 6% { opacity: 1; } 22% { opacity: 0; } 100% { opacity: 0; } }
/* each row arrives in turn */
.ov-list.is-in .ov-i { animation: rise .55s var(--ease-out) both; }
.ov-list.is-in .ov-i:nth-child(2) { animation-delay: .09s; }
.ov-list.is-in .ov-i:nth-child(3) { animation-delay: .18s; }
.ov-list.is-in .ov-i:nth-child(4) { animation-delay: .27s; }
.ov-list.is-in .ov-i:nth-child(5) { animation-delay: .36s; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1080px) {
  .cards, .data, .ind, .tp, .plans, .posts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 980px) {
  .nav { display: none; }
  .navmenu { display: block; }
  .site-head .head-cta { display: none; }
  .vert { grid-template-columns: minmax(0, 1fr); }
  .ov { grid-template-columns: minmax(0, 1fr); gap: 40px; }
}
@media (max-width: 860px) {
  .wrap { padding: 0 22px; }
  .display { font-size: 40px !important; }
  .h2 { font-size: 30px; }
  .sec { padding: 68px 0; }
  .sec-tight { padding: 0 0 68px; }
  .cta-band { padding: 68px 0; }
  .newsbar-item { font-size: 14px; line-height: 1.45; padding: 11px 18px; gap: 10px; text-align: left; justify-content: flex-start; }
  .newsbar-date, .newsbar-go { display: none; }
  .why { grid-template-columns: minmax(0, 1fr); gap: 16px; margin-top: 44px; }
  .data, .tp, .ind, .plans, .posts { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .data-v { font-size: 38px; }
  .stat, .stat:first-child, .stat:last-child { flex-basis: 40%; padding: 20px 0; }
  .stat-v { font-size: 28px; }
  /* Stacked 16:9 cards make the phone page enormous, so the card turns on
     its side: square thumbnail left, copy right. */
  .cards { grid-template-columns: minmax(0, 1fr); gap: 14px; margin-top: 40px; }
  .card { flex-direction: row; align-items: stretch; }
  .card:hover { transform: none; }
  /* align-self keeps the thumbnail square once a card is expanded */
  .card-img { flex: 0 0 112px; aspect-ratio: 1 / 1; align-self: flex-start; }
  .card-body { padding: 16px 18px; }
  .card-t { font-size: 17px; }
  .card-d { font-size: 14px; margin-top: 6px; }
  .card-more { margin-top: 14px; }
  .card-sum { padding-top: 12px; font-size: 11px; }
  .card-list { margin-top: 13px; gap: 8px; }
  .card-list li { font-size: 13.5px; }
  .card-cta { margin-top: 16px; font-size: 13px; padding: 10px 14px; }
  .amb::before { background-size: 54px 54px; }
  .tp-c { padding: 24px 20px 22px; }
  .tp-t { font-size: 17px; }
  .tp-i + .tp-t { margin-top: 18px; }
  .rail { flex-direction: column; gap: 42px; margin-top: 58px; }
  .step { padding: 0; text-align: left; }
  .step-in { padding: 0 20px 22px; text-align: left; }
  .day { margin-top: 14px; }
  /* the rail stacks vertically on a phone, where a horizontal connector
     between columns no longer describes anything */
  .step::before, .step::after { display: none; }
  .fgrid, .fgrid-3, .bullets-2 { grid-template-columns: minmax(0, 1fr); }
  .fgrid { gap: 18px; }
  .form-panel { padding: 26px 20px 28px; border-radius: 14px; }
  .fsec { margin-top: 36px; }
  .hstats { gap: 10px; }
  .hstat { flex: 1 1 100%; }
  .faq-q { font-size: 16px; padding: 18px 0; }
  .prose h2 { font-size: 22px; margin-top: 42px; }
  .vert-c { padding: 26px 22px 24px; border-radius: 14px; }
  .vert-t { font-size: 20px; }
  .ov-m { width: 48px; height: 48px; border-radius: 14px; }
  .ov-m svg { width: 23px; height: 23px; }
  .ov-list::before, .ov-list::after { left: 23px; }
  .ov-i { gap: 16px; padding: 11px 10px 11px 0; }
  .ov-b { padding-top: 11px; }
  .ov-t { font-size: 16px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  /* the finished state, not an empty one */
  .why-t::after { width: 0 !important; }
  .step::after { transform: scaleX(1) !important; }
  .ov-list::after { height: calc(100% - 40px) !important; }
  .ov-m::after { opacity: 0 !important; }
  .premium-loader { display: none !important; }
}

/* ============================================================
   INTRO LOADER
   ------------------------------------------------------------
   The shield, the wordmark, once per visit. The shield keeps its
   own gold gradient (defined inside IntroLoader.tsx) as a small,
   self-contained brand moment; everything around it follows the
   site palette.

   Budget: 1.5s from first paint to gone. The overlay clears
   itself on a CSS timer rather than waiting to be told to, so a
   blocked or failed script can never leave the site behind it.
   ============================================================ */
.premium-loader { position: fixed; inset: 0; z-index: 100000; display: flex;
  flex-direction: column; align-items: center; justify-content: center;
  background: var(--color-bg);
  animation: ldr-exit 450ms ease 2000ms forwards; }
/* the self-clearing exit: opacity, then out of the way for good */
@keyframes ldr-exit { to { opacity: 0; visibility: hidden; pointer-events: none; } }
html.loader-lock, html.loader-lock body { overflow: hidden; height: 100%; }

.ldr-stage { position: relative; width: 148px; height: 173px;
  display: flex; align-items: center; justify-content: center; }
/* Halo fades in under the shield, then spikes once as the monogram lands. */
.ldr-halo { position: absolute; inset: -34px; border-radius: 50%;
  background: radial-gradient(circle, rgba(212,175,55,.22) 0%, transparent 70%);
  opacity: 0;
  animation: ldr-halo-in 500ms ease 300ms both,
             ldr-halo-hit 420ms cubic-bezier(.2,.8,.3,1) 720ms both; }
@keyframes ldr-halo-in { to { opacity: 1; } }
@keyframes ldr-halo-hit { 0% { transform: scale(1); }
                          35% { transform: scale(1.5); opacity: .95; }
                          100% { transform: scale(1); opacity: .6; } }
/* The forge sequence: same keyframes, easings and offsets as the standalone
   intro in the brand repo, so the loader and the video stay identical. */
.ldr-mark { width: 100%; height: 100%; display: block; overflow: visible; }
.ldr-draw { animation: ldr-draw 560ms cubic-bezier(.5,0,.2,1) both; }
.ldr-fill { animation: ldr-flood 400ms ease-out 390ms both,
                       ldr-molten 620ms ease-out 390ms both; }
.ldr-mono { transform-origin: 60px 70px;
  animation: ldr-stamp 360ms cubic-bezier(.3,1.5,.4,1) 720ms both; }
.ldr-sweep { animation: ldr-sweep 700ms cubic-bezier(.4,0,.3,1) 940ms both; }
@keyframes ldr-draw { from { stroke-dashoffset: 1000; } to { stroke-dashoffset: 0; } }
@keyframes ldr-flood { from { opacity: 0; clip-path: inset(100% 0 0 0); }
                       to   { opacity: 1; clip-path: inset(0 0 0 0); } }
@keyframes ldr-molten { 0%  { filter: drop-shadow(0 0 0 rgba(244,211,94,0)); }
                        45% { filter: drop-shadow(0 0 16px rgba(244,211,94,.85)); }
                        100%{ filter: drop-shadow(0 0 4px rgba(212,175,55,.25)); } }
@keyframes ldr-stamp { from { opacity: 0; transform: scale(1.55); }
                       to   { opacity: 1; transform: scale(1); } }
@keyframes ldr-sweep { from { opacity: .95; transform: translateX(-45px) skewX(-16deg); }
                       65%  { opacity: .95; }
                       to   { opacity: 0; transform: translateX(140px) skewX(-16deg); } }

.ldr-name { margin-top: 24px; color: var(--color-text);
  font-family: var(--font-display); font-weight: 700; font-size: 40px;
  line-height: 1; opacity: 0;
  animation: ldr-track 500ms var(--ease-out) 1020ms both; }
@keyframes ldr-track { from { opacity: 0; letter-spacing: .42em; }
                       to   { opacity: 1; letter-spacing: .015em; } }
.ldr-tech { display: flex; align-items: center; gap: 13px;
  width: 290px; max-width: 72vw; margin-top: 16px; opacity: 0;
  animation: ldr-rise 400ms ease-out 1280ms both; }
.ldr-tech i { flex: 1; height: 1px; background: linear-gradient(90deg, transparent, var(--color-text)); }
.ldr-tech i.r { background: linear-gradient(90deg, var(--color-text), transparent); }
.ldr-tech b { font-family: var(--font-display); font-weight: 500; font-size: 16px;
  letter-spacing: .44em; text-indent: .44em; color: var(--color-text-muted); }
.ldr-tag { margin-top: 16px; opacity: 0; text-align: center; padding-inline: 20px;
  font-family: var(--font-mono); font-weight: 500; font-size: 11px;
  letter-spacing: .165em; text-transform: uppercase; color: var(--color-text-subtle);
  animation: ldr-rise 400ms ease-out 1460ms both; }
@keyframes ldr-rise { from { opacity: 0; transform: translateY(7px); }
                      to   { opacity: 1; transform: none; } }
@media (max-width: 575.98px) {
  .ldr-stage { width: 104px; height: 121px; }
  .ldr-name { font-size: 28px; margin-top: 18px; }
  .ldr-tech { width: 220px; margin-top: 12px; }
  .ldr-tech b { font-size: 13px; }
  .ldr-tag { font-size: 9.5px; margin-top: 12px; }
}