/* Aspen Cleaners
   Palette (strict): forest #022E1C, gold #D49001, ivory #FAF8F3, soft white #F7F7F7.
   Every transparent tint is made from these four colours.
   Type (sans-serif only): Cabinet Grotesk 800/700 headings, General Sans text, Clash Display numbers.
   Motion: one language everywhere. Text and blocks rise out of a mask, one after another, as they
   come into view (the "story" reveal). The footer is revealed underneath the last section. */

@font-face { font-family: "Cabinet Grotesk"; src: url("../fonts/cabinet-grotesk-700.woff2") format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Cabinet Grotesk"; src: url("../fonts/cabinet-grotesk-800.woff2") format("woff2"); font-weight: 800; font-display: swap; }
@font-face { font-family: "General Sans"; src: url("../fonts/general-sans-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "General Sans"; src: url("../fonts/general-sans-500.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "General Sans"; src: url("../fonts/general-sans-600.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Clash Display"; src: url("../fonts/clash-display-600.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Clash Display"; src: url("../fonts/clash-display-700.woff2") format("woff2"); font-weight: 700; font-display: swap; }

:root {
  --forest: #022E1C;
  --gold: #D49001;
  --ivory: #FAF8F3;
  --white: #F7F7F7;

  --forest-70: rgb(2 46 28 / .74);
  --forest-50: rgb(2 46 28 / .56);
  --forest-08: rgb(2 46 28 / .07);
  --gold-20: rgb(212 144 1 / .2);
  --ivory-70: rgb(250 248 243 / .76);
  --ivory-80: rgb(250 248 243 / .86);

  --f-head: "Cabinet Grotesk", ui-sans-serif, system-ui, sans-serif;
  --f-body: "General Sans", ui-sans-serif, system-ui, sans-serif;
  --f-num: "Clash Display", "Cabinet Grotesk", ui-sans-serif, system-ui, sans-serif;

  --t-1: clamp(46px, 6.8vw, 104px);
  --t-2: clamp(34px, 4.4vw, 64px);
  --t-3: clamp(21px, 1.7vw, 26px);
  --t-4: clamp(16px, 1.15vw, 18px);
  --t-5: 14px;

  --pad: clamp(20px, 5vw, 72px);
  --max: 1280px;
  --r: 24px;
  --ease: cubic-bezier(.22, 1, .36, 1);
  --ease-in-out: cubic-bezier(.65, 0, .35, 1);
  --top-h: 72px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: var(--top-h); }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
html.is-locked, html.is-locked body { overflow: hidden; }
body {
  margin: 0; background: var(--ivory); color: var(--forest);
  font: 400 var(--t-4)/1.6 var(--f-body); -webkit-font-smoothing: antialiased; overflow-x: clip;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
h1, h2, h3 { font-family: var(--f-head); font-weight: 800; margin: 0; letter-spacing: -0.03em; line-height: .98; text-wrap: balance; }
h1 { font-size: var(--t-1); }
h2 { font-size: var(--t-2); }
h3 { font-size: var(--t-3); font-weight: 800; letter-spacing: -0.02em; line-height: 1.1; }
p { margin: 0; }
ul, ol { list-style: none; margin: 0; padding: 0; }
figure { margin: 0; }
sup { font-size: .55em; color: var(--gold); }
kbd { font: 600 12px/1 var(--f-body); padding: 4px 7px; border-radius: 6px; background: var(--forest-08); color: inherit; }
::selection { background: var(--gold); color: var(--forest); }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 4px; border-radius: 6px; }
img, svg, picture, canvas, .brand { -webkit-user-select: none; user-select: none; -webkit-user-drag: none; -webkit-touch-callout: none; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- woven background ---------- */
.weave { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; }
main, .top { position: relative; z-index: 1; }

/* ---------- header ---------- */
.top { position: fixed; inset: 0 0 auto 0; z-index: 40; height: var(--top-h); transition: transform .5s var(--ease), background-color .4s; }
.top.is-solid { background: var(--ivory-80); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
.top.is-hidden { transform: translateY(-100%); }
.top__in { max-width: calc(var(--max) + 2 * var(--pad)); margin: 0 auto; height: 100%; padding: 0 var(--pad); display: flex; align-items: center; gap: 32px; }
.brand { display: inline-flex; align-items: center; height: 40px; }
.brand__logo { display: block; height: 50px; width: auto; }
.brand__logo--light { display: none; }
.is-menu .brand__logo--dark { display: none; }
.is-menu .brand__logo--light { display: block; }
.nav { display: flex; gap: 24px; margin-left: auto; font-size: 15px; font-weight: 500; }
.nav a { position: relative; padding: 6px 0; }
.nav a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--gold); transform: scaleX(0); transform-origin: right; transition: transform .45s var(--ease); }
.nav a:hover::after { transform: scaleX(1); transform-origin: left; }
.menu-btn { display: none; align-items: center; height: 44px; padding: 0 18px; border: 0; border-radius: 14px; cursor: pointer;
  background: var(--forest); color: var(--ivory); font: 700 15px/1 var(--f-head); transition: background-color .3s, color .3s; }
.is-menu .menu-btn { background: var(--gold); color: var(--forest); }
.menu-btn:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }
.menu {
  position: fixed; inset: 0; z-index: 39; display: flex; flex-direction: column; justify-content: space-between; gap: 32px;
  padding: calc(var(--top-h) + 28px) var(--pad) calc(32px + env(safe-area-inset-bottom)); background: var(--forest); color: var(--ivory);
  clip-path: circle(0% at calc(100% - var(--pad) - 36px) calc(var(--top-h) / 2)); transition: clip-path .6s var(--ease-in-out); overflow-y: auto;
}
.menu.is-open { clip-path: circle(150% at calc(100% - var(--pad) - 36px) calc(var(--top-h) / 2)); }
.menu[hidden] { display: none; }
.menu__nav { display: grid; gap: 4px; }
.menu__nav a { font: 800 clamp(38px, 11vw, 64px)/1.14 var(--f-head); letter-spacing: -0.035em; opacity: 0; transform: translateY(40%);
  transition: opacity .5s var(--ease), transform .6s var(--ease), color .3s; }
.menu.is-open .menu__nav a { opacity: 1; transform: none; transition-delay: calc(140ms + var(--k) * 55ms); }
.menu__nav a:hover, .menu__nav a:focus-visible { color: var(--gold); outline: none; }
.menu__foot { display: grid; gap: 16px; justify-items: start; opacity: 0; transition: opacity .5s .45s; }
.menu.is-open .menu__foot { opacity: 1; }
.menu__foot p { color: var(--ivory-70); font-size: 15px; }
.menu__foot p a { color: var(--ivory); font-weight: 600; }
.menu__book { min-height: 54px; padding: 0 26px; background: var(--gold); color: var(--forest); border-radius: 16px; }
.menu__book::before { background: var(--ivory); }
.is-menu { overflow: hidden; }
.is-menu .top { background: none; backdrop-filter: none; -webkit-backdrop-filter: none; transform: none; }
.is-menu .top .btn--sm, .is-menu .wa-fab, .is-menu .chip { opacity: 0; pointer-events: none; }

/* ---------- buttons and links ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 54px; padding: 0 28px; border-radius: 14px; border: 0; cursor: pointer;
  font: 700 17px/1 var(--f-head); letter-spacing: -0.005em; white-space: nowrap;
  position: relative; overflow: hidden; isolation: isolate;
  transition: transform .4s var(--ease), color .35s;
}
.btn svg { width: 18px; height: 18px; fill: currentColor; }
.btn::before { content: ""; position: absolute; inset: 0; z-index: -1; transform: translateY(101%); transition: transform .5s var(--ease); border-radius: inherit; }
.btn:hover::before { transform: translateY(0); }
.btn:active { transform: scale(.97); }
.btn--green { background: var(--forest); color: var(--ivory); }
.btn--green::before { background: var(--gold); }
.btn--green:hover { color: var(--forest); }
.btn--gold { background: var(--gold); color: var(--forest); }
.btn--gold::before { background: var(--forest); }
.btn--gold:hover { color: var(--ivory); }
.btn--ghost { background: var(--forest-08); color: var(--forest); }
.btn--ghost::before { background: var(--forest); }
.btn--ghost:hover { color: var(--ivory); }
.btn--sm { min-height: 42px; padding: 0 18px; font-size: 15px; border-radius: 12px; }
.link { font-weight: 600; position: relative; padding-bottom: 3px; }
.link::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--gold); transform-origin: left; transition: transform .45s var(--ease); }
.link:hover::after { transform: scaleX(0); transform-origin: right; }
.magnet { will-change: transform; }

/* ---------- section basics ---------- */
section { padding: clamp(84px, 11vw, 150px) var(--pad); position: relative; }
.head { max-width: var(--max); margin: 0 auto clamp(40px, 5vw, 72px); text-align: center; }
.head__sub { margin-top: 18px; color: var(--forest-70); font-size: clamp(17px, 1.35vw, 20px); }
.head--left { text-align: left; margin-left: 0; }

/* ---------- the one reveal language: rise out of a mask, one after another ---------- */
.split .w { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .1em; margin-bottom: -.1em; }
.split .w > span { display: inline-block; transform: translateY(108%) rotate(4deg); transform-origin: 0 100%; transition: transform 1s var(--ease); transition-delay: calc(var(--i) * 55ms + var(--d, 0ms)); }
.split.is-in .w > span { transform: none; }

.rise { display: block; overflow: hidden; padding-bottom: .12em; margin-bottom: -.12em; }
.rise > span { display: block; transform: translateY(110%); transition: transform 1s var(--ease); transition-delay: var(--d, .15s); }
.rise.is-in > span { transform: none; }

.rise-block { clip-path: inset(0 0 100% 0); transform: translateY(46px); transition: clip-path 1s var(--ease), transform 1s var(--ease); transition-delay: var(--d, 0ms); }
.rise-block.is-in { clip-path: inset(-30% -30% -30% -30%); transform: none; }

.rise-img { clip-path: inset(100% 0 0 0 round var(--r)); transition: clip-path 1.2s var(--ease-in-out); transition-delay: var(--d, 0ms); }
.rise-img.is-in { clip-path: inset(0 0 0 0 round var(--r)); }
.rise-img img { transform: translateY(14%) scale(1.06); transition: transform 1.4s var(--ease); transition-delay: var(--d, 0ms); }
.rise-img.is-in img { transform: none; }

/* big numbers */
.bignum { display: block; font: 700 clamp(84px, 9vw, 150px)/.82 var(--f-num); color: var(--gold); letter-spacing: -0.04em; }
.numlist { counter-reset: n; display: grid; gap: 16px; }
.numlist li { counter-increment: n; display: grid; grid-template-columns: 64px 1fr; align-items: center; font-size: 17px; font-weight: 500; }
.numlist li::before { content: counter(n); font: 700 48px/1 var(--f-num); color: var(--gold); letter-spacing: -0.03em; }
.numlist--sm li { grid-template-columns: 46px 1fr; font-size: 16px; }
.numlist--sm li::before { font-size: 34px; }

/* ---------- 1. hero: a garment rail in jaali sunlight (hero.js) ---------- */
.hero { position: relative; display: grid; grid-template-rows: auto 1fr; height: var(--vh, 100svh); min-height: 640px; padding: 0; overflow: clip; }
.finale__media { position: absolute; inset: 0; overflow: hidden; }
.finale__media img { width: 100%; height: 100%; object-fit: cover; object-position: 66% 50%; }
.steam { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }

/* sunlight through a carved stone jaali, drifting slowly as the sun moves; the same light falls on the clothes */
.hero__light { position: absolute; inset: -8%; z-index: 0; pointer-events: none; mix-blend-mode: multiply; opacity: .55;
  transform: translate3d(calc(var(--mx, 0) * -22px), calc(var(--my, 0) * -14px), 0); transition: transform 1.2s var(--ease); }
.hero__light img { width: 100%; height: 100%; object-fit: cover; animation: sun 30s var(--ease-in-out) infinite alternate; will-change: transform; }
.hero__light--over { z-index: 3; opacity: .32; }
@keyframes sun { from { transform: translate3d(-3%, -2%, 0) scale(1.05) rotate(-1.2deg); } to { transform: translate3d(3%, 2%, 0) scale(1.12) rotate(1.2deg); } }
.hero__fx { position: absolute; inset: 0; z-index: 4; pointer-events: none; }

.hero__copy { position: relative; z-index: 5; width: 100%; max-width: calc(var(--max) + 2 * var(--pad)); margin: 0 auto; text-align: center; padding: calc(var(--top-h) + clamp(18px, 6vh, 64px)) var(--pad) 0; }
/* one size for both lines: "Freshly Cleaned Clothes." is 9.97em wide, so it always fits on one line */
.tagline { --hs: min(calc((100vw - 2 * var(--pad)) / 10.5), 116px); font-size: var(--hs); line-height: 1; letter-spacing: -0.045em; }
.tagline__l1, .tagline__l2 { display: block; white-space: nowrap; font: inherit; letter-spacing: inherit; }
.tagline__l2 { margin-top: .02em; }
.rail { position: relative; z-index: 2; margin: clamp(40px, 8.5vh, 96px) 0 clamp(14px, 3vh, 30px); min-height: 0; }
.rail__bar { position: absolute; left: 0; right: 0; top: calc(var(--hook, 9px) - var(--bar, 7px) / 2); height: var(--bar, 5px); border-radius: 9px; background: var(--forest); box-shadow: inset 0 1px 0 rgb(250 248 243 / .35), 0 3px 6px rgb(2 46 28 / .18); /* taste-skill-ignore */ }
.rail__track { list-style: none; margin: 0; padding: 0; position: absolute; inset: 0; }
.hanger { position: absolute; left: 0; top: 0; transform-origin: 50% var(--hook, 9px); will-change: transform; }
.hanger img { display: block; width: 100%; height: 100%; user-select: none; -webkit-user-select: none; }

/* ---------- giant words/* ---------- giant words that drift across each section and hand over to the next ---------- */
.bigword {
  position: absolute; left: 0; top: var(--bw-top, 46%); z-index: 0; pointer-events: none; white-space: nowrap;
  font: 800 clamp(120px, 21vw, 360px)/.8 var(--f-head); letter-spacing: -0.05em; color: var(--forest-08);
  transform: translate(calc(var(--bx, 0) * 1vw), -50%);
}
/* content sits above the giant word; only plain blocks are touched (never sticky or absolute ones) */
:is(.how, .versus, .pick, .stories, .tutorials, .faq) > :is(.head, ul, ol, div, figure, .vs, .cases, .tuts, .faq__in, .pick__in) { position: relative; z-index: 1; }
.services > .bigword { z-index: auto; }
.bigword { will-change: transform; }
:has(> .bigword) { overflow-x: clip; }
.services .bigword, .stories .bigword { color: rgb(250 248 243 / .06); }
.how .bigword { color: rgb(2 46 28 / .1); }

/* ---------- cloth edges: a section rises over the last one with a cut-cloth top edge (links.js) ---------- */
[data-edge] { --A: clamp(28px, 5vw, 72px); margin-top: calc(-1 * var(--A)); padding-top: calc(clamp(84px, 11vw, 150px) + var(--A)); }

/* ---------- section counter (Puture) ---------- */
.chip {
  position: fixed; left: var(--pad); bottom: 24px; z-index: 30; display: flex; align-items: center; gap: 10px;
  padding: 7px 14px 7px 7px; border-radius: 14px; background: var(--forest); color: var(--ivory);
  opacity: 0; transform: translateY(16px); transition: opacity .4s, transform .5s var(--ease); pointer-events: none;
}
.chip.is-on { opacity: 1; transform: none; }
.chip__num { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 9px; background: var(--gold); color: var(--forest); overflow: hidden; font: 700 15px/1 var(--f-num); }
.chip__name { height: 18px; overflow: hidden; font: 600 14px/18px var(--f-body); }
.chip__roll { display: block; transition: transform .6s var(--ease); }
.chip__roll > span { display: block; text-align: center; }
.chip__num .chip__roll > span { height: 34px; line-height: 34px; }
.chip__name .chip__roll > span { height: 18px; text-align: left; white-space: nowrap; }
.is-locked .chip, .is-story .chip { opacity: 0 !important; }

/* ---------- 2. story ---------- */
.story { background: none; color: var(--ivory); padding: calc(var(--top-h) + 20px) var(--pad) 0; overflow: clip; z-index: 2; display: grid; min-height: var(--vh, 100svh); }
.story .story__intro-text p, .story .key-hint { color: var(--ivory-70); }
.story .key-hint kbd { background: rgb(250 248 243 / .14); }
.story .story__start .btn--green { background: var(--gold); color: var(--forest); }
.story .story__start .btn--green::before { background: var(--ivory); }
.story__intro { max-width: var(--max); width: 100%; margin: 0 auto; display: grid; grid-template-columns: 1.1fr 1fr; align-items: end; gap: clamp(24px, 5vw, 80px); }
.story__intro-text { align-self: center; padding-bottom: 6svh; }
.story__intro-text p { margin-top: 20px; font-size: clamp(18px, 1.5vw, 22px); color: var(--forest-70); max-width: 30ch; }
.story__start { margin-top: 34px; }
.story__start > span { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 22px; }
.key-hint { font-size: 15px; color: var(--forest-70); }
.story__intro-img { justify-self: center; width: min(100%, 520px); --r: 0px; }
.story__intro-img img { width: 100%; }

.story.is-playing { padding: 0; }
.story.is-playing .story__intro { display: none; }
.stage { position: relative; width: 100%; max-width: 1360px; margin: 0 auto; height: var(--vh, 100svh); }
.story.is-playing { background: var(--forest); }
/* scene photos behind the characters: night and the problem first, then daylight and the fix */
.stage__bg { position: absolute; inset: 0; left: 50%; width: 100vw; margin-left: -50vw; overflow: hidden; }
.stage__bg img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: scale(1.12); filter: blur(2px);
  transition: opacity .7s var(--ease), transform 6s linear; }
.stage__bg img.is-on { opacity: 1; transform: scale(1); }
.stage__wash { position: absolute; inset: 0; background: rgb(250 248 243 / .66); transition: background-color .8s var(--ease); }
.stage.is-night .stage__wash { background: rgb(2 46 28 / .78); }
.stage.is-night .stage__time { background: var(--gold); color: var(--forest); }
.stage.is-night .bubble.is-narr { color: var(--ivory); }
.stage.is-night .bubble.is-aspen { background: var(--ivory); color: var(--forest); }
.stage[hidden] { display: none; }
.stage__time {
  position: absolute; top: 24px; left: 50%; transform: translateX(-50%); z-index: 3;
  padding: 10px 18px; border-radius: 12px; background: var(--forest); color: var(--ivory); font: 600 22px/1 var(--f-num); letter-spacing: .01em;
  transition: opacity .4s, transform .5s var(--ease);
}
.stage__time.is-off { opacity: 0; transform: translate(-50%, -10px); }

.actor { position: absolute; bottom: 0; transition: transform .7s var(--ease), opacity .5s, filter .5s; width: min(40vw, 600px); aspect-ratio: 640 / 630; transform-origin: 50% 100%; transition: transform .7s var(--ease), opacity .5s; z-index: 1; }
.actor--sakshi { left: 3%; }
.actor--aspen { right: 3%; }
.actor img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; object-position: 50% 100%; opacity: 0; transform: scale(.97); transition: opacity .35s, transform .55s var(--ease); }
.actor img.is-on { opacity: 1; transform: none; }
.actor.is-dim { transform: scale(.93); filter: saturate(.35) brightness(.92); }
.actor--aspen.is-out { opacity: 0; transform: translateX(60%) scale(.9); }
.actor__name { display: none; }

.bubble {
  position: absolute; z-index: 2; top: 13%; width: min(560px, 46%);
  background: var(--ivory); border-radius: 30px; padding: clamp(22px, 2.4vw, 34px) clamp(24px, 2.6vw, 38px);
  font: 800 clamp(23px, 2.3vw, 34px)/1.16 var(--f-head); letter-spacing: -0.02em;
  transition: left .6s var(--ease), right .6s var(--ease), opacity .3s, transform .5s var(--ease);
}
.bubble::after { content: ""; position: absolute; bottom: -14px; width: 30px; height: 30px; background: inherit; border-radius: 6px; transform: rotate(45deg); }
.bubble.is-sakshi { left: 24%; background: var(--gold); color: var(--forest); }
.bubble.is-sakshi::after { left: 44px; }
.bubble.is-aspen { left: 30%; background: var(--forest); color: var(--ivory); }
.bubble.is-aspen::after { right: 44px; }
.bubble.is-narr { left: 50%; transform: translateX(-50%); text-align: center; background: none; color: var(--forest); width: min(760px, 70%); font-size: clamp(30px, 3.4vw, 50px); line-height: 1.02; letter-spacing: -0.035em; padding-top: 8px; }
.bubble.is-narr::after { display: none; }
.bubble.is-pop { animation: pop .5s var(--ease); }
@keyframes pop { from { opacity: 0; translate: 0 16px; } to { opacity: 1; translate: 0 0; } }
.bubble .w { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .1em; margin-bottom: -.1em; }
.bubble .w > span { display: inline-block; transform: translateY(108%); transition: transform .7s var(--ease); transition-delay: calc(var(--i) * 45ms); }
.bubble.is-in .w > span { transform: none; }

.stage__end { position: absolute; z-index: 3; left: 50%; top: calc(13% + 190px); transform: translateX(-50%); display: flex; gap: 12px; opacity: 0; pointer-events: none; transition: opacity .5s .3s; }
.stage__end.is-on { opacity: 1; pointer-events: auto; }
.stage__bar {
  position: absolute; z-index: 4; left: 50%; bottom: 20px; transform: translateX(-50%);
  display: flex; align-items: center; gap: 10px; padding: 8px; border-radius: 18px; background: var(--ivory);
}
.ctl { appearance: none; border: 0; cursor: pointer; height: 48px; min-width: 48px; padding: 0 14px; border-radius: 12px; background: var(--forest-08); color: var(--forest); display: inline-flex; align-items: center; justify-content: center; gap: 10px; font: 700 16px/1 var(--f-head); transition: background-color .3s, color .3s; }
.ctl svg { flex: none; width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.ctl:hover { background: var(--forest); color: var(--ivory); }
.ctl--next { background: var(--forest); color: var(--ivory); padding: 0 18px; }
.ctl--next kbd { background: rgb(250 248 243 / .16); }
.ctl--next:hover { background: var(--gold); color: var(--forest); }
.dots { display: flex; gap: 6px; padding: 0 8px; }
.dots i { width: 7px; height: 7px; border-radius: 50%; background: var(--forest-50); opacity: .4; transition: opacity .3s, transform .3s, background-color .3s; }
.dots i.is-done { opacity: 1; }
.dots i { position: relative; overflow: hidden; }
.dots i.is-on { width: 28px; border-radius: 4px; opacity: 1; background: var(--forest-08); }
.dots i.is-on::after { content: ""; position: absolute; inset: 0; background: var(--gold); transform-origin: 0 50%; animation: hold var(--hold, 3s) linear forwards; }
.stage.is-paused .dots i.is-on::after { animation-play-state: paused; }
@keyframes hold { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.ctl .i-play { display: none; }
.stage.is-paused .ctl .i-play { display: block; fill: currentColor; stroke: none; }
.stage.is-paused .ctl .i-pause { display: none; }

/* ---------- 3. services (forest) ---------- */
.services { background: var(--forest); color: var(--ivory); z-index: auto; }
.services .head { position: relative; z-index: 6; }
.services .tiles { position: relative; z-index: 1; }
.services .head__sub { color: var(--ivory-70); }
.tiles { max-width: var(--max); margin: 0 auto; display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(14px, 2.2vw, 30px); }
.tile a { display: block; position: relative; }
.tile__media { aspect-ratio: 4 / 5; overflow: hidden; border-radius: var(--r); background: var(--white); }
.tile__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.1s var(--ease); }
.tile a:hover .tile__media img { transform: scale(1.06); }
.tile__label {
  position: absolute; left: 12px; right: 12px; bottom: 12px; z-index: 1;
  background: var(--ivory); border-radius: 18px; padding: 16px 18px 15px;
  display: flex; flex-direction: column; gap: 4px; transition: transform .5s var(--ease);
}
.tile__label h3 { font-size: clamp(20px, 1.7vw, 25px); display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.tile__label h3::after { content: ""; flex: none; width: 10px; height: 10px; border-radius: 50%; background: var(--gold); transition: transform .4s var(--ease); }
.tile__label p { font-size: 15px; font-weight: 500; color: var(--forest); line-height: 1.35; }
.tile a:hover .tile__label { transform: translateY(-6px); }
.tile a:hover .tile__label h3::after { transform: scale(1.6); }

/* ---------- 4. how it works ---------- */
.how { background: var(--gold); z-index: 2; }
.how .bignum { color: var(--forest); }
.how .how__list p { color: var(--forest); opacity: .82; }
.versus { background: var(--ivory); z-index: 2; }
.how__list { max-width: var(--max); margin: 0 auto; display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(24px, 3vw, 48px); }
.how__list li { display: flex; flex-direction: column; }
.how__list h3 { margin-top: 22px; font-size: clamp(22px, 1.9vw, 28px); }
.how__list p { margin-top: 10px; color: var(--forest-70); max-width: 24ch; }

/* ---------- 5. usual cleaner vs Aspen ---------- */
.vs { max-width: var(--max); margin: 0 auto; }
.vs__heads { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 14px; font: 800 clamp(20px, 1.8vw, 26px)/1 var(--f-head); }
.vs__heads span { padding: 0 6px; }
.vs__heads span:first-child { color: var(--forest-50); }
.vs__heads span:last-child { color: var(--gold); }
.vs__row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 10px; }
.vs__bad, .vs__good {
  display: flex; align-items: center; gap: 18px; min-height: 112px; border-radius: 26px; padding: clamp(22px, 2.4vw, 34px);
  font: 800 clamp(20px, 2vw, 30px)/1.15 var(--f-head); letter-spacing: -0.02em;
  clip-path: inset(0 0 100% 0); transform: translateY(40px); transition: clip-path 1s var(--ease), transform 1s var(--ease);
}
.vs__bad { background: var(--white); color: var(--forest-70); }
.vs__good { background: var(--forest); color: var(--ivory); transition-delay: .45s; }
.vs__row.is-in .vs__bad, .vs__row.is-in .vs__good { clip-path: inset(-20% -20% -20% -20%); transform: none; }
.vs__ico { flex: none; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; font: 700 20px/1 var(--f-body); }
.vs__ico--x { background: var(--forest-08); color: var(--forest-50); }
.vs__ico--x::before { content: "\2715"; }
.vs__ico--ok { background: var(--gold); color: var(--forest); }
.vs__ico--ok::before { content: "\2713"; }
.vs__note { margin-top: 18px; font-size: 13px; color: var(--forest-70); }

/* ---------- 6. fabrics ---------- */
/* FABRIC: the view flies through the I into the cloth (progress --p from main.js) */
.s-fabric { position: relative; z-index: 2; height: 280svh; padding: 0; --a: clamp(0, (var(--p, 0) - .06) / .6, 1); }
.s-fabric .pin { position: sticky; top: 0; height: var(--vh, 100svh); overflow: clip; isolation: isolate; }
.fz-img { position: absolute; inset: 0; }
.fz-img img { width: 100%; height: 100%; object-fit: cover; transform: scale(calc(1.3 - var(--a) * .3)); }
.fz-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.pick { position: relative; z-index: 2; margin-top: -60svh; background: var(--ivory); border-radius: 48px 48px 0 0; }
.pick__in { max-width: var(--max); margin: 0 auto; }
.pick__ui { display: grid; grid-template-columns: minmax(220px, .8fr) 1.6fr; gap: clamp(24px, 5vw, 80px); align-items: start; }
.chips { display: grid; gap: 8px; }
.chips button {
  appearance: none; border: 0; cursor: pointer; text-align: left; padding: 18px 22px; border-radius: 16px;
  background: var(--forest-08); color: var(--forest); font: 700 18px/1.1 var(--f-head); letter-spacing: -0.01em;
  transition: background-color .35s, color .35s, transform .4s var(--ease);
}
.chips button:hover { transform: translateX(6px); }
.chips button[aria-selected="true"] { background: var(--forest); color: var(--ivory); }
.fpanels { background: var(--forest-08); border-radius: 32px; padding: clamp(28px, 4vw, 56px); min-height: 440px; display: flex; flex-direction: column; }
.fpanel { display: none; }
.fpanel.is-on { display: block; }
.fpanel h3 { font-size: clamp(30px, 3.4vw, 48px); }
.fpanel.is-on h3 { animation: riseIn .8s var(--ease) both; }
.fpanel .numlist { margin-top: 26px; }
.fpanel.is-on li { animation: riseIn .8s var(--ease) both; }
.fpanel.is-on li:nth-child(2) { animation-delay: .08s; } .fpanel.is-on li:nth-child(3) { animation-delay: .16s; } .fpanel.is-on li:nth-child(4) { animation-delay: .24s; }
@keyframes riseIn { from { clip-path: inset(0 0 100% 0); transform: translateY(30px); } to { clip-path: inset(-30% -30% -30% -30%); transform: none; } }
.fpanel__back { margin-top: 26px; font: 700 20px/1.3 var(--f-head); }
.fpanels .btn { margin-top: 32px; align-self: flex-start; }

/* ---------- 7. care stories ---------- */
.stories { background: var(--forest); color: var(--ivory); z-index: 2; }
.stories .head__sub { color: var(--ivory-70); }
.stories .case { color: var(--forest); }
.tutorials, .faq { background: var(--ivory); z-index: 2; }
.tut h3 b { font-weight: inherit; }
.cases { max-width: var(--max); margin: 0 auto; display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(16px, 2vw, 28px); }
.case { background: var(--white); border-radius: 30px; overflow: hidden; display: flex; flex-direction: column; }
.case__img img { width: 100%; aspect-ratio: 4 / 4.2; object-fit: cover; }
.case__body { padding: clamp(22px, 2.4vw, 32px); display: flex; flex-direction: column; flex: 1; }
.case__body h3 { font-size: clamp(23px, 2vw, 30px); }
.case__issue { margin-top: 10px; color: var(--forest-70); }
.case .numlist { margin: 22px 0 24px; gap: 10px; }
.case .link { margin-top: auto; align-self: flex-start; }

/* ---------- 8. care at home ---------- */
.tuts { max-width: var(--max); margin: 0 auto; display: grid; gap: clamp(72px, 10vw, 140px); }
.tut { display: grid; grid-template-columns: 1.1fr 1fr; gap: clamp(32px, 6vw, 96px); align-items: center; }
.tut--flip .tut__img { order: 2; }
.tut__img { --r: 32px; border-radius: 32px; overflow: hidden; }
.tut__img img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.tut__body h3 { font-size: clamp(30px, 3.2vw, 46px); }
.tut__lead { margin-top: 24px; font-size: clamp(18px, 1.45vw, 21px); line-height: 1.55; font-weight: 500; }
.tut__more { margin-top: 16px; color: var(--forest-70); }

.tips { max-width: var(--max); margin: clamp(80px, 10vw, 140px) auto 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(14px, 1.6vw, 22px); }
.tip { position: relative; background: var(--white); border-radius: 30px; padding: clamp(26px, 2.6vw, 38px); overflow: hidden;
  display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 16px; align-items: start; }
.tip__img { grid-column: 2; grid-row: 1; margin: -12px -8px 0 0; width: auto; height: 132px; transform-origin: 50% 2%; animation: sway 3.4s var(--ease-in-out) infinite alternate; }
.tip:nth-child(2n) .tip__img { animation-duration: 4.1s; animation-delay: -1.3s; }
.tip:nth-child(3n) .tip__img { animation-duration: 3.8s; animation-delay: -2.2s; }
@keyframes sway { from { transform: rotate(-4deg); } to { transform: rotate(4deg); } }
.tip h3 { grid-column: 1; grid-row: 1; align-self: center; font-size: clamp(22px, 1.8vw, 27px); line-height: 1.08; }
.tip p { grid-column: 1 / -1; margin-top: 14px; color: var(--forest-70); font-size: 16px; line-height: 1.6; }

/* ---------- 9. FAQ ---------- *//* ---------- 9. FAQ ---------- */
.faq { perspective: 1600px; }
.faq__in { transform-origin: 50% 0; transform: rotateX(calc(var(--f, 0) * -62deg)) scale(calc(1 - var(--f, 0) * .06)); max-width: var(--max); margin: 0 auto; background: var(--white); border-radius: 40px; padding: clamp(40px, 6vw, 88px) clamp(20px, 4vw, 64px);
  display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(32px, 5vw, 80px); align-items: start; }
.faq__side { position: sticky; top: calc(var(--top-h) + 28px); display: grid; justify-items: start; }
.faq__side > p { margin-top: 18px; color: var(--forest-70); max-width: 36ch; }
.faq__stack { width: min(100%, 250px, 30vh); height: auto; margin: 18px 0 14px -8px; animation: bob 5s var(--ease-in-out) infinite alternate; }
@keyframes bob { from { transform: translateY(-6px) rotate(-1.5deg); } to { transform: translateY(8px) rotate(1.5deg); } }
.faq__hours { margin-top: 16px; font-size: 15px; color: var(--forest-70); }
.faq__list { display: grid; gap: clamp(30px, 3.4vw, 48px); }
.qa__title { font: 700 15px/1 var(--f-body); letter-spacing: 0; color: var(--gold); margin-bottom: 14px; }
.faq h2 { font-size: clamp(40px, 4.6vw, 72px); }
.qa { display: grid; gap: 8px; }
.qa details { background: var(--ivory); border-radius: 18px; overflow: hidden; }
.qa summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 22px 24px; font: 700 clamp(18px, 1.5vw, 21px)/1.25 var(--f-head); letter-spacing: -0.01em; }
.qa summary::-webkit-details-marker { display: none; }
.qa__plus { flex: none; width: 32px; height: 32px; border-radius: 50%; background: var(--forest); color: var(--gold); display: grid; place-items: center; font: 600 22px/1 var(--f-body); transition: transform .45s var(--ease), background-color .3s, color .3s; }
.qa details[open] .qa__plus { transform: rotate(135deg); background: var(--gold); color: var(--forest); }
.qa__a { padding: 0 24px 24px; color: var(--forest-70); max-width: 62ch; }
.qa details[open] .qa__a { animation: riseIn .6s var(--ease) both; }

/* ---------- 10. finale ---------- */
.dusk { position: relative; z-index: 2; background: var(--forest); overflow: clip; }
.dusk__bg { position: sticky; top: 0; height: var(--vh, 100svh); margin-bottom: calc(-1 * var(--vh, 100svh)); overflow: hidden; }
.dusk__media { position: absolute; inset: 0; }
.dusk__media img { transform: scale(calc(1 + var(--n, 0) * .08)); }
.dusk__wash { position: absolute; inset: 0; background: var(--forest); opacity: calc(var(--n, 0) * .8); pointer-events: none; }
.finale { padding: 0; overflow: visible; position: relative; z-index: 1; background: none; min-height: var(--vh, 100svh); }
.finale__media img { object-position: 70% 50%; }
.finale__copy {
  position: absolute; z-index: 2; left: var(--pad); bottom: clamp(24px, 7vh, 72px); width: min(480px, calc(100% - 2 * var(--pad)));
  background: var(--ivory); border-radius: 32px; padding: clamp(28px, 3vw, 44px);
}
.finale__copy p { margin: 16px 0 26px; color: var(--forest-70); }

/* ---------- 11. visit, footer revealed underneath (kept from before) ---------- */
.curtain { position: relative; }
.visit { position: relative; z-index: 2; background: var(--ivory); border-radius: 0 0 48px 48px; }
.visit__in { max-width: var(--max); margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: clamp(36px, 6vw, 96px); align-items: center; }
.visit__grid { display: grid; gap: 28px; margin-top: 36px; }
.visit__grid h3 { font: 600 15px/1.2 var(--f-body); color: var(--forest-70); letter-spacing: 0; margin-bottom: 6px; display: flex; align-items: center; gap: 8px; }
.visit__grid h3::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--gold); }
.visit__grid p { max-width: 40ch; }
.visit__grid .link { display: inline-block; margin-top: 8px; }
.visit__map { aspect-ratio: 4 / 3.4; background: var(--white); border-radius: var(--r); overflow: hidden; }
.visit__map iframe { width: 100%; height: 100%; border: 0; filter: grayscale(1) sepia(.18) contrast(.95); }
.foot { position: sticky; bottom: 0; z-index: 1; background: var(--forest); color: var(--ivory); padding: 120px var(--pad) 40px; margin-top: -48px; }
.foot__in { max-width: var(--max); margin: 0 auto; display: grid; grid-template-columns: 1fr auto; gap: 24px 48px; align-items: end; }
.brand--foot { height: auto; }
.brand--foot .brand__logo { height: clamp(96px, 11vw, 168px); }
.foot__line { grid-column: 1; color: var(--ivory-70); max-width: 34ch; }
.foot__links { grid-column: 2; grid-row: 1 / span 2; display: grid; gap: 10px; text-align: right; font-weight: 500; }
.foot__links a { transition: color .3s; }
.foot__links a:hover { color: var(--gold); }
.foot__small { grid-column: 1 / -1; margin-top: 32px; display: flex; flex-wrap: wrap; gap: 10px 28px; font-size: var(--t-5); color: var(--ivory-70); }
.foot__small span:first-child { margin-right: auto; }
.foot__small a { color: var(--ivory); transition: color .3s; }
.foot__small a:hover { color: var(--gold); }

