/* ============================================================
   RETENCY · STUDIO LAYER  —  LIGHT EDITORIAL
   Warm white page · full-bleed black bands for the work.
   Scroll-driven motion. No WebGL. GPU transforms only.
   Loads AFTER styles.css and overrides it on .studio pages.
   ============================================================ */

body.studio{
  /* light tokens */
  --paper:#f7f5f0;
  --ink:#0c0c0e;
  --ink-2:#3a3a40;
  --ink-3:#76767e;
  --rule:rgba(12,12,14,0.13);
  --rule-2:rgba(12,12,14,0.07);
  --red:#e63846;

  background:var(--paper);
  color:var(--ink);

  /* ---- remap the legacy dark-theme tokens -------------------------
     styles.css is the dark theme and ~120 of its rules paint with
     --text/--text-dim/--text-mute/--line. Defining only the new --ink
     tokens left every one of those rules still painting near-white on
     the cream page (that is what made .svc-link and friends vanish).
     Remap at the root so the whole legacy sheet inherits the light
     theme, then flip them back inside the dark bands below. */
  --text:var(--ink);
  --text-soft:#1c1c22;
  --text-dim:var(--ink-2);
  --text-mute:var(--ink-3);
  --line:var(--rule-2);
  --line-2:var(--rule);
}

/* Dark scopes flip the same tokens back, so anything nested in a band
   stays legible without per-element overrides. */
body.studio .band,
body.studio .rail-sec,
body.studio .marquee-section,
body.studio .swa,
body.studio .work-card,
body.studio .rail-card,
body.studio .article-cta,
body.studio .circ-card,
body.studio .trailer-overlay,
body.studio .shivaji-hero,
body.studio .shivaji-teaser,
body.studio .shivaji-bg,
body.studio .shivaji-hero-bg,
body.studio .footer{
  --text:#f4f2ee;
  --text-soft:rgba(244,242,238,.88);
  --text-dim:rgba(244,242,238,.62);
  --text-mute:rgba(244,242,238,.45);
  --line:rgba(244,242,238,.10);
  --line-2:rgba(244,242,238,.18);
}

body.studio .bg-ambient,
body.studio .bg-grain{ display:none; }

/* kill the dark-theme section defaults on light pages.
   These paint with the scoped tokens, NOT raw --ink, so a heading
   inside a dark band goes light automatically instead of being forced
   to near-black on near-black (which is what happened to .rail-title). */
body.studio .section{ background:transparent; }
body.studio .section-title,
body.studio h1,body.studio h2,body.studio h3{ color:var(--text); }
body.studio .section-desc,
body.studio p{ color:var(--text-dim); }
body.studio .section-num{ color:var(--text-mute); }
body.studio .section-num em{ color:var(--red); font-style:normal; }
body.studio .section-title em{ color:var(--red); }

/* ============================================================
   NAV — light glass
   ============================================================ */
body.studio .nav{
  background:rgba(247,245,240,.72);
  border:1px solid var(--rule);
  backdrop-filter:blur(18px) saturate(1.4);
  -webkit-backdrop-filter:blur(18px) saturate(1.4);
}
/* --text, not --ink: .brand-name also appears in the dark footer, where
   a hardcoded ink value put near-black on near-black. */
body.studio .nav-links a,
body.studio .brand-name{ color:var(--text); }
body.studio .nav-links a:hover{ color:var(--red); }
body.studio .nav-cta{ background:var(--ink); color:var(--paper); border-color:var(--ink); }
body.studio .nav-cta:hover{ background:var(--red); border-color:var(--red); }
body.studio .nav-burger span{ background:var(--ink); }
body.studio .mobile-menu{ background:var(--paper); }
body.studio .mobile-menu a{ color:var(--ink); border-color:var(--rule); }

