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

/* ---------- Title face ----------
   Afacad is self-hosted from assets/fonts/. Its x-height is 0.417em
   (Instrument Sans: 0.51em), so it reads a size smaller than the body
   face at the same font-size. The menu and buttons set their own sizes
   to compensate; titles use the heading tokens as written.
   The shipped metrics give a 1.33em line box (ascent 1.0, descent 0.33)
   around glyphs that span 0.67 to -0.22. The overrides fit the box to
   the glyphs, so tight title line-heights stop overlapping and text
   sits centred in buttons and pills. */
@font-face {
  font-family: 'Afacad';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  ascent-override: 86%;
  descent-override: 24%;
  line-gap-override: 0%;
  src: url('../assets/fonts/afacad-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Afacad';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  ascent-override: 86%;
  descent-override: 24%;
  line-gap-override: 0%;
  src: url('../assets/fonts/afacad-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ---------- Body and mono faces ----------
   Instrument Sans (body) and JetBrains Mono (mono UI) are self-hosted
   from assets/fonts/, like Afacad: variable files, weights 400 to 700,
   latin and latin-ext subsets. The unicode-range values come from the
   Google Fonts CSS. Do not load them from Google Fonts again: the build
   stops when a page links to Google Fonts. */
@font-face {
  font-family: 'Instrument Sans';
  font-style: normal;
  font-weight: 400 700;
  font-stretch: 100%;
  font-display: swap;
  src: url('../assets/fonts/instrument-sans-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Instrument Sans';
  font-style: normal;
  font-weight: 400 700;
  font-stretch: 100%;
  font-display: swap;
  src: url('../assets/fonts/instrument-sans-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('../assets/fonts/jetbrains-mono-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('../assets/fonts/jetbrains-mono-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ---------- Design tokens ---------- */
:root {
  /* Brand / neutrals */
  --color-paper: #F1F2F4;          /* page background */

  /* Card surfaces are DERIVED from --color-paper, never hardcoded — this
     keeps every surface tonally consistent with the page background
     instead of floating a fixed sand color on top of it. */
  --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: #111316;            /* primary text / titles / nav */
  --color-ink-elevated: #1B1D21;   /* raised chips on dark */
  --color-ink-70: #22252A;         /* kickers / secondary chrome */
  --color-ink-60: #3D4046;         /* body / lead */
  --color-ink-45: #5B5F66;         /* meta / trust */
  --color-ink-35: #6F737A;         /* faint text */
  --color-ink-25: #8C9097;         /* 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: #049D7B; /* links, focus, open/active UI. Per-page values below, from docs/_as/colors.html */

  /* Desktop nav items: faint grey chip on hover/open, stronger grey chip
     when a direct page link is the current page. */
  --nav-item-radius: var(--radius-pill);
  --nav-item-fs: 1.125rem;          /* desktop menu items and dropdown page titles */
  --nav-item-fg: var(--color-ink);
  --nav-item-hover-bg: color-mix(in srgb, var(--color-ink) 3%, transparent);
  --nav-item-active-bg: color-mix(in srgb, var(--color-ink) 6%, transparent);
  --nav-item-active-fg: var(--color-ink);
  /* Same roles, inverted for the header sitting over a dark hero */
  --nav-item-fg-on-dark: #fff;
  --nav-item-hover-bg-on-dark: rgba(255, 255, 255, 0.05);
  --nav-item-active-bg-on-dark: rgba(255, 255, 255, 0.10);
  --nav-item-active-fg-on-dark: #fff;

  /* 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: 'Instrument Sans', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, monospace;
  --font-title: 'Afacad', system-ui, sans-serif;
  --font-tag: var(--font-title); /* uppercase card tags; was mono */

  --fs-eyebrow: 1.0625rem; /* 17px, uppercase section eyebrows / kickers (FAQ, Testimonials ...); 14px on phones */
  --fs-label: 0.8125rem;   /* 13px, every other uppercase label in page content: tags, metric and result labels, card kickers */
  --fs-tag: 0.9375rem;     /* 15px, uppercase tag/kind labels on content cards ("Document", "Report"), set in --font-tag */
  --fs-label-xs: 0.6875rem; /* 11px floor, uppercase labels inside diagrams, mockups and illustrations */
  --fs-sm: 0.9375rem;      /* 15px */
  --fs-base: 0.9375rem;    /* 15px */
  --fs-md: 1rem;           /* 16px */
  --fs-lead: 1.125rem;     /* 18px */
  --fs-h3: 1.5rem;         /* 24px */
  --fs-h2: clamp(2.25rem, 4vw, 3rem);  /* fluid 36 → 48px, section titles */
  --fs-step: 1.375rem;     /* 22px, process step titles (Map, Scope, Build) */
  --fs-faq: 1.375rem;      /* 22px, FAQ questions (same step as card and process-step titles) */
  --fs-card-title: 1.375rem; /* 22px, title inside a content card (drops to 20px on phones) */
  --fs-card-link: 1.125rem; /* 18px, arrow link / "go" line at the foot of a card ("Read the case study") */
  --fs-h1: clamp(2.25rem, 5.5vw, 3.75rem);  /* fluid 36 → 60px */
  --fs-h1-mobile: clamp(2.5rem, 12.8vw, 3.25rem); /* page title on phones: 48px at 375, 40 → 52px */

  /* 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);

  /* Case-study short names. Composed pages no longer wrap #top, which
     used to set these. Without the aliases, `background: var(--ink)`
     is invalid and paints transparent. */
  --paper: var(--color-paper);
  --surface-light: var(--color-surface-light);
  --surface-muted: var(--color-surface-muted);
  --ink: var(--color-ink);
  --ink-elevated: var(--color-ink-elevated);
  --ink-70: var(--color-ink-70);
  --ink-60: var(--color-ink-60);
  --ink-45: var(--color-ink-45);
  --ink-35: var(--color-ink-35);
  --ink-25: var(--color-ink-25);
  --on-dark: var(--color-on-dark);
  --on-dark-muted: var(--color-on-dark-muted);
  --ff-title: var(--font-title);
  --ff-body: var(--font-body);
  --ff-mono: var(--font-mono);
}

/* ---------- Per-page link accent ----------
   --color-active drives link hover, focus rings, open nav items, FAQ icons
   and focused form fields. Each page sets its own, keyed on the
   data-page attribute build.js writes on <body> (the page slug), so the
   header and footer follow the page too. Source of truth is the "Link
   color" column in docs/_as/colors.html: change a value there and here in
   the same edit. Pages not listed use the :root default (Home's mint). */
body[data-page="portfolio"]                { --color-active: #DC47BD; }
body[data-page="ai-agent-development"]     { --color-active: #4366E8; }
body[data-page="ai-transformation"],
body[data-page="devstudio"],
body[data-page="resources"]                { --color-active: #2686CB; }
body[data-page="build-integrate"]          { --color-active: #FF4900; }
body[data-page="careers"]                  { --color-active: #D02BB2; }
body[data-page="coherence-security"]       { --color-active: #2B9E60; }
body[data-page="case-drouin-ti360"]        { --color-active: #2F55F5; }
body[data-page="case-fitcook-mobile"]      { --color-active: #E52424; }
body[data-page="lovable-appstore"]         { --color-active: #7B63F2; }
body[data-page="case-olab-plus"],
body[data-page="case-shiploose"]           { --color-active: #C47727; }
body[data-page="case-reactview-appstore"],
body[data-page="case-reactview-platform"]  { --color-active: #8B5CF6; }
body[data-page="case-relance-metabolique"] { --color-active: #D76E28; }
body[data-page="residence-ia"]             { --color-active: #2563EB; }
body[data-page="case-safari-condo"]        { --color-active: #EA580C; }
body[data-page="team"]                     { --color-active: #994FF3; }
body[data-page="ux-ui-services"]           { --color-active: #F0324B; }
body[data-page="why-neo-carbone"]          { --color-active: #EA5226; }
body[data-page="case-wildlife-lookout"]    { --color-active: #4B9D26; }


/* ---------- 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;
  /* The header is fixed and always painted above the page, so on a page
     short enough that the footer reaches the very bottom of scroll, the
     header would otherwise sit on top of the footer's own top rows. This
     buffer guarantees the footer can always scroll fully clear of it —
     it doesn't need the header's full height, just enough margin that the
     footer's own top edge (its border-top rule) clears it. */
  padding-bottom: var(--space-6);
}

h1, h2, h3, p { margin: 0; }
em, 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;
  /* Safety net: every hero on the site carries this class, and several
     page heroes position an oversized ambient glow (60-100vw, or a fixed
     ~600px circle) with no overflow containment of their own. On mobile/
     tablet that glow genuinely widens the page's scrollable area and the
     whole site can be dragged sideways. X-only so a hero that deliberately
     bleeds its glow past the BOTTOM edge (documented in ux-ui.css) is
     unaffected — only the horizontal leak is closed. */
  overflow-x: clip;
}
.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,
.ag-wrap, .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. */
.ag-section, .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.01;
}
.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,
.ag-eyebrow, .ait-eyebrow, .bi-eyebrow, .cs-eyebrow, .ds-eyebrow, .dr-eyebrow,
.fc-eyebrow, .ol-eyebrow, .res-eyebrow, .rm-eyebrow, .rv-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,
.ag-eyebrow--bright, .ait-eyebrow--bright, .bi-eyebrow--bright, .cs-eyebrow--bright,
.ds-eyebrow--bright, .res-eyebrow--bright, .uxp-eyebrow--bright,
.wnc-eyebrow--bright,
.dr-eyebrow--dark, .fc-eyebrow--dark, .ol-eyebrow--dark, .rm-eyebrow--dark,
.rv-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);
}

/* ---------- FAQ accordion icon ----------
   One icon for every FAQ accordion on the site: a big plus built from two
   full-size bars, tinted with the page's own accent color, that loses its
   vertical bar on open. Never a circle-and-glyph badge (devstudio's old
   treatment) and never a plain currentColor icon that only picks up color
   on hover — the plus is colored at rest. A page sets only `color` on its
   own `__icon` class (its accent); it must not redeclare size or the bar
   geometry below, those load after this file and would silently win. */
.ag-faq__icon, .ait-faq__icon, .bi-faq__icon, .cs-faq__icon, .ds-faq__icon,
.la-faq__icon, .res-faq__icon, .uxp-faq__icon {
  flex: 0 0 auto;
  position: relative;
  width: 16px;
  height: 16px;
}
.ag-faq__icon::before, .ag-faq__icon::after,
.ait-faq__icon::before, .ait-faq__icon::after,
.bi-faq__icon::before, .bi-faq__icon::after,
.cs-faq__icon::before, .cs-faq__icon::after,
.ds-faq__icon::before, .ds-faq__icon::after,
.la-faq__icon::before, .la-faq__icon::after,
.res-faq__icon::before, .res-faq__icon::after,
.uxp-faq__icon::before, .uxp-faq__icon::after {
  content: "";
  position: absolute;
  background: currentColor;
  border-radius: 1px;
  transition: transform 0.25s var(--ease), opacity 0.25s var(--ease);
}
.ag-faq__icon::before, .ait-faq__icon::before, .bi-faq__icon::before, .cs-faq__icon::before,
.ds-faq__icon::before, .la-faq__icon::before, .res-faq__icon::before,
.uxp-faq__icon::before {
  top: 50%; left: 0; width: 100%; height: 1.5px; transform: translateY(-50%);
}
.ag-faq__icon::after, .ait-faq__icon::after, .bi-faq__icon::after, .cs-faq__icon::after,
.ds-faq__icon::after, .la-faq__icon::after, .res-faq__icon::after,
.uxp-faq__icon::after {
  left: 50%; top: 0; width: 1.5px; height: 100%; transform: translateX(-50%);
}
.ag-faq__item[open] .ag-faq__icon::after,
.ait-faq__item[open] .ait-faq__icon::after,
.bi-faq__item[open] .bi-faq__icon::after,
.cs-faq__item[open] .cs-faq__icon::after,
.ds-faq__item[open] .ds-faq__icon::after,
.la-faq__item[open] .la-faq__icon::after,
.res-faq__item[open] .res-faq__icon::after,
.uxp-faq__item[open] .uxp-faq__icon::after {
  transform: translateX(-50%) scaleY(0);
  opacity: 0;
}

/* ---------- 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: 1.125rem;
  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: 1.25rem; 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-card-link);
  font-weight: 600;
  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;
  /* Brand and actions size to their content; the links center in what is
     left. A 1fr | auto | 1fr split let the wider actions column (FR) slide
     under the links. */
  grid-template-columns: auto minmax(0, 1fr) auto;
  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;
  /* The global img max-width: 100% squashed the logo horizontally when the
     brand column got narrow. The ratio stays locked at every size. */
  max-width: none;
  flex-shrink: 0;
  aspect-ratio: 1659 / 366;
}
.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: 1.0625rem;
  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(--nav-item-fg);
}
.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);
}
.nav__actions .btn {
  white-space: nowrap;
  flex-shrink: 0;
}

.lang-switch { position: relative; }
.lang-switch .nav__trigger {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  width: auto;
  padding: 0;
  justify-content: flex-start;
  white-space: nowrap;
  font-family: var(--font-title);
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--color-ink);
}
.lang-switch.is-open > .nav__trigger { color: var(--nav-item-fg); }
.lang-switch.is-open .nav__chevron { transform: rotate(180deg); }
.lang-switch__current {
  font-family: var(--font-title);
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--color-ink);
}
.lang-switch__dropdown {
  position: absolute;
  top: 100%;
  right: 0;
  transform: translateY(-6px);
  min-width: 140px;
  margin-top: 0.6rem;
  padding: 0.375rem;
  display: flex;
  flex-direction: column;
  gap: 2px;
  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;
  z-index: 20;
  transition: opacity 0.18s var(--ease), transform 0.18s var(--ease), visibility 0.18s;
}
.lang-switch.is-open > .lang-switch__dropdown,
.lang-switch:focus-within > .lang-switch__dropdown {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0);
}
/* Closed by a second click: hide even while the trigger keeps focus */
.lang-switch.is-dismissed:not(.is-open) > .lang-switch__dropdown {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
.lang-switch__option {
  font-family: var(--font-title);
  font-size: 1rem;
  color: var(--color-ink-45);
  font-weight: 600;
}
.lang-switch__option:hover { background: var(--nav-item-hover-bg); color: var(--nav-item-fg); }
.lang-switch__option[aria-current="page"],
.lang-switch__option[aria-current="page"]:hover {
  background: var(--nav-item-active-bg);
  color: var(--nav-item-active-fg);
  font-weight: 700;
}

.nav__toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  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: 0.95;
  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: 1.125rem;
  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__rank {
  display: block;
  font-family: var(--font-title);
  font-size: var(--fs-sm);
  font-weight: 700;
  color: #fff;
}
a.partner-badge,
a.hero__trust-chip {
  color: inherit;
  text-decoration: none;
}
a.partner-badge:hover,
a.hero__trust-chip:hover,
a.partner-badge:focus-visible,
a.hero__trust-chip:focus-visible {
  color: inherit;
  opacity: 0.88;
}

/* ---------- 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: var(--fs-h2);
  line-height: 1.15;
}
.logos__group {
  max-width: 1200px;
  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: 100%;
  max-width: 100%;
  position: relative;
  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 160s 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);
}
/* Client logos keep their brand colors in the strip, not just on hover. */
.logos__item--color img {
  filter: none;
  opacity: 0.85;
}
.logos__item--color:hover img {
  opacity: 1;
}
.logos__more {
  margin: var(--space-3) 0 0;
  font-family: var(--font-title);
  font-size: var(--fs-card-link);
  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) {
  :root { --fs-card-title: 1.25rem; --fs-eyebrow: 0.875rem; } /* eyebrow 17 → 14px on phones */
  .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 {
    -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 hairline (::before) is inset to the text column; the hover tile
   (::after) is inset vertically so its rounded corners never touch a line.
   The list is pulled out by the row's own padding so the row text still
   lines up with the title above it. */
.path__services {
  margin-top: var(--space-5);
}
.path__service a {
  position: relative;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
  margin-inline: calc(var(--space-2) * -1);
  padding: var(--space-3) var(--space-2);
  isolation: isolate;
  color: var(--color-on-dark);
  transition: color 0.18s var(--ease);
}
/* Divider: inset to the text column, so it is shorter than the hover tile. */
.path__service a::before {
  content: '';
  position: absolute;
  top: 0;
  left: var(--space-2);
  right: var(--space-2);
  height: 1px;
  background: rgba(255, 255, 255, 0.14);
}
/* Hover tile: inset from both dividers so its rounded corners never meet a line. */
.path__service a::after {
  content: '';
  position: absolute;
  inset: 2px 0;
  z-index: -1;
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, 0.07);
  opacity: 0;
  transition: opacity 0.18s var(--ease);
}
.path__service a:hover { color: var(--color-active); }
.path__service a:hover::after { opacity: 1; }
.path__service-name {
  font-family: var(--font-title);
  font-size: var(--fs-lead);
  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-tag);
  font-size: var(--fs-tag);
  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-on-dark);
  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__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-7) 0;
  margin: 0;
  font-family: var(--font-title);
  font-weight: 700;
  font-size: clamp(1.5rem, 2.4vw, 2.25rem);
  line-height: 1.06;
  letter-spacing: -0.02em;
  text-align: center;
  text-wrap: balance;
  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__meta {
  margin: 0;
  padding: var(--space-5) 0 var(--space-6);
  border-top: 1px solid var(--border-ink);
  display: flex;
  flex-direction: column-reverse;
  align-items: center;
  gap: var(--space-4);
}
@media (min-width: 900px) {
  .site-footer__meta {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }
}
.site-footer__trust {
  margin: 0;
  display: flex;
  /* Baseline, not center: the wordmark's bottom edge is its baseline, so
     it sits on the same line as the "Official partner" text. */
  align-items: baseline;
  justify-content: center;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-1);
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  color: var(--color-ink-45);
  text-align: center;
}
.site-footer__trust-brand {
  display: none;
  align-self: center;
  align-items: center;
  gap: var(--space-2);
}
.site-footer__trust-mark {
  display: block;
  height: 32px;
  width: auto;
  flex-shrink: 0;
}
.site-footer__trust-link {
  display: inline-flex;
  align-items: center;
  color: inherit;
}
.site-footer__trust-link:hover .site-footer__trust-logo,
.site-footer__trust-link:focus-visible .site-footer__trust-logo {
  opacity: 1;
}
.site-footer__trust-link:focus-visible {
  outline: 2px solid var(--color-active);
  outline-offset: 4px;
  border-radius: var(--radius-sm);
}
.site-footer__trust-logo {
  display: block;
  height: 14px;
  width: auto;
  flex-shrink: 0;
  opacity: 0.85;
  transition: opacity 0.2s var(--ease);
  /* The wordmark's bottom edge sits a hair above the text baseline, so
     drop it slightly to line up with "Official partner." */
  transform: translateY(1.5px);
}
.site-footer__trust p {
  margin: 0;
  font-weight: 400;
  color: var(--color-ink);
}
.site-footer__trust p strong {
  font-weight: 700;
}
/* Extra room after each sentence on desktop, where all three sit on one line. */
@media (min-width: 701px) {
  .site-footer__trust p strong,
  .site-footer__trust-part:not(:last-child) { margin-right: var(--space-2); }
}
.site-footer__nav,
.site-footer__nav-col { display: contents; }
/* Desktop order must stay Product, Services, Company, Legal even though
   the markup groups Product+Company and Services+Legal together so the
   mobile columns below can stack independently without a shared row. */
.site-footer__nav-col:nth-child(1) .footer-col:nth-child(1) { order: 1; }
.site-footer__nav-col:nth-child(2) .footer-col:nth-child(1) { order: 2; }
.site-footer__nav-col:nth-child(1) .footer-col:nth-child(2) { order: 3; }
.site-footer__nav-col:nth-child(2) .footer-col:nth-child(2) { order: 4; }
.footer-col { display: flex; flex-direction: column; gap: 10px; }
/* Footer links share the header's hover chip: grey pill around the text,
   ink text, no accent color. Negative margins cancel the padding so the
   text stays aligned with the column title and the row rhythm is unchanged. */
.footer-col a {
  align-self: flex-start;
  padding: 0.25rem 0.6rem;
  margin: -0.25rem -0.6rem;
  border-radius: var(--nav-item-radius);
  font-size: var(--fs-sm);
  color: var(--color-ink-60);
  transition: background 0.15s var(--ease), color 0.15s var(--ease);
}
.footer-col a:hover {
  background: var(--nav-item-hover-bg);
  color: var(--nav-item-fg);
}
.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;
  display: flex;
  align-items: center;
  font-family: var(--font-title);
  font-size: var(--fs-sm);
  color: var(--color-ink);
}

/* ---------- 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;
  }
  /* Scoped to .site-header — .brand is reused unscoped on the footer's
     logo span, and stamping that with position:relative + z-index:110
     promotes it to the root stacking context, above the fixed header
     (z-index:100) and the mobile nav overlay, wherever it sits on screen. */
  .site-header .brand {
    grid-column: auto;
    justify-self: auto;
    margin-inline-end: auto;
    flex-shrink: 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.5625rem;
    font-weight: 600;
    letter-spacing: -0.02em;
  }
  .nav__links > li {
    border-bottom: 1px solid var(--border-ink);
  }
  /* .nav__links ancestor bumps specificity above the shared, unconditional
     button-reset .nav__trigger { padding: 0 } below — without it that rule
     wins the tie on source order and every trigger row collapses to the
     text's own line-height, shorter than the plain <a> rows next to it.
     Scoped to .nav__links (not .nav__menu) so it doesn't reach the
     lang-switch trigger sitting in .nav__menu-meta. */
  .nav__links > li > a,
  .nav__links .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__links .nav__item--has-menu { width: 100%; }
  .nav__links .nav__trigger { width: 100%; }
  .nav__chevron {
    width: 0.9em;
    height: 0.9em;
    opacity: 0.45;
  }
  /* Open/hover state reads through the chevron, not a colored label —
     avoids low-contrast green-on-paper text at heading size, and avoids a
     hover-locked green label on touch browsers that keep :hover after tap.
     (Extra .nav__menu ancestor bumps specificity above the shared
     .nav__trigger:hover / .nav__item.is-open > .nav__trigger rules below,
     which would otherwise win ties on source order alone.) */
  .nav__menu .nav__trigger:hover,
  .nav__menu .nav__item.is-open > .nav__trigger { color: var(--color-ink); }
  .nav__trigger:hover .nav__chevron,
  .nav__item.is-open > .nav__trigger .nav__chevron {
    color: var(--nav-item-fg);
    opacity: 1;
  }

  /* 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: var(--space-1);
    transition: none;
  }
  .nav__dropdown::before { display: none !important; }
  .nav__item.is-open > .nav__dropdown {
    visibility: visible;
    pointer-events: auto;
    height: auto;
    max-height: 40rem;
    /* Left inset reads as nested under the trigger above, without a border-left rule */
    padding: var(--space-1) 0 var(--space-3) var(--space-3) !important;
    gap: 0 !important;
  }
  /* Flat list — no fill at rest, rows separated by a hairline (matching
     .nav__links dividers). Hover gets the same grey chip as the desktop
     nav items. */
  /* !important throughout this rule: the unconditional .nav__drop-link
     card styles declared further down the file (desktop popover) share
     this exact selector and win any same-specificity tie by source order
     alone, regardless of media query. */
  .nav__drop-link {
    padding: 0.75rem var(--space-2) !important;
    border-radius: var(--radius-sm) !important;
    background: none !important;
  }
  .nav__drop-link:hover { background: var(--nav-item-hover-bg) !important; }
  .nav__drop-link:not(:last-child) { border-bottom: 1px solid var(--border-ink); }
  .nav__drop-title { font-size: 1.1875rem !important; font-weight: 700 !important; }
  .nav__drop-desc { font-size: 0.875rem !important; }
  /* Language options are single words, not title+desc cards — keep them compact. */
  .lang-switch__option {
    padding: 0.6rem 0 !important;
  }
  /* On tablet the switcher stays in .nav__actions as a floating popover
     card (not the phone overlay's flush accordion row), so it keeps its
     own left/right breathing room instead of the edge-to-edge padding
     above. */
  .nav__actions .lang-switch__option {
    padding-left: var(--space-2) !important;
    padding-right: var(--space-2) !important;
  }

  /* 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__current,
  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__option {
    color: var(--color-ink-45);
  }
  body.has-dark-hero .site-header:not(.is-scrolled) .nav__menu .lang-switch__option[aria-current="page"] {
    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; }
  /* Header already shows the full logo lockup on phone; the footer's own
     copy of it is redundant at this width and not worth the vertical
     space, so it collapses into a small mark inline with the Lovable
     credit instead ("[mark] & Lovable ..."). */
  .site-footer__brand { display: none; }
  /* Three rows: the Neo Carbone mark, then the Lovable wordmark beside
     "Official partner.", then the location and language line. */
  .site-footer__trust-brand {
    display: flex;
    flex-basis: 100%;
    justify-content: center;
  }
  .site-footer__trust p { display: contents; }
  .site-footer__trust-rest { flex-basis: 100%; }
  .site-footer__trust { align-items: center; }
  .site-footer__trust-logo { transform: none; }
  .site-footer__meta {
    padding: var(--space-4) 0;
  }
  /* The header/footer scroll buffer on body only needs to clear the fixed
     header's own height; the full header-height value is generous for a
     short mobile page and reads as dead air below the copyright line. */
  body { padding-bottom: var(--space-4); }
  .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; }

  /* The trigger sits pinned to the bottom of the overlay — open upward so
     the dropdown never gets clipped under the viewport edge. */
  .nav__menu-meta .lang-switch__dropdown {
    top: auto;
    bottom: 100%;
    margin-top: 0;
    margin-bottom: 0.6rem;
    transform: translateY(6px);
  }
  .nav__menu-meta .lang-switch.is-open > .lang-switch__dropdown,
  .nav__menu-meta .lang-switch:focus-within > .lang-switch__dropdown {
    transform: translateY(0);
  }
  /* This dropdown is a floating card, not a flush accordion row, so its
     rows keep their own left/right breathing room instead of the
     edge-to-edge .lang-switch__option override above. */
  .nav__menu-meta .lang-switch__option {
    padding-left: var(--space-2) !important;
    padding-right: var(--space-2) !important;
  }
}

@media (max-width: 900px) {
  /* The EN/FR trigger's real hit box was just the text + chevron glyphs —
     fine with a mouse, too small to read or reliably tap next to the
     "Book a call" pill. Bigger, bolder text plus padding grows the box;
     the matching negative margin keeps it from pushing the CTA button or
     the overlay divider out of place. */
  .lang-switch .nav__trigger {
    padding: 0.75rem 0.5rem;
    margin: -0.75rem -0.5rem;
  }
  .lang-switch .nav__trigger,
  .lang-switch__current {
    font-size: 1.1875rem;
    font-weight: 800;
  }
  .lang-switch .nav__chevron {
    width: 1.1em;
    height: 1.1em;
  }

  /* Was a flat 16px across the whole sub-900 range, so a 768-900px tablet
     got the same tight gutter as a 320px phone — content pressed right up
     to the edge on screens with plenty of room to spare. Scale it with the
     viewport instead: phones still bottom out at 16px, tablets get up to
     32px, matching the desktop clamp's shape just scaled down. */
  :root { --gutter: clamp(16px, 4vw, 32px); }

  .paths__grid,
  .paths__routes,
  .features__grid { grid-template-columns: 1fr; gap: var(--space-3); }

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

  .site-footer__grid { grid-template-columns: 1fr; row-gap: var(--space-6); }
  .site-footer__brand {
    padding-bottom: var(--space-5);
  }
  /* Two independent columns: each stacks its own nav groups without a
     shared row grid, so a short column isn't held to a tall neighbor's
     height (that's what created the gap under Product/above Company). */
  .site-footer__nav {
    display: flex;
    gap: var(--space-5);
  }
  .site-footer__nav-col {
    display: flex;
    flex-direction: column;
    gap: var(--space-6);
    flex: 1;
    min-width: 0;
  }

  /* 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-5); }
  .section.shift,
  .section.features,
  .section.paths,
  .section.proof,
  .section.voices,
  .section.logos,
  .section.platforms {
    padding-top: var(--space-6);
    padding-bottom: var(--space-4);
  }
  .section.logos { padding-top: var(--space-5); }

  /* 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); }
  .cta__actions .btn { width: 100%; }
  .site-footer__nav { column-gap: var(--space-4); }
  .site-footer__belief {
    font-size: clamp(1.25rem, 5vw, 1.625rem);
    padding: var(--space-6) 0;
  }
  .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);
  }
  /* Closed by a second click: hide even while hovered or focused */
  .nav__item.is-dismissed:not(.is-open) > .nav__dropdown {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(-6px);
  }
}
.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(--nav-item-hover-bg); color: var(--nav-item-fg); }
.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: 500;
  font-size: var(--nav-item-fs);
  color: var(--color-ink);
  line-height: 1.3;
}
.nav__drop-desc {
  display: block;
  width: 100%;
  font-size: var(--fs-sm);
  line-height: 1.4;
  color: var(--color-ink-45);
}
.nav__tag {
  flex-shrink: 0;
  font-family: var(--font-title);
  font-size: var(--fs-label);
  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-card-link);
  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__current { 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;
}

/* Compact desktop nav: the FR link row is ~110px wider than EN and did not
   fit beside the actions under ~1440px. Tighter items keep both locales on
   one line down to the 1200px collapse point. The .site-header ancestor
   outranks the item-state rules declared further down. */
@media (min-width: 1200px) and (max-width: 1439px) {
  .site-header .nav { column-gap: 1rem; }
  .site-header .nav__links { gap: 0.75rem; }
  .site-header .nav__links,
  .site-header .lang-switch .nav__trigger,
  .site-header .lang-switch__current { font-size: 1rem; }
  .site-header .nav__links > li > a,
  .site-header .nav__links .nav__trigger { padding-inline: 0.5rem; }
  .site-header .brand { font-size: 1.125rem; gap: 10px; }
  .site-header .brand__logo { height: 32px; }
  .site-header .nav__actions .btn { font-size: 1rem; padding: 0.5625rem 1.125rem; }
}
@media (min-width: 1200px) and (max-width: 1279px) {
  .site-header .nav { column-gap: 0.75rem; }
  .site-header .nav__links { gap: 0.5rem; }
  .site-header .nav__links > li > a,
  .site-header .nav__links .nav__trigger { padding-inline: 0.375rem; }
}

/* ---------- Desktop nav item states ----------
   Each top-level item is a pill: transparent at rest, faint grey chip on
   hover/open, stronger grey chip when active. Text stays ink on hover (never green).
   Only direct page links (Portfolio, Resources) show an active state;
   dropdown triggers and dropdown items never do. */
@media (min-width: 1200px) {
  .nav__links { gap: 1rem; font-size: var(--nav-item-fs); }
  /* EN/FR matches the menu items: same size and weight */
  .lang-switch .nav__trigger,
  .lang-switch__current { font-size: var(--nav-item-fs); font-weight: 500; }
  .lang-switch__option { font-size: var(--nav-item-fs); font-weight: 500; }
  .lang-switch__option[aria-current="page"] { font-weight: 600; }
  .nav__links > li > a,
  .nav__links .nav__trigger {
    padding: 0.5rem 0.8rem;
    border-radius: var(--nav-item-radius);
    transition: background 0.15s var(--ease), color 0.15s var(--ease);
  }
  .nav__links > li > a:hover,
  .nav__links .nav__trigger:hover,
  .nav__links .nav__item.is-open > .nav__trigger {
    background: var(--nav-item-hover-bg);
    color: var(--nav-item-fg);
  }
  .nav__links > li > a[aria-current="page"] {
    background: var(--nav-item-active-bg);
    color: var(--nav-item-active-fg);
  }

  /* EN/FR trigger follows the same pill states as the menu items */
  .lang-switch .nav__trigger {
    padding: 0.5rem 0.8rem;
    border-radius: var(--nav-item-radius);
    transition: background 0.15s var(--ease), color 0.15s var(--ease);
  }
  .lang-switch .nav__trigger:hover,
  .lang-switch.is-open > .nav__trigger {
    background: var(--nav-item-hover-bg);
    color: var(--nav-item-fg);
  }

  body.has-dark-hero .site-header:not(.is-scrolled) .lang-switch .nav__trigger:hover,
  body.has-dark-hero .site-header:not(.is-scrolled) .lang-switch.is-open > .nav__trigger,
  body.has-dark-hero .site-header:not(.is-scrolled) .nav__links > li > a:hover,
  body.has-dark-hero .site-header:not(.is-scrolled) .nav__links .nav__trigger:hover,
  body.has-dark-hero .site-header:not(.is-scrolled) .nav__links .nav__item.is-open > .nav__trigger {
    background: var(--nav-item-hover-bg-on-dark);
    color: var(--nav-item-fg-on-dark);
  }
  body.has-dark-hero .site-header:not(.is-scrolled) .nav__links > li > a[aria-current="page"] {
    background: var(--nav-item-active-bg-on-dark);
    color: var(--nav-item-active-fg-on-dark);
  }
}

/* ---------- 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: var(--fs-label);
  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: var(--fs-label);
  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: 0.94;
  color: var(--color-ink);
  max-width: 28rem;
  margin: 0 auto var(--space-4);
  font-style: italic; /* approved exception to the no-italic rule: testimonial carousel only */
  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-weight: 400;
  font-style: italic; /* approved exception to the no-italic rule: testimonial quotes only */
  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-card-title);
  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: var(--fs-label);
  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;
  width: 100%;
  /* No gap: 100% + gap lands snap between slides and lets measureReach
     think the last card is unreachable. One card fills the view. */
  margin: 0;
  padding: 0;
  list-style: none;
}
.showcase__slide {
  box-sizing: border-box;
  flex: 0 0 100%;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  scroll-snap-align: start;
  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));
  width: 100%;
  max-width: 100%;
  min-width: 0;
  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;
  max-width: 100%;
}
.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.01;
  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-tag);
  font-size: var(--fs-tag);
  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-tag);
  font-size: var(--fs-tag);
  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-card-link);
  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);
  max-width: 100%;
  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; max-width: 100%; }
