/* ==========================================================================
   MEMVEO PRIVATE RESIDENCES — Shared Design System
   Static HTML/CSS/JS. No build step. One stylesheet, every page.
   ========================================================================== */

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

:root {
  /* ---- brand tokens (carried forward from the MEMVEO visual identity) ---- */
  --ivory:      #FAFAF8;
  --paper:      #F4F1EA;
  --green:      #1D4E3B;
  --green-deep: #12312A;
  --green-light:#2A6652;
  --sage:       #8A9A8C;
  --sage-bg:    #B7C2AD; /* a lighter, warmer sage for full-width fills — --sage itself is tuned for small accents/icons, too muddy at scale */
  --gold:       #C9A84C;
  --gold-light: #E3CD8F;
  --gold-dim:   rgba(201,168,76,.14);
  --gold-deep:  #7A5D1E; /* accessible bronze — #C9A84C is ~2.3:1 on ivory/paper, well under WCAG AA's 4.5:1 for small text. This passes ~6:1. Use for eyebrows, .btn-text, and any small gold-family text sitting on a light background; --gold/--gold-light stay for use on dark greens, where they already pass. */
  --ink:        #16150F;
  --muted:      #6B6B62;
  --muted-lt:   rgba(255,255,255,.62);
  --line:       rgba(22,21,15,.10);
  --line-dark:  rgba(255,255,255,.14);
  --serif:      'Cormorant Garamond', Georgia, serif;
  --sans:       'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --radius:     4px;
  --radius-lg:  14px;
  --shadow:     0 2px 28px rgba(18,20,15,.06);
  --shadow-lg:  0 24px 64px rgba(12,20,16,.16);
  --ease:       cubic-bezier(.22,.61,.36,1);
  color-scheme: light;
}

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

html {
  overflow-x: clip;
  /* keep anchor targets and keyboard-focused controls clear of the sticky
     nav (top) and the fixed Concierge launcher (bottom) when the browser
     scrolls them into view */
  scroll-padding-top: 84px;
  scroll-padding-bottom: 128px;
}
body {
  font-family: var(--sans);
  background: var(--ivory);
  color: var(--ink);
  font-size: 16.5px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  /* clip, not hidden: contains stray horizontal overflow without turning the
     page into a horizontal scroll container (the older `hidden` here still
     let <html> scroll). Real offenders are fixed at source (nav em-breakpoint,
     wrapping buttons, table in its own scroller). */
  overflow-x: clip;
}

img, video { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button, input, textarea, select { font-family: inherit; }
ul { list-style: none; }

::selection { background: var(--gold-dim); color: var(--green-deep); }

/* ---- typography ---- */
.serif { font-family: var(--serif); }
h1,h2,h3,h4 { font-family: var(--serif); font-weight: 400; line-height: 1.14; letter-spacing: -.01em; }
h1 { font-size: clamp(2.6rem, 5.6vw, 4.9rem); }
h2 { font-size: clamp(2rem, 4vw, 3.2rem); }
h3 { font-size: clamp(1.35rem, 2.3vw, 1.9rem); }
h4 { font-size: 1.1rem; font-family: var(--sans); font-weight: 500; }
p { color: var(--muted); }
em { font-style: italic; }
.text-gold { color: var(--gold); }
.text-green { color: var(--green); }
.text-ivory { color: var(--ivory); }

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .6em;
  font-family: var(--sans);
  font-size: .7rem;
  font-weight: 500;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--gold-deep);
  margin-bottom: 1.4rem;
}
.eyebrow::before { content: ''; width: 22px; height: 1px; background: var(--gold-deep); display: inline-block; }
.eyebrow--center { justify-content: center; }
.eyebrow--light { color: var(--gold-light); }

.rule { width: 44px; height: 1px; background: var(--gold); margin: 0 0 2rem; }
.rule--center { margin-inline: auto; }

