/* ── Design Tokens (Thomas-Echea-Website-Design-Principles v1.0) ── */
  :root {
    --white:  #ffffff;
    --noir:   #0a0908;   /* primary text, hero overlays, CTA backgrounds */
    --fog:    #f5f4f2;   /* alternate section backgrounds */
    --beige:  #f5f0e8;   /* editorial warmth — pull quotes, personal sections */
    --blue:   #1a3a5c;   /* accent only — links, eyebrow caps, active states */
    --mid:    #888888;   /* supporting text, captions, secondary labels */
    --rule:   #e8e6e3;   /* section borders, card borders */
    --content-max: 1440px; /* standard section content width — align hero + every section at this edge. Matches reference wireframe proportion per brief 14. */
  }
  * { box-sizing:border-box; margin:0; padding:0; }
  body { font-family:'Manrope',sans-serif; background:var(--white); color:var(--noir); }
  .page { display:none; }
  .page.on { display:block; max-width:1440px; margin:0 auto; box-shadow:0 0 60px rgba(0,0,0,.06); }

  /* PAGE WRAP — document-on-surface container. Every top-level block (nav, hero,
     sections, footer) lives inside this centered column at var(--content-max).
     The unified white background + 60px soft shadow make the whole page read as
     a single document floating on the body surface. Per brief 14, based on the
     reference wireframe's .page.on pattern. Mobile-only elements (.mobile-overlay,
     #mobile-call-bar) stay OUTSIDE the wrap so they span full viewport width. */
  .page-wrap {
    max-width: var(--content-max);
    margin: 0 auto;
    background: var(--white);
    box-shadow: 0 0 60px rgba(0,0,0,.07);
  }

  /* NAV — locked 6-item nav with the full black brand lockup image */
  .snav { display:grid; grid-template-columns:auto 1fr auto; align-items:center; padding:18px 64px; background:var(--white); border-bottom:1px solid var(--rule); position:sticky; top:0; z-index:100; gap:24px; }
  .snav-brand { display:flex; align-items:center; gap:0; cursor:pointer; }
  .snav-logo { display:block; white-space:nowrap; }
  .snav-logo img { height:46px; width:auto; display:block; }
  .snav-subline { display:none; }
  .snav-items { display:flex; gap:24px; align-items:center; justify-content:center; }
  .snav-item { font-family:'Manrope',sans-serif; font-size:12px; font-weight:500; letter-spacing:.12em; text-transform:uppercase; color:var(--mid); cursor:pointer; transition:color .15s; white-space:nowrap; padding:4px 0; border-bottom:1px solid transparent; position:relative; }
  .snav-item:hover { color:var(--noir); }
  .snav-item.on,
  .snav-item.snav-item-on { color:var(--noir); border-bottom-color:var(--noir); padding-bottom:4px; }
  .snav-right { display:flex; align-items:center; justify-content:flex-end; gap:12px; }
  .snav-phone-link { display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:38px; padding:0 18px; background:var(--noir); color:var(--white); text-decoration:none; font-family:'Manrope',sans-serif; font-size:11px; font-weight:700; letter-spacing:.08em; white-space:nowrap; transition:opacity .15s; }
  .snav-phone-link:hover { opacity:.82; }
  .snav-cta-link { display:inline-flex; align-items:center; justify-content:center; min-height:38px; padding:0 16px; background:var(--noir); color:var(--white); text-decoration:none; font-family:'Manrope',sans-serif; font-size:10px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; white-space:nowrap; transition:opacity .15s; }
  .snav-cta-link:hover { opacity:.82; }
  /* Mobile hamburger trigger */
  .snav-burger { display:none; width:36px; height:36px; align-items:center; justify-content:center; cursor:pointer; background:none; border:none; padding:0; }
  .snav-burger span { display:block; width:20px; height:1.5px; background:var(--noir); position:relative; }
  .snav-burger span::before,
  .snav-burger span::after { content:''; position:absolute; left:0; width:20px; height:1.5px; background:var(--noir); }
  .snav-burger span::before { top:-6px; }
  .snav-burger span::after  { top:6px; }

  /* MOBILE OVERLAY NAV — full-screen, not drawer */
  .mobile-overlay { position:fixed; inset:0; background:var(--white); z-index:9500; display:none; flex-direction:column; opacity:0; transition:opacity 500ms ease-out; }
  .mobile-overlay.on { display:flex; opacity:1; }
  .mobile-overlay-head { display:flex; align-items:center; justify-content:space-between; padding:18px 24px; border-bottom:1px solid var(--rule); }
  .mobile-overlay-close { width:36px; height:36px; display:flex; align-items:center; justify-content:center; cursor:pointer; font-size:22px; line-height:1; color:var(--noir); background:none; border:none; }
  .mobile-overlay-items { display:flex; flex-direction:column; padding:32px 24px; gap:24px; }
  .mobile-overlay-items .snav-item { font-size:16px; letter-spacing:.12em; border-bottom:none; padding:0; }
  .mobile-overlay-actions { margin-top:auto; padding:0 24px 32px; display:flex; flex-direction:column; gap:12px; }
  .mobile-overlay-phone { display:flex; align-items:center; justify-content:center; gap:10px; min-height:48px; border:1px solid var(--rule); color:var(--noir); text-decoration:none; font-family:'Manrope',sans-serif; font-size:13px; font-weight:600; letter-spacing:.06em; }
  .snav-phone-link::before,
  .mobile-overlay-phone::before {
    content:'';
    width:14px;
    height:14px;
    flex:0 0 14px;
    background-color:currentColor;
    -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M6.62 10.79a15.46 15.46 0 0 0 6.59 6.59l2.2-2.2a1 1 0 0 1 1.01-.24c1.11.37 2.29.56 3.48.56a1 1 0 0 1 1 1V20a1 1 0 0 1-1 1C10.3 21 3 13.7 3 4a1 1 0 0 1 1-1h3.5a1 1 0 0 1 1 1c0 1.19.19 2.37.56 3.48a1 1 0 0 1-.24 1.01l-2.2 2.3Z'/%3E%3C/svg%3E") center / contain no-repeat;
    mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M6.62 10.79a15.46 15.46 0 0 0 6.59 6.59l2.2-2.2a1 1 0 0 1 1.01-.24c1.11.37 2.29.56 3.48.56a1 1 0 0 1 1 1V20a1 1 0 0 1-1 1C10.3 21 3 13.7 3 4a1 1 0 0 1 1-1h3.5a1 1 0 0 1 1 1c0 1.19.19 2.37.56 3.48a1 1 0 0 1-.24 1.01l-2.2 2.3Z'/%3E%3C/svg%3E") center / contain no-repeat;
  }
  .mobile-overlay-cta { display:flex; align-items:center; justify-content:center; min-height:48px; background:var(--noir); color:var(--white); text-decoration:none; font-family:'Manrope',sans-serif; font-size:11px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; }

  /* MOBILE STICKY CALL BAR — GA rule: phone on every viewable page */
  .mobile-call-bar { display:none; position:fixed; bottom:0; left:0; right:0; z-index:9000; background:var(--noir); color:var(--white); align-items:center; justify-content:center; gap:10px; padding:0 16px; height:48px; font-family:'Manrope',sans-serif; font-size:13px; font-weight:600; letter-spacing:.06em; text-decoration:none; }
  .mobile-call-bar a { color:var(--white); text-decoration:none; display:flex; align-items:center; gap:10px; flex:1; justify-content:center; height:100%; }
  .mobile-call-bar-close { position:absolute; top:6px; right:10px; width:24px; height:24px; display:flex; align-items:center; justify-content:center; cursor:pointer; font-size:16px; color:rgba(255,255,255,.6); background:none; border:none; line-height:1; }

  @media (max-width: 768px) {
    .snav { padding:14px 20px; grid-template-columns:auto auto auto; }
    .snav-logo img { height:38px; }
    .snav-items { display:none; }
    .snav-right { gap:10px; }
    .snav-phone-link,
    .snav-cta-link { display:none; }
    .snav-burger { display:flex; }
    .mobile-call-bar { display:flex; }
    /* Prevent sticky call bar from hiding footer content */
    body { padding-bottom:48px; }
  }

  /* FOOTER LEGAL BLOCK (compliance-frame spec) */
  .footer-brand-bar { padding:40px; border-bottom:1px solid rgba(255,255,255,.08); display:grid; grid-template-columns:minmax(300px, 1fr) minmax(520px, 1.1fr); gap:48px; align-items:start; }
  .footer-brand-panel { display:flex; flex-direction:column; align-items:flex-start; }
  .footer-brand-lockup { display:inline-flex; align-items:flex-start; color:inherit; }
  .footer-brand-lockup img { height:74px; width:auto; display:block; }
  .f-sitemap { display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:36px; padding:0; }
  .footer-nav-title { font-family:'Manrope',sans-serif; font-size:11px; font-weight:700; letter-spacing:.2em; text-transform:uppercase; color:rgba(255,255,255,.4); margin-bottom:16px; }
  .footer-nav-links { display:flex; flex-direction:column; gap:11px; }
  .footer-nav-link { font-family:'Manrope',sans-serif; font-size:13px; line-height:1.55; color:rgba(255,255,255,.82); text-decoration:none; cursor:pointer; }
  .footer-nav-link:hover { opacity:.82; }
  .f-legal-block { padding:34px 40px 38px; border-top:0; }
  .f-legal-head { margin-bottom:26px; }
  .f-legal-lead { font-family:'Spectral',serif; font-size:24px; font-weight:300; line-height:1.35; color:rgba(255,255,255,.92); margin:0; letter-spacing:-.01em; }
  .f-legal-note { font-family:'Manrope',sans-serif; font-size:10px; line-height:1.8; text-align:center; color:rgba(255,255,255,.38); margin-top:14px; }
  .f-legal-grid { display:grid; grid-template-columns:1fr 1fr; gap:18px; }
  .f-legal-card { padding:22px; border:1px solid rgba(255,255,255,.12); background:rgba(255,255,255,.02); }
  .f-state-label { font-family:'Manrope',sans-serif; font-size:10px; font-weight:700; letter-spacing:.22em; text-transform:uppercase; color:rgba(255,255,255,.86); margin-bottom:12px; }
  .f-legal-entity { font-family:'Spectral',serif; font-size:22px; font-weight:300; line-height:1.2; color:rgba(255,255,255,.92); margin-bottom:12px; letter-spacing:-.01em; }
  .f-legal-text { font-family:'Manrope',sans-serif; font-size:12px; line-height:1.75; color:rgba(255,255,255,.28); }
  .f-legal-disclaimer { font-family:'Manrope',sans-serif; font-size:11px; line-height:1.8; text-align:center; color:rgba(255,255,255,.44); margin-top:14px; }
  .f-copyright { font-family:'Manrope',sans-serif; font-size:12px; line-height:1.75; text-align:center; color:rgba(255,255,255,.58); padding:22px 40px 10px; border-top:1px solid rgba(255,255,255,.08); }
  .f-fair-housing { font-family:'Manrope',sans-serif; font-size:11px; line-height:1.8; text-align:center; color:rgba(255,255,255,.34); padding:0 40px 28px; }
  @media (max-width: 1000px) {
    .footer-brand-bar { grid-template-columns:1fr; gap:32px; }
  }
  @media (max-width: 768px) {
    .footer-brand-bar { padding:32px 24px 28px; }
    .footer-brand-lockup img { height:60px; }
    .f-sitemap { grid-template-columns:repeat(2, minmax(0, 1fr)); gap:28px; }
    .f-legal-grid { grid-template-columns:1fr; gap:18px; }
    .f-legal-block,
    .f-copyright,
    .f-fair-housing { padding-left:24px; padding-right:24px; }
  }
  @media (max-width: 560px) {
    .f-sitemap { grid-template-columns:1fr; gap:22px; }
  }

  /* TYPOGRAPHY — two registers: storytelling (Spectral) + credentials (Manrope) */
  .t-over  { font-family:'Manrope',sans-serif; font-size:10px; font-weight:700; letter-spacing:.18em; text-transform:uppercase; color:var(--blue); margin-bottom:14px; display:block; }
  .t-h1    { font-family:'Spectral',serif; font-size:48px; font-weight:300; line-height:1.12; letter-spacing:-.01em; }
  .t-h2    { font-family:'Spectral',serif; font-size:34px; font-weight:300; line-height:1.22; margin-bottom:4px; }
  .t-h3    { font-family:'Spectral',serif; font-size:22px; font-weight:300; line-height:1.35; }
  .t-body  { font-family:'Manrope',sans-serif; font-size:15px; font-weight:400; line-height:1.88; color:#555; }
  .t-sm    { font-family:'Manrope',sans-serif; font-size:13px; font-weight:400; line-height:1.82; color:#777; }
  .t-quote { font-family:'Spectral',serif; font-size:22px; font-weight:300; font-style:italic; line-height:1.55; }
  .t-cap   { font-family:'Manrope',sans-serif; font-size:10px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--mid); }
  .t-price { font-family:'Spectral',serif; font-size:19px; font-weight:300; color:var(--noir); }
  .t-w     { color:var(--white); }
  .t-blue  { color:var(--blue); }

  /* BUTTONS — opacity shift on hover, no lift/shadow */
  .btn { display:inline-flex; align-items:center; justify-content:center; padding:14px 28px; cursor:pointer; font-family:'Manrope',sans-serif; font-size:11px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; transition:opacity .15s; white-space:nowrap; border-radius:0; }
  .btn:hover { opacity:.82; }
  .btn-noir    { background:var(--noir); color:var(--white); }
  .btn-outline { background:transparent; color:var(--noir); border:1px solid var(--noir); }
  .btn-ghost   { background:transparent; color:rgba(255,255,255,.85); border:1px solid rgba(255,255,255,.4); }
  .btn-white   { background:var(--white); color:var(--noir); }
  .btn-blue    { background:var(--blue); color:var(--white); }
  .btn-full    { width:100%; }

  /* SECTIONS — 72px standard, 40px compact, 104px editorial */
  .s    { padding:72px 64px; }
  .s-sm { padding:40px 64px; }
  .s-xl { padding:104px 64px; }
  .s-fog   { background:var(--fog); }
  .s-beige { background:var(--beige); }
  .s-noir  { background:var(--noir); }
  .s-rule  { border-top:1px solid var(--rule); }
  .s-white { background:var(--white); }
  .inner { max-width:860px; margin:0 auto; }

  /* IMAGES — wireframe placeholder, no real photos */
  .img {
    background: #e9e6e0;
    background-image: repeating-linear-gradient(
      -45deg,
      transparent 0, transparent 14px,
      rgba(0,0,0,.04) 14px, rgba(0,0,0,.04) 15px
    );
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .img-label {
    position: relative;
    z-index: 1;
    text-align: center;
    padding: 16px 28px;
    font-family: 'Manrope', sans-serif;
    font-size: 11px;
    font-weight: 500;
    color: #aaa;
    line-height: 1.7;
    letter-spacing: .01em;
  }
  /* img-a — Blue Ridge mountains, golden hour */
  .img-a { background-color: #e4e0da; }
  /* img-b — North Georgia river, morning fog */
  .img-b { background-color: #e2ddd6; }
  /* img-c — Appalachian fog layers, moody */
  .img-c { background-color: #dedad3; }
  /* img-d — Fort Lauderdale canal, waterfront */
  .img-d { background-color: #e6e2db; }

  /* GRID — gaps from design principles: 28px for 3-col, 22px for 4-col */
  .g2    { display:grid; grid-template-columns:1fr 1fr; gap:28px; }
  .g3    { display:grid; grid-template-columns:1fr 1fr 1fr; gap:28px; }
  .g4    { display:grid; grid-template-columns:1fr 1fr 1fr 1fr; gap:22px; }
  .g6040 { display:grid; grid-template-columns:60% 40%; }
  .g5050 { display:grid; grid-template-columns:1fr 1fr; }
  /* True 30/70 editorial grid — eyebrow+headline left, narrative right */
  .g3070 { display:grid; grid-template-columns:3fr 7fr; gap:56px; align-items:start; }

  /* CARDS */
  .card { background:var(--white); border:1px solid var(--rule); border-radius:0; overflow:hidden; cursor:pointer; }
  .card-body { padding:24px; }
  .rule { height:1px; background:var(--rule); }

  /* STAT */
  .stat { text-align:center; padding:22px 12px; border:1px solid var(--rule); border-radius:0; background:var(--white); }
  .stat-num   { font-family:'Spectral',serif; font-size:30px; font-weight:300; color:var(--noir); margin-bottom:5px; }
  .stat-label { font-family:'Manrope',sans-serif; font-size:10px; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--mid); }

  /* PILLAR */
  .pillar { padding:24px; border-left:2px solid var(--blue); background:var(--white); border-radius:0; }
  .pillar-num { font-family:'Spectral',serif; font-size:11px; font-style:italic; color:var(--blue); margin-bottom:8px; display:block; }

  /* FORMS */
  .f-label { font-family:'Manrope',sans-serif; font-size:11px; font-weight:600; letter-spacing:.04em; color:var(--noir); display:block; margin-bottom:6px; }
  .f-input  { width:100%; height:44px; background:var(--fog); border:1px solid var(--rule); border-radius:0; margin-bottom:14px; padding:0 14px; font-family:'Manrope',sans-serif; font-size:12px; color:#999; display:flex; align-items:center; }
  .f-area   { width:100%; height:96px; background:var(--fog); border:1px solid var(--rule); border-radius:0; margin-bottom:14px; }

  /* SPECS */
  .specs { display:flex; gap:14px; margin-top:8px; }
  .spec  { font-family:'Manrope',sans-serif; font-size:11px; font-weight:500; color:var(--mid); }

  /* THOMAS STRIP */
  .t-strip { display:flex; align-items:center; gap:20px; padding:22px 40px; background:var(--fog); border-top:1px solid var(--rule); }
  .t-avatar { width:46px; height:46px; border-radius:50%; background:#dedad3; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
  .t-qtext  { font-family:'Spectral',serif; font-size:13px; font-style:italic; color:#555; line-height:1.6; }
  .t-qname  { font-family:'Manrope',sans-serif; font-size:10px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--mid); margin-top:5px; }

  /* STANDARD TILE */
  .std-tile { background:var(--white); border:1px solid var(--rule); border-radius:0; padding:32px; }
  .std-num  { font-family:'Spectral',serif; font-size:32px; font-weight:300; color:var(--rule); margin-bottom:10px; }
  .std-title { font-family:'Manrope',sans-serif; font-size:11px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--noir); margin-bottom:8px; }
  .std-text { font-family:'Manrope',sans-serif; font-size:12px; color:#666; line-height:1.7; }

  /* PHASE */
  .phase { display:flex; gap:20px; padding:22px 0; border-bottom:1px solid var(--rule); }
  .phase-num { font-family:'Spectral',serif; font-size:40px; font-weight:300; color:var(--rule); min-width:52px; line-height:1; }
  .phase-title { font-family:'Manrope',sans-serif; font-size:12px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--noir); margin-bottom:6px; }
  .phase-text { font-family:'Manrope',sans-serif; font-size:12px; color:#666; line-height:1.7; }

  /* FAQ */
/* FAQ centering */
  .faq-wrap { max-width:720px; margin:0 auto; }
  .faq-item { border-bottom:1px solid var(--rule); padding:28px 0; }
  .faq-q { display:flex; justify-content:space-between; align-items:flex-start; cursor:pointer; gap:12px; }
  .faq-q-text { font-family:'Manrope',sans-serif; font-size:14px; font-weight:700; color:var(--noir); line-height:1.5; }
  .faq-arrow { flex-shrink:0; transition:transform .2s; margin-top:2px; }
  .faq-a { display:none; padding-top:12px; font-family:'Manrope',sans-serif; font-size:13px; color:var(--mid); line-height:1.8; }
  .faq-q { font-family:'Manrope',sans-serif; font-size:13px; font-weight:600; color:var(--noir); margin-bottom:8px; display:flex; justify-content:space-between; align-items:center; gap:12px; }
  .faq-a { font-family:'Manrope',sans-serif; font-size:12px; color:#666; line-height:1.75; }

  /* ANCHOR NAV (neighborhood page) */
  .anchor-nav { display:flex; gap:10px; padding:16px 64px; background:var(--white); border-bottom:1px solid var(--rule); overflow-x:auto; position:sticky; top:57px; z-index:90; }
  .anchor-pill { padding:7px 16px; border:1px solid var(--rule); border-radius:0; font-family:'Manrope',sans-serif; font-size:10px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--mid); cursor:pointer; white-space:nowrap; transition:all .15s; }
  .anchor-pill:hover,.anchor-pill.on { border-color:var(--noir); color:var(--noir); }

  /* GUIDE CARD */
  .guide-card { background:var(--white); border:1px solid var(--rule); border-radius:0; padding:24px; }

  .link { cursor:pointer; } .link:hover { opacity:.7; }

  /* FLOAT BUTTON */
  .float-btn { position:fixed; bottom:28px; right:28px; z-index:999; background:var(--noir); color:var(--white); font-family:'Manrope',sans-serif; font-size:10px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; padding:10px 16px; border-radius:2px; cursor:pointer; box-shadow:0 4px 16px rgba(0,0,0,.2); transition:all .15s; display:flex; align-items:center; gap:7px; }
  .float-btn:hover { background:#333; }
  .float-btn svg { width:12px; height:12px; }

  /* MARKET PILL */
  .market-pill { padding:7px 18px; border:1px solid var(--rule); border-radius:2px; font-family:'Manrope',sans-serif; font-size:12px; color:var(--mid); cursor:pointer; transition:all .15s; }
  .market-pill.active, .market-pill:hover { background:var(--noir); color:var(--white); border-color:var(--noir); }

  /* TESTIMONIAL DOTS */
  .t-dot { width:8px; height:8px; border-radius:50%; background:var(--rule); cursor:pointer; transition:background .2s; }
  .t-dot.active { background:var(--noir); }

  /* ACTIVE BADGE */
  .badge-active { display:inline-block; padding:4px 12px; background:#e8f5e9; color:#2e7d32; border-radius:2px; font-family:'Manrope',sans-serif; font-size:10px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; }

  /* ─────────────────────────────────────────────────────────
     PATTERN CONVENTIONS — established on Home, inherited by
     11 subsequent pages. Do not alter without reviewing
     design-review/02-world-class-principles.md.
  ───────────────────────────────────────────────────────── */

  /* SECTION RHYTHM — vertical spacing between narrative sections.
     Desktop: 120px top/bottom · Mobile: 72px. Applies inside .page. */
  .s-edit     { padding:120px 120px; background:var(--white); }
  .s-edit.s-fog   { background:var(--fog); }
  .s-edit.s-beige { background:var(--beige); }
  .s-edit.s-noir  { background:var(--noir); }
  @media (max-width: 900px) {
    .s-edit { padding:72px 28px; }
  }

  /* SECTION INTRO — eyebrow + H2 + one-line sub. Left-aligned default,
     max-width 640px, margin-bottom 56px before content. */
  .sec-intro        { max-width:640px; margin-bottom:56px; }
  .sec-intro.center { margin-left:auto; margin-right:auto; text-align:center; }
  .sec-intro .t-over { margin-bottom:16px; }
  .sec-intro h2    { font-family:'Spectral',serif; font-size:clamp(32px,4vw,48px); font-weight:300; line-height:1.1; letter-spacing:-.015em; color:var(--noir); margin:0 0 18px; }
  .sec-intro p     { font-family:'Manrope',sans-serif; font-size:16px; font-weight:400; line-height:1.65; color:#555; max-width:520px; margin:0; }

  /* HERO — full-bleed image, contained text. H1 clamp(44,6vw,84).
     Hero IMAGE stays edge-to-edge (Option B per Phase 4 alignment fix —
     luxury-hospitality grammar: Aman/Ritz/Hermès all use full-bleed hero).
     Only .hero-inner constrains the text to the site content-max so the
     hero text aligns with every section below at the same viewport-left edge. */
  .hero-frame { position:relative; height:clamp(540px, 78vh, 780px); overflow:hidden; }
  .hero-frame .hero-image { position:absolute; inset:0; }
  .hero-frame .hero-overlay { position:absolute; inset:0; background:linear-gradient(to top, rgba(10,9,8,.68) 0%, rgba(10,9,8,.12) 52%, rgba(10,9,8,0) 100%); display:flex; flex-direction:column; justify-content:flex-end; padding:64px 120px 72px; }
  .hero-frame .hero-inner   { max-width:var(--content-max); margin:0 auto; width:100%; display:flex; flex-direction:column; align-items:flex-start; }
  .hero-frame .hero-eyebrow { font-family:'Manrope',sans-serif; font-size:11px; font-weight:600; letter-spacing:.22em; text-transform:uppercase; color:rgba(255,255,255,.72); margin-bottom:22px; }
  .hero-frame h1 { font-family:'Spectral',serif; font-size:clamp(44px, 6vw, 84px); font-weight:300; line-height:1.05; letter-spacing:-.02em; color:var(--white); margin:0 0 38px; max-width:21ch; }
  .hero-frame .hero-cta { display:inline-block; align-self:flex-start; font-family:'Manrope',sans-serif; font-size:12px; font-weight:600; letter-spacing:.18em; text-transform:uppercase; color:var(--white); padding:16px 30px; border:1px solid rgba(255,255,255,.5); background:transparent; cursor:pointer; transition:all .3s ease; }
  .hero-frame .hero-cta:hover { background:var(--white); color:var(--noir); border-color:var(--white); }
  @media (max-width: 900px) {
    .hero-frame .hero-overlay { padding:44px 28px 52px; }
  }

  /* IMAGE SLOT — neutral placeholder. Use for all Thomas-photography slots.
     Label describes WHAT Thomas's photography should show here. */
  .slot { background:#e9e6e0; background-image:repeating-linear-gradient(-45deg, transparent 0, transparent 14px, rgba(0,0,0,.035) 14px, rgba(0,0,0,.035) 15px); position:relative; display:flex; align-items:center; justify-content:center; overflow:hidden; }
  .slot-a { background-color:#e4e0da; }  /* Blue Ridge / mountains */
  .slot-b { background-color:#e2ddd6; }  /* North Georgia / river */
  .slot-c { background-color:#dedad3; }  /* Appalachian fog */
  .slot-d { background-color:#e6e2db; }  /* Fort Lauderdale / canal */
  .slot-label { position:relative; z-index:1; max-width:86%; text-align:center; padding:12px 20px; font-family:'Manrope',sans-serif; font-size:10px; font-weight:500; letter-spacing:.04em; color:#888; line-height:1.7; }
  /* Slot aspect-ratio modifiers — compose with .slot + color variant. */
  .slot-wide      { aspect-ratio: 16/9; }
  .slot-landscape { aspect-ratio: 3/2; }
  .slot-square    { aspect-ratio: 1/1; }
  .slot-portrait  { aspect-ratio: 3/4; }

  /* TERMINAL LINK — section-level "See all" / "Read more" / "→" affordance. */
  .term-link { display:inline-flex; align-items:center; gap:10px; font-family:'Manrope',sans-serif; font-size:11px; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:var(--noir); cursor:pointer; padding-bottom:6px; border-bottom:1px solid var(--noir); transition:gap .25s ease, opacity .2s ease; }
  .term-link:hover { gap:14px; opacity:.72; }

  /* LISTING GRID — 3 up on Home/Properties. Card uses .card already defined. */
  .listing-grid { display:grid; grid-template-columns:repeat(3, 1fr); gap:32px; }
  @media (max-width: 900px) { .listing-grid { grid-template-columns:1fr; gap:24px; } }

  /* SPLIT — two-image editorial split (GA | FL or text | image). */
  .split-2 { display:grid; grid-template-columns:1fr 1fr; gap:32px; }
  @media (max-width: 900px) { .split-2 { grid-template-columns:1fr; gap:24px; } }

  /* PULL-QUOTE — centered, beige, Spectral italic. Max-width 720px.
     Used for single testimonial moments and editorial pauses. */
  .pullquote       { max-width:720px; margin:0 auto; text-align:center; }
  .pullquote-body  { font-family:'Spectral',serif; font-size:clamp(22px, 2.6vw, 30px); font-weight:300; font-style:italic; line-height:1.45; color:var(--noir); margin:0 0 28px; }
  .pullquote-rule  { width:40px; height:1px; background:var(--noir); opacity:.35; margin:0 auto 18px; }
  .pullquote-attr  { font-family:'Manrope',sans-serif; font-size:11px; font-weight:700; letter-spacing:.18em; text-transform:uppercase; color:var(--mid); }

  /* CLOSE BLOCK — site-wide "Let's talk" pattern. Noir, centered, one CTA. */
  .close-block     { max-width:640px; margin:0 auto; text-align:center; }
  .close-block h2  { font-family:'Spectral',serif; font-size:clamp(40px, 5vw, 64px); font-weight:300; line-height:1.1; letter-spacing:-.015em; color:var(--white); margin:0 0 22px; }
  .close-block p   { font-family:'Manrope',sans-serif; font-size:15px; color:rgba(255,255,255,.62); margin:0 0 38px; line-height:1.7; }
  .close-cta       { display:inline-block; font-family:'Manrope',sans-serif; font-size:12px; font-weight:700; letter-spacing:.2em; text-transform:uppercase; color:var(--noir); background:var(--white); padding:18px 36px; cursor:pointer; transition:opacity .2s ease; }
  .close-cta:hover { opacity:.85; }

  /* CLOSE BLOCK — beige variant. Contextual override via .s-beige parent.
     Used on Buyers/Sellers/Neighborhood-Detail for warmer close beats. */
  .s-edit.s-beige .close-block h2  { color:var(--noir); }
  .s-edit.s-beige .close-block p   { color:#6a6560; }
  .s-edit.s-beige .close-cta       { background:var(--noir); color:var(--white); }
  .s-edit.s-beige .close-cta:hover { opacity:.88; }

  /* TOOL INTRO — .sec-intro variant for catalog/search pages (Properties).
     Wider, two-column row so a tool/filter/meta zone can sit on the right. */
  .tool-intro         { max-width:100%; margin-bottom:40px; display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between; gap:32px; }
  .tool-intro .t-left { max-width:640px; }
  .tool-intro h2      { font-family:'Spectral',serif; font-size:clamp(32px,4vw,48px); font-weight:300; line-height:1.1; letter-spacing:-.015em; color:var(--noir); margin:0 0 14px; }
  .tool-intro p       { font-family:'Manrope',sans-serif; font-size:16px; font-weight:400; line-height:1.65; color:#555; max-width:520px; margin:0; }
  .tool-intro .tool-meta { font-family:'Manrope',sans-serif; font-size:11px; font-weight:600; letter-spacing:.18em; text-transform:uppercase; color:var(--mid); }

  /* LISTING GRID DENSE — 4-up for Properties catalog. Tighter gap.
     Collapses 4 → 3 → 2 → 1 across breakpoints. */
  .listing-grid-dense { display:grid; grid-template-columns:repeat(4, 1fr); gap:24px; }
  @media (max-width: 1200px) { .listing-grid-dense { grid-template-columns:repeat(3, 1fr); } }
  @media (max-width: 900px)  { .listing-grid-dense { grid-template-columns:repeat(2, 1fr); gap:20px; } }
  @media (max-width: 600px)  { .listing-grid-dense { grid-template-columns:1fr; } }

  /* LISTING HERO — property-data-forward hero for Listing Detail.
     Distinct from .hero-frame (editorial one-liner); shows address + price + key stats. */
  .listing-hero                   { position:relative; }
  .listing-hero .listing-image    { position:relative; width:100%; aspect-ratio:16/9; overflow:hidden; }
  .listing-hero .listing-meta     { padding:48px 64px 0; display:flex; flex-wrap:wrap; justify-content:space-between; align-items:flex-end; gap:24px; }
  .listing-hero .listing-sub      { font-family:'Manrope',sans-serif; font-size:12px; font-weight:600; letter-spacing:.18em; text-transform:uppercase; color:var(--mid); margin-bottom:14px; }
  .listing-hero .listing-addr     { font-family:'Spectral',serif; font-size:clamp(32px, 4vw, 52px); font-weight:300; line-height:1.1; letter-spacing:-.015em; color:var(--noir); margin:0; max-width:22ch; }
  .listing-hero .listing-price    { font-family:'Spectral',serif; font-size:clamp(24px, 2.8vw, 34px); font-weight:400; color:var(--noir); letter-spacing:-.01em; }
  .listing-hero .listing-stats    { margin-top:28px; padding:28px 64px 0; border-top:1px solid var(--rule); display:flex; gap:48px; flex-wrap:wrap; }
  .listing-hero .listing-stat     { font-family:'Manrope',sans-serif; font-size:14px; color:var(--noir); }
  .listing-hero .listing-stat .k  { font-size:10px; font-weight:600; letter-spacing:.18em; text-transform:uppercase; color:var(--mid); display:block; margin-bottom:4px; }
  @media (max-width: 900px) {
    .listing-hero .listing-meta   { padding:28px 28px 0; }
    .listing-hero .listing-stats  { padding:20px 28px 0; gap:28px; }
  }

  /* PHASE LIST — 3-up "process steps" pattern (Sellers Prepare·List·Close,
     Buyers Conversation·Showings·Quieter part). Numbered editorial, not icon row. */
  .phase-list  { display:grid; grid-template-columns:repeat(3, 1fr); gap:32px; }
  .phase       { display:flex; flex-direction:column; gap:10px; }
  .phase-num   { font-family:'Spectral',serif; font-size:14px; font-weight:400; color:var(--mid); letter-spacing:.08em; }
  .phase-label { font-family:'Spectral',serif; font-size:clamp(22px, 2.4vw, 28px); font-weight:300; color:var(--noir); line-height:1.15; letter-spacing:-.01em; }
  .phase-body  { font-family:'Manrope',sans-serif; font-size:15px; font-weight:400; line-height:1.65; color:#555; }
  @media (max-width: 900px) { .phase-list { grid-template-columns:1fr; gap:28px; } }

  /* STAT ROW — 3-up numeric evidence cells (Insights-Post callouts,
     Listing key metrics, About dual-market stats). Not a dashboard; editorial. */
  .stat-row    { display:flex; flex-wrap:wrap; gap:48px; padding:28px 0; border-top:1px solid var(--rule); }
  .stat        { min-width:120px; }
  .stat-num    { font-family:'Spectral',serif; font-size:clamp(28px, 3.4vw, 40px); font-weight:300; color:var(--noir); line-height:1; letter-spacing:-.01em; }
  .stat-label  { font-family:'Manrope',sans-serif; font-size:10px; font-weight:600; letter-spacing:.18em; text-transform:uppercase; color:var(--mid); margin-top:8px; }
  @media (max-width: 600px) { .stat-row { gap:28px; } }

  /* FOOTER SITEMAP — 4-column grid that collapses on mobile.
     Used inside the inlined footer of every page; prevents ~50px horizontal
  /* Motion — subtle fade on section appear. Only one keyframe on the site. */
  @keyframes sec-fade { from { opacity:0; transform:translateY(12px); } to { opacity:1; transform:none; } }
  .s-edit { animation: sec-fade 560ms ease-out both; }
  @media (prefers-reduced-motion: reduce) {
    .s-edit { animation: none; }
  }