/* ============================================================
   Numena Healing — shared site styles
   Branded output: dark / gold luxury only.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Jost:wght@300;400;500;600&family=Fraunces:opsz,wght@9..144,300..600&display=swap');

/* Thai glyph coverage — Jost/Fraunces have no Thai. These faces register
   under the SAME family names, restricted to the Thai unicode range, so
   Thai text renders in Noto Thai while Latin text and all numerals keep
   the brand fonts. No selector overrides needed anywhere. */
@font-face {
  font-family: 'Jost';
  font-style: normal;
  font-weight: 300 600;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/notosansthai/v29/iJWQBXeUZi_OHPqn4wq6hQ2_hbJ1xyN9wd43SofNWcdfKI2hX2g.woff2) format('woff2');
  unicode-range: U+02D7, U+0303, U+0331, U+0E01-0E5B, U+200C-200D, U+25CC;
}
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 300 600;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/notoserifthai/v28/k3kHo80MPvpLmixYH7euCxWpSMu3-gcWGj0hHAKGvUQleOfz-UhI.woff2) format('woff2');
  unicode-range: U+02D7, U+0303, U+0331, U+0E01-0E5B, U+200C-200D, U+25CC;
}
/* Thai script is taller than Latin (stacked vowels/tone marks) — give
   Thai pages a little extra line headroom so nothing clips. */
:lang(th) h1, :lang(th) h2, :lang(th) h3, :lang(th) h4 { line-height: 1.35; }
:lang(th) p, :lang(th) li { line-height: 1.75; }

:root {
  --bg:        #080808;
  --bg-soft:   #101010;
  --bg-card:   #141414;
  --font-luxury: 'Fraunces', 'Times New Roman', serif;
  --gold:      #e2cba9;
  --gold-soft: #e2cba9;
  --gold-bright: #eed9b8; /* one hover step brighter than --gold, same warm family */
  --text:      #ece7dc;
  --text-dim:  #9a9286;
  --text-mute: #635c50;
  --border:    #262219;
  --green:     #5aa873;
  --maxw:      1240px;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }

/* fixed header: keep anchor targets clear of it */
[id] { scroll-margin-top: 130px; }

body {
  font-family: 'Jost', -apple-system, sans-serif;
  background: var(--bg);
  color: var(--text);
  font-size: 17px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  font-variant-numeric: lining-nums tabular-nums;
}

/* Headings use Fraunces, a variable serif. font-optical-sizing:auto lets the
   browser match stroke contrast to each heading's size — thin, high-contrast
   hairlines on big titles; sturdier strokes on small ones. */
h1, h2, h3, h4 {
  font-family: var(--font-luxury);
  font-weight: 360;
  font-optical-sizing: auto;
  line-height: 1.1;
  letter-spacing: -0.01em;
}

a { color: inherit; text-decoration: none; }

.num { font-variant-numeric: lining-nums tabular-nums; }

img { max-width: 100%; height: auto; display: block; }

.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 clamp(28px, 3.4vw, 52px); }

/* ---- Section primitives ---- */
.section { padding: clamp(84px, 9vw, 116px) 0; }
.section-soft { background: var(--bg-soft); }

.eyebrow {
  font-size: 13px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--gold);
  font-weight: 500;
}

.section-title {
  font-size: 44px;
  margin: 14px 0 0;
  color: var(--text);
}

.divider {
  height: 2px;
  background: linear-gradient(90deg, var(--gold), transparent);
  margin: 18px 0 26px;
  width: 220px;
}
.divider.center { margin-left: auto; margin-right: auto;
  background: linear-gradient(90deg, transparent, var(--gold), transparent); }

.lead { color: var(--text-dim); max-width: 640px; font-size: 19px; }

/* ---- Buttons ---- */
.btn {
  display: inline-block;
  padding: 14px 30px;
  font-family: 'Jost', sans-serif;
  font-size: 14px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 500;
  border: 1px solid var(--gold);
  color: var(--gold);
  background: transparent;
  cursor: pointer;
  transition: transform .2s ease-out, background .2s ease-out, color .2s ease-out,
              border-color .2s ease-out, box-shadow .2s ease-out;
}
.btn-solid { background: var(--gold); color: var(--bg); }
/* Hover lift + brighten — hover-capable devices only, so taps never stick */
@media (hover: hover) {
  .btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 18px -8px rgba(0, 0, 0, .55);
    background: var(--gold-bright);
    border-color: var(--gold-bright);
    color: var(--bg);
  }
  .btn-solid:hover { background: var(--gold-bright); border-color: var(--gold-bright); }
}
/* Press: settle back down, quicker */
.btn:active {
  transform: translateY(-1px);
  box-shadow: 0 4px 10px -7px rgba(0, 0, 0, .5);
  transition-duration: .1s;
}
.btn:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
/* Reduced motion: no movement, colour feedback only */
@media (prefers-reduced-motion: reduce) {
  .btn:hover, .btn:active { transform: none; box-shadow: none; }
}

/* ============================================================
   Header / navigation
   ============================================================ */
body { position: relative; }
.site-header {
  position: fixed; left: 0; right: 0; top: 0; z-index: 100;
  background: transparent;
  -webkit-backdrop-filter: none; backdrop-filter: none;
  border-bottom: 1px solid transparent;
  transition: background .45s ease, border-color .45s ease,
              -webkit-backdrop-filter .45s ease, backdrop-filter .45s ease;
}
/* Scrolled: light glass — ~20% dark + blur, never a heavy black bar */
.site-header.scrolled {
  background: rgba(5, 5, 5, 0.20);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(226, 203, 169, 0.10);
}
.nav {
  position: relative;
  max-width: none; margin: 0 auto;
  padding: 0 clamp(32px, 4vw, 76px);  /* spans the viewport — MENU far left, language far right */
  display: flex; align-items: center;
  height: 104px;
  transition: height .35s ease;
}
.site-header.scrolled .nav { height: 72px; }

/* Centered logo — absolutely positioned so the left/right link
   zones stay symmetrical around it */
.nav-logo {
  position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
}
/* Two independent layers form the lockup at the top, then the wordmark collapses
   on scroll to leave the standalone NU mark — a real, separate asset, never a
   clip of the full logo:
   - __word: the NUMENA / HEALING wordmark (images/logo_wordmark.png). The
     "animation" layer — it clips/collapses upward and fades on scroll.
   - __mark: the standalone bold nu (images/logo_nu.png, trimmed of its
     transparent padding so a CSS height renders the real glyph at that height).
     The final clean mark — ALWAYS full opacity, NEVER clipped, scale(1). At the
     top it sits above the wordmark; on scroll it simply glides to the bar centre.
   No crossfade and no scale, so the mark can never flash, fade or distort. Both
   layers are absolutely centred in the stage so the nav links never shift, and
   the stage has no overflow clip — only __word carries a clip-path. */
.nav-logo__stage {
  position: relative; display: block;
  width: 132px; height: 104px;
  /* The whole logo is held at 0.7 (30% smaller) in BOTH states, so it never
     changes size on scroll (no growth). The top state also sits a touch lower so
     the tall lockup isn't pinned to the top edge; only that translateY resets on
     scroll. scale() is about the stage centre, so the approved vertical position
     is unchanged. transform only — no layout shift, nav links unaffected. */
  transform: translateY(12px) scale(0.7);
  transition: width .45s cubic-bezier(.22, 1, .36, 1),
              height .45s cubic-bezier(.22, 1, .36, 1),
              transform .45s cubic-bezier(.22, 1, .36, 1);
}
.nav-logo__word,
.nav-logo__mark {
  position: absolute; left: 50%; top: 50%;
  display: block; width: auto;
  object-fit: contain;
}
/* Wordmark layer — collapses upward (top-down clip) and fades on scroll. */
.nav-logo__word {
  height: 42px;
  transform: translate(-50%, calc(-50% + 28px));
  opacity: 1; z-index: 1;
  transition: clip-path 560ms cubic-bezier(.4, 0, .2, 1),
              transform 560ms cubic-bezier(.4, 0, .2, 1),
              opacity 300ms ease;
  will-change: clip-path, transform, opacity;
}
/* NU mark — the final compact logo. Full opacity, unclipped, no scale; it only
   translates from its lockup position down to the bar centre. */
.nav-logo__mark {
  height: 40px;
  transform: translate(-50%, calc(-50% - 32px));
  opacity: 1; z-index: 2;
  transition: transform 600ms cubic-bezier(.4, 0, .2, 1);
  will-change: transform;
}
/* Scrolled: wordmark collapses away, NU settles centred in the compact bar. */
.site-header.scrolled .nav-logo__stage { width: 56px; height: 56px; transform: translateY(0) scale(0.7); }
.site-header.scrolled .nav-logo__word {
  clip-path: inset(100% 0 0 0);
  transform: translate(-50%, calc(-50% + 15px));
  opacity: 0;
}
.site-header.scrolled .nav-logo__mark {
  transform: translate(-50%, -50%);
}
@media (prefers-reduced-motion: reduce) {
  .nav-logo__word, .nav-logo__mark, .nav-logo__stage {
    transition: clip-path 120ms linear !important, transform 120ms linear !important,
                opacity 120ms linear !important;
  }
  .nav-logo__mark { transform: translate(-50%, calc(-50% - 32px)); }
  .site-header.scrolled .nav-logo__mark { transform: translate(-50%, -50%); }
  .site-header.scrolled .nav-logo__word { clip-path: inset(100% 0 0 0); opacity: 0; }
}

/* Far-left MENU button — opens the full navigation overlay */
.nav-menu-btn {
  display: inline-flex; align-items: center; gap: 11px;
  background: none; border: none; cursor: pointer;
  padding: 8px 0; margin-right: clamp(40px, 4vw, 72px);
  color: #e2cba9;
  font-family: 'Jost', sans-serif;
  font-size: 12px; letter-spacing: 0.22em; text-transform: uppercase;
  transition: color .18s;
  text-shadow: 0 1px 14px rgba(0, 0, 0, 0.45);
}
.nav-menu-btn:hover { color: var(--gold); }
.nmb-lines { display: inline-flex; flex-direction: column; gap: 5px; }
.nmb-lines span { display: block; width: 22px; height: 1px; background: var(--gold); transition: width .25s ease; }
.nmb-lines span:last-child { width: 14px; }
.nav-menu-btn:hover .nmb-lines span:last-child { width: 22px; }

/* Visible link zones: Products / Business left of the logo,
   Contact + language right of it. Everything else lives in the overlay. */
.nav-links { display: flex; align-items: center; gap: clamp(32px, 3vw, 48px); list-style: none; }
.nav-links-right { margin-left: auto; }
.nav-links > li > a {
  font-size: 13px; letter-spacing: 0.14em; text-transform: uppercase;
  font-weight: 400; color: #e2cba9; padding: 8px 0;
  transition: color .18s;
  text-shadow: 0 1px 14px rgba(0, 0, 0, 0.45); /* readable over hero imagery */
}
.nav-links > li > a:hover,
.nav-links > li > a.active { color: var(--gold); }

/* dropdown */
.has-dropdown { position: relative; }
.dropdown-toggle::after { content: ' \25BE'; font-size: 10px; color: var(--gold); }
.dropdown {
  position: absolute; top: 100%; left: -16px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  min-width: 196px;
  padding: 8px 0;
  opacity: 0; visibility: hidden; transform: translateY(6px);
  transition: opacity .18s, transform .18s, visibility .18s;
}
.has-dropdown:hover .dropdown,
.has-dropdown:focus-within .dropdown,
.has-dropdown.open .dropdown {
  opacity: 1; visibility: visible; transform: translateY(0);
}
.dropdown a {
  display: block; padding: 11px 22px;
  font-size: 14px; letter-spacing: 0.06em; color: var(--text-dim);
  transition: background .15s, color .15s;
}
.dropdown a:hover { background: var(--bg-soft); color: var(--gold); }

/* language switcher */
.lang-switch { display: flex; gap: 4px; }
.lang-switch button {
  background: transparent; border: none; cursor: pointer;
  font-family: 'Jost', sans-serif; font-size: 12px; font-weight: 500;
  letter-spacing: 0.08em; color: var(--text-mute);
  padding: 5px 8px; transition: color .15s;
}
.lang-switch button:hover { color: var(--text-dim); }
.lang-switch button.active { color: var(--gold); }
.lang-switch button[disabled] { cursor: not-allowed; }

/* language switch sits subtle at the far right of the bar */
.nav > .lang-switch { margin-left: clamp(32px, 3vw, 52px); }

/* ---- Language dropdown (main.js upgrades .lang-switch into this) ---- */
.lang-switch.lang-dd { position: relative; gap: 0; }
.lang-dd-trigger {
  display: inline-flex; align-items: center; gap: 8px;
  color: var(--text-dim);
}
.lang-dd-trigger:hover, .lang-dd.open .lang-dd-trigger { color: var(--gold); }
.lang-dd-caret {
  width: 6px; height: 6px; margin-top: -4px;
  border-right: 1px solid currentColor; border-bottom: 1px solid currentColor;
  transform: rotate(45deg); transition: transform .2s ease, margin .2s ease;
}
.lang-dd.open .lang-dd-caret { transform: rotate(225deg); margin-top: 2px; }
.lang-dd-list {
  position: absolute; top: calc(100% + 14px); right: 0; z-index: 300;
  min-width: 136px; display: flex; flex-direction: column; padding: 8px 0;
  background: rgba(10, 10, 10, 0.97);
  border: 1px solid rgba(226, 203, 169, 0.22);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.5);
  visibility: hidden; opacity: 0; transform: translateY(-6px);
  transition: opacity .18s ease, transform .18s ease, visibility .18s;
}
.lang-dd.open .lang-dd-list { visibility: visible; opacity: 1; transform: none; }
.lang-dd-list button {
  text-align: left; width: 100%; padding: 10px 18px;
  letter-spacing: 0.08em;
}
.lang-dd-list button:hover { color: var(--gold); background: rgba(226, 203, 169, 0.06); }
/* in the menu overlay footer the list opens upward */
.menu-foot .menu-lang.lang-dd .lang-dd-list { top: auto; bottom: calc(100% + 14px); }

/* ---- Mobile / tablet header (≤1100px) ----
   MENU left · logo centre · language right.
   Products / Business / Contact move into the overlay. */
@media (max-width: 1100px) {
  .nav { height: 78px; padding: 0 22px; }
  .site-header.scrolled .nav { height: 64px; }
  .nav-logo__stage { width: 96px; height: 78px; transform: translateY(8px) scale(0.7); }
  .nav-logo__word { height: 32px; transform: translate(-50%, calc(-50% + 20px)); }
  .nav-logo__mark { height: 30px; transform: translate(-50%, calc(-50% - 22px)); }
  .site-header.scrolled .nav-logo__stage { width: 46px; height: 46px; }
  .site-header.scrolled .nav-logo__word {
    clip-path: inset(100% 0 0 0);
    transform: translate(-50%, calc(-50% + 12px));
    opacity: 0;
  }
  .site-header.scrolled .nav-logo__mark {
    transform: translate(-50%, -50%);
  }

  .nav-menu-btn { margin-right: 0; }
  .nav-menu-btn .nmb-text { display: none; } /* icon-only on small screens */
  .nav-links-left, .nav-links-right { display: none; }
  .nav > .lang-switch { margin-left: auto; }
}

/* ============================================================
   Full-screen navigation overlay — luxury editorial slide-out
   Left nav panel slides in from the left; the right side is a
   cinematic image preview that changes on hover / focus.
   ============================================================ */
.menu-overlay {
  position: fixed; inset: 0; z-index: 200;
  display: flex; overflow: hidden;
  background:
    radial-gradient(ellipse 72% 60% at 16% 8%, rgba(217, 154, 85, 0.10), transparent 60%),
    radial-gradient(ellipse 60% 55% at 92% 94%, rgba(111, 147, 166, 0.10), transparent 65%),
    #070707;
  opacity: 0; visibility: hidden;
  transition: opacity .35s ease, visibility .35s ease;
  scrollbar-width: none; -ms-overflow-style: none;
}
.menu-overlay.open { opacity: 1; visibility: visible; }
body.menu-open { overflow: hidden; }
.menu-overlay::-webkit-scrollbar,
.menu-panel::-webkit-scrollbar { width: 0; height: 0; display: none; }

/* ---- Left navigation panel (slides in from the left) ---- */
.menu-panel {
  flex: 0 0 44%; max-width: 44%;
  position: relative; z-index: 2;
  display: flex; flex-direction: column;
  padding: clamp(26px, 4vh, 46px) clamp(34px, 3.6vw, 70px) clamp(26px, 4vh, 44px);
  background:
    radial-gradient(circle at 8% 16%,  rgba(190, 116, 42, 0.30), transparent 36%),
    radial-gradient(circle at 16% 84%, rgba(226, 203, 169, 0.14), transparent 36%),
    radial-gradient(circle at 94% 60%, rgba(24, 65, 78, 0.42), transparent 50%),
    linear-gradient(180deg, rgba(16, 12, 9, 0.98), rgba(3, 3, 3, 0.99));
  transform: translateX(-102%);
  transition: transform .7s cubic-bezier(.22, 1, .36, 1);
  overflow-y: auto; overscroll-behavior: contain;
  scrollbar-width: none; -ms-overflow-style: none;
}
.menu-overlay.open .menu-panel { transform: none; }

