/* zTaivann · portfolio. One stylesheet: fonts, tokens, worlds, components, motion. */

/* ---------- Fonts ----------
   Every face is preloaded and subset (the showcase's own to the Latin of the three languages, each brand's
   to the few letters it sets here) and blocks rather than swaps, so no text is ever shown in the wrong font.
   If a font is very late (3 s), the metric-matched fallbacks below take over without moving anything. */
@font-face { font-family: "Bricolage Grotesque"; font-style: normal; font-weight: 400 700; font-display: swap; src: url("../assets/fonts/bricolage-grotesque.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 400; font-display: swap; src: url("../assets/fonts/ibm-plex-mono-400.woff2") format("woff2"); }
@font-face { font-family: "Bricolage Fallback"; src: local("Arial"), local("ArialMT"), local("Helvetica"); size-adjust: 105.28%; ascent-override: 88.34%; descent-override: 25.65%; line-gap-override: 0%; }
@font-face { font-family: "Bricolage Display Fallback"; src: local("Arial Bold"), local("Arial-BoldMT"), local("Helvetica Bold"); font-weight: 400 700; size-adjust: 89.83%; ascent-override: 103.53%; descent-override: 30.06%; line-gap-override: 0%; }
@font-face { font-family: "Plex Fallback"; src: local("Courier New"), local("CourierNewPSMT"); size-adjust: 99.98%; ascent-override: 102.52%; descent-override: 27.5%; line-gap-override: 0%; }

@font-face { font-family: "W Geist"; font-weight: 100 900; font-display: swap; src: url("../assets/fonts/brand/geist.woff2") format("woff2"); }
@font-face { font-family: "W Geist Mono"; font-weight: 100 900; font-display: swap; src: url("../assets/fonts/brand/geist-mono.woff2") format("woff2"); }
@font-face { font-family: "W Bagel"; font-weight: 400; font-display: swap; src: url("../assets/fonts/brand/bagel-fat-one.woff2") format("woff2"); }
@font-face { font-family: "W Fredoka"; font-weight: 300 700; font-display: swap; src: url("../assets/fonts/brand/fredoka.woff2") format("woff2"); }
@font-face { font-family: "W Fraunces"; font-style: normal; font-weight: 300 700; font-display: swap; src: url("../assets/fonts/brand/fraunces.woff2") format("woff2"); }
@font-face { font-family: "W Fraunces"; font-style: italic; font-weight: 300 600; font-display: swap; src: url("../assets/fonts/brand/fraunces-italic.woff2") format("woff2"); }
@font-face { font-family: "W Newsreader"; font-weight: 200 800; font-display: swap; src: url("../assets/fonts/brand/newsreader.woff2") format("woff2"); }
@font-face { font-family: "W Instrument"; font-weight: 400 700; font-display: swap; src: url("../assets/fonts/brand/instrument-sans.woff2") format("woff2"); }
@font-face { font-family: "W Anton"; font-weight: 400; font-display: swap; src: url("../assets/fonts/brand/anton.woff2") format("woff2"); }
@font-face { font-family: "W Archivo"; font-weight: 100 900; font-display: swap; src: url("../assets/fonts/brand/archivo.woff2") format("woff2"); }
@font-face { font-family: "W Cormorant"; font-style: normal; font-weight: 300 700; font-display: swap; src: url("../assets/fonts/brand/cormorant-garamond.woff2") format("woff2"); }
@font-face { font-family: "W Cormorant"; font-style: italic; font-weight: 300 700; font-display: swap; src: url("../assets/fonts/brand/cormorant-garamond-italic.woff2") format("woff2"); }
@font-face { font-family: "W Jost"; font-weight: 100 900; font-display: swap; src: url("../assets/fonts/brand/jost.woff2") format("woff2"); }
@font-face { font-family: "W Schibsted H"; font-weight: 400 900; font-display: swap; src: url("../assets/fonts/brand/schibsted-hero.woff2") format("woff2"); }
@font-face { font-family: "W Schibsted"; font-weight: 400 900; font-display: swap; src: url("../assets/fonts/brand/schibsted-grotesk.woff2") format("woff2"); }
@font-face { font-family: "W DM Mono"; font-weight: 400; font-display: swap; src: url("../assets/fonts/brand/dm-mono.woff2") format("woff2"); }

/* ---------- Registered colours: a world change interpolates instead of snapping ---------- */
@property --w-bg { syntax: "<color>"; inherits: true; initial-value: #f4f4f1; }
@property --w-ink { syntax: "<color>"; inherits: true; initial-value: #141413; }
@property --w-ink-2 { syntax: "<color>"; inherits: true; initial-value: #55554f; }
@property --w-line { syntax: "<color>"; inherits: true; initial-value: rgb(20 20 19 / 0.12); }
@property --w-chip { syntax: "<color>"; inherits: true; initial-value: #ebebe6; }
@property --w-accent { syntax: "<color>"; inherits: true; initial-value: #141413; }
@property --w-title { syntax: "<color>"; inherits: true; initial-value: #141413; }
@property --glow { syntax: "<color>"; inherits: false; initial-value: rgb(16 185 129 / 0); }

/* ---------- Tokens ---------- */
:root {
  --bg: #f4f4f1; --surface: #ffffff; --surface-2: #ebebe6;
  --ink: #141413; --ink-2: #55554f; --ink-3: #6b6b64;
  --line: rgb(20 20 19 / 0.12); --line-strong: rgb(20 20 19 / 0.22);
  --mark-ink: #f4f4f1; --frame: #e4e4df; --frame-dot: #c9c9c2;
  --shadow: 0 1px 0 rgb(20 20 19 / 0.04), 0 24px 48px -28px rgb(20 20 19 / 0.32);
  --shadow-lift: 0 2px 4px rgb(20 20 19 / 0.04), 0 30px 60px -28px rgb(20 20 19 / 0.38);
  --focus: #2f5bff; --live: #1f8f4e;

  --f-sans: "Bricolage Grotesque", "Bricolage Fallback", ui-sans-serif, system-ui, sans-serif;
  --f-display: "Bricolage Grotesque", "Bricolage Display Fallback", ui-sans-serif, system-ui, sans-serif;
  --f-mono: "IBM Plex Mono", "Plex Fallback", ui-monospace, monospace;
  --fs-hero: clamp(2.25rem, 1.05rem + 4.4vw, 5.25rem);
  --fs-h2: clamp(2rem, 1.3rem + 2.8vw, 3.75rem);
  --fs-case: clamp(2.5rem, 1.6rem + 3.4vw, 5rem);
  --fs-lead: clamp(1.125rem, 1.02rem + 0.4vw, 1.375rem);

  --pad: clamp(16px, 4vw, 64px); --max: 1440px; --gap: clamp(20px, 2.6vw, 40px);
  --section: clamp(88px, 11vw, 168px);
  --r-sm: 8px; --r-md: 14px;
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);
  --t-press: 140ms; --t-ui: 200ms;
  color-scheme: light;

  --w-bg: var(--bg); --w-ink: var(--ink); --w-ink-2: var(--ink-2); --w-line: var(--line); --w-chip: var(--surface-2); --w-accent: var(--ink); --w-title: var(--ink);
  --nav-h: 68px;
}
:root[data-theme="dark"] {
  --bg: #0f0f0e; --surface: #181817; --surface-2: #1f1f1d;
  --ink: #f1f1ec; --ink-2: #b4b4ac; --ink-3: #9a9a92;
  --line: rgb(241 241 236 / 0.12); --line-strong: rgb(241 241 236 / 0.24);
  --mark-ink: #0f0f0e; --frame: #262624; --frame-dot: #45453f;
  --shadow: 0 1px 0 rgb(0 0 0 / 0.3), 0 28px 56px -28px rgb(0 0 0 / 0.75);
  --shadow-lift: 0 2px 4px rgb(0 0 0 / 0.3), 0 34px 64px -28px rgb(0 0 0 / 0.85);
  --focus: #8aa4ff; --live: #4ade80;
  color-scheme: dark;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0f0f0e; --surface: #181817; --surface-2: #1f1f1d;
    --ink: #f1f1ec; --ink-2: #b4b4ac; --ink-3: #9a9a92;
    --line: rgb(241 241 236 / 0.12); --line-strong: rgb(241 241 236 / 0.24);
    --mark-ink: #0f0f0e; --frame: #262624; --frame-dot: #45453f;
    --shadow: 0 1px 0 rgb(0 0 0 / 0.3), 0 28px 56px -28px rgb(0 0 0 / 0.75);
    --shadow-lift: 0 2px 4px rgb(0 0 0 / 0.3), 0 34px 64px -28px rgb(0 0 0 / 0.85);
    --focus: #8aa4ff; --live: #4ade80;
    color-scheme: dark;
  }
}

/* ---------- The five worlds: colours ---------- */
:root[data-world="keel"] :is(.work, .nav)   { --w-bg: #0e0f11; --w-ink: #f2f2f3; --w-ink-2: #a9a9b0; --w-line: rgb(255 255 255 / 0.12); --w-chip: #1c1d20; --w-accent: #34d399; --w-title: #f2f2f3; }
:root[data-world="mabel"] :is(.work, .nav)  { --w-bg: #fff1de; --w-ink: #3b2420; --w-ink-2: #6e4a40; --w-line: rgb(59 36 32 / 0.14); --w-chip: #fbe3c4; --w-accent: #b52e52; --w-title: #b52e52; }
:root[data-world="ardent"] :is(.work, .nav) { --w-bg: #efeae0; --w-ink: #15130f; --w-ink-2: #4c463d; --w-line: rgb(21 19 15 / 0.18); --w-chip: #e2dacb; --w-accent: #9e2614; --w-title: #15130f; }
:root[data-world="flood"] :is(.work, .nav)  { --w-bg: #0b0b0b; --w-ink: #ffffff; --w-ink-2: #cfcfcf; --w-line: rgb(255 255 255 / 0.16); --w-chip: #232323; --w-accent: #d7ff3a; --w-title: #d7ff3a; }
:root[data-world="marram"] :is(.work, .nav) { --w-bg: #eee8dd; --w-ink: #2c2d25; --w-ink-2: #55564b; --w-line: rgb(44 45 37 / 0.16); --w-chip: #e2dbcd; --w-accent: #8a5236; --w-title: #2c2d25; }
:root[data-world="ostra"] :is(.work, .nav)   { --w-bg: #d4d0c7; --w-ink: #1b1b1a; --w-ink-2: #47453f; --w-line: rgb(27 27 26 / 0.16); --w-chip: #c6c2b8; --w-accent: #a53a14; --w-title: #1b1b1a; }
/* Ink follows the surface. JS sets duration and delay for each change so the colours turn exactly while the
   new surface sweeps across that element (the nav when the circle reaches the top, the text when it reaches the text). */
.work, .nav {
  transition-property: --w-bg, --w-ink, --w-ink-2, --w-line, --w-chip, --w-accent, --w-title;
  transition-duration: 480ms; transition-delay: 0ms; transition-timing-function: ease;
}

/* ---------- The five worlds: surfaces ----------
   Opaque fixed layers. The incoming one spreads out of the project's own screenshot
   (clip-path, set from JS) so the page soaks up the next brand's texture. */
.worlds { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.world { position: absolute; inset: 0; opacity: 0; overflow: hidden; transition: opacity 480ms ease; }
.world.is-on { opacity: 1; transition: none; }
.world--keel { background-color: #0e0f11; background-image: radial-gradient(ellipse 50% 60% at 92% 0%, rgb(52 211 153 / 0.16), transparent 70%), linear-gradient(rgb(255 255 255 / 0.035) 1px, transparent 1px); background-size: 100% 100%, 100% 40px; }
.world--mabel { background-color: #fff1de; background-image: radial-gradient(rgb(255 111 145 / 0.26) 2.6px, transparent 3.2px), radial-gradient(rgb(255 196 64 / 0.32) 2.2px, transparent 2.8px), radial-gradient(rgb(120 196 96 / 0.22) 2px, transparent 2.6px), radial-gradient(circle at 85% 12%, rgb(255 212 92 / 0.35), transparent 32%); background-size: 42px 42px, 42px 42px, 42px 42px, 100% 100%; background-position: 0 0, 21px 21px, 21px 0, 0 0; }
.world--ardent { background-color: #efeae0; background-image: radial-gradient(ellipse 80% 70% at 50% 45%, transparent 55%, rgb(60 40 20 / 0.12)), url("../the-ardent/assets/img/grain.webp"); background-size: 100% 100%, 160px 160px; background-blend-mode: normal, soft-light; }
.world--flood { background-color: #0b0b0b; background-image: radial-gradient(ellipse 40% 70% at 12% -12%, rgb(255 255 236 / 0.2), transparent 70%), radial-gradient(ellipse 40% 70% at 88% -12%, rgb(255 255 236 / 0.16), transparent 70%); }
/* electric noise: a lime static tile that jumps between offsets, like a signal that never settles */
.world--flood::before { content: ""; position: absolute; inset: -80px; opacity: 0.2; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.84 0 0 0 0 1 0 0 0 0 0.23 0 0 0 1.4 -0.55'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
.world--marram { background-color: #eee8dd; background-image: linear-gradient(180deg, #e9d6c3 0%, #eee8dd 45%, #dde2dc 100%); }
.world--ostra { background-color: #d4d0c7; background-image: radial-gradient(ellipse 60% 50% at 70% 40%, rgb(255 255 255 / 0.35), transparent 70%), repeating-linear-gradient(90deg, rgb(255 255 255 / 0.05) 0 1px, transparent 1px 3px); }
/* sea mist: two soft banks that drift very slowly across the sand */
.world--marram::before { content: ""; position: absolute; inset: -15%; background: radial-gradient(38% 26% at 28% 38%, rgb(255 255 255 / 0.75), transparent 72%), radial-gradient(34% 24% at 72% 66%, rgb(226 232 226 / 0.85), transparent 72%), radial-gradient(30% 20% at 60% 18%, rgb(255 250 244 / 0.6), transparent 70%); }
@media (prefers-reduced-motion: no-preference) {
  .world--flood.is-on::before { animation: static 420ms steps(1) infinite; }
  .world--marram.is-on::before { animation: mist 26s ease-in-out infinite alternate; }
}
@keyframes static { 0% { transform: translate(0, 0); } 25% { transform: translate(-37px, 23px); } 50% { transform: translate(19px, -41px); } 75% { transform: translate(-53px, -11px); } }
@keyframes mist { from { transform: translate3d(-4%, 1.5%, 0); } to { transform: translate3d(4%, -1.5%, 0); } }

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; -webkit-tap-highlight-color: transparent; scroll-padding-top: 84px; }
/* smooth in-page jumps, but only once loaded: arriving at #project lands there, it does not glide */
html.is-smooth { scroll-behavior: smooth; }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font-family: var(--f-sans); font-size: 1.0625rem; line-height: 1.55; font-optical-sizing: auto;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: clip;
}
h1, h2, h3, h4, p, ul, ol, dl, dd, figure { margin: 0; }
h1, h2, h3, .section-title { font-family: var(--f-display); }
ul, ol { padding: 0; list-style: none; }
a { color: inherit; }
a, button, label { touch-action: manipulation; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
img { display: block; max-width: 100%; }
svg { display: block; }
p, li, dd { text-wrap: pretty; }
::selection { background: var(--ink); color: var(--bg); }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; border-radius: 6px; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.skip { position: fixed; z-index: 100; left: 16px; top: 12px; padding: 10px 16px; border-radius: 999px; background: var(--ink); color: var(--bg); text-decoration: none; font-weight: 600; transform: translateY(-200%); transition: transform var(--t-ui) var(--ease-out); }
.skip:focus { transform: none; }
.wrap { width: 100%; max-width: calc(var(--max) + 2 * var(--pad)); margin-inline: auto; padding-inline: var(--pad); }
main, .foot { position: relative; z-index: 1; }
/* the hero glow and the arriving deck reach past the edge; clip (not hidden) keeps the process scene sticky */
main { overflow-x: clip; }
.hero, .process, .foot { background: var(--bg); }
.browser__url, dt, .lang__btn, .board__checks, .stage__pause { font-family: var(--f-mono); font-size: 0.8125rem; letter-spacing: 0.01em; }
.section-title { font-size: var(--fs-h2); font-weight: 600; line-height: 1; letter-spacing: -0.035em; font-variation-settings: "opsz" 96; text-wrap: balance; }
/* a non-English page waits for its words, so nobody reads one language and then another */
.i18n-wait [data-i18n] { visibility: hidden; animation: i18n-safety 0s 0.4s forwards; }
@keyframes i18n-safety { to { visibility: visible; } }

/* sections that live inside a world read their colours from it */
.work, .nav {
  --bg: var(--w-bg); --ink: var(--w-ink); --ink-2: var(--w-ink-2); --ink-3: var(--w-ink-2);
  --line: var(--w-line); --line-strong: color-mix(in srgb, var(--w-ink) 30%, transparent); --surface-2: var(--w-chip); --mark-ink: var(--w-bg);
  color: var(--ink);
}


/* ---------- Nav ---------- */
.nav { position: sticky; top: 0; z-index: 40; isolation: isolate; backdrop-filter: saturate(1.4) blur(14px); -webkit-backdrop-filter: saturate(1.4) blur(14px); box-shadow: 0 1px 0 transparent; }
.nav.is-stuck { box-shadow: 0 1px 0 var(--line); }
/* the bar's surface: one translucent tint per world, stacked like the page's world layers and revealed by the same circle */
.nav__tint { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.tint { position: absolute; inset: 0; opacity: 0; transition: opacity 480ms ease; }
.tint.is-on { opacity: 1; transition: none; }
.tint[data-w="base"] { background: color-mix(in srgb, var(--bg) 84%, transparent); }
/* the world tints only cover the part of the bar that has the work section behind it (set per frame) */
.nav__tw { position: absolute; inset: 0; }
/* while the hero or the process is what sits behind the bar, the bar keeps the plain page's ink */
:root[data-world] .nav.is-off-world { --w-bg: inherit; --w-ink: inherit; --w-ink-2: inherit; --w-line: inherit; --w-chip: inherit; --w-accent: inherit; --w-title: inherit; }
.tint[data-w="keel"] { background: rgb(14 15 17 / 0.92); }
.tint[data-w="mabel"] { background: rgb(255 241 222 / 0.92); }
.tint[data-w="ardent"] { background: rgb(239 234 224 / 0.92); }
.tint[data-w="flood"] { background: rgb(11 11 11 / 0.92); }
.tint[data-w="marram"] { background: rgb(238 232 221 / 0.92); }
.tint[data-w="ostra"] { background: rgb(212 208 199 / 0.92); }
.nav__inner { display: flex; align-items: center; gap: 12px; height: var(--nav-h); }
.brand { display: inline-flex; align-items: center; gap: 2px; text-decoration: none; min-height: 44px; color: var(--ink); }
.brand__mark { width: 30px; height: 30px; overflow: visible; }
.brand__tile { fill: currentColor; }
.brand__z, .brand__t { fill: none; stroke: var(--mark-ink); stroke-width: 2.6; stroke-linecap: square; }
.brand__name { display: inline-block; font-weight: 650; font-size: 1.125rem; letter-spacing: -0.03em; line-height: 1; padding: 4px 2px 4px 1px; }
.mk { opacity: 0; transform: scale(0.82) rotate(-8deg); transform-box: view-box; transform-origin: 50% 50%; transition: opacity 180ms ease, transform 360ms var(--ease-out); }
.mk.is-on { opacity: 1; transform: none; }
.f-geist { font-family: "W Geist", var(--f-sans); }
.f-geist-mono { font-family: "W Geist Mono", var(--f-mono); }
.f-bagel { font-family: "W Bagel", var(--f-display); }
.f-fredoka { font-family: "W Fredoka", var(--f-sans); }
.f-fraunces { font-family: "W Fraunces", Georgia, serif; font-weight: 400; }
.f-fraunces-i { font-family: "W Fraunces", Georgia, serif; font-style: italic; font-weight: 300; }
.f-newsreader { font-family: "W Newsreader", Georgia, serif; }
.f-instrument { font-family: "W Instrument", var(--f-sans); }
.f-anton { font-family: "W Anton", Impact, var(--f-display); font-weight: 400; }
.f-archivo { font-family: "W Archivo", var(--f-sans); }
/* the three newest faces wait for the load event, so they never compete with the first screen */
.is-smooth .f-schibsted { font-family: "W Schibsted", var(--f-sans); font-weight: 600; }
.is-smooth .f-dmmono { font-family: "W DM Mono", var(--f-mono); }
.f-cormorant { font-family: "W Cormorant", Georgia, serif; font-weight: 400; }
.f-cormorant-i { font-family: "W Cormorant", Georgia, serif; font-style: italic; font-weight: 300; }
.f-jost { font-family: "W Jost", var(--f-sans); font-weight: 400; }
.f-bricolage { font-family: var(--f-sans); }
.nav nav { margin-left: auto; }
.nav__links { display: flex; gap: 2px; }
.nav__links a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 12px; text-decoration: none; font-size: 0.9375rem; color: var(--ink-2); transition: color var(--t-ui) ease; }
.nav__links a[aria-current="true"] { color: var(--ink); }
/* underlines slide in from the left and leave to the right */
.nav__links a { position: relative; }
.nav__links a::before { content: ""; position: absolute; left: 12px; right: 12px; bottom: 11px; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: right; transition: transform 260ms var(--ease-out); }
.nav__links a[aria-current="true"]::before { transform: scaleX(1); transform-origin: left; }
@media (hover: hover) and (pointer: fine) { .nav__links a:hover { color: var(--ink); } .nav__links a:hover::before { transform: scaleX(1); transform-origin: left; } }
.lang { display: flex; align-items: center; margin-left: 4px; }
.lang__btn { position: relative; min-width: 34px; min-height: 44px; padding: 0 6px; font-size: 0.75rem; letter-spacing: 0.04em; color: var(--ink-3); transition: color var(--t-ui) ease; }
.lang__btn::before { content: ""; position: absolute; left: 8px; right: 8px; bottom: 12px; height: 1px; background: currentColor; transform: scaleX(0); transition: transform 260ms var(--ease-out); }
.lang__btn[aria-pressed="true"] { color: var(--ink); }
.lang__btn[aria-pressed="true"]::before { transform: scaleX(1); }
@media (hover: hover) and (pointer: fine) { .lang__btn:hover { color: var(--ink); } }
.theme { position: relative; display: grid; place-items: center; width: 44px; height: 44px; flex: none; border-radius: 999px; color: var(--ink-2); transition: color var(--t-ui) ease, background-color var(--t-ui) ease, transform var(--t-press) var(--ease-out); }
.theme:active { transform: scale(0.95); }
.theme svg { position: absolute; width: 18px; height: 18px; transition: opacity 200ms ease, transform 300ms var(--ease-out); }
.theme__moon { opacity: 0; transform: rotate(-40deg) scale(0.8); }
:root[data-theme="dark"] .theme__sun { opacity: 0; transform: rotate(40deg) scale(0.8); }
:root[data-theme="dark"] .theme__moon { opacity: 1; transform: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) .theme__sun { opacity: 0; transform: rotate(40deg) scale(0.8); }
  :root:not([data-theme]) .theme__moon { opacity: 1; transform: none; }
}
@media (hover: hover) and (pointer: fine) { .theme:hover { color: var(--ink); background: var(--surface-2); } }
@media (max-width: 760px) { .nav nav { display: none; } .lang { margin-left: auto; } }
@media (max-width: 380px) { .nav .brand__name { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); } .nav__inner { gap: 4px; } }

/* ---------- Pills ---------- */
.pill {
  display: inline-flex; align-items: center; gap: 10px; min-height: 48px; padding: 0 20px; border-radius: 999px;
  text-decoration: none; font-weight: 550; font-size: 0.9688rem; color: var(--ink);
  box-shadow: inset 0 0 0 1px var(--line-strong); background: transparent;
  transition: background-color var(--t-ui) ease, color var(--t-ui) ease, box-shadow var(--t-ui) ease, transform var(--t-press) var(--ease-out);
}
.pill svg { width: 16px; height: 16px; flex: none; transition: transform 240ms var(--ease-out); }
.pill:active { transform: scale(0.97); }
.pill--solid { background: var(--ink); color: var(--bg); box-shadow: none; }
.pill--lg { min-height: 60px; padding: 0 28px; font-size: 1.0625rem; }
@media (hover: hover) and (pointer: fine) {
  .pill:hover { box-shadow: inset 0 0 0 1px var(--ink); background: color-mix(in srgb, var(--ink) 5%, transparent); }
  .pill--solid:hover { background: color-mix(in srgb, var(--ink) 86%, var(--bg)); box-shadow: none; }
  a.pill:hover svg:last-child { transform: translateX(3px); }
  .how:hover svg { transform: translateY(2px); }
  .how[aria-expanded="true"]:hover svg { transform: rotate(180deg) translateY(2px); }
}
/* copy: the label swaps to "Copied" for a second, in place, then swaps back */
.copy__label { display: inline-grid; }
.copy__idle, .copy__done { grid-area: 1 / 1; display: inline-flex; align-items: center; gap: 6px; transition: opacity 160ms ease, filter 160ms ease, transform 220ms var(--ease-out); }
.copy__done { justify-content: center; opacity: 0; filter: blur(2px); transform: translateY(3px); }
.copy__done svg { width: 15px; height: 15px; color: var(--live); }
.copy.is-done .copy__idle { opacity: 0; filter: blur(2px); transform: translateY(-3px); }
.copy.is-done .copy__done { opacity: 1; filter: none; transform: none; }
.copy.is-done { box-shadow: inset 0 0 0 1px var(--live); }
.handle.copy.is-done, .direct__item.copy.is-done { box-shadow: none; }
.copy__done { white-space: nowrap; }

/* ---------- Hero ---------- */
.hero {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); align-items: start;
  padding-top: clamp(32px, 5.6vw, 92px); padding-bottom: clamp(56px, 7vw, 112px);
}
.hero__title { grid-column: 1 / -1; max-width: 17.5em; font-size: var(--fs-hero); font-weight: 600; line-height: 1; letter-spacing: -0.04em; font-variation-settings: "opsz" 96; }
.hero__lead { display: block; text-wrap: balance; }
/* "your business." sits on its own line, so whichever face it takes, nothing else moves */
.hero__brand { position: relative; display: block; height: 1.18em; margin-top: 0.06em; white-space: nowrap; }
.hero__w, .hero__ghost > .hero__w { position: relative; display: inline-block; vertical-align: top; line-height: 1.1; font-size: calc(1em * var(--k, 1) * var(--fit, 1)); }
.hero__ghost { position: absolute; left: 0; top: 0; pointer-events: none; }
.hero__w::before { content: ""; position: absolute; z-index: -1; inset: 0.08em -0.14em 0.02em; border-radius: 0.28em; background: var(--chip, transparent); transform-origin: left center; }
.hero__brand, .hero__ghost { isolation: isolate; }
.hl { display: inline-block; white-space: pre; }
[data-b="keel"] > .hero__w { --chip: #10b981; font-family: "W Geist", var(--f-display); font-weight: 600; letter-spacing: -0.06em; }
[data-b="keel"] > .hero__w::before { inset: auto 0.06em -0.04em 0; height: 0.07em; border-radius: 0.04em; }
[data-b="mabel"] > .hero__w { --k: 0.86; --chip: #ff8fab; font-family: "W Bagel", var(--f-display); font-weight: 400; letter-spacing: -0.01em; color: #3b2420; padding-inline: 0.1em; }
[data-b="ardent"] > .hero__w { --k: 1.06; font-family: "W Fraunces", Georgia, serif; font-style: italic; font-weight: 300; letter-spacing: -0.035em; font-variation-settings: "opsz" 144; color: #b02a17; }
[data-b="flood"] > .hero__w { --k: 1.04; --chip: #d7ff3a; font-family: "W Anton", var(--f-display); font-weight: 400; text-transform: uppercase; letter-spacing: 0.005em; color: #0b0b0b; padding-inline: 0.12em; }
[data-b="marram"] > .hero__w { --k: 1.16; font-family: "W Cormorant", Georgia, serif; font-style: italic; font-weight: 300; letter-spacing: -0.01em; color: #8a5236; }
/* Ostra: the grotesk, tight, with the release button */
[data-b="ostra"] > .hero__w { --k: 0.96; font-family: "W Schibsted H", var(--f-display); font-weight: 700; letter-spacing: -0.055em; color: #1b1b1a; }
[data-b="ostra"] > .hero__w::before { inset: 0.16em -0.34em auto auto; width: 0.2em; height: 0.2em; border-radius: 50%; background: #e2582c; box-shadow: inset 0 -0.03em 0 rgb(0 0 0 / 0.25); }
:root[data-theme="dark"] [data-b="ardent"] > .hero__w { color: #ef6a52; }
:root[data-theme="dark"] [data-b="marram"] > .hero__w { color: #d79a77; }
:root[data-theme="dark"] [data-b="ostra"] > .hero__w { color: #e2dfd8; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) [data-b="ardent"] > .hero__w { color: #ef6a52; }
  :root:not([data-theme="light"]) [data-b="marram"] > .hero__w { color: #d79a77; }
  :root:not([data-theme="light"]) [data-b="ostra"] > .hero__w { color: #e2dfd8; }
}
.hero__copy { grid-column: 1 / span 5; margin-top: clamp(28px, 3.4vw, 52px); }
.hero__lede { font-size: var(--fs-lead); line-height: 1.5; color: var(--ink-2); max-width: 38ch; }
.contact-row { margin-top: 30px; display: flex; flex-wrap: wrap; gap: 10px; }
.social { margin-top: 14px; display: flex; gap: 20px; }
.social > li > :is(a, button) { position: relative; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; color: var(--ink-2); text-decoration: none; font-size: 0.9375rem; transition: color var(--t-ui) ease, transform var(--t-press) var(--ease-out); }
.social > li > :is(a, button)::after { content: ""; position: absolute; left: 24px; right: 0; bottom: 11px; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: right; transition: transform 260ms var(--ease-out); }
.social > li > button:active { transform: scale(0.97); }
.social svg { width: 16px; height: 16px; flex: none; }
.handle__id { font-family: var(--f-mono); font-size: 0.8125rem; letter-spacing: 0; color: var(--ink); }
.handle.is-done::after { opacity: 0; }
@media (hover: hover) and (pointer: fine) { .social > li > :is(a, button):hover { color: var(--ink); } .social > li > :is(a, button):hover::after { transform: scaleX(1); transform-origin: left; } }

.stage { grid-column: 7 / -1; position: relative; isolation: isolate; margin-top: clamp(28px, 3.4vw, 52px); }
/* a soft light behind the stage, in the colour of whichever project it shows */
.stage__glow { position: absolute; z-index: -1; inset: -22% -14% -6% -10%; pointer-events: none; background: radial-gradient(closest-side, var(--glow), transparent); transition: --glow 900ms ease; }
.stage[data-b="keel"] .stage__glow { --glow: rgb(16 185 129 / 0.3); }
.stage[data-b="mabel"] .stage__glow { --glow: rgb(255 111 145 / 0.34); }
.stage[data-b="ardent"] .stage__glow { --glow: rgb(194 50 29 / 0.22); }
.stage[data-b="flood"] .stage__glow { --glow: rgb(184 221 28 / 0.4); }
.stage[data-b="marram"] .stage__glow { --glow: rgb(164 104 74 / 0.28); }
.stage[data-b="ostra"] .stage__glow { --glow: rgb(226 88 44 / 0.22); }
.stage__frames { position: relative; padding: 0 0 clamp(36px, 4vw, 56px) clamp(28px, 4vw, 64px); }
.stage__browser { position: relative; z-index: 1; }
.stage__phone { position: absolute; left: 0; bottom: 0; width: clamp(96px, 10vw, 140px); z-index: 2; }
/* the deck: on arrival the other four projects fan out from behind the frame, then fold back into it */
.deck { position: absolute; z-index: 0; top: 0; right: 0; left: clamp(28px, 4vw, 64px); aspect-ratio: 16 / 11.2; pointer-events: none; }
.deck__card { position: absolute; inset: 0; border-radius: var(--r-md); background: var(--frame) no-repeat 0 30px / 100% auto; box-shadow: 0 0 0 1px var(--line), var(--shadow); opacity: 0; transform-origin: 30% 130%; }
/* first paint of a fresh visit: the hero waits, invisibly, for its entrance (and never longer than 2.5 s) */
.intro .hero__lead, .intro .hero__brand, .intro .hero__copy > *, .intro .stage__phone, .intro .stage__bar { opacity: 0; animation: intro-safety 0s 1.1s forwards; }
@keyframes intro-safety { to { opacity: 1; } }
.hw { display: inline-block; clip-path: inset(-0.2em -0.1em -0.28em -0.1em); vertical-align: top; }
.hw > span { display: inline-block; }
.stage .browser__view, .stage .phone__view { position: relative; }
.stage__img, .stage__m { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top; opacity: 0; transition: opacity 600ms ease; }
.stage__img.is-on, .stage__m.is-on { opacity: 1; }
.stage__img:first-child, .stage__m:first-child { position: relative; }
.stage__bar { margin-top: 18px; display: flex; align-items: flex-start; gap: 16px; padding-left: clamp(28px, 4vw, 64px); }
.stage__index { flex: 1; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; }
.stage__index button { position: relative; width: 100%; min-height: 44px; padding: 12px 0 0; text-align: left; font-size: 0.8125rem; line-height: 1.25; color: var(--ink-3); transition: color var(--t-ui) ease; }
.stage__index button::before, .stage__index button::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px; border-radius: 2px; }
.stage__index button::before { background: var(--line); }
.stage__index button::after { background: var(--c); transform: scaleX(0); transform-origin: left; }
.stage__index button[aria-pressed="true"] { color: var(--ink); }
.stage__index button[aria-pressed="true"]::after { transform: scaleX(1); }
.stage.is-playing .stage__index button[aria-pressed="true"]::after { animation: progress var(--dwell, 4200ms) linear both; }
@keyframes progress { from { transform: scaleX(0); } }
@media (hover: hover) and (pointer: fine) { .stage__index button:hover { color: var(--ink); } }
.stage__pause { flex: none; min-height: 44px; padding: 12px 0 0 4px; font-size: 0.75rem; color: var(--ink-3); text-decoration: underline; text-underline-offset: 4px; transition: color var(--t-ui) ease; }
@media (hover: hover) and (pointer: fine) { .stage__pause:hover { color: var(--ink); } }
@media (max-width: 900px) {
  .hero { padding-bottom: clamp(64px, 12vw, 96px); }
  .hero__copy, .stage { grid-column: 1 / -1; }
  .stage { margin-top: 44px; }
}
@media (max-width: 560px) { .stage__bar { padding-left: 0; } .stage__index button { font-size: 0.75rem; } }
/* six names do not fit under a phone-sized stage: the bars stay, the names stay readable to screen readers, and the url bar names the project */
@media (max-width: 760px) { .stage__index button { font-size: 0; color: transparent; } }

/* ---------- Frames ---------- */
.browser { display: block; overflow: hidden; border-radius: var(--r-md); background: var(--frame); box-shadow: 0 0 0 1px var(--line), var(--shadow); text-decoration: none; }
.browser__bar { position: relative; display: flex; align-items: center; gap: 6px; height: 30px; padding: 0 12px; }
.browser__bar i { width: 9px; height: 9px; border-radius: 50%; background: var(--frame-dot); }
.browser__url { position: absolute; left: 50%; transform: translateX(-50%); padding: 2px 12px; border-radius: 6px; background: color-mix(in srgb, var(--surface) 70%, transparent); color: var(--ink-2); font-size: 0.6875rem; white-space: nowrap; }
.browser__view { position: relative; overflow: hidden; aspect-ratio: 16 / 10; background: var(--surface); }
.browser__view > img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.phone { padding: 6px; border-radius: 26px; background: #121211; box-shadow: 0 0 0 1px rgb(255 255 255 / 0.08), var(--shadow-lift); }
.phone__view { position: relative; overflow: hidden; border-radius: 20px; aspect-ratio: 390 / 844; background: #fff; }
.phone__view img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
/* hover on a project: the screenshot comes a little closer, nothing else moves */
.shot { transition: transform 320ms var(--ease-out), box-shadow 320ms var(--ease-out); }
@media (hover: hover) and (pointer: fine) {
  .case__media:has(.shot:hover) .shot, .case:has(.case__actions .pill--solid:hover) .shot { transform: scale(1.02); box-shadow: 0 0 0 1px var(--line), var(--shadow-lift); }
}

/* ---------- Build: a screenshot assembles the way the page was made ----------
   guides, then grey blocks where every element sits, then the type alone, then images and colour. */
.build { position: absolute; inset: 0; z-index: 1; pointer-events: none; background: var(--b-paper); }
.build__cols { position: absolute; inset: 0 7.2%; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 1.4%; }
.build__cols i { border-inline: 1px solid var(--b-guide); background: var(--b-guide-fill); transform: scaleY(0); transform-origin: 50% 0; }
.build__blk { position: absolute; border-radius: 2px; background: var(--b-text); opacity: 0; transform-origin: 0 50%; }
.build__blk[data-k="m"] { background: var(--b-media); border-radius: 3px; }
.build__blk[data-k="s"] { background: var(--b-surface); }
.build__blk[data-k="u"] { background: var(--b-ui); border-radius: 999px; }
.build__type { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top; clip-path: inset(0 0 100% 0); }
.shot.is-pending .shot__img, .case.is-pending-phone .case__phone { opacity: 0; }
.case__phone { transition: opacity 500ms ease, transform 700ms var(--ease-out); }
.case.is-pending-phone .case__phone { transform: translateY(16px); }

/* ---------- Work ---------- */
.work { position: relative; padding-bottom: clamp(48px, 6vw, 96px); padding-top: clamp(48px, 6vw, 96px); }
.work__head { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--gap); align-items: end; padding-bottom: clamp(32px, 4vw, 56px); border-bottom: 1px solid var(--line); }
.work__head .section-title { grid-column: 1 / span 6; }
.work__note { grid-column: 8 / -1; color: var(--ink-2); max-width: 46ch; }
@media (max-width: 900px) { .work__head { display: block; } .work__note { margin-top: 18px; } }

.case { position: relative; padding-block: clamp(64px, 8vw, 128px); }
.case__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--gap); align-items: center; }
.case__media { position: relative; }
.case__phone { position: absolute; width: clamp(92px, 11vw, 168px); bottom: clamp(-40px, -3vw, -20px); z-index: 2; }
/* each title is set in its own brand's face */
.case__title { font-size: var(--fs-case); font-weight: 400; line-height: 1; letter-spacing: -0.02em; color: var(--w-title); text-wrap: balance; }
.case__title.f-geist { font-weight: 600; letter-spacing: -0.055em; }
.case__title.f-bagel { font-size: calc(var(--fs-case) * 0.86); letter-spacing: -0.01em; line-height: 1.04; }
.case__title.f-fraunces-i { letter-spacing: -0.035em; font-variation-settings: "opsz" 144; }
.case__title.f-anton { font-size: calc(var(--fs-case) * 1.08); letter-spacing: 0.005em; }
.case__title.f-cormorant-i { font-size: calc(var(--fs-case) * 1.12); letter-spacing: -0.01em; }
.case__brief { margin-top: 18px; font-size: var(--fs-lead); line-height: 1.45; color: var(--ink-2); max-width: 40ch; }
.specs { margin-top: 26px; display: grid; gap: 14px; padding-top: 22px; border-top: 1px solid var(--line); }
.specs > div { display: grid; grid-template-columns: 7.5rem minmax(0, 1fr); gap: 12px; align-items: baseline; }
dt { color: var(--ink-3); text-transform: uppercase; letter-spacing: 0.06em; font-size: 0.6875rem; }
.specs dd { font-size: 0.9688rem; }
/* type: every face named in itself; the lead face rewrites itself out of the previous project's */
.faces { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 16px; }
.face { position: relative; display: inline-block; max-width: 100%; font-size: 1.0625rem; line-height: 1.2; color: var(--ink); }
.face--lead { font-size: 1.75rem; line-height: 1.15; }
.face.f-anton { letter-spacing: 0.01em; }
.face.f-cormorant { font-size: 1.15em; }
.face--lead.f-cormorant { font-size: 1.95rem; }
.face.f-fraunces { font-variation-settings: "opsz" 72; }
.rw { position: relative; display: inline-block; }
.rw__c { display: inline-block; white-space: pre; }
.rw__old { position: absolute; left: 0; top: 0; white-space: nowrap; pointer-events: none; }
.rw__old .rw__c { will-change: opacity; }
/* palette: the colours start as one drop of mixed ink and pull apart into their own tones */
.swatches { position: relative; display: flex; gap: 6px; isolation: isolate; }
.sw { width: 26px; height: 26px; border-radius: 50%; background: var(--s); box-shadow: inset 0 0 0 1px rgb(127 127 127 / 0.35); }
.swatches.is-ink { filter: url(#goo); }
.swatches.is-ink .sw { box-shadow: none; }
.swatches.is-ink[data-ink="light"] .sw { mix-blend-mode: multiply; }
.swatches.is-ink[data-ink="dark"] .sw { mix-blend-mode: screen; }
.case__actions { margin-top: 30px; display: flex; flex-wrap: wrap; gap: 10px; }
:root[data-world="flood"] #floodlight .pill--solid { background: #d7ff3a; color: #0b0b0b; }
.how svg { transition: transform 300ms var(--ease-out); }
.how[aria-expanded="true"] svg { transform: rotate(180deg); }

/* layout variants: different weights and alignments down the page */
.case--wide .case__media { grid-column: 1 / span 8; }
.case--wide .case__text { grid-column: 9 / -1; }
.case--wide .case__phone { right: -28px; }
.case--flip .case__media { grid-column: 6 / -1; grid-row: 1; }
.case--flip .case__text { grid-column: 1 / span 4; grid-row: 1; }
.case--flip .case__phone { left: -40px; }
.case--editorial .case__grid { align-items: start; }
.case--editorial .case__text { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 0 var(--gap); }
.case--editorial .case__title { grid-column: 1 / span 7; grid-row: 1; font-size: clamp(3rem, 1.4rem + 5.4vw, 7.5rem); }
.case--editorial .case__brief { grid-column: 1 / span 5; grid-row: 2; }
.case--editorial .specs { grid-column: 8 / -1; grid-row: 1 / span 3; margin-top: 18px; align-self: end; }
.case--editorial .case__actions { grid-column: 1 / span 6; grid-row: 3; }
.case--editorial .case__media { grid-column: 3 / span 9; margin-top: clamp(24px, 3vw, 48px); }
.case--editorial .case__phone { right: -48px; bottom: 32px; }
.case--calm .case__media { grid-column: 1 / span 7; }
.case--calm .case__text { grid-column: 9 / -1; }
.case--calm .case__phone { right: -36px; }

/* "How I made it" */
.how__panel { grid-column: 1 / -1; display: grid; grid-template-rows: 0fr; transition: grid-template-rows 420ms var(--ease-out); }
.how__panel.is-open { grid-template-rows: 1fr; }
.how__inner { overflow: hidden; min-height: 0; }
.how__panel:not(.is-open) .how__inner { visibility: hidden; transition: visibility 0s 420ms; }
.how__steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap); margin-top: clamp(40px, 5vw, 64px); padding-top: 28px; border-top: 1px solid var(--line); }
.how__steps > li { opacity: 0; transform: translateY(8px); transition: opacity 300ms ease, transform 420ms var(--ease-out); }
.how__panel.is-open .how__steps > li { opacity: 1; transform: none; }
.how__panel.is-open .how__steps > li:nth-child(2) { transition-delay: 50ms; }
.how__panel.is-open .how__steps > li:nth-child(3) { transition-delay: 100ms; }
.how__steps h4 { font-size: 1.0625rem; font-weight: 600; letter-spacing: -0.01em; }
.how__steps h4::after { content: ""; display: block; width: 18px; height: 2px; margin-top: 10px; background: var(--w-accent); }
.how__steps p, .how__steps ul { margin-top: 10px; color: var(--ink-2); font-size: 0.9688rem; }
.how__steps ul { display: grid; gap: 8px; }
.how__steps ul li { padding-left: 16px; position: relative; }
.how__steps ul li::before { content: ""; position: absolute; left: 0; top: 0.75em; width: 7px; height: 1px; background: currentColor; }

@media (max-width: 1100px) {
  .case--wide .case__media, .case--calm .case__media { grid-column: 1 / span 7; }
  .case--wide .case__text, .case--calm .case__text { grid-column: 8 / -1; }
  .case--flip .case__media { grid-column: 6 / -1; }
  .case--flip .case__text { grid-column: 1 / span 5; }
  .specs > div { grid-template-columns: 1fr; gap: 6px; }
}
@media (max-width: 900px) {
  .case__grid, .case--editorial .case__text { grid-template-columns: minmax(0, 1fr); }
  .case__media, .case__text, .case--flip .case__media, .case--flip .case__text,
  .case--editorial .case__media, .case--editorial .case__text > * { grid-column: 1 / -1 !important; grid-row: auto !important; }
  .case__media { margin-right: clamp(36px, 10vw, 72px); margin-top: 0 !important; }
  .case__phone, .case--flip .case__phone, .case--editorial .case__phone { left: auto; right: calc(-1 * clamp(36px, 10vw, 72px)); bottom: -28px; width: clamp(84px, 22vw, 140px); }
  .case__text { margin-top: 48px; }
  .case--editorial .case__text { margin-top: 0; }
  .case--editorial .case__media { margin-top: 32px !important; order: 2; }
  .case--editorial .specs { margin-top: 26px; }
  .specs > div { grid-template-columns: 7.5rem minmax(0, 1fr); }
  .how__steps { grid-template-columns: 1fr; gap: 26px; }
}
@media (max-width: 480px) { .specs > div { grid-template-columns: 1fr; gap: 6px; } }

/* ---------- Process: one piece, from pencil sketch to a tested screen ----------
   The scene holds still (sticky) while the scroll tells it. The text and the artboard read the same step,
   so they change on the same frame; a rail shows where you are inside the four. */
.process { position: relative; padding-top: var(--section); border-top: 1px solid var(--line); }
.process__head { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--gap); align-items: end; }
.process__head .section-title { grid-column: 1 / span 6; }
.process__head p { grid-column: 8 / -1; color: var(--ink-2); max-width: 44ch; }
.story { --step-len: 52svh; position: relative; margin-top: clamp(16px, 3vw, 40px); }
.story__pin { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--gap); align-items: center; padding-block: clamp(40px, 6vw, 88px); }
.story__text { grid-column: 1 / span 5; }
@media (min-width: 1101px) { .story__stage { grid-column: 6 / -1 !important; padding-left: clamp(0px, 2vw, 32px); } }
.story__stage { grid-column: 7 / -1; display: flex; flex-direction: column; gap: 18px; }
.story__frame { position: relative; }

/* rail: the same progress bars as the hero stage, now four steps you can also jump between */
.story__rail ol { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px 10px; }
.story__rail button { position: relative; width: 100%; min-height: 44px; padding: 14px 0 0; text-align: left; font-size: 0.8125rem; overflow-wrap: anywhere; display: flex; align-items: baseline; gap: 7px; line-height: 1.2; color: var(--ink-3); transition: color var(--t-ui) ease; }
.story__rail button::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px; border-radius: 2px; background: var(--line); }
.story__fill { position: absolute; left: 0; right: 0; top: 0; height: 2px; border-radius: 2px; background: var(--ink); transform: scaleX(0); transform-origin: left; }
.story__rail button[aria-current="step"] { color: var(--ink); }
@media (hover: hover) and (pointer: fine) { .story__rail button:hover { color: var(--ink); } }
/* on a narrow screen the step's own title sits right below: the rail keeps only its bars (names stay for screen readers) */
@media (max-width: 480px) { .story__rail button { min-height: 40px; padding-top: 10px; } .story__rail button span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } }

.story__steps { margin-top: clamp(28px, 4vw, 52px); }
.story__step h3 { font-size: clamp(2rem, 1.2rem + 2.6vw, 3.75rem); font-weight: 600; line-height: 1; letter-spacing: -0.04em; font-variation-settings: "opsz" 96; }
.story__step p { margin-top: 18px; max-width: 38ch; font-size: var(--fs-lead); line-height: 1.5; color: var(--ink-2); }

/* without the scene (no JS, very short screens): a plain list beside the finished artboard */
.story__step + .story__step { margin-top: 40px; }

.js .story.is-scene { height: calc(100svh - var(--nav-h) + 8 * var(--step-len)); }
.js .is-scene .story__pin { position: sticky; top: var(--nav-h); height: calc(100svh - var(--nav-h)); padding-block: clamp(16px, 3vh, 40px); }
.js .is-scene .story__steps { display: grid; }
.js .is-scene .story__step { grid-area: 1 / 1; margin: 0; opacity: 0; transform: translateY(18px); filter: blur(3px); pointer-events: none; transition: opacity 240ms ease, transform 240ms ease, filter 240ms ease; }
.js .is-scene .story__step.is-on { opacity: 1; transform: none; filter: none; pointer-events: auto; transition: opacity 420ms ease 140ms, transform 640ms var(--ease-out) 140ms, filter 420ms ease 140ms; }
.js .is-scene[data-dir="down"] .story__step:not(.is-on) { transform: translateY(-14px); }
.js .is-scene[data-dir="up"] .story__step:not(.is-on) { transform: translateY(14px); }
.js .is-scene.is-jump .story__step { transition: none !important; }

.board {
  position: relative; aspect-ratio: 16 / 10; overflow: hidden; border-radius: var(--r-md); container-type: inline-size;
  background: #fbfaf6; box-shadow: 0 0 0 1px var(--line), var(--shadow);
  transform-origin: 0 50%; transition: transform 760ms var(--ease-out);
}
.board > * { position: absolute; inset: 0; width: 100%; height: 100%; }
.board__paper { background-image: radial-gradient(rgb(60 58 50 / 0.16) 1px, transparent 1.4px); background-size: 2.2cqw 2.2cqw; }
.board svg { overflow: visible; }
/* 1 · the pencil: each stroke draws itself, in the order it was drawn */
.board__sketch path { fill: none; stroke: #3a3934; stroke-width: 1.5px; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; opacity: 0.86; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 520ms var(--ease-out) calc(var(--d, 0) * 1ms); }
.board.is-drawn .board__sketch path { stroke-dashoffset: 0; }
.board__sketch .thick { stroke-width: 3.2px; }
.board__wire .guide { fill: rgb(74 108 255 / 0.06); stroke: rgb(74 108 255 / 0.32); stroke-width: 1px; vector-effect: non-scaling-stroke; }
.board__wire .ln { fill: none; stroke: #23231f; stroke-width: 1.4px; vector-effect: non-scaling-stroke; }
.board__wire .tx { fill: #23231f; opacity: 0.2; }
.board__sketch { transition: opacity 360ms ease 420ms; }
/* 2 · ink: clean lines wipe in behind a blue cursor line, and the sketch lifts off */
.board__wire { clip-path: inset(0 100% 0 0); transition: clip-path 860ms var(--ease-in-out), opacity 420ms ease 260ms; }
.board__scan { width: 2px !important; left: 0; background: #4a6cff; opacity: 0; }
.board:is([data-step="1"], [data-step="2"], [data-step="3"], [data-step="4"]) .board__sketch { opacity: 0; }
.board:is([data-step="1"], [data-step="2"], [data-step="3"], [data-step="4"]) .board__wire { clip-path: inset(0 0 0 0); }
.board:is([data-step="2"], [data-step="3"], [data-step="4"]) .board__wire { opacity: 0; }
/* 3 · design: the chosen palette pours out of its swatch card and fills the layout */
.board__design { clip-path: circle(0% at 89% 91%); transition: clip-path 1000ms var(--ease-in-out); }
.board__design::before { content: ""; position: absolute; inset: 0; background: #fef6ec; }
.bd { position: absolute; display: block; opacity: 0; transform: translateY(1.2cqw) scale(0.98); transition: opacity 380ms ease, transform 680ms var(--ease-out); }
.board:is([data-step="2"], [data-step="3"], [data-step="4"]) .board__design { clip-path: circle(150% at 89% 91%); }
.board:is([data-step="2"], [data-step="3"], [data-step="4"]) .bd { opacity: 1; transform: none; transition-delay: calc(var(--i) * 70ms + 260ms); }
.bd--blob { left: 56.2%; top: -1.1%; width: 52.8%; aspect-ratio: 1; border-radius: 50%; background: #fdd3dd; }
.bd--nav { left: 11.1%; top: 1.6%; width: 77.8%; height: 7.3%; border-radius: 999px; background: #fffaf3; box-shadow: 0 0.3cqw 1.2cqw rgb(59 36 32 / 0.08); display: flex; align-items: center; gap: 2.6%; padding: 0 0.8% 0 1.2%; }
.bd--nav b { display: block; height: 22%; width: 5.5%; border-radius: 99px; background: rgb(59 36 32 / 0.55); }
.bd--nav b:first-child { height: 58%; width: auto; aspect-ratio: 1; background: #3b2420; margin-right: auto; }
.bd--nav b:last-child { height: 70%; width: 12.6%; background: #3b2420; }
.bd--h { left: 5.6%; top: 17.6%; color: #3b2420; font-size: 5.56cqw; line-height: 1.24; letter-spacing: -0.012em; white-space: nowrap; }
.bd--h > span { display: block; }
.bd__hl { display: inline-block !important; margin-left: -0.12em; padding: 0 0.16em; border-radius: 0.36em; background: #ff8fab; }
.bd--lede { left: 5.6%; top: 54.6%; width: 30%; display: grid; gap: 1.95cqw; }
.bd--lede b { display: block; height: 0.95cqw; border-radius: 99px; background: rgb(59 36 32 / 0.32); }
.bd--lede b:nth-child(2) { width: 96%; } .bd--lede b:nth-child(3) { width: 84%; } .bd--lede b:nth-child(4) { width: 92%; }
.bd--b1 { left: 5.6%; top: 74.1%; width: 16.3%; height: 6.2%; border-radius: 999px; background: #3b2420; }
.bd--b2 { left: 22.9%; top: 74.1%; width: 9.9%; height: 6.2%; border-radius: 999px; background: #fff; box-shadow: 0 0 0 0.12cqw rgb(59 36 32 / 0.18); }
.bd--arch { left: 58.9%; top: 15%; width: 35.4%; height: 70.8%; overflow: hidden; border: 0.42cqw solid #fff; border-radius: 50% 50% 3% 3% / 40% 40% 3% 3%; background: #e9d5c0; box-shadow: 0 1cqw 3cqw rgb(59 36 32 / 0.16); }
.bd--arch img { width: 100%; height: 100%; object-fit: cover; }
.bd--badge { left: 54.9%; top: 62.6%; width: 11.4%; aspect-ratio: 1; border-radius: 50%; background: #fff8ee; box-shadow: inset 0 0 0 0.35cqw #3b2420, inset 0 0 0 1.4cqw #fff8ee, inset 0 0 0 1.6cqw rgb(59 36 32 / 0.5); }
/* 4 · the real thing: the page in a browser, then on a phone, then checked at four widths */
.board__screen { opacity: 0; transition: opacity 520ms ease; }
.board__screen img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.board:is([data-step="3"], [data-step="4"]) .board__screen { opacity: 1; transition-delay: 160ms; }
.board__bar { z-index: 2; height: 6.2% !important; display: flex; align-items: center; gap: 0.7cqw; padding: 0 1.4cqw; background: #e8e6df; transform: translateY(-101%); transition: transform 560ms var(--ease-out); }
.board__bar i { width: 1cqw; height: 1cqw; border-radius: 50%; background: #c6c3b9; }
.board__bar span { margin-inline: auto; padding: 0.2cqw 1.6cqw; border-radius: 0.6cqw; background: #f6f5f1; color: #6b6b64; font-family: var(--f-mono); font-size: 1.15cqw; transform: translateX(-2cqw); }
.board:is([data-step="3"], [data-step="4"]) .board__bar { transform: none; transition-delay: 120ms; }
.board__dir { inset: auto 3% 4% auto !important; width: auto !important; height: auto !important; z-index: 1; display: flex; align-items: center; gap: 1.1cqw; padding: 1.2cqw 1.6cqw; border-radius: 1.4cqw; background: #fff; box-shadow: 0 0.6cqw 2.4cqw rgb(20 20 19 / 0.14); color: #3b2420; opacity: 0; transform: translateY(1.2cqw); transition: opacity 300ms ease 280ms, transform 520ms var(--ease-out); }
.board__dir span { font-size: 4.2cqw; line-height: 1; }
.board__dir span + span { margin-right: 0.8cqw; }
.board__dir i { width: 2.6cqw; height: 2.6cqw; border-radius: 50%; background: var(--s); }
.board[data-step="1"] .board__dir { opacity: 1; transform: none; transition-delay: 520ms; }
.board[data-step="2"] .board__dir { opacity: 0; transform: scale(0.9); }
.board__phone { position: absolute; right: 0; bottom: -7%; width: 19%; padding: 4px; border-radius: 16px; opacity: 0; transform: translate3d(14%, 6%, 0); transition: opacity 420ms ease, transform 700ms var(--ease-out); }
.board__phone .phone__view { border-radius: 12px; }
.story__frame:is([data-step="3"], [data-step="4"]) .board { transform: scale(0.82); }
.story__frame:is([data-step="3"], [data-step="4"]) .board__phone { opacity: 1; transform: none; transition-delay: 220ms; }
.board__checks { display: flex; flex-wrap: wrap; gap: 6px 18px; min-height: 22px; color: var(--ink-2); font-size: 0.75rem; }
.board__checks li { display: inline-flex; align-items: center; gap: 6px; opacity: 0; transform: translateY(4px); transition: opacity 240ms ease, transform 360ms var(--ease-out); }
.board__checks svg { width: 14px; height: 14px; color: var(--live); }
.story__stage[data-step="3"] .board__checks:not(.board__checks--live) li, .story__stage[data-step="4"] .board__checks--live li { opacity: 1; transform: none; transition-delay: calc(var(--i) * 110ms + 420ms); }

@media (max-width: 900px) {
  .process__head { display: block; } .process__head p { margin-top: 16px; }
  .story { --step-len: 62svh; }
  .story__pin { display: flex; flex-direction: column; align-items: stretch; gap: 18px; }
  .story__stage { order: -1; gap: 10px; }
  .story__frame { width: min(100%, 560px); }
  .story__steps { margin-top: 18px; }
  .story__step h3 { font-size: clamp(1.75rem, 1.3rem + 2vw, 2.5rem); }
  .story__step p { margin-top: 10px; font-size: 1.0625rem; }
  /* on a phone the scene has to fit between the bar and the bottom edge: the artboard gives way first */
  .js .is-scene .story__pin { justify-content: center; gap: 14px; }
  .js .is-scene .story__frame { width: min(100%, 560px, calc((100svh - var(--nav-h) - 330px) * 1.6)); }
}
@media (max-width: 900px) and (max-height: 700px) { .js .is-scene .story__step p { font-size: 0.9688rem; line-height: 1.45; } .js .is-scene .story__frame { width: min(100%, calc((100svh - var(--nav-h) - 300px) * 1.6)); } }

/* ---------- Footer: an invitation you can fill in ---------- */
.foot { padding-block: clamp(72px, 9vw, 136px) 40px; border-top: 1px solid var(--line); }
.foot__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: clamp(40px, 5vw, 72px) var(--gap); align-items: start; }
.foot__intro { grid-column: 1 / span 5; }
.foot__title { font-size: clamp(2.75rem, 1.2rem + 5vw, 6.5rem); font-weight: 600; line-height: 0.96; letter-spacing: -0.045em; font-variation-settings: "opsz" 96; text-wrap: balance; max-width: 9ch; }
.foot__lede { margin-top: 26px; color: var(--ink-2); font-size: var(--fs-lead); max-width: 40ch; }

/* five marks, and a sixth that is still a dashed outline until you type your business name */
.marks { margin: clamp(32px, 4vw, 52px) 0 0; }
.marks__row { display: flex; flex-wrap: wrap; gap: 10px; }
.mark { width: 52px; height: 52px; flex: none; }
.mark svg { width: 100%; height: 100%; overflow: visible; }
.mark--you { position: relative; display: grid; place-items: center; border-radius: 12px; color: var(--ink-3); box-shadow: inset 0 0 0 1.5px var(--line-strong); background: transparent; transition: background-color 360ms var(--ease-out), box-shadow 360ms ease, color 360ms ease; }
.mark--you::before { content: ""; position: absolute; inset: 0; border-radius: inherit; border: 1.5px dashed var(--line-strong); opacity: 1; transition: opacity 300ms ease; }
.mark__plus, .mark__ini { grid-area: 1 / 1; transition: opacity 240ms ease, transform 420ms var(--ease-out), filter 240ms ease; }
.mark__plus svg { width: 20px; height: 20px; }
.mark__ini { font-weight: 650; font-size: 1.25rem; letter-spacing: -0.04em; opacity: 0; transform: scale(0.8); filter: blur(3px); }
.mark--you.has-ini { background: var(--ink); color: var(--bg); box-shadow: none; }
.mark--you.has-ini::before { opacity: 0; }
.mark--you.has-ini .mark__plus { opacity: 0; transform: scale(0.6) rotate(90deg); }
.mark--you.has-ini .mark__ini { opacity: 1; transform: none; filter: none; }
.marks__cap { margin-top: 14px; max-width: 34ch; color: var(--ink-3); font-size: 0.9375rem; }
@media (prefers-reduced-motion: no-preference) {
  .js .marks .mark { opacity: 0; transform: translateY(14px) scale(0.92); transition: opacity 360ms ease, transform 620ms var(--ease-out), background-color 360ms var(--ease-out), box-shadow 360ms ease, color 360ms ease; transition-delay: calc(var(--i) * 70ms); }
  .js .marks.is-in .mark { opacity: 1; transform: none; }
  .js .marks.is-in .mark--you { transition-delay: 460ms, 460ms, 0ms, 0ms, 0ms; }
}

/* the brief: one sentence with blanks; the blanks are real fields */
.brief { grid-column: 7 / -1; padding: clamp(24px, 3.4vw, 48px); border-radius: 22px; background: var(--surface); box-shadow: 0 0 0 1px var(--line), var(--shadow); }
.brief__sentence { font-family: var(--f-display); font-size: clamp(1.5rem, 1.05rem + 1.5vw, 2.375rem); font-weight: 500; line-height: 1.5; letter-spacing: -0.025em; color: var(--ink); text-wrap: pretty; }
.blank { position: relative; display: inline-block; vertical-align: baseline; max-width: 100%; white-space: nowrap; }
.blank input, .blank select {
  font: inherit; letter-spacing: inherit; color: var(--ink); background: transparent; border: 0; border-radius: 6px; margin: 0; padding: 0 0.12em;
  box-shadow: inset 0 -2px 0 var(--line-strong); outline: none; transition: box-shadow var(--t-ui) ease, background-color var(--t-ui) ease;
}
.blank input { field-sizing: content; min-width: 4ch; max-width: 100%; }
.blank input::placeholder { color: var(--ink-3); opacity: 1; }
.blank select { appearance: none; -webkit-appearance: none; padding-right: 0.95em; cursor: pointer; max-width: 100%; text-overflow: ellipsis; background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%); background-size: 0.2em 0.2em, 0.2em 0.2em; background-position: calc(100% - 0.36em) 58%, calc(100% - 0.16em) 58%; background-repeat: no-repeat; }
.blank select option { font-size: 1rem; letter-spacing: 0; color: #141413; background: #fff; }
.blank :is(input, select):focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; box-shadow: inset 0 -2px 0 var(--focus); background: color-mix(in srgb, var(--focus) 8%, transparent); }
@media (hover: hover) and (pointer: fine) { .blank :is(input, select):hover { box-shadow: inset 0 -2px 0 var(--ink); } }
.blank.is-filled :is(input, select) { box-shadow: inset 0 -2px 0 var(--ink); }
.blank.is-wrong input { box-shadow: inset 0 -2px 0 #c2321d; }
.brief__more { display: grid; gap: 8px; margin-top: 26px; color: var(--ink-2); font-size: 0.9375rem; }
.brief__more textarea { font: inherit; font-size: 1rem; color: var(--ink); resize: vertical; min-height: 64px; padding: 12px 14px; border: 0; border-radius: 12px; background: var(--bg); box-shadow: inset 0 0 0 1px var(--line); transition: box-shadow var(--t-ui) ease; }
.brief__more textarea:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; box-shadow: inset 0 0 0 1px var(--focus); }
.brief__error { min-height: 1.4em; margin-top: 10px; color: #b02a17; font-size: 0.9375rem; }
:root[data-theme="dark"] .brief__error, :root[data-theme="dark"] .blank.is-wrong input { color: #ef6a52; }
.brief__actions { margin-top: 6px; display: flex; flex-wrap: wrap; gap: 10px; }
.brief__error.is-ok { color: var(--ink-2); }
.story:not(.is-scene) .story__rail { display: none; }
.brief__hint { margin-top: 16px; color: var(--ink-3); font-size: 0.8125rem; max-width: 52ch; }

/* other ways in */
.direct { margin-top: clamp(48px, 6vw, 88px); display: flex; flex-wrap: wrap; align-items: center; gap: 12px 28px; padding-top: 24px; border-top: 1px solid var(--line); }
.direct__label { color: var(--ink-3); font-size: 0.9375rem; }
.direct__list { display: flex; flex-wrap: wrap; gap: 4px 22px; }
.direct__item { position: relative; display: inline-flex; align-items: center; gap: 9px; min-height: 44px; color: var(--ink); text-decoration: none; font-size: 1rem; transition: color var(--t-ui) ease, transform var(--t-press) var(--ease-out); }
.direct__item > svg { width: 17px; height: 17px; flex: none; color: var(--ink-2); }
.direct__item::after { content: ""; position: absolute; left: 26px; right: 0; bottom: 10px; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: right; transition: transform 260ms var(--ease-out); }
button.direct__item:active { transform: scale(0.97); }
.direct__out { width: 13px !important; height: 13px !important; transform: rotate(-45deg); transition: transform 240ms var(--ease-out); }
@media (hover: hover) and (pointer: fine) { .direct__item:hover::after { transform: scaleX(1); transform-origin: left; } a.direct__item:hover .direct__out { transform: rotate(-45deg) translateX(3px); } }

.foot__bottom { margin-top: clamp(40px, 5vw, 64px); padding-top: 24px; border-top: 1px solid var(--line); display: grid; grid-template-columns: auto auto 1fr; gap: 16px 32px; align-items: center; }
.foot__links { display: flex; flex-wrap: wrap; gap: 4px 20px; }
.foot__links a { position: relative; display: inline-flex; align-items: center; min-height: 44px; color: var(--ink-2); text-decoration: none; transition: color var(--t-ui) ease; }
.foot__links a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 11px; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: right; transition: transform 260ms var(--ease-out); }
@media (hover: hover) and (pointer: fine) { .foot__links a:hover { color: var(--ink); } .foot__links a:hover::after { transform: scaleX(1); transform-origin: left; } }
.foot__legal { justify-self: end; max-width: 52ch; text-align: right; color: var(--ink-3); font-size: 0.8125rem; }
@media (max-width: 1100px) { .foot__intro { grid-column: 1 / span 5; } .brief { grid-column: 6 / -1; } }
@media (max-width: 900px) {
  .foot__grid { grid-template-columns: minmax(0, 1fr); }
  .foot__intro, .brief { grid-column: 1 / -1; }
  .foot__title { max-width: 11ch; }
  .foot__bottom { grid-template-columns: 1fr; } .foot__legal { justify-self: start; text-align: left; }
}
@media (max-width: 480px) { .brief { padding: 22px 18px; border-radius: 18px; } .mark { width: 44px; height: 44px; } .marks__row { gap: 8px; } }

/* ---------- Intro: the monogram draws itself ---------- */
@media (prefers-reduced-motion: no-preference) {
  .fresh .nav .mk--zt .brand__z, .fresh .nav .mk--zt .brand__t { stroke-dasharray: 1; stroke-dashoffset: 1; animation: draw 520ms var(--ease-out) 120ms forwards; }
  .fresh .nav .mk--zt .brand__t { animation-delay: 380ms; }
}
@keyframes draw { to { stroke-dashoffset: 0; } }

/* ---------- View transitions: the screenshot and the page are one surface ---------- */
@view-transition { navigation: auto; }
::view-transition-old(root), ::view-transition-new(root) { animation: none; mix-blend-mode: normal; }
::view-transition-group(shot) { animation-duration: 640ms; animation-timing-function: var(--ease-drawer); }
::view-transition-image-pair(shot) { isolation: auto; overflow: hidden; animation: vt-corners-open 640ms var(--ease-drawer) both; }
::view-transition-old(shot), ::view-transition-new(shot) { height: 100%; width: 100%; object-fit: cover; object-position: top; mix-blend-mode: normal; }
/* going in, the two pictures match (the screenshot is the page at rest), so the page simply takes over early */
::view-transition-old(shot) { animation: none; }
::view-transition-new(shot) { animation: vt-fade-in 340ms ease 90ms both; }
@keyframes vt-fade-in { from { opacity: 0; } }
@keyframes vt-corners-open { from { border-radius: 12px; } to { border-radius: 0; } }
@keyframes vt-corners-close { from { border-radius: 0; } to { border-radius: 12px; } }

/* Coming back: the page you were on (the 'root' snapshot) shrinks into its frame over the live portfolio.
   It stays solid while it moves and hands over only once it is small, so two different pictures never
   cross-fade at full size (you may have scrolled the project; the frame shows its top). */
html.vt-back::view-transition-group(root) { animation-duration: 640ms; animation-timing-function: var(--ease-drawer); }
html.vt-back::view-transition-image-pair(root) { isolation: auto; overflow: hidden; animation: vt-corners-close 640ms var(--ease-drawer) both; }
html.vt-back::view-transition-old(root), html.vt-back::view-transition-new(root) { width: 100%; height: 100%; object-fit: cover; object-position: top; }
html.vt-back::view-transition-old(root) { animation: vt-hand-out 640ms linear both; }
html.vt-back::view-transition-new(root) { animation: vt-hand-in 640ms linear both; }
@keyframes vt-hand-out { 0%, 70% { opacity: 1; } 86%, 100% { opacity: 0; } }
@keyframes vt-hand-in { 0%, 62% { opacity: 0; } 80%, 100% { opacity: 1; } }
/* While the page underneath is live (not captured) far down the document, Chrome can skip painting fixed layers:
   the world surfaces sit in the document at the current scroll for those 640 ms instead (same place on screen). */
html.vt-back .worlds { position: absolute; bottom: auto; height: 100vh; }
/* coming back to a project that cannot be shown in its frame: the page simply fades in */
html.vt-fade::view-transition-new(root) { animation: vt-fade-in 280ms ease both; }

/* ---------- Reduced motion: the same page, calm ---------- */
@media (prefers-reduced-motion: reduce) {
  html, html.is-smooth { scroll-behavior: auto; }
  .work, .nav { transition: none !important; }
  .world, .tint, .stage__img, .stage__m, .stage__glow, .how__panel, .how__steps > li, .theme svg, .board, .board *, .story__step, .story__step h3, .board__checks li, .case__phone, .mk, .mark, .mark *, .mark--you::before { transition-duration: 0.01ms !important; transition-delay: 0ms !important; }
  .copy__idle, .copy__done { transition: opacity 120ms ease; filter: none !important; transform: none !important; }
  .js .is-scene .story__step { filter: none; transform: none !important; }
  .shot { transition: none; }
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*), ::view-transition-image-pair(*) { animation: none !important; }
}

/* ---------- projects 6 to 8: their names are their logos ---------- */
.case__title--logo { line-height: 0; }
.case__title--logo img { width: auto; height: clamp(44px, 3.4vw + 22px, 76px); max-width: 100%; object-fit: contain; object-position: left center; }
#ostra .case__title--logo img { height: clamp(30px, 2.2vw + 16px, 50px); }

/* ---------- the scrollbar: a thin rail whose thumb takes the colour of the project you are scrolling through ---------- */
@property --sb { syntax: "<color>"; inherits: true; initial-value: #6b6b64; }
html { --sb: var(--ink-3); scrollbar-width: thin; scrollbar-color: var(--sb) transparent; transition: --sb 600ms ease; }
:root[data-world="keel"] { --sb: #34d399; }
:root[data-world="mabel"] { --sb: #ff6f91; }
:root[data-world="ardent"] { --sb: #c2321d; }
:root[data-world="flood"] { --sb: #b8dd1c; }
:root[data-world="marram"] { --sb: #a4684a; }
:root[data-world="ostra"] { --sb: #e2582c; }
@media (prefers-reduced-motion: reduce) { html { transition: none; } }

/* ---------- Launch: the test address becomes the real one ---------- */
.board__url { display: inline-grid; }
.board__url b { grid-area: 1 / 1; font-weight: 400; display: inline-flex; align-items: center; gap: 0.5cqw; transition: opacity 320ms ease, transform 520ms var(--ease-out); }
.board__url svg { width: 1cqw; height: 1cqw; color: #1f8a5b; }
.board__u2 { opacity: 0; transform: translateY(60%); color: #23231f; }
.board[data-step="4"] .board__u1 { opacity: 0; transform: translateY(-60%); }
.board[data-step="4"] .board__u2 { opacity: 1; transform: none; transition-delay: 160ms; }
.story__stage { position: relative; }
.board__checks--live { position: absolute; left: 0; right: 0; bottom: 0; }
.story__stage:not([data-step="4"]) .board__checks--live { visibility: hidden; transition: visibility 0s 300ms; }
.story__stage[data-step="4"] .board__checks:not(.board__checks--live) li { opacity: 0; transition-delay: 0ms; }
/* ---------- the hero stage: one page hands over to the next as one soft, settled move ----------
   the new page fades in on top while the old one stays solid underneath (no dip to the background between
   them), arriving from a hair larger and slightly soft, like a camera settling its focus */
.stage__img, .stage__m { transform: scale(1.03); filter: blur(3px); transition: opacity 900ms cubic-bezier(0.4, 0, 0.2, 1), transform 1300ms cubic-bezier(0.22, 0.8, 0.2, 1), filter 900ms ease; z-index: 0; }
.stage__img.is-on, .stage__m.is-on { transform: none; filter: none; z-index: 2; }
.stage__img.is-leaving, .stage__m.is-leaving { opacity: 1; transform: none; filter: none; z-index: 1; transition: none; }
@media (max-width: 600px) { .board__checks { min-height: 40px; align-content: flex-end; } }

/* ---------- Plan, Content, Review: notes laid on the artboard, drawn like the type-and-colour chip of
   Direction (white card, soft shadow, the brand's own ink), so the whole scene speaks one language ---------- */
.story__n { font-family: var(--f-mono); font-size: 0.6875rem; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.story__rail button[aria-current="step"] .story__n { color: var(--ink); }
.board__card { inset: 6% 3% auto auto !important; width: 36% !important; height: auto !important; z-index: 3; padding: 1.7cqw 2cqw 2cqw; border-radius: 1.4cqw; background: #fff; box-shadow: 0 0.6cqw 2.4cqw rgb(20 20 19 / 0.14); color: #3b2420; font-family: var(--f-sans); opacity: 0; transform: translateY(1.2cqw); transition: opacity 300ms ease, transform 520ms var(--ease-out); }
.bc__h { margin: 0 0 0.7cqw; font-size: 1.15cqw; color: rgb(59 36 32 / 0.55); }
.bc__h:not(:first-child) { margin-top: 1.5cqw; }
.board[data-extra="plan"] .board__plan, .board[data-extra="copy"] .board__copy { opacity: 1; transform: none; transition-delay: 200ms; }
.board[data-extra="plan"] .board__sketch { opacity: 0.35; transition-delay: 0ms; }
.bp__map { position: relative; display: grid; gap: 0.45cqw; padding-left: 1.9cqw; font-size: 1.45cqw; }
.bp__map::before { content: ""; position: absolute; left: 0.55cqw; top: 1.2cqw; bottom: 0.9cqw; width: 1px; background: rgb(59 36 32 / 0.22); }
.bp__map li { position: relative; }
.bp__map li:not(.is-root)::before { content: ""; position: absolute; left: -1.35cqw; top: 50%; width: 0.9cqw; height: 1px; background: rgb(59 36 32 / 0.22); }
.bp__map .is-root { margin-left: -1.9cqw; font-weight: 600; }
.bp__need { display: grid; gap: 0.55cqw; font-size: 1.45cqw; }
.bp__need li { display: flex; align-items: center; gap: 0.8cqw; }
.bp__need svg { width: 1.6cqw; height: 1.6cqw; color: var(--live); flex: none; }
.bp__need i { width: 1.25cqw; height: 1.25cqw; margin: 0 0.18cqw; border-radius: 0.35cqw; box-shadow: inset 0 0 0 1px rgb(59 36 32 / 0.35); flex: none; }
.bp__need .is-done span { color: rgb(59 36 32 / 0.5); }
.bp__time { position: relative; height: 0.9cqw; margin-top: 1.6cqw; border-radius: 1cqw; background: #f5ece2; }
.bp__time li { position: absolute; top: 0; bottom: 0; left: calc(var(--a) * 100%); width: calc((var(--b) - var(--a)) * 100% - 0.35cqw); border-radius: 1cqw; background: #f1d9c6; transform-origin: left; transform: scaleX(0); transition: transform 520ms var(--ease-out); }
.bp__time li:first-child { background: #ff6f91; }
.board[data-extra="plan"] .bp__time li { transform: none; transition-delay: calc(var(--n, 0) * 80ms + 380ms); }
.bp__time li:nth-child(2) { --n: 1; } .bp__time li:nth-child(3) { --n: 2; } .bp__time li:nth-child(4) { --n: 3; }
/* Content: the generic line is crossed out and the real one is written in the brand's face */
.board__copy { width: 40% !important; }
.bcp__old { margin: 0; font-size: 1.6cqw; color: rgb(59 36 32 / 0.5); text-decoration: line-through; text-decoration-color: transparent; transition: text-decoration-color 300ms ease; }
.bcp__new { margin: 0.9cqw 0 0; font-size: 2.6cqw; line-height: 1.2; opacity: 0; transform: translateY(0.6cqw); transition: opacity 360ms ease, transform 520ms var(--ease-out); }
.bcp__new span { display: inline; }
.bcp__hl { white-space: nowrap; padding: 0 0.3cqw; border-radius: 0.5cqw; background: #ff8fab; box-decoration-break: clone; -webkit-box-decoration-break: clone; }
.board[data-extra="copy"] .bcp__old { text-decoration-color: rgb(59 36 32 / 0.6); transition-delay: 600ms; }
.board[data-extra="copy"] .bcp__new { opacity: 1; transform: none; transition-delay: 900ms; }
/* Review: comments are the same white chips, pinned where they point, each answered */
.board__pins { z-index: 3; pointer-events: none; }
.pin { position: absolute; left: var(--x); top: var(--y); display: flex; align-items: center; gap: 0.8cqw; margin: 0; padding: 0.6cqw 1.3cqw 0.6cqw 0.6cqw; border-radius: 99px; background: #fff; color: #3b2420; font: 400 1.4cqw/1.2 var(--f-sans); white-space: nowrap; box-shadow: 0 0.6cqw 2.4cqw rgb(20 20 19 / 0.16); opacity: 0; transform: translateY(1cqw); transition: opacity 300ms ease, transform 520ms var(--ease-out); }
.pin b { display: grid; place-items: center; width: 2.2cqw; height: 2.2cqw; border-radius: 50%; background: #3b2420; color: #fff; font: 600 1.2cqw/1 var(--f-sans); flex: none; }
.pin em { display: inline-flex; align-items: center; gap: 0.4cqw; max-width: 0; overflow: hidden; font-style: normal; color: var(--live); transition: max-width 520ms var(--ease-out); }
.pin em svg { width: 1.5cqw; height: 1.5cqw; flex: none; }
.board[data-extra="review"] .pin { opacity: 1; transform: none; transition-delay: calc(var(--i) * 240ms + 300ms); }
.board[data-extra="review"] .pin em { max-width: 9cqw; transition-delay: calc(var(--i) * 240ms + 1100ms); }
@media (prefers-reduced-motion: reduce) { .board__card, .pin, .pin em, .bp__time li, .bcp__old, .bcp__new { transition: none !important; } }