/* ════════════════════════════════════════════════════════════
   GovRFP Strategic Solutions — "Federal Gilt"
   Midnight navy · brand red · cyan · high-contrast serif
   Royal read as institutional gravitas. Palette unchanged from
   the brand: navy structure, red seal, cyan instrumentation.
════════════════════════════════════════════════════════════ */

/* ── 1. TOKENS ───────────────────────────────────────────── */
:root {
  /* Midnight — the dark chapters */
  --ink:        #08111F;
  --ink-1:      #0C1A2E;
  --ink-2:      #122542;
  --ink-3:      #1A3358;
  --navy:       #1C3461;
  --navy-soft:  #2C4C82;

  /* The seal — your action red, now doing ceremonial duty:
     ornament lozenges, corner brackets, rules, primary buttons. */
  --seal:       #C8102E;
  --seal-lt:    #E4485F;
  --seal-pale:  #F6C9D0;
  --seal-dk:    #9E0C24;
  --seal-wash:  rgba(200, 16, 46, 0.07);
  /* Foreground on a red fill — red needs white:
     #C8102E against the near-black ink is only ~2.5:1. */
  --on-seal:    #FFFFFF;
  /* Ornamental hairline. Navy-tinted on parchment; the dark-chapter
     override below swaps it to cyan so it reads on midnight. */
  --seal-line:  rgba(28, 52, 97, 0.22);

  --red:        #C8102E;
  --red-dk:     #9E0C24;

  /* Data / live — your cyan, reserved for status and instrumentation */
  --data:       #00D2FF;
  --data-ink:   #0E7490;

  /* Parchment — the light chapters */
  --paper:      #FCFAF5;
  --paper-2:    #F5F1E7;
  --paper-3:    #EDE7D8;
  --rule-soft:  #E4DCC8;
  --rule-hard:  #D2C6A8;

  /* Ink on light */
  --t-hi:       #131F33;
  --t-mid:      #445067;
  --t-low:      #78829A;

  /* Ink on dark */
  --d-hi:       #F3F1E9;
  --d-mid:      rgba(243, 241, 233, 0.68);
  --d-low:      rgba(243, 241, 233, 0.42);
  --d-line:     rgba(243, 241, 233, 0.12);

  /* Status */
  --ok:   #3F9E6C;
  --warn: #C9922B;
  --idle: #7C8AA3;

  /* Elevation — deep and soft, never puffy */
  --sh-xs: 0 1px 2px rgba(8, 17, 31, 0.06);
  --sh-sm: 0 2px 10px rgba(8, 17, 31, 0.07);
  --sh-md: 0 10px 34px rgba(8, 17, 31, 0.10);
  --sh-lg: 0 26px 70px rgba(8, 17, 31, 0.16);
  --sh-seal: 0 6px 24px rgba(200, 16, 46, 0.24);

  /* Type */
  --f-display: 'Playfair Display', 'Iowan Old Style', Georgia, serif;
  --f-ui: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --f-mono: ui-monospace, 'SF Mono', 'Cascadia Mono', Menlo, monospace;

  --fs-display: clamp(2.5rem, 1.3rem + 4.2vw, 4.6rem);
  --fs-h1:      clamp(2.1rem, 1.4rem + 2.8vw, 3.4rem);
  --fs-h2:      clamp(1.7rem, 1.2rem + 1.9vw, 2.7rem);
  --fs-h3:      clamp(1.2rem, 1.05rem + 0.6vw, 1.5rem);
  --fs-lead:    clamp(1.02rem, 0.96rem + 0.35vw, 1.16rem);

  /* Geometry — squarer than before; certificates aren't pill-shaped */
  --r-sm: 3px;
  --r:    5px;
  --r-lg: 8px;
  --strip-h: 36px;
  --bar-h:   72px;
  --nav-h:   var(--bar-h);   /* mobile: bar only, no utility strip */
  --maxw: 1200px;

  /* Motion */
  --pre-dur: 3s;   /* preloader beat — retune the whole splash from here */
  --ease:    cubic-bezier(0.22, 1, 0.36, 1);
  --ease-io: cubic-bezier(0.65, 0, 0.35, 1);
  --dur:     0.6s;
}

@media (max-width: 640px) { :root { --bar-h: 62px; } }
/* From 900px up the utility strip is present, so the header is taller */
@media (min-width: 900px) { :root { --nav-h: calc(var(--strip-h) + var(--bar-h)); } }

/* Dark chapters retune two tokens only: hairlines go cyan so they read
   against midnight, and the pale tone brightens. Red stays red
   everywhere — it is the constant across the whole site. */
/* .nav and .drawer are deliberately absent: the header is a light
   chapter now, so its hairlines stay navy-tinted rather than cyan. */
.hero, .page-head, .cta, .bg-ink, .bg-navy, .bg-navy-dark,
.footer, .panel__bar, .box--navy {
  --seal-line: rgba(0, 210, 255, 0.22);
  --seal-pale: #BFF0FF;
}

/* ── 2. RESET ────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
  font-size: 16px;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--nav-h) + 24px);
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--f-ui);
  font-size: 1rem;
  line-height: 1.68;
  color: var(--t-mid);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}
body.no-scroll { overflow: hidden; }

img, svg, video { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }
button { font: inherit; color: inherit; cursor: pointer; background: none; border: none; }
input, select, textarea { font: inherit; }
table { border-collapse: collapse; width: 100%; }

:focus-visible { outline: 2px solid var(--seal); outline-offset: 3px; border-radius: 2px; }
::selection { background: var(--seal); color: var(--on-seal); }

.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; top: -100px; left: 1rem; z-index: 2000;
  background: var(--seal); color: var(--on-seal);
  padding: 0.75rem 1.25rem; border-radius: 0 0 var(--r) var(--r);
  font-size: 0.875rem; font-weight: 700;
  transition: top 0.2s var(--ease);
}
.skip-link:focus { top: 0; }

/* ── 3. TYPOGRAPHY ───────────────────────────────────────── */
h1, h2, h3, h4, h5 {
  font-family: var(--f-display);
  font-weight: 600;
  line-height: 1.14;
  letter-spacing: -0.015em;
  color: var(--t-hi);
  text-wrap: balance;
}
h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }
h4 { font-size: 1.08rem; font-weight: 600; }

p { text-wrap: pretty; }

.display {
  font-family: var(--f-display);
  font-size: var(--fs-display);
  font-weight: 600;
  line-height: 1.04;
  letter-spacing: -0.022em;
}
.lead { font-size: var(--fs-lead); line-height: 1.72; }
.muted { color: var(--t-low); }
.ink { color: var(--t-hi); }

/* The gilded word. Colour is set first so the text is never
   invisible if background-clip is unsupported or JS never runs;
   .gild-on is added by main.js only after a support check. */
.accent { color: var(--seal-dk); font-style: italic; }
.gild-on .accent,
.accent.gild-on {
  /* background-image, NEVER the `background` shorthand. The shorthand
     resets background-clip to border-box, while -webkit-text-fill-color
     is not part of it and survives — leaving transparent text with an
     unclipped gradient, i.e. an invisible word. Any override below must
     also use background-image only. */
  background-image: linear-gradient(96deg, var(--seal-dk) 0%, var(--seal) 26%, var(--seal-pale) 47%, var(--seal) 64%, var(--seal-dk) 100%);
  background-size: 220% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: gildSweep 7s var(--ease-io) 0.6s infinite;
}
/* Positions stay inside 0–100% so the gradient always covers the glyphs.
   Pushing past those bounds can leave the text with nothing painted. */
@keyframes gildSweep {
  0%, 60%   { background-position: 100% 0; }
  86%, 100% { background-position: 0% 0; }
}
.on-dark .accent, .bg-ink .accent, .hero .accent, .cta .accent,
.page-head .accent { color: var(--seal-lt); }
/* Brighter gild on the dark chapters — the dark end-stops of the light
   gradient would read as holes against midnight. */
.hero .accent.gild-on, .cta .accent.gild-on,
.bg-ink .accent.gild-on, .page-head .accent.gild-on {
  background-image: linear-gradient(96deg, var(--seal) 0%, var(--seal-lt) 26%, #FFF0F2 47%, var(--seal-lt) 64%, var(--seal) 100%);
}

/* Eyebrow — letterspaced small caps with a gilt dash */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  font-family: var(--f-ui);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--seal-dk);
  margin-bottom: 1.15rem;
}
.eyebrow::before {
  content: '';
  width: 26px; height: 1px;
  background: currentColor;
  flex: none;
}
.eyebrow.center { justify-content: center; }
.eyebrow.center::before { display: none; }
.eyebrow.on-dark, .bg-ink .eyebrow, .cta .eyebrow, .hero .eyebrow { color: var(--seal-lt); }

/* ── ORNAMENTAL RULE ──────────────────────────────────────
   A gilt hairline with a lozenge at its centre — the divider
   used on certificates and letterhead. The line is the
   injected .wipe-i child (see motion note below); the lozenge
   is a pseudo-element so it can settle after the line draws. */
.rule {
  position: relative;
  width: 104px; height: 10px;
  background: transparent;
  margin: 1.3rem 0 1.7rem;
  overflow: visible;
}
.rule.center { margin-inline: auto; }
.rule::after {
  content: '';
  position: absolute;
  left: 50%; top: 50%;
  width: 7px; height: 7px;
  translate: -50% -50%;
  rotate: 45deg;
  background: var(--seal);
  scale: 0;
  transition: scale 0.5s var(--ease) 0.34s;
}
.rule.is-visible::after { scale: 1; }
.rule .wipe-i {
  background:
    linear-gradient(90deg, transparent 0%, var(--seal-line) 14%, var(--seal) 42%,
                    transparent 47%, transparent 53%, var(--seal) 58%,
                    var(--seal-line) 86%, transparent 100%)
    center / 100% 1px no-repeat;
}
.rule.on-dark::after { background: var(--seal-lt); }
.rule.on-dark .wipe-i {
  background:
    linear-gradient(90deg, transparent 0%, rgba(0,210,255,.30) 14%, var(--seal-lt) 42%,
                    transparent 47%, transparent 53%, var(--seal-lt) 58%,
                    rgba(0,210,255,.30) 86%, transparent 100%)
    center / 100% 1px no-repeat;
}

.mono {
  font-family: var(--f-mono);
  font-size: 0.74rem;
  letter-spacing: 0.06em;
  font-variant-numeric: tabular-nums;
}

/* ── 4. LAYOUT ───────────────────────────────────────────── */
.container {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: 1.25rem;
}
@media (min-width: 640px)  { .container { padding-inline: 2rem; } }
@media (min-width: 1024px) { .container { padding-inline: 3rem; } }

