@charset "UTF-8";
/* ==========================================================================
   Needling Worldwide — marketing site design system
   --------------------------------------------------------------------------
   Direction: "The Readiness Path". Cool document-stock paper, deep teal-navy
   ink, and the brand cyan (#23BBCB, sampled from the logo) used only where it
   marks conformity. Spectral carries authority in headlines, IBM Plex Sans
   carries the engineering side, IBM Plex Mono carries the audit vernacular —
   control labels, framework references, checkpoint markers.

   The signature is the readiness path: one continuous hairline threading the
   page, with each service sitting on it as a checkpoint in the true order of
   a certification engagement.
   ========================================================================== */

/* ---------------------------------------------------------------- fonts --- */

@font-face {
  font-family: 'Spectral';
  src: url('/assets/fonts/spectral-400.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Spectral';
  src: url('/assets/fonts/spectral-600.woff2') format('woff2');
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Spectral';
  src: url('/assets/fonts/spectral-700.woff2') format('woff2');
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Spectral';
  src: url('/assets/fonts/spectral-800.woff2') format('woff2');
  font-weight: 800; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'IBM Plex Sans';
  src: url('/assets/fonts/plex-sans-var.woff2') format('woff2');
  font-weight: 100 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'IBM Plex Mono';
  src: url('/assets/fonts/plex-mono-400.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'IBM Plex Mono';
  src: url('/assets/fonts/plex-mono-500.woff2') format('woff2');
  font-weight: 500; font-style: normal; font-display: swap;
}

/* --------------------------------------------------------------- tokens --- */

:root {
  /* Ground — a substantial slate-teal stock. White is reserved for cards, so
     they lift off the page instead of blending into it. */
  --paper:      #F0F6F7;
  --paper-sunk: #E1ECEE;
  --card:       #FFFFFF;

  /* Dark brand color. Used as a BAND BACKGROUND (header, hero, footer) in both
     themes — not as a text color. Text uses --fg-strong. */
  --ink:        #0E2A33;
  --ink-deep:   #08191F;

  /* Foreground */
  --fg-strong:  #0E2A33;   /* headings */
  --slate:      #3D4647;   /* body — darkened to hold up on the tinted ground */
  --slate-soft: #5A6566;
  --slate-faint:#68767A;

  /* The conformity mark */
  --cyan:       #23BBCB;   /* sampled from the logo mark */
  --cyan-deep:  #0A7A89;   /* passes contrast on the tinted ground */
  --cyan-wash:  #E4F6F8;
  --cyan-glow:  rgba(35, 187, 203, .28);

  --rule:       #CCDBDE;
  --rule-soft:  #DCE7E9;
  --field-bg:   #F4F9F9;

  /* The dark band behind the header and every page title. */
  --band: linear-gradient(168deg, #16404E 0%, #134B5B 58%, #10596B 130%);

  color-scheme: light;

  /* Type */
  --font-display: 'Spectral', 'Iowan Old Style', Georgia, serif;
  --font-body:    'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono:    'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* Geometry — crisp, document-like, but not brutalist zero */
  --r-sm: 3px;
  --r-md: 6px;
  --r-pill: 999px;

  --shadow-card:  0 1px 2px rgba(14, 42, 51, .05), 0 12px 28px -18px rgba(14, 42, 51, .28);
  --shadow-lift:  0 2px 6px rgba(14, 42, 51, .07), 0 26px 50px -24px rgba(14, 42, 51, .34);
  --shadow-deep:  0 30px 70px -34px rgba(8, 25, 31, .55);

  /* Rhythm */
  --gutter: clamp(1.25rem, 4vw, 3.5rem);
  --shell: 1240px;
  --prose: 68ch;
  --section-y: clamp(4.5rem, 9vw, 8.5rem);

  --ease-out: cubic-bezier(.2, .7, .3, 1);
  --ease-spring: cubic-bezier(.34, 1.4, .5, 1);
}

/* ----------------------------------------------------------------- base --- */

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 7.5rem;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--slate);
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.68;
  font-weight: 460;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img, svg, canvas { display: block; max-width: 100%; }
img { height: auto; }

a { color: inherit; text-decoration: none; }

button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }

:focus-visible {
  outline: 2px solid var(--cyan-deep);
  outline-offset: 3px;
  border-radius: 2px;
}

::selection { background: var(--cyan-glow); color: var(--fg-strong); }

.skip-link {
  position: absolute; left: 50%; top: 0;
  transform: translate(-50%, -140%);
  z-index: 200;
  background: var(--ink); color: #fff;
  padding: .7rem 1.2rem; border-radius: 0 0 var(--r-md) var(--r-md);
  font-family: var(--font-mono); font-size: .75rem; letter-spacing: .1em; text-transform: uppercase;
  transition: transform .2s var(--ease-out);
}
.skip-link:focus { transform: translate(-50%, 0); }

.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ----------------------------------------------------------- typography --- */

h1, h2, h3, h4 {
  font-family: var(--font-display);
  color: var(--fg-strong);
  font-weight: 700;
  margin: 0;
  letter-spacing: -.018em;
  line-height: 1.1;
  text-wrap: balance;
}

.display {
  font-size: clamp(2.5rem, 5.4vw, 4.4rem);
  font-weight: 800;
  line-height: 1.01;
  letter-spacing: -.03em;
}

.h-section {
  font-size: clamp(1.9rem, 3.4vw, 2.95rem);
  font-weight: 700;
  letter-spacing: -.026em;
  line-height: 1.06;
}

.h-card {
  font-family: var(--font-body);
  font-size: 1.1875rem;
  font-weight: 650;
  letter-spacing: -.012em;
  line-height: 1.3;
  color: var(--fg-strong);
}

.lede {
  font-size: clamp(1.1rem, 1.4vw, 1.3125rem);
  line-height: 1.62;
  font-weight: 480;
  color: var(--slate);
  text-wrap: pretty;
}

p { margin: 0 0 1.15em; text-wrap: pretty; }
p:last-child { margin-bottom: 0; }

/* The mono voice: control labels, framework refs, checkpoint markers. Set a
   step larger and a step darker than a caption would be — these carry the
   section's name, so they have to survive a reader who is skimming. Tracking
   comes down as the size goes up, or the label outgrows the 200px rail. */
.eyebrow {
  font-family: var(--font-mono);
  font-size: .875rem;
  font-weight: 700;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--slate);
  display: flex;
  align-items: center;
  gap: .6rem;
  margin: 0 0 1.4rem;
}
.eyebrow::before {
  content: '';
  width: 1.6rem; height: 1px;
  background: var(--cyan);
  flex: none;
}
.eyebrow--plain::before { display: none; }

.mono { font-family: var(--font-mono); font-size: .78rem; letter-spacing: .04em; }

/* --------------------------------------------------------------- layout --- */

