/* =============================================================
   Neo Carbone — Design tokens & styles
   Rebuild of the "Radiant" concept with a tokenized system.
   ============================================================= */

/* ---------- Design tokens ---------- */
:root {
  /* Brand / neutrals */
  --color-paper: #F0F0EE;          /* page background — the DevTools panel overwrites this */

  /* Card surfaces are DERIVED from --color-paper, never hardcoded: the
     DevTools panel swaps the paper at runtime and every surface has to
     follow it. Hardcoding sand here is what used to leave beige cards
     floating on a white page. Percentages are tuned so the rendered
     colour on the default paper matches the old fixed values. */
  --color-surface-light: color-mix(in srgb, var(--color-paper) 97%, var(--color-ink));  /* soft card on paper */
  --color-surface-muted: color-mix(in srgb, var(--color-paper) 88%, var(--color-ink));  /* subdued card */
  --color-ink: #0A0A08;            /* primary text / titles / nav */
  --color-ink-elevated: #141412;   /* raised chips on dark */
  --color-ink-70: #1E1F1A;         /* kickers / secondary chrome */
  --color-ink-60: #2F3128;         /* body / lead */
  --color-ink-45: #55574A;         /* meta / trust */
  --color-ink-35: #6A6C5E;         /* faint text */
  --color-ink-25: #888A7C;         /* faintest text */

  /* On-dark */
  --color-on-dark: #DFE0DA;
  --color-on-dark-muted: #B8BAAE;

  /* Secondary palette (sampled from logo) */
  --color-secondary-cyan: #14A5EF;     /* logo cyan — tags, signals */
  --color-secondary-green: #2ADA95;    /* tags, positive emphasis */
  --color-secondary-magenta: #DC47BD;  /* punch lines, trust callouts */
  --color-secondary-lime: #C4E742;    /* bright accent on dark surfaces */
  --color-secondary-violet: #8B7FF0;  /* logo violet — design accent */
  --color-secondary-gold: #E8B04F;    /* logo gold — launch accent */
  --color-secondary-yellow: #E6C619;  /* hero glow accent — coherence-security, build-integrate, resources */
  --color-secondary-orange: #FF4900;  /* hero glow accent — build-integrate, why-neo-carbone */
  --color-secondary-cyan-surface: color-mix(in srgb, var(--color-secondary-cyan) 16%, var(--color-paper));
  --color-active: var(--color-secondary-green); /* links, focus, open/active UI */

  /* Alpha helpers */
  --border-ink: rgba(10, 10, 8, 0.05);
  --border-ink-strong: rgba(10, 10, 8, 0.09);
  --glass: rgba(255, 255, 255, 0.55);
  --glass-soft: rgba(255, 255, 255, 0.40);

  /* Typography */
  --font-body: 'Figtree', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, monospace;
  --font-title: 'Figtree', system-ui, sans-serif;

  --fs-eyebrow: 0.75rem;   /* 12px */
  --fs-sm: 0.875rem;       /* 14px */
  --fs-base: 1rem;         /* 16px */
  --fs-md: 1.0625rem;      /* 17px */
  --fs-lead: 1.1875rem;    /* 19px */
  --fs-h3: 1.5rem;         /* 24px */
  --fs-h2: 2.5rem;         /* 40px */
  --fs-h1: clamp(2.5rem, 6vw, 4.25rem);  /* fluid 40 → 68px */

  /* Spacing scale */
  --space-1: 0.5rem;
  --space-2: 0.75rem;
  --space-3: 1rem;
  --space-4: 1.5rem;
  --space-5: 2rem;
  --space-6: 2.5rem;
  --space-7: 3.5rem;
  --space-8: 5rem;

  /* Radii */
  --radius-sm: 12px;
  --radius-md: 16px;
  --radius-lg: 28px;
  --radius-xl: 36px;
  --radius-pill: 999px;

  /* Layout — the one measure for the whole site. Every section on every
     page resolves to these values; see .nc-container below.

     Everything is border-box, so --container is an OUTER bound: it is for
     elements that carry the gutter as their own padding (.section,
     .page-hero). Wrappers that sit inside an already-padded section must
     use --container-inner instead, or they end up 2x the gutter wider
     than the home page at viewports past ~2080px. */
  --container: 1600px;
  --container-nav: 1600px;
  --gutter: clamp(2.5rem, 5vw, 5rem);
  --container-inner: calc(var(--container) - 2 * var(--gutter));
  --header-height: 4.5rem;
  --icon-md: 1.5rem; /* 24px — hero blocks & feature cards */

  /* Motion */
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  /* Decelerating curve for things arriving on screen — fast off the
     mark, settles gently. Symmetric --ease feels sluggish for entrances. */
  --ease-out: cubic-bezier(0.22, 0.61, 0.24, 1);
}

/* ---------- Corner radius customization (DevTools panel) ----------
   "Rounded" is the default (:root values above).
   "Little rounded" shrinks every card/block radius to 8px (pills &
   circles keep their shape). "Not rounded" flattens everything. */
html.nc-radius-sm {
  --radius-sm: 8px;
  --radius-md: 8px;
  --radius-lg: 8px;
  --radius-xl: 8px;
  --radius-pill: 8px; /* badges & pill buttons follow the little radius too */
}
/* Keep the DevTools control itself pill-shaped for legibility. */
html.nc-radius-sm .nc-devtools__fab,
html.nc-radius-sm .nc-devtools__switch { border-radius: 999px; }
/* Flatten every element, catching token-based, hardcoded and 50% radii.
   Excluded so they keep their designed shape:
   - the DevTools panel itself (controls stay legible)
   - badge-style labels (badges, chips, tags, eyebrow/ds pills)
   - illustrations & mockups (browser/phone frames, diagram nodes) —
     flattening these looks broken. */
html.nc-radius-none *:not(
  .nc-devtools, .nc-devtools *,
  [class*="badge"], [class*="chip"], [class*="__tag"], [class*="eyebrow"], .ds-pill,
  .la-browser, .la-browser *,
  .la-phone, .la-phone *,
  .la-node, .la-node *,
  .la-stage, .la-stage *,
  .la-case__visual, .la-case__visual *,
  .ds-pill__dot, .ds-ledger__state-dot, .ds-lg-check,
  .ds-fit__mark, .ds-faq__sign,
  .uxp-mock, .uxp-mock *,
  .uxp-visual, .uxp-visual *,
  .showcase-browser, .showcase-browser *,
  .showcase-phone, .showcase-phone *
) {
  border-radius: 0 !important;
}

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

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--color-paper);
  color: var(--color-ink);
  font-family: var(--font-body);
  font-size: var(--fs-base);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1, h2, h3, p { margin: 0; }
h1 em, h2 em, h3 em, h4 em, h5 em, h6 em, h1 i, h2 i, h3 i, h4 i, h5 i, h6 i { font-style: normal; }
ul, ol { margin: 0; padding: 0; list-style: none; }
img, svg, canvas { display: block; max-width: 100%; }

a {
  color: var(--color-ink);
  text-decoration: none;
  transition: color 0.18s var(--ease);
}
a:hover { color: var(--color-active); }

:focus-visible {
  outline: 2px solid var(--color-active);
  outline-offset: 3px;
  border-radius: 4px;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  padding: var(--space-2) var(--space-3);
  background: var(--color-ink);
  color: var(--color-on-dark);
  border-radius: 0 0 var(--radius-sm) 0;
}
.skip-link:focus { left: 0; color: var(--color-on-dark); }

/* =============================================================
   MOTION — section entrance (.nc-appear)
   Design-system primitive. Put .nc-appear on any block (every
   <section> on the site has it) and it arrives with a soft lift
   instead of snapping into place: the ones already on screen
   cascade in on load, the rest reveal as you reach them.

   Contract
     .nc-appear                the element to reveal
     html.nc-appear-on         set by js/main.js — the hidden state
                               only exists once JS can undo it
     .is-visible               set per element when it enters view

   Knobs (override on the element or an ancestor)
     --nc-appear-rise          travel distance          (default 18px)
     --nc-appear-dur           duration                 (default 0.6s)
     --nc-appear-delay         extra delay              (default 0s)

   Deliberately short and shallow. Most sections also contain
   [data-reveal] items with their own stagger, so this has to read as
   one motion with them, not a second one — and it has to clear fast,
   because a scrollbar drag or an anchor jump starts every section in
   the new viewport from zero at once.

   Variants
     .nc-appear--soft          fade only, no travel. Use for blocks
                               holding position: sticky children, so
                               no transform containing block is made.
     .nc-appear--near          shorter travel, for tight stacks
     .nc-appear--far           longer travel, for full-bleed panels
     .nc-appear--instant       skip it (deep-link targets)

   Safe by construction: with JS off, reduced motion, no
   IntersectionObserver, or when printing, .nc-appear-on is never
   applied (or is overridden) and every section renders normally.
   ============================================================= */
/* The hidden state carries NO transition, so applying it is instant.
   The transition lives on .is-visible instead: a transition is read from
   the after-change style, so it still animates 0 -> 1 on reveal. Put it on
   the base rule and adding .nc-appear-on animates the element *out* over
   the same duration, which then fights the reveal — the section dips a few
   percent and snaps back, and there is no fade to see. */
.nc-appear-on .nc-appear {
  opacity: 0;
  transform: translate3d(0, var(--nc-appear-rise, 18px), 0);
}
.nc-appear-on .nc-appear.is-visible {
  opacity: 1;
  transform: none;
  transition:
    opacity var(--nc-appear-dur, 0.6s) var(--ease-out) var(--nc-appear-delay, 0s),
    transform var(--nc-appear-dur, 0.6s) var(--ease-out) var(--nc-appear-delay, 0s);
}

.nc-appear--near { --nc-appear-rise: 10px; }
.nc-appear--far { --nc-appear-rise: 30px; }
.nc-appear--soft { --nc-appear-rise: 0px; }
.nc-appear-on .nc-appear--soft { transform: none; }

/* Heroes: pure opacity, no travel, and a longer settle.
   A hero is full-bleed and usually carries its own glows, canvas or
   device mock. Sliding all of that upward on arrival reads as the page
   still loading; fading it up reads as the page arriving. This is the
   first thing anyone sees, so it gets the calmest version of the move. */
.nc-appear--hero {
  --nc-appear-rise: 0px;
  --nc-appear-dur: 0.9s;
}
.nc-appear-on .nc-appear--hero { transform: none; }

/* Deep-link targets appear at once — no waiting on a transition for
   content the visitor asked for by name. */
.nc-appear-on .nc-appear--instant,
.nc-appear-on .nc-appear--instant.is-visible {
  opacity: 1;
  transform: none;
  transition: none;
}

@media (prefers-reduced-motion: reduce) {
  .nc-appear-on .nc-appear,
  .nc-appear-on .nc-appear.is-visible {
    opacity: 1;
    transform: none;
    transition: none;
  }
  .hero__glow {
    animation: none;
    transform: none;
    filter: none;
  }
  .ct-hero__glow {
    animation: none;
    transform: none;
    filter: none;
  }
}
@media print {
  .nc-appear-on .nc-appear,
  .nc-appear-on .nc-appear.is-visible {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* =============================================================
   LAYOUT — the page container (.nc-container)
   One width and one gutter site-wide. Sections used to cap themselves
   per page — 1180px on the service pages, 1240px on team and portfolio,
   1200px on the case studies — so the content column visibly changed
   width as you moved between pages. They all resolve here now.

     --container         outer bound, for elements that own the gutter
     --container-inner   same column, for wrappers inside a padded section
     --gutter            gap between content and the viewport edge

   .nc-container is the primitive. The per-page wrap classes are kept as
   aliases so existing markup keeps working, and each page stylesheet's
   --*-max token now points at --container-inner too — that is what
   widens the heroes and trust strips that size themselves off the token
   directly rather than through a wrap div.

   Narrow prose columns (.fc-wrap--narrow and friends) deliberately stay
   narrow: a reading measure is not the page container.
   ============================================================= */
.nc-container,
.ait-wrap, .bi-wrap, .cs-wrap, .dr-wrap, .ds-wrap, .fc-wrap, .ol-wrap,
.pf-wrap, .res-wrap, .rm-wrap, .sc-wrap, .sl-wrap, .tm-wrap, .uxp-wrap,
.wl-wrap, .wnc-wrap {
  max-width: var(--container-inner);
  margin-inline: auto;
}

/* Content-width separator.
   A section that owns the gutter cannot carry its own border-top: the border
   box is the viewport, so the line runs edge to edge. This draws the line as
   an inset pseudo-element instead, capped at the same width as the wraps
   above, so it starts and ends where the content does. */
.nc-rule,
.fc-section--rule, .ol-section--rule, .rv-section--rule,
.sc-section--rule, .sl-section--rule, .wl-section--rule {
  position: relative;
}
.nc-rule::before,
.fc-section--rule::before, .ol-section--rule::before,
.rv-section--rule::before, .sc-section--rule::before,
.sl-section--rule::before, .wl-section--rule::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: min(var(--container-inner), 100% - 2 * var(--gutter));
  height: 1px;
  background: var(--border-ink);
}

/* Section shells. These own the gutter, so they take the outer bound —
   the same one .section and .page-hero have always used. Without this a
   page section runs edge to edge on a wide display while the home page
   stops at --container, and any section-level background gives that away.
   Heroes that deliberately bleed (.ds-hero sets max-width: none) still
   do; only their inner wrapper is bound. */
.ait-section, .bi-section, .cs-section, .dr-section, .ds-section,
.fc-section, .ol-section, .pf-section, .res-section, .rm-section,
.sc-section, .sl-section, .tm-section, .uxp-section, .wl-section,
.wnc-section {
  max-width: var(--container);
  margin-inline: auto;
}

/* ---------- Shared primitives ---------- */
.section {
  max-width: var(--container);
  margin: 0 auto;
  padding: var(--space-8) var(--gutter) 0;
}
.section.shift,
.section.features,
.section.paths,
.section.proof,
.section.voices,
.section.logos {
  padding-top: calc(var(--space-8) + var(--space-5));
  padding-bottom: var(--space-7);
  scroll-margin-top: calc(var(--header-height) + var(--space-3));
}

.section__title {
  font-family: var(--font-title);
  font-weight: 700;
  font-size: var(--fs-h2);
  letter-spacing: -0.02em;
  line-height: 1.1;
}
.section__title--center { text-align: center; margin: var(--space-3) 0 var(--space-6); }
.section__title--right { text-align: right; margin: var(--space-3) 0 var(--space-5); margin-left: auto; }

/* ---------- Section eyebrow ----------
   .kicker is THE eyebrow style for the site. The per-page aliases below
   were separate copies that had drifted apart — six different weights and
   trackings, a coloured dot, one page in mono — so they now resolve to
   this one rule and every eyebrow renders identically.

   Use .kicker in new markup. Page stylesheets may still set an eyebrow's
   own spacing (the case studies keep an 18px bottom margin) but must not
   re-declare family, size, weight, tracking, case or colour — they load
   after this file and would silently win. */
.kicker,
.ait-eyebrow, .bi-eyebrow, .cs-eyebrow, .ds-eyebrow, .fc-eyebrow,
.ol-eyebrow, .res-eyebrow, .sc-eyebrow, .tm-eyebrow, .uxp-eyebrow,
.wl-eyebrow, .wnc-eyebrow {
  display: block;
  font-family: var(--font-title);
  font-size: var(--fs-eyebrow);
  font-weight: 400;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-ink-70);
}

.kicker--center,
.ait-eyebrow--center, .ds-eyebrow--center, .res-eyebrow--center { text-align: center; }
.kicker--right { text-align: right; }

/* On dark panels. --dark is the case studies' name for the same thing. */
.kicker--bright,
.ait-eyebrow--bright, .bi-eyebrow--bright, .cs-eyebrow--bright,
.ds-eyebrow--bright, .res-eyebrow--bright, .uxp-eyebrow--bright,
.wnc-eyebrow--bright,
.fc-eyebrow--dark, .ol-eyebrow--dark, .sc-eyebrow--dark, .wl-eyebrow--dark {
  color: var(--color-on-dark-muted);
}

.eyebrow-pill {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  font-family: var(--font-title);
  font-size: var(--fs-eyebrow);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-ink-70);
  background: var(--glass);
  border: 1px solid var(--border-ink);
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-pill);
  backdrop-filter: blur(4px);
}

/* ---------- Back to all case studies ----------
   Sits directly above the "Case Study — ..." eyebrow in every case study
   hero. Deliberately quieter than .btn: it's a way out of the page, not a
   call to action, so it stays at eyebrow scale and only firms up on hover.
   Uses shared tokens only — the case study pages each declare their own
   accent palette and this must read the same on all of them. */
.case-back {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-4);
  padding: 7px 14px 7px 11px;
  font-family: var(--font-title);
  font-size: var(--fs-eyebrow);
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--color-ink-70);
  background: transparent;
  border: 1px solid var(--border-ink-strong);
  border-radius: var(--radius-pill);
  transition:
    color 0.25s var(--ease),
    border-color 0.25s var(--ease),
    background-color 0.25s var(--ease);
}

.case-back__arrow {
  display: block;
  transition: transform 0.25s var(--ease);
}

.case-back:hover,
.case-back:focus-visible {
  color: var(--color-ink);
  border-color: var(--color-ink);
  background: var(--glass);
}

/* Pulls toward the exit it points at. */
.case-back:hover .case-back__arrow,
.case-back:focus-visible .case-back__arrow {
  transform: translateX(-3px);
}

@media (prefers-reduced-motion: reduce) {
  .case-back,
  .case-back__arrow {
    transition: none;
  }
  .case-back:hover .case-back__arrow,
  .case-back:focus-visible .case-back__arrow {
    transform: none;
  }
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-title);
  font-size: var(--fs-sm);
  font-weight: 500;
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-md);
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform 0.18s var(--ease), opacity 0.18s var(--ease);
}
.btn:hover { transform: translateY(-1px); }
.btn--pill { border-radius: var(--radius-pill); }
.btn--lg { font-size: var(--fs-base); padding: 1.0625rem 2.125rem; }
.btn--dark { background: var(--color-ink); color: var(--color-on-dark); }
.btn--dark:hover { color: var(--color-on-dark); opacity: 0.9; }
.btn--ghost {
  background: var(--glass-soft);
  border-color: var(--border-ink-strong);
  color: var(--color-ink);
}
.btn--light {
  background: var(--color-on-dark);
  color: var(--color-ink);
}
.btn--light:hover { color: var(--color-ink); opacity: 0.92; }
.btn--outline-light {
  background: transparent;
  border-color: rgba(255, 255, 255, 0.18);
  color: var(--color-on-dark);
}
.btn--outline-light:hover { color: var(--color-on-dark); opacity: 0.9; }

