/* =========================================================
   Bey Group Real Estate, Inc. — design system
   T1 Outfit/DM Sans · P1 Marigold · S2 Soft · W2 Medium · D2 Balanced · H2 Standard
   ========================================================= */
:root{
  --paper:#F8F3E9; --surface:#FFFFFF; --soft:#EFE6D4;
  --ink:#2A2520; --ink-2:#1E1A16;
  --sig:#DFA236; --deep:#B87F1C; --deeper:#7A5714;
  /* Measured on --paper with alpha compositing, not estimated.
     --deep is 3.12:1 and stays for icons, rules and display type, where AA is
     3:1 — it must not be used for body-sized text. --deeper is the text-safe
     amber: 6.1:1 on paper and 5.2:1 on the .eyebrow chip, which the old
     #8A6318 failed at 4.28:1.
     A previous pass set --mute-2 believing it cleared 4.5:1; it measured
     3.81:1. Both mute values below are now measured, and mute-2 stays visibly
     lighter than mute. */
  --mute:#6E6559; --mute-2:#776E62;
  --line:rgba(42,37,32,.11); --line-2:rgba(42,37,32,.18);
  --clay:#B5674C; --clay-deep:#8A4632; --clay-soft:#F5EAE3; --clay-line:#E5D2C8;

  /* Altitude Home Loans. Deliberately outside the Bey palette: Altitude is an
     unaffiliated lender and the disclosures say so, and a visibly separate
     brand tells the reader the same thing the words do. Read from Altitude's
     live theme — confirm against their brand sheet before relying on it. */
  --ahl:#1E52A6; --ahl-2:#5483C3;

  --display:"Outfit",system-ui,-apple-system,sans-serif;
  --body:"DM Sans",system-ui,-apple-system,sans-serif;
  --dw:500; --dw-strong:600; --track:-.025em;

  --fs-xs:.78rem; --fs-sm:.9375rem; --fs-md:1.0625rem; --fs-lg:1.3125rem;
  --fs-xl:clamp(1.75rem,3.2vw,2.5rem); --fs-2xl:clamp(2.1rem,4.4vw,3.5rem);
  --lh-display:1.06;

  --rad:14px; --rad-sm:10px; --rad-lg:20px;
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:20px; --s6:24px;
  --s8:32px; --s10:40px; --s12:52px; --s16:64px; --s20:80px;
  --wrap:1200px;
  --shadow:0 1px 2px rgba(42,37,32,.04),0 14px 32px -20px rgba(42,37,32,.30);
  --shadow-lift:0 2px 4px rgba(42,37,32,.05),0 22px 46px -24px rgba(42,37,32,.40);
  --shadow-sig:0 14px 30px -16px rgba(184,127,28,.55);
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--body);
  font-size:var(--fs-md);line-height:1.68;-webkit-font-smoothing:antialiased}
h1,h2,h3,h4{font-family:var(--display);font-weight:var(--dw);letter-spacing:var(--track);
  line-height:var(--lh-display);margin:0}
h3,h4{font-weight:var(--dw-strong)}
p{margin:0} a{color:inherit} img{max-width:100%;display:block}
:focus-visible{outline:2px solid var(--deep);outline-offset:3px;border-radius:4px}
/* Off-screen until focused rather than display:none, which would take it out of
   the tab order and defeat the point. Sits above the sticky header. */
.skip-link{position:absolute;left:var(--s4);top:-100px;z-index:100;
  background:var(--ink);color:var(--paper);font-size:var(--fs-sm);font-weight:700;
  padding:12px var(--s5);border-radius:0 0 var(--rad-sm) var(--rad-sm);
  text-decoration:none;transition:top .16s}
.skip-link:focus{top:0}
#main:focus{outline:none}

.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:var(--s6)}
.band{padding-block:var(--s16)}
@media (max-width:720px){.band{padding-block:var(--s16)}}

.eyebrow{font-size:var(--fs-xs);letter-spacing:.14em;text-transform:uppercase;font-weight:600;
  color:var(--deeper);background:rgba(223,162,54,.20);display:inline-block;
  padding:6px 13px;border-radius:99px;margin-bottom:var(--s5)}
.eyebrow::before{content:none}
.lede{font-size:1.375rem;line-height:1.55;color:var(--mute);max-width:62ch}
.body-sm{font-size:var(--fs-md);color:var(--mute);line-height:1.65}
.mono{font-family:var(--display);font-size:var(--fs-xs);letter-spacing:.12em;text-transform:uppercase;font-weight:600}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--s2);
  font-family:var(--body);font-size:var(--fs-sm);font-weight:700;padding:14px var(--s6);
  border-radius:var(--rad-sm);border:1px solid transparent;cursor:pointer;text-decoration:none;
  transition:background .18s,border-color .18s,transform .12s,filter .18s}