.shell {
  width: 100%;
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section { padding-block: var(--section-y); position: relative; }
.section--sunk { background: var(--paper-sunk); }
.section--tight { padding-block: clamp(3rem, 6vw, 5rem); }

/* Asymmetric editorial grid: a narrow mono rail holds the section label,
   the wide column holds the argument. Collapses to one column on tablet. */
.railed {
  display: grid;
  grid-template-columns: minmax(0, 200px) minmax(0, 1fr);
  gap: clamp(1.5rem, 4vw, 4.5rem);
  align-items: start;
}
.railed__rail { position: sticky; top: 7.5rem; }
.railed__rail .eyebrow { margin-bottom: .75rem; }
/* The rail caption is the one piece of running copy in a 200px column, so it
   gets the weight rather than the tracking — it stays inside the rail at this
   size (longest word ≈ 10 mono characters against ~200px). */
.railed__note {
  font-family: var(--font-mono);
  font-size: .8125rem;
  font-weight: 600;
  line-height: 1.62;
  color: var(--slate-soft);
  letter-spacing: .02em;
}

@media (max-width: 900px) {
  .railed { grid-template-columns: 1fr; gap: 0; }
  .railed__rail { position: static; margin-bottom: 1.75rem; }
  .railed__note { display: none; }
}

.prose { max-width: var(--prose); }

.rule { height: 1px; background: var(--rule); border: 0; margin: 0; }

/* -------------------------------------------------------------- buttons --- */

/* The button stays put and warms up as the cursor approaches. `--near` (0–1)
   comes from the shared proximity watcher in site.js. */
.btn {
  --btn-bg: var(--ink);
  --btn-fg: #fff;
  --halo: 14, 42, 51;
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: .65rem;
  padding: .95rem 1.6rem;
  background: var(--btn-bg);
  color: var(--btn-fg);
  border-radius: var(--r-pill);
  font-size: .9375rem;
  font-weight: 560;
  letter-spacing: -.005em;
  white-space: nowrap;
  box-shadow:
    0 6px 16px -10px rgba(14, 42, 51, .45),
    0 0 calc(10px + var(--near, 0) * 34px) calc(var(--near, 0) * 5px)
      rgba(var(--halo), calc(var(--near, 0) * .55));
  transition: background .25s var(--ease-out), color .25s var(--ease-out), box-shadow .35s var(--ease-out);
}
.btn__label { position: relative; z-index: 1; display: block; }
.btn__arrow { position: relative; z-index: 1; transition: transform .35s var(--ease-spring); }
.btn:hover .btn__arrow { transform: translateX(4px); }

.btn--accent { --btn-bg: var(--cyan-deep); --halo: 35, 187, 203; }
.btn--light  { --btn-bg: #fff; --btn-fg: var(--ink); --halo: 255, 255, 255; }

.btn--ghost {
  --btn-bg: transparent;
  --btn-fg: var(--ink);
  --btn-halo: transparent;
  box-shadow: inset 0 0 0 1px var(--rule);
}
.btn--ghost:hover {
  --btn-fg: var(--ink);
  box-shadow: inset 0 0 0 1px var(--ink);
}

.btn--light { --btn-bg: #fff; --btn-fg: var(--ink); }

/* A text link that behaves like a control reference: underline draws in. */
.linkline {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-weight: 500;
  color: var(--fg-strong);
  padding-bottom: 2px;
  background-image: linear-gradient(var(--cyan), var(--cyan));
  background-size: 0% 1.5px;
  background-position: 0 100%;
  background-repeat: no-repeat;
  transition: background-size .35s var(--ease-out);
}
.linkline:hover, .linkline:focus-visible { background-size: 100% 1.5px; }
.linkline svg { transition: transform .35s var(--ease-spring); }
.linkline:hover svg { transform: translateX(4px); }

/* --------------------------------------------------------------- header --- */

.header {
  position: fixed;
  inset: 0 0 auto;
  z-index: 100;
  background: rgba(250, 251, 251, .72);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color .3s var(--ease-out), background .3s var(--ease-out);
}
.header.is-stuck {
  border-bottom-color: var(--rule);
  background: rgba(250, 251, 251, .92);
}

.header__inner {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 3vw, 2.5rem);
  height: 7.1rem;
  transition: height .3s var(--ease-out);
}
.header.is-stuck .header__inner { height: 5.3rem; }

/* At rest the wordmark is deliberately large. The ceiling is set by what sits
   below it rather than by taste: .pagehead clears the fixed header with a
   7.5rem minimum padding-top, so the bar cannot grow past that without the
   header covering the first line of an interior page. 7.1rem of bar around a
   4.4rem mark leaves the smallest margin either side that still reads as
   deliberate. Once the page scrolls, .is-stuck takes it back down. */
.header__logo { flex: none; display: block; }
.header__logo img {
  height: 4.4rem;
  width: auto;
  transition: height .3s var(--ease-out);
}
.header.is-stuck .header__logo img { height: 3.1rem; }

/* The wordmark is close to 4.2:1, so it wants roughly four and a quarter times
   its height in width. On a 390px phone that leaves too little room for the
   theme toggle and the MENU control beside it, and the word "MENU" was being
   clipped by the right edge. Step the mark down before that happens rather
   than dropping the label, which is the only text telling a visitor how to
   open the navigation. */
@media (max-width: 560px) {
  .header__inner { height: 5.6rem; }
  .header__logo img { height: 2.6rem; }
  .header.is-stuck .header__logo img { height: 2.3rem; }
}

.nav { position: relative; display: flex; align-items: center; gap: .35rem; margin-inline: auto; }
.nav__link {
  position: relative;
  padding: .55rem .8rem;
  font-size: .9375rem;
  font-weight: 520;
  color: var(--slate);
  border-radius: var(--r-sm);
  transition: color .22s var(--ease-out);
}
.nav__link:hover, .nav__link[aria-current='page'] { color: var(--fg-strong); }
.nav__link[aria-current='page'] { font-weight: 550; }

/* The magnetic underline that slides between items. */
.nav__marker {
  position: absolute;
  bottom: .3rem;
  height: 1.5px;
  background: var(--cyan);
  border-radius: 2px;
  opacity: 0;
  transition: transform .38s var(--ease-out), width .38s var(--ease-out), opacity .25s var(--ease-out);
  pointer-events: none;
}

.header__cta { flex: none; display: flex; align-items: center; gap: .75rem; }
.header__cta .btn { padding: .7rem 1.25rem; font-size: .875rem; }

/* Services dropdown */
.nav__group { position: relative; }
.nav__panel {
  position: absolute;
  top: calc(100% + .6rem);
  left: 50%;
  translate: -50% 0;
  width: min(38rem, 86vw);
  padding: .75rem;
  background: var(--card);
  border: 1px solid var(--rule);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-lift);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .15rem;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity .25s var(--ease-out), transform .25s var(--ease-out), visibility .25s;
}
.nav__group:hover .nav__panel,
.nav__group:focus-within .nav__panel { opacity: 1; visibility: visible; transform: translateY(0); }

.nav__panelitem {
  display: block;
  padding: .7rem .85rem;
  border-radius: var(--r-sm);
  transition: background .2s var(--ease-out);
}
.nav__panelitem:hover { background: var(--cyan-wash); }
.nav__panelitem b { display: block; font-size: .9375rem; font-weight: 550; color: var(--fg-strong); }
.nav__panelitem span { display: block; font-size: .8125rem; color: var(--slate-soft); line-height: 1.45; }

.navtoggle { display: none; }

@media (max-width: 1080px) {
  .nav, .header__cta .btn { display: none; }
  .navtoggle {
    display: inline-flex; align-items: center; gap: .55rem;
    margin-left: auto;
    font-family: var(--font-mono); font-size: .7rem; letter-spacing: .16em;
    text-transform: uppercase; color: var(--fg-strong);
  }
  .navtoggle svg { width: 20px; height: 20px; }
}

/* Mobile sheet */
.sheet {
  position: fixed; inset: 0; z-index: 110;
  background: var(--paper);
  padding: 6rem var(--gutter) 3rem;
  overflow-y: auto;
  opacity: 0; visibility: hidden;
  transition: opacity .3s var(--ease-out), visibility .3s;
}
.sheet.is-open { opacity: 1; visibility: visible; }
.sheet a {
  display: block;
  padding: .85rem 0;
  border-bottom: 1px solid var(--rule-soft);
  font-family: var(--font-display);
  font-size: 1.4rem;
  color: var(--fg-strong);
}
.sheet a small {
  display: block; font-family: var(--font-mono); font-size: .68rem;
  letter-spacing: .16em; text-transform: uppercase; color: var(--slate-faint);
}
.sheet__close { position: absolute; top: 1.75rem; right: var(--gutter); }

/* ----------------------------------------------------------------- hero --- */

.hero {
  position: relative;
  padding-top: clamp(8rem, 15vw, 11.5rem);
  padding-bottom: clamp(3rem, 6vw, 5rem);
  overflow: hidden;
}

/* The hero photograph, used as texture rather than as a picture. Painting
   order inside the band is band gradient → cyan wash (.hero::before) → this →
   the control field → the copy, so it sits under everything that has to be
   read. The band's own dark gradient is still what the headline is read
   against; the photograph only breaks up the flat area behind it. */
.hero__photo {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}
/* A summit above the cloud line, with a track cut up the snow toward it —
   the readiness path, stated as a picture rather than as a claim. The frame is
   meant to be seen, not merely sensed: the ridge and the cloud line should be
   legible as landscape while the type still reads as the first thing on the
   page.

   Framed at 55% 38% deliberately. The frame's brightest region is the sunlit
   snow field across the lower left, which is exactly where the lede and the
   two calls to action sit; biasing upward pushes that field below the fold of
   the band and leaves sky, cloud and the dark ridge behind the copy instead. */
.hero__photo::before {
  content: '';
  position: absolute;
  inset: 0;
  background: url('/assets/img/hero-summit.jpg') 55% 38% / cover no-repeat;
  filter: saturate(.72) contrast(1.02) brightness(.86);
  opacity: .52;
}
/* Scrim + tint in one layer. The ink is heaviest at the left and along the
   top, which is exactly where the eyebrow, headline and lede sit, so the copy
   never lands on the busy part of the frame; the cyan comes in from the right,
   over the empty side, to pull the photograph into the brand. */
.hero__photo::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(96deg, rgba(14, 42, 51, .72) 0%, rgba(14, 42, 51, .3) 46%, rgba(14, 42, 51, .04) 100%),
    linear-gradient(180deg, rgba(14, 42, 51, .5) 0%, rgba(14, 42, 51, .04) 42%, rgba(14, 42, 51, .26) 100%),
    linear-gradient(250deg, rgba(35, 187, 203, .16), rgba(35, 187, 203, 0) 58%);
}

