/* ==========================================================================
   SerenSynth Labs — main.css
   Design system + components. Single stylesheet, no build step.
   Order: 1 Tokens · 2 Reset · 3 Type · 4 Layout · 5 Components · 6 Sections
          7 Motion · 8 Responsive
   ========================================================================== */

/* ==========================================================================
   0 · FONTS — Inter Variable, self-hosted (no third-party request)
   Two subsets only: latin (48KB) and latin-ext (85KB, loads only if a
   character needs it — e.g. the ₹ rupee sign at U+20B9).
   ========================================================================== */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url('../fonts/inter-latin-wght-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url('../fonts/inter-latin-ext-wght-normal.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ==========================================================================
   1 · TOKENS
   ========================================================================== */
:root {
  /* Colour */
  --ink:         #0A0A0B;
  --ink-80:      rgba(10, 10, 11, .80);
  --ink-60:      rgba(10, 10, 11, .58);
  --ink-40:      rgba(10, 10, 11, .38);
  --paper:       #FFFFFF;
  --bone:        #F5F4F1;
  --bone-deep:   #EDECE8;
  --accent:      #4A3AFF;
  --accent-ink:  #3325E0;
  --accent-soft: rgba(74, 58, 255, .08);
  --line:        rgba(10, 10, 11, .13);
  --line-soft:   rgba(10, 10, 11, .07);

  /* Inverted (black sections) */
  --inv-bg:      #0A0A0B;
  --inv-fg:      #FFFFFF;
  --inv-fg-60:   rgba(255, 255, 255, .60);
  --inv-fg-40:   rgba(255, 255, 255, .38);
  --inv-line:    rgba(255, 255, 255, .16);
  --inv-line-soft: rgba(255, 255, 255, .08);

  /* Type */
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, 'Liberation Mono', monospace;

  /* Fluid scale — clamp(min, fluid, max) */
  --t-display: clamp(2.6rem, 1.3rem + 4.6vw, 5.35rem);
  --t-h1:      clamp(2.35rem, 1.3rem + 4.4vw, 4.75rem);
  --t-h2:      clamp(1.9rem,  1.25rem + 2.7vw, 3.4rem);
  --t-h3:      clamp(1.3rem,  1.05rem + 1.05vw, 1.85rem);
  --t-h4:      clamp(1.06rem, .98rem + .34vw, 1.25rem);
  --t-lead:    clamp(1.06rem, .99rem + .38vw, 1.3rem);
  --t-body:    1rem;
  --t-small:   .875rem;
  --t-micro:   .75rem;
  --t-metric:  clamp(2.9rem, 1.4rem + 6vw, 6rem);

  /* Space */
  --sp-1: .25rem;  --sp-2: .5rem;   --sp-3: .75rem;  --sp-4: 1rem;
  --sp-5: 1.5rem;  --sp-6: 2rem;    --sp-7: 3rem;    --sp-8: 4rem;
  --sp-9: 6rem;    --sp-10: 8rem;
  --section-y: clamp(4.5rem, 2.5rem + 7vw, 8.5rem);

  /* Structure */
  --container: 1320px;
  --gutter: clamp(1.25rem, .6rem + 2.6vw, 3.5rem);
  --nav-h: 72px;
  --radius: 2px;

  /* Motion */
  --ease: cubic-bezier(.22, 1, .36, 1);
  --ease-io: cubic-bezier(.65, .05, .36, 1);
  --dur: .5s;
}

/* ==========================================================================
   2 · RESET
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }

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

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--t-body);
  line-height: 1.6;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: 'ss01' 1, 'cv05' 1, 'tnum' 0;
  overflow-x: hidden;
}

img, svg, video { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
h1, h2, h3, h4, h5, h6, p, figure, blockquote { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
hr { border: 0; border-top: 1px solid var(--line); margin: 0; }

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

::selection { background: var(--accent); color: #fff; }

.skip-link {
  position: absolute; left: var(--sp-4); top: -60px; z-index: 999;
  background: var(--ink); color: #fff; padding: .7rem 1.1rem;
  font-size: var(--t-small); transition: top .2s var(--ease);
}
.skip-link:focus { top: var(--sp-4); }

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

/* ==========================================================================
   3 · TYPOGRAPHY
   ========================================================================== */
.display, .h1, .h2, .h3 { font-weight: 500; }

.display {
  font-size: var(--t-display);
  line-height: .94;
  letter-spacing: -.045em;
  font-weight: 500;
}
.h1 { font-size: var(--t-h1); line-height: 1.0;  letter-spacing: -.04em; }
.h2 { font-size: var(--t-h2); line-height: 1.06; letter-spacing: -.035em; }
.h3 { font-size: var(--t-h3); line-height: 1.2;  letter-spacing: -.025em; font-weight: 500; }
.h4 { font-size: var(--t-h4); line-height: 1.35; letter-spacing: -.015em; font-weight: 500; }

.lead {
  font-size: var(--t-lead);
  line-height: 1.5;
  letter-spacing: -.015em;
  color: var(--ink-60);
}

.body-lg { font-size: 1.0625rem; line-height: 1.65; color: var(--ink-80); }
.muted   { color: var(--ink-60); }
.small   { font-size: var(--t-small); line-height: 1.55; }

/* Mono label — eyebrows, indexes, tags */
.label {
  font-family: var(--font-mono);
  font-size: var(--t-micro);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-60);
  font-weight: 500;
}
.label--accent { color: var(--accent); }

.eyebrow {
  display: inline-flex; align-items: center; gap: .6rem;
  font-family: var(--font-mono);
  font-size: var(--t-micro);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-60);
}
.eyebrow::before {
  content: ''; width: 6px; height: 6px; flex: none;
  background: var(--accent);
  transform: rotate(45deg);
}

.accent { color: var(--accent); }

/* Accent underline used on hero keyword */
.mark {
  position: relative;
  display: inline-block;
  white-space: nowrap;
}
.mark::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: .135em;
  height: .075em;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
  animation: markIn 1s var(--ease) .55s forwards;
}
@keyframes markIn { to { transform: scaleX(1); } }

.measure    { max-width: 60ch; }
.measure-sm { max-width: 46ch; }
.measure-xs { max-width: 34ch; }

/* ==========================================================================
   4 · LAYOUT
   ========================================================================== */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.container--narrow { max-width: 940px; }

.section { padding-block: var(--section-y); position: relative; }
.section--tight { padding-block: clamp(3rem, 2rem + 4vw, 5rem); }
.section--bone  { background: var(--bone); }
.section--line  { border-top: 1px solid var(--line); }

/* Inverted (black) sections */
.section--ink {
  background: var(--inv-bg);
  color: var(--inv-fg);
}
.section--ink .lead,
.section--ink .muted,
.section--ink .label,
.section--ink .eyebrow { color: var(--inv-fg-60); }
.section--ink .body-lg { color: rgba(255,255,255,.78); }
.section--ink hr { border-color: var(--inv-line); }
.section--ink .rule { background: var(--inv-line); }

.grid { display: grid; gap: var(--sp-6); }
.grid--2 { grid-template-columns: repeat(2, 1fr); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--4 { grid-template-columns: repeat(4, 1fr); }

/* Two-column section header: sticky title left, content right */
.split {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(2rem, 1rem + 4vw, 5rem);
  align-items: start;
}
.split--even { grid-template-columns: repeat(2, minmax(0, 1fr)); }

.section-head { margin-bottom: clamp(2.5rem, 1.5rem + 3vw, 4.5rem); }
/* Section + page headers get a wider title column than a standard split */
.section-head.split,
.page-hero .split { grid-template-columns: minmax(0, 6.6fr) minmax(0, 5.4fr); }
.section-head .eyebrow { margin-bottom: var(--sp-5); }
.section-head .h2 { margin-bottom: var(--sp-5); }

.rule { height: 1px; background: var(--line); width: 100%; }

.stack > * + * { margin-top: var(--sp-4); }

/* Bulleted lists — a short accent dash instead of a disc */
.list-marks > li { position: relative; padding-left: 1.35rem; }
.list-marks > li::before {
  content: '';
  position: absolute; left: 0; top: .78em;
  width: 8px; height: 1px;
  background: var(--accent);
}
.section--ink .list-marks > li::before { background: var(--accent); }
.stack-lg > * + * { margin-top: var(--sp-6); }

/* ==========================================================================
   5 · COMPONENTS
   ========================================================================== */

/* --- Buttons ------------------------------------------------------------ */
.btn {
  --btn-bg: var(--ink);
  --btn-fg: #fff;
  --btn-bd: var(--ink);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .6rem;
  padding: .95rem 1.6rem;
  font-size: .9375rem;
  font-weight: 500;
  letter-spacing: -.01em;
  line-height: 1;
  color: var(--btn-fg);
  background: var(--btn-bg);
  border: 1px solid var(--btn-bd);
  border-radius: var(--radius);
  cursor: pointer;
  overflow: hidden;
  isolation: isolate;
  transition: color .35s var(--ease), border-color .35s var(--ease), background-color .35s var(--ease);
  white-space: nowrap;
}
/* micro-interaction: accent panel wipes up from the bottom */
.btn::after {
  content: '';
  position: absolute; inset: 0; z-index: -1;
  background: var(--accent);
  transform: translateY(101%);
  transition: transform .42s var(--ease);
}
.btn:hover::after, .btn:focus-visible::after { transform: translateY(0); }
.btn:hover, .btn:focus-visible { border-color: var(--accent); color: #fff; }
.btn:active { transform: translateY(1px); }

.btn .btn__arrow { transition: transform .42s var(--ease); flex: none; }
.btn:hover .btn__arrow { transform: translateX(4px); }

.btn--ghost { --btn-bg: transparent; --btn-fg: var(--ink); --btn-bd: var(--line); }
.btn--ghost:hover { color: #fff; }

.btn--accent { --btn-bg: var(--accent); --btn-fg: #fff; --btn-bd: var(--accent); }
.btn--accent::after { background: var(--ink); }
.btn--accent:hover { border-color: var(--ink); }

.btn--sm { padding: .68rem 1.1rem; font-size: .8125rem; }
.btn--lg { padding: 1.1rem 2rem; font-size: 1rem; }
.btn--block { width: 100%; }

/* On black — solid inverts to white, ghost stays a hairline outline.
   Order matters: the ghost override must come AFTER the generic rule. */
.on-ink .btn, .section--ink .btn, .footer .btn {
  --btn-bg: #fff; --btn-fg: var(--ink); --btn-bd: #fff;
}
.on-ink .btn--ghost, .section--ink .btn--ghost, .footer .btn--ghost {
  --btn-bg: transparent; --btn-fg: #fff; --btn-bd: var(--inv-line);
}
.on-ink .btn:hover, .section--ink .btn:hover, .footer .btn:hover { color: #fff; }

.btn-row {
  display: flex; flex-wrap: wrap; gap: var(--sp-3);
  align-items: center;
}

/* Text link with animated underline */
.link {
  display: inline-flex; align-items: center; gap: .45rem;
  font-weight: 500; font-size: .9375rem;
  padding-bottom: 2px;
  background-image: linear-gradient(currentColor, currentColor);
  background-size: 0% 1px;
  background-position: 0 100%;
  background-repeat: no-repeat;
  transition: background-size .4s var(--ease), color .25s var(--ease);
}
.link:hover { background-size: 100% 1px; color: var(--accent); }
.link svg { transition: transform .4s var(--ease); }
.link:hover svg { transform: translateX(3px); }

/* --- Navigation --------------------------------------------------------- */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  height: var(--nav-h);
  background: rgba(255, 255, 255, .82);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color .3s var(--ease), background-color .3s var(--ease), height .3s var(--ease);
}
.nav.is-stuck { border-bottom-color: var(--line); }
.nav__inner {
  height: 100%;
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--sp-5);
}
/*.nav__logo { display: flex; align-items: center; gap: .6rem; flex: none; }
.nav__logo svg { height: 26px; width: auto; }
 The SerenSynth mark. Taller than it is wide, so it is sized by height and
   carries currentColor — ink on white, white on the black sections. 
.brand-mark { height: 30px; width: auto; flex: none; }
.nav__logo-text {
  font-size: 1.0625rem; font-weight: 600; letter-spacing: -.035em;
}
 .nav__logo-text span { color: var(--accent); } */
.nav__logo {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .2rem;
  flex: none;
  padding-block: .25rem;
  text-align: center;
}
.nav__logo svg {
  height: 20px;
  width: auto;
  display: block;
  margin-inline: auto;
}
.nav__logo-text {
  display: block;
  font-size: .8125rem; font-weight: 600; letter-spacing: -.02em;
  line-height: 1.1;
}

.nav__links { display: flex; align-items: center; gap: clamp(1rem, .3rem + 1.5vw, 2.1rem); }
.nav__link {
  position: relative;
  font-size: .9rem;
  font-weight: 450;
  letter-spacing: -.01em;
  color: var(--ink-60);
  padding: .4rem 0;
  transition: color .25s var(--ease);
}
.nav__link::after {
  content: ''; position: absolute; left: 0; bottom: 0;
  width: 100%; height: 1px; background: var(--accent);
  transform: scaleX(0); transform-origin: right;
  transition: transform .4s var(--ease);
}
.nav__link:hover { color: var(--ink); }
.nav__link:hover::after { transform: scaleX(1); transform-origin: left; }
.nav__link.is-active { color: var(--ink); font-weight: 500; }
.nav__link.is-active::after { transform: scaleX(1); }

.nav__cta { flex: none; }

.nav__toggle {
  display: none;
  width: 44px; height: 44px;
  margin-right: -10px;
  background: none; border: 0; cursor: pointer;
  align-items: center; justify-content: center;
}
.nav__toggle span {
  position: relative;
  display: block; width: 22px; height: 1.5px; background: var(--ink);
  transition: background-color .2s var(--ease), transform .35s var(--ease);
}
.nav__toggle span::before, .nav__toggle span::after {
  content: ''; position: absolute; left: 0; width: 22px; height: 1.5px;
  background: var(--ink);
  transition: transform .35s var(--ease), top .2s var(--ease);
}
.nav__toggle span::before { top: -7px; }
.nav__toggle span::after  { top: 7px; }
.nav__toggle[aria-expanded="true"] span { background: transparent; }
.nav__toggle[aria-expanded="true"] span::before { top: 0; transform: rotate(45deg); }
.nav__toggle[aria-expanded="true"] span::after  { top: 0; transform: rotate(-45deg); }

/* Mobile drawer */
.nav__drawer {
  position: fixed; inset: var(--nav-h) 0 0 0; z-index: 99;
  background: var(--paper);
  padding: var(--sp-6) var(--gutter) var(--sp-8);
  display: flex; flex-direction: column;
  transform: translateY(-8px);
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .3s var(--ease), transform .35s var(--ease), visibility .3s;
  overflow-y: auto;
  overscroll-behavior: contain;
}
.nav__drawer.is-open { opacity: 1; visibility: visible; transform: none; pointer-events: auto; }
.nav__drawer-link {
  display: flex; align-items: baseline; gap: var(--sp-4);
  padding: var(--sp-4) 0;
  border-bottom: 1px solid var(--line-soft);
  font-size: 1.55rem; letter-spacing: -.035em; font-weight: 500;
}
.nav__drawer-link .label { flex: none; }
.nav__drawer-link.is-active { color: var(--accent); }
.nav__drawer-foot { margin-top: auto; padding-top: var(--sp-7); }
.nav__drawer-foot .btn { width: 100%; }
.nav__drawer-meta { margin-top: var(--sp-5); font-size: var(--t-small); color: var(--ink-60); }
.nav__drawer-meta a { display: block; }
body.nav-open { overflow: hidden; }

/* --- Cards -------------------------------------------------------------- */
.card {
  position: relative;
  display: flex; flex-direction: column;
  padding: clamp(1.5rem, 1rem + 1.4vw, 2.25rem);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  isolation: isolate;
  transition: border-color .4s var(--ease), transform .4s var(--ease), box-shadow .4s var(--ease);
  min-height: 100%;
}
/* Hover: accent hairline sweeps across the top + card lifts a hair */
.card::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: var(--accent);
  transform: scaleX(0); transform-origin: left;
  transition: transform .5s var(--ease);
}
.card:hover { border-color: var(--ink-40); transform: translateY(-3px); }
.card:hover::before { transform: scaleX(1); }

.card__index {
  font-family: var(--font-mono); font-size: var(--t-micro);
  letter-spacing: .1em; color: var(--ink-40);
  margin-bottom: var(--sp-6);
  transition: color .35s var(--ease);
}
.card:hover .card__index { color: var(--accent); }
.card__title { margin-bottom: var(--sp-3); }
.card__body { color: var(--ink-60); font-size: .9375rem; line-height: 1.6; }
.card__foot { margin-top: auto; padding-top: var(--sp-6); }

.card--ink {
  background: var(--inv-bg); color: var(--inv-fg); border-color: var(--inv-line);
}
.card--ink .card__body { color: var(--inv-fg-60); }
.card--ink .card__index { color: var(--inv-fg-40); }

/* Service grid — borders collapse into a single hairline grid */
.tile-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid var(--line);
  border-left: 1px solid var(--line);
}
.tile {
  position: relative;
  padding: clamp(1.6rem, 1rem + 1.7vw, 2.6rem);
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: var(--paper);
  transition: background-color .4s var(--ease);
  overflow: hidden;
}
.tile::before {
  content: '';
  position: absolute; inset: auto 0 0 0; height: 2px;
  background: var(--accent);
  transform: scaleX(0); transform-origin: left;
  transition: transform .55s var(--ease);
}
.tile:hover { background: var(--bone); }
.tile:hover::before { transform: scaleX(1); }
.tile__index {
  font-family: var(--font-mono); font-size: var(--t-micro);
  letter-spacing: .1em; color: var(--ink-40);
  display: block; margin-bottom: clamp(2rem, 1rem + 3vw, 3.5rem);
  transition: color .4s var(--ease);
}
.tile:hover .tile__index { color: var(--accent); }
.tile__title { margin-bottom: var(--sp-3); }
.tile__body { color: var(--ink-60); font-size: .9375rem; max-width: 34ch; }

.section--ink .tile-grid { border-color: var(--inv-line); }
.section--ink .tile {
  background: transparent; border-color: var(--inv-line);
}
.section--ink .tile:hover { background: rgba(255,255,255,.035); }
.section--ink .tile__body { color: var(--inv-fg-60); }
.section--ink .tile__index { color: var(--inv-fg-40); }

/* --- Metrics ------------------------------------------------------------ */
.metrics {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
}
.metric {
  padding: clamp(1.5rem, 1rem + 2vw, 3rem) clamp(1rem, .5rem + 1.5vw, 2.5rem);
  border-left: 1px solid var(--line);
}
.metric:first-child { border-left: 0; padding-left: 0; }
.section--ink .metric { border-color: var(--inv-line); }

.metric__value {
  font-size: var(--t-metric);
  line-height: .88;
  letter-spacing: -.055em;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  display: flex; align-items: baseline;
}
.metric__value .metric__suffix { color: var(--accent); }
.metric__label {
  margin-top: var(--sp-4);
  font-size: .9375rem;
  color: var(--ink-60);
  letter-spacing: -.01em;
  max-width: 22ch;
}
.section--ink .metric__label { color: var(--inv-fg-60); }

/* --- Credential strip --------------------------------------------------- */
.creds {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: var(--sp-3) var(--sp-5);
}
.cred {
  display: inline-flex; align-items: center; gap: .5rem;
  font-family: var(--font-mono);
  font-size: var(--t-micro);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink-60);
  padding: .45rem .8rem;
  border: 1px solid var(--line);
  border-radius: 100px;
}
.cred::before {
  content: ''; width: 5px; height: 5px; background: var(--accent);
  border-radius: 50%; flex: none;
}
.section--ink .cred,
/*.footer .cred { border-color: var(--inv-line); color: var(--inv-fg-60); }*/
.footer .cred { border-color: var(--inv-line); color: var(--inv-fg-60); }
.footer .creds { justify-content: center; }

