/* ==========================================================================
   DANA MILLER REAL ESTATE — GLOBAL LAYER (site.css)
   Clean-source rebuild, phase R1 (July 19, 2026). One stylesheet, every page.
   Fonts are assigned globally on body; no page can fall through to a browser
   default and no page opts in per-page. Type scale per the Site Typography
   Standard (Reference/Site_Typography_Standard.md) — deviations are bugs.

   PALETTE — dana_palette_01 (locked; never improvise)
   - The champagne family (--champagne #C4A060, --champagne-light #D4B478)
     NEVER appears on light surfaces. Champagne owns CTAs and interactive
     accents on dark. Champagne Deep #8A6B33 is the sanctioned light-surface
     accent: eyebrows, section labels, small labels, location tags.
   - Blush is an accent voice only, never a surface: it may not fill buttons,
     backgrounds, or cards. Deep Blush #BC7E75 is the blush voice on light
     surfaces (a deliberate splash, one to two moments per page, ~5% max
     visual weight). Blush Rose #D9B8B3 stays on dark surfaces, small doses.
   - Text overlaying a photo counts as a dark surface; Champagne Light
     applies there.
   - Ruled exceptions to champagne-on-light (July 2026): the referral band's
     champagne hairline top border, the .dm-portrait champagne hairlines, and
     the open pull-quote's champagne quote mark, hairlines, and cite (all
     specified in the R1 work order and the approved build).
   ========================================================================== */

:root {
  --noir: #0C0C0C;
  --champagne: #C4A060;
  --champagne-deep: #8A6B33;
  --champagne-light: #D4B478;
  --blush: #D9B8B3;
  --blush-deep: #BC7E75;
  --parchment: #F5F0EA;
  --linen: #EDE7DF;
  --white-warm: #FDFAF7;
  --script-dark: #2A2929;

  /* Uniform form-field brightness tone on dark boxes (approved build, Round B
     ruling). A derived near-noir surface, not a palette color. */
  --field-tone: #161514;

  --font-body: 'Montserrat', sans-serif;
  --font-serif: 'Playfair Display', serif;
  --font-display: 'Cormorant Garamond', serif;

  --container-width: 1200px;
  --section-padding: 80px 20px;
}

/* --------------------------------------------------------------------------
   Base. The single global font assignment lives here.
   -------------------------------------------------------------------------- */

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

/* Horizontal containment: the off-canvas mobile nav sits translated 100%
   off-screen right; without this, some engines count it into layout width
   and the whole page clips at mobile widths. */
html, body { overflow-x: hidden; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 17px;
  font-weight: 400;
  line-height: 1.7;
  color: var(--script-dark);
  background: var(--white-warm);
}

h1, h2, h3, h4, h5, h6 { margin: 0 0 16px; font-weight: 400; line-height: 1.25; }
p { margin: 0 0 16px; }
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; margin: 0; padding: 0; }
blockquote, figure { margin: 0; }
button, input, select, textarea { font: inherit; }

@media (max-width: 768px) {
  body { font-size: 16px; }
}

/* --------------------------------------------------------------------------
   Layout
   -------------------------------------------------------------------------- */

.container { max-width: var(--container-width); margin: 0 auto; padding: 0 20px; }
.section { padding: var(--section-padding); }
/* Sections from the original compiled build render 100px verticals (About
   band, Your Next Move); mockup-round sections render 80px. The approved
   pages mix both, so ported sections keep their measured value. */
.section--tall { padding: 100px 20px; }
.text-center { text-align: center; }

/* Surfaces. Light is the default (body). */
.bg-noir { background: var(--noir); color: var(--white-warm); }
.bg-parchment { background: var(--parchment); }
.bg-linen { background: var(--linen); }

/* --------------------------------------------------------------------------
   Type scale (the blessed scale, locked July 17-18, 2026)
   -------------------------------------------------------------------------- */

/* Eyebrow (section): Montserrat 13 / 600 / 4px tracking, uppercase.
   Champagne Deep on light surfaces; champagne on dark. */
.eyebrow {
  display: block;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 4px;
  text-transform: uppercase;
  color: var(--champagne-deep);
  margin-bottom: 16px;
}
.bg-noir .eyebrow { color: var(--champagne); }

/* Sanctioned blush splash (one to two moments per page maximum; current
   ruled placement: the ABOUT DANA eyebrow on the homepage only). */
.eyebrow--blush { color: var(--blush-deep); }

/* Hero eyebrow: Montserrat 15/14 / 600 / 4px, uppercase. Sits over the hero
   photo, which counts as a dark surface: Champagne Light applies. */
.hero-eyebrow {
  display: block;
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 4px;
  text-transform: uppercase;
  color: var(--champagne-light);
  margin-bottom: 24px;
}

/* Hero h1: Playfair Display 56/44 at weight 400.
   P6 (post-Gate3, line-wrap rule): text-wrap: balance asks the browser to
   choose break points that even out line lengths instead of leaving a
   ragged (or single-word) last line. Unsupported browsers simply ignore
   the declaration and wrap normally — that inaction IS the graceful
   fallback here, no @supports block needed. Chromium honors it up to
   ~6 lines, which covers every headline on the site. */
.hero-title {
  font-family: var(--font-serif);
  font-size: 56px;
  font-weight: 400;
  line-height: 1.15;
  color: var(--white-warm);
  text-wrap: balance;
}
.hero-title em { font-style: italic; color: var(--champagne); }

/* Section title: Playfair Display 48/36 at weight 400.
   Also covers the Your Next Move h2 (48px). Balanced wrap per P6, same
   rationale as .hero-title above. */
.section-title {
  font-family: var(--font-serif);
  font-size: 48px;
  font-weight: 400;
  line-height: 1.7; /* inherited body rhythm in the approved build; do not tighten */
  color: var(--noir);
  margin-bottom: 16px;
  text-wrap: balance;
}
.bg-noir .section-title { color: var(--white-warm); }

/* Accent voice: Cormorant Garamond, italic where authored.
   Statement line ~24px (adjacent explanatory paragraphs stay body). */
.statement {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 24px;
  line-height: 1.6;
}

@media (max-width: 768px) {
  .hero-eyebrow { font-size: 14px; }
  .hero-title { font-size: 44px; }
  .section-title { font-size: 36px; }
}

/* --------------------------------------------------------------------------
   CTA buttons: Montserrat 17/16 / 500 / 3px (2px mobile), uppercase.
   Champagne owns CTAs on dark surfaces; CTAs on light surfaces are noir.
   Hover note (R1 changelog): the compiled build's champagne hover filled
   with blush rose, which the palette rules forbid (blush may not fill
   buttons). Hover here stays in the champagne family, pending Angel's
   ruling.
   -------------------------------------------------------------------------- */

.btn {
  display: inline-block;
  font-family: var(--font-body);
  font-size: 17px;
  font-weight: 500;
  letter-spacing: 3px;
  text-transform: uppercase;
  padding: 16px 42px;
  border: none;
  border-radius: 0;
  cursor: pointer;
  text-align: center;
  transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* On dark surfaces. */
.btn-primary { background: var(--champagne); color: var(--noir); }
.btn-primary:hover {
  background: var(--champagne-light);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(12, 12, 12, 0.3);
}

/* Ghost button on dark surfaces. */
.btn-outline {
  background: transparent;
  color: var(--white-warm);
  border: 1px solid color-mix(in srgb, var(--white-warm) 35%, transparent);
}
.btn-outline:hover {
  border-color: var(--champagne);
  color: var(--champagne-light);
  transform: translateY(-2px);
}

/* On light surfaces. */
.btn-dark { background: var(--noir); color: var(--parchment); }
.btn-dark:hover {
  background: var(--script-dark);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(12, 12, 12, 0.18);
}

@media (max-width: 768px) {
  .btn { font-size: 16px; letter-spacing: 2px; padding: 14px 30px; }
}

/* --------------------------------------------------------------------------
   Header / nav. Fixed bar, noir glass by default (this IS the approved
   build's "scrolled" appearance — correct on every page without a dark/photo
   hero at the top: communities index, buyer, and any later page built the
   same way). --transparent is the modifier for hero pages, swapped by
   js/nav.js once the visitor scrolls past the hero.
   Mobile menu is the pure-CSS checkbox pattern (no runtime dependency).
   -------------------------------------------------------------------------- */

.site-header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1000;
  padding: 15px 0;
  background: color-mix(in srgb, var(--noir) 92%, transparent);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.12);
  transition: all 0.3s;
}
.site-header--transparent {
  padding: 20px 0;
  background: transparent;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  box-shadow: none;
}