.showcase-browser__shot img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  max-width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top left;
}
/* 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: min(100%, clamp(150px, 13vw, 190px));
  max-width: 100%;
  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%;
  max-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: 0.97;
  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: var(--fs-label); 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: 12px;
  right: 12px;
  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.1;
  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); font-weight: 600; text-decoration: none; }
.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; }

/* Privacy page anchors (#visit-statistics, #privacy-choices, the footer link)
   land below the fixed header. */
.legal__block[id] { scroll-margin-top: calc(var(--header-height) + var(--space-5)); }

/* Privacy choices on the privacy page. js/main.js fills the texts and shows
   the button. .btn sets display, so the hidden attribute needs its own rule. */
.privacy-choices__status:empty { margin: 0; }
.privacy-choices__toggle[hidden] { display: none; }

/* 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; gap: var(--space-3); } }

/* 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; gap: var(--space-3); }

  .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: mockup centred above the copy, copy spans the full card width. */
  .showcase-card__media { order: -1; justify-content: center; }
  .showcase-browser { width: min(100%, 560px); max-width: 100%; }
  .showcase-card__line { max-width: none; }
}

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

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

/* 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: 1rem;
  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: 0.97;
  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%);
}

/* Collapsed range bar: fixed to the viewport bottom on mobile/tablet only.
   Hidden on desktop, where the full summary card is already sticky. */