/* --- Steps (How we work) ------------------------------------------------ */
.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; }
.step {
  position: relative;
  padding: var(--sp-6) var(--sp-5) var(--sp-6) 0;
  border-top: 1px solid var(--inv-line);
}
.step::after {
  content: ''; position: absolute; top: -1px; left: 0; height: 1px;
  width: 0; background: var(--accent);
  transition: width .8s var(--ease);
}
.step.is-visible::after { width: 100%; }
.step:nth-child(2)::after { transition-delay: .12s; }
.step:nth-child(3)::after { transition-delay: .24s; }
.step:nth-child(4)::after { transition-delay: .36s; }
.step__index {
  font-family: var(--font-mono); font-size: var(--t-micro);
  letter-spacing: .1em; color: var(--accent); display: block;
  margin-bottom: var(--sp-5);
}
.step__title { margin-bottom: var(--sp-3); }
.step__body { color: var(--inv-fg-60); font-size: .9375rem; max-width: 26ch; }

/* --- Marquee (logo wall) ------------------------------------------------ */
/*.marquee {
  position: relative;
  overflow: hidden;
  padding-block: clamp(1.5rem, 1rem + 1.5vw, 2.5rem);
  border-block: 1px solid var(--line);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}*/
.marquee {
  position: relative;
  overflow: hidden;
  padding-block: clamp(1rem, .5rem + 1.5vw, 2rem);
  border-block: 1px solid var(--line);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}

.marquee__track {
  display: flex;
  width: max-content;
  animation: marquee 38s linear infinite;
}
.marquee:hover .marquee__track { animation-play-state: paused; }

/* On touch there is no hover to pause with, and an auto-scrolling strip you
   cannot control is annoying. So on touch it stops animating and becomes a
   proper swipeable rail with momentum and snapping. */
@media (hover: none) {
  .marquee {
    overflow-x: auto;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
  }
  .marquee::-webkit-scrollbar { display: none; }
  .marquee__track { animation: none; }
  .marquee__group:nth-child(2) { display: none; }
  .marquee__group {
    gap: clamp(2rem, 1rem + 6vw, 3.5rem);
    padding-inline: var(--gutter);
  }
  .marquee__item { scroll-snap-align: center; }
}
/*.marquee__group {
  display: flex; align-items: center;
  gap: clamp(3rem, 2rem + 4vw, 7rem);
  padding-right: clamp(3rem, 2rem + 4vw, 7rem);
  flex: none;
}*/
.marquee__group {
  display: flex; align-items: center;
  gap: clamp(1.5rem, 1rem + 2vw, 3rem);
  padding-right: clamp(1.5rem, 1rem + 2vw, 3rem);
  flex: none;
}
.marquee__item {
  flex: none;
  display: flex; align-items: center; justify-content: center;
  height: 72px;
  opacity: .85;
  transition: opacity .35s var(--ease);
}
.marquee__item:hover { opacity: 1; }
/*.marquee__item {
  flex: none;
  display: flex; align-items: center; justify-content: center;
  height: 46px;
  opacity: .55;
  filter: grayscale(1);
  transition: opacity .35s var(--ease), filter .35s var(--ease);
}
.marquee__item:hover { opacity: 1; filter: none; }*/
.marquee__item svg, .marquee__item img { height: 100%; width: auto; }
@keyframes marquee { to { transform: translateX(-50%); } }

/* --- Case study rows ---------------------------------------------------- */
.case-list { border-top: 1px solid var(--line); }
.case-row {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr) minmax(0, 1.6fr) auto;
  gap: var(--sp-6);
  align-items: center;
  padding: clamp(1.5rem, 1rem + 1.6vw, 2.4rem) 0;
  border-bottom: 1px solid var(--line);
  position: relative;
  transition: padding-inline .45s var(--ease);
}
.case-row::before {
  content: '';
  position: absolute; inset: 0 -1.5rem;
  background: var(--bone);
  opacity: 0; z-index: -1;
  transition: opacity .4s var(--ease);
}
.case-row:hover::before { opacity: 1; }
.case-row:hover { padding-inline: 1.5rem; }
.case-row__logo { display: flex; align-items: center; height: 40px; }
.case-row__logo svg { height: 100%; width: auto; max-width: 120px; }
.case-row__title { letter-spacing: -.03em; }
.case-row__meta { color: var(--ink-60); font-size: .9375rem; }
.case-row__platforms {
  display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .65rem;
}
.pill {
  font-family: var(--font-mono);
  font-size: .6875rem; letter-spacing: .06em; text-transform: uppercase;
  padding: .3rem .6rem;
  border: 1px solid var(--line);
  border-radius: 100px;
  color: var(--ink-60);
  white-space: nowrap;
}
.case-row__go {
  width: 44px; height: 44px; flex: none;
  border: 1px solid var(--line); border-radius: 50%;
  display: grid; place-items: center;
  transition: background-color .35s var(--ease), color .35s var(--ease), border-color .35s var(--ease), transform .35s var(--ease);
}
.case-row:hover .case-row__go {
  background: var(--accent); border-color: var(--accent); color: #fff;
  transform: rotate(-45deg);
}

/* --- Case study detail -------------------------------------------------- */
.cs-block { border-top: 1px solid var(--line); padding-block: clamp(1.75rem, 1.2rem + 1.6vw, 2.75rem); }
.cs-block:last-child { border-bottom: 1px solid var(--line); }
.cs-block__grid {
  display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
  gap: clamp(1.25rem, .5rem + 3vw, 4rem);
}
.cs-block__label { font-family: var(--font-mono); font-size: var(--t-micro); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-40); }

.placeholder-note {
  display: flex; gap: .75rem;
  padding: 1rem 1.15rem;
  border: 1px dashed var(--accent);
  background: var(--accent-soft);
  border-radius: var(--radius);
  font-size: .875rem;
  color: var(--accent-ink);
  line-height: 1.5;
}
.placeholder-note strong { font-weight: 600; }
.placeholder-note code {
  font-family: var(--font-mono); font-size: .8em;
  background: rgba(74,58,255,.1); padding: .1em .35em; border-radius: 2px;
}

/* --- Accordion / list rows (platforms, faq, careers) -------------------- */
.rowlist { border-top: 1px solid var(--line); }
.rowlist__item {
  display: grid;
  grid-template-columns: 200px minmax(0, 1fr);
  gap: var(--sp-6);
  padding: clamp(1.35rem, 1rem + 1.2vw, 2rem) 0;
  border-bottom: 1px solid var(--line);
  align-items: baseline;
}
.section--ink .rowlist, .section--ink .rowlist__item { border-color: var(--inv-line); }

/* rowlist column variants — classes, not inline styles, so the mobile
   breakpoint below can actually override them. */
.rowlist__item--num   { grid-template-columns: 120px minmax(0, 1fr); }
.rowlist__item--label { grid-template-columns: 150px minmax(0, 1fr); }
.rowlist__item--plain { grid-template-columns: minmax(0, 1fr); }
.rowlist__item--step  { grid-template-columns: 36px minmax(0, 1fr); padding-block: var(--sp-4); }
.rowlist--flush { border-top: 0; }
.rowlist--flush > .rowlist__item:first-child { border-top: 1px solid var(--line); }
.section--ink .rowlist--flush > .rowlist__item:first-child { border-top-color: var(--inv-line); }

/* --- Timeline ----------------------------------------------------------- */
.timeline { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; }
.tl-item {
  position: relative;
  padding: var(--sp-6) var(--sp-5) 0 0;
  border-top: 1px solid var(--line);
}
.tl-item::before {
  content: ''; position: absolute; top: -4px; left: 0;
  width: 7px; height: 7px; background: var(--accent);
  transform: rotate(45deg);
}
.tl-item__year {
  font-family: var(--font-mono); font-size: var(--t-small);
  letter-spacing: .06em; color: var(--accent); margin-bottom: var(--sp-3);
}
.tl-item__body { font-size: .9375rem; color: var(--ink-60); max-width: 24ch; }

/* --- Forms -------------------------------------------------------------- */
.form { display: grid; gap: var(--sp-5); }
.form__row { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--sp-5); }
.field { display: grid; gap: .5rem; position: relative; }
.field label {
  font-family: var(--font-mono);
  font-size: var(--t-micro);
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink-60);
}
.field label .req { color: var(--accent); }
.field input, .field select, .field textarea {
  width: 100%;
  padding: .95rem 1rem;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  font-size: 1rem;
  letter-spacing: -.01em;
  transition: border-color .25s var(--ease), box-shadow .25s var(--ease);
  -webkit-appearance: none; appearance: none;
}
.field textarea { resize: vertical; min-height: 130px; }
.field select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%230A0A0B' stroke-width='1.3' fill='none'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  padding-right: 2.5rem;
  cursor: pointer;
}
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.field input::placeholder, .field textarea::placeholder { color: var(--ink-40); }

.field.has-error input, .field.has-error select, .field.has-error textarea {
  border-color: #D92D20;
  box-shadow: 0 0 0 3px rgba(217,45,32,.07);
}
.field__error {
  font-size: .8125rem; color: #D92D20; display: none;
}
.field.has-error .field__error { display: block; }

/* Multi-choice pill group (Current platforms) */
.choices {
  display: flex; flex-wrap: wrap; gap: .5rem;
  border: 0; padding: 0; margin: 0;
}
.choices legend {
  font-family: var(--font-mono); font-size: var(--t-micro);
  letter-spacing: .1em; text-transform: uppercase; color: var(--ink-60);
  padding: 0; margin-bottom: .75rem; float: left; width: 100%;
}
.choice { position: relative; }
.choice input {
  position: absolute; opacity: 0; width: 1px; height: 1px;
}
.choice span {
  display: inline-flex; align-items: center; gap: .45rem;
  padding: .6rem 1rem;
  font-size: .9375rem; letter-spacing: -.01em;
  border: 1px solid var(--line);
  border-radius: 100px;
  cursor: pointer;
  user-select: none;
  transition: border-color .25s var(--ease), background-color .25s var(--ease), color .25s var(--ease);
}
.choice span::before {
  content: ''; width: 6px; height: 6px; flex: none;
  border-radius: 50%;
  background: var(--line);
  transition: background-color .25s var(--ease);
}
.choice:hover span { border-color: var(--ink-40); }
.choice input:checked + span {
  border-color: var(--accent);
  background: var(--accent-soft);
  color: var(--accent-ink);
}
.choice input:checked + span::before { background: var(--accent); }
.choice input:focus-visible + span {
  outline: 2px solid var(--accent); outline-offset: 3px;
}

/* Honeypot — must never be visible or focusable by humans */
.hp-field {
  position: absolute !important;
  left: -9999px; top: 0;
  width: 1px; height: 1px; overflow: hidden;
  opacity: 0; pointer-events: none;
}

.form__consent { display: flex; gap: .75rem; align-items: flex-start; }
.form__consent input[type="checkbox"] {
  width: 18px; height: 18px; margin-top: 2px; flex: none;
  accent-color: var(--accent); cursor: pointer;
}
.form__consent label {
  font-family: var(--font-sans); font-size: .875rem;
  text-transform: none; letter-spacing: normal; color: var(--ink-60);
  line-height: 1.5; cursor: pointer;
}

.form__status {
  padding: 1rem 1.15rem; border-radius: var(--radius);
  font-size: .9375rem; display: none;
}
.form__status.is-error {
  display: block; background: rgba(217,45,32,.06);
  border: 1px solid rgba(217,45,32,.25); color: #B42318;
}
.form__status.is-success {
  display: block; background: var(--accent-soft);
  border: 1px solid rgba(74,58,255,.3); color: var(--accent-ink);
}

.btn[aria-busy="true"] { opacity: .65; pointer-events: none; }

/* --- Contact aside ------------------------------------------------------ */
.contact-item { padding-block: var(--sp-5); border-bottom: 1px solid var(--line); }
.contact-item:first-child { border-top: 1px solid var(--line); }
.contact-item__label {
  font-family: var(--font-mono); font-size: var(--t-micro);
  letter-spacing: .1em; text-transform: uppercase; color: var(--ink-40);
  margin-bottom: .5rem;
}
.contact-item__value { font-size: 1.0625rem; letter-spacing: -.02em; }
.contact-item__value a { transition: color .25s var(--ease); }
.contact-item__value a:hover { color: var(--accent); }

/* --- CTA band ----------------------------------------------------------- */
.cta-band { position: relative; overflow: hidden; }
.cta-band__glow {
  position: absolute;
  width: 720px; height: 720px;
  right: -180px; top: 50%;
  transform: translateY(-50%);
  background: radial-gradient(circle, rgba(74,58,255,.30) 0%, rgba(74,58,255,0) 68%);
  pointer-events: none;
  filter: blur(6px);
}

