/* =====================================================================
   Norta – The Game of Nine Nights · v2
   Tokens → base → layout → components → motion states → breakpoints
   ===================================================================== */

/* ---------- fonts (Calluna loads from the Adobe Fonts kit in <head>) ---------- */
@font-face{font-family:"Poppins";src:url(../fonts/poppins-latin-400-normal.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Poppins";src:url(../fonts/poppins-latin-500-normal.woff2) format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:"Poppins";src:url(../fonts/poppins-latin-600-normal.woff2) format("woff2");font-weight:600;font-display:swap}

/* ---------- tokens ---------- */
:root{
  /* colour: neutrals from the original site, one accent from the Norta mark */
  --c-night:#000;--c-ink:#080808;--c-dusk:#212121;--c-ash:#242323;
  --c-smoke:#f0f0f0;--c-paper:#fafafa;--c-white:#fff;
  --c-sindoor:#e2492e;
  --t-dark:#fff;--t-dark-mute:rgba(255,255,255,.62);--t-dark-line:rgba(255,255,255,.16);
  --t-light:#1b1b1b;--t-light-mute:#5e5e5e;--t-light-line:rgba(0,0,0,.14);

  /* type */
  --f-serif:"calluna","Calluna",Georgia,"Times New Roman",serif;
  --f-sans:"Poppins",Arial,Helvetica,sans-serif;
  --fs-display:clamp(40px,4.4vw,72px);
  --fs-h1:clamp(30px,3vw,44px);
  --fs-h2:clamp(24px,2vw,30px);
  --fs-h3:clamp(19px,1.6vw,24px);
  --fs-lede:clamp(22px,2.3vw,34px);
  --fs-body:16px;--fs-small:14px;--fs-cap:11px;

  /* space (4px base) */
  --s1:4px;--s2:8px;--s3:12px;--s4:16px;--s5:24px;--s6:32px;--s7:48px;--s8:64px;--s9:96px;--s10:128px;
  --sec:clamp(64px,7vw,120px);
  --gutter:48px;
  --wrap:min(1380px,calc(100% - var(--gutter) * 2));
  --prose:860px;
  --hdr:84px;--hdr-c:64px;

  /* motion */
  --d1:.15s;--d2:.24s;--d3:.38s;--d4:.62s;--d5:1s;--d6:1.62s;
  --e-diya:cubic-bezier(.16,1,.3,1);
  --e-night:cubic-bezier(.7,0,.84,0);
  --e-garba:cubic-bezier(.37,0,.63,1);
  --e-taali:cubic-bezier(.34,1.36,.64,1);
}

/* ---------- Lenis smooth scroll ---------- */
html.lenis,html.lenis body{height:auto}
.lenis:not(.lenis-autoToggle).lenis-stopped{overflow:clip}
.lenis [data-lenis-prevent]{overscroll-behavior:contain}

/* ---------- base ---------- */
*,*::before,*::after{box-sizing:border-box}
/* lining figures everywhere: Calluna defaults to oldstyle, and the font shorthand resets numeric variants, hence !important */
*,*::before,*::after{font-variant-numeric:lining-nums!important}
html{-webkit-text-size-adjust:100%;scroll-padding-top:var(--hdr)}
body{margin:0;font:400 var(--fs-body)/1.7 var(--f-sans);color:var(--t-light);background:var(--c-white);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img,svg,video{display:block;max-width:100%;height:auto}
h1,h2,h3,h4,h5,h6{font-family:var(--f-serif);font-weight:400;margin:0;line-height:1.25}
p{margin:0 0 1.7em}
p:last-child{margin-bottom:0}
a{color:inherit}
button{font:inherit;color:inherit}
strong,b{font-weight:600}
.wrap{width:var(--wrap);margin-inline:auto}
.prose{max-width:var(--prose);margin-inline:auto}
.center{text-align:center}
.sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:fixed;left:12px;top:-60px;z-index:200;background:#000;color:#fff;padding:10px 16px;text-decoration:none;transition:top var(--d2)}
.skip:focus{top:12px}
:focus-visible{outline:2px solid var(--c-sindoor);outline-offset:4px}
::selection{background:var(--c-sindoor);color:#fff}

/* type roles */
.t-display{font-size:var(--fs-display);line-height:1.12}
.t-h1{font-size:var(--fs-h1);line-height:1.28}
.t-h2{font-size:var(--fs-h2);line-height:1.3}
.t-h3{font-size:var(--fs-h3);line-height:1.38}
.t-small{font-size:var(--fs-small);line-height:1.75}
.cap{font-size:var(--fs-cap);line-height:1.55;margin:0;text-align:right}
.cap a{color:inherit}
.mb-s{margin-bottom:var(--s5)}
.mb-m{margin-bottom:var(--s6)}

/* sections: colour + grain on dark backgrounds only */
.sec{padding:var(--sec) 0}
.bg-night,.bg-ink,.bg-dusk,.bg-ash{color:var(--t-dark);background-image:linear-gradient(rgba(0,0,0,.34),rgba(0,0,0,.34)),url(../img/grain.png);background-size:auto,180px}
.bg-night{background-color:var(--c-night)}
.bg-ink{background-color:var(--c-ink)}
.bg-dusk{background-color:var(--c-dusk)}
.bg-ash{background-color:var(--c-ash)}
.bg-smoke{background:var(--c-smoke);color:var(--t-light)}
.bg-paper{background:var(--c-paper);color:var(--t-light)}
.bg-white{background:#fff;color:var(--t-light)}

/* lamp glow behind dark-section headings */
.glow{position:relative;isolation:isolate}
.glow::before{content:"";position:absolute;z-index:-1;left:50%;top:0;width:min(900px,90vw);height:420px;transform:translate(-50%,-30%);background:radial-gradient(closest-side,rgba(226,73,46,.13),rgba(226,73,46,.04) 55%,transparent);opacity:.35;transition:opacity 1.6s var(--e-diya);pointer-events:none}
.glow.is-lit::before{opacity:1}
.glow.left::before{left:22%}

/* =====================================================================
   HEADER
   ===================================================================== */
.hdr{position:fixed;inset:0 0 auto 0;z-index:60;height:var(--hdr);background:#fff;transition:height var(--d3) var(--e-diya),transform var(--d3) var(--e-diya),background-color var(--d3) var(--e-night),box-shadow var(--d3)}
.hdr.is-compact{height:var(--hdr-c);box-shadow:0 1px 0 rgba(0,0,0,.06)}
.hdr.is-hidden{transform:translateY(-100%)}
.hdr__in{height:100%;display:flex;align-items:center;justify-content:space-between;gap:var(--s5)}
.page{padding-top:var(--hdr)}

.logo{display:flex;align-items:center;flex:none;height:47px;text-decoration:none;transition:height var(--d3) var(--e-diya),filter var(--d3)}
.logo img{height:100%;width:auto}
.logo__word{margin-left:calc(47px * .245);max-width:200px;transition:max-width var(--d3) var(--e-diya),opacity var(--d2),margin var(--d3) var(--e-diya)}
.hdr.is-compact .logo{height:40px}
.hdr.is-compact .logo__word{max-width:0;opacity:0;margin-left:0}

/* desktop nav */
.nav__list{display:flex;align-items:center;gap:clamp(20px,2.2vw,32px);list-style:none;margin:0;padding:0}
.nav__item{position:relative}
.nav__trg{display:inline-flex;align-items:center;gap:7px;background:none;border:0;padding:10px 0;cursor:pointer;font:400 16px/1.4 var(--f-sans);color:#000;text-decoration:none}
.nav__trg .chev{width:6px;height:6px;border-right:1.3px solid currentColor;border-bottom:1.3px solid currentColor;transform:translateY(-2px) rotate(45deg);transition:transform var(--d3) var(--e-diya)}
.nav__item.is-open .chev{transform:translateY(1px) rotate(225deg)}
.dd{position:absolute;top:calc(100% + 6px);left:-26px;min-width:236px;list-style:none;margin:0;padding:14px 0;background:#fff;box-shadow:0 18px 40px rgba(0,0,0,.1),0 0 0 1px rgba(0,0,0,.04);clip-path:inset(0 0 100% 0);visibility:hidden;transition:clip-path var(--d2) var(--e-night),visibility 0s var(--d2)}
.nav__item:last-child .dd{left:auto;right:-26px}
.nav__item.is-open .dd{clip-path:inset(0 0 0 0);visibility:visible;transition:clip-path var(--d3) var(--e-diya),visibility 0s}
.dd li{opacity:0;transform:translateY(10px) rotate(3deg);transform-origin:-60% 50%;transition:opacity var(--d1),transform var(--d1)}
.nav__item.is-open .dd li{opacity:1;transform:none;transition:opacity var(--d3) var(--e-diya) var(--dl,0s),transform var(--d3) var(--e-diya) var(--dl,0s)}
.dd a{display:inline-flex;padding:7px 26px;font-size:15px;white-space:nowrap}
.dd a::before{left:13px}

/* menu button (tablet pill / phone burger) */
.mbtn{display:none;position:relative;z-index:2;align-items:center;gap:10px;background:none;border:1px solid transparent;border-radius:99px;cursor:pointer;padding:0;height:44px;color:#000}
.mbtn__icon{position:relative;width:44px;height:44px;flex:none}
.mbtn__icon i{position:absolute;left:12px;width:20px;height:2px;border-radius:2px;background:currentColor}
.mbtn__icon i:nth-of-type(1){top:15px}.mbtn__icon i:nth-of-type(2){top:21px}.mbtn__icon i:nth-of-type(3){top:27px}
.mbtn__ring{position:absolute;inset:0;width:44px;height:44px;transform:rotate(-90deg);pointer-events:none}
.mbtn__ring circle{fill:none;stroke:var(--c-sindoor);stroke-width:1.5;stroke-linecap:round}
.mbtn__label{font:500 14px/1 var(--f-sans);padding-right:18px}

/* off-canvas panel */
.panel{position:fixed;z-index:55;background:var(--c-ink);color:#fff;display:flex;flex-direction:column;visibility:hidden;clip-path:circle(0px at 100% 0)}
.panel__scroll{flex:1;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;padding:var(--s4) var(--gutter) var(--s6);scrollbar-width:thin;scrollbar-color:#333 transparent}
.panel ol{list-style:none;margin:0;padding:0}
.pl1>li{border-bottom:1px solid rgba(255,255,255,.09)}
.pl1>li>.mi{display:flex;align-items:center;gap:14px;width:100%;background:none;border:0;padding:14px 0;color:#fff;text-decoration:none;text-align:left;cursor:pointer;font:400 clamp(26px,6.4vw,34px)/1.2 var(--f-serif);transform-origin:-140% 50%}
.pl1 .acc .chev{flex:none;width:10px;height:10px;margin:0 4px 0 auto;border-right:1.5px solid #fff;border-bottom:1.5px solid #fff;transform:translateY(-3px) rotate(45deg);transition:transform var(--d3) var(--e-diya)}
.pl1 .grp.is-open .acc .chev{transform:translateY(2px) rotate(225deg)}
.pl2{overflow:hidden;height:0}
.grp.is-open .pl2{height:auto}
.pl2 li:last-child{padding-bottom:16px}
.pl2 .mi{display:flex;align-items:center;gap:14px;padding:7px 0;color:rgba(255,255,255,.8);text-decoration:none;font:400 clamp(20px,4.6vw,24px)/1.25 var(--f-serif);transform-origin:-160% 50%}
.mi small{flex:none;margin-left:auto;min-width:18px;text-align:right;font:500 10.5px/1 var(--f-sans);color:var(--t-dark-mute);font-variant-numeric:lining-nums tabular-nums!important}
.mi .bd{position:absolute;right:6px;top:50%;width:6px;height:6px;margin-top:-3px;border-radius:50%;background:var(--c-sindoor);transform:scale(0)}
.mi.is-current{color:#fff}
.mi.is-current small{opacity:0}
.mi.is-current .bd{transform:scale(1)}
.panel__foot{display:flex;flex-wrap:wrap;gap:6px 22px;padding:var(--s4) var(--gutter) max(var(--s5),env(safe-area-inset-bottom));border-top:1px solid rgba(255,255,255,.1);font-size:13px}
.panel__foot a{color:var(--t-dark-mute);text-decoration:none}
.panel__foot a:hover{color:#fff}
.scrim{position:fixed;inset:0;z-index:54;background:rgba(0,0,0,.45);opacity:0;visibility:hidden;transition:opacity var(--d3),visibility 0s var(--d3)}
.is-menu .scrim{opacity:1;visibility:visible;transition:opacity var(--d4) var(--e-diya)}
html.is-locked{overflow:hidden}

/* phone: full-screen panel; header turns into the panel's top bar */
.is-menu.is-full .hdr{background:transparent;box-shadow:none;transform:none}
.is-menu.is-full .logo{filter:invert(1)}
.is-menu.is-full .mbtn{color:#fff}

/* =====================================================================
   HOVER & LINK SYSTEM (plan section 03)
   ===================================================================== */
/* A · nav link */
.lk{position:relative;display:inline-flex;align-items:center;text-decoration:none;transition:translate var(--d2) var(--e-diya),opacity var(--d2),color var(--d2)}
.lk::before{content:"";position:absolute;left:-11px;top:50%;width:5px;height:5px;margin-top:-2.5px;border-radius:50%;background:var(--c-sindoor);transform:scale(0);transition:transform var(--d2) var(--e-taali)}
.lk.is-current{color:inherit}
.lk.is-current::before{transform:scale(1)}
@media (hover:hover) and (pointer:fine){
  .lk:hover{translate:6px 0}
  .lk:hover::before{transform:scale(1)}
  .nav__list:hover>.nav__item:not(:hover)>.lk{opacity:.42}
  .ftr__links:hover li:not(:hover)>.lk{opacity:.42}
}
.lk:focus-visible{translate:6px 0;outline:none}
.lk:focus-visible::before{transform:scale(1)}
.lk:active{translate:4px 0;opacity:.7}
.nav__trg.lk{padding-left:0}

/* B · menu item */
.mi{position:relative;transition:translate var(--d2) var(--e-diya),color var(--d2)}
.mi small{transition:transform var(--d2) var(--e-diya),opacity var(--d1)}
.mi .bd{transition:transform var(--d2) var(--e-taali)}
@media (hover:hover) and (pointer:fine){
  .mi:hover{color:#fff}
  .mi:hover small{transform:translateY(-70%);opacity:0}
  .mi:hover .bd{transform:scale(1)}
  .panel__scroll:hover .mi:not(:hover){color:rgba(255,255,255,.45)}
}
.mi:focus-visible{outline:none;color:#fff}
.mi:focus-visible small{opacity:0}
.mi:focus-visible .bd{transform:scale(1)}
.mi:active{color:rgba(255,255,255,.7)}

/* C · inline text link */
.tl{--ul:rgba(255,255,255,.38);color:inherit;text-decoration:none;padding-bottom:1px;background-image:linear-gradient(var(--c-sindoor),var(--c-sindoor)),linear-gradient(var(--ul),var(--ul));background-position:0 100%,0 100%;background-size:0% 1px,100% 1px;background-repeat:no-repeat;transition:background-size var(--d3) var(--e-diya)}
.bg-smoke .tl,.bg-paper .tl,.bg-white .tl{--ul:rgba(0,0,0,.3)}
.tl:hover,.tl:focus-visible{background-size:100% 1px,100% 1px;outline:none}
.tl:active{background-size:100% 1px,100% 1px}
.ext::after{content:"↗";display:inline-block;margin-left:3px;font-size:.85em;transition:transform var(--d2) var(--e-diya)}
.ext:hover::after,.ext:focus-visible::after{transform:translate(2px,-2px)}

/* D · button */
.bt{position:relative;isolation:isolate;overflow:hidden;display:inline-flex;align-items:center;font:400 14px/1 var(--f-sans);text-decoration:none;padding:14px 34px;border:1px solid;border-radius:0;cursor:pointer;transition:color var(--d3) var(--e-diya)}
.bt::before{content:"";position:absolute;inset:-1px;z-index:-1;clip-path:circle(0% at var(--x,50%) var(--y,50%));transition:clip-path .5s var(--e-diya)}
.bt .bd{width:0;height:5px;border-radius:50%;background:var(--c-sindoor);transition:width var(--d2) var(--e-taali),margin var(--d2) var(--e-diya)}
.bt-light{background:#fff;color:#000;border-color:#fff}.bt-light::before{background:#000}
.bt-dark{background:#000;color:#fff;border-color:#000}.bt-dark::before{background:#fff}
.bt-ghost{background:transparent;color:#000;border-color:#000}.bt-ghost::before{background:#000}
@media (hover:hover) and (pointer:fine){
  .bt-light:hover{color:#fff}.bt-dark:hover{color:#000}.bt-ghost:hover{color:#fff}
  .bt:hover::before{clip-path:circle(150% at var(--x,50%) var(--y,50%))}
  .bt:hover .bd{width:5px;margin-right:10px}
}
.bt:focus-visible .bd{width:5px;margin-right:10px}
.bt:active{transform:scale(.98)}

/* E · image card (tiles + next cards) */
.card-img{position:absolute;inset:0;overflow:hidden}
.card-img img{width:100%;height:100%;object-fit:cover;opacity:.5;transition:opacity var(--d3) var(--e-diya),transform var(--d4) var(--e-diya);will-change:transform}
.card-title{position:relative;transform-origin:-60% 100%;transition:transform var(--d3) var(--e-diya)}
.card-title::after{content:"";display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--c-sindoor);margin-left:10px;vertical-align:middle;transform:scale(0);transition:transform var(--d2) var(--e-taali)}
@media (hover:hover) and (pointer:fine){
  .is-card:hover .card-img img{opacity:.78}
  .is-card:hover .card-title{transform:translateY(-4px) rotate(-1.5deg)}
  .is-card:hover .card-title::after{transform:scale(1)}
}
.is-card:focus-visible .card-img img,.is-card:focus-within .card-img img{opacity:.78}
.is-card:focus-visible{outline-offset:-3px}

/* =====================================================================
   PAGE PATTERNS
   ===================================================================== */
/* image hero with centred title */
.hero{position:relative;display:grid;grid-template-rows:1fr;place-items:center;min-height:clamp(440px,42vw,740px);overflow:hidden;color:#fff;background:#000}
.hero__media{position:absolute;inset:-8% 0;will-change:transform;background:#000}
.hero__media img{width:100%;height:100%;object-fit:cover;opacity:.78}
.hero__title{position:relative;text-align:center;padding:0 var(--gutter);text-shadow:0 2px 28px rgba(0,0,0,.35)}
.hero .cap{position:absolute;right:max(var(--gutter),calc((100% - 1380px)/2));bottom:20px;color:#fff;max-width:360px;z-index:1}
/* text over a dimmed image (story mode, casual gaming) */
.hero--text{place-items:center start;min-height:clamp(480px,41vw,711px)}
.hero--text .hero__media img{opacity:.32}
.hero--text.soft .hero__media img{opacity:.85}
.hero--text .hero__copy{position:relative;width:var(--wrap);margin-inline:auto}
.hero--text .hero__copy>div{max-width:560px;margin-left:clamp(0px,14vw,240px)}

/* full-bleed image */
.fullimg{position:relative;overflow:hidden;background:#000}
.fullimg__media{position:relative;height:clamp(320px,45vw,780px);overflow:hidden;background:#000}
.fullimg__media img{position:absolute;left:0;top:-12%;width:100%;height:124%;object-fit:cover;will-change:transform;transform-origin:50% 50%}
.fullimg .cap{position:absolute;right:max(var(--gutter),calc((100% - 1380px)/2));bottom:24px;color:#fff;max-width:380px}

/* split: image half / text half */
.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);min-height:clamp(420px,34vw,600px)}
.split__media{position:relative;overflow:hidden;min-height:320px;background:#000}
.split__media>img,.split__media .lit-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.split__media.light{background:var(--c-smoke)}
.split__copy{display:flex;flex-direction:column;justify-content:center;padding:clamp(48px,6vw,96px) clamp(24px,8vw,150px)}
.split__copy h2{margin-bottom:var(--s5)}
.split__copy .t-small,.split__copy .copy-w{max-width:440px}
.split__copy.top{justify-content:flex-start}
.split__media .cap{position:absolute;right:24px;bottom:18px;color:#fff;max-width:340px}

/* two-column text (heading left, copy right) */
.cols-2{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:0 clamp(32px,4vw,64px)}
.cols-2 .right{grid-column:2}

/* home intro meta */
.meta{display:grid;grid-template-columns:repeat(3,max-content);gap:12px clamp(28px,3vw,44px);margin-top:42px;padding-top:42px;border-top:1px solid rgba(255,255,255,.7);max-width:1060px}
.meta h2{font-family:var(--f-sans);font-size:14px;line-height:1.6;text-decoration:underline;text-underline-offset:3px;margin-bottom:36px}
.meta p{font-size:14px;line-height:1.6}

/* video */
.video{position:relative;aspect-ratio:16/9;width:min(1336px,100%);margin-inline:auto;background:#000}
.video iframe{position:absolute;inset:0;width:100%;height:100%;border:0}

/* home outcome tiles */
.tiles{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));background:var(--c-ink)}
.tile{position:relative;grid-column:span 2;min-height:515px;display:grid;place-items:center;text-align:center;color:#fff;overflow:hidden}
.tile.wide{grid-column:span 3}
.tile__in{position:relative;max-width:340px;padding:40px 24px}
.tile__in h2{margin-bottom:var(--s5)}
.tile__in p{font-size:14px;line-height:1.75;margin-bottom:var(--s5)}
.tile .stretch{position:absolute;inset:0;z-index:0}
.tile .bt{position:relative;z-index:1}

/* next-page cards */
.nextcards{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);background:#000}
.nextcard{position:relative;display:grid;place-items:center;min-height:clamp(220px,18.2vw,315px);text-decoration:none;color:#fff;overflow:hidden}
.nextcard.plain{background:var(--c-ash)}
.nextcard .card-title{font-family:var(--f-serif);font-size:clamp(30px,2.8vw,42px);padding:0 20px;text-align:center}

/* three columns */
.cols-3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(28px,4vw,80px)}
.cols-3 .t-small{max-width:300px;margin-inline:auto}

/* stats + badges */
.stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:40px;text-align:center}
.stats img{width:min(231px,60%);margin:0 auto 18px;backface-visibility:hidden}
.stats p{font-size:14px;line-height:1.6;max-width:220px;margin-inline:auto}
.badge-row{display:grid;grid-template-columns:238px minmax(0,1fr);gap:clamp(28px,5vw,80px);align-items:center;max-width:980px;margin-inline:auto}
.badge-row+.badge-row{margin-top:56px}
.badge-row p{font-size:14px;line-height:1.8}
.badge-row img{backface-visibility:hidden}
.rule{border:0;border-top:1px solid currentColor;opacity:.4;margin:0}

/* gameplay gallery (garba arc) */
.gallery-sec{min-height:100svh;display:flex;flex-direction:column;justify-content:center;padding:clamp(72px,8vh,110px) 0}
.gallery{position:relative;overflow:hidden;padding:clamp(40px,7vh,80px) 0}
.gallery__track{display:flex;gap:16px;width:max-content;padding:0 calc(50vw - 177px);will-change:transform}
.gallery__track{align-items:center}
.gallery__track img{height:clamp(300px,56svh,600px);width:auto;aspect-ratio:354/472;object-fit:cover;flex:none;transform-origin:50% 160%;will-change:transform}
.gallery.is-native{overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.gallery.is-native::-webkit-scrollbar{display:none}
.gallery.is-native img{scroll-snap-align:center}
.gallery.is-static .gallery__track{width:auto;padding:0;justify-content:center;max-width:980px;margin-inline:auto;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.gallery.is-static img{width:100%}
.gallery__hint{font-size:12px;color:var(--t-dark-mute);margin-top:18px}

/* slideshow (bindi wipe) */
.slides{position:relative;overflow:hidden;background:#000;touch-action:pan-y;user-select:none}
.slides__stage{position:relative;width:100%}
.slides figure{position:absolute;inset:0;margin:0}
.slides figure:first-child{position:relative}
.slides figure img{width:100%;height:100%;object-fit:cover}
.slides figure:not(.is-on){visibility:hidden}
.slides figcaption{position:absolute;left:0;right:0;bottom:0;padding:32px 20px 14px;font-size:12.5px;color:#fff;background:linear-gradient(transparent,rgba(0,0,0,.62))}
.slides__arw{position:absolute;top:50%;z-index:3;width:46px;height:46px;margin-top:-23px;border:0;border-radius:50%;background:rgba(0,0,0,.35);color:#fff;cursor:pointer;display:grid;place-items:center;transition:background var(--d2)}
.slides__arw:hover{background:rgba(0,0,0,.6)}
.slides__arw svg{width:18px;height:18px}
.slides__prev{left:12px}.slides__next{right:12px}
.slides__count{position:absolute;right:16px;bottom:14px;z-index:3;font:500 12px var(--f-sans);color:#fff;font-variant-numeric:lining-nums tabular-nums!important}

/* ad creatives quad */
.quad{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.quad figure{position:relative;margin:0;overflow:hidden;background:#000}
.quad .q-media{height:clamp(320px,47vw,807px);overflow:hidden;background:#000}
.quad .q-media img{width:100%;height:100%;object-fit:cover}
.quad .cap{position:absolute;right:24px;bottom:20px;color:#fff;max-width:320px;text-shadow:0 1px 6px rgba(0,0,0,.4)}

/* framed image with caption (brand book) */
.framed{position:relative;max-width:980px;margin:0 auto;overflow:hidden}
.framed .f-media{overflow:hidden;background:#000}
.framed .cap{position:absolute;right:20px;bottom:16px;color:#fff;max-width:320px}

/* embeds */
.embed{width:min(940px,100%);margin-inline:auto;aspect-ratio:4/3;max-height:720px;background:#1a1a1a}
.embed iframe{width:100%;height:100%;border:0;display:block}
.embed-link{display:inline-block;font-size:12px;margin-top:12px}
.embed--pdf{aspect-ratio:auto;height:min(82vh,900px);max-height:none;background:#2a2a2a}
.embed__open{display:grid;place-items:center;height:100%;padding:32px;text-align:center;color:#fff}

/* about */
.about-lead{font-family:var(--f-serif);font-size:var(--fs-lede);line-height:1.35;max-width:900px}
.services{list-style:none;margin:0;padding:0;font-family:var(--f-serif);font-size:clamp(28px,3vw,44px);line-height:1.38}
.eyebrow{font-size:12px;margin:0 0 14px}

/* contact form */
.contact{max-width:620px}
.form{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:28px 64px;margin-top:40px}
.form .full{grid-column:1/-1}
.form input,.form textarea{width:100%;border:0;border-bottom:1px solid #000;padding:10px 6px;font:400 26px/1.3 var(--f-serif);background:transparent;color:#000;border-radius:0;transition:border-color var(--d2)}
.form textarea{font:400 14px/1.6 var(--f-sans);min-height:120px;resize:vertical}
.form input::placeholder{color:#000;opacity:1}
.form textarea::placeholder{color:#666}
.form input:focus,.form textarea:focus{outline:none;border-bottom-color:var(--c-sindoor)}
.form .bt{justify-self:start}

/* about */
.about-intro{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(32px,6vw,96px);align-items:end}
.about-intro p{font-size:var(--fs-small);line-height:1.8;color:rgba(255,255,255,.86)}
.story{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:clamp(32px,6vw,96px)}
.story .prose-col{max-width:640px}
.story .prose-col p{font-size:15.5px;line-height:1.8}
.caps{list-style:none;margin:0;padding:0;border-top:1px solid var(--t-light-line)}
.caps li{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:24px;align-items:baseline;padding:22px 0;border-bottom:1px solid var(--t-light-line)}
.caps b{font:400 clamp(24px,2.4vw,34px)/1.2 var(--f-serif)}
.caps span{font-size:14px;color:var(--t-light-mute)}
.made{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:2px;background:var(--t-dark-line)}
.made article{background:var(--c-ash);padding:32px 26px 36px;min-height:260px}
.made h3{font-size:var(--fs-h2);margin-bottom:14px}
.made p{font-size:13.5px;line-height:1.75;color:rgba(255,255,255,.8)}
.awards{list-style:none;margin:0;padding:0}
.awards li{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,6fr);gap:12px 40px;align-items:baseline;padding:26px 0;border-bottom:1px solid var(--t-dark-line)}
.awards li:first-child{border-top:1px solid var(--t-dark-line)}
.awards b{display:block;font:400 clamp(22px,2.2vw,32px)/1.25 var(--f-serif)}
.awards small{display:block;margin-top:8px;font:500 11.5px/1.4 var(--f-sans);letter-spacing:.06em;text-transform:uppercase;color:var(--t-dark-mute)}
.awards p{margin:0;font-size:14px;line-height:1.75;color:rgba(255,255,255,.78)}
.awards p a{color:#fff}
.awards-sub{margin-top:clamp(56px,6vw,88px)}
.bg-white .awards li,.bg-white .awards li:first-child{border-color:var(--t-light-line)}
.bg-white .awards small{color:var(--t-light-mute)}.bg-white .awards p{color:var(--t-light-mute)}.bg-white .awards p a{color:#000}
.clients{display:flex;flex-wrap:wrap;gap:10px 34px;list-style:none;margin:0;padding:0;font:400 clamp(20px,1.8vw,26px)/1.3 var(--f-serif)}
.cta-row{display:flex;flex-wrap:wrap;gap:14px;justify-content:center}
/* contact details */
.contact-grid{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,6fr);gap:clamp(40px,7vw,120px);align-items:start}
.contact-grid h1{font-size:var(--fs-display);line-height:1.08;margin-bottom:var(--s5)}
.contact-grid .actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:36px}
.contact-grid .lede{font-size:var(--fs-h3);font-family:var(--f-serif);color:var(--t-light-mute)}
.cdl{margin:0;border-top:1px solid var(--t-light-line)}
.cdl>div{display:grid;grid-template-columns:110px minmax(0,1fr);gap:20px;align-items:baseline;padding:22px 0;border-bottom:1px solid var(--t-light-line)}
.cdl dt{font-size:12.5px;color:var(--t-light-mute)}
.cdl dd{margin:0;font:400 clamp(22px,2.2vw,30px)/1.3 var(--f-serif);overflow-wrap:anywhere}
.cdl dd a{color:inherit}
.cdl .socials{display:flex;flex-wrap:wrap;gap:6px 26px}
.copy-btn{margin-left:12px;vertical-align:middle;font:500 11px/1 var(--f-sans);background:none;border:1px solid var(--t-light-line);border-radius:99px;padding:6px 12px;cursor:pointer;color:var(--t-light-mute);transition:border-color var(--d2),color var(--d2)}
.copy-btn:hover{border-color:#000;color:#000}
.copy-btn.is-done{border-color:var(--c-sindoor);color:var(--c-sindoor)}

/* document viewer (self-hosted, replaces Yumpu) */
.doc{width:min(1100px,100%);margin-inline:auto;text-align:left}
.doc__stage{position:relative;background:#111;overflow:hidden;user-select:none;touch-action:pan-y}
.doc__stage img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;background:#111}
.doc__stage img.is-next{z-index:2}
.doc__bar{display:flex;align-items:center;gap:10px;padding:12px 0;color:var(--t-dark-mute);font-size:13px;flex-wrap:wrap}
.doc__count{font-variant-numeric:lining-nums tabular-nums!important;color:#fff;min-width:70px}
.doc__btn{display:inline-grid;place-items:center;width:40px;height:40px;border:1px solid var(--t-dark-line);border-radius:50%;background:none;color:#fff;cursor:pointer;transition:border-color var(--d2),background var(--d2)}
.doc__btn:hover{border-color:#fff}
.doc__btn svg{width:16px;height:16px}
.doc__sp{flex:1}
.doc__dl{color:#fff;font-size:13px}
.doc__thumbs{display:flex;gap:8px;overflow-x:auto;padding:4px 1px 10px;scrollbar-width:thin;scrollbar-color:#444 transparent}
.doc__thumbs button{flex:none;padding:0;border:1px solid transparent;background:#111;cursor:pointer;opacity:.55;transition:opacity var(--d2),border-color var(--d2)}
.doc__thumbs button:hover{opacity:.85}
.doc__thumbs button.is-on{opacity:1;border-color:var(--c-sindoor)}
.doc__thumbs img{display:block;height:68px;width:auto}
.doc:fullscreen{width:100%;height:100%;background:#000;display:flex;flex-direction:column;justify-content:center;padding:24px}
.doc:fullscreen .doc__stage{flex:1;aspect-ratio:auto!important}

/* bibliography */
.bib{display:grid;grid-template-columns:240px minmax(0,1fr);gap:clamp(40px,5vw,88px);align-items:start}
.bib__index{position:sticky;top:calc(var(--hdr-c) + 32px)}
.bib__index ol{list-style:none;margin:0;padding:0}
.bib__index a{display:flex;justify-content:space-between;gap:12px;padding:10px 0 10px 16px;border-bottom:1px solid var(--t-dark-line);font-size:13.5px;color:var(--t-dark-mute);text-decoration:none;position:relative;transition:color var(--d2)}
.bib__index a::before{content:"";position:absolute;left:0;top:50%;width:6px;height:6px;margin-top:-3px;border-radius:50%;background:var(--c-sindoor);transform:scale(0);transition:transform var(--d2) var(--e-taali)}
.bib__index a:hover,.bib__index a.is-current{color:#fff}
.bib__index a.is-current::before{transform:scale(1)}
.bib__index span:last-child{font-size:11.5px;font-variant-numeric:lining-nums tabular-nums!important}
.bib__group{padding-bottom:var(--s8);scroll-margin-top:calc(var(--hdr-c) + 24px)}
.bib__group+.bib__group{padding-top:var(--s7);border-top:1px solid var(--t-dark-line)}
.bib__group>h2{margin-bottom:var(--s2)}
.bib__intro{color:var(--t-dark-mute);font-size:14px;margin-bottom:var(--s5)}
.bib__sub{font-family:var(--f-sans);font-weight:500;font-size:12.5px;color:var(--t-dark-mute);margin:var(--s6) 0 0}
.entry{display:grid;grid-template-columns:40px minmax(0,1fr);gap:16px;padding:16px 0;border-bottom:1px solid var(--t-dark-line);font-size:14px;line-height:1.7;overflow-wrap:anywhere}
.entry .n{font:500 11.5px/2 var(--f-sans);color:var(--t-dark-mute);font-variant-numeric:lining-nums tabular-nums!important}
.note{margin:var(--s5) 0 var(--s2) 56px;padding:18px 22px;border-left:2px solid var(--c-sindoor);background:rgba(0,0,0,.2)}
.note small{display:block;font:500 11px var(--f-sans);color:var(--t-dark-mute);margin-bottom:8px}
.note p{font-family:var(--f-serif);font-size:18px;line-height:1.55;margin-bottom:.9em}
.note p:last-child{margin-bottom:0}
.note strong{font-weight:700}

/* "Let's Chat!" */
.chat{position:fixed;right:16px;bottom:16px;z-index:40;display:flex;align-items:center;gap:0;height:48px;padding:0 14px;background:#000;color:#fff;text-decoration:none;font:400 17px/1 var(--f-serif);border-radius:24px;box-shadow:0 8px 24px rgba(0,0,0,.25);transition:padding var(--d3) var(--e-diya),transform var(--d3) var(--e-diya)}
.chat svg{width:20px;height:20px;flex:none}
.chat__lbl{display:inline-block;max-width:120px;margin-left:10px;overflow:hidden;white-space:nowrap;transition:max-width var(--d3) var(--e-diya),margin var(--d3) var(--e-diya),opacity var(--d2)}
.chat .bd{position:absolute;top:9px;right:10px;width:6px;height:6px;border-radius:50%;background:var(--c-sindoor);transform:scale(0);transition:transform var(--d2) var(--e-taali)}
.chat.is-compact .chat__lbl{max-width:0;margin-left:0;opacity:0}
.chat.is-compact .bd{transform:scale(1)}
@media (hover:hover) and (pointer:fine){.chat.is-compact:hover .chat__lbl{max-width:120px;margin-left:10px;opacity:1}.chat.is-compact:hover .bd{transform:scale(0)}}
.is-menu .chat{transform:translateY(90px)}

/* footer */
.ftr{background:#fff;color:#000;padding:56px 0 48px}
.ftr__links{display:flex;flex-wrap:wrap;gap:6px 38px;list-style:none;margin:0 0 34px;padding:0}
.ftr__links a{font-family:var(--f-serif);font-size:clamp(24px,2vw,30px)}
.ftr__copy{font-size:12px;margin:0}

/* page-transition veil */
.veil{position:fixed;inset:0;z-index:100;background:#0b0908;display:grid;place-items:center;pointer-events:none;visibility:hidden;clip-path:circle(0px at 50% 50%)}
.pt-in .veil{visibility:visible;clip-path:none}
.veil__lbl{text-align:center;opacity:0}
.veil__lbl small{display:block;font:500 12px var(--f-sans);color:var(--t-dark-mute);margin-bottom:8px;font-variant-numeric:lining-nums tabular-nums!important}
.veil__lbl b{font:400 clamp(28px,3.6vw,48px)/1.1 var(--f-serif);color:#fff}
.veil__lbl i{display:inline-block;width:8px;height:8px;margin-left:6px;border-radius:50%;background:var(--c-sindoor);vertical-align:middle}
.pt-in .veil__lbl.is-carry{opacity:1}

/* motion helpers */
.ln-mask{overflow:hidden;padding-bottom:.08em;margin-bottom:-.08em}
[data-lines] .ln{display:block}

/* =====================================================================
   BREAKPOINTS
   Wide ≥1440 · Desktop 1200–1439 · Laptop 1024–1199 · Tablet 768–1023
   Large phone 480–767 · Phone <480 · Short screens (height <520)
   ===================================================================== */
@media (max-width:1439px){
  .tile{min-height:480px}
}
@media (max-width:1199px){
  :root{--gutter:40px}
  .nav__list{gap:20px}
  .nav__trg{font-size:15px}
  .split__copy{padding:clamp(48px,5vw,80px) clamp(24px,5vw,72px)}
  .tile{min-height:440px}
  .tile__in{max-width:300px}
}
/* tablet: Menu pill + side panel */
@media (max-width:1023px){
  :root{--gutter:32px;--hdr:72px;--hdr-c:60px}
  .about-intro,.story,.contact-grid{grid-template-columns:minmax(0,1fr)}
  .made{grid-template-columns:repeat(2,minmax(0,1fr))}
  .gallery-sec{min-height:0}
  .gallery__track img{height:auto;width:clamp(220px,46vw,340px)}
  .logo{height:42px}
  .logo__word{margin-left:calc(42px * .245)}
  .nav{display:none}
  .mbtn{display:inline-flex;border-color:#000;padding-right:2px}
  .panel{top:0;right:0;bottom:0;width:min(440px,100%);padding-top:var(--hdr)}
  .is-menu .hdr{transform:none}
  .split{grid-template-columns:minmax(0,1fr);min-height:0}
  .split__media{aspect-ratio:16/10;min-height:0}
  .split--flip .split__media,.split .split__media.first{order:-1}
  .split__copy{padding:56px var(--gutter)}
  .split__copy .t-small,.split__copy .copy-w{max-width:620px}
  .tiles{grid-template-columns:repeat(2,minmax(0,1fr))}
  .tile,.tile.wide{grid-column:span 1;min-height:420px}
  .tile:last-child{grid-column:1/-1}
  .cols-2{grid-template-columns:minmax(0,1fr)}
  .cols-2 .right{grid-column:auto;margin-top:var(--s6)}
  .hero{min-height:60svh}
  .hero--text .hero__copy>div{margin-left:0}
  .bib{grid-template-columns:minmax(0,1fr);gap:0}
  .bib__index{position:sticky;top:var(--hdr-c);transition:top var(--d3) var(--e-diya);z-index:5;margin:0 calc(var(--gutter) * -1) var(--s6);padding:12px var(--gutter);background:rgba(36,35,35,.94);backdrop-filter:blur(8px)}
  .bib__index ol{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;padding:1px;scroll-padding-inline:1px}
  .is-hdr-hidden .bib__index{top:0}
  .bib__index ol::-webkit-scrollbar{display:none}
  .bib__index a{border:1px solid var(--t-dark-line);border-radius:99px;padding:6px 14px;white-space:nowrap;gap:8px}
  .bib__index a::before{display:none}
  .bib__index a.is-current{border-color:#fff}
  .badge-row{grid-template-columns:180px minmax(0,1fr)}
}
/* large phone: burger + full-screen panel */
@media (max-width:767px){
  :root{--gutter:24px;--hdr:64px;--hdr-c:56px}
  .logo{height:38px}
  .logo__word{margin-left:calc(38px * .245)}
  .hdr.is-compact .logo{height:34px}
  .mbtn{border-color:transparent;padding-right:0;margin-right:-10px}
  .mbtn__label{display:none}
  .panel{inset:0;width:auto;padding-top:var(--hdr)}
  .scrim{display:none}
  .split__media{aspect-ratio:4/3}
  .tiles{grid-template-columns:minmax(0,1fr)}
  .tile,.tile.wide,.tile:last-child{grid-column:auto;min-height:380px}
  .nextcards{grid-template-columns:minmax(0,1fr)}
  .cols-3{grid-template-columns:minmax(0,1fr);gap:0}
  .cols-3>div{padding:var(--s6) 0;border-top:1px solid var(--t-dark-line)}
  .cols-3>div:first-child{border-top:0;padding-top:0}
  .stats{grid-template-columns:minmax(0,1fr);gap:48px}
  .badge-row{grid-template-columns:minmax(0,1fr);text-align:center}
  .badge-row img{width:170px;margin-inline:auto}
  .quad{grid-template-columns:minmax(0,1fr)}
  .quad .q-media{height:auto;aspect-ratio:4/3}
  .meta{grid-template-columns:repeat(2,max-content)}
  .meta>div:last-child{grid-column:1/-1}
  .meta h2{margin-bottom:10px}
  .form{grid-template-columns:minmax(0,1fr);gap:22px}
  .made{grid-template-columns:minmax(0,1fr)}
  .made article{min-height:0}
  .caps li,.awards li{grid-template-columns:minmax(0,1fr);gap:6px}
  .cdl>div{grid-template-columns:minmax(0,1fr);gap:4px}
  .doc__thumbs img{height:52px}
  .form input{font-size:22px}
  .hero{min-height:70svh}
  /* captions move under their images */
  .hero{grid-template-rows:1fr auto}
  .hero .cap,.fullimg .cap,.split__media .cap,.quad .cap,.framed .cap{position:relative;right:auto;bottom:auto;left:auto;max-width:none;text-align:left;text-shadow:none;color:var(--t-dark-mute);padding:12px var(--gutter) 14px;background:#000}
  .hero .cap{grid-row:2;justify-self:stretch;background:linear-gradient(transparent,rgba(0,0,0,.65));color:rgba(255,255,255,.8)}
  .hero--text.soft .hero__media img{opacity:.5}
  .split__media{overflow:visible;aspect-ratio:auto}
  .split__media>img,.split__media .lit-img{position:relative;inset:auto;aspect-ratio:4/3;height:auto}
  .split__media.light>img{aspect-ratio:4/3}
  .framed .cap{padding:12px 0 0;background:transparent}
  .note{margin-left:0}
  .entry{grid-template-columns:32px minmax(0,1fr);gap:10px}
  .chat{right:12px;bottom:12px;height:44px}
  .gallery__track{padding:0 calc(50vw - 120px)}
}
@media (max-width:479px){
  :root{--gutter:20px}
  .t-display{font-size:clamp(34px,10vw,40px)}
  .bt{padding:13px 26px}
  .services{font-size:28px}
  .tile__in{padding:32px 20px}
}
/* short screens (phones on their side) */
@media (max-height:520px) and (orientation:landscape){
  .hero{min-height:100svh}
  .hero--text{min-height:auto;padding:64px 0}
  .pl1>li>.mi{padding:9px 0;font-size:24px}
  .pl2 .mi{padding:4px 0;font-size:19px}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition-duration:.01ms!important;animation-duration:.01ms!important;scroll-behavior:auto!important}
  .hdr.is-hidden{transform:none}
}
@media print{.hdr,.panel,.chat,.veil,.scrim{display:none!important}.page{padding-top:0}}

/* small utilities added with the page build */
.hide-desk{display:none}
@media (max-width:1023px){.hide-desk{display:block}}
.tile__in{pointer-events:none}
.tile__in .bt{pointer-events:auto}
.stretch{z-index:0}
.doc__thumbs{position:relative}
.doc:focus-visible{outline-offset:8px}
/* booklet (PDF.js + page flip) */
.book{width:min(1240px,100%)}
.book__stage{position:relative;margin-inline:auto;min-height:220px;max-width:100%}
.book:not(.is-ready) .book__stage{width:100%!important;aspect-ratio:16/9;max-height:70vh;background:#111}
.book__status{position:absolute;inset:0;display:grid;place-items:center;margin:0;font-size:13px;color:var(--t-dark-mute);font-variant-numeric:lining-nums tabular-nums!important}
.book__status[hidden],.book__bar[hidden]{display:none}
.book__flip{transition:transform .76s var(--e-diya);min-width:0!important}
.book__flip.is-front{transform:translateX(-25%)}
.book__flip.is-back{transform:translateX(25%)}
.book__page{background:#111;overflow:hidden}
.book__page canvas{display:block;width:100%;height:100%;object-fit:contain}
.book .doc__bar{max-width:100%;margin-inline:auto}
.book:focus-visible{outline:none}.book:focus-visible .book__stage{outline:1px solid var(--c-sindoor);outline-offset:6px}
.book:fullscreen{width:100%;height:100%;background:#000;display:flex;flex-direction:column;justify-content:center;align-items:center;padding:24px}
.book:fullscreen .doc__bar{width:100%;max-width:1400px}
.book__deck{position:relative;width:100%;background:#111;overflow:hidden;cursor:pointer;touch-action:pan-y}
.book__slide{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:contain;transition:transform .56s var(--e-diya),opacity .56s var(--e-diya)}
/* booklet controls: one pill, centred under the book */
.book__bar{display:flex;justify-content:center;padding:18px 0 0}
.book__ctl{display:inline-flex;align-items:center;gap:2px;padding:4px;border:1px solid rgba(255,255,255,.14);border-radius:999px;background:rgba(0,0,0,.4)}
.book__ctl .doc__btn{width:38px;height:38px;border:0;transition:background var(--d2),color var(--d2)}
.book__ctl .doc__btn svg{width:15px;height:15px}
.book__ctl .doc__count{min-width:0;width:9ch;text-align:center;font-size:13px;letter-spacing:0}
.book.is-slides .book__ctl .doc__count{width:6.5ch}
.book__div{width:1px;height:18px;margin:0 6px;background:rgba(255,255,255,.18)}
@media (hover:hover){.book__ctl .doc__btn:hover{background:rgba(255,255,255,.1)}}
.book__ctl .doc__btn:focus-visible{outline:1px solid var(--c-sindoor);outline-offset:1px}
.book__ctl .doc__btn:active{background:rgba(255,255,255,.16)}