/* ==========================================================================
   LUMYN — "Tunable Light" design system
   The whole UI is lit by a virtual luminaire; the accent is the
   warm(2700K) ↔ cool(6000K) temperature gradient. Never flat accent fills —
   the gradient appears only as LIGHT (glows) and THIN LINES.
   ========================================================================== */

:root {
  --canvas:  #0E0B09;
  --surface: #1A1512;
  --warm:    #F0B267;
  --cool:    #A8C5E0;
  --text:    #EDE6DC;
  --muted:   #8A817A;

  /* 0 = fully cool (6500K), 1 = fully warm (2700K). Driven by scroll in JS. */
  --temp: 1;
  /* Live accent = the current colour of the virtual luminaire. */
  --accent: color-mix(in oklab, var(--cool) calc((1 - var(--temp)) * 100%), var(--warm));
  --grad: linear-gradient(90deg, var(--warm), var(--cool));
  --grad-v: linear-gradient(180deg, var(--cool), var(--warm));

  --font-display: "Cabinet Grotesk", "Switzer", system-ui, sans-serif;
  --font-body: "Switzer", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, monospace;

  --gutter: clamp(1.25rem, 5vw, 6rem);
  --header-h: 4.5rem;
}

*, *::before, *::after { box-sizing: border-box; }

/* NO native scroll-behavior:smooth — Lenis owns smoothing, and it turns
   ScrollTrigger's internal measure-scroll into an async animation, offsetting
   every trigger by the current scroll position on any mid-page refresh */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }

body {
  margin: 0;
  background: var(--canvas);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;   /* NOT `hidden` — that creates a scroll container and kills position:sticky */
}

img { max-width: 100%; display: block; }
a { color: inherit; }
[hidden] { display: none !important; }   /* keep the hidden attribute winning over display rules */

h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.02;
  letter-spacing: -0.02em;
  margin: 0 0 1.5rem;
  text-wrap: balance;
}
h1 { font-size: clamp(3rem, 9vw, 7.5rem); font-weight: 800; }
h2 { font-size: clamp(2.25rem, 6vw, 4.75rem); }
h3 { font-size: clamp(1.25rem, 2.4vw, 1.6rem); margin-bottom: .6rem; }

p { margin: 0 0 1rem; }
.mono { font-family: var(--font-mono); font-weight: 400; }

.eyebrow {
  font-size: .75rem;
  letter-spacing: .22em;
  color: var(--muted);
  margin-bottom: 1.75rem;
  display: flex; align-items: center; gap: .9rem;
}
.eyebrow::before {
  content: ""; width: 2.4rem; height: 1px;
  background: var(--grad); flex: none;
}

.lede {
  font-size: clamp(1.05rem, 1.6vw, 1.3rem);
  color: color-mix(in oklab, var(--text) 82%, var(--muted));
  max-width: 34em;
}

/* Keyboard focus — always visible, temperature-tinted */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 2px;
}

/* ==========================================================================
   Buttons
   ========================================================================== */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--font-body); font-weight: 600; font-size: .95rem;
  text-decoration: none; cursor: pointer;
  padding: .85em 1.9em; border-radius: 100px;
  transition: box-shadow .35s, transform .35s, background-color .35s, border-color .35s;
}
.btn--primary {
  color: #14100a;
  background: var(--warm);
  border: 1px solid var(--warm);
  box-shadow: 0 0 0 rgba(240, 178, 103, 0);
}
.btn--primary:hover {
  box-shadow: 0 0 28px rgba(240, 178, 103, .38), 0 0 64px rgba(240, 178, 103, .16);
  transform: translateY(-1px);
}
.btn--ghost {
  color: var(--text);
  background: transparent;
  border: 1px solid color-mix(in oklab, var(--muted) 55%, transparent);
}
.btn--ghost:hover { border-color: var(--accent); }

/* ==========================================================================
   Preloader — light warms from 6500K to 2700K
   ========================================================================== */
.preloader {
  position: fixed; inset: 0; z-index: 100;
  background: var(--canvas);
  display: grid; place-items: center;
  transition: opacity .8s ease, visibility .8s;
}
.preloader.is-done { opacity: 0; visibility: hidden; }
.preloader__glow {
  position: absolute; inset: 0;
  background: radial-gradient(ellipse 60% 45% at 50% 42%, var(--pre-glow, rgba(168,197,224,.14)), transparent 70%);
}
.preloader__center { position: relative; display: grid; justify-items: center; gap: 1.6rem; }
.preloader__logo { opacity: .9; }
.preloader__line {
  width: min(320px, 60vw); height: 1px;
  background: color-mix(in oklab, var(--muted) 30%, transparent);
  overflow: hidden;
}
.preloader__line span {
  display: block; height: 100%; width: 100%;
  background: var(--grad);
  transform: scaleX(0); transform-origin: left;
}
.preloader__kelvin { font-size: .75rem; letter-spacing: .3em; color: var(--muted); }

/* ==========================================================================
   WebGL canvas — fixed, behind everything
   ========================================================================== */
#gl {
  position: fixed; inset: 0; z-index: 0;
  width: 100%; height: 100%;
  pointer-events: none;
}

/* ==========================================================================
   Header
   ========================================================================== */
.site-header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 30;
  height: var(--header-h);
  display: flex; align-items: center; gap: 2.5rem;
  padding: 0 var(--gutter);
  transition: background-color .4s, backdrop-filter .4s;
}
.site-header.is-scrolled,
.site-header.menu-open {
  background: color-mix(in srgb, var(--canvas) 78%, transparent);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(237, 230, 220, .06);
}
.site-header__logo img { height: 51px; width: auto; }  /* +50% per client */
.site-header__nav { display: flex; gap: 1.6rem; margin-left: auto; align-items: center; }
@media (max-width: 980px) { .site-header__nav { display: none; } }  /* 7 items need room */
.site-header__nav a {
  font-size: .9rem; font-weight: 500; text-decoration: none;
  color: color-mix(in oklab, var(--text) 78%, var(--muted));
  position: relative; padding: .3rem 0;
}
.site-header__nav a::after {
  content: ""; position: absolute; left: 0; bottom: 0;
  width: 100%; height: 1px; background: var(--grad);
  transform: scaleX(0); transform-origin: left; transition: transform .35s;
}
.site-header__nav a:hover { color: var(--text); }
.site-header__nav a:hover::after { transform: scaleX(1); }
.site-header__cta { padding: .6em 1.4em; font-size: .85rem; }

/* Mobile hamburger — replaces the desktop nav below 980px */
.nav-toggle {
  display: none;
  flex-direction: column; justify-content: center; gap: 5px;
  width: 44px; height: 44px; flex: none;
  padding: 10px; margin-right: -10px;
  background: none; border: 0; cursor: pointer;
}
.nav-toggle span {
  display: block; width: 22px; height: 2px; border-radius: 2px;
  background: var(--text);
  transition: transform .35s cubic-bezier(.2, .7, .2, 1), opacity .25s;
}
.nav-toggle.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle.is-open span:nth-child(2) { opacity: 0; }
.nav-toggle.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
@media (max-width: 980px) {
  .nav-toggle { display: inline-flex; }
  .site-header__cta { margin-left: auto; }   /* push CTA + burger to the right edge */
}