/* Signature #1 — the control field. Faint unfinished check marks on paper;
   the ones the cursor approaches complete themselves and turn cyan. */
.hero__field {
  position: absolute;
  inset: 0;
  /* canvas is a replaced element: inset alone leaves it at its intrinsic
     300x150, so it has to be told to fill the band. */
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
}
.hero__inner { position: relative; z-index: 1; }

.hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: end;
}
@media (max-width: 940px) {
  .hero__grid { grid-template-columns: 1fr; }
  /* One column means the copy runs the full width of the frame, so the
     photograph gives up more ground and the scrim goes flat instead of
     directional. A narrow viewport also crops hard into the middle of the
     frame, so the peak is recentered to stay in shot, and the 900px file is
     served instead of the full-width one — 43 KB against 141 KB, on the
     connections least able to afford it. */
  .hero__photo::before {
    background-image: url('/assets/img/hero-summit-sm.jpg');
    background-position: 62% 42%;
    opacity: .42;
  }
  .hero__photo::after {
    background:
      linear-gradient(180deg, rgba(14, 42, 51, .66) 0%, rgba(14, 42, 51, .42) 50%, rgba(14, 42, 51, .6) 100%),
      linear-gradient(250deg, rgba(35, 187, 203, .16), rgba(35, 187, 203, 0) 58%);
  }
}

.hero .display { margin-bottom: 1.6rem; }

/* The conformity mark: the headline signs itself off. Same gesture as the
   control field behind it, so the hero makes one point rather than two. */
.mark {
  display: inline-block;
  width: .58em;
  height: .58em;
  margin-left: .14em;
  color: var(--cyan);
  vertical-align: baseline;
}
.mark path {
  stroke-dasharray: 30;
  stroke-dashoffset: 30;
  animation: draw-mark .7s .55s var(--ease-out) forwards;
}
@keyframes draw-mark { to { stroke-dashoffset: 0; } }

.hero__lede { max-width: 34rem; margin-bottom: 2.25rem; }
.hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.5rem; }

/* Right column: the credential stack, set as a document block. */
.credblock {
  border-left: 1px solid var(--rule);
  padding-left: clamp(1.25rem, 2.5vw, 2rem);
  padding-bottom: .5rem;
}
.credblock dl { margin: 0; display: grid; gap: 1.35rem; }
.credblock dt {
  font-family: var(--font-mono);
  font-size: .86rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--slate-faint);
  margin-bottom: .45rem;
}
.credblock dd {
  margin: 0;
  font-size: .95rem;
  line-height: 1.5;
  color: var(--fg-strong);
}
.credblock dd b { font-weight: 600; }
.credblock .num {
  font-family: var(--font-display);
  font-size: 2.1rem;
  font-weight: 700;
  letter-spacing: -.03em;
  line-height: 1;
  color: var(--fg-strong);
  display: block;
  margin-bottom: .15rem;
}

/* -------------------------------------------------------- framework rail --- */

.marquee {
  position: relative;
  padding-block: 1.15rem;
  overflow: hidden;
  background: var(--ink);
}

/* The items fade out against the ribbon's own color. A mask on the whole
   element would punch through the ribbon to the page behind it, which reads as
   a hard light edge in the light theme. */
.marquee::before,
.marquee::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  width: clamp(3rem, 8%, 9rem);
  z-index: 1;
  pointer-events: none;
}
.marquee::before { left: 0; background: linear-gradient(90deg, var(--ink-deep), transparent); }
.marquee::after { right: 0; background: linear-gradient(270deg, var(--ink-deep), transparent); }
.marquee__track {
  display: flex;
  width: max-content;
  gap: 0;
  animation: marquee 46s linear infinite;
  will-change: transform;
}
.marquee:hover .marquee__track { animation-play-state: paused; }
@keyframes marquee { to { transform: translateX(-50%); } }

.marquee__item {
  display: inline-flex;
  align-items: center;
  gap: .75rem;
  padding-inline: 1.35rem;
  font-family: var(--font-mono);
  font-size: .8125rem;
  font-weight: 500;
  letter-spacing: .03em;
  color: rgba(255, 255, 255, .52);
  white-space: nowrap;
  transition: color .3s var(--ease-out);
}
.marquee__item::after {
  content: '';
  width: 3px; height: 3px; border-radius: 50%;
  background: rgba(255, 255, 255, .22);
  transition: background .3s var(--ease-out);
}
.marquee__item.is-near { color: #fff; }
.marquee__item.is-near::after { background: var(--cyan); }

/* ------------------------------------------------------------- statement --- */

.statement {
  font-family: var(--font-display);
  font-size: clamp(1.45rem, 2.55vw, 2.15rem);
  line-height: 1.34;
  font-weight: 400;
  letter-spacing: -.017em;
  color: var(--fg-strong);
  max-width: 30ch;
  text-wrap: pretty;
}
.statement strong { font-weight: 700; }

.statement-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 5rem);
  align-items: start;
}
@media (max-width: 900px) { .statement-grid { grid-template-columns: 1fr; } }

/* ---------------------------------------------------- signature: the path --- */

.path { position: relative; }

.path__head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1.5rem 2rem;
  margin-bottom: clamp(2.5rem, 5vw, 4rem);
}