.menu-close {
  align-self: flex-end;
  display: inline-flex; align-items: center; gap: 9px;
  background: none; border: none; cursor: pointer;
  color: var(--gold);
  font-family: 'Jost', sans-serif;
  font-size: 12px; letter-spacing: 0.24em; text-transform: uppercase;
  padding: 4px 2px; opacity: 0.85; transition: opacity .18s;
}
.menu-close:hover { opacity: 1; }
.menu-close .mc-x { font-size: 22px; line-height: 1; }

/* ---- Navigation list ---- */
.menu-nav {
  flex: 1 1 auto;
  display: flex; flex-direction: column; justify-content: center;
  padding: clamp(20px, 4vh, 44px) 0;
}
.menu-list { list-style: none; margin: 0; padding: 0; }
.menu-list > li {
  border-top: 1px solid rgba(226, 203, 169, 0.12);
  opacity: 0; transform: translateY(14px);
  transition: opacity .5s ease, transform .5s ease;
}
.menu-list > li:last-child { border-bottom: 1px solid rgba(226, 203, 169, 0.12); }
.menu-overlay.open .menu-list > li { opacity: 1; transform: none; }
.menu-overlay.open .menu-list > li:nth-child(1) { transition-delay: .12s; }
.menu-overlay.open .menu-list > li:nth-child(2) { transition-delay: .18s; }
.menu-overlay.open .menu-list > li:nth-child(3) { transition-delay: .24s; }
.menu-overlay.open .menu-list > li:nth-child(4) { transition-delay: .30s; }
.menu-overlay.open .menu-list > li:nth-child(5) { transition-delay: .36s; }
.menu-overlay.open .menu-list > li:nth-child(6) { transition-delay: .42s; }

.menu-link {
  display: block;
  font-family: var(--font-luxury); font-weight: 360;
  font-size: clamp(28px, 3.4vw, 46px);
  line-height: 1.18; letter-spacing: -0.01em;
  color: #ece7dc;
  padding: clamp(12px, 1.5vh, 18px) 0;
  transition: color .2s ease;
}
.menu-link:hover, .menu-link:focus-visible { color: var(--gold); }

.menu-parent-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.menu-parent-row .menu-link { flex: 1 1 auto; }

/* +/- toggle for the expandable parents (Products, Business) */
.menu-toggle {
  flex: 0 0 auto;
  position: relative; width: 28px; height: 28px;
  background: none; border: none; cursor: pointer; padding: 0;
  color: var(--gold); opacity: 0.8; transition: opacity .18s;
}
.menu-toggle:hover { opacity: 1; }
.menu-toggle::before, .menu-toggle::after {
  content: ''; position: absolute; left: 50%; top: 50%;
  width: 14px; height: 1.5px; background: currentColor;
  transform: translate(-50%, -50%); transition: opacity .25s ease, transform .25s ease;
}
.menu-toggle::after { transform: translate(-50%, -50%) rotate(90deg); }
.menu-parent.is-open .menu-toggle::after { opacity: 0; transform: translate(-50%, -50%) rotate(0deg); }

/* Submenu — collapsed by default; revealed on desktop hover/focus or .is-open (click/tap) */
.menu-sub {
  list-style: none; margin: 0; padding: 0 0 0 2px;
  max-height: 0; overflow: hidden; opacity: 0; visibility: hidden;
  transition: max-height .4s ease, opacity .4s ease, visibility .4s ease, margin .4s ease;
}
.menu-sub a {
  display: block;
  font-family: 'Jost', sans-serif;
  font-size: 12.5px; letter-spacing: 0.18em; text-transform: uppercase;
  color: rgba(236, 231, 220, 0.62);
  padding: 9px 0;
  transition: color .18s ease, padding-left .18s ease;
}
.menu-sub a:hover, .menu-sub a:focus-visible { color: var(--gold); padding-left: 8px; }
.menu-parent.is-open > .menu-sub { max-height: 260px; opacity: 1; visibility: visible; margin-bottom: 10px; }
@media (hover: hover) and (min-width: 861px) {
  .menu-parent:hover > .menu-sub,
  .menu-parent:focus-within > .menu-sub { max-height: 260px; opacity: 1; visibility: visible; margin-bottom: 10px; }
}

/* ---- Bottom-left secondary: phone · WhatsApp · language ---- */
.menu-foot {
  flex: 0 0 auto;
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px 20px;
  padding-top: clamp(18px, 3vh, 28px);
  opacity: 0; transition: opacity .5s ease .3s;
}
.menu-overlay.open .menu-foot { opacity: 1; }
.menu-foot > a {
  font-family: 'Jost', sans-serif; font-size: 13px; letter-spacing: 0.06em;
  color: var(--text-dim); transition: color .18s;
}
.menu-foot > a:hover { color: var(--gold); }
.menu-foot .menu-lang { margin-left: auto; }
.menu-foot .menu-lang button { font-size: 12px; }

/* ---- Right cinematic image preview ---- */
.menu-media {
  flex: 1 1 56%;
  position: relative; overflow: hidden;
  opacity: 0; transform: scale(1.03); transform-origin: left center;
  transition: opacity .7s ease .18s, transform .9s ease .18s;
}
.menu-overlay.open .menu-media { opacity: 1; transform: scale(1); }
.menu-media-img {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover; object-position: center;
  opacity: 0; transition: opacity .45s ease;
}
.menu-media-img.is-active { opacity: 1; }
.menu-media-scrim {
  position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background:
    linear-gradient(90deg, #070707 0%, rgba(7, 7, 7, 0.5) 10%, transparent 26%),
    linear-gradient(180deg, rgba(8, 8, 8, 0.25), transparent 32%, rgba(8, 8, 8, 0.5));
}

/* ---- Mobile: single column, image hidden ---- */
@media (max-width: 860px) {
  .menu-panel { flex-basis: 100%; max-width: 100%; }
  .menu-media { display: none; }
  .menu-nav { justify-content: flex-start; padding-top: clamp(16px, 3vh, 28px); }
  .menu-link { font-size: clamp(26px, 7vw, 38px); }
  .menu-sub a { font-size: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .menu-overlay, .menu-panel, .menu-media, .menu-list > li, .menu-foot,
  .menu-media-img, .menu-sub, .menu-toggle::before, .menu-toggle::after { transition: none !important; }
  .menu-panel, .menu-media { transform: none; }
  .menu-list > li, .menu-foot, .menu-media { opacity: 1; }
}

/* ============================================================
   Hero
   ============================================================ */
.hero {
  position: relative;
  min-height: 78vh;
  display: flex; align-items: center;
  border-bottom: 1px solid var(--border);
  overflow: hidden;
}
.hero-bg {
  position: absolute; inset: 0; z-index: 0; overflow: hidden;
  display: block;
}
.hero-bg img {
  width: 100%; height: 100%;
  object-fit: cover; object-position: center;
  image-rendering: auto;
  display: block;
}
.hero::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(8,8,8,.55), rgba(8,8,8,.92));
}
.hero-inner { position: relative; z-index: 2; padding: 0; }
.hero h1 { font-size: 68px; max-width: 760px; }
.hero h1 .gold { color: var(--gold); font-style: normal; }
.hero p { margin-top: 22px; max-width: 560px; color: var(--text-dim); font-size: 20px; }
.hero-cta { margin-top: 34px; display: flex; gap: 16px; flex-wrap: wrap; }

/* page banner (non-home pages) */
.page-banner {
  border-bottom: 1px solid var(--border);
  background: var(--bg-soft);
  padding: 170px 0 66px;
}
.page-banner h1 { font-size: 52px; }
.page-banner .wrap { text-align: left !important; max-width: 620px; margin-left: max(24px, calc((100% - 1200px) / 2)) !important; margin-right: auto !important; padding: 0 24px 0 0 !important; }
.page-banner .divider.center { margin-left: 0 !important; margin-right: 0 !important; }
.page-banner .lead { margin-left: 0 !important; margin-right: 0 !important; max-width: 620px; }
.page-banner.has-hero-bg { position: relative; overflow: visible; padding: 200px 0 360px; background: var(--bg); border-bottom: none; }
.page-banner.has-hero-bg .page-banner-bg {
  position: absolute; inset: 0; z-index: 0; overflow: hidden;
  display: block;
}
.page-banner.has-hero-bg .page-banner-bg img {
  width: 100%; height: 100%;
  object-fit: cover; object-position: center;
  image-rendering: auto;
  display: block;
}
/* Same technique as the homepage hero: the image itself is masked to
   transparent before the bottom edge, so there is no image edge to "cut".
   The overlay only handles text legibility and ends at zero alpha at the
   bottom so the body background shows through, matching whatever the next
   section starts with for a seamless blend. */
/* Eased multi-stop fade: a simple two-stop linear ramp ends with a visible
   "edge" where the gradient terminates (Mach band), which reads as a cut
   above the next section on bright images. The curve below decelerates to
   zero so the image dissolves with no perceptible terminating line. */
.page-banner.has-hero-bg .page-banner-bg {
  -webkit-mask-image: linear-gradient(to bottom,
    #000 0%, #000 48%,
    rgba(0,0,0,.72) 62%,
    rgba(0,0,0,.42) 74%,
    rgba(0,0,0,.18) 85%,
    rgba(0,0,0,.05) 93%,
    transparent 100%);
          mask-image: linear-gradient(to bottom,
    #000 0%, #000 48%,
    rgba(0,0,0,.72) 62%,
    rgba(0,0,0,.42) 74%,
    rgba(0,0,0,.18) 85%,
    rgba(0,0,0,.05) 93%,
    transparent 100%);
}
.page-banner.has-hero-bg .page-banner-overlay {
  position: absolute; inset: 0; z-index: 1;
  background:
    linear-gradient(90deg, rgba(8,8,8,.70) 0%, rgba(8,8,8,.35) 45%, rgba(8,8,8,0) 70%),
    linear-gradient(180deg,
      rgba(8,8,8,.25)  0%,
      rgba(8,8,8,.35) 35%,
      rgba(8,8,8,.20) 70%,
      rgba(8,8,8,0)  100%);
  /* Fade the whole overlay (including the left-side text darkening) toward
     the bottom so the body warm ambient can bleed up into the hero's
     lower-left, matching how the cool ambient already flows on the right.
     Eased stops for the same no-terminating-edge reason as the image mask. */
  -webkit-mask-image: linear-gradient(to bottom,
    #000 0%, #000 45%,
    rgba(0,0,0,.55) 64%,
    rgba(0,0,0,.22) 80%,
    rgba(0,0,0,.06) 91%,
    transparent 100%);
          mask-image: linear-gradient(to bottom,
    #000 0%, #000 45%,
    rgba(0,0,0,.55) 64%,
    rgba(0,0,0,.22) 80%,
    rgba(0,0,0,.06) 91%,
    transparent 100%);
}

/* Let the body-level warm-left / cold-right ambient (body:not(.home)::after)
   show through the hero and the section that follows, exactly like the
   homepage. The hero's own solid bg was previously blocking that ambient. */
.page-banner.has-hero-bg { background: transparent; }
.page-banner.has-hero-bg + .section-soft { background: transparent; }
/* Hero page-banners match the home hero text size + placement */
.page-banner.has-hero-bg {
  min-height: 100vh; height: 100vh;
  display: flex; align-items: center;
  padding: 0;
}
.page-banner.has-hero-bg .wrap {
  max-width: 560px !important;
  margin-left: max(24px, calc((100% - 1200px) / 2)) !important;
  margin-right: auto !important;
  padding: 0 !important;
}
.page-banner.has-hero-bg h1 {
  font-size: clamp(34px, 4.2vw, 56px);
  line-height: 1.08;
}
.page-banner.has-hero-bg .lead {
  font-size: clamp(15px, 1.15vw, 18px);
  max-width: 100% !important;
  margin-top: 18px;
}
/* Align the hero text block to the site container but nudged a touch further
   left into the darker zone, with an editorial max-width and sitting at ~48%
   of the hero height (just above dead centre). Shared by the Business hub and
   the Real Estate, Hotels and Gyms heroes so all four business heroes match. */
.page-banner.has-hero-bg-business .wrap,
.page-banner.has-hero-bg-realestate .wrap,
.page-banner.has-hero-bg-hotels .wrap,
.page-banner.has-hero-bg-gyms .wrap {
  max-width: 560px !important;
  margin-left: max(32px, calc((100% - 1240px) / 2)) !important;
  transform: translateY(-2vh);
}
.page-banner.has-hero-bg-business .eyebrow,
.page-banner.has-hero-bg-realestate .eyebrow,
.page-banner.has-hero-bg-hotels .eyebrow,
.page-banner.has-hero-bg-gyms .eyebrow {
  font-size: 12px;
}
.page-banner.has-hero-bg-business h1,
.page-banner.has-hero-bg-realestate h1,
.page-banner.has-hero-bg-hotels h1,
.page-banner.has-hero-bg-gyms h1 {
  font-size: clamp(47px, 4.7vw, 76px);
  line-height: 1.02;
  text-shadow: 0 1px 22px rgba(0,0,0,.5);
}
.page-banner.has-hero-bg-business .lead,
.page-banner.has-hero-bg-realestate .lead,
.page-banner.has-hero-bg-hotels .lead,
.page-banner.has-hero-bg-gyms .lead {
  max-width: 510px !important;
  font-size: 16px;
  line-height: 1.65;
  color: rgba(236,231,220,0.94);
  text-shadow: 0 1px 16px rgba(0,0,0,.45);
}
/* Left-weighted darkening keeps the headline legible while the products on the
   right stay bright. The hero images are already well-exposed (no filter lift). */
.page-banner.has-hero-bg-business .page-banner-overlay,
.page-banner.has-hero-bg-realestate .page-banner-overlay,
.page-banner.has-hero-bg-hotels .page-banner-overlay,
.page-banner.has-hero-bg-gyms .page-banner-overlay {
  background:
    linear-gradient(90deg,
      rgba(0,0,0,.78) 0%,
      rgba(0,0,0,.60) 34%,
      rgba(0,0,0,.25) 62%,
      rgba(0,0,0,.10) 100%),
    linear-gradient(180deg,
      rgba(0,0,0,0)   60%,
      rgba(0,0,0,.22) 100%);
}
/* Mobile: keep the text vertically centred (not lifted) and strengthen the
   vertical darkening for legibility while keeping the products visible. */
@media (max-width: 767px) {
  .page-banner.has-hero-bg-business .wrap,
  .page-banner.has-hero-bg-realestate .wrap,
  .page-banner.has-hero-bg-hotels .wrap,
  .page-banner.has-hero-bg-gyms .wrap { transform: none; }
  .page-banner.has-hero-bg-business h1,
  .page-banner.has-hero-bg-realestate h1,
  .page-banner.has-hero-bg-hotels h1,
  .page-banner.has-hero-bg-gyms h1 { font-size: clamp(30px, 8.5vw, 38px); }
  .page-banner.has-hero-bg-business .page-banner-overlay,
  .page-banner.has-hero-bg-realestate .page-banner-overlay,
  .page-banner.has-hero-bg-hotels .page-banner-overlay,
  .page-banner.has-hero-bg-gyms .page-banner-overlay {
    background:
      linear-gradient(180deg,
        rgba(0,0,0,.40) 0%,
        rgba(0,0,0,.60) 48%,
        rgba(0,0,0,.32) 100%);
  }
}

/* Product category heroes (Saunas, Ice Baths): the product sits on the right of
   the frame, so keep it in view (object-position) and darken the left harder for
   legibility — the ice-bath ocean is bright. Same cinematic bottom-fade as the
   other hero banners (inherited mask), so there is no hard cut into the page. */
.page-banner.has-hero-bg-product .page-banner-bg img { object-position: center right; }
.page-banner.has-hero-bg-product .page-banner-overlay {
  /* Lighter, image-led scrim — the heavy black is reduced ~30% so the wood,
     water and sauna glow read through. Still left-weighted with a soft bottom
     fade so the large headline stays legible against the brighter image. */
  background:
    linear-gradient(90deg,
      rgba(5,5,5,.62) 0%,
      rgba(5,5,5,.44) 34%,
      rgba(5,5,5,.18) 64%,
      rgba(5,5,5,.06) 100%),
    linear-gradient(180deg,
      rgba(5,5,5,.18) 0%,
      rgba(5,5,5,0)   48%,
      rgba(5,5,5,.22) 100%);
}
/* Cinematic, image-led headline — much larger now the descriptive paragraph is
   gone. The block stays flex-centred and left-aligned, so removing the lead
   rebalances label / title / underline into one intentional cluster. */
