/* ============================================================
   FÉLIX PATETE — PORTFOLIO v3
   Palette: pine green + parchment + sage (unchanged), clay as the
   single warm complement.
   Type: San Francisco on Apple devices via the system stack,
   Inter everywhere else. No font files are shipped for SF.
   ============================================================ */

@property --spin { syntax: '<angle>'; inherits: false; initial-value: 0deg; }

/* ─── TOKENS ──────────────────────────────────────────────── */
:root {
  --font: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'SF Pro Text', 'Inter', system-ui, 'Segoe UI', Roboto, sans-serif;

  --pine: #1b3e3a;
  --pine-deep: #102c26;
  --pine-mid: #29453e;
  --parchment: #eee7d9;
  --sage-field: #d8ddc7;
  --clay: #d6b7a1;

  --bg: #102c26;
  --bg-2: #183a31;
  --bg-3: #244c40;
  --ink: #eee7d9;
  --ink-2: #b7c7b6;
  --ink-3: #8fa594;
  --line: rgba(238, 231, 217, .14);
  --line-2: rgba(238, 231, 217, .28);
  --accent: #c4d7a6;
  --on-accent: #102c26;
  --glass: rgba(16, 44, 38, .72);
  --logo-filter: brightness(0) invert(1);
  --logo-flat: grayscale(1) contrast(3) invert(1);
  --logo-blend: screen;

  --gutter: clamp(20px, 4.6vw, 76px);
  --max: 1480px;
  --pad: clamp(72px, 9vw, 150px);
  --ease: cubic-bezier(.19, 1, .22, 1);
  --r-frame: 14px;
  --r-card: 10px;
}

html[data-theme='light'] {
  --bg: #eee7d9;
  --bg-2: #e4ddce;
  --bg-3: #d6d8c5;
  --ink: #173d31;
  --ink-2: #446052;
  --ink-3: #66796c;
  --line: rgba(23, 61, 49, .15);
  --line-2: rgba(23, 61, 49, .3);
  --accent: #28543e;
  --on-accent: #eee7d9;
  --glass: rgba(238, 231, 217, .78);
  --logo-filter: brightness(0);
  --logo-flat: grayscale(1) contrast(3);
  --logo-blend: multiply;
}

/* Colour fields. Each one re-declares the tokens, so everything
   inside inherits the right ink without extra selectors. */
