/* ---- 00-base.css ---- */
/* =====================================================================
   N.S. Logistics — base layer: tokens, reset, type, utilities, nav, footer
   Every section stylesheet builds on these tokens. Don't hardcode colours
   or easings in section files; reach for a variable here first.
   ===================================================================== */

:root {
  /* Palette — Apple-neutral greys with the brand's navy/indigo and a link blue */
  --c-black: #000;
  --c-white: #fff;
  --c-ink: #1d1d1f;            /* primary text on light */
  --c-ink-2: #6e6e73;          /* secondary text on light */
  --c-ink-3: #86868b;          /* tertiary / fine print */
  --c-snow: #f5f5f7;           /* light section background */
  --c-mist: #e8e8ed;           /* hairlines / chips on light */
  --c-graphite: #161617;       /* raised surface on dark */
  --c-graphite-2: #1d1d1f;     /* card on dark */
  --c-graphite-3: #2d2d30;     /* hairline on dark */
  --c-fog: #f5f5f7;            /* primary text on dark */
  --c-fog-2: #a1a1a6;          /* secondary text on dark */

  --c-navy: #0a1f4d;           /* brand navy (from the deck) */
  --c-navy-deep: #050c22;
  --c-indigo: #2b1f5c;         /* logo ink (from the business card) */
  --c-blue: #0071e3;           /* action blue on light */
  --c-blue-ink: #0066cc;       /* link text on light/snow (>= 4.5:1 on #f5f5f7) */
  --c-blue-bright: #2997ff;    /* action blue on dark */
  --c-cyan: #5ac8fa;           /* glow accent (deck's "strength" arrows) */

  --grad-brand: linear-gradient(100deg, #2997ff 0%, #5ac8fa 55%, #a5e4ff 100%);
  --grad-metal: linear-gradient(180deg, #ffffff 0%, #d7dbe4 45%, #8f97a8 100%);
  --grad-navy: radial-gradient(120% 120% at 50% 0%, #10306f 0%, #0a1f4d 38%, #050c22 72%, #000 100%);

  /* Type */
  --font-display: "SF Pro Display", -apple-system, BlinkMacSystemFont, "Inter", "Helvetica Neue", Arial, sans-serif;
  --font-text: "SF Pro Text", -apple-system, BlinkMacSystemFont, "Inter", "Helvetica Neue", Arial, sans-serif;

  --fs-hero: clamp(3rem, 9.2vw, 8.5rem);        /* 48 → 136 */
  --fs-h1: clamp(2.5rem, 6.4vw, 6rem);          /* 40 → 96 */
  --fs-h2: clamp(2rem, 4.8vw, 4rem);            /* 32 → 64 */
  --fs-h3: clamp(1.5rem, 2.6vw, 2.5rem);        /* 24 → 40 */
  --fs-h4: clamp(1.1875rem, 1.6vw, 1.5rem);     /* 19 → 24 */
  --fs-eyebrow: clamp(1.0625rem, 1.4vw, 1.3125rem);
  --fs-lead: clamp(1.1875rem, 1.75vw, 1.75rem); /* 19 → 28 */
  --fs-body: 1.0625rem;                         /* 17 */
  --fs-small: 0.875rem;                         /* 14 */
  --fs-fine: 0.75rem;                           /* 12 */

  --lh-tight: 1.04;
  --lh-snug: 1.12;
  --lh-body: 1.47;
  --ls-display: -0.035em;
  --ls-heading: -0.022em;
  --ls-body: -0.012em;

  /* Layout */
  --gutter: clamp(16px, 4.2vw, 48px);
  --w-narrow: 980px;
  --w-content: 1200px;
  --w-wide: 1440px;
  --section-pad: clamp(96px, 13vw, 200px);
  --nav-h: 52px;

  --r-xs: 8px;
  --r-sm: 12px;
  --r-md: 18px;
  --r-lg: 28px;
  --r-xl: 36px;
  --r-pill: 980px;

  /* Motion */
  --ease-apple: cubic-bezier(0.28, 0.11, 0.32, 1);
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --dur-fast: 0.2s;
  --dur: 0.45s;
  --dur-slow: 0.9s;

  --shadow-card: 0 2px 6px rgba(0, 0, 0, 0.04), 0 18px 48px rgba(0, 0, 0, 0.08);
  --shadow-float: 0 30px 80px rgba(0, 0, 0, 0.35);
}

/* Section themes — set data-theme on any section/wrapper */
[data-theme="dark"] {
  --bg: var(--c-black);
  --bg-2: var(--c-graphite);
  --surface: var(--c-graphite-2);
  --line: var(--c-graphite-3);
  --fg: var(--c-fog);
  --fg-2: var(--c-fog-2);
  --link: var(--c-blue-bright);
  --focus: var(--c-blue-bright);
  color-scheme: dark;
}
[data-theme="light"] {
  --bg: var(--c-white);
  --bg-2: var(--c-snow);
  --surface: var(--c-white);
  --line: var(--c-mist);
  --fg: var(--c-ink);
  --fg-2: var(--c-ink-2);
  --link: var(--c-blue-ink);
  --focus: var(--c-blue);
  color-scheme: light;
}
[data-theme="snow"] {
  --bg: var(--c-snow);
  --bg-2: var(--c-white);
  --surface: var(--c-white);
  --line: var(--c-mist);
  --fg: var(--c-ink);
  --fg-2: var(--c-ink-2);
  --link: var(--c-blue-ink);
  --focus: var(--c-blue);
  color-scheme: light;
}
[data-theme="navy"] {
  --bg: var(--c-navy-deep);
  --bg-2: var(--c-navy);
  --surface: rgba(255, 255, 255, 0.06);
  --line: rgba(255, 255, 255, 0.12);
  --fg: var(--c-fog);
  --fg-2: #9fb0d0;
  --link: var(--c-blue-bright);
  --focus: var(--c-blue-bright);
  color-scheme: dark;
}
section[data-theme], footer[data-theme] { background: var(--bg); color: var(--fg); }

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  scroll-padding-top: var(--nav-h);
  scrollbar-gutter: stable;
}
body {
  min-height: 100vh;
  background: var(--c-black);
  color: var(--c-fog);
  font-family: var(--font-text);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  letter-spacing: var(--ls-body);
  font-optical-sizing: auto;
  overflow-x: clip;
}
img, picture, video, canvas, svg { display: block; max-width: 100%; }
img { height: auto; }
input, button, textarea, select { font: inherit; color: inherit; letter-spacing: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; }
a { color: inherit; text-decoration: none; }
ul[role="list"], ol[role="list"] { list-style: none; padding: 0; }
h1, h2, h3, h4, h5 { font-family: var(--font-display); font-weight: 700; line-height: var(--lh-snug); letter-spacing: var(--ls-heading); text-wrap: balance; }
p { text-wrap: pretty; }
address { font-style: normal; }
::selection { background: rgba(41, 151, 255, 0.35); color: inherit; }
main:focus { outline: none; }

/* Lenis */
html.lenis, html.lenis body { height: auto; }
.lenis:not(.lenis-autoToggle).lenis-stopped { overflow: clip; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-smooth iframe { pointer-events: none; }

/* ---------- Accessibility ---------- */
.skip-link {
  position: fixed; left: 12px; top: 12px; z-index: 1000;
  padding: 10px 16px; border-radius: var(--r-pill);
  background: var(--c-white); color: var(--c-ink); font-weight: 600;
  transform: translateY(-160%); transition: transform var(--dur) var(--ease-out);
}
.skip-link:focus-visible { transform: none; }
:focus-visible { outline: 2px solid var(--focus, var(--c-blue-bright)); outline-offset: 3px; border-radius: 6px; } /* blue on light/snow: >= 3:1 */
.sr-only {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---------- Layout utilities ---------- */
.container { width: min(var(--w-content), 100% - 2 * var(--gutter)); margin-inline: auto; }
.container--narrow { width: min(var(--w-narrow), 100% - 2 * var(--gutter)); margin-inline: auto; }
.container--wide { width: min(var(--w-wide), 100% - 2 * var(--gutter)); margin-inline: auto; }
.section { position: relative; padding-block: var(--section-pad); }
.center { text-align: center; }
.stack > * + * { margin-top: var(--stack-gap, 1rem); }

/* ---------- Typography utilities ---------- */
.eyebrow {
  display: inline-block;
  font-family: var(--font-display);
  font-size: var(--fs-eyebrow);
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--fg-2);
}
.eyebrow--brand { background: var(--grad-brand); -webkit-background-clip: text; background-clip: text; color: transparent; }
/* On light the gradient stays dark enough for 17-21px semibold text (>= 4.5:1 on white and snow) */
[data-theme="light"] .eyebrow--brand, [data-theme="snow"] .eyebrow--brand { background-image: linear-gradient(100deg, #004f9e 0%, #005bb5 50%, #0066cc 100%); }
.h-hero { font-size: var(--fs-hero); line-height: 0.98; letter-spacing: -0.045em; font-weight: 700; }
.h1 { font-size: var(--fs-h1); line-height: var(--lh-tight); letter-spacing: var(--ls-display); }
.h2 { font-size: var(--fs-h2); line-height: 1.07; letter-spacing: -0.03em; }
.h3 { font-size: var(--fs-h3); line-height: 1.12; letter-spacing: -0.025em; font-weight: 600; }
.h4 { font-size: var(--fs-h4); line-height: 1.2; letter-spacing: -0.015em; font-weight: 600; }
.lead { font-family: var(--font-display); font-size: var(--fs-lead); line-height: 1.32; letter-spacing: -0.015em; font-weight: 500; color: var(--fg-2); }
.lead strong, .lead b { color: var(--fg); font-weight: 600; }
.body { font-size: var(--fs-body); color: var(--fg-2); }
.small { font-size: var(--fs-small); }
.fine { font-size: var(--fs-fine); color: var(--fg-2); letter-spacing: 0; }
.muted { color: var(--fg-2); }
.text-brand { background: var(--grad-brand); -webkit-background-clip: text; background-clip: text; color: transparent; }
.text-metal { background: var(--grad-metal); -webkit-background-clip: text; background-clip: text; color: transparent; }
.tabular { font-variant-numeric: tabular-nums; }

/* ---------- Buttons & links ---------- */
.btn {
  --btn-bg: var(--c-blue); --btn-fg: #fff;
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 0.4em;
  min-height: 44px; padding: 0.7em 1.35em;
  border-radius: var(--r-pill);
  background: var(--btn-bg); color: var(--btn-fg);
  font-family: var(--font-text); font-size: var(--fs-body); font-weight: 500; letter-spacing: -0.01em; line-height: 1;
  white-space: nowrap;
  transition: background-color var(--dur-fast) ease, color var(--dur-fast) ease, box-shadow var(--dur) var(--ease-out), transform var(--dur) var(--ease-out);
  will-change: transform;
}
.btn:hover { --btn-bg: #0077ed; }
.btn:active { transform: scale(0.97); }
.btn--primary { --btn-bg: var(--c-blue); }
[data-theme="dark"] .btn--primary, [data-theme="navy"] .btn--primary { --btn-bg: var(--c-blue); }
.btn--secondary { --btn-bg: transparent; --btn-fg: var(--link); box-shadow: inset 0 0 0 1px currentColor; }
.btn--secondary:hover { --btn-bg: var(--link); --btn-fg: #fff; box-shadow: inset 0 0 0 1px var(--link); }
.btn--light { --btn-bg: #fff; --btn-fg: var(--c-ink); }
.btn--light:hover { --btn-bg: #e8e8ed; }
.btn--small { min-height: 30px; padding: 0.5em 1em; font-size: 0.8125rem; }
.btn--small::before { content: ""; position: absolute; inset: -7px -4px; } /* 44px touch target, same look */
.btn--large { min-height: 52px; padding: 0.9em 1.7em; font-size: 1.0625rem; }
.btn svg { width: 1em; height: 1em; flex: none; }

.link {
  position: relative;
  display: inline-flex; align-items: center; gap: 0.15em;
  color: var(--link); font-size: var(--fs-body); font-weight: 400;
}
.link::before { content: ""; position: absolute; inset: -10px -6px; } /* 44px touch target without moving the text */
.link::after {
  content: ""; width: 0.55em; height: 0.55em; margin-left: 0.15em;
  border: solid currentColor; border-width: 0.12em 0.12em 0 0; transform: rotate(45deg) translateY(0.02em);
  transition: transform var(--dur) var(--ease-out);
}
.link:hover { text-decoration: underline; text-underline-offset: 0.18em; }
.link:hover::after { transform: translateX(0.18em) rotate(45deg) translateY(0.02em); }
.cta-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 14px 28px; }

/* ---------- Media ---------- */
.media { position: relative; overflow: hidden; border-radius: var(--r-lg); background: var(--bg-2); isolation: isolate; }
.media > img, .media > picture > img { width: 100%; height: 100%; object-fit: cover; }
.chip {
  display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px;
  border-radius: var(--r-pill); background: var(--surface); color: var(--fg-2);
  font-size: var(--fs-small); font-weight: 500; box-shadow: inset 0 0 0 1px var(--line);
}

/* ---------- Shared reveal system (driven by 00-core.js) ----------
   Elements start hidden ONLY when GSAP is confirmed available (html.anim). */
html.anim [data-reveal] { opacity: 0; }
html.anim [data-split] { visibility: hidden; }
html.anim [data-split].is-split { visibility: visible; }
.split-line { padding-bottom: 0.06em; margin-bottom: -0.06em; } /* keep descenders inside masks */

/* =====================================================================
   GLOBAL NAV
   ===================================================================== */
.gnav {
  position: fixed; inset: 0 0 auto 0; z-index: 900;
  height: var(--nav-h);
  color: var(--fg);
  transition: color var(--dur) var(--ease-out);
}
.gnav::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: rgba(0, 0, 0, 0.72);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
  box-shadow: inset 0 -1px 0 rgba(255, 255, 255, 0.08);
  transition: background-color var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out);
}
.gnav[data-theme="light"]::before, .gnav[data-theme="snow"]::before { background: rgba(251, 251, 253, 0.78); box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.08); }
.gnav[data-theme="navy"]::before { background: rgba(5, 12, 34, 0.7); }
.gnav__bar {
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  height: 100%; width: min(var(--w-content), 100% - 2 * var(--gutter)); margin-inline: auto;
}
.gnav__brand { position: relative; display: inline-flex; align-items: center; gap: 10px; font-family: var(--font-display); font-weight: 600; font-size: 1.0625rem; letter-spacing: -0.02em; }
.gnav__brand::before { content: ""; position: absolute; inset: -10px -8px; } /* 44px touch target */
.gnav__mark { width: 26px; height: auto; color: currentColor; transition: transform 0.8s var(--ease-spring); }
.gnav__brand:hover .gnav__mark { transform: rotateY(180deg); }
.gnav__links { display: flex; gap: clamp(18px, 2.6vw, 36px); }
.gnav__links a {
  position: relative; font-size: 0.8125rem; font-weight: 400; letter-spacing: -0.005em;
  opacity: 0.8; transition: opacity var(--dur-fast) ease;
  padding-block: 6px;
}
.gnav__links a:hover, .gnav__links a[aria-current] { opacity: 1; }
.gnav__links a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: currentColor;
  transform: scaleX(0); transform-origin: left; transition: transform var(--dur) var(--ease-out);
}
.gnav__links a[aria-current]::after { transform: scaleX(1); }
.gnav__actions { display: flex; align-items: center; gap: 12px; }
.gnav__toggle { display: none; position: relative; width: 44px; height: 44px; margin-right: -10px; }
.gnav__toggle span {
  position: absolute; left: 13px; width: 18px; height: 1.5px; border-radius: 2px; background: currentColor;
  transition: transform 0.45s var(--ease-out), top 0.45s var(--ease-out);
}
.gnav__toggle span:nth-child(1) { top: 18px; }
.gnav__toggle span:nth-child(2) { top: 25px; }
.gnav.is-open .gnav__toggle span:nth-child(1) { top: 21.5px; transform: rotate(45deg); }
.gnav.is-open .gnav__toggle span:nth-child(2) { top: 21.5px; transform: rotate(-45deg); }
.gnav__progress { position: absolute; left: 0; right: 0; bottom: 0; height: 2px; overflow: hidden; pointer-events: none; }
.gnav__progress span { display: block; height: 100%; background: var(--grad-brand); transform-origin: left; transform: scaleX(0); }

.gnav__menu {
  position: fixed; inset: var(--nav-h) 0 0 0; z-index: -2;
  padding: 28px var(--gutter) 40px;
  background: rgba(0, 0, 0, 0.92);
  -webkit-backdrop-filter: saturate(180%) blur(24px);
  backdrop-filter: saturate(180%) blur(24px);
  color: var(--c-fog);
  display: flex; flex-direction: column; justify-content: space-between;
  overflow-y: auto;
}
.gnav[data-theme="light"] .gnav__menu, .gnav[data-theme="snow"] .gnav__menu { background: rgba(251, 251, 253, 0.96); color: var(--c-ink); }
.gnav__menu[hidden] { display: none; }
.gnav__menu li { overflow: hidden; }
.gnav__menu li a { display: block; padding: 8px 0; font-family: var(--font-display); font-size: clamp(1.75rem, 7vw, 2.5rem); font-weight: 600; letter-spacing: -0.03em; opacity: 0.86; transition: opacity var(--dur-fast) ease; }
.gnav__menu li a:hover, .gnav__menu li a[aria-current] { opacity: 1; }
.gnav__menu-foot { display: grid; gap: 20px; padding-top: 32px; font-size: var(--fs-small); }
.gnav__menu-cta { width: 100%; }
@media (min-width: 421px) { .gnav__menu-cta { display: none; } } /* the bar's own "Get a quote" is visible */
.gnav__menu-lines { display: grid; }
.gnav__menu-lines a { display: block; padding: 11px 0; line-height: 1.5; opacity: 0.7; transition: opacity var(--dur-fast) ease; } /* 44px rows */
.gnav__menu-lines a:hover { opacity: 1; }
/* Phones on their side: two columns so every link and the contact lines fit without scrolling */
@media (max-height: 500px) and (orientation: landscape) {
  .gnav__menu { padding-top: 16px; padding-bottom: 20px; }
  .gnav__menu ul { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: repeat(4, auto); grid-auto-flow: column; column-gap: 32px; }
  .gnav__menu li a { padding: 4px 0; font-size: 1.5rem; }
  .gnav__menu-foot { padding-top: 12px; }
  .gnav__menu-lines { grid-auto-flow: column; justify-content: start; column-gap: 28px; }
}

@media (max-width: 860px) {
  .gnav__links { display: none; }
  .gnav__toggle { display: block; }
  .gnav__wordmark { font-size: 1rem; }
}
@media (max-width: 420px) {
  .gnav__cta { display: none; } /* the open menu carries a full-width "Get a quote" instead */
}

/* =====================================================================
   GLOBAL FOOTER (Apple-style fine print)
   ===================================================================== */
.gfoot { padding: 40px 0 28px; font-size: var(--fs-fine); line-height: 1.5; color: var(--fg-2); background: var(--c-snow); }
.gfoot__intro { padding-bottom: 18px; border-bottom: 1px solid #d2d2d7; }
.gfoot__note { max-width: 80ch; }
.gfoot__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; padding: 22px 0; border-bottom: 1px solid #d2d2d7; }
.gfoot__col h3 { font-family: var(--font-text); font-size: var(--fs-fine); font-weight: 600; letter-spacing: 0; color: var(--c-ink); margin-bottom: 10px; }
.gfoot__col li + li { margin-top: 8px; }
.gfoot__col a:hover { color: var(--c-ink); text-decoration: underline; }
.gfoot__legal { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; padding-top: 16px; }
.gfoot__sep { margin: 0 8px; color: #d2d2d7; }
@media (max-width: 760px) { .gfoot__grid { grid-template-columns: 1fr 1fr; row-gap: 12px; } }
@media (max-width: 760px), (pointer: coarse) {
  /* touch: 44px rows */
  .gfoot__col li + li { margin-top: 0; }
  .gfoot__col a { display: block; padding-block: 13px; }
  .gfoot__col h3 { margin-bottom: 0; padding-block: 8px 4px; }
}

/* Long in-page jumps cross-fade through this instead of strobing past every section (00-core.js) */
.ns-veil { position: fixed; inset: 0; z-index: 899; pointer-events: none; opacity: 0; visibility: hidden; background: var(--c-black); }

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; }
}

/* ---- 10-hero.css ---- */
/* =====================================================================
   10-hero — "Heavy moves. Handled." with the 3D titanium brand mark
   Stacking inside the stage: slot (SVG mark + glow) 0 · WebGL canvas 1 · edge fade 1 · copy 2.
   .s-hero__inner deliberately has no z-index so its children join the stage's
   stacking context and the canvas can sit between the slot and the copy.
   ===================================================================== */
.s-hero { position: relative; }

.s-hero__stage {
  position: relative;
  height: 100vh;
  height: 100svh;
  min-height: 640px;
  overflow: hidden;
  isolation: isolate;
  background: var(--bg);
}

/* ---------- WebGL layer ---------- */
.s-hero__gl { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.s-hero__canvas { display: block; width: 100%; height: 100%; opacity: 0; }
/* Soft bottom edge for the exploded parts as the stage scrolls away (opacity driven by JS).
   Without it the drifting parts end in a hard horizontal cut at the stage's bottom edge.
   A sibling of .s-hero__gl (not a child) so it covers the SVG fallback too and does not
   fade out with the mark. */
.s-hero__fade {
  position: absolute; z-index: 1; left: 0; right: 0; bottom: 0; height: 26%;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.55) 46%, var(--bg) 92%);
  opacity: 0; pointer-events: none;
}

/* ---------- Copy + slot column ---------- */
.s-hero__inner {
  position: relative;
  height: 100%;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center;
  padding: calc(var(--nav-h) + clamp(16px, 3.6svh, 44px)) var(--gutter) clamp(64px, 8.4svh, 92px);
}
.s-hero__top,
.s-hero__bottom {
  position: relative; z-index: 2;
  display: flex; flex-direction: column; align-items: center;
  transform-origin: 50% 50%;
}
.s-hero__eyebrow { margin-bottom: clamp(6px, 1.3svh, 14px); }

/* Height-aware so the headline, mark and CTA always share one screen */
.s-hero__title { font-size: min(var(--fs-hero), 12.8svh); margin: 0; }
.s-hero__mask {
  display: block; overflow: hidden;
  /* room for descenders and the metal gradient's tail inside the mask */
  padding: 0 0.08em 0.11em; margin-bottom: -0.11em;
}
.s-hero__line { display: block; }
.s-hero__line--metal {
  background-image: linear-gradient(180deg, #ffffff 0%, #e4e7ee 34%, #a9b0bf 72%, #7d8597 100%);
}

.s-hero__lead { max-width: 33em; text-wrap: balance; }
.s-hero__cta { margin-top: clamp(16px, 2.6svh, 28px); }
/* 44px touch target for the chevron link; the row is already 44px tall (the button), so no visual change */
.s-hero__cta .link { min-height: 44px; }

/* ---------- Mark slot ---------- */
.s-hero__slot {
  position: relative; z-index: 0;
  flex: 1 1 auto;
  width: 100%;
  min-height: 150px; max-height: 40svh;
  margin-block: clamp(12px, 2.8svh, 34px) clamp(18px, 3.8svh, 44px);
}
.s-hero__glow {
  position: absolute; left: calc(50% - min(550px, 60vw)); top: -23%;
  width: min(1100px, 120vw); height: 150%;
  background:
    radial-gradient(closest-side, rgba(41, 151, 255, 0.17), rgba(41, 151, 255, 0.06) 46%, transparent 74%),
    radial-gradient(30% 22% at 50% 82%, rgba(255, 255, 255, 0.06), transparent 70%);
  pointer-events: none;
}
.s-hero__svg { position: absolute; inset: 0; transform-origin: 50% 50%; }
.s-hero__svg svg { width: 100%; height: 100%; overflow: visible; }

/* ---------- Footer row: tagline + scroll cue ---------- */
.s-hero__foot {
  position: absolute; z-index: 2; left: 0; right: 0; bottom: 0;
  width: min(var(--w-content), 100% - 2 * var(--gutter)); margin-inline: auto;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding-bottom: clamp(10px, 2.2svh, 24px);
}
.s-hero__tagline { font-size: var(--fs-fine); letter-spacing: 0.06em; text-transform: uppercase; color: var(--fg-2); }
.s-hero__cue {
  display: inline-flex; align-items: center; gap: 12px;
  min-height: 44px; padding-inline: 4px;
  color: var(--fg-2); font-size: var(--fs-fine); letter-spacing: 0.06em; text-transform: uppercase;
  transition: color var(--dur-fast) ease;
}
.s-hero__cue:hover { color: var(--fg); }
.s-hero__cue-line {
  position: relative; width: 1px; height: 30px; overflow: hidden;
  background: rgba(255, 255, 255, 0.16);
}
.s-hero__cue-line::after {
  content: ""; position: absolute; left: 0; top: 0; width: 1px; height: 50%;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0), #fff);
  transform: translateY(-110%);
  animation: s-hero-cue 2.4s var(--ease-in-out) infinite;
}
.s-hero.is-off .s-hero__cue-line::after { animation-play-state: paused; }
@keyframes s-hero-cue {
  0% { transform: translateY(-110%); }
  70%, 100% { transform: translateY(210%); }
}

/* ---------- Pre-intro state ----------
   Hidden only while JS is about to run the intro. A CSS failsafe reveals the copy
   if scripts never arrive; JS removes it (.is-intro) or shows everything (.is-static). */
html.js .s-hero__in { opacity: 0; animation: s-hero-failsafe 0.8s var(--ease-out) 2.8s forwards; }
.s-hero.is-intro .s-hero__in { animation: none; }
.s-hero.is-static .s-hero__in { opacity: 1; animation: none; }
@keyframes s-hero-failsafe { to { opacity: 1; } }

/* ---------- Responsive ---------- */
/* Short laptop screens: give the mark a little more of the height */
@media (min-width: 768px) and (max-height: 780px) {
  .s-hero__title { font-size: min(var(--fs-hero), 11.4svh); }
  .s-hero__lead { font-size: min(var(--fs-lead), 1.3rem); }
}
/* Portrait tablets have height to spare: a bigger headline, a calmer mark */
@media (min-width: 768px) and (max-width: 1023px) and (orientation: portrait) {
  .s-hero__title { font-size: min(11.2vw, 12.8svh); }
  .s-hero__slot { max-height: 34svh; }
}
@media (max-width: 767px) {
  .s-hero__title { font-size: clamp(2.875rem, 13.6vw, 4.25rem); }
  .s-hero__inner { padding-bottom: clamp(62px, 9svh, 84px); }
  .s-hero__slot { width: min(100%, 78vw); margin-block: clamp(10px, 2.4svh, 24px); }
  .s-hero__lead { font-size: 1.125rem; max-width: 22em; }
  .s-hero__cta { gap: 12px 24px; }
}
@media (max-width: 767px) and (max-height: 700px) {
  .s-hero__lead { font-size: 1.0625rem; }
}
/* Phones in landscape (and other very short windows): a stacked column cannot fit
   the headline, mark, lead and CTA in ~375px of height, so the copy sits left and the
   mark takes the right-hand column. The whole hero then fits in one 100svh screen,
   which matters because the stage is pinned and its copy fades on scroll. */
@media (orientation: landscape) and (max-height: 500px) {
  .s-hero__stage { min-height: 300px; }
  .s-hero__inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 0.8fr);
    grid-template-rows: auto auto;
    align-content: center;
    column-gap: clamp(20px, 4vw, 56px);
    text-align: left;
    padding: calc(var(--nav-h) + 10px) max(var(--gutter), env(safe-area-inset-right), (100% - var(--w-content)) / 2)
             14px max(var(--gutter), env(safe-area-inset-left), (100% - var(--w-content)) / 2);
  }
  .s-hero__top,
  .s-hero__bottom { align-items: flex-start; transform-origin: 0 50%; }
  .s-hero__top { grid-area: 1 / 1; align-self: end; }
  .s-hero__bottom { grid-area: 2 / 1; align-self: start; }
  .s-hero__eyebrow { margin-bottom: 6px; }
  .s-hero__title { font-size: clamp(2.25rem, 12.6svh, 3.5rem); }
  .s-hero__lead { margin-top: 12px; max-width: 24em; font-size: clamp(0.9375rem, 4.4svh, 1.125rem); }
  .s-hero__cta { justify-content: flex-start; margin-top: 14px; gap: 8px 24px; }
  .s-hero__slot {
    grid-area: 1 / 2 / 3 / 3; align-self: stretch;
    width: 100%; min-height: 0; max-height: none;
    margin: 0;
  }
  /* no room for the tagline + scroll cue row under the copy */
  .s-hero__foot { display: none; }
}
@media (orientation: landscape) and (max-height: 500px) and (max-width: 640px) {
  .s-hero__inner { grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr); }
}