/* --- Footer ------------------------------------------------------------- */
.footer {
  background: var(--inv-bg); color: var(--inv-fg);
  padding-top: clamp(3.5rem, 2rem + 4vw, 5.5rem);
  padding-bottom: var(--sp-6);
}
.footer__top {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) repeat(3, minmax(0, 1fr));
  gap: var(--sp-7) var(--sp-6);
  padding-bottom: clamp(2.5rem, 1.5rem + 3vw, 4rem);
  border-bottom: 1px solid var(--inv-line);
}
/* .footer__brand-mark { display: flex; align-items: center; gap: .6rem; margin-bottom: var(--sp-4); }
.footer__brand-mark svg { height: 26px; width: auto; } */
.footer__brand-mark {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .7rem;
  margin-bottom: var(--sp-4);
}
.footer__brand-mark svg { height: 34px; width: auto; }
.footer__brand-name { font-size: 1.0625rem; font-weight: 600; letter-spacing: -.035em; }
.footer__brand-name span { color: var(--accent); }
/*.footer__desc { color: var(--inv-fg-60); font-size: .9375rem; max-width: 30ch; }*/
.footer__desc { color: var(--inv-fg-60); font-size: .9375rem; max-width: 30ch; margin-inline: auto; text-align: center; }
.footer__col-title {
  font-family: var(--font-mono); font-size: var(--t-micro);
  letter-spacing: .1em; text-transform: uppercase; color: var(--inv-fg-40);
  margin-bottom: var(--sp-5);
}
.footer__list li + li { margin-top: .7rem; }
.footer__list a {
  font-size: .9375rem; color: var(--inv-fg-60);
  transition: color .25s var(--ease);
  display: inline-block;
}
.footer__list a:hover { color: #fff; }
.footer__bottom {
  display: flex; flex-wrap: wrap; gap: var(--sp-3) var(--sp-6);
  align-items: center; justify-content: space-between;
  padding-top: var(--sp-6);
}
.footer__legal {
  display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-5);
  font-size: var(--t-small); color: var(--inv-fg-40);
}
.footer__legal a:hover { color: #fff; }

/* --- Page hero (inner pages) -------------------------------------------- */
.page-hero {
  padding-top: calc(var(--nav-h) + clamp(3.5rem, 2rem + 5vw, 7rem));
  padding-bottom: clamp(3rem, 2rem + 4vw, 5.5rem);
}
.breadcrumb {
  display: flex; gap: .5rem; align-items: center;
  font-family: var(--font-mono); font-size: var(--t-micro);
  letter-spacing: .08em; text-transform: uppercase;
  color: var(--ink-40);
  margin-bottom: var(--sp-6);
}
.breadcrumb a:hover { color: var(--accent); }
.section--ink .breadcrumb { color: var(--inv-fg-40); }
/* ==========================================================================
   6 · HERO + THE QUICK COMMERCE VISUAL SYSTEM
   --------------------------------------------------------------------------
   One motif, reused across the site:
     .qc-s          the SerenSynth S — the mark, and three shelves
     .qc-core       darkstore hexagon with the S as its operating engine
     .qc-ring       delivery radius
     .qc-society    apartment cluster = hyperlocal demand
     .qc-route      darkstore → society, with a signal running along it
   Every animation below moves only transform / opacity / stroke-dashoffset.
   ========================================================================== */

.hero {
  position: relative;
  padding-top: calc(var(--nav-h) + clamp(2.5rem, 1rem + 5vw, 5.5rem));
  padding-bottom: clamp(3rem, 2rem + 4vw, 6rem);
  overflow: hidden;
}
.hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.06fr) minmax(0, .94fr);
  gap: clamp(2rem, 1rem + 3vw, 3.5rem);
  align-items: center;
}
.hero__visual { position: relative; }
.hero__eyebrow { margin-bottom: clamp(1.25rem, 1rem + 1vw, 2rem); }
.hero__title { margin-bottom: var(--sp-5); }
.hero__sub { margin-bottom: clamp(1.75rem, 1.2rem + 1.5vw, 2.75rem); max-width: 34ch; }
.hero__scroll {
  display: inline-flex; align-items: center; gap: .6rem;
  margin-top: clamp(2rem, 1.2rem + 2.5vw, 4rem);
  font-family: var(--font-mono); font-size: var(--t-micro);
  letter-spacing: .1em; text-transform: uppercase; color: var(--ink-40);
}
.hero__scroll svg { animation: nudge 2.4s var(--ease-io) infinite; }
@keyframes nudge {
  0%, 100% { transform: translateY(0); opacity: .5; }
  50%      { transform: translateY(4px); opacity: 1; }
}