/* ---------- WhatsApp button + message helper (wa.js) ---------- */
.wa-fab {
  position: fixed; right: max(20px, env(safe-area-inset-right)); bottom: calc(20px + env(safe-area-inset-bottom)); z-index: 60;
  display: inline-flex; align-items: center; gap: 10px; height: 60px; padding: 0 22px 0 18px; border: 0; border-radius: 20px; cursor: pointer;
  background: var(--forest); color: var(--ivory); font: 700 16px/1 var(--f-head);
  box-shadow: 0 14px 34px rgb(2 46 28 / .28); /* taste-skill-ignore */
  transition: transform .45s var(--ease), background-color .3s, color .3s, opacity .3s;
}
.wa-fab svg { width: 28px; height: 28px; fill: var(--gold); flex: none; }
.wa-fab:hover { background: var(--gold); color: var(--forest); }
.wa-fab:hover svg { fill: var(--forest); }
.wa-fab:active { transform: scale(.96); }
.wa-fab[aria-expanded="true"] { transform: scale(.9); opacity: 0; pointer-events: none; }
.is-locked .wa-fab { opacity: 0; pointer-events: none; }
.wa-fab.is-away { opacity: 0; transform: translateY(24px); pointer-events: none; }
.wa-fab::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: var(--gold); opacity: 0; z-index: -1; animation: nudge 5s var(--ease) 4s infinite; }
@keyframes nudge { 0%, 70% { opacity: 0; transform: scale(1); } 74% { opacity: .5; } 100% { opacity: 0; transform: scale(1.35, 1.6); } }