.nav-container { display: flex; align-items: center; justify-content: space-between; }

.logo { display: block; width: 200px; height: 65px; }
.logo img { width: 100%; height: 100%; object-fit: contain; object-position: left; }

.nav-links { display: flex; gap: 36px; }
.nav-links a {
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--white-warm) 92%, transparent);
}
.nav-links a:hover { color: var(--champagne); }

#nav-toggle { display: none; }
.hamburger {
  display: none;
  position: relative;
  width: 30px;
  height: 20px;
  cursor: pointer;
  z-index: 1002;
}
.hamburger span {
  display: block;
  position: absolute;
  width: 100%;
  height: 2px;
  background: var(--parchment);
  transition: all 0.25s ease-in-out;
}
.hamburger span:nth-child(1) { top: 0; }
.hamburger span:nth-child(2) { top: 9px; }
.hamburger span:nth-child(3) { top: 18px; }

@media (max-width: 768px) {
  .hamburger { display: block; }
  .nav-links {
    position: fixed;
    top: 0;
    right: 0;
    width: 100vw;
    height: 100vh;
    background: var(--noir);
    z-index: 1001;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 30px;
    transform: translateX(100%);
    transition: transform 0.4s ease-in-out;
  }
  .nav-links a { font-size: 1.25rem; }
  #nav-toggle:checked ~ .nav-links { transform: translateX(0); }
  #nav-toggle:checked ~ .hamburger span:nth-child(1) { top: 9px; transform: rotate(45deg); }
  #nav-toggle:checked ~ .hamburger span:nth-child(2) { opacity: 0; }
  #nav-toggle:checked ~ .hamburger span:nth-child(3) { top: 9px; transform: rotate(-45deg); }
}

/* --------------------------------------------------------------------------
   Footer. Per-platform text-labeled social links (never raw URLs), DRE lines
   with unambiguous attribution: a mobile reader must never mistake the GUIDE
   number for Dana's. .ra-dre keeps its designed small size on mobile,
   excluded from the 16px bump (typography standard, DRE misattribution fix).
   -------------------------------------------------------------------------- */

.footer { background: var(--noir); color: var(--parchment); padding: 80px 20px 40px; }
.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 40px;
  margin-bottom: 60px;
}

.footer-brand h2 {
  font-family: var(--font-body);
  font-size: 1.5rem;
  font-weight: 500;
  letter-spacing: 4px;
  margin-bottom: 15px;
  color: var(--white-warm);
}
.footer-lockup { width: 200px; height: 60px; margin: 20px 0; }
.footer-lockup img { width: 100%; height: 100%; object-fit: contain; object-position: left; }
.footer-tagline {
  font-size: 0.9rem;
  font-weight: 300;
  color: color-mix(in srgb, var(--parchment) 50%, transparent);
  margin-bottom: 6px;
}

.ra-dre {
  font-size: 11px;
  letter-spacing: 1px;
  line-height: 1.9;
  color: color-mix(in srgb, var(--parchment) 60%, transparent);
}

.footer-socials { display: flex; gap: 20px; flex-wrap: wrap; margin-top: 20px; }
.footer-socials a {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--champagne);
}
.footer-socials a:hover { color: var(--champagne-light); }

.footer-col h5 {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--champagne);
  margin: 0 0 20px;
}
.footer-col li { margin-bottom: 12px; }
.footer-col li a {
  font-size: 1rem;
  font-weight: 300;
  color: color-mix(in srgb, var(--parchment) 70%, transparent);
}
.footer-col li a:hover { color: var(--champagne); }

.footer-phone {
  display: block;
  font-size: 1.5rem;
  font-weight: 500;
  letter-spacing: 1px;
  color: var(--champagne-light);
  margin-bottom: 8px;
}
.footer .btn { margin-top: 20px; }

.footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 20px;
  border-top: 1px solid color-mix(in srgb, var(--white-warm) 10%, transparent);
  padding-top: 40px;
  font-size: 12px;
  color: color-mix(in srgb, var(--parchment) 45%, transparent);
}
.footer-bottom-links { display: flex; gap: 20px; flex-wrap: wrap; }
.footer-bottom a:hover { color: var(--champagne); }

@media (max-width: 768px) {
  .footer-grid { grid-template-columns: 1fr; gap: 30px; }
  .footer-bottom { flex-direction: column; text-align: center; justify-content: center; }
  .footer-bottom-links { justify-content: center; }
}

/* --------------------------------------------------------------------------
   Not-in-NorCal referral band. Quiet courtesy register on parchment; the
   champagne hairline top border is the global same-color adjacency fix and
   applies on every page.
   -------------------------------------------------------------------------- */

.referral-band {
  background: var(--parchment);
  border-top: 1px solid var(--champagne);
  padding: 88px 20px;
  text-align: center;
}
.referral-band h3 {
  font-family: var(--font-display);
  font-size: 2rem;
  font-weight: 400;
  color: var(--noir);
  margin-bottom: 12px;
}
.referral-band p {
  font-size: 1.05rem;
  color: var(--script-dark);
  line-height: 1.7;
  max-width: 600px;
  margin: 0 auto 28px;
}

.referral-form {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
  max-width: 860px;
  margin: 0 auto;
}
.referral-form input:not([type="checkbox"]),
.referral-form select {
  padding: 12px 14px;
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--script-dark);
  background: var(--white-warm);
  border: 1px solid color-mix(in srgb, var(--script-dark) 18%, transparent);
  border-radius: 3px;
  min-width: 150px;
}
/* Send It standard: 13 / 600 / 2px, uppercase. The 14px top margin keeps the
   button from crowding the field row (24px visual seam with the flex gap). */
.referral-form button {
  background: var(--noir);
  color: var(--parchment);
  border: none;
  border-radius: 3px;
  padding: 12px 26px;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 2px;
  text-transform: uppercase;
  cursor: pointer;
  margin-top: 14px;
  flex-basis: 100%;
  max-width: 200px;
  margin-left: auto;
  margin-right: auto;
}

@media (max-width: 560px) {
  .referral-form { flex-direction: column; align-items: stretch; max-width: 340px; }
  .referral-form button { max-width: none; }
}

/* --------------------------------------------------------------------------
   Guide band (parchment gallery treatment). Audience set per page: buyer
   pages carry the buyer card only, seller pages the seller card only, the
   homepage both. Single-card pages add .guide-cards--single.
   -------------------------------------------------------------------------- */

.guide-band { background: var(--parchment); text-align: center; }
/* P6: guide-band subtitle gets the same balanced wrap as headlines. */
.guide-lead {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.35rem;
  line-height: 1.6;
  color: var(--script-dark);
  max-width: 640px;
  margin: 0 auto 56px;
  text-wrap: balance;
}

/* P5 (post-Gate3): the sellers guide-band ships one line doing double duty
   as headline and subtitle (the R4 "singular-headline" ruling — see
   REBUILD_HANDOFF section 2). After the P2 cover scale-up, evaluated at
   full .section-title size (48px) against the now-larger cover and judged
   still oversized for a single line sitting over one modest guide card;
   stepped down one increment. Reuses the already-sanctioned mobile
   .section-title value (36px) rather than inventing a new size. */
