/* =========================================================================
   markiank.com — Markian Kinal Design System
   Every value below comes from a token. Add a token before adding a value.
   ========================================================================= */
:root {
  /* ---- Color: surfaces ---- */
  --surface: #ffffff;
  --surface-page: #fafaf8;     /* warm near-white page; lets white product UI separate without borders */
  --surface-soft: #f5f6fa;      /* quiet section bands */
  --surface-stage: #eef0f6;     /* neutral field behind product UI */
  --surface-tint: #eef1ff;      /* accent-tinted fills (icons, hover) */
  --night: #000000;
  --navy: #05081c;
  --glow: #1b2a9e;

  /* ---- Color: text (all pairs checked for WCAG AA) ----
     on white:  primary 16.3 · secondary 8.8 · muted 6.6 · accent 5.9
     on stage:  primary 14.3 · secondary 7.7 · muted 5.8 · accent 5.2
     on black:  on-dark 21 · on-dark-muted 12.6 · accent-on-dark 9.6
     on glow:   on-dark 11.2 · on-dark-muted 6.8 · accent-on-dark 5.2 */
  --text-primary: #231f20;
  --text-secondary: #4f4949;
  --text-muted: #625c5c;
  --text-on-dark: #ffffff;
  --text-on-dark-muted: #c4c8dc;
  --accent: #2f4bff;
  --accent-hover: #1f38e6;
  --accent-on-dark: #9aabff;
  --on-accent: #ffffff;
  --error-on-dark: #ff9b9b;

  /* ---- Color: lines ---- */
  --line: #e3e1e1;
  --line-strong: var(--text-primary);
  --line-on-dark: rgba(255,255,255,0.16);
  --line-diagram: #b9bdd6;          /* decorative only */
  --indicator-idle: #8a8484;
  --bullet: #8f97bd;                /* muted blue-grey list marker (decorative) */
  /* one accent rule for every blue line: quotes, leads, outcomes, active nav (3.6:1 on black, 5.9:1 on white) */
  --rule-accent: 3px solid var(--accent);        /* non-text UI, 3.2:1+ on light surfaces */

  /* ---- Type: families & weights ---- */
  --font-display: "Mona Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-text: "Mona Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700;
  --display-weight: var(--fw-semibold);

  /* ---- Type: scale (size / line-height pairs) ---- */
  --fs-display: clamp(40px, 3.4vw + 20px, 72px);   --lh-display: 1.05;
  --fs-h1:      clamp(36px, 2.6vw + 18px, 58px);   --lh-h1: 1.08;
  --fs-h2:      clamp(30px, 1.4vw + 20px, 44px);   --lh-h2: 1.15;
  --fs-h3:      clamp(22px, 0.6vw + 18px, 30px);   --lh-h3: 1.25;
  --fs-lead:    clamp(21px, 0.6vw + 16px, 27px);   --lh-lead: 1.45;
  --fs-lead-sm: clamp(19px, 0.3vw + 17px, 22px);   /* challenge statements */
  --fs-concept: clamp(24px, 0.6vw + 20px, 31px);   --lh-concept: 1.2;   /* equivalent concept labels */
  --fs-metric:  clamp(36px, 1.6vw + 24px, 48px);   --lh-metric: 1.05;   /* numeric figures */
  --fs-body-lg: clamp(18px, 0.2vw + 17px, 20px);   --lh-body-lg: 1.55;
  --fs-body:    clamp(17px, 0.1vw + 16px, 18px);   --lh-body: 1.6;
  --fs-small:   clamp(15px, 0.1vw + 14px, 16px);   --lh-small: 1.5;
  --fs-caption: 14px;                               --lh-caption: 1.5;
  --fs-eyebrow: clamp(13px, 0.2vw + 12px, 15px);   --ls-eyebrow: 0.14em;   --lh-eyebrow: 1.4;   /* section labels: 13 mobile → 15 desktop */
  --ls-tight: -0.02em; --ls-snug: -0.01em;

  /* ---- Measures ---- */
  --measure: 66ch;         /* long-form body */
  --measure-lead: 36ch;    /* lead / challenge statements */
  --measure-intro: 60ch;   /* section intros */

  /* ---- Spacing scale ---- */
  --sp-8: 8px; --sp-12: 12px; --sp-16: 16px; --sp-24: 24px; --sp-32: 32px; --sp-48: 48px;
  --sp-64: 64px; --sp-80: 80px; --sp-96: 96px; --sp-120: 120px; --sp-144: 144px;
  --section: clamp(80px, 7vw + 50px, 160px);        /* major section separation: 80 → 104 → 160 */
  --decision-gap: clamp(80px, 6vw + 52px, 144px);   /* between design decisions */
  --section-band: clamp(72px, 4vw + 56px, 120px);    /* internal padding of full-bleed bands */
  --stack-heading: var(--sp-12);                     /* eyebrow → heading */
  --stack-intro: 20px;                               /* heading → intro */
  --stack-content: clamp(32px, 1.2vw + 28px, 48px);  /* intro → content/visual */

  /* ---- Layout ---- */
  --container: 1360px;
  --pad: clamp(24px, 4.4vw + 7px, 80px);             /* 24 mobile → 48 tablet → 80 desktop */
  --gutter: max(var(--pad), calc((100vw - var(--container)) / 2));
  --col-gap: clamp(24px, 1vw + 18px, 32px);
  --split-gap: clamp(40px, 5vw, 96px);

  /* ---- Shape & elevation ---- */
  --radius-sm: 4px; --radius-md: 6px; --radius-lg: 8px; --radius-photo: 16px; --radius-pill: 999px;
  --shadow-screen: 0 1px 2px rgba(5,8,28,0.08), 0 18px 40px -16px rgba(5,8,28,0.28);
  --shadow-float: 0 16px 40px rgba(5,8,28,0.18);
  --shadow-screen-feature: 0 0 0 1px rgba(5,8,28,0.06), 0 24px 56px -20px rgba(5,8,28,0.32), 0 6px 16px -8px rgba(5,8,28,0.12);
  --shadow-screen-light: 0 0 0 1px rgba(5,8,28,0.06), 0 12px 32px -14px rgba(5,8,28,0.22);

  /* ---- Media ---- */
  --stage-pad: clamp(24px, 2vw + 12px, 40px);
  --media-max-h: 820px;
  --phone-w: clamp(160px, 14vw, 240px);

  --tap: 44px;
  --row-pad: clamp(64px, 4vw + 40px, 112px);      /* vertical interval between featured stories */
  --ease-out: cubic-bezier(.22,.61,.36,1);
  --reveal-shift: 40px;
  color-scheme: light;
}

/* =========================== Base =========================== */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; overflow-x: clip; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { transition: none !important; animation: none !important; } }
body { margin: 0; overflow-x: clip; background: var(--surface-page); color: var(--text-primary); font-family: var(--font-text); font-size: var(--fs-body); line-height: var(--lh-body); -webkit-font-smoothing: antialiased; }
img { max-width: 100%; display: block; }
p { margin: 0; }
a { color: var(--accent); text-underline-offset: 4px; }
a:hover { color: var(--accent-hover); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: var(--radius-sm); }
.night :focus-visible, .hero :focus-visible, .site-nav :focus-visible, .site-footer :focus-visible { outline-color: var(--accent-on-dark); }
.skip { position: absolute; left: -9999px; top: var(--sp-8); z-index: 50; background: var(--accent); color: var(--on-accent); padding: var(--sp-12) var(--sp-16); border-radius: var(--radius-pill); }
.skip:focus { left: var(--sp-16); }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* =========================== Layout =========================== */
.wrap { padding-inline: var(--gutter); }
.section { padding-block: var(--section); }
/* consecutive plain sections share one gap instead of doubling it */
.section:not(.night):not(.soft) + .section:not(.night):not(.soft) { padding-top: 0; }
.night.section, .soft.section { padding-block: var(--section-band); }
.stack { display: flex; flex-direction: column; gap: var(--stack-content); }
.stack--tight { gap: var(--sp-24); }
.soft { background: var(--surface-soft); }
.night { background-color: var(--night); background-image: radial-gradient(800px 420px at 80% 0%, var(--glow) 0%, transparent 70%); color: var(--text-on-dark); }

/* =========================== Type roles =========================== */
h1, h2, h3 { font-family: var(--font-display); font-weight: var(--display-weight); text-wrap: balance; margin: 0; }
h2 { font-size: var(--fs-h2); line-height: var(--lh-h2); letter-spacing: var(--ls-tight); }
h3 { font-size: var(--fs-h3); line-height: var(--lh-h3); letter-spacing: var(--ls-snug); }
.eyebrow, .label { font-family: var(--font-text); font-size: var(--fs-eyebrow); line-height: var(--lh-eyebrow); font-weight: var(--fw-bold); letter-spacing: var(--ls-eyebrow); text-transform: uppercase; color: var(--accent); margin: 0; }
.label { color: var(--text-muted); }
.night .eyebrow, .hero .eyebrow, .site-footer .eyebrow { color: var(--accent-on-dark); }
.lead-text { font-family: var(--font-display); font-size: var(--fs-lead); line-height: var(--lh-lead); font-weight: var(--fw-regular); letter-spacing: var(--ls-snug); max-width: var(--measure-lead); }
.body-lg { font-size: var(--fs-body-lg); line-height: var(--lh-body-lg); }
.caption { font-size: var(--fs-caption); line-height: var(--lh-caption); color: var(--text-muted); }
.kicker { font-size: var(--fs-caption); line-height: var(--lh-caption); font-weight: var(--fw-semibold); letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-muted); }
.night .kicker { color: var(--text-on-dark-muted); }

.heading { display: flex; flex-direction: column; gap: var(--stack-heading); }
.heading p:not(.eyebrow) { margin-top: calc(var(--stack-intro) - var(--stack-heading)); font-size: var(--fs-body-lg); line-height: var(--lh-body-lg); color: var(--text-secondary); max-width: var(--measure-intro); }
.night .heading p:not(.eyebrow) { color: var(--text-on-dark-muted); }
.heading__title-row { display: flex; justify-content: space-between; align-items: center; gap: var(--sp-16) var(--sp-32); flex-wrap: wrap; }
.heading-row { display: flex; justify-content: space-between; align-items: flex-end; gap: var(--sp-32); flex-wrap: wrap; }
@media (min-width: 1180px) { .heading--oneline p:not(.eyebrow) { max-width: none; white-space: nowrap; } }

/* =========================== Buttons & links =========================== */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-8); min-height: 52px; padding: 0 var(--sp-32); border-radius: var(--radius-pill); font-size: var(--fs-small); font-weight: var(--fw-semibold); text-decoration: none; border: 1px solid transparent; white-space: nowrap; }
.btn--primary, .btn--ghost, .btn--outline { position: relative; overflow: hidden; isolation: isolate; transition: background .25s ease, border-color .25s ease, box-shadow .25s ease, color .25s ease; }
.btn--primary::after, .btn--ghost::after, .btn--outline::after { content: ""; position: absolute; top: -50%; left: -60%; width: 45%; height: 200%; z-index: -1; pointer-events: none; background: linear-gradient(100deg, transparent 0%, rgba(255,255,255,0.35) 50%, transparent 100%); transform: translateX(-120%) rotate(12deg); transition: transform .7s ease; }
.btn--outline::after { background: linear-gradient(100deg, transparent 0%, rgba(47,75,255,0.16) 50%, transparent 100%); }
.btn--primary:hover::after, .btn--ghost:hover::after, .btn--outline:hover::after, .btn--primary:focus-visible::after, .btn--ghost:focus-visible::after, .btn--outline:focus-visible::after { transform: translateX(420%) rotate(12deg); }
.btn--primary:hover { box-shadow: inset 0 1px 0 rgba(255,255,255,0.35), 0 10px 28px -10px rgba(47,75,255,0.75); }
.btn--ghost:hover { background: rgba(154,171,255,0.12); box-shadow: inset 0 1px 0 rgba(255,255,255,0.22), 0 10px 28px -12px rgba(47,75,255,0.6); }
.btn--outline:hover { box-shadow: inset 0 1px 0 rgba(255,255,255,0.6), 0 8px 22px -12px rgba(47,75,255,0.5); }
.btn--primary { background: var(--accent); color: var(--on-accent); border-color: var(--accent); }
.btn--primary:hover { background: var(--accent-hover); color: var(--on-accent); }
.btn--ghost { color: var(--text-on-dark); border: 1.5px solid rgba(255,255,255,0.72); }
.btn--ghost:hover { color: var(--text-on-dark); border-color: var(--text-on-dark); }
.btn--outline { color: var(--accent); border-color: var(--accent); min-height: 48px; padding: 0 var(--sp-24); }
.btn--outline:hover { background: var(--surface-tint); }
.btn--sm { min-height: var(--tap); padding: 0 22px; }
.link { display: inline-flex; align-items: center; gap: var(--sp-8); min-height: var(--tap); font-size: var(--fs-small); font-weight: var(--fw-semibold); text-decoration: underline; text-decoration-color: transparent; color: var(--accent); }
.link:hover { text-decoration-color: currentColor; }
.btn-row { display: flex; gap: var(--sp-12); flex-wrap: wrap; }
.hero__body > .btn-row { margin-top: var(--sp-16); }
@media (max-width: 560px) { .hero__body > .btn-row { flex-wrap: nowrap; width: 100%; max-width: 400px; } .hero__body > .btn-row .btn { flex: 1 1 0; min-width: 0; padding: 0 var(--sp-16); } }
.badge { display: inline-flex; align-items: center; min-height: 24px; padding: 0 10px; border-radius: var(--radius-pill); border: 1px solid var(--accent); color: var(--accent); font-size: 12px; font-weight: var(--fw-bold); letter-spacing: 0.06em; text-transform: uppercase; }

/* =========================== Card (use sparingly) =========================== */
.card { display: flex; flex-direction: column; gap: var(--sp-8); padding: var(--sp-32); border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); }
.card strong { font-size: var(--fs-body); line-height: 1.35; font-weight: var(--fw-semibold); }
.card span { font-size: var(--fs-small); line-height: var(--lh-small); color: var(--text-secondary); }
.cards { display: grid; grid-template-columns: repeat(var(--n, 3), minmax(0, 1fr)); gap: var(--col-gap); }
@media (max-width: 860px) { .cards { grid-template-columns: minmax(0, 1fr); } }

/* =========================== Nav =========================== */
.site-nav { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 20; min-height: 88px; padding-inline: var(--gutter); display: flex; align-items: center; justify-content: space-between; gap: var(--sp-24); background-color: var(--night); background-image: radial-gradient(700px 180px at 12% 0%, var(--glow) 0%, transparent 70%); border-bottom: 1px solid var(--line-on-dark); }
.site-nav { transition: transform 260ms var(--ease-out); will-change: transform; }
.site-nav--hidden { transform: translateY(-100%); }
.site-nav__logo { font-family: var(--font-display); font-weight: var(--display-weight); font-size: 24px; letter-spacing: var(--ls-snug); white-space: nowrap; color: var(--text-on-dark); text-decoration: none; }
.site-nav__logo:hover { color: var(--text-on-dark); }
.site-nav__logo { display: inline-flex; flex-direction: column; gap: 2px; line-height: 1.15; }
.site-nav__role { font-family: var(--font-text); font-size: 12px; line-height: 1.3; font-weight: var(--fw-semibold); letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-on-dark-muted); }
.site-nav__links { display: flex; gap: 40px; align-items: center; }
.site-nav__link { display: inline-flex; align-items: center; min-height: var(--tap); color: var(--text-on-dark-muted); text-decoration: none; font-size: var(--fs-small); font-weight: var(--fw-medium); border-bottom: 2px solid transparent; }
.site-nav__link:hover { color: var(--text-on-dark); }
.site-nav__link[aria-current="page"] { color: var(--text-on-dark); font-weight: var(--fw-bold); border-bottom: var(--rule-accent); }
.site-nav__toggle { display: none; width: var(--tap); height: var(--tap); border-radius: var(--radius-pill); border: 1px solid var(--line-on-dark); background: transparent; color: var(--text-on-dark); align-items: center; justify-content: center; cursor: pointer; }
@media (max-width: 1024px) and (min-width: 761px) { .site-nav__links { gap: var(--sp-24); } .site-nav__role { font-size: 11px; } }
/* Case Studies dropdown */
.nav-menu { position: relative; display: flex; align-items: center; gap: 2px; }
.nav-menu__toggle { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: var(--tap); padding: 0; border: 0; background: none; color: var(--text-on-dark-muted); cursor: pointer; }
.nav-menu__toggle svg { transition: transform .2s ease; }
.nav-menu__toggle:hover, .nav-menu.is-open .nav-menu__toggle { color: var(--text-on-dark); }
.nav-menu.is-open .nav-menu__toggle svg { transform: rotate(180deg); }
.nav-menu__list { position: absolute; top: calc(100% + 18px); left: -20px; z-index: 30; min-width: 340px; margin: 0; padding: var(--sp-8); list-style: none; background: var(--navy); border: 1px solid var(--line-on-dark); border-radius: var(--radius-lg); box-shadow: 0 24px 48px -16px rgba(0,0,0,0.6); opacity: 0; visibility: hidden; transform: translateY(-6px); transition: opacity .18s ease, transform .18s ease, visibility .18s; }
.nav-menu.is-open .nav-menu__list { opacity: 1; visibility: visible; transform: none; }
@media (hover: hover) and (min-width: 761px) { .nav-menu:hover .nav-menu__list { opacity: 1; visibility: visible; transform: none; } .nav-menu::after { content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 20px; } }
.nav-menu__list a { display: flex; flex-direction: column; gap: 2px; min-height: var(--tap); justify-content: center; padding: 10px 14px; border-radius: var(--radius-md); color: var(--text-on-dark); text-decoration: none; font-size: var(--fs-small); font-weight: var(--fw-semibold); line-height: 1.3; }
.nav-menu__list a span { font-size: 12px; font-weight: var(--fw-medium); letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-on-dark-muted); }
.nav-menu__list a:hover, .nav-menu__list a:focus-visible { background: rgba(255,255,255,0.08); }
.nav-menu__all { margin-top: var(--sp-8); padding-top: var(--sp-8); border-top: 1px solid var(--line-on-dark); }
.nav-menu__all a { flex-direction: row; align-items: center; justify-content: flex-start; gap: var(--sp-8); color: var(--accent-on-dark); }

@media (max-width: 900px) {
  .site-nav { min-height: 68px; flex-wrap: wrap; }
  .site-nav__logo { font-size: 21px; }
  .site-nav__role { font-size: 11px; letter-spacing: 0.1em; }
  .site-nav__toggle { display: inline-flex; }
  .site-nav__links { display: none; width: 100%; flex-direction: column; align-items: stretch; gap: 0; padding-bottom: var(--sp-16); }
  .site-nav.is-open .site-nav__links { display: flex; }
  .site-nav__link { padding: var(--sp-8) 0; border-bottom: 1px solid var(--line-on-dark); }
  .site-nav__link[aria-current="page"] { border-bottom-color: var(--line-on-dark); text-decoration: underline; text-decoration-color: var(--accent); text-decoration-thickness: 3px; text-underline-offset: 6px; }
  .site-nav__links .btn { margin-top: var(--sp-16); }
  .nav-menu { flex-wrap: wrap; border-bottom: 1px solid var(--line-on-dark); }
  .nav-menu > .site-nav__link { flex: 1; border-bottom: 0; }
  .nav-menu__toggle { width: var(--tap); }
  .nav-menu__list { position: static; width: 100%; min-width: 0; padding: 0 0 var(--sp-8); background: none; border: 0; box-shadow: none; display: none; opacity: 1; visibility: visible; transform: none; }
  .nav-menu.is-open .nav-menu__list { display: block; }
}

/* =========================== Hero =========================== */
.hero { padding: var(--section-band) var(--gutter); display: flex; align-items: center; justify-content: space-between; gap: var(--sp-64); background-color: var(--night); background-image: radial-gradient(1000px 560px at 18% 45%, var(--glow) 0%, transparent 75%); color: var(--text-on-dark); }
.hero--photo-left { justify-content: center; align-items: center; gap: clamp(48px, 5vw, 80px); background-image: radial-gradient(1000px 560px at 45% 45%, var(--glow) 0%, transparent 75%); }
.br-lg { display: none; }
@media (min-width: 1180px) {
  .br-lg { display: inline; }
  .hero--photo-left .hero__body { width: fit-content; max-width: none; }
  .hero--photo-left .hero__body > .hero__lead, .hero--photo-left .hero__body > .btn-row { contain: inline-size; }
}
.hero__body { display: flex; flex-direction: column; gap: var(--sp-24); max-width: 820px; min-width: 0; }
.hero h1 { overflow-wrap: break-word; font-size: var(--fs-h1); line-height: var(--lh-h1); letter-spacing: var(--ls-tight); color: var(--text-on-dark); }
.hero--photo-left .hero__photo { width: clamp(260px, 30vw, 450px); aspect-ratio: 1 / 1; object-position: center 30%; border-radius: 50%; }
.hero--photo-left h1 { font-size: var(--fs-display); line-height: var(--lh-display); letter-spacing: -0.03em; }
.hero--stack { flex-direction: column; align-items: stretch; gap: var(--sp-24); }
.hero__lead { padding-left: var(--sp-24); border-left: var(--rule-accent); font-size: var(--fs-body-lg); line-height: var(--lh-body-lg); color: var(--text-on-dark-muted); max-width: var(--measure-intro); }
.hero__photo { width: clamp(220px, 26vw, 360px); aspect-ratio: 4 / 5; height: auto; object-fit: cover; object-position: center top; flex-shrink: 0; border-radius: var(--radius-photo); }
.hero__aside { max-width: 460px; display: flex; flex-direction: column; gap: var(--sp-16); padding-left: var(--sp-24); border-left: var(--rule-accent); font-size: var(--fs-body); line-height: var(--lh-body); color: var(--text-on-dark-muted); }
.hero--index { padding-block: calc(var(--section-band) * 0.86); background-image: radial-gradient(760px 420px at 10% 20%, rgba(27,42,158,0.72) 0%, transparent 72%); }
.hero--index > * { max-width: 880px; }
.hero--index h1 { max-width: 18em; }
.hero__note { font-size: var(--fs-small); line-height: var(--lh-small); color: var(--text-on-dark-muted); padding-left: calc(var(--sp-24) + 3px); }
.hero--case { padding-top: var(--sp-16); gap: var(--sp-24); }
.crumb { font-size: var(--fs-caption); color: var(--text-on-dark-muted); display: flex; align-items: center; gap: var(--sp-8); flex-wrap: wrap; margin-bottom: clamp(16px, 3vw, 40px); }
.crumb a { display: inline-flex; align-items: center; min-height: var(--tap); color: var(--text-on-dark-muted); }
.crumb a:hover { color: var(--text-on-dark); }
@media (max-width: 860px) {
  .hero { flex-direction: column-reverse; align-items: flex-start; gap: var(--sp-32); }
  .hero__photo { width: 100%; max-width: 240px; }
  .hero--stack, .hero--split, .hero--photo-left { flex-direction: column; }
  .hero--photo-left .hero__photo { width: 100%; max-width: 280px; }
  .hero--photo-left { background-image: radial-gradient(600px 520px at 30% 60%, var(--glow) 0%, transparent 75%); }
}

