/* ============================================================
   DESIGN TOKENS
   ============================================================ */
:root {
  --crimson:        #582323;
  --crimson-hover:  #6c2c2c;
  --crimson-active: #4a1d1d;
  --ink:            #0a0705;
  --warm-white:     #f5f0e8;
  --soft-white:     rgba(245, 240, 232, 0.92);
  --muted-white:    rgba(245, 240, 232, 0.62);
  --faint-white:    rgba(245, 240, 232, 0.28);
  --hairline:       rgba(255, 255, 255, 0.13);
  --panel-bg:       rgba(10, 7, 5, 0.80);
  --rail-bg:        rgba(10, 7, 5, 0.60);

  --ease-out:    cubic-bezier(0.25, 1, 0.5, 1);   /* smooth ease-out-quart — refined, not punchy  */
  --ease-spring: cubic-bezier(0.4, 0, 0.2, 1);    /* smooth ease-in-out — deliberate, cinematic   */
  --ease-soft:   cubic-bezier(0.33, 1, 0.68, 1);  /* ease-out-cubic — gentle, premium             */
}

/* ============================================================
   RESET & BASE
   ============================================================ */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  height: 100%;
  /* Brand-dark first paint — avoids a white flash before the hero video/CSS load */
  background: #0a0705;
}

/*
  Body is stripped back to typography only.
  All layout, background, and overflow live in .site-frame
  so there is one unified viewport shell with no separate
  browser-painted background section behind the bottom bar.
*/
body {
  height: 100dvh;
  overflow: hidden;
  cursor: none;
  color: var(--warm-white);
  font-family: 'DM Sans', sans-serif;
  font-weight: 500;
  font-size: 14px;
  line-height: 25px;
  letter-spacing: -0.02em;
}

img {
  display: block;
}

button {
  cursor: none;
  border: none;
  background: none;
  font-family: inherit;
  color: inherit;
}

/* Screen-reader only utility */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ============================================================
   SITE FRAME — single full-viewport shell
   All children (background, top-bar, content, progress,
   bottom-bar) live in this one flex column.
   No separate browser-background section appears because
   the background is position: absolute inside this container.
   ============================================================ */
.site-frame {
  position: relative;
  height: 100dvh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--ink); /* fallback while bg-image loads */
  padding-bottom: 20px;   /* lifts progress indicator off the bottom edge */
}

/* ============================================================
   PAGE BACKGROUND — absolute inside .site-frame (not fixed)
   ============================================================ */
.page-bg {
  position: absolute;  /* absolute within .site-frame, not fixed to viewport */
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

/* Cinematic vignette — frames the blurred backdrop, matches the homepage.
   Static (paints once); sits above the bg-image/overlay but below all content. */
.page-bg::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(130% 110% at 50% 42%,
      transparent 50%,
      rgba(10, 7, 5, 0.30) 82%,
      rgba(10, 7, 5, 0.56) 100%);
}

.bg-overlay {
  position: absolute;
  inset: 0;
  /*
    Two gradient layers composited together — first is on top:

    Layer 1 (top): heavy black top → fades to 40% at bottom
    Layer 2 (bottom): fully transparent top → fully opaque #0C0C0C at bottom

    Together they produce a cinematic vignette: deep black at the very
    top, the background photo visible in the vertical middle, then
    darkening back to near-black at the bottom.
  */
  background:
    linear-gradient(rgba(0,0,0,0.50), rgba(0,0,0,0.50)), /* flat solid overlay — screenshot 1 */
    linear-gradient(
      to bottom,
      rgba(0, 0, 0, 1.00)  0%,    /* top — full black                       */
      rgba(0, 0, 0, 0.95) 27%,    /* 42% × 65% ≈ 27%                        */
      rgba(0, 0, 0, 0.83) 45%,    /* 69% × 65% ≈ 45%                        */
      rgba(0, 0, 0, 0.72) 58%,    /* 89% × 65% ≈ 58%                        */
      rgba(0, 0, 0, 0.40) 65%     /* gradient ends at 65% of screen         */
    ),
    linear-gradient(
      to bottom,
      rgba(0,   0,   0,   0)    80%,   /* transparent until 80% of screen */
      rgba(12,  12,  12,  1.00) 100%   /* fades to near-black at very bottom */
    );
}

/* ============================================================
   TOP BAR
   — item 7: padding-top 20px (was height: 70px / padding: 0)
   ============================================================ */
.top-bar {
  position: relative;
  z-index: 20;
  flex-shrink: 0;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 36px; /* item 7: top padding now 20px */
}

/* item 3: go-back-btn vertical padding 15px top and bottom */
.go-back-btn {
  display: flex;
  align-items: center;
  gap: 9px;
  width: fit-content;
  height: fit-content;
  font-family: 'Montserrat', sans-serif;
  font-weight: 500;
  font-size: 10px;
  letter-spacing: 0.20em;
  text-transform: uppercase;
  color: var(--muted-white);
  padding: 15px;    /* item 3: was 10px 15px → now 15px all sides */
  border-radius: 20px;
  background: #1A1A1A;
  border: 0.5px solid #404040;
  transition:
    color 260ms var(--ease-out),
    background 260ms var(--ease-out),
    border-color 260ms var(--ease-out);
}

.go-back-btn:hover {
  color: var(--soft-white);
  background: #242424;
  border-color: #555555;
}

.go-back-btn:focus-visible {
  outline: 1px solid var(--faint-white);
  outline-offset: 2px;
}

.go-back-icon {
  flex-shrink: 0;
  opacity: 0.7;
  transition: opacity 260ms var(--ease-out), transform 240ms var(--ease-out);
}

.go-back-btn:hover .go-back-icon {
  opacity: 1;
  transform: translateX(-2px);
}

/* Resume Progress button — top-right, mirrors Go Back */
.resume-btn {
  display: flex;
  align-items: center;
  gap: 9px;
  width: fit-content;
  height: fit-content;
  font-family: 'Montserrat', sans-serif;
  font-weight: 500;
  font-size: 10px;
  letter-spacing: 0.20em;
  text-transform: uppercase;
  color: var(--muted-white);
  padding: 15px;
  border-radius: 20px;
  background: #1A1A1A;
  border: 0.5px solid #404040;
  cursor: pointer;
  margin-left: auto;
  transition:
    color 260ms var(--ease-out),
    background 260ms var(--ease-out),
    border-color 260ms var(--ease-out);
}

.resume-btn:hover {
  color: var(--soft-white);
  background: #242424;
  border-color: #555555;
}

.resume-btn:focus-visible {
  outline: 1px solid var(--faint-white);
  outline-offset: 2px;
}

.resume-btn__icon {
  flex-shrink: 0;
  opacity: 0.7;
  transition: opacity 260ms var(--ease-out), transform 240ms var(--ease-out);
}

.resume-btn:hover .resume-btn__icon {
  opacity: 1;
  transform: translateX(2px);
}

/* Logo */
.logo-wrap {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
}

.logo {
  height: 54px;
  width: auto;
}

/* Right spacer — balances go-back-btn for logo centering */
.top-bar-spacer {
  min-width: 110px;
  flex-shrink: 0;
}

/* ============================================================
   CONSULTATION AREA
   — item 4: gap 40px (was 24px)
   — no longer needs bottom padding for absolute bottom-bar
   ============================================================ */
.consultation-area {
  position: relative;
  z-index: 10;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 40px;        /* item 4: was 24px */
  padding: 12px 24px 90px; /* 90px bottom shifts the visual center upward */
}

/* ============================================================
   QUESTION HEADING
   ============================================================ */
.question-heading {
  font-family: 'Cormorant Garamond', serif;
  font-weight: 500;
  font-size: 40px;
  line-height: 47px;
  letter-spacing: -0.05em;
  color: var(--warm-white);
  text-align: center;
}

/* ============================================================
   SELECTOR FRAME
   — item 2: width 950px (was 900px), transparent bg
   ============================================================ */
.selector-wrapper {
  position: relative;
  width: 950px;     /* item 2 */
  flex-shrink: 0;
}

.selector-frame {
  display: flex;
  width: 950px;     /* item 2 */
  height: 315px;
  border-radius: 2px;    /* item 2: was 8px; matches panel and rail clip */
  overflow: hidden;
  background: transparent; /* item 2: was var(--ink); gap between main & rail shows bg */
  box-shadow: 0 8px 48px rgba(0, 0, 0, 0.55);
}

/* ── Left Info Panel ──
   item 1: fill #121212, border 0.5px #686868 on top/bottom/left,
           radius 2px 0 0 2px, no backdrop-filter
   ── */
.selector-info-panel {
  flex-shrink: 0;
  width: 264px;
  background: rgba(18, 18, 18, 0.80);    /* item 1 */
  /* no backdrop-filter — item 1 */
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 10px;
  padding: 36px 30px;
  border-top:    0.5px solid #595959;
  border-right:  none;
  border-bottom: 0.5px solid #595959;
  border-left:   0.5px solid #595959;
  border-radius: 2px 0 0 2px;         /* item 1: TL TR BR BL */
  position: relative;
  z-index: 2;
}

.style-label {
  font-family: 'Montserrat', sans-serif;
  font-weight: 300; /* item: was 500 */
  font-size: 16px;
  letter-spacing: 0.2em;
  line-height: 1.5em;
  text-transform: uppercase;
  color: var(--warm-white);
  transition: opacity 280ms var(--ease-soft), transform 280ms var(--ease-soft);
}

.style-description {
  font-family: 'DM Sans', sans-serif;
  font-weight: 500;
  font-size: 14px;
  line-height: 1.8em;
  letter-spacing: -0.02em;
  color: var(--muted-white);
  transition: opacity 280ms var(--ease-soft), transform 280ms var(--ease-soft);
}

.style-label.is-fading,
.style-description.is-fading {
  opacity: 0;
  transform: translateY(-4px);
}

/* ── Main Hero Image ──
   item 8: border-radius 0 2px 2px 0 (TL TR BR BL)
   ── */
.selector-main-wrap {
  flex: 1;
  overflow: hidden;
  position: relative;
  min-width: 0;
  border-radius: 0 2px 2px 0; /* item 8: right corners rounded */
}

.selector-main-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  transition: opacity 400ms var(--ease-soft), filter 260ms var(--ease-out);
}

/* fade layer for crossfade */
.main-img-fade {
  position: absolute;
  inset: 0;
  background: var(--ink);
  opacity: 0;
  pointer-events: none;
  transition: opacity 220ms var(--ease-out);
}

.main-img-fade.active {
  opacity: 1;
}

/* ── Thumbnail Rail ──
   item 6: rail width updated to 91px (75px thumb + 8px padding × 2)
   ── */
.selector-rail {
  flex-shrink: 0;
  width: 91px;       /* item 6: was 112px */
  background: var(--rail-bg);
  /* backdrop-filter removed; info panel also removed for visual consistency */
  display: flex;
  flex-direction: column;
  gap: 10px;         /* 10px between thumbnails */
  padding: 0 8px;    /* flush top & bottom; keep 8px left/right so thumbs sit in 91px rail */
  margin-left: 6px; /* gap between main image and rail — matches interior panel gap */
  overflow-y: auto;
  position: relative;
  z-index: 2;
  scrollbar-width: none;
}

.selector-rail::-webkit-scrollbar {
  display: none;
}

/* ── Thumbnail Items ──
   item 6: fixed 75×45px (was flex: 1 / min-height: 0)
   ── */
.thumb-item {
  position: relative;
  width: 75px;
  flex: 1;        /* fills available height so top/bottom thumbnails are flush with frame edges */
  min-height: 0;
  border-radius: 3px;
  overflow: hidden;
  cursor: none;
  border: 1.5px solid rgba(245, 240, 232, 0.22);
  outline: none;
  transition:
    border-color 280ms var(--ease-out),
    box-shadow 280ms var(--ease-out),
    transform 200ms var(--ease-out);
}

.thumb-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  pointer-events: none;
  user-select: none;
  transform: scale(1);
  transition: transform 500ms var(--ease-soft);
}

.thumb-item:hover img {
  transform: scale(1.07);
}

/* Unselected overlay: 40% black, always on */
.thumb-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.40);
  transition: background 280ms var(--ease-out);
  pointer-events: none;
}

/* ── Hover ──
   No transform: scale on the thumb-item itself — the rail's overflow-y:auto
   implicitly clips overflow-x too, so a scaled thumbnail gets its border
   clipped on the sides. Inner image zoom (scale 1.07) provides the depth
   effect instead, safely contained by the thumb-item's own overflow:hidden.
   Compound selectors have specificity 0-3-0, beating is-active/is-selected
   (0-2-0), so border-color holds steady when JS adds classes mid-hover. */
.thumb-item:hover,
.thumb-item.is-active:hover,
.thumb-item.is-selected:hover {
  border-color: rgba(245, 240, 232, 0.75);
}

.thumb-item:hover .thumb-overlay {
  background: rgba(0, 0, 0, 0.28);
}

/* ── Focus visible ── */
.thumb-item:focus-visible {
  border-color: rgba(245, 240, 232, 0.5);
  box-shadow: 0 0 0 2px rgba(245, 240, 232, 0.2);
}

/* ── Active (currently previewed, not selected) ── */
.thumb-item.is-active {
  border-color: rgba(245, 240, 232, 0.48);
}

/* ── Selected but not active: dark overlay, white border, internal check ── */
.thumb-item.is-selected {
  border-color: rgba(255, 255, 255, 0.50);
}

.thumb-item.is-selected .thumb-overlay {
  background: rgba(0, 0, 0, 0.40);
}

/* ── Active + Selected: clear overlay, full white border, glow ── */
.thumb-item.is-active.is-selected {
  border-color: #FFFFFF;
  box-shadow: 0 0 10px 2px rgba(255, 255, 255, 0.25);
}

.thumb-item.is-active.is-selected .thumb-overlay {
  background: rgba(0, 0, 0, 0); /* fully clear — image at 100% */
}


/* Internal checkmark — always hidden.
   All selection feedback is handled by the external .ext-check column. */
.thumb-check {
  display: none;
}

/* External check — appears to the right of the active+selected thumb
   item 2: updated left to match new 950px frame width            */
.check-col {
  position: absolute;
  top: 0;
  left: 950px;
  width: 26px;
  height: 315px;
  pointer-events: none;
  z-index: 5;
}

.ext-check {
  position: absolute;
  left: 5px;
  top: 0;          /* set by JS */
  width: 18px;
  height: 18px;
  opacity: 0;
  transform: scale(0.5); /* entrance start state */
  transition:
    opacity 360ms var(--ease-soft),
    transform 360ms var(--ease-soft),
    top 200ms var(--ease-out);
}

/* ============================================================
   SUBMIT BUTTON
   ============================================================ */
.submit-row {
  display: flex;
  justify-content: center;
  position: relative;
  z-index: 2; /* above selector-wrapper--slider (z-index:1) whose ::before wash extends below the frame */
  /* Hidden until an option is selected — JS adds .is-visible */
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(6px);
  transition:
    opacity    320ms var(--ease-soft),
    transform  320ms var(--ease-soft),
    visibility 320ms;
}

.submit-row.is-visible {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0);
}

.submit-btn {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  background: var(--crimson);
  color: var(--warm-white);
  font-family: 'Montserrat', sans-serif;
  font-weight: 300;
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  padding: 15px 28px;
  border-radius: 10px;
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.12) inset,
    0 0 4px 1px rgba(255, 255, 255, 0.08);
  transition:
    background 220ms var(--ease-out),
    box-shadow 220ms var(--ease-out),
    transform 160ms var(--ease-out);
}

.submit-btn:hover {
  background: var(--crimson-hover);
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.16) inset,
    0 0 8px 2px rgba(255, 255, 255, 0.10);
}

.submit-btn:active {
  background: var(--crimson-active);
  transform: scale(0.975);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.08) inset;
}

.submit-btn:focus-visible {
  outline: 1px solid var(--faint-white);
  outline-offset: 3px;
}

.submit-arrow {
  width: 13px;
  height: 13px;
  flex-shrink: 0;
  filter: brightness(0) saturate(0) invert(1);
}

/* ============================================================
   PROGRESS INDICATOR — 4-section consultation tracker
   ─────────────────────────────────────────────────────────
   State vocabulary (data-state attributes):
     .pi-cell:  completed | active | future
     .pi-dot:   done | current | upcoming | future
     .pi-line:  done | bridge | upcoming | future-dashed
   To advance JS: update data-state values, CSS handles rest.
   ============================================================ */
.progress-indicator {
  flex-shrink: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 6px 0 10px;
  position: relative;
  z-index: 10;
}

/* 4-column grid: auto columns size to their content so clusters
   sit flush with no empty padding. column-gap controls the
   exact spacing between sections.                            */
.pi-grid {
  display: grid;
  grid-template-columns: auto auto auto auto;
  grid-template-rows: 14px auto;
  row-gap: 8px;
  column-gap: 52px;
}

/* ── Track row cells ── */
.pi-cell--track {
  display: flex;
  align-items: center;
}

/* All sections: cluster is centered so label aligns with it */
.pi-cell--track[data-state="completed"],
.pi-cell--track[data-state="active"],
.pi-cell--track[data-state="future"] {
  justify-content: center;
}

/* ── Label row cells ── */
.pi-cell--label {
  display: flex;
  justify-content: center;
  align-items: flex-start;
}

/* ── Dots ── */
.pi-dot {
  flex-shrink: 0;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  transition: background 400ms var(--ease-out), width 400ms var(--ease-out), height 400ms var(--ease-out), transform 160ms var(--ease-out);
}
.pi-dot:hover { transform: scale(1.5); }

.pi-dot[data-state="done"]     { background: rgba(139, 58, 58, 0.72); }
.pi-dot[data-state="current"]  { width: 28px; height: 8px; border-radius: 4px; background: var(--crimson); }
.pi-dot[data-state="upcoming"] { background: rgba(245, 240, 232, 0.24); }
.pi-dot[data-state="future"]   { background: rgba(255, 255, 255, 0.15); }

/* ── Connector lines ── */
.pi-line {
  flex-shrink: 0;
  height: 1.5px;
  transition: background 400ms var(--ease-out);
}

/* Done + upcoming: invisible fixed-width spacers — no connecting line between dots */
.pi-line[data-state="done"]     { flex: 0 0 8px; height: 0; background: transparent; }
.pi-line[data-state="bridge"]   { flex: 0 0 8px; height: 0; background: transparent; }
.pi-line[data-state="upcoming"] { flex: 0 0 8px; height: 0; background: transparent; }

/* Dashed lines: fixed width flanking the future-section dot */
.pi-line[data-state="future-dashed"] {
  flex: 0 0 28px;
  height: 0;
  border-top: 1.5px dashed rgba(255, 255, 255, 0.13);
}

/* ── Progress pill — treated as a regular done dot ── */
.pi-pill {
  flex-shrink: 0;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: rgba(139, 58, 58, 0.72);
  transition: background 400ms var(--ease-out);
}


/* ── Section labels ── */
.pi-label {
  font-family: 'Montserrat', sans-serif;
  font-weight: 400;
  font-size: 8px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  white-space: nowrap;
  transition: color 400ms var(--ease-out);
}

.pi-cell--label[data-state="completed"] .pi-label,
.pi-cell--label[data-state="active"]    .pi-label { color: rgba(245, 240, 232, 0.75); }
.pi-cell--label[data-state="future"]    .pi-label { color: rgba(245, 240, 232, 0.24); }

/* ── Back-navigable progress dots ── */
.pi-clickable {
  cursor: pointer;
  transition: transform 160ms var(--ease-out), opacity 160ms var(--ease-out);
}
.pi-clickable:hover {
  transform: scale(1.45);
  opacity: 1;
}
.pi-clickable:focus-visible {
  outline: 1px solid rgba(245, 240, 232, 0.45);
  outline-offset: 3px;
  border-radius: 2px;
}

/* ============================================================
   CHAT INPUT WRAP
   — Floats absolute at bottom-right of .site-frame.
     No bar or background behind it — the hero image
     (background) is fully visible behind the input.
   ============================================================ */
.chat-input-wrap {
  position: absolute;
  bottom: 45px;
  right: 60px;
  z-index: 20;
  display: flex;
  align-items: center;
  gap: 8px;
}

.chat-field-inner {
  position: relative; /* contains the absolute mic button */
  display: flex;
  align-items: center;
}

/* item 9: width 320px, height 50px, radius 25px */
.chat-input {
  width: 330px;
  height: 50px;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid var(--hairline);
  border-radius: 25px;
  padding: 0 54px 0 48px; /* right clears mic; left clears upload icon */
  box-shadow: 0 0 4px 1px rgba(153, 153, 153, 0.18);
  font-family: 'DM Sans', sans-serif;
  font-weight: 500;
  font-size: 13px;
  letter-spacing: -0.01em;
  color: var(--soft-white);
  outline: none;
  transition:
    border-color 280ms var(--ease-out),
    background 280ms var(--ease-out),
    box-shadow 280ms var(--ease-out);
}

/* item 9: placeholder font-weight 400 */
.chat-input::placeholder {
  color: var(--muted-white);
  font-weight: 400; /* item 9 */
}

.chat-input:focus {
  border-color: rgba(245, 240, 232, 0.35);
  background: rgba(255, 255, 255, 0.11);
  box-shadow: 0 0 0 3px rgba(139, 58, 58, 0.12);
}

/* Mic button — crimson frame, 28×28, 5px radius.
   Absolute inside .chat-field-inner, pinned to the right of the input. */
.mic-btn {
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #582323;
  border-radius: 5px;
  transition: background 240ms var(--ease-out);
}

.mic-btn img {
  width: 13px;
  height: 13px;
  filter: brightness(0) saturate(0) invert(1);
  opacity: 0.85;
  transition: opacity 240ms var(--ease-out);
}

.mic-btn:hover {
  background: #6c2c2c;
}

.mic-btn:hover img {
  opacity: 1;
}

.mic-btn:focus-visible {
  outline: 1px solid var(--faint-white);
  outline-offset: 2px;
}

/* Hidden file input injected by initUploadButtons() */
.upload-file-input { display: none; }

/* Upload / attach button — chat input, left side */
.chat-upload-btn {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  color: rgba(245, 240, 232, 0.38);
  transition: color 200ms var(--ease-out);
}
.chat-upload-btn svg         { width: 10px; height: 10px; }
.chat-upload-btn:hover       { color: rgba(245, 240, 232, 0.82); }
.chat-upload-btn:focus-visible {
  outline: 1px solid var(--faint-white);
  outline-offset: 3px;
  border-radius: 2px;
}

/* Upload / attach button — answer text fields, left side */
.features-chat__upload {
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  color: rgba(245, 240, 232, 0.35);
  transition: color 200ms var(--ease-out);
}
.features-chat__upload:hover       { color: rgba(245, 240, 232, 0.8); }
.features-chat__upload:focus-visible {
  outline: 1px solid var(--faint-white);
  outline-offset: 3px;
  border-radius: 2px;
}

.chat-history-btn {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 1px solid var(--hairline);
  background: rgba(255, 255, 255, 0.05);
  flex-shrink: 0;
  transition:
    background 240ms var(--ease-out),
    border-color 240ms var(--ease-out);
}

.chat-history-btn img {
  width: 12px;
  height: 12px;
  transition: opacity 240ms var(--ease-out);
}

.chat-history-btn:hover {
  background: rgba(255, 255, 255, 0.10);
  border-color: rgba(255, 255, 255, 0.24);
}

.chat-history-btn:hover img {
  opacity: 0.9;
}

.chat-history-btn:focus-visible {
  outline: 1px solid var(--faint-white);
  outline-offset: 2px;
}

/* Chat-history button reflects the open panel */
.chat-input-wrap.is-chat-open .chat-history-btn {
  background: rgba(139, 58, 58, 0.22);
  border-color: rgba(184, 92, 92, 0.45);
}

