/* Yellow Stamp hero — homepage only (owner 2026-10-10). Behaviour: design/hero/hero-yellow-stamp-v20.html (approved).
   Two stacked worlds: underneath, the dark site (nav + work, pinned under the yellow while it collapses); on top, a
   fixed laser-yellow layer whose circular clip collapses into the seal's centre while the seal flies into the nav
   logo slot and turns white. Geometry and the headline size are set by js/home-hero.js; values from tokens.css.
   Copy, nav and content share the site's gutter: the script aligns the copy to the real nav's content edges. */

.yh-track { height: var(--nav-h); }                  /* clearance under the fixed nav; the script sets the measured height */
/* the page held under the nav while the yellow collapses: held by the browser (sticky), released where the held
   position equals the natural one (the spacer = the collapse length, set by the script) */
.yh-hold > main { position: sticky; top: var(--nav-h); }
.yh-seal { position: fixed; left: 0; top: 0; width: 400px; height: 400px; transform-origin: 0 0; pointer-events: none; will-change: transform; }
.yh-seal svg { display: block; width: 100%; height: 100%; }
.yh-seal--w { z-index: var(--z-hero-seal); color: var(--c-brand-paper); }
.yh-seal--w .seal-dot { fill: var(--c-brand); }
.yh-seal--b { position: absolute; color: var(--c-on-brand); }

.yh { position: fixed; inset: 0; z-index: var(--z-hero); background: var(--c-brand); color: var(--c-on-brand); will-change: clip-path; pointer-events: none; }   /* no overflow clipping: the circle clip does it */
/* clicks (owner 2026-10-10): the yellow layer catches clicks everywhere EXCEPT the nav strip, which lets them through
   to the real nav underneath (same layout as the ink copy); the hold behind the yellow stays unclickable */
.yh::before { content: ""; position: absolute; left: 0; right: 0; top: var(--nav-h); bottom: 0; pointer-events: auto; }
.yh-skip { pointer-events: auto; }
/* the ink nav mirrors the real nav's hover + keyboard focus (js/home-hero.js): near-black underline / ring on yellow */
.yh .nav .nav__label { background-image: linear-gradient(var(--c-on-brand), var(--c-on-brand)); }
.yh .nav .is-hover .nav__label, .yh .nav .is-focus .nav__label { background-size: 100% var(--bs-underline); }
.yh .nav .is-focus { outline: var(--bw-2) solid var(--c-on-brand); outline-offset: var(--focus-offset); }
/* phone: an open menu sits above the yellow layer */
body > .nav.is-open { z-index: calc(var(--z-hero) + 1); }

/* the nav, repeated in ink on the yellow (a copy of the real header: same layout, not interactive) */
.yh .nav { background: transparent; }
.yh .nav::before { content: none; }   /* no dark full-width bar on the yellow */
.yh .nav * { color: var(--c-on-brand); }
.yh .nav .nav__logo svg { visibility: hidden; }    /* the seal is the logo here (the box stays, for the focus ring) */
.yh .nav .nav__item--active .nav__label { color: var(--c-on-brand); }
.yh .nav .nav__item::after { content: none; }
.yh .nav .nav__menu { border-color: var(--yh-menu-line); background: transparent; }

.yh-copy { position: absolute; display: flex; flex-direction: column; gap: var(--yh-copy-gap); }
.yh-tags { display: flex; flex-wrap: wrap; align-items: center; gap: var(--yh-tags-gap); }
.yh-role {
  display: inline-flex; align-items: center; gap: var(--sp-10);
  padding: 0.75em 1.25em 0.75em 1em; border-radius: 999px;
  background: var(--c-on-brand); color: var(--c-brand); box-shadow: var(--yh-role-shadow);
  font-family: var(--font-figtree); font-weight: var(--fw-bold); font-size: var(--yh-role-fs); letter-spacing: 0.005em;
  animation: yh-chip 0.7s cubic-bezier(0.2, 0.8, 0.2, 1.2) both;
}
.yh-role__dot { width: 0.5em; height: 0.5em; border-radius: 50%; background: var(--c-brand); box-shadow: var(--yh-dot-ring); }
.yh-skills {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--yh-skills-gap);
  font-family: var(--font-figtree); font-weight: var(--fw-semibold); font-size: var(--yh-skills-fs);
  letter-spacing: var(--yh-skills-ls); text-transform: uppercase;
  animation: yh-chip 0.8s 0.12s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}