/* ---- CaseStudyMeta: weighted columns, label over value ---- */
.meta { display: grid; grid-template-columns: var(--meta-cols); gap: var(--sp-24) var(--col-gap); margin: var(--sp-16) 0 0; padding-top: var(--sp-32); border-top: 1px solid var(--line-on-dark); }
.meta div { min-width: 0; }
.meta dt { font-size: var(--fs-eyebrow); line-height: var(--lh-eyebrow); font-weight: var(--fw-bold); letter-spacing: var(--ls-eyebrow); text-transform: uppercase; color: var(--accent-on-dark); }
.meta dd { margin: var(--sp-8) 0 0; font-size: var(--fs-small); line-height: var(--lh-small); color: var(--text-on-dark); overflow-wrap: break-word; }
@media (max-width: 1100px) { .meta { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 640px) { .meta { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 360px) { .meta { grid-template-columns: minmax(0, 1fr); } }

/* =========================== Logo band (marquee) =========================== */
.logo-band { display: flex; flex-direction: column; align-items: center; gap: var(--sp-48); padding-block: var(--sp-48); border-bottom: 1px solid var(--line); }
.marquee { width: 100%; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.marquee:focus-visible { outline-offset: 6px; }
.marquee__track { display: flex; align-items: center; width: max-content; margin: 0; padding: 0; list-style: none; animation: marquee 45s linear infinite; }
.marquee__track li { flex-shrink: 0; display: flex; align-items: center; height: 56px; padding-inline: clamp(28px, 3vw, 48px); }
.marquee__track img { height: var(--h, 28px); width: auto; max-width: none; filter: grayscale(1) contrast(1.1) var(--tone, brightness(1)); opacity: 0.85; }
.marquee:hover .marquee__track, .marquee:focus-within .marquee__track { animation-play-state: paused; }
@keyframes marquee { to { transform: translateX(-33.3333%); } }
@media (max-width: 760px) { .marquee__track img { height: calc(var(--h, 28px) * 0.82); } .marquee__track li { height: 48px; padding-inline: 24px; } }
@media (prefers-reduced-motion: reduce) {
  .marquee { overflow-x: auto; -webkit-mask-image: none; mask-image: none; scrollbar-width: thin; }
  .marquee__track { animation: none; margin-inline: auto; }
  .marquee__track li[aria-hidden] { display: none; }
}

/* =========================== Ruled columns (text groups, no containers) =========================== */
.cols { display: grid; grid-template-columns: repeat(var(--n, 3), minmax(0, 1fr)); border-top: 1px solid var(--line); }
.col { display: flex; flex-direction: column; gap: var(--sp-8); padding: var(--sp-24) var(--sp-32) 0; border-left: 1px solid var(--line); }
.col:first-child { border-left: 0; padding-left: 0; }
.col strong { font-size: var(--fs-body); line-height: 1.35; font-weight: var(--fw-semibold); }
.col span { font-size: var(--fs-small); line-height: var(--lh-small); color: var(--text-secondary); }
.cols--dark { border-top-color: var(--line-on-dark); }
.cols--dark .col { border-left-color: var(--line-on-dark); }
.cols--dark .col strong { color: var(--text-on-dark); font-family: var(--font-display); font-size: var(--fs-concept); line-height: var(--lh-concept); font-weight: var(--display-weight); }
.cols--dark .col span { color: var(--text-on-dark-muted); }
.cols--stack { grid-template-columns: minmax(0, 1fr); border-top: 0; }
.cols--stack .col, .cols--stack .col:first-child { border-left: 0; border-top: 1px solid var(--line); padding: var(--sp-24) 0; }
@media (max-width: 860px) {
  .cols { grid-template-columns: minmax(0, 1fr); }
  .col, .col:first-child { border-left: 0; padding: var(--sp-24) 0; border-top: 1px solid var(--line); }
  .col:first-child { border-top: 0; }
  .cols--dark .col { border-top-color: var(--line-on-dark); }
}

/* =========================== Signature: system flows =========================== */
.flow { margin: 0; --flow-line: var(--line-diagram); --flow-dot-bg: var(--surface); --flow-ink: var(--text-primary); --flow-muted: var(--text-secondary); --flow-accent: var(--accent); }
.flow--dark { --flow-line: rgba(154,171,255,0.45); --flow-dot-bg: var(--navy); --flow-ink: var(--text-on-dark); --flow-muted: var(--text-on-dark-muted); --flow-accent: var(--accent-on-dark); }
.flow__list { list-style: none; margin: 0; padding: 0; }
.flow__node { position: relative; display: flex; flex-direction: column; gap: 4px; color: var(--flow-ink); }
.flow__dot { position: absolute; width: 14px; height: 14px; border-radius: 50%; border: 1.5px solid var(--flow-accent); background: var(--flow-dot-bg); z-index: 1; }
.flow__node:last-child .flow__dot { background: var(--flow-accent); }
.flow__n { font-size: var(--fs-caption); font-weight: var(--fw-semibold); letter-spacing: 0.08em; color: var(--flow-accent); }
.flow__node strong { font-size: var(--fs-body); line-height: 1.3; font-weight: var(--fw-semibold); }
.flow__node > span:not(.flow__dot):not(.flow__n) { font-size: var(--fs-caption); line-height: var(--lh-caption); color: var(--flow-muted); }
.flow--line .flow__list { display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); gap: var(--sp-24); }
.flow--line .flow__node { padding-top: var(--sp-32); }
.flow--line .flow__dot { top: 0; left: 0; }
.flow--line .flow__node:not(:last-child)::after { content: ""; position: absolute; top: 7px; left: 14px; right: -24px; height: 1px; background: var(--flow-line); }
.flow--line .flow__node:not(:last-child)::before { content: ""; position: absolute; top: 4px; right: -20px; width: 6px; height: 6px; border-top: 1px solid var(--flow-line); border-right: 1px solid var(--flow-line); transform: rotate(45deg); }
.flow__loop { position: relative; margin: 20px 0 0 7px; height: 44px; width: calc((100% + 24px) * (var(--n) - 1) / var(--n) - 24px + 1px); border: 1px dashed var(--flow-line); border-top: 0; border-radius: 0 0 10px 10px; }
.flow__loop::before { content: ""; position: absolute; left: -4px; top: -2px; width: 7px; height: 7px; border-top: 1px solid var(--flow-line); border-left: 1px solid var(--flow-line); transform: rotate(45deg); }
.flow__loop span { position: absolute; left: 50%; bottom: -11px; transform: translateX(-50%); padding: 0 var(--sp-12); background: var(--flow-dot-bg); font-size: var(--fs-caption); line-height: var(--lh-caption); color: var(--flow-muted); text-align: center; width: max-content; max-width: 90%; }
.flow--vertical .flow__list { display: flex; flex-direction: column; }
.flow--vertical .flow__node { padding: 0 0 28px 36px; }
.flow--vertical .flow__dot { top: 4px; left: 0; }
.flow--vertical .flow__node:not(:last-child)::after { content: ""; position: absolute; top: 18px; bottom: 0; left: 7px; width: 1px; background: var(--flow-line); }
.flow__node--gate { padding-bottom: 22px; }
.flow__node--gate .flow__dot { width: 10px; height: 10px; left: 2px; top: 6px; border-radius: 1px; transform: rotate(45deg); border-color: var(--flow-line); }
.flow__node--gate strong { font-size: var(--fs-caption); font-weight: var(--fw-semibold); letter-spacing: 0.08em; text-transform: uppercase; color: var(--flow-muted); }
.flow--funnel .flow__list { display: flex; flex-direction: column; align-items: center; }
.flow--funnel .flow__node { width: calc(100% - var(--i, 0) * 13%); padding: 18px 0 18px 32px; border-top: 1px solid var(--flow-line); display: grid; grid-template-columns: 40px minmax(0, 1fr) minmax(0, 1.4fr); align-items: baseline; gap: var(--sp-16); }
.flow--funnel .flow__node:nth-child(2) { --i: 1; } .flow--funnel .flow__node:nth-child(3) { --i: 2; } .flow--funnel .flow__node:nth-child(4) { --i: 3; } .flow--funnel .flow__node:nth-child(5) { --i: 4; }
.flow--funnel .flow__node:last-child { border-bottom: 1px solid var(--flow-line); }
.flow--funnel .flow__dot { top: 23px; left: 0; }
@media (max-width: 860px) {
  .flow--line .flow__list { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .flow--line .flow__node { padding: 0 0 var(--sp-24) 36px; }
  .flow--line .flow__dot { top: 4px; }
  .flow--line .flow__node:not(:last-child)::after { top: 18px; bottom: 0; left: 7px; right: auto; width: 1px; height: auto; }
  .flow--line .flow__node:not(:last-child)::before { display: none; }
  .flow__loop { width: auto; height: auto; margin: 0 0 0 36px; border: 0; }
  .flow__loop::before { display: none; }
  .flow__loop span { position: static; transform: none; padding: 0; display: block; text-align: left; max-width: none; width: auto; }
  .flow__loop span::before { content: "↺ "; color: var(--flow-accent); }
  .flow--funnel .flow__node { width: 100%; grid-template-columns: 32px minmax(0, 1fr); }
  .flow--funnel .flow__node > span:last-child { grid-column: 2; }
}

/* =========================== Media system =========================== */
/* Product screens sit directly on the page: no field, no bleed — just the shared screen shadow. Never cropped. */
.stage { display: flex; align-items: flex-start; justify-content: center; gap: var(--col-gap); padding: var(--sp-16) 0; background: none; }
.stage--hero { padding-top: var(--stack-content); padding-bottom: 0; --phone-w: clamp(180px, 17vw, 270px); }
.stage--multi.stage--d { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.stage--p { padding: 0; overflow: hidden; }
.screen { display: block; background: var(--surface); box-shadow: var(--shadow-screen-feature); }
/* ui-full: natural aspect ratio, full width, height capped so tall page captures scale down rather than crop */
.screen--d { width: auto; max-width: 100%; height: auto; max-height: var(--media-max-h); border-radius: var(--radius-md); }
.stage--multi .screen--d { max-height: calc(var(--media-max-h) * 0.7); }
.screen--m { width: var(--phone-w); height: auto; flex-shrink: 0; border-radius: 14px; }
.screen--a { width: auto; max-width: 100%; height: auto; max-height: var(--media-max-h); padding: clamp(8px, 1.5vw, 20px); border-radius: var(--radius-sm); }
/* photo-cover: photography / marketing imagery only */
.screen--p { width: 100%; height: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: var(--radius-md); }
/* ui-detail: an intentional close-up; may crop, always captioned */
.media-detail { overflow: hidden; border-radius: var(--radius-md); }
.media-detail img { width: 100%; aspect-ratio: var(--detail-ratio, 4 / 3); object-fit: cover; object-position: var(--detail-pos, top left); }
.stage--gallery { display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); align-items: start; }
.stage--gallery.stage--m .screen--m { width: 100%; max-width: var(--phone-w); }
@media (max-width: 860px) { .stage--gallery.stage--m { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.gallery__item { margin: 0; display: flex; flex-direction: column; align-items: center; gap: var(--sp-16); min-width: 0; }
.gallery__item figcaption { align-self: stretch; }
@media (max-width: 860px) {
  .stage--multi.stage--d, .stage--gallery { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 760px) {
  :root { --phone-w: 200px; --media-max-h: 560px; }
  .stage--m.stage--multi { justify-content: flex-start; overflow-x: auto; padding-inline: 4px; padding-bottom: var(--sp-32); scroll-snap-type: x mandatory; scrollbar-width: none; }
  .stage--m.stage--multi::-webkit-scrollbar { display: none; }
  .stage--m.stage--multi .screen--m { scroll-snap-align: center; }
}

/* =========================== Editorial project rows =========================== */
.section--featured { padding-top: clamp(48px, 2vw + 32px, 64px); }
.stack--featured { gap: var(--sp-32); }
.rows { display: flex; flex-direction: column; }
section:has(> .stack > .rows), section:has(.rows) { overflow-x: clip; }  /* contains the reveal's horizontal travel */
.row { position: relative; display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--split-gap); align-items: center; padding-block: var(--row-pad); border-top: 1px solid var(--line); }
.rows .row:first-child { padding-top: 0; border-top: 0; }
.rows .row:last-child { padding-bottom: 0; }
.rows--compose .row { padding-top: calc(var(--row-pad) - 24px); }
.rows--compose .row:first-child { padding-top: 0; }
.row--b { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
.row--b .row__visual { order: 2; }
.row__visual { min-width: 0; }
.row__copy { display: flex; flex-direction: column; gap: var(--sp-16); align-items: flex-start; }
.row__title { font-size: var(--fs-h3); line-height: var(--lh-h3); }
.row__desc { font-size: var(--fs-body); line-height: var(--lh-body); color: var(--text-secondary); max-width: var(--measure); }
.row__facts { display: flex; flex-direction: column; gap: var(--sp-24); margin: 0; max-width: var(--measure); }
.row__fact { display: flex; flex-direction: column; gap: 4px; margin: 0; }
.row__fact dd { margin: 0; }
.row__fact--contrib { padding-left: var(--sp-16); border-left: var(--rule-accent); }
.row__label { font-size: var(--fs-caption); line-height: var(--lh-caption); font-weight: var(--fw-semibold); color: var(--text-muted); }
.row__outcome { font-size: var(--fs-body); line-height: var(--lh-body); font-weight: var(--fw-medium); color: var(--text-primary); }
.row__cta { display: inline-flex; align-items: center; gap: var(--sp-8); min-height: var(--tap); font-size: var(--fs-small); font-weight: var(--fw-semibold); color: var(--accent); text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 5px; }
.row__cta svg { transition: transform .2s ease; }
.row__cta:hover { text-decoration-color: currentColor; }
.row__cta:hover svg { transform: translateX(4px); }
@media (max-width: 860px) {
  .row, .row--b { grid-template-columns: minmax(0, 1fr); gap: var(--sp-32); }
  .row--b .row__visual { order: 0; }
}

/* purposeful multi-screen composition (unframed) */
/* featured single screen: large, no container, one shadow */
.screen--feature { width: 100%; max-height: none; border-radius: var(--radius-md); box-shadow: var(--shadow-screen-feature); }
/* product-screen composition: anchor screen + one overlapping screen, no container */
.compose { display: flex; flex-direction: column; padding-block: var(--sp-8); }
.compose .screen { max-height: none; border-radius: var(--radius-md); box-shadow: var(--shadow-screen-light); }
.compose .screen:first-child { width: 86%; }
.compose .screen:nth-child(2) { position: relative; z-index: 1; width: 50%; margin-top: -24%; }
.compose--left .screen:nth-child(2) { align-self: flex-end; }
.compose--right .screen:first-child { align-self: flex-end; }
.compose--right .screen:nth-child(2) { align-self: flex-start; }


/* scroll reveal: media slides from its own side, copy rises slightly; runs once */
.js .reveal .row__visual { opacity: 0.7; transform: translateX(calc(-1 * var(--reveal-shift))); transition: opacity 600ms var(--ease-out), transform 650ms var(--ease-out); }
.js .reveal--right .row__visual { transform: translateX(var(--reveal-shift)); }
.js .reveal .row__copy { opacity: 0.7; transform: translateY(16px); transition: opacity 600ms var(--ease-out) 100ms, transform 600ms var(--ease-out) 100ms; }
.js .reveal.is-in .row__visual, .js .reveal.is-in .row__copy { opacity: 1; transform: none; }
@media (max-width: 760px) { .js .reveal .row__visual, .js .reveal--right .row__visual { transform: translateY(16px); } .js .reveal .row__copy { transform: none; } }
@media (prefers-reduced-motion: reduce) { .js .reveal .row__visual, .js .reveal .row__copy { opacity: 1; transform: none; } }

/* =========================== Project index =========================== */
.index { list-style: none; margin: 0; padding: 0; border-bottom: 1px solid var(--line); }
.index__head, .index__row a { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr) minmax(0, 1.5fr) var(--tap); gap: var(--sp-24); align-items: center; }
.index__head { padding: 0 0 var(--sp-12); font-size: var(--fs-eyebrow); font-weight: var(--fw-bold); letter-spacing: var(--ls-eyebrow); text-transform: uppercase; color: var(--text-muted); border-bottom: 1px solid var(--line-strong); }
.index__row { border-top: 1px solid var(--line); }
.index__row:first-child { border-top: 0; }
.index__row a { position: relative; padding: var(--sp-32) 0; color: var(--text-primary); text-decoration: none; }
.index__name { display: flex; flex-direction: column; gap: 2px; font-family: var(--font-display); font-weight: var(--display-weight); font-size: var(--fs-h3); line-height: var(--lh-h3); }
.index__client, .index__area { font-family: var(--font-text); font-size: var(--fs-caption); line-height: var(--lh-caption); font-weight: var(--fw-semibold); letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-muted); }
.index__desc { font-size: var(--fs-small); line-height: var(--lh-small); color: var(--text-secondary); }
.index__go { width: var(--tap); height: var(--tap); border-radius: var(--radius-pill); display: inline-flex; align-items: center; justify-content: center; color: var(--accent); border: 1px solid var(--line); transition: background .2s ease, color .2s ease, border-color .2s ease; }
.index__row a:hover .index__go, .index__row a:focus-visible .index__go { background: var(--accent); color: var(--on-accent); border-color: var(--accent); }
.index__row a:hover .index__title { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 6px; }
.index__thumb { position: absolute; right: 64px; top: 50%; width: 240px; aspect-ratio: 16 / 10; display: flex; align-items: center; justify-content: center; overflow: hidden; padding: var(--sp-12); border-radius: var(--radius-md); background: var(--surface-stage); box-shadow: var(--shadow-float); opacity: 0; transform: translate(12px, -50%); transition: opacity .25s ease, transform .25s ease; pointer-events: none; z-index: 2; }
.index__thumb .screen { max-height: 100%; width: auto; max-width: 100%; box-shadow: none; }
.index__thumb--lock { flex-direction: column; gap: var(--sp-8); color: var(--accent); background: var(--surface-tint); font-size: var(--fs-caption); font-weight: var(--fw-semibold); }
@media (hover: hover) and (min-width: 1025px) { .index__row a:hover .index__thumb { opacity: 1; transform: translate(0, -50%); } }
@media (max-width: 1024px) {
  .index__head { display: none; }
  .index__row a { grid-template-columns: 96px minmax(0, 1fr) var(--tap); grid-template-areas: "thumb name go" "thumb area go" "thumb desc go"; row-gap: 4px; column-gap: 20px; padding: var(--sp-24) 0; }
  .index__thumb { position: static; grid-area: thumb; width: 96px; padding: 6px; opacity: 1; transform: none; box-shadow: none; align-self: start; }
  .index__name { grid-area: name; } .index__area { grid-area: area; letter-spacing: 0.06em; } .index__desc { grid-area: desc; } .index__go { grid-area: go; }
}

/* =========================== Case study components =========================== */
/* Challenge / Outcomes */
.brief { display: grid; grid-template-columns: minmax(0, 56fr) minmax(0, 44fr); gap: var(--split-gap); align-items: start; }
.brief .lead-text { font-size: var(--fs-lead-sm); line-height: 1.5; max-width: 40ch; }
.brief__col { display: flex; flex-direction: column; gap: var(--sp-16); padding-top: var(--sp-24); border-top: 1px solid var(--line-strong); }
.outcomes { list-style: none; margin: 0; padding: 0; }
.outcomes li { padding: var(--sp-16) 0; border-top: 1px solid var(--line); font-size: var(--fs-body); line-height: var(--lh-body); color: var(--text-secondary); }
.outcomes li:first-child { border-top: 0; padding-top: 0; }
.outcomes strong { color: var(--text-primary); font-weight: var(--fw-semibold); }
.outcomes__note { margin-top: 0; padding-top: var(--sp-16); border-top: 1px solid var(--line); font-size: var(--fs-caption); line-height: var(--lh-caption); color: var(--text-muted); max-width: var(--measure); }
@media (max-width: 860px) { .brief { grid-template-columns: minmax(0, 1fr); gap: var(--sp-48); } }

/* What I owned */
.owned { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.owned__col { display: flex; flex-direction: column; gap: var(--sp-16); padding: var(--sp-32); border-left: 1px solid var(--line); }
.owned__col:first-child { border-left: 0; padding-left: 0; }
.owned__col:last-child { padding-right: 0; }
.owned h3 { font-family: var(--font-text); font-size: var(--fs-eyebrow); line-height: var(--lh-eyebrow); font-weight: var(--fw-bold); letter-spacing: var(--ls-eyebrow); text-transform: uppercase; color: var(--accent); }
.owned ul { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 11px; }
.owned li { position: relative; padding-left: 18px; font-size: var(--fs-small); line-height: var(--lh-small); color: var(--text-secondary); }
.owned li::before { content: ""; position: absolute; left: 0; top: 0.62em; width: 6px; height: 6px; border-radius: 50%; background: var(--bullet); }
@media (max-width: 860px) {
  .owned { grid-template-columns: minmax(0, 1fr); }
  .owned__col, .owned__col:first-child, .owned__col:last-child { border-left: 0; padding: var(--sp-24) 0; border-top: 1px solid var(--line); }
  .owned__col:first-child { border-top: 0; }
}

/* Figures: equivalent items share one style per group (concepts OR metrics) */
.figures { display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); border-top: 1px solid var(--line-on-dark); }
.figure { display: flex; flex-direction: column; gap: var(--sp-12); padding: var(--sp-32) var(--sp-32) 0; border-left: 1px solid var(--line-on-dark); min-width: 0; }
.figure:first-child { border-left: 0; padding-left: 0; }
.figure__value { font-family: var(--font-display); font-weight: var(--display-weight); color: var(--text-on-dark); }
.figures--concept .figure__value { font-size: var(--fs-concept); line-height: var(--lh-concept); letter-spacing: var(--ls-snug); }
.figures--metric .figure__value { font-size: var(--fs-metric); line-height: var(--lh-metric); letter-spacing: var(--ls-tight); }
.figure__label { font-size: var(--fs-small); line-height: var(--lh-small); color: var(--text-on-dark-muted); max-width: 34ch; }
@media (max-width: 1024px) {
  .figures { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .figure:nth-child(odd) { border-left: 0; padding-left: 0; }
  .figure:nth-child(n+3) { border-top: 1px solid var(--line-on-dark); margin-top: var(--sp-32); }
}
@media (max-width: 640px) {
  .figures { grid-template-columns: minmax(0, 1fr); }
  .figure, .figure:nth-child(odd) { border-left: 0; padding: var(--sp-24) 0; margin-top: 0; }
  .figure + .figure { border-top: 1px solid var(--line-on-dark); }
}
.source { margin-top: calc(var(--sp-24) - var(--stack-content)); font-size: var(--fs-caption); line-height: var(--lh-caption); color: var(--text-on-dark-muted); max-width: var(--measure); }
.pullquote { margin: var(--sp-32) 0 0; padding-left: var(--sp-24); border-left: var(--rule-accent); display: flex; flex-direction: column; justify-content: center; gap: var(--sp-16); }
.pullquote blockquote { margin: 0; font-family: var(--font-display); font-size: var(--fs-lead); line-height: var(--lh-lead); font-weight: var(--fw-regular); letter-spacing: var(--ls-snug); color: var(--text-on-dark); max-width: 48ch; }
.pullquote figcaption { font-size: var(--fs-caption); color: var(--text-on-dark-muted); }
.quote-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.8fr); gap: var(--split-gap); align-items: center; margin-top: var(--sp-32); }
.quote-row .pullquote { margin-top: 0; }
@media (max-width: 1024px) { .quote-row { grid-template-columns: minmax(0, 1fr); } }
.split { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--split-gap); align-items: start; }
@media (max-width: 860px) { .split { grid-template-columns: minmax(0, 1fr); } }

/* Design decisions */
.decisions { display: flex; flex-direction: column; gap: var(--decision-gap); }
.decision { display: grid; grid-template-columns: minmax(0, 52fr) minmax(0, 48fr); gap: var(--split-gap); align-items: start; scroll-margin-top: 110px; }
.decision--flip { grid-template-columns: minmax(0, 48fr) minmax(0, 52fr); }
.decision--flip .decision__text { order: 2; }
.decision__text { display: flex; flex-direction: column; gap: var(--sp-16); padding-top: var(--sp-8); max-width: 60ch; }
.decision__visual { min-width: 0; margin: 0; display: flex; flex-direction: column; gap: var(--sp-12); }
.decision__num { font-size: var(--fs-eyebrow); line-height: var(--lh-eyebrow); font-weight: var(--fw-bold); letter-spacing: var(--ls-eyebrow); text-transform: uppercase; color: var(--accent); }
.decision h3 { margin-bottom: var(--sp-8); }
.decision p { font-size: var(--fs-body); line-height: var(--lh-body); color: var(--text-secondary); }
.decision p strong { color: var(--text-primary); font-weight: var(--fw-semibold); }
.decisions--text { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 var(--split-gap); }
.decisions--3 { grid-template-columns: minmax(0, 1fr); }
.decision--text { display: flex; flex-direction: column; gap: var(--sp-16); padding: var(--sp-32) 0 var(--sp-48); border-top: 1px solid var(--line); max-width: none; }
.decisions--3 .decision--text { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-16) var(--col-gap); align-items: start; }
.decisions--3 .decision--text .decision__num { grid-column: 1; grid-row: 1; }
.decisions--3 .decision--text h3 { grid-column: 1; grid-row: 2; }
.decisions--3 .decision--text p:nth-of-type(1) { grid-column: 2; grid-row: 1 / span 2; }
.decisions--3 .decision--text p:nth-of-type(2) { grid-column: 3; grid-row: 1 / span 2; }
@media (max-width: 1024px) {
  .decisions--3 .decision--text { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .decisions--3 .decision--text h3 { grid-column: 1 / -1; }
  .decisions--3 .decision--text p:nth-of-type(1) { grid-column: 1; grid-row: 3; }
  .decisions--3 .decision--text p:nth-of-type(2) { grid-column: 2; grid-row: 3; }
}
@media (max-width: 860px) {
  .decisions { gap: var(--decision-gap); }
  .decision, .decision--flip, .decisions--text { grid-template-columns: minmax(0, 1fr); gap: var(--sp-32); }
  .decisions--text { gap: 0; }
  .decision--flip .decision__text { order: 0; }
  .decisions--3 .decision--text { grid-template-columns: minmax(0, 1fr); }
  .decisions--3 .decision--text > * { grid-column: 1 !important; grid-row: auto !important; }
}

.confidential { display: flex; gap: var(--sp-32); align-items: center; padding: var(--sp-32) 0; border-top: 1px solid var(--line-strong); border-bottom: 1px solid var(--line); }
.confidential__icon { width: 64px; height: 64px; border-radius: var(--radius-pill); background: var(--surface-tint); color: var(--accent); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.confidential .stack { gap: var(--sp-8); }
.confidential p:not(.eyebrow) { font-size: var(--fs-body); line-height: var(--lh-body); color: var(--text-secondary); max-width: var(--measure); }
@media (max-width: 600px) { .confidential { flex-direction: column; align-items: flex-start; } }

/* Interaction demo video: full content width, native ratio, user-initiated */
.demo { margin: 0; display: flex; flex-direction: column; gap: var(--sp-16); }
.demo__video { display: block; width: 100%; height: auto; aspect-ratio: var(--ratio, 16 / 10); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-md); box-shadow: var(--shadow-screen-feature); }
.demo__caption { max-width: var(--measure); }

/* Prototype */
.proto iframe { display: block; width: 100%; aspect-ratio: 16 / 10; border: 0; border-radius: var(--radius-md); background: var(--navy); }
.proto__poster { display: flex; flex-direction: column; align-items: stretch; justify-content: center; gap: var(--sp-48); width: 100%; aspect-ratio: 16 / 9; padding: clamp(32px, 6vw, 96px); border: 0; border-radius: var(--radius-md); cursor: pointer; text-align: left; font: inherit; color: var(--text-on-dark); background-color: var(--navy); background-image: radial-gradient(800px 400px at 0% 0%, rgba(27,42,158,0.75) 0%, transparent 70%); }
.proto__cta { display: inline-flex; align-items: center; gap: var(--sp-16); font-family: var(--font-display); font-weight: var(--display-weight); font-size: var(--fs-h3); line-height: var(--lh-h3); }
.proto__play { width: 64px; height: 64px; border-radius: var(--radius-pill); background: var(--accent); color: var(--on-accent); display: flex; align-items: center; justify-content: center; box-shadow: 0 0 0 12px rgba(47,75,255,0.18); flex-shrink: 0; transition: transform .2s ease; }
.proto__poster:hover .proto__play { transform: scale(1.06); }
.proto__note { font-size: var(--fs-caption); color: var(--text-on-dark-muted); margin-top: calc(-1 * var(--sp-32)); padding-left: 80px; }
.proto__poster:focus-visible { outline: 3px solid var(--accent); outline-offset: 4px; }
.proto__fallback { display: none; }
@media (max-width: 767px) {
  .proto__poster { display: none; }
  .proto__fallback { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--sp-16); padding: var(--sp-48) var(--sp-24); border-radius: var(--radius-md); text-align: center; text-decoration: none; background-color: var(--navy); background-image: radial-gradient(500px 240px at 50% 0%, rgba(27,42,158,0.55) 0%, transparent 70%); color: var(--text-on-dark); font-family: var(--font-display); font-weight: var(--display-weight); font-size: var(--fs-h3); }
  .proto__fallback:hover { color: var(--text-on-dark); }
}

/* Reflection */
.reflection .stack { gap: 0; }
.reflection h2 { margin-top: var(--stack-heading); }
.reflection__text { margin-top: var(--stack-intro); font-size: var(--fs-body-lg); line-height: var(--lh-body-lg); max-width: none; }  /* spans the full content width, inside the gutters */
.reflection .cols { margin-top: var(--stack-content); }
.reflection .note { margin-top: var(--sp-32); max-width: none; }
.note { font-size: var(--fs-caption); line-height: var(--lh-caption); color: var(--text-muted); max-width: var(--measure); }

/* Next case study */
.next { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "label go" "title go"; gap: var(--sp-8) var(--sp-24); align-items: center; padding: var(--sp-48) 0; border-top: 1px solid var(--line-strong); border-bottom: 1px solid var(--line); text-decoration: none; color: var(--text-primary); }
.next:hover { color: var(--text-primary); }
.next__label { grid-area: label; font-size: var(--fs-eyebrow); font-weight: var(--fw-bold); letter-spacing: var(--ls-eyebrow); text-transform: uppercase; color: var(--accent); }
.next__title { grid-area: title; font-family: var(--font-display); font-weight: var(--display-weight); font-size: var(--fs-h2); line-height: var(--lh-h2); letter-spacing: var(--ls-tight); }
.next__go { grid-area: go; width: var(--tap); height: var(--tap); border-radius: var(--radius-pill); display: inline-flex; align-items: center; justify-content: center; color: var(--accent); border: 1px solid var(--line); transition: background .2s ease, color .2s ease, border-color .2s ease; }
.next:hover .next__go, .next:focus-visible .next__go { background: var(--accent); color: var(--on-accent); border-color: var(--accent); }
.next:hover .next__title { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 6px; }

/* =========================== Testimonials =========================== */
.carousel { display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 2 * var(--sp-48)) / 3); gap: var(--sp-48); overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; scrollbar-width: none; padding-bottom: 4px; }
.carousel::-webkit-scrollbar { display: none; }
.carousel > * { scroll-snap-align: start; }
@media (max-width: 1024px) { .carousel { grid-auto-columns: calc((100% - var(--sp-48)) / 2); } }
@media (max-width: 760px) { .carousel { grid-auto-columns: 88%; gap: var(--sp-32); } }
.carousel__controls { display: flex; gap: var(--sp-12); }
.carousel__btn { width: 48px; height: 48px; border-radius: var(--radius-pill); border: 1px solid var(--accent); background: transparent; color: var(--accent); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; transition: background .15s ease, color .15s ease; }
.carousel__btn:hover { background: var(--accent); color: var(--on-accent); }
.carousel__dots { display: flex; justify-content: center; align-items: center; gap: 0; margin-top: calc(var(--sp-16) - var(--stack-content)); }
.carousel__dot { min-width: 32px; height: var(--tap); padding: 0; border: 0; background: none; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.carousel__dot::before { content: ""; width: 10px; height: 10px; border-radius: var(--radius-pill); background: var(--indicator-idle); transition: width .3s ease, background-color .3s ease; }
.carousel__dot:hover::before { background: var(--text-primary); }
.carousel__dot[aria-current="true"]::before { width: 28px; background: var(--accent); }
.testimonial { margin: 0; padding-left: var(--sp-24); border-left: var(--rule-accent); display: flex; flex-direction: column; gap: var(--sp-24); }
.testimonial blockquote { margin: 0; font-family: var(--font-display); font-size: var(--fs-body-lg); line-height: var(--lh-body-lg); font-weight: var(--fw-regular); }
.testimonial figcaption { margin-top: auto; display: flex; flex-direction: column; gap: 2px; font-size: var(--fs-caption); line-height: var(--lh-caption); color: var(--text-muted); }
.testimonial figcaption strong { color: var(--text-primary); font-size: var(--fs-small); font-weight: var(--fw-semibold); }

/* =========================== Process =========================== */
/* home band: the one deliberate "glass" card treatment on the site */
.steps { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--sp-16); }
@media (max-width: 1024px) { .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .steps { grid-template-columns: minmax(0, 1fr); } }
.proc-step { position: relative; overflow: hidden; isolation: isolate; display: flex; flex-direction: column; gap: var(--sp-8); padding: 28px; border-radius: var(--radius-lg); text-decoration: none; color: var(--text-on-dark);
  background: radial-gradient(120% 90% at 0% 0%, rgba(154,171,255,0.20) 0%, transparent 55%), linear-gradient(155deg, rgba(47,75,255,0.30) 0%, rgba(27,42,158,0.22) 38%, rgba(5,8,28,0.92) 100%);
  border: 1px solid rgba(154,171,255,0.22);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.18), inset 0 -1px 0 rgba(0,0,0,0.5), 0 12px 32px -12px rgba(27,42,158,0.6);
  transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease; }
