/* =========================================================
   Damodar Nagina — Fusion
   Visual language: bordered 4-column grid, Geist + Geist Mono, black/white + sea-blue accent
   ========================================================= */
@font-face { font-family: "Geist"; src: url("../fonts/geist-300.woff2") format("woff2"); font-weight: 300; font-display: swap; }
@font-face { font-family: "Geist"; src: url("../fonts/geist-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Geist"; src: url("../fonts/geist-500.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Geist"; src: url("../fonts/geist-700.woff2") format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Geist Mono"; src: url("../fonts/geist-mono-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Geist Mono"; src: url("../fonts/geist-mono-500.woff2") format("woff2"); font-weight: 500; font-display: swap; }

:root {
  --ink: #000;
  --paper: #fff;
  --accent: #3bb4d0;
  --line: #ececec;
  --muted: #555;
  --soft: #f6f6f6;
  --accent-deep: #15768d; /* accent as text/icons: 5.2:1 on paper, 4.8:1 on tint */
  --accent-fill: #1e8aa6; /* accent as a fill under white text (large text only): 4.0:1 */
  --tint: color-mix(in srgb, var(--accent) 11%, #fff); /* soft sea-blue surface: used instead of big black fills */
  --on-accent: #000;  /* text/icons on --accent (8.6:1 in both themes) */
  --on-fill: #fff;    /* text on --accent-fill */
  --text-1: #222; --text-2: #333; --text-3: #444; /* body greys, darkest to lightest */
  --struck: #6b6b6b;  /* crossed-out "before" items: still 4.9:1 on soft */
  --placeholder: #767676;
  --faint: #bbb;      /* disabled controls only */
  --rule: #d6d6d6; --rule-2: #e6e6e6; /* lines inside illustrations */
  --warn: #b0452e; --error: #b0003a;
  --shade: rgba(0, 0, 0, .1); --shade-2: rgba(0, 0, 0, .18); /* offset text/card shadows */
  --logo-filter: grayscale(1) contrast(1.1); --logo-filter-hover: none; --logo-blend: multiply;
  --logo-light: block; --logo-dark: none; /* which logo file shows: greyscale original vs colour cut-out */
  --mark-shadow: var(--ink); /* offset block behind the hero highlight */
  --border: #b9bec3;    /* soft grey card/box borders; stays stronger than --line hairlines */
  --border-ui: #7d848a; /* form field outlines: 3.8:1 */
  --accent-type: #2496b1; /* accent for big display words: 3.5:1 on paper, 3.1:1 on tint (AA large); plain accent is 2.4:1 */
  color-scheme: light;

  --gutter: 48px;
  --wrap: min(1344px, calc(100vw - var(--gutter) * 2));
  --col: calc(var(--wrap) / 4);
  --hdr-top: 53px;
  --hdr-h: 90px;
  --sec: clamp(168px, 18vw, 280px);        /* space between sections: generous so the page breathes */
  --sec-tight: clamp(112px, 10vw, 160px);  /* sections that belong to the one before */
  --ease: cubic-bezier(.2, .7, .2, 1);
  --lift: cubic-bezier(.3,1.4,.5,1);

  --fs-display: clamp(40px, 5.85vw, 84px);
  --fs-h2: clamp(34px, 3.9vw, 56px);
  --fs-h3: clamp(22px, 2.2vw, 32px);
  --fs-lede: clamp(18px, 1.7vw, 24px);
  --fs-body: clamp(16px, 1.25vw, 18px);
}

/* ---------- dark theme ----------
   html[data-theme] is set before paint by a tiny script in <head> (saved choice, else the system setting).
   Without JS the system setting still applies through the media query. Every text pair is AA (4.5:1+). */
:root[data-theme="dark"] {
  --ink: #ececec; --paper: #111315; --line: #2a2e33; --muted: #a3a8ad; --soft: #16181b;
  --accent: #ff9f68; --accent-deep: #ffb184; --accent-fill: #b8582a; /* dark accent: pastel orange (light stays teal) */
  --tint: color-mix(in srgb, var(--accent) 14%, #111315);
  --text-1: #dedede; --text-2: #cdcdcd; --text-3: #bdbdbd; --struck: #8a8f94; --placeholder: #8d9298; --faint: #4f555b;
  --rule: #3a3f44; --rule-2: #32363b; --warn: #ff9478; --error: #ff7a96;
  --shade: rgba(255, 255, 255, .07); --shade-2: rgba(0, 0, 0, .5);
  --logo-filter: none; --logo-filter-hover: none; --logo-blend: normal; --logo-light: none; --logo-dark: block;
  --mark-shadow: var(--accent); --accent-type: var(--accent);
  --border: #3a4047;    /* dim, so the content carries the page instead of the grid */
  /* hover surfaces: the 'lit panel' look (dark base, dot grid, cyan glow from below); glow capped at 28% so muted text stays 4.6:1.
     --lit-accent replaces flat cyan fills and keeps black text/icons at 6.8:1+ */
  --lit: radial-gradient(70% 90% at 50% 120%, color-mix(in srgb, var(--accent) 28%, transparent), transparent 72%), radial-gradient(color-mix(in srgb, var(--ink) 11%, transparent) 1px, transparent 1.2px) 0 0 / 14px 14px, #111315; --lit-accent: linear-gradient(150deg, #ffc29a 0%, #ff9f68 45%, #f5844a 100%);
  --border-ui: #6e7780; /* form field outlines: 3:1+ */
  color-scheme: dark;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    --ink: #ececec; --paper: #111315; --line: #2a2e33; --muted: #a3a8ad; --soft: #16181b;
    --accent: #ff9f68; --accent-deep: #ffb184; --accent-fill: #b8582a; /* dark accent: pastel orange (light stays teal) */
    --tint: color-mix(in srgb, var(--accent) 14%, #111315);
    --text-1: #dedede; --text-2: #cdcdcd; --text-3: #bdbdbd; --struck: #8a8f94; --placeholder: #8d9298; --faint: #4f555b;
    --rule: #3a3f44; --rule-2: #32363b; --warn: #ff9478; --error: #ff7a96;
    --shade: rgba(255, 255, 255, .07); --shade-2: rgba(0, 0, 0, .5);
    --logo-filter: none; --logo-filter-hover: none; --logo-blend: normal; --logo-light: none; --logo-dark: block;
    --mark-shadow: var(--accent); --accent-type: var(--accent);
    --border: #3a4047; --border-ui: #6e7780;
    --lit: radial-gradient(70% 90% at 50% 120%, color-mix(in srgb, var(--accent) 28%, transparent), transparent 72%), radial-gradient(color-mix(in srgb, var(--ink) 11%, transparent) 1px, transparent 1.2px) 0 0 / 14px 14px, #111315; --lit-accent: linear-gradient(150deg, #ffc29a 0%, #ff9f68 45%, #f5844a 100%);
    color-scheme: dark;
  }
}

/* Large displays: the layout is designed at 1440px. Above 1600px the page is scaled up with zoom
   so it keeps its proportions. --z is set by a small script in <head> (fits width AND height). */
html { zoom: var(--z, 1); }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: "Geist Mono", ui-monospace, "SF Mono", Menlo, monospace;
  font-size: var(--fs-body);
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, h4, p, ul, ol, dl, dd, figure, blockquote { margin: 0; }
ul, ol { padding: 0; list-style: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
::selection { background: var(--accent); color: var(--on-accent); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.skip { position: absolute; left: 16px; top: -60px; z-index: 100; background: var(--ink); color: var(--paper); padding: 12px 16px; }
.skip:focus { top: 16px; }

/* ---------- layout primitives ---------- */
.wrap { width: var(--wrap); margin-inline: auto; position: relative; }
.grid4 { display: grid; grid-template-columns: repeat(4, 1fr); }
.grid2 { display: grid; grid-template-columns: repeat(2, 1fr); }
.c1 { grid-column: 1; } .c2 { grid-column: 2; } .c3 { grid-column: 3; } .c4 { grid-column: 4; }
.c1-2 { grid-column: 1 / 3; } .c3-4 { grid-column: 3 / 5; } .c2-4 { grid-column: 2 / 5; } .c1-3 { grid-column: 1 / 4; }

.box { border: 1px solid var(--border); background: var(--paper); }
.attach { margin-top: -1px; }
.joined { border-top: 1px solid var(--border); border-left: 1px solid var(--border); background: var(--paper); }
.joined > * { border-right: 1px solid var(--border); border-bottom: 1px solid var(--border); }

main, .site-footer, .site-header { position: relative; z-index: 1; }
.section { margin-top: var(--sec); }
.section-tight { margin-top: var(--sec-tight); }

/* ---------- type ---------- */
.display {
  font-size: var(--fs-display);
  font-weight: 700;
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: -0.01em;
  text-shadow: -6px 6px 0 var(--shade);
}
.accent { color: var(--accent-type); }
h2 { font-size: var(--fs-h2); font-weight: 500; line-height: 1.12; text-transform: uppercase; }
h3 { font-size: var(--fs-h3); font-weight: 400; line-height: 1.2; }
.lede { font-size: var(--fs-lede); line-height: 1.4; max-width: 30ch; }
.eyebrow { font-size: 14px; font-weight: 500; letter-spacing: .04em; text-transform: uppercase; }

/* ---------- buttons ----------
   The visible box is .btn-face. On hover it lifts up-right off a pink base,
   an arrow slides in before the label and the label turns bold. */
.btn {
  position: relative; display: block; height: var(--hdr-h);
  background: transparent; cursor: pointer;
  font-size: clamp(14px, 1.15vw, 17px); font-weight: 500; text-transform: uppercase; letter-spacing: .01em;
  transition: background-color .35s var(--ease);
}
.btn-face {
  position: absolute; inset: 0;
  display: flex; align-items: center; gap: 0; padding: 0 32px;
  border: 1px solid var(--border); background: var(--paper); color: var(--ink);
  transition: transform .45s var(--lift), gap .45s var(--ease);
}
.btn:hover, .btn:focus-visible { z-index: 2; }
.btn-face > span { flex: 1; white-space: nowrap; transition: font-weight .2s; }
.btn .ico { width: 24px; height: 24px; flex: none; }
.btn-lead { width: 0 !important; opacity: 0; transform: translateX(-10px); transition: width .45s var(--ease), opacity .3s, transform .45s var(--ease); }
.btn:hover, .btn:focus-visible { background: var(--accent); }
.btn:hover .btn-face, .btn:focus-visible .btn-face { transform: translate(10px, -10px); gap: 14px; }
.btn:hover .btn-lead, .btn:focus-visible .btn-lead { width: 24px !important; opacity: 1; transform: none; }
.btn:hover .btn-face > span, .btn:focus-visible .btn-face > span { font-weight: 700; }
.btn:active .btn-face { transform: translate(4px, -4px); }
.btn-light .btn-face { border-color: var(--paper); }
.btn-dark .btn-face { background: var(--accent); color: var(--on-accent); }
.btn-dark:hover, .btn-dark:focus-visible { background: var(--ink); }
/* social buttons: lift off a black base, no lead arrow */
.btn-soc { height: 74px; font-size: 15px; }
.btn-soc .btn-face { padding: 0 24px; }
.btn-soc .btn-lead { display: none; }
.btn-soc:hover, .btn-soc:focus-visible { background: var(--accent); }
.btn-soc:hover .btn-face > span, .btn-soc:focus-visible .btn-face > span { font-weight: 500; }
@media (hover: none) { .menu-btn:hover .menu-face, .card:hover .card-img { transform: none; } .card:hover .card-media, .card:hover .card-title { background: transparent; } .card:hover .card-title { background: var(--paper); color: var(--ink); } .card:hover .card-title p { color: var(--muted); } .btn:hover { background: transparent; } .btn:hover .btn-face { transform: none; gap: 0; } .btn:hover .btn-lead { width: 0 !important; opacity: 0; } .btn:hover .btn-face > span { font-weight: 500; } }
.tab { margin-top: -1px; }

.icon-tab {
  display: grid; place-items: center;
  width: var(--hdr-h); height: var(--hdr-h);
  border: 1px solid var(--border); border-bottom: 0; background: var(--paper);
}
.icon-tab .ico { width: 30px; height: 30px; }
.tab-bottom { align-self: end; }

.sq {
  display: grid; place-items: center; width: var(--hdr-h); height: var(--hdr-h);
  border: 1px solid var(--border); background: var(--paper);
  transition: background-color .3s var(--ease), color .3s var(--ease);
}
.sq .ico { width: 28px; height: 28px; }
.sq:hover:not(:disabled) { background: var(--tint); }
.sq:disabled { color: var(--faint); cursor: default; }

/* ---------- header + menu ---------- */
.site-header {
  display: grid; grid-template-columns: repeat(4, 1fr);
  margin-top: var(--hdr-top); height: var(--hdr-h);
}
.logo {
  grid-column: 1; display: grid; place-items: center; height: var(--hdr-h);
  background: var(--paper); color: var(--ink); border: 1px solid var(--border);
  font-size: clamp(18px, 1.9vw, 28px); font-weight: 500; text-transform: uppercase; letter-spacing: .01em; white-space: nowrap;
}
.hdr-cta { grid-column: 3; }
.logo-mark, .logo-role, .hdr-nav, .hdr-tick, .hdr-res, .hdr-prog, .ln-dot, .sel { display: none; }
.logo-txt { display: contents; }

/* ---------- header: editorial bar (html[data-hdr]; without it the original grid header shows) ---------- */

/* Sticky bar; the name folds into its initials as you scroll, Resume is a quiet link, menu is the one solid block, accent line = reading progress */
:root[data-hdr]{ --hdr-top: clamp(28px, 2.8vw, 40px); }
[data-hdr] .menu-dock{ --hdr-h: 72px; }
[data-hdr] .site-header, [data-hdr] .menu-dock { transition: transform .5s var(--ease); }
.hdr-hide[data-hdr] .site-header, .hdr-hide[data-hdr] .menu-dock { transform: translateY(calc(-100% - var(--hdr-top) - 6px)); }
[data-hdr] .site-header{
  --hdr-h: 72px; position: sticky; top: var(--hdr-top); z-index: 50;
  display: flex; align-items: center; gap: 0; padding: 0 28px;
  background: var(--paper); border: 1px solid var(--border); box-shadow: 0 calc(-1 * var(--hdr-top) - 1px) 0 0 var(--paper);
}
[data-hdr] .site-header > .hdr-cta{ display: none; }
[data-hdr] .logo{
  display: flex; align-items: center; height: auto; background: none; color: var(--ink); border: 0;
  font-size: clamp(19px, 1.6vw, 23px); font-weight: 600; text-transform: none; letter-spacing: -.03em;
}
.ln-a, .ln-b { display: inline-block; white-space: pre; }
[data-hdr] .ln-b{ max-width: 6em; overflow: hidden; vertical-align: bottom; transition: max-width .6s var(--ease), opacity .4s var(--ease); }
[data-hdr] .ln-dot{ display: inline; color: var(--accent); }
.scrolled[data-hdr] .ln-b{ max-width: 0; opacity: 0; }
[data-hdr] .hdr-tick{
  display: block; height: 1.4em; overflow: hidden; margin-left: 22px; padding-left: 22px; border-left: 1px solid var(--line);
  font: 500 12px/1.4 "Geist Mono", monospace; letter-spacing: .05em; text-transform: uppercase; color: var(--muted);
}
.hdr-tick-in { display: flex; flex-direction: column; animation: tick 9s var(--ease) infinite; }
@keyframes tick { 0%, 28% { transform: none; } 33%, 61% { transform: translateY(-1.4em); } 66%, 94% { transform: translateY(-2.8em); } 100% { transform: translateY(-4.2em); } }
/* nav: real buttons-sized targets (44px tall), Geist like the rest of the UI, tint on hover + rolling label */
[data-hdr] .hdr-nav{ display: flex; gap: 4px; margin-left: auto; }
[data-hdr] .hdr-nav a{
  position: relative; display: inline-flex; align-items: center; height: 44px; padding: 0 16px;
  font-family: "Geist", sans-serif; font-size: 16px; font-weight: 500; letter-spacing: -.01em; color: var(--text-2);
  transition: background-color .3s var(--ease), color .3s;
}
[data-hdr] .hdr-nav a::after{ content: ""; position: absolute; left: 16px; right: 16px; bottom: 8px; height: 2px; background: var(--accent); transform: scaleX(0); transform-origin: right; transition: transform .4s var(--ease); }
[data-hdr] .hdr-nav a:hover{ background: var(--tint); color: var(--ink); }
[data-hdr] .hdr-nav a:hover::after, [data-hdr] .hdr-nav a[aria-current="page"]::after{ transform: scaleX(1); transform-origin: left; }
[data-hdr] .hdr-nav a[aria-current="page"]{ color: var(--ink); }
[data-hdr] .hdr-res{
  display: inline-flex; align-items: center; gap: 8px; margin-left: 34px; padding-left: 34px; border-left: 1px solid var(--line);
  font-family: "Geist", sans-serif; font-size: 16px; font-weight: 600; letter-spacing: -.01em;
}
.hdr-res-tag { font: 500 10px "Geist Mono", monospace; letter-spacing: .06em; padding: 3px 5px 2px; border: 1px solid var(--border); transition: background-color .3s, border-color .3s; }
.hdr-res .ico { width: 18px; height: 18px; transition: transform .45s var(--lift); }
.hdr-res:hover .hdr-res-tag { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.hdr-res:hover .ico { transform: translate(3px, -3px); }
[data-hdr] .menu-btn{ background: var(--accent); }
[data-hdr] .menu-face{ background: var(--paper); color: var(--ink); box-shadow: inset 0 0 0 1px var(--border); }
[data-hdr] .hdr-prog{ display: block; position: absolute; left: -1px; bottom: -1px; height: 2px; width: calc(100% + 2px); background: var(--accent); transform: scaleX(var(--sp, 0)); transform-origin: left; }
/* theme toggle: moon in light, sun in dark; needs JS, so it stays hidden without it */
.theme-btn { display: none; }
.js[data-hdr] .theme-btn { display: grid; place-items: center; width: 44px; height: 44px; margin-left: 12px; flex: none; color: var(--ink); transition: background-color .3s var(--ease); }
.js[data-hdr] .theme-btn:hover { background: var(--tint); }
.theme-btn .ico { width: 20px; height: 20px; grid-area: 1 / 1; transition: opacity .3s, transform .5s var(--lift); }
.theme-btn .i-sun { opacity: 0; transform: rotate(-90deg) scale(.6); }
[data-theme="dark"] .theme-btn .i-sun { opacity: 1; transform: none; }
[data-theme="dark"] .theme-btn .i-moon { opacity: 0; transform: rotate(90deg) scale(.6); }
@media (max-width: 809px) { .js[data-hdr] .theme-btn { margin-left: auto; } [data-hdr] .site-header .hdr-res { margin-left: 4px; } }

/* Design-tool canvas: the name sits in a live selection frame */
[data-hdr] .hdr-tick { display: none; }
[data-hdr] .logo { position: relative; padding: 6px 10px; margin-left: -10px; }
[data-hdr] .sel { display: block; position: absolute; inset: 0; border: 1.5px solid var(--accent); pointer-events: none; }
[data-hdr] .sel i { position: absolute; width: 7px; height: 7px; background: var(--paper); border: 1.5px solid var(--accent); }
[data-hdr] .sel i:nth-child(1) { left: -4px; top: -4px; } [data-hdr] .sel i:nth-child(2) { right: -4px; top: -4px; }
[data-hdr] .sel i:nth-child(3) { left: -4px; bottom: -4px; } [data-hdr] .sel i:nth-child(4) { right: -4px; bottom: -4px; }

.menu-dock { position: fixed; top: var(--hdr-top); left: 0; right: 0; z-index: 60; pointer-events: none; }
.menu-dock .wrap { display: flex; justify-content: flex-end; }
.menu-btn {
  pointer-events: auto; position: relative;
  width: var(--hdr-h); height: var(--hdr-h);
  background: var(--ink);
}
.menu-face {
  position: absolute; inset: 0; display: grid; place-items: center;
  background: var(--accent); color: var(--on-accent);
  transition: transform .45s var(--lift);
}
.menu-btn:hover .menu-face, .menu-btn:focus-visible .menu-face { transform: translate(10px, -10px); }
.menu-btn .ico { width: 30px; height: 30px; grid-area: 1 / 1; transition: opacity .25s, transform .4s var(--ease); }
.menu-btn .i-close { opacity: 0; transform: rotate(-90deg); }
.menu-open .menu-btn .i-open { opacity: 0; transform: rotate(90deg); }
.menu-open .menu-btn .i-close { opacity: 1; transform: none; }

.menu { position: fixed; inset: 0; z-index: 55; background: var(--paper); overflow-y: auto; }
.menu[hidden] { display: none; }
.menu-inner { padding-top: var(--hdr-top); display: grid; grid-template-columns: repeat(4, 1fr); position: relative; z-index: 1; }
.menu .logo { grid-column: 1; }
.menu ul { grid-column: 1 / -1; border-top: 1px solid var(--border); margin-top: -1px; }
.menu li { opacity: 0; transform: translateY(-8px); animation: rowIn .45s var(--ease) forwards; animation-delay: calc(var(--i) * 50ms + 60ms); }
.menu li a {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  height: 64px; border: 1px solid var(--border); border-top: 0; background: var(--paper);
  font-size: 18px; font-weight: 500; text-transform: uppercase;
  transition: background-color .3s var(--ease), color .3s var(--ease);
}
.menu li a .ico { width: 18px; height: 18px; }
.menu-social { grid-column: 1 / -1; }
.menu-social .btn { margin-left: -1px; margin-top: -1px; }
.menu-social .btn:first-child { margin-left: 0; }
.menu li a:hover, .menu li a[aria-current="page"] { background: var(--tint); }
.menu-open { overflow: hidden; }

/* rolling text (menu + footer links) */
.roll { display: inline-block; height: 1.3em; overflow: hidden; vertical-align: top; line-height: 1.3; }
.roll-in { display: flex; flex-direction: column; transition: transform .5s var(--ease); }
.roll-in > span { display: block; height: 1.3em; white-space: nowrap; }
a:hover > .roll .roll-in, a:focus-visible > .roll .roll-in { transform: translateY(-50%); }
@keyframes rowIn { to { opacity: 1; transform: none; } }

/* ---------- hero ----------
   Asymmetric bento: meta strip / big left-aligned title + tall aside / lede + CTA. */
.hx {
  margin-top: -1px;
  display: grid; grid-template-columns: repeat(4, 1fr);
  grid-template-rows: 58px minmax(clamp(320px, 29vw, 430px), auto) minmax(clamp(150px, 12vw, 180px), auto);
  grid-template-areas: "m1 m2 m3 m4" "t t t a" "l l c a";
}
.hx > :nth-child(1) { grid-area: m1; } .hx > :nth-child(2) { grid-area: m2; }
.hx > :nth-child(3) { grid-area: m3; } .hx > :nth-child(4) { grid-area: m4; }
.hx-title { grid-area: t; } .hx-aside { grid-area: a; } .hx-lede { grid-area: l; } .hx-cta { grid-area: c; }

.hx-meta {
  display: flex; align-items: center; gap: 10px; padding: 0 24px;
  font-size: 13px; font-weight: 500; text-transform: uppercase; letter-spacing: .06em; white-space: nowrap; overflow: hidden;
}
.hx-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--accent); flex: none; box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 60%, transparent); animation: ping 2s ease-out infinite; }
@keyframes ping { 70% { box-shadow: 0 0 0 9px color-mix(in srgb, var(--accent) 0%, transparent); } 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 0%, transparent); } }
.hx-scroll { justify-content: flex-end; }
/* meta strip hovers: a quiet tint plus one small idea per cell */
.hx-meta { transition: background-color .35s var(--ease); }
.hx-meta:hover { background: var(--tint); }
.swap { display: inline-grid; overflow: hidden; vertical-align: top; }
.swap > * { grid-area: 1 / 1; transition: transform .5s var(--ease); }
.swap > :last-child { transform: translateY(110%); color: var(--accent-deep); }
.hx-meta:hover .swap > :first-child, .hx-meta:focus-visible .swap > :first-child { transform: translateY(-110%); }
.hx-meta:hover .swap > :last-child, .hx-meta:focus-visible .swap > :last-child { transform: none; }
.hx-status:hover .hx-dot { scale: 1.35; }
.hx-dot { transition: scale .4s var(--lift); }
.hx-tags .sep { display: inline-block; color: var(--accent-deep); transition: transform .6s var(--lift); }
.hx-tags:hover .sep { transform: rotate(45deg) scale(1.25); } /* × turns into + */
.hx-tags:hover .sep:last-child { transition-delay: .08s; }
.hx-scroll:hover .hx-down { animation-duration: .7s; color: var(--accent-deep); }
.hx-down { width: 18px; height: 18px; transform: rotate(180deg); animation: bob 1.8s var(--ease) infinite; }
@keyframes bob { 50% { transform: rotate(180deg) translateY(-4px); } }

.hx-title {
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: clamp(28px, 3.4vw, 48px);
  font-size: clamp(40px, 6.15vw, 92px); font-weight: 700; line-height: .98;
  text-transform: uppercase; letter-spacing: -.035em;
}
.hl { display: block; overflow: hidden; padding: .06em .2em .12em; margin: -.06em -.2em -.12em; }
.hl-in { display: inline-block; white-space: nowrap; }
.hl-arrow { width: .72em; height: .72em; stroke-width: 2.2; color: var(--accent); vertical-align: -.02em; margin-right: .2em; }
.mark { color: var(--on-fill); position: relative; z-index: 0; display: inline-block; padding: 0; margin-left: .16em; }
.mark::before {
  content: ""; position: absolute; z-index: -1; inset: -.03em 0 .02em;
  background: var(--accent-fill); box-shadow: -.07em .07em 0 var(--mark-shadow);
  transform-origin: left center; transition: transform .45s var(--lift);
}
.hx-title:hover .mark::before { transform: translate(.05em, -.05em); box-shadow: -.12em .12em 0 var(--mark-shadow); }
.js .hl-in { transform: translateY(110%); animation: lineUp 1.4s var(--ease) forwards; animation-delay: calc(var(--l) * 200ms + 300ms); }
.js .mark::before { transform: scaleX(0); animation: markIn 1s var(--ease) forwards; animation-delay: 1.3s; }
@keyframes lineUp { to { transform: none; } }
@keyframes markIn { to { transform: scaleX(1); } }
/* the text turns white exactly where the bar has wiped in: a half-white / half-black gradient clipped to the
   letters slides with the same duration, delay and easing as markIn */
.mark-t { display: inline-block; padding: 0 .12em; }
.js .mark-t {
  color: transparent; -webkit-background-clip: text; background-clip: text;
  background-image: linear-gradient(90deg, var(--on-fill) 50%, var(--ink) 50%); background-size: 200% 100%; background-position: 100% 0;
  animation: markTxt 1s var(--ease) 1.3s forwards;
}
@keyframes markTxt { to { background-position: 0 0; } }

.hx-aside { position: relative; overflow: hidden; background: var(--soft); }
.hx-aside img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hx-aside-big { background: var(--tint); color: var(--ink); display: flex; flex-direction: column; justify-content: flex-end; padding: 32px; }
.hx-big { font-size: clamp(72px, 9vw, 140px); font-weight: 700; line-height: .85; letter-spacing: -.05em; color: var(--ink); }
.hx-big-label { margin-top: 14px; font-size: 14px; font-weight: 500; text-transform: uppercase; letter-spacing: .06em; }
/* hero intro: accent curtain lifts off the photo, which settles then drifts slowly */
.hx-media { position: absolute; inset: -14px; transform: translate3d(var(--px, 0), var(--py, 0), 0); transition: transform 1.2s var(--ease); }

.js .hx-media img { transform: scale(1.18); animation: imgSettle 2.6s var(--ease) .6s forwards, drift 22s ease-in-out 3.2s infinite alternate; }
.js .hx-aside::after { content: ""; position: absolute; inset: 0; z-index: 2; background: var(--accent); transform-origin: top; animation: curtain 1.6s var(--ease) .5s forwards; pointer-events: none; }
.js .hx-meta, .js .hx-lede, .js .hx > .hx-cta { opacity: 0; transform: translateY(10px); animation: fadeUp 1.1s var(--ease) forwards; }
.js .hx > :nth-child(1) { animation-delay: .15s; } .js .hx > :nth-child(2) { animation-delay: .3s; }
.js .hx > :nth-child(3) { animation-delay: .45s; } .js .hx > :nth-child(4) { animation-delay: .6s; }
.js .hx-lede { animation-delay: 1.5s; } .js .hx > .hx-cta { animation-delay: 1.75s; }
@keyframes curtain { to { transform: scaleY(0); } }
@keyframes imgSettle { to { transform: scale(1.02); } }
@keyframes drift { from { transform: scale(1.02) translate(0, 0); } to { transform: scale(1.07) translate(-1.2%, -1%); } }
@keyframes fadeUp { to { opacity: 1; transform: none; } }
.hx-lede { display: flex; align-items: flex-end; padding: clamp(24px, 2.6vw, 40px) clamp(28px, 3.4vw, 48px); font-size: var(--fs-lede); line-height: 1.4; }
.hx-lede { max-width: none; }
.hx > .hx-cta { border: 0; margin: -1px 0 0 -1px; height: auto; min-height: var(--hdr-h); }
.hx-cta .btn-face { align-items: flex-end; padding-bottom: 32px; }
/* "See my work": a soft glint runs through the label only, every few seconds after the intro; stops on hover */
.hx-cta .btn-face > span {
  flex: 0 1 auto; margin-right: auto; /* hug the words so the glint crosses the text, not empty space */
  color: transparent; -webkit-background-clip: text; background-clip: text;
  background-image: linear-gradient(100deg, var(--ink) 42%, var(--accent) 50%, var(--ink) 58%);
  background-size: 300% 100%; background-position: 100% 0;
  animation: textGlint 2s ease-in-out 3s infinite;
}
@keyframes textGlint { 0% { background-position: 100% 0; } 60%, 100% { background-position: 0% 0; } }
.hx-cta:hover .btn-face > span, .hx-cta:focus-visible .btn-face > span { animation: none; color: var(--ink); background: none; }
.hx-cta-empty { display: grid; place-items: center; border: 1px solid var(--border) !important; background: var(--paper); }
.hx-cta-empty .ico { width: 34px; height: 34px; color: var(--accent); animation: spin 14s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* split-letter reveal (letters wrapped by main.js) */
.split .w { display: inline-block; white-space: nowrap; }
.split .ch { display: inline-block; }
.js .split.is-split .ch { opacity: 0; filter: blur(10px); transform: translateY(10px); animation: chIn .7s var(--ease) forwards; animation-delay: calc(var(--i) * 22ms + 120ms); }
@keyframes chIn { to { opacity: 1; filter: blur(0); transform: none; } }

/* scroll reveal */
/* Blocks wipe up out of a mask while rising; the final inset is negative so hover lifts and offset shadows aren't clipped */
.js .rv {
  /* 96%, not 100%: a fully clipped element never counts as intersecting, so it would never reveal */
  opacity: 0; transform: translateY(56px); clip-path: inset(0 0 96% 0);
  transition: opacity .9s var(--ease), transform 1.1s var(--ease), clip-path 1.1s var(--ease);
  transition-delay: var(--d, 0ms);
}
.js .rv.in { opacity: 1; transform: none; clip-path: inset(-40px -40px -40px -40px); }
/* photos inside a revealing block settle from a slight zoom */
.js .rv img, .js .rv .card-img img { scale: 1.16; transition: scale 1.6s var(--ease); transition-delay: var(--d, 0ms); }
.js .rv.in img, .js .rv.in .card-img img { scale: 1; }
/* joined grids: the cells follow one after another (JS sets --k on each child) */
.js .stagger > * { opacity: 0; translate: 0 36px; transition: opacity .8s var(--ease), translate 1s var(--ease); transition-delay: calc(var(--d, 0ms) + 120ms + var(--k, 0) * 90ms); }
.js .stagger.in > * { opacity: 1; translate: 0 0; }
/* section titles: words slide up from behind a line mask */
.js .head-box h2 .w { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .06em; margin-bottom: -.06em; }
.js .head-box h2 .wi { display: inline-block; transform: translateY(105%); transition: transform 1s var(--ease); transition-delay: calc(var(--d, 0ms) + 150ms + var(--i, 0) * 70ms); }
.js .head-box.in h2 .wi { transform: none; }
/* scroll-linked depth: big photos drift inside their frames, the footer name rises as you reach it */
@supports (animation-timeline: view()) {
  /* object-position pans inside the crop, so nothing ever slides out of its frame */
  .about-img img { animation: drift-y linear both; animation-timeline: view(); animation-range: cover; }
  @keyframes drift-y { from { object-position: 50% 15%; } to { object-position: 50% 85%; } }
  .giant { animation: rise-in linear both; animation-timeline: view(); animation-range: entry 0% cover 45%; }
  @keyframes rise-in { from { translate: 0 30%; opacity: .2; } to { translate: 0 0; opacity: 1; } }
}

/* ---------- now shipping ---------- */
.ship { grid-template-columns: repeat(4, 1fr); }
.ship-main { grid-column: 1 / 4; background: var(--tint); padding: clamp(28px, 3.2vw, 48px); display: flex; flex-direction: column; gap: 20px; }
.ship-eyebrow { display: flex; align-items: center; gap: 10px; font-size: 13px; font-weight: 500; text-transform: uppercase; letter-spacing: .06em; }
.ship-title { font-size: clamp(26px, 2.6vw, 40px); font-weight: 500; line-height: 1.12; text-transform: none; max-width: 24ch; }
.ship-text { font-size: var(--fs-body); color: var(--text-2); max-width: 52ch; }
.ship-launch { grid-column: 4; padding: clamp(24px, 2.6vw, 36px); display: flex; flex-direction: column; justify-content: space-between; gap: 24px; }
.ship-k { font-size: 13px; font-weight: 500; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.ship-big { font-size: clamp(64px, 7vw, 112px); font-weight: 700; line-height: .85; letter-spacing: -.05em; text-transform: uppercase; }
.ship-big span { display: block; font-size: .42em; letter-spacing: -.02em; color: var(--accent-type); margin-top: .12em; }
.ship-track { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); list-style: none; margin: 0; padding: 0; }
.ship-track li { position: relative; display: flex; flex-direction: column; gap: 10px; padding: 22px clamp(20px, 2vw, 28px) 24px; border-left: 1px solid var(--border); }
.ship-track li:first-child { border-left: 0; }
.ship-track li::before { content: ""; position: absolute; left: 0; right: 0; top: -1px; height: 3px; background: var(--ink); }
.ship-n { font: 500 12px "Geist Mono", monospace; color: var(--muted); }
.ship-m { font-family: "Geist", sans-serif; font-size: clamp(17px, 1.4vw, 20px); font-weight: 500; }
.ship-s { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--muted); }
.ship-s .ico { width: 15px; height: 15px; color: var(--ink); }
.is-now .ship-s { color: var(--ink); }
/* Now shipping, both themes: one card. The launch date is a deep-teal poster with the day outlined behind it,
   and the milestones read as one thin progress rail. Rule: light theme uses solid colours only; the dark theme
   adds the gradients and glows (see the [data-theme="dark"] rules below). */
.ship-main { background: var(--paper); }
.ship-eyebrow { color: var(--accent-deep); }
.ship-eyebrow .hx-dot, .ship-s .hx-dot { animation: none; box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 22%, transparent); }
.ship-launch {
  position: relative; overflow: hidden; isolation: isolate; color: #fff;
  background: #145a6c; /* white 7.8:1, label 6.7:1, year 5.6:1 */
}
.ship-day {
  position: absolute; z-index: -1; right: -.04em; top: 50%; translate: 0 -58%;
  font: 700 clamp(160px, 15vw, 240px)/1 "Geist", sans-serif; letter-spacing: -.06em;
  color: transparent; -webkit-text-stroke: 1.5px rgba(255, 255, 255, .22); user-select: none;
}
.ship-launch .ship-k { color: #d7f3f9; }
.ship-launch .ship-big { color: #fff; }
.ship-launch .ship-big span { color: #9fe6f5; }
.ship-track li::before { height: 2px; background: var(--accent); }
/* launch step: grey rail, solid accent fill to the halfway point, a dot marking "now" */
.ship-track li.is-now::before { background: var(--rule); }
.ship-track li.is-now::after { content: ""; position: absolute; left: 0; top: -1px; width: 50%; height: 2px; background: var(--accent); }
.ship-head { position: absolute; z-index: 1; left: 50%; top: -4px; width: 8px; height: 8px; margin-left: -4px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 30%, transparent); }
.ship-track li.is-now { background: color-mix(in srgb, var(--accent) 7%, var(--paper)); }
.ship-track .ship-s .ico { color: var(--accent-deep); }
/* dark: gradients and glows */
[data-theme="dark"] .ship-main { background: radial-gradient(80% 110% at 0% 0%, color-mix(in srgb, var(--accent) 15%, transparent), transparent 62%), var(--paper); }
/* glow capped at 28% so the small label stays 4.5:1 even at the brightest corner */
[data-theme="dark"] .ship-launch { background: radial-gradient(110% 80% at 100% 0%, color-mix(in srgb, var(--accent) 28%, transparent), transparent 65%), linear-gradient(170deg, #145a6c 0%, #0b2830 100%); }
[data-theme="dark"] .ship-track li.is-now { background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 9%, var(--paper)), var(--paper)); }
[data-theme="dark"] .ship-eyebrow .hx-dot, [data-theme="dark"] .ship-s .hx-dot { box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 22%, transparent), 0 0 12px var(--accent); }
[data-theme="dark"] .ship-head { background: #c9f3fb; box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 35%, transparent), 0 0 14px var(--accent); }
[data-theme="dark"] .ship-text { color: var(--text-3); }

/* ---------- how I work with AI ---------- */
.flow { margin-bottom: -1px; }
.tools { grid-template-columns: 3fr 1fr; }
.tools-list { display: flex; flex-wrap: wrap; align-content: center; gap: 10px; padding: 24px 26px; }
.tools-list li { border: 1px solid var(--border); padding: 8px 14px; font-size: 14px; font-weight: 500; text-transform: uppercase; letter-spacing: .04em; transition: background-color .25s, color .25s; }
.tools-list li { display: inline-flex; align-items: center; gap: 10px; }
.tool-logo { width: 18px; height: 18px; flex: none; color: var(--ink); transition: color .25s; }
.tools-list li:hover { background: var(--tint); }
.tools-list li:hover .tool-logo { color: var(--brand, var(--accent-deep)); }
.tools-note { padding: 24px 26px; display: flex; align-items: center; font-family: "Geist", sans-serif; font-size: clamp(18px, 1.5vw, 22px); font-weight: 500; line-height: 1.25; }

/* step illustrations */
.flow li { gap: 8px; }
.flow h4 { margin-top: 0; padding-top: 0; }
.flow p { font-size: 14px; }
.viz-wrap { height: 136px; margin: 18px 0 22px; display: grid; place-items: center; background: var(--soft); border: 1px solid var(--line); transition: background-color .4s var(--ease); }
.flow li:hover .viz-wrap { background: var(--tint); }
.viz { width: 78%; }
.viz-frame { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.viz-frame i { aspect-ratio: 1.4; background: var(--paper); border: 1px solid var(--rule); transform: rotate(var(--r, -2deg)); }
.viz-frame i:nth-child(even) { --r: 2deg; }
.viz-frame i:nth-child(3n) { --r: -1deg; }
.viz-frame i.on { border: 1.5px solid var(--ink); background: var(--accent); transform: rotate(0) scale(1.12); box-shadow: -3px 3px 0 var(--ink); transition: transform .45s var(--lift); }
.flow li:hover .viz-frame i.on { transform: rotate(0) scale(1.22); }
.viz-explore { display: grid; grid-template-columns: repeat(6, 1fr); gap: 5px; }
.viz-explore i { aspect-ratio: .8; display: flex; flex-direction: column; justify-content: flex-end; gap: 3px; padding: 4px; background: var(--paper); border: 1px solid var(--rule); opacity: .55; transition: opacity .4s; }
.viz-explore b { height: 2px; background: var(--rule); }
.viz-explore b:last-child { width: 60%; }
.viz-explore i.kept { opacity: 1; border-color: var(--ink); }
.viz-explore i.on { opacity: 1; border: 1.5px solid var(--ink); background: var(--accent); box-shadow: -3px 3px 0 var(--ink); }
.viz-explore i.on b { background: var(--on-accent); }
.flow li:hover .viz-explore i:not(.on):not(.kept) { opacity: .2; }
.viz-system { display: grid; gap: 5px; font: 500 12px "Geist Mono", monospace; }
.viz-system p { display: flex; align-items: center; gap: 10px; padding: 4px 10px; background: var(--paper); border: 1px solid var(--rule); font-size: 12px; color: var(--ink); }
.viz-system .sw { width: 12px; height: 12px; background: var(--accent); border: 1px solid var(--ink); }
.viz-system .sp { width: 16px; height: 8px; border: 1px dashed var(--ink); }
.viz-system .cp { color: var(--accent-deep); font-weight: 500; }
.viz-ship { display: grid; gap: 10px; }
.flow .viz-big { color: var(--ink); font-family: "Geist", sans-serif; font-size: 36px; font-weight: 700; line-height: 1; letter-spacing: -.04em; }
.viz-ship .bar { display: block; height: 10px; border: 1px solid var(--ink); background: var(--paper); }
.viz-ship .bar span { display: block; height: 100%; width: 70%; background: linear-gradient(90deg, var(--accent) 85.7%, color-mix(in srgb, var(--accent) 45%, var(--paper)) 85.7%); border-right: 1px solid var(--ink); }

/* dark theme: the steps read as four small glowing screens instead of flat grey boxes */
[data-theme="dark"] .flow li { background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 7%, var(--paper)) 0%, var(--paper) 55%); transition: background-color .4s var(--ease); }
[data-theme="dark"] .flow .step-n { color: var(--accent-deep); }
[data-theme="dark"] .flow .step-n::after { content: " / 04"; color: var(--muted); }
[data-theme="dark"] .viz-wrap {
  height: 150px; border: 1px solid color-mix(in srgb, var(--accent) 28%, transparent);
  background:
    radial-gradient(65% 80% at 50% 115%, color-mix(in srgb, var(--accent) 40%, transparent), transparent 70%),
    radial-gradient(color-mix(in srgb, var(--ink) 13%, transparent) 1px, transparent 1.2px) 0 0 / 14px 14px,
    #1b1e22;
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--ink) 8%, transparent);
  transition: border-color .4s var(--ease), box-shadow .4s var(--ease);
}
[data-theme="dark"] .flow li:hover .viz-wrap { border-color: var(--accent); box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 12%, transparent), 0 18px 40px -18px color-mix(in srgb, var(--accent) 70%, transparent); }
[data-theme="dark"] .viz-frame i:not(.on), [data-theme="dark"] .viz-explore i:not(.on) { background: #191d21; border-color: #343a40; }
[data-theme="dark"] .viz-explore b { background: #3d444b; }
[data-theme="dark"] .viz-explore i.kept { border-color: var(--accent-deep); opacity: 1; }
[data-theme="dark"] .viz-frame i.on, [data-theme="dark"] .viz-explore i.on {
  border-color: #9fe6f5; box-shadow: 0 0 0 1px var(--accent), 0 6px 22px -2px color-mix(in srgb, var(--accent) 75%, transparent);
}
[data-theme="dark"] .viz-system p { background: color-mix(in srgb, #191d21 88%, transparent); border-color: #343a40; }
[data-theme="dark"] .viz-system p:first-child { border-color: color-mix(in srgb, var(--accent) 55%, transparent); }
[data-theme="dark"] .viz-system .sw { border-color: #9fe6f5; box-shadow: 0 0 10px var(--accent); }
[data-theme="dark"] .flow .viz-big { background: linear-gradient(180deg, var(--ink) 30%, var(--accent)); -webkit-background-clip: text; background-clip: text; color: transparent; }
[data-theme="dark"] .viz-ship .bar { border-color: #343a40; background: #191d21; border-radius: 6px; overflow: hidden; }
[data-theme="dark"] .viz-ship .bar span { border-right: 0; box-shadow: 0 0 14px color-mix(in srgb, var(--accent) 80%, transparent); }
/* tools: quiet chips with the real brand colours, closing line on the tint */
[data-theme="dark"] .tools-list li { background: #15181b; }
[data-theme="dark"] .tools-list .tool-logo { color: var(--brand, var(--accent-deep)); }
[data-theme="dark"] .tools-list li:hover { border-color: var(--accent); }
/* closing line stacks in two lines in both themes (layout is shared) */
.tools-note { flex-direction: column; justify-content: center; align-items: flex-start; gap: 4px; font-size: clamp(20px, 1.8vw, 26px); line-height: 1.2; }
[data-theme="dark"] .tools-note { background: radial-gradient(120% 90% at 100% 100%, color-mix(in srgb, var(--accent) 22%, transparent), transparent 70%), var(--tint); }
[data-theme="dark"] .tools-note .tn-em { color: var(--accent-deep); }

/* ---------- reel frame + stats ---------- */
.frame { padding: clamp(16px, 3.5vw, 48px); overflow: hidden; }
.marquee { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
.marquee-track { display: flex; gap: 16px; width: max-content; animation: marquee 60s linear infinite; }
.marquee-track .clone { display: contents; }
.marquee:hover .marquee-track, .logos:hover .marquee-track { animation-play-state: paused; }
.marquee img { height: clamp(220px, 30vw, 420px); width: auto; border: 1px solid var(--border); }
@keyframes marquee { to { transform: translateX(calc(-50% - 8px)); } }

.stats { margin-top: -1px; }
.stat { padding: clamp(24px, 2.6vw, 40px) clamp(20px, 2.2vw, 32px); display: flex; flex-direction: column; justify-content: space-between; gap: 28px; min-height: 220px; }
.stat-num { font-size: clamp(48px, 5vw, 76px); font-weight: 700; line-height: 1; letter-spacing: -.02em; text-shadow: -4px 4px 0 var(--shade); font-variant-numeric: tabular-nums; }
.stat-label { font-size: 16px; text-transform: uppercase; font-weight: 500; }

/* ---------- section heads ---------- */
.sec-head { align-items: start; margin-bottom: clamp(48px, 5vw, 76px); }
.head-box { padding: clamp(20px, 2vw, 28px) clamp(20px, 1.8vw, 26px) clamp(24px, 2.2vw, 32px); display: grid; gap: 16px; }
.head-box p { font-size: clamp(16px, 1.4vw, 20px); max-width: 44ch; }
.head-box .eyebrow { font-size: 14px; }

/* ---------- capabilities ----------
   Four equal joined columns, kept skimmable: number + icon, title, and one "proof" line on the tint. Hover tints the column and lifts the icon. */
.caps { list-style: none; margin: 0; padding: 0; grid-auto-rows: auto; }
/* subgrid: every column shares the same three rows, so titles and proof strips line up even when copy wraps */
.cap { position: relative; display: grid; grid-row: span 3; grid-template-rows: subgrid; row-gap: 0; padding: clamp(24px, 2.4vw, 34px) clamp(22px, 2.2vw, 30px) 0; transition: background-color .4s var(--ease); }
.cap::before { content: ""; position: absolute; left: -1px; right: -1px; top: -1px; height: 3px; background: var(--accent); transform: scaleX(0); transform-origin: left; transition: transform .5s var(--ease); }
.cap:hover { background: var(--tint); }
.cap:hover::before { transform: scaleX(1); }
.cap-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: clamp(28px, 4vw, 64px); }
.cap-n { font: 500 13px "Geist Mono", monospace; color: var(--muted); }
.cap-ico { width: 34px; height: 34px; transition: transform .45s var(--lift), color .3s; }
.cap:hover .cap-ico { transform: translate(3px, -3px) rotate(-6deg); color: var(--accent-deep); }
.cap h3 { font-size: clamp(24px, 2.2vw, 32px); font-weight: 500; line-height: 1.12; text-transform: none; letter-spacing: -.01em; }
.cap-proof { margin: 0 calc(-1 * clamp(22px, 2.2vw, 30px)); padding: 18px clamp(22px, 2.2vw, 30px); border-top: 1px solid var(--border); display: flex; gap: 10px; align-items: flex-start; font-size: 14px; line-height: 1.4; background: var(--tint); }
.cap:hover .cap-proof { background: var(--paper); }
.cap-proof .ico { width: 16px; height: 16px; flex: none; margin-top: 1px; color: var(--accent-deep); }
.cap h3 { max-width: 14ch; margin-bottom: clamp(28px, 3vw, 44px); }

/* ---------- project cards ---------- */
.cards { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(40px, 4vw, 64px) 24px; }
.card { display: flex; flex-direction: column; align-items: flex-start; }
.card-media { width: 100%; aspect-ratio: 4 / 3; position: relative; background: transparent; transition: background-color .35s var(--ease); }
.card-img { position: absolute; inset: 0; overflow: hidden; background: var(--soft); transition: transform .45s var(--lift); }
.card-img img { width: 100%; height: 100%; object-fit: cover; }
.card-title {
  width: 100%; margin-top: -1px; padding: 18px 24px;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  transition: background-color .35s var(--ease), color .35s var(--ease);
}
.card-title h3 { text-transform: uppercase; font-weight: 500; }
.card-title p { font-size: 15px; color: var(--muted); margin-top: 2px; transition: color .35s; }
.card-arrow { width: 30px; height: 30px; flex: none; transition: transform .45s var(--ease); }
.card-tag { margin-top: -1px; padding: 14px 22px; font-size: 15px; display: inline-block; }
/* hover: image lifts off a pink base, title bar turns pink */
.card:hover .card-media { background: var(--accent); }
.card:hover .card-img { transform: translate(12px, -12px); }
.card:hover .card-title { background: var(--accent); color: var(--on-accent); }
.card:hover .card-title p { color: var(--on-accent); }
.card:hover .card-arrow { transform: rotate(45deg); }

.cover-soon {
  width: 100%; height: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center;
  background: var(--tint); color: var(--ink); text-transform: uppercase; font-weight: 700; line-height: .9;
  font-size: clamp(48px, 7vw, 110px); text-align: center;
}
.cover-soon span:nth-child(2) { color: var(--accent-type); }
.cover-soon small { font-size: 14px; font-weight: 500; letter-spacing: .08em; margin-top: 28px; color: var(--muted); }
/* designed cover for case studies without a cover image (coverArt); sizes follow the card width */
.cover-art.has-video { position: relative; }
.cover-video { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; object-fit: contain; background: #07262c; pointer-events: none; } /* whole frame visible; the dark fill matches the video edges */
.cover-art { container-type: inline-size; width: 100%; height: 100%; display: flex; flex-direction: column; justify-content: center; gap: 3cqw; padding: 8cqw; background: #145a6c; color: #fff; }
.cover-art-k { font: 500 max(11px, 1.9cqw) "Geist Mono", monospace; letter-spacing: .08em; text-transform: uppercase; color: #d7f3f9; }
.cover-art strong { font: 500 12cqw/.9 "Geist", sans-serif; letter-spacing: -.04em; }
.cover-art-t { max-width: 22ch; font: 400 max(14px, 3.4cqw)/1.2 "Geist", sans-serif; color: #9fe6f5; }
.cover-art-chain { display: flex; align-items: center; margin-top: 3cqw; }
.cover-art-chain li { position: relative; flex: none; width: 5.6cqw; height: 5.6cqw; display: grid; place-items: center; border-radius: 50%; border: 1.5px dashed #9fe6f5; color: #d7f3f9; font: 500 max(10px, 2.2cqw) "Geist", sans-serif; }
.cover-art-chain li + li { margin-left: 4.4cqw; }
.cover-art-chain li + li::before { content: ""; position: absolute; right: calc(100% + 1.5px); top: 50%; width: 4.4cqw; border-top: 1.5px dashed #9fe6f5; }
.cover-art-chain .is-out { background: #fff; border: 1.5px solid #fff; color: #145a6c; }

/* ---------- about preview ---------- */
.about-prev { align-items: stretch; }
.about-img { overflow: hidden; }
.about-img img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 3 / 4.4; }
.about-quote { margin-left: -1px; padding: clamp(28px, 3.4vw, 56px); display: flex; flex-direction: column; justify-content: space-between; gap: 32px; }
.about-quote .q-ico { width: 44px; height: 44px; color: var(--accent); }
.about-quote p { font-size: clamp(26px, 3vw, 46px); line-height: 1.15; font-weight: 500; text-transform: uppercase; letter-spacing: -.01em; }
.about-quote footer { font-size: 16px; color: var(--muted); }
.about-quote footer strong { color: var(--ink); font-weight: 500; }

/* ---------- experience ---------- */
.xp { border-top: 1px solid var(--border); }
.xp-row {
  display: grid; grid-template-columns: repeat(4, 1fr); align-items: start;
  border: 1px solid var(--border); border-top: 0; background: var(--paper);
  transition: background-color .35s var(--ease), color .35s var(--ease);
}
.xp-row > * { padding: 26px; }
.xp-years { font-size: 16px; font-weight: 500; letter-spacing: .02em; }
.xp-main { grid-column: 2 / 4; border-left: 1px solid var(--border); border-right: 1px solid var(--border); align-self: stretch; }
.xp-main h3 { font-size: clamp(22px, 1.9vw, 28px); }
.xp-co { margin-top: 4px; color: var(--muted); transition: color .35s; }
.xp-period { text-align: right; text-transform: uppercase; font-size: 16px; font-weight: 500; letter-spacing: .02em; }
.xp:not(.xp-detailed) .xp-co { display: none; }
.xp:not(.xp-detailed) .xp-row > * { padding-block: 30px; }
.xp:not(.xp-detailed) .xp-row:hover { background: var(--tint); }
.xp:not(.xp-detailed) .xp-row:hover .xp-co { color: var(--muted); }
.xp-detailed .xp-period { text-transform: none; color: var(--muted); font-weight: 400; }
.xp-main ul { margin-top: 18px; display: grid; gap: 10px; }
.xp-main li { position: relative; padding-left: 22px; line-height: 1.5; }
.xp-main li::before { content: ""; position: absolute; left: 0; top: .62em; width: 8px; height: 8px; background: var(--accent); }

/* ---------- logos ---------- */
.logos { overflow: hidden; }
.logos .marquee-track { animation-duration: 40s; gap: 0; }
.logos li { width: clamp(180px, var(--col), 336px); height: clamp(110px, 10vw, 150px); display: grid; place-items: center; padding: 28px 40px; border-right: 1px solid var(--border); }
.logos img { max-height: 54px; width: auto; max-width: 100%; object-fit: contain; filter: var(--logo-filter); mix-blend-mode: var(--logo-blend); opacity: .8; transition: filter .35s, opacity .35s; }
.logos li:hover img { filter: var(--logo-filter-hover); opacity: 1; }
.logos .lg-l { display: var(--logo-light); }
.logos .lg-d { display: var(--logo-dark); }
[data-theme="dark"] .logos img { opacity: .92; }

/* ---------- testimonials ---------- */
.t-nav { display: flex; justify-content: flex-end; }
.t-nav .sq + .sq { margin-left: -1px; }
.t-track {
  display: grid; grid-auto-flow: column; grid-auto-columns: clamp(290px, 30vw, 420px);
  overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
  border-left: 1px solid var(--border);
}
.t-track::-webkit-scrollbar { display: none; }
.t-track.is-auto { scroll-snap-type: none; } /* main.js scrolls it slowly in a loop; snapping would fight that */
.t-card { scroll-snap-align: start; margin-left: -1px; padding: 26px; display: flex; flex-direction: column; gap: 22px; min-height: 380px; }
.t-card:first-child { margin-left: 0; border-left: 0; }
.t-card blockquote { font-size: 17px; line-height: 1.5; flex: 1; }
.t-card figcaption { display: flex; align-items: center; gap: 14px; }
.t-card figcaption img { width: 48px; height: 48px; object-fit: cover; border: 1px solid var(--border); filter: grayscale(1); transition: filter .45s var(--ease); }
.t-card:hover figcaption img, .t-card:focus-within figcaption img { filter: none; }
.t-card figcaption strong { display: block; font-weight: 500; }
.t-card figcaption small { display: block; font-size: 14px; color: var(--muted); }

/* ---------- FAQ ---------- */
.faq { align-items: start; }
.faq-head { position: sticky; top: calc(var(--hdr-top) + var(--hdr-h) + 24px); }
.faq-list { margin-top: 0; }
.faq-list .icon-tab { display: grid; }
.faq-item { border: 1px solid var(--border); background: var(--paper); margin-top: -1px; }
.faq-list .icon-tab + .faq-item { margin-top: 0; }
.faq-item summary {
  list-style: none; cursor: pointer; display: grid; grid-template-columns: auto 1fr 64px; align-items: stretch;
  font-size: clamp(17px, 1.4vw, 20px);
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-n { padding: 20px 0 20px 22px; font-size: 14px; font-weight: 500; color: var(--muted); align-self: center; }
.faq-q { padding: 20px 18px; align-self: center; }
.faq-plus { display: grid; place-items: center; border-left: 1px solid var(--border); transition: background-color .3s var(--ease); }
.faq-plus .ico { width: 26px; height: 26px; transition: transform .4s var(--ease); }
.faq-item summary:hover .faq-plus { background: var(--accent); color: var(--on-accent); }
.faq-item[open] .faq-plus { background: var(--accent); color: var(--on-accent); }
.faq-item[open] .faq-plus .ico { transform: rotate(45deg); }
.faq-a { padding: 0 86px 24px 58px; color: var(--text-1); line-height: 1.55; }
.faq-item[open] .faq-a { animation: faqIn .45s var(--ease); }
@keyframes faqIn { from { opacity: 0; transform: translateY(-6px); } }

/* ---------- footer ---------- */
.site-footer { margin-top: var(--sec); }
.foot-top { border: 1px solid var(--border); background: var(--paper); }
.foot-cta { background: var(--tint); color: var(--ink); padding: clamp(24px, 2.4vw, 32px); display: flex; flex-direction: column; gap: 12px; }
.foot-cta p { font-size: var(--fs-lede); }
.foot-cta .btn { margin-top: 16px; height: 74px; }
.foot-cta .btn-face { padding: 0 24px; }
.foot-col { padding: 24px; display: flex; flex-direction: column; gap: 18px; border-left: 1px solid var(--border); }
.foot-col .eyebrow { font-size: 13px; color: var(--muted); }
.foot-col ul { display: grid; gap: 8px; }
.foot-col a { position: relative; transition: color .25s; word-break: break-word; }

.foot-social, .about-social { margin-top: -1px; }
.foot-social a, .about-social a { margin-left: -1px; }
.foot-social a:first-child, .about-social a:first-child { margin-left: 0; }
/* desktop: Work / About / Contact / Resume live in the header, so no menu button */
@media (min-width: 810px) { [data-hdr] .menu-dock { display: none; } }
.foot-bar {
  display: grid; grid-template-columns: 74px 1fr 74px; align-items: center; margin-top: -1px;
  border: 1px solid var(--border); background: var(--paper); text-align: center; font-size: 14px;
}
.foot-ico { display: grid; place-items: center; height: 74px; transition: background-color .3s, color .3s; }
.foot-ico:first-child { border-right: 1px solid var(--border); }
.foot-ico:last-child { border-left: 1px solid var(--border); }
.foot-ico .ico { width: 26px; height: 26px; }
.foot-ico:hover { background: var(--accent); color: var(--on-accent); }
.giant {
  font-size: calc(var(--wrap) * .212); font-weight: 500; line-height: .8; text-transform: uppercase; letter-spacing: -.07em;
  text-align: center; margin-top: clamp(16px, 2vw, 28px); padding-bottom: clamp(20px, 3vw, 48px);
  background: linear-gradient(180deg, var(--ink) 0%, var(--ink) 25%, color-mix(in srgb, var(--ink) 8%, transparent) 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  user-select: none; white-space: nowrap; overflow: hidden;
}

/* ---------- about page ---------- */
.about-intro { align-items: start; }
.about-body { margin-top: 70px; }
.about-body .prose { margin-top: 0; }
.prose { padding: clamp(22px, 2.4vw, 34px); display: grid; gap: 16px; line-height: 1.6; }
.prose p, .prose li { max-width: 68ch; }
.prose strong { font-weight: 500; background: linear-gradient(transparent 62%, color-mix(in srgb, var(--accent) 28%, transparent) 62%); }
.prose h3 { font-size: clamp(22px, 1.9vw, 28px); font-weight: 500; line-height: 1.2; }
.prose ul, .prose ol { display: grid; gap: 8px; }
.prose ul li { position: relative; padding-left: 22px; }
.prose ul li::before { content: ""; position: absolute; left: 0; top: .62em; width: 8px; height: 8px; background: var(--accent); }
.prose ol { counter-reset: n; }
.prose ol li { counter-increment: n; position: relative; padding-left: 34px; }
.prose ol li::before { content: counter(n, decimal-leading-zero); position: absolute; left: 0; top: .1em; font-size: 14px; font-weight: 500; color: var(--muted); }
.prose a { text-decoration: underline; text-underline-offset: 3px; }

.step-n { font-size: 16px; font-weight: 500; }

/* ---------- About hero (aboutHero in build.mjs): one playful sentence and a photo deck ----------
   Not the home bento. The words rise in; "complex problems" starts tangled and straightens on hover (or by itself
   after a few seconds); "simple" is a tilted sticker that pops; each skill shows a sticker; the photos shuffle. */
.ah { --spring: cubic-bezier(.2, 1.3, .35, 1); margin-top: clamp(40px, 4vw, 72px); }
.ah-top { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding-bottom: 16px; border-bottom: 1px solid var(--line); }
.ah-k { font: 500 13px "Geist Mono", monospace; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.js .ah-top .ah-status, .ah-top .ah-status { padding: 0; height: 32px; color: var(--ink); text-decoration: none; opacity: 1; transform: none; animation: none; }
.ah-grid { display: grid; grid-template-columns: minmax(0, 1fr) clamp(240px, 21vw, 310px); gap: clamp(40px, 7vw, 128px); align-items: center; padding: clamp(40px, 4.5vw, 72px) clamp(0px, 2vw, 32px) clamp(32px, 4vw, 56px) 0; }
.ah-say { font: 400 clamp(42px, 5.6vw, 88px)/1.22 "Geist", sans-serif; letter-spacing: -.035em; word-spacing: .06em; padding-top: .5em; } /* room for the hover stickers and the Untangle button */
.ah-w { display: inline-block; }
.ah-small { display: block; margin-top: clamp(28px, 3vw, 48px); font-size: clamp(22px, 2.3vw, 34px); line-height: 1.6; letter-spacing: -.015em; color: var(--text-2); }

/* the tangle */
.ah-tangle { position: relative; cursor: default; }
.ah-tangle i { display: inline-block; font-style: normal; color: var(--muted); transform: rotate(var(--r)) translateY(var(--y)); transition: transform .7s var(--spring), color .4s; }
.ah-tangle i:nth-child(odd) { transition-delay: 40ms; } .ah-tangle i:nth-child(3n) { transition-delay: 80ms; }
.ah-tangle.is-done i { transform: none; color: var(--ink); }
.ah-hint { position: absolute; right: -.3em; top: -.95em; z-index: 3; padding: 10px 16px; border: 0; background: var(--ink); color: var(--paper); font: 500 14px "Geist Mono", monospace; letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; rotate: 6deg; cursor: pointer;
  box-shadow: -4px 4px 0 var(--accent); transition: opacity .3s, scale .4s var(--spring), background-color .2s, color .2s, box-shadow .3s var(--spring); }
.ah-hint:hover, .ah-hint:focus-visible { background: var(--accent); color: var(--on-accent); box-shadow: -6px 6px 0 var(--ink); scale: 1.06; }
.ah-hint:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.ah-tangle.is-done .ah-hint { opacity: 0; scale: .5; pointer-events: none; }
.ah-tangle.is-playing i { transition: none; }
.ah-tangle.is-playing .ah-hint { transition: opacity .2s, scale .35s cubic-bezier(.5, -0.6, .7, 1); }
.ah-burst { position: absolute; left: 50%; top: 50%; width: 0; height: 0; pointer-events: none; z-index: 4; }
.ah-burst b { position: absolute; left: -5px; top: -5px; width: 10px; height: 10px; background: var(--accent); }
.ah-burst b:nth-child(3n) { background: var(--ink); width: 7px; height: 7px; }
.ah-burst b:nth-child(4n) { border-radius: 50%; }
.ah-solved { position: absolute; left: 50%; top: -1.2em; translate: -50% 0; padding: 8px 14px; background: var(--accent); color: var(--on-accent); box-shadow: -4px 4px 0 var(--ink);
  font: 500 14px "Geist Mono", monospace; letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; animation: ahSolved 1.8s cubic-bezier(.3, 1.4, .5, 1) forwards; }
@keyframes ahSolved { 0% { opacity: 0; transform: scale(.3) rotate(-12deg); } 20% { opacity: 1; transform: scale(1.1) rotate(4deg); } 30% { transform: scale(1) rotate(-3deg); } 75% { opacity: 1; transform: translateY(-10px) rotate(-3deg); } 100% { opacity: 0; transform: translateY(-34px) rotate(-3deg); } }
[data-theme="dark"] .ah-solved { background: var(--lit-accent); color: #000; box-shadow: -4px 4px 0 #000; }
/* hovering the tangle only shakes the letters a little more; it untangles on the button */
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .ah-tangle:not(.is-done):hover i { transform: rotate(calc(var(--r) * 1.5)) translateY(calc(var(--y) * 1.4)); }
}

/* the "simple" sticker */
.ah-simple b { display: inline-block; margin: 0 .06em; padding: 0 .14em; font-weight: 500; background: var(--accent); color: var(--on-accent); box-shadow: -.07em .07em 0 var(--ink); rotate: -3deg; transition: rotate .5s var(--spring), translate .5s var(--spring), box-shadow .5s var(--spring); }
.ah-simple:hover b { rotate: 0deg; translate: .04em -.05em; box-shadow: -.13em .13em 0 var(--ink); }

/* skills with stickers */
.ah-trait { position: relative; color: var(--ink); background: linear-gradient(var(--accent-deep), var(--accent-deep)) 0 100% / 100% 2px no-repeat; cursor: help; transition: color .25s; }
.ah-tip { position: absolute; left: 50%; bottom: calc(100% + 10px); z-index: 2; display: inline-flex; align-items: center; gap: 8px; padding: 8px 12px; background: var(--ink); color: var(--paper); font: 500 13px/1.2 "Geist Mono", monospace; letter-spacing: .02em; white-space: nowrap; box-shadow: -4px 4px 0 var(--accent); opacity: 0; translate: -50% 8px; scale: .6; rotate: var(--tr, -3deg); transform-origin: 50% 100%; pointer-events: none; transition: opacity .2s, translate .45s var(--spring), scale .45s var(--spring); }
.ah-tip .ico { width: 15px; height: 15px; color: var(--accent); }
.ah-trait:nth-of-type(2) .ah-tip { --tr: 2deg; } .ah-trait:nth-of-type(3) .ah-tip { --tr: -2deg; }
.ah-trait:hover, .ah-trait.is-on { color: var(--accent-deep); }
.ah-trait:hover .ah-tip, .ah-trait.is-on .ah-tip { opacity: 1; translate: -50% 0; scale: 1; }

/* the photo deck */
.ah-deck { position: relative; margin: 0; }
/* inset from the column so tilted and fanned cards never run past the page edge */
.ah-cards { position: relative; aspect-ratio: 3 / 4; margin: 0 36px; cursor: grab; touch-action: pan-y; user-select: none; -webkit-user-select: none; }
.ah-cards.is-grab { cursor: grabbing; }
.ah-card { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border: 1px solid var(--border); box-shadow: -8px 8px 0 var(--shade); -webkit-user-drag: none; transition: transform .7s var(--spring), opacity .3s; }
.ah-card[data-pos="0"] { z-index: 3; transform: rotate(-2deg); }
.ah-card[data-pos="1"] { z-index: 2; transform: translate(16px, 6px) rotate(4deg); }
.ah-card[data-pos="2"] { z-index: 1; transform: translate(-18px, 12px) rotate(-7deg); }
.ah-deck:hover .ah-card[data-pos="0"] { transform: rotate(0deg) translateY(-6px); }
.ah-deck:hover .ah-card[data-pos="1"] { transform: translate(30px, 4px) rotate(8deg); }
.ah-deck:hover .ah-card[data-pos="2"] { transform: translate(-32px, 10px) rotate(-11deg); }
/* drag-throw: the top card flicks out to the side and slides in at the back */
/* while spinning the cards fan out around the centre, then settle back into the stack */
.ah-deck.is-spinning .ah-card { transition: transform .45s var(--ease); }
.ah-deck.is-settling .ah-card { transition: transform .6s cubic-bezier(.25, .8, .3, 1); }
.ah-deck.is-spinning .ah-card[data-pos="0"] { transform: rotate(0deg) scale(.96) !important; }
.ah-deck.is-spinning .ah-card[data-pos="1"] { transform: rotate(120deg) scale(.9) !important; }
.ah-deck.is-spinning .ah-card[data-pos="2"] { transform: rotate(240deg) scale(.9) !important; }
.ah-card.is-out { z-index: 4; transform: translate(var(--out, 112%), -4%) rotate(var(--outr, 14deg)) !important; transition: transform .12s cubic-bezier(.5, 0, .9, .4) !important; }
.ah-card.is-drag { z-index: 4; transition: none !important; }
/* the Shuffle button sits over the photos, centred, and only shows on hover or keyboard focus (always on touch).
   Clicking it hides it while the stack spins (.is-busy). The caption sits centred below with room to breathe. */
.ah-stage { position: relative; padding: 8px 0 0; }
.ah-shuffle { position: absolute; left: 50%; bottom: 28px; z-index: 6; translate: -50% 12px; opacity: 0; pointer-events: none;
  display: inline-flex; align-items: center; gap: 10px; padding: 12px 20px; border: 1px solid var(--ink); background: var(--ink); color: var(--paper);
  font: 500 13px "Geist Mono", monospace; letter-spacing: .08em; text-transform: uppercase; cursor: pointer;
  transition: opacity .35s var(--ease), translate .45s var(--spring), background-color .2s, color .2s, box-shadow .3s var(--spring); }
.ah-shuffle .ico { width: 16px; height: 16px; transition: rotate .4s var(--spring); }
.ah-stage:hover .ah-shuffle, .ah-shuffle:focus-visible { opacity: 1; translate: -50% 0; pointer-events: auto; }
@media (hover: none) { .ah-shuffle { opacity: 1; translate: -50% 0; pointer-events: auto; } }
@media (hover: hover) { .ah-shuffle:hover { background: var(--accent); border-color: var(--accent); color: var(--on-accent); box-shadow: -4px 4px 0 var(--ink); } .ah-shuffle:hover .ico { rotate: 90deg; } }
.ah-shuffle:active { box-shadow: none; }
.ah-deck.is-busy .ah-shuffle { opacity: 0 !important; translate: -50% 12px !important; pointer-events: none !important; }
.ah-cap { display: flex; justify-content: center; margin-top: 48px; }

.ah-foot { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px 48px; flex-wrap: wrap; padding-top: 24px; border-top: 1px solid var(--line); }
.ah-lede { max-width: 40ch; font-size: clamp(17px, 1.5vw, 21px); line-height: 1.5; color: var(--text-2); }
.ah-cta { width: min(100%, 320px); }

/* entrance */
@media (prefers-reduced-motion: no-preference) {
  .js .ah .ah-w { opacity: 0; translate: 0 .35em; filter: blur(10px); transition: opacity .7s var(--ease), translate .9s var(--spring), filter .7s var(--ease); transition-delay: calc(150ms + var(--i) * 90ms); }
  .js .ah.is-in .ah-w { opacity: 1; translate: 0 0; filter: blur(0); }
  .js .ah:not(.is-in) .ah-card { opacity: 0; transform: translateY(-60px) rotate(0deg); }
  .js .ah.is-in .ah-card[data-pos="2"] { transition-delay: .35s; } .js .ah.is-in .ah-card[data-pos="1"] { transition-delay: .5s; } .js .ah.is-in .ah-card[data-pos="0"] { transition-delay: .65s; }
  .js .ah.is-settled .ah-card { transition-delay: 0s; }
  .ah-hint { animation: ahWiggle 2.4s ease-in-out 1.4s infinite; }
}
@keyframes ahWiggle { 0%, 80%, 100% { rotate: 6deg; } 85% { rotate: -4deg; } 90% { rotate: 9deg; } 95% { rotate: 2deg; } }

/* dark: lit glow behind the deck, stickers glow */
[data-theme="dark"] .ah-deck::before { content: ""; position: absolute; inset: -12% -18%; z-index: -1; background: radial-gradient(50% 50% at 50% 60%, color-mix(in srgb, var(--accent) 22%, transparent), transparent 70%); pointer-events: none; }
[data-theme="dark"] .ah-simple b { background: var(--lit-accent); color: #000; box-shadow: -.07em .07em 0 #000, 0 0 30px -6px var(--accent); }
[data-theme="dark"] .ah-simple:hover b { box-shadow: -.13em .13em 0 #000, 0 0 40px -6px var(--accent); }
[data-theme="dark"] .ah-card { box-shadow: -8px 8px 0 rgba(0, 0, 0, .5); }
[data-theme="dark"] .ah-shuffle:hover, [data-theme="dark"] .ah-hint:hover { background: var(--lit-accent); }

@media (max-width: 1099px) {
  .ship-track { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ship-track li:nth-child(4) { border-left: 0; }
  .ship-track li:nth-child(n+4) { border-top: 1px solid var(--border); } .ah-grid { grid-template-columns: minmax(0, 1fr) 240px; gap: 40px; } }
@media (max-width: 809px) {
  .ah-grid { grid-template-columns: minmax(0, 1fr); }
  .ah-deck { width: min(88%, 340px); justify-self: center; }
  .ah-top .ah-k { display: none; }
  .ah-tip { left: 0; translate: 0 8px; } .ah-trait:hover .ah-tip, .ah-trait.is-on .ah-tip { translate: 0 0; }
  .ah-hint { top: -1.4em; font-size: 13px; padding: 9px 14px; }
}

/* ---------- how I work (About): an open grid of picture cards with spring motion ----------
   No boxes: each card is a picture panel with its title and line below. Cards blur and spring in one after
   another; the pictures keep moving gently (notes float, circles breathe, syncs travel, the focus ring hops) and the
   panel tilts towards the cursor (main.js sets --rx/--ry). Reduced motion: still pictures. Light = solid, dark = lit. */
@property --hv-d { syntax: "<length>"; inherits: true; initial-value: 64px; }
.hw { --spring: cubic-bezier(.2, 1.3, .35, 1); display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(28px, 3vw, 48px) clamp(16px, 2vw, 32px); }
.hw-card { display: flex; flex-direction: column; gap: 12px; }
.hw-top { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding-bottom: 12px; border-bottom: 1px solid var(--line); }
.hw-k { font: 500 12px "Geist Mono", monospace; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.hv-wrap { position: relative; height: clamp(220px, 19vw, 270px); margin: 8px 0 12px; overflow: hidden; background: var(--soft); transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateY(var(--ly, 0px)); transition: transform .6s var(--spring), background-color .4s var(--ease), box-shadow .5s var(--ease); }
.hw-card:hover .hv-wrap { --ly: -6px; background: var(--tint); box-shadow: -8px 8px 0 var(--shade); }
.hw-card h3 { font-size: clamp(22px, 1.9vw, 28px); font-weight: 500; letter-spacing: -.015em; line-height: 1.15; }
.hw-line { font-size: 16px; line-height: 1.45; color: var(--text-2); }
.hv { position: absolute; inset: 0; }

/* research: notes around one insight */
.hv-research i { position: absolute; left: 50%; top: 50%; width: 40px; height: 30px; margin: -15px 0 0 -20px; display: grid; align-content: center; gap: 4px; padding: 0 7px; background: var(--paper); border: 1px solid var(--rule); transform: translate(var(--x), var(--y)) rotate(var(--r)); transition: transform .8s var(--spring), opacity .4s; }
.hv-research b { height: 2px; background: var(--rule); }
.hv-research b + b { width: 60%; }
.hv-insight { position: absolute; left: 50%; top: 50%; translate: -50% -50%; display: inline-flex; align-items: center; gap: 6px; padding: 8px 13px; background: var(--accent); color: var(--on-accent); border: 1.5px solid var(--ink); box-shadow: -3px 3px 0 var(--ink); font: 500 12px "Geist Mono", monospace; letter-spacing: .06em; text-transform: uppercase; transition: scale .6s var(--spring), opacity .3s; }
.hv-insight .ico { width: 14px; height: 14px; }
.hw-card:hover .hv-research i { transform: translate(calc(var(--x) * .4), calc(var(--y) * .4)) rotate(0deg); opacity: .5; }
.hw-card:hover .hv-insight { scale: 1.12; }

/* users & business: the overlap is the product */
.hv-balance { --r: 58px; }
.hv-c { position: absolute; top: calc(50% - 12px); width: calc(var(--r) * 2); height: calc(var(--r) * 2); margin-top: calc(var(--r) * -1); padding-top: calc(var(--r) * 2 + 8px); text-align: center; border: 1.5px solid var(--border-ui); border-radius: 50%; font: 500 11px "Geist Mono", monospace; letter-spacing: .04em; text-transform: uppercase; color: var(--ink); }
.hv-c.is-u { left: calc(50% - var(--hv-d) / 2 - var(--r)); }
.hv-c.is-b { left: calc(50% + var(--hv-d) / 2 - var(--r)); }
.hv-lens { position: absolute; top: calc(50% - 12px); left: calc(50% - var(--hv-d) / 2 - var(--r)); width: calc(var(--r) * 2); height: calc(var(--r) * 2); margin-top: calc(var(--r) * -1); border-radius: 50%; background: var(--accent); clip-path: circle(var(--r) at calc(var(--r) + var(--hv-d)) var(--r)); }
.hv-star { position: absolute; left: 50%; top: calc(50% - 12px); translate: -50% -50%; width: 26px; height: 26px; display: grid; place-items: center; border-radius: 50%; background: var(--ink); color: var(--paper); transition: scale .5s var(--spring); }
.hv-star .ico { width: 14px; height: 14px; }
.hv-balance { transition: --hv-d .8s var(--spring); }
.hw-card:hover .hv-balance { --hv-d: 40px; }
.hw-card:hover .hv-star { scale: 1.25; }

/* collaboration: three lanes that sync again and again */
.hv-collab { --lab: 76px; display: grid; align-content: center; gap: 28px; padding: 0 22px; }
.hv-collab p { display: flex; align-items: center; gap: 10px; font: 500 11px "Geist Mono", monospace; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }
.hv-collab p span { width: calc(var(--lab) - 10px); }
.hv-collab p i { flex: 1; height: 0; border-top: 1.5px dashed var(--rule); }
.hv-collab b { position: absolute; top: calc(50% - 33px); height: 66px; width: 10px; margin-left: -5px; left: calc(22px + var(--lab) + (100% - 44px - var(--lab)) * var(--p)); background: radial-gradient(circle, var(--accent) 0 3.5px, var(--ink) 3.6px 5px, transparent 5.1px), linear-gradient(var(--accent-deep), var(--accent-deep)) center / 2px 100% no-repeat; transform-origin: top; transition: transform .6s var(--spring); }
.hv-collab b::before, .hv-collab b::after { content: ""; position: absolute; left: 50%; width: 10px; height: 10px; margin-left: -5px; border-radius: 50%; background: var(--accent); border: 1.5px solid var(--ink); }
.hv-collab b::before { top: -5px; } .hv-collab b::after { bottom: -5px; }
.hv-collab s { position: absolute; left: 50%; top: 0; width: 6px; height: 6px; margin-left: -3px; border-radius: 50%; background: var(--ink); opacity: 0; }
.hw-card:hover .hv-collab b { transform: scaleY(1.1); }

/* accessibility: the focus ring hops between controls */
.hv-access { display: grid; place-content: center; justify-items: center; gap: 24px; }
.hv-btns { position: relative; display: flex; gap: 12px; }
.hv-btns span { width: 72px; padding: 8px 0; text-align: center; border: 1px solid var(--border-ui); background: var(--paper); font: 500 13px "Geist", sans-serif; color: var(--ink); }
.hv-btns .is-main { width: 104px; background: var(--ink); border-color: var(--ink); color: var(--paper); }
.hv-btns::after { content: ""; position: absolute; top: -5px; bottom: -5px; left: 79px; width: 114px; border: 2px solid var(--accent-deep); }
.hv-keys { display: flex; align-items: center; gap: 8px; }
.hv-keys kbd { min-width: 34px; padding: 4px 8px; text-align: center; border: 1px solid var(--border-ui); border-bottom-width: 3px; background: var(--paper); font: 500 12px "Geist Mono", monospace; color: var(--ink); }
.hv-aa { display: inline-flex; align-items: center; gap: 6px; margin-left: 6px; font: 500 12px "Geist Mono", monospace; color: var(--ink); }
.hv-aa b { padding: 2px 6px; background: var(--accent); color: var(--on-accent); font-weight: 500; }

@media (prefers-reduced-motion: no-preference) {
  /* entrance: blur + rise + slight scale, springing into place; then the title and line follow */
  .js .hw-card.rv { clip-path: none; transform: none; opacity: 0; filter: blur(12px); translate: 0 56px; scale: .96;
    transition: opacity .8s var(--ease), filter .8s var(--ease), translate 1.1s var(--spring), scale 1.1s var(--spring); transition-delay: var(--d, 0ms); }
  .js .hw-card.rv.in { opacity: 1; filter: blur(0); translate: 0 0; scale: 1; }
  .js .hw-card > :not(.hv-wrap) { opacity: 0; translate: 0 14px; transition: opacity .6s var(--ease), translate .8s var(--spring), background-color .25s; }
  .js .hw-card.in > h3 { transition-delay: calc(var(--d, 0ms) + 250ms); }
  .js .hw-card.in > .hw-line { transition-delay: calc(var(--d, 0ms) + 330ms); }
  .js .hw-card.in > :not(.hv-wrap) { opacity: 1; translate: 0 0; }

  /* pictures assemble... */
  .js .hw-card:not(.in) .hv-research i { transform: translate(0, 0) rotate(0deg) scale(.6); opacity: 0; }
  .js .hw-card:not(.in) .hv-insight { scale: .4; opacity: 0; }
  .js .hw-card.in .hv-insight { transition-delay: calc(var(--d, 0ms) + 700ms); }
  .js .hw-card:not(.in) .hv-balance { --hv-d: 170px; }
  .js .hw-card:not(.in) .hv-collab b { transform: scaleY(0); }
  .js .hw-card:not(.in) .hv-btns::after { opacity: 0; }
  .js .hw-card:hover .hv-insight { transition-delay: 0s; }

  /* ...then keep breathing */
  .hw-card.in .hv-research i { animation: hvFloat 3.6s ease-in-out calc(1.2s + var(--k, 0) * .3s) infinite alternate; }
  .hv-research i:nth-child(2n) { --k: 1; } .hv-research i:nth-child(3n) { --k: 2; } .hv-research i:nth-child(5n) { --k: 3; }
  .hw-card.in .hv-balance { animation: hvBreathe 3.2s ease-in-out 1.4s infinite alternate; }
  .hw-card.in:hover .hv-balance { animation: none; }
  .hw-card.in .hv-collab s { animation: hvSync 2.4s cubic-bezier(.6, 0, .4, 1) calc(1.2s + var(--i) * .5s) infinite; }
  .hv-collab b:nth-of-type(1) s { --i: 0; } .hv-collab b:nth-of-type(2) s { --i: 1; } .hv-collab b:nth-of-type(3) s { --i: 2; }
  .hw-card.in .hv-btns::after { animation: hvHop 3.2s var(--spring) 1.4s infinite; transition: opacity .3s; }
  .hw-card.in .hv-keys kbd:first-child { animation: hvKey 3.2s ease 1.4s infinite; }
}
@keyframes hvFloat { to { translate: 0 -6px; } }
@keyframes hvBreathe { from { --hv-d: 64px; } to { --hv-d: 82px; } }
@keyframes hvSync { 0% { top: 0; opacity: 0; } 15% { opacity: 1; } 85% { opacity: 1; } 100% { top: calc(100% - 6px); opacity: 0; } }
@keyframes hvHop { 0%, 40% { left: 79px; width: 114px; } 50%, 90% { left: -5px; width: 82px; } 100% { left: 79px; width: 114px; } }
@keyframes hvKey { 0%, 44%, 52%, 94%, 100% { translate: 0 0; border-bottom-width: 3px; } 47%, 97% { translate: 0 2px; border-bottom-width: 1px; } }

/* dark: the pictures sit on lit panels; fills glow */
[data-theme="dark"] .hv-wrap { background: var(--lit); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 22%, transparent); }
[data-theme="dark"] .hw-card:hover .hv-wrap { box-shadow: inset 0 0 0 1px var(--accent), 0 24px 50px -24px color-mix(in srgb, var(--accent) 70%, transparent); }
[data-theme="dark"] .hv-research i, [data-theme="dark"] .hv-btns span:not(.is-main), [data-theme="dark"] .hv-keys kbd { background: #15181b; }
[data-theme="dark"] .hv-research i { border-color: #343a40; }
[data-theme="dark"] .hv-research b { background: #3d444b; }
[data-theme="dark"] .hv-insight, [data-theme="dark"] .hv-lens, [data-theme="dark"] .hv-aa b { background: var(--lit-accent); color: #000; }
[data-theme="dark"] .hv-insight { border-color: #9fe6f5; box-shadow: 0 6px 22px -2px color-mix(in srgb, var(--accent) 75%, transparent); }
[data-theme="dark"] .hv-collab b::before, [data-theme="dark"] .hv-collab b::after { border-color: #9fe6f5; box-shadow: 0 0 10px var(--accent); }
[data-theme="dark"] .hv-collab b { background: radial-gradient(circle, var(--accent) 0 3.5px, #9fe6f5 3.6px 5px, transparent 5.1px), linear-gradient(var(--accent-deep), var(--accent-deep)) center / 2px 100% no-repeat; }
[data-theme="dark"] .hv-collab s { background: #c9f3fb; box-shadow: 0 0 10px var(--accent); }
[data-theme="dark"] .hv-btns::after { border-color: var(--accent); box-shadow: 0 0 12px color-mix(in srgb, var(--accent) 60%, transparent); }

/* award (About): the certificate is the hero of the section. It sits slightly tilted on a stage; on hover it
   straightens, lifts towards the cursor (main.js sets --rx/--ry) and the seal spins in. Caption sits beside it. */
.aw { display: grid; grid-template-columns: minmax(0, 2.2fr) minmax(0, 1fr); gap: clamp(28px, 4vw, 64px); align-items: end; margin: 0; }
.aw-stage { position: relative; display: grid; place-items: center; padding: clamp(32px, 5vw, 80px); background: var(--soft); perspective: 1200px; }
.aw-cert { position: relative; width: 100%; transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) rotate(-2deg); box-shadow: -10px 10px 0 var(--ink); transition: transform .6s cubic-bezier(.2, 1.3, .35, 1), box-shadow .5s var(--ease); }
.aw-cert img { display: block; width: 100%; height: auto; }
.aw-stage:hover .aw-cert { transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) rotate(0deg) translate(6px, -8px) scale(1.02); box-shadow: -18px 18px 0 var(--ink); }
.aw-seal { position: absolute; right: clamp(16px, 3vw, 44px); top: clamp(16px, 3vw, 44px); z-index: 2; width: 64px; height: 64px; display: grid; place-items: center; border-radius: 50%; background: var(--accent); color: var(--on-accent); border: 1.5px solid var(--ink); box-shadow: -3px 3px 0 var(--ink); scale: .4; opacity: 0; rotate: -120deg; transition: scale .5s cubic-bezier(.2, 1.3, .35, 1), rotate .6s cubic-bezier(.2, 1.3, .35, 1), opacity .25s; }
.aw-seal .ico { width: 30px; height: 30px; }
.aw-stage:hover .aw-seal { scale: 1; opacity: 1; rotate: 0deg; }
@media (hover: none) { .aw-seal { scale: 1; opacity: 1; rotate: 0deg; } }
.aw-cap { display: grid; gap: 14px; padding-bottom: 8px; border-top: 2px solid var(--ink); padding-top: 20px; }
.aw-org { font: 500 13px "Geist Mono", monospace; letter-spacing: .08em; text-transform: uppercase; color: var(--accent-deep); }
.aw-cap h3 { font-size: clamp(26px, 2.4vw, 36px); font-weight: 500; line-height: 1.1; letter-spacing: -.02em; text-transform: uppercase; }
.aw-text { font-size: 16px; line-height: 1.55; color: var(--text-2); }
[data-theme="dark"] .aw-stage { background: var(--lit); }
[data-theme="dark"] .aw-cert { box-shadow: -10px 10px 0 #000, 0 30px 60px -30px color-mix(in srgb, var(--accent) 60%, transparent); }
[data-theme="dark"] .aw-stage:hover .aw-cert { box-shadow: -18px 18px 0 #000, 0 40px 80px -30px color-mix(in srgb, var(--accent) 80%, transparent); }
[data-theme="dark"] .aw-seal { background: var(--lit-accent); color: #000; border-color: #9fe6f5; }
/* dark only: a light sweep across the certificate on hover */
[data-theme="dark"] .aw-cert::after { content: ""; position: absolute; inset: 0; background: linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, .28) 50%, transparent 65%) -150% 0 / 250% 100% no-repeat; pointer-events: none; transition: background-position .9s var(--ease); }
[data-theme="dark"] .aw-stage:hover .aw-cert::after { background-position: 150% 0; }
@media (prefers-reduced-motion: reduce) { .aw-cert, .aw-seal { transition: none; } }

/* ---------- case study ---------- */
.cs-hero { margin-top: -1px; }
.cs-cover { position: relative; overflow: hidden; aspect-ratio: 16 / 8.5; max-height: calc(82vh / var(--z, 1)); width: 100%; }
.cs-cover img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); }
.cs-cover:has(.cs-cover-link:hover) img { transform: scale(1.02); }
.cs-intro { align-items: start; }
.cs-intro-left { display: flex; flex-direction: column; align-items: flex-start; }
.cs-intro-left .head-box { width: 100%; margin-top: -1px; }
.chip-top { margin-top: 0; }
.cs-intro h1 { font-size: var(--fs-h2); font-weight: 500; text-transform: uppercase; line-height: 1.05; }
.cs-client { display: flex; align-items: center; gap: 10px; font-size: 15px !important; color: var(--muted); text-transform: uppercase; letter-spacing: .03em; }
.cs-client .ico { width: 18px; height: 18px; }
.cs-intro-right { margin-top: 48px; margin-left: -1px; }
.cs-intro-right .grid2 .btn { grid-column: 1; }
.cs-meta { margin-top: clamp(60px, 6vw, 96px); }
.cs-meta > div { padding: 24px 26px 28px; display: flex; flex-direction: column; gap: 4px; }
.cs-meta dt { font-size: 13px; font-weight: 500; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); margin-bottom: 10px; }
.cs-meta dd { font-size: 18px; }

.cs-blocks { display: grid; gap: clamp(48px, 5vw, 80px); }
.cs-text { align-items: start; }
.cs-sub { padding: 18px 22px; font-size: 17px; font-weight: 500; text-transform: uppercase; letter-spacing: .02em; line-height: 1.3; position: sticky; top: 24px; }
.cs-text .cs-sub + .prose { margin-left: -1px; }
.cs-sub-inline { display: inline-block; position: static; margin-bottom: -1px; }
.cs-text .prose:only-child { grid-column: 2 / 5; }

.cs-outcome .grid4 { align-items: stretch; }
.stat-box { background: var(--accent); color: var(--on-accent); padding: 26px; display: flex; flex-direction: column; justify-content: space-between; gap: 24px; min-height: 220px; }
.stat-box .big { font-size: clamp(56px, 6vw, 96px); font-weight: 700; line-height: .9; letter-spacing: -.03em; }
.stat-box p:last-child { font-size: 16px; font-weight: 500; text-transform: uppercase; }
.stat-box + .prose { margin-left: -1px; }
.cs-img { overflow: hidden; background: var(--soft); }
.cs-img img { width: 100%; }

.cs-cells .cell { padding: 26px; display: flex; flex-direction: column; gap: 8px; min-height: 220px; }
.cs-cells .big { font-size: clamp(48px, 4.6vw, 72px); font-weight: 700; line-height: 1; margin-bottom: auto; padding-bottom: 20px; text-shadow: -4px 4px 0 var(--shade); }
.cs-cells .cell-label { font-size: 18px; font-weight: 500; text-transform: uppercase; }
.cs-cells .cell p:last-child { color: var(--muted); font-size: 15px; }

.num-grid { display: grid; grid-template-columns: repeat(min(var(--n), 5), 1fr); }
.num-grid li { padding: 26px; display: flex; flex-direction: column; gap: 10px; min-height: 260px; }
.num-grid h4 { font-size: 20px; font-weight: 500; line-height: 1.25; margin-top: auto; padding-top: 20px; }
.num-grid p { font-size: 15.5px; color: var(--text-2); line-height: 1.5; }

.gallery { display: grid; gap: 24px; }
.gallery.cols-2 { grid-template-columns: repeat(2, 1fr); }

.soon { padding: clamp(32px, 5vw, 80px); display: grid; gap: 20px; }
.soon-big { font-size: clamp(56px, 9vw, 150px); font-weight: 700; line-height: .9; text-transform: uppercase; text-shadow: -6px 6px 0 var(--shade); }
.soon a { text-decoration: underline; text-underline-offset: 3px; }

/* ---------- contact ---------- */
.contact { align-items: stretch; }
.contact-left { margin-top: -1px; padding: clamp(28px, 3.4vw, 48px); display: flex; flex-direction: column; gap: 28px; }
.contact-left .display { font-size: clamp(56px, 8vw, 120px); }
.contact-mail { display: flex; align-items: center; gap: 12px; font-size: clamp(18px, 1.8vw, 26px); font-weight: 500; border-bottom: 1px solid var(--ink); padding-bottom: 8px; align-self: flex-start; transition: color .25s; word-break: break-all; }
.contact-mail:hover { color: var(--accent); }
.contact-mail .ico { width: 26px; height: 26px; flex: none; }
.contact-social { display: grid; grid-template-columns: 1fr 1fr; margin-top: auto; border-top: 1px solid var(--border); border-left: 1px solid var(--border); }
.contact-social a { display: flex; align-items: center; gap: 10px; padding: 16px 18px; border-right: 1px solid var(--border); border-bottom: 1px solid var(--border); text-transform: uppercase; font-size: 14px; font-weight: 500; transition: background-color .3s, color .3s; }
.contact-social a:hover { background: var(--tint); }
.contact-social .ico { width: 20px; height: 20px; }
.contact-form { margin-top: -1px; margin-left: -1px; padding: clamp(24px, 2.6vw, 36px); display: grid; gap: 22px; align-content: start; }
.field { display: grid; gap: 8px; border: 0; margin: 0; padding: 0; min-width: 0; }
.field > span, .field legend { font-size: 13px; font-weight: 500; text-transform: uppercase; letter-spacing: .05em; padding: 0; margin-bottom: 8px; }
.field em { font-style: normal; color: var(--muted); text-transform: none; letter-spacing: 0; }
.field input, .field textarea {
  font: inherit; font-size: 16px; color: var(--ink); background: var(--paper);
  border: 1px solid var(--border-ui); border-radius: 0; padding: 14px 16px; width: 100%;
  transition: box-shadow .25s;
}
.field textarea { resize: vertical; min-height: 130px; }
.field input:focus, .field textarea:focus { outline: none; box-shadow: -4px 4px 0 var(--accent); }
.field input::placeholder, .field textarea::placeholder { color: var(--placeholder); }
.checks { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 16px; }
.check { display: flex; align-items: center; gap: 12px; cursor: pointer; font-size: 15px; }
.check input { appearance: none; -webkit-appearance: none; width: 28px; height: 28px; margin: 0; border: 1px solid var(--border-ui); background: var(--paper); flex: none; display: grid; place-items: center; cursor: pointer; transition: background-color .2s; }
.check input:checked { background: var(--accent); }
.check input:checked::after { content: ""; width: 10px; height: 6px; border-left: 2px solid var(--on-accent); border-bottom: 2px solid var(--on-accent); transform: rotate(-45deg) translate(1px, -1px); }
.check input:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.contact-form .btn { width: 100%; height: 74px; cursor: pointer; }
.form-note { font-size: 14px; color: var(--muted); }
.form-error { font-size: 15px; color: var(--error); font-weight: 500; }

/* =========================================================
   Responsive
   ========================================================= */
@media (max-width: 1099px) {
  .hw { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  :root { --hdr-h: 76px; --gutter: 32px; --hdr-top: 32px; }
  .caps { grid-template-columns: repeat(2, 1fr); }
  .sec-head .head-box.c1-2 { grid-column: 1 / 4; }
  .faq .faq-head { grid-column: 1 / -1; position: static; }
  .faq .faq-list { grid-column: 1 / -1; margin-top: 48px; }
  .about-quote.c2-4 { grid-column: 2 / 5; }
  .about-prev .about-img { grid-column: 1; }
  .num-grid { grid-template-columns: repeat(min(var(--n), 3), 1fr); }
  .xp-period { grid-column: 4; }
  .hx-meta { padding: 0 16px; font-size: 12px; letter-spacing: .04em; }
}

@media (max-width: 809px) {
  .ship, .tools { grid-template-columns: 1fr; }
  .ship > * { grid-column: 1 !important; grid-row: auto !important; }
  .ship-track { grid-template-columns: 1fr 1fr; }
  .ship-track li:nth-child(even) { border-left: 1px solid var(--border); }
  .ship-track li:nth-child(odd) { border-left: 0; }
  .ship-track li:nth-child(n+3) { border-top: 1px solid var(--border); }
  :root { --gutter: 16px; --hdr-h: 64px; --hdr-top: 16px; --sec: 136px; --sec-tight: 96px; }

  .grid4, .grid2, .site-header, .menu-inner { grid-template-columns: 1fr; }
  .grid4 > *, .grid2 > * { grid-column: 1 / -1 !important; }
  .site-header { grid-template-columns: 1fr var(--hdr-h); }
  .site-header .logo { grid-column: 1; justify-self: start; padding: 0 20px; }
  .hdr-cta { display: none; }
  .hdr-nav { display: none !important; }
  .site-header { grid-template-columns: 1fr var(--hdr-h) !important; padding-right: 0 !important; }
  :root[data-hdr]{ --hdr-top: 20px; }
  [data-hdr] .hdr-tick{ display: none; }
  [data-hdr] .hdr-res{ display: inline-flex; margin-left: auto; padding-left: 0; border: 0; font-size: 14px; }
  [data-hdr] .site-header{ display: flex !important; padding: 0 calc(var(--hdr-h) + 16px) 0 16px !important; }
  [data-hdr] .site-header .logo{ padding: 0; }
  .hdr-res-tag { display: none; }
  .menu .logo { justify-self: start; padding: 0 20px; }

  .display { text-shadow: -3px 3px 0 var(--shade); }
  .hx { grid-template-columns: 1fr 1fr; grid-template-rows: 48px auto auto auto 74px; grid-template-areas: "m1 m1" "t t" "a a" "l l" "c c"; }
  .hx > :nth-child(n+2):nth-child(-n+4) { display: none; }
  .hl-in { white-space: normal; }
  .hx-meta { padding: 0 16px; font-size: 11px; letter-spacing: .04em; }
  .hx-title { padding: 40px 20px 32px; font-size: clamp(30px, 9.4vw, 46px); }
  .hx-aside { aspect-ratio: 4 / 4.4; max-height: 72vh; width: 100%; }
  .hx-aside-big { aspect-ratio: auto; min-height: 220px; padding: 24px 20px; }
  .hx-lede { padding: 28px 20px; }
  .hx-cta .btn-face { align-items: center; padding-bottom: 0; }
  .btn-face { padding: 0 20px; }
  .tab { width: 100%; }

  .sec-head { margin-bottom: 40px; gap: 0; }
  .sec-head .btn { margin-top: -1px; }
  .sec-head .icon-tab { display: none; }

  .stats { grid-template-columns: 1fr 1fr; }
  .stats > * { grid-column: auto !important; }
  .stat { min-height: 160px; }

  .caps { grid-template-columns: 1fr; }
  .caps > * { grid-column: auto !important; }
  .cap { display: flex; flex-direction: column; grid-row: auto; }
  .cap-top { margin-bottom: 8px; }
  .cap h3 { margin-bottom: 20px; max-width: none; }

  .cards { grid-template-columns: 1fr; }
  .card-title { padding: 14px 18px; }

  .about-quote { margin-left: 0; margin-top: -1px; }
  .about-img img { aspect-ratio: 4 / 4.4; }

  .xp-row { grid-template-columns: 1fr; }
  .xp-row > * { padding: 18px 20px; }
  .xp-years { padding-bottom: 0 !important; color: var(--muted); }
  .xp-main { grid-column: 1; border: 0; padding-top: 8px !important; }
  .xp-period { display: none; }
  .xp:not(.xp-detailed) .xp-co { display: block; }
  .xp:not(.xp-detailed) .xp-row > * { padding-block: 18px; }

  .t-nav { margin-top: -1px; justify-content: flex-start; }
  .t-card { min-height: 340px; padding: 22px; }

  .faq .faq-list { margin-top: 32px; }
  .faq-a { padding: 0 20px 22px 20px; }
  .faq-item summary { grid-template-columns: auto 1fr 56px; }
  .faq-n { padding-left: 16px; }
  .faq-q { padding: 16px 14px; }

  .foot-col { border-left: 0; border-top: 1px solid var(--border); }
  .foot-social, .menu-social, .about-social { grid-template-columns: 1fr 1fr; }
  .foot-social > *, .menu-social > *, .about-social > * { grid-column: auto !important; }
  .menu-social .btn:nth-child(odd) { margin-left: 0; }
  .foot-social a, .about-social a { margin: -1px 0 0 -1px; }
  .foot-social a:nth-child(odd), .about-social a:nth-child(odd) { margin-left: 0; }
  .foot-social a:nth-child(-n+2), .about-social a:nth-child(-n+2) { margin-top: 0; }
  .foot-bar { grid-template-columns: 56px 1fr 56px; font-size: 12px; }
  .foot-ico { height: 56px; }

  .about-body, .cs-intro-right { margin-top: 32px; margin-left: 0; }
  .aw { grid-template-columns: minmax(0, 1fr); }
  .hw { grid-template-columns: minmax(0, 1fr); }

  .cs-cover { aspect-ratio: 4 / 3; }
  .cs-meta { grid-template-columns: 1fr 1fr; }
  .cs-meta > * { grid-column: auto !important; }
  .cs-sub { position: static; display: inline-block; justify-self: start; margin-bottom: -1px; }
  .cs-text .cs-sub + .prose { margin-left: 0; }
  .stat-box { min-height: 0; }
  .stat-box + .prose { margin-left: 0; margin-top: -1px; }
  .cs-cells { grid-template-columns: 1fr 1fr; }
  .cs-cells > * { grid-column: auto !important; }
  .cs-cells .cell { min-height: 180px; padding: 20px; }
  .num-grid { grid-template-columns: 1fr; }
  .num-grid li { min-height: 0; }
  .num-grid h4 { margin-top: 8px; padding-top: 0; }
  .gallery.cols-2 { grid-template-columns: 1fr; }
  .gallery { gap: 16px; }

  .contact-form { margin-left: 0; }
  .checks { grid-template-columns: 1fr; }
  .contact-left .display { font-size: 64px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .js .rv { opacity: 1; transform: none; filter: none; clip-path: none; }
  .js .rv img, .js .stagger > * { scale: 1; translate: none; opacity: 1; }
  .js .head-box h2 .wi { transform: none; }
  .about-img img, .giant { animation: none !important; }
  .js .split.is-split .ch { opacity: 1; filter: none; transform: none; animation: none; }
  .js .hl-in, .js .mark::before { transform: none; animation: none; }
  .js .mark-t { color: var(--on-fill); background: none; animation: none; }
  .js .hx-aside::after { display: none; }
  .js .hx-media img, .js .hx-meta, .js .hx-lede, .js .hx > .hx-cta { opacity: 1; transform: none; animation: none; }
  .marquee-track { animation: none !important; }
  .hdr-tick-in, .hx-cta .btn-face > span { animation: none !important; }
  .marquee { overflow-x: auto; }
}

/* Type system: body copy and labels in Geist Mono (the "code" voice);
   headlines, big titles, numbers and buttons in Geist */
h1, h2, h3, h4, .display, .hx-title, .hx-big, .stat-num, .big, .soon-big, .giant, .ship-title, .ship-big,
.btn, .logo, .menu li a, .about-quote p, .cs-sub, .cs-cells .cell-label {
  font-family: "Geist", "Helvetica Neue", Arial, sans-serif;
}
/* mono runs wide: tighten body sizes a touch */
body { font-size: calc(var(--fs-body) * .94); }
.lede { font-size: calc(var(--fs-lede) * .86); letter-spacing: -.01em; }
/* hero lede stays quiet so the headline and photo lead */
.hx-lede { font-size: clamp(15px, 1.2vw, 17px); line-height: 1.55; color: var(--text-2); letter-spacing: -.01em; }
.hx-meta, .eyebrow, .ship-eyebrow, .ship-k, .ship-s, .tools-list li, .cs-meta dt, .field > span, .field legend, .hx-big-label, .xp-period {
  font-family: "Geist Mono", ui-monospace, monospace; letter-spacing: .02em;
}

/* =========================================================
   Dark theme: big flat fills become lit surfaces (light theme stays solid).
   Contrast: glows on tint are capped at 18% where muted text sits (muted stays 4.6:1+), 24% where only --ink does.
   ========================================================= */
/* hero: the highlighted word is a teal-to-deep-teal gradient bar with a soft glow */
[data-theme="dark"] .mark::before {
  background: linear-gradient(115deg, #2696b2 0%, #17728a 45%, #0d4554 100%); /* white text 3.5:1 at the lightest end (large-text AA) */
  box-shadow: -.07em .07em 0 var(--mark-shadow), 0 .12em .7em -.1em color-mix(in srgb, var(--accent) 45%, transparent);
}
[data-theme="dark"] .hx-title:hover .mark::before { box-shadow: -.12em .12em 0 var(--mark-shadow), 0 .16em .9em -.1em color-mix(in srgb, var(--accent) 55%, transparent); }
[data-theme="dark"] .hx-title { background: radial-gradient(70% 90% at 0% 100%, color-mix(in srgb, var(--accent) 12%, transparent), transparent 65%), var(--paper); }
/* tint panels */
[data-theme="dark"] .foot-cta { background: radial-gradient(90% 120% at 0% 100%, color-mix(in srgb, var(--accent) 24%, transparent), transparent 65%), var(--tint); }
[data-theme="dark"] .hx-aside-big { background: radial-gradient(100% 80% at 100% 0%, color-mix(in srgb, var(--accent) 24%, transparent), transparent 65%), var(--tint); }
[data-theme="dark"] .cover-art {
  background: radial-gradient(70% 90% at 80% 120%, color-mix(in srgb, var(--accent) 28%, transparent), transparent 70%),
    linear-gradient(170deg, #145a6c, #0b2830);
}
[data-theme="dark"] .cover-soon { background: radial-gradient(60% 60% at 50% 45%, color-mix(in srgb, var(--accent) 18%, transparent), transparent 70%), var(--tint); }
[data-theme="dark"] .cap-proof { background: linear-gradient(90deg, color-mix(in srgb, var(--accent) 18%, var(--paper)), var(--tint) 70%); }
[data-theme="dark"] .cap:hover .cap-proof { background: transparent; } /* let the lit hover surface show through */
[data-theme="dark"] .stat-box { background: linear-gradient(150deg, #5ccde6 0%, #3bb4d0 45%, #2a9fbb 100%); } /* black text 6.8:1+ */
/* flagship case study */
[data-theme="dark"] .fx-after { background: radial-gradient(90% 100% at 100% 0%, color-mix(in srgb, var(--accent) 22%, transparent), transparent 65%), var(--tint); }
[data-theme="dark"] .fx-cta { background: radial-gradient(70% 140% at 100% 50%, color-mix(in srgb, var(--accent) 24%, transparent), transparent 70%), var(--tint); }
[data-theme="dark"] .fx-viz--ai { background: radial-gradient(70% 80% at 50% 110%, color-mix(in srgb, var(--accent) 30%, transparent), transparent 70%), var(--tint); }
[data-theme="dark"] .fx-viz--launch { background: radial-gradient(80% 80% at 100% 0%, color-mix(in srgb, var(--accent) 35%, transparent), transparent 65%), linear-gradient(170deg, #17728a, #0b2e38); }
[data-theme="dark"] .fx-viz--sheet { background: linear-gradient(180deg, #1b1f23, var(--soft)); }
[data-theme="dark"] .fx-map {
  background: radial-gradient(color-mix(in srgb, var(--ink) 9%, transparent) 1px, transparent 1.2px) 0 0 / 16px 16px,
    radial-gradient(70% 90% at 50% 120%, color-mix(in srgb, var(--accent) 14%, transparent), transparent 70%), var(--soft);
}

/* Dark theme hovers: no flat tint or flat cyan. Big surfaces light up like the step illustrations (--lit),
   cyan fills become a cyan gradient (--lit-accent). Hover-only rules skip touch screens so nothing sticks after a tap. */
@media (hover: hover) {
  [data-theme="dark"] .sq:hover:not(:disabled),
  [data-theme="dark"][data-hdr] .hdr-nav a:hover,
  [data-theme="dark"].js[data-hdr] .theme-btn:hover,
  [data-theme="dark"] .menu li a:hover,
  [data-theme="dark"] .hx-meta:hover,
  [data-theme="dark"] .tools-list li:hover,
  [data-theme="dark"] .cap:hover,
  [data-theme="dark"] .xp:not(.xp-detailed) .xp-row:hover,
  [data-theme="dark"] .contact-social a:hover { background: var(--lit); }
  [data-theme="dark"] .flow li:hover .viz-wrap {
    background:
      radial-gradient(70% 90% at 50% 115%, color-mix(in srgb, var(--accent) 55%, transparent), transparent 70%),
      radial-gradient(color-mix(in srgb, var(--ink) 16%, transparent) 1px, transparent 1.2px) 0 0 / 14px 14px,
      #1d2024;
  }
  [data-theme="dark"] .card:hover .card-title { background: var(--lit); color: var(--ink); }
  [data-theme="dark"] .card:hover .card-title p { color: var(--muted); }
  [data-theme="dark"] .btn:hover, [data-theme="dark"] .btn-soc:hover, [data-theme="dark"] .card:hover .card-media, [data-theme="dark"] .faq-item summary:hover .faq-plus, [data-theme="dark"] .foot-ico:hover, [data-theme="dark"] .hdr-res:hover .hdr-res-tag { background: var(--lit-accent); }
  /* buttons: the lifted face becomes a lit panel over the cyan-gradient base */
  [data-theme="dark"] .btn:hover .btn-face, [data-theme="dark"] .menu-btn:hover .menu-face { background: var(--lit); }
  [data-theme="dark"] .btn-dark:hover .btn-face { background: var(--lit-accent); }
  [data-theme="dark"][data-hdr] .menu-btn:hover { background: var(--lit-accent); }
}
[data-theme="dark"] .btn:focus-visible .btn-face { background: var(--lit); }
[data-theme="dark"] .btn:focus-visible, [data-theme="dark"] .btn-soc:focus-visible,
[data-theme="dark"] .faq-item[open] .faq-plus { background: var(--lit-accent); }
[data-theme="dark"] .menu li a[aria-current="page"] { background: var(--lit); }

/* =========================================================
   Flagship case study (src/flagship.mjs) — prefix fx-
   Few boxes: hairlines and fills do the grouping; borders only frame screens and the CTA.
   ========================================================= */
.fx-k { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 500; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); }
.fx-intro h1, .fx-facts dt, .fx-story h3, .fx-viz-cal strong, .fx-head h2, .fx-num, .fx-when, .fx-ba li, .fx-card h3,
.fx-owned h3, .fx-time h3, .fx-pn, .fx-q blockquote, .fx-cta p, .fx-lede { font-family: "Geist", "Helvetica Neue", Arial, sans-serif; }

/* section heads without boxes */
.fx-head { display: grid; gap: 14px; max-width: 760px; margin-bottom: clamp(32px, 3.4vw, 52px); }
.fx-head-n { font: 500 13px "Geist Mono", monospace; color: var(--accent-deep); }
.fx-head h2 { font-size: var(--fs-h2); font-weight: 500; line-height: 1; text-transform: uppercase; letter-spacing: -.01em; }
.fx-head p { font-size: clamp(16px, 1.3vw, 19px); color: var(--text-3); line-height: 1.5; max-width: 52ch; }

/* intro */
.fx-top { padding-top: clamp(8px, 1vw, 16px); }
.fx-intro { display: grid; grid-template-columns: 1.1fr 1fr; gap: clamp(28px, 4vw, 72px); align-items: end; }
.fx-intro-l { display: grid; gap: 16px; justify-items: start; }
.fx-tag { display: inline-block; padding: 7px 12px; background: var(--tint); font-size: 13px; }
.fx-intro h1 { font-size: clamp(56px, 7.4vw, 116px); font-weight: 500; line-height: .9; letter-spacing: -.03em; text-transform: uppercase; }
.fx-client { display: flex; align-items: center; gap: 10px; font-size: 14px; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.fx-client .ico { width: 18px; height: 18px; }
.fx-lede { font-size: clamp(20px, 1.9vw, 28px); line-height: 1.3; font-weight: 400; letter-spacing: -.01em; max-width: 30ch; padding-bottom: 8px; }

/* one-glance facts: big words, hairlines only */
.fx-facts { display: grid; grid-template-columns: repeat(4, 1fr); margin-top: clamp(48px, 5vw, 80px); border-top: 1px solid var(--border); }
.fx-facts > div { padding: 22px 24px 4px 0; display: grid; gap: 8px; align-content: start; }
.fx-facts > div + div { padding-left: 24px; border-left: 1px solid var(--line); }
.fx-facts dt { font-size: clamp(40px, 4.2vw, 64px); font-weight: 500; line-height: 1; letter-spacing: -.04em; }
.fx-facts .is-acc dt { color: var(--accent-deep); }
.fx-facts dd { margin: 0; font-size: 14px; color: var(--muted); line-height: 1.4; max-width: 24ch; }

/* the story in three illustrated steps */
.fx-story { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(20px, 2.4vw, 40px); margin-top: clamp(56px, 6vw, 96px); counter-reset: s; }
.fx-story li { position: relative; display: grid; gap: 10px; align-content: start; }
.fx-story li + li::before { content: ""; position: absolute; top: 90px; left: calc(-1 * clamp(20px, 2.4vw, 40px)); width: clamp(20px, 2.4vw, 40px); height: 1px; background: var(--ink); }
.fx-story h3 { font-size: clamp(22px, 2vw, 30px); font-weight: 500; line-height: 1.1; letter-spacing: -.015em; }
.fx-story p { font-size: 15px; color: var(--muted); }
.fx-viz { height: 180px; display: grid; place-items: center; margin-bottom: 10px; overflow: hidden; }
.fx-viz--sheet { background: var(--soft); }
.fx-viz--ai { background: var(--tint); }
.fx-viz--launch { background: var(--accent-fill); }

.fx-viz-sheet { position: relative; display: grid; grid-template-columns: repeat(4, 34px); gap: 3px; transform: rotate(-4deg); }
.fx-viz-sheet i { height: 18px; background: var(--paper); border: 1px solid var(--rule); }
.fx-viz-sheet i.f { background: var(--rule); }
.fx-viz-sheet b { position: absolute; right: -18px; top: -18px; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: var(--paper); border: 1px solid var(--ink); font: 700 22px "Geist", sans-serif; color: var(--warn); }

.fx-viz-ai { width: 210px; padding: 14px; background: var(--paper); border: 1px solid var(--ink); display: grid; gap: 7px; box-shadow: -6px 6px 0 var(--shade); }
.fx-viz-ai-k { display: flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 500; color: var(--accent-deep); text-transform: uppercase; letter-spacing: .06em; }
.fx-viz-ai-k .ico { width: 14px; height: 14px; }
.fx-viz-ai i { height: 6px; background: var(--rule-2); }
.fx-viz-ai i.s { width: 60%; }
.fx-viz-ai-b { display: flex; gap: 6px; margin-top: 4px; }
.fx-viz-ai-b em { font-style: normal; font-size: 11px; padding: 4px 8px; border: 1px solid var(--accent-deep); color: var(--accent-deep); }
.fx-viz-ai-b em:first-child { background: var(--accent-fill); border-color: var(--accent-fill); color: var(--on-fill); }
.in .fx-viz-ai-b em:first-child { animation: fxTap 3s ease-in-out 1s infinite; }
@keyframes fxTap { 0%, 80%, 100% { transform: scale(1); } 88% { transform: scale(.92); } }

.fx-viz-cal { width: 120px; background: var(--paper); text-align: center; display: grid; box-shadow: -6px 6px 0 var(--shade-2); }
.fx-viz-cal span { padding: 7px 0; background: var(--ink); color: var(--paper); font-size: 12px; letter-spacing: .06em; text-transform: uppercase; }
.fx-viz-cal strong { font-size: 64px; font-weight: 700; line-height: 1; padding: 10px 0 2px; letter-spacing: -.04em; }
.fx-viz-cal em { font-style: normal; font-size: 11px; color: var(--muted); padding-bottom: 10px; }

/* problem: before → after (fills, no borders) */
.fx-ba { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.fx-ba > div { padding: clamp(24px, 2.6vw, 40px); display: flex; flex-direction: column; gap: 22px; }
.fx-before { background-color: var(--soft); background-image: linear-gradient(var(--rule-2) 1px, transparent 1px), linear-gradient(90deg, var(--rule-2) 1px, transparent 1px); background-size: 100% 52px, 25% 100%; }
.fx-after { background: var(--tint); }
.fx-ba ul { display: grid; gap: 4px; }
.fx-ba li { display: flex; gap: 14px; align-items: center; min-height: 48px; font-size: clamp(20px, 1.9vw, 28px); font-weight: 500; line-height: 1.15; letter-spacing: -.01em; }
.fx-before li { color: var(--struck); text-decoration: line-through; text-decoration-thickness: 1.5px; text-decoration-color: color-mix(in srgb, var(--struck) 55%, transparent); }
.fx-after .ico { width: 24px; height: 24px; flex: none; color: var(--accent-deep); }
.fx-ba-arrow { position: absolute; left: 50%; top: 50%; translate: -50% -50%; z-index: 2; width: 56px; height: 56px; display: grid; place-items: center; border-radius: 50%; background: var(--accent); color: var(--on-accent); box-shadow: 0 0 0 6px var(--paper); }
.fx-ba-arrow .ico { width: 24px; height: 24px; }

/* the hard part */
.fx-map { padding: clamp(20px, 2.4vw, 36px); background: var(--soft); }
.fx-map-scroll { overflow-x: auto; }
.fx-map-svg { display: block; width: 100%; min-width: 760px; height: auto; font-family: "Geist", sans-serif; }
.fx-node rect { fill: var(--paper); stroke: var(--ink); stroke-width: 1.2; }
.fx-node text { font-size: 17px; font-weight: 500; text-anchor: middle; fill: var(--ink); }
.fx-node-x rect { fill: var(--tint); }
.fx-node-x text { font-size: 15px; font-weight: 400; }
.fx-start { fill: var(--accent); stroke: var(--soft); stroke-width: 3; transform-box: fill-box; transform-origin: center; }
.fx-map.in .fx-start { animation: fxPulse 2.4s ease-in-out calc(var(--i, 0) * .18s + .6s) infinite; }
@keyframes fxPulse { 0%, 70%, 100% { transform: scale(1); } 35% { transform: scale(1.45); } }
.fx-arrow { stroke: var(--ink); stroke-width: 1.2; fill: none; }
#fx-ah path { fill: var(--ink); }
.fx-link path { stroke: var(--accent-deep); stroke-width: 1.2; stroke-dasharray: 4 4; fill: none; }
.fx-bracket path { stroke: var(--muted); fill: none; stroke-width: 1; }
.fx-bracket text { font-family: "Geist Mono", monospace; font-size: 12px; letter-spacing: .06em; fill: var(--muted); text-anchor: middle; }
.fx-map figcaption { display: flex; align-items: center; gap: 10px; margin-top: 16px; font-size: 14px; color: var(--text-3); }
.fx-dot { width: 12px; height: 12px; border-radius: 50%; background: var(--accent); flex: none; }

/* how AI solves it: text beside the screen, alternating */
.fx-pairs { display: grid; gap: clamp(72px, 7vw, 120px); }
.fx-pair { display: grid; grid-template-columns: 1fr 3fr; gap: clamp(24px, 3vw, 56px); align-items: center; }
.fx-pair.is-flip { grid-template-columns: 3fr 1fr; }
.fx-pair.is-flip .fx-card { order: 2; }
.fx-card { display: flex; flex-direction: column; gap: 12px; }
.fx-num { font-size: clamp(48px, 4.4vw, 68px); font-weight: 700; line-height: .9; letter-spacing: -.04em; color: var(--accent-type); margin-bottom: 8px; }
.fx-prob { display: grid; gap: 4px; font-size: 14px; line-height: 1.45; color: var(--muted); padding-bottom: 14px; border-bottom: 1px solid var(--line); }
.fx-prob span { font-size: 11px; font-weight: 500; text-transform: uppercase; letter-spacing: .08em; color: var(--warn); }
.fx-card h3 { font-size: clamp(22px, 1.9vw, 28px); font-weight: 500; line-height: 1.12; letter-spacing: -.01em; }
.fx-text { font-size: 15px; line-height: 1.5; color: var(--text-2); }
.fx-chip { align-self: flex-start; display: inline-flex; align-items: center; gap: 8px; margin-top: 6px; padding: 7px 12px; background: var(--tint); font-size: 13px; font-weight: 500; }
.fx-chip .ico { width: 16px; height: 16px; color: var(--accent-deep); }
.fx-shot { border: 1px solid var(--border); overflow: hidden; background: var(--soft); }
.fx-shot img { width: 100%; }
.fx-payoff { margin-top: clamp(72px, 7vw, 120px); display: grid; gap: 18px; }
.fx-payoff figcaption { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 16px; font-size: clamp(17px, 1.4vw, 20px); }

/* role: hairline list, timeline as a rail */
.fx-owned { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--border); }
.fx-owned li { padding: 20px 24px 8px 0; display: grid; gap: 14px; align-content: start; }
.fx-owned li + li { padding-left: 24px; border-left: 1px solid var(--line); }
.fx-owned h3 { font-size: clamp(19px, 1.6vw, 24px); font-weight: 500; line-height: 1.2; }
.fx-note { display: flex; gap: 10px; align-items: center; margin-top: 24px; font-size: 14px; color: var(--muted); }
.fx-note .ico { width: 18px; height: 18px; flex: none; color: var(--accent-deep); }
.fx-time { position: relative; display: grid; grid-template-columns: repeat(5, 1fr); gap: 20px; margin-top: clamp(56px, 6vw, 96px); }
.fx-time::before { content: ""; position: absolute; left: 0; right: 0; top: 37px; height: 1px; background: var(--ink); }
.fx-time li { position: relative; display: grid; gap: 6px; align-content: start; }
.fx-when { font-size: 15px; font-weight: 500; height: 22px; }
.fx-pin { width: 13px; height: 13px; border-radius: 50%; background: var(--paper); border: 1.5px solid var(--ink); margin: 2px 0 12px; position: relative; z-index: 1; }
.fx-time .is-now .fx-pin { background: var(--accent); border-color: var(--accent); box-shadow: 0 0 0 5px color-mix(in srgb, var(--accent) 22%, transparent); }
.fx-time .is-now .fx-when { color: var(--accent-deep); }
.fx-time h3 { font-size: 19px; font-weight: 500; line-height: 1.2; }
.fx-time p { font-size: 14px; color: var(--muted); }

/* partners, quote, invite */
.fx-partners { display: flex; flex-wrap: wrap; gap: 18px clamp(28px, 4vw, 64px); padding-bottom: clamp(32px, 3vw, 48px); border-bottom: 1px solid var(--line); }
.fx-partners li { display: grid; gap: 4px; }
.fx-pn { font-size: clamp(22px, 2vw, 30px); font-weight: 500; letter-spacing: -.02em; }
.fx-pr { font-size: 12px; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; }
.fx-q { margin-top: clamp(40px, 4vw, 64px); display: grid; gap: 18px; max-width: 900px; }
.fx-q .ico { width: 34px; height: 34px; color: var(--accent); }
.fx-q blockquote { margin: 0; font-size: clamp(28px, 3vw, 44px); font-weight: 500; line-height: 1.15; letter-spacing: -.02em; }
.fx-q figcaption { font-size: 14px; color: var(--muted); }
.fx-q figcaption strong { color: var(--ink); font-weight: 500; }
.fx-cta { margin-top: clamp(56px, 6vw, 96px); display: grid; grid-template-columns: 3fr 1fr; align-items: stretch; background: var(--tint); }
.fx-cta p { padding: clamp(24px, 2.6vw, 40px); font-size: clamp(20px, 1.8vw, 26px); font-weight: 500; line-height: 1.3; max-width: 40ch; }
.fx-cta .btn { border-width: 0 0 0 1px; min-height: 100%; }

@media (max-width: 1099px) {
  .fx-intro { grid-template-columns: 1fr; align-items: start; }
  .fx-facts, .fx-owned { grid-template-columns: 1fr 1fr; }
  .fx-facts > div:nth-child(3), .fx-owned li:nth-child(3) { padding-left: 0; border-left: 0; }
  .fx-facts > div:nth-child(n+3), .fx-owned li:nth-child(n+3) { border-top: 1px solid var(--line); margin-top: 12px; }
  .fx-pair, .fx-pair.is-flip { grid-template-columns: 1fr; }
  .fx-pair.is-flip .fx-card { order: 0; }
  .fx-time { grid-template-columns: repeat(3, 1fr); row-gap: 40px; }
  .fx-time::before { display: none; }
}
@media (max-width: 809px) {
  .fx-story { grid-template-columns: 1fr; gap: 40px; }
  .fx-story li + li::before { display: none; }
  .fx-viz { height: 160px; }
  .fx-facts dt { font-size: 40px; }
  .fx-facts > div { padding-right: 12px; }
  .fx-facts > div + div { padding-left: 14px; }
  .fx-ba { grid-template-columns: 1fr; }
  .fx-ba-arrow { width: 44px; height: 44px; rotate: 90deg; }
  .fx-ba li { font-size: 19px; min-height: 40px; }
  .fx-before { background-size: 100% 44px, 50% 100%; }
  .fx-owned { grid-template-columns: 1fr; }
  .fx-owned li, .fx-owned li + li { padding: 16px 0; border-left: 0; margin-top: 0; }
  .fx-owned li + li { border-top: 1px solid var(--line); }
  .fx-time { grid-template-columns: 1fr; row-gap: 0; }
  .fx-time li { grid-template-columns: 22px 1fr; column-gap: 14px; padding-bottom: 22px; border-left: 0; }
  .fx-time li > :not(.fx-pin) { grid-column: 2; }
  .fx-time .fx-pin { grid-row: 1 / 4; grid-column: 1; margin: 4px 0 0; }
  .fx-when { height: auto; }
  .fx-cta { grid-template-columns: 1fr; }
  .fx-cta .btn { border-width: 1px 0 0; min-height: 64px; }
  .fx-note { align-items: flex-start; }
}
@media (prefers-reduced-motion: reduce) { .fx-map.in .fx-start, .in .fx-viz-ai-b em:first-child { animation: none; } }

/* =========================================================
   ImpactAIQ case study (src/impactaiq-public.mjs) — prefix px-, illustration frames mk-
   Colour roles: AI = cyan (tint + dashed accent-deep), people / evidence = ink, gaps = --warn.
   Light = solid, dark = lit gradients.
   ========================================================= */

/* ---------- cover: the launch page live (main.js scrolls it to the product-tour video) ----------
   The view spans the full page width and keeps the launch page's proportions (1440 × --vh site px). A second, clipped copy of the page (.px-frame-nav) keeps the site's sticky header on top. */
.px-frame { overflow: hidden; background: var(--paper); width: 100%; } /* always the full width of the header */
.px-frame-bar { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-bottom: 1px solid var(--border); font: 500 13px "Geist Mono", monospace; }
.px-frame-dots { display: flex; gap: 6px; }
.px-frame-dots i { width: 10px; height: 10px; border-radius: 50%; border: 1px solid var(--border); }
.px-frame-url { flex: 1; min-width: 0; padding: 5px 12px; background: var(--soft); color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.px-frame-live { display: inline-flex; align-items: center; gap: 8px; color: var(--accent-deep); font: 500 13px "Geist Mono", monospace; text-transform: uppercase; letter-spacing: .06em; }
.px-frame-live i { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); }
@media (prefers-reduced-motion: no-preference) { .px-frame-live i { animation: pxPulse 2s ease-in-out infinite; } }
@keyframes pxPulse { 50% { opacity: .3; } }
.px-frame-view { position: relative; overflow: hidden; aspect-ratio: 1440 / 745; background: #fff; }
.px-frame-view iframe { position: absolute; left: 0; top: 0; width: 1440px; max-width: none; border: 0; pointer-events: none; transform-origin: 0 0; transform: scale(var(--k, .85)); }
.px-frame-view .px-frame-page { transform: scale(var(--k, .85)) translateY(calc(var(--y, 0) * -1px)); will-change: transform; }
.px-frame-nav { position: absolute; inset: 0 0 auto; z-index: 1; height: calc(var(--nav, 76) * var(--k, .85) * 1px); overflow: hidden; transition: box-shadow .3s; }
.px-frame-view.is-scrolled .px-frame-nav { box-shadow: 0 2px 10px rgba(0, 0, 0, .08); }
.px-frame-link { position: absolute; inset: 0; z-index: 2; }
/* the "Go to link" tag: follows the cursor on mouse devices (.is-follow, set in main.js), else sits bottom-right */
.px-go-tag { position: absolute; right: clamp(14px, 2vw, 24px); bottom: clamp(14px, 2vw, 24px); display: inline-flex; align-items: center; gap: 10px; padding: 12px 16px; background: var(--accent); color: var(--on-accent); font: 500 14px "Geist", sans-serif; letter-spacing: .02em; text-transform: uppercase; white-space: nowrap; box-shadow: -4px 4px 0 var(--ink); opacity: 0; translate: 0 8px; transition: opacity .2s, translate .2s; pointer-events: none; }
.px-go-tag .ico { width: 18px; height: 18px; }
.px-frame-link:hover .px-go-tag, .px-frame-link:focus-visible .px-go-tag { opacity: 1; translate: 0 0; }
@media (hover: none) { .px-go-tag { opacity: 1; translate: 0 0; } }
.px-frame-link.is-follow { cursor: none; }
.px-frame-link.is-follow .px-go-tag { left: 0; top: 0; right: auto; bottom: auto; translate: none; transform: translate3d(var(--cx, 0), var(--cy, 0), 0) scale(.85); transition: opacity .2s, transform .25s var(--lift); }
.px-frame-link.is-follow.is-in .px-go-tag { opacity: 1; transform: translate3d(var(--cx, 0), var(--cy, 0), 0) scale(1); }
.px-frame-link.is-follow:focus-visible:not(.is-in) .px-go-tag { left: auto; top: auto; right: 24px; bottom: 24px; transform: none; opacity: 1; }
.px-frame figcaption { padding: 10px 14px; border-top: 1px solid var(--border); font-size: 13px; color: var(--muted); }

/* ---------- intro, facts, chain ---------- */
.px-intro-r { display: grid; gap: 18px; padding-bottom: 8px; }
.px-headline { font: 500 clamp(26px, 2.6vw, 40px)/1.1 "Geist", sans-serif; letter-spacing: -.02em; max-width: 20ch; }
.px-lede { font-size: clamp(16px, 1.3vw, 19px); line-height: 1.5; color: var(--text-3); max-width: 52ch; }
.px-facts { display: grid; grid-template-columns: repeat(4, 1fr); margin-top: clamp(48px, 5vw, 80px); border-top: 1px solid var(--border); }
.px-facts > div { display: grid; gap: 8px; align-content: start; padding: 22px 24px 4px 0; }
.px-facts > div + div { padding-left: 24px; border-left: 1px solid var(--line); }
.px-facts dt {
  font: 500 12px "Geist Mono", monospace; letter-spacing: .08em; text-transform: uppercase; color: var(--muted);
}
.px-facts dd { margin: 0; font: 500 clamp(19px, 1.7vw, 26px)/1.2 "Geist", sans-serif; letter-spacing: -.01em; }
.px-facts .is-acc dd { color: var(--accent-deep); }

/* dark: the go-to tag uses the lit accent */
[data-theme="dark"] .px-go-tag { background: var(--lit-accent); box-shadow: -4px 4px 0 #000; }

/* tablet and phone */
@media (max-width: 1099px) {
  .px-facts { grid-template-columns: 1fr 1fr; }
  .px-facts > div:nth-child(3) { padding-left: 0; border-left: 0; }
  .px-facts > div:nth-child(n+3) { margin-top: 12px; border-top: 1px solid var(--line); }
}
@media (max-width: 809px) {
  .px-frame-bar { font-size: 12px; }
  .px-frame-dots { display: none; }
}
@media (prefers-reduced-motion: reduce) { .px-go-tag { transition: none; } }

/* Home "Selected work": a stacked deck. Each card pins a little lower than the one before, so
   the earlier ones peek out as tabs; the card underneath shrinks back and dims as the next one covers it (--c). */
.sk { list-style: none; margin: 0; padding: 0 0 4vh; display: grid; gap: 6vh; }
.sk-item { position: sticky; top: calc(var(--hdr-top, 24px) + 84px + var(--i) * 18px); --c: 0; }
.sk-card {
  display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: clamp(20px, 3vw, 48px);
  min-height: min(72vh, 620px); padding: clamp(20px, 2.6vw, 36px); border: 1px solid var(--border); background: var(--paper); color: var(--ink); text-decoration: none; transform-origin: 50% 0;
  transform: scale(calc(1 - var(--c) * .06)); filter: brightness(calc(1 - var(--c) * .35));
  transition: border-color .4s var(--ease), box-shadow .4s var(--ease);
  box-shadow: 0 -12px 40px -24px rgb(0 0 0 / .35);
}
.sk-text { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.sk-tag { align-self: flex-start; font: 500 12px/1 "Geist Mono", monospace; letter-spacing: .08em; text-transform: uppercase;
  padding: 8px 12px; border: 1px solid var(--border); color: var(--text-2); transition: background .4s var(--ease), color .4s var(--ease), border-color .4s var(--ease); }
.sk-name { margin: auto 0 0; font: 500 clamp(36px, 4.6vw, 76px)/.92 "Geist", sans-serif; letter-spacing: -.03em; text-transform: uppercase; }
.sk-sum { margin: 0; max-width: 42ch; color: var(--text-2); font-size: clamp(15px, 1.1vw, 17px); line-height: 1.5; }
.sk-foot { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding-top: 18px; border-top: 1px solid var(--line); }
.sk-client { color: var(--muted); font-size: 14px; }
.sk-go { display: inline-flex; align-items: center; gap: 10px; font-weight: 500; }
.sk-go svg { width: 20px; height: 20px; transition: transform .45s var(--ease); }
.sk-go span { background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat; transition: background-size .45s var(--ease); }
.sk-media { position: relative; overflow: hidden; background: var(--soft); min-height: 260px; }
.sk-media > img, .sk-media > .cover-art, .sk-media > .cover-soon { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  transition: transform .9s var(--ease), opacity .5s var(--ease); }
.sk:hover .sk-card:not(:hover) .sk-media > * { opacity: .55; }
.sk-card:hover { border-color: var(--accent); }
.sk-card:hover .sk-media > * { transform: scale(1.045); }
.sk-card:hover .sk-tag { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.sk-card:hover .sk-go svg { transform: translateX(6px) rotate(-45deg); }
.sk-card:hover .sk-go span, .sk-card:focus-visible .sk-go span { background-size: 100% 1px; }
.sk-card:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
/* dark: dot grid at rest; the orange glow rises from below only on hover/focus */
[data-theme="dark"] .sk-card { position: relative; isolation: isolate;
  background: radial-gradient(color-mix(in srgb, var(--ink) 11%, transparent) 1px, transparent 1.2px) 0 0 / 14px 14px, var(--paper); }
[data-theme="dark"] .sk-card::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: 0;
  background: radial-gradient(70% 90% at 50% 120%, color-mix(in srgb, var(--accent) 28%, transparent), transparent 72%); transition: opacity .6s var(--ease); }
[data-theme="dark"] .sk-card:hover::before, [data-theme="dark"] .sk-card:focus-visible::before { opacity: 1; }
[data-theme="dark"] .sk-card:hover .sk-tag { background: var(--lit-accent); }
@media (max-width: 760px) {
  .sk-card { grid-template-columns: 1fr; min-height: 0; }
  .sk-media { order: -1; aspect-ratio: 16 / 10; min-height: 0; }
  .sk-name { margin-top: 0; }
  .sk-item { top: calc(var(--hdr-top, 16px) + 72px + var(--i) * 12px); }
}
@media (prefers-reduced-motion: reduce) { .sk-card, .sk-media > * { transition: none; } }

/* ImpactAIQ showcase (13 Oct 2026): launch, parties, problem, product, my part, CTA. Short text, big headings. */
.sh-h { margin: 0 0 clamp(24px, 3vw, 44px); font: 500 clamp(34px, 4.4vw, 68px)/.98 "Geist", sans-serif; letter-spacing: -.03em; max-width: 16ch; }
.sh-k { display: inline-flex; align-items: center; gap: 10px; font: 500 12px/1 "Geist Mono", monospace; letter-spacing: .08em; text-transform: uppercase; color: var(--text-2); }
.sh-k i { width: 8px; height: 8px; background: var(--accent); box-shadow: 0 0 0 0 var(--accent); animation: shPing 2s infinite; }
@keyframes shPing { 70% { box-shadow: 0 0 0 8px transparent; } }
.sh-plate { display: inline-flex; align-items: center; justify-content: center; background: #fff; padding: 14px 20px; border: 1px solid var(--border); }
.sh-plate img { display: block; height: 40px; width: auto; max-width: 100%; }

/* launch */
.sh-launch-card { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(24px, 4vw, 64px); align-items: center;
  padding: clamp(24px, 4vw, 56px); border: 1px solid var(--border); background: var(--soft); }
[data-theme="dark"] .sh-launch-card { background: var(--lit); }
.sh-launch-text { display: flex; flex-direction: column; gap: 22px; align-items: flex-start; }
.sh-launch-text h2 { margin: 0; font: 500 clamp(34px, 4.2vw, 64px)/.98 "Geist", sans-serif; letter-spacing: -.03em; }
.sh-launch-text > p { margin: 0; color: var(--text-2); max-width: 40ch; }
.sh-dates { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; width: 100%; }
.sh-dates li { display: flex; gap: 16px; align-items: center; padding: 12px; border: 1px solid var(--border); background: var(--paper);
  transition: transform .4s var(--ease), border-color .4s var(--ease); }
.sh-dates li:hover { transform: translateX(6px); border-color: var(--accent); }
.sh-dates strong { display: block; font-weight: 500; }
.sh-dates li > span:last-child { color: var(--text-2); font-size: 14px; }
.sh-day { flex: none; width: 58px; height: 58px; display: grid; place-content: center; text-align: center; background: var(--accent); color: var(--on-accent);
  font: 500 11px/1 "Geist Mono", monospace; text-transform: uppercase; letter-spacing: .06em; }
[data-theme="dark"] .sh-day { background: var(--lit-accent); }
.sh-day b { display: block; font: 600 24px/1 "Geist", sans-serif; letter-spacing: 0; margin-bottom: 2px; }
.sh-imex img { height: 46px; }
.sh-launch-media { margin: 0; }
.sh-launch-media video { display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: contain; background: #07262c; border: 1px solid var(--border); }
.sh-launch-media figcaption { margin-top: 10px; font-size: 13px; color: var(--muted); }

/* parties */
.sh-parties { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 2vw, 28px); }
.sh-parties li { display: flex; flex-direction: column; gap: 14px; padding-top: 20px; border-top: 1px solid var(--border); transition-delay: var(--d, 0ms); }
.sh-parties .sh-plate { align-self: flex-start; height: 96px; min-width: 200px; transition: transform .5s var(--ease), border-color .4s var(--ease); }
.sh-parties li:hover .sh-plate { transform: translateY(-4px) rotate(-1.5deg); border-color: var(--accent); }
.sh-role { font: 500 12px/1 "Geist Mono", monospace; letter-spacing: .08em; text-transform: uppercase; color: var(--accent-deep); }
[data-theme="dark"] .sh-role { color: var(--accent); }
.sh-parties p { margin: 0; color: var(--text-2); max-width: 32ch; }

/* problem */
.sh-probs { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--border); }
.sh-probs li { padding: 24px 20px 28px 0; display: flex; flex-direction: column; gap: 12px; transition-delay: var(--d, 0ms); }
.sh-probs li + li { padding-left: 20px; border-left: 1px solid var(--border); }
.sh-n { font: 500 12px/1 "Geist Mono", monospace; color: var(--muted); }
.sh-probs h3 { margin: 0; font: 500 clamp(20px, 1.7vw, 26px)/1.15 "Geist", sans-serif; letter-spacing: -.01em; transition: color .3s var(--ease); }
.sh-probs p { margin: 0; color: var(--text-2); font-size: 15px; }
.sh-probs li:hover h3 { color: var(--accent-deep); }
[data-theme="dark"] .sh-probs li:hover h3 { color: var(--accent); }

/* product */
.sh-prod { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 2vw, 28px); }
.sh-prod li { display: flex; flex-direction: column; gap: 10px; transition-delay: var(--d, 0ms); }
.sh-shot { margin: 0 0 8px; overflow: hidden; border: 1px solid var(--border); background: #f6f5f2; aspect-ratio: 1764 / 1539; }
.sh-shot img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .9s var(--ease); }
.sh-prod li:hover .sh-shot img { transform: scale(1.05); }
.sh-step { font: 500 12px/1 "Geist Mono", monospace; letter-spacing: .08em; text-transform: uppercase; color: var(--accent-deep); }
[data-theme="dark"] .sh-step { color: var(--accent); }
.sh-prod h3 { margin: 0; font: 500 clamp(20px, 1.7vw, 26px)/1.15 "Geist", sans-serif; }
.sh-prod p { margin: 0; color: var(--text-2); }
.sh-src { margin: 20px 0 0; font-size: 13px; color: var(--muted); }
.sh-src a { color: inherit; display: inline-flex; gap: 4px; align-items: center; }
.sh-src svg { width: 14px; height: 14px; }

/* what I designed */
.sh-me { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(24px, 4vw, 64px); align-items: start; }
.sh-me-l p { margin: 0; color: var(--text-2); max-width: 34ch; }
.sh-me-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--border); }
.sh-me-list li { display: flex; gap: 16px; align-items: flex-start; padding: 22px 0; border-bottom: 1px solid var(--border); transition-delay: var(--d, 0ms); }
.sh-me-list svg { flex: none; width: 22px; height: 22px; margin-top: 3px; color: var(--accent-deep); transition: transform .5s var(--ease); }
[data-theme="dark"] .sh-me-list svg { color: var(--accent); }
.sh-me-list li:hover svg { transform: scale(1.2) rotate(-10deg); }
.sh-me-list strong { display: block; font: 500 clamp(20px, 1.7vw, 26px)/1.2 "Geist", sans-serif; margin-bottom: 4px; }
.sh-me-list li > span { color: var(--text-2); }
.sh-me-list li.is-ai strong::after { content: "AI"; margin-left: 10px; vertical-align: middle; font: 500 11px/1 "Geist Mono", monospace; padding: 4px 7px; background: var(--accent); color: var(--on-accent); }
[data-theme="dark"] .sh-me-list li.is-ai strong::after { background: var(--lit-accent); }

/* CTA */
.sh-cta { text-align: center; padding: clamp(40px, 7vw, 96px) clamp(20px, 4vw, 48px); background: var(--accent); color: var(--on-accent); }
[data-theme="dark"] .sh-cta { background: var(--lit-accent); }
.sh-cta h2 { margin: 0 auto 14px; font: 500 clamp(40px, 6vw, 96px)/.95 "Geist", sans-serif; letter-spacing: -.035em; }
.sh-cta p { margin: 0 auto 28px; max-width: 44ch; font-size: clamp(16px, 1.3vw, 19px); }
.sh-cta-row { display: flex; gap: 20px 28px; justify-content: center; align-items: center; flex-wrap: wrap; }
.sh-cta .btn { width: 230px; height: 64px; }
.sh-cta .btn:hover, .sh-cta .btn:focus-visible { background: var(--ink); }
.sh-cta-alt { color: inherit; display: inline-flex; gap: 6px; align-items: center; font-weight: 500; text-underline-offset: 4px; }
.sh-cta-alt svg { width: 18px; height: 18px; transition: transform .4s var(--ease); }
.sh-cta-alt:hover svg { transform: translate(3px, -3px); }

@media (max-width: 1000px) {
  .sh-launch-card, .sh-me { grid-template-columns: 1fr; }
  .sh-probs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sh-probs li:nth-child(3) { padding-left: 0; border-left: 0; }
  .sh-probs li:nth-child(n+3) { border-top: 1px solid var(--border); }
}
@media (max-width: 700px) {
  .sh-parties, .sh-prod { grid-template-columns: 1fr; }
  .sh-probs { grid-template-columns: 1fr; }
  .sh-probs li, .sh-probs li + li { padding-left: 0; border-left: 0; }
  .sh-probs li + li { border-top: 1px solid var(--border); }
}
@media (prefers-reduced-motion: reduce) { .sh-k i { animation: none; } }
.sh-parties .sh-plate img { height: 52px; }

/* Readable case-study blocks (14 Oct 2026): brief, lead, flow, split, insight, outcome chips. Short text in shapes,
   each with a small motion when it arrives and on hover. Light: solid fills only. */
.cs-brief, .cs-lead, .cs-flow, .cs-split, .cs-insight { display: grid; }
.cs-brief > .cs-sub, .cs-lead > .cs-sub, .cs-flow > .cs-sub, .cs-split > .cs-sub, .cs-insight > .cs-sub { justify-self: start; }

.brief-main { position: relative; padding: clamp(28px, 4vw, 56px); display: grid; gap: 18px; }
.brief-mark { position: absolute; top: clamp(18px, 2vw, 28px); right: clamp(18px, 2vw, 28px); color: var(--accent-deep); }
.brief-mark .ico { width: 40px; height: 40px; }
.js .rv .brief-mark { opacity: 0; transform: rotate(-30deg) scale(.6); transition: opacity .6s var(--ease) .5s, transform .8s var(--lift) .5s; }
.js .rv.in .brief-mark { opacity: 1; transform: none; }
.brief-q { font: 500 clamp(28px, 3.4vw, 52px)/1.08 "Geist", sans-serif; letter-spacing: -.02em; max-width: 22ch; }
.brief-q { background: linear-gradient(var(--accent), var(--accent)) 0 100% / 0 6px no-repeat; padding-bottom: 10px; justify-self: start; }
.js .rv.in .brief-q, html:not(.js) .brief-q { background-size: 100% 6px; transition: background-size 1.2s var(--ease) .6s; }
.brief-sub { color: var(--text-2); max-width: 56ch; font-size: clamp(15px, 1.15vw, 17px); }
.brief-points { list-style: none; margin: -1px 0 0; padding: 0; display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); }
.brief-points li { padding: 24px 26px 28px; display: grid; gap: 10px; align-content: start; margin-left: -1px; position: relative; transition: background-color .35s var(--ease), translate .45s var(--lift); }
.brief-points li::before { content: ""; position: absolute; left: -1px; right: -1px; top: -1px; height: 3px; background: var(--accent); transform: scaleX(0); transform-origin: left; transition: transform .5s var(--ease); }
.brief-points li:hover::before { transform: scaleX(1); }
.brief-points li:hover { translate: 0 -6px; }
.brief-k, .split-label { display: inline-flex; align-items: center; gap: 10px; font: 500 13px/1 "Geist Mono", monospace; letter-spacing: .08em; text-transform: uppercase; color: var(--accent-deep); }
.split-label .ico { width: 18px; height: 18px; }
.brief-points p { font-size: 16px; line-height: 1.5; }

.lead-big { padding: clamp(24px, 3vw, 40px); font: 500 clamp(24px, 2.6vw, 40px)/1.15 "Geist", sans-serif; letter-spacing: -.015em; position: relative; }
.lead-big::before { content: ""; position: absolute; left: -1px; top: -1px; bottom: -1px; width: 4px; background: var(--accent); transform: scaleY(0); transform-origin: top; transition: transform .9s var(--ease) .4s; }
.js .rv.in.lead-big::before, html:not(.js) .lead-big::before { transform: none; }
.cs-flow .lead-big + .flow-steps, .cs-split .lead-big + .split-cols { margin-top: -1px; }

/* flow: numbered dots on a line that draws across when the block arrives */
.flow-steps { list-style: none; margin: 0; padding: clamp(28px, 3vw, 40px) 0 0; display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); position: relative; }
.flow-steps::before { content: ""; position: absolute; left: 0; right: calc(100% / var(--n) - 46px); top: calc(clamp(28px, 3vw, 40px) + 22px); height: 2px; background: var(--border); }
.flow-steps::after { content: ""; position: absolute; left: 0; right: calc(100% / var(--n) - 46px); top: calc(clamp(28px, 3vw, 40px) + 22px); height: 2px; background: var(--accent); transform: scaleX(0); transform-origin: left; transition: transform 1.4s var(--ease) .3s; }
.js .flow-steps.in::after, html:not(.js) .flow-steps::after { transform: none; }
.flow-steps li { position: relative; z-index: 1; display: grid; gap: 10px; align-content: start; padding-right: 22px; }
.flow-dot { width: 46px; height: 46px; display: grid; place-content: center; background: var(--paper); border: 1px solid var(--border); font: 500 14px/1 "Geist Mono", monospace;
  transition: background-color .35s var(--ease), color .35s var(--ease), border-color .35s var(--ease), transform .45s var(--lift); }
.js .flow-steps .flow-dot { transform: scale(.4); opacity: 0; transition: transform .6s var(--lift) calc(.35s + var(--i) * .22s), opacity .4s var(--ease) calc(.35s + var(--i) * .22s), background-color .35s, color .35s, border-color .35s; }
.js .flow-steps.in .flow-dot { transform: none; opacity: 1; }
.js .flow-steps.in .flow-dot { border-color: var(--accent); }
.flow-steps li:hover .flow-dot { background: var(--accent); color: var(--on-accent); transform: translateY(-4px) rotate(-6deg); }
.flow-steps h4 { margin-top: 8px; font: 500 clamp(18px, 1.5vw, 22px)/1.25 "Geist", sans-serif; }
.flow-steps p { color: var(--text-2); font-size: 15.5px; line-height: 1.5; max-width: 30ch; }

/* split: two short lists side by side; items slide in one by one */
.split-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.split-col { padding: clamp(22px, 2.6vw, 34px); display: grid; gap: 18px; align-content: start; }
.split-col + .split-col { margin-left: -1px; }
.split-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.split-col li { position: relative; padding: 12px 12px 12px 30px; font-size: 16px; line-height: 1.45; border-bottom: 1px solid var(--line); transition: background-color .3s var(--ease), padding-left .35s var(--ease); }
.split-col li:last-child { border-bottom: 0; }
.split-col li::before { content: ""; position: absolute; left: 8px; top: 1.15em; width: 8px; height: 8px; background: var(--accent); transition: transform .35s var(--lift); }
.split-col li:hover { padding-left: 38px; background: var(--soft); }
.split-col li:hover::before { transform: rotate(45deg) scale(1.2); }
.js .rv .split-col li, .js .split-col.rv li { opacity: 0; translate: -14px 0; transition: opacity .5s var(--ease) calc(.3s + var(--i) * .08s), translate .6s var(--ease) calc(.3s + var(--i) * .08s), background-color .3s, padding-left .35s; }
.js .split-col.rv.in li { opacity: 1; translate: 0 0; }

/* chips (outcome points, survey findings): pop in one by one */
.pt-chips { list-style: none; margin: 6px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.prose .pt-chips li { padding: 9px 14px; max-width: none; border: 1px solid var(--border); display: inline-flex; align-items: center; gap: 8px; font-size: 14.5px; line-height: 1.2;
  transition: background-color .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease), translate .35s var(--lift); }
.pt-chips li { padding: 9px 14px; border: 1px solid var(--border); display: inline-flex; align-items: center; gap: 8px; font-size: 14.5px; line-height: 1.2;
  transition: background-color .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease), translate .35s var(--lift); }
.prose .pt-chips li::before { display: none; }
.pt-chips .ico { width: 16px; height: 16px; color: var(--accent-deep); transition: color .3s; }
.pt-chips li:hover { background: var(--accent); border-color: var(--accent); color: var(--on-accent); translate: 0 -3px; }
.pt-chips li:hover .ico { color: var(--on-accent); }
.js .rv .pt-chips li { opacity: 0; scale: .85; transition: opacity .45s var(--ease) calc(.45s + var(--i) * .1s), scale .55s var(--lift) calc(.45s + var(--i) * .1s), background-color .3s, color .3s, border-color .3s, translate .35s var(--lift); }
.js .rv.in .pt-chips li { opacity: 1; scale: 1; }

.insight-body { padding: clamp(22px, 2.6vw, 34px); display: grid; gap: 18px; align-content: start; margin-left: -1px; }
.insight-take { display: flex; gap: 12px; align-items: flex-start; padding-top: 18px; border-top: 1px solid var(--line); font: 500 clamp(18px, 1.5vw, 22px)/1.3 "Geist", sans-serif; }
.insight-take .ico { flex: none; width: 22px; height: 22px; margin-top: 2px; color: var(--accent-deep); transition: transform .45s var(--lift); }
.insight-body:hover .insight-take .ico { transform: translate(4px, -4px); }

/* smoother flow elsewhere in case studies: stat boxes, number cards and images respond to hover */
.cs-outcome .stat-box, .cs-insight .stat-box { transition: translate .45s var(--lift); }
.cs-outcome:hover .stat-box, .cs-insight:hover .stat-box { translate: 0 -6px; }
.num-grid li { position: relative; transition: background-color .35s var(--ease); }
.num-grid li::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: var(--accent); transform: scaleX(0); transform-origin: left; transition: transform .5s var(--ease); }
.num-grid li:hover::before { transform: scaleX(1); }
.num-grid li:hover .step-n { color: var(--accent-deep); }
.cs-img img { transition: transform 1.2s var(--ease); }
.cs-img:hover img { transform: scale(1.025); }

@media (max-width: 900px) {
  .brief-points, .flow-steps, .split-cols { grid-template-columns: 1fr; }
  .brief-points li { margin-left: 0; margin-top: -1px; }
  .split-col + .split-col { margin-left: 0; margin-top: -1px; }
  .flow-steps { gap: 22px; padding-left: 0; }
  .flow-steps::before, .flow-steps::after { left: 22px; right: auto; top: clamp(28px, 3vw, 40px); bottom: 0; width: 2px; height: auto; transform-origin: top; }
  .flow-steps::after { transform: scaleY(0); }
  .js .flow-steps.in::after { transform: none; }
  .flow-steps li { grid-template-columns: 46px 1fr; column-gap: 16px; }
  .flow-steps li .flow-dot { grid-row: span 2; }
  .flow-steps h4 { margin-top: 10px; }
}
@media (prefers-reduced-motion: reduce) {
  .flow-steps::after, .lead-big::before { transform: none !important; transition: none; }
  .brief-q { background-size: 100% 6px; }
}

/* rich numbered cards (Fash interview insights, 14 Oct 2026): who · title · the need in one quoted line · what the
   design does. Title sits at the top so the eye reads straight down; the design line reveals its label on hover. */
.num-grid li.num-rich { gap: 14px; min-height: 0; padding: 26px 24px 28px; }
.num-top { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.num-who { font: 500 11.5px/1 "Geist Mono", monospace; letter-spacing: .06em; text-transform: uppercase; padding: 6px 9px; border: 1px solid var(--border); color: var(--text-2); white-space: nowrap; }
.num-grid li.num-rich h4 { margin-top: 18px; padding-top: 0; font-size: clamp(19px, 1.45vw, 22px); }
.num-need { font: 500 clamp(17px, 1.25vw, 19px)/1.35 "Geist", sans-serif; color: var(--accent-deep) !important; }
.num-so { margin-top: auto; padding-top: 16px; border-top: 1px solid var(--line); display: grid; gap: 6px; }
.num-so span { font: 500 11.5px/1 "Geist Mono", monospace; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); transition: color .3s; }
.num-grid li.num-rich:hover .num-so span { color: var(--accent-deep); }
.num-grid li.num-rich:hover .num-who { border-color: var(--accent); color: var(--ink); }

/* "Live on Google Play" (14 Oct 2026): a pill with a pulsing dot beside the case-study tag and on the Selected work card */
.cs-tags { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 12px; }
.cs-live, .sk-live { display: inline-flex; align-items: center; gap: 10px; font: 500 13px/1 "Geist Mono", monospace; letter-spacing: .06em; text-transform: uppercase; }
.cs-live { align-self: stretch; padding: 0 18px; border: 1px solid var(--accent); color: var(--ink); transition: background-color .3s var(--ease), color .3s var(--ease); }
.cs-live .ico { width: 16px; height: 16px; transition: transform .4s var(--lift); }
.cs-live:hover, .cs-live:focus-visible { background: var(--accent); color: var(--on-accent); }
.cs-live:hover .ico { transform: translate(3px, -3px); }
[data-theme="dark"] .cs-live:hover, [data-theme="dark"] .cs-live:focus-visible { background: var(--lit-accent); }
.cs-live i, .sk-live i { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 0 var(--accent); animation: shPing 2s infinite; flex: none; }
.cs-live:hover i { background: var(--on-accent); }
.sk-tags { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.sk-live { padding: 8px 12px; border: 1px solid var(--accent); color: var(--ink); font-size: 12px; }
.cs-intro-right .grid2 .cs-store-btn { grid-column: 2; margin-left: -1px; }
@media (max-width: 700px) { .cs-intro-right .grid2 .cs-store-btn { grid-column: 1; margin: -1px 0 0; } }
@media (prefers-reduced-motion: reduce) { .cs-live i, .sk-live i { animation: none; } }

/* dark theme: orange versions of the teal-tinted surfaces */
[data-theme="dark"] .mark::before { background: linear-gradient(115deg, #c0582a 0%, #a8461a 45%, #6e2c10 100%); }
[data-theme="dark"] .stat-box { background: var(--lit-accent); }
[data-theme="dark"] .ship-launch { background: radial-gradient(110% 80% at 100% 0%, color-mix(in srgb, var(--accent) 24%, transparent), transparent 65%), linear-gradient(170deg, #4a2a1a 0%, #24160f 100%); }
[data-theme="dark"] .cover-art {
  background: radial-gradient(70% 90% at 80% 120%, color-mix(in srgb, var(--accent) 24%, transparent), transparent 70%), linear-gradient(170deg, #4a2a1a, #24160f);
}
[data-theme="dark"] .fx-viz--launch { background: radial-gradient(80% 80% at 100% 0%, color-mix(in srgb, var(--accent) 30%, transparent), transparent 65%), linear-gradient(170deg, #7a3a1c, #2c1910); }
/* video backdrops: neutral charcoal instead of teal in dark */
[data-theme="dark"] .cover-video, [data-theme="dark"] .sh-launch-media video { background: #1b1e22; }