/* WE Hatch website. Palette from the controller itself: cabinet teal, eggshell, yolk knob, screen cyan. */
@font-face{font-family:"Bricolage";src:url(../fonts/bricolage-grotesque-latin-600-normal.woff2) format("woff2");font-weight:600;font-display:swap}
@font-face{font-family:"Bricolage";src:url(../fonts/bricolage-grotesque-latin-800-normal.woff2) format("woff2");font-weight:800;font-display:swap}
@font-face{font-family:"Atkinson";src:url(../fonts/atkinson-hyperlegible-latin-400-normal.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Atkinson";src:url(../fonts/atkinson-hyperlegible-latin-700-normal.woff2) format("woff2");font-weight:700;font-display:swap}
@font-face{font-family:"Baloo2";src:url(../fonts/baloo-2-devanagari-600-normal.woff2) format("woff2");font-weight:600;font-display:swap;unicode-range:U+0900-097F,U+200C-200D,U+20B9,U+25CC,U+A8E0-A8FF}
@font-face{font-family:"Baloo2";src:url(../fonts/baloo-2-devanagari-800-normal.woff2) format("woff2");font-weight:800;font-display:swap;unicode-range:U+0900-097F,U+200C-200D,U+20B9,U+25CC,U+A8E0-A8FF}
@font-face{font-family:"Mukta";src:url(../fonts/mukta-devanagari-400-normal.woff2) format("woff2");font-weight:400;font-display:swap;unicode-range:U+0900-097F,U+200C-200D,U+20B9,U+25CC,U+A8E0-A8FF}
@font-face{font-family:"Mukta";src:url(../fonts/mukta-devanagari-700-normal.woff2) format("woff2");font-weight:700;font-display:swap;unicode-range:U+0900-097F,U+200C-200D,U+20B9,U+25CC,U+A8E0-A8FF}

:root{
  --deep:#0D555B; --deep-2:#093E43; --teal:#12838C; --glow:#22D3EE;
  --mist:#F1F4EF; --mist-2:#E4EBE5; --shell:#EADFCB; --shell-2:#F6EFE2;
  --yolk:#F2B21B; --yolk-2:#FFF3D1; --ink:#16252A; --muted:#475A5E; --line:#CBD8D2;
  --display:"Bricolage","Baloo2",system-ui,sans-serif; --text:"Atkinson","Mukta",system-ui,sans-serif;
  --r:18px; --wrap:1180px;
}
:root[lang="hi"]{--display:"Baloo2","Bricolage",system-ui,sans-serif;--text:"Mukta","Atkinson",system-ui,sans-serif}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{animation:none!important;transition:none!important}}
body{margin:0;background:var(--mist);color:var(--ink);font:400 17px/1.6 var(--text)}
:root[lang="hi"] body{font-size:18px;line-height:1.7}
img{max-width:100%;height:auto;display:block}
a{color:var(--deep)}a:hover{color:var(--teal)}
:focus-visible{outline:3px solid var(--yolk);outline-offset:3px;border-radius:6px}
h1,h2,h3{font-family:var(--display);line-height:1.08;margin:0;text-wrap:balance}
:root[lang="hi"] h1,:root[lang="hi"] h2,:root[lang="hi"] h3{line-height:1.3}
p{margin:0;text-wrap:pretty}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 24px}
.skip{position:absolute;left:-999px;top:8px;background:var(--yolk);color:var(--ink);padding:10px 16px;border-radius:10px;z-index:99}
.skip:focus{left:12px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- header ---------- */
.top{position:sticky;top:0;z-index:40;background:rgba(9,62,67,.94);backdrop-filter:blur(10px);color:var(--shell)}
.top .wrap{display:flex;align-items:center;gap:20px;min-height:66px}
.brand{display:flex;align-items:center;gap:10px;color:var(--shell);text-decoration:none;font:800 21px/1 var(--display)}
.brand img{width:36px;height:36px;border-radius:9px}
.brand:hover{color:#fff}
.nav{display:flex;gap:4px;margin-left:auto}
.nav a{color:var(--shell);text-decoration:none;padding:8px 12px;border-radius:10px;font-size:15px}
.nav a:hover{background:rgba(255,255,255,.08);color:#fff}
.lang{display:flex;border:1.5px solid rgba(234,223,203,.45);border-radius:999px;padding:3px}
.lang button{all:unset;cursor:pointer;padding:5px 12px;border-radius:999px;font:600 14px/1 var(--display);color:var(--shell)}
.lang button[aria-pressed="true"]{background:var(--shell);color:var(--deep-2)}
.lang button:focus-visible{outline:3px solid var(--yolk)}
.menu{all:unset;display:none;cursor:pointer;color:var(--shell);padding:8px;border-radius:10px}
.menu svg{display:block}
@media (max-width:960px){
  .nav{display:none;position:absolute;left:0;right:0;top:66px;flex-direction:column;background:var(--deep-2);padding:10px 16px 18px;margin:0}
  .nav.open{display:flex}
  .nav a{padding:12px}
  .menu{display:block;margin-left:auto}
}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;gap:10px;min-height:48px;padding:0 22px;border-radius:14px;font:600 16px/1 var(--display);text-decoration:none;border:2px solid transparent;cursor:pointer;transition:transform .15s ease,background .15s ease}
.btn:hover{transform:translateY(-1px)}
.btn svg{flex:none}
.btn-yolk{background:var(--yolk);color:var(--ink)}
.btn-yolk:hover{background:#FFC53D;color:var(--ink)}
.btn-line{border-color:rgba(234,223,203,.6);color:var(--shell)}
.btn-line:hover{border-color:var(--shell);color:#fff}
.btn-ink{background:var(--ink);color:var(--mist)}
.btn-ink:hover{background:var(--deep);color:#fff}
.btn-ghost{border-color:var(--deep);color:var(--deep)}
.btn-ghost:hover{background:var(--deep);color:#fff}

/* ---------- hero ---------- */
.hero{background:radial-gradient(120% 90% at 78% 48%,#14707A 0%,var(--deep) 38%,var(--deep-2) 100%);color:var(--shell);overflow:hidden}
.hero .wrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:24px;align-items:center;min-height:min(86vh,760px);padding-top:36px;padding-bottom:36px}
.hero h1{font-size:clamp(44px,6.4vw,84px);font-weight:800;letter-spacing:-.03em;color:#F6F1E6}
:root[lang="hi"] .hero h1{letter-spacing:0;font-size:clamp(40px,5.4vw,72px)}
.hero .lede{margin-top:22px;font-size:19px;max-width:34ch;color:#E6DCC8}
.hero .ctas{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px}
.hero .made{margin-top:26px;font-size:14px;color:#BFD3CE}
.stage{position:relative;aspect-ratio:1/0.92;width:100%}
.stage::before{content:"";position:absolute;inset:6% 4% 0;border-radius:50% 50% 46% 46%/58% 58% 42% 42%;background:radial-gradient(closest-side,rgba(34,211,238,.18),rgba(34,211,238,0));pointer-events:none}
.stage canvas{position:absolute;inset:0;width:100%;height:100%;touch-action:pan-y;cursor:grab}
.stage canvas:active{cursor:grabbing}
.stage .still{position:absolute;inset:8% 2% 4%;width:96%;height:auto;object-fit:contain;transition:opacity .6s ease}
.stage.live .still{opacity:0;pointer-events:none}
.stage .hint{position:absolute;left:50%;bottom:2%;transform:translateX(-50%);font-size:14px;color:#CFE2DD;display:flex;gap:8px;align-items:center;white-space:nowrap;opacity:0;transition:opacity .4s}
.stage.live .hint{opacity:1}
@media (max-width:900px){.hero .wrap{grid-template-columns:1fr;min-height:0;padding-top:28px}.stage{order:-1;max-width:560px;margin:0 auto}}

/* ---------- strip of numbers under hero ---------- */
.facts{background:var(--deep-2);color:var(--shell)}
.facts ul{list-style:none;margin:0;padding:22px 24px;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px;max-width:var(--wrap);margin:0 auto}
.facts b{display:block;font:800 30px/1 var(--display);color:#fff}
.facts span{font-size:15px;color:#BFD3CE}
@media (max-width:760px){.facts ul{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* ---------- sections ---------- */
section.band{padding:96px 0}
.band.alt{background:var(--mist-2)}
.band.shell{background:var(--shell-2)}
.head{max-width:62ch;margin-bottom:44px}
.head h2{font-size:clamp(32px,4.2vw,52px);font-weight:800;letter-spacing:-.02em}
:root[lang="hi"] .head h2{letter-spacing:0}
.head p{margin-top:14px;font-size:19px;color:var(--muted)}

/* features: alternating rows with the real screens */
.feature{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:56px;align-items:center;padding:34px 0;border-top:1px solid var(--line)}
.feature:first-of-type{border-top:0}
.feature:nth-of-type(even) .shot{order:2}
.feature h3{font-size:30px;font-weight:800}
.feature p{margin-top:12px;color:var(--muted)}
.ticks{list-style:none;margin:18px 0 0;padding:0;display:grid;gap:10px}
.ticks li{position:relative;padding-left:30px}
.ticks li::before{content:"";position:absolute;left:0;top:.42em;width:18px;height:18px;border-radius:50%;background:var(--yolk) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2316252A' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center/12px no-repeat}
.bezel{background:#0B1416;border-radius:22px;padding:14px;box-shadow:0 24px 50px rgba(9,62,67,.25);max-width:520px}
.bezel img{border-radius:6px;image-rendering:auto;width:100%}
.duo{position:relative;max-width:560px}
.duo .laptop{border-radius:14px;box-shadow:0 20px 44px rgba(9,62,67,.22);border:8px solid #0B1416}
.duo .phone{position:absolute;right:-8px;bottom:-30px;width:31%;border-radius:22px;border:6px solid #0B1416;box-shadow:0 20px 40px rgba(9,62,67,.3)}
@media (max-width:860px){.feature{grid-template-columns:1fr;gap:26px}.feature:nth-of-type(even) .shot{order:0}.duo .phone{right:4px}}

/* ---------- day by day ---------- */
.tl{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:40px;align-items:start}
.birds{display:flex;flex-wrap:wrap;gap:8px}
.birds button{all:unset;cursor:pointer;padding:9px 16px;border-radius:999px;border:1.5px solid var(--line);background:#fff;font:600 15px/1.2 var(--display)}
.birds button[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:#fff}
.birds button:focus-visible{outline:3px solid var(--yolk)}
.eggs{display:grid;grid-template-columns:repeat(auto-fill,minmax(30px,1fr));gap:6px;margin-top:26px}
.eggs button{all:unset;cursor:pointer;aspect-ratio:.78;border-radius:50% 50% 50% 50%/58% 58% 42% 42%;background:var(--shell);border:1.5px solid #D8C9AE;display:grid;place-items:center;font:600 12px/1 var(--display);color:#6B5B3E}
.eggs button.lock{background:#CFE3E0;border-color:#9DC2BE;color:var(--deep)}
.eggs button.hatch{background:var(--yolk);border-color:#C98F0A;color:var(--ink)}
.eggs button.on{background:var(--deep);border-color:var(--deep);color:#fff;transform:scale(1.12)}
.eggs button:focus-visible{outline:3px solid var(--yolk);outline-offset:2px}
.range{margin-top:18px;display:flex;align-items:center;gap:14px}
.range input{flex:1;accent-color:var(--deep);height:28px}
.legend{display:flex;flex-wrap:wrap;gap:14px;margin-top:12px;font-size:14px;color:var(--muted)}
.legend i{display:inline-block;width:12px;height:15px;border-radius:50%/58% 58% 42% 42%;vertical-align:-2px;margin-right:6px;border:1px solid rgba(0,0,0,.15)}
.daycard{background:#fff;border-radius:var(--r);padding:28px;border:1px solid var(--line);box-shadow:0 12px 32px rgba(9,62,67,.08)}
.daycard .ph{font:800 15px/1 var(--display);color:var(--teal)}
.daycard h3{font-size:34px;margin-top:8px}
.daycard .read{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin:20px 0}
.daycard .read div{background:var(--mist);border-radius:12px;padding:12px}
.daycard .read b{display:block;font:800 24px/1.1 var(--display)}
.daycard .read span{font-size:13px;color:var(--muted)}
.daycard h4{margin:18px 0 6px;font:600 16px/1.2 var(--display)}
.daycard p{color:var(--muted)}
.bar{height:8px;border-radius:99px;background:var(--mist-2);overflow:hidden;margin-top:6px}
.bar i{display:block;height:100%;background:linear-gradient(90deg,var(--deep),var(--glow));width:0;transition:width .3s ease}
@media (max-width:900px){.tl{grid-template-columns:1fr}}

/* ---------- gallery ---------- */
.gallery{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:14px}
.gallery figure{margin:0;grid-column:span 2;position:relative}
.gallery figure.wide{grid-column:span 3}
.gallery button{all:unset;cursor:zoom-in;display:block;border-radius:16px;overflow:hidden;background:#CDD0D1}
.gallery button:focus-visible{outline:3px solid var(--yolk);outline-offset:3px}
.gallery img{transition:transform .5s ease}
.gallery button:hover img{transform:scale(1.04)}
.gallery figcaption{font-size:15px;color:var(--muted);margin-top:8px}
.gallery figcaption b{color:var(--ink)}
@media (max-width:760px){.gallery{grid-template-columns:repeat(2,minmax(0,1fr))}.gallery figure,.gallery figure.wide{grid-column:span 1}}
dialog.zoom{border:0;padding:0;background:transparent;max-width:min(1200px,94vw)}
dialog.zoom::backdrop{background:rgba(9,20,22,.86)}
dialog.zoom img{border-radius:14px}
dialog.zoom form{position:absolute;top:10px;right:10px}
dialog.zoom button{all:unset;cursor:pointer;width:44px;height:44px;border-radius:50%;background:rgba(255,255,255,.92);display:grid;place-items:center}

/* ---------- wiring ---------- */
.wire{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:48px;align-items:center}
.panel{background:var(--ink);color:var(--mist);border-radius:22px;padding:26px}
.panel .side{font:600 14px/1 var(--display);color:#9FB3B6;margin:4px 0 12px}
.panel .side+.terms{margin-bottom:22px}
.terms{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.terms div{border:1.5px solid #3C5155;border-radius:12px;padding:12px 8px;text-align:center}
.terms b{display:block;font:800 16px/1.1 var(--display)}
.terms span{font-size:13px;color:#9FB3B6}
.terms .ac{border-color:var(--yolk);color:var(--yolk)}
.terms .off{border-style:dashed;color:#6E8286}
.warn{display:flex;gap:12px;margin-top:22px;padding:14px 16px;border-radius:14px;background:#FCE8E2;color:#7A2414;font-size:15px}
.warn svg{flex:none;margin-top:2px}
@media (max-width:860px){.wire{grid-template-columns:1fr}.terms{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* ---------- specs + downloads ---------- */
.specgrid{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:40px;align-items:start}
table.spec{width:100%;border-collapse:collapse;font-size:16px}
table.spec th{text-align:left;font:600 15px/1.3 var(--display);padding:12px 14px 12px 0;width:30%;vertical-align:top}
table.spec td{padding:12px 0;border-bottom:1px solid var(--line);vertical-align:top}
table.spec tr:last-child td{border-bottom:0}
table.spec th{border-bottom:1px solid var(--line)}
table.spec tr:last-child th{border-bottom:0}
.dl{display:grid;gap:12px}
.dl a{display:flex;align-items:center;gap:14px;padding:16px 18px;border-radius:16px;background:#fff;border:1px solid var(--line);text-decoration:none;color:var(--ink)}
.dl a:hover{border-color:var(--deep);color:var(--ink)}
.dl a svg{flex:none;color:var(--deep)}
.dl b{display:block;font:600 16px/1.2 var(--display)}
.dl span{font-size:14px;color:var(--muted)}
@media (max-width:860px){.specgrid{grid-template-columns:1fr}}

/* ---------- who ---------- */
.who{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.who div{background:#fff;border-radius:var(--r);padding:24px;border:1px solid var(--line)}
.who h3{font-size:21px}
.who p{margin-top:8px;font-size:16px;color:var(--muted)}
.who svg{color:var(--deep);margin-bottom:14px}
@media (max-width:900px){.who{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:520px){.who{grid-template-columns:1fr}}

/* ---------- tips ---------- */
.tips{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;border-top:2px solid var(--ink)}
.tips div{padding:24px 24px 26px 0;border-bottom:1px solid #D9CDB5}
.tips div:not(:nth-child(3n+1)){padding-left:24px;border-left:1px solid #D9CDB5}
.tips h3{font-size:20px}
.tips p{margin-top:8px;font-size:16px;color:#4F4A3E}
.src{margin-top:20px;font-size:14px;color:var(--muted)}
@media (max-width:860px){.tips{grid-template-columns:1fr}.tips div,.tips div:not(:nth-child(3n+1)){padding:20px 0;border-left:0}}

/* ---------- faq ---------- */
.faq{max-width:820px}
.faq details{border-bottom:1px solid var(--line);padding:6px 0}
.faq summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:16px;padding:16px 0;font:600 19px/1.35 var(--display)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font:800 26px/1 var(--display);color:var(--teal);transition:transform .2s}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details p{padding:0 0 18px;color:var(--muted)}

/* ---------- contact ---------- */
.contact{background:var(--deep);color:var(--shell)}
.contact .head p{color:#CFE2DD}
.cgrid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:40px;align-items:start}
.cards{display:grid;gap:12px}
.cards a{display:flex;gap:14px;align-items:center;padding:18px 20px;border-radius:16px;background:rgba(255,255,255,.07);border:1px solid rgba(234,223,203,.25);color:var(--shell);text-decoration:none}
.cards a:hover{background:rgba(255,255,255,.12);color:#fff}
.cards b{display:block;font:800 19px/1.2 var(--display);color:#fff}
.cards span{font-size:14px;color:#BFD3CE}
.cards svg{flex:none;color:var(--yolk)}
form.enq{background:var(--mist);color:var(--ink);border-radius:22px;padding:28px;display:grid;gap:16px}
form.enq .row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
form.enq label{display:grid;gap:6px;font:600 15px/1.2 var(--display)}
form.enq input,form.enq textarea,form.enq select{font:400 17px/1.4 var(--text);padding:12px 14px;border-radius:12px;border:1.5px solid var(--line);background:#fff;color:var(--ink);width:100%}
form.enq textarea{min-height:110px;resize:vertical}
form.enq input:focus,form.enq textarea:focus,form.enq select:focus{outline:3px solid var(--yolk);outline-offset:1px;border-color:var(--deep)}
form.enq .acts{display:flex;flex-wrap:wrap;gap:10px}
form.enq .note{font-size:14px;color:var(--muted)}
form.enq .err{color:#A32A16;font-size:15px;min-height:1em}
@media (max-width:860px){.cgrid{grid-template-columns:1fr}form.enq .row{grid-template-columns:1fr}}

/* ---------- footer ---------- */
footer{background:var(--deep-2);color:#BFD3CE;padding:44px 0 34px;font-size:15px}
footer .wrap{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:30px;align-items:start}
footer .tag{font:600 18px/1.4 var(--display);color:var(--shell);font-style:italic;margin-top:12px}
.social{display:flex;flex-wrap:wrap;gap:10px}
.social a{width:46px;height:46px;border-radius:14px;display:grid;place-items:center;background:rgba(255,255,255,.07);color:var(--shell)}
.social a:hover{background:var(--yolk);color:var(--ink)}
footer .small{grid-column:1/-1;border-top:1px solid rgba(234,223,203,.18);padding-top:18px;display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px;font-size:14px}
footer a{color:var(--shell)}
@media (max-width:760px){footer .wrap{grid-template-columns:1fr}}

.wa-float{position:fixed;right:18px;bottom:18px;z-index:50;width:58px;height:58px;border-radius:50%;background:#1FA855;color:#fff;display:grid;place-items:center;box-shadow:0 10px 24px rgba(0,0,0,.25)}
.wa-float:hover{background:#178A45;color:#fff}

/* ---------- nav book button ---------- */
.nav a.navbook{background:var(--yolk);color:var(--ink);font-weight:700}
.nav a.navbook:hover{background:#FFC53D;color:var(--ink)}

/* ---------- hero entrance: one orchestrated moment ---------- */
@keyframes rise{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
@keyframes spinin{from{opacity:0;transform:scale(.92) rotate(-6deg)}to{opacity:1;transform:none}}
.hero h1{animation:rise .8s cubic-bezier(.2,.7,.2,1) both}
.hero .lede{animation:rise .8s .15s cubic-bezier(.2,.7,.2,1) both}
.hero .ctas{animation:rise .8s .3s cubic-bezier(.2,.7,.2,1) both}
.hero .made{animation:rise .8s .45s cubic-bezier(.2,.7,.2,1) both}
.stage{animation:spinin 1.1s .1s cubic-bezier(.2,.7,.2,1) both}

/* ---------- virtual trial ---------- */
.band.dark{background:linear-gradient(180deg,var(--deep-2),#062B2F);color:var(--shell)}
.band.dark .head p{color:#CFE2DD}
.sim{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:28px;align-items:start}
.device{display:grid;grid-template-columns:minmax(0,1fr) 170px;gap:18px;align-items:center;background:#11181B;border-radius:28px;padding:22px;box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 30px 60px rgba(0,0,0,.35)}
.bezel2{background:#05090B;border-radius:14px;padding:10px;border:2px solid #2A3539}
.bezel2 canvas{display:block;width:100%;height:auto;border-radius:4px;image-rendering:auto}
.knobwrap{display:grid;justify-items:center;gap:14px}
.knob{all:unset;cursor:grab;width:132px;height:132px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#3A4549,#0B0F10 70%);box-shadow:0 10px 24px rgba(0,0,0,.55),inset 0 2px 2px rgba(255,255,255,.12);display:grid;place-items:center;touch-action:none;transition:transform .12s}
.knob:focus-visible{outline:3px solid var(--yolk);outline-offset:4px}
.knob.pressed{transform:scale(.95)}
.knob.held{transform:scale(.9)}
.knob .cap{width:100px;height:100px;border-radius:50%;background:repeating-conic-gradient(#1B2124 0 4deg,#252D30 4deg 8deg);position:relative;transition:transform .08s linear}
.knob .cap i{position:absolute;left:50%;top:8px;width:6px;height:24px;margin-left:-3px;border-radius:3px;background:#E5E7EB}
.kbtns{display:grid;grid-template-columns:repeat(3,auto);gap:6px}
.kbtns button{all:unset;cursor:pointer;min-width:44px;height:40px;padding:0 10px;border-radius:10px;background:#1E282B;color:var(--shell);display:grid;place-items:center;font:600 13px/1 var(--display)}
.kbtns button:hover{background:#2A3639}
.kbtns button:focus-visible{outline:3px solid var(--yolk)}
.kbtns #k-hold{grid-column:1/-1}
.khint{font-size:13px;color:#9FB3B6;text-align:center;max-width:160px}
.cabinet{background:rgba(255,255,255,.05);border:1px solid rgba(234,223,203,.18);border-radius:24px;padding:18px}
.cabinet svg{display:block;width:100%;height:auto}
#cab-lamp .glow{opacity:0;transition:opacity .5s}
#cab-lamp.on .glow{opacity:1}
#cab-lamp.on .bulb{fill:#FFE08A}
#cab-fan .blades{transform-box:fill-box;transform-origin:center}
#cab-fan.on .blades{animation:spin .5s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
#cab-mist .p{fill:#F1F8FA;opacity:0}
#cab-mist.on .p{animation:mist 2.4s ease-out infinite}
@keyframes mist{0%{opacity:0;transform:translateY(0) scale(.6)}25%{opacity:.85}100%{opacity:0;transform:translateY(-70px) scale(1.8)}}
#cab-mist .p{transform-box:fill-box;transform-origin:center}
#cab-door{transform-box:view-box;transform-origin:34px 150px;transition:transform .5s cubic-bezier(.2,.7,.2,1)}
#cab-door.open{transform:scaleX(.08)}
.simctl{display:grid;gap:12px;margin-top:14px;font-size:15px}
.simctl .live b{font:800 18px/1 var(--display);color:#fff}
.simctl .clk{float:right;color:#9FB3B6}
.simctl .clk b{font-size:15px}
.roomrow{display:grid;grid-template-columns:1fr auto;gap:6px 10px;align-items:center}
.roomrow input{grid-column:1/-1;accent-color:var(--yolk)}
.chips{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.chips>span{color:#9FB3B6;margin-right:4px}
.chips button{all:unset;cursor:pointer;padding:9px 14px;border-radius:999px;border:1.5px solid rgba(234,223,203,.35);font:600 14px/1 var(--display);color:var(--shell)}
.chips button[aria-pressed="true"]{background:var(--shell);color:var(--deep-2);border-color:var(--shell)}
.chips button:hover{border-color:var(--shell)}
.chips button:focus-visible{outline:3px solid var(--yolk)}
.simctl .note{font-size:13px;color:#9FB3B6}
@media (max-width:980px){.sim{grid-template-columns:minmax(0,1fr)}}
@media (max-width:560px){.device{grid-template-columns:minmax(0,1fr);padding:14px}.knobwrap{grid-template-columns:auto 1fr;align-items:center;justify-items:start}.khint{grid-column:1/-1;max-width:none;text-align:left}.knob{width:112px;height:112px}.knob .cap{width:84px;height:84px}}

/* ---------- wiring explorer ---------- */
.wx{display:grid;grid-template-columns:minmax(0,2.1fr) minmax(0,1fr);gap:22px 28px;align-items:start}
.wxbar{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:8px}
.wxbar button{all:unset;cursor:pointer;padding:10px 16px;border-radius:999px;border:1.5px solid var(--line);background:#fff;font:600 15px/1 var(--display)}
.wxbar button[aria-pressed="true"]{background:var(--ink);color:#fff;border-color:var(--ink)}
.wxbar button:focus-visible{outline:3px solid var(--yolk)}
.wxbar .pwr{margin-left:auto;display:inline-flex;gap:8px;align-items:center;border-color:var(--deep);color:var(--deep)}
.wxbar .pwr[aria-pressed="true"]{background:var(--yolk);border-color:var(--yolk);color:var(--ink)}
.wxart{background:#fff;border-radius:20px;border:1px solid var(--line);padding:10px;overflow:hidden}
.wxart svg{display:block;width:100%;height:auto}
.wxinfo{display:grid;gap:14px}
.wxinfo h3{font-size:24px}
.wxinfo p{margin-top:8px;color:var(--muted)}
.wxinfo .warn{margin-top:0}
.dlrow a{font-weight:700}
@media (max-width:980px){.wx{grid-template-columns:minmax(0,1fr)}.wxbar .pwr{margin-left:0}}
/* focus + power states inside the drawing */
.wiring-art .w,.wiring-art .ld,.wiring-art .flow{transition:opacity .35s}
.wiring-art[data-focus="lamp"] .w:not(.w-lamp):not(.w-supply),.wiring-art[data-focus="lamp"] .ld:not(#ld-lamp),
.wiring-art[data-focus="fogger"] .w:not(.w-fogger):not(.w-supply),.wiring-art[data-focus="fogger"] .ld:not(#ld-fogger),
.wiring-art[data-focus="fan"] .w:not(.w-fan):not(.w-supply),.wiring-art[data-focus="fan"] .ld:not(#ld-fan),
.wiring-art[data-focus="motors"] .w:not(.w-motors):not(.w-supply),.wiring-art[data-focus="motors"] .ld:not(#ld-m1):not(#ld-m2){opacity:.12}
@keyframes flow{to{stroke-dashoffset:-40}}
.wiring-art.powered .flow{animation:flow .9s linear infinite}
.wiring-art.powered .flow.f-supply,
.wiring-art.powered:not([data-focus]) .flow, .wiring-art.powered[data-focus="all"] .flow,
.wiring-art.powered[data-focus="lamp"] .f-lamp,.wiring-art.powered[data-focus="fogger"] .f-fogger,
.wiring-art.powered[data-focus="fan"] .f-fan,.wiring-art.powered[data-focus="motors"] .f-motors{opacity:1}
.wiring-art .flow.neutral{stroke:#BFE0FF}
.wiring-art .spin{transform-box:fill-box;transform-origin:center}
.wiring-art.powered:is(:not([data-focus]),[data-focus="all"],[data-focus="fan"]) #ld-fan .spin>g{animation:spin .45s linear infinite;transform-box:fill-box;transform-origin:center}
.wiring-art.powered:is(:not([data-focus]),[data-focus="all"],[data-focus="lamp"]) #ld-lamp .glow{opacity:1}
.wiring-art.powered:is(:not([data-focus]),[data-focus="all"],[data-focus="lamp"]) #ld-lamp .bulb{fill:#FFE08A}
.wiring-art .puff{transform-box:fill-box;transform-origin:center}
.wiring-art.powered:is(:not([data-focus]),[data-focus="all"],[data-focus="fogger"]) #ld-fogger .puff{animation:mist 2.2s ease-out infinite}
.wiring-art #ld-fogger .p1{animation-delay:.5s!important}.wiring-art #ld-fogger .p2{animation-delay:1s!important}.wiring-art #ld-fogger .p3{animation-delay:1.5s!important}
.wiring-art .shaftmark{transform-box:view-box}
.wiring-art.powered:is(:not([data-focus]),[data-focus="all"],[data-focus="motors"]) .shaftmark{animation:shaft 1s steps(2) infinite}
@keyframes shaft{50%{opacity:.2}}
@media (prefers-reduced-motion:reduce){.wiring-art.powered .flow{animation:none;stroke-dasharray:none;opacity:.9}}

/* ---------- booking page ---------- */
.bookpage main{padding-top:56px}
.bk-h{font-size:clamp(34px,4.6vw,56px);font-weight:800;letter-spacing:-.02em}
:root[lang="hi"] .bk-h{letter-spacing:0}
.bk{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:32px;align-items:start}
.bk fieldset{border:0;margin:0 0 34px;padding:0}
.bk legend{font:800 22px/1.2 var(--display);margin-bottom:16px;padding:0}
.pick{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.pcard{position:relative;display:grid;gap:6px;background:#fff;border:2px solid var(--line);border-radius:20px;padding:16px 18px 18px;cursor:pointer;transition:border-color .15s,box-shadow .15s}
.pcard:hover{border-color:#9DB6B0}
.pcard input{position:absolute;opacity:0;pointer-events:none}
.pcard:has(input:checked){border-color:var(--deep);box-shadow:0 0 0 4px rgba(13,85,91,.14)}
.pcard:has(input:focus-visible){outline:3px solid var(--yolk);outline-offset:3px}
.pcard:has(input:checked)::after{content:"";position:absolute;top:14px;right:14px;width:26px;height:26px;border-radius:50%;background:var(--deep) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center/15px no-repeat}
.pcard img{width:100%;aspect-ratio:1.55;object-fit:contain;background:var(--mist);border-radius:12px}
.pname{font:800 20px/1.2 var(--display);margin-top:6px}
.pprice{font:800 18px/1 var(--display);color:var(--deep)}
.pcard ul{margin:4px 0 0;padding-left:18px;font-size:15px;color:var(--muted)}
.qty{display:flex;align-items:center;gap:8px;margin-top:18px;font:600 16px var(--display)}
.qty span{margin-right:8px}
.qty button{all:unset;cursor:pointer;width:44px;height:44px;border-radius:12px;border:1.5px solid var(--line);background:#fff;display:grid;place-items:center;font:800 20px/1 var(--display)}
.qty button:focus-visible{outline:3px solid var(--yolk)}
.qty input{width:70px;height:44px;text-align:center;font:800 18px var(--display);border:1.5px solid var(--line);border-radius:12px}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.grid2 label{display:grid;gap:6px;font:600 15px/1.2 var(--display)}
.grid2 .full{grid-column:1/-1}
.bk input:not([type=radio]):not([type=checkbox]),.bk select,.bk textarea,.done input{font:400 17px/1.4 var(--text);padding:12px 14px;border-radius:12px;border:1.5px solid var(--line);background:#fff;color:var(--ink);width:100%}
.bk textarea{min-height:90px;resize:vertical}
.bk [aria-invalid="true"]{border-color:#B42318!important;background:#FFF5F3!important}
.bk input:focus,.bk select:focus,.bk textarea:focus,.done input:focus{outline:3px solid var(--yolk);outline-offset:1px;border-color:var(--deep)}
.agree{display:flex;gap:10px;align-items:flex-start;margin-top:16px;font-size:16px}
.agree input{width:22px;height:22px;margin-top:2px;accent-color:var(--deep)}
.bk-sum{position:sticky;top:90px;background:var(--ink);color:var(--mist);border-radius:22px;padding:24px}
.bk-sum h2{font-size:24px;margin-bottom:14px}
.bk-sum .row{display:flex;justify-content:space-between;gap:12px;padding:10px 0;border-bottom:1px solid #2E4045}
.bk-sum .row b{font:800 18px/1.2 var(--display);white-space:nowrap}
.bk-sum .tot b{font-size:24px}
.bk-sum .adv b{color:var(--yolk)}
.bk-sum .btn.wide{width:100%;justify-content:center;margin-top:16px}
.bk-sum .note{font-size:14px;color:#AFC3C1;margin-top:12px}
.bk-sum .err{color:#FFB4A6;margin-top:10px;min-height:1em;font-size:15px}
.done{background:#fff;border:1px solid var(--line);border-radius:24px;padding:28px;outline:none}
.done-head{display:flex;gap:16px;align-items:center;margin-bottom:22px}
.done-head h2{font-size:30px}
.done-head b{font:800 18px var(--display);color:var(--deep)}
.done-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);gap:28px}
.pay{background:var(--mist);border-radius:18px;padding:22px;display:grid;gap:12px;justify-items:start}
.pay h3,.next h3{font-size:22px}
.pay .amt{font:800 34px/1 var(--display);color:var(--deep)}
.qr{width:200px;background:#fff;border-radius:12px;padding:6px}
.qr svg{display:block;width:100%;height:auto}
.upi{font-size:15px}
.copy{all:unset;cursor:pointer;margin-left:6px;padding:4px 10px;border-radius:8px;border:1.5px solid var(--deep);color:var(--deep);font:600 13px var(--display)}
.next{display:grid;gap:12px;align-content:start}
.next label{display:grid;gap:6px;font:600 15px var(--display)}
.next .acts{display:flex;flex-wrap:wrap;gap:10px}
.recap pre{white-space:pre-wrap;background:var(--mist);border-radius:12px;padding:14px;font:400 14px/1.5 var(--text);margin:0}
.note{font-size:14px;color:var(--muted)}
@media (max-width:900px){.bk,.done-grid{grid-template-columns:minmax(0,1fr)}.bk-sum{position:static}}
@media (max-width:620px){.pick,.grid2{grid-template-columns:1fr}}
.qty input{width:72px!important;flex:none}
section[id],main[id]{scroll-margin-top:76px}

/* ---------- simulator: realistic top view ---------- */
.sim{grid-template-columns:minmax(0,1.35fr) minmax(0,1fr)}
.device.real{display:grid;grid-template-columns:minmax(0,1fr);gap:16px;background:none;box-shadow:none;padding:0}
.topview{position:relative;aspect-ratio:1335/1039;width:100%;filter:drop-shadow(0 30px 40px rgba(0,0,0,.45))}
.topview .tv-img{position:absolute;inset:0;width:100%;height:100%}
.topview canvas{position:absolute;left:28.16%;top:32.34%;width:36.7%;height:35.42%;border-radius:2px;box-shadow:0 0 18px rgba(34,211,238,.18)}
.tvknob{all:unset;position:absolute;left:68.2%;top:37.49%;width:19.48%;height:25.02%;border-radius:50%;cursor:grab;touch-action:none;display:grid;place-items:center;transition:transform .12s}
.tvknob:active{cursor:grabbing}
.tvknob img{width:100%;height:100%;pointer-events:none;user-select:none;transition:transform .08s linear}
.tvknob:focus-visible{outline:3px solid var(--yolk);outline-offset:2px}
.tvknob.pressed{transform:scale(.96)}
.tvknob.held{transform:scale(.92)}
.kbar{display:flex;flex-wrap:wrap;align-items:center;gap:12px 18px}
.kbar .kbtns{grid-template-columns:repeat(4,auto)}
.kbar .kbtns #k-hold{grid-column:auto}
.kbar .khint{max-width:none;text-align:left;flex:1 1 220px}
.setbox{display:grid;gap:10px;padding:12px 14px;border-radius:14px;background:rgba(255,255,255,.06);border:1px solid rgba(234,223,203,.18)}
.holdrow{font-size:14px;color:var(--yolk)}
.holdrow button{all:unset;cursor:pointer;margin-left:6px;text-decoration:underline;color:var(--shell)}
@media (max-width:560px){.kbar .kbtns{grid-template-columns:repeat(4,auto)}}

/* ---------- offer / notice bar ---------- */
.offerbar{background:var(--yolk);color:var(--ink);font:600 15px/1.35 var(--display);display:flex;flex-wrap:wrap;justify-content:center;gap:6px 26px;padding:10px 20px;text-align:center}
.offerbar .nt{font-weight:600}
.offerbar .of{font-weight:800}

/* ---------- reviews + feedback ---------- */
.band.shell2{background:var(--shell-2)}
.rv{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:40px;align-items:start}
.reviews{display:grid;gap:14px}
.review{margin:0;background:#fff;border-radius:18px;padding:20px 22px;border:1px solid #E5DAC4}
.review blockquote{margin:8px 0 10px;font-size:18px;line-height:1.55}
.review figcaption{font:600 15px var(--display);color:var(--muted)}
.review .rreply{margin-top:12px;padding-top:12px;border-top:1px solid #EFE6D4;font-size:15px;color:var(--muted)}
.stars{color:#D97706;letter-spacing:2px;font-size:18px}
.stars i{color:#E3D9C5;font-style:normal}
.muted0{color:var(--muted)}
form.enq.light{background:#fff;border:1px solid var(--line)}
form.enq h3{font-size:22px}
.starpick{border:0;padding:0;margin:0;display:flex;flex-direction:row-reverse;justify-content:flex-end;gap:4px}
.starpick legend{font:600 15px var(--display);margin-bottom:6px;float:left;width:100%}
.starpick input{position:absolute;opacity:0;pointer-events:none}
.starpick label{cursor:pointer;font-size:34px;line-height:1;color:#D9D2C2;padding:2px}
.starpick label:hover,.starpick label:hover~label,.starpick input:checked~label{color:#D97706}
.starpick input:focus-visible+label{outline:3px solid var(--yolk);border-radius:6px}
@media (max-width:900px){.rv{grid-template-columns:minmax(0,1fr)}}

/* ---------- ask a question ---------- */
.ask{max-width:820px;margin-top:34px;display:grid;gap:14px;background:var(--mist-2);border-radius:20px;padding:24px}
.ask h3{font-size:22px}
.askrow{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.ask label{display:grid;gap:6px;font:600 15px/1.2 var(--display)}
.ask input,.ask textarea{font:400 17px/1.4 var(--text);padding:12px 14px;border-radius:12px;border:1.5px solid var(--line);background:#fff;width:100%}
.ask textarea{min-height:90px}
.ask .btn{justify-self:start}
@media (max-width:620px){.askrow{grid-template-columns:minmax(0,1fr)}}

/* ---------- coupon + stock ---------- */
.coupon{margin-top:14px;display:grid;gap:6px}
.coupon label{font:600 14px var(--display);color:#AFC3C1}
.coupon div{display:flex;gap:8px}
.coupon input{flex:1;min-width:0;font:700 16px var(--display);padding:10px 12px;border-radius:10px;border:1.5px solid #3A4F54;background:#22353A;color:#fff}
.coupon button{all:unset;cursor:pointer;padding:0 16px;border-radius:10px;background:var(--shell);color:var(--ink);font:700 14px var(--display)}
.coupon button:focus-visible{outline:3px solid var(--yolk)}
.coupon p{margin:0;font-size:14px;min-height:1em}
.coupon p.ok{color:#86EFAC}.coupon p.bad{color:#FFB4A6}
.bk-sum .dis b{color:#86EFAC}
.stock{justify-self:start;font:700 13px var(--display);padding:4px 10px;border-radius:99px;background:#DCFCE7;color:#14532D}
.stock.s-few{background:#FEF3C7;color:#92400E}.stock.s-out{background:#FEE2E2;color:#991B1B}.stock.s-pre{background:#E0E7FF;color:#3730A3}

/* ---------- track ---------- */
.trk{max-width:860px}
.trkform .btn{justify-self:start}
.trres{margin-top:26px;background:#fff;border:1px solid var(--line);border-radius:22px;padding:26px;outline:none}
.trres h2{font-size:26px}
.steps{list-style:none;margin:22px 0 0;padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:6px;counter-reset:s}
.steps li{position:relative;padding-top:38px;counter-increment:s;font-size:15px}
.steps li::before{content:counter(s);position:absolute;top:0;left:0;width:30px;height:30px;border-radius:50%;display:grid;place-items:center;background:var(--mist-2);color:var(--muted);font:800 14px var(--display);border:2px solid var(--line)}
.steps li::after{content:"";position:absolute;top:15px;left:34px;right:4px;height:3px;background:var(--line);border-radius:2px}
.steps li:last-child::after{display:none}
.steps li.s-done::before{background:var(--deep);border-color:var(--deep);color:#fff;content:"✓"}
.steps li.s-done::after{background:var(--deep)}
.steps li.s-now::before{background:var(--yolk);border-color:#C98F0A;color:var(--ink)}
.steps b{display:block;font:700 15px/1.25 var(--display)}
.steps span{color:var(--muted);font-size:13px}
.ship{display:grid;grid-template-columns:auto 1fr;gap:6px 16px;margin:22px 0 0;padding:16px;background:var(--mist);border-radius:14px}
.ship dt{font:600 14px var(--display);color:var(--muted)}.ship dd{margin:0;font-weight:700}
.trres .err,.trkform .err{color:#B42318}
@media (max-width:620px){.steps{grid-template-columns:minmax(0,1fr);gap:14px}.steps li{padding:4px 0 0 44px}.steps li::after{display:none}}
@media (max-width:980px){.sim{grid-template-columns:minmax(0,1fr)}}
.starpick{position:relative}
.starpick input{left:0;top:0;width:1px;height:1px}
.rlabel{font:600 15px var(--display);margin:0 0 -8px}
form.enq .starpick label{display:block;font:400 38px/1 var(--display);color:#D9D2C2;cursor:pointer}
form.enq .starpick label:hover,form.enq .starpick label:hover~label,form.enq .starpick input:checked~label{color:#D97706}

/* ---------- Indian scripts: each font downloads only when a page uses that script ---------- */
@font-face{font-family:"NotoGu";src:url(../fonts/noto-sans-gujarati-gujarati-400-normal.woff2) format("woff2");font-weight:400;font-display:swap;unicode-range:U+0A80-0AFF,U+200C-200D,U+20B9,U+25CC}
@font-face{font-family:"NotoGu";src:url(../fonts/noto-sans-gujarati-gujarati-700-normal.woff2) format("woff2");font-weight:600 800;font-display:swap;unicode-range:U+0A80-0AFF,U+200C-200D,U+20B9,U+25CC}
@font-face{font-family:"NotoTa";src:url(../fonts/noto-sans-tamil-tamil-400-normal.woff2) format("woff2");font-weight:400;font-display:swap;unicode-range:U+0B80-0BFF,U+200C-200D,U+20B9,U+25CC}
@font-face{font-family:"NotoTa";src:url(../fonts/noto-sans-tamil-tamil-700-normal.woff2) format("woff2");font-weight:600 800;font-display:swap;unicode-range:U+0B80-0BFF,U+200C-200D,U+20B9,U+25CC}
@font-face{font-family:"NotoTe";src:url(../fonts/noto-sans-telugu-telugu-400-normal.woff2) format("woff2");font-weight:400;font-display:swap;unicode-range:U+0C00-0C7F,U+200C-200D,U+20B9,U+25CC}
@font-face{font-family:"NotoTe";src:url(../fonts/noto-sans-telugu-telugu-700-normal.woff2) format("woff2");font-weight:600 800;font-display:swap;unicode-range:U+0C00-0C7F,U+200C-200D,U+20B9,U+25CC}
@font-face{font-family:"NotoKn";src:url(../fonts/noto-sans-kannada-kannada-400-normal.woff2) format("woff2");font-weight:400;font-display:swap;unicode-range:U+0C80-0CFF,U+200C-200D,U+20B9,U+25CC}
@font-face{font-family:"NotoKn";src:url(../fonts/noto-sans-kannada-kannada-700-normal.woff2) format("woff2");font-weight:600 800;font-display:swap;unicode-range:U+0C80-0CFF,U+200C-200D,U+20B9,U+25CC}
@font-face{font-family:"NotoBn";src:url(../fonts/noto-sans-bengali-bengali-400-normal.woff2) format("woff2");font-weight:400;font-display:swap;unicode-range:U+0980-09FF,U+200C-200D,U+20B9,U+25CC}
@font-face{font-family:"NotoBn";src:url(../fonts/noto-sans-bengali-bengali-700-normal.woff2) format("woff2");font-weight:600 800;font-display:swap;unicode-range:U+0980-09FF,U+200C-200D,U+20B9,U+25CC}
:root{--display:"Bricolage","Baloo2","NotoGu","NotoTa","NotoTe","NotoKn","NotoBn",system-ui,sans-serif;--text:"Atkinson","Mukta","NotoGu","NotoTa","NotoTe","NotoKn","NotoBn",system-ui,sans-serif}
:root[lang="hi"],:root[lang="mr"]{--display:"Baloo2","Bricolage",system-ui,sans-serif;--text:"Mukta","Atkinson",system-ui,sans-serif}
:root:is([lang="mr"],[lang="gu"],[lang="ta"],[lang="te"],[lang="kn"],[lang="bn"]) body{font-size:17px;line-height:1.75}
:root:is([lang="mr"],[lang="gu"],[lang="ta"],[lang="te"],[lang="kn"],[lang="bn"]) :is(h1,h2,h3){line-height:1.32;letter-spacing:0}
:root:is([lang="ta"],[lang="te"],[lang="kn"],[lang="bn"],[lang="gu"]) .hero h1{font-size:clamp(34px,4.6vw,62px)}
:root:is([lang="ta"],[lang="te"],[lang="kn"],[lang="bn"],[lang="gu"]) .head h2{font-size:clamp(28px,3.6vw,44px)}

/* ---------- language picker + location note ---------- */
.langsel{position:relative;display:flex;align-items:center;gap:6px;border:1.5px solid rgba(234,223,203,.45);border-radius:999px;padding:0 6px 0 12px;color:var(--shell)}
.langsel svg{flex:none}
.langsel select{appearance:none;-webkit-appearance:none;background:transparent;border:0;color:var(--shell);font:600 14px/1 var(--display);padding:9px 22px 9px 2px;cursor:pointer;max-width:130px}
.langsel select option{color:var(--ink);background:#fff}
.langsel::after{content:"";position:absolute;right:12px;top:50%;width:7px;height:7px;border-right:2px solid var(--shell);border-bottom:2px solid var(--shell);transform:translateY(-70%) rotate(45deg);pointer-events:none}
.langsel:focus-within{outline:3px solid var(--yolk);outline-offset:2px}
.langnote{position:fixed;left:50%;bottom:18px;transform:translateX(-50%);z-index:60;background:var(--ink);color:#fff;border-radius:14px;padding:12px 14px 12px 18px;display:flex;align-items:center;gap:12px;box-shadow:0 14px 30px rgba(0,0,0,.3);max-width:calc(100vw - 24px);font-size:15px}
.langnote button{all:unset;cursor:pointer;padding:7px 12px;border-radius:10px;background:var(--shell);color:var(--ink);font:700 14px var(--display);white-space:nowrap}
.langnote button.x{background:transparent;color:#fff;font-size:20px;padding:4px 8px}
@media (max-width:560px){.langsel select{max-width:92px}.brand{font-size:18px}}
/* header: when a language's menu words don't fit, fall back to the menu button at any width */
.nav a{white-space:nowrap}
.top.compact .nav{display:none;position:absolute;left:0;right:0;top:66px;flex-direction:column;background:var(--deep-2);padding:10px 16px 18px;margin:0}
.top.compact .nav.open{display:flex}
.top.compact .nav a{padding:12px}
.top.compact .menu{display:block;margin-left:auto}
.langsel select,.langsel select option{font-family:system-ui,"Segoe UI","Nirmala UI",sans-serif}
.bk-sum .row b{white-space:normal;text-align:right;min-width:0}
h1,h2,h3,.who>div{overflow-wrap:break-word;min-width:0}
:root:is([lang="ta"],[lang="te"],[lang="kn"],[lang="bn"],[lang="gu"],[lang="mr"]) .hero h1{font-size:clamp(32px,3.7vw,52px)}
.top.compact .menu{order:3;margin-left:6px}.top.compact .langsel{margin-left:auto}
@media (max-width:960px){.top .menu{order:3;margin-left:6px}.top .langsel{margin-left:auto}}