/* ============================================================
   CHAT PANEL — the conversation Rose opens above the composer
   ─────────────────────────────────────────────────────────
   A compact concierge thread, NOT a chatbot widget. Anchored
   bottom-right above the input; the input stays as the composer.
   Matches the rose-hint surface: warm-dark, sharp 2px corners,
   deep soft shadow, ROSE editorial header, Cormorant for Rose.
   Injected by consultation-core.js; toggled via .is-chat-open.
   ============================================================ */
.chat-panel {
  position: absolute;
  bottom: calc(100% + 16px);
  right: 0;
  width: 100%;
  height: 430px;
  max-height: min(62vh, 460px);
  display: flex;
  flex-direction: column;
  background: rgba(14, 12, 12, 0.96);
  border-radius: 2px;
  box-shadow:
    0 26px 70px rgba(0, 0, 0, 0.62),
    0  4px 16px rgba(0, 0, 0, 0.34);
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px) scale(0.985);
  transform-origin: bottom right;
  pointer-events: none;
  transition:
    opacity   360ms var(--ease-soft),
    transform 360ms var(--ease-soft),
    visibility 0s linear 360ms;
  z-index: 12;
}
.chat-input-wrap.is-chat-open .chat-panel {
  opacity: 1;
  visibility: visible;
  transform: none;
  pointer-events: auto;
  transition:
    opacity   420ms var(--ease-soft),
    transform 420ms var(--ease-soft);
}

/* Hairline stem from panel down toward the history button — matches the hint */
.chat-panel::after {
  content: '';
  position: absolute;
  bottom: -17px;
  right: 17px;
  width: 1px;
  height: 16px;
  background: linear-gradient(to bottom, rgba(245, 240, 232, 0.14), transparent);
  pointer-events: none;
}

/* When the panel is open, the hint is folded into the thread — keep it hidden */
.chat-input-wrap.is-chat-open .rose-hint {
  opacity: 0;
  pointer-events: none;
}

/* ── Header — ROSE label + extending rule, mirrors .rose-hint__name ── */
.chat-panel__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 14px 12px 12px 16px;
  border-bottom: 0.5px solid rgba(245, 240, 232, 0.08);
  flex-shrink: 0;
}
.chat-panel__name {
  display: flex;
  align-items: center;
  flex: 1;
  font-family: 'Montserrat', sans-serif;
  font-size: 7.5px;
  font-weight: 300;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: rgba(245, 240, 232, 0.40);
}
.chat-panel__butterfly {
  display: block;
  width: auto;
  height: 12px;
  margin-right: 7px;
  opacity: 0.62;
  flex-shrink: 0;
}
.chat-panel__name::after {
  content: '';
  flex: 1;
  height: 0.5px;
  margin-left: 9px;
  background: rgba(245, 240, 232, 0.08);
}
.chat-panel__close {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'DM Sans', sans-serif;
  font-size: 17px;
  line-height: 1;
  color: rgba(245, 240, 232, 0.40);
  border-radius: 50%;
  transition: color 200ms var(--ease-out), background 200ms var(--ease-out);
}
.chat-panel__close:hover {
  color: rgba(245, 240, 232, 0.85);
  background: rgba(255, 255, 255, 0.06);
}
.chat-panel__close:focus-visible {
  outline: 1px solid var(--faint-white);
  outline-offset: 1px;
}

/* ── Thread — scrollable conversation ── */
.chat-panel__thread {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 18px 16px 20px;
  scrollbar-width: thin;
  scrollbar-color: rgba(245, 240, 232, 0.18) transparent;
}
.chat-panel__thread::-webkit-scrollbar { width: 6px; }
.chat-panel__thread::-webkit-scrollbar-thumb {
  background: rgba(245, 240, 232, 0.16);
  border-radius: 3px;
}
.chat-panel__thread::-webkit-scrollbar-track { background: transparent; }

/* ── Messages ── */
.chat-msg {
  max-width: 88%;
  animation: fadeUp 360ms var(--ease-soft) both;
}
/* Rose — her spoken voice: warm serif, left, no bubble (like the hint) */
.chat-msg--rose {
  align-self: flex-start;
  font-family: 'Cormorant Garamond', serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 1.55;
  letter-spacing: 0.01em;
  color: rgba(245, 240, 232, 0.74);
}
/* Visitor — quieter typed bubble, right */
.chat-msg--user {
  align-self: flex-end;
  font-family: 'DM Sans', sans-serif;
  font-weight: 500;
  font-size: 13px;
  line-height: 1.5;
  letter-spacing: -0.01em;
  color: var(--soft-white);
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid var(--hairline);
  border-radius: 13px 13px 4px 13px;
  padding: 9px 13px;
}

/* Rose "typing" — three pulsing dots, reuses the ack dot keyframe */
.chat-msg.chat-typing {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 0;
}
.chat-typing span {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: rgba(245, 240, 232, 0.5);
  animation: ackDotPulse 1.4s ease-in-out infinite;
}
.chat-typing span:nth-child(2) { animation-delay: 0.22s; }
.chat-typing span:nth-child(3) { animation-delay: 0.44s; }

@media (prefers-reduced-motion: reduce) {
  .chat-panel { transition: opacity 200ms linear, visibility 0s linear 200ms; transform: none; }
  .chat-input-wrap.is-chat-open .chat-panel { transition: opacity 200ms linear; transform: none; }
  .chat-msg { animation: none; }
  .chat-typing span { animation: none; opacity: 0.55; }
}

/* ── Responsive — panel widens to the viewport on small screens ── */
@media (max-width: 600px) {
  .chat-panel {
    width: calc(100vw - 32px);
    right: 0;
    height: 60vh;
  }
}

/* ============================================================
   SELECTABLE-OPTION APPEAR CUE
   Options/cards/chips: briefly flash their hover state, peaking
   at 60% of the animation then settling back to rest.
   Sliders + text-field answers: keep a warm-white glow at 60%.
   One class (.is-appear-cued) for everything — CSS differentiates
   per element type. Added by consultation-core.js, removed after
   the animation completes.
   ============================================================ */

/* — Hover-flash animations (thumbnails, option labels, chips, cards, circles) — */
@keyframes appearHoverThumb {
  60% { border-color: rgba(245, 240, 232, 0.75); }
}
@keyframes appearHoverBg {
  60% { background: rgba(255, 255, 255, 0.07); }
}
@keyframes appearHoverLift {
  60% { background: rgba(255, 255, 255, 0.07); transform: translateY(-2px); }
}
@keyframes appearHoverLiftSubtle {
  60% { background: rgba(255, 255, 255, 0.035); transform: translateY(-1px); }
}
@keyframes appearHoverCircleGlow {
  60% { background: rgba(255, 255, 255, 0.07); box-shadow: 0 0 12px 5px rgba(245, 240, 232, 0.16); }
}

/* — Glow animations (sliders + text fields) — */
@keyframes appearGlowSlider {
  0%   { box-shadow: 0 0 0 1.5px rgba(245, 240, 232, 0.45), 0 0 10px 3px rgba(88, 35, 35, 0.38); transform: translate(-50%, -50%) scale(1); }
  50%  { box-shadow: 0 0 0 1.5px rgba(245, 240, 232, 0.62), 0 0 18px 6px rgba(88, 35, 35, 0.52), 0 0 26px 8px rgba(245, 240, 232, 0.07); transform: translate(-50%, -50%) scale(1.12); }
  100% { box-shadow: 0 0 0 1.5px rgba(245, 240, 232, 0.45), 0 0 10px 3px rgba(88, 35, 35, 0.38); transform: translate(-50%, -50%) scale(1); }
}
@keyframes appearGlowFieldLine {
  0%, 100% { box-shadow: 0 0 0 0 rgba(245, 240, 232, 0); }
  60%      { box-shadow: 0 0 9px 1px rgba(245, 240, 232, 0.55); }
}
@keyframes appearGlowFieldText {
  0%, 100% { filter: drop-shadow(0 0 0 rgba(245, 240, 232, 0)); }
  60%      { filter: drop-shadow(0 0 7px rgba(245, 240, 232, 0.50)); }
}

/* Default: background lift (selector-option, journey circles, etc.) */
.is-appear-cued { animation: appearHoverBg 1000ms var(--ease-soft) !important; }

/* Thumbnails: border brightens */
.thumb-item.is-appear-cued { animation: appearHoverThumb 1000ms var(--ease-soft) !important; }

/* Chips + cards: background lift + subtle rise */
.res-card.is-appear-cued           { animation: appearHoverLift        1000ms var(--ease-soft) !important; }
.room-chip.is-appear-cued          { animation: appearHoverLiftSubtle  1000ms var(--ease-soft) !important; }
.journey-stage__circle.is-appear-cued { animation: appearHoverCircleGlow 1000ms var(--ease-soft) !important; }

/* Sliders: warm-white glow */
.sqft-slider__thumb.is-appear-cued { animation: appearGlowSlider 1000ms var(--ease-soft) !important; }

/* Text-field answers: underline + placeholder glow */
.features-chat__input-wrap.is-appear-cued::after         { animation: appearGlowFieldLine 1200ms var(--ease-soft) !important; }
.features-chat__input-wrap.is-appear-cued .features-chat__input { animation: appearGlowFieldText 1200ms var(--ease-soft) !important; }

@media (prefers-reduced-motion: reduce) {
  .is-appear-cued,
  .features-chat__input-wrap.is-appear-cued::after,
  .features-chat__input-wrap.is-appear-cued .features-chat__input { animation: none !important; }
}

/* ============================================================
   PAGE ENTRANCE ANIMATION
   ============================================================ */
@keyframes fadeUp {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.question-heading {
  animation: fadeUp 800ms var(--ease-soft) both;
  animation-delay: 100ms;
}

.selector-wrapper {
  animation: fadeUp 900ms var(--ease-soft) both;
  animation-delay: 220ms;
}

/* .submit-row has no entrance animation — JS controls its visibility */

.progress-indicator {
  animation: fadeUp 700ms var(--ease-soft) both;
  animation-delay: 440ms;
}

.chat-input-wrap {
  animation: fadeUp 700ms var(--ease-soft) both;
  animation-delay: 160ms;
}

/* ============================================================
   INFO PANEL — entering state (snap before animate-in)
   ============================================================ */
.style-label.is-entering,
.style-description.is-entering {
  opacity: 0;
  transform: translateY(4px);
}

/* ============================================================
   MAIN IMAGE — blur bridge during crossfade
   ============================================================ */
.selector-main-img.is-crossfading {
  filter: blur(2px);
}

/* ============================================================
   SUBMIT — arrow nudge on hover + first-selection pulse
   ============================================================ */
.submit-arrow {
  transition: transform 240ms var(--ease-out);
}

.submit-btn:hover .submit-arrow {
  transform: translateX(4px);
}

@keyframes submitPulse {
  0%   {
    box-shadow:
      0 0 0 1px rgba(255,255,255,0.12) inset,
      0 0 4px 1px rgba(255,255,255,0.08);
  }
  50%  {
    box-shadow:
      0 0 0 1px rgba(245,240,232,0.32) inset,
      0 0 18px 5px rgba(245,240,232,0.10);
  }
  100% {
    box-shadow:
      0 0 0 1px rgba(255,255,255,0.12) inset,
      0 0 4px 1px rgba(255,255,255,0.08);
  }
}

.submit-btn.is-pulsing {
  animation: submitPulse 700ms var(--ease-soft) forwards;
}

/* ============================================================
   CUSTOM CURSOR
   ============================================================ */
/* Override all system cursors so our custom one is the only cursor */
html,
input,
a,
[role="option"] {
  cursor: none;
}

.cursor {
  position: fixed;
  top: 0;
  left: 0;
  width: 0;
  height: 0;
  pointer-events: none;
  z-index: 99999;
  opacity: 0; /* revealed by JS on first mousemove */
  transition: opacity 300ms var(--ease-out);
  will-change: transform;
}

.cursor-ring {
  position: absolute;
  top: 0;
  left: 0;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: 1px solid rgba(245, 240, 232, 0.80);
  background: transparent;
  transform: translate(-50%, -50%);
  transition:
    width  320ms var(--ease-soft),
    height 320ms var(--ease-soft),
    background 320ms var(--ease-soft),
    border-color 320ms var(--ease-soft);
}

.cursor.is-hovering .cursor-ring {
  width: 22px;
  height: 22px;
  background: rgba(139, 58, 58, 0.14);
  border-color: rgba(245, 240, 232, 0.50);
}

/* Warm candlelight glow trailing the cursor — rides the cursor layer (no extra JS) */
.cursor-glow {
  position: absolute;
  top: 0;
  left: 0;
  width: 280px;
  height: 280px;
  transform: translate(-50%, -50%);
  pointer-events: none;
  background: radial-gradient(circle,
    rgba(220, 185, 148, 0.10) 0%,
    rgba(220, 185, 148, 0.05) 32%,
    transparent 64%);
}

/* ============================================================
   REDUCED MOTION
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 1ms !important;
    animation-delay: 1ms !important;
    transition-duration: 1ms !important;
  }
}

/* ============================================================
   RESPONSIVE — keep the frame readable at smaller viewports
   ============================================================ */
@media (max-width: 1000px) {
  .selector-wrapper,
  .selector-frame {
    width: calc(100vw - 48px);
  }

  .selector-info-panel {
    width: 200px;
    padding: 24px 20px;
  }

  /* Keep rail at fixed width; thumb-items stay 75×45px */
  .selector-rail {
    width: 91px;
  }

  .question-heading {
    font-size: 34px;
    line-height: 42px;
  }

  .check-col {
    left: calc(100vw - 48px);
  }
}

@media (max-width: 860px) {
  .site-frame {
    overflow: auto;
  }

  .selector-frame {
    flex-direction: column;
    width: calc(100vw - 32px);
    height: auto;
  }

  .selector-info-panel {
    width: 100%;
    height: auto;
    padding: 20px 24px;
    border-right: none;
    border-top:    0.5px solid #686868;
    border-bottom: 0.5px solid #686868;
    border-left:   0.5px solid #686868;
    border-radius: 2px 2px 0 0;
    justify-content: flex-start;
  }

  .selector-main-wrap {
    width: 100%;
    height: 220px;
    border-radius: 0;
  }

  .selector-rail {
    width: 100%;
    height: auto;
    flex-direction: row;
    flex-wrap: wrap;
    border-left: none;
    border-top: 1px solid var(--hairline);
    gap: 6px;
    padding: 8px;
    margin-left: 0;
  }

  /* Thumbnails go back to flexible layout in the row */
  .thumb-item {
    flex: 1 1 calc(20% - 6px);
    width: auto;
    height: 80px;
  }

  .question-heading {
    font-size: 28px;
    line-height: 36px;
  }

  .question-heading br {
    display: none;
  }

  .consultation-area {
    gap: 28px;
  }
}

/* ============================================================
   INTERIOR STYLE SELECTOR
   All styles scoped under .selector-frame--interior so there
   is zero interference with the Architectural Styles selector.
   ============================================================ */

/* Wrapper — matches 950px architectural width */
.selector-wrapper--interior {
  position: relative;
  width: 950px;
  flex-shrink: 0;
}

/* Frame */
.selector-frame--interior {
  width: 950px;
  height: 315px;
  display: flex;
  border-radius: 2px;
  overflow: hidden;
  box-shadow: 0 8px 48px rgba(0, 0, 0, 0.55);
}

/* ── Image group: 85% of frame ── */
.selector-frame--interior .selector-image-group {
  flex: 0 0 85%;
  height: 100%;
  display: flex;
  gap: 6px;
  background: transparent;
  overflow: hidden;
  min-width: 0;
}

/* Room panel */
.selector-frame--interior .selector-room-image {
  position: relative;
  height: 100%;
  overflow: hidden;
  min-width: 0;
  transition:
    flex    300ms var(--ease-soft),
    opacity 260ms var(--ease-soft);
}

.selector-frame--interior .selector-room-image.is-large  { flex: 64 1 0; }
.selector-frame--interior .selector-room-image.is-narrow { flex: 16 1 0; cursor: none; }
.selector-frame--interior .selector-room-image.is-narrow:hover { flex: 23 1 0; }

/* Room photo */
.selector-frame--interior .selector-room-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  pointer-events: none;
  transform: scale(1);
  transition:
    opacity   260ms var(--ease-soft),
    filter    220ms var(--ease-out),
    transform 500ms var(--ease-soft);
}

/* Narrow panel — subtle zoom on hover for depth */
.selector-frame--interior .selector-room-image.is-narrow:hover img {
  transform: scale(1.05);
}

/* Crossfade: fade the entire panel (img + overlay together) so the
   dark overlay never flashes before the new image appears. Blur + scale
   stay on the img for cinematic depth as the panel fades out. */
.selector-frame--interior .selector-room-image.is-crossfading {
  opacity: 0;
}

.selector-frame--interior .selector-room-image.is-crossfading img {
  filter: blur(4px);
  transform: scale(0.97);
}

/* Overlay — darkens inactive panels */
.selector-frame--interior .room-overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
  transition: background 280ms var(--ease-out);
}

.selector-frame--interior .selector-room-image.is-large  .room-overlay { background: transparent; }
.selector-frame--interior .selector-room-image.is-narrow .room-overlay { background: rgba(0, 0, 0, 0.62); }
.selector-frame--interior .selector-room-image.is-narrow:hover .room-overlay { background: rgba(0, 0, 0, 0.42); }

/* ── Option column: 15% of frame ── */
.selector-frame--interior .selector-options {
  flex: 0 0 15%;
  height: 100%;
  display: flex;
  flex-direction: column;
  background: rgba(18, 18, 18, 0.80);
  box-shadow: inset 0 0 0 0.5px #595959;
}

/* Option row */
.selector-frame--interior .selector-option {
  flex: 1;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: none;
  outline: none;
  overflow: hidden;
  border-bottom: 0.5px solid rgba(255, 255, 255, 0.07);
  transition:
    background  220ms var(--ease-out),
    box-shadow  220ms var(--ease-out);
}

/* Left accent — grows from center when focused+selected */
.selector-frame--interior .selector-option::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 2px;
  background: rgba(245, 240, 232, 0.32);
  transform: scaleY(0);
  transform-origin: center;
  transition: transform 320ms var(--ease-soft);
}

.selector-frame--interior .selector-option:last-child { border-bottom: none; }

/* Label text */
.selector-frame--interior .selector-option-label {
  font-family: 'Montserrat', sans-serif;
  font-weight: 500;
  font-size: 10px;
  letter-spacing: 0.20em;
  text-transform: uppercase;
  color: rgba(245, 240, 232, 0.38);
  pointer-events: none;
  user-select: none;
  transition:
    color          220ms var(--ease-out),
    letter-spacing 320ms var(--ease-soft);
}

/* Hover */
.selector-frame--interior .selector-option:hover { background: rgba(255, 255, 255, 0.07); }
.selector-frame--interior .selector-option:hover .selector-option-label {
  color: rgba(245, 240, 232, 0.72);
  letter-spacing: 0.26em;
}

/* Previewing — JS class that persists while the mouse is on the images
   triggered by this option, so the visual feedback doesn't vanish mid-examination. */
.selector-frame--interior .selector-option.is-previewing { background: rgba(255, 255, 255, 0.07); }
.selector-frame--interior .selector-option.is-previewing .selector-option-label {
  color: rgba(245, 240, 232, 0.72);
  letter-spacing: 0.26em;
}

/* Focus visible */
.selector-frame--interior .selector-option:focus-visible {
  box-shadow: inset 0 0 0 1px rgba(245, 240, 232, 0.35);
}

/* Selected */
.selector-frame--interior .selector-option.is-selected {
  background: rgba(100, 50, 50, 0.20);
  box-shadow:
    inset 0 0 0 0.5px rgba(150, 78, 78, 0.62),
    inset 0 1px 0 rgba(188, 98, 98, 0.22),
    inset 0 0 20px rgba(100, 50, 50, 0.13),
    0 0 18px rgba(100, 50, 50, 0.22);
}
.selector-frame--interior .selector-option.is-selected .selector-option-label {
  color: rgba(245, 240, 232, 0.95);
}

/* Focused + selected: left accent grows in via ::before */
.selector-frame--interior .selector-option.is-selected.is-focused {
  background: rgba(100, 50, 50, 0.20);
}
.selector-frame--interior .selector-option.is-selected.is-focused::before {
  transform: scaleY(1);
}
.selector-frame--interior .selector-option.is-selected.is-focused .selector-option-label {
  color: var(--warm-white);
}

/* ── Interior responsive ── */
@media (max-width: 960px) {
  .selector-wrapper--interior,
  .selector-frame--interior { width: calc(100vw - 48px); }
}

@media (max-width: 860px) {
  .selector-frame--interior {
    flex-direction: column;
    height: auto;
  }
  .selector-frame--interior .selector-image-group {
    flex: none;
    width: 100%;
    height: 180px;
  }
  .selector-frame--interior .selector-options {
    flex: none;
    width: 100%;
    flex-direction: row;
    border-left: none;
    border-top: 0.5px solid rgba(255, 255, 255, 0.07);
  }
  .selector-frame--interior .selector-option {
    flex: 1 1 20%;
    min-height: 44px;
    border-bottom: none;
    border-right: 0.5px solid rgba(255, 255, 255, 0.07);
  }
  .selector-frame--interior .selector-option:last-child { border-right: none; }
}

/* ============================================================
   QUESTION SUBTEXT — parenthetical qualifier line in heading
   ============================================================ */
.question-heading .question-subtext {
  font-size: 0.72em;           /* ~29px relative to 40px heading */
  letter-spacing: -0.025em;
  color: rgba(245, 240, 232, 0.60);
}

/* ============================================================
   SQUARE FOOTAGE SLIDER
   All styles scoped under .selector-wrapper--slider /
   .selector-frame--slider so nothing bleeds into other screens.
   ============================================================ */

/* ── Wrapper & frame ── */
.selector-wrapper--slider {
  position: relative;
  width: 780px;
  flex-shrink: 0;
  /* Stacking context so ::before at z-index:-1 sits behind
     the slider content but above the page background image. */
  z-index: 1;
}


/* No background panel — the slider floats open on the dark bg,
   giving it a different visual weight from the enclosed frames. */
.selector-frame--slider {
  position: relative;
  z-index: 1; /* above the ::before wash */
  width: 780px;
}

/* ── Slider root ──
   padding-top reserves vertical space for the floating tooltip.
   The tooltip is position:absolute, top:0, so it lives in this
   padding zone without pushing the track down further.          */
.sqft-slider {
  position: relative;
  width: 100%;
  padding-top: 80px;
  outline: none;
  -webkit-user-select: none;
  user-select: none;
}

/* ── Tooltip ── */
.sqft-slider__tooltip {
  position: absolute;
  top: 0;
  /* left set by JS */
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  pointer-events: auto;
  cursor: none;
  /* Transition only transform (for smoothness) — left is set directly */
}

/* Connector stem: fades from muted-white down to transparent,
   bridging tooltip to track without a harsh line.              */
.sqft-slider__tooltip::after {
  content: '';
  display: block;
  width: 1px;
  height: 18px;
  margin-top: 7px;
  background: linear-gradient(
    to bottom,
    rgba(245, 240, 232, 0.32),
    transparent
  );
  flex-shrink: 0;
}

.sqft-tooltip__value {
  font-family: 'Cormorant Garamond', serif;
  font-weight: 500;
  font-size: 38px;
  line-height: 1;
  letter-spacing: -0.04em;
  color: var(--warm-white);
  white-space: nowrap;
}

.sqft-tooltip__unit {
  font-family: 'Montserrat', sans-serif;
  font-weight: 400;
  font-size: 8.5px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--muted-white);
  margin-top: 3px;
}

/* ── Track body ── */
.sqft-slider__body {
  position: relative;
}

/* Tall click target so the thin track is easy to grab */
.sqft-slider__track-wrap {
  position: relative;
  height: 22px;
  display: flex;
  align-items: center;
  cursor: none;
}

