/* ==========================================================================
   Page sections — blocks that belong to one template rather than the
   global component set. Grouped by page, in build order.
   ========================================================================== */

/* --------------------------------------------------------------------------
   HOME
   -------------------------------------------------------------------------- */

/* hero-split-parallax */
.hero {
  position: relative;
  overflow: hidden;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  background: #161A13;
  padding: 160px var(--gutter) 84px;
  color: var(--c-paper);
}
.hero__media {
  position: absolute;
  inset: -13% 0;
  height: 126%;
  will-change: transform;
}
.hero__media img,
.hero__media video {
  width: 100%; height: 100%;
  object-fit: cover;
}
/* The still only shows when the video cannot: reduced motion, or a browser
   that plays neither source. Both layers are stacked, video on top. */
.hero__still { position: absolute; inset: 0; }
.hero__video { position: relative; z-index: 1; }

/* An image hero keeps the slow Ken Burns push; the film supplies its own. */
.hero__media > img:only-child { animation: lp-kenburns 26s ease-in-out infinite alternate; }

@media (prefers-reduced-motion: reduce) {
  .hero__video { display: none; }
}
.hero__scrim {
  position: absolute; inset: 0;
  background: linear-gradient(180deg,
    rgba(15, 18, 13, .62) 0%,
    rgba(15, 18, 13, .18) 34%,
    rgba(15, 18, 13, .28) 62%,
    rgba(15, 18, 13, .78) 100%);
}
/* --- Parallax --------------------------------------------------------------
   A layer marked [data-parallax] is taller than its frame; ui.js slides it
   within that slack. The overscan here *is* the strength of the effect —
   more slack, more travel — and because the JS derives its range from the
   rendered sizes, the layer can never slide far enough to show its edge.
   -------------------------------------------------------------------------- */