@media (prefers-reduced-motion: reduce) {
  html.js .s-hero__in { opacity: 1; animation: none; }
  .s-hero__cue-line::after { animation: none; transform: translateY(50%); }
}

/* ---- 11-reveal.css ---- */
/* =====================================================================
   11-reveal — "Every load. Every route." → the photo opens to full bleed
   Default (no JS / reduced motion): a static statement on black, then the
   full-bleed photo with the second message over a darkened base.
   .is-anim (added by JS): one pinned 100svh stage. The photo is a full-bleed
   layer clipped (clip-path inset … round 28px) to a card measured from
   .s-reveal__frame, then opened to the edges on scroll.
   ===================================================================== */
.s-reveal { position: relative; }
.s-reveal__stage { position: relative; }

.s-reveal__intro {
  position: relative;
  padding: var(--section-pad) var(--gutter) clamp(56px, 8vw, 112px);
  text-align: center;
}
.s-reveal__title { margin: 0; }
.s-reveal__mask { display: block; overflow: hidden; padding: 0 0.06em 0.1em; margin-bottom: -0.1em; }
.s-reveal__line { display: block; }

.s-reveal__frame,
.s-reveal__caption { display: none; }

.s-reveal__media {
  position: relative;
  height: 100vh; height: 100svh; min-height: 560px;
  overflow: hidden;
  background: var(--bg-2);
}
.s-reveal__img {
  position: absolute; inset: 0;
  width: 100%; height: 100%; max-width: none;
  object-fit: cover; object-position: 50% 58%;
  transform-origin: 50% 50%;
}
.s-reveal__shade {
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(0deg,
    rgba(0, 0, 0, 0.86) 0%, rgba(0, 0, 0, 0.66) 22%, rgba(0, 0, 0, 0.26) 46%, rgba(0, 0, 0, 0) 64%);
}

.s-reveal__message {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
  padding-bottom: clamp(40px, 9svh, 104px);
  pointer-events: none;
}
.s-reveal__msg { margin: 0; color: var(--fg); }
.s-reveal__lead {
  margin-top: clamp(12px, 1.8vw, 22px);
  max-width: 26em;
  color: rgba(245, 245, 247, 0.84);
}

/* ---------- Animated (pinned) layout ---------- */
.s-reveal.is-anim .s-reveal__stage {
  --stmt: calc(var(--fs-h1) * 2.12);
  --card-w: clamp(260px, calc((100svh - var(--nav-h) - var(--stmt) - 128px) * 4 / 3), 46vw);
  height: 100vh; height: 100svh;
  overflow: hidden;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: calc(var(--nav-h) + clamp(12px, 2.4svh, 32px)) var(--gutter) clamp(12px, 2.4svh, 32px);
}
.s-reveal.is-anim .s-reveal__intro { padding: 0; z-index: 0; }
.s-reveal.is-anim .s-reveal__frame {
  display: block; flex: none;
  width: var(--card-w); aspect-ratio: 4 / 3;
  margin-top: clamp(20px, 4svh, 44px);
}
.s-reveal.is-anim .s-reveal__caption {
  display: block; position: relative; z-index: 0;
  margin-top: 14px; text-align: center;
}
.s-reveal.is-anim .s-reveal__media {
  position: absolute; inset: 0; z-index: 1;
  height: auto; min-height: 0;
  background: transparent;
  container-type: size;
}
/* The img box holds the WHOLE 4:3 photo at "cover" size, offset exactly like the
   static object-position (50% 58%; 28% 50% on phones). The stage clips it, so the final frame is
   identical to object-fit: cover, but the starting card can frame any part of
   the photo (--focus-x/--focus-y, read by JS) without ever exposing an edge.
   Written without custom properties inside max() so browsers without container
   units simply drop these lines and keep the plain cover layout. */
.s-reveal.is-anim .s-reveal__img {
  right: auto; bottom: auto;
  width: max(100cqw, 133.334cqh);
  height: max(100cqh, 75cqw);
  left: calc((100cqw - max(100cqw, 133.334cqh)) * 0.5);
  top: calc((100cqh - max(100cqh, 75cqw)) * 0.58);
}
/* Starting crop: the pipe ends and the crew against the sky (photo fractions) */
.s-reveal.is-anim .s-reveal__stage {
  --focus-x: 0.35; --focus-y: 0.345;
  --keep-l: 0.44; --keep-t: 0.185; --keep-r: 0.535; --keep-b: 0.36;   /* the crew member, head to boots */
}
.s-reveal.is-anim .s-reveal__message { z-index: 2; }

/* ---------- Tablet ---------- */
@media (min-width: 768px) and (max-width: 1023px) {
  .s-reveal.is-anim .s-reveal__stage {
    --card-w: clamp(260px, calc((100svh - var(--nav-h) - var(--stmt) - 160px) * 4 / 3), 66vw);
  }
}
/* Portrait tablets: a taller card fills the height instead of floating in black */
@media (min-width: 768px) and (orientation: portrait) {
  .s-reveal.is-anim .s-reveal__stage {
    --card-w: clamp(260px, calc((100svh - var(--nav-h) - var(--stmt) - 170px) * 4 / 5), 64vw);
  }
  .s-reveal.is-anim .s-reveal__frame { aspect-ratio: 4 / 5; }
}

/* ---------- Mobile: portrait framing ---------- */
@media (max-width: 767px) {
  .s-reveal__img { object-position: 28% 50%; }
  .s-reveal__shade {
    background: linear-gradient(0deg,
      rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0.72) 26%, rgba(0, 0, 0, 0.3) 50%, rgba(0, 0, 0, 0) 68%);
  }
  .s-reveal__message-inner { text-align: center; }
  .s-reveal__msg { font-size: clamp(2rem, 9.2vw, 2.75rem); }
  .s-reveal__lead { margin-inline: auto; max-width: 20em; font-size: 1.125rem; }
  .s-reveal.is-anim .s-reveal__stage {
    --card-w: clamp(220px, calc((100svh - var(--nav-h) - var(--stmt) - 150px) * 4 / 5), 84vw);
    --focus-x: 0.2; --focus-y: 0.36;   /* the card opens on the stacked pipe ends */
    --keep-l: initial; --keep-t: initial; --keep-r: initial; --keep-b: initial;
  }
  .s-reveal.is-anim .s-reveal__frame { aspect-ratio: 4 / 5; }
  .s-reveal.is-anim .s-reveal__img {
    left: calc((100cqw - max(100cqw, 133.334cqh)) * 0.28);
    top: calc((100cqh - max(100cqh, 75cqw)) * 0.5);
  }
}

/* ---------- Phones in landscape / very short windows ----------
   ~375px of height cannot hold a two-line statement, a card and the caption under
   the 52px nav. The statement goes to one smaller line and the card back to 4:3
   (with the desktop crop), so all three sit below the nav at the pin start. */
@media (orientation: landscape) and (max-height: 500px) {
  .s-reveal.is-anim .s-reveal__stage {
    --stmt-fs: clamp(1.75rem, 10svh, 2.75rem);
    --stmt: calc(var(--stmt-fs) * 1.12);
    --card-w: clamp(180px, calc((100svh - var(--nav-h) - var(--stmt) - 76px) * 4 / 3), 62vw);
    padding-top: calc(var(--nav-h) + 8px);
    padding-bottom: 8px;
    --focus-x: 0.35; --focus-y: 0.345;
    --keep-l: 0.44; --keep-t: 0.185; --keep-r: 0.535; --keep-b: 0.36;
  }
  .s-reveal.is-anim .s-reveal__title { font-size: var(--stmt-fs); white-space: nowrap; }
  .s-reveal.is-anim .s-reveal__title .s-reveal__mask { display: inline-block; vertical-align: top; }
  .s-reveal.is-anim .s-reveal__frame { aspect-ratio: 4 / 3; margin-top: 14px; }
  .s-reveal.is-anim .s-reveal__caption { margin-top: 8px; }
  .s-reveal.is-anim .s-reveal__img {
    left: calc((100cqw - max(100cqw, 133.334cqh)) * 0.5);
    top: calc((100cqh - max(100cqh, 75cqw)) * 0.58);
  }
  .s-reveal__msg { font-size: clamp(2rem, 13svh, 3.25rem); }
  .s-reveal__message { padding-bottom: clamp(24px, 7svh, 40px); }
}

/* ---- 20-intro.css ---- */
/* =====================================================================
   20 · INTRO — Apple-style scroll-lit paragraph + stats row (light)
   ===================================================================== */
.s-intro {
  /* Unlit word colour and a deeper brand gradient that holds contrast on white
     (the shared --grad-brand fades to #a5e4ff, which is meant for dark grounds). */
  --intro-dim: #d2d2d7;
  --ig1: #2b1f5c; --ig2: #0b4fc4; --ig3: #0071e3; --ig4: #0a8fd6;
  --intro-grad: linear-gradient(100deg, var(--ig1) 0%, var(--ig2) 34%, var(--ig3) 64%, var(--ig4) 100%);
  --intro-num: clamp(4rem, 8.4vw, 7.5rem);
  padding-bottom: clamp(104px, 13vw, 200px);
}

/* ---------- Lockup: eyebrow + lit paragraph ---------- */
.s-intro__lockup { position: relative; }
.s-intro .s-intro__eyebrow {
  margin-bottom: clamp(16px, 1.8vw, 26px);
  background-image: var(--intro-grad);
}
.s-intro__copy {
  max-width: 24ch;
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 4.8vw + 0.25rem, 3.25rem);
  line-height: 1.16;
  font-weight: 600;
  letter-spacing: -0.028em;
  color: var(--fg);
  text-wrap: pretty;
}
.s-intro__key {
  background: var(--intro-grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-box-decoration-break: slice;
  box-decoration-break: slice;
}

/* Scrubbed state (JS adds .is-scrub and wraps words). --p goes 0 → 1 per word. */
.s-intro__copy.is-scrub .s-intro__w {
  --p: 0;
  color: color-mix(in srgb, var(--fg) calc(var(--p) * 100%), var(--intro-dim));
}
/* Key words carry their own gradient, clipped to the glyphs. Each stop is
   mixed from the dim grey toward the brand colour by --p in ONE layer (two
   stacked clipped layers leak a halo at anti-aliased edges). JS sets --gw/--gx
   so the gradient runs continuously across the whole phrase. */
.s-intro__copy.is-scrub .s-intro__key { background: none; color: inherit; }
.s-intro__copy.is-scrub .s-intro__w--key {
  --m: calc(var(--p) * 100%);
  color: transparent;
  background-image: linear-gradient(100deg,
    color-mix(in srgb, var(--ig1) var(--m), var(--intro-dim)) 0%,
    color-mix(in srgb, var(--ig2) var(--m), var(--intro-dim)) 34%,
    color-mix(in srgb, var(--ig3) var(--m), var(--intro-dim)) 64%,
    color-mix(in srgb, var(--ig4) var(--m), var(--intro-dim)) 100%);
  background-size: var(--gw, 100%) 100%;
  background-position: var(--gx, 0px) 0;
  background-repeat: no-repeat;
  -webkit-background-clip: text;
  background-clip: text;
}
.s-intro__w, .s-intro__nb { white-space: nowrap; }

/* ---------- Stats ---------- */
.s-intro__facts { margin-top: clamp(88px, 11vw, 168px); }
.s-intro__stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 48px clamp(20px, 2.6vw, 36px);
}
.s-intro__stat { position: relative; padding-top: clamp(22px, 2.4vw, 32px); }
.s-intro__rule {
  position: absolute; inset: 0 0 auto 0; height: 1px;
  background: #d2d2d7;
  transform-origin: 0 50%;
}
.s-intro__num {
  font-family: var(--font-display);
  font-size: var(--intro-num);
  line-height: 1;
  font-weight: 600;
  letter-spacing: -0.045em;
  color: var(--fg);
  height: 1em;
}
.s-intro__num .tabular { display: inline-block; min-width: 0.6em; }
.s-intro__label {
  margin-top: clamp(12px, 1.3vw, 18px);
  max-width: 14em;
  font-family: var(--font-display);
  font-size: clamp(1rem, 1.25vw, 1.1875rem);
  line-height: 1.32;
  font-weight: 500;
  letter-spacing: -0.012em;
  color: var(--fg-2);
}