/* The visible track line */
.sqft-slider__track {
  position: absolute;
  inset: 0;
  top: 50%;
  height: 2px;
  transform: translateY(-50%);
  background: rgba(245, 240, 232, 0.34);
  border-radius: 1px;
  pointer-events: none;
  /* Faint warm ambient along the full rail */
  box-shadow: 0 0 7px 2px rgba(245, 240, 232, 0.07);
}

/* Crimson fill — width set by JS */
.sqft-slider__fill {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  background: var(--crimson);
  border-radius: 1px;
  pointer-events: none;
  transition: width 0ms; /* instant during drag; will add smooth feel in JS */
  /* Crimson ambient that bleeds into the dark wash beneath */
  box-shadow: 0 0 10px 3px rgba(88, 35, 35, 0.55);
}

/* ── Thumb ── */
.sqft-slider__thumb {
  position: absolute;
  top: 50%;
  /* left set by JS */
  transform: translate(-50%, -50%);
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--crimson);
  cursor: none;
  display: flex;
  align-items: center;
  justify-content: center;
  transition:
    box-shadow 220ms var(--ease-out),
    transform  180ms var(--ease-out);
  will-change: transform, left;
  /* Outer glow — crimson-tinted, not loud */
  box-shadow:
    0 0 0 1.5px rgba(245, 240, 232, 0.45),
    0 0 10px 3px rgba(88, 35, 35, 0.38);
}

/* Inner ring — a slightly inset circle for depth */
.sqft-thumb__ring {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(245, 240, 232, 0.40);
  flex-shrink: 0;
}

/* Hover / active states */
.sqft-slider__track-wrap:hover .sqft-slider__thumb,
.sqft-slider--dragging .sqft-slider__thumb {
  box-shadow:
    0 0 0 1.5px rgba(245, 240, 232, 0.65),
    0 0 16px 5px rgba(88, 35, 35, 0.50);
  transform: translate(-50%, -50%) scale(1.15);
}

/* Keyboard focus ring on the slider root */
.sqft-slider:focus-visible .sqft-slider__thumb {
  box-shadow:
    0 0 0 1.5px rgba(245, 240, 232, 0.65),
    0 0 0 4px rgba(245, 240, 232, 0.10),
    0 0 14px 4px rgba(88, 35, 35, 0.45);
}

/* ── Ticks ── */
.sqft-slider__ticks {
  position: relative;
  margin-top: 20px;
  height: 32px;
}

.sqft-slider__tick {
  position: absolute;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
}

/* First and last ticks: left-align and right-align labels so they
   don't overflow the slider edges.                               */
.sqft-slider__tick:first-child {
  transform: translateX(0);
  align-items: flex-start;
}

.sqft-slider__tick:last-child {
  transform: translateX(-100%);
  align-items: flex-end;
}

.sqft-tick__mark {
  width: 1px;
  height: 5px;
  background: rgba(245, 240, 232, 0.38);
}

.sqft-tick__label {
  font-family: 'Montserrat', sans-serif;
  font-weight: 400;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(245, 240, 232, 0.58);
  white-space: nowrap;
  line-height: 1;
}

.sqft-tick__sublabel {
  font-family: 'Montserrat', sans-serif;
  font-weight: 400;
  font-size: 9px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(245, 240, 232, 0.40);
  white-space: nowrap;
  line-height: 1;
}

/* Active tick (value is at or near this tick) */
.sqft-slider__tick.is-active .sqft-tick__label {
  color: rgba(245, 240, 232, 0.88);
}

/* ── Responsive ── */
@media (max-width: 820px) {
  .selector-wrapper--slider,
  .selector-frame--slider {
    width: calc(100vw - 48px);
  }
}

/* ============================================================
   ROSE HINT BUBBLE
   Positioned absolute inside .chat-input-wrap (which is itself
   position:absolute, so it is the containing block).

   Design decisions:
   — Sharp 2px corners: matches the selector frames, not a chat bubble
   — No backdrop-filter: solid warm-dark bg, no glassmorphism
   — Left border drawn by ::before on enter (cinematic reveal)
   — Inner content staggered 180ms after the border starts drawing
   — Cormorant Garamond italic: Rose's voice, not a system message
   — ROSE label + extending rule: editorial, not a tooltip header
   — Close × visible on hover: clear dismiss affordance
   — Dismiss: border retracts upward as content fades out

   States (JS-driven class):
     default       → hidden below, non-interactive
     .is-visible   → border draws down, content fades in (staggered)
     .is-dismissed → content fades out, border retracts upward
   ============================================================ */

/* ── Shell ─────────────────────────────────────────────────────── */
.rose-hint {
  position: absolute;
  bottom: calc(100% + 16px);
  right: 0;

  /* Matches the full width of the chat row: input field + gap + history btn.
     width:100% resolves to the containing block (.chat-input-wrap) width. */
  width: 100%;

  background: rgba(14, 12, 12, 0.94);
  border: none;
  border-radius: 2px;

  padding: 14px 16px 16px 15px;
  pointer-events: none;
  opacity: 0;
  transform: translateY(8px);
  transition:
    opacity   480ms var(--ease-soft),
    transform 480ms var(--ease-soft);
  box-shadow:
    0 20px 56px rgba(0, 0, 0, 0.58),
    0  4px 14px rgba(0, 0, 0, 0.32);
  z-index: 10;
}

.rose-hint.is-visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

/* Clickable hint — the whole bubble opens the chat (its × still dismisses) */
.rose-hint--clickable.is-visible { cursor: pointer; }
.rose-hint--clickable.is-visible:hover { background: rgba(20, 17, 17, 0.97); }
.rose-hint--clickable.is-visible:hover .rose-hint__text { color: rgba(245, 240, 232, 0.82); }

.rose-hint.is-dismissed {
  opacity: 0;
  transform: translateY(-5px);
  pointer-events: none;
  transition:
    opacity   260ms var(--ease-soft),
    transform 260ms var(--ease-soft);
}

/* ::before is unused — reserved for future decoration if needed */

/* ── Vertical hairline connector ─────────────────────────────────
   Matches the tooltip stem above the slider — same language.
   Drops from the bubble's bottom toward the chat-history-btn. */
.rose-hint::after {
  content: '';
  position: absolute;
  bottom: -17px;
  right:  17px; /* 17 + 0.5 = 17.5px from right ≈ center of 36px btn */
  width:  1px;
  height: 16px;
  background: linear-gradient(
    to bottom,
    rgba(245, 240, 232, 0.14),
    transparent
  );
  pointer-events: none;
}

/* ── Inner content — staggered entrance ──────────────────────────
   Starts 180ms after the left border begins drawing,
   so the border leads and the text follows it in. */
.rose-hint__inner {
  opacity: 0;
  transform: translateY(4px);
  transition:
    opacity   300ms var(--ease-soft) 180ms,
    transform 300ms var(--ease-soft) 180ms;
}

.rose-hint.is-visible .rose-hint__inner {
  opacity: 1;
  transform: translateY(0);
}

.rose-hint.is-dismissed .rose-hint__inner {
  opacity: 0;
  transform: translateY(-2px);
  transition:
    opacity   180ms var(--ease-soft) 0ms,
    transform 180ms var(--ease-soft) 0ms;
}

/* ── ROSE label with extending rule ─────────────────────────────
   Flex row: ROSE text + hairline that fills the remaining width.
   Reads as an editorial chapter-header, not a tooltip title.
   Montserrat 300 keeps it light — same weight as .style-label. */
.rose-hint__name {
  display: flex;
  align-items: center;
  font-family: 'Montserrat', sans-serif;
  font-size: 7.5px;
  font-weight: 300;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: rgba(245, 240, 232, 0.34);
  margin: 0 0 11px;
  padding-right: 20px; /* clears the × button */
}

.rose-hint__butterfly {
  display: block;
  width: auto;
  height: 11px;
  margin-right: 7px;
  opacity: 0.62;
  flex-shrink: 0;
}

.rose-hint__name::after {
  content: '';
  flex: 1;
  height: 0.5px;
  margin-left: 9px;
  background: rgba(245, 240, 232, 0.08);
}

/* ── Body copy — Cormorant Garamond upright ─────────────────────
   Serif at 15px reads as considered and warm without italic.
   Larger size improves legibility on dark background. */
.rose-hint__text {
  font-family: 'Cormorant Garamond', serif;
  font-style: normal;
  font-weight: 400;
  font-size: 16px;
  line-height: 1.60;
  letter-spacing: 0.01em;
  color: rgba(245, 240, 232, 0.68);
  margin: 0;
  transition: color 260ms var(--ease-out);
}

/* Subtle brightening on hover */
.rose-hint:hover .rose-hint__text {
  color: rgba(245, 240, 232, 0.82);
}

/* ── Close button ────────────────────────────────────────────────
   Hidden by default. Fades in when the bubble is hovered.
   Brighter on its own hover. Keyboard-accessible with focus ring. */
.rose-hint__close {
  position: absolute;
  top:   9px;
  right: 9px;
  width:  16px;
  height: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  padding: 0;
  font-family: 'DM Sans', sans-serif;
  font-size: 13px;
  line-height: 1;
  color: rgba(245, 240, 232, 0.28);
  cursor: none;
  outline: none;
  opacity: 0;
  transition:
    opacity 220ms var(--ease-out),
    color   220ms var(--ease-out);
}

.rose-hint:hover .rose-hint__close {
  opacity: 1;
}

.rose-hint__close:hover {
  color: rgba(245, 240, 232, 0.68);
}

.rose-hint__close:focus-visible {
  outline: 0.5px solid var(--faint-white);
  outline-offset: 2px;
  opacity: 1;
  border-radius: 1px;
}

/* ── Reduced motion ──────────────────────────────────────────────
   Skip all translates and delays; keep opacity fades only. */
@media (prefers-reduced-motion: reduce) {
  .rose-hint,
  .rose-hint.is-visible,
  .rose-hint.is-dismissed {
    transform: none !important;
    transition-duration: 200ms !important;
  }

  .rose-hint__inner,
  .rose-hint.is-visible .rose-hint__inner,
  .rose-hint.is-dismissed .rose-hint__inner {
    transform: none !important;
    transition-delay: 0ms !important;
    transition-duration: 200ms !important;
  }
}

/* ============================================================
   ROOMS SELECTOR  (Q4 — Bedrooms & Bathrooms)
   All styles scoped under .selector-wrapper--rooms /
   .rooms-group so nothing bleeds into other screens.
   ============================================================ */

/* ── Wrapper — dark wash behind the chips (same technique as slider) ── */
.selector-wrapper--rooms {
  width: 640px;
  display: flex;
  flex-direction: column;
  gap: 32px;
}


/* ── Group wrapper ── */
.rooms-group {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* ── Group label — tracked Montserrat with extending hairline.
   Matches .rose-hint__name treatment: flex row so ::after fills remaining width.
   The hairline ties the label to the right edge of the selector — architectural. ── */
.rooms-group__label {
  display: flex;
  align-items: center;
  font-family: 'Montserrat', sans-serif;
  font-size: 14px;
  font-weight: 400;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(245, 240, 232, 0.58);
  padding-left: 2px;
}

.rooms-group__label::after {
  content: '';
  flex: 1;
  height: 0.5px;
  margin-left: 12px;
  background: rgba(245, 240, 232, 0.08);
}

/* ── Chip row ── */
.rooms-chips {
  display: flex;
  gap: 12px;
}

/* ── Individual chip ── */
.room-chip {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  position: relative;

  /* Sizing — taller than minimum to give the numeral room to breathe */
  height: 78px;

  /* Visual */
  background: rgba(18, 18, 18, 0.80);
  border: 0.5px solid rgba(245, 240, 232, 0.20);
  border-radius: 2px;

  /* Typography */
  font-family: 'Montserrat', sans-serif;
  color: rgba(245, 240, 232, 0.78);

  /* Interaction */
  cursor: none;
  outline: none;
  transition:
    background   220ms var(--ease-out),
    border-color 220ms var(--ease-out),
    color        220ms var(--ease-out),
    box-shadow   240ms var(--ease-out),
    transform    200ms var(--ease-out);
}

/* Number glyph — Montserrat for consistent baseline alignment across all chips */
.room-chip__num {
  font-family: 'Montserrat', sans-serif;
  font-size: 32px;
  font-weight: 300;
  line-height: 1;
  letter-spacing: -0.01em;
  transition: color 220ms var(--ease-out);
}

/* Plus suffix — slightly raised superscript, dimmer than the numeral */
.room-chip__plus {
  font-family: 'Montserrat', sans-serif;
  font-size: 11px;
  font-weight: 300;
  letter-spacing: 0;
  align-self: flex-start;
  margin-top: 9px;
  margin-left: 1px;
  opacity: 0.60;
  color: inherit;
  transition: color 220ms var(--ease-out), opacity 220ms var(--ease-out);
}

/* ── Hover — lift with shadow, brighter border, warmer numeral ── */
.room-chip:hover {
  background: rgba(255, 255, 255, 0.07);
  border-color: rgba(245, 240, 232, 0.28);
  color: rgba(245, 240, 232, 0.90);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.28);
}

.room-chip:hover .room-chip__plus {
  opacity: 0.85;
}

/* ── Focus visible (keyboard) ── */
.room-chip:focus-visible {
  outline: 0.5px solid var(--faint-white);
  outline-offset: 3px;
}

/* ── Active (press) — brief compress before JS click fires ── */
.room-chip:active {
  transform: translateY(0) scale(0.965);
  transition-duration: 80ms;
}

/* ── Selected ──
   Three-layer shadow:
   1. Ambient glow spreading outward — marks the chip as "alive"
   2. Top-rim inset highlight — light catching the upper glass edge, separates
      luxury from generic dark UI
   3. Inner warmth inset — heat from the crimson fill diffusing inward         */
.room-chip.is-selected {
  background: rgba(100, 50, 50, 0.20);
  border-color: rgba(150, 78, 78, 0.62);
  color: rgba(245, 240, 232, 0.95);
  box-shadow:
    inset 0 0 0 0.5px rgba(150, 78, 78, 0.62),
    inset 0 1px 0 rgba(188, 98, 98, 0.22),
    inset 0 0 20px rgba(100, 50, 50, 0.13),
    0 0 18px rgba(100, 50, 50, 0.22);
  animation: chipSettle 340ms var(--ease-out) both;
  transition:
    background   260ms var(--ease-out),
    border-color 260ms var(--ease-out),
    color        260ms var(--ease-out),
    box-shadow   280ms var(--ease-out),
    transform    200ms var(--ease-out);
}

.room-chip.is-selected .room-chip__plus {
  opacity: 0.88;
}

/* ── chipSettle — the micro-interaction of a confirmed choice.
   Compresses on press (from :active), then overshoots slightly before
   settling to rest. Plays once per selection. ── */
@keyframes chipSettle {
  0%   { transform: scale(0.965); }
  55%  { transform: scale(1.018); }
  100% { transform: scale(1); }
}


/* ── Entrance animations — left→right cascade across both rows.
   Labels lead; chips follow beat by beat. Row 2 picks up
   where row 1 left off — one continuous wave, not two separate events. ── */
.rooms-group--bedrooms .rooms-group__label {
  animation: fadeUp 500ms var(--ease-soft) 260ms both;
}

.rooms-group--bedrooms .room-chip:nth-child(1) { animation: fadeUp 460ms var(--ease-soft) 300ms both; }
.rooms-group--bedrooms .room-chip:nth-child(2) { animation: fadeUp 460ms var(--ease-soft) 340ms both; }
.rooms-group--bedrooms .room-chip:nth-child(3) { animation: fadeUp 460ms var(--ease-soft) 380ms both; }
.rooms-group--bedrooms .room-chip:nth-child(4) { animation: fadeUp 460ms var(--ease-soft) 420ms both; }
.rooms-group--bedrooms .room-chip:nth-child(5) { animation: fadeUp 460ms var(--ease-soft) 460ms both; }

.rooms-group--bathrooms .rooms-group__label {
  animation: fadeUp 500ms var(--ease-soft) 460ms both;
}

.rooms-group--bathrooms .room-chip:nth-child(1) { animation: fadeUp 460ms var(--ease-soft) 500ms both; }
.rooms-group--bathrooms .room-chip:nth-child(2) { animation: fadeUp 460ms var(--ease-soft) 540ms both; }
.rooms-group--bathrooms .room-chip:nth-child(3) { animation: fadeUp 460ms var(--ease-soft) 580ms both; }
.rooms-group--bathrooms .room-chip:nth-child(4) { animation: fadeUp 460ms var(--ease-soft) 620ms both; }
.rooms-group--bathrooms .room-chip:nth-child(5) { animation: fadeUp 460ms var(--ease-soft) 660ms both; }

/* ── Responsive ── */
@media (max-width: 700px) {
  .selector-wrapper--rooms {
    width: calc(100vw - 48px);
  }

  .room-chip {
    height: 64px;
  }

  .room-chip__num {
    font-size: 30px;
  }

  .room-chip__plus {
    margin-top: 10px;
  }
}

@media (max-width: 480px) {
  .rooms-chips {
    gap: 8px;
  }

  .room-chip {
    height: 56px;
  }

  .room-chip__num {
    font-size: 26px;
  }

  .room-chip__plus {
    font-size: 9px;
    margin-top: 8px;
  }
}

/* ── Reduced motion — skip all entrance animations and chipSettle.
   Transitions remain but at shorter duration for responsiveness. ── */
@media (prefers-reduced-motion: reduce) {
  .rooms-group--bedrooms .rooms-group__label,
  .rooms-group--bathrooms .rooms-group__label,
  .rooms-group--bedrooms .room-chip:nth-child(1),
  .rooms-group--bedrooms .room-chip:nth-child(2),
  .rooms-group--bedrooms .room-chip:nth-child(3),
  .rooms-group--bedrooms .room-chip:nth-child(4),
  .rooms-group--bedrooms .room-chip:nth-child(5),
  .rooms-group--bathrooms .room-chip:nth-child(1),
  .rooms-group--bathrooms .room-chip:nth-child(2),
  .rooms-group--bathrooms .room-chip:nth-child(3),
  .rooms-group--bathrooms .room-chip:nth-child(4),
  .rooms-group--bathrooms .room-chip:nth-child(5) {
    animation: none !important;
    opacity: 1 !important;
  }

  .room-chip,
  .room-chip.is-selected {
    animation: none !important;
    transform: none !important;
    transition-duration: 100ms !important;
  }
}

/* ============================================================
   FEATURES CHAT SELECTOR  (Q5 — Must-Have Spaces)
   Prompt-style centered textarea surrounded by atmospheric
   real photography that drifts as passive visual inspiration.
   Images are NOT interactive choices — they only exist to
   spark ideas. Pill shortcuts sit below the input as quick
   answers; typed text and pills are both tracked separately.
   ============================================================ */

/* ── Atmospheric visual scatter ──────────────────────────────
   Container is position: absolute inside .site-frame so
   images span the full viewport and sit between the page-bg
   (z-index: 0) and the consultation UI (z-index: 10+).
   pointer-events: none on the container so images don't block
   clicks on the UI; re-enabled per-image for hover brightness.
   ──────────────────────────────────────────────────────────── */

.features-chat__visuals {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
}

/* Outer wrapper: handles absolute position + static tilt */
.features-chat__visual {
  position: absolute;
  pointer-events: auto;
}

/* Inner wrapper: handles entrance fade independently from drift */
.fci-inner {
  opacity: 0;
  animation: fadeUp 700ms var(--ease-soft) forwards;
}

/* Staggered entrance per image */
.fci--office  .fci-inner { animation-delay: 280ms; }
.fci--theatre .fci-inner { animation-delay: 430ms; }
.fci--closet  .fci-inner { animation-delay: 560ms; }
.fci--gym     .fci-inner { animation-delay: 360ms; }
.fci--pool    .fci-inner { animation-delay: 500ms; }
.fci--wine    .fci-inner { animation-delay: 320ms; }

/* ── Image treatment ── */
.features-chat__visual img {
  display: block;
  border-radius: 2px;
  box-shadow:
    0 8px 32px rgba(0, 0, 0, 0.55),
    0 2px 8px  rgba(0, 0, 0, 0.28);
  transition: box-shadow 400ms var(--ease-out);
  user-select: none;
  pointer-events: none;
}

/* Very subtle hover — slightly lifted shadow, not a click affordance */
.features-chat__visual:hover img {
  box-shadow:
    0 12px 40px rgba(0, 0, 0, 0.65),
    0 4px 12px  rgba(0, 0, 0, 0.35);
}

/* ── Per-image sizes — distinct widths reinforce the sense of
   receding depth (smaller = feels further away) ── */
.fci--office  img { width: clamp(130px, 13vw, 195px); }
.fci--theatre img { width: clamp(140px, 14vw, 208px); }
.fci--closet  img { width: clamp(112px, 10.5vw, 158px); }
.fci--gym     img { width: clamp(120px, 12vw, 182px); }
.fci--pool    img { width: clamp(130px, 12.5vw, 188px); }
.fci--wine    img { width: clamp(110px, 11vw, 165px); }

/* ── Absolute positions within .site-frame (100vw × 100dvh) ──
   Each image has a permanent slight tilt (like casually placed
   photographs) — no ongoing animation, zero GPU drain.
   Tilt is baked into transform so the entrance fadeUp in
   .fci-inner composes on top without conflict.
   ──────────────────────────────────────────────────────────── */
.fci--office  { top: 17vh; left: 14vw; transform: rotate(-1.2deg); }
.fci--theatre { top: 10vh; left: 68vw; transform: rotate( 1.8deg); }
.fci--closet  { top: 30vh; left: 82vw; transform: rotate( 2.4deg); }
.fci--gym     { top: 44vh; left:  9vw; transform: rotate(-1.8deg); }
.fci--pool    { top: 64vh; left: 23vw; transform: rotate(-1.5deg); }
.fci--wine    { top: 49vh; left: 76vw; transform: rotate( 1.0deg); }

/* ── Central content halo ─────────────────────────────────────
   Dark radial gradient sitting in the visuals layer (z:1),
   below the consultation UI (z:10). Improves legibility of the
   question heading + input + pills against the photography.
   Positioned dead-center in .site-frame; gradient fades out
   well before the scattered images at the edges.
   ──────────────────────────────────────────────────────────── */
.features-chat__halo {
  position: absolute;
  top:  50%;
  left: 50%;
  width:  900px;
  height: 620px;
  transform: translate(-50%, -50%);
  background: radial-gradient(
    ellipse at center,
    rgba(10, 7, 5, 0.86) 0%,
    rgba(10, 7, 5, 0.70) 22%,
    rgba(10, 7, 5, 0.38) 48%,
    transparent          68%
  );
  pointer-events: none;
}

/* ── Central prompt wrapper ──────────────────────────────────
   .consultation-area flex centers this in the viewport.
   Width matches the underlined input so heading, input,
   and pills all share a unified visual spine.
   ──────────────────────────────────────────────────────────── */

.features-chat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  width: 600px;
}

/* ── Input wrap — editorial hairline underline (not a box) ── */
.features-chat__input-wrap {
  position: relative;
  width: 100%;
  padding-bottom: 1px; /* clearance for ::after underline */
}

/* Animated hairline */
.features-chat__input-wrap::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 0.5px;
  background: rgba(245, 240, 232, 0.38);
  transition:
    background  320ms var(--ease-out),
    box-shadow  320ms var(--ease-out);
}

.features-chat__input-wrap:focus-within::after {
  background: rgba(245, 240, 232, 0.68);
  box-shadow:
    0 0 28px 6px rgba(220, 185, 148, 0.11),
    0 0  8px 1px rgba(220, 185, 148, 0.07);
}