.section { padding-block: clamp(3rem, 1.75rem + 4.5vw, 5.5rem); }
.section-sm { padding-block: clamp(2rem, 1.25rem + 2.5vw, 3rem); }

/* Light chapters */
.bg-white     { background: var(--paper); }
.bg-paper     { background: var(--paper); }
.bg-off-white { background: var(--paper-2); }
/* Dark chapters */
.bg-navy, .bg-ink   { background: var(--ink-1); }
.bg-navy-dark       { background: var(--ink); }

.edge-top    { border-top: 1px solid var(--rule-soft); }
.edge-bottom { border-bottom: 1px solid var(--rule-soft); }

/* Every dark chapter carries a gilt hairline at its head */
.bg-navy, .bg-ink, .bg-navy-dark, .cta { position: relative; }
.bg-navy::before, .bg-ink::before, .cta::before {
  content: '';
  position: absolute; inset: 0 0 auto 0; height: 1px;
  background: linear-gradient(90deg, transparent, var(--seal-line) 22%, var(--seal-line) 78%, transparent);
}

.grid-2, .grid-3, .grid-4 { display: grid; gap: 1.5rem; grid-template-columns: 1fr; }
@media (min-width: 720px) {
  .grid-2 { grid-template-columns: repeat(2, 1fr); gap: 2.75rem; }
  .grid-3 { grid-template-columns: repeat(2, 1fr); }
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
  .grid-3 { grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
  .grid-4 { grid-template-columns: repeat(4, 1fr); }
}
.split { align-items: center; }
.split-top { align-items: start; }
.text-center { text-align: center; }

.sec-head { margin-bottom: clamp(1.9rem, 1.2rem + 2.2vw, 3rem); max-width: 720px; }
.sec-head.center { margin-inline: auto; text-align: center; }
.sec-head .lead { color: var(--t-low); margin-top: 1rem; }
.bg-ink .sec-head .lead, .bg-navy .sec-head .lead, .cta .sec-head .lead { color: var(--d-mid); }

/* Dark-chapter text inversion */
.bg-ink, .bg-navy, .bg-navy-dark, .cta { color: var(--d-mid); }
.bg-ink h1, .bg-ink h2, .bg-ink h3, .bg-ink h4,
.bg-navy h1, .bg-navy h2, .bg-navy h3, .bg-navy h4,
.cta h1, .cta h2, .cta h3, .cta h4 { color: var(--d-hi); }

/* Engraved plate texture — static, no motion */
.gridlines {
  position: absolute; inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(28, 52, 97, 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(28, 52, 97, 0.04) 1px, transparent 1px);
  background-size: 60px 60px;
  -webkit-mask-image: radial-gradient(ellipse 88% 72% at 50% 40%, #000 18%, transparent 100%);
  mask-image: radial-gradient(ellipse 88% 72% at 50% 40%, #000 18%, transparent 100%);
}
.gridlines.on-dark, .bg-ink .gridlines, .cta .gridlines, .hero .gridlines {
  background-image:
    linear-gradient(rgba(0, 210, 255, 0.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 210, 255, 0.055) 1px, transparent 1px);
}

/* ── 5. MOTION PRIMITIVES ────────────────────────────────── */
/* ⚠ CRITICAL — NEVER hide a reveal target by zeroing its own box
   area (clip-path to nothing, scale: 0, width: 0, visibility:
   hidden). IntersectionObserver's ratio accounts for clipping and
   transforms, so an element hidden that way reports ratio 0, never
   fires, never receives .is-visible, and stays hidden forever — it
   hides itself from the observer meant to reveal it.

   `opacity` and non-zero `translate` are safe: they don't change
   the geometry IO measures. Anything that collapses the box goes
   on an INJECTED CHILD (.mask-i / .wipe-i), never on the observed
   element. This previously cost us every h2 on the site.

   Also: no blanket `will-change`. 100+ targets would mean 100+
   permanent compositor layers, which causes the very stutter the
   property is meant to prevent. */

[data-reveal] {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
  transition-delay: var(--delay, 0s);
}
[data-reveal].is-visible { opacity: 1; transform: none; }

/* Masked rise — headings. Clip on the heading, motion on the child. */
[data-reveal="mask"] { opacity: 1; transform: none; }
[data-reveal="mask"].mask-ready {
  overflow: hidden;
  padding-bottom: 0.16em;
  margin-bottom: -0.16em;
}
[data-reveal="mask"].mask-ready > .mask-i {
  display: block;
  transform: translateY(105%);
  transition: transform 1s var(--ease);
  transition-delay: var(--delay, 0s);
}
[data-reveal="mask"].mask-ready.is-visible > .mask-i { transform: none; }

/* Wipe — ornamental rules. Same principle. */
[data-reveal="wipe"] { opacity: 1; transform: none; }
[data-reveal="wipe"].wipe-ready { overflow: visible; }
[data-reveal="wipe"].wipe-ready > .wipe-i {
  display: block; width: 100%; height: 100%;
  transform-origin: center;
  scale: 0 1;
  transition: scale 0.8s var(--ease);
  transition-delay: var(--delay, 0s);
}
[data-reveal="wipe"].wipe-ready.is-visible > .wipe-i { scale: 1 1; }

[data-reveal="rise"] {
  opacity: 0;
  transform: translateY(28px) scale(0.99);
  transition: opacity 0.9s var(--ease), transform 0.9s var(--ease);
  transition-delay: var(--delay, 0s);
}
[data-reveal="rise"].is-visible { opacity: 1; transform: none; }

[data-stagger] > * { --delay: calc(var(--i, 0) * 70ms); }

.progress-rail {
  position: fixed; inset: 0 0 auto 0;
  height: 2px; z-index: 1100;
  pointer-events: none;
}
.progress-rail span {
  display: block; height: 100%; width: 0%;
  background: linear-gradient(90deg, var(--seal-dk), var(--seal-lt));
  transition: width 0.1s linear;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  [data-reveal], [data-reveal="mask"], [data-reveal="wipe"], [data-reveal="rise"] {
    opacity: 1 !important; transform: none !important;
    clip-path: none !important; scale: 1 1 !important;
    overflow: visible !important;
  }
  .mask-i, .wipe-i { transform: none !important; scale: 1 1 !important; }
  .rule::after { scale: 1 !important; }
  .svc__index .eyebrow::before { scale: 1 1 !important; }
  .svc-curtain { display: none !important; }
  .marquee__track { animation: none !important; }
  .doc-stack__inner { transform: none !important; }
}

/* ── 6. NAVIGATION ─────────────────────────────────────
   The header is the one light chapter that sits above the dark hero,
   matching the previous site. Its palette is the OLD site's colour
   group, declared here as header-scoped tokens so nothing else on the
   page inherits them — the body of the site keeps the parchment and
   midnight tokens from section 1. */
.nav, .drawer {
  --hdr-bg:       rgba(255, 255, 255, 0.95);   /* old --white   */
  --hdr-solid:    #FFFFFF;
  --hdr-strip:    #F6F8FC;                     /* old --off-white */
  --hdr-line:     #D4DAEA;                     /* old --border  */
  --hdr-navy:     #1C3461;                     /* old --navy    */
  --hdr-navy-lt:  #2D528F;                     /* old --navy-light */
  --hdr-body:     #3A4D70;                     /* old --text-body  */
  --hdr-muted:    #6478A2;                     /* old --text-muted */
}

.nav {
  position: fixed; inset: 0 0 auto 0;
  z-index: 1000; height: auto;
  background: var(--hdr-bg);
  backdrop-filter: saturate(140%) blur(10px);
  -webkit-backdrop-filter: saturate(140%) blur(10px);
  border-bottom: 1px solid var(--hdr-line);
  transition: background 0.35s var(--ease), border-color 0.35s var(--ease),
              box-shadow 0.35s var(--ease);
}
/* Opaque once stuck — a blurred fixed layer repainting every scroll
   frame is the most expensive thing a header can do. */
.nav.is-stuck {
  background: var(--hdr-solid);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-bottom-color: transparent;
  box-shadow: var(--sh-sm);
}

/* ── Utility strip ──────────────────────────────────
   Desktop only, and it retracts on scroll so the header compacts to a
   single bar once you are reading. Hidden below 900px on purpose: that
   is exactly where the burger appears, and two competing navigation
   affordances is what caused the duplicate-CTA bug this replaces. */
.nav__strip {
  display: none;
  height: var(--strip-h);
  overflow: hidden;
  background: var(--hdr-strip);
  border-bottom: 1px solid var(--hdr-line);
  transition: height 0.4s var(--ease), opacity 0.3s var(--ease), border-color 0.3s;
}
@media (min-width: 900px) { .nav__strip { display: block; } }
.nav.is-stuck .nav__strip { height: 0; opacity: 0; border-bottom-color: transparent; }

.nav__strip-inner {
  height: var(--strip-h);
  display: flex; align-items: center; justify-content: space-between;
  gap: 1.5rem;
  font-size: 0.63rem; font-weight: 600;
  letter-spacing: 0.2em; text-transform: uppercase;
  /* --hdr-body, not --hdr-muted: this text is ~10px, and the muted blue
     on the off-white strip is only ~3.6:1, which fails AA at that size. */
  color: var(--hdr-body);
  white-space: nowrap;
}
.nav__strip-links { display: flex; align-items: center; gap: 0.9rem; }
.nav__strip-links a { color: var(--hdr-body); transition: color 0.2s var(--ease); }
.nav__strip-links a:hover { color: var(--seal); }
.nav__strip-dot { width: 3px; height: 3px; rotate: 45deg; background: var(--seal); flex: none; }

.nav__bar { height: var(--bar-h); }
.nav__inner {
  height: var(--bar-h);
  display: flex; align-items: center; justify-content: space-between;
  gap: 1.5rem;
}

/* ── Brand ──
   No hairline frame and no colour filter: the old site showed the crest
   in its own colours at full size, which is the point of this change.
   The 2px bar between the wordmark and the subtitle is the old lockup. */
.brand { display: flex; align-items: center; gap: 0.6rem; }
.brand__crest {
  display: grid; place-items: center;
  flex: none;
}
.brand__crest img {
  width: auto; height: 52px;
  transition: transform 0.5s var(--ease);
}
@media (max-width: 640px) { .brand__crest img { height: 44px; } }
.brand:hover .brand__crest img { transform: scale(1.06); }

/* The footer keeps the plain white-knockout mark — different class, so
   removing the filter above does not touch it. */
.brand__mark {
  width: 40px; height: 40px;
  object-fit: contain; flex: none;
  filter: brightness(0) invert(1);
  transition: transform 0.5s var(--ease);
}
.brand:hover .brand__mark { transform: rotate(-5deg) scale(1.07); }

.brand__text { display: flex; flex-direction: column; line-height: 1; }
.brand__name {
  font-family: var(--f-display);
  font-size: 1.5rem; font-weight: 700;
  letter-spacing: -0.015em;
  color: var(--hdr-navy);
  padding-bottom: 0.28rem;
  /* Fallback matters: --hdr-line is scoped to .nav/.drawer, so in the
     footer the var would be undefined and the whole shorthand would be
     invalid at computed-value time — dropping the divider bar entirely
     rather than just its colour. */
  border-bottom: 2px solid var(--hdr-line, var(--rule-soft));
}
.brand__sub {
  font-size: 0.58rem; font-weight: 700;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--hdr-navy-lt);
  margin-top: 0.28rem;
}
/* Footer sits on midnight and inverts back */
.brand--invert .brand__name { color: var(--d-hi); border-bottom-color: var(--d-line); }
.brand--invert .brand__sub  { color: var(--d-low); }

.nav__links { display: none; align-items: center; gap: 2.4rem; }
@media (min-width: 900px) { .nav__links { display: flex; } }
.nav__link {
  position: relative;
  font-size: 0.8rem; font-weight: 600;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--hdr-muted);
  padding-block: 0.4rem;
  transition: color 0.25s var(--ease);
}
.nav__link::after {
  content: ''; position: absolute; left: 0; bottom: 0;
  width: 100%; height: 2px;
  background: var(--seal);
  border-radius: 2px;
  scale: 0 1; transform-origin: right center;
  transition: scale 0.35s var(--ease);
}
.nav__link:hover { color: var(--hdr-navy); }
.nav__link:hover::after { scale: 1 1; transform-origin: left center; }
.nav__link[aria-current="page"] { color: var(--hdr-navy); font-weight: 700; }
.nav__link[aria-current="page"]::after { scale: 1 1; }

.nav__actions { display: flex; align-items: center; gap: 0.9rem; }
/* Hairline before the CTA, desktop only */
.nav__actions::before {
  content: '';
  display: none;
  width: 1px; height: 24px;
  background: var(--hdr-line);
}
@media (min-width: 900px) { .nav__actions::before { display: block; } }

/* ⚠ Must match the .burger breakpoint exactly. When these diverged
   (CTA from 560px, burger until 900px) every viewport in between showed
   the header CTA *and* the burger, and opening the drawer produced a
   second "Request a consultation" — the same action twice on screen. */
/* `.nav__cta.btn` and not `.nav__cta`: the element carries both classes,
   and `.btn { display: inline-flex }` lives further down the file with
   equal specificity, so a single-class rule here loses the cascade and
   the CTA renders at every width. That is what produced the duplicate. */
.nav__cta.btn { display: none; }
@media (min-width: 900px) { .nav__cta.btn { display: inline-flex; } }

.burger { width: 40px; height: 40px; display: grid; place-items: center; z-index: 1002; }
@media (min-width: 900px) { .burger { display: none; } }
.burger__box { width: 22px; height: 14px; position: relative; }
.burger__box span {
  position: absolute; left: 0; width: 100%; height: 2px;
  background: var(--hdr-navy);
  border-radius: 2px;
  transition: transform 0.35s var(--ease), opacity 0.2s var(--ease);
}
.burger__box span:nth-child(1) { top: 0; }
.burger__box span:nth-child(2) { top: 6px; }
.burger__box span:nth-child(3) { top: 12px; }
.burger[aria-expanded="true"] .burger__box span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.burger[aria-expanded="true"] .burger__box span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] .burger__box span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

