/* Shared design system for legal pages — matches main site styling */

/* Custom cursor — site-wide. Hidden on touch devices, shown on hover-capable
   pointers. Logic in cursor.js. */
.cursor{display:none;pointer-events:none;position:fixed;top:0;left:0;transition:opacity .35s ease;z-index:9999}
@media (hover:hover) and (pointer:fine){.cursor{display:block}}
.circle-cursor--outer{position:absolute;width:10px;height:10px;left:-5px;top:-5px;background-color:#fff;border-radius:50%;box-shadow:0 0 12px rgba(0,0,0,.2);will-change:transform}
.circle-cursor--inner{position:absolute;width:120px;height:120px;left:-60px;top:-60px;background-color:#fff;color:#000;border-radius:50%;display:flex;align-items:center;justify-content:center;font-family:'F','Inter',system-ui,-apple-system,sans-serif;font-size:13px;font-weight:300;letter-spacing:.02em;text-align:center;overflow:hidden;will-change:transform;pointer-events:none;box-shadow:0 0 12px rgba(0,0,0,.1)}

@font-face{font-family:'F';src:url('fonts/Franie-ExtraLight.woff') format('woff');font-weight:200;font-display:swap}
@font-face{font-family:'F';src:url('fonts/Franie-Light.woff') format('woff');font-weight:300;font-display:swap}
@font-face{font-family:'F';src:url('fonts/Franie-Regular.woff') format('woff');font-weight:400;font-display:swap}
@font-face{font-family:'F';src:url('fonts/Franie-SemiBold.woff') format('woff');font-weight:600;font-display:swap}

:root{
  --bg:#000;
  --fg:#fff;
  --f2:rgba(255,255,255,.7);
  --f3:rgba(255,255,255,.42);
  --bd:rgba(255,255,255,.08);
  --ff:'F','Inter',system-ui,-apple-system,sans-serif;
  --G:linear-gradient(90deg,#46FF81 0%,#44CCFF 52%,#283FFF 100%);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:var(--ff);
  background:var(--bg);
  color:var(--fg);
  font-weight:300;
  font-size:16px;
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

/* Top nav — same padding + logo size across every page (legal, blog, studios,
   ai, home, etc.) so the brand wordmark sits at the identical horizontal
   position on every page. Padding matches the Zeno landing's --pad token
   (clamp 24-120px), which is the rhythm the rest of the site is built on
   (section gutters, content max-width edges, etc.). */
.legal-nav{
  position:fixed;top:0;left:0;right:0;z-index:50;
  display:flex;justify-content:space-between;align-items:center;
  padding:18px clamp(24px,7vw,120px);
  background:transparent;
  border-bottom:1px solid transparent;
  transition:background .35s,border-color .35s,backdrop-filter .35s;
}
/* Mirrors zeno.html's nav.on pattern: the nav is fully transparent at
   the top of the page so the body atmosphere shows through, then
   gains an opaque dark backdrop once the user scrolls past 20px.
   Kept the legacy always-on backdrop on legal pages was making the
   nav read heavier than zeno's, which is what the user pointed out. */
.legal-nav.on{
  background:rgba(0,0,0,.88);
  backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
  border-bottom-color:var(--bd);
}
/* Brand wordmark with flip-on-hover animation. Matches .hub-brand and
   .n-logo: two imgs (flip-front + flip-back), the front slides up and
   the back slides into place from below. */
.legal-brand{position:relative;display:inline-flex;align-items:center;overflow:hidden;height:28px;text-decoration:none}
.legal-brand img{height:28px;width:auto;display:block;transition:transform .35s cubic-bezier(.25,.25,0,1),opacity .35s cubic-bezier(.25,.25,0,1)}
.legal-brand img.flip-front{position:relative;z-index:2}
.legal-brand img.flip-back{position:absolute;top:0;left:0;z-index:1;transform:translate3d(0,100%,0);opacity:0;pointer-events:none}
.legal-brand:hover img.flip-front{transform:translate3d(0,-100%,0);opacity:0}
.legal-brand:hover img.flip-back{transform:translate3d(0,0,0);opacity:1}
/* Centered page title in the nav (Studios / Blog). The flex layout's
   space-between distributes brand-left / title-center / back-right. */
.legal-nav__title{
  font-family:var(--ff);
  font-size:14px;font-weight:400;letter-spacing:.04em;
  color:#fff;
  /* Sit on the optical center even if brand and back have different widths */
  position:absolute;left:50%;top:50%;
  transform:translate(-50%,-50%);
  text-decoration:none;
  cursor:pointer;
  transition:opacity .25s;
}
.legal-nav__title:hover{opacity:.7}
/* Nav back link — text flip animation on hover (matches main site pattern) */
.legal-back{
  font-size:13px;font-weight:300;color:var(--f2);text-decoration:none;
  letter-spacing:.03em;
  position:relative;display:inline-flex;align-items:center;
  overflow:hidden;line-height:1.3;height:1.3em;
  transition:color .25s;
}
.legal-back__text,
.legal-back[data-hover]::after{
  display:inline-block;transition:transform .35s cubic-bezier(.25,.25,0,1),opacity .35s cubic-bezier(.25,.25,0,1);
  position:relative;
}
.legal-back[data-hover]::after{
  content:attr(data-hover);
  position:absolute;left:0;top:100%;
  color:#fff;
  white-space:nowrap;
}
.legal-back:hover .legal-back__text{transform:translateY(-100%);opacity:0}
.legal-back:hover::after{transform:translateY(-100%);opacity:1}
.legal-back:hover{color:#fff}
/* Nav CTA placeholder, real declaration lives below the .btn rules
   so it can override border-radius / font-size / font-weight without
   a specificity hack. */

/* Page wrap */
.legal-wrap{
  max-width:780px;margin:0 auto;
  padding:140px clamp(20px,5vw,40px) 96px;
  position:relative;
}
.legal-glow{
  position:absolute;top:80px;left:50%;
  width:min(600px,80vw);height:280px;
  background:radial-gradient(ellipse,rgba(40,63,255,.22),transparent 65%);
  filter:blur(60px);
  transform:translateX(-50%);
  pointer-events:none;z-index:-1;
}

/* Page-spanning ambient blue atmosphere. Three layered radial gradients
   sit behind everything as a fixed full-viewport layer so the same blue
   light connects the hero, the body, and the footer into one continuous
   lit page. Used on case-study pages (body.case-page) and legal pages
   (body.legal-page). Lives in legal.css so any page that loads legal.css
   can opt in by adding the class - no per-page CSS needed. */
body.case-page,
body.legal-page{
  background:#000;
  position:relative;
  min-height:100vh;
  overflow-x:hidden;
}
body.case-page::before,
body.legal-page::before{
  content:"";
  position:fixed;
  inset:0;
  z-index:-1;
  pointer-events:none;
  background:
    radial-gradient(60vw 60vh at 50% 0%, rgba(40,63,255,.32), transparent 70%),
    radial-gradient(80vw 80vh at 50% 60%, rgba(10,30,160,.18), transparent 75%),
    radial-gradient(100vw 80vh at 50% 100%, rgba(40,63,255,.16), transparent 70%),
    #000;
  filter:blur(20px);
}
/* Legal pages use the existing .legal-glow ellipse near the heading,
   which sits on top of the body atmosphere - both are intentional and
   composite cleanly. */

/* Heading block */
.legal-kicker{
  display:inline-block;
  font-size:11px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;
  color:var(--f3);margin-bottom:14px;
}
.legal-wrap h1{
  font-family:var(--ff);
  font-size:clamp(40px,6vw,68px);
  font-weight:200;letter-spacing:-.02em;line-height:1.05;
  margin-bottom:14px;
}
.legal-wrap h1 .grad{
  background:var(--G);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
  background-size:200%;
  animation:gradShift 6s ease infinite;
  font-weight:400;
}
@keyframes gradShift{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}
.legal-sub{
  font-size:13px;letter-spacing:.06em;text-transform:uppercase;
  color:var(--f3);margin-bottom:56px;
}

/* Section headings */
.legal-wrap h2{
  font-family:var(--ff);
  font-size:clamp(20px,2vw,26px);
  font-weight:400;letter-spacing:-.005em;line-height:1.25;
  color:#fff;
  margin:48px 0 14px;
  padding-top:24px;
  border-top:1px solid var(--bd);
}
.legal-wrap h2:first-of-type{padding-top:0;border-top:0;margin-top:0}
.legal-wrap h3{
  font-family:var(--ff);
  font-size:15px;font-weight:500;letter-spacing:.005em;line-height:1.4;
  color:#fff;margin:24px 0 8px;
}

/* Body text */
.legal-wrap p{color:var(--f2);margin-bottom:16px;font-weight:300}
.legal-wrap p strong,.legal-wrap li strong{color:#fff;font-weight:500}
.legal-wrap ul{color:var(--f2);margin:0 0 16px 0;padding-left:22px;font-weight:300}
.legal-wrap li{margin-bottom:8px}
.legal-wrap a{color:#46FF81;text-decoration:none;border-bottom:1px solid rgba(70,255,129,.3);transition:color .2s,border-color .2s}
.legal-wrap a:hover{color:#fff;border-bottom-color:rgba(255,255,255,.5)}

/* Footer — mirrors the main site footer exactly */
.legal-footer{
  padding:20px clamp(24px,7vw,120px);
  border-top:1px solid var(--bd);
  display:grid;grid-template-columns:1fr auto 1fr;gap:24px;align-items:center;
}
/* When the footer sits inside the hub-body flex column: prevent it from
   shrinking below its content height. Padding stays at the canonical
   .legal-footer values so the home footer matches blog/studios/etc. exactly. */
.hub-body > .legal-footer{flex-shrink:0}
.foot-col-l{display:flex;align-items:center;gap:16px;justify-content:flex-start}
.foot-col-r{display:flex;align-items:center;justify-content:flex-end}
/* Footer brand wordmark: same flip-on-hover pattern as the nav brand,
   slightly smaller (22px) and dimmed at rest (opacity .55). */
/* Footer xix3D logo hidden site-wide. Markup stays in each page so
   any inbound update doesn't require re-adding it. */
.foot-logo{display:none}
.foot-copy{font-size:11px;color:rgba(255,255,255,.42);white-space:nowrap}
.foot-socials{display:flex;list-style:none;margin:0;padding:0;align-items:center;justify-content:flex-end;gap:10px}
.foot-socials a{display:flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:50%;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.1);color:rgba(255,255,255,.7);text-decoration:none;transition:background .2s,border-color .2s,color .2s,transform .2s}
.foot-socials a:hover,.foot-socials a:active{background:#fff;border-color:#fff;color:#000;transform:translateY(-2px)}
.foot-socials svg{width:14px;height:14px;display:block}
.foot-legal-row{display:flex;justify-content:center;gap:18px;flex-wrap:wrap}
/* Privacy / Terms / Refund Policy — text flip on hover (matches the
   .legal-back / .n-links a pattern). data-hover holds the second-state
   label which slides up from below as the original slides up out. */
.foot-legal-row a{
  font-size:11px;color:rgba(255,255,255,.45);text-decoration:none;letter-spacing:.02em;
  white-space:nowrap;
  position:relative;display:inline-flex;align-items:center;
  overflow:hidden;line-height:1.4;height:1.4em;
  transition:color .25s;
}
.foot-legal-row a > span,
.foot-legal-row a[data-hover]::after{
  display:inline-block;
  transition:transform .35s cubic-bezier(.25,.25,0,1),opacity .35s cubic-bezier(.25,.25,0,1);
  position:relative;
}
.foot-legal-row a[data-hover]::after{
  content:attr(data-hover);
  position:absolute;left:0;top:100%;
  color:rgba(255,255,255,.85);
  white-space:nowrap;
}
.foot-legal-row a[data-hover]:hover > span{transform:translateY(-100%);opacity:0}
.foot-legal-row a[data-hover]:hover::after{transform:translateY(-100%);opacity:1}
.foot-legal-row a:hover{color:rgba(255,255,255,.85)}

/* === Back-to-top button — fixed bottom-right, fades in after scrolling
   400px, click smoothly scrolls to top. Pure CSS for the visual; JS toggles
   .is-visible on scroll. Lives in every page that opts in by including the
   <button class="to-top"> markup. Hover uses the same radial-fill recipe
   as the site's main .btn system: a white circle scales from the cursor's
   entry position. cursor.js wires --btn-x/--btn-y on mouseenter/leave. === */
.to-top{
  position:fixed;
  right:clamp(16px,2.5vw,32px);
  bottom:clamp(16px,2.5vw,32px);
  z-index:60;
  width:48px;height:48px;
  display:flex;align-items:center;justify-content:center;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.18);
  border-radius:50%;
  color:#fff;cursor:pointer;
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  /* overflow:hidden + isolation:isolate keep the radial fill clipped to
     the circular button silhouette while letting backdrop-filter still
     work on the visible portion. */
  overflow:hidden;
  isolation:isolate;
  opacity:0;visibility:hidden;transform:translateY(8px);
  transition:opacity .35s ease,transform .35s cubic-bezier(.25,.25,0,1),border-color .25s,color .25s,visibility 0s linear .35s;
}
.to-top.is-visible{
  opacity:1;visibility:visible;transform:translateY(0);
  transition:opacity .35s ease,transform .35s cubic-bezier(.25,.25,0,1),border-color .25s,color .25s,visibility 0s;
}
/* Radial fill - white circle anchored at cursor position, scales from
   0 to fully cover the button on hover. .85s on the way in (slow,
   deliberate), .55s on the way out (snappier retraction). */
.to-top::before{
  content:"";
  position:absolute;
  top:var(--btn-y,50%);
  left:var(--btn-x,50%);
  width:250%;
  aspect-ratio:1/1;
  background:#fff;
  border-radius:50%;
  transform:translate(-50%,-50%) scale(0);
  transition:transform .55s cubic-bezier(.25,.25,0,1);
  pointer-events:none;
  z-index:0;
}
.to-top:hover::before{
  transform:translate(-50%,-50%) scale(1);
  transition-duration:.85s;
}
.to-top:hover{
  border-color:#fff;color:#000;
  transition-delay:.15s;
}
.to-top svg{
  width:18px;height:18px;display:block;
  position:relative;
  z-index:1;
}

@media(max-width:640px){
  .to-top{width:42px;height:42px;right:16px;bottom:16px}
  .to-top svg{width:16px;height:16px}
}

/* Mobile */
@media(max-width:640px){
  .legal-nav{padding:18px clamp(24px,7vw,120px)}
  .legal-back{font-size:12px}
  .legal-brand{height:28px}
  .legal-brand img{height:28px}
  .legal-nav__title{display:none}
  .legal-wrap{padding:110px 20px 64px}
  .legal-wrap h1{font-size:clamp(32px,9vw,44px)}
  .legal-sub{margin-bottom:40px;font-size:12px}
  .legal-wrap h2{font-size:18px;margin:36px 0 10px;padding-top:18px}
  .legal-footer{grid-template-columns:1fr;gap:14px;text-align:center;padding:24px clamp(24px,7vw,120px)}
  .foot-col-l,.foot-col-r,.foot-legal-row{justify-content:center}
  .foot-col-l{flex-direction:column;gap:8px}
}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .legal-wrap h1 .grad{animation:none}
}

/* ======== Site button system (port of main site .btn) ======== */
/* Use anywhere a clickable button is needed. Markup:
   <a class="btn btn-primary" data-hover="Hover text"><span class="btn__text">Default text</span></a>
   Variants: .btn-primary (white pill -> blue circle), .btn-outline (translucent -> white circle) */
.btn{
  --bg-color-default:transparent;
  --bg-color:var(--bg-color-default);
  --color-default:currentColor;
  --color-hover:var(--color-default);
  --color:var(--color-default);
  --circle-bg-color-default:#000;
  --circle-bg-color:var(--circle-bg-color-default);
  align-items:center;background-color:var(--bg-color);border-radius:999px;color:var(--color);
  display:inline-flex;font-family:var(--ff);font-size:14px;font-weight:500;letter-spacing:.02em;
  justify-content:center;padding:14px 28px;position:relative;text-align:center;text-decoration:none;
  transition:color .25s cubic-bezier(.25,.25,0,1),background-color .25s cubic-bezier(.25,.25,0,1);
  overflow:hidden;contain:content;transform:translateZ(0);z-index:1;min-width:160px;border:1px solid transparent;cursor:pointer;
}
.btn::before{
  background-color:var(--circle-bg-color);border-radius:50%;content:"";aspect-ratio:1/1;height:auto;padding:0;
  top:var(--btn-y,50%);left:var(--btn-x,50%);transform:translate(-50%,-50%) scale(0);
  transition:transform .55s cubic-bezier(.25,.25,0,1);
  width:250%;position:absolute;pointer-events:none;z-index:0;
}
.btn[data-hover]::after{
  color:var(--color-hover);content:attr(data-hover);opacity:0;padding:inherit;
  top:50%;left:50%;transform:translate(-50%,-50%) translate3d(0,100%,0);
  transition:transform .25s cubic-bezier(.25,.25,0,1),opacity .25s cubic-bezier(.25,.25,0,1);
  width:100%;position:absolute;pointer-events:none;z-index:1;
  display:flex;align-items:center;justify-content:center;
}
.btn__text{
  transition:transform .25s cubic-bezier(.25,.25,0,1),opacity .25s cubic-bezier(.25,.25,0,1);
  width:100%;position:relative;z-index:2;display:flex;align-items:center;justify-content:center;
}
.btn:hover::before{transform:translate(-50%,-50%) scale(1);transition-duration:.85s}
.btn:hover .btn__text{transform:translate3d(0,-100%,0);opacity:0}
.btn[data-hover]:hover::after{transform:translate(-50%,-50%) translate3d(0,0,0);opacity:1}
.btn:hover{background-color:var(--circle-bg-color);transition-delay:.15s}
.btn-primary{--color-default:#000;--color-hover:#fff;--bg-color-default:#fff;--bg-color:#fff;--circle-bg-color-default:#283fff;--circle-bg-color:#283fff}
/* Nav CTA pill. Sits AFTER .btn so the cascade wins without a
   specificity hack. Ports the .btn-nav-g spec from zeno.html (line
   174) line-for-line: 10px radius rectangle (not 999px capsule),
   13px / 400-weight type, .04em letter-spacing, 12px 20px padding,
   no min-width. The base .btn declares conflicting values for every
   one of those, so all six properties have to be overridden. */
.legal-nav__cta{
  min-width:auto;
  padding:12px 20px;
  border-radius:10px;
  font-size:13px;
  font-weight:400;
  letter-spacing:.04em;
}
@media(max-width:640px){
  .legal-nav__cta{padding:10px 16px;font-size:12px}
}
.btn-outline{
  --color-default:#fff;--color-hover:#000;
  --bg-color-default:rgba(0,0,0,.4);--bg-color:rgba(0,0,0,.4);
  --circle-bg-color-default:#fff;--circle-bg-color:#fff;
  border-color:rgba(255,255,255,.28);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
}

/* ======== Blog ======== */

/* Match main site's horizontal padding: clamp(24px,7vw,120px) on each side, no max-width cap */
.blog-wrap{margin:0 auto;padding:110px clamp(24px,7vw,120px) 80px;position:relative}

/* No section glow on blog — keeping it clean like the old site */
.blog-wrap .legal-glow{display:none}

/* Hero block — image fills the full card; text floats over it on the left,
   blue radial gradient sits on top of the image so the text reads cleanly */
.blog-hero{
  position:relative;
  margin-bottom:64px;
  min-height:380px;
  border-radius:30px;overflow:hidden;
  background:#0a0a0a;
}
.blog-hero__copy{
  position:relative;z-index:4;
  display:flex;flex-direction:column;justify-content:center;
  padding:48px 64px;
  max-width:55%;
  min-height:380px;
}
/* Much darker black fade sits behind the blue, anchored top-left */
.blog-hero::before{
  content:"";position:absolute;inset:0;z-index:2;
  background:radial-gradient(75vw at 0 0,#000 0%,rgba(0,0,0,.98) 35%,rgba(0,0,0,.85) 55%,rgba(0,0,0,.4) 75%,transparent 95%);
  pointer-events:none;
}
/* Blue radial gradient drawn on top of the black, behind the text */
.blog-hero::after{
  content:"";position:absolute;inset:0;z-index:3;
  background:radial-gradient(50vw at 0 0,rgba(0,10,80,.92),rgba(10,30,160,.55) 30%,transparent 65%);
  pointer-events:none;
}
.blog-hero__title{
  font-family:var(--ff);
  font-size:clamp(40px,6vw,68px);
  font-weight:200;letter-spacing:-.02em;line-height:1.05;
  margin-bottom:20px;
  color:#fff;
}
.blog-hero__text{
  font-family:var(--ff);
  font-size:clamp(15px,1.2vw,17px);font-weight:300;line-height:1.7;
  color:var(--f2);
}
/* Image fills the entire card (full-bleed), behind everything */
.blog-hero__img-wrap{
  position:absolute;inset:0;z-index:1;
}
.blog-hero__img{
  width:100%;height:100%;
}
.blog-hero__img img{
  width:100%;height:100%;
  object-fit:cover;
  object-position:0% 50%;
  display:block;
  transform:scale(1.3) translate(12%,-22%);
  transform-origin:100% top;
}

/* Section label between hero and grid */
.blog-section-label{
  display:flex;align-items:center;gap:18px;
  font-size:11px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;
  color:var(--f3);margin-bottom:32px;
}
.blog-section-label::after{
  content:"";flex:1;height:1px;background:linear-gradient(90deg,var(--bd),transparent);
}

/* Card grid */
.blog-grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:48px 32px;
  list-style:none;margin:0;padding:0;
}
.blog-grid__item{
  margin:0;padding:0;list-style:none;
  animation:blogFadeUp .7s cubic-bezier(.2,.8,.2,1) both;
  display:flex;
}
.blog-grid__item:nth-child(1){animation-delay:.05s}
.blog-grid__item:nth-child(2){animation-delay:.12s}
.blog-grid__item:nth-child(3){animation-delay:.19s}
.blog-grid__item:nth-child(4){animation-delay:.26s}

/* Card - matches the case-study prev/next card system (.case__next-link).
   Brand-blue tinted at rest with a real lifted shadow so the cards read
   as obvious tap targets even before hover; deeper on hover. Same
   colour vocabulary as the .case__cta panel and the home-page card
   hover ring, so the blog feels like part of the same surface. */
.blog-card{
  display:flex;flex-direction:column;width:100%;
  text-decoration:none;color:inherit;
  position:relative;
  background:
    radial-gradient(120% 140% at 0% 0%, rgba(68,204,255,.10), transparent 55%),
    radial-gradient(120% 140% at 100% 100%, rgba(40,63,255,.16), transparent 55%),
    linear-gradient(180deg, rgba(28,38,78,.55), rgba(14,22,52,.78));
  border:1px solid rgba(68,204,255,.30);
  -webkit-backdrop-filter:blur(28px) saturate(1.2);
  backdrop-filter:blur(28px) saturate(1.2);
  border-radius:15px;overflow:hidden;overflow:clip;
  box-shadow:
    0 0 0 1px rgba(255,255,255,.04) inset,
    0 14px 36px rgba(40,63,255,.18),
    0 4px 14px rgba(68,204,255,.08);
  transition:transform .5s cubic-bezier(.2,.8,.2,1),background .4s,border-color .25s,box-shadow .35s;
}
.blog-card:hover{
  transform:translateY(-4px);
  background:
    radial-gradient(120% 140% at 0% 0%, rgba(68,204,255,.18), transparent 55%),
    radial-gradient(120% 140% at 100% 100%, rgba(40,63,255,.28), transparent 55%),
    linear-gradient(180deg, rgba(40,52,100,.65), rgba(20,32,72,.85));
  border-color:rgba(68,204,255,.6);
  box-shadow:
    0 0 0 1px rgba(255,255,255,.06) inset,
    0 22px 56px rgba(40,63,255,.32),
    0 8px 24px rgba(68,204,255,.18);
}

/* Image with subtle vignette that lifts on hover */
.blog-card__img{
  width:100%;aspect-ratio:1034/640;overflow:hidden;
  background:#0a0a0a;
  position:relative;z-index:1;
}
.blog-card__img::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(0,0,0,.15) 0%,rgba(0,0,0,0) 30%,rgba(0,0,0,0) 70%,rgba(0,0,0,.25) 100%);
  opacity:1;transition:opacity .45s;
  pointer-events:none;
}
.blog-card:hover .blog-card__img::after{opacity:.4}
.blog-card__img img{
  width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .9s cubic-bezier(.25,.25,0,1);
}
.blog-card:hover .blog-card__img img{transform:scale(1.05)}

/* Card content area sits directly on the brand-tinted card surface;
   no extra frost layer needed since the parent card already provides
   the visual surface. Lighter padding so the card reads tighter. */
.blog-card__content{
  background:transparent;
  padding:28px;position:relative;z-index:1;
  display:flex;flex-direction:column;flex:1;
}
.blog-card__title{
  font-family:var(--ff);
  font-size:22px;
  font-weight:400;letter-spacing:-.01em;line-height:1.25;
  color:#fff;margin-bottom:12px;
  transition:color .25s;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
  min-height:55px;
}
.blog-card__text{
  color:var(--f2);font-size:14px;line-height:1.6;font-weight:300;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
  margin-bottom:0;
}

/* Arrow circle — outlined ghost button at rest, fills on hover (matches old site) */
.blog-card__arrow{
  position:absolute;bottom:32px;right:28px;
  width:48px;height:48px;border-radius:50%;
  background:transparent;
  border:1px solid rgba(255,255,255,.18);
  color:rgba(255,255,255,.7);
  display:flex;align-items:center;justify-content:center;
  transition:background .4s cubic-bezier(.2,.8,.2,1),border-color .4s,color .35s,transform .45s cubic-bezier(.2,.8,.2,1);
  flex-shrink:0;
}
.blog-card__arrow svg{
  width:16px;height:16px;display:block;
  transition:transform .5s cubic-bezier(.2,.8,.2,1);
}
.blog-card:hover .blog-card__arrow{
  background:#fff;
  border-color:#fff;
  color:#000;
  transform:scale(1.05);
}
.blog-card:hover .blog-card__arrow svg{
  transform:translate(3px,-3px);
}
/* Subtle meta strip below the body — small, single line */
.blog-card__meta{
  display:flex;align-items:center;gap:10px;
  margin-top:auto;padding-top:16px;padding-right:64px;
  font-size:11px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;
  color:var(--f3);
}
.blog-card__tag{
  font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  color:var(--f3);
  transition:color .25s;
}
.blog-card:hover .blog-card__tag{color:#46FF81}
.blog-card__meta-dot{width:3px;height:3px;border-radius:50%;background:var(--f3);opacity:.5;flex-shrink:0}
.blog-card__readtime{display:inline-flex;font-size:11px;letter-spacing:.12em;font-weight:500;color:var(--f3)}

/* Tag filter row above the grid — centered, no leading label */
.blog-tag-filter{
  display:flex;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap;
  margin-bottom:48px;
}
.blog-tag-filter__label{
  font-size:11px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;
  color:var(--f3);margin-right:4px;
}
.blog-tag-btn{
  font-family:var(--ff);
  display:inline-flex;align-items:center;
  padding:7px 14px;border-radius:999px;
  background:rgba(255,255,255,.03);
  color:var(--f2);
  font-size:12px;font-weight:500;letter-spacing:.04em;
  border:1px solid var(--bd);
  cursor:pointer;
  transition:background .25s,color .25s,border-color .25s,transform .2s;
}
.blog-tag-btn:hover{background:rgba(255,255,255,.06);color:#fff;border-color:rgba(255,255,255,.18)}
.blog-tag-btn.is-active{
  background:linear-gradient(90deg,rgba(70,255,129,.15),rgba(40,63,255,.15));
  color:#fff;border-color:rgba(70,255,129,.4);
}

/* Hide non-matching cards when a tag is active */
.blog-grid.is-filtered .blog-grid__item.is-hidden{display:none}

/* === Article page — meta + author + related + CTA === */

/* Hero meta strip (overlaid on article hero) */
.blog-article-hero__meta{
  position:absolute;left:0;right:0;bottom:0;z-index:2;
  max-width:1100px;margin:0 auto;
  padding:0 clamp(20px,5vw,40px) 24px;
  display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  font-size:12px;font-weight:500;letter-spacing:.06em;
  color:rgba(255,255,255,.85);
}
.blog-article-hero__tag{
  display:inline-block;padding:4px 10px;border-radius:999px;
  background:rgba(70,255,129,.12);color:#46FF81;
  font-size:10px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;
  border:1px solid rgba(70,255,129,.25);
}
.blog-article-hero__meta-dot{width:3px;height:3px;border-radius:50%;background:rgba(255,255,255,.5)}

/* Author block in article intro */
.blog-article-author{
  display:flex;align-items:center;gap:12px;
  margin-bottom:8px;
}
.blog-article-author__avatar{
  width:40px;height:40px;border-radius:50%;
  background:var(--G);background-size:200%;
  animation:gradShift 6s ease infinite;
  display:flex;align-items:center;justify-content:center;
  color:#000;font-weight:700;font-size:14px;letter-spacing:.04em;
  flex-shrink:0;
}
.blog-article-author__meta{display:flex;flex-direction:column;line-height:1.3}
.blog-article-author__name{font-size:14px;color:#fff;font-weight:500}
.blog-article-author__role{font-size:12px;color:var(--f3)}

.blog-article-intro__meta-row{display:flex;flex-direction:column;gap:18px}
.blog-article-intro__meta-block{display:flex;flex-direction:column}

/* End-of-article CTA - Try Zeno.
   Same brand-blue lit panel pattern as .case__cta on the partner case
   studies. Full container width within .blog-article-wrap, generous
   padding, large 200-weight headline that matches the site's H1 tier,
   and an arrow-pill button styled to match the .case__cta-email
   close-button. The body atmosphere already provides ambient blue;
   this panel adds a brighter, more saturated accent on top. */
.blog-article-cta{
  margin:64px 0 0;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:28px;
  padding:clamp(40px,5vw,72px) clamp(24px,4vw,48px);
  text-align:center;
  border-radius:18px;
  background:
    radial-gradient(80% 120% at 0% 0%, rgba(70,255,129,.10), transparent 55%),
    radial-gradient(90% 120% at 100% 0%, rgba(68,204,255,.18), transparent 60%),
    radial-gradient(80% 120% at 50% 100%, rgba(40,63,255,.28), transparent 65%),
    linear-gradient(180deg, rgba(20,28,68,.55), rgba(10,18,52,.75));
  border:1px solid rgba(68,204,255,.32);
  -webkit-backdrop-filter:blur(28px) saturate(1.2);
  backdrop-filter:blur(28px) saturate(1.2);
  box-shadow:
    0 0 0 1px rgba(255,255,255,.04) inset,
    0 24px 60px rgba(40,63,255,.22),
    0 8px 24px rgba(68,204,255,.10);
  position:relative;
  overflow:hidden;
  isolation:isolate;
}
.blog-article-cta__kicker{
  display:inline-block;font-size:11px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;
  color:rgba(68,204,255,.85);margin:0;
}
.blog-article-cta__title{
  font-family:var(--ff);
  font-size:clamp(32px,4.4vw,56px);
  font-weight:200;letter-spacing:-.02em;line-height:1.05;
  color:#fff;
  margin:0;
  max-width:18ch;
  text-wrap:balance;
  text-shadow:0 2px 24px rgba(0,0,0,.35);
}
.blog-article-cta__title .grad{
  background:var(--G);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
  background-size:200%;
  animation:gradShift 6s ease infinite;
  font-weight:400;
}
.blog-article-cta__text{
  font-size:clamp(15px,1.3vw,17px);
  font-weight:300;
  line-height:1.6;
  color:var(--f2);
  margin:0;
  max-width:48ch;
}
/* CTA button uses the site .btn / .btn-primary system as-is: white pill
   that fills with brand-blue on hover, with a text-flip animation
   (.btn__text scales out / data-hover label scales in). Don't override
   the .btn system here - that's how the rest of the site behaves and
   the blog should match. The previous override added an arrow ::after
   that clobbered the data-hover ::after, breaking the flip. */

/* Related articles block */
.blog-related{
  max-width:1100px;margin:80px auto 0;
  padding:0 clamp(20px,5vw,40px);
}
.blog-related__label{
  display:flex;align-items:center;gap:18px;
  font-size:11px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;
  color:var(--f3);margin-bottom:24px;
}
.blog-related__label::after{content:"";flex:1;height:1px;background:linear-gradient(90deg,var(--bd),transparent)}
.blog-related__grid{
  display:grid;grid-template-columns:repeat(2,1fr);gap:24px;
  list-style:none;margin:0;padding:0;
}
.blog-related__grid li,
.blog-related__grid .blog-grid__item{margin:0;list-style:none;display:flex}

@keyframes blogFadeUp{
  0%{opacity:0;transform:translateY(20px)}
  100%{opacity:1;transform:translateY(0)}
}

/* Article: full-bleed hero, title overlay, sidebar with date, body */
.blog-article-hero{
  position:relative;width:100%;height:60vh;min-height:420px;max-height:680px;
  overflow:hidden;background:#0a0a0a;
}
.blog-article-hero img{width:100%;height:100%;object-fit:cover;display:block}
.blog-article-hero::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(0,0,0,.35) 0%,rgba(0,0,0,.1) 40%,rgba(0,0,0,.85) 100%);
}
.blog-article-hero__title{
  position:absolute;left:0;right:0;bottom:48px;z-index:2;
  max-width:1100px;margin:0 auto;padding:0 clamp(20px,5vw,40px);
  font-family:var(--ff);
  font-size:clamp(34px,5.5vw,64px);
  font-weight:200;letter-spacing:-.02em;line-height:1.05;
  color:#fff;text-shadow:0 4px 30px rgba(0,0,0,.6);
}
.blog-article-hero__title .grad{
  background:var(--G);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
  background-size:200%;
  animation:gradShift 6s ease infinite;
  font-weight:400;
}

.blog-article-wrap{
  max-width:1100px;margin:0 auto;
  padding:64px clamp(20px,5vw,40px) 96px;
}
.blog-article-intro{
  display:grid;grid-template-columns:1fr 220px;gap:48px;align-items:start;
  padding-bottom:48px;margin-bottom:48px;
  border-bottom:1px solid var(--bd);
}
.blog-article-intro__lead{
  font-size:19px;line-height:1.65;color:rgba(255,255,255,.88);font-weight:400;
}
.blog-article-intro__meta-label{
  font-size:11px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;
  color:var(--f3);margin-bottom:8px;
}
.blog-article-intro__meta-value{
  font-size:15px;color:#fff;font-weight:400;
}

.blog-article-body{max-width:820px;margin:0 auto;font-size:17px;line-height:1.7;color:rgba(255,255,255,.85)}
.blog-article-body p{color:rgba(255,255,255,.85);margin-bottom:18px;font-weight:400}
.blog-article-body h2{
  font-family:var(--ff);
  font-size:clamp(22px,2.4vw,30px);
  font-weight:400;letter-spacing:-.005em;line-height:1.25;
  color:#fff;margin:48px 0 14px;padding-top:24px;
  border-top:1px solid var(--bd);
}
.blog-article-body h2:first-child{padding-top:0;border-top:0;margin-top:0}
.blog-article-body h3{
  font-family:var(--ff);
  font-size:17px;font-weight:500;letter-spacing:.005em;line-height:1.4;
  color:#fff;margin:28px 0 10px;
}
.blog-article-body a{color:#46FF81;text-decoration:none;border-bottom:1px solid rgba(70,255,129,.3);transition:color .2s,border-color .2s}
.blog-article-body a:hover{color:#fff;border-bottom-color:rgba(255,255,255,.5)}
.blog-article-body strong,.blog-article-body b{color:#fff;font-weight:600}

@media(max-width:1080px){
  .blog-grid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:840px){
  .blog-hero{
    margin-bottom:64px;min-height:480px;
    border-radius:24px;
  }
  .blog-hero__copy{padding:40px;text-align:center;align-items:center;max-width:100%;min-height:480px}
  .blog-hero__title{font-size:clamp(32px,9vw,44px);margin-bottom:14px}
  .blog-hero__text{font-size:14px;max-width:600px;line-height:1.65}
  .blog-hero::after{
    background:radial-gradient(60vw at 0 0,rgba(0,10,80,.92),rgba(10,30,160,.6) 40%,transparent 75%);
  }
  .blog-grid{grid-template-columns:1fr;gap:24px}
  .blog-article-intro{grid-template-columns:1fr;gap:24px;padding-bottom:36px;margin-bottom:36px}
  .blog-related__grid{grid-template-columns:1fr;gap:20px}
}
@media(max-width:640px){
  .blog-wrap{padding:110px 20px 64px}
  .blog-hero__title{font-size:clamp(38px,10vw,56px);margin-bottom:16px}
  .blog-hero__text{font-size:14px}
  .blog-article-hero{height:50vh;min-height:340px}
  .blog-article-hero__title{bottom:32px;font-size:clamp(26px,7vw,38px)}
  .blog-article-wrap{padding:40px 20px 64px}
  .blog-article-intro__lead{font-size:16px}
  .blog-article-body{font-size:16px}
  .blog-article-body p{margin-bottom:16px}
  .blog-article-body h2{font-size:20px;margin:36px 0 12px;padding-top:18px}
  .blog-article-body h3{font-size:16px;margin:22px 0 8px}
  .blog-card__content{-webkit-backdrop-filter:blur(32px);backdrop-filter:blur(32px);padding:28px 22px}
  .blog-card__arrow{bottom:28px;right:22px}
  .blog-card:hover{transform:translateY(-3px)}
  .blog-card:active{transform:translateY(-2px)}

  /* Blog CTA panel on mobile - tighter padding, smaller headline so
     "See your customer's car in any finish" doesn't dominate the
     viewport. Matches the .case__cta phone treatment. */
  .blog-article-cta{
    padding:clamp(36px,8vw,52px) clamp(20px,5vw,28px);
    gap:22px;
    border-radius:14px;
    margin-top:48px;
  }
  .blog-article-cta__title{
    font-size:clamp(26px,7vw,36px);
    max-width:24ch;
  }
  .blog-article-cta__text{font-size:15px;line-height:1.55}

  /* Related-articles label can run long; let it wrap. */
  .blog-related{margin-top:56px}
  .blog-related__label{font-size:10px}
}

@media(prefers-reduced-motion:reduce){
  .blog-hero,.blog-grid__item{animation:none}
  .blog-hero__img-wrap::before,.blog-card::before,.blog-card::after{animation:none}
  .blog-hero__img img{transition:none}
}

/* ======== Studios page (gallery-first) ======== */
/* Studios body: two-corner radial blue light + bottom-center halo (the
   original gallery-first treatment).
   Blog body: now shares the case/legal page atmosphere (top-anchored
   blue that connects hero -> body -> footer) for visual consistency
   with the partner case studies. The .blog-body class still drives
   color + overflow defaults; the page-spanning glow is delivered by
   body.legal-page in the shared atmosphere block earlier in this file
   - blog HTML carries both classes. */
.studios-body{
  color:#fff;overflow-x:hidden;
  position:relative;
  background:
    radial-gradient(ellipse 70vw 80vh at 0% 100%, #5b8bff 0%, #124DF1 18%, rgba(18,77,241,.4) 45%, rgba(18,77,241,0) 70%),
    radial-gradient(ellipse 70vw 80vh at 100% 100%, #5b8bff 0%, #124DF1 18%, rgba(18,77,241,.4) 45%, rgba(18,77,241,0) 70%),
    radial-gradient(ellipse 130vw 90vh at 50% 110%, #124DF1 0%, rgba(18,77,241,.35) 40%, rgba(18,77,241,0) 75%),
    #02020A;
  background-attachment:fixed;
}
.blog-body{
  color:#fff;overflow-x:hidden;
}

/* === Top-of-page hero: single full-bleed shot, no headline overlay === */
.gallery-hero{
  position:relative;height:100vh;width:100%;
  overflow:hidden;background:#000;
}
.gallery-hero__media{position:absolute;inset:0;z-index:0}
.gallery-hero__media img,
.gallery-hero__media video{width:100%;height:100%;object-fit:cover;display:block}
.gallery-hero__media::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(0,0,0,.25) 0%,rgba(0,0,0,0) 30%,rgba(0,0,0,.45) 100%);
  pointer-events:none;
}
.gallery-hero__scroll{
  position:absolute;left:50%;bottom:48px;transform:translateX(-50%);z-index:2;
  width:24px;height:36px;
}
.gallery-hero__scroll svg{width:100%;height:100%}
.gallery-hero__scroll-dot{animation:scrollDot 1.8s ease-in-out infinite}

/* === The "by" line — single declarative sentence === */
.gallery-tagline{
  padding:120px clamp(24px,5vw,48px) 80px;
  max-width:1200px;margin:0 auto;
  text-align:center;
}
.gallery-tagline p{
  font-family:var(--ff);
  font-size:clamp(28px,3.5vw,48px);
  font-weight:200;letter-spacing:-.015em;line-height:1.2;
  color:#fff;
}
.gallery-tagline em{
  background:var(--G);background-size:200%;
  animation:gradShift 6s ease infinite;
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
  font-style:normal;font-weight:400;
}

/* === Section header: "Selected projects" === */
.gallery-section-label{
  display:flex;align-items:center;gap:24px;
  max-width:1600px;margin:0 auto;
  padding:0 clamp(24px,5vw,48px) 32px;
  font-size:11px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;
  color:var(--f3);
}
.gallery-section-label::after{
  content:"";flex:1;height:1px;background:linear-gradient(90deg,var(--bd),transparent);
}

/* === Gallery rows — variable layouts === */
.gallery{
  display:flex;flex-direction:column;gap:96px;
  padding:0 clamp(24px,5vw,48px) 0;
  max-width:1600px;margin:0 auto 120px;
}
.gallery-row{display:grid;gap:16px}

/* Single full-width row — for headline pieces */
.gallery-row--single{grid-template-columns:1fr}
.gallery-row--single .gallery-tile{aspect-ratio:16/7}

/* Two-up: 60/40 split */
.gallery-row--two-l{grid-template-columns:1.5fr 1fr}
.gallery-row--two-r{grid-template-columns:1fr 1.5fr}
.gallery-row--two-l .gallery-tile,
.gallery-row--two-r .gallery-tile{aspect-ratio:auto;height:100%}
.gallery-row--two-l,
.gallery-row--two-r{aspect-ratio:16/8}

/* Three-up: tall left + 2 stacked right.
   Row sizes itself to a fixed aspect ratio so the tall tile and the stacked
   pair line up cleanly without ambiguous grid heights. */
.gallery-row--three{
  grid-template-columns:1.4fr 1fr;grid-template-rows:1fr 1fr;
  gap:24px;
  aspect-ratio:18/11;
}
.gallery-row--three .gallery-tile{aspect-ratio:auto;height:100%}
.gallery-row--three .gallery-tile:nth-child(1){grid-row:1/3}

/* Tile */
.gallery-tile{
  position:relative;display:block;width:100%;
  border-radius:12px;overflow:hidden;
  text-decoration:none;color:inherit;
  background:#0a0a0a;cursor:pointer;
  border:0;padding:0;
  font-family:inherit;
}
.gallery-tile picture,
.gallery-tile img,
.gallery-tile video{
  position:absolute;inset:0;
  width:100%;height:100%;
  object-fit:cover;display:block;
  transition:transform 1s cubic-bezier(.25,.25,0,1),filter .55s;
  filter:saturate(.92);
}
.gallery-tile::after{
  content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(180deg,transparent 50%,rgba(0,0,0,.5) 100%);
  opacity:0;transition:opacity .35s;pointer-events:none;
}
.gallery-tile:hover img,
.gallery-tile:hover video{transform:scale(1.04);filter:saturate(1.05)}
.gallery-tile:hover::after{opacity:1}

/* Hover-revealed caption (museum placard) */
.gallery-tile__caption{
  position:absolute;left:24px;bottom:24px;z-index:2;
  display:flex;flex-direction:column;gap:4px;
  opacity:0;transform:translateY(8px);
  transition:opacity .35s cubic-bezier(.25,.25,0,1),transform .35s cubic-bezier(.25,.25,0,1);
  pointer-events:none;
}
.gallery-tile:hover .gallery-tile__caption{opacity:1;transform:translateY(0)}
.gallery-tile__client{
  font-family:var(--ff);
  font-size:18px;font-weight:400;letter-spacing:-.005em;line-height:1.2;
  color:#fff;
}
.gallery-tile__meta{
  font-size:11px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;
  color:rgba(255,255,255,.65);
}
/* Play icon for video tiles */
.gallery-tile__play{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:64px;height:64px;border-radius:50%;
  background:rgba(255,255,255,.92);
  display:flex;align-items:center;justify-content:center;
  z-index:2;
  opacity:0;
  transition:opacity .35s,transform .55s cubic-bezier(.25,.25,0,1);
}
.gallery-tile--video .gallery-tile__play{opacity:1}
.gallery-tile--video:hover .gallery-tile__play{transform:translate(-50%,-50%) scale(1.08);background:#fff}
.gallery-tile__play svg{width:18px;height:18px;display:block;color:#000;margin-left:3px}

/* === Case sections — Fuze-style: header (number / client / meta) + asymmetric
   media mosaic per project. Each case has 1 hero tile from real assets, and
   1-2 placeholder tiles indicating where supporting media will go. === */
.case{
  max-width:1600px;margin:0 auto;
  padding:0 clamp(24px,5vw,48px);
  margin-bottom:120px;
}
.case--intro{margin-bottom:80px}
.case__header{
  display:grid;
  grid-template-columns:auto 1fr auto;
  align-items:baseline;
  gap:24px;
  margin-bottom:24px;
  padding-bottom:16px;
  border-bottom:1px solid var(--bd);
}
.case__num{
  font-size:11px;font-weight:600;letter-spacing:.22em;
  color:var(--f3);
  font-variant-numeric:tabular-nums;
}
.case__client{
  font-family:var(--ff);
  font-size:clamp(28px,3.6vw,52px);
  font-weight:300;letter-spacing:-.015em;line-height:1;
  color:#fff;
  margin:0;
}
.case__meta{
  font-size:11px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;
  color:var(--f2);
  text-align:right;
}

/* Mosaic — base: CSS grid, 16px gutter, base height ~520px so layouts feel
   substantial without being viewport-eating */
.case__mosaic{
  display:grid;
  gap:16px;
}
/* Layout SINGLE — one big hero (showreel intro) */
.case__mosaic--single{
  grid-template-columns:1fr;
}
.case__mosaic--single .case__tile{aspect-ratio:16/8}
/* Layout A — 1 hero (full width top) + 2 placeholders below (50/50) */
.case__mosaic--a{
  grid-template-columns:1fr 1fr;
  grid-template-rows:auto auto;
}
.case__mosaic--a .case__tile--hero{
  grid-column:1/-1;
  aspect-ratio:16/7.5;
}
.case__mosaic--a .case__tile--placeholder{aspect-ratio:16/10}
/* Layout B — small left + big right (1fr / 2fr) */
.case__mosaic--b{
  grid-template-columns:1fr 2fr;
  aspect-ratio:18/8;
}
.case__mosaic--b > *{aspect-ratio:auto;height:100%}
/* Layout C — 2 placeholders top, hero spans full bottom */
.case__mosaic--c{
  grid-template-columns:1fr 1fr;
  grid-template-rows:auto auto;
}
.case__mosaic--c .case__tile--hero{
  grid-column:1/-1;
  aspect-ratio:16/7.5;
}
.case__mosaic--c .case__tile--placeholder{aspect-ratio:16/9}
/* Layout D — 3 across, hero in middle (slightly bigger) */
.case__mosaic--d{
  grid-template-columns:1fr 1.4fr 1fr;
  aspect-ratio:18/7;
}
.case__mosaic--d > *{aspect-ratio:auto;height:100%}

/* Tile reset/share — case tiles use the same .gallery-tile chrome (lightbox
   click, hover scale, play button) but we override aspect-ratio via mosaic. */
.case__tile{
  position:relative;
  border-radius:12px;
  overflow:hidden;
  background:#0a0a0a;
  width:100%;
}
/* Placeholder tile — clearly intentional empty slot, not a broken image */
.case__tile--placeholder{
  border:1px dashed rgba(255,255,255,.12);
  background:
    linear-gradient(135deg,rgba(255,255,255,.015) 0%,rgba(255,255,255,0) 100%),
    #0a0a0a;
  display:flex;align-items:center;justify-content:center;
  color:rgba(255,255,255,.28);
  font-size:11px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;
  text-align:center;
  transition:border-color .35s,color .35s;
}
.case__tile--placeholder:hover{
  border-color:rgba(255,255,255,.22);
  color:rgba(255,255,255,.5);
}
.case__tile-label{padding:0 16px;line-height:1.4}

/* Mobile: every layout collapses to a single column. Placeholders shrink so
   they don't eat scroll budget. */
@media (max-width:860px){
  .case{margin-bottom:64px;padding:0 clamp(16px,4vw,24px)}
  .case__header{
    grid-template-columns:auto 1fr;
    gap:12px;
    margin-bottom:16px;
  }
  .case__client{font-size:clamp(24px,7vw,38px);grid-column:1/-1;grid-row:2}
  .case__num{grid-row:1}
  .case__meta{grid-row:1;text-align:right;font-size:10px}
  .case__mosaic--a,
  .case__mosaic--b,
  .case__mosaic--c,
  .case__mosaic--d{
    grid-template-columns:1fr;
    aspect-ratio:auto;
  }
  .case__mosaic--a .case__tile--hero,
  .case__mosaic--c .case__tile--hero,
  .case__mosaic--single .case__tile{
    grid-column:1;aspect-ratio:16/9;
  }
  .case__mosaic--a .case__tile--placeholder,
  .case__mosaic--c .case__tile--placeholder{aspect-ratio:16/10}
  .case__mosaic--b > *,
  .case__mosaic--d > *{height:auto;aspect-ratio:16/9}
}

/* === Capabilities — four words stacked, big and quiet === */
.gallery-capabilities{
  padding:120px clamp(24px,5vw,48px);
  max-width:1200px;margin:0 auto;
  display:flex;flex-direction:column;
  text-align:center;
  gap:8px;
}
.gallery-capabilities__label{
  font-size:11px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;
  color:var(--f3);
  margin-bottom:32px;
}
.gallery-capability{
  font-family:var(--ff);
  font-size:clamp(36px,5.5vw,72px);
  font-weight:200;letter-spacing:-.02em;line-height:1.1;
  color:#fff;
  transition:color .35s,transform .55s cubic-bezier(.2,.8,.2,1);
  cursor:default;
}
.gallery-capability:hover{
  background:var(--G);background-size:200%;
  animation:gradShift 6s ease infinite;
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
  transform:translateX(8px);
}

/* === Quiet client logo strip === */
.gallery-clients{
  padding:80px clamp(24px,5vw,48px) 100px;
  max-width:1600px;margin:0 auto;
  border-top:1px solid var(--bd);
}
.gallery-clients__list{
  display:flex;align-items:center;justify-content:space-around;
  gap:48px;list-style:none;margin:0;padding:0;flex-wrap:wrap;
}
.gallery-clients__list li{margin:0;list-style:none}
.gallery-clients__list img{
  height:32px;width:auto;
  filter:brightness(0) invert(1);
  opacity:.4;
  transition:opacity .35s;
}
.gallery-clients__list img:hover{opacity:.85}

/* === Get in touch finale — biggest type on the page === */
.gallery-cta{
  padding:140px clamp(24px,5vw,48px) 160px;
  text-align:center;
  border-top:1px solid var(--bd);
}
.gallery-cta__link{
  display:inline-flex;flex-direction:column;align-items:center;gap:24px;
  text-decoration:none;color:#fff;
}
.gallery-cta__big{
  font-family:var(--ff);
  font-size:clamp(64px,11vw,160px);
  font-weight:200;letter-spacing:-.03em;line-height:.95;
  position:relative;display:inline-flex;
  overflow:hidden;height:1em;
}
.gallery-cta__big-inner,
.gallery-cta__link[data-hover]::after{
  display:inline-block;transition:transform .55s cubic-bezier(.25,.25,0,1),opacity .55s cubic-bezier(.25,.25,0,1);
}
.gallery-cta__link[data-hover]::after{
  content:attr(data-hover);
  position:absolute;left:0;top:100%;
  background:var(--G);background-size:200%;
  animation:gradShift 6s ease infinite;
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
  white-space:nowrap;font-weight:300;
}
.gallery-cta__link:hover .gallery-cta__big-inner{transform:translateY(-100%);opacity:0}
.gallery-cta__link:hover::after{transform:translateY(-100%);opacity:1}
.gallery-cta__email{
  font-size:14px;letter-spacing:.04em;color:var(--f2);
  font-weight:300;
}

/* ===== STUDIOS PAGE v2 — full-bleed cases, byline-overlaid hero,
   combined context band, brief-us CTA. Replaces the previous .gallery
   structure on /studios.html. Old .gallery-* rules above are dead but
   harmless; left in for now in case anything else references them. ===== */

/* HERO with byline overlay */
.studios-hero{
  position:relative;height:100vh;width:100%;
  overflow:hidden;background:#000;
}
.studios-hero__media{position:absolute;inset:0;z-index:0}
.studios-hero__media img,
.studios-hero__media video{width:100%;height:100%;object-fit:cover;display:block}
.studios-hero__scrim{
  position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    linear-gradient(180deg,rgba(0,0,0,.35) 0%,rgba(0,0,0,0) 28%,rgba(0,0,0,.15) 60%,rgba(0,0,0,.7) 100%);
}
.studios-hero__byline{
  position:absolute;left:clamp(24px,5vw,64px);bottom:clamp(64px,9vh,120px);
  z-index:2;
  max-width:min(820px,80vw);
}
.studios-hero__byline p{
  font-family:var(--ff);
  font-size:clamp(28px,4.2vw,64px);
  font-weight:200;letter-spacing:-.018em;line-height:1.05;
  color:#fff;
  text-shadow:0 2px 30px rgba(0,0,0,.4);
}
.studios-hero__byline em{
  background:var(--G);background-size:200%;
  animation:gradShift 6s ease infinite;
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
  font-style:normal;font-weight:400;
}
.studios-hero__scroll{
  position:absolute;right:clamp(24px,5vw,64px);bottom:clamp(64px,9vh,120px);z-index:2;
  display:flex;flex-direction:column;align-items:center;gap:14px;
  color:rgba(255,255,255,.7);
}
.studios-hero__scroll span{
  font-size:10px;font-weight:600;letter-spacing:.22em;text-transform:uppercase;
  writing-mode:vertical-rl;transform:rotate(180deg);
}
.studios-hero__scroll svg{width:22px;height:32px}
.studios-hero__scroll-dot{animation:scrollDot 1.8s ease-in-out infinite}

/* CASE — full-bleed, work-first, placard below */
.case2{
  position:relative;
  margin:0;padding:0;
  /* Generous gap between cases — Fuze-style breathing room */
  margin-bottom:clamp(80px,11vh,160px);
}
.case2:first-of-type{margin-top:clamp(80px,12vh,160px)}
.case2__media{
  position:relative;
  /* Full-bleed: kiss the viewport edges with small gutter */
  padding:0 clamp(16px,2.5vw,40px);
}
.case2__tile{
  position:relative;display:block;width:100%;
  aspect-ratio:16/9;
  border-radius:8px;overflow:hidden;
  background:#0a0a0a;cursor:pointer;
  border:0;padding:0;
  font-family:inherit;
  text-decoration:none;color:inherit;
}
.case2__tile img,
.case2__tile video{
  position:absolute;inset:0;
  width:100%;height:100%;
  object-fit:cover;display:block;
  transition:transform 1.4s cubic-bezier(.2,.8,.2,1),filter .6s;
  filter:saturate(.9);
}
.case2__tile::after{
  content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(180deg,transparent 55%,rgba(0,0,0,.55) 100%);
  opacity:0;transition:opacity .4s;pointer-events:none;
}
.case2__tile:hover img,
.case2__tile:hover video{transform:scale(1.03);filter:saturate(1.05)}
.case2__tile:hover::after{opacity:1}

/* Hover-revealed deliverables — bottom-left chips, comma-separated when stacked.
   Replaces the generic "Lamborghini · Brand film" caption with project scope. */
.case2__deliverables{
  position:absolute;left:clamp(20px,2.5vw,40px);bottom:clamp(20px,2.5vw,40px);z-index:2;
  display:flex;flex-wrap:wrap;gap:8px;
  margin:0;padding:0;
  opacity:0;transform:translateY(8px);
  transition:opacity .4s cubic-bezier(.25,.25,0,1),transform .4s cubic-bezier(.25,.25,0,1);
  pointer-events:none;
}
.case2__deliverables > span{
  display:inline-block;
  font-size:11px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;
  color:#fff;
  padding:6px 10px;
  border:1px solid rgba(255,255,255,.22);
  border-radius:999px;
  backdrop-filter:blur(6px);
  background:rgba(0,0,0,.18);
  line-height:1;
}
.case2__tile:hover .case2__deliverables{opacity:1;transform:translateY(0)}
/* When the play button is centered we still want the chips to read; play stays put */

/* Placard caption below the media — small, left-anchored, museum style */
.case2__placard{
  display:flex;flex-direction:column;gap:4px;
  margin-top:18px;
  padding:0 clamp(16px,2.5vw,40px);
}
.case2__client{
  font-family:var(--ff);
  font-size:clamp(20px,2vw,28px);
  font-weight:300;letter-spacing:-.012em;line-height:1.1;
  color:#fff;
}
.case2__role{
  font-size:11px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;
  color:var(--f3);
}

/* Scroll-reveal: fade + translate up. Triggered by IntersectionObserver
   adding .is-revealed once the section enters the viewport. */
.is-reveal{
  opacity:0;transform:translateY(36px);
  transition:opacity .8s cubic-bezier(.2,.8,.2,1),transform .8s cubic-bezier(.2,.8,.2,1);
  will-change:opacity,transform;
}
.is-reveal.is-revealed{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .is-reveal{opacity:1;transform:none;transition:none}
}

/* CONTEXT BAND — capabilities + clients in one quiet two-column block.
   The --solo variant is for when the client logos are moved up to the trust
   strip; capabilities then sit alone, centered. */
.studios-context{
  display:grid;
  grid-template-columns:1fr 1.4fr;
  gap:clamp(48px,6vw,96px);
  max-width:1600px;margin:0 auto;
  padding:clamp(80px,12vh,140px) clamp(24px,5vw,64px);
  border-top:1px solid var(--bd);
  align-items:start;
}
.studios-context--solo{
  grid-template-columns:1fr;
  text-align:center;
  max-width:900px;
}
.studios-context--solo .studios-context__label{
  margin-bottom:32px;
}
.studios-context--solo .studios-context__cap-list{
  align-items:center;
}
.studios-context__label{
  font-size:11px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;
  color:var(--f3);
  margin-bottom:24px;
}
.studios-context__cap-list{
  list-style:none;margin:0;padding:0;
  display:flex;flex-direction:column;gap:6px;
}
.studios-context__cap-list li{
  font-family:var(--ff);
  font-size:clamp(28px,3.4vw,44px);
  font-weight:200;letter-spacing:-.015em;line-height:1.15;
  color:#fff;
  transition:transform .55s cubic-bezier(.2,.8,.2,1);
}
.studios-context__cap-list li:hover{
  background:var(--G);background-size:200%;
  animation:gradShift 6s ease infinite;
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
  transform:translateX(8px);
  cursor:default;
}
.studios-context__client-list{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(110px,1fr));
  gap:32px 40px;
  align-items:center;
  list-style:none;margin:0;padding:0;
}
.studios-context__client-list li{margin:0}
.studios-context__client-list img{
  height:28px;width:100%;object-fit:contain;object-position:left center;
  filter:brightness(0) invert(1);
  opacity:.4;
  transition:opacity .35s;
}
.studios-context__client-list img:hover{opacity:.85}

/* CTA — headline plus visible email link below it. Sized to home page .h1
   for the headline and .lede for the email so the pair matches the type
   scale used elsewhere on the site. No hover-flip; email is plainly visible. */
.studios-cta{
  padding:clamp(100px,14vh,180px) clamp(24px,7vw,120px) clamp(120px,16vh,200px);
  text-align:left;
  max-width:1600px;margin:0 auto;
  border-top:1px solid var(--bd);
}
.studios-cta__headline{
  font-family:var(--ff);
  font-size:clamp(42px,5.5vw,76px);
  font-weight:200;letter-spacing:-.02em;line-height:.95;
  color:#fff;
  margin:0;
}
.studios-cta__email{
  display:inline-block;
  margin-top:clamp(16px,2vh,24px);
  font-family:var(--ff);
  font-size:clamp(18px,1.8vw,24px);
  font-weight:300;letter-spacing:0;line-height:1.6;
  text-decoration:none;
  background:var(--G);background-size:200%;
  animation:gradShift 6s ease infinite;
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
  transition:opacity .25s;
}
.studios-cta__email:hover{opacity:.8}

/* MOBILE for studios v2 */
@media (max-width:860px){
  .studios-hero__byline{
    left:20px;right:20px;bottom:96px;max-width:none;
  }
  .studios-hero__byline p{font-size:clamp(24px,7vw,38px)}
  .studios-hero__scroll{right:20px;bottom:32px}
  .case2{margin-bottom:64px}
  .case2:first-of-type{margin-top:64px}
  .case2__media,
  .case2__placard{padding-left:16px;padding-right:16px}
  .case2__tile{aspect-ratio:16/10;border-radius:6px}
  /* On touch the chips have nothing to hover, show them dimmed by default */
  .case2__deliverables{opacity:.85;transform:none;left:18px;bottom:18px}
  .case2__deliverables > span{padding:5px 9px;font-size:10px}
  .case2__placard{margin-top:14px;gap:2px}
  .studios-context{
    grid-template-columns:1fr;
    gap:48px;
    padding:64px 20px;
  }
  .studios-cta{padding:80px 20px 100px;text-align:center}
}

/* ============================================================
   Studios hero v2 — borrowed from .blog-hero. Full-bleed video
   inside a rounded card, dark+blue radial gradients overlaid
   top-left so text reads cleanly on the left side.
   ============================================================ */
/* Wrapper that matches the blog's outer page padding (110px top, 7vw sides, 80px bot).
   Studios needs the same outer padding as .blog-wrap so the hero card sits in
   the identical position — same x-margins, same top breathing room. */
.studios-wrap{
  margin:0 auto;
  padding:110px clamp(24px,7vw,120px) 80px;
  position:relative;
}

.studios-hero2{
  position:relative;
  margin-bottom:64px;
  min-height:380px;
  border-radius:30px;overflow:hidden;
  background:#0a0a0a;
}
.studios-hero2__copy{
  position:relative;z-index:4;
  display:flex;flex-direction:column;justify-content:center;
  padding:48px 64px;
  max-width:55%;
  min-height:380px;
}
.studios-hero2__title{
  font-family:var(--ff);
  font-size:clamp(40px,6vw,68px);
  font-weight:200;letter-spacing:-.02em;line-height:1.05;
  margin-bottom:20px;
  color:#fff;
}
.studios-hero2__text{
  font-family:var(--ff);
  font-size:clamp(15px,1.2vw,17px);font-weight:300;line-height:1.7;
  color:var(--f2);
  margin:0;
}
/* Dark fade anchored top-left so the copy panel reads on bright video */
.studios-hero2::before{
  content:"";position:absolute;inset:0;z-index:2;
  background:radial-gradient(75vw at 0 0,#000 0%,rgba(0,0,0,.98) 35%,rgba(0,0,0,.85) 55%,rgba(0,0,0,.4) 75%,transparent 95%);
  pointer-events:none;
}
/* Blue radial drawn on top of the black, behind the text */
.studios-hero2::after{
  content:"";position:absolute;inset:0;z-index:3;
  background:radial-gradient(50vw at 0 0,rgba(0,10,80,.92),rgba(10,30,160,.55) 30%,transparent 65%);
  pointer-events:none;
}
/* Video fills the entire card behind everything */
.studios-hero2__media{
  position:absolute;inset:0;z-index:1;
}
.studios-hero2__media video{
  width:100%;height:100%;
  object-fit:cover;
  display:block;
}

@media (max-width:860px){
  .studios-wrap{padding:110px 20px 64px}
  .studios-hero2__copy{padding:40px;text-align:center;align-items:center;max-width:100%;min-height:480px}
  .studios-hero2__title{font-size:clamp(32px,9vw,44px);margin-bottom:14px}
  .studios-hero2__text{font-size:14px;max-width:600px;line-height:1.65}
}

/* ============================================================
   STUDIOS PAGE v4 — Fuze-style per-project sections.
   - Page header (kicker + title + tagline). No filter, no hero video.
   - One <section class="proj-sec proj-sec--{a|b|c|d}"> per project.
   - Each section has a 4-tile mosaic (.proj-sec__mosaic) and a small
     placard caption below (.proj-sec__caption).
   - Mosaic = 1 hero tile (real asset, lightbox-clickable) + 3 placeholders.
   - Layouts: --a banner+3, --b 3+banner, --c 2x2, --d tall+3-stack.
   ============================================================ */

/* Page header — kicker eyebrow + title left / tagline right. */
.proj-header{
  max-width:1600px;margin:0 auto;
  padding:clamp(48px,7vh,96px) clamp(24px,5vw,64px) clamp(48px,6vh,72px);
  border-bottom:1px solid var(--bd);
}
.proj-header__kicker{
  display:inline-block;
  font-size:11px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;
  color:var(--f3);margin-bottom:14px;
}
.proj-header__top{
  display:grid;grid-template-columns:auto 1fr;gap:clamp(24px,4vw,64px);
  align-items:end;
}
.proj-header__title{
  margin:0;
  font-family:var(--ff);
  font-size:clamp(48px,7vw,108px);
  font-weight:200;letter-spacing:-.02em;line-height:.95;
  color:#fff;
}
.proj-header__tag{
  margin:0 0 .35em;
  font-family:var(--ff);
  font-size:clamp(14px,1.3vw,17px);
  font-weight:300;letter-spacing:-.005em;line-height:1.5;
  color:var(--f2);
  max-width:480px;
  justify-self:end;
  text-align:right;
}
.proj-header__tag em{
  background:var(--G);background-size:200%;
  animation:gradShift 6s ease infinite;
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
  font-style:normal;font-weight:400;
}

/* ===== STUDIOS BENTO MOSAIC =====
   Single-page portfolio. Each tile shape mirrors its clips aspect ratio
   so nothing gets cropped. 12-column grid, row height baseline 220px:
     .bento__tile             - landscape, 4 cols × 1 row
     .bento__tile--wide       - landscape, 6 cols × 1 row
     .bento__tile--lg         - landscape hero, 8 cols × 1 row
     .bento__tile--lg-tall    - landscape hero, 8 cols × 2 rows (sits next to portrait tiles)
     .bento__tile--xl         - landscape banner, 12 cols × 1 row
     .bento__tile--portrait   - vertical clip, 2 cols × 2 rows (true 9:16-ish ratio)
     .bento__tile--square     - square clip, 4 cols × 2 rows (1:1)
   Mobile collapses to single column with object-fit per orientation.
*/
/* Studios intro pitch above the bento. Sized to match the home page .h1
   utility exactly (clamp 42-76px, weight 200, letter-spacing -.02, line-height
   .95) so headings on this page read at the same scale as headings on the
   home page. Gradient accent matches .grad-text on home. */
.studios-intro{
  padding:clamp(100px,14vh,160px) clamp(24px,7vw,120px) clamp(40px,6vh,72px);
  text-align:center;
}
.studios-intro__pitch{
  font-family:var(--ff);
  font-size:clamp(42px,5.5vw,76px);
  font-weight:200;letter-spacing:-.02em;line-height:.95;
  color:#fff;
  margin:0;
}
.studios-intro__pitch .grad{
  background:var(--G);background-size:200%;
  animation:gradShift 6s ease infinite;
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
}
@media (max-width:640px){
  .studios-intro{padding:80px 20px 28px}
}
.bento{
  width:100%;
  padding:0 clamp(24px,7vw,120px) clamp(80px,12vh,160px);
}
.bento__grid{
  display:grid;
  grid-template-columns:repeat(12,1fr);
  /* baseline row height — landscape clips at ~16:9 want a row 4-cols-wide
     tall enough to read; portraits double up via span 2 */
  grid-auto-rows:220px;
  gap:14px;
}
.bento__tile{
  position:relative;
  grid-column:span 4;
  grid-row:span 1;
  border:0;background:#0a0a0a;padding:0;margin:0;
  border-radius:14px;overflow:hidden;cursor:pointer;
  display:block;
  isolation:isolate;
  transition:transform .55s cubic-bezier(.2,.8,.2,1);
}
.bento__tile:hover{transform:translateY(-3px)}
.bento__tile--wide{grid-column:span 6}
/* wide-tall: 6 cols x 2 rows. Tall version of wide for landscape clips
   that want more vertical presence than a single-row wide. */
.bento__tile--wide-tall{grid-column:span 6;grid-row:span 2}
/* landscape-tall: 4 cols x 2 rows. Same shape as Pmd / SQ but holds a
   landscape clip (object-fit:cover crops sides slightly to fit 1:1). */
.bento__tile--landscape-tall{grid-column:span 4;grid-row:span 2}
.bento__tile--lg{grid-column:span 8}
.bento__tile--lg-tall{grid-column:span 8;grid-row:span 2}
.bento__tile--xl{grid-column:span 12;grid-row:span 2}
/* xl-thin: full-wide, single-row banner — for letterboxed clips */
.bento__tile--xl-thin{grid-column:span 12;grid-row:span 1}
/* Portrait tiles: narrow + tall so vertical 9:16 footage isn't cropped */
.bento__tile--portrait{grid-column:span 2;grid-row:span 2}
/* Big portrait — same vertical clip but commands a row band on its own */
.bento__tile--portrait-lg{grid-column:span 4;grid-row:span 3}
/* Mid portrait — 4 cols x 2 rows. Aspect lands at ~1:1 so vertical clips
   crop top/bottom modestly while reading larger than the 2x2 portrait. */
.bento__tile--portrait-md{grid-column:span 4;grid-row:span 2}
/* Square tiles for 1:1 footage */
.bento__tile--square{grid-column:span 4;grid-row:span 2}
/* Editorial breaker: full-width 12-col by 1-row text band that breaks up
   the video grid with a single line of customer-facing copy. */
.bento__breaker{
  grid-column:span 12;grid-row:span 1;
  display:flex;align-items:center;justify-content:center;
  text-align:center;
  padding:0 clamp(24px,5vw,80px);
  pointer-events:none;
}
.bento__breaker p{
  font-family:var(--ff);
  font-size:clamp(20px,2.6vw,38px);
  font-weight:200;letter-spacing:-.015em;line-height:1.2;
  color:#fff;
  margin:0;
  max-width:42ch;
  text-wrap:balance;
}
.bento__breaker em{
  font-style:normal;
  background:var(--G);background-size:200%;
  animation:gradShift 6s ease infinite;
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
  font-weight:300;
}
.bento__video{
  position:absolute;inset:0;
  width:100%;height:100%;
  object-fit:cover;
  display:block;
  z-index:0;
  transition:transform .9s cubic-bezier(.25,.25,0,1),filter .35s;
  filter:saturate(1) brightness(.95);
}
.bento__tile:hover .bento__video{
  transform:scale(1.03);
  filter:saturate(1.05) brightness(1);
}
/* Subtle bottom-up gradient so the label is always legible regardless of clip */
.bento__tile::after{
  content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(180deg,rgba(0,0,0,0) 50%,rgba(0,0,0,.55) 100%);
  pointer-events:none;
  opacity:.85;
  transition:opacity .35s;
}
.bento__tile:hover::after{opacity:1}
.bento__label{
  position:absolute;left:18px;bottom:14px;right:18px;z-index:2;
  display:flex;align-items:baseline;gap:10px;
  flex-wrap:wrap;
  pointer-events:none;
}
.bento__client{
  color:#fff;font-family:var(--ff);
  font-size:13px;font-weight:500;letter-spacing:.02em;
  text-shadow:0 2px 16px rgba(0,0,0,.5);
}
.bento__role{
  color:rgba(255,255,255,.6);font-size:11px;font-weight:400;
  letter-spacing:.06em;text-transform:uppercase;
  text-shadow:0 2px 16px rgba(0,0,0,.5);
}

/* Tablet — narrower; portraits get 3 cols (still narrow), heroes shrink */
@media(max-width:1024px){
  .bento__grid{grid-template-columns:repeat(8,1fr);grid-auto-rows:200px}
  .bento__tile{grid-column:span 4}
  .bento__tile--wide{grid-column:span 4}
  .bento__tile--wide-tall{grid-column:span 4;grid-row:span 2}
  .bento__tile--landscape-tall{grid-column:span 4;grid-row:span 2}
  .bento__tile--lg{grid-column:span 8}
  .bento__tile--lg-tall{grid-column:span 8;grid-row:span 2}
  .bento__tile--xl{grid-column:span 8;grid-row:span 2}
  .bento__tile--xl-thin{grid-column:span 8;grid-row:span 1}
  .bento__tile--portrait{grid-column:span 2;grid-row:span 2}
  .bento__tile--portrait-lg{grid-column:span 4;grid-row:span 3}
  .bento__tile--portrait-md{grid-column:span 4;grid-row:span 2}
  .bento__tile--square{grid-column:span 4;grid-row:span 2}
}
/* Mobile — single column. Landscapes 16:9, portraits stay vertical, squares 1:1. */
@media(max-width:640px){
  .bento{padding:0 clamp(16px,5vw,32px) 80px}
  .bento__grid{grid-template-columns:1fr;grid-auto-rows:auto;gap:10px}
  .bento__tile,
  .bento__tile--wide,
  .bento__tile--wide-tall,
  .bento__tile--landscape-tall,
  .bento__tile--lg,
  .bento__tile--lg-tall,
  .bento__tile--xl,
  .bento__tile--xl-thin,
  .bento__tile--square{grid-column:1;grid-row:span 1;aspect-ratio:16/9}
  .bento__tile--square{aspect-ratio:1/1}
  .bento__tile--portrait,
  .bento__tile--portrait-md,
  .bento__tile--portrait-lg{grid-column:1;grid-row:span 1;aspect-ratio:9/16;max-height:80vh}
  .bento__breaker{grid-column:1;padding:32px 16px}
  .bento__breaker p{font-size:clamp(20px,5.5vw,28px)}
  .bento-intro{padding:90px clamp(16px,5vw,32px) 28px}
}
/* Reduced motion — kill all hover transforms */
@media(prefers-reduced-motion:reduce){
  .bento__tile,
  .bento__tile:hover,
  .bento__video,
  .bento__tile:hover .bento__video{transform:none;transition:none}
}

/* ===== Legacy proj-sec wrapper (kept for now; not used in markup) ===== */
.proj-sections{
  width:100%;
  padding:clamp(48px,7vh,96px) 0 clamp(48px,7vh,96px);
}
/* Each project section fills the viewport so scrolling lands on one project
   at a time (Fuze pattern). Mosaic sits centered, caption beneath. */
.proj-sec{
  position:relative;
  min-height:100vh;
  padding:clamp(48px,7vh,96px) clamp(24px,7vw,120px);
  display:flex;flex-direction:column;justify-content:center;
  /* Inner content cap — matches the .blog-wrap and other content max-widths */
  --proj-sec-inner-max:1600px;
}
.proj-sec > *{
  max-width:var(--proj-sec-inner-max);
  margin-left:auto;margin-right:auto;
  width:100%;
}
/* Sections are transparent — the body-level continuous glow shows through. */
.proj-sec{
  background:transparent;
}

/* === Trust strip: clients logo band between the hero and the first project.
   Quiet, single-row, fills the dead space with substance. === */
.trust-strip{
  margin:0 auto;
  padding:clamp(40px,5vh,72px) clamp(24px,7vw,120px);
  max-width:1600px;
  display:grid;
  grid-template-columns:auto 1fr;
  gap:clamp(24px,4vw,64px);
  align-items:center;
  border-top:1px solid var(--bd);
  border-bottom:1px solid var(--bd);
}
.trust-strip__label{
  font-size:11px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;
  color:var(--f3);
  white-space:nowrap;
}
.trust-strip__list{
  display:flex;align-items:center;justify-content:space-between;
  gap:clamp(24px,4vw,64px);
  list-style:none;margin:0;padding:0;
  flex-wrap:wrap;
}
.trust-strip__list li{margin:0}
.trust-strip__list img{
  height:30px;width:auto;
  filter:brightness(0) invert(1);
  opacity:.45;
  transition:opacity .35s;
}
.trust-strip__list img:hover{opacity:.85}

@media (max-width:860px){
  .trust-strip{
    grid-template-columns:1fr;gap:18px;
    padding:32px 20px;
    text-align:center;
  }
  .trust-strip__list{justify-content:center;gap:24px}
  .trust-strip__list img{height:22px}
}
/* Hairline divider at the top of every section except the first — fades in
   from transparent at the edges so it doesn't read like a hard rule. */
.proj-sec + .proj-sec::before{
  content:"";position:absolute;
  top:0;left:0;right:0;height:1px;
  background:linear-gradient(90deg,transparent 0%,rgba(255,255,255,.08) 30%,rgba(255,255,255,.08) 70%,transparent 100%);
  pointer-events:none;
}

/* Mosaic — 4-tile grid (1 hero + 3 supporting) per project. The mosaic
   grows to fill the available section height, capped at 75vh so it stays
   slide-sized rather than poster-sized. Each layout (--a/--b/--c/--d) gives
   a different shape so the rhythm changes section by section. */
.proj-sec__mosaic{
  display:grid;
  grid-template-columns:repeat(12,1fr);
  gap:clamp(8px,1vw,16px);
  flex:1 1 auto;
  min-height:0;
  max-height:75vh;
}
.proj-sec__mosaic > *{height:100%;min-height:0}

/* Layout A — hero banner top + 3 across below */
.proj-sec--a .proj-sec__mosaic{grid-template-rows:1.6fr 1fr}
.proj-sec--a .proj-sec__mosaic > *:nth-child(1){grid-column:span 12;grid-row:1}
.proj-sec--a .proj-sec__mosaic > *:nth-child(2),
.proj-sec--a .proj-sec__mosaic > *:nth-child(3),
.proj-sec--a .proj-sec__mosaic > *:nth-child(4){grid-column:span 4;grid-row:2}

/* Layout B — 3 supporting top + hero banner below (hero sits in nth-child 4) */
.proj-sec--b .proj-sec__mosaic{grid-template-rows:1fr 1.6fr}
.proj-sec--b .proj-sec__mosaic > *:nth-child(1),
.proj-sec--b .proj-sec__mosaic > *:nth-child(2),
.proj-sec--b .proj-sec__mosaic > *:nth-child(3){grid-column:span 4;grid-row:1}
.proj-sec--b .proj-sec__mosaic > *:nth-child(4){grid-column:span 12;grid-row:2}

/* Layout C — 2x2 quadrant */
.proj-sec--c .proj-sec__mosaic{
  grid-template-columns:repeat(2,1fr);
  grid-template-rows:repeat(2,1fr);
}

/* Layout D — tall hero left + 3 stacked right */
.proj-sec--d .proj-sec__mosaic{
  grid-template-columns:1.6fr 1fr;
  grid-template-rows:repeat(3,1fr);
}
.proj-sec--d .proj-sec__mosaic > *:nth-child(1){grid-column:1;grid-row:1/4}
.proj-sec--d .proj-sec__mosaic > *:nth-child(2){grid-column:2;grid-row:1}
.proj-sec--d .proj-sec__mosaic > *:nth-child(3){grid-column:2;grid-row:2}
.proj-sec--d .proj-sec__mosaic > *:nth-child(4){grid-column:2;grid-row:3}

/* Tile */
.proj-tile{
  position:relative;
  width:100%;
  border-radius:8px;overflow:hidden;
  background:#0a0a0a;
  border:0;padding:0;
  font-family:inherit;color:inherit;
  text-decoration:none;
}

/* Hero tile — real media. Image as poster, video on top fades in once loaded. */
.proj-tile--hero{cursor:pointer}
.proj-tile__img,
.proj-tile__video{
  position:absolute;inset:0;
  width:100%;height:100%;
  object-fit:cover;display:block;
  transition:transform 1.4s cubic-bezier(.2,.8,.2,1),filter .55s ease;
}
.proj-tile__img{filter:saturate(.92) brightness(.9);z-index:0}
.proj-tile__video{
  z-index:1;
  opacity:0;
  transition:opacity .8s ease,transform 1.4s cubic-bezier(.2,.8,.2,1),filter .55s ease;
}
.proj-tile__video.is-ready{opacity:1}
.proj-tile--hero:hover .proj-tile__img,
.proj-tile--hero:hover .proj-tile__video{transform:scale(1.025);filter:saturate(1.05) brightness(1)}

/* Placeholder tile — clearly intentional empty slot. Subtle dashed border,
   centered "+" glyph. Will be replaced by real supporting media per project
   as those assets are supplied. */
.proj-tile--placeholder{
  display:flex;align-items:center;justify-content:center;
  border:1px dashed rgba(255,255,255,.1);
  background:
    linear-gradient(135deg,rgba(255,255,255,.02) 0%,rgba(255,255,255,0) 100%),
    #060606;
  color:rgba(255,255,255,.18);
  transition:border-color .35s,color .35s;
}
.proj-tile--placeholder span{
  font-family:var(--ff);
  font-size:clamp(20px,2.2vw,28px);
  font-weight:200;line-height:1;
}
.proj-tile--placeholder:hover{
  border-color:rgba(255,255,255,.18);
  color:rgba(255,255,255,.32);
}

/* Placard caption below the mosaic — small, museum-style. */
.proj-sec__caption{
  display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;
  margin-top:18px;
  padding:0 4px;
}
.proj-sec__client{
  font-family:var(--ff);
  font-size:clamp(18px,1.8vw,24px);
  font-weight:400;letter-spacing:-.008em;line-height:1.2;
  color:#fff;
}
.proj-sec__role{
  font-size:11px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;
  color:var(--f3);
}

/* MOBILE — section still fills viewport (one project = one screen). All
   layouts collapse to a hero tile + 3-up placeholder strip beneath so all
   4 tiles fit inside 100vh. Layout B has the hero last in markup, so we
   force the rows explicitly. */
@media (max-width:860px){
  .proj-header{padding:48px 20px 32px}
  .proj-header__top{
    grid-template-columns:1fr;gap:16px;
  }
  .proj-header__title{font-size:clamp(40px,11vw,64px)}
  .proj-header__tag{justify-self:start;text-align:left;max-width:none}

  .proj-sections{padding:0}
  .proj-sec{
    padding:24px 16px;
  }
  .proj-sec__mosaic{
    display:grid !important;
    grid-template-columns:repeat(3,1fr);
    grid-template-rows:auto auto;
    gap:6px;
    max-height:none;
    flex:0 1 auto;
  }
  /* Hero spans the full top row, placeholders share the bottom row */
  .proj-sec__mosaic > .proj-tile--hero{
    grid-column:1/-1 !important;grid-row:1 !important;
    aspect-ratio:16/10;height:auto;
  }
  .proj-sec__mosaic > .proj-tile--placeholder{
    grid-column:auto !important;grid-row:2 !important;
    aspect-ratio:1/1;height:auto;
  }
  /* Layout B: hero is nth-child(4); same constraints apply, the rules above
     already handle this since they target .proj-tile--hero by class. */

  .proj-sec__caption{margin-top:14px;gap:8px}
  .proj-sec__client{font-size:18px}
}

/* === Lightbox === */
.gallery-popup{
  position:fixed;inset:0;z-index:200;
  background:rgba(0,0,0,.96);
  display:flex;align-items:center;justify-content:center;
  padding:48px;
  opacity:0;pointer-events:none;
  transition:opacity .4s ease;
}
.gallery-popup.is-open{opacity:1;pointer-events:auto}
.gallery-popup__inner{
  position:relative;width:100%;max-width:1600px;
  max-height:calc(100vh - 96px);
  display:flex;align-items:center;justify-content:center;
}
.gallery-popup__media{
  width:100%;max-height:calc(100vh - 96px);
  display:flex;align-items:center;justify-content:center;
}
.gallery-popup__media img{max-width:100%;max-height:calc(100vh - 96px);display:block;border-radius:6px}
.gallery-popup__media iframe{
  width:100%;aspect-ratio:16/9;max-height:calc(100vh - 96px);
  border:0;border-radius:6px;background:#000;
}
/* Direct-file <video> sizes to its native aspect ratio, bounded by viewport.
   Vertical clips fill the viewport height; landscape clips fill the width. */
.gallery-popup__media video{
  max-width:100%;max-height:calc(100vh - 96px);
  display:block;border-radius:6px;background:#000;
}
.gallery-popup__close{
  position:absolute;top:20px;right:24px;
  width:40px;height:40px;border-radius:50%;
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);
  color:#fff;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  transition:transform .25s,background .3s,border-color .3s;
  z-index:3;
}
.gallery-popup__close:hover{transform:rotate(90deg);background:rgba(255,255,255,.18);border-color:rgba(255,255,255,.3)}
.gallery-popup__close svg{width:18px;height:18px}
.gallery-popup__nav{
  position:absolute;top:50%;transform:translateY(-50%);
  width:48px;height:48px;border-radius:50%;
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);
  color:#fff;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  transition:background .3s,border-color .3s;
  z-index:3;
}
.gallery-popup__nav:hover{background:rgba(255,255,255,.18);border-color:rgba(255,255,255,.3)}
.gallery-popup__nav svg{width:18px;height:18px}
.gallery-popup__nav--prev{left:24px}
.gallery-popup__nav--next{right:24px}
.gallery-popup__meta{
  position:absolute;left:0;right:0;bottom:20px;
  text-align:center;
  font-size:12px;letter-spacing:.1em;color:rgba(255,255,255,.6);
  z-index:3;
}

/* Mobile */
@media(max-width:840px){
  .gallery{gap:64px;margin-bottom:80px}
  .gallery-row,
  .gallery-row--single,
  .gallery-row--two-l,
  .gallery-row--two-r,
  .gallery-row--three{
    grid-template-columns:1fr;grid-template-rows:auto;gap:16px;
  }
  .gallery-row--three .gallery-tile:nth-child(1){grid-row:auto;height:auto;aspect-ratio:4/3}
  .gallery-tile{aspect-ratio:16/10 !important}
  .gallery-tagline{padding:48px 20px}
  .gallery-section-label{padding:0 20px 20px}
  .gallery-capabilities{
    grid-template-columns:1fr 1fr;gap:32px 24px;
    padding:80px 20px;
  }
  .gallery-clients{padding:48px 20px 60px}
  .gallery-clients__list{gap:24px}
  .gallery-clients__list img{height:22px}
  .gallery-cta{padding:80px 20px 100px}
  .gallery-popup{padding:24px}
  .gallery-popup__close{top:14px;right:14px}
  .gallery-popup__nav{display:none}
}
/* Section 1: full-bleed hero with image bg + centered title + scroll indicator */
.studios-hero{
  position:relative;min-height:100vh;
  display:flex;flex-direction:column;justify-content:center;align-items:center;
  text-align:center;
  padding:140px clamp(24px,5vw,48px) 120px;
  overflow:hidden;
}
.studios-hero__bg{position:absolute;inset:0;z-index:0}
.studios-hero__bg img{width:100%;height:100%;object-fit:cover;display:block}
.studios-hero__bg::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(0,0,0,.45) 0%,rgba(0,0,0,.25) 50%,rgba(0,0,0,.65) 100%);
}
.studios-hero__content{position:relative;z-index:1;max-width:1100px;margin:0 auto}
.studios-hero__title{
  font-family:var(--ff);
  font-size:clamp(34px,5vw,64px);
  font-weight:300;letter-spacing:.03em;line-height:1.3;
  color:#fff;margin-bottom:30px;
  text-shadow:0 4px 30px rgba(0,0,0,.4);
}
.studios-hero__desc{
  font-family:var(--ff);
  font-size:clamp(15px,1.4vw,20px);
  font-weight:300;letter-spacing:.14em;line-height:1.5;
  text-transform:uppercase;
  color:rgba(255,255,255,.85);
  max-width:880px;margin:0 auto;
}
.studios-hero__scroll{
  position:absolute;bottom:48px;left:50%;transform:translateX(-50%);z-index:1;
  width:28px;height:40px;
}
.studios-hero__scroll svg{width:100%;height:100%;display:block}
.studios-hero__scroll-dot{
  animation:scrollDot 1.8s ease-in-out infinite;
}
@keyframes scrollDot{
  0%{transform:translateY(0);opacity:1}
  60%{transform:translateY(12px);opacity:0}
  61%{transform:translateY(0);opacity:0}
  100%{transform:translateY(0);opacity:1}
}

/* Section 2: brand/client logos strip */
.studios-logos{
  padding:80px clamp(24px,5vw,48px);
  border-bottom:1px solid var(--bd);
}
.studios-logos__list{
  display:flex;align-items:center;justify-content:space-around;
  gap:48px;list-style:none;margin:0;padding:0;
  max-width:1400px;margin:0 auto;
  flex-wrap:wrap;
}
.studios-logos__list li{margin:0;list-style:none}
.studios-logos__list img{
  height:38px;width:auto;
  filter:brightness(0) invert(1);
  opacity:.7;
  transition:opacity .35s;
}
.studios-logos__list img:hover{opacity:1}

/* Section 3: future-of-CGI, big purple-tinted with bg image */
.studios-future{
  position:relative;
  padding:120px clamp(24px,5vw,48px) 120px;
  background:linear-gradient(90deg,#170c1b,#0f0611);
  overflow:hidden;
}
.studios-future__bg{
  position:absolute;left:0;right:0;top:120px;bottom:0;
  z-index:0;overflow:hidden;
}
.studios-future__bg img{
  width:100%;height:100%;object-fit:cover;display:block;
  opacity:.85;
}
.studios-future__content{
  position:relative;z-index:1;max-width:1400px;margin:0 auto;
}
.studios-future__label{
  font-family:var(--ff);
  font-size:13px;font-weight:400;letter-spacing:.12em;text-transform:uppercase;
  color:rgba(255,255,255,.55);
  margin-bottom:20px;
}
.studios-future__title{
  font-family:var(--ff);
  font-size:clamp(34px,5vw,64px);
  font-weight:300;letter-spacing:.02em;line-height:1.3;
  color:#fff;
  max-width:900px;
}

/* Section 4: "We create" intro + grid of video tiles */
.studios-create{
  padding:120px clamp(24px,5vw,48px) 80px;
  max-width:1400px;margin:0 auto;
}
.studios-create__head{margin-bottom:80px;max-width:900px}
.studios-create__label{
  font-family:var(--ff);
  font-size:13px;font-weight:400;letter-spacing:.12em;text-transform:uppercase;
  color:rgba(255,255,255,.55);
  margin-bottom:20px;
}
.studios-create__title{
  font-family:var(--ff);
  font-size:clamp(34px,5vw,64px);
  font-weight:300;letter-spacing:.02em;line-height:1.3;
  color:#fff;
}
.studios-create__sub{
  font-size:clamp(16px,1.4vw,20px);font-weight:300;line-height:1.55;
  color:var(--f2);
  max-width:700px;margin:0 0 48px;
}

/* Asymmetric grid (desktop), horizontal scroll (mobile) */
.studios-grid{
  display:grid;grid-template-columns:repeat(16,1fr);grid-template-rows:repeat(16,minmax(48px,1fr));
  gap:14px;list-style:none;margin:0;padding:0;
  height:0;padding-bottom:88%;position:relative;
}
.studios-grid__item{margin:0;list-style:none;display:flex}
.studios-grid__item:nth-child(1){grid-column:1/10;grid-row:1/7}
.studios-grid__item:nth-child(2){grid-column:10/-1;grid-row:3/7}
.studios-grid__item:nth-child(3){grid-column:4/9;grid-row:7/11}
.studios-grid__item:nth-child(4){grid-column:9/-1;grid-row:7/13}
.studios-grid__item:nth-child(5){grid-column:1/9;grid-row:11/15}
.studios-grid__item:nth-child(6){grid-column:9/-3;grid-row:13/17}

.studios-tile{
  position:relative;width:100%;display:block;
  border-radius:8px;overflow:hidden;
  text-decoration:none;color:inherit;
  cursor:pointer;
  background:#0a0a0a;
}
.studios-tile picture,
.studios-tile img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .8s cubic-bezier(.25,.25,0,1),filter .35s;
}
.studios-tile::after{
  content:"";position:absolute;inset:0;z-index:1;
  background:rgba(0,0,0,0);
  transition:background .35s cubic-bezier(.25,.25,0,1);
  pointer-events:none;
}
.studios-tile:hover img{transform:scale(1.06);filter:brightness(.7)}
.studios-tile:hover::after{background:rgba(0,0,0,.3)}

.studios-tile__icon{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:56px;height:56px;border-radius:50%;
  background:#fff;
  display:flex;align-items:center;justify-content:center;
  z-index:2;
  transition:transform .35s cubic-bezier(.25,.25,0,1);
}
.studios-tile:hover .studios-tile__icon{transform:translate(-50%,-50%) scale(1.1)}
.studios-tile__icon svg{width:14px;height:14px;display:block}

/* Get-in-touch CTA */
.studios-cta{
  text-align:center;padding:120px clamp(24px,5vw,48px) 140px;
  border-top:1px solid var(--bd);
}
.studios-cta__link{
  display:inline-flex;flex-direction:column;align-items:center;gap:32px;
  text-decoration:none;color:#fff;
}
.studios-cta__text{
  font-family:var(--ff);
  font-size:clamp(48px,7vw,88px);
  font-weight:200;letter-spacing:-.02em;line-height:1;
  position:relative;display:inline-flex;
  overflow:hidden;
  height:1.05em;
}
.studios-cta__text-inner,
.studios-cta__link[data-hover]::after{
  display:inline-block;transition:transform .45s cubic-bezier(.25,.25,0,1),opacity .45s cubic-bezier(.25,.25,0,1);
}
.studios-cta__link[data-hover]::after{
  content:attr(data-hover);
  position:absolute;left:0;top:100%;
  background:var(--G);background-size:200%;
  animation:gradShift 6s ease infinite;
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
  white-space:nowrap;
}
.studios-cta__link:hover .studios-cta__text-inner{transform:translateY(-100%);opacity:0}
.studios-cta__link:hover::after{transform:translateY(-100%);opacity:1}
.studios-cta__circle{
  width:120px;height:120px;border-radius:50%;
  border:1px solid rgba(255,255,255,.18);
  display:flex;align-items:center;justify-content:center;
  transition:background .35s,border-color .35s,transform .45s cubic-bezier(.25,.25,0,1);
}
.studios-cta__link:hover .studios-cta__circle{
  background:#fff;border-color:#fff;
  transform:scale(1.05);
}
.studios-cta__circle svg{width:24px;height:24px;display:block;color:#fff;transition:color .35s,transform .45s cubic-bezier(.25,.25,0,1)}
.studios-cta__link:hover .studios-cta__circle svg{color:#000;transform:translateY(-3px)}

/* Mobile */
@media(max-width:840px){
  .studios-hero{min-height:80vh;padding:120px 20px 80px}
  .studios-logos{padding:48px 20px}
  .studios-logos__list{gap:24px}
  .studios-logos__list img{height:24px}
  .studios-future{padding:80px 20px}
  .studios-future__bg{top:80px}
  .studios-create{padding:80px 20px 60px}
  .studios-create__head{margin-bottom:48px}
  .studios-cta{padding:80px 20px}
  .studios-cta__circle{width:88px;height:88px}
  .studios-cta__circle svg{width:18px;height:18px}
  /* Switch grid -> horizontal scroll */
  .studios-grid{
    display:flex;
    grid-template:none;
    height:auto;padding-bottom:0;
    overflow-x:auto;
    scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
    margin:0 -20px;padding:0 20px;
  }
  .studios-grid::-webkit-scrollbar{display:none}
  .studios-grid__item{
    grid-column:auto !important;grid-row:auto !important;
    scroll-snap-align:start;flex-shrink:0;
    width:75vw;height:55vw;
  }
  .studios-tile__icon{width:44px;height:44px}
  .studios-tile__icon svg{width:11px;height:11px}
}

/* Lightbox for video popup */
.studios-popup{
  position:fixed;inset:0;z-index:200;
  background:rgba(0,0,0,.92);
  display:flex;align-items:center;justify-content:center;
  padding:24px;
  opacity:0;pointer-events:none;
  transition:opacity .35s ease;
}
.studios-popup.is-open{opacity:1;pointer-events:auto}
.studios-popup__inner{
  position:relative;width:100%;max-width:1280px;
  aspect-ratio:16/9;
}
.studios-popup__close{
  position:absolute;top:-48px;right:0;
  width:36px;height:36px;
  background:transparent;border:0;color:#fff;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  transition:transform .25s;
}
.studios-popup__close:hover{transform:rotate(90deg)}
.studios-popup__close svg{width:22px;height:22px}
.studios-popup iframe{
  width:100%;height:100%;border:0;border-radius:12px;
  background:#000;
}

/* ======== Hub (home) page ======== */
.hub-body{
  height:100vh;
  display:flex;flex-direction:column;
  /* Two-corner radial: near-black field with bright white pinpoints in the
     bottom-left and bottom-right corners, fading through #124DF1 blue up
     to #02020A at the top. Layered as fixed background-image gradients on
     the body itself so it spans the full viewport without affecting layout. */
  background:
    radial-gradient(ellipse 70vw 80vh at 0% 100%, #5b8bff 0%, #124DF1 18%, rgba(18,77,241,.4) 45%, rgba(18,77,241,0) 70%),
    radial-gradient(ellipse 70vw 80vh at 100% 100%, #5b8bff 0%, #124DF1 18%, rgba(18,77,241,.4) 45%, rgba(18,77,241,0) 70%),
    radial-gradient(ellipse 130vw 90vh at 50% 110%, #124DF1 0%, rgba(18,77,241,.35) 40%, rgba(18,77,241,0) 75%),
    #02020A;
  background-attachment:fixed;
  overflow:hidden;
  position:relative;
}
/* Subtle breathing layer over the corner glows so it isn't perfectly static.
   Uses the same two-corner gradient at slightly higher intensity, blended
   with screen so it only ever brightens, never darkens. */
.hub-body{--glow-intensity:1}
.hub-body:has(.hub-card:hover){--glow-intensity:.55}
.hub-body::before{
  content:"";position:fixed;inset:0;
  pointer-events:none;z-index:0;
  background:
    radial-gradient(ellipse 50vw 60vh at 0% 100%, rgba(91,139,255,.16) 0%, rgba(18,77,241,.1) 25%, rgba(18,77,241,0) 60%),
    radial-gradient(ellipse 50vw 60vh at 100% 100%, rgba(91,139,255,.16) 0%, rgba(18,77,241,.1) 25%, rgba(18,77,241,0) 60%);
  mix-blend-mode:screen;
  opacity:calc(.9 * var(--glow-intensity));
  animation:hubGlowBreathe 12s ease-in-out infinite;
  transition:opacity .55s ease;
}
.hub-body::after{display:none}
@keyframes hubGlowBreathe{
  0%,100%{filter:brightness(1)}
  50%{filter:brightness(.78)}
}
/* Make sure the hub UI sits above the blobs. Exclude .to-top because it
   needs to stay position:fixed (overlay button), not position:relative which
   would put it in the flex column flow and create a phantom block of space. */
.hub-body > *:not(.to-top):not(.cursor){position:relative;z-index:1}
.hub-squiggle{display:none}
@media(prefers-reduced-motion:reduce){
  .hub-body::before,.hub-body::after{animation:none}
}
/* Home/hub nav — uses the same padding and logo size as .legal-nav so the
   brand wordmark sits at the same horizontal position as on every other
   page. The hub keeps its flip animation; only sizing/spacing aligns. */
.hub-nav{
  display:flex;justify-content:space-between;align-items:center;
  padding:18px clamp(24px,7vw,120px);
  flex-shrink:0;
}
/* Brand: flip-front + flip-back imgs, vertical slide on hover. Matches the
   .legal-brand sizing exactly (inline-flex, auto width via SVG aspect ratio,
   height 28px) so the logo's left edge is at the same x-position as on
   blog/studios/legal pages. Inner imgs are left-anchored (left:0) so they
   align with the container's left edge — no centering offset. */
.hub-brand{
  position:relative;display:inline-flex;align-items:center;
  overflow:hidden;
  height:28px;
  text-decoration:none;
}
.hub-brand img{
  height:28px;width:auto;
  position:absolute;top:0;left:0;
  transition:transform .35s cubic-bezier(.25,.25,0,1),opacity .35s cubic-bezier(.25,.25,0,1);
}
/* The first img establishes the container's intrinsic width; the second
   sits absolutely on top. */
.hub-brand img.flip-front{position:relative;z-index:2}
.hub-brand img.flip-back{transform:translate3d(0,100%,0);z-index:1;opacity:0;pointer-events:none;}
.hub-brand:hover img.flip-front{transform:translate3d(0,-100%,0);opacity:0}
.hub-brand:hover img.flip-back{transform:translate3d(0,0,0);opacity:1}
.hub-nav__contact{
  font-size:13px;font-weight:300;letter-spacing:.03em;color:var(--f2);
  text-decoration:none;
  position:relative;display:inline-flex;align-items:center;
  overflow:hidden;line-height:1;
  padding:6px 0;
  transition:color .25s;
  /* button reset (this element is now a <button> for click-to-copy) */
  background:none;border:0;cursor:pointer;font-family:inherit;
}
.hub-nav__contact.is-copied{color:#fff}
.hub-nav__contact-text,
.hub-nav__contact[data-hover]::after{
  display:inline-block;transition:transform .35s cubic-bezier(.25,.25,0,1),opacity .35s cubic-bezier(.25,.25,0,1);
  position:relative;line-height:1.4;
}
.hub-nav__contact[data-hover]::after{
  content:attr(data-hover);
  position:absolute;left:0;top:100%;color:#fff;white-space:nowrap;
  margin-top:6px;
}
/* Hover-flip only applies when data-hover is set (legacy two-state label).
   Click-to-copy variant doesn't set data-hover; it shows "Copied!" via JS. */
.hub-nav__contact[data-hover]:hover .hub-nav__contact-text{transform:translateY(-160%);opacity:0}
.hub-nav__contact[data-hover]:hover::after{transform:translateY(-160%);opacity:1}
.hub-nav__contact:hover{color:#fff}

.hub-stage{
  flex:1;min-height:0;
  display:flex;flex-direction:column;justify-content:center;
  /* Horizontal padding matches the nav and footer (clamp 24-120px) so the
     cards' left edge aligns with the xix3D logo and right edge aligns with
     the contact button. Symmetric vertical padding so the cards sit on
     the optical center of the viewport (between nav and footer). */
  padding:clamp(20px,2.5vh,40px) clamp(24px,7vw,120px);
  gap:16px;
}

/* Top row: Zeno large + Studios medium. Sized in vh so it scales with viewport. */
.hub-row-top{
  display:grid;
  grid-template-columns:1.65fr 1fr;
  gap:20px;
  height:44vh;
}
.hub-row-top .hub-card--studios,
.hub-row-top .hub-card--zeno{aspect-ratio:auto;height:100%}
/* Bottom row: AI — taller than the top row so the video reads as the
   centerpiece. Top row stacks two narrower cards, so a tall single-card
   bottom row balances the composition. */
.hub-row-bottom{
  display:flex;
  height:42vh;
  width:100%;
}
.hub-row-bottom .hub-card{
  flex:1;height:100%;
}

/* Card base */
.hub-card{
  position:relative;display:block;
  border-radius:24px;overflow:hidden;
  text-decoration:none;color:inherit;
  background:#0a0a0a;
  border:1px solid rgba(255,255,255,.04);
  transition:transform .55s cubic-bezier(.2,.8,.2,1),border-color .35s,opacity .45s ease,filter .45s ease;
  isolation:isolate;
}
.hub-card__bg{
  position:absolute;inset:0;z-index:0;
  filter:saturate(.92) brightness(.85);
  transition:filter .55s cubic-bezier(.2,.8,.2,1),transform 1.2s cubic-bezier(.2,.8,.2,1);
}
.hub-card__bg video,
.hub-card__bg img{
  width:100%;height:100%;object-fit:cover;display:block;
  object-position:center;
}
/* AI video crop favors the upper-middle where the visualizer UI lives */
.hub-card--ai .hub-card__bg video{object-position:center 35%}
/* Zeno bg — dramatic, brand-forward gradient mesh (primary card) */
.hub-card__bg--zeno{
  background:
    radial-gradient(ellipse 80% 60% at 20% 30%,rgba(70,255,129,.28),transparent 65%),
    radial-gradient(ellipse 70% 80% at 75% 60%,rgba(40,63,255,.55),transparent 60%),
    radial-gradient(ellipse 60% 50% at 50% 110%,rgba(68,204,255,.25),transparent 60%),
    linear-gradient(135deg,#08081a,#000);
}
/* Studios bg — calmer, single-tone (secondary card) */
.hub-card__bg--gradient{
  background:
    radial-gradient(ellipse at 75% 25%,rgba(40,63,255,.4),transparent 55%),
    radial-gradient(ellipse at 20% 90%,rgba(70,255,129,.1),transparent 50%),
    #06061a;
}
/* AI bg — barely-there, signals locked/upcoming */
.hub-card__bg--ai{
  background:
    radial-gradient(ellipse at 0% 50%,rgba(40,63,255,.12),transparent 50%),
    #050510;
}
.hub-card__scrim{
  position:absolute;inset:0;z-index:1;
  background:linear-gradient(180deg,rgba(0,0,0,.15) 0%,rgba(0,0,0,0) 30%,rgba(0,0,0,.55) 100%);
  pointer-events:none;
}
.hub-card__content{
  position:relative;z-index:2;
  height:100%;
  display:flex;flex-direction:column;justify-content:flex-end;
  padding:36px 36px 28px;
}
.hub-card__kicker{
  position:absolute;top:24px;left:36px;
  font-size:11px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;
  color:var(--f3);
  z-index:3;
}
.hub-card__pill{
  position:absolute;top:24px;right:24px;z-index:3;
  display:inline-block;
  padding:6px 12px;border-radius:999px;
  font-size:10px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.14);
  color:rgba(255,255,255,.78);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  transition:background .35s,border-color .35s,color .25s,padding .35s,box-shadow .35s;
}
/* On card hover: pill becomes the animated brand gradient */
.hub-card:hover .hub-card__pill{
  background:var(--G);background-size:200%;
  animation:gradShift 4s ease infinite;
  border-color:transparent;
  color:#000;
  font-weight:700;
  padding:7px 14px;
  box-shadow:0 4px 24px rgba(70,255,129,.25);
}
/* (--new modifier no longer used; all pills are now neutral for consistency) */
.hub-card__title{
  font-family:var(--ff);
  font-weight:200;letter-spacing:-.025em;line-height:.95;
  color:#fff;
  margin:0;
  text-shadow:0 4px 30px rgba(0,0,0,.4);
}
/* All card titles use the main site's .h1 scale for consistency */
.hub-card--zeno .hub-card__title,
.hub-card--studios .hub-card__title,
.hub-card--ai .hub-card__title{font-size:clamp(42px,5.5vw,76px);line-height:.95;letter-spacing:-.02em;margin-bottom:0}

.hub-card__sub{
  font-size:15px;line-height:1.5;color:rgba(255,255,255,.92);font-weight:300;
  max-width:420px;
  margin:0;
  text-shadow:0 2px 16px rgba(0,0,0,.5);
  /* Hidden at rest; appears on card hover */
  max-height:0;opacity:0;
  overflow:hidden;
  transition:max-height .45s cubic-bezier(.2,.8,.2,1),opacity .35s ease,margin-top .45s cubic-bezier(.2,.8,.2,1);
  margin-top:0;
}
.hub-card:hover .hub-card__sub{
  max-height:80px;opacity:1;margin-top:12px;
}
.hub-card--ai .hub-card__sub{max-width:none}

/* === AI card: contained video, text on the sides ===
   The video is centered inside the card at its real 16:9 ratio (uncropped).
   Title + sub sit on the left of the video; pill + arrow on the right. */
.hub-card--ai{
  background:radial-gradient(ellipse at center,rgba(8,8,26,1) 0%,#000 70%);
}
/* No gradient corner peek on AI — it has its own video as the visual */
.hub-card--ai::before,
.hub-card--ai:hover::before{display:none}
/* Video is centered inside the card at 16:9, deliberately smaller than the card width
   so black space is visible on left and right. */
.hub-card--ai .hub-card__bg{
  position:absolute;
  /* Centered horizontally inside the card. Fills the full card height,
     16:9 width derived from height — gives the biggest video the card
     can hold without crowding the title or pill. */
  top:50%;left:50%;right:auto;bottom:auto;
  transform:translate(-50%,-50%);
  height:100%;max-height:none;
  width:auto;max-width:none;
  aspect-ratio:16/9;
  border-radius:14px;overflow:hidden;
  filter:saturate(1) brightness(1);
  border:1px solid rgba(255,255,255,.06);
}
.hub-card--ai .hub-card__bg video{object-position:center}
/* No scrim needed — text sits in the empty card area, not overlaying the video */
.hub-card--ai .hub-card__scrim{display:none}

/* AI card content — title aligned with arrow center */
.hub-card--ai .hub-card__content{
  position:relative;z-index:2;
  flex-direction:column;align-items:flex-start;justify-content:flex-end;
  height:100%;
  padding:36px 36px 28px;gap:0;
}
.hub-card--ai .hub-card__text-block{
  display:flex;flex-direction:column;gap:8px;
  /* Title sits over the bottom-left corner of the card. With the video
     centered and tall, the empty strip at the very bottom is short, so
     the text-block wraps tighter than other cards. */
  max-width:60%;
  z-index:3;
}
.hub-card--ai .hub-card__title{
  margin:0;
  text-shadow:0 4px 30px rgba(0,0,0,.4);
}
.hub-card--ai .hub-card__sub{
  margin:0;
  font-size:14px;font-weight:300;line-height:1.5;
  color:rgba(255,255,255,.92);
  text-shadow:0 2px 16px rgba(0,0,0,.5);
  max-width:none;
}
/* Pill repositions to top-right of the card */
.hub-card--ai .hub-card__pill{top:24px;right:24px}
/* Arrow stays bottom-right but doesn't fight the contained video */
.hub-card--ai .hub-card__arrow{bottom:24px;right:24px;width:48px;height:48px}
.hub-card--ai .hub-card__arrow svg{width:18px;height:18px}

/* Arrow circle (right side of clickable cards) */
.hub-card__arrow{
  position:absolute;bottom:36px;right:36px;z-index:3;
  width:56px;height:56px;border-radius:50%;
  background:transparent;
  border:1px solid rgba(255,255,255,.18);
  color:rgba(255,255,255,.7);
  display:flex;align-items:center;justify-content:center;
  transition:background .4s cubic-bezier(.2,.8,.2,1),border-color .4s,color .35s,transform .55s cubic-bezier(.2,.8,.2,1);
}
.hub-card__arrow svg{
  width:20px;height:20px;display:block;
  transition:transform .55s cubic-bezier(.2,.8,.2,1);
}

/* Hover behavior — strongly dim siblings so the hovered card clearly leads */
.hub-stage:has(.hub-card:hover) .hub-card:not(:hover){
  opacity:.28;
  filter:brightness(.5) saturate(.6);
  transform:scale(.985);
}
.hub-stage .hub-card:hover{
  opacity:1;
  transform:translateY(-4px);
  border-color:rgba(255,255,255,.18);
  filter:none;
}
.hub-card:hover .hub-card__bg{
  filter:saturate(1.1) brightness(1);
  transform:scale(1.04);
}
/* AI card: hover keeps the same centering transform — no scale, no shift. */
.hub-card--ai:hover .hub-card__bg{
  transform:translate(-50%,-50%);
}
.hub-card--ai .hub-card__bg{transition:filter .55s cubic-bezier(.2,.8,.2,1)}
.hub-card:hover .hub-card__arrow{
  background:#fff;border-color:#fff;color:#000;
  transform:scale(1.08);
}
.hub-card:hover .hub-card__arrow svg{transform:translate(3px,-3px)}

/* Keyboard focus rings (a11y) */
.hub-card:focus-visible{
  outline:2px solid #46FF81;outline-offset:4px;
  border-color:rgba(70,255,129,.4);
}
.hub-nav__contact:focus-visible{
  outline:2px solid #46FF81;outline-offset:3px;border-radius:2px;
}

/* Brand-gradient corner peek (hidden at rest, shows on hover) — same pattern as blog cards */
.hub-card::before{
  content:"";position:absolute;
  top:0;left:0;
  width:30%;height:30%;
  background:var(--G);background-size:200% 200%;
  animation:gradShift 6s ease infinite;
  border-radius:24px;
  opacity:0;z-index:-1;
  transition:top .45s cubic-bezier(.2,.8,.2,1),left .45s cubic-bezier(.2,.8,.2,1),opacity .35s ease;
  pointer-events:none;
}
.hub-card:hover::before{top:-12px;left:-12px;opacity:.85}
.hub-card--ai:hover::before{opacity:.5}

/* Mobile */
/* === Mobile: switch from fixed-viewport to scrollable stacked layout === */
@media(max-width:840px){
  /* Allow scrolling on mobile — single-viewport is desktop-only */
  .hub-body{height:auto;min-height:100vh;overflow:auto;overflow-x:hidden}

  /* Mobile nav matches legal-nav mobile spec exactly (same --pad rhythm) */
  .hub-nav{padding:18px clamp(24px,7vw,120px)}
  .hub-brand,.hub-brand img{height:28px}

  /* Stage: scrollable, cards stack vertically with comfortable spacing.
     Horizontal padding matches mobile nav so cards align with logo + back. */
  .hub-stage{
    flex:0 0 auto;
    justify-content:flex-start;
    padding:0 clamp(24px,7vw,120px) 24px;gap:14px;
  }

  /* Top row stacks into a single column */
  .hub-row-top{
    grid-template-columns:1fr;
    height:auto;gap:14px;
  }
  .hub-row-top .hub-card,
  .hub-row-top .hub-card--studios,
  .hub-row-top .hub-card--zeno{
    aspect-ratio:16/11;height:auto;
  }

  /* AI card: video back to full-width since horizontal space is precious */
  .hub-row-bottom{
    height:auto;width:100%;
  }
  .hub-row-bottom .hub-card{
    height:auto;aspect-ratio:16/11;
  }
  .hub-card--ai .hub-card__bg{
    /* Contained 16:9, near full width with small breathing room on the sides.
       Shifted up a touch so the title/sub sit lower in the card. */
    position:absolute;
    top:42%;left:50%;right:auto;bottom:auto;
    transform:translate(-50%,-50%);
    width:92%;max-width:none;height:auto;
    aspect-ratio:16/9;
    border-radius:10px;
    border:1px solid rgba(255,255,255,.06);
  }
  /* No transforms on touch — kills the tap-and-hold scale jump */
  .hub-card--ai:hover .hub-card__bg,
  .hub-card--ai:active .hub-card__bg{transform:translate(-50%,-50%) !important}
  .hub-card__content,
  .hub-card--ai .hub-card__content{
    padding:24px;
  }
  .hub-card--ai .hub-card__text-block{max-width:100%}

  /* Card titles smaller on mobile */
  .hub-card--zeno .hub-card__title,
  .hub-card--studios .hub-card__title,
  .hub-card--ai .hub-card__title{font-size:clamp(40px,11vw,64px)}

  /* No hover on touch — show the sub by default so users can read it */
  .hub-card__sub{
    max-height:none;opacity:1;
    margin-top:10px;
    font-size:13px;
  }

  /* Pill smaller, arrow smaller */
  .hub-card__pill{top:16px;right:16px;font-size:9px;padding:5px 10px}
  .hub-card__arrow{bottom:20px;right:20px;width:44px;height:44px}
  .hub-card__arrow svg{width:16px;height:16px}

  /* Hover dim and arrow-fill don't apply on touch — disable to avoid sticky states */
  @media (hover:none) {
    .hub-stage:has(.hub-card:hover) .hub-card:not(:hover){opacity:1}
    .hub-card:hover,.hub-card:active{transform:none !important}
    .hub-card:hover .hub-card__bg,
    .hub-card:active .hub-card__bg{transform:none !important;filter:saturate(.92) brightness(.85) !important}
    .hub-card--ai:hover .hub-card__bg,
    .hub-card--ai:active .hub-card__bg{transform:translate(-50%,-50%) !important}
    .hub-card:hover .hub-card__arrow{background:transparent;border-color:rgba(255,255,255,.18);color:rgba(255,255,255,.7);transform:none}
    .hub-card:hover .hub-card__pill{
      background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.14);
      color:rgba(255,255,255,.78);font-weight:600;padding:5px 10px;animation:none;box-shadow:none;
    }
  }

  /* Mobile-only bottom-up dark gradient behind text on all 3 cards (text pop) */
  .hub-card .hub-card__content::before{
    content:"";position:absolute;
    left:0;right:0;bottom:0;
    height:65%;
    background:linear-gradient(180deg,transparent 0%,rgba(0,0,0,.55) 55%,rgba(0,0,0,.85) 100%);
    pointer-events:none;z-index:-1;
  }
  /* AI card uses contained video — gradient should sit inside the card,
     not the content area. Add it on the card itself instead. */
  .hub-card--ai .hub-card__content::before{display:none}
  .hub-card--ai::after{
    content:"";position:absolute;
    left:0;right:0;bottom:0;
    height:45%;
    background:linear-gradient(180deg,transparent 0%,rgba(0,0,0,.6) 60%,rgba(0,0,0,.9) 100%);
    pointer-events:none;z-index:1;
  }
  /* Make sure title/sub/pill/arrow sit above the AI gradient */
  .hub-card--ai .hub-card__content,
  .hub-card--ai .hub-card__pill,
  .hub-card--ai .hub-card__arrow{z-index:2}

  /* Mobile: tighten the corner radials so they don't dominate, and turn off
     the fixed background-attachment (Safari/iOS treats fixed bg poorly during scroll) */
  .hub-body{
    background-attachment:scroll;
    background:
      radial-gradient(ellipse 90vw 50vh at 0% 100%, #5b8bff 0%, #124DF1 18%, rgba(18,77,241,.35) 50%, rgba(18,77,241,0) 75%),
      radial-gradient(ellipse 90vw 50vh at 100% 100%, #5b8bff 0%, #124DF1 18%, rgba(18,77,241,.35) 50%, rgba(18,77,241,0) 75%),
      #02020A;
  }
  .hub-body::before{opacity:.6}

  /* Cursor follower hides on mobile (already gated by hover:hover); be safe */
  .cursor{display:none !important}
}