/* Classic view: one long, plain portfolio page next to the interactive Studio.
   The page colour follows the section (and each project) in the middle of the screen: classic.js sets
   --bg, --ink, --soft, --accent and --on on <html>, and they ease from one colour to the next.
   Motion is an extra: with JavaScript off, or reduced motion on, everything is simply there. */
@property --bg { syntax: '<color>'; inherits: true; initial-value: #100F1A; }
@property --ink { syntax: '<color>'; inherits: true; initial-value: #F4F2FA; }
@property --soft { syntax: '<color>'; inherits: true; initial-value: #B8B4CC; }
@property --accent { syntax: '<color>'; inherits: true; initial-value: #FFB547; }
@property --on { syntax: '<color>'; inherits: true; initial-value: #1C1305; }

:root {
  --bg: #100F1A; --ink: #F4F2FA; --soft: #B8B4CC; --accent: #FFB547; --on: #1C1305;
  --line: color-mix(in srgb, var(--ink) 14%, transparent);
  --line-strong: color-mix(in srgb, var(--ink) 30%, transparent);
  --f-display: "Bricolage Grotesque", "Helvetica Neue", Arial, sans-serif;
  --f-body: "Geist", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --f-mono: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --gutter: clamp(16px, 3vw, 40px);
  --ease: cubic-bezier(.22, 1, .36, 1);
  --theme-time: .7s;
  color-scheme: dark;
  background: var(--bg);
  /* Only the page background fades between sections; the colour variables switch in one step. Fading the
     variables themselves restyled every element on every frame, which made scrolling stutter. */
  transition: background-color var(--theme-time) ease;
  scroll-padding-top: 84px;
}
:root[data-tone="light"] { color-scheme: light; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }

*, *::before, *::after { box-sizing: border-box; }
body {
  margin: 0; color: var(--ink); /* the page colour is on <html>, so the Journey sky can sit behind everything */
  font-family: var(--f-body); font-size: 1.0625rem; line-height: 1.6;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
  overflow-x: clip;
}
img { max-width: 100%; display: block; }
a { color: inherit; }
h1, h2, h3, p, dl, dd, figure { margin: 0; }
h1, h2, h3 { text-wrap: balance; }
p { text-wrap: pretty; }
button { font: inherit; color: inherit; cursor: pointer; }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; border-radius: 10px; }
::selection { background: var(--ink); color: var(--bg); }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip-link {
  position: fixed; z-index: 90; left: 16px; top: -64px; padding: 12px 18px; border-radius: 999px;
  background: var(--accent); color: var(--on); font-weight: 600; text-decoration: none; transition: top .2s var(--ease);
}
.skip-link:focus { top: 16px; }
.c-wrap { width: min(1240px, 100% - 2 * var(--gutter)); margin-inline: auto; }
svg { flex: none; }

/* Studio → Classic and back: the new view rises over the old one (browsers that support it). */
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
  ::view-transition-old(root) { animation: vt-old .7s var(--ease) both; }
  ::view-transition-new(root) { animation: vt-new .85s var(--ease) both; }
}
@keyframes vt-old { to { transform: translateY(-4%) scale(.97); opacity: .4; } }
@keyframes vt-new { from { clip-path: inset(100% 0 0 0 round 32px 32px 0 0); } to { clip-path: inset(0 0 0 0 round 0); } }

/* ---------- Header ----------
   Same build as the Studio header: rk on the left; the view switch and the page links on the right, all 44px
   tall. The current view is filled with the text colour; amber (the accent) is kept for Contact. */
.c-bar {
  position: fixed; z-index: 40; top: 0; left: 0; right: 0;
  display: flex; align-items: center; gap: 12px;
  padding: 14px var(--gutter) 24px;
  background: linear-gradient(to bottom, color-mix(in srgb, var(--bg) 92%, transparent) 0%, color-mix(in srgb, var(--bg) 70%, transparent) 55%, transparent 100%);
  transition: transform .5s var(--ease);
}
.c-bar.away { transform: translateY(-110%); }
.c-bar a { text-decoration: none; }
.c-brand { margin-right: auto; display: inline-flex; align-items: center; gap: 12px; min-width: 0; }
.c-brand img { width: 44px; height: 44px; border-radius: 13px; box-shadow: 0 0 0 1px var(--line-strong); transition: transform .3s var(--ease); }
.c-brand:hover img { transform: rotate(-8deg) scale(1.06); }
.c-brand span { font-family: var(--f-display); font-weight: 700; font-size: 1.05rem; letter-spacing: -0.01em; white-space: nowrap; }
.c-end { display: flex; align-items: center; gap: 10px; }
.c-nav, .view-switch {
  display: flex; align-items: center; gap: 2px; padding: 4px; border-radius: 999px;
  border: 1px solid var(--line); background: color-mix(in srgb, var(--bg) 90%, transparent); /* solid, not blurred: cheaper to scroll */
}
.c-nav a, .view-switch a {
  display: inline-flex; align-items: center; gap: 7px; min-height: 34px; padding: 0 14px; border-radius: 999px;
  font-family: var(--f-mono); font-size: 0.75rem; letter-spacing: 0.08em; text-transform: uppercase; white-space: nowrap;
  color: var(--soft); transition: background-color .3s ease, color .3s ease;
}
.c-nav a:hover, .view-switch a:not([aria-current]):hover { color: var(--ink); background: color-mix(in srgb, var(--ink) 10%, transparent); }
.c-nav a.is-active, .c-nav a[aria-current="page"] { color: var(--ink); background: color-mix(in srgb, var(--ink) 12%, transparent); }
.c-nav .c-nav-cta, .c-nav .c-nav-cta:hover, .c-nav .c-nav-cta[aria-current="page"] { margin-left: 2px; background: var(--accent); color: var(--on); font-weight: 500; }
.c-nav .c-nav-cta:hover { filter: brightness(1.06); }
.c-nav svg, .view-switch svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.view-switch a[aria-current] { background: var(--ink); color: var(--bg); }
.bar-menu-btn, .bar-menu { display: none; }

@media (max-width: 1100px) {
  .c-brand span, .c-nav-pdf span, .top-switch svg { display: none; }
  .c-nav-pdf { padding-inline: 11px; }
  .top-switch a { padding-inline: 11px; }
}
@media (max-width: 900px) {
  .c-nav { display: none; }
  .bar-menu-btn {
    display: grid; place-content: center; gap: 4px; width: 44px; height: 44px; padding: 0; border-radius: 999px;
    border: 1px solid var(--line); background: color-mix(in srgb, var(--bg) 90%, transparent); color: var(--ink);
  }
  .bar-menu-btn span { display: block; width: 18px; height: 1.6px; border-radius: 2px; background: currentColor; transition: transform .25s var(--ease), opacity .2s ease; }
  .bar.menu-open .bar-menu-btn span:nth-child(1) { transform: translateY(5.6px) rotate(45deg); }
  .bar.menu-open .bar-menu-btn span:nth-child(2) { opacity: 0; }
  .bar.menu-open .bar-menu-btn span:nth-child(3) { transform: translateY(-5.6px) rotate(-45deg); }
  .bar-menu {
    display: grid; gap: 2px; position: absolute; top: calc(100% - 14px); right: var(--gutter);
    width: min(270px, calc(100vw - 2 * var(--gutter))); padding: 8px; border-radius: 20px;
    background: var(--bg); color: var(--ink); border: 1px solid var(--line-strong); box-shadow: 0 24px 60px rgba(0, 0, 0, 0.35);
    visibility: hidden; opacity: 0; transform: translateY(-6px) scale(.98); transform-origin: top right;
    transition: opacity .2s ease, transform .2s var(--ease), visibility 0s linear .2s;
  }
  .bar.menu-open .bar-menu { visibility: visible; opacity: 1; transform: none; transition: opacity .2s ease, transform .2s var(--ease); }
  .bar-menu a {
    display: flex; align-items: center; gap: 12px; min-height: 46px; padding: 0 14px; border-radius: 12px;
    font-family: var(--f-mono); font-size: 0.8125rem; letter-spacing: 0.08em; text-transform: uppercase;
  }
  .bar-menu a:hover, .bar-menu a.is-active, .bar-menu a[aria-current="page"] { background: color-mix(in srgb, var(--ink) 9%, transparent); }
  .bar-menu svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
  .bar-menu-sep { height: 1px; margin: 6px 8px; background: var(--line); }
}
@media (max-width: 380px) { .view-switch a { padding: 0 10px; } }

/* ---------- Shared pieces ---------- */
.c-kicker { display: flex; align-items: center; gap: 12px; font-family: var(--f-mono); font-size: 0.75rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--soft); }
.c-kicker span { padding: 3px 10px; border-radius: 999px; border: 1px solid var(--line-strong); color: var(--ink); letter-spacing: 0.06em; }
.c-h2 { font-family: var(--f-display); font-weight: 800; font-size: clamp(2.2rem, 5.4vw, 4.8rem); line-height: 0.98; letter-spacing: -0.035em; max-width: 18ch; }
.c-h3 { margin-bottom: 14px; font-family: var(--f-mono); font-size: 0.75rem; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: var(--soft); }
.c-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px; min-height: 50px; padding: 0 22px;
  border-radius: 999px; border: 1px solid var(--line-strong); background: transparent; color: var(--ink);
  font-family: var(--f-body); font-size: 0.975rem; font-weight: 500; text-decoration: none; white-space: nowrap;
  transition: background-color .3s ease, color .3s ease, border-color .3s ease, translate .45s var(--ease);
}
.c-btn:hover { background: color-mix(in srgb, var(--ink) 10%, transparent); }
.c-btn-accent { background: var(--accent); border-color: var(--accent); color: var(--on); }
.c-btn-accent:hover { background: var(--accent); filter: brightness(1.06); }
.c-btn-sm { min-height: 42px; padding: 0 16px; font-size: 0.875rem; }
.c-btn svg, .c-mail svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; transition: translate .35s var(--ease); }
.c-btn:hover svg { translate: 2px 0; }
.c-btn[href="#work"]:hover svg { translate: 0 2px; }