/* Faint coverage grid behind the hero */
.hero__bg {
  position: absolute; inset: 0; z-index: -1;
  background-image:
    linear-gradient(to right, var(--line-soft) 1px, transparent 1px),
    linear-gradient(to bottom, var(--line-soft) 1px, transparent 1px);
  background-size: 88px 88px;
  -webkit-mask-image: radial-gradient(ellipse 90% 70% at 68% 45%, #000 10%, transparent 75%);
  mask-image: radial-gradient(ellipse 90% 70% at 68% 45%, #000 10%, transparent 75%);
  pointer-events: none;
}

/* --------------------------------------------------------------------------
   6.1 · THE HEADLINE S
   The letter S in "Shelf" set in the SerenSynth mark's own geometry. The
   real character stays in the DOM for screen readers and for copy-paste.
   -------------------------------------------------------------------------- */
.shelf { position: relative; display: inline-block; white-space: nowrap; }

/* The real letter S — never a substitute glyph, so the word stays perfectly
   readable, selectable and searchable. A second copy of the same letter sits
   on top, clipped to a horizontal band across the waist and filled with the
   accent: the lit shelf from the SerenSynth mark, applied to a letterform. */
.shelf-s { position: relative; display: inline-block; }
.shelf-s__band {
  position: absolute;
  left: 0; top: 0;
  color: var(--accent);
  pointer-events: none;
  /* The band is measured from the letter's own waist, not from the line box.
     Percentages alone drift, because the line box is taller than the cap and
     the leading sits unevenly around it — so the vertical extent is expressed
     in em, which tracks the glyph at every size the headline clamps to. */
  -webkit-clip-path: inset(calc(50% - .09em) 100% calc(50% - .06em) 0);
  clip-path: inset(calc(50% - .09em) 100% calc(50% - .06em) 0);
  animation: shelfBand .9s var(--ease) .5s forwards;
}
@keyframes shelfBand {
  to {
    -webkit-clip-path: inset(calc(50% - .09em) 0 calc(50% - .06em) 0);
    clip-path: inset(calc(50% - .09em) 0 calc(50% - .06em) 0);
  }
}
@keyframes sDraw { to { stroke-dashoffset: 0; } }


/* --------------------------------------------------------------------------
   6.2 · SHARED PRIMITIVES — used by every diagram
   -------------------------------------------------------------------------- */
.qc-viz { width: 100%; }
.qc-eco { width: 100%; height: auto; overflow: visible; }
/* Mobile / reduced-motion simplification hook */
.qc-outer { transition: opacity .3s; }

/* The darkstore — the operational heart at the centre of every network */
.qc-ds__ground  { stroke: var(--ink-40); stroke-width: 2; fill: none; }
.qc-ds__shell   { fill: var(--paper); stroke: var(--ink); stroke-width: 2.4; stroke-linejoin: round; }
.qc-ds__ridge   { stroke: var(--accent); stroke-width: 3.4; fill: none; }
.qc-ds__rack    { stroke: var(--ink-40); stroke-width: 2.2; fill: none; }
.qc-ds__rack--lit {
  stroke: var(--accent);
  animation: rackLit 4.4s var(--ease-io) infinite;
}
@keyframes rackLit { 0%, 100% { opacity: .45; } 45% { opacity: 1; } }
.qc-ds__upright { stroke: var(--line); stroke-width: 1.6; fill: none; }
.qc-ds__dock    { fill: var(--ink); opacity: .2; }
.qc-ds__dock-lip{ stroke: var(--ink-40); stroke-width: 2; fill: none; }
.qc-ds__fascia  { stroke: var(--line); stroke-width: 2; fill: none; }
.qc-ds__dock--live {
  fill: var(--accent);
  animation: dockLive 3.6s var(--ease-io) infinite;
}
@keyframes dockLive { 0%, 100% { opacity: .22; } 40%, 55% { opacity: .62; } }
.qc-ds__beacon  { fill: var(--accent); animation: beacon 2.6s var(--ease-io) infinite; }
@keyframes beacon { 0%, 100% { opacity: .35; } 50% { opacity: 1; } }
.qc-ds__beacon-halo {
  fill: none; stroke: var(--accent); stroke-width: 1.4;
  transform-box: fill-box; transform-origin: center;
  opacity: 0;
  animation: beaconPing 2.6s var(--ease-io) infinite;
}
@keyframes beaconPing {
  0%   { transform: scale(.5); opacity: .7; }
  70%  { opacity: .05; }
  100% { transform: scale(2.6); opacity: 0; }
}

/* Inside a black section the structure inverts */
.section--ink .qc-ds__shell  { fill: var(--inv-bg); stroke: rgba(255,255,255,.8); }
.section--ink .qc-ds__ground { stroke: var(--inv-line); }
.section--ink .qc-ds__rack   { stroke: rgba(255,255,255,.5); }
.section--ink .qc-ds__upright{ stroke: var(--inv-line); }
.section--ink .qc-ds__dock   { fill: #fff; opacity: .22; }
.section--ink .qc-ds__dock-lip { stroke: var(--inv-line); }
.section--ink .qc-ds__fascia { stroke: var(--inv-line); }

/* The compact instance used inside the ecosystem flow diagram */
.qc-ds--mini .qc-ds__ground,
.qc-ds--mini .qc-ds__fascia,
.qc-ds--mini .qc-ds__dock-lip,
.qc-ds--mini .qc-ds__beacon-halo { display: none; }
.qc-ds--mini .qc-ds__shell   { stroke-width: 5; }
.qc-ds--mini .qc-ds__rack    { stroke-width: 5; }
.qc-ds--mini .qc-ds__ridge   { stroke-width: 6; }

/* Society clusters */
.qc-society { color: var(--ink); }
.qc-ground { stroke: var(--line); stroke-width: 1.2; }
.qc-bldg {
  fill: var(--paper);
  stroke: var(--ink);
  stroke-width: 1.15;
  vector-effect: non-scaling-stroke;
}
.qc-win { fill: var(--ink-40); }
.qc-win--on {
  fill: var(--accent);
  animation: winBlink 5.5s var(--ease-io) infinite;
}
@keyframes winBlink {
  0%, 42%, 100% { opacity: .18; }
  50%, 62%      { opacity: 1; }
  70%           { opacity: .55; }
}
.section--ink .qc-bldg { fill: var(--inv-bg); stroke: rgba(255,255,255,.55); }
.section--ink .qc-ground { stroke: var(--inv-line); }
.section--ink .qc-win { fill: rgba(255,255,255,.3); }

/* Satellite darkstores */
.qc-node__hex {
  fill: var(--paper);
  stroke: var(--ink);
  stroke-width: 1.2;
  vector-effect: non-scaling-stroke;
}
.qc-node__dot { fill: var(--accent); opacity: .75; }
.qc-node { animation: nodeBreathe 4.6s var(--ease-io) infinite; }
@keyframes nodeBreathe {
  0%, 100% { opacity: .55; }
  48%      { opacity: 1; }
}

/* Delivery radius */
.qc-ring {
  fill: none;
  stroke: rgba(10, 10, 11, .16);
  stroke-width: 1;
  transform-origin: 320px 320px;
}
.qc-ring--dashed {
  stroke-dasharray: 3 10;
  stroke: rgba(10, 10, 11, .26);
  animation: ringSpin 120s linear infinite;
}
@keyframes ringSpin { to { transform: rotate(360deg); } }

/* Hexagonal coverage pushing outward from the darkstore */
.qc-pulse {
  fill: none;
  stroke: var(--accent);
  stroke-width: 1.2;
  transform-origin: 320px 320px;
  opacity: 0;
  animation: coverageOut 6s var(--ease-io) infinite;
}
.qc-pulse:nth-of-type(2) { animation-delay: 2s; }
.qc-pulse:nth-of-type(3) { animation-delay: 4s; }
@keyframes coverageOut {
  0%   { transform: scale(.3);  opacity: .5; }
  65%  { opacity: .07; }
  100% { transform: scale(1.02); opacity: 0; }
}

/* Routes and the delivery signals travelling them */
.qc-route  { fill: none; stroke: rgba(10, 10, 11, .18); stroke-width: 1; }
.qc-signal {
  fill: none;
  stroke: var(--accent);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-dasharray: 13 300;
  animation: signalRun 3.2s linear infinite;
  opacity: 0;
}
@keyframes signalRun {
  0%   { stroke-dashoffset: 411; opacity: 0; }
  10%  { opacity: 1; }
  85%  { opacity: 1; }
  100% { stroke-dashoffset: 0; opacity: 0; }
}

/* Core darkstore */
.qc-core__bloom {
  fill: var(--accent);
  opacity: .05;
  animation: bloom 5s var(--ease-io) infinite;
}
@keyframes bloom { 0%, 100% { opacity: .04; } 50% { opacity: .12; } }
.qc-core__hex   { fill: var(--paper); stroke: var(--ink); stroke-width: 1.6; }
.qc-core__inner { fill: none; stroke: var(--accent); stroke-width: 1; opacity: .35; }
.qc-core__bay   { stroke: var(--ink-40); stroke-width: 2.4; stroke-linecap: round; }

/* Soft accent bloom behind the whole visual */
.hero__visual::before {
  content: '';
  position: absolute;
  left: 50%; top: 50%;
  width: 66%; aspect-ratio: 1;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(74, 58, 255, .14) 0%, rgba(74, 58, 255, 0) 68%);
  pointer-events: none;
  z-index: -1;
}


/* --------------------------------------------------------------------------
   6.2b · LIVING DARKSTORE — riders, outbound stock, operating light, depth
   Everything here is transform / opacity only, gated behind @supports where
   the property is not universal, and switched off by .perf-lite and by
   prefers-reduced-motion further down.
   -------------------------------------------------------------------------- */

/* A delivery pack running the route out to a society.
   offset-path is not in older Safari — without it the rider simply never
   appears, which is why it starts at opacity 0. */
.qc-rider { opacity: 0; }
.qc-rider__pack  { fill: var(--paper); stroke: var(--ink); stroke-width: 1.2; }
.qc-rider__strap { stroke: var(--accent); stroke-width: 1.6; }

@supports (offset-path: path('M0 0 L1 1')) {
  .qc-rider {
    offset-rotate: 0deg;              /* the pack stays upright as it travels */
    offset-distance: 0%;
    animation: riderRun 3.2s var(--ease-io) infinite;
  }
  @keyframes riderRun {
    0%        { offset-distance: 0%;   opacity: 0; }
    12%       { opacity: 1; }
    78%       { opacity: 1; }
    100%      { offset-distance: 100%; opacity: 0; }
  }
}

/* Stock leaving the dock — a pack rises out of the loading bay and fades */
.qc-pack {
  fill: var(--accent);
  opacity: 0;
  animation: packOut 4.5s var(--ease-io) infinite;
}
@keyframes packOut {
  0%   { transform: translateY(0)     scale(.6); opacity: 0; }
  20%  { opacity: .9; }
  100% { transform: translateY(-46px) scale(1);  opacity: 0; }
}

/* The operating light: a soft sheen drifting across the darkstore shell */
.qc-core__light {
  fill: url(#qc-light-grad);
  opacity: .5;
  animation: coreLight 9s var(--ease-io) infinite;
  transform-box: fill-box;
  transform-origin: center;
}
@keyframes coreLight {
  0%, 100% { transform: translateX(-38%); opacity: .2; }
  50%      { transform: translateX(38%);  opacity: .6; }
}

/* Cursor parallax. JS writes --px / --py (range roughly -1 .. 1) and each
   layer multiplies by its own depth, so the network gains real depth without
   a 3D engine. Pointer devices only — never on touch. */
.qc-eco [data-depth] {
  transition: transform .5s cubic-bezier(.2, .8, .3, 1);
  will-change: transform;
}
@media (hover: hover) and (pointer: fine) {
  .hero__visual.has-parallax .qc-eco [data-depth] {
    transform: translate3d(
      calc(var(--px, 0) * var(--depth, 0) * 1px),
      calc(var(--py, 0) * var(--depth, 0) * 1px),
      0);
    transition: transform .35s cubic-bezier(.2, .8, .3, 1);
  }
}

/* --------------------------------------------------------------------------
   6.2c · DEPTH ON SURFACES
   A restrained 3D lift on the cards and case rows the visitor actually
   points at. Perspective lives on the parent so the tilt is real, not faked.
   -------------------------------------------------------------------------- */
@media (hover: hover) and (pointer: fine) {
  .tile-grid, .grid, .case-list { perspective: 1200px; }

  .card, .tile, .case-row {
    transform-style: preserve-3d;
    transition: transform .45s var(--ease), border-color .4s var(--ease), background-color .4s var(--ease);
  }
  .card:hover  { transform: translate3d(0, -4px, 14px); }
  .tile:hover  { transform: translate3d(0, -2px, 10px); }
  .case-row:hover { transform: translate3d(0, 0, 12px); }
}

/* --------------------------------------------------------------------------
   6.2d · OFF-SCREEN + LOW-POWER
   main.js adds .is-paused to any animated block scrolled out of view, and
   .perf-lite to <html> on low-capability devices. Both are cheap, global
   off-switches — no per-element bookkeeping.
   -------------------------------------------------------------------------- */
.is-paused, .is-paused * { animation-play-state: paused !important; }

/* Easter egg feedback: the darkstore brightens as it is tapped. It leads to
   /play, which is also reachable directly — this is decoration, not a route. */
.qc-core { transition: filter .3s var(--ease); }
.qc-core.is-charging { filter: drop-shadow(0 0 10px rgba(74, 58, 255, .55)); }

.perf-lite .qc-rider,
.perf-lite .qc-pack,
.perf-lite .qc-core__light,
.perf-lite .qc-signal,
.perf-lite .qc-cell-hex,
.perf-lite .qc-flow__pulse,
.perf-lite .qc-os__pulse,
.perf-lite .statement__hex { display: none; }
.perf-lite .qc-pulse:nth-of-type(2),
.perf-lite .qc-pulse:nth-of-type(3) { display: none; }
.perf-lite .statement__bg,
.perf-lite .qc-ring--dashed { animation: none; }
.perf-lite .qc-society,
.perf-lite .qc-node,
.perf-lite .qc-win--on { animation: none; opacity: 1; }

/* --------------------------------------------------------------------------
   6.3 · STATEMENT SECTION — "Quick Commerce is all we do."
   Deliberately quiet: one sentence, one drifting field behind it.
   -------------------------------------------------------------------------- */
.statement {
  position: relative;
  overflow: hidden;
  text-align: center;
  padding-block: clamp(5rem, 3rem + 9vw, 11rem);
}
.statement__bg {
  position: absolute; inset: -20% -10%;
  z-index: 0;
  background-image: radial-gradient(circle at center, rgba(255,255,255,.22) 1.2px, transparent 1.2px);
  background-size: 46px 46px;
  -webkit-mask-image: radial-gradient(ellipse 62% 68% at 50% 50%, #000 5%, transparent 72%);
  mask-image: radial-gradient(ellipse 62% 68% at 50% 50%, #000 5%, transparent 72%);
  animation: drift 44s linear infinite;
  pointer-events: none;
}
@keyframes drift { to { transform: translate(46px, 46px); } }
.statement__inner { position: relative; z-index: 1; }

/* Location pins waking across the field — the same idea as the hero, at a
   whisper. Purely atmospheric, so they are the first thing perf-lite drops. */
.statement__pins { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.statement__pin {
  position: absolute;
  width: 15px; height: 21px;
  opacity: 0;
  transform-origin: bottom center;
  animation: pinDrop 7s var(--ease-io) infinite;
}
.statement__pin path { fill: var(--accent); }
@keyframes pinDrop {
  0%, 8%   { opacity: 0; transform: translateY(-6px) scale(.6); }
  16%, 34% { opacity: .85; transform: translateY(0) scale(1); }
  48%, 100%{ opacity: 0; transform: translateY(0) scale(1); }
}
.perf-lite .statement__pins { display: none; }
.statement__hex {
  position: absolute;
  left: 50%; top: 50%;
  width: min(620px, 82%); aspect-ratio: 1;
  transform: translate(-50%, -50%);
  z-index: 0;
  pointer-events: none;
}
.statement__hex path {
  fill: none;
  stroke: rgba(255, 255, 255, .3);
  stroke-width: 1;
  transform-origin: center;
  animation: coverageOut 9s var(--ease-io) infinite;
  opacity: 0;
}
.statement__hex path:nth-child(2) { animation-delay: 3s; }
.statement__hex path:nth-child(3) { animation-delay: 6s; }

/* --------------------------------------------------------------------------
   6.4 · OPERATIONAL SCALE — "Every day, we operate across"
   -------------------------------------------------------------------------- */
.scale-band { position: relative; overflow: hidden; }
.qc-field {
  position: absolute; inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image: radial-gradient(circle at center, rgba(255,255,255,.16) 1.2px, transparent 1.2px);
  background-size: 61px 61px;
  background-position: 30px 30px;
  /* Activity concentrates at the edges so it never competes with the copy. */
  -webkit-mask-image: radial-gradient(ellipse 62% 72% at 42% 50%, transparent 30%, #000 88%);
  mask-image: radial-gradient(ellipse 62% 72% at 42% 50%, transparent 30%, #000 88%);
}
.qc-field--light {
  background-image: radial-gradient(circle at center, rgba(10,10,11,.14) 1.2px, transparent 1.2px);
}
.qc-field__live { width: 100%; height: 100%; }
.qc-cell--live {
  fill: var(--accent);
  animation: cellWake 6s var(--ease-io) infinite;
}
@keyframes cellWake {
  0%, 55%, 100% { opacity: .16; }
  68%           { opacity: .8; }
}
.qc-cell-hex {
  fill: none; stroke: var(--accent); stroke-width: 1;
  transform-box: fill-box; transform-origin: center;
  opacity: 0;
  animation: cellHex 6s var(--ease-io) infinite;
}
@keyframes cellHex {
  0%, 55% { transform: scale(.25); opacity: 0; }
  70%     { opacity: .5; }
  100%    { transform: scale(1.15); opacity: 0; }
}
.scale-band__inner { position: relative; z-index: 1; }

/* Metric with a live indicator beside it */
.metric__viz { height: 34px; margin-bottom: var(--sp-4); display: block; overflow: visible; }
.metric__viz .mv-bar {
  fill: var(--accent);
  transform-box: fill-box; transform-origin: bottom;
  animation: mvBar 2.6s var(--ease-io) infinite;
}
@keyframes mvBar {
  0%, 100% { transform: scaleY(.28); opacity: .45; }
  50%      { transform: scaleY(1);   opacity: 1; }
}
.metric__viz .mv-dot   { fill: var(--accent); animation: cellWake 4s var(--ease-io) infinite; }
.metric__viz .mv-dot--dim { fill: rgba(255,255,255,.28); animation: none; }
.metric__viz .mv-hex   { fill: none; stroke: var(--accent); stroke-width: 1.1; }
.metric__viz .mv-hex--dim { stroke: rgba(255,255,255,.3); }

/* --------------------------------------------------------------------------
   6.5 · ECOSYSTEM FLOW — Brand → … → Growth
   -------------------------------------------------------------------------- */
.flow-scroll { overflow-x: auto; overscroll-behavior-x: contain; }
.qc-flowviz { width: 100%; min-width: 760px; height: auto; overflow: visible; }
.qc-flow__rail { stroke: var(--line); stroke-width: 1; }
.qc-flow__pulse {
  stroke: var(--accent); stroke-width: 2; stroke-linecap: round;
  stroke-dasharray: 9 200;
  animation: signalRun 2.8s linear infinite;
  opacity: 0;
}
.qc-flow__box, .qc-flow__hex, .qc-flow__tile {
  fill: var(--paper); stroke: var(--ink); stroke-width: 1.2;
}
.qc-flow__tile--on { fill: var(--accent); stroke: var(--accent); }
.qc-flow__plate { stroke: var(--ink); stroke-width: 2.4; stroke-linecap: round; }
.qc-flow__dot { fill: var(--accent); }
.qc-flow__radius {
  fill: none; stroke: var(--accent); stroke-width: 1.2;
  transform-box: fill-box; transform-origin: center;
  animation: radiusPing 3.2s var(--ease-io) infinite;
}
.qc-flow__radius--2 { animation-delay: .5s; }
@keyframes radiusPing {
  0%, 100% { transform: scale(.72); opacity: .25; }
  55%      { transform: scale(1);   opacity: .9; }
}
.qc-flow__growth { fill: none; stroke: var(--accent); stroke-width: 2.4; stroke-linejoin: round; stroke-linecap: round; }
.qc-flow__label {
  font-family: var(--font-mono); font-size: 12px;
  letter-spacing: .1em; text-transform: uppercase; fill: var(--ink);
}
.qc-flow__note { font-family: var(--font-sans); font-size: 12.5px; fill: var(--ink-40); }
.section--ink .qc-flow__label { fill: #fff; }
.section--ink .qc-flow__note  { fill: var(--inv-fg-40); }
.section--ink .qc-flow__rail  { stroke: var(--inv-line); }
.section--ink .qc-flow__box,
.section--ink .qc-flow__hex,
.section--ink .qc-flow__tile { fill: var(--inv-bg); stroke: rgba(255,255,255,.6); }
.section--ink .qc-flow__plate { stroke: #fff; }

/* --------------------------------------------------------------------------
   6.6 · GROWTH SIGNAL — motif behind the partnership averages.
   Intentionally axis-free and unlabelled: this is not a data chart.
   -------------------------------------------------------------------------- */
.growth-band { position: relative; overflow: hidden; }
/* The lines occupy the right-hand side only, rising away from the copy. */
.qc-growth {
  position: absolute;
  right: 0; bottom: 0;
  width: 64%; height: 58%;
  z-index: 0; pointer-events: none;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 26%, #000 88%, transparent);
  mask-image: linear-gradient(to right, transparent, #000 26%, #000 88%, transparent);
}
.qc-growth__grid { stroke: var(--inv-line-soft); stroke-width: 1; }
.qc-growth__line {
  fill: none;
  stroke: rgba(255, 255, 255, .3);
  stroke-width: 1.6;
  stroke-linejoin: round;
  stroke-dasharray: 1600;
  stroke-dashoffset: 1600;
  vector-effect: non-scaling-stroke;
}
.is-visible .qc-growth__line { animation: lineDraw 2.4s var(--ease) forwards; }
.qc-growth__line--accent { stroke: var(--accent); stroke-width: 2.4; }
.qc-growth__line--faint  { stroke: rgba(255, 255, 255, .16); }
@keyframes lineDraw { to { stroke-dashoffset: 0; } }
.growth-band__inner { position: relative; z-index: 1; }

/* --------------------------------------------------------------------------
   6.7 · OPERATING CYCLE + SEARCH VISIBILITY  (What We Do)
   -------------------------------------------------------------------------- */
.qc-os { width: 100%; min-width: 720px; height: auto; overflow: visible; }
.qc-os__rail  { stroke: var(--inv-line); stroke-width: 1; }
.qc-os__pulse {
  stroke: var(--accent); stroke-width: 2; stroke-linecap: round;
  stroke-dasharray: 9 300; animation: signalRun 3s linear infinite; opacity: 0;
}
.qc-os__hex {
  fill: var(--inv-bg); stroke: rgba(255,255,255,.7); stroke-width: 1.3;
  animation: nodeBreathe 4.4s var(--ease-io) infinite;
}
.qc-os__num {
  font-family: var(--font-mono); font-size: 12px; letter-spacing: .06em; fill: var(--accent);
}
.qc-os__loop {
  fill: none; stroke: var(--inv-line); stroke-width: 1; stroke-dasharray: 4 6;
}

/* Diagram beside copy. A class, not an inline style, so the breakpoint below
   can actually collapse it — and min-width:0 lets the SVG shrink instead of
   forcing the grid wider than the screen. */
.viz-split {
  display: grid;
  grid-template-columns: minmax(0, 400px) minmax(0, 1fr);
  gap: clamp(1.5rem, 1rem + 2vw, 3rem);
  align-items: center;
}
.viz-split > * { min-width: 0; }
@media (max-width: 860px) {
  .viz-split { grid-template-columns: minmax(0, 1fr); gap: var(--sp-5); }
}

.qc-search { width: 100%; max-width: 400px; height: auto; }
.qc-search__bar { fill: none; stroke: var(--line); stroke-width: 1.2; }
.qc-search__lens { fill: none; stroke: var(--ink-40); stroke-width: 1.6; }
.qc-search__lens-h { stroke: var(--ink-40); stroke-width: 1.6; stroke-linecap: round; }
.qc-search__q {
  font-family: var(--font-mono); font-size: 12px; letter-spacing: .06em; fill: var(--ink-40);
}
.qc-rank__tile  { fill: var(--paper); stroke: var(--line); stroke-width: 1; }
.qc-rank__thumb { fill: var(--bone-deep); }
.qc-rank__label { font-family: var(--font-sans); font-size: 13px; fill: var(--ink-60); }
.qc-rank__pos   { font-family: var(--font-mono); font-size: 11px; letter-spacing: .06em; fill: var(--ink-40); }

/* The brand climbs from position 3 to position 1 once the section is in view,
   and the two rows it passes slide down to make room. */
.qc-rank--you .qc-rank__tile  { fill: var(--accent-soft); stroke: var(--accent); }
.qc-rank--you .qc-rank__thumb { fill: var(--accent); }
.qc-rank--you .qc-rank__label { fill: var(--accent-ink); font-weight: 600; }
.qc-rank--you .qc-rank__pos   { fill: var(--accent); }

.qc-rank { transition: transform 1.4s var(--ease) .6s; }
.is-visible .qc-rank--you { transform: translateY(-104px); }
.is-visible .qc-rank:nth-of-type(1),
.is-visible .qc-rank:nth-of-type(2) { transform: translateY(52px); }

/* Rank numbers cross-fade so the column stays truthful mid-animation */
.qc-rank__pos--after  { opacity: 0; transition: opacity .5s var(--ease) 1.6s; }
.qc-rank__pos--before { opacity: 1; transition: opacity .5s var(--ease) 1.6s; }
.is-visible .qc-rank__pos--after  { opacity: 1; }
.is-visible .qc-rank__pos--before { opacity: 0; }

/* --------------------------------------------------------------------------
   6.8 · CASE STUDY INTERVENTION MAP
   Which levers a partnership actually touched. Driven by data, not decoration.
   -------------------------------------------------------------------------- */
.qc-levers { display: flex; flex-wrap: wrap; gap: .5rem; }
.qc-levers.reveal { opacity: 1; transform: none; }
.qc-lever {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .55rem .9rem;
  border: 1px solid var(--line);
  border-radius: 100px;
  font-size: .875rem;
  color: var(--ink-40);
}
.qc-lever svg { width: 13px; height: 15px; flex: none; }
.qc-lever path { fill: none; stroke: currentColor; stroke-width: 1.6; }
.qc-lever--on {
  border-color: var(--accent);
  background: var(--accent-soft);
  color: var(--accent-ink);
}
/* The levers light up in sequence once the block is in view, so the reader
   sees which parts of the system this partnership actually touched. */
.qc-levers.reveal .qc-lever--on {
  border-color: var(--line);
  background: transparent;
  color: var(--ink-40);
  transition: border-color .4s var(--ease), background-color .4s var(--ease), color .4s var(--ease);
}
.qc-levers.reveal .qc-lever--on path { fill: none; stroke: currentColor; transition: fill .4s var(--ease), stroke .4s var(--ease); }
.qc-levers.reveal.is-visible .qc-lever--on {
  border-color: var(--accent);
  background: var(--accent-soft);
  color: var(--accent-ink);
}
.qc-levers.reveal.is-visible .qc-lever--on path { fill: var(--accent); stroke: var(--accent); }
.qc-levers.reveal .qc-lever--on:nth-of-type(2) { transition-delay: .1s; }
.qc-levers.reveal .qc-lever--on:nth-of-type(3) { transition-delay: .2s; }
.qc-levers.reveal .qc-lever--on:nth-of-type(4) { transition-delay: .3s; }
.qc-levers.reveal .qc-lever--on:nth-of-type(5) { transition-delay: .4s; }
.qc-levers.reveal .qc-lever--on:nth-of-type(6) { transition-delay: .5s; }
.qc-lever--on path { fill: var(--accent); stroke: var(--accent); }
/* ==========================================================================
   7 · MOTION — scroll reveal & page entry
   ========================================================================== */
.reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .75s var(--ease), transform .75s var(--ease);
  will-change: opacity, transform;
}
.reveal.is-visible { opacity: 1; transform: none; }
.reveal[data-delay="1"] { transition-delay: .08s; }
.reveal[data-delay="2"] { transition-delay: .16s; }
.reveal[data-delay="3"] { transition-delay: .24s; }
.reveal[data-delay="4"] { transition-delay: .32s; }
.reveal[data-delay="5"] { transition-delay: .40s; }

/* Line that draws itself in on reveal */
.rule-draw { transform: scaleX(0); transform-origin: left; transition: transform .9s var(--ease); }
.rule-draw.is-visible { transform: scaleX(1); }

/* Lightweight page entry — no layout shift, no blocking */
@keyframes pageIn { from { opacity: 0; } to { opacity: 1; } }
body { animation: pageIn .35s var(--ease) both; }

/* Respect user preference — hard stop on all motion */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  .reveal { opacity: 1; transform: none; }
  .mark::after { transform: scaleX(1); }
  .shelf-s__band { -webkit-clip-path: inset(46% 0 37% 0); clip-path: inset(46% 0 37% 0); }
  .qc-growth__line { stroke-dashoffset: 0; }
  .is-visible .qc-rank { transform: none; }
  .qc-rank__pos--after { display: none; }
  .rule-draw { transform: scaleX(1); }
  .step::after { width: 100%; }
  .marquee__track { animation: none; }
  .qc-node, .qc-society, .qc-win--on, .qc-cell--live { opacity: 1; }
  .qc-pulse, .qc-cell-hex, .qc-signal, .qc-flow__pulse, .qc-os__pulse,
  .qc-rider, .qc-pack, .qc-core__light { display: none; }
  .qc-eco [data-depth] { transform: none !important; }
}

/* ==========================================================================
   8 · RESPONSIVE
   Mobile gets its own intentional layout, not a squashed desktop.
   ========================================================================== */

/* --- Laptop ------------------------------------------------------------- */
@media (max-width: 1180px) {
  .case-row { grid-template-columns: 56px minmax(0, 1fr) minmax(0, 1.4fr) auto; }
  .footer__top { grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr)); }
}

/* --- Tablet ------------------------------------------------------------- */
@media (max-width: 1024px) {
  :root { --nav-h: 64px; }

  .nav__links, .nav__cta { display: none; }
  .nav__toggle { display: flex; }

  .hero__grid { grid-template-columns: 1fr; gap: var(--sp-7); }
  .hero__visual { order: -1; max-width: 420px; margin-inline: auto; }
  .hero__sub { max-width: 42ch; }

  .split, .split--even { grid-template-columns: 1fr; gap: var(--sp-6); }
  .cs-block__grid { grid-template-columns: 1fr; gap: var(--sp-3); }

  .tile-grid { grid-template-columns: repeat(2, 1fr); }
  .grid--3, .grid--4 { grid-template-columns: repeat(2, 1fr); }
  .steps { grid-template-columns: repeat(2, 1fr); }
  .timeline { grid-template-columns: repeat(2, 1fr); gap: var(--sp-6) 0; }

  .case-row {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "logo go" "title title" "meta meta";
    gap: var(--sp-4);
  }
  .case-row__logo  { grid-area: logo; }
  .case-row__go    { grid-area: go; }
  .case-row__title { grid-area: title; }
  .case-row__meta  { grid-area: meta; }

  .rowlist__item,
  .rowlist__item--num,
  .rowlist__item--label { grid-template-columns: minmax(0, 1fr); gap: var(--sp-2); }

 /* .footer__top { grid-template-columns: repeat(2, 1fr); }
  .footer__brand { grid-column: 1 / -1; } */
    .footer__top { grid-template-columns: repeat(2, 1fr); }
  .footer__brand { grid-column: 1 / -1; }

  .footer__brand { text-align: center; }
  .footer__desc { margin-inline: auto; }
  .creds { justify-content: center; }
  /* NOTE: a duplicate closing brace used to sit here — removed 2026-09-12. */
}

/* --- Mobile ------------------------------------------------------------- */
@media (max-width: 680px) {
  :root {
    --section-y: 3.75rem;
    --t-metric: 3.25rem;
  }

  .display { letter-spacing: -.035em; line-height: .98; }

  .hero { padding-top: calc(var(--nav-h) + 2rem); }

  /* Mobile hero: the words lead. The visual becomes a closing mark below the
     CTAs rather than pushing the headline under the fold. */
  .hero__visual {
    order: 0;
    max-width: 230px;
    margin: var(--sp-7) auto 0;
  }
  .hero__visual::before { width: 92%; }

  /* Simplify the animation: drop the outer ring, its nodes, the instrument
     ticks and the radar sweep. Core + inner ring only — far fewer animated
     layers, which is what actually costs battery on a phone. */
  .qc-outer { display: none; }
  .qc-pulse { animation-duration: 7.5s; }
  .hero__bg { background-size: 56px 56px; }

  /* A two-line eyebrow needs its marker pinned to the first line */
  .eyebrow { align-items: flex-start; }
  .eyebrow::before { margin-top: .38em; }
  .hero__eyebrow { font-size: .6875rem; }
  .hero__scroll { align-items: flex-start; font-size: .6875rem; margin-top: var(--sp-6); }
  .hero__scroll svg { margin-top: .1em; flex: none; }

  .tile-grid, .grid--2, .grid--3, .grid--4 { grid-template-columns: 1fr; }
  .steps { grid-template-columns: 1fr; }
  .timeline { grid-template-columns: 1fr; gap: var(--sp-5); }

  /* Metrics stack into full-width rows with dividers on top, not left */
  .metrics { grid-template-columns: 1fr; }
  .metric {
    border-left: 0; border-top: 1px solid var(--line);
    padding: var(--sp-5) 0;
    display: grid; grid-template-columns: auto 1fr;
    align-items: baseline; gap: var(--sp-5);
  }
  .metric:first-child { padding-top: 0; border-top: 0; }
  .section--ink .metric { border-color: var(--inv-line); }
  .metric__label { margin-top: 0; }

  .form__row { grid-template-columns: 1fr; }

  .btn-row { flex-direction: column; align-items: stretch; }
  .btn { width: 100%; padding-block: 1.05rem; }
  .btn-row .btn { width: 100%; }

  .footer__top { grid-template-columns: 1fr; gap: var(--sp-6); }
  .footer__bottom { flex-direction: column; align-items: flex-start; }

  .case-row:hover { padding-inline: 0; }
  .case-row::before { display: none; }

  .cta-band__glow { width: 420px; height: 420px; right: -160px; }

  .marquee__item { height: 34px; }
}

@media (max-width: 400px) {
  :root { --t-display: 2.6rem; }
}

/* --- Print -------------------------------------------------------------- */
@media print {
  .nav, .footer, .cta-band, .marquee, .hero__visual { display: none !important; }
  body { color: #000; background: #fff; }
  .reveal { opacity: 1; transform: none; }
}

/* ==========================================================================
   9 · OUR SERVICES — the three engagement models
   A tab set, not a Bootstrap tab set: the indicator physically slides to the
   chosen model, the panel cross-fades, and each model gets its own diagram so
   the difference is visible before a word is read.
   ========================================================================== */

.svc { position: relative; }

/* --- The selector -------------------------------------------------------- */
.svc-tabs {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  margin-bottom: clamp(2.5rem, 1.5rem + 3vw, 4rem);
}

/* The indicator that slides between models. JS writes --tab-x / --tab-w. */
.svc-tabs::after {
  content: '';
  position: absolute;
  left: 0; bottom: -1px;
  height: 2px;
  width: var(--tab-w, 33.333%);
  transform: translateX(var(--tab-x, 0px));
  background: var(--accent);
  transition: transform .42s var(--ease), width .42s var(--ease);
}
.svc-tabs:not(.is-ready)::after { display: none; }

.svc-tab {
  display: flex;
  flex-direction: column;
  gap: .55rem;
  padding: clamp(1.1rem, .8rem + 1vw, 1.75rem) clamp(1rem, .6rem + 1vw, 1.75rem);
  background: none;
  border: 0;
  border-left: 1px solid var(--line);
  text-align: left;
  cursor: pointer;
  color: var(--ink-40);
  font: inherit;
  transition: color .3s var(--ease), background-color .3s var(--ease);
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
.svc-tab:first-child { border-left: 0; }
.svc-tab:hover { color: var(--ink-60); background: var(--bone); }
.svc-tab[aria-selected="true"] { color: var(--ink); background: var(--paper); }

.svc-tab__index {
  font-family: var(--font-mono); font-size: var(--t-micro);
  letter-spacing: .12em; color: var(--ink-40);
  transition: color .3s var(--ease);
}
.svc-tab[aria-selected="true"] .svc-tab__index { color: var(--accent); }
.svc-tab__name {
  font-size: clamp(1rem, .92rem + .4vw, 1.3rem);
  font-weight: 500; letter-spacing: -.025em; line-height: 1.15;
}
.svc-tab__hint {
  font-size: .8125rem; color: var(--ink-40); line-height: 1.35;
  transition: color .3s var(--ease);
}
.svc-tab[aria-selected="true"] .svc-tab__hint { color: var(--ink-60); }

/* Swipe affordances: authored once, revealed only where swiping is the actual
   interaction (see section 10). Hidden from the a11y tree in the markup. */
.svc-tabs-hint,
.swipe-hint { display: none; }

/* --- The panels ---------------------------------------------------------- */
.svc-panel[hidden] { display: none; }
.svc-panel {
  animation: svcIn .42s var(--ease) both;
}
@keyframes svcIn {
  from { opacity: 0; transform: translateY(10px); }
}

.svc-panel__top {
  display: grid;
  grid-template-columns: minmax(0, 6fr) minmax(0, 6fr);
  gap: clamp(2rem, 1rem + 4vw, 4.5rem);
  align-items: center;
  margin-bottom: clamp(2.5rem, 1.5rem + 3vw, 4rem);
}
.svc-panel__lead { font-size: var(--t-lead); line-height: 1.5; letter-spacing: -.015em; color: var(--ink); margin-bottom: var(--sp-4); }
.svc-panel__body { color: var(--ink-60); }

.svc-viz { width: 100%; height: auto; overflow: visible; }
.svc-label {
  font-family: var(--font-mono); font-size: 12px;
  letter-spacing: .1em; text-transform: uppercase; fill: var(--ink);
}
.svc-axis {
  font-family: var(--font-mono); font-size: 11px;
  letter-spacing: .1em; text-transform: uppercase; fill: var(--ink-40);
}

/* --- Service areas ------------------------------------------------------- */
.svc-areas {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border-top: 1px solid var(--line);
}
.svc-area {
  padding: clamp(1.5rem, 1rem + 1.5vw, 2.25rem) 0;
  border-bottom: 1px solid var(--line);
}
.svc-area:nth-child(odd)  { padding-right: clamp(1.5rem, 1rem + 2vw, 3rem); border-right: 1px solid var(--line); }
.svc-area:nth-child(even) { padding-left: clamp(1.5rem, 1rem + 2vw, 3rem); }
.svc-area__title { margin-bottom: var(--sp-4); }
.svc-area__list { display: grid; gap: .5rem; }
.svc-area__list li {
  position: relative; padding-left: 1.3rem;
  font-size: .9375rem; color: var(--ink-60); line-height: 1.45;
}
.svc-area__list li::before {
  content: ''; position: absolute; left: 0; top: .62em;
  width: 8px; height: 1px; background: var(--accent);
}

/* --- Positioning line + CTA ---------------------------------------------- */
.svc-position {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: clamp(1.5rem, 1rem + 3vw, 3.5rem);
  align-items: center;
  margin-top: clamp(2.5rem, 1.5rem + 3vw, 4rem);
  padding: clamp(1.75rem, 1rem + 2.5vw, 2.75rem);
  background: var(--ink);
  color: #fff;
  border-radius: var(--radius);
}
.svc-position__text { font-size: clamp(1.15rem, 1rem + .8vw, 1.6rem); line-height: 1.3; letter-spacing: -.025em; }
.svc-position .btn { --btn-bg: #fff; --btn-fg: var(--ink); --btn-bd: #fff; }
.svc-position .btn:hover { color: #fff; }

/* --- Comparison ---------------------------------------------------------- */
.svc-compare {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-top: 1px solid var(--line);
}
.svc-compare__col {
  padding: clamp(1.5rem, 1rem + 2vw, 2.5rem) clamp(1.25rem, .8rem + 1.5vw, 2rem);
  border-left: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.svc-compare__col:first-child { border-left: 0; padding-left: 0; }
.svc-compare__col:last-child { padding-right: 0; }
.svc-compare__index {
  font-family: var(--font-mono); font-size: var(--t-micro);
  letter-spacing: .12em; color: var(--accent); margin-bottom: var(--sp-4);
}
.svc-compare__name { margin-bottom: var(--sp-3); }
.svc-compare__line {
  font-size: clamp(1.05rem, .95rem + .5vw, 1.35rem);
  letter-spacing: -.02em; line-height: 1.25;
  margin-bottom: var(--sp-4);
  color: var(--ink-60);
}
/* The answer carries the weight; the accent stays on the index alone. Five
   accent-coloured phrases per column turns the one accent into a body colour. */
.svc-compare__line b { font-weight: 500; color: var(--ink); }
.svc-compare__note { font-size: .9375rem; color: var(--ink-60); line-height: 1.5; }

/* ==========================================================================
   9a · SERVICE DIAGRAM DETAIL
   ========================================================================== */

/* White-space map */
.ws-cell { fill: none; stroke: var(--line); stroke-width: 1.2; }
.ws-dot  { fill: var(--ink-40); }
.ws-cell--gap {
  stroke: var(--accent); stroke-width: 1.6; stroke-dasharray: 5 4;
  fill: var(--accent-soft);
  animation: wsGap 5s var(--ease-io) infinite;
}
@keyframes wsGap { 0%, 100% { opacity: .4; } 50% { opacity: 1; } }
.ws-plus {
  stroke: var(--accent); stroke-width: 2; stroke-linecap: round;
  animation: wsGap 5s var(--ease-io) infinite;
}
.ws-scan {
  fill: var(--accent); opacity: .12;
  animation: wsScan 7s var(--ease-io) infinite;
}
@keyframes wsScan {
  0%, 100% { transform: translateX(0); opacity: 0; }
  10%      { opacity: .14; }
  90%      { opacity: .14; }
  100%     { transform: translateX(548px); opacity: 0; }
}

/* Implementation line */
.im-rail  { stroke: var(--line); stroke-width: 1.4; }
.im-pack  { fill: var(--accent); animation: imRun 2.7s var(--ease-io) infinite; }
@keyframes imRun {
  0%       { transform: translateX(0); opacity: 0; }
  12%      { opacity: 1; }
  88%      { opacity: 1; }
  100%     { transform: translateX(var(--run, 100px)); opacity: 0; }
}
.im-box   { fill: none; stroke: var(--ink); stroke-width: 1.4; }
.im-box--on { fill: var(--accent); stroke: var(--accent); }
.im-plate { stroke: var(--ink); stroke-width: 2.6; stroke-linecap: round; }
.im-hex   { fill: var(--paper); stroke: var(--ink); stroke-width: 1.6; }

.im-stage { fill: none; stroke: var(--line); stroke-width: 1.2; }
.im-stage-fill {
  fill: var(--accent); opacity: 0;
  animation: imStage 4.2s var(--ease-io) infinite;
}
@keyframes imStage { 0%, 70%, 100% { opacity: 0; } 12%, 26% { opacity: .16; } }
.im-stage-label {
  font-family: var(--font-mono); font-size: 10px;
  letter-spacing: .06em; text-transform: uppercase; fill: var(--ink-60);
}
.im-loop-back { fill: none; stroke: var(--line); stroke-width: 1.2; stroke-dasharray: 4 6; }

/* 360 ring */
.ec-ring { fill: none; stroke: var(--line); stroke-width: 1.4; }
.ec-ring-run {
  fill: none; stroke: var(--accent); stroke-width: 2.4; stroke-linecap: round;
  stroke-dasharray: 40 1000;
  animation: ecRun 5.5s linear infinite;
}
@keyframes ecRun { to { stroke-dashoffset: -1040; } }
.ec-spoke { stroke: var(--line); stroke-width: 1.2; }
.ec-spoke-live {
  stroke: var(--accent); stroke-width: 2; stroke-linecap: round;
  stroke-dasharray: 12 300;
  animation: signalRun 3s linear infinite; opacity: 0;
}
.ec-box   { fill: none; stroke: var(--ink); stroke-width: 1.5; }
.ec-mark  { stroke: var(--accent); stroke-width: 2.4; }
.ec-plate { stroke: var(--ink); stroke-width: 2.6; stroke-linecap: round; }
.ec-hex   { fill: var(--paper); stroke: var(--ink); stroke-width: 1.5; }
.ec-core  { fill: var(--paper); stroke: var(--ink); stroke-width: 1.8; }
.ec-core-bloom {
  fill: var(--accent); opacity: .06;
  animation: bloom 5s var(--ease-io) infinite;
}
.ec-core-label {
  font-family: var(--font-mono); font-size: 11px;
  letter-spacing: .1em; fill: var(--ink);
}

/* The 5-step ladder under Consulting 360° */
.svc-ladder { display: grid; gap: 0; margin-top: var(--sp-6); }
.svc-ladder__step {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  gap: var(--sp-4);
  align-items: baseline;
  padding: var(--sp-4) 0;
  border-top: 1px solid var(--line);
  position: relative;
}
.svc-ladder__step:last-child { border-bottom: 1px solid var(--line); }
.svc-ladder__step::after {
  content: ''; position: absolute; top: -1px; left: 0; height: 1px;
  width: 0; background: var(--accent);
  transition: width .7s var(--ease);
}
/* An accent tick that draws in over the hairline — five full-width accent
   rules stacked reads as a table, not as a ladder. */
.is-visible .svc-ladder__step::after { width: 64px; }
.is-visible .svc-ladder__step:nth-child(2)::after { transition-delay: .1s; }
.is-visible .svc-ladder__step:nth-child(3)::after { transition-delay: .2s; }
.is-visible .svc-ladder__step:nth-child(4)::after { transition-delay: .3s; }
.is-visible .svc-ladder__step:nth-child(5)::after { transition-delay: .4s; }
.svc-ladder__num {
  font-family: var(--font-mono); font-size: var(--t-micro);
  letter-spacing: .1em; color: var(--accent);
}
.svc-ladder__label { font-weight: 500; letter-spacing: -.02em; }
.svc-ladder__note { color: var(--ink-60); font-size: .9375rem; margin-top: .2rem; }

.perf-lite .ws-scan,
.perf-lite .im-pack,
.perf-lite .ec-ring-run,
.perf-lite .ec-spoke-live,
.perf-lite .im-stage-fill { display: none; }

/* ==========================================================================
   10 · MOBILE COMPOSITION
   Not a stacked desktop. Each section is recomposed for the phone, in the
   same design language. Ordered widest-first so the narrowest rules win.
   ========================================================================== */

/* --- Tablet: the service selector and comparison lose a column ----------- */
@media (max-width: 900px) {
  .svc-panel__top { grid-template-columns: minmax(0, 1fr); gap: var(--sp-6); }
  .svc-panel__viz { max-width: 520px; margin-inline: auto; width: 100%; }
  .svc-position { grid-template-columns: minmax(0, 1fr); gap: var(--sp-5); }
  .svc-compare { grid-template-columns: minmax(0, 1fr); }
  .svc-compare__col {
    border-left: 0; padding-inline: 0;
    padding-block: clamp(1.25rem, 1rem + 1.5vw, 2rem);
  }
  .svc-areas { grid-template-columns: minmax(0, 1fr); }
  .svc-area:nth-child(odd) { padding-right: 0; border-right: 0; }
  .svc-area:nth-child(even) { padding-left: 0; }
}

/* --- Phones -------------------------------------------------------------- */
@media (max-width: 680px) {

  /* HERO — the words lead, the visual closes. Tighter so the ecosystem is
     reachable without a long scroll. */
  .hero { padding-top: calc(var(--nav-h) + 1.5rem); padding-bottom: var(--sp-6); }
  .hero__grid { gap: 0; }
  .hero__visual { order: 0; margin-inline: auto; }   /* words lead on a phone */
  .hero__eyebrow { margin-bottom: var(--sp-4); }
  .hero__title { margin-bottom: var(--sp-4); }
  .hero__sub { margin-bottom: var(--sp-5); max-width: none; }
  .hero__visual { margin-top: var(--sp-6); max-width: 300px; }
  .hero__scroll { margin-top: var(--sp-5); }

  /* The headline breaks on its own terms: "Own the / Quick Commerce / Shelf." */
  .hero__title .nb { white-space: nowrap; }

  /* CTAs: full width, generous, never wrapping */
  .btn-row { gap: .6rem; }
  .btn--lg { min-height: 54px; }

  /* METRICS — a real stack, numbers kept large */
  .metrics { grid-template-columns: minmax(0, 1fr); }
  .metric {
    display: block;
    border-left: 0;
    border-top: 1px solid var(--line);
    padding: var(--sp-5) 0;
  }
  .metric:first-child { border-top: 0; padding-top: 0; }
  .metric__viz { height: 26px; margin-bottom: var(--sp-3); }
  .metric__value { font-size: 3.4rem; }
  .metric__label { margin-top: var(--sp-2); max-width: none; }

  /* SERVICE TABS — a segmented selector that scrolls, with snapping */
  .svc-tabs {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
    margin-inline: calc(var(--gutter) * -1);
    padding-inline: var(--gutter);
  }
  .svc-tabs::-webkit-scrollbar { display: none; }
  .svc-tabs::after { display: none; }         /* the moving rule needs a grid */
  .svc-tab {
    flex: 0 0 78%;
    scroll-snap-align: center;
    border-left: 0;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    margin-right: .6rem;
    min-height: 96px;
    justify-content: center;
  }
  .svc-tab:last-child { margin-right: 0; }
  .svc-tab[aria-selected="true"] {
    border-color: var(--accent);
    box-shadow: inset 0 0 0 1px var(--accent);
    background: var(--accent-soft);
  }
  .svc-tabs-hint {
    display: flex; align-items: center; gap: .5rem;
    margin-top: var(--sp-3);
    margin-bottom: var(--sp-6);
    font-family: var(--font-mono); font-size: var(--t-micro);
    letter-spacing: .1em; text-transform: uppercase; color: var(--ink-40);
  }

  .svc-position { padding: var(--sp-5); }
  .svc-position .btn { width: 100%; }
  .svc-ladder__step { grid-template-columns: 34px minmax(0, 1fr); gap: var(--sp-3); }

  /* A section head that splits on desktop stacks on a phone — and a link
     pinned right in a stacked column reads as an orphan. Inline styles set
     the desktop alignment, so this needs the same weight to undo it. */
  .section-head.split > div { justify-self: start !important; }

  /* CASE STUDIES — one card at a time, swipeable */
  .case-list {
    display: flex;
    gap: .75rem;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
    border-top: 0;
    margin-inline: calc(var(--gutter) * -1);
    padding: 0 var(--gutter) var(--sp-4);
  }
  .case-list::-webkit-scrollbar { display: none; }

  .case-row {
    flex: 0 0 82%;
    scroll-snap-align: center;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--sp-4);
    padding: var(--sp-5);
    border: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--paper);
    min-height: 250px;
  }
  .case-row::before { display: none; }
  .case-row__logo { grid-area: auto; height: 44px; }
  .case-row__title { grid-area: auto; font-size: 1.5rem; }
  .case-row__meta { grid-area: auto; }
  .case-row__go { grid-area: auto; margin-top: auto; }
  .case-row:hover { padding-inline: var(--sp-5); transform: none; }

  .swipe-hint {
    display: flex; align-items: center; gap: .5rem;
    font-family: var(--font-mono); font-size: var(--t-micro);
    letter-spacing: .1em; text-transform: uppercase; color: var(--ink-40);
    margin-top: var(--sp-2);
  }
  .swipe-hint svg { animation: swipeNudge 2.6s var(--ease-io) infinite; }
  .swipe-hint--center { justify-content: center; margin-top: var(--sp-4); }
  @keyframes swipeNudge {
    0%, 100% { transform: translateX(0); opacity: .5; }
    50%      { transform: translateX(5px); opacity: 1; }
  }

  /* Case study detail: labels above content, not beside */
  .cs-block__grid { grid-template-columns: minmax(0, 1fr); gap: var(--sp-3); }
  .qc-levers { gap: .4rem; }
  .qc-lever { font-size: .8125rem; padding: .5rem .75rem; }
}

/* --- Small phones (320–360px) -------------------------------------------- */
@media (max-width: 380px) {
  :root { --gutter: 1.1rem; }
  .hero__eyebrow { font-size: .625rem; letter-spacing: .08em; }
  .metric__value { font-size: 2.9rem; }
  .svc-tab { flex-basis: 86%; }
  .case-row { flex-basis: 88%; padding: var(--sp-4); }
  .creds { gap: .4rem; }
  .cred { font-size: .625rem; padding: .38rem .6rem; }
  .nav__drawer-link { font-size: 1.35rem; }
}

/* --- Landscape phones: the nav and hero must not eat the screen ----------
   A phone on its side has ~360px of height and plenty of width, so the hero
   goes back to two columns rather than stacking. Stacked, the visual alone
   fills the screen and the headline never gets seen. */
@media (max-height: 520px) and (orientation: landscape) {
  .hero { padding-top: calc(var(--nav-h) + .75rem); padding-bottom: var(--sp-5); }
  .hero__grid {
    grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr);
    align-items: center;
    gap: var(--sp-6);
  }
  .hero__copy { order: 0; }
  .hero__visual { order: 0; max-width: 190px; margin: 0 auto; }
  .hero__title { font-size: clamp(1.9rem, 1.1rem + 3.2vw, 3rem); }
  .hero__eyebrow { margin-bottom: var(--sp-3); }
  .hero__sub { margin-bottom: var(--sp-4); font-size: 1rem; }
  .hero__scroll { display: none; }          /* nothing to hint at, it all fits */
  .btn--lg { min-height: 46px; }

  .nav__drawer { padding-top: var(--sp-4); }
  .nav__drawer-link { padding-block: .6rem; font-size: 1.15rem; }
  .nav__drawer-foot { padding-top: var(--sp-4); }
}

/* ==========================================================================
   11 · OUR SERVICES — COMPACT TOP  (page-scoped)
   Every rule here is behind .services-page, a class only services.html
   carries, so nothing in this section can reach another page. It exists to
   pull the three engagement models into the first screen: the old hero spent
   ~264px on padding alone before the selector's own 80px even began.
   ========================================================================== */

/* --- The hero is an introduction, not an editorial spread ---------------- */
.services-page .services-hero {
  padding-top: calc(var(--nav-h) + clamp(2.25rem, 1.5rem + 2vw, 3.75rem));
  padding-bottom: clamp(2rem, 1.5rem + 1.25vw, 3rem);
}
.services-page .services-hero .breadcrumb { margin-bottom: var(--sp-5); }

/* Bottom-aligning the two columns floated the H1 down the page to meet a
   taller neighbour. Aligned to the top, the words start where they should. */
.services-page .services-hero__grid {
  align-items: start;
  gap: var(--sp-6) clamp(2rem, 1rem + 3vw, 4.5rem);
}
.services-page .services-hero__eyebrow { margin-bottom: var(--sp-4); }
.services-page .services-hero__cta { margin-top: var(--sp-5); }

/* --- The selector starts where the hero stops ---------------------------- */
/* One hairline separates the two sections. It does the work that 168px of
   stacked padding was doing, and does it better. */
.services-page .services-selector {
  padding-top: clamp(2rem, 1.5rem + 1.25vw, 3rem);
  border-top: 1px solid var(--line);
}
.services-page .services-selector__head { margin-bottom: var(--sp-5); }
.services-page .services-selector__head .eyebrow { margin-bottom: var(--sp-3); }
.services-page .services-selector__head .h2 { margin-top: 0; margin-bottom: 0; }

/* --- The three options must read as selectable --------------------------- */
.services-page .svc-tab { position: relative; }

/* The arrow is the same "go" mark the case rows and links use, so it reads as
   an affordance the visitor has already met elsewhere on the site. */
/* Pinned to the corner rather than added as a row: the affordance costs the
   tab no extra height, which is the whole point of this change. */
.svc-tab__go {
  position: absolute;
  top: clamp(1.1rem, .8rem + 1vw, 1.75rem);
  right: clamp(1rem, .6rem + 1vw, 1.75rem);
  display: inline-flex;
  color: var(--ink-40);
  opacity: .55;
  transform: translateX(-2px);
  transition: opacity .3s var(--ease), transform .3s var(--ease), color .3s var(--ease);
}
.services-page .svc-tab:hover .svc-tab__go {
  opacity: 1; transform: translateX(2px); color: var(--ink);
}
.services-page .svc-tab[aria-selected="true"] .svc-tab__go {
  opacity: 1; transform: translateX(2px); color: var(--accent);
}

/* A hover rule that previews exactly where the active rule will land. Only
   where a pointer exists — on touch it would flash on tap and read as a bug. */
@media (hover: hover) {
  .services-page .svc-tab::after {
    content: '';
    position: absolute; left: 0; right: 0; bottom: -1px; height: 2px;
    background: var(--ink);
    transform: scaleX(0); transform-origin: left;
    transition: transform .32s var(--ease);
  }
  .services-page .svc-tab:hover::after { transform: scaleX(1); }
  .services-page .svc-tab[aria-selected="true"]::after { display: none; }
  .services-page .svc-tab:hover .svc-tab__index { color: var(--ink-60); }
}

.services-page .svc-tab:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -3px;
}

/* --- Tablet and below ---------------------------------------------------
   The site's own stacking rule for a split is `.split { grid-template-columns:
   1fr }` at 1024px, but `.page-hero .split` outranks it, so an inner-page hero
   never actually stacks — the CTA ends up clipped in a 150px column. This is a
   pre-existing global bug; it is corrected here for this page only, because
   the brief says not to touch shared CSS. See the note in the README. */
@media (max-width: 1024px) {
  .services-page .page-hero .services-hero__grid {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--sp-5);
  }
}

/* --- Phones: the same intent, tighter still ------------------------------ */
@media (max-width: 680px) {
  .services-page .services-hero {
    padding-top: calc(var(--nav-h) + var(--sp-5));
    padding-bottom: var(--sp-5);
  }
  .services-page .services-hero .breadcrumb { margin-bottom: var(--sp-4); }
  .services-page .services-hero__grid { gap: var(--sp-4); }
  .services-page .services-hero__eyebrow { margin-bottom: var(--sp-3); }
  .services-page .services-hero__cta { margin-top: var(--sp-4); }
  .services-page .services-hero__cta .btn { width: 100%; min-height: 50px; }

  .services-page .services-selector { padding-top: var(--sp-5); }
  .services-page .services-selector__head { margin-bottom: var(--sp-4); }

  /* The card already reads as tappable; the arrow would only crowd it. */
  .services-page .svc-tab__go { display: none; }
}

/* --- Landscape phones ---------------------------------------------------- */
@media (max-height: 520px) and (orientation: landscape) {
  .services-page .services-hero {
    padding-top: calc(var(--nav-h) + var(--sp-4));
    padding-bottom: var(--sp-4);
  }
  .services-page .services-selector { padding-top: var(--sp-4); }
  .services-page .services-selector__head { margin-bottom: var(--sp-4); }
}


/* ==========================================================================
   12 · CASE STUDIES  (page-scoped)
   The case-study experience, and only that. Every selector here is either a
   new .cs-* / .csv-* class or sits behind .cs-page, a class only the case
   studies index and the case-study template carry — so nothing in this
   section can reach the homepage, Our Services, or anything else.

   The shape: the index opens on one brand told properly, then offers the
   rest. A case study moves challenge → diagnosis → execution → result, with
   the process as three tabs rather than three screens of scrolling.
   ========================================================================== */

/* --- Shared -------------------------------------------------------------- */

/* Anything still awaiting real information is marked, not hidden. A visitor
   should never mistake a placeholder for a claim, and the person filling the
   data file should be able to spot every gap at a glance. */
.cs-edit {
  color: var(--ink-60);
  background: var(--accent-soft);
  box-shadow: inset 0 -1px 0 rgba(74, 58, 255, .3);
  padding: 0 .28em;
  border-radius: 2px;
}
.section--ink .cs-edit {
  color: var(--inv-fg-60);
  background: rgba(255, 255, 255, .08);
  box-shadow: inset 0 -1px 0 rgba(255, 255, 255, .22);
}

/* One hairline and a label: the section break the rest of the site uses.
   The label is the section's real heading, so it is an <h2> — a page has to
   be navigable by heading, not only readable. .eyebrow leaves font-weight
   alone, which would otherwise let the browser's bold h2 default through. */
.cs-secline {
  border-top: 1px solid var(--line);
  padding-top: var(--sp-5);
  margin-bottom: clamp(1.75rem, 1.25rem + 2vw, 3rem);
}
.cs-secline__title { font-weight: 500; }

/* --- Hero — an introduction, not an editorial spread --------------------- */
.cs-page .cs-hero {
  padding-top: calc(var(--nav-h) + clamp(2.25rem, 1.5rem + 2vw, 3.75rem));
  padding-bottom: clamp(2rem, 1.5rem + 1.5vw, 3.25rem);
}
.cs-page .cs-hero .breadcrumb { margin-bottom: var(--sp-5); }
.cs-page .cs-hero__grid { align-items: start; gap: var(--sp-6) clamp(2rem, 1rem + 3vw, 4.5rem); }
.cs-page .cs-hero__eyebrow { margin-bottom: var(--sp-4); }

/* --- Featured editorial block -------------------------------------------- */
.cs-feature {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(2rem, 1.25rem + 3.5vw, 4.5rem);
  align-items: center;
}
.cs-feature__brand {
  display: flex; align-items: center; gap: var(--sp-4);
  margin-bottom: var(--sp-5);
}
.cs-feature__logo {
  width: 52px; height: 52px; flex: none;
  display: grid; place-items: center;
  border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--paper);
  padding: 7px;
}
.cs-feature__logo img { width: 100%; height: 100%; object-fit: contain; }
.cs-feature__ident { display: flex; flex-direction: column; gap: .15rem; min-width: 0; }
.cs-feature__name {
  font-size: clamp(1.2rem, 1.05rem + .6vw, 1.55rem);
  font-weight: 500; letter-spacing: -.03em; line-height: 1.1;
}
.cs-feature__industry { font-size: .875rem; color: var(--ink-60); }
.cs-feature__cat { margin-bottom: var(--sp-4); }
.cs-feature__headline {
  font-size: clamp(1.75rem, 1.2rem + 2.2vw, 2.9rem);
  line-height: 1.08; letter-spacing: -.035em; font-weight: 400;
  margin-bottom: var(--sp-5);
}
.cs-feature__summary {
  font-size: var(--t-lead); line-height: 1.5; letter-spacing: -.012em;
  color: var(--ink-60); max-width: 44ch;
  margin-bottom: var(--sp-6);
}

/* --- Carousel ------------------------------------------------------------
   Scroll-snap does the work. Touch swiping, momentum and snap positions are
   the browser's own, which is why this feels native on a phone; the script
   only adds mouse dragging and the two arrows on top. Remove the JS and it
   is still a perfectly usable scroller. */
.cs-car { --cs-car-gap: clamp(.75rem, .5rem + 1vw, 1.25rem); }
.cs-car__viewport {
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  cursor: grab;
}
.cs-car__viewport::-webkit-scrollbar { display: none; }
.cs-car__viewport:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
.cs-car.is-dragging .cs-car__viewport { cursor: grabbing; scroll-snap-type: none; }
.cs-car.is-dragging a { pointer-events: none; }

.cs-car__track { display: flex; gap: var(--cs-car-gap); }
.cs-car__slide { flex: 0 0 100%; min-width: 0; scroll-snap-align: start; }
.cs-car--cards .cs-car__slide { flex-basis: 36%; scroll-snap-align: start; display: flex; }

/* --- Carousel controls ---------------------------------------------------
   The caption names what you are looking at; the segmented bar shows where
   you are AND lets you jump straight to a position rather than stepping
   through. Counter and arrows sit to the right of it. */
.cs-car__foot {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: var(--sp-5);
  margin-top: var(--sp-5);
  padding-top: var(--sp-4);
  border-top: 1px solid var(--line);
}
.cs-car--cards .cs-car__foot { justify-content: flex-end; }

.cs-car__cap {
  min-width: 0; flex: 1 1 auto;
  font-size: 1rem; line-height: 1.35; color: var(--ink);
  letter-spacing: -.01em;
}
.cs-car__cap > span {
  display: inline-block;
  transition: opacity .3s var(--ease), transform .3s var(--ease);
}
.cs-car.is-swapping .cs-car__cap > span { opacity: 0; transform: translateY(4px); }

.cs-car__ctrl {
  display: flex; align-items: center; gap: var(--sp-4);
  flex: none;
}

/* Segmented progress — each segment is a button, so a position is one click
   away and every one of them is reachable by keyboard. */
.cs-car__prog { display: flex; align-items: center; gap: 6px; }
.cs-car__seg {
  -webkit-appearance: none; appearance: none;
  width: 26px; height: 20px; padding: 0;
  background: none; border: 0; cursor: pointer;
  position: relative;
  -webkit-tap-highlight-color: transparent;
}
.cs-car__seg::after {
  content: ""; position: absolute; left: 0; right: 0; top: 50%;
  height: 2px; margin-top: -1px; border-radius: 2px;
  background: var(--line);
  transition: background-color .35s var(--ease), transform .35s var(--ease);
}
.cs-car__seg:hover::after { background: var(--ink-40); }
.cs-car__seg.is-on::after { background: var(--ink); transform: scaleY(2); }
.cs-car__seg:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 2px; }

.cs-car__count {
  font-family: var(--font-mono); font-size: var(--t-micro);
  letter-spacing: .1em; color: var(--ink-40);
  font-variant-numeric: tabular-nums;
  flex: none;
}
.cs-car__count-sep { margin: 0 .35em; opacity: .5; }

.cs-car__nav { display: flex; gap: .5rem; }
.cs-car__btn {
  width: 44px; height: 44px; flex: none;
  display: grid; place-items: center;
  background: none; border: 1px solid var(--line); border-radius: 50%;
  color: var(--ink); cursor: pointer;
  transition: background-color .3s var(--ease), border-color .3s var(--ease),
              color .3s var(--ease), opacity .3s var(--ease),
              transform .3s var(--ease);
  -webkit-tap-highlight-color: transparent;
}
.cs-car__btn:hover { background: var(--ink); border-color: var(--ink); color: #fff; }
.cs-car__btn:active { transform: scale(.94); }
.cs-car__btn[disabled] { opacity: .25; cursor: default; }
.cs-car__btn[disabled]:hover { background: none; border-color: var(--line); color: var(--ink); }
.cs-car__btn[disabled]:active { transform: none; }

/* --- Media frames --------------------------------------------------------
   A photograph, a placeholder and a diagram all sit in exactly the same 4:3
   frame, so the layout holds whatever the data file has been given. A real
   photograph is cropped into it by object-fit, which is what lets a tall app
   screenshot, a square packshot and a wide dashboard coexist without any of
   them breaking the grid. */
.cs-media { margin: 0; }
.cs-media__frame {
  display: block; position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--bone);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.cs-media__frame > svg,
.cs-media__frame > .cs-media__img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}
.cs-media__cap {
  margin-top: var(--sp-3);
  font-family: var(--font-mono); font-size: var(--t-micro);
  letter-spacing: .1em; text-transform: uppercase; color: var(--ink-40);
}

/* --- Labelled image placeholder ------------------------------------------
   What sits in the frame until the photograph exists. Deliberately not a grey
   box: it names the shot it is holding space for and carries a quiet line of
   direction, so the page reads as art-directed rather than unfinished, and so
   the data file doubles as a shot list. Set "src" on the image in
   src/data/case-studies.json and the photograph replaces all of this. */
.cs-ph {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  padding: var(--sp-5);
  text-align: center;
  background:
    radial-gradient(120% 90% at 50% 0%, rgba(255,255,255,.9) 0%, rgba(255,255,255,0) 60%),
    linear-gradient(168deg, var(--bone) 0%, var(--bone-deep) 100%);
  overflow: hidden;
}
/* A whisper of structure so the field is not flat — reads as paper, not as a
   loading state. Sits under the text and never competes with it. */
.cs-ph__grid {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(to right, var(--line-soft) 1px, transparent 1px),
    linear-gradient(to bottom, var(--line-soft) 1px, transparent 1px);
  background-size: 44px 44px;
  background-position: center;
  -webkit-mask-image: radial-gradient(80% 70% at 50% 50%, #000 0%, transparent 78%);
  mask-image: radial-gradient(80% 70% at 50% 50%, #000 0%, transparent 78%);
  opacity: .9;
  pointer-events: none;
}
.cs-ph__body {
  position: relative;
  display: flex; flex-direction: column; align-items: center;
  gap: .55rem;
  max-width: 30ch;
}
.cs-ph__mark { color: var(--ink-40); margin-bottom: .3rem; }
/* The direction: what to photograph. The readable line of the two. */
.cs-ph__ctx {
  font-size: .9375rem; line-height: 1.45;
  color: var(--ink-60); letter-spacing: -.005em;
}
/* The status, kept deliberately quiet — present so the frame can never be
   mistaken for a finished image, never loud enough to read first. */
.cs-ph__status {
  font-family: var(--font-mono); font-size: var(--t-micro);
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--ink-40); opacity: .8;
}
/* The slot number, set quietly in a corner the way a contact sheet marks a
   frame. Present for orientation, never loud enough to read first. */
.cs-ph__tag {
  position: absolute; top: var(--sp-4); right: var(--sp-4);
  font-family: var(--font-mono); font-size: var(--t-micro);
  letter-spacing: .1em; color: var(--ink-40); opacity: .65;
  font-variant-numeric: tabular-nums;
}
/* The kind of asset tints the mark, so a page of placeholders still reads as
   a varied set rather than four copies of one thing. */
.cs-ph--screenshot .cs-ph__mark { color: var(--accent); opacity: .5; }
.cs-ph--dashboard  .cs-ph__mark { color: var(--ink-60); }

.cs-card:hover .cs-ph__grid { opacity: 1; }
.cs-card:hover .cs-ph__mark { color: var(--accent); opacity: .75; }
.cs-ph__mark, .cs-ph__grid { transition: color .4s var(--ease), opacity .4s var(--ease); }

/* On a card the slot number means nothing — there is only ever one image, so
   a column of identical "01"s down the rail is noise. The frame keeps its
   direction line, which is what differentiates one card from the next. */
.cs-card__media .cs-ph__tag { display: none; }
.cs-card__media .cs-ph { padding: var(--sp-4); }
.cs-card__media .cs-ph__ctx { font-size: .875rem; }

/* --- Built-in Quick Commerce visuals ------------------------------------- */
.csv { display: block; width: 100%; height: 100%; }
.csv-bg      { fill: var(--bone); }
.csv-line    { stroke: var(--line); stroke-width: 1; }
.csv-grid    { stroke: var(--line-soft); stroke-width: 1; }
.csv-label   { font-family: var(--font-mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; fill: var(--ink-60); }
.csv-micro   { font-family: var(--font-mono); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; fill: var(--ink-60); }
.csv-micro--dim { fill: var(--ink-40); }
.csv-micro--on  { fill: var(--accent); }

.csv-tile > rect:first-child { fill: var(--paper); stroke: var(--line); }
.csv-tile--on > rect:first-child { fill: var(--paper); stroke: var(--accent); }
.csv-tile__im { fill: var(--bone-deep); }
.csv-tile__l1 { fill: var(--ink-40); }
.csv-tile__l2 { fill: var(--line); }
.csv-tile--on .csv-tile__l1 { fill: var(--ink); }

.csv-field  { fill: var(--paper); stroke: var(--line); }
.csv-stroke { stroke: var(--ink-40); stroke-width: 1.4; fill: none; }
.csv-row > rect:first-child { fill: var(--paper); stroke: var(--line); }
.csv-row--on > rect:first-child { fill: var(--paper); stroke: var(--accent); }
.csv-row__th   { fill: var(--bone-deep); }
.csv-row__name { font-family: var(--font-sans); font-size: 12px; fill: var(--ink-60); }
.csv-row--on .csv-row__name { fill: var(--ink); font-weight: 500; }
.csv-row__pos  { font-family: var(--font-mono); font-size: 12px; fill: var(--ink-40); }
.csv-row--on .csv-row__pos { fill: var(--accent); }

.csv-cell      { fill: var(--bone-deep); }
.csv-cell--on  { fill: var(--ink); }
.csv-cell--gap { fill: var(--paper); stroke: var(--accent); stroke-width: 1; stroke-dasharray: 2.5 2.5; }

.csv-bars rect { fill: var(--bone-deep); }
.csv-plot { stroke: var(--accent); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.csv-dot  { fill: var(--accent); }

.csv-ring { fill: none; stroke: var(--line); }
.csv-ring--soft { stroke: var(--line-soft); }
.csv-node { fill: var(--ink-40); }
.csv-node--on { fill: var(--accent); }
.csv-path { stroke: var(--accent); stroke-width: 1.5; fill: none; }
.csv-path--soft { stroke: var(--line); stroke-width: 1; }
.csv-hub { fill: var(--ink); }
.csv-cluster circle { fill: var(--ink-40); }

/* --- Case study card — one design, used everywhere ----------------------- */
.cs-card {
  display: flex; flex-direction: column;
  width: 100%;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  transition: border-color .4s var(--ease), transform .4s var(--ease);
}
.cs-card:hover { border-color: var(--ink); transform: translateY(-3px); }
/* 4:3 rather than square: it is the shape the built-in visuals are drawn at,
   so they fill the frame exactly instead of sitting in a band of empty
   background — and it keeps the image to roughly half the card's height
   rather than three quarters of it. */
.cs-card__media {
  display: block; position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--bone);
  border-bottom: 1px solid var(--line);
}
.cs-card__media > svg,
.cs-card__media > .cs-media__img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
}
.cs-card__body {
  display: flex; flex-direction: column; gap: .3rem;
  padding: clamp(1.1rem, .9rem + .7vw, 1.5rem);
  flex: 1;
}
.cs-card__logo {
  display: block; height: 30px; margin-bottom: var(--sp-3);
}
.cs-card__logo img { height: 100%; width: auto; object-fit: contain; }
.cs-card__name {
  font-size: clamp(1.15rem, 1.05rem + .4vw, 1.4rem);
  font-weight: 500; letter-spacing: -.03em; line-height: 1.15;
}
.cs-card__industry { font-size: .875rem; color: var(--ink-60); }
.cs-card__go {
  display: inline-flex; align-items: center; gap: .45rem;
  margin-top: var(--sp-4);
  font-size: .875rem; font-weight: 500; color: var(--ink-60);
  transition: color .35s var(--ease), gap .35s var(--ease);
}
.cs-card:hover .cs-card__go { color: var(--accent); gap: .7rem; }

/* --- Case study detail hero ---------------------------------------------- */
.cs-dhero {
  display: grid;
  grid-template-columns: minmax(0, 5.4fr) minmax(0, 6.6fr);
  gap: clamp(2rem, 1.25rem + 3.5vw, 4.5rem);
  align-items: center;
}
.cs-dhero__cat { margin-bottom: var(--sp-4); }
.cs-dhero__headline {
  font-size: clamp(2rem, 1.3rem + 2.8vw, 3.6rem);
  line-height: 1.05; letter-spacing: -.038em; font-weight: 400;
  margin-bottom: var(--sp-5);
}
.cs-dhero__summary {
  font-size: var(--t-lead); line-height: 1.5; letter-spacing: -.012em;
  color: var(--ink-60); max-width: 46ch;
}
.cs-dhero__meta {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: var(--sp-4) var(--sp-6);
  margin-top: var(--sp-6);
}
.cs-dhero__jump { color: var(--ink-60); }

/* --- Quick Look ----------------------------------------------------------
   Two points on the left, two on the right — deliberately not a four-card
   grid. Read down a column and it pairs the brand with its opportunity, then
   the work with its outcome. */
.cs-quick {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}
.cs-quick__col:first-child {
  border-right: 1px solid var(--line);
  padding-right: clamp(1.5rem, 1rem + 2.5vw, 3.5rem);
}
.cs-quick__col:last-child { padding-left: clamp(1.5rem, 1rem + 2.5vw, 3.5rem); }
.cs-quick__item {
  padding-block: clamp(1.5rem, 1rem + 1.5vw, 2.25rem);
  border-top: 1px solid var(--line);
}
.cs-quick__col > .cs-quick__item:first-child { border-top: 0; padding-top: 0; }
.cs-quick__idx {
  font-family: var(--font-mono); font-size: var(--t-micro);
  letter-spacing: .12em; color: var(--accent);
  margin-bottom: var(--sp-3);
}
.cs-quick__title {
  font-size: clamp(1.15rem, 1rem + .7vw, 1.6rem);
  font-weight: 400; letter-spacing: -.03em; line-height: 1.15;
  margin-bottom: var(--sp-3);
}
.cs-quick__body { color: var(--ink-60); font-size: .9375rem; line-height: 1.6; max-width: 48ch; }

/* --- Process tabs --------------------------------------------------------
   The same tab mechanic the site already uses for the engagement models, so
   a visitor meets one interaction pattern, not two. */
.cs-tabs {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  margin-bottom: clamp(2rem, 1.5rem + 2.5vw, 3.5rem);
}
.cs-tabs::after {
  content: '';
  position: absolute; left: 0; bottom: -1px;
  height: 2px;
  width: var(--tab-w, 33.333%);
  transform: translateX(var(--tab-x, 0px));
  background: var(--accent);
  transition: transform .42s var(--ease), width .42s var(--ease);
}
.cs-tabs:not(.is-ready)::after { display: none; }
.cs-tab {
  display: flex; flex-direction: column; gap: .5rem;
  padding: clamp(1.1rem, .8rem + 1vw, 1.65rem) clamp(1rem, .6rem + 1vw, 1.65rem);
  background: none; border: 0; border-left: 1px solid var(--line);
  text-align: left; cursor: pointer; color: var(--ink-40); font: inherit;
  transition: color .3s var(--ease), background-color .3s var(--ease);
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
.cs-tab:first-child { border-left: 0; }
.cs-tab:hover { color: var(--ink-60); background: var(--bone); }
.cs-tab[aria-selected="true"] { color: var(--ink); background: var(--paper); }
.cs-tab:focus-visible { outline: 2px solid var(--accent); outline-offset: -3px; }
.cs-tab__index {
  font-family: var(--font-mono); font-size: var(--t-micro);
  letter-spacing: .12em; color: var(--ink-40);
  transition: color .3s var(--ease);
}
.cs-tab[aria-selected="true"] .cs-tab__index { color: var(--accent); }
.cs-tab__name {
  font-size: clamp(1rem, .92rem + .4vw, 1.3rem);
  font-weight: 500; letter-spacing: -.025em; line-height: 1.15;
}

.cs-panel[hidden] { display: none; }
.cs-panel { animation: csPanelIn .42s var(--ease) both; }
@keyframes csPanelIn { from { opacity: 0; transform: translateY(10px); } }

.cs-panel__grid {
  display: grid;
  grid-template-columns: minmax(0, 6fr) minmax(0, 6fr);
  gap: clamp(2rem, 1rem + 4vw, 4.5rem);
  align-items: start;
}
.cs-panel__lead {
  font-size: var(--t-lead); line-height: 1.5; letter-spacing: -.015em;
  color: var(--ink); margin-bottom: var(--sp-5);
  max-width: 46ch;
}
.cs-panel__list { display: grid; gap: var(--sp-4); }
.cs-panel__list li {
  position: relative; padding-left: 1.35rem;
  font-size: .9375rem; line-height: 1.6; color: var(--ink-60);
}
.cs-panel__list li::before {
  content: ''; position: absolute; left: 0; top: .72em;
  width: 8px; height: 1px; background: var(--accent);
}
.cs-panel__levers { margin-top: var(--sp-6); }

/* --- Diagnostic matrix --------------------------------------------------- */
.cs-matrix { border-top: 1px solid var(--line); }
.cs-matrix__head {
  display: flex; justify-content: space-between; gap: var(--sp-4);
  padding-block: .7rem;
  border-bottom: 1px solid var(--line);
  font-family: var(--font-mono); font-size: var(--t-micro);
  letter-spacing: .1em; text-transform: uppercase; color: var(--ink-40);
}
.cs-matrix__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 104px);
  gap: var(--sp-4);
  align-items: center;
  padding-block: .85rem;
  border-bottom: 1px solid var(--line);
}
.cs-matrix__axis { font-size: .9375rem; letter-spacing: -.01em; }
.cs-matrix__scale { display: inline-flex; gap: 4px; }
.cs-matrix__dot { width: 20px; height: 6px; border-radius: 1px; background: var(--line); }
.cs-matrix__dot.is-on { background: var(--accent); }
.cs-matrix__val {
  font-family: var(--font-mono); font-size: .6875rem;
  letter-spacing: .06em; text-transform: uppercase;
  color: var(--ink-40); text-align: right;
}

/* --- Execution flow ------------------------------------------------------ */
.cs-flow { border-top: 1px solid var(--line); }
.cs-flow__step {
  position: relative;
  display: flex; align-items: center; gap: var(--sp-4);
  padding-block: clamp(.95rem, .75rem + .7vw, 1.35rem);
  border-bottom: 1px solid var(--line);
}
.cs-flow__idx {
  font-family: var(--font-mono); font-size: var(--t-micro);
  letter-spacing: .12em; color: var(--accent); flex: none;
}
.cs-flow__name {
  font-size: clamp(1.05rem, .95rem + .5vw, 1.4rem);
  letter-spacing: -.028em; line-height: 1.15;
}
/* Rotated 45deg, a 7px square needs ~10px of box — pinned at 2px it clipped
   against the panel edge. */
.cs-flow__step::after {
  content: ''; position: absolute; right: 7px; top: 50%;
  width: 7px; height: 7px; margin-top: -4px;
  border-right: 1px solid var(--ink-40);
  border-bottom: 1px solid var(--ink-40);
  transform: rotate(-45deg);
  opacity: .5;
}
.cs-flow__step:last-child::after { display: none; }

/* --- The result ---------------------------------------------------------- */
.cs-result .placeholder-note { max-width: 70ch; }
.cs-result__viz { margin-top: clamp(2rem, 1.5rem + 2vw, 3.25rem); }

/* --- Founder ------------------------------------------------------------- */
.cs-founder {
  display: grid;
  grid-template-columns: minmax(0, 4.2fr) minmax(0, 7.8fr);
  gap: clamp(2rem, 1.5rem + 3vw, 4.5rem);
  align-items: start;
}
.cs-founder__img,
.cs-founder__ph {
  display: block; width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--bone);
}
.cs-founder__ph {
  display: grid; place-items: center; align-content: center; gap: .6rem;
}
.cs-founder__mono {
  font-size: clamp(2.4rem, 1.8rem + 2vw, 3.4rem);
  letter-spacing: -.05em; color: var(--ink-40); line-height: 1;
}
.cs-founder__phnote {
  font-family: var(--font-mono); font-size: var(--t-micro);
  letter-spacing: .1em; text-transform: uppercase; color: var(--ink-40);
}
.cs-founder__name {
  font-size: clamp(1.25rem, 1.1rem + .7vw, 1.65rem);
  font-weight: 500; letter-spacing: -.03em; line-height: 1.15;
}
.cs-founder__role {
  font-family: var(--font-mono); font-size: var(--t-micro);
  letter-spacing: .1em; text-transform: uppercase; color: var(--ink-40);
  margin-top: var(--sp-2);
}
.cs-founder__quote {
  margin: var(--sp-6) 0;
  padding-left: var(--sp-5);
  border-left: 2px solid var(--accent);
  font-size: clamp(1.15rem, 1rem + .8vw, 1.6rem);
  line-height: 1.3; letter-spacing: -.028em;
  max-width: 34ch;
}
.cs-founder__body {
  color: var(--ink-60); font-size: .9375rem; line-height: 1.65;
  max-width: 62ch;
}
.cs-founder__body + .cs-founder__body { margin-top: var(--sp-4); }
.cs-founder__label {
  font-family: var(--font-mono); font-size: var(--t-micro);
  letter-spacing: .12em; text-transform: uppercase; color: var(--ink);
  margin-top: var(--sp-6); margin-bottom: var(--sp-3);
}

/* --- FAQ -----------------------------------------------------------------
   Native <details>, so every answer is readable with JavaScript switched off
   and every question is still in the page for search engines. The script only
   adds the height animation. */
.cs-faq { border-top: 1px solid var(--line); }
.cs-faq__item { border-bottom: 1px solid var(--line); }
.cs-faq__q {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--sp-5);
  padding-block: clamp(1.1rem, .9rem + .8vw, 1.6rem);
  cursor: pointer; list-style: none;
  font-size: clamp(1.02rem, .95rem + .4vw, 1.25rem);
  letter-spacing: -.022em; line-height: 1.3;
  transition: color .3s var(--ease);
  -webkit-tap-highlight-color: transparent;
}
.cs-faq__q::-webkit-details-marker { display: none; }
.cs-faq__q:hover { color: var(--accent); }
.cs-faq__q:focus-visible { outline: 2px solid var(--accent); outline-offset: -3px; }
.cs-faq__icon { position: relative; width: 13px; height: 13px; flex: none; }
.cs-faq__icon::before,
.cs-faq__icon::after {
  content: ''; position: absolute; background: var(--ink-40);
  transition: transform .32s var(--ease), background-color .32s var(--ease);
}
.cs-faq__icon::before { left: 0; right: 0; top: 6px; height: 1px; }
.cs-faq__icon::after  { top: 0; bottom: 0; left: 6px; width: 1px; }
.cs-faq__item[open] .cs-faq__icon::after { transform: scaleY(0); }
.cs-faq__item[open] .cs-faq__icon::before { background: var(--accent); }
.cs-faq__a { overflow: hidden; }
.cs-faq__a p {
  padding-bottom: clamp(1.1rem, .9rem + .8vw, 1.6rem);
  padding-right: var(--sp-6);
  color: var(--ink-60); font-size: .9375rem; line-height: 1.65;
  max-width: 72ch;
}

/* --- Short closing CTA — not a second hero ------------------------------- */
.cs-cta { padding-block: clamp(2.75rem, 2rem + 3vw, 4.5rem); }
.cs-cta__grid {
  display: grid;
  grid-template-columns: minmax(0, 6.6fr) minmax(0, 5.4fr);
  gap: clamp(1.5rem, 1rem + 3vw, 4rem);
  align-items: end;
}
.cs-cta__title {
  font-size: clamp(1.7rem, 1.2rem + 2vw, 2.75rem);
  line-height: 1.08; letter-spacing: -.035em; font-weight: 400;
}
.cs-cta__body {
  color: var(--inv-fg-60); font-size: var(--t-lead);
  line-height: 1.5; letter-spacing: -.012em;
  margin-bottom: var(--sp-5); max-width: 38ch;
}

/* --- Index page bits ----------------------------------------------------- */
.cs-impact__note {
  margin-top: clamp(2rem, 1.5rem + 2vw, 3rem);
  color: rgba(255, 255, 255, .78);
  font-size: .9375rem; line-height: 1.65;
  max-width: 78ch;
}
.cs-impact__meth { display: block; margin-top: var(--sp-3); color: var(--inv-fg-40); }

.cs-more__foot {
  display: flex; flex-wrap: wrap; gap: var(--sp-5);
  justify-content: space-between;
  margin-top: clamp(2rem, 1.5rem + 2vw, 3rem);
  padding-top: var(--sp-5);
  border-top: 1px solid var(--line);
}

/* ==========================================================================
   12a · CASE STUDIES — RESPONSIVE
   Recomposed for the phone rather than shrunk. Ordered widest-first.
   ========================================================================== */

/* --- Tablet -------------------------------------------------------------- */
@media (max-width: 1024px) {
  /* The site's own `.split { grid-template-columns: 1fr }` at this width is
     outranked by `.page-hero .split`, so an inner-page hero never stacks.
     Same pre-existing global bug Our Services works around; corrected here
     for these pages only, because shared CSS is out of scope. */
  .cs-page .page-hero .cs-hero__grid {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--sp-5);
  }

  /* Same pre-existing bug, second variant: `.section-head.split` (0,2,0) also
     outranks the global `.split { grid-template-columns: 1fr }`, so every
     section head on the site stays in two cramped columns on a phone — about
     175px and 143px wide at 390px. Corrected here for these pages only;
     who-we-are, platforms and the homepage still have it. Noted in the README. */
  .cs-page .section-head.split {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--sp-5);
  }

  .cs-feature,
  .cs-dhero {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--sp-6);
  }
  .cs-panel__grid { grid-template-columns: minmax(0, 1fr); gap: var(--sp-6); }
  .cs-panel__viz { max-width: 560px; }
  .cs-founder { grid-template-columns: minmax(0, 1fr); gap: var(--sp-6); }
  .cs-founder__media { max-width: 320px; }
  .cs-cta__grid { grid-template-columns: minmax(0, 1fr); gap: var(--sp-5); align-items: start; }
  .cs-car--cards .cs-car__slide { flex-basis: 46%; }
}