.guide-heading--step-down { font-size: 36px; }

/* P3 (uniform-consent + home-header round): home's guide-band headline
   replaces the retired two-line stack (48px .section-title + 21.6px
   .guide-lead subtitle). Scoped modifier, not a .section-title mutation:
   every other .section-title instance sitewide is untouched. Sized at the
   midpoint of the two retired values ((48 + 21.6) / 2 = 34.8, rounded to
   the clean 35px), then tuned once: line-height tightened to 1.2 (within
   the 1.1-1.25 display-leading target; .section-title's own 1.7 body
   rhythm was the too-large read's real culprit, not just glyph size).
   Letter-spacing stays neutral, no new tracking value, matching
   .section-title's own untracked serif. max-width caps the measure so the
   balanced wrap (inherited from .section-title's text-wrap: balance) lands
   on two lines at desktop with the shorter line on top, per the standing
   wrap rule; three lines is acceptable at the mobile size below. */
.guide-heading--home {
  font-size: 35px;
  line-height: 1.2;
  max-width: 700px;
  margin: 0 auto 16px;
}
/* Spacing rhythm: with the subtitle gone, .guide-heading--home is now the
   immediate previous sibling of .guide-cards, so the existing "singular-
   headline" rule below (.guide-band .section-title + .guide-cards) already
   fires and supplies the 40px header-to-grid gap used on the sellers page's
   own singular-headline band, the same rhythm, no new rule needed. This
   margin-bottom (16px, .section-title's own default) collapses against
   that 40px per normal sibling-margin rules, landing the visible gap at
   40px, matching the established rhythm rather than gaping open. */

@media (max-width: 760px) {
  /* Proportional to the 35px desktop value at .section-title's own
     48px -> 36px (0.75) desktop-to-mobile ratio: 35 * 0.75 = 26.25,
     rounded to the clean 26px. Measure narrows with it so three lines is
     available if the balance algorithm needs it, per spec. */
  .guide-heading--home { font-size: 26px; line-height: 1.22; max-width: 320px; margin-bottom: 12px; }
}

.guide-cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 56px;
  max-width: 920px;
  margin: 0 auto;
  /* P2 (guide-bands fix round): justify-items: stretch, not center. Both
     tracks are already forced equal by the 1fr grid, but a center-
     justified item can still size itself to its own content in some
     rendering paths rather than shrinking to the track — the buyer book's
     wider cover pulling its column visually off-center against the
     seller's narrower one is exactly that symptom. Stretch removes the
     ambiguity: each .guide-card fills its full (equal) track, then caps
     itself at 380px and centers within that track via its own margin
     below, so the visual result matches justify-items:center everywhere
     it already looked right and self-corrects everywhere it didn't. */
  justify-items: stretch;
}
.guide-cards--single { grid-template-columns: minmax(0, 1fr); max-width: 420px; }
/* When a page's guide-band has no .guide-lead paragraph (the singular-
   headline ruling, R4 review round), the title needs its own gap before
   the card grid, matching the 40px header-to-grid rhythm used elsewhere.
   Adjacent-sibling scoped so pages that still pair title + lead (home,
   buyer) are untouched. */
.guide-band .section-title + .guide-cards { margin-top: 40px; }

.guide-card {
  max-width: 380px;
  width: 100%;
  margin: 0 auto;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.guide-cover {
  position: relative;
  z-index: 0;
  /* P2 (post-Gate3): desktop cover scaled ~15% up from the Gate 3 300px
     baseline. The card that contains this box (.guide-card) itself caps
     out at 380px, so raising only the px term here was a no-op at desktop
     widths — 82% of 380 (311.6px) was already the binding constraint, not
     the old 300px term. Raised the percentage instead so it actually binds
     at the card's real ~380px width (380 * 0.91 ≈ 345.8px, +15.3% over the
     300px baseline); the 345px term is now just a hard ceiling. Phone
     proportion capped at the original 300px/82% via the max-width
     breakpoint below; the glow (::before) is sized in % of this box, so it
     scales with it automatically at both sizes. */
  width: min(345px, 91%);
  aspect-ratio: 1 / 1;
  margin-bottom: 6px;
  filter: drop-shadow(0 22px 32px rgba(12, 12, 12, 0.22));
}
/* Both cover source images are exported at the same pixel height (see the
   P5 changelog note below), so object-fit: contain scales them by the same
   factor inside the shared square box; object-position: bottom keeps them
   sitting on a common baseline instead of vertically centered, satisfying
   "equal-height and bottom-aligned" without any per-card override. */
/* The picture element is absolutely positioned so the square aspect-ratio
   box is the sole height authority; in-flow content would let each image's
   natural aspect ratio stretch the box and break the equal-height rule. */
.guide-cover picture { position: absolute; inset: 0; }
.guide-cover img { width: 100%; height: 100%; object-fit: contain; object-position: center bottom; }

/* Champagne under-glow lift (P5 guide-cover rider). Champagne and Champagne
   Light are dark-surface-only per palette law (CLAUDE.md); the guide-band
   this sits on is a parchment (light) surface sitewide, so a literal
   champagne glow would violate the palette law here. Substituted the
   sanctioned light-surface accent, Champagne Deep, at low opacity instead —
   still a champagne-family token, still a soft radial lift, just legal on
   this surface. Flagged in the build report for Angel: the work order's
   "dark-surface only" phrasing has no dark guide-band to attach to today.
   --buyer (black book) reads stronger; --seller (white book) stays minimal. */
.guide-cover::before {
  content: "";
  position: absolute;
  z-index: -1;
  left: 50%;
  bottom: 4%;
  width: 68%;
  height: 24%;
  transform: translateX(-50%);
  border-radius: 50%;
  filter: blur(16px);
  pointer-events: none;
}
.guide-cover--buyer::before {
  background: radial-gradient(ellipse at center, color-mix(in srgb, var(--champagne-deep) 45%, transparent) 0%, transparent 72%);
}
.guide-cover--seller::before {
  background: radial-gradient(ellipse at center, color-mix(in srgb, var(--champagne-deep) 16%, transparent) 0%, transparent 72%);
}
/* P4 (uniform-consent + home-header round): role-level bump, +10-15% over
   the prior 1.5rem (24px), one shared desktop value across the home,
   buyer, and seller guide bands (all three use this class, no per-page
   override). 27px = +12.5%, mid-window, clean pixel. */
.guide-title {
  font-family: var(--font-display);
  font-size: 27px;
  font-weight: 400;
  color: var(--noir);
  margin-bottom: 8px;
}
.guide-promise {
  font-size: 15px;
  color: var(--script-dark);
  line-height: 1.7;
  margin-bottom: 20px;
  flex: 1;
  text-wrap: balance; /* P2 (consent-row/descriptor revert round): the
                          descriptor now sits below the cover on buyers and
                          sellers, same wrap-rule treatment already applied
                          to .hero-title/.section-title/.guide-lead */
}

/* Guide CTA (P4, Gate 3): the old .guide-form email-capture is retired —
   guides are a link-out to the agentdana.net funnel pages now, UTM-tagged
   per placement. Reuses the sitewide .btn/.btn-dark pair rather than a
   bespoke button so it matches every other light-surface CTA on the site. */
.guide-cta { width: 100%; max-width: 320px; }

@media (max-width: 760px) {
  .guide-cards { grid-template-columns: 1fr; gap: 64px; }
  /* P2: phone proportion capped at the pre-scale-up size — the desktop
     345px bump does not carry to mobile. */
  .guide-cover { width: min(300px, 82%); }
  /* P4 (uniform-consent + home-header round): mobile proportion capped at
     the pre-bump 1.5rem (24px) value, same "desktop bumps, mobile holds"
     precedent P2 already set for .guide-cover directly above: the smaller
     mobile card has less room to spare, so the role-level increase applies
     to desktop only. */
  .guide-title { font-size: 24px; }
}

/* --------------------------------------------------------------------------
   Dark-box concierge form. Fields sit on #161514, the uniform field
   brightness tone from the approved build (a derived near-noir surface, not
   a palette token); the brightened hairline is white-warm at 45%.
   -------------------------------------------------------------------------- */

.dark-box {
  background: var(--noir);
  color: var(--white-warm);
  padding: 52px 40px;
  max-width: 800px;
  margin: 34px auto 0;
  border-radius: 4px;
  box-shadow: 0 20px 60px rgba(12, 12, 12, 0.28);
  text-align: center;
}
.dark-box h3 {
  font-family: var(--font-serif);
  font-size: 1.6rem;
  font-weight: 400;
  color: var(--white-warm);
  margin-bottom: 22px;
}

.match-form { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.match-form input:not([type="checkbox"]),
.match-form select {
  appearance: none;
  -webkit-appearance: none;
  padding: 12px 14px;
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--parchment);
  background-color: var(--field-tone);
  border: 1px solid color-mix(in srgb, var(--white-warm) 45%, transparent);
  border-radius: 3px;
  min-width: 170px;
}
.match-form select {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 width=%2710%27 height=%276%27%3E%3Cpath d=%27M1 1l4 4 4-4%27 stroke=%27%23C4A060%27 fill=%27none%27 stroke-width=%271.5%27/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  padding-right: 30px;
}
.match-form input::placeholder { color: var(--parchment); }
/* Champagne CTA on dark. Send It standard: 13 / 600 / 2px, uppercase. */
.match-form button {
  background: var(--champagne);
  color: var(--noir);
  border: none;
  border-radius: 3px;
  padding: 13px 28px;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 2px;
  text-transform: uppercase;
  cursor: pointer;
  margin-top: 14px;
  flex-basis: 100%;
  max-width: 440px;
  margin-left: auto;
  margin-right: auto;
}

@media (max-width: 560px) {
  .match-form { flex-direction: column; align-items: stretch; }
  .dark-box { padding: 40px 22px; }
}

/* --------------------------------------------------------------------------
   Portrait treatment B (ruled July 19, 2026): double-hairline gallery frame.
   1px champagne border on the frame, offset hairline 6px outside, soft lift
   shadow. Champagne-on-light sanctioned by the same ruling as the referral
   band hairline. The sitewide portrait treatment; every phase inherits it.
   -------------------------------------------------------------------------- */

.dm-portrait {
  position: relative;
  display: block;
  border: 1px solid var(--champagne);
  box-shadow: 0 18px 40px rgba(12, 12, 12, 0.18);
}
.dm-portrait::after {
  content: "";
  position: absolute;
  inset: -7px;
  border: 1px solid color-mix(in srgb, var(--champagne) 55%, transparent);
  pointer-events: none;
}
.dm-portrait img { width: 100%; height: 100%; object-fit: cover; }

/* --------------------------------------------------------------------------
   Open pull-quote (the Madamba resolution): Cormorant italic ~28px with an
   oversized champagne open-quote mark and champagne hairline rules above
   and below. Quote text is verbatim client language, exempt from the
   writing-rules sweep.
   -------------------------------------------------------------------------- */

.pull-quote {
  max-width: 640px;
  margin: 24px auto 64px;
  padding: 44px 10px 40px;
  border-top: 1px solid var(--champagne);
  border-bottom: 1px solid var(--champagne);
  text-align: center;
}
.pull-quote::before {
  content: "\201C";
  display: block;
  font-family: var(--font-display);
  font-size: 64px;
  line-height: 0.6;
  color: var(--champagne);
  margin-bottom: 18px;
}
.pull-quote blockquote {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.75rem;
  line-height: 1.55;
  color: var(--script-dark);
  margin: 0 0 18px;
}
.pull-quote cite {
  font-style: normal;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--champagne);
}