.page-banner.has-hero-bg-product h1 {
  font-size: clamp(72px, 8vw, 132px);
  line-height: 0.9;
  letter-spacing: -0.015em;
  text-shadow: 0 1px 22px rgba(0,0,0,.5);
}
/* Underline is now the last element — trim its trailing space so it sits tight
   under the title rather than floating where the paragraph used to be. */
.page-banner.has-hero-bg-product .divider { margin-bottom: 2px; }
.page-banner.has-hero-bg-product .lead,
.page-banner.has-hero-bg-product .eyebrow,
.page-banner.has-hero-bg-product .sys-label { text-shadow: 0 1px 16px rgba(0,0,0,.45); }
/* Sit the text cluster a touch lower and further left than dead-centre, for a
   more grounded, cinematic bottom-left anchor. (Reset to centred on mobile.)
   The -48px pull only applies from 1296px up: below that the wrap's own
   margin (max(24px, (100% - 1200px)/2)) is smaller than 48px, so pulling it
   left would push the headline off the left edge of the screen. */
.page-banner.has-hero-bg-product .wrap { transform: translateY(9vh); }
@media (min-width: 1296px) {
  .page-banner.has-hero-bg-product .wrap { transform: translate(-48px, 9vh); }
}
/* Bundles title is long ("The Recovery Room Bundles") — sized close to the
   one-word heroes, but a tight font-relative max-width forces it to wrap to
   "The Recovery / Room Bundles" so both lines stay in the empty left zone and
   never run across the sauna cabin or the ice bath in the image. */
body.bundles .page-banner.has-hero-bg-product .wrap { max-width: 680px !important; }
body.bundles .page-banner.has-hero-bg-product h1 {
  font-size: clamp(54px, 6.1vw, 102px);
  line-height: 0.94;
  max-width: 6.2em;
}
/* Jacuzzi hero is a night-time photograph and the lit tub sits low in the
   frame, where the shared bottom mask would fade it out. Hold the image solid
   lower down (still transparent at the very bottom so it blends into the page
   like the other product heroes) so the jacuzzi stays clearly visible. */
body.jacuzzis .page-banner.has-hero-bg .page-banner-bg {
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 66%, transparent 100%);
          mask-image: linear-gradient(to bottom, #000 0%, #000 66%, transparent 100%);
}
@media (max-width: 767px) {
  /* Mobile uses a portrait, product-focused crop — centre it and use a vertical
     scrim so the headline stays readable over the product. */
  .page-banner.has-hero-bg-product .page-banner-bg img { object-position: center; }
  .page-banner.has-hero-bg-product .page-banner-overlay {
    /* Lighter vertical scrim (~30% less black) so the product shows through,
       still enough mid-band darkening to keep the headline readable. */
    background:
      linear-gradient(180deg,
        rgba(5,5,5,.36) 0%,
        rgba(5,5,5,.48) 48%,
        rgba(5,5,5,.28) 100%);
  }
  /* Portrait crop: keep the text centred over the product, not nudged. */
  .page-banner.has-hero-bg-product .wrap { transform: none; }
  /* Cinematic but mobile-safe headline size. */
  .page-banner.has-hero-bg-product h1 {
    font-size: clamp(52px, 15vw, 78px);
    line-height: 0.95;
  }
  /* Long Bundles title: smaller, with a font-relative max-width so it always
     breaks to "The Recovery / Room Bundles" instead of overrunning the edge. */
  body.bundles .page-banner.has-hero-bg-product h1 {
    font-size: clamp(34px, 9.2vw, 50px);
    line-height: 0.98;
    max-width: 7.6em;
  }
}

/* ============================================================
   Cards / grids
   ============================================================ */
.grid { display: grid; gap: 26px; }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-2 { grid-template-columns: repeat(2, 1fr); }

.card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  padding: 38px;
  transition: border-color .2s, transform .2s;
}
.card:hover { border-color: var(--gold); transform: translateY(-3px); }
.card h3 { font-size: 27px; color: var(--gold); }
.card p { color: var(--text-dim); margin-top: 8px; }

/* product cards */
.product {
  background: var(--bg-card);
  border: 1px solid var(--border);
  display: flex; flex-direction: column;
  transition: border-color .2s;
}
.product:hover { border-color: var(--gold); }
.product-img {
  background: var(--bg-soft);
  height: 280px;
  display: flex; align-items: center; justify-content: center;
  border-bottom: 1px solid var(--border);
}
.product-img img { max-height: 240px; width: auto; }
/* Photographic category image (Wellness Rooms): fill the slot edge to edge */
.product-img--photo { overflow: hidden; }
.product-img--photo img { width: 100%; height: 100%; max-height: none; object-fit: cover; }
.product-body { padding: 32px 36px 40px; display: flex; flex-direction: column; flex: 1; }
.product-name { font-size: 30px; color: var(--text); }
.product-tag {
  font-size: 12px; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--gold); margin-top: 4px;
}
.product-cap { color: var(--text-dim); margin-top: 12px; font-size: 15px; }
.product-char { color: var(--text-dim); margin-top: 12px; font-size: 15px; line-height: 1.55; }
.product-spec { color: var(--text-mute); margin-top: 10px; font-size: 13px; letter-spacing: 0.02em; }
/* Internal model / SKU code shown under a product name on listing & detail cards. */
.product-model { font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-mute); margin-top: 6px; }
/* Saunas & Ice Baths cards: the positioning line carries the product
   description. Style it as a soft premium description rather than a small
   uppercase label — sentence case, no tracking, muted warm-white, slightly
   smaller than the product name, and a comfortable measure so it never breaks
   into awkward short lines. Scoped to these pages so the short tags on other
   product cards keep their tight style. */
body.saunas .product-tag,
body.icebaths .product-tag,
body.jacuzzis .product-tag,
body.wellnessrooms .product-tag {
  text-transform: none;
  letter-spacing: 0;
  font-weight: 400;
  font-size: clamp(15px, 1.05vw, 18px);
  line-height: 1.55;
  color: rgba(243, 238, 230, 0.72);
  max-width: 34ch;
  margin-top: 8px;
}
body.saunas .product-spec,
body.icebaths .product-spec,
body.jacuzzis .product-spec,
body.wellnessrooms .product-spec { margin-top: 16px; }

/* Wellness Rooms — built-in room cards + hero image slot.
   These rooms are quoted by dimension, so there is no price block. A quiet
   "priced by room size" line takes the price-row's place (margin-top:auto)
   so the "Request a Quote" CTA still bottom-aligns across the three cards.
   Hero + card photos are not shot yet, so both use marked image slots. */
body.wellnessrooms .room-price {
  margin-top: auto; padding-top: 20px;
  font-size: 15px; color: var(--text-dim);
}
/* Scoped under .page-banner.has-hero-bg so it beats the base .page-banner-bg
   rule (display:block) and actually centres the slot marker. */
.page-banner.has-hero-bg .page-banner-bg--slot {
  display: flex; align-items: center; justify-content: center;
  background:
    radial-gradient(ellipse 78% 60% at 50% 44%, rgba(226, 203, 169, 0.07), transparent 62%),
    var(--bg-soft);
}
.page-banner-bg--slot .img-slot-tag {
  border: 1px dashed rgba(226, 203, 169, 0.42);
  color: var(--text-mute);
  font-size: 12px; letter-spacing: 0.24em; text-transform: uppercase;
  padding: 12px 22px;
}
.spec-list { list-style: none; margin: 18px 0; }
.spec-list li {
  padding: 7px 0; border-bottom: 1px solid var(--border);
  font-size: 15px; color: var(--text-dim);
}
.spec-list li::before { content: '\2014  '; color: var(--gold); }
.price-row {
  margin-top: auto; padding-top: 20px;
  display: flex; align-items: baseline; gap: 8px;
}
.price {
  font-family: 'Jost', sans-serif;
  font-size: 34px; font-weight: 500; color: var(--gold);
  font-variant-numeric: lining-nums tabular-nums;
}
.price-note { font-size: 13px; color: var(--text-mute); }

.badge {
  display: inline-block; font-size: 11px; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--bg); background: var(--gold);
  padding: 4px 12px; font-weight: 600;
}

/* bundles */
.bundle-fit {
  font-size: 14px; color: var(--text-dim); font-style: italic;
  margin-top: 10px;
}
.bundle-save { color: var(--green); font-size: 15px; }

/* Bundle card description: match the readable style used on the Saunas /
   Ice Baths cards — sentence case, no tracking, soft warm-white, comfortable
   measure — so the bundle line reads consistently with the rest of the range. */
body.bundles .product-cap {
  text-transform: none;
  letter-spacing: 0;
  font-weight: 400;
  font-size: clamp(15px, 1.05vw, 18px);
  line-height: 1.55;
  color: rgba(243, 238, 230, 0.72);
  max-width: 34ch;
  margin-top: 12px;
}
/* Bundle spec rows: a clean two-column plate (gold label | value). A fixed
   label column keeps the Sauna / Ice bath pairing value on one straight line
   and never drops it under the label on desktop; the one long label
   ("Delivery and installation") is allowed to wrap instead of stealing the
   value's width. Stacks only on very narrow phones. */
body.bundles .spec-list li {
  display: grid;
  grid-template-columns: 104px 1fr;
  column-gap: 12px;
  align-items: baseline;
}
body.bundles .spec-list li::before { content: none; }
body.bundles .spec-list li strong {
  min-width: 0;
  white-space: normal;
  line-height: 1.3;
}
body.bundles .spec-list li .spec-val { min-width: 0; font-size: 13px; }
@media (max-width: 480px) {
  body.bundles .spec-list li { grid-template-columns: 1fr; row-gap: 3px; }
}

/* ============================================================
   Business / ROI
   ============================================================ */
.audience-list { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }
.audience-list span {
  border: 1px solid var(--border); padding: 9px 18px;
  font-size: 14px; letter-spacing: 0.08em; color: var(--text-dim);
}

.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.field { display: flex; flex-direction: column; gap: 7px; }
.field.full { grid-column: 1 / -1; }
.field label {
  font-size: 13px; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--text-dim);
}
.field input, .field select, .field textarea {
  background: var(--bg); border: 1px solid var(--border);
  color: var(--text); padding: 13px 15px;
  font-family: 'Jost', sans-serif; font-size: 15px;
}
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; border-color: var(--gold);
}
.field textarea { resize: vertical; min-height: 110px; }

/* ============================================================
   FAQ accordion
   ============================================================ */
.faq-item { border-bottom: 1px solid var(--border); }
.faq-q {
  width: 100%; text-align: left; background: none; border: none;
  cursor: pointer; padding: 26px 40px 26px 0; position: relative;
  font-family: var(--font-luxury); font-size: 24px;
  color: var(--text); font-weight: 400;
}
.faq-q::after {
  content: '+'; position: absolute; right: 4px; top: 24px;
  color: var(--gold); font-size: 26px; font-family: 'Jost', sans-serif;
}
.faq-item.open .faq-q::after { content: '\2212'; }
.faq-a {
  max-height: 0; overflow: hidden; transition: max-height .3s ease;
  color: var(--text-dim);
}
.faq-a p { padding: 0 40px 26px 0; }

/* ============================================================
   Footer
   ============================================================ */
.site-footer {
  border-top: 1px solid var(--border);
  background: var(--bg-soft);
  padding: 54px 0 30px;
}
.footer-grid {
  display: flex; flex-wrap: wrap; gap: 48px; justify-content: space-between;
}
.footer-grid img { height: 40px; margin-bottom: 14px; }
.footer-col h4 { font-size: 18px; color: var(--gold); margin-bottom: 12px; }
.footer-col a, .footer-col p {
  display: block; color: var(--text-dim); font-size: 15px; padding: 4px 0;
}
.footer-col a:hover { color: var(--gold); }
.footer-bottom {
  margin-top: 40px; padding-top: 22px; border-top: 1px solid var(--border);
  color: var(--text-mute); font-size: 13px;
}
.footer-bottom a { color: var(--text-dim); }
.footer-bottom a:hover { color: var(--gold); }

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width: 920px) {
  .grid-3, .grid-2, .form-grid { grid-template-columns: 1fr; }
  .hero h1 { font-size: 46px; }
  .section-title { font-size: 34px; }
  .page-banner h1 { font-size: 38px; }
}

@media (max-width: 560px) {
  .wrap { padding: 0 20px; }
  .section { padding: 60px 0; }
  .card, .product-body { padding: 26px; }
}

/* ============================================================
   Product detail + configurator
   ============================================================ */
.detail-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  align-items: start;
}

.detail-media {
  position: sticky; top: 100px;
}
.detail-img {
  position: relative;
  overflow: hidden;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 4px;
  display: flex; align-items: center; justify-content: center;
  padding: 56px 48px 64px;
  min-height: 400px;
}
/* grounding floor shadow under the product */
.detail-img::after {
  content: '';
  position: absolute; left: 50%; bottom: 46px;
  transform: translateX(-50%);
  width: 58%; height: 26px;
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(0,0,0,.6), transparent 72%);
  z-index: 0;
  pointer-events: none;
}
.detail-img img {
  position: relative; z-index: 1;
  max-height: 420px; width: auto;
  filter: drop-shadow(0 26px 34px rgba(0,0,0,.5));
  -webkit-box-reflect: below 0 linear-gradient(transparent 68%, rgba(255,255,255,.06));
}

.detail-intro .product-tag { margin-top: 0; }
.detail-intro h1 { font-size: 46px; color: var(--text); }
.detail-intro .spec-list { margin-top: 22px; }

/* configure pages: "The material" narrative block (left column) */
.material-block { margin-top: 26px; padding-top: 24px; border-top: 1px solid var(--border); }
.material-block .sys-label { margin-bottom: 12px; }
.material-block p { color: var(--text-dim); font-size: 15px; line-height: 1.7; }
.material-block .material-spec { color: var(--text-mute); font-size: 13px; margin-top: 10px; letter-spacing: 0.02em; }

/* ============================================================
   Material feature — premium editorial split (configurator pages).
   Sits above the configurator: left = label / heading / body, right =
   three benefit rows separated by thin champagne rules. The amber-left /
   cold-right ambient comes from .atmo-split on the section itself.
   ============================================================ */
.material-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(40px, 7vw, 110px);
  align-items: start;
}
.material-copy .sys-label { margin-bottom: 6px; }
.material-copy h2 {
  font-size: clamp(34px, 3.8vw, 52px);
  line-height: 1.05;
  color: var(--text);
  margin: 0;
}
.material-copy p {
  color: var(--text-dim);
  font-size: 18px;
  line-height: 1.7;
  margin-top: 22px;
  max-width: 32em;
}
.mb-row {
  padding: 22px 0;
  border-top: 1px solid rgba(226, 203, 169, 0.22);
}
.mb-row:last-child { padding-bottom: 0; }
.mb-title {
  font-family: var(--font-luxury);
  font-size: 22px;
  font-weight: 400;
  letter-spacing: 0.005em;
  color: var(--text);
}
.mb-desc {
  color: var(--text-dim);
  font-size: 16px;
  line-height: 1.6;
  margin-top: 6px;
}

@media (max-width: 860px) {
  .material-split { grid-template-columns: 1fr; gap: 30px; }
}

/* Product spec rows (configurator pages): clean label/value rows with hairline
   dividers — body sans, labels a touch stronger than the values, scannable and
   premium rather than a generic ecommerce table. */
.spec-detail { list-style: none; margin: 26px 0 0; }
.spec-detail li {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 20px; padding: 12px 0;
  border-top: 1px solid var(--border);
}
.spec-detail li:last-child { border-bottom: 1px solid var(--border); }
.spec-detail .sd-k {
  font-family: 'Jost', sans-serif;
  flex: none;
  color: var(--text); font-weight: 500;
  font-size: 14px; letter-spacing: 0.04em;
}
.spec-detail .sd-v {
  color: var(--text-dim); font-size: 15px; text-align: right;
  font-variant-numeric: lining-nums tabular-nums;
}
/* Pull the Material feature a little closer to the product/configurator block
   above it (~20–30% tighter) while keeping premium breathing room. */
.material-feature { padding-top: clamp(48px, 5vw, 68px); }
/* Material feature reads cleaner with no atmospheric glow behind the copy. With
   the glow gone the section background is flat, so it also blends seamlessly into
   the product/configurator block above (no seam, no divider). Scoped to the
   material feature only, so atmo-split elsewhere is unaffected. */
.material-feature.atmo-split::before { display: none; }

/* configurator card */
.configurator {
  background: var(--bg-card);
  border: 1px solid var(--border);
  padding: 40px 42px 44px;
}
.configurator > h2 { font-size: 30px; color: var(--gold); }
/* Bundle configurator intro line (sits between the title and the divider). */
.config-lead { color: var(--text-dim); font-size: 14.5px; line-height: 1.65; margin: 10px 0 0; max-width: 44ch; }
.configurator .divider { width: 160px; margin: 14px 0 34px; }