.yh-skills b { font-weight: var(--fw-regular); font-size: 0.9em; letter-spacing: 0; opacity: 0.55; }
.yh-skills__row { display: contents; }   /* desktop: the 4 skills on one line, as before */
/* "Design → Code": the arrow is an SVG with the same space either side as a ✦ separator, centred on the caps */
.yh-to { display: inline-flex; align-items: center; column-gap: var(--yh-skills-cgap); }
.yh-to__arrow { flex: none; width: 0.8em; height: 0.48em; }
@keyframes yh-chip { from { opacity: 0; transform: translateY(-14px) scale(1.12); } to { opacity: 1; transform: none; } }

/* Headline: Figtree ExtraBold Italic, ONE size (--fs, fitted by the script), words reveal from outline to ink */
.yh-hl {
  --fs: var(--yh-hl-fs);
  margin: 0; font-family: var(--font-figtree); font-style: italic; font-weight: var(--fw-extrabold);
  font-size: var(--fs); line-height: var(--yh-hl-lh); letter-spacing: var(--yh-hl-ls); text-wrap: balance;
}
/* each word: room for the italic overhang (padding + matching negative margin), no transform, no will-change */
.yh-w { display: inline-block; padding-right: var(--yh-overhang); margin-right: calc(var(--yh-word-gap) - var(--yh-overhang)); paint-order: stroke fill; }

.yh-skip {
  position: absolute; bottom: var(--yh-bottom); font-size: var(--yh-skip-fs); color: var(--c-on-brand);
  text-decoration: none; border-bottom: var(--bw-1) solid var(--yh-skip-line); padding-bottom: var(--sp-2);
}
.yh-skip .ico-arrow { width: 1em; height: 1em; margin-left: var(--sp-4); vertical-align: -0.125em; }
.yh-skip:focus-visible { outline-color: var(--c-on-brand); }
.yh-cue { position: absolute; bottom: var(--yh-bottom); font-size: var(--yh-cue-fs); letter-spacing: var(--yh-cue-ls); text-transform: uppercase; opacity: 0.6; }

@media (max-width: 767.98px) {
  .yh-copy { gap: var(--yh-copy-gap-phone); bottom: var(--yh-copy-bottom-phone); }
  .yh-tags { gap: var(--yh-tags-gap-phone); }
  .yh-role { font-size: var(--yh-role-fs-phone); }
  .yh-skills { font-size: var(--yh-skills-fs-phone); letter-spacing: var(--yh-skills-ls-phone); gap: var(--yh-skills-gap-phone);
    flex-direction: column; align-items: flex-start; }   /* phone: exactly 2 rows (owner 2026-10-10) */
  .yh-skills__row { display: flex; flex-wrap: nowrap; align-items: center; gap: var(--yh-skills-gap-phone); white-space: nowrap; }
  .yh-skills__mid { display: none; }   /* no separator at the end / start of a row */
  .yh-to { column-gap: var(--yh-skills-cgap-phone); }
  .yh-hl { --fs: var(--yh-hl-fs-phone); }
}
@media (prefers-reduced-motion: reduce) {
  .yh-role, .yh-skills { animation: none; }
  .yh-track { height: var(--nav-h); }   /* the script sets the measured nav height */
}

/* v4.2 (owner 2026-10-14): no layout shift on load. The hero copy and the held page are placed by js/home-hero.js; until then they
   are hidden (visibility only), so they appear in place instead of jumping there. Fallback: shown after 1.5 s without the script. */