@media (max-width: 768px) {
  .pull-quote blockquote { font-size: 1.35rem; }
}

/* --------------------------------------------------------------------------
   Stats strip. Static text always renders (JavaScript off included);
   count-up is optional garnish only and is not wired in R1. Zeros can never
   display.
   -------------------------------------------------------------------------- */

.stats-strip {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  max-width: 720px;
  margin: 0 auto;
  text-align: center;
}
/* Stat numbers speak in the champagne voice (touch-up ruling, July 19).
   On light surfaces that resolves to Champagne Deep, the sanctioned
   light-surface accent; literal champagne stays barred on light by the
   July 7 palette rulings. On dark, real champagne. */
.stat-n {
  font-family: var(--font-display);
  font-size: 2.6rem;
  font-weight: 300;
  color: var(--champagne-deep);
}
.bg-noir .stat-n { color: var(--champagne); }
.stat-l {
  font-size: 12px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--script-dark);
}
.bg-noir .stat-l { color: color-mix(in srgb, var(--parchment) 70%, transparent); }

@media (max-width: 560px) {
  .stats-strip { grid-template-columns: 1fr; gap: 18px; }
}

/* ==========================================================================
   PAGE SECTIONS (R2, home reference patterns — reused by later ports)
   ========================================================================== */

/* Utility: built-hidden blocks (video slot, price ladder, reserved guide
   card). Present in markup with real layout, toggled off. Unhide by removing
   the class, never by deleting the rule. */
.is-hidden { display: none !important; }

/* --------------------------------------------------------------------------
   Hero (photo counts as a dark surface). Approved home hero: gradient-washed
   photo, centered content, two CTAs.
   -------------------------------------------------------------------------- */

.hero {
  min-height: 665px;
  height: 95vh;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  background-size: cover;
  background-position: center;
}
.hero-content {
  position: relative;
  z-index: 2;
  max-width: 800px;
  text-align: center;
  padding: 0 10px 76px;
}
.hero-sub {
  font-size: 1.2rem;
  font-weight: 300;
  max-width: 600px;
  margin: 0 auto 40px;
  color: rgba(255, 255, 255, 0.75);
}
.hero-ctas { display: flex; gap: 20px; justify-content: center; flex-wrap: wrap; }

/* Buyer/detail page-hero sub-line (approved mirror values): margin 20px
   auto, opacity 0.8 over the inherited parchment color, not the photo-hero's
   hardcoded white rgba. Scoped to .page-hero so the photo hero above is
   untouched. */
.page-hero .hero-sub { margin: 20px auto; color: inherit; opacity: 0.8; }

@media (max-width: 768px) {
  .hero { height: auto; min-height: 500px; padding: 120px 20px 80px; }
  .hero-ctas { flex-direction: column; align-items: center; gap: 12px; }
  .hero-ctas .btn { width: 100%; max-width: 280px; }
}
@media (max-width: 480px) {
  .hero-ctas .btn { width: auto; max-width: 230px; padding: 14px 30px; }
}

/* Header scroll-swap (R2 ruled change 3): pages with a transparent hero
   header get --transparent in markup; js/nav.js removes it past the hero
   top, which falls back to the base .site-header look (fixed R3: base now
   IS the correct "scrolled" appearance, so no separate --scrolled class is
   needed). Header is fixed, so the swap cannot move page content. */

/* --------------------------------------------------------------------------
   Quotes band (In Their Words). Champagne-deep quote marks sit on the
   comment text itself, never as dividers (July 17 ruling). Quote text is
   verbatim client language, exempt from the writing-rules sweep.
   -------------------------------------------------------------------------- */

.quotes-band { background: var(--parchment); text-align: center; }
.quote { max-width: 680px; margin: 0 auto 52px; }
.quote:last-of-type { margin-bottom: 0; }
.quote blockquote {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.5rem;
  line-height: 1.55;
  color: var(--script-dark);
  margin: 0 0 14px;
}
.quote blockquote::before { content: "\201C"; color: var(--champagne-deep); }
.quote blockquote::after { content: "\201D"; color: var(--champagne-deep); }
.quote cite {
  font-style: normal;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--champagne-deep);
}
.see-all {
  display: inline-block;
  margin-top: 26px;
  color: var(--champagne-deep);
  font-weight: 600;
  font-size: 14px;
  letter-spacing: 1px;
  text-transform: uppercase;
}
@media (min-width: 769px) {
  .see-all { margin-top: 36px; }
}
@media (max-width: 640px) {
  .quote blockquote { font-size: 1.2rem; }
}