/* The line itself: a hairline that strokes in as the section scrolls. */
.path__line {
  position: relative;
  height: 1px;
  background: var(--rule);
  margin-bottom: 0;
}
.path__line::after {
  content: '';
  position: absolute;
  inset: 0 auto 0 0;
  width: var(--path-progress, 0%);
  background: var(--cyan);
  transition: width .1s linear;
}

.path__stages {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 0;
}
@media (max-width: 1080px) { .path__stages { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px)  { .path__stages { grid-template-columns: 1fr; } }

.stage {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 2.15rem 1.5rem 2rem;
  border-right: 1px solid var(--rule-soft);
  transition: background .35s var(--ease-out);
}
.stage:last-child { border-right: 0; }
.stage:hover { background: var(--card); }
@media (max-width: 1080px) {
  .stage { border-bottom: 1px solid var(--rule-soft); }
  .stage:nth-child(2n) { border-right: 0; }
}
@media (max-width: 620px) { .stage { border-right: 0; } }

/* The checkpoint node sits ON the line. */
.stage__node {
  position: absolute;
  top: -5px;
  left: 1.5rem;
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--paper);
  box-shadow: inset 0 0 0 1.5px var(--slate-faint);
  transition: box-shadow .4s var(--ease-out), background .4s var(--ease-out), transform .4s var(--ease-spring);
}
.stage.is-passed .stage__node {
  background: var(--cyan);
  box-shadow: inset 0 0 0 1.5px var(--cyan), 0 0 0 4px var(--cyan-wash);
  transform: scale(1.15);
}
.stage:hover .stage__node { transform: scale(1.35); }
@media (max-width: 1080px) { .stage__node { display: none; } }

.stage__ref {
  font-family: var(--font-mono);
  font-size: .84rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--cyan-deep);
  margin-bottom: .9rem;
}
.stage__title { margin-bottom: .7rem; }
.stage__body { font-size: .9375rem; font-weight: 470; line-height: 1.6; color: var(--slate); margin-bottom: 1.4rem; }
.stage__link { margin-top: auto; font-size: .875rem; }

.path__ongoing {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  background: var(--rule-soft);
  border-top: 1px solid var(--rule);
  margin-top: 0;
}
@media (max-width: 720px) { .path__ongoing { grid-template-columns: 1fr; } }

.ongoing {
  position: relative;
  background: var(--paper);
  padding: 2.15rem clamp(1.5rem, 3vw, 2.5rem);
  transition: background .35s var(--ease-out);
  overflow: hidden;
}
.ongoing:hover { background: var(--card); }
.ongoing__flag {
  position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, var(--cyan), transparent);
  transform: scaleX(var(--near, 0));
  transform-origin: left;
  transition: transform .5s var(--ease-out);
}

/* ---------------------------------------------------------------- cards --- */

/* Magnetic card: translates toward the pointer and lights a soft spotlight
   at the pointer position. Both driven by CSS custom properties set in JS. */
.mcard {
  --card-pad: clamp(1.5rem, 2.5vw, 2rem);
  position: relative;
  background: var(--card);
  border: 1px solid var(--rule);
  border-radius: var(--r-md);
  padding: var(--card-pad);
  overflow: hidden;
  transition: border-color .35s var(--ease-out), box-shadow .45s var(--ease-out), transform .45s var(--ease-out);
  will-change: transform;
}
.mcard::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(22rem 22rem at var(--px, 50%) var(--py, 0%), var(--cyan-wash), transparent 62%);
  opacity: 0;
  transition: opacity .45s var(--ease-out);
  pointer-events: none;
}
.mcard:hover { border-color: #C7DADD; box-shadow: var(--shadow-lift); }
.mcard:hover::before { opacity: 1; }
.mcard > * { position: relative; }

/* ------------------------------------------------------------ testimony --- */

.deck { position: relative; }
.deck__viewport {
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -ms-overflow-style: none;
  padding-block: .5rem 1.5rem;
  margin-inline: calc(var(--gutter) * -1);
  padding-inline: var(--gutter);
  cursor: grab;
}
.deck__viewport::-webkit-scrollbar { display: none; }
.deck__viewport.is-dragging { cursor: grabbing; scroll-snap-type: none; }

.deck__track { display: flex; gap: 1.25rem; width: max-content; }

.quote {
  scroll-snap-align: center;
  flex: none;
  width: min(30rem, 82vw);
  display: flex;
  flex-direction: column;
  padding: clamp(1.75rem, 3vw, 2.5rem);
  background: var(--card);
  border: 1px solid var(--rule);
  border-radius: var(--r-md);
  /* Depth by distance from the deck's center, set in JS. */
  transform: scale(var(--depth-scale, 1));
  opacity: var(--depth-opacity, 1);
  transition: transform .45s var(--ease-out), opacity .45s var(--ease-out), box-shadow .45s var(--ease-out);
  will-change: transform;
}
.quote.is-focus { box-shadow: var(--shadow-lift); }

.quote__mark {
  font-family: var(--font-display);
  font-size: 3.4rem;
  line-height: .6;
  color: var(--cyan);
  margin-bottom: .9rem;
  user-select: none;
}
.quote__text {
  margin: 0 0 1.75rem;   /* browsers indent blockquote by default */
  font-family: var(--font-display);
  font-size: 1.1875rem;
  line-height: 1.52;
  color: var(--fg-strong);
  text-wrap: pretty;
}
.quote__who { margin-top: auto; padding-top: 1.25rem; border-top: 1px solid var(--rule-soft); }
.quote__name { font-weight: 600; color: var(--fg-strong); font-size: .9375rem; }
.quote__role { font-family: var(--font-mono); font-size: .72rem; letter-spacing: .05em; color: var(--slate-soft); line-height: 1.55; }

.deck__controls { display: flex; gap: .6rem; align-items: center; }
.deck__btn {
  width: 2.75rem; height: 2.75rem;
  display: grid; place-items: center;
  border-radius: 50%;
  border: 1px solid var(--rule);
  color: var(--fg-strong);
  background: var(--card);
  transition: border-color .25s var(--ease-out), background .25s var(--ease-out), color .25s var(--ease-out);
}
.deck__btn:hover { border-color: var(--ink); }
.deck__btn[disabled] { opacity: .35; cursor: default; }
.deck__btn[disabled]:hover { border-color: var(--rule); }

/* ---------------------------------------------------------------- about --- */

.about {
  display: grid;
  grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: start;
}
@media (max-width: 900px) { .about { grid-template-columns: 1fr; } }

.portrait { position: relative; }
.portrait img {
  width: 100%;
  border-radius: var(--r-md);
  filter: grayscale(.18) contrast(1.02);
  box-shadow: var(--shadow-card);
}
.portrait__plate {
  margin-top: 1.1rem;
  padding-top: 1.1rem;
  border-top: 1px solid var(--rule);
}
.portrait__name { font-family: var(--font-display); font-size: 1.35rem; font-weight: 700; color: var(--fg-strong); letter-spacing: -.02em; }
.portrait__creds {
  font-family: var(--font-mono);
  font-size: .7rem;
  letter-spacing: .09em;
  line-height: 1.75;
  color: var(--slate-soft);
  text-transform: uppercase;
  margin-top: .35rem;
}

.award {
  display: inline-flex; align-items: center; gap: .7rem;
  margin-top: 1.25rem;
  padding: .6rem .9rem .6rem .6rem;
  border: 1px solid var(--rule);
  border-radius: var(--r-pill);
  background: var(--card);
}
.award img { width: 2.7rem; height: 2.7rem; object-fit: contain; }
.award span {
  font-family: var(--font-mono); font-size: .68rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--slate); line-height: 1.4;
}

/* --------------------------------------------------------------- clients --- */

