/* ==========================================================
   SOLD ON AMELIA ISLAND — Kelly Marine & Will Henderson
   Coastal luxury · BHHS cabernet #670038 · fern #8AA954 · sky #BAD8E1
   (sampled from brand-bhhs-colors.png, "Calm Theme" palette)
   ========================================================== */

:root {
  --cabernet: #670038;
  --cabernet-bright: #970a52;
  --cabernet-glow: rgba(151,10,82, 0.35);
  --fern: #8aa954;
  /* Accent-button gradient: fern cooled a touch toward seafoam/sky so the
     CTAs read coastal rather than lawn-green. */
  --accent-grad: linear-gradient(120deg, #7dad74, #8ac2ab);
  --sky: #bad8e1;
  --pearl: #fdfbf7;
  --night: #0b0710;
  --ink-soft: rgba(253, 251, 247, 0.65);
  --ink-faint: rgba(253, 251, 247, 0.4);
  --glass-border: rgba(255, 255, 255, 0.1);
  --ease-ios: cubic-bezier(0.16, 1, 0.3, 1);
  --nav-h: 84px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
/* overflow-x: clip (not hidden) on BOTH roots: decorative layers that bleed
   past the viewport — the featured glow, the ticker — must not create a
   horizontal pan area on touch devices, and `clip` removes the scrollable
   overflow without turning the root into a scroll container. */
html { scroll-behavior: smooth; scroll-padding-top: 96px; overflow-x: clip; }
body {
  font-family: 'Inter', -apple-system, sans-serif;
  background: var(--night);
  color: var(--pearl);
  line-height: 1.6;
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
}
.serif { font-family: 'Playfair Display', serif; }
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; }
::selection { background: var(--fern); color: var(--night); }
/* Visually hidden, still read by screen readers and search engines. Used for
   the search-intent phrase inside the masthead <h1> so the wordmark can stay
   the only thing visible. */
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

/* ---------- Ambient layers ---------- */
.bg-ambient {
  position: fixed; inset: 0; z-index: -3; pointer-events: none;
  background: linear-gradient(-45deg, #0b0710, #1e0616, #0e1626, #40062a, #0b1220);
  background-size: 400% 400%;
  animation: ambientFlow 60s ease infinite;
}
@keyframes ambientFlow {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}
#seaMistCanvas { position: fixed; inset: 0; z-index: -2; width: 100%; height: 100%; pointer-events: none; mix-blend-mode: screen; opacity: .5; }
#depth-pressure { position: fixed; inset: 0; z-index: -1; pointer-events: none; background: linear-gradient(to bottom, transparent, rgba(0,0,0,.82), #000); opacity: 0; }

/* ---------- Preloader ---------- */
/* The preloader's backdrop is PIXEL-IDENTICAL to .bg-ambient — same gradient,
   same 400% canvas, same 60s flow started at the same moment — so its color
   field IS the page's color field, not a layer sitting on top. The exit fades
   this surface into the page while the identical gradient keeps flowing
   beneath: the colors never move or lift, the site simply develops inside
   them. */
#preloader {
  position: fixed; inset: 0; z-index: 10000;
  background: linear-gradient(-45deg, #0b0710, #1e0616, #0e1626, #40062a, #0b1220);
  background-size: 400% 400%;
  animation: ambientFlow 60s ease infinite;
  display: flex; align-items: center; justify-content: center;
}
#preloader::before {
  content: ''; position: absolute; width: min(70vw, 640px); height: min(70vw, 640px);
  border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, rgba(151,10,82,.32), transparent 65%);
  filter: blur(10px);
}
/* Exit: wordmark and glow slip away first; then a long, even dissolve. The
   gradient keeps flowing at the same phase as .bg-ambient the whole time, so
   where the page shows ambient color the fade is invisible — over the hero,
   the photo slowly blooms up through the standing colors instead of a layer
   peeling off. */
#preloader.done {
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity 2.4s ease-in-out, visibility 0s linear 2.4s;
}
#preloader::before { transition: opacity .7s var(--ease-ios); }
#preloader.done::before { opacity: 0; }
#preloader.done .preloader-inner { animation: preloaderInnerOut .55s var(--ease-ios) forwards; }
@keyframes preloaderInnerOut {
  to { opacity: 0; transform: translateY(-10px) scale(1.04); }
}
@media (prefers-reduced-motion: reduce) {
  #preloader.done { transition: opacity .4s; }
  #preloader.done .preloader-inner { animation: none; opacity: 0; }
}
.preloader-inner { position: relative; text-align: center; animation: preloaderIn 1s var(--ease-ios); }
.preloader-wordmark {
  font-family: 'Italiana', 'Playfair Display', serif;
  font-size: clamp(1.9rem, 6vw, 2.8rem); letter-spacing: .08em;
  text-transform: uppercase; color: var(--pearl);
  text-shadow: 0 0 44px rgba(186,216,225,.22);
}
.preloader-wave { width: 132px; margin: .7rem auto .5rem; }
.preloader-wave path { stroke-dasharray: 200; stroke-dashoffset: 200; }
.preloader-wave .wave-fern { animation: waveDraw 1.6s var(--ease-ios) forwards .2s; }
.preloader-wave .wave-sky { animation: waveDraw 1.6s var(--ease-ios) forwards .55s; }
.preloader-sub { font-size: .65rem; letter-spacing: .4em; text-transform: uppercase; color: var(--ink-faint); }
@keyframes waveDraw { to { stroke-dashoffset: 0; } }
@keyframes preloaderIn { from { opacity: 0; transform: translateY(12px); } }

/* ---------- Scroll progress ---------- */
#scroll-progress {
  position: fixed; top: 0; left: 0; height: 3px; width: 0%; z-index: 200;
  background: linear-gradient(90deg, var(--cabernet-bright), var(--fern));
  box-shadow: 0 0 12px var(--cabernet-glow);
}

