/* ============================================================
   Bilboat — styles.css
   Premium coastal design system.
   Type:  Source Serif 4 (display) + Manrope (body)
   Color: deep coastal navy, muted sea green, warm clay,
          sand paper backgrounds. Tokens live in :root.
   ============================================================ */

:root {
  /* brand-derived, refined */
  --ink: #172A40;            /* headings / strong text */
  --navy: #0F2C4A;           /* primary deep coastal navy */
  --navy-deep: #0A2038;      /* footer, dark panels */
  --sea: #2F6B65;            /* muted sea green (from logo teal) */
  --sea-deep: #235350;
  --sea-tint: #E9F1EF;
  --clay: #BC6B3C;           /* warm clay (refined from logo orange) */
  --clay-deep: #A05327;
  --clay-tint: #F7ECE2;

  /* surfaces */
  --sand: #F7F3EB;           /* page background, warm paper */
  --sand-deep: #F1EADD;      /* alt sections */
  --paper: #FFFDF9;          /* cards */
  --white: #FFFFFF;

  /* text + lines */
  --text: #4E5D6E;
  --soft: #8B96A3;
  --line: #E4DCCC;
  --line-cool: #DCE4E1;

  --shadow-sm: 0 1px 2px rgba(15,44,74,.05), 0 2px 8px rgba(15,44,74,.04);
  --shadow-md: 0 10px 30px rgba(15,44,74,.08), 0 2px 8px rgba(15,44,74,.05);
  --shadow-lg: 0 30px 70px rgba(15,44,74,.16);

  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 16px;

  --wrap: 1160px;
  --header-h: 78px;

  --sans: "Manrope", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --serif: "Source Serif 4", Georgia, "Times New Roman", serif;

  --ease: cubic-bezier(.22, .7, .3, 1);

  /* premium editorial pass: type scale + rhythm + glass */
  --fs-hero: clamp(2.7rem, 5.6vw, 4.15rem);
  --fs-h2: clamp(1.95rem, 3.4vw, 2.8rem);
  --fs-h3: clamp(1.28rem, 2vw, 1.55rem);
  --fs-lede: clamp(1.05rem, 1.5vw, 1.19rem);
  --lh-tight: 1.07;
  --section-pad: clamp(4.2rem, 8.5vw, 7rem);

  --glass: rgba(255, 253, 249, .72);
  --glass-blur: saturate(1.25) blur(14px);
  --shadow-float: 0 18px 50px rgba(15, 44, 74, .14), 0 4px 12px rgba(15, 44, 74, .06);
}

/* ---------- reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; overflow-x: hidden; }
body {
  font-family: var(--sans);
  color: var(--text);
  background: var(--sand);
  line-height: 1.65;
  font-size: 16.5px;
  overflow-x: hidden;
}
img, svg, video { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; }
h1, h2, h3, h4 {
  font-family: var(--serif); color: var(--ink);
  line-height: 1.14; font-weight: 600; letter-spacing: -0.015em;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

/* ---------- helpers ---------- */
.wrap { width: min(var(--wrap), calc(100% - 48px)); margin-inline: auto; }
.muted { color: var(--soft); font-weight: 400; }
.skip-link {
  position: absolute; left: 12px; top: -60px; z-index: 200;
  background: var(--navy); color: #fff; padding: 10px 16px; border-radius: var(--r-sm);
  transition: top .2s ease;
}
.skip-link:focus { top: 12px; }

a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible {
  outline: 3px solid var(--sea);
  outline-offset: 2px;
  border-radius: 4px;
}