.link-arrow {
  font-family: var(--font-title);
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--color-active);
}
.link-arrow--bright { color: #fff; }
.link-arrow--bright:hover { color: #fff; }
.link-arrow--accent { color: var(--color-ink); }
.link-arrow--accent:hover { color: var(--color-ink); }

/* ---------- Header / nav ---------- */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 10;
  background: transparent;
  transition: background 0.25s var(--ease), backdrop-filter 0.25s var(--ease), -webkit-backdrop-filter 0.25s var(--ease);
}

.site-header.is-scrolled {
  background: color-mix(in srgb, var(--color-paper) 50%, transparent);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.nav {
  position: relative;
  max-width: var(--container);
  margin-inline: auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  column-gap: clamp(1.25rem, 2.5vw, 2.5rem);
  padding: 1rem var(--gutter);
  min-height: var(--header-height);
}

.brand {
  grid-column: 1;
  justify-self: start;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-title);
  font-weight: 700;
  font-size: 1.125rem;
  letter-spacing: -0.01em;
  white-space: nowrap;
}
.brand__logo {
  flex: 0 0 auto;
  display: block;
  width: auto;
  height: 36px;
}
.brand__logo--light { display: none; }
.site-footer .brand__logo { height: 39px; }

@media (min-width: 1200px) {
  .site-header .brand {
    font-size: clamp(1.25rem, 1.4vw, 1.5rem);
    gap: 12px;
  }
  .site-header .brand__logo { height: clamp(39px, 2.86vw, 49px); }
}

.nav__menu {
  display: contents;
}
.nav__links {
  grid-column: 2;
  justify-self: center;
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: clamp(1.125rem, 1.8vw, 1.75rem);
  min-width: max-content;
  font-family: var(--font-title);
  font-size: 0.9375rem;
  font-weight: 500;
  letter-spacing: -0.01em;
  line-height: 1.2;
  color: var(--color-ink);
}
.nav__links > li {
  flex: 0 0 auto;
}
.nav__links > li > a,
.nav__trigger {
  display: inline-flex;
  align-items: center;
  gap: 0.3em;
  white-space: nowrap;
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
  letter-spacing: inherit;
  line-height: inherit;
  color: inherit;
}
.nav__links > li > a[aria-current="page"] {
  font-weight: 600;
  color: var(--color-active);
}
.nav__chevron {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 0.65em;
  height: 0.65em;
  margin-top: 0.05em;
  color: inherit;
  opacity: 0.7;
}
.nav__chevron svg {
  display: block;
  width: 100%;
  height: 100%;
}
.nav__actions {
  grid-column: 3;
  justify-self: end;
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.lang-switch {
  font-family: var(--font-title);
  font-size: 0.8125rem;
  font-weight: 700;
  color: var(--color-ink-45);
}
.lang-switch a { color: inherit; }
.lang-switch__active,
.lang-switch a.lang-switch__active { color: var(--color-ink); }

.nav__toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  width: 42px;
  height: 42px;
  padding: 10px;
  background: var(--color-ink);
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: opacity 0.18s var(--ease);
}
.nav__toggle:hover { opacity: 0.9; }
.nav__toggle span {
  display: block;
  height: 2px;
  width: 100%;
  background: #fff;
  border-radius: 2px;
  transition: transform 0.2s var(--ease), opacity 0.2s var(--ease);
}

/* ---------- Hero ---------- */
.hero {
  position: relative;
  overflow-x: clip; /* clip glow/burst without creating a vertical scroll container */
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 100vh;
  min-height: 100svh;
  padding: 0;
}

/* Registered so the gradient's own hue, spread and centre can be animated —
   morphing the wash itself instead of just scaling a fixed image.
   Every var() below carries a fallback, so the gradient still renders if
   @property is unsupported (it just doesn't morph). */
@property --g-h1 { syntax: "<angle>"; inherits: false; initial-value: 152deg; }
@property --g-h2 { syntax: "<angle>"; inherits: false; initial-value: 190deg; }
@property --g-w  { syntax: "<percentage>"; inherits: false; initial-value: 50%; }
@property --g-h  { syntax: "<percentage>"; inherits: false; initial-value: 50%; }
@property --g-x  { syntax: "<percentage>"; inherits: false; initial-value: 50%; }
@property --g-y  { syntax: "<percentage>"; inherits: false; initial-value: 50%; }

.hero__glow {
  position: absolute;
  top: -24%;
  right: -42%;
  width: 100vw;
  height: 100vw;
  max-width: none;
  z-index: 0;
  background: radial-gradient(
    var(--g-w, 50%) var(--g-h, 50%) at var(--g-x, 50%) var(--g-y, 50%),
    oklch(0.9 0.13 var(--g-h1, 152deg) / 0.85),
    oklch(0.9 0.1 var(--g-h2, 190deg) / 0.4) 46%,
    transparent 72%
  );
  transform-origin: 50% 50%;
  will-change: transform, filter;
  /* Two cycles of different length: the wash morphs on one clock, floats on another.
     ~11s/17s is the slowest the drift can go and still read as movement — longer
     cycles change too few degrees per second for the eye to catch on a pastel. */
  animation:
    nc-glow-morph 11s ease-in-out infinite,
    nc-glow-float 17s ease-in-out infinite;
}

/* Shade + shape: hue slides through teal/green, the wash swells and its centre wanders.
   `filter` carries the colour shift too, so the motion survives even where
   @property isn't supported and the gradient vars can't animate. */
@keyframes nc-glow-morph {
  0%, 100% { --g-h1: 152deg; --g-h2: 190deg; --g-w: 44%; --g-h: 54%; --g-x: 46%; --g-y: 54%; }
  30%      { --g-h1: 188deg; --g-h2: 212deg; --g-w: 66%; --g-h: 42%; --g-x: 60%; --g-y: 40%; }
  62%      { --g-h1: 126deg; --g-h2: 164deg; --g-w: 42%; --g-h: 64%; --g-x: 40%; --g-y: 60%; }
}
/* Movement + overall size, kept on its own timeline so the two never line up */
@keyframes nc-glow-float {
  0%, 100% { transform: scale(1)    translate3d(0, 0, 0);      filter: hue-rotate(0deg)  saturate(1); }
  50%      { transform: scale(1.22) translate3d(-8%, 6%, 0);   filter: hue-rotate(14deg) saturate(1.1); }
}

@keyframes nc-glow-morph-alt {
  0%, 100% { --g-h1: 120deg; --g-w: 46%; --g-h: 46%; --g-x: 50%; --g-y: 50%; }
  40%      { --g-h1: 152deg; --g-w: 68%; --g-h: 56%; --g-x: 60%; --g-y: 42%; }
  72%      { --g-h1: 98deg;  --g-w: 42%; --g-h: 66%; --g-x: 40%; --g-y: 58%; }
}
@keyframes nc-glow-float-alt {
  0%, 100% { transform: scale(1.06) translate3d(0, 0, 0);      filter: hue-rotate(0deg)   saturate(1); }
  50%      { transform: scale(0.84) translate3d(9%, -7%, 0);   filter: hue-rotate(-12deg) saturate(1.12); }
}

@keyframes nc-glow-morph-soft {
  0%, 100% { --g-h1: 342deg; --g-h2: 350deg; --g-w: 48%; --g-h: 48%; --g-x: 50%; --g-y: 50%; }
  38%      { --g-h1: 318deg; --g-h2: 334deg; --g-w: 70%; --g-h: 42%; --g-x: 40%; --g-y: 58%; }
  70%      { --g-h1: 2deg;   --g-h2: 304deg; --g-w: 42%; --g-h: 60%; --g-x: 60%; --g-y: 44%; }
}
@keyframes nc-glow-float-soft {
  0%, 100% { transform: scale(1)    translate3d(0, 0, 0);      filter: hue-rotate(0deg)   saturate(1);   opacity: 1; }
  45%      { transform: scale(1.28) translate3d(-9%, 5%, 0);   filter: hue-rotate(-10deg) saturate(1.1); opacity: 0.7; }
}

.hero__burst {
  position: absolute;
  top: 44%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: min(160vh, 190vw);
  height: min(160vh, 190vw);
  z-index: 1;
  opacity: 0.85;
  pointer-events: none;
}

/* Bottom-anchored layout: title + lead left, path blocks right */
.hero__bottom {
  position: relative;
  z-index: 3;
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: end;
  column-gap: var(--space-5);
  row-gap: var(--space-6);
  padding: var(--space-6) var(--gutter) var(--space-7);
}

.hero__content {
  position: relative;
  z-index: 3;
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding: calc(var(--space-8) + var(--header-height)) var(--gutter) var(--space-7);
  text-align: center;
}

.hero__title-col { text-align: left; max-width: 620px; }
.hero__intro-col {
  justify-self: end;
  width: 100%;
  max-width: 480px;
  padding-top: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}

.hero__title {
  font-family: var(--font-title);
  font-weight: 700;
  font-size: var(--fs-h1);
  line-height: 1.03;
  letter-spacing: -0.03em;
  margin-top: var(--space-3);
}

.hero__lead {
  font-size: var(--fs-md);
  line-height: 1.6;
  color: var(--color-ink-60);
  max-width: 720px;
  margin-top: var(--space-4);
}

.hero__content .hero__lead {
  margin-inline: auto;
}

.hero__cta {
  margin-top: var(--space-6);
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
}

/* Scroll-to-explore cue (bottom center of hero) */
.hero__scroll {
  position: absolute;
  bottom: var(--space-6);
  left: 50%;
  transform: translateX(-50%);
  z-index: 4;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  padding-bottom: 2px;
  color: var(--color-ink);
  transition: color 0.2s var(--ease);
}
.hero__scroll:hover { color: var(--color-ink); }
.hero__scroll-line {
  width: 1px;
  height: 40px;
  background: linear-gradient(to bottom, transparent, currentColor);
}
.hero__scroll-arrow {
  display: flex;
  animation: nc-bob 1.8s ease-in-out infinite;
}
.hero__scroll-arrow svg { width: 22px; height: 22px; }

@keyframes nc-bob {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(4px); }
}

@media (min-width: 901px) {
  .hero:has(.hero__bottom) {
    justify-content: center;
    padding-top: var(--header-height);
    padding-bottom: calc(var(--space-6) + 3.5rem);
    box-sizing: border-box;
  }

  .hero__bottom {
    align-items: center;
    padding-top: 0;
    padding-bottom: 0;
  }
}

.hero-blocks {
  display: flex;
  gap: var(--space-3);
  margin-top: var(--space-6);
}
.hero-blocks__btn {
  position: relative;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: 112px;
  padding: var(--space-4) var(--space-3) var(--space-5);
  font-family: var(--font-title);
  font-size: var(--fs-sm);
  font-weight: 700;
  line-height: 1.3;
  text-align: center;
  color: var(--color-on-dark);
  background: var(--color-ink);
  border: 1px solid rgba(223, 224, 218, 0.14);
  border-radius: var(--radius-lg);
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.2);
  cursor: pointer;
  transition:
    transform 0.2s var(--ease),
    background 0.2s var(--ease),
    border-color 0.2s var(--ease),
    box-shadow 0.2s var(--ease),
    color 0.2s var(--ease);
}
.hero-blocks__btn:hover {
  transform: translateY(-3px);
  border-color: rgba(223, 224, 218, 0.35);
  box-shadow: 0 14px 32px -14px rgba(0, 0, 0, 0.45);
}
.hero-blocks__btn:active {
  transform: translateY(-1px);
  box-shadow: 0 8px 18px -10px rgba(0, 0, 0, 0.35);
}
.hero-blocks__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-on-dark);
  transition: transform 0.2s var(--ease);
}
.hero-blocks__icon svg {
  width: var(--icon-md);
  height: var(--icon-md);
}
.hero-blocks__btn:hover .hero-blocks__icon {
  transform: scale(1.05);
}
.hero-blocks__label {
  font-weight: 700;
  color: var(--color-on-dark);
  transition: color 0.2s var(--ease);
}
.hero-blocks__btn:hover .hero-blocks__label {
  color: var(--color-on-dark);
}
.hero-blocks__label--stacked {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.hero-blocks__label--stacked span:first-child {
  font-size: var(--fs-base);
}
.hero-blocks__label--stacked span:last-child {
  font-weight: 400;
  color: var(--color-on-dark-muted);
}
.hero-blocks__arrow {
  position: absolute;
  right: var(--space-3);
  bottom: var(--space-3);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  color: var(--color-on-dark-muted);
  transition: transform 0.2s var(--ease), color 0.2s var(--ease);
}
.hero-blocks__arrow svg {
  width: 18px;
  height: 18px;
}
.hero-blocks__btn:hover .hero-blocks__arrow {
  color: var(--color-on-dark);
  transform: translateX(3px);
}

.hero__badge-wrap { display: flex; justify-content: center; margin-top: var(--space-6); }

.partner-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  background: var(--color-ink);
  padding: 10px var(--space-4);
  border-radius: var(--radius-pill);
}
.partner-badge__logo {
  display: inline-flex;
  align-items: center;
}
.partner-badge__logo img {
  display: block;
  height: 16px;
  width: auto;
}
.partner-badge__text {
  text-align: left;
  line-height: 1.25;
}
.partner-badge__label {
  display: block;
  font-size: var(--fs-eyebrow);
  font-weight: 700;
  color: #fff;
}
.partner-badge__rank {
  display: block;
  font-family: var(--font-title);
  font-size: var(--fs-sm);
  font-weight: 700;
  color: #fff;
}

/* ---------- Logos ---------- */
.section.logos {
  text-align: center;
  padding-top: var(--space-7);
}
.logos__title {
  max-width: none;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: var(--space-6);
  font-size: clamp(1.75rem, 3.2vw, 2.25rem);
  line-height: 1.15;
}
.logos__group {
  max-width: 960px;
  margin: 0 auto;
}
/* Layout only — tracking stays on the shared .kicker so this reads the
   same as every other eyebrow. */
.logos__group .kicker {
  max-width: 42rem;
  margin: 0 auto var(--space-4);
  line-height: 1.45;
}
.logos__carousel {
  width: 100vw;
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
  overflow: hidden;
  padding: var(--space-2) 0;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 10%, #000 90%, transparent);
  mask-image: linear-gradient(to right, transparent, #000 10%, #000 90%, transparent);
}
.logos__track {
  display: flex;
  width: max-content;
  animation: logos-marquee 42s linear infinite;
}
.logos__track:hover {
  animation-play-state: paused;
}
@keyframes logos-marquee {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
.logos__list {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  gap: clamp(2.5rem, 5vw, 4rem);
  margin: 0;
  /* One logo-gap after each set so the loop seam matches item spacing */
  margin-inline-end: clamp(2.5rem, 5vw, 4rem);
  padding: 0;
  list-style: none;
}
.logos__item {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.logos__item img {
  display: block;
  height: clamp(1.5rem, 2.2vw, 1.75rem);
  width: auto;
  max-width: 8rem;
  object-fit: contain;
  filter: grayscale(1);
  opacity: 0.6;
  transition: opacity 0.2s var(--ease), filter 0.2s var(--ease);
}
.logos__item:hover img {
  opacity: 0.9;
  filter: grayscale(0);
}
.logos__more {
  margin: var(--space-3) 0 0;
  font-family: var(--font-title);
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--color-ink-45);
}
.logos__and {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  margin: var(--space-6) auto;
  max-width: 16rem;
  font-family: var(--font-title);
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--color-ink-35);
}
.logos__and span {
  display: block;
  flex: 1;
  height: 1px;
  background: var(--border-ink);
}
/* The NHL label sits beside the crests, not above them, so this group is a
   row that wraps to a stack when there is no room for both. */
.logos__group--nhl {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--space-3) clamp(2rem, 4vw, 3rem);
}
.logos__group--nhl .kicker {
  max-width: 13rem;
  margin: 0;
  text-align: left;
}
.logos__nhl {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: clamp(2rem, 5vw, 3.25rem);
  list-style: none;
  margin: 0;
  padding: var(--space-2) 0 0;
}
.logos__group--nhl .logos__nhl {
  padding: 0;
}
@media (max-width: 640px) {
  .logos__group--nhl .kicker {
    max-width: none;
    text-align: center;
  }
}
.logos__nhl-item {
  flex-shrink: 0;
}
.logos__nhl-item img {
  display: block;
  height: clamp(2.25rem, 3.4vw, 2.75rem);
  width: auto;
  object-fit: contain;
  opacity: 0.88;
  transition: opacity 0.2s var(--ease), transform 0.2s var(--ease);
}
.logos__nhl-item:hover img {
  opacity: 1;
  transform: translateY(-2px);
}
@media (prefers-reduced-motion: reduce) {
  .logos__carousel {
    width: 100%;
    left: auto;
    right: auto;
    margin-left: 0;
    margin-right: 0;
    -webkit-mask-image: none;
    mask-image: none;
    overflow: visible;
  }
  .logos__track {
    flex-wrap: wrap;
    justify-content: center;
    width: 100%;
    animation: none;
  }
  .logos__list {
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-5) var(--space-6);
    padding: 0;
  }
  .logos__list[aria-hidden="true"] {
    display: none;
  }
  .logos__nhl-item:hover img {
    transform: none;
  }
}

/* ---------- Paths ---------- */
/* ---------- Paths (the two routes in) ----------
   A filled surface with no border and no colour wash. It needs enough
   presence to hold the two service indexes, without repeating the dark
   platform cards above it or the gradient voices panel below it.
   .paths__grid / .path-card further down are the older card treatment,
   still used by landing-control.html, so this layout owns its own class.
   Subgrid keeps the glyph, title, index and link rows aligned across both
   columns even when one intro runs a line longer. Row gaps stay at 0 —
   the children carry their own margins.
   --container is 1600px, so without a cap each service row stretches wide
   enough to leave a void between the name and its note. */
.paths__routes {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto auto auto 1fr auto;
  column-gap: clamp(var(--space-3), 2vw, var(--space-5));
  row-gap: 0;
  /* Between the platforms grid above (1760px at a 1950px viewport) and the
     voices carousel below (1040px), so the step down is gradual. */
  max-width: 1400px;
  margin: 0 auto;
}
.paths__grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); }
.path {
  display: grid;
  grid-row: span 5;
  grid-template-rows: subgrid;
  padding: clamp(var(--space-4), 2.4vw, var(--space-6));
  background:
    radial-gradient(
      ellipse 85% 60% at 100% 0%,
      color-mix(in srgb, var(--path-accent, var(--color-secondary-cyan)) 26%, transparent),
      transparent 62%
    ),
    var(--color-ink);
  color: var(--color-on-dark);
  border-radius: var(--radius-xl);
}
/* Tinted tile on the dark panel: depth from tone, not from a shadow. */
.path__glyph {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--path-accent, var(--color-secondary-cyan)) 22%, var(--color-ink));
  color: var(--path-accent, var(--color-on-dark));
}
.path__glyph svg { width: 22px; height: 22px; }
.path__title {
  margin-top: var(--space-4);
  font-size: clamp(1.375rem, 2vw, 1.75rem);
  font-weight: 700;
  letter-spacing: -0.024em;
  line-height: 1.1;
}
.path__body {
  margin-top: var(--space-3);
  font-size: var(--fs-base);
  line-height: 1.6;
  color: var(--color-on-dark-muted);
  max-width: 44ch;
}
/* Hairlines between rows, not around the block: an index, not nested cards.
   The list is pulled out by the row's own padding, so the hairlines and the
   hover tint share one edge while the row text still lines up with the
   title above it. */
