/* =========================================================
   NORE HAUS — Backyard thermal spa kits · Vancouver, BC
   ========================================================= */

:root {
  /* Aesop-inspired warm palette */
  --bg: #1a1714;            /* warm near-black, brown-tinted */
  --bg-warm: #221d18;       /* deeper warm brown */
  --paper: #f0e8db;         /* warm cream, not white */
  --ink: #1a1714;
  --ink-soft: #524b41;
  --muted: #908578;
  --line: rgba(240, 232, 219, 0.1);
  --line-dark: rgba(26, 23, 20, 0.14);
  --accent: #b8956a;        /* muted clay/brass */
  --accent-deep: #7a5d3a;
  --steam: #d4cbbb;
  --soak: #b8693a;
  --plunge: #6e9aab;
  --sweat: #a64f2e;

  --serif: 'Fraunces', 'Times New Roman', serif;
  --sans: 'Inter', system-ui, -apple-system, sans-serif;

  --w: 1280px;
  --gut: clamp(20px, 4vw, 64px);
}

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

html, body {
  background: var(--bg);
  color: var(--paper);
  font-family: var(--sans);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: "ss01", "ss02", "cv11";
  line-height: 1.55;
  overflow-x: hidden;
}

a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
button { font: inherit; cursor: pointer; border: none; background: none; color: inherit; }

/* ---------- TYPE ---------- */
.display, .display-md {
  font-family: var(--serif);
  font-weight: 300;
  letter-spacing: -0.005em;
  line-height: 1.04;
  /* Activate Fraunces' optical-size axis so display glyphs are drawn for display, not body */
  font-variation-settings: "opsz" 120, "SOFT" 50;
  font-optical-sizing: auto;
  text-wrap: balance;
}
.display    { font-size: clamp(36px, 4.4vw, 64px); max-width: 22ch; line-height: 1.05; }
.display-md { font-size: clamp(28px, 3.2vw, 44px); line-height: 1.1; max-width: 24ch; }
.display em, .display-md em {
  font-variation-settings: "opsz" 120, "SOFT" 100;
}
.display em, .display-md em { font-style: italic; font-weight: 400; }
.muted { color: var(--muted); font-style: italic; font-weight: 300; }

.eyebrow {
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent);
  font-weight: 500;
}

.lede {
  font-size: clamp(17px, 1.4vw, 22px);
  color: var(--paper);
  opacity: 0.78;
  max-width: 560px;
  line-height: 1.5;
}

.container {
  max-width: var(--w);
  margin: 0 auto;
  padding: 0 var(--gut);
}

/* ---------- BUTTONS ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 16px 26px;
  font-size: 13px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 500;
  border-radius: 999px;
  /* Specify exact properties (never `all`), with a strong ease-out curve
     so the response feels instant on hover. */
  transition:
    transform 220ms cubic-bezier(0.23, 1, 0.32, 1),
    background 220ms ease,
    color 220ms ease,
    border-color 220ms ease,
    box-shadow 300ms ease;
  white-space: nowrap;
}
.btn:active {
  /* Pressed-state feedback: the button must feel like it heard the click. */
  transform: scale(0.97);
  transition-duration: 100ms;
}
.btn-primary {
  background: var(--accent);
  color: var(--ink);
  box-shadow: 0 6px 18px rgba(184,149,106,0.18);
}
.btn-primary:hover {
  background: var(--paper);
  transform: translateY(-2px);
  box-shadow: 0 14px 34px rgba(184,149,106,0.28);
}
.btn-ghost {
  color: var(--paper);
  border: 1px solid var(--line);
}
.btn-ghost:hover {
  border-color: var(--accent);
  color: var(--accent);
  background: rgba(184,149,106,0.04);
  transform: translateY(-2px);
}
.btn-quiet {
  padding: 0;
  background: none;
  font-size: 12px;
  color: var(--ink);
  border-bottom: 1px solid var(--ink);
  border-radius: 0;
  padding-bottom: 4px;
  letter-spacing: 0.14em;
}
.btn-quiet:hover { color: var(--accent-deep); border-color: var(--accent-deep); }

/* ---------- FOUNDERS BANNER ---------- */
.banner {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 110;
  background: var(--ink);
  border-bottom: 1px solid rgba(200,165,114,0.25);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 10px 20px;
  font-size: 12.5px;
  letter-spacing: 0.02em;
  color: var(--paper);
}
.banner p { margin: 0; opacity: 0.92; }
.banner strong { color: var(--accent); font-weight: 600; letter-spacing: 0.04em; }
.banner a {
  color: var(--accent);
  border-bottom: 1px solid currentColor;
  padding-bottom: 1px;
  margin-left: 4px;
  transition: opacity 0.3s;
}
.banner a:hover { opacity: 0.7; }
.banner-pulse {
  width: 8px; height: 8px;
  background: var(--accent);
  border-radius: 50%;
  flex-shrink: 0;
  animation: pulse 2s ease-in-out infinite;
}
@keyframes pulse {
  0%, 100% { opacity: 0.4; transform: scale(0.85); }
  50% { opacity: 1; transform: scale(1.1); box-shadow: 0 0 12px var(--accent); }
}
@media (max-width: 640px) {
  .banner { font-size: 11px; padding: 8px 14px; text-align: center; }
}

/* ---------- NAV ----------
   At the top of the page: transparent (so the banner sits clearly above it).
   After scrolling 80px: solid dark backdrop with blur.
   No mix-blend-mode (which caused section headings to bleed through earlier).
*/
.nav {
  position: fixed;
  top: 42px; left: 0; right: 0;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px var(--gut);
  z-index: 120; /* above the banner (110) so the hamburger is always clickable */
  color: var(--paper);
  /* Subtle dark gradient by default so hero text never bleeds through
     the nav. Solid + blurred state is applied on scroll via .is-scrolled. */
  background: linear-gradient(180deg, rgba(13,12,10,0.78) 0%, rgba(13,12,10,0.35) 70%, rgba(13,12,10,0) 100%);
  border-bottom: 1px solid transparent;
  transition: background 0.4s, backdrop-filter 0.4s, border-color 0.4s;
}
/* Flexbox ordering so hamburger sits leftmost, logo right after, priority
   items in the middle/right, and actions (phone + CTA) on the far right. */
.nav-toggle { order: 0; }
.nav-logo   { order: 1; margin-right: auto; }
.nav-links  { order: 2; }
.nav-actions { order: 3; }
.nav.is-scrolled {
  background: rgba(13, 12, 10, 0.92);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border-bottom-color: rgba(245, 241, 234, 0.08);
}
.nav-logo {
  font-family: var(--serif);
  font-size: 19px;
  font-weight: 500;
  letter-spacing: 0.16em;
  display: inline-flex;
  align-items: center;
  gap: 0;
  line-height: 1;
}
.nav-mark {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
}
.nav-logo-stack {
  display: inline-flex;
  flex-direction: column;
  gap: 4px;
  align-items: flex-start;
}
.nav-logo-word {
  font-family: var(--serif);
  font-size: 19px;
  font-weight: 500;
  letter-spacing: 0.16em;
  line-height: 1;
  color: currentColor;
}
.nav-logo-tag {
  font-family: var(--sans);
  font-size: 8px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent);
  opacity: 0.8;
  line-height: 1;
  white-space: nowrap;
}
/* Hide tagline at sizes where it crowds the nav links */
@media (max-width: 1180px) {
  .nav-logo-tag { display: none; }
}
.nav-links {
  display: flex;
  gap: 28px;
  list-style: none;
  font-size: 13px;
  letter-spacing: 0.04em;
  align-items: center;
}
.nav-links li { white-space: nowrap; }
.nav-links a {
  opacity: 0.8;
  transition: opacity 0.3s;
  white-space: nowrap;
}
.nav-links a:hover { opacity: 1; }
.nav-cta {
  font-size: 11.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 10px 16px;
  border: 1px solid currentColor;
  border-radius: 999px;
  white-space: nowrap;
  font-weight: 500;
}
.nav-phone {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.02em;
  opacity: 0.85;
  transition: opacity 0.3s;
  white-space: nowrap;
}
.nav-phone:hover { opacity: 1; }
.nav-phone svg { flex-shrink: 0; }

/* nav-actions groups phone + CTA on the right */
.nav-actions {
  display: inline-flex;
  align-items: center;
  gap: 18px;
}

/* Active-page link highlight (set body[data-page="X"] on each page) */
body[data-page="kits"]        .nav-links [data-nav="kits"],
body[data-page="how"]         .nav-links [data-nav="how"],
body[data-page="areas"]       .nav-links [data-nav="areas"],
body[data-page="marketplace"] .nav-links [data-nav="marketplace"],
body[data-page="configure"]   .nav-links [data-nav="configure"],
body[data-page="stories"]     .nav-links [data-nav="stories"],
body[data-page="faq"]         .nav-links [data-nav="faq"],
body[data-page="contact"]     .nav-links [data-nav="contact"] {
  color: var(--accent);
  opacity: 1;
}

/* ---------- DROPDOWN (Service areas) ---------- */
.nav-dropdown {
  position: relative;
}
.nav-dropdown > a {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.nav-chevron {
  font-size: 9px;
  opacity: 0.7;
  transition: transform 0.3s;
}
.nav-dropdown:hover .nav-chevron,
.nav-dropdown:focus-within .nav-chevron { transform: rotate(180deg); }

.nav-submenu {
  position: absolute;
  top: calc(100% + 14px);
  left: 50%;
  transform: translateX(-50%) translateY(-8px);
  min-width: 240px;
  padding: 12px 0;
  background: rgba(13, 12, 10, 0.96);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border: 1px solid rgba(245, 241, 234, 0.08);
  border-radius: 6px;
  list-style: none;
  margin: 0;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.25s, transform 0.25s, visibility 0.25s;
  box-shadow: 0 14px 40px rgba(0,0,0,0.45);
}
.nav-submenu::before {
  content: '';
  position: absolute;
  top: -6px;
  left: 50%;
  transform: translateX(-50%) rotate(45deg);
  width: 10px;
  height: 10px;
  background: rgba(13, 12, 10, 0.96);
  border-left: 1px solid rgba(245, 241, 234, 0.08);
  border-top: 1px solid rgba(245, 241, 234, 0.08);
}
.nav-dropdown:hover .nav-submenu,
.nav-dropdown:focus-within .nav-submenu {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}
.nav-submenu li { margin: 0; }
.nav-submenu a {
  display: block;
  padding: 10px 22px;
  font-size: 13px;
  letter-spacing: 0.03em;
  color: var(--paper);
  opacity: 0.78;
  transition: opacity 0.2s, color 0.2s, background 0.2s;
  white-space: nowrap;
}
.nav-submenu a:hover {
  opacity: 1;
  color: var(--accent);
  background: rgba(184,149,106,0.06);
}

/* ---------- HAMBURGER (always visible at every size) ----------
   The hamburger is the master nav. The inline nav-links only displays
   the highest-priority items (.nav-link-priority). Everything else is
   accessible via the slide-in panel. */
.nav-toggle {
  display: inline-block;
  position: relative;
  width: 40px;
  height: 40px;
  padding: 0;
  background: transparent;
  border: 1px solid rgba(245, 241, 234, 0.18);
  border-radius: 999px;
  cursor: pointer;
  color: var(--paper);
  z-index: 200;
  margin-right: 6px;
  transition: border-color 0.3s, background 0.3s;
}
/* Larger tap target on touch/phone (44pt is Apple's HIG minimum) */
@media (max-width: 640px) {
  .nav-toggle { width: 44px; height: 44px; }
  .nav-toggle span:nth-child(1) { top: 16px; }
  .nav-toggle span:nth-child(2) { top: 21px; }
  .nav-toggle span:nth-child(3) { top: 26px; }
  .nav-toggle.is-open span:nth-child(1) { top: 21px; }
  .nav-toggle.is-open span:nth-child(3) { top: 21px; }
}
.nav-toggle:hover {
  border-color: rgba(245, 241, 234, 0.45);
  background: rgba(245, 241, 234, 0.04);
}

/* On desktop: hide non-priority items from the inline flow.
   They still exist in the DOM, accessible via the slide-in panel. */
@media (min-width: 1081px) {
  .nav-links > li:not(.nav-link-priority) {
    display: none;
  }
  /* When the panel is OPEN (hamburger clicked), restore ALL items
     visible inside the full-screen overlay. */
  .nav-links.is-open > li {
    display: block !important;
  }
  /* The priority items get a small accent dot on hover for polish */
  .nav-link-priority > a {
    position: relative;
  }
  .nav-link-priority > a::after {
    content: '';
    position: absolute;
    left: 50%;
    bottom: -6px;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: var(--accent);
    transform: translateX(-50%) scale(0);
    transition: transform 0.3s cubic-bezier(.22,.61,.36,1);
  }
  .nav-link-priority > a:hover::after {
    transform: translateX(-50%) scale(1);
  }
  /* The Free Render priority item gets a soft accent treatment to draw the eye */
  .nav-link-priority a[data-nav="render"] {
    color: var(--accent);
    opacity: 1;
  }
  /* Active page indicator dot stays visible */
  body[data-page="kits"]   .nav-link-priority [data-nav="kits"]::after,
  body[data-page="render"] .nav-link-priority [data-nav="render"]::after {
    transform: translateX(-50%) scale(1);
  }
}
.nav-toggle span {
  position: absolute;
  left: 8px;
  right: 8px;
  height: 1.4px;
  background: currentColor;
  transition: transform 0.3s, opacity 0.3s, top 0.3s;
}
.nav-toggle span:nth-child(1) { top: 15px; }
.nav-toggle span:nth-child(2) { top: 19px; }
.nav-toggle span:nth-child(3) { top: 23px; }

.nav-toggle.is-open span:nth-child(1) { top: 19px; transform: rotate(45deg); }
.nav-toggle.is-open span:nth-child(2) { opacity: 0; }
.nav-toggle.is-open span:nth-child(3) { top: 19px; transform: rotate(-45deg); }

/* The slide-in panel — an elegant side drawer, slides in from the left
   (same side as the hamburger). The hamburger reveals it. */
.nav-links {
  position: fixed;
  top: 0; left: 0; bottom: 0;
  width: min(420px, 88vw);
  background: rgba(13, 12, 10, 0.985);
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  flex-direction: column;
  gap: 0;
  padding: 104px clamp(28px, 5vw, 52px) 48px;
  margin: 0;
  list-style: none;
  border-right: 1px solid rgba(245,241,234,0.1);
  box-shadow: 30px 0 80px rgba(0,0,0,0.5);
  transform: translateX(-100%);
  transition: transform 0.45s cubic-bezier(.22,.61,.36,1);
  overflow-y: auto;
  z-index: 150;
  display: none; /* hidden by default — only visible when .is-open */
}
.nav-links.is-open {
  display: flex;
  transform: translateX(0);
}
.nav-links.is-open > li {
  border-bottom: 1px solid rgba(245,241,234,0.06);
  display: block;
}
.nav-links.is-open > li > a {
  display: block;
  padding: 17px 4px;
  font-family: var(--serif);
  font-size: clamp(20px, 2.4vw, 26px);
  letter-spacing: 0.005em;
  font-weight: 400;
  opacity: 1;
  color: var(--paper);
  transition: color 0.2s, padding-left 0.3s;
}

/* Backdrop scrim behind the drawer — injected by nav.js, click to close */
.nav-scrim {
  position: fixed;
  inset: 0;
  background: rgba(8, 7, 6, 0.55);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.4s, visibility 0.4s;
  z-index: 140;
}
body.nav-open .nav-scrim {
  opacity: 1;
  visibility: visible;
  z-index: 999;
}
.nav-links.is-open > li > a:hover {
  color: var(--accent);
  padding-left: 12px;
}
/* Submenu (Service areas) becomes inline inside the slide-in panel */
.nav-links.is-open .nav-dropdown .nav-submenu {
  position: static;
  transform: none;
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  background: transparent;
  backdrop-filter: none;
  border: none;
  box-shadow: none;
  padding: 0 0 18px;
  min-width: 0;
}
.nav-links.is-open .nav-dropdown .nav-submenu::before { display: none; }
.nav-links.is-open .nav-dropdown .nav-submenu a {
  padding: 10px 18px;
  font-family: var(--sans);
  font-size: 15px;
  color: var(--muted);
}
.nav-links.is-open .nav-dropdown > a .nav-chevron { display: none; }

/* DESKTOP: render the priority items in their inline horizontal position */
@media (min-width: 1081px) {
  .nav-links:not(.is-open) {
    position: static;
    inset: auto;
    background: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    flex-direction: row;
    padding: 0;
    transform: none;
    overflow: visible;
    display: flex;
    gap: 28px;
    align-items: center;
    z-index: auto;
  }
  .nav-links:not(.is-open) > li {
    border: none;
  }
  .nav-links:not(.is-open) > li > a {
    padding: 0;
    font-family: var(--sans);
    font-size: 13px;
    font-weight: 400;
    letter-spacing: 0.04em;
  }
}

/* MOBILE adjustments — slimmer phone treatment, no inline CTA at the tightest sizes */
@media (max-width: 1080px) {
  .nav-phone span { display: none; }
  .nav-phone { padding: 9px; border: 1px solid rgba(245,241,234,0.18); border-radius: 999px; }
  .nav-phone svg { width: 16px; height: 16px; }
}
@media (max-width: 480px) {
  .nav-cta { display: none; }
  .nav-actions { gap: 10px; }
}

/* Disable body scroll while mobile nav is open */
body.nav-open { overflow: hidden; }

/* When the slide-in panel is open, the nav must NOT be its own stacking
   context. On scrolled pages .nav.is-scrolled applies backdrop-filter,
   which creates a stacking context that traps the fixed .nav-links panel
   beneath it (z-index 150 becomes relative to the nav's z-index 100).
   Dropping the filter + gradient while open lets the panel render above
   everything. */
body.nav-open .nav,
body.nav-open .nav.is-scrolled {
  background: transparent;
  /* Kill backdrop-filter instantly (no transition) while open — a transitioning
     filter keeps .nav a containing block and mis-positions the fixed scrim. */
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-bottom-color: transparent;
  transition: none;
}
/* The scrim sits inside .nav and shares its stacking context: scrim below
   the drawer, drawer below the toggle (X). */
body.nav-open .nav-links.is-open { z-index: 1000; }
body.nav-open .nav-toggle { z-index: 1001; }

/* ---------- DRAWER LINK STAGGER ----------
   Links fade + slide in from the left in sequence after the drawer opens. */
.nav-links.is-open > li > a {
  opacity: 0;
  transform: translateX(-18px);
  transition:
    opacity 0.55s ease,
    transform 0.55s cubic-bezier(0.22, 0.61, 0.36, 1),
    color 0.2s,
    padding-left 0.3s;
}
body.nav-open .nav-links.is-open > li > a {
  opacity: 1;
  transform: translateX(0);
}
body.nav-open .nav-links.is-open > li:nth-child(1) > a { transition-delay: 0.14s, 0.14s, 0s, 0s; }
body.nav-open .nav-links.is-open > li:nth-child(2) > a { transition-delay: 0.20s, 0.20s, 0s, 0s; }
body.nav-open .nav-links.is-open > li:nth-child(3) > a { transition-delay: 0.26s, 0.26s, 0s, 0s; }
body.nav-open .nav-links.is-open > li:nth-child(4) > a { transition-delay: 0.32s, 0.32s, 0s, 0s; }
body.nav-open .nav-links.is-open > li:nth-child(5) > a { transition-delay: 0.38s, 0.38s, 0s, 0s; }
body.nav-open .nav-links.is-open > li:nth-child(6) > a { transition-delay: 0.44s, 0.44s, 0s, 0s; }
@media (prefers-reduced-motion: reduce) {
  .nav-links.is-open > li > a { opacity: 1; transform: none; transition: none; }
}

/* ============================================================
   MARKETPLACE PAGE — Nore Circle live marketplace
   ============================================================ */
.mkt-body {
  background: var(--bg);
  color: var(--paper);
}

/* ---------- HERO ---------- */
.mkt-hero {
  padding: clamp(120px, 14vw, 200px) 0 clamp(60px, 8vw, 100px);
  background: var(--bg);
  border-bottom: 1px solid var(--line);
}
.mkt-hero .eyebrow {
  color: var(--accent);
  margin-bottom: 24px;
}
.mkt-headline {
  margin: 0 0 28px;
  max-width: 18ch;
}
.mkt-lede {
  margin: 0 0 40px;
  max-width: 640px;
  font-size: clamp(16px, 1.3vw, 19px);
  line-height: 1.6;
  color: var(--paper);
  opacity: 0.85;
}
.mkt-lede strong { color: var(--accent); font-weight: 500; }
.mkt-hero-actions {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 56px;
}

/* Hero stats strip */
.mkt-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  padding: 28px 0 0;
  border-top: 1px solid rgba(240, 232, 219, 0.15);
  max-width: 720px;
  margin: 0;
}
.mkt-stats > div {
  padding-right: 24px;
  border-right: 1px solid rgba(240, 232, 219, 0.08);
}
.mkt-stats > div:last-child { border-right: none; padding-right: 0; }
.mkt-stats dt {
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 500;
  margin-bottom: 8px;
}
.mkt-stats dd {
  font-family: var(--serif);
  font-size: clamp(16px, 1.4vw, 20px);
  color: var(--paper);
  margin: 0;
  font-weight: 400;
  letter-spacing: -0.005em;
  font-style: italic;
}
@media (max-width: 720px) {
  .mkt-stats { grid-template-columns: 1fr 1fr; gap: 20px 0; }
  .mkt-stats > div:nth-child(2) { border-right: none; }
}

/* ---------- TWO PATHS — HOST OR WAITLIST ---------- */
.mkt-paths {
  padding: clamp(80px, 10vw, 140px) 0;
  background: var(--bg-warm);
  border-bottom: 1px solid var(--line);
}
.mkt-paths-header {
  max-width: 720px;
  margin-bottom: clamp(48px, 6vw, 80px);
}
.mkt-paths-header .eyebrow { color: var(--accent); margin-bottom: 18px; }
.mkt-paths-header h2 { color: var(--paper); margin: 0 0 24px; }
.mkt-paths-lede {
  font-size: clamp(15px, 1.2vw, 18px);
  line-height: 1.6;
  color: var(--paper);
  opacity: 0.78;
  margin: 0;
}

.mkt-paths-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
}
@media (max-width: 880px) { .mkt-paths-grid { grid-template-columns: 1fr; } }

.mkt-path {
  padding: 48px 44px 40px;
  background: rgba(245, 241, 234, 0.025);
  border: 1px solid var(--line);
  border-radius: 4px;
  display: flex;
  flex-direction: column;
  transition: border-color 0.4s, transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.mkt-path:hover {
  border-color: rgba(184, 149, 106, 0.45);
  transform: translateY(-3px);
}
.mkt-path-host {
  background: linear-gradient(180deg, rgba(184, 149, 106, 0.08) 0%, rgba(184, 149, 106, 0.02) 100%);
  border-color: rgba(184, 149, 106, 0.3);
}
.mkt-path-guest {
  background: linear-gradient(180deg, rgba(110, 154, 171, 0.07) 0%, rgba(110, 154, 171, 0.02) 100%);
  border-color: rgba(110, 154, 171, 0.25);
}

.mkt-path-num {
  font-family: var(--serif);
  font-style: italic;
  font-size: 13px;
  letter-spacing: 0.28em;
  color: var(--accent);
  margin: 0 0 32px;
  font-weight: 400;
}
.mkt-path-guest .mkt-path-num { color: var(--plunge); }

.mkt-path h3 {
  font-family: var(--serif);
  font-size: clamp(28px, 3vw, 38px);
  font-weight: 300;
  letter-spacing: -0.02em;
  color: var(--paper);
  margin: 0 0 20px;
  line-height: 1.05;
}

.mkt-path-body {
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--paper);
  opacity: 0.82;
  margin: 0 0 24px;
}
.mkt-path-body strong { color: var(--accent); font-weight: 500; }
.mkt-path-guest .mkt-path-body strong { color: var(--plunge); }

.mkt-path-list {
  list-style: none;
  padding: 0 0 24px;
  margin: 0 0 28px;
  border-bottom: 1px solid var(--line);
}
.mkt-path-list li {
  font-size: 13.5px;
  line-height: 1.55;
  padding: 7px 0 7px 18px;
  position: relative;
  color: var(--paper);
  opacity: 0.85;
}
.mkt-path-list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 14px;
  width: 8px;
  height: 1px;
  background: var(--accent);
}
.mkt-path-guest .mkt-path-list li::before { background: var(--plunge); }
.mkt-path-list li strong { color: var(--paper); font-weight: 500; }

.mkt-path-foot {
  margin: 16px 0 0;
  font-size: 12.5px;
  color: var(--muted);
  font-style: italic;
}

/* Guest waitlist inline form */
.mkt-waitlist-form {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.mkt-waitlist-form input,
.mkt-waitlist-form select {
  background: rgba(245, 241, 234, 0.04);
  border: 1px solid var(--line);
  color: var(--paper);
  padding: 13px 16px;
  font: inherit;
  font-size: 13.5px;
  border-radius: 4px;
  transition: border-color 0.3s;
  width: 100%;
}
.mkt-waitlist-form input:focus,
.mkt-waitlist-form select:focus {
  outline: none;
  border-color: var(--plunge);
}
.mkt-waitlist-form input::placeholder { color: var(--muted); }
.mkt-waitlist-form select { color: var(--muted); }
.mkt-waitlist-form select:valid { color: var(--paper); }
.mkt-waitlist-form button { margin-top: 8px; }

.mkt-waitlist-sent {
  padding: 24px 0 0;
}
.mkt-waitlist-sent .mkt-sent-eyebrow {
  color: var(--plunge);
  margin: 0 0 8px;
}
.mkt-waitlist-sent p {
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--paper);
  opacity: 0.82;
  margin: 0;
}

/* ---------- LISTINGS BROWSE (legacy — kept for safety if needed) ---------- */
.mkt-listings {
  padding: clamp(80px, 10vw, 140px) 0;
  background: var(--bg-warm);
  border-bottom: 1px solid var(--line);
}
.listings-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 40px;
  margin-bottom: clamp(40px, 5vw, 64px);
  flex-wrap: wrap;
}
.listings-header .eyebrow {
  color: var(--accent);
  margin-bottom: 16px;
}
.listings-header h2 {
  color: var(--paper);
  margin: 0;
}

/* Location filter pills */
.loc-filter {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.loc-pill {
  font-family: var(--sans);
  font-size: 12px;
  letter-spacing: 0.06em;
  color: var(--paper);
  background: rgba(245, 241, 234, 0.04);
  border: 1px solid var(--line);
  padding: 9px 16px;
  border-radius: 999px;
  cursor: pointer;
  transition: all 0.25s;
}
.loc-pill:hover {
  border-color: rgba(184, 149, 106, 0.4);
}
.loc-pill.is-active {
  background: var(--accent);
  color: var(--ink);
  border-color: var(--accent);
}

/* Listing grid */
.listing-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}
@media (max-width: 1080px) { .listing-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 680px) { .listing-grid { grid-template-columns: 1fr; gap: 20px; } }

.listing-card {
  background: rgba(245, 241, 234, 0.025);
  border: 1px solid var(--line);
  border-radius: 4px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform 0.5s cubic-bezier(0.2, 0.8, 0.2, 1), border-color 0.4s, opacity 0.3s;
}
.listing-card:hover {
  transform: translateY(-4px);
  border-color: rgba(184, 149, 106, 0.4);
}
.listing-card.is-hidden { display: none; }

.listing-photo {
  position: relative;
  aspect-ratio: 4/3;
  overflow: hidden;
  background: var(--bg);
}
.listing-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.listing-card:hover .listing-photo img {
  transform: scale(1.04);
}

.listing-badge {
  position: absolute;
  top: 14px;
  left: 14px;
  background: rgba(13, 12, 10, 0.78);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(184, 149, 106, 0.35);
  padding: 5px 11px;
  font-size: 9.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
  border-radius: 999px;
  z-index: 2;
}
.listing-badge-operator {
  background: rgba(110, 154, 171, 0.18);
  border-color: rgba(110, 154, 171, 0.45);
  color: var(--plunge);
}

.listing-body {
  padding: 24px 24px 24px;
  flex: 1;
  display: flex;
  flex-direction: column;
}
.listing-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 4px;
}
.listing-body h3 {
  font-family: var(--serif);
  font-size: 21px;
  font-weight: 400;
  letter-spacing: -0.01em;
  color: var(--paper);
  margin: 0;
  line-height: 1.2;
}
.listing-rating {
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--muted);
  font-family: var(--sans);
  white-space: nowrap;
}
.listing-loc {
  font-size: 12.5px;
  color: var(--muted);
  margin: 0 0 8px;
  letter-spacing: 0.01em;
}
.listing-meta {
  font-size: 12px;
  color: var(--accent);
  letter-spacing: 0.02em;
  margin: 0 0 16px;
  font-family: var(--serif);
  font-style: italic;
}
.listing-spec {
  list-style: none;
  padding: 16px 0 16px;
  margin: 0 0 20px;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.listing-spec li {
  font-size: 13px;
  padding: 4px 0;
  color: var(--paper);
  opacity: 0.85;
}
.listing-spec li strong { color: var(--paper); font-weight: 500; }

.listing-foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: auto;
  gap: 12px;
}
.listing-price {
  font-family: var(--serif);
  font-size: 14px;
  color: var(--muted);
}
.listing-price strong {
  font-family: var(--serif);
  font-size: 24px;
  font-weight: 400;
  color: var(--paper);
  margin-right: 4px;
  letter-spacing: -0.01em;
}
.listing-price span {
  font-size: 12px;
  letter-spacing: 0.06em;
}
.listing-book {
  color: var(--paper);
  border-color: var(--paper);
}
.listing-book:hover {
  color: var(--accent);
  border-color: var(--accent);
}