/* ---- layout ---- */
.container { width: min(1180px, 92%); margin-inline: auto; }
.container--narrow { width: min(760px, 92%); margin-inline: auto; }
.section { padding: 108px 0; }
.section--lg { padding: 148px 0; }
.section--tight { padding: 72px 0; }
.section--dark { background: var(--green-deep); color: var(--ivory); }
.section--dark p { color: rgba(250,250,248,.66); }
.section--dark h2, .section--dark h3 { color: #fff; }
.section--forest { background: var(--green); color: var(--ivory); }
.section--forest p { color: rgba(250,250,248,.7); }
.section--forest h2, .section--forest h3 { color: #fff; }
.section--paper { background: var(--paper); }
.section-head { max-width: 640px; margin-bottom: 4rem; }
.section-head--center { margin-inline: auto; text-align: center; }
.section-head h2 { margin-bottom: 1.1rem; }
.section-head p { font-size: 1.05rem; line-height: 1.75; }

/* ---- buttons ---- */
.btn {
  display: inline-flex; align-items: center; gap: .55rem;
  padding: 1rem 2.1rem;
  font-size: .82rem;
  font-weight: 500;
  letter-spacing: .09em;
  text-transform: uppercase;
  cursor: pointer;
  border: 1.5px solid transparent;
  border-radius: var(--radius);
  transition: background .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease), transform .2s var(--ease);
  /* was white-space:nowrap — that forced the button wider than its container
     at 320px / enlarged text and pushed the page. Now the label wraps and
     stays centred; there is enough padding that normal-width buttons still
     sit on one line. */
  white-space: normal;
  max-width: 100%;
  text-align: center;
}
.btn-gold { background: var(--gold); color: var(--green-deep); border-color: var(--gold); }
.btn-gold:hover { background: var(--gold-light); border-color: var(--gold-light); transform: translateY(-1px); }
.btn-outline-light { background: transparent; color: #fff; border-color: rgba(255,255,255,.42); }
.btn-outline-light:hover { border-color: #fff; background: rgba(255,255,255,.06); }
.btn-outline-dark { background: transparent; color: var(--green); border-color: var(--green); }
.btn-outline-dark:hover { background: var(--green); color: #fff; }
.btn-text { padding: 0; border: none; letter-spacing: .06em; text-transform: none; font-size: .95rem; font-weight: 500; color: var(--gold-deep); gap: .4rem; }
.btn-text::after { content: '→'; transition: transform .2s var(--ease); }
.btn-text:hover::after { transform: translateX(3px); }
/* On a dark (green) background, .btn-text needs the light gold instead — the
   accessible --gold-deep default above is tuned for ivory/paper, and would
   be too low-contrast on green-deep itself. */
.section--dark .btn-text, .section--forest .btn-text, .btn-text--on-dark { color: var(--gold-light); }
.btn-block { display: flex; width: 100%; justify-content: center; }

/* ---- nav ---- */
#site-nav {
  /* Note: intentionally no backdrop-filter/filter/transform here — any of those
     would make this element a new positioning containing block, which breaks
     the mobile nav panel's `position: fixed` full-viewport coverage below. */
  position: sticky; top: 0; z-index: 200;
  background: rgba(15,42,36,.97);
  border-bottom: 1px solid rgba(255,255,255,.07);
  transition: box-shadow .3s ease;
}
.nav-inner { width: min(1260px, 94%); margin-inline: auto; height: 76px; display: flex; align-items: center; justify-content: space-between; transition: height .25s var(--ease); }
#site-nav.is-scrolled { box-shadow: 0 8px 28px rgba(0,0,0,.16); }
#site-nav.is-scrolled .nav-inner { height: 60px; }
.nav-logo { display: flex; flex-direction: column; line-height: 1; }
.nav-logo .wordmark { font-family: var(--serif); font-size: 1.5rem; letter-spacing: .04em; color: #fff; }
.nav-logo .wordmark span { color: var(--gold); }
.nav-logo .descriptor { font-size: .55rem; letter-spacing: .28em; text-transform: uppercase; color: rgba(255,255,255,.45); margin-top: 3px; }
.nav-links { display: flex; align-items: center; gap: 2.4rem; }
.nav-links a:not(.btn) { color: rgba(255,255,255,.76); font-size: .82rem; letter-spacing: .02em; transition: color .18s; }
.nav-links a:not(.btn):hover { color: #fff; }
.nav-links a.is-active { color: var(--gold-light); }
.nav-cta.btn { padding: .72rem 1.4rem; font-size: .72rem; }
.nav-hamburger { display: none; flex-direction: column; gap: 5px; background: none; border: none; cursor: pointer; padding: 6px; }
.nav-hamburger span { width: 22px; height: 1.5px; background: #fff; transition: transform .22s var(--ease), opacity .22s; }
.nav-hamburger.is-open span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.nav-hamburger.is-open span:nth-child(2) { opacity: 0; }
.nav-hamburger.is-open span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }
/* em, not px, so the nav also folds to the hamburger under browser page-zoom
   and browser text-resize (both scale the em) instead of overflowing the bar.
   58.75em == 940px at the default 16px root. */
@media (max-width: 58.75em) {
  .nav-links { display: none; }
  .nav-hamburger { display: flex; }
  .nav-links.is-open {
    display: flex; flex-direction: column; align-items: flex-start; gap: 1.7rem;
    position: fixed; top: 76px; left: 0; right: 0; bottom: 0;
    background: var(--green-deep);
    padding: 2.6rem 7% 2rem; box-shadow: var(--shadow-lg);
    overflow-y: auto;
  }
  .nav-links.is-open a:not(.btn) { font-size: 1.05rem; }
  .nav-links.is-open .nav-cta { margin-top: .5rem; }
}
body.nav-open { overflow: hidden; }

/* ---- footer ---- */
#site-footer { background: var(--green-deep); color: rgba(250,250,248,.6); padding: 88px 0 34px; }
.footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 3rem; padding-bottom: 64px; border-bottom: 1px solid rgba(255,255,255,.09); }
.footer-brand .wordmark { font-family: var(--serif); font-size: 1.6rem; color: #fff; }
.footer-brand .wordmark span { color: var(--gold); }
.footer-brand p { margin-top: 1rem; max-width: 280px; font-size: .88rem; line-height: 1.7; color: rgba(250,250,248,.5); }
.footer-col h4 { font-family: var(--sans); font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: var(--gold-light); margin-bottom: 1.2rem; font-weight: 500; }
.footer-col a { display: block; font-size: .88rem; color: rgba(250,250,248,.62); margin-bottom: .78rem; transition: color .15s; }
.footer-col a:hover { color: #fff; }
.footer-bottom { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 1rem; padding-top: 30px; font-size: .78rem; color: rgba(250,250,248,.4); }
@media (max-width: 860px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .footer-grid { grid-template-columns: 1fr; gap: 2.2rem; } }
/* On small screens the fixed Concierge launcher (bottom-right) would sit over
   the last footer row at full scroll — extra bottom room clears it, including
   when the launcher grows with browser text-resize. */
@media (max-width: 620px) { #site-footer { padding-bottom: 116px; } }

/* ---- hero / cinematic media ---- */
.media-frame {
  position: relative; overflow: hidden; background: var(--green-deep);
}
.media-frame video, .media-frame .media-poster {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
}
.media-poster { background-position: center; background-size: cover; }
.media-frame .media-poster.ken-burns { animation: kenBurns 26s ease-in-out infinite alternate; }
@keyframes kenBurns { from { transform: scale(1); } to { transform: scale(1.08); } }
@media (prefers-reduced-motion: reduce) { .media-frame .media-poster.ken-burns { animation: none; } }
.media-frame .media-scrim {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(18,49,42,.35) 0%, rgba(15,35,29,.55) 55%, rgba(10,22,18,.86) 100%);
}
.media-frame .media-vignette {
  position: absolute; inset: 0;
  background: radial-gradient(ellipse at 50% 30%, transparent 30%, rgba(9,20,16,.5) 100%);
}

#hero { position: relative; min-height: 100vh; display: flex; align-items: center; justify-content: center; color: #fff; text-align: center; }
.hero-inner { position: relative; z-index: 2; width: 100%; max-width: 820px; margin-inline: auto; padding: 0 24px; display: flex; flex-direction: column; align-items: center; }
.hero-eyebrow-lockup { margin-bottom: 2.4rem; }
.hero-wordmark { font-family: var(--serif); font-size: clamp(1.3rem, 2.4vw, 1.9rem); letter-spacing: .06em; color: #fff; }
.hero-wordmark span { color: var(--gold); }
.hero-descriptor { font-size: .68rem; letter-spacing: .3em; text-transform: uppercase; color: rgba(255,255,255,.55); margin-top: 6px; }
.hero-category { font-size: .74rem; letter-spacing: .24em; text-transform: uppercase; color: var(--gold-light); margin: 0 0 1.3rem; }
#hero h1 { color: #fff; font-weight: 300; max-width: 720px; margin: 0 auto 1.3rem; }
#hero h1 em { font-style: normal; color: var(--gold-light); }
.hero-emotional { font-family: var(--serif); font-style: italic; font-size: clamp(1.1rem, 2vw, 1.35rem); color: var(--gold-light); margin-bottom: 1.8rem; }
.hero-location { font-size: .92rem; letter-spacing: .06em; color: rgba(255,255,255,.7); margin-bottom: 1.6rem; }
.hero-sub { font-size: 1.05rem; color: rgba(255,255,255,.7); max-width: 560px; line-height: 1.75; margin: 0 auto 2.8rem; letter-spacing: .01em; }
.hero-ctas { display: flex; gap: 1.1rem; flex-wrap: wrap; justify-content: center; }
.hero-scroll-cue {
  position: absolute; left: 50%; bottom: 28px; transform: translateX(-50%);
  z-index: 2; display: flex; flex-direction: column; align-items: center; gap: 8px;
  color: rgba(255,255,255,.5); font-size: .64rem; letter-spacing: .2em; text-transform: uppercase;
}
.hero-scroll-cue .line { width: 1px; height: 34px; background: linear-gradient(180deg, rgba(255,255,255,.6), transparent); animation: pulseLine 2.4s ease-in-out infinite; }
@keyframes pulseLine { 0%,100%{opacity:.4;} 50%{opacity:1;} }
@media (prefers-reduced-motion: reduce) { .hero-scroll-cue .line { animation: none; } }

/* generic page hero (sub-pages): shorter, still cinematic */
.page-hero { position: relative; min-height: 54vh; display: flex; align-items: flex-end; color: #fff; }
.page-hero .hero-inner { padding-bottom: 72px; }
.page-hero h1 { color: #fff; font-weight: 300; }
.page-hero .hero-sub { margin-bottom: 0; }

/* ---- trust strip ---- */
#trust-strip { background: var(--paper); border-bottom: 1px solid var(--line); padding: 26px 0; }
.trust-inner { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; }
.trust-item { display: flex; align-items: center; gap: .55rem; font-size: .78rem; letter-spacing: .03em; color: var(--muted); padding: .35rem 1.5rem; white-space: nowrap; }
.trust-item:not(:last-child) { border-right: 1px solid var(--line); }
.trust-item .dot { width: 5px; height: 5px; border-radius: 50%; background: var(--gold); flex-shrink: 0; }
@media (max-width: 760px) { .trust-item { border-right: none; padding: .35rem 1rem; } }

/* ---- reveal-on-scroll ---- */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.reveal:not(.is-visible) { will-change: opacity, transform; }
.reveal.is-visible { opacity: 1; transform: none; }
/* V7: a short internal cascade for section headings — eyebrow, then heading,
   then supporting line — settle in sequence rather than as one block.
   Pure CSS, no markup change: applies only once .section-head has revealed. */
.section-head.reveal.is-visible > * { animation: revealChild .6s var(--ease) both; }
.section-head.reveal.is-visible > *:nth-child(1) { animation-delay: .04s; }
.section-head.reveal.is-visible > *:nth-child(2) { animation-delay: .13s; }
.section-head.reveal.is-visible > *:nth-child(3) { animation-delay: .22s; }
.section-head.reveal.is-visible > *:nth-child(4) { animation-delay: .30s; }
@keyframes revealChild { from { opacity: 0; transform: translateY(13px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  .section-head.reveal.is-visible > * { animation: none; }
}

/* ---- problem section ---- */
.problem-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 5rem; align-items: start; }
.problem-list { display: flex; flex-direction: column; gap: 0; }
.problem-list li { padding: 1.15rem 0; border-bottom: 1px solid var(--line); font-size: .95rem; color: var(--ink); display: flex; align-items: baseline; gap: .8rem; }
.problem-list li::before { content: ''; width: 5px; height: 5px; border-radius: 50%; background: var(--gold); flex-shrink: 0; transform: translateY(-3px); }
@media (max-width: 860px) { .problem-grid { grid-template-columns: 1fr; gap: 2.5rem; } }

/* ---- core promise (big editorial statement) ---- */
.promise { text-align: center; padding: 60px 0; }
.promise h2 { font-size: clamp(2.2rem, 6vw, 4.4rem); line-height: 1.12; max-width: 900px; margin: 0 auto 2.4rem; }
.promise p { max-width: 620px; margin: 0 auto; font-size: 1.08rem; line-height: 1.8; }

/* ---- service tier cards ---- */
.tiers-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; align-items: stretch; }
.tier-card {
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.03);
  border-radius: var(--radius-lg);
  padding: 2.6rem 2.1rem;
  display: flex; flex-direction: column;
  transition: background .25s, transform .25s;
}
.tier-card:hover { background: rgba(255,255,255,.06); transform: translateY(-4px); }
.tier-card.is-featured { background: var(--ivory); color: var(--ink); border-color: var(--gold); }
.tier-card.is-featured p, .tier-card.is-featured .tier-label { color: var(--muted); }
.tier-card.is-featured .tier-name { color: var(--green); }
.tier-card.is-featured .tier-features li { color: var(--ink); border-bottom-color: var(--line); }
.tier-badge {
  align-self: flex-start; font-size: .64rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
  padding: .32rem .8rem; border-radius: 3px; background: rgba(255,255,255,.14); color: rgba(255,255,255,.85); margin-bottom: 1.6rem;
}
.tier-card.is-featured .tier-badge { background: var(--gold-dim); color: var(--green); }
.tier-label { font-size: .68rem; letter-spacing: .18em; text-transform: uppercase; color: var(--gold-light); margin-bottom: .6rem; }
.tier-name { font-family: var(--serif); font-size: 1.7rem; color: #fff; margin-bottom: .6rem; }
.tier-tagline { font-size: .92rem; color: rgba(255,255,255,.62); line-height: 1.6; margin-bottom: 1.8rem; }
.tier-divider { height: 1px; background: rgba(255,255,255,.12); margin-bottom: 1.8rem; }
.tier-card.is-featured .tier-divider { background: var(--line); }
.tier-features { display: flex; flex-direction: column; gap: .85rem; flex: 1; margin-bottom: 2rem; }
.tier-features li { display: flex; gap: .7rem; align-items: flex-start; font-size: .88rem; color: rgba(255,255,255,.78); line-height: 1.55; padding-bottom: .85rem; border-bottom: 1px solid rgba(255,255,255,.07); }
.tier-features li:last-child { border-bottom: none; padding-bottom: 0; }
.tier-features li::before { content: '—'; color: var(--gold); flex-shrink: 0; }
.tier-engagement { font-size: .8rem; letter-spacing: .04em; color: rgba(255,255,255,.5); margin-bottom: 1.4rem; }
.tier-card.is-featured .tier-engagement { color: var(--muted); }
@media (max-width: 980px) { .tiers-grid { grid-template-columns: 1fr; max-width: 480px; margin-inline: auto; } }

/* ---- stepper / visual service experience ---- */
.stepper { position: relative; max-width: 760px; margin: 0 auto; }
.stepper::before { content: ''; position: absolute; left: 27px; top: 12px; bottom: 12px; width: 1px; background: var(--line-dark); }
.step-row { position: relative; display: grid; grid-template-columns: 56px 1fr; gap: 2rem; padding: 1.9rem 0; }
.step-index {
  width: 54px; height: 54px; border-radius: 50%; border: 1.5px solid rgba(255,255,255,.25);
  display: flex; align-items: center; justify-content: center; font-family: var(--serif); font-size: 1.3rem; color: var(--gold-light);
  background: var(--green-deep); position: relative; z-index: 1; flex-shrink: 0;
  transition: border-color .3s, background .3s;
}
.step-row.is-visible .step-index { border-color: var(--gold); background: var(--green); }
.step-body h3 { font-size: 1.15rem; font-family: var(--sans); font-weight: 500; color: #fff; margin-bottom: .4rem; }
.step-body p { font-size: .94rem; color: rgba(255,255,255,.62); max-width: 480px; }
.step-final { text-align: center; margin-top: 2.5rem; padding-top: 2.5rem; border-top: 1px solid rgba(255,255,255,.12); }
.step-final p { font-family: var(--serif); font-size: 1.5rem; color: #fff; font-style: italic; line-height: 1.5; }

/* ---- video / film section ---- */
/* ---- brand film: click-to-play standalone player (16:9, no crop, no autoplay) ---- */
.film-frame {
  position: relative; aspect-ratio: 16 / 9;      /* reserves height — no layout shift */
  border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-lg);
  background: #0c1712;
}
.film-video { width: 100%; height: 100%; object-fit: contain; display: block; background: #0c1712; }
.film-nofallback { padding: 2rem; color: #fff; font-size: .9rem; }
.film-nofallback a { color: var(--gold-light); text-decoration: underline; }

/* custom poster/play overlay: shown only once JS confirms the <video> is present
   and playback hasn't started. Without JS the native <video controls> poster
   button is used instead — still fully playable. */
.film-play { display: none; }
.film-frame.is-ready:not(.is-playing) .film-play {
  position: absolute; inset: 0; z-index: 3;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1rem;
  border: none; cursor: pointer; color: #fff; text-align: center;
  background:
    radial-gradient(ellipse 60% 55% at 50% 52%, rgba(8,18,14,.5) 0%, rgba(8,18,14,0) 70%),
    linear-gradient(180deg, rgba(8,18,14,.22) 0%, rgba(8,18,14,.15) 45%, rgba(8,18,14,.55) 100%);
}
/* keep the native control chrome out of sight at rest (Chrome/Safari) so the
   custom ring is the only affordance; it returns the moment playback starts */
.film-frame.is-ready:not(.is-playing) .film-video::-webkit-media-controls { display: none !important; }
.film-frame.is-ready:not(.is-playing) .film-video::-webkit-media-controls-enclosure { display: none !important; }
.film-play .ring {
  width: 84px; height: 84px; border-radius: 50%; border: 1.5px solid rgba(255,255,255,.78);
  display: flex; align-items: center; justify-content: center;
  transition: transform .25s var(--ease), background .25s var(--ease);
}
.film-play:hover .ring, .film-play:focus-visible .ring { transform: scale(1.06); background: rgba(255,255,255,.14); }
.film-play svg { width: 22px; height: 22px; fill: #fff; margin-left: 3px; }
.film-play-label { font-size: .8rem; letter-spacing: .12em; text-transform: uppercase; text-shadow: 0 1px 8px rgba(6,14,11,.6); }
.film-play-meta { display: block; margin-top: .3rem; font-size: .72rem; letter-spacing: .05em; text-transform: none; color: rgba(255,255,255,.8); text-shadow: 0 1px 8px rgba(6,14,11,.6); }
@media (prefers-reduced-motion: reduce) { .film-play:hover .ring, .film-play:focus-visible .ring { transform: none; } }

/* ---- residence dashboard mockup ---- */
.dash-mockup { background: #fff; border-radius: 18px; overflow: hidden; border: 1px solid var(--line); box-shadow: var(--shadow-lg); }
.dash-topbar { background: var(--green-deep); padding: 1.1rem 1.7rem; display: flex; align-items: center; justify-content: space-between; }
.dash-topbar-greeting { font-family: var(--serif); font-size: 1.05rem; color: #fff; }
.dash-topbar-meta { font-size: .76rem; color: rgba(255,255,255,.5); margin-top: 2px; }
.dash-status { display: flex; align-items: center; gap: .5rem; font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; color: var(--gold-light); }
.dash-status .pulse { width: 8px; height: 8px; border-radius: 50%; background: #6FBF8B; box-shadow: 0 0 0 0 rgba(111,191,139,.6); animation: pulseDot 2.2s infinite; }
@keyframes pulseDot { 0%{ box-shadow: 0 0 0 0 rgba(111,191,139,.55);} 70%{ box-shadow: 0 0 0 9px rgba(111,191,139,0);} 100%{ box-shadow: 0 0 0 0 rgba(111,191,139,0);} }
@media (prefers-reduced-motion: reduce) { .dash-status .pulse { animation: none; } }
.dash-body { display: grid; grid-template-columns: 210px 1fr; min-height: 480px; }
.dash-sidebar { border-right: 1px solid var(--line); background: #fdfdfb; padding: 1.2rem 0; }
.dash-sidebar button {
  width: 100%; text-align: left; background: none; border: none; cursor: pointer;
  padding: .72rem 1.4rem; font-size: .84rem; color: var(--muted); display: flex; align-items: center; gap: .7rem;
  border-right: 2px solid transparent; transition: background .15s, color .15s;
}
.dash-sidebar button:hover { background: var(--gold-dim); color: var(--green); }
.dash-sidebar button.is-active { background: var(--gold-dim); color: var(--green); font-weight: 500; border-right-color: var(--gold); }
.dash-panel { padding: 1.8rem 2rem; display: none; flex-direction: column; gap: 1.5rem; }
.dash-panel.is-active { display: flex; }
.dash-section-label { font-size: .68rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--gold); }
.dash-entry { display: flex; gap: 1rem; padding: 1rem; border-radius: 8px; background: var(--paper); }
.dash-entry-icon { width: 34px; height: 34px; border-radius: 50%; background: var(--green); color: #fff; display: flex; align-items: center; justify-content: center; font-size: .8rem; flex-shrink: 0; }
.dash-entry-meta { font-size: .74rem; color: var(--muted); margin-bottom: .25rem; }
.dash-entry-text { font-size: .87rem; color: var(--ink); line-height: 1.55; }
.dash-photo-strip { display: flex; gap: .6rem; overflow-x: auto; padding-bottom: 4px; }
.dash-photo-thumb { width: 78px; height: 78px; border-radius: 8px; background: var(--paper); border: 1px solid var(--line); flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-size: 1.3rem; color: var(--sage); }
.dash-row { display: flex; justify-content: space-between; align-items: center; padding: .7rem .95rem; background: var(--paper); border-radius: 6px; font-size: .84rem; }
.dash-row-name { color: var(--ink); font-weight: 500; }
.dash-tag { font-size: .68rem; padding: .22rem .6rem; border-radius: 4px; font-weight: 500; letter-spacing: .03em; }
.dash-tag.ok { background: rgba(29,78,59,.1); color: var(--green); }
.dash-tag.pending { background: var(--gold-dim); color: #a07a28; }
.dash-doc-list { display: flex; flex-direction: column; gap: .5rem; }
.dash-doc { display: flex; align-items: center; justify-content: space-between; padding: .75rem .95rem; background: var(--paper); border-radius: 6px; font-size: .84rem; color: var(--ink); }
.dash-doc span.file-type { font-size: .68rem; color: var(--muted); }
@media (max-width: 700px) {
  .dash-body { grid-template-columns: 1fr; }
  .dash-sidebar { display: flex; overflow-x: auto; border-right: none; border-bottom: 1px solid var(--line); padding: .8rem; gap: .4rem; }
  .dash-sidebar button { white-space: nowrap; border-right: none; border-bottom: 2px solid transparent; }
  .dash-sidebar button.is-active { border-bottom-color: var(--gold); }
}

/* ---- vault grid ---- */
.vault-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.4rem; }
.vault-card { padding: 2.1rem; border: 1px solid var(--line); border-radius: 10px; background: #fff; box-shadow: var(--shadow); transition: transform .2s, box-shadow .2s; }
.vault-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); }
.vault-card-glyph { width: 44px; height: 44px; border-radius: 8px; background: var(--green); display: flex; align-items: center; justify-content: center; margin-bottom: 1.3rem; color: var(--gold-light); font-family: var(--serif); font-size: 1.1rem; }
.vault-card h3 { font-family: var(--sans); font-size: .98rem; font-weight: 600; color: var(--green); margin-bottom: .5rem; }
.vault-card p { font-size: .87rem; line-height: 1.65; }
@media (max-width: 900px) { .vault-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .vault-grid { grid-template-columns: 1fr; } }

/* ---- three-stage (before/during/return) ---- */
.stages { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.4rem; }
.stage-card { padding: 2.6rem 2rem; border: 1px solid var(--line); border-radius: 10px; background: var(--paper); position: relative; }
.stage-num { font-family: var(--serif); font-size: 2.6rem; color: var(--gold-deep); line-height: 1; margin-bottom: 1.2rem; }
.stage-card h3 { color: var(--green); margin-bottom: .7rem; font-size: 1.3rem; }
.stage-card p { font-size: .92rem; }
@media (max-width: 860px) { .stages { grid-template-columns: 1fr; } }

/* ---- generic feature/detail cards ---- */
.cards-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.4rem; }
.detail-card { padding: 1.9rem; border: 1px solid var(--line); border-radius: 10px; background: #fff; box-shadow: var(--shadow); }
.detail-card h4 { color: var(--green); margin-bottom: .5rem; }
.detail-card p { font-size: .9rem; }
@media (max-width: 700px) { .cards-grid { grid-template-columns: 1fr; } }

/* ---- audience / partner grid ---- */
.audience-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.audience-pill { padding: 1.5rem 1.4rem; border: 1px solid var(--line-dark); border-radius: 8px; font-size: .92rem; color: rgba(255,255,255,.82); background: rgba(255,255,255,.03); }
@media (max-width: 760px) { .audience-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 480px) { .audience-grid { grid-template-columns: 1fr; } }

/* ---- service area map-ish panel ---- */
.area-panel { display: grid; grid-template-columns: 1fr 1fr; gap: 3.5rem; align-items: center; }
.area-visual {
  aspect-ratio: 4/5; border-radius: var(--radius-lg); position: relative; overflow: hidden;
  background: linear-gradient(160deg, var(--green-deep) 0%, var(--green) 55%, #0e241d 100%);
}
.area-visual .coast-line { position: absolute; inset: 0; opacity: .5; }
.area-marker { position: absolute; display: flex; align-items: center; gap: .6rem; font-size: .74rem; letter-spacing: .04em; color: #fff; font-family: var(--serif); font-size: 1rem; }
.area-marker .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 0 5px rgba(201,168,76,.18); }
.area-marker.is-future { color: rgba(255,255,255,.4); font-family: var(--sans); font-size: .76rem; }
.area-marker.is-future .dot { background: rgba(255,255,255,.35); box-shadow: none; }
@keyframes markerPulse {
  0%   { box-shadow: 0 0 0 0 rgba(201,168,76,.5); }
  70%  { box-shadow: 0 0 0 16px rgba(201,168,76,0); }
  100% { box-shadow: 0 0 0 0 rgba(201,168,76,0); }
}
.area-marker:not(.is-future) .dot { animation: markerPulse 2.8s ease-out infinite; }
@media (prefers-reduced-motion: reduce) { .area-marker:not(.is-future) .dot { animation: none; } }
.area-list { display: flex; flex-direction: column; gap: 1.8rem; }
.area-list-group h4 { font-size: .72rem; letter-spacing: .16em; text-transform: uppercase; color: var(--gold); margin-bottom: .9rem; }
.area-list-group .places { font-family: var(--serif); font-size: 1.3rem; line-height: 1.6; color: var(--green); }
.area-list-group .places span { display: inline; }
.area-list-group .places span:not(:last-child)::after { content: '  ·  '; color: var(--gold); font-family: var(--sans); }
.area-list-group.is-future .places { font-family: var(--sans); font-size: .92rem; color: var(--muted); line-height: 2; }
.area-list-group.is-future .places span:not(:last-child)::after { color: var(--line); content: '  ·  '; }
@media (max-width: 860px) { .area-panel { grid-template-columns: 1fr; gap: 2.2rem; } }

/* ==========================================================================
   V2 REFINEMENT — signature diagram, editorial sections, concierge
   Added for the "reduce boxes, elevate to hospitality-grade" pass.
   These are additive: nothing above this line was removed, because
   services/*.html, residence-experience.html, about.html and partners.html
   still use the tiers/vault/stages/cards/audience/trust-chip classes above.
   ========================================================================== */

/* ---- editorial "flowing" list (Problem section) ---- */
.problem-flow {
  font-family: var(--serif); font-style: italic; color: var(--green);
  font-size: clamp(1.25rem, 2.4vw, 1.85rem); line-height: 1.75; max-width: 720px;
}
.problem-flow .sep { color: var(--gold); font-style: normal; margin: 0 .35em; font-family: var(--sans); }

/* ---- signature diagram / scrollytelling experience ---- */
.diagram-wrap { display: grid; grid-template-columns: 1.15fr 1fr; gap: 4.5rem; align-items: start; }
.diagram-visual { position: sticky; top: 110px; }
.diagram-visual svg { width: 100%; height: auto; display: block; }
.hotspot-zone { transition: opacity .6s var(--ease), filter .6s var(--ease); opacity: .32; }
.hotspot-zone.is-active { opacity: 1; filter: drop-shadow(0 0 12px rgba(201,168,76,.5)); }
.hotspot-zone-line { transition: stroke .6s var(--ease), opacity .6s var(--ease); }
.diagram-caption { text-align: center; margin-top: 1.6rem; font-size: .76rem; letter-spacing: .08em; text-transform: uppercase; color: rgba(255,255,255,.4); }
.hotspot-list { display: flex; flex-direction: column; }
.hotspot-item {
  /* V6: was opacity:.5 on the whole item, compounding with h3's own
     rgba(255,255,255,.6) to ~2.6:1 effective contrast on green-deep —
     well under WCAG AA. Inactive/active is now communicated through a
     left border + heading weight/color alone, at full item opacity, so
     every step stays readable even before (or instead of) scroll/hover
     activating it. */
  padding: 1.9rem 0 1.9rem 1.1rem; border-bottom: 1px solid rgba(255,255,255,.09);
  border-left: 2px solid rgba(255,255,255,.14);
  cursor: pointer; transition: border-color .35s var(--ease);
}
.hotspot-item:first-child { padding-top: 0; }
.hotspot-item:last-child { border-bottom: none; }
.hotspot-item.is-active { border-left-color: var(--gold); }
.hotspot-item .hn { font-family: var(--serif); font-size: .82rem; color: var(--gold-light); margin-bottom: .5rem; display: block; }
.hotspot-item h3 { font-size: 1.05rem; font-family: var(--sans); font-weight: 500; letter-spacing: .02em; text-transform: uppercase; color: rgba(255,255,255,.8); margin-bottom: .5rem; transition: color .3s; }
.hotspot-item.is-active h3 { color: #fff; }
.hotspot-item p { font-size: .95rem; color: rgba(255,255,255,.68); max-width: 400px; margin: 0; }
.signature-finish { text-align: center; margin-top: 4rem; padding-top: 3.5rem; border-top: 1px solid rgba(255,255,255,.12); }
.signature-finish .lead { font-family: var(--serif); font-size: clamp(1.5rem, 3vw, 2.1rem); color: #fff; margin-bottom: 1.4rem; }
.signature-finish .lead em { color: var(--gold-light); font-style: normal; }
.signature-finish .beats { display: flex; gap: .6rem; justify-content: center; flex-wrap: wrap; font-size: .95rem; color: rgba(255,255,255,.7); margin-bottom: 1.6rem; }
.signature-finish .beats span:not(:last-child)::after { content: '·'; color: var(--gold); margin-left: .6rem; }
.signature-finish .brand { font-family: var(--serif); font-size: 1.2rem; letter-spacing: .1em; color: var(--gold-light); }
@media (max-width: 900px) {
  .diagram-wrap { grid-template-columns: 1fr; gap: 2.5rem; }
  .diagram-visual { position: relative; top: 0; }
}

/* ---- services: stepped vertical journey (replaces 3-card grid on homepage) ---- */
.service-steps { max-width: 840px; }
.service-step {
  display: grid; grid-template-columns: 84px 1fr; gap: 2rem;
  padding: 2.8rem 0; border-bottom: 1px solid var(--line);
  align-items: start;
}
.service-step:first-child { padding-top: 0; }
.service-step:last-child { border-bottom: none; padding-bottom: 0; }
.service-step .num { font-family: var(--serif); font-size: 2.3rem; color: var(--gold); line-height: 1; }
.service-step h3 { color: var(--green); margin-bottom: .6rem; }
.service-step p { font-size: 1rem; max-width: 520px; margin-bottom: .9rem; }
@media (max-width: 640px) {
  .service-step { grid-template-columns: 1fr; gap: .8rem; }
}

/* ---- vault: single visual panel (replaces 6-card grid on homepage) ---- */
.vault-panel { display: grid; grid-template-columns: .85fr 1fr; gap: 4.5rem; align-items: center; }
.vault-graphic { position: relative; aspect-ratio: 5/4; max-width: 420px; }
.vault-doc {
  position: absolute; background: #fff; border: 1px solid var(--line); border-radius: 8px;
  box-shadow: 0 18px 40px rgba(18,20,15,.10);
}
.vault-doc.d1 { width: 68%; height: 78%; left: 4%; top: 14%; transform: rotate(-7deg); background: var(--paper); }
.vault-doc.d2 { width: 68%; height: 78%; left: 16%; top: 8%; transform: rotate(3deg); }
.vault-doc.d3 { width: 68%; height: 78%; left: 26%; top: 2%; transform: rotate(-2deg); background: #fff; box-shadow: 0 24px 54px rgba(18,20,15,.16); }
.vault-doc.d3 .rule-line { position: absolute; left: 14%; right: 14%; height: 1px; background: var(--line); }
.vault-seal {
  position: absolute; left: 50%; top: 34%; transform: translate(-50%, -50%);
  width: 66px; height: 66px; border-radius: 50%; background: var(--green-deep);
  border: 1px solid var(--gold); display: flex; align-items: center; justify-content: center;
  font-family: var(--serif); font-size: 1.4rem; color: var(--gold-light); z-index: 2;
  box-shadow: 0 14px 30px rgba(18,20,15,.22);
}
.vault-categories { columns: 2; column-gap: 2.6rem; }
.vault-categories li { padding: .85rem 0; border-bottom: 1px solid var(--line); font-size: .96rem; color: var(--ink); break-inside: avoid; }
.vault-categories li:nth-last-child(-n+1) { border-bottom: none; }
@media (max-width: 860px) {
  .vault-panel { grid-template-columns: 1fr; gap: 2.6rem; }
  .vault-graphic { margin-inline: auto; }
  .vault-categories { columns: 1; }
}

/* ---- property events: split section (replaces 4-card grid) ---- */
.events-split { display: grid; grid-template-columns: .9fr 1fr; gap: 4.5rem; align-items: center; }
.event-step { display: flex; gap: 1.5rem; padding: 1.5rem 0; border-bottom: 1px solid rgba(255,255,255,.09); }
.event-step:last-child { border-bottom: none; padding-bottom: 0; }
.event-step .num { font-family: var(--serif); font-size: 1.3rem; color: var(--gold); flex-shrink: 0; width: 24px; }
.event-step h4 { font-family: var(--sans); font-size: .96rem; font-weight: 500; color: #fff; margin-bottom: .35rem; }
.event-step p { font-size: .9rem; color: rgba(255,255,255,.6); margin: 0; }
@media (max-width: 860px) { .events-split { grid-template-columns: 1fr; gap: 2.2rem; } }

/* ---- referral partners: inline row (replaces 6-box grid) ---- */
.partner-row {
  text-align: center; font-family: var(--serif);
  font-size: clamp(1.05rem, 2.1vw, 1.55rem); color: rgba(255,255,255,.85); line-height: 2.1;
}
.partner-row span:not(:last-child)::after { content: '·'; color: var(--gold); font-family: var(--sans); margin: 0 .7em; }

/* ---- how it works: numbers + typography only (replaces 3-card grid) ---- */
.progress-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 3rem; }
.progress-row--four { grid-template-columns: repeat(4, 1fr); }
.progress-item { border-top: 2px solid var(--gold-deep); padding-top: 1.6rem; }
.progress-item .pn { display: block; font-family: var(--serif); font-size: .82rem; letter-spacing: .1em; color: var(--gold-deep); margin-bottom: 1rem; }
.progress-item h3 { color: var(--green); margin-bottom: .6rem; }
.progress-item p { font-size: .94rem; }
@media (max-width: 860px) { .progress-row--four { grid-template-columns: 1fr 1fr; gap: 2.2rem 2rem; } }
@media (max-width: 760px) { .progress-row { grid-template-columns: 1fr; gap: 2.2rem; } }
@media (max-width: 560px) { .progress-row--four { grid-template-columns: 1fr; } }

/* ---- arrival experience: full-bleed media + staggered checklist ---- */
#arrival.media-frame { min-height: 78vh; display: flex; align-items: center; }
.arrival-inner { max-width: 620px; }
.arrival-checklist { display: flex; flex-direction: column; gap: 1.1rem; margin-top: 2.4rem; }
.arrival-checklist .item { display: flex; align-items: center; gap: .9rem; font-size: 1.05rem; color: rgba(255,255,255,.92); }
.arrival-checklist .item .check { color: var(--gold); font-family: var(--serif); flex-shrink: 0; }

/* ---- founder: trust words, inline (replaces dashed chip grid on homepage) ---- */
.trust-words { display: flex; flex-wrap: wrap; gap: .5rem 0; margin-top: .4rem; }
.trust-words span { font-family: var(--serif); font-size: 1.2rem; color: var(--green); padding-right: 1.6rem; }
.section--forest .trust-words span, .section--dark .trust-words span { color: var(--gold-light); }
.trust-words span:not(:last-child)::after { content: '·'; color: var(--gold); margin-left: 1.6rem; font-family: var(--sans); }

/* ---- trust standards: inline list (replaces dashed-chip grid) ---- */
.trust-inline { display: flex; flex-direction: column; max-width: 560px; margin-inline: auto; }
.trust-inline .item {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: .95rem 0; border-bottom: 1px solid rgba(255,255,255,.1);
  font-size: .92rem; color: rgba(255,255,255,.55);
}
.trust-inline .item:last-child { border-bottom: none; }
.trust-inline .item .status { font-size: .68rem; letter-spacing: .1em; text-transform: uppercase; color: rgba(255,255,255,.35); display: flex; align-items: center; gap: .5rem; }
.trust-inline .item .status .dot { width: 5px; height: 5px; border-radius: 50%; background: rgba(255,255,255,.3); }
.trust-inline .item.is-active { color: #fff; }
.trust-inline .item.is-active .status { color: var(--gold-light); }
.trust-inline .item.is-active .status .dot { background: var(--gold); }

/* ==========================================================================
   MEMVEO CONCIERGE
   A deterministic, front-end knowledge-base assistant styled as a private
   concierge, not a chatbot. See assets/js/concierge.js for behavior and for
   the marked spot where a real server-side LLM integration would attach.
   ========================================================================== */
#memveo-concierge { position: fixed; right: 22px; bottom: 22px; z-index: 500; font-family: var(--sans); transition: opacity .25s var(--ease), transform .25s var(--ease); }
/* V7: the launcher must not sit on top of the full-screen mobile menu. */
body.nav-open #memveo-concierge { opacity: 0; transform: translateY(12px) scale(.94); pointer-events: none; }
.concierge-toggle {
  display: flex; align-items: center; gap: .7rem;
  background: var(--green-deep); border: 1px solid var(--gold); color: #fff;
  padding: .8rem 1.35rem .8rem .8rem; border-radius: 100px; cursor: pointer;
  box-shadow: 0 12px 32px rgba(0,0,0,.3);
  font-size: .78rem; letter-spacing: .05em;
  transition: transform .25s var(--ease), box-shadow .25s var(--ease);
}
.concierge-toggle:hover { transform: translateY(-2px); box-shadow: 0 16px 40px rgba(0,0,0,.36); }
.concierge-toggle .mono {
  width: 30px; height: 30px; border-radius: 50%; border: 1px solid var(--gold);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--serif); color: var(--gold-light); font-size: 1rem; flex-shrink: 0;
}
.concierge-toggle .label { white-space: nowrap; }
.concierge-toggle .dot-live { width: 6px; height: 6px; border-radius: 50%; background: #6FBF8B; margin-left: -.15rem; }
.concierge-toggle.pulse-once .mono { animation: conciergePulseOnce 1.5s ease-out 1; }
@keyframes conciergePulseOnce {
  0%   { box-shadow: 0 0 0 0 rgba(201,168,76,.55); }
  60%  { box-shadow: 0 0 0 14px rgba(201,168,76,0); }
  100% { box-shadow: 0 0 0 0 rgba(201,168,76,0); }
}
@media (prefers-reduced-motion: reduce) { .concierge-toggle.pulse-once .mono { animation: none; } }
@media (max-width: 620px) {
  .concierge-toggle .label { display: none; }
  .concierge-toggle { padding: .75rem; gap: 0; }
}

.concierge-panel {
  position: absolute; right: 0; bottom: calc(100% + 16px);
  width: min(392px, calc(100vw - 44px)); max-height: min(600px, 76vh);
  background: var(--ivory); border-radius: 16px; overflow: hidden;
  box-shadow: 0 34px 80px rgba(6,14,11,.4);
  display: flex; flex-direction: column;
  opacity: 0; transform: translateY(16px) scale(.97); pointer-events: none;
  transition: opacity .32s var(--ease), transform .32s var(--ease);
}
.concierge-panel.is-open { opacity: 1; transform: none; pointer-events: auto; }
.concierge-head { position: relative; background: var(--green-deep); color: #fff; padding: 1.5rem 2.6rem 1.5rem 1.6rem; flex-shrink: 0; }
.concierge-head .eyebrow-ish { font-size: .62rem; letter-spacing: .24em; text-transform: uppercase; color: var(--gold-light); margin-bottom: .5rem; }
.concierge-head h3 { font-family: var(--serif); font-size: 1.25rem; color: #fff; font-weight: 400; }
.concierge-close {
  position: absolute; top: 16px; right: 16px; background: none; border: none;
  color: rgba(255,255,255,.55); font-size: 1.3rem; line-height: 1; cursor: pointer; padding: 4px;
}
.concierge-close:hover { color: #fff; }
.concierge-body {
  /* Only .concierge-head and .concierge-input-row are pinned outside this
     element (see their flex-shrink:0 below) — everything else (messages,
     quick-reply chips, the high-intent card) lives inside this one
     scrollable region via #concierge-messages/#concierge-chips/
     #concierge-highintent, all direct children of this flex column. That's
     deliberate: when every one of those competed for a fixed share of the
     panel's capped height, their combined *minimum* size (chips wrap to
     several rows; nothing here can shrink below its own padding) exceeded
     the cap outright — and focusing the input then made the browser
     auto-scroll the whole (overflow:hidden) panel to keep it in view,
     which visibly clipped the header above it. Scoping the scroll to one
     region removes that failure mode regardless of conversation length. */
  flex: 1; min-height: 0;
  overflow-y: auto; padding: 1.5rem 1.6rem; display: flex; flex-direction: column; gap: 1.1rem; background: var(--ivory);
}
#concierge-messages { display: flex; flex-direction: column; gap: 1.1rem; }
.concierge-msg { font-size: .92rem; line-height: 1.65; max-width: 90%; }
.concierge-msg.from-concierge { color: var(--ink); }
.concierge-msg.from-concierge .who { display: block; font-size: .68rem; letter-spacing: .1em; text-transform: uppercase; color: var(--gold); margin-bottom: .3rem; }
.concierge-msg.from-visitor { align-self: flex-end; color: var(--green); font-weight: 500; text-align: right; }
.concierge-chips { display: flex; flex-wrap: wrap; gap: .5rem; }
.concierge-chip {
  font-size: .78rem; padding: .55rem 1rem; border: 1px solid var(--line); border-radius: 100px;
  background: #fff; color: var(--green); cursor: pointer; transition: all .18s var(--ease);
}
.concierge-chip:hover { border-color: var(--gold); background: var(--gold-dim); }
.concierge-highfive { padding: 1.1rem 1.2rem; background: var(--gold-dim); border-radius: 10px; }
.concierge-highfive p { font-size: .84rem; color: var(--green); margin-bottom: .7rem; line-height: 1.5; }
.concierge-highfive .btn { width: 100%; justify-content: center; padding: .7rem 1rem; font-size: .74rem; }
.concierge-input-row { display: flex; gap: .6rem; padding: 1rem 1.4rem 1.3rem; border-top: 1px solid var(--line); background: #fff; flex-shrink: 0; }
.concierge-input-row input {
  flex: 1; border: 1.4px solid var(--line); border-radius: 100px; padding: .7rem 1.15rem;
  font-size: .87rem; outline: none; background: var(--paper); transition: border-color .18s, background .18s;
}
.concierge-input-row input:focus { border-color: var(--green); background: #fff; }
.concierge-input-row button {
  background: var(--green); color: #fff; border: none; border-radius: 50%;
  width: 40px; height: 40px; flex-shrink: 0; cursor: pointer;
  display: flex; align-items: center; justify-content: center; transition: background .18s;
}
.concierge-input-row button:hover { background: var(--green-light); }
.concierge-input-row button svg { width: 15px; height: 15px; fill: #fff; }
.concierge-typing { display: flex; gap: 4px; padding: .2rem 0; }
.concierge-typing span { width: 5px; height: 5px; border-radius: 50%; background: var(--sage); animation: conciergeTyping 1.1s infinite ease-in-out; }
.concierge-typing span:nth-child(2) { animation-delay: .15s; }
.concierge-typing span:nth-child(3) { animation-delay: .3s; }
@keyframes conciergeTyping { 0%,60%,100%{ opacity:.3; transform: translateY(0); } 30%{ opacity:1; transform: translateY(-3px); } }
@media (prefers-reduced-motion: reduce) { .concierge-typing span { animation: none; opacity: .7; } }
@media (max-width: 460px) {
  .concierge-panel { right: -6px; bottom: calc(100% + 12px); width: calc(100vw - 24px); }
}

/* ---- about / founder ---- */
.founder-grid { display: grid; grid-template-columns: 340px 1fr; gap: 4.5rem; align-items: start; }
.founder-portrait { aspect-ratio: 3/4; border-radius: var(--radius-lg); position: relative; overflow: hidden; background: linear-gradient(165deg, var(--paper), #e9e4d8); border: 1px solid var(--line); }
.founder-portrait .placeholder-label {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; text-align: center;
  font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; color: var(--sage); padding: 2rem;
}
.founder-caption { margin-top: 1.1rem; font-size: .8rem; color: var(--muted); letter-spacing: .02em; }
.founder-pull { background: var(--green-deep); color: #fff; padding: 2.2rem 2.4rem; border-radius: 8px; margin: 2rem 0; }
.founder-pull p { font-family: var(--serif); font-size: 1.25rem; font-style: italic; color: rgba(255,255,255,.92); line-height: 1.6; }
.founder-creds { display: flex; flex-wrap: wrap; gap: 2.2rem; margin-top: 2.4rem; padding-top: 2rem; border-top: 1px solid var(--line); }
.founder-cred { display: flex; flex-direction: column; gap: 3px; font-size: .82rem; color: var(--muted); }
.founder-cred strong { color: var(--green); font-size: .92rem; font-weight: 600; }
@media (max-width: 860px) { .founder-grid { grid-template-columns: 1fr; gap: 2.4rem; } .founder-portrait { max-width: 320px; } }

/* ---- trust framework ---- */
.trust-framework-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.2rem; }
.trust-chip { padding: 1.6rem 1.5rem; border: 1px dashed var(--line-dark); border-radius: 8px; font-size: .84rem; color: rgba(255,255,255,.45); display: flex; align-items: center; gap: .7rem; }
.trust-chip .status-dot { width: 6px; height: 6px; border-radius: 50%; background: rgba(255,255,255,.3); flex-shrink: 0; }
@media (max-width: 760px) { .trust-framework-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 480px) { .trust-framework-grid { grid-template-columns: 1fr; } }

/* ---- FAQ accordion ---- */
.faq-list { border-top: 1px solid var(--line); }
.faq-item { border-bottom: 1px solid var(--line); }
.faq-q {
  width: 100%; background: none; border: none; cursor: pointer; text-align: left;
  display: flex; justify-content: space-between; align-items: center; gap: 1.5rem;
  padding: 1.6rem 0; font-family: var(--serif); font-size: 1.12rem; color: var(--ink);
}
.faq-q .icon { flex-shrink: 0; width: 22px; height: 22px; position: relative; }
.faq-q .icon::before, .faq-q .icon::after { content: ''; position: absolute; background: var(--gold); transition: transform .25s var(--ease); }
.faq-q .icon::before { top: 50%; left: 0; width: 100%; height: 1.4px; transform: translateY(-50%); }
.faq-q .icon::after { left: 50%; top: 0; height: 100%; width: 1.4px; transform: translateX(-50%); }
.faq-item.is-open .faq-q .icon::after { transform: translateX(-50%) rotate(90deg); opacity: 0; }
/* V7: grid-rows collapse instead of a fixed max-height cap — any answer
   length (or a narrow phone) expands fully with no mid-sentence clip. */
.faq-a { display: grid; grid-template-rows: minmax(0, 0fr); overflow: hidden; transition: grid-template-rows .4s var(--ease); }
.faq-a > * { min-height: 0; overflow: hidden; }
.faq-a p { padding-bottom: 1.6rem; font-size: .95rem; line-height: 1.75; max-width: 640px; }
.faq-item.is-open .faq-a { grid-template-rows: minmax(0, 1fr); }
@media (prefers-reduced-motion: reduce) { .faq-a { transition: none; } }

/* ---- consultation form ---- */
.consult-layout { display: grid; grid-template-columns: .9fr 1.1fr; gap: 4rem; align-items: start; }
.consult-form-card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 2.6rem; box-shadow: var(--shadow-lg); }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.form-group { display: flex; flex-direction: column; gap: .45rem; margin-bottom: 1.15rem; }
.form-group label { font-size: .74rem; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--green); }
.form-group input, .form-group select, .form-group textarea {
  padding: .85rem 1rem; border: 1.4px solid var(--line); border-radius: var(--radius); font-size: .95rem; color: var(--ink);
  background: var(--paper); outline: none; transition: border-color .18s, box-shadow .18s; width: 100%;
}
.form-group textarea { resize: vertical; min-height: 96px; }
.form-group input:focus, .form-group select:focus, .form-group textarea:focus { border-color: var(--green); box-shadow: 0 0 0 3px rgba(29,78,59,.08); background: #fff; }
.check-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem .8rem; margin-bottom: 1.4rem; }
.check-item { display: flex; align-items: center; gap: .6rem; font-size: .87rem; color: var(--ink); }
.check-item input { width: 16px; height: 16px; accent-color: var(--green); }
.form-privacy { text-align: center; font-size: .76rem; color: #aaa; margin-top: 1rem; }
@media (max-width: 900px) { .consult-layout { grid-template-columns: 1fr; gap: 2.6rem; } }
@media (max-width: 560px) { .form-row, .check-grid { grid-template-columns: 1fr; } .consult-form-card { padding: 1.8rem; } }

/* ---- misc utilities ---- */
.mt-0 { margin-top: 0 !important; }
.center { text-align: center; }
.max-620 { max-width: 620px; }
.max-680 { max-width: 680px; margin-inline: auto; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); clip-path: inset(50%); white-space: nowrap; border: 0; }
.skip-link { position: absolute; left: -999px; top: 0; z-index: 999; background: var(--gold); color: var(--green-deep); padding: .8rem 1.2rem; font-size: .85rem; font-weight: 600; }

/* ==========================================================================
   HOMEPAGE V3 — one continuous experience
   Homepage V3 reduces ~15 stacked slide-like sections to 7 flowing chapters.
   These rules are additive: nothing above was removed, because about.html,
   services.html, services/*.html, residence-experience.html and
   partners.html still use the tier/vault/stages/cards/audience classes
   defined earlier in this file. This block only adds what V3 needed new.
   ========================================================================== */

/* ---- chapter seam: softens the hard line between two adjacent sections of
   the same visual "chapter" (e.g. POV → Residence Intelligence) so V3 reads
   as one continuous flow rather than stacked slides. Reuses the existing
   .section--dark/.section--forest/.section-head--center patterns for
   everything else — no need for parallel classes there. ---- */
.chapter-seam {
  height: 120px; margin-top: -120px; position: relative; z-index: 1;
  background: linear-gradient(180deg, transparent, var(--green-deep));
  pointer-events: none;
}
.chapter-seam--to-light { background: linear-gradient(180deg, transparent, var(--ivory)); }
.chapter-seam--to-paper { background: linear-gradient(180deg, transparent, var(--paper)); }

/* ---- hero: ambient motion even with no video file present ---- */
.media-frame.is-ambient::before {
  content: '';
  position: absolute; inset: -10%; z-index: 1; pointer-events: none;
  background: radial-gradient(ellipse 60% 40% at 30% 20%, rgba(227,205,143,.10), transparent 60%);
  animation: ambientSweep 18s ease-in-out infinite alternate;
}
@keyframes ambientSweep {
  0%   { transform: translate(-4%, -2%) scale(1); opacity: .7; }
  100% { transform: translate(4%, 3%) scale(1.15); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) { .media-frame.is-ambient::before { animation: none; } }
.hero-note {
  margin-top: 3.2rem; font-size: .72rem; letter-spacing: .08em; color: rgba(255,255,255,.4);
}

/* ---- MEMVEO Live Residence: visit-log timeline paired with the sticky diagram ---- */
.visit-log-item .hn { font-family: var(--sans); font-size: .78rem; letter-spacing: .06em; color: var(--gold); }
.status-badge {
  display: inline-flex; align-items: center; gap: .6rem;
  font-size: .78rem; letter-spacing: .16em; text-transform: uppercase; color: var(--gold-light);
  border: 1px solid rgba(201,168,76,.4); border-radius: 100px; padding: .55rem 1.3rem; margin-top: 1.6rem;
}
.status-badge .dot { width: 7px; height: 7px; border-radius: 50%; background: #6FBF8B; box-shadow: 0 0 0 0 rgba(111,191,139,.6); animation: pulseDot 2.2s infinite; }
@media (prefers-reduced-motion: reduce) { .status-badge .dot { animation: none; } }

/* ---- Interactive Services explorer ----
   Diagram stays sticky on the left (same visual language as Live Residence —
   the residence is one continuous character across the page). On the right,
   each category is an accordion row: click the header to expand full detail
   AND highlight the matching zone(s) on the diagram — same mechanic as an
   FAQ accordion, so no new interaction pattern to learn, just reused. */
.service-rows { display: flex; flex-direction: column; }
.service-row { border-bottom: 1px solid rgba(255,255,255,.1); }
.service-row:last-child { border-bottom: none; }
.service-row-head {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  width: 100%; text-align: left; background: none; border: none; cursor: pointer;
  padding: 1.3rem 0; font-family: var(--serif); font-size: 1.3rem; color: rgba(255,255,255,.6);
  transition: color .25s var(--ease);
}
.service-row-head:hover { color: rgba(255,255,255,.9); }
.service-row.is-open .service-row-head { color: #fff; }
.service-row-head .arrow { font-family: var(--sans); font-size: 1rem; color: var(--gold); transition: transform .3s var(--ease); flex-shrink: 0; }
.service-row.is-open .service-row-head .arrow { transform: rotate(90deg); }
.service-row-body { max-height: 0; overflow: hidden; transition: max-height .45s var(--ease); }
.service-row.is-open .service-row-body { max-height: 900px; }
.service-row-body-inner { padding-bottom: 2rem; }
.service-detail-cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.6rem; margin-bottom: 1.6rem; }
.service-detail-col h4 { font-size: .66rem; letter-spacing: .14em; text-transform: uppercase; color: var(--gold); margin-bottom: .8rem; }
.service-detail-col ul { display: flex; flex-direction: column; gap: .5rem; }
.service-detail-col li { font-size: .85rem; color: rgba(255,255,255,.68); line-height: 1.5; }
.service-detail-cta { display: flex; align-items: center; gap: 1.4rem; flex-wrap: wrap; }
@media (max-width: 900px) {
  .services-explorer { grid-template-columns: 1fr; gap: 2.2rem; }
  .service-detail-cols { grid-template-columns: 1fr; gap: 1rem; }
}

/* ---- MEMVEO POV notification overlay ---- */
.pov-notification {
  position: absolute; right: 28px; bottom: 28px; z-index: 3;
  width: min(300px, 74vw);
  background: rgba(250,250,248,.97); border-radius: 12px; padding: 1.4rem 1.5rem;
  box-shadow: 0 24px 60px rgba(0,0,0,.35);
}
.pov-notification .brand { font-family: var(--serif); font-size: .95rem; color: var(--green); letter-spacing: .04em; margin-bottom: .5rem; }
.pov-notification .headline { font-size: .92rem; color: var(--ink); font-weight: 600; margin-bottom: .5rem; }
.pov-notification .meta { font-size: .8rem; color: var(--muted); line-height: 1.5; margin-bottom: .9rem; }
.pov-notification .cta { font-size: .78rem; font-weight: 600; color: var(--gold); letter-spacing: .04em; cursor: pointer; }
@media (max-width: 640px) { .pov-notification { position: static; width: 100%; margin-top: 1.2rem; box-shadow: none; border: 1px solid var(--line); } }

/* ---- Ask MEMVEO (inside Residence Intelligence) ---- */
.ask-memveo { border-top: 1px solid var(--line); padding-top: 1.4rem; margin-top: .4rem; }
.ask-memveo-label { font-size: .68rem; letter-spacing: .14em; text-transform: uppercase; color: var(--gold); margin-bottom: .9rem; }
.ask-memveo-prompt {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  width: 100%; text-align: left; background: var(--paper); border: 1px solid var(--line); border-radius: 8px;
  padding: .9rem 1.1rem; cursor: pointer; font-size: .9rem; color: var(--ink); transition: border-color .2s;
}
.ask-memveo-prompt:hover { border-color: var(--gold); }
.ask-memveo-prompt .icon { color: var(--gold); font-family: var(--serif); flex-shrink: 0; }
.ask-memveo-response { max-height: 0; overflow: hidden; transition: max-height .4s var(--ease); }
.ask-memveo-response.is-open { max-height: 400px; }
.ask-memveo-response-inner { padding: 1.1rem 0 .2rem; }
.ask-memveo-response-inner p { font-size: .88rem; margin-bottom: .8rem; }
.ask-memveo-response-inner .item { display: flex; align-items: baseline; gap: .6rem; font-size: .87rem; color: var(--ink); padding: .4rem 0; }
.ask-memveo-response-inner .item .check { color: var(--green); }
.ask-memveo-footnote { font-size: .74rem; color: var(--muted); margin-top: .8rem; }

/* ---- When Something Happens: connected workflow ---- */
.workflow-flow { position: relative; max-width: 620px; margin: 0 auto; }
.workflow-flow::before { content: ''; position: absolute; left: 15px; top: 10px; bottom: 10px; width: 1px; background: rgba(255,255,255,.14); }
.workflow-step { position: relative; display: grid; grid-template-columns: 32px 1fr; gap: 1.6rem; padding: 1.5rem 0; }
.workflow-dot {
  width: 32px; height: 32px; border-radius: 50%; border: 1.5px solid rgba(255,255,255,.25);
  background: var(--green-deep); display: flex; align-items: center; justify-content: center;
  font-family: var(--serif); font-size: .85rem; color: var(--gold-light); position: relative; z-index: 1;
  transition: border-color .3s, background .3s;
}
.workflow-step.is-visible .workflow-dot { border-color: var(--gold); background: var(--green); }
.workflow-step h4 { font-family: var(--sans); font-size: .96rem; font-weight: 500; color: #fff; margin-bottom: .3rem; letter-spacing: .02em; text-transform: uppercase; }
.workflow-step p { font-size: .9rem; color: rgba(255,255,255,.6); margin: 0; }

/* ---- Three levels of service — full-width tonal bands, not cards ----
   Increasing depth is communicated by the bands themselves getting darker
   and more restrained as you scroll — ivory/stone -> sage -> deep green
   with gold — rather than three side-by-side boxes competing for
   attention. Detailed checklists live on the Services page; here it's one
   line each. */
.tier-band-kicker { padding: 88px 0 4px; background: var(--paper); text-align: center; }
.tier-band { padding: 84px 0; }
.tier-band--estate .tier-band-cta { color: var(--gold-light); }
.tier-band--watch { background: var(--paper); }
.tier-band--care { background: var(--sage-bg); }
.tier-band--estate { background: var(--green-deep); }
.tier-band-inner {
  width: min(1180px, 92%); margin-inline: auto;
  display: flex; align-items: flex-end; justify-content: space-between; gap: 3rem; flex-wrap: wrap;
}
.tier-band-left { max-width: 640px; }
.tier-band-tag {
  display: block; font-size: .68rem; font-weight: 600; letter-spacing: .18em; text-transform: uppercase;
  color: var(--gold-deep); margin-bottom: 1rem;
}
.tier-band--care .tier-band-tag { color: #4c5744; }
.tier-band--estate .tier-band-tag { color: var(--gold-light); }
.tier-band-name { font-family: var(--serif); font-size: clamp(2.1rem, 4.2vw, 3.2rem); color: var(--green-deep); margin-bottom: .9rem; line-height: 1.1; }
.tier-band--estate .tier-band-name { color: #fff; }
.tier-band-desc { font-size: 1.05rem; line-height: 1.7; color: var(--slate, #4a5248); }
.tier-band--watch .tier-band-desc { color: #5a5648; }
.tier-band--care .tier-band-desc { color: #384030; }
.tier-band--estate .tier-band-desc { color: rgba(255,255,255,.68); }
.tier-band-cta { flex-shrink: 0; }
.tier-band-inner--detailed { align-items: flex-start; }
.tier-band-details { margin-top: 1.8rem; columns: 2; column-gap: 2.4rem; max-width: 620px; }
.tier-band-details li { font-size: .92rem; line-height: 1.5; padding: .55rem 0; border-bottom: 1px solid rgba(0,0,0,.08); break-inside: avoid; }
.tier-band--estate .tier-band-details li { border-bottom-color: rgba(255,255,255,.12); color: rgba(255,255,255,.75); }
.tier-band-details li strong { font-weight: 600; }
@media (max-width: 700px) {
  .tier-band { padding: 60px 0; }
  .tier-band-inner { align-items: flex-start; }
  .tier-band-details { columns: 1; }
}

/* ---- One Residence. One Relationship. — vendor convergence diagram ----
   Deliberately not a tech network diagram: thin low-opacity lines, serif
   labels, one restrained ring — reads as an architectural annotation, not
   a systems chart. Pure SVG (text scales with the viewBox, so it stays
   sharp and proportional at any width — no separate mobile artwork). */
.vendor-diagram { max-width: 900px; margin-inline: auto; }
.vendor-diagram svg { width: 100%; height: auto; display: block; }
.vd-label { fill: rgba(255,255,255,.62); font-family: var(--serif); font-size: 19px; }
.vd-line { stroke: rgba(201,168,76,.4); stroke-width: 1; }
.vd-center-line { stroke: rgba(201,168,76,.6); stroke-width: 1.4; }
.vd-node-ring { fill: none; stroke: var(--gold); stroke-width: 1.4; }
.vd-node-text { fill: #fff; font-family: var(--serif); }
.vd-node-sub { fill: rgba(255,255,255,.5); letter-spacing: .18em; font-family: var(--sans); }
.vd-owner { fill: var(--gold); font-family: var(--serif); letter-spacing: .25em; }
@media (max-width: 640px) { .vd-label { font-size: 15px; } }

/* ---- South Florida interactive map ----
   .fl-map-wrap's aspect-ratio is set to match the SVG's viewBox (520/760)
   exactly, not an approximate 3/4. If it doesn't match, the SVG letterboxes
   inside the box (preserveAspectRatio defaults to "meet") and the
   percentage-positioned .fl-marker-btn elements — positioned relative to
   the *box*, not the letterboxed artwork — drift off the coastline. */
/* V7: overflow-x:clip contains the sub-pixel rounding from the map's
   fractional grid division so body{overflow-x:hidden} isn't load-bearing.
   Clips only at the section's own (wide) content box — marker labels,
   which sit well inside it, are untouched. */
.fl-map-section { display: grid; grid-template-columns: .8fr 1.2fr; gap: 4rem; align-items: center; overflow-x: clip; }
.fl-map-wrap { position: relative; aspect-ratio: 520 / 760; max-width: 400px; margin-inline: auto; }
.fl-map-wrap svg { width: 100%; height: 100%; display: block; }
.fl-outline { fill: rgba(201,168,76,.045); stroke: rgba(201,168,76,.5); stroke-width: 2; transition: fill 1s ease; }
.fl-coast {
  fill: none; stroke: var(--gold); stroke-width: 1.6; stroke-linecap: round;
  stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 2.4s var(--ease);
}
.fl-map-wrap.is-traced .fl-coast { stroke-dashoffset: 0; }
@media (prefers-reduced-motion: reduce) { .fl-coast { transition: none; stroke-dashoffset: 0; } }
.fl-marker-btn {
  /* Visible by default — this used to gate behind opacity:0 until a
     scroll-triggered JS pass added .is-shown, which meant the city
     markers simply never appeared if JS failed to load. Markers must
     never depend on animation to become visible; .reveal (already on the
     whole .fl-map-wrap, via main.js's generic scroll-reveal) gives the
     map its one entrance. */
  position: absolute; transform: translate(-50%, -50%);
  display: flex; align-items: center; gap: .55rem; background: none; border: none; cursor: pointer;
  padding: 4px;
}
.fl-marker-btn .dot { width: 9px; height: 9px; border-radius: 50%; background: rgba(255,255,255,.32); flex-shrink: 0; transition: background .25s, box-shadow .25s, transform .25s; }
.fl-marker-btn.is-active .dot {
  background: var(--gold); transform: scale(1.25);
  box-shadow: 0 0 0 6px rgba(201,168,76,.2);
}
.fl-marker-btn .label {
  font-size: .72rem; letter-spacing: .04em; color: rgba(255,255,255,.5); white-space: nowrap; transition: color .25s;
}
.fl-marker-btn.is-active .label { color: var(--gold-light); font-weight: 500; }
.fl-marker-btn:hover .dot { background: var(--gold-light); }
.fl-marker-btn:hover .label { color: #fff; }
.fl-panel { min-height: 220px; }
.fl-panel-city { font-family: var(--serif); font-size: 2.2rem; color: #fff; margin-bottom: .8rem; }
.fl-panel-status { font-size: .68rem; letter-spacing: .16em; text-transform: uppercase; color: var(--gold); margin-bottom: 1.2rem; }
.fl-panel-body { font-size: 1.02rem; color: rgba(255,255,255,.68); line-height: 1.8; max-width: 480px; margin-bottom: 1.8rem; }
@media (max-width: 900px) {
  .fl-map-section { grid-template-columns: minmax(0, 1fr); gap: 2.2rem; }
  .fl-map-wrap { max-width: 340px; }
}
@media (max-width: 900px) {
  /* The three-city inset sits near the right edge of the wide (~1.36:1)
     map canvas. On a narrow single-column layout the map itself gets
     much smaller in absolute pixels, so labels extending rightward from
     a marker that close to the edge ran off the viewport. Flipping the
     label to the dot's left (toward the map's own center, where there's
     real room) fixes it without needing separate mobile artwork. */
  .fl-marker-btn { flex-direction: row-reverse; }
}
@media (max-width: 480px) {
  .fl-marker-btn .label { font-size: .66rem; }
}

/* ---- quiet, truthful trust line (replaces the old boxed Operating Standards grid) ---- */
.quiet-trust { text-align: center; font-size: .82rem; color: var(--muted); letter-spacing: .03em; }
.quiet-trust span:not(:last-child)::after { content: '·'; color: var(--gold); margin: 0 .8em; }

/* ---- concierge: multi-select + step progress (V3 qualification flow) ---- */
.concierge-chip.is-selected { background: var(--green); color: #fff; border-color: var(--green); }
.concierge-chip.is-selected:hover { background: var(--green-light); }
.concierge-progress { display: flex; gap: 5px; padding: 0 1.6rem; margin-bottom: .2rem; }
.concierge-progress span { flex: 1; height: 2px; background: rgba(255,255,255,.18); border-radius: 2px; }
.concierge-progress span.is-done { background: var(--gold); }
.concierge-field { display: flex; flex-direction: column; gap: .4rem; margin-bottom: .7rem; }
.concierge-field label { font-size: .68rem; letter-spacing: .08em; text-transform: uppercase; color: var(--green); }
.concierge-field input {
  border: 1.4px solid var(--line); border-radius: 8px; padding: .65rem .9rem; font-size: .88rem;
  background: var(--paper); outline: none; transition: border-color .18s;
}
.concierge-field input:focus { border-color: var(--green); background: #fff; }
.skip-link:focus { left: 12px; top: 12px; }

/* ==========================================================================
   V5 — LUXURY ART DIRECTION + UX REFINEMENT
   Homepage cut to 6 sections + a closing strip; hero rebuilt without the
   illustrated house/palm/sun graphic; founder section rebuilt text-only
   (no blank portrait frame); Florida map replaced with a geographically
   accurate outline (see fl-map-data / assets/images/README.md for source);
   MEMVEO Concierge inverted to an ivory surface with a restrained brass
   border; credentials rewritten as plain prelaunch prose, not status
   badges. Additive, like every version before it — nothing above this
   line was deleted, because about.html/services.html/services/*.html
   still lean on several of those earlier rules.
   ========================================================================== */

/* ---- hero: typography-led, no illustrated scene ----
   The hero no longer renders hero-estate.svg (a flat house/palm-tree/sun
   graphic that read as a stock icon, not a residence). It now follows the
   same graceful-placeholder pattern as every other media-frame on the
   site: a real photo path that doesn't exist yet, layered over a
   deliberate gradient — so it reads as considered today, and a licensed
   architectural photograph can drop in later with zero code changes. */
.hero-gradient {
  background:
    radial-gradient(ellipse 70% 55% at 22% 18%, rgba(227,205,143,.10), transparent 62%),
    linear-gradient(165deg, #0e2620 0%, var(--green-deep) 46%, var(--green) 100%);
}
#hero .hero-inner { max-width: 700px; }
#hero .hero-lede { font-size: 1.05rem; line-height: 1.8; color: rgba(255,255,255,.72); max-width: 540px; margin: 0 auto 1.3rem; }
#hero .hero-prelaunch { font-size: .86rem; letter-spacing: .04em; color: var(--gold-light); margin: 0 auto 2.6rem; }
#hero .hero-ctas { margin-bottom: 0; }
#hero .hero-ctas .btn-text { color: var(--gold-light); font-size: .92rem; }
@media (max-width: 760px) {
  #hero { min-height: min(100vh, 720px); }
}

/* ---- founder: text-only, no image frame ----
   Replaces .founder-grid's two-column portrait+text layout when no real,
   approved photograph exists yet — a single generous text column reads
   as an intentional editorial choice, not a missing asset. */
.founder-text { max-width: 700px; }
.founder-text .founder-name { font-family: var(--serif); font-size: 1.05rem; color: var(--green); margin: 1.8rem 0 .3rem; }
.founder-text .founder-role { font-size: .8rem; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); margin-bottom: 2rem; }
.section--dark .founder-text .founder-name, .section--forest .founder-text .founder-name { color: #fff; }

/* ---- prelaunch note: plain prose, replaces status-badge credential grids ---- */
.prelaunch-note { font-size: .92rem; line-height: 1.8; color: var(--muted); max-width: 620px; margin-top: 1.6rem; padding-top: 1.6rem; border-top: 1px solid var(--line); }
.section--dark .prelaunch-note, .section--forest .prelaunch-note { color: rgba(255,255,255,.62); border-top-color: rgba(255,255,255,.14); }

/* ---- illustrative-example label: sits at the demonstration heading, not
   buried below a large interface ---- */
.illustrative-flag {
  display: inline-flex; align-items: center; gap: .5rem;
  font-size: .68rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--gold-deep); background: var(--gold-dim); border-radius: 100px;
  padding: .4rem .9rem; margin-bottom: 1rem;
}
.illustrative-flag::before { content: ''; width: 5px; height: 5px; border-radius: 50%; background: var(--gold-deep); }
.section--dark .illustrative-flag, .section--forest .illustrative-flag { color: var(--gold-light); background: rgba(255,255,255,.08); }
.section--dark .illustrative-flag::before, .section--forest .illustrative-flag::before { background: var(--gold-light); }

/* ---- how the service works: 4-step + one report excerpt ---- */
.report-excerpt {
  max-width: 620px; margin: 3rem auto 0; padding: 1.9rem 2.1rem;
  background: #fff; border: 1px solid var(--line); border-radius: 10px; box-shadow: var(--shadow);
}
.report-excerpt .re-meta { font-size: .74rem; letter-spacing: .06em; color: var(--gold-deep); margin-bottom: .7rem; }
.report-excerpt p { font-size: .96rem; line-height: 1.7; color: var(--ink); }
.how-it-works-foot { text-align: center; margin-top: 2.4rem; }

/* ---- residence-experience.html: compact "Arrival" + relocated visit
   sequence + storm workflow, sized for a detail page rather than a
   full-bleed homepage moment ---- */
.arrival-compact { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; align-items: center; }
@media (max-width: 760px) { .arrival-compact { grid-template-columns: 1fr; gap: 2rem; } }

/* ---- service overview rows (homepage "Service overview" section) —
   three concise text rows, not cards. Reuses .service-step's num/heading
   rhythm but trims the two-column grid to a single flowing block since
   there is no icon column needed here. ---- */
.overview-row { padding: 2rem 0; border-bottom: 1px solid var(--line); display: flex; align-items: baseline; justify-content: space-between; gap: 2rem; flex-wrap: wrap; }
.overview-row:last-child { border-bottom: none; }
.overview-row-left { max-width: 640px; }
.overview-row-tag { font-size: .68rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--gold-deep); margin-bottom: .5rem; display: block; }
.overview-row-name { font-family: var(--serif); font-size: 1.5rem; color: var(--green); margin-bottom: .4rem; }
.overview-row-desc { font-size: .95rem; line-height: 1.65; }

/* ---- closing strip: consultation invitation + one discreet advisor link ---- */
.closing-strip { text-align: center; }
.closing-advisor-link { margin-top: 1.6rem; font-size: .86rem; color: var(--muted); }
.closing-advisor-link a { color: var(--gold-deep); text-decoration: underline; text-underline-offset: 3px; }

/* ==========================================================================
   V5 — Florida map: accurate outline + Southeast Florida detail inset
   Path traced from the U.S. Census Bureau's 2010 Cartographic Boundary
   Files (state, 20m generalization) — a public-domain federal dataset,
   redistributed as GeoJSON via eric.clst.org. Projected here with a
   simple equirectangular + cosine(mean-latitude) correction (appropriate
   at Florida's scale/latitude span) and simplified with Douglas-Peucker
   (tolerance ~1.1 canvas units) to remove sub-pixel noise while keeping
   every real bend — including the Big Bend and Tampa Bay. Source + method
   recorded in full in README.md. Boca Raton and Delray Beach are placed
   from their actual coordinates through the same projection, then
   presented at equal visual weight inside a detail inset — at full-state
   scale the two are ~10px apart and cannot carry separate labels without
   one, per the standard cartographic convention for this exact problem.
   ========================================================================== */
.fl-map-wrap { aspect-ratio: 1033.88 / 760; max-width: 640px; }
.fl-inset-ring { fill: rgba(255,255,255,.02); stroke: rgba(201,168,76,.5); stroke-width: 1.2; stroke-dasharray: 3 4; }
.fl-leader { stroke: var(--gold); stroke-width: 1; stroke-opacity: .55; }
.fl-coast-dot { fill: var(--gold); }
.fl-inset-caption {
  /* Anchored near the map's right edge (it labels the inset circle, which
     sits in the map's own right margin) — biased to extend leftward
     rather than centered, so it has room to render without pushing past
     the page's right edge at narrow viewports. */
  position: absolute; width: 170px; text-align: center; transform: translate(-82%, 0);
  font-size: .66rem; letter-spacing: .1em; text-transform: uppercase; color: rgba(255,255,255,.5);
}
@media (max-width: 900px) {
  .fl-map-wrap { max-width: 460px; }
}
@media (max-width: 480px) {
  .fl-inset-caption { font-size: .6rem; width: 128px; transform: translate(-88%, 0); }
}

/* ==========================================================================
   V5 — MEMVEO Concierge, inverted palette + lighter behavior
   Ivory launcher (visible against both the green hero and ivory sections),
   ivory header (was dark green) so the whole panel reads as one warm
   surface, no auto-open/pulse/unread-dot. Behavior changes are in
   concierge.js; this is purely the palette + a small "guided assistant"
   disclosure line under the header.
   ========================================================================== */
.concierge-toggle {
  background: var(--ivory); border: 1px solid var(--gold-deep); color: var(--green-deep);
  box-shadow: var(--shadow-lg);
}
.concierge-toggle:hover { background: #fff; }
.concierge-toggle .mono { border: 1px solid var(--gold-deep); color: var(--green); background: var(--gold-dim); }
.concierge-head { background: var(--paper); color: var(--ink); border-bottom: 1px solid var(--line); }
.concierge-head .eyebrow-ish { color: var(--gold-deep); }
.concierge-head h3 { color: var(--green-deep); }
.concierge-head .disclosure { display: block; font-size: .74rem; color: var(--muted); margin-top: .35rem; font-family: var(--sans); }
.concierge-close { color: var(--muted); }
.concierge-close:hover { color: var(--ink); }
.concierge-direct-link {
  display: block; text-align: center; font-size: .78rem; color: var(--gold-deep);
  padding: .7rem 1.4rem; border-top: 1px solid var(--line); background: var(--paper); flex-shrink: 0;
}
.concierge-direct-link:hover { color: var(--green); }

/* ==========================================================================
   V6 — DISTINCTIVE, CREDIBLE, EASY TO UNDERSTAND
   Palm Beach restored throughout; the specialists diagram replaced with a
   compact three-responsibility explanation; a film section built for a
   not-yet-delivered asset; founder/About strengthened; the Florida map
   enlarged and given a third city; service levels re-headlined; the
   Concierge launcher given a metallic gold finish; the consultation
   flow's final action honestly labeled "Open Email Draft." Additive, like
   every version before it.
   ========================================================================== */

/* ---- hero: less empty space above the message, not a shorter hero ----
   #hero kept min-height:100vh (removing it entirely made very short
   viewports feel abrupt) but every element inside got tighter, and the
   scroll cue was pulled in — the net effect is the primary CTA sits
   noticeably higher and a sliver of the next section is visible on
   common laptop heights. */
#hero .hero-inner { padding-top: 0; }
#hero .hero-category { margin-bottom: 1rem; }
#hero h1 { margin-bottom: 1rem; }
#hero .hero-lede { margin-bottom: .9rem; }
#hero .hero-prelaunch { margin-bottom: 2.1rem; font-size: .92rem; }
@media (max-width: 640px) {
  #hero { min-height: min(100svh, 660px); }
}

/* ---- One point of contact: three responsibilities, no diagram ----
   Replaces the vendor-convergence SVG on the homepage — the concept
   (many specialists, one point of contact) is now stated in the section
   intro, then made concrete with three short, readable columns instead
   of an illustration that only reads clearly at a glance if you already
   know what it's depicting. */
.coordination-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2.6rem; max-width: 980px; margin: 0 auto; }
.coordination-item { text-align: left; }
.coordination-item .ci-num { display: block; font-family: var(--serif); font-size: .82rem; letter-spacing: .1em; color: var(--gold-light); margin-bottom: .9rem; }
.coordination-item h3 { font-size: 1.15rem; font-family: var(--sans); font-weight: 500; color: #fff; margin-bottom: .6rem; }
.coordination-item p { font-size: .94rem; color: rgba(255,255,255,.68); line-height: 1.65; }
@media (max-width: 760px) { .coordination-row { grid-template-columns: 1fr; gap: 2rem; } }

/* ---- Illustrative sample of a planned owner update ----
   One small, clearly-labeled card — reused as both the compact homepage
   "Residence Experience" preview and the coordination section's optional
   example. No live-status dot, no pulse; the label itself carries the
   "this is an example" weight instead of a status indicator implying a
   connected system. */
.sample-update { max-width: 560px; margin: 2.6rem auto 0; padding: 1.7rem 2rem; background: #fff; border: 1px solid var(--line); border-radius: 10px; box-shadow: var(--shadow); text-align: left; }
.sample-update .su-label { font-size: .68rem; letter-spacing: .1em; text-transform: uppercase; color: var(--gold-deep); margin-bottom: .8rem; display: block; }
.sample-update .su-meta { font-size: .74rem; letter-spacing: .04em; color: var(--muted); margin-bottom: .6rem; }
.sample-update p.su-body { font-size: .95rem; line-height: 1.7; color: var(--ink); margin: 0; }
/* V7: on the dark/forest sections this now reads as a recessed panel with a
   brass hairline, not a near-invisible tint on green. */
.section--dark .sample-update, .section--forest .sample-update { background: rgba(6,20,15,.5); border: 1px solid rgba(201,168,76,.3); box-shadow: 0 18px 44px rgba(0,0,0,.3); }
.section--dark .sample-update .su-label, .section--forest .sample-update .su-label { color: var(--gold-light); }
.section--dark .sample-update p.su-body, .section--forest .sample-update p.su-body { color: rgba(255,255,255,.88); }
.section--dark .sample-update .su-meta, .section--forest .sample-update .su-meta { color: rgba(255,255,255,.58); }

/* ---- film section ----
   Same graceful-placeholder logic as every other media-frame: a real
   path that doesn't exist yet, a considered gradient underneath. The
   play button is hidden until main.js confirms a video actually exists
   at that path (see initMediaFrames) — no button that does nothing. */
.film-section-inner { max-width: 1040px; margin: 0 auto; }
.film-disclosure { max-width: 640px; margin: 1.5rem auto 0; text-align: center; font-size: .8rem; line-height: 1.75; letter-spacing: .01em; color: rgba(255,255,255,.66); }
.film-disclosure a { color: var(--gold-light); white-space: nowrap; }
.film-disclosure a:hover { color: #fff; }
/* the film now sits directly under the hero — a tight, wide cinematic band */
.film-section { padding-top: clamp(3rem, 6vw, 4.5rem); border-top: 1px solid rgba(255,255,255,.08); }
.film-section .section-head { margin-bottom: clamp(2rem, 4vw, 3rem); }
@media (max-width: 620px) {
  .film-section > .container { width: 100%; padding: 0; }
  .film-section .section-head, .film-section .film-disclosure { padding-inline: 6%; }
  .film-section .film-frame { border-radius: 0; }
}

/* founder intro folded into the dark closing section (Trust & Authority) */
.close-founder { max-width: 680px; margin: 0 auto clamp(3.4rem, 7vw, 5.2rem); padding-bottom: clamp(3rem, 6vw, 4.4rem); text-align: center; border-bottom: 1px solid rgba(255,255,255,.1); }
.close-founder .eyebrow { justify-content: center; }
.close-founder h2 { color: #fff; margin: .9rem 0 1.2rem; }
.close-founder p { color: rgba(255,255,255,.7); line-height: 1.85; font-size: 1.02rem; margin: 0 auto 1.8rem; max-width: 56ch; }
.close-founder-sign { margin-bottom: 1.1rem; }
.close-founder-name { display: block; font-family: var(--serif); font-size: 1.12rem; color: #fff; }
.close-founder-role { display: block; font-size: .74rem; letter-spacing: .09em; text-transform: uppercase; color: rgba(255,255,255,.5); margin-top: .2rem; }

/* ---- founder: "Meet Brian" link + tightened homepage treatment ---- */
.founder-text .founder-lede { font-size: 1.05rem; line-height: 1.85; }

/* ---- About page: values translated into practical behavior, not an
   abstract word list ---- */
.value-rows { display: flex; flex-direction: column; margin-top: .5rem; }
.value-row { display: grid; grid-template-columns: 180px 1fr; gap: 1.6rem; padding: 1.3rem 0; border-bottom: 1px solid var(--line); align-items: baseline; }
.value-row:last-child { border-bottom: none; }
.value-row dt { font-family: var(--serif); font-size: 1.1rem; color: var(--green); }
.value-row dd { font-size: .95rem; line-height: 1.6; color: var(--muted); }
@media (max-width: 640px) { .value-row { grid-template-columns: 1fr; gap: .3rem; } }

/* ---- Florida map: more visual weight, less internal padding ---- */
.fl-map-wrap {
  /* Explicit width:100% is required here — the original V3 rule set
     margin-inline:auto (never overridden since), and an auto inline
     margin on a grid item disables justify-self:stretch, falling back
     to the CSS default replaced-element size (300x150, scaled by our
     aspect-ratio) instead of filling the grid column. That's what was
     making the map render at ~300px wide regardless of max-width. */
  width: 100%; max-width: 800px;
}
@media (min-width: 1101px) {
  /* Scoped to desktop only — unscoped, this later-in-source rule was
     beating the earlier @media(max-width:900px) single-column collapse
     regardless of viewport (equal specificity, source order wins),
     leaving the map's grid column at 0 width on mobile. */
  .fl-map-section { grid-template-columns: .68fr 1.32fr; }
}
@media (max-width: 1100px) {
  .fl-map-wrap { max-width: 620px; }
}

/* ---- consultation: "Open Email Draft" + a visible, copyable address,
   and preserved values if the handoff doesn't land ---- */
.consult-fallback { margin-top: 1rem; text-align: center; }
.consult-fallback .email-copy-row { display: inline-flex; align-items: center; gap: .6rem; margin-top: .5rem; font-size: .92rem; }
.consult-fallback .email-copy-row code { background: var(--paper); border: 1px solid var(--line); border-radius: 4px; padding: .3rem .6rem; font-size: .88rem; color: var(--ink); user-select: all; }
.consult-fallback button.copy-btn {
  background: none; border: 1px solid var(--line); border-radius: 4px; padding: .32rem .7rem;
  font-size: .76rem; color: var(--green); cursor: pointer; transition: border-color .18s, color .18s;
}
.consult-fallback button.copy-btn:hover, .consult-fallback button.copy-btn:focus-visible { border-color: var(--green); }
.consult-fallback button.copy-btn.is-copied { color: var(--gold-deep); border-color: var(--gold-deep); }

/* ==========================================================================
   V6 — MEMVEO Concierge: metallic champagne-gold launcher
   Starting values from the brief, adjusted after contrast testing against
   both the ivory .label text area and the forest-green icon/monogram —
   all combinations below verified at >=4.5:1. A brushed-metal impression
   comes from a shallow multi-stop linear gradient (light seam at the top
   edge, darkening toward the bottom) rather than any shimmer/shine
   animation, which the brief explicitly ruled out.
   ========================================================================== */
.concierge-toggle {
  /* Text sits in the vertical center of this button, so the gradient
     keeps that band at #C3A15A (4.8:1 against #183E32 text — passes
     WCAG AA) and confines the lighter highlight and darker shading to
     thin edge bands the label text never touches. The darkest stop
     (#9C783A) alone is only ~2.9:1 with this text color — checked
     directly, not assumed — which is why it's kept off the text band. */
  background: linear-gradient(180deg, #E7D39B 0%, #C3A15A 20%, #C3A15A 80%, #9C783A 100%);
  border: 1px solid #7A5D1E;
  color: #183E32;
  box-shadow: 0 1px 0 rgba(255,255,255,.45) inset, 0 6px 16px rgba(18,20,15,.18);
}
.concierge-toggle:hover {
  background: linear-gradient(180deg, #EEDCAA 0%, #CBA968 20%, #CBA968 80%, #A6813F 100%);
  box-shadow: 0 1px 0 rgba(255,255,255,.5) inset, 0 9px 22px rgba(18,20,15,.22);
}
.concierge-toggle:active {
  background: linear-gradient(180deg, #A6813F 0%, #C3A15A 50%, #EEDCAA 100%);
}
.concierge-toggle:focus-visible {
  outline: 2px solid #183E32; outline-offset: 3px;
}
.concierge-toggle .mono {
  border: 1px solid rgba(24,62,50,.35); color: #183E32;
  background: rgba(255,255,255,.28);
}
.concierge-toggle .label { color: #183E32; font-weight: 500; }

/* Open panel: keep the warm-ivory reading surface from V5, but bring the
   gold treatment into the header/controls rather than the whole panel —
   a fully metallic conversation area would undermine legibility, which
   the brief explicitly warned against. */
.concierge-head { border-bottom: 1px solid rgba(154,120,58,.28); }
.concierge-head .eyebrow-ish { color: var(--gold-deep); }
.concierge-panel { box-shadow: 0 20px 48px rgba(18,20,15,.22); border: 1px solid rgba(154,120,58,.2); }
.concierge-input-row button {
  background: linear-gradient(180deg, #C3A15A 0%, #9C783A 100%); color: #183E32;
}
.concierge-input-row button:hover { background: linear-gradient(180deg, #CBA968 0%, #A6813F 100%); }
.concierge-input-row button svg { fill: #183E32; }
.concierge-chip.is-selected { background: #183E32; border-color: #183E32; }

/* ==========================================================================
   V7 — FINISHING PASS  (motion, focus, hero sequence, signature interactions)
   Additive. Nothing above this line was removed. Every animation here has a
   prefers-reduced-motion opt-out, and every interactive element keeps a
   visible focus state.
   ========================================================================== */

/* ---- a visible, on-brand keyboard focus ring everywhere ---- */
:focus-visible {
  outline: 2px solid var(--gold-deep);
  outline-offset: 3px;
  border-radius: 3px;
}
.section--dark :focus-visible, .section--forest :focus-visible,
#site-nav :focus-visible, #hero :focus-visible, .page-hero :focus-visible,
.concierge-toggle:focus-visible, .tier-band--estate :focus-visible,
.sp--manage :focus-visible {
  outline-color: var(--gold-light);
}
:focus:not(:focus-visible) { outline: none; }

/* ---- buttons: a fill that wipes in from the left, and a real press ---- */
.btn { position: relative; overflow: hidden; isolation: isolate; }
.btn::before {
  content: ''; position: absolute; inset: 0; z-index: -1;
  transform: translateX(-101%);
  transition: transform .42s var(--ease);
}
.btn-gold::before          { background: var(--gold-light); }
.btn-outline-dark::before  { background: var(--green); }
.btn-outline-light::before { background: rgba(255,255,255,.12); }
.btn:hover::before { transform: translateX(0); }
.btn-gold:hover          { background: var(--gold); border-color: var(--gold-light); transform: translateY(-1px); }
.btn-outline-dark:hover  { background: transparent; color: #fff; border-color: var(--green); }
.btn-outline-light:hover { background: transparent; color: #fff; }
.btn:active { transform: translateY(0) scale(.985); }
@media (prefers-reduced-motion: reduce) { .btn::before { display: none; } }

/* ---- scroll-progress hairline (added by main.js on longer pages) ---- */
#scroll-progress {
  position: fixed; top: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, var(--gold-deep), var(--gold));
  transform: scaleX(var(--sp, 0)); transform-origin: 0 50%;
  z-index: 260; pointer-events: none;
}
@media (prefers-reduced-motion: reduce) { #scroll-progress { transition: none; } }

/* ---- hero: a considered load sequence + line-by-line headline ---- */
#hero h1 .hl { display: block; overflow: hidden; }
#hero h1 .hl > span { display: block; }
#hero .media-poster { transform: scale(1.08); }

@media (prefers-reduced-motion: no-preference) {
  #hero .hero-category,
  #hero .hero-lede,
  #hero .hero-prelaunch,
  #hero .hero-ctas { animation: heroRise .85s var(--ease) both; }
  #hero .hero-category  { animation-delay: .12s; }
  #hero .hero-lede      { animation-delay: .52s; }
  #hero .hero-prelaunch { animation-delay: .64s; }
  #hero .hero-ctas      { animation-delay: .76s; }
  #hero .hero-scroll-cue { animation: heroRise 1s .95s var(--ease) both; }
  #hero h1 .hl > span { transform: translateY(116%); animation: heroLineUp .95s var(--ease) forwards; }
  #hero h1 .hl:nth-child(1) > span { animation-delay: .26s; }
  #hero h1 .hl:nth-child(2) > span { animation-delay: .40s; }

  /* parallax: the hero image drifts slower than the page as you scroll past */
  #hero .media-poster.parallax {
    transform: translate3d(0, var(--hero-par, 0px), 0) scale(1.1);
    will-change: transform;
  }

  .page-hero .hero-inner > * { animation: heroRise .8s var(--ease) both; }
  .page-hero .hero-inner > *:nth-child(1) { animation-delay: .08s; }
  .page-hero .hero-inner > *:nth-child(2) { animation-delay: .2s; }
  .page-hero .hero-inner > *:nth-child(3) { animation-delay: .32s; }
}
@keyframes heroRise   { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@keyframes heroLineUp { to { transform: none; } }

/* ---- residence line-drawing: more presence + a stronger active-zone glow.
   It's the site's signature visual; V6 rendered it almost invisibly faint. ---- */
.diagram-visual svg [stroke]:not([stroke="none"]) { stroke-width: 1.9; }
.diagram-visual svg .hotspot-zone-line { stroke-width: 1.7; }
.hotspot-zone { transition: opacity .55s var(--ease), filter .55s var(--ease); }
.hotspot-zone.is-active { filter: drop-shadow(0 0 14px rgba(201,168,76,.5)) drop-shadow(0 0 4px rgba(227,205,143,.55)); }

/* ---- South Florida map: the state outline draws itself on reveal ---- */
@media (prefers-reduced-motion: no-preference) {
  .fl-map-wrap .fl-outline { stroke-dasharray: 3700; stroke-dashoffset: 3700; }
  .fl-map-wrap.is-traced .fl-outline { transition: stroke-dashoffset 2.9s var(--ease), fill 1.2s ease 1.4s; stroke-dashoffset: 0; }
}
.fl-marker-btn.is-active .dot { animation: flPing 2.6s ease-out infinite; }
@keyframes flPing {
  0%   { box-shadow: 0 0 0 0 rgba(201,168,76,.5); }
  70%  { box-shadow: 0 0 0 14px rgba(201,168,76,0); }
  100% { box-shadow: 0 0 0 0 rgba(201,168,76,0); }
}
@media (prefers-reduced-motion: reduce) { .fl-marker-btn.is-active .dot { animation: none; } }

/* ---- Concierge: a considered pause + a modal backdrop on desktop ---- */
#concierge-scrim {
  position: fixed; inset: 0; z-index: 490;
  background: rgba(8,17,13,.34); backdrop-filter: blur(2px);
  opacity: 0; pointer-events: none; transition: opacity .3s var(--ease);
}
#concierge-scrim.is-shown { opacity: 1; pointer-events: auto; }
@media (max-width: 620px) { #concierge-scrim { display: none; } }

/* ---- dashboard mockup: a soft cue that a fresh entry just landed ---- */
@media (prefers-reduced-motion: no-preference) {
  .dash-entry.just-in { animation: dashIn .6s var(--ease) both; }
}
@keyframes dashIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* ---- cross-page view transition (progressive enhancement) ---- */
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
  ::view-transition-old(root) { animation: vtOut .28s var(--ease) both; }
  ::view-transition-new(root) { animation: vtIn .34s var(--ease) both; }
  @keyframes vtOut { to { opacity: 0; } }
  @keyframes vtIn  { from { opacity: 0; } }
}

/* ---- consultation form: real submission, inline validation, calm success ---- */
.hp-field { position: absolute; left: -9999px; }
.field-err { display: block; font-size: .76rem; color: #a8412c; margin-top: .35rem; }
.field-err[hidden] { display: none; }
.form-group.has-error input,
.form-group.has-error select { border-color: #a8412c; box-shadow: 0 0 0 3px rgba(168,65,44,.1); }

.consult-success {
  text-align: center;
  padding: 2.2rem 1rem 1rem;
  animation: heroRise .6s var(--ease) both;
}
.consult-success .cs-mark { font-family: var(--serif); font-size: 2.4rem; color: var(--gold-deep); line-height: 1; margin-bottom: 1rem; }
.consult-success h3 { font-family: var(--serif); font-weight: 400; font-size: 1.7rem; color: var(--green); margin-bottom: .7rem; }
.consult-success p { font-size: .98rem; line-height: 1.75; color: var(--muted); max-width: 420px; margin-inline: auto; }
#consult-submit[aria-busy="true"] { opacity: .7; pointer-events: none; }

/* ==========================================================================
   V7.1 — SERVICES PAGE: the three levels, as a brochure
   A static three-column progression on warm ivory. No selector, no JS, no
   diagram — every name, verb, description, capability and Explore link is
   visible at all times. Hierarchy comes from spacing, type and a fine gold
   rule, not from opacity or interaction. Additive: nothing above this line
   was changed.
   ========================================================================== */

.page-hero--compact { min-height: min(46vh, 430px); }
@media (max-width: 640px) {
  .page-hero--compact { min-height: auto; padding: 96px 0 40px; }
  .page-hero--compact h1 { font-size: clamp(2.2rem, 9vw, 2.9rem); }
}

.svc-levels {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(2rem, 5vw, 4rem);
  align-items: start;
}
.svc-level {
  border-top: 2px solid var(--gold-deep);
  padding-top: 1.8rem;
}
.svc-level-n {
  display: block;
  font-family: var(--serif);
  font-size: .92rem;
  letter-spacing: .14em;
  color: var(--gold-deep);
  margin-bottom: 1rem;
}
.svc-level-name {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(1.5rem, 2.3vw, 1.95rem);
  line-height: 1.12;
  color: var(--green);
  margin: 0 0 .4rem;
}
.svc-level-verb {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(1.2rem, 1.9vw, 1.5rem);
  color: var(--gold-deep);
  margin: 0 0 1rem;
}
.svc-level-desc {
  font-size: .95rem;
  line-height: 1.72;
  color: var(--muted);
  margin: 0 0 1.5rem;
}
.svc-level-caps {
  list-style: none;
  margin: 0 0 1.7rem;
  padding: 1.4rem 0 0;
  border-top: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  gap: .62rem;
}
.svc-level-caps li {
  display: flex;
  gap: .65rem;
  align-items: baseline;
  font-size: .88rem;
  line-height: 1.5;
  color: var(--ink);
}
.svc-level-caps li::before {
  content: '—';
  color: var(--gold-deep);
  flex-shrink: 0;
}
.svc-level-caps li strong { font-weight: 600; color: var(--green); }
.svc-level-explore { font-size: .9rem; }

@media (max-width: 860px) {
  .svc-levels { grid-template-columns: 1fr; gap: 2.8rem; }
}

/* ==========================================================================
   V8 — HOMEPAGE / SERVICES / DIGITAL EXPERIENCE REDESIGN
   Adds: metal accent tokens; three differentiated service panels; the
   owner-view dashboard demonstration; a compact founder strip; a homeowner
   FAQ; a merged service-area + consultation close. Additive — nothing above
   this line changed. Motion is 180-300ms, reduced-motion aware; no
   information depends on hover or colour alone.
   ========================================================================== */

:root {
  --bronze:      #A77550;   /* Residence Watch accent — edges / graphics / large marks */
  --bronze-ink:  #6E4A30;   /* bronze-family text on light (>= 5:1 on ivory/paper) */
  --platinum:    #C3CAC7;   /* Estate Care accent — surfaces / hairlines only */
  --platinum-ink:#4E5754;   /* cool grey text for platinum contexts */
  --champagne:   #C7A660;   /* Private Estate Management accent — on forest green */
  --steel:       #3B5A6C;   /* dashboard "action / info" accent, distinct from the metals */
}

/* ---- hero: tighter vertical rhythm, still legible over imagery ---- */
#hero.h8 { min-height: min(80vh, 660px); }
#hero.h8 .hero-inner { padding-top: 0; }
#hero.h8 .hero-category { margin-bottom: .9rem; }
#hero.h8 h1 { margin-bottom: .9rem; }
#hero.h8 .hero-lede { margin-bottom: .7rem; }
#hero.h8 .hero-prelaunch { margin-bottom: 1.9rem; }
@media (max-width: 640px) { #hero.h8 { min-height: auto; padding: 116px 0 60px; } }

/* ==========================================================================
   THREE SERVICE PANELS  (.sp-grid / .sp)
   Three deliberately different surfaces — warm ivory, muted sage, deep
   forest. The step in tone carries the step in scope, so the progression
   reads before the copy does and still reads with colour removed
   (01 / 02 / 03 + the "everything in … plus" line on 02 and 03).
   ========================================================================== */
.sp-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; align-items: stretch; }
.sp {
  display: flex; flex-direction: column;
  background: var(--sp-surface, #fff);
  border: 1px solid var(--sp-edge, var(--line));
  border-top: 3px solid var(--sp-accent, var(--gold));
  border-radius: var(--radius);
  padding: 1.9rem 1.7rem 1.7rem;
  box-shadow: 0 1px 2px rgba(20,30,25,.03), 0 14px 34px -16px rgba(20,30,25,.16);
  transition: transform .22s var(--ease), box-shadow .22s var(--ease);
}
.sp--watch  { --sp-accent: var(--bronze);       --sp-surface: #FCF8F1; --sp-edge: #EBE2D3; }
.sp--care   { --sp-accent: var(--platinum-ink); --sp-surface: #D4DDD2; --sp-edge: #BFCABD; }
.sp--manage { --sp-accent: var(--champagne);    --sp-surface: var(--green-deep); --sp-edge: rgba(255,255,255,.16); color: var(--ivory); }
@media (prefers-reduced-motion: no-preference) {
  .sp:hover, .sp:focus-within { transform: translateY(-2px); box-shadow: 0 2px 4px rgba(20,30,25,.05), 0 26px 52px -20px rgba(20,30,25,.28); }
}
/* each card fades up on its own (the IO staggers them ~70ms apart); once it
   has arrived, hand the transition back to the quick hover timing */
.sp.reveal { transition: opacity .7s var(--ease), transform .7s var(--ease); }
.sp.reveal.is-visible { transition: transform .24s var(--ease), box-shadow .24s var(--ease); }

.sp-graphic { width: 100%; height: 112px; margin-bottom: 1.5rem; overflow: hidden; }
.sp-graphic svg { width: 100%; height: 100%; max-height: 112px; display: block; overflow: visible; }
/* Explicit + scoped: this decorative line artwork is stroke-only. Base the
   whole graphic to fill:none so a shape can never render as a black block
   even if the stylesheet loads late; .sp-g-fill re-adds fill for the few
   solid marks. Scoped to .sp-graphic — never the logo, the map, other SVGs. */
.sp-graphic svg * { fill: none; }
.sp-g-stroke { stroke: var(--sp-accent); stroke-width: 1.4; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.sp-graphic svg .sp-g-fill { fill: var(--sp-accent); stroke: none; }
.sp-g-move { opacity: .32; transform: translateY(-2px); transition: transform .26s var(--ease), opacity .26s var(--ease); }
@media (prefers-reduced-motion: no-preference) {
  .sp:hover .sp-g-move, .sp:focus-within .sp-g-move { transform: none; opacity: 1; }
}
@media (prefers-reduced-motion: reduce) { .sp-g-move { opacity: 1; transform: none; } }

.sp-head { display: flex; align-items: baseline; gap: .6rem; margin-bottom: .85rem; }
/* 1.55rem (≈24.8px) keeps the numeral in WCAG "large text" territory, so the
   true bronze accent on the warm-ivory panel clears the 3:1 bar. */
.sp-num { font-family: var(--serif); font-weight: 600; font-size: 1.55rem; line-height: 1; letter-spacing: 0; color: var(--sp-accent); }
.sp-name { font-family: var(--sans); font-weight: 600; font-size: .72rem; line-height: 1.3; letter-spacing: .14em; text-transform: uppercase; color: var(--green); margin: 0; }
.sp--care .sp-name { color: var(--green-deep); }
.sp--manage .sp-name { color: rgba(255,255,255,.66); }

.sp-benefit { font-family: var(--serif); font-size: clamp(1.34rem, 1.9vw, 1.6rem); line-height: 1.22; letter-spacing: -.01em; color: var(--green); margin-bottom: .7rem; text-wrap: balance; }
.sp--care .sp-benefit { color: var(--green-deep); }
.sp--manage .sp-benefit { color: #fff; }

.sp-suited { font-size: .88rem; line-height: 1.55; color: var(--muted); margin-bottom: 1.4rem; }
.sp--care .sp-suited { color: var(--platinum-ink); }
.sp--manage .sp-suited { color: rgba(255,255,255,.7); }

.sp-scope { display: flex; flex-direction: column; gap: .5rem; padding: 1.15rem 0 0; border-top: 1px solid var(--sp-edge); margin-bottom: 1.5rem; }
.sp-scope li.sp-includes { display: block; font-size: .8rem; font-weight: 600; letter-spacing: .01em; color: var(--sp-accent); margin-bottom: .15rem; }
.sp-scope li { display: flex; gap: .55rem; font-size: .875rem; line-height: 1.5; color: var(--ink); }
.sp--care .sp-scope li:not(.sp-includes) { color: #22302A; }
.sp--manage .sp-scope li:not(.sp-includes) { color: rgba(255,255,255,.85); }
.sp-scope li:not(.sp-includes)::before { content: ''; flex-shrink: 0; width: 5px; height: 5px; margin-top: .52em; border-radius: 50%; background: var(--sp-accent); }

.sp-action { margin-top: auto; }
.sp--watch  .sp-action .btn-text { color: var(--bronze-ink); }
.sp--care   .sp-action .btn-text { color: var(--platinum-ink); }
.sp--manage .sp-action .btn-text { color: var(--champagne); }

@media (max-width: 58.75em) {
  .sp-grid { grid-template-columns: 1fr; gap: 1rem; max-width: 520px; margin-inline: auto; }
  .sp { padding: 1.6rem 1.5rem; }
  .sp-graphic { height: 100px; }
}

/* ---- services comparison table ---- */
.svc-compare-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; margin-top: 3rem; position: relative; }
.svc-compare { width: 100%; min-width: 640px; border-collapse: collapse; font-size: .88rem; }
.svc-compare caption { text-align: left; font-size: .8rem; color: var(--muted); margin-bottom: 1rem; }
.svc-compare th, .svc-compare td { padding: .95rem 1rem; text-align: left; border-bottom: 1px solid var(--line); vertical-align: top; }
.svc-compare thead th { font-family: var(--serif); font-weight: 400; font-size: 1rem; color: var(--green); border-bottom: 1.5px solid var(--gold-deep); }
.svc-compare tbody th { font-weight: 500; color: var(--ink); width: 34%; }
.svc-compare td { color: var(--muted); }
.svc-compare td.inc { color: var(--green); }
.svc-compare td.none { color: var(--muted); }

/* ==========================================================================
   OWNER-VIEW DASHBOARD DEMONSTRATION  (#owner-view / .ov*)
   ========================================================================== */
.ov { background: var(--green-deep); color: var(--ivory); padding: clamp(4rem, 8vw, 7rem) 0 clamp(3rem, 5vw, 4rem); }
.ov .eyebrow { color: var(--gold-light); }
.ov-head { max-width: 620px; margin-bottom: 1.4rem; }
.ov-head h2 { color: #fff; margin-bottom: .9rem; }
.ov-head p { color: rgba(255,255,255,.66); font-size: 1.02rem; }
.ov-disclosure {
  display: inline-flex; align-items: center; gap: .55rem;
  font-size: .74rem; letter-spacing: .04em; color: var(--gold-light);
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.16);
  border-radius: 100px; padding: .4rem .95rem; margin-bottom: 2.6rem;
}
.ov-disclosure::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--gold-light); flex-shrink: 0; }

.ov-layout { display: grid; grid-template-columns: 300px 1fr; gap: clamp(2rem, 4vw, 3.5rem); align-items: start; }

/* left: narrative + 4 steps */
.ov-guide .ov-guide-lead { font-size: .96rem; line-height: 1.75; color: rgba(255,255,255,.66); margin-bottom: 1.8rem; }
.ov-steps { display: flex; flex-direction: column; gap: .5rem; }
.ov-step {
  display: grid; grid-template-columns: 2rem 1fr; gap: .9rem; align-items: start;
  width: 100%; text-align: left; background: none; cursor: pointer;
  border: 1px solid transparent; border-left: 2px solid rgba(255,255,255,.18);
  padding: 1rem 1rem 1rem .9rem; border-radius: 0 var(--radius) var(--radius) 0;
  transition: background .2s var(--ease), border-color .2s var(--ease);
}
.ov-step:hover { background: rgba(255,255,255,.04); }
.ov-step[aria-current="step"] { background: rgba(255,255,255,.06); border-left-color: var(--gold); }
.ov-step-n { font-family: var(--serif); font-size: .95rem; color: var(--gold-light); }
.ov-step[aria-current="step"] .ov-step-n { color: var(--gold); }
.ov-step-t { display: block; font-family: var(--sans); font-weight: 500; font-size: .92rem; color: #fff; letter-spacing: .01em; }
.ov-step-d { display: block; font-size: .82rem; color: rgba(255,255,255,.58); line-height: 1.5; margin-top: .2rem; }
.ov-reset { margin-top: 1.6rem; font-size: .8rem; color: var(--gold-light); background: none; border: none; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; padding: .3rem 0; }

/* right: the dashboard UI */
.ov-dash { background: var(--ivory); color: var(--ink); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-lg); border: 1px solid rgba(255,255,255,.1); }
.ov-dash-top { background: #fff; border-bottom: 1px solid var(--line); padding: 1.1rem 1.5rem; display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.ov-dash-residence { font-family: var(--serif); font-size: 1.1rem; color: var(--green); }
.ov-dash-residence span { display: block; font-family: var(--sans); font-size: .74rem; color: var(--muted); letter-spacing: .02em; margin-top: 1px; }
.ov-sample-chip { font-size: .66rem; letter-spacing: .12em; text-transform: uppercase; color: var(--bronze-ink); border: 1px solid rgba(167,117,80,.4); border-radius: 3px; padding: .25rem .55rem; white-space: nowrap; }

.ov-dash-nav { display: flex; gap: .2rem; padding: .5rem .8rem; background: #fff; border-bottom: 1px solid var(--line); overflow-x: auto; -webkit-overflow-scrolling: touch; }
.ov-nav-btn { flex-shrink: 0; background: none; border: none; cursor: pointer; font-size: .8rem; color: var(--muted); padding: .6rem .8rem; border-bottom: 2px solid transparent; white-space: nowrap; transition: color .18s, border-color .18s; }
.ov-nav-btn:hover { color: var(--green); }
.ov-nav-btn[aria-selected="true"] { color: var(--green); font-weight: 500; border-bottom-color: var(--gold); }

.ov-dash-body { padding: 1.6rem 1.7rem 1.9rem; min-height: 420px; }
.ov-view { display: none; }
.ov-view.is-active { display: block; animation: ovFade .34s var(--ease) both; }
@keyframes ovFade { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .ov-view.is-active { animation: none; } }

.ov-view h3 { font-family: var(--serif); font-weight: 400; font-size: 1.3rem; color: var(--green); margin-bottom: .3rem; }
.ov-view-sub { font-size: .8rem; color: var(--muted); margin-bottom: 1.3rem; }
.ov-row { display: grid; grid-template-columns: 1fr auto; gap: .6rem 1rem; padding: .85rem 0; border-bottom: 1px solid var(--line); align-items: center; }
.ov-row:last-child { border-bottom: none; }
.ov-row-label { font-size: .88rem; color: var(--ink); }
.ov-row-label small { display: block; color: var(--muted); font-size: .78rem; margin-top: .15rem; }
.ov-pill { font-size: .7rem; letter-spacing: .03em; padding: .28rem .6rem; border-radius: 3px; white-space: nowrap; border: 1px solid transparent; }
.ov-pill--recorded { background: rgba(29,78,59,.1); color: var(--green); border-color: rgba(29,78,59,.2); }
.ov-pill--scheduled { background: rgba(167,117,80,.12); color: var(--bronze-ink); border-color: rgba(167,117,80,.3); }
.ov-pill--decision { background: rgba(199,166,96,.16); color: #7a5d1e; border-color: rgba(199,166,96,.45); }
.ov-pill--reported { background: rgba(107,107,98,.12); color: var(--muted); border-color: rgba(107,107,98,.28); }
.ov-pill--notobs { background: rgba(107,107,98,.08); color: var(--muted); border-color: var(--line); }
.ov-pill--approved { background: rgba(59,90,108,.12); color: var(--steel); border-color: rgba(59,90,108,.35); }

.ov-callout { background: #fff; border: 1px solid var(--line); border-left: 3px solid var(--gold); border-radius: var(--radius); padding: 1rem 1.1rem; margin: 1rem 0; font-size: .86rem; line-height: 1.6; color: var(--ink); }
.ov-callout strong { color: var(--green); }
.ov-note { font-size: .78rem; color: var(--muted); line-height: 1.55; margin-top: .8rem; }
.ov-tag { display: inline-block; font-size: .68rem; letter-spacing: .08em; text-transform: uppercase; color: var(--bronze-ink); margin-bottom: .5rem; }

.ov-photos { display: flex; gap: .5rem; flex-wrap: wrap; margin-top: .3rem; }
.ov-photo { width: 62px; height: 46px; border-radius: 3px; background: linear-gradient(150deg, #e7e2d5, #d7d0bf); border: 1px solid var(--line); display: flex; align-items: center; justify-content: center; font-size: .62rem; color: var(--muted); }

.ov-btn-demo {
  font-size: .78rem; font-weight: 500; letter-spacing: .02em;
  background: var(--green); color: #fff; border: none; border-radius: var(--radius);
  padding: .5rem .9rem; cursor: pointer; transition: background .18s;
}
.ov-btn-demo:hover { background: var(--green-light); }
.ov-btn-demo[disabled] { opacity: .55; cursor: default; }

.ov-table { width: 100%; border-collapse: collapse; font-size: .82rem; }
.ov-table th { text-align: left; font-weight: 500; color: var(--muted); font-size: .72rem; letter-spacing: .04em; text-transform: uppercase; padding: 0 .8rem .6rem 0; border-bottom: 1px solid var(--line); }
.ov-table td { padding: .8rem .8rem .8rem 0; border-bottom: 1px solid var(--line); color: var(--ink); vertical-align: top; }
.ov-table tr:last-child td { border-bottom: none; }
.ov-table .next-action { color: var(--muted); font-size: .78rem; }

.ov-doc { width: 100%; text-align: left; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: .9rem 1rem; margin-bottom: .6rem; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 1rem; transition: border-color .18s; }
.ov-doc:hover { border-color: var(--gold); }
.ov-doc-name { font-size: .87rem; color: var(--ink); }
.ov-doc-type { font-size: .7rem; color: var(--muted); }
.ov-doc-preview { font-size: .82rem; line-height: 1.6; color: var(--muted); padding: .3rem 0 1rem; }

.ov-check { display: flex; align-items: flex-start; gap: .7rem; padding: .7rem 0; border-bottom: 1px solid var(--line); font-size: .87rem; color: var(--ink); }
.ov-check:last-of-type { border-bottom: none; }
.ov-check input { width: 17px; height: 17px; margin-top: .1rem; accent-color: var(--green); flex-shrink: 0; }

@media (max-width: 900px) {
  .ov-layout { grid-template-columns: 1fr; gap: 1.8rem; }
  .ov-steps { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; }
  .ov-step { border-radius: var(--radius); border: 1px solid rgba(255,255,255,.14); border-left-width: 2px; }
}
@media (max-width: 520px) {
  .ov-steps { grid-template-columns: 1fr; }
  .ov-dash-body { padding: 1.3rem 1.2rem 1.5rem; }
  .ov-row { grid-template-columns: 1fr; }
}

/* (The standalone .f8 founder strip was folded into #service-area as
   .close-founder — see below. Its styles were removed with it.) */

/* ==========================================================================
   ABOUT — one founder story, then what it means for the homeowner
   Two sections only. No standalone "trust / accountability / why" bands.
   ========================================================================== */
.abt-founder { max-width: 820px; }
.abt-founder h1 { font-size: clamp(2.3rem, 4.2vw, 3.3rem); line-height: 1.12; margin: 1rem 0 1.8rem; }
.abt-narrative p { font-size: 1.09rem; line-height: 1.85; color: var(--ink); margin-bottom: 1.15rem; max-width: 60ch; }
.abt-narrative p + p { color: var(--muted); margin-bottom: 0; }
.abt-sign { margin: 2.1rem 0 1.9rem; }
.abt-name { display: block; font-family: var(--serif); font-size: 1.18rem; color: var(--green); }
.abt-role { display: block; font-size: .74rem; letter-spacing: .09em; text-transform: uppercase; color: var(--muted); margin-top: .25rem; }

.abt-b { max-width: 820px; }
.abt-points {
  display: grid; grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
  margin: 2.6rem 0;
}
.abt-point { padding: 1.7rem 1.5rem 1.7rem 0; }
.abt-point + .abt-point { border-left: 1px solid var(--line); padding-left: 1.5rem; }
.abt-point h3 { font-family: var(--serif); font-weight: 400; font-size: 1.18rem; letter-spacing: -.005em; color: var(--green); margin-bottom: .55rem; }
/* #585851 on --paper ≈ 6.4:1 — a touch darker than --muted (≈4.8:1) so the
   dimmest body copy on this page keeps comfortable headroom over AA. */
.abt-point p { font-size: .92rem; line-height: 1.65; color: #585851; }
.abt-prelaunch {
  max-width: 620px; font-size: .9rem; line-height: 1.7; color: #585851;
  padding-left: 1rem; border-left: 2px solid var(--gold-deep); margin-bottom: 1.7rem;
}
@media (max-width: 45em) {
  .abt-points { grid-template-columns: 1fr; }
  .abt-point { padding: 1.35rem 0; border-bottom: 1px solid var(--line); }
  .abt-point:last-child { border-bottom: none; }
  .abt-point + .abt-point { border-left: none; padding-left: 0; }
}

/* ==========================================================================
   HOMEOWNER FAQ  (.hf) + merged close
   ========================================================================== */
.hf { max-width: 720px; margin: 2.6rem auto 0; }
.hf-item { border-bottom: 1px solid var(--line); }
.hf-item:first-child { border-top: 1px solid var(--line); }
.hf-q { width: 100%; text-align: left; background: none; border: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 1.2rem; padding: 1.3rem 0; font-family: var(--serif); font-size: 1.08rem; color: var(--ink); }
.hf-q .hf-i { flex-shrink: 0; width: 18px; height: 18px; position: relative; }
.hf-q .hf-i::before, .hf-q .hf-i::after { content: ''; position: absolute; background: var(--gold-deep); transition: transform .22s var(--ease), opacity .22s; }
.hf-q .hf-i::before { top: 50%; left: 0; width: 100%; height: 1.5px; transform: translateY(-50%); }
.hf-q .hf-i::after { left: 50%; top: 0; height: 100%; width: 1.5px; transform: translateX(-50%); }
.hf-item.is-open .hf-q .hf-i::after { transform: translateX(-50%) rotate(90deg); opacity: 0; }
.hf-a { display: grid; grid-template-rows: minmax(0,0fr); overflow: hidden; transition: grid-template-rows .3s var(--ease); }
.hf-a > * { min-height: 0; overflow: hidden; }
.hf-item.is-open .hf-a { grid-template-rows: minmax(0,1fr); }
.hf-a p { font-size: .94rem; line-height: 1.75; color: var(--muted); padding-bottom: 1.3rem; max-width: 60ch; }
@media (prefers-reduced-motion: reduce) { .hf-a { transition: none; } }

.close8 { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2.5rem, 6vw, 5rem); align-items: center; }
.close8 .close8-map { max-width: 420px; margin-inline: auto; }
.close8 .close8-text .eyebrow { color: var(--gold-light); }
.close8 .close8-text h2 { color: #fff; margin-bottom: 1rem; }
.close8 .close8-text p { color: rgba(255,255,255,.66); line-height: 1.8; margin-bottom: 1.4rem; max-width: 46ch; }
.close8 .close8-geo { font-size: .86rem; color: var(--gold-light); margin-bottom: 1.9rem; letter-spacing: .02em; }
@media (max-width: 860px) { .close8 { grid-template-columns: 1fr; gap: 3rem; } .close8 .close8-text { order: -1; } }

/* ---- V8 fixes: homeowner FAQ on the dark close section ---- */
.section--dark .hf-item, .section--dark .hf-item:first-child { border-color: rgba(255,255,255,.14); }
.section--dark .hf-q { color: #fff; }
.section--dark .hf-q .hf-i::before, .section--dark .hf-q .hf-i::after { background: var(--gold-light); }
.section--dark .hf-a p { color: rgba(255,255,255,.66); }

/* (Estate Care surface / accent now defined once, in the .sp block above.) */

/* ---- V8: close section map sizing ---- */
.close8 .close8-map { width: 100%; }
.close8 .close8-map svg { width: 100%; height: auto; display: block; }

/* ---- V8: dashboard table adapts to small screens (stacked cards) ---- */
@media (max-width: 560px) {
  .ov-table, .ov-table thead, .ov-table tbody, .ov-table tr, .ov-table td { display: block; width: 100%; }
  .ov-table thead { position: absolute; left: -9999px; }
  .ov-table tr { border: 1px solid var(--line); border-radius: var(--radius); padding: .9rem 1rem; margin-bottom: .7rem; }
  .ov-table td { border: none; padding: .3rem 0; }
  .ov-table td::before { content: attr(data-th) " "; font-size: .68rem; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); display: inline-block; min-width: 6.5rem; }
  .ov-table td:first-child { font-weight: 500; margin-bottom: .3rem; }
  .ov-table td:first-child::before { display: none; }
  .ov-table .next-action { display: block; margin-top: .1rem; }
}

/* ==========================================================================
   NARROW-WIDTH / ENLARGED-TEXT ROBUSTNESS
   No effect at normal widths and text sizes — these rules only engage when a
   very small viewport (down to 320px) or browser text-resize would otherwise
   push content past the viewport. Verified: 0 page overflow (root clip
   disabled) at 320 / 375 / 390 px, and at 360px with the browser font at 24px.
   ========================================================================== */
body { overflow-wrap: break-word; }
/* long single words / long tokens inside tight grid or flex tracks: allow the
   break AND let the track shrink (`anywhere` feeds min-content; `break-word`
   alone does not, so the track would still blow out). */
.detail-card h4, .vault-card h3, .sp-benefit, .sp-name,
.consult-fallback .email-copy-row code { overflow-wrap: anywhere; }
/* grid / flex items that must be free to shrink below their content’s width */
.sp, .detail-card, .vault-card, .consult-layout > *, .close8 > *,
.ov-layout > *, .ov-steps, .ov-step,
.form-group input, .form-group select, .form-group textarea { min-width: 0; }
.sp-head { flex-wrap: wrap; }
.consult-fallback .email-copy-row { flex-wrap: wrap; justify-content: center; }
.consult-fallback .email-copy-row code { min-width: 0; }
/* Florida map: on a phone the map shrinks in absolute px, so a marker near
   the east coast plus its label plus its focus ring reached the viewport
   edge. Cap the map smaller so every marker — and its keyboard-focus
   outline — sits well inside the section (which already clips its own box).
   The homepage inset map is an accent and can go smallest. */
@media (max-width: 560px) {
  .close8 .close8-map { max-width: 232px; }
  .fl-map-section .fl-map-wrap { max-width: 244px; }
}
/* When a keyboard-focused map marker or the scrollable comparison table is
   scrolled into view, keep clear of the fixed Concierge launcher. */
.fl-marker-btn { scroll-margin: 96px 0 132px; }
.svc-compare-wrap { scroll-margin-bottom: 132px; }