/* ============================================
   Astrolaabh · Design tokens
   Theme: dark forest green + antique gold (locked)
   Type: Cormorant Garamond (display) + Outfit (ui/body)
   Radius system: pill for interactive, sharp elsewhere
   ============================================ */

/* Louize Display: licensed webfont (205TF).
   Drop LouizeDisplay.woff2 / LouizeDisplay-Italic.woff2 into assets/fonts/.
   Falls back to Cormorant Garamond until then. */
/* Sesbania — display/title face (added to the version-3 folder) */
@font-face {
  font-family: "Sesbania";
  src: url("Sesbania/Web-TT/Sesbania-Regular.woff2") format("woff2"),
       url("Sesbania/Web-TT/Sesbania-Regular.woff") format("woff");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Sesbania";
  src: url("Sesbania/Web-TT/Sesbania-Italic.woff2") format("woff2"),
       url("Sesbania/Web-TT/Sesbania-Italic.woff") format("woff");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "Louize Display";
  src: url("assets/fonts/LouizeDisplay.woff2") format("woff2"),
       url("assets/fonts/LouizeDisplay.woff") format("woff");
  font-weight: 400 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Louize Display";
  src: url("assets/fonts/LouizeDisplay-Italic.woff2") format("woff2"),
       url("assets/fonts/LouizeDisplay-Italic.woff") format("woff");
  font-weight: 400 500;
  font-style: italic;
  font-display: swap;
}

:root {
  --bg: #23281c;
  --bg-deep: #1b2016;
  --ink: #ece7da;
  --ink-muted: #b9b5a5;
  --gold: #c9a24b;
  --gold-bright: #dcb968;
  --bone: #f1efe8;
  --ink-dark: #20251a;
  --font-display: "Sesbania", "Manrope", "Avenir Next", -apple-system, sans-serif;
  --font-ui: "Geist", "Avenir Next", -apple-system, sans-serif;
  --nav-h: 74px;
  --pad-x: clamp(1.25rem, 5vw, 4.5rem);
}

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

html { scroll-behavior: smooth; }

/* ============ Scrollbar: transparent track, translucent white thumb ============ */
html {
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.28) transparent;
}
::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
::-webkit-scrollbar-track {
  background: transparent;
}
::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.22);
  border-radius: 999px;
  border: 2px solid transparent;
  background-clip: padding-box;
}
::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.4);
  background-clip: padding-box;
}

/* ============ Scroll reveal (fade + rise) ============ */
[data-reveal] {
  opacity: 0;
  transform: translateY(52px);
  transition:
    opacity 1.05s cubic-bezier(0.16, 1, 0.3, 1),
    transform 1.05s cubic-bezier(0.16, 1, 0.3, 1);
  transition-delay: var(--reveal-delay, 0s);
}
[data-reveal].is-revealed { will-change: auto; }
[data-reveal].is-revealed {
  opacity: 1;
  transform: none;
}
@media (prefers-reduced-motion: reduce) {
  [data-reveal] {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

body {
  font-family: var(--font-ui);
  background: var(--bone);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-feature-settings: "kern" 1, "liga" 1, "clig" 1, "calt" 1;
  font-kerning: normal;
}

/* Editorial serif refinement (Vero-style): optical sizing, tuned tracking,
   balanced line breaks — applied to every display heading */
h1, h2, h3, h4,
.house-title, .compare-heading, .essence-title, .hero-tagline,
.stones-head h2, .testi-head h2, .cr-head h3, .cr-us p,
.section-statement h2, .section-reaction p, .trust-left h2 {
  font-optical-sizing: auto;
  font-feature-settings: "kern" 1, "liga" 1, "dlig" 1, "calt" 1;
  letter-spacing: -0.012em;
  text-wrap: balance;
}

/* body copy: prettier ragged edges, no orphans */
p, li, blockquote, figcaption {
  text-wrap: pretty;
}

/* ============ Loading screen ============ */

/* ============ Loader ============
   The mark sits on bone while a hairline draws itself from the foot of the
   screen to the head, the count riding its tip. When it lands the screen
   parts along that same line, and the mark travels up to the nav. */

.ldr {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: grid;
  place-items: center;
  pointer-events: none;
  /* one size governs both marks, so the handover cannot change scale */
  --ldr-mark: clamp(64px, 6.6vw, 95px);
}

/* the two halves of the curtain */
.ldr-panel {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 50.5%;   /* a hair of overlap, so no seam shows before they part */
  background: #f7f1ea;
  transition: transform 1.15s cubic-bezier(0.76, 0, 0.24, 1);
}
.ldr-panel--l { left: 0; }
.ldr-panel--r { right: 0; }
.ldr.is-open .ldr-panel--l { transform: translateX(-100.5%); }
.ldr.is-open .ldr-panel--r { transform: translateX(100.5%); }

.ldr-mark {
  position: relative;
  /* above the rule: the line passes behind the mark, not across it */
  z-index: 3;
  display: block;
  width: var(--ldr-mark);
  height: auto;
}
/* the turn plays, then the still takes over — the two solid octagons are
   sized to sit exactly on top of each other across the handover */
.ldr-mark--still {
  position: absolute;
  width: calc(var(--ldr-mark) * 0.8867);
  transform: translate(calc(var(--ldr-mark) * 0.0192), calc(var(--ldr-mark) * 0.0082));
  opacity: 0;
}
.ldr.is-landed .ldr-mark--film { opacity: 0; }
.ldr.is-landed .ldr-mark--still { opacity: 1; }
/* the mark simply fades where it stands as the screen parts — it does not
   travel to the nav */
.ldr.is-open .ldr-mark { opacity: 0; transition: opacity 0.55s ease; }

/* The rule grows upward from the foot of the screen — its height is the
   progress bar. */
.ldr-rule {
  position: absolute;
  left: 50%;
  bottom: 0;
  z-index: 2;
  width: 2px;
  height: 0;
  background: #c3a058;
  transition: height 0.45s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.4s ease;
}
.ldr.is-open .ldr-rule { opacity: 0; }

.ldr-count {
  position: absolute;
  left: 50%;
  top: 0;
  transform: translate(-50%, -170%);
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: 0.8125rem;
  letter-spacing: 0.18em;
  color: #a1793a;
  font-variant-numeric: lining-nums tabular-nums;
  font-feature-settings: "lnum" 1, "tnum" 1;
}

.ldr-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

@media (prefers-reduced-motion: reduce) {
  .ldr-panel,
  .ldr-mark,
  .ldr-rule { transition: opacity 0.25s ease; }
  .ldr.is-open .ldr-panel--l,
  .ldr.is-open .ldr-panel--r { transform: none; opacity: 0; }
}

body.loading { overflow: hidden; }

/* ============ Footer (Vero-style, dark sage) ============ */
.site-footer {
  background: var(--bg);
  color: var(--ink);
  padding: clamp(4rem, 9vh, 7rem) var(--pad-x) 2rem;
  overflow: hidden;
}

.footer-top {
  max-width: 1400px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.3fr 2fr;
  gap: clamp(2.5rem, 6vw, 6rem);
  padding-bottom: clamp(3rem, 6vh, 5rem);
}

.footer-eyebrow {
  font-family: var(--font-display);
  font-size: 1.0625rem;
  letter-spacing: 0.06em;
  color: var(--gold-bright);
  margin-bottom: 1.25rem;
}
.footer-eyebrow em { font-style: italic; }

.footer-cta-line {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.5rem, 2.4vw, 2.125rem);
  line-height: 1.25;
  color: var(--ink);
  max-width: 16ch;
  margin-bottom: 2rem;
}

/* Newsletter: minimal underline field with a gold send */
.footer-news {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  max-width: 340px;
  border-bottom: 1px solid rgba(236, 231, 218, 0.28);
  padding-bottom: 0.6rem;
  transition: border-color 0.3s ease;
}
.footer-news:focus-within { border-color: var(--gold-bright); }
.footer-news input {
  flex: 1;
  background: none;
  border: 0;
  outline: none;
  color: var(--ink);
  font-family: var(--font-ui);
  font-weight: 300;
  font-size: 0.9375rem;
}
.footer-news input::placeholder { color: rgba(236, 231, 218, 0.45); }
.footer-news button {
  flex: none;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1px solid rgba(224, 200, 130, 0.4);
  background: none;
  color: var(--gold-bright);
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: background 0.3s ease, transform 0.3s ease;
}
.footer-news button:hover {
  background: rgba(220, 185, 104, 0.14);
  transform: translateX(2px);
}

.footer-cols {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
}

.footer-col h6 {
  font-family: var(--font-ui);
  font-size: 0.6875rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold-bright);
  margin-bottom: 1.25rem;
  font-weight: 500;
}

.footer-col ul {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}

.footer-col a {
  font-family: var(--font-ui);
  font-weight: 300;
  font-size: 0.9375rem;
  color: rgba(236, 231, 218, 0.7);
  text-decoration: none;
  position: relative;
  transition: color 0.25s ease, padding-left 0.25s ease;
}
/* creative UX: a gold dot slides in on hover */
.footer-col a::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--gold-bright);
  transform: translate(-8px, -50%) scale(0);
  transition: transform 0.25s ease;
}
.footer-col a:hover {
  color: var(--gold-bright);
  padding-left: 13px;
}
.footer-col a:hover::before { transform: translate(0, -50%) scale(1); }

/* Oversized brand wordmark spanning the footer */
.footer-wordmark {
  font-family: var(--font-display);
  font-weight: 500;
  font-style: italic;
  font-size: clamp(4rem, 21vw, 20rem);
  line-height: 0.82;
  letter-spacing: -0.02em;
  color: transparent;
  background: linear-gradient(
    180deg,
    rgba(236, 231, 218, 0.16),
    rgba(236, 231, 218, 0.05)
  );
  -webkit-background-clip: text;
  background-clip: text;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  user-select: none;
  margin: clamp(1rem, 3vh, 2.5rem) 0;
}

.footer-bottom {
  max-width: 1400px;
  margin: 0 auto;
  padding-top: 2rem;
  border-top: 1px solid rgba(236, 231, 218, 0.1);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  font-family: var(--font-ui);
  font-size: 0.8125rem;
  color: rgba(236, 231, 218, 0.5);
}
.footer-legal { display: flex; gap: 1.5rem; }
.footer-legal a { color: rgba(236, 231, 218, 0.5); text-decoration: none; transition: color 0.25s ease; }
.footer-legal a:hover { color: var(--gold-bright); }

.footer-top-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: none;
  border: 1px solid rgba(236, 231, 218, 0.22);
  border-radius: 999px;
  padding: 0.5rem 1rem;
  color: rgba(236, 231, 218, 0.8);
  font-family: var(--font-ui);
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  transition: border-color 0.3s ease, color 0.3s ease;
}
.footer-top-btn:hover { border-color: var(--gold-bright); color: var(--gold-bright); }
.footer-top-btn i { transition: transform 0.3s ease; }
.footer-top-btn:hover i { transform: translateY(-3px); }

@media (max-width: 760px) {
  .footer-top { grid-template-columns: 1fr; gap: 2.5rem; }
  .footer-cols { grid-template-columns: 1fr 1fr; gap: 2rem 1.5rem; }
}

/* ============ Floating AI ask-bar ============ */
/* dock: the search bar + a section-contextual CTA, centred as one group so the
   bar nudges left when the CTA appears (mirrors pukhraj's Buy dock) */
.hdock {
  position: fixed;
  left: 50%;
  bottom: clamp(1.25rem, 3vh, 2rem);
  transform: translateX(-50%);
  z-index: 90;
  display: flex;
  align-items: flex-end;
  gap: 0.5rem;
  max-width: calc(100vw - 1.5rem);
}
/* the bar gives up its own fixed centring to the dock; keeps its slide-in */
.hdock .ai-bar {
  position: relative;
  left: auto;
  bottom: auto;
  transform: translateY(150%);
}
.hdock .ai-bar.is-visible { transform: translateY(0) !important; }
/* collapses to zero width when empty (bar centres alone) and eases open when a
   CTA appears, so the bar glides sideways instead of jumping */
.hdock-cta {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex: none;
  max-width: 0;
  margin-left: -0.5rem;   /* swallow the dock gap while collapsed */
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
  transition: max-width 0.55s cubic-bezier(0.16, 1, 0.3, 1),
    margin-left 0.55s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.4s ease;
}
.hdock-cta.is-on { max-width: 460px; margin-left: 0; opacity: 1; pointer-events: auto; }
/* same colour language as the search bar */
.hdock-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.4rem;
  height: 47px; padding: 0 1.15rem; border-radius: 999px; white-space: nowrap;
  font-family: var(--font-ui); font-weight: 500; font-size: 0.85rem;
  text-decoration: none; color: rgba(255, 255, 255, 0.95);
  /* dark glass so white text stays readable over light OR dark sections */
  background: rgba(30, 34, 24, 0.6);
  -webkit-backdrop-filter: blur(16px) saturate(1.1); backdrop-filter: blur(16px) saturate(1.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  box-shadow: 0 20px 50px -20px rgba(0, 0, 0, 0.4);
  transition: background 0.3s ease, border-color 0.3s ease;
}
.hdock-btn i { font-size: 0.9em; }
.hdock-btn:hover { background: rgba(30, 34, 24, 0.72); border-color: rgba(255, 255, 255, 0.32); }
.hdock-btn--ghost { font-weight: 400; }
@media (max-width: 1100px) { .hdock-cta { display: none !important; } }

.ai-bar {
  position: fixed;
  left: 50%;
  bottom: clamp(1.25rem, 3vh, 2rem);
  transform: translateX(-50%) translateY(140%);
  z-index: 90;
  width: min(340px, calc(100vw - 2.5rem));
  padding: 0.4rem;
  border-radius: 999px;
  background: rgba(34, 32, 27, 0.82);
  border: 1px solid rgba(255, 255, 255, 0.14);
  -webkit-backdrop-filter: blur(16px) saturate(1.1);
  backdrop-filter: blur(16px) saturate(1.1);
  box-shadow:
    0 20px 50px -20px rgba(0, 0, 0, 0.45),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
  opacity: 0;
  transition: transform 0.7s cubic-bezier(0.16, 1, 0.3, 1),
    opacity 0.7s ease, width 0.55s cubic-bezier(0.16, 1, 0.3, 1),
    border-radius 0.55s ease;
  backface-visibility: hidden;
}
.ai-bar.is-visible {
  transform: translateX(-50%) translateY(0);
  opacity: 1;
}

/* Expanded showcase state — inherits the translucent charcoal glass */
.ai-bar.expanded {
  width: min(430px, calc(100vw - 2.5rem));
  border-radius: 14px;
  padding: 0.5rem;
}