.path__services {
  margin-top: var(--space-5);
  margin-inline: calc(var(--space-2) * -1);
  border-top: 1px solid rgba(255, 255, 255, 0.14);
}
.path__service { border-bottom: 1px solid rgba(255, 255, 255, 0.14); }
.path__service a {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-2);
  border-radius: var(--radius-sm);
  color: var(--color-on-dark);
  transition: background 0.18s var(--ease), color 0.18s var(--ease);
}
.path__service a:hover {
  color: var(--color-active);
  background: rgba(255, 255, 255, 0.07);
}
.path__service-name {
  font-family: var(--font-title);
  font-size: var(--fs-base);
  font-weight: 600;
  letter-spacing: -0.01em;
}
.path__service-end {
  display: inline-flex;
  align-items: baseline;
  gap: 0.65em;
  flex: 0 0 auto;
}
.path__service-note {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.5);
  text-align: right;
}
.path__service-arrow {
  font-family: var(--font-title);
  font-size: var(--fs-base);
  font-weight: 500;
  line-height: 1;
  color: rgba(255, 255, 255, 0.55);
  transition: transform 0.18s var(--ease), color 0.18s var(--ease);
}
.path__service a:hover .path__service-arrow {
  color: var(--color-active);
  transform: translateX(3px);
}
.path__more { margin-top: var(--space-5); align-self: start; justify-self: start; }

.path-card {
  display: flex;
  flex-direction: column;
  min-height: 280px;
  background: var(--color-surface-light);
  border: none;
  border-radius: var(--radius-xl);
  padding: var(--space-6);
  transition: transform 0.2s var(--ease);
}
.path-card:hover {
  transform: translateY(-3px);
}
.path-card .link-arrow { margin-top: auto; }
.path-card--dark { background: var(--color-ink); color: var(--color-on-dark); }
.path-card--startup {
  background:
    radial-gradient(ellipse 90% 70% at 8% 0%, color-mix(in srgb, var(--color-secondary-cyan) 18%, transparent), transparent 58%),
    radial-gradient(ellipse 80% 60% at 100% 100%, color-mix(in srgb, var(--color-secondary-green) 14%, transparent), transparent 55%),
    var(--color-surface-light);
}
.path-card--enterprise {
  background:
    radial-gradient(ellipse 90% 70% at 92% 0%, color-mix(in srgb, var(--color-secondary-green) 16%, transparent), transparent 58%),
    radial-gradient(ellipse 80% 60% at 0% 100%, color-mix(in srgb, var(--color-secondary-cyan) 12%, transparent), transparent 55%),
    var(--color-surface-light);
  border: 1px solid var(--border-ink);
}
.path-card__title {
  font-family: var(--font-title);
  font-size: var(--fs-h3);
  font-weight: 700;
  letter-spacing: -0.01em;
  margin-bottom: 14px;
}
.path-card__body {
  font-size: var(--fs-base);
  line-height: 1.55;
  color: var(--color-ink-60);
  margin-bottom: var(--space-4);
}
.path-card--dark .path-card__body { color: var(--color-on-dark-muted); }

/* ---------- Features ---------- */
.features__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-4);
  margin-top: var(--space-7);
}
.feature-card {
  background: var(--color-ink);
  border-color: transparent;
  color: var(--color-on-dark);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.2s var(--ease), box-shadow 0.2s var(--ease);
}
.feature-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 18px 40px -18px rgba(0, 0, 0, 0.5);
}
.feature-card:focus-visible {
  outline: 2px solid var(--color-active);
  outline-offset: 3px;
}
.feature-card__icon {
  display: flex;
  align-items: center;
  margin-bottom: var(--space-4);
  color: var(--color-ink);
}
.feature-card__icon svg {
  width: var(--icon-md);
  height: var(--icon-md);
}
.feature-card__title {
  font-family: var(--font-title);
  font-size: var(--fs-h3);
  font-weight: 700;
  letter-spacing: -0.01em;
  margin-bottom: 14px;
  color: var(--color-on-dark);
}
.feature-card__body { font-size: 0.9375rem; color: var(--color-on-dark-muted); line-height: 1.55; }

/* ---------- Process ---------- */
.process {
  position: relative;
  overflow: hidden;
  background: var(--color-ink);
  border-radius: var(--radius-xl);
  padding: var(--space-7) var(--space-6);
}
.process__glow {
  position: absolute;
  inset: 0;
  background: radial-gradient(40% 90% at 85% 20%, oklch(0.82 0.14 152 / 0.4), transparent 68%);
  animation: nc-hue 10s ease-in-out infinite alternate;
}
.process__content { position: relative; }
.process__title {
  font-family: var(--font-title);
  font-weight: 700;
  font-size: var(--fs-h2);
  letter-spacing: -0.02em;
  color: var(--color-on-dark);
  margin: var(--space-2) 0 var(--space-1);
}
.process__lead { font-size: var(--fs-md); color: var(--color-on-dark-muted); max-width: 560px; margin-bottom: var(--space-6); }
.process__flow {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 10px;
  width: 100%;
  max-width: 52rem;
  font-family: var(--font-title);
  font-size: 0.9375rem;
  color: var(--color-on-dark);
}
.process__chip {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  min-height: 2.75rem;
  padding: 0.625rem 0.75rem;
  text-align: center;
  white-space: nowrap;
  background: var(--color-ink-elevated);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 14px;
}
.process__arrow {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1rem;
  color: var(--color-secondary-lime);
  line-height: 1;
}

/* ---------- Quote ---------- */
.quote {
  background: var(--color-paper);
  border: 1px solid var(--border-ink);
  border-radius: var(--radius-xl);
  padding: var(--space-8) var(--space-6);
  text-align: center;
  width: 100%;
}
.quote__tag {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  font-family: var(--font-title);
  font-size: var(--fs-eyebrow);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-on-dark);
  background: var(--color-ink);
  border: 1px solid color-mix(in srgb, var(--color-on-dark) 14%, transparent);
  padding: 8px 16px;
  border-radius: var(--radius-pill);
  margin-bottom: var(--space-2);
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.14);
}
.quote__tag-dot {
  color: var(--color-secondary-green);
  font-size: 0.55em;
  line-height: 1;
}
.quote__text {
  font-family: var(--font-title);
  font-weight: 700;
  font-size: 1.875rem;
  line-height: 1.28;
  letter-spacing: -0.02em;
  margin: var(--space-6) 0 14px;
}
.quote__punch { font-family: var(--font-title); font-size: 1.375rem; color: var(--color-secondary-magenta); margin-bottom: var(--space-4); }
.quote__meta { font-family: var(--font-title); font-size: 0.8125rem; color: var(--color-ink-45); letter-spacing: 0.06em; }

/* ---------- CTA ---------- */
.cta { padding-bottom: var(--space-7); }
.cta__panel {
  position: relative;
  overflow: hidden;
  background: var(--color-ink);
  border-radius: var(--radius-xl);
  padding: var(--space-7) var(--space-6);
  text-align: center;
}
.cta__glow {
  position: absolute;
  inset: 0;
  background: radial-gradient(42% 90% at 50% 45%, oklch(0.82 0.14 152 / 0.4), transparent 68%);
  animation: nc-hue 10s ease-in-out infinite alternate;
}
.cta__content {
  position: relative;
  max-width: 840px;
  margin: 0 auto;
}
.cta__title {
  font-family: var(--font-title);
  font-weight: 700;
  font-size: clamp(2rem, 5vw, 2.875rem);
  letter-spacing: -0.02em;
  color: var(--color-on-dark);
}
.cta__lead {
  font-size: 1.125rem;
  color: var(--color-on-dark-muted);
  max-width: 560px;
  margin: var(--space-3) auto var(--space-5);
}
.cta__actions { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }

/* ---------- CTA — services variant (mid-page band) ---------- */
.cta--services .cta__panel { text-align: left; padding: var(--space-7); }
.cta__grid {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-6);
  flex-wrap: wrap;
}
.cta--services .cta__content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-6);
  max-width: none;
  width: 100%;
  margin: 0;
}
.cta--services .cta__copy { min-width: 0; flex: 1 1 auto; }
.cta--services .cta__title {
  max-width: none;
  font-size: clamp(1.5rem, 3.2vw, 2rem);
}
.cta--services .cta__lead { margin: var(--space-3) 0 0; max-width: none; }
.cta--services .cta__actions {
  flex: 0 0 auto;
  justify-content: flex-end;
  margin: 0;
}
.cta__services {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  list-style: none;
  margin: 0;
  padding: 0;
  min-width: 230px;
}
.cta__services li {
  font-family: var(--font-title);
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--color-on-dark-muted);
  background: var(--color-ink-elevated);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--radius-pill);
  padding: var(--space-2) var(--space-4);
  text-align: center;
}
@media (max-width: 768px) {
  .cta--services .cta__panel { text-align: center; }
  .cta__grid { flex-direction: column; }
  .cta--services .cta__content {
    flex-direction: column;
    align-items: center;
    max-width: 100%;
  }
  .cta--services .cta__lead { margin-left: auto; margin-right: auto; }
  .cta--services .cta__actions { justify-content: center; }
  .cta__services { width: 100%; }
}

/* ---------- Footer ---------- */
.site-footer {
  margin-top: var(--space-6);
  display: grid;
  grid-template-columns:
    minmax(var(--gutter), 1fr)
    minmax(0, var(--container))
    minmax(var(--gutter), 1fr);
}
.site-footer > * { grid-column: 2; }
/* The line above the footer sits in the content column, not across the
   viewport. A border-top on .site-footer would span the full width. */
.site-footer::before {
  content: "";
  grid-column: 2;
  height: 1px;
  background: var(--border-ink);
}
.site-footer__belief {
  padding: var(--space-8) 0 var(--space-7);
  margin: 0;
  font-family: var(--font-title);
  font-weight: 700;
  font-size: clamp(1.875rem, 3.2vw, 3rem);
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--color-ink);
  border-bottom: 1px solid var(--border-ink);
}
.site-footer__grid {
  margin: 0;
  padding: var(--space-5) 0 var(--space-4);
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr 1.2fr;
  gap: var(--space-4);
}
.site-footer__trust {
  margin: 0;
  padding: 0 0 var(--space-4);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-3);
  font-family: var(--font-title);
  font-size: var(--fs-sm);
  color: var(--color-ink-45);
  text-align: center;
}
.site-footer__trust-logo {
  display: block;
  height: 14px;
  width: auto;
  flex-shrink: 0;
}
.site-footer__trust p {
  margin: 0;
  font-weight: 700;
}
.footer-col { display: flex; flex-direction: column; gap: 10px; }
.footer-col a { font-size: var(--fs-sm); color: var(--color-ink-60); }
.footer-col__title {
  font-family: var(--font-title);
  font-size: var(--fs-eyebrow);
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--color-ink);
  margin-bottom: 6px;
  text-transform: uppercase;
}
.footer-col__note { font-size: 0.8125rem; color: var(--color-ink-60); line-height: 1.5; }
.footer-col__accent { color: var(--color-secondary-magenta); }
.site-footer__bar {
  margin: 0;
  padding: 0 0 var(--space-6);
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: var(--font-title);
  font-size: var(--fs-eyebrow);
  color: var(--color-ink-45);
}

/* ---------- Animations ---------- */
@keyframes nc-drift {
  0%   { transform: translate(-2%, 1%) scale(1); }
  50%  { transform: translate(2%, -2%) scale(1.08); }
  100% { transform: translate(-2%, 1%) scale(1); }
}
@keyframes nc-hue {
  0%   { filter: hue-rotate(0deg); }
  100% { filter: hue-rotate(26deg); }
}

/* Drawer-only meta (CTA + lang): hidden on desktop chrome */
.nav__menu-meta { display: none; }
.nav__menu-cta { width: 100%; }

/* ---------- Responsive ---------- */
/* Nav collapses earlier than page layout — full link row needs ~1200px */
@media (max-width: 1199px) {
  .site-header { z-index: 100; }

  .nav {
    display: flex;
    align-items: center;
    gap: 0.75rem;
  }
  .brand {
    grid-column: auto;
    justify-self: auto;
    margin-inline-end: auto;
    min-width: 0;
    position: relative;
    z-index: 110;
  }
  .nav__toggle {
    display: flex;
    order: 3;
    flex-shrink: 0;
    position: relative;
    z-index: 110;
  }
  .nav__toggle[aria-expanded="true"] span:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
  }
  .nav__toggle[aria-expanded="true"] span:nth-child(2) {
    opacity: 0;
  }
  .nav__toggle[aria-expanded="true"] span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
  }

  /* Full-screen overlay — single sheet, accordion submenus inside */
  .nav__menu {
    display: flex;
    position: fixed;
    inset: 0;
    z-index: 105;
    width: auto;
    max-width: none;
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-5);
    padding:
      calc(var(--header-height) + var(--space-4))
      var(--gutter)
      max(var(--space-6), env(safe-area-inset-bottom, 0px));
    background: var(--color-paper);
    border: none;
    border-radius: 0;
    box-shadow: none;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(-0.5rem);
    transition:
      opacity 0.22s var(--ease),
      transform 0.22s var(--ease),
      visibility 0.22s;
  }
  .nav__menu.is-open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0);
  }
  body.nav-open {
    overflow: hidden;
  }
  body.nav-open .site-header {
    background: var(--color-paper);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }

  .nav__links {
    grid-column: auto;
    justify-self: auto;
    flex: 1 1 auto;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: stretch;
    gap: 0;
    min-width: 0;
    font-size: 1.375rem;
    font-weight: 600;
    letter-spacing: -0.02em;
  }
  .nav__links > li {
    border-bottom: 1px solid var(--border-ink);
  }
  .nav__links > li > a,
  .nav__trigger {
    white-space: normal;
    width: 100%;
    padding: 1.05rem 0;
    justify-content: space-between;
  }
  .nav__actions {
    grid-column: auto;
    justify-self: auto;
    order: 2;
    flex-shrink: 0;
    width: auto;
    gap: 0.75rem;
    justify-content: flex-end;
    position: relative;
    z-index: 110;
  }
  /* Tablet: CTA + EN/FR stay in the bar; overlay is links only */
  .nav__menu-meta { display: none; }

  .nav__item--has-menu { width: 100%; }
  .nav__trigger { width: 100%; }
  .nav__chevron {
    width: 0.85em;
    height: 0.85em;
    opacity: 0.55;
  }

  /* Accordion panels — never absolute/popover on phone/tablet */
  .nav__dropdown {
    position: static !important;
    inset: auto !important;
    left: auto !important;
    top: auto !important;
    transform: none !important;
    min-width: 0 !important;
    max-width: none !important;
    width: 100% !important;
    margin: 0 !important;
    box-shadow: none !important;
    opacity: 1 !important;
    visibility: hidden;
    pointer-events: none;
    height: 0;
    max-height: 0;
    padding: 0 !important;
    overflow: hidden;
    border: none !important;
    background: transparent !important;
    gap: 0.15rem;
    transition: none;
  }
  .nav__dropdown::before { display: none !important; }
  .nav__item.is-open > .nav__dropdown {
    visibility: visible;
    pointer-events: auto;
    height: auto;
    max-height: 40rem;
    padding: 0 0 var(--space-3) 0 !important;
  }
  .nav__drop-link {
    padding: 0.7rem 0.85rem;
    border-radius: var(--radius-sm);
    background: var(--color-surface-light);
  }
  .nav__drop-link + .nav__drop-link { margin-top: 0.25rem; }
  .nav__drop-title { font-size: 1rem; }
  .nav__drop-desc { font-size: 0.875rem; }

  /* Overlay always uses ink-on-paper, even over a dark hero */
  body.has-dark-hero .site-header:not(.is-scrolled) .nav__menu a,
  body.has-dark-hero .site-header:not(.is-scrolled) .nav__menu .nav__trigger,
  body.has-dark-hero .site-header:not(.is-scrolled) .nav__menu .lang-switch,
  body.has-dark-hero .site-header:not(.is-scrolled) .nav__menu .nav__drop-title {
    color: var(--color-ink);
  }
  body.has-dark-hero .site-header:not(.is-scrolled) .nav__menu .nav__drop-desc,
  body.has-dark-hero .site-header:not(.is-scrolled) .nav__menu .lang-switch,
  body.has-dark-hero .site-header:not(.is-scrolled) .nav__menu .lang-switch a {
    color: var(--color-ink-45);
  }
  body.has-dark-hero .site-header:not(.is-scrolled) .nav__menu .lang-switch__active,
  body.has-dark-hero .site-header:not(.is-scrolled) .nav__menu a.lang-switch__active {
    color: var(--color-ink);
  }
  body.nav-open.has-dark-hero .site-header .brand__logo--dark { display: block; }
  body.nav-open.has-dark-hero .site-header .brand__logo--light { display: none; }
}

/* Phone: brand + hamburger only; CTA + EN/FR move into the overlay */
@media (max-width: 700px) {
  .nav__actions { display: none; }
  .nav__menu-meta {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    margin-top: auto;
    padding-top: var(--space-4);
    border-top: 1px solid var(--border-ink);
  }
  .nav__menu-cta { display: inline-flex; width: auto; }
}

@media (max-width: 900px) {
  :root { --gutter: 16px; }

  .paths__grid,
  .paths__routes,
  .features__grid { grid-template-columns: 1fr; }

  /* One column: nothing left to align across, so drop the subgrid. */
  .paths__routes { grid-template-rows: none; row-gap: var(--space-7); }
  .path {
    display: flex;
    flex-direction: column;
    grid-row: auto;
    grid-template-rows: none;
  }

  .site-footer__grid { grid-template-columns: 1fr 1fr; }

  /* Hero: stack title over intro, scroll cue steps aside */
  .hero__bottom {
    grid-template-columns: 1fr;
    align-items: start;
    row-gap: var(--space-5);
    padding-top: calc(var(--header-height) + var(--space-6));
  }
  .hero__intro-col { justify-self: stretch; min-width: 0; max-width: none; }
  .hero__intro-col .hero__doors { order: 1; }
  .hero__intro-col .hero__anchors {
    order: 2;
    margin-bottom: 0;
    margin-top: var(--space-4);
  }
  .hero__doors-grid { grid-template-columns: 1fr; }
  .hero__scroll { display: none; }
}