/* The "list yours" CTA card */
.listing-card-cta {
  background: linear-gradient(180deg, rgba(184, 149, 106, 0.1) 0%, rgba(184, 149, 106, 0.02) 100%);
  border: 1px dashed rgba(184, 149, 106, 0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}
.listing-cta-inner {
  padding: 48px 32px;
  text-align: center;
  max-width: 320px;
}
.listing-cta-eyebrow {
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 16px;
  font-weight: 500;
}
.listing-card-cta h3 {
  font-family: var(--serif);
  font-size: 32px;
  font-weight: 300;
  letter-spacing: -0.02em;
  color: var(--paper);
  margin: 0 0 16px;
  line-height: 1.05;
}
.listing-card-cta p {
  font-size: 14px;
  line-height: 1.55;
  color: var(--paper);
  opacity: 0.78;
  margin: 0 0 24px;
}

.listings-footnote {
  margin: 56px 0 0;
  text-align: center;
  font-size: 12.5px;
  color: var(--muted);
  font-style: italic;
  max-width: 640px;
  margin-left: auto;
  margin-right: auto;
}

/* ---------- HOST CTA ---------- */
.mkt-host {
  padding: clamp(100px, 12vw, 180px) 0;
  background: var(--bg);
}
.mkt-host-inner {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: clamp(40px, 6vw, 96px);
  align-items: start;
}
@media (max-width: 960px) { .mkt-host-inner { grid-template-columns: 1fr; } }

.mkt-host-text .eyebrow { color: var(--accent); margin-bottom: 20px; }
.mkt-host-text h2 { margin: 0 0 32px; color: var(--paper); }
.mkt-host-lede {
  font-size: clamp(15px, 1.2vw, 18px);
  line-height: 1.65;
  color: var(--paper);
  opacity: 0.85;
  margin: 0 0 48px;
}
.mkt-host-lede strong { color: var(--accent); font-weight: 500; }

.mkt-host-steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
  margin-bottom: 40px;
  padding-top: 40px;
  border-top: 1px solid var(--line);
}
@media (max-width: 720px) { .mkt-host-steps { grid-template-columns: 1fr; gap: 24px; } }
.mkt-step {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.mkt-step-num {
  font-family: var(--serif);
  font-style: italic;
  font-size: 13px;
  letter-spacing: 0.32em;
  color: var(--accent);
  margin: 0 0 12px;
  font-weight: 400;
}
.mkt-step h4 {
  font-family: var(--serif);
  font-size: 21px;
  font-weight: 400;
  letter-spacing: -0.01em;
  color: var(--paper);
  margin: 0 0 6px;
  line-height: 1.1;
}
.mkt-step p {
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--paper);
  opacity: 0.78;
  margin: 0;
}

.mkt-host-perk {
  padding: 28px 32px;
  background: linear-gradient(180deg, rgba(184, 149, 106, 0.08) 0%, rgba(184, 149, 106, 0.02) 100%);
  border: 1px solid rgba(184, 149, 106, 0.25);
  border-radius: 4px;
}
.mkt-perk-eyebrow {
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 10px;
  font-weight: 500;
}
.mkt-perk-body {
  font-family: var(--serif);
  font-size: clamp(16px, 1.2vw, 19px);
  font-style: italic;
  color: var(--paper);
  margin: 0;
  line-height: 1.5;
  letter-spacing: -0.005em;
}
.mkt-perk-body strong {
  color: var(--accent);
  font-style: normal;
  font-weight: 500;
}

/* ---------- HOST APPLICATION FORM ---------- */
.mkt-host-form {
  padding: 40px 36px;
  background: rgba(245, 241, 234, 0.03);
  border: 1px solid var(--line);
  border-radius: 4px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.mkt-form-eyebrow {
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 12px;
  font-weight: 500;
}
.mkt-host-form h3 {
  font-family: var(--serif);
  font-size: 26px;
  font-weight: 300;
  letter-spacing: -0.01em;
  color: var(--paper);
  margin: 0 0 20px;
  line-height: 1.1;
}
.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
@media (max-width: 560px) { .form-row { grid-template-columns: 1fr; } }

.mkt-host-form input,
.mkt-host-form select,
.mkt-host-form textarea {
  background: rgba(245, 241, 234, 0.04);
  border: 1px solid var(--line);
  color: var(--paper);
  padding: 14px 16px;
  font: inherit;
  font-size: 14px;
  border-radius: 4px;
  transition: border-color 0.3s;
  width: 100%;
}
.mkt-host-form textarea { resize: vertical; min-height: 80px; }
.mkt-host-form input:focus,
.mkt-host-form select:focus,
.mkt-host-form textarea:focus {
  outline: none;
  border-color: var(--accent);
}
.mkt-host-form input::placeholder,
.mkt-host-form textarea::placeholder { color: var(--muted); }
.mkt-host-form select { color: var(--muted); }
.mkt-host-form select:valid { color: var(--paper); }
.mkt-host-form button { margin-top: 12px; }

/* Host application confirmation */
.mkt-host-sent {
  padding: 56px 48px;
  background: rgba(184, 149, 106, 0.06);
  border: 1px solid rgba(184, 149, 106, 0.35);
  border-radius: 4px;
}
.mkt-sent-eyebrow {
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 16px;
  font-weight: 500;
}
.mkt-host-sent h3 {
  font-family: var(--serif);
  font-size: 28px;
  font-weight: 300;
  color: var(--paper);
  margin: 0 0 14px;
}
.mkt-host-sent p {
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--paper);
  opacity: 0.82;
  margin: 0 0 24px;
}

/* ---------- BOOKING MODAL ---------- */
.mkt-modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.mkt-modal[hidden] { display: none; }
.mkt-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(13, 12, 10, 0.78);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  cursor: pointer;
  animation: modalFade 0.3s ease-out;
}
@keyframes modalFade { from { opacity: 0; } to { opacity: 1; } }

.mkt-modal-card {
  position: relative;
  background: var(--bg-warm);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 48px 44px 40px;
  max-width: 540px;
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
  animation: modalRise 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.5);
}
@keyframes modalRise {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}
.mkt-modal-close {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 36px;
  height: 36px;
  background: rgba(245, 241, 234, 0.04);
  border: 1px solid var(--line);
  border-radius: 50%;
  color: var(--paper);
  font-size: 18px;
  cursor: pointer;
  transition: all 0.25s;
  display: flex;
  align-items: center;
  justify-content: center;
}
.mkt-modal-close:hover {
  background: rgba(245, 241, 234, 0.08);
  border-color: var(--accent);
}

.mkt-modal-eyebrow {
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 12px;
  font-weight: 500;
}
.mkt-modal-card h3 {
  font-family: var(--serif);
  font-size: clamp(26px, 2.4vw, 34px);
  font-weight: 300;
  letter-spacing: -0.015em;
  color: var(--paper);
  margin: 0 0 12px;
  line-height: 1.1;
}
.mkt-modal-lede {
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--paper);
  opacity: 0.75;
  margin: 0 0 28px;
}
.mkt-modal-form {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.mkt-modal-form input,
.mkt-modal-form select,
.mkt-modal-form textarea {
  background: rgba(245, 241, 234, 0.04);
  border: 1px solid var(--line);
  color: var(--paper);
  padding: 12px 14px;
  font: inherit;
  font-size: 13.5px;
  border-radius: 4px;
  transition: border-color 0.3s;
  width: 100%;
}
.mkt-modal-form textarea { resize: vertical; min-height: 70px; }
.mkt-modal-form input:focus,
.mkt-modal-form select:focus,
.mkt-modal-form textarea:focus {
  outline: none;
  border-color: var(--accent);
}
.mkt-modal-form input::placeholder,
.mkt-modal-form textarea::placeholder { color: var(--muted); }
.mkt-modal-form select { color: var(--muted); }
.mkt-modal-form select:valid { color: var(--paper); }
.mkt-modal-form input[type="date"] { color: var(--paper); }

.mkt-modal-price {
  font-family: var(--serif);
  font-size: 14px;
  color: var(--muted);
  margin: 8px 0 0;
  padding: 14px 0;
  border-top: 1px solid var(--line);
}
.mkt-modal-price strong {
  color: var(--accent);
  font-weight: 400;
  margin-left: 6px;
}
.mkt-modal-form button { margin-top: 8px; }

.mkt-modal-sent {
  text-align: center;
  padding: 12px 0;
}
.mkt-modal-sent h3 { margin-bottom: 12px; }
.mkt-modal-sent p {
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--paper);
  opacity: 0.82;
  margin: 0 0 28px;
}

@media (max-width: 560px) {
  .mkt-modal-card { padding: 40px 24px 28px; }
}

/* ============================================================
   CONFIGURATOR PAGE
   ============================================================ */
.config-body,
.mkt-body {
  background: var(--bg);
  color: var(--paper);
  overflow-x: hidden;
  padding-top: 42px; /* offset for the fixed banner */
}

/* ---------- TOP NAV ----------
   Sits BELOW the fixed banner (which is 42px tall). Sticks 42px from top
   so the banner stays visible above it as the user scrolls.
*/
.config-nav {
  position: sticky;
  top: 42px;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px var(--gut);
  background: rgba(26, 23, 20, 0.92);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line);
}
.config-title {
  font-family: var(--serif);
  font-size: 14px;
  font-style: italic;
  color: var(--accent);
  margin: 0;
  letter-spacing: 0.06em;
}
.config-back {
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--paper);
  opacity: 0.7;
  transition: opacity 0.3s;
}
.config-back:hover { opacity: 1; }

/* ---------- MAIN GRID ---------- */
.configurator {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: 0;
  min-height: calc(100vh - 64px);
  padding-bottom: 120px; /* space for price bar */
}

@media (max-width: 1024px) {
  .configurator { grid-template-columns: 1fr; }
}

/* ---------- LEFT: STICKY PREVIEW ---------- */
.config-preview {
  position: sticky;
  top: 64px;
  height: calc(100vh - 64px);
  padding: 40px;
  display: flex;
  flex-direction: column;
  gap: 24px;
  border-right: 1px solid var(--line);
  background: var(--bg);
}
@media (max-width: 1024px) {
  .config-preview {
    position: static;
    height: 60vh;
    border-right: none;
    border-bottom: 1px solid var(--line);
    padding: 24px;
  }
}

.preview-stage {
  position: relative;
  flex: 1;
  border-radius: 6px;
  overflow: hidden;
  background: var(--bg-warm);
}

/* Photo-based preview (replaces CSS art) */
.preview-photo {
  position: absolute;
  inset: 0;
  background: var(--bg);
}
.preview-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: opacity 0.45s ease-out, filter 0.6s ease-out;
}
.preview-overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse at 50% 100%, rgba(13,12,10,0.35) 0%, transparent 60%),
    linear-gradient(180deg, rgba(13,12,10,0.15) 0%, transparent 30%, rgba(13,12,10,0.3) 100%);
  z-index: 1;
}

/* Cladding-driven photo tinting */
.preview-stage[data-cladding="cedar"]   .preview-photo img { filter: sepia(0.15) hue-rotate(-10deg) saturate(1.1); }
.preview-stage[data-cladding="stone"]   .preview-photo img { filter: saturate(0.7) contrast(1.05); }
.preview-stage[data-cladding="black"]   .preview-photo img { filter: brightness(0.78) contrast(1.15) saturate(0.85); }
.preview-stage[data-cladding="steel"]   .preview-photo img { filter: none; }

/* Cladding swatch tag */
.preview-cladding-tag {
  position: absolute;
  top: 20px;
  right: 20px;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: rgba(13, 12, 10, 0.78);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(184, 149, 106, 0.3);
  padding: 10px 14px 10px 10px;
  border-radius: 999px;
  font-size: 12px;
  color: var(--paper);
  letter-spacing: 0.02em;
}
.preview-cladding-tag .swatch {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.15);
  flex-shrink: 0;
}