/* The fourth tile: the N.S. mark sits on the digits' baseline at cap height. */
.s-intro__mark {
  display: flex; align-items: flex-end;
  padding-bottom: 0.135em;
  color: var(--c-indigo);
}
.s-intro__mark svg { width: auto; height: 0.73em; overflow: visible; }
.s-intro__tagline { color: var(--fg); font-weight: 600; }

@media (max-width: 767px) {
  .s-intro__stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 44px 20px; }
  .s-intro__copy { max-width: 22ch; }
}
@media (max-width: 359px) {
  .s-intro__copy { font-size: 1.625rem; }
}

/* ---- 30-services.css ---- */
/* =====================================================================
   30 · SERVICES — four types of logistics
   Default (no JS, reduced motion, < 900px): native scroll-snap row.
   .is-pinned (JS, desktop): pinned stage, track translated by scroll.
   ===================================================================== */
.s-services {
  --edge: max(var(--gutter), calc((100% - var(--w-content)) / 2));
  --gap: clamp(14px, 1.8vw, 24px);
  --card-w: clamp(272px, 76vw, 380px);
  --card-h: calc(var(--card-w) * 4 / 3);
  --card-pad: clamp(22px, 2.3vw, 32px);
  position: relative;
  padding-block: var(--section-pad) clamp(72px, 9vw, 132px);
}

/* ---------- Header ---------- */
.s-services__head {
  display: grid;
  gap: 18px;
  margin-bottom: clamp(36px, 4.6vw, 64px);
}
.s-services__title { margin-top: 10px; }
.s-services__lead { max-width: 26ch; }
@media (min-width: 900px) {
  /* The headline keeps the shared .h1 scale: its column takes the width of its
     longest line (each line is set on its own), the lead takes what remains. */
  .s-services__head { grid-template-columns: max-content minmax(0, 1fr); align-items: end; column-gap: clamp(40px, 6vw, 96px); }
  .s-services__title { white-space: nowrap; }
  .s-services__lead { justify-self: end; padding-bottom: 0.08em; }
}

/* ---------- Row ---------- */
.s-services__stage { position: relative; }
.s-services__viewport {
  position: relative;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--edge);
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.s-services__viewport::-webkit-scrollbar { display: none; }
.s-services__viewport:focus-visible { outline-offset: -2px; border-radius: 0; }
.s-services .s-services__track {
  position: relative;
  display: flex;
  gap: var(--gap);
  width: max-content;
  margin: 0;
  padding: 18px var(--edge) 26px;
  list-style: none;
}
.s-services__item { flex: none; width: var(--card-w); scroll-snap-align: start; }

/* ---------- Card ---------- */
.s-services__card {
  position: relative;
  isolation: isolate;
  display: flex; flex-direction: column; justify-content: space-between;
  height: var(--card-h);
  padding: var(--card-pad);
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--c-graphite);
  color: var(--c-fog);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.06);
  transition: box-shadow 0.6s var(--ease-out);
  -webkit-tap-highlight-color: transparent;
}
.s-services__photo {
  position: absolute; inset: 0; z-index: -3;
  overflow: hidden;
  transition: transform 1.2s var(--ease-out);
}
.s-services__img {
  position: absolute; top: 0; left: -15%;
  width: 130%; max-width: none; height: 100%;
  object-fit: cover;
  object-position: var(--pos, 50%) 50%;
  will-change: transform;
}
.s-services__shade {
  position: absolute; inset: 0; z-index: -2;
  background:
    linear-gradient(180deg, rgba(0, 0, 0, 0.56) 0%, rgba(0, 0, 0, 0.18) 16%, rgba(0, 0, 0, 0) 30%),
    linear-gradient(0deg, rgba(0, 0, 0, 0.92) 0%, rgba(0, 0, 0, 0.66) 30%, rgba(0, 0, 0, 0) 60%);
}
.s-services__glare {
  position: absolute; inset: 0; z-index: -1;
  pointer-events: none;
  opacity: 0;
  background: radial-gradient(520px circle at var(--gx, 50%) var(--gy, 0%), rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.04) 38%, transparent 62%);
  transition: opacity 0.6s var(--ease-out);
}
.s-services__top { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.s-services__index {
  font-family: var(--font-display);
  font-size: clamp(3.25rem, 4.6vw, 4.75rem);
  line-height: 0.86;
  font-weight: 600;
  letter-spacing: -0.055em;
  background: linear-gradient(180deg, #ffffff 18%, #e6e9ef 58%, #a9b0bd 100%);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
  padding-right: 0.04em;
  filter: drop-shadow(0 2px 14px rgba(0, 0, 0, 0.32));
}
.s-services .s-services__chip {
  flex: none;
  margin-top: 2px;
  padding: 7px 13px;
  font-size: 0.8125rem; font-weight: 500; letter-spacing: -0.005em;
  color: #fff;
  background: rgba(22, 22, 24, 0.46);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.14);
  -webkit-backdrop-filter: blur(20px) saturate(170%);
  backdrop-filter: blur(20px) saturate(170%);
}
.s-services__body { position: relative; }
.s-services__name {
  font-size: clamp(1.5rem, 2.05vw, 2rem);
  line-height: 1.08;
  font-weight: 600;
  letter-spacing: -0.026em;
  max-width: 14ch;
  text-wrap: balance;
}
.s-services__name span { font-weight: 500; color: rgba(245, 245, 247, 0.56); }
.s-services__name .s-services__nw { font-weight: inherit; color: inherit; white-space: nowrap; }
.s-services__desc {
  margin-top: 12px;
  max-width: 31ch;
  font-size: clamp(0.9375rem, 1.1vw, 1.0625rem);
  line-height: 1.42;
  color: rgba(245, 245, 247, 0.8);
}
.s-services__link { margin-top: 16px; color: var(--c-blue-bright); }
/* Inline chevron links are ~25px tall: an invisible pseudo grows the hit area
   to >= 44px without moving the layout. */
.s-services__link, .s-services__tel { position: relative; }
.s-services__link::before, .s-services__tel::before { content: ""; position: absolute; inset: -10px -8px; }

/* CTA card */
.s-services__card--cta {
  background:
    radial-gradient(120% 80% at 100% 0%, rgba(41, 151, 255, 0.28) 0%, rgba(41, 151, 255, 0) 55%),
    radial-gradient(110% 90% at 0% 100%, #10306f 0%, #0a1f4d 38%, #050c22 72%, #050c22 100%);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.1);
}
.s-services__cta-mark { display: block; width: clamp(48px, 4.4vw, 64px); color: #fff; }
.s-services__cta-mark svg { width: 100%; height: auto; overflow: visible; }
.s-services__cta-mark .lg-piece { transition: transform 0.9s var(--ease-out); }
.s-services__card--cta.is-hover .s-services__cta-mark .lg-piece,
.s-services__card--cta:focus-within .s-services__cta-mark .lg-piece { transform: translate(var(--dx, 0), var(--dy, 0)); }
.s-services__watermark { color: #fff; }
.s-services__watermark svg {
  /* a large mark cropped by the card's top-right corner, fading toward the copy */
  position: absolute; top: -4%; left: 40%;
  width: 60%; height: auto;
  opacity: 0.1;
  -webkit-mask-image: linear-gradient(208deg, #000 18%, rgba(0, 0, 0, 0.4) 52%, transparent 82%);
  mask-image: linear-gradient(208deg, #000 18%, rgba(0, 0, 0, 0.4) 52%, transparent 82%);
}
.s-services__name--cta { font-size: clamp(2rem, 3.3vw, 3rem); line-height: 1.02; letter-spacing: -0.032em; max-width: 9ch; }
.s-services__card--cta .s-services__desc { max-width: 26ch; }
.s-services__cta-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 22px; margin-top: 24px; }
.s-services__tel { color: var(--c-fog); }
.s-services__tel::after { display: none; }

/* Hover (fine pointers only) */
@media (hover: hover) and (pointer: fine) {
  .s-services__card.is-hover { box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.16), 0 40px 80px -20px rgba(0, 0, 0, 0.9); }
  .s-services__card.is-hover .s-services__photo { transform: scale(1.06); }
  .s-services__card.is-hover .s-services__glare { opacity: 1; }
}

/* ---------- UI: counter, progress, dots, paddles ---------- */
.s-services__ui {
  display: flex; align-items: center; gap: clamp(16px, 2.4vw, 32px);
  margin-top: clamp(14px, 1.8vw, 22px);
  min-height: 44px;
}
.s-services__count {
  display: none;
  align-items: center; gap: 0.4em;
  font-family: var(--font-display);
  font-size: 1.0625rem; font-weight: 600; letter-spacing: 0.01em;
  color: var(--fg);
}
.s-services__count-mask { display: block; height: 1.2em; overflow: hidden; }
.s-services__count-reel { display: block; transition: transform 0.7s var(--ease-out); }
.s-services__count-reel span { display: block; height: 1.2em; line-height: 1.2em; }
.s-services__count-total { color: var(--fg-2); font-weight: 500; }
.s-services__bar {
  display: none;
  flex: 1; height: 2px; border-radius: 2px; overflow: hidden;
  background: rgba(255, 255, 255, 0.16);
}
.s-services__bar span { display: block; height: 100%; background: var(--c-fog); transform-origin: 0 50%; transform: scaleX(0); }
.s-services__dots {
  display: flex; align-items: center; gap: 10px;
  height: 44px; padding: 0 18px;
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, 0.08);
}
.s-services__dots span {
  width: 8px; height: 8px; border-radius: 8px;
  background: rgba(255, 255, 255, 0.36);
  transition: width 0.5s var(--ease-out), background-color 0.5s var(--ease-out);
}
.s-services__dots span.is-active { width: 26px; background: var(--c-fog); }
.s-services__nav { display: flex; gap: 14px; margin-left: auto; }
.s-services__btn {
  display: grid; place-items: center;
  width: 44px; height: 44px; border-radius: 50%;
  background: rgba(255, 255, 255, 0.12);
  color: var(--c-fog);
  transition: background-color 0.3s ease, opacity 0.3s ease, transform 0.45s var(--ease-out);
}
.s-services__btn svg { width: 36px; height: 36px; }
.s-services__btn:hover:not([aria-disabled="true"]) { background: rgba(255, 255, 255, 0.2); }
.s-services__btn:active:not([aria-disabled="true"]) { transform: scale(0.92); }
.s-services__btn[aria-disabled="true"] { opacity: 0.32; cursor: default; }

/* ---------- Pinned desktop mode ---------- */
@media (min-width: 900px) {
  .s-services {
    --card-h: clamp(400px, calc(100svh - var(--nav-h) - 176px), 640px);
    --card-w: clamp(360px, calc(var(--card-h) * 0.75), 480px);
  }
}
.s-services.is-pinned .s-services__stage {
  height: calc(100svh - var(--nav-h));
  display: flex; flex-direction: column; justify-content: center;
}
.s-services.is-pinned .s-services__viewport {
  overflow-x: clip; overflow-y: visible;
  scroll-snap-type: none;
}
.s-services.is-pinned .s-services__track { will-change: transform; }
.s-services.is-pinned .s-services__count { display: flex; }
.s-services.is-pinned .s-services__bar { display: block; }
.s-services.is-pinned .s-services__dots { display: none; }

/* Phones in landscape: portrait cards would be taller than the screen, so the
   row switches to landscape cards that fit under the nav with their UI row. */
@media (max-width: 899px) and (max-height: 500px) and (orientation: landscape) {
  .s-services {
    /* card + track padding (10 + 12) + UI margin (10) + UI row (44) = the
       height under the nav, so a card and its paddles/dots share the screen. */
    --card-h: max(220px, calc(100svh - var(--nav-h) - 76px));
    --card-w: calc(var(--card-h) * 4 / 3);
    --card-pad: 20px;
  }
  .s-services .s-services__track { padding-block: 10px 12px; }
  .s-services .s-services__ui { margin-top: 10px; }
  .s-services .s-services__index { font-size: 2.5rem; }
  /* wide, short cards: let the copy use the width so it takes fewer lines */
  .s-services .s-services__name, .s-services .s-services__desc,
  .s-services .s-services__card--cta .s-services__desc { max-width: none; }
  .s-services .s-services__desc { margin-top: 8px; }
  .s-services .s-services__link { margin-top: 10px; }
  .s-services .s-services__name--cta { font-size: 1.625rem; max-width: none; }
  /* the copy covers more of a short card, so the shade climbs higher */
  .s-services .s-services__shade {
    background:
      linear-gradient(180deg, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0.14) 20%, rgba(0, 0, 0, 0) 34%),
      linear-gradient(0deg, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0.64) 42%, rgba(0, 0, 0, 0) 78%);
  }
  .s-services__cta-mark { width: 40px; }
  .s-services__cta-actions { margin-top: 14px; }
}
@media (max-width: 899px) and (max-height: 380px) and (orientation: landscape) {
  .s-services { --card-pad: 18px; }
  .s-services .s-services__index { font-size: 2.125rem; }
  .s-services .s-services__name { font-size: 1.375rem; }
  .s-services .s-services__name--cta { font-size: 1.5rem; }
  .s-services .s-services__cta-mark { display: none; }
}

@media (max-width: 899px) {
  .s-services__watermark svg { top: -5%; left: 56%; width: 46%; }
  .s-services__name { font-size: clamp(1.5rem, 3.6vw, 1.75rem); }
  .s-services__name--cta { font-size: clamp(1.75rem, 4.4vw, 2.125rem); }
}
@media (max-width: 420px) {
  .s-services__index { font-size: 3rem; }
  .s-services__desc { font-size: 0.9375rem; }
}

/* ---- 40-odc.css ---- */
/* =====================================================================
   40 · ODC specialist: Apple-style "callouts" spotlight
   Default (no JS / reduced motion) = complete static state:
     photo + dimension drawing + callouts (desktop) or list (compact),
     statement set as a closing line below.
   .s-odc--pinned (added by JS on desktop when motion is on) turns the
   stage into a 100svh pinned scene with the statement over the photo.
   ===================================================================== */
.s-odc {
  --odc-ink: var(--c-ink);
  --odc-line: rgba(255, 255, 255, 0.96);
  --odc-blue: var(--c-blue);
  --odc-frame-w: min(var(--w-content), 100% - 2 * var(--gutter));
  position: relative;
  padding-top: var(--section-pad);
  padding-bottom: clamp(72px, 9vw, 140px);
  overflow-x: clip;
}

/* ---------------- Header ---------------- */
.s-odc__head { text-align: center; }
.s-odc__eyebrow {
  /* 17-21px semibold is not "large" text: every stop stays >= 4.5:1 on white */
  background: linear-gradient(100deg, #004f9e 0%, #0062c4 50%, #0071e3 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.s-odc__title { margin-top: 12px; color: var(--fg); }
.s-odc__lead { max-width: 34ch; margin: clamp(20px, 2.2vw, 30px) auto 0; }

/* ---------------- Stage + frame ---------------- */
.s-odc__stage { position: relative; margin-top: clamp(56px, 7vw, 104px); }
.s-odc__figure { position: relative; }

.s-odc__frame {
  --plane-top: -9%;      /* 4:3 photo cropped to 16:10, focal point 45% down */
  --plane-h: 120%;
  position: relative;
  width: var(--odc-frame-w);
  aspect-ratio: 16 / 10;
  margin-inline: auto;
  border-radius: var(--r-lg);
  overflow: hidden;
  isolation: isolate;
  background: #14161b;
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.03), 0 50px 100px -50px rgba(10, 31, 77, 0.5);
  transform-origin: 50% 50%;
}
.s-odc__plane,
.s-odc__overlay {
  position: absolute;
  left: 0;
  width: 100%;
  top: var(--plane-top);
  height: var(--plane-h);
}
.s-odc__plane { z-index: 0; overflow: hidden; }
.s-odc__img { width: 100%; height: 100%; object-fit: cover; transform-origin: 46% 52%; }

.s-odc__scrim {
  position: absolute; inset: 0; z-index: 1;
  /* near-neutral: a navy tint turned the bright sky a muddy lavender */
  background: linear-gradient(180deg, rgba(4, 8, 18, 0.5) 0%, rgba(4, 8, 18, 0.2) 50%, rgba(4, 8, 18, 0.3) 100%);
  opacity: 0.55;   /* static default: lines legible over the bright sky */
  pointer-events: none;
}
.s-odc__svg {
  position: absolute; inset: 0; z-index: 2;
  width: 100%; height: 100%;
  overflow: visible;
  pointer-events: none;
}
.s-odc__overlay { z-index: 3; pointer-events: none; }
.s-odc__cards { position: absolute; inset: 0; z-index: 4; pointer-events: none; }
.s-odc__shade {
  position: absolute; inset: 0; z-index: 5;
  /* darkest behind the statement, where the copy needs the contrast */
  background: radial-gradient(70% 60% at 50% 50%, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0.5) 100%);
  opacity: 0;
  pointer-events: none;
}

/* ---------------- Dimension drawing (SVG built by JS) ---------------- */
.s-odc__svg .odc-dims { filter: drop-shadow(0 1px 1.5px rgba(0, 0, 0, 0.45)); }
.s-odc__svg .odc-dl {
  fill: none; stroke: var(--odc-line); stroke-width: 1.5; stroke-linecap: butt;
  stroke-dasharray: 1 2; stroke-dashoffset: 0;
}
.s-odc__svg .odc-ext {
  fill: none; stroke: rgba(255, 255, 255, 0.78); stroke-width: 1; stroke-dasharray: 3 4;
}
.s-odc__svg .odc-cap path { fill: none; stroke: var(--odc-line); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.s-odc__svg .odc-cap .odc-arrow { fill: var(--odc-line); stroke: none; }
.s-odc__svg .odc-cap circle { fill: none; stroke: none; }
.s-odc__svg .odc-leaders { filter: drop-shadow(0 1px 1.5px rgba(0, 0, 0, 0.4)); }
.s-odc__svg .odc-leader {
  fill: none; stroke: rgba(255, 255, 255, 0.95); stroke-width: 1.25;
  stroke-dasharray: 1 2; stroke-dashoffset: 0;
}

.s-odc__dimlabel {
  position: absolute;
  translate: -50% -50%;
  white-space: nowrap;
}
.s-odc__pill {
  display: block;
  padding: 6px 12px 6px;
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, 0.9);
  -webkit-backdrop-filter: saturate(180%) blur(12px);
  backdrop-filter: saturate(180%) blur(12px);
  color: var(--odc-ink);
  font-family: var(--font-text);
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.005em;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18);
}

/* ---------------- Callouts: pulsing anchor + leader + card ---------------- */
.s-odc__dot {
  position: absolute;
  width: 18px; height: 18px;
  translate: -50% -50%;
}
.s-odc__dot-core {
  position: absolute; inset: 0;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.06), 0 2px 10px rgba(0, 0, 0, 0.35);
}
.s-odc__dot-core::before {
  content: ""; position: absolute; inset: 5px; border-radius: 50%;
  background: var(--odc-blue);
}
.s-odc__dot-core::after {
  content: ""; position: absolute; inset: -1px; border-radius: 50%;
  border: 1.5px solid rgba(255, 255, 255, 0.9);
  opacity: 0;
  animation: s-odc-pulse 2.4s var(--ease-out) infinite paused;
}
.s-odc__frame.is-live .s-odc__dot-core::after { animation-play-state: running; }
@keyframes s-odc-pulse {
  0% { transform: scale(1); opacity: 0.9; }
  70%, 100% { transform: scale(2.6); opacity: 0; }
}

.s-odc__card {
  position: absolute;
  width: clamp(14rem, 22%, 17rem);
  padding: 15px 18px 16px;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.88);
  -webkit-backdrop-filter: saturate(180%) blur(18px);
  backdrop-filter: saturate(180%) blur(18px);
  color: var(--odc-ink);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.6) inset, 0 12px 32px rgba(0, 0, 0, 0.22);
}
.s-odc__card-title {
  font-family: var(--font-display);
  font-size: 1.0625rem; font-weight: 600; line-height: 1.2; letter-spacing: -0.018em;
}
.s-odc__card-text {
  margin-top: 4px;
  font-size: 0.875rem; line-height: 1.36; letter-spacing: -0.01em;
  color: #515154;
}
/* Card placement (frame percentages); anchors live in the JS map. */
.s-odc__card--route    { right: 2.6%; top: 47%; }
.s-odc__card--handling { left: 2.6%;  top: 4%; }
.s-odc__card--delivery { left: 2.6%;  bottom: 4%; }
.s-odc__card--coord    { right: 2.6%; bottom: 4%; }