/* ---------- Hero ---------- */
.c-hero { position: relative; min-height: 100svh; display: grid; grid-template-rows: 1fr auto auto; padding-top: 96px; overflow: hidden; }
.c-hero-grid { display: grid; grid-template-columns: minmax(0, 1.22fr) minmax(0, 0.78fr); align-items: center; gap: clamp(32px, 6vw, 96px); padding-block: clamp(24px, 4vh, 48px); }
.c-portrait { position: relative; order: 2; justify-self: end; width: min(100%, 460px, calc((100svh - 360px) * 0.8)); min-width: 280px; }
.c-portrait-frame { position: relative; aspect-ratio: 4 / 5; overflow: hidden; border-radius: 999px 999px 28px 28px; background: #1D1A33; box-shadow: 0 40px 100px rgba(0, 0, 0, 0.45), 0 0 0 1px var(--line); }
.c-portrait-frame img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 35%; scale: 1.06; }
.c-badge {
  position: absolute; left: -40px; bottom: 56px; width: 128px; height: 128px; display: grid; place-items: center;
  border-radius: 50%; background: var(--accent); color: var(--on); box-shadow: 0 18px 40px rgba(0, 0, 0, 0.35);
}
.c-badge svg { position: absolute; inset: 0; width: 100%; height: 100%; animation: spin 18s linear infinite; }
.c-badge text { font-family: var(--f-mono); font-size: 10.5px; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; fill: currentColor; }
.c-badge img { width: 44px; height: 44px; border-radius: 12px; }
@keyframes spin { to { transform: rotate(360deg); } }
.c-eyebrow { font-family: var(--f-mono); font-size: 0.8125rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--soft); }
.c-title { margin: 18px 0 26px; font-family: var(--f-display); font-weight: 800; font-size: clamp(2.8rem, 6.1vw, 6.6rem); line-height: 0.92; letter-spacing: -0.042em; }
.c-title .ln { display: block; overflow: hidden; padding-bottom: 0.08em; margin-bottom: -0.08em; }
.c-title .ln > span { display: inline-block; }
.c-title em { position: relative; font-style: normal; color: var(--accent); }
.c-scribble { position: absolute; left: 0; bottom: -0.04em; width: 100%; height: 0.2em; overflow: visible; }
.c-scribble path { fill: none; stroke: currentColor; stroke-width: 5; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.c-lead { max-width: 46ch; font-size: clamp(1.05rem, 1.35vw, 1.2rem); color: var(--soft); }
.c-lead a { color: var(--ink); text-underline-offset: 3px; }
.c-cta { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 30px; }
.c-hero-foot { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding-block: 18px 22px; font-family: var(--f-mono); font-size: 0.75rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--soft); }
.c-scroll { display: inline-flex; align-items: center; gap: 12px; }
.c-scroll i { position: relative; width: 40px; height: 1px; overflow: hidden; background: var(--line-strong); }
.c-scroll i::after { content: ""; position: absolute; inset: 0; background: var(--ink); animation: scroll-cue 2.2s var(--ease) infinite; }
@keyframes scroll-cue { from { transform: translateX(-100%); } to { transform: translateX(100%); } }
.c-clock { font-variant-numeric: tabular-nums; }

.c-marquee { overflow: hidden; padding-block: 16px; border-block: 1px solid var(--line); }
.c-mq-track { display: flex; align-items: center; width: max-content; will-change: transform; }
.c-mq-item { padding-inline: 0.32em; font-family: var(--f-display); font-weight: 800; font-size: clamp(1.8rem, 4.6vw, 3.8rem); line-height: 1.05; letter-spacing: -0.03em; white-space: nowrap; }
.c-mq-item.o { color: transparent; -webkit-text-stroke: 1.4px var(--ink); }
.c-mq-star { color: var(--accent); font-size: clamp(1.1rem, 2.6vw, 2rem); }

/* ---------- Work ---------- */
.c-head { display: grid; gap: 20px; padding-block: clamp(96px, 15vh, 170px) clamp(40px, 7vh, 80px); }
.c-work-title { max-width: 21ch; }
.c-head-note { max-width: 60ch; color: var(--soft); }
.c-no { color: var(--ink); }

/* Work index: big project names on thin lines. On a mouse, hovering a row floods the section with the
   project's colour from the pointer and a cover preview follows the pointer (classic.js); the other rows dim.
   On touch screens each row shows its cover instead. */
