/* ============================================================
   Brookshire & Company Real Estate — main.css
   Aesthetic: warm editorial luxury — printed-paper grain,
   oversized Cormorant display type, hairline rules, real
   photography, restrained sage/ocean/earth accents.
   ============================================================ */

/* ---------- Fonts: self-hosted variable fonts (SIL Open Font License),
   latin subsets, preloaded from each page's head; swap so text never waits ---------- */
@font-face { font-family: 'Cormorant Garamond'; font-style: normal; font-weight: 300 700; font-display: swap; src: url('../fonts/CormorantGaramond.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Cormorant Garamond'; font-style: italic; font-weight: 300 700; font-display: swap; src: url('../fonts/CormorantGaramond-Italic.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Fraunces'; font-style: normal; font-weight: 300 700; font-display: swap; src: url('../fonts/Fraunces.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Fraunces'; font-style: italic; font-weight: 300 700; font-display: swap; src: url('../fonts/Fraunces-Italic.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
/* Width-matched fallbacks for Fraunces, so the lines wrap the same before and after the
   swap and nothing moves: Georgia runs about 13% wider than Fraunces, Times about 6%. */
@font-face { font-family: 'Fraunces Fallback'; src: local('Georgia'); size-adjust: 88.5%; }
@font-face { font-family: 'Fraunces Fallback Times'; src: local('Times New Roman'), local('Times'), local('Liberation Serif'); size-adjust: 93.8%; }
@font-face { font-family: 'DM Sans'; font-style: normal; font-weight: 100 1000; font-display: swap; src: url('../fonts/DMSans.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

/* ---------- Design Tokens ---------- */
:root {
  /* Ink / neutrals */
  --color-ink: #1e1c18;
  --color-ink-70: #3a372f;
  --color-ink-40: #6c6759; /* darkened for stronger small-text contrast (WCAG AA) */
  --color-ink-20: #b8b2a6;

  /* Sage (North Georgia mountains) */
  --color-sage: #3f5a44;        /* pine: the mountains */
  --color-sage-mid: #6f8a68;    /* moss */
  --color-sage-pale: #eef2ea;   /* mist over the ridges */
  --color-cedar: #8b5e3c;       /* cabin wood */
  --color-mist: #f3f1ea;

  /* Ocean (Alabama Gulf coast) */
  --color-ocean: #1f6f86;       /* the Gulf */
  --color-ocean-mid: #3f9bb0;   /* the sandbar */
  --color-ocean-pale: #e6f3f4;  /* sea glass */
  --color-shell: #f6f1e7;       /* sand white */

  /* Earth */
  --color-earth: #7a5c3a;
  --color-earth-light: #c4a882;
  --color-earth-pale: #f5efe6;

  /* Brand: the deep teal behind the client's logo file, and the cream of her mark */
  --color-brand: #183639;
  --color-brand-deep: #10272a;
  --color-brand-soft: #2a4e51;
  --color-mark: #f6efdc;
  --color-on-brand: #c9d6d3;       /* body text on brand surfaces, AA on #183639 */

  /* Neutral stone base (cooled to read gender-neutral) */
  --color-sand: #e8dfcf;
  --color-cream: #f1f1ee;
  --color-warm-white: #fbfbf9;
  --color-rule: #e2e0da;
  --color-accent: #5a6b6e; /* muted slate — neutral ornament color */

  /* Fonts */
  --font-display: 'Fraunces', 'Fraunces Fallback', 'Fraunces Fallback Times', Georgia, 'Times New Roman', serif; /* width-matched local fallbacks; no self-hosted one, or it would download too while Fraunces loads */
  --font-body: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* Spacing scale */
  --space-xs: 0.5rem;
  --space-sm: 1rem;
  --space-md: 1.75rem;
  --space-lg: 3rem;
  --space-xl: 5rem;
  --space-2xl: 8rem;

  /* Layout */
  --nav-height: 84px;
  --max-width: 1320px;
  --gutter: clamp(1.5rem, 5.5vw, 5rem);
  --radius: 8px;
  --radius-lg: 16px;

  /* Effects — soft, layered, warm-neutral depth */
  --shadow-sm: 0 2px 8px -3px rgba(30, 28, 24, 0.08);
  --shadow-md: 0 14px 40px -18px rgba(40, 44, 48, 0.22), 0 4px 12px -6px rgba(30, 28, 24, 0.10);
  --shadow-lg: 0 50px 100px -40px rgba(40, 44, 48, 0.40), 0 16px 40px -20px rgba(30, 28, 24, 0.20);
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --transition: 0.55s var(--ease);
  --transition-fast: 0.3s var(--ease);
}

/* ---------- The sky: the site keeps the hour ----------
   A script in every page's head reads the clock and the season's sunrise and
   sunset (33.5°N, the ground between Blue Ridge and Gulf Shores) and sets
   data-sky on <html> before the first paint: dawn, day, golden, dusk or night.
   The ribbon lets a visitor hold the sky at day or night (main.js SKY); the
   choice is remembered. Dawn, day and golden hour share the light paper; dusk
   and night share the dark one: deep sea-teal, never black. --sun and --moon
   (0 to 1) say how far across the sky each is, for the ribbon's marker. */
:root {
  --sky-top: #cfe3e8; --sky-bottom: #eef5f5; --sky-ink: #1e1c18; --sky-ink-soft: rgba(30, 28, 24, 0.7); --sky-line: rgba(30, 28, 24, 0.14);
  --sun-color: #ffd98a; --sun-glow: rgba(255, 214, 130, 0.6);
  --shore-0: #3b7680; --shore-1: #2a5a60; --shore-2: #1d464c; --shore-line: rgba(246, 239, 220, 0.4);
  --sky-accent: #1f6f86;
  --color-gold: #a27f2b; /* the social icons: an old gold that holds 3:1 on the light paper; brighter after dark */
  --paper-2: #e9ebe4; --surface: #fbfbf9;
  --color-brand-ground: var(--color-brand); /* brand surfaces that carry white text; a teal that still reads at night */
}
:root[data-sky="dawn"] {
  --color-cream: #f5efe6; --color-warm-white: #fcf9f4; --paper-2: #efe6da; --surface: #fcf9f4;
  --sky-top: #efc6ad; --sky-bottom: #fae8dc; --sun-color: #ffc27a; --sun-glow: rgba(255, 180, 110, 0.6);
  --shore-0: #7a7f82; --shore-1: #30595f; --shore-2: #22474e; --sky-accent: #b8653f;
}
:root[data-sky="golden"] {
  --color-cream: #f6f0e3; --color-warm-white: #fdf9f1; --paper-2: #f0e5d0; --surface: #fdf9f1;
  --sky-top: #f0c389; --sky-bottom: #f9e5c6; --sun-color: #ffb45e; --sun-glow: rgba(255, 170, 80, 0.65);
  --shore-0: #7a6f58; --shore-1: #34545c; --shore-2: #243f47; --sky-accent: #b5552f;
}
:root[data-sky="dusk"], :root[data-sky="night"] {
  color-scheme: dark;
  /* the dark paper is a ramp with the brand's own colours in it, not one teal (owner,
     2026-11-01: lighter, more colour, more character): a blue-slate ground (#1d3340), a
     lifted slate surface that cards and alternate sections stand on (#2a4553), and each
     tint with its own hue: the ridge's forest green, the Gulf's deep blue, the earth's
     umber, and cabin wood for the shell, so adjacent sections read apart */
  --color-cream: #1d3340; --color-warm-white: #2a4553; --color-mist: #233d49; --color-shell: #443a2f;
  --color-sage-pale: #1f4030; --color-ocean-pale: #1b4660; --color-earth-pale: #3f3528; --color-sand: #4a5048;
  --color-rule: rgba(236, 229, 212, 0.18);
  --color-ink: #f3ede0; --color-ink-70: #d8d1bf; --color-ink-40: #bfb9a9; --color-ink-20: #5f6b6e;
  --color-sage: #a9c7a3; --color-sage-mid: #8fb088; --color-ocean: #80cde0; --color-ocean-mid: #68b8cc;
  --color-cedar: #d9ab86; --color-earth: #d8b78e; --color-earth-light: #e8d0aa; --color-accent: #b0bfc2;
  --color-brand: #f3ede0; --color-brand-soft: #ded5c2; --color-brand-ground: #2a5563;
  --paper-2: #243c48; --surface: #2a4553;
  --shadow-sm: 0 2px 8px -3px rgba(0, 0, 0, 0.35);
  --shadow-md: 0 14px 40px -18px rgba(0, 0, 0, 0.6), 0 4px 12px -6px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 50px 100px -40px rgba(0, 0, 0, 0.7), 0 16px 40px -20px rgba(0, 0, 0, 0.5);
  --sky-ink: #f0e9da; --sky-ink-soft: rgba(240, 233, 218, 0.72); --sky-line: rgba(240, 233, 218, 0.16);
  --shore-0: #24485a; --shore-1: #21465a; --shore-2: #1a3a4a; --shore-line: rgba(240, 233, 218, 0.3);
  --sky-accent: #e0b86f; --color-gold: #e0b86f;
}
:root[data-sky="dusk"] { --sky-top: #3a3e6a; --sky-bottom: #7a5a78; --sun-color: #ffb07a; --sun-glow: rgba(255, 150, 100, 0.6); --shore-0: #4a4a6a; }
:root[data-sky="night"] { --sky-top: #0b1a26; --sky-bottom: #17303b; --sun-color: #f4efe0; --sun-glow: rgba(240, 236, 220, 0.45); }
:root[data-sky="dusk"] .footer::before, :root[data-sky="night"] .footer::before { background: radial-gradient(30% 220px at calc(4% + var(--moon, 0.5) * 92%) 0, var(--sun-glow), transparent 72%), linear-gradient(180deg, var(--shore-0) 0, var(--shore-1) 120px, var(--shore-2) 100%); }
/* The mountains keep the season too (data-season from the head script): the
   sage family is the ridge's colour: fresh green in spring, pine in summer, the
   leaves' amber and rust in fall, blue-grey bare woods in winter. The Gulf stays
   the Gulf. The dark paper has its own, lighter steps of each. */
:root[data-season="spring"] { --color-sage: #4a7640; --color-sage-mid: #7ea85f; --color-sage-pale: #eef4e6; --color-cedar: #8b5e3c; }
:root[data-season="fall"] { --color-sage: #9a5230; --color-sage-mid: #c47d3d; --color-sage-pale: #f5ecdf; --color-cedar: #7b4a2c; }
:root[data-season="winter"] { --color-sage: #4a6168; --color-sage-mid: #7c9397; --color-sage-pale: #edf1f2; --color-cedar: #6f5a4a; }
:root[data-season="spring"]:is([data-sky="dusk"], [data-sky="night"]) { --color-sage: #a9d38f; --color-sage-mid: #8fba76; --color-sage-pale: #22452f; }
:root[data-season="fall"]:is([data-sky="dusk"], [data-sky="night"]) { --color-sage: #e2a36c; --color-sage-mid: #cf8a4c; --color-sage-pale: #45362a; }
:root[data-season="winter"]:is([data-sky="dusk"], [data-sky="night"]) { --color-sage: #a7bfc4; --color-sage-mid: #8aa4a9; --color-sage-pale: #243b47; }
:root[data-sky="dusk"] .region-map, :root[data-sky="night"] .region-map { --color-brand-ground: #172c38; }
/* after dark the eyebrow lines are gold: a little warmth and character on the slate */
:root[data-sky="dusk"] .overline, :root[data-sky="night"] .overline { color: var(--color-gold); }
/* the footer is always on the water: its titles keep the cream whatever the sky */
.footer { --color-warm-white: #fbfbf9; --color-cream: #f1f1ee; --color-gold: #e0b86f; }
/* on paper, print the day: the dark paper never goes to the printer */
@media print {
  :root[data-sky="dusk"], :root[data-sky="night"] {
    color-scheme: light;
    --color-cream: #f1f1ee; --color-warm-white: #fbfbf9; --color-mist: #f3f1ea; --color-shell: #f6f1e7;
    --color-sage-pale: #eef2ea; --color-ocean-pale: #e6f3f4; --color-earth-pale: #f5efe6; --color-sand: #e8dfcf;
    --color-rule: #e2e0da; --color-ink: #1e1c18; --color-ink-70: #3a372f; --color-ink-40: #6c6759; --color-ink-20: #b8b2a6;
    --color-sage: #3f5a44; --color-sage-mid: #6f8a68; --color-ocean: #1f6f86; --color-ocean-mid: #3f9bb0; --color-cedar: #8b5e3c;
    --color-earth: #7a5c3a; --color-earth-light: #c4a882; --color-accent: #5a6b6e; --color-brand: #183639; --color-brand-soft: #2a4e51; --color-brand-ground: #183639;
    --paper-2: #e9ebe4; --surface: #fbfbf9; --sky-top: #fff; --sky-bottom: #fff; --sky-ink: #1e1c18; --sky-ink-soft: rgba(30, 28, 24, 0.7); --sky-line: rgba(30, 28, 24, 0.14);
  }
}
/* any element can carry a sky of its own (data-sky on a card or a tile):
   these are the same five skies as the ribbon's, for that element */
[data-sky="dawn"] { --this-sky-top: #efc6ad; --this-sky-bottom: #fae8dc; --this-sky-ink: #1e1c18; --this-orb: #ffc27a; --this-glow: rgba(255, 180, 110, 0.6); }
[data-sky="day"] { --this-sky-top: #cfe3e8; --this-sky-bottom: #eef5f5; --this-sky-ink: #1e1c18; --this-orb: #ffd98a; --this-glow: rgba(255, 214, 130, 0.6); }
[data-sky="golden"] { --this-sky-top: #f0c389; --this-sky-bottom: #f9e5c6; --this-sky-ink: #1e1c18; --this-orb: #ffb45e; --this-glow: rgba(255, 170, 80, 0.65); }
[data-sky="dusk"] { --this-sky-top: #3a3e6a; --this-sky-bottom: #7a5a78; --this-sky-ink: #f0e9da; --this-orb: #f4efe0; --this-glow: rgba(240, 236, 220, 0.45); }
[data-sky="night"] { --this-sky-top: #0b1a26; --this-sky-bottom: #17303b; --this-sky-ink: #f0e9da; --this-orb: #f4efe0; --this-glow: rgba(240, 236, 220, 0.45); }
/* the footer's two skies (listings.js From.paintClocks): a tile per place, in its own light */
.footer__skies { display: flex; flex-wrap: wrap; gap: 0.7rem; flex-basis: 100%; margin-top: 0.4rem; }
.footer__skies[hidden] { display: none; }
.skytile { position: relative; display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: 0.7rem; align-items: center; min-width: 15rem; padding: 0.6rem 0.9rem 0.6rem 0.8rem; border-radius: 12px; overflow: hidden; background: linear-gradient(180deg, var(--this-sky-top), var(--this-sky-bottom)); color: var(--this-sky-ink); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12); }
.skytile__orb { grid-row: 1 / 3; width: 18px; height: 18px; border-radius: 50%; background: var(--this-orb); box-shadow: 0 0 0 4px var(--this-glow), 0 0 16px 5px var(--this-glow); }
.skytile[data-sky="dusk"] .skytile__orb, .skytile[data-sky="night"] .skytile__orb { width: 14px; height: 14px; box-shadow: 0 0 0 3px var(--this-glow), 0 0 12px 4px var(--this-glow); }
.skytile b { font-family: var(--font-display); font-weight: 500; font-size: 1.05rem; line-height: 1.1; }
.skytile > span { font-size: 0.78rem; opacity: 0.85; font-variant-numeric: tabular-nums; }
a.skytile { transition: transform var(--transition-fast), box-shadow var(--transition-fast); }
a.skytile:hover { transform: translateY(-2px); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.45), var(--shadow-md); }
a.skytile:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.skytile::after { content: ''; position: absolute; left: calc(12% + var(--sun, 0.5) * 76%); top: -6px; width: 40%; height: 60%; margin-left: -20%; border-radius: 50%; background: radial-gradient(closest-side, var(--this-glow), transparent); opacity: 0.5; pointer-events: none; }
.skytile[data-sky="dusk"]::after, .skytile[data-sky="night"]::after { left: calc(12% + var(--moon, 0.5) * 76%); opacity: 0.35; }
/* A sky wash for any photo block (main.js lays one into the sellers' showcase and
   the 404 hero; home.css has the hero's own): first-light blush, golden-hour
   warmth, dusk violet, night blue with the stars out. */
.skywash, .skywash__stars { position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: 0; transition: opacity 1.4s var(--ease); }
:root[data-sky="dawn"] .skywash { opacity: 1; mix-blend-mode: soft-light; background: linear-gradient(180deg, rgba(255, 196, 160, 0.6), rgba(255, 220, 200, 0.15) 55%, transparent); }
:root[data-sky="golden"] .skywash { opacity: 1; mix-blend-mode: soft-light; background: linear-gradient(180deg, rgba(255, 176, 90, 0.6), rgba(255, 150, 70, 0.3) 50%, rgba(140, 70, 20, 0.35)); }
:root[data-sky="dusk"] .skywash { opacity: 1; mix-blend-mode: multiply; background: linear-gradient(180deg, rgba(60, 56, 110, 0.5), rgba(30, 36, 70, 0.52)); }
:root[data-sky="night"] .skywash { opacity: 1; mix-blend-mode: multiply; background: linear-gradient(180deg, rgba(12, 24, 48, 0.62), rgba(10, 26, 38, 0.56)); }
.skywash__stars { background-image: radial-gradient(1.5px 1.5px at 67% 28%, rgba(255,255,255,0.95) 50%, transparent 52%), radial-gradient(1px 1px at 39% 25%, rgba(255,255,255,0.7) 50%, transparent 52%), radial-gradient(1px 1px at 38% 13%, rgba(255,255,255,0.7) 50%, transparent 52%), radial-gradient(1px 1px at 99% 47%, rgba(255,255,255,0.7) 50%, transparent 52%), radial-gradient(1px 1px at 91% 36%, rgba(255,255,255,0.95) 50%, transparent 52%), radial-gradient(1.5px 1.5px at 85% 19%, rgba(255,255,255,0.7) 50%, transparent 52%), radial-gradient(1px 1px at 15% 3%, rgba(255,255,255,0.7) 50%, transparent 52%), radial-gradient(1px 1px at 32% 26%, rgba(255,255,255,0.7) 50%, transparent 52%), radial-gradient(1px 1px at 96% 28%, rgba(255,255,255,0.95) 50%, transparent 52%), radial-gradient(1px 1px at 33% 34%, rgba(255,255,255,0.7) 50%, transparent 52%), radial-gradient(1.5px 1.5px at 41% 42%, rgba(255,255,255,0.7) 50%, transparent 52%), radial-gradient(1px 1px at 88% 48%, rgba(255,255,255,0.7) 50%, transparent 52%), radial-gradient(1px 1px at 52% 10%, rgba(255,255,255,0.95) 50%, transparent 52%), radial-gradient(1px 1px at 71% 5%, rgba(255,255,255,0.7) 50%, transparent 52%), radial-gradient(1px 1px at 18% 14%, rgba(255,255,255,0.7) 50%, transparent 52%), radial-gradient(1.5px 1.5px at 20% 47%, rgba(255,255,255,0.7) 50%, transparent 52%), radial-gradient(1px 1px at 69% 37%, rgba(255,255,255,0.95) 50%, transparent 52%), radial-gradient(1px 1px at 88% 15%, rgba(255,255,255,0.7) 50%, transparent 52%), radial-gradient(1px 1px at 43% 36%, rgba(255,255,255,0.7) 50%, transparent 52%), radial-gradient(1px 1px at 16% 47%, rgba(255,255,255,0.7) 50%, transparent 52%), radial-gradient(1.5px 1.5px at 82% 6%, rgba(255,255,255,0.95) 50%, transparent 52%), radial-gradient(1px 1px at 40% 28%, rgba(255,255,255,0.7) 50%, transparent 52%), radial-gradient(1px 1px at 11% 34%, rgba(255,255,255,0.7) 50%, transparent 52%), radial-gradient(1px 1px at 61% 42%, rgba(255,255,255,0.7) 50%, transparent 52%), radial-gradient(1px 1px at 77% 11%, rgba(255,255,255,0.95) 50%, transparent 52%), radial-gradient(1.5px 1.5px at 88% 28%, rgba(255,255,255,0.7) 50%, transparent 52%), radial-gradient(1px 1px at 65% 23%, rgba(255,255,255,0.7) 50%, transparent 52%), radial-gradient(1px 1px at 3% 29%, rgba(255,255,255,0.7) 50%, transparent 52%), radial-gradient(1px 1px at 48% 38%, rgba(255,255,255,0.95) 50%, transparent 52%), radial-gradient(1px 1px at 7% 50%, rgba(255,255,255,0.7) 50%, transparent 52%), radial-gradient(1.5px 1.5px at 95% 24%, rgba(255,255,255,0.7) 50%, transparent 52%), radial-gradient(1px 1px at 7% 32%, rgba(255,255,255,0.7) 50%, transparent 52%), radial-gradient(1px 1px at 48% 39%, rgba(255,255,255,0.95) 50%, transparent 52%), radial-gradient(1px 1px at 1% 27%, rgba(255,255,255,0.7) 50%, transparent 52%), radial-gradient(1px 1px at 31% 9%, rgba(255,255,255,0.7) 50%, transparent 52%), radial-gradient(1.5px 1.5px at 72% 15%, rgba(255,255,255,0.7) 50%, transparent 52%), radial-gradient(1px 1px at 32% 35%, rgba(255,255,255,0.95) 50%, transparent 52%), radial-gradient(1px 1px at 47% 5%, rgba(255,255,255,0.7) 50%, transparent 52%), radial-gradient(1px 1px at 35% 6%, rgba(255,255,255,0.7) 50%, transparent 52%), radial-gradient(1px 1px at 36% 14%, rgba(255,255,255,0.7) 50%, transparent 52%); }
:root[data-sky="night"] .skywash__stars { opacity: 1; }
:root[data-sky="dusk"] .skywash__stars { opacity: 0.4; }
/* The horizon: the site's signature line, a ridge that runs into the waves, drawn
   once under the first block of every page (main.js), in the season's ridge
   colour running into the Gulf's */
.horizon { position: absolute; left: 0; right: 0; bottom: 0; z-index: 3; display: block; width: 100%; height: 34px; overflow: visible; pointer-events: none; filter: drop-shadow(0 0 2px rgba(255, 255, 255, 0.55)); }
.horizon path { fill: none; stroke: url(#horizon-ink); stroke-width: 1.5; vector-effect: non-scaling-stroke; stroke-linejoin: round; stroke-linecap: round; }
.horizon .horizon__sun { fill: var(--sun-color); opacity: 0.9; }
@media (max-width: 760px) { .horizon { height: 22px; } }
/* the stars on the footer's water at night (main.js) */
.footer__stars { position: absolute; left: 0; right: 0; top: -20px; height: 220px; z-index: -1; pointer-events: none; opacity: 0; transition: opacity 1.4s var(--ease); background-image: radial-gradient(1.5px 1.5px at 38% 12%, rgba(255,255,255,0.95) 50%, transparent 52%), radial-gradient(1px 1px at 3% 77%, rgba(255,255,255,0.7) 50%, transparent 52%), radial-gradient(1px 1px at 40% 56%, rgba(255,255,255,0.7) 50%, transparent 52%), radial-gradient(1px 1px at 49% 69%, rgba(255,255,255,0.7) 50%, transparent 52%), radial-gradient(1px 1px at 46% 18%, rgba(255,255,255,0.95) 50%, transparent 52%), radial-gradient(1.5px 1.5px at 93% 26%, rgba(255,255,255,0.7) 50%, transparent 52%), radial-gradient(1px 1px at 35% 58%, rgba(255,255,255,0.7) 50%, transparent 52%), radial-gradient(1px 1px at 2% 30%, rgba(255,255,255,0.7) 50%, transparent 52%), radial-gradient(1px 1px at 80% 60%, rgba(255,255,255,0.95) 50%, transparent 52%), radial-gradient(1px 1px at 4% 15%, rgba(255,255,255,0.7) 50%, transparent 52%), radial-gradient(1.5px 1.5px at 11% 65%, rgba(255,255,255,0.7) 50%, transparent 52%), radial-gradient(1px 1px at 54% 4%, rgba(255,255,255,0.7) 50%, transparent 52%), radial-gradient(1px 1px at 66% 82%, rgba(255,255,255,0.95) 50%, transparent 52%), radial-gradient(1px 1px at 94% 57%, rgba(255,255,255,0.7) 50%, transparent 52%), radial-gradient(1px 1px at 46% 9%, rgba(255,255,255,0.7) 50%, transparent 52%), radial-gradient(1.5px 1.5px at 27% 6%, rgba(255,255,255,0.7) 50%, transparent 52%), radial-gradient(1px 1px at 76% 49%, rgba(255,255,255,0.95) 50%, transparent 52%), radial-gradient(1px 1px at 85% 24%, rgba(255,255,255,0.7) 50%, transparent 52%), radial-gradient(1px 1px at 80% 29%, rgba(255,255,255,0.7) 50%, transparent 52%), radial-gradient(1px 1px at 95% 48%, rgba(255,255,255,0.7) 50%, transparent 52%), radial-gradient(1.5px 1.5px at 73% 49%, rgba(255,255,255,0.95) 50%, transparent 52%), radial-gradient(1px 1px at 74% 38%, rgba(255,255,255,0.7) 50%, transparent 52%), radial-gradient(1px 1px at 85% 42%, rgba(255,255,255,0.7) 50%, transparent 52%), radial-gradient(1px 1px at 74% 12%, rgba(255,255,255,0.7) 50%, transparent 52%), radial-gradient(1px 1px at 61% 24%, rgba(255,255,255,0.95) 50%, transparent 52%), radial-gradient(1.5px 1.5px at 92% 63%, rgba(255,255,255,0.7) 50%, transparent 52%), radial-gradient(1px 1px at 76% 59%, rgba(255,255,255,0.7) 50%, transparent 52%), radial-gradient(1px 1px at 87% 84%, rgba(255,255,255,0.7) 50%, transparent 52%), radial-gradient(1px 1px at 21% 25%, rgba(255,255,255,0.95) 50%, transparent 52%), radial-gradient(1px 1px at 23% 70%, rgba(255,255,255,0.7) 50%, transparent 52%), radial-gradient(1.5px 1.5px at 42% 88%, rgba(255,255,255,0.7) 50%, transparent 52%), radial-gradient(1px 1px at 67% 27%, rgba(255,255,255,0.7) 50%, transparent 52%), radial-gradient(1px 1px at 75% 16%, rgba(255,255,255,0.95) 50%, transparent 52%), radial-gradient(1px 1px at 11% 14%, rgba(255,255,255,0.7) 50%, transparent 52%); -webkit-mask: linear-gradient(#000 40%, transparent); mask: linear-gradient(#000 40%, transparent); }
:root[data-sky="night"] .footer__stars { opacity: 0.8; }
:root[data-sky="dusk"] .footer__stars { opacity: 0.3; }
/* the horizon draws itself in the first time it is seen (main.js): a clip that opens from
   the left, so once open the line is always whole, edge to edge. It never depends on the
   path's measured length, which browsers disagree on under a non-scaling stroke. */
.horizon { clip-path: inset(-24px 100% -24px 0); transition: clip-path 2.6s var(--ease); }
.horizon.is-in { clip-path: inset(-24px 0 -24px 0); }
.horizon__mark { position: absolute; left: 0; right: 0; bottom: 0; height: 1px; pointer-events: none; }
@media (prefers-reduced-motion: reduce), print { .horizon { clip-path: none; transition: none; } }
/* the footer's line about the hour, with the sky button (main.js) */
.footer__hour { flex-basis: 100%; display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem 1rem; margin-top: 0.5rem; font-size: 0.8rem; color: var(--color-on-brand); }
.footer__sky-btn { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.45rem 0.8rem; border-radius: 999px; border: 1px solid rgba(246, 239, 220, 0.3); background: rgba(246, 239, 220, 0.06); color: #f6efdc; font: inherit; font-size: 0.8rem; }
.footer__sky-btn svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.footer__sky-btn em { font-style: normal; opacity: 0.75; }
.footer__sky-btn em::before { content: '\00b7  '; }
.footer__sky-btn:hover { border-color: #f6efdc; background: rgba(246, 239, 220, 0.12); }
.footer__sky-btn:focus-visible { outline: 2px solid var(--color-mark); outline-offset: 2px; }
/* the map section is always on its deep ground: its text keeps the cream */
.region-map { --color-warm-white: #fbfbf9; --color-cream: #f1f1ee; }
/* at night the mountain, earth and Gulf tones are light (they are text colours on the
   dark paper), so anything that sits ON them takes the paper's dark as its ink */
:root[data-sky="dusk"] :is(.btn--sage, .btn--ocean, .btn--earth, .home-card__sample, .home-card__mine, .value__next, .pin--mine, .gallery__sample, .tcard__stat, .dock__bar .dock__primary),
:root[data-sky="night"] :is(.btn--sage, .btn--ocean, .btn--earth, .home-card__sample, .home-card__mine, .value__next, .pin--mine, .gallery__sample, .tcard__stat, .dock__bar .dock__primary) { color: #142a2f; }
/* THE LIT WINDOWS. At night a house is dark outside and lit within. The cards where a
   visitor writes to Amanda (the valuation card, a home's tour and ask cards, the review
   form, the contact card) and the light card (a sun arc on paper) keep the day's paper and ink after dark, with a lamp's warmth
   at their edge, so the thing to do next is the brightest thing on the page. Everything
   inside them reads the day's tokens again. */
:root:is([data-sky="dusk"], [data-sky="night"]) :is(.value__card, .tour, .ask, .rv__ask, .contact-card, .light, .hero-ask) {
  color-scheme: light;
  --color-cream: #f1f1ee; --color-warm-white: #fbfbf9; --color-mist: #f3f1ea; --color-shell: #f6f1e7; --color-sand: #e8dfcf;
  --color-sage-pale: #eef2ea; --color-ocean-pale: #e6f3f4; --color-earth-pale: #f5efe6; --color-rule: #e2e0da;
  --color-ink: #1e1c18; --color-ink-70: #3a372f; --color-ink-40: #6c6759; --color-ink-20: #b8b2a6;
  --color-sage: #3f5a44; --color-sage-mid: #6f8a68; --color-ocean: #1f6f86; --color-ocean-mid: #3f9bb0;
  --color-cedar: #8b5e3c; --color-earth: #7a5c3a; --color-earth-light: #c4a882; --color-accent: #5a6b6e;
  --color-brand: #183639; --color-brand-soft: #2a4e51; --color-brand-ground: #183639; --color-on-brand: #c9d6d3;
  --paper-2: #efece4; --surface: #fbfbf9; --color-gold: #a27f2b;
  --shadow-sm: 0 2px 8px -3px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 0 0 1px rgba(240, 233, 218, 0.1), 0 14px 40px -18px rgba(0, 0, 0, 0.55), 0 0 90px -20px rgba(224, 184, 111, 0.3);
  --shadow-lg: 0 0 0 1px rgba(240, 233, 218, 0.1), 0 50px 100px -40px rgba(0, 0, 0, 0.75), 0 0 140px -30px rgba(224, 184, 111, 0.35);
  background: var(--color-warm-white); color: var(--color-ink);
}
:root:is([data-sky="dusk"], [data-sky="night"]) :is(.value__card, .tour, .ask, .rv__ask, .contact-card, .light, .hero-ask) :is(.btn--sage, .btn--ocean, .btn--earth, .value__next) { color: #fff; }
:root[data-season="spring"]:is([data-sky="dusk"], [data-sky="night"]) :is(.value__card, .tour, .ask, .rv__ask, .contact-card, .light, .hero-ask) { --color-sage: #4a7640; --color-sage-mid: #7ea85f; --color-sage-pale: #eef4e6; --color-cedar: #8b5e3c; }
:root[data-season="fall"]:is([data-sky="dusk"], [data-sky="night"]) :is(.value__card, .tour, .ask, .rv__ask, .contact-card, .light, .hero-ask) { --color-sage: #9a5230; --color-sage-mid: #c47d3d; --color-sage-pale: #f5ecdf; --color-cedar: #7b4a2c; }
:root[data-season="winter"]:is([data-sky="dusk"], [data-sky="night"]) :is(.value__card, .tour, .ask, .rv__ask, .contact-card, .light, .hero-ask) { --color-sage: #4a6168; --color-sage-mid: #7c9397; --color-sage-pale: #edf1f2; --color-cedar: #6f5a4a; }
/* things that are light by nature stay light at night: the printed postcard, photos' chrome */
.postcard { --color-ink: #1e1c18; --color-ink-70: #3a372f; --color-ink-40: #6c6759; --color-brand: #183639; --color-warm-white: #fbfbf9; }
:root[data-sky="dusk"] body::before, :root[data-sky="night"] body::before { mix-blend-mode: screen; opacity: 0.12; }
html.is-skying body, html.is-skying .nav, html.is-skying .section, html.is-skying .card, html.is-skying .footer { transition: background-color 0.7s var(--ease), color 0.7s var(--ease); }

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

html {
  /* 17px base — more comfortable across generations; whole rem system scales up */
  font-size: 106.25%;
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  scroll-padding-top: var(--nav-height);
}

body {
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.72;
  color: var(--color-ink-70);
  background-color: var(--color-cream);
  background-image:
    radial-gradient(120% 80% at 100% 0%, rgba(90, 107, 110, 0.05) 0%, transparent 55%),
    radial-gradient(100% 70% at 0% 100%, rgba(30, 28, 24, 0.04) 0%, transparent 50%);
  background-attachment: fixed;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  font-feature-settings: "kern" 1, "liga" 1;
}

/* Subtle printed-paper grain over the whole page */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 9999;
  pointer-events: none;
  opacity: 0.22;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.045'/%3E%3C/svg%3E");
}

/* Keyboard and screen-reader visitors get a front door: the first Tab on any page */
.skip-link { position: absolute; left: 1rem; top: -6rem; z-index: 1000; padding: 0.85rem 1.3rem; border-radius: 0 0 var(--radius) var(--radius); background: var(--color-brand); color: var(--color-mark); font-weight: 600; text-decoration: none; transition: top 0.2s var(--ease); }
.skip-link:focus { top: 0; outline: 3px solid var(--color-earth-light); outline-offset: 2px; }
main:focus { outline: none; }
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; }
button { font-family: inherit; cursor: pointer; border: none; background: none; }

::selection { background: var(--color-sage); color: var(--color-warm-white); }

/* Visible keyboard focus for accessibility across all interactive elements */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
.btn:focus-visible {
  outline: 3px solid var(--color-ocean);
  outline-offset: 3px;
  border-radius: 2px;
}

/* ---------- Typography ---------- */
h1, h2, h3, h4 {
  font-family: var(--font-display);
  color: var(--color-ink);
  font-weight: 400;
  line-height: 1.04;
  letter-spacing: -0.018em;
  font-optical-sizing: auto;
}

.display-xl {
  font-size: clamp(3rem, 8.2vw, 6.8rem);
  font-weight: 300;
  line-height: 0.98;
  letter-spacing: -0.03em;
}

.display-lg { font-size: clamp(2.4rem, 5.6vw, 4.6rem); font-weight: 300; letter-spacing: -0.025em; }
.display-md { font-size: clamp(1.9rem, 4vw, 3.3rem); font-weight: 400; }

/* Body emphasis only — display headings stay upright for a neutral tone */
em, .italic { font-style: italic; }
h1 em, h2 em, h3 em, h4 em,
.display-xl em, .display-lg em, .display-md em { font-style: normal; color: var(--color-sage); }

p { margin-bottom: 1.15em; }
p:last-child { margin-bottom: 0; }

.lead {
  font-size: clamp(1.08rem, 1.55vw, 1.3rem);
  line-height: 1.75;
  color: var(--color-ink-70);
  font-weight: 400;
}

.overline {
  font-family: var(--font-body);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--color-ink-40);
}

.italic-tag {
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(1.3rem, 2.2vw, 1.8rem);
  color: var(--color-ink-70);
}

/* Section numeral (editorial) */
.sec-num {
  font-family: var(--font-body);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  color: var(--color-accent);
}

/* ---------- Layout helpers ---------- */
.container {
  width: 100%;
  max-width: var(--max-width);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section { padding-block: clamp(4rem, 9vw, var(--space-2xl)); }

.section-header { margin-bottom: var(--space-lg); }
.section-header .overline { margin-bottom: 1rem; display: block; }

/* Eyebrow with a leading hairline tick */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.85rem;
  font-family: var(--font-body);
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--color-sage);
}
.eyebrow::before {
  content: none;
  width: 34px;
  height: 1px;
  background: var(--color-accent);
}
.eyebrow--center::after {
  content: '';
  width: 34px;
  height: 1px;
  background: var(--color-accent);
}

.text-sage  { color: var(--color-sage); }
.text-ocean { color: var(--color-ocean); }
.text-earth { color: var(--color-earth); }

.bg-cream { background: transparent; }
.bg-paper { background: var(--color-warm-white); }
.bg-sage-pale { background: var(--color-sage-pale); }
.bg-ocean-pale { background: var(--color-ocean-pale); }
.bg-earth-pale { background: var(--color-earth-pale); }

/* ============================================================
   IMAGE HELPERS — real photos + graceful gradient fallbacks
   ============================================================ */
.img-placeholder {
  position: relative;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  overflow: hidden;
}
.img-placeholder::after {
  content: attr(data-label);
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-body);
  font-size: 0.66rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
  pointer-events: none;
  transition: opacity var(--transition);
}
.img-placeholder.has-image::after,
.img-placeholder[style*="background-image"]::after { opacity: 0; }

.grad-georgia {
  background-color: #2a3a2c;
  background-image:
    linear-gradient(180deg, rgba(120, 140, 150, 0.45) 0%, rgba(74, 94, 74, 0.2) 38%, rgba(30, 42, 32, 0.9) 100%),
    linear-gradient(160deg, #5a6f5c 0%, #3c4f3d 45%, #232f25 100%);
}
.grad-alabama {
  background-color: #143040;
  background-image:
    linear-gradient(180deg, #1b3a52 0%, #2d6b8a 52%, #4a8fa8 78%, #6fb4c4 100%),
    radial-gradient(120% 80% at 50% 0%, rgba(255, 250, 240, 0.18) 0%, transparent 55%);
}
/* Refined monogram placeholder (used for Amanda's headshot until real photo) */
.grad-warm {
  background-color: #e7d6c8;
  background-color: var(--color-sand);
  background-image: linear-gradient(150deg, #f3ebdc 0%, #e3d6bd 55%, #d3bf9d 100%);
}
.monogram::before {
  content: 'AB';
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-family: var(--font-display);
  font-size: clamp(3rem, 8vw, 5rem);
  font-style: normal;
  font-weight: 500;
  color: rgba(30, 28, 24, 0.32);
  letter-spacing: 0.08em;
}
.monogram::after { opacity: 0 !important; }

/* Duotone warm overlay for photographic sections */
.photo-warm { position: relative; }
.photo-warm::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(122, 92, 58, 0.05), rgba(30, 28, 24, 0.10));
  mix-blend-mode: multiply;
  pointer-events: none;
}

/* ============================================================
   SECTION 1 — HERO (split photography + editorial plate)
   ============================================================ */
.hero {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-top: var(--nav-height);
  overflow: hidden;
}

.hero__split {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
}
.hero__half {
  position: relative;
  isolation: isolate;
  background-size: cover;
  background-position: center;
  overflow: hidden;
  transform: scale(1.04);
  animation: heroPan 18s ease-out forwards;
}
.hero__half:nth-child(2) { animation-delay: 0.1s; }
@keyframes heroPan { to { transform: scale(1); } }

/* Background video (10s loop). Poster image shows instantly and remains as
   fallback if no .mp4 is present yet — drop files into assets/videos/. */
.hero__video {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.hero__half::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(180deg, rgba(20, 24, 22, 0.26) 0%, rgba(20, 24, 22, 0.12) 45%, rgba(20, 24, 22, 0.40) 100%);
}
/* Center seam — a fine luminous divider between the two worlds */
.hero__split::after {
  content: '';
  position: absolute;
  top: 0; bottom: 0; left: 50%;
  width: 1px;
  background: linear-gradient(180deg, transparent, rgba(255,253,249,0.55), transparent);
  transform: translateX(-50%);
  z-index: 2;
}

.hero__label {
  position: absolute;
  bottom: clamp(1.5rem, 4vw, 3.25rem);
  z-index: 3;
  font-family: var(--font-body);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.94);
  text-shadow: 0 1px 10px rgba(0, 0, 0, 0.55);
  display: flex;
  align-items: center;
  gap: 0.7rem;
  opacity: 0;
  animation: fadeUp 1s var(--ease) 1.1s forwards;
}
.hero__label b { font-weight: 600; }
.hero__label--left { left: clamp(1.5rem, 4vw, 3.25rem); }
.hero__label--right { right: clamp(1.5rem, 4vw, 3.25rem); flex-direction: row-reverse; }

/* Editorial center plate */
.hero__panel {
  position: relative;
  z-index: 4;
  /* Fluid: scales with the viewport, capped so it never fills a phone screen */
  width: clamp(17rem, 42vw, 31rem);
  max-height: calc(100svh - var(--nav-height) - 3rem);
  overflow: auto;
  margin: 1.5rem var(--gutter);
  padding: clamp(1.6rem, 1rem + 2.4vw, 3rem) clamp(1.4rem, 0.8rem + 2.2vw, 2.75rem);
  text-align: center;
  background: linear-gradient(180deg, rgba(255, 254, 251, 0.90), rgba(251, 250, 247, 0.84));
  backdrop-filter: blur(22px) saturate(1.18);
  -webkit-backdrop-filter: blur(22px) saturate(1.18);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  border: 1px solid rgba(255, 255, 255, 0.65);
}
/* Centered top accent bar */
.hero__panel::before {
  content: '';
  position: absolute;
  top: 0; left: 50%;
  transform: translateX(-50%);
  width: 64px;
  height: 3px;
  border-radius: 0 0 3px 3px;
  background: var(--color-accent);
  pointer-events: none;
}
.hero__panel > * { opacity: 0; animation: fadeUp 0.9s var(--ease) forwards; }
.hero__panel > *:nth-child(1) { animation-delay: 0.25s; }
.hero__panel > *:nth-child(2) { animation-delay: 0.38s; }
.hero__panel > *:nth-child(3) { animation-delay: 0.50s; }
.hero__panel > *:nth-child(4) { animation-delay: 0.60s; }
.hero__panel > *:nth-child(5) { animation-delay: 0.70s; }
.hero__panel > *:nth-child(6) { animation-delay: 0.80s; }
.hero__panel > *:nth-child(7) { animation-delay: 0.90s; }

@keyframes fadeUp { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }

.hero__panel .logo-mark { margin: 0 auto 1.4rem; }
.hero__eyebrow {
  font-family: var(--font-body); font-size: 0.95rem; font-weight: 500; letter-spacing: 0.02em;
  color: var(--color-accent);
}
.hero__brand {
  font-family: var(--font-display);
  font-size: clamp(2.4rem, 5vw, 3.6rem);
  font-weight: 500;
  letter-spacing: 0.005em;
  color: var(--color-ink);
  line-height: 1.02;
  margin-top: 0.4rem;
}
.hero__rule {
  display: flex; align-items: center; justify-content: center;
  margin: 1.15rem auto;
}
.hero__rule::before { content: ''; width: 72px; height: 1px; background: var(--color-ink-20); }
.hero__rule span { display: none; }
.hero__rule::after { content: none; }

.hero__sub {
  font-family: var(--font-body);
  font-size: 0.72rem; font-weight: 600; letter-spacing: 0.2em;
  text-transform: uppercase; color: var(--color-ink-40);
}
.hero__tagline {
  font-family: var(--font-display); font-style: normal;
  font-size: clamp(1.35rem, 2.6vw, 1.85rem);
  color: var(--color-ink-70); margin: 1.25rem 0 1.9rem;
}
.hero__cta { display: flex; gap: 0.85rem; justify-content: center; flex-wrap: wrap; }

.hero__scroll {
  position: absolute; bottom: 1.4rem; left: 50%; transform: translateX(-50%);
  z-index: 4; width: 1px; height: 60px; background: rgba(255, 255, 255, 0.35); overflow: hidden;
}
.hero__scroll::after {
  content: ''; position: absolute; top: -50%; left: 0; width: 100%; height: 50%;
  background: var(--color-warm-white); animation: scrollLine 2.4s var(--ease) infinite;
}
@keyframes scrollLine { 0% { top: -50%; } 100% { top: 100%; } }

/* ------------------------------------------------------------
   HERO VARIANT — single full-bleed transition video, no card
   Branding sits directly on the footage. A CSS crossfade between
   the mountain and coast stills plays as the fallback until a
   real mountains→coast video is dropped at
   assets/videos/hero-transition.mp4
   ------------------------------------------------------------ */
.hero__media { position: absolute; inset: 0; overflow: hidden; }
.hero__fade {
  position: absolute; inset: 0; background-size: cover; background-position: center;
  transform: scale(1.04); animation: heroPan 20s ease-out forwards;
}
.hero__fade--al { opacity: 0; animation: heroPan 20s ease-out forwards, heroCrossfade 16s ease-in-out infinite; }
@keyframes heroCrossfade {
  0%, 34%   { opacity: 0; }
  50%, 84%  { opacity: 1; }
  100%      { opacity: 0; }
}
/* Real video (if present) layers above the still crossfade */
.hero--video .hero__video { position: absolute; inset: 0; z-index: 2; width: 100%; height: 100%; object-fit: cover; }
/* Legibility scrim + a soft brand wash */
.hero__media::after {
  content: ''; position: absolute; inset: 0; z-index: 3;
  background:
    linear-gradient(180deg, rgba(20,24,22,0.42) 0%, rgba(20,24,22,0.22) 38%, rgba(20,24,22,0.62) 100%);
}

.hero__content {
  position: relative; z-index: 4; width: min(640px, 92vw);
  margin-inline: var(--gutter); text-align: center; color: #fff;
}
.hero__content .logo-mark { margin: 0 auto 1.4rem; }
.hero__content > * { opacity: 0; animation: fadeUp 0.9s var(--ease) forwards; }
.hero__content > *:nth-child(1) { animation-delay: 0.25s; }
.hero__content > *:nth-child(2) { animation-delay: 0.38s; }
.hero__content > *:nth-child(3) { animation-delay: 0.50s; }
.hero__content > *:nth-child(4) { animation-delay: 0.62s; }
.hero__content > *:nth-child(5) { animation-delay: 0.74s; }
.hero__content > *:nth-child(6) { animation-delay: 0.86s; }

.hero--video .hero__eyebrow { color: rgba(255,255,255,0.85); }
.hero--video .hero__brand { color: #fff; text-shadow: 0 2px 30px rgba(0,0,0,0.35); }
.hero--video .hero__tagline { color: rgba(255,255,255,0.94); }
.hero--video .hero__rule::before { background: rgba(255,255,255,0.55); }
@media (prefers-reduced-motion: reduce) {
  .hero__content > * { opacity: 1; }
  .hero__fade--al { opacity: 0; } /* settle on the mountains still */
}

/* ============================================================
   SECTION 2 — MARQUEE STRIP
   ============================================================ */
.marquee {
  background: var(--color-brand);
  color: var(--color-cream);
  padding-block: 1.5rem;
  overflow: hidden;
  white-space: nowrap;
  border-block: 1px solid rgba(255,255,255,0.06);
}
.marquee__track { display: inline-flex; align-items: center; animation: marqueeScroll 42s linear infinite; will-change: transform; }
.marquee:hover .marquee__track { animation-play-state: paused; }
.marquee__item {
  font-family: var(--font-display); font-style: normal; font-weight: 500;
  font-size: clamp(1.3rem, 2vw, 1.85rem); letter-spacing: 0.03em;
  color: var(--color-cream); padding-inline: 1.7rem;
}
.marquee__item::after { content: '—'; margin-left: 3.4rem; color: var(--color-ink-40); font-style: normal; }
@keyframes marqueeScroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ============================================================
   SECTION 3 — INTRO / ABOUT TEASER (editorial asymmetric)
   ============================================================ */
.intro__grid {
  display: grid;
  grid-template-columns: 1.55fr 1fr;
  gap: clamp(2rem, 6vw, 5.5rem);
  align-items: center;
}
.intro__copy .eyebrow { margin-bottom: 1.5rem; }
.intro__copy .display-md { margin-bottom: 1.6rem; }
.intro__copy .lead { margin-bottom: 1.6rem; }
.intro__copy .display-md em { color: var(--color-sage); }

.text-link {
  display: inline-flex; align-items: center; gap: 0.6rem;
  font-family: var(--font-body); font-weight: 500; font-size: 1rem;
  letter-spacing: 0; color: var(--color-ink);
  transition: gap var(--transition-fast), color var(--transition-fast);
}
.text-link::after { content: '→'; transition: transform var(--transition-fast); }
.text-link:hover { gap: 0.9rem; color: var(--color-sage); }
.text-link.text-sage:hover  { color: var(--color-sage-mid); }
.text-link.text-ocean:hover { color: var(--color-ocean-mid); }
.text-link.text-earth:hover { color: var(--color-earth); }

/* Agent card */
.agent-card {
  position: relative;
  background: var(--color-warm-white);
  border: 1px solid var(--color-rule);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-md);
}
.agent-card::before {
  content: ''; position: absolute; top: 0; left: 0; width: 48px; height: 3px; background: var(--color-accent); pointer-events: none; z-index: 1;
}
.agent-card__photo { aspect-ratio: 4 / 5; width: 100%; }
.agent-card__body { padding: 1.6rem 1.6rem 1.85rem; position: relative; }
.agent-card__name { font-family: var(--font-display); font-size: 1.9rem; color: var(--color-ink); }
.agent-card__title {
  font-size: 0.7rem; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--color-sage); font-weight: 600; margin-bottom: 1.1rem;
}
.agent-card__contact { font-size: 0.95rem; line-height: 2; }
.agent-card__contact a:hover { color: var(--color-ocean); }
.agent-card__compliance {
  margin-top: 1.1rem; padding-top: 1.1rem; border-top: 1px solid var(--color-rule);
  font-size: 0.72rem; color: var(--color-ink-40); line-height: 1.6;
}

/* ============================================================
   SECTION 4 — COMMUNITIES (two full-bleed panels)
   ============================================================ */
.communities__panels {
  display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem;
  max-width: var(--max-width); margin-inline: auto; padding-inline: var(--gutter);
}
.community-panel {
  position: relative; min-height: 620px; display: flex; align-items: flex-end;
  padding: clamp(2rem, 4vw, 3.5rem); overflow: hidden; isolation: isolate;
  border-radius: var(--radius-lg); box-shadow: var(--shadow-md);
}
.community-panel__bg { position: absolute; inset: 0; z-index: -2; transition: transform 0.9s var(--ease); }
.community-panel::before {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(0deg, rgba(20, 24, 22, 0.82) 0%, rgba(20, 24, 22, 0.18) 58%, rgba(20, 24, 22, 0.08) 100%);
  transition: background var(--transition);
}
.community-panel:hover .community-panel__bg { transform: scale(1.07); }
.community-panel:hover::before { background: linear-gradient(0deg, rgba(20, 24, 22, 0.88) 0%, rgba(20, 24, 22, 0.34) 70%, rgba(20, 24, 22, 0.18) 100%); }
.community-panel__content { color: var(--color-warm-white); max-width: 32rem; }
.community-panel__index { font-family: var(--font-body); font-weight: 600; font-size: 0.72rem; letter-spacing: 0.18em; color: rgba(255,255,255,0.72); margin-bottom: 0.85rem; }
.community-panel__tag {
  display: inline-block; font-size: 0.66rem; font-weight: 600; letter-spacing: 0.24em;
  text-transform: uppercase; padding: 0.4rem 0.9rem; margin-bottom: 1.1rem;
  backdrop-filter: blur(6px); border: 1px solid rgba(255,255,255,0.3);
}
.community-panel--ga .community-panel__tag { background: rgba(74, 94, 74, 0.6); }
.community-panel--al .community-panel__tag { background: rgba(45, 107, 138, 0.6); }
.community-panel__title { font-family: var(--font-display); font-size: clamp(2.4rem, 4vw, 3.4rem); color: #fff; margin-bottom: 0.7rem; line-height: 1; }
.community-panel__desc { color: rgba(255, 255, 255, 0.85); font-size: 1rem; margin-bottom: 1.2rem; }
.community-panel__towns { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 1.6rem; }
.community-panel__towns span { font-size: 0.7rem; letter-spacing: 0.08em; padding: 0.3rem 0.7rem; border: 1px solid rgba(255, 255, 255, 0.35); color: rgba(255, 255, 255, 0.92); }
.community-panel .text-link { color: #fff; }
.community-panel .text-link:hover { color: var(--color-warm-white); }

/* ============================================================
   SECTION 5 — SERVICES (image-topped editorial cards)
   ============================================================ */
.services__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.75rem; }
.service-card {
  position: relative; background: var(--color-warm-white); border: 1px solid var(--color-rule);
  border-radius: var(--radius-lg);
  overflow: hidden; transition: transform var(--transition), box-shadow var(--transition);
  display: flex; flex-direction: column;
}
.service-card__media { position: relative; aspect-ratio: 3 / 2; overflow: hidden; }
.service-card__media .service-card__img { position: absolute; inset: 0; background-size: cover; background-position: center; transition: transform 0.8s var(--ease); }
.service-card:hover .service-card__img { transform: scale(1.06); }
.service-card__media::after { content: ''; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(20,24,22,0.25), transparent 60%); }
.service-card__num {
  position: absolute; top: 1rem; left: 1.1rem; z-index: 2;
  font-family: var(--font-body); font-weight: 600; font-size: 0.78rem; letter-spacing: 0.14em; color: #fff;
  text-shadow: 0 1px 6px rgba(0,0,0,0.45);
}
.service-card__body { padding: 1.6rem 1.6rem 1.85rem; flex: 1; display: flex; flex-direction: column; }
.service-card__body::before { content: ''; width: 36px; height: 2px; margin-bottom: 1.1rem; display: block; }
.service-card--sage  .service-card__body::before { background: var(--color-sage); }
.service-card--earth .service-card__body::before { background: var(--color-earth); }
.service-card--ocean .service-card__body::before { background: var(--color-ocean); }
.service-card__title { font-family: var(--font-display); font-size: 1.75rem; margin-bottom: 0.6rem; }
.service-card__desc { font-size: 0.96rem; color: var(--color-ink-70); margin-bottom: 1.35rem; flex: 1; }
.service-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-md); }

/* ============================================================
   SECTION 6 — BUYERS / SELLERS SPLIT
   ============================================================ */
.bs-split { display: grid; grid-template-columns: 1fr 1fr; }
.bs-panel { padding: clamp(3rem, 6.5vw, 6rem) clamp(2rem, 5vw, 5rem); position: relative; }
.bs-panel--buyers  { background: var(--color-sage-pale); }
.bs-panel--sellers { background: var(--color-ocean-pale); }
.bs-panel--buyers::after { content: ''; position: absolute; top: clamp(3rem,6.5vw,6rem); right: 0; bottom: clamp(3rem,6.5vw,6rem); width: 1px; background: rgba(74,94,74,0.18); }
.bs-panel .eyebrow { margin-bottom: 1.1rem; }
.bs-panel--buyers .eyebrow::before  { background: var(--color-sage); }
.bs-panel--sellers .eyebrow::before { background: var(--color-ocean); }
.bs-panel__num { font-family: var(--font-body); font-weight: 600; font-size: 0.78rem; letter-spacing: 0.16em; margin-bottom: 0.6rem; }
.bs-panel--buyers .bs-panel__num { color: var(--color-sage); }
.bs-panel--sellers .bs-panel__num { color: var(--color-ocean); }
.bs-panel__title { margin-bottom: 1.1rem; }
.bs-panel__body { margin-bottom: 1.6rem; max-width: 31rem; }
.bs-list { margin-bottom: 1.9rem; }
.bs-list li { position: relative; padding-left: 1.7rem; margin-bottom: 0.8rem; font-size: 0.98rem; color: var(--color-ink-70); }
.bs-list li::before { content: ''; position: absolute; left: 0; top: 0.62em; width: 7px; height: 7px; transform: rotate(45deg); }
.bs-panel--buyers .bs-list li::before  { background: var(--color-sage); }
.bs-panel--sellers .bs-list li::before { background: var(--color-ocean); }

/* ============================================================
   SECTION 7 — TESTIMONIALS
   ============================================================ */
.testimonials__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 1.5rem; margin-bottom: var(--space-lg); flex-wrap: wrap; }
.testimonials__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.75rem; }
.testimonial-card {
  position: relative; background: var(--color-warm-white); border: 1px solid var(--color-rule);
  border-radius: var(--radius-lg);
  padding: 2.25rem 1.9rem; transition: transform var(--transition), box-shadow var(--transition);
}
.testimonial-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-md); }
.testimonial-card__stars { color: var(--color-earth-light); letter-spacing: 0.18em; font-size: 0.9rem; margin-bottom: 1.1rem; }
.testimonial-card__mark { position: absolute; top: 1.1rem; right: 1.6rem; font-family: var(--font-display); font-size: 5rem; line-height: 1; color: var(--color-sage-pale); pointer-events: none; }
.testimonial-card__quote { font-family: var(--font-display); font-style: italic; font-size: 1.3rem; line-height: 1.5; color: var(--color-ink); margin-bottom: 1.6rem; position: relative; z-index: 1; }
.testimonial-card__author { display: flex; align-items: center; gap: 0.9rem; }
.testimonial-card__avatar { width: 46px; height: 46px; display: grid; place-items: center; background: var(--color-sage); color: #fff; font-family: var(--font-display); font-size: 1.1rem; flex-shrink: 0; }
.testimonial-card:nth-child(2) .testimonial-card__avatar { background: var(--color-ocean); }
.testimonial-card:nth-child(3) .testimonial-card__avatar { background: var(--color-earth); }
.testimonial-card__name { font-weight: 600; color: var(--color-ink); font-size: 0.92rem; }
.testimonial-card__loc  { font-size: 0.8rem; color: var(--color-ink-40); letter-spacing: 0.04em; }

/* ============================================================
   SECTION 8 — NEWSLETTER
   ============================================================ */
.newsletter { background: var(--color-sage); color: var(--color-cream); position: relative; overflow: hidden; }
.newsletter::before { content: ''; position: absolute; inset: 0; background: radial-gradient(100% 120% at 100% 0%, rgba(255,253,249,0.10), transparent 55%); pointer-events: none; }
.newsletter__inner { display: grid; grid-template-columns: 1.1fr 1fr; gap: clamp(1.5rem, 4vw, 4rem); align-items: center; position: relative; }
.newsletter .eyebrow { color: rgba(255,255,255,0.75); margin-bottom: 1.1rem; }
.newsletter .eyebrow::before { background: var(--color-earth-light); }
.newsletter__title { color: var(--color-warm-white); margin-bottom: 0.85rem; }
.newsletter__text { color: rgba(255, 255, 255, 0.85); max-width: 32rem; }
.newsletter__form { display: flex; gap: 0.65rem; flex-wrap: wrap; }
.newsletter__input {
  flex: 1 1 240px; padding: 1rem 1.2rem; border-radius: var(--radius);
  border: 1px solid rgba(255, 255, 255, 0.3); background: rgba(255, 255, 255, 0.1);
  color: #fff; font-family: inherit; font-size: 1rem;
}
.newsletter__input::placeholder { color: rgba(255, 255, 255, 0.6); }
.newsletter__input:focus { outline: none; border-color: var(--color-earth-light); background: rgba(255, 255, 255, 0.16); }

/* ============================================================
   SECTION 9 — CONTACT CTA BANNER
   ============================================================ */
.contact-banner { background: var(--paper-2); }
.contact-banner__inner { display: grid; grid-template-columns: 1.3fr 1fr; gap: clamp(1.5rem, 4vw, 4rem); align-items: center; }
.contact-banner__title { margin-bottom: 0.85rem; }
.contact-banner__text { max-width: 34rem; }
.contact-banner__details { display: flex; flex-direction: column; gap: 0.7rem; align-items: flex-start; }
.contact-banner__line { font-size: 1.1rem; font-weight: 500; color: var(--color-ink); }
.contact-banner__line span { color: var(--color-ink-40); font-weight: 400; font-size: 0.88rem; letter-spacing: 0; display: block; margin-bottom: 0.1rem; }

/* ============================================================
   FOOTER
   ============================================================ */
.footer { color: var(--color-on-brand); padding-top: calc(clamp(3.5rem, 6vw, 5.5rem) + 46px); margin-top: -46px; position: relative; isolation: isolate; --shore: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='320' height='60'%3E%3Cpath d='M0,60 L0,32.9 L5,34.4 L10,35.9 L15,37.1 L20,38.2 L25,39.1 L30,39.8 L35,40.3 L40,40.6 L45,40.7 L50,40.6 L55,40.4 L60,40.1 L65,39.7 L70,39.2 L75,38.7 L80,38.1 L85,37.6 L90,37.1 L95,36.6 L100,36.2 L105,35.8 L110,35.5 L115,35.2 L120,35.0 L125,34.8 L130,34.6 L135,34.5 L140,34.3 L145,34.0 L150,33.7 L155,33.3 L160,32.9 L165,32.3 L170,31.6 L175,30.7 L180,29.8 L185,28.7 L190,27.6 L195,26.3 L200,25.0 L205,23.7 L210,22.3 L215,21.0 L220,19.8 L225,18.6 L230,17.6 L235,16.8 L240,16.1 L245,15.7 L250,15.5 L255,15.5 L260,15.8 L265,16.4 L270,17.2 L275,18.2 L280,19.4 L285,20.8 L290,22.4 L295,24.1 L300,25.8 L305,27.6 L310,29.4 L315,31.2 L320,32.9 L320,60Z'/%3E%3C/svg%3E"); }
/* The shore: the footer's top edge is two rolling waves (front in the
   footer's own colour, back a lighter teal), moving at different speeds */
.footer::before, .footer::after { content: ''; position: absolute; left: 0; right: 0; pointer-events: none; }
.footer::before {
  inset: 0; z-index: -1;
  /* the water: the sky's colour on the surface, the sea below it, and the sun's
     (or the moon's) path of light on the water under where it sits in the header */
  background:
    radial-gradient(34% 240px at calc(4% + var(--sun, 0.5) * 92%) 0, var(--sun-glow), transparent 72%),
    linear-gradient(180deg, var(--shore-0) 0, var(--shore-1) 120px, var(--shore-2) 100%);
  -webkit-mask: var(--shore) 0 0 / 320px 60px repeat-x, linear-gradient(#000, #000) 0 58px / 100% 100% no-repeat;
          mask: var(--shore) 0 0 / 320px 60px repeat-x, linear-gradient(#000, #000) 0 58px / 100% 100% no-repeat;
}
.footer::after {
  top: -16px; height: 76px; z-index: -2; background: var(--shore-0); opacity: 0.75;
  -webkit-mask: var(--shore) 0 0 / 420px 60px repeat-x, linear-gradient(#000, #000) 0 58px / 100% 100% no-repeat;
          mask: var(--shore) 0 0 / 420px 60px repeat-x, linear-gradient(#000, #000) 0 58px / 100% 100% no-repeat;
}
@media (prefers-reduced-motion: reduce) { .footer::before, .footer::after { animation: none; } }
/* the footer logo draws itself in when the footer is reached (main.js) */
.footer .logo-glyph { transition: clip-path 2s cubic-bezier(.45,.05,.25,1); }
.js-shore .footer .logo-glyph { clip-path: inset(0 100% 0 0); }
.js-shore .footer.is-in .logo-glyph { clip-path: inset(0 0 0 0); }
/* Start here: four ways in at the top of every footer (main.js) */
.footer__start { margin-bottom: clamp(2.5rem, 5vw, 4rem); padding-bottom: clamp(2rem, 4vw, 3rem); border-bottom: 1px solid rgba(255,255,255,0.1); }
.footer__start-title { font-family: var(--font-display); font-size: 1.6rem; color: var(--color-warm-white); margin: 0 0 1.1rem; }
.footer__start-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.9rem; }
.footer__start-row a { position: relative; display: grid; gap: 0.2rem; padding: 1.1rem 1.2rem 1.1rem 3.4rem; border-radius: var(--radius-lg); background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.12); color: var(--color-on-brand); transition: background var(--transition-fast), border-color var(--transition-fast), transform var(--transition-fast); }
.footer__start-row a:hover { background: rgba(255,255,255,0.11); border-color: rgba(255,255,255,0.3); transform: translateY(-2px); }
.footer__start-row a:focus-visible { outline: 2px solid var(--color-mark); outline-offset: 2px; }
.footer__start-row svg { position: absolute; left: 1.1rem; top: 1.2rem; width: 22px; height: 22px; fill: none; stroke: var(--color-mark); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.footer__start-row b { font-family: var(--font-display); font-weight: 500; font-size: 1.25rem; line-height: 1.15; color: var(--color-warm-white); }
.footer__start-row span { font-size: 0.82rem; line-height: 1.4; }
.footer__start-row a:first-child b { color: var(--color-mark); }
@media (max-width: 900px) { .footer__start-row { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .footer__start-row { grid-template-columns: 1fr; } }
.footer__grid { display: grid; grid-template-columns: 1.4fr 1.2fr 1fr 1fr; gap: clamp(1.75rem, 4vw, 3rem); padding-bottom: 3.5rem; }
.footer__brand-name { font-family: var(--font-display); font-size: 1.7rem; color: var(--color-warm-white); margin: 1.1rem 0 0.9rem; }
.footer__compliance { font-size: 0.82rem; line-height: 1.75; color: var(--color-on-brand); max-width: 22rem; }
.footer__col-title { font-family: var(--font-body); font-style: normal; font-size: 0.8rem; font-weight: 600; letter-spacing: 0.02em; color: var(--color-mark); margin-bottom: 1.35rem; }
.footer__links { display: grid; grid-template-columns: 1fr 1fr; gap: 0.6rem 1rem; }
.footer__links a, .footer__contact a { font-size: 0.9rem; color: var(--color-on-brand); transition: color var(--transition-fast); }
.footer__links a:hover, .footer__contact a:hover { color: var(--color-warm-white); }
.footer__contact { font-size: 0.9rem; line-height: 2; }
.footer__legal { font-size: 0.8rem; line-height: 1.85; color: var(--color-on-brand); }
.footer__bottom { border-top: 1px solid rgba(255, 255, 255, 0.08); padding-block: 1.6rem; display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; font-size: 0.78rem; color: var(--color-on-brand); }
.footer__bottom-left { display: flex; align-items: center; gap: 0.8rem; }
.footer__eho { width: 26px; height: 26px; color: var(--color-on-brand); flex-shrink: 0; }
.footer__bottom-links { display: flex; gap: 1.4rem; }
.footer__bottom-links a:hover { color: var(--color-warm-white); }

/* ============================================================
   SCROLL REVEAL
   ============================================================ */
.reveal { opacity: 0; transform: translateY(32px); transition: opacity 0.9s var(--ease-out-expo), transform 0.9s var(--ease-out-expo); }
.reveal.is-visible { opacity: 1; transform: none; }
.reveal[data-delay="1"] { transition-delay: 0.1s; }
.reveal[data-delay="2"] { transition-delay: 0.2s; }
.reveal[data-delay="3"] { transition-delay: 0.3s; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; }
  .reveal, .hero__panel > *, .hero__label { opacity: 1 !important; transform: none !important; }
}

/* ============================================================
   GENERIC PAGE HEADER (interior pages)
   ============================================================ */
.page-hero { margin-top: var(--nav-height); padding-block: clamp(3.5rem, 8vw, 6.5rem); background: var(--color-warm-white); border-bottom: 1px solid var(--color-rule); position: relative; overflow: hidden; }
.page-hero::after { content: ''; position: absolute; top: 0; right: 0; width: 40%; height: 100%; background: radial-gradient(80% 100% at 100% 0%, rgba(90,107,110,0.08), transparent 70%); pointer-events: none; }
.page-hero .eyebrow { margin-bottom: 1.2rem; }
.page-hero__title { margin-bottom: 1.1rem; }
.page-hero__lead { max-width: 44rem; }
.breadcrumb { font-size: 0.9rem; letter-spacing: 0; color: var(--color-ink-40); margin-bottom: 1.6rem; }
.breadcrumb a:hover { color: var(--color-sage); }

.prose-grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: clamp(2rem, 5vw, 4.5rem); align-items: start; }

.stat-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; margin-top: 2.25rem; }
.stat { border-top: 2px solid var(--color-accent); padding-top: 1.1rem; }
.stat__num { font-family: var(--font-display); font-size: 2.75rem; color: var(--color-ink); line-height: 1; }
.stat__label { font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--color-ink-40); margin-top: 0.35rem; }

.map-placeholder { aspect-ratio: 16 / 9; border: 1px solid var(--color-rule); border-radius: var(--radius-lg); background: repeating-linear-gradient(45deg, var(--color-cream) 0 14px, var(--color-warm-white) 14px 28px); display: grid; place-items: center; color: var(--color-ink-40); font-size: 0.74rem; letter-spacing: 0.18em; text-transform: uppercase; }

.steps { counter-reset: step; display: grid; gap: 1.25rem; }
.step { display: grid; grid-template-columns: auto 1fr; gap: 1.5rem; align-items: start; padding: 1.75rem; background: var(--color-warm-white); border: 1px solid var(--color-rule); border-radius: var(--radius-lg); transition: transform var(--transition-fast), box-shadow var(--transition-fast); }
.step:hover { transform: translateX(4px); box-shadow: var(--shadow-md); }
.step::before { counter-increment: step; content: counter(step, decimal-leading-zero); font-family: var(--font-display); font-style: normal; font-weight: 500; font-size: 2.1rem; color: var(--color-accent); line-height: 1; }
.step h3 { font-size: 1.45rem; margin-bottom: 0.35rem; }

.form-grid { display: grid; gap: 1.15rem; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.15rem; }
.field label { display: block; font-size: 0.9rem; font-weight: 500; letter-spacing: 0; color: var(--color-ink-40); margin-bottom: 0.45rem; }
.field input, .field select, .field textarea { width: 100%; padding: 0.95rem 1.1rem; border: 1px solid var(--color-rule); border-radius: var(--radius); font-family: inherit; font-size: 1rem; background: var(--color-warm-white); color: var(--color-ink); transition: border-color var(--transition-fast), box-shadow var(--transition-fast); }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--color-sage); box-shadow: 0 0 0 3px var(--color-sage-pale); }
.field textarea { resize: vertical; min-height: 140px; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
/* on a tablet the footer is two columns: four fr tracks cannot shrink below their words (the brand name,
   "Contact Amanda") and overflowed the row at 1024 px, 3 px past the page on Testimonials (2 Nov) */
@media (max-width: 1100px) { .footer__grid { grid-template-columns: 1fr 1fr; } }

@media (max-width: 980px) {
  .intro__grid, .newsletter__inner, .contact-banner__inner, .prose-grid { grid-template-columns: 1fr; }
  .services__grid, .testimonials__grid { grid-template-columns: 1fr 1fr; }
  .footer__grid { grid-template-columns: 1fr 1fr; }
  .community-panel { min-height: 520px; }
}
@media (max-width: 760px) {
  .hero__split { grid-template-columns: 1fr 1fr; }
  .communities__panels, .bs-split { grid-template-columns: 1fr; }
  .bs-panel--buyers::after { display: none; }
  .services__grid, .testimonials__grid, .footer__grid, .stat-row, .form-row { grid-template-columns: 1fr; }
  .community-panel { min-height: 440px; }
  .footer__bottom { flex-direction: column; align-items: flex-start; }
}
/* On narrow screens the two-up split + centered card gets cramped — let the
   card span a comfortable width and stack its buttons. */
@media (max-width: 600px) {
  .hero__panel { width: min(92vw, 26rem); }
  .hero__brand { font-size: clamp(2rem, 8vw, 2.6rem); }
  .hero__cta { flex-direction: column; }
  .hero__cta .btn { width: 100%; }
}
@media (max-width: 380px) {
  .hero__panel { width: 94vw; margin-inline: 0; }
}

/* ---------- Footer: homes by town (internal links for visitors and search) ---------- */
.footer__towns { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem 3rem; padding: 2rem 0 2.25rem; border-top: 1px solid rgba(255,255,255,0.08); }
.footer__town-links { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.footer__town-links a { padding: 0.4rem 0.85rem; border: 1px solid rgba(255,255,255,0.16); border-radius: 999px; font-size: 0.88rem; color: var(--color-cream); transition: background var(--transition-fast), border-color var(--transition-fast); }
.footer__town-links a:hover { background: rgba(255,255,255,0.08); border-color: rgba(255,255,255,0.4); }
@media (max-width: 760px) { .footer__towns { grid-template-columns: 1fr; } }

/* Footer small text was #6c6759 on near-black (about 3:1); lifted to AA */
.footer__legal, .footer__bottom, .footer__bottom-links a { color: #a9a396; }

/* ============================================================
   PAGE TRANSITIONS — same-site navigations cross-fade, the header
   stays put, and a home's photo grows from its card into the
   gallery on its own page (main.js names the photo on click).
   Browsers without view transitions just navigate.
   ============================================================ */
@view-transition { navigation: auto; }
.nav { view-transition-name: site-nav; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: 0.32s; }
::view-transition-group(home-photo) { animation-duration: 0.7s; animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1); }
::view-transition-old(home-photo), ::view-transition-new(home-photo) { height: 100%; width: 100%; object-fit: cover; overflow: clip; }
::view-transition-group(home-photo) { border-radius: var(--radius-lg); overflow: clip; }
@media (prefers-reduced-motion: reduce) { @view-transition { navigation: none; } }

/* Blur-up: photos show a blurred preview (photos.js) until they load */
img.is-blurring { filter: blur(0); animation: none; }
img[data-ph] { transition: opacity 0.4s var(--ease); }

/* Skip link: hidden until focused */
.skip-link { position: fixed; left: 1rem; top: 0.75rem; z-index: 10000; padding: 0.8rem 1.2rem; border-radius: var(--radius); background: var(--color-brand); color: #fff; font-weight: 600; transform: translateY(-160%); transition: transform 0.2s var(--ease); }
.skip-link:focus { transform: none; outline: 3px solid var(--color-mark); outline-offset: 2px; }
main:focus { outline: none; }

/* Wave edges shared by the hero tide, the bookend, the footer shore and
   the page transition: a vertical wave (fill and foam line) and a
   horizontal one. */
:root {
  --wave-fill: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='260'%3E%3Cpath d='M80,0 L45.3,0 L47.9,5 L50.1,10 L51.8,15 L53.2,20 L54.1,25 L54.6,30 L54.8,35 L54.6,40 L54.3,45 L53.7,50 L53.0,55 L52.3,60 L51.7,65 L51.0,70 L50.5,75 L50.1,80 L49.8,85 L49.5,90 L49.4,95 L49.2,100 L49.0,105 L48.7,110 L48.2,115 L47.5,120 L46.6,125 L45.3,130 L43.8,135 L41.9,140 L39.8,145 L37.4,150 L34.8,155 L32.1,160 L29.3,165 L26.7,170 L24.1,175 L21.9,180 L20.0,185 L18.6,190 L17.7,195 L17.3,200 L17.5,205 L18.3,210 L19.7,215 L21.6,220 L23.9,225 L26.7,230 L29.7,235 L32.9,240 L36.2,245 L39.4,250 L42.5,255 L45.3,260 L80,260Z'/%3E%3C/svg%3E");
  --wave-line: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='260'%3E%3Cpath d='M45.3,0 L47.9,5 L50.1,10 L51.8,15 L53.2,20 L54.1,25 L54.6,30 L54.8,35 L54.6,40 L54.3,45 L53.7,50 L53.0,55 L52.3,60 L51.7,65 L51.0,70 L50.5,75 L50.1,80 L49.8,85 L49.5,90 L49.4,95 L49.2,100 L49.0,105 L48.7,110 L48.2,115 L47.5,120 L46.6,125 L45.3,130 L43.8,135 L41.9,140 L39.8,145 L37.4,150 L34.8,155 L32.1,160 L29.3,165 L26.7,170 L24.1,175 L21.9,180 L20.0,185 L18.6,190 L17.7,195 L17.3,200 L17.5,205 L18.3,210 L19.7,215 L21.6,220 L23.9,225 L26.7,230 L29.7,235 L32.9,240 L36.2,245 L39.4,250 L42.5,255 L45.3,260' fill='none' stroke='%23fff' stroke-width='2' stroke-linejoin='round'/%3E%3C/svg%3E");
  --wave-top: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='320' height='60'%3E%3Cpath d='M0,60 L0,32.9 L5,34.4 L10,35.9 L15,37.1 L20,38.2 L25,39.1 L30,39.8 L35,40.3 L40,40.6 L45,40.7 L50,40.6 L55,40.4 L60,40.1 L65,39.7 L70,39.2 L75,38.7 L80,38.1 L85,37.6 L90,37.1 L95,36.6 L100,36.2 L105,35.8 L110,35.5 L115,35.2 L120,35.0 L125,34.8 L130,34.6 L135,34.5 L140,34.3 L145,34.0 L150,33.7 L155,33.3 L160,32.9 L165,32.3 L170,31.6 L175,30.7 L180,29.8 L185,28.7 L190,27.6 L195,26.3 L200,25.0 L205,23.7 L210,22.3 L215,21.0 L220,19.8 L225,18.6 L230,17.6 L235,16.8 L240,16.1 L245,15.7 L250,15.5 L255,15.5 L260,15.8 L265,16.4 L270,17.2 L275,18.2 L280,19.4 L285,20.8 L290,22.4 L295,24.1 L300,25.8 L305,27.6 L310,29.4 L315,31.2 L320,32.9 L320,60Z'/%3E%3C/svg%3E");
}

/* ------------------------------------------------------------
   PAGE CHANGES — a short crossfade between pages (cross-document
   View Transitions; browsers without them just load the page). A
   home photo that morphs into its page keeps doing that on top.
   ------------------------------------------------------------ */
@media (prefers-reduced-motion: no-preference) {
  html:not(.vt-local)::view-transition-old(root), html:not(.vt-local)::view-transition-new(root) { animation-duration: 0.22s; }
}

/* Footer: tagline, market centers and the independent-office line, all plain to read */
.footer__tagline { font-family: var(--font-display); font-style: italic; font-size: 1.05rem; color: rgba(246,239,220,0.8); margin: 0.2rem 0 0.6rem; }
.footer__legal p + p { margin-top: 0.8rem; }
.footer__legal strong { color: var(--color-warm-white); font-weight: 500; }
.footer__independent { color: var(--color-warm-white); font-weight: 500; }

/* Market center logos and the Equal Housing and REALTOR® marks: the files
   Keller Williams and the trade bodies supply, in their white versions on the
   dark footer. Gulf Coast came only on white: kw-gulf-coast.png is that file
   with the white lifted out, kw-gulf-coast-white.png its ink in white. Clear space around each, never stretched. */
.footer__mc { display: grid; gap: 0.2rem; }
.footer__mc span { font-size: 0.75rem; color: rgba(246,239,220,0.6); margin-top: 0.4rem; }
.footer__mc-logo { display: block; width: 168px; height: auto; }
.footer__mc-logo--gulf { width: 150px; }
.footer__mc + .footer__mc { margin-top: 1.1rem; }
.footer__marks { display: inline-flex; align-items: center; gap: 0.9rem; margin-right: 0.4rem; }
.footer__marks img { height: 34px; width: auto; opacity: 0.92; }

/* Footer town lists: plain links in a row, not pills */
.footer__town-links { gap: 0.5rem 1.4rem; }
.footer__town-links a { padding: 0; border: 0; border-radius: 0; font-size: 0.92rem; }
.footer__town-links a:hover { background: none; text-decoration: underline; text-underline-offset: 3px; }

/* Phones: the footer marks sit above the independent-office line, not on it */
@media (max-width: 640px) {
  .footer__bottom-left { flex-direction: column; align-items: flex-start; gap: 0.7rem; }
}
.footer__bottom-left { flex-wrap: wrap; }
.footer__scenes { flex-basis: 100%; font-size: 0.74rem; opacity: 0.6; }
.footer__clocks { flex-basis: 100%; font-size: 0.8rem; color: var(--color-on-brand); font-variant-numeric: tabular-nums; }

/* The footer restates the drive from the visitor's city to both places (Listings.From) */
.footer__from { margin: 0.4rem 0 0.9rem; font-size: 0.82rem; color: rgba(246,239,220,0.75); display: grid; gap: 0.15rem; }
.footer__from span::before { content: 'Blue Ridge, '; }
.footer__from .footer__from-al::before { content: 'Gulf Shores, '; }
.footer__from span[hidden] { display: none; }
.footer__from:not(:has(> span:not([hidden]))) { display: none; }

/* ============================================================
   EDITORIAL BASELINE — how type wraps, how numbers line up, how
   things answer a touch. Headings balance their lines, paragraphs
   avoid a lone last word, figures in tables and prices share a
   width, selection is in the brand, a pressed button gives.
   ============================================================ */
h1, h2, h3, .display-xl, .display-lg, .display-md { text-wrap: balance; }
.door__line, .hero__brand { text-wrap: wrap; }   /* the hero's lines are art-directed */
p, li, dd, dt, figcaption, blockquote, .lead { text-wrap: pretty; }
table, .pay-lens, .listing__facts, .home-card__facts, .pcomp, .calc, .afford, .numbers, .shortlist__table, .tourday, .drive__list { font-variant-numeric: tabular-nums; }
::selection { background: var(--color-brand); color: var(--color-mark); }
.btn:active, .nav__cta:active, .hero-ask:active { transform: translateY(1px); }
input:focus-visible, select:focus-visible, textarea:focus-visible { outline-width: 2px; outline-offset: 0; border-color: var(--color-brand); }