.parallax-frame { position: relative; overflow: hidden; }
.parallax-frame > [data-parallax] {
  position: absolute;
  inset: -12% 0;
  height: 124%;
  width: 100%;
  will-change: transform;
}
.parallax-frame > [data-parallax] img,
.parallax-frame > [data-parallax] video { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Full-bleed band: an image that holds still while the copy scrolls over it. */
.parallax-band {
  position: relative;
  overflow: hidden;
  background: var(--c-ink);
  color: var(--c-cream);
  isolation: isolate;
}
.parallax-band__media {
  position: absolute;
  inset: -16% 0;
  height: 132%;
  width: 100%;
  will-change: transform;
  z-index: 0;
}
.parallax-band__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.parallax-band__scrim {
  position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(180deg,
    rgba(15, 18, 13, .74) 0%,
    rgba(15, 18, 13, .52) 45%,
    rgba(15, 18, 13, .78) 100%);
}
.parallax-band__inner { position: relative; z-index: 2; }
.parallax-band .label { color: var(--c-spectrum); }

/* A quiet full-width quote over photography — the band's usual payload. */
.band-quote {
  font-family: var(--f-display);
  font-weight: 300;
  font-size: clamp(28px, 3.6vw, 50px);
  line-height: 1.18;
  letter-spacing: -.025em;
  max-width: 20ch;
}
.band-quote em { font-style: italic; color: var(--c-spectrum); }

/* --- Hero lens flare -----------------------------------------------------
   --fx/--fy are the light's position inside the hero (written by ui.js, and
   eased toward the cursor a frame at a time so it carries some weight);
   --cx/--cy are the pivot: the logo mark, because in this brand the lockup is
   the light source. Every piece places itself with transform
   only, so the whole thing stays on the compositor.
   ------------------------------------------------------------------------ */
.hero__flare {
  position: absolute;
  inset: 0;
  z-index: 5;
  pointer-events: none;
  opacity: 0;
  transition: opacity 700ms cubic-bezier(.22, 1, .36, 1);
  /* screen blending is what stops it looking like pasted-on white shapes */
  mix-blend-mode: screen;
  --fx: 50%; --fy: 40%;
  --cx: 50%; --cy: 50%;
}
.hero__flare.is-lit { opacity: 1; }

.hero__flare > * {
  position: absolute;
  left: 0; top: 0;
  border-radius: 50%;
  will-change: transform;
}

/* The ghosts — reflections between lens elements, strung along the axis. */
.hero__flare-ghost {
  width: var(--d);
  height: var(--d);
  background: radial-gradient(circle,
    rgba(var(--c), var(--a)) 0%,
    rgba(var(--c), calc(var(--a) * .55)) 55%,
    rgba(var(--c), 0) 72%);
  filter: blur(1px);
  transform: translate(
    calc(var(--cx) + (var(--fx) - var(--cx)) * var(--t) - 50%),
    calc(var(--cy) + (var(--fy) - var(--cy)) * var(--t) - 50%));
}

/* The iris ring around the source. */
.hero__flare-halo {
  width: 460px; height: 460px;
  background: radial-gradient(circle,
    rgba(var(--flare-warm), 0) 52%,
    rgba(var(--flare-warm), .055) 61%,
    rgba(var(--flare-amber), .035) 66%,
    rgba(var(--flare-warm), 0) 74%);
  transform: translate(calc(var(--fx) - 50%), calc(var(--fy) - 50%));
}

/* The anamorphic streak — horizontal, and the widest thing on screen. */
.hero__flare-streak {
  width: 1100px; height: 3px;
  border-radius: 0;
  background: linear-gradient(90deg,
    rgba(var(--flare-warm), 0) 0%,
    rgba(var(--flare-warm), .16) 34%,
    rgba(var(--flare-core), .5) 50%,
    rgba(var(--flare-warm), .16) 66%,
    rgba(var(--flare-warm), 0) 100%);
  filter: blur(2.5px);
  transform: translate(calc(var(--fx) - 50%), calc(var(--fy) - 50%));
}

/* The source itself. */
.hero__flare-core {
  width: 200px; height: 200px;
  background: radial-gradient(circle,
    rgba(var(--flare-core), .5) 0%,
    rgba(var(--flare-warm), .18) 22%,
    rgba(var(--flare-amber), .06) 44%,
    rgba(var(--flare-amber), 0) 70%);
  filter: blur(4px);
  transform: translate(calc(var(--fx) - 50%), calc(var(--fy) - 50%));
}

/* An optical effect is exactly the kind of motion to drop on request — and
   there is no cursor to track on touch, so it is not built there either. */
@media (prefers-reduced-motion: reduce) { .hero__flare { display: none; } }
@media (hover: none) { .hero__flare { display: none; } }

.hero__inner { position: relative; z-index: 10; max-width: 760px; display: flex; flex-direction: column; gap: 20px; }
.hero__title { font-size: var(--t-display-xl); font-weight: 400; line-height: 1; letter-spacing: -.028em; text-shadow: 0 2px 40px rgba(0, 0, 0, .45); }
.hero__sub { font-size: clamp(16px, 1.5vw, 19px); line-height: 1.6; color: rgba(255, 253, 248, .88); max-width: 460px; text-shadow: 0 1px 20px rgba(0, 0, 0, .5); }
.hero__cta { display: flex; gap: 13px; flex-wrap: wrap; margin-top: 12px; }
.hero__scroll {
  display: flex; align-items: center; gap: 14px; margin-top: 26px;
  font-family: var(--f-label); font-weight: 600; font-size: 11px; letter-spacing: .18em;
  text-transform: uppercase; color: rgba(255, 253, 248, .62);
}
.hero__scroll::before { content: ''; width: 46px; height: 1px; background: rgba(255, 253, 248, .5); }

/* proof-bars — "not all lights are equal".
   Only the figure gets the figure treatment; the row's name is body copy.
   (It used to be `.proof__row span`, which caught the name too and left the
   first row — marked up with <strong> — inconsistent with the other two.) */
.proof { display: flex; flex-direction: column; gap: 16px; max-width: 440px; }
.proof__row { display: flex; justify-content: space-between; gap: var(--sp-4); font-size: 13.5px; margin-bottom: 7px; }
.proof__row strong { font-weight: 600; }
.proof__row b { font-weight: 400; }
.proof__row .proof__value {
  font-family: var(--f-mono);
  font-variant-numeric: tabular-nums;
  color: var(--c-stone);
  white-space: nowrap;
}

/* --- Light toggle --------------------------------------------------------
   Two frames of the same corner stacked and cross-faded, with a warm pool of
   light on top. The pool is what actually reads as "the lamp is on" — a
   straight cross-fade between two photographs looks like a photo swap, not
   like a light coming up.
   ------------------------------------------------------------------------ */

.lamp-demo { display: flex; flex-direction: column; gap: 20px; }

.lamp-demo__stage {
  position: relative;
  border-radius: 14px;
  overflow: hidden;
  background: var(--c-ink);
  aspect-ratio: 4 / 5;
  isolation: isolate;
}
.lamp-demo__shot {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}
.lamp-demo__shot--on {
  z-index: 1;
  opacity: 1;
  transition: opacity 900ms cubic-bezier(.22, 1, .36, 1);
}
.lamp-demo.is-off .lamp-demo__shot--on { opacity: 0; }

/* The pool sits over the lit frame, centred on the shade. */
.lamp-demo__pool {
  position: absolute;
  z-index: 2;
  left: 46%; top: 26%;
  width: 92%; aspect-ratio: 1;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  pointer-events: none;
  mix-blend-mode: screen;
  background: radial-gradient(circle,
    rgba(var(--flare-core), .30) 0%,
    rgba(var(--flare-warm), .16) 26%,
    rgba(var(--flare-amber), .07) 48%,
    rgba(var(--flare-amber), 0) 70%);
  filter: blur(18px);
  opacity: 1;
  transition: opacity 900ms cubic-bezier(.22, 1, .36, 1);
}
.lamp-demo.is-off .lamp-demo__pool { opacity: 0; }
/* The shade sits higher and further left in the finish shot. */
.lamp-demo__pool--high { left: 30%; top: 18%; width: 76%; }

/* The switch itself — a real button, so it is focusable and announces state. */
.lamp-switch {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  align-self: flex-start;
  background: none;
  border: 0;
  padding: 6px 2px;
  color: inherit;
  text-align: left;
}
.lamp-switch__track {
  position: relative;
  width: 58px; height: 32px;
  border-radius: var(--r-pill);
  background: var(--c-spectrum);
  flex-shrink: 0;
  transition: background var(--t-control);
}
.lamp-switch__knob {
  position: absolute;
  top: 4px; left: 4px;
  width: 24px; height: 24px;
  border-radius: 50%;
  background: var(--c-paper);
  box-shadow: 0 1px 3px rgba(28, 33, 24, .28);
  transition: transform var(--t-control);
}
.lamp-switch[aria-pressed="true"] .lamp-switch__knob { transform: translateX(26px); }
.lamp-switch[aria-pressed="false"] .lamp-switch__track { background: var(--c-line-strong); }

/* While the lamp demonstrates itself, draw the eye to the control that did
   it — otherwise the room just changes and nobody knows why. */
.lamp-demo.is-demoing .lamp-switch__track {
  box-shadow: 0 0 0 0 rgba(232, 163, 61, .55);
  animation: lp-switch-pulse 1.5s ease-out 2;
}
@keyframes lp-switch-pulse {
  from { box-shadow: 0 0 0 0 rgba(232, 163, 61, .5); }
  to   { box-shadow: 0 0 0 14px rgba(232, 163, 61, 0); }
}

.lamp-switch__label { display: flex; flex-direction: column; gap: 2px; }
.lamp-switch__state { font-size: 15.5px; font-weight: 600; }
.lamp-switch__hint { font-size: 13.5px; color: var(--c-ink-quiet); }

/* No cross-fade for reduced motion — it still switches, just instantly. */
@media (prefers-reduced-motion: reduce) {
  .lamp-demo__shot--on, .lamp-demo__pool { transition: none; }
}

/* image-triptych — staggered on desktop, flat on mobile */
.triptych { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.triptych__item { display: flex; flex-direction: column; gap: 20px; }
.triptych__item:nth-child(2) { padding-top: 38px; }
.triptych__media { border-radius: 12px; overflow: hidden; aspect-ratio: 4 / 5; background: var(--c-canopy-deep); }
.triptych__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s cubic-bezier(.22, 1, .36, 1); }
.triptych__item:hover .triptych__media img { transform: scale(1.05); }
.triptych__caption { font-family: var(--f-display); font-size: 26px; line-height: 1.25; }
.triptych__caption em { font-style: italic; color: var(--c-spectrum); }

/* variant-selector-height — the three-position picker */
.height-picker { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-6); margin-bottom: 36px; }
.height-card {
  min-width: 0;
  border: 1px solid var(--c-line);
  background: var(--c-sand);
  border-radius: 12px;
  padding: 26px;
  display: flex; flex-direction: column; align-items: center; gap: 14px;
  text-align: center;
  transition: border-color var(--t-control), transform var(--t-control);
}
.height-card:hover { transform: translateY(-4px); }
.height-card[aria-pressed="true"] { border-color: var(--c-canopy); }
.height-card img { max-height: 260px; width: auto; object-fit: contain; }
.height-card__name { font-family: var(--f-display); font-style: italic; font-size: 21px; }
.height-card__for { font-size: 14px; color: var(--c-ink-quiet); }