/* ── Primary answer textarea ── */
.features-chat__input {
  display: block;
  width: 100%;
  background: transparent;
  border: none;
  outline: none;
  resize: none;
  padding: 14px 44px 10px 28px; /* left clears upload icon */
  font-family: 'DM Sans', sans-serif;
  font-size: 15px;
  font-weight: 400;
  letter-spacing: -0.01em;
  line-height: 1.65;
  color: rgba(245, 240, 232, 0.96);
  text-shadow: 0 1px 6px rgba(8, 6, 4, 0.60);
  cursor: text;
  overflow: hidden;
  min-height: 56px;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.features-chat__input::-webkit-scrollbar { display: none; }

.features-chat__input::placeholder {
  font-family: 'DM Sans', sans-serif;
  font-style: normal;
  font-size: 15px;
  line-height: 1.65;
  color: rgba(245, 240, 232, 0.78);
  text-shadow: 0 1px 5px rgba(8, 6, 4, 0.55);
}

/* ── Mic button — icon only, vertically centered ── */
.features-chat__mic {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  padding: 0;
  background: none;
  border: none;
  border-radius: 0;
  opacity: 0.65;
  transition: opacity 240ms var(--ease-out);
}

.features-chat__mic img { width: 18px; height: 18px; }

.features-chat__mic:hover  { opacity: 0.92; }
.features-chat__mic:active { transform: translateY(-50%) scale(0.92); }

.features-chat__mic img {
  width: 18px;
  height: 18px;
  filter: brightness(0) saturate(0) invert(1);
  pointer-events: none;
}

/* ── Inline send — crimson box + upward arrow, the conversational
   submit. Sits where the mic is; revealed (and swapped in for the
   mic) once the field has something to submit (.is-composing on the
   wrap). Echoes the bottom-right chat input's crimson box. ──────── */
.features-chat__send {
  position: absolute;
  right: 0;
  top: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  background: var(--crimson);
  border: none;
  border-radius: 7px;
  opacity: 0;
  pointer-events: none;
  transform: translateY(-50%) scale(0.86);
  box-shadow: 0 2px 10px rgba(88, 35, 35, 0.30);
  transition:
    opacity   240ms var(--ease-out),
    transform 240ms var(--ease-soft),
    background 220ms var(--ease-out);
}
.features-chat__send img {
  width: 13px;
  height: 13px;
  pointer-events: none;
}
.features-chat__send:hover  { background: var(--crimson-hover); }
.features-chat__send:active { transform: translateY(-50%) scale(0.92); }
.features-chat__send:focus-visible {
  outline: 1px solid var(--faint-white);
  outline-offset: 2px;
}

/* Reveal the send arrow once composing; if a mic shares the slot, it
   fades out so the two never overlap. */
.features-chat__input-wrap.is-composing .features-chat__send {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(-50%) scale(1);
}
.features-chat__input-wrap.is-composing .features-chat__mic {
  opacity: 0;
  pointer-events: none;
}

/* ── Answer pills ─────────────────────────────────────────────
   Optional quick shortcuts — selecting a pill adds it to the
   answer alongside any typed text.
   ──────────────────────────────────────────────────────────── */

.features-chat__pills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  width: 100%;
  padding-top: 6px;
}

.features-chat__pill {
  font-family: 'Montserrat', sans-serif;
  font-size: 10px;
  font-weight: 400;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(245, 240, 232, 0.70);
  background: rgba(18, 18, 18, 0.72);
  border: 0.5px solid rgba(245, 240, 232, 0.20);
  border-radius: 2px;
  padding: 8px 14px;
  cursor: none;
  outline: none;
  transition:
    background    220ms var(--ease-out),
    border-color  220ms var(--ease-out),
    color         220ms var(--ease-out),
    transform     140ms var(--ease-out),
    box-shadow    220ms var(--ease-out);
}

.features-chat__pill:hover {
  background: rgba(32, 28, 28, 0.84);
  border-color: rgba(245, 240, 232, 0.36);
  color: rgba(245, 240, 232, 0.92);
}

.features-chat__pill:active {
  transform: scale(0.96);
  transition-duration: 80ms;
}

/* Selected — crimson token matching the rest of the consultation */
.features-chat__pill.is-selected {
  background: rgba(34, 28, 28, 0.82);
  border-color: rgba(150, 78, 78, 0.62);
  color: rgba(245, 240, 232, 0.96);
  box-shadow:
    inset 0 0 0 0.5px rgba(150, 78, 78, 0.62),
    inset 0 1px 0 rgba(188, 98, 98, 0.22),
    inset 0 0 20px rgba(100, 50, 50, 0.13),
    0 0 18px rgba(100, 50, 50, 0.22);
}

/* "Not sure yet" — dashed at rest to read as secondary/optional */
.features-chat__pill--unsure {
  color: rgba(245, 240, 232, 0.34);
  border-style: dashed;
}

.features-chat__pill--unsure:hover {
  color: rgba(245, 240, 232, 0.68);
  border-style: solid;
}

.features-chat__pill--unsure.is-selected {
  border-style: solid;
}

/* Keyboard focus */
.features-chat__pill:focus-visible {
  outline: 0.5px solid rgba(245, 240, 232, 0.28);
  outline-offset: 3px;
}

/* 'Not Sure Yet' pill — dotted border only, same visibility as other pills */
.features-chat__pill--unsure {
  border-style: dotted;
}
.features-chat__pill--unsure.is-selected {
  border-style: solid;
}

/* ── Pill staggered entrance — translateY only, parent handles opacity ── */
@keyframes pillSlideUp {
  from { transform: translateY(10px); }
  to   { transform: translateY(0); }
}

.features-chat__pill:nth-child(1) { animation: pillSlideUp 380ms var(--ease-out) 280ms both; }
.features-chat__pill:nth-child(2) { animation: pillSlideUp 380ms var(--ease-out) 340ms both; }
.features-chat__pill:nth-child(3) { animation: pillSlideUp 380ms var(--ease-out) 400ms both; }
.features-chat__pill:nth-child(4) { animation: pillSlideUp 380ms var(--ease-out) 460ms both; }

/* ── Input value crossfade — triggered by JS class on pill select ── */
@keyframes inputValueIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.features-chat__input.is-value-entering {
  animation: inputValueIn 200ms var(--ease-out) forwards;
}

/* ── Heading line stagger ── */
.question-heading__line {
  display: block;
}

/* ── Reduced motion overrides ── */
@media (prefers-reduced-motion: reduce) {
  .features-chat__pill:nth-child(1),
  .features-chat__pill:nth-child(2),
  .features-chat__pill:nth-child(3),
  .features-chat__pill:nth-child(4) {
    animation: none;
    transform: none;
  }
  .features-chat__input.is-value-entering {
    animation: none;
    opacity: 1;
  }
}

/* ── Responsive ── */
@media (max-width: 900px) {
  .features-chat { width: calc(100vw - 48px); }
  /* Hide farthest images at narrower widths */
  .fci--closet { display: none; }
  .fci--wine   { left: auto; right: 4vw; }
}

@media (max-width: 600px) {
  .features-chat__input::placeholder { font-size: 16px; }
  .fci--theatre { display: none; }
  .fci--gym     { display: none; }
}

/* ── Reduced motion — skip the entrance fade-up.
   Images appear immediately at full opacity. ── */
@media (prefers-reduced-motion: reduce) {
  .fci-inner {
    animation: none !important;
    opacity: 1 !important;
  }
}

/* ============================================================
   RESIDENCE TYPE SELECTOR — Basic Info Q2
   Three equal cards: default / hover / active / selected states
   match the room-chip token values for cross-screen consistency.
   ============================================================ */

.res-cards {
  display: flex;
  align-items: stretch;
  gap: 24px;
}

.res-card {
  position: relative;
  display: flex;
  flex-direction: column;
  width: clamp(200px, 18vw, 255px);
  background: rgba(18, 18, 18, 0.42);
  border: 0.5px solid rgba(245, 240, 232, 0.18);
  border-radius: 2px;
  cursor: none;
  outline: none;
  overflow: hidden;
  transition:
    background   220ms var(--ease-out),
    border-color 220ms var(--ease-out),
    box-shadow   240ms var(--ease-out),
    transform    200ms var(--ease-out);
}

.res-card__img-wrap {
  flex: 1;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 24px 10px 0;
  min-height: 164px;
  overflow: hidden;
}

.res-card__img-wrap img {
  width: 100%;
  max-width: 210px;
  height: auto;
  display: block;
  user-select: none;
  pointer-events: none;
  transition: transform 320ms var(--ease-out);
}

.res-card__body {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 14px 14px 18px;
}

.res-card__label {
  font-family: 'Montserrat', sans-serif;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(245, 240, 232, 0.70);
  transition: color 220ms var(--ease-out);
}

.res-card__sub {
  font-family: 'DM Sans', sans-serif;
  font-size: 13px;
  font-weight: 400;
  line-height: 1.65;
  color: rgba(245, 240, 232, 0.48);
  letter-spacing: 0.01em;
  transition: color 220ms var(--ease-out);
}

/* ── Hover — lift, brighter border, image scales ── */
.res-card:hover {
  background: rgba(255, 255, 255, 0.07);
  border-color: rgba(245, 240, 232, 0.28);
  transform: translateY(-3px);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.32);
}

.res-card:hover .res-card__img-wrap img {
  transform: scale(1.05);
}

.res-card:hover .res-card__label {
  color: rgba(245, 240, 232, 0.90);
}

.res-card:hover .res-card__sub {
  color: rgba(245, 240, 232, 0.52);
}

/* ── Focus visible (keyboard) ── */
.res-card:focus-visible {
  outline: 0.5px solid var(--faint-white);
  outline-offset: 3px;
}

/* ── Active press — brief compress, matching room-chip ── */
.res-card:active {
  transform: translateY(0) scale(0.965);
  transition-duration: 80ms;
}

/* ── Selected — crimson wash + three-layer shadow ── */
.res-card.is-selected {
  background: rgba(100, 50, 50, 0.20);
  border-color: rgba(150, 78, 78, 0.62);
  box-shadow:
    inset 0 0 0 0.5px rgba(150, 78, 78, 0.62),
    inset 0 1px 0 rgba(188, 98, 98, 0.22),
    inset 0 0 20px rgba(100, 50, 50, 0.13),
    0 0 18px rgba(100, 50, 50, 0.22);
  animation: chipSettle 340ms var(--ease-out) both;
  transition:
    background   260ms var(--ease-out),
    border-color 260ms var(--ease-out),
    box-shadow   280ms var(--ease-out),
    transform    200ms var(--ease-out);
}

.res-card.is-selected .res-card__label {
  color: rgba(245, 240, 232, 0.95);
}

.res-card.is-selected .res-card__sub {
  color: rgba(245, 240, 232, 0.58);
}

@media (prefers-reduced-motion: reduce) {
  .res-card,
  .res-card.is-selected {
    animation: none !important;
    transform: none !important;
    transition-duration: 100ms !important;
  }
}

/* ============================================================
   PLANNING JOURNEY SELECTOR — Basic Info Q3
   Five-stage horizontal timeline. Single select.
   .selector-frame--journey wraps the whole component.
   ============================================================ */

.selector-frame--journey {
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* ── Outer container — provides relative context for the track line ── */
.journey-track-wrap {
  position: relative;
  width: 1020px;
  max-width: calc(100vw - 48px);
  overflow: visible;
}

/* ── Horizontal track line ───────────────────────────────────────── */
/* top = padding-top(104) + half-circle(18) = 122px              */
/* left/right = 10% = center of first/last column (each 20% wide) */
.journey-track {
  position: absolute;
  top: 122px;
  left:  10%;
  right: 10%;
  height: 2px;
  background: rgba(245, 240, 232, 0.14);
  z-index: 0;
  pointer-events: none;
}

/* Fill — grows left-to-right as stages advance */
.journey-track__fill {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 25%; /* default: stage 2 selected */
  background: linear-gradient(
    to right,
    rgba(100, 50, 50, 0.85),
    rgba(150, 78, 78, 0.50)
  );
  box-shadow: 0 0 8px rgba(100, 50, 50, 0.60), 0 0 2px rgba(188, 98, 98, 0.30);
  transition: width 420ms var(--ease-soft);
}

/* ── Five-column stage grid ──────────────────────────────────────── */
.journey-stages {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  position: relative;
  z-index: 1;
}

/* ── Individual stage button ─────────────────────────────────────── */
.journey-stage {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 104px; /* reserves space above circle for tooltip + gap */
  background: transparent;
  border: none;
  cursor: none;
  outline: none;
}

/* ── Tooltip card — floats above circle on selected stage ────────── */
.journey-tooltip {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%) translateY(8px);
  width: 200px;
  background: rgba(18, 18, 18, 0.80);
  border: 0.5px solid rgba(245, 240, 232, 0.18);
  border-radius: 2px;
  padding: 12px 15px 14px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.50);
  backdrop-filter: blur(8px);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition:
    opacity    300ms var(--ease-soft),
    transform  300ms var(--ease-soft),
    visibility 0ms   300ms;
}

.journey-stage.is-selected .journey-tooltip {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
  transition:
    opacity    300ms var(--ease-soft),
    transform  300ms var(--ease-soft),
    visibility 0ms;
}

.journey-tooltip__text {
  font-family: 'DM Sans', sans-serif;
  font-size: 13px;
  font-weight: 400;
  color: rgba(245, 240, 232, 0.80);
  letter-spacing: -0.01em;
  line-height: 1.55;
  margin: 0;
}

/* ── Circle ──────────────────────────────────────────────────────── */
.journey-stage__circle {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(18, 18, 18, 0.82);
  border: 0.5px solid rgba(245, 240, 232, 0.20);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition:
    background   260ms var(--ease-out),
    border-color 260ms var(--ease-out),
    box-shadow   280ms var(--ease-out),
    transform    200ms var(--ease-out);
}

/* ── Stage number ─────────────────────────────────────────────────── */
.journey-stage__num {
  font-family: 'Montserrat', sans-serif;
  font-size: 11px;
  font-weight: 500;
  color: rgba(245, 240, 232, 0.42);
  line-height: 1;
  transition: color 260ms var(--ease-out);
}

/* ── Label below circle ──────────────────────────────────────────── */
.journey-stage__label {
  font-family: 'Montserrat', sans-serif;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(245, 240, 232, 0.48);
  text-align: center;
  max-width: 190px;
  white-space: nowrap;
  margin-top: 16px;
  line-height: 1.6;
  transition: color 260ms var(--ease-out);
}

/* ── Hover — inactive stage ──────────────────────────────────────── */
.journey-stage:not(.is-selected):hover .journey-stage__circle {
  background: rgba(255, 255, 255, 0.07);
  border-color: rgba(245, 240, 232, 0.32);
}

.journey-stage:not(.is-selected):hover .journey-stage__num {
  color: rgba(245, 240, 232, 0.68);
}

.journey-stage:not(.is-selected):hover .journey-stage__label {
  color: rgba(245, 240, 232, 0.52);
}

/* ── Active press ────────────────────────────────────────────────── */
.journey-stage:active .journey-stage__circle {
  transform: scale(0.92);
  transition-duration: 80ms;
}

/* ── Selected state — matches selector-option.is-selected.is-focused ── */
.journey-stage.is-selected .journey-stage__circle {
  background: rgba(100, 50, 50, 0.20);
  border-color: rgba(150, 78, 78, 0.62);
  box-shadow:
    inset 0 0 0 0.5px rgba(150, 78, 78, 0.62),
    inset 0 1px 0 rgba(188, 98, 98, 0.22),
    inset 0 0 20px rgba(100, 50, 50, 0.13),
    0 0 18px rgba(100, 50, 50, 0.22);
  animation: chipSettle 340ms var(--ease-out) both;
}

.journey-stage.is-selected .journey-stage__num {
  color: rgba(245, 240, 232, 0.92);
}

.journey-stage.is-selected .journey-stage__label {
  color: rgba(245, 240, 232, 0.88);
}

/* ── Focus visible ───────────────────────────────────────────────── */
.journey-stage:focus-visible .journey-stage__circle {
  outline: 0.5px solid var(--faint-white);
  outline-offset: 4px;
}