.ai-pill {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

/* Hamburger menu popover, anchored to the + button (bottom-left) */
.ai-chips {
  position: absolute;
  left: 0;
  bottom: calc(100% + 0.6rem);
  min-width: 240px;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  padding: 0.5rem;
  border-radius: 18px;
  background: rgba(34, 32, 27, 0.92);
  border: 1px solid rgba(255, 255, 255, 0.14);
  -webkit-backdrop-filter: blur(16px) saturate(1.1);
  backdrop-filter: blur(16px) saturate(1.1);
  box-shadow: 0 24px 60px -22px rgba(0, 0, 0, 0.6);
  transform-origin: bottom left;
  animation: ai-chips-in 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}
.ai-chips[hidden] { display: none; }

.ai-menu-item {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  padding: 0.8rem 1rem;
  border-radius: 12px;
  color: rgba(255, 255, 255, 0.9);
  font-family: var(--font-ui);
  font-size: 0.9375rem;
  font-weight: 300;
  text-decoration: none;
  transition: background 0.2s ease, color 0.2s ease;
}
.ai-mi-ico {
  display: grid;
  place-items: center;
  width: 2.4rem;
  height: 2.4rem;
  border-radius: 0.7rem;
  background: rgba(220, 185, 104, 0.07);
  border: 1px solid rgba(220, 185, 104, 0.26);
  flex: none;
  transition: background 0.2s ease, border-color 0.2s ease;
}
.ai-menu-item i {
  font-size: 1.15rem;
  color: var(--gold-bright);
  flex: none;
}
.ai-menu-item:hover {
  background: rgba(220, 185, 104, 0.12);
  color: var(--gold-bright);
}
.ai-menu-item:hover .ai-mi-ico {
  background: rgba(220, 185, 104, 0.14);
  border-color: rgba(220, 185, 104, 0.5);
}

@keyframes ai-chips-in {
  from { opacity: 0; transform: translateY(8px) scale(0.98); }
  to { opacity: 1; transform: none; }
}

.ai-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.6rem 1.05rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.14);
  color: rgba(255, 255, 255, 0.9);
  font-family: var(--font-ui);
  font-size: 0.875rem;
  font-weight: 400;
  letter-spacing: 0.005em;
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.25s ease, border-color 0.25s ease,
    color 0.25s ease, transform 0.25s ease;
}
.ai-chip:hover {
  background: rgba(220, 185, 104, 0.14);
  border-color: var(--gold-bright);
  color: var(--gold-bright);
  transform: translateY(-1px);
}
.ai-chip .dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex: none;
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.06);
}
/* Lead actions read as primary: gold outline + gem mark */
.ai-chip.chip-lead {
  color: var(--gold-bright);
  border-color: rgba(224, 200, 130, 0.4);
  background: rgba(220, 185, 104, 0.08);
}
.ai-chip.chip-lead::before {
  content: "\2726";
  font-size: 0.7rem;
  line-height: 1;
  color: var(--gold-bright);
}
.ai-chip.chip-lead:hover { background: rgba(220, 185, 104, 0.2); }
.ai-add.open { background: rgba(255, 255, 255, 0.16); }
.ai-add.open .icon-ask { display: none; }
.ai-add.open .icon-cue { display: block; }
.ai-add i { transition: transform 0.3s ease; }
.ai-bar.expanded .ai-pill { display: none; }

/* Suggestion panel */
.ai-suggest {
  display: none;
  flex-direction: column;
  gap: 0.5rem;
}
.ai-bar.expanded .ai-suggest { display: flex; }

/* Search-focus popover: suggestions float above the pill, input stays */
.ai-bar.searching {
  border-radius: 16px;
}
.ai-bar.searching .ai-suggest {
  display: flex;
  position: absolute;
  left: 0;
  right: 0;
  bottom: calc(100% + 0.6rem);
  padding: 0.75rem;
  border-radius: 16px;
  background: rgba(34, 32, 27, 0.9);
  border: 1px solid rgba(255, 255, 255, 0.14);
  -webkit-backdrop-filter: blur(16px) saturate(1.1);
  backdrop-filter: blur(16px) saturate(1.1);
  box-shadow: 0 24px 60px -22px rgba(0, 0, 0, 0.6);
  animation: ai-chips-in 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.ai-suggest-head {
  font-family: var(--font-ui);
  font-size: 0.625rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold-bright);
  margin: 0 0 0.6rem 0.15rem;
}

.ai-thumbs {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  gap: 0.4rem;
}

.ai-thumb {
  position: relative;
  aspect-ratio: 1 / 1;
  border-radius: 12px;
  overflow: hidden;
  text-decoration: none;
  background: rgba(236, 231, 218, 0.94) center / cover no-repeat;
  border: 1px solid rgba(236, 231, 218, 0.12);
  transition: border-color 0.35s ease, box-shadow 0.35s ease;
}
/* hover: stays the same size, just a soft gold lift */
.ai-thumb:hover {
  border-color: rgba(224, 200, 130, 0.55);
  box-shadow: 0 10px 28px -12px rgba(32, 37, 26, 0.4);
}

/* gem thumbs sit on a light card, jewellery photos fill edge-to-edge */
.ai-thumb.gem {
  background-size: 68%;
  background-position: center;
  transition: border-color 0.35s ease, box-shadow 0.35s ease,
    background-size 0.5s cubic-bezier(0.16, 1, 0.3, 1),
    background-position 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}
/* hover: the stone rises and makes room; it is never covered */
.ai-thumb.gem:hover {
  background-size: 52%;
  background-position: center 22%;
}

/* name + price, revealed on hover */
.ai-thumb-info {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 1.1rem 0.5rem 0.6rem;
  /* photos need a scrim; gems override to none below */
  background: linear-gradient(to top, rgba(243, 240, 231, 0.96) 55%, rgba(243, 240, 231, 0));
  text-align: center;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.4s ease 0.05s, transform 0.4s cubic-bezier(0.16, 1, 0.3, 1) 0.05s;
}
.ai-thumb.gem .ai-thumb-info {
  background: none;
  padding-top: 0.4rem;
}
.ai-thumb:hover .ai-thumb-info {
  opacity: 1;
  transform: none;
}
.ai-thumb-info strong {
  display: block;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 0.8125rem;
  line-height: 1.15;
  color: var(--ink-dark);
  margin-bottom: 0.15rem;
}
.ai-thumb-info span {
  display: block;
  font-family: var(--font-ui);
  font-weight: 400;
  font-size: 0.625rem;
  letter-spacing: 0.06em;
  color: #a1793a;
}

/* Intent variant: icon chips instead of photo thumbs */
.ai-thumbs.intent {
  grid-auto-flow: row;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.45rem;
}

.ai-intent {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-decoration: none;
  gap: 0.45rem;
  padding: 0.85rem 0.4rem;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.9);
  font-family: var(--font-ui);
  font-size: 0.8125rem;
  font-weight: 300;
  transition: background 0.25s ease, border-color 0.25s ease, color 0.25s ease;
}
.ai-intent:hover {
  background: rgba(220, 185, 104, 0.12);
  border-color: var(--gold-bright);
  color: var(--gold-bright);
}
.ai-intent-ic {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1px solid rgba(224, 200, 130, 0.35);
  font-size: 1.2rem;
  color: var(--gold-bright);
}

.ai-actions {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.ai-action {
  flex: 1;
  text-align: center;
  white-space: nowrap;
  padding: 0.5rem 0.75rem;
  border-radius: 11px;
  background: rgba(255, 255, 255, 0.09);
  border: 1px solid rgba(255, 255, 255, 0.14);
  color: rgba(255, 255, 255, 0.92);
  font-family: var(--font-ui);
  font-size: 0.8125rem;
  font-weight: 400;
  text-decoration: none;
  background: rgba(255, 255, 255, 0.09);
  border-color: rgba(255, 255, 255, 0.16);
  transition: background 0.3s ease, border-color 0.3s ease, color 0.3s ease;
}
.ai-action:hover { background: rgba(255, 255, 255, 0.16); border-color: rgba(255, 255, 255, 0.32); }

.ai-close {
  flex: none;
}

.ai-btn {
  flex: none;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.16);
  background: rgba(255, 255, 255, 0.09);
  color: rgba(255, 255, 255, 0.92);
  font-size: 1rem;
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: background 0.3s ease, border-color 0.3s ease,
    transform 0.3s ease, color 0.3s ease;
}
.ai-btn:hover {
  background: rgba(255, 255, 255, 0.16);
}
.ai-send:hover { transform: translateY(-1px); }

/* Idle "scroll to explore" cue */
.ai-cue {
  position: absolute;
  left: 0.5rem;
  right: 0.5rem;
  text-align: center;
  color: rgba(255, 255, 255, 0.85);
  font-family: var(--font-ui);
  font-weight: 300;
  font-size: clamp(0.9375rem, 1.4vw, 1.0625rem);
  opacity: 0;
  transition: opacity 0.4s ease;
  pointer-events: none;
}
.ai-add .icon-cue { display: none; }
.ai-bar.idle .ai-add .icon-ask { display: none; }
.ai-bar.idle .ai-add .icon-cue { display: block; }
.ai-bar.idle .ai-ghost { opacity: 0; }
.ai-bar.idle .ai-cue { opacity: 1; }
.ai-bar.idle .ai-send { display: none; }
.ai-bar.idle .ai-input { pointer-events: none; }

.ai-input-wrap {
  position: relative;
  flex: 1;
  display: flex;
  align-items: center;
  min-width: 0;
}

.ai-input {
  width: 100%;
  background: none;
  border: 0;
  outline: none;
  color: var(--ink);
  font-family: var(--font-ui);
  font-weight: 300;
  font-size: 0.9375rem; /* fixed — pill has fixed width, so text must not scale with vw */
  padding: 0 0.5rem;
}

/* Animated ghost placeholder that swaps per section */
.ai-ghost {
  position: absolute;
  left: 0.5rem;
  right: 0.5rem;
  color: rgba(236, 231, 218, 0.55);
  font-family: var(--font-ui);
  font-weight: 300;
  font-size: 0.9375rem; /* fixed — matches .ai-input, consistent at any window width */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  pointer-events: none;
  transition: opacity 0.4s ease, transform 0.4s ease;
}
.ai-ghost.swap {
  opacity: 0;
  transform: translateY(-6px);
}
/* the ghost placeholder stays until the user actually types (has-text) */
.ai-input.has-text ~ .ai-ghost { opacity: 0; }

@media (max-width: 560px) {
  .ai-bar { gap: 0.35rem; padding: 0.4rem; }
  .ai-btn { width: 42px; height: 42px; font-size: 1.125rem; }
}
@media (prefers-reduced-motion: reduce) {
  .ai-bar { transition: opacity 0.3s ease; }
}

/* ============ Navigation ============ */

.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 40;
  height: var(--nav-h);
  display: flex;
  align-items: center;
  gap: 2rem;
  padding: 0 var(--pad-x);
  /* over the hero video: a whisper of scrim, no hard edge */
  background: linear-gradient(to bottom, rgba(16, 20, 12, 0.38), rgba(16, 20, 12, 0));
  transition: height 0.4s cubic-bezier(0.16, 1, 0.3, 1),
    background 0.4s ease, backdrop-filter 0.4s ease,
    border-color 0.4s ease, box-shadow 0.4s ease;
  border-bottom: 1px solid transparent;
}

/* Permanent brand mark, centred in the top bar.
   Hidden until the hero logo has morphed into its exact position (JS swap). */
.nav-logo {
  position: static;
  order: -1;
  transform: none;
  display: block;
  opacity: 1;
  pointer-events: auto;
}

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

/* Guarantee badge (right corner) */
.nav-badge {
  display: flex;
  align-items: center;
  gap: 0.7rem;
}

.badge-shield {
  position: relative;
  display: block;
  width: 42px;
  flex: none;
}

.badge-shield img {
  display: block;
  width: 100%;
  height: auto;
}

/* Glossy wave: a light band sweeps across, clipped to the shield shape */
.badge-shield::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    115deg,
    transparent 38%,
    rgba(255, 255, 255, 0.85) 50%,
    transparent 62%
  );
  background-size: 250% 100%;
  background-repeat: no-repeat;
  -webkit-mask: url("assets/shield.png") center / contain no-repeat;
  mask: url("assets/shield.png") center / contain no-repeat;
  mix-blend-mode: screen;
  pointer-events: none;
  animation: shield-shine 3.4s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {
  .badge-shield::after { animation: none; }
}

@keyframes shield-shine {
  0% { background-position: 180% 0; }
  55%, 100% { background-position: -80% 0; }
}

.badge-text {
  display: flex;
  flex-direction: column;
  line-height: 1.18;
}

.badge-text strong {
  font-family: var(--font-ui);
  font-weight: 500;
  font-size: 0.9375rem;
  letter-spacing: 0.01em;
  color: var(--ink);
  transition: color 0.3s ease;
}

.badge-text span {
  font-family: var(--font-ui);
  font-weight: 300;
  font-size: 0.75rem;
  color: rgba(236, 231, 218, 0.7);
  transition: color 0.3s ease;
}

/* Right cluster: menu + icons */
.nav-right {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 1.5rem;
}

/* primary nav CTA — sage pill, readable over both the dark hero and light scrolled bar */
.nav-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  height: 40px; /* matches the 40px icon circles */
  padding: 0 1.25rem;
  border-radius: 999px;
  background: #5b634a;
  border: 1px solid #5b634a;
  color: var(--bone);
  font-family: var(--font-ui);
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  white-space: nowrap;
  text-decoration: none;
  transition: background 0.25s ease, border-color 0.25s ease, transform 0.2s ease;
}
.nav-cta i { font-size: 1rem; }
.nav-cta:hover,
.nav-cta:focus-visible {
  background: #4c543e;
  border-color: #4c543e;
}
.nav-cta:active { transform: translateY(1px); }

.nav-links {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  gap: 1.5rem;
}

.nav-links a {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-family: var(--font-ui);
  font-size: 0.9375rem;
  font-weight: 400;
  letter-spacing: 0.03em;
  color: var(--ink-muted);
  text-decoration: none;
  white-space: nowrap;
  transition: color 0.25s ease;
}

.nav-links a .ph { font-size: 0.7em; }

.nav-links a:hover,
.nav-links a:focus-visible {
  color: var(--gold-bright);
}

.nav-links a.is-active {
  position: relative;
  color: var(--gold-bright);
}

.nav-links a.is-active::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -6px;
  height: 1px;
  background: var(--gold);
}

.nav-icons {
  display: flex;
  align-items: center;
  gap: 1.35rem;
}

.nav-icons a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  font-size: 1.2rem;
  color: #fff;
  text-decoration: none;
  background: rgba(236, 231, 218, 0.06);
  border: 1px solid rgba(236, 231, 218, 0.16);
  transition: color 0.25s ease, background 0.25s ease, border-color 0.25s ease;
}

.nav-icons a:hover,
.nav-icons a:focus-visible {
  color: var(--gold-bright);
  background: rgba(236, 231, 218, 0.12);
  border-color: rgba(224, 200, 130, 0.4);
}

/* scrolled (light) state: circles tint dark */
.nav.scrolled .nav-icons a {
  background: rgba(32, 37, 26, 0.05);
  border-color: rgba(32, 37, 26, 0.14);
}
.nav.scrolled .nav-icons a:hover {
  background: rgba(32, 37, 26, 0.1);
  border-color: rgba(161, 121, 58, 0.4);
}