/* Slide-down panel — frosted, same treatment as the desktop dropdowns */
.mobile-nav {
  position: fixed; top: var(--header-h); left: 0; right: 0; z-index: 29;
  display: grid; align-content: start;
  padding: .8rem var(--gutter) 1.8rem;
  max-height: calc(100vh - var(--header-h)); max-height: calc(100svh - var(--header-h));
  overflow-y: auto;
  background: rgba(20, 17, 14, .97);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(237, 230, 220, .1);
  box-shadow: 0 24px 60px rgba(0, 0, 0, .55);
  opacity: 0; visibility: hidden; transform: translateY(-12px);
  transition: opacity .3s ease, transform .3s ease, visibility .3s;
}
.mobile-nav.is-open { opacity: 1; visibility: visible; transform: none; }
@media (min-width: 981px) { .mobile-nav { display: none; } }
.mobile-nav a {
  padding: .55em 0;
  font-size: .95rem; font-weight: 500; text-decoration: none;
  color: color-mix(in oklab, var(--text) 78%, var(--muted));
  border-bottom: 1px solid rgba(237, 230, 220, .05);
}
.mobile-nav a:hover { color: var(--text); }
.mobile-nav__head {
  font-size: .62rem; letter-spacing: .24em; color: var(--accent);
  margin: 1.4rem 0 .3rem;
}

/* Dropdown menus — mirror the live site's Lumyn Living / Lumyn Smart groups */
.nav-item { position: relative; display: flex; align-items: center; }
.nav-parent {
  display: inline-flex; align-items: center; gap: .35rem;
  font: inherit; font-size: .9rem; font-weight: 500;
  color: color-mix(in oklab, var(--text) 78%, var(--muted));
  background: none; border: 0; padding: .3rem 0; cursor: pointer;
  transition: color .3s;
}
.nav-parent svg { width: 13px; height: 13px; transition: transform .3s; }
.nav-item:hover .nav-parent, .nav-item:focus-within .nav-parent { color: var(--text); }
.nav-item:hover .nav-parent svg, .nav-item:focus-within .nav-parent svg { transform: rotate(180deg); }
.nav-drop {
  position: absolute; top: 100%; left: 50%; transform: translate(-50%, 10px);
  min-width: 15rem; padding: .55rem;
  background: rgba(20, 17, 14, .97);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(237, 230, 220, .1);
  border-radius: 12px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, .55);
  opacity: 0; visibility: hidden;
  transition: opacity .25s ease, transform .25s ease, visibility .25s;
}
.nav-item:hover .nav-drop, .nav-item:focus-within .nav-drop {
  opacity: 1; visibility: visible; transform: translate(-50%, 4px);
}
.nav-drop a {
  display: block; padding: .55em .9em; border-radius: 8px;
  font-size: .88rem; white-space: nowrap;
}
.nav-drop a::after { content: none; }   /* no underline sweep inside the panel */
.nav-drop a:hover { background: color-mix(in oklab, var(--accent) 12%, transparent); color: var(--text); }

/* ==========================================================================
   Scenes — tall scroll wrappers with a sticky 100vh stage
   ========================================================================== */
.scene { position: relative; z-index: 5; }
.scene--hero     { height: 170vh; }
.scene--console  { height: 300vh; }
.scene--ambience { height: 400vh; }
.scene--home     { height: 280vh; }
.scene--detail   { height: 240vh; }

.stage {
  position: sticky; top: 0;
  height: 100vh; height: 100svh;
  overflow: hidden;
  display: flex; align-items: center;
}
.stage__content {
  position: relative; z-index: 3;
  width: 100%;
  padding: calc(var(--header-h) + 2vh) var(--gutter) 6vh;
}
.stage__content--split {
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: 4rem; align-items: center;
}
.stage__content--reverse { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); }
.stage__content--reverse .split__copy { order: 2; }
.stage__content--reverse .split__visual { order: 1; }
.split__visual { min-height: 40vh; }

/* Hero */
.hero__plate {
  position: absolute; inset: 0; z-index: 1;
  width: 100%; height: 100%; object-fit: cover;
}
/* second plate, cross-faded in behind the slider for slides with their own
   background photo (see data-bg="alt" on a .hero__slide + heroSlider() in main.js) */
.hero__plate--alt {
  z-index: 2; opacity: 0;
  transition: opacity 1s ease;
}
.hero__plate--alt.is-active { opacity: 1; }
.hero__content { max-width: 60rem; }
.hero__title {
  /* capped at 90px so the three slide headlines sit comfortably over the photo */
  font-size: clamp(2.75rem, 7vw, 5.625rem);
  text-shadow: 0 4px 60px rgba(0,0,0,.55);
}
.hero__actions { display: flex; gap: 1rem; flex-wrap: wrap; margin-top: 2.2rem; }
.hero__hint {
  position: absolute; z-index: 3; bottom: 2rem; left: var(--gutter);
  display: flex; align-items: center; gap: 1rem;
  font-size: .65rem; letter-spacing: .28em; color: var(--muted);
}
.hero__hint-line { width: 5rem; height: 1px; background: var(--grad); display: block; }
#heroKelvin { color: var(--accent); }

/* Hero slider — two cross-fading slides over the shared plate/WebGL */
.hero__slider { position: absolute; inset: 0; z-index: 3; }
.hero__slide {
  position: absolute; inset: 0;
  display: flex; align-items: center;
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .8s ease, visibility .8s;
}
.hero__slide.is-active { opacity: 1; visibility: visible; pointer-events: auto; }
.hero__controls {
  position: absolute; z-index: 4; bottom: 2rem; right: var(--gutter);
  display: flex; align-items: center; gap: 1rem;
}
.hero__arrow {
  display: grid; place-items: center;
  width: 2.4rem; height: 2.4rem; border-radius: 50%;
  background: color-mix(in srgb, var(--canvas) 40%, transparent);
  border: 1px solid rgba(237, 230, 220, .18);
  color: var(--text); cursor: pointer;
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  transition: background-color .3s, border-color .3s;
}
.hero__arrow:hover { background: color-mix(in srgb, var(--canvas) 65%, transparent); border-color: var(--accent); }
.hero__arrow svg { width: 1.1rem; height: 1.1rem; }
.hero__dots { display: flex; gap: .55rem; }
.hero__dot {
  width: .55rem; height: .55rem; border-radius: 50%; padding: 0;
  background: rgba(237, 230, 220, .28); border: none; cursor: pointer;
  transition: background-color .3s, transform .3s;
}
.hero__dot.is-active { background: var(--accent); transform: scale(1.25); }
@media (max-width: 640px) {
  .hero__controls { bottom: 1.2rem; left: 50%; right: auto; transform: translateX(-50%); }
  .hero__arrow { width: 2.1rem; height: 2.1rem; }
}

/* A veil the WebGL/hero uses to keep text legible over plates */
.scene--hero .stage::after {
  content: ""; position: absolute; inset: 0; z-index: 2;
  background:
    linear-gradient(180deg, rgba(14,11,9,.62) 0%, rgba(14,11,9,.15) 45%, rgba(14,11,9,.7) 100%),
    linear-gradient(90deg, rgba(14,11,9,.55) 0%, transparent 60%);
  pointer-events: none;
}

/* Readability scrims — always keep copy on a dark bed, never raw over imagery.
   Copy sits left on console/home, right on detail (reverse layout). */