.opt-group { border: none; margin-bottom: 40px; }
.opt-group legend {
  font-size: 12px; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--text-dim); margin-bottom: 18px; padding: 0;
}

.opt {
  display: flex; align-items: center; gap: 14px;
  padding: 13px 18px;
  border: 1px solid rgba(226,203,169,.10);
  border-radius: 3px;
  margin-bottom: 8px;
  cursor: pointer;
  transition: border-color .2s, background .2s;
  font-size: 15px;
}
.opt:hover { border-color: rgba(226,203,169,.3); background: rgba(226,203,169,.025); }

/* custom luxury radio / checkbox controls */
.opt input[type="radio"],
.opt input[type="checkbox"] {
  appearance: none; -webkit-appearance: none;
  width: 20px; height: 20px; flex-shrink: 0; margin: 0;
  border: 1.5px solid var(--text-mute);
  background: transparent;
  cursor: pointer;
  position: relative;
  transition: border-color .2s, background .2s;
}
.opt input[type="radio"] { border-radius: 50%; }
.opt input[type="checkbox"] { border-radius: 5px; }
.opt:hover input:not(:disabled) { border-color: var(--gold); }
.opt input[type="radio"]:checked { border-color: var(--gold); }
.opt input[type="radio"]:checked::after {
  content: ''; position: absolute; inset: 4px;
  border-radius: 50%; background: var(--gold);
}
.opt input[type="checkbox"]:checked {
  border-color: var(--gold); background: var(--gold);
}
.opt input[type="checkbox"]:checked::after {
  content: ''; position: absolute; left: 6px; top: 2.5px;
  width: 5px; height: 10px;
  border: solid var(--bg); border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
.opt input:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }

.opt-name { flex: 1; color: var(--text); font-weight: 500; }
.opt-price {
  font-size: 14px; color: var(--gold);
  font-variant-numeric: lining-nums tabular-nums;
  white-space: nowrap;
}
.opt-included .opt-price { color: var(--green); }
.opt input:disabled { opacity: .45; cursor: default; }
.opt:has(input:disabled) { cursor: default; opacity: .85; }
.opt:has(input:checked) { border-color: var(--gold); background: rgba(226,203,169,.07); box-shadow: inset 0 0 0 1px rgba(226,203,169,.25); }

.config-total-row {
  display: flex; justify-content: space-between; align-items: baseline;
  margin: 26px 0 6px;
  padding-top: 22px;
  border-top: 1px solid var(--border);
}
.config-total-row .label {
  font-size: 13px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--text-dim);
}
.config-total {
  font-family: 'Jost', sans-serif;
  font-size: 30px; font-weight: 500; color: var(--gold);
  font-variant-numeric: lining-nums tabular-nums;
  white-space: nowrap;
}
.config-vat { font-size: 13px; color: var(--text-mute); margin-bottom: 22px; }
.configurator .btn { width: 100%; text-align: center; }

/* validation prompt shown when a required choice is missing */
.config-error {
  color: var(--gold); font-size: 14px; line-height: 1.5;
  border: 1px solid rgba(226,203,169,.40);
  background: rgba(226,203,169,.06);
  padding: 12px 16px; border-radius: 3px;
  margin-bottom: 16px;
}
.opt-group.needs-choice legend { color: var(--gold); }
.opt-group.needs-choice .opt { border-color: rgba(226,203,169,.35); }

@media (max-width: 920px) {
  .detail-grid { grid-template-columns: 1fr; gap: 32px; }
  .detail-media { position: static; }
  .detail-intro h1 { font-size: 36px; }
}
@media (max-width: 560px) {
  .detail-img { padding: 44px 28px 52px; min-height: 320px; }
  .configurator { padding: 26px 22px 30px; }
  .opt { padding: 14px 14px; }
  .build-line { font-size: 13.5px; }
  .config-total { font-size: 26px; }
}

/* ============================================================
   Wellness investment case (business-realestate)
   The numbers are the visual — no icons, no decoration.
   ============================================================ */
.wellness-case { padding: clamp(80px, 11vw, 140px) 0; background: transparent; }
.wellness-case .wrap { max-width: 1280px; }

.wc-title {
  text-align: center;
  font-size: clamp(30px, 4vw, 46px);
  color: var(--text);
  margin-bottom: clamp(48px, 7vw, 90px);
}

/* ---- Part 1: hero stat ---- */
.wc-hero { text-align: center; padding: clamp(36px, 6vw, 80px) 0; }
.wc-rule { width: 120px; height: 1px; background: var(--gold); margin: 0 auto; }

.wc-bignum {
  font-family: var(--font-luxury);
  font-weight: 300;
  font-size: clamp(5rem, 13vw, 8rem);
  line-height: 0.95;
  letter-spacing: -0.02em;
  color: var(--gold);
  margin: clamp(22px, 3vw, 40px) 0;
  font-variant-numeric: lining-nums tabular-nums;
}
.wc-label {
  font-family: 'Jost', sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  font-weight: 500;
  font-size: clamp(14px, 1.6vw, 19px);
  color: #F5F0E8;
}
.wc-subhead {
  font-family: var(--font-luxury);
  font-style: italic;
  font-size: clamp(18px, 2.2vw, 24px);
  line-height: 1.5;
  color: rgba(245, 240, 232, 0.8);
  max-width: 620px;
  margin: 22px auto 0;
}
.wc-source {
  font-family: 'Jost', sans-serif;
  font-size: 12px;
  letter-spacing: 0.04em;
  color: rgba(226, 203, 169, 0.6);
  margin-top: 22px;
}

/* ---- Part 2: supporting stat cards ---- */
.wc-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 22px;
  margin-top: clamp(48px, 7vw, 88px);
}
.wc-card {
  background: linear-gradient(160deg, #080808, #111111);
  border: 1px solid rgba(226, 203, 169, 0.3);
  padding: 34px 28px;
  transition: border-color .25s, transform .25s;
}
.wc-card:hover { border-color: var(--gold); transform: translateY(-4px); }

.wc-card-num {
  font-family: 'Jost', sans-serif;
  font-weight: 300;
  font-size: clamp(2.3rem, 3.6vw, 3.1rem);
  line-height: 0.95;
  letter-spacing: -0.02em;
  color: var(--gold);
  white-space: nowrap;
  font-variant-numeric: lining-nums tabular-nums;
}
/* Gyms business case uses short value phrases ("PREMIUM TIER", "SMALL
   FOOTPRINT") in place of 01–05. Let them wrap to two lines and run a touch
   smaller than the single-token numbers so they stay large but never overflow;
   weight, tracking and line-height stay as the base display style. */
.wc-grid-text .wc-card-num {
  white-space: normal;
  text-transform: uppercase;
  font-size: clamp(1.9rem, 2.9vw, 2.6rem);
}
.wc-card-label {
  font-family: 'Jost', sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  font-weight: 500;
  font-size: 12px;
  color: #F5F0E8;
  margin: 14px 0 16px;
}
.wc-card-body {
  font-family: var(--font-luxury);
  font-size: 18px;
  line-height: 1.6;
  color: rgba(245, 240, 232, 0.85);
}
.wc-card-source {
  font-family: 'Jost', sans-serif;
  font-style: italic;
  font-size: 11px;
  color: rgba(226, 203, 169, 0.5);
  margin-top: 18px;
}

/* 5-card variant: 3 on top row, 2 centered on the bottom row */
.wc-grid-balanced { grid-template-columns: repeat(6, 1fr); }
.wc-grid-balanced > .wc-card { grid-column: span 2; }
.wc-grid-balanced > .wc-card:nth-child(4) { grid-column: 2 / span 2; }
.wc-grid-balanced > .wc-card:nth-child(5) { grid-column: 4 / span 2; }

@media (max-width: 980px) {
  .wc-grid { grid-template-columns: repeat(2, 1fr); }
  .wc-grid-balanced { grid-template-columns: repeat(2, 1fr); }
  .wc-grid-balanced > .wc-card,
  .wc-grid-balanced > .wc-card:nth-child(4),
  .wc-grid-balanced > .wc-card:nth-child(5) { grid-column: auto; }
}
@media (max-width: 540px) {
  .wc-grid { grid-template-columns: 1fr; }
  .wc-grid-balanced { grid-template-columns: 1fr; }
}

/* ============================================================
   Layout components — added in the credibility overhaul.
   Used to break the repetitive three-card-grid rhythm.
   ============================================================ */

/* ---- Honest note / callout ---- */
.note {
  border-left: 2px solid var(--gold);
  background: var(--bg-soft);
  padding: 16px 22px;
  margin-top: 26px;
  color: var(--text-dim);
  font-size: 15px;
  line-height: 1.6;
}

/* ---- Feature checklist (icon-free) ---- */
.feature-list { list-style: none; }
.feature-list li {
  position: relative;
  padding: 12px 0 12px 26px;
  border-bottom: 1px solid var(--border);
  color: var(--text-dim);
  font-size: 16px;
}
.feature-list li:last-child { border-bottom: none; }
.feature-list li::before {
  content: '';
  position: absolute; left: 0; top: 20px;
  width: 8px; height: 8px;
  background: var(--gold);
  transform: rotate(45deg);
}
.feature-list li strong { color: var(--text); font-weight: 500; }

/* ---- Included / not-included split panel ---- */
.split-panel {
  display: grid;
  grid-template-columns: 1.35fr 1fr;
  border: 1px solid var(--border);
  margin-top: 34px;
}
.split-panel > div { padding: 38px 40px; }
.split-panel .sp-included { background: var(--bg-card); }
.split-panel .sp-excluded {
  background: var(--bg-soft);
  border-left: 1px solid var(--border);
}
.split-panel h3 { font-size: 23px; color: var(--gold); margin-bottom: 6px; }
.split-panel .sp-sub {
  font-size: 13px; letter-spacing: 0.04em;
  color: var(--text-mute); margin-bottom: 16px;
}

/* ---- Process / timeline ---- */
.steps { counter-reset: step; margin-top: 44px; max-width: 760px; }
.step {
  position: relative;
  margin-left: 26px;
  padding: 0 0 38px 78px;
  border-left: 1px solid var(--border);
}
.step:last-child { padding-bottom: 0; border-left-color: transparent; }
.step::before {
  counter-increment: step;
  content: counter(step);
  position: absolute; left: -27px; top: -8px;
  width: 54px; height: 54px;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-luxury);
  font-weight: 300; letter-spacing: -0.02em;
  font-size: 25px; color: var(--gold);
  background: var(--bg-card);
  border: 1px solid var(--gold);
  border-radius: 50%;
}
.step h3 { font-size: 24px; color: var(--text); }
.step p { color: var(--text-dim); margin-top: 6px; font-size: 16px; }

/* ---- Decision / comparison table ---- */
.decision-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 36px;
}
.decision-table th,
.decision-table td {
  text-align: left;
  padding: 20px 22px;
  border-bottom: 1px solid var(--border);
  font-size: 16px;
  vertical-align: top;
}
.decision-table th {
  font-family: 'Jost', sans-serif;
  font-size: 12px; letter-spacing: 0.16em;
  text-transform: uppercase; font-weight: 500;
  color: var(--gold);
}
.decision-table td:first-child { color: var(--text); font-weight: 500; }
.decision-table .dt-pick {
  font-family: var(--font-luxury);
  font-size: 21px; color: var(--gold);
}
.decision-table td p { color: var(--text-dim); font-size: 14px; margin-top: 2px; }
.decision-table tbody tr:hover td { background: var(--bg-soft); }

@media (max-width: 720px) {
  .decision-table, .decision-table tbody,
  .decision-table tr, .decision-table td { display: block; width: 100%; }
  .decision-table thead { display: none; }
  .decision-table tr {
    border: 1px solid var(--border);
    background: var(--bg-card);
    margin-bottom: 16px;
  }
  .decision-table td {
    border: none;
    border-bottom: 1px solid var(--border);
    padding: 14px 20px;
  }
  .decision-table td:last-child { border-bottom: none; }
  .decision-table td::before {
    content: attr(data-label);
    display: block;
    font-size: 11px; letter-spacing: 0.14em;
    text-transform: uppercase; color: var(--gold);
    margin-bottom: 5px;
  }
}

/* ---- Bundle spotlight band ---- */
.bundle-spotlight {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  border: 1px solid var(--gold);
  margin-top: 34px;
}
.bundle-spotlight .bs-media {
  background: var(--bg-card);
  display: flex; align-items: center; justify-content: center;
  padding: 40px;
}
.bundle-spotlight .bs-media img { max-height: 340px; width: auto; }
.bundle-spotlight .bs-body { padding: 48px 50px; }
.bundle-spotlight .bs-body h2 { font-size: 34px; color: var(--text); }
.bundle-spotlight .bs-body p { color: var(--text-dim); margin: 16px 0 26px; }
@media (max-width: 820px) {
  .bundle-spotlight { grid-template-columns: 1fr; }
  .bundle-spotlight .bs-body { padding: 36px 28px; }
}

/* ============================================================
   About — Story / Standard / Vision editorial rows
   Number + headline + body copy on the left, image on the right,
   rows split by thin hairlines. No boxes — keeps it editorial.
   ============================================================ */
.story-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(48px, 7vw, 96px);
  align-items: center;
  padding: clamp(64px, 8vw, 100px) 0;
  border-top: 1px solid var(--border);
}
.story-row:first-child { padding-top: 8px; border-top: none; }
.story-row:last-child  { padding-bottom: 0; }

.story-num {
  display: block;
  font-family: var(--font-luxury);
  font-size: 19px; letter-spacing: 0.24em;
  color: var(--gold);
}
.story-title { font-size: 40px; margin: 8px 0 0; }   /* tuned for the text column */
.story-rule {
  display: block; height: 2px; width: 88px; margin: 18px 0 24px;
  background: linear-gradient(90deg, var(--gold), transparent);
}
.story-body p { color: var(--text-dim); font-size: 18px; max-width: 560px; }
.story-body p + p { margin-top: 18px; }

/* Image well — placeholder styling; drop in <img> to fill it */
.story-media {
  aspect-ratio: 4 / 3;
  border: 1px solid rgba(226, 203, 169, 0.35);
  background:
    radial-gradient(ellipse 120% 90% at 50% 0%, rgba(var(--warm), 0.10), transparent 60%),
    rgba(255, 255, 255, 0.02);
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
  color: var(--text-mute);
  font-size: 13px; letter-spacing: 0.18em; text-transform: uppercase;
}
.story-media picture { width: 100%; height: 100%; display: block; }
.story-media img { width: 100%; height: 100%; object-fit: cover; }

/* Zigzag: even rows flip to image-left / text-right */
.story-row:nth-child(even) .story-media { order: 1; }
.story-row:nth-child(even) .story-body  { order: 2; }

@media (max-width: 820px) {
  .story-row { grid-template-columns: 1fr; gap: 24px; padding: 44px 0; }
  .story-title { font-size: 30px; }
  .story-rule  { margin: 14px 0 20px; }
  .story-body p { font-size: 16px; max-width: 100%; }
  /* Always stack text above image, regardless of zigzag order */
  .story-row:nth-child(even) .story-media,
  .story-row:nth-child(even) .story-body { order: 0; }
}

/* ============================================================
   About — "The People" island network
   Three editorial columns under a thin gold top rule each.
   No boxes / borders — reads as one connected network.
   ============================================================ */
.network-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(44px, 5vw, 68px);
  margin-top: clamp(56px, 6vw, 80px);
}
.network-item { padding-top: 24px; border-top: 1px solid rgba(226, 203, 169, 0.32); }
.net-num {
  display: block;
  font-family: var(--font-luxury);
  font-size: 17px; letter-spacing: 0.24em; color: var(--gold);
}
.network-item h3 { font-size: 25px; color: var(--text); margin: 12px 0 10px; }
.network-item p  { color: var(--text-dim); font-size: 16px; max-width: 34ch; }

/* restrained stagger to match the page's scroll-reveal motion */
.network-grid .network-item:nth-child(2) { transition-delay: .08s; }
.network-grid .network-item:nth-child(3) { transition-delay: .16s; }

@media (max-width: 820px) {
  .network-grid { grid-template-columns: 1fr; gap: 0; margin-top: 40px; }
  .network-item { padding: 22px 0; }
  .network-item:last-child { padding-bottom: 0; }
  .network-item p { max-width: 100%; }
}

/* ============================================================
   About — "How We Work" editorial split
   Image placeholder left, numbered rows right.
   Thin dividers, no boxes — same editorial language as
   the network grid above.
   ============================================================ */
