/* =====================================================================
   Wintergreen Real Estate — "Ridgeline"
   Their brand, sharpened: the firm's own teal-green on a white field with
   mist bands, set in Montserrat alone. Photography leads; a summit card
   rises over the hero photo; contour lines (the mountain's elevation) are
   the one decorative device, used on the teal offer band only.
   Token contract and WCAG table: docs/design-system.md. Audit against
   clients/wintergreen-hardware: docs/de-twinning-audit.md.
   ===================================================================== */

@font-face {
  font-family: "Montserrat";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../fonts/montserrat-latin-wght-normal.311d352d9323.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;
}

:root {
  /* the firm's palette */
  --teal: #008066;        /* brand primary: fills, buttons (white 4.91:1) */
  --teal-bright: #00996B; /* brand secondary: display >= 24px, rules, focus (3.64:1 white) */
  --teal-ink: #006B55;    /* links and small teal text (6.49 white, 5.56 mist) */
  --teal-deep: #005C49;   /* hover, pressed (7.99 white) */
  --ink: #181B1A;         /* body text (17.4 white, 14.8 mist) */
  --gray: #444B49;        /* secondary text (8.94 white, 7.65 mist) */
  --mist: #E7EFED;        /* bands, fields */
  --line: #CFDDD9;        /* hairlines (decoration only) */
  --snow: #FFFFFF;        /* the page */
  --confirm-bg: #FFF4D6;  /* owner-confirm markers (meta, not brand) */
  --confirm-rule: #9A6700;

  --font: "Montserrat", "Avenir Next", "Segoe UI", system-ui, sans-serif;
  --step--1: 0.875rem;
  --step-0: 1rem;
  --step-1: 1.1875rem;
  --step-2: clamp(1.375rem, 1.15rem + 0.9vw, 1.75rem);
  --step-3: clamp(1.625rem, 1.25rem + 1.6vw, 2.375rem);
  --step-4: clamp(2rem, 1.35rem + 2.9vw, 3.375rem);

  --maxw: 72rem;
  --measure: 40rem;
  --gutter: 1rem;
  --space: clamp(3rem, 2rem + 4vw, 5.5rem);
  --r-photo: 14px;
  --r-card: 20px;
}
@media (min-width: 48rem) { :root { --gutter: 2rem; --step-0: 1.0625rem; } }

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--snow); color: var(--ink);
  font-family: var(--font); font-size: var(--step-0); line-height: 1.6;
  font-weight: 400; -webkit-font-smoothing: antialiased; overflow-x: hidden;
}
img { max-width: 100%; height: auto; display: block; }
h1, h2, h3 { margin: 0 0 .5em; line-height: 1.12; font-weight: 650; letter-spacing: -0.02em; text-wrap: balance; }
h1 { font-size: var(--step-4); }
h2 { font-size: var(--step-3); }
h3, .h3 { font-size: var(--step-1); font-weight: 620; letter-spacing: -0.01em; line-height: 1.3; }
p { margin: 0 0 1em; }
p, li { text-wrap: pretty; }
a { color: var(--teal-ink); text-underline-offset: .18em; text-decoration-thickness: 1px; }
a:hover { color: var(--teal-deep); text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid var(--teal-bright); outline-offset: 2px; border-radius: 4px; }
.muted { color: var(--gray); }
.small { font-size: var(--step--1); }
.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gutter); }
.measure { max-width: var(--measure); }
.skip { position: absolute; left: -999px; top: 0; z-index: 99; background: var(--ink); color: #fff; padding: .5rem 1rem; }
.skip:focus { left: 1rem; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.demo-ribbon {
  margin: 0; padding: .4rem var(--gutter); background: var(--ink); color: #fff;
  font-size: var(--step--1); text-align: center; letter-spacing: .01em;
}

/* ---------- header ---------- */
.site-header { background: var(--snow); border-bottom: 1px solid var(--line); position: relative; z-index: 20; }
.header-inner {
  max-width: var(--maxw); margin: 0 auto; padding: .75rem var(--gutter);
  display: flex; align-items: center; gap: 1rem; flex-wrap: wrap;
}
.brand { display: inline-flex; align-items: center; color: var(--ink); text-decoration: none; margin-right: auto; }
.brand img { height: 48px; width: auto; }
.brand-text { display: inline-flex; flex-direction: column; line-height: 1.05; }
.brand-name { font-weight: 700; font-size: 1.25rem; color: var(--teal); letter-spacing: -0.01em; }
.brand-sub { font-weight: 500; font-size: .8125rem; color: var(--gray); letter-spacing: .02em; }
.header-phone { font-weight: 600; color: var(--ink); text-decoration: none; font-size: .9375rem; }
.nav-toggle { position: absolute; opacity: 0; width: 44px; height: 44px; right: var(--gutter); margin: 0; cursor: pointer; z-index: 2; }
.nav-burger { display: inline-flex; flex-direction: column; gap: 5px; padding: 12px 10px; cursor: pointer; }
.nav-burger span { display: block; width: 22px; height: 2px; background: var(--ink); border-radius: 2px; }
.nav { display: none; flex-basis: 100%; flex-direction: column; gap: .25rem; padding: .5rem 0 1rem; }
.nav-toggle:checked ~ .nav { display: flex; }
.nav-toggle:focus-visible + .nav-burger { outline: 3px solid var(--teal-bright); border-radius: 6px; }
.nav a { color: var(--ink); text-decoration: none; font-weight: 550; padding: .55rem 0; font-size: .9875rem; }
.nav a[aria-current="page"] { color: var(--teal-ink); box-shadow: inset 0 -2px 0 var(--teal-bright); }
.nav a.nav-cta { margin-top: .5rem; }
@media (min-width: 64rem) {
  .header-inner { flex-wrap: nowrap; gap: 1.5rem; padding-block: 1rem; }
  .nav-toggle, .nav-burger { display: none; }
  .nav { display: flex; flex-direction: row; flex-basis: auto; align-items: center; gap: 1.35rem; padding: 0; }
  .header-phone { order: 3; }
  .nav a { padding: .25rem 0; }
  .nav a.nav-cta { margin: 0; padding: .5rem 1.1rem; }
}

/* ---------- buttons ---------- */
.btn, .nav-cta {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  min-height: 48px; padding: .7rem 1.35rem; border-radius: 999px;
  background: var(--teal); color: #fff !important; font: 600 1rem/1.2 var(--font);
  text-decoration: none; border: 2px solid var(--teal); cursor: pointer;
}
.nav-cta { min-height: 42px; padding: .5rem 1.1rem; font-size: .9375rem; }
.btn:hover, .nav-cta:hover { background: var(--teal-deep); border-color: var(--teal-deep); }
.btn--ghost { background: transparent; color: var(--teal-ink) !important; border-color: var(--teal); }
.btn--ghost:hover { background: var(--mist); color: var(--teal-deep) !important; }
.btn--light { background: #fff; color: var(--teal-ink) !important; border-color: #fff; }
.btn--light:hover { background: var(--mist); border-color: var(--mist); color: var(--teal-deep) !important; }
.actions { display: flex; flex-wrap: wrap; gap: .75rem; margin: 1.5rem 0 0; }

/* ---------- sections ---------- */
.section { padding: var(--space) 0; }
.section--mist { background: var(--mist); }
.section-head { max-width: 46rem; margin-bottom: 2rem; }
.section-head p { color: var(--gray); }
.kicker { font-weight: 600; color: var(--teal-ink); margin-bottom: .5rem; font-size: .9375rem; }

/* ---------- home hero: the photo, and the summit card over it ---------- */
.hero { position: relative; background: var(--snow); }
.hero-media { position: relative; }
.hero-media img, .hero-media .ph {
  width: 100%; aspect-ratio: 4 / 3; object-fit: cover; object-position: 50% 40%;
}
@media (min-width: 48rem) {
  .hero-media img, .hero-media .ph { aspect-ratio: auto; height: clamp(26rem, 62vh, 40rem); }
}
.summit {
  position: relative; z-index: 2; background: var(--snow); border-radius: var(--r-card);
  margin: -2.5rem var(--gutter) 0; padding: 1.5rem 1.25rem 1.5rem;
  box-shadow: 0 24px 48px -24px rgba(0, 77, 61, .35);
}
@media (min-width: 48rem) {
  .summit { max-width: 48rem; margin: -9rem 0 0 max(var(--gutter), calc((100vw - var(--maxw)) / 2 + var(--gutter))); padding: 2.25rem 2.5rem 2rem; }
}
.summit h1 { font-size: var(--step-4); margin-bottom: .6rem; }
.summit-quote { margin: 0; color: var(--gray); font-size: var(--step-0); }
.summit-quote q { quotes: "“" "”"; color: var(--ink); }
.summit-quote cite { font-style: normal; font-size: var(--step--1); }
.proof {
  list-style: none; margin: 1.5rem 0 0; padding: 1.25rem 0 0; border-top: 1px solid var(--line);
  display: grid; gap: .75rem 1.5rem; grid-template-columns: 1fr;
}
@media (min-width: 40rem) { .proof { grid-template-columns: repeat(3, auto); justify-content: start; } }
.proof li { font-size: var(--step--1); color: var(--gray); line-height: 1.4; }
.proof strong { display: block; font-size: 1.125rem; color: var(--ink); font-weight: 650; }
.stars { color: var(--teal); letter-spacing: .06em; }
.hero-after { padding: 1.25rem var(--gutter) 2.5rem; display: flex; flex-wrap: wrap; gap: .5rem; }
.hero-after mark.confirm { display: block; max-width: 34rem; padding: .45rem .7rem; }
@media (min-width: 48rem) { .hero-after { padding-left: max(var(--gutter), calc((100vw - var(--maxw)) / 2 + var(--gutter))); } }

/* ---------- interior page hero ---------- */
.page-hero { background: var(--mist); padding: clamp(2.25rem, 1.5rem + 3vw, 4rem) 0; }
.page-hero h1 { max-width: 48rem; }
.page-hero .lede { font-size: var(--step-1); color: var(--gray); max-width: 44rem; line-height: 1.5; }
.page-hero--photo .wrap { display: grid; gap: 2rem; align-items: center; }
@media (min-width: 56rem) { .page-hero--photo .wrap { grid-template-columns: 1.1fr .9fr; } }
.page-hero--photo img, .page-hero--photo .ph { border-radius: var(--r-photo); aspect-ratio: 4 / 3; object-fit: cover; width: 100%; }
.lede { font-size: var(--step-1); line-height: 1.5; }

/* ---------- the membership offer band: teal, with contour lines ---------- */
.offer {
  position: relative; overflow: hidden; background-color: var(--teal); color: #fff;
  padding: clamp(2.5rem, 2rem + 3vw, 4.5rem) 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='640' height='320' viewBox='0 0 640 320' fill='none' stroke='%2345B79A' stroke-opacity='.45' stroke-width='1.2'%3E%3Cpath d='M-20 250C80 210 140 120 240 110s170 60 250 40 120-90 170-100'/%3E%3Cpath d='M-20 280C90 240 150 160 250 150s160 50 240 30 130-80 170-90'/%3E%3Cpath d='M-20 310C100 270 170 200 260 190s150 40 230 22 140-70 170-80'/%3E%3Cpath d='M180 120c30-40 80-70 120-60s40 50 10 70-100 30-130-10z'/%3E%3Cpath d='M205 115c20-25 55-45 82-38s26 32 6 45-68 18-88-7z'/%3E%3Cpath d='M-20 220C70 180 130 80 230 70s180 70 260 50 110-100 170-110'/%3E%3C/svg%3E");
  background-size: 640px 320px; background-position: right -80px bottom -40px; background-repeat: no-repeat;
}
@media (min-width: 64rem) { .offer { background-size: 960px 480px; background-position: right -120px center; } }
.offer .wrap { position: relative; }
.offer h2 { color: #fff; max-width: 34rem; }
.offer blockquote { margin: 0 0 1rem; max-width: 42rem; font-size: var(--step-1); line-height: 1.5; font-weight: 500; }
.offer blockquote p { margin: 0; }
.offer cite { font-style: normal; font-size: var(--step--1); }
.offer a:not(.btn) { color: #fff; }
.offer .confirm { margin-top: 1rem; }
.offer-figure { font-size: clamp(3rem, 2rem + 4vw, 5rem); font-weight: 700; letter-spacing: -0.04em; line-height: 1; margin: 0 0 .25rem; }

/* ---------- the twelve live-search tiles ---------- */
.tiles { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.5rem 1rem; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 48rem) { .tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 64rem) { .tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2rem 1.25rem; } }
.tile a { display: block; color: var(--ink); text-decoration: none; }
.tile img, .tile .ph { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--r-photo); background: var(--mist); }
.tile-label { display: block; margin-top: .65rem; font-weight: 620; line-height: 1.3; font-size: 1rem; }
.tile-blurb { display: block; color: var(--gray); font-size: var(--step--1); line-height: 1.4; margin-top: .15rem; }
.tile-note { display: block; color: var(--gray); font-size: .75rem; margin-top: .2rem; }
.tile a:hover .tile-label { color: var(--teal-ink); text-decoration: underline; text-underline-offset: .18em; }
.idx-note { margin-top: 1.75rem; font-size: var(--step--1); color: var(--gray); }

/* ---------- paths (seller, request types) ---------- */
.paths { display: grid; gap: 1rem; grid-template-columns: 1fr; }
@media (min-width: 48rem) { .paths { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.path { background: var(--snow); border: 1px solid var(--line); border-radius: var(--r-card); padding: 1.5rem; display: flex; flex-direction: column; }
.section--mist .path { border-color: transparent; }
.path p { color: var(--gray); }
.path .btn, .path .text-link { margin-top: auto; align-self: flex-start; }
.text-link { font-weight: 600; }
.path--primary { background: var(--snow); border: 2px solid var(--teal); }

/* ---------- founders ---------- */
.founders { display: grid; gap: 2rem; grid-template-columns: 1fr; }
@media (min-width: 48rem) { .founders { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.founder img, .founder .ph, .portrait-ph {
  width: 100%; aspect-ratio: 1; object-fit: cover; object-position: 50% 25%; border-radius: var(--r-photo); background: var(--mist);
}
.portrait-ph { display: grid; place-items: center; color: var(--teal-ink); font-weight: 650; font-size: 2.5rem; }
.founder { margin: 0; }
.founder h3 { margin: 1rem 0 .1rem; }
.founder-title { color: var(--teal-ink); font-weight: 600; font-size: var(--step--1); margin-bottom: .6rem; }
.founder-fact { font-weight: 600; margin-bottom: .5rem; }
.founder blockquote { margin: 0; color: var(--gray); font-size: .9375rem; }
.founder blockquote p { margin-bottom: .35rem; }
.founder cite { font-style: normal; font-size: var(--step--1); }

/* ---------- questions buyers ask ---------- */
.questions { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr; border-top: 1px solid var(--line); }
@media (min-width: 48rem) { .questions { grid-template-columns: 1fr 1fr; column-gap: 2.5rem; } }
.questions li { border-bottom: 1px solid var(--line); }
.questions a { display: block; padding: 1rem 0; color: var(--ink); text-decoration: none; font-weight: 560; line-height: 1.4; }
.questions a:hover { color: var(--teal-ink); }
.questions .q-short { display: block; font-size: var(--step--1); color: var(--gray); font-weight: 400; margin-top: .15rem; }

/* ---------- reviews ---------- */
.quotes { display: grid; gap: 2rem; grid-template-columns: 1fr; }
@media (min-width: 56rem) { .quotes { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.quote { margin: 0; padding-left: 1.25rem; border-left: 3px solid var(--teal-bright); }
.quote blockquote { margin: 0 0 .75rem; }
.quote blockquote p { margin-bottom: .6rem; }
.quote figcaption { font-size: var(--step--1); color: var(--gray); }
.quote figcaption strong { color: var(--ink); font-weight: 620; }
.rating-line { display: flex; flex-wrap: wrap; align-items: baseline; gap: .5rem; margin: 0 0 1rem; }
.rating-line strong { font-size: 1.5rem; }
.wall { columns: 1; column-gap: 2.5rem; }
@media (min-width: 56rem) { .wall { columns: 2; } }
.wall .quote { break-inside: avoid; margin-bottom: 2.25rem; }

/* ---------- areas ---------- */
.area-cards { display: grid; gap: 1.5rem; grid-template-columns: 1fr; }
@media (min-width: 48rem) { .area-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.area-card a { display: block; color: var(--ink); text-decoration: none; }
.area-card img, .area-card .ph { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: var(--r-photo); }
.area-card h3 { margin: .9rem 0 .25rem; }
.area-card p { color: var(--gray); margin: 0; font-size: .9375rem; }
.area-card a:hover h3 { color: var(--teal-ink); text-decoration: underline; text-underline-offset: .18em; }

/* ---------- closing call to action ---------- */
.closing { text-align: left; }
.closing-inner { display: grid; gap: 1.5rem; align-items: center; }
@media (min-width: 56rem) { .closing-inner { grid-template-columns: 1.3fr 1fr; } }
.closing-office { background: var(--mist); border-radius: var(--r-card); padding: 1.5rem; }
.closing-office p { margin-bottom: .5rem; }
.big-phone { font-size: var(--step-2); font-weight: 650; color: var(--ink); text-decoration: none; letter-spacing: -0.01em; }

/* ---------- facts (dated, sourced figures) ---------- */
.facts { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); margin: 1.25rem 0 1.5rem; padding: 0; }
.fact { margin: 0; padding: 1rem 1.1rem; background: var(--mist); border-radius: 12px; }
.section--mist .fact { background: var(--snow); }
.fact dt { font-size: var(--step--1); color: var(--gray); line-height: 1.35; }
.fact .fact-value { display: block; font-size: 1.5rem; font-weight: 650; color: var(--ink); letter-spacing: -0.02em; margin: .2rem 0; line-height: 1.2; }
.fact dd { margin: 0; font-size: var(--step--1); color: var(--gray); line-height: 1.4; }
.fact .fact-source { display: block; margin-top: .35rem; font-size: .8125rem; }

/* ---------- guides ---------- */
.guide-layout { display: grid; gap: 3rem; }
@media (min-width: 64rem) { .guide-layout { grid-template-columns: minmax(0, 1fr) 18rem; } }
.answer { font-size: var(--step-1); line-height: 1.55; background: var(--snow); border-left: 4px solid var(--teal-bright); padding: 1rem 1.25rem; margin: 1.5rem 0 0; max-width: 46rem; border-radius: 0 12px 12px 0; }
.page-hero .answer { background: var(--snow); }
.guide-block { margin-bottom: 2.75rem; max-width: 46rem; }
.guide-block h2 { font-size: var(--step-2); }
.guide-block ul { padding-left: 1.25rem; }
.guide-block li { margin-bottom: .4rem; }
.see-also { font-size: .9375rem; }
.faq { border-top: 1px solid var(--line); max-width: 46rem; }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary { cursor: pointer; padding: 1rem 2rem 1rem 0; font-weight: 600; list-style: none; position: relative; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; position: absolute; right: .25rem; top: .85rem; font-size: 1.35rem; color: var(--teal-ink); font-weight: 500; }
.faq details[open] summary::after { content: "–"; }
.faq details p { margin: 0 0 1rem; color: var(--gray); }
.aside-box { background: var(--mist); border-radius: var(--r-card); padding: 1.5rem; position: sticky; top: 1rem; }
.aside-box ul { list-style: none; padding: 0; margin: 0 0 1rem; }
.aside-box li { margin-bottom: .55rem; font-size: .9375rem; line-height: 1.35; }
.source-note { font-size: var(--step--1); color: var(--gray); border-top: 1px solid var(--line); padding-top: 1rem; margin-top: 2rem; max-width: 46rem; }

/* ---------- tables ---------- */
.table-scroll { overflow-x: auto; margin: 1rem 0 1.5rem; -webkit-overflow-scrolling: touch; }
.data-table { width: 100%; border-collapse: collapse; font-size: .9375rem; min-width: 32rem; }
.data-table caption { text-align: left; font-weight: 600; padding-bottom: .6rem; }
.data-table th, .data-table td { text-align: left; vertical-align: top; padding: .7rem .75rem; border-bottom: 1px solid var(--line); }
.data-table thead th { font-size: var(--step--1); color: var(--gray); font-weight: 600; border-bottom: 2px solid var(--teal-bright); }
.data-table tbody th { font-weight: 600; }
.data-table .empty-row td { color: var(--gray); background: var(--mist); }
.data-table--narrow { min-width: 0; }

/* ---------- about: roster ---------- */
.roster { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.75rem 1.25rem; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 48rem) { .roster { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 64rem) { .roster { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.roster img, .roster .portrait-ph { width: 100%; aspect-ratio: 1; object-fit: cover; object-position: 50% 25%; border-radius: var(--r-photo); }
.roster .portrait-ph { font-size: 1.75rem; }
.roster h3 { font-size: 1rem; margin: .75rem 0 0; }
.roster p { margin: 0; font-size: var(--step--1); color: var(--gray); line-height: 1.5; }
.roster .role { color: var(--teal-ink); font-weight: 600; }

/* ---------- forms ---------- */
.form-layout { display: grid; gap: 2rem; }
@media (min-width: 56rem) { .form-layout { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); align-items: start; } }
.form-card { background: var(--snow); border-radius: var(--r-card); padding: 1.5rem; border: 1px solid var(--line); }
.form-row { margin: 0 0 1.1rem; }
.form-row label { display: block; font-weight: 600; margin-bottom: .35rem; font-size: .9375rem; }
.form-row .helptext { display: block; font-size: var(--step--1); color: var(--gray); margin-top: .3rem; }
input[type="text"], input[type="email"], input[type="tel"], select, textarea {
  width: 100%; font: 400 1rem/1.4 var(--font); color: var(--ink); background: var(--snow);
  border: 1.5px solid #8A9693; border-radius: 10px; padding: .7rem .8rem; min-height: 48px;
}
textarea { min-height: 7rem; }
input:focus, select:focus, textarea:focus { outline: 3px solid var(--teal-bright); outline-offset: 1px; border-color: var(--teal); }
.errorlist { list-style: none; margin: .35rem 0 0; padding: 0; color: #A3241B; font-size: var(--step--1); font-weight: 600; }
.form-row--error input, .form-row--error select { border-color: #A3241B; }
.trap-field { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.aside-gap { margin-top: 1.5rem; }
.fineprint { font-size: var(--step--1); color: var(--gray); margin-top: 1rem; }
.notice { background: var(--mist); border-radius: 12px; padding: 1rem 1.1rem; font-size: .9375rem; }
.inline-form { display: flex; flex-wrap: wrap; gap: .6rem; align-items: end; max-width: 32rem; }
.inline-form .form-row { flex: 1 1 16rem; margin: 0; }
.inline-form .btn { flex: 0 0 auto; }

/* ---------- owner-confirm markers ---------- */
mark.confirm, .owner-confirm {
  background: var(--confirm-bg); color: var(--ink); border: 1px dashed var(--confirm-rule);
  border-radius: 8px; font-size: .8125rem; line-height: 1.45; font-weight: 400;
}
mark.confirm { display: inline; padding: .1rem .4rem; box-decoration-break: clone; -webkit-box-decoration-break: clone; }
.owner-confirm { display: block; padding: .6rem .8rem; margin: 1rem 0; max-width: 46rem; }
mark.confirm strong, .owner-confirm strong { font-weight: 650; }
.offer mark.confirm { display: block; max-width: 42rem; padding: .6rem .8rem; }

/* ---------- placeholder for a slot whose photo is not in the library ---------- */
.ph { display: grid; place-items: center; background: repeating-linear-gradient(135deg, var(--mist) 0 12px, #DCE7E4 12px 24px); color: var(--gray); font-size: var(--step--1); text-align: center; padding: 1rem; }

/* ---------- footer ---------- */
.site-footer { background: var(--mist); color: var(--ink); padding: 3rem 0 0; margin-top: 0; }
.footer-inner { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gutter); display: grid; gap: 1.5rem 1.25rem; grid-template-columns: 1fr 1fr; }
.footer-firm { grid-column: 1 / -1; }
@media (min-width: 48rem) { .footer-firm { grid-column: auto; } }
@media (min-width: 48rem) { .footer-inner { grid-template-columns: 1.4fr 1fr 1fr .8fr; } }
.footer-name { font-weight: 700; font-size: 1.125rem; margin-bottom: .25rem; }
.footer-legal-name { font-size: var(--step--1); color: var(--gray); }
.footer-legal-name mark.confirm { display: block; margin-top: .4rem; padding: .4rem .6rem; }
.site-footer p { font-size: .9375rem; }
.footer-phone { font-weight: 650; font-size: 1.125rem; color: var(--ink); text-decoration: none; }
.footer-head { font-weight: 650; margin: 0 0 .5rem; font-size: .9375rem; }
.site-footer ul { list-style: none; margin: 0 0 1.25rem; padding: 0; }
.site-footer li { margin-bottom: .4rem; font-size: .9375rem; }
.eho { display: flex; align-items: center; gap: .6rem; font-weight: 600; font-size: var(--step--1) !important; }
.eho-mark { color: var(--ink); flex: none; }
.footer-base { max-width: var(--maxw); margin: 1.5rem auto 0; padding: 1.25rem var(--gutter) 2rem; border-top: 1px solid var(--line); }
.footer-base p { font-size: var(--step--1); color: var(--gray); max-width: 52rem; margin-bottom: .5rem; }
.footer-base .powered-by { font-size: var(--step--1); color: var(--gray); }

/* ---------- messages ---------- */
.messages { list-style: none; margin: 0; padding: 0; }
.msg { padding: .75rem var(--gutter); background: var(--mist); font-weight: 600; }

/* ---------- pitch (internal) ---------- */
.pitch-stats { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); margin: 2rem 0; }
.pitch-stat { background: var(--snow); border-radius: var(--r-card); padding: 1.25rem; border: 1px solid var(--line); }
.pitch-stat .num { font-size: 2.25rem; font-weight: 700; letter-spacing: -0.03em; line-height: 1.1; color: var(--teal-ink); }
.pitch-stat p { margin: .35rem 0 0; font-size: .9375rem; color: var(--gray); }
.killer { counter-reset: k; list-style: none; padding: 0; margin: 0; max-width: 50rem; }
.killer > li { counter-increment: k; padding: 1.5rem 0 1.5rem 3.25rem; border-top: 1px solid var(--line); position: relative; }
.killer > li::before { content: counter(k); position: absolute; left: 0; top: 1.35rem; width: 2.25rem; height: 2.25rem; border-radius: 50%; background: var(--teal); color: #fff; display: grid; place-items: center; font-weight: 700; }
.killer h3 { font-size: var(--step-1); }
.killer .angle { color: var(--gray); }
.receipt { font-size: var(--step--1); color: var(--gray); }
.score-bar { display: grid; grid-template-columns: 10rem 1fr 3rem; gap: .75rem; align-items: center; font-size: .9375rem; margin-bottom: .4rem; }
.score-bar .bar { height: 10px; background: var(--mist); border-radius: 6px; overflow: hidden; }
.score-bar .bar span { display: block; height: 100%; background: var(--teal); }

@media (prefers-reduced-motion: no-preference) {
  .btn, .nav-cta { transition: background-color .15s ease, border-color .15s ease; }
}
@media print {
  .site-header, .demo-ribbon, .nav { display: none; }
}

/* Privacy page (#5): a readable column and the demo call-out. */
.prose { max-width: 68ch; }
.prose h2 { margin-top: 1.8em; }
.prose ul { padding-left: 1.2em; }
.prose li { margin-bottom: .5em; }
.callout { background: var(--mist); border-left: 4px solid var(--teal); padding: 14px 16px; border-radius: 4px; }
.demo-note strong { color: var(--ink); }

/* ---------- listing showcase: the firm's own listings, shown with its
   permission (docs/permissions.md). Listing photos keep their own frame
   (natural ratio, never cropped), so the MLS mark in each corner stays. ---------- */
.listing-hero-media img { width: 100%; height: auto; background: var(--mist); }
/* Until the photo is wide enough for the card to rise over its left side
   only, the card sits below it, so it never covers the MLS mark in the
   photo's lower-right corner. */
.listing-hero .summit { margin-top: 1rem; }
@media (min-width: 48rem) {
  .listing-hero-media { max-width: var(--maxw); margin: 0 auto; padding: 1.5rem var(--gutter) 0; }
  .listing-hero-media img { border-radius: var(--r-photo); }
}
@media (min-width: 64rem) { .listing-hero .summit { margin-top: -6rem; } }
.listing-hero .summit h1 { font-size: var(--step-3); }
.listing-price { font-size: var(--step-3); font-weight: 650; letter-spacing: -0.02em; line-height: 1.1; margin: 0 0 .5rem; color: var(--ink); }
.listing-status { font-size: var(--step--1); color: var(--gray); margin: 0; }
.listing-status strong { color: var(--ink); font-weight: 650; }
.keyfacts {
  margin: 1.25rem 0 0; padding: 1.25rem 0 0; border-top: 1px solid var(--line);
  display: grid; gap: .9rem 1rem; grid-template-columns: repeat(3, minmax(0, 1fr));
}
@media (min-width: 40rem) { .keyfacts { grid-template-columns: repeat(6, auto); justify-content: start; gap: .75rem 1.75rem; } }
.keyfacts div { display: flex; flex-direction: column-reverse; }
.keyfacts dt { font-size: var(--step--1); color: var(--gray); line-height: 1.35; }
.keyfacts dd { margin: 0; font-size: 1.25rem; font-weight: 650; color: var(--ink); line-height: 1.2; }

/* The gallery is laid out (and its lazy photos fetched) only as it nears
   the viewport, so the hero photo has the connection to itself. */
.listing-photos { content-visibility: auto; contain-intrinsic-size: auto 4800px; }
@media (min-width: 40rem) { .listing-photos { contain-intrinsic-size: auto 3200px; } }
.gallery { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.5rem 1.25rem; grid-template-columns: 1fr; align-items: start; }
@media (min-width: 40rem) { .gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.gallery figure { margin: 0; }
.gallery img { width: 100%; height: auto; border-radius: var(--r-photo); background: var(--mist); }
.gallery figcaption { font-size: var(--step--1); color: var(--gray); margin-top: .45rem; line-height: 1.4; }

.listing-layout { display: grid; gap: 2.5rem; }
@media (min-width: 64rem) { .listing-layout { grid-template-columns: minmax(0, 1fr) 19rem; align-items: start; } }
.listing-about { max-width: 46rem; }
.listing-about h2 { font-size: var(--step-2); }
.agent-card { background: var(--snow); border-radius: var(--r-card); padding: 1.5rem; }
.agent-card img { width: 6rem; height: 6rem; object-fit: cover; object-position: 50% 25%; border-radius: var(--r-photo); margin-bottom: 1rem; }
.agent-card .kicker { margin-bottom: .2rem; }
.agent-card h3 { margin: 0 0 .1rem; }
.agent-card .role { color: var(--teal-ink); font-weight: 600; font-size: var(--step--1); margin-bottom: .6rem; }
.agent-phone { font-weight: 650; font-size: 1.125rem; color: var(--ink); text-decoration: none; }
.agent-card .btn { margin: .25rem 0 1rem; }
.agent-card .small { margin: 0; }

.feature-groups { display: grid; gap: 2rem 2.5rem; grid-template-columns: 1fr; }
@media (min-width: 48rem) { .feature-groups { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 64rem) { .feature-groups { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.feature-group h3 { padding-bottom: .5rem; margin-bottom: 0; border-bottom: 2px solid var(--teal-bright); }
.feature-group ul { list-style: none; margin: 0; padding: 0; }
.feature-group li { padding: .5rem 0; border-bottom: 1px solid var(--line); font-size: .9375rem; line-height: 1.45; }

.listing-data { border-top: 1px solid var(--line); }
.listing-data .courtesy { font-weight: 650; margin: 1rem 0 .5rem; }
.listing-data .disclaimer { font-size: var(--step--1); color: var(--gray); max-width: 52rem; }
.listing-ask { margin-bottom: 1.25rem; }
input[readonly] { background: var(--mist); }

/* the home page's featured-property band */
.featured-card { display: grid; gap: 1rem; }
@media (min-width: 56rem) { .featured-card { grid-template-columns: 1.15fr 1fr; gap: 1.5rem; align-items: center; } }
.featured-card img { width: 100%; height: auto; border-radius: var(--r-photo); }
.featured-body { padding: 1.5rem 1.5rem 1.75rem; background: var(--snow); border-radius: var(--r-card); }
@media (min-width: 56rem) { .featured-body { padding: 2rem 2.25rem; } }
.featured-body h3 { font-size: var(--step-2); margin-bottom: .35rem; }
.featured-body h3 a { color: var(--ink); text-decoration: none; }
.featured-body h3 a:hover { color: var(--teal-ink); text-decoration: underline; }
.featured-where { color: var(--gray); font-size: .9375rem; margin-bottom: .75rem; }
.featured-facts { font-weight: 600; font-size: .9375rem; }
.featured-body .actions { margin-top: 1rem; }
.featured-meta { font-size: var(--step--1); color: var(--gray); margin: 1rem 0 0; }

/* ---------- Wintergreen in 3D (/areas/3d/, #11) ----------
   The model sits on a card that rises out of the mist hero; its map is the
   mountain's own contours, so it carries the Ridgeline device as content. */
.terrain [hidden], .places [hidden] { display: none !important; }
.page-hero--terrain { padding-bottom: 2rem; }
.terrain-section { padding: 0 0 var(--space); background: linear-gradient(var(--mist) 0 7rem, var(--snow) 7rem); }
.terrain { margin: 0; }
.terrain-stage {
  position: relative; overflow: hidden; isolation: isolate;
  aspect-ratio: 16 / 10; border-radius: var(--r-card);
  background: radial-gradient(ellipse at 50% 28%, #F8FBFA, var(--mist) 72%);
  box-shadow: 0 1px 0 var(--line), 0 22px 44px -26px rgba(0, 60, 48, .38);
}
@media (max-width: 40rem) { .terrain-stage { aspect-ratio: 4 / 5; } }
.terrain-poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: opacity .5s; }
.terrain.is-live .terrain-poster { opacity: 0; pointer-events: none; }
.terrain-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; cursor: grab; outline: none; }
.terrain-canvas:active { cursor: grabbing; }
.terrain-canvas:focus-visible { box-shadow: inset 0 0 0 3px var(--teal-bright); border-radius: var(--r-card); }
.terrain-start { position: absolute; z-index: 2; left: 50%; bottom: 1.25rem; transform: translateX(-50%); box-shadow: 0 10px 28px -10px rgba(0, 0, 0, .45); }
.terrain.is-loading .terrain-start { pointer-events: none; opacity: .88; }
.terrain.is-live .terrain-start { display: none; }
.terrain-hint {
  display: none; position: absolute; z-index: 2; left: 50%; bottom: .9rem; transform: translateX(-50%);
  margin: 0; padding: .35rem .85rem; border-radius: 999px; background: rgba(24, 27, 26, .74); color: #fff;
  font-size: .8125rem; line-height: 1.35; text-align: center; width: max-content; max-width: calc(100% - 2rem);
  pointer-events: none; transition: opacity .6s;
}
.terrain.is-live .terrain-hint { display: block; }
.terrain-hint.is-done { opacity: 0; }

/* labels: a dot on the ground, a stem, the name on a pill */
.terrain-labels { position: absolute; inset: 0; z-index: 1; pointer-events: none; overflow: hidden; }
.tl { position: absolute; left: 0; top: 0; width: 0; height: 0; padding: 0; border: 0; background: none; font: inherit; color: inherit; cursor: pointer; pointer-events: auto; will-change: transform; transition: opacity .25s; }
.tl-dot { position: absolute; left: -5px; top: -5px; width: 10px; height: 10px; border-radius: 50%; background: var(--teal); box-shadow: 0 0 0 2px #fff, 0 1px 4px rgba(0, 0, 0, .35); }
.tl-stem { position: absolute; left: -.5px; top: -22px; width: 1px; height: 22px; background: rgba(24, 27, 26, .6); }
.tl-text {
  position: absolute; left: 0; bottom: 22px; transform: translateX(-50%); white-space: nowrap;
  padding: .3rem .65rem; border-radius: 999px; background: #fff; color: var(--ink);
  font-size: .8125rem; font-weight: 600; line-height: 1.2; box-shadow: 0 2px 10px rgba(0, 40, 32, .22);
}
.tl:hover .tl-text { color: var(--teal-deep); }
.tl:focus-visible { outline: none; }
.tl:focus-visible .tl-text { outline: 3px solid var(--teal-bright); outline-offset: 2px; }
.tl[aria-pressed="true"] .tl-text { background: var(--teal); color: #fff; }
.tl[aria-pressed="true"] .tl-dot { background: var(--teal-deep); }
.tl.is-behind { opacity: .4; }
.tl.is-compact .tl-text, .tl.is-compact .tl-stem { visibility: hidden; }
.tl--road { cursor: default; pointer-events: none; }
.tl--road .tl-text {
  bottom: auto; top: 0; transform: translate(-50%, -50%); padding: 0; background: none; box-shadow: none;
  color: #fff; font-size: .75rem; font-weight: 650; letter-spacing: .02em;
  text-shadow: 0 0 3px rgba(0, 45, 36, .95), 0 0 9px rgba(0, 45, 36, .6);
}

/* the details card: over the model on wide screens, along its foot on phones */
.terrain-card {
  position: absolute; z-index: 3; left: 1rem; top: 1rem; width: min(21rem, calc(100% - 2rem)); max-height: calc(100% - 2rem);
  overflow: auto; padding: 1rem 1.15rem 1.1rem; background: #fff; border-radius: 16px;
  box-shadow: 0 14px 36px -12px rgba(0, 40, 32, .45);
}
@media (max-width: 40rem) { .terrain-card { left: .75rem; right: .75rem; top: auto; bottom: .75rem; width: auto; max-height: 58%; } }
.terrain-card .kicker { margin-bottom: .2rem; padding-right: 2rem; }
.terrain-card h2, .terrain-card h3 { font-size: var(--step-1); margin-bottom: .3rem; padding-right: 2rem; }
.terrain-card p { font-size: .9375rem; margin-bottom: .55rem; }
.terrain-card p:last-child { margin-bottom: 0; }
.terrain-card .place-elev { font-size: 1.25rem; margin-bottom: .35rem; }
.terrain-card-close { position: absolute; right: .35rem; top: .35rem; width: 44px; height: 44px; border: 0; border-radius: 50%; background: none; color: var(--gray); font: 400 1.6rem/1 var(--font); cursor: pointer; }
.terrain-card-close:hover { background: var(--mist); color: var(--ink); }

.terrain-bar { display: flex; flex-wrap: wrap; gap: .5rem; margin: 1rem 0 0; }
.terrain-bar button {
  min-height: 44px; padding: .55rem 1.05rem; border-radius: 999px; border: 1px solid var(--teal);
  background: var(--snow); color: var(--teal-ink); font: 600 .9375rem/1.2 var(--font); cursor: pointer;
}
.terrain-bar button:hover { background: var(--mist); color: var(--teal-deep); }
.terrain-bar button[aria-pressed="true"] { background: var(--teal); border-color: var(--teal); color: #fff; }
.terrain-error { margin: 1rem 0 0; }
.terrain-caption { font-size: var(--step--1); color: var(--gray); margin-top: 1rem; max-width: 52rem; }

/* the place list: the same facts as the model, for every reader */
.places { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr)); }
.place { display: flex; flex-direction: column; padding: 1.25rem 1.25rem 1.15rem; background: var(--snow); border-radius: var(--r-card); }
.place .kicker { margin-bottom: .25rem; }
.place h3 { margin-bottom: .15rem; }
.place-elev { font-size: 1.375rem; font-weight: 650; color: var(--teal-ink); letter-spacing: -0.02em; line-height: 1.25; margin-bottom: .5rem; font-variant-numeric: tabular-nums; }
.place p { margin-bottom: .6rem; }
.place .btn--small { margin-top: auto; align-self: flex-start; }
.btn--small { min-height: 44px; padding: .5rem 1.05rem; font-size: .9375rem; }

/* the drive up and its profile */
.drive-layout { display: grid; gap: 1.75rem; }
@media (min-width: 56rem) { .drive-layout { grid-template-columns: .9fr 1.1fr; gap: 3rem; align-items: center; } }
.drive h2 { font-size: var(--step-2); }
.profile { margin: 0; }
.profile svg { display: block; width: 100%; height: auto; background: var(--snow); border-radius: var(--r-card); }
.profile-grid { stroke: var(--line); stroke-width: 1; }
.profile-tick { font: 500 14px var(--font); fill: var(--gray); }
.profile-area { fill: rgba(0, 128, 102, .14); }
.profile-line { fill: none; stroke: var(--teal); stroke-width: 3; stroke-linejoin: round; stroke-linecap: round; }
.profile-end { fill: var(--snow); stroke: var(--teal-deep); stroke-width: 3; }
.profile figcaption { margin-top: .6rem; }

/* links in to the model from the area pages, the home page and the listing */
.see-3d { margin: 1.5rem 0 0; font-weight: 600; }

/* the flight along the drive (#13): a readout over the model while it flies */
.terrain-flight {
  position: absolute; z-index: 3; left: 1rem; right: 1rem; bottom: 1rem; display: flex; align-items: center; gap: .75rem;
  padding: .55rem .6rem .55rem 1rem; border-radius: 999px; background: rgba(24, 27, 26, .78); color: #fff;
  max-width: 34rem; margin: 0 auto;
}
.terrain-flight-text { margin: 0; font-size: .875rem; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 0 1 auto; }
.terrain-flight-bar { flex: 1 1 4rem; height: 4px; border-radius: 2px; background: rgba(255, 255, 255, .28); overflow: hidden; }
.terrain-flight-bar > span { display: block; height: 100%; background: #fff; transform-origin: left center; transform: scaleX(0); }
.terrain-flight-stop { flex: 0 0 auto; min-height: 36px; padding: .3rem .9rem; border: 0; border-radius: 999px; background: #fff; color: var(--ink); font: 600 .8125rem/1 var(--font); cursor: pointer; }
.terrain.is-flying .terrain-hint { display: none; }
.terrain.is-flying .tl:not([data-label="fortunes-ridge"]) { opacity: 0; pointer-events: none; }
.terrain-bar button[data-fly] { border-color: var(--teal); }