@media (max-width: 560px) {
  .section { padding-top: var(--space-7); }
  .section.shift,
  .section.features,
  .section.paths,
  .section.proof,
  .section.voices,
  .section.logos {
    padding-top: calc(var(--space-7) + var(--space-4));
    padding-bottom: var(--space-6);
  }
  .section.logos { padding-top: var(--space-6); }

  /* Long service names wrap at this width, and a right-aligned note then
     crowds the second line. Stack the note under the name instead. */
  .path__service a { flex-direction: column; align-items: flex-start; gap: 4px; }
  .path__service-end { width: 100%; justify-content: space-between; }
  .path__service-note { text-align: left; }

  .hero__bottom,
  .hero__content { padding-left: var(--gutter); padding-right: var(--gutter); }
  .hero__title { font-size: clamp(1.45rem, 6.4vw, 2.1rem); }
  .hero-blocks { flex-direction: column; }
  .quote { padding: var(--space-6) var(--space-4); }
  .quote__text { font-size: 1.375rem; }
  .process { padding: var(--space-6) var(--space-4); }
  .cta__panel { padding: var(--space-6) var(--space-4); }
  .cta__title { font-size: clamp(1.375rem, 6vw, 1.75rem); }
  .site-footer__grid { grid-template-columns: 1fr; }
  .site-footer__belief {
    font-size: clamp(1.5rem, 6vw, 2rem);
    padding: var(--space-7) 0 var(--space-6);
  }
  .site-footer__bar { flex-direction: column; gap: var(--space-2); text-align: center; }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; scroll-behavior: auto; }
  .hero__burst { display: none; }
}

/* =============================================================
   v2.0 additions — coherence message, dropdowns, interior pages
   ============================================================= */

/* ---------- Nav dropdowns ---------- */
.nav__item { position: relative; }
.nav__trigger {
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
}
.nav__trigger:hover,
.nav__item.is-open > .nav__trigger { color: var(--color-active); }
.nav__item.is-open .nav__chevron { transform: rotate(180deg); }
.nav__chevron { transition: transform 0.18s var(--ease); }

.nav__dropdown {
  display: flex;
  flex-direction: column;
  gap: 2px;
  z-index: 20;
}

/* Desktop popover — hover/focus must never apply on the mobile overlay */
@media (min-width: 1200px) {
  .nav__dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    transform: translateY(-6px);
    min-width: 300px;
    width: max-content;
    max-width: 340px;
    margin-top: 0.75rem;
    padding: 0.375rem;
    background: var(--color-paper);
    border: 1px solid var(--border-ink);
    border-radius: var(--radius-md);
    box-shadow: 0 20px 44px rgba(10, 10, 8, 0.16);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.18s var(--ease), transform 0.18s var(--ease), visibility 0.18s;
  }
  .nav__dropdown::before {
    content: "";
    position: absolute;
    top: -0.75rem;
    left: 0;
    right: 0;
    height: 0.75rem;
  }
  .nav__item.is-open > .nav__dropdown,
  .nav__item:hover > .nav__dropdown,
  .nav__item:focus-within > .nav__dropdown {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0);
  }
}
.nav__drop-link {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.2rem;
  width: 100%;
  padding: 0.625rem 0.875rem;
  text-align: left;
  border-radius: var(--radius-sm);
  transition: background 0.15s var(--ease);
}
.nav__drop-link:hover { background: var(--color-surface-light); color: var(--color-ink); }
.nav__drop-head {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
  width: 100%;
}
.nav__drop-title {
  font-family: var(--font-title);
  font-weight: 600;
  font-size: var(--fs-sm);
  color: var(--color-ink);
  line-height: 1.35;
}
.nav__drop-desc {
  display: block;
  width: 100%;
  font-size: 0.8125rem;
  line-height: 1.4;
  color: var(--color-ink-45);
}
.nav__tag {
  flex-shrink: 0;
  font-family: var(--font-title);
  font-size: 0.625rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  line-height: 1.2;
  color: var(--color-secondary-magenta);
  border: 1px solid color-mix(in srgb, var(--color-secondary-magenta) 40%, transparent);
  padding: 2px 7px;
  border-radius: var(--radius-pill);
  white-space: nowrap;
}
.nav__tag--service { color: var(--color-ink-45); border-color: var(--border-ink); }

/* ---------- Hero (v2) ---------- */
.hero__kicker { margin-bottom: 0; }
.hero__anchors { margin-bottom: var(--space-4); width: 100%; }
.hero__anchors-list {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--space-1);
  margin: 0;
  padding: 0;
  list-style: none;
}
.hero__anchor {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-title);
  font-size: var(--fs-eyebrow);
  letter-spacing: 0.02em;
  color: var(--color-ink-70);
  text-decoration: none;
  transition: color 0.18s var(--ease);
}
.hero__anchor:hover { color: var(--color-ink); }
.hero__anchor-arrow {
  font-size: var(--fs-sm);
  line-height: 1;
  transition: transform 0.18s var(--ease);
}
.hero__anchor:hover .hero__anchor-arrow { transform: translateX(3px); }
.hero__doors {
  display: flex;
  flex-direction: column;
  width: 100%;
}
.hero__doors-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-2);
}
.hero-door {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-5);
  min-height: 0;
  text-align: left;
  border-radius: var(--radius-lg);
  transition: transform 0.2s var(--ease), box-shadow 0.2s var(--ease);
}
.hero-door--light {
  background: var(--color-surface-light);
  color: var(--color-ink);
}
.hero-door--dark {
  background: var(--color-ink);
  color: var(--color-on-dark);
}
.hero-door:hover {
  transform: translateY(-3px);
  box-shadow: 0 18px 40px -18px rgba(0, 0, 0, 0.2);
}
.hero-door--dark:hover {
  color: var(--color-on-dark);
  box-shadow: 0 18px 40px -18px rgba(0, 0, 0, 0.5);
}
.hero-door__title {
  font-family: var(--font-title);
  font-size: var(--fs-sm);
  font-weight: 700;
  letter-spacing: -0.01em;
}
.hero-door__body {
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--color-ink-60);
  flex: 1;
}
.hero-door--dark .hero-door__body { color: var(--color-on-dark-muted); }
.hero-door__go {
  margin-top: auto;
  font-family: var(--font-title);
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--color-ink);
}
.hero-door--dark .hero-door__go { color: #fff; }

/* ---------- Dark hero (index) — black bg, white elements, gradient kept ---------- */
.hero--dark { background: #000; color: #fff; }
.hero--dark .hero__kicker { color: rgba(255, 255, 255, 0.65); }
.hero--dark .hero__title { color: #fff; }
.hero--dark .hero__lead { color: rgba(255, 255, 255, 0.72); }
.hero--dark .hero__anchor { color: rgba(255, 255, 255, 0.7); }
.hero--dark .hero__anchor:hover { color: #fff; }
.hero--dark .hero__scroll { color: rgba(255, 255, 255, 0.8); }
.hero--dark .hero__scroll:hover { color: #fff; }
/* CTA button: swap dark → light so it stays visible on black */
.hero--dark .hero__cta .btn--dark { background: #fff; color: #000; }
.hero--dark .hero__cta .btn--dark:hover { color: #000; }
/* Path doors: lift off pure black with an elevated surface + hairline */
.hero--dark .hero-door--dark {
  background: var(--color-ink-elevated);
  border: 1px solid rgba(255, 255, 255, 0.12);
}

/* Fixed header sitting over the dark hero (before scroll) → light nav */
body.has-dark-hero .site-header:not(.is-scrolled) .nav__links a,
body.has-dark-hero .site-header:not(.is-scrolled) .nav__trigger,
body.has-dark-hero .site-header:not(.is-scrolled) .lang-switch { color: #fff; }
/* Over the dark hero, swap the wordmark to its white variant */
body.has-dark-hero .site-header:not(.is-scrolled) .brand__logo--dark { display: none; }
body.has-dark-hero .site-header:not(.is-scrolled) .brand__logo--light { display: block; }
body.has-dark-hero .site-header:not(.is-scrolled) .nav__actions .btn--dark {
  background: #fff; color: #000;
}

/* ---------- The shift ---------- */
.section.shift {
  color: var(--color-ink);
}
.shift__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-6);
  align-items: start;
  padding: var(--space-8) var(--space-7);
  border: 1px solid var(--border-ink);
  border-radius: var(--radius-xl);
}
.shift__head { text-align: left; }
.shift__title {
  max-width: 24ch;
  margin: var(--space-3) 0 0;
  color: var(--color-ink);
}
.shift__body {
  font-size: var(--fs-lead);
  line-height: 1.6;
  color: var(--color-ink-60);
  margin: 0;
  text-align: left;
}
.shift__body strong {
  color: var(--color-ink);
  font-weight: 700;
}

/* ---------- What we do (feature-card extensions) ---------- */
.feature-card { display: flex; flex-direction: column; }
.feature-card__tag {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
}
.feature-card__tag-name {
  font-family: var(--font-title);
  font-size: 0.625rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.feature-card:nth-child(1) .feature-card__tag-name { color: var(--color-secondary-cyan); }
.feature-card:nth-child(2) .feature-card__tag-name { color: var(--color-secondary-magenta); }
.feature-card:nth-child(3) .feature-card__tag-name { color: var(--color-secondary-green); }
.feature-card__tag-badge {
  flex-shrink: 0;
  font-family: var(--font-title);
  font-size: 0.625rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  line-height: 1.2;
  padding: 2px 7px;
  border-radius: var(--radius-pill);
  white-space: nowrap;
}
.feature-card__tag-badge--service {
  color: var(--color-on-dark-muted);
  border: 1px solid rgba(255, 255, 255, 0.2);
}
.feature-card__tag-badge--product {
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.35);
}
.feature-card__arrow {
  margin-top: auto;
  align-self: flex-end;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  color: var(--color-on-dark);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 50%;
  transition: transform 0.2s var(--ease), border-color 0.2s var(--ease), color 0.2s var(--ease);
}
.feature-card__arrow svg {
  width: 18px;
  height: 18px;
}
.feature-card:hover .feature-card__arrow {
  color: var(--color-secondary-lime);
  border-color: color-mix(in srgb, var(--color-secondary-lime) 40%, transparent);
  transform: translateX(3px);
}

/* ---------- Client voices (carousel) ---------- */
.voices {
  position: relative;
  text-align: center;
}
.voices__title {
  font-size: clamp(2.25rem, 4.2vw, 3rem);
  letter-spacing: -0.035em;
  line-height: 1.02;
  margin-bottom: var(--space-6);
}
.voices .kicker {
  margin-bottom: 0;
}
.voices__carousel {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  grid-template-rows: auto auto;
  grid-template-areas:
    "prev view next"
    "dots dots dots";
  align-items: center;
  column-gap: clamp(var(--space-3), 3vw, var(--space-5));
  row-gap: var(--space-4);
  max-width: 1040px;
  margin: 0 auto;
}
.voices__viewport {
  position: relative;
  grid-area: view;
  padding: clamp(1.75rem, 3.2vw, 2.25rem) clamp(1.75rem, 4vw, 3rem) clamp(1.5rem, 2.8vw, 2rem);
  background: var(--color-surface-light);
  border: 1px solid var(--border-ink);
  border-radius: var(--radius-xl);
  overflow: hidden;
  text-align: center;
}
.voices__viewport::before {
  content: "";
  position: absolute;
  inset: -30% -10% auto;
  height: 85%;
  background:
    radial-gradient(42% 55% at 18% 30%, oklch(0.84 0.12 200 / 0.28), transparent 70%),
    radial-gradient(48% 60% at 82% 45%, oklch(0.88 0.14 145 / 0.26), transparent 72%);
  pointer-events: none;
  animation: nc-hue 12s ease-in-out infinite alternate;
}
.voices__mark {
  position: absolute;
  top: clamp(1.1rem, 2.5vw, 1.65rem);
  left: clamp(1.1rem, 3vw, 1.75rem);
  z-index: 0;
  font-family: var(--font-title);
  font-weight: 800;
  font-size: clamp(7.5rem, 15vw, 11rem);
  line-height: 1;
  letter-spacing: -0.08em;
  color: color-mix(in srgb, var(--color-secondary-green) 72%, transparent);
  user-select: none;
  pointer-events: none;
}
.voices__track {
  position: relative;
  display: grid;
  z-index: 1;
}
.voice {
  grid-area: 1 / 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  margin: 0;
  padding-top: clamp(0.75rem, 1.5vw, 1rem);
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px);
  transition:
    opacity 0.45s var(--ease),
    transform 0.45s var(--ease),
    visibility 0.45s;
  pointer-events: none;
}
.voice.is-active {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  pointer-events: auto;
}
.voice__punch {
  font-family: var(--font-title);
  font-weight: 800;
  font-size: clamp(1.5rem, 2.6vw, 2rem);
  letter-spacing: -0.035em;
  line-height: 1.02;
  color: var(--color-ink);
  max-width: 28rem;
  margin: 0 auto var(--space-2);
  text-align: center;
}
.voice__quote {
  margin: 0 auto var(--space-3);
  max-width: 36rem;
}
.voice__quote p {
  font-size: clamp(1.05rem, 1.6vw, 1.175rem);
  line-height: 1.48;
  color: var(--color-ink-60);
  font-style: italic;
  font-weight: 400;
  text-align: center;
}
.voice__who {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  width: min(100%, 18rem);
  margin: 0 auto;
  padding-top: var(--space-3);
  border-top: 1px solid var(--border-ink);
  text-align: center;
}
.voice__name {
  font-family: var(--font-title);
  font-weight: 700;
  font-size: var(--fs-base);
  letter-spacing: -0.01em;
  color: var(--color-ink);
}
.voice__role {
  font-size: var(--fs-sm);
  color: var(--color-ink-45);
  letter-spacing: 0;
  text-transform: none;
}

.voices__nav {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  padding: 0;
  color: var(--color-ink);
  background: var(--color-paper);
  border: 1.5px solid var(--border-ink-strong);
  border-radius: 50%;
  cursor: pointer;
  transition:
    transform 0.18s var(--ease),
    border-color 0.18s var(--ease),
    color 0.18s var(--ease),
    background 0.18s var(--ease);
}
.voices__nav[data-voice-prev] { grid-area: prev; }
.voices__nav[data-voice-next] { grid-area: next; }
.voices__nav svg {
  width: 20px;
  height: 20px;
}
.voices__nav:hover {
  transform: translateY(-2px);
  color: var(--color-paper);
  background: var(--color-ink);
  border-color: var(--color-ink);
}
.voices__nav--next:hover {
  color: var(--color-secondary-lime);
}
.voices__nav:focus-visible {
  outline: 2px solid var(--color-active);
  outline-offset: 3px;
}
.voices__dots {
  grid-area: dots;
  justify-self: center;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.voices__dot {
  width: 8px;
  height: 8px;
  padding: 0;
  border: none;
  border-radius: var(--radius-pill);
  background: var(--color-ink-25);
  cursor: pointer;
  transition: width 0.22s var(--ease), background 0.22s var(--ease);
}
.voices__dot.is-active {
  width: 26px;
  background: var(--color-ink);
}
.voices__dot:focus-visible {
  outline: 2px solid var(--color-active);
  outline-offset: 3px;
}

/* ---------- Proof (honest) ---------- */
/* On the home page the case study slider follows the logo strip with no
   heading between them, so the two sections read as one block. A full
   section gap on both sides of that seam leaves a dead band. */
.section.logos:has(+ .section.proof) { padding-bottom: var(--space-4); }
.section.logos + .section.proof { padding-top: var(--space-5); }
.proof__partner { display: flex; flex-direction: column; align-items: center; gap: var(--space-3); margin-top: var(--space-4); }
.proof__partner-note { font-size: var(--fs-sm); color: var(--color-ink-45); text-align: center; }
.proof__slots {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-4);
  margin-top: var(--space-6);
}
.proof__slots--two {
  grid-template-columns: repeat(2, 1fr);
  max-width: 720px;
  margin-left: auto;
  margin-right: auto;
}
.proof__slot {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: 140px;
  padding: var(--space-5);
  border: 1px dashed var(--border-ink-strong);
  border-radius: var(--radius-lg);
  background: var(--color-surface-light);
}
.proof__slot-tag {
  font-family: var(--font-title);
  font-size: 0.625rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-ink-45);
  border: 1px solid var(--border-ink);
  border-radius: var(--radius-pill);
  padding: 3px 10px;
}
.proof__slot-label { font-family: var(--font-title); font-size: var(--fs-md); color: var(--color-ink-70); }
.proof__cta {
  position: relative;
  z-index: 2;
  display: flex;
  justify-content: center;
  margin-top: var(--space-6);
}

/* ---------- Featured case studies (showcase slider) ----------
   Native scroll-snap track: touch and trackpad swipe work without
   JS, and js/main.js only adds the arrows, the dots and autoplay.
   Arrows sit beside the viewport in the same grid the voices
   carousel uses, so the two sliders read as one component. */
.showcase {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  grid-template-areas:
    "prev view next"
    "dots dots dots";
  align-items: center;
  column-gap: clamp(var(--space-3), 3vw, var(--space-5));
  row-gap: var(--space-5);
  margin-top: var(--space-6);
  text-align: left;
}
.showcase__viewport {
  position: relative;
  grid-area: view;
  min-width: 0;
  z-index: 0;
  clip-path: inset(0);
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -ms-overflow-style: none;
  overscroll-behavior-x: contain;
  border-radius: var(--radius-xl);
}
.showcase__viewport::-webkit-scrollbar { display: none; }
.showcase__viewport:focus-visible { outline: 2px solid var(--color-active); outline-offset: 4px; }
.showcase__track {
  display: flex;
  gap: var(--space-4);
  margin: 0;
  padding: 0;
  list-style: none;
}
.showcase__slide {
  flex: 0 0 100%;
  min-width: 0;
  scroll-snap-align: center;
  scroll-snap-stop: always;
}

.showcase-card {
  position: relative;
  overflow: clip;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  align-items: center;
  gap: clamp(var(--space-4), 3.5vw, var(--space-6));
  height: 100%;
  padding: clamp(var(--space-4), 3vw, var(--space-6));
  background: var(--color-surface-light);
  border: 1px solid var(--border-ink);
  border-radius: var(--radius-xl);
  color: inherit;
  text-decoration: none;
  transition: border-color 0.22s var(--ease), background 0.22s var(--ease);
}
.showcase-card:hover { border-color: var(--border-ink-strong); background: var(--color-paper); }
.showcase-card:focus-visible { outline: 2px solid var(--color-active); outline-offset: 3px; }

/* Same accent wash as .pf-case__glow on the portfolio page. It is wide and
   faint here so it reads as light in the card rather than a coloured shape,
   and each slide anchors it to a different corner so the run of cards does
   not look stamped from one template. Set --showcase-accent-2 for the
   two-tone version. The opposite inset is always auto, so inset and width
   never fight over the size. */
.showcase-card__glow {
  position: absolute;
  z-index: 0;
  pointer-events: none;
  inset: var(--showcase-glow-inset, -38% auto auto -22%);
  width: var(--showcase-glow-size, 82%);
  aspect-ratio: 1;
  border-radius: 50%;
  background:
    radial-gradient(50% 50% at 36% 36%,
      color-mix(in srgb, var(--showcase-accent-2, var(--showcase-accent, var(--color-secondary-green))) 16%, transparent),
      transparent 70%),
    radial-gradient(50% 50% at 64% 64%,
      color-mix(in srgb, var(--showcase-accent, var(--color-secondary-green)) 18%, transparent),
      transparent 72%);
  filter: blur(56px);
}
.showcase__slide:nth-child(2) .showcase-card__glow {
  --showcase-glow-inset: -30% -20% auto auto;
  --showcase-glow-size: 92%;
}
.showcase__slide:nth-child(3) .showcase-card__glow {
  --showcase-glow-inset: auto auto -36% -16%;
  --showcase-glow-size: 88%;
}
.showcase__slide:nth-child(4) .showcase-card__glow {
  --showcase-glow-inset: -24% -26% auto auto;
  --showcase-glow-size: 78%;
}
.showcase__slide:nth-child(5) .showcase-card__glow {
  --showcase-glow-inset: auto -14% -34% auto;
  --showcase-glow-size: 96%;
}
.showcase__slide:nth-child(6) .showcase-card__glow {
  --showcase-glow-inset: -34% auto auto 26%;
  --showcase-glow-size: 86%;
}
.showcase__slide:nth-child(7) .showcase-card__glow {
  --showcase-glow-inset: auto -22% -28% auto;
  --showcase-glow-size: 84%;
}
.showcase__slide:nth-child(8) .showcase-card__glow {
  --showcase-glow-inset: -28% auto auto -14%;
  --showcase-glow-size: 94%;
}
.showcase__slide:nth-child(9) .showcase-card__glow {
  --showcase-glow-inset: -20% -30% auto auto;
  --showcase-glow-size: 80%;
}
.showcase__slide:nth-child(10) .showcase-card__glow {
  --showcase-glow-inset: auto auto -32% 18%;
  --showcase-glow-size: 90%;
}

.showcase-card__media {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
}
.showcase-card__body { position: relative; z-index: 1; min-width: 0; }

.showcase-card__signals {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-1);
}
.showcase-signal {
  display: inline-flex;
  align-items: center;
  gap: 0.55em;
  font-family: var(--font-title);
  font-size: var(--fs-eyebrow);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-ink);
  background: var(--glass);
  border: 1px solid var(--border-ink);
  border-radius: var(--radius-pill);
  padding: 0.34rem var(--space-2) 0.34rem 0.6rem;
}
.showcase-signal::before {
  content: "";
  flex: 0 0 auto;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--showcase-signal, var(--color-secondary-green));
}
.showcase-store {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
}
.showcase-store img { display: block; width: 22px; height: 22px; }

.showcase-card__name {
  font-family: var(--font-title);
  font-weight: 700;
  font-size: clamp(1.5rem, 2.3vw, 2rem);
  line-height: 1.1;
  letter-spacing: -0.024em;
  margin: var(--space-3) 0 0;
  color: var(--color-ink);
}
.showcase-card__line {
  font-size: var(--fs-base);
  line-height: 1.6;
  color: var(--color-ink-60);
  max-width: 46ch;
  margin: var(--space-2) 0 0;
}
.showcase-card__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5em;
  list-style: none;
  margin: var(--space-3) 0 0;
  padding: 0;
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-ink-35);
}
.showcase-card__meta li + li::before { content: "·"; margin-right: 0.5em; color: var(--color-ink-25); }