.hww-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(44px, 6vw, 72px);
  align-items: stretch;
}
.hww-media {
  border: 1px solid rgba(226, 203, 169, 0.3);
  background: rgba(255, 255, 255, 0.02);
  display: flex; align-items: center; justify-content: center;
  min-height: 100%;
  overflow: hidden;
  color: var(--text-mute);
  font-size: 13px; letter-spacing: 0.18em; text-transform: uppercase;
}
.hww-media picture { width: 100%; height: 100%; display: block; }
.hww-media img { width: 100%; height: 100%; object-fit: cover; }
.hww-steps { margin-top: 40px; }
.hww-step {
  display: grid;
  grid-template-columns: 52px 1fr;
  gap: 24px;
  align-items: baseline;
  padding: 24px 0;
  border-top: 1px solid rgba(226, 203, 169, 0.32);
}
.hww-step:last-child { border-bottom: 1px solid rgba(226, 203, 169, 0.32); }
.hww-num {
  font-family: var(--font-luxury);
  font-size: 17px; letter-spacing: 0.24em; color: var(--gold);
}
.hww-step h3 { font-size: 23px; color: var(--text); }
.hww-step p {
  margin-top: 8px;
  color: var(--text-dim);
  font-size: 15.5px; line-height: 1.65;
  max-width: 46ch;
}
.hww-actions { margin-top: 40px; display: flex; gap: 16px; flex-wrap: wrap; }

/* restrained stagger to match the page's scroll-reveal motion */
.hww-steps .hww-step:nth-child(2) { transition-delay: .08s; }
.hww-steps .hww-step:nth-child(3) { transition-delay: .16s; }

@media (max-width: 820px) {
  .hww-split { grid-template-columns: 1fr; gap: 36px; }
  .hww-media { min-height: 0; aspect-ratio: 4 / 3; }
  .hww-steps { margin-top: 32px; }
  .hww-step { grid-template-columns: 44px 1fr; gap: 18px; padding: 20px 0; }
  .hww-step p { max-width: 100%; }
  .hww-actions { margin-top: 32px; }
}

/* ---- Configurator: option descriptions ---- */
/* descriptions stay collapsed until their option is selected, hovered or focused —
   keeps the column calm and scannable instead of a wall of paragraphs */
.opt-desc {
  font-size: 12px;
  line-height: 1.5;
  color: var(--text-mute);
  margin: 0 0 0 34px;
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transition: max-height .3s ease, opacity .25s ease, margin .3s ease;
}
/* Supporting copy reveals only for the selected option (or keyboard focus),
   keeping unselected rows minimal — title + price only — for a calmer panel. */
.opt:focus-within + .opt-desc,
.opt:has(input:checked) + .opt-desc {
  max-height: 6em;
  opacity: .65;
  margin: 8px 0 16px 34px;
}
.opt-desc:last-child { margin-bottom: 4px; }

/* ---- Configurator: quote summary panel ---- */
.summary-panel {
  border: 1px solid rgba(226,203,169,.22);
  background: linear-gradient(160deg, var(--bg-soft), var(--bg-card));
  border-radius: 4px;
  padding: 18px 22px;
  margin: 18px 0 24px;
}
.summary-panel .sp-head {
  font-family: 'Jost', sans-serif;
  font-size: 12px; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--gold);
  margin-bottom: 12px;
}

/* live build recap lines */
.build-lines { margin-bottom: 2px; }
.build-line {
  display: flex; justify-content: space-between; gap: 18px;
  padding: 5px 0;
  font-size: 13.5px;
  border-bottom: 1px solid rgba(38,34,25,.5);
}
.build-line:last-child { border-bottom: none; }
.build-line .bl-label {
  color: var(--text-mute);
  letter-spacing: 0.04em;
  flex-shrink: 0;
}
.build-line .bl-val {
  color: var(--text);
  text-align: right;
  overflow-wrap: anywhere;
}
.build-fineprint {
  font-size: 12.5px; color: var(--text-mute);
  line-height: 1.6; margin-top: 16px;
}
.cta-subnote {
  font-size: 13px; color: var(--text-dim);
  line-height: 1.6; text-align: center;
  margin-top: 16px;
}
.summary-line {
  display: flex; justify-content: space-between; gap: 18px;
  padding: 7px 0;
  font-size: 15px; color: var(--text-dim);
}
.summary-line .sl-val {
  color: var(--text); white-space: nowrap;
  font-variant-numeric: lining-nums tabular-nums;
}
.summary-upgrades:empty { display: none; }
.summary-upgrades { border-top: 1px solid var(--border); margin-top: 6px; padding-top: 6px; }
.summary-total {
  display: flex; justify-content: space-between; align-items: baseline;
  margin-top: 12px; padding-top: 16px;
  border-top: 1px solid var(--border);
}
/* Ice bath viewing panel: price is the first item in the panel (no build recap
   above it), so drop the divider that normally separates it from the recap. */
.summary-panel > .summary-total:first-child { margin-top: 0; padding-top: 0; border-top: none; }
.summary-total .label {
  font-size: 13px; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--text-dim);
}
.summary-fineprint {
  font-size: 12.5px; color: var(--text-mute);
  line-height: 1.6; margin-top: 14px;
}
.summary-fineprint span { display: block; }

/* ============================================================
   ISLAND RECOVERY ENGINEERING — visual system
   Hot / cold contrast atmosphere, texture, motion, technical motifs.
   ============================================================ */

:root {
  --warm: 217, 154, 85;   /* sauna amber  — used in rgba() glows */
  --cold: 111, 147, 166;  /* plunge blue-grey */
  --red:  199, 90, 74;    /* red light therapy accent */
}

/* ---- Global fine noise texture ---- */
body::before {
  content: '';
  position: fixed; inset: 0; z-index: 0;
  pointer-events: none;
  opacity: 0.04;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}
body > * { position: relative; z-index: 1; }

/* ---- Section atmosphere glows (hot / cold) ---- */
.section, .page-banner { position: relative; }
.atmo-warm, .atmo-cold, .atmo-split, .atmo-red { position: relative; overflow: hidden; }
.atmo-warm > *, .atmo-cold > *, .atmo-split > *, .atmo-red > * { position: relative; z-index: 1; }
.atmo-warm::before, .atmo-cold::before, .atmo-split::before, .atmo-red::before {
  content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none;
}
.atmo-warm::before {
  background: radial-gradient(ellipse 55% 60% at 12% 8%,
    rgba(var(--warm), 0.16), transparent 68%);
}
.atmo-cold::before {
  background: radial-gradient(ellipse 55% 65% at 88% 95%,
    rgba(var(--cold), 0.16), transparent 68%);
}
.atmo-split::before {
  background:
    radial-gradient(ellipse 46% 60% at 6% 18%, rgba(var(--warm), 0.15), transparent 62%),
    radial-gradient(ellipse 46% 60% at 94% 86%, rgba(var(--cold), 0.15), transparent 62%);
}
.atmo-red::before {
  background: radial-gradient(ellipse 50% 60% at 90% 12%,
    rgba(var(--red), 0.13), transparent 66%);
}
/* Section directly after a full-height hero: its atmo glow is clipped by the
   section's overflow:hidden, and a glow anchored near the top edge paints a
   straight tonal step exactly on the hero boundary. Ease the glow in below
   the boundary instead, so the hero dissolves into the section cleanly. */
.page-banner.has-hero-bg + .section.atmo-warm::before,
.page-banner.has-hero-bg + .section.atmo-cold::before,
.page-banner.has-hero-bg + .section.atmo-split::before,
.page-banner.has-hero-bg + .section.atmo-red::before {
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 280px);
          mask-image: linear-gradient(to bottom, transparent 0, #000 280px);
}

/* ---- Technical / system labels ---- */
.sys-label {
  display: inline-flex; align-items: center; gap: 12px;
  font-family: 'Jost', sans-serif;
  font-size: 11px; letter-spacing: 0.26em; text-transform: uppercase;
  color: var(--gold);
}
.tech-rule {
  height: 1px; background: var(--border); margin: 0;
  position: relative;
}
.tech-rule::before {
  content: ''; position: absolute; left: 0; top: -2px;
  width: 60px; height: 5px;
  border-left: 1px solid var(--gold); border-right: 1px solid var(--gold);
  border-top: 1px solid var(--gold);
}

/* ---- Scroll reveal motion ----
   Driven by a CSS animation (not transition) so each element keeps its own
   transition for hover states — no shorthand collision. Premium calm rise. */
.reveal { opacity: 0; will-change: opacity, transform; }
.reveal.is-visible { animation: reveal-rise .85s cubic-bezier(.22, 1, .36, 1) both; }
@keyframes reveal-rise {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: none; }
}

/* Within a section, cascade: label first, headline second, body third */
.reveal.section-title { animation-delay: .08s; }
.reveal.lead { animation-delay: .16s; }

/* Subtle stagger for grouped cards / rows (horizontal groups) */
.grid .reveal:nth-child(2), .why-grid .reveal:nth-child(2),
.wc-grid .reveal:nth-child(2), .network-grid .reveal:nth-child(2),
.cred-strip .reveal:nth-child(2) { animation-delay: .08s; }
.grid .reveal:nth-child(3), .why-grid .reveal:nth-child(3),
.wc-grid .reveal:nth-child(3), .network-grid .reveal:nth-child(3),
.cred-strip .reveal:nth-child(3) { animation-delay: .16s; }
.grid .reveal:nth-child(4),
.wc-grid .reveal:nth-child(4), .network-grid .reveal:nth-child(4),
.cred-strip .reveal:nth-child(4) { animation-delay: .24s; }
.wc-grid .reveal:nth-child(5) { animation-delay: .32s; }

/* Optional explicit stagger utilities (animation-based) */
.reveal-delay-1 { animation-delay: .08s; }
.reveal-delay-2 { animation-delay: .16s; }
.reveal-delay-3 { animation-delay: .24s; }
.reveal-delay-4 { animation-delay: .32s; }

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1 !important; transform: none !important; animation: none !important; }
  html { scroll-behavior: auto; }
}
@media print {
  .reveal { opacity: 1 !important; transform: none !important; animation: none !important; }
}

/* ---- Nav: animated gold hover line ---- */
.nav-links > li > a { position: relative; }
.nav-links > li > a::after {
  content: ''; position: absolute; left: 0; right: 100%; bottom: -2px;
  height: 1px; background: var(--gold);
  transition: right .25s ease;
}
.nav-links > li > a:hover::after,
.nav-links > li > a.active::after { right: 0; }
@media (max-width: 1100px) {
  .nav-links > li > a::after { display: none; }
}

/* ---- Card hover lift + gold border draw ---- */
.card { position: relative; overflow: hidden; }
.card::before,
.card::after {
  content: ''; position: absolute; width: 0; height: 0;
  pointer-events: none;
  transition: width .3s ease, height .3s ease;
}
/* top-left bracket: grows along the top + left edges.
   Transparent at rest (no corner mark); gold only while hovering. */
.card::before {
  top: 0; left: 0;
  border-top: 2px solid transparent;
  border-left: 2px solid transparent;
}
/* bottom-right bracket: grows along the bottom + right edges */
.card::after {
  bottom: 0; right: 0;
  border-bottom: 2px solid transparent;
  border-right: 2px solid transparent;
}
.card:hover::before,
.card:hover::after {
  width: 100%; height: 100%;
  border-color: var(--gold);
}

/* ---- Hero: cinematic hot/cold treatment ---- */
.hero { min-height: 100vh; height: 100vh; display: flex; align-items: flex-end; padding-bottom: clamp(64px, 9vh, 120px); }
.hero-bg { opacity: 1; filter: none; }
.hero::before { content: none; }
.hero::after { content: none; }
.hero-inner { z-index: 2; max-width: 680px; margin-left: max(24px, calc((100% - 1200px) / 2)); margin-right: auto; text-align: left; padding: 0; }
.hero h1, .hero p { max-width: 100%; }
.hero h1 { font-size: clamp(44px, 5.2vw, 78px); line-height: 1.0; }
.hero p { font-size: clamp(15px, 1.15vw, 18px); margin-top: 18px; }
.hero-cta { margin-top: 24px; }
.hero-eyebrow { margin-bottom: 22px; }

/* ---- Credibility strip ---- */
.cred-strip {
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  background: var(--bg-soft);
}
.cred-strip .wrap { display: flex; flex-wrap: wrap; padding: 0 32px; }
.cred-item {
  flex: 1; min-width: 210px;
  padding: 22px 28px;
  border-right: 1px solid var(--border);
  display: flex; flex-direction: column; gap: 5px;
}
.cred-item:last-child { border-right: none; }
.cred-item .ci-num {
  font-family: 'Jost', sans-serif; font-size: 11px;
  letter-spacing: 0.2em; color: var(--gold);
}
.cred-item .ci-text { font-size: 15px; color: var(--text); line-height: 1.4; }
@media (max-width: 720px) {
  .cred-item { flex: 1 1 50%; min-width: 50%; }
  .cred-item:nth-child(2) { border-right: none; }
  .cred-item:nth-child(1), .cred-item:nth-child(2) { border-bottom: 1px solid var(--border); }
}

/* ---- Hot / Cold / Light system diagram ---- */
.hcl-system {
  display: grid; grid-template-columns: repeat(3, 1fr);
  border: 1px solid var(--border);
  margin-top: 46px;
}
.hcl-module {
  position: relative;
  padding: 46px 38px;
  border-right: 1px solid var(--border);
}
.hcl-module:last-child { border-right: none; }
.hcl-module.m-heat  { background: linear-gradient(165deg, rgba(var(--warm), 0.12), transparent 72%); }
.hcl-module.m-cold  { background: linear-gradient(165deg, rgba(var(--cold), 0.12), transparent 72%); }
.hcl-module.m-light { background: linear-gradient(165deg, rgba(var(--red), 0.12), transparent 72%); }
.hcl-num {
  font-family: var(--font-luxury);
  font-size: 16px; letter-spacing: 0.22em; color: var(--gold);
}
.hcl-module h3 { font-size: 30px; margin: 12px 0 8px; color: var(--text); }
.hcl-module p { color: var(--text-dim); font-size: 15px; }
.hcl-module:not(:last-child)::after {
  content: ''; position: absolute; right: -6px; top: 50%; z-index: 2;
  width: 11px; height: 11px; background: var(--gold);
  transform: translateY(-50%) rotate(45deg);
}
@media (max-width: 780px) {
  .hcl-system { grid-template-columns: 1fr; }
  .hcl-module { border-right: none; border-bottom: 1px solid var(--border); }
  .hcl-module:last-child { border-bottom: none; }
  .hcl-module:not(:last-child)::after {
    right: 50%; top: auto; bottom: -6px;
    transform: translateX(50%) rotate(45deg);
  }
}

/* ---- Why Numena: feature + supporting panels ---- */
.why-grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: 20px;
  margin-top: 46px;
}
.why-feature {
  grid-row: span 2;
  padding: 44px;
  border: 1px solid var(--border);
  background:
    linear-gradient(160deg, rgba(var(--warm), 0.10), transparent 60%),
    var(--bg-card);
  display: flex; flex-direction: column; justify-content: center;
  transition: border-color .25s, transform .25s;
}
.why-feature:hover { border-color: var(--gold); transform: translateY(-3px); }
.why-feature .sys-label { margin-bottom: 18px; }
.why-feature h3 { font-size: 34px; color: var(--gold); }
.why-feature p { color: var(--text-dim); margin-top: 14px; font-size: 17px; }
.why-panel {
  padding: 30px 32px;
  border: 1px solid var(--border);
  background: var(--bg-card);
  transition: border-color .25s, transform .25s;
}
.why-panel:hover { border-color: var(--gold); transform: translateY(-3px); }
.why-panel.p-cold { background: linear-gradient(160deg, rgba(var(--cold), 0.10), transparent 65%), var(--bg-card); }
.why-panel.p-warm { background: linear-gradient(160deg, rgba(var(--warm), 0.09), transparent 65%), var(--bg-card); }
.why-panel h3 { font-size: 23px; color: var(--text); }
.why-panel p { color: var(--text-dim); margin-top: 8px; font-size: 15px; }
@media (max-width: 760px) {
  .why-grid { grid-template-columns: 1fr; }
  .why-feature { grid-row: auto; padding: 32px 28px; }
}

/* ---- Route list (Find your path) ---- */
.route-list { margin-top: 42px; border-top: 1px solid var(--border); }
.route {
  display: flex; align-items: center; gap: 26px;
  padding: 26px 10px; border-bottom: 1px solid var(--border);
  transition: background .2s ease, padding .2s ease;
}
.route:hover { background: var(--bg-soft); padding-left: 24px; }
.route .r-index {
  font-family: var(--font-luxury);
  font-weight: 300; letter-spacing: -0.02em;
  font-size: 27px; color: var(--gold);
  width: 50px; flex-shrink: 0;
}
.route .r-main { flex: 1; min-width: 0; }
.route .r-main h3 { font-size: 23px; color: var(--text); }
.route .r-main p { color: var(--text-dim); font-size: 14px; margin-top: 2px; }
.route .r-pick {
  color: var(--gold); font-size: 15px; text-align: right;
  font-family: var(--font-luxury); font-size: 20px;
  flex-shrink: 0;
}
.route .r-arrow {
  color: var(--gold); font-size: 22px; flex-shrink: 0;
  transition: transform .2s ease;
}
.route:hover .r-arrow { transform: translateX(7px); }
@media (max-width: 620px) {
  .route { flex-wrap: wrap; gap: 8px 18px; }
  .route .r-pick { text-align: left; width: 100%; padding-left: 76px; }
  .route .r-arrow { display: none; }
}