/* ---------- premium inline icon system ---------- */
.icon-sprite {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}
.ui-icon {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--sea-deep);
}
.ui-icon svg,
.ui-icon use {
  width: 24px;
  height: 24px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ---------- buttons ---------- */
.btn {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  padding: .8rem 1.45rem; border-radius: var(--r-sm); border: 1px solid transparent;
  font-weight: 700; font-size: .93rem; line-height: 1; white-space: nowrap;
  letter-spacing: .01em;
  transition: transform .2s var(--ease), box-shadow .2s var(--ease),
              background .2s ease, border-color .2s ease, color .2s ease;
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }
.btn-orange { background: var(--clay); color: #fff; box-shadow: 0 8px 20px rgba(188,107,60,.24); }
.btn-orange:hover { background: var(--clay-deep); box-shadow: 0 12px 26px rgba(160,83,39,.28); }
.btn-teal { background: var(--navy); color: #fff; box-shadow: 0 8px 20px rgba(15,44,74,.2); }
.btn-teal:hover { background: var(--navy-deep); box-shadow: 0 12px 26px rgba(10,32,56,.26); }
.btn-ghost { background: transparent; color: var(--ink); border-color: #CDC4B0; }
.btn-ghost:hover { border-color: var(--sea); color: var(--sea-deep); background: rgba(47,107,101,.05); }
.btn-lg { padding: .95rem 1.8rem; font-size: .99rem; }
.btn-sm { padding: .58rem 1.05rem; font-size: .85rem; }

/* ---------- announcement bar ---------- */
.announce {
  background: var(--navy-deep); color: #C4D2E2;
  font-size: .74rem; letter-spacing: .06em; text-transform: uppercase; font-weight: 600;
}
.announce p {
  width: min(var(--wrap), 100% - 48px); margin-inline: auto;
  padding: .55rem 0; text-align: center;
  display: flex; align-items: center; justify-content: center; gap: .55rem; flex-wrap: wrap;
}
.announce .pin { color: #D9A276; display: inline-flex; }
.announce .dot { color: #45607E; }
.announce-extra { display: inline-flex; align-items: center; gap: .55rem; }

/* ---------- header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 100;
  background: rgba(247,243,235,.9);
  backdrop-filter: saturate(1.3) blur(12px);
  border-bottom: 1px solid var(--line);
  transition: box-shadow .3s ease, background .3s ease;
}
.site-header.scrolled { background: rgba(255,253,249,.96); box-shadow: 0 10px 30px rgba(15,44,74,.08); }
.header-inner { display: flex; align-items: center; gap: .75rem; min-height: var(--header-h); }
.brand { display: inline-flex; align-items: center; gap: .6rem; flex: 0 0 auto; }

/* Logo fx v3: split emblem + wordmark. Cinematic intro on load (emblem blooms in,
   wordmark wipes on, light sweep), then a barely-there sun-glow breathe.
   Hover keeps the sunset halo + underline + shine sweep. */
@property --halo-spin {
  syntax: "<angle>";
  initial-value: 0deg;
  inherits: false;
}
.brand-fx-logo {
  position: relative; isolation: isolate;
  padding: .4rem .55rem; margin: -.4rem -.55rem;
  border-radius: var(--r-md);
  -webkit-tap-highlight-color: transparent;
}
.brand-logo-stage {
  position: relative; display: flex; align-items: center; gap: 1.4%;
  width: clamp(190px, 20vw, 260px); line-height: 0;
  transition: transform .4s cubic-bezier(.22, 1, .36, 1), filter .4s ease, width .35s var(--ease);
}
.logo-piece { position: relative; display: block; line-height: 0; }
.logo-piece-mark { flex: 0 0 28.2%; }
.logo-piece-word { flex: 0 0 70.4%; top: -6.8%; } /* wordmark rides slightly above emblem center, as drawn */
.logo-piece img { width: 100%; height: auto; display: block; }

/* ---- cinematic intro (fired by html.logo-go, set by the preloader script; fail-open without JS) ---- */
html.logo-wait .site-header .logo-piece { opacity: 0; }
html.logo-go:not(.logo-instant) .site-header .logo-piece-mark {
  animation: logoEmblemIn 1s cubic-bezier(.22, 1, .36, 1) .05s both;
}
html.logo-go:not(.logo-instant) .site-header .logo-piece-word {
  animation: logoWordIn .95s cubic-bezier(.22, 1, .36, 1) .5s both;
}
html.logo-go:not(.logo-instant) .site-header .logo-piece-mark::after {
  animation: logoShine 1s ease 1.35s;
}
html.logo-go:not(.logo-instant) .site-header .logo-piece-word::after {
  animation: logoShine 1s ease 1.5s;
}
@keyframes logoEmblemIn {
  0% { opacity: 0; transform: translateY(14px) scale(.55); filter: drop-shadow(0 0 0 rgba(244, 183, 64, 0)); }
  55% { opacity: 1; filter: drop-shadow(0 6px 24px rgba(244, 183, 64, .6)); }
  100% { opacity: 1; transform: none; filter: drop-shadow(0 3px 10px rgba(232, 122, 60, .18)); }
}
@keyframes logoWordIn {
  0% { opacity: 0; clip-path: inset(-15% 100% -15% 0); transform: translateX(-8px); filter: blur(4px); }
  35% { opacity: 1; }
  100% { opacity: 1; clip-path: inset(-15% 0% -15% 0); transform: none; filter: blur(0); }
}

/* Ambient life after the intro: the sun quietly breathes. Subtle on purpose. */
html.logo-go .site-header .logo-emblem { animation: emblemBreathe 6.5s ease-in-out 2.6s infinite; }
@keyframes emblemBreathe {
  0%, 100% { filter: drop-shadow(0 0 0 rgba(244, 183, 64, 0)); }
  50% { filter: drop-shadow(0 2px 14px rgba(244, 183, 64, .38)); }
}

/* Soft rotating sunset halo that blooms behind the transparent logo on hover. */
.brand-fx-logo::before {
  content: ""; position: absolute; inset: -14% -6%; z-index: -1; border-radius: 50%;
  background: conic-gradient(from var(--halo-spin),
    rgba(232, 122, 60, .55), rgba(244, 183, 64, .5), rgba(31, 138, 141, .55),
    rgba(15, 44, 74, .3), rgba(232, 122, 60, .55));
  filter: blur(16px) saturate(1.25);
  opacity: 0; transform: scale(.72);
  transition: opacity .45s ease, transform .45s cubic-bezier(.22, 1, .36, 1);
  pointer-events: none;
}
.brand-fx-logo:hover::before,
.brand-fx-logo:focus-visible::before {
  opacity: .85; transform: scale(1);
  animation: logoHaloSpin 6s linear infinite;
}
@keyframes logoHaloSpin { to { --halo-spin: 360deg; } }

/* Gradient underline that draws itself left to right. */
.brand-fx-logo::after {
  content: ""; position: absolute; left: 7%; right: 7%; bottom: 0; height: 2px;
  background: linear-gradient(90deg, #E87A3C, #F4B740 45%, #1F8A8D);
  border-radius: 2px;
  transform: scaleX(0); transform-origin: left center;
  transition: transform .45s cubic-bezier(.22, 1, .36, 1);
  pointer-events: none;
}
.brand-fx-logo:hover::after,
.brand-fx-logo:focus-visible::after { transform: scaleX(1); }

/* Shine sweep, masked to each piece's own pixels so it never paints a rectangle. */
.logo-piece::after {
  content: ""; position: absolute; inset: 0; z-index: 2; opacity: 0; pointer-events: none;
  background: linear-gradient(110deg, transparent 42%, rgba(255,255,255,.9) 50%, transparent 58%);
  background-size: 240% 100%; background-position: 130% 0;
}
.logo-piece-mark::after {
  -webkit-mask: url("assets/fby-logo-mark.png") center / contain no-repeat;
          mask: url("assets/fby-logo-mark.png") center / contain no-repeat;
}
.logo-piece-word::after {
  -webkit-mask: url("assets/fby-logo-word-buy.png") center / contain no-repeat;
          mask: url("assets/fby-logo-word-buy.png") center / contain no-repeat;
}
.brand-fx-logo:hover .logo-piece-mark::after,
.brand-fx-logo:focus-visible .logo-piece-mark::after { animation: logoShine 1.1s ease .1s; }
.brand-fx-logo:hover .logo-piece-word::after,
.brand-fx-logo:focus-visible .logo-piece-word::after { animation: logoShine 1.1s ease .28s; }
@keyframes logoShine {
  0% { opacity: 1; background-position: 130% 0; }
  100% { opacity: 0; background-position: -40% 0; }
}

/* Gentle lift with warm shadow. */
.brand-fx-logo:hover .brand-logo-stage,
.brand-fx-logo:focus-visible .brand-logo-stage {
  transform: translateY(-2px) scale(1.04);
  filter: drop-shadow(0 8px 18px rgba(232, 122, 60, .35)) drop-shadow(0 2px 6px rgba(15, 44, 74, .18));
}

/* Soft rotating sunset halo that blooms behind the transparent logo. */
.brand-fx-logo::before {
  content: ""; position: absolute; inset: -14% -6%; z-index: -1; border-radius: 50%;
  background: conic-gradient(from var(--halo-spin),
    rgba(232, 122, 60, .55), rgba(244, 183, 64, .5), rgba(31, 138, 141, .55),
    rgba(15, 44, 74, .3), rgba(232, 122, 60, .55));
  filter: blur(16px) saturate(1.25);
  opacity: 0; transform: scale(.72);
  transition: opacity .45s ease, transform .45s cubic-bezier(.22, 1, .36, 1);
  pointer-events: none;
}
.brand-fx-logo:hover::before,
.brand-fx-logo:focus-visible::before {
  opacity: .85; transform: scale(1);
  animation: logoHaloSpin 6s linear infinite;
}
@keyframes logoHaloSpin { to { --halo-spin: 360deg; } }

/* Gradient underline that draws itself left to right. */
.brand-fx-logo::after {
  content: ""; position: absolute; left: 7%; right: 7%; bottom: 0; height: 2px;
  background: linear-gradient(90deg, #E87A3C, #F4B740 45%, #1F8A8D);
  border-radius: 2px;
  transform: scaleX(0); transform-origin: left center;
  transition: transform .45s cubic-bezier(.22, 1, .36, 1);
  pointer-events: none;
}
.brand-fx-logo:hover::after,
.brand-fx-logo:focus-visible::after { transform: scaleX(1); }

/* Shine sweep, masked to the logo pixels so it never paints a rectangle. */
.brand-logo-stage::after {
  content: ""; position: absolute; inset: 0; z-index: 2; opacity: 0; pointer-events: none;
  background: linear-gradient(110deg, transparent 42%, rgba(255,255,255,.9) 50%, transparent 58%);
  background-size: 240% 100%; background-position: 130% 0;
  -webkit-mask: url("assets/florida-before-you-buy-logo.png") center / contain no-repeat;
          mask: url("assets/florida-before-you-buy-logo.png") center / contain no-repeat;
}
.brand-fx-logo:hover .brand-logo-stage::after,
.brand-fx-logo:focus-visible .brand-logo-stage::after { animation: logoShine 1.1s ease .15s; }
@keyframes logoShine {
  0% { opacity: 1; background-position: 130% 0; }
  100% { opacity: 0; background-position: -40% 0; }
}

/* Gentle lift with warm shadow. */
.brand-fx-logo:hover .brand-mark,
.brand-fx-logo:focus-visible .brand-mark {
  transform: translateY(-2px) scale(1.04);
  filter: drop-shadow(0 8px 18px rgba(232, 122, 60, .35)) drop-shadow(0 2px 6px rgba(15, 44, 74, .18));
}

/* Click: elastic pop + sonar pulse rings + sparkle burst (spans injected by JS). */
.brand-fx-logo.is-clicked .brand-logo-stage { animation: logoPop .5s cubic-bezier(.34, 1.56, .64, 1); }
@keyframes logoPop {
  0% { transform: scale(1); }
  30% { transform: scale(.94); }
  60% { transform: translateY(-2px) scale(1.07); }
  100% { transform: scale(1); }
}
.logo-pulse {
  position: absolute; inset: 0; border-radius: var(--r-md);
  border: 2px solid var(--pulse-color, #E87A3C);
  opacity: 0; pointer-events: none;
  animation: logoPulse .7s cubic-bezier(.22, 1, .36, 1) forwards;
}
@keyframes logoPulse {
  0% { opacity: .85; transform: scale(.9); }
  100% { opacity: 0; transform: scale(1.45); }
}
.logo-spark {
  position: absolute; left: 50%; top: 50%; width: 6px; height: 6px;
  border-radius: 50%; background: var(--spark-color, #F4B740);
  pointer-events: none; z-index: 3;
  animation: logoSpark .65s cubic-bezier(.16, .8, .3, 1) forwards;
}
@keyframes logoSpark {
  0% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  100% { opacity: 0; transform: translate(calc(-50% + var(--sx)), calc(-50% + var(--sy))) scale(.3); }
}
@media (prefers-reduced-motion: reduce) {
  .brand-fx-logo::before,
  .brand-fx-logo::after,
  .logo-piece,
  .logo-piece::after,
  .logo-emblem,
  .brand-logo-stage,
  .logo-pulse,
  .logo-spark { animation: none !important; transition: none; }
  html.logo-wait .site-header .logo-piece { opacity: 1; }
}

.main-nav { margin-left: auto; display: flex; align-items: center; gap: 0; flex-wrap: nowrap; }
.main-nav a {
  position: relative;
  padding: .5rem .55rem; font-weight: 600; font-size: .84rem; color: var(--ink);
  white-space: nowrap; transition: color .2s ease;
}
.main-nav a::after {
  content: ""; position: absolute; left: .65rem; right: .65rem; bottom: .22rem;
  height: 2px; background: var(--clay); border-radius: 2px;
  transform: scaleX(0); transform-origin: left; transition: transform .25s var(--ease);
}
.main-nav a:hover { color: var(--clay-deep); }
.main-nav a:hover::after { transform: scaleX(1); }
.main-nav a.active { color: var(--sea-deep); }
.main-nav a.active::after { transform: scaleX(1); background: var(--sea); }
.header-cta { margin-left: .3rem; }

.hamburger { display: none; background: transparent; border: 0; width: 44px; height: 44px; padding: 10px; margin-left: auto; }
.hamburger span { display: block; height: 2.5px; background: var(--ink); border-radius: 2px; transition: transform .25s ease, opacity .2s ease; }
.hamburger span + span { margin-top: 5px; }
.hamburger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7.5px) rotate(45deg); }
.hamburger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.hamburger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7.5px) rotate(-45deg); }

/* ---------- eyebrows / small labels ---------- */
.eyebrow {
  display: inline-flex; align-items: center; gap: .55rem;
  font-size: .72rem; font-weight: 800; letter-spacing: .16em;
  text-transform: uppercase; margin-bottom: .9rem;
}
.eyebrow::before { content: ""; width: 26px; height: 1.5px; background: currentColor; opacity: .6; }
.eyebrow-orange { color: var(--clay-deep); }
.eyebrow-teal { color: var(--sea-deep); }
.eyebrow-light { color: #93A9C4; }

/* ---------- hero ---------- */
.hero {
  position: relative;
  background:
    radial-gradient(900px 420px at 88% -12%, rgba(47,107,101,.09), transparent 62%),
    linear-gradient(180deg, var(--sand) 0%, #F3EDE1 100%);
  padding: clamp(3rem, 6.5vw, 5.6rem) 0 clamp(2.6rem, 5vw, 4.4rem);
  overflow: hidden;
}
.hero::after { /* faint horizon line */
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
  background: linear-gradient(90deg, transparent, var(--line), transparent);
}
.hero::before { /* slow-drifting coastal light */
  content: ""; position: absolute; inset: -18% -8%; pointer-events: none; z-index: 0;
  background:
    radial-gradient(440px 320px at 14% 22%, rgba(188,107,60,.08), transparent 62%),
    radial-gradient(540px 380px at 86% 78%, rgba(47,107,101,.1), transparent 62%);
  animation: heroDrift 18s ease-in-out infinite alternate;
}
@keyframes heroDrift {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to { transform: translate3d(2.5%, -3%, 0) scale(1.06); }
}
.hero-grid { position: relative; z-index: 1; display: grid; grid-template-columns: 1.18fr .82fr; gap: clamp(2rem, 5vw, 4.4rem); align-items: center; }
.hero-copy { max-width: 660px; }
.hero-kicker {
  display: inline-flex; align-items: center; gap: .5rem;
  font-size: .74rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase;
  color: var(--sea-deep);
}
.hero-kicker::before { content: ""; width: 30px; height: 1.5px; background: var(--sea); }
.hero-title {
  font-size: var(--fs-hero); font-weight: 600; color: var(--ink);
  line-height: var(--lh-tight); letter-spacing: -0.02em;
  margin: 1.1rem 0 1.2rem; text-wrap: balance;
}
.hero-title em {
  font-style: italic; color: var(--sea-deep);
  background: linear-gradient(120deg, rgba(188,107,60,.2), rgba(47,107,101,.16)) no-repeat 0 88% / 0% 24%;
  animation: emHighlight .9s var(--ease) 1s forwards;
}
@keyframes emHighlight { to { background-size: 100% 30%; } }
.hero-sub { font-size: 1.06rem; max-width: 33em; }
.hero-actions { display: flex; gap: .8rem; flex-wrap: wrap; margin: 1.8rem 0 1.3rem; }
.hero-tool-link {
  margin: -.6rem 0 1rem;
  font-size: .88rem;
  font-weight: 700;
}
.hero-tool-link a {
  color: var(--sea-deep);
  border-bottom: 1px solid rgba(47,107,101,.35);
  transition: color .2s ease, border-color .2s ease;
}
.hero-tool-link a:hover {
  color: var(--clay-deep);
  border-bottom-color: var(--clay);
}
.hero-meta {
  display: flex; align-items: center; gap: .6rem; flex-wrap: wrap;
  font-size: .86rem; color: var(--ink); font-weight: 600;
}
.hero-meta .shield { color: var(--sea); flex: none; }

/* hero entrance (CSS-only, reduced-motion safe) */
@keyframes heroRise { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }
.hero-copy > * { animation: heroRise .8s var(--ease) both; }
.hero-copy > *:nth-child(1) { animation-delay: .05s; }
.hero-copy > *:nth-child(2) { animation-delay: .14s; }
.hero-copy > *:nth-child(3) { animation-delay: .24s; }
.hero-copy > *:nth-child(4) { animation-delay: .34s; }
.hero-copy > *:nth-child(5) { animation-delay: .44s; }
.hero-copy > *:nth-child(6) { animation-delay: .54s; }
.hero-media { animation: heroRise 1s var(--ease) .3s both; }

/* hero media: real drive footage facade */
.media-card {
  position: relative; border-radius: var(--r-lg); overflow: hidden;
  box-shadow: var(--shadow-lg); background: var(--navy-deep);
}
.media-card .yt-facade { aspect-ratio: 4 / 3; }
.media-cap {
  display: flex; flex-direction: column; gap: .2rem;
  padding: 1rem 1.25rem 1.1rem; background: var(--navy-deep); color: #fff;
}
.cap-k { font-size: .7rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: #D9A276; }
.cap-t { font-family: var(--serif); font-size: 1.02rem; color: #E8EEF6; line-height: 1.4; }
.media-frame-note {
  position: absolute; top: .9rem; left: .9rem; z-index: 3;
  font-size: .68rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase;
  color: #fff; background: rgba(10,32,56,.72); backdrop-filter: blur(4px);
  padding: .4rem .7rem; border-radius: var(--r-sm);
}

/* hero audience cue */
.hero-audience {
  list-style: none; margin: 1.4rem 0 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: .5rem;
}
.hero-audience li {
  font-size: .74rem; font-weight: 700; letter-spacing: .04em;
  color: var(--sea-deep); background: var(--sea-tint);
  border: 1px solid var(--line-cool); border-radius: 999px;
  padding: .34rem .85rem;
}

/* hero map: premium local-preview panel */
.hero-map {
  display: block; position: relative;
  border-radius: var(--r-lg); overflow: hidden;
  background: var(--paper); border: 1px solid var(--line);
  box-shadow: var(--shadow-lg);
  transition: transform .25s var(--ease), box-shadow .25s var(--ease);
}
.hero-map::after { /* subtle inner ring + vignette */
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.35), inset 0 -28px 56px rgba(15,44,74,.05);
}
.hero-map:hover { transform: translateY(-4px); box-shadow: 0 36px 80px rgba(15,44,74,.2); }
.hm-head {
  display: flex; align-items: center; gap: .6rem;
  padding: .85rem 1.2rem;
  background: linear-gradient(120deg, #0A2038 0%, #123A5C 100%); color: #fff;
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.hm-dot {
  width: 9px; height: 9px; border-radius: 50%; background: var(--clay); flex: none;
  box-shadow: 0 0 0 4px rgba(188,107,60,.18);
}
.hm-title { font-family: var(--serif); font-weight: 600; font-size: .95rem; letter-spacing: .01em; }
.hm-tag {
  margin-left: auto; font-family: var(--serif); font-style: italic;
  font-size: .82rem; color: #D9A276; white-space: nowrap;
}
.hm-svg { width: 100%; height: auto; display: block; }
.hm-route { animation: hmDash 18s linear infinite; }
.hm-route-shop { animation-duration: 24s; }
@keyframes hmDash { to { stroke-dashoffset: -300; } }
.hm-pins .hm-halo {
  animation: hmHalo 3s var(--ease) infinite;
  transform-origin: center; transform-box: fill-box;
}
.hm-pin:nth-child(2) .hm-halo { animation-delay: .75s; }
.hm-pin:nth-child(3) .hm-halo { animation-delay: 1.5s; }
.hm-pin:nth-child(4) .hm-halo { animation-delay: 2.25s; }
@keyframes hmHalo {
  0% { transform: scale(.7); opacity: .9; }
  65%, 100% { transform: scale(2.4); opacity: 0; }
}
.hm-legend {
  display: flex; flex-wrap: wrap; gap: .5rem;
  padding: .85rem 1.1rem 1rem;
  background: linear-gradient(180deg, var(--paper), #FAF5EC);
  border-top: 1px solid var(--line);
}
.hm-chip {
  display: inline-flex; align-items: center; gap: .45rem;
  font-size: .72rem; font-weight: 700; color: var(--ink);
  background: #fff; border: 1px solid var(--line); border-radius: 999px;
  padding: .3rem .75rem; box-shadow: 0 1px 2px rgba(15,44,74,.06);
}
.hm-key { width: 14px; height: 4px; border-radius: 2px; display: inline-block; }
.hm-key-beach { background: var(--clay); }
.hm-key-shop { background: var(--sea); }
.hm-key-canal { background: #7FB0AA; }
.hm-key-access { background: #23425F; }
.hm-key-pin { width: 9px; height: 9px; border-radius: 50%; background: var(--clay); border: 2px solid #fff; box-shadow: 0 0 0 1px var(--line); }

/* how gwendolyn can help — 5 path cards */
.help-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: clamp(1rem, 2.4vw, 1.6rem);
}
.help-card {
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-md);
  padding: 1.5rem 1.5rem 1.35rem; display: flex; flex-direction: column;
  box-shadow: var(--shadow-sm);
  transition: transform .25s var(--ease), box-shadow .25s var(--ease), border-color .25s ease;
}
.help-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: var(--line-cool); }
.help-ic {
  width: 3rem; height: 3rem; margin-bottom: .7rem;
  background: linear-gradient(180deg, var(--paper), var(--sea-tint));
  border: 1px solid var(--line-cool); border-radius: var(--r-md);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.72);
}
.help-ic.ui-icon svg { width: 1.45rem; height: 1.45rem; }
.help-card:hover .help-ic.ui-icon { color: var(--clay-deep); }
.help-card h3 { font-size: 1.14rem; margin-bottom: .45rem; }
.help-card p { font-size: .92rem; margin-bottom: 1rem; }
.help-go {
  margin-top: auto; font-size: .84rem; font-weight: 800; letter-spacing: .01em;
  color: var(--clay-deep); align-self: flex-start;
  transition: color .2s ease, transform .25s var(--ease);
}
.help-card:hover .help-go, .help-card:focus-visible .help-go { color: var(--clay); transform: translateX(4px); }
.help-ic.ui-icon svg { transition: transform .25s var(--ease); }
.help-card:hover .help-ic.ui-icon svg { transform: translateY(-2px); }

/* process strip beneath the help paths */
.process-strip { margin-top: clamp(2.4rem, 5vw, 3.6rem); }
.process-label {
  font-size: .72rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase;
  color: var(--sea-deep); margin-bottom: 1.6rem;
}

/* ---------- local proof strip: icon cards ---------- */
.local-proof {
  position: relative; overflow: hidden;
  background: linear-gradient(180deg, var(--paper) 0%, #FAF5EB 100%);
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
  padding: clamp(2rem, 4vw, 2.8rem) 0;
}
.local-proof::before { /* faint coastal glow, echoes the hero */
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(560px 220px at 8% 0%, rgba(47,107,101,.06), transparent 60%),
    radial-gradient(560px 220px at 94% 100%, rgba(188,107,60,.06), transparent 60%);
}
.local-proof .wrap { position: relative; }
.proof-label {
  display: inline-flex; align-items: center; gap: .55rem;
  font-size: .72rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase;
  color: var(--sea-deep); margin-bottom: 1.2rem;
}
.proof-label::before { content: ""; width: 26px; height: 1.5px; background: currentColor; opacity: .6; }
.proof-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: .8rem 1rem; }
.proof-item {
  position: relative; display: flex; align-items: flex-start; gap: .8rem;
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-md);
  padding: .95rem 1.05rem; box-shadow: var(--shadow-sm); overflow: hidden;
  transition: transform .25s var(--ease), box-shadow .25s var(--ease), border-color .25s ease;
}
.proof-item::before { /* accent bar draws in on hover */
  content: ""; position: absolute; inset: 0 auto 0 0; width: 3px;
  background: linear-gradient(180deg, var(--sea), var(--clay));
  transform: scaleY(0); transform-origin: top;
  transition: transform .3s var(--ease);
}
.proof-item:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: var(--line-cool); }
.proof-item:hover::before { transform: scaleY(1); }
.proof-ic {
  flex: none; width: 2.35rem; height: 2.35rem; margin-top: .1rem;
  background: linear-gradient(180deg, var(--paper), var(--sea-tint));
  border: 1px solid var(--line-cool); border-radius: 999px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.72);
  transition: color .25s ease, transform .25s var(--ease);
}
.proof-ic.ui-icon svg { width: 1.2rem; height: 1.2rem; }
.proof-item:hover .proof-ic { color: var(--clay-deep); transform: translateY(-2px) rotate(-4deg); }
.proof-copy { min-width: 0; }
.proof-item strong {
  display: block; font-family: var(--serif); font-weight: 600; font-size: .98rem;
  color: var(--ink); line-height: 1.3;
}
.proof-item small { display: block; font-size: .78rem; color: var(--soft); line-height: 1.45; margin-top: .15rem; }

/* ---------- generic sections ---------- */
.section { padding: var(--section-pad) 0; }
.section-alt { background: var(--sand-deep); }
.section-head { max-width: 700px; margin-bottom: clamp(1.8rem, 4vw, 2.8rem); }
.section-head.center { margin-inline: auto; text-align: center; }
.section-head.center .eyebrow { justify-content: center; }
.section-head.narrow { max-width: 430px; margin-bottom: 0; }
.section h2 { font-size: var(--fs-h2); text-wrap: balance; }
.lede { font-size: var(--fs-lede); margin-top: .8rem; }
.lede.light { color: #C0CDDE; }
.section-cta { margin-top: 2.2rem; }
.section-cta.left { margin-top: 1.6rem; }

/* ---------- how it works ---------- */
.steps {
  list-style: none; margin: 0; padding: 0; position: relative;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(1.4rem, 3vw, 2.4rem);
}
.steps::before {
  content: ""; position: absolute; left: 8px; right: 8px; top: 1.05rem; height: 1px;
  background: var(--line);
}
.steps::after {
  content: ""; position: absolute; left: 8px; top: 1.05rem; height: 1px; width: 0;
  background: linear-gradient(90deg, var(--sea), var(--clay));
  transition: width 1.6s var(--ease) .2s;
}
.steps.in-view::after { width: calc(100% - 16px); }
.step { position: relative; padding-top: 2.4rem; }
.step-num {
  position: absolute; top: 0; left: 0; z-index: 1;
  font-family: var(--serif); font-weight: 600; font-size: 1.5rem; font-style: italic;
  color: var(--clay-deep); background: inherit; line-height: 1;
  background: var(--sand); padding-right: .7rem;
}
.section-alt .step-num { background: var(--sand-deep); }
.step h3 { font-size: 1.12rem; margin-bottom: .4rem; }
.step p { font-size: .93rem; }

/* ---------- main offer: Remote Buyer Confidence Pack ---------- */
.main-offer {
  display: grid; grid-template-columns: 1.3fr 1fr; gap: clamp(1.6rem, 4vw, 3.2rem);
  align-items: stretch;
  background: var(--navy-deep); color: #C7D3E2;
  border-radius: var(--r-lg); box-shadow: var(--shadow-lg);
  padding: clamp(1.8rem, 4vw, 3.2rem);
  position: relative; overflow: hidden;
}
.main-offer::before { /* soft dawn glow */
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(640px 300px at 90% -20%, rgba(188,107,60,.22), transparent 60%),
    radial-gradient(520px 300px at -8% 110%, rgba(47,107,101,.2), transparent 60%);
}
.mo-copy { position: relative; display: flex; flex-direction: column; }
.main-offer h2 { color: #fff; font-size: clamp(1.7rem, 3.2vw, 2.4rem); }
.mo-promise { font-family: var(--serif); font-style: italic; color: #E4B58C; font-size: clamp(1.1rem, 2vw, 1.35rem); margin: .7rem 0 .4rem; }
.main-offer .lede { color: #B4C2D4; font-size: 1rem; }
.mo-foot { display: flex; align-items: center; gap: 1.2rem; flex-wrap: wrap; margin: 1.6rem 0 .5rem; }
.mo-price { font-family: var(--serif); font-weight: 600; color: #fff; font-size: 1.9rem; }
.main-offer .svc-note { color: #8FA2B8; border-left-color: rgba(228,181,140,.4); }
.mo-card {
  position: relative;
  background: rgba(255,255,255,.055); border: 1px solid rgba(255,255,255,.13);
  border-radius: var(--r-md); padding: 1.5rem 1.6rem;
  display: flex; flex-direction: column; justify-content: center;
}
.mo-card h3 { color: #fff; font-size: 1.08rem; margin-bottom: .9rem; }
.mo-list { list-style: none; padding: 0; display: grid; gap: .75rem; }
.mo-list li { position: relative; padding-left: 1.5rem; font-size: .92rem; color: #D4DEEA; }
.mo-list li::before {
  content: ""; position: absolute; left: 0; top: .5rem; width: 7px; height: 7px;
  border-radius: 50%; background: var(--clay);
}

/* free lead magnet strip */
.lead-magnet {
  display: flex; align-items: center; justify-content: space-between; gap: 1.4rem; flex-wrap: wrap;
  margin-top: 1.2rem; background: var(--paper); border: 1px solid var(--line);
  border-radius: var(--r-md); padding: 1.3rem 1.6rem; box-shadow: var(--shadow-sm);
}
.lm-copy { max-width: 64ch; }
.lm-tag {
  display: inline-block; color: var(--sea-deep); border: 1px solid var(--sea);
  font-size: .66rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase;
  padding: .22rem .6rem; border-radius: var(--r-sm); margin-bottom: .5rem;
}
.lead-magnet h3 { font-size: 1.18rem; margin-bottom: .3rem; }
.lead-magnet p { font-size: .93rem; }

/* ---------- owner ---------- */
.owner-grid { display: grid; grid-template-columns: .82fr 1.5fr; gap: clamp(2rem, 5vw, 4rem); align-items: center; }
.owner-photo-wrap { position: relative; justify-self: center; width: 100%; max-width: 340px; }
.owner-photo {
  width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 20%;
  border-radius: var(--r-md); box-shadow: var(--shadow-lg);
}
/* Elegant monogram placeholder until a real headshot goes in. */
.owner-photo--placeholder {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .5rem;
  background:
    radial-gradient(400px 260px at 80% 0%, rgba(188,107,60,.14), transparent 60%),
    linear-gradient(165deg, #FDFBF6 0%, #EDE4D3 100%);
  border: 1px solid var(--line);
}
.owner-mono {
  font-family: var(--serif); font-size: 5.4rem; font-weight: 600; font-style: italic;
  color: var(--navy); line-height: 1;
}
.owner-mono-sub {
  font-size: .7rem; font-weight: 800; letter-spacing: .18em; text-transform: uppercase;
  color: var(--soft);
}
.owner-badge {
  position: absolute; bottom: -14px; left: 50%; transform: translateX(-50%);
  background: var(--sea-deep); color: #fff; font-size: .68rem; font-weight: 800;
  letter-spacing: .12em; text-transform: uppercase; padding: .45rem 1rem;
  border-radius: var(--r-sm); white-space: nowrap; box-shadow: var(--shadow-md);
}
.owner-copy h2 { font-size: clamp(1.7rem, 3.2vw, 2.35rem); margin-bottom: .9rem; }
.owner-copy p { margin-bottom: .85rem; max-width: 58ch; }
.owner-copy em { color: var(--sea-deep); }
.owner-points { list-style: none; margin: .6rem 0 1.4rem; padding: 0; display: grid; gap: .55rem; }
.owner-points li { position: relative; padding-left: 1.5rem; font-size: .95rem; color: var(--ink); font-weight: 500; }
.owner-points li::before {
  content: ""; position: absolute; left: 0; top: .52rem; width: 8px; height: 8px;
  border-radius: 50%; background: var(--clay);
}
.owner-actions { display: flex; flex-wrap: wrap; gap: .7rem; }

/* compact profile variant */
.owner-compact { align-items: center; }
.owner-compact .owner-photo-wrap { max-width: 250px; }
.owner-compact .owner-copy h2 { margin-bottom: .35rem; }
.owner-role {
  font-family: var(--serif); font-style: italic; color: var(--sea-deep);
  font-size: 1.02rem; margin-bottom: .8rem;
}
.owner-chips { list-style: none; margin: .9rem 0 1.4rem; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem; }
.owner-chips li {
  font-size: .76rem; font-weight: 700; color: var(--sea-deep);
  background: var(--sea-tint); border: 1px solid var(--line-cool);
  border-radius: 999px; padding: .34rem .85rem;
}

/* start tiles: visual bottom grid */
.tile-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(.9rem, 2vw, 1.3rem); }
.tile {
  position: relative; display: flex; flex-direction: column; gap: .3rem;
  padding: 1.5rem 1.4rem 1.35rem;
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-md);
  box-shadow: var(--shadow-sm); overflow: hidden;
  transition: transform .25s var(--ease), box-shadow .25s var(--ease), border-color .25s ease;
}
.tile::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 4px;
  background: linear-gradient(90deg, var(--sea), var(--clay));
  opacity: 0; transition: opacity .25s ease;
}
.tile:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: var(--line-cool); }
.tile:hover::before { opacity: 1; }
.tile-ic.ui-icon {
  width: 2.55rem; height: 2.55rem; margin-bottom: .45rem;
  background: var(--sand); border: 1px solid var(--line); border-radius: var(--r-sm);
  color: var(--navy);
}
.tile-ic.ui-icon svg { width: 1.35rem; height: 1.35rem; }
.tile:hover .tile-ic.ui-icon { color: var(--clay-deep); border-color: var(--line-cool); }
.tile h3 { font-size: 1.16rem; }
.tile-go {
  font-size: .84rem; font-weight: 700; color: var(--sea-deep); margin-top: .2rem;
  align-self: flex-start; transition: color .2s ease, transform .25s var(--ease);
}
.tile:hover .tile-go, .tile:focus-visible .tile-go { color: var(--clay); transform: translateX(4px); }
.tile-ic.ui-icon svg { transition: transform .25s var(--ease); }
.tile:hover .tile-ic.ui-icon svg { transform: translateY(-2px); }
.tile-map { background: linear-gradient(135deg, var(--sea-tint), var(--paper) 70%); }
.tile-map h3 { color: var(--sea-deep); }

/* ---------- who I help (buyers / sellers / investors) ---------- */
.who-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1.2rem, 3vw, 2.4rem); }
.who-col {
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-md);
  padding: 1.8rem 1.7rem 1.6rem; display: flex; flex-direction: column;
  box-shadow: var(--shadow-sm);
  transition: transform .25s var(--ease), box-shadow .25s var(--ease);
}
.who-col:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.who-col .eyebrow { margin-bottom: .6rem; }
.who-col h3 { font-size: 1.35rem; margin-bottom: .5rem; }
.who-col > p { font-size: .93rem; margin-bottom: 1rem; }
.who-list { list-style: none; margin: 0 0 1.4rem; padding: 0; display: grid; gap: .6rem; flex: 1; }
.who-list li { position: relative; padding-left: 1.4rem; font-size: .9rem; }
.who-list li strong { color: var(--ink); }
.who-list li::before {
  content: ""; position: absolute; left: 0; top: .55rem; width: 7px; height: 7px;
  border-radius: 50%; background: var(--sea);
}
.who-col .btn { align-self: flex-start; }
.who-fine { margin-top: 1.6rem; }

/* disclaimers */
.disclaimer {
  margin-top: 1.8rem; font-size: .8rem; color: #75808D;
  border-left: 2px solid var(--clay); padding: .4rem 0 .4rem 1rem; max-width: 76ch;
  line-height: 1.6;
}

/* ---------- featured services ---------- */
.svc-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.3rem; }
.svc-card {
  position: relative; background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-md);
  padding: 1.8rem 1.6rem 1.5rem; box-shadow: var(--shadow-sm); display: flex; flex-direction: column;
  transition: transform .25s var(--ease), box-shadow .25s var(--ease), border-color .25s ease;
}
.svc-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: #CDC4B0; }
.svc-featured { border-color: var(--sea); box-shadow: var(--shadow-md); }
.svc-flag {
  position: absolute; top: 0; left: 1.6rem; transform: translateY(-50%);
  background: var(--sea-deep); color: #fff;
  font-size: .64rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase;
  padding: .32rem .7rem; border-radius: var(--r-sm);
}
.svc-num {
  font-family: var(--serif); font-style: italic; font-weight: 600;
  color: var(--clay-deep); font-size: 1.3rem; margin-bottom: .7rem;
}
.svc-card h3 { font-size: 1.24rem; margin-bottom: .55rem; }
.svc-card > p { font-size: .93rem; }
.svc-note { font-size: .8rem; color: #75808D; margin-top: .8rem; padding-left: .85rem; border-left: 2px solid var(--line); line-height: 1.55; }
.svc-foot {
  display: flex; align-items: center; justify-content: space-between; gap: .8rem;
  margin-top: auto; padding-top: 1.4rem; flex-wrap: wrap;
}
.svc-price { font-family: var(--serif); font-weight: 600; color: var(--ink); font-size: 1.12rem; }

/* ---------- Listing Virtual Tour Studio ---------- */
.tour-split { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem; margin-bottom: 1.8rem; }
.tour-split-card {
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-md);
  padding: 1.4rem 1.5rem; box-shadow: var(--shadow-sm);
}
.tour-split-card h3 { font-size: 1.12rem; margin: .55rem 0 .4rem; }
.tour-split-card p { font-size: .92rem; }
.ts-label {
  display: inline-block; font-size: .66rem; font-weight: 800; letter-spacing: .12em;
  text-transform: uppercase; padding: .26rem .6rem; border-radius: var(--r-sm);
}
.ts-teal { background: var(--sea-tint); color: var(--sea-deep); }
.ts-orange { background: var(--clay-tint); color: var(--clay-deep); }

.card-grid { display: grid; gap: 1.2rem; }
.cols-4 { grid-template-columns: repeat(4, 1fr); }
.tour-card {
  position: relative; background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-md);
  padding: 1.5rem 1.4rem 1.3rem; box-shadow: var(--shadow-sm); display: flex; flex-direction: column;
  transition: transform .25s var(--ease), box-shadow .25s var(--ease);
}
.tour-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.tour-card h3 { font-size: 1.06rem; margin-bottom: .5rem; }
.tour-card p { font-size: .89rem; flex: 1; }
.tour-featured { border-color: var(--sea); box-shadow: var(--shadow-md); }
.tour-foot { display: flex; align-items: center; justify-content: space-between; gap: .7rem; flex-wrap: wrap; margin-top: 1.2rem; }

/* ---------- sample preview report ---------- */
.report-grid { display: grid; grid-template-columns: .9fr 1.1fr; gap: clamp(1.8rem, 4vw, 3.4rem); align-items: center; }
.report-mock {
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-lg);
  box-shadow: var(--shadow-lg); overflow: hidden; max-width: 560px; justify-self: center; width: 100%;
}
.rm-head { display: flex; align-items: center; gap: .6rem; padding: .85rem 1.2rem; background: var(--navy-deep); color: #fff; }
.rm-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--clay); flex: none; }
.rm-title { font-family: var(--serif); font-weight: 600; font-size: .95rem; }
.rm-live {
  margin-left: auto; font-size: .64rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
  color: #9BD9B4; animation: rmpulse 2.6s ease-in-out infinite;
}
@keyframes rmpulse { 0%, 100% { opacity: 1; } 50% { opacity: .4; } }
.rm-body { padding: 1.2rem 1.3rem 1.4rem; display: grid; gap: .75rem; }
.rm-row { display: flex; gap: .8rem; align-items: baseline; padding-bottom: .65rem; border-bottom: 1px dashed var(--line); }
.rm-k { font-size: .66rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--sea-deep); flex: none; }
.rm-v { font-size: .88rem; color: var(--ink); font-weight: 600; }
.rm-block { background: var(--sand); border: 1px solid var(--line); border-radius: var(--r-sm); padding: .8rem .95rem; }
.rm-block h4 { font-size: .95rem; margin-bottom: .2rem; }
.rm-block p { font-size: .82rem; }

/* ---------- area guide cards ---------- */
.guide-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.3rem; }
.guide-card {
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden;
  box-shadow: var(--shadow-sm); display: flex; flex-direction: column;
  transition: transform .25s var(--ease), box-shadow .25s var(--ease);
}
.guide-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.guide-card:hover .guide-thumb::after { transform: scaleX(1); }
.guide-thumb {
  position: relative; aspect-ratio: 16 / 8; display: flex; align-items: flex-end;
  padding: 1rem 1.2rem; overflow: hidden; background: var(--navy);
}
.guide-thumb-img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  transform: scale(1.01); transition: transform .45s var(--ease), filter .45s var(--ease);
}
.guide-thumb::before {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(180deg, rgba(10,32,56,.04) 0%, rgba(10,32,56,.18) 48%, rgba(10,32,56,.72) 100%);
}
.guide-thumb::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; z-index: 3; height: 3px;
  background: var(--clay); transform: scaleX(0); transform-origin: left;
  transition: transform .35s var(--ease);
}
.guide-thumb .gt-label {
  position: relative; z-index: 2; font-family: var(--serif); font-style: italic; font-weight: 600;
  color: #fff; font-size: 1.15rem; text-shadow: 0 2px 10px rgba(10,32,56,.4);
}
.guide-card:hover .guide-thumb-img { transform: scale(1.055); filter: saturate(1.06); }
.gt-pc { background: linear-gradient(160deg, #35706A 0%, #16394F 78%); }
.gt-fb { background: linear-gradient(160deg, #C98A55 0%, #7A4526 45%, #16394F 110%); }
.gt-sl { background: linear-gradient(160deg, #2E5375 0%, #0F2C4A 80%); }
.guide-body { padding: 1.2rem 1.35rem 1.4rem; display: flex; flex-direction: column; gap: .55rem; flex: 1; }
.guide-body h3 { font-size: 1.18rem; }
.guide-body p { font-size: .92rem; flex: 1; }
.guide-body .btn { align-self: flex-start; margin-top: .4rem; }

/* ---------- local tools / widget dashboard ---------- */
.widget-dash {
  background: var(--paper); border: 1px solid var(--line);
  border-radius: var(--r-lg); box-shadow: var(--shadow-md);
  padding: clamp(1rem, 2.5vw, 1.6rem); margin-top: 1.8rem;
}
.seg-tabs {
  display: flex; flex-wrap: wrap; gap: .1rem;
  border-bottom: 1px solid var(--line); margin-bottom: 1.4rem;
}
.seg-tab {
  position: relative;
  flex: 0 1 auto; display: inline-flex; align-items: center; gap: .45rem;
  padding: .75rem 1rem .85rem; border: 0; background: transparent;
  font-weight: 700; font-size: .89rem; color: var(--text); white-space: nowrap;
  transition: color .2s ease;
}
.seg-tab::after {
  content: ""; position: absolute; left: .6rem; right: .6rem; bottom: -1px; height: 2px;
  background: var(--sea-deep); transform: scaleX(0); transition: transform .25s var(--ease);
}
.seg-tab .seg-ic {
  width: 1.45rem; height: 1.45rem;
  background: var(--sand); border: 1px solid var(--line); border-radius: 999px;
  color: var(--sea-deep);
}
.seg-tab .seg-ic svg { width: .95rem; height: .95rem; stroke-width: 2; }
.seg-tab:hover { color: var(--ink); }
.seg-tab:hover .seg-ic { color: var(--clay-deep); }
.seg-tab.active { color: var(--sea-deep); }
.seg-tab.active .seg-ic { background: var(--sea-tint); border-color: var(--line-cool); }
.seg-tab.active::after { transform: scaleX(1); }

.widget-panel { animation: wxfade .3s var(--ease); }
.widget-panel[hidden] { display: none; }
@keyframes wxfade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

.widget-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: .5rem; }
.widget-title { font-size: 1.3rem; }
.widget-sub { font-size: .9rem; margin-top: .2rem; max-width: 48ch; }
.widget-fineprint { font-size: .77rem; color: var(--soft); margin: .3rem 0 1rem; }

.badge {
  display: inline-flex; align-items: center; gap: .35rem; font-size: .68rem; font-weight: 800;
  letter-spacing: .08em; text-transform: uppercase; padding: .32rem .65rem; border-radius: var(--r-sm);
}
.badge-ready { background: var(--sea-tint); color: var(--sea-deep); border: 1px solid #C2D8D3; }
.badge-ready.sm { font-size: .62rem; padding: .2rem .5rem; }
.badge-live { background: #FBEBE9; color: #A93B34; border: 1px solid #EEC2BD; }

.widget-map { width: 100%; height: 380px; background: var(--sand-deep); }

/* premium framing shared by both Leaflet maps (Area Map + Video Map) */
.map-shell {
  position: relative; border-radius: var(--r-lg); overflow: hidden;
  border: 1px solid var(--line); background: var(--paper); box-shadow: var(--shadow-md);
}
.map-shell::after { /* inner ring + soft vignette, same treatment as the hero map */
  content: ""; position: absolute; inset: 0; z-index: 500; border-radius: inherit; pointer-events: none;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.3), inset 0 -26px 48px rgba(15,44,74,.06);
}
.map-shell-head {
  display: flex; align-items: center; gap: .6rem;
  padding: .7rem 1.1rem;
  background: linear-gradient(120deg, #0A2038 0%, #123A5C 100%); color: #fff;
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.map-shell-title { font-family: var(--serif); font-weight: 600; font-size: .92rem; letter-spacing: .01em; }
.map-shell-tag {
  margin-left: auto; font-family: var(--serif); font-style: italic;
  font-size: .8rem; color: #D9A276; white-space: nowrap;
}
.map-legend {
  display: flex; flex-wrap: wrap; gap: .45rem;
  padding: .7rem .95rem .8rem;
  background: linear-gradient(180deg, var(--paper), #FAF5EC);
  border-top: 1px solid var(--line);
}
/* warm, muted tile tone so raw OSM tiles sit inside the coastal palette */
.widget-map .leaflet-tile { filter: saturate(.82) sepia(.08) contrast(1.02); }
.widget-map .leaflet-control-zoom a { color: var(--navy); }
.widget-map .leaflet-control-attribution { font-size: 10px; background: rgba(255,253,249,.85); }

/* custom map pins (divIcon) — matches the hero map pin language */
.bb-pin-wrap { background: transparent; border: 0; }
.bb-pin {
  position: relative; display: block; width: 18px; height: 18px; border-radius: 50%;
  background: var(--pin, #BC6B3C); border: 2.5px solid #fff;
  box-shadow: 0 2px 6px rgba(15,44,74,.4);
}
.bb-pin-halo {
  position: absolute; inset: -3px; border-radius: 50%;
  border: 2px solid var(--pin, #BC6B3C);
  animation: bbHalo 3s var(--ease) infinite;
}
@keyframes bbHalo {
  0% { transform: scale(.7); opacity: .9; }
  65%, 100% { transform: scale(2); opacity: 0; }
}
.widget-map .leaflet-popup-content h4 { font-family: var(--serif); color: var(--ink); font-size: 1rem; margin-bottom: .3rem; }
.widget-map .leaflet-popup-content p { font-size: .85rem; color: var(--text); margin-bottom: .6rem; }
.widget-map .leaflet-popup-content .btn { font-size: .8rem; padding: .5rem .9rem; }
.map-popup-actions {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
}
.map-note { font-size: .79rem; color: var(--soft); margin-top: .8rem; }
.tool-link { display: inline-block; margin-top: .8rem; font-size: .87rem; font-weight: 700; color: var(--sea-deep); border-bottom: 1px solid transparent; transition: border-color .2s ease; }
.tool-link:hover { border-bottom-color: var(--sea); }
.tool-fallback { color: #75808D; } .tool-fallback a { color: var(--sea-deep); font-weight: 700; }
.wx-skeleton { color: var(--soft); font-style: italic; padding: 2.2rem 0; text-align: center; }

/* widget 1: address snapshot */
.snapshot-grid {
  display: grid;
  grid-template-columns: minmax(260px, .82fr) minmax(0, 1.18fr);
  gap: 1rem;
  align-items: start;
}
.snapshot-form,
.compare-form,
.local-access-tools,
.beach-quality {
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--sand);
  padding: 1rem 1.1rem;
}
.snapshot-field {
  display: block;
  min-width: 0;
  font-size: .8rem;
  font-weight: 800;
  color: var(--ink);
}
.snapshot-input-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: .65rem;
  align-items: end;
  margin-top: .35rem;
}
.snapshot-input-row input,
.snapshot-field input,
.compare-note {
  width: 100%;
  min-width: 0;
  font: inherit;
  font-size: .92rem;
  color: var(--ink);
  padding: .68rem .78rem;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: #fff;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.snapshot-input-row input:focus,
.snapshot-field input:focus,
.compare-note:focus {
  outline: none;
  border-color: var(--sea);
  box-shadow: 0 0 0 3px rgba(47,107,101,.14);
}
.snapshot-output {
  min-height: 260px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--paper);
  overflow: hidden;
}
.snapshot-empty {
  min-height: 260px;
  display: grid;
  place-items: center;
  align-content: center;
  gap: .45rem;
  text-align: center;
  padding: 1.6rem;
}
.snapshot-empty-ic.ui-icon {
  width: 2.8rem;
  height: 2.8rem;
  border-radius: var(--r-sm);
  background: var(--sea-tint);
  border: 1px solid var(--line-cool);
}
.snapshot-empty-ic.ui-icon svg { width: 1.45rem; height: 1.45rem; }
.snapshot-empty h4 { font-size: 1.06rem; }
.snapshot-empty p { max-width: 46ch; font-size: .88rem; }
.snapshot-report-head {
  display: flex;
  align-items: center;
  gap: .6rem;
  padding: .85rem 1rem;
  background: var(--navy-deep);
  color: #fff;
}
.snapshot-report-head h4 {
  color: #fff;
  font-size: 1rem;
}
.snapshot-pill {
  margin-left: auto;
  color: #E4B58C;
  font-size: .65rem;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.snapshot-report-body {
  display: grid;
  gap: .95rem;
  padding: 1rem;
}
.snapshot-map-preview {
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--sand);
}
.snapshot-map-preview iframe {
  display: block;
  width: 100%;
  min-height: 210px;
  border: 0;
  background: var(--sand-deep);
}
.snapshot-map-preview .snapshot-note {
  padding: .55rem .7rem;
}
.snapshot-address {
  font-family: var(--serif);
  font-size: 1.12rem;
  color: var(--ink);
  font-weight: 600;
  overflow-wrap: anywhere;
}
.snapshot-note,
.snapshot-disclaimer,
.compare-disclaimer {
  font-size: .78rem;
  color: #75808D;
  line-height: 1.6;
}
.snapshot-links,
.compare-links {
  display: grid;
  gap: .2rem;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.snapshot-links a,
.compare-links a {
  display: flex;
  justify-content: space-between;
  gap: .75rem;
  padding: .64rem .1rem;
  border-bottom: 1px solid var(--line);
  color: var(--ink);
  font-size: .86rem;
  font-weight: 700;
  overflow-wrap: anywhere;
  transition: color .2s ease, padding-left .2s var(--ease);
}
.snapshot-links a:last-child,
.compare-links a:last-child { border-bottom: 0; }
.snapshot-links a:hover,
.compare-links a:hover {
  color: var(--sea-deep);
  padding-left: .25rem;
}
.snapshot-links small,
.compare-links small {
  color: var(--soft);
  font-size: .72rem;
  font-weight: 700;
  white-space: nowrap;
}

/* live public-data facts (Census / FEMA / USGS) */
.facts-block { margin: .35rem 0 .9rem; }
.facts-loading { color: var(--soft); font-style: italic; font-size: .88rem; padding: .35rem 0; }
.facts-grid {
  display: grid;
  gap: 0;
  border: 1px solid var(--line);
  background: var(--sand);
  border-radius: var(--r-sm);
  padding: 0 .6rem;
}
.fact-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: .75rem;
  padding: .5rem 0;
  border-bottom: 1px solid var(--line);
  font-size: .88rem;
}
.fact-row:last-child { border-bottom: 0; }
.fact-label { color: var(--soft); font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; white-space: nowrap; }
.fact-value { color: var(--ink); font-weight: 600; text-align: right; }
.fact-badge {
  display: inline-block;
  font-size: .72rem;
  font-weight: 800;
  padding: .12rem .5rem;
  border-radius: 999px;
  white-space: nowrap;
}
.fact-badge-minimal { background: #E3EFE4; color: #2F6B3F; }
.fact-badge-moderate { background: #F6ECD8; color: #8A5A17; }
.fact-badge-high { background: #F6DFDA; color: #9A3B2B; }
.fact-zone-text { display: block; font-weight: 400; font-size: .78rem; color: var(--soft); }
.facts-sources { margin-top: .45rem; font-size: .72rem; color: var(--soft); }
.compare-card .fact-row { font-size: .82rem; }
.snapshot-prompts {
  display: grid;
  gap: .45rem;
  padding-left: 1.1rem;
}
.snapshot-prompts li {
  font-size: .84rem;
  color: var(--ink);
}
.snapshot-actions,
.compare-card-actions {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
}

/* widget 2: compare shortlist */
.compare-form { margin-bottom: 1rem; }
.compare-inputs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .75rem;
}
.compare-actions {
  display: flex;
  flex-wrap: wrap;
  gap: .55rem;
  margin-top: .85rem;
}
.compare-output { min-width: 0; }
.compare-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(245px, 1fr));
  gap: .85rem;
}
.compare-card {
  min-width: 0;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-sm);
  padding: 1rem;
}
.compare-card h4 {
  font-size: 1.02rem;
  margin-bottom: .3rem;
  overflow-wrap: anywhere;
}
.compare-card .compare-kicker {
  color: var(--sea-deep);
  font-size: .66rem;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.compare-links { margin: .75rem 0; }
.compare-note {
  display: block;
  min-height: 82px;
  resize: vertical;
  background: var(--sand);
}
.compare-send {
  margin-top: 1rem;
  padding: 1rem 1.1rem;
  border: 1px solid var(--line-cool);
  border-radius: var(--r-md);
  background: var(--sea-tint);
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  align-items: center;
  flex-wrap: wrap;
}
.compare-send p {
  font-size: .88rem;
  max-width: 58ch;
}

/* widget 3: property intake + local access map layer */
.local-access-tools {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  align-items: center;
  margin-bottom: .75rem;
}
.local-access-tools h4 { font-size: .98rem; }
.local-access-tools p { font-size: .8rem; }
.access-filters {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: .4rem;
}
.access-filter {
  padding: .42rem .72rem;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--paper);
  color: var(--ink);
  font-size: .78rem;
  font-weight: 800;
  transition: border-color .2s ease, background .2s ease, color .2s ease;
}
.access-filter:hover { border-color: var(--sea); }
.access-filter.active {
  background: var(--sea-deep);
  border-color: var(--sea-deep);
  color: #fff;
}

/* widget 1: property intake */
.pm-grid { display: grid; grid-template-columns: 1.5fr 1fr; gap: 1.4rem; align-items: start; }
.pm-map-label { font-family: var(--serif); color: var(--ink); font-size: 1rem; margin-bottom: .5rem; }
.idx-slot {
  border: 1px dashed #C9BFA9; border-radius: var(--r-md); padding: 1.2rem 1.3rem; margin-bottom: 1.2rem;
  text-align: center; background: var(--sand);
}
.idx-slot strong { display: block; font-family: var(--serif); color: var(--ink); font-size: 1.02rem; margin: .5rem 0 .3rem; }
.idx-slot p { font-size: .83rem; max-width: 44ch; margin-inline: auto; }
.pm-side { display: flex; flex-direction: column; gap: .9rem; }
.pm-intake { background: var(--sand); border: 1px solid var(--line); border-radius: var(--r-md); padding: 1.2rem 1.25rem 1.3rem; }
.pm-intake h4 { font-size: 1.04rem; margin-bottom: .25rem; }
.pm-intake-sub { font-size: .8rem; color: #75808D; margin-bottom: .9rem; }
.pm-field { display: block; font-size: .79rem; font-weight: 700; color: var(--ink); margin-bottom: .75rem; }
.pm-field select, .pm-field input {
  display: block; width: 100%; margin-top: .3rem; font: inherit; font-size: .9rem; color: var(--ink);
  padding: .58rem .72rem; border: 1px solid var(--line); border-radius: var(--r-sm); background: #fff;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.pm-field select:focus, .pm-field input:focus { outline: none; border-color: var(--sea); box-shadow: 0 0 0 3px rgba(47,107,101,.14); }
.pm-field-label { display: block; font-size: .79rem; font-weight: 700; color: var(--ink); margin-bottom: .45rem; }
.pm-checks { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: 1rem; }
.pm-checks label {
  display: inline-flex; align-items: center; gap: .35rem; font-size: .79rem; color: var(--ink);
  padding: .35rem .6rem; border: 1px solid var(--line); border-radius: var(--r-sm); background: #fff; cursor: pointer;
  transition: border-color .2s ease, background .2s ease;
}
.pm-checks input { width: 15px; height: 15px; accent-color: var(--sea); }
.pm-checks label:has(input:checked) { border-color: var(--sea); background: var(--sea-tint); }
.pm-submit { width: 100%; }
.pm-future { font-size: .77rem; color: #75808D; }
.pm-steps { background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-md); padding: 1.05rem 1.1rem; }
.pm-steps h4 { font-size: .98rem; margin-bottom: .55rem; }
.pm-steps ol { padding-left: 1.1rem; display: grid; gap: .35rem; }
.pm-steps li { font-size: .82rem; color: var(--ink); }

/* widget 2: weather */
.wx-dash { display: grid; gap: 1rem; }
.wx-current {
  display: grid; grid-template-columns: auto 1fr; gap: 1.2rem; align-items: center;
  background: linear-gradient(135deg, var(--navy-deep), var(--navy)); color: #fff;
  border-radius: var(--r-md); padding: 1.25rem 1.45rem;
}
.wx-big { display: flex; align-items: center; gap: .7rem; }
.wx-emoji.ui-icon {
  width: 3rem; height: 3rem;
  background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.16);
  border-radius: var(--r-md); color: var(--sand);
}
.wx-emoji.ui-icon svg { width: 2rem; height: 2rem; stroke-width: 1.7; }
.wx-temp { font-family: var(--serif); font-size: 2.7rem; font-weight: 600; line-height: 1; }
.wx-cond { font-size: .95rem; opacity: .92; margin-top: .2rem; }
.wx-feels { font-size: .78rem; opacity: .75; }
.wx-metrics { display: grid; grid-template-columns: repeat(auto-fit, minmax(92px, 1fr)); gap: .5rem; }
.wx-metric { background: rgba(255,255,255,.1); border-radius: var(--r-sm); padding: .5rem .6rem; }
.wx-metric .k { font-size: .62rem; text-transform: uppercase; letter-spacing: .06em; opacity: .78; }
.wx-metric .v { font-size: .95rem; font-weight: 700; }
.wx-chips { display: flex; flex-wrap: wrap; gap: .4rem; }
.wx-chip { font-size: .76rem; font-weight: 700; padding: .35rem .7rem; border-radius: var(--r-sm); background: var(--sea-tint); color: var(--sea-deep); }
.wx-chip.warn { background: var(--clay-tint); color: var(--clay-deep); }
.wx-chip.alert { background: #FBEBE9; color: #A93B34; }
.wx-block-label { font-size: .7rem; font-weight: 800; text-transform: uppercase; letter-spacing: .1em; color: var(--sea-deep); margin-bottom: .45rem; }
.wx-hourly { display: flex; gap: .5rem; overflow-x: auto; padding-bottom: .4rem; scrollbar-width: thin; }
.wx-hour { flex: 0 0 auto; width: 66px; text-align: center; background: var(--sand); border: 1px solid var(--line); border-radius: var(--r-sm); padding: .55rem .3rem; }
.wx-hour .h { font-size: .72rem; color: var(--ink); font-weight: 700; }
.wx-hour .e { display: flex; align-items: center; justify-content: center; height: 1.45rem; margin: .15rem 0; }
.wx-mini-ic.ui-icon { width: 1.3rem; height: 1.3rem; color: var(--sea-deep); }
.wx-mini-ic.ui-icon svg { width: 1.08rem; height: 1.08rem; stroke-width: 2; }
.wx-rain-ic.ui-icon { display: inline-flex; width: .75rem; height: .75rem; margin-right: .12rem; vertical-align: -.12em; color: var(--sea-deep); }
.wx-rain-ic.ui-icon svg { width: .72rem; height: .72rem; stroke-width: 2.1; }
.wx-hour .t { font-size: .84rem; font-weight: 700; color: var(--ink); }
.wx-hour .r { font-size: .68rem; color: var(--sea-deep); }
.wx-daily { display: grid; grid-template-columns: repeat(auto-fit, minmax(78px, 1fr)); gap: .5rem; }
.wx-dayc { background: var(--sand); border: 1px solid var(--line); border-radius: var(--r-sm); padding: .55rem .4rem; text-align: center; }
.wx-dayc .d { font-size: .68rem; font-weight: 800; text-transform: uppercase; color: var(--ink); }
.wx-dayc .e { display: flex; align-items: center; justify-content: center; height: 1.45rem; margin: .2rem 0; }
.wx-dayc .hi { font-size: .84rem; font-weight: 700; color: var(--ink); }
.wx-dayc .lo { font-size: .78rem; color: var(--soft); }
.wx-dayc .r { font-size: .66rem; color: var(--sea-deep); }
.wx-alert { background: #FBEBE9; border: 1px solid #EEC2BD; color: #8F2C26; font-size: .84rem; padding: .6rem .8rem; border-radius: var(--r-sm); margin-bottom: .9rem; }
.wx-alert strong { color: #741F1A; }
.wx-noalert { font-size: .78rem; color: var(--soft); margin-bottom: .9rem; }
.wx-updated { font-size: .72rem; color: var(--soft); }
.city-toggle { display: inline-flex; background: var(--sand); border: 1px solid var(--line); border-radius: var(--r-sm); padding: .2rem; }
.city-btn { border: 0; background: transparent; font-weight: 700; font-size: .81rem; color: var(--text); padding: .4rem .95rem; border-radius: 4px; transition: background .2s ease, color .2s ease; }
.city-btn.active { background: var(--paper); color: var(--sea-deep); box-shadow: var(--shadow-sm); }
.wx-links { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin-top: 1rem; }
.chip-link {
  font-size: .8rem; font-weight: 700; color: var(--ink); padding: .45rem .8rem;
  border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--sand);
  transition: border-color .2s ease, color .2s ease;
}
.chip-link:hover { border-color: var(--sea); color: var(--sea-deep); }

/* widget 3: tides */
.tide-dash { display: grid; gap: 1rem; }
.tide-next { display: grid; grid-template-columns: 1fr 1fr; gap: .8rem; }
.tide-next .tn { background: var(--sand); border: 1px solid var(--line); border-radius: var(--r-md); padding: 1rem 1.1rem; }
.tide-next .tn .k { font-size: .68rem; text-transform: uppercase; letter-spacing: .1em; font-weight: 800; color: var(--sea-deep); }
.tide-next .tn .when { font-size: 1.15rem; font-family: var(--serif); font-weight: 600; color: var(--ink); margin: .2rem 0; }
.tide-next .tn .ht { font-size: .82rem; }
.tide-station { font-size: .85rem; font-weight: 700; color: var(--ink); }
.tide-timeline { background: var(--sand); border: 1px solid var(--line); border-radius: var(--r-sm); margin-top: .35rem; overflow: hidden; padding: .3rem; }
.tide-timeline svg { width: 100%; height: 84px; display: block; }
.tide-chips { display: flex; flex-wrap: wrap; gap: .4rem; }
.tide-chip { font-size: .76rem; font-weight: 700; padding: .35rem .7rem; border-radius: var(--r-sm); background: var(--sea-tint); color: var(--sea-deep); }
.beach-quality {
  display: grid;
  gap: .75rem;
  margin-top: 1rem;
}
.bq-copy h4 { font-size: 1rem; margin-bottom: .25rem; }
.bq-copy p { font-size: .86rem; }
.bq-status {
  font-size: .84rem;
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--line);
  border-left: 3px solid var(--clay);
  border-radius: var(--r-sm);
  padding: .65rem .8rem;
}
.bq-status strong { color: var(--clay-deep); }
.bq-links {
  display: flex;
  flex-wrap: wrap;
  gap: .45rem;
}

/* widget 4: routes */
.route-cats { display: flex; flex-wrap: wrap; gap: .45rem; margin-bottom: 1rem; }
.route-cat {
  padding: .5rem .95rem; border-radius: var(--r-sm); border: 1px solid var(--line); background: var(--sand);
  font-weight: 700; font-size: .84rem; color: var(--ink);
  transition: background .2s ease, border-color .2s ease, color .2s ease;
}
.route-cat:hover { border-color: var(--sea); }
.route-cat.active { background: var(--sea-deep); border-color: var(--sea-deep); color: #fff; }
.route-links { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: .6rem; margin-bottom: 1.1rem; }
.route-link {
  display: flex; align-items: center; gap: .5rem; font-size: .85rem; font-weight: 600; color: var(--ink);
  padding: .7rem .9rem; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--sand);
  transition: border-color .2s ease, color .2s ease, transform .2s var(--ease);
}
.route-link:hover { border-color: var(--sea); color: var(--sea-deep); transform: translateY(-2px); }
.route-link .rpin { width: 1.2rem; height: 1.2rem; color: var(--clay); flex: 0 0 auto; }
.route-link .rpin svg { width: 1rem; height: 1rem; stroke-width: 2; }

/* widget 5: video map */
.vm-grid { display: grid; grid-template-columns: 220px 1fr; gap: 1rem; align-items: start; }
.vm-list { display: flex; flex-direction: column; gap: .35rem; max-height: 460px; overflow-y: auto; }
.vm-item {
  text-align: left; border: 1px solid var(--line); background: var(--sand); border-radius: var(--r-sm);
  padding: .55rem .7rem; font-size: .83rem; font-weight: 600; color: var(--ink);
  transition: border-color .2s ease, background .2s ease, color .2s ease;
}
.vm-item:hover { border-color: var(--sea); }
.vm-item.active { background: var(--sea-deep); border-color: var(--sea-deep); color: #fff; }
.vm-detail { margin-top: .9rem; }
.vm-card { display: grid; grid-template-columns: 168px 1fr; gap: 1rem; background: var(--sand); border: 1px solid var(--line); border-radius: var(--r-md); padding: 1rem; align-items: start; }
.vm-thumb { position: relative; aspect-ratio: 16/10; border-radius: var(--r-sm); overflow: hidden; background: #C7D6D2 center/cover no-repeat; cursor: pointer; border: 0; padding: 0; width: 100%; }
.vm-thumb iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.vm-card h4 { font-size: 1.06rem; margin-bottom: .3rem; }
.vm-card p { font-size: .86rem; margin-bottom: .7rem; }
.vm-card .vm-cta { display: flex; flex-wrap: wrap; gap: .5rem; }

/* ---------- area videos ---------- */
.video-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.2rem; }
.vcard {
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-md);
  overflow: hidden; box-shadow: var(--shadow-sm);
  transition: transform .25s var(--ease), box-shadow .25s var(--ease);
}
.vcard:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.vbody { padding: 1rem 1.15rem 1.15rem; }
.vbody h3 { font-size: 1.04rem; margin-bottom: .3rem; }
.vbody p { font-size: .88rem; }
.vcredit { display: block; font-size: .72rem; color: var(--soft); margin-top: .5rem; }

/* ---------- YouTube click-to-load facade ---------- */
.yt-facade {
  position: relative; display: block; width: 100%; aspect-ratio: 16/10; padding: 0; border: 0;
  background: var(--sand-deep) center/cover no-repeat; cursor: pointer; overflow: hidden;
}
.yt-facade::before {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(10,32,56,.06), rgba(10,32,56,.28));
  opacity: .55; transition: opacity .25s ease;
}
.yt-facade:hover::before { opacity: .85; }
.play {
  position: absolute; inset: 0; margin: auto; width: 58px; height: 58px; border-radius: 50%;
  background: rgba(255,253,249,.94); box-shadow: var(--shadow-md);
  display: grid; place-items: center;
  transition: transform .25s var(--ease);
}
.play::before {
  content: ""; width: 0; height: 0; margin-left: 4px;
  border-left: 16px solid var(--navy); border-top: 10px solid transparent; border-bottom: 10px solid transparent;
}
.yt-facade:hover .play { transform: scale(1.08); }
.yt-facade iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* ---------- FAQ ---------- */
.faq-wrap { max-width: 800px; }
.faq-list { border-top: 1px solid var(--line); }
.faq-item { border-bottom: 1px solid var(--line); }
.faq-item h3 { margin: 0; font-size: 1rem; }
.faq-q {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem; width: 100%;
  padding: 1.2rem .2rem; background: transparent; border: 0; text-align: left;
  font-family: var(--serif); font-weight: 600; font-size: 1.12rem; color: var(--ink);
  transition: color .2s ease;
}
.faq-q:hover { color: var(--sea-deep); }
.faq-ic { position: relative; flex: none; width: 20px; height: 20px; }
.faq-ic::before, .faq-ic::after {
  content: ""; position: absolute; inset: 0; margin: auto; background: var(--clay); border-radius: 2px;
  transition: transform .3s var(--ease);
}
.faq-ic::before { width: 14px; height: 2px; }
.faq-ic::after { width: 2px; height: 14px; }
.faq-q[aria-expanded="true"] .faq-ic::before { transform: rotate(180deg); }
.faq-q[aria-expanded="true"] .faq-ic::after { transform: rotate(90deg); }
.faq-a { padding: 0 .2rem 1.3rem; animation: faqopen .3s var(--ease); }
.faq-a[hidden] { display: none; }
.faq-a p { font-size: .95rem; max-width: 66ch; }
@keyframes faqopen { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }

/* ---------- intake form ---------- */
.form-shell {
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: clamp(1.8rem, 4vw, 3.2rem); box-shadow: var(--shadow-md);
}
.intake { margin-top: .4rem; }
.next-note {
  background: var(--sea-tint); border: 1px solid #CBDCD7; border-radius: var(--r-md);
  padding: .85rem 1.25rem; margin-bottom: 1.6rem;
}
.next-note p { font-size: .9rem; }
.next-note strong { color: var(--ink); }

.fs-checks { border: 0; padding: 0; margin: 0 0 1.8rem; }
.fs-checks legend { font-family: var(--serif); font-weight: 600; color: var(--ink); font-size: 1.2rem; margin-bottom: .9rem; padding: 0; }
/* collapsible checkbox groups — scannable, compact */
.check-group { border: 1px solid var(--line); border-radius: var(--r-md); background: var(--paper); margin-bottom: .6rem; overflow: hidden; }
.check-group summary {
  display: flex; align-items: center; gap: .6rem; list-style: none; cursor: pointer;
  padding: .78rem 1rem;
  font-size: .74rem; font-weight: 800; letter-spacing: .13em; text-transform: uppercase;
  color: var(--sea-deep); background: var(--sand);
  transition: background .2s ease, color .2s ease;
}
.check-group summary::-webkit-details-marker { display: none; }
.check-group summary:hover { background: var(--sea-tint); }
.check-group[open] summary { border-bottom: 1px solid var(--line); }
.cg-count {
  font-size: .68rem; font-weight: 800; letter-spacing: 0; text-transform: none;
  background: var(--sea-deep); color: #fff; border-radius: 999px;
  min-width: 1.35rem; height: 1.35rem; padding: 0 .4rem;
  display: inline-flex; align-items: center; justify-content: center;
}
.cg-count[hidden] { display: none; }
.cg-chev { position: relative; margin-left: auto; width: 10px; height: 10px; flex: none; }
.cg-chev::before {
  content: ""; position: absolute; inset: 0;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: rotate(45deg) scale(.72); transform-origin: center;
  transition: transform .25s var(--ease);
}
.check-group[open] .cg-chev::before { transform: rotate(225deg) scale(.72); }
.check-group .check-grid { padding: .85rem 1rem .95rem; }
.check-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: .55rem .9rem; }
.check {
  display: flex; align-items: flex-start; gap: .6rem; font-size: .92rem; color: var(--ink);
  padding: .62rem .8rem; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--sand);
  cursor: pointer; transition: border-color .2s ease, background .2s ease, transform .15s var(--ease);
}
.check:hover { border-color: var(--sea); }
.check:active { transform: scale(.985); }
.check input { width: 18px; height: 18px; accent-color: var(--sea-deep); margin-top: 1px; flex: none; }
.check:has(input:checked) { border-color: var(--sea); background: var(--sea-tint); }

.field-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem 1.1rem; }
.field, .check { min-width: 0; }
.check span { min-width: 0; overflow-wrap: break-word; }
.field input, .field select, .field textarea, .listing-links input { min-width: 0; max-width: 100%; }
.field { display: flex; flex-direction: column; gap: .35rem; }
.field.span-2 { grid-column: 1 / -1; }
.field label { font-size: .85rem; font-weight: 700; color: var(--ink); transition: color .2s ease; }
.field:focus-within > label { color: var(--sea-deep); }
.field .req { color: var(--clay-deep); }
.field input, .field select, .field textarea {
  font: inherit; font-size: .96rem; color: var(--ink);
  padding: .74rem .85rem; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--sand);
  transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
}
.field input::placeholder, .field textarea::placeholder { color: #A3ACB8; }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; border-color: var(--sea); box-shadow: 0 0 0 3px rgba(47,107,101,.14); background: #fff;
}
.field textarea { resize: vertical; }
.field input[aria-invalid="true"], .field select[aria-invalid="true"] {
  border-color: #C4483F; box-shadow: 0 0 0 3px rgba(196,72,63,.12);
}
.err { color: #AE3A32; font-size: .8rem; min-height: 0; }
.err:empty { display: none; }

.listing-links { display: grid; gap: .6rem; }
.listing-links input {
  font: inherit; font-size: .96rem; color: var(--ink);
  padding: .74rem .85rem; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--sand);
  transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
}
.listing-links input:focus { outline: none; border-color: var(--sea); box-shadow: 0 0 0 3px rgba(47,107,101,.14); background: #fff; }
.mini-checks { display: flex; flex-wrap: wrap; gap: .5rem; }
.mini {
  display: inline-flex; align-items: center; gap: .45rem; font-size: .87rem; color: var(--ink);
  padding: .45rem .75rem; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--sand); cursor: pointer;
  transition: border-color .2s ease, background .2s ease, transform .15s var(--ease);
}
.mini:hover { border-color: var(--sea); }
.mini:active { transform: scale(.97); }
.mini input { width: 16px; height: 16px; accent-color: var(--sea-deep); }
.mini:has(input:checked) { border-color: var(--sea); background: var(--sea-tint); }

.fs-agent { border: 1px solid var(--line); border-radius: var(--r-md); margin: 1.4rem 0 .4rem; background: var(--sand); overflow: hidden; }
.fs-agent summary {
  display: flex; align-items: center; gap: .6rem; list-style: none; cursor: pointer;
  padding: .95rem 1.4rem;
  font-family: var(--serif); font-weight: 600; color: var(--ink); font-size: 1.05rem;
  transition: background .2s ease;
}
.fs-agent summary::-webkit-details-marker { display: none; }
.fs-agent summary:hover { background: var(--sand-deep); }
.fs-agent summary .cg-chev { color: var(--sea-deep); }
.fs-agent[open] summary { border-bottom: 1px solid var(--line); }
.fs-agent > .field-grid, .fs-agent > .svc-note { padding: 0 1.4rem; }
.fs-agent > .field-grid { padding-top: 1.2rem; }
.fs-agent > .svc-note { margin: .9rem 1.4rem 1.2rem; padding-left: .85rem; }

.form-foot { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; margin-top: 1.8rem; }
.form-status { font-size: .92rem; font-weight: 700; }
.form-status.ok { color: var(--sea-deep); }
.form-status.bad { color: #AE3A32; }

/* ---------- pricing ---------- */
.price-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.2rem; }
.price-grid-single { grid-template-columns: minmax(0, 430px); justify-content: center; }
.price {
  position: relative; background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-md);
  padding: 1.7rem 1.45rem 1.5rem; box-shadow: var(--shadow-sm); display: flex; flex-direction: column;
  transition: transform .25s var(--ease), box-shadow .25s var(--ease);
}
.price:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.price h3 { font-size: 1.1rem; min-height: 2.6em; }
.amount { font-family: var(--serif); font-weight: 600; font-size: 2.3rem; color: var(--ink); margin: .5rem 0 .2rem; }
.amount::before { content: ""; display: block; width: 30px; height: 2px; background: var(--clay); margin-bottom: .7rem; }
.price-desc { font-size: .88rem; flex: 1; margin-bottom: 1.2rem; }
.price .btn { align-self: stretch; }
.price-featured { background: var(--navy-deep); border-color: var(--navy-deep); box-shadow: var(--shadow-lg); }
.price-featured h3, .price-featured .amount { color: #fff; }
.price-featured .price-desc { color: #B4C2D4; }
.price-flag {
  position: absolute; top: 0; left: 1.45rem; transform: translateY(-50%);
  background: var(--clay); color: #fff; font-size: .64rem; font-weight: 800; letter-spacing: .1em;
  text-transform: uppercase; padding: .3rem .7rem; border-radius: var(--r-sm); white-space: nowrap;
}
.pay-note { text-align: center; font-size: .85rem; color: #75808D; margin-top: 1.6rem; }

/* ---------- office ---------- */
.office-grid { display: grid; grid-template-columns: .85fr 1.35fr; gap: clamp(1.4rem, 3vw, 2.2rem); align-items: stretch; }
.office-copy { display: flex; flex-direction: column; justify-content: center; gap: .7rem; }
.office-copy h3 { font-size: 1.32rem; }
.office-copy p { max-width: 44ch; }
.office-note { color: #75808D; font-size: .9rem; }
.office-actions { display: flex; flex-wrap: wrap; gap: .7rem; margin-top: .4rem; }
.office-map { min-height: 360px; border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden; background: var(--paper); box-shadow: var(--shadow-sm); }
.office-map iframe { width: 100%; height: 100%; min-height: 360px; border: 0; display: block; }

/* ---------- footer ---------- */
.site-footer { background: var(--navy-deep); color: #A9B8CB; padding: clamp(3rem, 6vw, 4.2rem) 0 2.2rem; }
.footer-grid { display: grid; grid-template-columns: 1.7fr 1fr 1.2fr .9fr 1.1fr; gap: 2rem; padding-bottom: 2.2rem; border-bottom: 1px solid rgba(255,255,255,.1); }
/* Navy footer: cream chip behind the logo so the dark wordmark stays readable. */
.footer-brand .brand-logo-stage { background: var(--sand); border-radius: var(--r-sm); padding: .55rem .7rem; box-sizing: content-box; }
.footer-tag { font-family: var(--serif); font-style: italic; color: #E4B58C; margin-top: .9rem; font-size: 1.05rem; }
.footer-col h4 { color: #fff; font-family: var(--sans); font-size: .74rem; letter-spacing: .16em; text-transform: uppercase; margin-bottom: .8rem; }
.footer-col p { font-size: .9rem; margin-bottom: .35rem; }
.footer-col a { transition: color .2s ease; }
.footer-col a:hover { color: #E4B58C; }
.footer-note { font-size: .77rem !important; color: #7488A0; }
.footer-disclaimer { font-size: .77rem; color: #7488A0; margin-top: 1.8rem; max-width: 100ch; line-height: 1.7; }
.footer-legal { font-size: .82rem; color: #5F7490; margin-top: 1rem; }

/* ---------- WhatsApp bubble ----------
   Hidden until the visitor scrolls past the hero (script.js adds .wa-show),
   so it never competes with the hero media. Phones use the CTA bar instead. */
.wa-chat {
  position: fixed; right: 18px; bottom: 18px; z-index: 150;
  display: inline-flex; align-items: center; gap: .65rem; max-width: min(300px, calc(100vw - 32px));
  background: #10614A; color: #fff; border-radius: var(--r-md); padding: .68rem .95rem .68rem .8rem;
  box-shadow: 0 16px 40px rgba(10,32,56,.3);
  opacity: 0; transform: translateY(14px); pointer-events: none;
  transition: opacity .35s var(--ease), transform .35s var(--ease), box-shadow .2s ease;
}
.wa-chat.wa-show { opacity: 1; transform: none; pointer-events: auto; }
.wa-chat:hover { box-shadow: 0 20px 48px rgba(10,32,56,.36); }
.wa-status { width: 10px; height: 10px; border-radius: 50%; background: #7CE8A0; box-shadow: 0 0 0 4px rgba(124,232,160,.16); flex: 0 0 auto; }
.wa-copy { display: grid; line-height: 1.2; }
.wa-copy strong { font-size: .88rem; }
.wa-copy small { color: rgba(255,255,255,.82); font-size: .71rem; }
body:has(.main-nav.open) .wa-chat { display: none; }

/* ---------- sticky mobile CTA bar ---------- */
.mobile-cta {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 150;
  display: none; gap: .6rem; align-items: stretch;
  padding: .6rem max(12px, env(safe-area-inset-right)) calc(.6rem + env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left));
  background: rgba(255,253,249,.95); backdrop-filter: blur(10px);
  border-top: 1px solid var(--line); box-shadow: 0 -10px 30px rgba(10,32,56,.12);
  transform: translateY(0); transition: transform .3s var(--ease);
}
.mobile-cta.hidden-by-form { transform: translateY(110%); }
.mc-wa {
  display: inline-flex; align-items: center; gap: .45rem; flex: none;
  background: #10614A; color: #fff; font-weight: 700; font-size: .85rem;
  padding: .7rem .95rem; border-radius: var(--r-sm);
}
.mc-main { flex: 1; }

/* ---------- fresh polish: heading underline draw ----------
   The gradient rule under each section h2 draws itself when the section
   scrolls into view. Fail-open: if JS never adds .reveal, it shows drawn. */
.section-head h2 { position: relative; padding-bottom: .55rem; }
.section-head h2::after {
  content: ""; position: absolute; left: 2px; bottom: 0; width: 52px; height: 3px;
  border-radius: 2px; background: linear-gradient(90deg, var(--clay), var(--sea));
  transform: scaleX(0); transform-origin: left;
  transition: transform .8s var(--ease) .25s;
}
.section-head.center h2::after { left: calc(50% - 26px); }
.in-view .section-head h2::after,
section:not(.reveal) .section-head h2::after { transform: scaleX(1); }

/* ---------- fresh polish: button shine sweep ---------- */
.btn { overflow: hidden; }
.btn-orange::before, .btn-teal::before {
  content: ""; position: absolute; top: 0; bottom: 0; left: -60%; width: 40%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.32), transparent);
  transform: skewX(-18deg); pointer-events: none;
  transition: transform .65s ease;
}
.btn-orange:hover::before, .btn-teal:hover::before { transform: skewX(-18deg) translateX(430%); }

/* ---------- fresh polish: cursor-follow glow on cards ----------
   script.js writes --mx / --my on pointermove; the glow fades in on hover. */
.help-card, .tile, .svc-card, .price, .tour-card, .guide-card, .proof-item { position: relative; }
.help-card::after, .tile::after, .svc-card::after, .price::after,
.tour-card::after, .guide-card::after, .proof-item::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: radial-gradient(240px circle at var(--mx, 50%) var(--my, 50%), rgba(188,107,60,.09), transparent 65%);
  opacity: 0; transition: opacity .3s ease;
}
.help-card:hover::after, .tile:hover::after, .svc-card:hover::after, .price:hover::after,
.tour-card:hover::after, .guide-card:hover::after, .proof-item:hover::after { opacity: 1; }
.price-featured::after {
  background: radial-gradient(240px circle at var(--mx, 50%) var(--my, 50%), rgba(255,255,255,.09), transparent 65%);
}

/* ---------- fresh polish: guide thumb image lift ---------- */
.guide-thumb-img { will-change: transform; }
.guide-thumb .gt-label { transition: transform .3s var(--ease); }
.guide-card:hover .gt-label { transform: translateY(-3px); }

/* ---------- fresh polish: hero audience chips ---------- */
.hero-audience li { transition: transform .2s var(--ease), background .2s ease, color .2s ease, border-color .2s ease; }
.hero-audience li:hover { transform: translateY(-2px); background: var(--sea-deep); color: #fff; border-color: var(--sea-deep); }

/* ---------- fresh polish: WhatsApp status pulse ---------- */
.wa-status { animation: waPulse 2.4s ease-in-out infinite; }
@keyframes waPulse {
  0%, 100% { box-shadow: 0 0 0 4px rgba(124,232,160,.16); }
  50% { box-shadow: 0 0 0 8px rgba(124,232,160,.3); }
}

/* ---------- fresh polish: featured price glow ---------- */
.price-featured { animation: featuredGlow 4s ease-in-out infinite; }
@keyframes featuredGlow {
  0%, 100% { box-shadow: var(--shadow-lg); }
  50% { box-shadow: 0 30px 70px rgba(15,44,74,.16), 0 0 34px rgba(188,107,60,.28); }
}

/* ---------- fresh polish: scroll progress bar (element built by script.js) ---------- */
.scroll-progress {
  position: fixed; top: 0; left: 0; width: 100%; height: 3px; z-index: 300;
  background: linear-gradient(90deg, var(--clay), #F4B740 55%, var(--sea));
  transform: scaleX(0); transform-origin: left; pointer-events: none;
}

/* ---------- scroll reveal (script.js adds .reveal, then .in-view) ---------- */
.reveal { opacity: 0; transform: translateY(22px); transition: opacity .7s ease, transform .7s var(--ease); }
.reveal.in-view { opacity: 1; transform: none; }
.reveal-child { opacity: 0; transform: translateY(16px); transition: opacity .6s ease, transform .6s var(--ease); transition-delay: var(--stagger, 0s); }
.in-view .reveal-child { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal, .reveal-child, .hero-copy > *, .hero-media { opacity: 1 !important; transform: none !important; animation: none !important; }
  .steps::after { transition: none; }
  .rm-live { animation: none; }
  .wa-chat { transition: none; }
}

/* ============================================================
   AREA GUIDE PAGES (guides/*.html)
   ============================================================ */
.guide-hero {
  background:
    radial-gradient(800px 360px at 88% -14%, rgba(47,107,101,.09), transparent 60%),
    linear-gradient(180deg, var(--sand), #F3EDE1);
  border-bottom: 1px solid var(--line);
  padding: clamp(2.8rem, 6vw, 4.4rem) 0 clamp(2rem, 4vw, 3rem);
}
.guide-hero h1 { font-size: clamp(2.1rem, 4.6vw, 3.1rem); margin: .9rem 0 .8rem; text-wrap: balance; }
.guide-hero .lede { max-width: 62ch; }
.breadcrumb { font-size: .84rem; color: var(--text); margin-bottom: 1rem; }
.breadcrumb a { color: var(--sea-deep); font-weight: 700; }
.back-link { display: inline-flex; align-items: center; gap: .4rem; font-weight: 700; color: var(--sea-deep); }
.prose { max-width: 740px; }
.prose > * + * { margin-top: 1.05rem; }
.prose h2 { font-size: clamp(1.5rem, 3vw, 1.95rem); margin-top: 2.6rem; }
.prose h3 { font-size: 1.2rem; margin-top: 1.5rem; }
.prose p, .prose li { font-size: 1.01rem; }
.prose ul { padding-left: 1.2rem; display: grid; gap: .5rem; }
.prose li::marker { color: var(--clay); }
.prose .callout {
  background: var(--sea-tint); border: 1px solid #CBDCD7; border-radius: var(--r-md);
  padding: 1.3rem 1.4rem; margin-top: 1.8rem;
}
.prose .callout h3 { margin-top: 0; }
.prose .note {
  font-size: .86rem; color: #75808D; border-left: 2px solid var(--clay);
  padding: .4rem 0 .4rem 1rem;
}

/* comparison table */
.cmp-wrap { overflow-x: auto; margin-top: 1.4rem; border: 1px solid var(--line); border-radius: var(--r-md); box-shadow: var(--shadow-sm); }
.cmp-table { width: 100%; border-collapse: collapse; min-width: 560px; background: var(--paper); }
.cmp-table th, .cmp-table td { text-align: left; padding: .9rem 1rem; border-bottom: 1px solid var(--line); font-size: .93rem; vertical-align: top; }
.cmp-table thead th { background: var(--navy-deep); color: #fff; font-family: var(--sans); font-size: .74rem; letter-spacing: .1em; text-transform: uppercase; }
.cmp-table tbody th { font-family: var(--sans); font-weight: 700; color: var(--ink); width: 22%; background: var(--sand); }
.cmp-table tbody tr:last-child th, .cmp-table tbody tr:last-child td { border-bottom: 0; }
.cmp-table td:nth-child(2) { color: var(--sea-deep); }
.cmp-table td:nth-child(3) { color: var(--clay-deep); }

.guide-cta {
  margin-top: 2.6rem; background: var(--navy-deep); color: #C7D3E2; border-radius: var(--r-lg);
  padding: clamp(1.8rem, 4vw, 2.6rem); display: flex; align-items: center; justify-content: space-between; gap: 1.4rem; flex-wrap: wrap;
  box-shadow: var(--shadow-lg);
}
.guide-cta h3 { color: #fff; font-size: 1.4rem; }
.guide-cta p { color: #B4C2D4; font-size: .94rem; margin-top: .3rem; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1024px) {
  .hero-grid { grid-template-columns: 1fr; }
  .hero-copy { max-width: 640px; }
  /* copy first, map second when stacked */
  .hero-media { max-width: 540px; margin-inline: auto; width: 100%; }
  .help-grid { grid-template-columns: repeat(2, 1fr); }
  .tile-grid { grid-template-columns: repeat(2, 1fr); }
  .proof-list { grid-template-columns: repeat(3, 1fr); }
  .steps { grid-template-columns: repeat(2, 1fr); gap: 2rem 1.6rem; }
  .steps::before, .steps::after { display: none; }
  .owner-grid, .report-grid { grid-template-columns: 1fr; }
  .owner-photo-wrap { max-width: 300px; }
  .cols-4 { grid-template-columns: repeat(2, 1fr); }
  .snapshot-grid { grid-template-columns: 1fr; }
  .video-grid { grid-template-columns: repeat(2, 1fr); }
  .price-grid { grid-template-columns: repeat(2, 1fr); }
  .price-grid-single { grid-template-columns: minmax(0, 430px); }
  .svc-grid, .guide-grid, .who-grid { grid-template-columns: 1fr; }
  .svc-card, .who-col { max-width: 640px; }
  .pm-grid { grid-template-columns: 1fr; }
  .vm-grid { grid-template-columns: 1fr; }
  .wx-current { grid-template-columns: 1fr; gap: .8rem; }
  .office-grid { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .main-offer { grid-template-columns: 1fr; }
}

/* Switch to the compact menu before the full desktop link row gets crowded. */
@media (max-width: 1480px) {
  .header-cta { display: none; }
  .hamburger { display: block; }
  .main-nav {
    position: fixed; inset: calc(var(--header-h)) 0 auto 0;
    background: var(--paper); border-bottom: 1px solid var(--line);
    flex-direction: column; align-items: stretch; gap: 0; padding: .5rem 1.2rem 1.2rem;
    box-shadow: var(--shadow-lg);
    transform: translateY(-8px); opacity: 0; visibility: hidden;
    transition: opacity .25s ease, transform .25s var(--ease), visibility .25s;
    max-height: calc(100vh - var(--header-h)); overflow-y: auto;
  }
  .main-nav.open { transform: translateY(0); opacity: 1; visibility: visible; }
  .main-nav a { padding: .9rem .2rem; border-bottom: 1px solid var(--line); font-size: 1rem; }
  .main-nav a::after { display: none; }
  .main-nav a:last-child { border-bottom: 0; }
}

@media (max-width: 620px) {
  body { font-size: 16px; padding-bottom: 84px; }
  .wrap { width: min(var(--wrap), calc(100% - 32px)); }
  .hero-grid, .hero-copy { min-width: 0; width: 100%; }
  .hero-title, .hero-sub, .hero-meta { overflow-wrap: anywhere; }
  .hero-actions { display: grid; grid-template-columns: 1fr; }
  .hero-actions .btn { width: 100%; min-width: 0; white-space: normal; }
  .proof-list { grid-template-columns: 1fr; }
  .proof-item { padding: .8rem .9rem; }
  .help-grid { grid-template-columns: 1fr; }
  .steps { grid-template-columns: 1fr; }
  .cols-4, .video-grid, .price-grid, .check-grid, .field-grid, .tour-split, .compare-inputs { grid-template-columns: 1fr; }
  .widget-dash { padding: .85rem; }
  /* tabs become a compact 2-col grid — no horizontal scroll */
  .seg-tabs {
    display: grid; grid-template-columns: repeat(2, 1fr); gap: .45rem;
    border-bottom: 0; margin-bottom: 1.1rem;
  }
  .seg-tab {
    justify-content: center; padding: .6rem .4rem;
    border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--sand);
    font-size: .8rem; white-space: normal; text-align: center;
  }
  .seg-tab::after { display: none; }
  .seg-tab.active { background: var(--sea-deep); border-color: var(--sea-deep); color: #fff; }
  .seg-tab.active .seg-ic { background: rgba(255,255,255,.16); border-color: rgba(255,255,255,.28); color: #fff; }
  .seg-tab:last-child { grid-column: 1 / -1; }
  .snapshot-form, .compare-form, .local-access-tools, .beach-quality { padding: .9rem; }
  .snapshot-input-row { grid-template-columns: 1fr; }
  .snapshot-input-row .btn, .compare-actions .btn, .compare-send .btn { width: 100%; }
  .local-access-tools { align-items: stretch; }
  .access-filters { justify-content: flex-start; }
  .access-filter { flex: 1 1 calc(50% - .4rem); }
  .compare-send { align-items: stretch; }
  .widget-map { height: 300px; }
  .tide-next { grid-template-columns: 1fr; }
  .vm-card { grid-template-columns: 1fr; }
  .vm-list { flex-direction: row; max-height: none; overflow-x: auto; padding-bottom: .3rem; }
  .vm-item { flex: 0 0 auto; }
  .form-foot { flex-direction: column; align-items: stretch; }
  .form-foot .btn { width: 100%; }
  .footer-grid { grid-template-columns: 1fr; }
  .brand-logo-stage { width: min(190px, calc(100vw - 105px)); }
  .wa-chat { display: none; }
  .mobile-cta { display: flex; }
  .owner-photo-wrap { max-width: 260px; }
  .lead-magnet .btn { width: 100%; }
  .tile { padding: 1.15rem 1rem 1.05rem; }
  .tile h3 { font-size: 1rem; }
  .tile-go { font-size: .78rem; }
  .hm-legend, .map-legend { gap: .35rem; padding: .65rem .75rem .8rem; }
  .hm-tag, .map-shell-tag { display: none; }
  .check-group .check-grid { padding: .7rem .75rem .8rem; }
  .fs-agent summary { padding: .85rem 1rem; }
  .fs-agent > .field-grid, .fs-agent > .svc-note { padding-inline: 1rem; }
  .fs-agent > .svc-note { margin-inline: 1rem; padding-left: .85rem; }
  /* announcement bar: one short line */
  .announce-extra { display: none; }
  .announce p { font-size: .68rem; padding: .5rem 0; }
  /* keep everything inside the viewport */
  .field input, .field select, .field textarea, .listing-links input { width: 100%; }
  .pm-field select, .pm-field input { max-width: 100%; }
}

/* ============================================================
   PHASE 1 ADDITIONS — funnel cards, Address Snapshot form,
   booking slots, Zillow-gap cards, announcement bar scroll.
   ============================================================ */

/* Announcement bar: wraps cleanly on desktop; scrolls sideways on phones. */
@media (max-width: 700px) {
  .announce { overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
  .announce::-webkit-scrollbar { display: none; }
  .announce p.announce-line {
    flex-wrap: nowrap; white-space: nowrap; justify-content: flex-start;
    width: max-content; min-width: 100%; padding-inline: 16px;
  }
}

/* Funnel: four equal cards on desktop. */
.help-grid-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1020px) { .help-grid-4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px)  { .help-grid-4 { grid-template-columns: 1fr; } }

/* Zillow-gap feature cards. */
.gap-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: .8rem;
  margin-top: 1.6rem;
}
.gap-card {
  display: flex; align-items: center; gap: .6rem;
  background: var(--card, #FFFDF9); border: 1px solid var(--line, #E4DCCC);
  border-radius: 12px; padding: .85rem 1rem;
  font-weight: 700; font-size: .92rem; color: var(--ink, #172A40);
  box-shadow: var(--shadow-sm, 0 1px 3px rgba(15,44,74,.08));
}
.gap-card .ui-icon { color: var(--teal, #2F6B65); flex: none; }
.gap-card .ui-icon svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.7; }
@media (max-width: 1020px) { .gap-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px)  { .gap-grid { grid-template-columns: 1fr; } }

/* Booking appointment slots. */
.slot-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: .7rem;
  margin-top: .35rem;
}
@media (max-width: 860px) { .slot-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .slot-grid { grid-template-columns: 1fr; } }
.slot-btn {
  display: flex; flex-direction: column; gap: .2rem; align-items: flex-start;
  padding: .8rem .95rem; border-radius: 12px; cursor: pointer;
  background: var(--card, #FFFDF9); border: 1.5px solid var(--line, #E4DCCC);
  font: inherit; text-align: left; color: var(--ink, #172A40);
  transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.slot-btn strong { font-size: .95rem; }
.slot-btn span { font-size: .8rem; color: var(--muted, #5B6B7C); }
.slot-btn:not(:disabled):hover { border-color: var(--teal, #2F6B65); transform: translateY(-2px); box-shadow: var(--shadow-sm, 0 2px 6px rgba(15,44,74,.1)); }
.slot-btn.slot-picked {
  border-color: var(--teal, #2F6B65);
  box-shadow: 0 0 0 3px rgba(47,107,101,.18);
}
.slot-btn.slot-picked span { color: var(--teal, #2F6B65); font-weight: 700; }
.slot-btn.slot-off, .slot-btn:disabled {
  opacity: .45; cursor: not-allowed; background: #F1EDE2;
  color: var(--muted, #5B6B7C);
}

/* ============================================================
   PHASE 2 ADDITIONS — audience cards, compare areas, pricing
   lists, SEO area cards, trust/compliance section.
   ============================================================ */

/* Built for Buyers / Sellers / Investors / Relocators. */
.aud-grid {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.1rem;
  margin-top: 1.4rem;
}
.aud-card {
  background: var(--card, #FFFDF9); border: 1px solid var(--line, #E4DCCC);
  border-radius: 16px; padding: 1.5rem 1.5rem 1.6rem;
  box-shadow: var(--shadow-sm, 0 1px 3px rgba(15,44,74,.08));
  display: flex; flex-direction: column; align-items: flex-start;
}
.aud-card h3 { font-size: 1.18rem; margin: .8rem 0 .5rem; }
.aud-card > p { font-size: .93rem; margin-bottom: .8rem; }
.aud-label { font-weight: 800; font-size: .78rem; text-transform: uppercase; letter-spacing: .05em; color: var(--muted, #5B6B7C); margin-bottom: .35rem; }
.aud-list { margin: 0 0 1.1rem; padding-left: 1.1rem; font-size: .9rem; color: var(--muted, #40536A); display: grid; gap: .25rem; }
.aud-card .btn { margin-top: auto; }
@media (max-width: 860px) { .aud-grid { grid-template-columns: 1fr; } }

/* Service card include-lists + "Starting at" prefix. */
.amount-pre { display: block; font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--muted, #5B6B7C); }
.price-list { margin: .7rem 0 1.1rem; padding-left: 1.05rem; font-size: .86rem; color: var(--muted, #40536A); display: grid; gap: .28rem; text-align: left; }

/* SEO area cards. */
.area-explore-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem;
  margin-top: 1.4rem;
}
.area-card {
  background: var(--card, #FFFDF9); border: 1px solid var(--line, #E4DCCC);
  border-radius: 16px; padding: 1.35rem 1.35rem 1.45rem;
  box-shadow: var(--shadow-sm, 0 1px 3px rgba(15,44,74,.08));
  display: flex; flex-direction: column; align-items: flex-start;
}
.area-card-ic { color: var(--teal, #2F6B65); }
.area-card-ic svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 1.7; }
.area-card h3 { font-size: 1.08rem; margin: .65rem 0 .4rem; }
.area-card p { font-size: .89rem; margin-bottom: 1rem; }
.area-card .btn { margin-top: auto; }
@media (max-width: 1020px) { .area-explore-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px)  { .area-explore-grid { grid-template-columns: 1fr; } }

/* ---------- Phase 2: relocation match + Florida area explorer ---------- */
.hero-question { display: inline-flex; gap: .45rem; align-items: center; margin-top: .9rem; color: var(--copper, #BC6B3C); font-weight: 800; text-decoration: none; }
.hero-question:hover { text-decoration: underline; }
.hero-problems { display: grid; grid-template-columns: repeat(3, 1fr); gap: .55rem; margin-top: 1.25rem; }
.hero-problems p { margin: 0; padding: .72rem .75rem; background: rgba(255,255,255,.72); border: 1px solid var(--line, #E4DCCC); border-radius: 10px; color: var(--ink, #172A40); font-size: .76rem; line-height: 1.35; }
.hero-problems strong { display: block; color: var(--navy, #0F2C4A); }
.quiz-shell { max-width: 920px; }
.quiz-head { text-align: left; max-width: 720px; }
.quiz-form { background: var(--paper, #FFFDF9); border: 1px solid var(--line, #E4DCCC); border-radius: var(--r-lg, 22px); padding: clamp(1.2rem, 3vw, 2rem); box-shadow: var(--shadow-sm, 0 2px 6px rgba(15,44,74,.1)); }
.quiz-checks { margin: 1.2rem 0; }
.quiz-result { margin-top: 1.2rem; padding: 1.1rem; border-radius: 12px; background: #EEF5F2; border-left: 4px solid var(--teal, #2F6B65); }
.quiz-result h3 { margin: 0 0 .45rem; color: var(--navy, #0F2C4A); font-size: 1.08rem; }
.quiz-result p { margin: 0 0 .8rem; }
.quiz-result .btn { margin-right: .5rem; margin-top: .45rem; }
.area-filters { display: flex; flex-wrap: wrap; gap: .55rem; margin: 1.1rem 0 1.4rem; }
.area-filter { appearance: none; cursor: pointer; padding: .52rem .78rem; border-radius: 999px; border: 1px solid var(--line, #E4DCCC); background: var(--paper, #FFFDF9); color: var(--navy, #0F2C4A); font: 700 .78rem var(--sans, sans-serif); }
.area-filter:hover, .area-filter:focus-visible, .area-filter.active { background: var(--navy, #0F2C4A); border-color: var(--navy, #0F2C4A); color: #fff; outline: none; }
.area-card[hidden] { display: none; }
.guide-links { display: flex; flex-wrap: wrap; gap: .65rem 1.1rem; margin-top: 1.45rem; }
.guide-links a { color: var(--teal, #2F6B65); font-weight: 800; font-size: .86rem; }
@media (max-width: 640px) { .hero-problems { grid-template-columns: 1fr; } .area-filters { gap: .4rem; } .area-filter { font-size: .73rem; padding: .48rem .62rem; } }

/* Trust / compliance section — calm, soft, readable. */
.trust-section { padding-top: 0; }
.trust-card {
  background: linear-gradient(180deg, #F6F1E4, #EFE9D8);
  border: 1px solid var(--line, #E4DCCC); border-radius: 20px;
  padding: 2.2rem clamp(1.4rem, 4vw, 3rem); text-align: center;
  max-width: 900px; margin-inline: auto;
}
.trust-ic { color: var(--teal, #2F6B65); display: inline-flex; margin-bottom: .6rem; }
.trust-ic svg { width: 30px; height: 30px; fill: none; stroke: currentColor; stroke-width: 1.6; }
.trust-card h2 { font-size: clamp(1.25rem, 2.6vw, 1.7rem); margin-bottom: .8rem; }
.trust-card p { font-size: .93rem; line-height: 1.75; color: var(--muted, #40536A); max-width: 760px; margin-inline: auto; }

/* ============================================================
   PREMIUM EDITORIAL PASS (2026-07)
   ------------------------------------------------------------
   Later-in-file overrides that elevate the base system:
   glass utility, compact scrolled header, simplified desktop
   nav, full-height mobile menu sheet, editorial audience rows,
   and the reusable wave divider. New-feature sections style in
   assets/css/features.css.
   ============================================================ */

/* ----- glass utility (accent only: header, chips, tab bar, CTA bar) ----- */
.glass {
  background: var(--glass);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .glass { background: var(--paper); }
}

/* ----- header: shrinks + tightens once the page scrolls ----- */
.header-inner { transition: min-height .35s var(--ease); }
.site-header.scrolled .header-inner { min-height: 62px; }
.site-header.scrolled .brand-logo-stage { width: clamp(165px, 16.5vw, 218px); }

/* ----- desktop nav: five primary links, roomier hit areas ----- */
@media (min-width: 1481px) {
  .main-nav a.nav-more { display: none; }
  .main-nav a { font-size: .9rem; padding: .5rem .72rem; }
}

/* ----- mobile nav: full-height glass sheet with staggered links ----- */
@media (max-width: 1480px) {
  body.menu-open { overflow: hidden; }
  .main-nav {
    /* NOTE: the sticky header's backdrop-filter makes it the containing block
       for this fixed element, so bottom-anchoring resolves against the header.
       Use viewport-height units instead to get a true full-height sheet. */
    inset: var(--header-h) 0 auto 0;
    height: calc(100vh - var(--header-h));
    height: calc(100dvh - var(--header-h));
    max-height: none;
    background: var(--glass);
    -webkit-backdrop-filter: var(--glass-blur);
    backdrop-filter: var(--glass-blur);
    border-bottom: 0;
    padding: 1.2rem 1.7rem 2.4rem;
  }
  @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .main-nav { background: var(--paper); }
  }
  .main-nav a {
    font-family: var(--serif); font-size: 1.12rem; padding: 1.05rem .2rem;
    opacity: 0; transform: translateY(12px);
    transition: opacity .3s ease, transform .35s var(--ease);
  }
  .main-nav.open a { opacity: 1; transform: none; }
  .main-nav.open a:nth-child(1) { transition-delay: .03s; }
  .main-nav.open a:nth-child(2) { transition-delay: .07s; }
  .main-nav.open a:nth-child(3) { transition-delay: .11s; }
  .main-nav.open a:nth-child(4) { transition-delay: .15s; }
  .main-nav.open a:nth-child(5) { transition-delay: .19s; }
  .main-nav.open a:nth-child(6) { transition-delay: .23s; }
  .main-nav.open a:nth-child(7) { transition-delay: .27s; }
  .main-nav.open a:nth-child(8) { transition-delay: .31s; }
  .main-nav.open a:nth-child(9) { transition-delay: .35s; }
}

/* ----- audiences: numbered editorial rows instead of four identical cards ----- */
.aud-grid {
  gap: 0 clamp(2.4rem, 5vw, 4.5rem);
  counter-reset: aud;
  border-top: 1px solid var(--line);
  margin-top: 2rem;
}
.aud-card {
  counter-increment: aud;
  position: relative;
  background: transparent; border: 0; border-bottom: 1px solid var(--line);
  border-radius: 0; box-shadow: none;
  padding: 2.1rem .5rem 2.3rem 0;
}
.aud-card::before {
  content: "0" counter(aud);
  position: absolute; top: 2rem; right: .1rem;
  font-family: var(--serif); font-style: italic; font-weight: 600;
  font-size: 2.5rem; line-height: 1; color: var(--line);
  transition: color .3s ease;
}
.aud-card:hover::before { color: var(--clay); }
.aud-card h3 { font-size: var(--fs-h3); }

/* ----- reusable wave divider (used above dark/tinted bands) ----- */
.wave-sep { display: block; width: 100%; height: clamp(22px, 3.5vw, 42px); margin-bottom: -1px; }
.wave-sep svg { width: 100%; height: 100%; display: block; }

/* ----- guide pages: editorial hero + prose polish (guide shell v2) ----- */
.guide-hero {
  position: relative; overflow: hidden;
  background:
    radial-gradient(700px 320px at 88% -10%, rgba(47,107,101,.12), transparent 62%),
    radial-gradient(520px 300px at 4% 110%, rgba(188,107,60,.09), transparent 60%),
    linear-gradient(180deg, var(--sand) 0%, #F3EDE1 100%);
  padding: clamp(3rem, 6.5vw, 5rem) 0 clamp(2.4rem, 5vw, 3.6rem);
  border-bottom: 1px solid var(--line);
}
.guide-hero h1 { font-size: var(--fs-h2); line-height: var(--lh-tight); letter-spacing: -0.02em; }
.guide-hero .lede { max-width: 68ch; }
.prose { max-width: 68ch; }
.prose p, .prose li { line-height: 1.75; }
.prose h2 {
  position: relative; padding-bottom: .5rem;
}
.prose h2::after {
  content: ""; position: absolute; left: 0; bottom: 0; width: 52px; height: 3px;
  border-radius: 2px; background: linear-gradient(90deg, var(--sea), var(--clay));
}
.guide-related {
  margin-top: 2.6rem; padding-top: 1.6rem; border-top: 1px solid var(--line);
}
.guide-related h3 { font-size: 1.05rem; margin-bottom: .8rem; }
.guide-related-links { display: flex; flex-wrap: wrap; gap: .5rem; }
.guide-related-links a {
  font-size: .8rem; font-weight: 700; color: var(--sea-deep);
  background: var(--paper); border: 1px solid var(--line); border-radius: 999px;
  padding: .42rem .85rem;
  transition: background .2s ease, border-color .2s ease, color .2s ease, transform .2s var(--ease);
}
.guide-related-links a:hover { background: var(--sea-tint); border-color: var(--sea); transform: translateY(-2px); }

/* ============================================================
   BRANDED PRELOADER (2026-07)
   ------------------------------------------------------------
   Warm sand curtain shown once per session. The emblem blooms
   in, the wordmark wipes on, then the curtain lifts into the
   page while the header logo runs its own intro. The inline
   script in index.html removes it for repeat visits and
   reduced-motion users before first paint.
   ============================================================ */
.site-preloader {
  position: fixed; inset: 0; z-index: 9999;
  display: flex; align-items: center; justify-content: center;
  background:
    radial-gradient(120% 90% at 50% 108%, rgba(47,107,101,.14), transparent 55%),
    radial-gradient(90% 70% at 50% -20%, rgba(244,183,64,.12), transparent 55%),
    var(--sand);
  transition: transform .75s cubic-bezier(.65, 0, .35, 1);
  will-change: transform;
}
.site-preloader.is-done { transform: translateY(-101%); }
.preloader-inner {
  display: flex; flex-direction: column; align-items: center;
  gap: clamp(.9rem, 2.5vw, 1.4rem);
  transition: opacity .4s ease, transform .5s ease;
}
.site-preloader.is-done .preloader-inner { opacity: 0; transform: translateY(-16px); }
.pre-emblem {
  width: clamp(96px, 16vw, 150px); height: auto;
  animation: preEmblemIn .9s cubic-bezier(.22, 1, .36, 1) .1s both,
             emblemBreathe 3.4s ease-in-out 1.1s infinite;
}
.pre-word {
  width: clamp(220px, 38vw, 360px); height: auto;
  animation: logoWordIn .9s cubic-bezier(.22, 1, .36, 1) .55s both;
}
@keyframes preEmblemIn {
  0% { opacity: 0; transform: translateY(22px) scale(.5); filter: drop-shadow(0 0 0 rgba(244,183,64,0)); }
  60% { opacity: 1; filter: drop-shadow(0 10px 34px rgba(244,183,64,.55)); }
  100% { opacity: 1; transform: none; filter: drop-shadow(0 6px 18px rgba(232,122,60,.25)); }
}
@media (prefers-reduced-motion: reduce) {
  /* Belt and suspenders: script removes it, but never animate if it survives. */
  .site-preloader { display: none; }
}

/* 2026-07 multi-page navigation and mobile CTA cleanup. */
.main-nav a[aria-current="page"] { color: var(--sea-deep); }
.main-nav a[aria-current="page"]::after { transform: scaleX(1); background: var(--sea); }
@media (min-width: 1481px) {
  .main-nav a { font-size: .78rem; padding-inline: .48rem; }
}
@media (max-width: 700px) {
  .mobile-cta .mc-wa { display: none; }
  .mobile-cta { grid-template-columns: 1fr; }
  .mobile-cta .mc-main { width: 100%; }
}

/* ============================================================
   2026-07 Audience mega-menu (shared by index.html .main-nav and
   the multipage.js-injected .mp-nav). Desktop = hover/focus dropdown,
   mobile = tap accordion. Keep markup classes identical in both navs.
   ============================================================ */
.nav-group { position: relative; }
.nav-link { position: relative; }
.nav-group-btn {
  display: inline-flex; align-items: center; gap: .3em;
  background: transparent; border: 0;
  padding: .5rem .5rem; font-weight: 600; font-size: .84rem; color: var(--ink);
  white-space: nowrap; transition: color .2s ease;
}
.nav-group-btn:hover,
.nav-group:hover .nav-group-btn,
.nav-group-btn[aria-expanded="true"] { color: var(--clay-deep); }
.nav-group-btn.is-current { color: var(--sea-deep); }
.nav-caret {
  display: inline-block; width: .42em; height: .42em;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: translateY(-.14em) rotate(45deg);
  transition: transform .2s var(--ease);
}
.nav-group-btn[aria-expanded="true"] .nav-caret,
.nav-group:hover .nav-caret { transform: translateY(.02em) rotate(-135deg); }
.nav-liveseat { color: var(--clay-deep); font-weight: 700; }
.mp-nav .nav-liveseat:hover, .main-nav .nav-liveseat:hover { color: var(--clay-deep); }

/* panel look (both navs) */
.nav-panel {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-float);
  padding: .45rem;
}
.nav-panel a {
  display: block; padding: .55rem .7rem; border-radius: var(--r-sm);
  font-size: .86rem; font-weight: 600; color: var(--ink); white-space: nowrap;
  transition: background .15s ease, color .15s ease;
}
.nav-panel a:hover { background: var(--sea-tint); color: var(--sea-deep); }
.nav-panel a::after { display: none; } /* cancel the .main-nav a underline inside panels */

/* ---- desktop dropdown: homepage .main-nav (>=1481px) ---- */
@media (min-width: 1481px) {
  .main-nav .nav-group-btn { font-size: .78rem; padding-inline: .48rem; }
  .main-nav .nav-panel {
    position: absolute; top: calc(100% + 6px); left: 0; z-index: 130;
    min-width: 250px; opacity: 0; visibility: hidden; transform: translateY(6px);
    pointer-events: none; transition: opacity .2s ease, transform .2s var(--ease), visibility .2s;
  }
  .main-nav .nav-group:hover > .nav-panel,
  .main-nav .nav-group:focus-within > .nav-panel,
  .main-nav .nav-group-btn[aria-expanded="true"] + .nav-panel {
    opacity: 1; visibility: visible; transform: none; pointer-events: auto;
  }
}

/* ---- desktop dropdown: route pages .mp-nav (>=1041px) ---- */
@media (min-width: 1041px) {
  .mp-nav .nav-group-btn { font-size: .84rem; }
  .mp-nav .nav-panel {
    position: absolute; top: calc(100% + 8px); left: 0; z-index: 130;
    min-width: 250px; opacity: 0; visibility: hidden; transform: translateY(6px);
    pointer-events: none; transition: opacity .2s ease, transform .2s var(--ease), visibility .2s;
  }
  .mp-nav .nav-group:hover > .nav-panel,
  .mp-nav .nav-group:focus-within > .nav-panel,
  .mp-nav .nav-group-btn[aria-expanded="true"] + .nav-panel {
    opacity: 1; visibility: visible; transform: none; pointer-events: auto;
  }
}

/* ---- mobile accordion: homepage .main-nav (<=1480px) ---- */
@media (max-width: 1480px) {
  .main-nav .nav-group { width: 100%; }
  .main-nav .nav-group-btn {
    width: 100%; justify-content: space-between;
    padding: 1.05rem .2rem; font-size: 1.12rem; font-family: var(--serif); color: var(--ink);
    border-bottom: 1px solid var(--line);
  }
  .main-nav .nav-panel {
    max-height: 0; overflow: hidden; padding: 0;
    transition: max-height .3s var(--ease);
  }
  .main-nav .nav-group-btn[aria-expanded="true"] + .nav-panel { max-height: 34rem; }
  .main-nav .nav-panel a { padding: .8rem 1rem; font-size: 1rem; border-bottom: 1px solid var(--line); }
}

/* ---- mobile accordion: route pages .mp-nav (<=1040px) ---- */
@media (max-width: 1040px) {
  .mp-nav .nav-group { width: 100%; }
  .mp-nav .nav-group-btn {
    width: 100%; justify-content: space-between;
    min-height: 48px; padding: .65rem .25rem; font-size: 1rem;
    border-bottom: 1px solid var(--mp-line, var(--line));
  }
  .mp-nav .nav-panel {
    max-height: 0; overflow: hidden; padding: 0;
    transition: max-height .3s var(--ease);
  }
  .mp-nav .nav-group-btn[aria-expanded="true"] + .nav-panel { max-height: 34rem; }
  .mp-nav .nav-panel a { padding: .7rem 1rem; font-size: 1rem; border-bottom: 1px solid var(--mp-line, var(--line)); }
}

/* ============================================================
   Homepage LiveSeat teaser + compact package/sample invitations
   ============================================================ */
.ls-teaser {
  position: relative; overflow: hidden;
  padding: clamp(1.75rem, 4vw, 3.2rem);
  border-radius: var(--r-lg); border: 1px solid rgba(255,255,255,.08);
  background: linear-gradient(135deg, #0e2135, #163a54);
  color: #dbe7f0; box-shadow: var(--shadow-md);
}
.ls-teaser::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(circle at 86% 8%, rgba(240,180,106,.18), transparent 46%);
}
.ls-teaser > * { position: relative; z-index: 1; }
.ls-teaser h2 { color: #fff; }
.ls-teaser .lede { color: #c3d3e0; max-width: 640px; }
.ls-teaser-tag { font-family: var(--serif); font-size: clamp(1.1rem, 2vw, 1.5rem); color: #f0b46a; margin: .35rem 0 .8rem; }
.ls-teaser-chips { display: flex; flex-wrap: wrap; gap: .5rem; margin: 1rem 0 1.4rem; }
.ls-teaser-chip {
  padding: .4rem .85rem; border: 1px solid rgba(255,255,255,.22); border-radius: 999px;
  font-size: .82rem; font-weight: 700; background: rgba(255,255,255,.05);
  transition: transform .2s var(--ease), background .2s ease, border-color .2s ease;
}
.ls-teaser-chip:hover { transform: translateY(-2px); background: rgba(240,180,106,.14); border-color: rgba(240,180,106,.5); }
.ls-teaser-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; }
.ls-beta-flag {
  font-size: .72rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
  padding: .38rem .75rem; border-radius: 999px;
  background: rgba(240,180,106,.16); color: #f0b46a;
  animation: lsBetaPulse 3.2s ease-in-out infinite;
}
@keyframes lsBetaPulse { 0%, 100% { opacity: .82; } 50% { opacity: 1; } }

.invite-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; }
.invite {
  padding: clamp(1.5rem, 3vw, 2.4rem);
  border: 1px solid var(--line); border-radius: var(--r-lg);
  background: var(--paper); box-shadow: var(--shadow-sm);
  transition: transform .2s var(--ease), box-shadow .2s ease;
}
.invite:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.invite h2 { font-size: var(--fs-h3); margin: .3rem 0 .55rem; }
.invite .btn { margin-top: 1rem; }
@media (max-width: 760px) { .invite-row { grid-template-columns: 1fr; } }

/* Homepage LiveSeat flagship */
.home-liveseat { background: linear-gradient(145deg, #f7fbf9, #fff8ee); }
.home-liveseat-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(340px, .9fr); align-items: center; gap: clamp(2rem, 6vw, 5rem); }
.home-liveseat-copy h2 { max-width: 760px; }
.home-liveseat-list { display: grid; gap: .55rem; margin: 1.35rem 0 0; padding: 0; list-style: none; }
.home-liveseat-list li { display: flex; align-items: flex-start; gap: .55rem; font-weight: 750; }
.home-liveseat-list li::before { content: "✓"; color: var(--sea); font-weight: 900; }
.home-liveseat-safety { margin-top: 1rem; color: var(--text); font-size: .86rem; font-weight: 700; }
.home-liveseat-visual { overflow: hidden; border: 1px solid rgba(47,107,101,.2); border-radius: 22px; background: var(--paper); box-shadow: var(--shadow-lg); }
.home-liveseat-visual img { display: block; width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.home-liveseat-visual figcaption { padding: .8rem 1rem; color: var(--text); font-size: .78rem; font-weight: 800; text-align: center; }

@media (max-width: 820px) {
  .home-liveseat-grid { grid-template-columns: 1fr; }
  .home-liveseat-visual { order: 2; }
}