[hidden]{display:none!important}
body{margin:0}
img{max-width:100%}
:root{padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
/* Layout: Direction B "Studio Paper". A quiet paper page, a large italic serif for statements, a grotesk for everything else, one cobalt accent. The work carries the colour. */
:root{
  --paper:#EEF0F3; --sheet:#FFFFFF; --ink:#101114; --muted:#5A5D66; --line:#D5D8DE; --cobalt:#2B3BFF;
  --f-display:"Instrument Serif",Georgia,serif;
  --f-body:"Familjen Grotesk",system-ui,sans-serif;
  --f-mono:"JetBrains Mono",ui-monospace,monospace;
  color-scheme:light;
}
*{box-sizing:border-box}
body{background:var(--paper);color:var(--ink);font-family:var(--f-body);font-size:16px;line-height:1.55}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:10;background:var(--paper)}
h1,h2,h3,h4,p{margin:0}
h1,h2,h3{text-wrap:balance}
.x{font-family:var(--f-display);font-weight:400;line-height:.98;letter-spacing:-.015em}
.x i,.x em{color:var(--cobalt)}
.mono{font-family:var(--f-mono);font-size:11.5px;letter-spacing:.05em;text-transform:uppercase;color:var(--muted)}
.in{max-width:1200px;margin:0 auto;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
a{color:inherit}
:focus-visible{outline:2px solid var(--cobalt);outline-offset:3px}
button{font:inherit;cursor:pointer;color:inherit}

.note{background:var(--ink);color:#C9CCD3}
.note .mono{color:#C9CCD3}
.note .in{padding-block:7px;display:flex;gap:12px;flex-wrap:wrap;justify-content:space-between}
.nav{position:sticky;top:env(safe-area-inset-top,0px);z-index:9;background:color-mix(in srgb,var(--paper) 88%,transparent);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.nav .in{display:flex;align-items:center;gap:20px;padding-block:14px}
.brand{text-decoration:none;flex-shrink:0;display:flex;align-items:baseline;font-size:26px;line-height:1}
.brand i{font-family:var(--f-display)}
.brand b{font-weight:700;letter-spacing:-.03em;font-size:23px}
.brand .dot{width:7px;height:7px;border-radius:50%;background:var(--cobalt);margin-left:3px}
.tabs{display:flex;gap:2px;overflow-x:auto;scrollbar-width:none;margin-left:auto}
.tabs::-webkit-scrollbar{display:none}
.tabs button{background:none;border:0;padding:8px 10px;font-size:14.5px;white-space:nowrap;color:var(--muted)}
.tabs button[aria-current="page"]{color:var(--ink);text-decoration:underline;text-decoration-color:var(--cobalt);text-decoration-thickness:2px;text-underline-offset:6px}

.page[hidden]{display:none!important}
.sec{padding-block:80px;border-top:1px solid var(--line)}
.sec-head{display:flex;justify-content:space-between;align-items:end;gap:16px;flex-wrap:wrap;margin-bottom:36px}
.sec-head h2{font-size:clamp(40px,6vw,76px)}
.btn{display:inline-flex;align-items:center;gap:8px;background:var(--ink);color:var(--paper);border:0;padding:13px 20px;border-radius:99px;font-weight:600;font-size:15px;text-decoration:none}
.btn.ghost{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink)}

/* HERO: statement + full-bleed showreel */
.hero-in{padding-block:56px 36px;display:grid;gap:28px}
.hero-top{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap}
.hero h1{font-size:clamp(52px,10vw,148px)}
.word{font-style:italic;color:var(--cobalt);display:inline-block;min-width:4.2ch}
.hero-bot{display:flex;justify-content:space-between;align-items:end;gap:20px;flex-wrap:wrap}
.hero-bot p{max-width:44ch;font-size:18px;color:var(--muted)}
.reelwrap{padding-bottom:24px}
.reel-frame{position:relative;aspect-ratio:16/9;max-width:100%;overflow:hidden;background:var(--ink);transform:scale(var(--s,1));transform-origin:center top;transition:transform .1s linear}
.reel{position:absolute;inset:0}
.reel div{position:absolute;inset:0;background-size:cover;background-position:center;opacity:0;animation:reel 18s infinite}
.reel div:nth-child(2){animation-delay:3s}.reel div:nth-child(3){animation-delay:6s}.reel div:nth-child(4){animation-delay:9s}.reel div:nth-child(5){animation-delay:12s}.reel div:nth-child(6){animation-delay:15s}
@keyframes reel{0%{opacity:0;transform:scale(1.05)}4%,16%{opacity:1}22%,100%{opacity:0;transform:scale(1)}}
.reel-bar{position:absolute;left:0;right:0;bottom:0;display:flex;justify-content:space-between;align-items:center;gap:10px;padding:14px 16px;background:linear-gradient(180deg,transparent,rgba(16,17,20,.7));color:#fff}
.reel-bar .mono{color:#fff}
.sound{display:inline-flex;align-items:center;gap:10px;background:#fff;color:var(--ink);border:0;padding:10px 14px;border-radius:99px;font-size:13px;font-weight:600}
.eq{display:inline-flex;gap:2px;align-items:end;height:13px}
.eq i{width:3px;height:100%;background:var(--cobalt);transform-origin:bottom;transform:scaleY(.25);border-radius:1px}
.playing .eq i{animation:eq .7s ease-in-out infinite alternate}
.eq i:nth-child(2){animation-delay:-.2s}.eq i:nth-child(3){animation-delay:-.45s}.eq i:nth-child(4){animation-delay:-.1s}
@keyframes eq{to{transform:scaleY(1)}}

/* posters (work tiles; colours belong to each project) */
.poster{aspect-ratio:4/5;max-width:100%;position:relative;overflow:hidden;display:flex;flex-direction:column;justify-content:space-between;padding:16px;background-size:cover;background-position:center top;border-radius:4px}
.poster .t{font-family:var(--f-display);font-size:clamp(28px,3.2vw,38px);line-height:.95}
.poster .tag{display:flex;justify-content:space-between;gap:8px;font-family:var(--f-mono);font-size:11px;text-transform:uppercase;letter-spacing:.05em}
.poster .tag.mono{color:inherit}
.poster > *{position:relative}
.p-kta{background-image:url(img/w-list.jpg);color:#fff}
.p-kta::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 45%,rgba(0,0,0,.8))}
.p-kahaani{background:radial-gradient(circle at 70% 30%,#F2B84B 0 18%,transparent 19%),repeating-radial-gradient(circle at 70% 30%,transparent 0 22px,rgba(242,184,75,.25) 23px 24px),#1B1530;color:#F4E9D8}
.p-paisa{background:linear-gradient(135deg,#0E3B2E 0 50%,#16A36B 50%);color:#EFFFF6}
.p-kulhad{background:radial-gradient(ellipse at 50% 110%,#B5562B 0 40%,transparent 41%),#F1D9B5;color:#3A1A0B}
.p-litti{background:repeating-linear-gradient(90deg,#1E1E1E 0 12px,#2A2A2A 12px 24px);color:#FFC44D}
.p-nova{background:radial-gradient(circle at 30% 70%,#7FB2FF 0 10%,transparent 11%),radial-gradient(circle at 62% 42%,#7FB2FF 0 6%,transparent 7%),#0A1A3A;color:#E7F0FF}
.concept{background:rgba(255,255,255,.2);padding:2px 6px;border-radius:99px}

.rail{display:flex;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:12px;scrollbar-width:thin}
.rail .poster{flex:0 0 min(300px,74vw);scroll-snap-align:start;cursor:pointer}

/* sticky chapters */
.chap{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:40px;padding-block:48px;border-top:1px solid var(--line)}
.chap .stick{position:sticky;top:calc(env(safe-area-inset-top,0px) + 90px);align-self:start}
.chap .stick .num{color:var(--cobalt)}
.chap .stick h3{font-size:clamp(56px,8vw,112px);margin-top:4px}
.chap .stick p{max-width:36ch;margin-top:14px;color:var(--muted)}
.proofs{display:grid;gap:12px}
.proof{background:var(--sheet);border:1px solid var(--line);border-radius:4px;padding:20px;display:grid;grid-template-columns:44px 1fr;gap:14px;align-items:start}
.proof .n{font-family:var(--f-mono);font-size:11px;color:var(--cobalt);padding-top:4px}
.proof h4{font-weight:600;font-size:18px}
.proof p{color:var(--muted);margin-top:4px;font-size:15px}

/* tap to hear */
.hear{background:var(--sheet);border-block:1px solid var(--line)}
.hear .in{padding-block:80px;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:40px;align-items:center}
.hear h2{font-size:clamp(44px,6vw,80px)}
.hear .mono.k{color:var(--cobalt)}
.wave{display:flex;gap:4px;align-items:center;height:150px}
.wave i{flex:1;background:var(--ink);border-radius:2px;height:var(--h);transform:scaleY(.15);transition:transform .3s}
.hear.on .wave i{background:var(--cobalt);animation:wv 1s ease-in-out infinite alternate}
@keyframes wv{from{transform:scaleY(.2)}to{transform:scaleY(1)}}
.tracks{display:grid;margin-top:22px}
.tracks button{display:flex;justify-content:space-between;gap:12px;background:none;border:0;border-top:1px solid var(--line);padding:14px 0;text-align:left;font-size:15px}
.tracks button[aria-pressed="true"]{color:var(--cobalt)}

.cta .in{padding-block:96px;display:grid;gap:24px;justify-items:start}
.cta h2{font-size:clamp(52px,9vw,128px)}
.cta .row{display:flex;gap:12px;flex-wrap:wrap}

/* work */
.chips{display:flex;gap:8px;flex-wrap:wrap}
.chips button{background:transparent;border:1px solid var(--line);padding:7px 14px;border-radius:99px;font-size:14px}
.chips button[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px 20px;margin-top:32px}
.item{display:grid;gap:10px;cursor:pointer;background:none;border:0;padding:0;text-align:left}
.item .meta{display:flex;justify-content:space-between;gap:8px}
.item h3{font-weight:600;font-size:18px}

/* case study */
.case-hero{background:#1B1530;color:#F4E9D8}
.case-hero .mono{color:#CBBFE0}
.case-hero .in{padding-block:72px;display:grid;gap:24px}
.case-hero h1{font-size:clamp(64px,12vw,160px);color:#F4E9D8}
.facts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-top:1px solid rgba(244,233,216,.3)}
.facts div{padding:14px 14px 0 0}
.facts b{display:block;font-family:var(--f-body);text-transform:none;letter-spacing:0;font-size:15px;color:#F4E9D8;margin-top:4px;font-weight:600}
.case-body{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:40px}
.case-body h3{font-size:40px}
.case-body p{max-width:62ch;margin-bottom:14px}
.shots{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:28px}

/* services */
.pkgs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.pkg{background:var(--sheet);border:1px solid var(--line);border-radius:4px;padding:28px;display:flex;flex-direction:column;gap:14px}
.pkg.hot{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.pkg.hot .mono{color:#9AA3FF}
.pkg h3{font-size:40px}
.price{font-weight:600;font-size:24px;letter-spacing:-.01em}
.price small{font-family:var(--f-mono);font-size:11px;font-weight:400;display:block;opacity:.7;text-transform:uppercase;letter-spacing:.05em}
.pkg ul{margin:0;padding:0;list-style:none;display:grid;gap:8px;font-size:15px}
.pkg li::before{content:"— ";color:var(--cobalt)}
.pkg.hot li::before{color:#9AA3FF}
.steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px}
.steps div{border-top:1px solid var(--ink);padding-top:16px}
.steps h4{font-family:var(--f-display);font-weight:400;font-size:30px;margin:6px 0}
.steps p{color:var(--muted);font-size:15px}

/* about */
.founders{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:28px}
.founder{display:grid;gap:12px}
.founder .ph{aspect-ratio:4/5;max-width:100%;background-size:cover;background-position:center top;border-radius:4px;filter:grayscale(1)}
.founder h3{font-size:40px}
.founder p{max-width:46ch;color:var(--muted)}

/* contact */
.contact{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:48px}
form{display:grid;gap:16px;background:var(--sheet);border:1px solid var(--line);border-radius:4px;padding:24px}
label{display:grid;gap:6px}
input,select,textarea{font:inherit;background:var(--paper);border:1px solid var(--line);padding:12px;border-radius:4px;color:var(--ink);width:100%}
textarea{min-height:120px;resize:vertical}
.sent{background:var(--paper);border-left:3px solid var(--cobalt);padding:12px 14px}
.copy{display:flex;gap:10px;align-items:center;flex-wrap:wrap;padding:14px 0;border-top:1px solid var(--line)}
.copy b{font-weight:600;user-select:all}
.copy button{background:none;border:1px solid var(--line);border-radius:99px;padding:4px 12px;font-size:12px}

footer{border-top:1px solid var(--line)}
footer .in{padding-block:48px;display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;align-items:end}
footer .big{font-size:clamp(64px,13vw,190px)}

@media (max-width:860px){
  .chap,.hear .in,.case-body,.contact{grid-template-columns:1fr}
  .chap .stick{position:static}
  .grid,.pkgs,.shots{grid-template-columns:repeat(2,minmax(0,1fr))}
  .facts,.steps{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:540px){
  .grid,.pkgs,.founders,.shots{grid-template-columns:1fr}
  .sec{padding-block:56px}
  .hero-in{padding-block:36px 28px}
}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}.reel div:first-child{opacity:1}}

.reach{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.reach-card{background:var(--sheet);border:1px solid var(--line);border-radius:4px;padding:22px;display:grid;gap:6px;text-decoration:none;color:var(--ink)}
.reach-card b{font-size:20px;font-weight:600;word-break:break-word}
.reach-card span:last-child{color:var(--muted);font-size:14px}
a.reach-card:hover{border-color:var(--ink)}
.reach-card.hot{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.reach-card.hot .mono,.reach-card.hot span:last-child{color:#C9CCD3}
@media (max-width:540px){.reach{grid-template-columns:1fr}}
.reel-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.poster .pv{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.poster:has(.pv)::after{content:"";position:absolute;inset:0;z-index:0;background:linear-gradient(180deg,rgba(0,0,0,.45),transparent 28%,transparent 62%,rgba(0,0,0,.7))}
.poster:has(.pv) > :not(.pv){z-index:1;color:#fff}
.poster:has(.pv) .concept{background:rgba(255,255,255,.22)}
.poster:has(.pv) .t{display:none}
.poster:has(.pv) .t{display:none}