.c-work { position: relative; overflow: clip; }
.c-work > :not(.c-flood) { position: relative; z-index: 1; }
.c-flood {
  position: absolute; inset: 0; z-index: 0; pointer-events: none; background-color: var(--flood, transparent);
  clip-path: circle(0px at var(--fx, 50%) var(--fy, 50%));
  transition: clip-path .9s var(--ease), background-color .5s ease;
}
.c-work.flooded .c-flood { clip-path: circle(150vmax at var(--fx, 50%) var(--fy, 50%)); }
.c-index { padding-bottom: clamp(24px, 5vh, 56px); }
.c-index-group { display: flex; align-items: baseline; gap: 14px; margin: clamp(40px, 7vh, 80px) 0 0; padding-bottom: 16px; font-family: var(--f-mono); font-size: 0.75rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink); }
.c-index-group:first-child { margin-top: 0; }
.c-index-group span { color: var(--soft); }
.c-rows { margin: 0; padding: 0; list-style: none; border-bottom: 1px solid var(--line); }
.c-rows li { position: relative; border-top: 1px solid var(--line); }
.c-rows li::before { content: ""; position: absolute; left: 0; right: 0; top: -1px; height: 1px; background: var(--ink); transform-origin: 0 50%; transform: scaleX(0); transition: transform 1.3s var(--ease); }
.c-rows li.in::before, .no-js .c-rows li::before, .static .c-rows li::before { transform: scaleX(1); }
.c-row {
  display: grid; grid-template-columns: 56px minmax(0, 1fr) auto 52px; align-items: center; gap: 0 clamp(16px, 2.4vw, 32px);
  padding-block: clamp(22px, 3.6vh, 38px); text-decoration: none; transition: opacity .45s ease;
}
.c-row-no { align-self: start; padding-top: 0.9em; font-family: var(--f-mono); font-size: 0.8125rem; color: var(--soft); }
.c-row-main { display: grid; gap: 8px; min-width: 0; }
.c-row-name { display: block; font-family: var(--f-display); font-weight: 800; font-size: clamp(2.2rem, 6vw, 5.6rem); line-height: 0.98; letter-spacing: -0.045em; }
.c-row-name > span { display: inline-block; transition: translate .7s var(--ease); }
.c-row-line { color: var(--soft); font-size: clamp(0.98rem, 1.2vw, 1.12rem); }
.c-row-desc { max-width: 68ch; color: var(--soft); font-size: 0.95rem; opacity: 0.85; }
.c-row-meta { font-family: var(--f-mono); font-size: 0.75rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--soft); text-align: right; white-space: nowrap; }
.c-row-go { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; border: 1px solid var(--line-strong); transition: background-color .4s ease, color .4s ease, border-color .4s ease, rotate .6s var(--ease); }
.c-row-go svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.c-row-thumb { display: none; }
.c-row:hover .c-row-name > span, .c-row:focus-visible .c-row-name > span { translate: 0.3em 0; }
.c-row:hover .c-row-go, .c-row:focus-visible .c-row-go { background: var(--ink); border-color: var(--ink); color: var(--c, var(--bg)); rotate: -45deg; }
.c-index:has(.c-row:hover) .c-row:not(:hover), .c-index:has(.c-row:focus-visible) .c-row:not(:focus-visible) { opacity: 0.32; }
.c-row:focus-visible { outline-offset: 6px; }

/* The preview that follows the pointer: covers wipe up over each other as you move between rows. */
.c-preview { position: fixed; z-index: 30; left: 0; top: 0; pointer-events: none; }
.c-preview-card {
  position: absolute; left: 0; top: 0; width: clamp(280px, 25vw, 400px); aspect-ratio: 2240 / 1240; overflow: hidden; border-radius: 18px;
  box-shadow: 0 30px 70px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(255, 255, 255, 0.18);
  opacity: 0; scale: 0.55; transition: opacity .35s ease, scale .55s var(--ease); will-change: transform;
}
.c-preview.on .c-preview-card { opacity: 1; scale: 1; }
.c-preview img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; clip-path: inset(100% 0 0 0); scale: 1.15; transition: clip-path .7s var(--ease), scale 1.1s var(--ease); }
.c-preview img.on { clip-path: inset(0 0 0 0); scale: 1; }
.c-preview-chip { position: absolute; z-index: 20; left: 12px; bottom: 12px; display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; background: rgba(16, 15, 26, 0.82); color: #F4F2FA; font-family: var(--f-mono); font-size: 0.6875rem; letter-spacing: 0.1em; text-transform: uppercase; }
.c-preview-chip svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.cursor-on .cursor[data-state="hide"] { opacity: 0; }

@media (hover: none), (max-width: 900px) {
  .c-preview, .c-flood { display: none; }
  .c-row { grid-template-columns: 40px minmax(0, 1fr) 44px; }
  .c-row-meta { grid-column: 2; grid-row: 2; margin-top: 10px; text-align: left; white-space: normal; }
  .c-row-go { grid-column: 3; grid-row: 1; width: 44px; height: 44px; }
  .c-row-thumb { display: block; grid-column: 2 / -1; grid-row: 3; width: 100%; height: auto; margin-top: 16px; border-radius: 16px; box-shadow: 0 0 0 1px var(--line); }
  .c-row-name { font-size: clamp(2rem, 9vw, 3rem); }
}
@media (prefers-reduced-motion: reduce) {
  .c-rows li::before { transform: scaleX(1); transition: none; }
  .c-preview { display: none; }
  .c-row-name > span, .c-row-go { transition: none; }
}

.c-more { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; padding-block: clamp(80px, 12vh, 140px); }
.c-more-card {
  display: grid; align-content: start; gap: 10px; min-height: 210px; padding: 28px; border-radius: 26px; text-decoration: none;
  border: 1px solid var(--line); transition: background-color .35s ease, border-color .35s ease, translate .45s var(--ease);
}
.c-more-card:hover { background: color-mix(in srgb, var(--ink) 6%, transparent); border-color: var(--line-strong); translate: 0 -4px; }
.c-more-card .k { font-family: var(--f-mono); font-size: 0.6875rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--soft); }
.c-more-card strong { font-family: var(--f-display); font-size: clamp(1.5rem, 2.2vw, 1.9rem); line-height: 1.1; letter-spacing: -0.02em; }
.c-more-card p { color: var(--soft); font-size: 0.975rem; }

/* ---------- About, how I work ---------- */
.c-about, .c-process, .c-exp { padding-block: clamp(110px, 16vh, 180px); }
.c-statement { margin: 30px 0 clamp(56px, 8vw, 100px); font-family: var(--f-display); font-weight: 700; font-size: clamp(1.75rem, 3.5vw, 3.25rem); line-height: 1.14; letter-spacing: -0.025em; }
.c-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }
.c-stats > div { display: flex; flex-direction: column-reverse; justify-content: flex-end; gap: 10px; padding-top: 22px; border-top: 1px solid var(--line-strong); }
.c-stats dd { font-family: var(--f-display); font-weight: 800; font-size: clamp(2.6rem, 5vw, 4.4rem); line-height: 1; letter-spacing: -0.04em; font-variant-numeric: tabular-nums; }
.c-stats dt { max-width: 24ch; color: var(--soft); font-size: 0.9375rem; line-height: 1.45; }
.c-skills { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px; margin-top: clamp(56px, 8vw, 100px); }
.c-pills { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.c-pills li { padding: 9px 16px; border-radius: 999px; border: 1px solid var(--line-strong); font-size: 0.95rem; transition: background-color .3s ease, color .3s ease; }
.c-pills a { display: block; margin: -9px -16px; padding: 9px 16px; border-radius: inherit; text-decoration: none; }
.c-pills li:has(a):hover { background: var(--ink); color: var(--bg); }

.c-steps { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px; margin: 56px 0 0; padding: 0; list-style: none; }
.c-step { position: relative; display: grid; align-content: start; gap: 10px; padding-top: 22px; }
.c-step::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: var(--ink); transform-origin: 0 50%; }
.c-step-no { font-family: var(--f-mono); font-size: 0.75rem; letter-spacing: 0.1em; color: var(--accent); }
.c-step h3 { font-family: var(--f-display); font-weight: 700; font-size: 1.4rem; line-height: 1.15; letter-spacing: -0.015em; }
.c-step p { color: var(--soft); font-size: 0.975rem; }