/* Hairline divider between the guarantee badge and the icons */
.nav-icons {
  padding-left: 1.75rem;
  margin-left: 0.25rem;
  border-left: 1px solid rgba(236, 231, 218, 0.22);
}

.nav.scrolled .nav-icons {
  border-left-color: rgba(32, 37, 26, 0.18);
}

/* Scrolled state (over the bone sections): ink flips dark, bar turns to
   a subtle frosted sheet that floats rather than boxes the content */
.nav.scrolled {
  height: 84px;
  background: rgba(241, 239, 232, 0.62);
  backdrop-filter: blur(16px) saturate(1.15);
  -webkit-backdrop-filter: blur(16px) saturate(1.15);
  border-bottom: 1px solid rgba(161, 121, 58, 0.1);
  box-shadow: 0 1px 24px -12px rgba(32, 37, 26, 0.4);
}

.nav.scrolled .nav-links a,
.nav.scrolled .nav-icons a {
  color: var(--ink-dark);
}

.nav.scrolled .badge-text strong { color: #1f3324; }
.nav.scrolled .badge-text span { color: rgba(32, 37, 26, 0.55); }

.nav.scrolled .nav-links a:hover,
.nav.scrolled .nav-icons a:hover,
.nav.scrolled .nav-links a.is-active { color: #a1793a; }

.nav.scrolled .nav-links a.is-active::after { background: #a1793a; }

.nav-toggle { display: none; }

/* ============ Hero ============ */

/* Hero scrolls away natively (1:1 with the wheel) while the banner shrinks,
   so the upward motion is butter-smooth with no pin/release handoff. */
.hero {
  position: relative;
  height: 100dvh;
  display: flex;
  align-items: stretch;
  overflow: hidden;
  isolation: isolate;
}

/* Frame clips the banner; scroll shrinks it inward (VERO effect) */
.hero-frame {
  position: absolute;
  inset: 0;
  z-index: -1;
  isolation: isolate;
  clip-path: inset(0 0 0 0);
}

.hero-media {
  position: absolute;
  inset: 0 0 -20% 0;
  z-index: -2;
  overflow: hidden;
  background: #14180f;
}

.hero-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center top;
  transform: translateY(-6%);
}

/* VERO-style: no visible scrim shape, just a light uniform tame of the
   video highlights; readability comes from crisp near-white type */
.hero-scrim {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: rgba(17, 20, 12, 0.22);
}

/* Left-side wash so the headline, sub and CTA stay legible over the art */
.hero-frame::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to right,
    rgba(10, 12, 7, 0.72) 0%,
    rgba(10, 12, 7, 0.42) 26%,
    rgba(10, 12, 7, 0.12) 46%,
    transparent 62%);
  pointer-events: none;
}

/* Soft fade at the bottom so the hero melts into black — no hard seam */
.hero-frame::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 34vh;
  background: linear-gradient(to bottom, rgba(20, 24, 15, 0) 0%, #14180f 88%);
  pointer-events: none;
}

/* Pear-style layout: lead block up top, a full-bleed rule, then a
   tag + note row seated lower on the frame */
.hero-content {
  width: 100%;
  min-height: 100dvh;
  padding: calc(var(--nav-h) + 16vh) var(--pad-x) 0;
  text-align: left;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

.hero-lead {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  max-width: none;
}

.hero-title {
  font-family: var(--font-display);
  font-weight: 500;
  font-style: normal;
  font-size: clamp(2.1rem, 4.6vw, 4.2rem);
  line-height: 1.06;
  letter-spacing: -0.022em;
  color: #f7f5ee;
  margin-bottom: 1.3rem;
  /* Sesbania ships with calligraphic swashes/alternates on by default —
     turn them off so the headline reads plain and upright */
  font-variant-ligatures: none;
  font-feature-settings: "swsh" 0, "salt" 0, "calt" 0, "dlig" 0, "hlig" 0, "liga" 0;
  text-shadow:
    0 1px 2px rgba(10, 12, 7, 0.45),
    0 2px 20px rgba(10, 12, 7, 0.3);
}

.hero-title em {
  font-style: normal;
  font-weight: 500;
  color: inherit;
}

.hero-sub {
  font-family: var(--font-ui);
  font-size: clamp(0.9rem, 1vw, 1.02rem);
  font-weight: 400;
  line-height: 1.5;
  color: var(--ink-muted);
  margin-bottom: 2rem;
  text-shadow: 0 1px 10px rgba(10, 12, 7, 0.45);
}

.hero-actions {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 1rem;
  flex-wrap: wrap;
}

/* Bottom row — a whisper tag on the left, a line of copy to its right */
.hero-foot {
  display: grid;
  grid-template-columns: minmax(120px, 190px) minmax(0, 50ch);
  gap: clamp(1.5rem, 5vw, 4.5rem);
  align-items: start;
}
.hero-tag { align-self: start; }
.hero-note {
  font-family: var(--font-ui);
  font-size: clamp(0.9rem, 1vw, 1.02rem);
  font-weight: 400;
  line-height: 1.6;
  color: #ece7da;
  text-shadow: 0 1px 10px rgba(10, 12, 7, 0.4);
}

.hero-marks {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem 1.5rem;
  max-width: 44ch;
}

.hero-marks li {
  position: relative;
  padding-left: 0.95rem;
  font-family: var(--font-ui);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #d8d3c5;
  white-space: nowrap;
}

.hero-marks li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--gold-bright);
}

.hero-tag {
  justify-self: start;
  font-family: var(--font-ui);
  font-size: 0.56rem;
  font-weight: 500;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--ink-muted);
  padding: 0.32rem 0.6rem;
  border: none;
  border-radius: 6px;
  background: rgba(236, 231, 218, 0.06);
  white-space: nowrap;
}

/* ---- Lede button: understated text + arrow with a hairline underline ---- */
.btn-lede {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.35rem 0.1rem;
  text-decoration: none;
  background: none;
  border: none;
}

/* Hairline that sits under the lockup; grows in on hover */
.btn-lede::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: rgba(220, 185, 104, 0.35);
  transform-origin: left center;
  transition: background-color 0.35s ease, transform 0.45s cubic-bezier(0.16, 1, 0.3, 1);
}

.btn-lede-label {
  font-family: var(--font-ui);
  font-size: 0.66rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #ded9cc;
  white-space: nowrap;
  transition: color 0.35s ease;
}

.btn-lede-arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--gold-bright);
  font-size: 0.8rem;
  transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1);
}

.btn-lede:hover .btn-lede-label,
.btn-lede:focus-visible .btn-lede-label {
  color: #f7f5ee;
}

.btn-lede:hover::after,
.btn-lede:focus-visible::after {
  background: var(--gold-bright);
}

.btn-lede:hover .btn-lede-arrow,
.btn-lede:focus-visible .btn-lede-arrow {
  transform: translateX(3px);
}

.btn-lede:focus-visible { outline: none; }

/* ============ Ambient survey frame (fixed hairlines + astral markers) ============ */
.astro-frame {
  position: fixed;
  inset: 0;
  z-index: 8;
  pointer-events: none;
  --af-left: clamp(16px, 3.4vw, 52px);
  --af-right: calc(100% - clamp(16px, 3.4vw, 52px));
  --af-hair: rgba(201, 162, 75, 0.16);
}

.af-line { position: absolute; }

.af-v {
  top: 0;
  bottom: 0;
  width: 1px;
  background: linear-gradient(to bottom,
    transparent, var(--af-hair) 13%, var(--af-hair) 87%, transparent);
}
.af-v-left  { left: var(--af-left); }
.af-v-right { left: var(--af-right); }

.af-h {
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(to right,
    transparent, var(--af-hair) 11%, var(--af-hair) 89%, transparent);
}
.af-h-low { top: 92vh; }

/* Four-point sparkle; slow scale + rotate makes it glitter */
.af-star {
  position: absolute;
  width: 14px;
  height: 14px;
  margin: -7px 0 0 -7px;
  background: var(--gold-bright);
  clip-path: polygon(50% 0, 58% 42%, 100% 50%, 58% 58%, 50% 100%, 42% 58%, 0 50%, 42% 42%);
  filter: drop-shadow(0 0 5px rgba(220, 185, 104, 0.55));
  opacity: 0.85;
  animation: af-twinkle var(--tw, 6s) ease-in-out var(--td, 0s) infinite;
}
.af-star-sm { width: 10px; height: 10px; margin: -5px 0 0 -5px; }
.af-star-xs { width: 7px;  height: 7px;  margin: -3.5px 0 0 -3.5px; }

@keyframes af-twinkle {
  0%, 100% { opacity: 0.15; transform: scale(0.68) rotate(0deg); }
  50%      { opacity: 1;    transform: scale(1) rotate(90deg); }
}

@media (max-width: 640px) {
  .astro-frame { --af-left: 13px; }
  .af-v-right { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .af-star { animation: none; opacity: 0.5; }
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-ui);
  font-size: 0.9375rem;
  font-weight: 400;
  letter-spacing: 0.04em;
  text-decoration: none;
  padding: 0.9rem 2.1rem;
  border-radius: 999px;
  white-space: nowrap;
  transition: transform 0.2s ease, background-color 0.25s ease,
              border-color 0.25s ease, color 0.25s ease;
}

.btn:active { transform: translateY(1px) scale(0.98); }

.btn-primary {
  background: #5b634a;
  color: var(--bone);
  border: 1px solid #5b634a;
  box-shadow: 0 12px 34px -14px rgba(15, 18, 10, 0.6);
}

.btn-primary:hover,
.btn-primary:focus-visible {
  background: #4c543e;
  border-color: #4c543e;
}

.btn-ghost {
  color: #fff;
  border: 1px solid rgba(236, 231, 218, 0.6);
  background: rgba(17, 20, 12, 0.44);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  text-shadow: 0 1px 3px rgba(15, 18, 10, 0.55);
}

.btn-ghost:hover,
.btn-ghost:focus-visible {
  border-color: var(--gold);
  color: var(--gold-bright);
}

/* ============ Entry motion (load-in cascade) ============ */

@media (prefers-reduced-motion: no-preference) {
  .hero-title,
  .hero-sub,
  .hero-actions,
  .hero-foot {
    opacity: 0;
    transform: translateY(22px);
    animation: rise 0.9s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  }
  .hero-title   { animation-delay: 0.32s; }
  .hero-sub     { animation-delay: 0.46s; }
  .hero-actions { animation-delay: 0.6s; }
  .hero-foot    { animation-delay: 0.74s; }

  /* Scroll-driven (no JS): banner gently shrinks and drifts upward while the
     logo undocks, scales down, and settles at the centre of the top bar. */
  @supports (animation-timeline: scroll()) {
    /* Shrink runs the full exit distance: banner keeps reducing until the
       moment it has scrolled completely out of view */
    .hero-frame {
      animation: frame-shrink linear both;
      animation-timeline: scroll(root);
      animation-range: 0vh 100vh;
      will-change: transform, clip-path;
    }

    .hero-media {
      animation: banner-up linear both;
      animation-timeline: scroll(root);
      animation-range: 0vh 100vh;
    }

    /* Tagline and CTAs fade away together as the banner starts shrinking */
    .hero-tagline,
    .hero-actions {
      animation-name: rise, fade-away;
      animation-duration: 0.9s, auto;
      animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1), cubic-bezier(0.33, 0, 0.2, 1);
      animation-fill-mode: forwards, forwards;
      animation-timeline: auto, scroll(root);
    }
    .hero-tagline {
      animation-delay: 0.38s, 0s;
      animation-range: normal, 5vh 42vh;
    }
    .hero-actions {
      animation-delay: 0.54s, 0s;
      animation-range: normal, 9vh 46vh;
    }
  }
}

@keyframes rise {
  to { opacity: 1; transform: translateY(0); }
}

@keyframes banner-up {
  to { transform: translateY(-8%) scale(1.02); }
}

/* Top edge stays pinned; banner shrinks only from sides and bottom */
@keyframes frame-shrink {
  to { clip-path: inset(0 7vw 30vh 7vw); }
}

@keyframes fade-away {
  from { opacity: 1; transform: translateY(0); visibility: visible; }
  to   { opacity: 0; transform: translateY(-14px); visibility: hidden; }
}

@keyframes fade-in {
  to { opacity: 1; }
}

/* ============ House section (light, pinned, gem scrub over text) ============ */

.section-house {
  position: relative;
  height: 420vh;
  background: var(--bone);
  color: var(--ink-dark);
}

.house-sticky {
  position: sticky;
  top: 0;
  height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  text-align: center;
  padding: 0 var(--pad-x);
  /* canvas multiply-blends against this backdrop (sticky = stacking context) */
  background: var(--bone);
}

#gem-canvas {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, calc(-50% + 85vh));
  width: min(58vw, 700px);
  height: auto;
  aspect-ratio: 1200 / 676;
  mix-blend-mode: multiply;
  z-index: 2;
  pointer-events: none;
}

.house-title {
  position: relative;
  z-index: 1;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(2.5rem, 6.5vw, 5.5rem);
  line-height: 1.14;
  letter-spacing: 0.01em;
  max-width: 18ch;
  padding-bottom: 0.25rem;
}

.house-title em {
  font-style: italic;
}

/* Second message; appears low in the frame under the rising gem (JS-driven) */
.house-alt {
  position: absolute;
  left: 50%;
  top: auto;
  bottom: 7vh;
  transform: translate(-50%, 0);
  z-index: 1;
  width: min(92vw, 26ch);
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(2rem, 5vw, 4.375rem); /* caps at 70px */
  line-height: 1.14;
  letter-spacing: 0.01em;
  color: rgba(32, 37, 26, 0.5);
  opacity: 0;
  padding-bottom: 0.25rem;
}

.house-alt em {
  display: block;
  font-style: italic;
  color: var(--ink-dark);
  font-size: clamp(2.5rem, 6vw, 5.4375rem); /* 87px */
}

/* Third moment: quiet two-column comparison */
.house-alt2 {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 1;
  opacity: 0;
  width: min(92vw, 1150px);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2.5rem, 5vw, 5rem);
  align-items: center;
  text-align: left;
}

.compare-col {
  padding: 2.75rem 0 0.5rem;
}

.compare-label {
  font-family: var(--font-display);
  font-size: 1.25rem;
  margin-bottom: 1rem;
}

.compare-label em {
  font-style: italic;
}

.compare-col h3 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.625rem, 2.3vw, 2.25rem);
  line-height: 1.18;
  min-height: 2.4em;
  margin-bottom: 1.5rem;
}

.compare-col ul {
  list-style: none;
}

.compare-col li {
  font-family: var(--font-ui);
  font-weight: 300;
  font-size: 1.0625rem;
  line-height: 1.55;
  padding: 1.05rem 0 1.05rem 2rem;
  position: relative;
}

.compare-col li + li {
  border-top: 1px solid rgba(32, 37, 26, 0.09);
}

.compare-col li::before {
  position: absolute;
  left: 0.15rem;
  top: 1.05rem;
}