/* qty-break-tiers */
.tiers { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.tier { position: relative; display: flex; flex-direction: column; gap: 14px; text-align: left; align-items: flex-start; }
.tier__label { font-family: var(--f-label); font-weight: 600; font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--c-stone); }
.tier__price { font-family: var(--f-display); font-size: 44px; line-height: 1; }
.tier__price s { font-family: var(--f-ui); font-size: 17px; color: var(--c-stone); }
.tier__detail { font-size: 15px; color: var(--c-ink-quiet); }
.tier__cta { margin-top: auto; padding-top: 20px; font-weight: 600; font-size: 15px; color: var(--c-canopy); }
.tier--featured .tier__label { color: var(--c-spectrum); }
.tier--featured .tier__detail { color: var(--c-cream-72); }
.tier--featured .tier__cta { color: var(--c-spectrum); }
.tier--featured .tier__price s { color: rgba(246, 242, 233, .5); }
.tier__flag { position: absolute; top: -11px; left: 34px; }

.countdown-pill {
  display: flex; align-items: center; gap: 14px;
  background: var(--c-linen);
  border: 1px solid var(--c-line);
  border-radius: var(--r-pill);
  padding: 12px 22px;
}
.countdown-pill__value { font-family: var(--f-mono); font-variant-numeric: tabular-nums; font-size: 16px; font-weight: 500; }

/* finish-swatches split */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(40px, 5vw, 80px); align-items: center; }
.split--wide-right { grid-template-columns: .9fr 1.1fr; }
.split--wide-left  { grid-template-columns: 1.15fr .85fr; }
.split__media { border-radius: 14px; overflow: hidden; background: var(--c-sand); }
.split__media--pad { padding: 36px; display: flex; align-items: center; justify-content: center; }

/* review-cards on dark */
.review-card {
  background: rgba(246, 242, 233, .055);
  border: 1px solid rgba(246, 242, 233, .12);
  border-radius: 12px;
  padding: 30px;
  display: flex; flex-direction: column; gap: 16px;
  transition: background var(--t-control);
}
.review-card:hover { background: rgba(246, 242, 233, .09); }
.review-card__quote { font-family: var(--f-display); font-size: 22px; line-height: 1.42; letter-spacing: -.01em; }
.review-card__who { margin-top: auto; padding-top: 12px; font-size: 14px; color: rgba(246, 242, 233, .55); }

/* waitlist-capture */
.waitlist {
  background: var(--c-canopy);
  border-radius: 18px;
  padding: clamp(36px, 5vw, 74px);
  display: grid; grid-template-columns: 1fr .9fr; gap: 60px; align-items: center;
  position: relative; overflow: hidden;
  color: var(--c-cream);
}
.waitlist__glow {
  position: absolute; bottom: -300px; left: -140px;
  width: 640px; height: 640px; border-radius: 50%;
  background: radial-gradient(circle, rgba(232, 163, 61, .34) 0%, rgba(232, 163, 61, 0) 66%);
  animation: lp-glow 7s ease-in-out infinite;
  pointer-events: none;
  /* --gx/--gy are written by ui.js so the light tracks the cursor across the
     panel. They offset from the resting position above, so with no JS the
     glow simply stays where the CSS put it. */
  transform: translate(var(--gx, 0px), var(--gy, 0px));
  transition: transform var(--glow-move);
}
/* Lift the real content above the glow — but never restyle the glow itself,
   which must stay out of flow or it becomes a 640px grid item. */
.waitlist > :not(.waitlist__glow) { position: relative; }
.waitlist__form { display: flex; gap: 10px; flex-wrap: wrap; }
.waitlist__form .input { flex: 1; min-width: 220px; }

/* Following the cursor is quick; drifting home is not. On pointerleave the
   panel gets data-glow-resting and the same transform takes five times as
   long on an ease-in-out — the light settles back rather than snapping. */
[data-glow] { --glow-move: 550ms cubic-bezier(.22, 1, .36, 1); }
[data-glow-follow][data-glow-resting] [data-glow] { --glow-move: 2800ms cubic-bezier(.4, 0, .2, 1); }

/* lifestyle-mosaic */
.mosaic { display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 20px; height: 520px; }
.mosaic > div { border-radius: 14px; overflow: hidden; background: var(--c-sand); }
.mosaic img { width: 100%; height: 100%; object-fit: cover; transition: transform .9s cubic-bezier(.22, 1, .36, 1); }
.mosaic > div:hover img { transform: scale(1.05); }