html:not(.yh-placed) .yh-copy, html:not(.yh-placed) .yh-hold > main { visibility: hidden; animation: yh-show 0s linear 2.5s forwards; }   /* v4.3: safety reveal 2.5 s */
@keyframes yh-show { to { visibility: visible; } }

/* ===== Hero v6 dark (owner 2026-10-18), desktop >= 1190 px only; tablet and phone keep the Yellow Stamp hero above.
   Reference ~/Downloads/hero-v6-dark/hero-v6-reference.html (Folds, your light, Whisper, Index line, Live today, Instant).
   Same layer and dock as the yellow hero (js/home-hero.js), now on the page dark: Folds shader (canvas, js), grain, veil,
   Index-line tags, filled headline, logo band at the bottom; the real nav shows above it; the seal is yellow and turns
   into the nav seal over the last 30 % of the dock. */
.hd-bg, .hd-tags, .hd-band, .hd-grain { display: none; }
@media (min-width: 1190px) {
  .yh-hl { line-height: calc(var(--yh-hl-lh) * 1.1); }   /* round 4 (owner 2026-10-18): asked +6 %; +6 % left a 3 px ink gap (descenders), +10 % gives the required ≥ 6 px */
  .yh { background: var(--c-bg); color: var(--c-white); z-index: calc(var(--z-nav) - 1); }   /* under the real nav and the seal */
  .yh .nav, .yh-seal--b, .yh-tags, .yh-skip, .yh-cue { display: none; }
  html, body, .yh-hold, .yh-hold__spacer, .yh-track { background: var(--c-bg); }   /* fix 1: everything behind the fixed hero layer is the page dark */
  html.hd-up body > .nav, html.hd-up body > .nav::before { background: transparent; }   /* the nav (and its full-width bar) sit on the hero's own dark */
  .hd-bg { display: block; position: absolute; inset: 0; pointer-events: none; }
  .hd-cv { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
  .hd-veil { position: absolute; inset: 0; background: var(--hd-veil); }
  .hd-glow { display: none; position: absolute; left: 0; top: 0; width: 400px; height: 400px; transform-origin: 0 0; background: var(--hd-glow); }
  .yh.hd-nogl .hd-glow { display: block; }
  .hd-grain { display: block; position: absolute; inset: 0; pointer-events: none; opacity: var(--hd-grain-o); mix-blend-mode: overlay; background-image: var(--hd-grain); }

  .yh-copy { will-change: transform, opacity; }
  .hd-tags { display: flex; flex-direction: column; gap: var(--hd-tags-gap); font-family: var(--font-figtree); }
  .hd-role { font-weight: var(--fw-black); font-size: var(--hd-role-fs); letter-spacing: var(--hd-role-ls); line-height: var(--lh-auto); color: var(--c-white); }
  .hd-role b, .hd-band__lbl b { color: var(--c-brand); font-weight: inherit; }
  .hd-list { display: flex; flex-wrap: wrap; align-items: center; row-gap: var(--sp-6); font-weight: var(--fw-semibold); font-size: var(--hd-list-fs); color: var(--c-grey-bcbcbc); }
  .hd-list i { display: inline-flex; margin: 0 var(--hd-star-gap); color: var(--c-brand); }
  .hd-star { width: var(--hd-star); height: var(--hd-star); display: block; }
  .hd-list .yh-to { column-gap: var(--hd-arrow-gap); }
  .hd-list .yh-to__arrow { color: var(--c-brand); }

  .yh-hl { color: var(--c-white); }
  .yh-hl .yh-w--y { color: var(--c-brand); }
  .hd-lt { display: inline-block; }   /* letters of the headline (desktop only), moved by the Flux wave */

  .hd-band { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: var(--hd-band-gap);
    position: absolute; left: 0; right: 0; bottom: 0; padding: var(--hd-band-pad); padding-inline: var(--hd-band-x, var(--page-margin));
    border-top: var(--bw-1) solid var(--c-white-08); background: var(--hd-band-bg); will-change: transform, opacity; }
  .hd-band__lbl { margin: 0; font-family: var(--font-figtree); font-weight: var(--fw-bold); font-size: var(--hd-band-fs); color: var(--c-grey-bcbcbc); white-space: nowrap; letter-spacing: -0.005em; }
  .hd-band__lbl span { display: block; font-weight: var(--fw-medium); font-size: 0.9em; color: var(--c-grey-787878); }
  .hd-logos { min-width: 0; overflow: hidden; height: var(--hd-logos-h); display: flex; align-items: center; -webkit-mask-image: var(--hd-fade); mask-image: var(--hd-fade); pointer-events: auto; }
  .hd-track { display: flex; align-items: center; width: max-content; will-change: transform; }
  .hd-lg { display: block; flex: none; margin-right: var(--hd-logo-gap); background-color: var(--hd-logo);
    -webkit-mask-position: center; mask-position: center; -webkit-mask-size: contain; mask-size: contain; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; transition: background-color var(--hd-logo-dur) ease; }
  .hd-lg:hover { background-color: var(--c-brand); }
}

/* Phone v6 (owner 2026-10-18, round 8; rulebook 11): html (under 768, set by js/home-hero.js). The dark hero with Folds
   inside it (js/folds.js), the two-line Index line, the live headline (yellow "actually like."), the "Worked with." band; the
   seal in yellow; cards slide in once. Desktop and tablet untouched. */
@media (max-width: 767.98px) {
  html, html body, html .yh-hold, html .yh-track { background: var(--c-bg); }
  html { --yh-copy-bottom-phone: var(--ph6-copy-bottom); }
  html .yh { background: var(--c-bg); color: var(--c-white); }
  html :is(.yh-seal, .yh-seal--w) { color: var(--c-brand); }
  html :is(.yh-tags, .yh-skip, .yh-cue) { display: none; }
  html .yh .nav { color: var(--c-white); }
  html .yh .nav .nav__menu { color: var(--c-white); border-color: var(--ph6-menu-line); }
  html .hd-tags { display: flex; flex-direction: column; gap: var(--sp-6); font-family: var(--font-figtree); }
  html .hd-role { font-weight: var(--fw-black); font-size: var(--ph6-role-fs); line-height: var(--lh-auto); color: var(--c-white); }
  html :is(.hd-role, .hd-band__lbl) b { color: var(--c-brand); font-weight: inherit; }
  html .hd-list { display: flex; flex-wrap: wrap; align-items: center; row-gap: var(--sp-4); font-weight: var(--fw-semibold); font-size: var(--ph6-list-fs); color: var(--c-grey-bcbcbc); }
  html .hd-list i { display: inline-flex; margin: 0 var(--hd-star-gap); color: var(--c-brand); }
  html .hd-list i:nth-of-type(2) { flex-basis: 100%; height: 0; margin: 0; overflow: hidden; }   /* "User research" starts line 2 */
  html .hd-star { width: var(--hd-star); height: var(--hd-star); display: block; }
  html .hd-list .yh-to__arrow { color: var(--c-brand); }
  html .yh-hl { color: var(--c-white); font-weight: var(--fw-black); }
  html .yh-hl .yh-w--y { color: var(--c-brand); }
  html .hd-band { display: grid; gap: var(--sp-10); position: absolute; left: 0; right: 0; bottom: 0; padding: var(--sp-16) var(--page-margin) var(--sp-20);
    border-top: var(--bw-1) solid transparent; border-image: var(--ph6-band-line) 1; }
  html .hd-band__lbl { margin: 0; font-family: var(--font-figtree); font-weight: var(--fw-bold); font-size: var(--ph6-list-fs); color: var(--c-grey-bcbcbc); }
  html .hd-band__lbl span { display: inline; margin-left: var(--sp-8); font-weight: var(--fw-medium); color: var(--c-grey-787878); }
  html .hd-logos { overflow: hidden; height: var(--ph6-logos-h); display: flex; align-items: center; -webkit-mask-image: var(--hd-fade); mask-image: var(--hd-fade); }
  html .hd-track { display: flex; align-items: center; width: max-content; animation: ph6-mq var(--ph6-mq-dur) linear infinite; }
  html .hd-lg { display: block; flex: none; margin-right: var(--ph6-logo-gap); background-color: var(--hd-logo); transform: scale(var(--ph6-logo-scale)); transform-origin: left center;
    -webkit-mask-position: center; mask-position: center; -webkit-mask-size: contain; mask-size: contain; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; }
  html .yh .folds-cv { -webkit-mask-image: var(--ph6-hero-mask); mask-image: var(--ph6-hero-mask); }
  html .page--home .cases .cs-card { opacity: 0; transform: translateY(var(--ph6-card-rise)); transition: opacity var(--ph6-card-dur) var(--ease-out), transform var(--ph6-card-dur) var(--ease-out); }
  html .page--home .cases .cs-card.ph6-in { opacity: 1; transform: none; }
}
@keyframes ph6-mq { to { transform: translateX(-50%); } }
@media (max-width: 767.98px) and (prefers-reduced-motion: reduce) {
  html .hd-track { animation: none; }
  html .page--home .cases .cs-card { opacity: 1; transform: none; transition: none; }
}

/* round 8b (owner 2026-10-18): the phone hero is a normal section in the page flow; only the nav and the seal are fixed */
@media (max-width: 767.98px) {
  html .yh { position: relative; inset: auto; height: auto; min-height: 0; padding-top: calc(var(--nav-h) + 48px + 72% - 1.44 * var(--page-margin));   /* = nav + 8 + seal (72 % of the content width) + 40, in CSS so nothing shifts */ clip-path: none !important; visibility: visible !important; z-index: auto; will-change: auto; }
  html .yh .nav, html .yh-seal--b { display: none; }
  html .yh-copy { position: relative !important; inset: auto !important; z-index: 1; transform: none !important; padding: 0 var(--page-margin); gap: var(--ph6-copy-gap); }   /* above the hero's Folds canvas */
  html .yh-hl { --fs: var(--ph6-hl-fs) !important; line-height: var(--ph6-hl-lh); }
  html .hd-band { position: relative; z-index: 1; transform: none !important; margin-top: var(--ph6-band-gap); }
  html :is(.yh-track, .yh-hold__spacer) { height: 0 !important; }
  html .yh-hold > main { position: static; }
  html body > .nav { background: rgba(8, 8, 9, var(--ph6-nav, 0)); }
  html body > .nav .nav__menu { color: var(--c-white); border: var(--ph6-menu-bw) solid var(--ph6-menu-line); background: transparent; }
}

/* round "pinned" (owner 2026-10-18): the phone hero is one screen tall and pinned (sticky), the nav transparent at rest, and the
   page (Case studies onward) slides over it as a sheet. Reduced motion: no pin, a normal full-screen section. */
@media (max-width: 767.98px) {
  html .yh { height: 100svh; min-height: 0; padding-top: var(--nav-h); display: flex; flex-direction: column; justify-content: flex-end; overflow: hidden; }
  html .yh-copy { transform-origin: 50% 0; }
  html .hd-band { margin-top: var(--ph6-band-gap-pin); transform-origin: 50% 0; }
  html body > .nav::before { opacity: var(--ph6-nav, 0); }
  html .yh-hold { position: relative; z-index: 2; background: var(--c-bg); border-radius: var(--ph6-sheet-r) var(--ph6-sheet-r) 0 0; box-shadow: var(--ph6-sheet-shadow); }
}
@media (max-width: 767.98px) and (prefers-reduced-motion: no-preference) {
  html .yh { position: sticky; top: 0; z-index: 0; }
}

}