.wa {
  position: fixed; right: max(20px, env(safe-area-inset-right)); bottom: calc(20px + env(safe-area-inset-bottom)); z-index: 61;
  width: min(420px, calc(100vw - 40px)); max-height: min(720px, calc(var(--vh, 100svh) - 40px)); display: flex; flex-direction: column;
  background: var(--ivory); color: var(--forest); border-radius: 28px; overflow: hidden;
  box-shadow: 0 30px 80px rgb(2 46 28 / .3); /* taste-skill-ignore */
  transform-origin: 100% 100%; animation: waIn .5s var(--ease) both;
}
.wa[hidden] { display: none; }
.wa.is-closing { animation: waOut .3s var(--ease-in-out) both; }
@keyframes waIn { from { opacity: 0; transform: translateY(16px) scale(.94); } }
@keyframes waOut { to { opacity: 0; transform: translateY(16px) scale(.94); } }
.wa__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 20px 20px 14px 24px; background: var(--forest); color: var(--ivory); }
.wa__head h2 { font-size: 26px; letter-spacing: -0.02em; }
.wa__x { width: 40px; height: 40px; border: 0; border-radius: 12px; background: rgb(250 248 243 / .12); display: grid; place-items: center; cursor: pointer; }
.wa__x svg { width: 18px; height: 18px; stroke: var(--ivory); stroke-width: 2.4; stroke-linecap: round; fill: none; }
.wa__body { overflow-y: auto; overscroll-behavior: contain; padding: 18px 24px 8px; display: grid; gap: 18px; }
.wa__q { display: flex; align-items: center; justify-content: space-between; gap: 10px; font: 700 15px/1.2 var(--f-body); margin-bottom: 10px; }
.wa__body > .wa__q { margin-bottom: -8px; }
.wa__intents, .wa__opts { display: flex; flex-wrap: wrap; gap: 8px; }
.wa__chip {
  border: 0; cursor: pointer; padding: 10px 14px; border-radius: 12px; background: var(--forest-08); color: var(--forest);
  font: 600 15px/1.2 var(--f-body); text-align: left; transition: background-color .25s, color .25s, transform .25s var(--ease);
}
.wa__chip:hover { background: rgb(2 46 28 / .14); }
.wa__chip:active { transform: scale(.96); }
.wa__chip[aria-pressed="true"] { background: var(--forest); color: var(--ivory); }
.wa__intents .wa__chip[aria-pressed="true"] { background: var(--gold); color: var(--forest); }
.wa__chip--add { background: none; padding-left: 4px; padding-right: 4px; color: var(--gold); }
.wa__chip--add:hover { background: none; color: var(--forest); }
.wa__form { display: grid; gap: 16px; }
.wa__form > div { animation: riseIn .45s var(--ease) both; animation-delay: calc(var(--k, 0) * 60ms); }
.wa input, .wa textarea {
  width: 100%; border: 0; border-radius: 14px; background: var(--forest-08); color: var(--forest); padding: 13px 14px;
  font: 500 16px/1.45 var(--f-body);
}
.wa textarea { resize: vertical; min-height: 132px; }
.wa input::placeholder, .wa textarea::placeholder { color: var(--forest-70); }
.wa input:focus-visible, .wa textarea:focus-visible, .wa__chip:focus-visible, .wa__x:focus-visible, .wa-fab:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }
.wa__reset { border: 0; background: none; padding: 0; cursor: pointer; color: var(--gold); font: 700 14px/1 var(--f-body); }
.wa__foot { padding: 14px 24px 22px; }
.wa__msg { display: block; }
.wa__help { justify-self: start; border: 0; cursor: pointer; padding: 11px 16px; border-radius: 12px; background: var(--forest-08); color: var(--forest);
  font: 700 15px/1 var(--f-head); transition: background-color .25s, color .25s; }