/* ---------- Experience ---------- */
.c-jobs { margin: 52px 0 0; padding: 0; list-style: none; border-bottom: 1px solid var(--line); }
.c-job { display: grid; grid-template-columns: minmax(170px, 260px) minmax(0, 1fr); gap: 12px 40px; padding-block: 34px; border-top: 1px solid var(--line); }
.c-job-when { font-family: var(--f-mono); font-size: 0.8125rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--soft); }
.c-job-when span { display: block; }
.c-job-len { margin-top: 6px; color: var(--accent); }
.c-job-main { transition: translate .5s var(--ease); }
.c-job:hover .c-job-main { translate: 10px 0; }
.c-job h3 { font-family: var(--f-display); font-weight: 700; font-size: clamp(1.4rem, 2.4vw, 2rem); line-height: 1.15; letter-spacing: -0.02em; }
.c-job h3 a { text-decoration-thickness: 2px; text-underline-offset: 5px; text-decoration-color: color-mix(in srgb, var(--ink) 40%, transparent); }
.c-job h3 a:hover { text-decoration-color: currentColor; }
.c-job-place { margin-top: 4px; color: var(--soft); font-size: 0.9375rem; }
.c-job ul { margin: 14px 0 0; padding-left: 18px; color: var(--soft); max-width: 70ch; }
.c-job li + li { margin-top: 6px; }
.c-job li b { color: var(--ink); font-weight: 600; }
.c-award { display: inline-flex; align-items: center; gap: 8px; margin-top: 16px; padding: 8px 14px; border-radius: 999px; border: 1px solid color-mix(in srgb, var(--accent) 55%, transparent); background: color-mix(in srgb, var(--accent) 14%, transparent); font-size: 0.9rem; }
.c-award svg { width: 16px; height: 16px; fill: none; stroke: var(--accent); stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.c-edu { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px; margin-top: clamp(64px, 9vw, 110px); }
.c-list { margin: 0; padding: 0; list-style: none; }
.c-list li { display: grid; gap: 2px; padding-block: 12px; border-top: 1px solid var(--line); }
.c-list strong { font-weight: 600; font-size: 1rem; line-height: 1.4; }
.c-list strong a { text-decoration: none; background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat; transition: background-size .4s var(--ease); }
.c-list strong a:hover { background-size: 100% 1px; }
.c-list span { color: var(--soft); font-size: 0.9rem; }
.c-list span a { text-underline-offset: 3px; }
.c-interest { color: var(--soft); }
.c-edu .c-btn-sm { margin-top: 16px; }
.c-lang { margin-top: 36px; }

/* ---------- Contact ---------- */
.c-contact { display: flex; flex-direction: column; justify-content: space-between; min-height: 100svh; padding-top: clamp(110px, 16vh, 180px); }
.c-mega { margin: 26px 0 30px; font-family: var(--f-display); font-weight: 800; font-size: clamp(4rem, 15vw, 14rem); line-height: 0.86; letter-spacing: -0.055em; }
.c-contact-lead { max-width: 40ch; font-size: clamp(1.1rem, 1.6vw, 1.4rem); color: var(--soft); }
.c-mail {
  display: inline-flex; align-items: center; gap: 0.35em; margin-top: 36px; padding: 0 0 8px; border: 0; border-bottom: 3px solid currentColor; background: none;
  font-family: var(--f-display); font-weight: 700; font-size: clamp(1.45rem, 4.4vw, 3.6rem); line-height: 1.1; letter-spacing: -0.02em;
}
.c-mail svg { width: 0.62em; height: 0.62em; stroke-width: 1.4; }
.c-mail:hover svg { translate: 0 -3px; }
.c-contact-links { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 44px; }
.c-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 28px; margin-top: 110px; padding-block: 28px 36px; border-top: 1px solid var(--line-strong); font-family: var(--f-mono); font-size: 0.75rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--soft); }
.c-foot-id { display: inline-flex; align-items: center; gap: 10px; }
.c-foot-id img { width: 24px; height: 24px; border-radius: 7px; }
.c-foot-links { display: flex; gap: 20px; }
.c-foot a { text-decoration: none; }
.c-foot a:hover { color: var(--ink); }

/* ---------- Motion (only with JavaScript; classic.js adds .ready, .in and the word spans) ---------- */
.js .hi { opacity: 0; translate: 0 22px; transition: opacity 1s var(--ease), translate 1s var(--ease); transition-delay: calc(var(--d, 0) * 90ms); }
.js .c-title .ln > span { translate: 0 108%; transition: translate 1.1s var(--ease); transition-delay: calc(var(--d, 0) * 90ms); }
.js .c-scribble path { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1s var(--ease) 1.1s; }
.js .c-portrait-frame { clip-path: inset(100% 0 0 0 round 240px 240px 28px 28px); transition: clip-path 1.3s var(--ease) .05s; }
.js .c-portrait-frame img { scale: 1.3; transition: scale 1.6s var(--ease) .05s; }
.js .c-badge { opacity: 0; scale: .4; rotate: -90deg; transition: opacity .6s ease .7s, scale 1s var(--ease) .7s, rotate 1s var(--ease) .7s; }
.ready .hi { opacity: 1; translate: none; }
.ready .c-title .ln > span { translate: none; }
.ready .c-scribble path { stroke-dashoffset: 0; }
.ready .c-portrait-frame { clip-path: inset(0 0 0 0 round 240px 240px 28px 28px); }
.ready .c-portrait-frame img { scale: 1.06; }
.ready .c-badge { opacity: 1; scale: 1; rotate: 0deg; }

.js .rv { opacity: 0; translate: 0 30px; transition: opacity .9s var(--ease), translate .9s var(--ease); transition-delay: calc(var(--d, 0) * 90ms); }
.js .rv.in { opacity: 1; translate: none; }
.js .split .w { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: 0.1em; margin-bottom: -0.1em; }
.js .split .w > span { display: inline-block; translate: 0 106%; transition: translate 1s var(--ease); transition-delay: calc(var(--i, 0) * 50ms); }
.js .split.in .w > span { translate: none; }
.js .c-step::before { transform: scaleX(0); transition: transform 1s var(--ease); transition-delay: calc(var(--d, 0) * 110ms); }
.js .c-step.in::before { transform: none; }
.js .hl .w { opacity: 0.16; transition: opacity .35s linear; }
.js .hl .w.on { opacity: 1; }
/* Safety net: if the script never runs, show everything (the inline script in <head> adds .static). */
.static .hi, .static .rv, .static .split .w > span, .static .c-title .ln > span, .static .hl .w { opacity: 1; translate: none; }
.static .c-portrait-frame { clip-path: none; }
.static .c-badge { opacity: 1; scale: 1; rotate: 0deg; }
.static .c-step::before { transform: none; }