.scene--console .stage::before,
.scene--home .stage::before,
.scene--detail .stage::before,
.scene--ambience .stage::before {
  content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none;
}
.scene--console .stage::before {
  background: linear-gradient(90deg, rgba(14,11,9,.78) 0%, rgba(14,11,9,.3) 45%, transparent 68%);
}
/* home tours full-bleed rooms — lighter scrim, the shader lifts exposure too */
.scene--home .stage::before {
  background: linear-gradient(90deg, rgba(14,11,9,.6) 0%, rgba(14,11,9,.2) 42%, transparent 62%);
}
.scene--detail .stage::before {
  background: linear-gradient(270deg, rgba(14,11,9,.78) 0%, rgba(14,11,9,.3) 45%, transparent 68%);
}
.scene--ambience .stage::before {
  background: linear-gradient(180deg, rgba(14,11,9,.6) 0%, transparent 34%, transparent 58%, rgba(14,11,9,.66) 100%);
}
/* Text lift over any residual bright pixels */
.stage h1, .stage h2, .stage .lede, .ambience__mode p {
  text-shadow: 0 2px 26px rgba(0, 0, 0, .5);
}

@media (max-width: 720px) {
  /* stacked layout: darken the top (copy) and ease off toward the visual below */
  .scene--console .stage::before,
  .scene--home .stage::before,
  .scene--detail .stage::before {
    background: linear-gradient(180deg, rgba(14,11,9,.8) 0%, rgba(14,11,9,.45) 48%, rgba(14,11,9,.12) 72%);
  }
}

/* Spec lists */
.spec-list {
  list-style: none; margin: 2.4rem 0 0; padding: 0;
  display: grid; gap: .85rem;
  font-size: .8rem; color: var(--muted);
}
.spec-list li {
  display: flex; gap: 1.2rem; align-items: baseline;
  padding-bottom: .85rem;
  border-bottom: 1px solid rgba(237, 230, 220, .07);
}
.spec-list li span {
  flex: 0 0 6.5rem;
  font-size: .68rem; letter-spacing: .18em; color: var(--accent);
}

/* Ambience captions */
.ambience__content { align-self: flex-start; padding-top: calc(var(--header-h) + 4vh); }
.ambience__caption {
  position: absolute; z-index: 3;
  left: var(--gutter); bottom: 7vh;
  width: min(30em, 70vw);   /* absolute container needs explicit width or children collapse */
  min-height: 6.5rem;
}
.ambience__mode {
  position: absolute; left: 0; bottom: 0; width: 100%;
  opacity: 0; transform: translateY(12px);
  transition: opacity .45s ease, transform .45s ease;
}
.ambience__mode.is-active { opacity: 1; transform: none; }
.ambience__kelvin {
  display: block; font-size: .7rem; letter-spacing: .24em;
  color: var(--accent); margin-bottom: .5rem;
}
.ambience__mode p { font-size: 1.1rem; color: var(--text); }

/* Whole-home — room-name captions ride the ambience caption mechanics */
.home__content { max-width: 44rem; }
.home__caption .room-name {
  font-family: var(--font-display, inherit);
  font-size: clamp(1.5rem, 2.6vw, 2.2rem);
  font-weight: 700; color: var(--text); margin: 0;
  text-shadow: 0 2px 22px rgba(0,0,0,.55);
}

/* ==========================================================================
   Flow sections (ecosystem, lead)
   ========================================================================== */
.section {
  position: relative; z-index: 5; padding: 10vh 0;
  /* solid bed so WebGL scenes never bleed through behind flow content,
     with a faint luminaire glow baked in */
  background:
    radial-gradient(55% 38% at 68% 0%, rgba(240, 178, 103, .05), transparent 70%),
    var(--canvas);
}
.section__inner { padding: 0 var(--gutter); max-width: 90rem; margin: 0 auto; }
.section__inner--narrow { max-width: 56rem; }

/* Ecosystem grid */
.eco-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 1.1rem; margin-top: 3.5rem;
}
.eco-card {
  position: relative; overflow: hidden;
  border-radius: 14px;
  padding: 7.5rem 1.6rem 1.6rem;
  background: var(--surface);
  border: 1px solid rgba(237, 230, 220, .06);
  isolation: isolate;
  transition: transform .45s cubic-bezier(.2,.7,.2,1), border-color .45s;
}
.eco-card::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background-size: cover; background-position: top center;
  opacity: .55; transition: opacity .45s, transform .6s cubic-bezier(.2,.7,.2,1);
}
/* Card art — the closest relevant shot we have per product, standing in until
   real product photography arrives (URLs relative to this stylesheet).
   console = dark touch glass · scenes = movie mood · light = cove lighting ·
   motion = daylit sheers · secure = brass hardware close-up */
.eco-card--console::before { background-image: url(../assets/img/tile-glass.svg); }
.eco-card--app::before     { background-image: url(../assets/img/tile-plaster.svg); }
.eco-card--scenes::before  { background-image: url(../assets/img/ambience-movie.svg); }
.eco-card--light::before   { background-image: url(../assets/img/ambience-dusk.svg); }
.eco-card--motion::before  { background-image: url(../assets/img/ambience-day.svg); }
.eco-card--secure::before  { background-image: url(../assets/img/tile-brass.svg); }

/* Winning (sg) card shots — IMAGE-PROMPTS.md §8; console/motion/secure are AI
   stand-ins until real product photography lands. */
.eco-card--console::before { background-image: url(../assets/img/sg-card-console.webp); }
.eco-card--app::before     { background-image: url(../assets/img/sg-card-app.webp); }
.eco-card--scenes::before  { background-image: url(../assets/img/sg-card-scenes.webp); }
.eco-card--light::before   { background-image: url(../assets/img/sg-card-light.webp); }
.eco-card--motion::before  { background-image: url(../assets/img/sg-card-motion.webp); }
.eco-card--secure::before  { background-image: url(../assets/img/sg-card-secure.webp); }
.eco-card::after {  /* warm light sweeps up on hover */
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, transparent 30%, rgba(240,178,103,.22));
  opacity: 0; transition: opacity .45s;
}
.eco-card:hover { transform: translateY(-5px); border-color: rgba(240,178,103,.35); }
.eco-card:hover::before { opacity: .72; transform: scale(1.04); }
.eco-card:hover::after { opacity: 1; }
.eco-card__tag {
  position: absolute; top: 1.2rem; left: 1.6rem;
  font-size: .62rem; letter-spacing: .22em; color: var(--accent);
}
.eco-card h3 { text-shadow: 0 2px 18px rgba(0,0,0,.6); }
.eco-card p { font-size: .92rem; color: color-mix(in oklab, var(--text) 75%, var(--muted)); margin: 0; }