.wa__help:hover, .wa__help[aria-expanded="true"] { background: var(--forest); color: var(--ivory); }
.wa__help:focus-visible, .wa__reset:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }
.wa__helpbox { display: grid; gap: 16px; animation: riseIn .45s var(--ease) both; }
.wa__helpbox[hidden] { display: none; }
.wa__helpbox > .wa__q { margin-bottom: -6px; }
.wa__send { width: 100%; }
.is-locked .bar, .is-story .bar { transform: translateY(140%) !important; }

/* ---------- tablet ---------- */
@media (max-width: 1024px) {
  .tips { grid-template-columns: 1fr 1fr; }
  .nav { display: none; }
  .top__in { justify-content: flex-start; gap: 12px; }
  .top .btn--sm { margin-left: auto; }
  .menu-btn { display: inline-flex; }
  .tiles { grid-template-columns: repeat(2, 1fr); }
  .how__list { grid-template-columns: repeat(2, 1fr); row-gap: 48px; }
  .pick__ui { grid-template-columns: 1fr; }
  .chips { grid-template-columns: repeat(3, 1fr); }
  .chips button:hover { transform: none; }
  .cases { grid-template-columns: 1fr; max-width: 640px; }
  .bubble { width: min(520px, 56%); }
  .bubble.is-sakshi { left: 18%; }
  .bubble.is-aspen { left: 26%; }
}

