/* Aashi Enterprises: the Divine Mantra Box, the Mini Chanting Box and the Night Lamps
   Everything comes from the logo: its cream ground, its blush, nude, dusty-rose and mauve petals,
   and its thin, widely spaced geometric lettering (Jost).
   Shape rule: controls are petals (two opposite corners round, two nearly pointed, like the logo's
   leaves: --leaf); frames are larger petals (--leaf-lg). */

/* The fonts are served with the site (fonts/; licences in fonts/LICENSES.txt), not fetched from
   another server first. Jost: the Latin letters, one file for every weight (index.html preloads it;
   Jost has no ₹ sign, so that comes from the system's font, as it always has). Tiro Devanagari: the
   mantras' Hindi names, downloaded only when a page shows Devanagari text. */
@font-face {
  font-family: "Jost"; src: url("fonts/jost.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Tiro Devanagari Sanskrit"; src: url("fonts/tiro-devanagari.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap;
  unicode-range: U+0900-097F, U+1CD0-1CF4, U+1CF7-1CF9, U+200C-200D, U+20A8, U+20F0, U+25CC, U+A830-A839, U+A8E0-A8FF, U+11B00-11B0A;
}

/* the lamp's light colours, read from the artwork it shows (set by bg.js); registered so they crossfade */
@property --glow { syntax: "<color>"; inherits: true; initial-value: rgb(233 178 167); }
@property --glow-2 { syntax: "<color>"; inherits: true; initial-value: rgb(232 201 184); }
@property --room-glow { syntax: "<color>"; inherits: true; initial-value: rgb(255 168 77); }

:root {
  /* the logo's petals */
  --blush: #e9b2a7;
  --nude: #e8c9b8;
  --rose: #c28779;
  --mauve: #9e6960;
  --cocoa: #4a2f2c;
  /* the light moves: --glow and --glow-2 (set by bg.js) crossfade here, and everything that uses them follows */
  transition: --glow 1.4s var(--ease), --glow-2 1.4s var(--ease);
  --leaf: 999px 8px;
  --leaf-lg: 56px 12px;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --font-display: "Jost", system-ui, sans-serif;
  --font-body: "Jost", system-ui, sans-serif;
  --font-deva: "Tiro Devanagari Sanskrit", serif;
  --gutter: clamp(16px, 4vw, 56px);
  /* labels, buttons and nav: the wordmark's spaced capitals */
  --label: 500 12.5px/1.2 var(--font-display);
  --label-track: 0.2em;

  /* the logo's cream page, cocoa ink, dusty-rose actions */
  --bg: #faf5f0;
  --bg-2: #f3e9e2;
  --surface: #fffcf9;
  --ink: #3f2724;
  --muted: #7a5a53;
  --accent: #935e55;
  --accent-hi: #7e4b42;
  --accent-ink: #fffaf6;
  --accent-soft: rgba(147, 94, 85, 0.1);
  --brand-ink: #86554b;
  --note: #8c564c;
  --line: rgba(74, 47, 44, 0.12);
  --line-2: rgba(74, 47, 44, 0.24);
  --ctl-bg: rgba(255, 252, 249, 0.72);
  --ctl-line: rgba(74, 47, 44, 0.18);
  --ctl-line-hi: rgba(74, 47, 44, 0.45);
  --wash: rgba(158, 105, 96, 0.08);
  --shade: rgba(110, 66, 58, 0.3);
  --nav-bg: rgba(250, 245, 240, 0.78);
  --nav-solid: rgba(250, 245, 240, 0.97);
  --nav-hl: rgba(255, 255, 255, 0.85);
  --menu-bg: rgba(255, 252, 249, 0.98);
  --frame-ring: 0 0 0 1px rgba(74, 47, 44, 0.14);
  --scroll-thumb: #dcc0b6;
  --scroll-thumb-hi: #c79d91;
  /* light around the products stays in the petal family, whatever colour the artwork is */
  --halo: color-mix(in oklab, var(--glow) 72%, var(--blush));
  --wash-1: color-mix(in srgb, var(--blush) 30%, transparent);
  --wash-2: color-mix(in srgb, var(--nude) 42%, transparent);
  --wash-3: color-mix(in srgb, var(--halo) 26%, transparent);
  --grain-opacity: 0.16;
  --petal-opacity: 0.5;
  /* the bulk-order panel: one field of dusty rose */
  --panel: #935e55;
  --panel-ink: #fff6f1;
  --panel-muted: rgba(255, 246, 241, 0.78);
  color-scheme: light;
}

/* z-index scale: night 0, field 0, stage 1, content 3, nav 20 */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

/* each product's own content (data-for="mantra mini") shows only while that product is picked */
html[data-product="mantra"] [data-for]:not([data-for~="mantra"]),
html[data-product="mini"] [data-for]:not([data-for~="mini"]),
html[data-product="lamp"] [data-for]:not([data-for~="lamp"]) { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  /* clip, not hidden: "hidden" would make the body a scroll box of its own, and the section
     snapping below (which belongs to the page) would stop working */
  overflow-x: hidden;
  overflow-x: clip;
}
/* the 3D canvases reach past the screen edge for their glow; clip them so phones never scroll sideways */
html, main { overflow-x: clip; }

/* Scrolling moves a whole section at a time: the page always comes to rest with a section's top at
   the top of the screen, never in the space between two, and a quick flick stops at the next
   section instead of flying past it. A section taller than the screen (the design picker or the
   FAQ on a phone) still scrolls freely through its length, then moves on at its end.
   (The mouse wheel and trackpad step a section at a time too: see "Scrolling" in script.js.) */
html { scroll-snap-type: y mandatory; }
.hero, .products, .show, .listen, .spaces-sec, .order, .maker, .faq { scroll-snap-align: start; scroll-snap-stop: always; }
.footer { scroll-snap-align: end; }

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
h1, h2, h3 { font-family: var(--font-display); font-weight: 300; margin: 0; letter-spacing: -0.01em; text-wrap: balance; }
p { margin: 0; }

.wrap { width: 100%; max-width: 1280px; margin: 0 auto; padding: 0 var(--gutter); }
.accent-text { color: var(--accent); }

:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 6px; }

/* ---------- Fixed layers ---------- */
.night {
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  /* soft petal light, as on the logo's page: blush up high, nude pooling low, the artwork's own light between */
  background:
    radial-gradient(55% 48% at 82% 14%, var(--wash-1), transparent 70%),
    radial-gradient(70% 60% at 4% 100%, var(--wash-2), transparent 70%),
    radial-gradient(45% 40% at 66% 46%, var(--wash-3), transparent 70%);
}
/* a fine paper grain over the whole page, like the logo's printed card */
.night::after {
  content: ""; position: absolute; inset: 0; opacity: var(--grain-opacity);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .45 0 0 0 0 .3 0 0 0 0 .27 1.3 0 0 0 -.62'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
/* sized to the large viewport, so the mobile URL bar never resizes it */
#field {
  position: fixed; top: 0; left: 0; z-index: 0;
  width: 100vw; height: 100vh; height: 100lvh;
  pointer-events: none;
}

main, .footer { position: relative; z-index: 3; }

/* ---------- Model slots: each section's own 3D product, scrolling with it ---------- */
.model-slot { position: relative; }
/* the canvas reaches past the slot so the glow can fade out softly instead of being cut off */
.model-slot canvas {
  position: absolute; left: -18%; top: -18%; width: 136%; height: 136%;
  pointer-events: none;
}
.model-slot.is-flat { display: flex; align-items: center; justify-content: center; }
.model-slot.is-flat img { width: min(60%, 260px); border-radius: 18px; border: 10px solid #fbf6f1; box-shadow: 0 30px 70px -24px var(--shade); }
/* copy that sits beside a product stays above the edge of its glow */
.hero-copy, .show-captions, .show-bar, .order-copy { position: relative; z-index: 1; }

/* ---------- Type: one family, three voices ---------- */
.section-title { font-size: clamp(38px, 4.6vw, 68px); line-height: 1.04; letter-spacing: -0.015em; }

/* ---------- Nav ---------- */
.nav {
  position: fixed; top: 14px; left: 50%; z-index: 20;
  transform: translateX(-50%);
  width: min(1200px, calc(100% - 2 * 16px));
  height: 66px; padding: 0 10px 0 18px;
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  border-radius: 999px 18px; border: 1px solid var(--line);
  background: var(--nav-bg);
  backdrop-filter: blur(14px) saturate(1.1); -webkit-backdrop-filter: blur(14px) saturate(1.1);
  box-shadow: inset 0 1px 0 var(--nav-hl), 0 14px 34px -24px var(--shade);
}
.brand { display: inline-flex; align-items: center; gap: 12px; white-space: nowrap; }
.brand-mark { display: block; height: 34px; width: auto; }
/* the wordmark, set as on the logo: the name in wide capitals, ENTERPRISES finer beneath it */
.brand-name { display: flex; flex-direction: column; align-items: center; line-height: 1; color: var(--brand-ink); }
.brand-name > span { font: 400 15px/1 var(--font-display); letter-spacing: 0.42em; margin-right: -0.42em; text-transform: uppercase; }
.brand-name small { font: 400 7.5px/1 var(--font-display); letter-spacing: 0.46em; margin: 5px -0.46em 0 0; text-transform: uppercase; }
.nav-links { display: flex; gap: 30px; font: var(--label); letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted); }
.nav-links a { position: relative; transition: color 0.25s; padding: 10px 0; }
.nav-links a:hover { color: var(--ink); }
/* a fine rose line draws in under the link from the left, and leaves to the right */
.nav-links a::after {
  content: ""; position: absolute; left: 0; right: 0.18em; bottom: 4px; height: 1px;
  background: var(--accent); transform: scaleX(0); transform-origin: right; transition: transform 0.45s var(--ease);
}
.nav-links a:hover::after { transform: scaleX(1); transform-origin: left; }
.nav-end { display: flex; align-items: center; gap: 8px; }
/* the product's own link (Listen / Rooms) keeps its slot; another product's just goes invisible */
.nav-swap { display: inline-grid; }
html .nav-swap > a[data-for]:not([hidden]) { display: block !important; grid-area: 1 / 1; }
html[data-product="mantra"] .nav-swap > a:not([data-for~="mantra"]),
html[data-product="mini"] .nav-swap > a:not([data-for~="mini"]),
html[data-product="lamp"] .nav-swap > a:not([data-for~="lamp"]) { visibility: hidden; pointer-events: none; }

/* the product switcher: which product the page is showing */
.switcher { position: relative; }
.switch-btn {
  display: inline-flex; align-items: center; gap: 10px; height: 46px; padding: 0 14px 0 18px; border-radius: var(--leaf); cursor: pointer;
  font: 400 15px var(--font-display); color: var(--ink); white-space: nowrap;
  background: var(--ctl-bg); border: 1px solid var(--ctl-line);
  transition: border-color 0.25s, background 0.25s;
}
.switch-btn:hover, .switch-btn[aria-expanded="true"] { border-color: var(--accent); }
/* the label always takes the width of the longest name, so the button never resizes */
.switch-label { display: inline-grid; justify-items: start; }
.switch-label > [data-p], .switch-sizer { grid-area: 1 / 1; }
.switch-sizer { visibility: hidden; }
.switch-btn .ph { color: var(--accent); transition: transform 0.35s var(--ease); }
.switch-btn[aria-expanded="true"] .ph { transform: rotate(180deg); }
.switch-menu {
  position: absolute; top: calc(100% + 12px); right: 0; min-width: 250px; padding: 8px;
  display: grid; gap: 2px; border-radius: 28px 8px;
  background: var(--menu-bg); border: 1px solid var(--line);
  box-shadow: 0 26px 50px -22px var(--shade);
}
.switch-menu[hidden] { display: none; }
.switch-menu button {
  display: flex; flex-direction: column; align-items: flex-start; gap: 4px; padding: 13px 16px; border-radius: 20px 6px; cursor: pointer;
  text-align: left; color: var(--ink); background: none; border: 0; font: 400 17px var(--font-display);
  transition: background 0.2s;
}
.switch-menu button small { font: var(--label); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted); }
.switch-menu button:hover { background: var(--wash); }
.switch-menu button[aria-current="true"] { background: var(--accent-soft); }
.switch-menu button[aria-current="true"] span { color: var(--accent); }

