/* ==========================================================================
   Mhatre Innovations, homepage
   --------------------------------------------------------------------------
   The homepage. A dark opening where the logo mark is drawn as thousands of
   points that react to the cursor and scatter on scroll, kinetic type that
   skews with scroll speed, a custom cursor, film grain, a services list with
   a preview that follows the cursor, a website that builds itself in a
   browser frame, a work section whose image changes as the list scrolls,
   and full screen colour panels that slide over each other. No libraries.
   ========================================================================== */
:root{
  --bg:#FBF9F4; --band:#F4EFE4; --surface:#FFFDF9;
  --ink:#1B2431; --ink-2:#3F4A57; --ink-3:#6B7684; --ink-4:#AEB4BF;
  --copper:#9E4A0E; --copper-hover:#7C3A0B; --copper-bright:#E2751F; --copper-light:#F2A65A; --copper-soft:#F8EBDD;
  --night:#0E1218; --night-2:#151A22; --on-dark:#EDE8DC; --on-dark-muted:#AEB4BF;
  --line:#E7E1D3; --line-strong:#D9D2C2;
  --wa:#25D366; --ok:#2F7D4F;
  --display:"Fraunces",Georgia,"Times New Roman",serif;
  --sans:"Instrument Sans",system-ui,"Segoe UI",Arial,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,Consolas,monospace;
  --wrap:1240px; --hdr:76px;
  --ease:cubic-bezier(.16,1,.3,1); --ease-io:cubic-bezier(.76,0,.24,1);
  --shadow:0 12px 32px -16px rgba(27,36,49,.16),0 2px 8px -4px rgba(27,36,49,.06);
  --shadow-lg:0 40px 80px -40px rgba(27,36,49,.30),0 10px 30px -18px rgba(27,36,49,.10);
}
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }
html,body{ overflow-x:clip; }
body{ margin:0; background:var(--night); color:var(--ink); font-family:var(--sans); font-size:1rem; line-height:1.65; -webkit-font-smoothing:antialiased; }
img,svg,canvas{ display:block; max-width:100%; height:auto; }
a{ color:inherit; text-decoration:none; }
ul,ol{ margin:0; padding:0; list-style:none; }
h1,h2,h3,p,figure{ margin:0; }
:focus-visible{ outline:2px solid var(--copper-light); outline-offset:3px; border-radius:4px; }
.wrap{ width:min(100% - 2.5rem,var(--wrap)); margin-inline:auto; }
html.has-cursor,html.has-cursor a,html.has-cursor button{ cursor:none; }

/* ---------- type ---------- */
.display{ font-family:var(--display); font-weight:500; letter-spacing:-.03em; line-height:1; font-variation-settings:"opsz" 144; }
.display em{ font-style:italic; font-weight:400; color:var(--copper-light); }
.light .display em{ color:var(--copper); }
.eyebrow{ display:inline-flex; align-items:center; gap:.7rem; font-family:var(--mono); font-size:.7rem; letter-spacing:.16em; text-transform:uppercase; color:var(--copper-light); }
.eyebrow::before{ content:""; width:2rem; height:1px; background:currentColor; }
.light .eyebrow{ color:var(--copper); }
.lead{ font-size:clamp(1.05rem,1rem + .35vw,1.25rem); color:var(--ink-2); max-width:54ch; line-height:1.65; }
.line{ display:block; overflow:hidden; padding-bottom:.08em; margin-bottom:-.08em; }
.line > span{ display:block; transform:translateY(112%); transition:transform 1.1s var(--ease); }
.in .line > span{ transform:none; }
.in .line:nth-child(2) > span{ transition-delay:.1s } .in .line:nth-child(3) > span{ transition-delay:.2s } .in .line:nth-child(4) > span{ transition-delay:.3s }