.proc-step:hover { color: var(--text-on-dark); }
.proc-step::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; border-radius: inherit; background: linear-gradient(180deg, rgba(255,255,255,0.10) 0%, rgba(255,255,255,0.02) 42%, transparent 43%); }
.proc-step::after { content: ""; position: absolute; top: -50%; left: -60%; width: 45%; height: 200%; z-index: -1; pointer-events: none; background: linear-gradient(100deg, transparent 0%, rgba(255,255,255,0.16) 50%, transparent 100%); transform: translateX(-120%) rotate(12deg); transition: transform .8s ease; }
.proc-step:hover, .proc-step:focus-visible { transform: translateY(-4px); border-color: rgba(154,171,255,0.55); box-shadow: inset 0 1px 0 rgba(255,255,255,0.25), inset 0 -1px 0 rgba(0,0,0,0.5), 0 18px 44px -12px rgba(47,75,255,0.65); }
.proc-step:hover::after, .proc-step:focus-visible::after { transform: translateX(420%) rotate(12deg); }
.proc-step__n { font-family: var(--font-display); font-weight: var(--display-weight); font-size: var(--fs-concept); line-height: var(--lh-concept); color: var(--accent-on-dark); }
.proc-step__t { font-size: var(--fs-body); line-height: 1.35; font-weight: var(--fw-semibold); }

.proc-layout { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: var(--split-gap); align-items: start; }
.proc-aside { position: sticky; top: 128px; display: flex; flex-direction: column; gap: var(--stack-heading); }
.proc-aside__title { font-family: var(--font-display); font-weight: var(--display-weight); font-size: var(--fs-h3); line-height: var(--lh-h3); letter-spacing: var(--ls-snug); }
.path { list-style: none; margin: var(--sp-24) 0 0; padding: 0; position: relative; }
.path::before { content: ""; position: absolute; left: 6px; top: 22px; bottom: 22px; width: 1px; background: var(--line-diagram); }
.path__link { position: relative; display: flex; align-items: center; gap: var(--sp-12); min-height: var(--tap); color: var(--text-secondary); text-decoration: none; font-size: var(--fs-small); font-weight: var(--fw-medium); }
.path__dot { width: 13px; height: 13px; border-radius: 50%; border: 1.5px solid var(--accent); background: var(--surface); flex-shrink: 0; z-index: 1; transition: background .2s ease; }
.path__n { font-size: var(--fs-caption); font-weight: var(--fw-semibold); letter-spacing: 0.08em; color: var(--accent); }
.path__link:hover { color: var(--text-primary); text-decoration: underline; text-underline-offset: 4px; }
.path__link[aria-current] { color: var(--text-primary); font-weight: var(--fw-bold); }
.path__link[aria-current] .path__dot { background: var(--accent); }
.proc-row { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: var(--sp-24); padding-block: var(--sp-48); border-top: 1px solid var(--line); scroll-margin-top: 110px; }
.proc-row:first-child { border-top: 1px solid var(--line-strong); }
.proc-row__num { font-family: var(--font-display); font-weight: var(--display-weight); font-size: var(--fs-h1); line-height: 1; color: var(--accent); }
.proc-row__body { display: flex; flex-direction: column; gap: var(--sp-16); }
.proc-row h2 { font-size: var(--fs-h3); line-height: var(--lh-h3); letter-spacing: var(--ls-snug); }
.proc-row p:not(.kicker) { color: var(--text-secondary); max-width: var(--measure); }
.see-links { display: flex; flex-direction: column; align-items: flex-start; margin-top: var(--sp-8); }
.see-links a { display: inline-flex; align-items: center; gap: var(--sp-8); min-height: var(--tap); color: var(--text-primary); font-weight: var(--fw-semibold); font-size: var(--fs-small); text-decoration: underline; text-decoration-color: var(--line-diagram); text-underline-offset: 5px; }
.see-links a:hover { text-decoration-color: var(--accent); color: var(--accent); }
.see-links svg { color: var(--accent); flex-shrink: 0; }
@media (max-width: 1024px) { .proc-layout { grid-template-columns: minmax(0, 1fr); } .proc-aside { position: static; } .path { display: none; } }
@media (max-width: 600px) { .proc-row { grid-template-columns: minmax(0, 1fr); gap: var(--sp-12); } }

/* =========================== About =========================== */
.story { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: var(--split-gap); }
.story__text { display: flex; flex-direction: column; gap: var(--sp-24); font-size: var(--fs-body-lg); line-height: var(--lh-body-lg); max-width: var(--measure); }
@media (max-width: 860px) { .story { grid-template-columns: minmax(0, 1fr); gap: var(--sp-24); } }
.certs { list-style: none; margin: 0; padding: var(--sp-24) 0 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-24) var(--split-gap); border-top: 1px solid var(--line); }
.cert { display: flex; gap: var(--sp-24); align-items: center; }
.cert img { width: 132px; height: auto; border-radius: var(--radius-sm); border: 1px solid var(--line); flex-shrink: 0; }
.cert strong { display: block; font-size: var(--fs-body); line-height: 1.35; font-weight: var(--fw-semibold); }
.cert span { font-size: var(--fs-caption); line-height: var(--lh-caption); color: var(--text-muted); }
@media (max-width: 760px) { .certs { grid-template-columns: minmax(0, 1fr); } }
.offclock { padding-top: var(--sp-48); border-top: 1px solid var(--line); display: flex; gap: var(--sp-48); align-items: center; }
.offclock .stack { gap: var(--stack-heading); flex: 1; }
.offclock p:not(.eyebrow) { font-size: var(--fs-body-lg); line-height: var(--lh-body-lg); max-width: var(--measure); }
@media (max-width: 760px) { .offclock { flex-direction: column; align-items: flex-start; } }

/* =========================== Footer =========================== */
.site-footer { padding: var(--section) var(--gutter) var(--sp-32); display: flex; flex-direction: column; gap: var(--sp-64); background-color: var(--night); background-image: radial-gradient(900px 400px at 20% 0%, var(--glow) 0%, transparent 70%); color: var(--text-on-dark); }
.site-footer__cta { display: flex; justify-content: space-between; align-items: flex-end; gap: var(--sp-32); flex-wrap: wrap; }
.site-footer h2 { font-size: var(--fs-h2); line-height: var(--lh-h2); margin-top: var(--stack-heading); max-width: 18ch; }
.site-footer__email { margin-top: var(--sp-16); font-size: var(--fs-small); color: var(--text-on-dark-muted); }
.site-footer__bar { display: flex; justify-content: space-between; align-items: center; gap: var(--sp-24); flex-wrap: wrap; padding-top: var(--sp-24); border-top: 1px solid var(--line-on-dark); font-size: var(--fs-caption); color: var(--text-on-dark-muted); }
.site-footer__bar nav { display: flex; gap: 0 var(--sp-24); flex-wrap: wrap; }
.site-footer__bar a { display: inline-flex; align-items: center; min-height: var(--tap); color: var(--text-on-dark-muted); text-decoration: none; }
.site-footer__bar a:hover { color: var(--text-on-dark); text-decoration: underline; }
.site-footer__logo { font-family: var(--font-display); font-weight: var(--display-weight); font-size: 22px; color: var(--text-on-dark); }

/* =========================== Navigator cover + password gate =========================== */
.nav-cover { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); grid-template-areas: "crumb art" "copy art" "meta meta"; grid-template-rows: auto 1fr auto; align-items: center; gap: 0 clamp(32px, 5vw, 96px); padding-top: var(--sp-16); overflow: hidden;
  background-image: radial-gradient(900px 560px at 78% 40%, var(--glow) 0%, transparent 72%); }
.nav-cover__copy { grid-area: copy; display: flex; flex-direction: column; gap: var(--sp-24); min-width: 0; padding-block: clamp(8px, 2vw, 32px) clamp(32px, 4vw, 64px); }
.nav-cover__crumb { grid-area: crumb; align-self: start; margin-bottom: 0; }
.nav-cover__title { font-size: clamp(56px, 6vw + 16px, 112px); line-height: 0.95; letter-spacing: -0.035em; }
.nav-cover__descriptor { margin-top: calc(var(--sp-8) * -1); font-family: var(--font-display); font-size: var(--fs-h3); line-height: var(--lh-h3); font-weight: var(--fw-medium); color: var(--accent-on-dark); }
.nav-cover__art { grid-area: art; align-self: center; position: relative; min-height: 0; margin-right: calc(var(--gutter) * -1); }
.nav-cover__art .nc { display: block; width: 100%; height: 100%; }
.nav-cover__art .nc--square { aspect-ratio: 1 / 1; max-height: 640px; height: auto; }
.nav-cover__art .nc--wide { display: none; }
.nav-cover__meta { grid-area: meta; }

/* compass drawing */
.nc-field { opacity: 0.3; }
.nc pattern circle { fill: var(--accent-on-dark); }
.nc-item { fill: var(--accent-on-dark); opacity: 0.5; }
.nc-ring { fill: none; stroke: var(--accent-on-dark); stroke-opacity: 0.34; stroke-width: 1; }
.nc-ring--mid { stroke-opacity: 0.16; }
.nc-ring--inner { stroke-opacity: 0.26; stroke-dasharray: 2 5; }
.nc-ticks line { stroke: var(--accent-on-dark); stroke-opacity: 0.4; stroke-width: 1; }
.nc-ticks .nc-tick--major { stroke-opacity: 0.85; stroke-width: 1.5; }
.nc-north { fill: var(--text-on-dark); font: 600 15px/1 var(--font-text); letter-spacing: 0.14em; }
.nc-path { fill: none; stroke: var(--text-on-dark); stroke-opacity: 0.7; stroke-width: 1.5; stroke-dasharray: 1 7; stroke-linecap: round; }
.nc-start { fill: var(--night); stroke: var(--text-on-dark); stroke-opacity: 0.8; stroke-width: 1.5; }
.nc-via { fill: var(--night); stroke: var(--accent-on-dark); stroke-width: 1.5; }
.nc-target { fill: var(--text-on-dark); transition: fill .4s var(--ease-out); }
.nc-target__halo { fill: var(--accent); fill-opacity: 0.28; stroke: var(--accent-on-dark); stroke-opacity: 0.8; stroke-width: 1; transform-box: fill-box; transform-origin: center; transition: opacity .4s var(--ease-out), transform .5s var(--ease-out); }
.nc-needle { transform: rotate(38deg); transition: transform .5s cubic-bezier(.3, 1.35, .5, 1); }
.nc-needle__n { fill: var(--text-on-dark); }
.nc-needle__s { fill: none; stroke: var(--text-on-dark); stroke-opacity: 0.55; stroke-width: 1.2; }
.nc-hub { fill: var(--night); stroke: var(--text-on-dark); stroke-width: 2; }
.nc-label { fill: var(--text-on-dark-muted); font: 600 13px/1 var(--font-text); letter-spacing: 0.1em; text-transform: uppercase; }
.nc-label--target { fill: var(--text-on-dark); }
/* seeking (password page): the needle hasn't settled and the offering isn't lit yet */
.nav-cover--seeking .nc-needle { transform: rotate(-46deg); }
.nav-cover--seeking .nc-target__halo { opacity: 0; transform: scale(0.4); }
.nav-cover--seeking .nc-target { fill: var(--accent-on-dark); }
.nav-cover--seeking .nc-label--target { fill: var(--text-on-dark-muted); }
.js .nav-cover--seeking .nc-needle { animation: nc-settle 1.1s cubic-bezier(.3, 1.2, .5, 1) both; }
@keyframes nc-settle { from { transform: rotate(-120deg); } to { transform: rotate(-46deg); } }
.nav-cover--seeking.is-miss .nc-needle { animation: nc-miss .45s ease-in-out; }
@keyframes nc-miss { 0%, 100% { transform: rotate(-46deg); } 30% { transform: rotate(-58deg); } 65% { transform: rotate(-38deg); } }
.nav-cover--found .nc-needle { animation: none; }

/* password panel */
.gate { display: flex; flex-direction: column; gap: var(--sp-16); max-width: 480px; margin-top: var(--sp-16); padding: clamp(24px, 3vw, 32px); border: 1px solid var(--line-on-dark); border-radius: var(--radius-lg); background: rgba(255,255,255,0.04); backdrop-filter: blur(6px); }
.gate__title { display: flex; align-items: center; gap: var(--sp-12); font-size: var(--fs-h3); line-height: var(--lh-h3); color: var(--text-on-dark); }
.gate__title .lock-sm { width: 20px; height: 20px; color: var(--accent-on-dark); flex-shrink: 0; }
.gate__text { margin: 0; font-size: var(--fs-small); line-height: var(--lh-small); color: var(--text-on-dark-muted); }
.gate__form { display: flex; flex-direction: column; gap: var(--sp-8); margin-top: var(--sp-8); }
.gate__label { font-size: var(--fs-small); font-weight: var(--fw-semibold); color: var(--text-on-dark); }
.gate__field { position: relative; display: flex; }
.gate__input { flex: 1; min-width: 0; height: 52px; padding: 0 76px 0 var(--sp-16); border: 1.5px solid rgba(255,255,255,0.55); border-radius: var(--radius-md); background: rgba(255,255,255,0.06); color: var(--text-on-dark); font: inherit; font-size: var(--fs-body); letter-spacing: 0.02em; transition: border-color .2s ease, background .2s ease; }
.gate__input:hover { border-color: rgba(255,255,255,0.8); }
.gate__input:focus-visible { outline: 2px solid var(--accent-on-dark); outline-offset: 2px; border-color: var(--text-on-dark); background: rgba(255,255,255,0.1); }
.gate__input[aria-invalid="true"] { border-color: var(--error-on-dark); }
.gate__toggle { position: absolute; right: 4px; top: 4px; bottom: 4px; min-width: 64px; padding: 0 var(--sp-12); border: 0; border-radius: var(--radius-sm); background: transparent; color: var(--accent-on-dark); font: inherit; font-size: var(--fs-small); font-weight: var(--fw-semibold); cursor: pointer; }
.gate__toggle:hover { background: rgba(255,255,255,0.08); color: var(--text-on-dark); }
.gate__error { display: flex; align-items: center; gap: var(--sp-8); margin: 0; font-size: var(--fs-small); line-height: var(--lh-small); font-weight: var(--fw-medium); color: var(--error-on-dark); }
.gate__error::before { content: "!"; display: inline-grid; place-items: center; width: 18px; height: 18px; flex-shrink: 0; border-radius: 50%; background: var(--error-on-dark); color: var(--night); font-size: 12px; font-weight: var(--fw-bold); }
.gate__error[hidden] { display: none; }
.gate__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-16) var(--sp-24); margin-top: var(--sp-16); }
.gate__actions .btn[disabled] { opacity: 0.7; cursor: progress; }
.gate__back { display: inline-flex; align-items: center; gap: var(--sp-8); min-height: var(--tap); font-size: var(--fs-small); font-weight: var(--fw-semibold); color: var(--text-on-dark-muted); text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 4px; transition: color .2s ease, text-decoration-color .2s ease; }
.gate__back:hover { color: var(--text-on-dark); text-decoration-color: currentColor; }

/* public listing: cover thumbnail + protected flag */
.index__thumb--cover { padding: 0; background: var(--night); background-image: radial-gradient(160px 120px at 70% 50%, var(--glow) 0%, transparent 75%); }
.index__thumb--cover .nc { width: 100%; height: 100%; display: block; }
.index__thumb--cover .nc-label { display: none; }
@media (hover: hover) { .index__row a:hover .index__thumb--cover .nc-needle { transform: rotate(8deg); } }
.index__flag { display: inline-flex; align-items: center; gap: 6px; margin-top: 6px; font-family: var(--font-text); font-size: var(--fs-caption); line-height: var(--lh-caption); font-weight: var(--fw-medium); color: var(--text-secondary); }
.index__flag .lock-sm { width: 14px; height: 14px; color: var(--accent); }
.note--screens { padding-left: var(--sp-16); border-left: 1px solid var(--line); max-width: var(--measure); }

@media (max-width: 960px) {
  .nav-cover { grid-template-columns: minmax(0, 1fr); grid-template-areas: "crumb" "art" "copy" "meta"; grid-template-rows: auto; background-image: radial-gradient(520px 360px at 72% 18%, var(--glow) 0%, transparent 75%); }
  .nav-cover__art { margin: 0 calc(var(--gutter) * -1); aspect-ratio: 5 / 2; max-height: 320px; }
  .nav-cover__art .nc--square { display: none; }
  .nav-cover__art .nc--wide { display: block; }
  .nav-cover__copy { padding-top: 0; }
}
@media (max-width: 560px) { .gate { padding: var(--sp-24) var(--sp-16); margin-inline: calc(var(--sp-8) * -1); } .gate__actions .btn { width: 100%; } }
@media (prefers-reduced-motion: reduce) {
  .nc-needle, .nc-target, .nc-target__halo, .js .nav-cover--seeking .nc-needle, .nav-cover--seeking.is-miss .nc-needle { animation: none !important; transition: none !important; }
}
.nc { color: var(--text-on-dark); }

/* captions under screens: the figure shrinks to the displayed image, and the caption
   spans exactly that width (contain keeps the caption from widening the figure) */
figcaption.caption { text-align: left; margin: 0; max-width: none; contain: inline-size; }
.decision__visual { justify-self: center; width: fit-content; max-width: 100%; }
.gallery__item { justify-self: center; width: fit-content; max-width: 100%; align-items: stretch; }
.gallery__item > .screen { align-self: center; }
.demo__caption { max-width: none; }

/* clickable screens → enlarged viewer */
.screen.is-zoomable { cursor: zoom-in; transition: box-shadow .25s ease, transform .25s var(--ease-out); }
.screen.is-zoomable:hover { box-shadow: 0 2px 4px rgba(5,8,28,0.08), 0 24px 56px -18px rgba(5,8,28,0.42); transform: translateY(-2px); }
.screen.is-zoomable:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
html.viewer-open { overflow: hidden; }
.viewer { position: fixed; inset: 0; width: 100vw; height: 100dvh; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; background: transparent; color: var(--text-on-dark);
  display: none; grid-template-rows: auto minmax(0, 1fr) auto; }
.viewer[open] { display: grid; animation: viewer-in .2s var(--ease-out); }
.viewer::backdrop { background: rgba(5, 8, 28, 0.95); backdrop-filter: blur(4px); }
.viewer.no-motion[open] { animation: none; }
@keyframes viewer-in { from { opacity: 0; transform: scale(0.985); } to { opacity: 1; transform: none; } }
.viewer__bar { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-16); padding: var(--sp-16) var(--pad); }
.viewer__zoom { display: flex; align-items: center; gap: var(--sp-8); }
.viewer__btn { width: var(--tap); height: var(--tap); flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--radius-pill); border: 1px solid rgba(255,255,255,0.32); background: rgba(255,255,255,0.06); color: var(--text-on-dark); cursor: pointer; transition: background .2s ease, border-color .2s ease; }
.viewer__btn:hover:not(:disabled) { background: var(--accent); border-color: var(--accent); }
.viewer__btn:disabled, .viewer__fit:disabled { opacity: 0.4; cursor: default; }
.viewer__close { background: rgba(255,255,255,0.12); border-color: rgba(255,255,255,0.5); }
.viewer__level { min-width: 4ch; text-align: center; font-size: var(--fs-small); font-weight: var(--fw-semibold); font-variant-numeric: tabular-nums; color: var(--text-on-dark-muted); }
.viewer__fit { min-height: var(--tap); padding: 0 var(--sp-12); margin-left: var(--sp-8); border: 0; border-radius: var(--radius-pill); background: transparent; color: var(--accent-on-dark); font: inherit; font-size: var(--fs-small); font-weight: var(--fw-semibold); cursor: pointer; }
.viewer__fit:hover:not(:disabled) { color: var(--text-on-dark); text-decoration: underline; text-underline-offset: 4px; }
.viewer :focus-visible { outline: 2px solid var(--accent-on-dark); outline-offset: 3px; }
.viewer__stage { display: flex; overflow: auto; min-height: 0; padding: var(--sp-8) var(--pad); overscroll-behavior: contain; }
.viewer__stage:focus-visible { outline-offset: -4px; }
.viewer__img { display: block; margin: auto; max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; border-radius: var(--radius-md); background: var(--surface); box-shadow: 0 30px 80px -20px rgba(0,0,0,0.6); cursor: zoom-in; }
.viewer.is-zoomed .viewer__img { max-width: none; max-height: none; cursor: grab; }
.viewer.is-zoomed .viewer__stage.is-dragging .viewer__img { cursor: grabbing; }
.viewer__caption { margin: 0; padding: var(--sp-12) var(--pad) var(--sp-24); max-width: calc(80ch + 2 * var(--pad)); font-size: var(--fs-small); line-height: var(--lh-small); color: var(--text-on-dark-muted); text-align: left; }
.viewer__caption[hidden] { display: none; }
@media (max-width: 560px) { .viewer__fit { display: none; } .viewer__bar { padding-inline: var(--sp-16); } .viewer__stage { padding-inline: var(--sp-8); } .viewer__caption { padding-inline: var(--sp-16); } }
@media (prefers-reduced-motion: reduce) { .screen.is-zoomable, .screen.is-zoomable:hover { transition: none; transform: none; } .viewer[open] { animation: none; } }