/* --------------------------------------------------------------------------
   Communities carousel (script-dark surface). Native scroll-snap carries
   touch drag; js/carousel.js adds arrows, mouse drag, and gentle
   auto-advance (KNOWN_ISSUES item 1 dissolves here).
   -------------------------------------------------------------------------- */

.carousel-section {
  background: var(--script-dark);
  overflow: hidden;
  padding: 100px 0;
  position: relative;
}
.carousel-section .section-header { margin-bottom: 35px; padding: 0 20px; }
.carousel-section .eyebrow { color: var(--champagne); }
.carousel-section .section-title { color: var(--parchment); }
.section-desc { max-width: 600px; font-size: 1.125rem; font-weight: 300; }
.carousel-section .section-desc { color: color-mix(in srgb, var(--parchment) 72%, transparent); margin: 0; }
/* Header-to-carousel gap is 35px by the July 17 H3 ruling. The mirror renders
   50px because an inline style outranked its fix rule; the ruling is the
   truth here, flagged in the R2 changelog. */

.carousel-wrap { position: relative; width: 100%; }
.carousel-track {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  gap: 24px;
  padding: 20px 5%;
  scrollbar-width: none;
}
.carousel-track::-webkit-scrollbar { display: none; }
.carousel-slide { flex: 0 0 auto; width: 350px; scroll-snap-align: start; }

.carousel-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
  background: var(--white-warm);
  border: none;
  border-radius: 50%;
  width: 50px;
  height: 50px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
  color: var(--noir);
}
.carousel-arrow:hover { transform: translateY(-50%) scale(1.06); }
.carousel-arrow.left { left: 20px; }
.carousel-arrow.right { right: 20px; }

.community-card {
  display: block;
  height: 450px;
  position: relative;
  border-radius: 8px;
  overflow: hidden;
  transition: transform 0.5s ease;
}
/* Tile-text contrast fix (July 21 ruling, WO_TileText_Contrast; v2 values
   per the WO_TileGradient_v2 amendment): the uniform gradient-deepen
   fallback — one shared four-stop value (the middle stops prevent a
   visible band line), never per-tile patches. v2 raises coverage to 78%
   and strengthens the middle stops so the full name height sits in
   protected range. Both tile surfaces (home carousel, index grid) inherit
   this one rule. */
.community-card-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.82) 0%, rgba(0, 0, 0, 0.58) 30%, rgba(0, 0, 0, 0.28) 55%, rgba(0, 0, 0, 0) 78%);
  z-index: 1;
  pointer-events: none;
  transition: background 0.5s ease;
}
/* Hover-zoom (ported from the approved build): the landmark placeholder
   (or a future <img> in its place) scales up on hover, overlay deepens.
   Lives on the shared .community-card class, so it covers every card —
   home carousel and communities index tiles alike. */
.community-card .ra-landmark { transition: transform 0.5s ease; }
.community-card:hover .ra-landmark { transform: scale(1.05); }
.community-card:hover .community-card-overlay {
  background: linear-gradient(to bottom, rgba(12, 12, 12, 0.15), rgba(12, 12, 12, 0.92));
}
.community-card-content {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  padding: 30px;
  z-index: 2;
  color: var(--white-warm);
}
/* Tile name treatment (punch list P3, July 20, 2026): community names on
   home and index tiles ruled champagne-light (the text-over-photo token per
   palette law) and larger, rhyming with the detail-hero pattern so both
   surfaces read as one system. One shared rule covers home's h3 and the
   index grid's h4. 2.4rem = 1.37x the prior 1.75rem (inside the ruled
   1.35-1.5x range); measured no-wrap ceilings: desktop 3-col index tile
   41.4px, home's fixed 350px slide 50px+, so 2.4rem holds on both. The
   index 1-col phone tile ceilings at 32.1px ("East Sacramento") and the
   2-col 561-716px squeeze zone lower still, below the range floor of
   37.8px, so no in-range value can hold there; the step-down below keeps
   those names at the pre-round 1.75rem instead of wrapping. Flagged for
   Angel's ratification in the punch-list changelog. Descriptor line
   (.community-card-tag) deliberately unchanged. */
.community-card h3,
.community-card h4 {
  font-family: var(--font-serif);
  font-size: 2.4rem;
  font-weight: 400;
  color: var(--champagne-light);
  margin: 0 0 8px;
}
@media (max-width: 720px) {
  .community-grid .community-card h4 { font-size: 1.75rem; }
}
/* Text-shadow insurance (WO_TileText_Contrast rider; v2 values per the
   WO_TileGradient_v2 amendment): catches bright image detail poking
   through the scrim on the name and descriptor only. One shared
   declaration; values are ruled, do not exceed. */
.community-card h3,
.community-card h4,
.community-card-tag {
  text-shadow: 0 1px 5px rgba(0, 0, 0, 0.55);
}
.community-card-tag { font-size: 0.9rem; opacity: 0.9; margin-bottom: 4px; }

/* Labeled landmark placeholder frame (approved bridge until real
   photography lands; swap the frame for an <img> per card). */
.ra-landmark {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 20px;
  background: linear-gradient(160deg, #1D1C1A, #141312);
  border: 1.5px dashed color-mix(in srgb, var(--champagne) 40%, transparent);
  color: var(--champagne-light);
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 2px;
  text-transform: uppercase;
  line-height: 1.6;
}

/* Community imagery drop-in (July 20, 2026): the real photograph that
   replaces .ra-landmark, occupying the identical layer (absolute, inset 0,
   below the untouched overlay). The hover-zoom rule mirrors the existing
   .ra-landmark hover pair above verbatim; no overlay or content layer was
   edited. object-position nudges, if any card needs one, are set inline
   per-tile and logged in the changelog. */
.community-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}
.community-card:hover .community-img { transform: scale(1.05); }
.page-hero .community-img { z-index: 0; }

/* --------------------------------------------------------------------------
   About band (light surface with hairline top).
   -------------------------------------------------------------------------- */

.about-band {
  background: var(--white-warm);
  border-top: 1px solid rgba(139, 129, 115, 0.1);
}
.about-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 60px;
}
/* Home About portrait: sitewide treatment B (.dm-portrait) per the touch-up
   ruling, July 19; the cream-offset treatment is retired. */
.about-portrait { height: 500px; }
.about-portrait img { object-position: top; }
.about-copy { color: var(--script-dark); line-height: 1.8; margin-bottom: 30px; }
.about-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-bottom: 30px;
  text-align: left;
}
.about-stats .stat-n { font-size: 2.5rem; }

@media (max-width: 768px) {
  .about-grid { grid-template-columns: 1fr; gap: 30px; }
  .about-portrait { height: 350px; }
  .about-stats .stat-n { font-size: 2rem; }
}

/* --------------------------------------------------------------------------
   Hidden video slot (unhides when the myth-busting video lands).
   -------------------------------------------------------------------------- */

.video-frame {
  aspect-ratio: 16 / 9;
  max-width: 880px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 30px;
  background: var(--field-tone);
  border: 1.5px dashed color-mix(in srgb, var(--champagne) 45%, transparent);
  color: var(--champagne-light);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 2px;
  text-transform: uppercase;
  line-height: 1.8;
}

/* --------------------------------------------------------------------------
   Price ladder (hidden until Dana's rung photos land).
   -------------------------------------------------------------------------- */