/* ---------- phone (designed first for 390px) ---------- */
@media (max-width: 760px) {
  :root { --top-h: 64px; --r: 20px; }
  .top .btn--sm { display: none; }
  .menu-btn { margin-left: auto; }
  .brand__logo { height: 38px; }

  .hero { min-height: 600px; }
  .hero__copy { padding-top: calc(var(--top-h) + 22px); }

  .rail { margin: 34px 0 26px; }
  .tips { grid-template-columns: 1fr; }
  .tip__img { height: 112px; }
  .faq__in { grid-template-columns: 1fr; }
  .faq__side { position: relative; top: auto; }
  .faq__stack { width: 230px; margin: 12px 0 10px -6px; }
  .bigword { font-size: 32vw; }
  .chip { display: none; }

  .story { padding-top: calc(var(--top-h) + 24px); }
  .story__intro { grid-template-columns: 1fr; gap: 0; }
  .story__intro-text { padding-bottom: 8px; }
  .story__intro-img { width: min(78%, 330px); }
  .stage__time { top: 16px; font-size: 18px; }
  .actor { width: auto; height: min(62svh, 560px); bottom: 0; aspect-ratio: 640 / 630; }
  .actor--sakshi { left: -18%; }
  .actor--aspen { right: -18%; }
  .actor.is-dim { z-index: 0; }
  .actor:not(.is-dim) { z-index: 1; }
  .actor__name { display: none; }
  .actor.is-dim { transform: scale(.9); filter: saturate(.35) brightness(.9); }
  .actor--sakshi.is-dim { transform: translateX(-16%) scale(.9); }
  .actor--aspen.is-dim { transform: translateX(16%) scale(.9); }
  .bubble, .bubble.is-sakshi, .bubble.is-aspen { left: 16px; right: 16px; width: auto; top: 64px; font-size: 21px; border-radius: 24px; padding: 20px 22px; }
  .bubble.is-narr { left: 16px; transform: none; font-size: 30px; padding: 8px 4px; }
  .bubble.is-sakshi::after { left: 26%; }
  .bubble.is-aspen::after { right: 26%; left: auto; }
  .stage__end { left: 16px; right: 16px; transform: none; top: 190px; bottom: auto; flex-direction: column; z-index: 5; }
  .stage__end .btn { width: 100%; }
  .stage__end .btn--ghost { background: var(--ivory); }
  .stage__bar { left: 12px; right: 12px; transform: none; justify-content: space-between; bottom: calc(12px + env(safe-area-inset-bottom)); }
  .ctl--next kbd { display: none; }
  .dots { gap: 4px; padding: 0; }
  .dots i { width: 6px; height: 6px; }

  .tiles { gap: 12px; }
  .tile__label { left: 8px; right: 8px; bottom: 8px; padding: 11px 12px; border-radius: 14px; gap: 2px; }
  .tile__label h3 { font-size: 17px; }
  .tile__label h3::after { width: 8px; height: 8px; }
  .tile__label p { font-size: 13px; }

  .how__list { grid-template-columns: 1fr 1fr; gap: 36px 18px; }
  .bignum { font-size: 84px; }
  .how__list h3 { margin-top: 14px; font-size: 21px; }
  .how__list p { font-size: 15px; }

  .vs__heads { display: none; }
  .vs__row { grid-template-columns: 1fr; gap: 6px; margin-bottom: 18px; }
  .vs__bad, .vs__good { min-height: 0; font-size: 20px; border-radius: 20px; padding: 18px; gap: 14px; align-items: flex-start; }
  .vs__good { transition-delay: .3s; }
  .vs__bad > span:last-child::before, .vs__good > span:last-child::before { display: block; font: 600 12px/1 var(--f-body); letter-spacing: .04em; margin-bottom: 8px; }
  .vs__bad > span:last-child::before { content: "Usual cleaner"; color: var(--forest-50); }
  .vs__good > span:last-child::before { content: "Aspen"; color: var(--gold); }
  .vs__ico { width: 34px; height: 34px; font-size: 16px; }

  .s-fabric { height: 240svh; }
  .fz-img img { object-position: 18% 50%; }
  .pick { margin-top: -50svh; border-radius: 32px 32px 0 0; }
  .chips { grid-template-columns: 1fr 1fr; gap: 6px; }
  .chips button { padding: 14px 16px; font-size: 16px; border-radius: 14px; }
  .fpanels { min-height: 0; border-radius: 24px; padding: 26px 20px; }
  .numlist li { grid-template-columns: 48px 1fr; font-size: 16px; }
  .numlist li::before { font-size: 38px; }
  .fpanels .btn { width: 100%; }

  .case { border-radius: 24px; }
  .tut, .tut--flip { grid-template-columns: 1fr; gap: 24px; }
  .tut--flip .tut__img { order: 0; }
  .tut__img { border-radius: 24px; --r: 24px; }

  .faq { padding-left: 12px; padding-right: 12px; }
  .faq__in { border-radius: 28px; }
  .qa summary { padding: 18px; }
  .qa__a { padding: 0 18px 20px; }

  .finale { min-height: var(--vh, 100svh); }
  .finale__media img { object-position: 62% 50%; }
  .finale__copy { left: 12px; right: 12px; width: auto; bottom: 96px; padding: 26px 22px; border-radius: 26px; }
  .finale__copy .btn { width: 100%; }

  .visit__in { grid-template-columns: 1fr; }
  .visit { border-radius: 0 0 32px 32px; }
  .foot { padding-bottom: 120px; }
  .foot__in { grid-template-columns: 1fr; }
  .foot__links { grid-column: 1; grid-row: auto; text-align: left; grid-template-columns: 1fr 1fr; }

  .wa-fab { right: 14px; bottom: calc(14px + env(safe-area-inset-bottom)); width: 60px; padding: 0; justify-content: center; }
  .wa-fab__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .wa { left: 0; right: 0; bottom: 0; width: auto; max-height: calc(var(--vh, 100svh) - 48px); border-radius: 28px 28px 0 0; transform-origin: 50% 100%; }
  .wa__foot { padding-bottom: calc(18px + env(safe-area-inset-bottom)); }
}