.compare-else {
  color: rgba(32, 37, 26, 0.85);
}

.compare-else li::before {
  content: "\00d7";
  color: #b4433a;
}

/* Centre hairline + diamond pivot between the two worlds */
.house-alt2::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 8%;
  bottom: 8%;
  width: 1px;
  background: linear-gradient(
    to bottom,
    rgba(161, 121, 58, 0),
    rgba(161, 121, 58, 0.35) 30%,
    rgba(161, 121, 58, 0.35) 70%,
    rgba(161, 121, 58, 0)
  );
}

.house-alt2::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 11px;
  height: 11px;
  transform: translate(-50%, -50%) rotate(45deg);
  border: 1px solid #a1793a;
  background: var(--bone);
}

/* Astrolaabh side: ornate gold-framed certificate card (image frame) */
.compare-us {
  position: relative;
  color: var(--ink);
  background: url("assets/compare-card-frame.png") center / 100% 100% no-repeat;
  border-radius: 18px;
  overflow: hidden;
  /* frame's gem sits top-centre; clear it, and keep clear of the gold border */
  padding: clamp(7rem, 13vw, 9.5rem) clamp(2.75rem, 5vw, 3.75rem)
    clamp(2.75rem, 5vw, 3.5rem);
}

.compare-us .compare-label {
  color: var(--gold-bright);
}

.compare-us h3 {
  text-align: center;
}

/* Frame already carries the gem emblem — hide the duplicate mark */
.compare-us .compare-label-logo {
  display: none;
}

.compare-ctas {
  position: relative;
  z-index: 1;
  margin-top: 1.75rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.compare-cta {
  margin-top: 0;
  font-size: 0.875rem;
  padding: 0.75rem 1.6rem;
}

.compare-us li {
  padding-left: 3.1rem;
}

.compare-us li::before {
  content: none;
}

.compare-us li i {
  position: absolute;
  left: 0;
  top: 0.85rem;
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.125rem;
  color: var(--gold-bright);
  border: 1px solid rgba(201, 162, 75, 0.4);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.04);
}

.compare-us li + li {
  border-top-color: rgba(201, 162, 75, 0.16);
}

.compare-us .compare-cta {
  color: var(--ink);
  border-color: rgba(236, 231, 218, 0.4);
}

.compare-us .compare-cta:hover,
.compare-us .compare-cta:focus-visible {
  border-color: var(--gold);
  color: var(--gold-bright);
}

/* ============ Essence section (image scales to full-bleed) ============ */

.section-essence {
  position: relative;
  height: 300vh;
  background: var(--bone);
  color: var(--ink-dark);
}

.essence-sticky {
  position: sticky;
  top: 0;
  height: 100dvh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 10vh var(--pad-x) 0;
  background: var(--bone);
}

.essence-eyebrow {
  font-family: var(--font-display);
  font-size: 1.0625rem;
  letter-spacing: 0.08em;
  margin-bottom: 3.5rem;
}

.essence-eyebrow em,
.essence-title em,
.essence-caption em {
  font-style: italic;
  text-transform: none;
  letter-spacing: 0.01em;
}

.essence-title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(2.75rem, 7vw, 6rem);
  line-height: 1.1;
  letter-spacing: 0.01em;
  padding-bottom: 0.25rem;
}

/* Full-viewport media, clipped down to a stone-only card at rest; scroll
   opens the clip to full-bleed (always rendered at native size = sharp) */
.essence-media {
  position: absolute;
  inset: 0;
  overflow: hidden;
  will-change: transform, clip-path;
}

.essence-media img,
.essence-media video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}
/* overlay covering the complete video, so the bars text reads over any frame */
.essence-media::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: rgba(8, 10, 6, 0.58);
}


/* Bars overlay: big centred title, four boxes in a horizontal strip */
.essence-bars {
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  z-index: 3;
  margin-inline: auto;
  width: min(1220px, calc(100vw - 2 * clamp(1.5rem, 5vw, 4rem)));
  color: var(--ink);
  text-align: center;
  opacity: 0;
  pointer-events: none;
}

.bars-eyebrow {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(2.75rem, 5.5vw, 5rem);
  line-height: 1.08;
  margin-bottom: clamp(2.5rem, 5vh, 4rem);
  color: #fff;
  text-shadow: 0 2px 24px rgba(10, 12, 7, 0.6);
}

.bars-eyebrow em {
  font-style: italic;
  color: #fff;
}

/* Four free-floating columns split by thin gold hairlines — no box */
.bars-list {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}
.bars-list li {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0.65rem;
  padding: clamp(0.5rem, 1.5vh, 1.25rem) clamp(1rem, 2.2vw, 2rem);
}
/* hairline divider between columns — a soft gold thread that fades at its ends */
.bars-list li + li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 8%;
  bottom: 8%;
  width: 1px;
  background: linear-gradient(180deg, transparent, rgba(224, 200, 130, 0.32) 22%, rgba(224, 200, 130, 0.32) 78%, transparent);
}
.bars-badge {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: 1px solid rgba(224, 200, 130, 0.45);
  background: transparent;
  margin-bottom: 0.5rem;
  transition: border-color 0.4s ease, box-shadow 0.4s ease;
}
.bars-badge i { font-size: 1.3125rem; color: var(--gold-bright); }
.bars-list strong {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.25rem, 1.8vw, 1.5rem);
  line-height: 1.2;
  color: #fff;
  text-shadow: 0 1px 14px rgba(8, 10, 6, 0.55);
}
.bars-list li > span:last-child {
  font-family: var(--font-ui);
  font-weight: 300;
  font-size: 0.875rem;
  line-height: 1.55;
  color: rgba(236, 231, 218, 0.82);
  max-width: 24ch;
  text-shadow: 0 1px 12px rgba(8, 10, 6, 0.5);
}
.bars-list li:hover .bars-badge {
  border-color: var(--gold-bright);
  box-shadow: 0 0 22px -6px rgba(220, 185, 104, 0.55);
}

/* Actions under the four bars */
.bars-actions {
  display: flex;
  justify-content: center;
  gap: 0.9rem;
  margin-top: clamp(1.75rem, 4vh, 2.75rem);
  flex-wrap: wrap;
}
/* ghost button for dark grounds — ivory hairline */
.btn-ghost-light {
  color: var(--ink);
  border: 1px solid rgba(236, 231, 218, 0.35);
  font-size: 0.875rem;
  padding: 0.75rem 1.6rem;
  transition: background 0.25s ease, border-color 0.25s ease;
}
.btn-ghost-light:hover,
.btn-ghost-light:focus-visible {
  background: rgba(236, 231, 218, 0.08);
  border-color: rgba(236, 231, 218, 0.6);
}

@media (prefers-reduced-motion: reduce) {
  .bars-list li,
  .bars-badge {
    transition: none;
  }
}

.panel-actions {
  display: flex;
  gap: 1rem;
  flex-wrap: nowrap;
  white-space: nowrap;
}
@media (max-width: 560px) {
  .panel-actions { flex-wrap: wrap; }
}

/* ============ Jewellery gallery (sticky left, scrolling right) ============ */

.section-gallery {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  background: var(--bone);
  color: var(--ink-dark);
  padding: 1rem;
}

.gallery-left img,
.gallery-left video {
  position: sticky;
  top: 1rem;
  width: 100%;
  height: calc(100vh - 2rem);
  object-fit: cover;
  display: block;
  border-radius: 14px;
}

.gallery-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}

.gallery-tile {
  display: block;
  text-decoration: none;
  color: var(--ink-dark);
}

.gallery-tile { cursor: pointer; }

.gallery-tile figure {
  position: relative;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border-radius: 14px;
}

.gallery-tile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.gallery-tile:hover img,
.gallery-tile:focus-visible img {
  transform: scale(1.05);
}

/* clickable cue: a gold "view" chip fades up on hover */
.gallery-tile figure::after {
  content: "View \2192";
  position: absolute;
  left: 1rem;
  bottom: 1rem;
  padding: 0.5rem 1rem;
  border-radius: 999px;
  font-family: var(--font-ui);
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink);
  background: rgba(20, 24, 15, 0.55);
  border: 1px solid rgba(224, 200, 130, 0.4);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.35s ease, transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
  pointer-events: none;
}
.gallery-tile:hover figure::after,
.gallery-tile:focus-visible figure::after {
  opacity: 1;
  transform: none;
}

.gallery-tile figcaption {
  font-family: var(--font-display);
  font-size: 1.1875rem;
  padding: 0.9rem 0.25rem 0;
  transition: color 0.3s ease;
}
.gallery-tile:hover figcaption { color: #a1793a; }

.gallery-tile figcaption em {
  font-style: italic;
  color: rgba(32, 37, 26, 0.6);
  margin-right: 0.35rem;
}

.gallery-text {
  text-align: center;
  padding: 6rem 2.5rem 7rem;
}

/* text block occupying a tile cell in the 2x2 gallery grid */
.gallery-text--cell {
  padding: 0.5rem 0.5rem 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.gallery-text--cell h2 {
  font-size: clamp(1.3rem, 1.7vw, 1.9rem);
  margin-bottom: 0.9rem;
}
.gallery-text--cell p {
  font-size: 1rem;
  line-height: 1.45;
  margin-bottom: 1.6rem;
}

.gallery-text h2 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.875rem, 2.8vw, 2.625rem);
  line-height: 1.15;
  margin-bottom: 1.5rem;
}

.gallery-text p {
  font-family: var(--font-display);
  font-size: 1.1875rem;
  line-height: 1.5;
  color: rgba(32, 37, 26, 0.72);
  max-width: 34ch;
  margin: 0 auto 2.5rem;
}

/* Compact intent icons under the gallery CTA */
.gallery-intents {
  margin-top: 4.5rem;
  padding-top: 3rem;
  border-top: 1px solid rgba(161, 121, 58, 0.2);
}

.intents-label {
  font-family: var(--font-ui);
  font-size: 0.6875rem;
  font-weight: 400;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #a1793a;
  margin-bottom: 2.25rem;
}

.intents-label em {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.5rem;
  letter-spacing: 0;
  text-transform: none;
  color: var(--ink-dark);
  display: block;
  margin-bottom: 0.4rem;
}

.intents-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2rem 1rem;
}

.intent-mini {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  text-decoration: none;
  color: var(--ink-dark);
  transition: transform 0.25s ease;
}

.intent-mini:hover,
.intent-mini:focus-visible {
  transform: translateY(-3px);
}

.intent-mini i {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  font-size: 1.5rem;
  color: #a1793a;
  border: 1px solid rgba(161, 121, 58, 0.22);
  border-radius: 50%;
  transition: border-color 0.25s ease, background 0.25s ease;
}

.intent-mini:hover i,
.intent-mini:focus-visible i {
  border-color: rgba(161, 121, 58, 0.5);
  background: rgba(161, 121, 58, 0.06);
}

.intent-mini span {
  font-family: var(--font-ui);
  font-size: 0.8125rem;
  letter-spacing: 0.03em;
  color: rgba(32, 37, 26, 0.75);
}

/* ============ Find by intent ============ */

.section-intent {
  background: var(--bone);
  color: var(--ink-dark);
  padding: 8rem var(--pad-x) 9rem;
}

.intent-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 2rem;
  margin-bottom: 3rem;
  max-width: 1400px;
  margin-left: auto;
  margin-right: auto;
}

.intent-label {
  font-family: var(--font-display);
  font-size: 1.0625rem;
  color: #a1793a;
  margin-bottom: 0.5rem;
}

.intent-label em {
  font-style: italic;
}

.intent-title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.875rem, 3.2vw, 2.75rem);
  line-height: 1.1;
}

.btn-ghost-dark {
  color: var(--ink-dark);
  border: 1px solid rgba(32, 37, 26, 0.35);
  white-space: nowrap;
}

.btn-ghost-dark:hover,
.btn-ghost-dark:focus-visible {
  border-color: #a1793a;
  color: #a1793a;
}

.intent-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
  max-width: 1400px;
  margin: 0 auto;
}

.intent-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.1rem;
  padding: 2.25rem 1rem;
  background: rgba(255, 255, 255, 0.45);
  border: 1px solid rgba(161, 121, 58, 0.16);
  text-decoration: none;
  color: var(--ink-dark);
  transition: border-color 0.25s ease, transform 0.25s ease;
}

.intent-tile:hover,
.intent-tile:focus-visible {
  border-color: rgba(161, 121, 58, 0.45);
  transform: translateY(-2px);
}

.intent-tile i {
  font-size: 1.875rem;
  color: #a1793a;
}

.intent-tile span {
  font-family: var(--font-display);
  font-size: 1.0625rem;
}

/* ============ Consult + efficacy cards ============ */

/* Full-bleed zigzag: content | image, then image | content */
/* ============ Consult + efficacy: chart hero over two offer cards ============ */

.section-consult {
  position: relative;
  /* NOT isolated: the floating leaf (z-index 1) must sit behind the cards
     (z-index 2) yet above the section's own ground, so cards join the page
     stacking context. Background is transparent — the after-scrolly cream
     sheet shows through, and the leaf floats over it, behind the cards. */
  padding: 0 var(--pad-x) clamp(2rem, 4vh, 3rem);
  background: transparent;
  color: #20251a;
}

/* the mandala, barely there */
.section-consult::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background: url("assets/stones-bg.jpg") center / cover no-repeat;
  opacity: 0.06;
  pointer-events: none;
}

/* The chart sets the stage's height and the heading is laid over it, so the
   arms run behind the type exactly as they do in the reference. */
.consult-stage {
  position: relative;
  z-index: 1;
}

.consult-head {
  position: relative;
  z-index: 3;
  text-align: center;
  padding: clamp(3.5rem, 8vh, 6rem) var(--pad-x) clamp(1.5rem, 3vh, 2.5rem);
}

/* the house eyebrow: display serif, italic fragments among roman caps, the
   same idiom as "the HOUSE of ASTROLAABH" */
.consult-eyebrow {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(0.9375rem, 1.1vw, 1.0625rem);
  line-height: 1.3;
  letter-spacing: 0.08em;
  color: #b68a57;
}
.consult-eyebrow em {
  font-style: italic;
  text-transform: none;
  letter-spacing: 0.02em;
}

.consult-head h2 {
  margin-top: clamp(1.5rem, 3vh, 2.5rem);
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(2.25rem, 3.9vw, 3.4rem);
  line-height: 1.06;
  letter-spacing: 0.01em;
  color: #20251a;
}
.consult-head h2 em {
  font-style: normal;
  color: #8a6a34;
}

/* The chart is the ground the offers stand on: it starts at the very top of
   the section and its foot is tucked under the cards. */
.consult-chart {
  position: relative;
  z-index: 1;
  display: block;
  width: min(1440px, 92%);
  max-width: none;
  /* nudged off centre: the paper's own centre sits left of the frame's, so
     centring the file leaves the composition looking pulled to the left */
  margin: 0 auto;
  left: 3%;
  pointer-events: none;
}

.consult-offers {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1rem, 1.6vw, 1.4rem);
  max-width: 1400px;
  margin: clamp(1rem, 2vh, 2rem) auto 0;
}