.clients {
  display: flex;
  flex-wrap: wrap;
  gap: .55rem;
}
.client {
  font-family: var(--font-mono);
  font-size: .78rem;
  letter-spacing: .02em;
  color: var(--slate);
  padding: .55rem .95rem;
  border: 1px solid var(--rule);
  border-radius: var(--r-pill);
  background: var(--card);
  transition: color .3s var(--ease-out), border-color .3s var(--ease-out), transform .3s var(--ease-out);
}
.client:hover { color: var(--fg-strong); border-color: var(--cyan); transform: translateY(-2px); }

/* ------------------------------------------------------------- cta band --- */

.cta {
  position: relative;
  padding-block: clamp(3.75rem, 7vw, 6rem);
  background: linear-gradient(135deg, #0E2A33 0%, #0C4653 52%, #0A7788 128%);
  color: #DCE7EA;
  overflow: hidden;
}
.cta::before {
  content: '';
  position: absolute;
  inset: -40% -10% auto auto;
  width: 46rem; height: 46rem;
  background: radial-gradient(circle, rgba(35,187,203,.16), transparent 62%);
  pointer-events: none;
}
.cta h2 { color: #fff; }
.cta .eyebrow { color: rgba(255,255,255,.88); }
.cta__inner { position: relative; display: grid; grid-template-columns: minmax(0,1fr) auto; gap: clamp(2rem,5vw,4rem); align-items: center; }
@media (max-width: 860px) { .cta__inner { grid-template-columns: 1fr; } }
.cta__lede { color: rgba(255,255,255,.72); max-width: 40ch; margin-top: 1.1rem; }
.cta__actions { display: flex; flex-wrap: wrap; gap: 1rem; }

.cta__details { display: flex; flex-wrap: wrap; gap: 2.5rem; margin-top: 2.75rem; }
.cta__detail dt {
  font-family: var(--font-mono); font-size: .66rem; letter-spacing: .18em;
  text-transform: uppercase; color: rgba(255,255,255,.42); margin-bottom: .4rem;
}
.cta__detail dd { margin: 0; color: #fff; font-size: .9375rem; line-height: 1.55; }
.cta__detail a:hover { color: var(--cyan); }

/* --------------------------------------------------------------- footer --- */

.footer { background: var(--ink-deep); color: rgba(255,255,255,.62); padding-block: clamp(3.5rem, 6vw, 5rem) 2rem; }
.footer a { color: rgba(255,255,255,.72); transition: color .22s var(--ease-out); }
.footer a:hover { color: var(--cyan); }

.footer__top {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr));
  gap: clamp(1.75rem, 4vw, 3rem);
  padding-bottom: 3rem;
  border-bottom: 1px solid rgba(255,255,255,.1);
}
@media (max-width: 940px) { .footer__top { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .footer__top { grid-template-columns: 1fr; } }

.footer__logo img { height: 2.15rem; width: auto; opacity: .95; }
.footer__blurb { margin-top: 1.15rem; font-size: .9rem; line-height: 1.65; max-width: 28ch; }

.footer h3 {
  font-family: var(--font-mono);
  font-size: .74rem;
  font-weight: 600;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: rgba(255,255,255,.6);
  margin-bottom: 1.1rem;
}
.footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .55rem; font-size: .9rem; font-weight: 470; }

/* Badge row — desaturated until the cursor comes near, then full color. */
.badges {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: clamp(1.5rem, 3vw, 2.75rem);
  padding-block: 2.25rem;
  border-bottom: 1px solid rgba(255,255,255,.1);
}
.badge {
  display: flex;
  align-items: center;
  gap: .85rem;
  filter: grayscale(1);
  opacity: .68;
  transform: translateY(0);
  transition: filter .45s var(--ease-out), opacity .45s var(--ease-out), transform .45s var(--ease-out);
}
.badge.is-near { filter: none; opacity: 1; transform: translateY(-3px); }
.badge__art {
  height: 5.2rem; width: auto;
  background: #fff;
  border-radius: var(--r-sm);
  padding: .4rem;
  object-fit: contain;
}
.badge__text { font-family: var(--font-mono); font-size: .76rem; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; line-height: 1.6; color: rgba(255,255,255,.72); }
.badge__text b { display: block; color: #fff; font-weight: 500; }

.social { display: flex; gap: .6rem; }
.social a {
  width: 2.4rem; height: 2.4rem;
  display: grid; place-items: center;
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 50%;
  transition: border-color .25s var(--ease-out), background .25s var(--ease-out), transform .25s var(--ease-out);
}
.social a:hover { border-color: var(--cyan); background: rgba(35,187,203,.12); transform: translateY(-2px); }
.social svg { width: 1rem; height: 1rem; fill: currentColor; }

.footer__base {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem 2rem;
  padding-top: 2rem;
  font-family: var(--font-mono);
  font-size: .7rem;
  letter-spacing: .06em;
  color: rgba(255,255,255,.42);
}
.footer__base nav { display: flex; flex-wrap: wrap; gap: 1.5rem; }

/* ---------------------------------------------------------------- motion --- */

.reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .75s var(--ease-out), transform .75s var(--ease-out);
  transition-delay: var(--reveal-delay, 0ms);
}
.reveal.is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .reveal { opacity: 1; transform: none; }
  .mark path { stroke-dashoffset: 0; }
  .marquee__track { animation: none; }
  .hero__field { display: none; }
}

/* ==========================================================================
   Interior pages
   ========================================================================== */

.pagehead {
  padding-top: clamp(7.5rem, 13vw, 10.5rem);
  padding-bottom: clamp(2.5rem, 5vw, 4rem);
  border-bottom: 1px solid var(--rule);
}
.pagehead__lede { max-width: 46ch; margin-top: 1.5rem; }
.pagehead__stage { margin-bottom: .9rem; }
.pagehead .eyebrow a:hover { color: var(--fg-strong); }

.display--page { font-size: clamp(2.35rem, 5.2vw, 4.2rem); }
.display--post {
  font-size: clamp(1.95rem, 4vw, 3.35rem);
  font-weight: 700;
  letter-spacing: -.028em;
  line-height: 1.06;
  max-width: 22ch;
}
.pagehead--post { border-bottom: 0; padding-bottom: clamp(1.5rem, 3vw, 2.5rem); }

.postmeta {
  display: flex; flex-wrap: wrap; gap: .6rem;
  margin-top: 1.5rem;
  font-family: var(--font-mono);
  font-size: .74rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--slate-soft);
}

/* ------------------------------------------------------------ card grids --- */

.cardgrid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(19rem, 100%), 1fr));
  gap: 1.25rem;
}
.cardgrid--two { grid-template-columns: repeat(auto-fill, minmax(min(22rem, 100%), 1fr)); }

.servicecard { display: flex; flex-direction: column; }
.servicecard .stage__link { margin-top: auto; }

.postgrid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(20rem, 100%), 1fr));
  gap: 1.25rem;
}
.postcard { display: flex; flex-direction: column; }
.postcard__date {
  font-family: var(--font-mono);
  font-size: .74rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--cyan-deep);
  margin-bottom: .9rem;
}
.postcard__title { margin-bottom: .75rem; }
.postcard__excerpt { font-size: .9375rem; font-weight: 470; line-height: 1.6; color: var(--slate); margin-bottom: 1.4rem; }
.postcard__more { margin-top: auto; font-size: .875rem; }
.postcard:hover .postcard__more { background-size: 100% 1.5px; }

.pager {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.25rem;
  margin-top: 3rem;
}
.pager__count {
  font-family: var(--font-mono);
  font-size: .72rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--slate-soft);
}