.drawer {
  position: fixed; inset: var(--nav-h) 0 0 0;
  z-index: 999;
  background: rgba(255, 255, 255, 0.98);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-top: 1px solid var(--hdr-line);
  padding: 1.5rem 1.25rem 3rem;
  overflow-y: auto;
  opacity: 0; visibility: hidden; transform: translateY(-8px);
  transition: opacity 0.3s var(--ease), transform 0.3s var(--ease), visibility 0.3s;
}
.drawer.is-open { opacity: 1; visibility: visible; transform: none; }
.drawer__link {
  display: flex; align-items: center; justify-content: space-between;
  padding: 1.15rem 0.25rem;
  font-family: var(--f-display);
  font-size: 1.2rem; font-weight: 600;
  color: var(--hdr-navy);
  border-bottom: 1px solid var(--hdr-line);
}
.drawer__link svg { width: 15px; height: 15px; stroke: var(--seal); }
.drawer__link[aria-current="page"] { color: var(--seal-dk); }
.drawer .btn { width: 100%; margin-top: 1.75rem; }

/* ── 7. BUTTONS ──────────────────────────────────────────── */
.btn {
  --bg: var(--seal); --fg: var(--on-seal); --bd: var(--seal);
  position: relative;
  display: inline-flex; align-items: center; justify-content: center;
  gap: 0.55rem;
  padding: 0.8rem 1.6rem;
  font-family: var(--f-ui);
  font-size: 0.74rem; font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase;
  border-radius: var(--r-sm);
  border: 1px solid var(--bd);
  background: var(--bg); color: var(--fg);
  white-space: nowrap; overflow: hidden; isolation: isolate;
  transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease),
              background 0.25s var(--ease), color 0.25s var(--ease),
              border-color 0.25s var(--ease);
}
.btn svg { width: 14px; height: 14px; flex: none; transition: transform 0.3s var(--ease); }
.btn:hover svg { transform: translateX(4px); }
.btn:active { transform: translateY(1px); }
/* Foil sweep */
.btn::after {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(100deg, transparent 18%, rgba(255,255,255,0.42) 50%, transparent 82%);
  translate: -130% 0;
  transition: translate 0.7s var(--ease);
}
.btn:hover::after { translate: 130% 0; }

.btn--primary { box-shadow: var(--sh-seal); }
.btn--primary:hover {
  --bg: var(--seal-lt); --bd: var(--seal-lt);
  transform: translateY(-2px);
  box-shadow: 0 10px 30px rgba(200, 16, 46, 0.32);
}
.btn--navy { --bg: var(--ink-1); --fg: var(--d-hi); --bd: var(--ink-1); }
.btn--navy:hover { --bg: var(--ink-2); --bd: var(--seal); transform: translateY(-2px); }

.btn--ghost { --bg: transparent; --fg: var(--t-hi); --bd: var(--rule-hard); }
.btn--ghost:hover { --bd: var(--seal); --fg: var(--seal-dk); transform: translateY(-2px); }

.btn--ghost-invert { --bg: transparent; --fg: var(--d-hi); --bd: rgba(243,241,233,0.26); }
.btn--ghost-invert:hover { --bd: var(--seal); --fg: var(--seal-lt); transform: translateY(-2px); }

.bg-ink .btn--ghost, .cta .btn--ghost, .hero .btn--ghost {
  --fg: var(--d-hi); --bd: rgba(243,241,233,0.26);
}
.bg-ink .btn--ghost:hover, .cta .btn--ghost:hover, .hero .btn--ghost:hover {
  --bd: var(--seal); --fg: var(--seal-lt);
}

/* Sized so the hero's two CTAs sit on one line in the ~550px copy
   column; uppercase + tracking makes these much wider than they look. */
.btn--lg { padding: 0.95rem 1.4rem; font-size: 0.74rem; }
.btn--block { width: 100%; }

.link-arrow {
  display: inline-flex; align-items: center; gap: 0.45rem;
  font-size: 0.78rem; font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--seal-dk);
  transition: gap 0.28s var(--ease), color 0.2s;
}
.link-arrow svg { width: 14px; height: 14px; }
.link-arrow:hover { gap: 0.75rem; color: var(--seal); }

/* ── 8. HERO ─────────────────────────────────────────────── */
.hero {
  position: relative;
  margin-top: var(--nav-h);
  padding-block: clamp(3rem, 1.75rem + 5vw, 6rem);
  background:
    radial-gradient(90% 70% at 78% 12%, rgba(0,210,255,0.10), transparent 62%),
    radial-gradient(70% 60% at 8% 88%, rgba(28,52,97,0.55), transparent 60%),
    linear-gradient(168deg, var(--ink-1) 0%, var(--ink) 58%, #060D18 100%);
  color: var(--d-mid);
  overflow: hidden;
  border-bottom: 1px solid var(--seal-line);
}
.hero h1, .hero .display { color: var(--d-hi); }
.hero .lead { color: var(--d-mid); max-width: 34rem; }
.hero__inner {
  position: relative; z-index: 1;
  display: grid; grid-template-columns: 1fr;
  gap: 2.5rem; align-items: center;
}
@media (min-width: 1024px) { .hero__inner { grid-template-columns: 1.05fr 0.95fr; gap: 3.5rem; } }
.hero__copy { max-width: 640px; }
.hero .display { margin-bottom: 1.5rem; }
.hero__actions { display: flex; flex-wrap: wrap; gap: 0.9rem; margin-top: 2.4rem; }
.hero__note {
  display: flex; align-items: center; gap: 0.6rem;
  margin-top: 1.8rem;
  font-size: 0.8rem; letter-spacing: 0.02em;
  color: var(--d-low);
}
.hero__note svg { width: 15px; height: 15px; stroke: var(--data); flex: none; }

/* Gilt corner brackets — the certificate frame, drawn on entrance */
.hero::before, .hero::after {
  content: '';
  position: absolute;
  width: clamp(60px, 9vw, 130px);
  height: clamp(60px, 9vw, 130px);
  pointer-events: none; z-index: 1;
  border: 1px solid var(--seal-line);
  opacity: 0;
  animation: frameIn 1.4s var(--ease) 0.35s forwards;
}
.hero::before { top: 26px; left: 26px; border-right: 0; border-bottom: 0; }
.hero::after  { bottom: 26px; right: 26px; border-left: 0; border-top: 0; }
@keyframes frameIn { from { opacity: 0; scale: 0.82; } to { opacity: 1; scale: 1; } }
@media (max-width: 767px) { .hero::before, .hero::after { display: none; } }

/* ── 9. DOCUMENT STACK ───────────────────────────────────
   Three sheets in CSS 3D, top one carrying the live panel.
   Deliberately not WebGL: text stays selectable, crisp at any
   DPI and readable by a screen reader, with no shader or CDN.
   Its only ambient motion is user-driven parallax — a hero
   should be still until someone engages with it.            */
.doc-stack { position: relative; perspective: 1700px; perspective-origin: 62% 38%; }
.doc-stack__inner { position: relative; transform-style: preserve-3d; transition: transform 0.55s var(--ease); }
.doc-sheet {
  position: absolute; inset: 0;
  border-radius: var(--r-lg);
  background: var(--paper-2);
  border: 1px solid var(--seal-line);
  box-shadow: var(--sh-md);
  opacity: 0; transform: translate3d(0,0,0);
  transition: transform 1.1s var(--ease), opacity 1.1s var(--ease);
}
.doc-stack.is-visible .doc-sheet--b {
  opacity: 1; transform: translate3d(15px, -15px, -46px) rotate(1.7deg);
  transition-delay: 0.16s;
}
.doc-stack.is-visible .doc-sheet--c {
  opacity: 0.5; transform: translate3d(28px, -28px, -92px) rotate(3.3deg);
  transition-delay: 0.06s;
}
.doc-stack .panel { position: relative; }
.doc-stack .req {
  opacity: 0; transform: translateX(10px);
  transition: opacity 0.55s var(--ease), transform 0.55s var(--ease);
}
.doc-stack.is-visible .req { opacity: 1; transform: none; }
.doc-stack.is-visible .req:nth-child(1) { transition-delay: 0.32s; }
.doc-stack.is-visible .req:nth-child(2) { transition-delay: 0.42s; }
.doc-stack.is-visible .req:nth-child(3) { transition-delay: 0.52s; }
.doc-stack.is-visible .req:nth-child(4) { transition-delay: 0.62s; }
@media (max-width: 640px) {
  .doc-stack.is-visible .doc-sheet--b { transform: translate3d(9px, -9px, -30px) rotate(1.3deg); }
  .doc-stack.is-visible .doc-sheet--c { transform: translate3d(17px, -17px, -60px) rotate(2.4deg); }
}

/* ── 10. PANEL ───────────────────────────────────────────── */
.panel {
  background: var(--paper);
  border: 1px solid var(--rule-hard);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-lg);
  overflow: hidden;
}
.panel__bar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; padding: 0.9rem 1.2rem;
  background: var(--ink);
  color: var(--d-hi);
  border-bottom: 1px solid var(--seal);
}
.panel__title {
  display: flex; align-items: center; gap: 0.55rem;
  font-size: 0.68rem; font-weight: 700;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--data);
}
.panel__title svg { width: 14px; height: 14px; stroke: var(--data); flex: none; }
.panel__body { padding: 1.2rem; }