.showcase-card__metrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(0.75rem, 1.8vw, 1.5rem);
  margin-top: var(--space-4);
  padding-top: var(--space-4);
  border-top: 1px solid var(--border-ink);
}
.showcase-metric { display: flex; flex-direction: column; gap: 0.25rem; }
.showcase-metric__value {
  font-family: var(--font-title);
  font-weight: 700;
  font-size: clamp(1.125rem, 1.9vw, 1.5rem);
  line-height: 1.1;
  letter-spacing: -0.03em;
  color: var(--color-ink);
}
.showcase-metric__label {
  order: -1;
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-ink-35);
}
.showcase-card__more {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  margin-top: var(--space-4);
  font-family: var(--font-title);
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--showcase-accent, var(--color-ink));
}
.showcase-card__more span { transition: transform 0.3s var(--ease); }
.showcase-card:hover .showcase-card__more span { transform: translateX(4px); }

/* Screenshot frames — neutral shadow only, per the design system. */
.showcase-browser {
  width: min(100%, 520px);
  overflow: hidden;
  background: #fff;
  border-radius: var(--radius-md);
  /* Kept shallow on purpose: the viewport clips overflow, so a deep
     shadow would be cut off at the bottom of the card. */
  box-shadow: 0 20px 36px -26px rgba(10, 10, 8, 0.32);
}
.showcase-browser__bar {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 34px;
  padding: 0 14px;
  background: var(--color-ink);
}
.showcase-browser__dot { width: 9px; height: 9px; border-radius: 50%; background: rgba(255, 255, 255, 0.3); }
.showcase-browser__url {
  margin-left: 10px;
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  color: rgba(255, 255, 255, 0.45);
}
.showcase-browser__shot { position: relative; aspect-ratio: 16 / 10; overflow: hidden; }
.showcase-browser__shot img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top left;
}
.showcase-browser__shot--none {
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    linear-gradient(135deg, rgba(10, 10, 8, 0.04), transparent 60%),
    var(--color-surface-muted);
}
.showcase-browser__note {
  margin: 0;
  padding: 0 var(--space-4);
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-ink-35);
  text-align: center;
}
/* Narrower than the phone mock on the portfolio page: every slide in the
   track is as tall as the tallest one, and a 9:19.5 screen at full size
   would set the height for the four browser slides too. */
.showcase-phone {
  width: clamp(150px, 13vw, 190px);
  padding: 9px;
  background: var(--color-ink);
  border-radius: 38px;
  box-shadow: 0 22px 40px -26px rgba(10, 10, 8, 0.5);
}
.showcase-phone__screen {
  position: relative;
  overflow: hidden;
  border-radius: 30px;
  background: var(--color-ink-elevated);
}
.showcase-phone__screen img { display: block; width: 100%; height: auto; }

/* Arrows and dots reuse the voices sizing so both sliders match. */
.showcase__nav {
  position: relative;
  z-index: 91;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  padding: 0;
  color: var(--color-ink);
  background: var(--color-paper);
  border: 1.5px solid var(--border-ink-strong);
  border-radius: 50%;
  cursor: pointer;
  transition:
    transform 0.18s var(--ease),
    border-color 0.18s var(--ease),
    color 0.18s var(--ease),
    background 0.18s var(--ease);
}
.showcase__nav--prev { grid-area: prev; }
.showcase__nav--next { grid-area: next; }
.showcase__nav svg { width: 20px; height: 20px; }
.showcase__nav:hover {
  transform: translateY(-2px);
  color: var(--color-paper);
  background: var(--color-ink);
  border-color: var(--color-ink);
}
.showcase__nav--next:hover { color: var(--color-secondary-lime); }
.showcase__nav:focus-visible { outline: 2px solid var(--color-active); outline-offset: 3px; }
.showcase__dots {
  position: relative;
  z-index: 2;
  grid-area: dots;
  justify-self: center;
  display: flex;
  align-items: center;
  gap: 8px;
}
.showcase__dot {
  width: 8px;
  height: 8px;
  padding: 0;
  border: none;
  border-radius: var(--radius-pill);
  background: var(--color-ink-25);
  cursor: pointer;
  transition: width 0.22s var(--ease), background 0.22s var(--ease);
}
.showcase__dot.is-active { width: 26px; background: var(--color-ink); }
.showcase__dot:focus-visible { outline: 2px solid var(--color-active); outline-offset: 3px; }

/* ---------- Interior pages: hero + prose ---------- */
.page-hero {
  position: relative;
  max-width: var(--container);
  margin: 0 auto;
  padding: calc(var(--space-8) + var(--header-height)) var(--gutter) var(--space-6);
  text-align: center;
}
.page-hero__title {
  font-family: var(--font-title);
  font-weight: 700;
  font-size: var(--fs-h1);
  line-height: 1.05;
  letter-spacing: -0.03em;
  margin-top: var(--space-3);
}
.page-hero__lead {
  font-size: var(--fs-lead);
  line-height: 1.55;
  color: var(--color-ink-70);
  max-width: 680px;
  margin: var(--space-4) auto 0;
}
.page-hero__cta { margin-top: var(--space-6); display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }

.section__lead {
  font-size: var(--fs-lead);
  color: var(--color-ink-60);
  max-width: 720px;
  margin-top: var(--space-3);
  line-height: 1.55;
}
.prose { max-width: 720px; }
.prose p { font-size: var(--fs-md); line-height: 1.6; color: var(--color-ink-60); margin: 0 0 var(--space-3); }
.prose p:last-child { margin-bottom: 0; }

/* Steps */
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-4); margin-top: var(--space-6); }
.step { background: var(--color-surface-light); border-radius: var(--radius-lg); padding: var(--space-5); }
.step__num { font-family: var(--font-title); font-size: var(--fs-sm); font-weight: 700; color: var(--color-secondary-cyan); }
.step__title { font-family: var(--font-title); font-size: var(--fs-h3); font-weight: 700; letter-spacing: -0.01em; margin: var(--space-2) 0 10px; }
.step__body { font-size: 0.9375rem; color: var(--color-ink-60); line-height: 1.55; }

/* Tiers / pricing */
.tiers { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-4); margin-top: var(--space-6); align-items: start; }
.tier { display: flex; flex-direction: column; background: var(--color-paper); border: 1px solid var(--border-ink); border-radius: var(--radius-lg); padding: var(--space-5); }
.tier--featured { background: var(--color-ink); border-color: transparent; color: var(--color-on-dark); }
.tier__name { font-family: var(--font-title); font-size: var(--fs-h3); font-weight: 700; letter-spacing: -0.01em; }
.tier--featured .tier__name { color: var(--color-on-dark); }
.tier__price { font-family: var(--font-title); font-size: 2rem; font-weight: 700; margin: var(--space-2) 0; letter-spacing: -0.02em; }
.tier--featured .tier__price { color: var(--color-secondary-lime); }
.tier__body { font-size: 0.9375rem; color: var(--color-ink-60); line-height: 1.55; }
.tier--featured .tier__body { color: var(--color-on-dark-muted); }
.tier__note { font-size: 0.8125rem; color: var(--color-ink-45); margin-top: var(--space-3); }
.tier--featured .tier__note { color: var(--color-on-dark-muted); }

/* Checklist / negation */
.checklist { display: grid; gap: var(--space-3); margin-top: var(--space-5); max-width: 760px; }
.checklist__item { display: flex; gap: var(--space-3); align-items: flex-start; font-size: var(--fs-md); color: var(--color-ink-60); line-height: 1.5; }
.checklist__mark { flex: 0 0 auto; font-family: var(--font-title); font-weight: 700; color: var(--color-secondary-green); }
.checklist__mark--no { color: var(--color-secondary-magenta); }
.checklist__item strong { color: var(--color-ink); font-weight: 600; }

/* Point list */
.point-list { display: grid; gap: var(--space-3); margin-top: var(--space-5); max-width: 760px; }
.point-list li { position: relative; padding-left: var(--space-4); font-size: var(--fs-md); color: var(--color-ink-60); line-height: 1.55; }
.point-list li::before { content: ""; position: absolute; left: 0; top: 0.6em; width: 6px; height: 6px; border-radius: 50%; background: var(--color-secondary-cyan); }

/* Two-card layouts */
.cards-2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); margin-top: var(--space-6); }
.info-card { display: flex; flex-direction: column; background: var(--color-surface-light); border-radius: var(--radius-xl); padding: var(--space-6); }
.info-card--dark { background: var(--color-ink); color: var(--color-on-dark); }
.info-card__tag { font-family: var(--font-title); font-size: 0.625rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-secondary-magenta); margin-bottom: var(--space-2); }
.info-card--dark .info-card__tag { color: var(--color-secondary-lime); }
.info-card__title { font-family: var(--font-title); font-size: var(--fs-h3); font-weight: 700; letter-spacing: -0.01em; margin-bottom: 12px; }
.info-card--dark .info-card__title { color: var(--color-on-dark); }
.info-card__body { font-size: var(--fs-base); color: var(--color-ink-60); line-height: 1.55; margin-bottom: var(--space-4); }
.info-card--dark .info-card__body { color: var(--color-on-dark-muted); }
.info-card .link-arrow { margin-top: auto; }

/* Callout */
.callout { margin-top: var(--space-6); padding: var(--space-5) var(--space-6); border: 1px solid var(--border-ink); border-radius: var(--radius-lg); background: var(--color-surface-light); }
.callout__title { font-family: var(--font-title); font-size: var(--fs-h3); font-weight: 700; letter-spacing: -0.01em; margin-bottom: 10px; }
.callout__body { font-size: var(--fs-md); color: var(--color-ink-60); line-height: 1.55; }

/* Submit-button icon (shared with the contact form) */
.btn__icon { display: inline-flex; margin-right: var(--space-1); }
.btn__icon svg { width: 18px; height: 18px; }

/* Booking modal */
.booking-modal { position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center; padding: var(--space-4); }
.booking-modal[hidden] { display: none; }
.booking-modal__backdrop { position: absolute; inset: 0; background: rgba(10, 10, 8, 0.55); }
.booking-modal__panel {
  position: relative;
  width: 100%;
  max-width: 900px;
  max-height: 90vh;
  background: #fff;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: 0 24px 60px rgba(10, 10, 8, 0.35);
}
.booking-modal__close {
  position: absolute;
  top: -14px;
  right: -14px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--color-surface-muted);
  background: #fff;
  color: var(--color-ink);
  cursor: pointer;
  box-shadow: 0 6px 16px rgba(10, 10, 8, 0.2);
}
.booking-modal__close svg { width: 20px; height: 20px; }
.booking-modal__frame { display: block; width: 100%; height: 750px; max-height: 90vh; border: 0; }

@media (max-width: 640px) {
  .booking-modal { padding: var(--space-2); }
  .booking-modal__close { top: 6px; right: 6px; }
  .booking-modal__frame { height: 80vh; }
}

/* Section title left-aligned helper spacing */
.section .section__title:not(.section__title--center):not(.section__title--right) { margin-bottom: var(--space-3); }

/* ---------- Legal / document pages ---------- */
.legal { max-width: 760px; margin: 0 auto; }
.legal__updated { font-family: var(--font-mono); font-size: var(--fs-sm); color: var(--color-ink-45); margin-bottom: var(--space-6); }
.legal__block { margin-top: var(--space-6); }
.legal__block:first-of-type { margin-top: 0; }
.legal__block h2 {
  font-family: var(--font-title);
  font-weight: 700;
  font-size: var(--fs-h3);
  letter-spacing: -0.01em;
  line-height: 1.2;
  color: var(--color-ink);
  margin-bottom: var(--space-3);
}
.legal__block h3 {
  font-family: var(--font-title);
  font-weight: 700;
  font-size: var(--fs-lead);
  letter-spacing: -0.01em;
  line-height: 1.3;
  color: var(--color-ink);
  margin: var(--space-4) 0 var(--space-2);
}
.legal__block p { font-size: var(--fs-md); line-height: 1.6; color: var(--color-ink-60); margin: 0 0 var(--space-3); }
.legal__block p:last-child { margin-bottom: 0; }
.legal__block p.legal__emphasis { color: var(--color-ink); font-weight: 600; }
.legal__block ul { margin: 0 0 var(--space-3); }
.legal__block a { color: var(--color-ink); text-decoration: underline; text-underline-offset: 3px; }
.legal__block a:hover { color: var(--color-active); }
.legal__card {
  margin-top: var(--space-4);
  padding: var(--space-5) var(--space-6);
  border: 1px solid var(--border-ink);
  border-radius: var(--radius-lg);
  background: var(--color-surface-light);
}
.legal__card p { font-size: var(--fs-md); color: var(--color-ink-60); margin: 0 0 var(--space-2); }
.legal__card p:last-child { margin-bottom: 0; }
.legal__card p:first-child { color: var(--color-ink); font-weight: 600; }
.legal__card h3 { margin-top: 0; }
.legal__card h3 + p { color: var(--color-ink-60); font-weight: 400; }

/* Security practice cards */
.sec-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-4);
  margin: var(--space-6) 0 var(--space-8);
}
.sec-card {
  border: 1px solid var(--border-ink);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  background: var(--color-surface-light);
}
.sec-card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: var(--radius-md);
  background: var(--color-paper);
  border: 1px solid var(--border-ink);
  color: var(--color-ink);
  margin-bottom: var(--space-3);
}
.sec-card__icon svg { width: var(--icon-md); height: var(--icon-md); }
.sec-card__title { font-family: var(--font-title); font-size: var(--fs-h3); font-weight: 700; letter-spacing: -0.01em; margin-bottom: 10px; color: var(--color-ink); }
.sec-card__body { font-size: 0.9375rem; color: var(--color-ink-60); line-height: 1.55; }
@media (max-width: 640px) { .sec-grid { grid-template-columns: 1fr; } }

/* The team page ships its own component styles in css/team.css. */

/* ---------- Responsive (v2) ---------- */
@media (max-width: 900px) {
  .proof__slots,
  .proof__slots--two,
  .steps,
  .tiers,
  .cards-2,
  .shift__grid { grid-template-columns: 1fr; }

  .voices__carousel {
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-areas:
      "view view view"
      "prev dots next";
    column-gap: var(--space-3);
    row-gap: var(--space-4);
  }
  .voices__viewport { padding: var(--space-5) var(--space-4) var(--space-4); }
  .voices__nav {
    width: 44px;
    height: 44px;
  }
  .voices__nav[data-voice-prev] { justify-self: start; }
  .voices__nav[data-voice-next] { justify-self: end; }

  /* Arrows move under the slide so the card keeps the full width. */
  .showcase {
    grid-template-areas:
      "view view view"
      "prev dots next";
    column-gap: var(--space-3);
    row-gap: var(--space-4);
  }
  .showcase__nav { width: 44px; height: 44px; }
  .showcase__nav--prev { justify-self: start; }
  .showcase__nav--next { justify-self: end; }
  .showcase-card { grid-template-columns: minmax(0, 1fr); }
  /* Stacked: the frame lines up with the copy under it, so it starts at
     the same left edge. The phone stays centred — it is too narrow to
     hang off one side without looking dropped in. */
  .showcase-card__media { order: -1; justify-content: flex-start; }
  .showcase-card__media--phone { justify-content: center; }
  .showcase-browser { width: min(100%, 560px); }
}