.offer {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  min-height: clamp(380px, 46vh, 500px);
  padding: clamp(1.6rem, 2.4vw, 2.55rem);
  /* 12px is the house corner — 25 read as a different family of card */
  border-radius: 12px;
  background: url("assets/offer-bg.webp") center / cover no-repeat, #fdf6df;
  overflow: hidden;
}
/* inset golden gradient frame — matches the carousel card */
.offer::after {
  content: "";
  position: absolute;
  inset: 14px;
  border-radius: 8px;
  padding: 1px;
  background: linear-gradient(135deg,
    rgba(201, 162, 75, 0.85) 0%,
    rgba(201, 162, 75, 0.12) 48%,
    rgba(220, 190, 110, 0.75) 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
  z-index: 3;
}

.offer-eyebrow {
  position: relative;
  z-index: 2;
  font-family: var(--font-ui);
  font-weight: 400;
  font-size: 0.75rem;
  line-height: 1.25;
  letter-spacing: 0.165em;
  text-transform: uppercase;
  color: #a68a4b;
}

.offer h3 {
  position: relative;
  z-index: 2;
  margin-top: 1rem;
  max-width: 20ch;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.6rem, 2.3vw, 2.25rem);
  line-height: 1.18;
  letter-spacing: -0.012em;
  color: rgba(12, 12, 12, 0.98);
}

.offer-body {
  position: relative;
  z-index: 2;
  margin-top: clamp(1.5rem, 3vh, 2.25rem);
  max-width: 21rem;
}
/* the check has no credentials to seat at the foot, so its copy follows the
   heading rather than being pushed to the bottom of the card */
#efficacy .offer-body {
  margin-top: 0;
  padding-top: clamp(1rem, 2vh, 1.5rem);
}

.offer-name {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.35rem, 1.85vw, 2rem);
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: #595236;
}

.offer-role {
  margin-top: 0.35rem;
  font-family: var(--font-ui);
  font-weight: 400;
  font-size: 0.75rem;
  line-height: 1.25;
  letter-spacing: 0.165em;
  text-transform: uppercase;
  color: #ad8424;
}

.offer-copy {
  margin-top: 0.75rem;
  font-family: var(--font-ui);
  font-weight: 300;
  font-size: 1rem;
  line-height: 1.45;
  color: #595236;
}
.offer-copy--lead { font-size: 1.125rem; }

.offer-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-top: 1.5rem;
}

.section-consult .btn-quiet {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.7rem 1.6rem;
  border: 1px solid rgba(17, 14, 5, 0.11);
  border-radius: 999px;
  background: rgba(236, 231, 218, 0.1);
  font-family: var(--font-ui);
  font-weight: 400;
  font-size: 0.875rem;
  line-height: 1.3;
  letter-spacing: 0.04em;
  color: #424242;
  text-decoration: none;
  white-space: nowrap;
  transition: background 0.3s ease, border-color 0.3s ease;
}
.section-consult .btn-quiet:hover {
  background: #fffdf6;
  border-color: rgba(161, 121, 58, 0.45);
}

.offer-badge {
  position: absolute;
  z-index: 3;
  top: clamp(1.4rem, 2vw, 1.6rem);
  right: clamp(1.6rem, 6vw, 8.5rem);
  padding: 0.35rem 0.9rem;
  border: 1px solid rgba(161, 121, 58, 0.3);
  border-radius: 999px;
  background: #fff;
  font-family: var(--font-ui);
  font-weight: 500;
  font-size: 0.6875rem;
  line-height: 1.27;
  letter-spacing: 0.06em;
  color: #a1793a;
  white-space: nowrap;
}

/* Each card's subject leans out past its right edge, with a blurred ghost of
   itself behind to seat it against the paper rather than cutting it out flat. */
/* Both photographs end at their own frame, so they are seated flush on the
   card's base: the card's own edge does the cutting, which reads as the
   crop it is rather than as an image floating short of the bottom. */
.offer-art {
  position: absolute;
  bottom: 0;
  z-index: 1;
  pointer-events: none;
}

/* Both subjects stay inside their card. Leaning them out past the edge only
   hands the card's own boundary the job of cutting them, which slices the
   figure and squares off the corner it was meant to round. */
.offer-art--person {
  /* landscape hands-holding-gem cutout — small, tucked in the lower-right */
  width: clamp(160px, 18vw, 260px);
  right: 0;
}

.offer-art--gem {
  /* the 1.2 scale-up applied to the width rather than as a transform, so the
     stone still grows from its corner and stays anchored inside the card */
  width: clamp(138px, 15.6vw, 234px);
  right: 0;
}

.consult-note {
  position: relative;
  z-index: 2;
  max-width: 62ch;
  margin: clamp(1.75rem, 3.5vh, 2.75rem) auto 0;
  text-align: center;
  font-family: var(--font-ui);
  font-weight: 300;
  font-size: 0.75rem;
  line-height: 1.6;
  color: rgba(32, 37, 26, 0.81);
}

@media (max-width: 980px) {
  .consult-offers { grid-template-columns: 1fr; }
  /* on one column the chart has no width to spare, so it stops reaching up
     under the heading and simply sits below it */
  .consult-chart { width: 150%; margin-left: -25%; }
  .consult-offers { margin-top: clamp(-6rem, -14vw, -2rem); }
  .consult-head { top: 1.5rem; }
  /* on one column the heading lands on the busiest part of the chart, so it
     gets a wash of the ground behind it to stay readable */
  .consult-head::before {
    content: "";
    position: absolute;
    inset: -2.5rem -1rem -2rem;
    z-index: -1;
    background: radial-gradient(
      ellipse 78% 62% at 50% 50%,
      rgba(251, 250, 247, 0.97) 0%,
      rgba(251, 250, 247, 0.93) 52%,
      rgba(251, 250, 247, 0) 100%
    );
  }
  .offer { min-height: 340px; }
  .offer-art--person { width: 190px; }
  .offer-art--gem { width: 156px; }
  .offer-badge { right: 1.25rem; }
  .offer h3, .offer-body { max-width: 60%; }
}

/* ============ Four bars every stone must clear ============ */

.section-bars {
  background: var(--bone);
  color: var(--ink-dark);
  padding: 6rem var(--pad-x) 8rem;
  max-width: 1400px;
  margin: 0 auto;
}

.bars-title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(2rem, 4vw, 3.25rem);
  line-height: 1.1;
  margin-bottom: 3rem;
}

.bars-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border: 1px solid rgba(161, 121, 58, 0.24);
}

.bar-cell {
  padding: 2.5rem 2rem 2.75rem;
}

.bar-cell + .bar-cell {
  border-left: 1px solid rgba(161, 121, 58, 0.24);
}

.bar-num {
  font-family: var(--font-ui);
  font-size: 0.8125rem;
  letter-spacing: 0.14em;
  color: #a1793a;
}

.bar-cell h3 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1.5rem;
  margin: 1.5rem 0 1rem;
}

.bar-cell p {
  font-family: var(--font-ui);
  font-weight: 300;
  font-size: 1rem;
  line-height: 1.6;
  color: rgba(32, 37, 26, 0.72);
}

.bar-tag {
  margin-top: 1.5rem;
  font-family: var(--font-ui);
  font-size: 0.6875rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #a1793a !important;
}

/* ============ Stone collection (parallax masonry) ============ */

.section-stones {
  position: relative;
  z-index: 1;
  /* photographic ground behind the cards (was a flat sage fill) */
  background: url("assets/consult-card-bg.jpg") center / cover no-repeat;
  color: #fff;
  padding: clamp(5rem, 10vh, 7.5rem) 0 clamp(5.5rem, 11vh, 8rem);
  isolation: isolate;
}

.section-stones::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url("assets/stones-bg.jpg") center / cover no-repeat;
  opacity: 0.22;
  pointer-events: none;
}

.stones-head {
  /* the mandala layer is positioned, so it paints over anything in normal
     flow: without this the heading sits under it and washes out */
  position: relative;
  z-index: 1;
  max-width: 1400px;
  margin: 0 auto 1.5rem;
  padding: 0 var(--pad-x);
  text-align: center;
  flex: 0 0 auto;
}

.stones-head h2 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(2.5rem, 4.4vw, 4rem);
  line-height: 1.02;
  letter-spacing: 0.0125em;
  color: #ffffff;
}

.stones-head em {
  font-style: italic;
  text-transform: none;
}

/* Gold rule with a lozenge at its centre, under the heading */
.stones-orn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  width: min(564px, 70%);
  margin: 1.4rem auto 0;
}

.orn-line {
  flex: 1 1 auto;
  height: 1px;
  background: linear-gradient(90deg, rgba(195, 160, 88, 0) 0%, #c3a058 100%);
}
.orn-line:last-child {
  background: linear-gradient(90deg, #c3a058 0%, rgba(195, 160, 88, 0) 100%);
}

.orn-dot {
  flex: 0 0 auto;
  width: 6px;
  height: 6px;
  background: #b08a3c;
  transform: rotate(45deg);
}

/* ---- 3D coverflow carousel (CSS 3D + vanilla JS) ---- */

.gem-carousel {
  position: relative;
  width: 100%;
  /* full-bleed on purpose: the clip edge is the window, so the side cards
     run off the screen rather than being sliced mid-card by a padded box */
  align-self: stretch;
  flex: 0 0 auto;
  margin: 0 auto;
  box-sizing: border-box;
}

.gcar-viewport {
  width: 100%;
  padding: 2.5rem 0;
  /* Clip sideways only. Perspective makes the rotated card taller than a flat
     one, so a plain overflow: hidden shears its top and foot off. */
  overflow-x: clip;
  overflow-y: visible;
}

/* Safari < 16 and other engines without overflow: clip fall back to hidden,
   so give them the headroom instead of a crop */
@supports not (overflow: clip) {
  .gcar-viewport {
    padding: 6rem 0 6.5rem;
    overflow: hidden;
  }
}

.gcar-track {
  position: relative;
  transition: transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform;
}
.gcar-track::after { content: ""; display: block; clear: both; }

.gcar-item {
  position: relative;
  display: block;
  float: left;
  box-sizing: border-box;
  margin: 0;   /* JS centres each card in its slot */
  /* a wide card swings a long way toward the viewer when it turns, so the
     vanishing point sits further back than a portrait card would need */
  perspective: 2200px;
}

.gcar-frame {
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  transition: transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);
}

/* Contact shadow under the card. A rotated, spread box-shadow reads as a grey
   slab lying on the floor — this is a soft ellipse instead. */
.gcar-frame::after {
  content: "";
  position: absolute;
  left: 8%;
  right: 8%;
  bottom: -24px;
  height: 44px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.45);
  filter: blur(26px);
  transform: translateZ(-2px);
  opacity: 0.55;
}

.gcar-face {
  position: absolute;
  box-sizing: border-box;
  border: 1px solid rgba(201, 162, 75, 0.24);
  background: #fef8ea;
  border-radius: 24px;
}

.gcar-face--front {
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: row;
  align-items: stretch;
  gap: clamp(1.25rem, 2.6vw, 3rem);
  overflow: hidden;
  padding: clamp(1.1rem, 2vw, 2rem) clamp(1.4rem, 2.4vw, 2.25rem);
  border-radius: 24px;
  text-decoration: none;
  color: #20251a;
  box-shadow: 0 36px 82px rgba(0, 0, 0, 0.3);
}

/* The paper grain is a blended layer, not a flat background fill: laid over
   the cream at 40% it darkens the sheet where the fibres are, so the card
   reads as stock with a tooth rather than a photo of paper. */
.gcar-face--front::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: inherit;
  background: url("assets/card-paper.jpg") center / cover no-repeat;
  mix-blend-mode: multiply;
  opacity: 0.4;
  pointer-events: none;
}
@supports (mix-blend-mode: plus-darker) {
  .gcar-face--front::before { mix-blend-mode: plus-darker; }
}

/* the grain sits behind the content: these are positioned, and later in the
   DOM, so they paint over it */
.gcar-gemcol,
.gcar-seam,
.gcar-body { position: relative; z-index: 1; }

/* The two depth panels that give the card its 3D thickness */
.gcar-face--left,
.gcar-face--right {
  top: 0;
  bottom: 0;
  width: 26px;
  backface-visibility: hidden;
}
.gcar-face--left {
  left: 0;
  transform: translate3d(1px, 0, -26px) rotateY(-90deg);
  transform-origin: 0% 50%;
}
.gcar-face--right {
  right: 0;
  transform: translate3d(-1px, 0, -26px) rotateY(90deg);
  transform-origin: 100% 50%;
}

/* The gem's own column. Without it the square plate below sits hard against
   the card's padding and reads left of centre, since the space it is meant to
   occupy runs all the way to the seam. */
.gcar-gemcol {
  position: relative;
  flex: 0 0 34%;
  align-self: stretch;
  display: flex;
  align-items: center;
  justify-content: center;
}
/* soft light behind the stone — reads as a spotlit museum plinth */
.gcar-gemcol::before {
  content: "";
  position: absolute;
  width: 82%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle,
    rgba(255, 248, 227, 0.95) 0%, rgba(255, 244, 214, 0.5) 34%,
    rgba(255, 244, 214, 0) 66%);
  z-index: 0;
  pointer-events: none;
}
.gcar-gem { position: relative; z-index: 1; }

.gcar-gem {
  display: block;
  flex: 0 0 auto;
  width: 100%;
  /* square box so the quarter turn below cannot change the footprint */
  aspect-ratio: 1;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  /* the cuts are photographed lying down; stand them up */
  transform: rotate(90deg);
  /* Pre-rotation offsets, so the shadow still falls down-right once turned.
     The colour is the stone's own, set per card — a ruby throws a red shadow,
     an emerald a green one; one hardcoded red tinted every gem alike. */
  filter: drop-shadow(20px -6px 32px var(--gem-shadow, rgba(32, 37, 26, 0.42)));
  transition: transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);
}
.gcar-item--active .gcar-gem { transform: rotate(90deg) scale(1.04); }