/* Live scene demos (app + panel slides) — press a control, the room follows */
.demo-room {
  position: relative; overflow: hidden;
  aspect-ratio: 16 / 10;
  border-radius: 18px;
  border: 1px solid rgba(237, 230, 220, .08);
  background: #0a0806;
  box-shadow: 0 30px 80px rgba(0, 0, 0, .5);
}
.demo-room__img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; opacity: 0; transition: opacity .8s ease;
}
.demo-room__img.is-active { opacity: 1; }
/* Floating status pills over the room (fan / curtains / light) */
.demo-pill {
  position: absolute; z-index: 2;
  display: flex; align-items: center; gap: .55rem;
  padding: .55em 1em; border-radius: 999px;
  background: rgba(16, 13, 11, .62);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(237, 230, 220, .14);
  color: var(--text);
  font-family: var(--font-mono); font-size: .58rem; letter-spacing: .16em;
  white-space: nowrap;
}
.demo-pill svg { width: 14px; height: 14px; color: var(--accent); flex: none; }
.demo-pill--fan     { left: 5%;  top: 10%; }
.demo-pill--curtain { right: 4%; top: 22%; }
.demo-pill--light   { right: 4%; bottom: 9%; }
.demo-pill--ac      { left: 5%;  bottom: 9%; }
@keyframes pill-bump {
  0% { transform: scale(.9); opacity: .3; }
  60% { transform: scale(1.06); }
  100% { transform: scale(1); opacity: 1; }
}
.demo-pill.is-bump { animation: pill-bump .5s ease; }

/* Demo slides: room viewport left, control surface right */
.demo-split {
  display: grid; grid-template-columns: 1.25fr .85fr;
  gap: 3rem; align-items: center;
  margin-top: 3.2rem;
}
.demo-side { position: relative; display: flex; flex-direction: column; gap: 1rem; align-items: center; }
/* "Tap to try" tooltip — points at the device, invites the first tap, hides once used */
.demo-tip {
  position: absolute; top: 0; left: 50%; z-index: 5;
  transform: translate(-50%, -62%);
  padding: .5rem .85rem; border-radius: 999px;
  background: var(--accent); color: #1a1206;
  font-size: .56rem; letter-spacing: .18em; text-transform: uppercase; font-weight: 500;
  white-space: nowrap; pointer-events: none;
  box-shadow: 0 8px 24px rgba(240, 178, 103, .35);
  opacity: 0; visibility: hidden;
  transition: opacity .4s ease, visibility .4s;
}
.demo-tip::after {
  content: ""; position: absolute; top: 100%; left: 50%; transform: translateX(-50%);
  border: 6px solid transparent; border-top-color: var(--accent);
}
.scene-demo.is-invite .demo-tip { opacity: 1; visibility: visible; }
@media (prefers-reduced-motion: no-preference) {
  .scene-demo.is-invite .demo-tip { animation: demo-tip-bob 1.5s ease-in-out infinite; }
}
@keyframes demo-tip-bob {
  0%, 100% { transform: translate(-50%, -62%); }
  50%      { transform: translate(-50%, -88%); }
}
/* The phone render carries transparent padding above the handset, so the tooltip
   is anchored inside the figure just above the screen — hugging the phone. */
.demo-tip--phone { top: 9%; transform: translate(-50%, -100%); }
@media (prefers-reduced-motion: no-preference) {
  .scene-demo.is-invite .demo-tip--phone { animation: demo-tip-bob-phone 1.5s ease-in-out infinite; }
}
@keyframes demo-tip-bob-phone {
  0%, 100% { transform: translate(-50%, -100%); }
  50%      { transform: translate(-50%, calc(-100% - 7px)); }
}
/* 3D panel render with live HTML keys on the six rendered buttons.
   --x/--y per key are % of the image — retune if panel-3d.webp is reshot. */
.panel3d {
  position: relative; margin: 0; width: 100%;
  border-radius: 18px; overflow: hidden;
  box-shadow: 0 30px 80px rgba(0, 0, 0, .5);
}
.panel3d img { display: block; width: 100%; height: auto; }
.p3d-btn {
  position: absolute; left: var(--x); top: var(--y);
  width: 12%; aspect-ratio: 1; transform: translate(-50%, -50%);
  display: grid; place-items: center;
  background: transparent; border: 0; border-radius: 50%; cursor: pointer;
  color: rgba(237, 230, 220, .75);
  transition: color .3s;
}
.p3d-btn svg { width: 40%; height: 40%; }
.p3d-btn span {
  position: absolute; top: 102%; left: 50%; transform: translateX(-50%);
  font-family: var(--font-mono); font-size: .5rem; letter-spacing: .16em;
  text-transform: uppercase; color: rgba(237, 230, 220, .45);
  transition: color .3s;
}
.p3d-btn:hover { color: var(--text); }
.p3d-btn:hover span { color: var(--muted); }
.p3d-btn.is-active { color: var(--warm); }
.p3d-btn.is-active span { color: var(--warm); }
.p3d-btn.is-active::before {
  content: ""; position: absolute; inset: 12%;
  border-radius: 50%;
  box-shadow: 0 0 0 2px var(--warm), 0 0 22px rgba(240, 178, 103, .55);
}

/* real product photo already has its own printed icons/labels — the live
   buttons become invisible hit-zones + an active glow ring, nothing drawn
   on top of the panel's own graphics. Smaller hit circles keep the tightly
   stacked rows (4 rows on this panel vs. the old 2) from touching. */
.panel3d--photo .p3d-btn { width: 9%; }
.panel3d--photo .p3d-btn svg,
.panel3d--photo .p3d-btn span { display: none; }

/* 3D phone render — the live UI sits inside the switched-off screen.
   Screen bounds are % of each set's render; retune if the phone is reshot. */
.phone3d {
  position: relative; margin: 0;
  width: min(310px, 86%);
}
.phone3d > img {
  display: block; width: 100%; height: auto;
  filter: drop-shadow(0 26px 60px rgba(0, 0, 0, .45));
}
.phone3d__screen {
  position: absolute;
  display: flex; flex-direction: column;
  padding: 1.2rem 1rem 1rem;
  overflow: hidden;
}
.phone3d__screen { left: 10.7%; top: 11%; width: 77.7%; height: 76.2%; padding-top: 2rem; }
.demo-ui__room { font-size: .62rem; letter-spacing: .24em; color: var(--muted); margin: 0 0 .3rem; }
.demo-ui__kelvin { font-size: 1.7rem; color: var(--accent); margin: 0 0 1rem; }
.demo-ui__chips { display: flex; gap: .5rem; margin-bottom: 1rem; }
/* scoped to the phone demo — the lead form has its own `.chip` (label+span) */
.demo-ui__chips .chip {
  flex: 1; font-family: var(--font-mono); font-size: .62rem; letter-spacing: .18em;
  padding: .75em 0; border-radius: 999px; cursor: pointer;
  color: var(--muted); background: transparent;
  border: 1px solid rgba(237, 230, 220, .18);
  transition: color .3s, border-color .3s, background .3s;
}
.demo-ui__chips .chip.is-active {
  color: var(--accent); border-color: var(--accent);
  background: color-mix(in oklab, var(--accent) 12%, transparent);
}
.app-row {
  display: flex; justify-content: space-between; align-items: center;
  width: 100%; padding: .8rem .2rem; margin: 0;
  background: transparent; border: 0; cursor: pointer;
  border-top: 1px solid rgba(237, 230, 220, .08);
  color: var(--muted); font-size: .6rem; letter-spacing: .2em;
  transition: color .3s;
}
.app-row:hover { color: var(--text); }
.app-row__value { color: var(--accent); }

/* ==========================================================================
   Interactive-demo affordance — signal that the app/panel are tappable.
   A resting ring makes the panel keys read as buttons on touch (no :hover),
   the attract sequence pulses each "pressed" control, and the hint glows
   while auto-play is running (until the user takes over).
   ========================================================================== */