/* ── Responsive — narrow viewports ───────────────────────────────── */
@media (max-width: 820px) {
  /* left/right stay 10% — scales automatically with container */
  /* top = padding-top(84) + half-circle(15) = 99px */
  .journey-track {
    top: 99px;
  }

  .journey-stage {
    padding-top: 84px;
  }

  .journey-stage__circle {
    width:  30px;
    height: 30px;
  }

  .journey-stage__num {
    font-size: 9px;
  }

  .journey-stage__label {
    font-size: 8px;
    white-space: normal;
    max-width: 64px;
  }

  .journey-tooltip {
    width: 140px;
    padding: 10px 12px 12px;
  }

  .journey-tooltip__text { font-size: 12px; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   LOCATION INPUT — Basic Info Q4 single-line variant of features-chat__input
   Inherits all pill, mic, and underline styles from features-chat.
   ═══════════════════════════════════════════════════════════════════════════ */

.location-chat {
  width: 560px;
  max-width: calc(100vw - 48px);
}

.location-chat__input {
  height: auto;
  padding: 12px 44px 12px 0;
  font-size: 16px;
  line-height: 1.5;
  overflow: visible;
  white-space: nowrap;
  text-overflow: ellipsis;
}


/* ═══════════════════════════════════════════════════════════════════════════
   LAND CARDS — Basic Info Q5 uses the lot background image with per-card
   colour overlays to distinguish the three land-status options.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Image wrapper is relative so the overlay sits on top of the photo */
/* ── Two-card layout — wider cards for cleaner two-up presentation ── */
.res-cards--two-up .res-card {
  width: clamp(220px, 22vw, 272px);
}

/* ── Graphic/illustration variant — centered, contained, no overlay needed ── */
.land-card__img-wrap--graphic {
  align-items: center;
  justify-content: center;
  padding: 28px 20px;
  min-height: 180px;
}
.land-card__img-wrap--graphic img {
  max-width: 164px;
  width: 80%;
  height: auto;
  object-fit: contain;
  transition: transform 320ms var(--ease-out);
}
.res-card:hover .land-card__img-wrap--graphic img {
  transform: translateY(-4px) scale(1.04);
}

.land-card__img-wrap {
  position: relative;
  overflow: hidden;
}

/* Base overlay — sits above the photo, below text, adds colour grade */
.land-card__overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
  transition: opacity 280ms var(--ease-out);
}

/* Own a Lot — warm amber tint, land secured feeling */
.land-card__overlay--own {
  background: linear-gradient(
    160deg,
    rgba(60, 38, 18, 0.52) 0%,
    rgba(30, 18, 8,  0.28) 100%
  );
}

/* Still Looking — cool slate tint, searching / open feeling */
.land-card__overlay--looking {
  background: linear-gradient(
    160deg,
    rgba(18, 24, 32, 0.62) 0%,
    rgba(10, 14, 20, 0.36) 100%
  );
}

/* Open to Either — muted neutral, undecided / measured feeling */
.land-card__overlay--open {
  background: linear-gradient(
    160deg,
    rgba(20, 20, 18, 0.72) 0%,
    rgba(12, 12, 10, 0.42) 100%
  );
}

/* Lighten overlay on hover to reveal image beneath */
.res-card:hover .land-card__overlay { opacity: 0.72; }

/* Selected — overlay recedes further so the crimson card border reads clearly */
.res-card.is-selected .land-card__overlay { opacity: 0.52; }

@media (prefers-reduced-motion: reduce) {
  .journey-tooltip,
  .journey-track__fill,
  .journey-stage__circle,
  .journey-stage__num,
  .journey-stage__label {
    transition-duration: 0.01ms !important;
    animation: none !important;
  }
}

@media (max-width: 600px) {
  .res-cards { gap: 10px; }
  .res-card  { width: clamp(110px, 28vw, 160px); }
  .res-card__img-wrap { min-height: 110px; padding-top: 16px; }
  .res-card__body { padding: 10px 10px 14px; }
  .res-card__label { font-size: 7.5px; }
  .res-card__sub { display: none; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   OAKVILLE INTERACTIVE MAP — Basic Info Q4
   Dark cartographic SVG map that replaces area-type pills.
   Clickable neighbourhood zones with always-visible labels,
   a crimson pin drop on selection, and zone dimming on choice.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Compact the consultation area gap on the location screen so the
   map fits without scrolling on most desktop/laptop viewports          */
.consultation-area--location {
  gap: 12px;
  padding-bottom: 55px;
}

/* Map wrapper — portrait aspect (962:1102), narrower than the input box.
   max-width cap keeps it from edge-butting on narrow screens            */
.oakville-map-wrap {
  width: 380px;
  max-width: calc(100vw - 32px);
  position: relative;
  /* Staggered entrance matching the input box above                  */
  animation: fadeUp 600ms var(--ease-soft) 300ms both;
  opacity: 0;
}

/* Map container — hairline warm border, cinematic shadow             */
.oakville-map {
  position: relative;
  border-radius: 2px;
  overflow: hidden;
  border: 0.5px solid rgba(90, 65, 48, 0.22);
  box-shadow:
    0 0 0 0.5px rgba(70, 48, 32, 0.10),
    0 14px 48px rgba(0, 0, 0, 0.44),
    inset 0 0 50px rgba(0, 0, 0, 0.22);
}

/* Scalable SVG fills the container                                   */
.oakville-svg {
  display: block;
  width: 100%;
  height: auto;
}

/* ── Zone groups (polygon + label paired for CSS targeting) ── */
.ovm-zone-group {
  cursor: pointer;
}

/* ── Zone polygon — resting state ── */
.ovm-zone {
  fill: rgb(34, 22, 16);        /* fully opaque warm dark */
  stroke: rgba(90, 68, 48, 0.50);
  stroke-width: 0.5px;
  transition:
    fill         280ms var(--ease-out),
    stroke       280ms var(--ease-out),
    stroke-width 240ms var(--ease-out),
    opacity      280ms var(--ease-out);
}

/* ── Hover ── */
.ovm-zone-group:hover .ovm-zone {
  fill: rgb(62, 30, 22);
  stroke: rgba(150, 78, 78, 0.54);
  stroke-width: 0.8px;
}

/* ── Selected ── */
.ovm-zone-group.is-selected .ovm-zone {
  fill: rgb(90, 38, 32);
  stroke: rgba(158, 90, 90, 0.76);
  stroke-width: 1px;
}

/* ── Dim all unselected zones once a selection is active ── */
.ovm-zones.has-selection .ovm-zone-group:not(.is-selected) .ovm-zone {
  fill: rgb(18, 12, 9);
  stroke: rgba(50, 38, 28, 0.22);
  opacity: 0.70;
}

/* Re-illuminate on hover even when dimmed                           */
.ovm-zones.has-selection .ovm-zone-group:not(.is-selected):hover .ovm-zone {
  fill: rgb(52, 26, 20);
  stroke: rgba(132, 66, 66, 0.50);
  opacity: 1;
}

/* ── Zone labels — always visible, warm white, wide-tracked ── */
.ovm-label {
  font-family: 'Montserrat', sans-serif;
  font-size: 7px;
  font-weight: 500;
  letter-spacing: 0.16em;
  fill: rgba(245, 240, 232, 0.36);
  text-anchor: middle;
  dominant-baseline: middle;
  pointer-events: none;
  transition: fill 280ms var(--ease-out), opacity 280ms var(--ease-out);
}

.ovm-zone-group:hover .ovm-label {
  fill: rgba(245, 240, 232, 0.86);
}

.ovm-zone-group.is-selected .ovm-label {
  fill: rgba(245, 240, 232, 0.96);
  font-weight: 600;
}

.ovm-zones.has-selection .ovm-zone-group:not(.is-selected) .ovm-label {
  fill: rgba(245, 240, 232, 0.18);
  opacity: 0.65;
}

.ovm-zones.has-selection .ovm-zone-group:not(.is-selected):hover .ovm-label {
  fill: rgba(245, 240, 232, 0.78);
  opacity: 1;
}

/* ── Crimson map pin ──────────────────────────────────────────
   Two-element structure: ovm-pin-pos positions via JS transform,
   ovm-pin-anim drives the drop-bounce animation separately.      */

.ovm-pin-anim {
  transform-origin: 0px 0px;
}

@keyframes pinDrop {
  0%   { transform: translateY(-80px); opacity: 0; }
  50%  { transform: translateY(10px);  opacity: 1; }
  70%  { transform: translateY(-5px); }
  85%  { transform: translateY(2px); }
  100% { transform: translateY(0px);  opacity: 1; }
}

.ovm-pin-anim.is-dropping {
  animation: pinDrop 540ms var(--ease-out) forwards;
}

/* ── Keyboard focus ring (SVG uses stroke, not outline) ── */
.ovm-zone-group:focus-visible .ovm-zone {
  stroke: rgba(245, 240, 232, 0.42);
  stroke-width: 1.5px;
}

/* Suppress default browser outline on the SVG group */
.ovm-zone-group:focus {
  outline: none;
}

/* ── Map legend strip below the SVG ── */
.oakville-map__legend {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-top: 9px;
  opacity: 0.40;
}

.oakville-map__legend span {
  font-family: 'Montserrat', sans-serif;
  font-size: 8px;
  font-weight: 400;
  letter-spacing: 0.24em;
  color: var(--warm-white);
  text-transform: uppercase;
}

/* ── Reduced motion ── */
@media (prefers-reduced-motion: reduce) {
  .oakville-map-wrap {
    animation: none !important;
    opacity: 1 !important;
  }
  .ovm-pin-anim.is-dropping {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
  .ovm-zone,
  .ovm-label {
    transition-duration: 0.01ms !important;
  }
}

/* ── Responsive ── */
@media (max-width: 440px) {
  .oakville-map-wrap {
    width: calc(100vw - 32px);
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   PROCESS & FINANCES — Building Process Review (Q1)
   Single-column layout: process-intro fills the first screen (matches cb-intro),
   then the SVG timeline with staggered step cards scrolls naturally below.
   ═══════════════════════════════════════════════════════════════════════════ */

.consultation-area--process {
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 0;
  padding: 0;
  min-height: 0;
  overflow: hidden;
}

/* ── Scroll container — mirrors cb-scroll ── */
.process-scroll {
  width: 100%;
  flex: 1 1 0;
  overflow-y: auto;
  overflow-x: hidden;
  outline: none;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.process-scroll::-webkit-scrollbar { width: 0; height: 0; display: none; }

.process-scroll:focus-visible {
  outline: 1px solid var(--faint-white);
  outline-offset: -1px;
  border-radius: 2px;
}

/* ── Intro — fills the first viewport, vertically centred — mirrors cb-intro ── */
.process-intro {
  position: relative;
  min-height: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 0 48px 90px;
}

.process-intro .question-heading {
  margin-top: 0;
  margin-bottom: 0;
}

.process-intro .process-scroll-cue {
  margin-top: 32px;
}

/* ── Scroll cue — horizontal label + chevron, no line ── */
.process-scroll-cue {
  display: flex;
  flex-direction: column;
  align-items: center;
  opacity: 0.85;
  pointer-events: none;
  transition: opacity 600ms var(--ease-out);
}

.process-scroll-cue.is-hidden { opacity: 0; }

.process-scroll-cue__label {
  font-family: 'Montserrat', sans-serif;
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 0.34em;
  color: rgba(245, 240, 232, 0.62);
}

.process-scroll-cue::after {
  content: '';
  width: 7px;
  height: 7px;
  margin-top: 10px;
  border-right:  1.5px solid rgba(245, 240, 232, 0.55);
  border-bottom: 1.5px solid rgba(245, 240, 232, 0.55);
  animation: cueChevron 1800ms var(--ease-soft) infinite;
}

@keyframes cueChevron {
  0%, 100% { transform: rotate(45deg) translate(-1px, -1px); opacity: 0.35; }
  50%      { transform: rotate(45deg) translate(2px, 2px);   opacity: 0.95; }
}

/* ── Content area — centred, wide enough for proper left/right stagger ── */
.process-scroll__inner {
  max-width: 950px;
  width: 100%;
  margin: 0 auto;
  padding: 0 48px 120px;
}

/* ── Timeline inner — positioning parent for SVG, orbs, cards ── */
.process-timeline__inner {
  position: relative;
  /* height set by JS */
}

/* ── SVG line ── */
.process-line {
  position: absolute;
  top: 0;
  left: 0;
  overflow: visible;
  pointer-events: none;
  z-index: 1;
}

.process-line__base {
  fill: none;
  stroke: rgba(245, 240, 232, 0.14);
  stroke-width: 1.5;
  stroke-linecap: round;
}

.process-line__active {
  fill: none;
  stroke: var(--crimson);
  stroke-width: 2.5;
  stroke-linecap: round;
  filter: drop-shadow(0 0 4px rgba(139, 58, 58, 0.45));
}

.process-line__head {
  position: absolute;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  background: rgba(248, 230, 212, 0.95);
  box-shadow:
    0 0 8px 2px rgba(180, 80, 80, 0.55),
    0 0 16px 5px rgba(139, 58, 58, 0.30);
  opacity: 0;
  pointer-events: none;
  z-index: 1;
}

/* ── Orbs ── */
.process-orb {
  position: absolute;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  border: 1.5px solid rgba(245, 240, 232, 0.26);
  background: radial-gradient(circle at 50% 40%, rgba(42, 32, 30, 0.92), rgba(13, 10, 9, 0.96));
  z-index: 3;
  pointer-events: none;
  transition:
    width        360ms var(--ease-out),
    height       360ms var(--ease-out),
    border-color 460ms var(--ease-out),
    box-shadow   460ms var(--ease-out);
}

.process-orb::after {
  content: '';
  position: absolute;
  inset: 0;
  margin: auto;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: rgba(245, 240, 232, 0.38);
  transition: background 460ms var(--ease-out), box-shadow 460ms var(--ease-out);
}

.process-orb[data-node="done"] {
  border-color: rgba(139, 58, 58, 0.7);
  background: radial-gradient(circle at 50% 40%, rgba(120, 46, 46, 0.6), rgba(40, 16, 16, 0.92));
}
.process-orb[data-node="done"]::after { background: rgba(222, 156, 156, 0.78); }

.process-orb[data-node="current"] {
  width: 28px;
  height: 28px;
  border-color: rgba(184, 84, 84, 0.85);
  box-shadow:
    0 0 0 4px rgba(139, 58, 58, 0.10),
    0 0 18px 4px rgba(139, 58, 58, 0.32);
  background: radial-gradient(circle at 50% 38%, rgba(150, 56, 56, 0.85), rgba(58, 20, 20, 0.95));
}
.process-orb[data-node="current"]::after {
  width: 6px;
  height: 6px;
  background: var(--warm-white);
  box-shadow: 0 0 8px 2px rgba(245, 225, 200, 0.5);
}

/* ── Step cards — absolutely placed, staggered left/right ── */
.process-steps {
  list-style: none;
  margin: 0;
  padding: 0;
}

.process-step {
  position: absolute;
  z-index: 2;
  opacity: 0;
  transform: translateY(16px);
  transition:
    opacity   640ms var(--ease-soft),
    transform 640ms var(--ease-soft);
}

.process-step.is-revealed {
  opacity: 1;
  transform: none;
}

.process-step__card {
  position: relative;
  width: 100%;
  background: rgba(15, 13, 12, 0.86);
  border: 0.5px solid rgba(245, 240, 232, 0.11);
  border-radius: 3px;
  padding: 24px 28px 25px;
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.40);
  transition:
    border-color 360ms var(--ease-out),
    background   360ms var(--ease-out),
    opacity      360ms var(--ease-out);
}

.process-step.is-passed .process-step__card { opacity: 0.66; }

.process-step.is-active .process-step__card {
  opacity: 1;
  border-color: rgba(139, 58, 58, 0.5);
  background: rgba(26, 19, 18, 0.62);
}

.process-step__number {
  position: absolute;
  top: 18px;
  right: 22px;
  font-family: 'Montserrat', sans-serif;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.2em;
  color: rgba(245, 240, 232, 0.3);
  transition: color 360ms var(--ease-out);
}

.process-step.is-active .process-step__number { color: rgba(198, 126, 126, 0.92); }

.process-step__title {
  font-family: 'Cormorant Garamond', serif;
  font-weight: 600;
  font-size: 23px;
  line-height: 1.18;
  letter-spacing: -0.01em;
  color: var(--warm-white);
  margin: 0 0 9px;
  padding-right: 44px;
}

.process-step__desc {
  font-family: 'DM Sans', sans-serif;
  font-weight: 400;
  font-size: 13.5px;
  line-height: 1.66;
  letter-spacing: -0.01em;
  color: rgba(245, 240, 232, 0.58);
  margin: 0;
}

/* ── Continue — base hide/reveal (position via .process-continue--fixed) ── */
.process-continue {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(8px);
  transition:
    opacity    420ms var(--ease-soft),
    transform  420ms var(--ease-soft),
    visibility 420ms;
}

.process-continue.is-visible {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0);
}

/* ── Reduced motion ── */
@media (prefers-reduced-motion: reduce) {
  .process-step { opacity: 1; transform: none; transition: none; }
  .process-line__active, .process-orb { transition: none; }
  .process-line__head { display: none; }
  .process-scroll-cue::after { animation: none; opacity: 0.6; }
  .process-scroll-cue { transition: none; }
}

/* ── Responsive ── */
@media (max-width: 900px) {
  .process-scroll__inner { padding: 0 24px 100px; }
  .process-intro { padding: 0 24px 90px; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   CINEMATIC POLISH PASS — shared atmosphere + step transitions
   Additive layer only: no layout, flow, or Framer-speced values touched.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Page veil — cinematic crossfade between consultation steps.
   Injected by consultation-core.js before first paint; lifts on entrance,
   falls again when flow.js navigates. Makes the steps read as one film. ── */
.page-veil {
  position: fixed;
  inset: 0;
  z-index: 9990;            /* above content, below the custom cursor */
  background: var(--ink);
  pointer-events: none;
  opacity: 1;
  transition: opacity 420ms var(--ease-out); /* exit: veil falls quickly */
}

.page-veil.is-lifted {
  opacity: 0;
  transition: opacity 760ms var(--ease-soft); /* entrance: veil lifts slowly */
}

/* ── Ambient light grade — a warm dusk glow over the backdrop. STATIC
   (painted once): the visual warmth with no per-frame cost. ── */
.page-bg::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: radial-gradient(
    90% 62% at 50% 16%,
    rgba(224, 186, 145, 0.085),
    transparent 72%
  );
}

/* ── Question heading — settles into the scene instead of sitting on it ── */
.question-heading {
  text-shadow: 0 2px 26px rgba(8, 6, 4, 0.45);
}

/* ── Logo — faint separation from the backdrop ── */
.logo {
  filter: drop-shadow(0 4px 14px rgba(0, 0, 0, 0.40));
}

/* ── Progress indicator — static soft glow on the "you are here" pill.
   Painted once (no animation) — emphasis with zero per-frame cost. ── */
.pi-dot[data-state="current"] {
  box-shadow: 0 0 9px 1px rgba(139, 58, 58, 0.42);
}

/* ── Room chips — top-light sheen so they read as considered objects ── */
.room-chip {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0) 40%),
    rgba(18, 18, 18, 0.80);
}

.room-chip:hover {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0) 40%),
    rgba(255, 255, 255, 0.07);
}

/* ── Rose acknowledges the answer ─────────────────────────────────────────
   body.is-acknowledging fades the entire scene to black. CRFlow.acknowledge()
   then injects .ack-thinking (thinking dots) and .ack-reply (Rose's spoken
   response) as fixed-centered elements — like a private message in a
   darkened room. ── */
body.is-acknowledging .top-bar,
body.is-acknowledging .chat-input-wrap,
body.is-acknowledging .progress-indicator,
body.is-acknowledging .features-chat__visuals,
body.is-acknowledging .consultation-area > * {
  opacity: 0 !important;
  pointer-events: none;
  transition: opacity 480ms var(--ease-out);
}

/* Thinking dots — three warm-white circles pulsing, centered on screen */
.ack-thinking {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 100;
  display: flex;
  gap: 8px;
  align-items: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 280ms var(--ease-soft);
}
.ack-thinking.is-visible { opacity: 1; }
.ack-thinking span {
  display: block;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: rgba(245, 240, 232, 0.55);
  animation: ackDotPulse 1.4s ease-in-out infinite;
}
.ack-thinking span:nth-child(2) { animation-delay: 0.22s; }
.ack-thinking span:nth-child(3) { animation-delay: 0.44s; }
@keyframes ackDotPulse {
  0%, 80%, 100% { opacity: 0.25; transform: scale(0.8);  }
  40%           { opacity: 1;    transform: scale(1.2);  }
}

/* Rose's reply — matches .question-heading exactly; italic is the only distinction */
.ack-reply {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, calc(-50% + 14px));
  z-index: 100;
  font-family: 'Cormorant Garamond', serif;
  font-size: 40px;
  font-weight: 500;
  font-style: italic;
  line-height: 47px;
  letter-spacing: -0.05em;
  color: var(--warm-white);
  text-align: center;
  text-shadow: 0 2px 26px rgba(8, 6, 4, 0.45);
  width: 80%;
  max-width: 700px;
  opacity: 0;
  pointer-events: none;
  transition:
    opacity   380ms var(--ease-soft),
    transform 380ms var(--ease-soft);
}
.ack-reply.is-visible {
  opacity: 1;
  transform: translate(-50%, -50%);
}
@media (max-width: 768px) {
  .ack-reply { font-size: 34px; line-height: 42px; }
}
@media (max-width: 480px) {
  .ack-reply { font-size: 28px; line-height: 36px; }
}

/* ── Reduced motion — the veil crossfade resolves instantly ── */
@media (prefers-reduced-motion: reduce) {
  .page-veil { display: none; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   INVESTMENT BREAKDOWN — Process & Finances Q2 (cost-breakdown.html)
   Single centered column layout (.consultation-area--cb): intro heading
   at top, scrollable editorial story below (.cb-*), fixed continue button
   revealed after scroll.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Right — scrollable investment story ── */
.cb-scroll {
  flex: 1 1 auto;
  max-width: 680px;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  outline: none;
  /* Soft cinematic fade at the top/bottom scroll edges */
  -webkit-mask-image: linear-gradient(
    to bottom, transparent 0, #000 56px, #000 calc(100% - 64px), transparent 100%);
  mask-image: linear-gradient(
    to bottom, transparent 0, #000 56px, #000 calc(100% - 64px), transparent 100%);
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.cb-scroll::-webkit-scrollbar { width: 0; height: 0; display: none; }

.cb-scroll:focus-visible {
  outline: 1px solid var(--faint-white);
  outline-offset: -1px;
  border-radius: 2px;
}

.cb-scroll__inner {
  display: flex;
  flex-direction: column;
  gap: 64px;
  padding: 80px 6px 140px 2px;
}

/* ── Section reveal — rises into view as it enters the column ── */
.cb-section {
  opacity: 0;
  transform: translateY(26px);
  transition:
    opacity   700ms var(--ease-soft),
    transform 700ms var(--ease-soft);
  margin-bottom: 80px;
}

.cb-section.is-revealed {
  opacity: 1;
  transform: translateY(0);
}

/* ── Editorial voice ── */
.cb-eyebrow {
  display: block;
  text-align: center;
  font-family: 'Montserrat', sans-serif;
  font-size: 21px;
  font-weight: 300;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(245, 240, 232, 0.72);
  margin-bottom: 28px;
}

.cb-lede {
  font-family: 'DM Sans', sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.76;
  letter-spacing: -0.005em;
  color: rgba(245, 240, 232, 0.62);
  max-width: 560px;
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}

/* ── Assumptions pill — opens the basis of the ranges ── */
.cb-assumptions {
  display: flex;
  margin-left: auto;
  margin-right: auto;
  align-items: center;
  gap: 9px;
  margin-top: 18px;
  padding: 8px 15px;
  font-family: 'Montserrat', sans-serif;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.22em;
  color: rgba(245, 240, 232, 0.55);
  background: rgba(16, 12, 10, 0.45);
  border: 0.5px solid rgba(245, 240, 232, 0.16);
  border-radius: 999px;
  cursor: none;
  outline: none;
  transition:
    color        260ms var(--ease-out),
    border-color 260ms var(--ease-out),
    background   260ms var(--ease-out);
}

.cb-assumptions {
  padding: 8px 25px;
}

.cb-assumptions:hover {
  color: rgba(245, 240, 232, 0.85);
  border-color: rgba(245, 240, 232, 0.32);
  background: rgba(26, 20, 17, 0.6);
}

.cb-assumptions__dot { display: none; }

.cb-assumptions__chev { transition: transform 320ms var(--ease-soft); }
.cb-assumptions.is-open .cb-assumptions__chev { transform: rotate(180deg); }
.cb-assumptions.is-open {
  color: rgba(245, 240, 232, 0.85);
  border-color: rgba(150, 78, 78, 0.50);
}

.cb-assumptions__panel-inner {
  max-width: 540px;
  margin-top: 14px;
  padding-left: 16px;
  border-left: 1px solid rgba(150, 78, 78, 0.45);
  animation: fadeUp 360ms var(--ease-soft) both;
}

.cb-assumptions__panel-inner p {
  font-family: 'DM Sans', sans-serif;
  font-size: 12.5px;
  line-height: 1.7;
  color: rgba(245, 240, 232, 0.52);
}

.cb-assumptions__panel-inner p + p { margin-top: 8px; }

.cb-assumptions__panel-inner em {
  font-style: normal;
  color: rgba(245, 240, 232, 0.82);
}

/* ── Tier cards — Classic / Elevated / Bespoke ── */
.cb-tiers {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  margin-top: 40px;
  background: rgba(18, 18, 18, 0.80);
  border: 0.5px solid rgba(245, 240, 232, 0.14);
}

.cb-tier {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 32px 24px 28px;
  border-right: 0.5px solid rgba(245, 240, 232, 0.10);
}

.cb-tier:last-child {
  border-right: none;
}

/* Stagger the three cards as the range section reveals */
.cb-section.is-revealed .cb-tier:nth-child(1) { transition-delay: 0ms; }
.cb-section.is-revealed .cb-tier:nth-child(2) { transition-delay: 70ms; }
.cb-section.is-revealed .cb-tier:nth-child(3) { transition-delay: 140ms; }

.cb-tier__img-wrap {
  height: 104px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  margin-bottom: 16px;
}

.cb-tier__img {
  max-height: 104px;
  max-width: 100%;
  filter: drop-shadow(0 16px 18px rgba(0, 0, 0, 0.45));
}

.cb-tier__name {
  font-family: 'Montserrat', sans-serif;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: rgba(245, 240, 232, 0.80);
}

.cb-tier__desc {
  font-family: 'DM Sans', sans-serif;
  font-size: 12px;
  font-weight: 400;
  line-height: 1.60;
  color: rgba(245, 240, 232, 0.56);
  margin: 8px 0 16px;
  flex: 1;
}

.cb-tier__price {
  width: 100%;
  padding-top: 16px;
  border-top: 0.5px solid rgba(245, 240, 232, 0.14);
}

.cb-tier__range {
  display: block;
  font-family: 'Cormorant Garamond', serif;
  font-size: 28px;
  font-weight: 500;
  letter-spacing: -0.02em;
  color: var(--warm-white);
  font-variant-numeric: tabular-nums; /* steady width during count-up */
}

.cb-tier__unit {
  display: block;
  margin-top: 4px;
  font-family: 'Montserrat', sans-serif;
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 0.28em;
  color: rgba(245, 240, 232, 0.44);
}

/* ── Cost-driver accordions ── */
.cb-accordions {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 28px;
}

.cb-acc {
  background: rgba(18, 18, 18, 0.80);
  border: 0.5px solid rgba(245, 240, 232, 0.10);
  border-radius: 3px;
  transition:
    border-color 320ms var(--ease-out),
    background   320ms var(--ease-out),
    box-shadow   320ms var(--ease-out);
}

.cb-acc:hover { border-color: rgba(245, 240, 232, 0.20); }

.cb-acc.is-open {
  border-color: rgba(245, 240, 232, 0.22);
  background: rgba(30, 27, 24, 1.00);
  box-shadow: none;
}

.cb-acc__head {
  display: flex;
  align-items: center;
  width: 100%;
  gap: 14px;
  padding: 22px 18px;
  background: none;
  border: none;
  text-align: left;
  cursor: none;
  outline: none;
}

.cb-acc__head:focus-visible {
  outline: 1px solid var(--faint-white);
  outline-offset: -4px;
}

.cb-acc__title {
  font-family: 'Cormorant Garamond', serif;
  font-size: 19px;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: rgba(245, 240, 232, 0.88);
  transition: color 260ms var(--ease-out);
}

.cb-acc.is-open .cb-acc__title { color: var(--warm-white); }

.cb-acc__alloc-label {
  margin-left: auto;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  font-family: 'Montserrat', sans-serif;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.20em;
  color: rgba(245, 240, 232, 0.40);
  white-space: nowrap;
}

.cb-acc__alloc-label::after {
  content: 'of build cost';
  font-family: 'DM Sans', sans-serif;
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.03em;
  color: rgba(245, 240, 232, 0.24);
  margin-top: 3px;
  text-transform: none;
}

/* Thin plus that folds into a minus on open */
.cb-acc__icon {
  position: relative;
  width: 11px;
  height: 11px;
  flex-shrink: 0;
}

.cb-acc__icon::before,
.cb-acc__icon::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 0;
  width: 11px;
  height: 1px;
  background: rgba(245, 240, 232, 0.55);
  transition: transform 360ms var(--ease-soft), background 260ms var(--ease-out);
}

.cb-acc__icon::after { transform: rotate(90deg); }

.cb-acc.is-open .cb-acc__icon::before { background: rgba(245, 240, 232, 0.90); }
.cb-acc.is-open .cb-acc__icon::after  { transform: rotate(0deg); background: rgba(245, 240, 232, 0.90); }

/* Body — grid-rows height animation (no layout-thrash height tween) */
.cb-acc__body {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 460ms var(--ease-soft);
}

.cb-acc.is-open .cb-acc__body { grid-template-rows: 1fr; }

.cb-acc__body-inner {
  overflow: hidden;
  min-height: 0;
  padding: 0 18px;
}

.cb-acc.is-open .cb-acc__body-inner { padding-bottom: 18px; }

/* Allocation bar — grows to its share when the drawer opens */
.cb-acc__bar {
  height: 2px;
  background: rgba(245, 240, 232, 0.08);
  border-radius: 1px;
  overflow: hidden;
}

.cb-acc__bar-fill {
  display: block;
  height: 100%;
  width: 0;
  background: rgba(245, 240, 232, 0.70);
  box-shadow: none;
  transition: width 700ms var(--ease-out) 180ms;
}

.cb-acc.is-open .cb-acc__bar-fill { width: var(--alloc); }

.cb-acc__copy {
  font-family: 'DM Sans', sans-serif;
  font-size: 13px;
  line-height: 1.7;
  color: rgba(245, 240, 232, 0.58);
  margin: 14px 0;
  max-width: 540px;
}

.cb-acc__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.cb-chip {
  font-family: 'Montserrat', sans-serif;
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(245, 240, 232, 0.78);
  background: rgba(100, 50, 50, 0.18);
  border: 0.5px solid rgba(150, 78, 78, 0.40);
  border-radius: 2px;
  padding: 5px 10px;
}

/* ── Scope — usually included vs often separate ── */
.cb-scope {
  margin-top: 26px;
  max-width: 560px;
  margin-left: auto;
  margin-right: auto;
  background: rgba(18, 18, 18, 0.80);
  border: 0.5px solid rgba(245, 240, 232, 0.10);
  padding: 10px 20px 20px;
}

.cb-scope__tabs {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-bottom: 0.5px solid rgba(245, 240, 232, 0.14);
}

.cb-scope__tab {
  padding: 10px 4px 13px;
  background: none;
  border: none;
  font-family: 'Montserrat', sans-serif;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.20em;
  text-transform: uppercase;
  text-align: center;
  color: rgba(245, 240, 232, 0.40);
  cursor: none;
  outline: none;
  transition: color 280ms var(--ease-out);
}

.cb-scope__tab:hover { color: rgba(245, 240, 232, 0.68); }
.cb-scope__tab.is-active { color: rgba(245, 240, 232, 0.92); }

.cb-scope__tab:focus-visible {
  outline: 1px solid var(--faint-white);
  outline-offset: -2px;
}

.cb-scope__tab-line {
  position: absolute;
  bottom: -0.5px;
  left: 0;
  width: 50%;
  height: 1px;
  background: linear-gradient(90deg, rgba(150, 78, 78, 0.9), rgba(150, 78, 78, 0.4));
  box-shadow: 0 0 8px rgba(139, 58, 58, 0.45);
  transition: transform 380ms var(--ease-soft);
}

.cb-scope__tabs.is-separate .cb-scope__tab-line { transform: translateX(100%); }

.cb-scope__list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 11px 28px;
  margin-top: 20px;
  list-style: none;
  padding: 0;
}

/* display:grid overrides the [hidden] attribute — restore the expected behaviour */
.cb-scope__list[hidden] { display: none !important; }

.cb-scope__list li {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  padding-left: 0;
  font-family: 'DM Sans', sans-serif;
  font-size: 13px;
  line-height: 1.5;
  text-align: left;
  color: rgba(245, 240, 232, 0.66);
}

.cb-scope__list li::before {
  content: '✓';
  flex-shrink: 0;
  top: 0;
  font-size: 11px;
  color: rgba(245, 240, 232, 0.70);
}

#cb-panel-separate li::before {
  content: '—';
  color: rgba(245, 240, 232, 0.30);
}

/* List items stagger in on tab switch */
.cb-scope__list.is-active li {
  animation: cbItemIn 420ms var(--ease-soft) both;
}
.cb-scope__list.is-active li:nth-child(1) { animation-delay: 0ms; }
.cb-scope__list.is-active li:nth-child(2) { animation-delay: 45ms; }
.cb-scope__list.is-active li:nth-child(3) { animation-delay: 90ms; }
.cb-scope__list.is-active li:nth-child(4) { animation-delay: 135ms; }
.cb-scope__list.is-active li:nth-child(5) { animation-delay: 180ms; }
.cb-scope__list.is-active li:nth-child(6) { animation-delay: 225ms; }
.cb-scope__list.is-active li:nth-child(7) { animation-delay: 270ms; }
.cb-scope__list.is-active li:nth-child(8) { animation-delay: 315ms; }
.cb-scope__list.is-active li:nth-child(9) { animation-delay: 360ms; }

@keyframes cbItemIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── Assumptions row inside tiers box ── */
.cb-tiers__assumptions-row {
  grid-column: 1 / -1;
  border-top: 0.5px solid rgba(245, 240, 232, 0.08);
  padding: 16px 20px 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.cb-tiers__assumptions-row .cb-assumptions {
  margin-top: 0;
}

/* ── Tier basis note ── */
.cb-tier__basis {
  display: block;
  font-family: 'DM Sans', sans-serif;
  font-size: 9px;
  letter-spacing: 0.04em;
  color: rgba(245, 240, 232, 0.28);
  margin-top: 3px;
  text-transform: none;
}

/* ── Decide now vs later ── */
.cb-decide {
  display: grid;
  grid-template-columns: 1fr 1fr;
  background: rgba(18, 18, 18, 0.80);
  border: 0.5px solid rgba(245, 240, 232, 0.14);
  margin-top: 28px;
}

.cb-decide__col { padding: 24px 20px 22px; }
.cb-decide__col:first-child { border-right: 0.5px solid rgba(245, 240, 232, 0.10); }

.cb-decide__label {
  display: block;
  font-family: 'Montserrat', sans-serif;
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 0.20em;
  text-transform: uppercase;
  color: rgba(245, 240, 232, 0.38);
  margin-bottom: 16px;
}

.cb-decide__label--early { color: rgba(245, 240, 232, 0.88); }

.cb-decide__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 9px;
}

.cb-decide__list li {
  font-family: 'DM Sans', sans-serif;
  font-size: 12.5px;
  line-height: 1.5;
  color: rgba(245, 240, 232, 0.62);
  display: flex;
  align-items: flex-start;
  gap: 8px;
  text-align: left;
}

.cb-decide__col:first-child .cb-decide__list li::before {
  content: '';
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: rgba(245, 240, 232, 0.80);
  flex-shrink: 0;
  margin-top: 5px;
}

.cb-decide__col:last-child .cb-decide__list li::before {
  content: '';
  width: 5px;
  height: 5px;
  border-radius: 50%;
  border: 0.5px solid rgba(245, 240, 232, 0.22);
  flex-shrink: 0;
  margin-top: 5px;
}

/* ── Decide tab-format (mirrors scope) ── */
#cb-panel-early li::before,
#cb-panel-phase li::before {
  content: '';
  width: 5px;
  height: 5px;
  border-radius: 50%;
  flex-shrink: 0;
  font-size: 0;
  margin-top: 5px;
  display: block;
}

#cb-panel-early li::before {
  background: rgba(245, 240, 232, 0.80);
}

#cb-panel-phase li::before {
  background: transparent;
  border: 0.5px solid rgba(245, 240, 232, 0.30);
}