.ladder-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 24px;
  max-width: var(--container-width);
  margin: 0 auto;
}
.rung {
  background: var(--white-warm);
  border-radius: 4px;
  overflow: hidden;
  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.05);
  text-align: left;
}
.rung-photo {
  height: 200px;
  background: var(--linen);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--script-dark);
  font-size: 13px;
}
.rung-body { padding: 26px; }
.rung-price { font-family: var(--font-display); font-size: 1.6rem; color: var(--noir); }
.rung-place {
  font-size: 12px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--champagne-deep);
  font-weight: 600;
  margin: 4px 0 12px;
}
.rung-verdict { font-size: 14px; color: var(--script-dark); line-height: 1.7; }
.quiet-caption { font-size: 13px; color: var(--script-dark); opacity: 0.75; text-align: center; margin-top: 26px; }

/* --------------------------------------------------------------------------
   Next Move closing band (noir).
   -------------------------------------------------------------------------- */

.next-move { text-align: center; }
.next-move .eyebrow { color: var(--champagne-light); }
.next-move .section-title { color: var(--parchment); margin: 15px 0; }
.next-move p {
  color: rgba(247, 241, 235, 0.7);
  max-width: 600px;
  margin: 0 auto 30px;
}
.next-move-ctas { display: flex; gap: 20px; justify-content: center; flex-wrap: wrap; }

/* ==========================================================================
   PAGE SECTIONS (R3 — communities index, buyer, community detail template)
   ========================================================================== */

/* --------------------------------------------------------------------------
   Page hero: solid noir hero for pages without hero photography (buyer,
   community detail). Reuses .hero-title/.hero-sub typography exactly —
   the same Playfair 400 hero pattern ruled sitewide (Round B), just on a
   flat surface instead of a photo. Header on these pages is the base
   .site-header (no --transparent modifier, no nav.js): the mirror's own
   header is "scrolled" (solid) from load on every page like this one.
   -------------------------------------------------------------------------- */

.page-hero {
  position: relative;
  overflow: hidden;
  background: var(--noir);
  color: var(--parchment);
  padding: 140px 20px 68px;
  text-align: center;
}
.page-hero .hero-title { margin-bottom: 20px; }
.page-hero .eyebrow { color: var(--champagne-light); }

/* Community detail hero line (ruled down from hero-h1 sizing, reads
   oversized for the band it occupies): section-title role instead,
   Playfair 400 48/36. Buyer keeps .hero-title untouched. */
.page-hero .section-title { color: var(--parchment); margin-bottom: 20px; }

/* Detail hero band (punch list P4, July 20, 2026): community detail pages
   only, via the --tall modifier the generator emits; buyer/seller pages
   keep the base .page-hero unchanged. Flex centering keeps the eyebrow +
   hero-line composition intact while min-height stretches the band; the
   absolutely positioned image and scrim scale with it automatically. */
.page-hero--tall {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 60vh;
}
@media (max-width: 768px) {
  .page-hero--tall { min-height: 48vh; }
}

/* Community detail hero background-image slot (P9): a labeled landmark
   placeholder frame sits behind the content until real photography lands,
   same layered gradient-overlay pattern as .community-card-overlay so the
   hero line and eyebrow stay legible over any future photo. */
.page-hero .ra-landmark { z-index: 0; }
.page-hero-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(rgba(12, 12, 12, 0.55), rgba(12, 12, 12, 0.85));
}
.page-hero > .container { position: relative; z-index: 2; }

@media (max-width: 768px) {
  .page-hero { padding: 100px 16px 60px; }
}

/* --------------------------------------------------------------------------
   Value cards (buyer "Why Work With Dana", reusable wherever a page needs a
   numbered 3-up value grid on a light surface).
   -------------------------------------------------------------------------- */

.value-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 40px;
  margin-top: 40px;
}
.value-card {
  padding: 30px;
  background: var(--white-warm);
  border-radius: 4px;
  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.05);
}
.value-card-num {
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: var(--champagne-deep);
  margin-bottom: 10px;
  font-weight: 700;
}
.value-card h3 { font-size: 1.35rem; margin-bottom: 15px; }
.value-card p { color: var(--script-dark); font-size: 15px; line-height: 1.7; margin: 0; }

@media (max-width: 768px) {
  .value-cards { grid-template-columns: 1fr; gap: 20px; }
}

/* --------------------------------------------------------------------------
   Communities flat grid (index page): 15 single-size tiles, 3 columns on
   desktop (14 community tiles land in exactly 5 full rows; no orphan
   handling needed). Emphasis lives in ordering, not size or span.
   -------------------------------------------------------------------------- */

.community-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 40px;
}
.community-grid .community-card { height: 300px; }
.community-grid .ra-landmark { align-items: flex-start; padding-top: 56px; }

@media (max-width: 1024px) {
  .community-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .community-grid { grid-template-columns: 1fr; }
}

/* Out-of-area referral tile: tile 15, same grid cell as a community card
   but noir with a champagne hairline border (it is an offer, not a
   community, so it reads distinctly without outweighing the rest). */
.referral-tile {
  height: 300px;
  background: var(--noir);
  border: 1px solid color-mix(in srgb, var(--champagne) 30%, transparent);
  border-radius: 4px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: 30px;
  color: var(--parchment);
}
.referral-tile .eyebrow { color: var(--champagne); margin-bottom: 10px; }
.referral-tile p {
  font-family: var(--font-display);
  font-size: 1.2rem;
  line-height: 1.5;
  margin-bottom: 16px;
}
.referral-tile a {
  color: var(--champagne);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 2px;
  text-transform: uppercase;
  border-bottom: 1px solid color-mix(in srgb, var(--champagne) 45%, transparent);
  padding-bottom: 2px;
}

/* --------------------------------------------------------------------------
   Benefit checklist (community detail pages). No visual precedent exists
   anywhere in the approved build for this exact primitive — built from
   locked palette + blessed type-scale tokens only, no new design choices.
   Flagged in the R3 changelog as open for the Fable design pass.
   -------------------------------------------------------------------------- */

.benefit-list {
  display: grid;
  grid-template-columns: minmax(0, min(640px, max-content));
  width: fit-content;
  max-width: 100%;
  margin: 0 auto;
  text-align: left;
}
.benefit-item {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 14px 0;
  border-bottom: 1px solid var(--linen);
  font-size: 17px;
  line-height: 1.6;
  color: var(--script-dark);
}
.benefit-item:last-child { border-bottom: none; }
.benefit-item::before {
  content: "\2713";
  flex: none;
  color: var(--champagne-deep);
  font-size: 15px;
  font-weight: 600;
  line-height: 1.6;
}

/* --------------------------------------------------------------------------
   "When you're ready" closing CTA (community detail pages). Reuses the
   .next-move dark band exactly, single CTA instead of two.
   -------------------------------------------------------------------------- */

.ready-band { text-align: center; }
.ready-band .eyebrow { color: var(--champagne-light); }
.ready-band .section-title { color: var(--parchment); }

/* ==========================================================================
   PAGE SECTIONS (R4 — seller, results)
   ========================================================================== */

/* Seller hero accent line: the statement typography standard (Cormorant
   italic ~24px) sitting on the noir .page-hero, distinct from the plain
   body-weight .hero-sub paragraph above it. */
.page-hero .statement {
  max-width: 680px;
  margin: 26px auto 0;
  color: color-mix(in srgb, var(--parchment) 92%, transparent);
}

/* Valuation box: the floating light card that overlaps the bottom edge of
   the seller hero (approved page's own pattern, distinct from the buyer's
   dark-box concierge form). Its CTA ships disabled on the approved page
   itself; forms remain unwired sitewide, so that state carries over as-is. */