/* ---------------- Closing statement (static default: below the photo) ---------------- */
.s-odc__statement {
  margin-top: clamp(56px, 7vw, 96px);
  text-align: center;
  font-family: var(--font-display);
  font-size: var(--fs-h2);
  font-weight: 700;
  line-height: 1.06;
  letter-spacing: -0.035em;
  color: var(--fg);
}
.s-odc__sline { display: block; overflow: hidden; padding-bottom: 0.08em; margin-bottom: -0.08em; }
.s-odc__sline > span { display: inline-block; }
.s-odc__accent {
  background: linear-gradient(100deg, #0058b0 0%, #0071e3 45%, #2997ff 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* ---------------- Callout list (compact layouts + screen readers) ---------------- */
.s-odc__list {
  /* visually hidden on desktop: the overlay cards carry the content there */
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.s-odc__item-title {
  font-family: var(--font-display);
  font-size: var(--fs-h4); font-weight: 600; line-height: 1.2; letter-spacing: -0.02em;
  color: var(--fg);
}
.s-odc__item-text { margin-top: 6px; color: var(--fg-2); font-size: var(--fs-body); line-height: 1.45; }

/* =====================================================================
   Pinned scene (desktop, motion on)
   ===================================================================== */
.s-odc--pinned { padding-bottom: clamp(32px, 4vw, 64px); }
.s-odc--pinned .s-odc__stage {
  height: 100vh;
  height: 100svh;
  margin-top: clamp(24px, 3vw, 48px);
  padding-top: var(--nav-h);
  display: grid;
  place-items: center;
}
.s-odc--pinned .s-odc__figure { width: 100%; }
.s-odc--pinned .s-odc__frame {
  --odc-frame-w: min(var(--w-content), 100vw - 2 * var(--gutter), (100svh - var(--nav-h) - 88px) * 1.6);
  will-change: transform, clip-path;
}
.s-odc--pinned .s-odc__statement {
  position: absolute;
  inset: var(--nav-h) 0 0 0;
  z-index: 6;
  margin: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  color: #fff;
  font-size: clamp(2.75rem, 5.4vw, 5rem);
  text-shadow: 0 2px 30px rgba(0, 0, 0, 0.25);
  pointer-events: none;
}
.s-odc--pinned .s-odc__accent {
  background: linear-gradient(100deg, #8ccfff 0%, #5ac8fa 45%, #c8ecff 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* =====================================================================
   Compact (tablet + mobile): 4:3 photo, callouts become a list
   ===================================================================== */
@media (max-width: 1023px) {
  .s-odc { padding-bottom: clamp(80px, 12vw, 120px); }
  .s-odc__frame {
    --plane-top: 0%;
    --plane-h: 100%;
    --odc-frame-w: min(760px, 100% - 2 * var(--gutter));
    aspect-ratio: 4 / 3;
    border-radius: clamp(18px, 3.4vw, 28px);
  }
  .s-odc__dot, .s-odc__cards, .s-odc__svg .odc-leaders { display: none; }
  .s-odc__pill { font-size: 0.75rem; padding: 5px 10px; }

  .s-odc__list {
    position: relative !important; width: min(760px, 100% - 2 * var(--gutter)); height: auto;
    margin: clamp(36px, 6vw, 56px) auto 0; overflow: visible; clip: auto; white-space: normal;
    display: grid; grid-template-columns: 1fr 1fr; gap: 32px 40px;
    counter-reset: odc;
  }
  .s-odc__item { position: relative; padding-top: 20px; border-top: 1px solid var(--line); }
  .s-odc__item::before {
    counter-increment: odc;
    content: "";
    position: absolute; top: -4.5px; left: 0;
    width: 8px; height: 8px; border-radius: 50%;
    background: var(--odc-blue);
    box-shadow: 0 0 0 4px var(--bg);
  }
  .s-odc__statement { margin-top: clamp(56px, 10vw, 88px); }
}
@media (max-width: 767px) {
  .s-odc__list { grid-template-columns: 1fr; gap: 26px; }
  .s-odc__pill { font-size: 0.6875rem; padding: 4px 8px; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18); }
  .s-odc__svg .odc-dl { stroke-width: 1.25; }
  .s-odc__statement { font-size: clamp(1.875rem, 8.2vw, 2.75rem); }
}

/* No JS at all: the drawing is generated by script, so show only the list. */
html.no-js .s-odc__svg, html.no-js .s-odc__overlay, html.no-js .s-odc__cards { display: none; }
html.no-js .s-odc__list {
  position: relative !important; width: min(760px, 100% - 2 * var(--gutter)); height: auto;
  margin: 48px auto 0; overflow: visible; clip: auto; white-space: normal; display: grid; gap: 24px;
}

/* ---- 45-functions.css ---- */
/* =====================================================================
   45 · Key functions: Apple-style bento grid
   .s-functions__cell = grid item (entrance motion)
   .s-functions__tile = the visual card (hover zoom + subtle tilt)
   ===================================================================== */
.s-functions {
  --fx-gap: clamp(14px, 1.7vw, 22px);
  --fx-pad: clamp(26px, 3vw, 40px);
  --fx-radius: var(--r-lg);
  --fx-shadow: 0 1px 2px rgba(0, 0, 0, 0.03), 0 14px 44px rgba(0, 0, 0, 0.06);
  --fx-shadow-hover: 0 2px 4px rgba(0, 0, 0, 0.04), 0 28px 70px rgba(0, 0, 0, 0.12);
  position: relative;
  padding-block: var(--section-pad);
  overflow-x: clip;
}

/* ---------------- Header ---------------- */
.s-functions__head { margin-bottom: clamp(44px, 6vw, 84px); }
.s-functions__eyebrow {
  /* 17-21px semibold is not "large" text: every stop stays >= 4.5:1 on snow (#f5f5f7) */
  background: linear-gradient(100deg, #004f9e 0%, #0062c4 50%, #0066cc 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.s-functions__title { margin-top: 12px; color: var(--fg); }
.s-functions__lead { max-width: 33ch; margin-top: clamp(20px, 2.2vw, 30px); }

/* ---------------- Grid ---------------- */
.s-functions__grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--fx-gap);
}
.s-functions__cell { position: relative; min-width: 0; display: flex; perspective: 1600px; } /* tilt depth for the tile */
.s-functions__cell--transport  { grid-column: span 8; min-height: clamp(520px, 46vw, 620px); }
.s-functions__cell--inventory  { grid-column: span 4; }
.s-functions__cell--planner    { grid-column: span 7; min-height: clamp(460px, 40vw, 520px); }
.s-functions__cell--road       { grid-column: span 5; }
.s-functions__cell--fleet,
.s-functions__cell--industrial,
.s-functions__cell--covered    { grid-column: span 4; min-height: 400px; }

/* ---------------- Tile ---------------- */
.s-functions__tile {
  position: relative;
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
  border-radius: var(--fx-radius);
  background: var(--surface);
  color: var(--fg);
  box-shadow: var(--fx-shadow);
  overflow: hidden;
  isolation: isolate;
  transition: box-shadow 0.6s var(--ease-out);
}
@media (hover: hover) {
  .s-functions__tile:hover { box-shadow: var(--fx-shadow-hover); }
}
.s-functions__copy { position: relative; z-index: 2; padding: var(--fx-pad) var(--fx-pad) 0; }
.s-functions__h {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 2.15vw, 2rem);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.025em;
  text-wrap: balance;
}
.s-functions__p {
  margin-top: 10px;
  max-width: 30ch;
  font-size: clamp(1.0625rem, 1.2vw, 1.1875rem);
  line-height: 1.4;
  letter-spacing: -0.012em;
  color: var(--fg-2);
}
.s-functions__kicker {
  display: block;
  font-family: var(--font-display);
  font-size: 1.0625rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--fg-2);
  margin-bottom: 6px;
}

/* media */
.s-functions__media { position: relative; overflow: hidden; background: var(--c-mist); }
.s-functions__media img {
  width: 100%; height: 100%; object-fit: cover;
  transform: scale(1.001);
  transition: transform 1.4s var(--ease-out);
}
@media (hover: hover) {
  .s-functions__tile:hover .s-functions__media img { transform: scale(1.045); }
}
.s-functions__media--fill { position: absolute; inset: 0; z-index: 0; }
.s-functions__media--grow { flex: 1; margin-top: clamp(24px, 2.6vw, 34px); min-height: 220px; }
.s-functions__media--frame {
  margin-top: auto;
  aspect-ratio: 3 / 2;
  flex: none;
}
.s-functions__media--small { width: 100%; max-width: 460px; margin-inline: auto; }
/* the source photo has a 1px dark column on its right edge: overscan it out of the frame */
.s-functions__media--small img { transform: scale(1.012); }
.s-functions__cell--fleet .s-functions__copy,
.s-functions__cell--industrial .s-functions__copy { padding-bottom: clamp(24px, 2.6vw, 34px); }

/* full-bleed photo tiles: copy sits on a soft dark gradient */
.s-functions__tile--bleed { background: #111; color: #f5f5f7; justify-content: flex-end; }
.s-functions__tile--bleed::after {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.72) 0%, rgba(0, 0, 0, 0.38) 30%, rgba(0, 0, 0, 0) 58%);
}
.s-functions__copy--over { padding: var(--fx-pad); }
.s-functions__copy--over .s-functions__p { color: rgba(245, 245, 247, 0.82); }
.s-functions__cell--transport .s-functions__media img { object-position: 50% 40%; }
/* the hero tile leads the grid: a step up in headline size */
.s-functions__cell--transport .s-functions__h { font-size: clamp(1.75rem, 2.9vw, 2.625rem); letter-spacing: -0.03em; }
.s-functions__cell--covered .s-functions__media img { object-position: 30% 50%; }

/* ---------------- C · Load types (full / part toggle) ---------------- */
.s-functions__tile--planner { padding: var(--fx-pad); }
.s-functions__planner-head {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 18px 24px; flex-wrap: wrap;
}
.s-functions__kicker--blue { color: var(--c-blue); }
.s-functions__tile--planner .s-functions__kicker { color: var(--c-blue); }

.s-functions__seg {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  margin: 0;
  padding: 3px;
  min-inline-size: 0;
  border: 0;
  border-radius: var(--r-pill);
  background: #e8e8ed;
  box-shadow: inset 0 0 0 0.5px rgba(0, 0, 0, 0.04);
}
.s-functions__seg-thumb {
  position: absolute; top: 3px; bottom: 3px; left: 3px;
  width: calc(50% - 3px);
  border-radius: var(--r-pill);
  background: #fff;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.12), 0 0 0 0.5px rgba(0, 0, 0, 0.04);
  transition: transform 0.55s var(--ease-out);
}
.s-functions__seg[data-value="part"] .s-functions__seg-thumb { transform: translateX(100%); }
.s-functions__seg-opt {
  position: relative; z-index: 1;
  display: flex; align-items: center; justify-content: center;
  min-height: 44px; padding: 0 20px;
  border-radius: var(--r-pill);
  font-size: 0.875rem; font-weight: 500; letter-spacing: -0.01em; white-space: nowrap;
  color: #515154;   /* --fg-2 is only 4.1:1 on the #e8e8ed track */
  cursor: pointer;
  transition: color 0.3s ease;
}
.s-functions__seg-opt.is-on { color: var(--fg); font-weight: 600; }
.s-functions__seg-opt:hover { color: var(--fg); }
.s-functions__seg-opt input {
  position: absolute; inset: 0; width: 100%; height: 100%; margin: 0;
  opacity: 0; cursor: pointer; appearance: none; -webkit-appearance: none;
}
.s-functions__seg-opt span { pointer-events: none; }
.s-functions__seg-opt:has(input:focus-visible) { outline: 2px solid var(--c-blue); outline-offset: 2px; }

.s-functions__truck-wrap {
  flex: 1;
  display: flex; align-items: center; justify-content: center;
  margin: clamp(16px, 2vw, 28px) calc(var(--fx-pad) * -0.35) 0;
  min-height: 0;
}
.s-functions__truck { width: 100%; max-width: 640px; height: auto; overflow: hidden; }
.s-functions__caption {
  margin-top: clamp(12px, 1.6vw, 20px);
  text-align: center;
  font-family: var(--font-display);
  font-size: clamp(1.1875rem, 1.6vw, 1.5rem);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.2;
  color: var(--fg);
  min-height: 1.2em;
}

/* ---------------- D · Road ---------------- */
.s-functions__tile--road {
  background:
    radial-gradient(120% 70% at 50% 100%, rgba(41, 151, 255, 0.28) 0%, rgba(41, 151, 255, 0) 60%),
    linear-gradient(180deg, #071233 0%, #0a1f4d 62%, #0d2a66 100%);
  color: var(--fg);
}
.s-functions__tile--road .s-functions__kicker { color: var(--fg-2); }
.s-functions__road-title {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(3.5rem, 6.4vw, 6rem);
  font-weight: 700;
  line-height: 0.98;
  letter-spacing: -0.045em;
  background: linear-gradient(180deg, #ffffff 0%, #dfe6f5 50%, #9fb0d0 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  padding-bottom: 0.04em;
}
.s-functions__tile--road .s-functions__p { color: var(--fg-2); }

.s-functions__road {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 0;
  height: 54%;
  overflow: hidden;
  perspective: 300px;
  perspective-origin: 50% 0%;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 34%);
  mask-image: linear-gradient(to bottom, transparent 0%, #000 34%);
  pointer-events: none;
}
.s-functions__road-glow {
  position: absolute; left: 0; right: 0; top: 0; height: 60%;
  background: radial-gradient(40% 70% at 50% 0%, rgba(90, 200, 250, 0.4) 0%, rgba(90, 200, 250, 0) 70%);
}
.s-functions__road-plane {
  position: absolute; left: 50%; bottom: 0;
  width: 560px; height: 2400px; margin-left: -280px;
  transform-origin: 50% 100%;
  transform: rotateX(80deg);
  background:
    linear-gradient(90deg,
      transparent 0 7%, rgba(255, 255, 255, 0.55) 7% 7.9%, transparent 7.9% 92.1%,
      rgba(255, 255, 255, 0.55) 92.1% 93%, transparent 93% 100%),
    linear-gradient(90deg, transparent 0 7%, rgba(255, 255, 255, 0.045) 7% 93%, transparent 93%);
  overflow: hidden;
}
.s-functions__road-lanes {
  position: absolute; left: 0; right: 0; top: -140px; bottom: 0;
  background:
    linear-gradient(to bottom, rgba(255, 255, 255, 0.82) 0 46%, transparent 46% 100%) 36.2% 0 / 7px 140px repeat-y,
    linear-gradient(to bottom, rgba(255, 255, 255, 0.82) 0 46%, transparent 46% 100%) 63.8% 0 / 7px 140px repeat-y;
  animation: s-functions-lanes 0.9s linear infinite;
  animation-play-state: paused;
  will-change: transform;
}
.s-functions__tile--road.is-playing .s-functions__road-lanes { animation-play-state: running; }
@keyframes s-functions-lanes {
  from { transform: translate3d(0, 0, 0); }
  to { transform: translate3d(0, 140px, 0); }
}

/* ---------------- Tablet ---------------- */
@media (max-width: 1023px) {
  .s-functions__grid { grid-auto-flow: row dense; }
  .s-functions__cell--transport  { grid-column: span 12; min-height: clamp(440px, 62vw, 560px); }
  .s-functions__cell--inventory  { grid-column: span 6; min-height: 520px; }
  .s-functions__cell--road       { grid-column: span 6; min-height: 520px; }
  .s-functions__cell--planner    { grid-column: span 12; min-height: 0; }
  .s-functions__cell--fleet,
  .s-functions__cell--industrial { grid-column: span 6; min-height: 0; }
  .s-functions__cell--covered    { grid-column: span 12; min-height: clamp(380px, 56vw, 480px); }
}

/* ---------------- Mobile ---------------- */
@media (max-width: 767px) {
  .s-functions__grid { gap: 14px; }
  .s-functions__cell--transport,
  .s-functions__cell--inventory,
  .s-functions__cell--planner,
  .s-functions__cell--road,
  .s-functions__cell--fleet,
  .s-functions__cell--industrial,
  .s-functions__cell--covered { grid-column: 1 / -1; }
  .s-functions__cell--transport { min-height: 440px; }
  .s-functions__cell--inventory { min-height: 0; }
  .s-functions__cell--road { min-height: 470px; }
  .s-functions__cell--covered { min-height: 400px; }
  .s-functions__media--grow { flex: none; aspect-ratio: 4 / 3; min-height: 0; }
  .s-functions__planner-head { flex-direction: column; }
  .s-functions__seg { width: 100%; }
  .s-functions__truck-wrap { margin-inline: calc(var(--fx-pad) * -0.6); }
  .s-functions__tile { border-radius: 24px; }
}

/* ---- 50-network.css ---- */
/* =====================================================================
   50 — NETWORK: abstract route constellation (navy)
   Desktop/tablet (≥768 wide, ≥560 tall): the stage pins for +150vh while
   routes draw out of the Bengaluru hub. Phones and short landscape: in-flow
   stage, on-enter timeline (the same split as the JS matchMedia).
   ===================================================================== */
.s-network {
  --nw-cyan: var(--c-cyan);
  --nw-ink: #04122e;
  --nw-map-h: min(calc(100svh - var(--nav-h) - 88px), 860px);
  position: relative;
  padding-top: var(--section-pad);
  padding-bottom: clamp(56px, 8vw, 120px);
  background: var(--bg);
  overflow: clip;
  isolation: isolate;
}
/* soft lift at the top, melt into black at the bottom (strengths follows) */
.s-network::before,
.s-network::after {
  content: ""; position: absolute; left: 0; right: 0; pointer-events: none; z-index: -1;
}
.s-network::before {
  top: 0; height: 900px;
  background: radial-gradient(70% 100% at 50% 0%, rgba(16, 48, 111, 0.7) 0%, rgba(10, 31, 77, 0.25) 45%, transparent 75%);
}
.s-network::after {
  bottom: 0; height: clamp(56px, 8vw, 120px);
  background: linear-gradient(180deg, transparent, #000);
}

/* ---------- header (the title takes the shared .h1 scale) ---------- */
.s-network__head { text-align: center; }
.s-network__title { margin-top: 14px; }
.s-network__lead {
  max-width: 34em;
  margin: clamp(20px, 2.4vw, 32px) auto 0;
}

/* ---------- pinned stage ---------- */
.s-network__pin {
  position: relative;
  height: 100vh;
  height: 100svh;
  margin-top: clamp(24px, 4vw, 56px);
  background:
    radial-gradient(42% 58% at 36% 62%, rgba(16, 48, 111, 0.55) 0%, rgba(10, 31, 77, 0.18) 55%, transparent 80%),
    var(--bg);
}
.s-network__field {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  display: block;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 14%, #000 86%, transparent 100%);
  mask-image: linear-gradient(180deg, transparent 0, #000 14%, #000 86%, transparent 100%);
}
.s-network__stage {
  position: relative;
  height: 100%;
  padding-top: var(--nav-h);
  width: min(var(--w-wide), 100% - 2 * var(--gutter));
  margin-inline: auto;
  display: grid;
  grid-template-columns: auto minmax(300px, 400px);
  justify-content: center;
  align-items: center;
  column-gap: clamp(40px, 7vw, 132px);
}

/* ---------- map ---------- */
.s-network__map {
  position: relative;
  height: var(--nw-map-h);
  aspect-ratio: 620 / 880;
}
.s-network__svg {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  overflow: visible;
}
.s-network__svg .s-network__hit { cursor: pointer; }

/* routes */
.s-network__route { transition: opacity 0.5s var(--ease-out); }
.s-network__glow,
.s-network__line,
.s-network__ghost,
.s-network__tail,
.s-network__tail2 { fill: none; stroke-linecap: round; }
.s-network__glow { stroke: var(--nw-cyan); stroke-width: 9; opacity: 0.1; transition: opacity 0.5s var(--ease-out), stroke-width 0.5s var(--ease-out); }
.s-network__line { stroke-width: 2; transition: stroke-width 0.5s var(--ease-out); }
.s-network__ghost { stroke: rgba(159, 176, 208, 0.55); stroke-width: 1.4; stroke-dasharray: 1 9; opacity: 0; transition: opacity 0.5s var(--ease-out); }
.s-network__tail { stroke: #fff; stroke-width: 3.2; }
.s-network__tail2 { stroke: var(--nw-cyan); stroke-width: 2.2; opacity: 0.45; }
.s-network__comet { opacity: 0; }

/* nodes */
.s-network__node { transition: opacity 0.5s var(--ease-out); }
.s-network__halo { opacity: 0; transition: opacity 0.9s var(--ease-out); }
.s-network__ring { fill: none; stroke: rgba(159, 176, 208, 0.32); stroke-width: 1.5; transition: stroke 0.6s var(--ease-out); }
.s-network__core { fill: rgba(159, 176, 208, 0.55); transition: fill 0.6s var(--ease-out); }
.s-network__pulse { fill: none; stroke: var(--nw-cyan); stroke-width: 2; opacity: 0; }
.s-network__node.is-on .s-network__halo { opacity: 1; }
.s-network__node.is-on .s-network__ring { stroke: rgba(90, 200, 250, 0.9); }
.s-network__node.is-on .s-network__core { fill: #fff; }

/* hub */
.s-network__hub-disc { fill: var(--c-navy-deep); }
.s-network__hub-ring { fill: none; stroke: rgba(255, 255, 255, 0.85); stroke-width: 1.6; }
.s-network__hub-ring--outer { stroke: rgba(90, 200, 250, 0.45); stroke-width: 1.2; }
.s-network__hub-mark { fill: #fff; }
.s-network__sonar {
  fill: none; stroke: rgba(90, 200, 250, 0.6); stroke-width: 1.4;
  transform-box: fill-box; transform-origin: center;
  opacity: 0;
}
.s-network.is-live .s-network__sonar { animation: s-network-sonar 3.6s var(--ease-out) infinite; }
.s-network.is-live .s-network__sonar--b { animation-delay: 1.8s; }
@keyframes s-network-sonar {
  0% { transform: scale(1); opacity: 0.7; }
  100% { transform: scale(3.2); opacity: 0; }
}
/* travelling pulses: a canvas between the routes and the labels (JS) */
.s-network__pulsefield {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  display: block;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.8s var(--ease-out);
}
.s-network.is-flowing .s-network__pulsefield { opacity: 1; }

/* focus / hover state: one route forward, the rest recede */
.s-network.is-focus .s-network__route:not(.is-hot) { opacity: 0.16; }
.s-network.is-focus .s-network__node:not(.is-hot) { opacity: 0.4; }
.s-network__route.is-hot .s-network__line { stroke-width: 3; }
.s-network__route.is-hot .s-network__glow { opacity: 0.24; stroke-width: 14; }
.s-network__route.is-hot .s-network__ghost { opacity: 1; }

/* labels (HTML overlay; positioned in % of the viewBox).
   A state's tooltip appears as its route lands, and on hover / focus. */
.s-network__labels { position: absolute; inset: 0; pointer-events: none; }
.s-network__label {
  --lx: -50%; --ly: -50%; --lp: 6px;
  position: absolute;
  display: inline-flex; align-items: center;
  padding: 6px 12px 6px 11px;
  border-radius: var(--r-pill);
  font-family: var(--font-text);
  font-size: 0.8125rem; font-weight: 600; line-height: 1.2; letter-spacing: -0.005em;
  white-space: nowrap;
  color: #fff;
  background-color: rgba(10, 31, 77, 0.78);
  box-shadow: inset 0 0 0 1px rgba(90, 200, 250, 0.4), 0 10px 30px rgba(0, 0, 0, 0.45);
  -webkit-backdrop-filter: blur(12px) saturate(160%);
  backdrop-filter: blur(12px) saturate(160%);
  opacity: 0;
  transform: translate(var(--lx), var(--ly)) translateY(var(--lp)) scale(0.96);
  transition: opacity 0.45s var(--ease-out), transform 0.6s var(--ease-out);
}
.s-network__label[data-anchor="l"] { --lx: calc(-100% - 16px); }
.s-network__label[data-anchor="r"] { --lx: 16px; }
.s-network__label[data-anchor="t"] { --ly: calc(-100% - 18px); }
.s-network__label[data-anchor="b"] { --ly: 20px; }
.s-network__label.is-latest,
.s-network__label.is-hot { opacity: 1; transform: translate(var(--lx), var(--ly)); }
.s-network.is-focus .s-network__label.is-latest:not(.is-hot) { opacity: 0; }
.s-network__label.s-network__label--hub {
  --ly: 46px;
  opacity: 1;
  transform: translate(var(--lx), var(--ly));
  padding: 0;
  background: none; box-shadow: none;
  -webkit-backdrop-filter: none; backdrop-filter: none;
  font-size: 0.875rem; font-weight: 600;
  color: var(--fg);
  text-shadow: 0 0 12px rgba(5, 12, 34, 0.9);
}

/* ---------- panel ---------- */
.s-network__panel { position: relative; min-width: 0; }
.s-network__count { display: grid; gap: 6px; }
.s-network__num {
  display: inline-grid;
  justify-self: start;
  overflow: hidden;
  font-family: var(--font-display);
  font-size: clamp(5rem, min(10vw, 17svh), 9rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.05em;
  padding: 0.02em 0 0.04em 0;
  margin-left: -0.04em;
}
/* one glyph per box: no negative tracking, and a little right padding so the
   gradient (background-clip: text) paints the whole glyph instead of
   shearing off its right edge */
.s-network__digit {
  grid-area: 1 / 1;
  display: block;
  letter-spacing: 0;
  padding: 0 0.06em 0 0.02em;
  background: var(--grad-brand);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
  will-change: transform;
}
.s-network__count-label {
  font-family: var(--font-display);
  font-size: var(--fs-h4);
  font-weight: 600;
  letter-spacing: -0.015em;
  color: var(--fg-2);
}
/* With motion on (JS adds .is-seq) the counter waits for the first route to
   land (.is-started) and arrives with it, so the stage never shows a zero. */
.s-network.is-seq .s-network__num,
.s-network.is-seq .s-network__count-label {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.5s var(--ease-out), transform 0.8s var(--ease-out);
}
.s-network.is-seq .s-network__count-label { transition-delay: 0.06s; }
.s-network.is-seq.is-started .s-network__num,
.s-network.is-seq.is-started .s-network__count-label { opacity: 1; transform: none; }
.s-network__list {
  margin-top: clamp(20px, 3.6svh, 36px);
  border-top: 1px solid var(--line);
}
.s-network__item {
  position: relative;
  display: flex; align-items: center; gap: 14px;
  width: 100%;
  min-height: clamp(44px, 5.6svh, 52px);
  padding: 8px 4px;
  border-bottom: 1px solid var(--line);
  text-align: left;
  font-family: var(--font-display);
  font-size: clamp(1.0625rem, 1.35vw, 1.25rem);
  font-weight: 600;
  letter-spacing: -0.015em;
  color: var(--fg-2);
  transition: color 0.4s ease;
  border-radius: 0;
}
.s-network__item::after {
  content: "";
  position: absolute; left: 0; right: 0; bottom: -1px; height: 1px;
  background: linear-gradient(90deg, var(--nw-cyan), rgba(90, 200, 250, 0));
  transform: scaleX(0); transform-origin: left;
  transition: transform 0.6s var(--ease-out);
}
.s-network__item:focus-visible { outline-offset: -2px; border-radius: 10px; }
.s-network__check {
  flex: none;
  display: grid; place-items: center;
  width: 22px; height: 22px;
  border-radius: 50%;
  box-shadow: inset 0 0 0 1.5px rgba(159, 176, 208, 0.38);
  transition: background-color 0.45s var(--ease-out), box-shadow 0.45s var(--ease-out), transform 0.45s var(--ease-out), opacity 0.45s var(--ease-out);
}
.s-network__check svg { width: 16px; height: 16px; overflow: visible; }
.s-network__check path {
  fill: none; stroke: var(--nw-ink); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: 18; stroke-dashoffset: 18;
  transition: stroke-dashoffset 0.5s var(--ease-out) 0.12s;
}
.s-network__name { min-width: 0; }
.s-network__item.is-on { color: var(--fg); }
.s-network__item.is-on .s-network__check {
  background-color: var(--nw-cyan);
  box-shadow: inset 0 0 0 1.5px var(--nw-cyan), 0 0 0 4px rgba(90, 200, 250, 0.14), 0 0 16px rgba(90, 200, 250, 0.55);
}
.s-network__item.is-on .s-network__check path { stroke-dashoffset: 0; }
.s-network__item.is-hot { color: #fff; }
.s-network__item.is-hot::after { transform: scaleX(1); }
.s-network__item.is-hot .s-network__check { transform: scale(1.12); }
/* the list recedes with the map, so the focused state reads at a glance */
.s-network.is-focus .s-network__item:not(.is-hot) { color: var(--fg-2); }
.s-network.is-focus .s-network__item:not(.is-hot) .s-network__check { opacity: 0.55; }
@media (hover: hover) {
  .s-network__item:hover { color: #fff; }
}
.s-network__fine { margin-top: 18px; color: var(--fg-2); opacity: 0.85; }

/* ---------- tablet portrait: stacked inside the pin ---------- */
@media (min-width: 768px) and (max-width: 1023px) and (min-height: 560px) {
  .s-network { --nw-map-h: min(calc(100svh - var(--nav-h) - 330px), 720px); }
  .s-network__stage {
    grid-template-columns: 1fr;
    align-content: center;
    justify-items: center;
    row-gap: clamp(16px, 3svh, 32px);
  }
  .s-network__panel {
    width: 100%; max-width: 640px;
    display: grid; grid-template-columns: auto 1fr; column-gap: 36px; align-items: start;
  }
  .s-network__count { align-self: start; }
  .s-network__num { font-size: clamp(4rem, 12vw, 6.5rem); }
  .s-network__count-label { font-size: 1.0625rem; max-width: 9em; }
  .s-network__list { margin-top: 0; display: grid; grid-template-columns: 1fr 1fr; column-gap: 20px; border-top: 0; }
  .s-network__list li { border-top: 1px solid var(--line); }
  .s-network__list li:nth-child(n + 3) { border-top: 0; }
  .s-network__fine { grid-column: 1 / -1; margin-top: 14px; }
}

/* ---------- phones + short landscape: in flow ---------- */
@media (max-width: 767px), (max-height: 559px) {
  .s-network { padding-bottom: 72px; }
  .s-network__head { text-align: left; }
  .s-network__lead { margin-left: 0; }
  .s-network__pin { height: auto; margin-top: 28px; padding-bottom: 8px; }
  .s-network__stage {
    padding-top: 0;
    grid-template-columns: 1fr;
    row-gap: 8px;
  }
  .s-network__map { height: auto; width: 100%; max-width: 440px; justify-self: center; }
  .s-network__glow { stroke-width: 11; }
  .s-network__line { stroke-width: 2.8; }
  .s-network__route.is-hot .s-network__line { stroke-width: 4; }
  .s-network__label { font-size: 0.75rem; padding: 5px 10px; }
  .s-network__label[data-anchor-m="l"] { --lx: calc(-100% - 10px); --ly: -50%; }
  .s-network__label[data-anchor-m="r"] { --lx: 10px; --ly: -50%; }
  .s-network__label[data-anchor-m="t"] { --lx: -50%; --ly: calc(-100% - 12px); }
  .s-network__label.s-network__label--hub { font-size: 0.75rem; --ly: 28px; }
  .s-network__count { grid-template-columns: auto 1fr; align-items: end; column-gap: 14px; margin-top: 8px; }
  .s-network__num { font-size: 5rem; }
  .s-network__count-label { padding-bottom: 0.7em; font-size: 1.0625rem; }
  .s-network__list { margin-top: 18px; display: grid; grid-template-columns: 1fr 1fr; column-gap: 16px; border-top: 0; }
  .s-network__list li { border-top: 1px solid var(--line); }
  .s-network__list li:nth-child(n + 3) { border-top: 0; }
  .s-network__item { font-size: 0.9375rem; gap: 10px; min-height: 48px; padding-inline: 0; }
  .s-network__check { width: 20px; height: 20px; }
  .s-network__check svg { width: 14px; height: 14px; }
}

/* ---------- short landscape (phones on their side): map beside the list,
   sized to the viewport so the whole network is in view as it draws ---------- */
@media (min-width: 568px) and (max-height: 559px) {
  .s-network__stage {
    grid-template-columns: auto minmax(0, 400px);
    justify-content: center;
    align-items: center;
    column-gap: clamp(28px, 6vw, 72px);
  }
  .s-network__map {
    height: max(250px, calc(100svh - var(--nav-h) - 48px));
    width: auto; max-width: none;
    justify-self: end;
  }
  .s-network__count { margin-top: 0; }
  .s-network__num { font-size: 4.25rem; }
  .s-network__list { margin-top: 12px; }
  .s-network__item { min-height: 44px; }
}

/* ---------- reduced motion: no pin, everything settled ---------- */
html.reduced-motion .s-network__pin { height: auto; min-height: 0; padding-block: 24px 8px; }
html.reduced-motion .s-network__stage { padding-top: 0; }
@media (min-width: 768px) and (min-height: 560px) {
  html.reduced-motion .s-network { --nw-map-h: min(calc(100svh - var(--nav-h) - 88px), 820px); }
}

/* ---- 55-strengths.css ---- */
/* =====================================================================
   55 — STRENGTHS: glowing arrowheads + Apple-style scrolling feature list
   Desktop/tablet (≥768 wide, ≥600 tall): pinned for +250vh, active strength
   advances with scroll. Phones and short landscape: in flow, each strength
   lights as it crosses the viewport centre (same split as the JS matchMedia).
   ===================================================================== */
.s-strengths {
  --st-cyan: var(--c-cyan);
  --st-name: clamp(1.75rem, min(3.05vw, 5svh), 2.75rem); /* height-aware: the pinned frame must hold all five */
  --st-pad: clamp(9px, 1.5svh, 16px);
  --st-rail-x: 5px;
  --st-indent: clamp(30px, 3vw, 44px);
  position: relative;
  background: var(--bg);
  overflow: clip;
  isolation: isolate;
}

.s-strengths__pin {
  position: relative;
  height: 100vh;
  height: 100svh;
  overflow: hidden;
}

/* ---------- stage: three arrowheads with light trails ---------- */
.s-strengths__stage {
  position: absolute;
  top: 0; bottom: 0; left: 0;
  width: 54%;
  pointer-events: none;
}
.s-strengths__bloom {
  position: absolute;
  left: 50%; top: 50%;
  width: 120%; aspect-ratio: 1;
  transform: translate(-50%, -50%);
  background:
    radial-gradient(closest-side at 54% 44%, rgba(41, 151, 255, 0.24), rgba(41, 151, 255, 0.08) 45%, transparent 72%),
    radial-gradient(closest-side at 34% 70%, rgba(90, 200, 250, 0.09), transparent 70%);
  will-change: transform, opacity;
}
.s-strengths__tri {
  --s: 140px;
  position: absolute;
  width: var(--s); height: var(--s);
  margin: calc(var(--s) / -2) 0 0 calc(var(--s) / -2);
  will-change: transform, opacity;
}
.s-strengths__tri--a { --s: clamp(170px, 17vw, 270px); left: 57%; top: 42%; z-index: 2; }
.s-strengths__tri--b { --s: clamp(96px, 9.2vw, 150px); left: 27%; top: 27%; }
.s-strengths__tri--c { --s: clamp(100px, 9.6vw, 156px); left: 35%; top: 76%; z-index: 3; }

.s-strengths__fly,
.s-strengths__float,
.s-strengths__dir { position: absolute; inset: 0; }
.s-strengths__fly { will-change: transform; }

/* ambient float: compositor-only keyframes (sine in-out, alternate), only
   while the section is on screen (.is-floating from JS) */
.s-strengths.is-seq .s-strengths__float {
  animation: s-strengths-float-b 2.6s cubic-bezier(0.37, 0, 0.63, 1) infinite alternate paused;
}
.s-strengths.is-seq .s-strengths__tri--a .s-strengths__float { animation-name: s-strengths-float-a; animation-duration: 3.15s; }
.s-strengths.is-seq .s-strengths__tri--c .s-strengths__float { animation-name: s-strengths-float-c; animation-duration: 3.7s; }
.s-strengths.is-seq.is-floating .s-strengths__float { animation-play-state: running; }
@keyframes s-strengths-float-b { from { transform: translate(0, 0) rotate(0deg); } to { transform: translate(5px, -10px) rotate(2.2deg); } }
@keyframes s-strengths-float-a { from { transform: translate(0, 0) rotate(0deg); } to { transform: translate(3.5px, -7px) rotate(-2.2deg); } }
@keyframes s-strengths-float-c { from { transform: translate(0, 0) rotate(0deg); } to { transform: translate(6px, -12px) rotate(2.2deg); } }
.s-strengths__dir { transform: rotate(45deg); }
.s-strengths__arrow { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }

/* the light trail hangs off the arrowhead's base (y = 34 of the -110..90 box);
   it starts just inside the base so the triangle hides its top edge */
.s-strengths__trail {
  position: absolute;
  left: 50%; top: 66%;
  width: 30%; height: 280%;
  margin-left: -15%;
  transform-origin: 50% 0;
  will-change: transform;
}
.s-strengths__trail::before,
.s-strengths__trail::after {
  content: ""; position: absolute; top: 0; bottom: 0;
}
.s-strengths__trail::before {
  left: -30%; right: -30%;
  background: radial-gradient(50% 100% at 50% 0%, rgba(90, 200, 250, 0.5) 0%, rgba(41, 151, 255, 0.2) 34%, rgba(41, 151, 255, 0.06) 62%, rgba(41, 151, 255, 0) 100%);
  filter: blur(calc(var(--s) * 0.06));
}
.s-strengths__trail::after {
  left: 32%; right: 32%; bottom: 38%;
  background: linear-gradient(180deg, rgba(225, 246, 255, 0.85) 0%, rgba(90, 200, 250, 0.3) 35%, rgba(90, 200, 250, 0) 100%);
  border-radius: 50% 50% 50% 50% / 8% 8% 92% 92%;
  filter: blur(calc(var(--s) * 0.022));
}
.s-strengths__tri--a .s-strengths__trail::before {
  background: radial-gradient(50% 100% at 50% 0%, rgba(140, 220, 255, 0.62) 0%, rgba(41, 151, 255, 0.26) 34%, rgba(41, 151, 255, 0.07) 64%, rgba(41, 151, 255, 0) 100%);
}

/* ---------- copy ---------- */
.s-strengths__inner {
  position: relative;
  height: 100%;
  padding-top: var(--nav-h);
  display: grid;
  grid-template-columns: minmax(0, 0.86fr) minmax(0, 1.14fr);
  align-items: center;
}
.s-strengths__copy { grid-column: 2; padding-left: clamp(8px, 2vw, 32px); }
/* the title takes the shared .h1 scale; inside the pinned frame it gives way
   on short screens so all five strengths stay in view */
.s-strengths__title { margin-top: 8px; }
@media (min-width: 768px) and (min-height: 600px) {
  .s-strengths__title { font-size: min(var(--fs-h1), 12svh); }
}
.s-strengths__listwrap {
  position: relative;
  margin-top: clamp(22px, 4.6svh, 52px);
  padding-left: var(--st-indent);
}
.s-strengths__rail {
  position: absolute;
  left: calc(var(--st-rail-x) - 0.5px);
  top: var(--rail-top, 0px);
  height: var(--rail-h, 100%);
  width: 1px;
  background: rgba(255, 255, 255, 0.16);
}
.s-strengths__rail-fill {
  position: absolute; inset: 0 -0.5px;
  background: linear-gradient(180deg, #fff, var(--st-cyan));
  box-shadow: 0 0 10px rgba(90, 200, 250, 0.8);
  transform-origin: 50% 0;
  transform: scaleY(1);
}
.s-strengths__item { position: relative; padding-block: var(--st-pad); }
.s-strengths__tick {
  position: absolute;
  left: calc(var(--st-rail-x) - var(--st-indent) - 3.5px);
  top: calc(var(--st-pad) + var(--st-name) * 0.56 - 3.5px);
  width: 7px; height: 7px;
  border-radius: 50%;
  background: #000;
  box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.85);
  transition: background-color 0.5s var(--ease-out), box-shadow 0.5s var(--ease-out), transform 0.5s var(--ease-out);
}
.s-strengths__name {
  font-size: var(--st-name);
  line-height: 1.12;
  letter-spacing: -0.032em;
  font-weight: 600;
  color: var(--fg);
  transition: opacity 0.6s var(--ease-out), color 0.6s var(--ease-out);
}
.s-strengths__desc {
  margin-top: 6px;
  font-size: clamp(1.0625rem, min(1.32vw, 2.9svh), 1.3125rem);
  line-height: 1.35;
  letter-spacing: -0.012em;
  color: var(--fg-2);
  transition: opacity 0.6s var(--ease-out) 0.08s, transform 0.7s var(--ease-out) 0.08s, clip-path 0.7s var(--ease-out) 0.08s;
}

/* sequenced state (JS adds .is-seq when motion is on). Inactive names dim by
   colour, not opacity, so they keep 4.1:1 on black (large text). */
.s-strengths.is-seq .s-strengths__name { color: #6e6e73; }
.s-strengths.is-seq .s-strengths__desc { opacity: 0; transform: translateY(10px); clip-path: inset(0 0 100% 0); }
.s-strengths.is-seq .s-strengths__tick { background: #000; box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.28); }
.s-strengths.is-seq .s-strengths__item.is-past .s-strengths__tick { background: rgba(255, 255, 255, 0.7); box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.7); }
.s-strengths.is-seq .s-strengths__item.is-active .s-strengths__name { color: var(--fg); }
.s-strengths.is-seq .s-strengths__item.is-active .s-strengths__desc { opacity: 1; transform: none; clip-path: inset(0 0 -20% 0); }
.s-strengths.is-seq .s-strengths__item.is-active .s-strengths__tick {
  background: #fff;
  box-shadow: inset 0 0 0 1.5px #fff, 0 0 0 4px rgba(90, 200, 250, 0.2), 0 0 14px rgba(90, 200, 250, 0.9);
  transform: scale(1.25);
}

/* ---------- tablet portrait: stage fills the space above the copy, still pinned ---------- */
@media (min-width: 768px) and (max-width: 1023px) and (min-height: 600px) {
  .s-strengths { --st-name: clamp(1.75rem, 4.4vw, 2.5rem); }
  .s-strengths__pin { display: flex; flex-direction: column; padding-top: var(--nav-h); }
  /* the stage sits above the copy: fade its lower edge so the light trails
     dissolve before they reach the eyebrow and headline */
  .s-strengths__stage {
    position: relative; inset: auto; flex: 1 1 auto; min-height: 0; width: 100%;
    -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 8%, #000 74%, transparent 100%);
    mask-image: linear-gradient(180deg, transparent 0, #000 8%, #000 74%, transparent 100%);
  }
  .s-strengths__bloom { width: 90%; left: 56%; }
  .s-strengths__tri--a { --s: clamp(130px, 19vw, 190px); left: 63%; top: 46%; }
  .s-strengths__tri--b { --s: clamp(76px, 10vw, 104px); left: 39%; top: 28%; }
  .s-strengths__tri--c { --s: clamp(80px, 10.5vw, 110px); left: 45%; top: 60%; }
  .s-strengths__inner { flex: none; height: auto; padding-top: 0; padding-bottom: clamp(32px, 6svh, 72px); grid-template-columns: 1fr; }
  .s-strengths__copy { grid-column: 1; padding-left: 0; }
}

/* ---------- phones + short landscape: in flow ---------- */
@media (max-width: 767px), (max-height: 599px) {
  .s-strengths {
    --st-name: clamp(1.75rem, 8vw, 2.25rem);
    --st-pad: 22px;
    --st-indent: 30px;
    padding-bottom: 72px;
  }
  .s-strengths__pin { height: auto; overflow: visible; }
  .s-strengths__stage {
    position: relative;
    width: 100%; height: 340px;
    margin-top: 24px;
    -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 12%, #000 72%, transparent 100%);
    mask-image: linear-gradient(180deg, transparent 0, #000 12%, #000 72%, transparent 100%);
  }
  .s-strengths__bloom { width: 150%; }
  .s-strengths__tri--a { --s: 150px; left: 62%; top: 42%; }
  .s-strengths__tri--b { --s: 86px; left: 30%; top: 26%; }
  .s-strengths__tri--c { --s: 92px; left: 38%; top: 68%; }
  .s-strengths__inner { display: block; height: auto; padding-top: 8px; }
  .s-strengths__copy { padding-left: 0; }
  .s-strengths__listwrap { margin-top: 20px; }
  .s-strengths__desc { font-size: 1.0625rem; }
  /* on phones every description is visible; the item itself dims (by colour,
     4.7:1 on black, so inactive copy stays readable) */
  .s-strengths.is-seq .s-strengths__desc { transform: none; clip-path: none; opacity: 1; color: #77777c; transition: color 0.6s var(--ease-out); }
  .s-strengths.is-seq .s-strengths__item.is-active .s-strengths__desc { color: var(--fg-2); }
}

/* ---------- short landscape (phones on their side): a shorter arrow stage
   so the list arrives within the first screen ---------- */
@media (min-width: 568px) and (max-height: 599px) {
  .s-strengths__stage { height: clamp(200px, 60svh, 300px); margin-top: 8px; }
}

/* ---------- reduced motion: no pin, everything readable ---------- */
html.reduced-motion .s-strengths__pin { height: auto; overflow: visible; }
@media (min-width: 768px) and (min-height: 600px) {
  html.reduced-motion .s-strengths__pin { min-height: 100svh; padding-block: var(--section-pad); display: flex; align-items: center; }
  html.reduced-motion .s-strengths__inner { width: min(var(--w-content), 100% - 2 * var(--gutter)); }
}
@media (min-width: 768px) and (max-width: 1023px) and (min-height: 600px) {
  html.reduced-motion .s-strengths__pin { flex-direction: column; align-items: stretch; padding-top: var(--section-pad); }
  html.reduced-motion .s-strengths__stage { flex: none; height: 340px; }
}

/* ---- 60-team.css ---- */
/* =====================================================================
   60 · Team: management pairing + draggable "From the field" gallery
   Baseline (no JS / reduced motion) is a native scroll-snap scroller;
   .is-drag (added by JS) swaps it for the GSAP Draggable track.
   ===================================================================== */
.s-team {
  --team-edge: max(var(--gutter), calc((100% - var(--w-content)) / 2));
  --team-gap: clamp(14px, 1.6vw, 24px);
  --team-card-h: clamp(300px, min(56svh, 64vw), 600px);
  --team-card-max: 78vw;
  --team-ink-3: var(--fg-2); /* #6e6e73: keeps the small index numerals above 4.5:1 */
  /* Caption block under each photo (single line) and the half-height stacked pair:
     2 x (stack + caption) + gap == card + caption, so the pair lines up with its neighbours. */
  --team-cap-mt: 14px;
  --team-cap-h: calc(var(--team-cap-mt) + var(--fs-small) * 1.4);
  --team-stack-h: calc((var(--team-card-h) - var(--team-cap-h) - var(--team-gap)) / 2);
  position: relative;
  padding-block: var(--section-pad);
  overflow: clip;
}

/* ---------------- Part 1 · Management ---------------- */
.s-team__eyebrow { margin-bottom: 14px; }
/* Brand eyebrow, deeper ramp: the base light ramp ends at #2997ff (3:1 on white). This one stays >= 4.7:1 on white and snow. */
.s-team__eyebrow.eyebrow--brand { background-image: linear-gradient(100deg, #00509f 0%, #0062c4 50%, #006bd6 100%); }
.s-team__title { color: var(--fg); }

.s-team__pair {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(40px, 6vw, 96px);
  align-items: stretch;
  margin-top: clamp(48px, 6vw, 88px);
}
/* Lead + proprietor card read as one block, optically centred on the photo. */
.s-team__copy {
  display: flex; flex-direction: column; justify-content: center;
  gap: clamp(32px, 3.4vw, 48px);
  padding-bottom: 8px;
}
.s-team__lead { max-width: 26ch; }

.s-team__figure { position: relative; }
.s-team__photo {
  aspect-ratio: 3 / 2;
  border-radius: var(--r-xl);
  background: #0b0d12;
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.02), 0 40px 90px -40px rgba(10, 31, 77, 0.45);
}
.s-team__photo img { object-position: 52% 72%; } /* keeps the boiler's face and the crew member in frame */
.s-team__photo-cap {
  position: absolute; left: 0; top: 100%;
  margin-top: 16px;
  font-size: var(--fs-small);
  color: var(--fg-2);
  letter-spacing: -0.005em;
}

/* Proprietor card */
.s-team__person {
  display: flex; align-items: center; gap: 16px;
  padding: 18px 22px 18px 18px;
  border-radius: var(--r-lg);
  background: var(--bg-2);
  max-width: 460px;
  --link: #0066cc; /* 5.1:1 on the snow card (the theme's #0071e3 is 4.3:1 here) */
}
.s-team__avatar {
  position: relative; flex: none;
  display: grid; place-items: center;
  width: 60px; height: 60px; border-radius: 50%;
  background: radial-gradient(120% 120% at 30% 15%, #1b3f8f 0%, var(--c-navy) 45%, var(--c-navy-deep) 100%);
  color: #fff;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08), 0 8px 20px -8px rgba(10, 31, 77, 0.55);
  overflow: hidden;
}
.s-team__avatar::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit;
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.22), rgba(255, 255, 255, 0) 46%);
  pointer-events: none;
}
.s-team__mark { width: 34px; height: auto; overflow: visible; }
.s-team__mark .lg-piece { transform-box: fill-box; transform-origin: 50% 50%; }
.s-team__person-meta { min-width: 0; flex: 1 1 auto; }
.s-team__person-name {
  font-family: var(--font-display); font-size: 1.1875rem; font-weight: 600; letter-spacing: -0.02em; line-height: 1.2; color: var(--fg);
  white-space: nowrap;
}
.s-team__person-role { margin-top: 2px; font-size: var(--fs-small); color: var(--fg-2); }
.s-team__person-link { flex: none; margin-left: auto; min-height: 44px; padding-block: 0; } /* 44px touch target */

/* ---------------- Part 2 · From the field ---------------- */
.s-team__field { margin-top: clamp(112px, 14vw, 200px); }
.s-team__field-head {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 16px 48px; align-items: end;
  margin-bottom: clamp(28px, 3.6vw, 48px);
}
.s-team__field-title {
  font-size: clamp(2rem, 4.4vw, 3.5rem); line-height: 1.06; letter-spacing: -0.032em; font-weight: 700;
}
.s-team__field-lead {
  justify-self: end; max-width: 30ch;
  font-size: var(--fs-body); line-height: 1.47; color: var(--fg-2);
}
.s-team__hint { display: block; margin-top: 6px; color: var(--fg); font-weight: 500; }
.s-team__hint--touch { display: none; }
@media (hover: none), (pointer: coarse) {
  .s-team__hint--fine { display: none; }
  .s-team__hint--touch { display: block; }
}

/* Viewport + track: native scroller baseline */
.s-team__viewport {
  position: relative;
  overflow-x: auto; overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--team-edge);
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
}
.s-team__viewport::-webkit-scrollbar { display: none; }
.s-team__viewport .s-team__track { /* beats the base ul[role="list"] reset */
  position: relative;
  /* Two-row column flow: every card spans both rows, except the stacked pair, which shares one column. */
  display: grid; grid-auto-flow: column; grid-template-rows: auto 1fr; grid-auto-columns: max-content; /* 1fr: slack from a wrapped caption goes below the pair */
  gap: var(--team-gap); align-items: start;
  width: max-content;
  margin: 0; padding: 10px var(--team-edge) 14px;
  list-style: none;
}
.s-team__card {
  grid-row: span 2;
  width: min(calc(var(--team-card-h) * var(--ar, 1.3333)), var(--team-card-max));
  scroll-snap-align: start;
  transform-origin: 50% 40%;
}
/* Stacked pair: one row each, half height. Both share the full-height cards' 50% / 40% origin,
   so press-scale and velocity skew move the pair as one tile instead of shearing it apart. */
.s-team__card--stack { grid-row: auto; --ar: 0.86; }
.s-team__card--top { transform-origin: 50% calc((var(--team-card-h) + var(--team-cap-h)) * 0.4); }
.s-team__card--bottom {
  transform-origin: 50% calc((var(--team-card-h) + var(--team-cap-h)) * 0.4 - var(--team-stack-h) - var(--team-cap-h) - var(--team-gap));
}
.s-team__card-btn {
  position: relative; display: block; width: 100%; height: var(--team-card-h);
  overflow: hidden; isolation: isolate;
  border-radius: var(--r-lg);
  background: var(--bg-2);
  -webkit-tap-highlight-color: transparent;
}
.s-team__card-btn img {
  width: 100%; height: 100%; object-fit: cover; object-position: var(--pos, 50% 50%);
  user-select: none; -webkit-user-drag: none; pointer-events: none;
  transform-origin: 50% 50%;
}
.s-team__card--stack .s-team__card-btn { height: var(--team-stack-h); }
.s-team__card-btn:focus-visible { outline-offset: 4px; border-radius: var(--r-lg); }

/* Apple-style "+" badge */
.s-team__plus {
  position: absolute; right: 16px; bottom: 16px; z-index: 2;
  width: 36px; height: 36px; border-radius: 50%;
  background: rgba(255, 255, 255, 0.72);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  backdrop-filter: saturate(180%) blur(14px);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18);
  transition: transform 0.55s var(--ease-out), background-color var(--dur-fast) ease;
}
.s-team__plus::before, .s-team__plus::after {
  content: ""; position: absolute; left: 50%; top: 50%;
  width: 14px; height: 2px; margin: -1px 0 0 -7px; border-radius: 2px; background: var(--c-ink);
}
.s-team__plus::after { transform: rotate(90deg); }
.s-team__card-btn:hover .s-team__plus,
.s-team__card-btn:focus-visible .s-team__plus { transform: rotate(90deg) scale(1.08); background: #fff; }

.s-team__cap {
  display: flex; gap: 10px; align-items: baseline;
  margin-top: var(--team-cap-mt); padding-right: 8px;
  font-size: var(--fs-small); line-height: 1.4; color: var(--fg); font-weight: 500; letter-spacing: -0.01em;
}
.s-team__idx { flex: none; font-variant-numeric: tabular-nums; color: var(--team-ink-3); font-weight: 500; }
.s-team__card--stack .s-team__cap { white-space: nowrap; } /* keeps the pair's height maths exact */

/* Controls */
.s-team__controls {
  display: flex; align-items: center; gap: 20px;
  margin-top: clamp(20px, 2.4vw, 32px);
}
.s-team__progress {
  position: relative; flex: 1 1 auto; height: 2px; border-radius: 2px;
  background: var(--line); overflow: hidden;
}
.s-team__progress-bar {
  position: absolute; inset: 0; border-radius: inherit;
  background: var(--fg);
  transform-origin: 0 50%; transform: scaleX(0.1);
}
.s-team__arrows { display: flex; gap: 12px; flex: none; }
.s-team__arrow {
  display: grid; place-items: center;
  width: 44px; height: 44px; border-radius: 50%;
  background: rgba(210, 210, 215, 0.56);
  color: rgba(0, 0, 0, 0.62);
  transition: background-color var(--dur-fast) ease, color var(--dur-fast) ease, opacity var(--dur) var(--ease-out), transform var(--dur) var(--ease-out);
}
.s-team__arrow svg { width: 36px; height: 36px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.s-team__arrow:hover { background: rgba(210, 210, 215, 0.82); color: rgba(0, 0, 0, 0.86); }
.s-team__arrow:active { transform: scale(0.92); }
.s-team__arrow[aria-disabled="true"] { opacity: 0.38; cursor: default; background: rgba(210, 210, 215, 0.4); transform: none; }

/* Cursor follower (desktop, only once JS enables it) */
.s-team__cursor {
  position: absolute; left: 0; top: 0; z-index: 5;
  pointer-events: none; opacity: 0; visibility: hidden;
}
.s-team__cursor-pill {
  display: inline-flex; align-items: center; gap: 8px;
  height: 44px; padding: 0 16px;
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, 0.64);
  -webkit-backdrop-filter: saturate(180%) blur(18px);
  backdrop-filter: saturate(180%) blur(18px);
  box-shadow: inset 0 0 0 0.5px rgba(255, 255, 255, 0.7), 0 10px 30px rgba(0, 0, 0, 0.22);
  color: var(--c-ink);
  font-size: 0.875rem; font-weight: 600; letter-spacing: -0.01em;
  white-space: nowrap;
  transform: translate(-50%, -50%);
}
.s-team__cursor-chev {
  width: 7px; height: 7px; border: solid currentColor; border-width: 1.8px 1.8px 0 0;
  transition: transform 0.5s var(--ease-out);
}
.s-team__cursor-chev--l { transform: rotate(-135deg); }
.s-team__cursor-chev--r { transform: rotate(45deg); }
.s-team__viewport.is-pressing .s-team__cursor-chev--l { transform: translateX(-4px) rotate(-135deg); }
.s-team__viewport.is-pressing .s-team__cursor-chev--r { transform: translateX(4px) rotate(45deg); }

/* ---------------- Draggable mode (JS + motion) ---------------- */
.s-team__viewport.is-drag {
  overflow: hidden;
  scroll-snap-type: none;
  touch-action: pan-y;
}
.s-team__viewport.is-drag .s-team__track { will-change: transform; }
.s-team__viewport.is-drag .s-team__card-btn img { transform: scale(1.12); will-change: transform; }
.s-team__viewport.is-follow,
.s-team__viewport.is-follow .s-team__track,
.s-team__viewport.is-follow .s-team__card-btn { cursor: none !important; }
.s-team__viewport.is-follow .s-team__cursor { visibility: visible; }

.s-team__card.is-lifted .s-team__card-btn img,
.s-team__card.is-lifted .s-team__plus { opacity: 0; }

/* ---------------- Lightbox ---------------- */
.s-team__lightbox {
  position: fixed; inset: 0;
  width: 100%; height: 100%; max-width: none; max-height: none;
  margin: 0; padding: 0; border: 0;
  background: transparent; color: var(--c-fog);
  overflow: hidden;
  overscroll-behavior: contain;
}
.s-team__lightbox::backdrop { background: transparent; }
.s-team__lightbox[open] { display: block; }
.s-team__lb-bg {
  position: absolute; inset: 0;
  background: rgba(0, 0, 0, 0.88);
  -webkit-backdrop-filter: saturate(160%) blur(24px);
  backdrop-filter: saturate(160%) blur(24px);
}
.s-team__lb-stage {
  position: absolute; inset: 0 0 112px 0;
  display: grid; place-items: center;
  padding: 72px clamp(16px, 5vw, 96px) 8px;
}
.s-team__lb-img {
  display: block; max-width: none;
  border-radius: var(--r-md);
  user-select: none; -webkit-user-drag: none;
}
.s-team__lb-bar {
  position: absolute; left: 0; right: 0; bottom: 0;
  height: 112px; padding: 0 var(--gutter) max(16px, env(safe-area-inset-bottom));
  display: flex; align-items: center; justify-content: center; gap: clamp(16px, 3vw, 40px);
}
.s-team__lb-cap {
  display: grid; gap: 4px; justify-items: center; text-align: center;
  min-width: 0; max-width: 46ch;
  font-family: var(--font-display); font-size: var(--fs-body); font-weight: 600; letter-spacing: -0.015em; color: var(--c-fog);
}
.s-team__lb-count { font-family: var(--font-text); font-size: var(--fs-fine); font-weight: 500; letter-spacing: 0.02em; color: var(--c-fog-2); }
.s-team__lb-nav, .s-team__lb-close {
  flex: none; display: grid; place-items: center;
  width: 44px; height: 44px; border-radius: 50%;
  background: rgba(255, 255, 255, 0.14); color: rgba(255, 255, 255, 0.86);
  transition: background-color var(--dur-fast) ease, transform var(--dur) var(--ease-out), opacity var(--dur) ease;
}
.s-team__lb-nav:hover, .s-team__lb-close:hover { background: rgba(255, 255, 255, 0.24); color: #fff; }
.s-team__lb-nav:active, .s-team__lb-close:active { transform: scale(0.92); }
.s-team__lb-nav svg, .s-team__lb-close svg { width: 36px; height: 36px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.s-team__lb-close svg { stroke-width: 2.2; }
.s-team__lb-close { position: absolute; top: max(16px, env(safe-area-inset-top)); right: max(16px, env(safe-area-inset-right)); }

/* ---------------- Responsive ---------------- */
@media (max-width: 1023px) {
  .s-team__pair { grid-template-columns: minmax(0, 1fr); align-items: start; gap: 36px; }
  .s-team__figure { order: -1; }
  .s-team__photo-cap { position: static; }
  .s-team__copy { padding: 0; justify-content: flex-start; }
  .s-team__lead { max-width: 34ch; }
  .s-team__photo { aspect-ratio: 4 / 3; }
}
@media (max-width: 767px) {
  .s-team { --team-card-h: clamp(300px, 46svh, 440px); --team-card-max: 82vw; --team-gap: 12px; --team-cap-mt: 12px; }
  .s-team__eyebrow { margin-bottom: 10px; }
  .s-team__photo { border-radius: var(--r-lg); aspect-ratio: 5 / 4; }
  .s-team__person { padding: 14px 16px 14px 14px; gap: 14px; flex-wrap: wrap; }
  .s-team__avatar { width: 52px; height: 52px; }
  .s-team__mark { width: 30px; }
  .s-team__person-link { margin-left: 66px; margin-top: -4px; }
  .s-team__field-head { grid-template-columns: minmax(0, 1fr); }
  .s-team__field-lead { justify-self: start; }
  .s-team__card-btn { border-radius: var(--r-md); }
  .s-team__plus { right: 12px; bottom: 12px; width: 32px; height: 32px; }
  .s-team__lb-stage { inset: 0 0 100px 0; padding: 64px 12px 8px; }
  .s-team__lb-bar { height: 100px; }
  .s-team__lb-img { border-radius: var(--r-sm); }
}
@media (min-width: 768px) and (max-width: 1023px) {
  .s-team__person-link { margin-left: auto; }
}

/* ---- 70-clients.css ---- */
/* =====================================================================
   70 · Clients: velocity-reactive two-row logo marquee
   Baseline (no JS / reduced motion) is a calm static grid of the six
   logos; .is-live (added by JS) turns it into the infinite marquee.
   ===================================================================== */
.s-clients {
  --tile-w: 220px;
  --tile-h: 120px;
  --tile-gap: 20px;
  --tile-r: var(--r-md);
  --logo-k: 1;
  --tile-shadow: 0 1px 2px rgba(0, 0, 0, 0.04), 0 10px 28px -6px rgba(0, 0, 0, 0.08);
  --tile-shadow-hover: 0 2px 4px rgba(0, 0, 0, 0.04), 0 22px 44px -10px rgba(0, 0, 0, 0.16);
  position: relative;
  padding-block: var(--section-pad);
  overflow: clip;
}

/* Header */
.s-clients__head { display: grid; justify-items: center; text-align: center; }
.s-clients__eyebrow { margin-bottom: 14px; }
/* Brand eyebrow, deeper ramp: the base light ramp ends at #2997ff (2.8:1 on snow). This one stays >= 4.7:1 on snow. */
.s-clients__eyebrow.eyebrow--brand { background-image: linear-gradient(100deg, #00509f 0%, #0062c4 50%, #006bd6 100%); }
.s-clients__title { max-width: 12ch; }
.s-clients__lead { max-width: 38ch; margin-top: clamp(20px, 2.4vw, 32px); text-wrap: balance; }

.s-clients__marquee { margin-top: clamp(40px, 5vw, 72px); } /* live rows add 24–40px of shadow room on top */
.s-clients__marquee:not(.is-live) { padding-top: clamp(16px, 2.2vw, 32px); }

/* Tiles */
.s-clients__tile {
  position: relative;
  display: grid; place-items: center;
  border-radius: var(--tile-r);
  background: var(--c-white);
  box-shadow: var(--tile-shadow);
  transition: transform 0.6s var(--ease-out), box-shadow 0.6s var(--ease-out);
}
.s-clients__tile img {
  width: calc(var(--lw) * 1px * var(--logo-k));
  height: auto;
  filter: grayscale(1);
  opacity: 0.72;
  transition: filter 0.5s var(--ease-out), opacity 0.5s var(--ease-out), transform 0.6s var(--ease-out);
  user-select: none; -webkit-user-drag: none;
}
@media (hover: hover) and (pointer: fine) {
  .s-clients__tile:hover { transform: translateY(-4px); box-shadow: var(--tile-shadow-hover); }
  .s-clients__tile:hover img { filter: none; opacity: 1; transform: scale(1.04); }
}

/* ---------- Static grid (baseline: no JS, reduced motion) ---------- */
.s-clients__rows { width: min(var(--w-narrow), 100% - 2 * var(--gutter)); margin-inline: auto; }
.s-clients__row--2 { display: none; }
.s-clients__set {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--tile-gap);
}
.s-clients__set .s-clients__tile { aspect-ratio: 220 / 120; }

/* ---------- Live marquee ---------- */
/* Block flow (not grid): a grid item's automatic min-width would grow each row
   to its max-content rail, pushing the right-hand fade and the clone maths off-screen. */
.s-clients__marquee.is-live .s-clients__rows { width: auto; margin: 0; display: block; }
.s-clients__marquee.is-live .s-clients__row--2 { display: block; margin-top: calc(var(--tile-gap) - 80px); }
.s-clients__marquee.is-live .s-clients__row {
  position: relative;
  min-width: 0;
  overflow-x: clip;
  padding-block: 40px; /* room for the hover lift + shadow inside the mask */
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 var(--fade), #000 calc(100% - var(--fade)), transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 var(--fade), #000 calc(100% - var(--fade)), transparent 100%);
  --fade: clamp(48px, 12vw, 220px);
}
.s-clients__marquee.is-live .s-clients__rail {
  display: flex; width: max-content;
  will-change: transform;
  backface-visibility: hidden;
}
.s-clients__marquee.is-live .s-clients__set {
  display: flex; gap: var(--tile-gap);
  padding-right: var(--tile-gap);
}
.s-clients__marquee.is-live .s-clients__tile { flex: none; width: var(--tile-w); height: var(--tile-h); aspect-ratio: auto; }

/* Footer row: fine print + play/pause */
.s-clients__foot {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  margin-top: clamp(28px, 3vw, 40px);
}
.s-clients__marquee.is-live .s-clients__foot { margin-top: 8px; }
.s-clients__fine { font-size: var(--fs-fine); color: var(--fg-2); letter-spacing: 0; }
.s-clients__marquee:not(.is-live) .s-clients__foot { justify-content: center; }
.s-clients__toggle {
  flex: none; display: grid; place-items: center;
  width: 44px; height: 44px; border-radius: 50%;
  background: rgba(210, 210, 215, 0.56);
  color: rgba(0, 0, 0, 0.62);
  transition: background-color var(--dur-fast) ease, color var(--dur-fast) ease, transform var(--dur) var(--ease-out);
}
.s-clients__toggle:hover { background: rgba(210, 210, 215, 0.82); color: rgba(0, 0, 0, 0.86); }
.s-clients__toggle:active { transform: scale(0.92); }
.s-clients__toggle[hidden] { display: none; }
.s-clients__icon { width: 36px; height: 36px; fill: currentColor; }
.s-clients__icon--play { display: none; }
.s-clients__toggle[aria-pressed="true"] .s-clients__icon--pause { display: none; }
.s-clients__toggle[aria-pressed="true"] .s-clients__icon--play { display: block; }

/* ---------- Responsive ---------- */
@media (max-width: 767px) {
  .s-clients { --tile-w: 150px; --tile-h: 84px; --tile-gap: 12px; --tile-r: var(--r-sm); --logo-k: 0.68; }
  .s-clients__title { max-width: none; }
  .s-clients__set { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .s-clients__set .s-clients__tile { aspect-ratio: 16 / 10; }
  .s-clients__marquee:not(.is-live) .s-clients__tile img { --logo-k: 0.74; }
  .s-clients__marquee.is-live .s-clients__row { padding-block: 24px; }
  .s-clients__marquee.is-live .s-clients__row--2 { margin-top: calc(var(--tile-gap) - 48px); }
}

/* ---- 80-contact.css ---- */
/* =====================================================================
   80-contact — closing scene: 3D business card, direct lines, quote form
   ===================================================================== */
.s-contact {
  --ct-ink: #2b1f5c;                     /* business-card ink (logo indigo) */
  --ct-paper-1: #f7f2ee;
  --ct-paper-2: #efe7e2;
  --ct-paper-3: #e7ded8;
  --ct-paper-edge: #d9cfc8;
  --ct-navy: #0a1f4d;
  --ct-field: rgba(255, 255, 255, 0.045);
  --ct-field-line: rgba(255, 255, 255, 0.13);
  --ct-field-line-hover: rgba(255, 255, 255, 0.24);
  --ct-err: #ff6961;
  --ct-ok: #30d158;
  --ct-panel: linear-gradient(180deg, #1b1b1d 0%, #141415 100%);
  --ct-hair: rgba(255, 255, 255, 0.08);
  --ct-sine: cubic-bezier(0.37, 0, 0.63, 1);  /* easeInOutSine: alternate keyframes trace a sine */
  position: relative;
  overflow: clip;
  isolation: isolate;
  padding-block: clamp(108px, 9.6vw, 140px) clamp(104px, 11vw, 168px);
}

/* Deep navy wash at the top of the scene */
.s-contact__glow {
  position: absolute; inset: 0 0 auto 0; z-index: 0;
  height: min(1500px, 190vh);
  background:
    radial-gradient(70% 46% at 50% 0%, rgba(16, 48, 111, 0.62) 0%, rgba(10, 31, 77, 0.32) 42%, rgba(5, 12, 34, 0) 78%),
    radial-gradient(55% 40% at 50% 62%, rgba(10, 31, 77, 0.38) 0%, rgba(5, 12, 34, 0) 70%);
  pointer-events: none;
}
.s-contact__inner { position: relative; z-index: 1; }

/* ---------- Header ---------- */
.s-contact__head { max-width: 920px; margin-inline: auto; text-align: center; }
/* eyebrow + headline use the shared .eyebrow--brand / .h1 tokens (markup) */
.s-contact .s-contact__title {
  margin-top: 14px;
  color: var(--fg);
}
.s-contact__lead { max-width: 30em; margin: 20px auto 0; text-wrap: balance; }

/* =====================================================================
   Card scene
   ===================================================================== */
.s-contact__scene {
  position: relative;
  display: flex; flex-direction: column; align-items: center;
  margin-top: clamp(48px, 5vw, 72px);
}
.s-contact__stage {
  position: relative;
  width: min(580px, 100%);
  container-type: inline-size;
  cursor: pointer;
  touch-action: pan-y;
  -webkit-tap-highlight-color: transparent;
}
.s-contact__stage.is-dragging { cursor: grabbing; }
.s-contact__halo {
  position: absolute; z-index: 0; inset: -62% -48%;
  background: radial-gradient(closest-side, rgba(30, 78, 170, 0.42) 0%, rgba(16, 48, 111, 0.26) 42%, rgba(10, 31, 77, 0.1) 68%, rgba(10, 31, 77, 0) 100%);
  pointer-events: none;
}
.s-contact__shadow-wrap, .s-contact__shadow-float {
  position: absolute; z-index: 0; inset: 0;
  pointer-events: none;
}
.s-contact__shadow {
  position: absolute; inset: 9% 7% -3% 7%;
  border-radius: 4cqw;
  background: rgba(0, 0, 0, 0.82);
  filter: blur(4.6cqw);
  transform: translate3d(0, 4cqw, 0);
  opacity: 0.85;
  will-change: transform, opacity;
}
.s-contact__persp {
  position: relative; z-index: 1;
  perspective: 300cqw;
  perspective-origin: 50% 45%;
}
.s-contact__fly, .s-contact__float, .s-contact__tilt { transform-style: preserve-3d; }

/* Idle float: compositor-only keyframes, so a card that's just sitting on screen costs no main-thread
   work (pointer tilt, flips and swipes stay on the JS springs). Three incommensurate periods
   (6.0s bob, 7.6s pitch, 10.3s yaw) so it never visibly loops; the shadow and the glare follow the
   same clocks. JS adds .is-floating (motion allowed) and .is-held (hovered, dragged, form in use or
   off screen), which freezes it in place. */
.s-contact__scene.is-floating .s-contact__float {
  animation:
    ct-float-bob 2.99s var(--ct-sine) -0.6s infinite alternate,
    ct-float-pitch 3.79s var(--ct-sine) -2.4s infinite alternate,
    ct-float-yaw 5.15s var(--ct-sine) -1.4s infinite alternate;
}
.s-contact__scene.is-floating .s-contact__shadow-float { animation: ct-shadow-bob 2.99s var(--ct-sine) -0.6s infinite alternate; }
.s-contact__scene.is-floating .s-contact__shadow { animation: ct-shadow-yaw 5.15s var(--ct-sine) -1.4s infinite alternate; }
.s-contact__scene.is-floating .s-contact__glare { animation: ct-glare-yaw 5.15s var(--ct-sine) -1.4s infinite alternate; }
/* seen through the 180deg turn, the back's highlight drifts the mirrored way */
.s-contact__scene.is-floating .s-contact__face--back .s-contact__glare { animation-direction: alternate-reverse; }
.s-contact__scene.is-held .s-contact__float,
.s-contact__scene.is-held .s-contact__shadow-float,
.s-contact__scene.is-held .s-contact__shadow,
.s-contact__scene.is-held .s-contact__glare { animation-play-state: paused; }
/* amplitudes as % of each layer's own box: bob 1.1% of the card width, shadow 35% of it the other way */
@keyframes ct-float-bob { from { translate: 0 1.925%; } to { translate: 0 -1.925%; } }
@keyframes ct-float-pitch { from { rotate: x 1.8deg; } to { rotate: x -1.8deg; } }
@keyframes ct-float-yaw { from { transform: rotateY(-2.6deg); } to { transform: rotateY(2.6deg); } }
@keyframes ct-shadow-bob { from { translate: 0 -0.67%; } to { translate: 0 0.67%; } }
@keyframes ct-shadow-yaw { from { translate: 1.66% 0; } to { translate: -1.66% 0; } }
@keyframes ct-glare-yaw { from { translate: 4.4% 0; } to { translate: -4.4% 0; } }
.s-contact__card {
  position: relative;
  width: 100%;
  aspect-ratio: 1.75;
  transform-style: preserve-3d;
  color: var(--ct-ink);
}

/* card thickness: four thin edges so the flip reads as a solid object */
.s-contact__edge { position: absolute; display: block; background: var(--ct-paper-edge); pointer-events: none; opacity: 0.85; }
.s-contact__edge--l, .s-contact__edge--r { top: 1.4cqw; bottom: 1.4cqw; width: 3px; }
.s-contact__edge--l { left: -1.5px; transform: rotateY(90deg); background: linear-gradient(90deg, #a89f99, var(--ct-paper-edge) 45%, #10255a 55%, #0a1f4d); }
.s-contact__edge--r { right: -1.5px; transform: rotateY(90deg); background: linear-gradient(90deg, #0a1f4d, #10255a 45%, var(--ct-paper-edge) 55%, #a89f99); }
.s-contact__edge--t, .s-contact__edge--b { left: 1.4cqw; right: 1.4cqw; height: 3px; }
.s-contact__edge--t { top: -1.5px; transform: rotateX(90deg); background: linear-gradient(180deg, #0a1f4d, #10255a 45%, var(--ct-paper-edge) 55%, #b8afa9); }
.s-contact__edge--b { bottom: -1.5px; transform: rotateX(90deg); background: linear-gradient(180deg, #b8afa9, var(--ct-paper-edge) 45%, #10255a 55%, #0a1f4d); }

.s-contact__face {
  position: absolute; inset: 0;
  border-radius: 1.3cqw;
  overflow: hidden;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}
.s-contact__card[data-face="front"] .s-contact__face--back,
.s-contact__card[data-face="back"] .s-contact__face--front { pointer-events: none; }

/* ---------- Front: recreation of the printed card ---------- */
.s-contact__face--front {
  transform: translateZ(1.5px);
  background:
    radial-gradient(130% 120% at 20% 6%, rgba(255, 253, 250, 0.95) 0%, rgba(255, 253, 250, 0) 58%),
    linear-gradient(158deg, var(--ct-paper-1) 0%, var(--ct-paper-2) 52%, var(--ct-paper-3) 100%);
  box-shadow: inset 0 0 0 1px rgba(43, 31, 92, 0.06), inset 0 1px 0 rgba(255, 255, 255, 0.85);
  color: var(--ct-ink);
  font-family: "Helvetica Neue", Arial, Helvetica, sans-serif;
  -webkit-user-select: text; user-select: text;
  white-space: nowrap;
}
.s-contact__face--front ::selection { background: rgba(43, 31, 92, 0.18); color: var(--ct-ink); }
.s-contact__brand {
  position: absolute; left: 9.75cqw; top: 14.2cqw; width: 22.6cqw;
  display: flex; flex-direction: column; align-items: center;
}
.s-contact__mark { width: 100%; height: auto; color: var(--ct-ink); }
.s-contact .s-contact__wordmark {
  margin-top: 1.05cqw;
  font-family: "Helvetica Neue", Arial, Helvetica, sans-serif;
  font-size: 2.68cqw; line-height: 1; font-weight: 700;
  letter-spacing: 0.055em; text-transform: uppercase;
  color: var(--ct-ink);
}
.s-contact__person { position: absolute; left: 50.6cqw; top: 6.1cqw; }
.s-contact .s-contact__name {
  font-family: "Times New Roman", Times, "Liberation Serif", "Nimbus Roman", Georgia, serif;
  font-size: 4.36cqw; line-height: 1; font-weight: 700;
  letter-spacing: 0.004em; text-transform: uppercase; text-wrap: nowrap;
  color: var(--ct-ink);
}
.s-contact__role {
  margin-top: 0.45cqw;
  font-size: 3.3cqw; line-height: 1; font-weight: 400; letter-spacing: 0;
  color: var(--ct-ink);
}
.s-contact__addr {
  position: absolute; left: 51.1cqw; top: 19.5cqw;
  font-size: 2.56cqw; line-height: 1.51; font-weight: 500; letter-spacing: 0;
  color: var(--ct-ink);
}
.s-contact__caps { text-transform: uppercase; }
.s-contact__rows {
  position: absolute; left: 40.9cqw; top: 36.7cqw;
  display: grid; grid-template-columns: auto 1fr; column-gap: 1.25cqw;
  font-size: 2.7cqw; line-height: 1.6; font-weight: 500; letter-spacing: 0;
  color: var(--ct-ink);
}
.s-contact__rows > div { display: contents; }
.s-contact__rows dt { display: flex; justify-content: space-between; gap: 0.8cqw; min-width: 9cqw; }
.s-contact__rows dt::after { content: ":"; }
.s-contact__rows dd { margin: 0; }

.s-contact__grain {
  position: absolute; inset: 0; pointer-events: none; opacity: 0.55;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .42 0 0 0 0 .36 0 0 0 0 .34 0 0 0 .09 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}
/* Glare: a 2x-sized light layer moved with transforms only (no per-frame repaint of the printed face) */
.s-contact__glare {
  /* offset (in % of this 2x-sized layer) + strength, written by JS onto each glare layer only,
     so a frame restyles these two layers instead of the whole card */
  --glx: -10%; --gly: -16%; --go: 0.32;
  position: absolute; left: -50%; top: -50%; width: 200%; height: 200%;
  pointer-events: none;
  opacity: var(--go);
  background: radial-gradient(35% 45% at 50% 50%, rgba(255, 255, 255, 0.34) 0%, rgba(255, 255, 255, 0.1) 38%, rgba(255, 255, 255, 0) 64%);
  transform: translate3d(var(--glx), var(--gly), 0);
  -webkit-backface-visibility: hidden; backface-visibility: hidden;
  will-change: transform, opacity;
}
/* the far side of the card falls slightly into shade, mirrored from the highlight */
.s-contact__face--front .s-contact__glare::after {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(45% 55% at 50% 50%, rgba(60, 40, 40, 0.07) 0%, rgba(60, 40, 40, 0) 60%);
  transform: translate3d(calc(var(--glx) * -2), calc(var(--gly) * -2), 0);
}
.s-contact__sheen {
  position: absolute; inset: -10% -30%; pointer-events: none;
  background: linear-gradient(112deg, rgba(255, 255, 255, 0) 42%, rgba(255, 255, 255, 0.42) 49.5%, rgba(255, 255, 255, 0.06) 53%, rgba(255, 255, 255, 0) 58%);
  transform: translateX(-130%);
  -webkit-backface-visibility: hidden; backface-visibility: hidden;
  will-change: transform;
}

/* ---------- Back ---------- */
.s-contact__face--back {
  transform: rotateY(180deg) translateZ(1.5px);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  background:
    radial-gradient(120% 140% at 16% -4%, #1a4596 0%, rgba(26, 69, 150, 0) 52%),
    radial-gradient(100% 120% at 100% 110%, #051233 0%, rgba(5, 18, 51, 0) 60%),
    var(--ct-navy);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.07), inset 0 1px 0 rgba(255, 255, 255, 0.14);
  color: #fff;
  font-family: var(--font-display);
  text-align: center;
}
.s-contact__face--back .s-contact__glare {
  /* the back is seen through a 180deg turn, so its highlight mirrors horizontally */
  background: radial-gradient(30% 40% at 50% 50%, rgba(170, 205, 255, 0.2) 0%, rgba(120, 170, 255, 0.05) 42%, rgba(120, 170, 255, 0) 66%);
  transform: translate3d(calc(var(--glx) * -1), var(--gly), 0);
}
.s-contact__face--back .s-contact__sheen { background: linear-gradient(108deg, rgba(255, 255, 255, 0) 38%, rgba(190, 215, 255, 0.28) 49%, rgba(255, 255, 255, 0) 60%); }
.s-contact__frame {
  position: absolute; inset: 3.4cqw; border-radius: 0.8cqw;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1);
  pointer-events: none;
}
.s-contact__back-mark {
  width: 23cqw; height: auto;
  filter: drop-shadow(0 0.5cqw 1cqw rgba(0, 0, 0, 0.35));
}
.s-contact .s-contact__back-word {
  margin-top: 2.4cqw;
  font-size: 3.1cqw; line-height: 1; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase;
  padding-left: 0.2em; /* optically centre the tracked word */
  background: var(--grad-metal); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.s-contact .s-contact__back-tag {
  margin-top: 1.4cqw;
  font-size: 2.4cqw; line-height: 1.2; font-weight: 400; letter-spacing: 0.01em;
  color: #b4c2de;
}
.s-contact__back-save {
  position: relative; z-index: 2;
  display: inline-flex; align-items: center; gap: 0.5em;
  margin-top: 3.4cqw;
  min-height: max(32px, 6.2cqw); padding: 0 max(14px, 2.6cqw);
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, 0.12);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.18);
  color: #fff;
  font-family: var(--font-text); font-size: clamp(12px, 2.25cqw, 15px); font-weight: 500; letter-spacing: -0.01em;
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  transition: background-color var(--dur-fast) ease, transform var(--dur) var(--ease-out);
}
.s-contact__back-save::before { content: ""; position: absolute; inset: -6px -4px; border-radius: inherit; } /* >= 44px hit area */
.s-contact__back-save:hover { background: rgba(255, 255, 255, 0.2); }
.s-contact__back-save:active { transform: scale(0.96); }
.s-contact__back-save svg { width: 1.1em; height: 1.1em; transition: color var(--dur) ease; }
.s-contact__back-save.is-done svg { color: var(--ct-ok); }

/* ---------- Card controls ---------- */
.s-contact__controls {
  position: relative; z-index: 2;
  display: flex; flex-wrap: wrap; justify-content: center; gap: 12px;
  margin-top: clamp(40px, 4.6vw, 60px);
}
.s-contact__pill {
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 44px; padding: 0 20px 0 16px;
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, 0.08);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1);
  color: var(--fg);
  font-size: 0.9375rem; font-weight: 500; letter-spacing: -0.01em;
  -webkit-backdrop-filter: blur(14px) saturate(160%); backdrop-filter: blur(14px) saturate(160%);
  transition: background-color var(--dur-fast) ease, box-shadow var(--dur-fast) ease, transform var(--dur) var(--ease-out);
}
.s-contact__pill:hover { background: rgba(255, 255, 255, 0.14); }
.s-contact__pill:active { transform: scale(0.96); }
.s-contact__pill svg { width: 18px; height: 18px; flex: none; transition: transform 0.7s var(--ease-out); }
.s-contact__pill[aria-pressed="true"] { background: rgba(41, 151, 255, 0.16); box-shadow: inset 0 0 0 1px rgba(41, 151, 255, 0.45); }
.s-contact__pill[aria-pressed="true"] svg { transform: rotate(180deg); }
.s-contact__pill.is-done svg { color: var(--ct-ok); }
.s-contact__hint {
  margin-top: 14px;
  font-size: var(--fs-fine); letter-spacing: 0; color: #86868b;
  text-align: center;
}

/* =====================================================================
   Direct lines + quote form
   ===================================================================== */
.s-contact__grid {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(32px, 5vw, 80px);
  align-items: start;
  margin-top: clamp(96px, 11vw, 168px);
}
.s-contact__reach { align-self: stretch; }
.s-contact__reach-in { position: sticky; top: calc(var(--nav-h) + 40px); padding-top: clamp(24px, 3.6vw, 48px); }
.s-contact .s-contact__subhead {
  font-size: clamp(1.75rem, 2.6vw, 2.5rem);
  line-height: 1.1; letter-spacing: -0.03em; font-weight: 700;
  color: var(--fg);
}
.s-contact__subcopy {
  margin-top: 12px; max-width: 40ch;
  font-size: var(--fs-body); color: var(--fg-2);
}

/* Apple Settings style grouped list */
.s-contact__list-wrap { position: relative; margin-top: 32px; }
.s-contact__list {
  border-radius: var(--r-md);
  background: var(--surface);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.04);
  overflow: hidden;
}
.s-contact__list > li { position: relative; }
.s-contact__list > li + li::before {
  content: ""; position: absolute; z-index: 1; top: 0; left: 66px; right: 0; height: 1px;
  background: var(--ct-hair); pointer-events: none;
}
.s-contact__row {
  position: relative;
  display: grid; grid-template-columns: 32px minmax(0, 1fr) auto; align-items: center; gap: 16px;
  min-height: 68px; padding: 12px 18px;
  color: var(--fg);
  transition: background-color var(--dur-fast) ease;
}
a.s-contact__row:hover { background: rgba(255, 255, 255, 0.045); }
a.s-contact__row:active { background: rgba(255, 255, 255, 0.08); }
a.s-contact__row:focus-visible { outline-offset: -3px; border-radius: var(--r-md); }
.s-contact__ico {
  display: grid; place-items: center;
  width: 32px; height: 32px; border-radius: 8px;
  color: #fff;
  box-shadow: inset 0 0 0 0.5px rgba(255, 255, 255, 0.18), 0 1px 2px rgba(0, 0, 0, 0.3);
}
.s-contact__ico svg { width: 19px; height: 19px; }
.s-contact__ico--call { background: linear-gradient(180deg, #5ae07a 0%, #28b84a 100%); }
.s-contact__ico--wa { background: linear-gradient(180deg, #2fc4a8 0%, #0e8a73 100%); }
.s-contact__ico--mail { background: linear-gradient(180deg, #4aa8ff 0%, #0a6be8 100%); }
.s-contact__ico--map { background: linear-gradient(180deg, #ff7a6e 0%, #e2362c 100%); }
.s-contact__ico--map circle { fill: #e9443a; }
.s-contact__ico--doc { background: linear-gradient(180deg, #9d9da3 0%, #6b6b70 100%); }
.s-contact__row-text { display: grid; gap: 2px; min-width: 0; }
.s-contact__row-title { font-size: var(--fs-body); font-weight: 500; line-height: 1.25; letter-spacing: -0.015em; }
.s-contact__row-sub { font-size: 0.875rem; line-height: 1.35; color: var(--fg-2); letter-spacing: -0.005em; overflow-wrap: anywhere; }
.s-contact__chev { width: 18px; height: 18px; color: #6e6e73; transition: transform var(--dur) var(--ease-out), color var(--dur-fast) ease; }
a.s-contact__row:hover .s-contact__chev { color: var(--fg-2); transform: translateX(3px); }
a.s-contact__row:hover .s-contact__chev--out { transform: translate(2px, -2px); }

/* The button itself is the 44px target; the 32px pill (which clips the label swap) is the inner span,
   so the clipping can't eat into the hit area. Negative margins keep the row height unchanged. */
.s-contact__copy {
  display: inline-grid; place-items: center;
  min-height: 44px; margin-block: -6px; padding: 0;
  background: none;
  color: var(--link);
  font-size: 0.875rem; font-weight: 600; letter-spacing: -0.005em;
  -webkit-tap-highlight-color: transparent;
  transition: color var(--dur-fast) ease;
}
.s-contact__copy-in {
  display: inline-grid; place-items: center;
  min-width: 72px; height: 32px; padding: 0 14px;
  border-radius: var(--r-pill);
  background: rgba(41, 151, 255, 0.14);
  overflow: hidden;
  transition: background-color var(--dur-fast) ease, transform var(--dur) var(--ease-out);
}
.s-contact__copy:focus-visible { outline: none; }
.s-contact__copy:focus-visible .s-contact__copy-in { outline: 2px solid var(--c-blue-bright); outline-offset: 3px; }
.s-contact__copy:hover .s-contact__copy-in { background: rgba(41, 151, 255, 0.22); }
.s-contact__copy:active .s-contact__copy-in { transform: scale(0.95); }
.s-contact__copy-a, .s-contact__copy-b {
  grid-area: 1 / 1; display: inline-flex; align-items: center; gap: 4px;
  transition: transform 0.5s var(--ease-out), opacity 0.3s ease;
}
.s-contact__copy-b { transform: translateY(120%); opacity: 0; }
.s-contact__copy-b svg { width: 14px; height: 14px; }
.s-contact__copy.is-copied { color: var(--ct-ok); }
.s-contact__copy.is-copied .s-contact__copy-in { background: rgba(48, 209, 88, 0.16); }
.s-contact__copy.is-copied .s-contact__copy-a { transform: translateY(-120%); opacity: 0; }
.s-contact__copy.is-copied .s-contact__copy-b { transform: none; opacity: 1; }

.s-contact__toast {
  position: absolute; left: 50%; bottom: -34px; z-index: 3;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 16px 10px 13px;
  border-radius: var(--r-pill);
  background: rgba(44, 44, 46, 0.9);
  -webkit-backdrop-filter: blur(20px) saturate(180%); backdrop-filter: blur(20px) saturate(180%);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.45), inset 0 0 0 1px rgba(255, 255, 255, 0.08);
  color: var(--fg); font-size: 0.875rem; font-weight: 500; white-space: nowrap;
  opacity: 0; transform: translate(-50%, 14px) scale(0.96);
  transition: opacity 0.3s ease, transform 0.55s var(--ease-out);
  pointer-events: none;
}
.s-contact__toast svg { width: 16px; height: 16px; color: var(--ct-ok); }
.s-contact__toast.is-shown { opacity: 1; transform: translate(-50%, 0) scale(1); }

/* ---------- Quote form ---------- */
.s-contact__quote {
  scroll-margin-top: calc(var(--nav-h) + 24px);
  border-radius: var(--r-lg);
  background: var(--ct-panel);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), inset 0 0 0 1px rgba(255, 255, 255, 0.04);
  padding: clamp(24px, 3.6vw, 48px);
}
/* Anchor targets (#contact, #quote) receive focus from the nav: no ring around a whole section,
   and the panel keeps its own corner radius instead of the global 6px focus radius. */
.s-contact:focus-visible { outline: none; }
.s-contact .s-contact__quote:focus-visible { border-radius: var(--r-lg); outline-offset: 4px; }
.s-contact__form-head { margin-bottom: 28px; }
.s-contact__fields {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}
.s-contact__route, .s-contact__seg-set, .s-contact__field--area { grid-column: 1 / -1; }

.s-contact__field { position: relative; min-width: 0; }
.s-contact__input {
  display: block; width: 100%;
  height: 58px; padding: 24px 16px 8px;
  border: 1px solid var(--ct-field-line); border-radius: var(--r-sm);
  background: var(--ct-field);
  color: var(--fg);
  font-size: var(--fs-body); line-height: 24px; letter-spacing: -0.01em;
  outline: none;
  -webkit-appearance: none; appearance: none;
  transition: border-color var(--dur-fast) ease, box-shadow 0.3s var(--ease-out), background-color var(--dur-fast) ease;
}
.s-contact__input:hover { border-color: var(--ct-field-line-hover); }
.s-contact__input:focus, .s-contact__input:focus-visible {
  border-color: var(--c-blue-bright);
  box-shadow: 0 0 0 4px rgba(41, 151, 255, 0.28);
  background: rgba(255, 255, 255, 0.06);
  outline: none;
}
.s-contact__textarea { height: auto; min-height: 136px; padding-top: 28px; resize: vertical; line-height: 1.45; }
.s-contact__field--date .s-contact__input { padding-right: 12px; color-scheme: dark; }
.s-contact__field--date .s-contact__input::-webkit-datetime-edit { color: var(--fg); }
.s-contact__field--date .s-contact__input:invalid::-webkit-datetime-edit,
.s-contact__field--date .s-contact__input.is-empty::-webkit-datetime-edit { color: var(--fg-2); }
.s-contact__field--date .s-contact__input::-webkit-calendar-picker-indicator { opacity: 0.6; cursor: pointer; }
/* iOS Safari centres date values and collapses empty ones; keep it aligned with the other fields */
.s-contact__field--date .s-contact__input::-webkit-date-and-time-value { text-align: left; min-height: 24px; }

.s-contact__label {
  position: absolute; left: 17px; top: 17px;
  max-width: calc(100% - 34px);
  font-size: var(--fs-body); line-height: 24px; color: var(--fg-2);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  transform-origin: 0 0;
  pointer-events: none;
  transition: transform 0.32s var(--ease-out), color var(--dur-fast) ease;
}
.s-contact__req { margin-left: 2px; color: var(--fg-2); }
.s-contact__input:focus + .s-contact__label,
.s-contact__input:not(:placeholder-shown) + .s-contact__label,
.s-contact__field--date .s-contact__label {
  transform: translateY(-9px) scale(0.75);
}
.s-contact__input:focus + .s-contact__label { color: var(--c-blue-bright); }

.s-contact__hint-f { margin: 6px 4px 0; font-size: 0.8125rem; line-height: 1.35; color: #8a8a8f; }
.s-contact__err {
  display: grid; grid-template-rows: 0fr;
  transition: grid-template-rows 0.4s var(--ease-out);
  color: var(--ct-err);
  font-size: 0.8125rem; line-height: 1.35;
}
.s-contact__err > span { overflow: hidden; padding-inline: 4px; }
.s-contact__field.is-invalid .s-contact__err { grid-template-rows: 1fr; }
.s-contact__field.is-invalid .s-contact__err > span { padding-top: 7px; }
.s-contact__field.is-invalid .s-contact__input { border-color: var(--ct-err); }
.s-contact__field.is-invalid .s-contact__input:focus { box-shadow: 0 0 0 4px rgba(255, 105, 97, 0.25); }
.s-contact__field.is-invalid .s-contact__label { color: var(--ct-err); }

/* Pickup ⇄ drop */
.s-contact__route {
  display: grid; grid-template-columns: minmax(0, 1fr) 44px minmax(0, 1fr);
  column-gap: 10px; align-items: start;
}
.s-contact__swap {
  display: grid; place-items: center;
  width: 44px; height: 44px; margin-top: 7px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.07);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1);
  color: var(--fg-2);
  transition: background-color var(--dur-fast) ease, color var(--dur-fast) ease;
}
.s-contact__swap:hover { background: rgba(255, 255, 255, 0.13); color: var(--fg); }
.s-contact__swap svg { width: 20px; height: 20px; transition: transform 0.6s var(--ease-out); }
.s-contact__swap.is-swapped svg { transform: rotate(180deg); }

/* Segmented control */
.s-contact__seg-set { border: 0; padding: 0; margin: 4px 0 0; min-width: 0; }
.s-contact__legend { padding: 0 0 10px 2px; font-size: 0.875rem; font-weight: 600; color: var(--fg-2); letter-spacing: -0.005em; }
.s-contact__seg {
  position: relative;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  padding: 3px;
  border-radius: var(--r-sm);
  background: rgba(255, 255, 255, 0.07);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.05);
}
.s-contact__seg-input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.s-contact__seg-opt {
  position: relative; z-index: 1;
  display: grid; place-items: center;
  min-height: 42px; padding: 0 8px;
  border-radius: 9px;
  font-size: 0.9375rem; font-weight: 500; letter-spacing: -0.01em;
  color: var(--fg-2);
  cursor: pointer; user-select: none;
  transition: color 0.3s ease;
}
.s-contact__seg-opt:hover { color: var(--fg); }
.s-contact__seg-input:checked + .s-contact__seg-opt { color: var(--fg); background: linear-gradient(180deg, #4a4a4e, #3a3a3d); }
.s-contact__seg.has-thumb .s-contact__seg-input:checked + .s-contact__seg-opt { background: none; }
.s-contact__seg-input:focus-visible + .s-contact__seg-opt { outline: 2px solid var(--c-blue-bright); outline-offset: 0; }
.s-contact__seg-thumb {
  position: absolute; z-index: 0; top: 3px; bottom: 3px; left: 0;
  width: 0; border-radius: 9px;
  background: linear-gradient(180deg, #4b4b50 0%, #3a3a3e 100%);
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.35), 0 1px 2px rgba(0, 0, 0, 0.3), inset 0 0.5px 0 rgba(255, 255, 255, 0.16);
  transform: translateX(var(--tx, 0px)) scale(var(--ts, 1));
  transition: transform 0.5s var(--ease-out), width 0.5s var(--ease-out);
  display: none;
}
.s-contact__seg.has-thumb .s-contact__seg-thumb { display: block; }
.s-contact__seg.is-pressing .s-contact__seg-thumb { --ts: 0.96; }
.s-contact__seg-thumb.no-anim { transition: none; }
.s-contact__seg-desc { margin: 8px 0 0 2px; font-size: 0.8125rem; color: #8a8a8f; }

.s-contact__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.s-contact__submit { gap: 0.55em; }
.s-contact__submit svg { width: 1.1em; height: 1.1em; }
.s-contact__submit--wa { --btn-fg: var(--fg); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.28); }
.s-contact__submit--wa:hover { --btn-bg: rgba(255, 255, 255, 0.1); --btn-fg: var(--fg); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.4); }
.s-contact__note { margin-top: 18px; font-size: var(--fs-fine); line-height: 1.5; color: #8a8a8f; letter-spacing: 0; }
.s-contact__status { min-height: 1.4em; margin-top: 6px; font-size: 0.875rem; color: var(--fg-2); }
.s-contact__status.is-error { color: var(--ct-err); }
.s-contact__status.is-ok { color: var(--ct-ok); }

/* ---------- Short desktop screens (e.g. 1280x720, 1366x768) ----------
   Keep the header + landed card inside one screen when the nav jumps to #contact. */
@media (min-width: 768px) and (max-height: 860px) {
  .s-contact { padding-top: clamp(84px, 12svh, 108px); }
  .s-contact .s-contact__title { margin-top: 10px; font-size: clamp(2.5rem, min(6.4vw, 9.6svh), 6rem); }
  .s-contact__lead { margin-top: 16px; }
  .s-contact__scene { margin-top: clamp(32px, 5svh, 48px); }
  .s-contact__stage { width: min(580px, 100%, 76svh); }
}
/* A sticky column taller than the screen would hide its own bottom rows */
@media (max-height: 700px) {
  .s-contact__reach-in { position: static; }
}

/* ---------- Tablet ---------- */
@media (max-width: 1023px) {
  .s-contact__grid { grid-template-columns: minmax(0, 1fr); gap: 72px; }
  .s-contact__reach-in { position: static; padding-top: 0; }
  .s-contact__subcopy { max-width: 52ch; }
}

/* ---------- Phone ---------- */
@media (max-width: 767px) {
  .s-contact__lead { max-width: 28ch; margin-top: 18px; }
  .s-contact__br { display: none; }
  .s-contact__shadow { filter: blur(5.5cqw); }
  .s-contact__controls { gap: 10px; }
  .s-contact__pill { padding: 0 16px 0 13px; font-size: 0.875rem; }
  .s-contact__grid { margin-top: 88px; gap: 64px; }
  .s-contact__list > li + li::before { left: 62px; }
  .s-contact__row { gap: 14px; padding: 12px 14px 12px 16px; min-height: 64px; }
  .s-contact__quote { border-radius: var(--r-md); padding: 26px 18px 20px; }
  .s-contact .s-contact__quote:focus-visible { border-radius: var(--r-md); }
  .s-contact__fields { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .s-contact__route {
    grid-template-columns: minmax(0, 1fr) 44px;
    grid-template-areas: "a s" "b s";
    row-gap: 12px; column-gap: 8px;
  }
  .s-contact__route > .s-contact__field:first-child { grid-area: a; }
  .s-contact__route > .s-contact__field:last-child { grid-area: b; }
  .s-contact__swap { grid-area: s; align-self: center; margin-top: 0; }
  .s-contact__swap svg { transform: rotate(90deg); }
  .s-contact__swap.is-swapped svg { transform: rotate(270deg); }
  .s-contact__seg-opt { font-size: 0.875rem; padding: 0 4px; }
  .s-contact__actions { flex-direction: column; }
  .s-contact__actions .btn { width: 100%; }
}

/* ---------- Reduced motion: everything readable, nothing in flight ---------- */
@media (prefers-reduced-motion: reduce) {
  .s-contact__sheen { display: none; }
  .s-contact__float, .s-contact__shadow-float, .s-contact__shadow, .s-contact__glare { animation: none !important; }
}