.pill-live {
  display: inline-flex; align-items: center; gap: 0.4rem;
  font-size: 0.6rem; font-weight: 700;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--data);
  padding: 0.24rem 0.6rem;
  border: 1px solid var(--seal-line);
  border-radius: 2px;
}
.pill-live::before {
  content: ''; width: 5px; height: 5px;
  background: var(--data); rotate: 45deg;
  animation: blip 2.4s var(--ease-io) infinite;
}
@keyframes blip { 0%,100% { opacity: 1; } 50% { opacity: 0.35; } }

.req {
  display: grid; grid-template-columns: auto 1fr auto;
  align-items: center; gap: 0.75rem;
  padding: 0.7rem 0.8rem;
  border: 1px solid var(--rule-soft);
  border-left: 2px solid var(--seal-line);
  background: var(--paper-2);
  transition: border-color 0.25s var(--ease), transform 0.25s var(--ease);
}
.req + .req { margin-top: 0.5rem; }
.req:hover { border-left-color: var(--seal); transform: translateX(3px); }
.req__id { color: var(--data-ink); font-weight: 700; }
.req__text { font-size: 0.83rem; font-weight: 500; color: var(--t-hi); }
.req__state {
  display: inline-flex; align-items: center; gap: 0.35rem;
  font-size: 0.66rem; font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase;
  white-space: nowrap;
}
.req__state::before { content: ''; width: 5px; height: 5px; rotate: 45deg; background: currentColor; flex: none; }
.is-ok { color: var(--ok); } .is-warn { color: var(--warn); } .is-idle { color: var(--idle); }

.meter {
  display: flex; align-items: center; gap: 0.85rem;
  margin-top: 1.1rem; padding-top: 1.1rem;
  border-top: 1px solid var(--rule-soft);
}
.meter__label {
  font-size: 0.64rem; font-weight: 700;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--t-low); white-space: nowrap;
}
.meter__track { flex: 1; height: 3px; background: var(--paper-3); overflow: hidden; }
.meter__fill {
  height: 100%; width: 0;
  background: linear-gradient(90deg, var(--seal-dk), var(--seal-lt));
  transition: width 1.7s var(--ease) 0.3s;
}
.meter.is-visible .meter__fill { width: var(--pct, 92%); }
.meter__val { font-size: 0.85rem; font-weight: 800; color: var(--seal-dk); font-variant-numeric: tabular-nums; }

/* ── 11. CAPABILITY STRIP ────────────────────────────────── */
/* The ceremonial ribbon — a thin red band separating the dark hero
   from the parchment below. */
.capstrip {
  background: var(--seal);
  color: var(--on-seal);
  padding-block: 0.9rem;
}
.capstrip__inner {
  display: flex; flex-wrap: wrap; justify-content: center;
  align-items: center; gap: 0.7rem 2.5rem;
}
.capstrip__item {
  display: flex; align-items: center; gap: 0.5rem;
  font-size: 0.68rem; font-weight: 700;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--on-seal);
}
.capstrip__item svg { width: 13px; height: 13px; stroke: var(--on-seal); flex: none; }

/* ── 12. STATS + MARQUEE ─────────────────────────────────── */
.stats {
  display: grid; grid-template-columns: repeat(2, 1fr);
  border: 1px solid var(--rule-hard);
  background: var(--paper);
}
@media (min-width: 860px) { .stats { grid-template-columns: repeat(4, 1fr); } }
.stat {
  padding: 1.7rem 1.2rem; text-align: center;
  border-right: 1px solid var(--rule-soft);
  border-bottom: 1px solid var(--rule-soft);
  position: relative;
}
@media (min-width: 860px) { .stat { border-bottom: 0; } .stat:last-child { border-right: 0; } }
.stat__val {
  font-family: var(--f-display);
  font-size: clamp(2rem, 1.4rem + 1.9vw, 2.9rem);
  font-weight: 600; line-height: 1;
  color: var(--t-hi);
  font-variant-numeric: tabular-nums;
}
.stat__val sup { font-size: 0.36em; font-weight: 700; color: var(--seal-dk); top: -1.2em; margin-left: 0.15em; font-family: var(--f-ui); }
.stat__label {
  margin-top: 0.7rem;
  font-size: 0.64rem; font-weight: 700;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--t-low);
}
.stat__note { margin-top: 0.3rem; font-size: 0.68rem; color: var(--rule-hard); }
.needs-data::after {
  content: 'placeholder';
  position: absolute; top: 0.5rem; right: 0.5rem;
  font-size: 0.52rem; font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--warn);
  border: 1px solid rgba(201,146,43,0.4);
  padding: 0.1rem 0.3rem;
}

.marquee {
  position: relative; overflow: hidden;
  margin-top: 2.5rem; padding-block: 1rem;
  border-block: 1px solid var(--rule-soft);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
}
.marquee__track {
  display: flex; width: max-content; gap: 3.25rem;
  animation: slide 44s linear infinite;
  will-change: transform; /* the one place this earns its keep */
}
.marquee:hover .marquee__track { animation-play-state: paused; }
.marquee__item {
  display: flex; align-items: center; gap: 0.6rem;
  font-size: 0.72rem; font-weight: 600;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--t-low); white-space: nowrap;
  transition: color 0.25s var(--ease);
}
.marquee__item:hover { color: var(--seal-dk); }
.marquee__item::before { content: ''; width: 4px; height: 4px; rotate: 45deg; background: var(--seal); flex: none; }
@keyframes slide { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ── 13. CARDS ───────────────────────────────────────────── */
.card {
  position: relative;
  background: var(--paper);
  border: 1px solid var(--rule-soft);
  padding: 1.75rem;
  overflow: hidden; isolation: isolate;
  contain: layout paint;
  transition: border-color 0.35s var(--ease), transform 0.35s var(--ease), box-shadow 0.35s var(--ease);
}
.card::before {
  content: ''; position: absolute; inset: 0; z-index: -1; opacity: 0;
  background: radial-gradient(360px circle at var(--mx, 50%) var(--my, 0%), var(--seal-wash), transparent 70%);
  transition: opacity 0.4s var(--ease);
}
.card:hover { border-color: var(--seal-line); transform: translateY(-4px); box-shadow: var(--sh-md); }
.card:hover::before { opacity: 1; }
/* Gilt corner brackets draw in on hover */
.card::after {
  content: ''; position: absolute; top: 0; right: 0;
  width: 26px; height: 26px;
  border-top: 1px solid var(--seal); border-right: 1px solid var(--seal);
  opacity: 0; translate: -6px 6px;
  transition: opacity 0.35s var(--ease), translate 0.35s var(--ease);
}
.card:hover::after { opacity: 1; translate: 0 0; }

.card__num {
  /* block so the margin applies — as an inline span it sat tight against
     the heading below it and read as part of the title */
  display: block;
  font-family: var(--f-mono);
  font-size: 0.92rem; font-weight: 700;
  letter-spacing: 0.14em; color: var(--seal-dk);
  margin-bottom: 0.4rem;
}
.card__icon {
  width: 44px; height: 44px;
  display: grid; place-items: center;
  border: 1px solid var(--seal-line);
  color: var(--seal-dk);
  margin-bottom: 1.3rem;
  transition: background 0.35s var(--ease), color 0.35s var(--ease), border-color 0.35s var(--ease);
}
.card__icon svg { width: 21px; height: 21px; stroke: currentColor; fill: none; stroke-width: 1.4; }
.card:hover .card__icon { background: var(--seal); color: var(--on-seal); border-color: var(--seal); }
.card h3 { margin-bottom: 0.7rem; }
.card > p { font-size: 0.9rem; color: var(--t-low); line-height: 1.68; }

/* Cards on a dark chapter */
.bg-ink .card, .bg-navy .card {
  background: rgba(243,241,233,0.03);
  border-color: var(--d-line);
}
.bg-ink .card h3 { color: var(--d-hi); }
.bg-ink .card > p { color: var(--d-mid); }
.bg-ink .card:hover { border-color: var(--seal-line); background: rgba(243,241,233,0.05); }
.bg-ink .card::before { background: radial-gradient(360px circle at var(--mx,50%) var(--my,0%), rgba(0,210,255,0.12), transparent 70%); }
.bg-ink .card__icon { color: var(--seal-lt); border-color: var(--seal-line); }
.bg-ink .card:hover .card__icon { background: var(--seal); color: var(--on-seal); }
.bg-ink .card__num { color: var(--seal); }
.bg-ink .ticks li { color: var(--d-mid); }
.bg-ink .ticks svg { stroke: var(--seal-lt); }

.ticks { margin-top: 1.3rem; display: flex; flex-direction: column; gap: 0.5rem; }
.ticks li { display: flex; align-items: flex-start; gap: 0.6rem; font-size: 0.86rem; color: var(--t-mid); }
.ticks svg { width: 14px; height: 14px; stroke: var(--seal); fill: none; stroke-width: 2.5; flex: none; margin-top: 0.3em; }
.ticks.on-dark li { color: var(--d-mid); }
.ticks.on-dark svg { stroke: var(--seal-lt); }

/* ── 14. PROCESS STEPPER ─────────────────────────────────── */
.stepper { display: grid; grid-template-columns: 1fr; gap: 2rem; }
@media (min-width: 1024px) {
  .stepper { grid-template-columns: 0.85fr 1.15fr; gap: 4rem; align-items: start; }
  .stepper__aside { position: sticky; top: calc(var(--nav-h) + 3rem); }
}
.stepper__meter { margin-top: 2rem; height: 1px; background: var(--rule-hard); }
.stepper__meter i { display: block; height: 100%; width: 20%; background: var(--seal); transition: width 0.55s var(--ease); }
.stepper__now {
  margin-top: 0.9rem;
  font-size: 0.66rem; font-weight: 700;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--t-low);
}
.steps { display: flex; flex-direction: column; }
.step {
  position: relative;
  display: grid; grid-template-columns: auto 1fr; gap: 1.3rem;
  padding-block: 1.3rem;
  border-top: 1px solid var(--rule-soft);
  transition: opacity 0.45s var(--ease);
}
.step:last-child { border-bottom: 1px solid var(--rule-soft); }
@media (min-width: 1024px) { .step { opacity: 0.38; } }
.step.is-active { opacity: 1; }
.step__idx {
  width: 42px; height: 42px;
  display: grid; place-items: center;
  border: 1px solid var(--rule-hard);
  font-family: var(--f-display);
  font-size: 0.95rem; font-weight: 600;
  color: var(--t-low);
  flex: none;
  transition: all 0.45s var(--ease);
}
.step.is-active .step__idx { background: var(--seal); border-color: var(--seal); color: var(--on-seal); }
.step h4 { margin-bottom: 0.45rem; }
.step p { font-size: 0.89rem; color: var(--t-low); }
.step__out {
  margin-top: 0.75rem;
  display: inline-flex; align-items: center; gap: 0.4rem;
  font-size: 0.64rem; font-weight: 700;
  letter-spacing: 0.13em; text-transform: uppercase;
  color: var(--seal-dk);
  border: 1px solid var(--seal-line);
  padding: 0.3rem 0.6rem;
}
.step__out svg { width: 11px; height: 11px; stroke: var(--seal); }