/* ---------- Buttons: petals ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 12px;
  height: 54px; padding: 0 28px; border-radius: var(--leaf); white-space: nowrap;
  font: 500 16.5px/1 var(--font-display); letter-spacing: 0.01em;
  border: 1px solid transparent; cursor: pointer;
  transition: background 0.25s, box-shadow 0.35s var(--ease), border-color 0.25s, color 0.25s;
}
.btn .ph { font-size: 17px; }
.btn-sm { height: 44px; padding: 0 20px; font-size: 15px; }
.btn-primary { background: var(--accent); color: var(--accent-ink); box-shadow: 0 10px 22px -12px var(--shade); }
.btn-primary:hover { background: var(--accent-hi); box-shadow: 0 16px 28px -14px var(--shade); }
.btn-primary i { transition: transform 0.35s var(--ease); }
.btn-primary:hover i { transform: translateX(4px); }
.btn-ghost { border-color: var(--ctl-line-hi); color: var(--ink); background: var(--ctl-bg); }
.btn-ghost:hover { border-color: var(--ink); }

/* Light on the controls: a soft pool of light follows the pointer across a button, as a lamp's glow
   catches a surface (script.js sets --mx and --my). Lighter on rose buttons, rose on pale ones */
.lit { position: relative; isolation: isolate; --lit: color-mix(in srgb, var(--accent) 22%, transparent); }
.btn-primary.lit, .next-btn.lit, .store.lit:hover { --lit: rgba(255, 255, 255, 0.38); }
.lit::before {
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none;
  background: radial-gradient(90px circle at var(--mx, 50%) var(--my, 50%), var(--lit), transparent 70%);
  opacity: 0; transition: opacity 0.35s var(--ease);
}
.lit:hover::before { opacity: 1; }
.design-pick.lit::before { display: none; }
/* a press sends an echo of the control's own outline outward, like the rings of sound */
.press-echo { position: fixed; z-index: 40; pointer-events: none; border: 1px solid var(--accent); }
.pick-go:hover i { transform: translateY(3px); }

/* tap anywhere in the showcase to move it on */
.story { cursor: pointer; -webkit-tap-highlight-color: transparent; }
.story .wrap, .story p, .story h2 { cursor: auto; }
.next-btn {
  display: inline-flex; align-items: center; gap: 12px; height: 54px; padding: 0 22px 0 28px; border-radius: var(--leaf);
  font: 500 16.5px/1 var(--font-display); letter-spacing: 0.01em; white-space: nowrap; cursor: pointer;
  color: var(--accent-ink); background: var(--accent); border: 0;
  box-shadow: 0 10px 24px -12px var(--shade);
  transition: background 0.25s, box-shadow 0.4s var(--ease);
}
.next-btn:hover { background: var(--accent-hi); box-shadow: 0 16px 30px -14px var(--shade); }
.next-btn .ph { font-size: 17px; animation: nudge 2s var(--ease) infinite; }
@keyframes nudge { 0%, 60%, 100% { transform: none; } 30% { transform: translateX(3px); } }
.next-btn-sm { height: 48px; padding: 0 18px 0 22px; font-size: 15.5px; }

/* ---------- Hero: the best seller, in front of the logo's petals ---------- */
.hero { position: relative; min-height: 100vh; min-height: 100svh; display: flex; align-items: center; padding: 104px 0 56px; }
.hero > .wrap { width: 100%; }
.hero-grid { display: grid; grid-template-columns: 1.15fr 1fr; align-items: center; gap: 32px; }
.hero-title {
  font-size: clamp(46px, 5.6vw, 92px); line-height: 0.98; letter-spacing: -0.02em; font-weight: 300;
  margin-bottom: 28px;
}
.hero-title .line { display: block; overflow: hidden; padding-bottom: 0.08em; white-space: nowrap; }
.hero-title .line > span { display: inline-block; transform-origin: 0 100%; }
/* the claim is the headline; the product's full name sits beneath it as its nameplate, in rose */
.hero-title .line:last-child { font-size: clamp(22px, 2.3vw, 38px); letter-spacing: -0.005em; margin-top: 0.35em; }
.hero-sub { font-size: clamp(17px, 1.35vw, 19px); color: var(--muted); max-width: 36ch; margin-bottom: 30px; }
/* the four features: a quiet two-column list, each on its own hairline */
.hero-points { list-style: none; margin: 0 0 36px; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, max-content)); gap: 0 32px; font-size: 15.5px; }
.hero-points li { display: flex; align-items: center; gap: 12px; padding: 11px 0; border-top: 1px solid var(--line); }
.hero-points .ph { color: var(--accent); font-size: 20px; }
.hero-ctas { display: flex; flex-wrap: wrap; gap: 12px; }
.hero-more {
  display: inline-flex; align-items: center; gap: 8px; margin-top: 24px;
  font: 400 16px var(--font-display); color: var(--muted); transition: color 0.25s;
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.3em;
  text-decoration-color: var(--ctl-line);
}
.hero-more:hover { color: var(--ink); text-decoration-color: var(--accent); }
.hero-more .ph { color: var(--accent); font-size: 15px; }
.hero-space { min-height: 66vh; }