/* Vertical twin of the heading ornament, dividing gem from text */
.gcar-seam {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  margin: 1.75rem 0;
}
.gcar-seam-line {
  flex: 1 1 auto;
  width: 1px;
  background: linear-gradient(180deg, rgba(195, 160, 88, 0) 0%, #c3a058 100%);
}
.gcar-seam-line:last-child {
  background: linear-gradient(180deg, #c3a058 0%, rgba(195, 160, 88, 0) 100%);
}
.gcar-seam-dot {
  flex: 0 0 auto;
  width: 6px;
  height: 6px;
  background: #b08a3c;
  transform: rotate(45deg);
}

.gcar-body {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.9rem;
}

/* eyebrow (planet) sits ABOVE the name, editorial-style */
.gcar-title {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.4rem;
}

.gcar-name {
  order: 2;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.7rem, 2.8vw, 2.9rem);
  line-height: 1.02;
  letter-spacing: -0.015em;
  color: #20251a;
}

.gcar-sub {
  order: 1;
  font-family: var(--font-ui);
  font-weight: 500;
  font-size: clamp(0.6rem, 0.8vw, 0.78rem);
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: #a1793a;
  white-space: nowrap;
}
.gcar-glyph { letter-spacing: 0; font-size: 1.1em; }

.gcar-rule {
  order: 3;
  display: block;
  width: 44px;
  height: 2px;
  margin: 0.5rem 0 0.2rem;
  background: linear-gradient(90deg, #c9a24b, rgba(201, 162, 75, 0));
}

.gcar-detail {
  display: grid;
  gap: clamp(0.9rem, 1.6vh, 1.35rem);
  opacity: 0;
  transition: opacity 0.5s ease;
}
.gcar-item--active .gcar-detail { opacity: 1; }

.gcar-row {
  display: grid;
  grid-template-columns: clamp(4.6rem, 7vw, 7rem) 1fr;
  gap: 1.1rem;
  align-items: start;
}

.gcar-key {
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: clamp(0.62rem, 0.82vw, 0.78rem);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(32, 37, 26, 0.38);
  padding-top: 0.28rem;
}

.gcar-val {
  font-family: var(--font-display);
  font-size: clamp(1rem, 1.35vw, 1.42rem);
  line-height: 1.32;
  color: #20251a;
}
/* the long "why" reads as refined sans body, a deliberate contrast to the
   serif answers above it */
.gcar-row:last-child .gcar-val {
  font-family: var(--font-ui);
  font-weight: 300;
  font-size: clamp(0.82rem, 1vw, 0.98rem);
  line-height: 1.6;
  color: rgba(32, 37, 26, 0.72);
}

/* Pinned to the base of the card, above a hairline */
.gcar-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-top: auto;
  padding-top: 1.1rem;
  border-top: 1px solid rgba(161, 121, 58, 0.22);
  opacity: 0;
  transition: opacity 0.5s ease;
}
.gcar-item--active .gcar-foot { opacity: 1; }

.gcar-price {
  font-family: var(--font-ui);
  font-variant-numeric: lining-nums tabular-nums;
  font-feature-settings: "lnum" 1, "tnum" 1;
  font-weight: 500;
  font-size: clamp(1rem, 1.35vw, 1.55rem);
  letter-spacing: 0.01em;
  color: #20251a;
  white-space: nowrap;
}

.gcar-actions {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
}
.gcar-btn {
  font-family: var(--font-ui);
  font-weight: 500;
  font-size: clamp(0.72rem, 0.85vw, 0.86rem);
  letter-spacing: 0.01em;
  padding: 0.52rem 1.15rem;
  border-radius: 999px;
  white-space: nowrap;
  transition: background 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}
.gcar-btn--buy {
  background: url("assets/consult-card-bg.jpg") center / cover;
  color: #fff;
  border: 1px solid rgba(58, 64, 44, 0.75);
}
.gcar-btn--more {
  background: transparent;
  color: #20251a;
  border: 1px solid rgba(32, 37, 26, 0.28);
}
.gcar-face--front:hover .gcar-btn--buy { background: linear-gradient(rgba(0,0,0,0.22), rgba(0,0,0,0.22)), url("assets/consult-card-bg.jpg") center / cover; border-color: #6f7d5c; }
.gcar-face--front:hover .gcar-btn--more { border-color: rgba(32, 37, 26, 0.5); }

/* Diamond indicators: one per stone, the live one struck in gold */
.gcar-dots {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.9rem;
  margin-top: clamp(1.5rem, 3vh, 2.5rem);
}

.gcar-dot {
  width: 10px;
  height: 10px;
  padding: 0;
  border: 0;
  background: rgba(255, 255, 255, 0.26);
  transform: rotate(45deg);
  cursor: pointer;
  transition: background 0.3s ease, transform 0.3s ease;
}
.gcar-dot:hover { background: rgba(255, 255, 255, 0.45); }
.gcar-dot[aria-selected="true"] {
  background: #b08a3c;
  transform: rotate(45deg) scale(1.1);
}

/* tertiary pill under the dots — subtle transparent white, on the dark section */
.gcar-explore {
  position: relative;
  z-index: 1;
  display: block;
  width: -moz-fit-content;
  width: fit-content;
  margin: clamp(1.1rem, 2.4vh, 1.7rem) auto 0;
  padding: 0.62rem 1.5rem;
  border-radius: 999px;
  font-family: var(--font-ui);
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  text-decoration: none;
  color: rgba(255, 255, 255, 0.72);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.18);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  transition: color 0.3s ease, background 0.3s ease, border-color 0.3s ease;
}
.gcar-explore:hover,
.gcar-explore:focus-visible {
  color: #fff;
  background: rgba(255, 255, 255, 0.09);
  border-color: rgba(255, 255, 255, 0.4);
}

.gcar-nav[disabled] {
  opacity: 0.25;
  pointer-events: none;
}

/* Arrows sit in the gap between the centre card and its neighbours */
.gcar-nav {
  position: absolute;
  top: 50%;
  z-index: 5;
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  padding: 0;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.16);
  background: rgba(255, 255, 255, 0.16);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  cursor: pointer;
  transition: background 0.25s ease, transform 0.25s ease;
}
.gcar-nav svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: #ffffff;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.gcar-prev {
  left: var(--gcar-nav-x, 12%);
  transform: translate(-50%, -50%);
}
.gcar-next {
  right: var(--gcar-nav-x, 12%);
  transform: translate(50%, -50%);
}
.gcar-prev:hover { background: rgba(255, 255, 255, 0.28); transform: translate(-50%, -50%) scale(1.08); }
.gcar-next:hover { background: rgba(255, 255, 255, 0.28); transform: translate(50%, -50%) scale(1.08); }

/* Short windows: the card keeps every row, but at a tighter scale. The heading
   and the track give up their air first, so the title is never what goes. */
.gcar--compact .stones-head { margin-bottom: 0.75rem; }
.gcar--compact .stones-head h2 { font-size: clamp(2.1rem, 3.6vw, 3rem); }
.gcar--compact .stones-orn { margin-top: 0.9rem; }
.gcar--compact .gcar-viewport { padding: 1.25rem 0; }
.gcar--compact .gcar-body { gap: 0.65rem; }
.gcar--compact .gcar-detail { gap: 0.6rem; }
.gcar--compact .gcar-foot { padding-top: 0.75rem; }

@media (max-width: 860px) {
  /* no room for the gem beside the text — stack them */
  .gcar-face--front { flex-direction: column; align-items: stretch; gap: 0.9rem; }
  .gcar-gemcol { flex: 0 0 auto; height: 30vh; }
  .gcar-gem { width: auto; height: 100%; }
  .gcar-seam { display: none; }
  .gcar-row { grid-template-columns: 4rem 1fr; }
  .gcar-nav { width: 40px; height: 40px; }
}

@media (prefers-reduced-motion: reduce) {
  .gcar-track, .gcar-frame, .gcar-gem, .gcar-detail, .gcar-foot { transition: none; }
}

/* Floating CTA: JS pins it fixed at viewport centre while the section is in
   view (robust against overflow ancestors that break position: sticky). */
.stones-cta-float {
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 20;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.35s ease;
}

.stones-cta-float.is-active {
  opacity: 1;
  pointer-events: auto;
}

.stones-cta-float .btn {
  background: rgba(241, 239, 232, 0.92);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  box-shadow: 0 18px 50px rgba(32, 37, 26, 0.15);
}

/* ============ Kinetic type + 3D stone ============ */

.section-kinetic {
  position: relative;
  height: 320vh;
  background: var(--bone);
  color: var(--ink-dark);
  isolation: isolate;
}

.kinetic-sticky {
  position: sticky;
  top: 0;
  height: 100dvh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: var(--bone);
}

/* Words flank a centre gap where the 3D stone lives */
.kinetic-grid {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  column-gap: clamp(1.5rem, 4vw, 5rem);
  width: 100%;
}

.kcol {
  display: flex;
  flex-direction: column;
  gap: 0.05em;
}

.kcol-left { text-align: right; }
.kcol-right { text-align: left; }

.krow {
  display: block;
  white-space: nowrap;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.75rem, 4.8vw, 5.25rem);
  line-height: 1.05;
  letter-spacing: -0.015em;
  color: var(--ink-dark);
  will-change: transform;
}

.kcol-mid {
  width: min(38vh, 400px);
  aspect-ratio: 1;
  flex: none;
}

/* Gem sequence: travels top -> bottom through the words on scroll */
.kinetic-stone {
  position: absolute;
  left: 50%;
  top: 0;
  width: min(32vh, 340px);
  height: auto;
  aspect-ratio: 932 / 984;
  transform: translate(-50%, 0);
  z-index: 2;
  pointer-events: none;
  will-change: transform;
  filter: drop-shadow(0 18px 34px rgba(90, 70, 20, 0.28));
}

.kinetic-attr {
  position: absolute;
  bottom: 6vh;
  left: 50%;
  transform: translateX(-50%);
  z-index: 3;
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(1rem, 1.6vw, 1.375rem);
  color: rgba(32, 37, 26, 0.6);
}

/* ============ Statement band ============ */

.section-statement {
  background: var(--bone);
  color: var(--ink-dark);
  text-align: center;
  padding: 12vh var(--pad-x);
}

.section-statement h2 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(2.75rem, 6vw, 5.25rem);
  line-height: 1.05;
  letter-spacing: 0.01em;
  margin-bottom: 1.25rem;
}

.section-statement h2 em {
  font-style: italic;
  color: var(--ink-dark);
}

.section-statement p {
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 2vw, 1.75rem);
  font-style: italic;
  color: rgba(32, 37, 26, 0.7);
}

/* ============ Reaction statement band ============ */

.section-reaction {
  background: var(--bone);
  color: var(--ink-dark);
  text-align: center;
  padding: clamp(8rem, 20vh, 12rem) var(--pad-x);
}

.section-reaction p {
  font-family: var(--font-display);
  font-weight: 500;
  font-style: italic;
  font-size: clamp(1.875rem, 3.6vw, 3.25rem);
  line-height: 1.25;
  max-width: 26ch;
  margin: 0 auto;
}

.section-reaction span {
  display: inline-block;
  margin-top: 0.5em;
  font-style: normal;
  font-size: 0.62em;
  letter-spacing: 0.02em;
  color: #a1793a;
}

/* ============ Backed by / Trusted by ============ */

.section-trust {
  position: relative;
  background: transparent;
  color: #ece7da;
  padding: clamp(5rem, 9vh, 7rem) var(--pad-x) clamp(5.5rem, 10vh, 7.5rem);
  max-width: 1400px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: clamp(2rem, 5vw, 5rem);
  align-items: end;
}
/* full-bleed dark ground: the card texture washed with a cinematic scrim */
/* ::after, not ::before — the .after-scrolly hairline in scrolly.css claims
   ::before and (loading later) would collapse this to a 1px strip. */
.section-trust::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100vw;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(120% 100% at 20% 40%, rgba(20, 24, 14, 0.42), rgba(14, 17, 9, 0.82)),
    url("assets/consult-card-bg.jpg") center / cover no-repeat;
}
/* keep all copy + portraits above the full-bleed image */
.section-trust > * { position: relative; z-index: 1; }

.trust-left {
  padding-bottom: 0.5rem;
}

.trust-left h2 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(2.5rem, 4.8vw, 4.25rem);
  line-height: 1.06;
  letter-spacing: -0.005em;
  max-width: 14ch;
}
.trust-left h2 { color: #f3f1ea; }
.trust-left h2 em {
  font-style: italic;
  color: rgba(243, 241, 234, 0.55);
}

.trust-sub {
  font-family: var(--font-ui);
  font-style: normal;
  font-weight: 300;
  font-size: 15px;
  line-height: 1.6;
  color: rgba(236, 231, 218, 0.72);
  max-width: 40ch;
  margin-top: 1.75rem;
  padding-top: 1.75rem;
  border-top: 1px solid rgba(220, 190, 110, 0.28);
}

/* Expanding investor columns */
.investors {
  display: flex;
  gap: 0.75rem;
  height: clamp(420px, 56vh, 560px);
}

.investor {
  position: relative;
  flex: 1 1 0%;
  overflow: hidden;
  border-radius: 12px;
  border: 1px solid rgba(201, 162, 75, 0.28);
  text-decoration: none;
  transition: flex-grow 0.65s cubic-bezier(0.16, 1, 0.3, 1);
}

.investors:has(.investor:hover) .investor:not(:hover) { flex-grow: 0.55; }
.investor:hover { flex-grow: 3.2; }

.investor-photo {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(rgba(23, 30, 18, 0.35), rgba(23, 30, 18, 0.72)),
    url("assets/card-texture.jpg") center / cover no-repeat;
  background-size: cover;
  background-repeat: no-repeat;
  transition: filter 0.65s cubic-bezier(0.16, 1, 0.3, 1);
  filter: grayscale(1) brightness(0.92);
}

/* Hovered column widens and reveals the full portrait in colour */
.investor:hover .investor-photo {
  filter: grayscale(0) brightness(1.02);
}

/* Monogram placeholder until real portraits are dropped in */
.investor-photo::after {
  content: attr(data-mono);
  position: absolute;
  top: 42%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-family: var(--font-display);
  font-size: clamp(2rem, 4vw, 3.25rem);
  color: rgba(220, 185, 104, 0.85);
  letter-spacing: 0.05em;
}

.investor-meta {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
  padding: 1.5rem 1.35rem;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  background: linear-gradient(to top, rgba(10, 13, 7, 0.75), rgba(10, 13, 7, 0));
}

.investor-role {
  font-family: var(--font-ui);
  font-size: 0.625rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.62);
  white-space: nowrap;
}

.investor-name {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1.375rem;
  color: var(--ink);
  white-space: nowrap;
}

.trust-label {
  font-family: var(--font-ui);
  font-size: 0.75rem;
  font-weight: 400;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--gold-bright, #dcb968);
  margin-bottom: 1.25rem;
  display: flex;
  align-items: center;
  gap: 0.9rem;
}

.trust-label::before {
  content: "";
  width: 1.75rem;
  height: 1px;
  background: rgba(220, 190, 110, 0.6);
}

.trust-label em {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.0625rem;
  letter-spacing: 0.01em;
  text-transform: none;
}

.trust-block h2 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(2rem, 4vw, 3.25rem);
  line-height: 1.1;
  margin-bottom: 2.75rem;
}

.trust-grid {
  display: grid;
  border: 1px solid rgba(161, 121, 58, 0.24);
}

.trust-backers { grid-template-columns: repeat(3, 1fr); }
.trust-stats { grid-template-columns: repeat(4, 1fr); }

.trust-cell {
  padding: 2.5rem 2rem;
}

.trust-backers .trust-cell + .trust-cell,
.trust-stats .trust-cell + .trust-cell {
  border-left: 1px solid rgba(161, 121, 58, 0.24);
}

.cell-role {
  font-family: var(--font-ui);
  font-size: 0.6875rem;
  font-weight: 400;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(32, 37, 26, 0.55);
  margin-bottom: 1.25rem;
}

.cell-name {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1.5rem;
}