/* homepage portrait: background removed, shoulders sit on the hero's bottom edge */
.hero--photo-left:has(.hero__portrait) { align-items: center; gap: clamp(24px, 3vw, 56px); padding-top: var(--sp-96); padding-bottom: 0; padding-inline: max(var(--gutter), (100vw - 1260px) / 2); justify-content: center; background-image: radial-gradient(760px 560px at 72% 62%, var(--glow) 0%, transparent 72%); }
.hero--photo-left:has(.hero__portrait) .hero__portrait { order: 2; }
.hero__portrait { display: block; flex-shrink: 0; width: clamp(300px, 30vw, 500px); height: auto; align-self: flex-end;
  /* the photo's frame cuts the shoulders: soften those side edges into the hero */
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 16%, #000 84%, transparent 100%); mask-image: linear-gradient(to right, transparent 0, #000 16%, #000 84%, transparent 100%); }
.hero--photo-left:has(.hero__portrait) .hero__body { align-self: center; padding-block: var(--sp-32) var(--sp-48); }
@media (max-width: 860px) {
  .hero--photo-left:has(.hero__portrait) .hero__portrait { order: 0; }
  .hero--photo-left:has(.hero__portrait) { align-items: center; padding-top: var(--sp-24); padding-bottom: var(--sp-64); background-image: radial-gradient(520px 420px at 50% 22%, var(--glow) 0%, transparent 75%); }
  .hero__portrait { width: min(88vw, 400px); margin: 0 auto calc(var(--sp-32) * -1);
    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 16%, #000 84%, transparent 100%), linear-gradient(to bottom, #000 70%, transparent 98%);
    mask-image: linear-gradient(to right, transparent 0, #000 16%, #000 84%, transparent 100%), linear-gradient(to bottom, #000 70%, transparent 98%);
    -webkit-mask-composite: source-in; mask-composite: intersect; }
  .hero--photo-left:has(.hero__portrait) .hero__body { align-self: stretch; padding-bottom: 0; }
}

/* homepage: Cloud GenOps row on the same dark gradient band as "My process" */
.row--night { isolation: isolate; color: var(--text-on-dark); border-top: 0; padding-block: var(--section-band) !important; margin-block: var(--sp-48); }
.row--night::before { content: ""; position: absolute; z-index: -1; inset: 0 calc(50% - 50vw); background-color: var(--night);
  background-image: radial-gradient(800px 420px at 80% 0%, var(--glow) 0%, transparent 70%); }
.row--night + .row { border-top: 0; }
.row--night .kicker, .row--night .row__label { color: var(--text-on-dark-muted); }
.row--night .row__title, .row--night .row__outcome { color: var(--text-on-dark); }
.row--night .row__desc { color: var(--text-on-dark-muted); }
.row--night .row__cta { color: var(--accent-on-dark); }
.row--night .row__cta:hover { color: var(--text-on-dark); }
.row--night :focus-visible { outline-color: var(--accent-on-dark); }
.row--night .screen { box-shadow: 0 2px 6px rgba(0,0,0,0.3), 0 30px 70px -24px rgba(0,0,0,0.75); }

/* featured project tags: sentence-case pills */
.pills { display: flex; flex-wrap: wrap; gap: var(--sp-8); margin: 0; padding: 0; list-style: none; }
.pill { display: inline-flex; align-items: center; min-height: 30px; padding: 0 var(--sp-12); border: 1px solid var(--line); border-radius: var(--radius-pill); background: var(--surface); font-size: var(--fs-caption); line-height: 1; font-weight: var(--fw-medium); color: var(--text-secondary); white-space: nowrap; }
.row--night .pill { border-color: rgba(255,255,255,0.22); background: rgba(255,255,255,0.06); color: var(--text-on-dark); }

/* "My role" under the problem statement: what Markian drove, at a glance */
.brief__role { display: flex; flex-direction: column; gap: var(--sp-8); margin-top: var(--sp-32); padding-left: var(--sp-16); border-left: var(--rule-accent); max-width: var(--measure); }
.brief__role p:not(.eyebrow) { margin: 0; font-size: var(--fs-body-lg); line-height: var(--lh-body-lg); font-weight: var(--fw-medium); color: var(--text-primary); }

/* a testimonial inside a case study: same treatment as the homepage, set larger */
.testimonial--case { max-width: 62ch; }
.testimonial--case blockquote { font-size: var(--fs-lead); line-height: var(--lh-lead); letter-spacing: var(--ls-snug); }
.nowrap { white-space: nowrap; }
.brief__quote { margin-top: var(--sp-32); max-width: var(--measure); }

/* page-identifying label in page heroes (About, Process, Case studies): larger so the page is obvious */
.hero--page .eyebrow, .hero--case .eyebrow { font-size: clamp(16px, 0.4vw + 14px, 20px); letter-spacing: 0.12em; }

/* About hero: background-removed photo with the puppy on the left, text right, feet on the hero's bottom edge */
.hero--about { align-items: center; justify-content: center; gap: clamp(32px, 5vw, 96px); padding-top: var(--sp-64); padding-bottom: 0;
  padding-inline: max(var(--gutter), (100vw - 1260px) / 2); background-image: radial-gradient(760px 560px at 30% 62%, var(--glow) 0%, transparent 72%); }
.hero__portrait--about { width: clamp(280px, 27vw, 430px); align-self: flex-end; margin-bottom: 0;
  -webkit-mask-image: linear-gradient(to bottom, #000 88%, transparent 100%); mask-image: linear-gradient(to bottom, #000 88%, transparent 100%); }
.hero--about .hero__body { align-self: center; padding-block: var(--sp-32) var(--sp-64); max-width: 640px; }
@media (max-width: 860px) {
  .hero--about { flex-direction: column; align-items: center; padding-top: var(--sp-24); padding-bottom: var(--sp-64); background-image: radial-gradient(520px 420px at 50% 24%, var(--glow) 0%, transparent 75%); }
  .hero__portrait--about { width: min(78vw, 340px); align-self: center; margin: 0 auto calc(var(--sp-24) * -1); }
  .hero--about .hero__body { align-self: stretch; padding: 0; }
}

/* About: photo in a circle (left), text right */
.hero--about { padding-bottom: var(--section-band); align-items: center; }
.hero__photo--circle { width: clamp(260px, 30vw, 440px); aspect-ratio: 1 / 1; height: auto; object-fit: cover; object-position: 50% 30%; border-radius: 50%; flex-shrink: 0; }
.hero--about .hero__body { padding-block: 0; }
@media (max-width: 860px) { .hero--about { padding-bottom: var(--sp-64); } .hero__photo--circle { width: min(72vw, 300px); align-self: center; margin: 0 auto; } }

/* About v3: full cut-out (Markian + puppy) inside a gradient circle, on the right */
.hero__circle { position: relative; flex-shrink: 0; order: 2; width: clamp(320px, 36vw, 520px); aspect-ratio: 1 / 1; border-radius: 50%; overflow: hidden;
  background: radial-gradient(circle at 50% 30%, #3b4fd8 0%, var(--glow) 45%, var(--navy) 100%);
  box-shadow: inset 0 0 0 1px rgba(154,171,255,0.25), 0 30px 80px -30px rgba(27,42,158,0.8); }
.hero__circle img { position: absolute; left: 50%; top: 5%; height: 92%; width: auto; transform: translateX(-50%); }
.hero--about { justify-content: space-between; background-image: radial-gradient(760px 560px at 74% 50%, var(--glow) 0%, transparent 72%); }
@media (max-width: 860px) { .hero__circle { order: 0; width: min(80vw, 340px); align-self: center; } }

/* About story: the turning-point question as a pull quote */
.story__pull { margin: var(--sp-16) 0; padding-left: var(--sp-24); border-left: var(--rule-accent); }
.story__pull p { margin: 0; font-family: var(--font-display); font-weight: var(--display-weight); font-size: var(--fs-h2); line-height: var(--lh-h2); letter-spacing: var(--ls-tight); color: var(--text-primary); text-wrap: balance; }
.story--stack { grid-template-columns: minmax(0, 1fr); gap: var(--stack-content, var(--sp-32)); }
.story--stack .story__text { max-width: 72ch; }

/* GenOps promotional video: click-to-load YouTube (nothing loads from YouTube until play) */
.proto--video iframe, .proto__poster--video { aspect-ratio: 16 / 9; }
.proto__poster--video { align-items: center; text-align: center; background-image: radial-gradient(700px 380px at 50% 40%, var(--glow) 0%, transparent 72%); }
.proto__poster--video .proto__note { padding-left: 0; margin-top: calc(-1 * var(--sp-32)); }
.proto--video { max-width: 1040px; }

/* GenOps experiment flow: thin-line diagram in the site's diagram style */
.xflow { margin: 0; display: flex; flex-direction: column; gap: var(--sp-16); }
.xflow__scroll { overflow-x: auto; padding: var(--sp-24); border: 1px solid rgba(35,31,32,0.07); border-radius: var(--radius-lg); background: var(--surface); }
.xf { display: block; width: 100%; min-width: 1040px; height: auto; font-family: var(--font-text); }
.xf-shape { fill: var(--surface); stroke: var(--line-diagram); stroke-width: 1.25; }
.xf-shape--soft { fill: var(--surface-soft); }
.xf-shape--gate { fill: var(--surface-tint); stroke: var(--accent); stroke-width: 1.25; }
.xf-shape--accent { fill: var(--surface-tint); stroke: var(--accent); stroke-width: 1.5; }
.xf-shape--end { fill: var(--accent); stroke: var(--accent); }
.xf-text { font-size: 12.5px; font-weight: 500; fill: var(--text-primary); }
.xf-text--end { fill: var(--on-accent); font-weight: 600; }
.xf-edge { fill: none; stroke: var(--line-diagram); stroke-width: 1.25; }
.xf-arrowhead { fill: var(--line-diagram); }
.xf-phase { font-size: 11.5px; font-weight: 700; letter-spacing: 0.14em; fill: var(--accent); }
.xf-phase-rule { stroke: var(--line); stroke-width: 1; }

/* protected case study note next to "Read the case study" */
.row__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-8) var(--sp-24); }
.row__lock { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-caption); font-weight: var(--fw-medium); color: var(--text-secondary); }
.row__lock .lock-sm { width: 14px; height: 14px; color: var(--accent); }
.row--night .row__lock { color: var(--text-on-dark-muted); }
.row--night .row__lock .lock-sm { color: var(--accent-on-dark); }
.hero--gate .gate { margin-top: var(--sp-8); }
@media (max-width: 760px) { .xflow__scroll::after { content: "Scroll to see the full flow →"; display: block; margin-top: var(--sp-8); font-size: var(--fs-caption); color: var(--text-muted); position: sticky; left: 0; } }

/* problem statement matches the outcomes list size */
.brief .lead-text { font-family: var(--font-text); font-size: var(--fs-body); line-height: var(--lh-body); letter-spacing: 0; max-width: var(--measure); color: var(--text-primary); }
/* collaborator quote: its own band right after the opening screen */
/* Collaborator perspective: a quiet full-width band right after "What I owned" */
.section--brief { padding-bottom: max(var(--sp-64), calc(var(--section) - 48px)); }
.section--role-quote { padding-bottom: clamp(56px, 3vw + 40px, 96px); }
.section.section--quote { padding-block: clamp(46px, 2.5vw + 36px, 80px); }
.perspective { display: flex; flex-direction: column; gap: var(--sp-24); }
.testimonial--feature { width: 62%; max-width: none; margin: 0; padding-left: 0; border-left: 0; gap: var(--sp-24); }
.testimonial--feature blockquote { padding-left: var(--sp-24); border-left: var(--rule-accent); }
.testimonial--feature figcaption { padding-left: calc(var(--sp-24) + 3px); }
.testimonial--feature blockquote { font-size: var(--fs-lead); line-height: var(--lh-lead); letter-spacing: var(--ls-snug); color: var(--text-primary); }
@media (max-width: 860px) { .testimonial--feature { width: 100%; } .testimonial--feature blockquote { font-size: var(--fs-lead-sm); } }

/* ================= Case-study opening system: problem → outcomes → what I owned → perspective ================= */
:root { --narrative-gap: clamp(56px, 3vw + 40px, 96px); }
.section.section--brief { padding-bottom: var(--narrative-gap); }
.section.section--role-quote { padding-bottom: var(--narrative-gap); }
.brief2 { display: flex; flex-direction: column; gap: clamp(40px, 2vw + 28px, 64px); }
.brief2__problem { display: flex; flex-direction: column; gap: var(--sp-16); }
.brief2__statement { margin: 0; max-width: 54ch; padding-left: var(--sp-24); border-left: var(--rule-accent);
  font-size: var(--fs-lead-sm); line-height: 1.5; color: var(--text-primary); text-wrap: pretty; }
.brief2__outcomes { display: flex; flex-direction: column; gap: var(--sp-16); }
.outcome-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-32) var(--col-gap); }
.outcome-grid--4, .outcome-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.outcome-grid--1 { grid-template-columns: minmax(0, 1fr); }
.outcome { display: flex; flex-direction: column; gap: var(--sp-8); padding-top: var(--sp-16); border-top: 1px solid var(--line); }
.outcome__n { font-size: var(--fs-eyebrow); line-height: var(--lh-eyebrow); font-weight: var(--fw-bold); letter-spacing: var(--ls-eyebrow); color: var(--accent); font-variant-numeric: tabular-nums; }
.outcome p { margin: 0; font-size: var(--fs-body); line-height: var(--lh-body); color: var(--text-secondary); max-width: 52ch; }
.outcome strong { color: var(--text-primary); font-weight: var(--fw-semibold); }
.brief2 .outcomes__note { border-top: 0; padding-top: var(--sp-8); }
@media (max-width: 860px) { .outcome-grid--3 { grid-template-columns: minmax(0, 1fr); gap: var(--sp-24); } }
@media (max-width: 680px) { .outcome-grid, .outcome-grid--4, .outcome-grid--2 { grid-template-columns: minmax(0, 1fr); gap: var(--sp-24); } .brief2__statement { padding-left: var(--sp-16); } }

/* What I owned: three areas of ownership, not a table */
.owned { border-top: 0; border-bottom: 0; gap: var(--sp-32) var(--col-gap); }
.owned__col, .owned__col:first-child, .owned__col:last-child { border-left: 0; padding: var(--sp-16) 0 0; border-top: 1px solid var(--line); gap: var(--sp-12); }
.owned__n { font-size: var(--fs-eyebrow); line-height: var(--lh-eyebrow); font-weight: var(--fw-bold); letter-spacing: var(--ls-eyebrow); color: var(--accent); font-variant-numeric: tabular-nums; }
.owned h3 { font-family: var(--font-display); font-size: clamp(18px, 0.4vw + 16px, 22px); line-height: 1.3; font-weight: var(--fw-semibold); letter-spacing: var(--ls-snug); text-transform: none; color: var(--text-primary); }
.owned ul { gap: var(--sp-16); margin-top: var(--sp-8); }
@media (max-width: 860px) { .owned { gap: var(--sp-32); } .owned__col, .owned__col:first-child { border-top: 1px solid var(--line); padding: var(--sp-16) 0 0; } }

/* Problem statement: its own quiet band, same treatment as Collaborator perspective, no rule */
.section.section--problem { padding-block: clamp(46px, 2.5vw + 36px, 80px); margin-top: var(--narrative-gap); }
.problem__statement { margin: 0; width: 62%; font-size: var(--fs-lead); line-height: var(--lh-lead); letter-spacing: var(--ls-snug); color: var(--text-primary); text-wrap: pretty; }
.section--problem + .section--brief { padding-top: var(--narrative-gap); }
@media (max-width: 860px) { .problem__statement { width: 100%; font-size: var(--fs-lead-sm); } }
.meta__item { display: block; }
/* meta: columns size to their content with one equal gap between every column */
@media (min-width: 1101px) {
  .meta { grid-template-columns: repeat(var(--meta-n, 5), max-content); column-gap: clamp(32px, 3vw, 64px); justify-content: space-between; }
  .meta div { max-width: none; }
  .meta__line { display: block; white-space: nowrap; }
}

/* video posters: label on top, play button underneath */
.proto__cta--stack { flex-direction: column; gap: var(--sp-24); }
.proto__poster--video .proto__note { margin-top: calc(-1 * var(--sp-24)); }
.demo .proto--video .demo__video { width: 100%; aspect-ratio: 16 / 9; object-fit: contain; background: var(--navy); }
.demo .proto--video { width: 100%; }

/* ===== Chapter-break system: dark gradient marks major narrative transitions ===== */
.night { --glow-at: 80% 0%; background-image: radial-gradient(800px 420px at var(--glow-at), var(--glow) 0%, transparent 70%); }
.night--launch { --glow-at: 78% 100%; }
.night--close { --glow-at: 50% 110%; }
/* a light section running into a dark chapter needs less trailing space: the color change is the break */
.section:not(.night):not(.soft):has(+ .night) { padding-bottom: var(--narrative-gap); }
/* dark-chapter content */
.night .reflection__text { color: var(--text-on-dark-muted); }
.night .note { color: var(--text-on-dark-muted); }
.night .proto__poster { box-shadow: inset 0 0 0 1px var(--line-on-dark); }
.night.reflection h2 { color: var(--text-on-dark); }
.night + .section:not(.night):not(.soft) { padding-top: var(--narrative-gap); }
figcaption.caption { text-align: center; text-wrap: balance; }
.demo { max-width: 1040px; }
#promo .heading p:not(.eyebrow), #demo .heading p:not(.eyebrow) { max-width: 1040px; }
#lifecycle .heading p:not(.eyebrow) { max-width: none; }
/* GenOps discovery: intro wraps to the width of its title */
#solution .heading { width: fit-content; max-width: 100%; }
#solution .heading p:not(.eyebrow) { max-width: none; contain: inline-size; }
#structure .heading { width: fit-content; max-width: 100%; }
#structure .heading p:not(.eyebrow) { max-width: none; contain: inline-size; }

/* Collaborator perspective: a blue-led gradient band (more cobalt, less black) so the proof moment stands out */
.section.section--quote {
  background-color: var(--glow);
  background-image:
    radial-gradient(900px 480px at 18% 0%, rgba(47,75,255,0.55) 0%, transparent 70%),
    linear-gradient(120deg, var(--glow) 0%, #142082 45%, var(--navy) 100%);
  color: var(--text-on-dark);
}
.section--quote .eyebrow { color: var(--text-on-dark-muted); }
.section--quote .testimonial--feature blockquote { color: var(--text-on-dark); border-left-color: var(--accent-on-dark); }
.section--quote .testimonial--feature figcaption { color: var(--text-on-dark-muted); }
.section--quote .testimonial--feature figcaption strong { color: var(--text-on-dark); }
.section--quote :focus-visible { outline-color: var(--accent-on-dark); }
.section--quote + .night { box-shadow: inset 0 1px 0 rgba(154,171,255,0.12); }

/* What I owned: a clean white band with three soft ownership panels */
#role.section { background: var(--surface); border-top: 1px solid var(--line); padding-top: var(--narrative-gap); }
#role .owned { gap: var(--sp-24); }
#role .owned__col, #role .owned__col:first-child, #role .owned__col:last-child {
  padding: var(--sp-32); border: 0; border-top: var(--rule-accent); border-radius: 0 0 var(--radius-lg) var(--radius-lg);
  background: var(--surface-soft); gap: var(--sp-16); }
#role .owned h3 { font-size: clamp(20px, 0.4vw + 18px, 24px); }
#role .owned li { color: var(--text-secondary); }
@media (max-width: 860px) { #role .owned { gap: var(--sp-16); } #role .owned__col, #role .owned__col:first-child, #role .owned__col:last-child { padding: var(--sp-24); border-top: var(--rule-accent); } }

/* ===== "On this page" slide-out (case studies; tablet and desktop only) ===== */
main > section[id] { scroll-margin-top: 96px; }
.toc-toggle { position: fixed; left: 20px; top: 104px; z-index: 30; display: inline-flex; align-items: center; gap: var(--sp-8); min-height: var(--tap); padding: 0 var(--sp-16) 0 var(--sp-12);
  border: 1px solid var(--line); border-radius: var(--radius-pill); background: rgba(255,255,255,0.92); backdrop-filter: blur(8px); color: var(--text-primary);
  font: inherit; font-size: var(--fs-small); font-weight: var(--fw-semibold); cursor: pointer; box-shadow: 0 6px 20px -10px rgba(5,8,28,0.35); transition: background .2s ease, border-color .2s ease, color .2s ease; }
.toc-toggle svg { color: var(--accent); }
.toc-toggle:hover, .toc-toggle[aria-expanded="true"] { border-color: var(--accent); color: var(--accent); }
.toc { position: fixed; left: 0; top: 0; bottom: 0; z-index: 40; width: min(320px, 82vw); padding: var(--sp-32) var(--sp-24); overflow-y: auto;
  background: var(--surface); border-right: 1px solid var(--line); box-shadow: 20px 0 50px -30px rgba(5,8,28,0.45);
  transform: translateX(-100%); transition: transform 260ms var(--ease-out); }
.toc.is-open { transform: none; }
.toc__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--sp-24); }
.toc__close { width: var(--tap); height: var(--tap); display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--line); border-radius: var(--radius-pill); background: transparent; color: var(--text-primary); cursor: pointer; }
.toc__close:hover { border-color: var(--accent); color: var(--accent); }
.toc__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; border-left: 1px solid var(--line); }
.toc__list a { display: flex; align-items: center; min-height: 40px; padding: 0 var(--sp-16); margin-left: -1px; border-left: 3px solid transparent; color: var(--text-secondary); text-decoration: none; font-size: var(--fs-small); line-height: 1.35; transition: color .2s ease, border-color .2s ease, background .2s ease; }
.toc__list a:hover { color: var(--text-primary); background: var(--surface-soft); }
.toc__list a[aria-current] { color: var(--accent); border-left-color: var(--accent); font-weight: var(--fw-semibold); }
@media (max-width: 760px) { .toc-toggle, .toc { display: none !important; } }
@media (prefers-reduced-motion: reduce) { .toc { transition: none; } }

/* collapsed to an icon so it never covers the breadcrumb; the label slides out on hover/focus */
.toc-toggle { left: 14px; width: var(--tap); padding: 0; justify-content: flex-start; gap: 0; overflow: hidden; white-space: nowrap; transition: width .25s var(--ease-out), background .2s ease, border-color .2s ease, color .2s ease; }
.toc-toggle svg { flex: 0 0 auto; margin: 0 12px 0 12px; }
.toc-toggle__label { padding-right: var(--sp-16); opacity: 0; transition: opacity .2s ease; }
.toc-toggle:hover, .toc-toggle:focus-visible { width: 156px; }
.toc-toggle:hover .toc-toggle__label, .toc-toggle:focus-visible .toc-toggle__label { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .toc-toggle, .toc-toggle__label { transition: none; } }

/* where the side gutter is narrower than the button, nudge the breadcrumb so they never overlap */
@media (min-width: 761px) and (max-width: 1240px) { .has-toc .hero--case .crumb, .has-toc .nav-cover__crumb { padding-left: calc(72px - var(--gutter)); } }

/* Case-study menu: dark, matches nav + chapter-break gradient */
.toc-toggle { background: rgba(5,8,28,0.82); border: 1px solid var(--line-on-dark); color: var(--text-on-dark); box-shadow: inset 0 1px 0 rgba(255,255,255,0.12), 0 10px 28px -14px rgba(5,8,28,0.7); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.toc-toggle svg { color: var(--accent-on-dark); }
.toc-toggle:hover, .toc-toggle:focus-visible, .toc-toggle[aria-expanded="true"] { background: rgba(27,42,158,0.9); border-color: var(--accent-on-dark); color: var(--text-on-dark); }
.toc-toggle:hover, .toc-toggle:focus-visible { width: 204px; }
.toc-toggle:focus-visible { outline: 2px solid var(--accent-on-dark); outline-offset: 3px; }
.toc { background-color: var(--night); background-image: radial-gradient(520px 320px at 0% 0%, var(--glow) 0%, transparent 72%); border-right: 1px solid var(--line-on-dark); color: var(--text-on-dark); box-shadow: 24px 0 60px -30px rgba(0,0,0,0.8); width: min(340px, 82vw); }
.toc .eyebrow { color: var(--accent-on-dark); }
.toc__close { background: transparent; border-color: var(--line-on-dark); color: var(--text-on-dark); }
.toc__close:hover { background: rgba(255,255,255,0.08); }
.toc a:focus-visible, .toc__close:focus-visible { outline: 2px solid var(--accent-on-dark); outline-offset: 2px; }
.toc__list { border-left-color: var(--line-on-dark); }
.toc__list a { color: var(--text-on-dark-muted); }
.toc__list a:hover { color: var(--text-on-dark); background: rgba(255,255,255,0.05); }
.toc__list a[aria-current] { color: var(--text-on-dark); border-left-color: var(--accent-on-dark); background: rgba(154,171,255,0.08); }
.toc__next { margin-top: var(--sp-16); padding-top: var(--sp-16); border-top: 1px solid var(--line-on-dark); }
.toc__list .toc__next a { flex-direction: column; align-items: flex-start; justify-content: center; gap: 2px; min-height: 56px; color: var(--text-on-dark); font-weight: var(--fw-semibold); font-family: var(--font-display); font-size: var(--fs-body); border-left-color: transparent; }
.toc__list .toc__next a:hover { background: rgba(27,42,158,0.45); }
.toc__next a span { font-family: var(--font-text); font-size: 12px; font-weight: var(--fw-bold); letter-spacing: var(--ls-eyebrow); text-transform: uppercase; color: var(--accent-on-dark); }
.toc__next { margin-left: -1px; padding-left: 1px; background-color: var(--night); }
/* Menu button hover = homepage primary button: accent blue + glass sheen sweep */
.toc-toggle { isolation: isolate; transition: width .25s var(--ease-out), background .25s ease, border-color .25s ease, box-shadow .25s ease, color .25s ease; }
.toc-toggle::after { content: ""; position: absolute; top: -50%; left: -60%; width: 45%; height: 200%; z-index: -1; pointer-events: none; background: linear-gradient(100deg, transparent 0%, rgba(255,255,255,0.35) 50%, transparent 100%); transform: translateX(-120%) rotate(12deg); transition: transform .7s ease; }
.toc-toggle:hover, .toc-toggle:focus-visible, .toc-toggle[aria-expanded="true"] { background: var(--accent); border-color: var(--accent); color: var(--on-accent); box-shadow: inset 0 1px 0 rgba(255,255,255,0.35), 0 10px 28px -10px rgba(47,75,255,0.75); }
.toc-toggle:hover svg, .toc-toggle:focus-visible svg, .toc-toggle[aria-expanded="true"] svg { color: var(--on-accent); }
.toc-toggle:hover::after, .toc-toggle:focus-visible::after { transform: translateX(520%) rotate(12deg); }
@media (prefers-reduced-motion: reduce) { .toc-toggle::after { display: none; } }
/* Close button hover = primary-blue glass, same as the menu button */
.toc__close { position: relative; overflow: hidden; isolation: isolate; transition: background .25s ease, border-color .25s ease, box-shadow .25s ease, color .25s ease; }
.toc__close::after { content: ""; position: absolute; top: -50%; left: -80%; width: 60%; height: 200%; z-index: -1; pointer-events: none; background: linear-gradient(100deg, transparent 0%, rgba(255,255,255,0.4) 50%, transparent 100%); transform: translateX(-60%) rotate(12deg); transition: transform .6s ease; }
.toc__close:hover, .toc__close:focus-visible { background: var(--accent); border-color: var(--accent); color: var(--on-accent); box-shadow: inset 0 1px 0 rgba(255,255,255,0.35), 0 8px 22px -8px rgba(47,75,255,0.75); }
.toc__close:hover::after, .toc__close:focus-visible::after { transform: translateX(380%) rotate(12deg); }
@media (prefers-reduced-motion: reduce) { .toc__close::after { display: none; } }

/* ================= Case-study hero: copy left, product right, metadata strip below ================= */
.hero--cs { padding-top: var(--sp-16); padding-bottom: clamp(32px, 2vw + 24px, 56px); gap: 0;
  background-image: radial-gradient(900px 560px at var(--glow-at, 70% 40%), var(--glow) 0%, transparent 72%), radial-gradient(620px 420px at 6% 18%, rgba(27,42,158,0.38) 0%, transparent 70%); }
.hero--cs .crumb { margin-bottom: clamp(16px, 2vw + 8px, 40px); }
.cs-hero { display: grid; grid-template-columns: minmax(0, 43fr) minmax(0, 57fr); gap: clamp(40px, 5vw, 88px); align-items: center; }
.cs-hero__copy { display: flex; flex-direction: column; gap: var(--sp-24); min-width: 0; }
.hero--cs h1 { font-size: clamp(36px, 2.2vw + 18px, 54px); }
.hero--cs .hero__lead { max-width: 46ch; }
.cs-hero__visual { min-width: 0; display: flex; justify-content: flex-end; }
.cs-hero__visual > .screen { width: 100%; height: auto; max-height: none; aspect-ratio: 16 / 10.4; object-fit: cover; object-position: top left; border-radius: var(--radius-md);
  box-shadow: 0 0 0 1px rgba(255,255,255,0.08), 0 30px 60px -28px rgba(0,0,0,0.85), 0 0 80px -30px rgba(47,75,255,0.45); }
.cs-hero__visual--compose .compose { width: 100%; padding: 0; }
.cs-hero__visual--compose .compose .screen { box-shadow: 0 0 0 1px rgba(255,255,255,0.08), 0 26px 54px -24px rgba(0,0,0,0.85); }
.cs-hero__visual--phones { justify-content: center; align-items: flex-end; gap: clamp(12px, 1.6vw, 24px); }
.cs-hero__visual--phones .screen { width: auto; height: clamp(320px, 30vw, 440px); max-height: none; max-width: none; aspect-ratio: auto; border-radius: 22px;
  box-shadow: 0 0 0 1px rgba(255,255,255,0.1), 0 26px 54px -24px rgba(0,0,0,0.85); }
.cs-hero__visual--phones[data-n="3"] .screen { height: clamp(260px, 24vw, 380px); }
.cs-hero__visual--phones[data-n="3"] .screen:nth-child(2) { margin-bottom: var(--sp-32); }
.cs-hero__confidential { display: flex; flex-direction: column; gap: var(--sp-12); max-width: 480px; padding: var(--sp-32); border: 1px solid var(--line-on-dark); border-radius: var(--radius-lg);
  background: rgba(255,255,255,0.04); color: var(--text-on-dark-muted); font-size: var(--fs-small); line-height: var(--lh-small); }
.cs-hero__confidential .confidential__icon { color: var(--accent-on-dark); }
.cs-hero__confidential p { margin: 0; }
.cs-hero__meta { margin-top: clamp(32px, 2vw + 20px, 52px); padding-top: var(--sp-24); }
@media (min-width: 761px) and (max-width: 1100px) {
  .cs-hero__meta { grid-template-columns: repeat(var(--meta-n, 4), max-content); column-gap: var(--sp-32); justify-content: space-between; }
  .cs-hero__meta .meta__line { display: block; white-space: nowrap; }
}
/* tablet + mobile: stack copy, visual, metadata */
@media (max-width: 960px) {
  .cs-hero { grid-template-columns: minmax(0, 1fr); gap: var(--sp-40, 40px); }
  .cs-hero__visual { justify-content: flex-start; }
  .cs-hero__visual--phones { justify-content: center; }
  .cs-hero__visual--compose .compose { max-width: 720px; }
  .cs-hero__visual > .screen { max-width: 760px; }
}
@media (max-width: 760px) {
  .cs-hero__meta { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-24) var(--sp-24); }
  .cs-hero__meta .meta__wide { grid-column: 1 / -1; }
  .cs-hero__visual--phones .screen { height: min(62vw, 340px); }
  .cs-hero__visual--phones[data-n="3"] .screen { height: min(52vw, 260px); border-radius: 14px; }
  .cs-hero__visual--phones[data-n="3"] .screen:nth-child(2) { margin-bottom: var(--sp-16); }
}
@media (max-width: 360px) { .cs-hero__meta { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 760px) { .cs-hero__meta:has(.meta__wide) > div:first-child { grid-column: 1 / -1; } }

/* drawer: current section reads in the accent blue with a left rule and a small marker */
.toc__list a[aria-current] { position: relative; color: var(--accent-on-dark); font-weight: var(--fw-semibold); border-left-color: var(--accent-on-dark); background: rgba(154,171,255,0.1); }
.toc__list a[aria-current]::before { content: ""; position: absolute; left: -5px; top: 50%; width: 7px; height: 7px; margin-top: -3.5px; border-radius: 50%; background: var(--accent-on-dark); box-shadow: 0 0 0 3px rgba(154,171,255,0.22); }
section[tabindex="-1"]:focus { outline: none; }

/* Blue vertical rules are reserved for quotes (pull quotes, testimonials, collaborator perspective) */
.hero__lead, .hero__aside, .brief__role, .brief2__statement, .row__fact--contrib { padding-left: 0; border-left: 0; }
.hero__note { padding-left: 0; }
/* case-study hero: copy starts level with the top of the product visual; titles a step smaller */
.cs-hero { align-items: start; }
.hero--cs h1 { font-size: clamp(32px, 1.7vw + 17px, 46px); }
.cs-hero__visual img { cursor: default; }
@media (max-width: 960px) { .cs-hero { align-items: stretch; } }
@media (min-width: 961px) { .cs-hero__copy { margin-top: -5px; } }   /* optical: eyebrow cap height level with the image edge */
/* Homepage testimonials: the blue rule sits beside the quote only, and every quote row is as tall as the longest
   quote (subgrid shares one row height across all cards), so the rules match in length */
.carousel { grid-template-rows: auto auto; row-gap: 0; }
.carousel > .testimonial { display: grid; grid-row: span 2; grid-template-rows: subgrid; row-gap: var(--sp-24); padding-left: 0; border-left: 0; }
.carousel > .testimonial blockquote { padding-left: var(--sp-24); border-left: var(--rule-accent); }
.carousel > .testimonial figcaption { margin-top: 0; padding-left: calc(var(--sp-24) + 3px); align-self: start; }
@supports not (grid-template-rows: subgrid) {
  .carousel > .testimonial { display: flex; flex-direction: column; }
  .carousel > .testimonial blockquote { flex: 1; }
}
/* Arrow buttons: same primary-blue glass hover as the main CTA */
.carousel__btn { position: relative; overflow: hidden; isolation: isolate; transition: background .25s ease, border-color .25s ease, box-shadow .25s ease, color .25s ease; }
.carousel__btn::after { content: ""; position: absolute; top: -50%; left: -80%; width: 60%; height: 200%; z-index: -1; pointer-events: none; background: linear-gradient(100deg, transparent 0%, rgba(255,255,255,0.4) 50%, transparent 100%); transform: translateX(-60%) rotate(12deg); transition: transform .6s ease; }
.carousel__btn:hover, .carousel__btn:focus-visible { background: var(--accent); border-color: var(--accent); color: var(--on-accent); box-shadow: inset 0 1px 0 rgba(255,255,255,0.35), 0 8px 22px -8px rgba(47,75,255,0.75); }
.carousel__btn:hover::after, .carousel__btn:focus-visible::after { transform: translateX(380%) rotate(12deg); }
@media (prefers-reduced-motion: reduce) { .carousel__btn::after { display: none; } }



/* ================= Button system: enterprise, flat, WCAG AA =================
   8px radius · 12px 24px · weight 600 · 0.2s ease-in-out · no glows, no shadows on primary/secondary.
   Contrast: primary white on #1D4ED8 6.7:1 (hover #1E40AF 8.7:1) · secondary white on dark hero 15:1+, border #E5E7EB vs black 16:1
   · utility #0F172A on #FFFFFF 17.9:1 (hover #F3F4F6 16.3:1). Tertiary (arrow / icon) buttons are untouched. */
:root {
  --btn-radius: 8px; --btn-pad-y: 12px; --btn-pad-x: 24px; --btn-weight: 600; --btn-ease: 0.2s ease-in-out;
  --btn-primary-bg: #1D4ED8; --btn-primary-bg-hover: #1E40AF; --btn-primary-fg: #FFFFFF;
  --btn-secondary-fg: #FFFFFF; --btn-secondary-border: #E5E7EB; --btn-secondary-bg-hover: rgba(255,255,255,0.1);
  --btn-secondary-fg-light: #0F172A; --btn-secondary-border-light: #64748B; --btn-secondary-bg-hover-light: rgba(15,23,42,0.06);
  --btn-utility-bg: #FFFFFF; --btn-utility-bg-hover: #F3F4F6; --btn-utility-fg: #0F172A;
  --btn-focus: #1D4ED8; --btn-focus-on-dark: #9AABFF;
}
.btn.btn--primary, .btn.btn--ghost, .btn.btn--utility {
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-8);
  min-height: 44px; padding: var(--btn-pad-y) var(--btn-pad-x); border-radius: var(--btn-radius);
  font: inherit; font-size: var(--fs-small); font-weight: var(--btn-weight); letter-spacing: normal; line-height: 1.25; white-space: nowrap;
  text-decoration: none; box-shadow: none; overflow: visible; isolation: auto; cursor: pointer;
  transition: background-color var(--btn-ease), border-color var(--btn-ease), color var(--btn-ease), box-shadow var(--btn-ease); }