@media (max-width: 360px) {
  .tile__label p { display: none; }
  .chips { grid-template-columns: 1fr; }
  .how__list { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; transition-delay: 0s !important; }
  .split .w > span, .rise > span, .bubble .w > span { transform: none; }
  .rise-block, .rise-img, .vs__bad, .vs__good { clip-path: none; transform: none; }
  .rise-img img { transform: none; scale: 1; }
  .hero__light img, .tip__img, .faq__stack { animation: none !important; transform: none; }
}

/* ---------- privacy policy and terms ---------- */
.legal { position: relative; z-index: 2; background: var(--ivory); padding: calc(var(--top-h) + clamp(48px, 8vw, 110px)) var(--pad) clamp(100px, 12vw, 160px); }
.legal__in { max-width: 1080px; margin: 0 auto; display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: clamp(32px, 6vw, 88px); align-items: start; }
.legal__head { grid-column: 1 / -1; max-width: 860px; }
.legal__head h1 { font-size: clamp(46px, 7vw, 104px); letter-spacing: -0.045em; }
.legal__head p { margin-top: 20px; color: var(--forest-70); max-width: 60ch; }
.legal__date { font-weight: 600; color: var(--forest) !important; }
.legal__toc { position: sticky; top: calc(var(--top-h) + 24px); display: grid; gap: 8px; font-size: 15px; }
.legal__toc p { font: 700 15px/1 var(--f-body); color: var(--gold); margin-bottom: 6px; }
.legal__toc a { color: var(--forest-70); transition: color .25s; }
.legal__toc a:hover { color: var(--forest); }
.legal__body { display: grid; gap: clamp(36px, 4vw, 52px); }
.legal__body section { padding: 0; scroll-margin-top: calc(var(--top-h) + 20px); }
.legal__body h2 { font-size: clamp(26px, 2.6vw, 36px); letter-spacing: -0.025em; margin-bottom: 14px; }
.legal__body h3 { font-size: 19px; letter-spacing: -0.01em; margin: 20px 0 8px; }
.legal__body p, .legal__body li { color: rgb(2 46 28 / .84); line-height: 1.7; }
.legal__body p + p { margin-top: 12px; }
.legal__body ul { margin: 12px 0 0; padding-left: 20px; display: grid; gap: 8px; }
.legal__body li::marker { color: var(--gold); }
.legal__body strong { color: var(--forest); font-weight: 600; }
.legal__note { background: var(--white); border-radius: 24px; padding: clamp(22px, 3vw, 32px); }
.legal__note p { color: var(--forest); }
.legal .link { color: var(--forest); }
.foot--legal { position: relative; margin-top: 0; border-radius: 0; padding-top: 80px; }
@media (max-width: 860px) {
  .legal__in { grid-template-columns: 1fr; }
  .legal__toc { position: static; background: var(--white); border-radius: 22px; padding: 22px; }
}