/* ---------- BACKDROP COLORS BY DATA-ATTR ---------- */
.preview-stage[data-backdrop="canyon"] .preview-backdrop {
  background:
    radial-gradient(ellipse at 50% 110%, rgba(255, 160, 90, 0.5) 0%, transparent 50%),
    linear-gradient(180deg, #0d0a08 0%, #2a1a10 35%, #5a2e18 65%, #b86b3a 90%, #f0a368 100%);
}
.preview-stage[data-backdrop="coastal"] .preview-backdrop {
  background:
    radial-gradient(ellipse at 50% 100%, rgba(200, 230, 240, 0.25) 0%, transparent 60%),
    linear-gradient(180deg, #0a1014 0%, #1c2a32 40%, #4a6878 70%, #8aa8b8 100%);
}
.preview-stage[data-backdrop="forest"] .preview-backdrop {
  background:
    radial-gradient(ellipse at 50% 105%, rgba(120, 140, 80, 0.3) 0%, transparent 55%),
    linear-gradient(180deg, #0a0d08 0%, #1a2410 40%, #2e3a1c 70%, #4a5a30 100%);
}
.preview-stage[data-backdrop="desert"] .preview-backdrop {
  background:
    radial-gradient(ellipse at 50% 110%, rgba(220, 180, 120, 0.4) 0%, transparent 55%),
    linear-gradient(180deg, #1a1410 0%, #3a2818 40%, #6a4a30 70%, #c89a6a 100%);
}
.preview-stage[data-backdrop="snow"] .preview-backdrop {
  background:
    radial-gradient(ellipse at 50% 100%, rgba(220, 230, 240, 0.4) 0%, transparent 60%),
    linear-gradient(180deg, #14181c 0%, #2a323a 35%, #6a7a8a 70%, #c8d4dc 100%);
}
.preview-backdrop {
  position: absolute;
  inset: 0;
  transition: background 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.preview-stage::after {
  /* film grain overlay */
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    repeating-radial-gradient(circle at 20% 30%, rgba(240,232,219,0.02) 0%, transparent 2px),
    repeating-radial-gradient(circle at 80% 60%, rgba(240,232,219,0.015) 0%, transparent 3px);
  pointer-events: none;
}

/* ---------- PRODUCT VISUAL ---------- */
.preview-product {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 0 8% 18% 8%;
  gap: 4%;
}

.prod-pool {
  position: relative;
  width: 48%;
  aspect-ratio: 2.2 / 1;
  display: flex;
  border: 1px solid rgba(184, 149, 106, 0.45);
  background: linear-gradient(180deg, rgba(184,149,106,0.04) 0%, rgba(0,0,0,0.5) 100%);
  box-shadow: inset 0 -10px 30px rgba(0, 0, 0, 0.5), 0 12px 60px rgba(184, 149, 106, 0.15);
  transition: border-color 0.5s, box-shadow 0.5s;
}
.pool-hot {
  flex: 1.6;
  background:
    radial-gradient(ellipse at center, rgba(220,120,60,0.28), transparent 70%),
    linear-gradient(180deg, rgba(220,120,60,0.18), rgba(60,30,15,0.6));
  position: relative;
}
.pool-hot::after {
  content: '38°C';
  position: absolute;
  top: 8px;
  left: 8px;
  font-size: 9px;
  letter-spacing: 0.15em;
  color: rgba(255,180,120,0.7);
  font-family: var(--serif);
}
.pool-cold {
  flex: 1;
  border-left: 1px solid rgba(184, 149, 106, 0.35);
  background:
    radial-gradient(ellipse at center, rgba(110,154,171,0.3), transparent 70%),
    linear-gradient(180deg, rgba(110,154,171,0.2), rgba(20,40,55,0.6));
  position: relative;
}
.pool-cold::after {
  content: '4°C';
  position: absolute;
  top: 8px;
  right: 8px;
  font-size: 9px;
  letter-spacing: 0.15em;
  color: rgba(180,210,225,0.7);
  font-family: var(--serif);
}
.pool-label {
  position: absolute;
  bottom: -22px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0;
  white-space: nowrap;
}

/* Cladding variants change the pool border */
.preview-stage[data-cladding="cedar"] .prod-pool {
  border-color: rgba(160, 110, 70, 0.6);
  box-shadow:
    inset 0 0 0 4px rgba(120, 80, 50, 0.4),
    inset 0 -10px 30px rgba(0,0,0,0.5),
    0 12px 60px rgba(184, 149, 106, 0.15);
}
.preview-stage[data-cladding="stone"] .prod-pool {
  border-color: rgba(130, 130, 125, 0.7);
  box-shadow:
    inset 0 0 0 6px rgba(110, 105, 95, 0.4),
    inset 0 -10px 30px rgba(0,0,0,0.5),
    0 12px 60px rgba(184, 149, 106, 0.15);
}
.preview-stage[data-cladding="black"] .prod-pool {
  border-color: rgba(40, 38, 36, 0.9);
  box-shadow:
    inset 0 0 0 4px rgba(20, 18, 16, 0.7),
    inset 0 -10px 30px rgba(0,0,0,0.5),
    0 12px 60px rgba(0, 0, 0, 0.4);
}

.prod-sauna {
  position: relative;
  width: 26%;
  aspect-ratio: 1 / 1.4;
  align-self: flex-end;
}
.sauna-roof {
  position: absolute;
  top: 0;
  left: -8%;
  right: -8%;
  height: 14%;
  background: linear-gradient(180deg, #2a1810 0%, #3a2418 100%);
  clip-path: polygon(0 100%, 50% 0, 100% 100%);
}
.sauna-body {
  position: absolute;
  top: 14%;
  left: 0;
  right: 0;
  bottom: 0;
  background:
    repeating-linear-gradient(90deg, transparent 0px, transparent 6px, rgba(80,40,20,0.4) 6px, rgba(80,40,20,0.4) 7px),
    linear-gradient(180deg, #4a2818 0%, #2a1810 100%);
  border: 1px solid rgba(184, 149, 106, 0.3);
}
.sauna-window {
  position: absolute;
  top: 26%;
  left: 18%;
  right: 18%;
  height: 38%;
  background: radial-gradient(ellipse at center, rgba(255, 180, 100, 0.45), rgba(120, 60, 30, 0.7) 70%);
  border: 1px solid rgba(184, 149, 106, 0.4);
  box-shadow: 0 0 24px rgba(255, 160, 90, 0.3);
}
.sauna-label {
  position: absolute;
  bottom: -22px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0;
  white-space: nowrap;
}

/* Pavilion overlay (appears when selected) */
.prod-pavilion {
  position: absolute;
  top: 5%;
  left: 5%;
  right: 5%;
  height: 30%;
  pointer-events: none;
}
.pavilion-roof {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(60, 40, 25, 0.4) 0%, transparent 80%);
  border-bottom: 1px solid rgba(184, 149, 106, 0.4);
}
.prod-pavilion::after {
  content: 'PAVILION';
  position: absolute;
  top: 8px;
  right: 12px;
  font-size: 9px;
  letter-spacing: 0.2em;
  color: rgba(184, 149, 106, 0.8);
  font-family: var(--serif);
}

/* Fire pit overlay */
.prod-firepit {
  position: absolute;
  left: 4%;
  bottom: 14%;
  width: 8%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 40%, #ffba6a 0%, #c8552a 40%, #4a1f10 80%);
  box-shadow: 0 0 30px rgba(255, 140, 80, 0.5);
  animation: firepit-flicker 2.5s ease-in-out infinite;
}
@keyframes firepit-flicker {
  0%, 100% { opacity: 0.85; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.05); }
}

/* ---------- PREVIEW TAG ---------- */
.preview-tag {
  position: absolute;
  top: 20px;
  left: 20px;
  z-index: 2;
  background: rgba(13, 12, 10, 0.7);
  backdrop-filter: blur(8px);
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 12px 16px;
}
.preview-label {
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 4px;
  font-weight: 500;
}
.preview-summary {
  font-family: var(--serif);
  font-size: 14px;
  color: var(--paper);
  margin: 0;
}

/* ---------- BACKDROP SWATCHES ---------- */
.preview-backdrops { flex-shrink: 0; }
.backdrop-label {
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 12px;
  font-weight: 500;
}
.backdrop-row {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.backdrop-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  background: rgba(245, 241, 234, 0.04);
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--paper);
  font-size: 12px;
  letter-spacing: 0.06em;
  cursor: pointer;
  transition: all 0.3s;
}
.backdrop-btn span {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.2);
}
.backdrop-btn[data-backdrop="canyon"] span { background: linear-gradient(135deg, #2a1a10, #b86b3a); }
.backdrop-btn[data-backdrop="coastal"] span { background: linear-gradient(135deg, #1c2a32, #8aa8b8); }
.backdrop-btn[data-backdrop="forest"] span { background: linear-gradient(135deg, #1a2410, #4a5a30); }
.backdrop-btn[data-backdrop="desert"] span { background: linear-gradient(135deg, #3a2818, #c89a6a); }
.backdrop-btn[data-backdrop="snow"] span { background: linear-gradient(135deg, #2a323a, #c8d4dc); }
.backdrop-btn:hover { border-color: var(--accent); }
.backdrop-btn.is-active {
  background: var(--accent);
  color: var(--ink);
  border-color: var(--accent);
}
.backdrop-btn.is-active span { border-color: rgba(0,0,0,0.3); }

/* ---------- RIGHT: OPTIONS PANEL ---------- */
.config-options {
  padding: 60px 48px 80px;
  max-width: 760px;
}
@media (max-width: 640px) {
  .config-options { padding: 40px 24px 60px; }
}

.config-header { margin-bottom: 56px; }
.config-header .eyebrow { color: var(--accent); margin-bottom: 16px; }
.config-header h1 {
  margin-bottom: 20px;
  font-family: var(--serif);
}
.config-intro {
  font-size: 15px;
  line-height: 1.6;
  color: var(--paper);
  opacity: 0.78;
  max-width: 500px;
}

/* ---------- CONFIG STEPS ---------- */
.config-step {
  padding-bottom: 48px;
  margin-bottom: 48px;
  border-bottom: 1px solid var(--line);
}
.config-step:last-of-type { border-bottom: none; }

.step-num {
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 12px;
  font-weight: 500;
}
.config-step h2 {
  font-family: var(--serif);
  font-size: 28px;
  font-weight: 300;
  letter-spacing: -0.01em;
  margin: 0 0 8px;
  color: var(--paper);
}
.step-help {
  font-size: 13px;
  color: var(--muted);
  margin: 0 0 24px;
  font-style: italic;
}

/* ---------- OPTION CARDS ---------- */
.option-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
.option-grid-swatch { grid-template-columns: repeat(4, 1fr); }

@media (max-width: 640px) {
  .option-grid { grid-template-columns: 1fr 1fr; }
}

.option-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  padding: 18px 16px;
  background: rgba(245, 241, 234, 0.025);
  border: 1px solid var(--line);
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.25s;
  text-align: left;
}
.option-card:hover {
  border-color: rgba(184, 149, 106, 0.5);
  background: rgba(184, 149, 106, 0.04);
}
.option-card.is-selected {
  border-color: var(--accent);
  background: rgba(184, 149, 106, 0.1);
  box-shadow: inset 0 0 0 1px var(--accent);
}
.opt-name {
  font-family: var(--serif);
  font-size: 16px;
  color: var(--paper);
  font-weight: 400;
  letter-spacing: -0.005em;
}
.opt-sub {
  font-size: 11px;
  color: var(--muted);
  margin-bottom: 6px;
}
.opt-price {
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent);
  margin-top: auto;
  font-weight: 500;
}
.option-card.is-selected .opt-price { color: var(--accent); }

/* ---------- CUSTOM-size pool option card ---------- */
.option-card-custom {
  border-style: dashed !important;
  border-color: rgba(184,149,106,0.45) !important;
}
.option-card-custom .opt-price {
  font-style: italic;
  color: rgba(184,149,106,0.9);
}
.option-card-custom.is-selected {
  border-style: solid !important;
  border-color: var(--accent) !important;
}

/* ---------- SWATCH CARDS ---------- */
.option-swatch {
  align-items: center;
  text-align: center;
  padding: 14px 10px;
  gap: 8px;
}
.option-swatch .opt-name { font-size: 13px; text-align: center; }
.option-swatch .opt-price { text-align: center; }

.swatch {
  width: 100%;
  aspect-ratio: 1;
  border-radius: 4px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  position: relative;
  overflow: hidden;
}
.swatch::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(255,255,255,0.06), transparent 50%);
}
.swatch-steel       { background: linear-gradient(135deg, #b8b8bc 0%, #76767a 100%); }
.swatch-cedar       { background: linear-gradient(135deg, #c89160 0%, #6e3e1f 100%); }
.swatch-stone       { background: linear-gradient(135deg, #a8a59e 0%, #5e5b54 100%); }
.swatch-black       { background: linear-gradient(135deg, #2a2826 0%, #0a0908 100%); }
.swatch-stainless   { background: linear-gradient(135deg, #d8d8dc 0%, #98989c 100%); }
.swatch-travertine  { background: linear-gradient(135deg, #e8d8b8 0%, #b89868 100%); }
.swatch-basalt      { background: linear-gradient(135deg, #383634 0%, #181614 100%); }
.swatch-concrete    { background: linear-gradient(135deg, #b8b6b0 0%, #88867e 100%); }
.swatch-flagstone   { background: linear-gradient(135deg, #786e64 0%, #4e463e 100%); }
.swatch-hardwood    { background: linear-gradient(135deg, #8e5e3a 0%, #4e2e18 100%); }

/* ---------- TOGGLE CARDS (add-ons) ---------- */
.option-toggle {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.toggle-card {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 18px 20px;
  background: rgba(245, 241, 234, 0.025);
  border: 1px solid var(--line);
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.25s;
  text-align: left;
  width: 100%;
}
.toggle-card:hover {
  border-color: rgba(184, 149, 106, 0.5);
  background: rgba(184, 149, 106, 0.04);
}
.toggle-card.is-selected {
  border-color: var(--accent);
  background: rgba(184, 149, 106, 0.08);
}
.toggle-check {
  width: 22px;
  height: 22px;
  border: 1px solid var(--muted);
  border-radius: 4px;
  flex-shrink: 0;
  position: relative;
  transition: all 0.25s;
}
.toggle-card.is-selected .toggle-check {
  background: var(--accent);
  border-color: var(--accent);
}
.toggle-card.is-selected .toggle-check::after {
  content: '✓';
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ink);
  font-size: 13px;
  font-weight: 700;
}
.toggle-card > span:nth-child(2) {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.toggle-name {
  font-family: var(--serif);
  font-size: 16px;
  color: var(--paper);
  font-weight: 400;
}
.toggle-sub {
  font-size: 12px;
  color: var(--muted);
}
.toggle-price {
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent);
  font-weight: 500;
  white-space: nowrap;
}

/* ============================================================
   BACKYARD VISUALIZER — "See it in your backyard"
   ============================================================ */
.visualizer {
  padding: clamp(100px, 12vw, 160px) 0;
  background: var(--bg-warm);
  border-top: 1px solid var(--line);
  position: relative;
  z-index: 2;
}
.vis-header { max-width: 720px; margin-bottom: 56px; }
.vis-header .eyebrow { color: var(--accent); margin-bottom: 20px; }
.vis-header h2 { margin-bottom: 24px; color: var(--paper); }
.vis-header h2 .muted { color: var(--muted); font-style: italic; }
.vis-intro {
  font-size: 16px;
  line-height: 1.65;
  color: var(--paper);
  opacity: 0.78;
}

/* ---------- VIS FORM ---------- */
.vis-form {
  display: flex;
  gap: 12px;
  max-width: 640px;
  margin-bottom: 56px;
}
.vis-form input {
  flex: 1;
  background: rgba(245, 241, 234, 0.04);
  border: 1px solid var(--line);
  color: var(--paper);
  padding: 18px 22px;
  font: inherit;
  font-size: 15px;
  border-radius: 999px;
  transition: border-color 0.3s, background 0.3s;
}
.vis-form input:focus {
  outline: none;
  border-color: var(--accent);
  background: rgba(240, 232, 219, 0.06);
}
.vis-form input::placeholder { color: var(--muted); }
@media (max-width: 640px) {
  .vis-form { flex-direction: column; }
}

/* ---------- VIS RESULT ---------- */
.vis-result {
  border-top: 1px solid var(--line);
  padding-top: 56px;
}
.vis-result[hidden] { display: none; }

.vis-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
  margin-bottom: 56px;
}
@media (max-width: 900px) {
  .vis-grid { grid-template-columns: 1fr; }
}

/* ---------- VIS MAP (real satellite) ---------- */
.vis-map { display: flex; flex-direction: column; gap: 12px; }
.vis-map-frame {
  width: 100%;
  aspect-ratio: 4/3;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 4px;
  overflow: hidden;
  position: relative;
}
.vis-map-frame iframe {
  width: 100%; height: 100%;
  border: 0;
  filter: saturate(0.85) contrast(1.05);
}
.vis-label {
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 4px;
  font-weight: 500;
}
.vis-addr {
  font-family: var(--serif);
  font-size: 15px;
  color: var(--paper);
  margin: 0;
}

/* ---------- VIS FOOTPRINT (SVG diagram) ---------- */
.vis-footprint { display: flex; flex-direction: column; gap: 12px; }
.footprint-svg-wrap {
  width: 100%;
  aspect-ratio: 4/3;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.footprint-svg { width: 100%; height: 100%; }
.vis-footprint-meta {
  font-size: 13px;
  color: var(--muted);
  line-height: 1.5;
  padding: 0 4px;
}
.vis-footprint-meta strong { color: var(--paper); font-weight: 500; }

/* ---------- VIS CTA ---------- */
.vis-cta {
  background: linear-gradient(180deg, rgba(184,149,106,0.08) 0%, rgba(184,149,106,0.02) 100%);
  border: 1px solid rgba(184, 149, 106, 0.25);
  border-radius: 4px;
  padding: 40px 48px;
  text-align: center;
  max-width: 720px;
  margin: 0 auto;
}
.vis-cta-lead {
  font-family: var(--serif);
  font-size: clamp(24px, 2.4vw, 32px);
  color: var(--paper);
  margin: 0 0 12px;
  font-weight: 300;
  letter-spacing: -0.01em;
}
.vis-cta-sub {
  font-size: 14px;
  color: var(--paper);
  opacity: 0.75;
  margin: 0 0 24px;
  line-height: 1.55;
}

/* ============================================================
   RECENT INSTALLATIONS GALLERY
   ============================================================ */
.installs {
  padding: clamp(100px, 12vw, 160px) 0;
  background: var(--bg);
  border-top: 1px solid var(--line);
}
.installs-header {
  max-width: 720px;
  margin-bottom: clamp(60px, 8vw, 90px);
}
.installs-header .eyebrow { color: var(--accent); margin-bottom: 20px; }
.installs-header h2 { color: var(--paper); }
.installs-header h2 .muted { color: var(--muted); font-style: italic; }

.installs-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}
@media (max-width: 960px) { .installs-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px) { .installs-grid { grid-template-columns: 1fr; } }

.install-card {
  background: rgba(245, 241, 234, 0.025);
  border: 1px solid var(--line);
  border-radius: 4px;
  overflow: hidden;
  transition: transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1), border-color 0.4s;
}
.install-card:hover {
  transform: translateY(-6px);
  border-color: rgba(184, 149, 106, 0.4);
}

.install-img {
  position: relative;
  aspect-ratio: 4/3;
  overflow: hidden;
}
.install-img-photo { background: var(--bg); }
.install-img-photo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.install-card:hover .install-img-photo img { transform: scale(1.04); }
.install-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 50%, rgba(13,12,10,0.8) 100%);
  z-index: 2;
}
.install-tag {
  position: absolute;
  top: 14px;
  left: 14px;
  z-index: 3;
  background: rgba(13, 12, 10, 0.75);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(184, 149, 106, 0.3);
  padding: 6px 12px;
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
  border-radius: 999px;
}

/* Reference image variants — each gets a unique architectural mood */
.install-img-1 {
  background:
    radial-gradient(ellipse at 50% 100%, rgba(255,160,90,0.4) 0%, transparent 50%),
    linear-gradient(180deg, #0d0a08 0%, #2a1810 30%, #6a3a1f 70%, #c8855a 100%);
}
.install-img-2 {
  background:
    radial-gradient(ellipse at 50% 100%, rgba(220,180,120,0.35) 0%, transparent 55%),
    linear-gradient(180deg, #1a1410 0%, #3a2818 40%, #8a6438 80%, #d4a878 100%);
}
.install-img-3 {
  background:
    radial-gradient(ellipse at 50% 100%, rgba(180,210,225,0.3) 0%, transparent 60%),
    linear-gradient(180deg, #0a0e10 0%, #1c2a32 40%, #4a6878 80%, #8aa8b8 100%);
}
.install-img-4 {
  background:
    radial-gradient(ellipse at 50% 100%, rgba(220,230,240,0.4) 0%, transparent 55%),
    linear-gradient(180deg, #14181c 0%, #2a323a 35%, #5a6a78 70%, #b8c4cc 100%);
}
.install-img-5 {
  background:
    radial-gradient(ellipse at 50% 100%, rgba(120,140,80,0.35) 0%, transparent 55%),
    linear-gradient(180deg, #0a0d08 0%, #1a2410 40%, #3a4a24 80%, #6a7a4a 100%);
}
.install-img-6 {
  background:
    radial-gradient(ellipse at 50% 100%, rgba(220,180,120,0.4) 0%, transparent 50%),
    linear-gradient(180deg, #1a1410 0%, #3a2418 35%, #7a5028 70%, #c8985a 100%);
}

/* Subtle vessel silhouette inside placeholder install cards only */
.install-img.placeholder::after {
  content: '';
  position: absolute;
  left: 22%;
  right: 22%;
  bottom: 30%;
  height: 18%;
  border: 1px solid rgba(240, 232, 219, 0.25);
  background: linear-gradient(180deg, rgba(240,232,219,0.05) 0%, rgba(0,0,0,0.4) 100%);
  box-shadow: inset 0 -4px 12px rgba(0,0,0,0.4), 0 4px 20px rgba(184,149,106,0.15);
  z-index: 1;
}

.install-meta {
  padding: 24px 24px 28px;
}
.install-meta h3 {
  font-family: var(--serif);
  font-size: 19px;
  font-weight: 400;
  letter-spacing: -0.01em;
  color: var(--paper);
  margin: 0 0 10px;
  line-height: 1.2;
}
.install-meta p {
  font-size: 13px;
  line-height: 1.55;
  color: var(--muted);
  margin: 0 0 12px;
}
.install-spec {
  font-size: 12px !important;
  color: var(--paper) !important;
  opacity: 0.85;
  margin: 0 !important;
  padding-top: 12px;
  border-top: 1px solid var(--line);
  letter-spacing: 0.02em;
}
.install-spec strong { color: var(--accent); font-weight: 500; }

/* ---------- STICKY PRICE BAR ---------- */
.price-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 100;
  background: rgba(13, 12, 10, 0.95);
  backdrop-filter: blur(16px);
  border-top: 1px solid var(--line);
}
.price-bar-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px var(--gut);
  max-width: 1600px;
  margin: 0 auto;
  gap: 24px;
}
.price-summary { display: flex; flex-direction: column; gap: 2px; }
.price-label {
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0;
  font-weight: 500;
}
.price-total {
  font-family: var(--serif);
  font-size: 28px;
  color: var(--paper);
  margin: 0;
  font-weight: 400;
  letter-spacing: -0.01em;
}
.price-actions { display: flex; gap: 12px; align-items: center; }
.price-actions .btn-ghost {
  color: var(--paper);
  border: 1px solid var(--line);
  padding: 12px 18px;
  font-size: 11px;
}
@media (max-width: 640px) {
  .price-bar-inner { flex-direction: column; align-items: stretch; gap: 12px; padding: 14px; }
  .price-actions { width: 100%; }
  .price-actions .btn-primary { flex: 1; text-align: center; }
}

/* ---------- QUOTE SECTION ---------- */
.quote-section {
  padding: 120px 0;
  border-top: 1px solid var(--line);
  background: var(--bg-warm);
}
.quote-section h2 { margin-bottom: 48px; }
.quote-section .eyebrow {
  color: var(--accent);
  margin-bottom: 18px;
}
.quote-summary {
  background: rgba(245, 241, 234, 0.03);
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 32px;
  margin-bottom: 32px;
  max-width: 720px;
}
.quote-summary-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.quote-summary-list li {
  font-size: 14px;
  padding: 8px 0;
  border-bottom: 1px solid var(--line);
  color: var(--paper);
  opacity: 0.85;
}
.quote-summary-list li:last-child { border-bottom: none; }
.quote-summary-total {
  margin: 16px 0 0;
  padding-top: 16px;
  border-top: 1px solid var(--accent);
  font-family: var(--serif);
  font-size: 22px;
  color: var(--accent);
}
.quote-summary-total strong { color: var(--paper); font-weight: 400; }

.quote-form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  max-width: 720px;
}
.quote-form input,
.quote-form textarea {
  background: rgba(245, 241, 234, 0.04);
  border: 1px solid var(--line);
  color: var(--paper);
  padding: 16px 18px;
  font: inherit;
  font-size: 14px;
  border-radius: 4px;
  transition: border-color 0.3s;
}
.quote-form textarea { grid-column: 1 / -1; resize: vertical; min-height: 80px; }
.quote-form input:focus, .quote-form textarea:focus {
  outline: none;
  border-color: var(--accent);
}
.quote-form input::placeholder, .quote-form textarea::placeholder { color: var(--muted); }
.quote-form button { grid-column: 1 / -1; justify-self: start; margin-top: 8px; }

.quote-sent {
  max-width: 720px;
  padding: 48px;
  background: rgba(184, 149, 106, 0.06);
  border: 1px solid rgba(184, 149, 106, 0.3);
  border-radius: 4px;
}
.quote-sent-eyebrow {
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 16px;
  font-weight: 500;
}
.quote-sent h3 {
  font-family: var(--serif);
  font-size: 32px;
  font-weight: 300;
  color: var(--paper);
  margin: 0 0 12px;
}
.quote-sent p {
  font-size: 15px;
  line-height: 1.6;
  color: var(--paper);
  opacity: 0.8;
  margin: 0 0 24px;
  max-width: 480px;
}

@media (max-width: 640px) {
  .quote-form { grid-template-columns: 1fr; }
}

/* ============================================================
   ARCHITECTURAL PLACEHOLDERS
   Intentional CSS art in place of stock photos. Each placeholder
   represents the product abstractly: pools, plunges, saunas as
   geometric forms over warm brand gradients. Replace with real
   renders as they arrive.
   ============================================================ */
.placeholder {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background:
    radial-gradient(ellipse at 30% 70%, rgba(184,149,106,0.18) 0%, transparent 55%),
    linear-gradient(160deg, #1a1714 0%, #2a221c 50%, #1a1714 100%);
}
.placeholder::before {
  /* film grain */
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    repeating-radial-gradient(circle at 20% 30%, rgba(240,232,219,0.015) 0%, transparent 2px),
    repeating-radial-gradient(circle at 80% 60%, rgba(240,232,219,0.012) 0%, transparent 3px);
  pointer-events: none;
  z-index: 1;
}

/* ---------- HERO PLACEHOLDER — vessel + horizon ---------- */
.placeholder-hero {
  background:
    radial-gradient(ellipse at 50% 110%, rgba(184,149,106,0.35) 0%, transparent 50%),
    linear-gradient(180deg, #0a0908 0%, #1c1410 35%, #3a2418 60%, #6b3a1f 85%, #c8855a 100%);
}
.ph-horizon {
  position: absolute;
  left: 0; right: 0;
  bottom: 38%;
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, rgba(184,149,106,0.55) 50%, transparent 100%);
  z-index: 2;
}
.ph-vessel {
  position: absolute;
  left: 50%;
  bottom: 22%;
  transform: translateX(-50%);
  width: 36%;
  height: 14%;
  border: 1px solid rgba(184,149,106,0.4);
  background: linear-gradient(180deg, rgba(184,149,106,0.05) 0%, rgba(0,0,0,0.5) 100%);
  border-radius: 2px;
  z-index: 2;
  box-shadow:
    inset 0 -8px 24px rgba(0,0,0,0.4),
    0 12px 60px rgba(184,149,106,0.15);
}
.ph-vessel::after {
  content: '';
  position: absolute;
  top: 30%;
  left: 8%;
  right: 8%;
  height: 1px;
  background: rgba(240,232,219,0.18);
}

/* ---------- HERITAGE — Roman columns silhouette ---------- */
.placeholder-heritage {
  background:
    radial-gradient(ellipse at 50% 100%, rgba(184,149,106,0.12) 0%, transparent 60%),
    linear-gradient(180deg, #14110d 0%, #2a1f15 70%, #1a1410 100%);
}
.ph-columns {
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: clamp(20px, 4vw, 60px);
  width: 80%;
  height: 60%;
  z-index: 2;
}
.ph-columns span {
  width: clamp(8px, 1.2vw, 16px);
  height: 100%;
  background: linear-gradient(180deg, rgba(184,149,106,0.04) 0%, rgba(184,149,106,0.22) 100%);
  border-top: 1px solid rgba(184,149,106,0.35);
  border-bottom: 1px solid rgba(184,149,106,0.45);
}
.ph-arches {
  position: absolute;
  left: 10%; right: 10%;
  top: 38%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(184,149,106,0.3), transparent);
  z-index: 2;
}

/* ---------- SOAK — concentric water rings ---------- */
.placeholder-soak {
  background:
    radial-gradient(circle at 50% 55%, #3a2418 0%, #1c1410 70%);
}
.ph-rings {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 70%;
  aspect-ratio: 1;
  border-radius: 50%;
  border: 1px solid rgba(184,149,106,0.5);
  box-shadow:
    0 0 0 24px rgba(184,149,106,0.06),
    0 0 0 48px rgba(184,149,106,0.04),
    0 0 0 96px rgba(184,149,106,0.02),
    inset 0 0 60px rgba(0,0,0,0.6),
    inset 0 0 0 12px rgba(184,149,106,0.08);
  z-index: 2;
}
.ph-rings::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 30%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(184,149,106,0.18), transparent 70%);
}

/* ---------- PLUNGE — square vessel, cool blue ---------- */
.placeholder-plunge {
  background:
    radial-gradient(ellipse at 50% 50%, rgba(110,154,171,0.15) 0%, transparent 70%),
    linear-gradient(180deg, #0a0e10 0%, #1a2226 60%, #0a0e10 100%);
}
.ph-vessel-cold {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 55%;
  aspect-ratio: 1;
  border: 1px solid rgba(180,210,225,0.35);
  background: linear-gradient(180deg, rgba(110,154,171,0.18) 0%, rgba(0,0,0,0.5) 100%);
  box-shadow: inset 0 -10px 30px rgba(0,0,0,0.5);
  z-index: 2;
}
.ph-vessel-cold::after {
  content: '';
  position: absolute;
  top: 35%;
  left: 8%;
  right: 8%;
  height: 1px;
  background: rgba(220,235,245,0.4);
}
.ph-condensation {
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle at 18% 25%, rgba(220,235,245,0.4) 0.5px, transparent 1.2px),
    radial-gradient(circle at 72% 38%, rgba(220,235,245,0.3) 0.5px, transparent 1.2px),
    radial-gradient(circle at 28% 78%, rgba(220,235,245,0.35) 0.5px, transparent 1.2px),
    radial-gradient(circle at 85% 70%, rgba(220,235,245,0.25) 0.5px, transparent 1.2px),
    radial-gradient(circle at 45% 15%, rgba(220,235,245,0.3) 0.5px, transparent 1.2px);
  z-index: 2;
}

/* ---------- SWEAT — cedar planks + hot stone ---------- */
.placeholder-sweat {
  background:
    radial-gradient(ellipse at 50% 100%, rgba(220,120,60,0.3) 0%, transparent 50%),
    linear-gradient(180deg, #1a0e08 0%, #2e1812 50%, #4a2418 90%);
}
.ph-planks {
  position: absolute;
  inset: 0;
  background-image: repeating-linear-gradient(
    180deg,
    transparent 0px,
    transparent 18px,
    rgba(184,149,106,0.12) 18px,
    rgba(184,149,106,0.12) 19px
  );
  z-index: 2;
}
.ph-stone {
  position: absolute;
  left: 50%;
  bottom: 18%;
  transform: translateX(-50%);
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, #ffba6a 0%, #c8855a 40%, #6b3a1f 80%);
  box-shadow:
    0 0 40px rgba(255,160,90,0.5),
    0 0 80px rgba(255,160,90,0.3);
  z-index: 3;
}

/* ---------- PRODUCT — bath cross-section ---------- */
.placeholder-product {
  background:
    radial-gradient(ellipse at 50% 100%, rgba(184,149,106,0.15) 0%, transparent 60%),
    linear-gradient(160deg, #1a1714 0%, #2a221c 50%, #1a1410 100%);
}
.ph-section-pool {
  position: absolute;
  left: 12%;
  right: 50%;
  bottom: 32%;
  height: 36%;
  border: 1px solid rgba(184,149,106,0.4);
  background: linear-gradient(180deg, rgba(184,149,106,0.05) 0%, rgba(0,0,0,0.5) 100%);
  z-index: 2;
  box-shadow: inset 0 -8px 24px rgba(0,0,0,0.4);
}
.ph-section-pool::after {
  content: '';
  position: absolute;
  top: 22%;
  left: 6%;
  right: 6%;
  height: 1px;
  background: rgba(240,232,219,0.2);
}
.ph-section-sauna {
  position: absolute;
  right: 12%;
  left: 55%;
  bottom: 32%;
  height: 42%;
  border: 1px solid rgba(184,149,106,0.4);
  background:
    repeating-linear-gradient(180deg, transparent 0px, transparent 12px, rgba(184,149,106,0.08) 12px, rgba(184,149,106,0.08) 13px),
    linear-gradient(180deg, rgba(184,149,106,0.06) 0%, rgba(0,0,0,0.3) 100%);
  z-index: 2;
}
.ph-section-sauna::before {
  content: '';
  position: absolute;
  left: 50%;
  bottom: 20%;
  transform: translateX(-50%);
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: radial-gradient(circle, #ffba6a, #6b3a1f);
  box-shadow: 0 0 20px rgba(255,160,90,0.5);
}

/* ---------- KIT PLACEHOLDERS — top-down composition ---------- */
.placeholder-kit {
  background:
    radial-gradient(ellipse at 50% 130%, rgba(184,149,106,0.15) 0%, transparent 55%),
    linear-gradient(160deg, #1a1714 0%, #2a221c 100%);
  display: flex;
  align-items: center;
  justify-content: center;
}
.ph-kit-layout {
  position: relative;
  width: 70%;
  height: 70%;
  display: grid;
  grid-template-columns: 2fr 1fr;
  grid-template-rows: 2fr 1fr;
  gap: 6%;
  z-index: 2;
}
.ph-element {
  background: rgba(184,149,106,0.08);
  border: 1px solid rgba(184,149,106,0.35);
  box-shadow: inset 0 -4px 12px rgba(0,0,0,0.3);
}
.ph-pool-sm,
.ph-pool-md,
.ph-pool-lg {
  grid-column: 1 / 2;
  grid-row: 1 / 3;
  background:
    radial-gradient(ellipse at center, rgba(184,149,106,0.18), rgba(0,0,0,0.4));
}
.ph-plunge-sm,
.ph-plunge-md,
.ph-plunge-lg {
  grid-column: 2 / 3;
  grid-row: 1 / 2;
  background:
    radial-gradient(ellipse at center, rgba(110,154,171,0.18), rgba(0,0,0,0.4));
  border-color: rgba(110,154,171,0.35);
}
.ph-sauna-sm,
.ph-sauna-md,
.ph-sauna-lg {
  grid-column: 2 / 3;
  grid-row: 2 / 3;
  background:
    repeating-linear-gradient(90deg, transparent 0px, transparent 8px, rgba(184,149,106,0.08) 8px, rgba(184,149,106,0.08) 9px),
    rgba(80,40,20,0.4);
}
.ph-layout-03 {
  grid-template-columns: 2fr 1.5fr 1fr;
  grid-template-rows: 2fr 1fr;
}
.ph-layout-03 .ph-pool-lg {
  grid-column: 1 / 2;
  grid-row: 1 / 3;
}
.ph-layout-03 .ph-plunge-lg {
  grid-column: 2 / 3;
  grid-row: 1 / 2;
}
.ph-layout-03 .ph-sauna-lg {
  grid-column: 3 / 4;
  grid-row: 1 / 3;
}
.ph-deck {
  grid-column: 2 / 4;
  grid-row: 2 / 3;
  background: rgba(184,149,106,0.04);
  border: 1px dashed rgba(184,149,106,0.25);
}
.ph-kit-label {
  position: absolute;
  top: 16px;
  right: 18px;
  font-family: var(--serif);
  font-size: 13px;
  letter-spacing: 0.16em;
  color: var(--accent);
  margin: 0;
  z-index: 3;
  font-weight: 300;
  font-style: italic;
}

/* ---------- HERO ---------- */
.hero {
  position: relative;
  height: 100vh;
  /* Ensures hero is tall enough that bottom-aligned content (eyebrow / h1)
     never overlaps the fixed banner + nav stack (~110px) at any viewport size. */
  min-height: max(760px, 100vh);
  overflow: hidden;
  display: flex;
  align-items: flex-end;
  padding-top: 110px; /* banner (42px) + nav (~68px) */
}
.hero-image {
  position: absolute;
  inset: -10% 0 -10% 0;
  z-index: 0;
}
.hero-image img,
.hero-image .placeholder {
  width: 100%; height: 100%;
  object-fit: cover;
  filter: brightness(0.95) saturate(1.05);
}
.hero-overlay {
  position: absolute;
  inset: 0;
  /* Middle-ground overlay — dark enough on the left/text column that the
     headline stays crisp where it crosses the bright water reflections,
     but light enough that the cedar sauna remains clearly visible. */
  background:
    linear-gradient(90deg, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0.4) 28%, rgba(0,0,0,0.18) 55%, rgba(0,0,0,0) 78%),
    linear-gradient(180deg, rgba(13,14,12,0.45) 0%, rgba(13,14,12,0.08) 30%, rgba(13,14,12,0.8) 100%);
}
.hero-content {
  position: relative;
  z-index: 2;
  padding: 0 var(--gut) 120px;
  max-width: var(--w);
  margin: 0 auto;
  width: 100%;
}
.hero-content .eyebrow {
  margin-bottom: 28px;
  font-size: 13px;
  letter-spacing: 0.24em;
}
.hero-content .display {
  margin-bottom: 32px;
  max-width: 1100px;
  /* Bigger than the global .display — the hero is the most important headline
     on the site, so it gets its own size scale. */
  font-size: clamp(44px, 5.6vw, 78px);
  line-height: 1.02;
}
.hero-content .lede {
  max-width: 580px;
  /* Slightly larger than global .lede so the body copy reads from across the
     room, not just up close. */
  font-size: clamp(18px, 1.55vw, 22px);
  line-height: 1.55;
  opacity: 1;
}
/* Stronger drop-shadow on hero text — keeps every word crisp even when it
   overlaps the bright water/pool reflections in the background photo. */
.hero-content .eyebrow,
.hero-content .display,
.hero-content .lede {
  text-shadow:
    0 1px 30px rgba(0, 0, 0, 0.85),
    0 2px 8px rgba(0, 0, 0, 0.5);
}
.hero-content .lede { margin-bottom: 40px; }

.hero-actions { display: flex; gap: 16px; flex-wrap: wrap; }
/* Tertiary "or get a free render" line — small, quieter than the primary CTAs */
.hero-tertiary {
  margin-top: 18px;
  font-size: 13px;
  color: var(--paper);
  opacity: 0.78;
  letter-spacing: 0.01em;
  text-shadow: 0 1px 16px rgba(0,0,0,0.55);
}
.hero-tertiary a {
  color: var(--accent);
  border-bottom: 1px dotted currentColor;
  margin-left: 6px;
  padding-bottom: 1px;
  transition: opacity 0.3s;
}
.hero-tertiary a:hover { opacity: 0.7; }
.hero-lede strong { color: var(--accent); font-weight: 500; }
.lede strong { color: var(--accent); font-weight: 500; }

/* Refined hero specs — Aesop-style label/value strip */
.hero-specs {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  margin: 56px 0 0;
  padding: 28px 0 0;
  border-top: 1px solid rgba(240, 232, 219, 0.15);
  max-width: 640px;
}
.hero-specs > div {
  padding-right: 24px;
  border-right: 1px solid rgba(240, 232, 219, 0.08);
}
.hero-specs > div:last-child {
  border-right: none;
  padding-right: 0;
}
.hero-specs dt {
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 500;
  margin-bottom: 8px;
}
.hero-specs dd {
  font-family: var(--serif);
  font-size: clamp(16px, 1.4vw, 20px);
  color: var(--paper);
  margin: 0;
  font-weight: 400;
  letter-spacing: -0.005em;
  font-style: italic;
}
@media (max-width: 720px) {
  .hero-specs {
    grid-template-columns: 1fr 1fr;
    gap: 20px 0;
  }
  .hero-specs > div:nth-child(2) { border-right: none; padding-right: 0; }
}

.scroll-cue {
  position: absolute;
  bottom: 40px; right: var(--gut);
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  opacity: 0.7;
}
.scroll-line {
  width: 60px; height: 1px;
  background: var(--paper);
  position: relative;
  overflow: hidden;
}
.scroll-line::after {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--accent);
  transform: translateX(-100%);
  animation: scrollLine 2.4s cubic-bezier(0.5, 0, 0.5, 1) infinite;
}
@keyframes scrollLine {
  0%   { transform: translateX(-100%); }
  50%  { transform: translateX(0); }
  100% { transform: translateX(100%); }
}

/* ---------- REVEAL ANIMATIONS ----------
   Defensive: only hide if JS has loaded and added .js to <html>.
   If JS fails, content stays visible (no opacity:0). */
.js .reveal {
  opacity: 0;
  transform: translateY(40px);
  transition:
    opacity 1.1s cubic-bezier(0.2, 0.8, 0.2, 1),
    transform 1.1s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.js .reveal.in {
  opacity: 1;
  transform: translateY(0);
}
/* If JS hasn't loaded after 3s, force everything visible */
@media (prefers-reduced-motion: no-preference) {
  .reveal {
    animation: fail-safe-reveal 0s 3s forwards;
  }
}
@keyframes fail-safe-reveal {
  to { opacity: 1; transform: translateY(0); }
}

/* ---------- GENERIC [data-stagger] CHILDREN REVEAL ----------
   Any container with [data-stagger] gets its direct children faded/lifted in
   sequence (script.js IntersectionObserver adds .in to each child at 90ms apart). */
.js [data-stagger] > * {
  opacity: 0;
  transform: translateY(28px);
  transition:
    opacity 0.85s cubic-bezier(0.22, 0.61, 0.36, 1),
    transform 0.85s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.js [data-stagger] > *.in {
  opacity: 1;
  transform: translateY(0);
}
/* Fail-safe: if the IntersectionObserver hasn't added .in within 3s, force
   the staggered children visible so they never get stuck off-screen. */
@media (prefers-reduced-motion: no-preference) {
  .js [data-stagger] > * {
    animation: stagger-failsafe 0s 3s forwards;
  }
}
@keyframes stagger-failsafe {
  to { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .js [data-stagger] > * { opacity: 1; transform: none; transition: none; animation: none; }
}

/* ---------- HERO HEADLINE — WORD-BY-WORD REVEAL ----------
   script.js wraps each word as <span.hero-word><span.hero-word-inner --i=N>.
   Inner spans rise + fade in, staggered by --i, after .hero-headline-in fires. */
.hero-content .display.hero-headline-split .hero-word {
  display: inline-block;
  overflow: hidden;
  line-height: inherit;
  vertical-align: top;
  padding-bottom: 0.06em; /* prevent descender clip */
}
.hero-content .display.hero-headline-split .hero-word-inner {
  display: inline-block;
  transform: translateY(105%) rotate(1.5deg);
  opacity: 0;
  will-change: transform, opacity;
  transition:
    transform 0.95s cubic-bezier(0.22, 0.61, 0.36, 1),
    opacity 0.85s ease;
  transition-delay: calc(var(--i, 0) * 0.06s + 0.1s);
}
.hero-content .display.hero-headline-in .hero-word-inner {
  transform: translateY(0) rotate(0);
  opacity: 1;
}
@media (prefers-reduced-motion: reduce) {
  .hero-content .display.hero-headline-split .hero-word-inner {
    transform: none;
    opacity: 1;
    transition: none;
  }
}

/* ============================================================
   DISCOVER — IMMERSIVE PRODUCT SHOWCASE
   Sits between hero and at-a-glance. Editorial product story.
   Cream paper background for visual rhythm + photo contrast.
   ============================================================ */
.discover {
  background: var(--paper);
  color: var(--ink);
  padding: clamp(120px, 14vw, 200px) 0;
  border-top: 1px solid var(--line-dark);
}

.discover-intro {
  max-width: 780px;
  margin: 0 auto clamp(72px, 9vw, 120px);
  text-align: center;
}
.discover-intro .eyebrow {
  color: var(--accent-deep);
  margin-bottom: 28px;
}
.discover-intro h2 {
  color: var(--ink);
  margin: 0 auto 24px;
  max-width: none;
}
.discover-intro h2 .muted {
  color: var(--ink-soft);
  font-style: italic;
}
.discover-lede {
  font-family: var(--serif);
  font-size: clamp(17px, 1.4vw, 21px);
  font-weight: 300;
  line-height: 1.55;
  color: var(--ink-soft);
  margin: 0 auto;
  max-width: 620px;
  letter-spacing: -0.005em;
}

/* HERO PRODUCT SHOT — large, with cinematic scale-on-scroll */
.discover-hero {
  margin: 0 0 clamp(80px, 10vw, 140px);
  position: relative;
  overflow: hidden;
  border-radius: 4px;
  aspect-ratio: 16/9;
  background: var(--ink);
  box-shadow: 0 24px 80px rgba(26, 23, 20, 0.15);
}
.discover-hero img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transform: scale(1.08);
  transition: transform 1.6s cubic-bezier(0.2, 0.8, 0.2, 1);
  will-change: transform;
}
.discover-hero.is-in-view img {
  transform: scale(1);
}
.discover-hero-cap {
  position: absolute;
  bottom: 20px;
  left: 24px;
  z-index: 2;
  font-family: var(--serif);
  font-style: italic;
  font-size: 13px;
  color: var(--paper);
  padding: 8px 14px;
  background: rgba(13, 12, 10, 0.55);
  backdrop-filter: blur(8px);
  border-radius: 999px;
  border: 1px solid rgba(245, 241, 234, 0.1);
}

/* 3-CARD EDITORIAL GRID — alternating image / text */
.discover-grid {
  display: flex;
  flex-direction: column;
  gap: clamp(80px, 10vw, 140px);
  margin-bottom: clamp(80px, 10vw, 140px);
}
.discover-card {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(40px, 6vw, 96px);
  align-items: center;
  margin: 0;
}
.discover-card-reverse { direction: rtl; }
.discover-card-reverse > * { direction: ltr; }

.discover-card-img {
  aspect-ratio: 4/3;
  overflow: hidden;
  border-radius: 4px;
  background: var(--ink);
  box-shadow: 0 16px 48px rgba(26, 23, 20, 0.12);
  position: relative;
}
.discover-card-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.2s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.discover-card:hover .discover-card-img img { transform: scale(1.04); }

.discover-card figcaption { padding: 16px 0; }
.discover-card-num {
  font-family: var(--serif);
  font-style: italic;
  font-size: 13px;
  letter-spacing: 0.32em;
  color: var(--accent-deep);
  margin: 0 0 24px;
  font-weight: 400;
}
.discover-card h3 {
  font-family: var(--serif);
  font-size: clamp(28px, 3vw, 40px);
  font-weight: 300;
  letter-spacing: -0.02em;
  line-height: 1.05;
  color: var(--ink);
  margin: 0 0 20px;
}
.discover-card p {
  font-size: clamp(15px, 1.2vw, 17px);
  line-height: 1.65;
  color: var(--ink-soft);
  margin: 0;
}
.discover-card p strong { color: var(--accent-deep); font-weight: 500; }

/* MATERIALS STRIP */
.discover-materials {
  border-top: 1px solid var(--line-dark);
  padding-top: clamp(48px, 6vw, 72px);
}
.discover-materials .eyebrow {
  color: var(--accent-deep);
  margin-bottom: 36px;
  text-align: center;
}
.discover-materials ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 0;
  border-top: 1px solid var(--line-dark);
}
.discover-materials li {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 28px 20px;
  border-right: 1px solid var(--line-dark);
  border-bottom: 1px solid var(--line-dark);
}
.discover-materials li:last-child { border-right: none; }
.m-name {
  font-family: var(--serif);
  font-size: clamp(15px, 1.2vw, 18px);
  color: var(--ink);
  font-weight: 400;
  letter-spacing: -0.01em;
  line-height: 1.2;
}
.m-detail {
  font-size: 11.5px;
  color: var(--ink-soft);
  letter-spacing: 0.04em;
  line-height: 1.4;
}

@media (max-width: 960px) {
  .discover-card { grid-template-columns: 1fr; gap: 32px; }
  .discover-card-reverse { direction: ltr; }
  .discover-materials ul { grid-template-columns: 1fr 1fr; }
  .discover-materials li:nth-child(2n) { border-right: none; }
}
@media (max-width: 560px) {
  .discover-materials ul { grid-template-columns: 1fr; }
  .discover-materials li { border-right: none !important; }
}

/* ============================================================
   TRUST STRIP — 4 credibility signals below kits
   ============================================================ */
.trust-strip {
  background: var(--bg-warm);
  padding: clamp(40px, 5vw, 64px) 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.trust-strip-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
}
.trust-strip-list li {
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: center;
  text-align: center;
  padding: 20px 16px;
  border-right: 1px solid var(--line);
}
.trust-strip-list li:last-child { border-right: none; }

.ts-num {
  font-family: var(--serif);
  font-size: clamp(28px, 3.2vw, 44px);
  font-weight: 300;
  letter-spacing: -0.02em;
  color: var(--accent);
  line-height: 1;
}
.ts-label {
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 500;
}

@media (max-width: 720px) {
  .trust-strip-list { grid-template-columns: 1fr 1fr; }
  .trust-strip-list li:nth-child(2n) { border-right: none; }
  .trust-strip-list li:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
}

/* ============================================================
   TESTIMONIALS — early social proof
   ============================================================ */
.testimonials {
  background: var(--bg);
  padding: clamp(120px, 14vw, 180px) 0;
  border-bottom: 1px solid var(--line);
}

/* ---------- THE RITUAL — Lifestyle gallery (local-SEO body content) ---------- */
.ritual-gallery {
  background: var(--bg);
  padding: clamp(100px, 12vw, 160px) 0;
  border-bottom: 1px solid var(--line);
}
.ritual-gallery .eyebrow { color: var(--accent); }
.ritual-lede {
  max-width: 760px;
  font-size: clamp(15px, 1.15vw, 17px);
  color: var(--muted);
  margin: 18px 0 56px;
  line-height: 1.7;
}
.ritual-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  grid-template-rows: auto auto;
  gap: 18px;
}
.ritual-figure {
  position: relative;
  margin: 0;
  overflow: hidden;
  border-radius: 6px;
  background: var(--line);
}
.ritual-figure img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  aspect-ratio: 16 / 10;
  transition: transform 0.8s ease;
}
.ritual-figure:hover img { transform: scale(1.03); }
.ritual-figure-wide {
  grid-row: 1 / 3;
}
.ritual-figure-wide img { aspect-ratio: 4 / 5; }
.ritual-figure figcaption {
  position: absolute;
  bottom: 14px;
  left: 18px;
  right: 18px;
  font-family: var(--serif, "Fraunces", serif);
  font-style: italic;
  font-size: 14px;
  color: #fff;
  text-shadow: 0 1px 12px rgba(0,0,0,0.6);
}
.ritual-footnote {
  margin-top: 28px;
  font-size: 13px;
  color: var(--muted);
}
.ritual-footnote a {
  color: var(--accent);
  border-bottom: 1px dotted currentColor;
}
@media (max-width: 760px) {
  .ritual-grid {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
  }
  .ritual-figure-wide { grid-row: auto; }
  .ritual-figure-wide img,
  .ritual-figure img { aspect-ratio: 16 / 10; }
}
.testimonials .eyebrow {
  color: var(--accent);
  margin-bottom: 20px;
}
.testimonials h2 {
  color: var(--paper);
  margin: 0 0 clamp(60px, 8vw, 96px);
  max-width: 720px;
}
.testimonial-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}
.testimonial-grid-four {
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  max-width: 1080px;
  margin: 0 auto;
}
@media (max-width: 720px) {
  .testimonial-grid-four { grid-template-columns: 1fr; }
}
.testimonial {
  margin: 0;
  padding: 36px 32px 32px;
  background: rgba(245, 241, 234, 0.025);
  border: 1px solid var(--line);
  border-radius: 4px;
  display: flex;
  flex-direction: column;
  gap: 24px;
  transition: border-color 0.4s, transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.testimonial:hover {
  border-color: rgba(184, 149, 106, 0.4);
  transform: translateY(-3px);
}
.testimonial blockquote {
  margin: 0;
  font-family: var(--serif);
  font-size: clamp(16px, 1.3vw, 19px);
  font-weight: 300;
  line-height: 1.55;
  color: var(--paper);
  font-style: italic;
  letter-spacing: -0.005em;
  position: relative;
  padding-top: 24px;
}
.testimonial blockquote::before {
  content: '"';
  position: absolute;
  top: -8px;
  left: -4px;
  font-family: var(--serif);
  font-size: 56px;
  color: var(--accent);
  line-height: 1;
  font-style: normal;
  opacity: 0.6;
}
.testimonial figcaption {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding-top: 20px;
  border-top: 1px solid var(--line);
  margin-top: auto;
}
.t-name {
  font-family: var(--serif);
  font-size: 15px;
  color: var(--paper);
  font-weight: 400;
  letter-spacing: -0.005em;
}
.t-role {
  font-size: 11.5px;
  color: var(--muted);
  letter-spacing: 0.02em;
}
.testimonials-footnote {
  margin: 40px auto 0;
  text-align: center;
  font-size: 12px;
  color: var(--muted);
  font-style: italic;
  max-width: 640px;
}
@media (max-width: 960px) {
  .testimonial-grid { grid-template-columns: 1fr; }
}

/* ============================================================
   FAQ — accordion w/ FAQPage schema below
   ============================================================ */
.faq {
  background: var(--paper);
  color: var(--ink);
  padding: clamp(120px, 14vw, 180px) 0;
  border-top: 1px solid var(--line-dark);
}
.faq .eyebrow {
  color: var(--accent-deep);
  margin-bottom: 20px;
}
.faq h2 {
  color: var(--ink);
  margin: 0 0 clamp(48px, 6vw, 72px);
  max-width: 720px;
}
.faq h2 .muted {
  color: var(--ink-soft);
  font-style: italic;
}
.faq-list {
  max-width: 880px;
  margin: 0 auto;
}
.faq-item {
  border-top: 1px solid var(--line-dark);
  padding: 0;
}
.faq-item:last-child {
  border-bottom: 1px solid var(--line-dark);
}
.faq-item summary {
  list-style: none;
  cursor: pointer;
  padding: 28px 48px 28px 0;
  font-family: var(--serif);
  font-size: clamp(17px, 1.4vw, 22px);
  font-weight: 400;
  color: var(--ink);
  letter-spacing: -0.01em;
  position: relative;
  transition: color 0.3s;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::marker { display: none; content: ''; }
.faq-item summary:hover { color: var(--accent-deep); }
.faq-item summary::after {
  content: '+';
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  font-family: var(--serif);
  font-size: 28px;
  font-weight: 300;
  color: var(--accent-deep);
  transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
  line-height: 1;
}
.faq-item[open] summary::after {
  content: '\2212'; /* em-dash style minus */
  transform: translateY(-50%) rotate(180deg);
  color: var(--accent-deep);
}
.faq-body {
  padding: 0 56px 32px 0;
  animation: faqOpen 0.4s ease-out;
}
@keyframes faqOpen {
  from { opacity: 0; transform: translateY(-8px); }
  to { opacity: 1; transform: translateY(0); }
}
.faq-body p {
  margin: 0;
  font-size: clamp(15px, 1.2vw, 17px);
  line-height: 1.7;
  color: var(--ink-soft);
}
.faq-body p strong {
  color: var(--ink);
  font-weight: 500;
}

/* ---------- AT A GLANCE — PRODUCT EXPLAINER ---------- */
.glance {
  padding: clamp(120px, 14vw, 180px) 0;
  background: var(--paper);
  color: var(--ink);
  border-top: 1px solid var(--line);
}
.glance .eyebrow {
  color: var(--accent-deep);
  margin-bottom: 24px;
}
.glance h2 {
  color: var(--ink);
  margin-bottom: 32px;
  max-width: 1100px;
}
.glance h2 .muted { color: var(--ink-soft); font-style: italic; }

.glance-lede {
  font-size: clamp(17px, 1.3vw, 21px);
  line-height: 1.65;
  color: var(--ink-soft);
  font-family: var(--serif);
  font-weight: 300;
  max-width: 720px;
  margin-bottom: clamp(60px, 8vw, 100px);
}

.glance-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  border-top: 1px solid var(--line-dark);
  margin-bottom: 60px;
}
.glance-col {
  padding: 48px 32px 48px 0;
  border-right: 1px solid var(--line-dark);
}
.glance-col:last-child {
  border-right: none;
  padding-right: 0;
  padding-left: 32px;
}
.glance-col-mid {
  padding-left: 32px;
}
.glance-col-money {
  background: linear-gradient(180deg, rgba(184,149,106,0.06) 0%, transparent 80%);
}
.glance-label {
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--accent-deep);
  margin-bottom: 16px;
  font-weight: 500;
}
.glance-col h3 {
  font-family: var(--serif);
  font-size: clamp(28px, 2.6vw, 36px);
  font-weight: 300;
  letter-spacing: -0.02em;
  line-height: 1.05;
  margin-bottom: 28px;
  color: var(--ink);
}
.glance-col ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
.glance-col li {
  font-size: 14px;
  line-height: 1.55;
  color: var(--ink-soft);
  padding: 8px 0;
  border-bottom: 1px solid rgba(26,23,20,0.06);
}
.glance-col li:last-child { border-bottom: none; }
.glance-col li strong {
  color: var(--ink);
  font-weight: 500;
}
.glance-divider {
  height: 12px;
  padding: 0 !important;
  border-bottom: none !important;
  border-top: 1px solid var(--accent-deep) !important;
  margin: 8px 0 4px;
}

/* ============================================================
   INTERACTIVE PLAN VIEW — top-down architectural diagram
   Hovering each layer column dims the others in the SVG.
   ============================================================ */
.plan-view {
  margin: 0 0 clamp(56px, 7vw, 88px);
  padding: 40px 32px 32px;
  background: var(--paper);
  border: 1px solid var(--line-dark);
  border-radius: 4px;
  box-shadow: 0 1px 2px rgba(26,23,20,0.04), 0 12px 40px rgba(26,23,20,0.05);
  position: relative;
}

.plan-caption {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 24px;
  padding: 0 4px;
}
.plan-eyebrow {
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent-deep);
  font-weight: 500;
}
.plan-hover-hint {
  font-family: var(--serif);
  font-style: italic;
  font-size: 12.5px;
  color: var(--ink-soft);
  opacity: 0.75;
}

.plan-svg {
  width: 100%;
  height: auto;
  display: block;
  max-height: 460px;
}

/* Layer dimming logic — driven by data-active on .plan-view */
.plan-layer {
  transition: opacity 0.5s cubic-bezier(0.2, 0.8, 0.2, 1);
  opacity: 1;
}

/* When hovering Layer 01: dim 02 + 03 */
.plan-view[data-active="01"] .plan-layer-02,
.plan-view[data-active="01"] .plan-layer-03 {
  opacity: 0.12;
}

/* When hovering Layer 02: show 01 + 02 fully, dim 03 */
.plan-view[data-active="02"] .plan-layer-03 {
  opacity: 0.12;
}
.plan-view[data-active="02"] .plan-layer-02-only {
  opacity: 1;
}

/* When hovering Layer 03 OR default (all): show everything, hide the Layer-02-only baseline (covered by Layer 03's bigger version) */
.plan-view[data-active="03"] .plan-layer-02-only,
.plan-view[data-active="all"] .plan-layer-02-only {
  opacity: 0;
}

/* Sauna label changes by layer */
.plan-view[data-active="01"] .plan-sauna-label,
.plan-view[data-active="02"] .plan-sauna-label { content: "" }

@media (max-width: 720px) {
  .plan-view { padding: 24px 12px 16px; }
  .plan-hover-hint { display: none; }
  .plan-svg { max-height: 320px; }
}

/* ---------- TIMELINE STRIP — full process flow ---------- */
.timeline-strip {
  margin-top: clamp(60px, 8vw, 96px);
  padding-top: clamp(56px, 7vw, 80px);
  border-top: 1px solid var(--line-dark);
}
.timeline-label {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(20px, 2vw, 28px);
  color: var(--ink);
  margin: 0 0 48px;
  letter-spacing: -0.01em;
  font-weight: 300;
  max-width: 640px;
}

.timeline-track {
  display: grid;
  grid-template-columns: 1fr auto 1fr auto 1fr auto 1fr;
  align-items: stretch;
  gap: 0;
}

.timeline-phase {
  padding: 28px 24px;
  border: 1px solid var(--line-dark);
  background: rgba(13, 12, 10, 0.02);
  border-radius: 4px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  position: relative;
}
.timeline-phase-final {
  background: linear-gradient(180deg, rgba(184, 149, 106, 0.1) 0%, rgba(184, 149, 106, 0.02) 100%);
  border-color: rgba(184, 149, 106, 0.4);
}
.timeline-num {
  font-family: var(--serif);
  font-style: italic;
  font-size: 13px;
  letter-spacing: 0.32em;
  color: var(--accent-deep);
  margin: 0 0 16px;
  font-weight: 400;
}
.timeline-phase-name {
  font-family: var(--serif);
  font-size: 22px;
  font-weight: 400;
  letter-spacing: -0.015em;
  color: var(--ink);
  margin: 0 0 4px;
  line-height: 1.1;
}
.timeline-phase-time {
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent-deep);
  margin: 0 0 14px;
  font-weight: 500;
}
.timeline-phase-detail {
  font-size: 13px;
  color: var(--ink-soft);
  margin: auto 0 0;
  line-height: 1.45;
  font-style: italic;
}

.timeline-arrow {
  width: 28px;
  align-self: center;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--accent-deep);
  font-size: 16px;
  opacity: 0.5;
  position: relative;
}
.timeline-arrow::after {
  content: '';
  width: 100%;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--accent-deep) 50%, transparent);
}

.timeline-footnote {
  margin: 36px 0 0;
  font-size: 13.5px;
  line-height: 1.65;
  color: var(--ink-soft);
  max-width: 760px;
}
.timeline-footnote em {
  font-style: italic;
}
.timeline-footnote strong {
  color: var(--ink);
  font-weight: 500;
}

@media (max-width: 900px) {
  .timeline-track {
    grid-template-columns: 1fr;
    gap: 8px;
  }
  .timeline-arrow { display: none; }
  .timeline-phase { padding: 20px; }
}

.glance-cta {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  padding-top: 48px;
  border-top: 1px solid var(--line-dark);
  margin-top: clamp(48px, 6vw, 72px);
}
.glance-cta .btn-ghost {
  color: var(--ink);
  border-color: var(--ink);
}
.glance-cta .btn-ghost:hover {
  background: rgba(26,23,20,0.06);
  border-color: var(--accent-deep);
}

@media (max-width: 900px) {
  .glance-grid { grid-template-columns: 1fr; }
  .glance-col {
    border-right: none;
    border-bottom: 1px solid var(--line-dark);
    padding: 40px 0 !important;
  }
}

/* ---------- TWO PATHS ---------- */
.paths {
  padding: clamp(120px, 14vw, 180px) 0;
  background: var(--bg);
  border-top: 1px solid var(--line);
}
.paths .eyebrow { margin-bottom: 24px; }
.paths h2 { margin-bottom: 80px; max-width: 1100px; }

.paths-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
}
.paths-grid-three {
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.path-card-str {
  background: linear-gradient(180deg, rgba(110, 154, 171, 0.06) 0%, rgba(110, 154, 171, 0.02) 100%);
  border-color: rgba(110, 154, 171, 0.2);
}
.path-card-str .path-num span { color: var(--plunge); }
.path-card-str .path-list li::before { background: var(--plunge); }
.path-card-str .path-body strong,
.path-card-str .path-body em { color: var(--plunge); font-style: italic; }
.path-card-str:hover { border-color: rgba(110, 154, 171, 0.45); }

@media (max-width: 1080px) {
  .paths-grid-three { grid-template-columns: 1fr; }
}
.path-card {
  position: relative;
  padding: 56px 44px 48px;
  background: rgba(245,241,234,0.025);
  border: 1px solid var(--line);
  border-radius: 4px;
  transition: border-color 0.4s, transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.path-card:hover {
  border-color: rgba(200,165,114,0.4);
  transform: translateY(-4px);
}
.path-card-host {
  background: linear-gradient(180deg, rgba(200,165,114,0.06) 0%, rgba(200,165,114,0.02) 100%);
  border-color: rgba(200,165,114,0.2);
}
.path-num {
  display: flex;
  align-items: baseline;
  gap: 14px;
  margin-bottom: 32px;
}
.path-num span {
  font-family: var(--serif);
  font-size: 36px;
  font-weight: 300;
  color: var(--accent);
  letter-spacing: 0.08em;
}
.path-num p {
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0;
}
.path-card h3 {
  font-family: var(--serif);
  font-size: clamp(34px, 3.6vw, 48px);
  font-weight: 300;
  letter-spacing: -0.02em;
  line-height: 1;
  margin-bottom: 24px;
}
.path-body {
  font-size: 15.5px;
  line-height: 1.65;
  opacity: 0.78;
  margin-bottom: 32px;
}
.path-body strong { color: var(--accent); font-weight: 500; }
.path-list {
  list-style: none;
  padding: 24px 0;
  margin-bottom: 32px;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.path-list li {
  font-size: 13.5px;
  padding: 6px 0 6px 18px;
  position: relative;
  opacity: 0.85;
}
.path-list li::before {
  content: '';
  position: absolute;
  left: 0; top: 13px;
  width: 8px; height: 1px;
  background: var(--accent);
}
.path-cta {
  color: var(--paper);
  border-color: var(--paper);
}
.path-cta:hover { color: var(--accent); border-color: var(--accent); }

@media (max-width: 860px) {
  .paths-grid { grid-template-columns: 1fr; }
  .path-card { padding: 40px 28px; }
}

/* ---------- MANIFESTO ---------- */
.manifesto {
  padding: clamp(140px, 18vw, 240px) 0;
  background: var(--bg);
  border-top: 1px solid var(--line);
}
.manifesto .eyebrow { margin-bottom: 32px; }
.manifesto h2 { margin-bottom: 80px; max-width: 1100px; }
.manifesto-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(40px, 6vw, 100px);
  max-width: 1100px;
  margin-left: auto;
}
.manifesto-grid p {
  font-size: clamp(16px, 1.2vw, 19px);
  line-height: 1.65;
  opacity: 0.78;
}
.manifesto-grid p em { color: var(--accent); font-style: italic; }
@media (max-width: 760px) {
  .manifesto-grid { grid-template-columns: 1fr; }
}

/* ---------- ON HERITAGE — EDITORIAL SECTION ---------- */
.heritage {
  position: relative;
  background: var(--bg-warm);
  border-top: 1px solid var(--line);
  overflow: hidden;
}
.heritage-image {
  position: relative;
  height: 70vh;
  min-height: 480px;
  overflow: hidden;
}
.heritage-image img,
.heritage-image .placeholder {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.heritage-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(26,23,20,0.4) 0%, rgba(26,23,20,0) 50%, rgba(26,23,20,1) 100%);
}
.heritage-content {
  max-width: 720px;
  margin: -120px auto 0;
  padding: 0 var(--gut) clamp(120px, 16vw, 200px);
  position: relative;
  z-index: 2;
  text-align: center;
}
.heritage-content .eyebrow {
  margin-bottom: 32px;
  color: var(--accent);
}
.heritage-content h2 {
  margin-bottom: 72px;
  line-height: 1;
}
.heritage-body {
  text-align: left;
  max-width: 580px;
  margin: 0 auto;
}
.heritage-body p {
  font-family: var(--serif);
  font-size: clamp(17px, 1.4vw, 21px);
  line-height: 1.65;
  font-weight: 300;
  margin-bottom: 28px;
  color: var(--paper);
  opacity: 0.86;
  font-style: normal;
  letter-spacing: -0.005em;
}
.heritage-body p em {
  color: var(--accent);
  font-style: italic;
  font-weight: 400;
}
.heritage-rule {
  border: none;
  width: 48px;
  height: 1px;
  background: var(--accent);
  margin: 56px auto 56px;
  display: block;
  opacity: 0.6;
}
.heritage-coda {
  text-align: center;
  font-family: var(--serif);
  font-style: normal;
  font-size: clamp(20px, 1.8vw, 26px);
  line-height: 1.4;
  letter-spacing: -0.01em;
  color: var(--paper);
  font-weight: 300;
}
.heritage-coda em {
  color: var(--accent);
  font-style: italic;
  font-weight: 400;
}

@media (max-width: 640px) {
  .heritage-image { height: 50vh; }
  .heritage-content { margin-top: -80px; }
}

/* ---------- RITUAL — SIMPLE 3-COL GRID ---------- */
.ritual-grid {
  background: var(--bg);
  padding: clamp(120px, 14vw, 180px) 0;
  border-top: 1px solid var(--line);
}
.ritual-grid .eyebrow { margin-bottom: 24px; }
.ritual-grid h2 { margin-bottom: clamp(60px, 8vw, 100px); }

.ritual-three {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
}
.ritual-step {
  border: 1px solid var(--line);
  border-radius: 4px;
  overflow: hidden;
  background: rgba(245, 241, 234, 0.02);
  transition: border-color 0.4s, transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.ritual-step:hover {
  transform: translateY(-4px);
  border-color: rgba(184, 149, 106, 0.35);
}
.ritual-mini {
  aspect-ratio: 4/3;
  width: 100%;
}
.ritual-step > p { padding: 0 28px; margin-bottom: 8px; }
.ritual-step > p:last-child {
  padding-bottom: 32px;
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--paper);
  opacity: 0.78;
}
.ritual-num {
  font-family: var(--serif);
  font-size: 26px;
  font-weight: 400;
  letter-spacing: -0.01em;
  margin-top: 28px !important;
  color: var(--paper);
}
.ritual-temp {
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 16px !important;
  font-weight: 500;
}

@media (max-width: 860px) {
  .ritual-three { grid-template-columns: 1fr; }
}

/* ---------- RITUAL — HORIZONTAL SCROLL (legacy) ---------- */
.ritual {
  position: relative;
  height: 400vh;
  background: var(--bg-warm);
}
.ritual-pin {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.ritual-header {
  padding: 60px var(--gut) 20px;
  flex-shrink: 0;
}
.ritual-header .eyebrow { margin-bottom: 18px; }

.ritual-track {
  display: flex;
  gap: 32px;
  padding: 40px var(--gut);
  align-items: stretch;
  height: 70vh;
  will-change: transform;
}
.ritual-card {
  flex: 0 0 min(78vw, 760px);
  display: grid;
  grid-template-columns: 1fr 1fr;
  background: rgba(245,241,234,0.03);
  border: 1px solid var(--line);
  border-radius: 4px;
  overflow: hidden;
}
.ritual-img {
  position: relative;
  overflow: hidden;
}
.ritual-img img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 1.2s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.ritual-card:hover .ritual-img img { transform: scale(1.05); }
.ritual-text {
  padding: 48px 40px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.ritual-text-center {
  padding: 60px 40px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  width: 100%;
}
.ritual-card-final {
  grid-template-columns: 1fr;
  flex: 0 0 min(78vw, 760px);
  background: radial-gradient(ellipse at center, rgba(200,165,114,0.08) 0%, transparent 70%);
}
.step {
  font-family: var(--serif);
  font-size: 13px;
  letter-spacing: 0.4em;
  color: var(--accent);
  display: block;
  margin-bottom: 24px;
}
.ritual-text h3, .ritual-text-center h3 {
  font-family: var(--serif);
  font-size: clamp(48px, 5.5vw, 76px);
  font-weight: 300;
  letter-spacing: -0.02em;
  line-height: 1;
  margin-bottom: 16px;
}
.temp {
  font-size: 13px;
  letter-spacing: 0.14em;
  color: var(--muted);
  margin-bottom: 28px;
}
.ritual-text p:last-child, .ritual-text-center p:last-child {
  font-size: 15px;
  line-height: 1.65;
  opacity: 0.78;
}
.ritual-text-center em { color: var(--accent); }

@media (max-width: 760px) {
  .ritual { height: 500vh; }
  .ritual-card { grid-template-columns: 1fr; flex: 0 0 88vw; }
  .ritual-img { height: 220px; }
}

/* ---------- PRODUCT ---------- */
.product {
  position: relative;
  background: var(--paper);
  color: var(--ink);
  padding: clamp(120px, 14vw, 200px) 0;
  border-top: 1px solid var(--line);
}
.product-inner {
  max-width: var(--w);
  margin: 0 auto;
  padding: 0 var(--gut);
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: clamp(40px, 6vw, 100px);
  align-items: center;
}
.product-visual { position: relative; }
.product-image-wrap {
  position: relative;
  aspect-ratio: 4/5;
  overflow: hidden;
  border-radius: 2px;
  background: var(--ink);
}
.product-image-wrap img {
  width: 100%; height: 100%;
  object-fit: cover;
  transform: scale(1.1);
  transition: transform 1.4s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.product-image-wrap.in img { transform: scale(1); }

.product .eyebrow { color: var(--accent-deep); margin-bottom: 24px; }
.product h2 { color: var(--ink); margin-bottom: 60px; }
.product h2 .muted { color: var(--ink-soft); }

.spec-list { display: flex; flex-direction: column; gap: 28px; }
.spec {
  display: grid;
  grid-template-columns: 60px 1fr;
  gap: 24px;
  padding-bottom: 28px;
  border-bottom: 1px solid var(--line-dark);
}
.spec:last-child { border-bottom: none; }
.spec-num {
  font-family: var(--serif);
  font-size: 13px;
  letter-spacing: 0.2em;
  color: var(--accent-deep);
  padding-top: 4px;
}
.spec h4 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 22px;
  margin-bottom: 6px;
  letter-spacing: -0.01em;
}
.spec p {
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--ink-soft);
}

@media (max-width: 860px) {
  .product-inner { grid-template-columns: 1fr; }
}

/* MATERIALS & PROVENANCE */
.materials {
  max-width: var(--w);
  margin: clamp(100px, 12vw, 160px) auto 0;
  padding-top: clamp(80px, 10vw, 120px);
  border-top: 1px solid var(--line-dark);
}
.materials .eyebrow {
  color: var(--accent-deep);
  margin-bottom: 48px;
  text-align: center;
}
.materials-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}
.material {
  padding: 32px 0;
  border-top: 1px solid var(--line-dark);
  text-align: left;
}
.m-label {
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent-deep);
  margin-bottom: 12px;
  font-weight: 500;
}
.material h4 {
  font-family: var(--serif);
  font-size: 24px;
  font-weight: 400;
  letter-spacing: -0.01em;
  color: var(--ink);
  line-height: 1.1;
  margin-bottom: 12px;
}
.m-source {
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--ink-soft);
  margin: 0;
}
@media (max-width: 860px) {
  .materials-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
  .materials-grid { grid-template-columns: 1fr; }
}

/* ---------- KITS ---------- */
.kits {
  background: var(--bg);
  padding: clamp(140px, 16vw, 220px) 0;
  border-top: 1px solid var(--line);
}
.section-header { margin-bottom: clamp(60px, 8vw, 100px); }
.section-header .eyebrow { margin-bottom: 24px; }

.kit-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}
.kit-card {
  position: relative;
  background: rgba(245,241,234,0.025);
  border: 1px solid var(--line);
  border-radius: 4px;
  overflow: hidden;
  transition: transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1), border-color 0.4s;
}
.kit-card:hover {
  transform: translateY(-6px);
  border-color: rgba(200,165,114,0.4);
}
.kit-image {
  aspect-ratio: 4/3;
  overflow: hidden;
  position: relative;
}
.kit-image img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 1s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.kit-tag-overlay {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 2;
  background: rgba(13, 12, 10, 0.75);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(184, 149, 106, 0.35);
  padding: 6px 12px;
  font-family: var(--serif);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
  border-radius: 999px;
  font-weight: 400;
  font-style: italic;
}
.kit-card:hover .kit-image img { transform: scale(1.06); }
.kit-meta { padding: 36px 32px 40px; }
.kit-meta h3 {
  font-family: var(--serif);
  font-size: 42px;
  font-weight: 300;
  letter-spacing: -0.02em;
  margin-bottom: 6px;
  line-height: 1;
}
.kit-no {
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 400;
  color: var(--muted);
  letter-spacing: 0.14em;
  margin-left: 8px;
  vertical-align: middle;
  text-transform: uppercase;
  white-space: nowrap;
  display: inline-block;
}
.kit-tag {
  font-size: 13px;
  color: var(--muted);
  margin-bottom: 18px;
  font-style: italic;
}
.kit-desc {
  font-size: 14px;
  line-height: 1.7;
  color: var(--muted);
  margin: 0 0 28px;
}
.kit-desc strong { color: var(--paper); font-weight: 500; }
.kit-meta ul {
  list-style: none;
  margin-bottom: 32px;
  padding: 24px 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.kit-meta li {
  font-size: 14px;
  padding: 6px 0;
  opacity: 0.82;
  position: relative;
  padding-left: 18px;
}
.kit-meta li::before {
  content: '';
  position: absolute;
  left: 0; top: 13px;
  width: 6px; height: 1px;
  background: var(--accent);
}
.kit-price {
  font-family: var(--serif);
  font-size: 14px;
  color: var(--muted);
  margin-bottom: 24px;
}
.kit-price strong {
  font-family: var(--serif);
  font-size: 26px;
  color: var(--paper);
  font-weight: 400;
  margin-left: 6px;
}

/* Custom-size availability note below the kit grid */
.kit-custom-note {
  margin-top: 48px;
  padding: 20px 24px;
  text-align: center;
  font-size: 14px;
  color: var(--muted);
  line-height: 1.7;
  border: 1px dashed rgba(184,149,106,0.35);
  border-radius: 4px;
  max-width: 760px;
  margin-left: auto;
  margin-right: auto;
}
.kit-custom-note strong {
  color: var(--paper);
  font-weight: 500;
  letter-spacing: 0.02em;
}
.kit-custom-note a {
  color: var(--accent);
  border-bottom: 1px dotted currentColor;
  margin-left: 8px;
}
.kit-card .btn-quiet {
  color: var(--paper);
  border-color: var(--paper);
}
.kit-card .btn-quiet:hover { color: var(--accent); border-color: var(--accent); }

.kit-featured {
  background: rgba(200,165,114,0.06);
  border-color: rgba(200,165,114,0.25);
}
.kit-badge {
  position: absolute;
  top: 20px; left: 20px;
  z-index: 2;
  background: var(--accent);
  color: var(--ink);
  padding: 6px 12px;
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 500;
  border-radius: 999px;
}
.kit-badge-operator {
  background: var(--plunge);
  color: var(--ink);
}
.kit-operator {
  background: linear-gradient(180deg, rgba(110, 154, 171, 0.05) 0%, rgba(110, 154, 171, 0.01) 100%);
  border-color: rgba(110, 154, 171, 0.25);
}
.kit-operator:hover { border-color: rgba(110, 154, 171, 0.5); }

@media (max-width: 960px) {
  .kit-grid { grid-template-columns: 1fr; max-width: 480px; margin: 0 auto; }
}

/* ---------- THE ATELIER — CREDIBILITY ---------- */
.atelier {
  background: var(--paper);
  color: var(--ink);
  padding: clamp(120px, 14vw, 200px) 0;
  border-top: 1px solid var(--line);
}
.atelier .eyebrow { color: var(--accent-deep); margin-bottom: 28px; }
.atelier h2 {
  color: var(--ink);
  margin-bottom: 80px;
  max-width: 1100px;
}
.atelier h2 .muted { color: var(--ink-soft); font-style: italic; }

.atelier-grid {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: clamp(40px, 6vw, 100px);
  align-items: start;
}
.atelier-body p {
  font-family: var(--serif);
  font-size: clamp(17px, 1.3vw, 21px);
  line-height: 1.65;
  color: var(--ink-soft);
  margin-bottom: 24px;
  font-weight: 300;
  letter-spacing: -0.005em;
}
.atelier-body p:last-child { margin-bottom: 0; }

.atelier-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  border-top: 1px solid var(--line-dark);
  border-left: 1px solid var(--line-dark);
}
.stat {
  padding: 32px 24px;
  border-right: 1px solid var(--line-dark);
  border-bottom: 1px solid var(--line-dark);
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.stat-num {
  font-family: var(--serif);
  font-size: clamp(32px, 3.4vw, 44px);
  font-weight: 300;
  color: var(--ink);
  letter-spacing: -0.02em;
  line-height: 1;
}
.stat-label {
  font-size: 12.5px;
  color: var(--ink-soft);
  line-height: 1.45;
  letter-spacing: 0.01em;
}

@media (max-width: 860px) {
  .atelier-grid { grid-template-columns: 1fr; }
}

/* ---------- EARN WAYS — 3 EARNING PATHS ---------- */
.earn-ways {
  padding-bottom: clamp(80px, 10vw, 140px);
  margin-bottom: clamp(80px, 10vw, 140px);
  border-bottom: 1px solid var(--line);
}
.earn-ways .eyebrow { margin-bottom: 24px; }
.earn-ways h2 { margin-bottom: clamp(60px, 8vw, 90px); }

.earn-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.earn-grid-two {
  grid-template-columns: 1fr 1fr;
  gap: 28px;
  max-width: 1200px;
  margin: 0 auto;
}
@media (max-width: 860px) {
  .earn-grid-two { grid-template-columns: 1fr; gap: 20px; }
}

/* Earn card list (benefit bullets inside each earning path card) */
.earn-card-list {
  list-style: none;
  padding: 0;
  margin: 24px 0 20px;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.earn-card-list li {
  font-size: 13.5px;
  line-height: 1.55;
  padding: 8px 0 8px 18px;
  position: relative;
  color: var(--paper);
  opacity: 0.85;
}
.earn-card-list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 14px;
  width: 8px;
  height: 1px;
  background: var(--accent);
}
.earn-card-str .earn-card-list li::before { background: var(--plunge); }

.earn-card-foot {
  font-family: var(--serif);
  font-style: italic;
  font-size: 13px;
  color: var(--muted);
  margin: 0 !important;
  letter-spacing: -0.005em;
  line-height: 1.5;
}
.earn-card {
  padding: 36px 32px 36px;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: rgba(245, 241, 234, 0.02);
  transition: border-color 0.4s, transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.earn-card:hover {
  transform: translateY(-4px);
  border-color: rgba(184, 149, 106, 0.35);
}
.earn-card-mid {
  background: linear-gradient(180deg, rgba(184,149,106,0.08) 0%, rgba(184,149,106,0.02) 100%);
  border-color: rgba(184, 149, 106, 0.3);
}
.earn-card-str {
  background: linear-gradient(180deg, rgba(110, 154, 171, 0.06) 0%, rgba(110, 154, 171, 0.02) 100%);
  border-color: rgba(110, 154, 171, 0.25);
}
.earn-num {
  font-family: var(--serif);
  font-size: 14px;
  letter-spacing: 0.2em;
  color: var(--accent);
  margin: 0 0 24px;
  font-weight: 400;
}
.earn-card-str .earn-num { color: var(--plunge); }
.earn-card h3 {
  font-family: var(--serif);
  font-size: clamp(26px, 2.4vw, 34px);
  font-weight: 300;
  letter-spacing: -0.02em;
  line-height: 1;
  margin-bottom: 16px;
}
.earn-money {
  font-family: var(--serif);
  font-size: clamp(22px, 2vw, 28px);
  color: var(--accent);
  margin: 0 0 24px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--line);
  font-weight: 300;
  line-height: 1.1;
  letter-spacing: -0.015em;
}
.earn-money strong {
  font-weight: 400;
  color: var(--accent);
}
.earn-money-sub {
  font-family: var(--sans);
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
  font-style: normal;
  margin-left: 4px;
  font-weight: 500;
}
.earn-money-line {
  font-style: italic;
  color: var(--paper);
  opacity: 0.7;
  font-size: clamp(15px, 1.2vw, 18px);
}
.earn-card-str .earn-money strong { color: var(--plunge); }
.earn-card-str .earn-money { color: var(--plunge); }
.earn-card p:last-child {
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--paper);
  opacity: 0.78;
  margin: 0;
}

@media (max-width: 860px) {
  .earn-grid { grid-template-columns: 1fr; }
}

/* ============================================================
   EARNING SCENARIOS — realistic hosting math
   ============================================================ */
.scenarios {
  margin-top: clamp(72px, 9vw, 112px);
  padding-top: clamp(56px, 7vw, 88px);
  border-top: 1px solid var(--line);
}
.scenarios-header {
  max-width: 760px;
  margin-bottom: clamp(48px, 6vw, 72px);
}
.scenarios-header .eyebrow {
  color: var(--accent);
  margin-bottom: 16px;
}
.scenarios-header h3 {
  font-family: var(--serif);
  font-size: clamp(28px, 3vw, 42px);
  font-weight: 300;
  letter-spacing: -0.02em;
  color: var(--paper);
  margin: 0 0 20px;
  line-height: 1.05;
}
.scenarios-lede {
  font-size: 14.5px;
  line-height: 1.65;
  color: var(--paper);
  opacity: 0.75;
  margin: 0;
}
.scenarios-lede strong {
  color: var(--accent);
  font-weight: 500;
}

.scenarios-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.scenario {
  padding: 40px 32px 36px;
  border-right: 1px solid var(--line);
  display: flex;
  flex-direction: column;
}
.scenario:last-child { border-right: none; }
.scenario-mid {
  background: linear-gradient(180deg, rgba(184, 149, 106, 0.06) 0%, transparent 100%);
}
.scenario-operator {
  background: linear-gradient(180deg, rgba(110, 154, 171, 0.06) 0%, transparent 100%);
}

.scenario-tier {
  font-family: var(--serif);
  font-style: italic;
  font-size: 13px;
  letter-spacing: 0.18em;
  color: var(--accent);
  margin: 0 0 28px;
  font-weight: 400;
  text-transform: uppercase;
}
.scenario-operator .scenario-tier { color: var(--plunge); }

.scenario-net {
  font-family: var(--serif);
  font-size: clamp(28px, 3vw, 40px);
  color: var(--paper);
  margin: 0 0 32px;
  font-weight: 300;
  line-height: 1;
  letter-spacing: -0.02em;
}
.scenario-net strong {
  color: var(--accent);
  font-weight: 400;
}
.scenario-operator .scenario-net strong { color: var(--plunge); }
.scenario-net span {
  display: block;
  font-family: var(--sans);
  font-style: normal;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
  margin-top: 8px;
  font-weight: 500;
}

.scenario-math {
  margin: 0 0 24px;
  padding-top: 24px;
  border-top: 1px solid var(--line);
}
.scenario-math > div {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 6px 0;
  border-bottom: 1px solid rgba(245, 241, 234, 0.05);
}
.scenario-math > div:last-child { border-bottom: none; }
.scenario-math dt {
  font-size: 12px;
  color: var(--muted);
  letter-spacing: 0.02em;
}
.scenario-math dd {
  font-family: var(--serif);
  font-size: 14px;
  color: var(--paper);
  margin: 0;
  font-weight: 400;
  letter-spacing: -0.005em;
}

.scenario-payback {
  margin: auto 0 0;
  padding-top: 20px;
  border-top: 1px solid rgba(184, 149, 106, 0.18);
  font-size: 13px;
  color: var(--muted);
  letter-spacing: 0.02em;
}
.scenario-payback strong {
  font-family: var(--serif);
  color: var(--paper);
  font-weight: 400;
  font-style: italic;
}

.scenarios-footnote {
  margin: 32px 0 0;
  font-size: 12px;
  line-height: 1.6;
  color: var(--muted);
  max-width: 820px;
}
.scenarios-footnote em { font-style: italic; }

@media (max-width: 900px) {
  .scenarios-grid { grid-template-columns: 1fr; }
  .scenario {
    border-right: none;
    border-bottom: 1px solid var(--line);
  }
  .scenario:last-child { border-bottom: none; }
}

/* ---------- VESTA CIRCLE ---------- */
.circle {
  background: linear-gradient(180deg, var(--bg) 0%, var(--bg-warm) 100%);
  padding: clamp(140px, 16vw, 220px) 0;
  border-top: 1px solid var(--line);
}
.circle-inner {
  max-width: var(--w);
  margin: 0 auto;
  padding: 0 var(--gut);
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: clamp(40px, 6vw, 100px);
  align-items: center;
  margin-bottom: clamp(80px, 12vw, 140px);
}
.circle-text .eyebrow { margin-bottom: 24px; }
.circle-text h2 { margin-bottom: 32px; }
.circle-text p {
  font-size: clamp(15px, 1.15vw, 18px);
  line-height: 1.65;
  opacity: 0.78;
  margin-bottom: 24px;
  max-width: 540px;
}
.circle-text p em { color: var(--accent); font-style: italic; }
.circle-text p:last-of-type { margin-bottom: 48px; }
.marketplace-text { /* legacy fallback */ }
.marketplace-visual { display: flex; justify-content: center; }
.circle-visual { display: flex; justify-content: center; }

/* HOW IT WORKS GRID */
.circle-how {
  padding-top: 60px;
  border-top: 1px solid var(--line);
}
.circle-how .eyebrow { margin-bottom: 40px; }
.how-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 32px;
}
.how-step { position: relative; }
.how-step .t-num {
  font-family: var(--serif);
  font-size: 13px;
  letter-spacing: 0.2em;
  color: var(--accent);
  display: block;
  margin-bottom: 20px;
}
.how-step h4 {
  font-family: var(--serif);
  font-size: 24px;
  font-weight: 400;
  letter-spacing: -0.01em;
  margin-bottom: 12px;
  line-height: 1.1;
}
.how-step p {
  font-size: 14px;
  line-height: 1.6;
  opacity: 0.72;
  margin: 0;
  max-width: none;
}
@media (max-width: 860px) {
  .how-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
  .how-grid { grid-template-columns: 1fr; }
}

/* PHONE HEADER */
.phone-header {
  padding: 0 4px 8px;
  margin-bottom: 4px;
  border-bottom: 1px solid rgba(13,14,12,0.08);
}
.phone-greeting {
  font-family: var(--serif);
  font-size: 18px;
  color: var(--ink);
  margin: 0 0 2px;
  letter-spacing: -0.01em;
}
.phone-loc {
  font-size: 11px;
  color: var(--ink-soft);
  margin: 0;
  letter-spacing: 0.02em;
}
.listing-tag-pill {
  position: absolute;
  top: 10px; left: 10px;
  background: var(--accent);
  color: var(--ink);
  padding: 4px 10px;
  font-size: 9px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 600;
  border-radius: 999px;
  z-index: 1;
}
.listing-image { position: relative; }

/* legacy marketplace name compatibility */
.marketplace { background: var(--bg); padding: 0; border: none; }

.circle-text .metric-row,
.marketplace-text .metric-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-bottom: 48px;
  padding: 36px 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

@media (max-width: 960px) {
  .circle-inner { grid-template-columns: 1fr; }
  .circle-text .metric-row { grid-template-columns: 1fr; gap: 20px; }
}

/* ---------- MARKETPLACE ---------- */
.marketplace-legacy {
  background: linear-gradient(180deg, var(--bg) 0%, var(--bg-warm) 100%);
  padding: clamp(140px, 16vw, 220px) 0;
  border-top: 1px solid var(--line);
}
.marketplace-inner {
  max-width: var(--w);
  margin: 0 auto;
  padding: 0 var(--gut);
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: clamp(40px, 6vw, 100px);
  align-items: center;
}
.marketplace-text .eyebrow { margin-bottom: 24px; }
.marketplace-text h2 { margin-bottom: 32px; }
.marketplace-text p {
  font-size: clamp(15px, 1.15vw, 18px);
  line-height: 1.65;
  opacity: 0.78;
  margin-bottom: 48px;
  max-width: 520px;
}

.metric-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-bottom: 48px;
  padding: 36px 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.metric { display: flex; flex-direction: column; gap: 6px; }
.metric-num {
  font-family: var(--serif);
  font-size: clamp(28px, 3vw, 40px);
  font-weight: 400;
  color: var(--accent);
  letter-spacing: -0.02em;
  line-height: 1;
}
.metric-label {
  font-size: 11.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
  line-height: 1.4;
}

.footnote {
  font-size: 11.5px;
  color: var(--muted);
  margin-top: 20px;
  font-style: italic;
}

.soon {
  color: var(--muted);
  font-style: italic;
  text-transform: none;
  letter-spacing: 0.02em;
  font-size: 10.5px;
  margin-left: 6px;
}

/* PHONE MOCKUP */
.marketplace-visual { display: flex; justify-content: center; }
.phone-mockup {
  width: 340px;
  height: 700px;
  background: var(--bg-warm);
  border: 1px solid var(--line);
  border-radius: 44px;
  padding: 14px;
  box-shadow:
    0 40px 80px rgba(0,0,0,0.5),
    0 0 0 1px rgba(245,241,234,0.05) inset;
  position: relative;
  transition: transform 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.phone-mockup:hover { transform: translateY(-8px) rotate(-1deg); }
.phone-mockup::before {
  content: '';
  position: absolute;
  top: 22px; left: 50%;
  transform: translateX(-50%);
  width: 100px; height: 28px;
  background: #000;
  border-radius: 999px;
  z-index: 2;
}
.phone-screen {
  width: 100%; height: 100%;
  background: var(--paper);
  border-radius: 32px;
  padding: 60px 18px 18px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  overflow: hidden;
}
.listing-card {
  background: white;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 2px 12px rgba(0,0,0,0.06);
}
.listing-image {
  height: 140px;
  background: linear-gradient(135deg, #1a3a4a 0%, #4a7a8a 100%);
  position: relative;
}
.listing-image::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 30% 50%, rgba(255,255,255,0.2) 0%, transparent 40%),
    radial-gradient(circle at 70% 60%, rgba(200,165,114,0.3) 0%, transparent 50%);
}
.listing-image-2 {
  background: linear-gradient(135deg, #2a1f15 0%, #5a3a25 100%);
}
.listing-image-2::after {
  background:
    radial-gradient(circle at 40% 40%, rgba(255,200,140,0.25) 0%, transparent 50%),
    radial-gradient(circle at 80% 70%, rgba(140,80,40,0.3) 0%, transparent 60%);
}
.listing-body { padding: 14px 16px 16px; color: var(--ink); }
.listing-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
}
.listing-row strong { font-size: 14px; font-weight: 600; }
.rating { font-size: 12px; color: var(--ink-soft); }
.listing-loc { font-size: 12px; color: var(--ink-soft); margin: 2px 0 4px; }
.listing-tags { font-size: 11px; color: var(--accent-deep); margin-bottom: 12px; letter-spacing: 0.02em; }
.listing-price { font-size: 13px; color: var(--ink-soft); }
.listing-price strong { font-size: 14px; color: var(--ink); }
.listing-btn {
  background: var(--ink);
  color: var(--paper);
  padding: 8px 14px;
  border-radius: 999px;
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 500;
}

@media (max-width: 960px) {
  .marketplace-inner { grid-template-columns: 1fr; }
  .metric-row { grid-template-columns: 1fr; gap: 20px; }
}

/* ---------- PROCESS ---------- */
.process {
  background: var(--paper);
  color: var(--ink);
  padding: clamp(140px, 16vw, 220px) 0;
  border-top: 1px solid var(--line);
}
.process h2 { color: var(--ink); }
.process h2 .muted { color: var(--ink-soft); }
.process .eyebrow { color: var(--accent-deep); }

.timeline {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 32px;
  border-top: 1px solid var(--line-dark);
  padding-top: 60px;
}
.timeline-step { position: relative; padding-right: 24px; }
.timeline-step::before {
  content: '';
  position: absolute;
  top: -60px; left: 0;
  width: 40px; height: 2px;
  background: var(--accent-deep);
}
.t-num {
  font-family: var(--serif);
  font-size: 14px;
  letter-spacing: 0.2em;
  color: var(--accent-deep);
  display: block;
  margin-bottom: 24px;
}
.timeline-step h4 {
  font-family: var(--serif);
  font-size: 28px;
  font-weight: 400;
  letter-spacing: -0.01em;
  margin-bottom: 14px;
  line-height: 1.1;
}
.timeline-step p {
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--ink-soft);
  margin-bottom: 20px;
}
.t-time {
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-soft);
  padding: 6px 12px;
  border: 1px solid var(--line-dark);
  border-radius: 999px;
  display: inline-block;
}
@media (max-width: 860px) {
  .timeline { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
  .timeline { grid-template-columns: 1fr; }
}

/* ============================================================
   WHERE WE INSTALL — SERVICE AREA
   Editorial 3-column layout. Not a generic grid.
   ============================================================ */
.service {
  background: var(--bg-warm);
  padding: clamp(120px, 14vw, 200px) 0;
  border-top: 1px solid var(--line);
}
.service-header {
  max-width: 880px;
  margin-bottom: clamp(70px, 9vw, 110px);
}
.service-header .eyebrow {
  color: var(--accent);
  margin-bottom: 22px;
}
.service-header h2 {
  color: var(--paper);
  margin: 0;
}
.service-header h2 .muted {
  color: var(--muted);
  font-style: italic;
}

.service-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.service-col {
  padding: 48px 40px 56px;
  border-right: 1px solid var(--line);
  position: relative;
}
.service-col:last-child { border-right: none; }
.service-col-mid {
  background:
    linear-gradient(180deg, rgba(184,149,106,0.05) 0%, transparent 100%);
}

.service-num {
  font-family: var(--serif);
  font-size: 13px;
  font-style: italic;
  letter-spacing: 0.32em;
  color: var(--accent);
  margin: 0 0 56px;
  font-weight: 400;
}
.service-status {
  font-size: 10px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 12px;
  font-weight: 500;
}
.service-region {
  font-family: var(--serif);
  font-size: clamp(26px, 2.4vw, 34px);
  font-weight: 300;
  letter-spacing: -0.02em;
  line-height: 1;
  color: var(--paper);
  margin: 0 0 16px;
}
.service-sub {
  font-family: var(--serif);
  font-style: italic;
  font-size: 14px;
  color: var(--muted);
  margin: 0 0 32px;
  line-height: 1.4;
}

.service-cities {
  list-style: none;
  padding: 0;
  margin: 0;
}
.service-cities li {
  font-size: 14px;
  line-height: 1.55;
  padding: 10px 0;
  border-top: 1px solid rgba(240, 232, 219, 0.06);
  color: var(--paper);
  opacity: 0.88;
  letter-spacing: 0.005em;
}
.service-cities li:first-child { border-top: none; padding-top: 0; }
.service-cities li em {
  color: var(--muted);
  font-style: italic;
  font-size: 13px;
}

.service-body {
  font-size: 14px;
  line-height: 1.65;
  color: var(--paper);
  opacity: 0.78;
  margin: 0 0 24px;
}

.service-link {
  display: inline-block;
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
  border-bottom: 1px solid var(--accent);
  padding-bottom: 3px;
  font-weight: 500;
  transition: color 0.3s, border-color 0.3s, transform 0.3s;
}
.service-link:hover {
  color: var(--paper);
  border-color: var(--paper);
  transform: translateX(2px);
}

.service-footnote {
  margin: 40px 0 0;
  font-size: 12px;
  font-style: italic;
  color: var(--muted);
  text-align: center;
  max-width: 720px;
  margin-left: auto;
  margin-right: auto;
  line-height: 1.6;
}

@media (max-width: 960px) {
  .service-grid { grid-template-columns: 1fr; }
  .service-col {
    border-right: none;
    border-bottom: 1px solid var(--line);
    padding: 40px 0;
  }
  .service-col:last-child { border-bottom: none; }
}

/* ---------- TRUST PANEL — PERMITS & PORTABILITY ---------- */
.trust-panel {
  margin-top: clamp(80px, 12vw, 140px);
  padding-top: clamp(60px, 8vw, 100px);
  border-top: 1px solid var(--line-dark);
}
.trust-panel .eyebrow {
  color: var(--accent-deep);
  margin-bottom: 24px;
}
.trust-headline {
  font-family: var(--serif);
  font-size: clamp(32px, 4vw, 56px);
  font-weight: 300;
  letter-spacing: -0.02em;
  line-height: 1;
  color: var(--ink);
  margin-bottom: 64px;
  max-width: 800px;
}
.trust-headline .muted { color: var(--ink-soft); font-style: italic; }
.trust-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
}
.trust-card {
  padding: 32px 28px 28px;
  border: 1px solid var(--line-dark);
  border-radius: 4px;
  background: rgba(26, 23, 20, 0.02);
  transition: border-color 0.4s, transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.trust-card:hover {
  border-color: rgba(184, 149, 106, 0.4);
  transform: translateY(-4px);
}
.t-letter {
  font-family: var(--serif);
  font-size: 32px;
  font-weight: 300;
  font-style: italic;
  color: var(--accent-deep);
  margin-bottom: 20px;
  line-height: 1;
}
.trust-card h4 {
  font-family: var(--serif);
  font-size: 22px;
  font-weight: 400;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin-bottom: 12px;
  line-height: 1.2;
}
.trust-card p {
  font-size: 14px;
  line-height: 1.6;
  color: var(--ink-soft);
  margin: 0;
}
@media (max-width: 860px) {
  .trust-grid { grid-template-columns: 1fr; gap: 16px; }
}

/* ---------- THE JOURNAL — SEO EDITORIAL ---------- */
.journal {
  background: var(--paper);
  color: var(--ink);
  padding: clamp(140px, 16vw, 220px) 0;
  border-top: 1px solid var(--line);
}
.journal .eyebrow { color: var(--accent-deep); margin-bottom: 24px; }
.journal h2 { color: var(--ink); }
.journal h2 .muted { color: var(--ink-soft); font-style: italic; }

.journal-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 32px;
  margin-bottom: clamp(60px, 8vw, 100px);
  border-bottom: 1px solid var(--line-dark);
  padding-bottom: 48px;
}
.journal-all {
  color: var(--ink);
  border-color: var(--ink);
  flex-shrink: 0;
}
.journal-all:hover { color: var(--accent-deep); border-color: var(--accent-deep); }

.journal-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(40px, 5vw, 72px) clamp(48px, 6vw, 80px);
}
.journal-card { position: relative; }
.journal-link {
  display: block;
  padding: 0 0 32px;
  border-bottom: 1px solid var(--line-dark);
  transition: opacity 0.3s;
}
.journal-link:hover { opacity: 0.72; }
.journal-link:hover h3 { color: var(--accent-deep); }

.journal-meta {
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-bottom: 20px;
  font-weight: 500;
}
.journal-tag { color: var(--accent-deep); }

.journal-card h3 {
  font-family: var(--serif);
  font-size: clamp(22px, 2vw, 30px);
  font-weight: 400;
  letter-spacing: -0.015em;
  line-height: 1.15;
  color: var(--ink);
  margin-bottom: 14px;
  transition: color 0.4s;
}
.journal-card p {
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--ink-soft);
  margin-bottom: 16px;
}
.journal-card p em { color: var(--accent-deep); font-style: italic; }
.journal-readtime {
  font-size: 11.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin: 0 !important;
  font-weight: 500;
}

@media (max-width: 860px) {
  .journal-header { flex-direction: column; align-items: flex-start; }
  .journal-grid { grid-template-columns: 1fr; }
}

/* ---------- THE CONCIERGE — AI BACKYARD ESTIMATOR ---------- */
.concierge {
  background: var(--bg);
  padding: clamp(140px, 16vw, 220px) 0;
  border-top: 1px solid var(--line);
  text-align: center;
}
.concierge .eyebrow { margin-bottom: 28px; }
.concierge h2 { margin-bottom: 32px; }
.concierge .lede {
  margin: 0 auto 56px;
  text-align: center;
}

.estimator-form {
  display: flex;
  gap: 12px;
  max-width: 620px;
  margin: 0 auto 14px;
  position: relative;
}
.estimator-form input {
  flex: 1;
  background: rgba(240, 232, 219, 0.04);
  border: 1px solid var(--line);
  color: var(--paper);
  padding: 20px 24px;
  font: inherit;
  font-size: 15px;
  border-radius: 999px;
  transition: border-color 0.3s, background 0.3s;
}
.estimator-form input:focus {
  outline: none;
  border-color: var(--accent);
  background: rgba(240, 232, 219, 0.06);
}
.estimator-form input::placeholder { color: var(--muted); }
.estimator-form button {
  flex-shrink: 0;
}
.estimator-note {
  text-align: center;
  font-size: 12px;
  color: var(--muted);
  font-style: italic;
  margin-top: 16px;
}

@media (max-width: 640px) {
  .estimator-form { flex-direction: column; }
  .estimator-form input { text-align: center; }
}

/* RESULT — REVEALED ON SUBMIT */
.estimator-result {
  margin-top: clamp(60px, 8vw, 100px);
  opacity: 0;
  transition: opacity 1s cubic-bezier(0.2, 0.8, 0.2, 1);
  text-align: left;
}
.estimator-result.in { opacity: 1; }
.estimator-result[hidden] { display: none; }

.result-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(24px, 4vw, 56px);
  align-items: stretch;
  text-align: left;
}

.result-map {
  position: relative;
}
.map-frame {
  position: relative;
  width: 100%;
  aspect-ratio: 4/3;
  background: var(--bg-warm);
  border: 1px solid var(--line);
  border-radius: 4px;
  overflow: hidden;
}
.map-frame iframe {
  width: 100%;
  height: 100%;
  border: 0;
  filter: saturate(0.85) contrast(1.05);
}
.map-frame::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(26,23,20,0) 60%, rgba(26,23,20,0.25) 100%);
}
.map-meta {
  margin-top: 16px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.m-label {
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0;
  font-weight: 500;
}
.m-address {
  font-family: var(--serif);
  font-size: 16px;
  color: var(--paper);
  margin: 0;
}

.result-panel {
  padding: 32px 36px;
  background: rgba(240, 232, 219, 0.025);
  border: 1px solid var(--line);
  border-radius: 4px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 380px;
}

/* CONCEPT STATUS — animated checklist */
.concept-status {
  display: flex;
  flex-direction: column;
  gap: 20px;
  transition: opacity 0.4s;
}
.concept-status.fade-out { opacity: 0; }
.status-line {
  display: flex;
  align-items: center;
  gap: 16px;
  opacity: 0.35;
  transition: opacity 0.6s;
}
.status-line.done { opacity: 1; }
.status-dot {
  width: 10px;
  height: 10px;
  flex-shrink: 0;
  border: 1px solid var(--muted);
  border-radius: 50%;
  position: relative;
  transition: border-color 0.4s, background 0.4s;
}
.status-line.done .status-dot {
  background: var(--accent);
  border-color: var(--accent);
}
.status-line.done .status-dot::after {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  border: 1px solid var(--accent);
  opacity: 0;
  animation: dotPulse 0.8s ease-out;
}
@keyframes dotPulse {
  0%   { opacity: 0.8; transform: scale(0.8); }
  100% { opacity: 0;   transform: scale(1.6); }
}
.status-line p {
  margin: 0;
  font-size: 14px;
  color: var(--paper);
  letter-spacing: 0.01em;
}

/* CONCEPT COMPLETE — lead form revealed */
.concept-complete,
.concept-sent {
  opacity: 0;
  transition: opacity 0.6s;
}
.concept-complete.in,
.concept-sent.in { opacity: 1; }
.concept-complete[hidden],
.concept-sent[hidden] { display: none; }
.concept-complete.fade-out { opacity: 0; }

.complete-eyebrow {
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 18px;
  font-weight: 500;
}
.concept-complete h3,
.concept-sent h3 {
  font-family: var(--serif);
  font-size: clamp(26px, 2.4vw, 32px);
  font-weight: 300;
  letter-spacing: -0.01em;
  line-height: 1.1;
  margin-bottom: 14px;
  color: var(--paper);
}
.complete-body {
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--paper);
  opacity: 0.8;
  margin-bottom: 14px;
}
.complete-body.small {
  font-size: 13px;
  margin-top: 8px;
  margin-bottom: 20px;
}
.inline-link {
  color: var(--accent);
  border-bottom: 1px solid currentColor;
  padding-bottom: 1px;
}

.lead-form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 12px;
}
@media (max-width: 560px) {
  .lead-form { grid-template-columns: 1fr; }
}
.lead-form input,
.lead-form select {
  background: rgba(240, 232, 219, 0.04);
  border: 1px solid var(--line);
  color: var(--paper);
  padding: 14px 16px;
  font: inherit;
  font-size: 13.5px;
  border-radius: 4px;
  transition: border-color 0.3s;
}
.lead-form input:focus,
.lead-form select:focus {
  outline: none;
  border-color: var(--accent);
}
.lead-form input::placeholder { color: var(--muted); }
.lead-form select { color: var(--muted); }
.lead-form select:valid { color: var(--paper); }
.lead-form select { grid-column: 1 / -1; }
.lead-form button {
  grid-column: 1 / -1;
  justify-self: stretch;
  margin-top: 8px;
}

@media (max-width: 860px) {
  .result-grid { grid-template-columns: 1fr; }
  .lead-form { grid-template-columns: 1fr; }
}

/* ---------- FOOTER ---------- */
footer {
  background: var(--bg-warm);
  padding: 80px 0 40px;
  border-top: 1px solid var(--line);
}
.footer-inner {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: clamp(40px, 6vw, 100px);
  margin-bottom: 60px;
}
.footer-tag {
  color: var(--muted);
  font-size: 13px;
  margin-top: 14px;
  max-width: 320px;
}
.footer-nap {
  margin-top: 22px;
  font-style: normal;
  font-size: 13px;
  color: var(--muted);
  line-height: 1.55;
  max-width: 320px;
}
.footer-nap-name {
  font-weight: 500;
  color: var(--paper);
  margin-bottom: 4px;
}
.footer-nap-contact { margin-top: 6px; }
.footer-nap-contact a {
  color: var(--accent);
  border-bottom: 1px dotted currentColor;
}
.footer-nap-hours { margin-top: 6px; font-size: 12px; opacity: 0.7; }

.footer-cols {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 32px;
}
@media (max-width: 920px) {
  .footer-cols { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 540px) {
  .footer-cols { grid-template-columns: 1fr; gap: 28px; }
}
.footer-cols h5 {
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 18px;
  font-weight: 500;
}
.footer-cols a {
  display: block;
  font-size: 14px;
  padding: 4px 0;
  opacity: 0.7;
  transition: opacity 0.3s;
}
.footer-cols a:hover { opacity: 1; }
.copyright {
  font-size: 12px;
  color: var(--muted);
  text-align: center;
  padding-top: 32px;
  border-top: 1px solid var(--line);
  max-width: var(--w);
  margin: 0 auto;
  padding-left: var(--gut);
  padding-right: var(--gut);
}
.disclosure {
  font-size: 10px;
  line-height: 1.55;
  color: var(--muted);
  opacity: 0.55;
  text-align: center;
  max-width: 880px;
  margin: 14px auto 0;
  padding: 0 var(--gut) 20px;
  letter-spacing: 0.01em;
  font-style: italic;
}

/* ============================================================
   404 ERROR PAGE
   ============================================================ */
.error-body {
  background: var(--bg);
  color: var(--paper);
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}
.error-page {
  max-width: 720px;
  padding: 80px var(--gut);
  text-align: center;
}
.error-logo {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--serif);
  font-size: 22px;
  font-weight: 500;
  letter-spacing: 0.18em;
  color: var(--paper);
  margin-bottom: 64px;
}
.error-logo svg { width: 22px; height: 22px; }
.error-eyebrow {
  font-family: var(--serif);
  font-style: italic;
  font-size: 14px;
  letter-spacing: 0.32em;
  color: var(--accent);
  margin: 0 0 24px;
}
.error-headline {
  font-family: var(--serif);
  font-size: clamp(36px, 4.4vw, 64px);
  font-weight: 300;
  letter-spacing: -0.02em;
  line-height: 1.05;
  color: var(--paper);
  margin: 0 0 24px;
}
.error-headline em { font-style: italic; color: var(--accent); }
.error-lede {
  font-size: clamp(15px, 1.2vw, 17px);
  line-height: 1.6;
  color: var(--paper);
  opacity: 0.8;
  margin: 0 0 40px;
  max-width: 480px;
  margin-left: auto;
  margin-right: auto;
}
.error-actions {
  display: flex;
  gap: 14px;
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: 56px;
}
.error-helpful {
  font-size: 13px;
  line-height: 2;
  color: var(--muted);
  padding-top: 40px;
  border-top: 1px solid var(--line);
  max-width: 580px;
  margin: 0 auto;
}
.error-helpful a {
  color: var(--accent);
  border-bottom: 1px solid currentColor;
  padding-bottom: 1px;
}
.error-helpful a:hover { color: var(--paper); border-color: var(--paper); }

/* ============================================================
   LEGAL PAGES (privacy + terms)
   ============================================================ */
.legal-body {
  background: var(--paper);
  color: var(--ink);
  padding-top: 42px; /* under fixed banner space, even though no banner here */
}
.legal-page {
  padding: clamp(60px, 8vw, 100px) 0 clamp(80px, 10vw, 140px);
}
.legal-container {
  max-width: 760px;
  margin: 0 auto;
  padding: 0 var(--gut);
}
.legal-eyebrow {
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent-deep);
  font-weight: 500;
  margin: 0 0 24px;
}
.legal-page h1 {
  color: var(--ink);
  margin: 0 0 28px;
}
.legal-page h1.display {
  font-size: clamp(36px, 4vw, 56px);
  max-width: none;
}
.legal-lede {
  font-family: var(--serif);
  font-size: clamp(17px, 1.4vw, 21px);
  font-weight: 300;
  line-height: 1.55;
  color: var(--ink-soft);
  margin: 0 0 48px;
  letter-spacing: -0.005em;
}
.legal-page hr {
  border: none;
  border-top: 1px solid var(--line-dark);
  margin: 48px 0;
}
.legal-page h2 {
  font-family: var(--serif);
  font-size: clamp(22px, 1.8vw, 26px);
  font-weight: 400;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin: 40px 0 16px;
  line-height: 1.2;
}
.legal-page p {
  font-size: 15px;
  line-height: 1.7;
  color: var(--ink-soft);
  margin: 0 0 14px;
}
.legal-page p strong { color: var(--ink); font-weight: 500; }
.legal-page a {
  color: var(--accent-deep);
  border-bottom: 1px solid rgba(138, 106, 63, 0.3);
  padding-bottom: 1px;
  transition: border-color 0.3s;
}
.legal-page a:hover { border-bottom-color: var(--accent-deep); }
.legal-page ul {
  margin: 12px 0 18px;
  padding: 0;
  list-style: none;
}
.legal-page ul li {
  font-size: 15px;
  line-height: 1.6;
  color: var(--ink-soft);
  padding: 6px 0 6px 22px;
  position: relative;
}
.legal-page ul li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 14px;
  width: 10px;
  height: 1px;
  background: var(--accent-deep);
}
.legal-page ul li strong { color: var(--ink); font-weight: 500; }
.legal-footnote {
  margin-top: 40px;
  font-size: 12px;
  color: var(--muted);
  font-style: italic;
}
@media (max-width: 760px) {
  .footer-inner { grid-template-columns: 1fr; }
  .footer-cols { grid-template-columns: 1fr 1fr; }
}

/* ============================================================
   AREA LANDING PAGES — /areas/*.html
   Vancouver, North Shore, Whistler, Squamish
   ============================================================ */
.area-body {
  background: var(--bg);
  color: var(--paper);
}
.area-body .banner { position: relative; }
.area-body .banner a { color: var(--accent); border-bottom: 1px dotted currentColor; }

.area-hero {
  padding: clamp(80px, 10vw, 130px) 0 clamp(60px, 7vw, 100px);
  border-bottom: 1px solid var(--line);
}
.area-hero .eyebrow {
  color: var(--accent);
  margin-bottom: 20px;
}
.area-hero h1 {
  margin: 0 0 24px;
  max-width: 900px;
}
.area-hero h1 em {
  font-style: italic;
  color: var(--accent);
}
.area-lede {
  max-width: 740px;
  font-size: clamp(15px, 1.2vw, 18px);
  color: var(--muted);
  line-height: 1.7;
  margin-bottom: 36px;
}
.area-hero .hero-specs {
  display: grid;
  grid-template-columns: repeat(4, auto);
  gap: 40px;
  margin: 44px 0 0;
  border-top: 1px solid var(--line);
  padding-top: 28px;
  list-style: none;
}
.area-hero .hero-specs dt {
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 6px;
}
.area-hero .hero-specs dd {
  font-family: var(--serif, "Fraunces", serif);
  font-size: 20px;
  margin: 0;
}
@media (max-width: 760px) {
  .area-hero .hero-specs {
    grid-template-columns: repeat(2, 1fr);
    gap: 22px;
  }
}

.area-why {
  padding: clamp(80px, 10vw, 140px) 0;
  border-bottom: 1px solid var(--line);
}
.area-why .eyebrow { color: var(--accent); margin-bottom: 20px; }
.area-why h2 { margin-bottom: 56px; }
.area-why-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
}
.area-why-card {
  padding: 28px 24px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(255,255,255,0.015);
}
.area-why-card .t-letter {
  font-family: var(--serif, "Fraunces", serif);
  font-size: 32px;
  font-style: italic;
  color: var(--accent);
  margin: 0 0 16px;
}
.area-why-card h3 {
  font-family: var(--serif, "Fraunces", serif);
  font-size: 22px;
  margin: 0 0 14px;
}
.area-why-card p {
  font-size: 14px;
  color: var(--muted);
  line-height: 1.65;
  margin: 0;
}
@media (max-width: 860px) {
  .area-why-grid { grid-template-columns: 1fr; gap: 18px; }
}

.area-neighborhoods {
  padding: clamp(80px, 10vw, 140px) 0;
  border-bottom: 1px solid var(--line);
}
.area-neighborhoods .eyebrow { color: var(--accent); margin-bottom: 20px; }
.area-neighborhoods h2 { margin-bottom: 56px; }
.area-hood-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 28px;
}
.area-hood h3 {
  font-family: var(--serif, "Fraunces", serif);
  font-size: 18px;
  color: var(--accent);
  margin: 0 0 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line);
}
.area-hood ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
.area-hood li {
  font-size: 14px;
  color: var(--muted);
  padding: 5px 0;
  border-bottom: 1px solid rgba(255,255,255,0.04);
}
.area-hood li:last-child { border-bottom: none; }
.area-hood li a {
  color: var(--paper);
  border-bottom: 1px dotted var(--accent);
}
.area-hood li a:hover { color: var(--accent); }
@media (max-width: 920px) {
  .area-hood-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 540px) {
  .area-hood-grid { grid-template-columns: 1fr; }
}

.area-faq {
  padding: clamp(80px, 10vw, 140px) 0;
  border-bottom: 1px solid var(--line);
}
.area-faq .eyebrow { color: var(--accent); margin-bottom: 20px; }
.area-faq h2 { margin-bottom: 48px; }

.area-cta {
  padding: clamp(80px, 10vw, 130px) 0;
  text-align: center;
  background: linear-gradient(180deg, rgba(184,149,106,0.02), transparent);
}
.area-cta h2 {
  margin: 0 0 20px;
}
.area-cta p {
  max-width: 600px;
  margin: 0 auto 32px;
  color: var(--muted);
  font-size: 16px;
  line-height: 1.65;
}

/* ============================================================
   MULTI-PAGE LAYOUT — shared building blocks for the new pages:
   index (home), kits, how-it-works, stories, faq, contact
   ============================================================ */

/* ---------- page-header (top section, used by inner pages) ---------- */
.page-header {
  padding: 170px 0 70px;
  border-bottom: 1px solid var(--line);
  background: var(--bg);
}
.page-header .eyebrow {
  color: var(--accent);
  margin-bottom: 22px;
}
.page-header h1 {
  margin: 0 0 24px;
  max-width: 880px;
}
.page-header h1 em {
  font-style: italic;
  color: var(--accent);
}
.page-lede {
  max-width: 720px;
  font-size: clamp(15px, 1.2vw, 18px);
  color: var(--muted);
  line-height: 1.7;
}
.page-lede strong { color: var(--paper); font-weight: 500; }
.page-lede a {
  color: var(--accent);
  border-bottom: 1px dotted currentColor;
}

/* page-header with a background image (how-it-works, stories) */
.page-header-image {
  position: relative;
  padding: 0;
  min-height: 56vh;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
}
.page-header-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.page-header-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.page-header-overlay {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(13,14,12,0.55) 0%, rgba(13,14,12,0.1) 30%, rgba(13,14,12,0.9) 100%);
}
.page-header-content {
  position: relative;
  z-index: 1;
  width: 100%;
  padding-top: 180px;
  padding-bottom: 70px;
}

/* ---------- JOURNAL — long-form articles + index ---------- */
.journal-article {
  padding: clamp(120px, 14vw, 180px) 0 clamp(60px, 8vw, 90px);
}
.journal-article .container { max-width: 760px; }
.journal-eyebrow {
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 28px;
  font-weight: 500;
}
.journal-eyebrow a { color: var(--accent); border-bottom: 1px dotted currentColor; }
.journal-title { margin: 0 0 28px; line-height: 1.1; }
.journal-title em { font-style: italic; color: var(--accent); }
.journal-lede {
  font-family: var(--serif);
  font-size: 21px;
  font-weight: 300;
  line-height: 1.55;
  color: var(--paper);
  margin: 0 0 56px;
  padding-bottom: 40px;
  border-bottom: 1px solid var(--line);
}
.journal-body h2 {
  font-family: var(--serif);
  font-size: clamp(24px, 3vw, 30px);
  font-weight: 500;
  color: var(--paper);
  margin: 56px 0 20px;
  line-height: 1.25;
}
.journal-body p {
  font-size: 16px;
  line-height: 1.75;
  color: var(--muted);
  margin: 0 0 22px;
}
.journal-body p strong { color: var(--paper); font-weight: 500; }
.journal-body p em { color: var(--paper); font-style: italic; }
.journal-body a { color: var(--accent); border-bottom: 1px dotted currentColor; transition: opacity 0.25s; }
.journal-body a:hover { opacity: 0.7; }

.journal-list {
  list-style: none;
  margin: 0 0 28px;
  padding: 0;
}
.journal-list li {
  font-size: 16px;
  line-height: 1.7;
  color: var(--muted);
  padding: 4px 0 4px 22px;
  position: relative;
}
.journal-list li::before {
  content: '';
  position: absolute;
  left: 0; top: 14px;
  width: 8px; height: 1px;
  background: var(--accent);
}
.journal-list li strong { color: var(--paper); font-weight: 500; }

/* Comparison table inside an article */
.journal-compare {
  width: 100%;
  border-collapse: collapse;
  margin: 32px 0;
  font-size: 14px;
}
.journal-compare th,
.journal-compare td {
  text-align: left;
  padding: 14px 14px;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
  color: var(--muted);
  line-height: 1.5;
}
.journal-compare th {
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
  font-weight: 500;
  border-bottom: 1px solid rgba(184,149,106,0.4);
}
.journal-compare td:first-child { color: var(--paper); font-weight: 500; }
@media (max-width: 700px) {
  .journal-compare,
  .journal-compare thead,
  .journal-compare tbody,
  .journal-compare tr,
  .journal-compare th,
  .journal-compare td { display: block; }
  .journal-compare thead { display: none; }
  .journal-compare tr {
    border-bottom: 1px solid rgba(184,149,106,0.3);
    padding: 10px 0;
  }
  .journal-compare td { border: none; padding: 4px 0; }
  .journal-compare td:first-child {
    font-size: 11px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--accent);
  }
}

/* Journal index (list of articles) */
.journal-list-section {
  padding: clamp(40px, 6vw, 80px) 0 clamp(80px, 10vw, 130px);
  border-top: 1px solid var(--line);
}
.journal-index {
  list-style: none;
  margin: 0;
  padding: 0;
  max-width: 880px;
}
.journal-index-item {
  border-bottom: 1px solid var(--line);
}
.journal-index-item:last-child { border-bottom: none; }
.journal-index-item a {
  display: block;
  padding: 36px 0;
  transition: padding-left 0.35s cubic-bezier(0.23, 1, 0.32, 1);
}
.journal-index-item a:hover { padding-left: 14px; }
.journal-index-meta {
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 14px;
  font-weight: 500;
}
.journal-index-title {
  font-family: var(--serif);
  font-size: clamp(24px, 3vw, 32px);
  font-weight: 500;
  color: var(--paper);
  margin: 0 0 14px;
  line-height: 1.2;
}
.journal-index-title em { font-style: italic; color: var(--accent); }
.journal-index-title-small {
  font-family: var(--serif);
  font-size: 19px;
  font-weight: 400;
  color: var(--muted);
  margin: 0;
  line-height: 1.3;
}
.journal-index-excerpt {
  font-size: 15px;
  line-height: 1.65;
  color: var(--muted);
  margin: 0 0 14px;
  max-width: 640px;
}
.journal-index-readmore {
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0;
  font-weight: 500;
}
.journal-index-coming-soon { opacity: 0.55; }
.journal-index-coming-soon a:hover { padding-left: 0; }

/* Active-page link highlight: journal */
body[data-page="journal"] .nav-links [data-nav="journal"] {
  color: var(--accent);
  opacity: 1;
}

/* ---------- page-cta (bottom CTA, used by inner pages) ---------- */
.page-cta {
  padding: clamp(70px, 9vw, 110px) 0;
  text-align: center;
  background: linear-gradient(180deg, rgba(184,149,106,0.025), transparent);
  border-top: 1px solid var(--line);
}
.page-cta .eyebrow {
  color: var(--accent);
  margin-bottom: 20px;
}
.page-cta h2 {
  margin: 0 0 20px;
}
.page-cta h2 em {
  font-style: italic;
  color: var(--accent);
}
.page-cta p,
.page-cta .page-cta-lede {
  max-width: 580px;
  margin: 0 auto 32px;
  color: var(--muted);
  font-size: 16px;
  line-height: 1.65;
}
.page-cta-actions {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  justify-content: center;
}
.page-cta-home {
  /* Center the homepage final CTA so the wide canvas reads as breathing room,
     not empty negative space on the right. */
  background: var(--bg);
}
.page-cta-home h2 { max-width: 760px; margin-left: auto; margin-right: auto; }
.page-cta-tertiary {
  margin-top: 22px;
  font-size: 13px;
  color: var(--muted);
}
.page-cta-tertiary a {
  color: var(--accent);
  border-bottom: 1px dotted currentColor;
  margin-left: 6px;
}

/* ---------- HOME KIT TEASERS (lean, text-based, no images) ---------- */
.home-kits {
  padding: clamp(100px, 12vw, 160px) 0;
  border-bottom: 1px solid var(--line);
  background: var(--bg);
}
.home-kits .section-header { margin-bottom: 56px; }
.home-kits .eyebrow { color: var(--accent); margin-bottom: 20px; }
.home-kits-lede {
  max-width: 620px;
  margin-top: 22px;
  color: var(--muted);
  font-size: 15px;
  line-height: 1.7;
}
.home-kits-lede strong { color: var(--paper); font-weight: 500; }
.home-kits-lede em { color: var(--paper); font-style: italic; }

.home-kit-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}
.home-kit-card {
  position: relative;
  padding: 36px 28px 80px;
  background: rgba(255,255,255,0.015);
  border: 1px solid var(--line);
  border-radius: 6px;
  color: var(--paper);
  transition: border-color 0.3s, transform 0.3s, background 0.3s;
  display: block;
}
.home-kit-card:hover {
  border-color: rgba(184,149,106,0.6);
  transform: translateY(-2px);
  background: rgba(184,149,106,0.02);
}
.home-kit-num {
  font-size: 10px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 16px;
  opacity: 0.9;
}
.home-kit-card h3 {
  font-family: var(--serif);
  font-size: 30px;
  font-weight: 400;
  margin: 0 0 10px;
  letter-spacing: -0.01em;
}
.home-kit-dims {
  font-size: 13px;
  color: var(--muted);
  margin: 0 0 16px;
  letter-spacing: 0.01em;
}
.home-kit-tag {
  font-size: 14px;
  color: var(--paper);
  opacity: 0.82;
  line-height: 1.55;
  margin: 0 0 26px;
}
.home-kit-price {
  font-family: var(--serif);
  font-size: 13px;
  color: var(--muted);
  margin: 0;
}
.home-kit-price strong {
  font-size: 22px;
  color: var(--paper);
  font-weight: 400;
  margin-left: 6px;
}
.home-kit-arrow {
  position: absolute;
  bottom: 28px;
  right: 28px;
  font-family: var(--serif);
  font-size: 22px;
  color: var(--accent);
  opacity: 0.7;
  transition: transform 0.3s, opacity 0.3s;
}
.home-kit-card:hover .home-kit-arrow {
  transform: translateX(4px);
  opacity: 1;
}
.home-kit-featured {
  border-color: rgba(184,149,106,0.5);
  background: rgba(184,149,106,0.025);
}
.home-kit-badge {
  position: absolute;
  top: -10px;
  left: 24px;
  background: var(--accent);
  color: var(--ink);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: 5px 12px;
  border-radius: 999px;
  font-weight: 600;
}
.home-kits-foot {
  margin-top: 38px;
  text-align: center;
  font-size: 13px;
  color: var(--muted);
  line-height: 1.7;
}
.home-kits-foot strong { color: var(--paper); font-weight: 500; }
.home-kits-foot em { color: var(--paper); font-style: italic; }
.home-kits-foot a {
  color: var(--accent);
  border-bottom: 1px dotted currentColor;
  margin-left: 8px;
}
@media (max-width: 900px) {
  .home-kit-grid { grid-template-columns: 1fr; gap: 14px; }
}

/* ---------- HOME PROOF POINTS (3 columns linking to deep pages) ---------- */
.home-points {
  padding: clamp(70px, 9vw, 110px) 0;
  border-bottom: 1px solid var(--line);
}
.home-points-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 36px;
}
.home-point {
  padding: 0;
}
.home-point-num {
  font-family: var(--serif);
  font-size: 18px;
  font-style: italic;
  color: var(--accent);
  margin: 0 0 18px;
}
.home-point h3 {
  font-family: var(--serif);
  font-size: 22px;
  margin: 0 0 14px;
  font-weight: 400;
}
.home-point p {
  color: var(--muted);
  font-size: 14px;
  line-height: 1.7;
  margin: 0 0 20px;
}
.home-point-link {
  color: var(--accent);
  font-size: 13px;
  letter-spacing: 0.04em;
  border-bottom: 1px dotted currentColor;
  padding-bottom: 1px;
  transition: opacity 0.3s;
}
.home-point-link:hover { opacity: 0.7; }
@media (max-width: 900px) {
  .home-points-grid { grid-template-columns: 1fr; gap: 28px; }
}

/* ---------- KITS PAGE: build-quality split section ---------- */
.kits-page { padding-top: 0; padding-bottom: clamp(60px, 8vw, 100px); }
.kits-build {
  padding: clamp(80px, 10vw, 130px) 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: rgba(255,255,255,0.012);
}
.kits-build-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: center;
}
.kits-build-img {
  margin: 0;
  border-radius: 6px;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  background: var(--line);
}
.kits-build-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.kits-build-text .eyebrow {
  color: var(--accent);
  margin-bottom: 20px;
}
.kits-build-text h2 { margin: 0 0 24px; }
.kits-build-text p {
  color: var(--muted);
  font-size: 16px;
  line-height: 1.7;
  margin: 0 0 28px;
}
.kits-build-text p strong { color: var(--paper); font-weight: 500; }
.kits-build-spec {
  list-style: none;
  padding: 0;
  margin: 0;
  border-top: 1px solid var(--line);
}
.kits-build-spec li {
  padding: 12px 0;
  border-bottom: 1px solid var(--line);
  font-size: 14px;
  color: var(--muted);
  display: flex;
  gap: 14px;
}
.kits-build-spec li strong {
  color: var(--paper);
  font-weight: 500;
  min-width: 110px;
  display: inline-block;
}
@media (max-width: 900px) {
  .kits-build-grid { grid-template-columns: 1fr; gap: 36px; }
}

/* ---------- HOW-IT-WORKS PAGE: timeline section wrapper ---------- */
.how-timeline {
  padding: clamp(90px, 11vw, 140px) 0;
  border-bottom: 1px solid var(--line);
}
.how-timeline .eyebrow {
  color: var(--accent);
  margin-bottom: 20px;
}
.how-timeline h2 { margin-bottom: 56px; }

/* ---------- STORIES PAGE: minor tweaks ---------- */
.testimonials-page,
.ritual-gallery-page {
  border-bottom: 1px solid var(--line);
}

/* ---------- FAQ PAGE ---------- */
.faq-footnote {
  margin-top: 36px;
  text-align: center;
  color: var(--muted);
  font-size: 13px;
}
.faq-footnote a {
  color: var(--accent);
  border-bottom: 1px dotted currentColor;
}

/* ---------- CONTACT PAGE: direct-contact details ---------- */
.concierge-page {
  padding-top: 170px;
}
.contact-direct {
  padding: clamp(80px, 10vw, 120px) 0;
  border-top: 1px solid var(--line);
}
.contact-direct-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: start;
}
.contact-direct-col .eyebrow { color: var(--accent); margin-bottom: 20px; }
.contact-dl {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
  margin: 0;
}
.contact-dl > div {
  display: grid;
  grid-template-columns: 110px 1fr;
  gap: 24px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--line);
}
.contact-dl dt {
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--muted);
  padding-top: 3px;
}
.contact-dl dd {
  margin: 0;
  font-family: var(--serif);
  font-size: 18px;
  line-height: 1.5;
}
.contact-dl dd a {
  color: var(--paper);
  border-bottom: 1px dotted var(--accent);
}
.contact-dl dd a:hover { color: var(--accent); }
.contact-dl dd em { font-style: italic; color: var(--muted); font-size: 14px; }
@media (max-width: 760px) {
  .contact-direct-grid { grid-template-columns: 1fr; gap: 36px; }
}