.calc__peek { display: none; }

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

  .calc__peek {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    position: fixed;
    left: 12px;
    right: 12px;
    bottom: 12px;
    z-index: 60;
    padding: 14px 14px 14px 18px;
    padding-bottom: max(14px, env(safe-area-inset-bottom));
    border: 1px solid color-mix(in srgb, var(--color-secondary-green) 35%, var(--border-ink));
    border-radius: 20px;
    background: color-mix(in srgb, var(--color-secondary-green) 4%, var(--color-surface-light));
    box-shadow: 0 20px 40px -24px rgba(10, 10, 8, 0.35);
    transform: translateY(calc(100% + 12px));
    opacity: 0;
    pointer-events: none;
    transition: transform 0.3s var(--ease), opacity 0.3s var(--ease);
  }
  .calc__peek.is-visible { transform: none; opacity: 1; pointer-events: auto; }
  .calc__peek-info { min-width: 0; }
  .calc__peek-kicker {
    margin: 0 0 2px;
    font-family: var(--font-mono);
    font-size: var(--fs-label-xs);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-ink-45);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .calc__peek-range {
    margin: 0;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    font-family: var(--font-title);
    font-weight: 700;
    font-size: clamp(0.95rem, 4vw, 1.2rem);
    letter-spacing: -0.02em;
    line-height: 1.01;
    color: var(--color-ink);
    white-space: nowrap;
  }
  .calc__peek-range .calc__range-unit {
    margin-left: 0.2em;
    font-size: 0.7em;
  }
  .calc__peek-cta {
    flex-shrink: 0;
    width: auto;
    margin: 0;
    padding: 10px 14px;
    font-size: 13px;
  }
}
@media (max-width: 480px) {
  .calc-cards { grid-template-columns: 1fr; }
}
@media (max-width: 430px) {
  /* French button copy runs longer than English. Rather than shrink the
     price text further (it must never truncate), let the button itself
     wrap to two lines here — it still sits as one pill on the right of
     the same horizontal row, just taller. */
  .calc__peek { gap: 6px; padding: 12px; }
  .calc__peek-kicker { font-size: var(--fs-label-xs); }
  .calc__peek-range { font-size: clamp(0.8rem, 4.2vw, 1.2rem); }
  .calc__peek-cta {
    flex-shrink: 1;
    max-width: 118px;
    padding: 8px 10px;
    font-size: 11.5px;
    line-height: 1.2;
    white-space: normal;
    text-align: center;
  }
}

