/* OVERPRINT look (test) — two-plate print language inspired by a Dribbble reference.
   Opt-in only: loaded when the page is opened with ?look=overprint (remembered), ?look=off to go back.
   Plates: blue = form, pink = accent, overprint = deep violet. Paper = warm cream. */
html.overprint{
  --paper:#f4eee4; --card:#fbf7f0; --plate-b:#30a6e6; --plate-p:#fb1f7b; --over:#2a1a7e;
  --ink:#1b1638; --muted:#5f5a74; --line:#e4dccd; --tile:var(--card); --pink:#fb1f7b; --pink-tint:#fde6ee; --pink-soft:#fde6ee;
  --display:"Archivo",system-ui,sans-serif; --mono:"Space Mono",ui-monospace,monospace;
}
html.overprint,html.overprint body{background:var(--paper)}
html.overprint body{font-family:"Space Grotesk",system-ui,sans-serif;color:var(--ink)}

/* Two-plate display type: violet fill, pink plate printed slightly off-register */
html.overprint h1,html.overprint .v2-title,html.overprint .talk h2,html.overprint .home-hero h1{
  font-family:var(--display);font-weight:800;letter-spacing:-.045em;color:var(--over);
  text-shadow:.022em .02em 0 var(--plate-p)}
html.overprint .home-hero h1{font-size:clamp(36px,5.4vw,74px);line-height:1}
html.overprint .home-hero.with-logo h1 em{font-family:var(--display);font-style:normal;font-weight:800;letter-spacing:-.045em;
  color:var(--plate-p);-webkit-text-fill-color:var(--plate-p);background:none;text-shadow:.022em .02em 0 var(--over)}
html.overprint h2,html.overprint h3{font-family:var(--display);font-weight:700;letter-spacing:-.03em;color:var(--ink)}
html.overprint .v2-row h2,html.overprint .selected h2{font-size:clamp(20px,2vw,26px)}
html.overprint .home-hero .lede,html.overprint .v2-lead p{color:var(--ink)}

/* Section markers: two overlapping dots (blue x pink = violet overprint) */
html.overprint .selected h2::after,html.overprint body.v2 .v2-row h2::after{
  content:"";display:inline-block;vertical-align:middle;width:30px;height:16px;margin:0 0 0 12px;
  background:radial-gradient(circle 8px at 8px 8px,var(--plate-b) 98%,transparent 100%),radial-gradient(circle 8px at 20px 8px,var(--plate-p) 98%,transparent 100%);
  background-blend-mode:multiply;border-radius:0}
html.overprint body.v2 .v2-row h2::after{display:block;margin:14px 0 0}

/* Mono labels */
html.overprint .label-cap,html.overprint .v2-facts dt,html.overprint body.v2 .mat .label-cap,html.overprint body.v2 .tog-cell .label-cap,html.overprint body.v2 .grp .label-cap,html.overprint .pg-line,html.overprint .pgp-meta,html.overprint .site-foot{
  font-family:var(--mono);font-weight:400;letter-spacing:.06em;text-transform:uppercase;font-size:11px;color:var(--plate-p)}
html.overprint .site-foot{color:var(--muted)}
html.overprint .v2-facts .pills span{font-family:var(--mono);font-size:10.5px;border:1.5px solid var(--ink);border-radius:999px;color:var(--ink)}

/* Cards = cream paper on paper, generous radius, no hard shadows on the cards themselves */
html.overprint body.v2 .mat,html.overprint body.v2 .v2-hero,html.overprint .home .about-tile{background:var(--card);border-radius:22px}
html.overprint .wt{border-radius:22px;overflow:hidden}
html.overprint .wt img{border-radius:22px}
html.overprint body.v2 .flow figcaption span{font-family:var(--display);font-weight:800;color:var(--plate-p);text-shadow:.022em .02em 0 var(--plate-b)}