/* ── 15. TIMELINE ────────────────────────────────────────── */
.timeline { position: relative; padding-left: 2.5rem; }
@media (min-width: 768px) { .timeline { padding-left: 0; } }
.timeline::before {
  content: ''; position: absolute; left: 11px; top: 8px; bottom: 8px;
  width: 1px; background: var(--rule-hard);
}
.timeline::after {
  content: ''; position: absolute; left: 11px; top: 8px;
  width: 1px; height: var(--fill, 0%);
  background: linear-gradient(180deg, var(--seal-lt), var(--seal-dk));
  transition: height 0.3s linear;
}
@media (min-width: 768px) {
  .timeline::before, .timeline::after { left: 50%; translate: -1px 0; }
}
.tl-item { position: relative; padding-bottom: 1.9rem; }
.tl-item:last-child { padding-bottom: 0; }
@media (min-width: 768px) {
  .tl-item { width: 50%; padding-right: 3rem; text-align: right; }
  .tl-item:nth-child(even) { margin-left: 50%; padding-right: 0; padding-left: 3rem; text-align: left; }
}
.tl-item__dot {
  position: absolute; left: -2.5rem; top: 4px;
  width: 20px; height: 20px;
  display: grid; place-items: center;
  border: 1px solid var(--rule-hard);
  background: var(--paper-2);
  rotate: 45deg;
  transition: all 0.45s var(--ease);
}
@media (min-width: 768px) {
  .tl-item__dot { left: auto; right: -10px; }
  .tl-item:nth-child(even) .tl-item__dot { right: auto; left: -10px; }
}
.tl-item__dot::before { content: ''; width: 6px; height: 6px; background: var(--rule-hard); transition: all 0.45s var(--ease); }
.tl-item.is-visible .tl-item__dot { border-color: var(--seal); }
.tl-item.is-visible .tl-item__dot::before { background: var(--seal); }
.tl-item__when {
  font-family: var(--f-mono);
  font-size: 0.66rem; font-weight: 600;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--seal-dk); margin-bottom: 0.5rem;
}
.tl-item h4 { margin-bottom: 0.45rem; }
.tl-item p { font-size: 0.88rem; color: var(--t-low); }
.bg-ink .tl-item p, .bg-navy .tl-item p { color: var(--d-mid); }
.bg-ink .tl-item__when { color: var(--seal-lt); }
.bg-ink .timeline::before { background: var(--d-line); }
.bg-ink .tl-item__dot { background: var(--ink-1); border-color: var(--d-line); }

/* ── 16. PRICING ─────────────────────────────────────────── */
.price-card {
  position: relative;
  display: flex; flex-direction: column;
  background: var(--paper);
  border: 1px solid var(--rule-soft);
  padding: 1.75rem 1.4rem;
  transition: border-color 0.35s var(--ease), transform 0.35s var(--ease), box-shadow 0.35s var(--ease);
}
.price-card:hover { border-color: var(--seal-line); transform: translateY(-4px); box-shadow: var(--sh-md); }
.price-card--featured { border-color: var(--seal); box-shadow: var(--sh-md); }
.price-card__flag {
  position: absolute; top: 0; right: 1.3rem;
  background: var(--seal); color: var(--on-seal);
  font-size: 0.56rem; font-weight: 700;
  letter-spacing: 0.16em; text-transform: uppercase;
  padding: 0.3rem 0.7rem;
}
.price-card h3 { font-size: 1.2rem; margin-bottom: 0.4rem; }
.price-card__for { font-size: 0.78rem; color: var(--t-low); min-height: 2.6rem; margin-bottom: 1.2rem; }
.price-card__amt {
  font-family: var(--f-display);
  font-size: 2rem; font-weight: 600; line-height: 1;
  color: var(--t-hi);
}
.price-card__amt span { font-size: 0.9rem; font-weight: 500; color: var(--t-low); font-family: var(--f-ui); }
/* Secondary INR figure — quieter than the USD amount, so the dollar
   price stays the one number an evaluator reads first. */
.price-card__inr {
  margin-top: 0.4rem;
  font-family: var(--f-mono);
  font-size: 0.72rem;
  color: var(--t-low);
  font-variant-numeric: tabular-nums;
}
.price-card__sub { font-size: 0.72rem; color: var(--t-low); margin-top: 0.45rem; margin-bottom: 1.5rem; letter-spacing: 0.04em; }
.price-card .btn { margin-bottom: 1.5rem; }
.price-card .ticks { flex: 1; margin-top: 0; padding-top: 1.25rem; border-top: 1px solid var(--rule-soft); }

/* ── 17. COMPARISON ──────────────────────────────────────── */
.compare-wrap { overflow-x: auto; border: 1px solid var(--rule-hard); background: var(--paper); -webkit-overflow-scrolling: touch; }
.compare { min-width: 720px; font-size: 0.86rem; }
.compare th, .compare td { padding: 1rem 1.15rem; text-align: left; border-bottom: 1px solid var(--rule-soft); vertical-align: middle; }
.compare thead th {
  position: sticky; top: 0;
  background: var(--paper-2);
  font-size: 0.64rem; font-weight: 700;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--t-low);
  border-bottom: 1px solid var(--rule-hard);
}
.compare thead th.is-us { background: var(--ink-1); color: var(--seal-lt); }
.compare tbody th { font-family: var(--f-display); font-weight: 600; color: var(--t-hi); width: 26%; font-size: 0.95rem; }
.compare td.is-us { background: var(--seal-wash); font-weight: 600; color: var(--t-hi); border-inline: 1px solid var(--seal-line); }
.compare tbody tr:last-child th, .compare tbody tr:last-child td { border-bottom: none; }
.compare tbody tr { transition: background 0.2s var(--ease); }
.compare tbody tr:hover { background: var(--paper-2); }
.cmp-mark { display: inline-flex; align-items: center; gap: 0.4rem; }
.cmp-mark svg { width: 14px; height: 14px; flex: none; stroke-width: 2.5; }
.cmp-yes svg { stroke: var(--ok); } .cmp-no svg { stroke: var(--rule-hard); } .cmp-mid svg { stroke: var(--warn); }

/* ── 18. TAGS / DELIVERABLES ─────────────────────────────── */
.tags { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.55rem; }
.tag {
  display: inline-flex; align-items: center; gap: 0.5rem;
  padding: 0.55rem 1.1rem;
  border: 1px solid var(--rule-soft);
  background: var(--paper);
  font-size: 0.76rem; font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--t-hi);
  transition: all 0.28s var(--ease);
}
.tag:hover { background: var(--ink-1); color: var(--seal-lt); border-color: var(--ink-1); transform: translateY(-2px); }
.tag svg { width: 14px; height: 14px; stroke: var(--seal-dk); fill: none; stroke-width: 2; flex: none; transition: stroke 0.28s; }
.tag:hover svg { stroke: var(--seal-lt); }

.deliver { display: grid; grid-template-columns: repeat(auto-fill, minmax(215px, 1fr)); border: 1px solid var(--rule-hard); background: var(--paper); }
.deliver__item {
  padding: 1.15rem 1.2rem;
  display: flex; align-items: center; gap: 0.85rem;
  border-right: 1px solid var(--rule-soft);
  border-bottom: 1px solid var(--rule-soft);
  transition: background 0.25s var(--ease);
}
.deliver__item:hover { background: var(--paper-2); }
.deliver__item svg { width: 18px; height: 18px; stroke: var(--seal-dk); fill: none; stroke-width: 1.5; flex: none; transition: stroke 0.25s var(--ease); }
.deliver__item:hover svg { stroke: var(--seal); }
.deliver__item span { font-size: 0.84rem; font-weight: 500; color: var(--t-hi); }