/* ---- Product cards: warm / cold / split image atmosphere ---- */
.product { transition: border-color .25s, transform .25s, box-shadow .25s; }
.product:hover {
  transform: translateY(-5px);
  box-shadow: 0 22px 46px -28px rgba(0,0,0,.85);
}
.product-img img { transition: transform .35s ease; }
.product:hover .product-img img { transform: scale(1.045); }
.product--warm .product-img {
  background: radial-gradient(ellipse 72% 70% at 50% 38%,
    rgba(var(--warm), 0.18), var(--bg-soft) 72%);
}
.product--warm {
  background: radial-gradient(ellipse 120% 80% at 50% 0%,
    rgba(var(--warm), 0.12), transparent 60%), var(--bg-card);
  border-color: rgba(var(--warm), 0.28);
  box-shadow: 0 0 60px -12px rgba(var(--warm), 0.22);
}
.product--warm:hover {
  box-shadow: 0 22px 46px -28px rgba(0,0,0,.85),
              0 0 70px -10px rgba(var(--warm), 0.30);
}
.product--cold .product-img {
  background: radial-gradient(ellipse 72% 70% at 50% 38%,
    rgba(var(--cold), 0.18), var(--bg-soft) 72%);
}
.product--cold {
  background: radial-gradient(ellipse 120% 80% at 50% 0%,
    rgba(var(--cold), 0.12), transparent 60%), var(--bg-card);
  border-color: rgba(var(--cold), 0.28);
  box-shadow: 0 0 60px -12px rgba(var(--cold), 0.22);
}
.product--cold:hover {
  border-color: rgba(var(--cold), 0.7);
  box-shadow: 0 22px 46px -28px rgba(0,0,0,.85),
              0 0 70px -10px rgba(var(--cold), 0.30);
}
.product--split .product-img {
  background: linear-gradient(118deg,
    rgba(var(--warm), 0.16), var(--bg-soft) 48%, rgba(var(--cold), 0.16));
}
.product--split {
  background: radial-gradient(ellipse 120% 80% at 50% 0%,
    rgba(164, 150, 125, 0.10), transparent 60%), var(--bg-card);
  border-color: rgba(164, 150, 125, 0.28);
  box-shadow: 0 0 60px -12px rgba(164, 150, 125, 0.20);
}
.product--split:hover {
  border-color: rgba(164, 150, 125, 0.7);
  box-shadow: 0 22px 46px -28px rgba(0,0,0,.85),
              0 0 70px -10px rgba(164, 150, 125, 0.28);
}
/* spec-plate styling for listing-card spec lists */
.spec-list li strong {
  display: inline-block; min-width: 96px;
  font-family: 'Jost', sans-serif;
  font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--gold); font-weight: 500;
}

/* ---- Flagship bundle card ---- */
.product--flagship {
  border-color: var(--gold);
  box-shadow: 0 0 0 1px rgba(var(--warm), 0.25);
}
.product--flagship .product-img {
  background: linear-gradient(118deg,
    rgba(var(--warm), 0.22), var(--bg-soft) 46%, rgba(var(--cold), 0.22));
}
.flag-tag {
  display: inline-block;
  font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--gold); border: 1px solid var(--gold);
  padding: 4px 12px; margin-bottom: 10px;
}

/* ---- ROI financial model card ---- */
.model-card {
  display: grid; grid-template-columns: 1fr 1fr;
  border: 1px solid var(--gold);
  margin-top: 36px;
  text-align: left;
}
.model-card .mc-inputs, .model-card .mc-output { padding: 32px 34px; }
.model-card .mc-output {
  background: linear-gradient(155deg, rgba(var(--warm), 0.09), rgba(var(--cold), 0.09));
  border-left: 1px solid var(--border);
}
.mc-head {
  font-family: 'Jost', sans-serif; font-size: 12px;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--gold); margin-bottom: 16px;
}
.mc-row {
  display: flex; justify-content: space-between; gap: 16px;
  padding: 11px 0; border-bottom: 1px solid var(--border);
  font-size: 15px; color: var(--text-dim);
}
.mc-row:last-child { border-bottom: none; }
.mc-row .mc-val { color: var(--text); white-space: nowrap; }
.mc-output .mc-big {
  font-family: var(--font-luxury);
  font-weight: 300;
  font-size: 38px; color: var(--gold); line-height: 0.95;
  letter-spacing: -0.02em; white-space: nowrap;
  margin: 6px 0 4px;
}
@media (max-width: 680px) {
  .model-card { grid-template-columns: 1fr; }
  .model-card .mc-output { border-left: none; border-top: 1px solid var(--border); }
}

/* ---- FAQ: grouped + premium accordion ---- */
.faq-group-label {
  font-family: 'Jost', sans-serif;
  font-size: 12px; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--gold);
  margin: 46px 0 6px;
  display: flex; align-items: center; gap: 14px;
}
.faq-group-label:first-of-type { margin-top: 0; }
.faq-group-label::after {
  content: ''; flex: 1; height: 1px; background: var(--border);
}
.faq-item { transition: border-color .2s; }
.faq-item.open { border-bottom-color: var(--gold); }
.faq-q { transition: color .18s; }
.faq-q:hover { color: var(--gold); }

/* ---- Contact panel ---- */
.contact-panel {
  border: 1px solid var(--gold);
  background:
    radial-gradient(ellipse 50% 80% at 100% 0%, rgba(var(--warm), 0.12), transparent 60%),
    radial-gradient(ellipse 50% 80% at 0% 100%, rgba(var(--cold), 0.12), transparent 60%),
    var(--bg-card);
  padding: 48px 44px;
  text-align: center;
  margin-top: 52px;
}
.contact-panel h3 { font-size: 32px; color: var(--text); }
.contact-panel p { color: var(--text-dim); margin: 10px 0 24px; }
.contact-panel .btn { margin: 6px; }

/* ============================================================
   Paired CTA buttons — both buttons share one baseline + height,
   text vertically centred. Containers are flex rows that wrap on
   mobile; buttons are inline-flex so the .btn-solid overflow:hidden
   baseline quirk can never offset one button above the other.
   ============================================================ */
.hero-cta, .cta-actions, .hww-actions {
  display: flex; flex-wrap: wrap; align-items: center; gap: 16px;
}
.hero-cta .btn, .cta-actions .btn, .hww-actions .btn, .contact-panel .btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 52px; line-height: 1; vertical-align: middle;
}

/* ---- Bundle spotlight: warm/cold split treatment ---- */
.bundle-spotlight .bs-media {
  background: linear-gradient(120deg,
    rgba(var(--warm), 0.20), var(--bg-card) 50%, rgba(var(--cold), 0.20));
}

/* Photographic detail image (studio shot, not a transparent cut-out):
   show the whole photo at cut-out size, no floor shadow or reflection */
.detail-img--photo::after { display: none; }
.detail-img--photo img {
  max-height: 330px; width: auto; max-width: 100%;
  filter: none; -webkit-box-reflect: none;
}
/* Studio-photo card image (jacuzzi): slightly smaller than the cut-out renders */
.product-img img.img-photo-sm { max-height: 200px; }

/* Colour-picker photo cross-fade (jacuzzi configure page): two stacked
   frames ping-ponged by JS — the in-flow frame keeps the card's size,
   the second sits centred on top of it */
.detail-img--photo .swap-stage {
  position: relative; z-index: 1;
  display: flex; align-items: center; justify-content: center;
  max-width: 100%;
}
.detail-img--photo .swap-stage img { transition: opacity .25s ease; }
.detail-img--photo .swap-stage img:not(.is-active) { opacity: 0; }
.detail-img--photo .swap-stage img + img { position: absolute; inset: 0; margin: auto; }
@media (prefers-reduced-motion: reduce) {
  .detail-img--photo .swap-stage img { transition: none; }
}

/* ---- Swatch-grid colour options (jacuzzi configure page) ----
   Circular material swatches replace the text option rows; the selected
   swatch gets a gold ring. Inputs stay standard radios so configurator.js
   (recap, validation, WhatsApp quote) is untouched. */
.opt-note {
  font-size: 13px;
  color: var(--text-mute);
  margin: -8px 0 26px;
  letter-spacing: 0.02em;
}
.swatch-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px 10px;
}
.opt-group--swatches .opt {
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 10px 6px;
  border: none;
  background: none;
  text-align: center;
}
.opt-group--swatches .opt:hover { border: none; background: none; }
.opt-group--swatches .opt:has(input:checked) {
  border: none; background: none; box-shadow: none;
}
.opt-group--swatches .opt input[type="radio"] {
  position: absolute;
  width: 1px; height: 1px;
  opacity: 0;
  margin: 0;
  pointer-events: none;
}
.swatch-dot {
  width: 58px; height: 58px;
  border-radius: 50%;
  padding: 4px;
  border: 2px solid transparent;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.swatch-dot img {
  display: block;
  width: 100%; height: 100%;
  border-radius: 50%;
}
.opt-group--swatches .opt:hover .swatch-dot { border-color: rgba(201, 164, 74, .45); }
.opt-group--swatches .opt input:checked ~ .swatch-dot {
  border-color: #C9A44A;
  box-shadow: 0 0 0 1px rgba(201, 164, 74, .3);
}
.opt-group--swatches .opt input:focus-visible ~ .swatch-dot {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
}
.opt-group--swatches .opt-name {
  flex: none;
  font-size: 13px;
  color: var(--text-dim);
  line-height: 1.3;
  transition: color .2s ease;
}
.opt-group--swatches .opt input:checked ~ .opt-name { color: var(--text); }
/* descriptions: the collapsed-until-selected reveal keys on `.opt + .opt-desc`
   adjacency, which the grid wrapper breaks — show them always here */
.opt-group--swatches .opt-desc {
  max-height: none;
  opacity: .65;
  margin: 14px 0 0;
}
.opt-group--swatches.needs-choice .swatch-dot { border-color: rgba(226, 203, 169, .35); }

/* ---- Configurator image area atmosphere ---- */
.detail-img.di-warm {
  background:
    radial-gradient(ellipse 60% 55% at 50% 40%, rgba(var(--warm), 0.22), transparent 70%),
    radial-gradient(ellipse 90% 80% at 50% 42%, var(--bg-soft), var(--bg-card) 78%);
}
.detail-img.di-cold {
  background:
    radial-gradient(ellipse 60% 55% at 50% 40%, rgba(var(--cold), 0.22), transparent 70%),
    radial-gradient(ellipse 90% 80% at 50% 42%, var(--bg-soft), var(--bg-card) 78%);
}
/* Bundle configurator image: warm sauna → cold ice-bath split, mirroring the
   bundle product cards (.product--split). */
.detail-img.di-split {
  background:
    linear-gradient(118deg, rgba(var(--warm), 0.16), var(--bg-soft) 48%, rgba(var(--cold), 0.16));
}
.opt:has(input:checked) { box-shadow: inset 3px 0 0 var(--gold); }

/* ---- CTA gold shimmer on hover ---- */
.btn-solid { position: relative; overflow: hidden; }
.btn-solid::after {
  content: ''; position: absolute; top: 0; bottom: 0; left: -60%;
  width: 40%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.35), transparent);
  transform: skewX(-20deg);
  transition: left .55s ease;
}
@media (hover: hover) {
  .btn-solid:hover::after { left: 130%; }
}

/* ============================================================
   Credibility strip — icon + title layout
   Overrides the original numbered layout. Same .cred-strip /
   .cred-item containers, so existing column / divider behaviour
   carries over.
   ============================================================ */
.cred-strip .cred-item {
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 14px;
  padding: 32px 24px;
}
.cred-strip .ci-icon {
  width: 30px; height: 30px;
  color: var(--gold);
  display: block;
  transition: transform .25s ease;
}
.cred-strip .cred-item:hover .ci-icon { transform: translateY(-2px); }
.cred-strip .ci-title {
  font-family: var(--font-luxury);
  font-size: 20px;
  line-height: 1.25;
  color: var(--text);
  letter-spacing: 0.01em;
}
@media (max-width: 480px) {
  .cred-strip .cred-item {
    flex: 1 1 100%;
    min-width: 100%;
    border-right: none;
    border-bottom: 1px solid var(--border);
  }
  .cred-strip .cred-item:last-child { border-bottom: none; }
}

/* ============================================================
   Homepage — continuous page-level atmosphere
   Lifts warm/cold ambient to the whole page so individual sections
   no longer paint isolated backgrounds with hard horizontal seams.
   Scoped to body.home so other pages are unaffected.
   ============================================================ */
body.home::after {
  content: '';
  position: fixed; inset: 0; z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 60% 55% at  8% 22%, rgba(var(--warm), 0.18), transparent 66%),
    radial-gradient(ellipse 66% 62% at 92% 70%, rgba(var(--cold), 0.30), transparent 70%);
}

/* Same continuous warm/cold ambient on every other page. Uses ::after
   (::before is taken by the global noise texture at opacity 0.04) and
   sits at z-index:0 — above the page base, below content (body > * is
   z-index:1) so it never tints text. */
body:not(.home)::after {
  content: '';
  position: fixed; inset: 0; z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 60% 55% at  8% 22%, rgba(var(--warm), 0.18), transparent 66%),
    radial-gradient(ellipse 66% 62% at 92% 70%, rgba(var(--cold), 0.30), transparent 70%);
}
/* Let the page-level ambient show through soft sections on other pages */
body:not(.home) .section-soft { background: transparent; }

/* Let the page-level ambient pass through section backgrounds */
body.home .section-soft { background: transparent; }
body.home .cred-strip   {
  background: transparent;
  border-top: none;
  border-bottom: none;
}

/* One ambient layer for the whole homepage — disable every per-section
   atmo glow on home so no section paints its own gradient bound to its
   box. The fixed body.home::after above provides the single continuous
   warm-left / cold-right atmosphere across every section. No per-section
   gradient = no boundary where one glow ends and another begins. */
body.home .atmo-warm,
body.home .atmo-cold,
body.home .atmo-split,
body.home .atmo-red   { overflow: visible; }

body.home .atmo-warm::before,
body.home .atmo-cold::before,
body.home .atmo-split::before,
body.home .atmo-red::before {
  background: none;
  inset: 0;
}

/* ---- Intro statement (homepage, directly under hero) ----
   Compact, transparent, no panel feel. Sits flush with the hero so
   the page-level ambient flows through without a visible seam. */
.intro-statement {
  padding: 40px 0 56px;
  background: transparent;
  position: relative;
}
.intro-statement > * { position: relative; z-index: 1; }
@media (max-width: 720px) {
  .intro-statement { padding: 30px 0 44px; }
}

/* ---- Hero → intro bleed (homepage only) ----
   Three sources of a visible seam under the hero are addressed:
   (a) .hero-bg is bound to the hero box — its bottom edge shows as a
       hard horizontal line, faintly visible through the dark overlay.
       Solution: mask-image fades the image to nothing before the edge.
   (b) .hero::before darkening previously ended at 0.92 alpha — letting
       8% of the bg image edge through. Now ends fully opaque.
   (c) .hero::after radial glow extension was too short and peaked too
       close to the hero edge — pushed origins inward and inset further. */
body.home .hero {
  overflow: visible;
  border-bottom: none;
}

/* Image fades to transparent before the bottom — no image edge possible */
body.home .hero-bg {
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 50%, transparent 95%);
          mask-image: linear-gradient(to bottom, #000 0%, #000 50%, transparent 95%);
}

/* Vignette darkening: dark across the hero body, fully transparent at the
   bottom so the body-level ambient shows through unchanged. The hero's
   bottom pixel and the intro's top pixel are now composed of the same
   ingredients (body bg + body ambient), so no tonal step is possible. */
body.home .hero::before {
  background: linear-gradient(180deg,
    rgba(8, 8, 8, 0.55)  0%,
    rgba(8, 8, 8, 0.78) 35%,
    rgba(8, 8, 8, 0.55) 70%,
    rgba(8, 8, 8, 0)   100%);
}

/* Remove the hero's own warm/cold radial entirely — the strengthened
   body-level ambient now carries the warm-left / cold-right feel
   continuously across hero AND every section below it. One source. */
body.home .hero::after {
  background: none;
}

/* ============================================================
   Homepage rhythm — cinematic, intentional section spacing.
   A homepage-specific scale with deliberate variation: generous
   air between the emotional bands, kept tighter around the dense
   informational pairs so the scroll never feels empty. Scoped to
   body.home so other pages keep their own rhythm.
   ============================================================ */
body.home .section { padding: clamp(84px, 9.5vw, 128px) 0; }

