/* Structure draft only: visual design is on hold, so styling is deliberately plain.
   Shared by the homepage and every case study. */
:root{
  --bg:#ffffff; --ink:#17171b; --muted:#5f606a; --tile:#f3f3f5; --line:#e3e3e8;
  --todo:#fb1f7b; --todo-bg:#ffe8f1;
  color-scheme:light;
}
*{box-sizing:border-box}
body{background:var(--bg);color:var(--ink);font:400 16px/1.6 system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;padding-inline:clamp(16px,4vw,48px);padding-block:0 64px}
a{color:inherit}
.wrap{max-width:1120px;margin-inline:auto;display:grid;gap:72px}
h1,h2,h3,h4{text-wrap:balance;margin:0;line-height:1.15}
h1{font-size:clamp(32px,5vw,52px);font-weight:700;letter-spacing:-.02em}
h2{font-size:clamp(24px,3vw,32px);font-weight:700;letter-spacing:-.01em}
h3{font-size:19px;font-weight:650}
h4{font-size:17px;font-weight:650}
p{margin:0}
ul{margin:0;padding-left:1.1em;display:grid;gap:4px}
.muted{color:var(--muted)}
.label{font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.todo{background:var(--todo-bg);color:var(--todo);font-weight:600;padding:0 .3em;border-radius:3px}

/* draft notice + nav */
.draftbar{margin-inline:calc(-1 * clamp(16px,4vw,48px));padding:10px clamp(16px,4vw,48px);background:var(--tile);border-bottom:1px solid var(--line);font-size:13px;color:var(--muted)}
.draftbar b{color:var(--ink)}
nav.top{max-width:1120px;margin:20px auto 0;display:flex;justify-content:space-between;align-items:center;gap:16px;font-size:14px}
nav.top .name{text-decoration:none;font-weight:650}
nav.top .links{display:flex;gap:20px}
nav.top .links a{text-decoration:none;color:var(--muted)}

/* page title + hero */
.hero{display:grid;gap:20px;margin-top:28px}
.hero-title{display:grid;gap:8px;max-width:62ch}
.lede{font-size:clamp(18px,2vw,21px);line-height:1.5}
.hero-image img{display:block;width:100%;height:auto;border-radius:12px;background:var(--tile)}

/* about + details */
.intro{display:grid;grid-template-columns:minmax(0,1fr);gap:32px}
.intro-text{display:grid;gap:14px;max-width:62ch}
.intro-text p{color:var(--muted)}
/* project facts: one horizontal row under About (wraps on narrow screens) */
.details{display:flex;flex-wrap:wrap;align-items:flex-start;text-align:left;gap:20px 48px;margin:0;padding-top:24px;border-top:1px solid #e5e5ea}
.details div{display:grid;gap:4px;align-content:start}
.details dt{font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.details dd{margin:0}
.fact-list{margin:0;padding-left:14px;display:grid;gap:2px}
.fact-list li{padding-left:2px}
.fact-list li::marker{color:var(--muted)}

/* sections */
section{display:grid;gap:32px}
.section-head{display:grid;gap:8px;max-width:62ch}
.block{display:grid;gap:18px}
.block-text{display:grid;gap:8px;max-width:62ch}
.block-text p{color:var(--muted)}
.block + .block{padding-top:16px}
/* a feature's own sub-section inside "The final work" */
.block.part{margin-top:40px;padding-top:40px;border-top:1px solid #e5e5ea}
.part-head{display:grid;gap:6px}
.part-head h2{font-size:clamp(26px,3.2vw,34px)}
.block.side{grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:32px;align-items:start}
.block.side > div:first-child{display:grid;gap:14px}
.block.side.proto{align-items:center}
.block.side .slide-text{grid-template-columns:1fr}   /* a carousel in the right column: slide text in one column under the image */
.proto-frame{width:100%;max-width:400px;justify-self:center;aspect-ratio:var(--ratio);border-radius:12px;overflow:hidden;background:var(--bg)}
.proto-frame iframe{display:block;width:100%;height:100%;border:0}
.proto-note{display:flex;align-items:center;gap:8px;font-size:14px;color:var(--muted)}
.proto-note span{flex:none;width:8px;height:8px;border-radius:50%;background:#fb1f7b}

/* outcome numbers */
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:16px}
.stat{display:grid;gap:4px;padding:18px 20px;border:1px solid var(--line);border-radius:12px}
.stat b{font-size:32px;line-height:1.1;font-variant-numeric:tabular-nums}
.stat span{color:var(--muted);font-size:15px}

/* images */
figure{margin:0;display:grid;gap:8px}
figure img{display:block;width:100%;height:auto;border-radius:10px;background:var(--tile)}
figure a{display:block}
.gallery.capped img{width:auto;max-width:100%;max-height:var(--img-max-h)}
.gallery.capped{justify-content:start;grid-template-columns:repeat(var(--cols,2),minmax(0,max-content))}
figcaption{font-size:13px;color:var(--muted)}
.gallery{display:grid;grid-template-columns:repeat(var(--cols,2),minmax(0,1fr));gap:14px;align-items:start}

/* video stand-in until videos are self-hosted */
.video-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:14px}
.video-card{display:grid;gap:6px;align-content:start;padding:18px 20px;border:1px dashed var(--line);border-radius:12px;background:var(--tile)}
.video-card a{font-weight:600}

/* process steps */
.steps{display:grid;gap:56px}
.step{display:grid;gap:18px}
.step-text{display:grid;gap:8px;max-width:62ch}
.step-text p{color:var(--muted)}
.lists{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:20px 40px}
.lists ul{color:var(--ink)}
details{border-top:1px solid var(--line);padding-top:18px}
summary{cursor:pointer;font-weight:600}
summary:focus-visible{outline:2px solid var(--ink);outline-offset:4px}
details .gallery{margin-top:20px}

/* carousel: tabs + swipeable track + arrows */
.carousel{display:grid;gap:16px}
.carousel-tabs{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;padding-bottom:2px}
.carousel-tabs::-webkit-scrollbar{display:none}
.carousel-tabs button{flex:none;font:500 14px/1 system-ui,-apple-system,sans-serif;padding:10px 14px;border-radius:999px;border:1px solid var(--line);background:var(--bg);color:var(--muted);cursor:pointer}
.carousel-tabs button[aria-selected="true"]{background:var(--ink);border-color:var(--ink);color:var(--bg)}
.carousel-track{display:grid;grid-auto-flow:column;grid-auto-columns:100%;gap:24px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;overscroll-behavior-x:contain;scrollbar-width:none}
.carousel-track::-webkit-scrollbar{display:none}
.carousel-track:focus-visible{outline:2px solid var(--ink);outline-offset:4px}
.slide{scroll-snap-align:start;display:grid;gap:20px;align-content:start}
/* Carousel images sit in a fixed-height frame, short enough that the caption below stays on screen.
   Images are never scaled up: small crops show at their real size, centred, and large ones shrink to fit. */
.slide figure>a,.slide figure>img{height:min(52vh,520px);display:flex;align-items:center;justify-content:center;background:var(--tile);border-radius:10px}
.slide figure img{width:auto;height:auto;max-width:100%;max-height:min(52vh,520px);background:none}
.slide-text{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:16px 48px}
.slide-text.single{grid-template-columns:minmax(0,62ch)}
.slide-text h4{margin-bottom:6px}
.slide-text p{color:var(--muted)}
.slide-text .label{margin-bottom:4px}
.carousel-nav{display:flex;align-items:center;gap:14px}
.carousel-arrow{font:500 18px/1 system-ui,-apple-system,sans-serif;width:44px;height:44px;border-radius:50%;border:1px solid var(--line);background:var(--bg);color:var(--ink);cursor:pointer}
.carousel-arrow:disabled{opacity:.35;cursor:default}
.carousel-arrow:focus-visible,.carousel-tabs button:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.carousel-count{font-size:14px;color:var(--muted);font-variant-numeric:tabular-nums}

/* reflection + next */
.reflect{display:grid;gap:14px;max-width:62ch}
.reflect p{color:var(--muted)}
.next{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;padding-top:24px;border-top:1px solid var(--line);font-size:15px}

/* homepage */
.home-head{display:grid;gap:10px;max-width:62ch;margin-top:40px}
.project-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:28px 20px}
.project-card{display:grid;gap:10px;text-decoration:none;align-content:start}
.project-card img{display:block;width:100%;aspect-ratio:16/10;object-fit:cover;border-radius:12px;background:var(--tile)}
.project-card h3{font-size:18px}
.project-card p{color:var(--muted);font-size:15px}
.project-card:focus-visible{outline:2px solid var(--ink);outline-offset:4px;border-radius:12px}

@media (max-width:760px){
  .block.side{grid-template-columns:1fr}
  .intro,.slide-text{grid-template-columns:1fr}
  .gallery{grid-template-columns:repeat(min(var(--cols,2),2),minmax(0,1fr))}
}
@media (max-width:480px){
  .gallery{grid-template-columns:1fr}
}

/* videos hosted with the site: play silently on a loop, with a pause button */
.video-frame{position:relative;border-radius:10px;overflow:hidden;background:var(--tile)}
.video-frame video{display:block;width:100%;height:auto}
.video-toggle{position:absolute;right:12px;bottom:12px;font:600 13px/1 system-ui,-apple-system,sans-serif;padding:9px 14px;border:0;border-radius:999px;background:rgba(23,23,27,.72);color:#fff;cursor:pointer}
.video-toggle:focus-visible{outline:2px solid #fff;outline-offset:2px}

/* Grid children may shrink below their content width, so a wide row (e.g. capped images) never pushes the page sideways */
.wrap>*,section>*,.block>*{min-width:0}

/* Carousel arrows sit on the image's left and right edges; the one with nowhere to go hides */
.carousel-stage{position:relative}
.carousel-stage .carousel-arrow{position:absolute;top:var(--arrow-top,40%);transform:translateY(-50%);width:44px;height:44px;padding:0;display:grid;place-items:center;border:0;border-radius:0;background:none;box-shadow:none;color:#fff;text-shadow:0 0 6px rgba(0,0,0,.7),0 0 2px rgba(0,0,0,.6);font-size:28px;line-height:1;opacity:.6;transition:opacity .15s}
.carousel-stage .carousel-arrow:hover{opacity:.85}
.carousel-stage .carousel-arrow.prev{left:4px}
.carousel-stage .carousel-arrow.next{right:4px}
.carousel-stage .carousel-arrow:disabled{opacity:0;pointer-events:none}

/* Compare: labelled groups side by side (old vs new); images keep their own size, bottom-aligned */
.compare{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr));gap:28px}
.compare-group{display:grid;gap:10px;align-content:start}
.compare-imgs{display:grid;grid-template-columns:1fr 1fr;gap:10px;align-items:start}
.compare-imgs img{background:none}
/* Chips: a row of pill-shaped words */
.chips{display:flex;flex-wrap:wrap;gap:10px}
.chips span{font:600 15px/1 system-ui,-apple-system,sans-serif;padding:12px 18px;border-radius:999px;background:var(--tile);color:var(--ink)}

/* Case-study opener: a still collage previewing the project (6 → 4 → 2 columns) */
.opener{display:grid;grid-template-columns:repeat(6,1fr);grid-auto-rows:150px;gap:12px}
.op-tile{position:relative;overflow:hidden;border-radius:16px;background:#14161a;grid-column:span 2}
.op-tile.big{grid-column:span 4;grid-row:span 2}
.op-tile.tall{grid-row:span 2}
.op-tile > img,.op-tile > video{width:100%;height:100%;object-fit:cover;display:block}
.op-tile .cap{position:absolute;left:10px;bottom:10px;padding:4px 9px;border-radius:999px;background:rgba(255,255,255,.9);font-size:12px;font-weight:600;color:#1d1d1f}
/* ammo clip: fill the tile, zoomed toward the weapon list and its ammo meters (lower right of the 480x160 clip) */
.op-video:has(video[src*="ammo"]){background:#1e1b24}
.op-video > video[src*="ammo"]{position:absolute;height:160%;width:auto;top:-66%;left:-70%;object-fit:fill;
  -webkit-mask-image:linear-gradient(to bottom,#000 92%,transparent);mask-image:linear-gradient(to bottom,#000 92%,transparent)}   /* meters sit ~72% down; the clip's bottom fades into its own colour */
/* seasonal power: three close-ups cascading down the tile */
.op-stack{background:radial-gradient(120% 90% at 30% 20%,#4a3a5e,#1a1622)}
.op-stack img{position:absolute;height:33.5%;width:auto;max-width:90%;border-radius:4px;box-shadow:0 10px 24px rgba(0,0,0,.5)}
.op-stack .s1{left:4%;top:1.6%}
.op-stack .s2{right:0;top:50%;transform:translate(9%,-50%);z-index:2;box-shadow:0 14px 32px rgba(0,0,0,.65)}   /* middle overlaps top and bottom */
.op-stack .s3{left:4%;bottom:1.6%}
/* tooltip with its expanded panel beside it */
.op-tooltip{background:radial-gradient(120% 90% at 30% 20%,#4a3a5e,#1a1622)}
.op-tooltip .op-tt{position:absolute;left:4%;top:50%;height:78%;width:auto;border-radius:4px;box-shadow:0 10px 24px rgba(0,0,0,.45);transform:translateY(-50%)}
.op-tooltip .op-panel{position:absolute;right:4%;top:50%;width:58%;height:auto;border-radius:3px;box-shadow:0 10px 24px rgba(0,0,0,.55);transform:translateY(-50%)}
/* a screen dimmed behind its panel */
.op-reveal .op-base{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:brightness(.55);transform:scale(1.06)}
.op-reveal .op-panel{position:absolute;right:8%;top:50%;height:88%;width:auto;border-radius:3px;box-shadow:0 10px 24px rgba(0,0,0,.6);transform:translateY(-50%)}
/* cards fanned out */
.op-cards{position:absolute;inset:0;background:#1c1f25}
.op-cards img{position:absolute;left:50%;top:50%;height:88%;width:auto;border-radius:6px;box-shadow:0 8px 18px rgba(0,0,0,.45);
  transform:translate(-50%,-50%) translateX(calc(var(--i) * 64px)) rotate(calc(var(--i) * 7deg))}
@media (max-width:820px){.opener{grid-template-columns:repeat(4,1fr);grid-auto-rows:140px}}
@media (max-width:520px){.opener{grid-template-columns:repeat(2,1fr);grid-auto-rows:130px}.op-tile.big{grid-column:span 2}}

/* Opener tile showing a wide, thin strip (e.g. a boss health bar): fit it whole, centred, instead of filling the tile */
.op-tile.fit video,.op-tile.fit img{object-fit:contain}

/* ===== Case-study template v2 (body.v2): square corners, light grey mats, pink step numerals ===== */
/* (square-corner rule removed Nov 2026: rounded corners allowed) */
body.v2 .wrap{max-width:1180px;gap:56px}
.v2-top{display:grid;gap:clamp(28px,4vw,56px);padding-top:24px}
.v2-title{font-size:clamp(44px,8.5vw,120px);font-weight:400;letter-spacing:-.045em;line-height:.92;width:100%;white-space:nowrap;position:relative}
.v2-title span{display:inline-block}
/* the details column is as wide as its widest row (the Services pills on one line); the intro takes the rest */
.v2-top-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:32px clamp(40px,5vw,72px);align-items:start}
.v2-lead{display:grid;gap:14px}
.v2-lead p,.v2-text p{color:var(--ink);font-size:clamp(17px,1.45vw,19px);line-height:1.55}
.v2-facts{margin:0;display:grid;gap:12px}
.v2-facts div{display:grid;grid-template-columns:96px 1fr;gap:14px;align-items:baseline}
.v2-facts .pills{display:flex;flex-wrap:nowrap;gap:6px}
@media (max-width:760px){.v2-facts .pills{flex-wrap:wrap}}
.v2-facts .pills span{font-size:11px;font-weight:500;letter-spacing:.06em;text-transform:uppercase;border:1px solid var(--line);padding:6px 10px;white-space:nowrap}
.v2-facts div:has(.pills){align-items:center}
.v2-facts dt{font-size:12px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.v2-facts dd{margin:0;font-size:clamp(16px,1.35vw,18px)}
.v2-hero{margin:0}.v2-hero img,.v2-hero video{width:100%;height:auto;display:block}
.v2-section{display:grid;gap:40px;padding-top:40px}
.v2-divider{padding-top:56px;border-top:1px solid var(--line)}
.v2-divider h2{font-size:clamp(32px,4.5vw,56px);font-weight:400;letter-spacing:-.03em}
.v2-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr);gap:16px 48px;align-items:start}
.v2-row h2{font-size:clamp(24px,2.4vw,30px);font-weight:400;letter-spacing:-.01em}
.v2-text{display:grid;gap:12px}
body.v2 .mat{margin:0;background:#f2f2f4;padding:6%}
body.v2 .mat img,body.v2 .mat video{width:100%;height:auto;display:block;box-shadow:0 1px 2px rgba(0,0,0,.06),0 10px 30px rgba(0,0,0,.10)}
body.v2 .mat.sketch img{box-shadow:none}
body.v2 .mat.board{padding:3%}
body.v2 .pair,body.v2 .flow{display:grid;grid-template-columns:1fr 1fr;gap:20px}
body.v2 .flow .mat{display:grid;gap:14px;padding:5% 5% 4%}
body.v2 .flow figcaption{display:grid;grid-template-columns:auto 1fr;gap:16px;align-items:center;font-size:16px;color:var(--ink);line-height:1.45}
body.v2 .flow figcaption span{font-size:clamp(40px,4vw,56px);font-weight:200;line-height:.85;letter-spacing:-.04em;color:#fb1f7b;min-width:.7em}
body.v2 .stack{display:grid;gap:20px}
body.v2 .grid{display:grid;gap:20px}
body.v2 .grid.g2{grid-template-columns:1fr 1fr}
body.v2 .grid.g3{grid-template-columns:repeat(3,1fr)}
body.v2 .grid.g2 > :last-child:nth-child(odd){grid-column:1/-1}
body.v2 .grid.g3 > :last-child:nth-child(3n+1){grid-column:1/-1}
body.v2 .mat .label-cap{margin-top:14px;font-size:12px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
body.v2 .grid .mat{padding:5%}
.v2-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:24px 40px}
.v2-stats div{display:grid;gap:6px;align-content:start}
.v2-stats b{font-size:clamp(44px,5vw,68px);font-weight:300;letter-spacing:-.04em;line-height:1;color:var(--ink)}
.v2-stats span{font-size:15px;color:var(--muted);line-height:1.45}
.v2-numbered{margin:0;padding:0;list-style:none;display:grid;gap:12px}
.v2-numbered li{display:grid;grid-template-columns:44px 1fr;gap:12px;align-items:baseline;font-size:clamp(16px,1.35vw,18px);line-height:1.5;color:var(--ink);padding-top:12px;border-top:1px solid var(--line)}
.v2-numbered li span{font-size:32px;font-weight:200;line-height:.9;color:#fb1f7b}
body.v2 .mat.flat video,body.v2 .mat.flat img,body.flat-media .mat img,body.flat-media .mat video{box-shadow:none}   /* media already on the mat grey, with their own shadows */   /* clips that carry their own background and shadow */
/* screens cut out on a transparent background: the shadow follows each window's own shape */
body.v2 .mat.cut img{box-shadow:none;filter:drop-shadow(0 1px 2px rgba(0,0,0,.08)) drop-shadow(0 8px 22px rgba(0,0,0,.10))}
body.v2 .mat.together{display:grid;grid-template-columns:repeat(var(--cols),minmax(0,1fr));gap:40px clamp(12px,2.2%,40px);align-items:start;padding:6% 6% 5%}
body.v2 .tog-cell{display:grid;gap:16px;justify-items:center;align-content:start}
body.v2 .tog-cell img{width:100%;height:auto}
body.v2 .tog-cell .label-cap{margin:0;font-size:12px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
@media (max-width:760px){body.v2 .mat.together{grid-template-columns:1fr}}
/* bleed: the screens are cut at one line and run off the bottom edge of the mat */
/* a full-width band: as wide as the screen, the screens cut at the top and bottom edges */
body.v2{overflow-x:clip}
body.v2 .mat.together.bleed{width:100vw;margin-inline:calc(50% - 50vw);padding:0 clamp(16px,3vw,48px);overflow:hidden;gap:0 clamp(12px,1.6vw,28px)}
@media (max-width:760px){body.v2 .mat.together.bleed{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:72vw;overflow-x:auto;scroll-snap-type:x mandatory}
  body.v2 .mat.together.bleed .tog-cell{scroll-snap-align:center}}
/* groups: several screens in one row at one scale, one label per group */
body.v2 .mat.groups{display:flex;gap:clamp(16px,3%,48px);padding:6% 4% 4%}
body.v2 .grp{display:grid;grid-template-rows:1fr auto;gap:20px;min-width:0}
body.v2 .grp-imgs{display:flex;gap:clamp(6px,1.2vw,16px);align-items:center}
body.v2 .grp-imgs img{min-width:0;width:100%;height:auto}
body.v2 .grp .label-cap{margin:0;text-align:center;font-size:12px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
@media (max-width:760px){body.v2 .mat.groups{flex-direction:column;gap:32px}body.v2 .grp-imgs{flex-wrap:wrap;justify-content:center}body.v2 .grp-imgs img{flex:0 0 46% !important}body.v2 .grp:first-child .grp-imgs img{flex-basis:60% !important}}
body.v2 .mat.narrow video{display:block;width:100%;max-width:640px;margin-inline:auto}
body.v2 .mat.narrow > .label-cap{text-align:center;margin-top:16px}
body.v2 .mat.narrow img{max-width:420px;margin-inline:auto}
body.v2 .beats{margin:0;display:grid;gap:14px}
body.v2 .beats.top > div:first-child{border-top:0;padding-top:0}
body.v2 .beats div{display:grid;grid-template-columns:130px 1fr;gap:16px;align-items:baseline;padding-top:14px;border-top:1px solid var(--line)}
body.v2 .beats dt{font-size:12px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
body.v2 .beats dd{margin:0;color:var(--ink);font-size:clamp(16px,1.35vw,18px);line-height:1.55}
@media (max-width:760px){.v2-top-row,.v2-row,body.v2 .pair,body.v2 .flow,body.v2 .grid.g2,body.v2 .grid.g3{grid-template-columns:1fr}.v2-row h2:empty{display:none}body.v2 .beats div{grid-template-columns:1fr;gap:4px}}

/* ---------------- homepage and about (2026-11-05, after gabrielvaldivia.com): light, square ---------------- */
/* (square-corner rule removed Nov 2026) */
.home-hero{display:grid;gap:18px;margin:clamp(48px,8vw,96px) 0 clamp(40px,6vw,72px);max-width:22ch}
.home-hero h1{font-size:clamp(40px,6.4vw,84px);font-weight:400;letter-spacing:-.035em;line-height:1.02}
.home-hero .lede{color:var(--muted);max-width:48ch}
body.home .home-hero{max-width:none}
body.home .home-hero h1{max-width:18ch}
.filters{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:28px}
.chip{font:inherit;font-size:13px;padding:7px 14px;border:1px solid var(--line);background:none;color:var(--muted);cursor:pointer}
.chip.on{background:var(--ink);border-color:var(--ink);color:#fff}
.project-card .tags{display:flex;flex-wrap:wrap;gap:6px}
.project-card .tags span{font-size:11px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);border:1px solid var(--line);padding:3px 8px}
.project-card[hidden]{display:none}
.talk{margin:clamp(80px,10vw,140px) 0 80px;padding-top:56px;border-top:1px solid var(--line);display:grid;gap:14px;justify-items:center;text-align:center}
.talk h2{font-size:clamp(32px,4.6vw,60px);font-weight:400;letter-spacing:-.03em;line-height:1.05;max-width:16ch}
.talk p{color:var(--muted)}
.talk-mail{display:flex;align-items:center;gap:14px;margin-top:10px;padding:14px 18px;background:#f2f2f4;font-size:18px}
.talk-mail a{text-decoration:none}
.copy{font:inherit;font-size:13px;color:var(--muted);background:none;border:1px solid var(--line);padding:5px 12px;cursor:pointer}
.about-top{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr);gap:32px 64px;align-items:start}
.about-photo{width:100%;height:auto;display:block}
.about-lead{font-size:clamp(24px,2.6vw,34px);font-weight:400;letter-spacing:-.015em;line-height:1.2;margin-bottom:28px}
.reasons{list-style:none;margin:0;padding:0;display:grid}
.reasons li{display:grid;grid-template-columns:56px minmax(0,.9fr) minmax(0,1.6fr);gap:8px 24px;padding:20px 0;border-top:1px solid var(--line);align-items:baseline}
.reasons li span{font-size:32px;font-weight:200;line-height:.9;color:#fb1f7b}
.reasons h3{font-size:19px;font-weight:500}
.reasons p{color:var(--muted);line-height:1.55}
@media (max-width:760px){.about-top{grid-template-columns:1fr}.reasons li{grid-template-columns:44px 1fr}.reasons li p{grid-column:2}}

body.v2 .proto-mat{display:grid;gap:16px;justify-items:center}
body.v2 .proto-mat .proto-frame{max-width:440px}

/* phones: screens in phone frames on a coloured band (outlook-booking). Frame proportions match the flows player. */
body.v2 .phones{margin:0;background:var(--pbg);display:flex;justify-content:center;align-items:center;gap:clamp(14px,4vw,64px);padding:clamp(36px,6vw,80px) 4%;overflow:hidden}
body.v2 .phones .dev,body.v2 .devices .dev{container-type:inline-size}
body.v2 .phones .dev{flex:0 0 auto;width:clamp(120px,24%,250px);background:#1b1c1f;border-radius:13.5% / 7.46% !important;box-shadow:0 18px 40px rgba(0,0,0,.25)}
body.v2 .phones .dev > img,body.v2 .devices .dev > img{margin:11.16cqw 5.1cqw;width:calc(100% - 10.2cqw) !important}
body.v2 .phones .dev img{display:block;width:100%;height:auto;border-radius:3px !important}
body.v2 .phones .dev.live{padding:0;background:none;box-shadow:none}
body.v2 .phones .dev.live iframe{display:block;width:100%;aspect-ratio:.5503;border:0;filter:drop-shadow(0 18px 40px rgba(0,0,0,.25))}
/* bleed: a full-width strip of phones that runs off both edges */
body.v2 .phones .dev.tab{width:clamp(220px,46%,500px);border-radius:5% / 3.75% !important}
body.v2 .phones .dev.tab > img{margin:5cqw;width:calc(100% - 10cqw) !important}
body.v2 .phones.bleed{width:100vw;margin-inline:calc(50% - 50vw);gap:clamp(18px,3vw,48px)}
body.v2 .phones.bleed .dev{width:clamp(150px,17vw,250px)}

/* devices hero: a browser window with two phones in front, full width band */
body.v2 .devices{position:relative;margin:0;width:100vw;margin-inline:calc(50% - 50vw);background:var(--pbg);padding:clamp(40px,6vw,90px) 0 clamp(56px,8vw,120px);display:flex;justify-content:center;overflow:hidden}
body.v2 .win{background:#fff;box-shadow:0 24px 60px rgba(0,0,0,.28);border-radius:8px !important;overflow:hidden}
body.v2 .win .bar{height:clamp(14px,1.6vw,24px);background:#e9e9ee;display:flex;gap:6px;align-items:center;padding:0 10px}
body.v2 .win .bar i{width:clamp(6px,.6vw,9px);aspect-ratio:1;border-radius:50% !important;background:#c9c9cf}
body.v2 .win img{display:block;width:100%;height:auto}
body.v2 .devices .win{width:min(72%,1000px)}
body.v2 .devices .dev{position:absolute;bottom:clamp(24px,4vw,64px);width:clamp(90px,13%,190px);background:#1b1c1f;border-radius:13.5% / 7.46% !important;box-shadow:0 24px 50px rgba(0,0,0,.35)}
body.v2 .devices .dev img{display:block;width:100%;height:auto;border-radius:3px !important}
body.v2 .devices .dev.p0{left:calc(14% - 2%)}
body.v2 .devices .dev.p1{right:calc(14% - 2%)}
/* browsers: desktop screens in windows on a band */
body.v2 .browsers{margin:0;background:var(--pbg);display:grid;grid-template-columns:repeat(var(--cols),minmax(0,1fr));gap:clamp(20px,3vw,40px);padding:clamp(28px,5vw,64px)}
@media (max-width:760px){body.v2 .browsers{grid-template-columns:1fr}}

/* live prototypes: a bold "try it" bar above the frame, and a pulsing nudge on it until the first touch */
body.v2 figure.live{margin:0 auto;display:grid;gap:10px;width:min(100%,calc((100svh - 96px) * 4 / 3))}
body.v2 .live-bar{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:nowrap;min-height:40px}
body.v2 .live-head{display:flex;align-items:center;gap:12px;flex-wrap:nowrap;min-width:0}
body.v2 .live-tag{display:inline-flex;align-items:center;gap:8px;font:600 11px/1 system-ui,-apple-system,sans-serif;letter-spacing:.12em;text-transform:uppercase;color:#fff;background:var(--ink);padding:8px 12px 8px 10px}
body.v2 .live-tag i{width:8px;height:8px;border-radius:50% !important;background:#fb1f7b;box-shadow:0 0 0 0 rgba(251,31,123,.7);animation:livepulse 1.6s infinite}
body.v2 .live-head strong{white-space:nowrap;font-size:clamp(18px,2vw,26px);font-weight:700;letter-spacing:-.02em;line-height:1.1}
body.v2 .live-hint{color:var(--muted);font-size:15px}
body.v2 .live-open{font-weight:600;font-size:14px;color:var(--ink);text-decoration:none;border:2px solid var(--ink);padding:7px 12px;white-space:nowrap;flex:none}
body.v2 .live-open:active{background:var(--ink);color:#fff}
body.v2 .live-stage{position:relative;width:100%;aspect-ratio:var(--ratio);overflow:hidden;background:#111;box-shadow:0 0 0 2px #fb1f7b}
body.v2 .live-stage iframe{display:block;border:0;width:100%;height:100%;transform-origin:0 0}
body.v2 figure.live[data-vw]:not([data-vw="0"]) .live-stage iframe{position:absolute;left:0;top:0}
body.v2 .live-nudge{position:absolute;left:50%;bottom:22px;transform:translateX(-50%);display:flex;align-items:center;gap:10px;padding:12px 20px 12px 16px;background:#fb1f7b;color:#fff;font-weight:700;font-size:16px;pointer-events:none;box-shadow:0 8px 24px rgba(0,0,0,.35);transition:opacity .3s}
body.v2 .live-dot{position:relative;width:14px;height:14px;border-radius:50% !important;background:#fff}
body.v2 .live-dot::after{content:"";position:absolute;inset:-6px;border-radius:50% !important;border:2px solid #fff;animation:livering 1.4s ease-out infinite}
body.v2 figure.live.touched .live-nudge{opacity:0}
@keyframes livepulse{70%{box-shadow:0 0 0 8px rgba(251,31,123,0)}100%{box-shadow:0 0 0 0 rgba(251,31,123,0)}}
@keyframes livering{0%{transform:scale(.6);opacity:1}100%{transform:scale(1.8);opacity:0}}
body.v2 .live-nudge span b{display:block;font-size:16px}
body.v2 .live-nudge span{font-weight:500;font-size:13px;line-height:1.3;max-width:300px;white-space:normal}
@media (max-width:560px){body.v2 .live-tag{display:none}}

/* tabset: several images in one frame, switched with tabs (no hover states) */
body.v2 .mat.tabset{display:grid;gap:18px;padding:clamp(16px,3vw,36px)}
body.v2 .tabbar{display:flex;gap:8px;flex-wrap:wrap}
body.v2 .tabbar button{font:600 14px/1 system-ui,-apple-system,sans-serif;padding:10px 16px;border:2px solid var(--ink);background:transparent;color:var(--ink);cursor:pointer}
body.v2 .tabbar button[aria-selected="true"]{background:var(--ink);color:#fff}
body.v2 .tabtop{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}
body.v2 .tabnav{display:flex;align-items:center;gap:10px;font:600 14px/1 system-ui,-apple-system,sans-serif;color:var(--muted)}
body.v2 .tabnav button{width:40px;height:40px;border:2px solid var(--ink);background:transparent;color:var(--ink);font-size:22px;line-height:1;cursor:pointer}
body.v2 .tabpane{display:grid;gap:20px;justify-items:center}
body.v2 .tabpane[hidden]{display:none}
body.v2 .tabpane img{max-width:100%;max-height:62vh;width:auto;height:auto;object-fit:contain}
body.v2 .tabtext{justify-self:stretch;display:grid;grid-template-columns:minmax(0,3fr) minmax(0,2fr);gap:24px;font-size:16px;line-height:1.6;color:var(--ink)}
body.v2 .tabtext p{margin:0}
body.v2 .tabideas b{display:block;font:600 11px/1 system-ui,-apple-system,sans-serif;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-bottom:10px}
body.v2 .tabideas ul{margin:0;padding-left:18px;color:var(--muted);font-size:15px}
@media (max-width:700px){body.v2 .tabtext{grid-template-columns:1fr}}
body.v2 .mat.together.clear img{background:transparent !important}

/* split research carousel: text left, boards right, all within one laptop screen */
body.v2 .tabset.split .tabpane{grid-template-columns:minmax(0,1fr) minmax(0,2fr);align-items:start;justify-items:stretch;gap:clamp(20px,3vw,44px)}
body.v2 .tabset.split .tabtext{display:block;grid-template-columns:none}
body.v2 .tabset.split .tabtext h3{margin:0 0 12px;font-size:clamp(22px,2.2vw,30px);font-weight:600;letter-spacing:-.01em;line-height:1.15}
body.v2 .tabset.split .tabtext p{margin:0 0 16px;font-size:15.5px}
body.v2 .tabset.split .tabideas{margin-top:8px}
body.v2 .boards{display:grid;gap:10px}
body.v2 .boardmain{display:grid;place-items:center;aspect-ratio:5/3;max-height:58vh}
body.v2 .boardmain img{grid-area:1/1;max-width:100%;max-height:58vh;width:auto;height:auto;object-fit:contain;box-shadow:0 1px 2px rgba(0,0,0,.08),0 8px 22px rgba(0,0,0,.1)}
body.v2 .boardmain img[hidden]{display:none}
body.v2 .boardthumbs{display:flex;gap:8px;flex-wrap:wrap}
body.v2 .boardthumbs button{padding:0;border:2px solid transparent;background:none;cursor:pointer;width:76px;aspect-ratio:5/3;overflow:hidden;opacity:.6}
body.v2 .boardthumbs button[aria-pressed="true"]{border-color:var(--ink);opacity:1}
body.v2 .boardthumbs img{width:100%;height:100%;object-fit:cover;display:block}
@media (max-width:800px){body.v2 .tabset.split .tabpane{grid-template-columns:1fr}}
body.v2 .phones .dev.tab.land{width:clamp(260px,47%,640px);border-radius:3.6% / 5% !important}
body.v2 .phones .dev.tab.land > img{margin:4.2cqw 5.4cqw;width:calc(100% - 10.8cqw) !important}
body.v2 .mat.clear > img{background:transparent !important;filter:none !important;box-shadow:none !important}
body.v2 .phones.bleed .dev.tab.land{width:calc((100vw - 2 * clamp(16px,3vw,48px) - 2 * clamp(18px,3vw,48px)) / 3);max-width:none}
body.v2 .band-label{text-align:center;margin:12px 0 0}
@media (max-width:760px){body.v2 .phones.bleed{flex-wrap:nowrap;overflow-x:auto;justify-content:flex-start;scroll-snap-type:x mandatory}body.v2 .phones.bleed .dev.tab.land{width:78vw;scroll-snap-align:center}}
body.v2 p.band-label{font:600 11px/1.4 system-ui,-apple-system,sans-serif;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin:0 0 -8px;text-align:left}
body.v2 .phones .dev-wrap{display:grid;gap:14px;justify-items:center}
body.v2 .phones .dev-wrap .dev.tab.land{width:100% !important}
body.v2 .phones.bleed .dev-wrap.tab.land{width:calc((100vw - 2 * clamp(16px,3vw,48px) - 2 * clamp(18px,3vw,48px)) / 3)}
body.v2 .dev-cap{font:600 11px/1.4 system-ui,-apple-system,sans-serif;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);text-align:center}
@media (max-width:760px){body.v2 .phones.bleed .dev-wrap.tab.land{width:78vw;flex:none;scroll-snap-align:center}}
body.v2 .phones.bleed.compact{padding-block:clamp(22px,3vw,40px)}
body.v2 .phones.bleed.compact .dev.tab.land{width:calc((100vw - 2 * clamp(16px,3vw,48px) - 2 * clamp(18px,3vw,48px)) / 3 * .82)}
body.v2 .phones.compact + p.band-label, body.v2 p.band-label + .phones.compact{margin-top:0}
body.v2 .mat.together.bleed.flatrow{padding:clamp(22px,3vw,40px) clamp(16px,3vw,48px);gap:0 clamp(14px,2vw,32px);align-items:center}
body.v2 .mat.together.flatrow img{border-radius:0 !important}
body.v2 .mat.together.bleed.flatrow{padding:clamp(22px,3vw,40px) clamp(16px,9vw,170px)}
body.v2 .tabset.side .boardmain{aspect-ratio:auto;max-height:none}
body.v2 .tabset.side .boardmain img{max-height:66vh;box-shadow:none}
body.v2 .tabset.side.clear .boardmain img{background:transparent !important;filter:none !important}
body.v2 .tabset.side .tabpane{align-items:center}
body.v2 .mat.together.flatrow{padding:clamp(20px,3vw,40px);gap:0 clamp(12px,1.8vw,28px);align-items:center}

/* feature band: composed UI cluster + story, on a themed colour */
body.v2 figure.feature{margin:0;background:var(--fbg);color:var(--fink);display:grid;grid-template-columns:minmax(0,2.1fr) minmax(0,1fr);align-items:center;gap:clamp(16px,2.4vw,40px);padding:clamp(16px,2.6vw,40px)}
body.v2 figure.feature.flip{grid-template-columns:minmax(0,1fr) minmax(0,2.1fr)}
body.v2 figure.feature.flip .feat-art{order:2}
body.v2 .feat-art img{display:block;width:100%;height:auto;background:transparent !important;filter:none !important;box-shadow:none !important}
body.v2 .feat-kicker{display:block;font:600 11px/1 system-ui,-apple-system,sans-serif;letter-spacing:.14em;text-transform:uppercase;color:var(--facc);margin-bottom:14px}
body.v2 .feat-text h3{margin:0 0 16px;font-size:clamp(26px,3vw,42px);line-height:1.08;font-weight:600;letter-spacing:-.02em;color:var(--fink)}
body.v2 .feat-text p{margin:0 0 14px;font-size:16px;line-height:1.6;color:color-mix(in srgb,var(--fink) 78%,transparent)}
@media (max-width:820px){body.v2 figure.feature,body.v2 figure.feature.flip{grid-template-columns:1fr}body.v2 figure.feature.flip .feat-art{order:0}}
.v2-section.bare{padding-top:0}
.v2-section.bare+.v2-section.bare{margin-top:-32px}
body.v2 .mat.groups img{background:none;filter:none}
body.v2 .mat.meter-still{display:grid;justify-items:center;gap:16px;padding:clamp(24px,4vw,48px) 4%;margin:0}body.v2 .mat.meter-still img{width:min(468px,100%);height:auto;box-shadow:0 8px 22px rgba(0,0,0,.18)}
body.v2 .mat.meter-still img{width:min(540px,100%)}
/* logo concepts: a grid of tiles, each with the logo, its name and the idea */
body.v2 .concept-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;padding:clamp(16px,3vw,40px)}
body.v2 .concept-grid figure{margin:0;background:#fff;display:grid;grid-template-rows:auto 1fr}
body.v2 .concept-grid img{display:block;width:100%;aspect-ratio:16/10;object-fit:cover;box-shadow:none}
body.v2 .concept-grid figcaption{padding:14px 18px 18px;font-size:14px;line-height:1.5;color:#55565c}
body.v2 .concept-grid figcaption b{display:block;color:#1a1a1a;font-size:15px;margin-bottom:4px}
body.v2 .concept-grid figure:last-child{grid-column:span 3;grid-template-columns:2fr 1fr;grid-template-rows:auto;align-items:center}
body.v2 .concept-grid figure:last-child img{aspect-ratio:16/7}
@media (max-width:760px){body.v2 .concept-grid{grid-template-columns:1fr}body.v2 .concept-grid figure:last-child{grid-column:auto;grid-template-columns:1fr}}
/* illustrations: a simple wall of art, no project story */
body.v2 .art-wall{columns:3 280px;column-gap:16px}
body.v2 .art-wall figure{margin:0 0 16px;break-inside:avoid}
body.v2 .art-wall img{display:block;width:100%;height:auto}
body.v2 .art-wall.and1 figure{background:#fff}
/* homepage bento: mixed tile widths, coloured grounds, live clips on the Destiny tiles */
.home .project-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:32px 20px;grid-auto-flow:dense}
.home .project-card.tile{grid-column:span 1;display:flex;flex-direction:column;gap:0}
.home .project-card.tile.s2{grid-column:span 2}
.home .tile-media{position:relative;height:clamp(180px,19vw,280px);overflow:hidden;margin-bottom:14px;transition:transform .35s ease}
.home .tile-media>img,.home .tile-media>video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;margin:0;border:0;aspect-ratio:auto}
.home .tile.fit .tile-media>img{object-fit:contain;padding:6%}
.home .tile-media .collage{position:absolute;inset:0;display:grid;grid-template-columns:repeat(4,1fr);gap:6px;padding:6px}
.home .tile-media .collage img{width:100%;height:100%;object-fit:cover;display:block}
@media (hover:hover){.home .project-card.tile:hover .tile-media{transform:scale(.975)}}
@media (max-width:900px){.home .project-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.home .project-grid{grid-template-columns:1fr}.home .project-card.tile.s2{grid-column:span 1}.home .tile-media{height:220px}}
/* homepage showcases: big coloured bands, media on one side, a large title on the other */
.home .showcases{display:grid;gap:24px;margin-top:8px}
.home .showcase{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);background:var(--sbg);color:#f3f3f5;text-decoration:none;min-height:clamp(320px,36vw,520px);overflow:hidden}
.home .showcase.flip{grid-template-columns:minmax(0,1fr) minmax(0,1.6fr)}
.home .showcase.flip .sc-media{order:2}
.home .sc-media{position:relative;overflow:hidden}
.home .sc-media>img,.home .sc-media>video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;transition:transform .6s ease}
.home .showcase.fit .sc-media>img{object-fit:contain;padding:5%}
.home .sc-text{display:flex;flex-direction:column;justify-content:center;gap:14px;padding:clamp(24px,4vw,56px)}
.home .sc-kicker{font-size:12px;letter-spacing:.14em;text-transform:uppercase;opacity:.7}
.home .sc-text h2{font-size:clamp(30px,3.6vw,52px);line-height:1.02;font-weight:500;letter-spacing:-.02em;margin:0;color:#fff}
.home .sc-text p{font-size:17px;line-height:1.5;margin:0;opacity:.85;max-width:34ch}
.home .sc-go{font-size:15px;margin-top:6px;border-bottom:1px solid currentColor;align-self:flex-start;padding-bottom:2px}
@media (hover:hover){.home .showcase:hover .sc-media>img,.home .showcase:hover .sc-media>video{transform:scale(1.03)}}
.home .more-work{margin-top:72px}
.home .more-work h2{font-size:28px;font-weight:500;margin:0 0 20px}
.home .more-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:20px}
.home .more-card{text-decoration:none;color:inherit;display:grid;gap:8px;align-content:start}
.home .mc-media{aspect-ratio:4/3;overflow:hidden;background:#f2f2f4}
.home .mc-media img{width:100%;height:100%;object-fit:cover;display:block;border-radius:0;aspect-ratio:auto}
.home .more-card h3{font-size:15px;margin:4px 0 0;font-weight:600}
.home .more-card span{font-size:13px;color:#6f6f6f}
@media (max-width:900px){.home .showcase,.home .showcase.flip{grid-template-columns:1fr}.home .showcase.flip .sc-media{order:0}.home .sc-media{min-height:56vw}.home .more-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* homepage v3: about tile + a loose 3-column work grid (jkane-style gaps, marco-style about) */
.home .work-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-auto-rows:clamp(150px,24vw,330px);gap:12px;margin-top:24px}
.home .about-tile{background:#f4f4f6;padding:clamp(22px,2.6vw,36px);display:flex;flex-direction:column;gap:14px;overflow:hidden}
.home .about-tile h1{font-size:clamp(20px,1.7vw,24px);font-weight:400;line-height:1.3;margin:0 0 6px;padding-bottom:16px;border-bottom:1px solid #e3e3e8;color:#6f6f6f;letter-spacing:0}
.home .about-tile h1 b{color:#1a1a1a;font-weight:500}
.home .about-tile p{margin:0;font-size:15px;line-height:1.5;color:#3a3a3f}
.home .about-links{margin-top:auto;display:flex;flex-wrap:wrap;gap:8px 16px;font-size:14px}
.home .about-links a{color:#1a1a1a;text-decoration:none;border-bottom:1px solid #c9c9cf;padding-bottom:1px}
.home .wt{position:relative;overflow:hidden;display:block;text-decoration:none}
.home .wt>img,.home .wt>video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;border-radius:0;aspect-ratio:auto;transition:transform .6s ease}
.home .wt.fit>img{object-fit:contain;padding:6%}
.home .wt .collage{position:absolute;inset:0;display:grid;grid-template-columns:repeat(2,1fr);gap:6px;padding:6px}
.home .wt .collage img{width:100%;height:100%;object-fit:cover;display:block;border-radius:0;aspect-ratio:auto}
.home .wt-label{position:absolute;left:12px;bottom:12px;background:rgba(255,255,255,.94);color:#1a1a1a;font-size:13px;padding:6px 10px;line-height:1}
@media (hover:hover){.home .wt:hover>img,.home .wt:hover>video{transform:scale(1.03)}}
@media (max-width:760px){.home .work-grid{grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:44vw}
  .home .work-grid>*{grid-column:auto / span 1 !important;grid-row:auto / span 1 !important}
  .home .work-grid>.about-tile{grid-column:1 / -1 !important;grid-row:auto / span 2 !important}
  .home .work-grid>.big{grid-column:1 / -1 !important}}
/* homepage v4: wider, 4 columns, smaller rows; the intro sits in the about-tile spot */
.home .wrap{max-width:1360px}
.home .work-grid{grid-template-columns:repeat(4,minmax(0,1fr));grid-auto-rows:clamp(120px,13vw,200px);gap:12px}
.home .about-tile{justify-content:center;gap:20px}
.home .about-tile h1{font-size:clamp(30px,3.4vw,52px);line-height:1.05;font-weight:400;letter-spacing:-.02em;color:#1a1a1a;border:0;padding:0;margin:0}
.home .about-tile .lede{font-size:clamp(15px,1.25vw,18px);line-height:1.55;color:#55565c;margin:0;max-width:46ch}
@media (max-width:760px){.home .work-grid{grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:40vw}}
.home .wt .collage{grid-template-columns:repeat(4,1fr)}
/* intro in the top-left grid spot: plain white, big type (as the original hero) */
.home .about-tile{background:transparent;padding:0 clamp(8px,2vw,32px) 0 0;justify-content:center}
.home .about-tile h1{font-size:clamp(36px,4.6vw,72px);line-height:1.02;letter-spacing:-.03em}
.home .about-tile .lede{font-size:clamp(16px,1.5vw,21px);color:#6f6f76}
@media (max-width:760px){.home .about-tile{padding:24px 0}}
/* homepage v5: big tiles two across, each with a clear clickable caption bar */
.home .work-grid{grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:auto;gap:16px}
.home .about-tile{grid-column:auto !important;grid-row:auto !important;aspect-ratio:16/11}
.home .wt{grid-column:auto !important;grid-row:auto !important;aspect-ratio:16/11;cursor:pointer}
.home .wt-label{display:none}
.home .wt-info{position:absolute;left:0;right:0;bottom:0;display:flex;align-items:flex-end;justify-content:space-between;gap:16px;padding:56px 20px 18px;background:linear-gradient(to top,rgba(10,10,14,.82),rgba(10,10,14,.55) 55%,rgba(10,10,14,0));color:#fff}
.home .wt-text{display:grid;gap:4px}
.home .wt-text b{font-size:clamp(18px,1.6vw,24px);font-weight:500;letter-spacing:-.01em}
.home .wt-text span{font-size:14px;opacity:.85;line-height:1.4}
.home .wt-go{flex:none;width:40px;height:40px;border-radius:50%;background:#fff;color:#111;display:grid;place-items:center;font-size:18px;transition:transform .3s ease}
@media (hover:hover){.home .wt:hover .wt-go{transform:translateX(4px)}}
.home .wt:focus-visible{outline:3px solid #fb1f7b;outline-offset:3px}
@media (max-width:760px){.home .work-grid{grid-template-columns:1fr}.home .about-tile{aspect-ratio:auto}.home .wt{aspect-ratio:4/3}}
/* homepage v6: original header on top, then "Selected work" as tall portrait tiles three across (nataliatimea-style) */
.home .selected{width:min(100vw - 24px,1680px);margin-left:50%;transform:translateX(-50%)}
.home .selected>h2{font-size:clamp(26px,2.4vw,36px);font-weight:600;letter-spacing:-.02em;margin:0 0 16px}
.home .selected .work-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin:0;grid-auto-rows:auto}
.home .selected .wt{aspect-ratio:3/4}
.home .selected .wt.fit>img{padding:10%}
.home .wt-info{padding:80px 18px 16px;background:linear-gradient(to top,rgba(0,0,0,.55),rgba(0,0,0,0));align-items:flex-end}
.home .wt-text b{font-size:15px;font-weight:500}
.home .wt-text span{font-size:13px;opacity:.8}
@media (max-width:900px){.home .selected .work-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.home .selected .work-grid{grid-template-columns:1fr}.home .selected .wt{aspect-ratio:4/5}}
.home .selected .wt{aspect-ratio:4/3}
.home .selected .wt{aspect-ratio:3/4}
.home .selected .wt.fit>img{padding:0}

/* ---------- Brand layer (Nov 2026): colours from her logo — navy ink, hot pink accent, soft pink tints instead of grey ---------- */
:root{--ink:#16163d;--muted:#5d5d7a;--tile:#fdf0f5;--line:#eedde6;--pink:#fb1f7b;--pink-tint:#fdf0f5;--pink-soft:#ffe3ee;--navy:#000031}
::selection{background:var(--pink);color:#fff}
nav.top .logo{display:block;height:44px;width:auto;border-radius:0;aspect-ratio:auto}
nav.top .links a{color:var(--ink);font-weight:500}
nav.top .links a:hover,a:hover{color:var(--pink)}
h1,h2,h3{color:var(--ink)}
/* soft pink grounds where grey used to be */
body.v2 .mat{background:var(--pink-tint)}
.home .mc-media{background:var(--pink-tint)}
.talk{background:var(--pink-soft);padding:clamp(32px,5vw,64px)}
.talk-mail{background:#fff}
.talk-mail .copy{background:var(--pink);color:#fff;border:0;padding:6px 14px;font-weight:600;cursor:pointer}
/* pink accents */
.home .selected>h2::after{content:"";display:inline-block;width:10px;height:10px;background:var(--pink);margin-left:10px;vertical-align:4px}
body.v2 .beats dt{color:var(--pink);font-weight:700}
body.v2 .v2-facts dt{color:var(--pink)}
body.v2 .pills span{border-color:var(--pink);color:var(--ink)}
body.v2 .label-cap{color:var(--pink)}
body.v2 .v2-row h2::after{content:"";display:block;width:28px;height:3px;background:var(--pink);margin-top:12px}
body.v2 .v2-row h2:empty::after{display:none}
.home .wt-go,.home .wt:focus-visible{outline-color:var(--pink)}
body.v2 .next a{color:var(--ink);text-decoration:none;border-bottom:2px solid var(--pink);padding-bottom:2px}
.talk{width:100%;max-width:100%;min-width:0;box-sizing:border-box;margin-inline:0}
.home .wrap{grid-template-columns:minmax(0,1fr)}
/* nav mark: the three faces; homepage: the full logo fills the space beside the headline */
nav.top .logo{height:36px}
.home-hero.with-logo{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);align-items:center;gap:clamp(24px,5vw,80px)}
.home-hero.with-logo .hh-logo{width:100%;max-width:520px;height:auto;justify-self:end;border-radius:0;aspect-ratio:auto}
@media (max-width:760px){.home-hero.with-logo{grid-template-columns:1fr}.home-hero.with-logo .hh-logo{order:-1;max-width:260px;justify-self:start}}
.home-hero.with-logo .hh-text{display:grid;gap:22px}
body.home:has(.hh-logo) nav.top .name{visibility:hidden}
.home-hero.with-logo .hh-logo{max-width:380px}
.home-hero.with-logo .hh-logo{justify-self:center}
/* logo centred on the headline (not on headline + lede), and centred across the space to the right */
.home-hero.with-logo{grid-template-areas:"h logo" "p ."}
.home-hero.with-logo .hh-text{display:contents}
.home-hero.with-logo h1{grid-area:h}
.home-hero.with-logo .lede{grid-area:p;margin-top:-8px}
.home-hero.with-logo .hh-logo{grid-area:logo;align-self:center;justify-self:center}
@media (max-width:760px){.home-hero.with-logo{grid-template-areas:"logo" "h" "p"}}
.home-hero.with-logo .hh-logo{transform:translateX(calc(clamp(24px,5vw,80px) / -2))}@media (max-width:760px){.home-hero.with-logo .hh-logo{transform:none}}
.home-hero.with-logo{row-gap:22px}.home-hero.with-logo .lede{margin-top:0}
/* homepage tiles closer to nataliatimea.com: rounded corners, tight gaps, quiet caption */
.home .selected .work-grid{gap:8px}
.home .selected .wt{border-radius:14px !important;overflow:hidden;isolation:isolate}
.home .selected .wt>img,.home .selected .wt .collage img{border-radius:0}
.home .selected .wt-info{padding:72px 18px 16px;background:linear-gradient(to top,rgba(0,0,0,.5),rgba(0,0,0,0))}
.home .selected .wt-text{gap:2px}
.home .selected .wt-text b{font-size:15px;font-weight:500;letter-spacing:0}
.home .selected .wt-text span{font-size:13px;opacity:.78}
.home .selected>h2{font-weight:600;letter-spacing:-.02em}
/* homepage header v2: logo left, headline right, the pair centred; one italic serif word with a navy-to-pink gradient */
.home-hero.with-logo{grid-template-columns:auto minmax(0,780px);justify-content:center;column-gap:clamp(32px,5vw,80px);grid-template-areas:"logo h" ". p"}
.home-hero.with-logo .hh-logo{transform:none;justify-self:start;max-width:none;width:clamp(200px,22vw,320px)}
.home-hero.with-logo h1{letter-spacing:-.035em}
.home-hero.with-logo h1 em{font-family:"Playfair Display",Georgia,serif;font-style:italic;font-weight:700;letter-spacing:-.01em;padding-right:.06em;
  background:linear-gradient(100deg,#16163d 0%,#5d4a8a 45%,#fb1f7b 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
@media (max-width:760px){.home-hero.with-logo{grid-template-columns:1fr;grid-template-areas:"logo" "h" "p"}.home-hero.with-logo .hh-logo{width:220px}}
.home-hero.with-logo{grid-template-areas:"logo h";align-items:center}.home-hero.with-logo h1{max-width:13ch}
/* tile captions like the Twinsi card: big title, short tagline */
.home .selected .wt-info{padding:110px 22px 22px;background:linear-gradient(to top,rgba(0,0,0,.6),rgba(0,0,0,.25) 55%,rgba(0,0,0,0))}
.home .selected .wt-text{gap:6px}
.home .selected .wt-text b{font-size:clamp(24px,2.3vw,34px);font-weight:400;letter-spacing:-.02em;line-height:1.08}
.home .selected .wt-text span{font-size:clamp(15px,1.15vw,17px);opacity:.9;line-height:1.35}
.home .selected .wt-info{background:linear-gradient(to top,rgba(10,10,30,.72),rgba(10,10,30,.35) 55%,rgba(10,10,30,0))}
.home .selected .wt-info{padding-top:140px;background:linear-gradient(to top,rgba(10,10,30,.85),rgba(10,10,30,.5) 50%,rgba(10,10,30,0))}
/* About: a small illustration strip (personal work, off the homepage) */
.about-art{display:grid;gap:16px}
.about-art .aa-head{display:flex;justify-content:space-between;align-items:baseline;gap:16px;flex-wrap:wrap}
.about-art h2{font-size:clamp(22px,2vw,28px);font-weight:500;letter-spacing:-.02em}
.about-art .aa-head a{color:var(--ink);text-decoration:none;border-bottom:2px solid var(--pink);font-size:15px}
.about-art .aa-strip{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.about-art .aa-strip img{display:block;width:100%;aspect-ratio:3/4;object-fit:cover;border-radius:10px}
@media (max-width:640px){.about-art .aa-strip{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* floating menu button once the top nav scrolls away (touch-friendly, no hover needed) */
.navfab{position:fixed;top:18px;right:18px;z-index:100;width:44px;height:44px;border-radius:50% !important;border:0;background:var(--navy,#000031);
  display:grid;place-content:center;gap:5px;cursor:pointer;box-shadow:0 6px 18px rgba(0,0,49,.25);opacity:0;transform:scale(.8);pointer-events:none;transition:opacity .2s ease,transform .2s ease}
.navfab span{display:block;width:18px;height:2px;background:#fff;transition:transform .2s ease}
.navfab span:last-child{width:12px;justify-self:end}
body.nav-gone .navfab{opacity:1;transform:none;pointer-events:auto}
.navfab.open span:first-child{transform:translateY(3.5px) rotate(45deg)}
.navfab.open span:last-child{width:18px;transform:translateY(-3.5px) rotate(-45deg)}
.navpanel{position:fixed;top:72px;right:18px;z-index:100;background:#fff;box-shadow:0 18px 40px rgba(0,0,49,.18);border:1px solid var(--line);padding:14px 10px;display:grid;min-width:190px}
.navpanel[hidden]{display:none}
.navpanel a{padding:10px 14px;text-decoration:none;color:var(--ink);font-size:17px}
.navpanel a:active,.navpanel a:focus-visible{background:var(--pink-tint);color:var(--pink)}
.navpanel .np-home{padding:6px 14px 12px;border-bottom:1px solid var(--line);margin-bottom:6px}
.navpanel .np-home img{height:30px;width:auto;display:block}
body .navfab{border-radius:50% !important}
/* footer: copyright, bottom left */
.site-foot{max-width:1120px;margin:40px auto 0;padding:24px 0 8px;border-top:1px solid var(--line);font-size:13px;color:var(--muted);text-align:left}
body.v2 .site-foot{max-width:1180px}
body.home .site-foot{max-width:1360px}
/* Rounded corners (Nov 2026), matching the homepage tiles */
:root{--r:14px;--r-sm:10px}
body.v2 .mat,body.v2 .v2-hero,body.v2 figure.feature,.talk,.navpanel,.talk-mail{border-radius:var(--r);overflow:hidden}
body.v2 .v2-hero video,body.v2 .v2-hero img{border-radius:var(--r)}
body.v2 .mat:not(.cut) img,body.v2 .mat video,body.v2 .grid .mat video,body.v2 .flow .mat img{border-radius:var(--r-sm)}
body.v2 .tabset .boardmain img,body.v2 .tabset .boardmain video{border-radius:var(--r-sm)}
body.v2 .pills span{border-radius:999px}
.talk-mail .copy{border-radius:999px}
.about-art .aa-strip img{border-radius:var(--r-sm)}
/* About: Playground (side projects), a simple list like gabrielvaldivia.com/about */
.playground{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr);gap:24px;align-items:start}
.playground h2{font-size:clamp(26px,2.6vw,36px);font-weight:400;letter-spacing:-.02em}
.pg-list{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.pg-list li,.pg-list li>a{display:flex;align-items:baseline;flex-wrap:wrap;gap:6px 12px;padding:10px 0;text-decoration:none;color:var(--ink)}
.pg-list li{border-bottom:1px solid var(--line)}
.pg-list li>a{padding:0;width:100%}
.pg-name{font-size:19px;font-weight:500}
.pg-line{color:var(--muted);font-size:16px}
.pg-tag{font-size:12px;font-weight:600;letter-spacing:.04em;color:var(--pink);background:var(--pink-tint);padding:3px 10px;border-radius:999px}
.pg-arrow{color:var(--pink);margin-left:auto}
@media (max-width:700px){.playground{grid-template-columns:1fr}}
/* Playground v2: closer to gabrielvaldivia.com/about */
.playground{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:32px}
.playground h2{font-size:clamp(36px,4vw,60px);font-weight:400;letter-spacing:-.03em;line-height:1}
.pg-list{gap:clamp(18px,2.2vw,30px);padding-top:clamp(6px,1vw,16px)}
.pg-list li{border:0;padding:0}
.pg-list li,.pg-list li>a{gap:6px 18px}
.pg-name{font-size:clamp(20px,1.9vw,27px);font-weight:400;letter-spacing:-.01em;color:var(--ink)}
.pg-line{font-size:clamp(17px,1.6vw,23px);color:var(--muted)}
.pg-arrow{margin-left:0;font-size:1.4em;line-height:1;color:var(--pink)}
.pg-list li>a{width:auto}
@media (max-width:700px){.playground{grid-template-columns:1fr}}
.playground{grid-template-columns:minmax(0,1fr) minmax(0,2fr);column-gap:64px}@media (max-width:760px){.playground{grid-template-columns:1fr}}
/* playground: dog daycare blurb */
.pg-list li.pg-dog{display:block}
.pg-dog .pg-name{margin-right:18px}
.pg-blurb{margin-top:14px;max-width:640px}
.pg-blurb p{font-size:17px;line-height:1.6;color:var(--ink);margin:0 0 14px}
.pg-beats{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.pg-beats li{position:relative;padding-left:20px;font-size:16px;line-height:1.55;color:var(--muted)}
.pg-beats li::before{content:"";position:absolute;left:0;top:.62em;width:8px;height:8px;border-radius:50%;background:var(--pink)}
.pg-beats b{color:var(--ink);font-weight:600}
.pg-list .pg-beats li{display:block;padding:0 0 0 20px;font-size:16px;line-height:1.55;color:var(--muted)}
.pg-shot{margin:22px 0 0}
.pg-shot img{display:block;width:100%;border-radius:var(--r,14px)}
.pg-shot figcaption{margin-top:8px;font-size:13px;color:var(--muted)}
.pg-shots{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:22px}
.pg-shots .pg-shot{margin:0}
.pg-shots .pg-shot img{aspect-ratio:16/10;object-fit:cover}
@media (max-width:560px){.pg-shots{grid-template-columns:1fr}}
.pg-beats.big li{font-size:18px}
/* playground pages (simple, Gabriel-style) */
.pgp-top{padding:clamp(40px,6vw,80px) 0 clamp(36px,5vw,64px)}
.pgp-top h1{font-size:clamp(56px,9vw,140px);font-weight:400;letter-spacing:-.04em;line-height:.95;margin:0 0 clamp(36px,5vw,64px);color:var(--ink)}
.pgp-text{max-width:560px}
.pgp-text p{font-size:17px;line-height:1.6;color:var(--ink);margin:0 0 16px}
.pgp-text .pgp-meta{color:var(--muted);margin-top:22px}
.pgp-shots{display:grid;gap:clamp(40px,5vw,64px);padding-bottom:40px}
.pgp-shots figure{margin:0}
.pgp-shots img{display:block;width:100%;border-radius:var(--r,14px)}
.pgp-shots figcaption{margin-top:12px;font-size:15px;color:var(--muted)}
.pgp-shots{grid-template-columns:1fr 1fr;gap:clamp(20px,3vw,40px)}
.pgp-shots img{aspect-ratio:7/4;object-fit:cover}
@media (max-width:700px){.pgp-shots{grid-template-columns:1fr}}
.pgp-top{padding-bottom:clamp(24px,3vw,40px)}
.pgp-text .pgp-lead{font-size:clamp(22px,2.2vw,28px);line-height:1.3;letter-spacing:-.01em;margin-bottom:22px}
.pgp-top h1{margin-bottom:clamp(10px,1.2vw,18px)}
.pgp-sub{font-size:clamp(22px,2.4vw,34px);line-height:1.2;letter-spacing:-.015em;color:var(--muted);margin:0 0 clamp(32px,4.5vw,56px)}
.site-foot{border-top:0;padding-top:8px}
.navfab{background:var(--pink,#fb1f7b);box-shadow:0 6px 18px rgba(251,31,123,.28)}
/* menu button = her face from the logo (white circle, pink ring); turns into a pink x when open */
.navfab{background:#fff;border:2.5px solid var(--pink,#fb1f7b);box-shadow:0 6px 18px rgba(251,31,123,.25);overflow:hidden;width:48px;height:48px}
.navfab .nf-face{position:absolute;inset:0;margin:auto;width:26px;height:33px;background:url("images/brand/faces.png") 0 0/auto 33px no-repeat;transition:opacity .15s ease,transform .2s ease}
.navfab span{position:absolute;left:50%;top:50%;width:18px;height:2.5px;margin:-1.25px 0 0 -9px;background:var(--pink,#fb1f7b);opacity:0;transition:opacity .15s ease,transform .2s ease}
.navfab.open .nf-face{opacity:0;transform:scale(.6)}
.navfab.open span{opacity:1}
.navfab.open span:first-child,.navfab.open span:nth-child(2){transform:rotate(45deg)}
.navfab.open span:last-child{width:18px;transform:rotate(-45deg)}
/* menu panel: light pink, fun pill hover (also on tap) */
.navpanel{background:#ffe9f2;border:1px solid #ffd3e5;box-shadow:0 18px 40px rgba(251,31,123,.18);border-radius:18px;padding:12px 10px}
.navpanel .np-home{border-bottom:1px solid #ffcfe2}
.navpanel a:not(.np-home){position:relative;display:flex;align-items:center;justify-content:space-between;gap:16px;border-radius:999px;
  transition:background .2s ease,color .2s ease,padding .2s ease,transform .2s cubic-bezier(.34,1.56,.64,1)}
.navpanel a:not(.np-home)::after{content:"\2192";font-size:16px;opacity:0;transform:translateX(-8px);transition:opacity .2s ease,transform .25s cubic-bezier(.34,1.56,.64,1)}
.navpanel a:not(.np-home):hover,.navpanel a:not(.np-home):active,.navpanel a:not(.np-home):focus-visible{background:var(--pink,#fb1f7b);color:#fff;padding-left:20px;transform:rotate(-1.5deg) scale(1.03)}
.navpanel a:not(.np-home):hover::after,.navpanel a:not(.np-home):active::after,.navpanel a:not(.np-home):focus-visible::after{opacity:1;transform:none}
.navpanel .np-home img{transition:transform .25s cubic-bezier(.34,1.56,.64,1)}
.navpanel .np-home:hover img{transform:rotate(-4deg) scale(1.06)}
.navpanel{padding:12px 16px}
/* menu panel: see-through frosted pink, and a dot for the section you're in */
.navpanel{background:rgba(255,226,238,.62);-webkit-backdrop-filter:blur(18px) saturate(1.4);backdrop-filter:blur(18px) saturate(1.4);border:1px solid rgba(255,255,255,.55)}
.navpanel a[data-k]{padding-left:30px}
.navpanel a[data-k]::before{content:"";position:absolute;left:13px;top:50%;width:8px;height:8px;margin-top:-4px;border-radius:50%;background:var(--pink,#fb1f7b);transform:scale(0);transition:transform .25s cubic-bezier(.34,1.56,.64,1),background .2s ease}
.navpanel a.cur::before{transform:scale(1)}
.navpanel a.cur{color:var(--pink,#fb1f7b);font-weight:500}
.navpanel a[data-k]:hover,.navpanel a[data-k]:active,.navpanel a[data-k]:focus-visible{padding-left:34px;color:#fff}
.navpanel a[data-k]:hover::before,.navpanel a[data-k]:active::before,.navpanel a[data-k]:focus-visible::before{background:#fff}
/* current-section marker: a pink plus (spins in) instead of a dot */
.navpanel a[data-k]::before{width:11px;height:11px;margin-top:-5.5px;border-radius:0;
  background:linear-gradient(currentColor,currentColor) center/100% 2.5px no-repeat,linear-gradient(currentColor,currentColor) center/2.5px 100% no-repeat;
  color:var(--pink,#fb1f7b);transform:scale(0) rotate(-90deg)}
.navpanel a.cur::before{transform:scale(1) rotate(0)}
.navpanel a[data-k]:hover::before,.navpanel a[data-k]:active::before,.navpanel a[data-k]:focus-visible::before{background:linear-gradient(#fff,#fff) center/100% 2.5px no-repeat,linear-gradient(#fff,#fff) center/2.5px 100% no-repeat}
.navpanel a[data-k]:hover:not(.cur)::before{transform:scale(1) rotate(0)}
/* nav links fold into the face button on scroll (Gabriel-style morph) */
nav.top .links.morph{position:fixed;z-index:101}
nav.top .links.morph a{display:inline-block;transform-origin:right center;transition:opacity .2s cubic-bezier(0,0,.2,1),transform .2s cubic-bezier(0,0,.2,1)}
body.nav-gone nav.top .links.morph{pointer-events:none}
body.nav-gone nav.top .links.morph a{opacity:0;transform:translateX(var(--dx,0)) scale(.82)}
.navfab{transform:scale(.82);transition:opacity .2s cubic-bezier(0,0,.2,1),transform .2s cubic-bezier(0,0,.2,1)}
body.nav-gone .navfab{transform:none}
/* nav lines up with each page's content edge */
body.v2 nav.top{max-width:1180px}
body.home nav.top{max-width:1360px}
.v2-title{min-width:0;max-width:100%}
.navfab{background:#ffe3ee;border-width:1.5px}
.navfab{background:rgba(255,226,238,.62);-webkit-backdrop-filter:blur(18px) saturate(1.4);backdrop-filter:blur(18px) saturate(1.4)}
.navfab{box-shadow:none}
.navpanel{box-shadow:none}
.navfab{border:0}
.navfab{background:rgba(255,192,220,.72)}
/* try: Wilson volleyball as a one-color (white) icon */
.navfab .nf-face{width:30px;height:38px;background:url("images/brand/wilson-mono.png") center/contain no-repeat}
.navfab{background:rgba(251,31,123,.55)}
.navfab span{background:#fff}
.navfab .nf-face{background-image:url("images/brand/wilson-inv.png")}
.navfab .nf-face{width:30px;height:30px;background-image:url("images/brand/wilson-inv2.png")}
/* Menu: white text, hover = pink text, no pill/tilt */
.navpanel a[data-k]{color:#fff;transition:color .2s ease}
.navpanel a[data-k]:hover,.navpanel a[data-k]:active,.navpanel a[data-k]:focus-visible{background:none;transform:none;padding-left:30px;color:var(--pink,#fb1f7b)}
.navpanel a[data-k]:hover::before,.navpanel a[data-k]:active::before,.navpanel a[data-k]:focus-visible::before{background:linear-gradient(var(--pink,#fb1f7b),var(--pink,#fb1f7b)) center/100% 2.5px no-repeat,linear-gradient(var(--pink,#fb1f7b),var(--pink,#fb1f7b)) center/2.5px 100% no-repeat}
.navpanel a.cur{color:var(--pink,#fb1f7b)}
/* Flyout eases in/out instead of popping: fade 0→100% with a small drop from the button */
.navpanel,.navpanel[hidden]{display:grid}
.navpanel{transform-origin:top right;transition:opacity .22s ease,transform .32s cubic-bezier(.2,.8,.2,1),visibility 0s linear 0s}
.navpanel[hidden]{opacity:0;visibility:hidden;pointer-events:none;transform:translateY(-10px) scale(.97);
  transition:opacity .18s ease,transform .22s ease-in,visibility 0s linear .22s}
@media (prefers-reduced-motion:reduce){.navpanel,.navpanel[hidden]{transform:none}}
/* Menu rules: pink = hover only. Current page = pink plus, normal text. No arrow, no plus on hover. */
.navpanel a[data-k]::after{display:none}
.navpanel a.cur{color:#fff;font-weight:inherit}
.navpanel a[data-k]:hover::before{transform:scale(1) rotate(0)}
.navpanel a[data-k]::before,.navpanel a[data-k]:hover::before,.navpanel a[data-k]:active::before,.navpanel a[data-k]:focus-visible::before{background:linear-gradient(var(--pink,#fb1f7b),var(--pink,#fb1f7b)) center/100% 2.5px no-repeat,linear-gradient(var(--pink,#fb1f7b),var(--pink,#fb1f7b)) center/2.5px 100% no-repeat}
.navpanel a[data-k]:hover,.navpanel a[data-k]:active,.navpanel a[data-k]:focus-visible{color:var(--pink,#fb1f7b)}
.home .selected .work-grid{gap:16px}