/* ── 19. FAQ ─────────────────────────────────────────────── */
.faq { max-width: 800px; margin-inline: auto; border-top: 1px solid var(--rule-hard); }
.faq__item { border-bottom: 1px solid var(--rule-soft); }
.faq__q {
  width: 100%;
  display: flex; align-items: center; justify-content: space-between;
  gap: 1.25rem; padding: 1.15rem 0.25rem;
  text-align: left;
  font-family: var(--f-display);
  font-size: 1.05rem; font-weight: 600;
  color: var(--t-hi);
  transition: color 0.25s var(--ease);
}
.faq__q:hover { color: var(--seal-dk); }
.faq__sign { position: relative; width: 14px; height: 14px; flex: none; }
.faq__sign::before, .faq__sign::after {
  content: ''; position: absolute; inset: 50% 0 auto 0;
  height: 1px; background: var(--seal); translate: 0 -50%;
  transition: transform 0.35s var(--ease), opacity 0.25s;
}
.faq__sign::after { rotate: 90deg; }
.faq__q[aria-expanded="true"] .faq__sign::after { rotate: 0deg; opacity: 0; }
.faq__a { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.45s var(--ease); }
.faq__item.is-open .faq__a { grid-template-rows: 1fr; }
.faq__a > div { overflow: hidden; }
.faq__a p { padding: 0 0.25rem 1.4rem; font-size: 0.9rem; color: var(--t-low); max-width: 64ch; }

/* ── 20. FORMS ───────────────────────────────────────────── */
.field { margin-bottom: 1.1rem; }
.field-row { display: grid; grid-template-columns: 1fr; gap: 1.1rem; }
@media (min-width: 620px) { .field-row { grid-template-columns: 1fr 1fr; } }
.label {
  display: block;
  font-size: 0.64rem; font-weight: 700;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--t-mid); margin-bottom: 0.5rem;
}
.label span { color: var(--seal-dk); }
.input, .select, .textarea {
  width: 100%; padding: 0.8rem 0.9rem;
  font-size: 1rem;  /* 16px stops iOS zoom-on-focus */
  color: var(--t-hi);
  background: var(--paper);
  border: 1px solid var(--rule-hard);
  border-radius: var(--r-sm);
  outline: none; appearance: none;
  transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease);
}
.input::placeholder, .textarea::placeholder { color: var(--t-low); opacity: 0.7; }
.input:hover, .select:hover, .textarea:hover { border-color: var(--seal-line); }
.input:focus, .select:focus, .textarea:focus { border-color: var(--seal); box-shadow: 0 0 0 3px var(--seal-wash); }
.input:user-invalid, .textarea:user-invalid, .select:user-invalid { border-color: var(--red); box-shadow: 0 0 0 3px rgba(200,16,46,0.08); }
.textarea { resize: vertical; min-height: 130px; line-height: 1.6; }
.select-wrap { position: relative; }
.select-wrap::after {
  content: ''; position: absolute; right: 1rem; top: 50%;
  width: 7px; height: 7px;
  border-right: 1px solid var(--seal-dk); border-bottom: 1px solid var(--seal-dk);
  translate: 0 -70%; rotate: 45deg; pointer-events: none;
}
.form-note { display: flex; align-items: flex-start; gap: 0.5rem; margin-top: 1rem; font-size: 0.75rem; color: var(--t-low); }
.form-note svg { width: 13px; height: 13px; stroke: var(--seal-dk); flex: none; margin-top: 0.2em; }
.form-alert {
  margin-top: 1.1rem; padding: 0.95rem 1.1rem;
  font-size: 0.86rem; font-weight: 500;
  display: flex; align-items: flex-start; gap: 0.6rem;
  border: 1px solid;
}
.form-alert svg { width: 16px; height: 16px; flex: none; margin-top: 0.15em; stroke-width: 2.5; }
.form-alert--ok { background: rgba(63,158,108,0.07); color: #2C7A50; border-color: rgba(63,158,108,0.3); }
.form-alert--ok svg { stroke: var(--ok); }
.form-alert--err { background: rgba(200,16,46,0.05); color: var(--red-dk); border-color: rgba(200,16,46,0.25); }
.form-alert--err svg { stroke: var(--red); }
[hidden] { display: none !important; }
.btn.is-busy { pointer-events: none; opacity: 0.7; }

/* ── 21. BOXES ───────────────────────────────────────────── */
.box {
  background: var(--paper);
  border: 1px solid var(--rule-hard);
  padding: clamp(1.4rem, 1rem + 1.5vw, 2rem);
}
.box--navy {
  background: var(--ink-1);
  border-color: var(--seal-line);
  color: var(--d-mid);
  position: relative;
}
.box--navy h2, .box--navy h3, .box--navy h4 { color: var(--d-hi); }
.box--accent { border-top: 2px solid var(--seal); }
.quote {
  border-left: 2px solid var(--seal);
  padding-left: 1.2rem;
  font-family: var(--f-display);
  font-size: 1.08rem; font-style: italic; font-weight: 500;
  line-height: 1.6; color: var(--seal-pale);
}
.crosses { display: flex; flex-direction: column; gap: 0.7rem; }
.crosses li { display: flex; align-items: flex-start; gap: 0.65rem; font-size: 0.9rem; color: var(--t-mid); }
.crosses svg { width: 16px; height: 16px; stroke: var(--red); fill: none; stroke-width: 2; flex: none; margin-top: 0.22em; }
.why { display: flex; flex-direction: column; gap: 1.3rem; }
.why li { display: flex; gap: 1rem; align-items: flex-start; }
.why__ic { width: 38px; height: 38px; display: grid; place-items: center; border: 1px solid var(--seal-line); flex: none; }
.why__ic svg { width: 17px; height: 17px; stroke: var(--seal-dk); fill: none; stroke-width: 1.6; }
.why strong { font-family: var(--f-display); font-weight: 600; color: var(--t-hi); font-size: 1.02rem; }
.why p { font-size: 0.89rem; color: var(--t-low); margin-top: 0.25rem; }

/* Qualifier line under a featured offer's intro — italic, one step
   down from body text, on the dark chapter the CTA sits on. */
.offer__ideal {
  margin-top: 0.85rem;
  font-size: 0.88rem;
  font-style: italic;
  color: var(--d-low);
}

/* ── 22. CTA ─────────────────────────────────────────────── */
.cta {
  position: relative;
  background:
    radial-gradient(80% 70% at 50% 0%, rgba(0,210,255,0.09), transparent 62%),
    linear-gradient(170deg, var(--ink-1), var(--ink));
  color: var(--d-mid);
  overflow: hidden;
}
.cta__inner { position: relative; z-index: 1; }

/* ── 23. FOOTER ──────────────────────────────────────────── */
.footer {
  background: var(--ink);
  color: var(--d-low);
  padding-block: clamp(2.5rem, 1.75rem + 2vw, 3.5rem) 1.6rem;
  border-top: 1px solid var(--seal);
}
.footer__grid { display: grid; grid-template-columns: 1fr; gap: 2rem; padding-bottom: 2.25rem; }
@media (min-width: 720px) { .footer__grid { grid-template-columns: 1.6fr 1fr 1fr 1fr; } }
.footer__desc { font-size: 0.84rem; line-height: 1.75; max-width: 30ch; margin-top: 1.2rem; color: var(--d-low); }
.footer__title {
  font-size: 0.62rem; font-weight: 700;
  letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--seal); margin-bottom: 1.1rem;
}
.footer__list { display: flex; flex-direction: column; gap: 0.65rem; }
.footer__list a {
  font-size: 0.85rem; color: var(--d-low); width: fit-content;
  transition: color 0.2s var(--ease), translate 0.2s var(--ease);
}
.footer__list a:hover { color: var(--seal-lt); translate: 3px 0; }
.footer__bar {
  border-top: 1px solid var(--d-line);
  padding-top: 1.75rem;
  display: flex; flex-direction: column; align-items: center;
  gap: 0.85rem; text-align: center;
  font-size: 0.76rem; color: var(--d-low);
}
@media (min-width: 640px) { .footer__bar { flex-direction: row; justify-content: space-between; text-align: left; } }
.socials { display: flex; gap: 0.55rem; margin-top: 1.25rem; }
.socials a {
  width: 34px; height: 34px; display: grid; place-items: center;
  border: 1px solid var(--d-line); color: var(--d-low);
  transition: all 0.28s var(--ease);
}
.socials a:hover { background: var(--seal); border-color: var(--seal); color: var(--on-seal); translate: 0 -2px; }
.socials svg { width: 15px; height: 15px; stroke: currentColor; fill: none; stroke-width: 1.8; }

/* ── 24. BACK TO TOP ─────────────────────────────────────── */
.to-top {
  position: fixed; right: clamp(1rem, 2vw, 2rem); bottom: clamp(1rem, 2vw, 2rem);
  width: 42px; height: 42px;
  display: grid; place-items: center;
  background: var(--ink); color: var(--seal-lt);
  border: 1px solid var(--seal-line);
  box-shadow: var(--sh-md);
  z-index: 900;
  opacity: 0; visibility: hidden; translate: 0 10px;
  transition: all 0.3s var(--ease);
}
.to-top.is-shown { opacity: 1; visibility: visible; translate: 0; }
.to-top:hover { background: var(--seal); color: var(--on-seal); border-color: var(--seal); translate: 0 -3px; }
.to-top svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 2; }

/* ── 25. PAGE HEAD / SERVICES ────────────────────────────── */
.page-head {
  position: relative;
  margin-top: var(--nav-h);
  padding-block: clamp(2.5rem, 1.75rem + 3vw, 4rem);
  background:
    radial-gradient(80% 70% at 50% 0%, rgba(0,210,255,0.10), transparent 60%),
    linear-gradient(170deg, var(--ink-1), var(--ink));
  border-bottom: 1px solid var(--seal-line);
  color: var(--d-mid);
  overflow: hidden;
}
.page-head h1, .page-head .display { color: var(--d-hi); }
.page-head .lead { color: var(--d-mid); }
.page-head__inner { position: relative; z-index: 1; max-width: 780px; }
.page-head.center .page-head__inner { margin-inline: auto; text-align: center; }
.crumbs {
  display: flex; align-items: center; gap: 0.5rem;
  font-size: 0.66rem; font-weight: 600;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--d-low); margin-bottom: 1.25rem;
}
.crumbs.center { justify-content: center; }
.crumbs a:hover { color: var(--seal-lt); }
.crumbs svg { width: 11px; height: 11px; stroke: var(--seal); }

/* Service index lockup.
   The numeral moves into the same hairline frame used by .step__idx and
   .card__icon, with the eyebrow set beside it, so number + label + heading
   read as one unit. Previously the number was a 3rem serif in --seal-line
   (navy at 22% on parchment) stacked above an unrelated eyebrow: three
   orphans in a column, and the numeral itself was barely legible. */
.svc__index {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  margin-bottom: 1.15rem;
}
.svc__index .eyebrow { margin-bottom: 0; }

.svc__no {
  position: relative;
  width: 46px; height: 46px;
  flex: none;
  display: grid; place-items: center;
  overflow: hidden; isolation: isolate;
  font-family: var(--f-display);
  font-size: 1.15rem; font-weight: 600; line-height: 1;
  font-variant-numeric: tabular-nums;
  color: var(--seal-dk);
  border: 1px solid var(--seal-line);
  transition: background 0.4s var(--ease), color 0.4s var(--ease),
              border-color 0.4s var(--ease);
}