.p3d-btn { box-shadow: inset 0 0 0 1px rgba(237, 230, 220, .16); }
.p3d-btn.is-active { box-shadow: none; }
@keyframes demo-cue-ring {
  0%   { box-shadow: 0 0 0 0 rgba(240, 178, 103, .5); }
  100% { box-shadow: 0 0 0 16px rgba(240, 178, 103, 0); }
}
@keyframes demo-row-flash {
  0%   { background: color-mix(in oklab, var(--accent) 22%, transparent); }
  100% { background: transparent; }
}
@media (prefers-reduced-motion: no-preference) {
  .p3d-btn.is-cue::after {
    content: ""; position: absolute; inset: 12%; border-radius: 50%;
    animation: demo-cue-ring .95s ease-out;
  }
  .demo-ui__chips .chip.is-cue { animation: demo-cue-ring .95s ease-out; }
  .app-row.is-cue { animation: demo-row-flash .95s ease-out; }
}

/* Lumyn Living band */
.living-band {
  margin-top: 5rem;
  display: flex; align-items: center; justify-content: space-between; gap: 3rem;
  padding: 2.8rem 3rem;
  background: var(--surface);
  border-radius: 14px;
  border: 1px solid rgba(237, 230, 220, .06);
  position: relative; overflow: hidden;
}
.living-band::before {
  content: ""; position: absolute; inset: 0 auto 0 0; width: 2px;
  background: var(--grad-v);
}
.living-band h3 { font-size: clamp(1.4rem, 2.6vw, 2rem); max-width: 18em; }
.living-band p:last-child { margin: 0; color: var(--muted); max-width: 38em; }
.living-band .btn { flex: none; }

/* ==========================================================================
   Lumyn Living / interiors — media + copy split
   ========================================================================== */
.feature-split {
  display: grid; grid-template-columns: 1.1fr 1fr;
  gap: 4rem; align-items: center;
}
.feature-media {
  margin: 0; overflow: hidden;
  border-radius: 18px;
  border: 1px solid rgba(237, 230, 220, .08);
  box-shadow: 0 30px 80px rgba(0, 0, 0, .5);
}
.feature-media img {
  width: 100%; height: 100%; object-fit: cover; aspect-ratio: 4 / 5;
  transition: transform .8s cubic-bezier(.2,.7,.2,1);
}
.feature-media:hover img { transform: scale(1.03); }
.feature-copy .hero__actions { margin-top: 2.2rem; }
/* theater flips the split (copy left, wide media right) */
.feature-split--reverse .feature-media { order: 2; }

/* product-on-plinth presentation for small device shots (switch plates, consoles)
   that shouldn't be cover-cropped like room photography */
.feature-media--device {
  display: flex; align-items: center; justify-content: center;
  background: radial-gradient(circle at 50% 38%, rgba(240, 178, 103, .08), transparent 70%);
}
.feature-media--device img {
  width: auto; height: 84%; max-width: 62%; object-fit: contain;
}
.feature-media--wide img { aspect-ratio: 16 / 11; }

/* ==========================================================================
   Wall decor — murals / mud art / hangings
   ========================================================================== */
.decor-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 1.1rem; margin-top: 3.5rem;
}
.decor-card {
  position: relative; overflow: hidden;
  border-radius: 14px;
  background: var(--surface);
  border: 1px solid rgba(237, 230, 220, .06);
  transition: transform .45s cubic-bezier(.2,.7,.2,1), border-color .45s;
}
.decor-card img {
  width: 100%; aspect-ratio: 4 / 5; object-fit: cover;
  transition: transform .6s cubic-bezier(.2,.7,.2,1), opacity .45s;
  opacity: .85;
}
.decor-card:hover { transform: translateY(-5px); border-color: rgba(240,178,103,.35); }
.decor-card:hover img { transform: scale(1.04); opacity: 1; }
.decor-card__copy {
  position: absolute; inset: auto 0 0 0; z-index: 1;
  padding: 3.5rem 1.6rem 1.5rem;
  background: linear-gradient(180deg, transparent, rgba(10, 8, 6, .88) 55%);
}
.decor-card__tag {
  display: block; font-size: .62rem; letter-spacing: .22em;
  color: var(--accent); margin-bottom: .5rem;
}
.decor-card__copy h3 { text-shadow: 0 2px 18px rgba(0,0,0,.6); }
.decor-card__copy p { font-size: .92rem; color: color-mix(in oklab, var(--text) 75%, var(--muted)); margin: 0; }

/* ==========================================================================
   Made in India — homegrown manufacturing band
   ========================================================================== */
.mii-band {
  display: grid; grid-template-columns: minmax(14rem, 1fr) 2.2fr;
  gap: 4rem; align-items: center;
  padding: clamp(2rem, 5vw, 4rem);
  background: var(--surface);
  border-radius: 16px;
  border: 1px solid rgba(237, 230, 220, .06);
  position: relative; overflow: hidden;
}
.mii-band::before {  /* tricolour — the one non-temperature line on the site */
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, #FF9933 0 33.3%, #EDE6DC 33.3% 66.6%, #138808 66.6% 100%);
}
.mii__logo {
  margin: 0; align-self: center; justify-self: center;
  width: min(21rem, 100%);
  perspective: 900px;   /* 3D space for the card tilt */
}
.mii__logo img {
  width: 100%; height: auto;
  /* white 3D card so the dark lion emblem reads on the dark band */
  background: #fff;
  border-radius: 18px;
  padding: 1.9rem 1.6rem;
  box-shadow:
    0 24px 55px rgba(0, 0, 0, .5),
    0 0 70px rgba(240, 178, 103, .38);          /* warm brand glow */
  transition: transform .6s cubic-bezier(.2, .7, .2, 1), box-shadow .6s;
}
/* hover: card leans into 3D, glow shifts warm-left / cool-right */
.mii__logo:hover img {
  transform: rotateY(-13deg) rotateX(6deg);
  box-shadow:
    0 34px 70px rgba(0, 0, 0, .5),
    -26px 30px 80px rgba(240, 178, 103, .42),
    26px -14px 70px rgba(168, 197, 224, .22);
}
/* dashed slot shows until assets/img/make-in-india.png exists */
.mii__logo .mii__logo-slot { display: none; }
.mii__logo.is-empty .mii__logo-slot {
  display: grid; place-items: center; text-align: center;
  aspect-ratio: 1; border-radius: 14px;
  border: 1px dashed rgba(237, 230, 220, .25);
  color: var(--muted); font-size: .68rem; letter-spacing: .24em; line-height: 2;
}
.mii__copy .lede { max-width: 40em; }

/* ==========================================================================
   Privacy & security — trust cards
   ========================================================================== */