@media (max-width: 560px) {
  .page-hero { padding-top: calc(var(--space-6) + var(--header-height)); }

  .showcase-card__metrics { gap: var(--space-2); }
  .showcase-metric__value { font-size: 1.0625rem; }
  .showcase-phone { width: 160px; }
}

/* =============================================================
   DevTools customization panel — right-docked side panel.
   Desktop: sits in the layout (content makes room, no scrim).
   Mobile / tablet: slides in as an overlay. No dark backdrop.
   ============================================================= */
:root { --nc-panel-w: 320px; }

.nc-devtools__fab {
  position: fixed;
  right: var(--space-4);
  bottom: var(--space-4);
  z-index: 90;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  color: var(--color-on-dark);
  background: var(--color-ink);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: var(--radius-pill);
  box-shadow: 0 12px 30px -12px rgba(0, 0, 0, 0.5);
  cursor: pointer;
  transition: transform 0.2s var(--ease), box-shadow 0.2s var(--ease);
}
.nc-devtools__fab:hover {
  transform: translateY(-2px);
  box-shadow: 0 18px 40px -14px rgba(0, 0, 0, 0.55);
}
.nc-devtools.is-open .nc-devtools__fab { color: var(--color-secondary-lime); }

/* Transparent click-catcher only — no dark overlay over the content */
.nc-devtools__backdrop {
  position: fixed;
  inset: 0;
  z-index: 95;
  background: transparent;
  pointer-events: none;
}
.nc-devtools.is-open .nc-devtools__backdrop { pointer-events: auto; }

.nc-devtools__panel {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 96;
  width: min(var(--nc-panel-w), 92vw);
  padding: var(--space-4) var(--space-3) var(--space-3);
  overflow-y: auto;
  background: var(--color-paper);
  border-left: 1px solid var(--border-ink);
  box-shadow: -24px 0 60px -30px rgba(10, 10, 8, 0.4);
  transform: translateX(100%);
  transition: transform 0.28s var(--ease);
}
.nc-devtools.is-open .nc-devtools__panel {
  transform: translateX(0);
}

/* Desktop: dock in the layout — content shifts to make room, no overlay */
@media (min-width: 1024px) {
  body { transition: padding-right 0.28s var(--ease); }
  body:has(.nc-devtools.is-open) { padding-right: var(--nc-panel-w); }
  .nc-devtools.is-open .nc-devtools__fab {
    right: calc(var(--nc-panel-w) + var(--space-4));
  }
  .nc-devtools__backdrop { display: none; }
}

.nc-devtools__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-2);
}
.nc-devtools__title {
  font-family: var(--font-title);
  font-weight: 700;
  font-size: var(--fs-md);
  letter-spacing: -0.01em;
  color: var(--color-ink);
}
.nc-devtools__close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  font-size: 1.25rem;
  line-height: 1;
  color: var(--color-ink-45);
  background: none;
  border: none;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: color 0.15s var(--ease), background 0.15s var(--ease);
}
.nc-devtools__close:hover { color: var(--color-ink); background: var(--color-surface-light); }

.nc-devtools__section { margin-bottom: var(--space-2); }
.nc-devtools__section:last-child { margin-bottom: 0; }
.nc-devtools__label {
  display: block;
  font-family: var(--font-title);
  font-size: var(--fs-eyebrow);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-ink-70);
  margin-bottom: var(--space-1);
}

.nc-devtools__select-wrap { position: relative; }
.nc-devtools__select {
  font: inherit;
  font-size: var(--fs-sm);
  width: 100%;
  padding: var(--space-2) 2.25rem var(--space-2) var(--space-3);
  color: var(--color-ink);
  background: var(--color-paper);
  border: 1px solid var(--border-ink);
  border-radius: var(--radius-sm);
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
}
.nc-devtools__select:focus { outline: none; border-color: var(--color-active); }
.nc-devtools__select-caret {
  position: absolute;
  top: 50%;
  right: var(--space-3);
  width: 12px;
  height: 12px;
  color: var(--color-ink-45);
  transform: translateY(-50%);
  pointer-events: none;
}

.nc-devtools__swatches { display: flex; gap: var(--space-2); }
.nc-devtools__swatch {
  flex: 1;
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  background: var(--color-paper);
  border: 1px solid var(--border-ink);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: border-color 0.15s var(--ease), box-shadow 0.15s var(--ease);
}
.nc-devtools__swatch:hover { border-color: var(--border-ink-strong); }
.nc-devtools__swatch.is-active {
  border-color: var(--color-active);
  box-shadow: inset 0 0 0 1px var(--color-active);
}
.nc-devtools__swatch-chip {
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 1px solid var(--border-ink-strong);
}
.nc-devtools__swatch-label {
  font-family: var(--font-title);
  font-size: 0.8125rem;
  color: var(--color-ink-70);
  line-height: 1.2;
}

/* Segmented control (corner radius) */
.nc-devtools__segments { display: flex; gap: var(--space-2); }
.nc-devtools__segment {
  flex: 1;
  padding: var(--space-2) var(--space-1);
  font-family: var(--font-title);
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--color-ink-70);
  background: var(--color-paper);
  border: 1px solid var(--border-ink);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: border-color 0.15s var(--ease), box-shadow 0.15s var(--ease), color 0.15s var(--ease);
}
.nc-devtools__segment:hover { border-color: var(--border-ink-strong); }
.nc-devtools__segment.is-active {
  color: var(--color-ink);
  border-color: var(--color-active);
  box-shadow: inset 0 0 0 1px var(--color-active);
}

/* Toggle switch (grainy background) */
.nc-devtools__toggle-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}
.nc-devtools__switch {
  position: relative;
  flex: 0 0 auto;
  width: 42px;
  height: 24px;
  padding: 0;
  background: var(--color-surface-muted);
  border: 1px solid var(--border-ink-strong);
  border-radius: var(--radius-pill);
  cursor: pointer;
  transition: background 0.18s var(--ease), border-color 0.18s var(--ease);
}
.nc-devtools__switch::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 18px;
  height: 18px;
  background: var(--color-paper);
  border-radius: 50%;
  box-shadow: 0 1px 2px rgba(10, 10, 8, 0.3);
  transition: transform 0.18s var(--ease);
}
.nc-devtools__switch[aria-checked="true"] {
  background: var(--color-secondary-green);
  border-color: transparent;
}
.nc-devtools__switch[aria-checked="true"]::after { transform: translateX(18px); }

/* Test-page links (open in new tab) */
.nc-devtools__links { display: flex; flex-direction: column; gap: var(--space-1); }
.nc-devtools__link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--border-ink);
  border-radius: var(--radius-sm);
  color: var(--color-ink);
  transition: background 0.15s var(--ease), border-color 0.15s var(--ease);
}
.nc-devtools__link:hover {
  color: var(--color-ink);
  background: var(--color-surface-light);
  border-color: var(--border-ink-strong);
}
.nc-devtools__link-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.nc-devtools__link-title {
  font-family: var(--font-title);
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--color-ink);
  line-height: 1.25;
}
.nc-devtools__link-desc {
  font-size: 0.75rem;
  color: var(--color-ink-45);
  line-height: 1.3;
}
.nc-devtools__link-icon {
  flex: 0 0 auto;
  width: 15px;
  height: 15px;
  color: var(--color-ink-45);
  transition: color 0.15s var(--ease), transform 0.15s var(--ease);
}
.nc-devtools__link:hover .nc-devtools__link-icon {
  color: var(--color-active);
  transform: translate(1px, -1px);
}

/* Grainy background overlay — on by default; hidden when html.nc-grain-off */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 80;
  pointer-events: none;
  opacity: 0.4;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='1' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3CfeComponentTransfer%3E%3CfeFuncA type='linear' slope='0' intercept='1'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 220px 220px;
}
html.nc-grain-off body::before { display: none; }

@media (max-width: 560px) {
  .nc-devtools__fab { right: var(--space-3); bottom: var(--space-3); }
  .nc-devtools__panel { width: 100vw; }
}

/* Background burst animation hidden per request */
.hero__burst { display: none; }

/* =============================================================
   DevStudio pricing calculator
   ============================================================= */
.calc {
  max-width: 1200px;
  margin-inline: auto;
}
.calc__intro { max-width: 44rem; margin-bottom: var(--space-6); }
.calc__intro .section__title { margin-top: var(--space-2); }
.calc__intro .section__lead { margin-top: var(--space-3); }

.calc__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
  gap: var(--space-6);
  align-items: start;
}

.calc__form {
  display: flex;
  flex-direction: column;
  gap: var(--space-7);
  border: 0;
  margin: 0;
  padding: 0;
  min-width: 0;
}
.calc__field { border: 0; margin: 0; padding: 0; min-width: 0; }
.calc__label {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--fs-eyebrow);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-ink-45);
  margin-bottom: var(--space-4);
}
.calc__hint {
  margin-top: var(--space-3);
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  color: var(--color-ink-45);
}

/* Range sliders — green fill up to the thumb, ink track after */
.calc-range {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 6px;
  border-radius: var(--radius-pill);
  background: linear-gradient(
    to right,
    var(--color-secondary-green) var(--pct, 50%),
    var(--color-ink) var(--pct, 50%)
  );
  cursor: pointer;
  outline-offset: 4px;
}
.calc-range::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: none;
  background: var(--color-secondary-green);
  box-shadow: 0 2px 6px -1px rgba(10, 10, 8, 0.35);
  transition: transform 0.15s var(--ease);
}
.calc-range::-moz-range-thumb {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: none;
  background: var(--color-secondary-green);
  box-shadow: 0 2px 6px -1px rgba(10, 10, 8, 0.35);
}
.calc-range::-webkit-slider-thumb:hover { transform: scale(1.08); }
.calc-range:active::-webkit-slider-thumb { transform: scale(0.96); }

/* Stage cards */
.calc-cards {
  margin-top: var(--space-4);
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: var(--space-2);
}
.calc-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  text-align: left;
  padding: var(--space-3);
  background: var(--color-paper);
  border: 1px solid var(--border-ink);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: border-color 0.15s var(--ease), background 0.15s var(--ease), transform 0.15s var(--ease);
}
.calc-card:hover { border-color: var(--border-ink-strong); transform: translateY(-2px); }
.calc-card.is-active {
  border-color: color-mix(in srgb, var(--color-secondary-green) 60%, transparent);
  background: color-mix(in srgb, var(--color-secondary-green) 12%, var(--color-paper));
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--color-secondary-green) 45%, transparent);
}
.calc-card__title {
  font-family: var(--font-title);
  font-weight: 600;
  font-size: var(--fs-md);
  color: var(--color-ink);
}
.calc-card__desc {
  font-size: var(--fs-sm);
  line-height: 1.4;
  color: var(--color-ink-45);
}

/* Quality scale labels */
.calc-scale {
  margin-top: var(--space-3);
  display: flex;
  justify-content: space-between;
  gap: var(--space-2);
}
.calc-scale__tick {
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  color: var(--color-ink-45);
  transition: color 0.15s var(--ease);
}
.calc-scale__tick.is-active { color: var(--color-secondary-green); font-weight: 600; }

/* Segmented toggles */
.calc-toggle {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-3);
}
.calc-toggle__btn {
  padding: var(--space-3) var(--space-4);
  font-family: var(--font-body);
  font-size: var(--fs-base);
  color: var(--color-ink);
  background: var(--color-paper);
  border: 1px solid var(--border-ink);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: border-color 0.15s var(--ease), background 0.15s var(--ease);
}
.calc-toggle__btn:hover { border-color: var(--border-ink-strong); }
.calc-toggle__btn.is-active {
  border-color: color-mix(in srgb, var(--color-secondary-green) 60%, transparent);
  background: color-mix(in srgb, var(--color-secondary-green) 12%, var(--color-paper));
}

/* Summary card */
.calc__summary {
  position: sticky;
  top: calc(var(--header-height) + var(--space-4));
  padding: var(--space-5);
  border: 1px solid color-mix(in srgb, var(--color-secondary-green) 35%, var(--border-ink));
  border-radius: var(--radius-lg);
  background: color-mix(in srgb, var(--color-secondary-green) 4%, var(--color-surface-light));
}
.calc__summary-kicker {
  font-family: var(--font-mono);
  font-size: var(--fs-eyebrow);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-secondary-green);
}
.calc__summary-kicker--ink { color: var(--color-ink-45); }
.calc__range {
  margin-top: var(--space-3);
  font-family: var(--font-title);
  font-weight: 700;
  font-size: clamp(2rem, 3.2vw, 2.75rem);
  letter-spacing: -0.02em;
  line-height: 1.05;
  color: var(--color-ink);
}
.calc__range-dash { margin: 0 0.15em; color: var(--color-ink-45); font-weight: 400; }
.calc__range-unit {
  margin-left: 0.35em;
  font-family: var(--font-body);
  font-size: var(--fs-md);
  font-weight: 500;
  color: var(--color-ink-45);
}
.calc__divider {
  border: 0;
  border-top: 1px solid var(--border-ink);
  margin: var(--space-4) 0;
}
.calc__drivers {
  margin: var(--space-4) 0 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.calc__driver {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
}
.calc__driver[hidden] { display: none; }
.calc__driver dt { color: var(--color-ink-60); }
.calc__driver dd {
  margin: 0;
  font-weight: 600;
  color: var(--color-ink);
  text-align: right;
}
.calc__disclaimer {
  margin-top: var(--space-4);
  font-size: var(--fs-sm);
  line-height: 1.55;
  color: var(--color-ink-45);
}
.calc__cta {
  margin-top: var(--space-5);
  width: 100%;
  padding: var(--space-3) var(--space-4);
  font-size: var(--fs-base);
  font-weight: 600;
  color: #fff;
  background: color-mix(in srgb, var(--color-secondary-green), var(--color-ink) 20%);
  border-radius: var(--radius-md);
}
.calc__cta:hover {
  color: #fff;
  background: color-mix(in srgb, var(--color-secondary-green), var(--color-ink) 30%);
}

@media (max-width: 900px) {
  .calc__grid { grid-template-columns: 1fr; }
  .calc__summary { position: static; }
  .calc-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 480px) {
  .calc-cards { grid-template-columns: 1fr; }
}

/* =============================================================
   Hero — service-offers variant (index landing)
   Centered intro + three service cards + trust bar.
   ============================================================= */
.hero--offers {
  min-height: auto;
  justify-content: flex-start;
  padding-bottom: var(--space-8);
}
.hero--offers .hero__content {
  padding-bottom: 0;
}
.hero--offers .hero__cta {
  justify-content: center;
}

/* Lead + secondary action as one unit under the title */
.hero__deck {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-5);
  max-width: 52rem;
  margin: var(--space-5) auto 0;
}
.hero--offers .hero__lead {
  margin-top: 0;
  max-width: none;
  font-size: var(--fs-lead);
  line-height: 1.5;
  color: var(--color-ink-60);
  text-wrap: balance;
}
.hero__action {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  font-family: var(--font-title);
  font-size: var(--fs-sm);
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--color-ink);
  padding: 0.7rem 1.35rem;
  border: 1px solid var(--border-ink-strong);
  border-radius: var(--radius-pill);
  background: transparent;
  transition:
    transform 0.18s var(--ease),
    background 0.18s var(--ease),
    border-color 0.18s var(--ease),
    color 0.18s var(--ease);
}
.hero__action:hover {
  color: var(--color-ink);
  background: color-mix(in srgb, var(--color-ink) 4%, transparent);
  border-color: var(--color-ink);
  transform: translateY(-1px);
}
.hero__action-arrow {
  display: inline-block;
  transition: transform 0.18s var(--ease);
}
.hero__action:hover .hero__action-arrow {
  transform: translateX(3px);
}

/* Second radial glow (lime, lower-left) to echo the template */
.hero__glow--lime {
  top: auto;
  right: auto;
  bottom: -20%;
  left: -22%;
  width: 60vw;
  height: 60vw;
  background: radial-gradient(
    var(--g-w, 50%) var(--g-h, 50%) at var(--g-x, 50%) var(--g-y, 50%),
    oklch(0.92 0.16 var(--g-h1, 120deg) / 0.4),
    transparent 66%
  );
  /* Different cycle lengths + negative delays so the glows never move in sync */
  animation:
    nc-glow-morph-alt 14s ease-in-out -5s infinite,
    nc-glow-float-alt 21s ease-in-out -9s infinite;
}
/* Magenta (logo) — upper-center, a soft subtle wash between the green washes */
.hero__glow--violet {
  top: -26%;
  left: 52%;
  right: auto;
  bottom: auto;
  width: 44vw;
  height: 44vw;
  background: radial-gradient(
    var(--g-w, 50%) var(--g-h, 50%) at var(--g-x, 50%) var(--g-y, 50%),
    oklch(0.74 0.18 var(--g-h1, 342deg) / 0.28),
    oklch(0.78 0.13 var(--g-h2, 350deg) / 0.12) 46%,
    transparent 64%
  );
  /* Slowest of the three — keeps the magenta a hint, never a statement */
  animation:
    nc-glow-morph-soft 18s ease-in-out -7s infinite,
    nc-glow-float-soft 26s ease-in-out -13s infinite;
}

/* Hero eyebrow reuses .kicker; only layout reset here */
.hero__eyebrow {
  margin: 0;
}
/* Legacy status dot (still used on appstore page) */
.hero__eyebrow-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--color-secondary-green);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--color-secondary-green) 18%, transparent);
  animation: nc-pulse 2.4s var(--ease) infinite;
}
@keyframes nc-pulse {
  0%, 100% { box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-secondary-green) 12%, transparent); }
  50%      { box-shadow: 0 0 0 6px color-mix(in srgb, var(--color-secondary-green) 24%, transparent); }
}

/* The label and the arrow are two flex items, so the space between them in
   the markup collapses. Two page stylesheets used to patch this locally. */
.btn__arrow { margin-left: 0.4em; transition: transform 0.18s var(--ease); }
.btn:hover .btn__arrow { transform: translateX(3px); }