/* Foil sweep across the frame as the lockup lands — the same gesture the
   primary buttons use on hover, so the entrance stays in vocabulary.
   Runs once, on entry only; nothing here loops. */
.svc__no::after {
  content: '';
  position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(100deg, transparent 16%, var(--seal-wash) 50%, transparent 84%);
  translate: -130% 0;
}
.svc-slide.is-active .svc__no::after { animation: foilPass 0.9s var(--ease) 0.62s 1; }
@keyframes foilPass { to { translate: 130% 0; } }

/* The eyebrow's dash draws out of the frame, tying the two together.
   Scaled, not width-animated — scale is compositor-cheap and the dash is
   a pseudo-element, so no reveal target's own box is ever collapsed (§5). */
.svc__index .eyebrow::before {
  transform-origin: left center;
  scale: 0 1;
  transition: scale 0.55s var(--ease) 0.2s;
}
.svc-slide.is-active .eyebrow::before { scale: 1 1; }

/* Hover inverts the frame — matches .card:hover .card__icon and
   .step.is-active .step__idx. Must stay after the .is-visible rules so it
   wins the cascade at equal specificity. */
.svc-slide.is-active .svc__no,
.svc-slide__copy:hover .svc__no {
  background: var(--seal);
  border-color: var(--seal);
  color: var(--on-seal);
}
.chips { display: flex; flex-wrap: wrap; gap: 0.45rem; margin-top: 1rem; }
.chip {
  font-size: 0.7rem; font-weight: 600;
  letter-spacing: 0.08em;
  padding: 0.4rem 0.75rem;
  border: 1px solid var(--rule-hard);
  background: var(--paper);
  color: var(--t-hi);
  transition: all 0.28s var(--ease);
}
.chip:hover { border-color: var(--seal); color: var(--seal-dk); translate: 0 -2px; }

/* ── 26. SERVICE DECK ─ curtain slider ─────────────────
   Two modes, both driven by the same .is-active flag:

   .is-live    JS is running and motion is welcome, so the curtains exist
               and the reveal plays.
   .is-pinned  the viewport can hold a whole slide, so the deck pins for
               one viewport per slide and scroll drives the index.

   Below 720px only .is-live applies: slides stay in normal flow and each
   one’s curtains part as it scrolls into view. A phone cannot hold a
   heading, a lead, four list items AND a panel in one viewport, so
   pinning there would clip the copy off the bottom.

   With no JS neither class is added: a plain stacked list, all visible. */
.svc-pin { position: relative; }
.svc-pin.is-pinned { height: calc(var(--slides, 5) * 100vh); }
.svc-pin__stick { position: relative; }
.svc-pin.is-pinned .svc-pin__stick {
  position: sticky;
  top: var(--nav-h);
  height: calc(100vh - var(--nav-h));
  overflow: hidden;
}
/* svh, not vh: on mobile the address bar collapsing changes vh mid-scroll,
   which would resize the pin underneath the reader and jump the index. */
@supports (height: 100svh) {
  .svc-pin.is-pinned { height: calc(var(--slides, 5) * 100svh); }
  .svc-pin.is-pinned .svc-pin__stick { height: calc(100svh - var(--nav-h)); }
}

.svc-deck { position: relative; height: 100%; background: var(--ink); }

/* Unpinned the slides simply stack, alternating parchment tones the way
   the old .svc blocks did. */
.svc-slide {
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  background: var(--paper);
  border-bottom: 1px solid var(--rule-soft);
}
.svc-slide:nth-child(even) { background: var(--paper-2); }
.svc-slide:last-of-type { border-bottom: none; }

.svc-pin.is-pinned .svc-slide {
  position: absolute; inset: 0;
  grid-template-columns: 1fr 1fr;
  border-bottom: 0;
  opacity: 0; z-index: 1;
  pointer-events: none;
  transition: opacity 0.12s linear;
}
.svc-pin.is-pinned .svc-slide.is-active { opacity: 1; z-index: 2; pointer-events: auto; }

/* ── columns ── */
.svc-slide__copy, .svc-slide__vis { position: relative; overflow: hidden; }
.svc-slide__copy { background: var(--paper); }
.svc-slide:nth-child(even) .svc-slide__copy { background: var(--paper-2); }
.svc-pin.is-pinned .svc-slide__copy { border-right: 1px solid var(--rule-hard); }

.svc-slide__center { padding: clamp(2rem, 1.2rem + 3vw, 3.5rem) clamp(1.25rem, 6vw, 4.5rem); }
.svc-pin.is-pinned .svc-slide__center {
  position: absolute; inset: 0;
  display: flex; flex-direction: column;
  /* `safe` so an over-tall slide loses its bottom, not its top ─ plain
     centring in an overflowing flex column clips the start edge, which
     puts the heading out of reach above the scrollport. */
  justify-content: center;
  justify-content: safe center;
  overflow-y: auto;
}
/* content lifts in after the curtains have opened ─ in both modes */
.svc-pin.is-live .svc-slide__center {
  opacity: 0; transform: translateY(18px);
  transition: opacity 0.4s linear, transform 0.55s var(--ease);
}
.svc-pin.is-live .svc-slide.is-active .svc-slide__center {
  opacity: 1; transform: none;
  transition-delay: 0.42s;
}

.svc-slide__lead { font-size: var(--fs-lead); line-height: 1.72; color: var(--t-mid); max-width: 34rem; }
.svc-slide__center .rule { margin: 1.15rem 0 1.5rem; }
.svc-slide__center .ticks { margin-top: 1.4rem; }
.svc-slide__cta { margin-top: 1.9rem; }

/* Visual column ─ a midnight stage holding the existing panel/box/image */
.svc-slide__vis {
  display: grid; place-items: center;
  padding: clamp(1.5rem, 1rem + 3vw, 3.25rem);
  background:
    radial-gradient(80% 70% at 50% 0%, rgba(0, 210, 255, 0.09), transparent 62%),
    linear-gradient(170deg, var(--ink-1), var(--ink));
}
.svc-slide__stage { width: 100%; max-width: 30rem; }
.svc-pin.is-live .svc-slide__stage {
  /* the reference scales its photo 1.15 to 1; a document panel wants a far
     smaller move or it reads as a zoom rather than a settle */
  transform: scale(1.06);
  transition: transform 1.12s var(--ease);
}
.svc-pin.is-live .svc-slide.is-active .svc-slide__stage { transform: none; }

/* ── curtains ──
   Only exist under .is-live. They move solely on .is-active, so leaving
   them displayed in the plain fallback would park two opaque panels over
   51% of every column and bury the copy. */
.svc-curtain { display: none; }
.svc-pin.is-live .svc-curtain {
  display: block;
  position: absolute; left: 0;
  width: 100%; height: 51%;
  background: var(--ink-1);
  z-index: 3;
  pointer-events: none;
  transition: transform 0.7s cubic-bezier(0.77, 0, 0.175, 1);
}
.svc-pin.is-live .svc-curtain--top    { top: 0;    border-bottom: 2px solid var(--seal); }
.svc-pin.is-live .svc-curtain--bottom { bottom: 0; border-top:    2px solid var(--seal); }
.svc-pin.is-live .svc-slide.is-active .svc-curtain--top    { transform: translateY(-100%); }
.svc-pin.is-live .svc-slide.is-active .svc-curtain--bottom { transform: translateY(100%); }
/* the visual side trails the copy side by a beat */
.svc-pin.is-live .svc-slide.is-active .svc-slide__vis .svc-curtain { transition-delay: 0.08s; }

/* ── controls ─ pinned mode only ── */
.svc-deck__arrows, .svc-deck__dots { display: none; }
.svc-pin.is-pinned .svc-deck__arrows {
  position: absolute; left: clamp(1rem, 6vw, 4.5rem); bottom: 2rem;
  display: flex; gap: 0.6rem; z-index: 10;
}
.svc-arrow {
  width: 44px; height: 44px;
  display: grid; place-items: center;
  border: 1px solid var(--rule-hard);
  background: var(--paper);
  color: var(--t-hi);
  border-radius: var(--r-sm);
  transition: background 0.25s var(--ease), color 0.25s var(--ease),
              border-color 0.25s var(--ease), translate 0.2s var(--ease);
}
.svc-arrow svg { width: 15px; height: 15px; }
.svc-arrow:hover:not(:disabled) { background: var(--seal); border-color: var(--seal); color: var(--on-seal); translate: 0 -2px; }
.svc-arrow:disabled { opacity: 0.35; cursor: not-allowed; }

.svc-pin.is-pinned .svc-deck__dots {
  position: absolute; right: clamp(1rem, 2.5vw, 2rem); top: 50%;
  translate: 0 -50%;
  display: flex; flex-direction: column; gap: 0.55rem; z-index: 10;
}
.svc-dot {
  width: 7px; height: 7px;
  background: var(--d-low);
  border-radius: 1px;
  transition: width 0.35s var(--ease), height 0.35s var(--ease), background 0.35s var(--ease);
}
.svc-dot.is-active { height: 26px; background: var(--seal); }

/* ── tablet: pinned, but split top/bottom instead of left/right ──
   A portrait tablet has the height for a whole slide but not the width
   for two readable columns side by side. */
@media (max-width: 999px) {
  .svc-pin.is-pinned .svc-slide {
    grid-template-columns: 1fr;
    grid-template-rows: 60% 40%;
  }
  .svc-pin.is-pinned .svc-slide__copy {
    border-right: 0;
    border-bottom: 1px solid var(--rule-hard);
  }
  .svc-pin.is-pinned .svc-slide__center { padding: 1.5rem clamp(1.25rem, 5vw, 2.5rem); }
  .svc-pin.is-pinned .svc-slide__center .rule { margin: 0.9rem 0 1.1rem; }
  .svc-pin.is-pinned .svc-slide__center .ticks { margin-top: 1rem; gap: 0.4rem; }
  .svc-pin.is-pinned .svc-slide__cta { margin-top: 1.2rem; }
  .svc-pin.is-pinned .svc-slide__vis { padding: 1.25rem; }
  .svc-pin.is-pinned .svc-slide__stage { max-width: 26rem; }

  /* dots move to a horizontal row so they do not straddle the split */
  .svc-pin.is-pinned .svc-deck__dots {
    flex-direction: row;
    top: auto; bottom: 1rem;
    right: auto; left: 50%;
    translate: -50% 0;
  }
  .svc-dot.is-active { height: 7px; width: 26px; }
  .svc-pin.is-pinned .svc-deck__arrows { bottom: 0.85rem; left: 1rem; }
  .svc-arrow { width: 38px; height: 38px; }
}