/* =============================================================
   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;
}
@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.01;
  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;
  gap: var(--space-2);
  background: var(--color-ink);
  padding: 5px 14px;
  border-radius: var(--radius-pill);
  white-space: nowrap;
}
.hero__trust-chip img { height: 12px; width: auto; }
/* "Official partner" sits inside the pill, after the Lovable wordmark. */
.hero__trust-chip__text {
  color: var(--color-on-dark);
  font-size: var(--fs-sm);
  font-weight: 600;
  line-height: 1.3;
}
.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; }

.hero__offers-eyebrow { 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; gap: var(--space-3); }
}

/* 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-eyebrow { display: block; margin-top: var(--space-7); margin-bottom: var(--space-3); }
  .hero__offers-eyebrow + .hero__offers { margin-top: 0; }
  .hero__offers--bento { grid-template-columns: 1fr; gap: var(--space-3); }
  .offer-card--feature { grid-row: auto; min-height: 0; }
  .hero__trust--strip {
    grid-column: auto;
    flex-wrap: wrap;
    justify-content: center;
    row-gap: var(--space-4);
  }
  /* First item (badge + sentence) takes its own full-width line;
     "Based in Québec" and "Bilingual EN / FR" wrap together onto the
     next line, still joined by their dot separator. */
  .hero__trust--strip .hero__trust-item:first-child {
    flex-basis: 100%;
    flex-direction: column;
    gap: var(--space-2);
    text-align: center;
  }
  .hero__trust--strip .hero__trust-item:first-child + .hero__trust-sep { display: none; }
  .hero__trust--strip { column-gap: var(--space-3); }
  .hero__offers { grid-template-columns: 1fr; gap: var(--space-3); }
  .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;
  }
  .hero__masthead .hero__deck-cta {
    width: 100%;
    justify-content: center;
  }
  .offer-card--feature .offer-card__wire {
    display: none;
  }
}