/* Intro → product cards: still a deliberate pair, now with more air */
body.home .intro-statement { padding: clamp(44px, 5vw, 72px) 0 clamp(36px, 4vw, 56px); }
body.home .intro-statement + .section { padding-top: clamp(56px, 6vw, 88px); }

/* Cred-strip is dense; the section after it breathes but stays connected */
body.home .cred-strip + .section { padding-top: clamp(72px, 8vw, 108px); }

/* Inner block margins — scaled with the wider rhythm */
body.home .hcl-system   { margin-top: clamp(40px, 4.5vw, 60px); }
body.home .hcl-module   { padding: 40px 36px; }
body.home .why-grid     { margin-top: clamp(40px, 4.5vw, 60px); }
body.home .route-list   { margin-top: clamp(36px, 4vw, 54px); }
body.home .bundle-spotlight { margin-top: clamp(34px, 4vw, 52px); }
body.home .contact-panel    { margin-top: clamp(12px, 2vw, 28px); }
body.home .section .divider { margin-bottom: 24px; }

/* The bundle-spotlight image well no longer needs a tall min-height
   on the homepage band — let the image set the height naturally */
body.home .bundle-spotlight .bs-media { padding: 36px; }
body.home .bundle-spotlight .bs-body  { padding: 44px 48px; }

/* ---- Featured bundle band: tightened so the whole section reads
   within one desktop viewport under the slimmer header ---- */
body.home .bundle-feature { padding: clamp(40px, 4.6vw, 66px) 0; }
body.home .bundle-feature .bundle-spotlight { margin-top: clamp(16px, 2vw, 24px); }
body.home .bundle-feature .bs-media { padding: clamp(22px, 2.6vw, 32px); }
body.home .bundle-feature .bs-media img { max-height: clamp(248px, 26vw, 300px); }
body.home .bundle-feature .bs-body { padding: clamp(30px, 3vw, 40px); }
body.home .bundle-feature .bs-body p { margin: 14px 0 0; }
body.home .bundle-feature .price-row { padding-top: 14px; }

/* Metric row — three stats in one clean row, elegant lighter numerals */
.bs-metrics {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(22px, 3vw, 48px);
  margin: clamp(18px, 2.2vw, 24px) 0 0;
}
.bs-metric-num {
  font-family: 'Jost', sans-serif;
  font-weight: 300;
  font-size: clamp(1.65rem, 2.4vw, 2.05rem);
  line-height: 0.95;
  letter-spacing: -0.02em;
  color: var(--gold);
  white-space: nowrap;
  font-variant-numeric: lining-nums tabular-nums;
}
.bs-metric-label {
  font-family: 'Jost', sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-weight: 400;
  font-size: 11.5px;
  line-height: 1.4;
  color: #F5F0E8;
  margin: 10px 0 0;
}
.bs-metric .wc-card-source { margin-top: 8px; }
/* Narrow viewports: two-up keeps "300k–600k" on one line without overflow */
@media (max-width: 560px) {
  .bs-metrics { grid-template-columns: 1fr 1fr; gap: 22px 24px; }
}

/* Mobile: calmer, but never cavernous */
@media (max-width: 720px) {
  body.home .section { padding: 56px 0; }
  body.home .intro-statement { padding: 30px 0; }
  body.home .intro-statement + .section { padding-top: 42px; }
  body.home .cred-strip + .section { padding-top: 56px; }
  body.home .hcl-module { padding: 30px 26px; }
}

/* ============================================================
   Business + sector pages — gold glow on cards
   ============================================================ */
/* Glow — every card on the business hub and the per-sector pages */
body.business .card,
body.sector .card {
  background:
    radial-gradient(130% 150% at 50% 0%, rgba(226,203,169,0.07), transparent 62%),
    var(--bg-card);
  box-shadow:
    inset 0 0 0 1px rgba(226,203,169,0.06),
    0 20px 54px rgba(0,0,0,0.45),
    0 0 48px rgba(226,203,169,0.10);
  transition: border-color .28s ease, transform .28s ease, box-shadow .28s ease;
}
body.business .card:hover,
body.sector .card:hover {
  border-color: var(--gold);
  transform: translateY(-7px);
  box-shadow:
    inset 0 0 0 1px rgba(226,203,169,0.22),
    0 30px 68px rgba(0,0,0,0.55),
    0 0 76px rgba(226,203,169,0.24);
}

/* Sizing — only the big sector + volume cards on the business hub page */
body.business .sector-grid {
  margin-top: 64px;
  gap: 44px;
  text-align: center;
}
body.business .glow-card {
  padding: 96px 60px;
  font-size: 20px;
}
body.business .glow-card h3 { font-size: 44px; margin-bottom: 14px; }
body.business .glow-card p  { font-size: 19px; line-height: 1.65; }
body.business .glow-card.volume-card {
  padding: 92px 100px;
  max-width: 1120px;
  margin: 0 auto;
}
body.business .glow-card.volume-card h3 { font-size: 38px; }
body.business .glow-card.volume-card p  { max-width: 860px; margin: 16px auto 0; }

@media (max-width: 720px) {
  body.business .glow-card { padding: 48px 28px; }
  body.business .glow-card.volume-card { padding: 48px 28px; }
  body.business .glow-card h3 { font-size: 32px; }
}

/* ============================================================
   Premium spacing rhythm — page-scoped
   Wider breathing room on the emotional / trust pages (About,
   Business hub, sector pages). Practical pages (products, FAQ,
   contact, process) keep the tighter global rhythm.
   ============================================================ */
/* About: editorial brand page */
body.about .section { padding: clamp(100px, 11vw, 148px) 0; }
body.about .page-banner { padding: 200px 0 96px; }

/* Business hub: premium proposal feel */
body.business .section { padding: clamp(100px, 11vw, 148px) 0; }
body.business .sector-grid { margin-top: clamp(64px, 7vw, 92px); gap: clamp(44px, 5vw, 68px); }

/* Sector pages: controlled wide */
body.sector .section { padding: clamp(92px, 10vw, 132px) 0; }

/* Products range: compact product-selection layout.
   No hero — the intro banner blends into the body so there is no empty dark
   "hero" block before the grid, and the cards are pulled up into the first
   viewport.

   The amber/cold glow is painted once on the page itself (anchored near the
   top in document space) so it flows continuously from the intro through the
   product cards. The per-section atmo glow is switched off here because, being
   clipped to the card section, it started abruptly at the section's top edge
   and read as a hard horizontal seam below the intro. */
body.products {
  background:
    radial-gradient(60% 480px at 6% 240px,  rgba(var(--warm), 0.16), transparent 64%),
    radial-gradient(60% 520px at 94% 640px, rgba(var(--cold), 0.16), transparent 64%),
    var(--bg);
  background-repeat: no-repeat;
}
body.products .atmo-split::before { display: none; }
body.products .page-banner {
  background: transparent;
  border-bottom: none;
  padding: clamp(112px, 15vw, 146px) 0 clamp(26px, 3.4vw, 38px);
}
body.products .page-banner + .section { background: transparent; padding-top: clamp(34px, 4.6vw, 52px); }

@media (max-width: 720px) {
  body.about .section,
  body.business .section { padding: 76px 0; }
  body.about .page-banner { padding: 150px 0 64px; }
  body.sector .section { padding: 70px 0; }
}

/* ============================================================
   Cinematic session intro
   Armed by js/intro.js on the first page view of a session.
   Two pseudo-elements on <html>: ::before is the slow-drifting
   blue/amber glow, ::after is the centered Numena logo. No extra
   markup, position:fixed so there is no layout shift, and the
   whole thing is gone (classes removed) once it has played.
   ============================================================ */
html.intro-lock,
html.intro-lock body { overflow: hidden; }

/* Glow layer — black base with deep-blue and warm-amber blooms.
   Oversized (inset:-30%) so the slow drift never reveals an edge,
   and large radii leave real black negative space between the glows. */
html.intro-active::before {
  content: "";
  position: fixed; inset: -30%;
  z-index: 2147483646;
  background-color: #050505;
  /* Each bloom is its own sized, no-repeat tile so it can be moved
     independently via background-position (one entry per layer): two
     blue blooms top-left, the warm amber bloom bottom-right, a soft
     champagne wash mid. closest-side + transparent by 100% keeps every
     bloom fully faded inside its own tile — a farthest-corner gradient
     still has alpha at the tile edge, which shows as a straight seam. */
  background-image:
    radial-gradient(ellipse closest-side at center, rgba(25,  57, 72, 0.65) 0%, rgba(25,  57, 72, 0.24) 48%, transparent 96%),
    radial-gradient(ellipse closest-side at center, rgba(30,  75, 80, 0.45) 0%, rgba(30,  75, 80, 0.17) 48%, transparent 96%),
    radial-gradient(ellipse closest-side at center, rgba(145, 82, 36, 0.50) 0%, rgba(145, 82, 36, 0.19) 48%, transparent 96%),
    radial-gradient(ellipse closest-side at center, rgba(226, 203, 169, 0.16) 0%, transparent 92%);
  background-repeat: no-repeat;
  background-size: 72% 82%, 58% 68%, 78% 86%, 46% 56%;
  background-position: 12% 16%, 34% 10%, 88% 86%, 58% 64%;
  transform-origin: 50% 50%;
  will-change: background-position, transform, opacity;
  animation: numenaIntroGlow 12s ease-in-out infinite;
}

/* Logo layer — full champagne logo, centered, never distorted. */
html.intro-active::after {
  content: "";
  position: fixed; inset: 0;
  z-index: 2147483647;
  background-image: url("../images/logo_full.png");
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: clamp(196px, 30vmin, 340px) auto;
  opacity: 1;
  transform: scale(1);
  transform-origin: 50% 50%;
  will-change: transform, opacity;
  animation:
    numenaIntroLogoIn 800ms cubic-bezier(0.22, 0.7, 0.2, 1),
    numenaIntroLogoBreathe 7s ease-in-out 800ms infinite alternate;
}

@keyframes numenaIntroGlow {
  /* Each bloom sweeps a wide closed loop — the blues cross toward centre
     and back while the amber arcs up through the middle of the frame —
     so the background reads as slowly swirling, not as a static gradient.
     Waypoints are far apart, so real travel happens within the ~4s the
     intro is on screen. */
  0% {
    background-position: 12% 16%, 34% 10%, 88% 86%, 58% 64%;
    transform: scale(1.05);
  }
  25% {
    background-position: 38% 42%, 12% 34%, 56% 50%, 76% 42%;
    transform: scale(1.12);
  }
  50% {
    background-position: 54% 28%, 28% 56%, 40% 66%, 60% 28%;
    transform: scale(1.16);
  }
  75% {
    background-position: 30% 8%, 46% 28%, 66% 88%, 42% 54%;
    transform: scale(1.10);
  }
  100% {
    background-position: 12% 16%, 34% 10%, 88% 86%, 58% 64%;
    transform: scale(1.05);
  }
}
@keyframes numenaIntroLogoIn {
  from { opacity: 0; transform: scale(0.96); }
  to   { opacity: 1; transform: scale(1); }
}
@keyframes numenaIntroLogoBreathe {
  from { transform: scale(1); }
  to   { transform: scale(1.025); }
}

/* Exit — dissolve into the site. Logo gently lifts + fades a touch
   before the glow clears, so it reads as entering the site. */