/* the logo's petals, opening behind the product: six layers that breathe a little, out of step */
.bloom {
  position: absolute; left: 50%; top: 46%; width: min(118%, 720px); aspect-ratio: 650 / 475;
  transform: translate(-46%, -54%); pointer-events: none; opacity: var(--petal-opacity);
}
/* as the page opens, each petal unfurls from where it joins the flower, in the order the logo's
   intro used (ribbon, swoosh, then the three upper petals, the leg last), coming to rest exactly in
   its place in the logo. After that the logo breathes as one piece (on .bloom itself), so its
   petals never drift out of line with each other */
.bloom img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  transform-origin: var(--o, 46% 78%);
  animation: petal-unfurl 1.25s var(--ease) var(--d, 0s) both;
}
.bloom { animation: bloom-breathe 12s ease-in-out 2.4s infinite; }
@keyframes bloom-breathe {
  0%, 100% { scale: 1; translate: 0 0; }
  50% { scale: 1.025; translate: 0 -6px; }
}
.bloom .p-ribbon { --r: -28deg; --s: 0.25; --o: 47% 59%; --d: 0.15s; }
.bloom .p-swoosh { --r: 34deg; --s: 0.25; --o: 48% 60%; --d: 0.3s; }
.bloom .p-pink { --r: -38deg; --s: 0.05; --o: 60% 76%; --d: 0.5s; }
.bloom .p-top { --r: -62deg; --s: 0.05; --o: 59% 76%; --d: 0.72s; }
.bloom .p-mid { --r: -44deg; --s: 0.05; --o: 62% 78%; --d: 0.88s; }
.bloom .p-leg { --r: 26deg; --s: 0.1; --o: 15% 78%; --d: 1s; }
@keyframes petal-unfurl {
  from { opacity: 0; rotate: var(--r); scale: var(--s); }
  35% { opacity: 1; }
  to { opacity: 1; rotate: 0deg; scale: 1; }
}
/* the still that stands in while the 3D box loads: the box's white face with its print, turned a
   little as the 3D one stands; it fades out under the 3D box once that is drawn */
.hero-poster {
  position: absolute; left: 50%; top: 50%; height: 64%; aspect-ratio: 5.5 / 9; pointer-events: none;
  transform: translate(-50%, -50%) perspective(900px) rotateY(-16deg);
  transition: opacity 0.7s var(--ease);
}
.hero-poster span {
  position: absolute; inset: 0; border-radius: 9% / 6%; padding: 9% 8% 15%;
  background: linear-gradient(100deg, #f8f4ee, #ece6dc 70%, #e2dbd0);
  box-shadow: 0 30px 50px -28px var(--shade), inset 0 0 0 1px rgba(255, 255, 255, 0.6);
}
.hero-poster img { width: 100%; height: 100%; object-fit: cover; border-radius: 3px; }
.hero-space.is-live .hero-poster { opacity: 0; }
.hero-space canvas { transition: opacity 0.7s var(--ease); }
.hero-space:not(.is-live) canvas { opacity: 0; }
.hero-pedestal {
  position: absolute; left: 50%; bottom: 3%; width: 74%; aspect-ratio: 1; pointer-events: none;
  transform: translateX(-50%) translateY(46%) perspective(900px) rotateX(78deg);
}
.hero-pedestal span { position: absolute; inset: 0; border-radius: 50%; }
.hero-pedestal span:first-child { border: 1px solid color-mix(in srgb, var(--accent) 40%, transparent); }
.hero-pedestal span:last-child {
  inset: 20%;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--halo) 60%, transparent), color-mix(in srgb, var(--halo) 12%, transparent) 60%, transparent);
}

/* ---------- Products: the picker's turning stage ---------- */
.products { position: relative; min-height: 100vh; min-height: 100svh; display: flex; flex-direction: column; padding: 112px 0 36px; overflow: hidden; }
.products-head { text-align: center; display: flex; flex-direction: column; align-items: center; }
.products-head .section-title { max-width: 18ch; font-size: clamp(34px, 3.8vw, 56px); }
.stage { position: relative; flex: 1; min-height: 40vh; margin-top: 8px; cursor: grab; touch-action: pan-y; -webkit-tap-highlight-color: transparent; }
.stage:active { cursor: grabbing; }
.stage-models { position: absolute; inset: 0; }
.stage-models canvas { left: 0; width: 100%; top: -4%; height: 108%; }
/* a soft beam from above, onto the product in front: a cone from a point above the stage, its edges
   feathered by the mask itself (a blur filter here re-ran every frame while the light changed colour) */
.stage-beam {
  position: absolute; left: 50%; top: -30%; width: min(620px, 90vw); height: 140%; transform: translateX(-50%); pointer-events: none;
  background: radial-gradient(50% 60% at 50% 0%, color-mix(in srgb, var(--halo) 34%, transparent), transparent 75%);
  -webkit-mask-image: conic-gradient(from 150deg at 50% -32%, transparent 0deg, #000 14deg, #000 46deg, transparent 60deg);
  mask-image: conic-gradient(from 150deg at 50% -32%, transparent 0deg, #000 14deg, #000 46deg, transparent 60deg);
  opacity: 0.6;
}
/* the floor it stands on: a pool of light and a fine ring, seen from the side */
.stage-floor {
  position: absolute; left: 50%; bottom: 4%; width: min(640px, 92vw); aspect-ratio: 1; pointer-events: none;
  transform: translateX(-50%) translateY(46%) perspective(900px) rotateX(78deg);
}
.stage-floor span { position: absolute; border-radius: 50%; }
.stage-floor span:first-child {
  inset: 26%;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--halo) 62%, transparent), color-mix(in srgb, var(--halo) 14%, transparent) 60%, transparent);
}
.stage-floor span:last-child { inset: 12%; border: 1px solid var(--line-2); }
.is-turning .stage-floor span:first-child { animation: floor-flash 1.1s var(--ease); }
@keyframes floor-flash { 0% { transform: scale(0.7); opacity: 0.4; } 35% { transform: scale(1.25); opacity: 1; } 100% { transform: none; opacity: 1; } }

/* the arrows sit close in either side of the name and line, not out at the page's edges; the
   middle keeps one width whichever product is in front, so the arrows never move */
.pick { position: relative; z-index: 1; display: grid; grid-template-columns: 1fr minmax(0, 540px) 1fr; align-items: center; gap: 16px 24px; }
.pick-arrow[data-step="-1"] { justify-self: end; }
.pick-arrow[data-step="1"] { justify-self: start; }
.pick-copy { display: flex; flex-direction: column; align-items: center; text-align: center; min-width: 0; }
.pick-name { font-size: clamp(36px, 4.6vw, 68px); line-height: 1.04; letter-spacing: -0.02em; min-height: 1.1em; }
.pick-name .word { display: inline-block; white-space: nowrap; }
.pick-name .ch { display: inline-block; }
/* the price under the name, quietly: the label's spaced capitals, then the amount in the display face */
.pick-price { display: flex; align-items: baseline; gap: 10px; margin: 6px 0 0; color: var(--ink); }
.pick-price-from { font: var(--label); letter-spacing: var(--label-track); text-transform: uppercase; color: var(--muted); }
.pick-price-amount { font: 400 22px/1.1 var(--font-display); letter-spacing: 0.01em; }
/* room for two lines whichever product is in front, so nothing around it moves when it changes */
.pick-tag { margin: 6px 0 24px; color: var(--muted); font-size: 17px; line-height: 1.6; max-width: 46ch; min-height: 3.2em; }
/* the petals: each button is a full touch target; the petal in front opens wider and takes the rose */
.pick-tabs { display: flex; gap: 4px; margin-top: 16px; }
.pick-tab { position: relative; width: 36px; height: 36px; padding: 0; border: 0; border-radius: 50%; cursor: pointer; background: none; }
.pick-tab::after {
  content: ""; position: absolute; left: 50%; top: 50%; width: 10px; height: 10px; border-radius: 100% 0;
  transform: translate(-50%, -50%) rotate(45deg); background: var(--line-2);
  transition: transform 0.5s var(--ease), background 0.3s var(--ease);
}
.pick-tab:hover::after { background: var(--ctl-line-hi); }
.pick-tab[aria-selected="true"]::after { transform: translate(-50%, -50%) rotate(45deg) scale(1.7); background: var(--accent); }
.pick-arrow {
  width: 58px; height: 58px; border-radius: 50% 10px; cursor: pointer; display: grid; place-items: center;
  font-size: 20px; color: var(--ink); background: var(--ctl-bg); border: 1px solid var(--ctl-line);
  transition: border-color 0.25s, color 0.25s, background 0.25s;
}
.pick-arrow[data-step="-1"] { border-radius: 10px 50%; }
.pick-arrow:hover { border-color: var(--accent); color: var(--accent); }