/* Tablet only (not mobile, not desktop): the feature-card illustration is
   capped at 520px, so once the bento grid collapses to one column at 900px
   the card is far wider than the mockup and it reads as stuck to the left
   edge instead of sitting in the card. Center it just for this range —
   below it the illustration is hidden (see the 560px block above), and
   above it the bento column is already narrow enough that the mockup fills
   it edge to edge. */
@media (min-width: 561px) and (max-width: 900px) {
  .offer-card--feature .offer-card__wire {
    justify-content: center;
  }
}

/* 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
   ============================================================= */
/* Dark vision panel — inset card, never full-bleed */
.careers-intro {
  position: relative;
  overflow: hidden;
  background: var(--color-ink);
  border-radius: var(--radius-xl);
  padding: var(--space-7) var(--space-6);
  text-align: center;
}
.careers-intro .section__title { max-width: 840px; margin: 0 auto var(--space-4); color: var(--color-on-dark); }
.careers-intro__lead { max-width: 760px; margin-inline: auto; font-size: var(--fs-lead); line-height: 1.6; color: var(--color-on-dark-muted); }

/* 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.01;
  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-faq); 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); 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); 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.01; }
.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); 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, .careers-intro { 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);
  grid-template-areas: "intro panel" "learn panel";
  column-gap: clamp(2rem, 4.5vw, 5rem);
  row-gap: var(--space-6);
  align-items: start;
}
.ct-hero__intro { grid-area: intro; max-width: 44rem; }
.ct-hero__panel { grid-area: panel; justify-self: end; width: 100%; max-width: 640px; }

.ct-title {
  font-family: var(--font-title);
  font-weight: 700;
  font-size: clamp(2.125rem, 4.2vw, 3.5rem);
  line-height: 0.94;
  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-xl);
  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 { --ct-accent: oklch(0.84 0.15 152); }
.ct-option:nth-child(2) { --ct-accent: oklch(0.8 0.13 230); }
.ct-option__icon {
  color: var(--ct-accent);
  background: color-mix(in oklch, var(--ct-accent) 16%, transparent);
}
.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: var(--fs-card-title);
  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;
  color: rgba(255, 255, 255, 0.45);
  transition: transform 0.2s var(--ease), color 0.2s var(--ease);
}
.ct-option__arrow svg { width: 18px; height: 18px; }
.ct-option:hover .ct-option__arrow {
  transform: translateX(3px);
  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 {
  grid-area: learn;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 44rem;
  padding: var(--space-5);
  background: var(--color-surface-light);
  border: 1px solid rgba(10, 10, 8, 0.08);
  border-radius: var(--radius-xl);
  color: var(--color-ink);
  transition: transform 0.25s var(--ease), border-color 0.25s var(--ease), box-shadow 0.25s var(--ease);
}
.ct-learn__glow {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(60% 120% at 100% 0%, oklch(0.9 0.11 152 / 0.55), transparent 70%),
    radial-gradient(55% 110% at 0% 100%, oklch(0.9 0.1 300 / 0.45), transparent 72%);
  animation: nc-hue 14s ease-in-out infinite alternate;
  transition: opacity 0.3s var(--ease);
}
.ct-learn > *:not(.ct-learn__glow) { position: relative; z-index: 1; }
.ct-learn:hover {
  transform: translateY(-3px);
  color: var(--color-ink);
  border-color: rgba(10, 10, 8, 0.16);
  box-shadow: 0 22px 44px -30px rgba(10, 10, 8, 0.4);
}
.ct-learn__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}
.ct-learn__faces { display: flex; }
.ct-learn__face {
  width: 48px;
  height: 48px;
  border-radius: var(--radius-pill);
  overflow: hidden;
  border: 3px solid var(--color-paper);
  background: var(--color-surface-muted);
  transition: margin 0.3s var(--ease);
}
.ct-learn__face + .ct-learn__face { margin-left: -14px; }
.ct-learn:hover .ct-learn__face + .ct-learn__face { margin-left: -6px; }
.ct-learn__face img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ct-learn__arrow {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: var(--radius-pill);
  background: var(--color-ink);
  color: var(--color-on-dark);
  transition: background-color 0.25s var(--ease), transform 0.25s var(--ease);
}
.ct-learn__arrow svg { width: 18px; height: 18px; transition: transform 0.25s var(--ease); }
.ct-learn:hover .ct-learn__arrow { background: var(--color-active); }
.ct-learn:hover .ct-learn__arrow svg { transform: translateX(2px); }
.ct-learn__title {
  font-family: var(--font-title);
  font-weight: 700;
  font-size: var(--fs-card-title);
  line-height: 1.2;
  letter-spacing: -0.015em;
}
.ct-learn__value {
  margin-top: var(--space-2);
  font-size: var(--fs-base);
  line-height: 1.55;
  color: var(--color-ink-60);
  max-width: 34rem;
}

/* ---------- 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; }
/* Spam trap on the contact form (#website). Off screen, out of the tab
   order and hidden from assistive tech, so only bots fill it. /api/lead
   answers a filled trap with a fake success. */