/* Offer cards */
.hero__offers {
  position: relative;
  z-index: 3;
  width: 100%;
  max-width: var(--container);
  margin: var(--space-7) auto 0;
  padding: 0 var(--gutter);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-4);
}
.offer-card {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  min-height: 320px;
  padding: var(--space-5) var(--space-5) var(--space-4);
  background: var(--color-ink);
  color: var(--color-on-dark);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--radius-lg);
  text-decoration: none;
  transition: transform 0.2s var(--ease), box-shadow 0.2s var(--ease), border-color 0.2s var(--ease);
  /* Per-card accent + origin for the abstract background art (overridden below) */
  --card-accent: var(--color-secondary-green);
  --art-x: 100%;
  --art-y: 100%;
}
/* Abstract art layer: soft corner glow + concentric ring lines in the card's accent */
.offer-card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(58% 58% at var(--art-x) var(--art-y),
      color-mix(in srgb, var(--card-accent) 30%, transparent), transparent 60%),
    repeating-radial-gradient(circle at var(--art-x) var(--art-y),
      transparent 0 27px,
      color-mix(in srgb, var(--card-accent) 13%, transparent) 27px 28.5px);
  -webkit-mask: radial-gradient(78% 78% at var(--art-x) var(--art-y), #000 28%, transparent 80%);
  mask: radial-gradient(78% 78% at var(--art-x) var(--art-y), #000 28%, transparent 80%);
  transition: opacity 0.25s var(--ease), transform 0.3s var(--ease);
}
/* Keep card content above the art (flex items honour z-index without positioning) */
.offer-card > * { position: relative; z-index: 1; }
.offer-card:hover::before { transform: scale(1.06); }
.offer-card:hover {
  transform: translateY(-4px);
  color: var(--color-on-dark);
  border-color: color-mix(in srgb, var(--card-accent) 42%, transparent);
  box-shadow: 0 24px 60px -28px rgba(0, 0, 0, 0.55);
}

/* Per-card accent colour + art origin */
.offer-card--build     { --card-accent: var(--color-secondary-violet);  --art-x: 100%; --art-y: 100%; }
.offer-card--audit     { --card-accent: var(--color-secondary-green);   --art-x: 100%; --art-y: 100%; }
.offer-card--transform { --card-accent: var(--color-secondary-cyan);    --art-x: 100%; --art-y: 100%; }
.offer-card--design    {
  --card-accent: #f05b78;
  --card-accent-2: var(--color-secondary-violet);
  --card-accent-3: var(--color-secondary-cyan);
  --art-x: 100%;
  --art-y: 100%;
}
.offer-card--design::before {
  background:
    radial-gradient(62% 62% at 100% 100%,
      color-mix(in srgb, var(--card-accent) 36%, transparent), transparent 62%),
    radial-gradient(48% 52% at 72% 84%,
      color-mix(in srgb, var(--card-accent-2) 24%, transparent), transparent 68%),
    radial-gradient(42% 48% at 96% 58%,
      color-mix(in srgb, var(--card-accent-3) 18%, transparent), transparent 72%),
    repeating-radial-gradient(circle at var(--art-x) var(--art-y),
      transparent 0 27px,
      color-mix(in srgb, var(--card-accent-2) 14%, transparent) 27px 28.5px);
}
.offer-card--launch    { --card-accent: var(--color-secondary-gold);    --art-x: 100%; --art-y: 100%; }
.offer-card--mobile    { --card-accent: var(--color-secondary-cyan);    --art-x: 100%; --art-y: 100%; }
.offer-card--web       { --card-accent: var(--color-secondary-violet);  --art-x: 100%; --art-y: 100%; }
.offer-card--agents    { --card-accent: var(--color-secondary-lime);    --art-x: 100%; --art-y: 100%; }

/* Static (non-link) offer cards: keep the art life, drop the click affordance */
.offer-card--static { cursor: default; }
.offer-card--static:hover { transform: none; box-shadow: none; }

/* Accent glyph in the card's top-left — meaning of the offer */
.offer-card__glyph {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--card-accent);
}
.offer-card__glyph svg {
  width: 28px;
  height: 28px;
}
.offer-card__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}
.offer-card__product {
  display: none;
  font-family: var(--font-title);
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--color-on-dark-muted);
}
.offer-card__title {
  font-family: var(--font-title);
  font-size: var(--fs-h3);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.1;
  margin: var(--space-4) 0 0;
  color: var(--color-on-dark);
}
.offer-card__body {
  font-size: 0.9375rem;
  line-height: 1.55;
  color: var(--color-on-dark-muted);
  margin: var(--space-2) 0 0;
}
.offer-card__foot {
  margin-top: auto;
  padding-top: var(--space-5);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}
.offer-card__audience {
  font-size: var(--fs-sm);
  color: color-mix(in srgb, var(--color-on-dark) 55%, transparent);
}
.offer-card__arrow {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  color: var(--color-on-dark);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 50%;
  transition: transform 0.2s var(--ease), border-color 0.2s var(--ease), color 0.2s var(--ease);
}
.offer-card__arrow svg { width: 18px; height: 18px; }
.offer-card:hover .offer-card__arrow {
  color: var(--card-accent);
  border-color: color-mix(in srgb, var(--card-accent) 45%, transparent);
  transform: translateX(3px);
}

/* Trust bar */
.hero__trust {
  position: relative;
  z-index: 3;
  width: 100%;
  max-width: var(--container);
  margin: var(--space-6) auto 0;
  padding: 0 var(--gutter);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-4);
  font-family: var(--font-title);
  font-size: var(--fs-sm);
  color: var(--color-ink-45);
}
.hero__trust-item {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}
.hero__trust-chip {
  display: inline-flex;
  align-items: center;
  background: var(--color-ink);
  padding: 4px 9px;
  border-radius: var(--radius-sm);
}
.hero__trust-chip img { height: 12px; width: auto; }
.hero__trust-sep {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--color-ink);
}

/* Masthead — eyebrow, title, then lead stacked below */
.hero__masthead {
  position: relative;
  z-index: 3;
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding: calc(var(--space-8) + var(--space-5) + var(--header-height)) var(--gutter) 0;
}
.hero__headline {
  min-width: 0;
  max-width: min(100%, 68rem);
  margin-inline: auto;
  text-align: center;
}
.hero__partner {
  display: none;
  justify-content: center;
  margin-bottom: var(--space-4);
}
.hero--offers .hero__masthead .hero__title {
  margin-top: var(--space-4);
  /* Size so "We make it trustworthy." fits on one line (monospace is wide) */
  font-size: clamp(2.5rem, calc((100vw - 8rem) / 16.5), 4.75rem);
  line-height: 1.05;
  letter-spacing: -0.04em;
}
.hero__title-accent {
  display: block;
  color: var(--color-ink);
  -webkit-text-fill-color: var(--color-ink);
  white-space: nowrap;
}
.hero__masthead .hero__deck {
  align-items: center;
  gap: var(--space-4);
  margin: var(--space-5) auto 0;
  max-width: 44rem;
  padding-bottom: var(--space-1);
}
.hero__masthead .hero__lead { margin: 0; text-align: center; text-wrap: pretty; }
.hero__masthead .hero__deck-cta { display: none; }

/* Bento offers — feature card spans two rows; trust strip fills bottom-right */
.hero__offers--bento {
  grid-template-columns: 1.28fr 0.86fr 0.86fr;
  align-items: stretch;
  gap: var(--space-4);
}
.offer-card--feature {
  grid-row: span 2;
  min-height: 340px;
}
.offer-card--feature .offer-card__title {
  font-size: clamp(1.75rem, 2.4vw, 2.25rem);
}
.offer-card--feature .offer-card__body {
  font-size: var(--fs-md);
  max-width: 34rem;
}

/* Capability chips on the feature card */
.offer-card__chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
  margin-top: var(--space-4);
}
.offer-card__chip {
  padding: 0.5rem 0.85rem;
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  font-family: var(--font-title);
  font-size: var(--fs-sm);
  font-weight: 500;
  color: color-mix(in srgb, var(--color-on-dark) 82%, transparent);
}

/* ===== Platforms section ===== */
.section.platforms {
  padding-top: calc(var(--space-8) + var(--space-5));
  padding-bottom: var(--space-7);
  scroll-margin-top: calc(var(--header-height) + var(--space-3));
}
.platforms__head { max-width: 54rem; margin: 0 auto; }
.platforms__lead {
  margin: var(--space-3) auto 0;
  max-width: 46rem;
  font-size: var(--fs-lead);
  line-height: 1.55;
  color: var(--color-ink-60);
  text-align: center;
  text-wrap: pretty;
}
.platforms__grid {
  margin-top: var(--space-6);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  align-items: start;
  gap: var(--space-4);
}
@media (max-width: 900px) {
  .platforms__grid { grid-template-columns: 1fr; }
}

/* Platforms cards: keep only the accent corner glow (no ring/dot pattern);
   the device illustration below carries the motif */
.platforms__grid .offer-card::before {
  background-color: transparent;
  background-image:
    radial-gradient(58% 58% at var(--art-x) var(--art-y),
      color-mix(in srgb, var(--card-accent) 30%, transparent), transparent 60%);
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-position: 0 0;
}

/* All platform cards share one fixed height so they're always identical;
   the illustration is pinned to the bottom, bleeding off the edge (clipped by
   the card) and sitting behind the text — long copy may overlap it slightly. */
.platforms .offer-card {
  height: 360px;
  min-height: 0;
}
.platforms .offer-card__wire {
  position: absolute;
  right: var(--space-4);
  bottom: 0;
  z-index: 0;                   /* behind the text */
  display: block;
  height: auto;
  min-height: 0;
  margin: 0;
  padding: 0;
  overflow: visible;
  transform: translateY(34%);   /* ~1/3 bleeds past the card edge */
  pointer-events: none;
}
.platforms .offer-card__wire svg {
  width: auto;
  height: 210px;
  max-width: none;
}

/* App-wireframe illustration in the flagship card's lower area */
.offer-card__wire {
  display: flex;
  align-items: flex-end;
  flex: 1 1 auto;
  min-height: 150px;
  margin-top: var(--space-5);
  color: var(--card-accent);
}
.offer-card__wire svg {
  width: 100%;
  max-width: 520px;
  height: auto;
}
/* Frosted plate under the feature-card wireframe so card art rings don't clash with it.
   It sits on the svg, not the flex container, which stretches to fill the card. */
.offer-card--feature .offer-card__wire {
  isolation: isolate;
}
.offer-card--feature .offer-card__wire svg {
  border-radius: 16px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.06);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

.hero__trust--strip {
  grid-column: 1 / -1;
  margin: var(--space-5) 0 0;
  padding: 0;
  justify-content: center;
  column-gap: var(--space-5);
  font-size: var(--fs-md);
  font-weight: 700;
  color: var(--color-ink);
  border: none;
  background: transparent;
}
.hero__trust--strip .hero__trust-chip img { height: 14px; }
.hero__trust--strip .hero__trust-sep {
  width: 6px;
  height: 6px;
  background: var(--color-ink);
}

@media (max-width: 900px) {
  /* Atmosphere: pull glows into the viewport — desktop positions clip away on narrow screens */
  .hero--offers {
    background:
      radial-gradient(120% 70% at 85% 0%, oklch(0.92 0.12 190 / 0.55), transparent 62%),
      radial-gradient(90% 55% at 10% 35%, oklch(0.94 0.14 130 / 0.38), transparent 58%),
      radial-gradient(80% 50% at 70% 18%, oklch(0.86 0.12 342 / 0.16), transparent 55%),
      var(--color-paper);
  }
  .hero--offers .hero__glow {
    top: -8%;
    right: -28%;
    width: 120vw;
    height: 90vw;
    opacity: 1;
    /* Same animated vars as desktop so the drift survives the mobile recolour */
    background: radial-gradient(
      var(--g-w, 50%) var(--g-h, 50%) at var(--g-x, 50%) var(--g-y, 50%),
      oklch(0.9 0.14 var(--g-h1, 168deg) / 0.9),
      oklch(0.9 0.1 var(--g-h2, 190deg) / 0.45) 42%,
      transparent 70%
    );
  }
  .hero--offers .hero__glow--lime {
    top: auto;
    right: auto;
    bottom: 18%;
    left: -35%;
    width: 95vw;
    height: 95vw;
    background: radial-gradient(
      var(--g-w, 50%) var(--g-h, 50%) at var(--g-x, 50%) var(--g-y, 50%),
      oklch(0.93 0.17 var(--g-h1, 120deg) / 0.55),
      transparent 68%
    );
  }
  .hero--offers .hero__glow--violet {
    top: 4%;
    left: 42%;
    width: 70vw;
    height: 70vw;
    background: radial-gradient(
      var(--g-w, 50%) var(--g-h, 50%) at var(--g-x, 50%) var(--g-y, 50%),
      oklch(0.78 0.16 var(--g-h1, 342deg) / 0.32),
      oklch(0.82 0.1 var(--g-h2, 350deg) / 0.12) 48%,
      transparent 66%
    );
  }

  .hero--offers .hero__masthead .hero__title {
    line-height: 1.05;
  }
  .hero__masthead .hero__deck { max-width: none; }
  .hero__masthead .hero__deck-cta { display: inline-flex; }
  .hero__offers--bento { grid-template-columns: 1fr; }
  .offer-card--feature { grid-row: auto; min-height: 0; }
  .hero__trust--strip { grid-column: auto; }
  .hero__offers { grid-template-columns: 1fr; }
  .offer-card { min-height: 0; }
}

@media (max-width: 560px) {
  .hero__masthead {
    padding-top: calc(var(--space-8) + var(--header-height));
  }
  .hero--offers .hero__masthead .hero__title {
    font-size: clamp(2.75rem, 9vw, 3rem);
  }
  .hero__title-accent {
    white-space: normal;
  }
  .offer-card--feature .offer-card__wire {
    display: none;
  }
}

/* Titles use --font-title (Roboto Mono); other mono UI (kickers, buttons, tags) stays JetBrains Mono */
.hero__title,
.section__title,
.page-hero__title,
.hero-door__title,
.path-card__title,
.path__title,
.feature-card__title,
.process__title,
.cta__title,
.info-card__title,
.callout__title,
.step__title,
.tier__name,
.logos__title,
.footer-col__title,
.nav__drop-title {
  font-family: var(--font-title);
}

/* ---------- Section nav (landing page anchors) ---------- */
.section-nav {
  position: fixed;
  right: clamp(1.25rem, 2.5vw, 2.5rem);
  top: 50%;
  transform: translateY(-50%);
  z-index: 90;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.section-nav__dot {
  display: block;
  width: 8px;
  height: 8px;
  padding: 0;
  border: none;
  border-radius: var(--radius-pill);
  background: var(--color-ink-25);
  cursor: pointer;
  transition: height 0.22s var(--ease), background 0.22s var(--ease);
}
.section-nav__dot.is-active {
  height: 26px;
  background: var(--color-ink);
}
.section-nav__dot:focus-visible {
  outline: 2px solid var(--color-active);
  outline-offset: 3px;
}
@media (max-width: 900px) {
  .section-nav { display: none; }
}

/* =============================================================
   Careers page
   ============================================================= */
.careers-intro { max-width: 840px; margin-inline: auto; text-align: center; }
.careers-intro .section__title { margin-bottom: var(--space-4); }
.careers-intro__lead { font-size: var(--fs-lead); line-height: 1.6; color: var(--color-ink-60); }

/* Dark Q&A panel — "Before you apply" */
.qna {
  background: var(--color-ink);
  color: var(--color-on-dark);
  border-radius: var(--radius-xl);
  padding: var(--space-7) var(--space-6);
  margin-top: var(--space-6);
}
.qna__badge {
  display: block;
  text-align: center;
  font-family: var(--font-mono);
  font-size: var(--fs-eyebrow);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-on-dark-muted);
}
.qna__title {
  font-family: var(--font-title);
  font-weight: 700;
  font-size: var(--fs-h2);
  letter-spacing: -0.02em;
  line-height: 1.1;
  text-align: center;
  color: var(--color-on-dark);
  margin: var(--space-3) 0 var(--space-6);
}
.qna__list { display: grid; gap: var(--space-4); max-width: 780px; margin-inline: auto; }
.qna__item {
  display: flex;
  gap: var(--space-4);
}
.qna__num {
  flex: 0 0 auto;
  font-family: var(--font-title);
  font-weight: 700;
  font-size: 1.5rem;
  line-height: 1.25;
  color: rgba(255, 255, 255, 0.35);
}
.qna__q { font-family: var(--font-title); font-weight: 600; font-size: var(--fs-md); color: var(--color-on-dark); margin-bottom: 6px; }
.qna__prompt { font-size: var(--fs-sm); color: var(--color-on-dark-muted); margin-bottom: 6px; }
.qna__strong { font-size: var(--fs-sm); font-style: italic; color: var(--color-on-dark-muted); opacity: 0.85; }
.qna__foot { max-width: 780px; margin: var(--space-5) auto 0; font-size: var(--fs-sm); font-style: italic; color: var(--color-on-dark-muted); text-align: center; }

/* Open role — native <details> accordion */
.role {
  margin-top: var(--space-6);
  background: var(--color-surface-light);
  border: 1px solid var(--border-ink);
  border-radius: var(--radius-xl);
  overflow: hidden;
}
.role__summary {
  display: flex;
  align-items: flex-start;
  gap: var(--space-4);
  padding: var(--space-6);
  cursor: pointer;
  list-style: none;
  background: radial-gradient(ellipse 90% 130% at 0% 0%, var(--color-secondary-cyan-surface), transparent 60%);
  transition: background 0.2s var(--ease);
}
.role__summary::-webkit-details-marker { display: none; }
.role__summary:hover { background: radial-gradient(ellipse 100% 150% at 0% 0%, var(--color-secondary-cyan-surface), transparent 62%); }
.role__headings { flex: 1; min-width: 0; }
.role__title { font-family: var(--font-title); font-weight: 700; font-size: var(--fs-h2); letter-spacing: -0.02em; line-height: 1.1; }
.role__tagline { font-size: var(--fs-md); color: var(--color-ink-60); margin-top: var(--space-2); }
.role__chevron { flex: 0 0 auto; margin-top: 10px; color: var(--color-ink-45); transition: transform 0.25s var(--ease); }
.role__chevron svg { width: 22px; height: 22px; display: block; }
.role[open] .role__chevron { transform: rotate(180deg); }
.role__body { display: grid; gap: var(--space-5); padding: 0 var(--space-6) var(--space-6); }
.role__block-title { font-family: var(--font-title); font-weight: 700; font-size: var(--fs-h3); letter-spacing: -0.01em; margin-bottom: var(--space-2); }
.role__text { font-size: var(--fs-md); color: var(--color-ink-60); line-height: 1.6; }
.role__text + .role__text { margin-top: var(--space-3); }
.role__divider { padding-top: var(--space-5); border-top: 1px solid var(--border-ink); }
.role__divider .role__block-title { margin-bottom: var(--space-3); }
.role-meta { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-4); padding-top: var(--space-5); border-top: 1px solid var(--border-ink); }
.role-meta__label { font-family: var(--font-mono); font-size: var(--fs-eyebrow); letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-ink-45); margin-bottom: 4px; }
.role-meta__value { font-family: var(--font-title); font-weight: 600; font-size: var(--fs-sm); }