/* ── Contingency display ── */
.cb-contingency {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: stretch;
  background: rgba(18, 18, 18, 0.80);
  border: 0.5px solid rgba(245, 240, 232, 0.14);
  margin-top: 28px;
  margin-bottom: 40px;
}

.cb-contingency__item { padding: 26px 22px; }

.cb-contingency__divider {
  width: 0.5px;
  background: rgba(245, 240, 232, 0.10);
  align-self: stretch;
}

.cb-contingency__figure {
  display: block;
  font-family: 'Cormorant Garamond', serif;
  font-size: 34px;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: rgba(245, 240, 232, 0.88);
  margin-bottom: 10px;
}

.cb-contingency__label {
  display: block;
  font-family: 'Montserrat', sans-serif;
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(245, 240, 232, 0.38);
  margin-bottom: 10px;
}

.cb-contingency__copy {
  font-family: 'DM Sans', sans-serif;
  font-size: 12px;
  line-height: 1.72;
  color: rgba(245, 240, 232, 0.52);
  margin: 0;
}

/* ── Closing note + next-step tease ── */
.cb-section--close { padding-top: 6px; text-align: center; }

.cb-close__rule {
  width: 54px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(150, 78, 78, 0.85), transparent);
  margin-bottom: 20px;
  margin-left: auto;
  margin-right: auto;
}

.cb-close__note {
  font-family: 'Cormorant Garamond', serif;
  font-style: normal;
  font-size: 20px;
  font-weight: 400;
  line-height: 1.62;
  letter-spacing: -0.01em;
  color: rgba(245, 240, 232, 0.74);
  max-width: 480px;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}


/* ── Centered layout — single column override ── */
.consultation-area--cb {
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 0;
  padding: 0;
  min-height: 0;
  overflow: hidden;
}

/* cb-intro fills the first viewport screen, content vertically centered */
.cb-intro {
  position: relative;
  min-height: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 0 48px 90px;
}

.cb-intro .question-heading {
  margin-top: 0;
  margin-bottom: 0;
}

/* Scroll cue sits directly below the heading */
.cb-intro .process-scroll-cue {
  margin-top: 32px;
}

.consultation-area--cb .cb-scroll {
  max-width: 1200px;
  width: 100%;
  flex: 1 1 0;
}

.consultation-area--cb .cb-scroll__inner {
  padding: 75px 65px 125px;
  background: rgba(0, 0, 0, 0.70);
  border: 0.5px solid rgba(245, 240, 232, 0.10);
}

/* ── Fixed continue — centered at bottom, revealed on scroll ── */
.process-continue--fixed {
  position: fixed;
  bottom: 130px;
  left: 50%;
  margin-top: 0;
  transform: translateX(-50%) translateY(8px);
  z-index: 50;
}

.process-continue--fixed.is-visible {
  transform: translateX(-50%) translateY(0);
}

/* ── Reduced motion ── */
@media (prefers-reduced-motion: reduce) {
  .cb-section { opacity: 1; transform: none; transition: none; }
  .cb-tier, .cb-tier__img { transition: none; }
  .cb-acc__body { transition: none; }
  .cb-acc__bar-fill { transition: none; }
  .cb-scope__list.is-active li { animation: none; }
  .cb-scope__tab-line { transition: none; }
}

/* ── Responsive ── */
@media (max-width: 900px) {
  .cb-scroll { max-width: none; }
  .cb-tiers { grid-template-columns: 1fr; }
  .cb-tier { padding: 24px 16px 20px; border-right: none; border-bottom: 0.5px solid rgba(245, 240, 232, 0.10); }
  .cb-tier:last-child { border-bottom: none; }
  .cb-tier__img-wrap { height: 84px; margin-bottom: 12px; }
  .cb-tier__img { max-height: 84px; }
  .cb-tier__desc { margin: 6px 0 12px; }
  .cb-tier__price { padding-top: 10px; }
  .cb-scope__list { grid-template-columns: 1fr; }
  .cb-decide { grid-template-columns: 1fr; }
  .cb-decide__col:first-child { border-right: none; border-bottom: 0.5px solid rgba(245, 240, 232, 0.10); }
  .cb-contingency { grid-template-columns: 1fr; }
  .cb-contingency__divider { width: 100%; height: 0.5px; }
}

/* ============================================================
   HOMEPAGE — full-screen video consultation flow
   All rules scoped to .hp-* prefix.
   ============================================================ */

/* ── Viewport shell ── */
.hp-viewport {
  position: relative;
  width: 100vw;
  height: 100dvh;
  overflow: hidden;
  background: var(--ink);
}

/* ── Hero video ── */
.hp-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  z-index: 0;
  opacity: 0;
  animation: hpGradientIn 1400ms cubic-bezier(0.25, 0.46, 0.45, 0.94) 100ms forwards;
}

/* ── Cinematic vignette — static, paints once (edges darken, eye centres) ── */
.hp-vignette {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background:
    radial-gradient(130% 110% at 50% 42%,
      transparent 52%,
      rgba(10, 7, 5, 0.28) 82%,
      rgba(10, 7, 5, 0.52) 100%);
}


/* ── Gradient overlays — fade in timed with prototype ── */
@keyframes hpGradientIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.hp-overlay-top {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 75%;
  z-index: 1;
  pointer-events: none;
  opacity: 0;
  animation: hpGradientIn 1700ms cubic-bezier(0.25, 0.46, 0.45, 0.94) 3700ms forwards;
  background: linear-gradient(
    to bottom,
    rgba(10, 7, 5, 0.97)  0%,
    rgba(10, 7, 5, 0.93) 12%,
    rgba(10, 7, 5, 0.86) 28%,
    rgba(10, 7, 5, 0.74) 44%,
    rgba(10, 7, 5, 0.56) 60%,
    rgba(10, 7, 5, 0.34) 78%,
    transparent          100%
  );
}

.hp-overlay-bottom {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 38%;
  z-index: 1;
  pointer-events: none;
  opacity: 0;
  animation: hpGradientIn 1700ms cubic-bezier(0.25, 0.46, 0.45, 0.94) 3700ms forwards;
  background: linear-gradient(
    to top,
    rgba(10, 7, 5, 0.55)  0%,
    rgba(10, 7, 5, 0.24) 46%,
    transparent          100%
  );
}

/* ── Radial halo — dark wash behind consultation UI ── */
.hp-halo {
  position: fixed;
  top: 50%;
  left: 50%;
  width: 900px;
  height: 620px;
  transform: translate(-50%, -50%) translateY(-60px);
  background: radial-gradient(
    ellipse at center,
    rgba(10, 7, 5, 0.82)  0%,
    rgba(10, 7, 5, 0.64) 24%,
    rgba(10, 7, 5, 0.32) 50%,
    transparent          70%
  );
  pointer-events: none;
  z-index: 15;
}

/* ── Logo — fixed top center ── */
.hp-logo {
  position: fixed;
  top: 28px;
  left: 0; right: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 30;
  pointer-events: none;
  opacity: 0;
  animation: fadeUp 700ms var(--ease-soft) 5000ms both;
}

.hp-logo img {
  height: 64px;
  width: auto;
  object-fit: contain;
  display: block;
}

/* ── Main chat container ── */
.hp-chat {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 20;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 230px;
  opacity: 0;
  transform: translateY(14px);
  transition:
    opacity   900ms var(--ease-soft),
    transform 900ms var(--ease-soft);
}

.hp-chat.is-revealed {
  opacity: 1;
  transform: translateY(0);
}

/* ── Rose signal — butterfly + label ── */
.hp-rose-signal {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
  margin-bottom: 16px;
  opacity: 0;
  animation: fadeUp 500ms var(--ease-soft) 5000ms both;
}

.hp-rose-signal__butterfly {
  width: 26px;
  height: auto;
  opacity: 0.52;
  display: block;
}

.hp-rose-signal__label {
  font-family: 'Montserrat', sans-serif;
  font-size: 8px;
  font-weight: 400;
  letter-spacing: 0.38em;
  text-transform: uppercase;
  color: rgba(245, 240, 232, 0.30);
}

/* ── Greeting area ── */
.hp-greeting-wrap {
  position: relative;
  width: min(900px, calc(100vw - 48px));
  display: flex;
  justify-content: center;
  align-items: flex-start;
  margin-bottom: 36px;
  min-height: 56px;
}

/* Welcome intro text — absolute, shown before greeting, fades via JS */
.hp-welcome {
  font-family: 'Cormorant Garamond', serif;
  font-weight: 500;
  font-size: 40px;
  line-height: 47px;
  letter-spacing: -0.05em;
  color: var(--warm-white);
  text-align: center;
  width: 100%;
  position: absolute;
  top: 0; left: 0; right: 0;
  opacity: 0;
  transform: scale(0.92);
  pointer-events: none;
  transition: opacity 600ms var(--ease-soft), transform 600ms var(--ease-soft);
}

.hp-greeting {
  font-family: 'Cormorant Garamond', serif;
  font-weight: 500;
  font-size: 40px;
  line-height: 47px;
  letter-spacing: -0.05em;
  color: var(--warm-white);
  text-align: center;
  max-width: 100%;
  transition:
    opacity    300ms var(--ease-out),
    transform  300ms var(--ease-out),
    font-size  300ms var(--ease-out),
    line-height 300ms var(--ease-out);
}

/* Compact size for longer welcome messages */
.hp-greeting--compact {
  font-size: 34px;
  line-height: 41px;
}

/* Large size for short punchy questions */
.hp-greeting--large {
  font-size: 48px;
  line-height: 56px;
}

.hp-greeting.is-fading {
  opacity: 0;
  transform: scale(0.97);
}

/* ── Word-stagger spans — no margin-right, natural space from text nodes ── */
.hp-word {
  display: inline-block;
  opacity: 0;
  transform: translateY(12px);
  animation: hpWordReveal 500ms var(--ease-soft) both;
}

@keyframes hpWordReveal {
  from { opacity: 0; transform: translateY(12px); filter: blur(4px); }
  to   { opacity: 1; transform: translateY(0);    filter: blur(0); }
}

/* ── Primary button — crafted sheen + hover lift (all consultation screens) ── */
.submit-btn {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0) 46%),
    var(--crimson);
}

.submit-btn:hover {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0) 46%),
    var(--crimson-hover);
  transform: translateY(-1px);
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.18) inset,
    0 7px 20px -7px rgba(88, 35, 35, 0.55),
    0 0 8px 2px rgba(255, 255, 255, 0.10);
}

.submit-btn:active {
  transform: translateY(0) scale(0.975);
}

/* ── Thinking dots ── */
.hp-think-bar {
  display: none;
  align-items: center;
  gap: 6px;
  padding: 4px 0 12px;
  width: min(600px, calc(100vw - 48px));
  justify-content: center;
}

.hp-think-bar.show { display: flex; }

.hp-tdot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: rgba(245, 240, 232, 0.38);
  animation: hpTdot 0.9s ease-in-out infinite;
}
.hp-tdot:nth-child(2) { animation-delay: 0.15s; }
.hp-tdot:nth-child(3) { animation-delay: 0.30s; }

@keyframes hpTdot {
  0%, 100% { opacity: 0.3; transform: translateY(0); }
  50%       { opacity: 1;   transform: translateY(-3px); }
}

/* ── Step containers ── */
.hp-step {
  display: none;
  flex-direction: column;
  align-items: center;
  width: min(600px, calc(100vw - 48px));
  opacity: 0;
  transform: translateY(14px);
  transition:
    opacity   520ms var(--ease-soft),
    transform 520ms var(--ease-soft);
}

.hp-step.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.hp-step.is-exiting {
  opacity: 0;
  transform: translateY(-10px);
  transition:
    opacity   350ms var(--ease-out),
    transform 350ms var(--ease-out);
}

/* features-chat fills the step width on homepage */
.hp-step .features-chat { width: 100%; }

/* Extra breathing room between fields and the CONTINUE button */
.hp-step .submit-row { margin-top: 36px; }

/* ── Contact fields — side by side ── */
.hp-contact-row {
  display: flex;
  gap: 24px;
  width: 100%;
}

.hp-contact-field {
  flex: 1;
  display: flex;
  flex-direction: column;
}

/* ── Contact step button row — skip (ghost, left) + save info (primary, right) ── */
.hp-contact-btns {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 36px;
}

.hp-skip-btn {
  font-family: 'Montserrat', sans-serif;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(245, 240, 232, 0.86);
  background: rgba(20, 16, 14, 0.76);
  border: 0.5px solid rgba(245, 240, 232, 0.42);
  border-radius: 2px;
  padding: 10px 20px;
  cursor: none;
  white-space: nowrap;
  outline: none;
  transition:
    background    220ms var(--ease-out),
    border-color  220ms var(--ease-out),
    color         220ms var(--ease-out);
}

.hp-skip-btn:hover {
  color: rgba(245, 240, 232, 0.98);
  background: rgba(38, 30, 26, 0.88);
  border-color: rgba(245, 240, 232, 0.62);
}

/* ── Intent pills — vertical stacked ── */
.hp-intent-pills {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  width: 100%;
}

.hp-intent-pill {
  width: min(320px, 100%);
  font-family: 'Montserrat', sans-serif;
  font-size: 10px;
  font-weight: 400;
  letter-spacing: 0.20em;
  text-transform: uppercase;
  color: rgba(245, 240, 232, 0.55);
  background: rgba(10, 7, 5, 0.40);
  border: 0.5px solid rgba(245, 240, 232, 0.12);
  border-radius: 2px;
  padding: 13px 24px;
  text-align: center;
  opacity: 0;
  transform: translateY(8px);
  transition:
    color        180ms var(--ease-out),
    border-color 180ms var(--ease-out),
    background   180ms var(--ease-out),
    opacity      400ms var(--ease-soft),
    transform    400ms var(--ease-soft);
}

/* Staggered entrance when parent becomes visible */
.hp-step.is-visible .hp-intent-pill:nth-child(1) {
  opacity: 1;
  transform: translateY(0);
}
.hp-step.is-visible .hp-intent-pill:nth-child(2) {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0ms, 0ms, 0ms, 80ms, 80ms;
}
.hp-step.is-visible .hp-intent-pill:nth-child(3) {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0ms, 0ms, 0ms, 160ms, 160ms;
}

.hp-intent-pill:hover {
  color: var(--warm-white);
  border-color: rgba(245, 240, 232, 0.30);
  background: rgba(10, 7, 5, 0.58);
}

.hp-intent-pill:active { transform: scale(0.98); }

/* ── Responsive ── */
@media (max-width: 680px) {
  .hp-chat      { padding-top: 170px; }
  .hp-greeting  { font-size: 34px; }
  .hp-logo img  { height: 52px; }
  .hp-contact-row { flex-direction: column; gap: 20px; }
}

@media (prefers-reduced-motion: reduce) {
  .hp-chat,
  .hp-logo {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  .hp-step          { transition: none !important; }
  .hp-word          { animation: none !important; opacity: 1 !important; transform: none !important; filter: none !important; }
  .hp-tdot          { animation: none !important; opacity: 0.5 !important; }
  .hp-greeting      { transition: none !important; }
  .hp-intent-pill   { opacity: 1 !important; transform: none !important; transition: color 180ms, border-color 180ms, background 180ms !important; }
}

/* ── Full-page exit overlay ── */
.hp-fade-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: rgb(10, 7, 5);
  opacity: 0;
  pointer-events: none;
  transition: opacity 700ms var(--ease-soft);
}

.hp-fade-overlay.is-active {
  opacity: 1;
  pointer-events: all;
}

/* ============================================================
   COMPLETION — closing section
   A homepage-style stepped close that lives inside the
   consultation shell. Reuses .hp-greeting / .hp-step / .hp-tdot;
   the rules below add the recap, contact, and send-off pieces.
   ============================================================ */

.cr-completion {
  /* The stepped flow needs room above for Rose's line */
  padding-top: 8px;
}

/* Tighten the gap between Rose's line and the field below it */
.cr-completion .hp-greeting-wrap {
  margin-bottom: 18px;
}

/* Step action rows (continue / skip / confirm) */
.cr-step-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 34px;
}

.cr-step-actions--center { justify-content: center; }

/* ── Recap review card ──────────────────────────────────────── */
.cr-recap {
  width: min(560px, calc(100vw - 48px));
  max-height: 46vh;
  overflow-y: auto;
  padding: 26px 32px;
  background: rgba(10, 7, 5, 0.40);
  border: 0.5px solid rgba(245, 240, 232, 0.14);
  border-radius: 2px;
  box-shadow:
    inset 0 1px 0 rgba(245, 240, 232, 0.05),
    0 18px 50px -28px rgba(0, 0, 0, 0.7);
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.cr-recap::-webkit-scrollbar { display: none; }

.cr-recap__list { margin: 0; }

.cr-recap__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 24px;
  padding: 11px 0;
  border-bottom: 0.5px solid rgba(245, 240, 232, 0.08);
}

.cr-recap__row:last-child { border-bottom: none; }

.cr-recap__label {
  flex: 0 0 auto;
  margin: 0;
  font-family: 'Montserrat', sans-serif;
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(245, 240, 232, 0.46);
  white-space: nowrap;
}

.cr-recap__value {
  margin: 0;
  text-align: right;
  font-family: 'DM Sans', sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 22px;
  letter-spacing: -0.01em;
  color: rgba(245, 240, 232, 0.92);
}

.cr-recap__empty {
  margin: 0;
  text-align: center;
  font-family: 'DM Sans', sans-serif;
  font-size: 14px;
  color: rgba(245, 240, 232, 0.6);
}

/* Gentle staggered entrance for the rows when the step reveals */
.cr-step.is-visible .cr-recap__row,
#cr-step-recap.is-visible .cr-recap__row {
  animation: crRecapRow 460ms var(--ease-soft) both;
}
#cr-step-recap.is-visible .cr-recap__row:nth-child(1) { animation-delay: 60ms; }
#cr-step-recap.is-visible .cr-recap__row:nth-child(2) { animation-delay: 110ms; }
#cr-step-recap.is-visible .cr-recap__row:nth-child(3) { animation-delay: 160ms; }
#cr-step-recap.is-visible .cr-recap__row:nth-child(4) { animation-delay: 210ms; }
#cr-step-recap.is-visible .cr-recap__row:nth-child(5) { animation-delay: 260ms; }
#cr-step-recap.is-visible .cr-recap__row:nth-child(n+6) { animation-delay: 300ms; }