.valuation-box {
  background: var(--white-warm);
  padding: 60px 40px;
  max-width: 800px;
  margin: -60px auto 0;
  border-radius: 4px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.1);
  position: relative;
  z-index: 10;
  text-align: center;
}
.valuation-box h3 {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: 1.7rem;
  line-height: 1.3;
  color: var(--noir);
  margin-bottom: 10px;
}
.valuation-box p { color: var(--script-dark); margin-bottom: 30px; }
.valuation-box input:not([type="checkbox"]) {
  width: 100%;
  /* P4 (guide-bands fix round): padding/font-size byte-match the shared
     field token used by the concierge (.match-form) and referral
     (.referral-form) inputs (12px 14px / 14px); this box previously
     shipped a much taller 20px/1.1rem pair that unbalanced it against
     its heading. margin-bottom tightened to those same forms' 10px gap
     value (from 20px) for the same shared rhythm, replacing the looser
     spacing the disabled-era box shipped with. */
  padding: 12px 14px;
  font-size: 14px;
  border: 1px solid var(--linen);
  border-radius: 4px;
  margin-bottom: 10px;
  font-family: var(--font-body);
}
.valuation-box .btn { width: 100%; }

@media (max-width: 768px) {
  .valuation-box { margin-top: -20px; padding: 30px 20px; }
}

/* Results page: locked top clearance (centered eyebrow + title between the
   fixed nav and the pull-quote hairline). Light surface, no photo hero. */
.locked-top { padding: 173px 20px 16px; text-align: center; }
@media (max-width: 768px) {
  .locked-top { padding: 140px 16px 16px; }
}

/* The Wall: sixteen review cards, byte-verified against
   Results_Wall_Copy_Source.md. Card body reuses the .value-card visual
   weight (white surface, 30px padding, same soft shadow) with its own
   name/source sub-elements. */
.review-wall {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 24px;
  max-width: var(--container-width);
  margin: 0 auto;
  text-align: left;
}
.review-card {
  background: var(--white-warm);
  padding: 30px;
  border-radius: 4px;
  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.05);
}
.review-card p { font-size: 15px; color: var(--script-dark); line-height: 1.7; }

/* Attribution restyle (review catalog's champagne-name/gold-rule
   direction, ruled July 20): a short champagne-deep hairline over the
   reviewer's name, source tag in deep blush. Deep Blush is normally
   capped at one to two moments per page (palette law); this ruling
   explicitly extends it to every wall card's source tag plus the
   out-of-area band, so flagging the broadened usage rather than
   silently applying it. */
.review-attribution { margin-top: 14px; }
.review-attribution::before {
  content: "";
  display: block;
  width: 28px;
  height: 1px;
  background: var(--champagne-deep);
  margin-bottom: 12px;
}
.review-card .review-name {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 1px;
  color: var(--champagne-deep);
}
.review-card .review-src {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--blush-deep);
}
.review-src a { color: inherit; }

/* Referral band proof quote (Results page instance only; the plain
   referral-band elsewhere carries no quote). Attribution shares the
   wall's restyle: hairline + champagne-deep name, deep-blush source.
   P7 fix (post-Gate3): this rule was losing every property but color to
   ".referral-band p" (line ~435) — that selector is more specific (one
   class + one type vs. this rule's one class) and was silently zeroing
   margin-top, which is exactly why the quote read as wedged under the
   form with no separation. Scoped under .referral-band here so it wins
   cleanly instead of relying on declaration order. The champagne-divider
   inserted above this quote (results/index.html) is the primary visual
   break; this margin is the residual breathing room underneath it. */
.referral-band .referral-proof {
  max-width: 560px;
  margin: 24px auto 0;
  font-size: 14px;
  line-height: 1.7;
  color: var(--script-dark);
}
.referral-proof-cite {
  display: block;
  margin-top: 14px;
}
.referral-proof-cite::before {
  content: "";
  display: block;
  width: 28px;
  height: 1px;
  background: var(--champagne-deep);
  margin-bottom: 12px;
}
.referral-proof-cite .referral-proof-name {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 1px;
  color: var(--champagne-deep);
}
.referral-proof-cite .referral-proof-src {
  display: block;
  margin-top: 2px;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--blush-deep);
}

/* ==========================================================================
   PAGE SECTIONS (R5 — About, contact/legal reuse global components only)
   ========================================================================== */

/* Accessibility-only text, visually hidden (badge-slot labels; nothing
   invents visible award imagery). Standard clip pattern. */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* About top band: light surface (mirror's --cream resolves to --parchment,
   confirmed against the compiled build's own :root). H1 + sub-line reuse
   .section-title/.section-desc exactly; no new type here. */
.about-hero { padding: 120px 20px 60px; }
.about-hero .section-title { margin-bottom: 10px; }

/* About top portrait: sitewide .dm-portrait treatment B, sized per the
   approved page (distinct from the home About band's .about-portrait,
   which is a grid half rather than a standalone centered frame).
   Spacing rebalanced (R5 review round, F3): margin is top-only now — the
   air above shifted up from 50px to 90px, and the air below is no longer
   stacked (portrait margin-bottom + .about-copy-body's own padding-top
   used to compound to ~220px). The gap to "In Her Own Words" is now
   .about-copy-body's single 80px padding-top, matching the page's
   standard section rhythm instead of a bespoke oversized gap. Verified
   at 380/1366/1920. */
.about-portrait-page {
  position: relative;
  height: 600px;
  max-width: 500px;
  margin: 90px auto 0;
  width: 100%;
}
@media (max-width: 768px) {
  .about-portrait-page { height: 420px; }
}

/* "In Her Own Words" body copy: the approved build sets this register at
   19px (larger than the 17px body default) specifically for Dana's
   first-person voice section; ported as its own scope rather than
   overriding body globally. */
.about-copy-body { padding: 80px 20px; }
.about-copy-body p {
  font-size: 19px;
  line-height: 1.9;
  color: var(--script-dark);
  font-weight: 300;
  margin-bottom: 26px;
}
.about-copy-body h2 { text-align: center; margin-bottom: 36px; }

/* Champagne divider (the approved build's rc-divider): hairline-diamond-
   hairline, matched exactly from the compiled build's own stylesheet. */
.champagne-divider {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin: 64px auto;
}
.champagne-divider::before,
.champagne-divider::after {
  content: "";
  height: 1px;
  width: 72px;
  background: color-mix(in srgb, var(--champagne-deep) 45%, transparent);
}
.champagne-divider span {
  width: 7px;
  height: 7px;
  background: var(--champagne-deep);
  transform: rotate(45deg);
}

/* Gala rider figure: full scene by design (the signs are the content), so
   the frame keeps the photo's natural aspect ratio rather than the fixed-
   height crop container .dm-portrait uses elsewhere. Treatment B applied
   (R5 review round, F2 — spec'd in the work order, missed on first ship):
   same double champagne hairline + lift shadow values as .dm-portrait,
   just on an auto-height figure instead of a pixel-height div. */
.about-gala {
  position: relative;
  display: block;
  max-width: 760px;
  margin: 70px auto;
  border: 1px solid var(--champagne);
  box-shadow: 0 18px 40px rgba(12, 12, 12, 0.18);
}
.about-gala::after {
  content: "";
  position: absolute;
  inset: -7px;
  border: 1px solid color-mix(in srgb, var(--champagne) 55%, transparent);
  pointer-events: none;
}
.about-gala img { width: 100%; height: auto; display: block; }

/* --------------------------------------------------------------------------
   Recognition wall (About page timeline). Gold spine, dark surface, one
   node per honor. Badge slots are empty and labeled (data-slot + sr-only
   text) pending the confirmed award list — no imagery invented or stood in.
   Hover on desktop / tap on mobile reveals the meaning line: CSS-only via
   :hover/:focus/:focus-within on a tabindex="0" node, no JS required.
   -------------------------------------------------------------------------- */

.recognition-wall .eyebrow { color: var(--champagne-light); }
.recognition-track {
  position: relative;
  max-width: 720px;
  margin: 40px auto 0;
  padding-left: 36px;
  text-align: left;
}
.recognition-track::before {
  content: "";
  position: absolute;
  left: 8px;
  top: 6px;
  bottom: 6px;
  width: 2px;
  background: var(--champagne);
}
.recognition-node { position: relative; margin-bottom: 44px; }
.recognition-node:last-child { margin-bottom: 0; }
.recognition-node::before {
  content: "";
  position: absolute;
  left: -34px;
  top: 6px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--champagne);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--champagne) 25%, transparent);
}
.recognition-node--em::before {
  width: 18px;
  height: 18px;
  left: -37px;
  top: 4px;
  background: var(--champagne-light);
  box-shadow: 0 0 0 6px color-mix(in srgb, var(--champagne-light) 30%, transparent);
}
.recognition-node--em .recognition-year { font-size: 2rem; color: var(--champagne-light); }