.trust-stats .trust-cell {
  text-align: center;
  padding: 3rem 1.5rem;
}

.cell-value {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(2.25rem, 3.4vw, 3.25rem);
  color: #a1793a;
  line-height: 1;
  margin-bottom: 1rem;
}

.cell-caption {
  font-family: var(--font-ui);
  font-size: 0.75rem;
  font-weight: 400;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  line-height: 1.5;
  color: rgba(32, 37, 26, 0.6);
}

.trust-note {
  font-family: var(--font-ui);
  font-size: 0.8125rem;
  font-style: italic;
  color: rgba(32, 37, 26, 0.5);
  margin-top: 1.25rem;
}

.trust-tagline {
  text-align: center;
  margin-top: 5.5rem;
}

.trust-tagline h3 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.75rem, 3.2vw, 2.75rem);
  line-height: 1.15;
  margin-bottom: 0.5rem;
}

.trust-tagline p {
  font-family: var(--font-display);
  font-size: 1.25rem;
  color: rgba(32, 37, 26, 0.72);
}

.trust-tagline em { font-style: italic; }

/* ============ Testimonials ============ */

/* Stories: minimal editorial carousel, grayscale imagery, arrow nav */
.section-testimonials {
  background: var(--bone);
  color: var(--ink-dark);
  padding: clamp(5rem, 10vh, 8rem) 0 clamp(5rem, 10vh, 8rem) var(--pad-x);
  overflow: hidden;
  position: relative;
}
/* hairline divider from the trust section above (inset from the edges) */
.section-testimonials::before {
  content: "";
  position: absolute;
  top: 0;
  left: var(--pad-x);
  right: var(--pad-x);
  height: 1px;
  background: rgba(32, 37, 26, 0.12);
}

.stories-head {
  position: relative;
  max-width: 1400px;
  margin: 0 auto 3.5rem;
  padding: 0 var(--pad-x) 2.25rem 0;
  text-align: center;
  border-bottom: 1px solid rgba(161, 121, 58, 0.2);
}
.stories-head h2 { margin: 0 auto; }
.stories-label { display: inline-block; }

.stories-nav {
  position: absolute;
  right: var(--pad-x);
  bottom: 2.25rem;
}

.stories-label {
  font-family: var(--font-ui);
  font-size: 0.75rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: #a1793a;
  margin-bottom: 1rem;
}
.stories-label em {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.0625rem;
  letter-spacing: 0.01em;
  text-transform: none;
}

.stories-head h2 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(2.25rem, 4.5vw, 4rem);
  line-height: 1.08;
  max-width: 16ch;
}
.stories-head h2 em { font-style: italic; }

.stories-nav {
  display: flex;
  gap: 0.6rem;
  flex: none;
}
.stories-arrow {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  border: 1px solid rgba(32, 37, 26, 0.2);
  background: none;
  color: var(--ink-dark);
  font-size: 1.15rem;
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: background 0.25s ease, border-color 0.25s ease,
    color 0.25s ease, opacity 0.25s ease;
}
.stories-arrow:hover {
  background: var(--ink-dark);
  border-color: var(--ink-dark);
  color: var(--bone);
}
.stories-arrow[disabled] { opacity: 0.3; cursor: default; }
.stories-arrow[disabled]:hover {
  background: none;
  color: var(--ink-dark);
  border-color: rgba(32, 37, 26, 0.2);
}

/* Horizontal snap track */
.stories-track {
  display: flex;
  gap: clamp(1.5rem, 3vw, 3rem);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  padding-bottom: 1rem;
  scrollbar-width: none;
}
.stories-track::-webkit-scrollbar { display: none; }

.story {
  flex: 0 0 clamp(300px, 30vw, 400px);
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
}

.story-media {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  margin-bottom: 1.75rem;
  background: #dcd8cd;
  border: 1px solid rgba(161, 121, 58, 0.22);
}
.story-media.tall { aspect-ratio: 3 / 4; }
.story-media video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: grayscale(1) contrast(1.03);
  transform: scale(1.02);
  transition: filter 0.7s ease, transform 0.9s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.story:hover .story-media video {
  filter: grayscale(0);
  transform: scale(1.07);
}
/* editorial index — awwwards-style corner numeral */
.story-no {
  position: absolute;
  top: 0.9rem;
  left: 1rem;
  z-index: 2;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.15rem;
  color: rgba(255, 255, 255, 0.92);
  mix-blend-mode: difference;
  letter-spacing: 0.02em;
}

.story-meta {
  font-family: var(--font-ui);
  font-size: 0.6875rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(32, 37, 26, 0.5);
  margin-bottom: 0.85rem;
}

.story h3 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.375rem, 2vw, 1.75rem);
  line-height: 1.2;
  margin-bottom: 0.85rem;
}

.story-body {
  font-family: var(--font-ui);
  font-weight: 300;
  font-size: 0.9375rem;
  line-height: 1.6;
  color: rgba(32, 37, 26, 0.68);
  margin-bottom: 1.5rem;
}

.story-by {
  margin-top: auto;
  padding-top: 1.25rem;
  border-top: 1px solid rgba(32, 37, 26, 0.12);
}
.story-by strong {
  display: block;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1.0625rem;
  color: var(--ink-dark);
}
.story-by span {
  font-family: var(--font-ui);
  font-weight: 300;
  font-size: 0.8125rem;
  color: rgba(32, 37, 26, 0.55);
}

/* Cursor-following arrow over the track */
@media (hover: hover) and (pointer: fine) {
  .stories-track { cursor: none; }
}
.stories-cursor {
  position: fixed;
  z-index: 95;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: var(--ink-dark);
  color: var(--bone);
  display: grid;
  place-items: center;
  font-size: 1.25rem;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transform: translate(-50%, -50%) scale(0.4);
  transition: opacity 0.25s ease, transform 0.25s cubic-bezier(0.16, 1, 0.3, 1),
    visibility 0.25s;
}
.stories-cursor.show {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, -50%) scale(1);
}
.stories-cursor.flip i { transform: scaleX(-1); }
.stories-cursor.dead { opacity: 0.35; }

@media (max-width: 640px) {
  .story { flex-basis: 78vw; }
  .stories-nav { display: none; }
}

/* ============ Responsive ============ */

@media (max-width: 900px) {
  .nav-links, .nav-cta { display: none; }

  .nav-toggle {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-left: auto;
    background: none;
    border: none;
    padding: 8px;
    cursor: pointer;
  }
  .nav-toggle span {
    width: 24px;
    height: 1.5px;
    background: var(--ink);
  }

  .hero-content {
    padding: var(--nav-h) 1.25rem 0;
  }

  .nav-logo img { height: 52px; }

  .house-alt2 {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }

  .house-alt2::before,
  .house-alt2::after { display: none; }

  .compare-col { padding: 0; }

  .compare-us { padding: clamp(6rem, 30vw, 8rem) 1.75rem 2rem; }

  .compare-col h3 {
    margin-bottom: 1rem;
    min-height: 0;
  }

  .compare-col li {
    font-size: 0.9375rem;
    padding: 0.7rem 0 0.7rem 1.6rem;
  }

  .compare-col li::before { top: 0.7rem; }

  .section-trust { grid-template-columns: 1fr; gap: 2.5rem; }
  .investors { height: 380px; }
  .investor-name { font-size: 1.125rem; }

  .trust-backers { grid-template-columns: 1fr; }
  .trust-stats { grid-template-columns: repeat(2, 1fr); }

  .trust-backers .trust-cell + .trust-cell {
    border-left: none;
    border-top: 1px solid rgba(161, 121, 58, 0.24);
  }

  .trust-stats .trust-cell {
    border-top: 1px solid rgba(161, 121, 58, 0.24);
  }
  .trust-stats .trust-cell:nth-child(odd) {
    border-left: none;
  }

  .stories-head { flex-direction: column; align-items: flex-start; }

  .section-consult { grid-template-columns: 1fr; }
  .consult-media { min-height: 320px; }
  .consult-card { min-height: 0; }

  .consult-card { padding: 2rem 1.5rem; }

  .consult-person { flex-direction: column; }

  .section-gallery { grid-template-columns: 1fr; }

  .gallery-left img,
  .gallery-left video {
    position: static;
    height: 60vh;
  }

  .gallery-text { padding: 3.5rem 1.25rem 4rem; }

  .stones-columns { grid-template-columns: repeat(2, 1fr); }
  .bars-list { grid-template-columns: repeat(2, 1fr); row-gap: clamp(1.5rem, 4vh, 2.5rem); }
  /* on two columns, only the left cell of each row draws no divider */
  .bars-list li:nth-child(odd)::before { display: none; }

  .intent-grid { grid-template-columns: repeat(2, 1fr); }

  .intent-head { flex-direction: column; align-items: flex-start; }

  .essence-panel {
    right: 1.25rem;
    width: min(80vw, 360px);
  }

  .hero-tagline { margin-bottom: 2.25rem; }

  .btn {
    padding: 0.85rem 1.7rem;
    font-size: 0.875rem;
  }
}

/* ============ Comparison: 4 points highlighted on scroll ============ */
.section-compare {
  position: relative;
  background: var(--bone);
  color: var(--ink-dark);
}
/* self-playing accordion: no scroll-pinning — a normal, padded block */
.compare-sticky {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: stretch;
  padding: clamp(4rem, 10vh, 7rem) var(--pad-x);
}

/* top bar: heading left, CTAs right */
.compare-topbar {
  width: min(1200px, 100%);
  margin: 0 auto clamp(2rem, 5vh, 3.25rem);
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 2rem;
  flex-wrap: wrap;
}
.compare-topbar .compare-ctas {
  display: flex;
  gap: 0.8rem;
  flex-wrap: wrap;
  padding-top: 0.75rem;
}
.compare-head { text-align: center; margin-bottom: clamp(2rem, 5vh, 3.5rem); }
.compare-eyebrow {
  font-family: var(--font-ui);
  font-size: 0.75rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: #a1793a;
  margin-bottom: 1rem;
}
.compare-eyebrow em {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.0625rem;
  letter-spacing: 0.01em;
  text-transform: none;
}
.compare-heading {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.85rem, 3.4vw, 3rem);
  line-height: 1.1;
  text-align: left;
  margin: 0;
  white-space: nowrap; /* each sentence on its own line via the <br> */
}
@media (max-width: 620px) {
  .compare-heading { white-space: normal; font-size: clamp(1.75rem, 7vw, 2.25rem); }
}
.compare-heading em { font-style: italic; color: rgba(32, 37, 26, 0.55); }

.compare-board { width: min(1200px, 100%); margin: 0 auto; }

/* two panels: accordion left, image right */
.compare-split {
  display: grid;
  grid-template-columns: 1.25fr 0.75fr;
  gap: clamp(2rem, 4vw, 4rem);
  align-items: center;
}
.compare-main { min-width: 0; }

/* right visual panel: images crossfade with the active entry */
.compare-visual {
  position: relative;
  width: 100%;
  max-width: 380px;
  justify-self: end;
  aspect-ratio: 4 / 5;
  max-height: 54vh;
  border-radius: 18px;
  overflow: hidden;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.14),
    0 40px 80px -34px rgba(32, 37, 26, 0.55);
}
.compare-visual::after {
  content: "";
  position: absolute;
  inset: 10px;
  border: 1px solid rgba(236, 231, 218, 0.28);
  border-radius: 11px;
  pointer-events: none;
  z-index: 2;
}
.compare-visual figure {
  position: absolute;
  inset: 0;
  margin: 0;
  opacity: 0;
  transition: opacity 0.9s ease;
}
.compare-visual figure.is-active { opacity: 1; }
.compare-visual img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transform: scale(1.06);
  transition: transform 6s cubic-bezier(0.16, 1, 0.3, 1);
}
.compare-visual figure.is-active img { transform: scale(1); }

/* caption pill (Radian-style) over the image */
.compare-cap {
  position: absolute;
  left: 1rem;
  right: 1rem;
  bottom: 1rem;
  z-index: 3;
  font-family: var(--font-ui);
  font-size: 0.8125rem;
  font-weight: 300;
  color: rgba(236, 231, 218, 0.95);
  background: rgba(24, 28, 18, 0.5);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(236, 231, 218, 0.18);
  border-radius: 999px;
  padding: 0.6rem 1.1rem;
  text-align: center;
  transition: opacity 0.35s ease, transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}
.compare-cap.swap { opacity: 0; transform: translateY(6px); }

/* The Ledger: hairline register rows, no cards. Active entry opens inline. */
.compare-rows {
  list-style: none;
  display: flex;
  flex-direction: column;
}

.compare-row {
  position: relative;
  border-top: 1px solid rgba(32, 37, 26, 0.1);
  cursor: pointer;
}
.compare-row:last-child {
  border-bottom: 1px solid rgba(32, 37, 26, 0.1);
}
/* a quiet ink thread draws across the top of the open entry */
.compare-row::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 0;
  width: 100%;
  height: 1px;
  background: rgba(32, 37, 26, 0.45);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.9s cubic-bezier(0.16, 1, 0.3, 1);
}
.compare-row.active::before { transform: scaleX(1); }

.cr-head {
  position: relative;
  display: flex;
  align-items: center;
  gap: 1.25rem;
  padding: clamp(1.35rem, 2.6vh, 1.85rem) 0.25rem;
}
/* dwell-timer: a gold line that fills under the open row, showing when it will
   advance — pauses on hover, so the reader controls the pace */
/* invisible timing driver — fires animationend to advance; the visible fill is
   the top hairline (.compare-row::before) so the line above the open row loads */
.cr-progress {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1px;
  transform: scaleX(0);
  transform-origin: left center;
  opacity: 0;
  pointer-events: none;
}
.compare-row.is-timing .cr-progress {
  animation: cr-fill var(--cr-dwell, 5.5s) linear forwards;
}
/* the open row's top thread fills over the dwell time as the loader */
.compare-row.is-timing::before {
  transform-origin: left center;
  animation: cr-fill var(--cr-dwell, 5.5s) linear forwards;
}
@keyframes cr-fill {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}
@media (prefers-reduced-motion: reduce) {
  .cr-progress { display: none; }
}
.cr-head h3 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.5rem, 2.4vw, 1.875rem);
  line-height: 1.12;
  letter-spacing: 0.005em;
  color: rgba(32, 37, 26, 0.4);
  transition: color 0.45s ease;
  flex: 1;
}
/* hover: collapsed row title brightens */
.compare-row:not(.active):hover .cr-head h3 { color: rgba(32, 37, 26, 0.7); }
.compare-row:not(.active):hover .cr-open { opacity: 0.7; }
.compare-row.active .cr-head h3 {
  color: var(--ink-dark);
  font-size: clamp(1.625rem, 2.6vw, 2.125rem);
}
/* quiet plus that rotates to a dash when open */
.cr-open {
  position: relative;
  align-self: center;
  width: 12px;
  height: 12px;
  opacity: 0.35;
  transition: opacity 0.4s ease, transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}