/* final fixes 2 (owner 2026-10-19): after the snap stop the Case studies heading holds for 40svh while the first card rises
   under it (CSS sticky inside .cases__hold); the band below 400 px uses 28 px gaps (20 px logos, js). Desktop: no wrapper effect. */
.cases__hold { display: contents; }
@media (max-width: 767.98px) {
  html .page--home .cases__hold { display: block; margin-bottom: -40svh; position: relative; z-index: 2; pointer-events: none;
 }
  html .page--home .cases.wf-on > .cases__hold { z-index: 3; }   /* above the card row (work-flux.css gives the section's children z-index 1) */
  html .page--home .cases__hold::after { content: ""; display: block; height: 40svh; }   /* the hold: real content, so the sticky heading can travel it */
  html .page--home .cases__hold .section-head { position: sticky; top: var(--nav-h); background: var(--c-bg); pointer-events: auto; }
}
@media (max-width: 399.98px) { :root { --ph6-logo-gap: 28px; } }

/* Loading screen, Silk unveil (owner 2026-10-19): js/loader.js; shown only under html.ur-loading (set before first paint by an
   inline head script on the homepage, first visit per session). No scroll lock; never blocks clicks once it lifts. */
.ur-ld { display: none; }
html.ur-loading .ur-ld { display: block; position: fixed; inset: 0; z-index: 2147483000; background: var(--ur-ld-ink); color: var(--c-white);
  clip-path: inset(0 0 0 0); transition: clip-path var(--ur-ld-lift) cubic-bezier(.75,0,.2,1), opacity .3s linear; }