/* Badge slot: empty dashed frame, no invented imagery. Sits above the year,
   collapses to nothing visually offensive when the award list is still
   pending — it is present in markup (per the work order) but quiet. */
.recognition-badge {
  display: block;
  width: 30px;
  height: 30px;
  margin-bottom: 8px;
  border: 1px dashed color-mix(in srgb, var(--champagne) 45%, transparent);
  border-radius: 3px;
}

/* Text sizes increased from the compiled build's 15/14px per the July 17
   ruling ("Text too small — increase"); tuned to the blessed body size for
   the honor line and one step down for the italic meaning line, not a new
   design, just the ruled bump applied through the existing scale. */
.recognition-year {
  font-family: var(--font-display);
  font-size: 1.5rem;
  color: var(--champagne);
  margin-bottom: 6px;
}
.recognition-honor {
  font-size: 17px;
  font-weight: 600;
  color: var(--parchment);
  margin-bottom: 8px;
  line-height: 1.6;
}
.recognition-meaning {
  font-size: 15px;
  color: color-mix(in srgb, var(--parchment) 75%, transparent);
  line-height: 1.7;
  font-style: italic;
  display: none;
  margin-top: 8px;
}
.recognition-node:hover .recognition-meaning,
.recognition-node:focus .recognition-meaning,
.recognition-node:focus-within .recognition-meaning {
  display: block;
}

@media (max-width: 640px) {
  .recognition-track { padding-left: 30px; }
}

/* --------------------------------------------------------------------------
   Contact page (light surface, two-column: info + form card).
   -------------------------------------------------------------------------- */

.contact-hero { padding: 140px 20px 80px; }
.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: start;
}
.contact-info .hero-title { color: var(--noir); margin-bottom: 20px; }
.contact-info .hero-title em { font-style: italic; color: var(--champagne-deep); }
.contact-info > p { font-size: 1.1rem; color: var(--script-dark); line-height: 1.8; }
.contact-field { margin-top: 40px; }
.contact-field-label {
  display: block;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: var(--champagne-deep);
  margin-bottom: 5px;
}
.contact-field a,
.contact-field span { font-size: 1.2rem; color: var(--noir); }

.contact-form-card {
  background: var(--white-warm);
  padding: 40px;
  box-shadow: 0 10px 40px rgba(12, 12, 12, 0.06);
  border-top: 4px solid var(--champagne);
}
.contact-form-group { margin-bottom: 20px; }
.contact-form-group label {
  display: block;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--script-dark);
  margin-bottom: 8px;
}
.contact-form-group input:not([type="checkbox"]),
.contact-form-group textarea {
  width: 100%;
  padding: 12px;
  border: 1px solid var(--linen);
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--script-dark);
  background: var(--white-warm);
}
.contact-form-group textarea { height: 120px; resize: vertical; }
.contact-form-card .btn { width: 100%; }

@media (max-width: 768px) {
  .contact-grid { grid-template-columns: 1fr; gap: 40px; }
  .contact-hero { padding: 120px 16px 60px; }
}

/* --------------------------------------------------------------------------
   Legal pages (privacy, terms) and 404. Plain long-form light surface;
   reuses body type, no new scale. Content max-width keeps line length
   readable on desktop.
   -------------------------------------------------------------------------- */

.legal-body { padding: 160px 20px 100px; max-width: 820px; margin: 0 auto; }
.legal-body h1 { margin-bottom: 8px; }
.legal-body .legal-updated {
  display: block;
  font-size: 13px;
  color: var(--champagne-deep);
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 40px;
}
.legal-body h2 { font-size: 1.4rem; margin-top: 44px; }
.legal-body p, .legal-body li { color: var(--script-dark); line-height: 1.8; margin-bottom: 16px; }
.legal-body ul, .legal-body ol { list-style: disc; padding-left: 24px; margin-bottom: 16px; }
.legal-body ol { list-style: decimal; }
.legal-body a { color: var(--champagne-deep); text-decoration: underline; }

@media (max-width: 768px) {
  .legal-body { padding: 130px 16px 70px; }
}

.error-page {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 140px 20px 80px;
}
.error-page-code {
  display: block;
  font-family: var(--font-serif);
  font-size: 120px;
  font-weight: 300;
  color: var(--champagne-deep);
  line-height: 1;
  margin-bottom: 20px;
}
.error-page h1 { font-size: 2.5rem; margin-bottom: 16px; color: var(--noir); }
.error-page p {
  font-size: 1.1rem;
  color: var(--script-dark);
  max-width: 500px;
  margin: 0 auto 40px;
  line-height: 1.8;
}
.error-page-ctas { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; }

/* ==========================================================================
   GATE 3 — FORM INFRASTRUCTURE (July 21, 2026)
   SMS-consent checkbox (contact form + referral form, same exact label) and
   the inline success/failure feedback forms.js injects after a submit. No
   redirects; feedback replaces the form in place and matches the surface
   it sits on (dark-box inherits white-warm text from its parent, light
   surfaces use script-dark — only the CTA button class is chosen in JS).
   ========================================================================== */

/* Consent row (P1, consent-row revert round): ONE shared treatment for
   every sms_consent checkbox sitewide (referral bands, concierge, contact,
   test harness). Root cause of the two regressions this replaces: the
   dark-box/referral-form/valuation-box/contact shared field tokens style
   every descendant `input` (width, background, appearance:none) with no
   type guard, so a checkbox inside those forms inherited a ~150-180px
   text-field-shaped box instead of rendering as a checkbox. Fixed at the
   token (each token selector above now carries :not([type="checkbox"])) so
   this cannot recur on any future form; the sizing/alignment below is then
   free to define the checkbox on its own terms without fighting inherited
   field-token styles. */
.form-consent {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  flex-basis: 100%;
  max-width: 480px;
  margin: 6px auto 0;
  font-size: 12px;
  line-height: 1.5;
  text-align: left;
  color: var(--script-dark);
  cursor: pointer;
}
.dark-box .form-consent { color: inherit; }
.form-consent input[type="checkbox"] {
  flex-shrink: 0;
  width: 17px;
  height: 17px;
  margin: 1px 0 0; /* top-aligns the box with the label's first line, not
                       centered against multi-line label text at narrow
                       widths */
  border-radius: 2px;
  accent-color: var(--champagne-deep); /* light surfaces: champagne-deep,
                                           per palette law (champagne is
                                           dark-surface-only) */
  cursor: pointer;
}
.dark-box .form-consent input[type="checkbox"] { accent-color: var(--champagne); } /* dark surfaces only */
.contact-form-card .form-consent { max-width: none; margin: -6px 0 20px; }

.form-feedback { text-align: center; padding: 6px 0 2px; }
.form-feedback:focus { outline: none; } /* programmatic focus target only, not interactive */
.form-feedback p {
  font-size: 15px;
  line-height: 1.7;
  margin-bottom: 20px;
  color: inherit;
}
.form-feedback .btn { display: inline-block; }
.form-try-again {
  display: block;
  margin-top: 16px;
  font-size: 12px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: inherit;
  opacity: 0.7;
  text-decoration: underline;
}
.form-try-again:hover { opacity: 1; }