/* --- Small tablet: Quick Look becomes one column -------------------------- */
@media (max-width: 900px) {
  .cs-quick { grid-template-columns: minmax(0, 1fr); }
  .cs-quick__col:first-child { border-right: 0; padding-right: 0; }
  .cs-quick__col:last-child { padding-left: 0; }
  /* Stacked, 03 needs the rule that its column position was providing. */
  .cs-quick__col:last-child > .cs-quick__item:first-child {
    border-top: 1px solid var(--line);
    padding-top: clamp(1.5rem, 1rem + 1.5vw, 2.25rem);
  }
}

/* --- Phones -------------------------------------------------------------- */
@media (max-width: 680px) {
  .cs-page .cs-hero {
    padding-top: calc(var(--nav-h) + var(--sp-5));
    padding-bottom: var(--sp-5);
  }
  .cs-page .cs-hero .breadcrumb { margin-bottom: var(--sp-4); }
  .cs-page .cs-hero__grid { gap: var(--sp-4); }

  .cs-secline { padding-top: var(--sp-4); margin-bottom: var(--sp-5); }

  /* Hero: words lead, the carousel closes — the same order the homepage uses. */
  .cs-dhero { gap: var(--sp-5); }
  .cs-dhero__meta { margin-top: var(--sp-5); gap: var(--sp-3) var(--sp-5); }
  .cs-feature__brand { margin-bottom: var(--sp-4); }
  .cs-feature__summary { margin-bottom: var(--sp-5); max-width: none; }
  .cs-dhero__summary { max-width: none; }

  /* Carousels bleed to the gutter so the next card peeks at the screen edge.
     scroll-padding matters as much as padding here: a snap container snaps to
     its snapport, not its padding box, so without this the first slide gets
     pulled flush to the screen edge and sits 20px left of the text above it. */
  .cs-car__viewport {
    margin-inline: calc(var(--gutter) * -1);
    padding-inline: var(--gutter);
    scroll-padding-inline: var(--gutter);
  }
  .cs-car--cards .cs-car__slide { flex-basis: 78%; }

  /* The control strip stacks: the label gets its own line so it is never
     squeezed to two characters, then the controls sit in a row beneath it
     with the arrows pushed to the far edge where a thumb reaches them. */
  .cs-car__foot {
    flex-direction: column;
    align-items: stretch;
    gap: var(--sp-3);
    margin-top: var(--sp-4);
    padding-top: var(--sp-3);
  }
  .cs-car--cards .cs-car__foot { align-items: stretch; }
  .cs-car__cap { font-size: .9375rem; }
  .cs-car__ctrl { justify-content: space-between; width: 100%; gap: var(--sp-3); }
  .cs-car__btn { width: 46px; height: 46px; }

  /* Taller segments on a phone — they double as the tap target for jumping to
     a slide. Width is shared rather than fixed, so a rail of five segments
     cannot push the row wider than the screen the way a fixed width would. */
  .cs-car__prog { gap: 5px; flex: 1 1 auto; min-width: 0; }
  .cs-car__seg {
    flex: 1 1 0; width: auto; min-width: 13px; max-width: 34px;
    height: 28px;
  }

  /* The placeholder frame is shorter on a phone — a 4:3 block at full width
     pushes everything below it off the screen. Slightly wider than tall keeps
     the hero readable without scrolling twice to reach the copy. */
  .cs-dhero__media .cs-media__frame,
  .cs-feature__media .cs-media__frame { aspect-ratio: 5 / 4; }
  .cs-ph { padding: var(--sp-4); }
  .cs-ph__ctx { font-size: .875rem; }
  .cs-ph__grid { background-size: 36px 36px; }
}