/* retire the old sheen layers on these three variants */
.btn.btn--primary::before, .btn.btn--ghost::before, .btn.btn--utility::before,
.btn.btn--primary::after, .btn.btn--ghost::after, .btn.btn--utility::after { content: none; }
/* 1 · Primary */
.btn.btn--primary { background: var(--btn-primary-bg); color: var(--btn-primary-fg); border: 0; }
.btn.btn--primary:hover { background: var(--btn-primary-bg-hover); color: var(--btn-primary-fg); box-shadow: none; }
/* 2 · Secondary — dark surfaces (hero, footer, night bands) per spec; light surfaces get dark text + slate border */
.btn.btn--ghost { background: transparent; color: var(--btn-secondary-fg-light); border: 1px solid var(--btn-secondary-border-light); }
.btn.btn--ghost:hover { background: var(--btn-secondary-bg-hover-light); color: var(--btn-secondary-fg-light); border-color: var(--btn-secondary-border-light); box-shadow: none; }
:is(.hero, .site-nav, .site-footer, .night) .btn.btn--ghost { color: var(--btn-secondary-fg); border-color: var(--btn-secondary-border); }
:is(.hero, .site-nav, .site-footer, .night) .btn.btn--ghost:hover { background: var(--btn-secondary-bg-hover); color: var(--btn-secondary-fg); border-color: var(--btn-secondary-border); }
/* 3 · Navigation / utility */
.btn.btn--utility { background: var(--btn-utility-bg); color: var(--btn-utility-fg); border: 0; }
.btn.btn--utility:hover { background: var(--btn-utility-bg-hover); color: var(--btn-utility-fg); box-shadow: 0 2px 4px rgba(0,0,0,0.25); }
.btn.btn--sm { min-height: 40px; padding: 10px 18px; }
/* focus: visible on every surface */
.btn.btn--primary:focus-visible, .btn.btn--ghost:focus-visible, .btn.btn--utility:focus-visible { outline: 2px solid var(--btn-focus); outline-offset: 2px; }
:is(.hero, .site-nav, .site-footer, .night) .btn:focus-visible { outline-color: var(--btn-focus-on-dark); }
.btn.btn--primary:active { background: var(--btn-primary-bg-hover); }
/* hero buttons share the row on phones */
@media (max-width: 560px) { .hero__body > .btn-row .btn.btn--primary, .hero__body > .btn-row .btn.btn--ghost { padding: var(--btn-pad-y) var(--sp-12); } }
@media (forced-colors: active) { .btn.btn--primary, .btn.btn--utility { border: 1px solid ButtonText; } }
@media (prefers-reduced-motion: reduce) { .btn.btn--primary, .btn.btn--ghost, .btn.btn--utility { transition: none; } }
button.btn { font: inherit; }

/* cipher reveal (homepage headline) */
.cipher-pending [data-cipher] { visibility: hidden; animation: cipher-failsafe 0s linear 3s forwards; }
@keyframes cipher-failsafe { to { visibility: visible; } }
.cf-word { display: inline-block; white-space: nowrap; }
.cf { position: relative; display: inline-block; }
.cf.is-scr { color: transparent; }
.cf.is-scr::after { content: attr(data-g); position: absolute; left: 50%; top: 0; transform: translateX(-50%); color: var(--accent-on-dark); }
/* CTA typography + sizing: 16/24 Medium on every CTA; 52px hero-size buttons, 40px nav CTA */
.btn.btn--primary, .btn.btn--ghost, .btn.btn--utility { box-sizing: border-box; font-size: 16px; font-weight: 500; line-height: 24px; }
.btn.btn--primary, .btn.btn--ghost { height: 52px; min-height: 52px; padding: 0 var(--btn-pad-x); vertical-align: middle; }
.btn.btn--utility.btn--sm { height: 40px; min-height: 40px; padding: 0 18px; }
.hero__body > .btn-row { gap: 12px; align-items: center; }
@media (max-width: 560px) { .hero__body > .btn-row .btn.btn--primary, .hero__body > .btn-row .btn.btn--ghost { padding: 0 var(--sp-12); } }

/* featured cards: one credible result at a glance */
.row__result dd { display: inline-flex; align-items: center; gap: var(--sp-8); margin: 0; font-size: var(--fs-small); line-height: var(--lh-small); font-weight: var(--fw-semibold); color: var(--accent); }
.row__result svg { flex: none; }
.row--night .row__result dd { color: var(--accent-on-dark); }
/* compact "More projects" line */
.more { display: flex; flex-direction: column; gap: var(--sp-16); padding-top: var(--sp-32); border-top: 1px solid var(--line); }
.more__label { margin: 0; font-size: var(--fs-eyebrow); line-height: var(--lh-eyebrow); font-weight: var(--fw-bold); letter-spacing: var(--ls-eyebrow); text-transform: uppercase; color: var(--accent); }
.more__list { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--sp-16) var(--sp-24); margin: 0; padding: 0; list-style: none; }
.more__item { display: flex; flex-direction: column; gap: 4px; min-height: var(--tap); padding: var(--sp-12) 0; text-decoration: none; color: inherit; }
.more__name { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-display); font-size: var(--fs-body); font-weight: var(--fw-semibold); color: var(--text-primary); text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 4px; transition: text-decoration-color .2s ease, color .2s ease; }
.more__name svg { color: var(--text-muted); }
.more__item:hover .more__name { color: var(--accent); text-decoration-color: currentColor; }
.more__meta { font-size: var(--fs-caption); line-height: var(--lh-caption); color: var(--text-muted); }
@media (max-width: 860px) { .more__list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 420px) { .more__list { grid-template-columns: minmax(0, 1fr); } }
/* slimmer process band */
.section.section--compact { padding-block: clamp(48px, 3vw + 32px, 80px); }
.link--on-dark { color: var(--accent-on-dark); }
.hero__resume { align-self: center; margin-left: var(--sp-8); }
.site-footer__avail { margin: var(--sp-8) 0 0; font-size: var(--fs-body); line-height: var(--lh-body); color: var(--text-on-dark-muted); }

/* ================= Password gate: one focused task ================= */
.site-footer--bare { padding-top: var(--sp-32); gap: 0; }
.hero--gate2 { display: block; padding-top: var(--sp-16); padding-bottom: clamp(48px, 4vw + 24px, 96px); min-height: calc(100svh - 88px);
  background-image: radial-gradient(760px 520px at 50% 30%, var(--glow) 0%, transparent 72%); }