/* ============================================================
   RENDER PAGE — Free AI render lead capture
   ============================================================ */
.render-hero {
  padding: 170px 0 80px;
  border-bottom: 1px solid var(--line);
  background:
    radial-gradient(circle at 80% 20%, rgba(184,149,106,0.06) 0%, transparent 50%),
    var(--bg);
}
.render-hero .eyebrow {
  color: var(--accent);
  margin-bottom: 22px;
}
.render-hero h1 {
  margin: 0 0 24px;
  max-width: 900px;
}
.render-hero h1 em {
  font-style: italic;
  color: var(--accent);
}
.render-lede {
  max-width: 700px;
  font-size: clamp(15px, 1.2vw, 18px);
  color: var(--muted);
  line-height: 1.7;
  margin-bottom: 52px;
}
.render-lede strong { color: var(--paper); font-weight: 500; }
.render-lede em { color: var(--paper); font-style: italic; }

.render-pillars {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
  padding-top: 32px;
  border-top: 1px solid var(--line);
}
.render-pillar {
  display: flex;
  gap: 18px;
  align-items: flex-start;
}
.render-pillar-num {
  font-family: var(--serif);
  font-size: 28px;
  font-style: italic;
  color: var(--accent);
  line-height: 1;
}
.render-pillar p {
  margin: 0;
  font-size: 14px;
  color: var(--muted);
  line-height: 1.55;
}
.render-pillar p strong {
  display: block;
  color: var(--paper);
  font-weight: 500;
  font-size: 15px;
  margin-bottom: 4px;
  letter-spacing: 0.01em;
}
@media (max-width: 820px) {
  .render-pillars { grid-template-columns: 1fr; gap: 20px; }
}