/* -------------------------------------------------------------- articles --- */

.article { color: var(--slate); }
.article p { font-size: 1.0625rem; font-weight: 470; line-height: 1.72; }
.article--post { max-width: 68ch; }
.article--post p { font-size: 1.125rem; font-weight: 470; line-height: 1.75; margin-bottom: 1.35em; }

.article h2 {
  font-size: clamp(1.4rem, 2.2vw, 1.85rem);
  margin: 2.75rem 0 1rem;
  letter-spacing: -.022em;
}
.article h3 {
  font-size: 1.2rem;
  margin: 2rem 0 .75rem;
}
.article h2:first-child, .article h3:first-child { margin-top: 0; }

.article ul { margin: 0 0 1.35em; padding-left: 0; list-style: none; }
.article li {
  position: relative;
  padding-left: 1.75rem;
  margin-bottom: .6rem;
  line-height: 1.65;
}
.article li::before {
  content: '';
  position: absolute;
  left: .1rem; top: .62em;
  width: .7rem; height: .38rem;
  border-left: 1.5px solid var(--cyan);
  border-bottom: 1.5px solid var(--cyan);
  transform: rotate(-45deg);
}

.article blockquote {
  margin: 2rem 0;
  padding-left: 1.5rem;
  border-left: 2px solid var(--cyan);
  font-family: var(--font-display);
  font-size: 1.2rem;
  line-height: 1.55;
  color: var(--fg-strong);
}

.article figure { margin: 2.25rem 0; }
.article figure img { width: 100%; border-radius: var(--r-md); box-shadow: var(--shadow-card); }

.article a:not(.btn):not(.linkline) {
  color: var(--fg-strong);
  background-image: linear-gradient(var(--cyan), var(--cyan));
  background-size: 100% 1px;
  background-position: 0 100%;
  background-repeat: no-repeat;
  padding-bottom: 1px;
  transition: background-size .25s var(--ease-out), color .25s var(--ease-out);
}
.article a:not(.btn):not(.linkline):hover { background-size: 100% 2px; color: var(--cyan-deep); }

.checklist {
  margin-top: 2.25rem;
  padding: 1.75rem;
  background: var(--card);
  border: 1px solid var(--rule);
  border-radius: var(--r-md);
}
.checklist__title {
  font-size: 1rem;
  font-weight: 600;
  color: var(--fg-strong);
  margin-bottom: 1.25rem;
  line-height: 1.55;
}
.checklist ul { margin: 0; }
.checklist li { color: var(--fg-strong); font-size: 1rem; }

/* ------------------------------------------------------------ quote wall --- */

.quotewall {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(21rem, 100%), 1fr));
  gap: 1.25rem;
  align-items: start;
}
.quote--static { width: auto; flex: initial; transform: none; opacity: 1; scroll-snap-align: none; }

/* --------------------------------------------------------------- contact --- */

.contactgrid {
  display: grid;
  grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr);
  gap: clamp(1.5rem, 4vw, 3.5rem);
  align-items: start;
}
@media (max-width: 860px) { .contactgrid { grid-template-columns: 1fr; } }

.contactcard, .contactform {
  background: var(--card);
  border: 1px solid var(--rule);
  border-radius: var(--r-md);
  padding: clamp(1.75rem, 3vw, 2.5rem);
}

.contactlist { margin: 0; display: grid; gap: 1.5rem; }
.contactlist dt {
  font-family: var(--font-mono);
  font-size: .74rem; font-weight: 600; letter-spacing: .15em; text-transform: uppercase;
  color: var(--slate-faint); margin-bottom: .4rem;
}
.contactlist dd { margin: 0; color: var(--fg-strong); line-height: 1.6; }

.field { margin-bottom: 1.25rem; }
.field label {
  display: block;
  font-family: var(--font-mono);
  font-size: .66rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--slate-soft);
  margin-bottom: .5rem;
}
.field input, .field textarea {
  width: 100%;
  font: inherit;
  color: var(--fg-strong);
  background: var(--field-bg);
  border: 1px solid var(--rule);
  border-radius: var(--r-sm);
  padding: .8rem .9rem;
  transition: border-color .25s var(--ease-out), background .25s var(--ease-out);
}
.field textarea { resize: vertical; min-height: 7rem; }
.field input:focus, .field textarea:focus {
  outline: none;
  border-color: var(--cyan);
  background: var(--card);
  box-shadow: 0 0 0 3px var(--cyan-wash);
}
.field input::placeholder { color: var(--slate-faint); }

.formnote {
  margin-top: 1.25rem;
  font-size: .82rem;
  line-height: 1.6;
  color: var(--slate-soft);
  max-width: 44ch;
}

/* ==========================================================================
   Color bands
   --------------------------------------------------------------------------
   Paper alone ran too pale over a long page, so the surfaces alternate:
   paper → dark ribbon → paper → tinted → paper → ink → paper → teal → footer.
   ========================================================================== */