.trust-grid {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 1.1rem; margin-top: 3.5rem;
}
/* fewer than 4 cards: match column count so the row stays evenly filled */
.trust-grid--3 { grid-template-columns: repeat(3, 1fr); }
.trust-grid--2 { grid-template-columns: repeat(2, 1fr); }
.trust-grid--1 { grid-template-columns: 1fr; max-width: 26rem; }
.trust-card {
  position: relative;
  padding: 1.8rem 1.6rem;
  background: var(--surface);
  border: 1px solid rgba(237, 230, 220, .06);
  border-radius: 14px;
  overflow: hidden;
  transition: transform .45s cubic-bezier(.2,.7,.2,1), border-color .45s;
}
.trust-card::before {  /* thin temperature line, like the lead form */
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: var(--grad);
  opacity: .5; transition: opacity .45s;
}
.trust-card:hover { transform: translateY(-5px); border-color: rgba(240, 178, 103, .3); }
.trust-card:hover::before { opacity: 1; }
.trust-card__icon {
  display: grid; place-items: center;
  width: 3rem; height: 3rem; margin-bottom: 1.4rem;
  border-radius: 50%;
  color: var(--accent);
  background: color-mix(in oklab, var(--accent) 10%, transparent);
  border: 1px solid color-mix(in oklab, var(--accent) 30%, transparent);
}
.trust-card__icon svg { width: 1.35rem; height: 1.35rem; }
.trust-card__tag {
  display: block; font-size: .62rem; letter-spacing: .22em;
  color: var(--accent); margin-bottom: .6rem;
}
.trust-card h3 { font-size: 1.15rem; }
.trust-card p { font-size: .9rem; color: color-mix(in oklab, var(--text) 72%, var(--muted)); margin: 0; }
a.trust-card { display: block; text-decoration: none; color: inherit; }
a.trust-card:hover h3 { color: var(--warm); }

/* Blog article body */
.article-meta { margin: 1.2rem 0 0; font-size: .68rem; letter-spacing: .2em; color: var(--muted); }
.article { padding-top: 2vh; padding-bottom: 2vh; }
.article h2 { font-size: clamp(1.4rem, 2.6vw, 1.9rem); margin: 2.6rem 0 1.1rem; }
.article h2:first-child { margin-top: 0; }
.article p { font-size: 1.02rem; line-height: 1.75; color: color-mix(in oklab, var(--text) 88%, var(--muted)); }
.article strong { color: var(--text); font-weight: 600; }
.article__quote {
  margin: 2.2rem 0; padding: .3rem 0 .3rem 1.6rem;
  border-left: 2px solid var(--warm);
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(1.1rem, 2vw, 1.4rem); line-height: 1.4;
  color: var(--text);
}
.article__list { margin: 1.4rem 0; padding-left: 1.3rem; display: grid; gap: .7rem; }
.article__list li { font-size: 1.02rem; line-height: 1.6; color: color-mix(in oklab, var(--text) 85%, var(--muted)); }

/* ==========================================================================
   Live This Smart — single full-bleed lifestyle moment
   Background photo: assets/img/lifestyle-bedroom.webp — swap that file to change it.
   ========================================================================== */
.innovation-hero {
  position: relative; z-index: 5; overflow: hidden;
  min-height: 90vh; min-height: 90svh;
  display: flex; align-items: center;
}
.innovation-hero__bg {
  position: absolute; inset: 0; z-index: 0;
  width: 100%; height: 100%; object-fit: cover;
}
.innovation-hero::after {   /* readability scrim, same language as the hero */
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(180deg, rgba(14, 11, 9, .68) 0%, rgba(14, 11, 9, .2) 40%, rgba(14, 11, 9, .5) 100%),
    linear-gradient(90deg, rgba(14, 11, 9, .55) 0%, transparent 55%);
}
.innovation-hero__content {
  position: relative; z-index: 3;
  padding: calc(var(--header-h) + 4vh) var(--gutter);
  max-width: 42rem;
}
.innovation-hero__content h2, .innovation-hero__content .lede { text-shadow: 0 2px 26px rgba(0, 0, 0, .5); }

/* ==========================================================================
   Lead form — multi-step
   ========================================================================== */
.lead-form {
  margin-top: 3rem;
  background: var(--surface);
  border: 1px solid rgba(237, 230, 220, .07);
  border-radius: 16px;
  padding: clamp(1.5rem, 4vw, 3rem);
  position: relative; overflow: hidden;
}
.lead-form::before { /* thin temperature line across the top */
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: var(--grad);
}
.lead-form__progress { display: flex; gap: .5rem; margin-bottom: 2.2rem; }
.lead-form__progress span {
  width: 2.6rem; height: 2px; border-radius: 2px;
  background: rgba(237, 230, 220, .12);
  transition: background-color .4s;
}
.lead-form__progress span.is-active { background: var(--warm); box-shadow: 0 0 10px rgba(240,178,103,.5); }

.lead-step { border: 0; margin: 0; padding: 0; display: none; }
.lead-step.is-active { display: block; animation: step-in .45s cubic-bezier(.2,.7,.2,1); }
@keyframes step-in { from { opacity: 0; transform: translateY(14px); } }
.lead-step legend {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(1.3rem, 2.6vw, 1.8rem);
  padding: 0; margin-bottom: 1.6rem;
}

.chip-group { display: flex; flex-wrap: wrap; gap: .8rem; }
.chip { position: relative; }
.chip input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.chip span {
  display: inline-block; padding: .8em 1.6em;
  border-radius: 100px; font-size: .95rem; font-weight: 500;
  border: 1px solid rgba(237, 230, 220, .18);
  color: color-mix(in oklab, var(--text) 80%, var(--muted));
  transition: border-color .3s, color .3s, box-shadow .3s, background-color .3s;
  cursor: pointer;
}
.chip:hover span { border-color: var(--accent); color: var(--text); }
.chip input:checked + span {
  border-color: var(--warm); color: #14100a; background: var(--warm);
  box-shadow: 0 0 20px rgba(240,178,103,.3);
}
.chip input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 3px; }

.field-group { display: grid; gap: 1.4rem; max-width: 30rem; }
.field { display: grid; gap: .5rem; }
.field > span { font-size: .62rem; letter-spacing: .2em; color: var(--muted); }
.field input {
  background: transparent; color: var(--text);
  font: inherit; padding: .7em 0;
  border: 0; border-bottom: 1px solid rgba(237, 230, 220, .2);
  transition: border-color .3s;
}
.field input:focus { outline: none; border-bottom-color: var(--warm); }

.hp { position: absolute; left: -5000px; opacity: 0; }

.lead-form__nav { display: flex; gap: 1rem; margin-top: 2.4rem; }
.lead-form__status { min-height: 1.4em; margin: 1.2rem 0 0; font-size: .75rem; letter-spacing: .12em; color: var(--accent); }

/* ==========================================================================
   Inner pages — hero band, FAQ accordion, contact
   ========================================================================== */
.page-hero {
  position: relative; overflow: hidden;
  display: flex; align-items: flex-end;
  min-height: 52vh; min-height: 52svh;
  padding: calc(var(--header-h) + 10vh) var(--gutter) 7vh;
}
.page-hero__bg {
  position: absolute; inset: 0; z-index: 0;
  width: 100%; height: 100%; object-fit: cover;
}
.page-hero::after {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(180deg, rgba(14,11,9,.55) 0%, rgba(14,11,9,.25) 45%, rgba(14,11,9,.85) 100%),
    linear-gradient(90deg, rgba(14,11,9,.5) 0%, transparent 60%);
}
.page-hero__content { position: relative; z-index: 2; max-width: 60rem; }
.page-hero h1 { font-size: clamp(2.6rem, 6.5vw, 5.5rem); margin-bottom: .8rem; }
.page-hero .lede { margin: 0; }