/* Kenny teaser on the homepage */
.kenny-teaser { position: relative; overflow: hidden; border-radius: 18px; background: var(--c-sand); }
.kenny-teaser__grid { display: grid; grid-template-columns: 1fr 1fr; align-items: stretch; }
.kenny-teaser__copy { padding: clamp(32px, 4vw, 64px); display: flex; flex-direction: column; justify-content: center; gap: 18px; }
.kenny-teaser__media img { width: 100%; height: 100%; object-fit: cover; min-height: 340px; }


/* --------------------------------------------------------------------------
   COLLECTION / ACCESSORIES
   -------------------------------------------------------------------------- */

.breadcrumb { font-family: var(--f-label); font-weight: 600; font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--c-stone); margin-bottom: 22px; }
.breadcrumb a { color: inherit; }
.breadcrumb a:hover { color: var(--c-ink); }

.collection-head { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: end; margin-bottom: 46px; }
.collection-head__tools { display: flex; justify-content: flex-end; align-items: center; gap: 14px; }

.filter-chips { display: flex; gap: 9px; margin-bottom: 38px; flex-wrap: wrap; }
.chip {
  font-size: 14px; font-weight: 600;
  padding: 10px 20px;
  border-radius: var(--r-pill);
  border: 1px solid var(--c-line-strong);
  background: transparent;
  color: var(--c-ink-soft);
  transition: background var(--t-control), color var(--t-control), border-color var(--t-control);
}
.chip:hover { border-color: var(--c-canopy); }
.chip[aria-pressed="true"] { background: var(--c-canopy); color: var(--c-cream); border-color: var(--c-canopy); }

.product-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 26px; }
.product-grid--4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 22px; }

.cta-panel {
  background: var(--c-sand);
  border-radius: var(--r-lg);
  padding: clamp(32px, 4vw, 56px);
  display: flex; justify-content: space-between; align-items: center;
  gap: 40px; flex-wrap: wrap;
}
.cta-panel h2, .cta-panel h3 { margin-bottom: 10px; }

/* Accessories — "what each one is for" rows */
.detail-rows { display: flex; flex-direction: column; gap: 1px; background: var(--c-line); border: 1px solid var(--c-line); border-radius: 12px; overflow: hidden; }
.detail-row {
  display: grid; grid-template-columns: 180px 1fr;
  gap: 34px; align-items: center;
  background: var(--c-linen); padding: 34px;
}
.detail-row__img { border-radius: 12px; background: var(--c-sand); aspect-ratio: 1; object-fit: cover; width: 100%; }
.detail-row__head { display: flex; justify-content: space-between; align-items: center; gap: var(--sp-4); flex-wrap: wrap; margin-bottom: 8px; }
.detail-row__head h3 { font-family: var(--f-display); font-size: 28px; }
.detail-row p { color: var(--c-ink-soft); line-height: 1.7; margin-bottom: 16px; }


/* --------------------------------------------------------------------------
   PRODUCT (Anthos + Kenny share this template)
   -------------------------------------------------------------------------- */

.pdp { display: grid; grid-template-columns: 1.15fr .85fr; gap: clamp(32px, 4vw, 64px); align-items: start; }
.pdp__gallery { position: sticky; top: 132px;   /* clears the sticky header */ }
.pdp__stage { border-radius: var(--r-lg); overflow: hidden; background: var(--c-sand); aspect-ratio: 4 / 3.4; margin-bottom: 14px; }
.pdp__stage img { width: 100%; height: 100%; object-fit: cover; }
.pdp__thumbs { display: flex; gap: 12px; flex-wrap: wrap; }
.pdp__thumb {
  width: 88px; height: 88px;
  border-radius: var(--r-md);
  overflow: hidden;
  border: 2px solid var(--c-line);
  background: var(--c-sand);
  padding: 0;
  transition: border-color var(--t-control);
}
.pdp__thumb img { width: 100%; height: 100%; object-fit: cover; }
.pdp__thumb[aria-pressed="true"] { border-color: var(--c-canopy); }

.pdp__info { display: flex; flex-direction: column; gap: 22px; }
.pdp__price { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; }
.pdp__price-now { font-family: var(--f-display); font-size: 44px; line-height: 1; }
.pdp__price-was { font-size: 19px; color: var(--c-stone); text-decoration: line-through; }

.urgency-note {
  display: flex; align-items: center; gap: 10px;
  background: var(--c-halo);
  border-radius: var(--r-md);
  padding: 13px 18px;
  font-size: 14.5px;
  color: var(--c-clay-deep);
}
.urgency-note::before {
  content: ''; width: 8px; height: 8px; border-radius: 50%;
  background: var(--c-clay); flex-shrink: 0;
  animation: lp-glow 2s ease-in-out infinite;
}
.urgency-note strong { font-family: var(--f-mono); font-variant-numeric: tabular-nums; font-weight: 500; }

.option-head {
  display: flex; justify-content: space-between;
  font-family: var(--f-label); font-weight: 600; font-size: 10.5px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--c-stone); margin-bottom: 12px;
}
.option-head strong { color: var(--c-ink); font-weight: 400; }

.atc-row { display: flex; gap: 12px; align-items: stretch; margin-top: 6px; }
.atc-row .btn { flex: 1; padding-block: 17px; font-size: 16px; }

.pdp__assurances { display: flex; gap: 20px; flex-wrap: wrap; font-size: 14px; color: var(--c-ink-quiet); }

/* stat-band */
.stat-band { display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px; }
.stat { border-top: 1px solid rgba(246, 242, 233, .2); padding-top: 20px; }
.stat__value { font-family: var(--f-display); font-size: clamp(34px, 3.4vw, 46px); line-height: 1; }
.stat__label { font-size: 15px; color: var(--c-cream-60); padding-top: 8px; line-height: 1.55; }
.stat-band--3 { grid-template-columns: repeat(3, 1fr); }
.stat-band--light .stat { border-top-color: var(--c-line); }
.stat-band--light .stat__value { color: var(--c-canopy); }
.stat-band--light .stat__label { color: var(--c-ink-soft); }