.form__trap {
  position: absolute;
  left: -10000px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* 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: var(--fs-sm); color: rgba(255, 255, 255, 0.5); text-align: center; }
.form__note a { color: var(--color-on-dark); font-weight: 600; text-decoration: none; }
.form__note a:hover { color: #fff; }
.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);
    grid-template-areas: "intro" "panel" "learn";
    row-gap: var(--space-6);
    justify-items: center;
  }
  .ct-hero__intro { width: 100%; max-width: 44rem; }
  .ct-hero__panel { justify-self: center; max-width: 44rem; }
}
@media (max-width: 640px) {
  .ct-hero { padding: calc(var(--space-4) + var(--header-height)) var(--gutter) var(--space-6); }
  .ct-hero__grid { row-gap: var(--space-5); }
  .ct-title { margin-top: var(--space-3); }
  .ct-lead { margin-top: var(--space-3); font-size: var(--fs-base); }
  .ct-options { margin-top: var(--space-4); gap: var(--space-2); }
  .ct-hero__note { display: none; }
  .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-lg); }
  .ct-learn { padding: var(--space-4); border-radius: var(--radius-lg); }
  .ct-learn__face, .ct-learn__arrow { width: 40px; height: 40px; }
  .form__row { grid-template-columns: 1fr; }
}

/* ---------- Shared card padding, mobile ---------- */
@media (max-width: 640px) {
  .offer-card,
  .path-card,
  .feature-card,
  .info-card,
  .sec-card {
    padding: var(--space-4);
  }
  .legal__card { padding: var(--space-4) var(--space-4); }
}

/* ---------- Page title on mobile ----------
   One size for the page's <h1> on every page under 640px, read from
   --fs-h1-mobile. Page stylesheets load after this file and several hero
   titles are sized inline, so the size is forced here instead of repeated
   in each page's own breakpoint. On case studies built as
   <h1><span>Name</span><span>Subtitle</span></h1>, only the name span
   takes the title size; the subtitle keeps its own. */
@media (max-width: 640px) {
  main h1:not(:has(> span[style])),
  main h1 > span[style]:first-child {
    font-size: var(--fs-h1-mobile) !important;
    line-height: 1.04 !important;
    overflow-wrap: break-word;
  }
}