/* ---------- Custom cursor ---------- */
body.cursor-on * { cursor: none !important; }
#custom-cursor {
  position: fixed; top: 0; left: 0; width: 38px; height: 38px;
  border: 1.5px solid var(--fern); border-radius: 50%;
  transform: translate(-50%, -50%); pointer-events: none; z-index: 9999;
  transition: width .25s, height .25s, background .25s, opacity .3s;
  mix-blend-mode: difference; opacity: 0;
}
#custom-cursor::after { content: ''; position: absolute; top: 50%; left: 50%; width: 4px; height: 4px; background: var(--fern); border-radius: 50%; transform: translate(-50%, -50%); }
body.cursor-hover #custom-cursor { width: 58px; height: 58px; background: rgba(138,169,84, .12); }
@media (max-width: 1023px) { #custom-cursor { display: none !important; } }

/* ---------- Glass ---------- */
.glass, .glass-dark {
  background: linear-gradient(135deg, rgba(255,255,255,.07), rgba(255,255,255,.02));
  backdrop-filter: blur(22px) saturate(170%);
  -webkit-backdrop-filter: blur(22px) saturate(170%);
  border: 1px solid var(--glass-border);
  border-top-color: rgba(255,255,255,.2);
  box-shadow: 0 22px 44px -12px rgba(0,0,0,.5), inset 0 1px 14px rgba(255,255,255,.04);
  border-radius: 1.6rem;
}
.glass-dark { background: linear-gradient(135deg, rgba(30,14,24,.45), rgba(10,8,14,.25)); }

/* ---------- Reveal ---------- */
.reveal { opacity: 0; transform: translateY(30px); transition: opacity 1.1s var(--ease-ios), transform 1.1s var(--ease-ios); }
.reveal.active { opacity: 1; transform: translateY(0); }
.delay-100 { transition-delay: .1s; }
.delay-200 { transition-delay: .2s; }
.delay-300 { transition-delay: .3s; }

/* ---------- Shared type ---------- */
.kicker {
  display: inline-block; font-size: .68rem; font-weight: 700;
  letter-spacing: .32em; text-transform: uppercase; color: var(--fern);
  margin-bottom: 1.1rem;
}
.kicker.light { color: var(--sky); }
.section-head { text-align: center; max-width: 760px; margin: 0 auto 3.5rem; padding: 0 1.5rem; }
.section-head h2 { font-size: clamp(2.4rem, 5vw, 3.8rem); font-weight: 600; line-height: 1.08; }
.section-sub { color: var(--ink-soft); margin-top: 1.1rem; font-size: 1.05rem; }
.amp-script { font-family: 'Great Vibes', cursive; font-weight: 400; }
.amp-script.accent { color: var(--fern); }

/* ---------- Buttons ---------- */
.btn-accent, .btn-outline {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 1rem 2.2rem; border-radius: 999px;
  font-size: .72rem; font-weight: 800; letter-spacing: .18em; text-transform: uppercase;
  transition: all .35s var(--ease-ios); text-align: center;
}
.btn-accent { background: var(--accent-grad); color: #0f1a09; box-shadow: 0 10px 28px rgba(122,178,146,.28); }
.btn-accent:hover { transform: translateY(-2px); box-shadow: 0 16px 36px rgba(122,178,146,.42); }
.btn-outline { border: 1px solid rgba(255,255,255,.35); color: var(--pearl); background: rgba(255,255,255,.04); }
.btn-outline:hover { background: var(--pearl); color: var(--night); }
button:active, a:active { transform: scale(.98); }

/* ==========================================================
   NAVBAR
   ========================================================== */
nav#navbar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 150;
  padding: 1.1rem 0; transition: all .5s var(--ease-ios);
}
nav#navbar.scrolled {
  padding: .55rem 0;
  background: linear-gradient(135deg, rgba(20,10,18,.72), rgba(10,8,14,.6));
  backdrop-filter: blur(22px) saturate(170%);
  -webkit-backdrop-filter: blur(22px) saturate(170%);
  border-bottom: 1px solid var(--glass-border);
  box-shadow: 0 18px 40px -18px rgba(0,0,0,.6);
}
.nav-inner { max-width: 1700px; margin: 0 auto; padding: 0 2rem; display: flex; align-items: center; gap: 1.5rem; }
.nav-brand { display: flex; align-items: center; gap: .85rem; flex-shrink: 0; }
.nav-brand-text { display: flex; flex-direction: column; line-height: 1.25; }
.nav-brand-text strong { font-family: 'Italiana', 'Playfair Display', serif; font-size: .98rem; font-weight: 400; letter-spacing: .1em; }
.nav-brand-text span { font-size: .58rem; letter-spacing: .2em; text-transform: uppercase; color: var(--fern); }
.nav-links { display: flex; gap: 2.4rem; margin: 0 auto; }
.nav-links a { font-size: .68rem; font-weight: 700; letter-spacing: .22em; text-transform: uppercase; color: var(--ink-soft); transition: color .3s; }
.nav-links a:hover { color: var(--fern); }
.nav-actions { display: flex; align-items: center; gap: .7rem; flex-shrink: 0; }
.nav-logo-box { background: #fff; border-radius: 9px; padding: 5px 10px; height: 38px; display: flex; align-items: center; border: 1px solid rgba(138,169,84,.5); }
.nav-logo-box img { height: 100%; width: auto; object-fit: contain; }
.btn-nav {
  padding: .68rem 1.35rem; border-radius: 999px; font-size: .62rem; font-weight: 800;
  letter-spacing: .16em; text-transform: uppercase; transition: all .35s var(--ease-ios); white-space: nowrap;
}
.btn-nav em { font-style: normal; opacity: .75; font-weight: 600; }
.btn-nav-outline { border: 1px solid rgba(255,255,255,.35); color: var(--pearl); }
.btn-nav-outline:hover { background: var(--pearl); color: var(--night); }
.btn-nav-accent { background: var(--accent-grad); color: #0f1a09; }
.btn-nav-accent:hover { box-shadow: 0 8px 22px rgba(138,169,84,.4); }
.nav-burger { display: none; flex-direction: column; gap: 7px; padding: 10px; }
.nav-burger span { display: block; width: 26px; height: 2px; background: var(--pearl); transition: all .35s var(--ease-ios); }
.nav-burger.open span:first-child { transform: translateY(4.5px) rotate(45deg); }
.nav-burger.open span:last-child { transform: translateY(-4.5px) rotate(-45deg); }

/* Mobile menu */
#mobile-menu {
  position: fixed; inset: 0; z-index: 140; background: rgba(8,5,10,.96);
  backdrop-filter: blur(26px); -webkit-backdrop-filter: blur(26px);
  display: flex; align-items: center; justify-content: center;
  opacity: 0; visibility: hidden; transition: all .45s var(--ease-ios);
}
#mobile-menu.open { opacity: 1; visibility: visible; }
.mobile-menu-inner { display: flex; flex-direction: column; align-items: center; gap: 1.6rem; width: 100%; max-width: 340px; padding: 0 1.5rem; }
.mm-link { font-size: 2rem; color: var(--pearl); transition: color .3s; }
.mm-link:hover { color: var(--fern); }
.mm-divider { width: 44px; height: 1px; background: rgba(255,255,255,.2); }
.mm-cta {
  width: 100%; padding: 1.1rem; border-radius: 1.2rem; text-align: center;
  font-size: .78rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
  display: flex; flex-direction: column; gap: .2rem;
}
.mm-cta span { font-size: .6rem; font-weight: 600; letter-spacing: .22em; opacity: .7; }
.mm-cta-outline { border: 1px solid rgba(255,255,255,.3); color: var(--pearl); }
.mm-cta-accent { background: var(--accent-grad); color: #0f1a09; }
.mm-logo { background: #fff; padding: 10px 18px; border-radius: 12px; margin-top: .4rem; }
.mm-logo img { height: 30px; width: auto; }

/* ==========================================================
   HERO
   ========================================================== */
.hero { position: relative; min-height: 100svh; display: flex; flex-direction: column; justify-content: center; overflow: hidden; }
.hero-slides { position: absolute; inset: 0; }
/* Every slide drifts on the same clock, whether visible or not — a slide that
   loses .active keeps the exact transform it had, so the crossfade is pure
   opacity between two identically-moving layers. (Animating only .active
   snapped the outgoing slide back to scale(1) mid-fade — the old jolt.) The
   drift starts above 1 and alternates, so it never resets or shows an edge. */
.hero-slide {
  position: absolute; inset: 0; background-size: cover; background-position: center;
  opacity: 0; transition: opacity 2.8s ease-in-out; will-change: transform, opacity;
  animation: heroDrift 44s ease-in-out infinite alternate;
}
.hero-slide.active { opacity: 1; }
@keyframes heroDrift { from { transform: scale(1.03); } to { transform: scale(1.12) translate3d(-1.2%, 1.6%, 0); } }
.hero-scrim {
  position: absolute; inset: 0;
  background:
    linear-gradient(to bottom, rgba(11,7,16,.55) 0%, rgba(11,7,16,.25) 35%, rgba(11,7,16,.55) 70%, var(--night) 100%),
    radial-gradient(ellipse at 25% 60%, rgba(103,0,56,.5), transparent 55%);
}
.hero-content {
  position: relative; z-index: 2; max-width: 1700px; width: 100%;
  margin: 0 auto; padding: calc(var(--nav-h) + 3rem) 2rem 2rem;
  display: flex; flex-direction: column; gap: 3rem;
}
/* Masthead lockup mirrors the weekly-newsletter header:
   spaced sans caps "KELLY & WILL" + script "are", then the
   "SOLD ON AMELIA ISLAND.com" wordmark in Italiana display caps. */
.masthead-names { font-size: clamp(1.3rem, 2.6vw, 1.9rem); letter-spacing: .3em; text-transform: uppercase; font-weight: 300; color: var(--pearl); display: block; }
.masthead-amp { font-weight: 300; letter-spacing: 0; }
.masthead-are { font-family: 'Great Vibes', cursive; text-transform: none; letter-spacing: 0; font-size: 1.25em; color: var(--fern); margin-left: .25em; }
.masthead-title {
  font-family: 'Italiana', 'Playfair Display', serif;
  font-size: clamp(3.2rem, 8.5vw, 7.6rem); font-weight: 400; line-height: 1.02;
  letter-spacing: .015em; text-transform: uppercase;
  margin: .8rem 0 1.4rem; text-shadow: 0 20px 60px rgba(0,0,0,.5);
}
.masthead-dot { font-family: 'Playfair Display', serif; color: var(--fern); font-size: .34em; font-weight: 500; letter-spacing: .04em; text-transform: lowercase; vertical-align: .1em; margin-left: .1em; }
.masthead-tag { font-size: .72rem; letter-spacing: .26em; text-transform: uppercase; color: var(--ink-soft); }

.hero-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 460px)); gap: 1.2rem; }
.hero-card {
  display: flex; align-items: center; gap: 1.2rem; text-align: left;
  padding: 1.4rem 1.6rem; border-radius: 1.4rem;
  background: linear-gradient(135deg, rgba(255,255,255,.09), rgba(255,255,255,.03));
  backdrop-filter: blur(20px) saturate(170%); -webkit-backdrop-filter: blur(20px) saturate(170%);
  border: 1px solid var(--glass-border); border-top-color: rgba(255,255,255,.22);
  transition: all .4s var(--ease-ios);
}
.hero-card:hover { transform: translateY(-4px); border-color: rgba(138,169,84,.5); box-shadow: 0 24px 50px -12px rgba(0,0,0,.6), 0 0 0 1px rgba(138,169,84,.2); }
.hero-card-avatar {
  width: 58px; height: 58px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-family: 'Playfair Display', serif; font-size: 1.5rem; color: var(--sky);
  border: 1.5px solid rgba(138,169,84,.55);
}
.hero-card-avatar.kelly { background: radial-gradient(circle at 30% 30%, var(--cabernet-bright), var(--cabernet)); }
.hero-card-avatar.will { background: radial-gradient(circle at 30% 30%, #23415e, #131f30); }
.hero-card-avatar img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
.hero-card-body { display: flex; flex-direction: column; gap: .15rem; flex: 1; min-width: 0; }
.hero-card-kicker { font-size: .6rem; font-weight: 800; letter-spacing: .26em; text-transform: uppercase; color: var(--fern); }
.hero-card-title { font-size: 1.45rem; line-height: 1.15; }
.hero-card-sub { font-size: .78rem; color: var(--ink-soft); }
.hero-card-arrow { font-size: 1.4rem; color: var(--fern); transition: transform .35s var(--ease-ios); }
.hero-card:hover .hero-card-arrow { transform: translateX(6px); }

.hero-footerline {
  position: relative; z-index: 2; max-width: 1700px; width: 100%; margin: 0 auto;
  padding: 0 2rem 2rem; display: flex; align-items: center; justify-content: space-between; gap: 1.5rem;
  font-size: .62rem; letter-spacing: .22em; text-transform: uppercase; color: var(--ink-faint);
}
/* Each dot is a 24×24 touch target (WCAG 2.5.8 minimum); the visible dot is
   drawn by ::before so it stays the same 7px / 22px pill as before. Targets
   are pitched 20px apart (a 2px overlap each side) so the row stays close to
   its original width and the mobile footer line does not wrap. */
.hero-dots { display: flex; gap: 0; }
.hero-dot { width: 24px; height: 24px; margin: 0 -2px; display: flex; align-items: center; justify-content: center; background: none; border: none; padding: 0; cursor: pointer; }
.hero-dot::before { content: ''; width: 7px; height: 7px; border-radius: 999px; background: rgba(255,255,255,.25); transition: all .4s var(--ease-ios); }
.hero-dot.active { width: 40px; }
.hero-dot.active::before { width: 22px; background: linear-gradient(90deg, var(--fern), var(--sky)); }
.hero-scrollcue { display: flex; align-items: center; gap: .7rem; }
.hero-scrollcue span { display: block; width: 1px; height: 34px; background: linear-gradient(to bottom, var(--fern), transparent); animation: cueDrop 2s ease infinite; }
@keyframes cueDrop { 0% { transform: scaleY(0); transform-origin: top; } 50% { transform: scaleY(1); transform-origin: top; } 51% { transform-origin: bottom; } 100% { transform: scaleY(0); transform-origin: bottom; } }
.hero-time { display: flex; align-items: center; gap: .5rem; }
.live-dot { width: 6px; height: 6px; border-radius: 50%; background: #10b981; box-shadow: 0 0 10px #10b981; animation: pulse 2s ease infinite; }
@keyframes pulse { 50% { opacity: .4; } }

/* ---------- Ticker ---------- */
.ticker { overflow: hidden; border-block: 1px solid var(--glass-border); padding: .9rem 0; background: rgba(255,255,255,.02); }
.ticker-track { display: flex; gap: 2.4rem; white-space: nowrap; width: max-content; animation: tickerScroll 36s linear infinite; }
.ticker-track span { font-size: .68rem; letter-spacing: .32em; text-transform: uppercase; color: var(--ink-soft); }
.ticker-track i { color: var(--fern); font-style: normal; font-size: .5rem; align-self: center; }
@keyframes tickerScroll { to { transform: translateX(-50%); } }

/* ==========================================================
   STATS
   ========================================================== */
.stats { padding: 5.5rem 2rem; }
.stats-grid { max-width: 1250px; margin: 0 auto; display: grid; grid-template-columns: repeat(4, 1fr); gap: 2rem; text-align: center; }
.stat-num { font-size: clamp(2.4rem, 4.5vw, 3.6rem); font-weight: 600; background: linear-gradient(120deg, var(--sky), var(--fern)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.stat-label { font-size: .64rem; letter-spacing: .26em; text-transform: uppercase; color: var(--ink-faint); margin-top: .5rem; }

/* ==========================================================
   DUO
   ========================================================== */
.duo { padding: 5rem 2rem 6rem; max-width: 1500px; margin: 0 auto; }
.duo-grid { display: grid; grid-template-columns: 1fr auto 1fr; gap: 2.2rem; align-items: stretch; }
.duo-card { padding: 3rem 2.6rem; display: flex; flex-direction: column; align-items: center; text-align: center; transition: transform .45s var(--ease-ios), box-shadow .45s; }
.duo-card:hover { transform: translateY(-6px); }
.duo-portrait { position: relative; width: 130px; height: 130px; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin-bottom: 1.6rem; }
.duo-portrait.kelly { background: radial-gradient(circle at 32% 28%, var(--cabernet-bright), var(--cabernet) 70%); }
.duo-portrait.will { background: radial-gradient(circle at 32% 28%, #2a4a6b, #14202f 70%); }
.duo-initial { font-size: 3.2rem; color: var(--sky); }
.duo-portrait-ring { position: absolute; inset: -8px; border-radius: 50%; border: 1.5px dashed rgba(138,169,84,.55); animation: ringSpin 26s linear infinite; }
@keyframes ringSpin { to { transform: rotate(360deg); } }
.duo-role { font-size: .6rem; font-weight: 800; letter-spacing: .3em; text-transform: uppercase; color: var(--fern); margin-bottom: .5rem; }
.duo-card h3 { font-size: 2.1rem; margin-bottom: .3rem; }
.duo-script { font-family: 'Great Vibes', cursive; font-size: 1.35rem; color: var(--fern); margin-bottom: 1.1rem; }
.duo-bio { color: var(--ink-soft); font-size: .95rem; margin-bottom: 1.6rem; flex: 1; }
.duo-contacts { display: flex; gap: .6rem; margin-bottom: 1.6rem; }
.duo-contact {
  padding: .55rem 1.2rem; border-radius: 999px; border: 1px solid var(--glass-border);
  font-size: .62rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase;
  color: var(--ink-soft); transition: all .3s;
}
.duo-contact:hover { border-color: var(--fern); color: var(--fern); }
.duo-heart { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .8rem; color: var(--fern); text-align: center; padding: 0 .4rem; }
.duo-heart svg { width: 52px; height: 52px; animation: heartbeat 3s ease infinite; }
@keyframes heartbeat { 0%, 100% { transform: scale(1); } 12% { transform: scale(1.12); } 24% { transform: scale(1); } }
.duo-heart span { font-size: .6rem; letter-spacing: .28em; text-transform: uppercase; color: var(--ink-faint); line-height: 1.9; }

/* ==========================================================
   FEATURED + COLLECTION
   ========================================================== */
.featured { position: relative; padding: 3rem 2rem 6rem; max-width: 1500px; margin: 0 auto; }
/* The ambient glow: a heavily blurred copy of whichever listing photo is on
   display, masked so it melts into the night background instead of ending in
   a rectangle. The card floats on the light of its own photograph. */
.featured-backdrop {
  position: absolute; inset: -4rem -14vw 3rem; z-index: 0; pointer-events: none;
  background-size: cover; background-position: center;
  filter: blur(70px) saturate(1.3) brightness(.55);
  transform: scale(1.12);
  opacity: .5;
  -webkit-mask-image: radial-gradient(ellipse 68% 58% at 50% 42%, #000 35%, transparent 76%);
  mask-image: radial-gradient(ellipse 68% 58% at 50% 42%, #000 35%, transparent 76%);
}
/* Stacked (photo above details) below the split breakpoint; an asymmetric
   editorial split — photo left, details right — once there's room for it. */
.featured-inner {
  position: relative; z-index: 1;
  display: grid; grid-template-columns: 1fr; overflow: hidden; margin-bottom: 5.5rem;
  border-radius: 1.8rem;
  border-color: rgba(138,169,84,.16);
  box-shadow:
    0 40px 110px -30px rgba(0,0,0,.75),
    0 0 90px -40px rgba(151,10,82,.5),
    inset 0 1px 14px rgba(255,255,255,.05);
}
@media (min-width: 1100px) {
  .featured-inner { grid-template-columns: 1.15fr 1fr; align-items: stretch; }
  /* Full bleed: the photo column has no frame box of its own. The sharp photo
     stays contained and centered while its blurred echo fills the rest of the
     column and dissolves into the panel — softly at every edge, and with a
     long fade where the photo side meets the content column. */
  .featured-media { padding: 0; gap: 0; }
  .featured-stage { flex: 1 1 auto; min-height: 0; }
  .featured-photo-btn {
    width: 100%; aspect-ratio: auto; flex: 1 1 auto; min-height: 0;
    border-radius: 0; box-shadow: none; background: transparent;
  }
  .featured-photo-btn::after { display: none; }
  .featured-photo-echo {
    filter: blur(52px) saturate(1.2) brightness(.6);
    transform: scale(1.3);
    /* Soft fade on every edge; the longest fade faces the content column so
       the photo side melts into the panel instead of ending in a line. */
    -webkit-mask-image:
      linear-gradient(to right, transparent 0, #000 8%, #000 72%, transparent 100%),
      linear-gradient(to bottom, transparent 0, #000 9%, #000 91%, transparent 100%);
    -webkit-mask-composite: source-in;
    mask-image:
      linear-gradient(to right, transparent 0, #000 8%, #000 72%, transparent 100%),
      linear-gradient(to bottom, transparent 0, #000 9%, #000 91%, transparent 100%);
    mask-composite: intersect;
  }
  .featured-gallery { padding: .9rem 1.2rem 1.2rem; }
  .featured-body { padding: 3rem 3.2rem 3rem 2.2rem; justify-content: center; }
}
/* min-width: 0 + overflow: hidden let this grid column shrink to its track's
   actual width instead of stretching to fit the thumbnail strip's full
   unwrapped content (12 photos wide) — the strip scrolls internally via its
   own overflow-x, this just stops that intrinsic width from leaking out to
   every ancestor. Applies at every breakpoint: the media column can be
   narrower than the strip's natural width well above the mobile cutoff. */
.featured-media { display: flex; flex-direction: column; justify-content: center; gap: .55rem; padding: .55rem; min-width: 0; overflow: hidden; }
/* The listing photos are 3:2. Locking the frame to that ratio and containing
   the image means the whole photograph is always visible — never cropped —
   and an odd-ratio photo from a future import letterboxes instead of losing
   its edges. Nothing is layered over the image. */
/* Cap the photo so the whole card fits on one screen in the stacked layout:
   the frame keeps its 3:2 shape but its width is limited to whatever keeps
   the photo around two-thirds of the viewport tall, centered in the card.
   (Overridden to full column width in the split layout above.) */
.featured-photo-btn {
  position: relative; display: block; width: min(100%, calc(64vh * 3 / 2)); margin-inline: auto;
  aspect-ratio: 3 / 2;
  padding: 0; border-radius: 1rem; overflow: hidden; background: var(--night);
  cursor: zoom-in;
  box-shadow: 0 24px 60px -18px rgba(0,0,0,.65);
}
/* Gallery-frame hairline, purely decorative — sits inside the photo edge. */
.featured-photo-btn::after {
  content: ''; position: absolute; inset: 10px; z-index: 2;
  border: 1px solid rgba(255,255,255,.16); border-radius: .6rem;
  pointer-events: none;
}
/* The echo: same photo, cover-cropped and blurred, filling the frame behind
   the sharp image. Scaled up slightly so the blur never shows a hard edge. */
.featured-photo-echo {
  position: absolute; inset: 0; z-index: 0;
  background-size: cover; background-position: center;
  filter: blur(26px) saturate(1.15) brightness(.72);
  transform: scale(1.12);
  transition: opacity .45s var(--ease-ios);
}
.featured-photo-btn > img { position: relative; z-index: 1; width: 100%; height: 100%; object-fit: contain; transition: opacity .45s var(--ease-ios); }
/* A barely-there drift, like a documentary pan. The frame and photo share the
   same 3:2 ratio, so the slow zoom never reveals letterbox edges. The swap
   slide animates the separate `translate` property so both can run at once. */
@media (prefers-reduced-motion: no-preference) {
  .featured-photo-btn > img { animation: featuredDrift 26s ease-in-out infinite alternate; }
  .featured-photo-btn > img.slide-in-next {
    animation: slideInNext .55s var(--ease-ios), featuredDrift 26s ease-in-out infinite alternate;
  }
  .featured-photo-btn > img.slide-in-prev {
    animation: slideInPrev .55s var(--ease-ios), featuredDrift 26s ease-in-out infinite alternate;
  }
}
@keyframes featuredDrift {
  from { transform: scale(1.01) translate(0, 0); }
  to { transform: scale(1.05) translate(.6%, -.5%); }
}
@keyframes slideInNext { from { translate: 6% 0; opacity: 0; } to { translate: 0 0; opacity: 1; } }
@keyframes slideInPrev { from { translate: -6% 0; opacity: 0; } to { translate: 0 0; opacity: 1; } }

/* The stage wraps the photo and its side arrows. */
.featured-stage { position: relative; display: flex; flex-direction: column; min-width: 0; }
.featured-nav {
  position: absolute; top: 50%; translate: 0 -50%; z-index: 3;
  width: 46px; height: 46px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: rgba(11,7,16,.55); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,.22); color: var(--pearl);
  font-size: 1.6rem; line-height: 1; padding-bottom: .2rem;
  opacity: 0; transition: opacity .35s var(--ease-ios), background .3s, border-color .3s;
}
.featured-nav.prev { left: 1rem; }
.featured-nav.next { right: 1rem; }
.featured-stage:hover .featured-nav,
.featured-nav:focus-visible { opacity: 1; }
.featured-nav:hover { background: rgba(11,7,16,.82); border-color: rgba(138,169,84,.6); }
/* Touch screens have no hover — keep the arrows quietly present. */
@media (hover: none) { .featured-nav { opacity: .85; } }
/* The little slide: each arrow bobs gently toward its direction. */
@media (prefers-reduced-motion: no-preference) {
  .featured-nav.prev { animation: navBobPrev 3.4s ease-in-out infinite; }
  .featured-nav.next { animation: navBobNext 3.4s ease-in-out infinite; }
}
@keyframes navBobPrev { 0%, 100% { translate: 0 -50%; } 50% { translate: -5px -50%; } }
@keyframes navBobNext { 0%, 100% { translate: 0 -50%; } 50% { translate: 5px -50%; } }
.featured-photo-btn.swapping > img { opacity: 0; }
.featured-expand {
  position: absolute; right: .9rem; bottom: .9rem;
  display: inline-flex; align-items: center; gap: .4rem;
  background: rgba(11,7,16,.72); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  color: var(--pearl); border: 1px solid rgba(255,255,255,.18); border-radius: 999px;
  font-size: .56rem; font-weight: 800; letter-spacing: .2em; text-transform: uppercase;
  padding: .5rem 1rem; opacity: 0; transform: translateY(6px);
  transition: opacity .35s var(--ease-ios), transform .35s var(--ease-ios);
}
.featured-photo-btn:hover .featured-expand,
.featured-photo-btn:focus-visible .featured-expand { opacity: 1; transform: translateY(0); }
/* Touch devices have no :hover, so the "view all photos" affordance would
   otherwise never be visible — show it plainly instead of on-hover-only. */
@media (hover: none) {
  .featured-expand { opacity: 1; transform: translateY(0); }
}
.featured-headline { display: flex; align-items: center; justify-content: space-between; gap: .8rem; flex-wrap: wrap; margin-bottom: .3rem; }
.featured-headline .kicker { margin-bottom: 0; }
/* Outlined, softly lit — a plaque rather than a sticker. */
.featured-badge {
  flex-shrink: 0;
  background: rgba(138,169,84,.1); color: #cfe3a8;
  border: 1px solid rgba(138,169,84,.55);
  font-size: .58rem; font-weight: 800; letter-spacing: .26em; text-transform: uppercase;
  padding: .55rem 1.15rem; border-radius: 999px;
  box-shadow: 0 0 24px -6px rgba(138,169,84,.45), inset 0 0 12px rgba(138,169,84,.12);
}
.featured-body { padding: 2.6rem 3.2rem 3.2rem; display: flex; flex-direction: column; }
.featured-body h2 { font-size: clamp(2rem, 3.4vw, 3.4rem); line-height: 1.06; margin-bottom: 1.2rem; }
/* Now that the body spans the photo's full width, cap the paragraph at a
   comfortable reading measure instead of letting it stretch edge to edge —
   everything else (price, specs, chips, CTAs) still uses the full width. */
.featured-desc { color: var(--ink-soft); margin-bottom: 1.6rem; max-width: 70ch; }
.featured-desc-toggle {
  display: none; /* shown only past the mobile breakpoint below */
  font-size: .68rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase;
  color: var(--fern); margin: -1.1rem 0 1.4rem;
}
.featured-chips { display: flex; flex-wrap: wrap; gap: .55rem; margin-bottom: 2rem; }
.featured-chips span {
  font-size: .6rem; font-weight: 700; letter-spacing: .2em; text-transform: uppercase;
  padding: .5rem 1rem; border-radius: 999px; border: 1px solid rgba(138,169,84,.4); color: var(--sky);
}
.featured-ctas { display: flex; flex-wrap: wrap; gap: .9rem; }

.collection-head { text-align: center; margin-bottom: 2.6rem; }
.collection-head h2 { font-size: clamp(2rem, 4vw, 3rem); }
.collection-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.6rem; }
.listing-card { overflow: hidden; text-align: left; padding: 0; transition: transform .45s var(--ease-ios), border-color .45s; }
.listing-card:hover { transform: translateY(-6px); border-color: rgba(138,169,84,.45); }
.listing-img { position: relative; height: 250px; overflow: hidden; }
.listing-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ease-ios); }
.listing-card:hover .listing-img img { transform: scale(1.07); }
.listing-tag {
  position: absolute; top: 1rem; right: 1rem;
  background: rgba(11,7,16,.75); backdrop-filter: blur(8px); color: var(--sky);
  border: 1px solid rgba(138,169,84,.4);
  font-size: .55rem; font-weight: 800; letter-spacing: .22em; text-transform: uppercase;
  padding: .45rem .9rem; border-radius: 999px;
}
.listing-info { padding: 1.5rem 1.6rem 1.7rem; }
.listing-price { font-size: 1.7rem; color: var(--sky); }
.listing-addr { font-size: .68rem; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-faint); margin: .3rem 0 1rem; }
.listing-meta { display: flex; gap: 1.2rem; border-top: 1px solid var(--glass-border); padding-top: 1rem; }
.listing-meta span { font-size: .8rem; color: var(--ink-soft); font-family: 'Playfair Display', serif; font-style: italic; }

/* ==========================================================
   PATHWAYS BANNER
   ========================================================== */
.pathways-banner { display: grid; grid-template-columns: 1fr 1fr; min-height: 480px; }
.pathway { position: relative; overflow: hidden; display: flex; align-items: flex-end; text-align: left; }
.pathway-bg { position: absolute; inset: 0; background-size: cover; background-position: center; transition: transform 1.4s var(--ease-ios), filter .6s; filter: saturate(.7) brightness(.75); }
.pathway::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to top, rgba(11,7,16,.92), rgba(11,7,16,.15) 60%); }
.pathway.sell::after { background: linear-gradient(to top, rgba(35,15,25,.95), rgba(11,7,16,.2) 65%); }
.pathway:hover .pathway-bg { transform: scale(1.06); filter: saturate(1) brightness(.85); }
.pathway-content { position: relative; z-index: 2; padding: 3rem; }
.pathway-content h3 { font-size: clamp(1.9rem, 3.4vw, 2.9rem); line-height: 1.12; margin-bottom: 1.2rem; }
.pathway-cta { font-size: .68rem; font-weight: 800; letter-spacing: .24em; text-transform: uppercase; color: var(--fern); transition: letter-spacing .4s var(--ease-ios); }
.pathway:hover .pathway-cta { letter-spacing: .34em; }

/* ==========================================================
   AROUND TOWN
   ========================================================== */
.around { padding: 6rem 2rem; max-width: 1500px; margin: 0 auto; }
.around-newsletter { display: flex; align-items: center; justify-content: space-between; gap: 2rem; padding: 2.6rem 3rem; flex-wrap: wrap; }
.around-newsletter h3 { font-size: 2rem; margin-bottom: .3rem; }
.around-newsletter p { color: var(--ink-soft); font-size: .92rem; max-width: 460px; }
.newsletter-form { display: flex; gap: .7rem; flex: 1; min-width: 300px; max-width: 480px; }
.newsletter-form input {
  flex: 1; background: rgba(255,255,255,.06); border: 1px solid var(--glass-border);
  border-radius: 999px; padding: 1rem 1.5rem; color: var(--pearl); font: inherit; outline: none; transition: border-color .3s; min-width: 0;
}
.newsletter-form input:focus { border-color: var(--fern); }
.newsletter-form input::placeholder { color: var(--ink-faint); }

/* ==========================================================
   AREAS
   ========================================================== */
.areas { padding: 2rem 2rem 6rem; max-width: 1500px; margin: 0 auto; }
.areas-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.2rem; }
.area-tile { position: relative; height: 420px; border-radius: 1.6rem; overflow: hidden; display: flex; align-items: flex-end; border: 1px solid var(--glass-border); }
.area-bg { position: absolute; inset: 0; background-size: cover; background-position: center; transition: transform 1.3s var(--ease-ios), filter .6s; filter: saturate(.65) brightness(.8); }
.area-tile::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to top, rgba(11,7,16,.9), transparent 55%); }
.area-tile:hover .area-bg { transform: scale(1.07); filter: saturate(1) brightness(.9); }
.area-label { position: relative; z-index: 2; padding: 1.8rem; }
.area-label h3 { font-size: 1.5rem; margin-bottom: .2rem; }
.area-label span { font-size: .72rem; color: var(--ink-soft); font-style: italic; font-family: 'Playfair Display', serif; opacity: 0; transform: translateY(8px); transition: all .45s var(--ease-ios); display: block; }
.area-tile:hover .area-label span { opacity: 1; transform: translateY(0); }

/* ==========================================================
   TESTIMONIALS
   ========================================================== */
.testimonials { padding: 2rem 2rem 6rem; max-width: 1100px; margin: 0 auto; }
.testimonial-stage { padding: 4rem 3.4rem; text-align: center; position: relative; }
.testimonial-stage::before { content: '“'; position: absolute; top: 1.2rem; left: 2.2rem; font-family: 'Playfair Display', serif; font-size: 6rem; color: rgba(138,169,84,.25); line-height: 1; }
.testimonial-quote { font-size: clamp(1.25rem, 2.4vw, 1.7rem); font-style: italic; line-height: 1.6; color: var(--sky); transition: opacity .5s ease; }
.testimonial-author { margin-top: 1.6rem; font-size: .68rem; letter-spacing: .24em; text-transform: uppercase; color: var(--fern); transition: opacity .5s ease; }
.testimonial-dots { display: flex; justify-content: center; gap: .5rem; margin-top: 2rem; }
.testimonial-dots .hero-dot::before { background: rgba(255,255,255,.2); }
.testimonial-dots .hero-dot.active::before { background: linear-gradient(90deg, var(--fern), var(--sky)); }

/* ==========================================================
   FOOTER
   ========================================================== */
.footer { border-top: 1px solid var(--glass-border); padding: 4.5rem 2rem 3rem; text-align: center; background: rgba(0,0,0,.35); }
.footer-mast { font-size: clamp(1.6rem, 3.2vw, 2.4rem); margin-bottom: 2.6rem; }
.footer-mast span { color: var(--fern); font-size: .55em; font-style: italic; }
.footer-agents { display: flex; align-items: center; justify-content: center; gap: 3.5rem; flex-wrap: wrap; margin-bottom: 2.8rem; }
.footer-agent { display: flex; flex-direction: column; gap: .3rem; font-size: .82rem; color: var(--ink-soft); }
.footer-agent strong { font-family: 'Playfair Display', serif; font-size: 1.15rem; color: var(--pearl); }
.footer-agent span { font-size: .58rem; letter-spacing: .24em; text-transform: uppercase; color: var(--fern); margin-bottom: .4rem; }
.footer-agent a:hover { color: var(--fern); }
.footer-logo { background: #fff; padding: 12px 22px; border-radius: 12px; display: inline-flex; }
.footer-logo img { height: 34px; width: auto; }
/* Legal line sits at .5 alpha (not --ink-faint at .4) so the required franchise
   disclosure meets 4.5:1 contrast against the footer. */
.footer-legal { font-size: .62rem; letter-spacing: .12em; text-transform: uppercase; color: rgba(253,251,247,.5); max-width: 720px; margin: 0 auto; line-height: 2; }
.eho { font-size: .9rem; }

/* ---------- Mobile sticky bar ---------- */
.mobile-sticky-bar {
  position: fixed; left: 12px; right: 12px; bottom: max(12px, env(safe-area-inset-bottom));
  z-index: 120; display: none; grid-template-columns: 1fr 1fr; gap: 10px; padding: 10px;
  border-radius: 999px; background: rgba(9,9,9,.72);
  backdrop-filter: blur(22px) saturate(180%); -webkit-backdrop-filter: blur(22px) saturate(180%);
  border: 1px solid rgba(255,255,255,.12); box-shadow: 0 22px 48px rgba(0,0,0,.4);
}
.msb-btn { min-height: 50px; border-radius: 999px; font-size: .62rem; font-weight: 800; letter-spacing: .18em; text-transform: uppercase; }
.msb-accent { background: var(--accent-grad); color: #0f1a09; }
.msb-outline { background: rgba(255,255,255,.08); color: #fff; border: 1px solid rgba(255,255,255,.14); }

/* ==========================================================
   LEAD FLOW OVERLAY
   ========================================================== */
.flow-overlay {
  position: fixed; inset: 0; z-index: 300;
  background: rgba(8,5,10,.9); backdrop-filter: blur(26px) saturate(160%); -webkit-backdrop-filter: blur(26px) saturate(160%);
  display: flex; flex-direction: column;
  opacity: 0; visibility: hidden; transition: all .45s var(--ease-ios);
}
.flow-overlay.open { opacity: 1; visibility: visible; }
.flow-chrome { display: flex; align-items: center; justify-content: space-between; padding: 1.3rem 1.8rem; }
.flow-agent-chip { display: flex; align-items: center; gap: .8rem; }
.flow-agent-chip .avatar {
  width: 44px; height: 44px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  font-family: 'Playfair Display', serif; font-size: 1.15rem; color: var(--sky); border: 1.5px solid rgba(138,169,84,.5);
}
.flow-agent-chip .avatar.kelly { background: radial-gradient(circle at 30% 30%, var(--cabernet-bright), var(--cabernet)); }
.flow-agent-chip .avatar.will { background: radial-gradient(circle at 30% 30%, #23415e, #131f30); }
.flow-agent-chip .avatar img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
.flow-agent-chip .meta { display: flex; flex-direction: column; line-height: 1.3; }
.flow-agent-chip .meta strong { font-size: .82rem; }
.flow-agent-chip .meta span { font-size: .58rem; letter-spacing: .22em; text-transform: uppercase; color: var(--fern); }
.flow-chrome-actions { display: flex; align-items: center; gap: .8rem; }
.flow-live-text {
  display: flex; align-items: center; gap: .5rem;
  font-size: .62rem; font-weight: 800; letter-spacing: .18em; text-transform: uppercase;
  border: 1px solid var(--glass-border); border-radius: 999px; padding: .6rem 1.2rem; color: var(--pearl); transition: all .3s;
}
.flow-live-text::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: #10b981; box-shadow: 0 0 8px #10b981; animation: pulse 2s infinite; }
.flow-live-text:hover { border-color: var(--fern); color: var(--fern); }
.flow-close { font-size: 1.3rem; color: var(--ink-soft); padding: .5rem .8rem; transition: color .3s, transform .3s; }
.flow-close:hover { color: var(--pearl); transform: rotate(90deg); }

.flow-progress { position: relative; height: 3px; background: rgba(255,255,255,.08); margin: 0 1.8rem; border-radius: 999px; }
.flow-progress-fill { height: 100%; width: 0%; border-radius: 999px; background: linear-gradient(90deg, var(--cabernet-bright), var(--fern)); transition: width .6s var(--ease-ios); box-shadow: 0 0 14px var(--cabernet-glow); }
.flow-progress-boat { position: absolute; top: 50%; left: 0%; transform: translate(-50%, -58%); font-size: 1.05rem; transition: left .6s var(--ease-ios); filter: drop-shadow(0 4px 8px rgba(0,0,0,.5)); }

.flow-stage { flex: 1; overflow-y: auto; display: flex; flex-direction: column; align-items: center; padding: 3rem 1.5rem 4rem; }
.flow-step { width: 100%; max-width: 760px; text-align: center; animation: stepIn .55s var(--ease-ios); }
@keyframes stepIn { from { opacity: 0; transform: translateY(24px); } }
.flow-step-kicker { font-size: .62rem; font-weight: 800; letter-spacing: .3em; text-transform: uppercase; color: var(--fern); display: block; margin-bottom: 1rem; }
.flow-step h2 { font-family: 'Playfair Display', serif; font-size: clamp(1.9rem, 4.5vw, 3.1rem); line-height: 1.12; margin-bottom: .8rem; }
.flow-step .flow-sub { color: var(--ink-soft); font-size: 1rem; margin-bottom: 2.4rem; font-style: italic; font-family: 'Playfair Display', serif; }

.chip-grid { display: flex; flex-wrap: wrap; gap: .7rem; justify-content: center; margin-bottom: 2.4rem; }
.flow-chip {
  padding: .95rem 1.7rem; border-radius: 999px; border: 1px solid var(--glass-border);
  background: rgba(255,255,255,.04); color: var(--pearl);
  font-size: .78rem; font-weight: 600; transition: all .3s var(--ease-ios);
}
.flow-chip:hover { border-color: var(--fern); transform: translateY(-2px); }
.flow-chip.selected { background: var(--accent-grad); color: #0f1a09; border-color: transparent; font-weight: 800; box-shadow: 0 8px 22px rgba(138,169,84,.3); }

.flow-input-row { display: flex; align-items: center; gap: 1rem; border-bottom: 2px solid var(--glass-border); margin-bottom: 2rem; transition: border-color .3s; }
.flow-input-row:focus-within { border-color: var(--fern); }
.flow-nl-input {
  flex: 1; background: transparent; border: none; outline: none; color: var(--pearl);
  font-family: 'Playfair Display', serif; font-style: italic; font-size: clamp(1.2rem, 2.6vw, 1.7rem); padding: 1rem 0; min-width: 0;
}
.flow-nl-input::placeholder { color: var(--ink-faint); }
.flow-send {
  width: 52px; height: 52px; border-radius: 50%; flex-shrink: 0;
  background: var(--accent-grad); color: #0f1a09;
  display: flex; align-items: center; justify-content: center; font-size: 1.15rem;
  transition: transform .3s var(--ease-ios), box-shadow .3s;
}
.flow-send:hover { transform: scale(1.08); box-shadow: 0 8px 24px rgba(138,169,84,.4); }

.flow-form { max-width: 460px; margin: 0 auto; text-align: left; }
.flow-field { margin-bottom: 1.3rem; }
.flow-field label { display: block; font-size: .6rem; font-weight: 800; letter-spacing: .24em; text-transform: uppercase; color: var(--fern); margin-bottom: .5rem; }
.flow-field input {
  width: 100%; background: rgba(255,255,255,.05); border: 1px solid var(--glass-border);
  border-radius: 1rem; padding: 1.05rem 1.3rem; color: var(--pearl); font: inherit; outline: none; transition: border-color .3s, background .3s;
}
.flow-field input:focus { border-color: var(--fern); background: rgba(255,255,255,.08); }
.flow-field input.error { border-color: var(--cabernet-bright); animation: shake .4s; }
@keyframes shake { 25% { transform: translateX(-5px); } 75% { transform: translateX(5px); } }
.flow-consent { font-size: .68rem; color: var(--ink-faint); margin: 1rem 0 1.4rem; line-height: 1.7; }
.flow-route-note {
  display: inline-flex; align-items: center; gap: .55rem; margin-top: 1.6rem;
  font-size: .6rem; letter-spacing: .18em; text-transform: uppercase; color: var(--ink-faint);
  border: 1px dashed rgba(138,169,84,.35); border-radius: 999px; padding: .55rem 1.2rem;
}
.flow-route-note::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--fern); }

.flow-nav { display: flex; align-items: center; justify-content: center; gap: 1rem; margin-top: .6rem; }
.flow-back { font-size: .62rem; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--ink-faint); padding: .8rem 1.2rem; transition: color .3s; }
.flow-back:hover { color: var(--pearl); }
.btn-flow-next { min-width: 220px; }
.btn-flow-next:disabled { opacity: .35; pointer-events: none; }

/* Loading */
.flow-loading { display: flex; flex-direction: column; align-items: center; gap: 1.6rem; padding-top: 8vh; animation: stepIn .5s var(--ease-ios); }
.flow-spinner { position: relative; width: 74px; height: 74px; }
.flow-spinner::before, .flow-spinner::after {
  content: ''; position: absolute; inset: 0; border-radius: 50%;
  border: 2px solid transparent; border-top-color: var(--fern);
  animation: spin 1.1s linear infinite;
}
.flow-spinner::after { inset: 10px; border-top-color: var(--cabernet-bright); animation-duration: 1.6s; animation-direction: reverse; }
@keyframes spin { to { transform: rotate(360deg); } }
.flow-loading-text { font-family: 'Playfair Display', serif; font-style: italic; font-size: 1.25rem; color: var(--sky); }
.flow-loading-steps { font-size: .62rem; letter-spacing: .22em; text-transform: uppercase; color: var(--ink-faint); min-height: 1.2em; }

/* Results dashboard */
.flow-dash { width: 100%; max-width: 1150px; text-align: left; animation: stepIn .65s var(--ease-ios); }
.flow-dash-head { text-align: center; margin-bottom: 2.6rem; }
.flow-dash-head h2 { font-family: 'Playfair Display', serif; font-size: clamp(2rem, 4.4vw, 3.2rem); margin-bottom: .5rem; }
.flow-dash-head p { color: var(--ink-soft); font-family: 'Playfair Display', serif; font-style: italic; }
.flow-dash-head .accent { color: var(--fern); }
.flow-routed-banner {
  display: flex; align-items: center; justify-content: center; gap: .7rem;
  background: linear-gradient(120deg, rgba(16,185,129,.12), rgba(16,185,129,.04));
  border: 1px solid rgba(16,185,129,.35); border-radius: 999px;
  padding: .8rem 1.6rem; margin: 0 auto 2.6rem; width: fit-content; max-width: 100%;
  font-size: .64rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: #6ee7b7; text-align: center;
}
.flow-routed-banner::before { content: '✓'; display: flex; align-items: center; justify-content: center; width: 20px; height: 20px; flex-shrink: 0; border-radius: 50%; background: #10b981; color: #04140d; font-size: .7rem; }

.dash-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.4rem; }
.dash-card { overflow: hidden; padding: 0; text-align: left; }
.dash-card .listing-img { height: 210px; }
.match-badge {
  position: absolute; top: 1rem; left: 1rem;
  background: var(--accent-grad); color: #0f1a09;
  font-size: .58rem; font-weight: 800; letter-spacing: .14em;
  padding: .4rem .8rem; border-radius: 999px;
}
.dash-fav {
  position: absolute; top: .9rem; right: .9rem; width: 38px; height: 38px; border-radius: 50%;
  background: rgba(11,7,16,.7); backdrop-filter: blur(8px); border: 1px solid var(--glass-border);
  display: flex; align-items: center; justify-content: center; font-size: 1.05rem; color: var(--pearl); transition: all .3s;
}
.dash-fav:hover, .dash-fav.faved { color: #f43f5e; border-color: rgba(244,63,94,.5); transform: scale(1.08); }

.insight-card { padding: 2.4rem 2rem; text-align: center; display: flex; flex-direction: column; align-items: center; gap: .5rem; border-top: 2px solid rgba(138,169,84,.5); }
.insight-value { font-family: 'Playfair Display', serif; font-size: 2.3rem; color: var(--sky); line-height: 1.15; }
.insight-value.teal { color: #6ee7b7; }
.insight-label { font-size: .6rem; font-weight: 800; letter-spacing: .26em; text-transform: uppercase; color: var(--fern); }
.insight-desc { font-size: .85rem; color: var(--ink-soft); font-style: italic; font-family: 'Playfair Display', serif; }

.dash-cta { grid-column: 1 / -1; padding: 2.8rem 2.4rem; text-align: center; margin-top: .4rem; }
.dash-cta h3 { font-family: 'Playfair Display', serif; font-size: 1.9rem; margin-bottom: .5rem; }
.dash-cta p { color: var(--ink-soft); font-style: italic; font-family: 'Playfair Display', serif; margin-bottom: 1.8rem; }
.dash-cta-row { display: flex; gap: .9rem; justify-content: center; flex-wrap: wrap; }

/* Sparkles on dash reveal */
.sparkle { position: fixed; pointer-events: none; z-index: 400; font-size: 1rem; animation: sparkleFall 1.8s ease-out forwards; }
@keyframes sparkleFall { to { transform: translateY(120px) rotate(220deg); opacity: 0; } }

/* ==========================================================
   PRODUCTION ADDITIONS
   ========================================================== */

/* Stat value props now hold words, not numbers */
.stat-num { line-height: 1.05; }

/* ---------- Newsletter CTA (The Coastal Edit) ---------- */
.news-cta { padding: 5rem 2rem 6rem; max-width: 1200px; margin: 0 auto; text-align: center; }
.news-cta-actions { display: flex; justify-content: center; }
.btn-news { font-size: .8rem; padding: 1.2rem 2.8rem; }

/* ---------- Trust panel ---------- */
.trust { padding: 2rem 2rem 6rem; max-width: 1200px; margin: 0 auto; }
.trust-stage { padding: 3.6rem 3rem 4rem; text-align: center; }
.trust-stage h2 { font-size: clamp(2rem, 4vw, 3rem); margin-bottom: 2.6rem; }
.trust-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.6rem; text-align: left; }
.trust-item { padding: 1.4rem; }
.trust-icon { font-size: 1.8rem; margin-bottom: .8rem; }
.trust-item h3 { font-family: 'Playfair Display', serif; font-size: 1.2rem; margin-bottom: .5rem; color: var(--sky); }
.trust-item p { font-size: .9rem; color: var(--ink-soft); }

/* ---------- Areas map CTA ---------- */
.areas-map-cta { text-align: center; margin-top: 2.4rem; }

/* ---------- Buyer/seller confirmation extras ---------- */
.dash-subhead { text-align: center; color: var(--ink-soft); font-style: italic; font-family: 'Playfair Display', serif; margin-bottom: 1.6rem; }
.dash-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.2rem; margin-bottom: 1.4rem; }
.dash-step { padding: 1.8rem 1.6rem; border-top: 2px solid rgba(138,169,84,.5); }
.dash-step-n { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; background: rgba(138,169,84,.14); color: var(--fern); font-size: 1.2rem; margin-bottom: .9rem; }
.dash-step h4 { font-family: 'Playfair Display', serif; font-size: 1.15rem; margin-bottom: .35rem; color: var(--sky); }
.dash-step p { font-size: .85rem; color: var(--ink-soft); }
.dash-card { text-decoration: none; }

/* ---------- Accessibility: visible focus ---------- */
:focus-visible { outline: 2px solid var(--fern); outline-offset: 3px; border-radius: 4px; }
body.cursor-on :focus-visible { outline: 2px solid var(--fern); }

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important; animation-iteration-count: 1 !important;
    transition-duration: .001ms !important; scroll-behavior: auto !important;
  }
  .bg-ambient, .hero-slide { animation: none !important; }
  .hero-slide { transform: none !important; }
  .reveal { opacity: 1 !important; transform: none !important; }
  .ticker-track { animation: none !important; }
  .duo-portrait-ring { animation: none !important; }
}

/* ---------- Responsive: new sections ---------- */
@media (max-width: 900px) {
  .trust-grid { grid-template-columns: 1fr; }
  .dash-steps { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .calc, .trust { padding-left: 1.2rem; padding-right: 1.2rem; }
  .trust-stage { padding: 2.4rem 1.5rem; }
}

/* ---------- Real testimonials (appear only when added in the CMS) ---------- */
.trust-quotes { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1.4rem; margin-top: 2.6rem; padding-top: 2.4rem; border-top: 1px solid var(--glass-border); }
.trust-quote { margin: 0; text-align: left; padding: 1.4rem; }
.trust-quote blockquote { margin: 0 0 .8rem; font-family: 'Playfair Display', serif; font-style: italic; font-size: 1.05rem; line-height: 1.6; color: var(--sky); }
.trust-quote figcaption { font-size: .62rem; letter-spacing: .2em; text-transform: uppercase; color: var(--fern); }

/* ---------- Lead form: split name row + TCPA consent ---------- */
.flow-field-row { display: grid; grid-template-columns: 1fr 1fr; gap: .9rem; }
@media (max-width: 480px) { .flow-field-row { grid-template-columns: 1fr; gap: 0; } }

.flow-consent-check {
  display: flex; align-items: flex-start; gap: .7rem;
  margin: 1rem 0 1.4rem; padding: .9rem 1rem;
  border: 1px solid var(--glass-border); border-radius: 1rem;
  background: rgba(255,255,255,.03);
  font-size: .72rem; line-height: 1.65; color: var(--ink-soft);
  cursor: pointer; transition: border-color .3s, background .3s;
}
.flow-consent-check:hover { border-color: rgba(138,169,84,.35); }
.flow-privacy-note { text-align: center; margin-top: .6rem; }
.flow-privacy-note a { font-size: .68rem; letter-spacing: .08em; color: var(--ink-soft); text-decoration: underline; text-underline-offset: 3px; }
.flow-privacy-note a:hover { color: var(--fern); }
.flow-consent-check input[type="checkbox"] {
  flex-shrink: 0; width: 18px; height: 18px; margin-top: .15rem;
  accent-color: var(--fern); cursor: pointer;
}
.flow-consent-check.error {
  border-color: var(--cabernet-bright);
  background: rgba(151,10,82,.12);
  animation: shake .4s;
}

/* ---------- Featured listing: price, specs, photo gallery ---------- */
.featured-price { display: flex; align-items: baseline; gap: .9rem; flex-wrap: wrap; margin-bottom: .6rem; }
.featured-price-value {
  font-family: 'Playfair Display', serif; font-size: clamp(1.9rem, 3.4vw, 2.9rem);
  color: var(--sky); line-height: 1; font-variant-numeric: tabular-nums;
  text-shadow: 0 0 40px rgba(186,216,225,.25);
}
.featured-status {
  font-size: .58rem; font-weight: 800; letter-spacing: .2em; text-transform: uppercase;
  color: var(--fern); border: 1px solid rgba(138,169,84,.45); border-radius: 999px; padding: .35rem .8rem;
}
/* Spec cells read like a listing sheet rather than a caption. */
.featured-specs { display: flex; flex-wrap: wrap; gap: 0; margin: .4rem 0 1.4rem; }
.spec-cell {
  display: flex; flex-direction: column; gap: .25rem;
  padding: .1rem 1.25rem .1rem 0; margin-right: 1.25rem;
  border-right: 1px solid rgba(255,255,255,.12);
}
.spec-cell:last-child { border-right: 0; margin-right: 0; padding-right: 0; }
.spec-label { font-size: .54rem; font-weight: 800; letter-spacing: .24em; text-transform: uppercase; color: var(--fern); }
.spec-value {
  font-family: 'Playfair Display', serif; font-size: 1.5rem;
  color: var(--pearl); line-height: 1; font-variant-numeric: tabular-nums;
}
.featured-mls {
  margin-top: 1rem; font-size: .58rem; letter-spacing: .18em;
  text-transform: uppercase; color: var(--ink-faint);
}

/* Sits below the photo — never over it. */
.featured-gallery {
  display: flex; gap: .5rem; overflow-x: auto; overflow-y: hidden; width: 100%; min-width: 0;
  scrollbar-width: none; scroll-behavior: smooth;
}
.featured-gallery::-webkit-scrollbar { display: none; }
.featured-thumb {
  flex: 0 0 auto; width: 82px; height: 55px; padding: 0; border-radius: .55rem;
  overflow: hidden; border: 2px solid transparent; opacity: .55;
  transition: opacity .3s, border-color .3s, transform .3s var(--ease-ios);
}
.featured-thumb img { width: 100%; height: 100%; object-fit: cover; }
.featured-thumb:hover { opacity: 1; transform: translateY(-2px); }
.featured-thumb.active { opacity: 1; border-color: var(--fern); }

/* ---------- Full-screen photo lightbox ---------- */
.lightbox {
  position: fixed; inset: 0; z-index: 400;
  background: rgba(6,4,8,.96);
  backdrop-filter: blur(26px) saturate(160%); -webkit-backdrop-filter: blur(26px) saturate(160%);
  display: flex; flex-direction: column;
  opacity: 0; visibility: hidden; transition: opacity .35s var(--ease-ios), visibility .35s;
}
.lightbox.open { opacity: 1; visibility: visible; }
.lightbox-chrome { display: flex; align-items: center; justify-content: space-between; padding: 1.1rem 1.5rem; flex-shrink: 0; }
.lightbox-counter { font-size: .62rem; font-weight: 800; letter-spacing: .26em; text-transform: uppercase; color: var(--fern); font-variant-numeric: tabular-nums; }
.lightbox-close {
  width: 42px; height: 42px; border-radius: 50%; font-size: 1rem; color: var(--pearl);
  border: 1px solid rgba(255,255,255,.2); background: rgba(255,255,255,.05);
  transition: background .3s, transform .3s var(--ease-ios);
}
.lightbox-close:hover { background: rgba(255,255,255,.14); transform: rotate(90deg); }
.lightbox-stage {
  flex: 1; min-height: 0; display: flex; align-items: center; gap: 1rem;
  padding: 0 1.5rem;
}
.lightbox-figure {
  flex: 1; min-width: 0; height: 100%;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1rem;
}
/* Contain, never crop — the whole photograph, whatever the screen shape. */
.lightbox-figure img {
  max-width: 100%; max-height: calc(100% - 2.5rem);
  width: auto; height: auto; object-fit: contain;
  border-radius: .6rem; box-shadow: 0 30px 80px -20px rgba(0,0,0,.8);
  transition: opacity .3s var(--ease-ios);
}
.lightbox.swapping .lightbox-figure img { opacity: 0; }
.lightbox-caption {
  font-family: 'Playfair Display', serif; font-style: italic;
  font-size: .95rem; color: var(--ink-soft); text-align: center; max-width: 60ch;
}
.lightbox-nav {
  flex-shrink: 0; width: 54px; height: 54px; border-radius: 50%;
  font-size: 2rem; line-height: 1; color: var(--pearl);
  border: 1px solid rgba(255,255,255,.2); background: rgba(255,255,255,.05);
  display: flex; align-items: center; justify-content: center;
  transition: background .3s, transform .3s var(--ease-ios);
}
.lightbox-nav:hover { background: rgba(255,255,255,.14); }
.lightbox-nav.prev:hover { transform: translateX(-3px); }
.lightbox-nav.next:hover { transform: translateX(3px); }
.lightbox-rail {
  display: flex; gap: .5rem; justify-content: center; flex-wrap: nowrap;
  overflow-x: auto; padding: 1.1rem 1.5rem; flex-shrink: 0;
  scrollbar-width: none; scroll-behavior: smooth;
}
.lightbox-rail::-webkit-scrollbar { display: none; }
.lightbox-rail button {
  flex: 0 0 auto; width: 92px; height: 62px; padding: 0; border-radius: .5rem;
  overflow: hidden; border: 2px solid transparent; opacity: .45;
  transition: opacity .3s, border-color .3s, transform .3s var(--ease-ios);
}
.lightbox-rail button img { width: 100%; height: 100%; object-fit: cover; }
.lightbox-rail button:hover { opacity: 1; transform: translateY(-2px); }
.lightbox-rail button.active { opacity: 1; border-color: var(--fern); }

@media (max-width: 900px) {
  .lightbox-stage { padding: 0 .6rem; gap: .4rem; }
  .lightbox-nav { width: 44px; height: 44px; font-size: 1.6rem; }
  .lightbox-rail button { width: 68px; height: 46px; }
}
@media (max-width: 640px) {
  .featured-thumb { width: 64px; height: 44px; }
  .spec-cell { padding-right: .9rem; margin-right: .9rem; }
  .spec-value { font-size: 1.15rem; }
  .lightbox-rail { display: none; }
  .lightbox-nav { display: none; } /* swipe instead */
  .lightbox-caption { font-size: .85rem; }
}

/* ==========================================================
   RESPONSIVE
   ========================================================== */
@media (max-width: 1150px) {
  .nav-links { display: none; }
  .duo-grid { grid-template-columns: 1fr; gap: 1.6rem; }
  .duo-heart { flex-direction: row; padding: .6rem 0; }
  .duo-heart span br { display: none; }
}
@media (max-width: 900px) {
  .nav-actions .btn-nav { display: none; }
  .nav-burger { display: flex; }
  .featured-body { padding: 2.2rem 1.8rem; }
  .collection-grid, .dash-grid { grid-template-columns: 1fr 1fr; }
  .areas-grid { grid-template-columns: 1fr 1fr; }
  .stats-grid { grid-template-columns: repeat(2, 1fr); }
  .trust-grid { grid-template-columns: 1fr; gap: .6rem; }
  .pathways-banner { grid-template-columns: 1fr; min-height: 0; }
  .pathway { min-height: 0; height: 380px; }
  .hero-cards { grid-template-columns: 1fr; }
  .hero-footerline { flex-wrap: wrap; justify-content: center; gap: 1rem; }
  .hero-time { white-space: nowrap; }
  .hero-scrollcue { display: none; }
}
@media (max-width: 640px) {
  body { padding-bottom: 86px; }
  .mobile-sticky-bar { display: grid; }
  .nav-inner { padding: 0 1.1rem; }
  .nav-logo-box { display: none; }
  .nav-actions { margin-left: auto; }
  .nav-brand-text strong { font-size: .68rem; }
  .hero-content { padding: calc(var(--nav-h) + 2rem) 1.2rem 1.5rem; gap: 2rem; }
  .hero-footerline { padding: 0 1.2rem 5.5rem; }
  .masthead-title { font-size: clamp(2.9rem, 14vw, 4rem); }
  .masthead-names { letter-spacing: .18em; }
  .masthead-tag { letter-spacing: .14em; font-size: .58rem; }
  .hero-card { padding: 1.1rem 1.2rem; }
  .hero-card-title { font-size: 1.2rem; }
  .duo-card { padding: 2.4rem 1.6rem; }
  /* One clean column each — two side-by-side cards at phone width were
     110px slivers with one word per line. */
  .collection-grid { grid-template-columns: 1fr; gap: 1.1rem; }
  .listing-img { height: 210px; }
  .listing-info { padding: 1.2rem 1.4rem 1.4rem; }
  .areas-grid { grid-template-columns: 1fr; gap: 1rem; }
  .area-tile { height: 240px; }
  /* No hover on touch — the tile subtitles are always shown. */
  .area-label span { opacity: 1; transform: none; }
  /* Value props: compact 2×2, smaller serif so nothing hyphen-wraps. */
  .stats { padding: 2.8rem 1.2rem; }
  .stats-grid { gap: 1.4rem 1rem; }
  .stat-num { font-size: 1.5rem; }
  .stat-label { font-size: .54rem; letter-spacing: .18em; }
  /* Trust panel: close the cavernous gaps. */
  .trust { padding: .5rem 1rem 3rem; }
  .trust-stage { padding: 2.4rem 1.4rem 2.4rem; }
  .trust-stage h2 { margin-bottom: 1.2rem; }
  .trust-item { padding: .9rem .2rem; }
  .trust-icon { margin-bottom: .4rem; }
  .pathway { height: 320px; }
  .pathway-content { padding: 1.8rem 1.4rem; }
  .news-cta { padding: 2.8rem 1.2rem 3.2rem; }
  .section-head { margin-bottom: 2.2rem; }
  .around-newsletter { padding: 2rem 1.5rem; }
  .newsletter-form { flex-direction: column; }
  .testimonial-stage { padding: 3rem 1.6rem; }
  .footer-agents { gap: 2rem; flex-direction: column; }
  .flow-chrome { padding: 1rem 1.1rem; }
  .flow-agent-chip .meta strong { font-size: .72rem; }
  .flow-stage { padding: 2rem 1.1rem 5rem; }
  .flow-step h2 { font-size: 1.7rem; }
  .chip-grid { gap: .5rem; }
  .flow-chip { padding: .8rem 1.3rem; font-size: .72rem; }
  .area-tile { height: 300px; }
  .stats { padding: 3.5rem 1.2rem; }

  /* ---------- Featured listing: compact, horizontal mobile layout ----------
     Photos stay on top (the gallery block above, untouched); everything
     below is tightened into scannable horizontal strips instead of one
     long vertical list, so the card reads in a glance, not a scroll. */
  .featured { padding: 0 1rem 3.5rem; }
  .featured-inner { margin-bottom: 3.5rem; border-radius: 1.15rem; }
  .featured-media { padding: 0; gap: 0; }
  .featured-gallery { padding: .6rem .6rem 0; }
  /* min-width: 0 at every level: the horizontally-scrolling spec/chip strips
     below have wide, non-wrapping content by design (that's what makes them
     scroll). Without this, flex/grid items default to min-width: auto and
     refuse to shrink below that content's width, which forces every ancestor
     — the body, the card, the whole section — to stretch to fit it instead
     of letting the strip scroll internally. */
  .featured-inner, .featured-body { min-width: 0; }
  /* overflow: hidden makes the browser actually honor min-width: 0 for this
     grid item's automatic minimum size — without it some engines still size
     the 1fr track to the content's min-content width regardless. The
     scrolling strips below manage their own overflow-x independently. */
  .featured-body { width: 100%; padding: 1.5rem 1.4rem 1.7rem; overflow: hidden; }
  .featured-body h2 { font-size: 1.6rem; margin-bottom: .7rem; }
  .featured-headline { margin-bottom: .5rem; }
  .kicker { font-size: .6rem; letter-spacing: .2em; margin-bottom: 0; }
  .featured-badge { font-size: .52rem; padding: .4rem .8rem; }
  .featured-price { margin-bottom: .8rem; }
  .featured-price-value { font-size: 1.6rem; }
  /* Spec cells become a single scrollable row — same info, a third the height.
     Both min-width: 0 AND overflow-y: hidden (alongside overflow-x: auto)
     are required for Chromium to treat this item's automatic minimum size
     as zero in the ancestor grid/flex sizing — overflow-x alone isn't
     enough, so without overflow-y set too, every ancestor up to the card
     itself was stretching to fit this row's full unwrapped content width. */
  .featured-specs {
    flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden; gap: 0;
    width: calc(100% + 2.8rem); margin: 0 -1.4rem 1.1rem; padding: 0 1.4rem;
    min-width: 0; scrollbar-width: none; -webkit-overflow-scrolling: touch;
  }
  .featured-specs::-webkit-scrollbar { display: none; }
  .spec-cell { padding-right: 1rem; margin-right: 1rem; }
  .spec-value { font-size: 1.1rem; }
  /* Description clamps to 3 lines with a Read more toggle (JS-driven) so the
     card doesn't front-load a long paragraph before the buttons and specs. */
  .featured-desc { font-size: .88rem; margin-bottom: .3rem; }
  .featured-desc-wrap { margin-bottom: 1.2rem; }
  .featured-desc.clamped {
    display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
  }
  .featured-desc-toggle { display: inline-block; }
  /* Feature tags scroll horizontally in one row instead of wrapping to several. */
  .featured-chips {
    flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden;
    width: calc(100% + 2.8rem); margin: 0 -1.4rem 1.3rem; padding: 0 1.4rem;
    min-width: 0; scrollbar-width: none; -webkit-overflow-scrolling: touch;
  }
  .featured-chips::-webkit-scrollbar { display: none; }
  .featured-chips span { flex-shrink: 0; }
  /* CTAs sit side by side rather than stacking two full-width buttons.
     min-width: 0 overrides flex items' default min-width: auto, which
     would otherwise refuse to shrink past the button text's natural
     width and push the row wider than the viewport. */
  .featured-ctas { flex-wrap: nowrap; gap: .6rem; margin-bottom: .9rem; }
  .featured-ctas .btn-accent, .featured-ctas .btn-outline {
    flex: 1 1 0; min-width: 0; padding: .85rem .5rem; font-size: .56rem; letter-spacing: .08em;
    text-align: center; line-height: 1.3; white-space: normal;
  }
  .featured-mls { margin-top: 0; }
}