/* ═══════════════════════════════════════════════════════
   BIGGER AND BETTER REALTY — Light Luxury
   Ivory · Navy ink · Champagne gold
   Cormorant Garamond / Cinzel / Jost
   ═══════════════════════════════════════════════════════ */

:root {
  --bg: #fbf9f4;
  --bg-2: #f4efe4;
  --bg-3: #efe8d8;
  --card: #fffdf9;
  --ink: #101b2d;
  --ink-2: #1c2b42;
  --muted: #5d6675;
  --muted-2: #8b93a1;
  --gold-1: #d9bd77;
  --gold-2: #b08d3e;
  --gold-3: #8a6c2c;
  --gold-soft: rgba(176, 141, 62, 0.12);
  --hair: rgba(176, 141, 62, 0.22);
  --hair-2: rgba(16, 27, 45, 0.08);
  --navy: #0d1930;

  --serif: "Cormorant Garamond", Georgia, serif;
  --caps: "Cinzel", Georgia, serif;
  --sans: "Jost", system-ui, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, "SF Mono", monospace;

  --shadow-sm: 0 6px 24px rgba(16, 27, 45, 0.07);
  --shadow-md: 0 18px 50px rgba(16, 27, 45, 0.10);
  --shadow-lg: 0 40px 100px rgba(16, 27, 45, 0.16);
  --shadow-gold: 0 14px 40px rgba(176, 141, 62, 0.30);

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --container: 1240px;
}

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

html { scroll-behavior: smooth; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }

body {
  font-family: var(--sans);
  font-size: 17px;
  font-weight: 300;
  line-height: 1.7;
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

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

.container { width: min(var(--container), 90%); margin-inline: auto; }
.container--narrow2 { width: min(980px, 90%); margin-inline: auto; }

::selection { background: var(--gold-2); color: #fff; }

:where(a, button, summary, input, select):focus-visible {
  outline: 2px solid var(--gold-2);
  outline-offset: 4px;
}

/* ═══════════ PRELOADER ═══════════ */
.loader {
  position: fixed; inset: 0;
  z-index: 1000;
  display: grid; place-items: center;
  transition: transform 0.9s cubic-bezier(0.76, 0, 0.24, 1);
}
.loader.is-done { transform: translateY(-101%); }
.loader__half { position: absolute; top: 0; bottom: 0; width: 50.5%; background: var(--bg); }
.loader__half--l { left: 0; }
.loader__half--r { right: 0; }
.loader__inner { text-align: center; position: relative; z-index: 2; }
.loader__mark {
  width: 86px; height: 86px; margin-inline: auto;
  opacity: 0; transform: scale(0.85) translateY(10px);
  animation: chipPop 0.9s var(--ease) forwards 0.1s;
}
@keyframes chipPop { to { opacity: 1; transform: none; } }
.loader__word {
  margin-top: 24px;
  font-family: var(--caps);
  font-size: 13px; letter-spacing: 0.55em; text-indent: 0.55em;
  color: var(--ink);
  opacity: 0; animation: fadeUp 0.6s var(--ease) forwards 0.55s;
}
.loader__count {
  position: fixed; right: 5vw; bottom: 4vh; z-index: 2;
  font-family: var(--serif); font-size: clamp(48px, 8vw, 110px); font-weight: 400;
  color: rgba(176, 141, 62, 0.2); font-variant-numeric: tabular-nums;
}
@keyframes fadeUp { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }

/* ═══════════ CURSOR ═══════════ */
.cursor, .cursor-dot { display: none; }
@media (pointer: fine) {
  .cursor {
    display: block; position: fixed; z-index: 999; pointer-events: none;
    width: 38px; height: 38px; border-radius: 50%;
    border: 1px solid rgba(176, 141, 62, 0.55);
    transform: translate(-50%, -50%);
    opacity: 0;
    transition: width 0.35s var(--ease), height 0.35s var(--ease), border-color 0.3s, background 0.3s, opacity 0.3s;
  }
  .cursor.is-hover { width: 66px; height: 66px; background: rgba(176, 141, 62, 0.08); border-color: var(--gold-2); }
  .cursor-dot {
    display: block; position: fixed; z-index: 999; pointer-events: none;
    width: 4px; height: 4px; border-radius: 50%;
    background: var(--gold-2);
    transform: translate(-50%, -50%);
    opacity: 0;
    transition: opacity 0.3s;
  }
  .cursor.is-active, .cursor-dot.is-active { opacity: 1; }
}

/* ═══════════ SCROLL PROGRESS ═══════════ */
.progress {
  position: fixed; top: 0; left: 0; right: 0; height: 2.5px; z-index: 200;
  background: linear-gradient(90deg, var(--gold-3), var(--gold-1));
  transform-origin: left;
  transform: scaleX(0);
}

/* ═══════════ BRAND ═══════════ */
.brand { display: inline-flex; align-items: center; gap: 13px; }
.brand__mark { width: 44px; height: 44px; flex-shrink: 0; }
.brand__text { display: flex; flex-direction: column; line-height: 1.3; }
.brand__name { font-family: var(--caps); font-size: 16px; letter-spacing: 0.28em; color: var(--ink); }
.brand__tag { font-family: var(--sans); font-size: 8px; font-weight: 500; letter-spacing: 0.235em; color: var(--gold-2); white-space: nowrap; }
.brand--footer .brand__name { color: #f3ede1; }

/* ═══════════ NAV ═══════════ */
.nav { position: fixed; inset: 0 0 auto; z-index: 120; transition: background 0.5s, box-shadow 0.5s; }
.nav__inner {
  width: min(1360px, 94%); margin-inline: auto;
  display: flex; align-items: center; justify-content: space-between; gap: 30px;
  padding: 20px 0;
  transition: padding 0.5s var(--ease);
}
.nav.is-scrolled {
  background: rgba(251, 249, 244, 0.96);
  box-shadow: 0 1px 0 var(--hair), var(--shadow-sm);
}
.nav.is-scrolled .nav__inner { padding: 12px 0; }

.nav__links { display: flex; gap: 34px; }
.nav__links a {
  font-size: 13px; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--muted);
  position: relative; padding: 6px 0;
  transition: color 0.3s;
}
.nav__links a::after {
  content: ""; position: absolute; left: 50%; bottom: 0;
  width: 4px; height: 4px; border-radius: 50%;
  background: var(--gold-2);
  transform: translateX(-50%) scale(0);
  transition: transform 0.3s var(--ease);
}
.nav__links a:hover { color: var(--ink); }
.nav__links a:hover::after { transform: translateX(-50%) scale(1); }

.nav__actions { display: flex; align-items: center; gap: 16px; }
.nav__phone {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 11px 21px;
  border: 1px solid var(--hair);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.5);
  font-family: var(--sans); font-size: 14px; font-weight: 500;
  letter-spacing: 0.05em; font-variant-numeric: tabular-nums;
  color: var(--ink);
  transition: border-color 0.3s, background 0.3s, box-shadow 0.3s;
}
.nav__phone svg { width: 15px; height: 15px; color: var(--gold-2); flex-shrink: 0; }
.nav__phone:hover { border-color: rgba(176, 141, 62, 0.55); background: #fff; box-shadow: var(--shadow-sm); }
/* Swapped for the word "Call" on a phone, where the full number will not fit
   beside the logo and the menu button. */
.nav__phone-word { display: none; }

.nav__burger { display: none; flex-direction: column; gap: 7px; padding: 10px; z-index: 130; }
.nav__burger span { width: 30px; height: 1.5px; background: var(--ink); transition: transform 0.4s var(--ease); }
.nav__burger.is-open span:nth-child(1) { transform: translateY(4.2px) rotate(45deg); }
.nav__burger.is-open span:nth-child(2) { transform: translateY(-4.2px) rotate(-45deg); }

.nav-overlay {
  position: fixed; inset: 0; z-index: 110;
  background: rgba(251, 249, 244, 0.98);
  backdrop-filter: blur(20px);
  display: flex; flex-direction: column; justify-content: center;
  padding: 0 8vw;
  clip-path: circle(0% at calc(100% - 44px) 40px);
  transition: clip-path 0.7s cubic-bezier(0.76, 0, 0.24, 1);
  visibility: hidden;
}
.nav-overlay.is-open { clip-path: circle(150% at calc(100% - 44px) 40px); visibility: visible; }
.nav-overlay nav { display: grid; gap: 6px; }
.nav-overlay nav a {
  font-family: var(--serif); font-size: clamp(30px, 7vw, 48px); font-weight: 500;
  color: var(--ink); padding: 8px 0;
  border-bottom: 1px solid var(--hair-2);
  display: flex; align-items: baseline; gap: 18px;
  transition: color 0.3s, padding-left 0.3s var(--ease);
}
.nav-overlay nav a:hover { color: var(--gold-2); padding-left: 10px; }
.nav-overlay nav a em { font-family: var(--sans); font-style: normal; font-size: 12px; letter-spacing: 0.3em; color: var(--gold-2); }
.nav-overlay__cta { color: var(--gold-2) !important; border-bottom: 0 !important; }
.nav-overlay__foot { margin-top: 6vh; }
.nav-overlay__foot a {
  font-family: var(--sans); font-size: 20px; font-weight: 400;
  letter-spacing: 0.05em; font-variant-numeric: tabular-nums;
  color: var(--gold-2);
}

/* ═══════════ BUTTONS ═══════════ */
.btn {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--sans); font-size: 12.5px; font-weight: 600;
  letter-spacing: 0.22em; text-indent: 0.22em; text-transform: uppercase;
  padding: 16px 34px;
  border-radius: 999px;
  overflow: hidden;
  transition: color 0.35s var(--ease), border-color 0.35s, transform 0.35s var(--ease), box-shadow 0.35s;
  cursor: pointer;
}
.btn span { position: relative; z-index: 2; }
.btn--gold {
  color: #fff;
  background: linear-gradient(115deg, var(--gold-3), var(--gold-2) 45%, var(--gold-1));
  box-shadow: var(--shadow-gold);
}
.btn--gold::before {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(115deg, transparent 30%, rgba(255,255,255,0.6) 50%, transparent 70%);
  transform: translateX(-130%) skewX(-15deg);
  animation: autoshine 4.5s var(--ease) infinite;
}
@keyframes autoshine { 0%, 62% { transform: translateX(-130%) skewX(-15deg); } 100% { transform: translateX(130%) skewX(-15deg); } }
.btn--gold:hover { box-shadow: 0 20px 56px rgba(176, 141, 62, 0.45); transform: translateY(-2px); }
.btn--outline { color: var(--gold-3); border: 1px solid rgba(176, 141, 62, 0.5); background: transparent; }
.btn--outline::after { content: ""; position: absolute; inset: 0; background: linear-gradient(115deg, var(--gold-3), var(--gold-1)); transform: scaleX(0); transform-origin: right; transition: transform 0.45s var(--ease); }
.btn--outline:hover { color: #fff; border-color: var(--gold-2); }
.btn--outline:hover::after { transform: scaleX(1); transform-origin: left; }
.btn--lg { padding: 19px 44px; font-size: 13px; }
.btn--full { width: 100%; }

.link-arrow {
  display: inline-flex; align-items: center; gap: 12px;
  font-size: 13px; font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--muted);
  transition: color 0.3s;
}
.link-arrow svg { width: 20px; height: 20px; color: var(--gold-2); transition: transform 0.35s var(--ease); }
.link-arrow:hover { color: var(--ink); }
.link-arrow:hover svg { transform: translateX(6px); }

/* ═══════════ TYPE ═══════════ */
.kicker {
  font-size: 11.5px; font-weight: 600; letter-spacing: 0.45em;
  color: var(--gold-2);
  margin-bottom: 22px;
  display: flex; align-items: center; gap: 16px;
}
.kicker::before { content: ""; width: 44px; height: 1px; background: linear-gradient(90deg, var(--gold-2), transparent); }
.kicker--center { justify-content: center; }
.kicker--center::after { content: ""; width: 44px; height: 1px; background: linear-gradient(270deg, var(--gold-2), transparent); }

.h2 {
  font-family: var(--serif);
  font-size: clamp(38px, 5.2vw, 64px);
  font-weight: 500;
  line-height: 1.12;
  letter-spacing: -0.015em;
  color: var(--ink);
  margin-bottom: 26px;
}
.h2 i {
  font-style: italic; font-weight: 400;
  background: linear-gradient(105deg, var(--gold-3), var(--gold-2) 50%, var(--gold-1));
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
.h2--center { text-align: center; }
.lead { font-size: 18px; color: var(--muted); max-width: 54ch; }

.watermark {
  position: absolute; top: 3vw; left: -1vw;
  font-family: var(--serif); font-style: italic;
  font-size: clamp(100px, 16vw, 240px);
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1px rgba(176, 141, 62, 0.13);
  pointer-events: none; user-select: none; white-space: nowrap;
  z-index: 0;
}
.watermark--right { left: auto; right: -2vw; }

/* Shiny text (MagicUI-style animated-shiny-text) */
.shiny-text {
  display: inline-block;
  padding: 10px 22px;
  border: 1px solid var(--hair);
  border-radius: 999px;
  background: linear-gradient(110deg, var(--gold-3) 35%, #f0dfae 50%, var(--gold-3) 65%);
  background-size: 220% 100%;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: shiny 3.2s linear infinite;
  font-size: 11px; font-weight: 600; letter-spacing: 0.42em; text-indent: 0.42em;
}
@keyframes shiny { to { background-position: -220% 0; } }

/* Glass chip (floating cards) */
.glass-chip {
  display: flex; align-items: center; gap: 13px;
  padding: 15px 20px;
  border-radius: 16px;
  background: rgba(255, 253, 249, 0.88);
  backdrop-filter: blur(7px);
  -webkit-backdrop-filter: blur(7px);
  border: 1px solid rgba(255, 255, 255, 0.9);
  box-shadow: var(--shadow-md);
}
.glass-chip strong { display: block; font-family: var(--serif); font-size: 17px; font-weight: 600; color: var(--ink); line-height: 1.2; }
.glass-chip em { font-style: normal; font-size: 11.5px; font-weight: 500; letter-spacing: 0.06em; color: var(--muted); }

/* ═══════════ HERO ═══════════ */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex; align-items: center;
  padding: 150px 0 90px;
  overflow: hidden;
}
.hero__pattern {
  position: absolute; inset: 0;
  background-image: radial-gradient(rgba(176, 141, 62, 0.16) 1px, transparent 1px);
  background-size: 26px 26px;
  -webkit-mask-image: radial-gradient(ellipse 75% 65% at 50% 35%, #000 20%, transparent 75%);
  mask-image: radial-gradient(ellipse 75% 65% at 50% 35%, #000 20%, transparent 75%);
}
.hero__glow {
  position: absolute;
  top: -20%; right: -12%;
  width: 62vw; height: 62vw;
  background: radial-gradient(circle, rgba(217, 189, 119, 0.30) 0%, rgba(217, 189, 119, 0.12) 38%, rgba(217, 189, 119, 0.04) 55%, transparent 70%);
  animation: glowDrift 14s ease-in-out infinite alternate;
  will-change: transform;
}
@keyframes glowDrift { to { transform: translate(-6%, 8%) scale(1.08); } }

.hero__grid {
  position: relative; z-index: 2;
  display: grid;
  grid-template-columns: 1.12fr 1fr;
  gap: clamp(40px, 6vw, 90px);
  align-items: center;
}
.hero__eyebrow { margin-bottom: 3.4vh; }

.hero__title {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(44px, 5.7vw, 78px);
  line-height: 1.06;
  letter-spacing: -0.015em;
  color: var(--ink);
  margin-bottom: 3vh;
}
.hero__t-line { display: block; overflow: hidden; padding-bottom: 0.09em; margin-bottom: -0.05em; }
/* No will-change here on purpose. These spans animate once, in the intro
   timeline, for about a second and a half. A permanent hint kept all 21 of
   them on their own compositor layer for the whole visit, which showed up as
   hero text ghosting over later sections once the compositor started dropping
   tiles. GSAP promotes each span while its tween runs and releases it after,
   which is the behaviour we actually wanted. */
.hero__t-line .ch { display: inline-block; }
.hero__t-line i {
  font-style: italic; font-weight: 400;
  background: linear-gradient(105deg, var(--gold-3), var(--gold-2) 55%, var(--gold-1));
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}

.hero__sub { font-size: clamp(16px, 1.5vw, 19px); color: var(--muted); max-width: 46ch; margin-bottom: 4.2vh; }

.hero__cta { margin-bottom: 5.4vh; }
.herobar {
  display: flex; align-items: center; gap: 6px;
  width: min(580px, 100%);
  padding: 7px 7px 7px 22px;
  background: var(--card);
  border: 1px solid var(--hair);
  border-radius: 999px;
  box-shadow: var(--shadow-md);
  transition: border-color 0.3s, box-shadow 0.4s var(--ease), transform 0.3s var(--ease);
}
.herobar:focus-within {
  border-color: rgba(176, 141, 62, 0.6);
  box-shadow: 0 24px 64px rgba(176, 141, 62, 0.24);
  transform: translateY(-1px);
}
.herobar > svg { width: 19px; height: 19px; color: var(--gold-2); flex-shrink: 0; }
.herobar input {
  flex: 1; min-width: 0;
  border: 0; outline: none; background: transparent;
  font-family: var(--sans); font-size: 16.5px; font-weight: 300;
  color: var(--ink);
  padding: 13px 10px;
}
.herobar input::placeholder { color: var(--muted-2); }
.herobar__btn { flex-shrink: 0; padding: 15px 28px; font-size: 12px; }
.herobar__note { margin-top: 14px; font-size: 12.5px; letter-spacing: 0.05em; color: var(--muted-2); }

/* The second way out of the first screen. Plenty of sellers would rather talk
   than type an address into a form, and on a phone the call costs them one
   tap. Outlined rather than gold: it sits beside the form, not above it. */
.hero__call {
  display: none;
  align-items: center; justify-content: center; gap: 11px;
  margin-top: 12px;
  padding: 15px 20px;
  border: 1px solid rgba(176, 141, 62, 0.5);
  border-radius: 999px;
  background: rgba(255, 253, 249, 0.92);
  box-shadow: var(--shadow-sm);
  font-family: var(--sans); font-size: 15px; letter-spacing: 0.03em;
  color: var(--ink-2);
  transition: border-color 0.3s, background 0.3s, box-shadow 0.3s;
}
.hero__call svg { width: 18px; height: 18px; color: var(--gold-3); flex-shrink: 0; }
.hero__call b { font-weight: 500; font-variant-numeric: tabular-nums; color: var(--ink); }
.hero__call:hover { border-color: rgba(176, 141, 62, 0.75); background: #fff; box-shadow: var(--shadow-md, var(--shadow-sm)); }

.hero__stats { display: flex; align-items: center; gap: clamp(18px, 2.6vw, 40px); }
.hero__sep { width: 1px; height: 42px; background: linear-gradient(to bottom, transparent, var(--hair), transparent); }
.hero__stat strong {
  display: block;
  font-family: var(--serif); font-weight: 500;
  font-size: clamp(26px, 2.8vw, 40px);
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  line-height: 1.15;
}
.hero__stat span { font-size: 9.5px; font-weight: 600; letter-spacing: 0.22em; color: var(--muted-2); line-height: 1.5; display: block; }

/* Hero visual — arched image + ring + chips */
.hero__visual { position: relative; }
.hero__arch {
  position: relative;
  border-radius: 260px 260px 24px 24px;
  overflow: hidden;
  aspect-ratio: 4 / 5.1;
  box-shadow: var(--shadow-lg);
}
.hero__arch img { width: 100%; height: 112%; object-fit: cover; animation: kenburns 22s ease-in-out infinite alternate; }
@keyframes kenburns { from { transform: scale(1); } to { transform: scale(1.09) translateY(-2.4%); } }
.hero__arch-ring {
  position: absolute; inset: -16px;
  border: 1px solid var(--hair);
  border-radius: 278px 278px 32px 32px;
  pointer-events: none;
}
.hero__arch-ring::after {
  content: "";
  position: absolute; top: 8%; right: -5px;
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--gold-2);
  box-shadow: 0 0 16px rgba(176, 141, 62, 0.8);
}
.hero__card {
  position: absolute; z-index: 3;
  left: 5%; bottom: -4.5%;
  display: flex; align-items: center; gap: 15px;
  padding: 13px 22px 13px 13px;
  background: var(--card);
  border: 1px solid var(--hair);
  border-radius: 14px;
  box-shadow: var(--shadow-md);
}
.hero__card-face { width: 46px; height: 46px; border-radius: 11px; object-fit: cover; flex-shrink: 0; }
.hero__card-text strong { display: block; font-family: var(--mono); font-size: 10px; font-weight: 500; letter-spacing: 0.16em; color: var(--ink); margin-bottom: 3px; }
.hero__card-text em { font-style: normal; font-size: 13px; color: var(--muted); letter-spacing: 0.02em; }

.hero__scrollcue {
  position: absolute; bottom: 22px; left: 50%; transform: translateX(-50%);
  z-index: 4;
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  font-size: 9px; letter-spacing: 0.5em; text-indent: 0.5em; color: var(--muted-2);
}
.hero__scrollcue i { width: 1px; height: 48px; background: var(--hair); position: relative; overflow: hidden; display: block; }
.hero__scrollcue i::after {
  content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 50%;
  background: var(--gold-2);
  transform: translateY(-100%);
  animation: cue 2.2s var(--ease) infinite;
}
@keyframes cue { 0% { transform: translateY(-100%); } 100% { transform: translateY(220%); } }

/* ═══════════ MARQUEE ═══════════ */
.marquee {
  position: relative;
  padding: 24px 0;
  border-top: 1px solid var(--hair);
  border-bottom: 1px solid var(--hair);
  background: var(--card);
  overflow: hidden;
  z-index: 5;
}
.marquee__track { display: flex; white-space: nowrap; width: max-content; animation: marquee 36s linear infinite; }
.marquee:hover .marquee__track { animation-play-state: paused; }
.marquee__track span { font-family: var(--caps); font-size: 14px; letter-spacing: 0.34em; color: var(--muted-2); }
.marquee__track i { font-style: normal; color: var(--gold-2); margin: 0 18px; }
@keyframes marquee { to { transform: translateX(-50%); } }

/* ═══════════ SECTIONS ═══════════ */
.section { position: relative; padding: clamp(64px, 8vw, 112px) 0; }

/* ═══════════ ABOUT ═══════════ */
.about { background: var(--bg); overflow: hidden; }
.about__grid {
  position: relative; z-index: 1;
  display: grid; grid-template-columns: 1.05fr 1fr;
  gap: clamp(50px, 7vw, 110px);
  align-items: center;
}
.about__media { position: relative; }
.about__img { overflow: hidden; border-radius: 20px; }
.about__img--main { aspect-ratio: 4 / 5; box-shadow: var(--shadow-lg); }
.about__img--main img { width: 100%; height: 116%; object-fit: cover; }
.about__img--float {
  position: absolute; right: -8%; bottom: -10%;
  width: 46%;
  aspect-ratio: 1;
  border: 7px solid var(--bg);
  box-shadow: var(--shadow-md);
}
.about__img--float img { width: 100%; height: 100%; object-fit: cover; }
.about__badge {
  position: absolute; top: -24px; left: -24px;
  display: flex; align-items: center; gap: 12px;
  padding: 17px 22px;
  border-radius: 16px;
  background: rgba(255, 253, 249, 0.92);
  backdrop-filter: blur(7px);
  border: 1px solid rgba(255,255,255,0.9);
  box-shadow: var(--shadow-md);
  font-family: var(--caps); font-size: 10.5px; letter-spacing: 0.26em; line-height: 1.7;
  color: var(--gold-3);
}
.about__badge svg { width: 30px; height: 30px; color: var(--gold-2); }

.about__list { list-style: none; margin: 42px 0 44px; }
.about__list li {
  display: flex; gap: 26px; align-items: flex-start;
  padding: 25px 0;
  border-top: 1px solid var(--hair-2);
}
.about__list li:last-child { border-bottom: 1px solid var(--hair-2); }
.about__num { font-family: var(--serif); font-style: italic; font-size: 22px; color: var(--gold-2); line-height: 1.4; }
.about__list strong { color: var(--ink); font-weight: 500; }
.about__list div { color: var(--muted); font-size: 16px; }

/* ═══════════ PROCESS ═══════════ */
.process { background: linear-gradient(180deg, var(--bg-2), var(--bg)); overflow: hidden; }
.process__wrap { position: relative; margin-top: clamp(50px, 6vw, 90px); display: grid; gap: clamp(40px, 5vw, 70px); }
.process__line { position: absolute; left: 50%; top: 0; bottom: 0; width: 1px; background: var(--hair-2); }
.process__line i { display: block; width: 100%; height: 100%; transform: scaleY(0); transform-origin: top; background: linear-gradient(to bottom, var(--gold-1), var(--gold-2)); }
.process__step { display: flex; align-items: center; gap: clamp(24px, 4vw, 60px); width: 50%; padding-right: clamp(30px, 5vw, 70px); }
.process__step--right { margin-left: auto; flex-direction: row-reverse; padding-right: 0; padding-left: clamp(30px, 5vw, 70px); text-align: right; }
.process__index span {
  font-family: var(--serif); font-style: italic;
  font-size: clamp(64px, 8vw, 118px); line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1.2px rgba(176, 141, 62, 0.55);
}
.process__card h3 { font-family: var(--serif); font-size: clamp(24px, 2.4vw, 32px); font-weight: 600; color: var(--ink); margin-bottom: 10px; }
.process__card p { color: var(--muted); font-size: 16px; max-width: 40ch; }
.process__step--right .process__card p { margin-left: auto; }
.process__meta { display: inline-block; margin-top: 14px; font-family: var(--mono); font-size: 10px; font-weight: 500; letter-spacing: 0.26em; color: var(--gold-2); }
.process__cta { text-align: center; margin-top: clamp(60px, 7vw, 100px); }

/* ═══════════ COMPARE ═══════════ */
.compare { background: var(--bg); }
.compare__card {
  margin-top: clamp(46px, 5vw, 70px);
  border-radius: 22px;
  background: var(--card);
  border: 1px solid var(--hair-2);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}
.compare__head, .compare__row {
  display: grid;
  grid-template-columns: 1.2fr 1fr 1fr;
  align-items: center;
  padding: 19px clamp(20px, 3.5vw, 46px);
}
.compare__head {
  border-bottom: 1px solid var(--hair);
  background: linear-gradient(180deg, rgba(176, 141, 62, 0.07), transparent);
  font-family: var(--caps); font-size: 12px; letter-spacing: 0.28em;
  color: var(--muted-2);
  padding-block: 26px 22px;
}
.compare__hl { color: var(--gold-3); }
.compare__row { border-bottom: 1px solid var(--hair-2); transition: background 0.3s; }
.compare__row:last-child { border-bottom: 0; }
.compare__row:hover { background: rgba(176, 141, 62, 0.05); }
.compare__row span { font-size: 15px; color: var(--ink-2); letter-spacing: 0.03em; }
.compare__row b { font-family: var(--serif); font-size: 19px; font-weight: 600; color: var(--gold-3); }
.compare__row em { font-style: normal; font-size: 14.5px; color: var(--muted-2); }

/* ═══════════ SITUATIONS ═══════════ */
.situations { background: var(--bg-2); overflow: hidden; }
.situations .lead { margin-top: -6px; }
.situations .lead strong { color: var(--ink); font-weight: 500; }
.situations__grid {
  position: relative; z-index: 1;
  margin-top: clamp(46px, 5vw, 76px);
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}
.sit {
  position: relative;
  padding: 32px 28px 26px;
  background: var(--card);
  border: 1px solid var(--hair-2);
  border-radius: 18px;
  min-height: 250px;
  display: flex; flex-direction: column;
  box-shadow: var(--shadow-sm);
  transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease), border-color 0.4s;
  overflow: hidden;
}
.sit::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 3px;
  background: linear-gradient(90deg, var(--gold-3), var(--gold-1));
  transform: scaleX(0); transform-origin: left;
  transition: transform 0.5s var(--ease);
  z-index: 2;
}
.sit::after {
  content: ""; position: absolute; inset: 9px;
  border: 1px solid rgba(176, 141, 62, 0.16);
  border-radius: 12px;
  pointer-events: none;
  transition: border-color 0.4s;
}
.sit:hover { transform: translateY(-8px); box-shadow: var(--shadow-md); border-color: var(--hair); }
.sit:hover::before { transform: scaleX(1); }
.sit:hover::after { border-color: rgba(176, 141, 62, 0.38); }
.sit i {
  position: absolute; top: 20px; right: 26px;
  font-family: var(--serif); font-style: italic;
  font-size: 56px; line-height: 0.9; font-weight: 400;
  color: transparent;
  -webkit-text-stroke: 1px rgba(176, 141, 62, 0.32);
  transition: -webkit-text-stroke-color 0.4s;
  pointer-events: none;
}
.sit:hover i { -webkit-text-stroke-color: rgba(176, 141, 62, 0.62); }
.sit h3 { font-family: var(--serif); font-size: 24px; font-weight: 600; color: var(--ink); margin: 30px 0 9px; transition: color 0.3s; }
.sit:hover h3 { color: var(--gold-3); }
.sit p { font-size: 14.5px; color: var(--muted); flex: 1; max-width: 30ch; }
.sit span {
  margin-top: 18px; padding-top: 13px;
  border-top: 1px solid var(--hair-2);
  font-family: var(--mono); font-size: 8.5px; font-weight: 500;
  letter-spacing: 0.2em;
  color: var(--gold-3);
}

/* ═══════════ STORIES ═══════════ */
.stories { background: var(--bg); }
.stories__slider { margin-top: clamp(40px, 5vw, 60px); }
.stories__viewport { position: relative; min-height: 300px; }
.story {
  position: absolute; inset: 0;
  opacity: 0; visibility: hidden;
  transform: translateY(24px);
  transition: opacity 0.7s var(--ease), transform 0.7s var(--ease), visibility 0.7s;
  text-align: center;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 0 4vw;
}
.story.is-active { opacity: 1; visibility: visible; transform: none; position: relative; }
.story blockquote {
  font-family: var(--serif);
  font-size: clamp(22px, 2.9vw, 33px);
  font-weight: 500;
  line-height: 1.45;
  color: var(--ink-2);
  max-width: 27ch;
  margin-bottom: 32px;
}
.story figcaption strong { display: block; font-family: var(--caps); font-size: 14px; letter-spacing: 0.24em; color: var(--gold-3); margin-bottom: 6px; }
.story figcaption span { font-size: 10.5px; font-weight: 600; letter-spacing: 0.34em; color: var(--muted-2); }
/* The sprite holding the star path. Taken out of flow so the empty <svg> that
   carries it cannot add a stray line box above the first quote. */
.story__sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.story__stars { display: flex; justify-content: center; gap: 6px; margin-bottom: 22px; }
.story__star { width: 14px; height: 14px; fill: var(--gold-2); flex-shrink: 0; }
/* An outline rather than a grey fill: a hollow star reads as "not given",
   where a faded solid one reads as an image that failed to load. */
.story__star.is-off { fill: none; stroke: rgba(16, 27, 45, 0.25); stroke-width: 1.3px; }

.stories__nav { display: flex; align-items: center; justify-content: center; gap: 30px; margin-top: 38px; }
.stories__nav > button {
  width: 54px; height: 54px; border-radius: 50%;
  border: 1px solid var(--hair);
  display: grid; place-items: center;
  color: var(--gold-3);
  background: var(--card);
  box-shadow: var(--shadow-sm);
  transition: border-color 0.3s, background 0.3s, transform 0.3s var(--ease), color 0.3s;
}
.stories__nav > button:hover { border-color: var(--gold-2); background: var(--gold-soft); transform: translateY(-2px); }
.stories__nav svg { width: 20px; height: 20px; }
.stories__dots { display: flex; gap: 10px; }
.stories__dots button { padding: 6px 0; }
.stories__dots i { display: block; width: 26px; height: 2px; background: rgba(16,27,45,0.15); transition: background 0.3s, width 0.3s var(--ease); }
.stories__dots button.is-active i { background: var(--gold-2); width: 44px; }
.stories__note { text-align: center; margin-top: 42px; font-size: 12.5px; letter-spacing: 0.06em; color: var(--muted-2); }

/* ═══════════ FAQ ═══════════ */
.faq { background: var(--bg-2); }
.faq__grid { display: grid; grid-template-columns: 1fr 1.35fr; gap: clamp(50px, 7vw, 110px); align-items: start; }
.faq__intro { position: sticky; top: 130px; }
.faq__phone { display: inline-block; margin-top: 30px; }
.faq__phone em {
  display: block;
  font-style: normal; font-size: 10px; font-weight: 600; letter-spacing: 0.4em;
  color: var(--muted-2);
  margin-bottom: 8px;
}
.faq__phone span {
  display: inline-flex; align-items: center; gap: 13px;
  font-family: var(--sans); font-size: 26px; font-weight: 400;
  letter-spacing: 0.04em; font-variant-numeric: tabular-nums;
  color: var(--ink);
  transition: color 0.3s;
}
.faq__phone span svg { width: 21px; height: 21px; color: var(--gold-2); }
.faq__phone:hover span { color: var(--gold-3); }

.faq__item { border-bottom: 1px solid var(--hair-2); }
.faq__item:first-child { border-top: 1px solid var(--hair-2); }
.faq__item summary {
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  padding: 25px 4px;
  font-family: var(--serif);
  font-size: clamp(19px, 1.8vw, 24px);
  font-weight: 600;
  color: var(--ink);
  cursor: pointer;
  list-style: none;
  transition: color 0.3s, padding-left 0.35s var(--ease);
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary:hover { color: var(--gold-3); padding-left: 10px; }
.faq__item summary i {
  flex-shrink: 0;
  position: relative;
  width: 34px; height: 34px;
  border: 1px solid var(--hair);
  border-radius: 50%;
  background: var(--card);
  transition: transform 0.45s var(--ease), border-color 0.3s, background 0.3s;
}
.faq__item summary i::before, .faq__item summary i::after {
  content: ""; position: absolute; top: 50%; left: 50%;
  background: var(--gold-2);
  transform: translate(-50%, -50%);
}
.faq__item summary i::before { width: 12px; height: 1.5px; }
.faq__item summary i::after { width: 1.5px; height: 12px; }
.faq__item[open] summary { color: var(--gold-3); }
.faq__item[open] summary i { transform: rotate(135deg); border-color: var(--gold-2); background: var(--gold-soft); }
.faq__body { padding: 0 4px 26px; color: var(--muted); font-size: 16px; max-width: 62ch; }

/* ═══════════ OFFER ═══════════ */
.offer { position: relative; padding: clamp(70px, 8.5vw, 120px) 0; background: var(--bg); overflow: hidden; }
.offer__pattern {
  position: absolute; inset: 0;
  background-image: radial-gradient(rgba(176, 141, 62, 0.14) 1px, transparent 1px);
  background-size: 26px 26px;
  -webkit-mask-image: radial-gradient(ellipse 70% 80% at 78% 50%, #000 10%, transparent 70%);
  mask-image: radial-gradient(ellipse 70% 80% at 78% 50%, #000 10%, transparent 70%);
}
.offer__grid { position: relative; z-index: 2; display: grid; grid-template-columns: 1fr 1fr; gap: clamp(50px, 7vw, 110px); align-items: center; }
.offer__points { list-style: none; margin: 34px 0 42px; display: grid; gap: 15px; }
.offer__points li { display: flex; align-items: center; gap: 16px; font-size: 16px; color: var(--ink-2); }
.offer__points li::before { content: "✦"; color: var(--gold-2); font-size: 13px; }
.offer__call { display: flex; align-items: center; gap: 18px; }
.offer__call-face {
  width: 56px; height: 56px; border-radius: 50%;
  object-fit: cover;
  border: 2px solid #fff;
  box-shadow: 0 6px 18px rgba(16, 27, 45, 0.18);
}
.offer__call span { display: block; font-size: 10.5px; font-weight: 600; letter-spacing: 0.34em; color: var(--muted-2); margin-bottom: 5px; }
.offer__call-name { font-family: var(--serif); font-size: clamp(20px, 2vw, 25px); font-weight: 600; color: var(--ink); }
.offer__call a {
  font-family: var(--sans); font-size: clamp(24px, 2.4vw, 31px); font-weight: 400;
  letter-spacing: 0.04em; font-variant-numeric: tabular-nums;
  color: var(--ink); transition: color 0.3s;
}
.offer__call a:hover { color: var(--gold-3); }
/* The handset rides along only on a phone, where this becomes a button.
   On a desktop the number is not something you tap, so it stays plain. */
.offer__call-phone svg { display: none; }
/* Sits under the phone number. Selector carries the extra class so it beats the
   large phone styling above, which would otherwise render the address at 31px. */
.offer__call a.offer__call-email {
  display: block;
  margin-top: 7px;
  font-size: clamp(14px, 1.2vw, 16.5px);
  letter-spacing: 0.01em;
  color: var(--muted);
  word-break: break-word;
}
.offer__call a.offer__call-email:hover { color: var(--gold-3); }

/* Border beam — gradient painted once, rotated on the compositor */
.offer__form-wrap { position: relative; border-radius: 26px; padding: 1.5px; }
.border-beam {
  position: absolute; inset: 0;
  border-radius: 26px;
  padding: 1.5px;
  overflow: hidden;
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}
.border-beam::before {
  content: ""; position: absolute; inset: -60%;
  background: conic-gradient(from 0deg, transparent 0 340deg, var(--gold-1) 350deg, var(--gold-2) 355deg, transparent 360deg);
  animation: beamSpin 6s linear infinite;
  will-change: transform;
}
@keyframes beamSpin { to { transform: rotate(360deg); } }

/* IO-driven pause for infinite animations (element + pseudo) */
/* Pausing an offscreen animation stops the work but not the memory: a layer
   promoted by will-change stays resident whether or not anything is moving.
   Releasing the hint as well hands those layers back while the element is out
   of sight, and the next scroll into view re-promotes it. */
.anim-paused, .anim-paused::before, .anim-paused::after {
  animation-play-state: paused !important;
  will-change: auto !important;
}

.offer__form {
  position: relative;
  background: var(--card);
  border: 1px solid var(--hair-2);
  border-radius: 25px;
  padding: clamp(34px, 4vw, 52px);
  box-shadow: var(--shadow-lg);
}
.offer__form-kicker { font-size: 10px; font-weight: 600; letter-spacing: 0.44em; color: var(--gold-2); margin-bottom: 8px; }
.offer__form h3 { font-family: var(--serif); font-size: clamp(26px, 2.6vw, 34px); font-weight: 600; color: var(--ink); margin-bottom: 32px; }

.field { position: relative; margin-bottom: 26px; }
.field__row { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.field input, .field select {
  width: 100%;
  padding: 14px 2px 11px;
  font-family: var(--sans); font-size: 16.5px; font-weight: 300;
  color: var(--ink);
  background: transparent;
  border: 0; border-bottom: 1px solid rgba(16, 27, 45, 0.2);
  border-radius: 0;
  transition: border-color 0.35s;
  appearance: none;
}
.field select { cursor: pointer; padding-top: 24px; }
.field label {
  position: absolute; left: 2px; top: 14px;
  font-size: 15px; color: var(--muted-2);
  pointer-events: none;
  transition: top 0.3s var(--ease), font-size 0.3s var(--ease), color 0.3s, letter-spacing 0.3s;
}
.field input:focus, .field select:focus { outline: none; border-bottom-color: var(--gold-2); }
.field input:focus + label,
.field input:not(:placeholder-shown) + label,
.field .field__static {
  top: -8px; font-size: 10px; font-weight: 600; letter-spacing: 0.28em; color: var(--gold-2); text-transform: uppercase;
}
.field--select .field__static { position: absolute; left: 2px; }
.offer__form .btn { margin-top: 8px; }
.offer__privacy { margin-top: 16px; text-align: center; font-size: 12px; letter-spacing: 0.08em; color: var(--muted-2); }

/* Thank-you state */
.offer__thanks { text-align: center; padding: 30px 6px; }
.offer__thanks-ring {
  width: 84px; height: 84px; margin: 0 auto 26px;
  border: 1px solid var(--gold-2); border-radius: 50%;
  display: grid; place-items: center;
  background: var(--gold-soft);
}
.offer__thanks-ring svg { width: 34px; height: 34px; color: var(--gold-3); }
.offer__thanks h3 { margin-bottom: 12px !important; }
.offer__thanks p { color: var(--muted); font-size: 16px; }
.offer__thanks strong { color: var(--gold-3); font-weight: 600; }

/* ═══════════ FOOTER ═══════════ */
.footer { background: var(--navy); color: rgba(243, 237, 225, 0.65); padding: clamp(60px, 7vw, 90px) 0 36px; }
.footer__top { display: flex; justify-content: space-between; align-items: flex-start; gap: 60px; flex-wrap: wrap; padding-bottom: clamp(40px, 5vw, 64px); border-bottom: 1px solid rgba(243, 237, 225, 0.1); }
.footer .brand__tag { color: #c9a961; }
.footer__cols { display: flex; gap: clamp(30px, 7vw, 110px); flex-wrap: wrap; }
.footer__col h4 { font-family: var(--caps); font-size: 11px; letter-spacing: 0.4em; color: rgba(243, 237, 225, 0.4); margin-bottom: 22px; }
.footer__col a { display: block; padding: 7px 0; font-size: 15px; font-weight: 300; letter-spacing: 0.04em; transition: color 0.3s, padding-left 0.3s var(--ease); }
.footer__col a:hover { color: #e5cf8c; padding-left: 6px; }
.footer__gold { color: #c9a961 !important; }
.footer__bottom { padding-top: 30px; display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap; font-size: 11px; letter-spacing: 0.14em; color: rgba(243, 237, 225, 0.3); }

/* ═══════════ STICKY CTA ═══════════ */
.sticky-cta {
  position: fixed; left: 14px; right: 14px; bottom: 14px; z-index: 90;
  display: none;
  gap: 10px;
  transform: translateY(130%);
  transition: transform 0.45s var(--ease);
}
.sticky-cta.is-visible { transform: none; }
.sticky-cta__call {
  flex-shrink: 0;
  display: flex; align-items: center; justify-content: center; gap: 9px;
  padding: 17px 19px;
  border-radius: 999px;
  /* Solid light chip so it reads on both the ivory and the navy sections */
  background: #fffdf9;
  border: 1px solid rgba(176, 141, 62, 0.45);
  color: var(--gold-3);
  box-shadow: 0 12px 32px rgba(13, 25, 48, 0.28);
  font-size: 12px; font-weight: 700; letter-spacing: 0.18em; text-indent: 0.18em;
}
.sticky-cta__call svg { width: 18px; height: 18px; flex-shrink: 0; }
.sticky-cta__main {
  flex: 1;
  text-align: center;
  padding: 17px;
  border-radius: 999px;
  background: linear-gradient(115deg, var(--gold-3), var(--gold-2) 45%, var(--gold-1));
  color: #fff;
  font-size: 12px; font-weight: 700; letter-spacing: 0.22em; text-indent: 0.22em;
  box-shadow: 0 16px 44px rgba(176, 141, 62, 0.5);
}

/* ═══════════ REVEAL DEFAULTS ═══════════ */
.js [data-reveal], .js [data-hero-fade], .js [data-reveal-img], .js [data-hero-visual] { opacity: 0; }
.js.gsap-off [data-reveal], .js.gsap-off [data-hero-fade], .js.gsap-off [data-reveal-img], .js.gsap-off [data-hero-visual] { opacity: 1; }
.is-revealed { opacity: 1 !important; }

/* ═══════════ RESPONSIVE ═══════════ */
@media (max-width: 1120px) {
  .situations__grid { grid-template-columns: repeat(2, 1fr); }
  .sit { min-height: 200px; }
}
/* The five nav links, the phone and the offer button need about 1220px
   between them. Below that they were overflowing the row and pushing the
   offer button off the right of the screen, which is every iPad in landscape
   and any half-width laptop window. The links move into the menu here; the
   phone and the button, the two things a seller actually presses, stay. */
@media (max-width: 1220px) {
  .nav__links { display: none; }
  .nav__burger { display: flex; }
}
@media (max-width: 980px) {
  .nav__links { display: none; }
  .nav__burger { display: flex; padding: 17px 10px; }
  .nav__actions .btn { display: none; }
  /* The phone used to be hidden here, which left someone on a phone, on the
     page most likely to be read on a phone, with no way to call without first
     opening the menu. It stays, shortened to the word so it fits beside the
     logo, and gold so it reads as an action rather than as a detail. */
  .nav__actions { gap: 8px; }
  .nav__phone {
    padding: 12px 15px;
    gap: 7px;
    border-color: rgba(176, 141, 62, 0.5);
    background: rgba(255, 253, 249, 0.9);
    color: var(--gold-3);
    font-size: 12px; font-weight: 700; letter-spacing: 0.12em; text-indent: 0.12em;
  }
  .nav__phone svg { width: 16px; height: 16px; }
  .nav__phone-num { display: none; }
  .nav__phone-word { display: inline; }
  /* The header pill is small and says only "Call". This is the one a seller
     sees without looking for it, on the first screen, next to the form. */
  .hero__call { display: flex; }

  /* Trimmed so the call button clears the fold on a phone. The nav is 86px
     tall, so 104px of padding still leaves it air, and the gaps between the
     eyebrow, the sub and the form were sized for a desktop hero that has far
     more room than this one. */
  .hero { padding-top: 104px; }
  .hero__eyebrow { margin-bottom: 2.4vh; }
  .hero__sub { margin-bottom: 20px; }
  .herobar { padding: 12px; }
  .hero { padding-top: 120px; }
  .hero__grid { grid-template-columns: 1fr; gap: 70px; }
  .hero__visual { max-width: 460px; margin-inline: auto; }
  .about__grid, .offer__grid, .faq__grid { grid-template-columns: 1fr; }
  .about__media { max-width: 560px; margin-inline: auto; }
  .faq__intro { position: static; }
  .process__line { left: 8px; }
  .process__step, .process__step--right {
    width: 100%; margin: 0; flex-direction: row; text-align: left;
    padding: 0 0 0 44px;
  }
  .process__step--right .process__card p { margin-left: 0; }
  .compare__head, .compare__row { grid-template-columns: 1fr 1fr 1fr; gap: 10px; }
}
@media (max-width: 620px) {
  body { font-size: 16px; }
  .situations__grid { grid-template-columns: 1fr; gap: 12px; }
  .sit { min-height: 0; padding: 22px 20px 18px; }
  .sit i { font-size: 40px; top: 14px; right: 18px; }
  .sit h3 { font-size: 21px; margin: 16px 0 6px; }
  .sit p { font-size: 14px; }
  .sit span { margin-top: 12px; padding-top: 10px; }
  .field__row { grid-template-columns: 1fr; gap: 0; }
  .herobar { flex-wrap: wrap; border-radius: 24px; padding: 14px; gap: 10px; }
  .herobar > svg { display: none; }
  .herobar input { flex: 1 1 100%; padding: 4px 6px 10px; border-bottom: 1px solid var(--hair-2); border-radius: 0; }
  .herobar__btn { width: 100%; }
  .herobar__note { text-align: center; }
  .hero__stats { flex-wrap: wrap; gap: 22px; }
  .hero__sep { display: none; }
  .hero__card { left: 2%; bottom: -3%; padding: 11px 16px 11px 11px; }
  .hero__card-text em { font-size: 12px; }
  .sticky-cta { display: flex; }
  .compare__head { display: none; }
  .compare__row { grid-template-columns: 1fr; gap: 4px; padding-block: 18px; }
  .compare__row b::before { content: "BIGGER & BETTER: "; font-family: var(--sans); font-size: 10px; font-weight: 600; letter-spacing: 0.2em; color: var(--gold-2); display: block; margin-top: 6px; }
  .compare__row em::before { content: "LISTING: "; font-size: 10px; font-weight: 600; letter-spacing: 0.2em; display: block; margin-top: 6px; }
  .about__badge { top: -18px; left: 0; padding: 14px 18px; }
  /* 300px was sized for a desktop line length. On a phone the two short
     reviews are 153px and 185px tall, so the block held up to 115px of empty
     space under them before the arrows. */
  .stories__viewport { min-height: 210px; }

  /* Touch targets. The carousel dots were 26x14 around a 2px line, the email
     link 24px tall and the hero input 39px. Padding grows the hit area without
     changing how any of them look. */
  .stories__nav { margin-top: 22px; gap: 20px; }
  .stories__dots { gap: 4px; }
  .stories__dots button { padding: 21px 6px; }
  /* The dot track grows with every story added, and the two arrows sit either
     side of it on one row. At six stories the full-width dashes pushed both
     arrows past the edges of a 390px screen. Shortening the dashes here buys
     room for roughly four more stories before this needs looking at again. */
  .stories__dots i { width: 16px; }
  .stories__dots button.is-active i { width: 28px; }
  .offer__call a.offer__call-email { padding: 11px 0; margin-top: 0; }
  .footer__col a { padding-block: 10px; }
  .nav-overlay__foot a { padding-block: 9px; }
  .offer__call a[href^="tel:"] { display: inline-block; padding-block: 6px; }
  .herobar input { padding: 9px 6px 13px; }
  .footer__top { flex-direction: column; }
  .watermark { display: none; }

  /* ── Calling, on the device that can actually make the call ──────────────
     Sellers who find this page are usually in a hurry and often would rather
     talk than fill in a form. Every screen now has a way to dial: the pill in
     the header, the bar at the bottom, and the number in the offer section,
     which is a button here rather than a line of text. */
  .sticky-cta { gap: 9px; }
  .sticky-cta__call { padding: 17px 17px; font-size: 11px; letter-spacing: 0.16em; text-indent: 0.16em; }
  .sticky-cta__main { padding: 17px 10px; font-size: 11.5px; letter-spacing: 0.16em; text-indent: 0.16em; }

  .offer__call { width: 100%; }
  .offer__call > div { width: 100%; }
  .offer__call a.offer__call-phone {
    display: flex; align-items: center; justify-content: center; gap: 12px;
    width: 100%;
    margin-top: 6px;
    padding: 16px 20px;
    border: 1px solid rgba(176, 141, 62, 0.55);
    border-radius: 999px;
    background: rgba(255, 253, 249, 0.92);
    box-shadow: var(--shadow-sm);
    font-size: 24px;
    color: var(--ink);
  }
  .offer__call a.offer__call-phone svg { display: block; width: 20px; height: 20px; color: var(--gold-3); flex-shrink: 0; }
  .offer__call a.offer__call-phone span {
    display: inline; margin: 0;
    font-size: 24px; font-weight: 400; letter-spacing: 0.04em;
    color: var(--ink); font-variant-numeric: tabular-nums;
  }
  .offer__call a.offer__call-email { display: block; text-align: center; margin-top: 14px; }

  /* ── Wrapping ───────────────────────────────────────────────────────────
     The wide tracking that gives these labels their air on a desktop is what
     breaks them on a 390px screen: every one of them wrapped, several leaving
     a single word stranded on its own line. */
  .kicker { font-size: 10.5px; letter-spacing: 0.24em; gap: 10px; margin-bottom: 18px; }
  .kicker::before, .kicker--center::after { width: 24px; }
  .offer__call span { letter-spacing: 0.22em; font-size: 10px; }
  .hero__eyebrow .shiny-text { font-size: 11px; letter-spacing: 0.18em; padding: 9px 16px; text-align: center; }
  .hero__sub, .herobar__note, .hero__eyebrow { text-wrap: balance; }
}

/* ═══════════ PEOPLE ═══════════ */
.people { background: linear-gradient(180deg, var(--bg-2), var(--bg)); overflow: hidden; }
.people__grid {
  display: grid; grid-template-columns: 1fr 1.2fr;
  gap: clamp(50px, 7vw, 110px);
  align-items: center;
}
/* No portrait on the page at the moment: the two people shown were placeholders and
   have been removed. The media styles below are kept so a real photo can be dropped
   back in without rebuilding this section. */
.people__grid--solo {
  grid-template-columns: minmax(0, 780px);
  justify-content: center;
}
.people__media { position: relative; max-width: 470px; }
.people__portrait {
  border-radius: 235px 235px 22px 22px;
  overflow: hidden;
  aspect-ratio: 4 / 5.4;
  box-shadow: var(--shadow-lg);
}
.people__portrait img { width: 100%; height: 110%; object-fit: cover; }
.people__keyline {
  position: absolute; inset: -14px;
  border: 1px solid var(--hair);
  border-radius: 249px 249px 30px 30px;
  pointer-events: none;
}
.people__second {
  position: absolute; right: -9%; bottom: -7%;
  width: 42%;
  border-radius: 18px;
  overflow: hidden;
  border: 6px solid var(--bg);
  box-shadow: var(--shadow-md);
  background: var(--card);
}
.people__second img { width: 100%; aspect-ratio: 4 / 4.4; object-fit: cover; }
.people__second figcaption { padding: 11px 14px 12px; }
.people__second strong { display: block; font-family: var(--caps); font-size: 10.5px; letter-spacing: 0.16em; color: var(--ink); }
.people__second em { font-style: normal; font-family: var(--mono); font-size: 8px; letter-spacing: 0.22em; color: var(--gold-3); }
.people__quote {
  position: relative;
  font-family: var(--serif); font-style: italic;
  font-size: clamp(21px, 2.1vw, 26px); font-weight: 500;
  line-height: 1.55;
  color: var(--ink-2);
  margin: 4px 0 30px;
  padding-left: 26px;
  border-left: 1px solid rgba(176, 141, 62, 0.4);
}
.people__quote::before {
  content: "“";
  position: absolute; left: -14px; top: -34px;
  font-family: var(--serif); font-size: 100px; line-height: 1;
  color: rgba(176, 141, 62, 0.25);
}
.people__sig { display: flex; align-items: center; gap: 28px; margin-bottom: 32px; flex-wrap: wrap; }
.people__sig-draw { width: 195px; height: auto; color: var(--ink); flex-shrink: 0; }
.people__sig-id strong { display: block; font-family: var(--caps); font-size: 12.5px; letter-spacing: 0.3em; color: var(--ink); margin-bottom: 4px; }
.people__sig-id span { font-family: var(--mono); font-size: 9px; letter-spacing: 0.26em; color: var(--gold-3); }
.people__facts { list-style: none; display: grid; gap: 12px; border-top: 1px solid var(--hair-2); padding-top: 26px; }
.people__facts li { display: flex; gap: 14px; font-size: 15.5px; color: var(--muted); }
.people__facts li::before { content: "✦"; color: var(--gold-2); font-size: 12px; line-height: 2; }

/* ═══════════ FORM STEPS ═══════════ */
.offer__step { display: none; }
.offer__step.is-active { display: block; animation: stepIn 0.55s var(--ease); }
@keyframes stepIn { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
.offer__addr {
  display: flex; align-items: center; gap: 12px;
  font-family: var(--mono); font-size: 12.5px; letter-spacing: 0.03em;
  color: var(--gold-3);
  background: var(--gold-soft);
  border: 1px solid var(--hair);
  border-radius: 10px;
  padding: 11px 15px;
  margin-bottom: 26px;
}
.offer__addr span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.offer__addr button {
  margin-left: auto; flex-shrink: 0;
  font-family: var(--sans); font-size: 10.5px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--muted);
  text-decoration: underline; text-underline-offset: 3px;
  transition: color 0.3s;
}
.offer__addr button:hover { color: var(--ink); }
.offer__consent { display: flex; align-items: flex-start; gap: 12px; margin: 0 0 20px; cursor: pointer; }
.offer__consent input { width: 16px; height: 16px; margin-top: 3px; flex-shrink: 0; accent-color: var(--gold-2); }
.offer__consent span { font-size: 13px; line-height: 1.55; color: var(--muted); }
/* Terms and privacy sit inside the label. Clicking an anchor inside a label does not
   toggle the control it labels, so opening either one leaves the box untouched. */
.offer__consent a {
  color: var(--gold-3);
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-thickness: 1px;
}
.offer__consent a:hover { color: var(--gold-2); }

/* ═══════════ FOOTER EXTRAS ═══════════ */
.footer__phone { font-variant-numeric: tabular-nums; letter-spacing: 0.06em; font-size: 16px !important; }
.footer__eho { display: flex; align-items: center; gap: 9px; letter-spacing: 0.22em; }
.footer__eho svg { width: 17px; height: 17px; flex-shrink: 0; opacity: 0.7; }

/* ═══════════ NEW RESPONSIVE ═══════════ */
@media (max-width: 980px) {
  .people__grid { grid-template-columns: 1fr; }
  .people__media { margin-inline: auto; }
}
@media (max-width: 620px) {
  .people__quote { font-size: 19px; padding-left: 20px; }
  .people__sig { gap: 18px; }
  .people__sig-draw { width: 160px; }
  .offer__call { align-items: flex-start; }
}

/* ═══════════ SITUATIONS RAIL — desktop horizontal scroll ═══════════ */
@media (min-width: 981px) {
  .situations {
    display: flex; flex-direction: column; justify-content: center;
    min-height: 100svh;
    padding: clamp(60px, 8vh, 110px) 0;
  }
  .situations__grid {
    display: flex;
    gap: 26px;
    width: max-content;
    margin-top: clamp(40px, 5vh, 64px);
    padding-right: 10vw;
    will-change: transform;
  }
  .situations__grid { align-items: flex-start; }
  .sit { width: 395px; min-height: 320px; flex-shrink: 0; padding: 36px 32px 28px; }
  .sit:nth-child(even) { margin-top: 34px; }
  .sit h3 { font-size: 27px; margin-top: 36px; }
  .sit i { font-size: 68px; top: 24px; right: 30px; }
  .situations__hint {
    display: inline-flex; align-items: center; gap: 12px;
    margin-top: clamp(30px, 4vh, 46px);
    font-family: var(--mono); font-size: 10px; letter-spacing: 0.3em;
    color: var(--muted-2);
  }
  .situations__hint i {
    width: 60px; height: 1px; background: var(--hair);
    position: relative; overflow: hidden;
  }
  .situations__hint i::after {
    content: ""; position: absolute; left: 0; top: 0; width: 40%; height: 100%;
    background: var(--gold-2);
    transform: translateX(-100%);
    animation: hintSlide 2s var(--ease) infinite;
  }
  @keyframes hintSlide { to { transform: translateX(375%); } }
}
@media (max-width: 980px) {
  .situations__hint { display: none; }
}

/* ═══════════ SMALL SCREENS: THE HEADER ROW ═══════════ */
@media (max-width: 620px) {
  /* The header now carries a call button as well as the logo and the menu,
     and the three do not fit at 390px without help. The width comes out of
     the strapline, whose 0.235em tracking was making 25 characters occupy
     157px: most of it is air, and the line stays legible without it. */
  .nav__inner { gap: 10px; }
  .brand { gap: 10px; }
  .brand__mark { width: 38px; height: 38px; }
  .brand__name { font-size: 15px; letter-spacing: 0.18em; }
  .brand__tag { font-size: 7px; letter-spacing: 0.1em; }
  .nav__burger { padding: 17px 6px; }
}
@media (max-width: 414px) {
  /* 375px, the width of an iPhone SE or an 8, was eight pixels short. Tighter
     tracking on the wordmark covers it without shrinking the type. */
  .brand__name { letter-spacing: 0.14em; }
  .brand__tag { letter-spacing: 0.07em; }
}
@media (max-width: 360px) {
  /* At 320px the wordmark alone is wider than everything else in the row put
     together. The monogram carries the brand on its own here, and the space
     buys a call button that says what it does. */
  .brand__text { display: none; }
  .nav__phone { padding: 12px 14px; }
}

/* ═══════════ REDUCED MOTION ═══════════ */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .loader { display: none; }
  [data-reveal], [data-hero-fade], [data-reveal-img], [data-hero-visual] { opacity: 1 !important; transform: none !important; }
}

/* ═══════════ EXIT INTENT ═══════════ */
.exit {
  position: fixed; inset: 0; z-index: 900;
  display: grid; place-items: center;
  padding: 20px;
}
.exit[hidden] { display: none; }
.exit__scrim {
  position: absolute; inset: 0;
  background: rgba(13, 25, 48, 0.55);
  backdrop-filter: blur(3px);
  opacity: 0;
  transition: opacity 0.35s var(--ease);
}
.exit__card {
  position: relative;
  width: min(470px, 100%);
  max-height: calc(100vh - 40px);
  overflow-y: auto;
  background: var(--card);
  border: 1px solid var(--hair);
  border-radius: 18px;
  box-shadow: var(--shadow-lg);
  padding: clamp(28px, 4vw, 40px) clamp(24px, 3.4vw, 38px) clamp(24px, 3vw, 32px);
  text-align: center;
  opacity: 0;
  transform: translateY(14px) scale(0.98);
  transition: opacity 0.4s var(--ease), transform 0.4s var(--ease);
}
.exit.is-open .exit__scrim { opacity: 1; }
.exit.is-open .exit__card { opacity: 1; transform: none; }

.exit__x {
  position: absolute; top: 12px; right: 12px;
  width: 34px; height: 34px;
  display: grid; place-items: center;
  border-radius: 50%;
  color: var(--muted-2);
  transition: background 0.25s, color 0.25s;
}
.exit__x svg { width: 17px; height: 17px; }
.exit__x:hover { background: var(--bg-2); color: var(--ink); }

.exit__eyebrow {
  font-family: var(--caps); font-size: 10px; letter-spacing: 0.32em;
  text-transform: uppercase; color: var(--gold-2); margin-bottom: 12px;
}
.exit__title {
  font-family: var(--serif); font-weight: 500;
  font-size: clamp(30px, 4.4vw, 40px); line-height: 1.1;
  color: var(--ink); margin-bottom: 12px;
}
.exit__body { font-size: 15.5px; line-height: 1.65; color: var(--muted); margin-bottom: 20px; }

.exit__form { display: flex; flex-direction: column; text-align: left; margin-top: 20px; }
.exit__label {
  font-family: var(--sans); font-size: 11px; font-weight: 500;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--muted-2); margin-bottom: 6px;
}
.exit__input {
  font-family: var(--sans); font-size: 15.5px; color: var(--ink);
  background: var(--bg); border: 1px solid var(--hair);
  border-radius: 8px; padding: 12px 14px; margin-bottom: 16px;
  width: 100%;
  transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease);
}
.exit__input::placeholder { color: var(--muted-2); opacity: 0.75; }
.exit__input:focus {
  outline: none; border-color: var(--gold-2);
  box-shadow: 0 0 0 3px var(--gold-soft);
}
.exit__input.is-bad { border-color: #c2603f; }

.exit__consent { display: flex; gap: 10px; align-items: flex-start; cursor: pointer; margin-bottom: 16px; }
.exit__consent input { width: 15px; height: 15px; margin-top: 3px; flex-shrink: 0; accent-color: var(--gold-2); }
.exit__consent span { font-size: 12px; line-height: 1.5; color: var(--muted); }
.exit__consent a { color: var(--gold-3); text-decoration: underline; text-underline-offset: 2px; }
.exit__consent a:hover { color: var(--gold-2); }

.exit__err { font-size: 12.5px; color: #9a3412; margin: 0 0 12px; line-height: 1.5; }
.exit__err:empty { display: none; }
/* Same treatment on the main offer form, so a problem reads the same way
   wherever someone meets it. */
.offer__err { font-size: 12.5px; color: #9a3412; margin: 0 0 12px; line-height: 1.5; }
.offer__err:empty { display: none; }
.offer__form input.is-bad { border-color: #c2603f; }

.exit__thanks { padding: 12px 0 4px; }
.exit__ring {
  width: 54px; height: 54px; margin: 0 auto 18px;
  border-radius: 50%; display: grid; place-items: center;
  border: 1px solid var(--hair); color: var(--gold-2);
}
.exit__ring svg { width: 24px; height: 24px; }

.exit__alt { margin-top: 14px; font-size: 13px; color: var(--muted-2); }
.exit__alt a { color: var(--gold-3); font-variant-numeric: tabular-nums; }
.exit__alt a:hover { color: var(--gold-2); }

@media (prefers-reduced-motion: reduce) {
  .exit__scrim, .exit__card { transition: none; }
}

/* The panel's extra fields, revealed when it is opened from the hero bar. */
.exit__more[hidden] { display: none; }
.exit__more { display: block; }
select.exit__input { appearance: none; cursor: pointer; background-image: none; }