/* ---------- Cursor (mouse and trackpad only; classic.js adds .cursor-on) ---------- */
.cursor { display: none; }
.cursor-on, .cursor-on * { cursor: none !important; }
.cursor-on .cursor { display: block; position: fixed; z-index: 100; inset: 0 auto auto 0; pointer-events: none; opacity: 0; transition: opacity .3s ease; }
.cursor-on .cursor.visible { opacity: 1; }
.cursor-dot, .cursor-ring { position: absolute; left: 0; top: 0; will-change: transform; }
.cursor-dot { width: 6px; height: 6px; margin: -3px 0 0 -3px; border-radius: 50%; background: var(--ink); transition: opacity .2s ease, scale .2s ease; }
.cursor-ring {
  display: grid; place-items: center; width: 38px; height: 38px; margin: -19px 0 0 -19px; border-radius: 50%;
  border: 1.5px solid var(--ink); background: transparent center / 58% no-repeat;
  transition: width .45s var(--ease), height .45s var(--ease), margin .45s var(--ease), background-color .3s ease, border-color .3s ease, scale .2s ease;
}
.cursor-label { font-family: var(--f-mono); font-size: 0.75rem; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--bg); white-space: nowrap; opacity: 0; transition: opacity .2s ease; }
.cursor.down .cursor-ring { scale: .86; }
.cursor[data-state="link"] .cursor-ring { width: 60px; height: 60px; margin: -30px 0 0 -30px; background-color: color-mix(in srgb, var(--ink) 14%, transparent); border-color: transparent; }
.cursor[data-state="link"] .cursor-dot { scale: 0; }
.cursor[data-state="view"] .cursor-ring { width: 104px; height: 104px; margin: -52px 0 0 -52px; background-color: var(--ink); border-color: var(--ink); }
.cursor[data-state="view"] .cursor-label { opacity: 1; transition-delay: .1s; }
.cursor[data-state="view"] .cursor-dot, .cursor[data-state="logo"] .cursor-dot, .cursor[data-state="invert"] .cursor-dot { opacity: 0; }
.cursor[data-state="logo"] .cursor-ring { width: 84px; height: 84px; margin: -42px 0 0 -42px; background-color: #FFFFFF; border-color: #FFFFFF; box-shadow: 0 14px 34px rgba(0, 0, 0, 0.3); }
.cursor[data-state="invert"] { mix-blend-mode: difference; }
.cursor[data-state="invert"] .cursor-ring { width: 150px; height: 150px; margin: -75px 0 0 -75px; background-color: #FFFFFF; border-color: #FFFFFF; }

/* ---------- Tablets and phones ---------- */
@media (max-width: 1100px) {
  .c-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 36px; }
  .c-edu { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .c-hero { min-height: 0; padding-top: 84px; }
  .c-hero-grid { grid-template-columns: 1fr; gap: 36px; }
  .c-portrait { order: 0; justify-self: start; width: min(76vw, 380px); margin-left: 24px; }
  .c-badge { left: auto; right: -28px; bottom: 28px; width: 108px; height: 108px; }
  .c-badge img { width: 36px; height: 36px; border-radius: 10px; }
  .c-more { grid-template-columns: 1fr; }
  .c-more-card { min-height: 0; }
  .c-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 32px; }
  .c-skills { grid-template-columns: 1fr; }
  .c-job { grid-template-columns: 1fr; }
  .c-job:hover .c-job-main { translate: none; }
}
@media (max-width: 600px) {
  .c-steps { grid-template-columns: 1fr; }
  .c-edu { grid-template-columns: 1fr; }
  .c-hero-foot .c-scroll { display: none; }
  .c-hero-foot { justify-content: flex-start; }
  .c-cta .c-btn { flex: 1 1 auto; }
  .c-contact-links .c-btn { flex: 1 1 calc(50% - 5px); }
  .c-contact-links .c-btn-accent { flex-basis: 100%; }
  .c-foot { margin-top: 72px; }
}

@media (prefers-reduced-motion: reduce) {
  :root { --theme-time: .3s; }
  .js .hi, .js .rv, .js .split .w > span, .js .c-title .ln > span { opacity: 1; translate: none; transition: none; }
  .js .c-portrait-frame { clip-path: none; transition: none; }
  .js .c-portrait-frame img { scale: 1.06; transition: none; }
  .js .c-badge { opacity: 1; scale: 1; rotate: 0deg; transition: none; }
  .js .c-step::before { transform: none; }
  .js .c-scribble path { stroke-dashoffset: 0; transition: none; }
  .js .hl .w { opacity: 1; }
  .c-badge svg, .c-scroll i::after { animation: none; }
  .c-job-main, .c-more-card, .c-btn { transition: none; }
}

/* ========== Classic sub-pages: case studies, each case study, explorations, journey, contact ========== */
.c-page-hero { padding-block: clamp(140px, 22vh, 220px) clamp(56px, 9vh, 110px); }
.c-page-hero .c-wrap { display: grid; gap: 22px; justify-items: start; }
.c-h1 { font-family: var(--f-display); font-weight: 800; font-size: clamp(2.6rem, 6.2vw, 5.8rem); line-height: 0.96; letter-spacing: -0.04em; max-width: 19ch; }
.c-jump { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.c-jump a { padding: 9px 16px; border-radius: 999px; border: 1px solid var(--line-strong); font-size: 0.95rem; text-decoration: none; transition: background-color .3s ease, color .3s ease; }
.c-jump a:hover { background: var(--ink); color: var(--bg); }
.c-more.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.c-band { min-height: 0; }
.c-band .c-mega { font-size: clamp(3.4rem, 11vw, 10rem); }

/* Case studies and Explorations: the Studio content (classic-case.css), with room for the fixed header. */
.c-case .hero { padding-top: clamp(124px, 17vh, 176px); }
.c-crumb { display: inline-flex; align-items: center; gap: 8px; justify-self: start; font-family: var(--f-mono); font-size: 0.75rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--soft); text-decoration: none; transition: color .2s ease; }
.c-crumb:hover { color: var(--ink); }
.c-crumb svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; transition: translate .3s var(--ease); }
.c-crumb:hover svg { translate: -3px 0; }
.c-case .layout { padding-block: clamp(56px, 8vw, 96px); }
.c-case .section { padding-block: clamp(8px, 2vw, 24px); }
.c-case .next { padding-block: clamp(64px, 10vh, 120px); }
.c-case .ex-grid { padding-block: clamp(48px, 7vw, 96px); }
.progress { z-index: 50; }
.lightbox { z-index: 60; }

/* Journey: a road from night to sunrise (classic-road.js draws it through the pins and drives the arrow).
   Stops alternate sides of the road; each lights up when the arrow reaches it. */