/* ---------- Form sections ---------- */
.render-form-section {
  padding: clamp(80px, 10vw, 130px) 0;
  border-bottom: 1px solid var(--line);
}
.render-form {
  max-width: 920px;
  margin: 0 auto;
}
.render-step {
  padding: 36px 0 44px;
  border-bottom: 1px solid var(--line);
}
.render-step:last-of-type { border-bottom: none; }
.render-step-num {
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 14px;
}
.render-step h2 {
  font-family: var(--serif);
  font-size: clamp(26px, 3vw, 36px);
  font-weight: 400;
  margin: 0 0 10px;
  letter-spacing: -0.01em;
}
.render-step-help {
  color: var(--muted);
  font-size: 14px;
  line-height: 1.65;
  margin: 0 0 28px;
  max-width: 580px;
}
.render-step-help strong { color: var(--paper); font-weight: 500; }
.render-step-help em { color: var(--paper); font-style: italic; }

/* ---------- SIZE cards ---------- */
.render-size-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}
.render-size-card {
  position: relative;
  cursor: pointer;
  display: block;
}
.render-size-card input[type="radio"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.render-size-card-inner {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 22px 18px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: rgba(255,255,255,0.012);
  transition: border-color 0.25s, background 0.25s, transform 0.25s;
  height: 100%;
}
.render-size-card:hover .render-size-card-inner {
  border-color: rgba(184,149,106,0.5);
  transform: translateY(-1px);
}
.render-size-card.is-selected .render-size-card-inner {
  border-color: var(--accent);
  background: rgba(184,149,106,0.06);
}
.render-size-name {
  font-family: var(--serif);
  font-size: 20px;
  font-weight: 500;
}
.render-size-dims {
  font-size: 13px;
  color: var(--muted);
  font-family: var(--serif);
}
.render-size-cap {
  font-size: 12px;
  color: var(--muted);
  margin-bottom: 8px;
}
.render-size-price {
  font-size: 12px;
  letter-spacing: 0.05em;
  color: var(--accent);
  text-transform: uppercase;
  font-weight: 500;
}
.render-size-card-custom .render-size-card-inner {
  border-style: dashed;
}
@media (max-width: 900px) {
  .render-size-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 520px) {
  .render-size-grid { grid-template-columns: 1fr; }
}

/* ---------- LOOK swatches ---------- */
/* Finish picker — grouped by material family */
.render-look-groups {
  display: flex;
  flex-direction: column;
  gap: 26px;
}
.render-look-group-label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--line);
}
.render-look-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 14px;
}
.render-look-card {
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 18px 14px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: rgba(255,255,255,0.012);
  transition: border-color 0.25s, transform 0.25s, background 0.25s;
  position: relative;
}
.render-look-card input[type="radio"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.render-look-card:hover {
  border-color: rgba(184,149,106,0.5);
  transform: translateY(-1px);
}
.render-look-card.is-selected {
  border-color: var(--accent);
  background: rgba(184,149,106,0.06);
}
.render-look-swatch {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.06);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
}
.render-look-steel  { background: linear-gradient(135deg, #d4d4d4, #8a8a8a); }
.render-look-bronze { background: linear-gradient(135deg, #6a4a30 0%, #8a6840 30%, #5a8060 60%, #4a6850 100%); }
.render-look-corten { background: linear-gradient(135deg, #8a4a2a 0%, #6a3a20 40%, #4a2810 80%, #6a4030 100%); }
.render-look-cedar  { background: linear-gradient(135deg, #b07a4a, #6e431f); }
.render-look-shou   { background: repeating-linear-gradient(180deg, #1a1a1a 0px, #0a0a0a 5px, #2a1a14 10px, #1c1010 15px); border-color: rgba(255,255,255,0.12); }
.render-look-black  { background: linear-gradient(135deg, #1a1a1a, #2a2a2a); border-color: rgba(255,255,255,0.12); }
.render-look-stone  { background: linear-gradient(135deg, #c2b5a0, #847866); }
.render-look-surprise { background: linear-gradient(135deg, #b8956a, #2a2418); color: #fff; }
.render-look-name {
  font-size: 13px;
  font-weight: 500;
  color: var(--paper);
  text-align: center;
}
.render-look-sub {
  font-size: 11px;
  color: var(--muted);
  text-align: center;
  font-style: italic;
}
@media (max-width: 760px) {
  .render-look-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 480px) {
  .render-look-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ---------- YARD inputs (address OR photo) ---------- */
.render-yard-grid {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 28px;
  align-items: stretch;
}
.render-yard-col { display: flex; flex-direction: column; }
.render-yard-label {
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 12px;
  font-weight: 500;
}
.render-yard-col input[type="text"] {
  padding: 14px 16px;
  font-size: 15px;
  background: rgba(255,255,255,0.02);
  color: var(--paper);
  border: 1px solid var(--line);
  border-radius: 4px;
  font-family: inherit;
  transition: border-color 0.25s, background 0.25s;
}
.render-yard-col input[type="text"]:focus {
  outline: none;
  border-color: var(--accent);
  background: rgba(184,149,106,0.04);
}
.render-yard-help {
  font-size: 12px;
  color: var(--muted);
  margin: 10px 0 0;
  line-height: 1.5;
}
.render-yard-divider {
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--serif);
  font-style: italic;
  font-size: 14px;
  color: var(--muted);
  position: relative;
  padding: 0 8px;
}
.render-yard-divider::before,
.render-yard-divider::after {
  content: '';
  position: absolute;
  left: 50%;
  width: 1px;
  height: calc(50% - 32px);
  background: var(--line);
}
.render-yard-divider::before { top: 0; }
.render-yard-divider::after { bottom: 0; }
.render-yard-divider span {
  position: relative;
  background: var(--bg);
  padding: 6px 0;
  z-index: 1;
}

/* Upload box */
.render-yard-upload {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 28px 18px;
  border: 1.5px dashed rgba(184,149,106,0.4);
  border-radius: 6px;
  background: rgba(255,255,255,0.012);
  cursor: pointer;
  transition: border-color 0.25s, background 0.25s;
  min-height: 92px;
  text-align: center;
}
.render-yard-upload input[type="file"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
  width: 0;
  height: 0;
}
.render-yard-upload:hover {
  border-color: var(--accent);
  background: rgba(184,149,106,0.04);
}
.render-yard-upload.is-uploaded {
  border-style: solid;
  border-color: var(--accent);
  background: rgba(184,149,106,0.08);
}
.render-yard-upload-text {
  font-size: 14px;
  color: var(--muted);
  line-height: 1.55;
}
.render-yard-upload-text strong {
  color: var(--paper);
  font-weight: 500;
  display: block;
  margin-bottom: 2px;
}
.render-yard-upload-text span {
  font-size: 12px;
  font-style: italic;
}
@media (max-width: 760px) {
  .render-yard-grid { grid-template-columns: 1fr; gap: 20px; }
  .render-yard-divider { padding: 12px 0; }
  .render-yard-divider::before,
  .render-yard-divider::after {
    left: auto;
    width: calc(50% - 32px);
    height: 1px;
    top: 50%;
    bottom: auto;
  }
  .render-yard-divider::before { left: 0; }
  .render-yard-divider::after { right: 0; left: auto; }
}

/* ---------- CONTACT inputs ---------- */
.render-contact-grid {
  display: grid;
  grid-template-columns: 1.2fr 1.2fr 1fr;
  gap: 14px;
  margin-bottom: 14px;
}
.render-contact-grid input,
.render-form textarea {
  padding: 14px 16px;
  font-size: 15px;
  background: rgba(255,255,255,0.02);
  color: var(--paper);
  border: 1px solid var(--line);
  border-radius: 4px;
  font-family: inherit;
  transition: border-color 0.25s, background 0.25s;
  resize: vertical;
}
.render-contact-grid input:focus,
.render-form textarea:focus {
  outline: none;
  border-color: var(--accent);
  background: rgba(184,149,106,0.04);
}
.render-form textarea {
  width: 100%;
  display: block;
  font-family: inherit;
}
@media (max-width: 720px) {
  .render-contact-grid { grid-template-columns: 1fr; }
}

/* ---------- Submit ---------- */
.render-submit {
  margin-top: 36px;
  text-align: center;
}
.btn.btn-large {
  font-size: 14px;
  padding: 16px 32px;
  letter-spacing: 0.06em;
}
.render-fine-print {
  margin-top: 18px;
  font-size: 12px;
  color: var(--muted);
  line-height: 1.6;
  font-style: italic;
}
.render-fine-print a {
  color: var(--accent);
  border-bottom: 1px dotted currentColor;
}

/* ---------- Success state ---------- */
.render-sent {
  max-width: 720px;
  margin: 0 auto;
  text-align: center;
  padding: 64px 24px;
}
.render-sent-eyebrow {
  color: var(--accent);
  font-size: 12px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  margin-bottom: 18px;
}
.render-sent h2 { margin: 0 0 22px; }
.render-sent p {
  color: var(--muted);
  font-size: 16px;
  line-height: 1.7;
  margin-bottom: 16px;
}
.render-sent strong { color: var(--paper); font-weight: 500; }
.render-sent a {
  color: var(--accent);
  border-bottom: 1px dotted currentColor;
}

/* ---------- "What your render shows" ---------- */
.render-covers {
  padding: clamp(90px, 11vw, 140px) 0;
  border-bottom: 1px solid var(--line);
}
.render-covers .eyebrow { color: var(--accent); margin-bottom: 20px; }
.render-covers h2 { margin-bottom: 56px; }
.render-covers-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}
.render-covers-card {
  padding: 28px 22px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: rgba(255,255,255,0.012);
}
.render-covers-num {
  font-family: var(--serif);
  font-style: italic;
  font-size: 24px;
  color: var(--accent);
  margin: 0 0 14px;
}
.render-covers-card h3 {
  font-family: var(--serif);
  font-size: 19px;
  font-weight: 400;
  margin: 0 0 12px;
}
.render-covers-card p {
  font-size: 13px;
  color: var(--muted);
  line-height: 1.7;
  margin: 0;
}
.render-covers-card p strong { color: var(--paper); font-weight: 500; }
.render-covers-card p em { color: var(--paper); font-style: italic; }
@media (max-width: 900px) {
  .render-covers-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 540px) {
  .render-covers-grid { grid-template-columns: 1fr; }
}

/* ---------- Full-service strip (build / install / landscape) ---------- */
.render-services {
  padding: clamp(90px, 11vw, 140px) 0;
}
.render-services .eyebrow { color: var(--accent); margin-bottom: 20px; }
.render-services h2 { margin-bottom: 56px; }
.render-services-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 28px;
}
.render-service {
  padding: 0;
}
.render-service-step {
  font-family: var(--serif);
  font-style: italic;
  font-size: 22px;
  color: var(--accent);
  margin: 0 0 16px;
}
.render-service h3 {
  font-family: var(--serif);
  font-size: 19px;
  font-weight: 400;
  margin: 0 0 12px;
}
.render-service p {
  font-size: 13px;
  color: var(--muted);
  line-height: 1.7;
  margin: 0;
}
.render-service p em { font-style: italic; color: var(--paper); }
@media (max-width: 900px) {
  .render-services-grid { grid-template-columns: repeat(2, 1fr); gap: 24px; }
}
@media (max-width: 540px) {
  .render-services-grid { grid-template-columns: 1fr; }
}

/* 4-column home proof points + highlight first card (free render offer) */
.home-points-grid-four {
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 28px !important;
}
.home-point-render {
  border-left: 2px solid var(--accent);
  padding-left: 22px;
}
.home-point-render h3 { color: var(--accent); }
@media (max-width: 1100px) {
  .home-points-grid-four { grid-template-columns: repeat(2, 1fr) !important; }
}
@media (max-width: 600px) {
  .home-points-grid-four { grid-template-columns: 1fr !important; }
  .home-point-render { padding-left: 16px; }
}

/* ---------- HOME — beyond the spa (wellness installs: sauna / halo / hyperbaric) ---------- */
.home-wellness {
  padding: clamp(60px, 8vw, 95px) 0;
  border-bottom: 1px solid var(--line);
}
.home-wellness-head {
  max-width: 720px;
  margin-bottom: 40px;
}
.home-wellness-head .eyebrow { color: var(--accent); margin-bottom: 20px; }
.home-wellness-head h2 { margin: 0 0 22px; }
.home-wellness-head h2 .muted { color: var(--muted); }
.home-wellness-lede {
  color: var(--muted);
  font-size: 16px;
  line-height: 1.7;
  margin: 0;
}
.home-wellness-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
}
.home-wellness-card {
  background: var(--bg);
  padding: 36px 30px;
}
.home-wellness-tag {
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 14px;
  font-weight: 500;
}
.home-wellness-card h3 {
  font-family: var(--serif);
  font-size: 22px;
  font-weight: 500;
  margin: 0 0 14px;
  color: var(--paper);
}
.home-wellness-card p {
  font-size: 14px;
  line-height: 1.7;
  color: var(--muted);
  margin: 0;
}
.home-wellness-foot {
  margin: 40px 0 0;
  font-size: 13px;
  color: var(--muted);
}
@media (max-width: 900px) {
  .home-wellness-grid { grid-template-columns: 1fr; }
}

/* ---------- HOME — magnesium-mineral water (easy / healing) ---------- */
.home-water {
  padding: clamp(60px, 8vw, 95px) 0;
  border-bottom: 1px solid var(--line);
}
.home-water-head {
  max-width: 720px;
  margin-bottom: 40px;
}
.home-water-head .eyebrow { color: var(--accent); margin-bottom: 20px; }
.home-water-head h2 { margin: 0 0 22px; }
.home-water-head h2 .muted { color: var(--muted); }
.home-water-lede {
  color: var(--muted);
  font-size: 16px;
  line-height: 1.7;
  margin: 0;
}
.home-water-lede strong { color: var(--paper); font-weight: 500; }
.home-water-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
}
.home-water-card {
  background: var(--bg);
  padding: 32px 28px;
}
.home-water-num {
  font-family: var(--serif);
  font-style: italic;
  font-size: 14px;
  color: var(--accent);
  margin: 0 0 14px;
}
.home-water-card h3 {
  font-family: var(--serif);
  font-size: 20px;
  font-weight: 500;
  margin: 0 0 12px;
  color: var(--paper);
}
.home-water-card p {
  font-size: 14px;
  line-height: 1.65;
  color: var(--muted);
  margin: 0;
}
@media (max-width: 1000px) {
  .home-water-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .home-water-grid { grid-template-columns: 1fr; }
}

/* ---------- HOME — two ways to work with us (kit vs full package) ---------- */
.home-package {
  padding: clamp(60px, 8vw, 95px) 0;
  border-bottom: 1px solid var(--line);
}
.home-package-head {
  max-width: 720px;
  margin-bottom: 40px;
}
.home-package-head .eyebrow { color: var(--accent); margin-bottom: 20px; }
.home-package-head h2 { margin: 0 0 22px; }
.home-package-head h2 .muted { color: var(--muted); }
.home-package-lede {
  color: var(--muted);
  font-size: 16px;
  line-height: 1.7;
  margin: 0;
}
.home-package-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}
.home-package-card {
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 36px 32px;
}
.home-package-card-full {
  border-color: rgba(184, 149, 106, 0.5);
  background: rgba(184, 149, 106, 0.03);
}
.home-package-tag {
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 16px;
  font-weight: 500;
}
.home-package-card h3 {
  font-family: var(--serif);
  font-size: 26px;
  font-weight: 500;
  margin: 0 0 16px;
  color: var(--paper);
}
.home-package-card p {
  font-size: 14.5px;
  line-height: 1.7;
  color: var(--muted);
  margin: 0 0 24px;
}
.home-package-card p strong { color: var(--paper); font-weight: 500; }
.home-package-link {
  font-size: 13px;
  letter-spacing: 0.04em;
  color: var(--accent);
  border-bottom: 1px solid currentColor;
  padding-bottom: 2px;
  transition: opacity 0.25s;
}
.home-package-link:hover { opacity: 0.7; }
@media (max-width: 700px) {
  .home-package-grid { grid-template-columns: 1fr; }
  .home-package-card { padding: 28px 24px; }
}

/* ---------- HOME — hot tub alternative comparison ---------- */
.home-vs {
  padding: clamp(60px, 8vw, 95px) 0;
  border-bottom: 1px solid var(--line);
}
.home-vs-head {
  max-width: 720px;
  margin-bottom: 40px;
}
.home-vs-head .eyebrow { color: var(--accent); margin-bottom: 20px; }
.home-vs-head h2 { margin: 0 0 22px; }
.home-vs-head h2 .muted { color: var(--muted); }
.home-vs-lede {
  color: var(--muted);
  font-size: 16px;
  line-height: 1.7;
  margin: 0;
}
.home-vs-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}
.home-vs-col {
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 32px;
}
.home-vs-col-nore {
  border-color: rgba(184, 149, 106, 0.5);
  background: rgba(184, 149, 106, 0.03);
}
.home-vs-col h3 {
  font-family: var(--serif);
  font-size: 22px;
  margin: 0 0 24px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--line);
}
.home-vs-col-nore h3 { color: var(--accent); }
.home-vs-col-alt h3 { color: var(--muted); }
.home-vs-col ul { list-style: none; margin: 0; padding: 0; }
.home-vs-col li {
  font-size: 14px;
  line-height: 1.6;
  color: var(--muted);
  padding: 12px 0 12px 26px;
  position: relative;
  border-bottom: 1px solid var(--line);
}
.home-vs-col li:last-child { border-bottom: none; }
.home-vs-col li strong { color: var(--paper); font-weight: 500; }
.home-vs-col-nore li::before {
  content: '+';
  position: absolute;
  left: 0;
  color: var(--accent);
  font-weight: 600;
}
.home-vs-col-alt li::before {
  content: '\2013';
  position: absolute;
  left: 0;
  color: var(--muted);
}
.home-vs-foot { margin: 40px 0 0; }
/* Three-column variant: Nore Haus soak pool vs. typical hot tub vs. typical pool.
   Stacks to 1 col on tablet/phone so the bullet lists stay readable. */
.home-vs-grid-three { grid-template-columns: repeat(3, 1fr); gap: 20px; }
.home-vs-grid-three .home-vs-col { padding: 28px; }
.home-vs-grid-three .home-vs-col h3 { font-size: 19px; }
.home-vs-grid-three .home-vs-col li { font-size: 13.5px; }
@media (max-width: 1080px) {
  .home-vs-grid-three { grid-template-columns: 1fr; }
}
@media (max-width: 700px) {
  .home-vs-grid { grid-template-columns: 1fr; }
  .home-vs-col { padding: 24px; }
}

/* ---------- HOME KIT CARDS — comparison-row layout
   Each card has the same Pool / Sauna / Extras structure so a visitor
   can scan ACROSS three cards and immediately see what changes.
   ---------- */
.home-kit-card {
  padding: 36px 32px 100px;
  /* Slight extra top padding for the "Most popular" badge to sit above the
     card without being clipped — also handles the cards without a badge. */
  padding-top: 36px;
  overflow: visible;
}
.home-kit-card-head {
  margin-bottom: 24px;
  padding-bottom: 22px;
  border-bottom: 1px solid var(--line);
}
.home-kit-step {
  display: inline-block;
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 18px;
  font-weight: 500;
}
.home-kit-size {
  font-family: var(--serif);
  font-size: 30px;
  font-weight: 400;
  margin: 0 0 6px;
  letter-spacing: -0.005em;
  line-height: 1.1;
  font-variation-settings: "opsz" 36;
}
.home-kit-cap {
  font-family: var(--sans);
  font-size: 13px;
  color: var(--muted);
  margin: 0;
}

/* ---------- The three comparison rows (Pool / Sauna / Extras) ---------- */
.home-kit-rows {
  margin: 0 0 18px;
}
.home-kit-rows > div {
  display: grid;
  grid-template-columns: 64px 1fr;
  gap: 14px;
  align-items: baseline;
  padding: 10px 0;
  border-bottom: 1px solid rgba(245, 241, 234, 0.04);
}
.home-kit-rows > div:last-child { border-bottom: none; }
.home-kit-rows dt {
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--muted);
  opacity: 0.75;
  font-weight: 500;
}
.home-kit-rows dd {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--paper);
}
.home-kit-rows dd strong {
  font-weight: 500;
}
.home-kit-rows dd.is-none {
  color: var(--muted);
  opacity: 0.4;
  font-style: normal;
}

.home-kit-card-foot {
  position: absolute;
  bottom: 28px;
  left: 32px;
  right: 32px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.home-kit-price-line {
  font-family: var(--serif);
  font-size: 14px;
  color: var(--muted);
  margin: 0;
}
.home-kit-price-line strong {
  font-size: 26px;
  color: var(--paper);
  font-weight: 400;
  margin-left: 4px;
}
.home-kit-arrow {
  position: static !important;
  font-size: 22px;
  color: var(--accent);
  opacity: 0.7;
  transition: transform 0.3s, opacity 0.3s;
}
.home-kit-card:hover .home-kit-arrow {
  transform: translateX(4px);
  opacity: 1;
}

/* Featured card price color */
.home-kit-featured .home-kit-headline { color: var(--accent); }

@media (max-width: 900px) {
  .home-kit-card { padding-bottom: 130px; }
}

/* ============================================================
   FINISHES PAGE — materials catalog (cladding, deck, interior, sauna)
   Modelled on competitor tile-options pages but adapted for our 4 layers.
   ============================================================ */

/* ---------- Sticky-ish quicknav inside page header ---------- */
.finish-quicknav {
  display: flex;
  gap: 24px;
  margin-top: 36px;
  padding-top: 24px;
  border-top: 1px solid var(--line);
  flex-wrap: wrap;
}
.finish-quicknav a {
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
  padding: 6px 0;
  border-bottom: 1px dotted currentColor;
  transition: opacity 0.25s;
}
.finish-quicknav a:hover { opacity: 0.7; }

/* ---------- Section wrapper ---------- */
.finish-section {
  padding: clamp(80px, 10vw, 130px) 0;
  border-bottom: 1px solid var(--line);
  scroll-margin-top: 110px; /* anchor-link offset under fixed nav */
}
.finish-section-alt {
  background: rgba(255, 255, 255, 0.01);
}
.finish-section-head {
  margin-bottom: 56px;
  max-width: 720px;
}
.finish-eyebrow {
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 18px;
  font-weight: 500;
}
.finish-section-head h2 { margin: 0 0 22px; }
.finish-section-head h2 em { font-style: italic; color: var(--accent); }
.finish-lede {
  color: var(--muted);
  font-size: 16px;
  line-height: 1.7;
  margin: 0;
}
.finish-lede strong { color: var(--paper); font-weight: 500; }
.finish-lede em { color: var(--paper); font-style: italic; }

/* ---------- Tier blocks (Included / Premium / Designer) ---------- */
.finish-tier {
  margin-bottom: 48px;
}
.finish-tier:last-child { margin-bottom: 0; }
.finish-tier-label {
  font-family: var(--serif);
  font-style: italic;
  font-size: 18px;
  color: var(--paper);
  margin: 0 0 22px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--line);
}
.finish-tier-label-designer {
  color: var(--accent);
}
.finish-tier-sub {
  margin: -10px 0 22px;
  font-size: 13px;
  color: var(--muted);
  font-style: italic;
}

/* ---------- Swatch grid ---------- */
.finish-swatch-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
}
.finish-swatch {
  display: flex;
  flex-direction: column;
  background: rgba(255, 255, 255, 0.012);
  border: 1px solid var(--line);
  border-radius: 6px;
  overflow: hidden;
  transition: border-color 0.25s, transform 0.25s, background 0.25s;
}
.finish-swatch:hover {
  border-color: rgba(184, 149, 106, 0.5);
  transform: translateY(-2px);
  background: rgba(184, 149, 106, 0.025);
}
.finish-swatch-fill {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  position: relative;
  overflow: hidden;
}
.finish-swatch-name {
  font-family: var(--serif);
  font-size: 17px;
  font-weight: 500;
  margin: 16px 16px 4px;
  color: var(--paper);
  line-height: 1.25;
}
.finish-swatch-name em { font-style: italic; color: var(--muted); font-size: 14px; font-weight: 400; }
.finish-swatch-desc {
  font-size: 12.5px;
  color: var(--muted);
  margin: 0 16px 12px;
  line-height: 1.5;
  flex-grow: 1;
}
.finish-swatch-price {
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 16px 16px;
  font-weight: 500;
  padding-top: 10px;
  border-top: 1px solid var(--line);
}

.finish-swatch-designer {
  border-color: rgba(184, 149, 106, 0.35);
  background: rgba(184, 149, 106, 0.02);
}
.finish-swatch-designer::before {
  content: 'Designer';
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 2;
  background: rgba(13, 12, 10, 0.9);
  color: var(--accent);
  font-size: 9px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: 4px 9px;
  border-radius: 999px;
  border: 1px solid rgba(184, 149, 106, 0.4);
  pointer-events: none;
}

@media (max-width: 1100px) { .finish-swatch-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 760px)  { .finish-swatch-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 460px)  { .finish-swatch-grid { grid-template-columns: 1fr; } }

/* ---------- Render CTA strip ---------- */
.finish-render {
  padding: clamp(100px, 12vw, 160px) 0;
  background:
    radial-gradient(circle at 70% 50%, rgba(184, 149, 106, 0.05) 0%, transparent 60%),
    var(--bg);
  text-align: center;
}
.finish-render-inner { max-width: 680px; margin: 0 auto; }
.finish-render .eyebrow { color: var(--accent); margin-bottom: 20px; }
.finish-render h2 { margin: 0 0 24px; }
.finish-render h2 em { font-style: italic; color: var(--accent); }
.finish-render p {
  color: var(--muted);
  font-size: 16px;
  line-height: 1.7;
  margin: 0 0 32px;
}
.finish-render p em { color: var(--paper); font-style: italic; }


/* ============================================================
   SWATCH FILLS — gradients standing in for real materials
   Replace each with a real <img> later when product photos arrive.
   ============================================================ */

/* CLADDING */
/* Richer brushed-steel swatch — diagonal sheen + fine brush grain + tonal depth.
   Stand-in until real product photos arrive. */
.swatch-brushed-steel  {
  background:
    linear-gradient(115deg, rgba(255,255,255,0.18) 0%, rgba(255,255,255,0) 35%, rgba(0,0,0,0.18) 100%),
    radial-gradient(ellipse at 30% 25%, #f0f0f2 0%, #c8c8cc 35%, #9a9a9e 70%, #5e5e62 100%);
}
.swatch-brushed-steel::after {
  content: ''; position: absolute; inset: 0;
  background:
    repeating-linear-gradient(105deg, transparent 0, transparent 1px, rgba(255,255,255,0.10) 1px, rgba(255,255,255,0.10) 2px),
    repeating-linear-gradient(105deg, transparent 0, transparent 6px, rgba(0,0,0,0.05) 6px, rgba(0,0,0,0.05) 7px);
  mix-blend-mode: overlay;
}
.swatch-cedar-wrap     { background: repeating-linear-gradient(180deg, #8b5a32 0px, #6b4022 6px, #8b5a32 12px, #a06840 18px); }
.swatch-matte-black    { background: linear-gradient(135deg, #1c1c1c 0%, #0d0d0d 100%); }
.swatch-shou-sugi-ban  { background: repeating-linear-gradient(180deg, #1a1a1a 0px, #0a0a0a 5px, #2a1a14 10px, #1c1010 15px); }
.swatch-stone-clad     { background: linear-gradient(135deg, #aaa294 0%, #8a8276 40%, #6a6258 80%, #807868 100%); }
.swatch-stone-clad::after {
  content: ''; position: absolute; inset: 0;
  background:
    radial-gradient(circle at 30% 40%, rgba(255,255,255,0.06) 0%, transparent 35%),
    radial-gradient(circle at 70% 60%, rgba(0,0,0,0.15) 0%, transparent 40%);
}
.swatch-bronze-patina  { background: linear-gradient(135deg, #6a4a30 0%, #8a6840 30%, #5a8060 60%, #4a6850 100%); }
.swatch-copper         { background: linear-gradient(135deg, #d98a5b 0%, #b56a3e 35%, #9c5530 65%, #c47a4c 100%); }
.swatch-champagne      {
  background:
    linear-gradient(115deg, rgba(255,255,255,0.18) 0%, rgba(255,255,255,0) 35%, rgba(0,0,0,0.12) 100%),
    radial-gradient(ellipse at 30% 25%, #e8d4a8 0%, #d4b886 35%, #b89868 70%, #8a6e44 100%);
}
.swatch-champagne::after {
  content: ''; position: absolute; inset: 0;
  background:
    repeating-linear-gradient(105deg, transparent 0, transparent 1px, rgba(255,255,255,0.08) 1px, rgba(255,255,255,0.08) 2px);
  mix-blend-mode: overlay;
}
.swatch-gunmetal       {
  background:
    linear-gradient(120deg, rgba(255,255,255,0.06) 0%, transparent 50%, rgba(0,0,0,0.25) 100%),
    radial-gradient(ellipse at 35% 30%, #5e5e63 0%, #45464b 40%, #2a2b2f 75%, #1a1b1e 100%);
}
.swatch-gunmetal::after {
  content: ''; position: absolute; inset: 0;
  background:
    repeating-linear-gradient(105deg, transparent 0, transparent 2px, rgba(255,255,255,0.04) 2px, rgba(255,255,255,0.04) 3px);
  mix-blend-mode: overlay;
}
.swatch-corten         { background: linear-gradient(135deg, #8a4a2a 0%, #6a3a20 40%, #4a2810 80%, #6a4030 100%); }
.swatch-corten::after  {
  content: ''; position: absolute; inset: 0;
  background:
    radial-gradient(circle at 25% 30%, rgba(0,0,0,0.2) 0%, transparent 30%),
    radial-gradient(circle at 75% 70%, rgba(255,200,100,0.1) 0%, transparent 35%);
}

/* DECK */
.swatch-concrete-pad   { background: linear-gradient(135deg, #b8b4ae 0%, #989488 50%, #807c70 100%); }
.swatch-concrete-pad::after {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(circle at 40% 60%, rgba(0,0,0,0.1) 0%, transparent 40%);
}
.swatch-flagstone      { background: linear-gradient(135deg, #a8967c 0%, #88765c 50%, #685640 100%); }
.swatch-flagstone::after {
  content: ''; position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 60% 40% at 30% 30%, rgba(0,0,0,0.15) 0%, transparent 50%),
    radial-gradient(ellipse 50% 60% at 70% 70%, rgba(255,255,255,0.06) 0%, transparent 50%);
}
.swatch-travertine-deck { background: linear-gradient(135deg, #d4c4a4 0%, #b8a884 50%, #988868 100%); }
.swatch-travertine-deck::after {
  content: ''; position: absolute; inset: 0;
  background: repeating-linear-gradient(95deg, transparent 0, transparent 8px, rgba(0,0,0,0.05) 8px, rgba(0,0,0,0.05) 9px);
}
.swatch-basalt         { background: linear-gradient(135deg, #2a2826 0%, #1a1816 100%); }
.swatch-basalt::after {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(circle at 30% 40%, rgba(255,255,255,0.04) 0%, transparent 50%);
}
.swatch-porcelain      { background: linear-gradient(135deg, #e8e4dc 0%, #c8c4bc 50%, #a8a49c 100%); }
.swatch-ipe            { background: linear-gradient(180deg, #5a3a20 0px, #6a4828 6px, #5a3a20 12px); }
.swatch-thermo-pine    { background: linear-gradient(180deg, #a07040 0px, #b08050 6px, #a07040 12px); }

/* INTERIOR (bench inlay) */
.swatch-stainless-bench{ background: linear-gradient(135deg, #d8d8d8 0%, #b8b8b8 50%, #989898 100%); }
.swatch-stainless-bench::after {
  content: ''; position: absolute; inset: 0;
  background: repeating-linear-gradient(90deg, transparent 0, transparent 2px, rgba(255,255,255,0.05) 2px, rgba(255,255,255,0.05) 3px);
}
.swatch-honed-travertine { background: linear-gradient(135deg, #e0d4b8 0%, #c4b89c 50%, #a89c80 100%); }
.swatch-black-basalt   { background: linear-gradient(135deg, #1a1a1a 0%, #0a0a0a 100%); }
.swatch-statuario      { background: linear-gradient(135deg, #f0eee8 0%, #d8d4ca 50%, #b8b4aa 100%); }
.swatch-statuario::after {
  content: ''; position: absolute; inset: 0;
  background:
    linear-gradient(115deg, transparent 30%, rgba(100,100,120,0.15) 32%, transparent 34%),
    linear-gradient(105deg, transparent 60%, rgba(100,100,120,0.1) 62%, transparent 64%);
}

/* Mosaic — radial dots */
.swatch-mosaic-blue {
  background:
    radial-gradient(circle at 20% 20%, #4a90b8 0%, #4a90b8 6%, transparent 7%),
    radial-gradient(circle at 50% 30%, #6ab0d8 0%, #6ab0d8 6%, transparent 7%),
    radial-gradient(circle at 80% 25%, #2a70a0 0%, #2a70a0 6%, transparent 7%),
    radial-gradient(circle at 30% 60%, #5aa0c8 0%, #5aa0c8 6%, transparent 7%),
    radial-gradient(circle at 70% 70%, #3a80b0 0%, #3a80b0 6%, transparent 7%),
    linear-gradient(135deg, #1a3a50 0%, #0a2030 100%);
}
.swatch-mosaic-pebble {
  background:
    radial-gradient(circle at 25% 25%, #786a58 0%, #786a58 8%, transparent 9%),
    radial-gradient(circle at 60% 30%, #988470 0%, #988470 7%, transparent 8%),
    radial-gradient(circle at 35% 65%, #685a48 0%, #685a48 9%, transparent 10%),
    radial-gradient(circle at 75% 70%, #a89478 0%, #a89478 7%, transparent 8%),
    linear-gradient(135deg, #4a3e30 0%, #2a2218 100%);
}
.swatch-mosaic-checker {
  background:
    conic-gradient(from 0deg at 25% 25%, #f0f0f0 0deg 90deg, #1a1a1a 90deg 180deg, #f0f0f0 180deg 270deg, #1a1a1a 270deg 360deg);
  background-size: 24px 24px;
}

/* Designer collab mosaics */
.swatch-collab-coastal {
  background:
    radial-gradient(circle at 30% 30%, #6abcd0 0%, #6abcd0 5%, transparent 6%),
    radial-gradient(circle at 60% 40%, #2a6080 0%, #2a6080 5%, transparent 6%),
    radial-gradient(circle at 40% 70%, #aedfe8 0%, #aedfe8 5%, transparent 6%),
    linear-gradient(135deg, #0e3045 0%, #1e5070 100%);
}
.swatch-collab-forest {
  background:
    radial-gradient(circle at 25% 30%, #2a5a30 0%, #2a5a30 6%, transparent 7%),
    radial-gradient(circle at 70% 60%, #4a7a48 0%, #4a7a48 6%, transparent 7%),
    radial-gradient(circle at 45% 80%, #1a3a20 0%, #1a3a20 6%, transparent 7%),
    linear-gradient(135deg, #0e2010 0%, #1e3a20 100%);
}
.swatch-collab-bespoke {
  background:
    conic-gradient(from 0deg, #b8956a, #d4b288, #8a6a40, #b8956a, #d4b288);
  filter: saturate(0.85);
}

/* SAUNA WOOD */
/* Richer red-cedar — irregular vertical wood grain layered over warm depth + a
   soft vignette. Stand-in until real cedar product photos arrive. */
.swatch-red-cedar      {
  background:
    repeating-linear-gradient(92deg, transparent 0, transparent 18px, rgba(0,0,0,0.06) 18px, rgba(0,0,0,0.06) 19px, transparent 19px, transparent 47px, rgba(0,0,0,0.04) 47px, rgba(0,0,0,0.04) 48px),
    repeating-linear-gradient(88deg, transparent 0, transparent 11px, rgba(255,255,255,0.05) 11px, rgba(255,255,255,0.05) 12px, transparent 12px, transparent 33px),
    radial-gradient(ellipse at 40% 30%, #c88460 0%, #a06840 35%, #8c5832 65%, #5a3220 100%);
}
.swatch-hemlock        { background: repeating-linear-gradient(180deg, #d4b88c 0px, #c0a478 5px, #d4b88c 10px); }
.swatch-thermo-aspen   { background: repeating-linear-gradient(180deg, #e8dcc4 0px, #d4c8b0 5px, #e8dcc4 10px); }
.swatch-thermo-pine-sauna { background: repeating-linear-gradient(180deg, #c48852 0px, #b07840 5px, #c48852 10px); }
.swatch-alder          { background: repeating-linear-gradient(180deg, #d8b8a0 0px, #c4a48c 5px, #d8b8a0 10px); }
.swatch-black-locust   { background: repeating-linear-gradient(180deg, #4a3a28 0px, #38281a 5px, #4a3a28 10px); }
.swatch-sapele         { background: repeating-linear-gradient(180deg, #6a3820 0px, #4a2410 5px, #6a3820 10px, #7a4828 15px); }

/* ---------- KITS PAGE: "Why stainless steel" block ---------- */
.kits-why {
  padding: clamp(80px, 10vw, 130px) 0;
}
.kits-why-head {
  max-width: 720px;
  margin-bottom: 40px;
}
.kits-why-head .eyebrow { color: var(--accent); margin-bottom: 20px; }
.kits-why-head h2 { margin: 0 0 22px; }
.kits-why-head h2 .muted { color: var(--muted); }
.kits-why-lede {
  color: var(--muted);
  font-size: 16px;
  line-height: 1.7;
  margin: 0;
}
.kits-why-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
}
.kits-why-card {
  background: var(--bg);
  padding: 32px 28px;
}
.kits-why-card h3 {
  font-family: var(--serif);
  font-size: 19px;
  font-weight: 500;
  margin: 0 0 12px;
  color: var(--paper);
}
.kits-why-card p {
  font-size: 14px;
  line-height: 1.65;
  color: var(--muted);
  margin: 0;
}
@media (max-width: 900px) {
  .kits-why-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .kits-why-grid { grid-template-columns: 1fr; }
}

/* ---------- KITS PAGE: "Standard equipment" block ---------- */
.kits-standard {
  padding: clamp(80px, 10vw, 130px) 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.kits-standard-head {
  margin-bottom: 56px;
  max-width: 720px;
}
.kits-standard-head .eyebrow { color: var(--accent); margin-bottom: 20px; }
.kits-standard-head h2 { margin: 0 0 22px; }
.kits-standard-lede {
  color: var(--muted);
  font-size: 16px;
  line-height: 1.7;
  margin: 0;
}
.kits-standard-lede a {
  color: var(--accent);
  border-bottom: 1px dotted currentColor;
}
.kits-standard-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 32px;
}
.kits-standard-col h3 {
  font-family: var(--serif);
  font-size: 18px;
  font-weight: 400;
  margin: 0 0 18px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--accent);
  color: var(--accent);
  letter-spacing: 0.01em;
}
.kits-standard-col ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
.kits-standard-col li {
  font-size: 13.5px;
  color: var(--muted);
  padding: 8px 0;
  border-bottom: 1px solid rgba(245, 241, 234, 0.05);
  line-height: 1.55;
  position: relative;
  padding-left: 16px;
}
.kits-standard-col li::before {
  content: '✓';
  position: absolute;
  left: 0;
  color: var(--accent);
  font-size: 11px;
  top: 9px;
}
.kits-standard-col li strong { color: var(--paper); font-weight: 500; }
.kits-standard-col li:last-child { border-bottom: none; }

.kits-standard-foot {
  margin-top: 48px;
  text-align: center;
  font-size: 14px;
  color: var(--muted);
}
.kits-standard-foot a {
  color: var(--accent);
  border-bottom: 1px dotted currentColor;
  margin-left: 8px;
  font-weight: 500;
}

@media (max-width: 1000px) {
  .kits-standard-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 540px) {
  .kits-standard-grid { grid-template-columns: 1fr; gap: 28px; }
}

/* ---------- KITS: jet spa — up close ---------- */
.kits-jetspa {
  padding: clamp(90px, 11vw, 150px) 0;
  border-bottom: 1px solid var(--line);
}
.kits-jetspa-head {
  max-width: 640px;
  margin-bottom: clamp(40px, 5vw, 64px);
}
.kits-jetspa-lede {
  margin-top: 20px;
  font-size: 15px;
  line-height: 1.7;
  color: var(--muted);
}
.kits-jetspa-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px;
}
.kits-jetspa-fig {
  margin: 0;
  overflow: hidden;
  border-radius: 8px;
  border: 1px solid var(--line);
  background: rgba(255,255,255,0.012);
}
.kits-jetspa-fig-lead {
  grid-column: 1 / -1;
}
.kits-jetspa-fig img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  aspect-ratio: 16 / 9;
}
.kits-jetspa-fig-lead img {
  aspect-ratio: 21 / 9;
}
.kits-jetspa-fig figcaption {
  padding: 14px 18px;
  font-size: 12.5px;
  color: var(--muted);
  border-top: 1px solid var(--line);
}
@media (max-width: 700px) {
  .kits-jetspa-grid { grid-template-columns: 1fr; }
  .kits-jetspa-fig img,
  .kits-jetspa-fig-lead img { aspect-ratio: 16 / 9; }
}

/* ---------- HOMEPAGE: "Customize every layer" preview ---------- */
.home-finishes {
  padding: clamp(70px, 9vw, 110px) 0;
  border-bottom: 1px solid var(--line);
  background: rgba(255,255,255,0.012);
}
.home-finishes-head {
  margin-bottom: 40px;
  max-width: 720px;
}
.home-finishes-head .eyebrow { color: var(--accent); margin-bottom: 20px; }
.home-finishes-head h2 { margin: 0 0 22px; }
.home-finishes-lede {
  color: var(--muted);
  font-size: 16px;
  line-height: 1.7;
  margin: 0;
}
.home-finishes-lede strong { color: var(--paper); font-weight: 500; }

.home-finishes-preview {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}
.home-finish-tile {
  display: flex;
  flex-direction: column;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 6px;
  overflow: hidden;
  transition: border-color 0.3s, transform 0.3s;
  color: var(--paper);
}
.home-finish-tile:hover {
  border-color: rgba(184, 149, 106, 0.55);
  transform: translateY(-2px);
}
.home-finish-swatch {
  display: block;
  width: 100%;
  aspect-ratio: 5 / 3;
  position: relative;
  overflow: hidden;
}
.home-finish-meta {
  padding: 20px 22px 24px;
}
.home-finish-num {
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 8px;
}
.home-finish-meta h3 {
  font-family: var(--serif);
  font-size: 19px;
  font-weight: 500;
  margin: 0 0 8px;
}
.home-finish-meta p {
  font-size: 13px;
  color: var(--muted);
  line-height: 1.55;
  margin: 0 0 14px;
}
.home-finish-count {
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 !important;
  padding-top: 12px;
  border-top: 1px solid var(--line);
}
.home-finishes-foot {
  margin-top: 40px;
  text-align: center;
}
@media (max-width: 1100px) {
  .home-finishes-preview { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 540px) {
  .home-finishes-preview { grid-template-columns: 1fr; }
}

/* Text-only variant — used when swatch imagery isn't ready. Three tiles wide,
   generous padding, an accent left-border to give each card visual weight. */
.home-finishes-preview-textonly {
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}
.home-finishes-preview-textonly .home-finish-tile {
  border-left: 2px solid rgba(184, 149, 106, 0.35);
  transition: border-color 0.3s, transform 0.35s cubic-bezier(0.23, 1, 0.32, 1), background 0.3s;
}
.home-finishes-preview-textonly .home-finish-tile:hover {
  border-left-color: var(--accent);
  background: rgba(184, 149, 106, 0.03);
}
.home-finishes-preview-textonly .home-finish-meta {
  padding: 36px 30px 32px;
}
.home-finishes-preview-textonly .home-finish-num {
  margin-bottom: 18px;
}
.home-finishes-preview-textonly .home-finish-meta h3 {
  font-size: 22px;
  margin-bottom: 14px;
}
.home-finishes-preview-textonly .home-finish-meta p {
  margin-bottom: 22px;
}
@media (max-width: 900px) {
  .home-finishes-preview-textonly { grid-template-columns: 1fr; }
}

/* ---------- HOMEPAGE: "As featured in" press strip ---------- */
.home-press {
  padding: clamp(60px, 8vw, 100px) 0;
  border-bottom: 1px solid var(--line);
  text-align: center;
}
.home-press-label {
  font-size: 11px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 32px;
}
.home-press-grid {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 40px 60px;
  padding: 0;
  margin: 0;
}
.home-press-grid li {
  font-family: var(--serif);
  font-size: 18px;
  font-weight: 400;
  color: var(--paper);
  opacity: 0.65;
  letter-spacing: 0.01em;
  transition: opacity 0.25s;
  font-style: italic;
}
.home-press-grid li:hover { opacity: 1; }
.home-press-footnote {
  margin-top: 28px;
  font-size: 11px;
  color: var(--muted);
  opacity: 0.6;
}
@media (max-width: 600px) {
  .home-press-grid { gap: 18px 32px; }
  .home-press-grid li { font-size: 15px; }
}

/* ---------- IMG inside finish swatches (real material photos) ---------- */
.finish-swatch-fill img,
.home-finish-swatch img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  z-index: 1;
  /* When the image loads it fully covers the CSS gradient fallback below. */
}
.finish-swatch-fill,
.home-finish-swatch {
  position: relative;
  overflow: hidden;
  background-color: var(--line); /* in case both gradient + img fail */
}

/* Subtle vignette so swatches feel like product photography even at small sizes */
.finish-swatch-fill::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 2;
  background: linear-gradient(180deg, rgba(0,0,0,0) 60%, rgba(0,0,0,0.18) 100%);
  pointer-events: none;
}

/* ---------- KITS PAGE: standard-equipment grid (3-col variant) ---------- */
.kits-standard-grid-three { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 900px) { .kits-standard-grid-three { grid-template-columns: 1fr; } }

/* ---------- KITS PAGE: "What we coordinate, but isn't in the kit price" ---------- */
.kits-coordinated {
  padding: clamp(80px, 10vw, 130px) 0;
  border-bottom: 1px solid var(--line);
  background:
    linear-gradient(180deg, rgba(184,149,106,0.018), transparent 30%),
    var(--bg);
}
.kits-coordinated-head {
  margin-bottom: 56px;
  max-width: 760px;
}
.kits-coordinated-head .eyebrow {
  color: var(--accent);
  margin-bottom: 20px;
}
.kits-coordinated-head h2 { margin: 0 0 22px; }
.kits-coordinated-lede {
  color: var(--muted);
  font-size: 16px;
  line-height: 1.7;
  margin: 0;
}
.kits-coordinated-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  list-style: none;
  padding: 0;
  margin: 0;
}
.kits-coordinated-grid li {
  padding: 26px 24px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: rgba(255,255,255,0.012);
  transition: border-color 0.25s, transform 0.25s;
}
.kits-coordinated-grid li:hover {
  border-color: rgba(184,149,106,0.4);
  transform: translateY(-1px);
}
.kits-coordinated-grid h4 {
  font-family: var(--serif);
  font-size: 17px;
  font-weight: 500;
  margin: 0 0 10px;
  color: var(--paper);
  letter-spacing: 0.005em;
}
.kits-coordinated-grid p {
  font-size: 13.5px;
  color: var(--muted);
  line-height: 1.65;
  margin: 0;
}
.kits-coordinated-grid p a {
  color: var(--accent);
  border-bottom: 1px dotted currentColor;
}
.kits-coordinated-foot {
  margin-top: 40px;
  font-size: 14px;
  color: var(--muted);
  font-style: italic;
  text-align: center;
}
@media (max-width: 1000px) {
  .kits-coordinated-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .kits-coordinated-grid { grid-template-columns: 1fr; }
}

/* ============================================================
   TYPOGRAPHY HARDENING — force every text-bearing element onto
   the Nore Haus font stack. Without this, form controls and a few
   others render in the browser's default system font.
   ============================================================ */
input, textarea, select, button, optgroup, option {
  font-family: var(--sans);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
input::placeholder, textarea::placeholder {
  font-family: var(--sans);
  font-weight: 400;
}
input, textarea, select {
  font-size: 15px;
  letter-spacing: 0.005em;
  color: var(--paper);
}
/* Select dropdown options can't always be styled, but try */
select {
  appearance: none;
  -webkit-appearance: none;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--accent) 50%),
    linear-gradient(135deg, var(--accent) 50%, transparent 50%);
  background-position:
    calc(100% - 18px) 50%,
    calc(100% - 13px) 50%;
  background-size: 5px 5px;
  background-repeat: no-repeat;
  padding-right: 36px !important;
}
/* Browser-default file input button — match the system font too */
::-webkit-file-upload-button { font: inherit; }

/* Definition lists, address blocks, blockquotes — make sure they use the right fonts */
address { font-family: var(--sans); font-style: normal; }
dl, dt, dd { font-family: var(--sans); }
blockquote {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 300;
  font-optical-sizing: auto;
  font-variation-settings: "opsz" 30;
}

/* Code-ish elements (we don't use them much but defensively) */
code, pre, kbd, samp { font-family: var(--sans); }

/* Subtle but important: H3/H4 should always be serif (some places might inherit) */
h1, h2, h3 {
  font-family: var(--serif);
  font-weight: 400;
  font-optical-sizing: auto;
  font-variation-settings: "opsz" 36;
  letter-spacing: -0.005em;
}
h4, h5, h6 {
  font-family: var(--sans);
  font-weight: 500;
  letter-spacing: 0.01em;
}

/* Better fractional + currency rendering — improves "$38,000", "8' × 10'", etc. */
.kit-price, .home-kit-price-line, .scenario-net, .earn-money {
  font-feature-settings: "lnum" on, "tnum" on, "ss01" on;
  font-variant-numeric: lining-nums tabular-nums;
}

/* Force list bullets to actually look like text, not bullets, on our lists */
ul, ol { list-style: none; }

/* ============================================================
   PRODUCT SHOWCASE — homepage, between hero and kit teasers.
   Auto-fades between the 3 kit product photos on a 12s loop so the
   visitor immediately sees "this is what they actually build."
   ============================================================ */
.product-showcase {
  padding: clamp(60px, 8vw, 95px) 0;
  border-bottom: 1px solid var(--line);
  background:
    radial-gradient(circle at 80% 30%, rgba(184,149,106,0.04) 0%, transparent 50%),
    var(--bg);
}
.product-showcase-inner {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: 56px;
  align-items: center;
}
.product-showcase-text .eyebrow {
  color: var(--accent);
  margin-bottom: 18px;
}
.product-showcase-text h2 {
  margin: 0 0 22px;
}
.product-showcase-text h2 em {
  font-style: italic;
  color: var(--accent);
}
.product-showcase-lede {
  color: var(--muted);
  font-size: 15.5px;
  line-height: 1.7;
  margin: 0 0 28px;
  max-width: 480px;
}
.product-showcase-bullets {
  list-style: none;
  padding: 0;
  margin: 0 0 36px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px 28px;
  max-width: 460px;
}
.product-showcase-bullets li {
  font-size: 13.5px;
  color: var(--paper);
  opacity: 0.88;
  padding: 6px 0;
  border-bottom: 1px solid rgba(245,241,234,0.04);
}

/* ---- Scroll-snap carousel: swipe on phone, drag/scroll on desktop ---- */
.product-showcase-stage {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
  /* No frame, no bg — carousel floats against the page. Still clipped so side
     slides don't bleed into the headline column. */
  overflow: hidden;
  background: transparent;
  /* Tight perspective for dramatic book-spine angles on side cards */
  perspective: 1100px;
  -webkit-perspective: 1100px;
  perspective-origin: center center;
}
/* 3D coverflow carousel — center slide popped forward, side slides angled
   back. JS applies is-active to the center, is-prev to the slide on the left,
   is-next to the slide on the right. All three are always present in the DOM,
   only their transforms change as the active slide cycles. */
.product-showcase-track {
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
}
/* 3D coverflow — three cards visible. Center card faces camera, side cards
   are angled inward (book-spine effect). All clipped inside the stage so
   nothing bleeds into the adjacent text column. */
.product-showcase-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
  transform-origin: center center;
  transform-style: preserve-3d;
  border-radius: 10px;
  overflow: hidden;
  background: var(--bg-warm);
  box-shadow: 0 14px 36px rgba(0,0,0,0.4);
  transition:
    transform 0.9s cubic-bezier(0.23, 1, 0.32, 1),
    opacity 0.7s ease,
    filter 0.7s ease;
  will-change: transform, opacity, filter;
}
.product-showcase-slide.is-active {
  transform: rotateY(0deg) translateX(0) translateZ(40px) scale(0.78);
  opacity: 1;
  z-index: 3;
  pointer-events: auto;
  cursor: default;
  box-shadow: 0 30px 60px -8px rgba(0,0,0,0.65);
}
.product-showcase-slide.is-prev {
  transform: translateX(-34%) translateZ(-40px) rotateY(45deg) scale(0.72);
  opacity: 0.7;
  z-index: 1;
  pointer-events: auto;
  cursor: pointer;
  filter: brightness(0.3) saturate(0.7) blur(1px);
}
.product-showcase-slide.is-next {
  transform: translateX(34%) translateZ(-40px) rotateY(-45deg) scale(0.72);
  opacity: 0.7;
  z-index: 1;
  pointer-events: auto;
  cursor: pointer;
  filter: brightness(0.3) saturate(0.7) blur(1px);
}
.product-showcase-slide.is-prev:hover,
.product-showcase-slide.is-next:hover {
  filter: brightness(0.6) saturate(0.9) blur(0);
  opacity: 0.95;
}
/* Meta strip only on the active slide */
.product-showcase-slide:not(.is-active) .product-showcase-slide-meta {
  opacity: 0;
}
.product-showcase-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transform: scale(1.02);
  transition: transform 1.6s cubic-bezier(0.23, 1, 0.32, 1);
  will-change: transform;
  pointer-events: none;
}
.product-showcase-slide.is-focused img { transform: scale(1.06); }
.product-showcase-slide-meta {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 24px 24px 24px;
  background: linear-gradient(to top, rgba(13,12,10,0.92) 0%, rgba(13,12,10,0.55) 55%, transparent 100%);
  color: var(--paper);
  display: flex;
  align-items: baseline;
  gap: 12px;
  flex-wrap: wrap;
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.23, 1, 0.32, 1);
}
.product-showcase-slide.is-focused .product-showcase-slide-meta {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0.15s;
}
.slide-num {
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--accent);
  font-weight: 500;
}
.slide-name {
  font-family: var(--serif);
  font-size: 21px;
  font-weight: 500;
  color: var(--paper);
}
.slide-spec {
  font-size: 13px;
  color: var(--muted);
  width: 100%;
  letter-spacing: 0.01em;
}

/* Media column wraps the carousel + nav so they share the right grid cell */
.product-showcase-media {
  display: flex;
  flex-direction: column;
  gap: 18px;
}
/* Kit nav strip — three buttons in a row directly below the carousel.
   Clearly signals "three kits to choose from," not just one image. */
.product-showcase-nav {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  border-top: 1px solid var(--line);
}
.product-showcase-navbtn {
  appearance: none;
  background: none;
  border: none;
  border-top: 2px solid transparent;
  margin-top: -1px;
  padding: 14px 10px 4px;
  font: inherit;
  cursor: pointer;
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: 4px;
  opacity: 0.55;
  transition:
    opacity 0.4s cubic-bezier(0.23, 1, 0.32, 1),
    border-color 0.4s ease;
}
.product-showcase-navbtn + .product-showcase-navbtn { border-left: 1px solid var(--line); }
.product-showcase-navbtn:hover { opacity: 0.85; }
.product-showcase-navbtn.is-active {
  opacity: 1;
  cursor: default;
  border-top-color: var(--accent);
}
.navbtn-num {
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 500;
}
.product-showcase-navbtn.is-active .navbtn-num { color: var(--accent); }
.navbtn-name {
  font-family: var(--serif);
  font-size: 17px;
  color: var(--paper);
  font-weight: 500;
  letter-spacing: 0.005em;
  line-height: 1.2;
}

@media (max-width: 900px) {
  .product-showcase-inner {
    grid-template-columns: 1fr;
    gap: 36px;
  }
  .product-showcase-bullets {
    grid-template-columns: 1fr;
  }
  .product-showcase-slide-meta { padding: 18px 18px 20px; }
  .slide-name { font-size: 18px; }
  .product-showcase-navbtn { padding: 12px 8px 4px; }
  .navbtn-name { font-size: 14.5px; }
  .navbtn-num { font-size: 9px; letter-spacing: 0.18em; }
}

/* Reduced-motion: kill the scale animation, keep the carousel scrollable */
@media (prefers-reduced-motion: reduce) {
  .product-showcase-track { scroll-behavior: auto; }
  .product-showcase-slide img,
  .product-showcase-slide-meta { transition: none; }
}

/* ---------- RENDER PAGE: compressed hero — form Step 01 should be visible
   without much scrolling. Smaller H1, no pillars in hero, scroll cue at end. ---------- */
.render-hero.render-hero-tight {
  padding: 130px 0 36px;
}
.render-hero-tight h1.display {
  font-size: clamp(32px, 4vw, 52px);
  margin-bottom: 18px;
}
.render-hero-tight .render-lede {
  margin-bottom: 24px;
  max-width: 640px;
  font-size: clamp(14px, 1.1vw, 17px);
}
.render-hero-scroll-cue {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding-top: 14px;
  border-top: 1px solid var(--line);
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
  opacity: 0.9;
}
.render-hero-scroll-cue svg {
  animation: scroll-cue-bounce 2.6s ease-in-out infinite;
}
@keyframes scroll-cue-bounce {
  0%, 100% { transform: translateY(0); opacity: 0.85; }
  50%      { transform: translateY(3px); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .render-hero-scroll-cue svg { animation: none; }
}

/* "What happens after you submit" — the 3 pillars relocated from the hero */
.render-pillars-section {
  padding: clamp(70px, 9vw, 110px) 0;
  border-bottom: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.012);
}
.render-pillars-section .eyebrow {
  color: var(--accent);
  margin-bottom: 16px;
}
.render-pillars-section h2 {
  margin-bottom: 44px;
}
.render-pillars-section .render-pillars {
  border-top: none;
  padding-top: 0;
  margin-top: 0;
}

/* Tighten the form section padding-top since the hero is shorter now */
.render-hero-tight + .render-form-section {
  padding-top: 36px;
}

/* ============================================================
   HOMEPAGE: compact "size strip" — replaces the old 3-card grid.
   The product showcase already shows the visuals; this strip is
   just size + price + link, single horizontal row per kit.
   Full kit detail (with photos + bullets) lives on kits.html.
   ============================================================ */
.home-sizes {
  padding: clamp(50px, 6vw, 80px) 0;
  border-bottom: 1px solid var(--line);
  background: var(--bg);
}
.home-sizes-label {
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--muted);
  text-align: center;
  margin: 0 0 36px;
  opacity: 0.7;
}
.home-size-row {
  display: grid;
  grid-template-columns: 1.4fr 1.6fr 2fr 1.5fr 32px;
  gap: 24px;
  align-items: baseline;
  padding: 26px 4px;
  border-top: 1px solid var(--line);
  color: var(--paper);
  transition: padding 0.3s cubic-bezier(.22,.61,.36,1), background 0.3s;
}
.home-size-row:last-of-type { border-bottom: 1px solid var(--line); }
.home-size-row:hover {
  padding-left: 18px;
  background: rgba(184, 149, 106, 0.025);
}
.home-size-num {
  font-family: var(--serif);
  font-size: 26px;
  font-weight: 400;
  letter-spacing: -0.005em;
  font-variation-settings: "opsz" 36;
}
.home-size-dims {
  font-family: var(--serif);
  font-size: 22px;
  font-weight: 300;
  color: var(--paper);
  font-variation-settings: "opsz" 24;
  font-variant-numeric: lining-nums tabular-nums;
}
.home-size-cap {
  font-size: 14px;
  color: var(--muted);
  line-height: 1.5;
}
.home-size-cap em {
  font-style: italic;
  color: var(--accent);
  margin-left: 4px;
}
.home-size-price {
  font-family: var(--serif);
  font-size: 22px;
  color: var(--paper);
  font-weight: 400;
  text-align: right;
  font-variant-numeric: lining-nums tabular-nums;
}
.home-size-arrow {
  font-size: 22px;
  color: var(--accent);
  opacity: 0.55;
  text-align: right;
  transition: transform 0.3s, opacity 0.3s;
}
.home-size-row:hover .home-size-arrow {
  transform: translateX(6px);
  opacity: 1;
}
.home-sizes-foot {
  margin-top: 32px;
  text-align: center;
  font-size: 13px;
  letter-spacing: 0.03em;
}
.home-sizes-foot a {
  color: var(--accent);
  border-bottom: 1px dotted currentColor;
  padding-bottom: 1px;
}

@media (max-width: 900px) {
  .home-size-row {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto;
    gap: 4px 18px;
    padding: 18px 4px;
    align-items: baseline;
  }
  .home-size-num   { grid-column: 1; grid-row: 1; font-size: 20px; }
  .home-size-dims  { grid-column: 1; grid-row: 2; font-size: 16px; opacity: 0.85; }
  .home-size-cap   { grid-column: 2; grid-row: 1 / span 2; font-size: 12.5px; line-height: 1.45; align-self: center; }
  .home-size-price { grid-column: 1 / -1; grid-row: 3; font-size: 17px; text-align: left; padding-top: 6px; }
  .home-size-arrow { display: none; }
  .home-size-row:hover { padding-left: 8px; }
}
@media (max-width: 480px) {
  /* Tighter again on small phones */
  .home-size-num { font-size: 18px; }
  .home-size-dims { font-size: 15px; }
  .home-size-price { font-size: 16px; }
  .home-size-cap em { display: block; margin-left: 0; margin-top: 2px; }
}

/* Inline finishes link inside home-sizes footer */
.home-sizes-foot-divider { color: var(--muted); opacity: 0.4; margin: 0 10px; }
.home-sizes-foot-finishes {
  color: var(--accent);
  border-bottom: 1px dotted currentColor;
  padding-bottom: 1px;
}

/* ---------- HERO SPEC STRIP — moved out of the hero into its own band ---------- */
.hero-specs-band {
  padding: clamp(28px, 4vw, 48px) 0;
  border-bottom: 1px solid var(--line);
  background: var(--bg);
}
.hero-specs-band .hero-specs {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  margin: 0;
  padding: 0;
  border-top: none;
  max-width: none;
}
.hero-specs-band .hero-specs > div {
  padding-right: 16px;
}
@media (max-width: 760px) {
  .hero-specs-band .hero-specs { grid-template-columns: repeat(2, 1fr); gap: 18px; }
}

/* ============================================================
   MOBILE BREATHING ROOM — phone-specific tightening
   Goal: keep depth on desktop, scan-ability on phone. Cuts vertical
   padding, trims dense ledes, hides the lowest-priority comparison
   column, and drops a couple of redundant bullets on cramped screens.
   ============================================================ */
@media (max-width: 640px) {
  /* 1. Shrink vertical breathing on the wordiest sections so a phone
        visitor doesn't scroll past dead space between content. */
  .home-water,
  .home-vs,
  .home-package,
  .home-wellness,
  .home-finishes,
  .home-points,
  .kits-why,
  .product-showcase {
    padding-top: clamp(48px, 9vw, 70px);
    padding-bottom: clamp(48px, 9vw, 70px);
  }
  /* Heads + ledes lose their generous bottom-margin */
  .home-water-head,
  .home-vs-head,
  .home-package-head,
  .home-wellness-head,
  .home-finishes-head,
  .kits-why-head {
    margin-bottom: 32px;
  }
  /* Body ledes tighten to phone-friendly size */
  .home-water-lede,
  .home-vs-lede,
  .home-package-lede,
  .home-wellness-lede,
  .home-finishes-lede,
  .kits-why-lede,
  .product-showcase-lede {
    font-size: 14.5px;
    line-height: 1.6;
  }

  /* 2. Three-way comparison: drop the third column ("typical pool")
        on phone. Most thermal-spa shoppers are weighing hot tub first;
        pool comparison is a desktop-only depth piece. */
  .home-vs-grid-three .home-vs-col:nth-child(3) { display: none; }
  .home-vs-grid-three .home-vs-col { padding: 22px; }
  .home-vs-grid-three .home-vs-col li { font-size: 13px; padding: 10px 0 10px 22px; }
  /* Trim the 6th bullet on each remaining column — keep the 5 strongest */
  .home-vs-grid-three .home-vs-col li:nth-child(6) { display: none; }

  /* 3. Magnesium-mineral cards — tighten so 4 cards don't feel
        endless. Body copy trims, padding compresses. */
  .home-water-card { padding: 22px 20px; }
  .home-water-card h3 { font-size: 17px; margin-bottom: 8px; }
  .home-water-card p { font-size: 13.5px; line-height: 1.55; }

  /* 4. Wellness install + kits-why cards: same tightening */
  .home-wellness-card { padding: 24px 22px; }
  .home-wellness-card h3 { font-size: 18px; }
  .home-wellness-card p { font-size: 13.5px; line-height: 1.55; }
  .kits-why-card { padding: 22px 20px; }
  .kits-why-card h3 { font-size: 17px; }
  .kits-why-card p { font-size: 13px; }

  /* 5. Product-showcase bullet list — drop the two least-essential
        bullets on phone (smart-ready controls + warranty). The first
        three say what matters most. */
  .product-showcase-bullets li:nth-child(n+4) { display: none; }

  /* 6. Hero tertiary line ("Want the whole yard handled?") is a
        nice-to-have on desktop; on phone it crowds the CTAs. */
  .hero-tertiary { display: none; }

  /* 7. Section-head h2 displays tighter line-height on mobile */
  .display-md { line-height: 1.15; }
}

/* For phones tighter than 400px, an extra notch of compression */
@media (max-width: 400px) {
  .home-water-head h2,
  .home-vs-head h2,
  .home-package-head h2,
  .home-wellness-head h2 {
    font-size: 26px;
  }
}

/* Bullet-proof safety: long compound words (e.g. "magnesium-mineral",
   "halotherapy", "architecturally") get hyphenated rather than overflowing.
   Phones only — desktop has room for the full type. */
@media (max-width: 640px) {
  .display, .display-md, .hero-content .display,
  .home-vs-head h2, .home-water-head h2, .home-package-head h2,
  .home-wellness-head h2, .home-finishes-head h2, .kits-why-head h2,
  .journal-title, .page-header h1 {
    overflow-wrap: anywhere;
    hyphens: auto;
    -webkit-hyphens: auto;
    word-break: normal;
  }
  /* Trim the display floor for genuinely small phones so the headline
     never claims more horizontal room than the column has. */
  .display { font-size: clamp(30px, 9vw, 64px); }
  .display-md { font-size: clamp(26px, 7.5vw, 44px); }
  /* Container gutter on phone — leave the type a little more breathing
     room from the edge instead of touching the screen frame. */
  .container { padding-left: 22px; padding-right: 22px; }
  /* Long eyebrows wrap cleanly instead of clipping */
  .eyebrow { white-space: normal; }
}