/* "Which lamp" — Anthos vs Kenny */
.versus { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.versus__card { display: flex; flex-direction: column; gap: 14px; }
.versus__card img { border-radius: 12px; aspect-ratio: 4 / 3; object-fit: cover; background: var(--c-sand); width: 100%; }
.versus__list { display: flex; flex-direction: column; gap: 8px; font-size: 15px; color: var(--c-ink-soft); }
.versus__list li { list-style: none; display: flex; gap: 10px; }
.versus__list li::before { content: '✓'; color: var(--c-moss); }
.versus__list { margin: 0; padding: 0; }


/* --------------------------------------------------------------------------
   BUNDLE BUILDER
   -------------------------------------------------------------------------- */

.builder { display: grid; grid-template-columns: 1.3fr .7fr; gap: 52px; align-items: start; }
.builder__steps { display: flex; flex-direction: column; gap: 34px; }
.builder__step-label { font-family: var(--f-label); font-weight: 600; font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--c-stone); margin-bottom: 9px; }
.builder__step-title { font-family: var(--f-display); font-size: clamp(24px, 2.6vw, 31px); letter-spacing: -.02em; }

.lamp-row {
  background: var(--c-sand);
  border-radius: var(--r-lg);
  padding: 28px 34px;
  display: flex; justify-content: space-between; align-items: center;
  gap: var(--sp-6); flex-wrap: wrap;
}
.lamp-row + .lamp-row { margin-top: 14px; }
.lamp-row__meta { font-size: 14.5px; color: var(--c-ink-quiet); padding-top: 6px; }

