/* KAAYAREST / Midnight Loom v2 */

@font-face{font-family:'Cormorant';src:url('../fonts/cormorant-normal-latin.woff2') format('woff2');font-weight:300 700;font-style:normal;font-display:swap}
@font-face{font-family:'Cormorant';src:url('../fonts/cormorant-italic-latin.woff2') format('woff2');font-weight:300 700;font-style:italic;font-display:swap}
@font-face{font-family:'Montserrat';src:url('../fonts/montserrat-normal-latin.woff2') format('woff2');font-weight:300 800;font-style:normal;font-display:swap}
@font-face{font-family:'Montserrat';src:url('../fonts/montserrat-italic-latin.woff2') format('woff2');font-weight:300 800;font-style:italic;font-display:swap}
@font-face{font-family:'Tiro Devanagari Hindi';src:url('../fonts/tiro-normal-deva.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap;unicode-range:U+0900-097F,U+1CD0-1CF9,U+200C-200D,U+20A8,U+20B9,U+25CC,U+A830-A839,U+A8E0-A8FF}
@font-face{font-family:'Tiro Devanagari Hindi';src:url('../fonts/tiro-normal-latin.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap;unicode-range:U+0000-00FF}

:root{
  /* fixed, never flips: the logo plaque, the product cream, the night band */
  --dawn:#EDE9DE; --dawn-ink:#141833; --dawn-mute:rgba(20,24,51,.72);
  --night-bg:#0B0E1F; --night-ink:#F2F0E8; --night-muted:#96A0BE;
  --night-line:rgba(242,240,232,.13);
  --brand:#2B3164;
  --disp:'Cormorant',Georgia,serif;
  --body:'Montserrat',system-ui,-apple-system,sans-serif;
  --deva:'Tiro Devanagari Hindi','Cormorant',serif;
  --ease:cubic-bezier(.16,1,.3,1);
  --gut:clamp(20px,4.5vw,68px);
  --max:1360px; --nav:88px;
}

:root,[data-theme="night"]{
  --bg:#0B0E1F; --surface:#141935; --surface2:#1E244A;
  --ink:#F2F0E8; --muted:#96A0BE;
  --accent:#D0953E; --accent-hi:#E6B25F;
  --line:rgba(242,240,232,.13);
  --nav-bg:rgba(11,14,31,.86);
  --btn-bg:#D0953E; --btn-bg-hi:#E6B25F; --btn-ink:#141833;
  --invert-bg:#EDE9DE; --invert-ink:#141833; --invert-mute:rgba(20,24,51,.72);
  --grain:.4;
  --room-glow:rgba(208,149,62,.2);
}
[data-theme="day"]{
  --bg:#EDE9DE; --surface:#E4DED0; --surface2:#D8D0BE;
  --ink:#141833; --muted:#4E5570;
  --accent:#9A6B1C; --accent-hi:#B07C24;
  --line:rgba(20,24,51,.16);
  --nav-bg:rgba(237,233,222,.88);
  --btn-bg:#2B3164; --btn-bg-hi:#3A4280; --btn-ink:#F2F0E8;
  --invert-bg:#0B0E1F; --invert-ink:#F2F0E8; --invert-mute:rgba(242,240,232,.74);
  --grain:.16;
  --room-glow:rgba(208,149,62,.34);
}

:where(*,*::before,*::after){box-sizing:border-box}
:where(html,body,h1,h2,h3,h4,p,figure,blockquote,ul,ol,dl,dd){margin:0;padding:0}
:where(ul,ol){list-style:none}
:where(img,video,svg,canvas){display:block;max-width:100%}
:where(a){color:inherit;text-decoration:none}
:where(button){font:inherit;color:inherit;background:none;border:0}

html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body.kr{background:var(--bg);color:var(--ink);transition:background-color .6s ease,color .6s ease;font-family:var(--body);
  font-size:clamp(14px,.95vw,16px);line-height:1.68;font-weight:400;letter-spacing:.002em;
  -webkit-font-smoothing:antialiased;overflow-x:hidden}
body.kr::after{content:"";position:fixed;inset:0;z-index:90;pointer-events:none;opacity:var(--grain,.4);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E")}
::selection{background:var(--accent);color:var(--dawn-ink)}

.wrap{width:100%;max-width:var(--max);margin:0 auto;padding-inline:var(--gut)}
.lede{max-width:62ch;color:var(--muted)}
.rule{height:1px;background:var(--line);border:0}

h1,h2,h3,.disp{font-family:var(--disp);font-weight:600;line-height:1.04;letter-spacing:-.012em}
h1{font-size:clamp(54px,8.6vw,152px);line-height:.95;font-weight:600}
h2{font-size:clamp(40px,5.8vw,96px);line-height:1.02}
h3{font-size:clamp(22px,2.1vw,33px);line-height:1.16;letter-spacing:-.005em;font-weight:600}
em{font-style:italic}

/* Reading progress */
.prog{position:fixed;top:0;left:0;right:0;height:2px;z-index:80;pointer-events:none}
.prog i{display:block;height:100%;background:var(--accent);transform:scaleX(0);transform-origin:left}

/* Buttons */
.btn{display:inline-flex;align-items:center;gap:10px;border-radius:999px;cursor:pointer;
  min-height:48px;padding:13px 28px;font-size:13px;font-weight:600;letter-spacing:.04em;white-space:nowrap;
  transition:transform .35s var(--ease),background-color .25s ease,color .25s ease,border-color .25s ease}
.btn--primary{background:var(--btn-bg);color:var(--btn-ink)}
.btn--primary:hover{transform:translateY(-2px);background:var(--btn-bg-hi)}
.btn--ghost{border:1px solid var(--line);color:var(--ink)}
.btn--ghost:hover{transform:translateY(-2px);border-color:var(--accent);color:var(--accent-hi)}
.btn:active{transform:translateY(0) scale(.98)}
.btn:focus-visible{outline:2px solid var(--accent-hi);outline-offset:3px}
.btn .arw{transition:transform .35s var(--ease)}
.btn:hover .arw{transform:translateX(5px)}

/* Nav */
.nav{position:fixed;inset:2px 0 auto 0;z-index:70;height:var(--nav);display:flex;align-items:center;
  border-bottom:1px solid transparent;transition:background-color .5s ease,border-color .5s ease}
.nav.is-stuck{background:var(--nav-bg);backdrop-filter:blur(16px);border-bottom-color:var(--line)}
.nav__in{display:flex;align-items:center;justify-content:space-between;gap:32px;width:100%}
.nav__logo{display:inline-flex;align-items:center;background:var(--dawn);border-radius:2px;
  padding:9px 18px;transition:transform .4s var(--ease)}
.nav__logo:hover{transform:translateY(-1px)}
.nav__logo img{height:40px;width:auto}
.nav__links{display:flex;align-items:center;gap:30px;font-size:12.5px;font-weight:500;letter-spacing:.05em;text-transform:uppercase;color:var(--muted)}
.nav__links a{position:relative;padding:6px 0;transition:color .3s ease}
.nav__links a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--accent);
  transform:scaleX(0);transform-origin:left;transition:transform .45s var(--ease)}
.nav__links a:hover{color:var(--ink)}
.nav__links a:hover::after{transform:scaleX(1)}
.nav .btn{min-height:42px;padding:10px 20px;font-size:12px}
/* Reveal primitives (visible without JS) */
.js .rv{opacity:0;transform:translateY(24px);transition:opacity .9s var(--ease),transform 1s var(--ease)}
.js .rv.in{opacity:1;transform:none}
.js .rv-d1{transition-delay:.09s}.js .rv-d2{transition-delay:.18s}
.js .rv-d3{transition-delay:.27s}.js .rv-d4{transition-delay:.36s}
.mask{display:block;overflow:hidden;padding-bottom:.1em}
.js .mask>span{display:block;transform:translateY(106%);transition:transform 1.2s var(--ease)}
.js .mask.in>span{transform:none}
.js .mask.d1>span{transition-delay:.12s}
.js .mask.d2>span{transition-delay:.24s}

/* Hero: live pocket spring surface */
.hero{position:relative;min-height:100svh;display:flex;flex-direction:column;overflow:hidden}
.hero__copy{position:relative;z-index:3;flex:0 0 auto;
  padding-top:calc(var(--nav) + clamp(28px,7vh,86px));padding-bottom:clamp(18px,3vh,34px)}
.hero__copy h1{max-width:15ch}
.hero__copy h1 .gold{color:var(--accent-hi)}
.hero__row{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;
  gap:clamp(20px,3vw,56px);margin-top:clamp(20px,2.6vh,32px)}
.hero__lede{color:var(--muted);max-width:46ch;font-size:clamp(15px,1.15vw,18px)}
.hero__act{display:flex;flex-wrap:wrap;gap:12px}

.bed{position:relative;flex:1 1 auto;min-height:min(42vh,430px);touch-action:pan-y;cursor:crosshair}
.bed canvas{position:absolute;inset:0;z-index:1;width:100%;height:100%}
.bed::before{content:"";position:absolute;inset:0 0 auto 0;height:16%;z-index:3;pointer-events:none;
  background:linear-gradient(180deg,var(--bg),transparent)}
.bed::after{content:"";position:absolute;left:50%;top:6%;width:86%;height:88%;z-index:0;pointer-events:none;
  transform:translateX(-50%);
  background:radial-gradient(ellipse at 50% 22%,var(--room-glow),rgba(208,149,62,0) 66%)}
.bed__hint{position:absolute;left:var(--gut);bottom:clamp(16px,3vh,30px);z-index:3;
  font-size:13px;color:var(--muted);letter-spacing:.02em;max-width:30ch;
  transition:opacity .6s ease}
.bed.is-touched .bed__hint{opacity:.35}

.ring{position:fixed;top:0;left:0;z-index:75;width:46px;height:46px;margin:-23px 0 0 -23px;
  border:1px solid var(--accent);border-radius:999px;pointer-events:none;opacity:0;
  transition:opacity .3s ease,transform .18s var(--ease)}
.ring.on{opacity:.85}
.ring.press{border-color:var(--accent-hi);border-width:2px}

/* Film band */
.film{position:relative;padding-block:clamp(70px,9vw,140px);background:var(--bg)}
.film__frame{position:relative;width:100%;border-radius:4px;overflow:hidden;background:var(--invert-bg);
  aspect-ratio:16/9;box-shadow:0 60px 120px -60px rgba(0,0,0,.9)}
.film__frame video{width:100%;height:100%;object-fit:cover}
.film__frame::after{content:"";position:absolute;inset:0;border:1px solid rgba(208,149,62,.45);border-radius:4px;pointer-events:none}
.film__grid{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);
  gap:clamp(28px,5vw,80px);align-items:center}
.film__grid h2{max-width:9ch}
.film__frame{margin-right:calc(-1 * var(--gut) - 2vw)}
/* Sections */
.sec{padding-block:clamp(88px,12vw,190px)}
.sec__head{max-width:min(100%,760px);margin-bottom:clamp(46px,6vw,96px)}
.sec__head h2{margin-bottom:20px}

/* Construction: pinned exploded stack */
.build{background:linear-gradient(180deg,var(--bg) 0%,var(--surface) 42%,var(--bg) 100%)}
.build__grid{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:clamp(36px,6vw,100px);align-items:start}
.explode{position:sticky;top:calc(var(--nav) + 4vh);aspect-ratio:1/.92;
  display:flex;align-items:center;justify-content:center;perspective:1500px}
.explode__stack{position:relative;width:74%;height:52%;transform-style:preserve-3d;
  transform:rotateX(58deg) rotateZ(-36deg)}
.slab{position:absolute;inset:0;border-radius:2px;border:1px solid var(--line);
  box-shadow:0 22px 40px -26px rgba(0,0,0,.95);
  transition:transform 1s var(--ease),border-color .6s ease,box-shadow .6s ease}
.slab.is-on{border-color:var(--accent);box-shadow:0 26px 60px -24px rgba(208,149,62,.5)}
.slab--1{background:var(--dawn);background-image:radial-gradient(circle,rgba(20,24,51,.34) 1.4px,transparent 1.5px);background-size:26px 26px}
.slab--2{background:var(--surface2)}
.slab--3{background:var(--surface);background-image:radial-gradient(circle,rgba(242,240,232,.26) 3px,transparent 3.5px);background-size:34px 34px}
.slab--4{background:var(--surface2);box-shadow:inset 0 0 0 6px rgba(208,149,62,.3),0 22px 40px -26px rgba(0,0,0,.95)}
.slab--5{background:var(--surface);background-image:linear-gradient(90deg,rgba(242,240,232,.09) 1px,transparent 1px);background-size:16px 100%}
.explode__cap{position:absolute;left:0;bottom:0;font-size:12.5px;color:var(--muted);letter-spacing:.03em}

.steps{position:relative;padding-left:clamp(22px,2.4vw,38px)}
.steps::before{content:"";position:absolute;left:0;top:0;bottom:0;width:1px;background:var(--line)}
.steps__rail{position:absolute;left:0;top:0;width:2px;background:var(--accent);
  transition:transform .7s var(--ease),height .7s var(--ease)}
.step{padding-block:clamp(26px,3.2vw,42px);border-bottom:1px solid var(--line)}
.step:first-child{padding-top:0}
.step:last-child{border-bottom:0}
.step h3{color:var(--muted);margin-bottom:12px;transition:color .5s ease,transform .7s var(--ease);transform-origin:left}
.step.is-on h3{color:var(--ink);transform:scale(1.06)}
.step p{color:var(--muted);max-width:50ch;opacity:.6;transition:opacity .5s ease}
.step.is-on p{opacity:1}

/* Craft bento */
.bento{display:grid;grid-template-columns:repeat(12,1fr);gap:clamp(12px,1.2vw,20px)}
.cell{position:relative;border-radius:4px;padding:clamp(26px,2.7vw,46px);display:flex;flex-direction:column;
  justify-content:flex-end;gap:14px;overflow:hidden;
  transition:transform .7s var(--ease)}
.cell:hover{transform:translateY(-4px)}
.cell p{font-size:15px;max-width:42ch;color:var(--muted)}
.cell--a{grid-column:span 7;grid-row:span 3;background:var(--surface2);min-height:clamp(300px,32vw,440px)}
.cell--b{grid-column:span 5;grid-row:span 4;background:var(--invert-bg);color:var(--invert-ink);min-height:clamp(300px,36vw,540px)}
.cell--b p{color:var(--invert-mute)}
.cell--c{grid-column:span 7;grid-row:span 2;background:var(--surface);border:1px solid var(--line);min-height:210px}
.cell--d{grid-column:span 12;background:transparent;border-top:1px solid var(--line);border-radius:0;
  padding-inline:0;flex-direction:row;align-items:baseline;justify-content:space-between;
  gap:clamp(20px,4vw,64px);padding-block:clamp(26px,2.6vw,40px)}
.cell--d:hover{transform:none}
.cell--d p{max-width:58ch}
.cell .art{position:absolute;inset:0;opacity:.5;pointer-events:none}
.cell--b .art{opacity:.42}

/* Night and morning, a hard split */
.night{position:relative;display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);
  min-height:86svh;align-items:stretch;overflow:hidden}
.night__a{background:var(--night-bg);color:var(--night-ink);display:flex;flex-direction:column;
  justify-content:center;align-items:flex-end;text-align:right;
  gap:clamp(28px,3.2vw,48px);padding:clamp(64px,8vw,132px) clamp(24px,4.5vw,76px)}
.night__a h2{font-size:clamp(34px,4vw,66px);max-width:11ch}
.night__b{position:relative;background:var(--dawn);color:var(--dawn-ink);display:flex;
  flex-direction:column;justify-content:center;gap:clamp(22px,2.6vw,36px);
  padding:clamp(64px,8vw,132px) clamp(24px,5vw,96px);border-left:1px solid #D0953E}
.night__b::before{content:"";position:absolute;left:0;bottom:0;width:82%;height:76%;
  pointer-events:none;
  background:radial-gradient(ellipse at 6% 100%,rgba(208,149,62,.3),rgba(208,149,62,0) 64%)}
.night__b>*{position:relative;z-index:2}
.night__b h2{font-size:clamp(42px,6vw,100px);max-width:10ch}
.night__b p{max-width:44ch;color:var(--dawn-mute);font-size:clamp(15px,1.15vw,18px)}

.cond{display:flex;flex-direction:column;width:100%;max-width:400px}
.cond li{display:flex;flex-direction:row-reverse;gap:16px;align-items:flex-start;
  padding-block:clamp(14px,1.4vw,20px);border-bottom:1px solid var(--night-line);
  color:var(--night-muted);font-size:15.5px;line-height:1.45}
.cond li:last-child{border-bottom:0}
.cond li::before{content:"";flex:0 0 auto;width:24px;height:1px;background:#D0953E;margin-top:.72em}
/* Devanagari */
.andaaz{position:relative;text-align:center;background:var(--bg);overflow:hidden}
.andaaz::before{content:"";position:absolute;left:50%;top:50%;width:110vw;height:60vw;
  transform:translate(-50%,-50%);pointer-events:none;
  background:radial-gradient(ellipse at 50% 50%,rgba(208,149,62,.16),rgba(208,149,62,0) 60%)}
.andaaz .in-wrap{position:relative;z-index:2}
.andaaz .deva{font-family:var(--deva);font-size:clamp(46px,10vw,168px);line-height:1.32;color:var(--accent-hi);
  display:flex;flex-wrap:wrap;justify-content:center;gap:0 .26em}
.andaaz .deva span{display:inline-block}
.js .andaaz .deva span{opacity:0;transform:translateY(42px) rotate(2deg);
  transition:opacity .9s var(--ease),transform 1.15s var(--ease)}
.js .andaaz .deva.in span{opacity:1;transform:none}
.js .andaaz .deva.in span:nth-child(2){transition-delay:.13s}
.js .andaaz .deva.in span:nth-child(3){transition-delay:.26s}
.js .andaaz .deva.in span:nth-child(4){transition-delay:.39s}
.andaaz .roman{margin-top:10px;font-size:13px;letter-spacing:.24em;text-transform:uppercase;color:var(--muted)}
.andaaz .body{margin:clamp(28px,3.4vw,46px) auto 0;max-width:58ch;color:var(--muted)}

/* Close */
.close{border-top:1px solid var(--line);background:var(--surface)}
.close__in{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(30px,5vw,80px);align-items:end}
.close h2{max-width:14ch}
.close__side{display:flex;flex-direction:column;gap:20px;align-items:flex-start}
.close__side p{color:var(--muted);font-size:15px}
.foot{border-top:1px solid var(--line);padding-block:36px;background:var(--bg)}
.foot__in{display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;
  font-size:13px;color:var(--muted)}
.foot__mark{display:inline-flex;background:var(--dawn);border-radius:2px;padding:14px 24px}
.foot__mark img{height:62px;width:auto}
/* Responsive */
@media(max-width:1024px){
  :root{--nav:76px}
  .hero__copy h1{max-width:none}
  .hero__row{align-items:flex-start;flex-direction:column}
  .build__grid{grid-template-columns:1fr;gap:48px}
  .explode{position:relative;top:auto;max-width:520px;margin-inline:auto;aspect-ratio:1/.8}
  .close__in{grid-template-columns:1fr}
  .film__grid{grid-template-columns:1fr;gap:32px}
  .film__frame{margin-right:0}
  .cell--a,.cell--b,.cell--c{grid-column:span 12;grid-row:auto;min-height:270px}
  .cell--d{flex-direction:column;align-items:flex-start;gap:12px}
}
@media(max-width:760px){
  .nav__links{display:none}
  .bed{min-height:44vh}
  .film__frame{aspect-ratio:4/3}
  .ring{display:none}
  .explode__stack{width:80%;height:48%}
  .hero__act .btn{flex:1 1 auto;justify-content:center}
}
@media(hover:none){
  .ring{display:none}
  .cell:hover{transform:none}
}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .js .rv,.js .mask>span,.js .andaaz .deva span{opacity:1!important;transform:none!important;transition:none!important}
  .slab,.step h3,.btn,.cell,.nav__links a::after{transition:none!important}
  .cell:hover,.btn:hover{transform:none!important}
  .dawn{--t:1!important}
  .prog,.ring{display:none}
}
@media(max-height:780px) and (min-width:1025px){
  .hero__copy{padding-top:calc(var(--nav) + 22px);padding-bottom:14px}
  .hero h1{font-size:clamp(40px,5.4vw,84px)}
  .bed{min-height:min(38vh,360px)}
}

@media(max-width:900px){
  .night{grid-template-columns:1fr;min-height:0}
  .night__a{align-items:flex-start;text-align:left}
  .night__a h2,.night__b h2{max-width:none}
  .night__b{border-left:0;border-top:1px solid #D0953E}
  .cond{max-width:none}
  .cond li{flex-direction:row}
}

/* Day and night toggle */
.mode{position:relative;display:inline-flex;align-items:center;border:1px solid var(--line);
  border-radius:999px;padding:4px;cursor:pointer;background:transparent;transition:border-color .3s ease}
.mode:hover{border-color:var(--accent)}
.mode:focus-visible{outline:2px solid var(--accent-hi);outline-offset:3px}
.mode__knob{position:absolute;top:4px;left:4px;width:34px;height:34px;border-radius:999px;
  background:var(--btn-bg);transition:transform .5s var(--ease),background-color .4s ease}
[data-theme='day'] .mode__knob{transform:translateX(34px)}
.mode i{position:relative;z-index:2;display:grid;place-items:center;width:34px;height:34px}
.mode svg{width:17px;height:17px;display:block;transition:stroke .4s ease}
.mode .ico-moon{stroke:var(--btn-ink)}
.mode .ico-sun{stroke:var(--muted)}
[data-theme='day'] .mode .ico-moon{stroke:var(--muted)}
[data-theme='day'] .mode .ico-sun{stroke:var(--btn-ink)}
@media(max-width:430px){.nav .btn--primary{display:none}}
.nav__end{display:flex;align-items:center;gap:clamp(10px,1.4vw,18px)}