.c-road-stats { width: 100%; margin-top: 18px; }
.c-road-hero .c-btn { margin-top: 10px; }
.c-road { position: relative; padding-bottom: clamp(40px, 8vh, 90px); }
.c-road::before { content: ""; position: absolute; top: 0; bottom: 0; left: 50%; border-left: 3px dashed var(--line-strong); }
.road-ready .c-road::before { display: none; }
.c-road-svg { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.c-road-svg path { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.road-base { stroke: color-mix(in srgb, var(--ink) 13%, transparent); stroke-width: 26; }
.road-lane { stroke: color-mix(in srgb, var(--ink) 42%, transparent); stroke-width: 2; stroke-dasharray: 10 16; }
.road-done { stroke: var(--accent); stroke-width: 6; filter: drop-shadow(0 0 7px color-mix(in srgb, var(--accent) 65%, transparent)); }
.road-car { opacity: 0; transition: opacity .4s ease; }
.road-ready .road-car { opacity: 1; }
.car-glow { fill: color-mix(in srgb, var(--accent) 28%, transparent); transform-box: fill-box; transform-origin: center; animation: car-pulse 1.8s ease-in-out infinite; }
.car-arrow { fill: var(--accent); stroke: var(--bg); stroke-width: 2.5; stroke-linejoin: round; }
@keyframes car-pulse { 50% { transform: scale(1.45); opacity: .5; } }

.c-stops { position: relative; z-index: 1; margin-block: 0; padding: 0; list-style: none; }
.c-stop, .c-road-start, .c-road-end { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1fr) 240px minmax(0, 1fr); align-items: center; }
.c-stop { min-height: 66svh; padding-block: 40px; }
.c-stop.l { --side: -1; } .c-stop.r { --side: 1; }
.c-stop-pin {
  grid-row: 1; grid-column: 2; justify-self: center; z-index: 2; translate: calc(var(--side, 0) * 66px) 0;
  display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%;
  background: var(--bg); border: 2px solid var(--line-strong); color: var(--soft);
  font-family: var(--f-mono); font-size: 0.8125rem;
  transition: background-color .5s ease, border-color .5s ease, color .5s ease, scale .6s cubic-bezier(.34, 1.56, .64, 1), box-shadow .5s ease;
}
.c-stop-pin b { font-weight: 500; }
.c-stop.reached .c-stop-pin, .c-road-end.reached .c-stop-pin, .c-stop-pin.start { background: var(--accent); border-color: var(--accent); color: var(--on); box-shadow: 0 0 0 8px color-mix(in srgb, var(--accent) 22%, transparent); }
.c-stop.reached .c-stop-pin { scale: 1.12; }
.c-stop-pin.start { width: 22px; height: 22px; }
.c-stop-pin.end { width: 58px; height: 58px; }
.c-stop-pin svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.c-stop-pin svg .flag { fill: currentColor; stroke: none; }
.c-road-start { padding-block: 30px 10px; }
.c-road-start .c-stop-sign { grid-row: 1; grid-column: 3; justify-self: start; }

.c-stop-card {
  grid-row: 1; position: relative; display: grid; gap: 12px; justify-items: start; width: min(100%, 470px);
  padding: clamp(20px, 2.4vw, 28px); border-radius: 26px;
  background: color-mix(in srgb, var(--ink) 6%, transparent); border: 1px solid var(--line);
}
.c-stop.l .c-stop-card { grid-column: 1; justify-self: end; }
.c-stop.r .c-stop-card { grid-column: 3; justify-self: start; }
.c-stop-num {
  grid-row: 1; align-self: center; font-family: var(--f-display); font-weight: 800; font-size: clamp(6rem, 13vw, 12rem); line-height: 1;
  letter-spacing: -0.05em; color: transparent; -webkit-text-stroke: 1.5px var(--line-strong); user-select: none;
}
.c-stop.l .c-stop-num { grid-column: 3; justify-self: start; padding-left: 20px; }
.c-stop.r .c-stop-num { grid-column: 1; justify-self: end; padding-right: 20px; }
.c-stop-sign { display: inline-flex; align-items: center; gap: 10px; padding: 5px 12px 5px 5px; border-radius: 10px; background: var(--accent); color: var(--on); font-family: var(--f-mono); font-size: 0.75rem; letter-spacing: 0.08em; text-transform: uppercase; }
.c-stop-sign span { padding: 3px 8px; border-radius: 6px; background: var(--on); color: var(--accent); }
.c-sketch { width: 132px; height: 79px; margin-block: 4px; }
.c-sketch * { fill: none; stroke: var(--soft); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.c-sketch .hl { stroke: var(--accent); stroke-width: 2; }
.c-stop-card h2 { font-family: var(--f-display); font-weight: 800; font-size: clamp(1.8rem, 3.2vw, 2.7rem); line-height: 1.02; letter-spacing: -0.03em; }
.c-stop-text { color: var(--soft); font-size: 1.02rem; }
.c-stop-bits { display: grid; gap: 10px; justify-items: start; margin-top: 4px; }
.c-stop-bits .c-h3 { margin: 6px 0 0; }
.c-orgs { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.c-orgs a, .c-orgs li > span:only-child { display: inline-flex; align-items: center; gap: 10px; padding: 5px 15px 5px 5px; border-radius: 999px; border: 1px solid var(--line-strong); font-size: 0.925rem; text-decoration: none; transition: background-color .3s ease, color .3s ease; }
.c-orgs a:hover { background: var(--ink); color: var(--bg); }
.c-org-logo { display: grid; place-items: center; width: 28px; height: 28px; flex: none; overflow: hidden; border-radius: 50%; background: #FFFFFF; }
.c-org-logo img { width: 20px; height: 20px; object-fit: contain; }
.c-cred { font-family: var(--f-mono); font-size: 0.75rem; letter-spacing: 0.06em; color: var(--soft); }

.c-road-end { padding-block: clamp(60px, 12vh, 140px) clamp(40px, 8vh, 90px); }
.c-road-end-text { grid-row: 1; grid-column: 3; display: grid; gap: 16px; justify-items: start; }

/* Arriving at a stop: the card glides out of the road, its sketch draws itself, the big number appears. */
.js .c-stop-card { opacity: 0; translate: calc(var(--side) * -56px) 0; scale: .97; transition: opacity .6s ease, translate .9s var(--ease), scale .9s var(--ease); }
.js .c-stop.reached .c-stop-card { opacity: 1; translate: none; scale: 1; }
.js .c-sketch * { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1.4s var(--ease) .2s; }
.js .c-stop.reached .c-sketch * { stroke-dashoffset: 0; }
.js .c-stop-num { opacity: 0; translate: 0 30px; transition: opacity 1s ease, translate 1.2s var(--ease); }
.js .c-stop.reached .c-stop-num { opacity: 1; translate: none; }
.static .c-stop-card, .static .c-stop-num { opacity: 1; translate: none; scale: 1; }
.static .c-sketch * { stroke-dashoffset: 0; }

/* The sky behind the road: stars at night, a sun rising near the end. classic-road.js sets --stars and --sun. */
.c-sky { position: fixed; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }
.c-stars { position: absolute; inset: -10%; opacity: var(--stars, 0); transition: opacity .6s ease;
  background-image:
    radial-gradient(1.3px 1.3px at 8% 12%, #fff 50%, transparent 52%), radial-gradient(1px 1px at 22% 68%, #fff 50%, transparent 52%),
    radial-gradient(1.6px 1.6px at 35% 30%, #fff 50%, transparent 52%), radial-gradient(1px 1px at 47% 85%, #fff 50%, transparent 52%),
    radial-gradient(1.2px 1.2px at 58% 18%, #fff 50%, transparent 52%), radial-gradient(1.5px 1.5px at 71% 52%, #fff 50%, transparent 52%),
    radial-gradient(1px 1px at 83% 26%, #fff 50%, transparent 52%), radial-gradient(1.3px 1.3px at 92% 74%, #fff 50%, transparent 52%),
    radial-gradient(1px 1px at 14% 44%, #fff 50%, transparent 52%), radial-gradient(1.2px 1.2px at 64% 92%, #fff 50%, transparent 52%);
  background-size: 420px 420px; }
.c-stars.two { background-size: 610px 610px; background-position: 140px 90px; animation: twinkle 4.5s ease-in-out infinite; }
@keyframes twinkle { 50% { opacity: calc(var(--stars, 0) * 0.3); } }
.c-sun { position: absolute; left: 50%; bottom: -34vmax; width: 70vmax; height: 70vmax; margin-left: -35vmax; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255, 236, 190, 0.9), rgba(255, 196, 110, 0.45) 45%, rgba(255, 150, 80, 0) 72%);
  opacity: var(--sun, 0); translate: 0 calc((1 - var(--sun, 0)) * 26vh); transition: opacity .6s ease; }

/* Trip panel: which stop you are at, and how far along the road. */
.c-hud {
  position: fixed; z-index: 30; left: var(--gutter); bottom: 20px; display: grid; gap: 6px; width: min(290px, calc(100vw - 2 * var(--gutter)));
  padding: 12px 16px 14px; border-radius: 18px; background: color-mix(in srgb, var(--bg) 94%, transparent); border: 1px solid var(--line-strong);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.25);
  opacity: 0; translate: 0 14px; pointer-events: none; transition: opacity .4s ease, translate .5s var(--ease);
}
.c-hud.on { opacity: 1; translate: none; }
.c-hud-k { font-family: var(--f-mono); font-size: 0.6875rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--soft); }
.c-hud-k b { color: var(--ink); font-weight: 500; }
.c-hud-t { font-family: var(--f-display); font-weight: 700; font-size: 1.02rem; line-height: 1.2; }
.c-hud i { display: block; height: 3px; margin-top: 4px; border-radius: 2px; overflow: hidden; background: var(--line); }
.c-hud em { display: block; height: 100%; background: var(--accent); transform-origin: 0 50%; transform: scaleX(var(--p, 0)); }

/* Contact page */
.c-contact-hero { padding-bottom: clamp(56px, 9vh, 100px); }
.c-contact-hero .c-mega { margin: 6px 0 4px; }
.c-form-sec { padding-top: clamp(56px, 8vh, 96px); }
.c-form-sec .cf { padding-bottom: 0; }
.c-form-sec .cf-form, .c-form-sec .cf-side { background: color-mix(in srgb, #FFFFFF 55%, var(--bg)); border-color: var(--line); box-shadow: 0 24px 60px rgba(23, 20, 31, 0.06); }
.c-form-sec .cf-field input, .c-form-sec .cf-field select, .c-form-sec .cf-field textarea { background: #FFFFFF; }
.c-form-sec .cf-send { min-height: 48px; }
.cf-status.ok { color: #1E7A4C; }
.cf-status.err { color: #B4232F; }
.c-form-sec .c-foot { margin-top: clamp(72px, 10vw, 120px); }

/* Cursor over screens you can open full size */
.cursor[data-state="zoom"] .cursor-ring { width: 60px; height: 60px; margin: -30px 0 0 -30px; background-color: var(--ink); border-color: var(--ink); }
.cursor[data-state="zoom"] .cursor-label { opacity: 1; font-size: 1.35rem; letter-spacing: 0; }
.cursor[data-state="zoom"] .cursor-dot { opacity: 0; }

@media (max-width: 900px) {
  .c-stop, .c-road-start, .c-road-end { grid-template-columns: 58px minmax(0, 1fr); }
  .c-road::before { left: calc(var(--gutter) + 29px); }
  .c-stop { min-height: 0; padding-block: 26px; align-items: start; }
  /* Phones: each pin sits level with the top of its card, so the card opens as soon as it comes up the screen. */
  .c-stop-pin { grid-column: 1; translate: calc(var(--side, 0) * 7px) 0; width: 40px; height: 40px; margin-top: 22px; }
  .c-stop.l .c-stop-card, .c-stop.r .c-stop-card { grid-column: 2; justify-self: stretch; width: auto; }
  .c-stop-num { display: none; }
  .c-road-start .c-stop-sign, .c-road-end-text { grid-column: 2; }
  .js .c-stop-card { translate: -28px 0; }
  .c-hud { left: 50%; bottom: 12px; margin-left: calc(min(290px, 100vw - 2 * var(--gutter)) / -2); gap: 3px; padding: 8px 14px 10px; }
  .c-hud-t { font-size: 0.9rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .c-more.two { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .js .c-stop-card, .js .c-stop-num { opacity: 1; translate: none; scale: 1; transition: none; }
  .js .c-sketch * { stroke-dashoffset: 0; transition: none; }
  .car-glow, .c-stars.two { animation: none; }
  .road-car { display: none; }
}

/* ========== Classic home: device showcase (classic-show.js) ==========
   A laptop stays on screen while the work scrolls past, like a product page. Its lid opens as you arrive (--lid),
   each project's screens play on it as you read about it, and for the two phone apps it steps aside for a phone.
   The device turns a little as you read (--ry). The page takes each project's colour. */
.c-show-track {
  position: relative;
  /* One grid for the words and the device: the text takes 38% of the page width, a 7% gap, the device the rest. */
  --wrap: min(1240px, 100vw - 2 * var(--gutter));
  --text-w: calc(var(--wrap) * 0.38);
  --gap: calc(var(--wrap) * 0.07);
}
.c-show-stage { position: sticky; top: 0; z-index: 0; height: 100vh; margin-bottom: -100vh; overflow: hidden; pointer-events: none; contain: layout paint; }
.c-show-steps { position: relative; z-index: 1; margin: 0; padding: 0; list-style: none; }
.c-show-intro, .c-show-step { display: flex; align-items: center; min-height: 100vh; }
.c-show-step { min-height: 135vh; padding-block: 12vh; }
.c-show-intro > .c-wrap, .c-show-step > .c-wrap { width: var(--wrap); }
.c-show-kicker { width: var(--text-w); font-family: var(--f-display); font-weight: 700; font-size: clamp(1.6rem, 2.8vw, 2.5rem); line-height: 1.12; letter-spacing: -0.02em; }
.c-show-kicker span { display: block; margin-top: 14px; font-family: var(--f-mono); font-weight: 400; font-size: 0.75rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--soft); }
.c-show-text { display: grid; justify-items: start; gap: 0; width: var(--text-w); }
.c-show-text > * + * { margin-top: 18px; }
.c-show-text > .c-show-name { margin-top: 14px; }
.c-show-text > .c-show-head { margin-top: 18px; }
.c-show-text > .c-show-desc { margin-top: 14px; }
.c-show-text > .c-show-facts { margin-top: 26px; }
.c-show-text > .c-btn { margin-top: 28px; }
.c-show-meta { display: flex; flex-wrap: wrap; gap: 6px 14px; font-family: var(--f-mono); font-size: 0.75rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--soft); }
.c-show-meta .c-no { color: var(--ink); }
.c-show-name { font-family: var(--f-display); font-weight: 800; font-size: clamp(2.3rem, 4.2vw, 4.1rem); line-height: 0.96; letter-spacing: -0.04em; }
.c-show-name a { text-decoration: none; background: linear-gradient(currentColor, currentColor) 0 100% / 0 3px no-repeat; transition: background-size .5s var(--ease); }
.c-show-name a:hover { background-size: 100% 3px; }
.c-show-head { font-family: var(--f-display); font-weight: 600; font-size: clamp(1.25rem, 1.8vw, 1.6rem); line-height: 1.22; letter-spacing: -0.01em; }
.c-show-desc { max-width: 46ch; color: var(--soft); font-size: 0.98rem; line-height: 1.62; }
.c-show-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 14px 24px; width: 100%; padding-top: 18px; border-top: 1px solid var(--line); }
.c-show-facts dd { margin-top: 4px; }
.c-show-facts dt { font-family: var(--f-mono); font-size: 0.6875rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--soft); }
.c-show-facts dd { font-size: 0.9375rem; }
.c-mini { display: none; margin: 0; }

.c-dev { position: absolute; top: 50%; right: calc((100vw - var(--wrap)) / 2); width: calc(var(--wrap) - var(--text-w) - var(--gap)); translate: 0 -46%; perspective: 2200px; perspective-origin: 50% -10%; }
/* classic-show.js sets the laptop's tilt and the lid's angle directly, eased in its own loop, so nothing here transitions them. */
.c-laptop { position: relative; transform-style: preserve-3d; will-change: transform; transition: opacity .7s ease, translate 1s var(--ease), scale 1s var(--ease); }
/* The screen has the covers' own shape (2240:1240) so each cover fills it exactly: no bars, no cropping.
   Lid = 95.2% wide screen + 2.4% bezel each side, 2.4% above and 3.2% below, so 1 : 0.583. */
.c-lid { position: relative; width: 84%; margin-inline: auto; aspect-ratio: 1 / 0.5832; transform-origin: 50% 100%; transform-style: preserve-3d; will-change: transform; }
.c-lid-front, .c-lid-back { position: absolute; inset: 0; border-radius: 16px 16px 4px 4px; -webkit-backface-visibility: hidden; backface-visibility: hidden; }
.c-lid-front { padding: 2.4% 2.4% 3.2%; background: #0B0B0E; box-shadow: inset 0 0 0 1.5px #3B3B42, 0 30px 80px rgba(0, 0, 0, 0.35); }
.c-cam { position: absolute; top: 1%; left: 50%; width: 5px; height: 5px; margin-left: -2.5px; border-radius: 50%; background: #2C2C33; }
.c-screen { position: relative; width: 100%; height: 100%; overflow: hidden; border-radius: 6px; background: #000; }
/* The screen 'turns on' as the lid opens: a black layer fades out (opacity is cheap; a brightness filter was not). */
.c-screen-off { position: absolute; inset: 0; z-index: 998; background: #000; pointer-events: none; will-change: opacity; }
.c-screen::after { content: ""; position: absolute; inset: 0; z-index: 999; pointer-events: none; background: linear-gradient(118deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0) 38%); }
.c-screen img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; clip-path: inset(100% 0 0 0); scale: 1.05; transition: clip-path .85s var(--ease), scale 1.2s var(--ease); }
.c-screen img.on { clip-path: inset(0 0 0 0); scale: 1; }
.c-lid-back { display: grid; place-items: center; transform: rotateY(180deg); background: linear-gradient(160deg, #E6E7EC, #B5B7C0); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.08); }
.c-lid-back img { width: 10%; border-radius: 22%; filter: grayscale(1); opacity: 0.55; }
.c-base { position: relative; height: 0; padding-bottom: 2.6%; margin-top: -0.3%; border-radius: 2px 2px 18px 18px / 2px 2px 60% 60%; background: linear-gradient(to bottom, #E8E9EE, #ABADB6 70%, #8F919B); box-shadow: 0 18px 30px rgba(0, 0, 0, 0.25); }
.c-base i { position: absolute; top: 0; left: 50%; width: 16%; height: 42%; translate: -50% 0; border-radius: 0 0 8px 8px; background: #A1A3AC; }
/* The whole device opens the case study, like the Read case study button (classic-show.js keeps the link on the
   project in view). The step text sits above the stage, so only the text itself takes clicks. */
.c-show-stage .c-dev-link { display: block; pointer-events: auto; color: inherit; text-decoration: none; transition: translate .6s var(--ease); }
.c-show-stage .c-dev-link:hover { translate: 0 -8px; }
.c-dev-link:hover .c-lid-front { box-shadow: inset 0 0 0 1.5px #4A4A52, 0 44px 110px rgba(0, 0, 0, 0.45); }
.c-show-steps, .c-show-intro, .c-show-step { pointer-events: none; }
.c-show-text, .c-show-kicker { pointer-events: auto; }
.c-dev-shadow { position: absolute; z-index: -1; left: 8%; right: 8%; bottom: -7%; height: 12%; border-radius: 50%; background: radial-gradient(closest-side, rgba(0, 0, 0, 0.38), transparent); filter: blur(6px); transition: opacity .6s ease; }

.c-phone { position: absolute; left: 50%; top: 50%; width: 33%; aspect-ratio: 580 / 1124; translate: -50% calc(-50% + 70vh); rotate: 10deg; opacity: 0; transition: translate 1.1s var(--ease), rotate 1.1s var(--ease), opacity .6s ease; }
.c-phone::after { content: ""; position: absolute; z-index: -1; left: 10%; right: 10%; bottom: -5%; height: 8%; border-radius: 50%; background: radial-gradient(closest-side, rgba(0, 0, 0, 0.35), transparent); }
.c-phone img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; opacity: 0; scale: 0.94; transition: opacity .6s ease, scale .9s var(--ease); }
.c-phone img.on { opacity: 1; scale: 1; }
/* Phone apps: the laptop (with the app's cover) steps back a little and the phone stands in front of it. */
.c-dev.phone .c-laptop { translate: -9% -3%; scale: 0.9; }
.c-dev.phone .c-phone { left: 80%; top: 62%; width: 28%; translate: -50% -50%; rotate: 0deg; opacity: 1; }

@media (max-width: 900px) {
  .c-show-stage, .c-show-intro { display: none; }
  .c-show-step { min-height: 0; padding-block: clamp(56px, 10vh, 90px); }
  .c-show-text { width: 100%; }
  .c-mini { display: block; width: 100%; margin-top: 10px; }
  .c-mini-laptop { padding: 2.4% 2.4% 3.2%; border-radius: 14px 14px 4px 4px; background: #0B0B0E; box-shadow: inset 0 0 0 1.5px #3B3B42, 0 24px 50px rgba(0, 0, 0, 0.3); }
  .c-mini-laptop img { display: block; width: 100%; height: auto; aspect-ratio: 2240 / 1240; object-fit: cover; border-radius: 6px; }
}
@media (prefers-reduced-motion: reduce) {
  .c-laptop, .c-phone, .c-phone img, .c-screen img { transition: none; }
}