.addons { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.addon {
  display: flex; gap: 16px; align-items: center;
  border: 1px solid var(--c-line);
  border-radius: 12px;
  padding: 16px;
  background: var(--c-paper);
  text-align: left;
  transition: border-color var(--t-control), transform var(--t-control);
}
.addon:hover { transform: translateY(-3px); }
.addon[aria-pressed="true"] { border-color: var(--c-canopy); }
.addon img { width: 64px; height: 64px; object-fit: cover; border-radius: 8px; background: var(--c-sand); }
.addon__body { flex: 1; min-width: 0; }
.addon__name  { display: block; font-weight: 600; font-size: 16px; }
.addon__why   { display: block; font-size: 13.5px; color: var(--c-stone); padding-top: 3px; }
.addon__price { display: block; font-family: var(--f-mono); font-variant-numeric: tabular-nums; font-size: 14px; padding-top: 6px; }
.addon__mark {
  width: 30px; height: 30px; border-radius: 50%;
  background: var(--c-sand); color: var(--c-stone);
  display: flex; align-items: center; justify-content: center;
  font-size: 15px; flex-shrink: 0;
  transition: background var(--t-control), color var(--t-control);
}
.addon[aria-pressed="true"] .addon__mark { background: var(--c-canopy); color: var(--c-cream); }

.summary-panel {
  position: sticky; top: 132px;   /* clears the sticky header */
  background: var(--c-canopy); color: var(--c-cream);
  border-radius: var(--r-lg);
  padding: 34px;
  display: flex; flex-direction: column; gap: 16px;
}
.summary-panel .summary-row { color: var(--c-cream-72); }
.summary-panel .summary-row--discount { color: var(--c-spectrum); }
.summary-panel hr { border: 0; height: 1px; background: rgba(246, 242, 233, .2); margin: 6px 0; width: 100%; }
.summary-panel__total { display: flex; justify-content: space-between; align-items: baseline; }
.summary-panel__total strong { font-weight: 600; font-size: 16px; }
.summary-panel__total span { font-family: var(--f-display); font-size: 38px; }
.summary-panel__fine { font-size: 13.5px; color: rgba(246, 242, 233, .5); text-align: center; }


/* --------------------------------------------------------------------------
   QUIZ
   -------------------------------------------------------------------------- */

.quiz {
  min-height: 74vh;
  display: flex; align-items: center; justify-content: center;
  padding: 80px var(--gutter);
  background: var(--c-canopy);
  color: var(--c-cream);
}
.quiz__inner { max-width: 720px; width: 100%; }
.quiz__meta { display: flex; justify-content: space-between; font-family: var(--f-label); font-weight: 600; font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--c-spectrum); margin-bottom: 12px; }
.quiz__question { margin: 0 0 36px; }
.quiz__options { display: flex; flex-direction: column; gap: 12px; }
.quiz__option {
  border: 1px solid rgba(246, 242, 233, .28);
  border-radius: 12px;
  padding: 22px 26px;
  font-size: 18px;
  background: none;
  color: inherit;
  text-align: left;
  transition: background var(--t-control), border-color var(--t-control), transform var(--t-control);
}
.quiz__option:hover { background: rgba(246, 242, 233, .09); border-color: var(--c-spectrum); transform: translateX(5px); }
.quiz__result { text-align: center; animation: lp-in .5s cubic-bezier(.16, 1, .3, 1); }
.quiz__result-cta { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.quiz__restart { background: none; border: 0; color: rgba(246, 242, 233, .55); font-size: 15px; text-decoration: underline; padding: 16px 12px; }


/* --------------------------------------------------------------------------
   CART / CHECKOUT
   -------------------------------------------------------------------------- */

.cart-layout { display: grid; grid-template-columns: 1.5fr .8fr; gap: 52px; align-items: start; }
.checkout-layout { display: grid; grid-template-columns: 1.25fr .75fr; gap: 56px; align-items: start; }

.order-summary {
  position: sticky; top: 132px;   /* clears the sticky header */
  background: var(--c-sand);
  border-radius: var(--r-lg);
  padding: 32px;
  display: flex; flex-direction: column; gap: 4px;
}
.order-summary .summary-row { color: var(--c-ink-soft); font-size: 15px; }
.order-summary .summary-row--total span:last-child { font-family: var(--f-display); font-size: 36px; }
.order-summary hr { border: 0; height: 1px; background: #DDD4C4; margin: 8px 0; width: 100%; }
.order-summary__fine { font-size: 13px; color: var(--c-ink-quiet); text-align: center; line-height: 1.6; margin-top: 4px; }

.checkout-steps { display: flex; gap: 14px; align-items: center; font-family: var(--f-label); font-weight: 600; font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--c-stone); margin-bottom: 38px; flex-wrap: wrap; }
.checkout-steps .is-done { color: var(--c-canopy); }

.field-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.field-grid .input--wide { grid-column: span 2; }

.ship-option {
  display: flex; justify-content: space-between; align-items: center;
  border: 1px solid var(--c-line);
  border-radius: var(--r-md);
  padding: 18px 22px;
  background: var(--c-paper);
  width: 100%; text-align: left; gap: var(--sp-4);
  transition: border-color var(--t-control);
}
.ship-option[aria-pressed="true"] { border-color: var(--c-canopy); }
.ship-option__name { display: block; font-weight: 600; font-size: 15.5px; }
.ship-option__when { display: block; font-size: 14px; color: var(--c-stone); padding-top: 3px; }
.ship-option__price { font-family: var(--f-mono); font-variant-numeric: tabular-nums; font-size: 15px; }

.mini-line { display: flex; gap: 14px; align-items: center; }
.mini-line img { width: 56px; height: 64px; object-fit: cover; border-radius: 8px; background: var(--c-linen); }
.mini-line__body { flex: 1; min-width: 0; }
.mini-line__name { font-weight: 600; font-size: 14.5px; }
.mini-line__meta { font-size: 13px; color: var(--c-stone); }
.mini-line__price { font-family: var(--f-mono); font-variant-numeric: tabular-nums; font-size: 14px; }


/* --------------------------------------------------------------------------
   COMPARISON TABLE
   -------------------------------------------------------------------------- */

.spec-table { border: 1px solid var(--c-line); border-radius: 14px; overflow: hidden; }
.spec-table__scroll { overflow-x: auto; }
.spec-table table { width: 100%; border-collapse: collapse; min-width: 720px; }
.spec-table thead th {
  background: var(--c-canopy); color: var(--c-cream);
  padding: 24px 20px;
  text-align: left; font-size: 15.5px; font-weight: 600;
  color: var(--c-cream-72);
}
.spec-table thead th:first-child {
  font-family: var(--f-label); font-weight: 600; font-size: 11px; letter-spacing: .16em;
  text-transform: uppercase; color: var(--c-cream-60); padding-inline: 26px;
  width: 28%;
}
.spec-table thead th.is-hero {
  font-family: var(--f-display); font-size: 22px; font-weight: 400;
  color: var(--c-cream);
  background-color: var(--c-canopy);
  background-image: linear-gradient(rgba(232, 163, 61, .16), rgba(232, 163, 61, .16));
}
.spec-table tbody tr { border-top: 1px solid var(--c-line); background: var(--c-linen); transition: background var(--t-control); }
.spec-table tbody tr:hover { background: #F3EFE6; }
.spec-table td { padding: 20px; font-size: 15.5px; color: var(--c-ink-quiet); }
.spec-table td:first-child { padding-inline: 26px; font-weight: 600; color: var(--c-ink); }
.spec-table td.is-hero { background: rgba(232, 163, 61, .09); font-weight: 600; color: var(--c-canopy); }

/* --- Matrix variant ------------------------------------------------------
   The light-type comparison. Centred columns, ticks and crosses drawn in
   CSS, and a row header column that carries the question.
   ------------------------------------------------------------------------ */
.spec-table--matrix table { min-width: 780px; }
.spec-table--matrix thead th { text-align: center; vertical-align: bottom; }
.spec-table--matrix thead th:first-child { width: 30%; }
.spec-table--matrix thead th.is-hero {
  font-family: var(--f-display);
  font-size: 24px;
  font-weight: 400;
  color: var(--c-cream);
  background-color: var(--c-canopy);
  background-image: linear-gradient(rgba(232, 163, 61, .2), rgba(232, 163, 61, .2));
}
.spec-table--matrix tbody th {
  text-align: left;
  font-weight: 600;
  font-size: 15.5px;
  color: var(--c-ink);
  padding: 18px 26px;
}
.spec-table--matrix .spec-table__note {
  display: block;
  font-weight: 400;
  font-size: 13px;
  color: var(--c-stone);
  padding-top: 3px;
}
.spec-table--matrix .spec-table__cell {
  text-align: center;
  padding: 18px 16px;
  font-size: 15px;
  line-height: 1.45;
}

/* Tick and cross, drawn rather than set — a glyph would inherit the body
   font's weight and sit off the optical centre. */
.mark { display: inline-block; width: 19px; height: 19px; position: relative; }
.mark::before, .mark::after {
  content: '';
  position: absolute;
  left: 50%; top: 50%;
  border-radius: 2px;
}
.mark--yes::before { width: 3px; height: 8px;  background: var(--c-moss); transform: translate(-155%, -10%) rotate(-45deg); transform-origin: bottom; }
.mark--yes::after  { width: 3px; height: 15px; background: var(--c-moss); transform: translate(10%, -58%) rotate(35deg); }
.mark--no::before  { width: 3px; height: 17px; background: var(--c-clay); transform: translate(-50%, -50%) rotate(45deg); }
.mark--no::after   { width: 3px; height: 17px; background: var(--c-clay); transform: translate(-50%, -50%) rotate(-45deg); }

.tone { font-weight: 700; }
.tone--good { color: var(--c-canopy); }
.tone--mid  { color: var(--c-clay-deep); }
.tone--bad  { color: var(--c-clay); }


/* --------------------------------------------------------------------------
   REVIEWS WALL
   -------------------------------------------------------------------------- */

.rating-bars { display: flex; flex-direction: column; gap: 7px; }
.rating-bars__row { display: flex; align-items: center; gap: 12px; font-size: 13.5px; color: var(--c-ink-quiet); }
.rating-bars__row > span:first-child { width: 26px; }
.rating-bars__row > span:last-child { width: 34px; }
.rating-bars__row .meter { flex: 1; }

.review-wall { columns: 3; column-gap: 22px; }
.review-tile {
  break-inside: avoid;
  background: var(--c-sand);
  border-radius: 14px;
  padding: 28px;
  margin-bottom: 22px;
  display: inline-block;
  width: 100%;
}
.review-tile__title { font-family: var(--f-display); font-size: 23px; line-height: 1.3; letter-spacing: -.01em; margin: 12px 0; }
.review-tile__body { font-size: 15.5px; line-height: 1.68; color: var(--c-ink-soft); margin-bottom: 16px; }
.review-tile__who { font-size: 13.5px; color: var(--c-stone); }


/* --------------------------------------------------------------------------
   GUIDE + ARTICLE
   -------------------------------------------------------------------------- */

.article-card { display: flex; flex-direction: column; gap: 14px; }
.article-card__media { border-radius: 14px; overflow: hidden; background: var(--c-sand); aspect-ratio: 16 / 11; }
.article-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s cubic-bezier(.22, 1, .36, 1); }
.article-card:hover .article-card__media img { transform: scale(1.05); }
.article-card__meta { display: flex; gap: 12px; font-family: var(--f-label); font-weight: 600; font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--c-stone); }
.article-card__meta span:first-child { color: var(--c-clay); }
.article-card__title { font-family: var(--f-display); font-size: 27px; line-height: 1.22; letter-spacing: -.015em; color: var(--c-ink); }