/* FAQ accordion — native details/summary, styled like the surface cards */
.faq-list { display: grid; gap: .9rem; margin-top: 3rem; }
.faq-item {
  background: var(--surface);
  border: 1px solid rgba(237, 230, 220, .07);
  border-radius: 14px;
  overflow: hidden;
}
.faq-item summary {
  display: flex; align-items: center; justify-content: space-between; gap: 1.5rem;
  padding: 1.3rem 1.6rem;
  cursor: pointer; list-style: none;
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(1rem, 1.8vw, 1.2rem);
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: "+"; flex: none;
  font-family: var(--font-mono); font-size: 1.2rem; color: var(--accent);
  transition: transform .3s;
}
.faq-item[open] summary::after { transform: rotate(45deg); }
.faq-item p {
  margin: 0; padding: 0 1.6rem 1.4rem;
  color: color-mix(in oklab, var(--text) 75%, var(--muted));
}
.faq-item summary:hover { color: var(--warm); }

/* Perk strips — compact icon cards between sections (inner pages).
   They carry their own background band now, so they need real padding. */
.section--perks { padding: 10vh 0; }
.perk-grid {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 1.1rem; margin-top: 3rem;
}
.perk {
  position: relative;
  display: grid; gap: .9rem; align-content: start;
  padding: 1.7rem 1.5rem;
  background: color-mix(in srgb, var(--surface) 60%, transparent);
  border: 1px solid rgba(237, 230, 220, .06);
  border-radius: 14px;
  transition: transform .45s cubic-bezier(.2, .7, .2, 1), border-color .45s;
}
.perk:hover { transform: translateY(-4px); border-color: rgba(240, 178, 103, .3); }
.perk__step {
  position: absolute; top: 1.2rem; right: 1.4rem;
  font-size: .68rem; letter-spacing: .18em;
  color: color-mix(in oklab, var(--accent) 55%, transparent);
}
.perk__icon {
  display: grid; place-items: center;
  width: 2.7rem; height: 2.7rem; border-radius: 12px;
  color: var(--accent);
  background: color-mix(in oklab, var(--accent) 10%, transparent);
  border: 1px solid color-mix(in oklab, var(--accent) 28%, transparent);
}
.perk__icon svg { width: 1.25rem; height: 1.25rem; }
.perk h3 { font-size: 1.02rem; margin: 0; }
.perk p { font-size: .85rem; margin: 0; color: color-mix(in oklab, var(--text) 70%, var(--muted)); }
@media (max-width: 1024px) { .perk-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .perk-grid { grid-template-columns: 1fr; } }

/* Three-across variant — even category/spec grids with no step numbers (6 items) */
.perk-grid--3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 1024px) { .perk-grid--3 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .perk-grid--3 { grid-template-columns: 1fr; } }

/* --------------------------------------------------------------------------
   Alternating section backgrounds (inner pages): dark → light → image+overlay
   -------------------------------------------------------------------------- */