/* ---------- buttons ---------- */
.btn{ display:inline-flex; align-items:center; gap:.6rem; padding:1rem 1.5rem; border-radius:999px; font-weight:600; font-size:.98rem; line-height:1; border:1.5px solid transparent; transition:transform .3s var(--ease), background .2s, border-color .2s, color .2s; white-space:nowrap; }
.btn svg{ width:18px; height:18px; flex:none; }
.btn-copper{ background:var(--copper-bright); color:#0E1218; }
.btn-copper:hover{ background:var(--copper-light); }
.btn-outline{ border-color:rgba(237,232,220,.35); color:var(--on-dark); }
.btn-outline:hover{ border-color:var(--on-dark); }
.light .btn-outline{ border-color:var(--line-strong); color:var(--ink); } .light .btn-outline:hover{ border-color:var(--ink); }
.btn-ink{ background:var(--ink); color:#FFFDF9; }
.btn-wa{ background:var(--wa); color:#062B14; }
.btn-lg{ padding:1.15rem 1.9rem; font-size:1.05rem; }

/* ---------- loader ---------- */
.loader{ position:fixed; inset:0; z-index:300; background:var(--night); color:var(--on-dark); display:grid; place-items:center; transition:transform .9s var(--ease-io); }
.loader.done{ transform:translateY(-101%); }
.loader.gone{ display:none; }
.ld-in{ display:flex; flex-direction:column; align-items:center; gap:1rem; }
.ld-in img{ width:56px; }
.ld-n{ font-family:var(--display); font-size:clamp(4rem,10vw,8rem); line-height:1; letter-spacing:-.04em; font-variant-numeric:tabular-nums; }
.ld-n small{ font-size:.35em; color:var(--copper-light); font-style:italic; }
.ld-line{ position:absolute; left:0; bottom:0; height:2px; width:100%; background:var(--copper-bright); transform:scaleX(0); transform-origin:left; }
.ld-word{ font-family:var(--mono); font-size:.68rem; letter-spacing:.2em; text-transform:uppercase; color:var(--on-dark-muted); }

/* ---------- grain, cursor, progress, header, chapter ---------- */
.grain{ position:fixed; inset:-50%; z-index:150; pointer-events:none; opacity:.055; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); animation:grain 1.2s steps(6) infinite; }
@keyframes grain{ 0%{ transform:translate(0,0) } 20%{ transform:translate(-4%,3%) } 40%{ transform:translate(3%,-5%) } 60%{ transform:translate(-2%,-3%) } 80%{ transform:translate(4%,4%) } 100%{ transform:translate(0,0) } }
.cursor{ position:fixed; left:0; top:0; z-index:250; pointer-events:none; mix-blend-mode:difference; display:none; }
html.has-cursor .cursor{ display:block; }
.c-dot{ position:absolute; width:7px; height:7px; border-radius:50%; background:#FFF; transform:translate(-50%,-50%); }
.c-ring{ position:absolute; width:38px; height:38px; border-radius:50%; border:1.5px solid rgba(255,255,255,.9); transform:translate(-50%,-50%); display:grid; place-items:center; transition:width .35s var(--ease), height .35s var(--ease), border-color .3s; }
.c-label{ font-family:var(--mono); font-size:.6rem; letter-spacing:.16em; text-transform:uppercase; color:#FFF; opacity:0; transition:opacity .2s; white-space:nowrap; }
.cursor.is-link .c-ring{ width:60px; height:60px; }
.cursor.is-view .c-ring{ width:96px; height:96px; border-color:#FFF; } .cursor.is-view .c-label{ opacity:1; }
.progress{ position:fixed; left:0; top:0; height:2px; width:100%; z-index:140; pointer-events:none; }
.progress i{ display:block; height:100%; background:var(--copper-bright); transform-origin:left; transform:scaleX(0); }

.hdr{ position:fixed; inset:0 0 auto 0; z-index:130; height:var(--hdr); display:flex; align-items:center; color:var(--on-dark); transition:color .4s, background .4s, box-shadow .4s; }
body[data-theme="light"] .hdr{ color:var(--ink); }
.hdr.is-stuck{ -webkit-backdrop-filter:blur(14px) saturate(160%); backdrop-filter:blur(14px) saturate(160%); background:rgba(14,18,24,.55); }
body[data-theme="light"] .hdr.is-stuck{ background:rgba(251,249,244,.7); box-shadow:0 1px 0 rgba(27,36,49,.06); }
.hdr-in{ display:flex; align-items:center; gap:1.25rem; }
.brand{ display:flex; align-items:center; gap:.65rem; font-family:var(--display); font-weight:600; font-size:1.2rem; letter-spacing:-.01em; white-space:nowrap; }
.brand img{ width:32px; }
.clock{ font-family:var(--mono); font-size:.68rem; letter-spacing:.12em; text-transform:uppercase; opacity:.7; display:flex; align-items:center; gap:.5rem; }
.clock::before{ content:""; width:6px; height:6px; border-radius:50%; background:var(--wa); }
.hdr-nav{ margin-left:auto; display:flex; align-items:center; gap:.2rem; }
.hdr-nav a{ padding:.55rem .8rem; border-radius:999px; font-weight:500; font-size:.94rem; opacity:.85; }
.hdr-nav a:hover{ opacity:1; }
.hdr-nav .btn{ margin-left:.5rem; padding:.7rem 1.15rem; font-size:.9rem; opacity:1; }
body[data-theme="light"] .hdr-nav .btn-copper,body[data-theme="copper"] .hdr-nav .btn-copper{ background:var(--ink); color:#FFFDF9; }
body[data-theme="copper"] .hdr.is-stuck{ background:rgba(158,74,14,.6); }
@media (max-width:860px){ .hdr-nav a:not(.btn),.clock{ display:none; } .brand{ font-size:1rem; } .brand img{ width:26px; } .hdr-nav .btn{ padding:.6rem .9rem; font-size:.82rem; } }

.chapter{ position:fixed; left:1.5rem; bottom:1.5rem; z-index:120; mix-blend-mode:difference; color:#FFF; display:flex; align-items:baseline; gap:.6rem; font-family:var(--mono); font-size:.66rem; letter-spacing:.14em; text-transform:uppercase; pointer-events:none; }
.chapter b{ font-family:var(--display); font-weight:400; font-size:1.8rem; letter-spacing:-.03em; line-height:1; font-variant-numeric:tabular-nums; }
@media (max-width:860px){ .chapter{ display:none; } }

/* ---------- hero: the point field ---------- */
.hero{ position:relative; height:240vh; background:var(--night); color:var(--on-dark); }
.hero-pin{ position:sticky; top:0; height:100vh; height:100svh; overflow:hidden; }
#field{ position:absolute; inset:0; width:100%; height:100%; }
.hero-copy{ position:absolute; left:0; right:0; top:47%; transform:translateY(-52%); z-index:2; padding-inline:max(1.25rem,(100% - var(--wrap)) / 2); pointer-events:none; }
.hero-copy > *{ pointer-events:auto; }
.hero-copy h1{ font-size:clamp(2.4rem,1rem + 4.3vw,5.6rem); max-width:none; margin-top:1.2rem; }
.hero-copy h1 .line > span{ white-space:nowrap; }
.hero-foot{ display:flex; align-items:flex-end; gap:2rem; flex-wrap:wrap; margin-top:1.6rem; max-width:48rem; }
.hero-foot .lead{ color:var(--on-dark-muted); max-width:40ch; font-size:1.05rem; }
.hero-foot .btns{ display:flex; gap:.7rem; flex-wrap:wrap; }
.kinetic{ position:absolute; left:0; right:0; bottom:3vh; z-index:2; pointer-events:none; overflow:hidden; will-change:transform; }
.k-line{ display:flex; width:max-content; font-family:var(--display); font-weight:500; font-size:clamp(2.2rem,4.6vw,5rem); line-height:1; letter-spacing:-.03em; white-space:nowrap; }
.k-line span{ padding-inline:.35em; }
.k-line span::after{ content:"✦"; margin-left:.7em; color:var(--copper-bright); font-size:.5em; vertical-align:.25em; }
.k-a{ color:rgba(237,232,220,.55); animation:kin 38s linear infinite; }
.k-b{ display:none; }
@keyframes kin{ to{ transform:translate3d(-50%,0,0) } }
.scroll-cue{ position:absolute; right:max(1.25rem,(100% - var(--wrap)) / 2); bottom:2rem; z-index:3; display:none; align-items:center; gap:.7rem; font-family:var(--mono); font-size:.64rem; letter-spacing:.16em; text-transform:uppercase; color:var(--on-dark-muted); }
.scroll-cue i{ width:2.6rem; height:1px; background:linear-gradient(90deg,var(--copper-bright),transparent); animation:cue 1.8s ease-in-out infinite; transform-origin:left; }
@keyframes cue{ 0%{ transform:scaleX(0) } 50%{ transform:scaleX(1) } 100%{ transform:scaleX(0); transform-origin:right } }
@media (max-width:860px){
  .hero{ height:150vh; }
  .hero-copy{ top:auto; bottom:13vh; transform:none; }
  .hero-copy h1{ font-size:clamp(2.2rem,1.5rem + 5vw,3.4rem); max-width:12ch; }
  .hero-copy h1 .line > span{ white-space:normal; }
  .hero-foot .lead{ font-size:.95rem; }
  .kinetic{ bottom:2vh; }
  .scroll-cue{ display:none; }
}

/* ---------- light sections ---------- */
.light{ background:var(--bg); color:var(--ink); }
.section{ position:relative; padding-block:clamp(5rem,4rem + 4vw,9rem); }

/* intro statement */
.intro-grid{ display:grid; grid-template-columns:minmax(0,1.5fr) minmax(0,.8fr); gap:clamp(2rem,1.5rem + 3vw,6rem); align-items:end; }
.intro h2{ font-size:clamp(1.9rem,1.2rem + 3.2vw,4.4rem); line-height:1.08; }
.facts{ border-top:1px solid var(--line-strong); }
.facts li{ display:grid; grid-template-columns:auto 1fr; gap:1rem; padding:.9rem 0; border-bottom:1px solid var(--line-strong); font-size:.95rem; color:var(--ink-2); align-items:baseline; }
.facts b{ font-family:var(--mono); font-size:.7rem; letter-spacing:.12em; color:var(--copper); }
.facts strong{ color:var(--ink); font-weight:600; }
@media (max-width:860px){ .intro-grid{ grid-template-columns:1fr; } }

/* services list with a preview that follows the cursor */
.svc-head{ display:flex; align-items:flex-end; justify-content:space-between; gap:1.5rem; flex-wrap:wrap; margin-bottom:2rem; }
.svc-head h2{ font-size:clamp(2rem,1.4rem + 3vw,4.2rem); max-width:14ch; }
.svc-list{ border-top:1px solid var(--line-strong); position:relative; }
.svc-list li{ border-bottom:1px solid var(--line-strong); }
.svc-list a{ display:grid; grid-template-columns:5rem minmax(0,1.2fr) minmax(0,1fr) auto; gap:1rem 1.5rem; align-items:center; padding:1.6rem 0; transition:padding-left .4s var(--ease), background .3s; position:relative; }
.svc-list a:hover{ padding-left:1rem; }
.svc-list .n{ font-family:var(--mono); font-size:.72rem; letter-spacing:.14em; color:var(--copper); }
.svc-list h3{ font-family:var(--display); font-weight:500; font-size:clamp(1.8rem,1.3rem + 2vw,3.4rem); letter-spacing:-.03em; line-height:1; transition:transform .4s var(--ease); }
.svc-list a:hover h3{ transform:translateX(.35rem); }
.svc-list p{ color:var(--ink-2); font-size:.95rem; }
.svc-list .arr{ width:44px; height:44px; border-radius:50%; border:1.5px solid var(--line-strong); display:grid; place-items:center; transition:background .3s, border-color .3s, transform .4s var(--ease); }
.svc-list .arr svg{ width:18px; height:18px; }
.svc-list a:hover .arr{ background:var(--ink); border-color:var(--ink); color:#FFFDF9; transform:rotate(-45deg); }
.svc-preview{ position:fixed; left:0; top:0; width:min(34vw,420px); aspect-ratio:4/3; border-radius:16px; overflow:hidden; box-shadow:var(--shadow-lg); z-index:90; pointer-events:none; opacity:0; transform:translate(-50%,-50%) scale(.9); transition:opacity .3s, transform .4s var(--ease); background:var(--band); }
.svc-preview.on{ opacity:1; transform:translate(-50%,-50%) scale(1); }
.pv{ position:absolute; inset:0; opacity:0; transition:opacity .3s; container-type:inline-size; }
.pv.on{ opacity:1; }
@media (hover:none),(max-width:860px){ .svc-preview{ display:none; } }
@media (max-width:860px){ .svc-list a{ grid-template-columns:3rem 1fr auto; } .svc-list p{ grid-column:2; } }

/* mini visuals shared by previews and (mobile) rows */
.v-code{ padding:5cqw; font-family:var(--mono); font-size:2.6cqw; line-height:1.7; background:#1B2230; color:#C9D1DC; height:100%; }
.v-code .ln{ display:flex; gap:2.4cqw; } .v-code .ln i{ color:#5D6874; width:3cqw; text-align:right; font-style:normal; }
.v-code .k{ color:#F2A65A } .v-code .s{ color:#9FD5B7 } .v-code .t{ color:#7FB8FF }
.v-art{ padding:5cqw; height:100%; display:grid; grid-template-columns:1fr 1fr; gap:3cqw; align-content:start; background:var(--band); }
.v-art .board{ background:#FFF; border-radius:8px; box-shadow:var(--shadow); padding:3cqw; aspect-ratio:4/5; display:flex; flex-direction:column; gap:2cqw; }
.v-art .board i{ display:block; border-radius:4px; background:#E9E4D8; height:2.4cqw; width:70%; } .v-art .board i.big{ height:12cqw; width:100%; background:linear-gradient(135deg,#F2A65A,#9E4A0E); border-radius:6px; }
.v-art .board:nth-child(3){ grid-column:span 2; aspect-ratio:8/3; flex-direction:row; align-items:center; }
.v-art .swatch{ display:flex; gap:1.6cqw; } .v-art .swatch b{ width:6cqw; height:6cqw; border-radius:50%; box-shadow:inset 0 0 0 1px rgba(0,0,0,.06); }
.v-term{ background:#0F151E; color:#C9D1DC; font-family:var(--mono); font-size:2.5cqw; padding:5cqw; height:100%; line-height:1.8; }
.v-term .ok{ color:#7BD88F } .v-term .dim{ color:#5D6874 } .v-term .cp{ color:#F2A65A }
.v-gbp{ padding:5cqw; height:100%; display:grid; place-items:center; background:var(--band); }
.v-gbp .card{ width:100%; max-width:66cqw; background:#FFF; border-radius:12px; box-shadow:var(--shadow-lg); padding:4cqw; font-size:2.6cqw; }
.v-gbp .top{ display:flex; gap:2.4cqw; align-items:center; } .v-gbp .top i{ width:8cqw; height:8cqw; border-radius:10px; background:linear-gradient(135deg,#F2A65A,#9E4A0E); }
.v-gbp b{ display:block; font-size:3cqw; } .v-gbp small{ color:var(--ink-3); font-size:2.2cqw; }
.v-gbp .stars{ color:#E7A33E; margin-top:2cqw; font-size:2.6cqw; } .v-gbp .stars span{ color:var(--ink-3); }
.v-gbp .row{ display:flex; gap:1.6cqw; margin-top:2.4cqw; } .v-gbp .row span{ border:1px solid var(--line-strong); border-radius:999px; padding:.8cqw 2.2cqw; font-size:2.2cqw; color:var(--ink-2); }
.v-gbp .open{ margin-top:2.4cqw; font-size:2.2cqw; color:var(--ok); }

/* ---------- the build scene (pinned) ---------- */
.scene{ position:relative; height:520vh; }
.scene-pin{ position:sticky; top:0; height:100vh; height:100svh; overflow:hidden; display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.4fr); gap:clamp(1.5rem,1rem + 2vw,4rem); align-items:center; padding-top:var(--hdr); }
.scene-pin::before{ content:""; position:absolute; inset:0; background:radial-gradient(50% 45% at 80% 60%, rgba(242,166,90,.18), transparent 60%); pointer-events:none; }
.scene-title{ position:absolute; inset:var(--hdr) 0 0 0; display:grid; place-items:center; text-align:center; z-index:3; padding-inline:1.25rem; pointer-events:none; }
.scene-title > div{ max-width:52rem; }
.scene-title h2{ font-size:clamp(2.2rem,1.4rem + 4vw,5.4rem); margin-top:1rem; }
.scene-title .lead{ margin:1.2rem auto 0; }
.steps{ position:relative; z-index:2; padding-left:clamp(1.25rem,(100vw - var(--wrap)) / 2,20rem); opacity:0; transform:translateY(20px); }
.steps li{ display:grid; grid-template-columns:auto 1fr; gap:.2rem 1rem; padding:1rem 0; border-top:1px solid var(--line); opacity:.35; transition:opacity .5s var(--ease); }
.steps li:last-child{ border-bottom:1px solid var(--line); }
.steps li.is-on{ opacity:1; }
.steps b{ font-family:var(--mono); font-size:.7rem; color:var(--copper); padding-top:.45rem; letter-spacing:.12em; }
.steps h3{ font-family:var(--display); font-weight:500; font-size:clamp(1.1rem,1rem + .5vw,1.45rem); letter-spacing:-.015em; line-height:1.2; }
.steps p{ grid-column:2; font-size:.9rem; color:var(--ink-2); max-height:0; overflow:hidden; opacity:0; transition:max-height .6s var(--ease), opacity .5s var(--ease); }
.steps li.is-on p{ max-height:8rem; opacity:1; }
.frame-wrap{ position:relative; z-index:2; padding-right:clamp(1.25rem,(100vw - var(--wrap)) / 2,20rem); }
.frame{ position:relative; border-radius:16px; background:#FFF; box-shadow:var(--shadow-lg), 0 0 0 1px var(--line); overflow:hidden; aspect-ratio:16/10.4; }
.frame-bar{ display:flex; align-items:center; gap:.7rem; padding:.55rem .8rem; border-bottom:1px solid var(--line); background:#FAF8F2; font-family:var(--mono); font-size:.66rem; color:var(--ink-3); }
.dots{ display:flex; gap:.3rem; } .dots i{ width:9px; height:9px; border-radius:50%; background:#E3DDD0; }
.url{ flex:1; display:flex; align-items:center; gap:.4rem; background:#FFF; border:1px solid var(--line); border-radius:999px; padding:.3rem .7rem; max-width:22rem; }
.url svg{ width:11px; height:11px; color:var(--ink-4); } .url b{ font-weight:500; color:var(--ink-4); }
.frame.st4 .url svg,.frame.st4 .url b{ color:var(--ok); }
.live-pill{ display:inline-flex; align-items:center; gap:.4rem; padding:.28rem .6rem; border-radius:999px; background:var(--ink); color:#FFF; font-size:.62rem; letter-spacing:.06em; white-space:nowrap; opacity:0; transform:translateY(-6px); transition:opacity .4s, transform .4s var(--ease); }
.live-pill::before{ content:""; width:6px; height:6px; border-radius:50%; background:var(--wa); box-shadow:0 0 0 0 rgba(37,211,102,.6); animation:ping 1.6s infinite; }
@keyframes ping{ to{ box-shadow:0 0 0 6px rgba(37,211,102,0) } }
.frame.st4 .live-pill{ opacity:1; transform:none; }
.frame-body{ position:relative; height:calc(100% - 2.4rem); overflow:hidden; background:#FFF; container-type:inline-size; }
.site{ padding:clamp(.6rem,1.6cqw,1.2rem) clamp(.8rem,2.2cqw,1.6rem); height:100%; display:flex; flex-direction:column; gap:clamp(.6rem,1.8cqw,1.2rem); }
.wf{ border:1.5px dashed #D6D0C3; background:repeating-linear-gradient(-45deg,transparent 0 6px,rgba(27,36,49,.03) 6px 7px); border-radius:6px; transition:background .5s, border-color .5s, color .5s, box-shadow .5s; }
.site > *{ opacity:0; transform:translateY(10px); transition:opacity .5s var(--ease), transform .5s var(--ease); }
.frame.st1 .site > *{ opacity:1; transform:none; }
.frame.st1 .site > :nth-child(2){ transition-delay:.08s } .frame.st1 .site > :nth-child(3){ transition-delay:.16s }
.s-nav{ display:flex; align-items:center; gap:1cqw; padding:1.4cqw 1.6cqw; }
.s-logo{ width:9cqw; height:2.4cqw; border-radius:4px; }
.s-links{ display:flex; gap:1.6cqw; margin-left:auto; } .s-links i{ display:block; width:5cqw; height:1.2cqw; border-radius:3px; background:#E3DDD0; }
.s-cta{ width:9cqw; height:3cqw; border-radius:999px; }
.s-hero{ display:grid; grid-template-columns:1.15fr 1fr; gap:3cqw; padding:3cqw; }
.s-copy{ position:relative; display:flex; flex-direction:column; gap:1.6cqw; justify-content:center; }
.s-h1{ font-family:var(--display); font-weight:500; font-size:4cqw; line-height:1.05; letter-spacing:-.02em; color:transparent; min-height:9cqw; }
.s-h1 span{ display:block; height:3.4cqw; width:88%; border-radius:4px; background:#E9E4D8; margin-bottom:1cqw; } .s-h1 span + span{ width:62%; }
.s-p{ height:1.3cqw; width:92%; border-radius:3px; background:#EDE8DE; } .s-p.short{ width:58%; }
.s-btns{ display:flex; gap:1.4cqw; margin-top:.6cqw; } .s-btn{ width:12cqw; height:3.6cqw; border-radius:999px; background:#E3DDD0; }
.s-art{ border-radius:8px; min-height:26cqw; }
.s-cards{ display:grid; grid-template-columns:repeat(3,1fr); gap:2cqw; padding:0 3cqw 3cqw; }
.s-card{ position:relative; padding:2.2cqw; min-height:12cqw; }
.s-card i{ display:block; width:4cqw; height:4cqw; border-radius:6px; background:#E9E4D8; margin-bottom:1.4cqw; }
.s-card b{ display:block; height:1.5cqw; width:70%; border-radius:3px; background:#E3DDD0; margin-bottom:.9cqw; }
.s-card em{ display:block; height:1.1cqw; width:90%; border-radius:3px; background:#EFEBE2; }
.s-tag{ position:absolute; top:-.9cqw; left:-.6cqw; font-family:var(--mono); font-size:1.3cqw; font-weight:600; color:#FFF; background:var(--copper); padding:.3cqw .7cqw; border-radius:4px; opacity:0; transform:scale(.6); transition:opacity .4s, transform .4s var(--ease); }
.s-copy .s-tag{ top:-1.6cqw; left:-1.6cqw; }
.frame.st2 .wf{ border-color:transparent; background-image:none; }
.frame.st2 .s-nav{ background:#FFF; box-shadow:0 1px 0 var(--line); border-radius:8px; }
.frame.st2 .s-logo{ background:linear-gradient(135deg,#2AA198,#1E7F78); }
.frame.st2 .s-cta{ background:#1E7F78; }
.frame.st2 .s-hero{ background:#F2FAF8; border-radius:12px; }
.frame.st2 .s-h1{ color:#10302C; } .frame.st2 .s-h1 span{ display:none; } .frame.st2 .s-h1 em{ font-style:italic; color:#1E7F78; }
.frame.st2 .s-p{ background:#CFE3DF; }
.frame.st2 .s-btn{ background:#1E7F78; } .frame.st2 .s-btn.ghost{ background:#FFF; box-shadow:inset 0 0 0 1.5px #B9D9D3; }
.frame.st2 .s-art{ background:radial-gradient(40% 40% at 70% 30%, rgba(255,255,255,.9), transparent 60%), linear-gradient(160deg,#BFE3DC,#2AA198 70%,#176660); }
.frame.st2 .s-card{ background:#FFF; box-shadow:0 1px 0 var(--line), var(--shadow); border-radius:10px; }
.frame.st2 .s-card i{ background:#E6F4F1; } .frame.st2 .s-card b{ background:#CFE3DF; } .frame.st2 .s-card em{ background:#EAF2F0; }
.frame.st3 .s-tag{ opacity:1; transform:none; }
.float{ position:absolute; background:#FFF; border:1px solid var(--line); border-radius:12px; box-shadow:var(--shadow-lg); opacity:0; transform:translateY(14px) scale(.96); transition:opacity .5s var(--ease), transform .6s var(--ease); font-size:1.5cqw; line-height:1.4; }
.snippet{ right:2.6cqw; top:22cqw; width:34cqw; padding:1.8cqw 2cqw; }
.snippet .sn-url{ display:flex; align-items:center; gap:.8cqw; font-family:var(--mono); font-size:1.25cqw; color:var(--ink-3); }
.snippet .sn-url i{ width:2.2cqw; height:2.2cqw; border-radius:50%; background:linear-gradient(135deg,#2AA198,#1E7F78); }
.snippet .sn-title{ color:#1A0DAB; font-size:1.9cqw; margin-top:.6cqw; font-weight:500; }
.snippet .sn-stars{ color:#E7A33E; font-size:1.4cqw; margin-top:.4cqw; } .snippet .sn-stars span{ color:var(--ink-3); }
.snippet .sn-desc{ color:var(--ink-2); font-size:1.3cqw; margin-top:.4cqw; }
.frame.st3 .snippet{ opacity:1; transform:none; }
.speed{ left:2.6cqw; bottom:2.6cqw; width:15cqw; padding:1.6cqw; display:flex; align-items:center; gap:1.4cqw; }
.ring{ position:relative; width:7cqw; height:7cqw; border-radius:50%; background:conic-gradient(var(--ok) calc(var(--v,0) * 1%), #E9E4D8 0); display:grid; place-items:center; transition:--v 1.4s var(--ease); }
.ring::before{ content:""; position:absolute; inset:1.1cqw; border-radius:50%; background:#FFF; }
.ring b{ position:relative; font-family:var(--display); font-size:2.2cqw; color:var(--ok); }
.speed small{ font-family:var(--mono); font-size:1.1cqw; color:var(--ink-3); line-height:1.3; }
.frame.st4 .speed{ opacity:1; transform:none; }
.wa-pop{ right:2.6cqw; bottom:2.6cqw; width:30cqw; padding:1.5cqw 1.8cqw; display:grid; grid-template-columns:auto 1fr; gap:1.4cqw; align-items:center; border-left:3px solid var(--wa); }
.wa-pop i{ width:4.2cqw; height:4.2cqw; border-radius:50%; background:var(--wa); display:grid; place-items:center; } .wa-pop i svg{ width:2.4cqw; height:2.4cqw; color:#FFF; }
.wa-pop b{ display:block; font-size:1.5cqw; } .wa-pop span{ display:block; font-size:1.25cqw; color:var(--ink-3); }
.frame.st4 .wa-pop{ opacity:1; transform:none; transition-delay:.25s; }
@property --v{ syntax:"<number>"; inherits:false; initial-value:0; }
.frame.st4 .ring{ --v:98; }
@media (max-width:900px){
  .scene{ height:auto; }
  .scene-pin{ position:static; height:auto; display:flex; flex-direction:column; overflow:visible; padding-top:3rem; }
  .scene-title{ position:static; inset:auto; display:block; padding:0 1.25rem 1.5rem; text-align:left; order:0; opacity:1!important; transform:none!important; }
  .frame-wrap{ order:1; position:sticky; top:calc(var(--hdr) + .5rem); z-index:3; padding-inline:1rem; transform:none!important; width:100%; max-width:600px; margin-inline:auto; }
  .frame{ aspect-ratio:16/11; }
  .frame-wrap::after{ content:""; position:absolute; left:0; right:0; top:100%; height:2.2rem; background:linear-gradient(var(--bg),rgba(251,249,244,0)); pointer-events:none; }
  .steps{ order:2; opacity:1!important; transform:none!important; padding:1.5rem 1.25rem 30vh; }
  .steps li{ min-height:46vh; align-content:start; opacity:.35; }
  .steps li.is-on{ opacity:1; }
  .steps p{ max-height:none; opacity:1; }
  .snippet{ width:44cqw; } .wa-pop{ width:38cqw; }
  .frame-bar .dots{ display:none; } .live-pill{ font-size:.55rem; }
}

/* ---------- work: sticky image, scrolling list ---------- */
.work-grid{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(2rem,1.5rem + 3vw,6rem); align-items:start; }
.work-media{ position:sticky; top:calc(var(--hdr) + 2rem); }
.wm-stack{ position:relative; aspect-ratio:760/475; border-radius:18px; overflow:hidden; background:var(--band); box-shadow:var(--shadow-lg); }
.wm-stack figure{ position:absolute; inset:0; clip-path:inset(100% 0 0 0); transition:clip-path .9s var(--ease-io); }
.wm-stack figure.on{ clip-path:inset(0 0 0 0); }
.wm-stack img{ width:100%; height:100%; object-fit:cover; transform:scale(1.08); transition:transform 1.4s var(--ease); }
.wm-stack figure.on img{ transform:scale(1); }
.wm-count{ margin-top:1rem; font-family:var(--mono); font-size:.72rem; letter-spacing:.14em; color:var(--ink-3); display:flex; align-items:baseline; gap:.4rem; }
.wm-count b{ font-family:var(--display); font-size:2.2rem; font-weight:400; color:var(--ink); letter-spacing:-.03em; line-height:1; }
.work-list{ border-top:1px solid var(--line-strong); }
.work-list li{ border-bottom:1px solid var(--line-strong); }
.work-list a{ display:grid; grid-template-columns:3rem minmax(0,1fr) auto; gap:.3rem 1rem; align-items:center; padding:1.5rem 0; transition:padding-left .4s var(--ease); }
.work-list a:hover,.work-list li.on a{ padding-left:.75rem; }
.work-list .n{ font-family:var(--mono); font-size:.72rem; letter-spacing:.14em; color:var(--ink-4); transition:color .3s; }
.work-list li.on .n{ color:var(--copper); }
.work-list h3{ font-family:var(--display); font-weight:500; font-size:clamp(1.4rem,1.1rem + 1.2vw,2.2rem); letter-spacing:-.02em; line-height:1.1; color:var(--ink-3); transition:color .3s; }
.work-list li.on h3,.work-list a:hover h3{ color:var(--ink); }
.work-list p{ grid-column:2; font-size:.92rem; color:var(--ink-3); }
.work-list .tag{ font-family:var(--mono); font-size:.66rem; letter-spacing:.12em; text-transform:uppercase; padding:.35rem .6rem; border-radius:999px; border:1px solid var(--line-strong); color:var(--ink-3); }
.work-list .tag.live{ border-color:var(--ok); color:var(--ok); }
@media (max-width:860px){
  .work-grid{ grid-template-columns:1fr; gap:1.5rem; }
  .work-media{ top:calc(var(--hdr) + .5rem); z-index:5; }
  .wm-stack{ aspect-ratio:16/9; }
  .wm-count{ display:none; }
}

/* ---------- principles: full screen panels that slide over each other ---------- */
.panels{ position:relative; }
.panel{ position:sticky; top:0; min-height:100vh; min-height:100svh; display:grid; align-items:center; overflow:hidden; padding-block:var(--hdr); }
.panel .wrap{ position:relative; z-index:1; }
.panel .p-n{ position:absolute; right:-.1em; top:50%; transform:translateY(-50%); font-family:var(--display); font-size:clamp(14rem,40vw,36rem); line-height:1; letter-spacing:-.06em; color:transparent; -webkit-text-stroke:1.5px currentColor; opacity:.28; pointer-events:none; user-select:none; }
.panel h2{ font-size:clamp(2.6rem,1.6rem + 5vw,6.8rem); max-width:12ch; }
.panel p{ margin-top:1.5rem; max-width:44ch; font-size:clamp(1.05rem,1rem + .4vw,1.3rem); line-height:1.6; }
.p-ivory{ background:var(--bg); color:var(--ink); }
.p-ivory p{ color:var(--ink-2); } .p-ivory .display em{ color:var(--copper); }
.p-copper{ background:#F7E4CE; color:var(--ink); }
.p-copper .display em{ color:var(--copper); } .p-copper p{ color:var(--ink-2); } .p-copper .eyebrow{ color:var(--copper); }
.p-dark{ background:var(--night); color:var(--on-dark); }
.p-dark p{ color:var(--on-dark-muted); }

/* ---------- closing ---------- */
.close{ position:relative; background:var(--night); color:var(--on-dark); overflow:hidden; padding-block:clamp(6rem,5rem + 5vw,11rem) 4rem; }
.orb{ position:absolute; width:52vw; height:52vw; max-width:760px; max-height:760px; border-radius:50%; background:radial-gradient(circle at 40% 40%, rgba(242,166,90,.55), rgba(158,74,14,.28) 45%, transparent 70%); filter:blur(40px); left:60%; top:30%; transform:translate(-50%,-50%); pointer-events:none; will-change:transform; }
.close .wrap{ position:relative; z-index:1; }
.close h2{ font-size:clamp(4rem,2rem + 12vw,15rem); line-height:.9; letter-spacing:-.05em; }
.close-row{ display:grid; grid-template-columns:minmax(0,1.2fr) minmax(0,1fr); gap:3rem; align-items:end; margin-top:3rem; }
.close .lead{ color:var(--on-dark-muted); }
.close .btns{ display:flex; gap:.8rem; flex-wrap:wrap; margin-top:1.8rem; }
.close-side{ font-size:.95rem; color:var(--on-dark-muted); }
.close-side b{ color:var(--on-dark); display:block; }
.close-side p + p{ margin-top:1rem; }
@media (max-width:860px){ .close-row{ grid-template-columns:1fr; gap:2rem; } }
.ftr-marquee{ overflow:hidden; border-top:1px solid rgba(255,255,255,.1); margin-top:5rem; padding-block:1rem; }
.ftr-marquee .track{ display:flex; width:max-content; animation:kin 40s linear infinite; font-family:var(--mono); font-size:.72rem; letter-spacing:.16em; text-transform:uppercase; color:var(--on-dark-muted); }
.ftr-marquee span{ padding-inline:1.2rem; } .ftr-marquee span::after{ content:"✦"; margin-left:2.4rem; color:var(--copper-bright); }
.ftr{ background:var(--night); color:var(--on-dark-muted); font-size:.84rem; padding-block:1.4rem 1.8rem; }
.ftr .wrap{ display:flex; flex-wrap:wrap; gap:.6rem 1.5rem; align-items:center; }
.ftr a{ color:var(--on-dark); } .ftr .r{ margin-left:auto; }
@media (min-width:861px){ .ftr .wrap{ padding-left:9rem; } }


/* ==========================================================================
   v2: curtains, aurora, orbit, tilt cards, richer stages, perspective rows
   ========================================================================== */
.dark{ background:var(--night); color:var(--on-dark); }
.dark .lead{ color:var(--on-dark-muted); }
.curtain{ position:relative; z-index:2; border-radius:36px 36px 0 0; margin-top:-36px; box-shadow:0 -30px 60px -30px rgba(0,0,0,.45); }
@media (max-width:860px){ .curtain{ border-radius:22px 22px 0 0; margin-top:-22px; } }
html.lenis,html.lenis body{ height:auto; }
.lenis.lenis-smooth{ scroll-behavior:auto!important; }
.lenis.lenis-stopped{ overflow:hidden; }

/* ---------- aurora ---------- */
.aurora{ position:absolute; inset:0; overflow:hidden; pointer-events:none; border-radius:inherit; }
.aurora::before,.aurora::after{ content:""; position:absolute; inset:-30%; filter:blur(70px); opacity:.55; }
.aurora::before{ background:conic-gradient(from 0deg at 50% 50%, rgba(242,166,90,.0) 0deg, rgba(242,166,90,.45) 70deg, rgba(158,74,14,.0) 140deg, rgba(31,75,153,.35) 210deg, rgba(42,161,152,.25) 280deg, rgba(242,166,90,.0) 360deg); animation:spin 32s linear infinite; }
.aurora::after{ background:radial-gradient(35% 35% at 70% 50%, rgba(242,117,31,.28), transparent 70%); animation:breathe 9s ease-in-out infinite alternate; }
@keyframes spin{ to{ transform:rotate(360deg) } }
@keyframes breathe{ from{ transform:scale(.9) translate(-2%,2%) } to{ transform:scale(1.1) translate(2%,-2%) } }

/* ---------- studio: copy, tickers, orbit ---------- */
.orbit-sec{ overflow:hidden; background:var(--night); padding-top:clamp(2rem,1.5rem + 2vw,4rem); }
.orbit-sec .aurora{ -webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 38%,#000 100%); mask-image:linear-gradient(to bottom,transparent 0,#000 38%,#000 100%); }
.hero-pin::after{ content:""; position:absolute; left:0; right:0; bottom:0; height:22vh; background:linear-gradient(to bottom,rgba(14,18,24,0),var(--night)); pointer-events:none; z-index:1; }
.kinetic{ z-index:2; }
.orbit-grid{ position:relative; display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(2rem,1.5rem + 3vw,6rem); align-items:center; }
.orbit-copy h2{ font-size:clamp(2.4rem,1.4rem + 3.6vw,5rem); margin-top:1.2rem; }
.orbit-copy .lead{ margin-top:1.4rem; }
.tickers{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1.5rem; margin-top:2.5rem; border-top:1px solid rgba(255,255,255,.12); padding-top:1.5rem; }
.tick b{ display:block; white-space:nowrap; font-family:var(--display); font-weight:400; font-size:clamp(2.2rem,1.4rem + 2vw,3.4rem); line-height:1; letter-spacing:-.04em; color:#FFFDF9; font-variant-numeric:tabular-nums; }
.tick > span{ display:block; margin-top:.5rem; font-size:.86rem; color:var(--on-dark-muted); line-height:1.4; }
.orbit{ --ow:min(560px,44vw); position:relative; width:var(--ow); aspect-ratio:1; margin-inline:auto; }
.core{ position:absolute; left:50%; top:50%; width:calc(var(--ow) * .22); transform:translate(-50%,-50%); z-index:2; }
.core img{ position:relative; z-index:1; filter:drop-shadow(0 10px 30px rgba(242,117,31,.45)); }
.core-glow{ position:absolute; inset:-60%; border-radius:50%; background:radial-gradient(circle, rgba(242,166,90,.45), rgba(242,166,90,0) 65%); animation:breathe 4s ease-in-out infinite alternate; }
.oring{ position:absolute; left:50%; top:50%; width:calc(var(--ow) * var(--d)); height:calc(var(--ow) * var(--d)); margin:calc(var(--ow) * var(--d) / -2) 0 0 calc(var(--ow) * var(--d) / -2); border-radius:50%; border:1px dashed rgba(237,232,220,.16); animation:spin var(--t) linear infinite; }
.oring.r1{ --d:.42; } .oring.r2{ --d:.68; animation-direction:reverse; } .oring.r3{ --d:.96; }
.oring i{ position:absolute; left:50%; top:50%; width:0; height:0; transform:rotate(var(--a)) translateY(calc(var(--ow) * var(--d) / -2)); }
.oring i span{ position:absolute; left:0; top:0; width:calc(var(--ow) * .085); height:calc(var(--ow) * .085); margin:calc(var(--ow) * -.0425) 0 0 calc(var(--ow) * -.0425); border-radius:50%; background:#FFFDF9; box-shadow:0 8px 24px -8px rgba(0,0,0,.6), 0 0 0 1px rgba(255,255,255,.08); display:grid; place-items:center; padding:22%; animation:counter var(--t) linear infinite; }
.oring.r2 i span{ animation-direction:reverse; }
.oring i img{ width:100%; height:100%; object-fit:contain; }
@keyframes counter{ from{ transform:rotate(calc(-1 * var(--a))) } to{ transform:rotate(calc(-1 * var(--a) - 360deg)) } }
@media (max-width:860px){
  .orbit-grid{ grid-template-columns:1fr; }
  .orbit{ --ow:min(360px,84vw); order:-1; }
  .tickers{ grid-template-columns:1fr 1fr; }
}

/* ---------- services: tilt cards ---------- */
.svc-sec{ padding-top:clamp(2rem,1.5rem + 2vw,4rem); }
.svc-head{ display:flex; align-items:flex-end; justify-content:space-between; gap:1.5rem; flex-wrap:wrap; margin-bottom:2.5rem; }
.svc-head h2{ font-size:clamp(2.2rem,1.4rem + 3.2vw,4.4rem); margin-top:1.2rem; }
.bento{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1.25rem; perspective:1400px; }
.tilt{ position:relative; display:grid; grid-template-rows:auto 1fr; border-radius:22px; background:rgba(255,253,249,.05); border:1px solid rgba(255,255,255,.1); overflow:hidden; transform-style:preserve-3d; transition:transform .5s var(--ease), border-color .3s, background .3s; will-change:transform; -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); }
.tilt:hover{ border-color:rgba(242,166,90,.4); background:rgba(255,253,249,.07); }
.tilt.is-tilting{ transition:transform .08s linear; }
.glare{ position:absolute; inset:0; pointer-events:none; background:radial-gradient(420px circle at var(--gx,50%) var(--gy,50%), rgba(255,255,255,.14), transparent 60%); opacity:0; transition:opacity .3s; z-index:2; }
.tilt:hover .glare{ opacity:1; }
.tilt-vis{ position:relative; aspect-ratio:16/8.4; container-type:inline-size; overflow:hidden; border-bottom:1px solid rgba(255,255,255,.08); transform:translateZ(20px); }
.tilt-vis > *{ height:100%; }
.tilt .v-art,.tilt .v-gbp{ background:#1B2230; }
.tilt .v-art .board{ background:#FFFDF9; }
.tilt-copy{ position:relative; padding:1.4rem 1.5rem 1.5rem 1.5rem; display:grid; grid-template-columns:auto 1fr auto; gap:.3rem 1rem; align-items:center; transform:translateZ(30px); }
.tilt-copy .n{ font-family:var(--mono); font-size:.7rem; letter-spacing:.14em; color:var(--copper-light); }
.tilt-copy h3{ font-family:var(--display); font-weight:500; font-size:clamp(1.6rem,1.2rem + 1.2vw,2.4rem); letter-spacing:-.02em; line-height:1; color:#FFFDF9; }
.tilt-copy p{ grid-column:2; font-size:.92rem; color:var(--on-dark-muted); max-width:44ch; }
.tilt-copy .arr{ grid-column:3; grid-row:1 / span 2; width:44px; height:44px; border-radius:50%; border:1.5px solid rgba(255,255,255,.2); display:grid; place-items:center; color:#FFFDF9; transition:background .3s, transform .4s var(--ease); }
.tilt-copy .arr svg{ width:18px; height:18px; }
.tilt:hover .arr{ background:var(--copper-bright); border-color:var(--copper-bright); color:#0E1218; transform:rotate(-45deg); }
@media (max-width:860px){
  .bento{ grid-template-columns:1fr; perspective:900px; }
  html.motion .tilt.reveal{ transform:rotateX(14deg) translateY(36px); }
  html.motion .tilt.reveal.in{ transform:none; transition:opacity .9s var(--ease), transform 1s var(--ease); }
}
/* the visuals inside the cards assemble when the card is in view */
.tilt .v-code .ln{ opacity:0; transform:translateX(-10px); transition:opacity .4s var(--ease), transform .4s var(--ease); }
.tilt.in .v-code .ln{ opacity:1; transform:none; }
.tilt.in .v-code .ln:nth-child(2){ transition-delay:.08s } .tilt.in .v-code .ln:nth-child(3){ transition-delay:.16s } .tilt.in .v-code .ln:nth-child(4){ transition-delay:.24s }
.tilt.in .v-code .ln:nth-child(5){ transition-delay:.32s } .tilt.in .v-code .ln:nth-child(6){ transition-delay:.40s } .tilt.in .v-code .ln:nth-child(7){ transition-delay:.48s }
.tilt.in .v-code .ln:nth-child(8){ transition-delay:.56s } .tilt.in .v-code .ln:nth-child(9){ transition-delay:.7s }
.tilt .v-term > div{ opacity:0; transition:opacity .25s; }
.tilt.in .v-term > div{ opacity:1; }
.tilt.in .v-term > div:nth-child(2){ transition-delay:.3s } .tilt.in .v-term > div:nth-child(3){ transition-delay:.55s } .tilt.in .v-term > div:nth-child(4){ transition-delay:.8s }
.tilt.in .v-term > div:nth-child(5){ transition-delay:1.05s } .tilt.in .v-term > div:nth-child(6){ transition-delay:1.3s } .tilt.in .v-term > div:nth-child(7){ transition-delay:1.55s }
.tilt .v-art .board{ opacity:0; transform:translateY(14px) scale(.96); transition:opacity .6s var(--ease), transform .7s var(--ease); }
.tilt.in .v-art .board{ opacity:1; transform:none; }
.tilt.in .v-art .board:nth-child(2){ transition-delay:.15s } .tilt.in .v-art .board:nth-child(3){ transition-delay:.3s }
.tilt .v-gbp .card{ opacity:0; transform:translateY(16px) scale(.96); transition:opacity .7s var(--ease), transform .8s var(--ease); }
.tilt.in .v-gbp .card{ opacity:1; transform:none; }
.tilt .v-gbp .open::before{ animation:ping 1.8s infinite; }
.tilt .v-gbp .open{ display:flex; align-items:center; gap:1.2cqw; } .tilt .v-gbp .open::before{ content:""; width:1.6cqw; height:1.6cqw; border-radius:50%; background:var(--ok); box-shadow:0 0 0 0 rgba(47,125,79,.5); }

/* ---------- process: the frame tilts, each stage has its own scene ---------- */
.frame-wrap{ perspective:1600px; }
.frame{ transition:transform .35s var(--ease); }
.float.f1,.float.f2,.float.f3,.float.f4{ opacity:0; transform:translateY(14px) scale(.96); }
.frame.st1:not(.st2) .f1,.frame.st2:not(.st3) .f2,.frame.st3:not(.st4) .f3,.frame.st4 .f4{ opacity:1; transform:none; }
.sitemap{ left:2.6cqw; bottom:2.6cqw; width:30cqw; padding:1.4cqw 1.6cqw 1.2cqw; }
.sitemap svg{ width:100%; height:auto; overflow:visible; }
.sitemap .beam{ fill:none; stroke:var(--copper-light); stroke-width:1.6; stroke-dasharray:6 5; stroke-dashoffset:200; }
.frame.st1 .sitemap .beam{ animation:dash 1.6s var(--ease) forwards, flow 1.2s linear infinite 1.6s; }
.sitemap .beam:nth-child(2){ animation-delay:.15s, 1.75s } .sitemap .beam:nth-child(3){ animation-delay:.3s, 1.9s }
@keyframes dash{ to{ stroke-dashoffset:0 } }
@keyframes flow{ to{ stroke-dashoffset:-22 } }
.sitemap .node rect{ fill:#FFF; stroke:var(--line-strong); stroke-width:1.2; }
.sitemap .node.n0 rect{ fill:var(--copper); stroke:var(--copper); }
.sitemap .node text{ font-family:var(--mono); font-size:9px; fill:var(--ink); text-anchor:middle; }
.sitemap .node.n0 text{ fill:#FFF; }
.sitemap .node{ opacity:0; animation:pop .5s var(--ease) forwards; }
.frame.st1 .sitemap .n0{ animation-delay:.1s } .frame.st1 .sitemap .n1{ animation-delay:.9s } .frame.st1 .sitemap .n2{ animation-delay:1.05s } .frame.st1 .sitemap .n3{ animation-delay:1.2s }
@keyframes pop{ from{ opacity:0; transform:scale(.8) } to{ opacity:1; transform:none } }
.sitemap small{ display:block; margin-top:.6cqw; font-family:var(--mono); font-size:1.1cqw; color:var(--ink-3); }
.phone{ right:3cqw; top:9cqw; width:15cqw; aspect-ratio:9/18; border-radius:2.4cqw; background:#10302C; border:.6cqw solid #10302C; padding:1.2cqw 1cqw; display:flex; flex-direction:column; gap:1cqw; box-shadow:var(--shadow-lg), 0 0 0 1px rgba(0,0,0,.2); overflow:hidden; }
.phone::before{ content:""; position:absolute; left:50%; top:.5cqw; width:4cqw; height:.8cqw; border-radius:999px; background:#0B1F1C; transform:translateX(-50%); }
.phone > *{ background:#F2FAF8; border-radius:.8cqw; }
.ph-nav{ height:2.2cqw; margin-top:1cqw; display:flex; align-items:center; gap:.6cqw; padding:0 .8cqw; background:#FFF; }
.ph-nav i{ width:2.6cqw; height:.9cqw; border-radius:2px; background:#1E7F78; } .ph-nav b{ margin-left:auto; width:2cqw; height:.9cqw; border-radius:999px; background:#1E7F78; }
.ph-hero{ padding:1.2cqw 1cqw; display:flex; flex-direction:column; gap:.7cqw; }
.ph-hero em{ font-family:var(--display); font-style:normal; font-weight:500; font-size:1.35cqw; line-height:1.15; color:#10302C; letter-spacing:-.02em; }
.ph-hero span{ height:.6cqw; width:90%; border-radius:2px; background:#CFE3DF; } .ph-hero span.short{ width:60%; }
.ph-hero u{ display:block; width:60%; height:1.8cqw; border-radius:999px; background:#1E7F78; margin-top:.4cqw; }
.ph-card{ flex:1; background:#FFF; box-shadow:0 1px 0 var(--line); }
.swatches{ left:2.6cqw; bottom:2.6cqw; padding:1.4cqw 1.6cqw; display:flex; gap:.8cqw; align-items:center; }
.swatches b{ width:3.2cqw; height:3.2cqw; border-radius:50%; box-shadow:inset 0 0 0 1px rgba(0,0,0,.08); }
.swatches small{ font-family:var(--mono); font-size:1.1cqw; color:var(--ink-3); margin-left:.6cqw; }
.rank{ left:2.6cqw; bottom:2.6cqw; padding:1.4cqw 1.8cqw; display:grid; gap:.2cqw; }
.rank small{ font-family:var(--mono); font-size:1.15cqw; color:var(--ink-3); }
.rank span{ font-size:1.2cqw; color:var(--ink-2); }
@property --rank{ syntax:"<integer>"; inherits:false; initial-value:14; }
.rank-n{ --rank:14; counter-reset:rank var(--rank); font-family:var(--display); font-size:3.4cqw; line-height:1; color:var(--ok); transition:--rank 2.2s var(--ease-io); }
.rank-n::before{ content:"#" counter(rank); }
.frame.st3 .rank-n{ --rank:1; }
.toast{ right:2.6cqw; top:2.6cqw; padding:1cqw 1.4cqw; background:var(--ink); color:#FFF; border-color:var(--ink); font-family:var(--mono); font-size:1.2cqw; display:flex; align-items:center; gap:.9cqw; border-radius:999px; }
.toast i{ width:1.6cqw; height:1.6cqw; border-radius:50%; background:var(--wa); }
@media (max-width:900px){ .phone{ width:22cqw; top:6cqw; } .sitemap{ width:44cqw; } }

/* ---------- work: two rows in perspective ---------- */
.works{ position:relative; height:280vh; }
.works-pin{ position:sticky; top:0; height:100vh; height:100svh; overflow:hidden; display:flex; flex-direction:column; justify-content:center; gap:2rem; padding-top:var(--hdr); }
.works-head{ position:relative; z-index:2; }
.works-head h2{ font-size:clamp(2.2rem,1.4rem + 3.4vw,4.6rem); max-width:14ch; }
.rows{ perspective:1400px; perspective-origin:50% 30%; }
.rows-in{ transform-style:preserve-3d; }
.row{ display:flex; gap:1.4rem; width:max-content; will-change:transform; margin-inline:auto; }
.row + .row{ margin-top:1.4rem; }
.wcard{ position:relative; flex:none; width:clamp(220px,17.5vw,330px); border-radius:16px; overflow:hidden; background:var(--surface); box-shadow:var(--shadow-lg); transition:transform .5s var(--ease), box-shadow .5s var(--ease); }
.wcard:hover{ transform:translateY(-10px); box-shadow:0 50px 90px -40px rgba(27,36,49,.45); }
.wcard img{ width:100%; aspect-ratio:760/475; object-fit:cover; display:block; }
.wcard span{ position:absolute; left:.75rem; right:.75rem; bottom:.75rem; display:flex; align-items:center; gap:.6rem; background:rgba(251,249,244,.94); border-radius:10px; padding:.55rem .8rem; font-family:var(--display); font-size:1rem; letter-spacing:-.01em; color:var(--ink); }
.wcard span b{ font-family:var(--mono); font-size:.66rem; letter-spacing:.12em; color:var(--copper); font-weight:500; }
.wcard span i{ margin-left:auto; font-family:var(--mono); font-style:normal; font-size:.6rem; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-3); border:1px solid var(--line-strong); border-radius:999px; padding:.2rem .5rem; }
.works-foot{ position:relative; z-index:2; }
@media (max-width:900px){
  .works{ height:260vh; }
  .works-pin{ gap:1.25rem; justify-content:flex-start; padding-top:calc(var(--hdr) + 1.5rem); }
  .works-head h2{ font-size:clamp(2rem,1.4rem + 3vw,3rem); }
  .rows{ perspective:900px; perspective-origin:50% 20%; }
  .row{ gap:.9rem; margin:0; padding-left:1.25rem; }
  .wcard{ width:58vw; }
  .wcard span{ font-size:.86rem; padding:.45rem .6rem; }
  .works-foot{ margin-top:auto; padding-bottom:1.5rem; }
}
@media (max-width:900px) and (max-height:640px){ .works-head p.lead{ display:none; } }

/* ---------- reveals ---------- */
html.motion .reveal{ opacity:0; transform:translateY(24px); }
html.motion .reveal.in{ opacity:1; transform:none; transition:opacity .9s var(--ease), transform .9s var(--ease); }
@media (prefers-reduced-motion:reduce){
  html.motion .reveal{ opacity:1!important; transform:none!important; }
  .aurora::before,.aurora::after,.oring,.oring i span,.core-glow,.sitemap .beam,.sitemap .node{ animation:none!important; opacity:1; }
  .rows-in,.row,.tilt{ transform:none!important; }
  .line > span{ transform:none!important; }
  .grain,.k-a,.k-b,.scroll-cue i,.live-pill::before,.ftr-marquee .track{ animation:none!important; }
  .steps{ opacity:1!important; transform:none!important; } .steps li{ opacity:1!important; } .steps p{ max-height:none!important; opacity:1!important; }
  .loader{ display:none!important; }
}

/* ==========================================================================
   Production additions: languages, header with services, footer, form,
   consent banner, WhatsApp float, and lighter effects on phones
   ========================================================================== */
.skip-link{ position:fixed; left:12px; top:-60px; z-index:400; background:var(--copper); color:#FFFDF9; padding:.6rem 1rem; border-radius:10px; transition:top .2s; }
.skip-link:focus{ top:12px; }

/* Devanagari: Fraunces has no Marathi or Hindi glyphs, Mukta carries them */
html[lang="mr"] body,html[lang="hi"] body{ font-family:"Mukta","Noto Sans Devanagari",system-ui,sans-serif; }
html[lang="mr"] .display,html[lang="hi"] .display,
html[lang="mr"] .tilt-copy h3,html[lang="hi"] .tilt-copy h3,
html[lang="mr"] .steps h3,html[lang="hi"] .steps h3,
html[lang="mr"] .btn,html[lang="hi"] .btn,
html[lang="mr"] .tick b,html[lang="hi"] .tick b{ font-family:"Mukta","Noto Sans Devanagari",system-ui,sans-serif; letter-spacing:0; font-weight:600; }
html[lang="mr"] .display,html[lang="hi"] .display{ line-height:1.18; }
html[lang="mr"] .display em,html[lang="hi"] .display em{ font-style:normal; font-weight:700; }
html[lang="mr"] h1.display,html[lang="hi"] h1.display{ font-size:clamp(2.2rem,1rem + 3.6vw,4.8rem); }
html[lang="mr"] .line,html[lang="hi"] .line{ padding-bottom:.12em; margin-bottom:-.12em; }
html[lang="mr"] .k-line,html[lang="hi"] .k-line{ font-family:var(--display); }

/* ---------- header: services dropdown, language switch, phone drawer ---------- */
.nav-item{ position:relative; }
.nav-item > a::after{ content:""; display:inline-block; width:.4em; height:.4em; margin-left:.4em; border-right:1.5px solid currentColor; border-bottom:1.5px solid currentColor; transform:translateY(-.15em) rotate(45deg); opacity:.7; }
.dropdown{ position:absolute; left:0; top:calc(100% + .6rem); min-width:15rem; background:#FFFDF9; color:var(--ink); border:1px solid var(--line); border-radius:14px; padding:.5rem; box-shadow:var(--shadow-lg); display:grid; opacity:0; visibility:hidden; transform:translateY(8px); transition:opacity .25s var(--ease), transform .25s var(--ease), visibility 0s .25s; }
.dropdown a{ display:block; padding:.6rem .8rem; border-radius:9px; font-size:.92rem; color:var(--ink-2); opacity:1; }
.dropdown a:hover{ background:var(--band); color:var(--ink); }
.nav-item:hover .dropdown,.nav-item:focus-within .dropdown,.nav-item.open .dropdown{ opacity:1; visibility:visible; transform:none; transition-delay:0s; }
.lang-switch{ display:inline-flex; gap:.1rem; margin-left:.4rem; padding:.2rem; border-radius:999px; border:1px solid rgba(255,255,255,.18); }
body[data-theme="light"] .lang-switch{ border-color:var(--line-strong); }
.lang-switch button{ font:inherit; font-size:.78rem; font-weight:600; padding:.4rem .6rem; border:0; border-radius:999px; background:transparent; color:inherit; opacity:.75; cursor:pointer; min-height:32px; }
.lang-switch button.active{ background:rgba(255,255,255,.14); opacity:1; }
body[data-theme="light"] .lang-switch button.active{ background:var(--ink); color:#FFFDF9; }
.nav-toggle{ display:none; margin-left:auto; width:44px; height:44px; border-radius:50%; border:1px solid rgba(255,255,255,.18); background:transparent; color:inherit; cursor:pointer; place-items:center; gap:5px; padding:0; }
body[data-theme="light"] .nav-toggle{ border-color:var(--line-strong); }
.nav-toggle{ position:relative; }
.nav-toggle i{ position:absolute; left:50%; top:50%; width:18px; height:1.5px; margin:-.75px 0 0 -9px; background:currentColor; transition:transform .3s var(--ease); }
.nav-toggle i:first-child{ transform:translateY(-3.5px); } .nav-toggle i:last-child{ transform:translateY(3.5px); }
.hdr.nav-open .nav-toggle i:first-child{ transform:rotate(45deg); } .hdr.nav-open .nav-toggle i:last-child{ transform:rotate(-45deg); }
@media (max-width:1100px){ .clock{ display:none; } }
@media (max-width:900px){
  .hdr-nav a:not(.btn){ display:block; }
  .nav-toggle{ display:grid; }
  .hdr-nav{ position:fixed; left:0; right:0; top:var(--hdr); bottom:0; margin:0; padding:1rem 1.25rem 2rem; background:var(--night); color:var(--on-dark); display:flex; flex-direction:column; align-items:stretch; gap:.2rem; overflow:auto; opacity:0; visibility:hidden; transform:translateY(-8px); transition:opacity .3s var(--ease), transform .3s var(--ease), visibility 0s .3s; }
  .hdr.nav-open .hdr-nav{ opacity:1; visibility:visible; transform:none; transition-delay:0s; }
  .hdr.nav-open{ background:var(--night); color:var(--on-dark); -webkit-backdrop-filter:none!important; backdrop-filter:none!important; }
  .hdr-nav > a,.nav-item > a{ padding:.9rem .5rem; font-family:var(--display); font-size:1.4rem; border-bottom:1px solid rgba(255,255,255,.1); border-radius:0; opacity:1; }
  .dropdown{ position:static; background:transparent; border:0; box-shadow:none; padding:0 0 .5rem .5rem; opacity:1; visibility:visible; transform:none; display:none; }
  .nav-item.open .dropdown{ display:grid; }
  .dropdown a{ color:var(--on-dark-muted); padding:.55rem .5rem; }
  .lang-switch{ margin:1rem 0 .5rem; align-self:flex-start; }
  .hdr-nav .btn{ margin:.5rem 0 0; justify-content:center; padding:1rem; font-size:1rem; }
  body.nav-locked{ overflow:hidden; }
}

/* ---------- the enquiry form in the closing ---------- */
.lead-form{ margin-top:1.6rem; max-width:40rem; }
.lf-row{ display:grid; grid-template-columns:1fr 1fr; gap:0 1.25rem; }
@media (max-width:560px){ .lf-row{ grid-template-columns:1fr; } }
.lf{ display:block; margin-bottom:1rem; }
.lf span{ display:block; font-family:var(--mono); font-size:.66rem; letter-spacing:.14em; text-transform:uppercase; color:var(--on-dark-muted); margin-bottom:.35rem; }
.lf input,.lf textarea{ width:100%; font:inherit; font-size:1rem; color:#FFFDF9; background:transparent; border:0; border-bottom:1px solid rgba(255,255,255,.22); padding:.55rem 0; border-radius:0; transition:border-color .2s; }
.lf input::placeholder,.lf textarea::placeholder{ color:rgba(237,232,220,.35); }
.lf input:focus,.lf textarea:focus{ outline:none; border-bottom-color:var(--copper-light); }
.lf textarea{ resize:vertical; min-height:2.6rem; }
.hp{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }
.lead-form .btns{ margin-top:1.4rem; }
.lead-form .btn{ border:0; font-family:inherit; cursor:pointer; }
.form-msg{ margin-top:.9rem; font-size:.9rem; min-height:1.3em; color:var(--on-dark-muted); }
.form-msg.ok{ color:#7BD88F; } .form-msg.err{ color:#F2A65A; }
.close-side .btn-wa{ margin-top:.4rem; }
.close-side a.js-maps{ color:var(--copper-light); text-decoration:underline; text-underline-offset:3px; }
.close-side b a{ color:inherit; }

/* ---------- footer ---------- */
.ftr{ padding-block:3rem 1.6rem; }
.ftr-grid{ display:grid; grid-template-columns:1.6fr 1fr 1fr 1fr; gap:2rem; }
.ftr-brand p{ margin-top:1rem; max-width:34ch; }
.ftr-brand address{ font-style:normal; margin-top:1rem; line-height:1.7; }
.ftr-col{ display:flex; flex-direction:column; gap:.55rem; }
.ftr-col h4{ margin:0 0 .4rem; font-family:var(--mono); font-size:.66rem; letter-spacing:.14em; text-transform:uppercase; color:var(--copper-light); font-weight:500; }
.ftr-col a{ color:var(--on-dark-muted); font-size:.9rem; } .ftr-col a:hover{ color:#FFFDF9; }
.ftr-bottom{ display:flex; flex-wrap:wrap; gap:.6rem 1.5rem; align-items:center; margin-top:2.5rem; padding-top:1.2rem; border-top:1px solid rgba(255,255,255,.1); font-size:.8rem; }
.ftr-bottom .r{ margin-left:auto; }
@media (max-width:860px){ .ftr-grid{ grid-template-columns:1fr 1fr; } .ftr-brand{ grid-column:1 / -1; } }
@media (min-width:861px){ .ftr .ftr-bottom{ padding-left:9rem; } }

/* ---------- WhatsApp float ---------- */
.wa-float{ position:fixed; right:18px; bottom:18px; z-index:100; width:54px; height:54px; border-radius:50%; background:var(--wa); color:#FFF; display:grid; place-items:center; box-shadow:0 12px 28px -10px rgba(37,211,102,.7); transition:transform .25s var(--ease); }
.wa-float:hover{ transform:scale(1.08); }
.wa-float svg{ width:26px; height:26px; }
@media (max-width:860px){ .wa-float{ right:14px; bottom:14px; } }

/* ---------- consent banner, DPDP notice and choice ---------- */
.consent{ position:fixed; left:1.25rem; bottom:1.25rem; z-index:160; width:min(22rem,calc(100vw - 2.5rem)); background:#FFFDF9; color:var(--ink); border:1px solid var(--line); border-radius:16px; padding:1.1rem 1.2rem 1.2rem; box-shadow:var(--shadow-lg); opacity:0; visibility:hidden; transform:translateY(12px); transition:opacity .35s var(--ease), transform .35s var(--ease), visibility 0s .35s; }
.consent.is-open{ opacity:1; visibility:visible; transform:none; transition-delay:0s; }
.consent::before{ content:""; display:block; width:2.5rem; height:2px; background:var(--copper); margin-bottom:.8rem; }
.consent-copy{ font-size:.855rem; line-height:1.6; color:var(--ink-2); margin:0 0 1rem; }
.consent-copy a{ color:var(--copper); text-decoration:underline; text-underline-offset:2px; }
.consent-actions{ display:flex; gap:.5rem; flex-wrap:wrap; }
.consent .btn{ padding:.6rem .9rem; font-size:.85rem; border-radius:10px; cursor:pointer; font-family:inherit; }
.consent .btn-primary{ background:var(--ink); color:#FFFDF9; border:0; }
.consent .btn-ghost{ background:transparent; color:var(--ink); border:1.5px solid var(--line-strong); }
@media (max-width:860px){ .consent{ left:.75rem; bottom:5.2rem; width:calc(100vw - 1.5rem); } }

/* ---------- phones: no animated blur layers, no grain flicker ---------- */
@media (max-width:860px){
  .aurora::before,.aurora::after{ filter:blur(44px); }
  .aurora::after{ animation:none; }
  .grain{ animation:none; opacity:.04; }
  .orb{ animation:orbdrift 12s ease-in-out infinite alternate; }
}
@keyframes orbdrift{ from{ transform:translate(-50%,-50%) translate(-60px,-30px) } to{ transform:translate(-50%,-50%) translate(60px,40px) } }
/* the big principle numerals drift slightly with the scroll on every device */
.panel .p-n{ transition:transform .1s linear; }