/* buttons */
body.studio .btn-primary{ background:var(--ink); color:var(--paper); border-color:var(--ink); }
body.studio .btn-primary:hover{ background:var(--red); border-color:var(--red); color:#fff; }
body.studio .btn-ghost{ color:var(--ink); border-color:var(--rule); background:transparent; }
body.studio .btn-ghost:hover{ border-color:var(--ink); background:transparent; }

/* ============================================================
   BAND — full-bleed dark panels for media
   ============================================================ */
.band{
  position:relative;
  background:#0a0a0c;
  color:#f4f2ee;
  /* break out of .wrap without horizontal scroll */
  padding-block:clamp(56px,8vw,110px);
}
.band h2,.band h3,.band .section-title{ color:#f4f2ee; }
.band p,.band .section-desc{ color:rgba(244,242,238,.62); }
.band .section-num{ color:rgba(244,242,238,.45); }
.band .section-title em,.band .section-num em{ color:var(--red); }

/* ============================================================
   HERO — editorial, type-led, light
   ============================================================ */
.shero{
  position:relative;
  padding:clamp(120px,17vh,190px) 0 clamp(28px,5vh,54px);
  overflow:hidden;
}
.shero-eyebrow{
  font-family:var(--f-mono); font-size:10px; letter-spacing:.2em; text-transform:uppercase;
  color:var(--red); margin-bottom:26px;
  display:flex; align-items:center; gap:10px;
}
.shero-eyebrow::before{ content:""; width:26px; height:1px; background:var(--red); }

.shero-title{
  font-family:var(--f-display); font-weight:500;
  font-size:clamp(2.7rem,8.2vw,8.4rem);
  line-height:.92; letter-spacing:-.055em;
  font-variation-settings:'wdth' 86,'opsz' 144;
  color:var(--ink); text-wrap:balance;
  margin:0 0 clamp(26px,4vw,44px);
}
.shero-title em{ font-style:italic; color:var(--red); font-weight:400; }

.shero-foot{
  display:grid; grid-template-columns:1.05fr .95fr; gap:40px; align-items:end;
  padding-top:26px; border-top:1px solid var(--rule);
}
@media (max-width:860px){ .shero-foot{ grid-template-columns:1fr; gap:22px; } }
.shero-sub{
  font-family:var(--f-body); font-size:clamp(14.5px,1.35vw,17px);
  line-height:1.6; color:var(--ink-2); max-width:46ch; margin:0;
}
.shero-actions{ display:flex; gap:12px; flex-wrap:wrap; justify-content:flex-end; }
@media (max-width:860px){ .shero-actions{ justify-content:flex-start; } }

.shero-stats{ display:flex; border-top:1px solid var(--rule); margin-top:24px; flex-wrap:wrap; }
.shero-stat{ flex:1 1 0; min-width:112px; padding:18px 18px 6px 0; }
.shero-stat + .shero-stat{ padding-left:18px; border-left:1px solid var(--rule); }
.shero-stat b{
  display:block; font-family:var(--f-display); font-weight:500; font-style:italic;
  font-size:clamp(21px,2.7vw,34px); line-height:1; letter-spacing:-.03em; color:var(--ink);
}
.shero-stat span{
  display:block; margin-top:7px;
  font-family:var(--f-mono); font-size:9px; letter-spacing:.13em; text-transform:uppercase;
  color:var(--ink-3);
}
@media (max-width:600px){
  .shero-stat{ min-width:0; padding:12px 9px 4px 0; }
  .shero-stat + .shero-stat{ padding-left:9px; }
  .shero-stat b{ font-size:18px; }
  .shero-stat span{ font-size:7.5px; letter-spacing:.07em; }
}

/* ============================================================
   REEL — the showreel that grows with your scroll
   sticky runway + pure transform scale = 60fps
   ============================================================ */
.reel-runway{ position:relative; height:230vh; background:#0a0a0c; }
@media (max-width:768px){ .reel-runway{ height:170vh; } }

.reel-sticky{
  position:sticky; top:0;
  height:100svh; min-height:520px;
  display:grid; place-items:center;
  overflow:hidden;
}
.reel-frame{
  position:relative;
  width:100%; height:100%;
  overflow:hidden;
  transform:scale(.56);
  border-radius:26px;
  will-change:transform;
  background:#000;
}
@media (max-width:768px){ .reel-frame{ transform:scale(.82); border-radius:16px; } }
.reel-frame video{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; display:block;
}
.reel-vig{
  position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(180deg,rgba(10,10,12,.42) 0%,transparent 26%,transparent 62%,rgba(10,10,12,.72) 100%);
}
.reel-cap{
  position:absolute; left:0; right:0; bottom:0; z-index:2;
  padding:clamp(20px,3vw,40px);
  display:flex; justify-content:space-between; align-items:flex-end; gap:20px; flex-wrap:wrap;
  font-family:var(--f-mono); font-size:10px; letter-spacing:.15em; text-transform:uppercase;
  color:rgba(244,242,238,.78);
}
.reel-cap b{
  font-family:var(--f-display); font-style:italic; font-weight:500;
  font-size:clamp(20px,3.2vw,42px); letter-spacing:-.03em; text-transform:none;
  color:#fff; display:block;
}
/* scrub progress line */
.reel-bar{ position:absolute; left:0; bottom:0; height:2px; background:var(--red); width:0; z-index:3; }

/* ============================================================
   INFINITE RAIL — the main event
   ============================================================ */
.rail-sec{ position:relative; }
.rail-head{
  display:flex; justify-content:space-between; align-items:flex-end;
  gap:20px; margin-bottom:28px; flex-wrap:wrap;
}
.rail-hint{
  font-family:var(--f-mono); font-size:9.5px; letter-spacing:.14em; text-transform:uppercase;
  color:rgba(244,242,238,.5); display:flex; align-items:center; gap:9px;
}
.rail-hint i{ width:20px; height:1px; background:var(--red); display:inline-block;
  animation:railhint 2.2s cubic-bezier(0.65,0.05,0.36,1) infinite; }
@keyframes railhint{ 0%,100%{transform:translateX(0);opacity:.45} 50%{transform:translateX(9px);opacity:1} }

.rail-view{
  position:relative; overflow:hidden; cursor:grab;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 6%,#000 94%,transparent 100%);
          mask-image:linear-gradient(90deg,transparent 0,#000 6%,#000 94%,transparent 100%);
}
.rail-view:active{ cursor:grabbing; }
@media (max-width:768px){ .rail-view{ -webkit-mask-image:none; mask-image:none; } }

.rail-track{ display:flex; gap:18px; will-change:transform; padding:4px 0 12px; }
.rail-card{
  position:relative; flex:0 0 auto;
  width:clamp(228px,24vw,330px);
  aspect-ratio:9/13;
  border-radius:14px; overflow:hidden;
  background:#151519;
  border:1px solid rgba(244,242,238,.10);
  transition:border-color .5s var(--ease-out);
}
.rail-card:hover{ border-color:rgba(230,56,70,.55); }
.rail-card video,.rail-card img{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; display:block;
  transition:transform .8s var(--ease-out);
}
.rail-card:hover video{ transform:scale(1.05); }
.rail-card::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(180deg,transparent 44%,rgba(8,8,10,.92) 100%);
}
.rail-meta{ position:absolute; left:0; right:0; bottom:0; z-index:2; padding:18px 18px 16px; }
.rail-tag{
  font-family:var(--f-mono); font-size:8.5px; letter-spacing:.15em; text-transform:uppercase;
  color:var(--red); display:block; margin-bottom:7px;
}
.rail-title{
  font-family:var(--f-display); font-weight:500; font-size:clamp(15px,1.3vw,18px);
  line-height:1.2; letter-spacing:-.02em; color:#fff; margin:0;
}
.rail-idx{
  position:absolute; top:12px; right:12px; z-index:2;
  font-family:var(--f-mono); font-size:8.5px; letter-spacing:.1em; color:rgba(244,242,238,.8);
  background:rgba(8,8,10,.5); border:1px solid rgba(244,242,238,.14);
  padding:4px 8px; border-radius:100px; backdrop-filter:blur(6px);
}
@media (max-width:600px){ .rail-card{ width:72vw; } }

/* ============================================================
   LIGHT-THEME COMPONENT REPAIRS
   ============================================================ */
/* marquee lives on a dark band so the white SuperMoney mark stays visible */
body.studio .marquee-section{ background:#0a0a0c; padding-block:clamp(30px,4vw,46px); }
body.studio .marquee-label{ color:rgba(244,242,238,.42); }

/* service / work / proof cards on paper */
body.studio .svc,
body.studio .work-card,
body.studio .testimonial,
body.studio .metric-card,
body.studio .trust-cell,
body.studio .price-card,
body.studio .retainer-card,
body.studio .blog-card,
body.studio .faq-item{
  background:#fff;
  border-color:var(--rule);
}
body.studio .svc-title,body.studio .work-title,body.studio .faq-q,
body.studio .blog-card-title,body.studio .trust-value{ color:var(--ink); }
body.studio .svc-desc,body.studio .testi-quote,body.studio .blog-card-excerpt,
body.studio .process-desc{ color:var(--ink-2); }
body.studio .svc-num,body.studio .process-label,body.studio .trust-label,
body.studio .blog-card-tag,body.studio .mono{ color:var(--ink-3); }
/* work tags live on a red-tinted pill inside a DARK card — muted ink
   grey disappeared against it. Keep them light. */
body.studio .work-tag,
body.studio .work-tag.gold{ color:#f6a8ae; border-color:rgba(230,56,70,.42); }
/* dark pill button: the label inherited the dark-theme --bg, so it was
   near-black on the near-black pill. styles.css sets that colour with
   !important, so this override has to carry it too. */
body.studio .mobile-menu a.mobile-menu-cta,
body.studio a.mobile-sticky-btn,
body.studio a.mobile-sticky-btn span{ color:var(--paper) !important; }
body.studio .svc-tag{ border-color:var(--rule); color:var(--ink-2); }
body.studio .process-grid,body.studio .process-step{ border-color:var(--rule); }
body.studio .process-num{ color:var(--red); }
body.studio .timeline-item{ border-color:var(--rule); }
body.studio .faq-item{ border-color:var(--rule); }
body.studio .faq-a{ color:var(--ink-2); }

/* work cards keep their dark media wells */
body.studio .work-placeholder{ background:#0f0f12; }
body.studio .work-overlay{ background:linear-gradient(180deg,transparent 40%,rgba(8,8,10,.92) 100%); }
body.studio .work-title,body.studio .work-meta{ color:#fff; }

/* contact form on paper */
body.studio .contact-form{
  background:#fff; border-color:var(--rule); backdrop-filter:none;
}
body.studio .form-field label{ color:var(--ink-3); }
body.studio .form-field input,
body.studio .form-field textarea,
body.studio .form-field select{
  background:var(--paper); border-color:var(--rule); color:var(--ink);
}
body.studio .form-field select option{ background:#fff; color:var(--ink); }
body.studio .form-field input:focus,
body.studio .form-field textarea:focus,
body.studio .form-field select:focus{ border-color:var(--red); background:#fff; }
body.studio .contact-method{ border-color:var(--rule); }
body.studio .contact-method-icon{ background:#fff; border-color:var(--rule); }
body.studio .contact-method-icon svg{ color:var(--red); }
body.studio .contact-method-value{ color:var(--ink); }
body.studio .qualification-line{ background:#fff; border-color:var(--rule); color:var(--ink-2); }

/* founder + proof */
body.studio .founder-quote{ color:var(--ink); }
body.studio .testi-metric em{ color:var(--red); }
body.studio .founder-sign-name{ color:var(--ink); }

/* page headers on inner pages */
body.studio .page-header{ border-color:var(--rule); }
body.studio .page-header h1{ color:var(--ink); }
body.studio .page-header h1 em{ color:var(--red); }
body.studio .page-header p{ color:var(--ink-2); }

/* footer stays dark — anchors the page */
body.studio .footer{ background:#0a0a0c; border-color:transparent; }

/* ============================================================
   HUD — technical hairlines (light)
   ============================================================ */
.hud{
  position:fixed; inset:0; z-index:90; pointer-events:none;
  font-family:var(--f-mono); font-size:10px; letter-spacing:.14em; text-transform:uppercase;
  color:rgba(12,12,14,.42);
  opacity:0; transition:opacity .9s var(--ease-out) .3s;
}
.hud.ready{ opacity:1; }
@media (max-width:768px){ .hud{ font-size:8.5px; letter-spacing:.1em; } }
.hud-frame{ position:absolute; inset:16px; border:1px solid rgba(12,12,14,.10); }
@media (max-width:768px){ .hud-frame{ inset:9px; } }
.hud-mark{ position:absolute; width:11px; height:11px; }
.hud-mark::before,.hud-mark::after{ content:""; position:absolute; background:var(--red); opacity:.85; }
.hud-mark::before{ left:50%; top:0; width:1px; height:100%; transform:translateX(-50%); }
.hud-mark::after{ top:50%; left:0; height:1px; width:100%; transform:translateY(-50%); }
.hud-mark.tl{ left:-6px; top:-6px; } .hud-mark.tr{ right:-6px; top:-6px; }
.hud-mark.bl{ left:-6px; bottom:-6px; } .hud-mark.br{ right:-6px; bottom:-6px; }
.hud-read{ position:absolute; display:flex; gap:14px; align-items:center; white-space:nowrap; }
.hud-read.bl{ left:0; bottom:-20px; } .hud-read.br{ right:0; bottom:-20px; } .hud-read.tr{ right:0; top:-20px; }
@media (max-width:768px){ .hud-read.tr{ display:none; } .hud-read.bl,.hud-read.br{ bottom:-14px; gap:8px; } }
.hud-prog{
  position:absolute; right:-1px; top:0; width:1px; height:100%;
  background:var(--red); transform:scaleY(0); transform-origin:top;
}
.hud-cross{ display:none; }

/* ============================================================
   CURSOR
   ============================================================ */
body.studio{ cursor:auto; }
.cur{
  position:fixed; top:0; left:0; z-index:120; pointer-events:none;
  width:7px; height:7px; border-radius:50%; background:var(--red);
  transform:translate(-50%,-50%);
}
.cur-ring{
  position:fixed; top:0; left:0; z-index:119; pointer-events:none;
  width:34px; height:34px; border-radius:50%;
  border:1px solid rgba(12,12,14,.28);
  transform:translate(-50%,-50%);
  transition:width .35s var(--ease-out),height .35s var(--ease-out),border-color .35s,background .35s;
}
.cur-ring.hot{ width:64px; height:64px; border-color:var(--red); background:rgba(230,56,70,.08); }
.cur-ring .lbl{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  font-family:var(--f-mono); font-size:8px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--red); opacity:0; transition:opacity .25s;
}
.cur-ring.hot .lbl{ opacity:1; }
/* over dark bands, flip the cursor to light */
.cur-ring.on-dark{ border-color:rgba(244,242,238,.45); }
.cur.on-dark{ background:#fff; }
@media (hover:none),(pointer:coarse){ .cur,.cur-ring{ display:none; } }

/* ============================================================
   KINETIC TYPE + REVEALS
   ============================================================ */
.kt-word{ display:inline-block; white-space:nowrap; }
.kt{
  display:inline-block; overflow:hidden; vertical-align:top;
  padding:.06em .05em .14em; margin:-.06em -.05em -.14em;
}
.kt > span{ display:inline-block; will-change:transform; }
.js .kt-armed > span{ transform:translateY(105%); }

.js .sr{ opacity:0; transform:translateY(24px); }
.sr.in{ opacity:1; transform:none; transition:opacity .9s var(--ease-out),transform .9s var(--ease-out); }

/* ============================================================
   REDUCED MOTION / NO-JS
   ============================================================ */
@media (prefers-reduced-motion:reduce){
  .cur,.cur-ring{ display:none !important; }
  .rail-hint i{ animation:none; }
  .js .kt-armed > span{ transform:none !important; }
  .js .sr{ opacity:1 !important; transform:none !important; }
  body.studio{ cursor:auto; }
  .reel-runway{ height:auto; }
  .reel-sticky{ position:static; height:auto; }
  .reel-frame{ transform:none; border-radius:0; aspect-ratio:16/9; height:auto; }
}
html:not(.js) .kt-armed > span,
html:not(.js) .sr{ opacity:1 !important; transform:none !important; }
html:not(.js) .reel-frame{ transform:none; }


/* ============================================================
   HERO X — type + real client work converging into the reel
   ============================================================ */
.hx{ position:relative; height:230vh; }
@media (max-width:768px){ .hx{ height:190vh; } }

.hx-stick{
  position:sticky; top:0; height:100svh; min-height:560px;
  overflow:hidden; display:grid; place-items:center;
}

/* scattered work tiles */
.hx-field{ position:absolute; inset:0; z-index:0; pointer-events:none; }
.hx-tile{
  position:absolute; left:50%; top:50%;
  width:clamp(84px,10.5vw,158px); aspect-ratio:9/13;
  margin:0; border-radius:12px; overflow:hidden;
  background:#111; box-shadow:0 18px 50px -18px rgba(12,12,14,.42);
  transform:translate(-50%,-50%);
  will-change:transform,opacity;
}
.hx-tile video{ width:100%; height:100%; object-fit:cover; display:block; }
@media (max-width:768px){ .hx-tile{ width:clamp(66px,20vw,104px); border-radius:9px; } }

/* copy */
.hx-copy{ position:relative; z-index:2; width:100%; will-change:transform,opacity; }
.hx-eyebrow{
  font-family:var(--f-body); font-size:11px; font-weight:600;
  letter-spacing:.16em; text-transform:uppercase;
  color:var(--red); margin-bottom:22px;
  display:flex; align-items:center; gap:10px;
}
.hx-eyebrow::before{ content:""; width:24px; height:1px; background:var(--red); }

.hx-title{
  font-family:var(--f-display); font-weight:600;
  font-size:clamp(2.5rem,7.6vw,7.2rem);
  line-height:.95; letter-spacing:-.045em;
  font-variation-settings:'wdth' 82,'opsz' 96;
  color:var(--ink); text-wrap:balance; margin:0 0 clamp(24px,3.4vw,40px);
  max-width:17ch;
}
.hx-title em{ font-style:normal; color:var(--red); }

.hx-foot{
  display:grid; grid-template-columns:1.05fr .95fr; gap:36px; align-items:end;
  padding-top:24px; border-top:1px solid var(--rule);
}
@media (max-width:860px){ .hx-foot{ grid-template-columns:1fr; gap:20px; } }
.hx-sub{ font-size:clamp(14.5px,1.3vw,16.5px); line-height:1.6; color:var(--ink-2); max-width:46ch; margin:0; }
.hx-actions{ display:flex; gap:12px; flex-wrap:wrap; justify-content:flex-end; }
@media (max-width:860px){ .hx-actions{ justify-content:flex-start; } }

.hx-stats{ display:flex; border-top:1px solid var(--rule); margin-top:22px; flex-wrap:wrap; }
.hx-stat{ flex:1 1 0; min-width:110px; padding:16px 16px 4px 0; }
.hx-stat + .hx-stat{ padding-left:16px; border-left:1px solid var(--rule); }
.hx-stat b{
  display:block; font-family:var(--f-display); font-weight:700;
  font-size:clamp(20px,2.5vw,31px); line-height:1; letter-spacing:-.035em;
  font-variation-settings:'wdth' 80; color:var(--ink);
}
.hx-stat span{
  display:block; margin-top:6px; font-family:var(--f-body);
  font-size:9.5px; font-weight:500; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3);
}
@media (max-width:600px){
  .hx-stat{ min-width:0; padding:11px 8px 4px 0; }
  .hx-stat + .hx-stat{ padding-left:8px; }
  .hx-stat b{ font-size:17px; }
  .hx-stat span{ font-size:7.5px; letter-spacing:.06em; }
}

/* the reel now sits mid-page and is clickable */
.reel-frame{ display:block; text-decoration:none; }
.reel-go{ color:#fff; }
.reel-cap b{ font-variation-settings:'wdth' 80; font-style:normal; }

@media (prefers-reduced-motion:reduce){
  .hx{ height:auto; }
  .hx-stick{ position:static; height:auto; padding:140px 0 60px; }
  .hx-field{ display:none; }
}


/* markings + custom cursor removed — keep it human */
.hud,.cur,.cur-ring{ display:none !important; }
body.studio{ cursor:auto !important; }


/* ============================================================
   HERO BANNER — the joined tiles become one CTA slab
   ============================================================ */
.hx-field{ }
.hx-tile{ transition:filter .5s linear; }

.hx-banner{
  position:absolute; left:50%; top:50%; z-index:3;
  transform:translate(-50%,-50%);
  display:flex; flex-direction:column; align-items:center; gap:16px;
  text-align:center; padding:0 24px;
  opacity:0; pointer-events:none;
  will-change:opacity,transform;
}
.hx-banner.on{ pointer-events:auto; }
.hx-banner-kicker{
  font-family:var(--f-body); font-size:10.5px; font-weight:600;
  letter-spacing:.18em; text-transform:uppercase; color:rgba(255,255,255,.72);
}
.hx-banner-line{
  font-family:var(--f-display); font-weight:700;
  font-size:clamp(1.7rem,5vw,4.2rem); line-height:1;
  letter-spacing:-.045em; font-variation-settings:'wdth' 80;
  color:#fff; text-wrap:balance; max-width:16ch;
}
.hx-banner-line em{ font-style:normal; color:var(--red); }
.hx-banner-cta{ margin-top:6px; }
@media (max-width:600px){ .hx-banner{ gap:12px; } }

/* ============================================================
   SWARAJYA — title, then the film opens, then the invitation
   ============================================================ */
.swa{ position:relative; height:260vh; background:#07070a; }
@media (max-width:768px){ .swa{ height:200vh; } }
.swa-stick{
  position:sticky; top:0; height:100svh; min-height:540px;
  overflow:hidden; display:grid; place-items:center;
}
.swa-frame{
  position:absolute; inset:0;
  overflow:hidden; background:#000;
  transform:scale(.52); border-radius:26px;
  will-change:transform,border-radius;
}
@media (max-width:768px){ .swa-frame{ transform:scale(.86); border-radius:14px; } }
.swa-frame video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.swa-vig{
  position:absolute; inset:0;
  background:linear-gradient(180deg,rgba(7,7,10,.55) 0%,rgba(7,7,10,.10) 38%,rgba(7,7,10,.86) 100%);
}
.swa-lead{
  position:relative; z-index:2; text-align:center; padding:0 24px;
  will-change:transform,opacity;
}
.swa-badge{
  display:inline-block; margin-bottom:20px;
  font-family:var(--f-body); font-size:10.5px; font-weight:600;
  letter-spacing:.18em; text-transform:uppercase; color:var(--red);
  border:1px solid rgba(230,56,70,.42); border-radius:100px; padding:7px 15px;
  background:rgba(230,56,70,.08); backdrop-filter:blur(8px);
}
.swa-title{
  font-family:var(--f-display); font-weight:700;
  font-size:clamp(2.3rem,7.4vw,6.6rem); line-height:.95;
  letter-spacing:-.05em; font-variation-settings:'wdth' 80;
  color:#fff; margin:0; text-wrap:balance;
}
.swa-title em{ font-style:normal; color:var(--red); }

.swa-invite{
  position:absolute; z-index:3; left:50%; bottom:clamp(40px,9vh,96px);
  transform:translateX(-50%);
  width:min(680px,88vw); text-align:center;
  opacity:0; pointer-events:none; will-change:opacity,transform;
}
.swa-invite.on{ pointer-events:auto; }
.swa-desc{
  font-family:var(--f-body); font-size:clamp(14px,1.3vw,16.5px); line-height:1.6;
  color:rgba(244,242,238,.86); margin:0 0 22px;
}
@media (prefers-reduced-motion:reduce){
  .swa{ height:auto; }
  .swa-stick{ position:static; height:auto; padding:90px 0; }
  .swa-frame{ position:relative; inset:auto; transform:none; border-radius:0; aspect-ratio:16/9; }
  .swa-invite{ position:static; transform:none; opacity:1; margin-top:26px; }
  .hx-banner{ display:none; }
}


/* ============================================================
   BREATHING ROOM — generous, confident spacing
   ============================================================ */
body.studio .section{ padding-block:clamp(84px,11vw,168px); }
body.studio .section-head{ margin-bottom:clamp(38px,5vw,72px); }
body.studio .section-title{
  font-family:var(--f-display); font-weight:700;
  letter-spacing:-.045em; font-variation-settings:'wdth' 82;
  line-height:1.0;
}
body.studio .section-title em{ font-style:normal; }
body.studio .section-num{
  font-family:var(--f-body); font-size:11px; font-weight:600;
  letter-spacing:.16em; text-transform:uppercase; margin-bottom:16px;
}
body.studio .section-desc{ max-width:56ch; font-size:clamp(15px,1.25vw,17px); line-height:1.65; }

/* cards get room to breathe */
body.studio .services-grid{ gap:clamp(14px,1.6vw,22px); }
body.studio .svc{ padding:clamp(26px,3vw,42px); }
body.studio .work-grid{ gap:clamp(14px,1.6vw,22px); }

/* ============================================================
   SECTION MOTION — nothing sits still
   ============================================================ */
.js body.studio .rv{ opacity:0; transform:translateY(28px); }
body.studio .rv.in{
  opacity:1; transform:none;
  transition:opacity .85s cubic-bezier(0.16,1,0.3,1), transform .85s cubic-bezier(0.16,1,0.3,1);
}
/* stagger children */
body.studio .rv.in:nth-child(2){ transition-delay:.07s }
body.studio .rv.in:nth-child(3){ transition-delay:.14s }
body.studio .rv.in:nth-child(4){ transition-delay:.21s }
body.studio .rv.in:nth-child(5){ transition-delay:.28s }
body.studio .rv.in:nth-child(6){ transition-delay:.35s }

/* counters read as live instruments */
body.studio .testi-metric em,
body.studio .hx-stat b{ font-variant-numeric:tabular-nums; }

@media (prefers-reduced-motion:reduce){
  .js body.studio .rv{ opacity:1 !important; transform:none !important; }
}


/* ============================================================
   SOFT BAND EDGES — no more hard white/black cuts
   ============================================================ */
body.studio .marquee-section{
  background:linear-gradient(180deg,
    var(--paper) 0%, #0a0a0c 22%, #0a0a0c 78%, var(--paper) 100%);
  padding-block:clamp(72px,9vw,120px);
}
body.studio .marquee-label{
  color:rgba(244,242,238,.5);
  margin-bottom:30px;
}

/* the work rail becomes its own dark stage with feathered edges */
body.studio .rail-sec{
  background:linear-gradient(180deg,
    var(--paper) 0%, #0a0a0c 14%, #0a0a0c 86%, var(--paper) 100%);
  padding-block:clamp(90px,11vw,150px);
}
body.studio .rail-sec .section-num{ color:rgba(244,242,238,.5); }
body.studio .rail-sec .section-title{ color:#f4f2ee; }
body.studio .rail-sec .section-title em{ color:var(--red); }

/* Swarajya fades in from the page and out into the footer */
body.studio .swa{
  background:linear-gradient(180deg,
    var(--paper) 0%, #07070a 9%, #07070a 100%);
}

/* generous, readable rhythm everywhere */
body.studio .section{ padding-block:clamp(100px,13vw,190px); }
body.studio .rail-head{ margin-bottom:clamp(30px,4vw,52px); }

/* longer runways so people can actually read as it moves */
.hx{ height:280vh; }
.swa{ height:320vh; }
@media (max-width:768px){ .hx{ height:210vh; } .swa{ height:240vh; } }


/* generative pipeline graphic (canvas, ~0 payload) */
.sig{ position:relative; height:clamp(90px,13vw,150px); margin:0 0 clamp(26px,3.4vw,46px); }
.sig-canvas{ position:absolute; inset:0; display:block; }
@media (prefers-reduced-motion:reduce){ .sig{ display:none; } }


/* ============================================================
   TYPE ROLES — display vs body. Families come from --f-display /
   --f-body in styles.css, never hardcoded here, so swapping the
   face is a one-line change in one file.
   ============================================================ */
body.studio .hx-title,
body.studio .section-title,
body.studio .swa-title,
body.studio .hx-banner-line,
body.studio .page-header h1,
body.studio h1,body.studio h2{
  font-family:var(--f-display); font-variation-settings:normal;
}
body.studio .hx-stat b,
body.studio .testi-metric em,
body.studio .svc-title,
body.studio .work-title,
body.studio .rail-title,
body.studio .blog-card-title{
  font-family:var(--f-display);
  font-variation-settings:normal; font-style:normal;
}
body.studio .hx-title em,
body.studio .section-title em,
body.studio .swa-title em{ font-style:normal; color:var(--red); }

/* ============================================================
   HEADER — sections read as sections, not a black slab
   ============================================================ */
body.studio .nav{
  background:rgba(247,245,240,.86);
  border:1px solid var(--rule);
  box-shadow:0 8px 30px -18px rgba(12,12,14,.28);
}
/* Plain nav links. No sliding underline, no colour swipe — just a quiet
   opacity shift on hover. The bar itself never moves, resizes or
   restyles on scroll; it stays exactly where it is the whole way down. */
/* Resting weight comes from COLOUR, not opacity. Opacity was competing
   with a transition and left the active item reading the same as the
   rest. No sliding underline — you did not want the swipe. */
body.studio .nav-links a{
  font-family:var(--f-body); font-weight:500;
  font-size:14px; letter-spacing:0;
  color:#6a6a72;
  position:relative; padding:6px 2px;
  opacity:1;
  transition:color .22s ease;
}
body.studio .nav-links a::after{ content:none; }
body.studio .nav-links a:hover{ color:var(--ink); }
/* the page you are on: full ink, heavier, and a small red marker */
body.studio .nav-links a.active{
  color:var(--ink); font-weight:700;
}
body.studio .nav-links a.active::before{
  content:""; position:absolute; left:50%; bottom:-1px;
  width:5px; height:5px; margin-left:-2.5px;
  border-radius:50%; background:var(--red);
}
body.studio .brand-name{ font-family:var(--f-display); font-weight:800; letter-spacing:-.03em; }

/* CTA is an outlined invitation, not a black brick */
body.studio .nav-cta-lite{
  background:transparent; color:var(--ink);
  border:1.5px solid var(--ink);
  font-family:var(--f-body); font-weight:700; font-size:13px;
}
body.studio .nav-cta-lite:hover{ background:var(--red); border-color:var(--red); color:#fff; }
body.studio .nav-cta-lite .arrow{ color:currentColor; }

/* ============================================================
   SWARAJYA — copy sits at the top, film stays unobstructed
   ============================================================ */
.swa-stick{ place-items:start center; }
.swa-top{
  padding-top:clamp(86px,13vh,150px);
  max-width:min(900px,90vw);
}
.swa-title{ color:#fff; text-shadow:0 2px 30px rgba(0,0,0,.45); }
.swa-badge{ color:#fff; border-color:rgba(255,255,255,.4); background:rgba(255,255,255,.10); }
.swa-vig{
  background:linear-gradient(180deg,rgba(7,7,10,.80) 0%,rgba(7,7,10,.30) 34%,rgba(7,7,10,.20) 60%,rgba(7,7,10,.88) 100%);
}
.swa-invite{ bottom:clamp(34px,7vh,84px); }
.swa-desc{ color:#fff; text-shadow:0 1px 18px rgba(0,0,0,.5); }

/* ============================================================
   HERO CAROUSEL — the joined row keeps moving, and you can drag it
   ============================================================ */
.hx-field{ cursor:grab; }
.hx-field.dragging{ cursor:grabbing; }
.hx-rowhint{
  position:absolute; left:50%; bottom:clamp(22px,5vh,52px); z-index:4;
  transform:translateX(-50%);
  font-family:var(--f-body); font-weight:600; font-size:11px;
  letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3);
  display:flex; align-items:center; gap:9px; opacity:0; transition:opacity .5s;
}
.hx-rowhint.on{ opacity:1; }
.hx-rowhint i{ width:22px; height:1px; background:var(--red); display:inline-block;
  animation:railhint 2.2s cubic-bezier(0.65,0.05,0.36,1) infinite; }

/* The banner is centred ON the joined slab — by this point the row has
   blurred to 9px at 0.54 brightness, so it is a backdrop, not a film.
   Do NOT set top/bottom to auto here: the abspos static position inside
   this grid resolves to the top of .hx-stick, which threw the white text
   onto the cream page where it read as invisible. */
.hx-banner{ top:50%; bottom:auto; }
/* No plate behind the copy. The banner sits outside .hx-field now, so
   the row can be pushed properly dark without touching the type — the
   footage itself is the background. Only a soft text shadow remains, as
   insurance against a bright frame landing under a letter. */
.hx-banner{ padding:clamp(20px,3vw,36px) clamp(22px,4vw,48px); }
.hx-banner-line{
  text-shadow:0 2px 26px rgba(6,6,9,.62), 0 1px 3px rgba(6,6,9,.4);
}
.hx-banner-kicker{ text-shadow:0 1px 14px rgba(6,6,9,.7); }


/* ============================================================
   FAILSAFE — no section may ever stay invisible
   ============================================================ */
body.studio section,
body.studio .section,
body.studio .services-grid,
body.studio .work-grid,
body.studio .testimonial-grid,
body.studio .process-grid,
body.studio .timeline{ opacity:1 !important; }

/* reveals may only move things, never hide them for good */
body.studio .rv{ transition:opacity .85s cubic-bezier(0.16,1,0.3,1), transform .85s cubic-bezier(0.16,1,0.3,1); }
@media (prefers-reduced-motion:no-preference){
  .js body.studio .rv:not(.in){ opacity:0; transform:translateY(24px); }
}
html:not(.js) body.studio .rv{ opacity:1 !important; transform:none !important; }


/* ============================================================
   LEGACY REVEAL — neutralised on studio pages.
   styles.css .reveal needs a .visible class; when that observer
   misses, whole sections stay at opacity 0. The .rv system above
   owns motion now, so force the old one permanently open.
   (styles.css itself is deliberately left untouched.)
   ============================================================ */
body.studio .reveal,
body.studio .reveal-stagger > *,
body.studio .reveal-stagger{
  opacity:1 !important;
  transform:none !important;
}


/* ============================================================
   FINAL PASS — one constant family, premium spacing, bigger cards
   ============================================================ */

/* two roles, applied consistently: display for headlines and numbers,
   body for everything you actually read and every UI control. */
body.studio,
body.studio .nav-links a, body.studio .nav-cta-lite{
  font-family:var(--f-body); font-variation-settings:normal;
}
body.studio .hx-title, body.studio .section-title, body.studio .swa-title,
body.studio .hx-banner-line, body.studio .page-header h1,
body.studio h1, body.studio h2, body.studio h3,
body.studio .hx-stat b, body.studio .svc-title, body.studio .work-title,
body.studio .rail-title, body.studio .blog-card-title, body.studio .brand-name{
  font-family:var(--f-display); font-variation-settings:normal;
}
/* Bebas Neue is caps-only, condensed, single weight. Asking for 700 makes
   the browser synthesise a bold and the strokes smear, so every display
   element is pinned to 400 and gets POSITIVE tracking — condensed caps
   set solid are unreadable without it. Caps have no descenders, so the
   line-height can run tighter than a lowercase face would allow. */
body.studio .hx-title, body.studio .section-title,
body.studio .swa-title, body.studio .hx-banner-line, body.studio .page-header h1,
body.studio h1, body.studio h2, body.studio h3,
body.studio .hx-stat b, body.studio .svc-title, body.studio .work-title,
body.studio .rail-title, body.studio .blog-card-title, body.studio .brand-name{
  font-weight:400;
  letter-spacing:.012em;
  font-style:normal;
}
/* the big display sizes carry a touch less tracking than small ones */
body.studio .hx-title, body.studio .swa-title, body.studio .hx-banner-line{
  letter-spacing:.006em; line-height:.92;
}
body.studio .section-title{ line-height:.96; }
/* condensed glyphs pack more per ch — the old measures were set for
   Helvetica and now read as tall narrow columns. */
body.studio .hx-title{ max-width:19ch; }
body.studio .hx-banner-line{ max-width:18ch; }
body.studio .hx-title em, body.studio .section-title em,
body.studio .swa-title em, body.studio .hx-banner-line em{
  font-style:normal; font-weight:700; color:var(--red);
}

/* ---- HERO: air. the copy sits low-left, never crowding the centre ---- */
.hx-stick{ place-items:end stretch; }
/* .hx-copy is also a .wrap — it MUST keep .wrap's measure and padding or
   the hero copy sits on a different left edge than every other section
   on the page. Do not give it its own max-width/margin. */
.hx-copy{ padding-bottom:clamp(26px,5vh,62px); }
.hx-eyebrow{ margin-bottom:clamp(20px,3.2vh,34px); }
.hx-title{
  max-width:15ch;
  margin:0 0 clamp(30px,5.2vh,62px);
  line-height:1.02;
  font-size:clamp(2.3rem,6.4vw,6.2rem);
}
.hx-foot{
  padding-top:clamp(22px,3.4vh,34px);
  gap:clamp(28px,4vw,64px);
  align-items:end;
}
.hx-sub{ max-width:42ch; }
.hx-stats{ margin-top:clamp(20px,3.2vh,34px); }
.hx-stat{ padding:clamp(14px,2.2vh,22px) 20px 4px 0; }
.hx-stat + .hx-stat{ padding-left:20px; }

/* ---- bigger cards: fill the gap above the logo band ---- */
.hx-tile{
  width:clamp(120px,14.5vw,220px);
  border-radius:14px;
  box-shadow:0 26px 70px -22px rgba(12,12,14,.5);
}
@media (max-width:768px){ .hx-tile{ width:clamp(96px,27vw,150px); border-radius:11px; } }

/* the joined slab reads bigger and tighter */
.hx-banner-line{ font-size:clamp(1.9rem,5.4vw,4.6rem); max-width:15ch; letter-spacing:-.04em; }
.hx-banner-kicker{ letter-spacing:.2em; }

/* ---- MOBILE: horizontal drags must never eat vertical scrolling ---- */
.hx-field, .rail-view{ touch-action:pan-y; }
@media (max-width:768px){
  .hx-stick{ place-items:end start; }
  .hx-copy{ padding-bottom:clamp(20px,4vh,40px); }
  .hx-title{ max-width:13ch; }
  /* shorter runways so a phone isn't stuck scrolling a sticky section */
  .hx{ height:180vh; }
  .swa{ height:200vh; }
}

/* tighten the gap between hero and the logo band */
body.studio .marquee-section{ padding-block:clamp(56px,7vw,92px); }

/* ============================================================
   FOUNDER — portrait that clears, a quote that arrives a word
   at a time, a signature that draws itself.
   All motion is transform/opacity + one SVG dash offset.
   ============================================================ */
.fnd{ position:relative; overflow:hidden; }
.fnd-head{ margin-bottom:clamp(28px,4vw,52px); }

.fnd-stage{
  display:grid; grid-template-columns:minmax(260px,.82fr) 1.18fr;
  gap:clamp(32px,5.5vw,90px); align-items:start;
}
@media (max-width:900px){ .fnd-stage{ grid-template-columns:1fr; gap:clamp(26px,6vw,44px); } }

/* ---- portrait ---- */
.fnd-portrait{ margin:0; position:relative; }
.fnd-portrait-inner{
  position:relative; overflow:hidden;
  border-radius:clamp(14px,1.6vw,20px);
  aspect-ratio:4/5; background:#111;
  box-shadow:0 40px 90px -40px rgba(12,12,14,.55);
  will-change:transform;
}
.fnd-portrait-inner img{
  width:100%; height:100%; object-fit:cover; display:block;
  transform:scale(1.06); will-change:transform;
  filter:grayscale(1) contrast(1.06);
  transition:filter .9s cubic-bezier(0.16,1,0.3,1);
}
/* red wash lifts off as the section arrives */
.fnd-wash{
  position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(180deg,rgba(230,56,70,.42) 0%,rgba(230,56,70,.16) 55%,rgba(12,12,14,.5) 100%);
  mix-blend-mode:multiply;
  opacity:1; transition:opacity 1s cubic-bezier(0.16,1,0.3,1);
}
.fnd.is-in .fnd-portrait-inner img{ filter:grayscale(0) contrast(1); }
.fnd.is-in .fnd-wash{ opacity:0; }

.fnd-tag{
  display:flex; align-items:center; gap:9px;
  margin-top:16px; font-family:var(--f-body);
  font-size:11px; font-weight:600; letter-spacing:.14em; text-transform:uppercase;
  color:var(--ink-3);
}
.fnd-tag-dot{
  width:7px; height:7px; border-radius:50%; background:var(--red);
  animation:fndpulse 2.6s ease-in-out infinite;
}
@keyframes fndpulse{
  0%,100%{ transform:scale(1); opacity:1; }
  50%{ transform:scale(1.5); opacity:.45; }
}

/* ---- the quote, word by word ---- */
.fnd-quote{
  margin:0 0 clamp(28px,4vw,46px);
  font-family:var(--f-body); font-weight:400;
  font-size:clamp(17px,2.05vw,27px); line-height:1.5;
  letter-spacing:-.01em; color:var(--ink);
  text-wrap:pretty;
}
.fnd-quote em{ font-style:normal; color:var(--red); font-weight:600; }
.fnd-w{ display:inline-block; will-change:transform,opacity; }

/* ---- signature ---- */
.fnd-sign{
  display:flex; align-items:center; gap:18px; flex-wrap:wrap;
  padding-top:clamp(20px,2.6vw,30px); border-top:1px solid var(--rule);
}
.fnd-sign-svg{ width:clamp(170px,17vw,240px); height:auto; color:var(--ink); display:block; }
.fnd-sign-path{
  stroke-dasharray:var(--len,1400); stroke-dashoffset:var(--len,1400);
  transition:stroke-dashoffset 2.1s cubic-bezier(0.22,1,0.36,1);
}
.fnd.is-in .fnd-sign-path{ stroke-dashoffset:0; }
.fnd-sign-meta{
  font-family:var(--f-body); font-size:10.5px; font-weight:600;
  letter-spacing:.16em; text-transform:uppercase; color:var(--ink-3);
}

/* ---- facts ---- */
.fnd-facts{
  display:flex; flex-wrap:wrap; margin-top:clamp(26px,3.4vw,40px);
  border-top:1px solid var(--rule);
}
.fnd-fact{ flex:1 1 0; min-width:118px; padding:clamp(16px,2.2vw,22px) 18px 0 0; }
.fnd-fact + .fnd-fact{ padding-left:18px; border-left:1px solid var(--rule); }
.fnd-fact b{
  display:block; font-family:var(--f-display); font-weight:400;
  font-size:clamp(26px,3.4vw,46px); line-height:1;
  letter-spacing:.012em; color:var(--ink);
}
.fnd-fact b::after{ content:attr(data-suffix); }
.fnd-fact span{
  display:block; margin-top:8px; font-family:var(--f-body);
  font-size:9.5px; font-weight:500; letter-spacing:.11em;
  text-transform:uppercase; color:var(--ink-3);
}
@media (max-width:600px){
  .fnd-fact{ min-width:0; padding-right:10px; }
  .fnd-fact + .fnd-fact{ padding-left:10px; }
}

@media (prefers-reduced-motion:reduce){
  .fnd-portrait-inner img{ filter:none; }
  .fnd-wash{ opacity:0; }
  .fnd-sign-path{ stroke-dashoffset:0; transition:none; }
  .fnd-w{ opacity:1 !important; transform:none !important; }
  .fnd-tag-dot{ animation:none; }
}

/* ============================================================
   INNER PAGES — the dark CTA panel keeps its gradient (a black
   block reads well as an accent on a light page), but its type
   has to flip with it. Buttons inside it invert to stay visible.
   ============================================================ */
body.studio .article-cta{ border-color:rgba(244,242,238,.14); }
body.studio .article-cta h2,
body.studio .article-cta h3{ color:#f4f2ee; }
body.studio .article-cta p{ color:rgba(244,242,238,.72); }
body.studio .article-cta .btn-primary{
  background:#f7f5f0; color:#0c0c0e; border-color:#f7f5f0;
}
body.studio .article-cta .btn-primary:hover{
  background:var(--red); border-color:var(--red); color:#fff;
}
body.studio .article-cta .btn-ghost{
  color:#f4f2ee; border-color:rgba(244,242,238,.34); background:transparent;
}
body.studio .article-cta .btn-ghost:hover{ border-color:#f4f2ee; }

/* ============================================================
   MOTION LAYER — canvas graphics that sit behind the copy.
   pointer-events:none always: the graphic reacts to the cursor
   (js/motion.js tracks on the parent section) but can never
   intercept a click or a scroll.
   ============================================================ */
.mg{
  position:absolute; inset:0; z-index:0;
  pointer-events:none; overflow:hidden;
}
.mg-canvas{ display:block; width:100%; height:100%; }

/* a section hosting a motion layer needs a stacking context and its
   content lifted above it */
.mg-host{ position:relative; isolation:isolate; }
.mg-host > .wrap{ position:relative; z-index:1; }

/* feather the edges so the graphic dissolves into the page instead of
   ending on a hard line */
.mg::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(180deg,
    var(--paper) 0%, rgba(247,245,240,0) 18%,
    rgba(247,245,240,0) 82%, var(--paper) 100%);
}
/* inside a dark band the feather has to match the band, not the page */
.band .mg::after,
.rail-sec .mg::after,
.footer .mg::after{
  background:linear-gradient(180deg,
    #0a0a0c 0%, rgba(10,10,12,0) 18%,
    rgba(10,10,12,0) 82%, #0a0a0c 100%);
}

/* standalone band usage: a motion strip with its own height */
.mg-band{
  position:relative; height:clamp(150px,20vw,260px);
  margin:clamp(30px,4vw,54px) 0;
}
.mg-band .mg{ position:absolute; inset:0; }

@media (prefers-reduced-motion:reduce){
  .mg{ opacity:.5; }
}

/* ============================================================
   PAGE HEADERS — give the title room. The nav is a fixed pill,
   so a header that starts too high reads as cramped under it.
   Generous top padding, a real gap between kicker / title / sub,
   and a measure that stops the deck running the full width.
   ============================================================ */
body.studio .page-header{
  position:relative;
  padding-top:clamp(140px,17vh,220px);
  padding-bottom:clamp(56px,8vh,110px);
}
body.studio .page-header .mono{
  display:flex; align-items:center; gap:10px;
  margin-bottom:clamp(22px,3.4vh,36px) !important;
  font-size:11px; font-weight:600; letter-spacing:.18em;
  text-transform:uppercase; color:var(--red);
}
body.studio .page-header .mono::before{
  content:""; width:26px; height:1px; background:var(--red); flex:none;
}
body.studio .page-header h1{
  margin:0 0 clamp(24px,3.6vh,40px);
  font-size:clamp(2.4rem,6.4vw,6rem);
  line-height:.96;
  max-width:19ch;
}
body.studio .page-header p{
  margin:0;
  font-size:clamp(15px,1.35vw,18px);
  line-height:1.62;
  max-width:56ch;
  color:var(--ink-2);
}
/* section headings on inner pages get the same breathing room */
body.studio .section-head,
body.studio .rail-head{ margin-bottom:clamp(30px,4.4vw,56px); }
body.studio .section-title{ margin-bottom:clamp(16px,2.2vw,26px); }
body.studio .section-num{ margin-bottom:clamp(16px,2.4vh,26px); }

@media (max-width:768px){
  body.studio .page-header{ padding-top:clamp(112px,15vh,150px); }
  body.studio .page-header h1{ max-width:15ch; }
}

/* ============================================================
   PHONE — designed for the phone, not the desktop squeezed.
   Different layout decisions, not smaller ones.
   ============================================================ */
@media (max-width:768px){

  /* ---- 1. NOTHING under 11px. Micro-labels at 7.5-9.5px were the
       single biggest source of the cluttered feel: a wall of grey
       specks the eye cannot resolve. ---- */
  body.studio .hx-stat span,
  body.studio .fnd-fact span,
  body.studio .shero-stat span,
  body.studio .marquee-label,
  body.studio .rail-hint,
  body.studio .rail-tag,
  body.studio .rail-idx,
  body.studio .section-num,
  body.studio .svc-num,
  body.studio .work-tag,
  body.studio .trust-label,
  body.studio .process-label,
  body.studio .hx-banner-kicker,
  body.studio .svc-tag,
  body.studio .work-meta span,
  body.studio .fnd-sign-meta,
  body.studio .swa-badge,
  body.studio .contact-method-label,
  body.studio .footer-col h4,
  body.studio .footer-bottom span,
  body.studio .mono{
    font-size:11px !important;
    letter-spacing:.1em !important;
    line-height:1.45;
  }

  /* ---- 2. Hero stats become a 2x2 block. Four across on a 390px
       screen gives 74px columns — too narrow for a label, so the
       type had been shrunk to 7.5px to fit. Two up fixes the cause
       instead of the symptom. ---- */
  body.studio .hx-stats,
  body.studio .shero-stats{
    display:grid; grid-template-columns:1fr 1fr; gap:0;
    border-top:1px solid var(--rule);
  }
  body.studio .hx-stat,
  body.studio .shero-stat{
    min-width:0; padding:18px 16px 16px 0;
    border-left:none !important;
  }
  body.studio .hx-stat:nth-child(2n),
  body.studio .shero-stat:nth-child(2n){
    padding-left:16px; border-left:1px solid var(--rule) !important;
  }
  body.studio .hx-stat:nth-child(n+3),
  body.studio .shero-stat:nth-child(n+3){ border-top:1px solid var(--rule); }
  body.studio .hx-stat b,
  body.studio .shero-stat b{ font-size:30px; }

  /* founder facts: three across at 112px is the same mistake */
  body.studio .fnd-facts{ display:grid; grid-template-columns:1fr 1fr; gap:0; }
  body.studio .fnd-fact{ padding:18px 14px 14px 0; border-left:none !important; }
  body.studio .fnd-fact:nth-child(2n){ padding-left:14px; border-left:1px solid var(--rule) !important; }
  body.studio .fnd-fact:nth-child(n+3){ border-top:1px solid var(--rule); grid-column:1 / -1; }
  body.studio .fnd-fact b{ font-size:32px; }

  /* ---- 3. backdrop-filter is the most expensive thing a phone GPU
       can be asked to do, and there were eight of them. Keep it on
       the nav only; everything else gets a solid fill that looks the
       same at these sizes. ---- */
  body.studio .rail-idx,
  body.studio .swa-badge,
  body.studio .tag-pill,
  body.studio .trailer-sound{
    backdrop-filter:none !important;
    -webkit-backdrop-filter:none !important;
    background:rgba(10,10,12,.72);
  }

  /* ---- 4. Tap targets. 15-22px links fail every touch guideline. ---- */
  body.studio .mobile-menu a,
  body.studio .footer a,
  body.studio .nav-links a{
    min-height:44px; display:inline-flex; align-items:center;
  }
  body.studio .brand{ min-height:44px; display:inline-flex; align-items:center; }

  /* ---- 5. Give the phone room. Tight gutters read as cheap. ---- */
  body.studio .wrap{ padding-inline:22px; }
  body.studio .section{ padding-block:clamp(64px,13vw,96px); }
  body.studio .hx-title{ font-size:clamp(2.2rem,10vw,3.4rem); max-width:14ch; }
  body.studio .section-title{ font-size:clamp(1.9rem,8.4vw,2.8rem); }
  body.studio .fnd-quote{ font-size:17px; line-height:1.55; }

  /* founder: portrait first, capped so it never eats the fold */
  body.studio .fnd-portrait-inner{ aspect-ratio:1/1; }
}

@media (max-width:600px){
  /* the drag hint is desktop language — there is no cursor to drag with */
  body.studio .hx-rowhint{ display:none; }
}

/* ---- phone hero: the copy must always have clean ground ----
   The tiles scatter across a 390px viewport and land on the headline
   rather than around it, which is most of what read as clutter. They
   sit further back (js) and the copy gets its own soft paper wash so
   the type never competes with a moving frame behind it. */
@media (max-width:768px){
  /* The clips live in the upper zone (biased there from js) and the copy
     owns the lower half, so the wash only has to protect the bottom of
     the screen rather than blanket the whole hero. */
  body.studio .hx-copy{ position:relative; }
  body.studio .hx-copy::before{
    content:""; position:absolute; z-index:-1;
    left:-24px; right:-24px; top:-56px; bottom:-40px;
    background:linear-gradient(180deg,
      rgba(247,245,240,0) 0%, rgba(247,245,240,.72) 22%,
      rgba(247,245,240,.95) 46%, var(--paper) 70%);
    pointer-events:none;
  }
  /* the work is the product — keep the clips a real size on phone */
  body.studio .hx-tile{ width:clamp(104px,29vw,150px); border-radius:12px; }
}

/* ============================================================
   PHONE FOOTER — it was 1255px on a 390px screen, 1.5 screens
   of scrolling to get past. Everything stacked into one column
   and the giant wordmark ate the rest. Same content, a third
   of the height.
   ============================================================ */
@media (max-width:768px){
  body.studio .footer{ padding-top:44px; padding-bottom:20px; }

  /* brand + three link columns become a compact 2-up block */
  body.studio .footer-grid{
    display:grid; grid-template-columns:1fr 1fr;
    gap:26px 20px; align-items:start;
  }
  body.studio .footer-brand{ grid-column:1 / -1; }
  body.studio .footer-brand p{ font-size:13px; line-height:1.5; margin:8px 0 0; }
  body.studio .footer-nap{ margin-top:8px !important; }

  body.studio .footer-col h4{ margin-bottom:10px; }
  body.studio .footer-col ul{ display:flex; flex-direction:column; gap:2px; }
  body.studio .footer-col li{ margin:0; }
  body.studio .footer-col a{ font-size:13px; line-height:1.35; }

  /* the "Reach us" column has two items — let it sit beside Services */
  body.studio .footer-col:last-of-type{ grid-column:1 / -1; }

  /* the oversized wordmark is a desktop flourish; on a phone it is
     several hundred px of nothing. Keep a hint of it, not a billboard. */
  body.studio .footer-mega{
    font-size:clamp(52px,17vw,86px) !important;
    line-height:.82; margin:22px 0 6px; opacity:.10;
  }
  body.studio .footer-bottom{ padding-top:14px; }
}
@media (max-width:420px){
  body.studio .footer-mega{ display:none; }
}

/* ============================================================
   SWARAJYA HERO — it sits on a dark photograph with a black
   scrim, so it is a dark context on a light site. The light
   theme had turned the headline to near-black on near-black.
   ============================================================ */
body.studio .shivaji-hero h1,
body.studio .shivaji-hero .shivaji-hero-content h1{ color:#fff; }
body.studio .shivaji-hero h1 em{ color:var(--red); }
body.studio .shivaji-hero p{ color:rgba(244,242,238,.86); }
body.studio .shivaji-badge{
  color:#fff; border-color:rgba(255,255,255,.34);
  background:rgba(255,255,255,.10);
}
/* crimson CTA had dark ink on red — white reads, ink does not */
body.studio .btn-crimson{ background:var(--red); border-color:var(--red); color:#fff; }
body.studio .btn-crimson:hover{ background:#c92f3c; border-color:#c92f3c; color:#fff; }
body.studio .shivaji-hero .btn-ghost{
  color:#fff; border-color:rgba(255,255,255,.4); background:transparent;
}
body.studio .shivaji-hero .btn-ghost:hover{ border-color:#fff; background:rgba(255,255,255,.08); }

/* the CTA was being pushed toward the fold — tighten the stack on phone
   so both buttons land comfortably in view with browser chrome showing */
@media (max-width:768px){
  body.studio .shivaji-hero{ padding-top:clamp(112px,15vh,150px); min-height:auto; }
  body.studio .shivaji-hero h1{ font-size:clamp(2.1rem,9.5vw,3.2rem); line-height:.98; }
  body.studio .shivaji-hero p{
    font-size:15px !important; line-height:1.55 !important;
    margin-bottom:26px !important; max-width:34ch !important;
  }
  body.studio .shivaji-badge{ margin-bottom:16px; }
}

/* the teaser sits on the same photograph as the hero — its title and
   deck were near-black on it for exactly the same reason */
body.studio .shivaji-teaser .shivaji-title{ color:#fff; }
body.studio .shivaji-teaser .shivaji-title em{ color:var(--red); }
body.studio .shivaji-teaser .shivaji-desc{ color:rgba(244,242,238,.84); }

/* ============================================================
   NO-JS FALLBACK for the two scroll-driven reveals that had none.
   .hx-banner and .swa-invite sit at opacity:0 and are driven purely
   by scroll progress in js/studio.js. Without JS they never appear
   at all. .sr and .rv already have this escape hatch; these didn't.
   ============================================================ */
html:not(.js) .hx-banner,
html:not(.js) .swa-invite,
html:not(.js) .hx-rowhint{
  opacity:1 !important;
  transform:none !important;
}
/* <main> is a plain landmark — it must not introduce a box */
main#content{ display:block; }

/* ============================================================
   HERO COMPOSITION PASS
   Measured problems, not guesses:
   · sub-headline was 10.37:1 — passes AAA, so this is perceived
     weight, not contrast. Montserrat 400 at 16.5px on warm cream
     reads light. Fixed with weight and a truer ink, not by
     darkening something that was already compliant.
   · the CTAs sat 733px right of the sub-text's left edge, so the
     eye had to zig-zag across the viewport to find the next step.
   · the WhatsApp FAB overlapped the 250M+ stat.
   ============================================================ */

/* readable weight, one clean measure */
body.studio .hx-sub{
  color:#26262c;
  font-weight:500;
  font-size:clamp(15.5px,1.35vw,17.5px);
  line-height:1.65;
  max-width:52ch;
}

/* one left-aligned column: headline -> deck -> CTAs. No zig-zag. */
body.studio .hx-foot{
  grid-template-columns:1fr;
  gap:clamp(20px,2.4vw,28px);
  align-items:start;
}
body.studio .hx-actions{ justify-content:flex-start; }

/* the headline needs air before the deck starts */
body.studio .hx-title{ margin-bottom:clamp(34px,5.6vh,72px); }
body.studio .hx-foot{ padding-top:clamp(26px,3.8vh,40px); }

/* let the numbers breathe before the logo band */
body.studio .hx-stats{ margin-top:clamp(28px,4vh,46px); }
body.studio .hx-stat{ padding-block:clamp(22px,3vh,32px) clamp(18px,2.4vh,26px); }

/* keep the last stat clear of the floating WhatsApp button */
@media (min-width:769px){
  body.studio .hx-stats{ padding-right:88px; }
}
body.studio .whatsapp-fab{ bottom:clamp(20px,3vh,34px); }

/* ---- the work sits upper-right, the type owns lower-left ----
   Three of nine clips were landing on top of "REVENUE." which reads
   as a positioning bug rather than a composition. The clips are
   biased away from the copy column while drifting (js) and converge
   to centre on scroll as before. */
@media (min-width:769px){
  body.studio .hx-copy{ max-width:1480px; }
  body.studio .hx-title{ max-width:16ch; }
}

/* breathing room around the draggable rail on phone, so the thumb has
   somewhere safe to land when scrolling past it */
@media (max-width:768px){
  body.studio .rail-view{ padding-inline:14px; }
  body.studio .rail-card{ scroll-margin-inline:14px; }
}

/* The type always gets clean ground. Biasing the clips upper-right
   helped but could not fully clear a 16ch Bebas headline at 1440px —
   four of nine still crossed it. Rather than shove the work into a
   corner (it is the product), the copy column carries a soft paper
   wash so the headline never sits on a half-visible frame. The clips
   stay fully visible everywhere else in the hero. */
@media (min-width:769px){
  body.studio .hx-copy{ position:relative; }
  body.studio .hx-copy::before{
    content:""; position:absolute; z-index:-1; pointer-events:none;
    left:-40px; right:38%; top:-56px; bottom:-48px;
    background:radial-gradient(115% 78% at 24% 56%,
      var(--paper) 0%, rgba(247,245,240,.96) 44%,
      rgba(247,245,240,.72) 72%, rgba(247,245,240,0) 100%);
  }
}

/* footer column labels were <h4> sitting after an <h2>, which put a
   level jump in every page's outline for what is only a label */
body.studio .footer-col-label{
  font-family:var(--f-body); font-size:10px; font-weight:600;
  letter-spacing:.18em; text-transform:uppercase;
  color:var(--text-mute); margin-bottom:16px;
}

/* ============================================================
   HERO / NAV COLLISION
   .hx-stick bottom-aligns the copy inside a 100svh sticky box. Once
   the copy is taller than the room left under the fixed nav, an
   end-aligned grid item overflows UPWARD — straight under the header.
   Measured gaps before this: 1366x768 -4px, 1280x720 -24px,
   390x740 -58px, 390x667 -68px and clipped by overflow:hidden.

   Three parts to the fix:
   1. reserve nav clearance as padding on the sticky box
   2. `safe end` so it flips to top-alignment instead of overflowing
      up when it genuinely cannot fit
   3. compress the hero on short viewports so it does not need to
   ============================================================ */
body.studio .hx-stick{
  padding-top:clamp(96px,13vh,128px);
  padding-bottom:clamp(12px,2vh,24px);
  align-items:end;
  align-items:safe end;          /* modern browsers: never overflow upward */
  box-sizing:border-box;
}
@media (max-width:768px){
  body.studio .hx-stick{ padding-top:clamp(84px,12vh,104px); }
}

/* ---- short viewports: shrink the hero so it fits above the fold ---- */
@media (max-height:820px) and (min-width:769px){
  body.studio .hx-title{
    font-size:clamp(2rem,4.6vw,4.2rem);
    margin-bottom:clamp(20px,3vh,30px);
  }
  body.studio .hx-eyebrow{ margin-bottom:clamp(12px,1.8vh,18px); }
  body.studio .hx-foot{ padding-top:clamp(16px,2.2vh,22px); }
  body.studio .hx-stats{ margin-top:clamp(14px,2vh,20px); }
  body.studio .hx-stat{ padding-block:clamp(12px,1.8vh,18px) clamp(10px,1.4vh,14px); }
  body.studio .hx-sub{ font-size:15.5px; line-height:1.55; }
}
@media (max-height:700px) and (min-width:769px){
  body.studio .hx-title{ font-size:clamp(1.8rem,3.9vw,3.2rem); }
  body.studio .hx-stat b{ font-size:22px; }
  body.studio .hx-copy{ padding-bottom:8px; }
}
@media (max-height:780px) and (max-width:768px){
  body.studio .hx-title{ font-size:clamp(1.9rem,8vw,2.6rem); margin-bottom:18px; }
  body.studio .hx-eyebrow{ margin-bottom:12px; font-size:10px; }
  body.studio .hx-foot{ padding-top:16px; gap:14px; }
  body.studio .hx-stats{ margin-top:14px; }
  body.studio .hx-stat{ padding-block:12px 10px; }
  body.studio .hx-stat b{ font-size:24px; }
  body.studio .hx-sub{ font-size:14.5px; line-height:1.5; }
  body.studio .hx-copy{ padding-bottom:10px; }
}

/* smallest phones still in use (360x640): the stats row was landing 1px
   past the sticky box, so trim the last of the slack */
@media (max-height:670px) and (max-width:768px){
  body.studio .hx-title{ font-size:clamp(1.75rem,7.4vw,2.3rem); margin-bottom:14px; }
  body.studio .hx-sub{ font-size:14px; }
  body.studio .hx-foot{ padding-top:13px; gap:12px; }
  body.studio .hx-stats{ margin-top:12px; }
  body.studio .hx-stat{ padding-block:10px 8px; }
  body.studio .hx-stat b{ font-size:21px; }
  body.studio .hx-eyebrow{ margin-bottom:10px; }
}