.gate2 { display: flex; flex-direction: column; align-items: center; gap: var(--sp-24); max-width: 480px; margin: clamp(8px, 2vw, 24px) auto 0; }
.gate2__intro { display: flex; flex-direction: column; align-items: center; gap: var(--sp-8); text-align: center; }
.gate2__intro h1 { font-size: clamp(36px, 2vw + 24px, 52px); line-height: 1.08; }
.gate2__lead { margin: var(--sp-8) 0 0; max-width: 40ch; font-size: var(--fs-body); line-height: var(--lh-body); color: var(--text-on-dark-muted); text-wrap: balance; }
.gate2 .gate { width: 100%; max-width: none; margin: 0; background: rgba(5,8,28,0.72); }
.gate2 .gate__title { font-size: var(--fs-body); line-height: var(--lh-body); }
.gate__submit.btn.btn--primary { width: 100%; margin-top: var(--sp-16); }
.gate__submit[disabled] { opacity: 1; cursor: progress; }
.gate__foot { display: flex; justify-content: space-between; flex-wrap: wrap; gap: var(--sp-8) var(--sp-24); }
/* compass: rings + needle only; it idles gently, spins while checking, then lands on the target */
.gate-compass { display: block; width: clamp(120px, 10vw + 64px, 176px); height: auto; overflow: visible; }
.gate-compass__ring { fill: none; stroke: rgba(154,171,255,.38); stroke-width: 1; }
.gate-compass__ring--inner { stroke: rgba(154,171,255,.22); }
.gate-compass__ring--dots { stroke: rgba(154,171,255,.3); stroke-dasharray: 1 5; stroke-linecap: round; }
.gate-compass__ticks path { stroke: rgba(154,171,255,.55); stroke-width: 1.5; stroke-linecap: round; }
.gate-compass__target { fill: var(--accent-on-dark); opacity: .55; transform-origin: 100px 10px; transition: opacity .3s ease; }
.gate-compass__north { fill: #fff; }
.gate-compass__south { fill: rgba(154,171,255,.35); }
.gate-compass__hub { fill: #05081c; stroke: #fff; stroke-width: 2; }
.gate-compass__needle { transform-origin: 100px 100px; transform: rotate(-38deg); animation: compass-idle 6s ease-in-out infinite; }
@keyframes compass-idle { 0%, 100% { transform: rotate(-38deg); } 50% { transform: rotate(-22deg); } }
.gate-compass.is-active .gate-compass__needle { animation: none; }
.gate-compass.is-loading .gate-compass__target { opacity: .9; }
.gate-compass.is-found .gate-compass__target { opacity: 1; animation: compass-found .7s ease-out 1 both; }
@keyframes compass-found { 0% { transform: scale(1); filter: drop-shadow(0 0 0 rgba(154,171,255,0)); } 45% { transform: scale(1.7); filter: drop-shadow(0 0 8px rgba(154,171,255,.95)); } 100% { transform: scale(1.25); filter: drop-shadow(0 0 5px rgba(154,171,255,.7)); } }
@media (prefers-reduced-motion: reduce) { .gate-compass__needle, .gate-compass.is-found .gate-compass__target { animation: none; } }
@media (max-width: 560px) { .gate2 { gap: var(--sp-16); } .gate__foot { flex-direction: column; } }
/* gate fits a 900px-tall screen: smaller emblem, tighter rhythm */
.gate-compass { width: clamp(108px, 5vw + 56px, 132px); }
.gate2 { gap: 20px; margin-top: 0; }
.hero--gate2 .crumb { margin-bottom: var(--sp-8); }
.gate2 .gate { gap: 12px; padding: 28px; }
.gate2 .gate__submit.btn.btn--primary { margin-top: var(--sp-8); }
.gate__text--lock { display: flex; gap: var(--sp-12); align-items: flex-start; }
.gate__text--lock .lock-sm { flex: none; width: 18px; height: 18px; margin-top: 2px; color: var(--accent-on-dark); }
.gate__foot { gap: var(--sp-8) var(--sp-16); }

/* footer: always pure black; the blue glow lives only behind the "Let's connect" block, never the bar */
.site-footer, .site-footer--bare { background-color: #000; background-image: none; }
.site-footer__cta { position: relative; isolation: isolate; }
.site-footer__cta::before { content: ""; position: absolute; z-index: -1; pointer-events: none; inset: calc(-1 * var(--section)) calc(-1 * var(--gutter)) 0;
  background: radial-gradient(900px 400px at 20% 0%, var(--glow) 0%, transparent 70%); }
a.site-footer__logo { color: var(--text-on-dark); text-decoration: none; border-radius: 4px; }
a.site-footer__logo:hover { color: var(--accent-on-dark); }
a.site-footer__logo:focus-visible { outline: 2px solid var(--accent-on-dark); outline-offset: 4px; }
/* every hero title matches the homepage headline */
main .hero h1, main .hero--cs h1, main .gate2__intro h1, main .hero--page h1, main .hero--case h1 { font-size: var(--fs-display); line-height: var(--lh-display); letter-spacing: -0.03em; }
/* case heroes: room for the larger title, never split a word */
.cs-hero { grid-template-columns: minmax(0, 48fr) minmax(0, 52fr); }
main .hero h1 { overflow-wrap: normal; word-break: normal; hyphens: manual; }
@media (max-width: 960px) { .cs-hero { grid-template-columns: minmax(0, 1fr); } }
/* a single very long word (e.g. "Pharmaceutical") scales down only when it can't fit its column */
main .hero--cs .cs-hero__copy--longword h1 { font-size: min(var(--fs-display), 4.7vw, 68px); }
@media (max-width: 960px) { main .hero--cs .cs-hero__copy--longword h1 { font-size: min(var(--fs-display), calc((100vw - 2 * var(--gutter)) * 0.115)); } }

/* ================= Résumé ================= */
.resume__actions { align-items: center; }
.resume__print { background: none; border: 0; padding: 0 var(--sp-8); font: inherit; font-size: var(--fs-small); font-weight: var(--fw-semibold); cursor: pointer; text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 4px; }
.resume__print:hover { text-decoration-color: currentColor; }
.resume-row { grid-template-columns: 168px minmax(0, 1fr); }
.resume-row__when { margin: 6px 0 0; font-size: var(--fs-small); line-height: var(--lh-small); font-weight: var(--fw-semibold); color: var(--accent); }
.resume-row h2 { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--sp-8) var(--sp-12); }
.resume__note { font-family: var(--font-text); font-size: var(--fs-caption); font-weight: var(--fw-semibold); letter-spacing: .06em; text-transform: uppercase; color: var(--text-muted); }
.resume-row .kicker { margin-top: calc(-1 * var(--sp-8)); }
.resume-row__points { margin: 0; padding-left: 1.1em; display: flex; flex-direction: column; gap: var(--sp-8); color: var(--text-secondary); max-width: var(--measure); }
.resume-row__points li::marker { color: var(--accent); }
.resume-row .see-links a .lock-sm { width: 14px; height: 14px; margin-left: 4px; vertical-align: -2px; }
.resume-more { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--split-gap); align-items: start; }
.resume-edu { list-style: none; margin: var(--sp-8) 0 0; padding: 0; }
.resume-edu__item { display: flex; justify-content: space-between; gap: var(--sp-16); padding: var(--sp-16) 0; border-top: 1px solid var(--line); }
.resume-edu__item div { display: flex; flex-direction: column; gap: 2px; }
.resume-edu__item span { font-size: var(--fs-small); line-height: var(--lh-small); color: var(--text-secondary); }
.resume-edu__when { flex: none; font-weight: var(--fw-semibold); color: var(--text-muted) !important; }
.resume-skills { display: flex; flex-direction: column; margin-top: var(--sp-8); }
.resume-skills__group { padding: var(--sp-16) 0; border-top: 1px solid var(--line); }
.resume-skills__group h3 { margin: 0 0 var(--sp-8); font-size: var(--fs-body); line-height: var(--lh-body); }
.resume-skills__group p { margin: 0; font-size: var(--fs-small); line-height: var(--lh-small); color: var(--text-secondary); }
@media (max-width: 860px) { .resume-more { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 600px) { .resume-row { grid-template-columns: minmax(0, 1fr); gap: var(--sp-8); } .resume-edu__item { flex-direction: column; gap: 4px; } }
@media print {
  .site-nav, .site-footer, .proc-aside, .resume__actions, .toc-toggle, .skip-link { display: none !important; }
  .hero, .soft, .night { background: none !important; color: #000 !important; padding: 0 0 12pt !important; }
  .hero h1, .hero .eyebrow, .hero__lead { color: #000 !important; }
  .proc-layout, .resume-more { display: block !important; }
  .proc-row { padding-block: 10pt !important; break-inside: avoid; }
  a { color: #000 !important; }
}
.resume-row { grid-template-columns: 184px minmax(0, 1fr); }
.resume-row__when { white-space: nowrap; }
@media (max-width: 600px) { .resume-row { grid-template-columns: minmax(0, 1fr); } }

/* résumé: timeline as tabs (desktop) — one role at a time on the right */
.resume-tab[aria-selected="true"] { color: var(--text-primary); font-weight: var(--fw-bold); }
.resume-tab[aria-selected="true"] .path__dot { background: var(--accent); }
.resume-tab:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }
.resume-panels [role="tabpanel"] { border-top: 1px solid var(--line-strong); padding-top: var(--sp-32); }
.resume-panels [role="tabpanel"]:focus-visible { outline: 2px solid var(--accent); outline-offset: 8px; border-radius: 4px; }
.resume-panels .is-in { animation: resume-in .28s ease-out both; }
@keyframes resume-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .resume-panels .is-in { animation: none; } }
.resume-panels > [hidden] { display: none !important; }

/* Lenis (smooth wheel scrolling) – required base styles from lenis.css 1.3.26 */
html.lenis, html.lenis body { height: auto; }
.lenis:not(.lenis-autoToggle).lenis-stopped { overflow: clip; }
.lenis [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-smooth iframe { pointer-events: none; }

/* résumé timeline: a separate "Background" group (Education, Skills) under Experience */
.resume-tabs__sep { position: relative; z-index: 1; margin: var(--sp-16) 0 var(--sp-8); padding: var(--sp-12) 0 var(--sp-4, 4px); background: var(--surface-page); }
.resume-tabs__sep span { font-size: var(--fs-eyebrow); line-height: var(--lh-eyebrow); font-weight: var(--fw-bold); letter-spacing: var(--ls-eyebrow); text-transform: uppercase; color: var(--accent); }
.resume-row--bg .resume-row__when { color: var(--text-muted); text-transform: uppercase; letter-spacing: .08em; font-size: var(--fs-caption); }
.resume-row--bg .resume-edu { margin: 0; }
.resume-row--bg .resume-skills { margin: 0; }

/* ================= Testimonials: rolodex ================= */
.rolo { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 5vw, 96px); align-items: center; }
.rolo__controls { display: flex; gap: var(--sp-12); }
.rolo__ico-play { display: none; } .is-paused .rolo__ico-play { display: block; } .is-paused .rolo__ico-pause { display: none; }
/* no-JS fallback: plain list + every quote */
.rolo__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--sp-12); }
.rolo__card { display: flex; align-items: center; gap: var(--sp-16); width: 100%; padding: var(--sp-16) var(--sp-24); border: 1px solid var(--line); border-radius: 12px; background: var(--surface);
  font: inherit; text-align: left; color: var(--text-primary); cursor: pointer; position: relative; overflow: hidden;
  transition: border-color .25s ease, box-shadow .25s ease, background-color .25s ease; }
.rolo__avatar { flex: none; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--surface-tint); color: var(--accent); font-weight: var(--fw-bold); font-size: 15px; letter-spacing: .02em; }
.rolo__who { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.rolo__who strong { font-size: var(--fs-body); line-height: 1.3; font-weight: var(--fw-semibold); }
.rolo__who span { font-size: var(--fs-caption); line-height: var(--lh-caption); color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rolo__who .rolo__co { color: var(--text-secondary); font-weight: var(--fw-semibold); }
.rolo__card:hover { border-color: rgba(47,75,255,.45); }
.rolo__card:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.rolo__stage { display: grid; }
.rolo__quote { margin: 0 0 var(--sp-32); }
.rolo__quote blockquote { margin: 0; padding-left: var(--sp-24); border-left: var(--rule-accent); font-family: var(--font-display); font-size: var(--fs-lead); line-height: var(--lh-lead); letter-spacing: var(--ls-snug); color: var(--text-primary); text-wrap: pretty; }
.rolo__quote figcaption { display: flex; flex-direction: column; gap: 2px; margin-top: var(--sp-24); padding-left: calc(var(--sp-24) + 3px); font-size: var(--fs-small); line-height: var(--lh-small); color: var(--text-muted); }
.rolo__quote figcaption strong { color: var(--text-primary); font-size: var(--fs-body); font-weight: var(--fw-semibold); }
.rolo__count { display: none; }
/* JS on: the wheel */
.rolo--on .rolo__wheel { position: relative; height: 380px; perspective: 900px; perspective-origin: 50% 50%;
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 22%, #000 78%, transparent 100%); mask-image: linear-gradient(180deg, transparent 0, #000 22%, #000 78%, transparent 100%); }
.rolo--on .rolo__list { position: absolute; inset: 0; display: block; transform-style: preserve-3d; }
.rolo--on .rolo__item { position: absolute; left: 0; right: 0; top: 50%; margin-top: -40px; height: 80px; transform-style: preserve-3d;
  transform: translateY(calc(var(--d, 0) * 74px)) translateZ(calc(var(--a, 0) * -56px)) rotateX(calc(var(--d, 0) * -24deg));
  opacity: calc(1 - var(--a, 0) * 0.32); transition: transform .55s cubic-bezier(.22,.8,.28,1), opacity .45s ease; z-index: calc(10 - var(--a, 0)); }
.rolo--on .rolo__item.is-far { opacity: 0; pointer-events: none; visibility: hidden; transition: transform .55s cubic-bezier(.22,.8,.28,1), opacity .3s ease, visibility 0s linear .3s; }
.rolo--on .rolo__card { height: 80px; backface-visibility: hidden; }
.rolo--on .rolo__card.is-active { border-color: var(--accent); box-shadow: 0 14px 34px -18px rgba(29,78,216,.55), 0 2px 6px rgba(5,8,28,.06); }
.rolo--on .rolo__card.is-active .rolo__avatar { background: var(--accent); color: #fff; }
/* autoplay progress on the active card */
.rolo__timer { position: absolute; left: 0; bottom: 0; height: 3px; width: 100%; background: var(--accent); transform-origin: left; transform: scaleX(0); opacity: 0; }
.rolo--on.is-timing .rolo__card.is-active .rolo__timer { opacity: .9; animation: rolo-timer 7s linear forwards; }
@keyframes rolo-timer { from { transform: scaleX(0); } to { transform: scaleX(1); } }
/* quotes: all share one grid cell so the panel is as tall as the longest quote (no layout jump) */
.rolo--on .rolo__quote { grid-area: 1 / 1; margin: 0; opacity: 0; visibility: hidden; transform: translateY(8px); transition: opacity .35s ease, transform .45s cubic-bezier(.22,.8,.28,1), visibility 0s linear .35s; }
.rolo--on .rolo__quote.is-active { opacity: 1; visibility: visible; transform: none; transition: opacity .45s ease .08s, transform .5s cubic-bezier(.22,.8,.28,1) .08s, visibility 0s; }
.rolo--on .rolo__count { display: block; grid-area: 2 / 1; margin: var(--sp-24) 0 0; padding-left: calc(var(--sp-24) + 3px); font-size: var(--fs-caption); font-weight: var(--fw-semibold); letter-spacing: .08em; color: var(--text-muted); }
@media (max-width: 860px) {
  .rolo { grid-template-columns: minmax(0, 1fr); gap: var(--sp-24); }
  .rolo--on .rolo__wheel { height: 236px; }
  .rolo--on .rolo__item { transform: translateY(calc(var(--d, 0) * 66px)) translateZ(calc(var(--a, 0) * -50px)) rotateX(calc(var(--d, 0) * -26deg)); }
  .rolo--on .rolo__item:not(.is-far) { opacity: calc(1 - var(--a, 0) * 0.45); }
  .rolo__quote blockquote { font-size: var(--fs-lead-sm, 20px); }
}
@media (prefers-reduced-motion: reduce) { .rolo--on .rolo__item, .rolo--on .rolo__quote { transition: none; } .rolo__timer { display: none; } }
.rolo--on .rolo__list, .rolo--on .rolo__item { pointer-events: none; } .rolo--on .rolo__item:not(.is-far) .rolo__card { pointer-events: auto; }

/* ================= Testimonials: stacked cards + large quote (dark) ================= */
.tst-section { background-color: #050507; background-image: radial-gradient(900px 520px at 85% 15%, rgba(27,42,158,.45) 0%, transparent 70%); }
.tst { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: var(--sp-24); align-items: stretch; }
.tst__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.tst__item { flex: 0 0 auto; transition: flex-grow .5s cubic-bezier(.22,.8,.28,1); }
.tst__card { position: relative; display: flex; align-items: flex-end; width: 100%; height: 100%; min-height: 64px; padding: 0; border: 1px solid rgba(255,255,255,.1); border-radius: 14px; overflow: hidden;
  background: #121318; color: #fff; font: inherit; text-align: left; cursor: pointer; transition: border-color .3s ease, background-color .3s ease, box-shadow .3s ease; }
.tst__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top left; opacity: .22; filter: grayscale(.4); transition: opacity .45s ease, filter .45s ease, transform .6s cubic-bezier(.22,.8,.28,1); transform: scale(1.04); }
.tst__img--none { background: radial-gradient(120% 140% at 0% 0%, rgba(47,75,255,.35) 0%, transparent 60%), linear-gradient(135deg, #1a1d33, #0c0d14); opacity: .6; }
.tst__card::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(5,6,10,0) 25%, rgba(5,6,10,.82) 100%); pointer-events: none; }
.tst__card-text { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 2px; padding: 18px 56px 16px 20px; min-width: 0; }
.tst__card-text strong { font-size: var(--fs-body); line-height: 1.3; font-weight: var(--fw-semibold); }
.tst__card-text span { font-size: var(--fs-caption); line-height: var(--lh-caption); color: rgba(255,255,255,.66); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tst__plus { position: absolute; z-index: 1; right: 20px; bottom: 22px; width: 14px; height: 14px; }
.tst__plus::before, .tst__plus::after { content: ""; position: absolute; left: 0; top: 6px; width: 14px; height: 1.5px; background: rgba(255,255,255,.8); transition: transform .3s ease; }
.tst__plus::after { transform: rotate(90deg); }
.tst__card:hover { border-color: rgba(255,255,255,.28); }
.tst__card:hover .tst__img { opacity: .34; }
.tst__card:focus-visible { outline: 2px solid var(--accent-on-dark); outline-offset: 3px; }
/* selected: grows, lighter, image comes forward, "+" becomes "−" */
.tst--on .tst__item.is-active { flex-grow: 1; }
.tst__card.is-active { min-height: 210px; border-color: rgba(255,255,255,.55); background: #2a2d3a; box-shadow: 0 18px 40px -20px rgba(0,0,0,.8), inset 0 1px 0 rgba(255,255,255,.18); }
.tst__card.is-active .tst__img { opacity: .78; filter: none; transform: scale(1); }
.tst__card.is-active .tst__plus::after { transform: rotate(0deg); }
.tst__timer { position: absolute; z-index: 2; left: 0; bottom: 0; height: 3px; width: 100%; background: var(--accent-on-dark); transform-origin: left; transform: scaleX(0); opacity: 0; }
.tst--on.is-timing .tst__card.is-active .tst__timer { opacity: .95; animation: rolo-timer 7s linear forwards; }
/* the quote panel */
.tst__stage { display: grid; border: 1px solid rgba(255,255,255,.1); border-radius: 18px; background: linear-gradient(160deg, rgba(255,255,255,.06), rgba(255,255,255,.015)); padding: clamp(28px, 3vw, 48px); }
.tst__quote { display: flex; flex-direction: column; margin: 0 0 var(--sp-32); }
.tst__co { margin: 0 0 var(--sp-24); font-size: var(--fs-eyebrow); line-height: var(--lh-eyebrow); font-weight: var(--fw-bold); letter-spacing: var(--ls-eyebrow); text-transform: uppercase; color: var(--accent-on-dark); }
.tst__quote blockquote { margin: 0; font-family: var(--font-display); font-weight: var(--fw-regular); font-size: clamp(26px, 1.4vw + 16px, 40px); line-height: 1.22; letter-spacing: -0.015em; color: rgba(255,255,255,.62); text-wrap: pretty; }
.tst__quote blockquote em { font-style: normal; color: #fff; }
.tst__quote figcaption { display: flex; justify-content: space-between; align-items: flex-end; gap: var(--sp-16) var(--sp-32); flex-wrap: wrap; margin-top: auto; padding-top: var(--sp-32); }
.tst__who { display: flex; flex-direction: column; gap: 2px; font-size: var(--fs-small); line-height: var(--lh-small); color: var(--text-on-dark-muted); }
.tst__who strong { color: #fff; font-size: var(--fs-body); font-weight: var(--fw-semibold); }
.tst__worked { display: flex; flex-direction: column; gap: 2px; margin: 0; text-align: right; font-size: var(--fs-small); line-height: var(--lh-small); color: #fff; font-weight: var(--fw-semibold); }
.tst__worked span { font-size: 12px; font-weight: var(--fw-bold); letter-spacing: .1em; text-transform: uppercase; color: var(--text-on-dark-muted); }
/* JS on: quotes share one cell, so the panel never changes height */
.tst--on .tst__quote { grid-area: 1 / 1; margin: 0; opacity: 0; visibility: hidden; transform: translateY(10px); transition: opacity .35s ease, transform .45s cubic-bezier(.22,.8,.28,1), visibility 0s linear .35s; }
.tst--on .tst__quote.is-active { opacity: 1; visibility: visible; transform: none; transition: opacity .45s ease .1s, transform .5s cubic-bezier(.22,.8,.28,1) .1s, visibility 0s; }
.tst-section .rolo__pause { border-color: rgba(255,255,255,.5); color: #fff; }
.tst-section .rolo__pause:hover { border-color: var(--accent); }
@media (max-width: 960px) {
  .tst { grid-template-columns: minmax(0, 1fr); }
  .tst__list { flex-direction: row; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 6px; scrollbar-width: none; }
  .tst__list::-webkit-scrollbar { display: none; }
  .tst__item { flex: 0 0 72%; scroll-snap-align: start; }
  .tst--on .tst__item.is-active { flex-grow: 0; }
  .tst__card, .tst__card.is-active { min-height: 120px; }
  .tst__worked { text-align: left; }
}
@media (prefers-reduced-motion: reduce) { .tst__item, .tst__img, .tst--on .tst__quote { transition: none; } .tst__timer { display: none; } }
/* fit one screen: fixed-height panel, card column scrolls internally and keeps the selected card in view */
@media (min-width: 961px) {
  .tst__list { height: 100%; overflow-y: auto; scrollbar-width: none; overscroll-behavior: contain; padding-right: 2px; scroll-behavior: smooth;
    -webkit-mask-image: linear-gradient(180deg, #000 0, #000 88%, transparent 100%); mask-image: linear-gradient(180deg, #000 0, #000 88%, transparent 100%); }
  .tst__list::-webkit-scrollbar { display: none; }
  .tst--on .tst__item.is-active { flex-grow: 0; }
  .tst__item { flex: 0 0 auto; }
  .tst__card { min-height: 72px; }
  .tst__card.is-active { min-height: 0; height: clamp(170px, 40%, 230px); }
  .tst__stage { height: 100%; box-sizing: border-box; overflow: hidden; }
  .tst__quote blockquote { font-size: clamp(22px, 1.1vw + 14px, 34px); }
}
@media (min-width: 961px) {
  .tst__item, .tst--on .tst__item.is-active { flex: 0 0 auto; height: auto; }
  .tst__card { height: 76px; min-height: 0; transition: height .45s cubic-bezier(.22,.8,.28,1), border-color .3s ease, background-color .3s ease, box-shadow .3s ease; }
  .tst__card.is-active { height: 200px; }
}
@media (prefers-reduced-motion: reduce) { .tst__card { transition: none; } }

/* ================= Testimonials v3: rolodex wheel of process-style cards + compact quote ================= */
.tst { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr) !important; gap: clamp(32px, 4vw, 72px) !important; align-items: center !important; height: auto !important; }
.tst__wheel { position: relative; }
.tst__list { height: auto !important; overflow: visible !important; -webkit-mask-image: none !important; mask-image: none !important; gap: 12px; }
.tst__item, .tst--on .tst__item.is-active { height: auto !important; flex: 0 0 auto !important; }
/* card = My process card */
.tst__card, .tst__card.is-active { display: flex; flex-direction: row; align-items: center; gap: var(--sp-16); height: 88px !important; min-height: 0 !important; padding: 0 28px; border-radius: var(--radius-lg);
  color: var(--text-on-dark); text-align: left; overflow: hidden; isolation: isolate;
  background: radial-gradient(120% 90% at 0% 0%, rgba(154,171,255,0.20) 0%, transparent 55%), linear-gradient(155deg, rgba(47,75,255,0.30) 0%, rgba(27,42,158,0.22) 38%, rgba(5,8,28,0.92) 100%);
  border: 1px solid rgba(154,171,255,0.22);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.18), inset 0 -1px 0 rgba(0,0,0,0.5), 0 12px 32px -12px rgba(27,42,158,0.6);
  transition: border-color .25s ease, box-shadow .25s ease, background .25s ease; }
.tst__card::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; border-radius: inherit; background: linear-gradient(180deg, rgba(255,255,255,0.10) 0%, rgba(255,255,255,0.02) 42%, transparent 43%); }
.tst__card::after { display: none; }
.tst__n { flex: none; font-family: var(--font-display); font-weight: var(--display-weight); font-size: 26px; line-height: 1; color: var(--accent-on-dark); }
.tst__card-text { padding: 0; }
.tst__card-text span { color: var(--text-on-dark-muted); }
.tst__card:hover { border-color: rgba(154,171,255,0.45); }
/* selected = the lighter, lifted version */
.tst__card.is-active { border-color: rgba(154,171,255,0.75); background: radial-gradient(120% 90% at 0% 0%, rgba(154,171,255,0.36) 0%, transparent 60%), linear-gradient(155deg, rgba(75,99,255,0.55) 0%, rgba(47,75,255,0.34) 45%, rgba(18,22,60,0.95) 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.32), inset 0 -1px 0 rgba(0,0,0,0.4), 0 18px 44px -12px rgba(47,75,255,0.75); }
/* JS on: rolodex drum — selected card centred, neighbours tilt back */
.tst--on .tst__wheel { height: 420px; perspective: 1000px;
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 18%, #000 82%, transparent 100%); mask-image: linear-gradient(180deg, transparent 0, #000 18%, #000 82%, transparent 100%); }
.tst--on .tst__list { position: absolute !important; inset: 0; display: block !important; transform-style: preserve-3d; pointer-events: none; }
.tst--on .tst__item { position: absolute; left: 0; right: 0; top: 50%; margin-top: -44px; transform-style: preserve-3d; pointer-events: none;
  transform: translateY(calc(var(--d, 0) * 96px)) translateZ(calc(var(--a, 0) * -70px)) rotateX(calc(var(--d, 0) * -22deg));
  opacity: calc(1 - var(--a, 0) * 0.34); z-index: calc(10 - var(--a, 0)); transition: transform .55s cubic-bezier(.22,.8,.28,1), opacity .45s ease; }
.tst--on .tst__item:not(.is-far) .tst__card { pointer-events: auto; }
.tst--on .tst__item.is-far { opacity: 0; visibility: hidden; transition: transform .55s cubic-bezier(.22,.8,.28,1), opacity .3s ease, visibility 0s linear .3s; }
.tst--on .tst__card { backface-visibility: hidden; }
/* compact quote panel */
.tst__stage { height: auto !important; padding: clamp(24px, 2.4vw, 40px) !important; }
.tst__quote blockquote { font-size: clamp(21px, 0.9vw + 14px, 30px) !important; line-height: 1.28; }
.tst__co { margin-bottom: var(--sp-16); }
.tst__quote figcaption { padding-top: var(--sp-24); }
@media (max-width: 960px) {
  .tst { grid-template-columns: minmax(0, 1fr) !important; }
  .tst--on .tst__wheel { height: 280px; }
  .tst--on .tst__item { transform: translateY(calc(var(--d, 0) * 84px)) translateZ(calc(var(--a, 0) * -60px)) rotateX(calc(var(--d, 0) * -24deg)); }
  .tst__card, .tst__card.is-active { height: 76px !important; padding: 0 20px; }
}
@media (prefers-reduced-motion: reduce) { .tst--on .tst__item { transition: none; } }

/* testimonials v4: slower dwell, pagination dots, quote panel lifted off the background */
.tst--on.is-timing .tst__card.is-active .tst__timer { animation-duration: 11s; }
.tst__stage { background: linear-gradient(160deg, #22263a 0%, #171a28 55%, #11131d 100%) !important; border: 1px solid rgba(154,171,255,.38) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.16), 0 30px 70px -28px rgba(0,0,0,.9), 0 0 0 1px rgba(0,0,0,.4), 0 24px 80px -30px rgba(47,75,255,.55); }
.tst__quote blockquote { color: rgba(255,255,255,.7) !important; }
.tst__dots { display: flex; justify-content: center; align-items: center; margin-top: var(--sp-8); }
.tst__dot { min-width: 32px; height: var(--tap); padding: 0; border: 0; background: none; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.tst__dot::before { content: ""; width: 10px; height: 10px; border-radius: 999px; background: rgba(255,255,255,.32); transition: width .3s ease, background-color .3s ease; }
.tst__dot:hover::before { background: rgba(255,255,255,.7); }
.tst__dot[aria-current="true"]::before { width: 28px; background: var(--accent-on-dark); }
.tst__dot:focus-visible { outline: 2px solid var(--accent-on-dark); outline-offset: -6px; border-radius: 999px; }
.tst__right { min-width: 0; display: flex; flex-direction: column; }
.tst__right .tst__dots { margin-top: var(--sp-16); }
.logo-band { padding-block: 60px 68px; }

/* ================= Scrolling + rhythm (audit) ================= */
:root { --nav-h: 88px; }
/* Lenis owns smoothing while active; native CSS smoothing would double-animate anchors */
html.lenis { scroll-behavior: auto; }
/* same-page targets clear the sticky nav */
main > section[id], .proc-row, .decision, .resume-row, .site-footer { scroll-margin-top: calc(var(--nav-h) + 16px); }
/* restrained entrance: added by JS only to elements below the fold, so content is visible without JS */
.fx { opacity: 0; transform: translateY(14px); transition: opacity .5s ease, transform .55s cubic-bezier(.22,.8,.28,1); }
.fx.fx-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .fx { opacity: 1; transform: none; transition: none; } }
@media print { .fx { opacity: 1 !important; transform: none !important; } }
/* homepage rhythm: one responsive interval between major sections (≈64px phone → ≈96px desktop) */
:root { --home-gap: clamp(64px, 2.4vw + 52px, 96px); }
.tst-section.section, .home-work.section, .section--compact.section { padding-block: var(--home-gap); }
.site-footer { padding-top: var(--home-gap); }
#work.home-work { padding-block: var(--home-gap); }

/* end-of-page link (next case study / view all): both rules faint */
.next { border-top-color: var(--line); }

/* ================= About: editorial ================= */
.hero--about2 { padding-block: clamp(72px, 5vw + 40px, 128px) clamp(64px, 4vw + 32px, 104px); gap: var(--sp-24);
  background-image: radial-gradient(900px 520px at 12% 30%, var(--glow) 0%, transparent 72%); }
.hero--about2 h1 { max-width: 15ch; }
.hero--about2 .hero__lead { max-width: 52ch; }
.story2 { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); column-gap: var(--split-gap); row-gap: 0; }
.story2__head { grid-column: 1; }
.story2__head .heading { position: sticky; top: calc(var(--nav-h, 88px) + 32px); }
.story2__body, .story2__after { grid-column: 2; }
.story2 p { margin: 0; font-size: var(--fs-body-lg); line-height: 1.7; color: var(--text-secondary); max-width: 62ch; }
.story2__body { display: flex; flex-direction: column; gap: 1.15em; }
.story2__lede { font-size: clamp(21px, 0.6vw + 16px, 25px) !important; line-height: 1.55 !important; color: var(--text-primary) !important; }
/* the pull quote: a full-width break across both columns */
.story2__pull { grid-column: 1 / -1; margin: clamp(56px, 4vw + 32px, 96px) 0; padding: var(--sp-8) 0 var(--sp-8) clamp(24px, 2vw + 12px, 40px); border-left: var(--rule-accent); }
.story2__pull p { max-width: 20ch !important; margin: 0; font-family: var(--font-display); font-weight: var(--display-weight); font-size: clamp(34px, 2.6vw + 18px, 60px) !important; line-height: 1.08 !important; letter-spacing: -0.025em; color: var(--text-primary) !important; text-wrap: balance; }
/* after the quote: text beside the photo (asymmetric) */
.story2__after { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: clamp(32px, 4vw, 72px); row-gap: 1.15em; align-items: start; }
.story2__a, .story2__b, .story2__c { grid-column: 1; }
.story2__photo { grid-column: 2; grid-row: 1 / span 4; margin: 6px 0 0; }
.story2__photo img { display: block; width: 100%; height: auto; aspect-ratio: 746 / 1032; object-fit: cover; border-radius: 8px; box-shadow: 0 1px 2px rgba(5,8,28,.08), 0 18px 40px -22px rgba(5,8,28,.35); }
.story2__photo figcaption { margin-top: var(--sp-12); font-size: var(--fs-caption); line-height: var(--lh-caption); color: var(--text-muted); }
.story2 + .night.section { margin-top: 0; }
@media (max-width: 960px) {
  .story2 { grid-template-columns: minmax(0, 1fr); }
  .story2__head, .story2__body, .story2__after, .story2__pull { grid-column: 1; }
  .story2__head { margin-bottom: var(--sp-32); }
  .story2__head .heading { position: static; }
}
@media (max-width: 640px) {
  .story2__after { grid-template-columns: minmax(0, 1fr); }
  .story2__photo { grid-column: 1; grid-row: auto; margin: var(--sp-16) 0 var(--sp-8); }
  .story2__photo img { max-width: 420px; }
}
.section:has(.certs) + #next { padding-top: 0; }

/* ================= About v2: one narrative column, quote inside it, larger photo beside the close ================= */
.hero--about2 { padding-block: clamp(64px, 4vw + 40px, 112px) clamp(56px, 3vw + 36px, 88px); }
.hero--about2 h1 { max-width: none; font-size: clamp(40px, 3.2vw + 26px, 74px); line-height: 1.04; letter-spacing: -0.03em; }
.hero--about2 .hero__lead { max-width: 60ch; font-size: clamp(18px, 0.4vw + 15px, 21px); line-height: 1.6; }
.story3 { --read: 740px; }
.story3.section { padding-block: var(--home-gap, 88px); }
.story3__col { max-width: var(--read); display: flex; flex-direction: column; }
.story3__col > .heading { margin-bottom: var(--sp-32); }
.story3 p { margin: 0; font-size: clamp(18px, 0.25vw + 16px, 20px); line-height: 1.75; color: var(--text-secondary); max-width: none; }
.story3 .story2__body { display: flex; flex-direction: column; gap: 1.2em; }
.story3 .story2__lede { font-size: clamp(20px, 0.4vw + 17px, 23px) !important; line-height: 1.6 !important; color: var(--text-primary) !important; }
/* pull quote: a deliberate interruption inside the narrative */
.story3 .story2__pull { margin: clamp(48px, 3vw + 28px, 72px) 0; padding: 4px 0 4px clamp(20px, 1.5vw + 10px, 32px); border-left: var(--rule-accent); }
.story3 .story2__pull p { max-width: 16ch !important; font-family: var(--font-display); font-weight: var(--display-weight); font-size: clamp(34px, 2vw + 22px, 54px) !important; line-height: 1.1 !important; letter-spacing: -0.025em; color: var(--text-primary) !important; }
/* closing paragraphs + photo */
.story3 .story2__after { display: grid; grid-template-columns: minmax(0, 1fr) clamp(320px, 30vw, 420px); column-gap: clamp(40px, 5vw, 88px); row-gap: 1.2em; align-items: start; max-width: 1180px; }
.story3 .story2__a, .story3 .story2__b, .story3 .story2__c { grid-column: 1; max-width: 640px; }
.story3 .story2__photo { grid-column: 2; grid-row: 1 / span 3; margin: 0; align-self: center; }
.story3 .story2__photo img { border-radius: 8px; }
@media (max-width: 960px) {
  .story3 .story2__after { grid-template-columns: minmax(0, 1fr) minmax(240px, 40%); column-gap: var(--sp-32); }
}
@media (max-width: 680px) {
  .story3 .story2__after { grid-template-columns: minmax(0, 1fr); }
  .story3 .story2__photo { grid-column: 1; grid-row: auto; margin: var(--sp-16) 0 var(--sp-8); align-self: start; }
  .story3 .story2__photo img { width: 100%; max-width: 440px; }
}
/* consistent rhythm for the rest of the profile */
.story3 + .night.section, .story3 + .night.section + .section { padding-block: var(--home-gap, 88px); }
@media (min-width: 681px) {
  /* text block packs together and sits vertically centred beside the photo */
  .story3 .story2__after { grid-template-rows: 1fr auto auto auto 1fr; row-gap: 0; }
  .story3 .story2__a { grid-row: 2; } .story3 .story2__b { grid-row: 3; margin-top: 1.2em; } .story3 .story2__c { grid-row: 4; margin-top: 1.2em; }
  .story3 .story2__photo { grid-row: 1 / span 5; align-self: start; }
}
@media (min-width: 681px) { .story3 .story2__after { max-width: none; } .story3 .story2__photo { justify-self: end; width: 100%; } }

/* ================= Featured projects: scroll stack (homepage) ================= */
.sstack-section { background-color: #000; background-image: radial-gradient(1000px 640px at 82% 18%, rgba(27,42,158,.55) 0%, transparent 70%), radial-gradient(700px 520px at 6% 78%, rgba(27,42,158,.28) 0%, transparent 72%); }
.sstack-section .heading h2 { color: var(--text-on-dark); }
.ss { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--sp-24); }
.ss__card { position: relative; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(28px, 3.5vw, 64px); align-items: center;
  padding: clamp(28px, 3vw, 48px); border-radius: 16px; color: var(--text-on-dark); overflow: hidden; isolation: isolate;
  background: radial-gradient(120% 120% at 0% 0%, rgba(47,75,255,.14) 0%, transparent 46%), linear-gradient(180deg, #14161f 0%, #0d0e15 100%);
  border: 1px solid rgba(154,171,255,.16); box-shadow: inset 0 1px 0 rgba(255,255,255,.07), 0 30px 60px -30px rgba(0,0,0,.9);
  transform-origin: 50% 0%; will-change: transform; }
.ss__card::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: #000; opacity: var(--dim, 0); pointer-events: none; z-index: 3; transition: opacity .1s linear; }
.ss__copy { display: flex; flex-direction: column; gap: var(--sp-16); min-width: 0; }
.ss__top { display: flex; justify-content: space-between; align-items: center; gap: var(--sp-16); }
.ss .pill { border-color: rgba(255,255,255,0.2); background: rgba(255,255,255,0.05); color: var(--text-on-dark); }
.ss__count { flex: none; font-size: var(--fs-caption); font-weight: var(--fw-semibold); letter-spacing: .1em; color: var(--text-on-dark-muted); font-variant-numeric: tabular-nums; }
.ss__client { margin: var(--sp-8) 0 -8px; font-size: var(--fs-eyebrow); font-weight: var(--fw-bold); letter-spacing: var(--ls-eyebrow); text-transform: uppercase; color: var(--accent-on-dark); }
.ss__title { margin: 0; font-size: clamp(28px, 1.4vw + 18px, 40px); line-height: 1.1; letter-spacing: -0.02em; color: #fff; }
.ss__pos { margin: 0; font-size: var(--fs-body-lg); line-height: 1.5; color: var(--text-on-dark); }
.ss__support { margin: 0; font-size: var(--fs-small); line-height: var(--lh-small); color: var(--text-on-dark-muted); }
.ss__result { display: inline-flex; align-items: center; gap: var(--sp-8); margin: 0; font-size: var(--fs-small); font-weight: var(--fw-semibold); color: var(--accent-on-dark); }
.ss__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-8) var(--sp-24); margin-top: var(--sp-8); }
.ss__cta { display: inline-flex; align-items: center; gap: var(--sp-8); min-height: var(--tap); font-size: var(--fs-small); font-weight: var(--fw-semibold); color: var(--accent-on-dark); text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 5px; }
.ss__cta:hover { color: #fff; text-decoration-color: currentColor; }
.ss__cta svg { transition: transform .2s ease; } .ss__cta:hover svg { transform: translateX(4px); }
.ss__cta:focus-visible { outline: 2px solid var(--accent-on-dark); outline-offset: 3px; border-radius: 4px; }
.ss__lock { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-caption); color: var(--text-on-dark-muted); }
.ss__lock .lock-sm { width: 14px; height: 14px; color: var(--accent-on-dark); }
.ss__media { position: relative; min-width: 0; border-radius: 10px; overflow: hidden; background: #0a0b12; border: 1px solid rgba(255,255,255,.08); box-shadow: 0 20px 50px -24px rgba(0,0,0,.9); }
.ss__media .screen { display: block; width: 100%; height: auto; max-height: none; aspect-ratio: 16 / 10.4; object-fit: cover; object-position: top left; box-shadow: none; border-radius: 0; background: #0a0b12; }
.ss__media--pair { overflow: visible; background: none; border: 0; box-shadow: none; display: block; }
.ss__media--pair .screen { border-radius: 10px; border: 1px solid rgba(255,255,255,.08); box-shadow: 0 20px 50px -24px rgba(0,0,0,.9); }
.ss__media--pair .screen:first-child { width: 88%; }
.ss__media--pair .screen:nth-child(2) { position: relative; z-index: 1; width: 52%; margin: -26% 0 0 auto; aspect-ratio: auto; }
/* stacking: desktop/laptop with enough height */
@media (min-width: 861px) and (min-height: 680px) {
  .ss { gap: 0; }
  .ss__item { position: sticky; top: calc(var(--nav-h, 88px) + 28px + var(--i) * 14px); margin-bottom: 18vh; }
  .ss__item:last-child { margin-bottom: 0; }
  .ss__card { min-height: min(560px, calc(100svh - var(--nav-h, 88px) - 120px)); }
}
@media (max-width: 860px) {
  .ss__card { grid-template-columns: minmax(0, 1fr); }
  .ss__media { order: -1; }
}
@media (prefers-reduced-motion: reduce) { .ss__card { transform: none !important; filter: none !important; } .ss__card::after { opacity: 0 !important; } }
.ss__top { align-items: flex-start; }
.ss__top .pills { display: flex; flex-wrap: wrap; gap: 8px; flex: 1 1 auto; min-width: 0; }
@media (max-width: 560px) { .ss__card { padding: 20px; gap: 24px; } .ss__count { padding-top: 6px; } }

/* ================= Testimonials: rolodex cards restyled as a layered stack ================= */
/* charcoal cards; the selected card sits in front, neighbours tuck behind it — smaller, dimmer, slightly soft */
.tst--on .tst__item { transform: translateY(calc(var(--d, 0) * 72px)) scale(calc(1 - var(--a, 0) * 0.06));
  opacity: calc(1 - var(--a, 0) * 0.18); filter: blur(calc(var(--a, 0) * 0.6px)); transform-origin: 50% 50%;
  transition: transform .55s cubic-bezier(.22,.8,.28,1), opacity .45s ease, filter .45s ease; }
.tst__card, .tst__card.is-active { background: radial-gradient(120% 120% at 0% 0%, rgba(47,75,255,.12) 0%, transparent 50%), linear-gradient(180deg, #171922 0%, #0e0f16 100%);
  border: 1px solid rgba(154,171,255,.16); border-radius: 14px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.07), 0 18px 36px -18px rgba(0,0,0,.95); }
.tst__card::before { background: none; }
.tst__card::after { content: ""; display: block; position: absolute; inset: 0; border-radius: inherit; background: #000; opacity: calc(var(--a, 0) * 0.22); pointer-events: none; }
.tst__item:not(.is-active) .tst__card::after { opacity: .28; }
.tst__item.is-active .tst__card::after { opacity: 0; }
.tst__card.is-active { background: radial-gradient(120% 120% at 0% 0%, rgba(75,99,255,.26) 0%, transparent 55%), linear-gradient(180deg, #232737 0%, #161925 100%);
  border-color: rgba(154,171,255,.55); box-shadow: inset 0 1px 0 rgba(255,255,255,.14), 0 24px 48px -20px rgba(0,0,0,.95), 0 0 0 1px rgba(47,75,255,.18); }
.tst__card:hover { border-color: rgba(154,171,255,.4); }
.tst__n { color: rgba(154,171,255,.75); }
.tst__card.is-active .tst__n { color: var(--accent-on-dark); }
@media (max-width: 960px) { .tst--on .tst__item { transform: translateY(calc(var(--d, 0) * 56px)) scale(calc(1 - var(--a, 0) * 0.06)); } }
@media (prefers-reduced-motion: reduce) { .tst--on .tst__item { filter: none; transition: none; } }

/* About hero v3: wide headline (≤1050px), 20–22px lead at ≤700px */
.hero--about2 h1 { max-width: 1050px; font-size: clamp(40px, 3.4vw + 26px, 78px); }
.hero--about2 .hero__lead { max-width: 700px; font-size: clamp(18px, 0.35vw + 16px, 22px); line-height: 1.6; }

/* ================= About v3: editorial profile ================= */
.hero--about3 { padding-block: clamp(64px, 4vw + 40px, 112px) clamp(56px, 3vw + 36px, 88px); gap: var(--sp-24);
  background-image: radial-gradient(900px 520px at 12% 30%, var(--glow) 0%, transparent 72%); }
.hero--about3 h1 { max-width: 1050px; font-size: clamp(40px, 3.4vw + 26px, 78px); line-height: 1.03; letter-spacing: -0.03em; }
.hero--about3 .hero__lead { max-width: 700px; padding-left: 0; border-left: 0; font-size: clamp(18px, 0.35vw + 16px, 22px); line-height: 1.6; color: var(--text-on-dark-muted); }
/* story: one continuous light section, chapters set by type + space */
.story4 { --read: 760px; padding-block: clamp(64px, 3vw + 48px, 104px); }
.story4__label { margin: 0 0 var(--sp-24); }
.ch { max-width: var(--read); }
.ch + .ch { margin-top: clamp(48px, 3vw + 32px, 72px); }
.ch__title { display: flex; align-items: baseline; gap: var(--sp-16); margin: 0 0 var(--sp-24); font-size: clamp(26px, 0.7vw + 20px, 32px); line-height: 1.2; letter-spacing: -0.015em; color: var(--text-primary); }
.ch__n { flex: none; font-size: 15px; font-weight: var(--fw-bold); letter-spacing: .12em; color: var(--accent); transform: translateY(-3px); }
.ch p { margin: 0; font-size: clamp(18px, 0.2vw + 16.5px, 20px); line-height: 1.65; color: var(--text-secondary); }
.ch p + p { margin-top: 26px; }
.ch > .ch__title + p, .ch__text > p:first-child { color: var(--text-primary); }
/* the turning point */
.ch__pull { margin: clamp(40px, 2vw + 28px, 56px) 0; padding: 6px 0 6px clamp(20px, 1.5vw + 10px, 32px); border-left: var(--rule-accent); }
.ch__pull p { margin: 0 !important; max-width: 18ch; font-family: var(--font-display); font-weight: var(--display-weight); font-size: clamp(32px, 1.8vw + 22px, 50px); line-height: 1.1; letter-spacing: -0.025em; color: var(--text-primary); text-wrap: balance; }
/* chapter 04: text beside the photograph */
.ch--photo { max-width: none; }
.ch--photo .ch__title { max-width: var(--read); }
.ch__split { display: grid; grid-template-columns: minmax(0, var(--read)) clamp(320px, 29vw, 420px); column-gap: clamp(40px, 5vw, 96px); align-items: start; }
.ch__photo { margin: 0; }
.ch__photo img { display: block; width: 100%; height: auto; aspect-ratio: 900 / 1418; object-fit: cover; border-radius: 4px; }
.ch__photo figcaption { margin-top: var(--sp-12); font-size: var(--fs-caption); line-height: var(--lh-caption); color: var(--text-muted); }
@media (max-width: 1100px) { .ch__split { grid-template-columns: minmax(0, 1fr) minmax(260px, 38%); column-gap: var(--sp-48); } }
@media (max-width: 720px) {
  .ch__split { grid-template-columns: minmax(0, 1fr); }
  .ch__photo { margin: var(--sp-32) 0 0; }
  .ch__photo img { max-width: 480px; }
}
/* the rest of the profile: compact, consistent rhythm */
.about-focus.section { padding-block: clamp(56px, 2.5vw + 40px, 88px); }
.about-focus .stack { gap: var(--sp-32); }
.about-certs.section { padding-block: clamp(56px, 2.5vw + 40px, 88px) clamp(32px, 2vw + 20px, 56px); }
.about-certs .cert img { width: 168px; aspect-ratio: 1800 / 1320; object-fit: cover; border-radius: 4px; border: 1px solid var(--line-strong); background: #fff; }
.about-certs .cert strong { font-size: var(--fs-body); }
.about-certs + #next { padding-top: 0; }
@media (max-width: 560px) { .about-certs .cert { flex-direction: column; align-items: flex-start; gap: var(--sp-12); } .about-certs .cert img { width: 100%; max-width: 320px; } }
@media (max-width: 960px) { .about-certs .certs { grid-template-columns: minmax(0, 1fr); } }

/* About: wider reading measure; the pull quote stays on one line on desktop */
.story4 { --read: 900px; }
.ch__title { display: block; }
@media (min-width: 1100px) { .ch__pull p { max-width: none; white-space: nowrap; font-size: clamp(36px, 1.4vw + 22px, 48px); } }
/* About chapters 01–03 span the full content width */
.story4 .ch:not(.ch--photo) { max-width: none; }
.proc-aside__note { margin: 0; max-width: 34ch; font-size: var(--fs-small); line-height: var(--lh-small); color: var(--text-secondary); }

/* ================= Testimonials: simple editorial cards (final) ================= */
.tst2 .carousel { gap: 24px; grid-auto-columns: calc((100% - 2 * 24px) / 3); align-items: stretch; grid-template-rows: none; row-gap: 0; padding-bottom: 4px; }
@media (max-width: 1024px) { .tst2 .carousel { grid-auto-columns: calc((100% - 24px) / 2); } }
@media (max-width: 760px) { .tst2 .carousel { grid-auto-columns: 88%; gap: 16px; } }
.tcard { display: flex; flex-direction: column; gap: var(--sp-24); margin: 0; padding: 28px; background: var(--surface); border: 1px solid var(--line); border-radius: 8px; }
.tcard blockquote { flex: 1; margin: 0; padding-left: var(--sp-16); border-left: 3px solid var(--accent); font-family: var(--font-display); font-size: var(--fs-body-lg); line-height: var(--lh-body-lg); font-weight: var(--fw-regular); color: var(--text-primary); }
.tcard figcaption { display: flex; flex-direction: column; gap: 2px; padding-left: calc(var(--sp-16) + 3px); font-size: var(--fs-caption); line-height: var(--lh-caption); color: var(--text-muted); }
.tcard figcaption strong { color: var(--text-primary); font-size: var(--fs-small); font-weight: var(--fw-semibold); }
.tst2 .carousel:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; border-radius: 8px; }

/* case-study hero: one defensible outcome */
.cs-hero__outcome { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 12px; margin: 0; padding-top: var(--sp-16); border-top: 1px solid rgba(255,255,255,.16); font-size: var(--fs-small); line-height: 1.45; color: #fff; font-weight: var(--fw-medium); }
.cs-hero__outcome-k { font-size: var(--fs-caption); letter-spacing: .12em; text-transform: uppercase; font-weight: 700; color: var(--accent-on-dark); }
.cs-hero__src { white-space: nowrap; color: rgba(255,255,255,.7); font-weight: var(--fw-regular); }
@media (max-width: 760px) { .tcard { padding: 24px; } }

/* ================= Glass hover on primary + secondary buttons (restored) ================= */
.btn.btn--primary, .btn.btn--ghost { overflow: hidden; isolation: isolate;
  transition: background-color .25s ease, border-color .25s ease, color .25s ease, box-shadow .25s ease; }
.btn.btn--primary::after, .btn.btn--ghost::after { content: ""; position: absolute; top: -50%; left: -60%; width: 45%; height: 200%; z-index: -1; pointer-events: none;
  background: linear-gradient(100deg, transparent 0%, rgba(255,255,255,0.35) 50%, transparent 100%); transform: translateX(-120%) rotate(12deg); transition: transform .7s ease; }
.btn.btn--ghost::after { background: linear-gradient(100deg, transparent 0%, rgba(47,75,255,0.16) 50%, transparent 100%); }
:is(.hero, .site-nav, .site-footer, .night, .tst2) .btn.btn--ghost::after { background: linear-gradient(100deg, transparent 0%, rgba(255,255,255,0.28) 50%, transparent 100%); }
.btn.btn--primary:hover::after, .btn.btn--ghost:hover::after, .btn.btn--primary:focus-visible::after, .btn.btn--ghost:focus-visible::after { transform: translateX(420%) rotate(12deg); }
.btn.btn--primary:hover { box-shadow: inset 0 1px 0 rgba(255,255,255,0.35), 0 10px 28px -10px rgba(47,75,255,0.75); }
.btn.btn--ghost:hover { box-shadow: inset 0 1px 0 rgba(255,255,255,0.5), 0 8px 22px -12px rgba(47,75,255,0.45); }
:is(.hero, .site-nav, .site-footer, .night) .btn.btn--ghost:hover { background: rgba(154,171,255,0.12); box-shadow: inset 0 1px 0 rgba(255,255,255,0.22), 0 10px 28px -12px rgba(47,75,255,0.6); }
@media (prefers-reduced-motion: reduce) { .btn.btn--primary::after, .btn.btn--ghost::after { display: none; } }
/* nav "Let's talk" is now a secondary (ghost) button */
.site-nav .btn.btn--ghost.site-nav__cta { min-height: 40px; height: auto; align-self: center; padding: 9px 18px; line-height: 1.25; }

/* ================= Homepage testimonials: black band, own gradient ================= */
.tst2 { position: relative; color: var(--text-on-dark); background-color: #000;
  background-image:
    radial-gradient(640px 380px at 8% 12%, rgba(124, 58, 237, 0.42) 0%, transparent 70%),
    radial-gradient(720px 420px at 92% 88%, rgba(76, 29, 149, 0.34) 0%, transparent 70%),
    radial-gradient(520px 300px at 70% 8%, rgba(47, 75, 255, 0.30) 0%, transparent 72%); }
.tst2 .eyebrow { color: var(--accent-on-dark); }
.tst2 h2 { color: #fff; }
.tcard { background: rgba(255,255,255,0.04); border-color: rgba(255,255,255,0.14); }
.tcard blockquote { flex: 0 0 auto; color: #fff; border-left-color: var(--accent-on-dark); }  /* rule stops with the text */
.tcard figcaption { margin-top: auto; color: rgba(255,255,255,0.72); }
.tcard figcaption strong { color: #fff; }
.tst2 .carousel__btn { border-color: rgba(255,255,255,0.6); color: #fff; }
.tst2 .carousel__btn:hover, .tst2 .carousel__btn:focus-visible { border-color: var(--accent); color: #fff; }
.tst2 .carousel:focus-visible { outline-color: var(--accent-on-dark); }
.tst2 .carousel__dot::before { background: rgba(255,255,255,0.4); }
.tst2 .carousel__dot:hover::before { background: #fff; }
.tst2 .carousel__dot[aria-current="true"]::before { background: var(--accent-on-dark); }

/* ================= Homepage process: white band, mirrors the Process page ================= */
.hp-proc.section { background: #fff; padding-block: clamp(96px, 6vw + 48px, 160px); }
.hp-proc__head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--sp-24) clamp(32px, 5vw, 88px); align-items: end; }
.hp-proc__note { margin: 0; max-width: 56ch; font-size: var(--fs-body); line-height: var(--lh-body); color: var(--text-muted); }
.hp-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--sp-16); }
.hp-steps > li { display: flex; }
.hp-step { display: flex; flex-direction: column; gap: var(--sp-12); width: 100%; padding: 28px 24px 32px; border: 1px solid var(--line); border-radius: 8px; background: #fff; color: var(--text-primary); text-decoration: none;
  transition: border-color .25s ease, box-shadow .25s ease, transform .25s ease; }
.hp-step:hover, .hp-step:focus-visible { border-color: var(--accent); box-shadow: 0 14px 32px -18px rgba(47,75,255,0.55); transform: translateY(-3px); color: var(--text-primary); }
.hp-step__n { font-family: var(--font-display); font-weight: var(--display-weight); font-size: var(--fs-concept); line-height: var(--lh-concept); color: var(--accent); }
.hp-step__t { font-size: var(--fs-body); line-height: 1.35; font-weight: var(--fw-semibold); }
.hp-step__d { font-size: var(--fs-small); line-height: 1.55; color: var(--text-muted); }
.hp-proc .stack > .link { justify-self: start; align-self: flex-start; }
@media (max-width: 1100px) { .hp-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 900px) { .hp-proc__head { grid-template-columns: minmax(0, 1fr); } .hp-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .hp-steps { grid-template-columns: minmax(0, 1fr); } .hp-proc.section { padding-block: 80px; } }
@media (prefers-reduced-motion: reduce) { .hp-step { transition: none; } .hp-step:hover, .hp-step:focus-visible { transform: none; } }

/* ================= Next case study: no rules above or below ================= */
.next, .section .next { border-top: 0; border-bottom: 0; }

/* ================= Case-study walkthrough (linear click-through) ================= */
.walk__ui { display: flex; flex-direction: column; gap: var(--sp-24); }
.walk__stage { display: grid; place-items: center; min-height: clamp(280px, 40vw, 620px); padding: clamp(16px, 3vw, 40px); border-radius: 8px; background: var(--surface-soft); border: 1px solid var(--line); }
.walk__slide { margin: 0; display: flex; justify-content: center; width: 100%; }
.walk__slide[hidden] { display: none; }
.walk__slide .screen--d, .walk__slide .screen--a, .walk__slide .screen--p { width: auto; max-width: 100%; max-height: min(620px, 70vh); height: auto; }
.walk__slide .screen--m { width: min(300px, 70vw); max-height: none; }
.walk__ui--m .walk__stage { min-height: 0; }
.walk__bar { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-24); }
.walk__meta { display: flex; flex-direction: column; gap: 4px; margin: 0; min-height: 3.2em; }
.walk__count { font-size: var(--fs-eyebrow); font-weight: var(--fw-bold); letter-spacing: var(--ls-eyebrow); text-transform: uppercase; color: var(--accent); }
.walk__cap { font-size: var(--fs-body); line-height: 1.45; color: var(--text-primary); max-width: 70ch; }
.walk__ctrls { display: flex; gap: var(--sp-12); flex-shrink: 0; }
.walk__ctrls .carousel__btn:disabled { opacity: .35; cursor: default; pointer-events: none; }
.walk__dots { list-style: none; margin: 0; padding: 0; display: flex; gap: 6px; }
.walk__dots li { flex: 1; display: flex; }
.walk__dot { flex: 1; height: 24px; padding: 0; border: 0; background: none; cursor: pointer; display: flex; align-items: center; }
.walk__dot::before { content: ""; display: block; width: 100%; height: 4px; border-radius: 2px; background: rgba(15,23,42,0.14); transition: background-color .2s ease; }
.walk__dot:hover::before { background: var(--text-muted); }
.walk__dot[aria-current="step"]::before { background: var(--accent); }
.walk__dot:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }
.walk__extra { margin-top: var(--sp-48); }
@media (max-width: 560px) { .walk__bar { align-items: flex-start; } .walk__ctrls .carousel__btn { width: 44px; height: 44px; } }

/* ================= Homepage testimonials: scroll stack ================= */
.tst3 { --pin-top: var(--nav-h); position: relative; color: var(--text-on-dark); background-color: #000;
  background-image:
    radial-gradient(640px 380px at 8% 12%, rgba(124, 58, 237, 0.42) 0%, transparent 70%),
    radial-gradient(720px 420px at 92% 88%, rgba(76, 29, 149, 0.34) 0%, transparent 70%),
    radial-gradient(520px 300px at 70% 8%, rgba(47, 75, 255, 0.30) 0%, transparent 72%);
  background-attachment: scroll; padding-block: var(--home-gap); }
.tst3 .eyebrow { color: var(--accent-on-dark); }
.tst3 h2 { color: #fff; }
.tst3__pin { display: flex; flex-direction: column; gap: var(--sp-48); }
.tst3__stage { display: grid; gap: var(--sp-16); }
.tst3__progress { display: none; }

/* card: same voice as the rest of the site (display type, accent rule, quiet caption), stacked like a deck */
.sc { position: relative; margin: 0; display: flex; flex-direction: column; gap: var(--sp-24); width: 100%; box-sizing: border-box;
  padding: clamp(24px, 3vw + 8px, 48px); border-radius: 18px; border: 1px solid rgba(255,255,255,0.12); overflow: hidden;
  --tone: #9aabff; --tone-glow: rgba(47,75,255,0.45); --dim: 0;
  background: radial-gradient(520px 260px at 100% 0%, var(--tone-glow) 0%, transparent 70%), linear-gradient(160deg, #141938 0%, #0a0c1d 62%, #07080f 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.10), 0 40px 80px -36px rgba(0,0,0,0.9); }
.sc--violet { --tone: #c4b5fd; --tone-glow: rgba(124,58,237,0.45); }
.sc--teal { --tone: #d8b4fe; --tone-glow: rgba(76,29,149,0.42); }
.sc::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: #000; opacity: var(--dim); pointer-events: none; }
.sc__top { display: flex; justify-content: space-between; align-items: baseline; gap: var(--sp-16); }
.sc__eyebrow { font-size: var(--fs-eyebrow); font-weight: var(--fw-bold); letter-spacing: var(--ls-eyebrow); text-transform: uppercase; color: var(--tone); }
.sc__n { font-size: 12px; font-weight: var(--fw-semibold); letter-spacing: .14em; color: rgba(255,255,255,0.55); font-variant-numeric: tabular-nums; }
.sc__q { margin: 0; padding-left: var(--sp-24); border-left: 3px solid var(--tone); font-family: var(--font-display); font-weight: var(--fw-medium, 500);
  font-size: clamp(20px, 1.1vw + 14px, 30px); line-height: 1.35; letter-spacing: -0.01em; color: #fff; text-wrap: pretty; }
.sc__by { margin-top: auto; display: flex; flex-direction: column; gap: 2px; padding-left: calc(var(--sp-24) + 3px); font-size: var(--fs-caption); line-height: var(--lh-caption); color: rgba(255,255,255,0.7); }
.sc__by strong { color: #fff; font-size: var(--fs-small); font-weight: var(--fw-semibold); }

/* stacked (JS on, motion allowed) */
.tst3.is-stack { padding-block: 0; height: calc(100vh + (var(--n) - 1 + 0.8) * 42vh); }
@supports (height: 100svh) { .tst3.is-stack { height: calc(100svh + (var(--n) - 1 + 0.8) * 42svh); } }
.tst3.is-stack .tst3__pin { position: sticky; top: var(--pin-top); height: calc(100vh - var(--pin-top)); overflow: clip; gap: var(--sp-24);
  padding-block: clamp(32px, 4vh, 64px) clamp(24px, 3vh, 40px); box-sizing: border-box; }
@supports (height: 100svh) { .tst3.is-stack .tst3__pin { height: calc(100svh - var(--pin-top)); } }
.tst3.is-stack .tst3__stage { flex: 1; min-height: 0; display: grid; place-items: center; padding-top: 72px; }
.tst3.is-stack .sc { grid-area: 1 / 1; width: min(880px, 100%); height: var(--sc-h, auto); transform-origin: 50% 0%; will-change: transform, filter; }
.tst3.is-stack .tst3__progress { display: flex; justify-content: center; align-items: center; gap: var(--sp-16); }
.tst3__rail { position: relative; width: 176px; height: 2px; border-radius: 1px; background: rgba(255,255,255,0.18); overflow: hidden; }
.tst3__fill { position: absolute; inset: 0; background: #fff; transform-origin: 0 50%; transform: scaleX(0); }
.tst3__count { font-size: 12px; font-weight: var(--fw-semibold); letter-spacing: .14em; color: rgba(255,255,255,0.7); font-variant-numeric: tabular-nums; }
@media (max-width: 760px) { .tst3.is-stack .tst3__stage { padding-top: 56px; } .tst3.is-stack .tst3__pin { gap: var(--sp-16); } }
@media (max-height: 640px) { .tst3.is-stack .tst3__stage { padding-top: 48px; } }
/* keep the gradient fixed to the pinned frame, not stretched over the whole scroll length */
.tst3.is-stack { background-image: none; }
.tst3.is-stack .tst3__pin { margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter);
  background-image:
    radial-gradient(640px 380px at 8% 18%, rgba(124, 58, 237, 0.42) 0%, transparent 70%),
    radial-gradient(720px 420px at 92% 90%, rgba(76, 29, 149, 0.34) 0%, transparent 70%),
    radial-gradient(520px 300px at 70% 10%, rgba(47, 75, 255, 0.30) 0%, transparent 72%); }
/* pin to the very top so a hidden nav never leaves a gap; the top padding clears the nav when it is showing */
.tst3 { --pin-top: 0px; }
.tst3.is-stack .tst3__pin { padding-top: calc(var(--nav-h) + clamp(24px, 3vh, 48px)); }

/* ================= Shared dark card (testimonial style, static and smaller) =================
   One look for every card on the site: deep navy gradient, a tinted corner glow, hairline border, colored eyebrow. */
:root { --dcard-bg: linear-gradient(160deg, #141938 0%, #0a0c1d 62%, #07080f 100%); --dcard-line: rgba(255,255,255,0.12);
  --tone-blue: #9aabff; --tone-violet: #c4b5fd; --tone-teal: #d8b4fe; }
.dcard, .hp-proc--dark .hp-step, .card, .outcome-grid .outcome, .cert {
  --tone: var(--tone-blue); --tone-glow: rgba(47,75,255,0.38);
  position: relative; overflow: hidden; border: 1px solid var(--dcard-line); border-radius: 14px; color: rgba(255,255,255,0.72);
  background: radial-gradient(360px 200px at 100% 0%, var(--tone-glow) 0%, transparent 70%), var(--dcard-bg);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.08), 0 24px 48px -28px rgba(5,8,28,0.7); }
.dcard--violet, .hp-proc--dark .hp-steps > li:nth-child(3n+2) .hp-step, .card:nth-child(3n+2), .outcome-grid .outcome:nth-child(3n+2), .cert:nth-child(2) { --tone: var(--tone-violet); --tone-glow: rgba(124,58,237,0.38); }
.dcard--teal, .hp-proc--dark .hp-steps > li:nth-child(3n) .hp-step, .card:nth-child(3n), .outcome-grid .outcome:nth-child(3n) { --tone: var(--tone-teal); --tone-glow: rgba(76,29,149,0.36); }
.dcard__eyebrow { display: block; margin-bottom: var(--sp-8); font-size: var(--fs-eyebrow); font-weight: var(--fw-bold); letter-spacing: var(--ls-eyebrow); text-transform: uppercase; color: var(--tone); }

/* homepage process */
.hp-proc--dark .hp-step { padding: 24px 22px 28px; color: rgba(255,255,255,0.72); }
.hp-proc--dark .hp-step__n { color: var(--tone); font-size: clamp(28px, 1.2vw + 18px, 40px); }
.hp-proc--dark .hp-step__t { color: #fff; }
.hp-proc--dark .hp-step__d { color: rgba(255,255,255,0.7); }
.hp-proc--dark .hp-step:hover, .hp-proc--dark .hp-step:focus-visible { color: rgba(255,255,255,0.72); border-color: color-mix(in srgb, var(--tone) 70%, transparent); box-shadow: inset 0 1px 0 rgba(255,255,255,0.12), 0 22px 44px -22px rgba(47,75,255,0.6); }
.hp-proc .hp-proc__cta { align-self: flex-start; }
.hp-proc__head { grid-template-columns: minmax(0, 1fr); }

/* case study "What to look for" */
.card { padding: 24px; gap: var(--sp-8); }
.card strong { color: #fff; }
.card span { color: rgba(255,255,255,0.7); }
.card strong::before { content: ""; display: block; width: 24px; height: 3px; margin-bottom: var(--sp-16); border-radius: 2px; background: var(--tone); }

/* case study outcomes */
.outcome-grid { gap: var(--sp-16); }
.outcome-grid .outcome { padding: 24px; border-top: 1px solid var(--dcard-line); gap: var(--sp-8); }
.outcome-grid .outcome .outcome__n { color: var(--tone); }
.outcome-grid .outcome p { color: rgba(255,255,255,0.72); }
.outcome-grid .outcome strong { color: #fff; }

/* about: certificates */
.certs { gap: var(--sp-16); border-top: 0; padding-top: 0; }
.cert { padding: 20px; }
.cert img { border-color: var(--dcard-line); }
.cert strong { color: #fff; }
.cert span { color: rgba(255,255,255,0.7); }

/* process page: the non-linear note becomes a callout */
.proc-aside__note.dcard { display: block; margin: 0; padding: 20px 22px; font-size: var(--fs-small); line-height: 1.55; color: rgba(255,255,255,0.78); max-width: none; }

/* ================= Site-wide color: the testimonial violet / teal accents on every dark band =================
   Blue stays the main glow; violet and teal sit in the corners. Painted on a z-index:-1 layer so each
   section's own blue glow (and the footer strip) stays exactly where it is. */
.hero, .night, .site-footer { position: relative; isolation: isolate; }
.hero::before, .night::before, .site-footer::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(560px 340px at 4% 100%, rgba(124, 58, 237, 0.30) 0%, transparent 70%),
    radial-gradient(620px 360px at 100% 100%, rgba(76, 29, 149, 0.26) 0%, transparent 70%); }
.site-footer::before { background:
    radial-gradient(620px 360px at 100% 100%, rgba(76, 29, 149, 0.26) 0%, transparent 70%),
    radial-gradient(520px 300px at 70% 0%, rgba(124, 58, 237, 0.22) 0%, transparent 72%); }
@media print { .hero::before, .night::before, .site-footer::before { display: none; } }

/* case-study collaborator quote: the homepage testimonial card, single and static, on the same black band */
.section.section--quote.cs-quote { background-color: #000;
  background-image:
    radial-gradient(640px 380px at 8% 12%, rgba(124, 58, 237, 0.42) 0%, transparent 70%),
    radial-gradient(720px 420px at 92% 88%, rgba(76, 29, 149, 0.34) 0%, transparent 70%),
    radial-gradient(520px 300px at 70% 8%, rgba(47, 75, 255, 0.30) 0%, transparent 72%); }
.cs-quote .eyebrow { color: var(--accent-on-dark); }
.cs-quote .sc--static { max-width: 880px; }
/* lighter shadows for dark cards sitting on light sections */
.hp-proc--dark .hp-step, .card, .outcome-grid .outcome, .cert, .proc-aside__note.dcard { box-shadow: inset 0 1px 0 rgba(255,255,255,0.08), 0 16px 32px -24px rgba(5,8,28,0.55); }
/* research quotes inside case studies: same card language as the testimonials */
.pullquote { --tone: var(--tone-teal); --tone-glow: rgba(76,29,149,0.34); padding: clamp(22px, 2vw + 12px, 36px); border-left: 0; border: 1px solid var(--dcard-line); border-radius: 14px;
  background: radial-gradient(360px 200px at 100% 0%, var(--tone-glow) 0%, transparent 70%), var(--dcard-bg); box-shadow: inset 0 1px 0 rgba(255,255,255,0.08); }
.pullquote blockquote { padding-left: var(--sp-24); border-left: 3px solid var(--tone); color: #fff; }
.pullquote figcaption { padding-left: calc(var(--sp-24) + 3px); color: rgba(255,255,255,0.7); }

/* walkthrough: one frame size for every step; screens fill its width, taller ones scroll inside */
.walk__slide { position: relative; }
.walk__frame { width: min(960px, 100%); aspect-ratio: 1 / var(--walk-ratio, 0.71); max-height: min(78vh, 768px); overflow-y: auto; overscroll-behavior: contain;
  border-radius: 10px; background: #fff; box-shadow: var(--shadow-screen-feature); scrollbar-width: thin; }
.walk__frame:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.walk__slide .walk__frame > .screen { display: block; width: 100%; max-width: none; max-height: none; height: auto; border-radius: 0; box-shadow: none; }
.walk__ui--m .walk__frame { width: min(300px, 70vw); max-height: none; border-radius: 22px; background: transparent; overflow: hidden; }
.walk__more { position: absolute; left: 50%; bottom: 12px; transform: translateX(-50%); padding: 6px 12px; border-radius: 999px; font-size: 12px; font-weight: var(--fw-semibold);
  color: #fff; background: rgba(10,12,29,0.82); pointer-events: none; opacity: 0; transition: opacity .2s ease; }
.walk__slide.has-more .walk__more { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .walk__more { transition: none; } }

/* ================= Case-study hero v2: copy left, 2 × 2 project facts right; product on a white band below ================= */
.hero--cs2 .cs-hero { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); align-items: center; gap: clamp(40px, 6vw, 112px); }
.cs-facts { margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; border: 1px solid var(--dcard-line); border-radius: 14px; overflow: hidden;
  background: radial-gradient(360px 220px at 100% 0%, rgba(47,75,255,0.32) 0%, transparent 70%), var(--dcard-bg); box-shadow: inset 0 1px 0 rgba(255,255,255,0.08); }
.cs-facts__item { display: flex; flex-direction: column; gap: 6px; padding: clamp(20px, 1.6vw + 10px, 32px); min-width: 0; }
.cs-facts__item:nth-child(odd) { border-right: 1px solid var(--dcard-line); }
.cs-facts__item:nth-child(n+3) { border-top: 1px solid var(--dcard-line); }
.cs-facts dt { font-size: var(--fs-eyebrow); font-weight: var(--fw-bold); letter-spacing: var(--ls-eyebrow); text-transform: uppercase; color: var(--accent-on-dark); }
.cs-facts dd { margin: 0; font-size: var(--fs-body); line-height: 1.45; color: #fff; overflow-wrap: anywhere; }
.hero--cs2 { padding-bottom: clamp(48px, 4vw + 24px, 96px); }
@media (max-width: 960px) { .hero--cs2 .cs-hero { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 420px) { .cs-facts { grid-template-columns: minmax(0, 1fr); } .cs-facts__item:nth-child(odd) { border-right: 0; } .cs-facts__item:nth-child(n+2) { border-top: 1px solid var(--dcard-line); } }

/* product visual band */
.cs-shot { background: #fff; padding-block: clamp(48px, 4vw + 24px, 96px); }
.cs-shot .cs-hero__visual { justify-content: center; }
.cs-shot .cs-hero__visual:not(.cs-hero__visual--phones) > .screen { width: min(1080px, 100%); aspect-ratio: auto; object-fit: contain; box-shadow: var(--shadow-screen-feature); }
.cs-shot .cs-hero__visual--compose .compose { max-width: 1160px; margin-inline: auto; }
.cs-shot .cs-hero__visual--compose .compose .screen { box-shadow: var(--shadow-screen-feature); }
.cs-shot .cs-hero__visual--phones .screen { box-shadow: var(--shadow-screen-feature); }
.cs-shot .cs-hero__visual--note { justify-content: center; }
.cs-shot .cs-hero__confidential { max-width: 720px; border-color: var(--dcard-line); border-radius: 14px; color: rgba(255,255,255,0.78);
  background: radial-gradient(360px 200px at 100% 0%, rgba(124,58,237,0.36) 0%, transparent 70%), var(--dcard-bg); }
.cs-shot .cs-hero__confidential .eyebrow { color: var(--tone-violet); }

/* collaborator perspective: room above the label */
.section.section--quote.cs-quote { padding-block: clamp(80px, 5vw + 48px, 144px); }
.cs-quote .stack { gap: var(--sp-24); }

.cs-shot .cs-hero__visual--phones { align-items: flex-end; gap: clamp(16px, 3vw, 48px); }
.cs-shot .cs-hero__visual--phones .screen { width: clamp(90px, 25vw, 300px); height: auto; max-height: none; aspect-ratio: auto; border-radius: 22px; }
.cs-shot .cs-hero__visual--phones[data-n="3"] .screen:nth-child(2) { margin-bottom: clamp(16px, 3vw, 48px); }
/* odd number of facts (e.g. no timeline yet): the last one spans the row */
.cs-facts__item:last-child:nth-child(odd) { grid-column: 1 / -1; border-right: 0; }

/* problem statement: same voice as the Next case study callout (accent label, large display type, open page background, no rules) */
.section.section--problem { background: var(--surface-page); margin-top: 0; padding-block: clamp(80px, 5vw + 48px, 144px); }
.section--problem .perspective { gap: var(--sp-12); }
.section--problem .eyebrow { color: var(--accent); }
.problem__statement { width: auto; max-width: 30ch; font-family: var(--font-display); font-weight: var(--display-weight); font-size: clamp(26px, 1.7vw + 16px, 44px); line-height: 1.2; letter-spacing: var(--ls-tight); color: var(--text-primary); }
@media (max-width: 860px) { .problem__statement { width: auto; font-size: clamp(24px, 4vw + 10px, 32px); } }
main #challenge.section--problem { padding-top: clamp(80px, 5vw + 48px, 144px); }
main #perspective + #challenge.section--problem { padding-top: clamp(80px, 5vw + 48px, 144px); }

/* résumé: company with its dates underneath in the timeline; dates leave the right panel while tabs are on */
.resume-tabs .path__link { align-items: flex-start; padding-block: 6px; }
.resume-tabs .path__dot { margin-top: 4px; }
.path__txt { display: flex; flex-direction: column; gap: 2px; }
.path__co { line-height: 1.3; }
.path__when { font-size: var(--fs-caption); line-height: 1.3; font-weight: var(--fw-medium); color: var(--text-muted); }
.path__link[aria-current] .path__when, .resume-tab[aria-selected="true"] .path__when { color: var(--accent); font-weight: var(--fw-semibold); }
.resume-panels [role="tabpanel"].resume-row { grid-template-columns: minmax(0, 1fr); }
.resume-panels [role="tabpanel"] .resume-row__when { display: none; }
/* bullets: quiet slate instead of accent blue */
.resume-row__points li::marker { color: #a3acc2; }

/* problem statement closes with the same blue glow strip that sits above the footer */
main #challenge.section--problem { position: relative; padding-bottom: calc(clamp(80px, 5vw + 48px, 144px) + clamp(48px, 4vw, 72px)); }
#challenge.section--problem::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: clamp(48px, 4vw, 72px); pointer-events: none;
  background: radial-gradient(900px 400px at 20% 0%, var(--glow) 0%, transparent 70%); }
#challenge.section--problem + .section { padding-top: var(--narrative-gap, 96px); }
@media print { #challenge.section--problem::after { display: none; } }
.hero--resume .hero__lead { max-width: 900px; }

/* problem statement body: back to the lead style, full width so it runs about two lines */
.problem__statement { width: 100%; max-width: none; font-family: var(--font-text); font-weight: var(--fw-regular); font-size: var(--fs-lead); line-height: var(--lh-lead); letter-spacing: var(--ls-snug); }
@media (max-width: 860px) { .problem__statement { font-size: var(--fs-lead-sm); } }
@media (min-width: 861px) { .problem__statement { font-size: calc(var(--fs-lead) * 0.95); text-wrap: balance; } }
.resume__focus { font-family: var(--font-text); font-size: var(--fs-body); font-weight: var(--fw-regular); color: var(--text-muted); letter-spacing: 0; }

/* résumé: the whole résumé reads top to bottom on the right; the left timeline jumps to each part */
.resume-row .kicker.resume-row__org { margin: 0 0 calc(-1 * var(--sp-8)); }
@media (min-width: 1025px) {
  .resume-panels > .resume-row { grid-template-columns: minmax(0, 1fr); }
  .resume-panels > .resume-row .resume-row__when { display: none; }
}
.resume-panels > .resume-row + .resume-row { margin-top: 0; }

/* about story: comfortable reading measure (~70–80 characters per line) */
.story4 { --read: 760px; }
.story4 .ch:not(.ch--photo) { max-width: var(--read); }
.story4 .ch p:not(.ch__pull p) { max-width: 70ch; }

/* ================= About: My Story uses the résumé layout (sticky chapter index left, story right) ================= */
.story5 { padding-block: clamp(64px, 3vw + 48px, 104px); }
.story5__body { max-width: 760px; }
.story5 .ch { max-width: none; scroll-margin-top: calc(var(--nav-h) + 24px); }
.story5 .ch + .ch { margin-top: clamp(56px, 3vw + 40px, 88px); padding-top: clamp(40px, 2vw + 28px, 56px); border-top: 1px solid var(--line); }
.story5 .ch p { max-width: none; }
.story5 .ch__pull p { max-width: none; white-space: normal; }
.story5 .ch__photo { margin: var(--sp-32) 0 0; max-width: 400px; }
.story5 .proc-aside .path__link[aria-current] .path__n { color: var(--accent); }
.story-jump { display: none; }
@media (max-width: 1024px) {
  .story5 .proc-aside { display: none; }
  .story5__body { max-width: none; }
  .story-jump { display: block; margin: 0 0 var(--sp-32); }
  .story-jump ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--sp-8); }
  .story-jump a { display: inline-flex; align-items: center; min-height: 40px; padding: 0 14px; border: 1px solid var(--line-strong); border-radius: 999px; font-size: var(--fs-caption); font-weight: var(--fw-semibold); color: var(--text-primary); text-decoration: none; }
  .story-jump a:hover, .story-jump a:focus-visible { border-color: var(--accent); color: var(--accent); }
}
@media print { .story-jump { display: none; } }
@media (max-width: 1024px) {
  .story-jump .eyebrow { margin: 0 0 var(--sp-12); }
  .story-jump ol { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-inline: calc(-1 * var(--gutter)); padding-inline: var(--gutter); }
  .story-jump ol::-webkit-scrollbar { display: none; }
  .story-jump a { white-space: nowrap; }
}

/* about story body = résumé body text (same size, line height and color) */
.story5 .ch p { font-size: var(--fs-body); line-height: var(--lh-body); color: var(--text-secondary); }
.story5 .ch > .ch__title + p { color: var(--text-secondary); }
.story5 .ch p + p { margin-top: 1em; }

/* about story: photo under the chapter index (index sticks, photo scrolls away beneath it) */
.story5 .story5__aside { position: static; align-self: stretch; display: block; }
.story5__nav { position: sticky; top: 128px; z-index: 1; display: flex; flex-direction: column; gap: var(--stack-heading); padding-bottom: var(--sp-24); background: var(--surface-page); }
.story5__photo { margin: var(--sp-24) 0 0; width: clamp(240px, 21vw, 300px); }
.story5 .story5__photo img { aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 15%; border-radius: var(--radius-md, 8px); }
.story5__photo--m { display: none; }
@media (max-width: 1024px) {
  .story5__photo--m { display: block; width: min(240px, 60vw); margin: 0 0 var(--sp-32); }
}
/* pull quote: back to a display-size callout (the body-text rule had shrunk it) */
.story5 .ch .ch__pull p { font-family: var(--font-display); font-weight: var(--display-weight); font-size: clamp(28px, 1.2vw + 16px, 36px); line-height: 1.2; letter-spacing: -0.02em; color: var(--text-primary); }
@media (min-width: 1100px) { .story5 .ch .ch__pull p { font-size: clamp(28px, 0.8vw + 18px, 32px); text-wrap: balance; } }
/* the sticky index masks the photo as it scrolls up beneath it (covers the gap under the site header too) */
.story5__nav::before { content: ""; position: absolute; left: -8px; right: -8px; bottom: 100%; height: 48px; background: var(--surface-page); }
.story5 .story5__photo img { object-position: 50% 22%; }
@media (max-width: 1024px) {
  .story5 .story5__aside { display: none; }
  .story-jump.eyebrow { margin-bottom: var(--sp-16); }
  .story5__photo--m { margin-top: 0; }
}
@media (max-width: 1024px) { .story5 .story5__photo--m { margin: 0 0 var(--sp-32); } }

/* about story: index + photo stick together for the whole story and leave when it ends */
.story5__stick { position: sticky; top: 128px; }
.story5 .story5__nav { position: static; padding-bottom: 0; background: none; }
.story5__nav::before { content: none; }
.story5 .story5__photo { margin-top: var(--sp-32); width: min(360px, 100%, calc((100vh - 128px - 300px) * 0.8)); }
@supports (height: 100svh) { .story5 .story5__photo { width: min(360px, 100%, calc((100svh - 128px - 300px) * 0.8)); } }

/* homepage portrait: lift it off the glow, and keep the right shoulder (only a short fade at the photo's cut edge) */
.hero--photo-left:has(.hero__portrait) .hero__portrait:not(.hero__portrait--about) {
  filter: drop-shadow(0 20px 36px rgba(0, 0, 0, 0.7)) drop-shadow(0 2px 8px rgba(0, 0, 0, 0.45));
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 16%, #000 93%, transparent 100%);
          mask-image: linear-gradient(to right, transparent 0, #000 16%, #000 93%, transparent 100%); }
@media (max-width: 860px) {
  .hero--photo-left:has(.hero__portrait) .hero__portrait:not(.hero__portrait--about) {
    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 16%, #000 93%, transparent 100%), linear-gradient(to bottom, #000 70%, transparent 98%);
            mask-image: linear-gradient(to right, transparent 0, #000 16%, #000 93%, transparent 100%), linear-gradient(to bottom, #000 70%, transparent 98%); }
}

/* testimonials: progress + arrows sit under the title */
.tst3__head { display: flex; flex-direction: column; gap: var(--sp-16); }
.tst3.is-stack .tst3__progress { justify-content: flex-start; gap: var(--sp-12); }
.tst3__btn { width: 40px; height: 40px; border-color: rgba(255,255,255,0.45); color: #fff; background: transparent; flex: none; }
.tst3__btn:disabled { opacity: .3; cursor: default; pointer-events: none; }
.tst3__btn:hover, .tst3__btn:focus-visible { border-color: var(--accent); }
.tst3__btn:focus-visible { outline: 2px solid var(--accent-on-dark); outline-offset: 2px; }
.tst3__btn svg { width: 16px; height: 16px; }
.tst3:not(.is-stack) .tst3__btn { display: none; }
.tst3__count { white-space: nowrap; }
.tst3__arrows { display: inline-flex; gap: var(--sp-8); margin-left: var(--sp-8); }
.tst3__btn:not(:hover):not(:focus-visible) { background: transparent; color: #fff; border-color: rgba(255,255,255,0.45); box-shadow: none; }
@media (max-width: 560px) { .tst3__rail { width: 120px; } }
/* stack: covered cards fade their blur in/out instead of re-rendering it every frame */
.tst3.is-stack .sc { will-change: transform, opacity; transition: filter .35s ease; }
@media (prefers-reduced-motion: reduce) { .tst3.is-stack .sc { transition: none; } }

/* homepage process: easier-to-read card text, and the non-linear note before the CTA */
.hp-proc--dark .hp-step__d { color: rgba(255,255,255,0.84); }
.hp-proc__loop { margin: 0; max-width: 62ch; font-size: var(--fs-body); line-height: var(--lh-body); color: var(--text-secondary); }

/* ================= Logo strip: compact credibility band ================= */
.home-hero .logo-band, .logo-band { gap: var(--sp-16); padding-block: 28px 24px; }
.logo-band .label { margin: 0; }
.marquee__track li { height: 48px; padding-inline: clamp(20px, 2vw, 28px); }
.marquee__track img { filter: grayscale(1) brightness(0.32); opacity: 0.72; }
.marquee__track img.is-flat { filter: brightness(0); opacity: 0.6; }
@media (max-width: 1024px) { .home-hero .logo-band, .logo-band { padding-block: 24px 20px; gap: var(--sp-12); } .marquee__track img { height: calc(var(--h, 28px) * 0.9); } }
@media (max-width: 760px) { .home-hero .logo-band, .logo-band { padding-block: 20px 16px; } .marquee__track li { height: 40px; padding-inline: 18px; } .marquee__track img { height: calc(var(--h, 28px) * 0.78); } }
.home-hero .logo-band, .logo-band { padding-block: 40px 36px; gap: 20px; } @media (max-width: 1024px) { .home-hero .logo-band, .logo-band { padding-block: 32px 28px; gap: 14px; } } @media (max-width: 760px) { .home-hero .logo-band, .logo-band { padding-block: 26px 22px; gap: 12px; } }

/* homepage first screen: hero grows so hero + logo strip fill the viewport with ~22px to spare.
   min-height only — on short screens the hero keeps its natural height, so nothing is ever clipped. */
@media (min-width: 1025px) {
  .home-hero { --first-strip: 166px; --first-gap: 22px; }
  .home-hero .hero--photo-left:has(.hero__portrait) { min-height: calc(100vh - var(--nav-h) - var(--first-strip) - var(--first-gap)); }
  @supports (height: 100svh) { .home-hero .hero--photo-left:has(.hero__portrait) { min-height: calc(100svh - var(--nav-h) - var(--first-strip) - var(--first-gap)); } }
}

/* case-study table of contents: lighter drawer */
.toc { width: min(360px, 86vw); }
.toc__list a { min-height: 36px; font-size: 15px; line-height: 1.3; }

/* case-study hero v3: title + intro, then one horizontal metadata strip (Role | Team | Timeline | Platform) */
.hero--cs2 .cs-hero { grid-template-columns: minmax(0, 1fr); }
.hero--cs2 .cs-hero__copy { max-width: 880px; }
.cs-hero__meta--strip { margin-top: clamp(36px, 2vw + 24px, 56px); padding-block: var(--sp-24); border-top: 1px solid rgba(255,255,255,0.18); border-bottom: 1px solid rgba(255,255,255,0.18); }
.cs-hero__meta--strip dd { color: rgba(255,255,255,0.86); }

/* ================= Final polish: one brand palette (black · deep blue · purple) ================= */
:root {
  --brand-blue: 27, 42, 158;      /* deep blue glow */
  --brand-purple: 76, 29, 149;    /* deep purple */
  --grad-band:
    radial-gradient(640px 380px at 8% 12%, rgba(124, 58, 237, 0.40) 0%, transparent 70%),
    radial-gradient(720px 420px at 92% 88%, rgba(var(--brand-purple), 0.34) 0%, transparent 70%),
    radial-gradient(520px 300px at 70% 8%, rgba(47, 75, 255, 0.30) 0%, transparent 72%);
}
.tst3.is-stack .tst3__pin, .tst2, .section.section--quote.cs-quote { background-image: var(--grad-band); }

/* My role: editorial columns on the page background, no grey boxes */
.owned { border-top: 0; border-bottom: 0; gap: var(--col-gap); }
.owned__col, .owned__col:first-child, .owned__col:last-child { background: none !important; border-radius: 0; border-left: 0; padding: var(--sp-20, 20px) 0 0; border-top: 2px solid var(--accent); box-shadow: none; }
.owned h3 { font-family: var(--font-display); font-size: var(--fs-h4, 20px); line-height: 1.3; letter-spacing: -0.01em; text-transform: none; color: var(--text-primary); }
@media (max-width: 860px) { .owned { gap: var(--sp-32); } .owned__col, .owned__col:first-child, .owned__col:last-child { padding: var(--sp-16) 0 0; } }

/* Key decisions: thin rule between decisions, tighter rhythm */
.decisions > .decision + .decision { border-top: 1px solid var(--line); padding-top: clamp(40px, 3vw + 24px, 64px); margin-top: clamp(40px, 3vw + 24px, 64px); }

/* case hero: less dead space under the metadata strip */
.hero--cs2 { padding-bottom: clamp(36px, 2vw + 24px, 56px); }
.decisions:not(.decisions--text) { gap: 0; } .decisions--text > .decision + .decision { margin-top: 0; padding-top: var(--sp-32); }
#role .owned__col, #role .owned__col:first-child, #role .owned__col:last-child { padding: var(--sp-20, 20px) 0 0; background: none; border-radius: 0; } @media (max-width: 860px) { #role .owned__col, #role .owned__col:first-child, #role .owned__col:last-child { padding: var(--sp-16) 0 0; } }

/* case-study footer link: same scale and type as the Case Studies index rows, arrow right after the title */
.next.next--cs { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; padding: var(--sp-32) 0; }
.next--cs .next__label { font-family: var(--font-text); font-size: var(--fs-caption); line-height: var(--lh-caption); font-weight: var(--fw-semibold); letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-muted); }
.next--cs .next__title { display: inline-flex; align-items: center; gap: var(--sp-16); font-size: clamp(22px, 0.6vw + 18px, 28px); line-height: 1.2; letter-spacing: -0.01em; }
.next--cs .next__go { width: 40px; height: 40px; flex: none; }
.next--cs:hover .next__title { text-decoration: none; }
.next--cs:hover .next__title::first-line { text-decoration: underline; }
.next--cs .next__title { display: block; } .next--cs .next__go { display: inline-flex; vertical-align: middle; margin-left: var(--sp-12); margin-top: -4px; }

/* homepage process: link inline with the title (like "View all case studies"), non-linear note on one line beneath */
.hp-proc .heading { width: 100%; }
.hp-proc .hp-proc__loop { margin-top: var(--sp-16); max-width: none; white-space: nowrap; }
@media (max-width: 1100px) { .hp-proc .hp-proc__loop { white-space: normal; max-width: 62ch; } }
.hp-proc .stack { gap: clamp(48px, 3vw + 32px, 72px); }
.hp-proc.section { padding-bottom: clamp(160px, 6vw + 110px, 220px); }

/* Process / About / Resume heroes: same top padding so eyebrow + title start at the same spot */
main .hero.hero--page.hero--stack { padding-top: var(--section-band); }
/* wider intro so it stays at about three lines */
.hero--resume .hero__lead { max-width: 1120px; }
.hero--about3 .hero__lead { max-width: 860px; }

/* homepage hero tagline (signature brand line; ties to About "Finding the rhythm in complex systems") */
.hero__tagline { max-width: 600px; font-size: clamp(18px, 0.4vw + 15px, 22px); line-height: 1.45; color: rgba(255,255,255,0.84); text-wrap: pretty; }
@media (min-width: 1025px) { .hero__tagline { max-width: 780px; text-wrap: wrap; } }
@media (min-width: 1180px) { .hero--about3 .hero__lead { max-width: 960px; } }

/* ================= Featured projects: one media stage + editorial rows on both pages ================= */
.rows .row, .rows--compose .row { padding-block: clamp(56px, 4vw + 32px, 96px); border-top: 1px solid var(--line); }
.rows .row:first-child { padding-top: 0; border-top: 0; }
.rows .row:last-child { padding-bottom: 0; }
.row__visual { display: flex; align-items: center; justify-content: center; aspect-ratio: 16 / 11; }
.row__visual > .screen { width: auto; height: auto; max-width: 100%; max-height: 100%; object-fit: contain; border-radius: var(--radius-md); box-shadow: var(--shadow-screen-feature); }
.row__visual > .compose { width: 92%; max-height: 100%; padding: 0; justify-content: center; }
.row__visual > .compose .screen { box-shadow: var(--shadow-screen-feature); }
.row__copy { max-width: 520px; }
/* no slide-in / fade on featured images */
.js .reveal .row__visual, .js .reveal--right .row__visual, .js .reveal .row__copy { opacity: 1 !important; transform: none !important; transition: none !important; }

/* Supporting / earlier work: area as the shared pills */
.index__area.pills { margin: 0; text-transform: none; letter-spacing: 0; font-weight: var(--fw-regular); }
@media (min-width: 1025px) { .index__head, .index__row a { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr) minmax(0, 1.5fr) var(--tap); } }
@media (max-width: 860px) { .index__area.pills { margin-block: 6px; } }
.row__visual > .screen { max-width: 92%; }
.row__visual > .compose { width: 100%; }

/* homepage hero: tagline held to exactly two lines on desktop; copy block nudged up and left to the nav gutter (portrait stays put) */
@media (min-width: 1180px) {
  .hero__tagline { max-width: none; }
  .hero__tagline .tl-line { display: block; white-space: nowrap; }
  .home-hero .hero--photo-left:has(.hero__portrait) .hero__body { position: relative; left: calc(var(--gutter) - max(var(--gutter), (100vw - 1260px) / 2)); top: -24px; }
}

/* next case study: same row as the Case Studies index (company above name, thin rules), tertiary link on the right */
.next-row { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-24); padding: var(--sp-32) 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); color: var(--text-primary); text-decoration: none; }
.next-row__name { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.next-row .index__title { font-family: var(--font-display); font-weight: var(--display-weight); font-size: clamp(22px, 0.6vw + 18px, 28px); line-height: 1.2; letter-spacing: -0.01em; }
.next-row__cta { display: inline-flex; align-items: center; gap: var(--sp-8); flex: none; min-height: var(--tap); font-size: var(--fs-small); font-weight: var(--fw-semibold); color: var(--accent); }
.next-row__cta svg { transition: transform .2s ease; }
.next-row:hover .index__title { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 6px; }
.next-row:hover .next-row__cta svg { transform: translateX(3px); }
.next-row:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; border-radius: 4px; }
@media (max-width: 560px) { .next-row { flex-direction: column; align-items: flex-start; gap: var(--sp-12); } }
@media (prefers-reduced-motion: reduce) { .next-row__cta svg { transition: none; } }

/* blue glow strip used as a section separator (same gradient as the strip above the footer) */
.glow-sep { height: clamp(48px, 4vw, 64px); background: radial-gradient(900px 400px at 20% 0%, var(--glow) 0%, transparent 70%); }
.glow-sep { background: radial-gradient(900px 400px at 80% 0%, var(--glow) 0%, transparent 70%); }
.glow-sep { background: radial-gradient(1000px 400px at 78% 0%, var(--glow) 0%, transparent 70%), linear-gradient(90deg, rgba(27, 42, 158, 0.32) 0%, rgba(27, 42, 158, 0.5) 100%); }
.proj-sep { margin: 0; border: 0; border-top: 1px solid var(--line); }
.hero--cs .hero__lead { max-width: 62ch; }

/* resume hero: name as H1, title as subtitle */
.hero__role { margin: calc(var(--sp-12) * -1) 0 0; font-family: var(--font-display); font-weight: var(--fw-medium, 500); font-size: clamp(20px, 0.5vw + 17px, 26px); line-height: 1.3; letter-spacing: -0.01em; color: rgba(255,255,255,0.88); }

/* footer glow stays inside the footer (it was bleeding up into the light section above) */
.site-footer { overflow: hidden; overflow: clip; }
/* about: more breathing room around certifications */
.about-certs.section { padding-block: clamp(72px, 3vw + 48px, 112px) clamp(88px, 4vw + 56px, 136px); }
.about-certs .certs { margin-top: var(--sp-8); }