html.intro-exit::before {
  opacity: 0;
  transition: opacity 900ms ease;
}
html.intro-exit::after {
  animation: none;
  opacity: 0;
  transform: translateY(-1.2%) scale(1.02);
  transition: opacity 700ms ease, transform 950ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* Reduced motion — no drifting glow, logo shown at rest, quick fade. */
@media (prefers-reduced-motion: reduce) {
  html.intro-active::before { animation: none; transform: scale(1.08); }
  html.intro-active::after  { animation: none; }
  html.intro-exit::before   { transition-duration: 320ms; }
  html.intro-exit::after    { transform: none; transition-duration: 320ms; }
}

/* ============================================================
   Business / Property value — full-bleed sector triptych (.biz-*)
   Ported from the 2.0 homepage slide (WEBSITE OG 2.0/css/slides.css).
   Images cover the hero from the top of the page; the text block
   (.sc-head) floats top-left over a soft diagonal scrim. At <=1023px
   it stacks: text block first, then panels. Used by business.html.
   ============================================================ */
.biz-hero {
  position: relative;
  min-height: 100vh; min-height: 100svh;
  background: var(--bg);
  overflow: hidden;
}
.biz-panels {
  position: absolute; inset: 0; z-index: 0;
  display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: 1fr;
}
.biz-panel {
  position: relative; display: block; overflow: hidden;
  background: var(--bg-soft);
}
.biz-panel + .biz-panel { border-left: 1px solid rgba(8, 8, 8, .7); }
.biz-panel picture { position: absolute; inset: 0; }
.biz-panel img {
  width: 100%; height: 100%;
  object-fit: cover; object-position: center;
  display: block;
  transition: transform .9s cubic-bezier(.22, 1, .36, 1);
  will-change: transform;
}
.biz-panel::after {
  content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(to top, rgba(8,8,8,.75) 0%, rgba(8,8,8,.35) 30%, rgba(8,8,8,0) 55%);
  transition: opacity .4s ease;
}
.biz-copy {
  position: absolute; z-index: 2;
  left: clamp(22px, 2.4vw, 40px); right: clamp(22px, 2.4vw, 40px);
  bottom: clamp(26px, 5vh, 48px);
}
.biz-copy h3 {
  font-size: clamp(26px, 2.4vw, 38px);
  letter-spacing: -0.01em;
  color: #F5F0E8; opacity: 1;
}
.biz-copy p {
  margin-top: 10px;
  max-width: 300px;
  font-size: 14px; line-height: 1.65;
  color: rgba(236, 231, 220, .78);
}
.biz-link {
  display: inline-flex; align-items: center; gap: 9px;
  margin-top: 16px;
  font-family: 'Jost', sans-serif;
  font-size: 12px; font-weight: 500;
  letter-spacing: .2em; text-transform: uppercase;
  color: var(--gold);
  transition: transform .4s ease;
}
.biz-arrow { font-size: 18px; line-height: 1; color: var(--gold); }
@media (hover: hover) {
  .biz-panel:hover::after { opacity: .85; }
  .biz-panel:hover .biz-link { transform: translateX(8px); }
  .biz-panel:hover img { transform: scale(1.035); }
}

/* Diagonal scrim so the overlaid text reads over the imagery; it
   stops above the panel-title zone so it never veils the panel copy. */
.biz-hero::before {
  content: ''; position: absolute; inset: 0 0 auto 0; height: 64%;
  z-index: 1; pointer-events: none;
  background:
    linear-gradient(180deg, rgba(8,8,8,.50) 0%, rgba(8,8,8,0) 44%),
    linear-gradient(105deg, rgba(8,8,8,.78) 0%, rgba(8,8,8,.55) 35%, rgba(8,8,8,.15) 60%, rgba(8,8,8,0) 75%);
  -webkit-mask-image: linear-gradient(180deg, #000 60%, transparent 100%);
          mask-image: linear-gradient(180deg, #000 60%, transparent 100%);
}
.sc-head {
  position: absolute; z-index: 2;
  left: clamp(24px, 7vw, 100px); top: clamp(122px, 18vh, 200px);
  max-width: 620px;
}
.sc-label {
  margin-bottom: 18px;
  font-family: 'Jost', sans-serif; font-size: 11px; font-weight: 500;
  letter-spacing: .3em; text-transform: uppercase; color: var(--gold);
}
.sc-head h1 {
  font-size: clamp(32px, 3.6vw, 54px);
  line-height: 1.07; letter-spacing: -0.015em;
  color: var(--text);
}
.sc-head h1 .gold { color: var(--gold); font-style: normal; }

/* Stacked mode: text block first, then full-width panels */
@media (max-width: 1023px) {
  .biz-hero { min-height: 0; }
  .biz-hero::before { content: none; }
  .sc-head {
    position: static; max-width: 680px;
    padding: clamp(120px, 16vh, 150px) clamp(24px, 6vw, 48px) 36px;
  }
  .biz-panels { position: static; grid-template-columns: 1fr; grid-template-rows: none; }
  .biz-panel { height: clamp(340px, 78vw, 560px); }
  .biz-panel + .biz-panel { border-left: 0; border-top: 1px solid rgba(8, 8, 8, .7); }
}
@media (prefers-reduced-motion: reduce) {
  .biz-panel img { transition: none; }
}

/* ============================================================
   Page-load entrance — the hero/banner settles in once the page
   has loaded. Gated on html.anim (set by intro.js in <head> only
   when motion is allowed), so no-JS and reduced-motion users see
   content immediately. Reveal fires when main.js adds .page-loaded.
   transform + opacity only — no layout shift.
   ============================================================ */
html.anim .hero-bg,
html.anim .page-banner-bg {
  opacity: 0;
  transition: opacity .9s ease;
}
html.anim .page-banner .eyebrow,
html.anim .page-banner .sys-label {
  opacity: 0; transform: translateY(14px);
  transition: opacity .8s cubic-bezier(.22, 1, .36, 1) .06s,
              transform .8s cubic-bezier(.22, 1, .36, 1) .06s;
}
html.anim .hero h1,
html.anim .page-banner h1 {
  opacity: 0; transform: translateY(20px);
  transition: opacity .9s cubic-bezier(.22, 1, .36, 1) .18s,
              transform .9s cubic-bezier(.22, 1, .36, 1) .18s;
}
html.anim .hero p,
html.anim .hero-cta,
html.anim .page-banner .lead {
  opacity: 0; transform: translateY(16px);
  transition: opacity 1s cubic-bezier(.22, 1, .36, 1) .34s,
              transform 1s cubic-bezier(.22, 1, .36, 1) .34s;
}
html.anim.page-loaded .hero-bg,
html.anim.page-loaded .page-banner-bg,
html.anim.page-loaded .page-banner .eyebrow,
html.anim.page-loaded .page-banner .sys-label,
html.anim.page-loaded .hero h1,
html.anim.page-loaded .page-banner h1,
html.anim.page-loaded .hero p,
html.anim.page-loaded .hero-cta,
html.anim.page-loaded .page-banner .lead {
  opacity: 1; transform: none;
}

/* ============================================================
   Global reduced-motion safety net — neutralise any remaining
   transitions/animations for users who ask for reduced motion.
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ============================================================
   Homepage scroll-momentum pass
   (1) tighten the two sparse text bands  (2) trim the global
   rhythm so the fold lands on upcoming content, not pure black
   (3) hero scroll cue  (4) a stronger reveal for the ROI band
   (5) lift the ROI band into the page's visual peak.
   Scoped to body.home; all motion is gated by the reduced-motion
   safety net above (plus the explicit cue hide at the foot).
   ============================================================ */

/* (2) Slightly tighter global rhythm — the previous max of 128px top+
   bottom left large voids between bands. */
body.home .section { padding: clamp(72px, 7.5vw, 100px) 0; }

/* (1) Sparse text bands sized to content + comfortable breathing room,
   so neither floats in a near-empty viewport. */
body.home .home-teaser  { padding: clamp(52px, 5.6vw, 78px) 0; }
body.home .home-closing { padding: clamp(40px, 4.4vw, 60px) 0 clamp(44px, 4.8vw, 68px); }
body.home .home-closing .contact-panel { margin-top: 0; }

/* (3) Hero scroll cue — a quiet downward indicator at bottom-centre:
   a faint gold hairline track with an off-white segment gliding down
   on a gentle loop. Low opacity, never dominant. */
.hero-scroll-cue {
  position: absolute; left: 50%; bottom: clamp(18px, 3vh, 32px);
  transform: translateX(-50%);
  width: 1px; height: 46px; z-index: 3; pointer-events: none;
}
.hero-scroll-cue::before {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(to bottom,
    rgba(226, 203, 169, 0)   0%,
    rgba(226, 203, 169, .32) 28%,
    rgba(226, 203, 169, .32) 72%,
    rgba(226, 203, 169, 0)   100%);
}
.hero-scroll-cue::after {
  content: ''; position: absolute; left: 0; top: 0;
  width: 1px; height: 14px;
  background: linear-gradient(to bottom, rgba(236, 231, 220, 0), rgba(236, 231, 220, .9));
  animation: hsc-travel 2s cubic-bezier(.7, 0, .3, 1) infinite;
}
@keyframes hsc-travel {
  0%   { transform: translateY(-14px); opacity: 0; }
  22%  { opacity: 1; }
  78%  { opacity: 1; }
  100% { transform: translateY(46px);  opacity: 0; }
}
/* Appear with the hero's page-load entrance; never during the intro. */
html.anim .hero-scroll-cue { opacity: 0; transition: opacity 1s ease .7s; }
html.anim.page-loaded .hero-scroll-cue { opacity: 1; }

/* (5) Lift the ROI band — a fractionally lighter, warmer surface set off
   from the surrounding seamless ambient, with a thin gold hairline frame
   top and bottom so it clearly reads as the page's peak. No imagery added. */
body.home .bundle-feature {
  background:
    radial-gradient(ellipse 62% 80% at 12% 0%,  rgba(var(--warm), .10), transparent 60%),
    radial-gradient(ellipse 62% 80% at 88% 100%, rgba(var(--cold), .08), transparent 60%),
    #100e0b;
  border-top: 1px solid rgba(226, 203, 169, .42);
  border-bottom: 1px solid rgba(226, 203, 169, .42);
}
/* Stat figures (15–25% / 300k–600k / 0) — more weight and presence. */
body.home .bundle-feature .bs-metrics { margin-top: clamp(20px, 2.6vw, 30px); }
/* Proportioned columns instead of content-driven ones: the wide "300k–600k"
   numeral otherwise squeezes the third stat down to one word per line. */
@media (min-width: 561px) {
  body.home .bundle-feature .bs-metrics {
    grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.35fr) minmax(0, 1fr);
    gap: clamp(18px, 2vw, 32px);
  }
}
body.home .bundle-feature .bs-metric-num {
  font-weight: 400;
  font-size: clamp(2.1rem, 3vw, 2.75rem);
  letter-spacing: -0.015em;
  text-shadow: 0 0 24px rgba(226, 203, 169, .18);
}
/* Desktop 3-up row: sized so the widest figure ("300k–600k") stays inside
   its grid column (mobile keeps the larger size — its 2-up columns fit). */
@media (min-width: 561px) {
  body.home .bundle-feature .bs-metric-num { font-size: clamp(1.65rem, 1.7vw, 2rem); }
}
body.home .bundle-feature .bs-metric-label { color: #f7f2ea; }

/* (4) The ROI band assembles with a touch more rise and a longer stagger,
   so arriving at it feels like a moment. (Reduced-motion users keep the
   global .reveal{opacity:1} reset above — this never runs for them.) */
@keyframes reveal-rise-strong {
  from { opacity: 0; transform: translateY(40px); }
  to   { opacity: 1; transform: none; }
}
body.home .bundle-feature .reveal.is-visible {
  animation-name: reveal-rise-strong;
  animation-duration: 1.05s;
}
body.home .bundle-feature .section-title.reveal     { animation-delay: .14s; }
body.home .bundle-feature .bundle-spotlight.reveal   { animation-delay: .28s; }

/* Reduced motion: the scroll cue is hidden entirely. */
@media (prefers-reduced-motion: reduce) {
  .hero-scroll-cue { display: none !important; }
}

/* Mobile: keep the tightened bands calm but never cramped. */
@media (max-width: 720px) {
  body.home .home-teaser  { padding: 44px 0; }
  body.home .home-closing { padding: 36px 0 48px; }
}

/* ---- Mobile accessibility fixes ----
   44px minimum tap targets (padding only — visual size unchanged) and
   legible stat labels on small screens. */
@media (max-width: 1100px) {
  .nav-menu-btn {
    min-height: 44px;
    min-width: 44px;
    padding: 12px 10px;
    justify-content: center;
  }
  .lang-switch button { min-height: 44px; min-width: 44px; padding: 12px 10px; }
  .menu-foot .menu-lang button { min-height: 44px; min-width: 44px; }
  .footer-col a { padding: 10px 0; }
  .bs-more-link { padding: 12px 0; }
}
@media (max-width: 600px) {
  .bs-metric-label { font-size: 13px; }
  .wc-card-label   { font-size: 13px; }
}

/* ============================================================
   ROI Calculator (roi.html)
   Inputs left, live results panel right. Dark/gold, tabular
   numerals everywhere, gold range sliders, preset chips.
   ============================================================ */
/* No banner band on the ROI page: the headline sits straight on the page
   background and flows into the calculator section below it. */
body.roi .page-banner {
  background: transparent;
  border-bottom: none;
  padding: 170px 0 0;
}
body.roi .page-banner + .section { padding-top: clamp(44px, 5vw, 68px); }
/* Ease the calculator section's glow in below the headline so its clipped
   top edge cannot paint a seam line (same fix as the hero pages). */
body.roi .section.atmo-split::before {
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 280px);
          mask-image: linear-gradient(to bottom, transparent 0, #000 280px);
}

.roi-tabs {
  display: flex; gap: 10px; margin-bottom: clamp(32px, 4vw, 48px);
}
.roi-tab {
  font-family: 'Jost', sans-serif;
  font-size: 13px; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--text-dim);
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid var(--border);
  padding: 12px 28px; cursor: pointer;
  transition: color .25s ease, border-color .25s ease, background .25s ease;
}
.roi-tab:hover { color: var(--text); border-color: rgba(226, 203, 169, 0.45); }
.roi-tab.is-active {
  color: var(--gold);
  border-color: var(--gold);
  background: rgba(226, 203, 169, 0.06);
}

.roi-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(320px, 420px);
  gap: clamp(36px, 5vw, 64px);
  align-items: start;
}

/* ---- input fields ---- */
.roi-field { padding: 18px 0; border-bottom: 1px solid var(--border); }
.roi-field:first-child { padding-top: 0; }
.roi-field-head {
  display: flex; justify-content: space-between; align-items: baseline;
  margin-bottom: 12px; gap: 16px;
}
.roi-field-head label {
  font-size: 15px; color: var(--text-dim);
}
.roi-val {
  font-family: 'Jost', sans-serif;
  font-size: 18px; font-weight: 500; color: var(--text);
  font-variant-numeric: lining-nums tabular-nums;
  white-space: nowrap;
}
/* Custom gold sliders: thin rounded track with a gold fill up to the thumb.
   The fill percentage is painted by js/roi.js via the --fill custom property. */
.roi-inputs input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  width: 100%; margin: 0;
  height: 22px;
  background: transparent;
  cursor: pointer;
  --fill: 50%;
}
.roi-inputs input[type="range"]::-webkit-slider-runnable-track {
  height: 3px; border-radius: 999px;
  background: linear-gradient(90deg,
    var(--gold) 0%, var(--gold) var(--fill),
    rgba(255, 255, 255, 0.14) var(--fill), rgba(255, 255, 255, 0.14) 100%);
}
.roi-inputs input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 18px; height: 18px; border-radius: 50%;
  background: var(--gold);
  border: 3px solid #0d0d0d;
  box-shadow: 0 0 0 1px rgba(226, 203, 169, 0.6), 0 2px 10px rgba(0, 0, 0, 0.5);
  margin-top: -7.5px;
  transition: transform .15s ease, box-shadow .15s ease;
}
.roi-inputs input[type="range"]:hover::-webkit-slider-thumb  { transform: scale(1.12); }
.roi-inputs input[type="range"]:active::-webkit-slider-thumb {
  transform: scale(1.22);
  box-shadow: 0 0 0 7px rgba(226, 203, 169, 0.14), 0 2px 10px rgba(0, 0, 0, 0.5);
}
.roi-inputs input[type="range"]::-moz-range-track {
  height: 3px; border-radius: 999px;
  background: rgba(255, 255, 255, 0.14);
}
.roi-inputs input[type="range"]::-moz-range-progress {
  height: 3px; border-radius: 999px;
  background: var(--gold);
}
.roi-inputs input[type="range"]::-moz-range-thumb {
  width: 12px; height: 12px; border-radius: 50%;
  background: var(--gold);
  border: 3px solid #0d0d0d;
  box-shadow: 0 0 0 1px rgba(226, 203, 169, 0.6), 0 2px 10px rgba(0, 0, 0, 0.5);
}
/* Static value rows: values driven by the setup picker or the preset chips,
   never by hand. The range input stays in the DOM as a hidden state holder;
   only the label + value line renders. */
.roi-field--static .roi-field-head { margin-bottom: 0; }
.roi-static-label { font-size: 15px; color: var(--text-dim); }
.roi-field--static .roi-val { color: var(--gold); }
.roi-select, .roi-number {
  width: 100%;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--border);
  color: var(--text);
  font-family: 'Jost', sans-serif;
  font-size: 15px;
  padding: 12px 14px;
}
.roi-select:focus, .roi-number:focus { outline: none; border-color: var(--gold); }
.roi-select option, .roi-select optgroup { background: #101010; color: var(--text); }
.roi-number { margin-top: 10px; font-variant-numeric: lining-nums tabular-nums; }
.roi-hint {
  font-size: 12.5px; color: var(--text-mute);
  line-height: 1.6; margin-top: 10px;
}

/* ---- preset chips ---- */
.roi-presets { padding: 22px 0 6px; }
.roi-presets-label {
  display: block;
  font-size: 12px; letter-spacing: 0.24em; text-transform: uppercase;
  color: var(--gold); margin-bottom: 12px;
}
.roi-chip-row { display: flex; gap: 8px; flex-wrap: wrap; }
.roi-chip {
  font-family: 'Jost', sans-serif;
  font-size: 13px; letter-spacing: 0.08em;
  color: var(--text-dim);
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 8px 20px; cursor: pointer;
  transition: color .2s ease, border-color .2s ease, background .2s ease;
}
.roi-chip:hover { color: var(--text); border-color: rgba(226, 203, 169, 0.45); }
.roi-chip.is-active {
  color: #0d0d0d;
  background: var(--gold);
  border-color: var(--gold);
}

/* ---- results panel ---- */
.roi-results {
  border: 1px solid rgba(226, 203, 169, 0.4);
  background:
    radial-gradient(ellipse 120% 80% at 50% 0%, rgba(226, 203, 169, 0.06), transparent 60%),
    rgba(255, 255, 255, 0.02);
  padding: clamp(36px, 3.4vw, 44px);
  position: sticky; top: 96px;
}
.roi-res-label {
  font-size: 12px; letter-spacing: 0.24em; text-transform: uppercase;
  color: var(--gold);
}
.roi-res-big {
  font-family: 'Jost', sans-serif;
  font-weight: 400;
  font-size: clamp(38px, 3.4vw, 50px);
  color: var(--text);
  line-height: 1.1;
  margin: 10px 0 22px;
  font-variant-numeric: lining-nums tabular-nums;
}
.roi-res-rows { border-top: 1px solid var(--border); }
.roi-res-row {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 16px; padding: 13px 0;
  border-bottom: 1px solid var(--border);
}
.roi-res-row span { font-size: 14.5px; color: var(--text-dim); }
.roi-res-row strong {
  font-family: 'Jost', sans-serif;
  font-size: 16.5px; font-weight: 500; color: var(--text);
  font-variant-numeric: lining-nums tabular-nums;
  white-space: nowrap;
}
.roi-res-note {
  font-size: 13.5px; color: var(--text-mute);
  line-height: 1.6; margin-top: 16px; min-height: 2.6em;
}
.roi-res-cta { display: block; text-align: center; margin-top: 18px; }
.roi-res-cta2 { display: block; text-align: center; margin-top: 10px; }

/* ---- explainer under the calculator ---- */
.roi-explain { margin-top: clamp(72px, 8vw, 108px); }
.roi-explain-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: clamp(36px, 5vw, 64px);
  margin-top: clamp(36px, 4vw, 52px);
}
.roi-explain-item { padding-top: 22px; border-top: 1px solid rgba(226, 203, 169, 0.32); }
.roi-explain-item h3 { font-size: 23px; color: var(--text); margin: 10px 0 8px; }
.roi-explain-item p { color: var(--text-dim); font-size: 15.5px; line-height: 1.7; }

@media (max-width: 920px) {
  .roi-grid { grid-template-columns: 1fr; }
  .roi-results { position: static; }
  .roi-explain-grid { grid-template-columns: 1fr; gap: 0; }
  .roi-explain-item { padding: 20px 0; }
  .roi-tabs { flex-wrap: wrap; }
  .roi-tab { flex: 1; padding: 12px 10px; text-align: center; }
}

/* projection disclaimer inside the results panel */
.roi-res-disclaimer {
  font-size: 12.5px; color: var(--text-mute);
  text-align: center; line-height: 1.6;
  margin-top: 16px;
}

/* ---- mobile sticky result bar ----
   Fixed to the bottom on small screens while the inputs are in view and the
   results panel is not (js/roi.js toggles .is-on). Tapping scrolls to the
   full results panel. */
.roi-sticky {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
  display: none;
  align-items: center; justify-content: space-between; gap: 12px;
  padding: 14px 20px calc(14px + env(safe-area-inset-bottom, 0px));
  background: rgba(10, 10, 10, 0.92);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  border: none; border-top: 1px solid rgba(226, 203, 169, 0.4);
  color: var(--text);
  font-family: 'Jost', sans-serif; font-size: 14px;
  text-align: left; cursor: pointer;
  transform: translateY(102%);
  transition: transform .3s ease;
}
.roi-sticky strong {
  color: var(--gold); font-weight: 500;
  font-variant-numeric: lining-nums tabular-nums;
}
.rs-label { color: var(--text-dim); }
.rs-line { white-space: nowrap; }
@media (max-width: 920px) {
  .roi-sticky { display: flex; }
  .roi-sticky.is-on { transform: translateY(0); }
}