@keyframes crRecapRow {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── Contact step ───────────────────────────────────────────── */
.cr-contact {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: min(560px, calc(100vw - 48px));
}

.cr-contact .hp-contact-row { width: 100%; }

/* Read-only ↔ editable toggle on the confirm screen.
   Edit reveals the fields in place; we drive this with an
   .is-editing class (not the [hidden] attr) so the display
   rules below always win. */
.cr-contact-fields { width: 100%; }
#cr-step-contact-confirm .cr-contact-fields { display: none; }
#cr-step-contact-confirm.is-editing .cr-contact-lines { display: none; }
#cr-step-contact-confirm.is-editing .cr-contact-fields { display: block; }
#cr-step-contact-confirm.is-editing #cr-confirm-edit { display: none; }

.cr-contact-lines {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 22px 28px;
  background: rgba(10, 7, 5, 0.40);
  border: 0.5px solid rgba(245, 240, 232, 0.14);
  border-radius: 2px;
}

.cr-contact-line {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 11px;
}

.cr-contact-line__icon {
  width: 15px;
  height: 15px;
  opacity: 0.5;
  filter: brightness(0) saturate(0) invert(1);
}

.cr-contact-line__value {
  font-family: 'DM Sans', sans-serif;
  font-size: 15px;
  letter-spacing: -0.01em;
  color: rgba(245, 240, 232, 0.92);
}

/* ── Closing send-off ───────────────────────────────────────── */
.cr-closing {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  max-width: 440px;
  text-align: center;
}

.cr-closing__mark {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: rgba(100, 50, 50, 0.22);
  border: 0.5px solid rgba(150, 78, 78, 0.62);
  box-shadow: 0 0 24px rgba(100, 50, 50, 0.28);
  animation: crMarkIn 560ms var(--ease-spring) both;
}

.cr-closing__mark img {
  width: 18px;
  height: 18px;
  filter: brightness(0) saturate(0) invert(1);
  opacity: 0.95;
}

@keyframes crMarkIn {
  from { opacity: 0; transform: scale(0.7); }
  to   { opacity: 1; transform: scale(1); }
}

.cr-closing__text {
  margin: 0;
  font-family: 'DM Sans', sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 25px;
  letter-spacing: -0.01em;
  color: rgba(245, 240, 232, 0.74);
}

.cr-closing__actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  margin-top: 4px;
}

.cr-closing__return {
  font-family: 'Montserrat', sans-serif;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(245, 240, 232, 0.4);
  background: none;
  border: none;
  cursor: none;
  outline: none;
  transition: color 220ms var(--ease-out);
}

.cr-closing__return:hover { color: rgba(245, 240, 232, 0.74); }

@media (max-width: 680px) {
  .cr-recap { padding: 22px 22px; }
  .cr-step-actions { flex-direction: column; gap: 14px; }
}

@media (prefers-reduced-motion: reduce) {
  .cr-recap__row,
  .cr-closing__mark { animation: none !important; opacity: 1 !important; transform: none !important; }
}

/* ============================================================
   COMPANY — trust-building destination (placeholder)
   The consultation redirects here at the end. Same dark
   cinematic palette and type system as the consultation.
   ============================================================ */

/* The global `body` is locked to 100dvh / overflow:hidden for the fixed
   consultation screens. The company page is a scrolling document, so it
   opts out of that lock via this class (scoped — no other screen affected). */
body.co-body {
  height: auto;
  min-height: 100dvh;
  overflow-x: hidden;
  overflow-y: auto;
}

.co-page {
  position: relative;
  min-height: 100dvh;
  background: var(--ink);
  color: var(--warm-white);
  overflow-x: hidden;
}

/* ── Footer ── */
.co-footer {
  border-top: 0.5px solid var(--hairline);
  padding: 30px 40px 44px;
  text-align: center;
}

.co-footer__note {
  font-family: 'Montserrat', sans-serif;
  font-size: 9px;
  font-weight: 400;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(245, 240, 232, 0.36);
}


/* ============================================================
   SECTION TRANSITION — cinematic interstitial before a section
   Reused per section (before-basics, before-customization, …).
   .st-bg is a single swappable layer: the placeholder image is
   replaced by the matching build-video segment later.
   ============================================================ */
.st-scene {
  position: fixed;
  inset: 0;
  overflow: hidden;
  background: var(--ink);
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ── Background (build stage) — the persistent .bg-video mounts here ── */
.st-bg { position: absolute; inset: 0; z-index: 0; }

/* ── Overlay — light at first, deepens on beat 2 ── */
.st-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: #000000;
  opacity: 0.28;
  transition: opacity 850ms var(--ease-soft);
}

.st-scene.is-darkened .st-overlay { opacity: 0.7; }

/* ── Radial gradient — independent layer above overlay, below content ── */
.st-scene::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 2;
  background: radial-gradient(ellipse 55% 45% at 50% 50%, rgba(0,0,0,0.97) 0%, transparent 100%);
  pointer-events: none;
  opacity: 0;
  transition: opacity 850ms var(--ease-soft);
}

.st-scene.is-darkened::after { opacity: 1; }

/* ── Thinking dots — Rose composing, between the shot and the title ── */
.st-think {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 4;
  display: flex;
  align-items: center;
  gap: 7px;
  opacity: 0;
  transition: opacity 400ms var(--ease-soft);
}

.st-think.is-visible { opacity: 1; }

/* ── Centered content ── */
.st-content {
  position: relative;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 30px;
  text-align: center;
  padding: 0 24px;
}

.st-title {
  margin: 0;
  font-family: 'Cormorant Garamond', serif;
  font-weight: 500;
  font-size: 40px;
  line-height: 47px;
  letter-spacing: -0.05em;
  color: var(--warm-white);
  text-shadow: 0 2px 24px rgba(0, 0, 0, 0.5);
  opacity: 0;
  transform: translateY(10px);
  transition:
    opacity   750ms var(--ease-soft),
    transform 750ms var(--ease-soft);
}

.st-scene.is-titled .st-title { opacity: 1; transform: none; }

/* The progress map fades in with the title. Override the
   .progress-indicator fadeUp entrance (this rule wins on order). */
.st-progress {
  animation: none;
  opacity: 0;
  transition: opacity 750ms var(--ease-soft);
}

.st-scene.is-titled .st-progress { opacity: 1; }

/* Pre-activation: the entering section reads as quiet until it lights up.
   Removing .is-dim lets the existing .pi-dot / .pi-label transitions
   animate the current dot into the crimson pill + brighten the label. */
.st-progress.is-dim .pi-cell[data-state="active"] .pi-dot[data-state="current"] {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.15);
}

.st-progress.is-dim .pi-cell--label[data-state="active"] .pi-label {
  color: rgba(245, 240, 232, 0.24);
}

/* ── Transition CTA — Rose message + continue button ──
   Sits at the same center position as .st-content; fades in after
   the title + progress bar fade out via .is-hiding.               */
.st-cta {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 3;
  width: 90%;
  max-width: 680px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 30px;
  text-align: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 700ms var(--ease-soft);
}

.st-cta.is-visible {
  opacity: 1;
  pointer-events: auto;
}

/* Same visual as .st-title but italic */
.st-cta__text {
  margin: 0;
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-weight: 500;
  font-size: 40px;
  line-height: 47px;
  letter-spacing: -0.05em;
  color: var(--warm-white);
  text-shadow: 0 2px 24px rgba(0, 0, 0, 0.5);
}


/* Title + progress fade out before the CTA appears */
.st-title.is-hiding,
.st-progress.is-hiding {
  opacity: 0 !important;
  transition: opacity 500ms var(--ease-soft) !important;
}

@media (max-width: 680px) {
  .st-title { font-size: 30px; line-height: 37px; }
  .st-content { gap: 24px; }
}

@media (prefers-reduced-motion: reduce) {
  .st-title    { transition: opacity 200ms linear; transform: none; }
  .st-progress { transition: opacity 200ms linear; }
}

/* ============================================================
   COMPANY · OUR STORY  (cs-)
   A cinematic, scrolling story page. Editorial-luxury: warm
   serif display on ink, macro-whitespace, restrained crimson.
   Reuses .co-body / .co-page / .co-footer from the base layer.
   ============================================================ */

/* Film-grain — fixed, non-interactive, sits below cursor + veil */
.cs-grain {
  position: fixed;
  inset: 0;
  z-index: 60;
  pointer-events: none;
  opacity: 0.045;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ── 1 · Hero ── */
.cs-hero {
  position: relative;
  width: 100%;                      /* fill */
  min-height: 100dvh;               /* viewport */
  display: flex;
  flex-direction: column;
  justify-content: space-between;   /* top bar at top, text content at bottom */
  align-items: center;
  text-align: center;
  padding: 16px 24px 140px;         /* extra bottom padding keeps scroll cue chevron clear of clip boundary */
  overflow: hidden;
}
.cs-hero__bg { position: absolute; inset: 0; z-index: 0; }
.cs-hero__bg img {
  width: 100%; height: 100%;
  object-fit: cover;
  transform: scale(1.06);
  animation: cs-kenburns 20s var(--ease-soft) forwards;
}
@keyframes cs-kenburns { to { transform: scale(1); } }
/* Two linear gradients (per the Framer value screenshots): the first
   darkens the top behind the logo, the second darkens the bottom behind
   the text; the house stays readable through the middle. */
.cs-hero__bg::after {
  content: '';
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg,
      rgba(13, 13, 13, 1)    0%,
      rgba(0,  0,  0,  0)    50%),
    linear-gradient(180deg,
      rgba(0,  0,  0,  0)    50%,
      rgba(9,  9,  9,  0.78) 62%,
      rgba(11, 11, 11, 0.88) 71%,
      rgba(11, 11, 11, 0.96) 90%,
      rgba(12, 12, 12, 1)    100%);
}

/* Top frame — logo */
.cs-hero__topbar { position: relative; z-index: 1; }
.cs-hero__logo { display: inline-flex; transition: transform 160ms var(--ease-out); }
.cs-hero__logo:active { transform: scale(0.97); }
.cs-hero__logo img { height: 54px; width: auto; display: block; }

/* Bottom frame — text content */
.cs-hero__inner {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 880px;
}
.cs-hero__title {
  font-family: 'Cormorant Garamond', serif;
  font-weight: 600;
  font-size: clamp(46px, 7.5vw, 85px);   /* 85px design value, scales down on small screens */
  line-height: 0.98;
  letter-spacing: -0.04em;
  color: var(--warm-white);
  margin: 0;
}
.cs-hero__subtitle {
  font-family: 'Montserrat', sans-serif;
  font-weight: 200;
  font-size: clamp(9px, 0.9vw, 11px);
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: rgba(245, 240, 232, 0.46);
  margin: 36px 0 0;
}

.cs-hero__scroll-cue {
  margin-top: 36px;
}

/* ── 2 · Manifesto ── */
.cs-manifesto {
  position: relative;
  background: #0D0D0D;
}
.cs-manifesto__zone {
  position: relative;
  height: 300vh;
  width: 100%;
  background: #0D0D0D;
}
.cs-manifesto__sticky {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  overflow: hidden;
}
.cs-stage {
  position: relative;
  width: 100%;
  height: 100%;
  max-width: none;
  min-height: 0;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transform: translateY(60px);
  transition: opacity 800ms ease-out, transform 900ms cubic-bezier(0.23, 1, 0.32, 1);
}
.cs-stage.is-entered {
  opacity: 1;
  transform: translateY(0);
}
.cs-float {
  position: absolute;
  left: var(--x, auto);
  right: var(--right, auto);
  top: var(--y, auto);
  bottom: var(--b, auto);
  width: var(--w, clamp(112px, 12.5vw, 188px));
  border: 0.5px solid rgba(245, 240, 232, 0.12);
  box-shadow:
    0 26px 60px -30px rgba(0, 0, 0, 0.9),
    inset 0 0 0 0.5px rgba(245, 240, 232, 0.14);
  overflow: hidden;
  border-radius: 2px;
  opacity: 0;
  transform: rotate(var(--r, 0deg));
  pointer-events: auto;
}
.cs-float img {
  width: 100%;
  aspect-ratio: var(--ar, 4 / 5);
  object-fit: cover;
  filter: brightness(0.84) saturate(0.92);
  transition: filter 600ms var(--ease-out), transform 1200ms var(--ease-soft);
}
.cs-float:hover img { filter: brightness(1) saturate(1); transform: scale(1.06); }

.cs-manifesto__spread {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 80%;
  height: 60%;
  pointer-events: none;
}
.cs-manifesto__core {
  position: relative;
  z-index: 3;
  max-width: 860px;
  text-align: center;
  padding: 0 20px;
  opacity: 0;
  transform: none;
}
.cs-manifesto__line {
  font-family: 'Cormorant Garamond', serif;
  font-style: normal;
  font-weight: 500;
  font-size: clamp(21px, 2.5vw, 31px);
  line-height: 1.45;
  letter-spacing: -0.025em;
  color: var(--soft-white);
}

/* ── 3 · Pull-quote ── */
/* ── 3 · About ── */
.cs-about {
  background: #0D0D0D;
}

/* ── Pill-expand scroll section ── */
.cs-about__scroll-zone {
  position: relative;
  height: 1600vh;
  width: 100%;
  background: #0D0D0D;
}
.cs-about__sticky {
  /* JS manages position: fixed / absolute during scroll */
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  overflow: hidden;
}

/* Photo pill — starts fit-content + padding, JS expands to full viewport */
.cs-about__pill {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  overflow: hidden;
  z-index: 1;
  will-change: width, height, border-radius;
  border-radius: 40px;
  padding: 150px 180px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.cs-about__pill-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  pointer-events: none;
}
/* Static tint — always present, sits above photo, below title and JS overlay */
.cs-about__pill::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 1;
  pointer-events: none;
}

/* Dark overlay — JS fades this in to transition photo → dark background */
.cs-about__pill-overlay {
  position: absolute;
  inset: 0;
  background: #0D0D0D;
  opacity: 0;
  z-index: 2;
  will-change: opacity;
}

/* Title inside pill — centered over image, JS fades out as pill expands */
.cs-about__pill-title {
  position: relative;
  z-index: 3;
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(36px, 4.8vw, 64px);
  font-weight: 500;
  letter-spacing: -0.05em;
  color: var(--warm-white);
  white-space: nowrap;
  pointer-events: none;
  margin: 0;
  display: block;
  text-align: center;
  text-shadow: 0 2px 24px rgba(0,0,0,0.45);
}

/* Eyebrow — independently centered, reveals alone then fades as a block */
.cs-about__eyebrow-wrap {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  z-index: 2;
  opacity: 0;
  pointer-events: none;
}

/* Para wrappers — each paragraph centered independently, JS controls opacity */
.cs-about__para-wrap {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  max-width: 680px;
  width: 100%;
  padding: 0 32px;
  z-index: 2;
  opacity: 0;
  pointer-events: none;
}
.cs-about__eyebrow {
  font-family: 'Montserrat', sans-serif;
  font-weight: 200;
  font-size: clamp(15px, 1.6vw, 18px);
  letter-spacing: 0.38em;
  text-transform: uppercase;
  color: rgba(245, 240, 232, 0.52);
  margin: 0 0 56px;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 700ms 120ms var(--ease-soft), transform 700ms 120ms var(--ease-soft);
}
.cs-about__body p {
  font-family: 'Cormorant Garamond', serif;
  font-weight: 500;
  font-size: 35px;
  line-height: 1.4;
  letter-spacing: -0.05em;
  color: rgba(245, 240, 232, 0.82);
  margin: 0 0 28px;
}
.cs-about__body p:last-child { margin-bottom: 0; }
.cs-scroll-word {
  display: inline-block;
  will-change: opacity, transform, filter;
}
.cs-word--underline {
  position: relative;
  text-decoration: none;
}
.cs-word--underline::after {
  content: '';
  position: absolute;
  bottom: -3px;
  left: 0;
  width: 100%;
  height: 1px;
  background: currentColor;
  transform-origin: left center;
  transform: scaleX(0);
  will-change: transform;
  transition: transform 680ms cubic-bezier(0.4, 0, 0.6, 1);
}
.cs-word--underline.is-underlined::after {
  transform: scaleX(1);
}

/* ── 4 · Solution overlay (inside .cs-about__sticky) ───────── */
.cs-sol-bg {
  position: absolute;
  inset: 0;
  background-color: var(--ink);
  z-index: 3;
  opacity: 0;
  will-change: opacity;
  pointer-events: none;
}

/* Sol eyebrow in cs-about sits above cs-sol-bg */
#cs-sol-eyebrow-wrap { z-index: 4; }

/* ── 5 · Solution Principles — inside .cs-about__sticky ──────────── */
.cs-principle {
  position: absolute;
  inset: 0;
  background-color: var(--card-bg, #211010);
  opacity: 0;
  z-index: 5;
  will-change: opacity, transform;
  display: flex;
  align-items: center;
  justify-content: center;
}

.cs-principle__num {
  position: absolute;
  left: max(3.5vw, 28px);
  top: max(3.5vw, 28px);
  font-family: 'Montserrat', sans-serif;
  font-weight: 200;
  font-size: 11px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: rgba(245, 240, 232, 0.28);
  line-height: 1;
}

.cs-principle__wm {
  position: absolute;
  right: max(3vw, 16px);
  bottom: max(3vh, 16px);
  font-family: 'Cormorant Garamond', serif;
  font-weight: 600;
  font-size: clamp(100px, 18vw, 220px);
  line-height: 0.8;
  letter-spacing: -0.05em;
  color: rgba(245, 240, 232, 0.05);
  pointer-events: none;
  user-select: none;
}

.cs-principle__card {
  width: min(620px, 76vw);
  text-align: center;
  margin-top: -10vh;
}

.cs-principle__img-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  border-radius: 10px;
}

.cs-principle__img-wrap::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.40);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
  pointer-events: none;
}

.cs-principle__img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.cs-principle__title {
  font-family: 'Cormorant Garamond', serif;
  font-weight: 500;
  font-size: clamp(66px, 9vw, 108px);
  line-height: 0.9;
  letter-spacing: -0.03em;
  color: var(--warm-white);
  margin: -0.65em 0 0;
  position: relative;
}

.cs-principle__body {
  font-family: 'DM Sans', sans-serif;
  font-weight: 400;
  font-size: 18px;
  line-height: 1.70;
  letter-spacing: -0.01em;
  color: rgba(245, 240, 232, 0.56);
  max-width: 400px;
  margin: 26px auto 0;
}

@media (max-width: 760px) {
  .cs-principle__num {
    top: 24px;
    left: 24px;
  }
  .cs-principle__card {
    width: 88vw;
  }
}

/* ── 4 · Result section ── */
.cs-result__zone {
  position: relative;
  height: 700vh;
  width: 100%;
  background: #0a0705;
}

.cs-result__sticky {
  /* JS manages position: fixed / absolute during scroll */
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  overflow: hidden;
}

.cs-result__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 40%;
  display: block;
  z-index: 1;
  filter: brightness(0.72);
}

/* Dark overlay — color matches Collaboration panel (#361A1A) for seamless entry */
.cs-result__bg {
  position: absolute;
  inset: 0;
  background: #361A1A;
  z-index: 2;
}

/* Permanent 50% black tint — sits above the image/bg, below the text layers */
.cs-result__sticky::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.50);
  z-index: 3;
  pointer-events: none;
}

/* Centered "the result" eyebrow — same treatment as "our solution" */
.cs-result__eyebrow-wrap {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 4;
  text-align: center;
  pointer-events: none;
  white-space: nowrap;
}

.cs-result__eyebrow {
  font-family: 'Montserrat', sans-serif;
  font-weight: 200;
  font-size: clamp(15px, 1.6vw, 18px);
  letter-spacing: 0.38em;
  text-transform: uppercase;
  color: rgba(245, 240, 232, 0.52);
  margin: 0;
}

/* Append "?" after the eyebrow text via CSS so the underline stays on "result" only */
.cs-result__eyebrow::after {
  content: '?';
  letter-spacing: 0;
  margin-left: -0.18em;
}

/* Closing statement — fades in over the revealed image */
.cs-result__statement-wrap {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 4;
  text-align: center;
  width: min(820px, 88vw);
  pointer-events: none;
}

.cs-result__statement {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(16px, 5.5vw, 56px);
  font-weight: 500;
  font-style: normal;
  line-height: 1.12;
  letter-spacing: -0.05em;
  color: rgba(245, 240, 232, 0.93);
  margin: 0;
}

/* ── Responsive ── */
@media (max-width: 760px) {
  .cs-result__statement { font-size: clamp(20px, 7vw, 36px); }
}

/* ── 5 · Owner section ── */
.cs-owner__zone {
  position: relative;
  height: 600vh;
  width: 100%;
  background: #12100F;
}

.cs-owner__sticky {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  overflow: hidden;
}

/* Blueprint SVG — fills the viewport behind everything */
.cs-owner__blueprint {
  position: absolute;
  inset: 0;
  z-index: 1;
  opacity: 0;
}

.cs-owner__blueprint svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

/* Eyebrow — centered, fades in with the blueprint */
.cs-owner__eyebrow-wrap {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
  text-align: center;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
}

.cs-owner__eyebrow {
  font-family: 'Montserrat', sans-serif;
  font-weight: 200;
  font-size: clamp(15px, 1.6vw, 18px);
  letter-spacing: 0.38em;
  text-transform: uppercase;
  color: #ffffff;
  margin: 0;
}

/* Split layout — photo left, quote right */
.cs-owner__content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 3;
  display: flex;
  align-items: stretch;
  gap: clamp(40px, 6vw, 96px);
  width: min(1040px, 88vw);
  opacity: 0;
  pointer-events: none;
}

/* Photo column — positioning context for label; doesn't stretch beyond image height */
.cs-owner__photo-col {
  position: relative;
  flex-shrink: 0;
  align-self: flex-start;
}

.cs-owner__photo-frame {
  position: relative;
  width: clamp(190px, 20.1vw, 285px);
  overflow: hidden;
}

.cs-owner__photo-frame img {
  width: 100%;
  display: block;
  filter: brightness(0.88);
}

/* Gradient overlay — starts transparent, kicks in at 50% down the image */
.cs-owner__photo-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0) 0%,
    rgba(0, 0, 0, 0) 50%,
    rgba(16, 16, 15, 0.82) 78%,
    rgba(18, 17, 16, 0.91) 92%,
    rgba(18, 16, 15, 1.0) 100%
  );
  z-index: 1;
}

/* Name + title — absolutely positioned over bottom-left of photo-col (outside overflow:hidden) */
.cs-owner__photo-label {
  position: absolute;
  bottom: 14px;
  left: 14px;
  z-index: 2;
  pointer-events: none;
}

.cs-owner__photo-name {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(18px, 1.6vw, 22px);
  font-weight: 400;
  font-style: normal;
  color: rgba(245, 240, 232, 0.93);
  margin: 0 0 5px;
  line-height: 1.2;
}

.cs-owner__photo-title {
  font-family: 'Montserrat', sans-serif;
  font-size: clamp(10px, 0.65vw, 11.5px);
  font-weight: 200;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: rgba(245, 240, 232, 0.42);
  margin: 0;
  white-space: nowrap;
}