/* ---------- Features showcase (plays on its own) ---------- */
.show-pin { min-height: 100vh; min-height: 100svh; display: flex; flex-direction: column; padding-top: 96px; }
.show-grid { position: relative; flex: 1; display: flex; align-items: center; gap: 40px; }
.show-captions { position: relative; width: min(480px, 44%); height: 300px; flex: none; }
.show-visual { flex: 1; align-self: stretch; min-height: 60vh; }
.cap {
  position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center; gap: 18px;
  opacity: 0; transform: translateY(30px); transition: opacity 0.7s var(--ease), transform 0.7s var(--ease), filter 0.7s var(--ease);
  filter: blur(6px); pointer-events: none;
}
.cap.is-active { opacity: 1; transform: none; filter: none; }
.cap.is-past { transform: translateY(-30px); }
.cap h2 { font-size: clamp(38px, 4.4vw, 64px); line-height: 1.03; letter-spacing: -0.015em; }
.cap p { color: var(--muted); font-size: 18px; max-width: 34ch; }
.show-bar { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; padding-bottom: 5vh; }

/* the steps: a rail of labels, each with a hairline above it; the one showing fills with rose
   as the time runs down to the next */
.show-steps, .room-steps { display: flex; flex-wrap: wrap; gap: 4px 14px; }
.step {
  position: relative; min-height: 48px; padding: 16px 4px 4px 0; min-width: 7.2em; cursor: pointer; text-align: left;
  font: var(--label); letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted);
  background: none; border: 0;
  transition: color 0.3s var(--ease);
}
.step::before, .step::after {
  content: ""; position: absolute; left: 0; right: 0; top: 4px; height: 2px; border-radius: 2px;
}
.step::before { background: var(--line-2); }
.step::after { background: var(--accent); transform: scaleX(0); transform-origin: 0 50%; transition: transform 0.4s var(--ease); }
.step:hover { color: var(--ink); }
.step.is-active { color: var(--ink); }
.step.is-active::after { transform: scaleX(1); }
.is-playing .step.is-active::after { transition: none; animation: step-fill var(--slide-time, 3.5s) linear forwards; }
@keyframes step-fill { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* ---------- Listen (the chanting devices): recordings of the mantras, set like a track list ---------- */
.listen { min-height: 100vh; min-height: 100svh; display: flex; align-items: center; padding: 116px 0 70px; }
.listen[hidden], .nav-links a[hidden] { display: none !important; }
.listen > .wrap { width: 100%; }
.listen-grid { display: grid; grid-template-columns: 1fr 1.2fr; gap: 64px; align-items: start; }
.listen-text { color: var(--muted); font-size: 18px; margin-top: 22px; max-width: 38ch; }
.clips { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line-2); }
.clip { position: relative; border-bottom: 1px solid var(--line); }
/* each row is one button: the play petal, the mantra's name in English and Devanagari, its length */
.clip-btn {
  width: 100%; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 18px;
  padding: 14px 4px 14px 0; text-align: left; cursor: pointer; color: var(--ink);
  background: none; border: 0; border-radius: 0; font: inherit;
}
.clip-play {
  width: 48px; height: 48px; border-radius: 50% 8px; display: grid; place-items: center;
  font-size: 18px; color: var(--accent); background: var(--ctl-bg); border: 1px solid var(--ctl-line);
  transition: background 0.25s, color 0.25s, border-color 0.25s;
}
.clip-btn:hover .clip-play { border-color: var(--accent); }
.clip.is-playing .clip-play { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.clip-names { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.clip-name { font: 300 clamp(20px, 1.7vw, 24px)/1.25 var(--font-display); }
.clip-deva { font: 400 16px/1.35 var(--font-deva); color: var(--muted); }
.clip-deva:empty { display: none; }
.clip-time { font: 400 14px var(--font-display); color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.clip.is-playing .clip-name { color: var(--accent); }
/* how far it has played: a rose line along the row's own rule */
.clip-bar {
  position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; pointer-events: none;
  background: var(--accent); transform-origin: 0 50%; transform: scaleX(var(--p, 0));
  transition: opacity 0.3s;
}
.clip:not(.is-playing):not(.is-paused) .clip-bar { opacity: 0; }
.clip.is-missing .clip-btn { cursor: default; opacity: 0.55; }

/* ---------- Rooms: the line names a room, the photo shows the lamp there ---------- */
.spaces-sec { min-height: 100vh; min-height: 100svh; display: flex; align-items: center; padding: 116px 0 60px; }
.spaces-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
.spaces { font-size: clamp(42px, 5.2vw, 80px); line-height: 1.04; letter-spacing: -0.02em; font-weight: 300; }
.spaces-lead { display: block; color: var(--muted); }
/* every room name shares one grid cell, so the heading never changes size as they swap */
.spaces-word { display: grid; padding-bottom: 0.08em; }
.spaces-word > span {
  grid-area: 1 / 1; color: var(--accent);
  opacity: 0; filter: blur(10px); transform: translateY(0.45em);
  transition: opacity 0.7s var(--ease), filter 0.7s var(--ease), transform 0.9s var(--ease);
}
.spaces-word > span.is-on { opacity: 1; filter: none; transform: none; }
.spaces-word > span.is-off { transform: translateY(-0.45em); transition-duration: 0.45s; }
.room-steps { margin-top: 44px; gap: 4px 12px; }
.room-step { min-width: 0; padding-right: 6px; font-size: 12px; letter-spacing: 0.14em; }

/* the frame takes the photos' own shape (1430 x 1100), so each room shows whole; its corners are a petal's */
.room-frame {
  position: relative; justify-self: end;
  width: min(100%, calc(70vh * 1.3)); aspect-ratio: 1430 / 1100;
  border-radius: var(--leaf-lg); overflow: hidden; /* the photo (or its placeholder) fills it */
  box-shadow: 0 40px 90px -42px var(--shade), var(--frame-ring);
}
.room { position: absolute; inset: 0; margin: 0; opacity: 0; transition: opacity 0.9s var(--ease); }
.room.is-on { opacity: 1; }
.room-scene {
  position: absolute; inset: 0;
  opacity: 0; transform: scale(1.06); transition: opacity 0.6s var(--ease), transform 4.5s var(--ease);
}
.room.has-photo .room-scene { opacity: 1; }
.room.is-on .room-scene { transform: none; } /* a slow settle while each photo is on screen */
/* the photo and everything on it, in the photo's own pixels, scaled to the frame (--s, set by rooms.js) */
.room-stage { position: absolute; left: 0; top: 0; width: 1430px; height: 1100px; transform-origin: 0 0; transform: scale(var(--s, 0.4)); }
.room-shot { position: absolute; inset: 0; width: 100%; height: 100%; }
.room-shot:not([src]) { visibility: hidden; } /* waiting for its photo: never a broken-image box */
/* the light around the lamp takes the chosen design's colour: hue only, so the photo's own
   brightness and falloff stay */
.room-tint {
  position: absolute; border-radius: 50%; pointer-events: none;
  background: radial-gradient(closest-side, var(--room-glow) 0%, color-mix(in srgb, var(--room-glow) 55%, transparent) 45%, transparent 100%);
  mix-blend-mode: color; opacity: 0.7;
  transition: --room-glow 0.9s var(--ease);
}
/* the chosen design on the lamp's printed panel; rooms.js maps it onto the panel's corners */
.room-art {
  position: absolute; left: 0; top: 0; transform-origin: 0 0;
  overflow: hidden; /* square corners, like the print */
  transition: opacity 0.26s var(--ease);
}
.room-art.is-swapping { opacity: 0; }
.room-art img { width: 100%; height: 100%; object-fit: cover; }
/* backlit: the edges of the print glow softly into the lamp's frame */
.room-art::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  box-shadow: inset 0 0 5px 1px rgba(255, 246, 228, 0.28);
}

/* placeholder until a photo is in: the room's own night tint and a glowing lamp on the wall */
.room-fallback {
  position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 44px;
  background:
    radial-gradient(48% 38% at 50% 42%, rgba(255, 170, 80, 0.4), transparent 70%),
    linear-gradient(180deg, rgb(var(--tint)) 0%, #1c1214 100%);
}
.room.has-photo .room-fallback { display: none; }
.room-lamp {
  width: 78px; height: 94px; border-radius: 14px; border: 6px solid #efe8dc;
  background: radial-gradient(circle at 50% 42%, #fff4cf 0%, #ffc560 22%, #f08a2a 55%, #a3361b 100%);
  box-shadow: 0 18px 40px -16px rgba(0, 0, 0, 0.7);
}
.room-name { font: var(--label); letter-spacing: var(--label-track); text-transform: uppercase; color: rgba(246, 233, 226, 0.7); }

/* ---------- Order: pick a print, then buy ---------- */
.order { padding: 116px 0 80px; min-height: 100vh; min-height: 100svh; display: flex; align-items: center; }
.order > .wrap { width: 100%; }
/* the copy side gets the larger share: the heading holds two lines and the design prints have room */
.order-grid { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: 48px; align-items: center; }
.order-space { min-height: 62vh; }
.order-text { color: var(--muted); font-size: 18px; margin: 18px 0 0; max-width: 38ch; text-wrap: pretty; }

/* the designs: a wall of small prints, each in a petal-cornered frame; the name of the one chosen,
   and a line about it, read beneath */
.design-picks { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 16px 14px; max-width: 620px; margin-top: 28px; }
.design-pick[hidden] { display: none; } /* a design the product on show doesn't offer */
.design-pick {
  position: relative; display: block; padding: 0; cursor: pointer;
  background: none; border: 0; border-radius: 16px 4px; color: var(--muted);
}
.design-pick > span:not(.design-thumb) { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.design-thumb {
  display: block; width: 100%; aspect-ratio: 4 / 5; border-radius: 16px 4px; overflow: hidden;
  background: var(--surface); box-shadow: var(--frame-ring), 0 8px 18px -12px var(--shade);
  transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease);
}
.design-thumb canvas, .design-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
/* the little print lifts, as if picked up to look at */
.design-pick:hover .design-thumb { transform: translateY(-3px); box-shadow: var(--frame-ring), 0 14px 22px -12px var(--shade); }
.design-pick.is-active .design-thumb {
  transform: translateY(-3px);
  box-shadow: 0 0 0 2px var(--bg), 0 0 0 3.5px var(--accent), 0 16px 24px -12px var(--shade);
}
.design-note { min-height: 3.2em; margin: 20px 0 22px; color: var(--muted); font-size: 16px; max-width: 46ch; }
/* a design with a sound shows a speaker on its print; it pulses while the sound plays */
.design-sound {
  position: absolute; right: 4px; bottom: 4px; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%;
  font-size: 13px; color: var(--accent-ink); background: var(--accent);
}
.design-pick.is-playing .design-sound { animation: sound-pulse 1.1s ease-in-out infinite; }
@keyframes sound-pulse { 50% { opacity: 0.55; transform: scale(0.88); } }

/* ---------- Perks (in the buy section) ---------- */
.perks { list-style: none; margin: 0 0 38px; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 24px; color: var(--muted); font: 400 16px var(--font-display); }
.perks li { display: flex; align-items: center; gap: 8px; }
.perks .ph { color: var(--accent); font-size: 19px; }
.perks .perk-price { color: var(--ink); }

.buy-label { font: var(--label); letter-spacing: var(--label-track); text-transform: uppercase; color: var(--muted); margin-bottom: 14px; }
.stores { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; max-width: 540px; }
.store {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  height: 58px; padding: 0 20px 0 24px; border-radius: var(--leaf);
  background: var(--surface); border: 1px solid var(--ctl-line); color: var(--ink);
  font: 500 17px/1 var(--font-display); letter-spacing: 0.01em; white-space: nowrap;
  transition: background 0.25s var(--ease), color 0.25s var(--ease), border-color 0.25s var(--ease);
}
.store .ph { color: var(--accent); font-size: 18px; transition: transform 0.35s var(--ease), color 0.25s; }
.store:hover { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.store:hover .ph { color: var(--accent-ink); transform: translate(2px, -2px); }
.buy-note { min-height: 1.6em; margin-top: 16px; font-size: 15px; color: var(--note); }
.buy-note:empty { margin-top: 0; } /* no gap held for a message that isn't showing */

/* ---------- Maker: who makes them, and the line for custom designs and bulk orders ---------- */
.maker { min-height: 100vh; min-height: 100svh; display: flex; align-items: center; padding: 116px 0 80px; }
.maker > .wrap { width: 100%; }
.maker-grid { display: grid; grid-template-columns: 1fr 1.25fr; gap: 64px; align-items: start; }
.maker-text { font-size: clamp(20px, 1.7vw, 24px); font-weight: 300; line-height: 1.55; max-width: 44ch; text-wrap: pretty; }
/* custom designs and bulk orders: one field of dusty rose, cut like a petal, with the number set large */
.bulk {
  position: relative; overflow: hidden; margin-top: 48px; padding: clamp(28px, 3.4vw, 44px);
  border-radius: var(--leaf-lg); color: var(--panel-ink); background: var(--panel);
  box-shadow: 0 34px 60px -40px var(--shade);
}
.bulk h3 { font: 400 26px/1.2 var(--font-display); letter-spacing: -0.005em; }
.bulk p { color: var(--panel-muted); font-size: 17px; max-width: 46ch; margin: 12px 0 22px; }
/* the number is the one thing to remember here, so it is set large */
.bulk-number {
  display: inline-block; margin-bottom: 26px;
  font: 300 clamp(36px, 3.8vw, 56px)/1 var(--font-display); letter-spacing: 0.02em;
  font-variant-numeric: tabular-nums; color: var(--panel-ink);
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.18em;
  text-decoration-color: color-mix(in srgb, var(--panel-ink) 35%, transparent);
  transition: text-decoration-color 0.25s;
}
.bulk-number:hover { text-decoration-color: var(--panel-ink); }
.bulk-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.bulk .btn-primary { background: var(--panel-ink); color: var(--panel); box-shadow: 0 10px 22px -12px rgba(0, 0, 0, 0.45); }
.bulk .btn-primary:hover { background: #fff; }
.bulk .btn-ghost { color: var(--panel-ink); background: transparent; border-color: color-mix(in srgb, var(--panel-ink) 45%, transparent); }
.bulk .btn-ghost:hover { border-color: var(--panel-ink); }
.bulk .btn-primary.lit { --lit: rgba(255, 255, 255, 0.5); }
.bulk-actions .btn-primary:hover i { transform: none; }

/* links inside running text */
details p a {
  color: var(--ink); text-decoration: underline; text-underline-offset: 3px;
  text-decoration-color: color-mix(in srgb, var(--accent) 60%, transparent);
}
details p a:hover { text-decoration-color: var(--accent); }

/* ---------- FAQ ---------- */
.faq { min-height: 100vh; min-height: 100svh; display: flex; align-items: center; padding: 116px 0 80px; }
.faq > .wrap { width: 100%; }
.faq-grid { display: grid; grid-template-columns: 1fr 1.3fr; gap: 64px; align-items: start; }
.faq-list { display: grid; border-top: 1px solid var(--line-2); }
details { border-bottom: 1px solid var(--line); }
summary {
  list-style: none; cursor: pointer; padding: 24px 0; display: flex; align-items: center; justify-content: space-between; gap: 20px;
  font: 300 clamp(21px, 1.8vw, 26px)/1.3 var(--font-display); letter-spacing: -0.005em;
  transition: color 0.3s var(--ease);
}
summary:hover, details[open] summary { color: var(--accent); }
summary::-webkit-details-marker { display: none; }
/* the plus sits in a small petal outline, and turns to a cross when open */
summary .ph {
  flex-shrink: 0; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50% 6px;
  font-size: 17px; color: var(--accent); border: 1px solid var(--ctl-line);
  transition: transform 0.4s var(--ease), background 0.3s, color 0.3s, border-color 0.3s;
}
summary:hover .ph { border-color: var(--accent); }
details[open] summary .ph { transform: rotate(45deg); background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
details p { padding: 0 0 28px; color: var(--muted); max-width: 56ch; font-size: 17px; }

/* ---------- Footer ---------- */
/* the whole footer fits one screen (the page comes to rest on its foot), so its spacing and the
   closing line step down with the window's height as well as its width */
.footer { padding: clamp(64px, 11vh, 120px) 0 clamp(24px, 4vh, 48px); border-top: 1px solid var(--line); background: linear-gradient(180deg, transparent, color-mix(in srgb, var(--blush) 14%, transparent)); }
.footer-line { font-family: var(--font-display); font-weight: 300; font-size: min(clamp(40px, 5.8vw, 88px), 9.5vh); line-height: 1.02; letter-spacing: -0.025em; max-width: 14ch; margin-bottom: clamp(32px, 7vh, 72px); }
/* the business on the left, then three short columns of links, each under a small spaced label (like
   the nav); the fine print sits on a hairline below */
.footer-grid { display: grid; grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr)); gap: 32px 40px; padding: clamp(28px, 5vh, 48px) 0 clamp(24px, 4.5vh, 44px); border-top: 1px solid var(--line); }
.footer-about p { margin: 18px 0 0; max-width: 34ch; color: var(--muted); font: 400 15.5px/1.6 var(--font-display); }
.footer-head { margin: 6px 0 18px; font: var(--label); letter-spacing: var(--label-track); text-transform: uppercase; color: var(--ink); }
.footer-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.footer-col a { font: 400 16px/1.3 var(--font-display); color: var(--muted); transition: color 0.25s; }
.footer-col a:hover { color: var(--ink); }
.footer-base { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; padding-top: 24px; border-top: 1px solid var(--line); color: var(--muted); font: 400 14px/1.4 var(--font-display); }
.footer-base p { margin: 0; }

/* ---------- Tablet ---------- */
@media (max-width: 1080px) {
  .nav-links { display: none; }
}
@media (max-width: 900px) {
  /* the business across the top, the three columns of links below it */
  .footer-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px 32px; }
  .footer-about { grid-column: 1 / -1; }
}
@media (max-width: 1024px) {
  .nav-links { gap: 22px; }
}

/* ---------- Mobile: single column, the product sits above the copy ---------- */
@media (max-width: 767.98px) {
  .nav { height: 58px; padding: 0 6px 0 12px; top: 10px; gap: 10px; border-radius: 999px 14px; }
  .brand-mark { height: 30px; }
  .brand-name { display: none; }
  .switch-btn { height: 42px; padding: 0 12px 0 14px; font-size: 14px; }
  .nav-buy { height: 42px; padding: 0 16px; font-size: 14.5px; }

  .hero { padding: 80px 0 72px; }
  .hero-grid { grid-template-columns: 1fr; gap: 6px; }
  .hero-space { order: -1; min-height: 36vh; }
  /* on a phone the petals step back, so they never compete with the print on the box */
  .bloom { width: 96%; opacity: calc(var(--petal-opacity) * 0.55); }
  .hero-title { font-size: clamp(40px, 12vw, 58px); margin-bottom: 16px; }
  .hero-sub { margin-bottom: 20px; font-size: 16px; }
  .hero-points { grid-template-columns: 1fr 1fr; gap: 0 14px; font-size: 13.5px; margin-bottom: 24px; }
  .hero-points li { gap: 8px; padding: 9px 0; }
  .hero-points .ph { font-size: 17px; }
  .hero-ctas .btn { flex: 1 1 auto; padding: 0 18px; }
  .hero-more { margin-top: 18px; }

  .products { padding: 88px 0 28px; }
  .stage { min-height: 34vh; }
  .stage-floor { width: 120vw; }
  .pick { grid-template-columns: 1fr; }
  /* phones: the arrows sit either side of the petals */
  .pick-arrow { position: absolute; bottom: -4px; width: 46px; height: 46px; font-size: 18px; }
  .pick-arrow[data-step="-1"] { left: var(--gutter); }
  .pick-arrow[data-step="1"] { right: var(--gutter); }
  .pick-name { font-size: clamp(32px, 9.4vw, 42px); }
  .pick-price { margin-top: 2px; }
  .pick-price-amount { font-size: 19px; }
  .pick-tag { font-size: 15px; margin: 4px 0 14px; }
  .pick-go { width: 100%; }

  .show-pin { padding-top: 76px; }
  .show-grid { flex-direction: column; align-items: stretch; gap: 12px; padding-bottom: 20px; }
  .show-visual { order: -1; flex: 1; min-height: 36vh; }
  .show-captions { width: 100%; height: 176px; }
  .cap { justify-content: flex-end; gap: 10px; }
  .cap h2 { font-size: clamp(32px, 9vw, 42px); }
  .cap p { font-size: 16px; }
  .show-bar { padding-bottom: 3vh; align-items: center; }
  /* on phones the steps become short segments of the rail; each keeps a full 44px touch target */
  .show-steps { gap: 6px; flex-wrap: nowrap; }
  .show-steps .step { min-width: 0; width: 34px; height: 44px; padding: 0; }
  .show-steps .step span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .show-steps .step::before, .show-steps .step::after { top: 21px; }

  .listen { padding: 88px 0 64px; }
  .listen-grid { grid-template-columns: 1fr; gap: 26px; }
  .listen-text { font-size: 16px; margin-top: 14px; }
  .clip-btn { gap: 14px; padding: 12px 2px 12px 0; }
  .clip-play { width: 44px; height: 44px; }

  .spaces-sec { padding: 96px 0 56px; }
  .spaces-grid { grid-template-columns: 1fr; gap: 26px; }
  .spaces { font-size: clamp(38px, 11vw, 54px); }
  .room-steps { margin-top: 22px; gap: 2px 12px; }
  .room-step { font-size: 11px; letter-spacing: 0.14em; }
  .room-frame { justify-self: center; width: min(100%, calc(46svh * 1.3)); border-radius: 40px 10px; }

  .order { padding: 80px 0 100px; }
  .order-grid { grid-template-columns: 1fr; gap: 8px; }
  .order-space { min-height: 34vh; }
  .order-text { font-size: 16px; margin: 12px 0 0; }
  .design-note { margin: 14px 0 22px; font-size: 15px; }
  .perks { margin-bottom: 22px; gap: 6px 16px; font-size: 15px; }
  .stores { grid-template-columns: 1fr; max-width: none; }

  .maker { padding: 84px 0 110px; }
  .maker-grid { grid-template-columns: 1fr; gap: 22px; }
  .bulk { margin-top: 28px; }
  .bulk-actions .btn { flex: 1 1 auto; }
  .faq { padding: 84px 0 110px; }
  .faq-grid { grid-template-columns: 1fr; gap: 28px; }
  summary { padding: 18px 0; font-size: 19px; }
  summary .ph { width: 34px; height: 34px; }
  details p { padding: 0 0 20px; font-size: 16px; }

  .footer { padding: clamp(40px, 8vh, 72px) 0 20px; }
  .footer-line { font-size: min(clamp(32px, 9.4vw, 44px), 6.6vh); margin-bottom: clamp(20px, 4vh, 40px); }
  /* the brand across the top (keeping its name, which the nav drops on a phone), products and the
     page's sections side by side, and the ways to reach us in one row */
  .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 20px; padding: clamp(20px, 4vh, 32px) 0 clamp(18px, 3.5vh, 28px); }
  .footer .brand-name { display: flex; }
  .footer-about p { display: none; }
  .footer-head { margin: 0 0 10px; }
  .footer-col ul { gap: 7px; }
  .footer-col a { font-size: 15px; }
  .footer-col:last-child { grid-column: 1 / -1; }
  .footer-col:last-child ul { display: flex; flex-wrap: wrap; gap: 6px 22px; }
  .footer-base { padding-top: 16px; font-size: 13px; }
  .footer-base .base-more { display: none; }
}
@media (max-width: 380px) {
  .switch-btn { padding: 0 10px 0 12px; font-size: 13px; }
}

/* desktop: the FAQ's rows sit a little closer, so all the questions fit one screen and the snap
   lands on the whole section (an open answer can still make it taller; that is the visitor's doing) */
@media (min-width: 768px) {
  .faq { padding: 100px 0 40px; }
  summary { padding: 15px 0; font-size: clamp(19px, 1.45vw, 22px); }
  details p { padding-bottom: 20px; }
}
/* from tablet width up the questions run in two columns under the heading (an answer opening makes
   only its own row taller), so every product's questions fit one screen */
@media (min-width: 768px) {
  .faq-grid { grid-template-columns: 1fr; gap: 36px; }
  .faq-list { grid-template-columns: 1fr 1fr; column-gap: clamp(28px, 4vw, 56px); align-items: start; border-top: 0; }
  .faq-list details { border-top: 1px solid var(--line); border-bottom: 0; }
}
/* tablets, laptops and desktops: the page snaps a section at a time, so every section must fit the
   window's height, whatever it is (a 1080p laptop at 125% shows only about 730px, a 768p one about
   650px). Each vertical size is capped by the window's height as well as its width: on a tall window
   nothing changes, on a short one headings, spacing, buttons and the prints step down together.
   The caps (the last value in each clamp) are the sizes the page was designed at */
@media (min-width: 768px) {
  .hero { padding: clamp(80px, 11.5vh, 104px) 0 clamp(20px, 6vh, 56px); }
  .products { padding: clamp(80px, 12.4vh, 112px) 0 clamp(14px, 4vh, 36px); }
  .show-pin { padding-top: clamp(78px, 10.7vh, 96px); }
  .listen, .spaces-sec, .maker { padding: clamp(80px, 12.9vh, 116px) 0 clamp(20px, 6vh, 60px); }
  .order { padding: clamp(80px, 12.9vh, 116px) 0 clamp(16px, 3vh, 40px); }
  .faq { padding: clamp(80px, 11vh, 100px) 0 clamp(14px, 4.4vh, 40px); }

  .section-title { font-size: clamp(30px, min(4.6vw, 7.4vh), 68px); }
  .btn:not(.btn-sm), .next-btn { height: clamp(44px, 6vh, 54px); }

  .hero-title { font-size: clamp(38px, min(5.6vw, 10vh), 92px); margin-bottom: clamp(12px, 3.1vh, 28px); }
  .hero-title .line:last-child { font-size: clamp(19px, min(2.3vw, 4.2vh), 38px); }
  .hero-sub { margin-bottom: clamp(12px, 3.3vh, 30px); }
  .hero-points { margin-bottom: clamp(14px, 4vh, 36px); }
  .hero-points li { padding: clamp(5px, 1.2vh, 11px) 0; }
  .hero-more { margin-top: clamp(10px, 2.7vh, 24px); }

  .stage { min-height: 24vh; }
  .pick-name { font-size: clamp(28px, min(4.6vw, 7.6vh), 68px); }
  .pick-price { margin-top: clamp(0px, 0.6vh, 6px); }
  .pick-price-amount { font-size: clamp(17px, 2.6vh, 22px); }
  .pick-tag { margin: clamp(2px, 0.7vh, 6px) 0 clamp(10px, 2.7vh, 24px); }
  .pick-tabs { margin-top: clamp(4px, 1.8vh, 16px); }

  .show-captions { height: clamp(210px, 33vh, 300px); }
  .cap h2 { font-size: clamp(30px, min(4.4vw, 7vh), 64px); }
  .show-bar { padding-bottom: clamp(12px, 5vh, 48px); }

  .spaces { font-size: clamp(34px, min(5.2vw, 8.8vh), 80px); }
  .room-steps { margin-top: clamp(16px, 4.9vh, 44px); }

  .order-space { min-height: 50vh; }
  .order-text { margin: clamp(6px, 2vh, 18px) 0 0; max-width: 54ch; } /* one line beside a wide column */
  .design-picks { max-width: clamp(400px, 72vh, 600px); margin-top: clamp(16px, 3.4vh, 28px); gap: clamp(10px, 1.9vh, 16px) clamp(9px, 1.6vh, 14px); }
  .design-note { margin: clamp(10px, 2.2vh, 20px) 0 clamp(8px, 2vh, 18px); }
  .perks { margin-bottom: clamp(14px, 4vh, 38px); }
  .buy-label { margin-bottom: clamp(8px, 1.6vh, 14px); }
  .store { height: clamp(44px, 6.4vh, 58px); }
  .buy-note { min-height: 0; margin-top: clamp(6px, 1.8vh, 16px); }

  .maker-text { font-size: clamp(16px, min(1.7vw, 3.3vh), 24px); }
  .bulk { margin-top: clamp(16px, 5.3vh, 48px); padding: clamp(18px, 4.6vh, 44px); }
  .bulk h3 { font-size: clamp(19px, 2.9vh, 26px); }
  .bulk p { font-size: clamp(14.5px, 1.9vh, 17px); margin: clamp(4px, 1.3vh, 12px) 0 clamp(10px, 2.4vh, 22px); }
  .bulk-number { font-size: clamp(28px, min(3.8vw, 6.2vh), 56px); margin-bottom: clamp(10px, 2.9vh, 26px); }
  .bulk-actions { flex-wrap: nowrap; }
  .bulk-actions .btn { padding: 0 clamp(14px, 2vw, 28px); }

  .faq-grid { gap: clamp(14px, 4vh, 36px); }
  summary { padding: clamp(8px, 1.7vh, 15px) 0; }
}
/* upright tablets: the column is narrow but tall, so six prints to a row, each larger */
@media (min-width: 768px) and (max-width: 1024px) and (orientation: portrait) {
  .design-picks { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px 10px; max-width: none; }
  .order-text { display: none; } /* four rows of prints need the room; the heading says it already */
}
/* laptop screens up to 820px tall: the line under the buy heading goes (the heading says it already),
   so the three rows of design prints keep their size and the section still fits one screen */
@media (min-width: 768px) and (max-height: 820px) {
  .order-text { display: none; }
}
/* medium-width windows: the price and the three perks under the designs keep to one row */
@media (min-width: 768px) and (max-width: 1240px) {
  .perks { font-size: 15px; gap: 6px 18px; }
}
/* short windows (700px tall or less): the longest text steps down a size */
@media (min-width: 768px) and (max-height: 700px) {
  .design-note { font-size: 15px; line-height: 1.45; min-height: 2.9em; }
  .design-picks { row-gap: 9px; }
  .perks { margin-bottom: clamp(12px, 3vh, 20px); font-size: 15px; gap: 6px 18px; } /* the price and three perks keep to one row */
  .stage { min-height: 21vh; } /* room for the price under the product's name */
  .maker-text { font-size: clamp(15px, 2.8vh, 18px); line-height: 1.5; }
  .hero-more { margin-top: 8px; }
  .hero-points li { padding: 4px 0; }
}

/* ---------- Phones: every section fits one screen, so each snap lands on a whole section ----------
   (the page snaps a section at a time; a section taller than the screen would stop part-way) */
@media (max-width: 767.98px) {
  /* best seller: the two buttons side by side, tighter spacing */
  .hero { padding: 70px 0 18px; }
  .hero-space { min-height: 30svh; }
  .hero-title { margin-bottom: 12px; }
  .hero-sub { font-size: 15px; line-height: 1.5; margin-bottom: 14px; }
  .hero-points { margin-bottom: 16px; }
  .hero-points li { padding: 7px 0; }
  .hero-ctas { flex-wrap: nowrap; gap: 8px; }
  .hero-ctas .btn { flex: 1 1 auto; min-width: 0; height: 50px; padding: 0 14px; font-size: 15px; gap: 8px; }
  .hero-ctas .btn-ghost { flex: 0 0 auto; }
  .hero-more { margin-top: 14px; font-size: 15px; }

  /* designs: a grid of prints (on phones, one row swiped sideways: see below) */
  .order { padding: 70px 0 18px; }
  /* minmax(0, 1fr): the long sideways row of prints must not stretch the column past the screen */
  .order-grid { grid-template-columns: minmax(0, 1fr); }
  .order-copy { min-width: 0; }
  .order-space { min-height: 24svh; }
  .order-title { font-size: clamp(28px, 8.4vw, 34px); }
  .order-text { font-size: 15px; line-height: 1.5; margin: 8px 0 0; max-width: 46ch; }
  .design-picks { grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 12px 10px; max-width: 600px; margin-top: 18px; }
  .design-note { min-height: 3em; margin: 8px 0 12px; font-size: 14.5px; line-height: 1.5; }
  .perks { margin-bottom: 14px; gap: 4px 14px; font-size: 14px; }
  .buy-label { margin-bottom: 10px; }
  /* the three stores in one row */
  .stores { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  .store { height: 50px; padding: 0 10px 0 14px; font-size: 15px; gap: 4px; }
  .store .ph { font-size: 15px; }
  .buy-note { min-height: 0; margin-top: 10px; font-size: 14px; }

  /* made by: smaller type, the two contact buttons side by side */
  .maker { padding: 70px 0 18px; }
  .maker-grid { gap: 14px; }
  .maker .section-title { font-size: clamp(30px, 9vw, 36px); }
  .maker-text { font-size: 16px; line-height: 1.55; }
  .bulk { margin-top: 18px; padding: 22px 20px; border-radius: 40px 10px; }
  .bulk h3 { font-size: 20px; }
  .bulk p { font-size: 14.5px; line-height: 1.5; margin: 8px 0 14px; }
  .bulk-number { font-size: clamp(28px, 8.6vw, 34px); margin-bottom: 16px; }
  .bulk-actions { flex-wrap: nowrap; gap: 8px; }
  .bulk-actions .btn { height: 48px; padding: 0 14px; font-size: 15px; }

  /* FAQ: compact rows, each still a full 44px touch target */
  .faq { padding: 70px 0 18px; }
  .faq-grid { gap: 16px; }
  .faq .section-title { font-size: clamp(30px, 9vw, 36px); }
  summary { padding: 8px 0; min-height: 46px; font-size: 16px; gap: 12px; }
  summary .ph { width: 30px; height: 30px; font-size: 14px; }
  details p { padding: 0 0 14px; font-size: 15px; line-height: 1.55; }
}
/* phones (480px wide or less): the designs are one row of prints, swiped sideways, fading at the
   edge to show there are more. Wider than that (large phones held sideways, small tablets, narrow
   windows), they stay a grid */
@media (max-width: 480.98px) {
  .design-picks {
    display: flex; gap: 10px; overflow-x: auto; overscroll-behavior-x: contain; max-width: none;
    margin: 12px calc(-1 * var(--gutter)) 0; padding: 6px var(--gutter) 8px; scroll-padding-inline: var(--gutter);
    scroll-snap-type: x mandatory; scrollbar-width: none;
    -webkit-mask-image: linear-gradient(90deg, #000 85%, transparent); mask-image: linear-gradient(90deg, #000 85%, transparent);
  }
  .design-picks::-webkit-scrollbar { display: none; }
  .design-pick { flex: 0 0 60px; scroll-snap-align: start; }
}
/* short phones (under 700px tall): a little tighter still */
@media (max-width: 767.98px) and (max-height: 700px) {
  .hero-space { min-height: 24svh; }
  .hero-more { display: none; } /* the picker is the very next section, and in the nav */
  .hero-points { font-size: 13px; }
  .order-space { min-height: 17svh; }
  .order-text { display: none; } /* the heading says it: tap a design, see it on the product */
  .maker-text { font-size: 15px; }
  .bulk p { font-size: 14px; }
  summary { min-height: 44px; padding: 6px 0; font-size: 15.5px; }
  .faq { padding-top: 64px; }
  .faq-grid { gap: 10px; }
  .spaces-sec { padding: 70px 0 18px; }
}

/* phones under 640px tall (an iPhone SE in Safari shows about 550px): the picker, the rooms and
   "Made by" step down with the screen's height too */
@media (max-width: 767.98px) and (max-height: 640px) {
  .products { padding-top: 64px; }
  .stage { min-height: 22svh; }
  .pick-name { font-size: clamp(26px, 5.6vh, 36px); }
  .pick-tag { font-size: 14px; line-height: 1.45; margin: 4px 0 10px; }
  .pick-go { height: 44px; }
  .pick-tabs { margin-top: 6px; }

  .spaces-sec { padding: 64px 0 14px; }
  .spaces-grid { gap: 14px; }
  .spaces { font-size: clamp(30px, 6.4vh, 40px); }
  .room-steps { margin-top: 12px; }
  .room-frame { width: min(100%, calc(36svh * 1.3)); }

  .maker { padding-top: 64px; }
  .maker .section-title { font-size: clamp(26px, 5.4vh, 32px); }
  .maker-text { font-size: 14.5px; line-height: 1.5; }
  .bulk { margin-top: 12px; padding: 16px 18px; }
  .bulk h3 { font-size: 18px; }
  .bulk p { font-size: 13.5px; margin: 6px 0 10px; }
  .bulk-number { font-size: 26px; margin-bottom: 12px; }
  .bulk-actions .btn { height: 44px; }

  .faq { padding-top: 62px; }
  .order { padding-top: 62px; }
  .design-picks { margin-top: 6px; }
  .design-note { margin: 6px 0 10px; }
  .order .perks { margin-bottom: 12px; }
}

/* between phone and laptop (481-767px wide): the designs are a grid of eight to a row under a
   shorter product, and the prints size to the screen's height too, so all three rows of prints
   and the store buttons fit one screen */
@media (min-width: 481px) and (max-width: 767.98px) {
  .order-space { min-height: 18svh; }
  .design-picks { max-width: min(600px, 72vh); }
  .design-note { margin-top: 14px; }
  .order .perks { margin-bottom: 20px; }
}
@media (min-width: 481px) and (max-width: 767.98px) and (max-height: 760px) {
  .order-text { display: none; } /* the heading says it already */
}
@media (min-width: 481px) and (max-width: 767.98px) and (max-height: 700px) {
  .design-picks { margin-top: 14px; }
  .order-space { min-height: max(12svh, 84px); }
}
@media (min-width: 481px) and (max-width: 767.98px) and (max-height: 600px) {
  .order .perks { display: none; } /* a very short window: the prints and the store buttons come first */
}

/* the FAQ shows as many questions as fit one screen, and the rest behind "More questions"
   (script.js measures it; a tap shows them all, and the section then scrolls through its length) */
.faq-list details.is-folded { display: none; }
.faq-more {
  justify-self: start; margin-top: 12px; min-height: 44px; padding: 0 20px; border-radius: var(--leaf); cursor: pointer;
  display: inline-flex; align-items: center; gap: 8px;
  font: 500 15px var(--font-display); color: var(--accent); background: var(--ctl-bg); border: 1px solid var(--ctl-line);
  transition: border-color 0.25s;
}
.faq-more:hover { border-color: var(--accent); }
.faq-more[hidden] { display: none; }

/* very short screens (a phone held sideways, a tiny window): sections can't fit, so the page
   scrolls freely there instead of snapping part-way (see "Scrolling" in script.js too) */
@media (max-height: 519px) {
  html { scroll-snap-type: none; }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  /* keep fades and colour changes, drop spatial movement and loops */
  *, *::before, *::after { animation: none !important; }
  .spaces-word > span, .cap, .room-scene, .design-thumb, .bloom img { transform: none !important; filter: none !important; }
  .hero-poster { transition: none; }
  .nav-links a::after { transition: none; }
}
@media (prefers-reduced-transparency: reduce) {
  .nav { background: var(--nav-solid); backdrop-filter: none; -webkit-backdrop-filter: none; }
}

/* ---------- Browser surfaces ---------- */
::selection { background: color-mix(in srgb, var(--accent) 30%, transparent); color: var(--ink); }
html { scrollbar-color: var(--scroll-thumb) var(--bg); scrollbar-width: thin; caret-color: var(--accent); accent-color: var(--accent); }
::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: var(--scroll-thumb); border-radius: 999px; border: 2px solid var(--bg); }
::-webkit-scrollbar-thumb:hover { background: var(--scroll-thumb-hi); }
a { text-underline-offset: 0.2em; }

/* ---------- Low-end devices (set by perf.js): skip the costliest compositing effects ---------- */
.lite .nav { background: var(--nav-solid); backdrop-filter: none; -webkit-backdrop-filter: none; }
.lite .cap, .lite .spaces-word > span { filter: none !important; }
.lite .night::after { display: none; }
.lite .bloom, .lite .bloom img { animation: none; }
/* the page's light changes colour at once instead of fading, which repaints the whole screen for over a second */
:root.lite { transition: none; }