/* -- phone: same pinned slider, everything dialled down to fit --
   A slide has to hold an index, a heading, a rule, a lead, four list
   items and a panel inside one phone viewport, so both bands tighten:
   the copy loses type scale and spacing, and the panel in the stage
   loses padding and row height. Both bands keep `overflow-y: auto` as
   a safety valve on very short screens — scroll chaining is left at its
   default so reaching the end of a band still advances the deck. */
@media (max-width: 719px) {
  .svc-pin.is-pinned .svc-slide { grid-template-rows: 60% 40%; }
  .svc-pin.is-pinned .svc-slide__vis { overflow-y: auto; }

  .svc-pin.is-pinned .svc-slide__center { padding: 1.1rem 1.25rem; }
  .svc-pin.is-pinned .svc-slide__center h2 { font-size: 1.5rem; }
  .svc-pin.is-pinned .svc-slide__center .rule { margin: 0.65rem 0 0.8rem; }
  .svc-pin.is-pinned .svc-slide__lead { font-size: 0.88rem; line-height: 1.58; }
  .svc-pin.is-pinned .svc-slide__center .ticks { margin-top: 0.8rem; gap: 0.3rem; }
  .svc-pin.is-pinned .svc-slide__center .ticks li { font-size: 0.79rem; }
  .svc-pin.is-pinned .svc-slide__center .ticks svg { width: 12px; height: 12px; }
  .svc-pin.is-pinned .svc__index { margin-bottom: 0.75rem; gap: 0.7rem; }
  .svc-pin.is-pinned .svc__no { width: 38px; height: 38px; font-size: 1rem; }
  .svc-pin.is-pinned .eyebrow { font-size: 0.6rem; letter-spacing: 0.18em; }
  .svc-pin.is-pinned .svc-slide__cta { margin-top: 0.95rem; }
  .svc-pin.is-pinned .svc-slide__cta .btn { padding: 0.65rem 1.05rem; font-size: 0.66rem; }

  /* the stage components carry desktop padding; compress them here */
  .svc-pin.is-pinned .svc-slide__vis { padding: 0.85rem; }
  .svc-pin.is-pinned .svc-slide__stage { max-width: 23rem; }
  .svc-pin.is-pinned .svc-slide__stage .box { padding: 0.95rem; }
  .svc-pin.is-pinned .svc-slide__stage .panel__body { padding: 0.8rem; }
  .svc-pin.is-pinned .svc-slide__stage .panel__bar { padding: 0.6rem 0.8rem; }
  .svc-pin.is-pinned .svc-slide__stage .req { padding: 0.45rem 0.55rem; gap: 0.5rem; }
  .svc-pin.is-pinned .svc-slide__stage .req + .req { margin-top: 0.3rem; }
  .svc-pin.is-pinned .svc-slide__stage .req__text { font-size: 0.74rem; }
  .svc-pin.is-pinned .svc-slide__stage .req__state { font-size: 0.58rem; }
  .svc-pin.is-pinned .svc-slide__stage .chip { padding: 0.28rem 0.5rem; font-size: 0.63rem; }
  .svc-pin.is-pinned .svc-slide__stage .chips { gap: 0.3rem; margin-top: 0.6rem; }
  .svc-pin.is-pinned .svc-slide__stage .meter { margin-top: 0.8rem; padding-top: 0.8rem; }
  .svc-pin.is-pinned .svc-slide__stage .next-steps { gap: 0.55rem; }
  .svc-pin.is-pinned .svc-slide__stage .next-steps li { font-size: 0.79rem; }
  .svc-pin.is-pinned .svc-slide__stage h4 { font-size: 0.95rem; }
  .svc-pin.is-pinned .svc-slide__stage .muted { font-size: 0.72rem !important; }

  .svc-pin.is-pinned .svc-deck__arrows { bottom: 0.7rem; left: 0.75rem; }
  .svc-arrow { width: 34px; height: 34px; }
  .svc-arrow svg { width: 13px; height: 13px; }
  .svc-pin.is-pinned .svc-deck__dots { bottom: 0.8rem; gap: 0.4rem; }
}

/* ── 27. CONTACT ─────────────────────────────────────────── */
.contact-grid { display: grid; grid-template-columns: 1fr; gap: 2.5rem; align-items: start; }
@media (min-width: 1000px) { .contact-grid { grid-template-columns: 0.85fr 1.15fr; gap: 4rem; } }
.cinfo { border-top: 1px solid var(--rule-hard); }
.cinfo__item { display: flex; align-items: flex-start; gap: 1rem; padding: 1.2rem 0; border-bottom: 1px solid var(--rule-soft); }
.cinfo__ic { width: 40px; height: 40px; display: grid; place-items: center; border: 1px solid var(--seal-line); flex: none; }
.cinfo__ic svg { width: 17px; height: 17px; stroke: var(--seal-dk); fill: none; stroke-width: 1.6; }
.cinfo__label { font-size: 0.62rem; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--t-low); margin-bottom: 0.25rem; }
.cinfo__val { font-family: var(--f-display); font-size: 1.05rem; font-weight: 600; color: var(--t-hi); }
.cinfo__val a { color: var(--t-hi); transition: color 0.2s; }
.cinfo__val a:hover { color: var(--seal-dk); }
.next-steps { counter-reset: ns; display: flex; flex-direction: column; gap: 1rem; }
.next-steps li { counter-increment: ns; display: flex; gap: 0.85rem; align-items: flex-start; font-size: 0.88rem; color: var(--t-mid); }
.next-steps li::before {
  content: counter(ns);
  width: 24px; height: 24px;
  display: grid; place-items: center;
  border: 1px solid var(--seal);
  color: var(--seal-dk);
  font-size: 0.68rem; font-weight: 700;
  flex: none;
}

/* ── 28. PRELOADER (home page only) ───────────────────────
   Ported from the previous site, on its original ~3s beat: cyan strokes
   draw the crest, a flash hands off to the solid mark, and the field
   turns from midnight to parchment.

   ⚠ Dismissal is CSS-driven, NOT JS-driven. The old build hid this with
   a setTimeout, so any script error left a full-screen overlay covering
   the entire site permanently. Here the fade-out is a keyframe with
   `forwards`, so the splash clears itself even if no JS ever runs. The
   JS module only unlocks scroll and removes the dead node. */
.preloader {
  position: fixed; inset: 0;
  z-index: 9999;
  display: grid; place-items: center;
  background: var(--ink);
  animation: preField var(--pre-dur) forwards,
             preOut 0.8s var(--ease) var(--pre-dur) forwards;
}
.preloader__inner { display: flex; flex-direction: column; align-items: center; }

.preloader__mark {
  position: relative;
  width: 120px; height: 152px;   /* 120 × (645/511) */
  margin-bottom: 1.5rem;
  animation: preBreath 1.8s var(--ease-io) infinite;
}
.preloader__neon {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  z-index: 2;
  animation: preNeon var(--pre-dur) forwards;
}
/* CSS beats the presentation attribute, so the stroke tracks the token */
.preloader__neon path {
  stroke: var(--data);
  stroke-dasharray: 2000;
  stroke-dashoffset: 2000;
  animation: preDraw 2s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}
.preloader__neon path:nth-child(1) { animation-delay: 0s; }
.preloader__neon path:nth-child(2) { animation-delay: 0.1s; }
.preloader__neon path:nth-child(3) { animation-delay: 0.2s; }
.preloader__neon path:nth-child(4) { animation-delay: 0.3s; }
.preloader__neon path:nth-child(5) { animation-delay: 0.4s; }
.preloader__neon path:nth-child(6) { animation-delay: 0.5s; }
.preloader__neon path:nth-child(7) { animation-delay: 0.6s; }
.preloader__neon path:nth-child(8) { animation-delay: 0.7s; }
.preloader__neon path:nth-child(9) { animation-delay: 0.8s; }

.preloader__png {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: contain;
  z-index: 3;
  opacity: 0;
  animation: prePng var(--pre-dur) forwards;
}
.preloader__flash {
  position: absolute; left: 50%; top: 50%;
  width: 200px; height: 200px;
  translate: -50% -50%;
  border-radius: 50%;
  z-index: 1;
  opacity: 0; scale: 0;
  pointer-events: none;
  background: radial-gradient(circle, #FFFFFF 0%, rgba(0, 210, 255, 0.8) 30%, rgba(8, 17, 31, 0) 70%);
  animation: preFlash var(--pre-dur) forwards;
}

.preloader__name {
  font-family: var(--f-display);
  font-size: 2.1rem; font-weight: 700; line-height: 1;
  letter-spacing: -0.01em;
  color: var(--d-hi);
  animation: preName var(--pre-dur) forwards;
}
.preloader__sub {
  margin-top: 0.55rem;
  font-size: 0.6rem; font-weight: 600;
  letter-spacing: 0.24em; text-transform: uppercase;
  color: var(--d-low);
  animation: preSub var(--pre-dur) forwards;
}

@keyframes preDraw   { to { stroke-dashoffset: 0; } }
@keyframes preBreath { 0%, 100% { scale: 1; } 50% { scale: 1.05; } }
@keyframes preField  { 0%, 55% { background: var(--ink); }  70%, 100% { background: var(--paper); } }
@keyframes preNeon   { 0%, 55% { opacity: 1; filter: drop-shadow(0 0 8px rgba(0,210,255,0.8)); }
                       65%, 100% { opacity: 0; filter: drop-shadow(0 0 2px rgba(0,210,255,0)); } }
@keyframes prePng    { 0%, 55% { opacity: 0; scale: 0.85; } 65% { opacity: 1; scale: 1.1; } 75%, 100% { opacity: 1; scale: 1; } }
@keyframes preFlash  { 0%, 55% { opacity: 0; scale: 0; } 62% { opacity: 1; scale: 1.3; } 80%, 100% { opacity: 0; scale: 2; } }
@keyframes preName   { 0%, 55% { color: var(--d-hi); }  70%, 100% { color: var(--t-hi); } }
@keyframes preSub    { 0%, 55% { color: var(--d-low); } 70%, 100% { color: var(--t-low); } }
@keyframes preOut    { to { opacity: 0; visibility: hidden; } }

/* Someone who asked for reduced motion should not sit through a 3s
   animated splash — skip it entirely rather than playing it instantly. */
@media (prefers-reduced-motion: reduce) {
  .preloader { display: none; }
}

/* ── 29. PRINT ───────────────────────────────────────────── */
@media print {
  .nav, .drawer, .to-top, .progress-rail, .marquee, .hero__actions { display: none !important; }
  .hero, .page-head { margin-top: 0; background: none; color: #000; }
  * { box-shadow: none !important; }
  body { color: #000; background: #fff; }
}