/* Quote column */
.cs-owner__quote-col {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.cs-owner__quote-block {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* Butterfly: 75% of previous size, 30% opacity, shifted left, bottom overlaps "Quality" */
.cs-owner__butterfly {
  width: clamp(61px, 7.4vw, 102px);
  opacity: 0.30;
  align-self: flex-start;
  display: block;
  position: relative;
  z-index: 1;
  margin-bottom: -30px;
  margin-left: -18px;
}

.cs-owner__quote {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(28px, 3.4vw, 46px);
  font-weight: 300;
  font-style: italic;
  line-height: 1.10;
  letter-spacing: -0.015em;
  color: rgba(245, 240, 232, 0.90);
  margin: 0;
}

/* Second line indented so "It's" starts below "isn't" */
.cs-owner__quote-l2 {
  display: block;
  padding-left: 3.0em;
}

.cs-owner__bio {
  font-family: 'DM Sans', sans-serif;
  font-size: clamp(13px, 1.2vw, 16px);
  font-weight: 300;
  line-height: 1.80;
  color: rgba(245, 240, 232, 0.62);
  margin: 0;
  max-width: none;
  margin-top: auto;
}

/* Responsive — stack on mobile */
@media (max-width: 760px) {
  .cs-owner__content {
    flex-direction: column;
    align-items: flex-start;
    gap: 32px;
  }
  .cs-owner__photo-frame { width: clamp(120px, 40vw, 180px); }
  .cs-owner__photo-col { flex-direction: row; align-items: flex-end; gap: 16px; }
  .cs-owner__eyebrow { white-space: normal; text-align: center; }
}

/* ── 6 · FAQ — editorial indexed accordion ───────────────────── */
.cs-faq {
  position: relative;
  background: #0D0D0D;
  padding: clamp(88px, 11vw, 152px) 24px clamp(96px, 11vw, 150px);
}
/* Hairline top seam — quiet transition from the owner section above */
.cs-faq::before {
  content: '';
  position: absolute;
  top: 0; left: 50%;
  transform: translateX(-50%);
  width: min(760px, 84vw);
  height: 0.5px;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(245, 240, 232, 0.12) 22%,
    rgba(245, 240, 232, 0.12) 78%,
    transparent
  );
}
.cs-faq__inner {
  max-width: min(820px, 88vw);
  margin: 0 auto;
}

/* Header — centered per the page's editorial cadence */
.cs-faq__header { margin-bottom: clamp(54px, 6vw, 84px); text-align: center; }
.cs-faq__eyebrow {
  font-family: 'Montserrat', sans-serif;
  font-weight: 200;
  font-size: clamp(15px, 1.6vw, 18px);
  letter-spacing: 0.38em;
  text-transform: uppercase;
  color: rgba(245, 240, 232, 0.52);
  margin: 0 0 22px;
}
.cs-faq__heading {
  font-family: 'Cormorant Garamond', serif;
  font-weight: 300;
  font-style: normal;
  font-size: clamp(40px, 4.8vw, 66px);
  line-height: 1.04;
  letter-spacing: -0.02em;
  color: rgba(245, 240, 232, 0.92);
  margin: 0;
}

/* List — CSS counter drives the editorial index numbers */
.cs-faq__list { list-style: none; margin: 0; padding: 0; counter-reset: faq; }

/* Each item — entrance starts hidden, blur-up stagger via --i */
.cs-faq__item {
  counter-increment: faq;
  position: relative;
  border-top: 0.5px solid rgba(245, 240, 232, 0.10);
  opacity: 0;
  transform: translateY(14px);
  filter: blur(6px);
  transition:
    opacity   600ms var(--ease-soft) calc(var(--i, 0) * 60ms),
    transform 600ms var(--ease-soft) calc(var(--i, 0) * 60ms),
    filter    600ms var(--ease-soft) calc(var(--i, 0) * 60ms);
}
.cs-faq__item:last-child { border-bottom: 0.5px solid rgba(245, 240, 232, 0.10); }
.cs-faq__item.is-visible { opacity: 1; transform: translateY(0); filter: blur(0); }

/* Crimson seam that draws down the left edge of the open item */
.cs-faq__item::before {
  content: '';
  position: absolute;
  left: -1px; top: 0;
  width: 1.5px; height: 100%;
  background: var(--crimson-hover);
  transform: scaleY(0);
  transform-origin: top;
  opacity: 0;
  transition:
    transform 420ms var(--ease-out),
    opacity 280ms ease;
}
.cs-faq__item.is-open::before { transform: scaleY(1); opacity: 0.85; }

/* Question button — [index] [text] [icon] */
.cs-faq__question {
  width: 100%;
  display: flex;
  align-items: baseline;
  gap: clamp(16px, 2vw, 26px);
  padding: clamp(22px, 2.5vw, 30px) 4px clamp(22px, 2.5vw, 30px) 0;
  background: none;
  border: none;
  cursor: none;
  text-align: left;
  transition: padding-left 380ms var(--ease-out);
}
.cs-faq__item.is-open .cs-faq__question { padding-left: clamp(14px, 1.6vw, 22px); }
.cs-faq__question:focus-visible {
  outline: 1.5px solid rgba(245, 240, 232, 0.30);
  outline-offset: 4px;
  border-radius: 2px;
}

/* Editorial index number — leading-zero counter */
.cs-faq__question::before {
  content: counter(faq, decimal-leading-zero);
  flex-shrink: 0;
  width: 1.8em;
  font-family: 'Montserrat', sans-serif;
  font-weight: 400;
  font-size: clamp(11px, 0.95vw, 12.5px);
  letter-spacing: 0.12em;
  color: rgba(245, 240, 232, 0.34);
  transition: color 300ms var(--ease-out);
}
.cs-faq__item.is-open .cs-faq__question::before { color: var(--crimson-hover); }

.cs-faq__question-text {
  flex: 1;
  font-family: 'Cormorant Garamond', serif;
  font-weight: 400;
  font-size: clamp(19px, 1.9vw, 26px);
  line-height: 1.3;
  letter-spacing: -0.005em;
  color: rgba(245, 240, 232, 0.80);
  transition: color 300ms var(--ease-out);
}
.cs-faq__item.is-open .cs-faq__question-text { color: rgba(245, 240, 232, 0.97); }

@media (hover: hover) and (pointer: fine) {
  .cs-faq__question:hover .cs-faq__question-text { color: rgba(245, 240, 232, 0.97); }
  .cs-faq__question:hover .cs-faq__question::before { color: rgba(245, 240, 232, 0.62); }
  .cs-faq__question:hover .cs-faq__icon::before,
  .cs-faq__question:hover .cs-faq__icon::after { background: rgba(245, 240, 232, 0.85); }
}

/* + icon — two hairlines; the vertical collapses to make a – when open */
.cs-faq__icon {
  flex-shrink: 0;
  width: 16px; height: 16px;
  position: relative;
  align-self: center;
  transition: transform 380ms var(--ease-out);
}
.cs-faq__icon::before,
.cs-faq__icon::after {
  content: '';
  position: absolute;
  top: 50%; left: 50%;
  background: rgba(245, 240, 232, 0.55);
  transition: background 260ms ease, transform 380ms var(--ease-out), opacity 260ms ease;
}
.cs-faq__icon::before {
  width: 14px; height: 1px;
  transform: translate(-50%, -50%);
}
.cs-faq__icon::after {
  width: 1px; height: 14px;
  transform: translate(-50%, -50%);
}
/* Open: rotate the whole mark a touch and fade the vertical → clean – */
.cs-faq__item.is-open .cs-faq__icon { transform: rotate(90deg); }
.cs-faq__item.is-open .cs-faq__icon::after { opacity: 0; transform: translate(-50%, -50%) scaleY(0); }
.cs-faq__item.is-open .cs-faq__icon::before { background: var(--crimson-hover); }

/* Answer — grid-template-rows trick: no layout thrash, GPU-composited */
.cs-faq__answer-wrap {
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
  transition:
    grid-template-rows 380ms var(--ease-out),
    opacity 300ms ease;
}
.cs-faq__item.is-open .cs-faq__answer-wrap {
  grid-template-rows: 1fr;
  opacity: 1;
}
.cs-faq__answer-inner { overflow: hidden; }
.cs-faq__answer {
  font-family: 'DM Sans', sans-serif;
  font-weight: 300;
  font-size: clamp(13.5px, 1.1vw, 15.5px);
  line-height: 1.88;
  color: rgba(245, 240, 232, 0.55);
  margin: 0;
  /* Align answer flush under the question text, past the index column */
  padding: 2px 0 clamp(26px, 3vw, 36px) calc(1.8em + clamp(16px, 2vw, 26px));
  max-width: 640px;
}

@media (prefers-reduced-motion: reduce) {
  .cs-faq__item { opacity: 1; transform: none; filter: none; transition: none; }
  .cs-faq__item::before,
  .cs-faq__question,
  .cs-faq__question::before,
  .cs-faq__icon,
  .cs-faq__icon::before,
  .cs-faq__icon::after,
  .cs-faq__answer-wrap { transition: none; }
}
@media (max-width: 600px) {
  .cs-faq__question-text { font-size: clamp(17px, 5vw, 21px); }
  .cs-faq__heading { font-size: clamp(34px, 9vw, 46px); }
  .cs-faq__answer { padding-left: 0; }
}

/* ── 7 · Closing — the wrap-up CTA that ties the page together ── */
.cs-closing {
  position: relative;
  overflow: hidden;
  background: #0A0807;
  padding: clamp(110px, 14vw, 200px) 24px clamp(96px, 12vw, 150px);
  text-align: center;
}
/* Warm crimson aurora rising from the base — restrained, cinematic focal glow */
.cs-closing::before {
  content: '';
  position: absolute;
  left: 50%; bottom: -34%;
  width: min(1100px, 130vw);
  aspect-ratio: 1 / 1;
  transform: translateX(-50%);
  background: radial-gradient(
    circle at center,
    rgba(88, 35, 35, 0.42) 0%,
    rgba(88, 35, 35, 0.16) 32%,
    rgba(88, 35, 35, 0.04) 52%,
    transparent 68%
  );
  pointer-events: none;
}
.cs-closing__inner {
  position: relative;
  z-index: 1;
  max-width: 760px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Reveal primitives — children fade-up in sequence (JS adds .is-in) */
.cs-closing__heading,
.cs-closing__sub,
.cs-closing__contact {
  opacity: 0;
  transform: translateY(18px);
  transition:
    opacity 760ms var(--ease-soft) calc(var(--d, 0) * 1ms),
    transform 760ms var(--ease-soft) calc(var(--d, 0) * 1ms);
}
.cs-closing.is-in .cs-closing__heading,
.cs-closing.is-in .cs-closing__sub,
.cs-closing.is-in .cs-closing__contact {
  opacity: 1;
  transform: translateY(0);
}

.cs-closing__mark {
  --d: 0;
  width: clamp(46px, 5vw, 64px);
  height: auto;
  opacity: 0;            /* base hidden; reveal sets 0.55 via keyword below */
  margin-bottom: clamp(26px, 3vw, 40px);
}
.cs-closing.is-in .cs-closing__mark { opacity: 0.55; }

.cs-closing__eyebrow {
  --d: 90;
  font-family: 'Montserrat', sans-serif;
  font-weight: 200;
  font-size: clamp(15px, 1.6vw, 18px);
  letter-spacing: 0.38em;
  text-transform: uppercase;
  color: rgba(245, 240, 232, 0.50);
  margin: 0 0 22px;
}
.cs-closing__heading {
  --d: 0;
  font-family: 'Cormorant Garamond', serif;
  font-weight: 300;
  font-style: italic;
  font-size: clamp(42px, 5.4vw, 76px);
  line-height: 1.02;
  letter-spacing: -0.02em;
  color: rgba(245, 240, 232, 0.95);
  margin: 0 0 clamp(22px, 2.6vw, 32px);
}
.cs-closing__sub {
  --d: 90;
  font-family: 'DM Sans', sans-serif;
  font-weight: 300;
  font-size: clamp(14px, 1.2vw, 16.5px);
  line-height: 1.82;
  color: rgba(245, 240, 232, 0.58);
  margin: 0 auto clamp(40px, 4.4vw, 56px);
  max-width: 50ch;
}

/* CTA — mirrors the preloader's crimson pill so the loop closes where it began */
.cs-closing__cta-wrap { --d: 380; }
.cs-closing__cta {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  padding: 17px 40px;
  border-radius: 100px;
  text-decoration: none;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.10), rgba(255, 255, 255, 0) 46%),
    var(--crimson);
  color: var(--warm-white);
  box-shadow:
    0 6px 18px rgba(88, 35, 35, 0.30),
    inset 0 0 0 1px rgba(255, 255, 255, 0.12);
  transition:
    background 320ms var(--ease-out),
    transform 260ms var(--ease-out),
    box-shadow 320ms var(--ease-out);
}
.cs-closing__cta-label {
  font-family: 'Montserrat', sans-serif;
  font-size: 11px;
  font-weight: 300;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}
.cs-closing__cta-arrow {
  width: 14px; height: 8px;
  display: block;
  transition: transform 240ms var(--ease-out);
}
.cs-closing__cta:hover {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.13), rgba(255, 255, 255, 0) 46%),
    var(--crimson-hover);
  transform: translateY(-1px);
  box-shadow:
    0 10px 28px rgba(88, 35, 35, 0.38),
    inset 0 0 0 1px rgba(255, 255, 255, 0.16);
}
.cs-closing__cta:hover .cs-closing__cta-arrow { transform: translateX(4px); }
.cs-closing__cta:active {
  transform: translateY(0) scale(0.98);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0) 46%),
    var(--crimson-active);
  box-shadow:
    0 4px 12px rgba(88, 35, 35, 0.30),
    inset 0 0 0 1px rgba(255, 255, 255, 0.08);
}
.cs-closing__cta:focus-visible {
  outline: 1.5px solid rgba(245, 240, 232, 0.45);
  outline-offset: 4px;
}

/* Contact rail — the brand's identity line, quiet beneath the heading */
.cs-closing__contact {
  --d: 190;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: clamp(14px, 2vw, 26px);
  margin-top: clamp(48px, 5.5vw, 72px);
}
.cs-closing__contact-item {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: 'Montserrat', sans-serif;
  font-size: 10.5px;
  font-weight: 300;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(245, 240, 232, 0.46);
  text-decoration: none;
  white-space: nowrap;
  transition: color 260ms var(--ease-out);
}
.cs-closing__contact-icon { width: 13px; height: 13px; opacity: 0.7; }
a.cs-closing__contact-item:hover { color: rgba(245, 240, 232, 0.82); }
.cs-closing__contact-divider {
  width: 0.5px; height: 12px;
  background: rgba(245, 240, 232, 0.18);
}

@media (prefers-reduced-motion: reduce) {
  .cs-closing__heading,
  .cs-closing__sub,
  .cs-closing__contact { opacity: 1; transform: none; transition: none; }
}
@media (max-width: 540px) {
  .cs-closing__contact-divider:nth-of-type(even) { display: none; }
}

/* ── Responsive ── */
@media (max-width: 760px) {
  .cs-stage { flex-wrap: wrap; min-height: 0; gap: 14px; justify-content: center; }
  .cs-manifesto__core { order: -1; flex: 0 0 100%; margin-bottom: 12px; }
  .cs-manifesto__core::before { display: none; }
  .cs-float {
    position: static;
    flex: 0 0 30%;
    width: auto;
    transform: none;
    animation: none;
    box-shadow: 0 16px 36px -22px rgba(0, 0, 0, 0.8);
  }
  .cs-float img { aspect-ratio: 1 / 1; }
}
@media (max-width: 600px) {
  .cs-hero__title { letter-spacing: -0.035em; }
}

body.cs-body > .cs-grain { opacity: 0.075; }

/* ── Cursor ring pulse — fires when principle panels transition ── */
@keyframes cursorPulse {
  0%   { transform: translate(-50%, -50%) scale(1); }
  40%  { transform: translate(-50%, -50%) scale(1.5); border-color: rgba(245, 240, 232, 0.55); }
  100% { transform: translate(-50%, -50%) scale(1); }
}
.cursor-ring.is-pulse {
  animation: cursorPulse 360ms cubic-bezier(0.23, 1, 0.32, 1);
  transition: none;
}

/* ── Mobile: collapse locked scroll zones to static layout ── */
@media (max-width: 768px) {
  .cs-about__scroll-zone { height: auto; }
  .cs-about__sticky {
    position: relative;
    width: 100%;
    height: auto;
    overflow: visible;
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  .cs-about__pill {
    position: relative;
    width: 92vw;
    height: 52vw;
    left: auto;
    top: auto;
    transform: none;
    border-radius: 12px;
    margin: 24px auto 0;
    flex-shrink: 0;
  }
  .cs-about__pill-overlay { opacity: 0.5; }
  .cs-about__eyebrow-wrap,
  .cs-about__para-wrap,
  #cs-sol-eyebrow-wrap {
    position: relative;
    left: auto;
    top: auto;
    transform: none;
    opacity: 1;
    width: 100%;
    padding: 28px 28px 0;
    text-align: center;
    pointer-events: auto;
  }
  .cs-about__eyebrow { opacity: 1; transform: none; }
  .cs-sol-bg {
    position: relative;
    width: 100%;
    height: 60px;
    opacity: 1;
    background-color: #2F1717;
    margin-top: 24px;
    flex-shrink: 0;
  }
  .cs-principle {
    position: relative;
    inset: auto;
    opacity: 1;
    transform: none;
    height: auto;
    padding: 48px 24px 40px;
    align-items: center;
  }
  .cs-principle + .cs-principle {
    border-top: 0.5px solid rgba(245, 240, 232, 0.07);
  }
  .cs-principle__num {
    position: relative;
    left: auto;
    top: auto;
    margin-bottom: 16px;
    align-self: flex-start;
  }
  .cs-principle__card { margin-top: 0; width: 100%; }
  .cs-principle__wm { display: none; }
}

/* ── prefers-contrast: more — boost low-contrast text ── */
@media (prefers-contrast: more) {
  .cs-principle__body { color: rgba(245, 240, 232, 0.90); }
  .cs-about__body p   { color: rgba(245, 240, 232, 0.90); }
}

@media (prefers-reduced-motion: reduce) {
  .cs-hero__bg img { animation: none; transform: none; }
  .cs-float { animation: none; }
  .cs-stage { opacity: 1; transform: none; transition: none; }
  .cs-word--underline.is-underlined::after { transition: none; }
  /* Principle panels — show all three statically */
  .cs-about__scroll-zone { height: auto; }
  .cs-about__sticky {
    position: relative;
    width: 100%;
    height: auto;
    overflow: visible;
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  .cs-about__pill {
    position: relative;
    width: 100%;
    height: 50vh;
    left: auto;
    top: auto;
    transform: none;
    border-radius: 0;
    flex-shrink: 0;
  }
  .cs-about__eyebrow-wrap,
  .cs-about__para-wrap,
  #cs-sol-eyebrow-wrap {
    position: relative;
    left: auto;
    top: auto;
    transform: none;
    opacity: 1;
    width: 100%;
    padding: 24px 28px 0;
    text-align: center;
    pointer-events: auto;
  }
  .cs-about__eyebrow { opacity: 1; transform: none; }
  .cs-sol-bg {
    position: relative;
    width: 100%;
    height: 60px;
    opacity: 1;
    background-color: #2F1717;
    margin-top: 24px;
    flex-shrink: 0;
  }
  .cs-principle {
    position: relative;
    inset: auto;
    opacity: 1;
    transform: none;
    height: auto;
    padding: 48px 24px 40px;
    align-items: center;
  }
  .cs-principle + .cs-principle {
    border-top: 0.5px solid rgba(245, 240, 232, 0.07);
  }
  .cs-principle__card { margin-top: 0; width: 100%; max-width: 560px; }
}

/* ============================================================
   PERSISTENT CONSULTATION BACKGROUND VIDEO  (.bg-video)
   One 20s build film layered over the static poster <img> inside
   .page-bg (question screens) / .st-bg (interstitials). Injected +
   time-controlled by consultation-core.js. Fades in once its target
   frame has painted. Blurred on question screens to match the
   .bg-image backdrop; sharp + slightly scaled on interstitials.
   ============================================================ */
.bg-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 40%;
  opacity: 0;
  transition: opacity 600ms var(--ease-soft);
  pointer-events: none;
}
.bg-video.is-ready { opacity: 1; }
.page-bg .bg-video { filter: blur(3px); }
.st-bg   .bg-video { transform: scale(1.04); }

@media (prefers-reduced-motion: reduce) {
  .bg-video { transition: none; }
}

/* ============================================================
   SPA CONSULTATION SHELL
   Keeps the build-film video, logo, chat, and cursor mounted once while
   selector screens swap inside #cr-spa-root.
   ============================================================ */
.cr-spa-body {
  background: var(--ink);
}

.cr-shell-bg,
.cr-shell-video,
.cr-shell-overlay {
  position: fixed;
  inset: 0;
}

.cr-shell-bg {
  z-index: 0;
  overflow: hidden;
  background: var(--ink);
}

.cr-shell-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  opacity: 0;
  transition: opacity 700ms var(--ease-soft);
}

.cr-shell-video.is-ready {
  opacity: 1;
}

.cr-shell-overlay {
  z-index: 1;
  pointer-events: none;
  opacity: 1;
  transition: opacity 700ms var(--ease-soft);
  background:
    linear-gradient(rgba(0, 0, 0, 0.18), rgba(0, 0, 0, 0.18)),
    radial-gradient(130% 110% at 50% 42%,
      transparent 50%,
      rgba(10, 7, 5, 0.36) 82%,
      rgba(10, 7, 5, 0.64) 100%),
    linear-gradient(
      to bottom,
      rgba(10, 7, 5, 0.98) 0%,
      rgba(10, 7, 5, 0.86) 32%,
      rgba(10, 7, 5, 0.66) 64%,
      rgba(10, 7, 5, 0.92) 100%
    );
}

.cr-shell-logo {
  position: fixed;
  top: 20px;
  left: 50%;
  z-index: 70;
  transform: translateX(-50%);
  pointer-events: none;
}

.cr-shell-logo img {
  height: 64px;
  width: auto;
  display: block;
}

#cr-spa-root {
  position: relative;
  z-index: 10;
  min-height: 100dvh;
  opacity: 1;
  transition: opacity 360ms var(--ease-soft), transform 360ms var(--ease-soft);
}

#cr-spa-chat {
  position: relative;
  z-index: 40;
}

.cr-spa-body .site-frame {
  background: transparent;
}

.cr-spa-body .page-bg,
.cr-spa-body .site-frame .logo-wrap,
.cr-spa-body #cr-spa-root > .cursor {
  display: none !important;
}

.cr-spa-body.is-screen-changing #cr-spa-root {
  opacity: 0;
  transform: translateY(8px);
}

.cr-spa-body.is-section-transitioning #cr-spa-chat,
.cr-spa-body.is-section-transitioning .ack-thinking,
.cr-spa-body.is-section-transitioning .ack-reply {
  opacity: 0 !important;
  pointer-events: none !important;
}

.cr-spa-body.is-section-transitioning #cr-spa-root {
  opacity: 1;
  transform: none;
  pointer-events: none;
}

.cr-spa-body.is-transition-handoff #cr-spa-root {
  opacity: 0;
  transform: none;
}

.cr-spa-body.is-section-transitioning .st-scene {
  background: transparent;
}

.cr-spa-body.is-section-transitioning .st-bg {
  display: none !important;
}

.cr-spa-body.is-section-transitioning .cr-shell-overlay {
  opacity: 0;
}

.cr-spa-body.is-section-transitioning .cr-shell-video {
  filter: none;
}

/* ============================================================
   SHORT-VIEWPORT FIT (laptops)
   Each consultation screen is a fixed 100dvh flex column:
   top-bar → .consultation-area (flex:1) → .progress-indicator.
   The selector frame is a fixed height, so on short laptops the
   column overflowed and the progress indicator was clipped off
   the bottom. These height breakpoints compress the vertical
   rhythm so heading, selector, submit AND the progress
   indicator all stay in view. Width-agnostic by design.
   ============================================================ */
@media (max-height: 860px) {
  .consultation-area  { gap: 28px; padding-top: 8px; padding-bottom: 40px; }
  .question-heading   { font-size: 36px; line-height: 42px; }
  .selector-frame     { height: 296px; }
  .progress-indicator { padding: 4px 0 8px; }
}

@media (max-height: 730px) {
  .top-bar            { padding-top: 14px; padding-bottom: 14px; }
  .consultation-area  { gap: 20px; padding-bottom: 26px; }
  .question-heading   { font-size: 32px; line-height: 38px; }
  .selector-frame     { height: 276px; }
  .progress-indicator { padding: 3px 0 6px; }
}