/* ============================================================
   MARC CRENSHAW — GLASS GALLERY v2
   Light spatial system: ambient color field, frosted glass,
   soft depth, fluid type. The artwork is the color.
   ============================================================ */

:root{
  --bg:#F1F1F4;
  --ink:#0B0B0F;
  --ink-2:#3D3D46;
  --ink-3:#8A8A94;
  --glass:rgba(255,255,255,.58);
  --glass-strong:rgba(255,255,255,.78);
  --glass-line:rgba(255,255,255,.85);
  --ring:rgba(11,11,15,.07);
  --shadow:0 24px 60px -24px rgba(11,11,15,.22);
  --shadow-sm:0 10px 30px -14px rgba(11,11,15,.18);
  --r-lg:28px;
  --r-md:20px;
  --font-d:"Inter Tight","SF Pro Display","Helvetica Neue",Arial,sans-serif;
  --font-b:"Inter","SF Pro Text","Helvetica Neue",Arial,sans-serif;
  --gutter:clamp(20px,4.5vw,72px);
  --max:1560px;
  /* scoped case palettes */
  --lime:#C8FF00;
  --void:#08080B;
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important}
}
body{
  background:var(--bg);
  color:var(--ink);
  font-family:var(--font-b);
  font-size:clamp(15px,1.02vw,17px);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
::selection{background:var(--ink);color:#fff}
a:focus-visible,button:focus-visible{outline:2px solid var(--ink);outline-offset:3px;border-radius:6px}

/* ---------- ambient color field ---------- */
.field{position:fixed;inset:-20%;z-index:-2;pointer-events:none;filter:blur(90px) saturate(1.15);opacity:.5}
.field i{position:absolute;border-radius:50%}
.field i:nth-child(1){width:44vw;height:44vw;left:-6%;top:-4%;background:#C7B9FF;animation:drift1 26s ease-in-out infinite alternate}
.field i:nth-child(2){width:38vw;height:38vw;right:-4%;top:18%;background:#9AD8FF;animation:drift2 32s ease-in-out infinite alternate}
.field i:nth-child(3){width:34vw;height:34vw;left:24%;bottom:-8%;background:#FFD9A8;animation:drift3 38s ease-in-out infinite alternate}
@keyframes drift1{to{transform:translate(9vw,7vh) scale(1.12)}}
@keyframes drift2{to{transform:translate(-7vw,10vh) scale(.92)}}
@keyframes drift3{to{transform:translate(6vw,-8vh) scale(1.08)}}
.grain{position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:.5;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.16'/%3E%3C/svg%3E")}

/* ---------- type utilities ---------- */
.d{font-family:var(--font-d);letter-spacing:-.035em;font-weight:600;line-height:.98}
.label{font-family:var(--font-b);font-size:.72rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3)}
.label b{color:var(--ink);font-weight:600}
.eyebrow{display:flex;align-items:baseline;gap:1em;margin-bottom:2.4rem}
.eyebrow .n{font-family:var(--font-d);font-weight:600;font-size:.8rem;color:var(--ink);background:var(--glass-strong);border:1px solid var(--glass-line);border-radius:999px;padding:.35em .9em;box-shadow:var(--shadow-sm)}
.skip{position:absolute;left:-9999px;top:0;background:var(--ink);color:#fff;padding:.7em 1.2em;z-index:300;border-radius:0 0 12px 0;font-size:.8rem}
.skip:focus{left:0}

/* ---------- glass primitives ---------- */
.glass{background:var(--glass);backdrop-filter:blur(24px) saturate(1.5);-webkit-backdrop-filter:blur(24px) saturate(1.5);border:1px solid var(--glass-line);border-radius:var(--r-lg);box-shadow:var(--shadow-sm)}
.card-img{border-radius:var(--r-md);overflow:hidden;box-shadow:var(--shadow);outline:1px solid var(--ring);outline-offset:-1px;background:#fff;position:relative}
.card-img img{width:100%;transition:transform 1s cubic-bezier(.19,1,.22,1)}
.card-img::after{ /* glare sweep */
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:linear-gradient(115deg,transparent 40%,rgba(255,255,255,.32) 50%,transparent 60%);
  transform:translateX(-120%);transition:transform .9s ease;
}
.card-img:hover::after{transform:translateX(120%)}
.card-img:hover img{transform:scale(1.03)}

/* ---------- nav pill ---------- */
.nav{position:fixed;top:14px;left:50%;transform:translateX(-50%);z-index:100;
  display:flex;align-items:center;gap:.4rem;padding:.45rem .55rem;
  background:var(--glass-strong);backdrop-filter:blur(28px) saturate(1.6);-webkit-backdrop-filter:blur(28px) saturate(1.6);
  border:1px solid var(--glass-line);border-radius:999px;box-shadow:var(--shadow-sm);
  max-width:calc(100vw - 24px);
}
.nav .wordmark{font-family:var(--font-d);font-weight:700;font-size:.85rem;letter-spacing:-.02em;padding:.35em .8em .35em .7em;white-space:nowrap}
.nav ul{display:flex;list-style:none;gap:.1rem}
.nav li a{display:block;font-size:.8rem;font-weight:500;color:var(--ink-2);padding:.42em .85em;border-radius:999px;transition:background .25s,color .25s;white-space:nowrap}
.nav li a:hover{background:rgba(11,11,15,.06);color:var(--ink)}
.nav li a[aria-current]{background:var(--ink);color:#fff}
@media(max-width:760px){
  .nav{top:auto;bottom:14px}
  .nav .wordmark{display:none}
  .nav li.hide-m{display:none}
  .nav li a{font-size:.82rem;padding:.5em .9em}
}

/* ---------- hero ---------- */
.hero{min-height:100svh;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;
  padding:clamp(90px,12vh,140px) var(--gutter) 0;position:relative;overflow:hidden}
.hero .kicker{margin-bottom:1.4rem;display:inline-flex;align-items:center;gap:.6em;background:var(--glass-strong);border:1px solid var(--glass-line);border-radius:999px;padding:.5em 1.1em;box-shadow:var(--shadow-sm);font-size:.78rem;font-weight:500;color:var(--ink-2)}
.hero .kicker::before{content:"";width:7px;height:7px;border-radius:50%;background:#34C759}
.hero h1{font-family:var(--font-d);font-weight:700;letter-spacing:-.045em;line-height:.95;font-size:clamp(3.2rem,10vw,8.6rem)}
@media(max-width:520px){
  .hero h1{font-size:2.85rem;letter-spacing:-.035em}
  .hero .role .rl{display:block}
  .hero .role .rbr{display:none}
  .hero .role b .rl+.rl{margin-top:0}
}
.hero .role{margin-top:1.3rem;font-size:clamp(1rem,1.5vw,1.3rem);color:var(--ink-2);max-width:46ch}
.hero .role b{color:var(--ink);font-weight:600}

/* orbit carousel of artwork */
.deck{position:relative;width:min(1180px,96vw);height:clamp(320px,46vh,500px);margin-top:clamp(1.6rem,4vh,3.2rem);perspective:1300px;transform-style:preserve-3d}
.deck .dcard{position:absolute;left:50%;top:48%;width:clamp(170px,21vw,280px);aspect-ratio:4/5;border-radius:18px;overflow:hidden;
  box-shadow:0 30px 70px -20px rgba(11,11,15,.38);outline:1px solid rgba(255,255,255,.6);outline-offset:-1px;
  will-change:transform,opacity}
.deck .dcard img{width:100%;height:100%;object-fit:cover}
.deck .dcard::after{content:"";position:absolute;inset:0;background:linear-gradient(160deg,rgba(255,255,255,.18),transparent 45%)}
.hero-foot{margin:2.6rem 0 2rem}
@media(max-width:760px){
  .deck{height:auto;perspective:none;display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;padding:1rem 2px 1.4rem;width:100%}
  .deck .dcard{position:static;flex:0 0 62vw;transform:none !important;scroll-snap-align:center}
}
.deck .halo{position:absolute;left:50%;top:52%;width:min(760px,70vw);aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;
  background:radial-gradient(closest-side,rgba(255,255,255,.55),rgba(255,255,255,0) 70%);z-index:-1;pointer-events:none}
@media(max-width:760px){.deck .halo{display:none}}

/* ---------- sections ---------- */
section{padding:clamp(5rem,9vw,8.5rem) var(--gutter)}
.wrap{max-width:var(--max);margin:0 auto}
.h2{font-family:var(--font-d);font-weight:700;letter-spacing:-.04em;line-height:.98;font-size:clamp(2.4rem,5.6vw,4.8rem);margin-bottom:1.2rem}
.sub{color:var(--ink-2);max-width:58ch;font-size:clamp(1rem,1.25vw,1.15rem);margin-bottom:3.4rem}
.reveal{opacity:0;transform:translateY(26px) scale(.985);transition:opacity .9s ease,transform .9s cubic-bezier(.19,1,.22,1)}
.reveal.in{opacity:1;transform:none}

/* ---------- selected work ---------- */
.work-item{display:grid;grid-template-columns:repeat(12,1fr);gap:clamp(16px,2.2vw,36px);align-items:center;margin-bottom:clamp(4.5rem,8vw,8rem)}
.work-item .art{grid-column:span 7}
.work-item .meta{grid-column:span 5}
.work-item.flip .art{order:2}
.work-item.flip .meta{order:1;text-align:right}
.work-item.lead{align-items:end}
.work-item.lead .art{grid-column:3/span 8}
.work-item.lead .meta{grid-column:3/span 8;display:flex;justify-content:space-between;align-items:baseline;gap:2rem;padding-top:1.2rem}
.work-item h3{font-family:var(--font-d);font-weight:700;letter-spacing:-.03em;font-size:clamp(1.7rem,3vw,2.8rem);line-height:1.02;margin-bottom:.7rem}
.work-item .tag{display:inline-flex;margin-bottom:1.1rem}
.work-item button.zoom{all:unset;cursor:zoom-in;display:block;width:100%}
.pair{display:grid;grid-template-columns:1fr 1fr;gap:clamp(16px,2.2vw,36px);margin-bottom:clamp(4.5rem,8vw,8rem)}
.pair figure{margin:0}
.pair figcaption{display:flex;justify-content:space-between;gap:1rem;padding:.9rem .4rem 0}
@media(max-width:820px){
  .work-item,.work-item.flip,.work-item.lead{display:block}
  .work-item .meta,.work-item.flip .meta{text-align:left;padding-top:1.1rem}
  .work-item.lead .meta{display:block}
  .pair{grid-template-columns:1fr}
}

.archive-cta{display:flex;justify-content:space-between;align-items:center;gap:1.5rem;flex-wrap:wrap;
  padding:clamp(1.6rem,3vw,2.6rem) clamp(1.6rem,3vw,3rem);transition:transform .4s cubic-bezier(.19,1,.22,1),box-shadow .4s}
.archive-cta:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
.archive-cta .big{font-family:var(--font-d);font-weight:700;letter-spacing:-.035em;font-size:clamp(1.6rem,3.6vw,2.8rem)}
.archive-cta .arrow{font-family:var(--font-d);font-size:clamp(1.6rem,3vw,2.4rem);transition:transform .4s}
.archive-cta:hover .arrow{transform:translateX(8px)}

/* ---------- experience ---------- */
.stat-row{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(12px,1.6vw,24px);margin-bottom:clamp(3rem,5vw,4.5rem)}
.stat{padding:clamp(1.4rem,2.4vw,2.2rem)}
.stat .big{display:block;font-family:var(--font-d);font-weight:700;letter-spacing:-.04em;font-size:clamp(2.2rem,4.4vw,4rem);line-height:1}
.stat .lbl{display:block;margin-top:.7rem;color:var(--ink-2);font-size:.88rem}
@media(max-width:760px){.stat-row{grid-template-columns:1fr}}

/* venue index — hover reveals floating artwork preview */
.venues{margin-top:1rem}
.venues-head{margin-bottom:1.6rem}
.venue-list{list-style:none;border-top:1px solid rgba(11,11,15,.1)}
.venue-list li{border-bottom:1px solid rgba(11,11,15,.1)}
.venue-list a{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;padding:1.05rem .2rem;
  font-family:var(--font-d);font-weight:600;letter-spacing:-.025em;font-size:clamp(1.4rem,3vw,2.6rem);color:var(--ink-2);
  transition:color .25s,padding-left .35s cubic-bezier(.19,1,.22,1)}
.venue-list a:hover{color:var(--ink);padding-left:.9rem}
.venue-list .where{font-family:var(--font-b);font-size:.78rem;font-weight:500;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3)}
.peek{position:fixed;z-index:90;width:200px;aspect-ratio:4/5;border-radius:14px;overflow:hidden;pointer-events:none;
  box-shadow:0 24px 60px -18px rgba(11,11,15,.4);outline:1px solid rgba(255,255,255,.65);
  opacity:0;transform:scale(.9) rotate(-2deg);transition:opacity .25s,transform .35s cubic-bezier(.19,1,.22,1)}
.peek.on{opacity:1;transform:scale(1) rotate(-2deg)}
.peek img{width:100%;height:100%;object-fit:cover}
@media(hover:none){.peek{display:none}}

/* ---------- case studies ---------- */
.case{border-radius:clamp(24px,3vw,40px);padding:clamp(2.4rem,5vw,5rem);overflow:hidden;position:relative}
.case .h2{margin-bottom:1rem}
.case .lede{max-width:60ch;font-size:clamp(1rem,1.3vw,1.2rem);line-height:1.65;margin-bottom:3rem}
.case-grid{display:grid;grid-template-columns:repeat(12,1fr);gap:clamp(14px,1.8vw,26px)}
.case-grid .g12{grid-column:span 12}
.case-grid .g7{grid-column:span 7}
.case-grid .g5{grid-column:span 5}
.case-grid .g4{grid-column:span 4}
.case-grid figure{margin:0}
.case-grid figcaption{padding:.8rem .3rem 0;font-size:.82rem}
@media(max-width:820px){.case-grid .g7,.case-grid .g5{grid-column:span 12}.case-grid .g4{grid-column:span 12}}
.case-foot{margin-top:2.6rem;display:flex;justify-content:space-between;align-items:center;gap:1rem;flex-wrap:wrap}
.btn{display:inline-flex;align-items:center;gap:.5em;font-weight:600;font-size:.88rem;padding:.75em 1.4em;border-radius:999px;transition:transform .3s,box-shadow .3s}
.btn:hover{transform:translateY(-2px)}

/* Hyperprism — scoped brand room */
.case-hy{background:var(--void);color:#ECEAE4}
.case-hy .label,.case-hy figcaption{color:#77767A}
.case-hy .label b,.case-hy figcaption b{color:#ECEAE4}
.case-hy .lede{color:#C9C7C0}
.case-hy .accent{color:var(--lime)}
.case-hy .card-img{outline-color:rgba(255,255,255,.12);background:#111}
.case-hy .btn{background:var(--lime);color:#0A0A0A}
.case-hy ::selection{background:var(--lime);color:#0A0A0A}

/* YSTRDAY — bone room, in the brand's own language */
.case-ys{background:#EAE6DC;color:#161512}
.case-ys .label,.case-ys figcaption{color:#8B857A}
.case-ys .label b,.case-ys figcaption b{color:#161512}
.case-ys .lede{color:#3E3B35}
.case-ys .card-img{outline-color:rgba(22,21,18,.08);background:#DFDACF;box-shadow:0 18px 44px -20px rgba(22,21,18,.28)}
.case-ys .btn{background:#161512;color:#EAE6DC}
.case-ys ::selection{background:#161512;color:#EAE6DC}
.hscroll{display:flex;gap:clamp(12px,1.6vw,22px);overflow-x:auto;scroll-snap-type:x mandatory;padding:.2rem .2rem 1.2rem;scrollbar-width:none}
.hscroll::-webkit-scrollbar{display:none}
.hscroll figure{flex:0 0 clamp(220px,26vw,360px);scroll-snap-align:start;margin:0}
.hscroll .card-img img{aspect-ratio:4/5;object-fit:cover}
.hs-hint{font-size:.78rem;color:inherit;opacity:.55;margin-top:-.4rem;margin-bottom:1rem}


/* ---------- about ---------- */
.about .lede-xl{font-family:var(--font-d);font-weight:600;letter-spacing:-.03em;font-size:clamp(1.6rem,3.4vw,3rem);line-height:1.18;max-width:24em}
.about-cols{display:grid;grid-template-columns:1.2fr 1fr;gap:clamp(2rem,4.5vw,5rem);margin-top:3.4rem}
.about-cols .col p{color:var(--ink-2);margin-bottom:1.1em;max-width:56ch}
.about-cols .col p b{color:var(--ink);font-weight:600}
.cap-list{list-style:none}
.cap-list li{display:flex;justify-content:space-between;align-items:center;gap:1rem;padding:.95rem 1.2rem;border-radius:16px;transition:background .25s}
.cap-list li:hover{background:rgba(255,255,255,.65)}
.cap-list li+li{margin-top:.2rem}
.cap-list .what{font-weight:600;font-size:.95rem}
.cap-list .how{font-size:.75rem;color:var(--ink-3);font-weight:500;letter-spacing:.08em;text-transform:uppercase;text-align:right}
@media(max-width:820px){.about-cols{grid-template-columns:1fr}}

/* ---------- contact ---------- */
.contact-card{text-align:center;padding:clamp(3rem,7vw,6rem) clamp(1.5rem,4vw,4rem)}
.contact-card .avail{color:var(--ink-2);max-width:44ch;margin:0 auto 2.6rem;font-size:clamp(1rem,1.3vw,1.2rem)}
.contact-card .email{display:inline-block;font-family:var(--font-d);font-weight:700;letter-spacing:-.035em;font-size:clamp(1.5rem,4.6vw,3.8rem);line-height:1.1;word-break:break-all;transition:opacity .3s}
.contact-card .email:hover{opacity:.6}
.contact-links{margin-top:2.6rem;display:flex;justify-content:center;gap:.7rem;flex-wrap:wrap}
.contact-links .btn{background:rgba(11,11,15,.05);border:1px solid rgba(11,11,15,.08);color:var(--ink)}
footer{padding:2.2rem var(--gutter) calc(2.2rem + 70px);display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;color:var(--ink-3);font-size:.8rem}
@media(min-width:761px){footer{padding-bottom:2.2rem}}

/* ---------- archive page ---------- */
.arch-head{padding:clamp(110px,16vh,170px) var(--gutter) 1.6rem}
.filters{display:flex;gap:.45rem;flex-wrap:wrap;padding:0 var(--gutter) 2.2rem;max-width:calc(var(--max) + 2*var(--gutter));margin:0 auto}
.filters button{all:unset;cursor:pointer;font-size:.8rem;font-weight:500;color:var(--ink-2);
  background:var(--glass);backdrop-filter:blur(16px);border:1px solid var(--glass-line);border-radius:999px;padding:.5em 1.05em;transition:all .25s}
.filters button:hover{color:var(--ink);transform:translateY(-1px);box-shadow:var(--shadow-sm)}
.filters button[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:#fff}
.filters .sep{width:100%;height:0}
.arch-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:clamp(14px,1.8vw,24px);padding:0 var(--gutter) 6rem;max-width:calc(var(--max) + 2*var(--gutter));margin:0 auto}
.arch-grid figure{margin:0}
.arch-grid figure.hide{display:none}
.arch-grid button{all:unset;cursor:zoom-in;display:block;width:100%}
.arch-grid .card-img img{aspect-ratio:4/5;object-fit:cover}
.arch-grid figcaption{display:flex;justify-content:space-between;gap:.6rem;padding:.65rem .35rem 0;font-size:.78rem;color:var(--ink-3)}
.arch-grid figcaption b{color:var(--ink);font-weight:600}

/* ---------- lightbox ---------- */
.lightbox{position:fixed;inset:0;z-index:200;display:none;align-items:center;justify-content:center;flex-direction:column;gap:1.1rem;
  padding:4vh 4vw;background:rgba(240,240,244,.72);backdrop-filter:blur(30px) saturate(1.4);-webkit-backdrop-filter:blur(30px) saturate(1.4)}
.lightbox.open{display:flex}
.lightbox img{max-height:80vh;max-width:92vw;width:auto;border-radius:18px;box-shadow:0 40px 100px -30px rgba(11,11,15,.45)}
.lightbox .lb-meta{font-size:.85rem;color:var(--ink-2);font-weight:500}
.lightbox .lb-close{all:unset;cursor:pointer;position:absolute;top:18px;right:22px;font-size:.85rem;font-weight:600;
  background:var(--glass-strong);border:1px solid var(--glass-line);border-radius:999px;padding:.55em 1.1em;box-shadow:var(--shadow-sm)}
.lightbox .lb-close:hover{background:var(--ink);color:#fff}

/* ============================================================
   v3 — MOTION LAYER
   ============================================================ */

/* cross-page transition (supported browsers) */
@view-transition{navigation:auto}

/* ambient field: slow hue drift */
@media (prefers-reduced-motion: no-preference){
  .field{animation:hue 48s linear infinite alternate}
  @keyframes hue{to{filter:blur(90px) saturate(1.15) hue-rotate(40deg)}}
}

/* custom cursor (fine pointers only) */
@media (pointer:fine){
  .cur-dot,.cur-ring{position:fixed;top:0;left:0;z-index:400;pointer-events:none;border-radius:50%;will-change:transform}
  .cur-dot{width:8px;height:8px;background:var(--ink);margin:-4px 0 0 -4px}
  .cur-ring{width:38px;height:38px;border:1.5px solid rgba(11,11,15,.35);margin:-19px 0 0 -19px;
    display:flex;align-items:center;justify-content:center;
    transition:width .3s,height .3s,margin .3s,background .3s,border-color .3s}
  .cur-ring span{font-size:.6rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:#fff;opacity:0;transition:opacity .2s}
  .cur-ring.hot{width:74px;height:74px;margin:-37px 0 0 -37px;background:rgba(11,11,15,.85);border-color:transparent}
  .cur-ring.hot span{opacity:1}
  .cur-hide .cur-dot,.cur-hide .cur-ring{opacity:0}
}

/* intro entrance */
.hero .kicker,.hero .role{opacity:0;transform:translateY(18px);transition:opacity .9s ease .55s,transform .9s cubic-bezier(.19,1,.22,1) .55s}
.hero h1 .w{display:inline-block;overflow:hidden;vertical-align:top;padding:0 .08em;margin:0 -.06em}
.hero h1 .w>span{display:inline-block;transform:translateY(115%);transition:transform 1.1s cubic-bezier(.19,1,.22,1)}
.hero h1 .w:nth-child(2)>span{transition-delay:.1s}
.deck .dcard{opacity:0;filter:blur(16px);transition:opacity 1s ease,filter 1.3s ease}

body.entered .hero .kicker,body.entered .hero .role{opacity:1;transform:none}
body.entered .hero h1 .w>span{transform:translateY(0)}
body.entered .deck .dcard{opacity:1;filter:blur(0)}
@media (prefers-reduced-motion: reduce){
  .hero .kicker,.hero .role{opacity:1;transform:none}
  .hero h1 .w>span{transform:none}
  .deck .dcard{opacity:1;transform:none}
}

/* split-word section titles */
.h2 .w{display:inline-block;overflow:hidden;vertical-align:top;padding:0 .06em .08em;margin:0 -.045em -.08em}
.h2 .w>span{display:inline-block;transform:translateY(112%);transition:transform .9s cubic-bezier(.19,1,.22,1)}
.h2.in .w>span{transform:translateY(0)}
@media (prefers-reduced-motion: reduce){.h2 .w>span{transform:none}}

/* parallax images inside cards */
.plx-wrap{overflow:hidden}
.plx-wrap img{will-change:transform;transform:translateY(var(--plx,0)) scale(1.12)}



/* deck scroll-away */
.deck{will-change:transform,opacity}


/* ---------- compact work grid (v4) ---------- */
.wgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(14px,1.6vw,24px);margin-bottom:clamp(3rem,5vw,4.5rem)}
.wgrid .wcard{position:relative;grid-column:span 1}
.wgrid .wcard.lead{grid-column:span 2;grid-row:span 2}
.wgrid .wcard button{all:unset;cursor:zoom-in;display:block;width:100%;height:100%}
.wgrid .card-img{height:100%}
.wgrid .card-img img{aspect-ratio:4/5;object-fit:cover;height:100%}
.wgrid .wmeta{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:1.1rem 1.2rem;display:flex;justify-content:space-between;align-items:end;gap:.8rem;
  color:#fff;border-radius:0 0 var(--r-md) var(--r-md);pointer-events:none;
  background:linear-gradient(transparent,rgba(8,8,11,.72));
  opacity:0;transform:translateY(10px);transition:opacity .45s ease,transform .5s cubic-bezier(.19,1,.22,1)}
.wgrid .wcard:hover .wmeta,.wgrid .wcard:focus-within .wmeta{opacity:1;transform:none}
.wgrid .wmeta h3{font-family:var(--font-d);font-weight:700;letter-spacing:-.02em;font-size:clamp(1rem,1.6vw,1.5rem);line-height:1.05}
.wgrid .wcard.lead .wmeta h3{font-size:clamp(1.4rem,2.4vw,2.2rem)}
.wgrid .wmeta .sub{font-size:.68rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.75);white-space:nowrap}
@media (pointer:coarse){.wgrid .wmeta{opacity:1;transform:none}}
@media(max-width:820px){.wgrid{grid-template-columns:repeat(2,1fr)}.wgrid .wcard.lead{grid-column:span 2;grid-row:span 1}}

/* ---------- venue / brand cards (v4) ---------- */
.brand-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,1.6vw,24px)}
.bcard{position:relative;display:block;padding:1.5rem 1.6rem 1.3rem;min-height:250px;overflow:hidden;
  transition:transform .45s cubic-bezier(.19,1,.22,1),box-shadow .45s}
.bcard:hover{transform:translateY(-5px);box-shadow:var(--shadow)}
.bcard h3{font-family:var(--font-d);font-weight:700;letter-spacing:-.025em;font-size:clamp(1.15rem,1.7vw,1.5rem);line-height:1.05;position:relative;z-index:2;max-width:58%}
.bcard .bsub{position:relative;z-index:2;display:block;margin-top:.35rem;font-size:.68rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3);max-width:56%}
.bcard .fan{position:absolute;right:5%;bottom:-16%;width:38%;z-index:1}
.bcard .fan img{position:absolute;bottom:0;right:0;width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:10px;
  box-shadow:0 14px 34px -12px rgba(11,11,15,.35);outline:1px solid rgba(255,255,255,.6);
  transition:transform .55s cubic-bezier(.19,1,.22,1)}
.bcard .fan img:nth-child(1){transform:rotate(-9deg) translate(-34%,-4%)}
.bcard .fan img:nth-child(2){transform:rotate(2deg) translate(-14%,-1%)}
.bcard .fan img:nth-child(3){transform:rotate(10deg)}
.bcard:hover .fan img:nth-child(1){transform:rotate(-14deg) translate(-52%,-9%)}
.bcard:hover .fan img:nth-child(2){transform:rotate(0deg) translate(-20%,-4%)}
.bcard:hover .fan img:nth-child(3){transform:rotate(15deg) translate(6%,2%)}
.bcard .go{position:absolute;top:1.3rem;right:1.4rem;z-index:2;font-size:.85rem;color:var(--ink-3);transition:transform .4s,color .3s}
.bcard:hover .go{transform:translate(3px,-3px);color:var(--ink)}
@media(max-width:900px){.brand-cards{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.brand-cards{grid-template-columns:1fr}.bcard{min-height:210px}}

/* ---------- browser frame (Hyperprism site shots) ---------- */
.browser{border-radius:14px;overflow:hidden;background:#101012;outline:1px solid rgba(255,255,255,.12);box-shadow:0 30px 70px -25px rgba(0,0,0,.65)}
.browser .bar{display:flex;align-items:center;gap:.45rem;padding:.6rem .9rem;background:#1A1A1E;border-bottom:1px solid rgba(255,255,255,.07)}
.browser .bar i{width:9px;height:9px;border-radius:50%;background:#3A3A40}
.browser .bar i:nth-child(1){background:#FF5F57}.browser .bar i:nth-child(2){background:#FEBC2E}.browser .bar i:nth-child(3){background:#28C840}
.browser .bar span{margin-left:.6rem;font-size:.66rem;letter-spacing:.08em;color:#77767A;font-family:var(--font-b)}
.browser img{width:100%;display:block}


/* YSTRDAY lead pair: consistent crop */
.case-ys .lead-two .card-img img{aspect-ratio:4/5;object-fit:cover;object-position:top;width:100%}


/* YSTRDAY uniform mockup grid */
.ygrid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(12px,1.5vw,22px)}
.ygrid .card-img img{aspect-ratio:1;object-fit:cover}
@media(max-width:820px){.ygrid{grid-template-columns:repeat(2,1fr)}}

/* hyperprism video hero */
.case-hy .video-card{border-radius:var(--r-md);overflow:hidden;box-shadow:var(--shadow);outline:1px solid rgba(255,255,255,.12);outline-offset:-1px;background:#000}
.case-hy .video-card video{width:100%;display:block;aspect-ratio:16/9;object-fit:cover;background:#000}
.case-hy .signal-wrap{max-width:1020px;width:100%;justify-self:center;margin:0}