/* A cyan wash bleeding in from the top-right keeps the hero off flat white. */
.hero::before {
  content: '';
  position: absolute;
  inset: -18rem -22rem auto auto;
  width: 62rem;
  height: 62rem;
  background:
    radial-gradient(circle at 50% 50%, rgba(35, 187, 203, .17), rgba(35, 187, 203, .05) 45%, transparent 68%);
  pointer-events: none;
  z-index: 0;
}
.hero { background: linear-gradient(180deg, #F2F8F9 0%, var(--paper) 62%); }

/* A dark section, for the stretches that need weight rather than air. */
.section--ink { background: var(--ink); color: rgba(255, 255, 255, .7); }
.section--ink h2,
.section--ink h3,
.section--ink .h-section { color: #fff; }
.section--ink .eyebrow { color: rgba(255, 255, 255, .84); }
.section--ink .railed__note { color: rgba(255, 255, 255, .62); }

.section--ink .deck__btn {
  background: rgba(255, 255, 255, .05);
  border-color: rgba(255, 255, 255, .18);
  color: #fff;
}
.section--ink .deck__btn:hover { border-color: var(--cyan); background: rgba(35, 187, 203, .14); }
.section--ink .deck__btn[disabled] { opacity: .3; }
.section--ink .deck__btn[disabled]:hover { border-color: rgba(255, 255, 255, .18); background: rgba(255, 255, 255, .05); }

.section--ink .client {
  background: rgba(255, 255, 255, .05);
  border-color: rgba(255, 255, 255, .16);
  color: rgba(255, 255, 255, .78);
}
.section--ink .client:hover { color: #fff; border-color: var(--cyan); background: rgba(35, 187, 203, .12); }

/* The path band leans further into the tint and gets a cyan hairline on top. */
.path.section--sunk {
  background: linear-gradient(180deg, #EAF3F4 0%, var(--paper-sunk) 100%);
  border-top: 1px solid rgba(35, 187, 203, .22);
}
.stage:hover { background: rgba(255, 255, 255, .75); }
.ongoing { background: rgba(255, 255, 255, .45); }
.ongoing:hover { background: #fff; }
.path__ongoing { background: rgba(35, 187, 203, .16); }

/* Cards get a hairline of accent on hover rather than only a shadow. */
.mcard { border-top: 2px solid transparent; }
.mcard:hover { border-top-color: var(--cyan); }

/* The quote deck sits on ink, so the cards themselves stay white and pop. */
.section--ink .quote { border-color: transparent; box-shadow: var(--shadow-deep); }

/* ==========================================================================
   Dark theme
   --------------------------------------------------------------------------
   The layout does not change between themes. The dark bands (header, hero,
   page headers, footer) stay dark in both; what flips is the ground, the
   cards and the foreground. `data-theme` is stamped on <html> by theme.js
   before first paint.
   ========================================================================== */

:root[data-theme='dark'] {
  --paper:      #102329;
  --paper-sunk: #0B1A1F;
  --card:       #17333B;

  /* Bands go deeper than the ground so they still read as bands. */
  --ink:        #0A1A20;
  --ink-deep:   #060F13;

  --fg-strong:  #EFF7F8;
  --slate:      #B4C7CA;
  --slate-soft: #8DA2A6;
  --slate-faint:#748A8E;

  --cyan:       #33C7D7;
  --cyan-deep:  #46D3E2;
  --cyan-wash:  #123C45;
  --cyan-glow:  rgba(51, 199, 215, .3);

  --rule:       #24434C;
  --rule-soft:  #1B343C;
  --field-bg:   #0D2027;

  --band: linear-gradient(168deg, #0A1A20 0%, #0B2129 58%, #0A2C36 130%);

  --shadow-card: 0 1px 2px rgba(0, 0, 0, .4), 0 12px 28px -18px rgba(0, 0, 0, .7);
  --shadow-lift: 0 2px 6px rgba(0, 0, 0, .45), 0 26px 50px -24px rgba(0, 0, 0, .8);
  --shadow-deep: 0 30px 70px -34px rgba(0, 0, 0, .9);

  color-scheme: dark;
}

/* A near-black pill on a dark ground disappears; lift the neutral button. */
:root[data-theme='dark'] .btn { --btn-bg: #205260; --halo: 51, 199, 215; }
:root[data-theme='dark'] .btn--light { --btn-bg: #EFF7F8; --btn-fg: #0A1A20; }
:root[data-theme='dark'] .mcard:hover { border-color: #2C525C; }
:root[data-theme='dark'] .portrait img { filter: grayscale(.18) contrast(1.02) brightness(.92); }
:root[data-theme='dark'] .badge__art { background: #E8F0F1; }
:root[data-theme='dark'] .stage:hover { background: rgba(255, 255, 255, .04); }
:root[data-theme='dark'] .ongoing { background: rgba(255, 255, 255, .03); }
:root[data-theme='dark'] .ongoing:hover { background: rgba(255, 255, 255, .06); }
:root[data-theme='dark'] .path.section--sunk {
  background: linear-gradient(180deg, #0D2027 0%, var(--paper-sunk) 100%);
}
:root[data-theme='dark'] .path__ongoing { background: rgba(51, 199, 215, .18); }

/* The dark theme's band runs several stops deeper, so the lit points in the
   hero photograph gain contrast against it. Take the frame back down to match
   the restraint it has in the light theme. */
/* The dark band is very nearly black, so darkening the frame the way the light
   theme does makes it disappear into the background entirely. Here the picture
   has to be held ABOVE the band to register at all — brightness goes up, not
   down, and the scrim below does the work of protecting the headline. */
/* The light theme lifts the top of the hero a shade above the paper before
   settling into it. The dark theme needs the same lift, or the hero reads as a
   flat slab: the gradient was hardcoded to the light tint and never darkened. */
:root[data-theme='dark'] .hero { background: linear-gradient(180deg, #143038 0%, var(--paper) 62%); }

:root[data-theme='dark'] .hero__photo::before { opacity: .46; filter: saturate(.6) contrast(1) brightness(1.02); }
:root[data-theme='dark'] .hero__photo::after {
  background:
    linear-gradient(96deg, rgba(6, 15, 19, .76) 0%, rgba(6, 15, 19, .36) 46%, rgba(6, 15, 19, .06) 100%),
    linear-gradient(180deg, rgba(6, 15, 19, .56) 0%, rgba(6, 15, 19, .06) 42%, rgba(6, 15, 19, .32) 100%),
    linear-gradient(250deg, rgba(35, 187, 203, .12), rgba(35, 187, 203, 0) 58%);
}

/* ==========================================================================
   The dark top band — header + page header, on every page
   ========================================================================== */

.header {
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-bottom: 1px solid transparent;
}
.header.is-stuck {
  background: rgba(10, 26, 32, .88);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom-color: rgba(255, 255, 255, .1);
}

.nav__link { color: rgba(255, 255, 255, .72); }
.nav__link:hover, .nav__link[aria-current='page'] { color: #fff; }
.navtoggle { color: #fff; }

/* The band itself. `.hero` and `.pagehead` both sit under the fixed header, so
   they carry the dark surface and the header can stay transparent over them. */
.hero, .pagehead {
  background: var(--band);
  color: rgba(255, 255, 255, .72);
  border-bottom: 0;
}
.hero::before {
  background: radial-gradient(circle at 50% 50%, rgba(35, 187, 203, .3), rgba(35, 187, 203, .08) 45%, transparent 68%);
}

.hero .display,
.pagehead h1,
.pagehead .display { color: #fff; }
.hero .lede,
.pagehead .lede { color: rgba(255, 255, 255, .74); }
.hero .eyebrow,
.pagehead .eyebrow { color: rgba(255, 255, 255, .88); }
.pagehead .eyebrow a:hover { color: #fff; }
.pagehead .stage__ref,
.hero .stage__ref { color: var(--cyan); }
.pagehead .postmeta { color: rgba(255, 255, 255, .6); }
.hero .linkline,
.pagehead .linkline { color: #fff; }

.credblock { border-left-color: rgba(255, 255, 255, .2); }
.credblock dt { color: rgba(255, 255, 255, .82); }
.credblock dd { color: rgba(255, 255, 255, .82); }
.credblock dd b { color: #fff; }
.credblock .num { color: #fff; }

/* The framework rail sits directly under the hero, so it goes deeper still. */
.marquee { background: var(--ink-deep); }

/* ==========================================================================
   Theme toggle
   ========================================================================== */

.themetoggle {
  flex: none;
  position: relative;
  display: inline-grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .2);
  color: #fff;
  transition: border-color .25s var(--ease-out), background .25s var(--ease-out);
}
.themetoggle:hover { border-color: var(--cyan); background: rgba(35, 187, 203, .14); }
.themetoggle svg { width: 1.05rem; height: 1.05rem; }
.themetoggle .icon-moon { display: none; }
:root[data-theme='dark'] .themetoggle .icon-moon { display: block; }
:root[data-theme='dark'] .themetoggle .icon-sun { display: none; }

@media (max-width: 1080px) {
  .themetoggle { margin-left: auto; }
  .navtoggle { margin-left: .85rem; }
}

/* The page-header band carries the control field too, so every page opens the
   same way the homepage does. */
.pagehead { position: relative; overflow: hidden; }
.pagehead > .shell { position: relative; z-index: 1; }

/* ---------------------------------------------------------- post imagery --- */

/* Full-bleed across the card: cancel the card's own padding. */
.postcard__art {
  display: block;
  margin: calc(var(--card-pad) * -1) calc(var(--card-pad) * -1) 1.35rem;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--paper-sunk);
}
.postcard__art img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .7s var(--ease-out);
}
.postcard:hover .postcard__art img { transform: scale(1.045); }

/* The cover straddles the dark header band and the page below it. */
.postcover {
  margin: -4.5rem 0 0;
  position: relative;
  z-index: 2;
}
.postcover img {
  width: 100%;
  aspect-ratio: 40 / 19;
  object-fit: cover;
  border-radius: var(--r-md);
  box-shadow: var(--shadow-lift);
}
.pagehead--post { padding-bottom: clamp(5rem, 9vw, 7rem); }

.article--post figure { margin: 2.5rem 0; }
.article--post figure img { border-radius: var(--r-md); box-shadow: var(--shadow-card); }

@media (max-width: 640px) {
  .postcover { margin-top: -2.5rem; }
  .postcover img { aspect-ratio: 16 / 10; }
}

/* Credential seals under the hero proof stack. They are earned marks, so they
   stay at full color at rest; the proximity signal reads as a lift and a cyan
   halo instead. Driven off `--near` (0–1) rather than `.is-near` so the seal
   comes up with the cursor rather than snapping at the radius. */
.credblock__seals {
  display: flex;
  align-items: center;
  gap: 1.1rem;
  margin-top: 1.9rem;
  padding-top: 1.6rem;
  border-top: 1px solid rgba(255, 255, 255, .16);
}
/* The white plate stays: several seals are artwork on a white ground and lose
   their edges against the band without it. */
.credblock__seals img {
  height: 3.9rem;
  width: auto;
  background: #fff;
  border-radius: var(--r-sm);
  padding: .25rem;
  object-fit: contain;
  box-shadow:
    0 1px 2px rgba(8, 25, 31, .32),
    0 0 calc(var(--near, 0) * 20px) calc(var(--near, 0) * 3px)
      rgba(35, 187, 203, calc(var(--near, 0) * .45));
  transform: translateY(calc(var(--near, 0) * -3px)) scale(calc(1 + var(--near, 0) * .05));
  transition: box-shadow .45s var(--ease-out), transform .45s var(--ease-out);
}

/* -------------------------------------------------------- path stepper --- */

.pathnav {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.25rem;
}
@media (max-width: 720px) { .pathnav { grid-template-columns: 1fr; } }

.pathnav__step {
  display: flex;
  align-items: center;
  gap: 1.15rem;
  padding: 1.5rem 1.6rem;
  background: var(--card);
  border: 1px solid var(--rule);
  border-radius: var(--r-md);
  transition: border-color .3s var(--ease-out), box-shadow .35s var(--ease-out), transform .35s var(--ease-out);
}
.pathnav__step:hover {
  border-color: var(--cyan);
  box-shadow: var(--shadow-lift);
  transform: translateY(-2px);
}
.pathnav__step--empty { background: none; border: 0; box-shadow: none; }
.pathnav__step--empty:hover { transform: none; }
@media (max-width: 720px) { .pathnav__step--empty { display: none; } }

/* The next step reads right-to-left so the arrow sits on the outside edge. */
.pathnav__step--next { flex-direction: row-reverse; text-align: right; }

.pathnav__arrow {
  flex: none;
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 50%;
  border: 1px solid var(--rule);
  color: var(--fg-strong);
  transition: background .3s var(--ease-out), border-color .3s var(--ease-out), color .3s var(--ease-out);
}
.pathnav__arrow svg { width: 1.1rem; height: 1.1rem; }
.pathnav__step:hover .pathnav__arrow {
  background: var(--cyan-deep);
  border-color: var(--cyan-deep);
  color: #fff;
}

.pathnav__text { display: block; min-width: 0; }
.pathnav__dir {
  display: block;
  font-family: var(--font-mono);
  font-size: .7rem;
  font-weight: 600;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--slate-faint);
  margin-bottom: .5rem;
}
.pathnav__ref {
  display: block;
  font-family: var(--font-mono);
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--cyan-deep);
  margin-bottom: .2rem;
}
.pathnav__title {
  display: block;
  font-size: 1.1875rem;
  font-weight: 600;
  letter-spacing: -.012em;
  color: var(--fg-strong);
  line-height: 1.25;
}

.pathnav__all { margin-top: 2rem; }

/* ------------------------------------------------------------ about page --- */

.creds { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(17rem, 100%), 1fr)); gap: 2rem; }
.cred { display: flex; align-items: flex-start; gap: 1.1rem; }
.cred img {
  flex: none;
  width: 4.8rem;
  height: 4.8rem;
  object-fit: contain;
  background: #fff;
  border-radius: var(--r-sm);
  padding: .3rem;
  border: 1px solid var(--rule);
}
.cred h3 { margin-bottom: .35rem; }
.cred p { font-size: .9375rem; line-height: 1.6; color: var(--slate); margin: 0; }

/* Leadership teaser — the CEO gets a card here and a page of her own, rather
   than a third of the homepage. */
.leadcard {
  display: grid;
  grid-template-columns: minmax(0, 8.5rem) minmax(0, 1fr);
  gap: clamp(1.25rem, 3vw, 2.25rem);
  align-items: center;
  max-width: 44rem;
}
@media (max-width: 560px) { .leadcard { grid-template-columns: 1fr; } }
.leadcard__portrait {
  width: 100%;
  border-radius: var(--r-sm);
  filter: grayscale(.2) contrast(1.02);
}
.leadcard__body { display: block; }
.leadcard__name { display: block; margin: .3rem 0 .6rem; }
.leadcard__blurb {
  display: block;
  font-size: .9375rem;
  line-height: 1.6;
  color: var(--slate);
  margin-bottom: 1.1rem;
}

/* ----------------------------------------------------------- easter egg --- */

/* Reads as the full stop after the copyright until you find it. */
.easter { display: inline-block; text-decoration: none; }
.easter__dot { color: inherit; }
.easter__text {
  display: inline-block;
  max-width: 0;
  opacity: 0;
  overflow: hidden;
  white-space: nowrap;
  vertical-align: bottom;
  color: var(--cyan);
  transition: max-width .55s var(--ease-out), opacity .4s var(--ease-out), margin-left .55s var(--ease-out);
}
.easter:hover .easter__text,
.easter:focus-visible .easter__text { max-width: 12rem; opacity: 1; margin-left: .55rem; }

/* Four commitments read as two rows of two, not three-and-a-widow. */
.cardgrid--pair { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 780px) { .cardgrid--pair { grid-template-columns: 1fr; } }

/* ==========================================================================
   QA access gate
   ========================================================================== */

.gate {
  position: relative;
  overflow: hidden;
  min-height: 100vh;
  min-height: 100svh;
  display: grid;
  place-items: center;
  background: var(--band);
  color: rgba(255, 255, 255, .74);
  text-align: center;
  padding-block: clamp(3rem, 8vw, 6rem);
}
.gate__inner { position: relative; z-index: 1; max-width: 46rem; }

.gate__logo { height: 3.4rem; width: auto; margin: 0 auto 2.75rem; }

.gate .eyebrow { justify-content: center; color: rgba(255, 255, 255, .88); }

.gate__title {
  color: #fff;
  font-size: clamp(2.4rem, 5.2vw, 4rem);
  margin-bottom: 1.6rem;
}

.gate__lede { color: rgba(255, 255, 255, .78); margin-bottom: 1.5rem; }

.gate__note {
  font-size: .95rem;
  line-height: 1.65;
  color: rgba(255, 255, 255, .58);
  max-width: 40ch;
  margin-inline: auto;
}

.gate__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 1rem 1.75rem;
  margin-top: 2.5rem;
}
.gate__mail { color: #fff; }

.gate__ref {
  margin-top: 3.5rem;
  font-family: var(--font-mono);
  font-size: .72rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .38);
}


/* ---------------------------------------------------------------- contact */

/* Honeypot: off-screen rather than display:none, because some bots skip
   hidden inputs. aria-hidden + tabindex=-1 keep it away from real users. */
.hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.formnotice {
  margin: 0 0 1.25rem;
  padding: 0.75rem 1rem;
  border-radius: 0.5rem;
  font-size: 0.95rem;
  line-height: 1.5;
  border: 1px solid transparent;
}
.formnotice--ok {
  background: #ecfdf5;
  border-color: #a7f3d0;
  color: #065f46;
}
.formnotice--err {
  background: #fef2f2;
  border-color: #fecaca;
  color: #991b1b;
}