.prose { font-size: 18px; line-height: 1.78; color: var(--c-ink-mid); }
.prose p { margin: 0 0 26px; }
.prose h2 { font-family: var(--f-display); font-weight: 400; font-size: var(--t-heading); letter-spacing: -.02em; margin: 44px 0 16px; }
.prose ol, .prose ul { margin: 0 0 26px; padding-left: 22px; }
.prose li { margin-bottom: 11px; }
.prose blockquote {
  margin: 34px 0;
  padding: 26px 30px;
  background: var(--c-sand);
  border-radius: 12px;
  font-family: var(--f-display);
  font-size: 24px; line-height: 1.42; font-style: italic;
  color: var(--c-canopy);
}
.article-lede { font-family: var(--f-display); font-style: italic; font-size: 20px; line-height: 1.65; color: var(--c-ink-soft); }

.inline-cta {
  margin-top: 52px;
  padding: 34px;
  background: var(--c-canopy); color: var(--c-cream);
  border-radius: var(--r-lg);
  display: flex; justify-content: space-between; align-items: center;
  gap: 28px; flex-wrap: wrap;
}
.inline-cta__title { font-family: var(--f-display); font-size: 29px; letter-spacing: -.02em; margin-bottom: 6px; }
.inline-cta__sub { font-size: 15.5px; color: rgba(246, 242, 233, .66); }


/* --------------------------------------------------------------------------
   ABOUT
   -------------------------------------------------------------------------- */

.about-hero {
  position: relative;
  min-height: 520px;
  display: flex; align-items: flex-end;
  overflow: hidden;
  background: var(--c-ink);
  color: var(--c-cream);
}
/* the image now lives in .parallax-band__media; the scrim does the darkening */
.about-hero__inner { position: relative; width: 100%; padding-bottom: 74px; }

.stat-table { display: flex; flex-direction: column; gap: 1px; background: var(--c-line); border: 1px solid var(--c-line); border-radius: 12px; overflow: hidden; }
.stat-table__row { background: var(--c-linen); padding: 26px; display: flex; justify-content: space-between; align-items: baseline; gap: var(--sp-4); }
.stat-table__row strong { font-size: 16px; font-weight: 600; }
.stat-table__row span { font-family: var(--f-display); font-size: 30px; }


/* --------------------------------------------------------------------------
   SEARCH + ACCOUNT
   -------------------------------------------------------------------------- */

.search-input {
  font-family: var(--f-display);
  width: 100%;
  padding: 22px 28px;
  border: 1px solid var(--c-line);
  background: var(--c-paper);
  border-radius: 14px;
  font-size: clamp(22px, 3vw, 30px);
  outline: none;
  margin-bottom: 18px;
}
.search-input:focus { border-color: var(--c-spectrum); }
.suggestions { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-bottom: 34px; }
.suggestion {
  font-size: 13.5px;
  padding: 8px 16px;
  border: 1px solid var(--c-line);
  border-radius: var(--r-pill);
  background: none;
  color: var(--c-ink-soft);
  transition: background var(--t-control);
}
.suggestion:hover { background: var(--c-sand); }

.order-card { border: 1px solid var(--c-line); border-radius: 14px; padding: 30px; background: var(--c-paper); }
.order-card__top { display: flex; justify-content: space-between; gap: var(--sp-6); flex-wrap: wrap; margin-bottom: 18px; }
.order-card__id { font-family: var(--f-mono); font-variant-numeric: tabular-nums; font-size: 13px; color: var(--c-stone); margin-bottom: 6px; }
.order-card__status { font-family: var(--f-display); font-size: 26px; letter-spacing: -.015em; }
.order-card__items { font-size: 15px; color: var(--c-ink-soft); padding-top: 6px; }
.order-card__total { font-family: var(--f-display); font-size: 30px; }
.order-card__stage { display: flex; justify-content: space-between; font-size: 13.5px; color: var(--c-stone); margin-top: 9px; }


/* --------------------------------------------------------------------------
   LANDING PAGE (paid traffic)
   -------------------------------------------------------------------------- */