/* --- Small phones -------------------------------------------------------- */
@media (max-width: 430px) {
  /* At this width the numeric counter is the first thing to go: the segment
     bar already shows both position and length, so "3 / 5" is saying the same
     thing again in the space the arrows need. */
  .cs-car__count { display: none; }
  .cs-car__ctrl { gap: var(--sp-4); }

  /* PROCESS TABS — a segmented selector that scrolls, with snapping. Mirrors
     the engagement-model selector so the gesture is already familiar. */
  .cs-tabs {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
    margin-inline: calc(var(--gutter) * -1);
    padding-inline: var(--gutter);
    border-top: 0; border-bottom: 0;
    margin-bottom: var(--sp-5);
  }
  .cs-tabs::-webkit-scrollbar { display: none; }
  .cs-tabs::after { display: none; }      /* the moving rule needs a grid */
  .cs-tab {
    flex: 0 0 72%;
    scroll-snap-align: center;
    border-left: 0;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    margin-right: .6rem;
    min-height: 88px;
    justify-content: center;
  }
  .cs-tab:last-child { margin-right: 0; }
  .cs-tab[aria-selected="true"] {
    border-color: var(--accent);
    box-shadow: inset 0 0 0 1px var(--accent);
    background: var(--accent-soft);
  }

  /* The hint sits between the tab rail and the panel; without this it butts
     straight up against the first bullet. */
  .cs-page .swipe-hint { margin-bottom: var(--sp-5); }

  .cs-panel__lead { margin-bottom: var(--sp-4); max-width: none; }
  .cs-panel__viz { max-width: none; margin-top: var(--sp-6); }
  .cs-panel__levers { margin-top: var(--sp-5); }

  .cs-matrix__row { grid-template-columns: minmax(0, 1fr) auto; gap: var(--sp-3); }
  .cs-matrix__val { display: none; }      /* the scale already says it */
  .cs-matrix__head span:last-child { display: none; }

  .cs-founder__media { max-width: 240px; }
  .cs-founder__quote { margin: var(--sp-5) 0; padding-left: var(--sp-4); max-width: none; }
  .cs-founder__body { max-width: none; }

  .cs-faq__a p { padding-right: 0; }

  .cs-cta .btn { width: 100%; min-height: 52px; }
  .cs-cta__body { max-width: none; }

  .cs-more__foot { gap: var(--sp-4); }
}

/* --- Small phones -------------------------------------------------------- */
@media (max-width: 380px) {
  .cs-car--cards .cs-car__slide { flex-basis: 86%; }
  .cs-tab { flex-basis: 82%; }
  .cs-feature__logo { width: 44px; height: 44px; }
}

/* --- Reduced motion ------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  .cs-panel { animation: none; }
  .cs-tabs::after { transition: none; }
  .cs-car__viewport { scroll-behavior: auto; }
}