/* LIGHT: re-map the theme tokens locally — components restyle themselves */
.section--light {
  --surface: #FFFFFF;
  --text: #241D16;
  --muted: #6E645C;
  background:
    radial-gradient(55% 38% at 68% 0%, rgba(240, 178, 103, .14), transparent 70%),
    #F2ECE3;
  color: var(--text);
}
/* borders were tuned for dark — flip them */
.section--light :is(.perk, .trust-card, .faq-item, .compare, .feature-media, .voice-band, .living-band, .contact-card, .decor-card) {
  border-color: rgba(36, 29, 22, .12);
}
.section--light :is(.perk, .trust-card, .faq-item, .compare, .voice-band) { background: #FFFFFF; }
.section--light .perk { box-shadow: 0 10px 30px rgba(36, 29, 22, .07); }
.section--light .trust-card { box-shadow: 0 10px 30px rgba(36, 29, 22, .07); }
.section--light .faq-item summary:hover { color: #B77A2D; }
.section--light .compare__row div { border-top-color: rgba(36, 29, 22, .08); }
.section--light .compare__head span:first-child { color: #B77A2D; background: rgba(240, 178, 103, .16); }
.section--light .compare__row div:first-child { background: rgba(240, 178, 103, .09); }
.section--light .compare__row div:first-child::before { color: #B77A2D; }
.section--light .voice-band__assistants li { border-bottom-color: rgba(36, 29, 22, .1); }
.section--light .spec-list li { border-bottom-color: rgba(36, 29, 22, .12); }
.section--light .ambience__kelvin, .section--light .trust-card__tag,
.section--light .perk__step, .section--light .decor-card__tag,
.section--light .eco-card__tag { color: #B77A2D; }
.section--light .perk__icon, .section--light .trust-card__icon {
  color: #B77A2D;
  background: rgba(240, 178, 103, .14);
  border-color: rgba(183, 122, 45, .35);
}
.section--light .voice-chip {
  color: var(--text);
  border-color: rgba(183, 122, 45, .4);
  background: rgba(240, 178, 103, .12);
}
.section--light .voice-band__assistants svg { color: #B77A2D; }
.section--light .eyebrow::before { background: linear-gradient(90deg, #B77A2D, #6E8CA8); }

/* IMAGE: full-bleed photo with a dark overlay; content sits above */
.section--image {
  position: relative; isolation: isolate;
  background-size: cover; background-position: center;
}
.section--image::before {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: rgba(10, 8, 6, .82);
}
.section--image > .section__inner { position: relative; z-index: 2; }
.section--image h2 { text-shadow: 0 2px 26px rgba(0, 0, 0, .5); }
.section--image .compare, .section--image .voice-band { background: rgba(20, 17, 14, .92); }
.section--image .perk, .section--image .trust-card { background: rgba(20, 17, 14, .82); }

/* Mission & vision — two feature cards (about page, sits on the image band) */
.mv-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; }
.mv-card {
  position: relative; overflow: hidden;
  padding: clamp(2rem, 4vw, 3rem);
  background: rgba(20, 17, 14, .9);
  border: 1px solid rgba(237, 230, 220, .1);
  border-radius: 16px;
}
.mv-card::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: var(--grad);
}
.mv-card__tag {
  display: block; font-size: .62rem; letter-spacing: .24em;
  color: var(--accent); margin-bottom: 1.2rem;
}
.mv-card h2 { font-size: clamp(1.5rem, 2.6vw, 2.2rem); }
.mv-card p { margin: 0; color: color-mix(in oklab, var(--text) 80%, var(--muted)); }
@media (max-width: 900px) { .mv-grid { grid-template-columns: 1fr; } }

/* Voice band — Alexa-featured, sample commands as chips */
.voice-band {
  display: grid; grid-template-columns: 1.5fr 1fr;
  gap: 3rem; align-items: center;
  padding: clamp(2rem, 5vw, 3.5rem);
  background: var(--surface);
  border-radius: 16px;
  border: 1px solid rgba(237, 230, 220, .06);
  position: relative; overflow: hidden;
}
.voice-band::before {
  content: ""; position: absolute; inset: 0 auto 0 0; width: 2px;
  background: var(--grad-v);
}
.voice-chips { display: flex; flex-wrap: wrap; gap: .7rem; margin-top: 1.8rem; }
.voice-chip {
  font-family: var(--font-mono); font-size: .72rem; letter-spacing: .06em;
  padding: .75em 1.25em; border-radius: 999px;
  color: var(--text);
  border: 1px solid color-mix(in oklab, var(--accent) 35%, transparent);
  background: color-mix(in oklab, var(--accent) 8%, transparent);
}
.voice-band__assistants {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: 1rem; align-content: center;
}
.voice-band__assistants li {
  display: flex; gap: .9rem; align-items: center;
  padding-bottom: 1rem;
  border-bottom: 1px solid rgba(237, 230, 220, .07);
  font-size: .9rem; color: var(--muted);
}
.voice-band__assistants li:last-child { border-bottom: 0; padding-bottom: 0; }
.voice-band__assistants strong { color: var(--text); font-weight: 600; }
.voice-band__assistants svg { width: 20px; height: 20px; color: var(--accent); flex: none; }
@media (max-width: 900px) { .voice-band { grid-template-columns: 1fr; gap: 2rem; } }

/* Comparison table — the LUMYN way vs the usual way */
.compare {
  margin-top: 3rem;
  border: 1px solid rgba(237, 230, 220, .07);
  border-radius: 16px;
  overflow: hidden;
  background: color-mix(in srgb, var(--surface) 55%, transparent);
}
.compare__head, .compare__row { display: grid; grid-template-columns: 1fr 1fr; }
.compare__head span {
  padding: 1.1rem 1.6rem;
  font-size: .68rem; letter-spacing: .22em;
}
.compare__head span:first-child {
  color: var(--warm);
  background: color-mix(in oklab, var(--warm) 9%, transparent);
}
.compare__head span:last-child { color: var(--muted); }
.compare__row div {
  display: flex; gap: .8rem; align-items: baseline;
  padding: 1.05rem 1.6rem;
  font-size: .92rem;
  border-top: 1px solid rgba(237, 230, 220, .05);
}
.compare__row div:first-child {
  background: color-mix(in oklab, var(--warm) 5%, transparent);
  color: var(--text);
}
.compare__row div:first-child::before { content: "✓"; color: var(--warm); flex: none; }
.compare__row div:last-child { color: var(--muted); }
.compare__row div:last-child::before { content: "✕"; color: color-mix(in oklab, var(--muted) 60%, transparent); flex: none; }
@media (max-width: 720px) {
  .compare__head span, .compare__row div { padding: .85rem 1rem; font-size: .8rem; }
}

/* Contact page */
.contact-grid {
  display: grid; grid-template-columns: 1fr 1.4fr;
  gap: 3rem; margin-top: 3rem; align-items: start;
}
.contact-card {
  background: var(--surface);
  border: 1px solid rgba(237, 230, 220, .07);
  border-radius: 16px;
  padding: 2rem;
  display: grid; gap: 1.6rem;
  position: relative; overflow: hidden;
}
.contact-card::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: var(--grad);
}
.contact-card .mono { font-size: .62rem; letter-spacing: .24em; color: var(--accent); display: block; margin-bottom: .4rem; }
.contact-card a, .contact-card address {
  color: var(--text); text-decoration: none; font-style: normal; line-height: 1.7;
}
.contact-card a:hover { color: var(--warm); }
.contact-card .lead-form, .contact-grid .lead-form { margin-top: 0; }
@media (max-width: 900px) { .contact-grid { grid-template-columns: 1fr; } }

/* ==========================================================================
   Footer
   ========================================================================== */
.site-footer {
  position: relative; z-index: 5;
  border-top: 1px solid rgba(237, 230, 220, .07);
  padding: 4.5rem var(--gutter) 2rem;
  background: color-mix(in srgb, var(--canvas) 92%, black);
}
.site-footer__inner {
  display: grid; grid-template-columns: 1.6fr 1.1fr 1.1fr .9fr 1.1fr 1.1fr .8fr;
  gap: 2.2rem; max-width: 90rem; margin: 0 auto;
}
@media (max-width: 1280px) {
  .site-footer__inner { grid-template-columns: repeat(3, 1fr); }
}
.site-footer__brand img { height: 40px; width: auto; margin-bottom: 1rem; }
.site-footer__brand p { color: var(--muted); font-size: .95rem; }
.site-footer__col { display: grid; gap: .55rem; align-content: start; font-size: .8rem; }
.site-footer__col a, .site-footer__col address {
  color: var(--muted); font-style: normal; text-decoration: none; line-height: 1.7;
}
.site-footer__col a:hover { color: var(--accent); }
.site-footer__head { font-size: .62rem; letter-spacing: .24em; color: var(--text); margin-bottom: .4rem; }
.site-footer__legal {
  max-width: 90rem; margin: 3.5rem auto 0;
  padding-top: 1.6rem;
  border-top: 1px solid rgba(237, 230, 220, .05);
  font-size: .65rem; letter-spacing: .2em; color: var(--muted);
}

/* ==========================================================================
   Reveal states (JS animates these; visible by default without JS)
   ========================================================================== */
.js .reveal, .js .reveal-lines { opacity: 0; }
.js .reveal.is-shown, .js .reveal-lines.is-shown { opacity: 1; }

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 1024px) {
  .eco-grid { grid-template-columns: repeat(2, 1fr); }
  .feature-split { grid-template-columns: 1fr; gap: 2.5rem; }
  .feature-media img { aspect-ratio: 16 / 10; }
  .decor-grid { grid-template-columns: repeat(3, 1fr); gap: .9rem; }
  .trust-grid { grid-template-columns: repeat(2, 1fr); }
  .mii-band { grid-template-columns: 1fr; gap: 2.5rem; }
  .mii__logo { justify-self: start; width: min(16rem, 80%); }
  .stage__content--split, .stage__content--reverse { grid-template-columns: 1fr; gap: 2rem; }
  .stage__content--reverse .split__copy { order: 1; }
  .split__visual { min-height: 32vh; }
  .demo-split { grid-template-columns: 1fr; gap: 2rem; }
}

@media (max-width: 720px) {
  .site-header { gap: 1rem; }
  .site-header__nav { display: none; }
  .scene--console, .scene--ambience, .scene--home, .scene--detail { height: 220vh; }
  .eco-grid { grid-template-columns: 1fr; }
  .decor-grid { grid-template-columns: 1fr; }
  .trust-grid { grid-template-columns: 1fr; }
  .living-band { flex-direction: column; align-items: flex-start; padding: 2rem 1.5rem; }
  .site-footer__inner { grid-template-columns: 1fr; gap: 2rem; }
  .hero__hint { display: none; }
  .ambience__caption { left: var(--gutter); right: var(--gutter); }
  .demo-pill { font-size: .5rem; padding: .45em .8em; }
}

/* Short / landscape-phone viewports — keep the sticky stages from clipping copy */
@media (max-height: 560px) {
  h1, .hero__title { font-size: clamp(2.2rem, 7vw, 4rem); }
  h2 { font-size: clamp(1.8rem, 5vw, 3rem); }
  .lede { font-size: 1rem; }
  .stage__content { padding-top: calc(var(--header-h) + 1vh); }
  .spec-list { gap: .5rem; font-size: .72rem; }
  .hero__hint { display: none; }
}

/* ==========================================================================
   Reduced motion — static frames, no parallax, no scrubbing
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
  .scene { height: auto !important; min-height: 100vh; }
  .stage { position: relative; height: auto; min-height: 100vh; }
  .js .reveal, .js .reveal-lines { opacity: 1; }
  .ambience__mode { position: static; opacity: 1; transform: none; margin-bottom: 1.5rem; }
  .ambience__caption { position: static; }
}