.cr-open::before,
.cr-open::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  height: 1px;
  background: rgba(32, 37, 26, 0.55);
}
.cr-open::after { transform: rotate(90deg); }
.compare-row.active .cr-open {
  opacity: 1;
  transform: rotate(45deg);
}

/* body collapses via the 0fr/1fr grid trick — buttery height animation */
.cr-body {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}
.compare-row.active .cr-body { grid-template-rows: 1fr; }

/* open entry: struck claim vs the written promise, two quiet columns */
.cr-inner {
  overflow: hidden;
  display: grid;
  grid-template-columns: 1fr 1.15fr;
  gap: clamp(1rem, 2.5vw, 2.25rem);
  align-items: stretch;
  padding-bottom: clamp(1.4rem, 3.5vh, 2.2rem);
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.55s ease 0.15s, transform 0.55s cubic-bezier(0.16, 1, 0.3, 1) 0.15s;
}
.compare-row.active .cr-inner { opacity: 1; transform: none; }

/* the shortcut, in a quiet grey panel */
.cr-others {
  padding: clamp(0.9rem, 2vh, 1.35rem) clamp(1.1rem, 2.2vw, 1.6rem);
  border-left: 2px solid rgba(32, 37, 26, 0.2);
  border-radius: 0 12px 12px 0;
  background: linear-gradient(120deg, rgba(32, 37, 26, 0.06), rgba(32, 37, 26, 0.015));
  display: flex;
  flex-direction: column;
  justify-content: center;
}
/* the promise, promoted into a soft gold panel with a left accent bar */
.cr-us {
  padding: clamp(0.9rem, 2vh, 1.35rem) clamp(1.1rem, 2.2vw, 1.6rem);
  border-left: 2px solid rgba(201, 162, 75, 0.65);
  border-radius: 0 12px 12px 0;
  background: linear-gradient(120deg, rgba(201, 162, 75, 0.12), rgba(201, 162, 75, 0.03));
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.cr-others span, .cr-us span {
  display: block;
  font-family: var(--font-ui);
  font-size: 0.65625rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  margin-bottom: 0.7rem;
}
.cr-others span { color: rgba(32, 37, 26, 0.42); }
.cr-others span::before {
  content: "\00D7";
  display: inline-block;
  margin-right: 0.4rem;
  color: #b23a2a;
  font-weight: 600;
}
.cr-us span {
  color: #a1793a;
  display: flex;
  align-items: center;
  gap: 0.45rem;
}
.cr-mark {
  height: 15px;
  width: auto;
  display: block;
}
.cr-others p {
  font-family: var(--font-ui);
  font-weight: 300;
  font-size: clamp(0.875rem, 1.2vw, 1rem);
  line-height: 1.5;
  color: rgba(32, 37, 26, 0.55);
}
.cr-us p {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.25rem, 1.9vw, 1.625rem);
  line-height: 1.25;
  color: var(--ink-dark);
}

.compare-board .compare-ctas {
  margin-top: clamp(1.75rem, 4vh, 2.75rem);
  justify-content: center;
  align-items: center;
  /* closing rule mirrors the register's top hairline */
  padding-bottom: clamp(1.75rem, 4vh, 2.75rem);
  border-bottom: 1px solid rgba(32, 37, 26, 0.1);
}

/* Primary: solid sage pill */
.btn-solid-dark {
  background: #5b634a;
  color: var(--bone);
  border: 1px solid #5b634a;
  font-size: 0.875rem;
  padding: 0.75rem 1.6rem;
  transition: background 0.3s ease, border-color 0.3s ease;
}
.btn-solid-dark:hover,
.btn-solid-dark:focus-visible {
  background: #4c543e;
  border-color: #4c543e;
  color: var(--bone);
}

/* Tertiary: quiet text link with arrow nudge */
.btn-tertiary {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-ui);
  font-size: 0.875rem;
  font-weight: 400;
  color: rgba(32, 37, 26, 0.7);
  text-decoration: none;
  padding: 0.75rem 0.5rem;
  border-bottom: 1px solid transparent;
  transition: color 0.3s ease;
}
.btn-tertiary i { font-size: 0.9em; transition: transform 0.3s ease; }
.btn-tertiary:hover { color: #a1793a; }
.btn-tertiary:hover i { transform: translateX(4px); }

@media (max-width: 960px) {
  /* stack: accordion over image */
  .compare-split { grid-template-columns: 1fr; gap: clamp(1.5rem, 4vh, 2.5rem); }
  .compare-visual { max-height: 48vh; order: -1; } /* image leads on narrow screens */
}
@media (max-width: 720px) {
  .cr-inner { grid-template-columns: 1fr; }
  .cr-others {
    margin-left: 0;
    padding-bottom: 1.1rem;
  }
  .cr-others p { white-space: normal; }
  .cr-us {
    border-left: 0;
    padding-left: 0;
    border-top: 1px solid rgba(32, 37, 26, 0.1);
    padding-top: 1.1rem;
  }
  .compare-row.active .cr-head h3 { transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .cr-body, .cr-inner, .cr-head h3, .cr-num, .cr-open, .compare-row::before,
  .compare-visual figure, .compare-visual img { transition: none; }
  .compare-visual img { transform: none; }
}


/* ============================================================
   Titles: sentence case, upright, no Sesbania swashes
   (brand v3 — headings read plain; italics/uppercase removed)
   ============================================================ */
h1, h2, h3, h4,
.hero-title, .house-title, .compare-heading, .essence-title,
.loader-head {
  font-style: normal !important;
  text-transform: none !important;
  font-variant-ligatures: none;
  font-feature-settings: "swsh" 0, "salt" 0, "calt" 0, "dlig" 0, "hlig" 0, "liga" 0;
}
h1 em, h2 em, h3 em, h4 em,
.hero-title em, .house-title em, .compare-heading em,
.essence-title em, .loader-head em {
  font-style: normal !important;
}

/* elegant inset golden gradient frame around the carousel card */
/* golden gradient frame hugs the VIDEO only (not the whole card) */
.gcar-gemcol::after {
  content: "";
  position: absolute;
  inset: 12px;
  border-radius: 16px;
  padding: 1px;
  background: linear-gradient(135deg,
    rgba(201, 162, 75, 0.85) 0%,
    rgba(201, 162, 75, 0.12) 48%,
    rgba(220, 190, 110, 0.75) 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
  z-index: 3;
}

/* consult primary button — image-filled, matches the site's primary buttons */
.section-consult .btn-fill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.7rem 1.6rem;
  border-radius: 999px;
  border: 1px solid rgba(220, 190, 110, 0.5);
  background: url("assets/consult-card-bg.jpg") center / cover;
  font-family: var(--font-ui);
  font-weight: 500;
  font-size: 0.875rem;
  line-height: 1.3;
  letter-spacing: 0.04em;
  color: #fff;
  text-decoration: none;
  white-space: nowrap;
  transition: border-color 0.3s ease, filter 0.3s ease;
}
.section-consult .btn-fill:hover {
  border-color: rgba(220, 190, 110, 0.8);
  filter: brightness(1.08);
}

/* decorative leaf branches bleeding in from the left & right edges */
.section-statement { position: relative; overflow: hidden; }
.section-statement > h2,
.section-statement > p { position: relative; z-index: 1; }
.statement-leaf {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: clamp(170px, 21vw, 340px);
  opacity: 0.9;
  pointer-events: none;
  z-index: 0;
}
.statement-leaf--l { left: 0; }
.statement-leaf--r { right: 0; transform: translateY(-50%) scaleX(-1); }
@media (max-width: 720px) {
  .statement-leaf { width: 120px; opacity: 0.7; }
}

/* dim the side (non-active) carousel cards so the centre stands out */
.gcar-item { transition: opacity 0.6s cubic-bezier(0.22, 1, 0.36, 1); }
.gcar-item:not(.gcar-item--active) { opacity: 0.45; }

/* leaf branches: page-level fixed overlay, pinned to the viewport sides.
   Shown while the consult + octagon sections are in view; z-index 1 so the
   dark trust band (z-index 2) paints over them as they tuck behind it. */
.leaf-float {
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: 0;
  /* soft unfurl: the foliage grows in a touch as it appears */
  transform: scale(1.05);
  transform-origin: top center;
  transition: opacity 0.9s ease, transform 1.2s cubic-bezier(0.16, 1, 0.3, 1);
}
.leaf-float.is-on { opacity: 0.92; transform: scale(1); }

/* each side is a JS-driven parallax carrier; the leaf layers live inside it */
.leaf-float-side {
  position: absolute;
  top: 2vh;
  width: clamp(150px, 16vw, 290px);
  height: clamp(240px, 30vw, 440px);    /* explicit box so it never collapses */
  will-change: transform;
}
.leaf-float--l { left: -2%; }
.leaf-float--r { right: -2%; }

.leaf-layer {
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  transform-origin: 50% 50%;            /* rotate in place — never flips off-screen */
  will-change: transform;
}
/* a blurred, oversized branch sits behind the sharp one — real foliage depth */
.leaf-layer--back {
  width: 132%; left: -16%; top: -4%;
  opacity: 0.4;
  filter: blur(2.5px) saturate(0.9);
}
.leaf-layer--front { opacity: 1; }

/* organic sway with two gusts per cycle; left/right keyframes bake in the flip
   (so the branches hang inward) and the front/back layers run out of phase */
@keyframes leaf-sway-l {
  0%   { transform: rotate(179deg)  translateY(0);     }
  24%  { transform: rotate(183.5deg) translateY(5px);  }   /* gust */
  46%  { transform: rotate(180.5deg) translateY(2px);  }
  70%  { transform: rotate(184.5deg) translateY(8px);  }   /* stronger gust */
  100% { transform: rotate(179deg)  translateY(0);     }
}
@keyframes leaf-sway-r {
  0%   { transform: scaleX(-1) rotate(179deg)  translateY(0);    }
  24%  { transform: scaleX(-1) rotate(183.5deg) translateY(5px); }
  46%  { transform: scaleX(-1) rotate(180.5deg) translateY(2px); }
  70%  { transform: scaleX(-1) rotate(184.5deg) translateY(8px); }
  100% { transform: scaleX(-1) rotate(179deg)  translateY(0);    }
}
.leaf-float--l .leaf-layer--front { animation: leaf-sway-l 8s ease-in-out infinite; }
.leaf-float--l .leaf-layer--back  { animation: leaf-sway-l 12.5s ease-in-out -2.5s infinite; }
.leaf-float--r .leaf-layer--front { animation: leaf-sway-r 8.6s ease-in-out -1.2s infinite; }
.leaf-float--r .leaf-layer--back  { animation: leaf-sway-r 13.2s ease-in-out -3.4s infinite; }

@media (prefers-reduced-motion: reduce) {
  .leaf-layer { animation: none !important; }
  .leaf-float--l .leaf-layer { transform: rotate(180deg); }
  .leaf-float--r .leaf-layer { transform: scaleX(-1) rotate(180deg); }
}
@media (max-width: 860px) { .leaf-float { display: none; } }

/* trust band sits above the floating leaves so they tuck behind it */
.section-trust { z-index: 3; }
/* octagon band content also clears the leaf */
.section-kinetic { position: relative; z-index: 2; background: transparent; }

/* crop card content (images) at the golden frame line, not the card edge */
.offer { clip-path: inset(14px round 8px); }

/* ---- carousel card: image fills the left edge flush, deep top/bottom dip ---- */
/* card faces get a concave dip on the top & bottom edges (intersect two
   elliptical masks — canonical technique, renders reliably in Chrome) */
.gcar-face {
  -webkit-mask:
    radial-gradient(150% 130px at 50% -28px, rgba(0,0,0,0) 0 128px, #000 130px),
    radial-gradient(150% 130px at 50% calc(100% + 28px), rgba(0,0,0,0) 0 128px, #000 130px);
  -webkit-mask-composite: source-in;
          mask:
    radial-gradient(150% 130px at 50% -28px, rgba(0,0,0,0) 0 128px, #000 130px),
    radial-gradient(150% 130px at 50% calc(100% + 28px), rgba(0,0,0,0) 0 128px, #000 130px);
          mask-composite: intersect;
}
/* the front face: no padding — the gem column bleeds to the left edge, the
   text column carries its own padding instead */
.gcar-face--front { padding: 0; gap: 0; }
.gcar-seam { display: none; }
.gcar-body {
  flex: 1;
  padding: clamp(1.3rem, 2.4vw, 2.25rem) clamp(1.6rem, 2.6vw, 2.6rem);
}
/* gem column fills the whole left of the card, flush, left corners rounded */
.gcar-gemcol {
  flex: 0 0 44%;
  border-radius: 24px 0 0 24px;
  background: radial-gradient(120% 100% at 50% 40%, #ffffff 0%, #fbf7ee 70%, #f6efdd 100%);
  overflow: hidden;
}
.gcar-gemvid {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 1;
  z-index: 2;
  pointer-events: none;
}
/* video is the left media now — hide the still gem + plinth glow */
.gcar-gemcol::before { display: none; }
.gcar-gemcol .gcar-gem { display: none; }

/* origins as subtle, non-clickable tip chips */
.gcar-origins { display: inline-flex; flex-wrap: wrap; gap: 0.4rem; }
.gcar-origins .chip {
  display: inline-block;
  padding: 0.18rem 0.7rem;
  border-radius: 999px;
  border: 1px solid rgba(161, 121, 58, 0.3);
  background: rgba(201, 162, 75, 0.06);
  font-family: var(--font-ui);
  font-size: 0.8rem;
  line-height: 1.4;
  color: #5c4a24;
}

/* gem-carousel: a showreel video in the media column (Pukhraj card) */
.gcar-gemcol:has(.gcar-video) { flex-basis: 42%; }
.gcar-gemcol:has(.gcar-video)::before { display: none; }
.gcar-video {
  position: relative; z-index: 1;
  width: 100%; height: 100%;
  max-height: 82%;
  object-fit: cover;
  border-radius: 16px;
  border: 1px solid rgba(201, 162, 75, 0.28);
  box-shadow: 0 22px 44px -26px rgba(20, 24, 16, 0.55);
}

/* Decorative side leaves — fixed, emerge from the edges across the consult→kinetic band */
.side-leaf {
  position: fixed;
  top: 50%; transform: translateY(-50%);
  width: clamp(120px, 13vw, 230px);
  z-index: 6;
  opacity: 0; pointer-events: none;
  transition: opacity 0.8s ease, translate 0.9s ease;
  translate: 0 0;
  will-change: opacity, translate;
}
.side-leaf img { width: 100%; height: auto; display: block; }
.side-leaf--l { left: 0; translate: -40% 0; transform-origin: left center; }
.side-leaf--r { right: 0; translate: 40% 0; }
.side-leaf--l img { transform: scaleX(-1); }
.side-leaf--r img { transform: none; }
.side-leaf.is-on { opacity: 0.92; translate: 0 0; }
@media (max-width: 860px) { .side-leaf { display: none; } }

/* keep the decorative side leaves behind the dark "standards" (trust) section */
.section-trust { position: relative; z-index: 8; }

/* .twinkle sparkle is defined once in site-nav.css (shared, currentColor) */