.btn:active{transform:translateY(1px)}
.btn-lg{padding:16px var(--s8);font-size:var(--fs-md)}
.btn-primary{background:var(--sig);color:var(--ink);box-shadow:var(--shadow-sig)}
.btn-primary:hover{filter:brightness(1.06)}
.btn-ghost{background:transparent;color:var(--ink);border-color:var(--line-2)}
.btn-ghost:hover{background:var(--soft);border-color:var(--mute-2)}
.btn-onink{background:var(--sig);color:var(--ink)}
.btn-onink:hover{filter:brightness(1.06)}
.btn-outline-onink{background:transparent;color:var(--paper);border-color:rgba(248,243,233,.30)}
.btn-outline-onink:hover{border-color:var(--paper);background:rgba(248,243,233,.08)}
.btn-clay{background:var(--clay);color:#FFF7F2}
.btn-clay:hover{background:var(--clay-deep)}

.ph{position:relative;margin:0;overflow:hidden;border-radius:var(--rad);
  background:linear-gradient(155deg,#F0D9A4,#E6C077 52%,#D2A44F);
  box-shadow:inset 0 0 0 1px rgba(42,37,32,.07)}
.ph.dark{background:linear-gradient(155deg,#3A312A,#2A231D 58%,#1E1A16)}
.ph.clay-tone{background:linear-gradient(155deg,#E6CFC0,#D3A992 54%,#B98368)}
.ph::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:repeating-linear-gradient(38deg,rgba(255,255,255,.06) 0 2px,transparent 2px 10px)}
.ph img{width:100%;height:100%;object-fit:cover;position:relative;z-index:2;
  transition:transform .7s cubic-bezier(.2,.7,.3,1)}
.r-16-9{aspect-ratio:16/9} .r-4-3{aspect-ratio:4/3} .r-3-2{aspect-ratio:3/2}
.r-1-1{aspect-ratio:1/1} .r-4-5{aspect-ratio:4/5}
/* The explainers are shot 9:16 for phones. Capped and centred so a portrait
   player doesn't tower over the three-column proof grid on a desktop. */
.r-9-16{aspect-ratio:9/16;max-width:300px;margin-inline:auto}
/* Hero breakdown — the four things the practice actually does, so the top of the
   page states the whole offer instead of only the selling half. */
.hero-what{list-style:none;margin:var(--s5) 0 var(--s6);padding:0;display:grid;gap:var(--s3);max-width:52ch}
.hero-what li{position:relative;padding-left:var(--s5);font-size:var(--fs-sm);color:var(--mute);line-height:1.6}
.hero-what li::before{content:"";position:absolute;left:0;top:.62em;width:10px;height:2px;background:var(--sig)}
.hero-what b{color:var(--ink);font-weight:700}
.ph video{width:100%;height:100%;object-fit:cover;position:relative;z-index:2;display:block;background:var(--ink)}


.site-head{position:sticky;top:0;z-index:60;background:rgba(248,243,233,.985);
  backdrop-filter:saturate(1.3) blur(10px);border-bottom:1px solid var(--line)}
.head-in{display:flex;align-items:center;gap:var(--s6);height:66px}
.brand{display:flex;align-items:center;gap:var(--s3);text-decoration:none;flex:none}
/* Logo A (images/beygroup-header.png, 900x179 PNG, text as paths). 180px wide is
   45px tall in the 66px bar, which leaves the kit's 12px clear space above and
   below with a little to spare. Below 600px the bar also holds the compact
   "Talk to us" button and the menu toggle, so the mark steps down to 150px
   rather than crowd them. */
.brand-logo{display:block;width:232px;height:auto}
@media (max-width:899px){.brand-logo{width:196px}}
@media (max-width:599px){.brand-logo{width:172px}}
/* At 360px the 150px mark pushed "Talk to us" onto three lines. */
@media (max-width:379px){.brand-logo{width:140px}}
/* 320px phones: the mark steps down again and the button loses padding, so
   the bar still fits without the label wrapping. */
@media (max-width:339px){.brand-logo{width:116px}.head-cta{padding:9px 10px;font-size:.72rem}.head-in{gap:var(--s3)}}
.head-cta{white-space:nowrap}
/* .brand-mark is the retired text wordmark; kept for design/ mockups only. */
.brand-mark{font-family:var(--display);font-weight:600;font-size:1.25rem;letter-spacing:-.03em}
.brand-mark span{color:var(--deep)}
.nav{margin-left:auto;display:none;align-items:center;gap:var(--s5)}
@media (min-width:900px){.nav{display:flex}}
.nav a{text-decoration:none;font-size:var(--fs-sm);font-weight:600;color:var(--ink);transition:color .16s}
.nav a:hover{color:var(--deeper)}
/* External destination gets a pill so it reads as a place you go, not a page here. */
.nav-pill{border:1px solid var(--line-2);border-radius:99px;padding:7px 14px;color:var(--deeper)!important;
  font-weight:600;display:inline-flex;align-items:center;gap:6px;transition:border-color .16s,background .16s}
.nav-pill:hover{border-color:var(--sig);background:rgba(223,162,54,.10);color:var(--deeper)!important}
.nav-pill svg{flex:none}
.head-cta{margin-left:auto}
@media (max-width:899px){.head-cta{padding:10px 14px;font-size:var(--fs-xs)}}
@media (min-width:900px){.head-cta{margin-left:var(--s5)}}

/* Mobile navigation. Below 900px the primary nav was display:none with nothing
   replacing it, so a phone visitor had no route to any other page. The toggle
   only exists under that breakpoint; above it the desktop nav is unchanged. */
.nav-toggle{display:inline-flex;align-items:center;justify-content:center;flex:none;
  width:42px;height:42px;margin-left:var(--s3);padding:0;border-radius:var(--rad-sm);
  border:1px solid var(--line-2);background:transparent;color:var(--ink);cursor:pointer}
.nav-toggle:hover{background:var(--soft)}
@media (min-width:900px){.nav-toggle{display:none}}
@media (max-width:379px){.nav-toggle{margin-left:var(--s2)}.head-in{gap:var(--s4)}}
.nav-toggle span{position:relative;display:block;width:18px;height:2px;border-radius:2px;
  background:currentColor;transition:transform .2s,opacity .2s}
.nav-toggle span::before,.nav-toggle span::after{content:"";position:absolute;left:0;
  width:18px;height:2px;border-radius:2px;background:currentColor;transition:transform .2s}
.nav-toggle span::before{top:-6px} .nav-toggle span::after{top:6px}
[aria-expanded="true"] .nav-toggle span,.nav-toggle[aria-expanded="true"] span{background:transparent}
.nav-toggle[aria-expanded="true"] span::before{transform:translateY(6px) rotate(45deg)}
.nav-toggle[aria-expanded="true"] span::after{transform:translateY(-6px) rotate(-45deg)}

/* Buy or Sell dropdown (scripts/set-nav.py writes the markup, site.js "NAV DROPDOWN" the behavior).
   The parent stays a link; the chevron button beside it owns aria-expanded. */
.nav-dd{position:relative;display:flex;align-items:center;gap:2px}
.nav-dd-btn{display:inline-flex;align-items:center;justify-content:center;width:26px;height:30px;padding:0;border:0;
  border-radius:6px;background:transparent;color:var(--ink);cursor:pointer}
.nav-dd-btn:hover{background:var(--soft)}
.nav-dd-btn svg{transition:transform .18s}
.nav-dd-btn[aria-expanded="true"] svg{transform:rotate(180deg)}
.nav-dd.is-section > a{color:var(--deeper)}
.nav-dd-menu{position:absolute;top:calc(100% + 10px);left:-14px;min-width:200px;margin:0;padding:var(--s2);list-style:none;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--rad);box-shadow:var(--shadow-lift);
  display:none;z-index:70}
.nav-dd-menu::before{content:"";position:absolute;left:0;right:0;top:-12px;height:12px}
.nav-dd.open .nav-dd-menu{display:block}
.nav-dd-menu a{display:block;padding:10px 12px;border-radius:6px;font-weight:500}
.nav-dd-menu a:hover,.nav-dd-menu a:focus-visible{background:var(--soft);color:var(--deeper)}
.nav-dd-menu a[aria-current="page"]{color:var(--deeper);text-decoration:none;font-weight:700;background:rgba(223,162,54,.12)}
/* Phone drawer: the same list as an accordion. */
.nav-drawer .drawer-group{display:flex;flex-direction:column}
.nav-drawer .drawer-row{display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line)}
.nav-drawer .drawer-row a{border-bottom:0;flex:1}
.drawer-acc{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;padding:0;border:0;
  border-radius:var(--rad-sm);background:transparent;color:var(--ink);cursor:pointer}
.drawer-acc svg{width:16px;height:16px;transition:transform .18s}
.drawer-acc[aria-expanded="true"] svg{transform:rotate(180deg)}
.drawer-sub{display:flex;flex-direction:column;padding:var(--s1) 0 var(--s2) var(--s4);border-bottom:1px solid var(--line)}
.drawer-sub[hidden]{display:none}
.nav-drawer .drawer-sub a{padding:var(--s3) 0;font-size:var(--fs-sm);border-bottom:0;color:var(--mute)}
.nav-drawer .drawer-sub a[aria-current="page"]{color:var(--deeper);font-weight:700}
@media (prefers-reduced-motion:reduce){.nav-dd-btn svg,.drawer-acc svg{transition:none}}

.nav-drawer{display:none;border-top:1px solid var(--line);background:var(--paper)}
.nav-drawer.open{display:block}
@media (min-width:900px){.nav-drawer{display:none!important}}
.nav-drawer nav{display:flex;flex-direction:column;padding-block:var(--s4)}
.nav-drawer a{padding:var(--s4) 0;text-decoration:none;font-size:var(--fs-md);font-weight:500;
  color:var(--ink);border-bottom:1px solid var(--line)}
.nav-drawer nav > a:last-of-type{border-bottom:0}
.nav-drawer .btn{margin-top:var(--s4);width:100%}

.hero{padding-block:var(--s16) var(--s12)}
.hero-grid{display:grid;gap:var(--s12);align-items:stretch}
@media (min-width:1000px){.hero-grid{grid-template-columns:1.08fr .92fr;gap:var(--s16)}
  .hero-grid>.ph{aspect-ratio:auto;height:100%}}
.hero h1,.lp-hero h1{font-size:var(--fs-2xl);margin-bottom:var(--s5);max-width:18ch}
.hero h1 em,.lp-hero h1 em{font-style:normal;color:var(--deep)}
.hero-actions{display:flex;flex-wrap:wrap;gap:var(--s3);margin-top:var(--s8)}
/* The payment disclosure sits with the CTA rather than in a section further down.
   Competitors state "free" and leave the reason to a FAQ; saying why it is free at
   the point of decision is the part that earns trust. */
.hero-paid{margin-top:var(--s4);font-size:var(--fs-sm);color:var(--mute);line-height:1.6;max-width:52ch}
.hero-paid a{color:var(--deeper);text-decoration:underline;text-underline-offset:2px}
.hero-trust{display:flex;flex-wrap:wrap;gap:var(--s2);margin-top:var(--s8)}
.hero-trust span{background:var(--soft);border-radius:99px;padding:8px 15px;font-size:var(--fs-sm);
  font-weight:500;color:var(--mute);display:flex;align-items:center;gap:8px}
.hero-trust span::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--sig)}

.doors{background:var(--paper)}
/* The hero's bottom padding already separates the sections; a full band's top
   padding on top of it read as a hole above the "Where you are" eyebrow. */
.doors.band{padding-top:var(--s8)}
.doors-head{margin-bottom:var(--s8);display:grid;gap:var(--s4)}
@media (min-width:960px){.doors-head{grid-template-columns:1fr 1fr;gap:var(--s16);align-items:end}
  .doors-head .body-sm{max-width:40ch}}
.doors-head h2{font-size:var(--fs-xl);margin-bottom:0}
/* Door cards: restored 2026-10-12 to the 10-09 design the owner approved (tall photo, title on a dark fade,
   description opens on hover or focus; phones get the two-across photo tiles further down). */
.door-grid{display:grid;gap:var(--s4)}
@media (min-width:660px){.door-grid{grid-template-columns:repeat(2,1fr)}}
@media (min-width:900px){.door-grid{grid-template-columns:repeat(3,1fr)}}
@media (min-width:1160px){.door-grid{grid-template-columns:repeat(5,1fr)}}
@media (min-width:1160px){.door p{font-size:var(--fs-sm)}}
.door{display:flex;flex-direction:column;border:1px solid var(--line);border-radius:var(--rad);
  background:var(--surface);text-decoration:none;overflow:hidden;
  transition:transform .18s,box-shadow .18s,border-color .18s}
.door:hover{transform:translateY(-4px);box-shadow:var(--shadow-lift);border-color:var(--sig)}
.door:hover .ph img{transform:scale(1.045)}
.door .ph{border-radius:0}
/* On a phone the four doors stack, and a full-width illustration on each turns a
   glanceable row into four screens of scrolling. The words carry the choice; the
   pictures are decoration. Images return at the first breakpoint where the cards
   sit side by side. */
/* Owner 2026-10-09: no card goes without a picture, phone included. A compact thumbnail beside the words keeps the scroll short. */
@media (max-width:659px){
  .door{flex-direction:row;align-items:stretch}
  .door figure.ph{display:block;flex:0 0 104px;width:104px;aspect-ratio:auto;margin:0;border-radius:0}
  .door figure.ph img{width:100%;height:100%;object-fit:cover;display:block}
  .door-body{padding:var(--s4);min-width:0}
  .door h3{font-size:var(--fs-md)}
}
.door-body{padding:var(--s5);display:flex;flex-direction:column;gap:var(--s3);flex:1}
.door-num{font-family:var(--display);font-size:var(--fs-xs);font-weight:700;color:var(--sig);letter-spacing:.1em}
.door h3{font-size:var(--fs-lg)}
.door p{font-size:var(--fs-md);color:var(--mute);line-height:1.6}
.door-go{margin-top:auto;padding-top:var(--s2);font-size:var(--fs-sm);font-weight:700;
  color:var(--deeper);display:flex;align-items:center;gap:var(--s2)}
.door-go svg{transition:transform .18s}
.door:hover .door-go svg{transform:translateX(4px)}
.door.urgent{background:var(--clay-soft);border-color:var(--clay-line)}
.door.urgent:hover{border-color:var(--clay)}
.door.urgent .door-go{color:var(--clay-deep)}
/* Desktop with a mouse: the picture is the card. Taller photos, the number and
   title on a dark fade at the bottom, and the description opens on hover or
   keyboard focus. The photo and the text share one grid cell, with an empty
   sizer setting the minimum height, so if the opened text is ever taller than
   the photo the card grows instead of clipping it. Touch screens and narrow
   windows keep the text always visible, because there is no hover to open it. */
@media (min-width:900px) and (hover:hover){
  .door{display:grid;border-color:transparent}
  .door::before{content:"";grid-area:1/1;aspect-ratio:3/4}
  .door .ph{grid-area:1/1;aspect-ratio:auto;height:100%}
  .door-body{grid-area:1/1;align-self:end;position:relative;z-index:3;gap:var(--s2);padding:var(--s16) var(--s5) var(--s5);
    background:linear-gradient(to top,rgba(30,26,22,.94) 0%,rgba(30,26,22,.86) 55%,rgba(30,26,22,0) 100%)}
  .door.urgent .door-body{background:linear-gradient(to top,rgba(110,52,34,.95) 0%,rgba(138,70,50,.86) 55%,rgba(138,70,50,0) 100%)}
  .door h3{color:var(--paper)}
  .door p{color:rgba(248,243,233,.9);max-height:0;opacity:0;overflow:hidden;
    transition:max-height .4s cubic-bezier(.2,.7,.3,1),opacity .3s}
  .door:hover p,.door:focus-visible p{max-height:16em;opacity:1}
  .door-go,.door.urgent .door-go{color:var(--sig);margin-top:var(--s1);padding-top:0}
  .door.urgent .door-go,.door.urgent .door-num{color:#F5D2C2}
}
@media (min-width:1160px) and (hover:hover){
  .door::before{aspect-ratio:9/15}
  .door-body{padding:var(--s12) var(--s4) var(--s4)}
  .door h3{font-size:var(--fs-md)}
  .door p{font-size:var(--fs-sm);line-height:1.5}
}
  .door-body{padding:var(--s12) var(--s4) var(--s4)}
  .door h3{font-size:var(--fs-md)}
  .door p{font-size:var(--fs-sm);line-height:1.5}
}
.door.urgent .door-num{color:var(--clay)}

/* Door grids with other counts than five. The photo stays a 3:4 portrait. */
.door-grid.door-grid-3{grid-template-columns:1fr}
@media (min-width:900px){.door-grid.door-grid-3{grid-template-columns:repeat(3,1fr)}}
.door-grid.door-grid-4{grid-template-columns:1fr}
@media (min-width:660px){.door-grid.door-grid-4{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1000px){.door-grid.door-grid-4{grid-template-columns:repeat(4,1fr)}}
.door-grid-3 .door::before,.door-grid-4 .door::before{aspect-ratio:3/4}
/* A slim full-width strip under a door grid (Buy or Sell: the optional, unaffiliated lender; homepage: Broker of Record).
   Outlined in white on the page background, no fill (owner 2026-10-12). */
.door-strip{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s2) var(--s6);margin-top:var(--s4);
  padding:var(--s4) var(--s5);border:2px solid #fff;border-radius:var(--rad);background:transparent;text-decoration:none;color:inherit;
  transition:border-color .18s,box-shadow .18s}
.door-strip:hover{border-color:var(--sig);box-shadow:var(--shadow-lift)}
.door-strip[data-ahl]:hover{border-color:#7db4ff}
.door-strip .door-num{flex:none;color:var(--deeper)}
.door-strip strong{font-family:var(--display);font-size:var(--fs-md);font-weight:600;color:var(--ink)}
.door-strip p{flex:1 1 32ch;margin:0;font-size:var(--fs-sm);color:var(--mute);line-height:1.5}
.door-strip .door-go{margin:0;padding:0;color:var(--deeper)}
.door-strip[data-ahl] .door-go{color:#2f6fd0}
.door-strip-quiet{padding:var(--s3) var(--s5);justify-content:space-between;flex-wrap:nowrap}
.door-strip-quiet .door-strip-text{flex:1;min-width:0}
.door-strip-text{font-size:var(--fs-sm);color:var(--mute)}
.door-strip-text strong{font-family:inherit;font-size:inherit;font-weight:700;color:var(--deeper)}
.door-strip:hover .door-go svg{transform:translateX(4px)}

.ledger{display:grid;gap:var(--s4);margin-top:var(--s10)}
@media (min-width:860px){.ledger{grid-template-columns:1fr 1fr;gap:var(--s5)}}
.col{border-radius:var(--rad-lg);padding:var(--s6) var(--s6) var(--s8)}
.col.bad{background:var(--soft);border:1px solid var(--line)}
.col.good{background:var(--surface);border:2px solid var(--sig);box-shadow:var(--shadow-sig)}
.col h3{font-family:var(--display);font-size:var(--fs-xs);font-weight:700;letter-spacing:.12em;
  text-transform:uppercase;margin-bottom:var(--s6)}
.col.bad h3{color:var(--mute)} .col.good h3{color:var(--deeper)}
.col ul{list-style:none;margin:0;padding:0;display:grid;gap:var(--s4)}
.col li{display:grid;grid-template-columns:20px 1fr;gap:var(--s3);font-size:var(--fs-sm);line-height:1.6}
.col li i{font-style:normal;font-weight:700;font-family:var(--display);line-height:1.35}
.col.bad li{color:var(--mute)} .col.bad li i{color:var(--mute-2)}
.col.good li{color:var(--ink)} .col.good li i{color:var(--sig)}

.mech{background:var(--ink);color:var(--paper)}
.mech h2{font-size:var(--fs-xl);color:var(--paper);max-width:16ch;margin-bottom:0}
.mech .eyebrow{color:var(--sig);background:rgba(223,162,54,.16)}
/* Heading left, the three steps stacked right, so the row is used edge to edge
   and the band is shorter. Below 860px it stacks as before. */
.mech-grid{display:grid;gap:var(--s8)}
@media (min-width:860px){.mech-grid{grid-template-columns:.9fr 1.1fr;gap:var(--s16);align-items:start}}
.steps{display:grid;gap:var(--s6)}
.step{padding-top:var(--s5)}
.step{border-top:2px solid var(--sig)}
.step-n{font-family:var(--display);font-size:var(--fs-xs);color:var(--sig);letter-spacing:.12em;
  display:block;margin-bottom:var(--s4);font-weight:700}
.step h3{font-size:var(--fs-lg);color:var(--paper);margin-bottom:var(--s3)}
.step p{font-size:var(--fs-md);color:rgba(248,243,233,.74);line-height:1.65}

.aud{border-bottom:1px solid var(--line)}
.aud-alt{background:var(--surface)}
.aud-grid{display:grid;gap:var(--s10)}
@media (min-width:960px){.aud-grid{grid-template-columns:.92fr 1.08fr;gap:var(--s16)}}
.aud h2{font-size:var(--fs-xl);margin-bottom:var(--s5)}
.checklist{list-style:none;padding:0;margin:var(--s6) 0 0;display:grid;gap:var(--s4)}
.checklist li{display:grid;grid-template-columns:24px 1fr;gap:var(--s3);align-items:start}
.checklist svg{margin-top:4px;color:var(--deep);flex:none;background:rgba(223,162,54,.20);
  border-radius:50%;padding:2px;box-sizing:content-box}
.checklist strong{display:block;font-weight:700;font-size:var(--fs-md);margin-bottom:2px}
.checklist span{font-size:var(--fs-md);color:var(--mute);line-height:1.6}
.callout{background:linear-gradient(90deg,rgba(223,162,54,.16),rgba(223,162,54,.04));
  border-left:3px solid var(--sig);padding:var(--s5) var(--s6);
  border-radius:0 var(--rad) var(--rad) 0;margin-top:var(--s8)}
.callout p{font-size:var(--fs-sm);color:var(--mute);line-height:1.68}
.callout strong{color:var(--ink)}

.lp-hero{padding-block:var(--s12)}
.lp-hero-grid{display:grid;gap:var(--s10)}
@media (min-width:980px){.lp-hero-grid{grid-template-columns:1.05fr .95fr;gap:var(--s12);align-items:start}}
.lp-hero .ph{margin-top:var(--s8)}
/* Landing-page lead image. Lives between the pitch and the financing block on
   /new-homes; the .ph slot keeps the gradient fallback and the reserved 4:3
   box, the wrapper carries the illustrative-image caption below it. */
.lp-figure{margin:var(--s6) 0 0}
.lp-figure .ph{margin-top:0}
.lp-figure .ph img{object-position:55% center}
.lp-figure figcaption{margin-top:var(--s2);font-size:var(--fs-xs);color:var(--mute);line-height:1.5}
.lp-after{margin-top:var(--s5);font-size:var(--fs-md);line-height:1.6;color:var(--mute);max-width:56ch}
.lp-badges{display:flex;flex-wrap:wrap;gap:var(--s2);margin-top:var(--s6)}
.lp-badges span{font-size:var(--fs-xs);font-weight:600;background:var(--soft);
  border-radius:99px;padding:7px 14px;color:var(--mute)}
.lp-clay .lp-badges span{background:var(--surface);border:1px solid var(--clay-line);color:var(--clay-deep)}
.proof{background:var(--surface);border-block:1px solid var(--line)}
.proof-grid{display:grid;gap:var(--s8)}
@media (min-width:820px){.proof-grid{grid-template-columns:repeat(3,1fr)}}
.proof-item h3{font-size:var(--fs-lg);margin:var(--s4) 0 var(--s3)}
.proof-item p{font-size:var(--fs-md);color:var(--mute);line-height:1.65}
.proof-item:hover .ph img{transform:scale(1.045)}

.lp-clay{background:var(--clay-soft)}
.lp-clay .eyebrow{color:var(--clay-deep);background:rgba(181,103,76,.16)}
.lp-clay .lede{color:#6B4438}
.opt-grid{display:grid;gap:var(--s4);margin-top:var(--s8)}
/* Four cards since the sell-focus rewrite — 2x2 reads as a set, 3+1 as a leftover. */
@media (min-width:700px){.opt-grid{grid-template-columns:repeat(2,1fr)}}
.opt{background:var(--surface);border:1px solid var(--clay-line);border-radius:var(--rad);
  padding:var(--s5);transition:transform .18s,box-shadow .18s}
.opt:hover{transform:translateY(-3px);box-shadow:var(--shadow)}
.opt h3{font-size:var(--fs-md);font-weight:700;margin-bottom:var(--s2)}
.opt p{font-size:var(--fs-sm);color:var(--mute);line-height:1.62}
/* Neutral option cards. .opt carries the clay border, which is reserved for the
   zero-equity path; these are for every other page. */
.pick-grid{display:grid;gap:var(--s4);margin-top:var(--s8)}
@media (min-width:700px){.pick-grid{grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}}
.pick{background:var(--surface);border:1px solid var(--line);border-radius:var(--rad);padding:var(--s5)}
.pick h2,.pick h3{font-size:var(--fs-md);font-weight:700;margin-bottom:var(--s2)}
.pick p{font-size:var(--fs-sm);color:var(--mute);line-height:1.62}
.pick .ph{margin:calc(var(--s5)*-1) calc(var(--s5)*-1) var(--s4);border-radius:var(--rad) var(--rad) 0 0}
.two-col{display:grid;gap:var(--s5);margin-top:var(--s10)}
@media (min-width:820px){.two-col{grid-template-columns:repeat(2,1fr);gap:var(--s6)}}
.pledge{background:var(--surface);border:1px solid var(--clay-line);border-radius:var(--rad-lg);padding:var(--s6)}
.pledge h3{font-size:var(--fs-md);font-weight:700;margin-bottom:var(--s5)}
.pledge ul{list-style:none;padding:0;margin:0;display:grid;gap:var(--s3)}
.pledge li{display:grid;grid-template-columns:18px 1fr;gap:var(--s3);font-size:var(--fs-sm);
  color:var(--mute);line-height:1.58}
.pledge li i{font-style:normal;font-weight:700;font-family:var(--display);line-height:1.4}
.pledge.do li i{color:var(--deep)} .pledge.dont li i{color:var(--clay)}
.free-help{margin-top:var(--s8);background:var(--ink);color:var(--paper);border-radius:var(--rad-lg);
  padding:var(--s6);display:flex;flex-wrap:wrap;gap:var(--s5);align-items:center;justify-content:space-between}
.free-help p{font-size:var(--fs-sm);color:rgba(248,243,233,.76);max-width:56ch;line-height:1.62}
.free-help strong{color:var(--paper)}
.free-help a.tel{color:var(--sig);text-decoration:none;font-weight:700;white-space:nowrap}
.legal-block{margin-top:var(--s8);padding:var(--s5) var(--s6);border:1px dashed var(--clay-line);
  border-radius:var(--rad);font-size:var(--fs-xs);line-height:1.75;color:#6B4438}
.legal-block strong{color:var(--clay-deep)}

.agents{background:var(--ink-2);color:var(--paper)}
.agents .eyebrow{color:var(--sig);background:rgba(223,162,54,.16)}
.agents h1,.agents h2{color:var(--paper)}
.agents .lede{color:rgba(248,243,233,.66)}
.agent-grid{display:grid;gap:var(--s10);margin-top:var(--s10)}
@media (min-width:940px){.agent-grid{grid-template-columns:1fr 1fr;gap:var(--s12)}}
.panel-title{font-family:var(--display);font-size:var(--fs-xs);letter-spacing:.12em;text-transform:uppercase;
  color:var(--sig);padding-bottom:var(--s3);border-bottom:1px solid rgba(248,243,233,.18);
  margin-bottom:var(--s5);font-weight:700}
.req{list-style:none;padding:0;margin:0;display:grid;gap:var(--s4)}
.req li{display:grid;grid-template-columns:auto 1fr;gap:var(--s4);align-items:baseline}
.req .k{font-family:var(--display);font-size:var(--fs-xs);color:var(--sig);min-width:52px;font-weight:700}
.req .v{font-size:var(--fs-sm);color:rgba(248,243,233,.8);line-height:1.62}
.req .v b{color:var(--paper);font-weight:600}
.terms{display:grid;gap:var(--s4)}
.term{background:rgba(248,243,233,.06);border:1px solid rgba(248,243,233,.14);
  border-radius:var(--rad);padding:var(--s5)}
.term-k{font-family:var(--display);font-size:var(--fs-xs);color:rgba(248,243,233,.5);
  text-transform:uppercase;letter-spacing:.12em;font-weight:600}
.term-v{font-family:var(--display);font-size:1.55rem;font-weight:600;color:var(--paper);
  margin-block:var(--s2);line-height:1.05;letter-spacing:-.03em}
.term p{font-size:var(--fs-sm);color:rgba(248,243,233,.64);line-height:1.62}

.faq h2{font-size:var(--fs-xl);margin-bottom:var(--s10);max-width:18ch}
.faq-list{border-top:1px solid var(--line)}
/* FAQ grouped by audience (2026-10-12). */
.faq-jump{display:flex;flex-wrap:wrap;gap:var(--s2) var(--s5);margin:0 0 var(--s10);font-size:var(--fs-sm);font-weight:600}
.faq-jump a{color:var(--deeper);text-decoration:underline;text-underline-offset:3px}
.faq-group{scroll-margin-top:84px}
.faq-group + .faq-group{margin-top:var(--s12)}
.faq .faq-group-title{font-size:var(--fs-lg);margin:0 0 var(--s4);max-width:none}
details{border-bottom:1px solid var(--line)}
summary{list-style:none;cursor:pointer;padding:var(--s5) var(--s4);display:flex;gap:var(--s5);
  align-items:baseline;justify-content:space-between;font-weight:600;font-size:var(--fs-md);
  border-radius:var(--rad-sm);transition:background .16s,color .16s}
summary::-webkit-details-marker{display:none}
summary:hover{background:rgba(223,162,54,.10);color:var(--deeper)}
details[open] summary{color:var(--deeper)}
.chev{flex:none;color:var(--mute-2);transition:transform .2s;margin-top:4px}
details[open] .chev{transform:rotate(45deg);color:var(--sig)}
.faq-body{padding:0 var(--s4) var(--s6);max-width:76ch}
.faq-body p{font-size:var(--fs-sm);color:var(--mute);line-height:1.75}
.faq-body p+p{margin-top:var(--s3)}

.intake{background:var(--paper);border-top:1px solid var(--line)}
.intake-grid{display:grid;gap:var(--s10)}
@media (min-width:980px){.intake-grid{grid-template-columns:.85fr 1.15fr;gap:var(--s16)}}
.intake h2{font-size:var(--fs-xl);margin-bottom:var(--s5)}
.form-card{background:var(--paper);border:1px solid var(--line);border-radius:var(--rad-lg);
  padding:var(--s8);box-shadow:var(--shadow)}
.form-card.on-white{background:var(--surface)}
.lp-clay .form-card{background:var(--surface);border-color:var(--clay-line)}
@media (max-width:520px){.form-card{padding:var(--s5)}}
.form-card h2,.form-card h3{font-size:var(--fs-lg);margin-bottom:var(--s2)}
.form-intro{font-size:var(--fs-sm);color:var(--mute);margin-bottom:var(--s6);line-height:1.62}
.field{margin-bottom:var(--s5)}
.field label{display:block;font-size:var(--fs-sm);font-weight:600;margin-bottom:var(--s2)}
.hint{font-size:var(--fs-xs);color:var(--mute-2);font-weight:400}
.field input,.field select,.field textarea{width:100%;font-family:inherit;font-size:var(--fs-sm);
  color:var(--ink);background:var(--surface);border:1px solid var(--line-2);border-radius:var(--rad-sm);
  padding:13px var(--s4);transition:border-color .16s,box-shadow .16s}
.lp-clay .field input,.lp-clay .field select,.lp-clay .field textarea{background:var(--paper)}
.field textarea{min-height:98px;resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--sig);
  box-shadow:0 0 0 3px rgba(223,162,54,.24)}
.field input[aria-invalid="true"],.field select[aria-invalid="true"]{border-color:var(--clay);
  box-shadow:0 0 0 3px rgba(181,103,76,.16)}
.err{display:none;font-size:var(--fs-xs);color:var(--clay-deep);margin-top:var(--s2)}
.err.show{display:block}
.row{display:grid;gap:var(--s4)}
@media (min-width:560px){.row{grid-template-columns:1fr 1fr}}
.seg{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--s2);margin-bottom:var(--s6)}
/* Five options since Buying joined the homepage form. On phones the odd one
   spans the last row rather than leaving a hole beside it. */
@media (min-width:560px){.seg{grid-template-columns:repeat(5,1fr)}}
@media (max-width:559px){.seg label[for="r-agent"]{grid-column:span 2}}
.seg input{position:absolute;opacity:0;width:0;height:0}
/* Talk form "This is about…": seven options (2026-10-12 added Moving a parent and New home community). */
.seg.seg-7 label[for="r-agent"]{grid-column:auto}
.seg.seg-7 label[for="r-builder"]{grid-column:span 2}
@media (min-width:560px){.seg.seg-7{grid-template-columns:repeat(4,1fr)}}
#form,#start{scroll-margin-top:84px}
.seg label{display:flex;align-items:center;justify-content:center;text-align:center;
  padding:var(--s3) var(--s2);border:1px solid var(--line-2);border-radius:var(--rad-sm);
  background:var(--surface);font-size:var(--fs-xs);font-weight:600;cursor:pointer;line-height:1.3;margin:0;
  transition:background .16s,border-color .16s,color .16s}
.seg label:hover{border-color:var(--mute-2)}
.seg input:checked+label{background:var(--sig);border-color:var(--sig);color:var(--ink)}
.seg input:focus-visible+label{outline:2px solid var(--deep);outline-offset:2px}
/* Buyer forms: "Do you have a home to sell?" No / Yes, then the details and listing link (2026-10-13). */
.hts-q{border:0;padding:0;min-width:0;margin-inline:0}
.hts-q legend{display:block;font-size:var(--fs-sm);font-weight:600;margin-bottom:var(--s2);padding:0}
.seg.seg-2{grid-template-columns:repeat(2,1fr);max-width:320px;margin-bottom:var(--s3)}
.seg.seg-2 label[for="r-agent"]{grid-column:auto}
.seg.seg-2 label{min-height:44px}
.hts-more{margin-top:var(--s3)}
.hts-note{margin:0 0 var(--s3);font-size:var(--fs-xs);color:var(--mute)}
.hts-more .field:last-child{margin-bottom:0}
.consent{display:grid;grid-template-columns:18px 1fr;gap:var(--s3);align-items:start;margin-block:var(--s6)}
.consent input{margin-top:4px;accent-color:var(--deep);width:16px;height:16px}
.consent input[aria-invalid="true"]{outline:2px solid var(--clay);outline-offset:2px;border-radius:3px}
.consent p{font-size:var(--fs-xs);color:var(--mute);line-height:1.68}
.form-card .btn{width:100%}
.form-foot{margin-top:var(--s4);font-size:var(--fs-xs);color:var(--mute-2);text-align:center;line-height:1.6}
.form-call{margin-top:var(--s2);font-size:var(--fs-sm);color:var(--mute)}
.form-call a{color:var(--deeper);font-weight:700;text-decoration:none;white-space:nowrap}
/* Two-step intake. Only the active step shows once scripts run; with scripts
   off both steps render in order and the form posts as one page. */
.js .fstep:not(.on){display:none}
.fstep-n{display:flex;align-items:center;gap:var(--s3);font-size:var(--fs-sm);font-weight:600;margin-bottom:var(--s5);color:var(--ink)}
.fstep-n span{font-family:var(--display);font-size:var(--fs-xs);letter-spacing:.12em;text-transform:uppercase;color:var(--deeper);background:rgba(223,162,54,.18);padding:4px 10px;border-radius:99px}
.fstep-next{width:100%}
.fstep-back{margin-left:auto;background:none;border:0;padding:4px 0;font:inherit;font-size:var(--fs-sm);font-weight:600;color:var(--deeper);text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.fstep-back:hover{color:var(--ink)}
.sent{display:none;text-align:center;padding:var(--s10) var(--s4)}
.sent.show{display:block;animation:pop .4s cubic-bezier(.2,.8,.3,1)}
@keyframes pop{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.sent-ring{width:52px;height:52px;border-radius:50%;background:var(--sig);color:var(--ink);
  display:grid;place-items:center;margin:0 auto var(--s5)}
.sent h3{font-size:var(--fs-lg);margin-bottom:var(--s3)}
.sent p{font-size:var(--fs-sm);color:var(--mute);max-width:44ch;margin-inline:auto;line-height:1.65}
/* What a builder should have ready for the first call (new-home-sales request page, booked builder calls) */
.prep{max-width:44ch;margin:var(--s5) auto 0;text-align:left}
.prep p{margin:0 0 var(--s2)}
.prep ul{margin:0;padding-left:1.2em;font-size:var(--fs-sm);color:var(--mute);line-height:1.65}
.prep li+li{margin-top:var(--s1)}
.book-done .prep{margin-inline:0}

/* Altitude prequalification, two placements that share one job.

   The card sits in the page flow and carries the approved disclosure sentence.
   The bubble floats and catches a reader who is already scrolling past.

   The bubble is desktop-only on purpose. Below 980px .sticky-cta already owns
   the bottom of the viewport, and stacking a second floating CTA on top of it
   would both collide and put three competing actions on a phone screen. On
   mobile the card does this job alone. */
/* Same component as .callout, only in Altitude's hue: gradient wash and a left
   rail, no full border and no solid fill. A bordered box read as something
   bolted on from another site. The text gets flex rather than a fixed measure
   so it uses the width available instead of wrapping short and leaving a void
   between itself and the button. */
/* .08 rather than the marigold callout's .16: blue is far darker than amber, so
   an equal alpha drops muted text to 4.37:1. This lands at 4.59:1, a hair above
   the marigold callout's own 4.64:1. */
.ahl-card{background:linear-gradient(90deg,rgba(30,82,166,.08),rgba(30,82,166,.02));
  border-left:3px solid var(--ahl);border-radius:0 var(--rad) var(--rad) 0;
  padding:var(--s5) var(--s6);margin-top:var(--s8);
  display:flex;gap:var(--s6);align-items:center;justify-content:space-between;flex-wrap:wrap}
/* text-wrap:pretty keeps "changes." from landing alone on a third line; the
   lender name is held together because a split brand reads as a typo. */
.ahl-card p{flex:1 1 34ch;font-size:var(--fs-sm);color:var(--mute);line-height:1.68;
  text-wrap:pretty}
.ahl-card strong{color:var(--ink)}
.ahl-card a.ahl-link{color:var(--ahl);font-weight:600;white-space:nowrap}
.ahl-card .btn{flex:none}
.btn-ahl{background:var(--ahl);color:#fff;box-shadow:0 10px 22px -14px rgba(30,82,166,.6)}
.btn-ahl:hover{filter:brightness(1.08)}

/* Standing prequalification link in the hero column, where the "never charged"
   line used to sit. A link rather than a button, so it reads as an option
   beside the agent match rather than a rival to it. The optional and
   unaffiliated language lives in the referral disclosure in the footer. */
.ahl-under{margin-top:var(--s5)}
.ahl-under a:not(.btn){display:inline-flex;align-items:center;gap:6px;color:var(--ahl);
  font-size:var(--fs-sm);font-weight:600;text-decoration:none;
  border-bottom:1px solid rgba(30,82,166,.35);padding-bottom:1px;
  transition:border-color .16s,color .16s}
.ahl-under a:not(.btn):hover{color:var(--ahl-2);border-bottom-color:var(--ahl-2)}
/* 2026-08-21, owner's call: the prequalification route carries more weight on
   /buy than a text link gave it. Louder, but still only ever in
   Altitude's blue and never Marigold, so the bigger ask still reads as a
   separate and unaffiliated one. The optional and unaffiliated qualifier
   moves up from the footer disclosure to sit under the button: a button asks
   harder than a link did, so its condition travels with it. */
.ahl-under-lead .btn{max-width:100%}
.ahl-under-lead small{display:block;margin-top:var(--s3);font-size:var(--fs-xs);
  color:var(--mute);line-height:1.6;max-width:52ch}
/* Wash alpha deliberately left at .08. The note above it is load-bearing:
   muted text over a heavier blue drops under 4.5:1. Weight comes from the
   rail, the padding and the button size instead. */
.ahl-card-lead{border-left-width:6px;padding:var(--s6) var(--s8)}
.ahl-card-body{flex:1 1 34ch}
.ahl-card-body p{flex:none;margin:0}
.ahl-card .ahl-eyebrow{color:var(--ahl);font-size:var(--fs-xs);margin:0 0 var(--s2)}
.ahl-under a svg{flex:none}

/* Container is a div, not an anchor: the dismiss control is a real <button>
   and interactive content cannot nest inside a link. */
.ahl-bubble{position:fixed;right:var(--s6);bottom:var(--s6);z-index:65;
  display:none;align-items:center;gap:var(--s1);background:var(--ahl);color:#fff;
  border-radius:99px;padding-right:var(--s3);
  box-shadow:0 4px 10px rgba(30,82,166,.24),0 16px 34px -12px rgba(30,82,166,.55);
  opacity:0;transform:translateY(10px);pointer-events:none;
  transition:opacity .24s ease,transform .24s ease,box-shadow .16s}
@media (min-width:980px){.ahl-bubble{display:inline-flex}}
.ahl-bubble.in{opacity:1;transform:none;pointer-events:auto}
.ahl-bubble:hover{box-shadow:0 6px 14px rgba(30,82,166,.30),0 22px 42px -12px rgba(30,82,166,.62)}
.ahl-bubble.in:hover{transform:translateY(-2px)}
.ahl-go{display:inline-flex;align-items:center;gap:11px;color:#fff;text-decoration:none;
  font-family:var(--body);font-weight:700;font-size:var(--fs-sm);
  padding:13px var(--s3) 13px 15px;border-radius:99px}
.ahl-go small{display:block;font-weight:500;opacity:.82;font-size:var(--fs-xs);letter-spacing:.01em}
.ahl-ic{width:26px;height:26px;border-radius:50%;
  background:rgba(255,255,255,.19);display:grid;place-items:center;flex:none}
.ahl-x{padding:5px;border-radius:50%;background:transparent;border:0;
  color:rgba(255,255,255,.7);cursor:pointer;display:grid;place-items:center;
  transition:background .16s,color .16s}
.ahl-x:hover{background:rgba(255,255,255,.18);color:#fff}
.ahl-bubble :focus-visible{outline:2px solid #fff;outline-offset:2px}
@media (prefers-reduced-motion:reduce){
  .ahl-bubble{transition:opacity .01ms}
  .ahl-bubble.in,.ahl-bubble.in:hover{transform:none}
}

.sticky-cta{position:fixed;left:0;right:0;bottom:0;z-index:70;padding:var(--s3) var(--s4);
  background:rgba(248,243,233,.96);backdrop-filter:blur(10px);border-top:1px solid var(--line);
  display:flex;gap:var(--s2);box-shadow:0 -8px 24px -12px rgba(42,37,32,.28)}
.sticky-cta .btn{flex:1}
.sticky-cta .btn-call{flex:0 0 auto;padding-inline:var(--s6)}
@media (min-width:980px){.sticky-cta{display:none}}
@media (max-width:979px){body.has-sticky{padding-bottom:76px}}

.site-foot{background:var(--ink);color:rgba(248,243,233,.62);padding-block:var(--s16) var(--s10)}
.foot-top{display:grid;gap:var(--s10);padding-bottom:var(--s10);border-bottom:1px solid rgba(248,243,233,.14)}
@media (min-width:840px){.foot-top{grid-template-columns:1.4fr 1fr 1fr}}
/* Footer sits on ink, so it takes the on-dark cut of the same mark. */
.foot-logo{display:block;width:210px;height:auto}
.foot-brand .brand-mark{color:var(--paper);font-size:1.375rem}
.foot-brand .brand-mark span{color:var(--sig)}
.foot-brand p{font-size:var(--fs-sm);color:rgba(248,243,233,.55);margin-top:var(--s4);max-width:40ch;line-height:1.65}
/* h2 rather than h4: pages with no intervening heading jumped H1 to H4.
   The h4 selector stays so the rule survives any markup that still uses it. */
.foot-col h2,.foot-col h4{font-family:var(--display);font-size:var(--fs-xs);letter-spacing:.12em;text-transform:uppercase;
  color:rgba(248,243,233,.45);margin:0 0 var(--s4);font-weight:600}
.foot-col ul{list-style:none;padding:0;margin:0;display:grid;gap:var(--s3)}
.foot-col a{font-size:var(--fs-sm);color:rgba(248,243,233,.74);text-decoration:none}
.foot-col a:hover{color:var(--sig)}
.foot-legal{padding-top:var(--s8);display:grid;gap:var(--s5)}
.foot-legal p{font-size:var(--fs-xs);line-height:1.78;color:rgba(248,243,233,.5)}
.foot-legal strong{color:rgba(248,243,233,.82);font-weight:600}
.eho{display:flex;align-items:center;gap:var(--s3)}
.eho svg{flex:none;color:rgba(248,243,233,.7)}
.eho span{font-size:var(--fs-xs);color:rgba(248,243,233,.6)}
.placeholder{background:rgba(223,162,54,.20);border-bottom:1px dotted var(--sig);
  padding:0 4px;border-radius:3px;color:rgba(248,243,233,.9)}

.reveal{opacity:0;transform:translateY(16px);transition:opacity .6s,transform .6s cubic-bezier(.2,.8,.3,1)}
.reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .reveal{opacity:1;transform:none}
  .reveal,.ph img,.door,.opt,.sent.show{transition:none!important;animation:none!important;transform:none!important}
}

/* honeypot — visually and semantically hidden, still fillable by bots */
.hp{position:absolute!important;left:-9999px!important;width:1px;height:1px;overflow:hidden}

/* =========================================================
   PRINT
   The site had no print styles, and printing is not a fringe
   case here: a disclosure page is exactly the thing a consumer
   saves as a PDF or hands to an attorney.

   The footer is light text on a near-black ground. Browsers do
   not print background colours, so on paper it was rendering at
   1.06:1 — the Equal Housing statement, the licence line and the
   entire referral disclosure came out invisible. That is the
   reason this block exists.
   ========================================================= */

/* Net proceeds calculator on /sell. Inputs left, the running result right;
   the result card is sticky at desktop so the number stays in view while the
   seller edits the lines that feed it. Money inputs carry a $ or % in the box. */
.ns-band{background:var(--surface);border-block:1px solid var(--line)}
.ns-head{display:grid;gap:var(--s4);margin-bottom:var(--s8)}
@media (min-width:960px){.ns-head{grid-template-columns:1fr 1fr;gap:var(--s16);align-items:end}.ns-head .body-sm{max-width:44ch}}
.ns{display:grid;gap:var(--s8)}
@media (min-width:900px){.ns{grid-template-columns:1.05fr .95fr;gap:var(--s12);align-items:start}.ns-out{position:sticky;top:90px}}
@media (max-width:899px){.ns-out{order:-1}}
.ns-group{padding-block:var(--s5);border-top:1px solid var(--line);display:grid;gap:var(--s4)}
.ns-group:first-child{border-top:0;padding-top:0}
.ns-sub{font-size:var(--fs-sm);color:var(--mute);line-height:1.6;max-width:56ch}
.ns-row{display:grid;grid-template-columns:1fr 150px;gap:var(--s4);align-items:center}
@media (max-width:480px){.ns-row{grid-template-columns:1fr 128px}}
.ns-row label{font-size:var(--fs-sm);font-weight:600;line-height:1.35}
.ns-row label small{display:block;font-weight:400;font-size:var(--fs-xs);color:var(--mute-2);margin-top:2px}
.ns-field{position:relative}
.ns-field input{width:100%;font-family:inherit;font-variant-numeric:tabular-nums;font-size:var(--fs-md);text-align:right;
  padding:10px 12px;border:1px solid var(--line-2);border-radius:var(--rad-sm);background:var(--paper);color:var(--ink)}
.ns-field.usd input{padding-left:26px}
.ns-field.pct input{padding-right:30px}
.ns-field::before{position:absolute;top:50%;transform:translateY(-50%);font-size:var(--fs-sm);color:var(--mute-2);pointer-events:none}
.ns-field.usd::before{content:"$";left:11px}
.ns-field.pct::before{content:"%";right:11px}
.ns-field input:focus{outline:none;border-color:var(--sig);box-shadow:0 0 0 3px rgba(223,162,54,.22)}
.ns-out{background:var(--ink);color:var(--paper);border-radius:var(--rad-lg);padding:var(--s6);display:grid;gap:var(--s4)}
.ns-out .panel-title{color:var(--sig);margin:0}
.ns-net{font-family:var(--display);font-weight:var(--dw-strong);font-size:clamp(2.4rem,5vw,3.4rem);letter-spacing:-.03em;line-height:1;font-variant-numeric:tabular-nums}
.ns-net.negative{color:#F0B7A4}
.ns-short{font-size:var(--fs-sm);color:rgba(248,243,233,.8);line-height:1.6;background:rgba(181,103,76,.22);padding:var(--s3) var(--s4);border-radius:var(--rad-sm)}
.ns-short a{color:var(--paper)}
.ns-lines{margin:0;display:grid;gap:6px;font-size:var(--fs-sm)}
.ns-lines>div{display:flex;justify-content:space-between;gap:var(--s4);color:rgba(248,243,233,.78)}
.ns-lines dt,.ns-lines dd{margin:0}
.ns-lines dd{font-variant-numeric:tabular-nums}
.ns-lines .rule{border-top:1px solid rgba(248,243,233,.18);padding-top:6px;margin-top:2px;color:var(--paper)}
.ns-lines .total{font-weight:700}
.ns-out .btn{margin-top:var(--s2)}
.ns-disc{font-size:var(--fs-xs);color:rgba(248,243,233,.62);line-height:1.55}
.ns-disc strong{color:rgba(248,243,233,.85)}

@media print {
  @page { margin: 14mm; }

  html, body { background: #fff !important; color: #000; }

  /* Screen furniture that means nothing on paper. */
  .skip-link, .nav, .nav-drawer, .nav-toggle, .head-cta,
  .sticky-cta, .ahl-bubble, video, .ph { display: none !important; }

  /* The header stops floating and just prints once, at the top. */
  .site-head { position: static !important; backdrop-filter: none !important;
    background: transparent !important; border-bottom: 1px solid #999; }
  .head-in { height: auto; padding-block: 8px; }
  .brand-mark, .brand-mark span { color: #000 !important; }

  /* The whole point. Dark-ground text becomes black on white. */
  .site-foot { background: #fff !important; color: #000 !important;
    padding-block: 16px 0 !important; border-top: 1px solid #999; }
  .site-foot *, .foot-brand p, .foot-legal, .foot-legal p, .foot-col a,
  .foot-brand .brand-mark, .foot-brand .brand-mark span { color: #000 !important; }
  .foot-logo { display: none; }
  .foot-top { border-bottom: 1px solid #ccc; }

  /* Washes and tints do not print; give these visible edges instead. */
  .callout, .ahl-card { background: none !important; border: 1px solid #999;
    border-left: 3px solid #333 !important; border-radius: 0; }
  .eyebrow { background: none !important; padding-left: 0; color: #000; }
  .btn { display: none !important; }

  a { color: #000; text-decoration: underline; }
  /* Spell out destinations in the disclosure only. A printed disclosure that
     names Altitude should show where it points. Doing this for every link in
     main dragged a utm-laden HomeIQ URL through the body copy and cost more in
     legibility than it bought. */
  .site-foot a[href^="http"]::after {
    content: " (" attr(href) ")"; font-size: 10px; word-break: break-all;
  }

  /* Keep a disclosure or a callout from splitting across a page break. */
  .callout, .ahl-card, .foot-legal, .foot-legal p, li, figure { break-inside: avoid; }
  h1, h2, h3 { break-after: avoid; }
  .band { padding-block: 18px !important; }
}

/* Quiet legal block (New Home Sales): same text, smaller. */
.foot-legal-small p,.foot-legal-small .eho span{font-size:.7rem;line-height:1.5}
/* Altitude is an outside lender: blue, not the house gold. */
.door[data-ahl] .door-go{color:#2f6fd0}

@media (min-width:820px){.proof-grid.proof-grid-2{grid-template-columns:repeat(2,1fr)}}
.proof-grid-2 .ph.r-4-3{aspect-ratio:16/9;padding-bottom:0;height:auto}.proof-grid-2 .ph img{width:100%;height:100%;object-fit:cover}

/* Top bar: phone and social icons above the header on every page. */
.topbar{background:var(--ink);color:var(--paper);font-size:var(--fs-sm)}
.topbar-in{display:flex;align-items:center;justify-content:space-between;min-height:38px}
.topbar a{color:var(--paper);text-decoration:none}
.topbar a:hover{color:var(--sig)}
.topbar-phone{font-weight:600;letter-spacing:.01em}
.topbar-social,.foot-social{display:flex;align-items:center;gap:var(--s4)}
.topbar-social a,.foot-social a{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px}
.foot-social a{color:var(--paper)}
/* Brand switch [ Bey Group | MemberKey ] at the right end of the top bar (scripts/set-topbar.py, site.js
   "BRAND SWITCH"). Two equal segments, a marigold knob behind the active one. */
.topbar-in{gap:var(--s4)}
.topbar-social{margin-left:auto}
.brand-switch{position:relative;display:grid;grid-template-columns:1fr 1fr;flex:none;padding:2px;border-radius:99px;
  border:1px solid rgba(248,243,233,.22);background:rgba(248,243,233,.06)}
.bs-knob{position:absolute;top:2px;bottom:2px;left:2px;width:calc(50% - 2px);border-radius:99px;background:var(--sig);
  transition:transform .2s ease}
.brand-switch.is-bey .bs-knob{transform:translateX(0)}
.brand-switch.is-mk .bs-knob{transform:translateX(100%)}
.brand-switch .bs-seg{position:relative;z-index:1;display:inline-flex;align-items:center;justify-content:center;gap:6px;
  min-height:26px;padding:0 12px;border-radius:99px;font-size:var(--fs-xs);font-weight:600;letter-spacing:.01em;
  color:rgba(248,243,233,.62);text-decoration:none;white-space:nowrap;transition:color .2s ease}
.topbar .brand-switch .bs-seg:hover{color:var(--paper)}
.brand-switch .bs-seg[aria-current]{color:var(--ink)}
.topbar .brand-switch .bs-seg[aria-current]:hover{color:var(--ink)}
.brand-switch .bs-seg:focus-visible{outline:2px solid var(--paper);outline-offset:2px}
.brand-switch svg{flex:none}
/* The knob is mid-slide: both labels take the muted color until the page changes. */
.brand-switch.is-moving .bs-seg{color:rgba(248,243,233,.62)}
.brand-switch.is-moving .bs-seg.to{color:var(--ink)}
@media (max-width:639px){
  .brand-switch .bs-label{display:none}
  .brand-switch .bs-seg{padding:0 10px;min-width:38px}
  .topbar-in{gap:var(--s3)}
  .topbar-social{gap:var(--s2)}
}
@media (max-width:359px){
  .topbar-phone{font-size:.8rem}
  .topbar-in{gap:var(--s2)}
  .topbar-social{gap:2px}
  .brand-switch .bs-seg{padding:0 8px;min-width:34px}
}
@media (prefers-reduced-motion:reduce){.bs-knob,.brand-switch .bs-seg{transition:none}}

.foot-social a:hover{color:var(--sig)}
.foot-social-row{padding-bottom:var(--s5)}

.scope-list{margin:var(--s4) 0 0;padding-left:1.1em;color:var(--mute);font-size:var(--fs-sm);line-height:1.6}
.scope-list li{margin-bottom:.25em}
.scope-grid .pick p{margin-bottom:0}

@media (min-width:900px){
  .pick-grid.scope-grid{grid-template-columns:repeat(6,1fr)}
  .scope-grid .pick{grid-column:span 2}
  .scope-grid .pick:nth-child(n+4){grid-column:span 3}
}

/* Scope cards: photo first, the detail opens on hover like the other door cards. */
.door-more p{margin:0 0 var(--s3)}
.door .scope-list{margin:0;padding-left:1.1em;font-size:var(--fs-sm);line-height:1.5}
@media (min-width:900px) and (hover:hover){
  .door .door-more{color:rgba(248,243,233,.92);max-height:0;opacity:0;overflow:hidden;transition:max-height .45s cubic-bezier(.2,.7,.3,1),opacity .3s}
  .door:hover .door-more,.door:focus-visible .door-more{max-height:30em;opacity:1}
  .door .door-more p{max-height:none;opacity:1;font-size:var(--fs-sm)}
  .door .scope-list{color:rgba(248,243,233,.92)}
}

.scope-fold{border-top:1px solid var(--line)}
.scope-fold .door-grid{margin-top:var(--s6);margin-bottom:var(--s6)}

/* Section titles: one line across the full width, no side subtext (owner, 2026-10-09) */
.doors-head{grid-template-columns:1fr !important;gap:var(--s3)}
.doors-head h1,.doors-head h2{font-size:clamp(1.9rem,3.9vw,3.4rem);font-weight:700;letter-spacing:-.025em;line-height:1.08;max-width:none;text-wrap:nowrap;color:var(--ink,inherit)}
.doors-head h1::after,.doors-head h2::after{content:"";display:block;width:64px;height:4px;border-radius:2px;background:var(--sig);margin-top:var(--s4)}
@media (max-width:959px){.doors-head h1,.doors-head h2{text-wrap:balance}}

/* Compact footer (scripts/set-footer.py) */
.foot-bar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--s5) var(--s8);padding-bottom:var(--s6);border-bottom:1px solid rgba(248,243,233,.14)}
.foot-bar .foot-logo{width:170px}
.foot-links{display:flex;flex-wrap:wrap;gap:var(--s2) var(--s6)}
.foot-links a,.foot-contact a{font-size:var(--fs-sm);color:rgba(248,243,233,.8);text-decoration:none}
.foot-links a:hover,.foot-contact a:hover{color:var(--sig)}
.foot-contact{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s2) var(--s5)}
.foot-contact .foot-social a{color:var(--paper)}
.foot-id{margin:var(--s5) 0 0;font-size:var(--fs-xs);line-height:1.7;color:rgba(248,243,233,.6)}
.foot-id strong{color:rgba(248,243,233,.9);font-weight:600}
.foot-id a{color:inherit}
.foot-copy{white-space:nowrap;margin-left:var(--s3);opacity:.8}
.foot-disc{margin-top:var(--s4);border:0}
.foot-disc summary{display:inline-block;padding:var(--s2) 0;font-size:var(--fs-xs);font-weight:600;color:rgba(248,243,233,.6);letter-spacing:.04em;cursor:pointer}
.foot-disc summary:hover{background:none;color:var(--sig)}
.foot-disc[open] summary{color:var(--sig)}
.foot-disc .foot-legal{padding-top:var(--s4)}
@media (max-width:700px){
  .foot-bar{flex-direction:column;align-items:flex-start}
  .foot-links{display:grid;grid-template-columns:1fr 1fr;width:100%}
  .foot-contact{flex-direction:column;align-items:flex-start}
}

/* New Home Sales: text-only hero, cards pulled up under it (owner, 2026-10-09) */
.lp-hero-solo{padding-bottom:var(--s8)}
.lp-hero-solo .lp-hero-grid{grid-template-columns:1fr}
.lp-hero-solo h1{max-width:none;font-size:clamp(2.2rem,4.6vw,3.8rem);line-height:1.06}
.lp-hero-solo .lede{max-width:62ch}
.band-up{padding-top:var(--s6)}
.hero-second{border-width:2px;border-color:var(--ink);font-weight:700}
.hero-second:hover{background:var(--ink);color:var(--paper)}

/* Booking (booking.js, /talk). Hidden until /api/book answers. */
.book{max-width:860px}
.book-days{display:flex;gap:var(--s2);overflow-x:auto;padding:var(--s2) 0 var(--s3);margin-top:var(--s4);scrollbar-width:thin}
.book-day{flex:0 0 auto;display:flex;flex-direction:column;align-items:center;min-width:64px;padding:var(--s2) var(--s3);border:1px solid var(--line-2);border-radius:var(--rad);background:var(--surface);color:var(--ink);cursor:pointer;font:inherit}
.book-dow{font-size:var(--fs-xs);letter-spacing:.08em;text-transform:uppercase;color:var(--mute)}
.book-dom{font-weight:700;font-size:var(--fs-sm)}
.book-day.on,.book-day:hover{border-color:var(--ink);background:var(--ink);color:var(--paper)}
.book-day.on .book-dow,.book-day:hover .book-dow{color:rgba(248,243,233,.75)}
.book-times{display:grid;grid-template-columns:repeat(auto-fill,minmax(112px,1fr));gap:var(--s2);margin-top:var(--s3)}
.book-time{display:flex;flex-direction:column;align-items:center;gap:2px;padding:var(--s3) var(--s2);border:1px solid var(--line-2);border-radius:var(--rad);background:var(--surface);color:var(--ink);font:inherit;font-weight:600;cursor:pointer;min-height:48px}
.book-time small{font-size:.68rem;font-weight:500;color:var(--mute);letter-spacing:.04em}
.book-time.is-request{border-style:dashed}
.book-time:hover,.book-time.on{border-color:var(--sig);background:var(--sig);color:var(--ink)}
.book-time.on small,.book-time:hover small{color:var(--ink)}
.book-form{margin-top:var(--s6)}
.book-when{margin-bottom:var(--s4);font-size:var(--fs-md)}
.book-err{color:var(--clay-deep,#8a4632);min-height:1.2em}
.book-done{margin-top:var(--s5);padding:var(--s6);border:1px solid var(--line);border-radius:var(--rad);background:var(--surface)}
@media (max-width:520px){.book-times{grid-template-columns:repeat(3,1fr)}}
#book[hidden],.book [hidden]{display:none !important}

/* Footer v2: three rows (logo + links / license + contact / copyright + disclosures) */
.foot-top2{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--s5) var(--s8);padding-bottom:var(--s6)}
.foot-top2 .foot-logo{width:170px}
.foot-mid{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--s4) var(--s8);padding-block:var(--s5);border-top:1px solid rgba(248,243,233,.14)}
.foot-mid .foot-id{margin:0;max-width:60ch}
.foot-mid .foot-contact{justify-content:flex-end}
.foot-copyline,.foot-disc summary{margin:0;font-size:var(--fs-xs);color:rgba(248,243,233,.55)}
.foot-disc{margin:0;border-top:1px solid rgba(248,243,233,.14)}
.foot-disc summary{display:block;padding:var(--s4) 0;letter-spacing:.02em}
.foot-disc-link{color:rgba(248,243,233,.85);text-decoration:underline;text-underline-offset:3px}
.foot-disc summary:hover .foot-disc-link,.foot-disc[open] .foot-disc-link{color:var(--sig)}
.foot-copyline{padding-top:var(--s4);border-top:1px solid rgba(248,243,233,.14)}
@media (max-width:700px){.foot-top2{flex-direction:column;align-items:flex-start}.foot-mid{flex-direction:column;align-items:flex-start}.foot-mid .foot-contact{justify-content:flex-start}}
/* Back link under the header on sub-pages */
.crumb{padding-top:var(--s5)}
.crumb a{display:inline-flex;align-items:center;gap:var(--s2);font-size:var(--fs-sm);font-weight:600;color:var(--deeper);text-decoration:none;padding:var(--s2) 0}
.crumb a:hover{color:var(--ink)}

/* Agent portal */
.portal-card{max-width:560px}
.portal-expired{padding:var(--s3) var(--s4);margin-bottom:var(--s4);border-radius:var(--rad-sm,8px);background:var(--clay-soft,#f6e4dc);color:var(--clay-deep,#8a4632);font-size:var(--fs-sm)}
.portal-msg{margin-top:var(--s4);font-size:var(--fs-sm);color:var(--deeper)}
.portal-bar{display:flex;align-items:center;justify-content:space-between;gap:var(--s4);margin-bottom:var(--s5);font-size:var(--fs-sm);color:var(--mute)}
.portal-signout{background:none;border:0;padding:var(--s2) 0;font:inherit;font-weight:600;color:var(--deeper);text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.pbuyer{background:var(--surface);border:1px solid var(--line);border-radius:var(--rad);padding:var(--s6);margin-bottom:var(--s5);max-width:860px}
.pbuyer-head{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--s3)}
.pbuyer-head h2{font-size:var(--fs-lg);margin:0}
.pstage{padding:var(--s1) var(--s3);border-radius:999px;background:var(--sig);color:var(--ink);font-size:var(--fs-xs);font-weight:700;letter-spacing:.04em}
.pstage.is-done{background:#2f6b4f;color:#fff}.pstage.is-lost{background:var(--soft);color:var(--mute)}
.pmeta{margin:var(--s2) 0 var(--s5);font-size:var(--fs-sm);color:var(--mute)}
.ptrack{display:flex;list-style:none;margin:0 0 var(--s5);padding:0}
.ptrack li{flex:1 1 0;position:relative;display:flex;flex-direction:column;align-items:center;gap:var(--s2);text-align:center;font-size:.72rem;color:var(--mute-2,#8c857b);min-width:0}
.ptrack li::before{content:"";position:absolute;top:9px;left:-50%;width:100%;height:2px;background:var(--line-2,#d8d0c4);z-index:0}
.ptrack li:first-child::before{display:none}
.pdot{position:relative;z-index:1;width:20px;height:20px;border-radius:50%;background:var(--surface);border:2px solid var(--line-2,#d8d0c4)}
.ptrack li.done .pdot{background:var(--sig);border-color:var(--sig)}
.ptrack li.done::before,.ptrack li.current::before{background:var(--sig)}
.ptrack li.current .pdot{border-color:var(--sig);box-shadow:0 0 0 4px rgba(223,162,54,.25)}
.ptrack li.done,.ptrack li.current{color:var(--ink);font-weight:600}
.ptimeline{list-style:none;margin:0;padding:var(--s4) 0 0;border-top:1px solid var(--line);display:grid;gap:var(--s2);font-size:var(--fs-sm)}
.ptimeline li{display:flex;gap:var(--s4)}
.pwhen{flex:0 0 7.5em;color:var(--mute)}
.pnote{margin-top:var(--s4);padding:var(--s3) var(--s4);border-radius:var(--rad-sm,8px);background:var(--soft);font-size:var(--fs-sm)}
@media (max-width:520px){.pbuyer{padding:var(--s5) var(--s4)}.ptrack li{font-size:.6rem;padding:0 1px;letter-spacing:-.01em}.pwhen{flex-basis:6.5em}}

/* /referral-network: what it costs + FAQ */
.cost-tiles{display:grid;grid-template-columns:1fr 1fr;gap:var(--s4)}
@media (min-width:900px){.cost-tiles{grid-template-columns:repeat(4,1fr)}}
.cost-tile{background:var(--surface);border:1px solid var(--line);border-radius:var(--rad);padding:var(--s6) var(--s5);display:flex;flex-direction:column;gap:var(--s3)}
.cost-n{font-family:var(--display);font-weight:700;font-size:clamp(1.7rem,3vw,2.4rem);letter-spacing:-.02em;line-height:1;color:var(--ink)}
.cost-l{font-size:var(--fs-sm);color:var(--mute);line-height:1.5}
.faq-lead{margin:var(--s10) 0 var(--s4);font-weight:700;font-size:var(--fs-md)}
.faq-req{margin:0;padding-left:1.1em;display:grid;gap:var(--s3)}

/* Tap targets on phones: 44px minimum for the top bar, footer links and the consent box.
   Glyphs and type sizes are unchanged; only the area that responds to a thumb grows. */
@media (max-width:899px){
  .topbar-phone{display:inline-flex;align-items:center;min-height:44px}
  .topbar-social,.foot-social{gap:0}
  .topbar-social a,.foot-social a{width:44px;height:44px;margin-block:-3px}
  .foot-social a{margin-block:0}
  .foot-links{gap:0 var(--s6)}
  .foot-links a,.foot-contact a{display:inline-flex;align-items:center;min-height:44px}
  .foot-contact{gap:0 var(--s5)}
  .brand{padding-block:5px;margin-block:-5px}
  .foot-brandlink{display:inline-block;padding-block:5px}
  .consent{grid-template-columns:28px 1fr}
  .consent input{width:24px;height:24px;margin-top:0}
}

/* MemberKey: a site inside the site. The Bey Group logo is the brand (the parent); MemberKey is the subtext under it. */
.mk-brand{display:flex;flex-direction:column;align-items:flex-start;gap:5px;padding-block:9px;color:var(--ink);text-decoration:none;min-width:0}
.mk-brand .brand-logo{width:196px}
@media (max-width:899px){.mk-brand .brand-logo{width:176px}}
@media (max-width:599px){.mk-brand .brand-logo{width:150px}}
.mk-sub{font-family:var(--display);font-weight:600;font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--deeper);line-height:1}
.mk-foot-brand{display:flex;flex-direction:column;align-items:flex-start;gap:6px;text-decoration:none}
.mk-foot-brand .mk-sub{color:var(--sig)}
.nav a[aria-current="page"]{color:var(--deeper);text-decoration:underline;text-underline-offset:6px;text-decoration-thickness:2px}

/* Slim phone layout (owner approved 2026-10-09, "so much better"). Phones only; desktop and tablet are untouched.
   Cards become two-across photo tiles with the title on the photo and the description opening on tap, section
   padding drops from 64px to 40px, and form pages get tighter fields. Link cards (a.door) go straight to their
   page on tap, so they show the title only. */
@media (max-width:659px){
 .band{padding-block:var(--s10)}
 .lp-hero{padding-block:var(--s8)}
 .doors-head{margin-bottom:var(--s5)}
 .door-grid,.door-grid.door-grid-3,.door-grid.door-grid-4{grid-template-columns:1fr 1fr;gap:var(--s3)}
 .door{display:grid;grid-template-columns:minmax(0,1fr);flex-direction:initial;border-color:transparent;min-width:0}
 .door::before{content:"";grid-area:1/1;aspect-ratio:1/1.1;width:100%}
 .door figure.ph{grid-area:1/1;flex:none;width:100%;max-width:100%;min-width:0;height:100%;aspect-ratio:auto}
 .door figure.ph img{position:absolute;inset:0}
 .door-body{grid-area:1/1;align-self:end;position:relative;z-index:3;gap:var(--s1);padding:var(--s12) var(--s3) var(--s3);background:linear-gradient(to top,rgba(30,26,22,.94) 0%,rgba(30,26,22,.8) 55%,rgba(30,26,22,0) 100%)}
 .door h3{color:var(--paper);font-size:var(--fs-sm);line-height:1.25}
 .door p,.door .door-more{display:none;color:rgba(248,243,233,.92);font-size:var(--fs-sm)}
 .door:focus p,.door:focus .door-more{display:block}
 .door:focus{grid-column:1/-1}
 .door:last-child:nth-child(odd){grid-column:1/-1}
 .door:last-child:nth-child(odd)::before{aspect-ratio:16/9}
 .door-go{display:none}
}

/* Form pages: <body class="form-page">. Register a buyer and Join the team also carry form-page-lead, which
   hides the hero photo on phones so the form starts sooner. */
@media (max-width:659px){
 .form-page .lp-hero{padding-block:var(--s6)}
 .form-page .lp-hero h1{font-size:1.9rem}
 .form-page .lp-hero .lede{font-size:1.02rem;line-height:1.5}
 .form-page .lp-badges,.form-page .hero-trust{display:none}
 .form-page .form-card{padding:var(--s5) var(--s4)}
 .form-page .form-intro{margin-bottom:var(--s4)}
 .form-page .field{margin-bottom:var(--s3)}
 .form-page .field label{margin-bottom:var(--s1)}
 .form-page .field input,.form-page .field select{min-height:46px}
 .form-page .field textarea{min-height:76px}
 .form-page input[type=file]{width:100%;padding:8px}
 .form-page input[type=file]::file-selector-button{font:inherit;font-weight:600;background:var(--soft);border:1px solid var(--line);border-radius:6px;padding:8px 12px;margin-right:10px}
 .form-page .form-foot{margin-top:var(--s3)}
}
@media (max-width:659px){.form-page-lead .lp-hero .ph{display:none}}


/* MemberKey header buttons carry longer labels; on narrow phones the drawer already holds the button, so the header keeps the logo and menu on screen. */
@media (max-width:520px){.head-in:has(.mk-brand) .head-cta{display:none}}

/* MemberKey sample report */
.stat{background:var(--surface);border:1px solid var(--line);border-radius:var(--rad-lg);padding:var(--s5)}
.stat .n{font-family:var(--display);font-size:var(--fs-xl,2rem);font-weight:600;line-height:1.1;color:var(--ink)}
.stat .l{font-size:var(--fs-xs);color:var(--mute);margin-top:var(--s2)}
.mk-table{width:100%;border-collapse:collapse;font-size:var(--fs-sm)}
.mk-table th,.mk-table td{padding:var(--s3) var(--s4);text-align:right;border-bottom:1px solid var(--line);white-space:nowrap}
.mk-table th:first-child,.mk-table td:first-child{text-align:left}
.mk-table th{font-size:var(--fs-xs);color:var(--mute);font-weight:700}

/* Link-in-bio pages: /links (@beygrouprealestate) and /jay (@jaybeyre). One narrow column of large tap
   targets for Instagram traffic; noindex and out of the sitemap. Every link carries data-track, which
   analytics.js records as a "Link click" event. Tiles reuse .door, so phones get the approved photo tiles. */
.bio{max-width:600px;margin-inline:auto}
.bio-head{text-align:center;margin-bottom:var(--s8)}
.bio-mark{width:76px;height:auto;margin:0 auto var(--s4)}
.bio-avatar{width:104px;height:104px;border-radius:50%;object-fit:cover;margin:0 auto var(--s4);box-shadow:var(--shadow)}
.bio-head h1{font-size:var(--fs-xl);text-wrap:balance}
.bio-role{margin-top:var(--s2);font-weight:700;color:var(--ink)}
.bio-sub{margin-top:var(--s1);font-size:var(--fs-sm);color:var(--mute);line-height:1.55}
.bio-main{width:100%;min-height:60px}
.bio-note{margin-top:var(--s2);text-align:center;font-size:var(--fs-sm);color:var(--mute)}
.bio-label{margin:var(--s10) 0 var(--s4);font-family:var(--display);font-size:var(--fs-xs);letter-spacing:.14em;
  text-transform:uppercase;font-weight:600;color:var(--mute)}
.bio-list{display:grid;gap:var(--s3)}
.bio-list .btn{width:100%;min-height:56px;justify-content:space-between;text-align:left}
.bio-list .btn-ghost{background:var(--surface)}
.bio-list .btn-ghost:hover{background:var(--soft)}
@media (min-width:660px){.bio .door-grid{grid-template-columns:repeat(3,1fr)}}
.bio .door-grid.bio-one{grid-template-columns:1fr}
.bio-one .door::before{aspect-ratio:16/9}
.bio-one .door .ph.r-4-3{aspect-ratio:16/9}
.bio-legal{margin-top:var(--s10);padding-top:var(--s6);border-top:1px solid var(--line);font-size:var(--fs-xs);
  color:var(--mute);line-height:1.7;text-align:center}
.bio-legal p+p{margin-top:var(--s3)}


/* Homebuyer event (Menifee, Sat Nov 14 2026). TEMPORARY: the card on /links and the band on the home page
   both carry data-ends, and site.js hides them once that moment passes. Delete the markup and these rules
   after the event. Button is orange at the owner's direction (10-13), outside the marigold palette. */
.btn-event{background:#F5821F;color:#1F1409;box-shadow:none}
.btn-event:hover{filter:brightness(1.06)}
.event-card{display:block;margin-bottom:var(--s8);padding:var(--s6);border:1.5px solid var(--sig);border-radius:var(--r-lg,16px);
  background:var(--surface);text-decoration:none;color:var(--ink)}
.event-kicker{display:block;font-family:var(--display);font-size:var(--fs-xs);letter-spacing:.14em;text-transform:uppercase;
  font-weight:600;color:var(--deeper)}
.event-title{display:block;margin-top:var(--s2);font-family:var(--display);font-size:var(--fs-lg);font-weight:var(--dw-strong);line-height:1.2}
.event-sub{display:block;margin-top:var(--s1);font-size:var(--fs-sm);color:var(--mute);line-height:1.5}
.event-card .btn{margin-top:var(--s4)}
.event-band{background:var(--ink);color:var(--paper);overflow:hidden}
.event-band-in{display:flex;align-items:center;gap:var(--s4);padding-block:var(--s2)}
.event-marquee{flex:1;min-width:0;overflow:hidden;color:inherit;text-decoration:none;font-size:var(--fs-sm);line-height:1.4;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.event-track{display:flex;width:max-content;animation:event-scroll 32s linear infinite}
.event-marquee:hover .event-track,.event-band:focus-within .event-track{animation-play-state:paused}
.event-half{display:flex;flex:none;white-space:nowrap}
.event-rep{display:inline-block;padding-right:var(--s6)}
.event-rep strong{font-family:var(--display);font-weight:var(--dw-strong)}
.event-rep i{font-style:normal;color:var(--sig);margin-inline:var(--s2)}
.event-band .btn{flex:none;white-space:nowrap;min-height:40px;padding-block:var(--s2)}
@keyframes event-scroll{to{transform:translateX(-50%)}}
@media (max-width:520px){.event-long{display:none}}
@media (prefers-reduced-motion:reduce){
  .event-track{animation:none;width:auto;display:block}
  .event-marquee{-webkit-mask-image:none;mask-image:none}
  .event-half{display:block}
  .event-dup,.event-half .event-rep+.event-rep,.event-opt,.event-end{display:none}
  .event-half,.event-rep{white-space:normal}
}
[data-ends][hidden]{display:none !important}
.bio-after{margin-top:var(--s8)}