/* Apply panel — light */
.apply {
  margin-top: var(--space-6);
  background: var(--color-surface-light);
  border: 1px solid var(--border-ink);
  border-radius: var(--radius-xl);
  padding: var(--space-7) var(--space-6);
}
.apply__badge { display: block; text-align: center; font-family: var(--font-mono); font-size: var(--fs-eyebrow); letter-spacing: 0.14em; text-transform: uppercase; color: var(--color-ink-45); }
.apply__title { text-align: center; margin: var(--space-3) auto var(--space-4); }
.apply__req { max-width: 780px; margin: 0 auto var(--space-5); font-size: var(--fs-md); color: var(--color-ink-60); line-height: 1.6; text-align: center; }
.apply__req strong { color: var(--color-ink); font-weight: 600; }
.apply__group { max-width: 780px; margin-inline: auto; }
.apply__intro { font-size: var(--fs-md); color: var(--color-ink-60); line-height: 1.6; margin-bottom: var(--space-4); }
.apply__list { display: grid; gap: var(--space-3); }
.apply__item { display: flex; gap: var(--space-3); font-size: var(--fs-md); color: var(--color-ink-60); line-height: 1.55; }
.apply__num { flex: 0 0 auto; font-family: var(--font-mono); font-weight: 600; color: var(--color-secondary-cyan); }
.apply__foot { max-width: 780px; margin: var(--space-5) auto 0; font-size: var(--fs-sm); font-style: italic; color: var(--color-ink-45); text-align: center; }

@media (max-width: 900px) {
  .role-meta { grid-template-columns: 1fr; gap: var(--space-3); }
  .role__title { font-size: 1.75rem; }
  .qna, .apply { padding: var(--space-6) var(--space-4); }
  .role__summary { padding: var(--space-5) var(--space-4); }
  .role__body { padding: 0 var(--space-4) var(--space-5); }
}

/* =============================================================
   Contact page
   Paper + glow on the left carries the argument; one ink panel on
   the right carries the action (book a call / send a message).
   Every section below the fold removes a reason not to act:
   routing, real quotes, objections, one last ask.
   ============================================================= */
.ct-hero {
  position: relative;
  overflow-x: clip;
  overflow-clip-margin: 450px;
  padding: calc(var(--space-8) + var(--header-height)) var(--gutter) var(--space-8);
}
.ct-hero__glow {
  position: absolute;
  z-index: 0;
  pointer-events: none;
}
/* Blue, dominant wash, upper right — stays inside the blue family as it
   morphs (210-238deg) so it always reads as blue, never blends toward the
   page's green or purple halves. Box and offset share the same vw value
   (half the box, negative, on both axes) so the gradient's own centre lands
   exactly on the hero's top-right corner. */
.ct-hero__glow--mint {
  top: -36vw;
  right: -36vw;
  width: 72vw;
  height: 72vw;
  background: radial-gradient(
    var(--g-w, 50%) var(--g-h, 50%) at var(--g-x, 50%) var(--g-y, 50%),
    oklch(0.68 0.18 var(--g-h1, 224deg) / 0.31),
    oklch(0.76 0.16 var(--g-h1, 224deg) / 0.14) 44%,
    transparent 70%
  );
  animation:
    ct-glow-morph-mint 6s ease-in-out infinite,
    ct-glow-float-mint 9s ease-in-out infinite;
}
@keyframes ct-glow-morph-mint {
  0%, 100% { --g-h1: 210deg; --g-w: 46%; --g-h: 54%; --g-x: 48%; --g-y: 52%; }
  50%      { --g-h1: 238deg; --g-w: 60%; --g-h: 40%; --g-x: 60%; --g-y: 40%; }
}
@keyframes ct-glow-float-mint {
  0%, 100% { transform: scale(1)    translate3d(0, 0, 0);    filter: saturate(1); }
  50%      { transform: scale(1.22) translate3d(-9%, 7%, 0); filter: saturate(1.1); }
}

/* Green, bottom left — the required left-bottom accent. Stays inside the
   green family (142-165deg) so it always reads as green. Box and offset
   share the same vw value so the gradient's own centre lands exactly on
   the hero's bottom-left corner. */
.ct-hero__glow--lime {
  top: auto;
  right: auto;
  bottom: -26.4vw;
  left: -26.4vw;
  width: 52.8vw;
  height: 52.8vw;
  background: radial-gradient(
    var(--g-w, 50%) var(--g-h, 50%) at var(--g-x, 50%) var(--g-y, 50%),
    oklch(0.8 0.19 var(--g-h1, 155deg) / 0.275),
    transparent 64%
  );
  animation:
    ct-glow-morph-lime 7s ease-in-out -5s infinite,
    ct-glow-float-lime 10s ease-in-out -9s infinite;
}
@keyframes ct-glow-morph-lime {
  0%, 100% { --g-h1: 145deg; --g-w: 46%; --g-h: 46%; --g-x: 54%; --g-y: 46%; }
  50%      { --g-h1: 168deg; --g-w: 56%; --g-h: 36%; --g-x: 42%; --g-y: 58%; }
}
@keyframes ct-glow-float-lime {
  0%, 100% { transform: scale(1.05) translate3d(0, 0, 0);     filter: saturate(1); }
  50%      { transform: scale(0.86) translate3d(11%, -8%, 0); filter: saturate(1.12); }
}

/* Purple, upper centre — the page's third colour, kept in its own family
   (280-302deg) so all three accents stay distinguishable at a glance
   instead of blending into each other. */
.ct-hero__glow--blend {
  top: -10%;
  left: 42%;
  right: auto;
  bottom: auto;
  width: 40vw;
  height: 40vw;
  background: radial-gradient(
    var(--g-w, 50%) var(--g-h, 50%) at var(--g-x, 50%) var(--g-y, 50%),
    oklch(0.72 0.19 var(--g-h1, 292deg) / 0.25),
    transparent 66%
  );
  animation:
    ct-glow-morph-blend 7s ease-in-out -7s infinite,
    ct-glow-float-blend 10s ease-in-out -13s infinite;
}
@keyframes ct-glow-morph-blend {
  0%, 100% { --g-h1: 280deg; --g-w: 48%; --g-h: 48%; --g-x: 50%; --g-y: 50%; }
  50%      { --g-h1: 302deg; --g-w: 58%; --g-h: 38%; --g-x: 40%; --g-y: 60%; }
}
@keyframes ct-glow-float-blend {
  0%, 100% { transform: scale(1)    translate3d(0, 0, 0);     filter: saturate(1);   opacity: 1; }
  50%      { transform: scale(1.26) translate3d(-10%, 6%, 0); filter: saturate(1.08); opacity: 0.7; }
}

/* Mandatory corner-seam accent — centred exactly where the hero ends and
   the next section begins, bottom-left corner. Box size and offset share
   the same vw value (half the box, negative) so the gradient's own centre
   lands on the seam point instead of somewhere inside the box. */
.ct-hero__glow--corner {
  top: auto;
  left: auto;
  bottom: -37vw;
  right: -37vw;
  width: 74vw;
  height: 74vw;
  background: radial-gradient(
    var(--g-w, 50%) var(--g-h, 50%) at var(--g-x, 50%) var(--g-y, 50%),
    oklch(0.72 0.19 var(--g-h1, 292deg) / 0.15),
    transparent 60%
  );
  animation:
    ct-glow-morph-corner 8s ease-in-out -4s infinite,
    ct-glow-float-corner 11s ease-in-out -8s infinite;
}
@keyframes ct-glow-morph-corner {
  0%, 100% { --g-h1: 282deg; --g-w: 46%; --g-h: 46%; --g-x: 50%; --g-y: 50%; }
  50%      { --g-h1: 300deg; --g-w: 55%; --g-h: 37%; --g-x: 40%; --g-y: 60%; }
}
@keyframes ct-glow-float-corner {
  0%, 100% { transform: scale(1)    translate3d(0, 0, 0);    filter: saturate(1); }
  50%      { transform: scale(1.15) translate3d(9%, -6%, 0); filter: saturate(1.05); }
}

.ct-hero__grid {
  position: relative;
  z-index: 1;
  max-width: var(--container);
  margin-inline: auto;
  display: grid;
  grid-template-columns: minmax(0, 1.04fr) minmax(0, 0.96fr);
  column-gap: clamp(2rem, 4.5vw, 5rem);
  row-gap: var(--space-6);
  align-items: start;
}
.ct-hero__intro { max-width: 44rem; }
.ct-hero__panel { justify-self: end; width: 100%; max-width: 640px; }

.ct-title {
  font-family: var(--font-title);
  font-weight: 700;
  font-size: clamp(2.5rem, 4.6vw, 4rem);
  line-height: 1.02;
  letter-spacing: -0.035em;
  margin-top: var(--space-4);
}
.ct-title__accent {
  display: block;
  padding-bottom: 0.06em;
}
.ct-lead {
  font-size: var(--fs-lead);
  line-height: 1.6;
  color: var(--color-ink-60);
  margin-top: var(--space-4);
  max-width: 34rem;
}
.ct-lead strong { color: var(--color-ink); font-weight: 600; }

/* Two quick ways in — stacked cards under the lead */
.ct-options {
  display: grid;
  gap: var(--space-3);
  margin-top: var(--space-5);
}
.ct-option {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  width: 100%;
  text-align: left;
  padding: var(--space-4);
  font: inherit;
  background: var(--color-ink);
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: var(--radius-lg);
  color: var(--color-on-dark);
  cursor: pointer;
  transition: transform 0.2s var(--ease), border-color 0.2s var(--ease), box-shadow 0.2s var(--ease);
}
.ct-option__glow {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(85% 165% at 82% 4%, oklch(0.82 0.14 152 / 0.3), transparent 72%);
  animation: nc-hue 12s ease-in-out infinite alternate;
}
.ct-option:nth-child(2) .ct-option__glow {
  background: radial-gradient(85% 165% at 82% 4%, oklch(0.8 0.13 230 / 0.3), transparent 72%);
  animation-delay: -4s;
}
.ct-option > *:not(.ct-option__glow) { position: relative; z-index: 1; }
.ct-option:hover {
  transform: translateY(-2px);
  color: var(--color-on-dark);
  border-color: rgba(255, 255, 255, 0.2);
  box-shadow: 0 18px 38px -26px rgba(10, 10, 8, 0.55);
}
.ct-option__icon {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, 0.08);
  color: var(--color-on-dark);
}
.ct-option__icon svg { width: 21px; height: 21px; }
.ct-option__body { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.ct-option__title {
  font-family: var(--font-title);
  font-weight: 700;
  font-size: 1.125rem;
  letter-spacing: -0.01em;
}
.ct-option__value { font-size: var(--fs-base); color: var(--color-on-dark-muted); }
.ct-option__meta { font-size: 0.8125rem; color: rgba(255, 255, 255, 0.45); }
.ct-option__arrow {
  flex: 0 0 auto;
  align-self: center;
  margin-left: auto;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.16);
  color: rgba(255, 255, 255, 0.45);
  transition: transform 0.2s var(--ease), border-color 0.2s var(--ease), color 0.2s var(--ease);
}
.ct-option__arrow svg { width: 14px; height: 14px; }
.ct-option:hover .ct-option__arrow {
  transform: translateX(3px);
  border-color: var(--color-active);
  color: var(--color-on-dark);
}

.ct-hero__note {
  margin-top: var(--space-5);
  font-size: var(--fs-base);
  color: var(--color-ink-60);
}
.ct-learn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  margin-top: var(--space-2);
  font-family: var(--font-title);
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--color-ink);
}
.ct-learn:hover { color: var(--color-active); }
.ct-learn__icon { display: inline-flex; color: var(--color-ink-45); }
.ct-learn__icon svg { width: 16px; height: 16px; }
.ct-learn:hover .ct-learn__icon { color: var(--color-active); }

/* ---------- The ink action panel ---------- */
.ct-panel {
  position: relative;
  overflow: hidden;
  color-scheme: dark; /* native controls & scrollbars match the ink surface */
  background: var(--color-ink);
  color: var(--color-on-dark);
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: var(--radius-xl);
  padding: var(--space-5);
  box-shadow: 0 30px 70px -40px rgba(10, 10, 8, 0.55);
}
.ct-panel__glow {
  position: absolute;
  top: -45%;
  right: -25%;
  width: 70%;
  aspect-ratio: 1;
  pointer-events: none;
  background: radial-gradient(50% 50% at 50% 50%, oklch(0.82 0.14 152 / 0.45), transparent 70%);
  animation: nc-hue 12s ease-in-out infinite alternate;
}
.ct-panel__glow--alt {
  position: absolute;
  bottom: -35%;
  left: -20%;
  width: 55%;
  aspect-ratio: 1;
  pointer-events: none;
  background: radial-gradient(50% 50% at 50% 50%, oklch(0.8 0.13 230 / 0.35), transparent 70%);
  animation: nc-hue 12s ease-in-out infinite alternate;
  animation-delay: -5s;
}
.ct-panel > *:not(.ct-panel__glow):not(.ct-panel__glow--alt) { position: relative; z-index: 1; }

.ct-panel__title {
  font-family: var(--font-title);
  font-weight: 700;
  font-size: 1.75rem;
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: #fff;
}
.ct-panel__lead {
  font-size: var(--fs-base);
  line-height: 1.6;
  color: var(--color-on-dark-muted);
  margin-top: var(--space-2);
}
.ct-panel .btn--block { width: 100%; }

/* ---------- Form on the ink panel ---------- */
.form { display: grid; gap: var(--space-4); margin-top: var(--space-5); }
.form__row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); }
.form__field { display: flex; flex-direction: column; gap: 7px; }
.form__group { border: 0; padding: 0; margin: 0; }
.form__group > .form__label { display: block; padding: 0; margin-bottom: 7px; }
.form__label {
  font-family: var(--font-title);
  font-size: 0.8125rem;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.72);
}
.form__req { color: var(--color-secondary-lime); }
.form__hint { font-size: 0.75rem; color: rgba(255, 255, 255, 0.52); }
.form__input, .form__textarea {
  font: inherit;
  font-size: var(--fs-base);
  width: 100%;
  padding: 0.75rem var(--space-3);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, 0.05);
  color: #fff;
  transition: border-color 0.18s var(--ease), background 0.18s var(--ease);
}
.form__input::placeholder, .form__textarea::placeholder { color: rgba(255, 255, 255, 0.45); }
.form__input:hover, .form__textarea:hover { border-color: rgba(255, 255, 255, 0.28); }
.form__input:focus, .form__textarea:focus {
  outline: none;
  border-color: var(--color-active);
  background: rgba(255, 255, 255, 0.08);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-active) 22%, transparent);
}
/* Browser autofill would otherwise paint a light box under white text */
.form__input:-webkit-autofill,
.form__input:-webkit-autofill:hover,
.form__input:-webkit-autofill:focus {
  -webkit-text-fill-color: #fff;
  -webkit-box-shadow: 0 0 0 100px var(--color-ink-elevated) inset;
  caret-color: #fff;
}
.form__textarea { min-height: 108px; resize: vertical; }

/* Timeline as pill radios — one tap instead of a select menu */
.form__chips { display: flex; flex-wrap: wrap; gap: 7px; }
.form__chip { position: relative; display: inline-flex; }
.form__chip input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}
.form__chip span {
  font-family: var(--font-title);
  font-size: 0.8125rem;
  padding: 0.4375rem 0.875rem;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: var(--radius-pill);
  color: rgba(255, 255, 255, 0.72);
  cursor: pointer;
  transition: border-color 0.18s var(--ease), color 0.18s var(--ease), background 0.18s var(--ease);
}
.form__chip:hover span { border-color: rgba(255, 255, 255, 0.34); color: #fff; }
.form__chip input:checked + span {
  background: var(--color-on-dark);
  border-color: transparent;
  color: var(--color-ink);
  font-weight: 500;
}
.form__chip input:focus-visible + span {
  outline: 2px solid var(--color-active);
  outline-offset: 2px;
}

.form__note { font-size: 0.8125rem; color: rgba(255, 255, 255, 0.5); text-align: center; }
.form__status {
  font-family: var(--font-title);
  font-size: var(--fs-sm);
  font-weight: 500;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
}
.form__status--ok {
  color: var(--color-secondary-green);
  background: color-mix(in srgb, var(--color-secondary-green) 14%, transparent);
}
.form__status--error {
  color: #ff9ee6;
  background: color-mix(in srgb, var(--color-secondary-magenta) 16%, transparent);
}

/* ---------- Contact page responsive ---------- */
@media (max-width: 1180px) {
  .ct-hero__grid {
    grid-template-columns: minmax(0, 1fr);
    row-gap: var(--space-6);
    justify-items: center;
  }
  .ct-hero__intro { width: 100%; max-width: 52rem; }
  .ct-hero__panel { justify-self: center; max-width: 44rem; }
}
@media (max-width: 640px) {
  .ct-hero { padding: calc(var(--space-7) + var(--header-height)) var(--gutter) var(--space-7); }
  .ct-panel { padding: var(--space-4) var(--space-3); border-radius: var(--radius-lg); }
  .ct-panel__title { font-size: 1.5rem; }
  .ct-option { padding: var(--space-3); border-radius: var(--radius-md); }
  .ct-option__arrow { display: none; }
  .form__row { grid-template-columns: 1fr; }
}

/* ---------- Cookie consent banner ---------- */
.cookie-banner {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1100;
  padding: var(--space-3);
  display: flex;
  justify-content: center;
}
.cookie-banner[hidden] { display: none; }
.cookie-banner__panel {
  width: 100%;
  max-width: 640px;
  background: var(--color-paper);
  border: 1px solid var(--border-ink-strong);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
  box-shadow: 0 24px 60px rgba(10, 10, 8, 0.18);
}
.cookie-banner__title {
  font-family: var(--font-title);
  font-size: var(--fs-base);
  font-weight: 600;
  color: var(--color-ink);
  margin: 0 0 var(--space-1);
}
.cookie-banner__text {
  font-size: var(--fs-sm);
  color: var(--color-ink-60);
  line-height: 1.55;
  margin: 0;
}
.cookie-banner__text a { color: var(--color-ink); text-decoration: none; font-weight: 500; }
.cookie-banner__text a:hover { opacity: 0.75; }
.cookie-banner__options {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-top: var(--space-3);
  padding-top: var(--space-3);
  border-top: 1px solid var(--border-ink);
}
.cookie-banner__options[hidden] { display: none; }
.cookie-banner__toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  font-size: var(--fs-sm);
  color: var(--color-ink);
}
.cookie-banner__toggle span { font-weight: 500; }
.cookie-banner__toggle input[type="checkbox"] { width: 18px; height: 18px; accent-color: var(--color-ink); }
.cookie-banner__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-4);
}
.cookie-banner__actions .btn { flex: 1 1 auto; }

@media (max-width: 640px) {
  .cookie-banner__panel { padding: var(--space-3); }
  .cookie-banner__actions { flex-direction: column; }
  .cookie-banner__actions .btn { width: 100%; }
}