/* Contact block = the "night" plate */
html.overprint .talk{background:#1b1638;color:#f4eee4;border:0;border-radius:26px}
html.overprint .talk h2{color:#f4eee4;text-shadow:.022em .02em 0 var(--plate-p)}
html.overprint .talk p{color:#c9c2dc}
html.overprint .talk-mail{background:#272150;color:#f4eee4;border-radius:999px;padding:10px 10px 10px 22px}
html.overprint .talk-mail a{color:#f4eee4}
html.overprint .talk-mail .copy{background:var(--plate-b);color:#fff;font-family:var(--mono);text-transform:uppercase;letter-spacing:.06em;font-size:12px;padding:8px 16px}

/* Nav */
html.overprint nav.top .links a{font-family:"Space Grotesk",system-ui,sans-serif;font-weight:500;color:var(--ink)}
html.overprint .navpanel{background:rgba(251,247,240,.72)}
html.overprint .navpanel a[data-k]{color:var(--ink)}
html.overprint .navpanel a[data-k]:hover,html.overprint .navpanel a.cur{color:var(--plate-p)}

/* Playground list + dog page */
html.overprint .pg-name{font-family:var(--display);font-weight:700;letter-spacing:-.03em}
html.overprint .pgp-sub{color:var(--plate-b)}
html.overprint .pgp-shots img{border-radius:18px}

/* Halftone accent: a pink dot screen peeking from behind case-study heroes */
html.overprint body.v2 .v2-hero{position:relative;isolation:isolate;overflow:visible}
html.overprint body.v2 .v2-hero::before{content:"";position:absolute;z-index:-1;right:-14px;bottom:-14px;width:38%;height:55%;border-radius:22px;
  background:radial-gradient(var(--plate-p) 1.6px,transparent 1.9px) 0 0/9px 9px;opacity:.55}
html.overprint .wt-text b{font-family:var(--display);font-weight:700;letter-spacing:-.03em}
html.overprint .wt-text span{font-family:var(--mono);font-size:11px;letter-spacing:.04em;text-transform:uppercase}
/* Dark game features sit on the blue plate */
html.overprint body.v2 figure.feature{background:var(--over);color:#fff;border-radius:22px}
html.overprint body.v2 .feat-kicker{font-family:var(--mono);font-weight:400;letter-spacing:.1em;color:#fff;opacity:.85}
html.overprint body.v2 .feat-text h3{color:#fff;font-family:var(--display);font-weight:800;letter-spacing:-.04em;text-shadow:.022em .02em 0 var(--plate-p)}
html.overprint body.v2 .feat-text p{color:rgba(255,255,255,.88)}
/* Display face = Archivo Expanded */
html.overprint h1,html.overprint h2,html.overprint h3,html.overprint .v2-title,html.overprint .home-hero.with-logo h1 em,html.overprint .wt-text b,html.overprint .pg-name,html.overprint body.v2 .feat-text h3,html.overprint body.v2 .flow figcaption span{font-stretch:125%;letter-spacing:-.04em}
/* Two plates out of register: blue nudged up-left, pink down-right, violet fill = overprint.
   On page load the plates kick apart and settle (once). */
html.overprint h1,html.overprint .v2-title,html.overprint .talk h2,html.overprint .home-hero h1,html.overprint body.v2 .feat-text h3{
  text-shadow:-.018em -.014em 0 var(--plate-b),.022em .02em 0 var(--plate-p);
  animation:overprint-reg 1.1s cubic-bezier(.2,.8,.2,1) .15s both}
html.overprint .home-hero.with-logo h1 em{text-shadow:-.018em -.014em 0 var(--plate-b),.022em .02em 0 var(--over);animation:none}
html.overprint .talk h2,html.overprint body.v2 .feat-text h3{text-shadow:-.018em -.014em 0 #86cdf2,.022em .02em 0 var(--plate-p);animation:none}
@keyframes overprint-reg{
  0%{text-shadow:-.07em -.05em 0 var(--plate-b),.08em .06em 0 var(--plate-p)}
  45%{text-shadow:.02em -.03em 0 var(--plate-b),-.01em .05em 0 var(--plate-p)}
  100%{text-shadow:-.018em -.014em 0 var(--plate-b),.022em .02em 0 var(--plate-p)}}
@media (prefers-reduced-motion:reduce){html.overprint h1,html.overprint .v2-title,html.overprint .home-hero h1{animation:none}}
/* Overprint titles (overprint.js): blue plate + pink plate multiplied = violet */
html.overprint h1.overprint-plates{position:relative;color:var(--plate-b);text-shadow:none;animation:none;isolation:isolate}
html.overprint h1.overprint-plates em{color:inherit;-webkit-text-fill-color:currentColor;text-shadow:none}
html.overprint h1.overprint-plates .overprint-pink{position:absolute;inset:0;color:var(--plate-p);-webkit-text-fill-color:var(--plate-p);mix-blend-mode:multiply;pointer-events:none;
  transform:translate(.03em,.028em);animation:overprint-kick 1.1s cubic-bezier(.2,.8,.2,1) .2s both}
html.overprint h1.overprint-plates .overprint-pink *{color:inherit;-webkit-text-fill-color:inherit}
@keyframes overprint-kick{0%{transform:translate(.1em,.07em)}45%{transform:translate(-.025em,.05em)}100%{transform:translate(.03em,.028em)}}
@media (prefers-reduced-motion:reduce){html.overprint h1.overprint-plates .overprint-pink{animation:none}}
/* Calmer display: a touch narrower + lighter, and a small fixed plate offset */
html.overprint h1,html.overprint .v2-title,html.overprint .home-hero h1,html.overprint .home-hero.with-logo h1 em{font-stretch:112%;font-weight:700;letter-spacing:-.035em}
html.overprint h1.overprint-plates .overprint-pink{transform:translate(clamp(1.5px,.016em,2.5px),clamp(1.5px,.016em,2.5px))}
@keyframes overprint-kick{0%{transform:translate(8px,6px)}45%{transform:translate(-2px,4px)}100%{transform:translate(clamp(1.5px,.016em,2.5px),clamp(1.5px,.016em,2.5px))}}
html.overprint .home-hero.with-logo h1.overprint-plates em{color:var(--plate-b);-webkit-text-fill-color:var(--plate-b);text-shadow:none}
html.overprint .home-hero.with-logo h1.overprint-plates .overprint-pink em{color:var(--plate-p);-webkit-text-fill-color:var(--plate-p)}
/* "stories." = flat brand pink, no overprint */
html.overprint .home-hero.with-logo h1.overprint-plates em{color:var(--plate-p);-webkit-text-fill-color:var(--plate-p);text-shadow:none}
html.overprint .home-hero.with-logo h1.overprint-plates .overprint-pink em{color:transparent;-webkit-text-fill-color:transparent}
/* Menu button = cream icon tile with the two-plate tiles + plus icon */
html.overprint .navfab{background:rgba(251,247,240,.86);-webkit-backdrop-filter:blur(18px) saturate(1.3);backdrop-filter:blur(18px) saturate(1.3);box-shadow:inset 0 0 0 1px rgba(27,22,56,.08)}
html.overprint .navfab .nf-face{width:28px;height:28px;background-image:url("images/brand/overprint-tiles.svg?v=9")}
html.overprint .navfab span{background:var(--over)}
/* Flyout + button as solid paper cards (frosted cream went muddy grey over dark work) */
html.overprint .navfab{background:var(--card);-webkit-backdrop-filter:none;backdrop-filter:none;box-shadow:inset 0 0 0 1px var(--line)}
html.overprint .navpanel{background:var(--card);-webkit-backdrop-filter:none;backdrop-filter:none;border:1px solid var(--line);border-radius:22px}
html.overprint .navpanel .np-home{border-bottom:1.5px dotted var(--plate-b)}
html.overprint .navpanel a[data-k]{font-family:var(--display);font-stretch:112%;font-weight:700;letter-spacing:-.02em;color:var(--over)}
html.overprint .navpanel a[data-k]:hover,html.overprint .navpanel a[data-k]:active,html.overprint .navpanel a[data-k]:focus-visible{color:var(--plate-b)}
html.overprint .navpanel a[data-k]:hover::before,html.overprint .navpanel a[data-k]:active::before,html.overprint .navpanel a[data-k]:focus-visible::before{background:linear-gradient(var(--plate-b),var(--plate-b)) center/100% 2.5px no-repeat,linear-gradient(var(--plate-b),var(--plate-b)) center/2.5px 100% no-repeat}
html.overprint .navpanel a.cur{color:var(--plate-p)}
html.overprint .navpanel a.cur::before{background:linear-gradient(var(--plate-p),var(--plate-p)) center/100% 2.5px no-repeat,linear-gradient(var(--plate-p),var(--plate-p)) center/2.5px 100% no-repeat}
html.overprint .navpanel a[data-k]::after{display:none}
/* Flyout: inset 9px from the button's right edge; light see-through paper with a soft blur */
html.overprint .navpanel{margin-right:9px;background:rgba(251,247,240,.86);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
html.overprint .navfab{background:rgba(251,247,240,.86);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
/* Close X in the two-plate icon style */
html.overprint .navfab span{display:none}
html.overprint .navfab::after{content:"";position:absolute;inset:0;margin:auto;width:24px;height:24px;background:url("images/brand/overprint-x.svg?v=9") center/contain no-repeat;
  opacity:0;transform:scale(.6) rotate(-45deg);transition:opacity .15s ease,transform .25s cubic-bezier(.34,1.56,.64,1);pointer-events:none}
html.overprint .navfab.open::after{opacity:1;transform:none}
/* Button + flyout nudged 20px right, off the content edge onto the page background (wide screens only) */
@media (min-width:900px){
  html.overprint .navfab{margin-right:-20px}
  html.overprint .navpanel{margin-right:-11px}
}
html.overprint .navfab::after{width:26px;height:26px}
/* Flyout in pale pink so it separates from the cream page */
html.overprint .navpanel{background:rgba(252,226,237,.9);border-color:#f6cfe0}
html.overprint .home .selected .work-grid{gap:16px}
/* Tile captions: a flat translucent blue bar instead of the dark gradient */
html.overprint .home .selected .wt-info{padding:16px 20px 18px;background:rgba(48,166,230,.6);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);top:auto}
html.overprint .home .selected .wt-text span{opacity:.95}
/* Alternate the two plates across the tiles: blue, pink, blue... */
html.overprint .home .selected .wt:nth-child(2n) .wt-info{background:rgba(251,31,123,.6)}
/* Home hero: logo small at the top right, headline takes the left */
html.overprint .home-hero.with-logo{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"h logo";justify-content:stretch;align-items:start;column-gap:clamp(24px,4vw,64px)}
html.overprint .home-hero.with-logo h1{max-width:16ch;grid-area:h}
html.overprint .home-hero.with-logo .hh-logo{grid-area:logo;width:clamp(120px,13vw,180px);justify-self:end;align-self:start;transform:none}
@media (max-width:760px){html.overprint .home-hero.with-logo{grid-template-columns:1fr;grid-template-areas:"logo" "h"}html.overprint .home-hero.with-logo .hh-logo{justify-self:start;width:130px}}
/* Home hero: small logo top-left, headline underneath (like the reference lockup) */
html.overprint .home-hero.with-logo{grid-template-columns:minmax(0,1fr);grid-template-areas:"logo" "h";row-gap:clamp(28px,3.5vw,48px)}
html.overprint .home-hero.with-logo .hh-logo{justify-self:start;width:clamp(130px,13vw,180px)}
html.overprint .home-hero.with-logo h1{max-width:none}
/* Home hero pulled up: top of the logo lines up with the top of the nav text */
html.overprint .home-hero.with-logo{margin-top:-27px}
@media (max-width:760px){html.overprint .home-hero.with-logo{margin-top:12px}}
/* One left/right edge: Selected work sits inside the page column (same edges as nav, logo and tagline) */
html.overprint .home .selected{width:auto;margin-left:0;transform:none}
/* Tagline centred between the logo and "Selected work" */
html.overprint .home-hero.with-logo{row-gap:77px;margin-bottom:0}
/* Feature kickers on the violet panels: lilac pink (pink plate glowing on night stock) */
html.overprint body.v2 .feat-kicker{color:#f79ae6;opacity:1}
/* Halftone peeks out at both corners of case-study heroes: bottom-right + top-left */
html.overprint body.v2 .v2-hero::after{content:"";position:absolute;z-index:-1;left:-14px;top:-14px;width:38%;height:55%;border-radius:22px;
  background:radial-gradient(var(--plate-p) 1.6px,transparent 1.9px) 0 0/9px 9px;opacity:.55}
/* No lone overprint dots when a row has no heading */
html.overprint body.v2 .v2-row h2:empty::after{display:none}
/* Overprint dots always sit to the right of their heading text */
html.overprint body.v2 .v2-row h2:not(:empty)::after{display:inline-block;vertical-align:middle;margin:0 0 0 12px;width:30px;height:16px}
html.overprint .about-photo{border-radius:22px}
/* Light + dark design-system boards: dark board overlaps the light one, offset down and right */
body.v2 .mat.together.overlap{display:block;padding:5% 5% 5%}
body.v2 .mat.together.overlap .tog-cell:first-child{width:82%}
body.v2 .mat.together.overlap .tog-cell:last-child{width:82%;margin:-11% 0 0 auto;position:relative}
/* Explorations fanned like the Destiny composites: each one overlaps the last, stepping down a little.
   Current QF (first group) stays on its own. */
body.v2 .mat.groups.cascade .grp:nth-child(2) .grp-imgs{gap:0;align-items:flex-start;padding-bottom:8%}
body.v2 .mat.groups.cascade .grp:nth-child(2) .grp-imgs img{position:relative;filter:drop-shadow(0 1px 2px rgba(0,0,0,.08)) drop-shadow(0 10px 24px rgba(0,0,0,.16))}
body.v2 .mat.groups.cascade .grp:nth-child(2) .grp-imgs img+img{margin-left:-14%}
body.v2 .mat.groups.cascade .grp:nth-child(2) .grp-imgs img:nth-child(2){top:2%;z-index:2}
body.v2 .mat.groups.cascade .grp:nth-child(2) .grp-imgs img:nth-child(3){top:4%;z-index:3}
body.v2 .mat.groups.cascade .grp:nth-child(2) .grp-imgs img:nth-child(4){top:6%;z-index:4}
body.v2 .mat.groups.cascade .grp:nth-child(2) .grp-imgs img:nth-child(5){top:8%;z-index:5}
@media (max-width:760px){body.v2 .mat.groups.cascade .grp:nth-child(2) .grp-imgs img+img{margin-left:0}body.v2 .mat.groups.cascade .grp:nth-child(2) .grp-imgs img{top:0!important}}
/* Staggered instead of a straight staircase: each exploration sits at its own height */
body.v2 .mat.groups.cascade .grp:nth-child(2) .grp-imgs img:nth-child(1){top:3%}
body.v2 .mat.groups.cascade .grp:nth-child(2) .grp-imgs img:nth-child(2){top:9%}
body.v2 .mat.groups.cascade .grp:nth-child(2) .grp-imgs img:nth-child(3){top:0}
body.v2 .mat.groups.cascade .grp:nth-child(2) .grp-imgs img:nth-child(4){top:7%}
body.v2 .mat.groups.cascade .grp:nth-child(2) .grp-imgs img:nth-child(5){top:2%}
/* Supporting graphic sized to the text column it belongs to (not full width) */
body.v2 .mat.in-text{margin-left:calc((100% - 48px) / 3 + 48px);padding:4%}
@media (max-width:760px){body.v2 .mat.in-text{margin-left:0}}
/* Big stats: number in the blue plate, the plus sign in pink */
html.overprint .v2-stats b{color:var(--plate-b)}
html.overprint .v2-stats b i{font-style:normal;color:var(--plate-p)}
/* Big stats: number + plus in pink, the % is a two-plate overprint icon */
html.overprint .v2-stats b{color:var(--plate-p)}
html.overprint .v2-stats b .pct{display:inline-block;width:.64em;height:.73em;margin-left:.06em;vertical-align:baseline;
  background:url("images/brand/overprint-percent.svg?v=9") center/contain no-repeat}
/* Beat cards: a full-width row of cream cards (icon card when an icon exists, title card otherwise) */
body.v2 .beat-cards{display:grid;grid-template-columns:repeat(var(--n),minmax(0,1fr));gap:14px;margin-top:8px}
body.v2 .bc{background:var(--card,#fbf7f0);border-radius:22px;padding:22px 20px 24px;display:flex;flex-direction:column;gap:10px}
body.v2 .bc-ic svg{width:64px;height:64px;display:block;margin:2px 0 10px}
body.v2 .bc-lab{font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--plate-p)}
body.v2 .bc-title{font-family:var(--display);font-stretch:112%;font-weight:700;font-size:clamp(20px,1.8vw,26px);letter-spacing:-.03em;line-height:1.1;color:var(--over);margin-bottom:2px}
body.v2 .bc p{margin:0;font-size:15px;line-height:1.45}
@media (max-width:1100px){body.v2 .beat-cards{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:760px){body.v2 .beat-cards{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:480px){body.v2 .beat-cards{grid-template-columns:1fr}}
/* Research studies: two cards, method on top, findings as overprint-dot bullets */
body.v2 .studies{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin-top:8px}
body.v2 .study{background:var(--card,#fbf7f0);border-radius:22px;padding:26px 26px 28px;display:flex;flex-direction:column;gap:10px}
body.v2 .study-lab{font-family:var(--display);font-stretch:112%;font-weight:700;font-size:clamp(20px,1.8vw,26px);letter-spacing:-.03em;line-height:1.1;color:var(--over)}
body.v2 .study-how{margin:0;font-size:15px;line-height:1.5;color:var(--muted)}
body.v2 .study-k{margin-top:8px;font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--plate-p)}
body.v2 .study ul{list-style:none;margin:0;padding:0;display:grid;gap:8px}
body.v2 .study li{position:relative;padding-left:30px;font-size:16px;line-height:1.45;color:var(--ink)}
body.v2 .study li::before{content:"";position:absolute;left:0;top:.42em;width:20px;height:11px;background:radial-gradient(circle 5.5px at 5.5px 5.5px,var(--plate-b) 98%,transparent 100%),radial-gradient(circle 5.5px at 14px 5.5px,var(--plate-p) 98%,transparent 100%);background-blend-mode:multiply}
@media (max-width:760px){body.v2 .studies{grid-template-columns:1fr}}
/* Study bullets: one small dot with a slight pink print offset (not the double-dot marker) */
body.v2 .study li{padding-left:22px}
body.v2 .study li::before{top:.4em;width:11px;height:11px;
  background:radial-gradient(circle 4px at 4px 4px,var(--plate-b) 97%,transparent 100%),radial-gradient(circle 4px at 6.2px 6.2px,var(--plate-p) 97%,transparent 100%);background-blend-mode:multiply}
/* 7 cards: 4 + 3 instead of one cramped row */
body.v2 .beat-cards[style*="--n:7"]{grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:760px){body.v2 .beat-cards[style*="--n:7"]{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:480px){body.v2 .beat-cards[style*="--n:7"]{grid-template-columns:1fr}}
/* Alternating feature panels (Edge of Fate): every other one on the blue plate */
html.overprint body.v2 figure.feature.alt{background:var(--plate-b)}
html.overprint body.v2 figure.feature.alt .feat-kicker{color:#fff;opacity:.9}
html.overprint body.v2 figure.feature.alt .feat-text h3{text-shadow:-.018em -.014em 0 #86cdf2,.022em .02em 0 var(--over)}
/* Blue panels: keep the pink — lilac-pink kicker, solid pink print offset on the headline (no violet blend) */
html.overprint body.v2 figure.feature.alt .feat-kicker{color:#ffb8ef;opacity:1}
html.overprint body.v2 figure.feature.alt .feat-text h3{text-shadow:.022em .02em 0 var(--plate-p)}
/* Avatars comparison: both rows on one card, one title per row */
body.v2 .mat.compare-rows{display:grid;gap:14px;padding:5% 5% 5.5%}
body.v2 .mat.compare-rows .label-cap{margin:0}
body.v2 .mat.compare-rows .label-cap+.cmp-row{margin-bottom:22px}
body.v2 .mat.compare-rows .cmp-row:last-child{margin-bottom:0}
body.v2 .cmp-row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(10px,2%,24px)}
body.v2 .cmp-row img{width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:10px;display:block}
@media (max-width:760px){body.v2 .cmp-row{grid-template-columns:1fr}}
/* Avatars "The problem": old-avatar screenshot as a small supporting image beside the list */
body.v2 .problem-pair{align-items:start}
body.v2 .problem-pair .og-thumb{margin:0;padding:6%}
body.v2 .problem-pair .og-thumb img{width:100%;height:auto;display:block;border-radius:10px}
body.v2 .problem-pair .og-thumb .label-cap{margin-top:12px;display:block}
/* Two clips sharing one mat */
body.v2 .mat.vpair{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(14px,2.4%,32px);padding:5%}
body.v2 .vp-cell{display:grid;gap:14px;align-content:start}
body.v2 .vp-cell video{width:100%;height:auto;display:block;border-radius:10px}
body.v2 .vp-cell .label-cap{margin:0}
@media (max-width:760px){body.v2 .mat.vpair{grid-template-columns:1fr}}
body.v2 .mat.together.even .tog-cell img{aspect-ratio:16/10;object-fit:cover;object-position:center top;border-radius:10px}
html.overprint body.v2 .phones{border-radius:22px}
/* Device frames: a tighter, softer drop shadow */
body.v2 .phones .dev{box-shadow:0 6px 14px rgba(0,0,0,.14),0 1px 3px rgba(0,0,0,.08)}
body.v2 .phones .dev.live{box-shadow:none}
body.v2 .phones .dev.live iframe{filter:drop-shadow(0 6px 14px rgba(0,0,0,.14))}
body.v2 .devices .dev{box-shadow:0 8px 18px rgba(0,0,0,.18),0 1px 3px rgba(0,0,0,.08)}
/* Carousel tabs: rounded pills like the rest of the overprint UI */
html.overprint body.v2 .tabbar{gap:10px}
html.overprint body.v2 .tabbar button{font:600 15px/1 "Space Grotesk",system-ui,sans-serif;padding:12px 20px;border:2px solid var(--ink);border-radius:999px;background:transparent;color:var(--ink);transition:background .15s ease,color .15s ease,border-color .15s ease}
html.overprint body.v2 .tabbar button:hover{border-color:var(--plate-b);color:var(--plate-b)}
html.overprint body.v2 .tabbar button[aria-selected="true"]{background:var(--plate-b);border-color:var(--plate-b);color:#fff}
html.overprint body.v2 .tabnav{font:400 13px/1 var(--mono);letter-spacing:.06em;color:var(--muted)}
html.overprint body.v2 .tabnav button{width:44px;height:44px;border-radius:50%;border:2px solid var(--ink);background:transparent;color:var(--ink);display:grid;place-items:center;transition:background .15s ease,color .15s ease}
html.overprint body.v2 .tabnav button:hover{background:var(--ink);color:#fff}
/* Carousel arrows as overprint buttons: blue disc with a pink copy printed slightly off-register */
html.overprint body.v2 .tabnav button{position:relative;border:0;background:var(--plate-b);color:#fff;font-weight:700;transition:transform .15s ease}
html.overprint body.v2 .tabnav button::before{content:"";position:absolute;inset:0;border-radius:50%;background:var(--plate-p);z-index:-1;transform:translate(3px,3px);transition:transform .15s ease}
html.overprint body.v2 .tabnav button:hover{background:var(--plate-b);color:#fff;transform:translate(-1px,-1px)}
html.overprint body.v2 .tabnav button:hover::before{transform:translate(5px,5px)}
html.overprint body.v2 .tabnav button:active{transform:translate(1px,1px)}
html.overprint body.v2 .tabnav button:active::before{transform:translate(1px,1px)}
html.overprint body.v2 .tabnav{position:relative;isolation:isolate}
/* Carousel arrows: just the arrows, printed blue with a pink offset; they nudge out on hover */
html.overprint body.v2 .tabnav button{width:auto;height:auto;padding:4px 8px;border:0;border-radius:0;background:none;color:var(--plate-b);
  font:800 38px/1 var(--display);font-stretch:112%;text-shadow:.06em .05em 0 var(--plate-p);transform:none;transition:transform .18s cubic-bezier(.34,1.56,.64,1),text-shadow .18s ease}
html.overprint body.v2 .tabnav button::before,html.overprint body.v2 .tabnav button::after{content:none}
html.overprint body.v2 .tabnav button:hover{background:none;color:var(--plate-b);text-shadow:.12em .1em 0 var(--plate-p)}
html.overprint body.v2 .tabnav .tabprev:hover{transform:translateX(-4px)}
html.overprint body.v2 .tabnav .tabnext:hover{transform:translateX(4px)}
html.overprint body.v2 .tabnav button:active{transform:none;text-shadow:.03em .02em 0 var(--plate-p)}
/* Carousel arrows, real overprint: a blue chevron and a pink chevron multiplied on top (violet where they cross) */
html.overprint body.v2 .tabnav button{position:relative;width:40px;height:40px;padding:0;font-size:0;color:transparent;text-shadow:none}
html.overprint body.v2 .tabnav button::before,html.overprint body.v2 .tabnav button::after{content:"";position:absolute;inset:0;background:center/contain no-repeat;transition:transform .2s cubic-bezier(.34,1.56,.64,1)}
html.overprint body.v2 .tabnav button::after{mix-blend-mode:multiply;transform:translate(3px,3px)}
html.overprint body.v2 .tabnav .tabprev::before{background-image:url("images/brand/chev-left-blue.svg?v=9")}
html.overprint body.v2 .tabnav .tabprev::after{background-image:url("images/brand/chev-left-pink.svg?v=9")}
html.overprint body.v2 .tabnav .tabnext::before{background-image:url("images/brand/chev-right-blue.svg?v=9")}
html.overprint body.v2 .tabnav .tabnext::after{background-image:url("images/brand/chev-right-pink.svg?v=9")}
html.overprint body.v2 .tabnav button:hover{text-shadow:none}
html.overprint body.v2 .tabnav .tabprev:hover{transform:translateX(-4px)}
html.overprint body.v2 .tabnav .tabnext:hover{transform:translateX(4px)}
html.overprint body.v2 .tabnav button:hover::after{transform:translate(6px,5px)}
html.overprint body.v2 .tabnav button:active::after{transform:translate(1px,1px)}
/* Chunky arrows: the pink plate sits off to the side horizontally, and slides further apart on hover */
html.overprint body.v2 .tabnav button{width:42px;height:42px}
html.overprint body.v2 .tabnav .tabprev:hover,html.overprint body.v2 .tabnav .tabnext:hover{transform:none}
html.overprint body.v2 .tabnav .tabprev::after{transform:translateX(-4px)}
html.overprint body.v2 .tabnav .tabnext::after{transform:translateX(4px)}
html.overprint body.v2 .tabnav .tabprev:hover::after{transform:translateX(-9px)}
html.overprint body.v2 .tabnav .tabnext:hover::after{transform:translateX(9px)}
html.overprint body.v2 .tabnav button:active::after{transform:none}
/* Triangle arrows: pink plate up and outward (mirrored on the left); further apart on hover; disabled at the ends */
html.overprint body.v2 .tabnav button{width:34px;height:34px}
html.overprint body.v2 .tabnav .tabnext::after{transform:translate(3px,-3px)}
html.overprint body.v2 .tabnav .tabprev::after{transform:translate(-3px,-3px)}
html.overprint body.v2 .tabnav .tabnext:hover::after{transform:translate(7px,-4px)}
html.overprint body.v2 .tabnav .tabprev:hover::after{transform:translate(-7px,-4px)}
html.overprint body.v2 .tabnav button:disabled{opacity:.28;cursor:default;filter:grayscale(1)}
html.overprint body.v2 .tabnav button:disabled::after{transform:none}
/* Disabled arrow: keep the colours, just faded to 25%, and no hover movement */
html.overprint body.v2 .tabnav button:disabled{opacity:.25;filter:none;cursor:default}
html.overprint body.v2 .tabnav .tabprev:disabled::after{transform:translate(-3px,-3px)}
html.overprint body.v2 .tabnav .tabnext:disabled::after{transform:translate(3px,-3px)}
/* Disabled arrows are inert: no pointer events, no transitions, no movement */
html.overprint body.v2 .tabnav button:disabled{pointer-events:none;transition:none;transform:none}
html.overprint body.v2 .tabnav button:disabled::before,html.overprint body.v2 .tabnav button:disabled::after{transition:none}
/* Hover only spreads the plates sideways (vertical offset stays put) */
html.overprint body.v2 .tabnav .tabnext:hover::after{transform:translate(8px,-3px)}
html.overprint body.v2 .tabnav .tabprev:hover::after{transform:translate(-8px,-3px)}
html.overprint body.v2 .tabnav .tabnext:active::after{transform:translate(1px,-3px)}
html.overprint body.v2 .tabnav .tabprev:active::after{transform:translate(-1px,-3px)}
/* Click: the arrow punches forward while the pink snaps into register (all violet), then springs back */
html.overprint body.v2 .tabnav .tabnext:active::after{transform:translate(3px,-3px)}
html.overprint body.v2 .tabnav .tabprev:active::after{transform:translate(-3px,-3px)}
@keyframes op-punch-r{0%{transform:none}35%{transform:translateX(6px)}100%{transform:none}}
@keyframes op-punch-l{0%{transform:none}35%{transform:translateX(-6px)}100%{transform:none}}
@keyframes op-reg-r{0%{transform:translate(8px,-3px)}35%{transform:translate(0,0)}100%{transform:translate(3px,-3px)}}
@keyframes op-reg-l{0%{transform:translate(-8px,-3px)}35%{transform:translate(0,0)}100%{transform:translate(-3px,-3px)}}
html.overprint body.v2 .tabnav .tabnext.bump{animation:op-punch-r .36s cubic-bezier(.34,1.56,.64,1)}
html.overprint body.v2 .tabnav .tabprev.bump{animation:op-punch-l .36s cubic-bezier(.34,1.56,.64,1)}
html.overprint body.v2 .tabnav .tabnext.bump::after{animation:op-reg-r .36s cubic-bezier(.34,1.56,.64,1)}
html.overprint body.v2 .tabnav .tabprev.bump::after{animation:op-reg-l .36s cubic-bezier(.34,1.56,.64,1)}
@media (prefers-reduced-motion:reduce){html.overprint body.v2 .tabnav .bump,html.overprint body.v2 .tabnav .bump::after{animation:none}}
/* Hover: the two plates move apart in opposite directions (blue one way, pink the other), sideways only */
html.overprint body.v2 .tabnav .tabnext:hover::before{transform:translateX(-3px)}
html.overprint body.v2 .tabnav .tabnext:hover::after{transform:translate(6px,-3px)}
html.overprint body.v2 .tabnav .tabprev:hover::before{transform:translateX(3px)}
html.overprint body.v2 .tabnav .tabprev:hover::after{transform:translate(-6px,-3px)}
html.overprint body.v2 .tabnav button:disabled::before{transform:none}
@keyframes op-reg-r{0%{transform:translate(6px,-3px)}35%{transform:translate(0,0)}100%{transform:translate(3px,-3px)}}
@keyframes op-reg-l{0%{transform:translate(-6px,-3px)}35%{transform:translate(0,0)}100%{transform:translate(-3px,-3px)}}
/* Click v2: start and end at the hover spread, both plates meet in register mid-way (no snap at the end) */
@keyframes op-reg-r{0%{transform:translate(6px,-3px)}40%{transform:translate(0,0)}100%{transform:translate(6px,-3px)}}
@keyframes op-reg-l{0%{transform:translate(-6px,-3px)}40%{transform:translate(0,0)}100%{transform:translate(-6px,-3px)}}
@keyframes op-blue-r{0%{transform:translateX(-3px)}40%{transform:translateX(0)}100%{transform:translateX(-3px)}}
@keyframes op-blue-l{0%{transform:translateX(3px)}40%{transform:translateX(0)}100%{transform:translateX(3px)}}
html.overprint body.v2 .tabnav .tabnext.bump::after{animation:op-reg-r .34s ease-in-out}
html.overprint body.v2 .tabnav .tabprev.bump::after{animation:op-reg-l .34s ease-in-out}
html.overprint body.v2 .tabnav .tabnext.bump::before{animation:op-blue-r .34s ease-in-out}
html.overprint body.v2 .tabnav .tabprev.bump::before{animation:op-blue-l .34s ease-in-out}
html.overprint body.v2 .tabnav .tabnext.bump{animation:op-punch-r .34s ease-in-out}
html.overprint body.v2 .tabnav .tabprev.bump{animation:op-punch-l .34s ease-in-out}
html.overprint body.v2 .tabnav .tabnext:active::after{transform:translate(6px,-3px)}
html.overprint body.v2 .tabnav .tabprev:active::after{transform:translate(-6px,-3px)}
@media (hover:none){
  @keyframes op-reg-r{0%{transform:translate(3px,-3px)}40%{transform:translate(0,0)}100%{transform:translate(3px,-3px)}}
  @keyframes op-reg-l{0%{transform:translate(-3px,-3px)}40%{transform:translate(0,0)}100%{transform:translate(-3px,-3px)}}
  @keyframes op-blue-r{0%,100%{transform:none}}
  @keyframes op-blue-l{0%,100%{transform:none}}
}
@media (prefers-reduced-motion:reduce){html.overprint body.v2 .tabnav .bump::before{animation:none}}
/* Prototype disclaimer: a quiet line in the prototype bar */
body.v2 .live-bar{flex-wrap:wrap;row-gap:6px}
body.v2 .live-note{order:3;flex-basis:100%;margin:0;font-family:var(--mono,ui-monospace,monospace);font-size:11.5px;letter-spacing:.02em;line-height:1.5;color:var(--muted)}
/* Prototype header, overprint style: one title, pill button; the pink nudge sits in the middle of the prototype */
html.overprint body.v2 .live-bar{align-items:center;margin-bottom:12px}
html.overprint body.v2 .live-tag{background:none;padding:0;gap:10px;color:var(--over);font:700 clamp(20px,1.9vw,26px)/1.1 var(--display);font-stretch:112%;letter-spacing:-.03em;text-transform:none}
html.overprint body.v2 .live-tag i{width:10px;height:10px}
html.overprint body.v2 .live-open{font:600 14px/1 "Space Grotesk",system-ui,sans-serif;padding:11px 18px;border:2px solid var(--ink);border-radius:999px;color:var(--ink);transition:background .15s ease,color .15s ease,border-color .15s ease}
html.overprint body.v2 .live-open:hover{background:var(--plate-b);border-color:var(--plate-b);color:#fff}
html.overprint body.v2 .live-stage{border-radius:16px;box-shadow:0 0 0 2px var(--plate-p)}
html.overprint body.v2 .live-nudge{top:50%;bottom:auto;left:50%;transform:translate(-50%,-50%);border-radius:16px}
@media (max-width:560px){html.overprint body.v2 .live-tag{display:inline-flex}}
/* Tap-to-explore nudge: a rounded pill, no drop shadow (UI never gets shadows) */
html.overprint body.v2 .live-nudge{border-radius:999px;padding:12px 26px 12px 14px;box-shadow:none}
/* Same corner radius as the cards (22px) instead of a full pill */
html.overprint body.v2 .live-nudge{border-radius:22px;padding:12px 22px 12px 16px}
html.overprint body.v2 .live-stage{border-radius:22px}
html.overprint body.v2 .live-tag i{display:none}
html.overprint body.v2 .live-nudge{gap:22px;padding:14px 24px 14px 22px}
/* Nudge: keep the dot a circle, and let the text fill the box (no dead space on the right) */
html.overprint body.v2 .live-dot{flex:0 0 14px;width:14px;height:14px}
html.overprint body.v2 .live-nudge{gap:18px;padding:14px 24px 14px 22px;width:max-content;max-width:min(88%,440px)}
html.overprint body.v2 .live-nudge > span:last-child{max-width:none;flex:1 1 auto}
/* More room: description sits clear of the button, prototype a little lower */
html.overprint body.v2 .live-bar{row-gap:0;margin-bottom:22px}
html.overprint body.v2 .live-note{margin-top:16px}
/* Prototype starts "asleep": a dim cover over it (under the pink nudge). First click anywhere fades both away, then it's live */
body.v2 .live-cover{position:absolute;inset:0;z-index:2;background:rgba(18,12,40,.5);cursor:pointer;transition:opacity .35s ease}
body.v2 .live-nudge{z-index:3;transition:opacity .3s ease,transform .35s cubic-bezier(.4,0,.2,1)}
body.v2 figure.live.touched .live-cover{opacity:0;pointer-events:none}
html.overprint body.v2 figure.live.touched .live-nudge{opacity:0;transform:translate(-50%,-50%) scale(.92)}
/* Carousel arrows + counter on every carousel, at every size (a fun flavor element) */
/* Labelled points inside a side panel (Concepting) */
body.v2 .side-points{margin:0;display:grid;gap:18px}
body.v2 .side-points div{display:grid;gap:4px}
body.v2 .side-points dt{font-family:var(--mono,ui-monospace,monospace);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--plate-p,#fb1f7b)}
body.v2 .side-points dd{margin:0;font-size:16px;line-height:1.45}
html.overprint body{padding-bottom:28px}
/* Copyright symbol at the height of the capitals */
html.overprint .site-foot .c{font-family:"Space Grotesk",system-ui,sans-serif;font-size:1.5em;line-height:0;vertical-align:-.14em}
/* Copyright mark drawn to exactly the cap height (0.7em in Space Mono), sitting on the baseline */
html.overprint .site-foot svg.c{display:inline-block;width:.7em;height:.7em;vertical-align:baseline;margin-right:.15em;overflow:visible}
html.overprint .site-foot svg.c{vertical-align:-.05em}
/* Blue panels on the lighter blue: dark text for contrast */
html.overprint body.v2 figure.feature.alt{color:#16122b}
html.overprint body.v2 figure.feature.alt .feat-kicker{color:#6b0032;opacity:1}
html.overprint body.v2 figure.feature.alt .feat-text h3{color:var(--over);text-shadow:.022em .02em 0 var(--plate-p)}
html.overprint body.v2 figure.feature.alt .feat-text p{color:#16122b}
/* About "reasons" numbers: bold display numerals with the two-plate overprint */
html.overprint .reasons li{align-items:start}
html.overprint .reasons li > span{position:relative;isolation:isolate;display:inline-block;font-family:var(--display);font-stretch:112%;font-weight:800;font-size:34px;line-height:1;letter-spacing:-.04em;color:var(--plate-b)}
html.overprint .reasons li > span .overprint-pink{position:absolute;inset:0;color:var(--plate-p);mix-blend-mode:multiply;pointer-events:none;transform:translate(2px,2px)}
html.overprint .reasons li > span{margin-top:-.18em}
/* Blue panels: only the small label goes dark; headline and body stay white */
html.overprint body.v2 figure.feature.alt{color:#fff}
html.overprint body.v2 figure.feature.alt .feat-text h3{color:#fff;text-shadow:.022em .02em 0 var(--plate-p)}
html.overprint body.v2 figure.feature.alt .feat-text p{color:rgba(255,255,255,.92)}
html.overprint .reasons li > span .overprint-pink{transform:translate(3px,3px)}
html.overprint .reasons li > span .overprint-pink{font:inherit;font-weight:inherit;font-size:inherit;line-height:inherit;letter-spacing:inherit;font-stretch:inherit}
html.overprint .reasons li > span .overprint-pink{transform:translate(2.25px,2.25px)}
/* About "Playground" heading: same two-plate treatment as the page titles */
html.overprint .playground > h2.overprint-plates{position:relative;isolation:isolate;display:inline-block;color:var(--plate-b);text-shadow:none;font-stretch:112%;font-weight:700;letter-spacing:-.035em}
html.overprint .playground > h2.overprint-plates .overprint-pink{position:absolute;inset:0;color:var(--plate-p);-webkit-text-fill-color:var(--plate-p);mix-blend-mode:multiply;pointer-events:none;font:inherit;letter-spacing:inherit;
  transform:translate(clamp(1.5px,.016em,2.5px),clamp(1.5px,.016em,2.5px));animation:overprint-kick 1.1s cubic-bezier(.2,.8,.2,1) .2s both}
@keyframes overprint-kick-sm{0%{transform:translate(.1em,.07em)}100%{transform:translate(clamp(1.5px,.016em,2.5px),clamp(1.5px,.016em,2.5px))}}
html.overprint .playground > h2.overprint-plates .overprint-pink{animation-name:overprint-kick-sm}
@media (prefers-reduced-motion:reduce){html.overprint .playground > h2.overprint-plates .overprint-pink{animation:none}}
/* About: lead line above photo + list; the list runs from the photo's top edge to its bottom edge */
@media (min-width:761px){
  html.overprint .about-top{align-items:stretch}
  html.overprint .about-photo{height:100%;object-fit:cover}
  html.overprint .reasons li:first-child{border-top:0;padding-top:0}
  html.overprint .reasons li:last-child{padding-bottom:0}
}
/* Top nav links: blue on hover, same as the flyout menu */
html.overprint nav.top .links a{transition:color .15s ease}
html.overprint nav.top .links a:hover{color:var(--plate-b)}
/* Contact card: headline on one line so the card is shorter (can still wrap on phones) */
html.overprint .talk h2{max-width:none;font-size:clamp(24px,3.1vw,42px)}
/* Contact card: half the space above and below */
html.overprint .talk{padding-top:clamp(16px,2.5vw,32px);padding-bottom:clamp(16px,2.5vw,32px)}
/* Contact card: half the gap above it */
html.overprint .talk{margin-top:clamp(40px,5vw,70px)}
/* Home: the page grid already adds 72px between sections, so no extra margin above the contact card */
html.overprint .selected + .talk{margin-top:0}
/* Contact card -> footer: same 72px gap as above the card (22 + footer's 40 margin + its 10px inset) */
html.overprint .talk{margin-bottom:22px}
/* Home: name logo (Figma 2026-11-06) top-left, and the three faces perched on "stories." */
html.overprint .home-hero h1 em{position:relative;display:inline-block}
html.overprint .home-hero .hh-faces{position:absolute;left:50%;bottom:78%;width:1.9em;height:auto;transform:translateX(-45%);pointer-events:none;border-radius:0;aspect-ratio:auto}
html.overprint .home-hero .overprint-pink .hh-faces{display:none}
@media (max-width:760px){html.overprint .home-hero .hh-faces{left:100%;bottom:.08em;width:1.7em;transform:translateX(.2em)}}
/* Very narrow windows (under 380px): smaller faces + tighter links so they never collide */
@media (max-width:380px){html.overprint nav.top .logo{height:26px}html.overprint nav.top .links{gap:14px}}
/* Home tiles: smaller caption text (title ~22px, subtitle 12px at 1280 wide) */
html.overprint .home .selected .wt-text b{font-size:clamp(18px,1.75vw,26px)}
html.overprint .home .selected .wt-text span{font-size:clamp(11px,.95vw,13px)}