.band-paper, .band-sage {
  --bg: #eee7d9; --bg-2: #e4ddce; --bg-3: #d6d8c5;
  --ink: #173d31; --ink-2: #446052; --ink-3: #66796c;
  --line: rgba(23, 61, 49, .15); --line-2: rgba(23, 61, 49, .3);
  --accent: #28543e; --on-accent: #eee7d9;
  --logo-filter: brightness(0);
}
.band-sage { --bg: #d8ddc7; --bg-2: #cdd3ba; }
html[data-theme='light'] .band-paper { --bg: #e6dfd0; --bg-2: #dcd5c5; }
.band-pine, .band-deep {
  --bg: #1b3e3a; --bg-2: #24504a; --bg-3: #2d5c54;
  --ink: #eee7d9; --ink-2: #b7c7b6; --ink-3: #8fa594;
  --line: rgba(238, 231, 217, .14); --line-2: rgba(238, 231, 217, .28);
  --accent: #c4d7a6; --on-accent: #102c26;
  --logo-filter: brightness(0) invert(1);
}
.band-deep { --bg: #29453e; }

/* ─── BASE ────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font);
  font-size: 17px;
  line-height: 1.55;
  letter-spacing: -.011em;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
h1, h2, h3, h4, p, ul, ol, dl, dd, figure { margin: 0; padding: 0; }
ul, ol { list-style: none; }
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; text-align: left; letter-spacing: inherit; }
h1, h2, h3 { text-wrap: balance; }
p { text-wrap: pretty; }
::selection { background: var(--accent); color: var(--on-accent); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; border-radius: 4px; }
[hidden] { display: none !important; }

.wrap { max-width: var(--max); margin-inline: auto; padding-inline: var(--gutter); }
.band { position: relative; background: var(--bg); color: var(--ink); padding-block: var(--pad); isolation: isolate; }

.skip { position: fixed; top: 12px; left: 12px; z-index: 2000; padding: 12px 18px; border-radius: 8px; background: var(--ink); color: var(--bg); transform: translateY(-220%); }
.skip:focus { transform: none; }
.progress { position: fixed; inset: 0 0 auto 0; height: 2px; z-index: 1500; background: var(--accent); transform: scaleX(var(--progress, 0)); transform-origin: left; }

/* Type roles */
.display { font-size: clamp(42px, 7.1vw, 124px); font-weight: 600; line-height: .98; letter-spacing: -.045em; }
.h-xl { font-size: clamp(36px, 5.2vw, 88px); font-weight: 600; line-height: 1.02; letter-spacing: -.04em; }
.h-lg { font-size: clamp(30px, 3.6vw, 60px); font-weight: 600; line-height: 1.06; letter-spacing: -.035em; }
.h-md { font-size: clamp(21px, 1.7vw, 28px); font-weight: 600; line-height: 1.2; letter-spacing: -.025em; }
.lede { font-size: clamp(18px, 1.45vw, 23px); line-height: 1.5; color: var(--ink-2); letter-spacing: -.017em; max-width: 46ch; }
.body { color: var(--ink-2); max-width: 60ch; }
.note { font-size: 14px; color: var(--ink-3); letter-spacing: -.005em; }
.soft { color: var(--ink-3); }

/* A hairline that draws itself in when its section arrives. */
.rule { display: block; height: 1px; background: var(--line-2); transform: scaleX(0); transform-origin: left; transition: transform 1.4s var(--ease); }
.in .rule, .rule.in { transform: scaleX(1); }

/* ─── BUTTONS ─────────────────────────────────────────────── */
.btn {
  position: relative; display: inline-flex; align-items: center; gap: 12px;
  min-height: 50px; padding: 0 22px; border-radius: 100px;
  font-size: 16px; font-weight: 500; white-space: nowrap;
  transition: transform .5s var(--ease), background-color .3s, color .3s, border-color .3s;
}
.btn .arrow { width: 17px; height: 17px; flex-shrink: 0; transition: transform .5s var(--ease); }
.btn-solid { background: var(--ink); color: var(--bg); overflow: hidden; }
.btn-solid::after { content: ''; position: absolute; inset: 0; background: var(--accent); transform: translateY(101%); transition: transform .5s var(--ease); border-radius: inherit; }
.btn-solid > * { position: relative; z-index: 1; }
.btn-line { border: 1px solid var(--line-2); }
.arrow-down { transform: rotate(90deg); }
@media (hover: hover) {
  .btn-solid:hover::after { transform: none; }
  .btn-solid:hover { color: var(--on-accent); }
  .btn:hover .arrow { transform: translateX(4px); }
  .btn:hover .arrow-down { transform: rotate(90deg) translateX(4px); }
  .btn-line:hover { border-color: var(--ink); }
}
.btn:active { transform: scale(.97); }

/* Travelling light on a border. Used on the status pill, the
   contact button and hovered frames. */
.trace { position: relative; }
.trace::before {
  content: ''; position: absolute; inset: -1px; padding: 1px; border-radius: inherit; pointer-events: none;
  background: conic-gradient(from var(--spin), transparent 0 62%, var(--accent) 80%, transparent 96%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  animation: spin 7s linear infinite;
}
@keyframes spin { to { --spin: 360deg; } }

/* ─── NAV ─────────────────────────────────────────────────── */
.nav { position: fixed; top: 16px; left: 0; right: 0; z-index: 900; display: flex; justify-content: center; padding-inline: 14px; pointer-events: none; transition: transform .6s var(--ease); }
.nav.is-away { transform: translateY(-140%); }
.nav-inner {
  pointer-events: auto; display: flex; align-items: center; gap: clamp(14px, 2.4vw, 34px);
  padding: 8px 8px 8px 22px; border-radius: 100px;
  background: var(--glass); border: 1px solid var(--line);
  -webkit-backdrop-filter: blur(18px) saturate(1.3); backdrop-filter: blur(18px) saturate(1.3);
}
.logo { font-size: 22px; font-weight: 700; letter-spacing: -.05em; }
.logo i { font-style: normal; color: var(--accent); }
.nav-links { display: flex; gap: clamp(12px, 2vw, 28px); }
.nav-links a { position: relative; font-size: 15px; color: var(--ink-2); padding: 8px 0; transition: color .3s; }
.nav-links a::after { content: ''; position: absolute; left: 0; right: 0; bottom: 3px; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: right; transition: transform .5s var(--ease); }
.nav-links a:hover, .nav-links a[aria-current] { color: var(--ink); }
.nav-links a:hover::after, .nav-links a[aria-current]::after { transform: scaleX(1); transform-origin: left; }
.theme { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; border: 1px solid var(--line); transition: border-color .3s, transform .6s var(--ease); }
.theme svg { width: 18px; height: 18px; }
.theme:hover { border-color: var(--line-2); transform: rotate(40deg); }

/* ─── BACKGROUND WASH + GRAIN ─────────────────────────────── */
.wash { position: absolute; inset: 0; overflow: hidden; z-index: -1; pointer-events: none; }
.wash i { position: absolute; left: -20%; top: -30%; width: 110%; height: 140%; opacity: .13; background: radial-gradient(ellipse at 45% 45%, var(--clay) 0%, transparent 62%); animation: drift var(--t, 70s) ease-in-out var(--d, 0s) infinite alternate; will-change: transform; }
.wash i:nth-child(2) { left: 15%; top: -10%; background: radial-gradient(ellipse at 45% 45%, #c2d5a4 0%, transparent 62%); animation-direction: alternate-reverse; }
.wash i:nth-child(3) { left: 35%; top: -40%; background: radial-gradient(ellipse at 45% 45%, #c6bedc 0%, transparent 60%); }
html[data-theme='light'] .wash i { opacity: .42; }
@keyframes drift { from { transform: translate(var(--x1, -8%), var(--y1, -6%)) scale(1); } to { transform: translate(var(--x2, 18%), var(--y2, 16%)) scale(1.18); } }
.bg-paused .wash i, .tab-hidden .wash i { animation-play-state: paused; }
.grain { position: fixed; inset: 0; z-index: 1400; pointer-events: none; opacity: .035; mix-blend-mode: overlay; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }

/* ─── HERO ────────────────────────────────────────────────── */
.hero { position: relative; isolation: isolate; padding: clamp(104px, 9vw, 150px) 0 clamp(40px, 4vw, 70px); }
.hero-head { display: flex; align-items: center; justify-content: space-between; gap: 16px 28px; flex-wrap: wrap; margin-bottom: clamp(26px, 3.4vw, 56px); }
.hero-id { font-size: 17px; font-weight: 600; letter-spacing: -.02em; }
.hero-id span { font-weight: 400; color: var(--ink-2); margin-left: 10px; }
.status { display: inline-flex; align-items: center; gap: 10px; min-height: 36px; padding: 0 16px 0 13px; border-radius: 100px; border: 1px solid var(--line); font-size: 14px; color: var(--ink-2); }
.status i { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 0 var(--accent); animation: ping 2.6s ease-out infinite; }
@keyframes ping { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 55%, transparent); } 70%, 100% { box-shadow: 0 0 0 9px transparent; } }

.hero-statement { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 28px 48px; }
.display .ln { display: block; overflow: hidden; padding-bottom: .09em; margin-bottom: -.09em; }
.display .ln > span { display: block; }
.hero-side { display: flex; flex-direction: column; gap: 22px; max-width: 34ch; padding-bottom: 8px; }
.hero-side p { color: var(--ink-2); font-size: 17px; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 10px; }

/* The three surfaces: shelf, screen, inbox. */
.surfaces { display: grid; grid-template-columns: 1fr 1.72fr .62fr; gap: clamp(12px, 1.5vw, 24px); margin-top: clamp(34px, 4.4vw, 76px); align-items: stretch; }
.surface { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.frame { position: relative; display: block; flex: none; width: 100%; height: clamp(280px, 31vw, 520px); border-radius: var(--r-frame); background: var(--bg-2); border: 1px solid var(--line); overflow: hidden; transition: transform .8s var(--ease), border-color .4s; }
.frame.trace::before { opacity: 0; transition: opacity .4s; animation-play-state: paused; z-index: 3; }
.frame-shot { position: absolute; inset: 0; overflow: hidden; display: block; }
.frame-shot img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.frame-shot img.is-tall { height: auto; object-fit: fill; }
.frame-browser .frame-shot { top: 38px; }
.chrome { position: absolute; inset: 0 0 auto 0; height: 38px; display: flex; align-items: center; gap: 7px; padding: 0 14px; background: var(--bg-3); border-bottom: 1px solid var(--line); z-index: 2; }
.chrome i { width: 9px; height: 9px; border-radius: 50%; background: var(--line-2); }
.chrome b { margin-left: 10px; flex: 1; max-width: 300px; height: 22px; border-radius: 100px; background: color-mix(in srgb, var(--bg) 55%, transparent); font-size: 12px; font-weight: 400; color: var(--ink-3); display: flex; align-items: center; padding: 0 12px; white-space: nowrap; overflow: hidden; }
.frame-phone { border-radius: 26px; border-width: 6px; border-color: var(--bg-3); }
.frame-phone::after { content: ''; position: absolute; top: 9px; left: 50%; width: 30%; max-width: 76px; height: 16px; border-radius: 100px; background: #0c1f1b; transform: translateX(-50%); z-index: 2; }
.surface-cap { display: flex; flex-direction: column; gap: 2px; font-size: 15px; line-height: 1.4; }
.surface-cap b { font-weight: 600; }
.surface-cap span { color: var(--ink-3); }
@media (hover: hover) {
  .surface:hover .frame { transform: translateY(-6px); border-color: transparent; }
  .surface:hover .frame-phone { border-color: var(--bg-3); }
  .surface:hover .frame.trace::before { opacity: 1; animation-play-state: running; }
}

/* Long page captures travel slowly inside their frame. */
[data-pan='auto'] img.is-tall { animation: pan var(--pan-t, 30s) ease-in-out 1.8s infinite alternate; }
@keyframes pan { from { transform: translateY(0); } to { transform: translateY(var(--pan, 0px)); } }
[data-pan='hover'] img.is-tall { transition: transform 1.2s var(--ease); }
@media (hover: hover) {
  .card:hover [data-pan='hover'] img.is-tall, .mini:hover [data-pan='hover'] img.is-tall { transform: translateY(var(--pan, 0px)); transition: transform var(--pan-t, 6s) linear; }
}
.bg-paused [data-pan='auto'] img.is-tall, .tab-hidden [data-pan='auto'] img.is-tall { animation-play-state: paused; }

.facts { display: grid; grid-template-columns: repeat(4, 1fr); margin-top: clamp(34px, 4vw, 64px); border-top: 1px solid var(--line); }
.facts div { padding: 20px 20px 0 0; }
.facts div + div { padding-left: 20px; border-left: 1px solid var(--line); }
.facts dt { font-size: 14px; color: var(--ink-3); }
.facts dd { font-size: clamp(17px, 1.35vw, 21px); font-weight: 500; letter-spacing: -.02em; margin-top: 2px; }

/* One load sequence: statement rises, frames settle, facts follow. */
.js .hero .ln > span { transform: translateY(108%); }
.js .hero .surface, .js .hero .hero-side, .js .hero .facts, .js .hero .hero-head { opacity: 0; transform: translateY(18px); }
.js .is-loaded .hero .ln > span { transform: none; transition: transform 1.25s var(--ease) calc(var(--i, 0) * .09s); }
.js .is-loaded .hero .surface, .js .is-loaded .hero .hero-side, .js .is-loaded .hero .facts, .js .is-loaded .hero .hero-head { opacity: 1; transform: none; transition: opacity 1s ease calc(var(--i, 0) * .1s), transform 1.3s var(--ease) calc(var(--i, 0) * .1s); }

/* ─── CLIENT STRIP ────────────────────────────────────────── */
.clients { padding-block: clamp(26px, 2.6vw, 40px); background: var(--bg); border-block: 1px solid var(--line); }
.clients-inner { display: flex; align-items: center; gap: clamp(20px, 3vw, 50px); }
.clients-label { flex-shrink: 0; font-size: 14px; color: var(--ink-3); max-width: 12ch; line-height: 1.35; }
.marquee { flex: 1; min-width: 0; 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-track { display: flex; width: max-content; }
.marquee-group { display: flex; align-items: center; flex-shrink: 0; }
.is-ready .marquee-track { animation: slide 48s linear infinite; }
.marquee:hover .marquee-track, .marquee:focus-within .marquee-track, .bg-paused .marquee-track, .tab-hidden .marquee-track { animation-play-state: paused; }
@keyframes slide { to { transform: translateX(-50%); } }
.client { display: grid; place-items: center; width: clamp(130px, 12vw, 190px); height: 56px; padding: 0 22px; }
.client img { max-width: 100%; max-height: 34px; width: auto; height: auto; object-fit: contain; filter: var(--logo-filter); opacity: .62; transition: opacity .3s, transform .5s var(--ease); }
/* Logos supplied on a white box are blended into the strip instead. */
.client img.is-flat { filter: var(--logo-flat); mix-blend-mode: var(--logo-blend); }
.client:hover img, .client:focus-visible img { opacity: 1; transform: translateY(-2px); }

/* ─── STORY ───────────────────────────────────────────────── */
.story-intro { display: grid; grid-template-columns: 1.25fr 1fr; gap: 32px 8%; align-items: end; }
.story-intro .rule { grid-column: 1 / -1; margin-bottom: clamp(20px, 3vw, 44px); }

.chapter { padding-block: clamp(64px, 8vw, 132px); }
.chapter-grid { display: grid; grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr); gap: 40px 7%; align-items: start; }
.chapter.is-flipped .chapter-grid { grid-template-columns: minmax(0, 1.18fr) minmax(0, .82fr); }
.chapter.is-flipped .chapter-copy { order: 2; }
.chapter-copy { position: sticky; top: 110px; display: flex; flex-direction: column; align-items: flex-start; gap: 22px; }
.step { display: inline-flex; align-items: center; gap: 12px; font-size: 15px; color: var(--ink-2); }
.step b { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; border: 1px solid var(--line-2); font-size: 13px; font-weight: 500; font-variant-numeric: tabular-nums; }
.chapter-copy .body { max-width: 42ch; }
.chapter-links { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 22px; margin-top: 6px; }
.link { position: relative; font-size: 16px; padding: 6px 0; color: var(--ink-2); }
.link::after { content: ''; position: absolute; left: 0; right: 0; bottom: 2px; height: 1px; background: currentColor; transform-origin: left; transition: transform .5s var(--ease); }
.link:hover { color: var(--ink); }
.link:hover::after { animation: redraw .7s var(--ease); }
@keyframes redraw { 0% { transform: scaleX(1); transform-origin: right; } 49% { transform: scaleX(0); transform-origin: right; } 50% { transform: scaleX(0); transform-origin: left; } 100% { transform: scaleX(1); transform-origin: left; } }

.chapter-art { display: flex; flex-direction: column; gap: clamp(14px, 1.4vw, 22px); min-width: 0; }
.chapter-art .frame { height: clamp(300px, 36vw, 600px); flex: none; }
.feature { display: block; width: 100%; }
.feature-cap { display: flex; justify-content: space-between; gap: 16px; margin-top: 12px; font-size: 15px; }
.feature-cap span { color: var(--ink-3); }
.minis { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(10px, 1vw, 16px); }
.mini { display: block; min-width: 0; }
.mini-shot { position: relative; display: block; aspect-ratio: 4 / 3; overflow: hidden; border-radius: 8px; background: var(--bg-2); border: 1px solid var(--line); }
.mini-shot img { width: 100%; height: 100%; object-fit: cover; object-position: top; transition: transform .9s var(--ease); }
.mini-shot img.is-tall { height: auto; object-fit: fill; }
.mini b { display: block; margin-top: 8px; font-size: 14px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (hover: hover) { .mini:hover .mini-shot img:not(.is-tall) { transform: scale(1.05); } }
.phones { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(12px, 1.6vw, 26px); align-items: start; }
.phones .surface:nth-child(2) { margin-top: clamp(24px, 3.5vw, 60px); }
.phones .frame { height: clamp(320px, 38vw, 620px); }

/* ─── PROJECT INDEX ───────────────────────────────────────── */
.index-head { display: grid; grid-template-columns: 1fr auto; gap: 24px 40px; align-items: end; margin-bottom: clamp(28px, 3vw, 48px); }
.index-head .rule { grid-column: 1 / -1; margin-bottom: clamp(20px, 3vw, 44px); }
.filters { display: flex; flex-wrap: wrap; gap: 8px; }
.filter { min-height: 42px; padding: 0 16px; border-radius: 100px; border: 1px solid var(--line-2); font-size: 15px; display: inline-flex; align-items: center; gap: 8px; transition: background-color .3s, color .3s, border-color .3s; }
.filter sup { font-size: 11px; opacity: .65; font-variant-numeric: tabular-nums; position: static; }
.filter:hover { border-color: var(--ink); }
.filter[aria-pressed='true'] { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(28px, 3vw, 48px) clamp(14px, 1.6vw, 26px); }
.card { display: block; min-width: 0; }
.card-shot { position: relative; display: block; aspect-ratio: 4 / 3; overflow: hidden; border-radius: var(--r-card); background: var(--bg-2); border: 1px solid var(--line); }
.card-shot img { width: 100%; height: 100%; object-fit: cover; object-position: top; transition: transform .9s var(--ease); }
.card-shot img.is-tall { height: auto; object-fit: fill; }
.card-open { position: absolute; right: 10px; bottom: 10px; width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; background: var(--ink); color: var(--bg); transform: scale(0); transition: transform .5s var(--ease); z-index: 2; }
.card-open svg { width: 16px; height: 16px; }
.card-text { display: block; margin-top: 12px; }
.card-text b { display: block; font-size: 17px; font-weight: 600; letter-spacing: -.02em; }
.card-text span { display: block; font-size: 14px; color: var(--ink-3); line-height: 1.4; margin-top: 2px; }
@media (hover: hover) {
  .card:hover .card-open, .card:focus-visible .card-open { transform: none; }
  .card:hover .card-shot img:not(.is-tall) { transform: scale(1.05); }
}
.grid.is-swapping .card { animation: card-in .6s var(--ease) backwards; animation-delay: calc(var(--i, 0) * 28ms); }
@keyframes card-in { from { opacity: 0; transform: translateY(14px); } }
.media-missing { display: grid; place-items: center; width: 100%; height: 100%; min-height: 90px; padding: 14px; font-size: 13px; color: var(--ink-3); text-align: center; }

/* ─── ABOUT ───────────────────────────────────────────────── */
.about-grid { display: grid; grid-template-columns: minmax(0, .72fr) minmax(0, 1.28fr); gap: 40px 8%; align-items: start; }
.portrait { position: relative; overflow: hidden; border-radius: var(--r-frame); aspect-ratio: 4 / 5; background: var(--bg-2); }
.portrait img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; transition: transform 1.4s var(--ease); }
.portrait:hover img { transform: scale(1.03); }
.about-person figcaption { display: flex; justify-content: space-between; gap: 16px; margin-top: 14px; font-size: 15px; }
.about-person figcaption span:last-child { color: var(--ink-3); }
.about-copy { display: flex; flex-direction: column; gap: 22px; }
.about-copy .h-lg { margin-bottom: 8px; }
.about-copy strong { color: var(--ink); font-weight: 600; }

.path { --p: 0; position: relative; display: grid; grid-template-columns: repeat(4, 1fr); gap: 0 clamp(16px, 2.4vw, 40px); margin-top: clamp(56px, 6vw, 100px); padding-top: 34px; }
.path::before, .path::after { content: ''; position: absolute; left: 0; right: 0; top: 6px; height: 1px; background: var(--line-2); }
.path::after { background: var(--accent); transform: scaleX(var(--p)); transform-origin: left; height: 2px; top: 5.5px; }
.path li { position: relative; }
.path li::before { content: ''; position: absolute; top: -34px; left: 0; width: 13px; height: 13px; border-radius: 50%; background: var(--bg); border: 1px solid var(--line-2); z-index: 1; transition: background-color .5s, border-color .5s, box-shadow .5s; }
.path li.is-on::before { background: var(--accent); border-color: var(--accent); box-shadow: 0 0 0 6px color-mix(in srgb, var(--accent) 18%, transparent); }
.path li:last-child.is-on::before { background: var(--clay); border-color: var(--clay); box-shadow: 0 0 0 6px color-mix(in srgb, var(--clay) 22%, transparent); }
.path span { display: block; font-size: 14px; color: var(--ink-3); }
.path b { display: block; font-size: clamp(18px, 1.5vw, 23px); font-weight: 600; letter-spacing: -.025em; margin: 2px 0 8px; }
.path p { font-size: 15px; color: var(--ink-2); max-width: 30ch; line-height: 1.5; }

.stats { display: grid; grid-template-columns: repeat(4, 1fr); margin-top: clamp(48px, 5vw, 84px); border-top: 1px solid var(--line); }
.stats div { padding: 22px 20px 0 0; }
.stats div + div { padding-left: 20px; border-left: 1px solid var(--line); }
.stats dt { font-size: clamp(44px, 5vw, 84px); font-weight: 600; letter-spacing: -.05em; line-height: 1; font-variant-numeric: tabular-nums; }
.stats dd { font-size: 15px; color: var(--ink-2); margin-top: 8px; max-width: 22ch; line-height: 1.45; }

/* ─── HOW I HELP ──────────────────────────────────────────── */
.help-grid { display: grid; grid-template-columns: minmax(0, .72fr) minmax(0, 1.28fr); gap: 40px 8%; align-items: start; }
.help-head { position: sticky; top: 110px; display: flex; flex-direction: column; gap: 20px; }
.stage { border-top: 1px solid var(--line-2); }
.stage:last-child { border-bottom: 1px solid var(--line-2); }
.stage summary { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: clamp(18px, 1.8vw, 28px) 0; cursor: pointer; list-style: none; font-size: clamp(21px, 2vw, 32px); font-weight: 600; letter-spacing: -.03em; transition: padding .5s var(--ease), color .3s; }
.stage summary::-webkit-details-marker { display: none; }
.stage summary svg { width: 22px; height: 22px; flex-shrink: 0; transition: transform .5s var(--ease); }
.stage[open] summary svg { transform: rotate(45deg); }
@media (hover: hover) { .stage summary:hover { padding-left: 12px; color: var(--accent); } }
.stage-body { display: grid; grid-template-columns: 1.2fr 1fr; gap: 20px 40px; padding: 2px 0 clamp(24px, 2.4vw, 38px); }
.stage[open] .stage-body { animation: open .5s var(--ease); }
@keyframes open { from { opacity: 0; transform: translateY(-6px); } }
.stage-body p { color: var(--ink-2); max-width: 46ch; }
.stage-body p b { display: block; color: var(--ink); font-weight: 600; margin-bottom: 6px; }
.stage-body ul { font-size: 15px; color: var(--ink-2); display: flex; flex-direction: column; gap: 6px; }
.stage-body li { padding-left: 16px; position: relative; }
.stage-body li::before { content: ''; position: absolute; left: 0; top: .72em; width: 7px; height: 1px; background: var(--accent); }

.tools { margin-top: clamp(56px, 6vw, 100px); padding-top: 24px; border-top: 1px solid var(--line); display: grid; grid-template-columns: minmax(0, .72fr) minmax(0, 1.28fr); gap: 20px 8%; }
.tools ul { display: flex; flex-wrap: wrap; gap: 8px; }
.tools li { display: inline-flex; align-items: center; gap: 9px; min-height: 38px; padding: 0 14px; border-radius: 100px; border: 1px solid var(--line); font-size: 14px; color: var(--ink-2); }
.tools img { width: 15px; height: 15px; object-fit: contain; filter: var(--logo-filter); opacity: .75; }

/* ─── CONTACT ─────────────────────────────────────────────── */
.contact { overflow: hidden; padding-bottom: clamp(60px, 6vw, 100px); }
.contact-grid { display: grid; grid-template-columns: 1.3fr 1fr; gap: 36px 8%; align-items: end; }
.contact-side { display: flex; flex-direction: column; gap: 18px; }
.mail { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-top: clamp(40px, 5vw, 80px); padding: clamp(20px, 2.4vw, 38px) clamp(22px, 2.8vw, 46px); border-radius: clamp(18px, 2vw, 30px); border: 1px solid var(--line-2); font-size: clamp(22px, 4.6vw, 78px); font-weight: 600; letter-spacing: -.045em; line-height: 1.1; overflow: hidden; transition: color .4s, border-color .4s; }
.mail::after { content: ''; position: absolute; inset: 0; background: var(--accent); border-radius: inherit; transform: translateY(101%); transition: transform .7s var(--ease); z-index: -1; }
.mail { isolation: isolate; }
.mail span { overflow-wrap: anywhere; }
.mail .arrow { width: .72em; height: .72em; flex-shrink: 0; transition: transform .7s var(--ease); }
@media (hover: hover) {
  .mail:hover { color: var(--on-accent); border-color: var(--accent); }
  .mail:hover::after { transform: none; }
  .mail:hover .arrow { transform: translateX(.14em); }
}
.contact-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 30px; margin-top: 22px; }
.contact-row div { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 24px; }
.copy { min-height: 42px; padding: 0 16px; border-radius: 100px; border: 1px solid var(--line-2); font-size: 15px; transition: border-color .3s, background-color .3s, color .3s; }
.copy:hover { border-color: var(--ink); }
.copy.is-done { background: var(--accent); color: var(--on-accent); border-color: var(--accent); }
.clock { font-size: 15px; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.clock b { color: var(--ink); font-weight: 600; }

.footer { padding: 26px 0 34px; border-top: 1px solid var(--line); background: var(--bg); }
.footer-inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 30px; font-size: 14px; color: var(--ink-3); }
.footer-inner nav { display: flex; gap: 22px; }
.footer-inner a:hover, .footer-inner button:hover { color: var(--ink); }
.bg-toggle { text-decoration: underline; text-underline-offset: 4px; }

/* ─── CASE STUDY DIALOG ───────────────────────────────────── */
.modal { position: fixed; inset: 0; z-index: 1300; visibility: hidden; opacity: 0; transition: opacity .45s ease, visibility 0s .45s; }
.modal.is-open { visibility: visible; opacity: 1; transition: opacity .45s ease; }
.modal-backdrop { position: absolute; inset: 0; background: color-mix(in srgb, var(--pine-deep) 78%, transparent); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.modal-sheet { position: absolute; inset: clamp(8px, 2.2vw, 30px); max-width: 1500px; margin-inline: auto; display: flex; flex-direction: column; background: var(--bg); color: var(--ink); border: 1px solid var(--line); border-radius: clamp(14px, 1.6vw, 22px); overflow: hidden; transform: translateY(30px) scale(.985); transition: transform .7s var(--ease); }
.modal.is-open .modal-sheet { transform: none; }
.modal-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 12px 10px clamp(18px, 2.4vw, 36px); border-bottom: 1px solid var(--line); flex-shrink: 0; }
.modal-bar p { font-size: 14px; color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.modal-bar div { display: flex; gap: 6px; flex-shrink: 0; }
.icon-btn { min-width: 42px; height: 42px; padding: 0 14px; border-radius: 100px; border: 1px solid var(--line); display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-size: 14px; transition: border-color .3s, background-color .3s, color .3s; }
.icon-btn svg { width: 16px; height: 16px; }
.icon-btn:hover { border-color: var(--ink); }
.icon-btn.is-close:hover { background: var(--ink); color: var(--bg); }
.modal-scroll { overflow-y: auto; overscroll-behavior: contain; padding: clamp(24px, 3.4vw, 56px) clamp(18px, 2.4vw, 36px) clamp(30px, 4vw, 60px); }
.cs-top { display: grid; grid-template-columns: 1.2fr 1fr; gap: 28px 8%; align-items: end; margin-bottom: clamp(28px, 3.4vw, 54px); }
.cs-top .lede { margin-top: 16px; }
.cs-meta { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 24px; }
.cs-meta dt { font-size: 13px; color: var(--ink-3); }
.cs-meta dd { font-size: 15px; font-weight: 500; line-height: 1.4; }
.cs-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 22px; }
.chip { display: inline-flex; align-items: center; min-height: 34px; padding: 0 14px; border-radius: 100px; border: 1px solid var(--line); font-size: 14px; color: var(--ink-2); }
.chip.is-soon { border-style: dashed; color: var(--ink-3); }
.cs-gallery { display: flex; flex-direction: column; gap: clamp(12px, 1.4vw, 22px); }
.cs-gallery img { width: 100%; height: auto; border-radius: 10px; border: 1px solid var(--line); background: var(--bg-2); }
.cs-gallery.is-columns { display: block; columns: 3 240px; column-gap: clamp(12px, 1.4vw, 22px); }
.cs-gallery.is-columns img { margin-bottom: clamp(12px, 1.4vw, 22px); break-inside: avoid; }
.cs-next { display: flex; align-items: center; justify-content: space-between; gap: 20px; width: 100%; margin-top: clamp(30px, 4vw, 60px); padding-top: 22px; border-top: 1px solid var(--line-2); }
.cs-next span { font-size: 14px; color: var(--ink-3); }
.cs-next b { display: block; font-size: clamp(26px, 3.2vw, 52px); font-weight: 600; letter-spacing: -.04em; line-height: 1.1; }
.cs-next svg { width: clamp(26px, 3vw, 46px); height: clamp(26px, 3vw, 46px); flex-shrink: 0; transition: transform .6s var(--ease); }
.cs-next:hover svg { transform: translateX(8px); }

/* Theme change wipes in from the toggle. */
::view-transition-old(root), ::view-transition-new(root) { animation: none; mix-blend-mode: normal; }
::view-transition-new(root) { animation: reveal .7s var(--ease); }
@keyframes reveal { from { clip-path: circle(0 at var(--tx, 50%) var(--ty, 0)); } to { clip-path: circle(150vmax at var(--tx, 50%) var(--ty, 0)); } }

/* ─── RESPONSIVE ──────────────────────────────────────────── */
@media (max-width: 1100px) {
  .grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .hero-statement { grid-template-columns: 1fr; }
  .hero-side { max-width: 52ch; flex-direction: row; align-items: center; justify-content: space-between; gap: 20px 40px; flex-wrap: wrap; max-width: none; }
  .hero-side p { max-width: 40ch; }
}
@media (max-width: 820px) {
  body { font-size: 16px; }
  .nav-inner { gap: 14px; padding-left: 18px; }
  .nav-links a { font-size: 14px; }
  .surfaces { grid-template-columns: 1.5fr 1fr; }
  .surface-screen { grid-column: 1 / -1; grid-row: 1; }
  .surfaces .frame { height: clamp(230px, 56vw, 420px); }
  .facts, .stats { grid-template-columns: 1fr 1fr; }
  .facts div:nth-child(3), .stats div:nth-child(3) { padding-left: 0; border-left: 0; }
  .facts div:nth-child(n+3), .stats div:nth-child(n+3) { margin-top: 20px; border-top: 1px solid var(--line); }
  .story-intro, .chapter-grid, .chapter.is-flipped .chapter-grid, .about-grid, .help-grid, .tools, .contact-grid, .cs-top, .index-head { grid-template-columns: 1fr; }
  .chapter.is-flipped .chapter-copy { order: 0; }
  .chapter-copy, .help-head { position: static; }
  .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .about-person { max-width: 420px; }
  .path { grid-template-columns: 1fr; padding: 0 0 0 34px; gap: 28px; }
  .path::before, .path::after { left: 6px; right: auto; top: 6px; bottom: 6px; width: 1px; height: auto; }
  .path::after { width: 2px; left: 5.5px; transform: scaleY(var(--p)); transform-origin: top; }
  .path li::before { top: 5px; left: -34px; }
  .stage-body { grid-template-columns: 1fr; }
  .clients-label { display: none; }
}
@media (max-width: 520px) {
  .nav-links a[data-optional] { display: none; }
  .hero-id span { display: block; margin: 2px 0 0; }
  .display { font-size: clamp(40px, 12.4vw, 60px); }
  .hero-actions .btn { flex: 1; justify-content: center; }
  .minis { grid-template-columns: repeat(2, 1fr); }
  .card-text b { font-size: 15px; }
  .card-text span { font-size: 13px; }
  .filter { min-height: 40px; padding: 0 13px; font-size: 14px; }
  .mail { padding: 18px 20px; font-size: clamp(19px, 6.1vw, 30px); }
  .cs-meta { grid-template-columns: 1fr; }
  .icon-btn span { display: none; }
  .frame-phone { border-radius: 18px; border-width: 4px; }
  .frame-phone::after { height: 10px; top: 6px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
  .js .hero .ln > span, .js .hero .surface, .js .hero .hero-side, .js .hero .facts, .js .hero .hero-head { opacity: 1; transform: none; }
  .rule { transform: none; }
  .marquee { overflow-x: auto; }
  .marquee-group[aria-hidden] { display: none; }
}