/* Michał Greń Portfolio — Josh Puckett dark tokens · editorial layout */
:root{
  --background:#0a0a0a; --foreground:#fafafa;
  --body:#a3a3a3; --muted:#737373;
  --border:#262626; --hairline:#404040;
  --surface:#141414; --tile:#161616;
  --accent:#818cf8;
  --serif:"Cormorant Garamond",Georgia,serif;
  --sans:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  --mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,monospace;
  --ease:cubic-bezier(0.23,1,0.32,1);
  --wipe-ease:cubic-bezier(0.65,0.05,0.36,1);
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
a:focus-visible,button:focus-visible{outline:1px solid var(--accent);outline-offset:2px;border-radius:6px}
body{background:var(--background) radial-gradient(140% 90% at 50% 0%,#0e0e12 0%,#0a0a0a 52%,#080808 100%) fixed;color:var(--body);font-family:var(--sans);font-size:16px;line-height:1.625;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
a{color:inherit;text-decoration:none}
img,video{max-width:100%;display:block}
b,strong{color:var(--foreground);font-weight:500}
::selection{background:var(--accent);color:#0a0a0a}
.wrap{max-width:1440px;margin:0 auto;padding:0 clamp(20px,3.5vw,48px)}
.label{font-size:12px;color:var(--muted)}
.reveal{opacity:0;transform:translateY(14px);transition:opacity .6s var(--ease),transform .6s var(--ease)}
.reveal.in{opacity:1;transform:none}
h1,h2,h3{text-wrap:balance}
p{text-wrap:pretty}
.quote p,.cs-quote p,.v-quote p{hanging-punctuation:first}

/* film grain — whole site */
.grain{position:fixed;inset:0;pointer-events:none;z-index:95;opacity:.78;mix-blend-mode:overlay}

/* Section heading — serif, quiet */
.sec-head{font-family:var(--serif);font-weight:500;font-size:clamp(1.7rem,2.8vw,2.4rem);line-height:1.1;color:var(--foreground);letter-spacing:.01em}

/* ---- Dynamic islands ---- */
.island{--i-border:rgba(255,255,255,.06);position:fixed;left:50%;transform:translateX(-50%);z-index:100;background:rgba(16,16,16,.66);backdrop-filter:blur(24px) saturate(2);-webkit-backdrop-filter:blur(24px) saturate(2);border-radius:27px;box-shadow:inset 0 0 0 1px rgba(255,255,255,.08),0 2px 6px rgba(0,0,0,.3),0 24px 48px rgba(0,0,0,.4);overflow:hidden}
.island-top{top:18px;max-width:calc(100vw - 32px)}
.island-bottom{bottom:18px;display:flex;align-items:center;gap:2px;padding:6px;opacity:0;pointer-events:none;transform:translateX(-50%) translateY(14px);transition:opacity .5s var(--ease),transform .5s var(--ease)}
.island-bottom.show{opacity:1;pointer-events:auto;transform:translateX(-50%)}
.island-bottom a,.island-bottom button{display:block;padding:8px 14px;border-radius:999px;font-size:13px;color:var(--body);background:none;border:0;font-family:inherit;cursor:pointer;white-space:nowrap;transition:color .15s ease,background .15s ease,transform .3s var(--ease)}
.island-bottom a:hover,.island-bottom button:hover{color:var(--foreground);background:rgba(38,38,38,.6);transform:translateY(-1px)}

/* compact bar — plus sits at the right edge in both states */
.i-bar{display:flex;align-items:center;justify-content:space-between;gap:6px;width:100%;padding:6px;background:none;border:0;cursor:pointer;font:inherit;color:inherit;text-align:left}
.i-bar:focus-visible{outline:1px solid var(--accent);outline-offset:-1px;border-radius:inherit}
.i-bar-left{display:flex;align-items:center;gap:6px;min-width:0}
.i-logo{font-family:var(--sans);font-weight:500;font-size:14px;letter-spacing:.01em;color:var(--foreground);padding:6px 12px 6px 14px;white-space:nowrap}
.i-logo sup{font-size:9px;font-style:normal;color:var(--muted)}
.i-flag{display:inline-block;width:15px;height:10px;border-radius:2px;vertical-align:-1px;margin:0 1px;box-shadow:inset 0 0 0 .5px rgba(255,255,255,.18);transform-origin:0 50%}
.i-row:hover .i-flag{animation:flagWave .7s ease-in-out infinite}
@keyframes flagWave{
  0%,100%{transform:rotate(0) skewY(0)}
  20%{transform:rotate(-9deg) skewY(6deg)}
  45%{transform:rotate(5deg) skewY(-5deg)}
  70%{transform:rotate(-6deg) skewY(4deg)}
}
.i-crumb{display:flex;align-items:center;gap:8px;padding:8px 12px 8px 14px;border-left:1px solid var(--i-border)}
.i-dot{width:6px;height:6px;border-radius:50%;background:#4ade80;box-shadow:0 0 8px rgba(74,222,128,.7);animation:pulse 2.4s ease-in-out infinite}
@keyframes pulse{50%{opacity:.4}}
.i-section{font-size:12px;color:var(--muted);min-width:58px;white-space:nowrap}
.i-plus{position:relative;width:28px;height:28px;flex:none;border-radius:50%;background:rgba(38,38,38,.6);margin-right:2px;transition:transform .45s var(--ease),background .15s ease}
.i-plus::before,.i-plus::after{content:"";position:absolute;left:50%;top:50%;background:var(--body);border-radius:1px}
.i-plus::before{width:10px;height:1.5px;transform:translate(-50%,-50%)}
.i-plus::after{width:1.5px;height:10px;transform:translate(-50%,-50%)}
.island.open .i-plus{transform:rotate(45deg);background:rgba(64,64,64,.7)}
.i-bar:hover .i-plus{background:rgba(64,64,64,.7)}

/* expanded card — one 14px inset for everything, hairline-soft rules */
.i-panel{display:none;width:min(340px,calc(100vw - 44px));padding:4px 14px 14px;flex-direction:column}
.island.open .i-panel{display:flex;animation:panelIn .5s var(--ease) both}
.island.closing .i-panel{opacity:0;transition:opacity .2s ease}
@keyframes panelIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.i-bio{font-size:13.5px;line-height:1.6;color:var(--body);padding:8px 0 16px}
.i-bio b{color:var(--foreground);font-weight:500}
.i-row{display:flex;justify-content:space-between;gap:16px;font-size:12.5px;padding:12px 0;border-top:1px solid var(--i-border)}
.i-row span{color:var(--muted)}
.i-row b{color:var(--foreground);font-weight:500;text-align:right}
.i-nav{display:flex;gap:2px;padding:10px 0;border-top:1px solid var(--i-border);margin:0 -8px}
.i-nav a{flex:1;text-align:center;padding:9px 12px;border-radius:999px;font-size:13px;color:var(--body);transition:color .15s ease,background .15s ease}
.i-nav a:hover{color:var(--foreground);background:rgba(38,38,38,.6)}
.i-actions{display:flex;gap:8px;padding-top:8px}
.i-btn{flex:1;text-align:center;padding:11px 8px;border-radius:15px;background:rgba(38,38,38,.7);color:var(--foreground);font-size:12.5px;border:0;font-family:inherit;cursor:pointer;white-space:nowrap;transition:background .15s ease}
.i-btn:hover{background:rgba(64,64,64,.7)}
.i-btn-primary{flex:1.7;background:var(--foreground);color:#0a0a0a}
.i-btn-primary:hover{background:#fff}

/* ---- Hero — ASCII smoke shader, one quiet corner ---- */
.hero{--pad:clamp(20px,3.2vw,48px);position:relative;height:100svh;min-height:640px;overflow:hidden}
.hero-field{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.hf{position:absolute;font-size:13px;line-height:1.6;color:var(--body)}
.hf-bl{left:var(--pad);bottom:var(--pad)}
.hero-id{font-size:16px;font-weight:500;color:var(--foreground);letter-spacing:0}
.hero-id .reg{font-size:9px;vertical-align:super;color:var(--muted)}
.hero-desc{font-size:15px;line-height:1.7;color:var(--body);max-width:50ch;margin-top:14px}
.hf-bl .copy-mail{margin-top:18px}
/* animated underline: a hairline base with a bright line growing over it */
.copy-mail{display:inline-block;background:linear-gradient(currentColor,currentColor) 0 100%/0% 1px no-repeat,linear-gradient(var(--border),var(--border)) 0 100%/100% 1px no-repeat;border:0;font:inherit;font-size:13px;color:var(--body);cursor:pointer;padding:0 0 3px;transition:background-size .45s var(--ease),color .15s ease}
.copy-mail:hover{color:var(--foreground);background-size:100% 1px,100% 1px}
.hf-br{right:var(--pad);bottom:var(--pad)}
.scroll-hint{display:flex;align-items:center;gap:9px;font-size:12px;color:var(--muted)}
.mouse{width:15px;height:22px;color:var(--muted)}
.mouse-dot{animation:mouseDot 1.9s ease-in-out infinite}
@keyframes mouseDot{
  0%{transform:translateY(0);opacity:1}
  55%{transform:translateY(8px);opacity:0}
  56%{transform:translateY(0);opacity:0}
  75%,100%{transform:translateY(0);opacity:1}
}

/* hero media — video reel in a rounded painted card, same width as sections
 * stage aspect 1.38 ≈ the clips themselves (1.33–1.42), so cover barely crops */
.hero-media{max-width:1440px;margin:0 auto;padding:clamp(48px,6vw,88px) clamp(20px,3.5vw,48px) 0}
.video-band{position:relative;border-radius:20px;overflow:hidden;padding:clamp(28px,4vw,64px) clamp(20px,3vw,48px);background:url("public/bg/bg-wide-blue-coral-b.webp") center 40%/cover;box-shadow:inset 0 0 0 1px rgba(255,255,255,.08)}
.video-band::before{content:"";position:absolute;inset:0;background:radial-gradient(120% 100% at 50% 50%,rgba(10,10,10,.22) 0%,rgba(10,10,10,.55) 100%)}
.video-stage{position:relative;z-index:2;aspect-ratio:1.38;max-width:min(880px,100%);margin:0 auto;box-shadow:0 6px 16px rgba(0,0,0,.35),0 40px 90px rgba(0,0,0,.55)}
.video-stage video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .8s ease}
.video-stage video.on{opacity:1}
.media-slot{background:var(--surface);border-radius:16px;box-shadow:inset 0 0 0 1px rgba(255,255,255,.06);display:flex;align-items:center;justify-content:center;overflow:hidden}
.media-slot .ph{font-family:var(--mono);font-size:11px;color:var(--muted);letter-spacing:.08em;text-align:center;padding:20px}
.media-slot img{width:100%;height:100%;object-fit:cover;flex:none}
img.img-top{object-position:top}
img.img-contain,.tile img.img-contain,.media-slot img.img-contain{object-fit:contain;padding:9% 16%;background:radial-gradient(120% 90% at 50% 0%,#1c1c22 0%,#121216 55%,#0e0e11 100%)}
.r-219{aspect-ratio:21/9}.r-1610{aspect-ratio:16/10}.r-43{aspect-ratio:4/3}.r-45{aspect-ratio:4/5}.r-11{aspect-ratio:1/1}.r-169{aspect-ratio:16/9}
/* selected work runs near-square (Michal: "bardziej kwadratowe") */
.masonry .tile.r-43{aspect-ratio:21/20}
.masonry .tile.r-45{aspect-ratio:20/21}

/* ---- Selected work — masonry, lots of air, staggered entrance ---- */
#work{padding-top:clamp(96px,12vw,180px)}
.work-head{margin-bottom:clamp(48px,6vw,88px)}
.masonry{display:grid;grid-template-columns:1fr 1fr;gap:0 clamp(48px,7vw,120px)}
.mas-col{display:flex;flex-direction:column;gap:clamp(72px,10vw,160px)}
.mas-col-offset{margin-top:clamp(96px,14vw,240px)}
.mas-card{display:block;opacity:0;transform:translateY(72px) scale(.94);transition:opacity 1.1s var(--ease),transform 1.1s var(--ease)}
.mas-col-offset .mas-card{transition-delay:.12s}
.mas-card.in{opacity:1;transform:none}
.tile{position:relative;overflow:hidden;border-radius:16px;background:var(--tile);box-shadow:inset 0 0 0 1px rgba(255,255,255,.06);display:flex;align-items:center;justify-content:center;will-change:transform}
.tile img{width:100%;height:100%;object-fit:cover}
.tile .ph{font-family:var(--mono);font-size:10.5px;color:var(--muted);text-align:center;padding:14px;letter-spacing:.08em}
.tile-fx{position:absolute;inset:0;pointer-events:none}
.mas-cap{display:block;padding:18px 2px 0}
.mas-cap b{display:block;font-size:16px;font-weight:500;color:var(--foreground);transition:color .15s ease,transform .45s var(--ease)}
.mas-card:hover .mas-cap b{transform:translateX(5px)}
.mas-cap span{display:block;font-size:13.5px;color:var(--muted);margin-top:4px}
/* work tiles: painted backdrop, the shot peeks from the bottom and rises on hover */
.bg-defined{background:#0b0d11 url("public/bg/bg-blue-red-streak.webp") 45% 50%/cover}
.bg-greyscout{background:#0b0e0c url("public/bg/bg-pine-green.webp") 50% 60%/cover}
.bg-pletly{background:#0b0d0d url("public/bg/bg-blue-green.webp") 50% 55%/cover}
.bg-ponad{background:#0e0b0b url("public/bg/bg-coral-red.webp") 30% 40%/cover}
.tile[class*="bg-"]::after{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(10,10,10,.06) 0%,rgba(10,10,10,.30) 100%)}
.tile img.tile-shot{position:absolute;z-index:2;left:50%;bottom:0;width:82%;height:auto;max-height:88%;object-fit:cover;object-position:top;border-radius:10px 10px 0 0;box-shadow:0 -2px 8px rgba(0,0,0,.3),0 -22px 56px rgba(0,0,0,.5);transform:translate(-50%,72%);transition:transform .6s var(--ease)}
.tile img.tile-shot.shot-phone{width:42%}
/* floating UI cutouts in the painted area above the shot; position/width inline per tile */
.tile img.tile-cut{position:absolute;z-index:2;height:auto;border-radius:10px;box-shadow:0 4px 14px rgba(0,0,0,.35),0 18px 48px rgba(0,0,0,.45);transition:transform .8s var(--ease)}
.tile img.cut-a{transform:rotate(-2.5deg)}
.tile img.cut-b{transform:rotate(3deg)}
@media(hover:hover) and (pointer:fine){
  /* at rest the shot peeks from the bottom; on hover it glides up */
  .mas-card:hover .tile img.tile-shot{transform:translate(-50%,0);transition:transform .8s var(--ease)}
  .mas-card:hover .tile{box-shadow:inset 0 0 0 1px rgba(255,255,255,.12)}
  .mas-card:hover .tile img.cut-a{transform:rotate(-1.2deg) translateY(-9px)}
  .mas-card:hover .tile img.cut-b{transform:rotate(1.7deg) translateY(-13px)}
}
@media(hover:none){
  .tile img.tile-shot{transform:translate(-50%,18%)}
}

/* archive — fan of three cards rising above the line (Interface Craft style) */
.archive-cta{position:relative;display:flex;flex-direction:column;align-items:center;margin-top:clamp(96px,14vw,220px);padding:clamp(24px,3vw,48px) 0 clamp(48px,6vw,88px)}
.ac-cards{position:relative;z-index:2;width:100%;display:flex;justify-content:center;height:clamp(120px,12vw,190px);margin-bottom:calc(clamp(120px,12vw,190px) * -0.10)}
.ac-card{position:absolute;bottom:0;width:clamp(120px,12vw,180px);aspect-ratio:3/4;border-radius:14px;overflow:hidden;background:var(--tile);box-shadow:inset 0 0 0 1px rgba(255,255,255,.08),0 4px 10px rgba(0,0,0,.3),0 24px 48px rgba(0,0,0,.45);display:flex;align-items:center;justify-content:center;transform-origin:50% 120%;transition:transform .65s var(--ease)}
.ac-card .ph{font-family:var(--mono);font-size:9px;color:var(--muted);text-align:center;padding:8px;letter-spacing:.06em}
.ac-card img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.ac-card.c1{transform:translateX(-72%) rotate(-9deg)}
.ac-card.c2{transform:translateY(-14px)}
.ac-card.c3{transform:translateX(72%) rotate(9deg)}
.archive-cta:hover .c1{transform:translateX(-92%) rotate(-13deg) translateY(-10px)}
.archive-cta:hover .c2{transform:translateY(-30px)}
.archive-cta:hover .c3{transform:translateX(92%) rotate(13deg) translateY(-10px)}
.ac-text{position:relative;z-index:1;text-align:center}
.ac-text em{font-family:var(--serif);font-style:italic;font-weight:400;font-size:clamp(3.4rem,9vw,8.5rem);line-height:1.05;color:var(--foreground);display:block}
.ac-text .sub{display:block;font-size:13.5px;color:var(--muted);margin-top:16px;transition:color .2s ease}
.archive-cta:hover .ac-text .sub{color:var(--body)}
.ac-btn{display:inline-block;margin-top:22px;padding:13px 26px;border-radius:999px;background:var(--foreground);color:#0a0a0a;font-size:13.5px;font-weight:500;transition:background .15s ease,transform .55s var(--ease),box-shadow .35s ease}
.ac-arr{display:inline-block;transition:transform .45s var(--ease)}
.archive-cta:hover .ac-btn{background:#fff;transform:translateY(-5px) scale(1.08);box-shadow:0 6px 16px rgba(255,255,255,.12),0 18px 44px rgba(255,255,255,.14)}
.archive-cta:hover .ac-arr{transform:translate(3px,-3px)}

/* ---- Statement — pinned briefly; huge monolog-scale type over the media ---- */
.statement{--st-w:clamp(210px,24vw,320px);height:150vh}
.statement-pin{position:sticky;top:0;min-height:100svh;display:flex;align-items:center;overflow:hidden}
.statement-pin .wrap{width:100%;max-width:none;padding:0 clamp(12px,1.6vw,32px)}
.statement-kicker{text-align:center;font-size:clamp(16px,1.4vw,19px);color:var(--body);max-width:44ch;margin:0 auto clamp(40px,5vw,72px)}
.statement-line{display:flex;align-items:center;justify-content:center;font-family:var(--serif);font-weight:400;font-size:clamp(3rem,8.4vw,8.8rem);line-height:1;color:var(--foreground);text-align:center;white-space:nowrap}
.statement-line em{font-style:italic}
.st-side{display:inline-block;position:relative;z-index:2;will-change:transform;text-shadow:0 2px 32px rgba(10,10,10,.65)}
.st-left{margin-right:calc(var(--st-w) * -0.34)}
.st-right{margin-left:calc(var(--st-w) * -0.34)}
.statement-media{position:relative;display:block;z-index:1;width:var(--st-w);flex:none;aspect-ratio:3/4;border-radius:16px;overflow:hidden;background:var(--tile);box-shadow:inset 0 0 0 1px rgba(255,255,255,.08);will-change:transform}
/* hard cuts — the flipbook swap reads faster than a crossfade */
.st-img{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;opacity:0}
.st-img.on{opacity:1}
.st-img .ph,.statement-media .ph{font-family:var(--mono);font-size:9.5px;color:var(--muted);text-align:center;padding:10px;letter-spacing:.06em}
.st-img img{width:100%;height:100%;object-fit:cover}

/* ---- Services — title left, list right (mirrors Experiences/Skills) ---- */
.svc-cols .svc-list{margin-top:0}
.svc-list{margin-top:clamp(32px,4vw,52px)}
.svc{list-style:none;display:flex;align-items:baseline;justify-content:space-between;gap:24px;padding:19px 4px;border-top:1px solid var(--border)}
.svc:last-child{border-bottom:1px solid var(--border)}
.svc b{font-size:16.5px;font-weight:500;color:var(--body);transition:color .2s ease,transform .35s var(--ease);display:inline-block}
.svc small{font-size:13px;color:var(--muted);text-align:right}
.svc:hover b{color:var(--foreground);transform:translateX(6px)}
.svc-preview{position:fixed;z-index:80;width:230px;aspect-ratio:4/3;border-radius:14px;overflow:hidden;background:var(--tile);box-shadow:inset 0 0 0 1px rgba(255,255,255,.08),0 24px 48px rgba(0,0,0,.5);pointer-events:none;opacity:0;transform:scale(.92);transition:opacity .25s ease,transform .35s var(--ease);display:flex;align-items:center;justify-content:center}
.svc-preview.on{opacity:1;transform:none}
.svc-preview .ph{font-family:var(--mono);font-size:9.5px;color:var(--muted);text-align:center;padding:10px;letter-spacing:.06em}
.svc-preview img{width:100%;height:100%;object-fit:cover}

/* ---- Behind ---- */
section.block{padding:clamp(88px,11vw,160px) 0}
.behind h2{font-family:var(--serif);font-weight:400;font-size:clamp(2.8rem,7vw,6.2rem);line-height:.98;color:var(--foreground)}
.behind-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:64px;align-items:start}
/* header + copy are shorter than the photo — the whole left column sticks
 * and rides the scroll until the photo ends */
.behind-left{position:sticky;top:clamp(72px,11vh,140px)}
.behind-left h2{margin-bottom:clamp(32px,4vw,56px)}
.behind-left p{font-size:clamp(1.02rem,1.4vw,1.15rem);line-height:1.7;color:var(--body)}
.behind-left p+p{margin-top:24px;color:var(--muted)}
.behind-left p.reveal{transition-duration:.9s}
.behind-left p.reveal+p.reveal{transition-delay:.15s}
.portrait{position:relative;border-radius:16px;overflow:hidden;background:var(--tile);box-shadow:inset 0 0 0 1px rgba(255,255,255,.06);aspect-ratio:3/4;display:flex;align-items:center;justify-content:center}
.portrait img{width:100%;height:100%;object-fit:cover;object-position:top}
.portrait canvas{position:absolute;inset:0;pointer-events:none}

/* wipe reveal — .wipe-in lands on a HOST (clipped elements have zero
 * visible geometry, IntersectionObserver can't watch them directly) */
.wipe{clip-path:inset(0 0 0 100% round 16px);transition:clip-path 1.2s var(--wipe-ease)}
.wipe-in .wipe{clip-path:inset(0 0 0 0 round 16px)}

/* ---- Selected Clients ---- */
.clients .sec-head{margin-bottom:56px}
.client-row{display:grid;grid-template-columns:minmax(220px,1fr) minmax(200px,320px) 2fr;gap:20px 48px;padding:44px 0;border-top:1px solid var(--border);align-items:baseline}
.client-row:last-child{border-bottom:1px solid var(--border)}
.client-name{font-family:var(--serif);font-size:1.55rem;font-weight:500;color:var(--foreground)}
.client-name span{display:block;font-family:var(--sans);font-size:12.5px;color:var(--muted);font-weight:400;margin-top:6px}
.client-num{font-family:var(--serif);font-size:clamp(2rem,3.4vw,3rem);font-weight:400;color:var(--foreground);line-height:1}
.client-num small{display:block;font-family:var(--sans);font-size:12.5px;font-weight:400;color:var(--muted);margin-top:8px}
.client-desc{color:var(--body);max-width:60ch;font-size:15px}
.client-desc a{font-size:13px;display:inline-block;margin-top:14px;border-bottom:1px solid var(--hairline);padding-bottom:2px;color:var(--foreground)}
.client-desc a:hover{color:var(--accent);border-color:var(--accent)}

/* ---- Experiences / Skills / Recognitions ---- */
.list-head{font-family:var(--serif);font-weight:500;font-size:clamp(1.5rem,2.4vw,2rem);color:var(--foreground);margin-bottom:36px}
.exp-row{display:grid;grid-template-columns:1fr auto;gap:16px;padding:24px 0;border-top:1px solid var(--border);align-items:baseline}
.exp-row:last-child{border-bottom:1px solid var(--border)}
.exp-role{font-size:15px;font-weight:500;color:var(--foreground)}
.exp-role span{display:block;font-weight:400;color:var(--muted);font-size:13.5px;margin-top:3px}
.exp-meta{font-size:13px;color:var(--muted);text-align:right}
.skills-flow{display:flex;flex-wrap:wrap;gap:10px}
.skills-flow li{list-style:none;font-size:13px;color:var(--body);border-radius:99px;padding:9px 18px;background:var(--surface);box-shadow:inset 0 0 0 1px rgba(255,255,255,.07);transition:color .15s ease,box-shadow .15s ease,transform .3s var(--ease)}
.skills-flow li:hover{color:var(--foreground);box-shadow:inset 0 0 0 1px rgba(255,255,255,.16);transform:translateY(-2px)}
.exp-role a{transition:color .15s ease}
.exp-role a:hover{color:var(--accent)}
.two-col{display:grid;grid-template-columns:1fr 1fr;gap:72px;align-items:start}

/* ---- Voices — progress line, arrows, auto-advance ---- */
.v-progress{position:relative;height:1px;background:var(--border)}
.v-progress span{position:absolute;left:0;top:0;height:1px;background:var(--foreground);width:0%}
.v-progress span.run{transition:width 6s linear}
.voices-head{display:flex;justify-content:space-between;align-items:center;gap:24px;padding:14px 0 0;margin-bottom:clamp(28px,3.5vw,48px)}
.v-nav{display:flex;align-items:center;gap:6px;margin-left:-12px}
.v-nav button{background:none;border:0;color:var(--body);font-size:19px;line-height:1;cursor:pointer;padding:8px 12px;border-radius:999px;transition:color .15s ease,background .15s ease,transform .3s var(--ease)}
.v-nav button:hover{color:var(--foreground);background:rgba(38,38,38,.6);transform:scale(1.1)}
.v-nav button:active{transform:scale(.94)}
.v-count{font-size:12.5px;color:var(--muted);min-width:46px;text-align:right;font-variant-numeric:tabular-nums}
.v-grid{display:grid;grid-template-columns:1fr 1.7fr;gap:48px clamp(48px,8vw,140px);align-items:start}
/* clean header — plain body type, the quote is the show */
.v-title{font-size:16px;font-weight:500;color:var(--foreground);line-height:1.5}
.v-left .v-nav{margin:22px 0 0 -12px}
.v-left .v-count{display:block;margin:0 0 12px 2px;text-align:left}
.v-quote{margin-top:18px;transition:opacity .3s ease,transform .3s ease;min-height:200px}
.v-quote.fade{opacity:0;transform:translateY(8px)}
.v-quote p{font-size:clamp(1.2rem,2vw,1.7rem);line-height:1.5;color:#e5e5e5;max-width:42ch;font-weight:400}
.v-quote footer{margin-top:32px;display:flex;align-items:center;gap:12px}
.v-ava{width:30px;height:30px;flex:none;border-radius:50%;background:var(--surface);box-shadow:inset 0 0 0 1px rgba(255,255,255,.09);display:flex;align-items:center;justify-content:center;font-size:10px;color:var(--body);overflow:hidden}
.v-ava img{width:100%;height:100%;object-fit:cover}
.v-who b{display:block;font-size:13.5px;font-weight:500;color:var(--foreground)}
.v-who span{font-size:12px;color:var(--muted)}

/* ---- Solo quote — one voice, centered, right under the work ---- */
.solo{padding-top:clamp(48px,6vw,88px)}
.solo-quote{max-width:820px;margin:0 auto;text-align:center}
.solo-quote p{font-size:clamp(1.25rem,2.1vw,1.7rem);line-height:1.55;color:#e5e5e5}
.solo-quote footer{margin-top:32px;display:flex;flex-direction:column;align-items:center;gap:12px;text-align:center}
.solo-quote .v-ava{width:46px;height:46px}
.solo-quote .v-who b{font-size:14px}

/* ---- Marquee — mixed shots, uniform height, JS-driven drift, draggable ---- */
.marquee{overflow:hidden;padding:clamp(56px,7vw,96px) 0;cursor:grab;touch-action:pan-y}
.marquee.dragging{cursor:grabbing}
.marquee-track{display:flex;align-items:stretch;gap:14px;width:max-content;will-change:transform}
.m-item{height:clamp(220px,26vw,320px);border-radius:16px;background:var(--surface);box-shadow:inset 0 0 0 1px rgba(255,255,255,.06);flex:none;overflow:hidden;transition:transform .5s var(--ease),box-shadow .3s ease}
.m-item img{width:auto;height:100%;display:block;pointer-events:none}
@media(hover:hover) and (pointer:fine){
  .m-item:hover{transform:translateY(-10px) rotate(-.6deg);box-shadow:inset 0 0 0 1px rgba(255,255,255,.14),0 24px 48px rgba(0,0,0,.4)}
}

/* ---- Stats ---- */
.stats-band{padding-bottom:0}
.stats{display:grid;grid-template-columns:repeat(3,1fr)}
.stat{display:flex;flex-direction:column;justify-content:space-between;min-height:280px;padding:28px 32px 24px 0;border-top:1px solid var(--border)}
.stat+.stat{padding-left:32px;border-left:1px solid var(--border)}
.stat span{font-size:13px;color:var(--muted);line-height:1.6}
.stat b{align-self:flex-end;font-family:var(--serif);font-weight:400;font-size:clamp(3.4rem,6vw,5.6rem);line-height:1;color:var(--foreground)}

/* ---- Footer — clickable ASCII wave field under a centered CTA ---- */
.fwrap{padding:0 clamp(20px,3.5vw,48px)}
footer.site{position:relative;overflow:hidden;min-height:76svh;display:flex;flex-direction:column;justify-content:center;padding:clamp(64px,8vw,104px) 0 clamp(40px,5vw,64px);border-top:1px solid var(--border)}
footer.site .fwrap{position:relative;pointer-events:none}
footer.site .fwrap a,footer.site .fwrap button{pointer-events:auto}
.ascii{position:absolute;inset:0;font-family:var(--mono);font-size:12px;line-height:1.2;color:#2a2a2a;white-space:pre;user-select:none;overflow:hidden;mask-image:linear-gradient(to bottom,transparent 0,#000 14%,#000 86%,transparent 100%);-webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 14%,#000 86%,transparent 100%)}
footer.site .wrap{position:relative}
.foot-big{font-family:var(--serif);font-weight:400;font-size:clamp(2rem,4.2vw,3.6rem);line-height:1.18;margin:0 auto;max-width:26ch;text-align:center;text-wrap:balance;color:var(--foreground)}
.foot-big a{font-style:italic;border-bottom:1px solid var(--hairline);transition:color .15s ease,border-color .15s ease}
.foot-big a:hover{color:var(--accent);border-color:var(--accent)}
.foot-meta{display:flex;flex-wrap:wrap;gap:16px 32px;justify-content:space-between;margin-top:72px;padding-top:26px;border-top:1px solid var(--border);align-items:center}
.foot-links{display:flex;gap:22px;flex-wrap:wrap}
.foot-links a,.foot-links button{position:relative;font-size:13px;color:var(--muted);background:none;border:0;font-family:inherit;cursor:pointer;padding:0 0 3px;transition:color .15s ease}
.foot-links a::after,.foot-links button::after{content:"";position:absolute;left:0;bottom:0;width:100%;height:1px;background:currentColor;transform:scaleX(0);transform-origin:right;transition:transform .4s var(--ease)}
.foot-links a:hover,.foot-links button:hover{color:var(--foreground)}
.foot-links a:hover::after,.foot-links button:hover::after{transform:scaleX(1);transform-origin:left}
.foot-note{font-size:12.5px;color:var(--muted)}

/* ---- Sparks — colored ASCII constellations hiding little stories ---- */
.spark-spot{position:absolute;z-index:40}
.spark{position:relative;width:36px;height:36px;background:none;border:0;cursor:pointer;font-family:var(--mono);font-size:13px;line-height:1;padding:0}
.spark span{position:absolute;opacity:.32;transition:opacity .3s ease,transform .35s var(--ease);animation:sparkTwinkle 2.8s ease-in-out infinite}
.spark span:nth-child(1){left:5px;top:2px;color:#818cf8}
.spark span:nth-child(2){left:18px;top:8px;color:#4ade80;animation-delay:.5s}
.spark span:nth-child(3){left:9px;top:17px;color:#fb7185;animation-delay:1.1s}
.spark span:nth-child(4){left:22px;top:22px;color:#818cf8;animation-delay:1.6s}
.spark span:nth-child(5){left:1px;top:24px;color:#a3a3a3;animation-delay:2.1s}
@keyframes sparkTwinkle{50%{opacity:.85}}
.spark:hover span,.spark-spot.open .spark span{opacity:1;transform:scale(1.15)}
.spark-pop{position:absolute;bottom:calc(100% + 14px);left:50%;transform:translateX(-50%) translateY(8px);width:272px;text-align:left;background:rgba(20,20,20,.92);backdrop-filter:blur(18px) saturate(1.4);-webkit-backdrop-filter:blur(18px) saturate(1.4);border-radius:14px;box-shadow:inset 0 0 0 1px rgba(255,255,255,.09),0 18px 48px rgba(0,0,0,.55);padding:18px 18px 16px;opacity:0;pointer-events:none;transition:opacity .3s ease,transform .5s var(--ease)}
.spark-spot.open .spark-pop{opacity:1;transform:translateX(-50%);pointer-events:auto}
.spark-spot.pop-left .spark-pop{left:auto;right:-6px;transform:translateY(8px)}
.spark-spot.pop-left.open .spark-pop{transform:none}
.spark-spot.pop-right .spark-pop{left:-6px;transform:translateY(8px)}
.spark-spot.pop-right.open .spark-pop{transform:none}
.spark-spot.pop-below .spark-pop{bottom:auto;top:calc(100% + 14px);transform:translateY(-8px)}
.spark-spot.pop-below.open .spark-pop{transform:none}
.spark-spot.pop-below.pop-left .spark-pop{left:auto;right:-6px}
.spark-pop .bulb{width:22px;height:22px;color:#565656;animation:bulbGlow 2.6s ease-in-out infinite}
@keyframes bulbGlow{0%,100%{color:#565656;filter:none}50%{color:#fcd34d;filter:drop-shadow(0 0 9px rgba(252,211,77,.65))}}
.spark-pop b{display:block;font-size:13.5px;font-weight:500;color:var(--foreground);margin:10px 0 5px}
.spark-pop p{font-size:12.5px;line-height:1.6;color:var(--body)}
.spark-pop a{display:inline-block;margin-top:10px;font-size:12px;color:var(--foreground);border-bottom:1px solid var(--hairline);padding-bottom:1px;transition:color .15s ease,border-color .15s ease}
.spark-pop a:hover{color:var(--accent);border-color:var(--accent)}
@media(max-width:920px){.spark-spot{display:none}}

/* ---- CV modal — a letter that slides up from the bottom ---- */
body.modal-open{overflow:hidden}
.cv-modal{position:fixed;inset:0;z-index:300;display:flex;align-items:flex-end;justify-content:center;pointer-events:none}
.cv-backdrop{position:absolute;inset:0;background:rgba(8,8,8,.72);backdrop-filter:blur(16px) saturate(1.3);-webkit-backdrop-filter:blur(16px) saturate(1.3);opacity:0;transition:opacity .45s ease}
.cv-modal.on{pointer-events:auto}
.cv-modal.on .cv-backdrop{opacity:1}
.cv-sheet{position:relative;width:min(680px,calc(100vw - 24px));max-height:90svh;overflow:auto;overscroll-behavior:contain;background:#f2efe6;color:#3f3b32;border-radius:18px 18px 0 0;padding:clamp(36px,5vw,60px) clamp(24px,4.5vw,60px) 44px;transform:translateY(103%);transition:transform .75s var(--ease);box-shadow:0 -12px 48px rgba(0,0,0,.55)}
.cv-modal.on .cv-sheet{transform:none}
.cv-close{position:absolute;top:16px;right:16px;width:34px;height:34px;border-radius:50%;border:0;background:rgba(0,0,0,.07);color:#3f3b32;font-size:19px;line-height:1;cursor:pointer;transition:background .15s ease,transform .4s var(--ease)}
.cv-close:hover{background:rgba(0,0,0,.13);transform:rotate(90deg)}
.cv-sheet h3{font-family:var(--serif);font-weight:500;font-size:clamp(1.9rem,3.4vw,2.6rem);color:#211e18;margin-bottom:18px}
.cv-sheet h4{font-family:var(--serif);font-weight:500;font-size:1.25rem;color:#211e18;margin:34px 0 10px}
.cv-sheet p{font-size:15px;line-height:1.7}
.cv-sheet p+p{margin-top:12px}
.cv-row{display:flex;justify-content:space-between;gap:16px;align-items:baseline;padding:13px 0;border-top:1px solid rgba(0,0,0,.1)}
.cv-row:last-of-type{border-bottom:1px solid rgba(0,0,0,.1)}
.cv-row b{display:block;font-size:14.5px;font-weight:600;color:#211e18}
.cv-row div span{display:block;font-size:13px;color:#8d8779;margin-top:2px}
.cv-when{font-size:12.5px;color:#8d8779;white-space:nowrap}
.cv-tools{font-size:13.5px;color:#686356}
.cv-actions{display:flex;flex-wrap:wrap;gap:12px 20px;align-items:center;margin-top:28px}
.cv-download{display:inline-block;padding:13px 26px;border-radius:999px;background:#211e18;color:#f2efe6;font-size:13.5px;font-weight:500;transition:background .15s ease,transform .3s var(--ease)}
.cv-download:hover{background:#000;transform:translateY(-1px)}
.cv-mail{color:#686356;border-color:rgba(0,0,0,.25)}
.cv-mail:hover{color:#211e18;border-color:rgba(0,0,0,.5)}
/* signature — SVG path that draws itself when scrolled into view */
.cv-sign-svg{margin-top:34px;margin-left:6px}
.cv-sign-svg svg{width:230px;height:auto;overflow:visible;transform:rotate(-4deg)}
.sig-letters{fill:#211e18;fill-opacity:0;stroke:#211e18;stroke-width:1.6;stroke-dasharray:1;stroke-dashoffset:1}
.sig-accent{fill:none;stroke:#211e18;stroke-width:7;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:1}
.cv-sign-svg.draw .sig-letters{animation:sigDraw 1.5s ease .1s forwards,sigFill .6s ease 1.35s forwards}
.cv-sign-svg.draw .sig-accent{animation:sigDraw .35s ease 1.6s forwards}
@keyframes sigDraw{to{stroke-dashoffset:0}}
@keyframes sigFill{to{fill-opacity:1}}

/* ---- Case study pages ---- */
.cs-hero{padding:160px 0 56px}
.cs-hero .label{color:var(--accent)}
.cs-hero h1{font-family:var(--serif);font-weight:400;font-size:clamp(2.2rem,4.6vw,4rem);line-height:1.08;max-width:24ch;margin-top:20px;color:var(--foreground)}
.cs-meta{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:24px;margin-top:52px;padding-top:28px;border-top:1px solid var(--border)}
.cs-meta div b{display:block;font-size:13.5px;font-weight:500;margin-top:8px;color:var(--foreground)}
.cs-live{border-bottom:1px solid var(--hairline);padding-bottom:1px;transition:color .15s ease,border-color .15s ease}
.cs-live:hover{color:var(--accent);border-color:var(--accent)}
.cs-body{max-width:720px;margin:0 auto;padding:0 clamp(20px,3.5vw,48px)}
.cs-body h2{font-family:var(--serif);font-weight:500;font-size:clamp(1.5rem,2.4vw,1.9rem);margin:80px 0 22px;color:var(--foreground)}
.cs-body p,.cs-body li{color:var(--body);font-size:16px;line-height:1.7}
.cs-body p+p{margin-top:16px}
.cs-body ul{padding-left:20px;margin-top:12px}
.cs-body li+li{margin-top:10px}
.cs-figure{margin:40px 0}
.cs-figure figcaption{font-size:12.5px;color:var(--muted);margin-top:10px}
.cs-full{max-width:1440px;margin:48px auto;padding:0 clamp(20px,3.5vw,48px)}
/* painted band — project background with the shot floating on top, like the home tiles */
.cs-band{position:relative;border-radius:20px;overflow:hidden;padding:clamp(24px,4.5vw,72px);box-shadow:inset 0 0 0 1px rgba(255,255,255,.08)}
.cs-band::before{content:"";position:absolute;inset:0;background:radial-gradient(120% 100% at 50% 50%,rgba(10,10,10,.2) 0%,rgba(10,10,10,.55) 100%)}
.cs-band>img{position:relative;z-index:2;display:block;width:100%;height:auto;border-radius:12px;box-shadow:0 6px 20px rgba(0,0,0,.35),0 34px 90px rgba(0,0,0,.55)}
.cs-band-grid{position:relative;z-index:2;display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,2.4vw,32px);align-items:center}
.cs-band-grid img{display:block;width:100%;height:auto;border-radius:12px;box-shadow:0 6px 20px rgba(0,0,0,.35),0 30px 80px rgba(0,0,0,.5)}
.cs-band-grid img:nth-child(2){transform:translateY(clamp(10px,2vw,26px))}
.cs-band .band-phone{position:relative;z-index:2;display:block;width:min(46%,340px);height:auto;margin:0 auto;border-radius:18px;box-shadow:0 6px 20px rgba(0,0,0,.35),0 34px 90px rgba(0,0,0,.55)}
/* process shots — 2-up grid with mono captions */
.cs-grid2{display:grid;grid-template-columns:1fr 1fr;gap:clamp(16px,2.4vw,32px);margin:48px 0 0}
.cs-fig{margin:0}
.cs-fig img{display:block;width:100%;height:auto;border-radius:14px;box-shadow:inset 0 0 0 1px rgba(255,255,255,.06)}
.cs-fig figcaption{font-family:var(--mono);font-size:11.5px;color:var(--muted);margin-top:12px;letter-spacing:.04em;line-height:1.5}
/* quotes carry the proof — same shape as the home solo quote: plain sans, centered, avatar above the name */
.cs-quote{padding:8px 0;margin:72px auto;max-width:640px;text-align:center}
.cs-quote p{font-size:clamp(1.2rem,1.9vw,1.5rem);line-height:1.55;color:#e5e5e5}
.cs-quote footer{margin-top:28px;display:flex;flex-direction:column;align-items:center;gap:12px;text-align:center}
.cs-quote .v-ava{width:46px;height:46px}
.cs-quote .v-who b{font-size:14px}
.tbd{background:#181510;box-shadow:inset 0 0 0 1px rgba(214,177,86,.25);color:#c9a86a;font-family:var(--mono);font-size:12px;padding:12px 16px;border-radius:10px;margin:20px 0}
.cs-nav{display:flex;justify-content:space-between;gap:24px;max-width:720px;margin:96px auto 0;padding:32px clamp(20px,3.5vw,48px) 0;border-top:1px solid var(--border)}
.cs-nav a{font-size:13.5px;color:var(--body)}
.cs-nav a:hover{color:var(--accent)}

/* next case — big teaser above the footer */
.next-case{display:block;text-align:center;padding:clamp(72px,9vw,120px) 24px;margin-top:clamp(72px,9vw,120px);border-top:1px solid var(--border)}
.next-case .label{display:block;margin-bottom:16px}
.next-name{font-family:var(--serif);font-weight:400;font-size:clamp(2.6rem,6.5vw,5rem);line-height:1.05;color:var(--foreground);display:inline-block;transition:color .2s ease,transform .5s var(--ease)}
.next-case:hover .next-name{color:var(--accent);transform:translateX(8px)}

/* slow pan for tall shots — the screen scrolls itself */
@keyframes panShot{from{object-position:50% 0%}to{object-position:50% 100%}}
img.pan-slow{object-fit:cover;animation:panShot 16s ease-in-out infinite alternate}
@media(prefers-reduced-motion:reduce){img.pan-slow{animation:none;object-position:50% 0}}

/* what I do — revolver variant (?svc=rev): header left, looping wheel right */
.svc-grid{display:grid;grid-template-columns:.8fr 1.2fr;gap:48px clamp(48px,7vw,120px);align-items:center}
.svc-rev{position:relative;height:min(400px,56vh);overflow:hidden;-webkit-mask-image:linear-gradient(transparent,#000 24%,#000 76%,transparent);mask-image:linear-gradient(transparent,#000 24%,#000 76%,transparent)}
.svc-rev .rv{position:absolute;left:0;top:0;width:100%;will-change:transform,opacity}
.rv b{display:block;font-family:var(--serif);font-weight:500;font-size:clamp(1.5rem,2.8vw,2.3rem);line-height:1.15;color:var(--foreground)}
.rv small{display:block;font-size:13px;color:var(--muted);margin-top:2px}

/* ---- Archive — infinite canvas ---- */
.canvas{position:fixed;inset:0;overflow:hidden;cursor:grab;touch-action:none;background:var(--background)}
.canvas.dragging{cursor:grabbing}
.canvas .world{position:absolute;top:0;left:0;will-change:transform}
.canvas .layer{position:absolute;top:0;left:0;will-change:transform}
.c-tile{position:absolute;user-select:none;-webkit-user-select:none;cursor:pointer}
.c-tile .tile{pointer-events:none;transition:transform .6s var(--ease),box-shadow .4s ease}
.c-tile .tile img{width:100%;height:100%;object-fit:cover}
@media(hover:hover) and (pointer:fine){
  .c-tile:hover .tile{transform:translateY(-8px);box-shadow:inset 0 0 0 1px rgba(255,255,255,.14),0 28px 56px rgba(0,0,0,.45)}
}
.c-tile .tile-cap{pointer-events:none;display:flex;justify-content:space-between;gap:12px;padding:12px 4px 0}
.c-tile .tile-cap b{font-size:14px;font-weight:500;color:var(--foreground)}
.c-tile .tile-cap span{font-size:12px;color:var(--muted)}
.canvas-hint{position:fixed;left:50%;transform:translateX(-50%);bottom:84px;z-index:60;font-size:12.5px;color:var(--muted);pointer-events:none;transition:opacity .8s ease}
.canvas-hint.hide{opacity:0}
.canvas-vignette{position:fixed;inset:0;pointer-events:none;z-index:50;background:radial-gradient(ellipse at center,transparent 62%,rgba(10,10,10,.55) 100%)}
/* lightbox — click a shot on the canvas to see it big
 * (the image itself is FLIP-animated from the tile in JS, so no CSS transform here) */
.lightbox{position:fixed;inset:0;z-index:200;background:rgba(8,8,8,.8);backdrop-filter:blur(20px) saturate(1.4);-webkit-backdrop-filter:blur(20px) saturate(1.4);display:flex;align-items:center;justify-content:center;opacity:0;pointer-events:none;transition:opacity .4s ease;cursor:zoom-out}
.lightbox.on{opacity:1;pointer-events:auto;transition-duration:.25s}
.lightbox img{max-width:min(1240px,92vw);max-height:86vh;width:auto;height:auto;border-radius:12px;box-shadow:0 8px 24px rgba(0,0,0,.45),0 48px 120px rgba(0,0,0,.6);will-change:transform}

/* archive — always-visible way back home (top-left pill) */
.back-home{position:fixed;top:18px;left:18px;right:auto;transform:none;z-index:100;display:block;padding:12px 18px;font-size:13px;color:var(--body);transition:color .15s ease,transform .3s var(--ease)}
.back-home:hover{color:var(--foreground);transform:translateX(-2px)}

@media (prefers-reduced-motion:reduce){
  .reveal{transform:none;transition:opacity .3s ease}
  .mas-card{opacity:1;transform:none;transition:none}
  .wipe{clip-path:inset(0 0 0 0 round 16px)!important;transition:none}
  .statement-media,.st-side{transform:none!important;opacity:1!important}
  .i-dot,.spark span,.spark-pop .bulb,.mouse-dot,.i-flag{animation:none!important}
  .cv-sign-svg .sig-letters{fill-opacity:1;stroke-dashoffset:0;animation:none}
  .cv-sign-svg .sig-accent{stroke-dashoffset:0;animation:none}
  html{scroll-behavior:auto}
}
@media (max-width:920px){
  .statement{height:auto}
  .statement-pin{position:relative;min-height:0;padding:clamp(120px,16vw,200px) 0}
  .statement-line{flex-wrap:wrap;white-space:normal;gap:20px 0}
  .st-left,.st-right{margin:0}
  .v-grid{grid-template-columns:1fr;gap:32px}
  .v-left .v-nav{margin-top:16px}
  .v-list{padding-top:0;display:flex;flex-wrap:wrap;gap:4px 20px}
  .masonry{grid-template-columns:1fr;gap:0}
  .mas-col{gap:clamp(56px,10vw,96px)}
  .mas-col-offset{margin-top:clamp(56px,10vw,96px)}
  .archive-cta{padding:36px 4px}
  .behind-grid,.two-col,.svc-grid{grid-template-columns:1fr;gap:48px}
  .behind-left{position:static}
  .portrait{max-width:440px;margin:0 auto;width:100%}
  .client-row{grid-template-columns:1fr;gap:14px}
  .stats{grid-template-columns:1fr}
  .stat{min-height:180px}
  .stat+.stat{padding-left:0;border-left:none}
  .stat b{font-size:3.2rem}
  .svc-preview{display:none}
  .video-stage{max-width:100%}
  .cs-hero{padding:132px 0 44px}
  footer.site{min-height:88svh}
}
@media (max-width:560px){
  .i-section{min-width:0}
  .island-bottom{padding:5px}
  .island-bottom a,.island-bottom button{padding:7px 9px;font-size:12px}
  .hf-br{display:none}
  .hf-bl{right:var(--pad)}
  .hero-desc{max-width:100%;font-size:14px}
  .video-band{padding:14px}
  .mas-cap b{font-size:15px}
  .statement-kicker{margin-bottom:44px}
  .svc{flex-wrap:wrap;gap:6px 24px;padding:16px 4px}
  .svc small{text-align:left;width:100%}
  .exp-row{grid-template-columns:1fr;gap:6px}
  .exp-meta{text-align:left;font-size:12.5px}
  .v-quote p{font-size:1.15rem}
  .v-quote footer{margin-top:24px}
  .m-item{height:190px}
  .marquee-track{gap:10px}
  .stat{min-height:150px;padding:22px 0 18px}
  .foot-big{font-size:1.8rem}
  .fb-br{display:none} /* let text-wrap:balance break the line on phones */
  .foot-meta{margin-top:48px}
  .ascii{font-size:10px}
  .cs-meta{grid-template-columns:1fr 1fr;gap:18px}
  .cs-grid2{grid-template-columns:1fr;gap:24px}
  .cs-band{padding:16px;border-radius:16px}
  .cs-band-grid{gap:10px}
  .cs-band-grid img:nth-child(2){transform:none}
  .cs-band .band-phone{width:min(64%,300px)}
  .back-home{display:none} /* the bottom island carries ← Home on phones */
  .lightbox img{max-width:94vw;max-height:78vh}
}