.ur-ld canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.ur-ld--nogl canvas { display: none; }
.ur-ld__nm { position: absolute; left: var(--page-margin); bottom: var(--ur-ld-row); font: var(--fw-black) var(--ur-ld-nm-fs)/1 var(--font-figtree); letter-spacing: -.01em; }
.ur-ld__nm b { color: var(--c-brand); font-weight: inherit; }
.ur-ld__num { position: absolute; right: var(--page-margin); bottom: var(--ur-ld-row); font: var(--fw-bold) var(--ur-ld-num-fs)/1 var(--font-figtree); font-variant-numeric: tabular-nums; letter-spacing: .14em; color: var(--ur-ld-num); }
.ur-ld__bar { position: absolute; left: var(--page-margin); right: var(--page-margin); bottom: var(--ur-ld-line); height: 1px; background: rgba(255, 255, 255, .12); }
.ur-ld__bar i { position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: var(--c-brand); }
html.ur-loading .ur-ld.is-out { clip-path: inset(0 0 100% 0); pointer-events: none; }
html.ur-loading .ur-ld.is-fade { opacity: 0; pointer-events: none; }
@media (max-width: 767.98px) { .ur-ld__nm { left: 20px; } .ur-ld__num { right: 20px; } .ur-ld__bar { left: 20px; right: 20px; } html .ur-ld { --ur-ld-row: 40px; --ur-ld-line: 26px; } }

/* final fixes 4 (owner 2026-10-19): once the Work section starts showing, nothing from the hero takes pointer events over the cards */
html.hd-rise .yh, html.hd-rise .yh *, html.hd-rise .yh::before, html.hd-rise .yh::after { pointer-events: none !important; }   /* incl. the .yh::before click shield */

/* final fixes 5 (owner 2026-10-19): a 48 px soft edge under the held Case studies heading (phones), only while it is held */
@media (max-width: 767.98px) {
  html .page--home .cases__hold .section-head::after { content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 48px; pointer-events: none;
    background: linear-gradient(var(--c-bg), transparent); opacity: 0; transition: opacity .2s linear; }
  html .page--home .cases__hold .section-head.is-held::after { opacity: 1; }
}
/* hand-off pace (owner 2026-10-19): the desktop pin's added length above Work, in CSS from the first paint (= js/home-hero.js:
   nav + max(1.6 x 1.064 x H, 1640) - 1.064 x H), so the script's measured value changes nothing (no layout shift) */
@media (min-width: 1190px) { .yh-track { height: calc(var(--nav-h) + max(170.24vh, 1640px) - 106.4vh); } }