.lp-hero {
  background: var(--c-ink); color: var(--c-cream);
  position: relative; overflow: hidden;
  padding-block: clamp(72px, 9vw, 110px);
  text-align: center;
}
.lp-hero__media {
  position: absolute; inset: -14% 0; height: 128%; width: 100%;
  opacity: .32; will-change: transform;
}
.lp-hero__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.lp-hero__inner { position: relative; max-width: 900px; margin-inline: auto; padding-inline: var(--gutter); }
.lp-hero__flag {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--f-label); font-weight: 600; font-size: 11px; letter-spacing: .2em; text-transform: uppercase;
  color: var(--c-spectrum);
  border: 1px solid rgba(232, 163, 61, .4);
  padding: 9px 18px; border-radius: var(--r-pill);
  margin-bottom: 26px;
}
.lp-hero h1 em { font-style: italic; color: var(--c-spectrum); }
.lp-proof { display: flex; gap: 26px; justify-content: center; flex-wrap: wrap; font-size: 14.5px; color: var(--c-cream-60); margin-top: 30px; }

.lp-close {
  background: var(--c-canopy); color: var(--c-cream);
  border-radius: 18px;
  padding: clamp(36px, 5vw, 60px);
  text-align: center;
  position: relative; overflow: hidden;
}
.lp-close__glow {
  position: absolute; top: -200px; left: 50%;
  width: 700px; height: 700px; border-radius: 50%;
  background: radial-gradient(circle, rgba(232, 163, 61, .3) 0%, rgba(232, 163, 61, 0) 66%);
  animation: lp-glow 6s ease-in-out infinite;
  pointer-events: none;
  transform: translate(calc(-50% + var(--gx, 0px)), var(--gy, 0px));
  transition: transform var(--glow-move);
}
.lp-close > :not(.lp-close__glow) { position: relative; }


/* --------------------------------------------------------------------------
   404
   -------------------------------------------------------------------------- */

.notfound {
  min-height: 66vh;
  display: flex; align-items: center; justify-content: center;
  padding: 96px var(--gutter);
  text-align: center;
}
.notfound__code { font-family: var(--f-display); font-weight: 300; font-size: clamp(80px, 12vw, 120px); line-height: 1; letter-spacing: -.04em; color: var(--c-canopy); margin-bottom: 12px; }
.notfound__title { font-family: var(--f-display); font-size: 32px; font-style: italic; color: var(--c-stone); margin-bottom: 14px; }


/* --------------------------------------------------------------------------
   RESPONSIVE
   -------------------------------------------------------------------------- */

@media (max-width: 1100px) {
  .pdp { grid-template-columns: 1fr; }
  .pdp__gallery { position: static; }
  .builder { grid-template-columns: 1fr; }
  .summary-panel { position: static; }
  .cart-layout, .checkout-layout { grid-template-columns: 1fr; gap: 40px; }
  .order-summary { position: static; }
  .product-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stat-band { grid-template-columns: repeat(2, 1fr); }
  .review-wall { columns: 2; }
  .mosaic { grid-template-columns: 1fr 1fr; height: auto; }
  .mosaic > div:first-child { grid-column: span 2; aspect-ratio: 16 / 9; }
  .mosaic > div { aspect-ratio: 4 / 3; }
}

@media (max-width: 900px) {
  .split, .split--wide-right, .split--wide-left,
  .collection-head, .waitlist, .versus, .kenny-teaser__grid { grid-template-columns: 1fr; }
  .waitlist { gap: 32px; }
  .collection-head { gap: 24px; }
  .collection-head__tools { justify-content: flex-start; }
  .product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .triptych { grid-template-columns: 1fr; }
  .triptych__item:nth-child(2) { padding-top: 0; }
  .tiers { grid-template-columns: 1fr; }
  .tier__flag { top: -11px; left: 34px; }
  .hero { padding-top: 140px; min-height: 620px; }
}

@media (max-width: 700px) {
  .height-picker { grid-template-columns: 1fr; }
  .addons { grid-template-columns: 1fr; }
  .product-grid, .product-grid--4 { grid-template-columns: 1fr 1fr; gap: 16px; }
  .product-card__name { font-size: 19px; }
  .stat-band { grid-template-columns: 1fr; gap: 20px; }
  .review-wall { columns: 1; }
  .field-grid { grid-template-columns: 1fr; }
  .field-grid .input--wide { grid-column: span 1; }
  .mosaic { grid-template-columns: 1fr; }
  .mosaic > div:first-child { grid-column: span 1; }
  .pdp__thumb { width: 64px; height: 64px; }
  .lamp-row { padding: 22px; }
  .detail-row { grid-template-columns: 1fr; gap: 20px; padding: 24px; }
  .detail-row__img { max-width: 160px; }
  .quiz { padding-inline: var(--gutter); }
  .quiz__option { padding: 18px 20px; font-size: 16px; }
}


/* --------------------------------------------------------------------------
   LEGAL PAGES
   -------------------------------------------------------------------------- */

.legal h2 { font-size: 26px; margin: 40px 0 14px; }
.legal h2:first-child { margin-top: 0; }
.legal ul { margin: 0 0 26px; padding-left: 22px; }
.legal li { margin-bottom: 10px; }
/* Placeholders and caveats read as editorial notes, not as body copy. */
.legal em { color: var(--c-clay); font-style: italic; }

.legal-note {
  background: var(--c-sand);
  border-left: 3px solid var(--c-moss);
  border-radius: var(--r-sm);
  padding: 20px 24px;
  margin-bottom: 40px;
  font-size: 15px;
  line-height: 1.65;
  color: var(--c-ink-soft);
}
.legal-note strong { display: block; color: var(--c-ink); margin-bottom: 4px; }
.legal-note--review { border-left-color: var(--c-clay); }

.legal__nav {
  display: flex; flex-wrap: wrap; gap: var(--sp-6);
  margin-top: 56px; padding-top: 28px;
  border-top: 1px solid var(--c-line);
  font-size: 15px;
}