/* ==========================================================================
   Texas New Home Rewards
   Powered by Pipeline Concierge

   Brand system inherited from Pipeline Concierge:
     Navy      #1F2D4A     Champagne #B39B72
     Deep gold #7D6740     Parchment #F2ECE0     Page #F9F7F3
     Display: Cormorant Garamond    Text: Inter    Buttons: pill
   ========================================================================== */

:root{
  color-scheme:light;
  --navy:        #1F2D4A;
  --navy-deep:   #16213A;
  --navy-soft:   #34456B;
  --navy-70:     rgba(31,45,74,.70);
  --navy-55:     rgba(31,45,74,.55);
  --navy-12:     rgba(31,45,74,.12);
  --navy-08:     rgba(31,45,74,.08);

  --champagne:   #B39B72;
  --champagne-l: #C9B492;
  --gold-deep:   #7D6740;

  --parchment:   #F2ECE0;
  --page:        #F9F7F3;
  --paper:       #FFFFFF;

  --line:        rgba(31,45,74,.13);
  --line-soft:   rgba(31,45,74,.07);
  --line-dark:   rgba(242,236,224,.16);
  --cream-70:    rgba(242,236,224,.70);
  --cream-55:    rgba(242,236,224,.55);

  --display: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --sans:    "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;

  --wrap: 1200px;
  --pill: 999px;
  --r:    4px;
  --shadow:    0 1px 2px rgba(31,45,74,.04), 0 12px 32px rgba(31,45,74,.06);
  --shadow-lg: 0 2px 6px rgba(31,45,74,.05), 0 30px 70px rgba(31,45,74,.12);
}

*,*::before,*::after{ box-sizing:border-box }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth }
body{
  margin:0; background:var(--page); color:var(--navy);
  font-family:var(--sans); font-size:17px; font-weight:400; line-height:1.7;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
}
img{ max-width:100%; display:block }
a{ color:var(--navy); text-decoration:none }

/* ---------- Layout ---------- */
.wrap{ width:100%; max-width:var(--wrap); margin:0 auto; padding:0 32px }
.wrap-narrow{ max-width:820px }
.wrap-mid{ max-width:1000px }
section{ padding:112px 0 }
section.tight{ padding:76px 0 }
.on-navy{ background:var(--navy); color:var(--parchment) }
.on-parchment{ background:var(--parchment) }
.on-paper{ background:var(--paper) }

/* ---------- Type ---------- */
h1,h2,h3,h4{ font-family:var(--display); color:var(--navy); font-weight:600;
  line-height:1.06; letter-spacing:-.025em; margin:0 0 .42em }
h1{ font-size:clamp(3rem,6.4vw,5rem) }
h2{ font-size:clamp(2.3rem,4.4vw,3.5rem) }
h3{ font-size:1.5rem; line-height:1.2; letter-spacing:-.015em }
h4{ font-size:1.18rem; letter-spacing:-.01em }
.on-navy h1,.on-navy h2,.on-navy h3,.on-navy h4{ color:var(--parchment) }
.italic{ font-style:italic; font-weight:500 }
p{ margin:0 0 1.15em; color:var(--navy-70) }
.on-navy p{ color:var(--cream-70) }
.lede{ font-size:1.2rem; line-height:1.68; color:var(--navy-70); max-width:60ch; font-weight:400 }
.on-navy .lede{ color:var(--cream-70) }
.eyebrow{ display:block; font:500 .7rem/1 var(--sans); letter-spacing:.24em;
  text-transform:uppercase; color:var(--gold-deep); margin:0 0 22px }
.on-navy .eyebrow{ color:var(--champagne) }
.center{ text-align:center }
.center .lede{ margin-left:auto; margin-right:auto }
.small{ font-size:.9rem; line-height:1.65 }
.fine{ font-size:.78rem; line-height:1.7; color:var(--navy-55) }
.on-navy .fine{ color:var(--cream-55) }
.section-head{ max-width:66ch; margin-bottom:62px }
.section-head.center{ margin-left:auto; margin-right:auto }
strong{ font-weight:600; color:var(--navy) }
.on-navy strong{ color:var(--parchment) }
.rule{ width:54px; height:1px; background:var(--champagne); border:0; margin:0 0 30px }
.center .rule{ margin-left:auto; margin-right:auto }

/* ---------- Buttons ---------- */
.btn{ display:inline-flex; align-items:center; justify-content:center; gap:.6em;
  font:500 .95rem/1 var(--sans); letter-spacing:.01em; padding:17px 32px;
  border-radius:var(--pill); border:1px solid transparent; cursor:pointer;
  transition:background .2s ease, color .2s ease, border-color .2s ease, transform .2s ease;
  white-space:nowrap }
.btn-gold{ background:var(--champagne); color:#fff }
.btn-gold:hover{ background:var(--gold-deep); transform:translateY(-1px) }
.btn-navy{ background:var(--navy); color:var(--parchment) }
.btn-navy:hover{ background:var(--navy-deep); transform:translateY(-1px) }
.btn-line{ background:transparent; color:var(--navy); border-color:var(--navy-12) }
.btn-line:hover{ border-color:var(--champagne); color:var(--gold-deep) }
.on-navy .btn-line,.hero .btn-line{ color:var(--parchment); border-color:var(--line-dark) }
.on-navy .btn-line:hover,.hero .btn-line:hover{ border-color:var(--champagne); color:var(--champagne-l) }
.btn-row{ display:flex; flex-wrap:wrap; gap:14px; margin-top:38px }
.center .btn-row{ justify-content:center }
.link-gold{ display:inline-flex; align-items:center; gap:.5em; font-weight:500; font-size:.94rem;
  color:var(--gold-deep); border-bottom:1px solid rgba(179,155,114,.4); padding-bottom:2px }
.link-gold:hover{ color:var(--navy); border-color:var(--navy) }
.on-navy .link-gold{ color:var(--champagne) }
.on-navy .link-gold:hover{ color:var(--parchment); border-color:var(--parchment) }

/* ---------- Top bars ---------- */
.bar{ background:var(--navy-deep); color:var(--cream-70); font-size:.82rem;
  text-align:center; padding:12px 32px; letter-spacing:.015em }
.bar strong{ color:var(--parchment); font-weight:500 }
.bar a{ color:var(--champagne); border-bottom:1px solid rgba(179,155,114,.45) }
.bar a:hover{ color:var(--parchment); border-color:var(--parchment) }

/* ---------- Header ---------- */
.site-head{ position:sticky; top:0; z-index:60; background:rgba(249,247,243,.88);
  backdrop-filter:saturate(180%) blur(14px); border-bottom:1px solid var(--line-soft) }
.nav{ display:flex; align-items:center; gap:26px; height:84px; flex-wrap:nowrap }
.brand{ display:flex; flex-direction:column; align-items:flex-start; gap:0;
  margin-right:auto; flex:none; line-height:1; text-decoration:none }
/* Header lockup: the program's own mark, then the sponsoring broker's logo.
   The footer credits Pipeline Concierge separately (see .foot-parent). */
.brand{ flex-direction:row; align-items:center; gap:16px }
.brand-tnhr{ display:flex; flex-direction:column; align-items:flex-start }
.brand-eyebrow{ display:block; font:500 .6rem/1 var(--sans); letter-spacing:.3em;
  text-transform:uppercase; color:var(--gold-deep); margin-bottom:7px; white-space:nowrap }
.brand-word{ display:block; font-family:var(--display); font-weight:600; font-size:1.62rem;
  letter-spacing:-.02em; line-height:.92; color:var(--navy); white-space:nowrap; transition:color .2s ease }
.brand-rule{ width:1px; height:38px; background:rgba(179,155,114,.6); flex:none }
/* Sponsoring broker's logo: eXp's own navy, shown at its natural proportions. */
.brand-broker{ display:block; height:30px; width:auto; flex:none }
.brand:hover .brand-word{ color:var(--gold-deep) }

/* Footer: brand block, then Pipeline Concierge as a quiet endorsement
   underneath (monogram + name, the way Pipeline Concierge shows its own logo). */
.site-foot .brand{ display:inline-flex }
.site-foot .brand-eyebrow{ color:var(--champagne) }
.site-foot .brand-word{ color:var(--parchment) }
.site-foot .brand:hover .brand-word{ color:var(--champagne) }
.foot-parent{ display:block; width:fit-content; min-width:220px; margin-top:26px; padding-top:22px; border-top:1px solid var(--line-dark);
  max-width:320px }
.foot-parent-label{ display:block; font:500 .6rem/1 var(--sans); letter-spacing:.22em;
  text-transform:uppercase; color:var(--cream-55); margin-bottom:12px }
.foot-parent-mark{ display:flex; align-items:center; gap:11px }
.foot-parent-mark img{ width:28px; height:28px; flex:none }
.foot-parent-mark b{ font-family:var(--display); font-size:1.2rem; font-weight:600;
  letter-spacing:-.01em; color:var(--parchment); transition:color .2s ease }
.foot-parent:hover .foot-parent-mark b{ color:var(--champagne) }
.nav-links{ display:flex; align-items:center; gap:24px; list-style:none; margin:0; padding:0; flex:none }
.nav-links a{ font-size:.93rem; font-weight:400; color:var(--navy-70); white-space:nowrap }
.nav-links a:hover{ color:var(--gold-deep) }
.nav-links a[aria-current="page"]{ color:var(--navy); font-weight:500 }
.soon{ display:inline-flex; align-items:center; gap:8px; font-size:.93rem; color:var(--navy-55);
  cursor:default; white-space:nowrap }
.soon b{ font:500 .54rem/1 var(--sans); letter-spacing:.12em; text-transform:uppercase;
  background:var(--parchment); color:var(--gold-deep); padding:5px 7px; border-radius:var(--pill) }
.nav-cta{ display:flex; align-items:center; gap:16px; flex:none }
.cta-short{ display:none }
.nav-toggle{ display:none; background:none; border:1px solid var(--navy-12); border-radius:var(--pill);
  width:44px; height:44px; cursor:pointer; align-items:center; justify-content:center }
.nav-toggle span{ display:block; width:18px; height:1px; background:var(--navy); position:relative }
.nav-toggle span::before,.nav-toggle span::after{ content:""; position:absolute; left:0;
  width:18px; height:1px; background:var(--navy) }
.nav-toggle span::before{ top:-6px } .nav-toggle span::after{ top:6px }

/* ---------- Hero ---------- */
.hero{ position:relative; background:var(--navy-deep); color:var(--parchment);
  overflow:hidden; padding:118px 0 124px }
.hero-bg{ position:absolute; inset:0; z-index:0 }
.hero-bg img{ width:100%; height:100%; object-fit:cover; opacity:.30 }
.hero-bg::after{ content:""; position:absolute; inset:0;
  background:linear-gradient(104deg, rgba(22,33,58,.96) 0%, rgba(22,33,58,.82) 46%, rgba(22,33,58,.42) 100%) }
.hero .wrap{ position:relative; z-index:1 }
.hero h1{ max-width:14ch }
.hero .lede{ font-size:1.26rem; max-width:52ch }
.hero-grid{ display:grid; grid-template-columns:1.02fr .98fr; gap:72px; align-items:center }
.hero-sub{ padding:92px 0 96px }
.hero-sub h1{ max-width:18ch }

/* ---------- Launch film (homepage, full width under the hero) ----------
   Full-bleed and uncropped: edge to edge at the film's own aspect ratio so no
   part of the frame is ever trimmed. Loaded and played by the ad-film code in
   site.js (data-ad), so it only downloads as it nears the screen. */
.hero-film{ position:relative; background:#EFE9DD; aspect-ratio:16/9 }
.film-frame{ position:absolute; inset:0 }
.film{ display:block; width:100%; height:100%; object-fit:cover }
.film-toggle{ position:absolute; right:20px; bottom:20px; width:44px; height:44px;
  border-radius:50%; border:0; cursor:pointer; display:grid; place-items:center;
  background:rgba(22,33,58,.72); color:#fff; opacity:.75; transition:opacity .2s }
.film-toggle:hover,.film-toggle:focus-visible{ opacity:1 }
.film-toggle svg{ width:18px; height:18px; fill:currentColor }
.film-toggle .i-play{ display:none }
.film-toggle.is-paused .i-play{ display:block }
.film-toggle.is-paused .i-pause{ display:none }
@media (max-width:640px){
  .hero-film{ aspect-ratio:9/16 }
  .film-toggle{ right:14px; bottom:14px }
}

/* ---------- Trust strip ---------- */
.trust{ border-top:1px solid var(--line-dark); margin-top:64px; padding-top:36px;
  display:grid; grid-template-columns:repeat(4,1fr); gap:34px }
.trust div{ font-size:.84rem; line-height:1.55; color:var(--cream-55) }
.trust b{ display:block; font-family:var(--display); font-size:2.1rem; font-weight:600;
  letter-spacing:-.02em; color:var(--parchment); margin-bottom:6px; line-height:1 }

/* ---------- Grids and cards ---------- */
.grid{ display:grid; gap:30px }
.g2{ grid-template-columns:repeat(2,1fr) }
.g3{ grid-template-columns:repeat(3,1fr) }
.g4{ grid-template-columns:repeat(4,1fr) }
.split{ display:grid; grid-template-columns:1fr 1fr; gap:76px; align-items:center }
.split-wide{ grid-template-columns:1.12fr .88fr }

.card{ background:var(--paper); border:1px solid var(--line-soft); border-radius:var(--r); padding:40px 36px }
.card.plain{ background:transparent; border:0; border-top:1px solid var(--line); border-radius:0;
  padding:30px 0 0 }
.card h3{ margin-bottom:.5em }
.card p:last-child{ margin-bottom:0 }
.card-no{ font-family:var(--display); font-size:1.1rem; font-weight:600; color:var(--champagne);
  letter-spacing:.02em; display:block; margin-bottom:16px }

/* ---------- Figures ---------- */
figure{ margin:0 }
.fig{ position:relative; border-radius:var(--r); overflow:hidden; background:var(--navy) }
.fig img{ width:100%; height:100%; object-fit:cover }
.fig-tall img{ aspect-ratio:4/5 }
.fig-wide img{ aspect-ratio:16/10 }
.fig-square img{ aspect-ratio:1/1 }
.fig-cap{ position:absolute; left:0; right:0; bottom:0; padding:28px 30px;
  background:linear-gradient(transparent, rgba(22,33,58,.88)); color:var(--parchment) }
.fig-cap p{ margin:0; color:var(--cream-70); font-size:.86rem; line-height:1.5 }
.fig-cap strong{ display:block; font-family:var(--display); font-size:1.25rem; font-weight:600;
  color:var(--parchment); letter-spacing:-.015em; margin-bottom:4px }
.fig-frame{ position:relative }
.fig-frame::before{ content:""; position:absolute; inset:18px -18px -18px 18px;
  border:1px solid var(--champagne); border-radius:var(--r); z-index:0; opacity:.55 }
.fig-frame .fig{ position:relative; z-index:1 }

/* ---------- Band (full-bleed image with copy) ---------- */
.band{ position:relative; padding:130px 0; color:var(--parchment); overflow:hidden }
.band-bg{ position:absolute; inset:0; z-index:0 }
.band-bg img{ width:100%; height:100%; object-fit:cover }
.band-bg::after{ content:""; position:absolute; inset:0;
  background:linear-gradient(96deg, rgba(22,33,58,.96), rgba(22,33,58,.88) 55%, rgba(22,33,58,.78)) }
.band .wrap{ position:relative; z-index:1 }
.band h2{ color:var(--parchment) }

/* ---------- Steps ---------- */
.steps{ counter-reset:s }
.step{ counter-increment:s; display:grid; grid-template-columns:88px 1fr; gap:32px;
  padding:38px 0; border-top:1px solid var(--line) }
.step:last-child{ border-bottom:1px solid var(--line) }
.on-navy .step,.on-navy .step:last-child{ border-color:var(--line-dark) }
.step::before{ content:counter(s,decimal-leading-zero); font-family:var(--display);
  font-size:2.1rem; font-weight:600; color:var(--champagne); line-height:.9; letter-spacing:-.02em }
.step h3{ font-size:1.35rem; margin-bottom:.4em }
.step p:last-child{ margin-bottom:0 }

/* ---------- Calculator ---------- */
.calc{ background:var(--paper); border-radius:var(--r); box-shadow:var(--shadow-lg); overflow:hidden }
.calc-head{ padding:32px 36px 26px; border-bottom:1px solid var(--line-soft) }
.calc-head h3{ margin:0 0 6px; font-size:1.5rem }
.calc-head p{ margin:0; font-size:.86rem; color:var(--navy-55) }
.calc-body{ padding:30px 36px 34px; display:grid; gap:24px }
.field label{ display:block; font-weight:500; font-size:.79rem; letter-spacing:.07em;
  text-transform:uppercase; color:var(--navy); margin-bottom:10px }
.field .hint{ font-size:.73rem; text-transform:none; letter-spacing:.01em;
  color:var(--navy-55); font-weight:400 }
input[type=text],input[type=email],input[type=tel],input[type=number],select,textarea{
  width:100%; font:inherit; font-size:.98rem; color:var(--navy); background:var(--paper);
  border:0; border-bottom:1px solid var(--line); border-radius:0; padding:12px 2px;
  transition:border-color .2s ease }
input:focus,select:focus,textarea:focus{ outline:none; border-color:var(--champagne) }
textarea{ border:1px solid var(--line); border-radius:var(--r); padding:14px }
select{ appearance:none; cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='7'%3E%3Cpath d='M1 1l4.5 4.5L10 1' stroke='%231F2D4A' stroke-width='1.3' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 2px center; padding-right:26px }
.choice{ display:flex; gap:10px }
.choice label{ flex:1; margin:0; position:relative }
.choice input{ position:absolute; opacity:0; width:0; height:0 }
.choice span{ display:block; text-align:center; padding:13px 10px; font-size:.9rem; font-weight:400;
  border:1px solid var(--line); border-radius:var(--pill); cursor:pointer;
  transition:.18s ease; color:var(--navy-70) }
.choice input:checked + span{ border-color:var(--champagne); background:var(--champagne);
  color:#fff; font-weight:500 }
.choice input:focus-visible + span{ box-shadow:0 0 0 3px rgba(179,155,114,.28) }
.calc-out{ background:var(--navy); padding:32px 36px }
.calc-out .k{ font:500 .68rem/1 var(--sans); letter-spacing:.24em; text-transform:uppercase;
  color:var(--champagne) }
.calc-amount{ font-family:var(--display); font-size:3.6rem; font-weight:600; line-height:1;
  letter-spacing:-.03em; margin:14px 0 8px; color:var(--parchment) }
.calc-note{ font-size:.82rem; line-height:1.6; color:var(--cream-55); margin:0 }
.calc-flag{ margin-top:20px; padding:16px 18px; border-radius:var(--r); font-size:.83rem;
  line-height:1.6; background:rgba(242,236,224,.06); border:1px solid var(--line-dark);
  color:var(--cream-70) }
.calc-flag strong{ color:var(--parchment); font-weight:500 }
.calc-flag.warn{ background:rgba(179,155,114,.16); border-color:rgba(179,155,114,.45) }
.calc-flag.warn strong{ color:var(--champagne-l) }

/* ---------- Table ---------- */
.tbl{ width:100%; border-collapse:collapse; font-size:.94rem }
.tbl th,.tbl td{ padding:20px 22px; text-align:left; vertical-align:top;
  border-bottom:1px solid var(--line) }
.tbl thead th{ font:500 .68rem/1.4 var(--sans); letter-spacing:.2em; text-transform:uppercase;
  color:var(--gold-deep); padding-top:0; border-bottom:1px solid var(--navy-12) }
.tbl tbody th{ font-weight:500; color:var(--navy); width:32% }
.tbl td{ color:var(--navy-70) }
.tbl .yes{ color:var(--navy); font-weight:500 }
.tbl .no{ color:var(--navy-55) }
.tbl tr:last-child th,.tbl tr:last-child td{ border-bottom:none }
.on-navy .tbl th,.on-navy .tbl td{ border-color:var(--line-dark) }
.on-navy .tbl thead th{ color:var(--champagne); border-color:var(--line-dark) }
.on-navy .tbl tbody th{ color:var(--parchment) }
.on-navy .tbl td{ color:var(--cream-70) }
.on-navy .tbl .yes{ color:var(--parchment); font-weight:500 }
.on-navy .tbl .no{ color:var(--cream-55) }
.tbl-scroll{ overflow-x:auto; -webkit-overflow-scrolling:touch }

/* ---------- Lists ---------- */
.ticks{ list-style:none; margin:0; padding:0; display:grid; gap:16px }
.ticks li{ display:grid; grid-template-columns:20px 1fr; gap:14px; font-size:.97rem;
  line-height:1.6; color:var(--navy-70) }
.on-navy .ticks li{ color:var(--cream-70) }
.ticks li::before{ content:""; width:15px; height:15px; margin-top:6px;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='15' height='11'%3E%3Cpath d='M1 5.6l4 4L14 1' stroke='%23B39B72' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat }
.ticks strong{ font-weight:500 }

/* ---------- Bio ---------- */
.bio{ display:grid; grid-template-columns:400px 1fr; gap:76px; align-items:center }
.portrait{ aspect-ratio:4/5; border-radius:var(--r);
  background:linear-gradient(165deg,#2A3B5E,#16213A); display:flex; align-items:center;
  justify-content:center; color:rgba(242,236,224,.36); font-size:.72rem; letter-spacing:.2em;
  text-transform:uppercase; text-align:center; padding:24px; line-height:2 }

/* ---------- FAQ ---------- */
.faq{ border-top:1px solid var(--line) }
.faq details{ border-bottom:1px solid var(--line) }
.faq summary{ display:flex; justify-content:space-between; align-items:flex-start; gap:30px;
  padding:28px 0; cursor:pointer; list-style:none; font-family:var(--display);
  font-size:1.4rem; font-weight:600; letter-spacing:-.018em; color:var(--navy) }
.faq summary::-webkit-details-marker{ display:none }
.faq summary:hover{ color:var(--gold-deep) }
.faq summary::after{ content:""; flex:none; width:13px; height:13px; margin-top:9px;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='13' height='13'%3E%3Cpath d='M6.5 0v13M0 6.5h13' stroke='%23B39B72' stroke-width='1.2'/%3E%3C/svg%3E") center/contain no-repeat;
  transition:transform .25s ease }
.faq details[open] summary::after{ transform:rotate(135deg) }
.faq .answer{ padding:0 0 32px; max-width:72ch }
.faq .answer p:last-child{ margin-bottom:0 }

/* ---------- Forms ---------- */
.form-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:30px 34px }
.form-grid .full{ grid-column:1/-1 }
.consent{ display:grid; grid-template-columns:20px 1fr; gap:14px; align-items:start;
  font-size:.82rem; line-height:1.65; color:var(--navy-55) }
.consent input{ margin-top:5px; width:16px; height:16px; accent-color:var(--champagne) }
.note{ border-left:1px solid var(--champagne); background:var(--parchment);
  padding:24px 28px; font-size:.93rem; line-height:1.7; border-radius:0 var(--r) var(--r) 0 }
.note p:last-child{ margin-bottom:0 }
.pill-note{ display:inline-flex; align-items:center; gap:10px; background:var(--parchment);
  color:var(--gold-deep); font-size:.78rem; letter-spacing:.06em; text-transform:uppercase;
  padding:9px 18px; border-radius:var(--pill); font-weight:500 }

/* ---------- Footer ---------- */
.site-foot{ background:var(--navy-deep); color:var(--cream-55); padding:92px 0 40px; font-size:.9rem }
.foot-grid{ display:grid; grid-template-columns:1.7fr 1fr 1fr 1fr; gap:50px; padding-bottom:56px;
  border-bottom:1px solid var(--line-dark) }
.site-foot h4{ color:var(--parchment); font-family:var(--sans); font-size:.68rem; font-weight:500;
  letter-spacing:.22em; text-transform:uppercase; margin:0 0 22px }
.site-foot ul{ list-style:none; margin:0; padding:0; display:grid; gap:13px }
.site-foot a{ color:var(--cream-70) }
.site-foot a:hover{ color:var(--champagne) }
.site-foot p{ color:var(--cream-55) }
.site-foot .soon{ color:rgba(242,236,224,.38) }
.site-foot .soon b{ background:rgba(242,236,224,.10); color:var(--champagne) }
.foot-legal{ padding-top:34px; display:grid; gap:16px }
.foot-legal p{ margin:0; font-size:.75rem; line-height:1.75; color:rgba(242,236,224,.42) }
.foot-legal strong{ color:var(--cream-70); font-weight:500 }
.foot-legal .row{ display:flex; flex-wrap:wrap; gap:20px; justify-content:space-between;
  align-items:center }
.placeholder{ color:var(--champagne); border-bottom:1px dotted rgba(179,155,114,.5) }



/* ---------- Real portrait + credential stats ---------- */
.portrait-real{ border-radius:var(--r); overflow:hidden; background:var(--navy) }
.portrait-real img{ width:100%; height:auto; aspect-ratio:4/5; object-fit:cover; object-position:50% 22% }
.bio-stats{ display:grid; grid-template-columns:repeat(3,auto); gap:38px; justify-content:start;
  margin:34px 0 4px; padding-top:28px; border-top:1px solid var(--line) }
.bio-stats div{ font-size:.8rem; line-height:1.5; color:var(--navy-55) }
.bio-stats b{ display:block; font-family:var(--display); font-size:1.85rem; font-weight:600;
  letter-spacing:-.02em; color:var(--navy); line-height:1; margin-bottom:7px }
.on-navy .bio-stats{ border-color:var(--line-dark) }
.on-navy .bio-stats div{ color:var(--cream-55) }
.on-navy .bio-stats b{ color:var(--parchment) }
@media (max-width:560px){
  .bio-stats{ grid-template-columns:1fr 1fr; gap:24px 30px }
  .bio-stats b{ font-size:1.5rem }
}

/* ---------- Dark surfaces ----------
   .hero and .band sit on navy just like .on-navy, so they inherit the same
   text treatment. Without this, headings fall back to navy on navy. */
.hero h1,.hero h2,.hero h3,.hero h4,
.band h1,.band h2,.band h3,.band h4{ color:var(--parchment) }
.hero p,.band p{ color:var(--cream-70) }
.hero .lede,.band .lede{ color:var(--cream-70) }
.hero .eyebrow,.band .eyebrow{ color:var(--champagne) }
.hero strong,.band strong{ color:var(--parchment) }
.hero .fine,.band .fine{ color:var(--cream-55) }
.hero .small,.band .small{ color:var(--cream-70) }
.hero .ticks li,.band .ticks li{ color:var(--cream-70) }
.hero .step,.hero .step:last-child,
.band .step,.band .step:last-child{ border-color:var(--line-dark) }
.hero .tbl th,.hero .tbl td,.band .tbl th,.band .tbl td{ border-color:var(--line-dark) }
.hero .tbl thead th,.band .tbl thead th{ color:var(--champagne); border-color:var(--line-dark) }
.hero .tbl tbody th,.band .tbl tbody th{ color:var(--parchment) }
.hero .tbl td,.band .tbl td{ color:var(--cream-70) }
.hero .tbl .yes,.band .tbl .yes{ color:var(--parchment); font-weight:500 }
.hero .tbl .no,.band .tbl .no{ color:var(--cream-55) }

/* The calculator card is a light surface that happens to live inside the hero,
   so it opts back out of the dark treatment. */
.hero .calc h1,.hero .calc h2,.hero .calc h3,.hero .calc h4{ color:var(--navy) }
.hero .calc p{ color:var(--navy-55) }
.hero .calc .calc-amount{ color:var(--parchment) }
.hero .calc .calc-note{ color:var(--cream-55) }
.hero .calc .calc-flag{ color:var(--cream-70) }
.hero .calc .calc-flag strong{ color:var(--parchment) }
.hero .calc .calc-flag.warn strong{ color:var(--champagne-l) }
.hero .calc label{ color:var(--navy) }
.hero .calc .hint{ color:var(--navy-55) }
.hero .calc .choice span{ color:var(--navy-70) }
.hero .calc .choice input:checked + span{ color:#fff }

/* ---------- Responsive ---------- */
/* Measured: the inline nav needs 944px with the eXp logo in the lockup
   (880px of content + 64px gutters). Collapsing at 1030 keeps a ~85px cushion. */
@media (max-width:1030px){
  .nav-toggle{ display:flex }
  .nav-links{ position:absolute; top:84px; left:0; right:0; background:var(--page);
    border-bottom:1px solid var(--line); flex-direction:column; align-items:stretch;
    gap:0; padding:8px 32px 24px; box-shadow:var(--shadow); display:none; flex:1 1 auto }
  .nav-links.open{ display:flex }
  .nav-links li{ border-top:1px solid var(--line-soft) }
  .nav-links a,.soon{ display:flex; padding:17px 0; font-size:1rem }
}
@media (max-width:1000px){
  .hero-grid{ grid-template-columns:1fr; gap:56px }
  /* Once columns stack, a 4:5 portrait becomes a full-width wall of image. */
  .fig-tall img{ aspect-ratio:16/10 }
  .portrait-real img{ aspect-ratio:4/5 }   /* a headshot must stay a headshot */
  .fig-frame::before{ inset:14px -14px -14px 14px }
  .split,.split-wide{ grid-template-columns:1fr; gap:48px }
  .g4{ grid-template-columns:repeat(2,1fr) }
  .foot-grid{ grid-template-columns:1fr 1fr; gap:44px }
  .bio{ grid-template-columns:300px 1fr; gap:48px }
  section{ padding:88px 0 }
  .band{ padding:104px 0 }
}
@media (max-width:860px){
  body{ font-size:16px }
  /* Side-lit gradients read as a flat block once the copy spans full width,
     so switch to a vertical scrim and let more of the photo through. */
  .hero-bg img,.band-bg img{ opacity:.38 }
  .hero-bg::after{ background:linear-gradient(180deg, rgba(22,33,58,.90), rgba(22,33,58,.78)) }
  .band-bg::after{ background:linear-gradient(180deg, rgba(22,33,58,.93), rgba(22,33,58,.86)) }
  section{ padding:72px 0 }
  .band{ padding:88px 0 }
  .hero{ padding:80px 0 88px }
  .hero-sub{ padding:68px 0 72px }
  .wrap{ padding:0 22px }
  .g2,.g3{ grid-template-columns:1fr }
  .trust{ grid-template-columns:repeat(2,1fr); gap:28px }
  .bio{ grid-template-columns:1fr; gap:38px }
  .portrait,.portrait-real{ max-width:300px }
  .form-grid{ grid-template-columns:1fr }
  .step{ grid-template-columns:58px 1fr; gap:20px; padding:30px 0 }
  .section-head{ margin-bottom:44px }
  .fig-frame::before{ inset:12px -12px -12px 12px }
  .calc-head,.calc-body,.calc-out{ padding-left:26px; padding-right:26px }
}
@media (max-width:640px){
  .brand-word{ font-size:1.36rem }
  .brand-eyebrow{ font-size:.55rem; letter-spacing:.24em; margin-bottom:6px }
  .nav{ gap:12px; height:76px }
  .nav-links{ top:76px }
  .nav-cta{ gap:9px }
  .nav-cta .btn{ padding:12px 18px; font-size:.84rem }
  .bar{ padding-left:18px; padding-right:18px }
  h3{ font-size:1.32rem }
  .calc-amount{ font-size:3rem }
}
@media (max-width:520px){
  .g4{ grid-template-columns:1fr }
  .btn{ width:100% }
  .nav-cta .btn{ width:auto; padding:11px 15px; font-size:.8rem }
  .btn-row{ flex-direction:column }
  .choice{ flex-direction:column }
  .cta-long{ display:none }
  .cta-short{ display:inline }
  .trust{ grid-template-columns:1fr; gap:22px }
  .trust b{ font-size:1.8rem }
}
@media (max-width:400px){
  .brand-word{ font-size:1.18rem }
  .brand-eyebrow{ font-size:.5rem; letter-spacing:.2em; margin-bottom:5px }
  .nav-cta .btn{ padding:10px 13px; font-size:.76rem }
}
@media (prefers-reduced-motion:reduce){ *{ transition:none !important; scroll-behavior:auto } }

/* ==========================================================================
   ENGAGEMENT LAYER
   Photography was being hidden under near-opaque scrims, and nothing on the
   page moved. This section lets the imagery carry emotion, adds restrained
   motion, and puts a persistent way to convert in front of the user.
   ========================================================================== */

/* ---------- Let the photographs be seen ---------- */
.hero-bg img{ opacity:.85 }
.hero-bg::after{
  background:
    linear-gradient(100deg, rgba(22,33,58,.93) 0%, rgba(22,33,58,.80) 34%,
                            rgba(22,33,58,.44) 66%, rgba(22,33,58,.20) 100%),
    linear-gradient(180deg, rgba(22,33,58,.55) 0%, transparent 26%, rgba(22,33,58,.35) 100%);
}
.band-bg::after{
  background:
    linear-gradient(98deg, rgba(22,33,58,.90) 0%, rgba(22,33,58,.66) 48%, rgba(22,33,58,.34) 100%),
    linear-gradient(180deg, rgba(22,33,58,.42), transparent 30%, rgba(22,33,58,.42));
}
/* Slow drift keeps a static photo from reading as wallpaper. */
.hero-bg img,.band-bg img{ animation:drift 28s ease-in-out infinite alternate;
  transform-origin:center }
@keyframes drift{ from{ transform:scale(1.04) } to{ transform:scale(1.11) translateY(-1.2%) } }

/* Content sitting on top of a brighter photo needs its own surface. */
.panel{
  background:rgba(14,23,42,.72); backdrop-filter:blur(14px) saturate(140%);
  border:1px solid rgba(242,236,224,.16); border-radius:var(--r);
  padding:34px 38px;
}
.panel .tbl th,.panel .tbl td{ border-color:rgba(242,236,224,.14) }

/* ---------- Scroll reveal ---------- */
.reveal{ opacity:0; transform:translateY(22px);
  transition:opacity .75s cubic-bezier(.16,.84,.44,1), transform .75s cubic-bezier(.16,.84,.44,1);
  transition-delay:var(--d,0ms) }
.reveal.in{ opacity:1; transform:none }

/* ---------- Hero intro ---------- */
.hero .wrap > div > *{ animation:riseIn .9s cubic-bezier(.16,.84,.44,1) both }
.hero .eyebrow{ animation-delay:.05s }
.hero h1{ animation-delay:.14s }
.hero .lede{ animation-delay:.26s }
.hero .btn-row{ animation-delay:.36s }
.hero .trust{ animation-delay:.46s }
.hero .calc{ animation:riseIn 1s cubic-bezier(.16,.84,.44,1) .3s both }
@keyframes riseIn{ from{ opacity:0; transform:translateY(26px) } to{ opacity:1; transform:none } }

/* ---------- Micro-interactions ---------- */
.card{ transition:transform .35s cubic-bezier(.16,.84,.44,1), box-shadow .35s ease,
  border-color .35s ease }
.card:not(.plain):hover{ transform:translateY(-5px); box-shadow:var(--shadow-lg);
  border-color:rgba(179,155,114,.45) }
.card.plain{ transition:transform .35s cubic-bezier(.16,.84,.44,1) }
.card.plain:hover{ transform:translateY(-3px) }
.card.plain:hover .card-no{ color:var(--gold-deep) }

.fig img{ transition:transform .9s cubic-bezier(.16,.84,.44,1) }
.fig:hover img{ transform:scale(1.045) }

.btn-row .btn-gold::after,.btn-row .btn-navy::after{
  content:"\2192"; font-size:1.05em; line-height:1; transition:transform .3s ease }
.btn-row .btn-gold:hover::after,.btn-row .btn-navy:hover::after{ transform:translateX(4px) }

.step{ transition:border-color .3s ease }
.step:hover::before{ color:var(--gold-deep) }
.faq summary{ transition:color .25s ease }

/* ---------- The money moment ---------- */
.calc-out{ position:relative; overflow:hidden }
.calc-out::before{ content:""; position:absolute; top:-60%; right:-25%; width:75%; height:210%;
  background:radial-gradient(ellipse at center, rgba(179,155,114,.30), transparent 68%);
  pointer-events:none }
.calc-amount{ font-size:4.1rem; position:relative }
.calc-amount.bump{ animation:bump .45s cubic-bezier(.16,.84,.44,1) }
@keyframes bump{ 0%{ transform:scale(1) } 38%{ transform:scale(1.055) } 100%{ transform:scale(1) } }

/* ---------- Stats band ---------- */
.stats{ display:grid; grid-template-columns:repeat(4,1fr) }
.stats div{ padding:0 30px; border-left:1px solid var(--line-dark) }
.stats div:first-child{ padding-left:0; border-left:0 }
.stats b{ display:block; font-family:var(--display); font-weight:600;
  font-size:clamp(2.6rem,4.6vw,3.9rem); letter-spacing:-.03em; line-height:1;
  color:var(--parchment); margin-bottom:14px }
.stats span{ display:block; font-size:.87rem; line-height:1.55; color:var(--cream-55) }
.stats em{ font-style:normal; color:var(--champagne) }

/* ---------- Sticky conversion bar ---------- */
.sticky-cta{
  position:fixed; left:0; right:0; bottom:0; z-index:70;
  display:flex; align-items:center; gap:16px; padding:13px 20px;
  background:rgba(14,23,42,.94); backdrop-filter:blur(14px);
  border-top:1px solid rgba(242,236,224,.14);
  transform:translateY(105%); transition:transform .4s cubic-bezier(.16,.84,.44,1);
}
.sticky-cta.show{ transform:none }
.sticky-cta p{ margin:0; flex:1; font-size:.8rem; line-height:1.35; color:var(--cream-70) }
.sticky-cta strong{ display:block; font-family:var(--display); font-size:1.12rem;
  font-weight:600; color:var(--parchment); letter-spacing:-.01em }
.sticky-cta .btn{ padding:13px 22px; font-size:.86rem; flex:none }
@media (min-width:861px){ .sticky-cta{ display:none } }


/* ---------- Responsive + motion preferences ---------- */
@media (max-width:1000px){ .stats{ grid-template-columns:repeat(2,1fr); gap:44px 0 } }
@media (max-width:860px){
  .hero-bg img,.band-bg img{ opacity:.72 }
  .hero-bg::after{ background:
    linear-gradient(180deg, rgba(22,33,58,.80) 0%, rgba(22,33,58,.72) 45%, rgba(22,33,58,.90) 100%) }
  .band-bg::after{ background:
    linear-gradient(180deg, rgba(22,33,58,.86) 0%, rgba(22,33,58,.78) 50%, rgba(22,33,58,.90) 100%) }
  .panel{ padding:26px 22px }
  .stats div{ padding:0 18px }
  .stats div:nth-child(3){ padding-left:0; border-left:0 }
  body{ padding-bottom:0 }
}
@media (max-width:520px){
  .stats{ grid-template-columns:1fr; gap:30px }
  .stats div,.stats div:nth-child(n){ padding:0 0 0 20px; border-left:1px solid var(--line-dark) }
  .sticky-cta p{ display:none }
  .sticky-cta .btn{ flex:1; width:auto }
}
@media (prefers-reduced-motion:reduce){
  .reveal{ opacity:1; transform:none }
  .hero .wrap > div > *,.hero .calc,.hero-bg img,.band-bg img{ animation:none }
  .calc-amount.bump{ animation:none }
  .fig:hover img,.card:not(.plain):hover{ transform:none }
}


/* ==========================================================================
   NEW HOME SEARCH
   ShowingNew is embedded cross-origin, so nothing inside the frame can be
   styled or measured. The page frames it as an app window instead: a fixed
   viewport-height pane with its own chrome, area shortcuts that retarget the
   frame, and an escape hatch to full screen for saving homes.
   ========================================================================== */

/* ---------- Area chips (search page and home page) ---------- */
.chips{ display:flex; flex-wrap:wrap; gap:10px }
.chip{ display:inline-flex; align-items:center; padding:10px 18px; border-radius:var(--pill);
  border:1px solid var(--navy-12); background:var(--paper); color:var(--navy-70);
  font-size:.86rem; font-weight:500; white-space:nowrap;
  transition:border-color .2s ease, color .2s ease, background .2s ease, transform .2s ease }
.chip:hover{ border-color:var(--champagne); color:var(--gold-deep); transform:translateY(-1px) }
.chip.active{ background:var(--navy); border-color:var(--navy); color:var(--parchment) }
.chip[data-area="new"]{ border-style:dashed }
.chip[data-area="new"].active{ border-style:solid }

/* ---------- Search page layout ---------- */
.hero-search{ padding:84px 0 88px }
.search-section{ padding:44px 0 76px; background:var(--page) }
.search-toolbar{ display:flex; align-items:center; gap:18px; margin-bottom:22px; flex-wrap:wrap }
.search-toolbar-label{ font:500 .68rem/1 var(--sans); letter-spacing:.22em; text-transform:uppercase;
  color:var(--gold-deep); white-space:nowrap }

.search-shell{ background:var(--paper); border:1px solid var(--line); border-radius:12px;
  overflow:hidden; box-shadow:var(--shadow-lg) }
.search-bar{ display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:13px 20px; background:var(--navy); color:var(--cream-70); font-size:.8rem }
.search-live{ display:inline-flex; align-items:center; gap:10px; letter-spacing:.05em }
.search-live i{ width:7px; height:7px; border-radius:50%; background:var(--champagne);
  box-shadow:0 0 0 0 rgba(179,155,114,.7); animation:livePulse 2.2s ease-out infinite }
@keyframes livePulse{ 0%{ box-shadow:0 0 0 0 rgba(179,155,114,.6) }
  70%{ box-shadow:0 0 0 9px rgba(179,155,114,0) } 100%{ box-shadow:0 0 0 0 rgba(179,155,114,0) } }
.search-full{ color:var(--parchment); font-weight:500; white-space:nowrap;
  border-bottom:1px solid rgba(242,236,224,.3); padding-bottom:1px }
.search-full:hover{ color:var(--champagne); border-color:var(--champagne) }

.search-frame-wrap{ position:relative; height:clamp(620px, calc(100vh - 170px), 1080px); background:#fff }
.search-frame-wrap iframe{ display:block; width:100%; height:100%; border:0; background:#fff;
  color-scheme:light }
.search-loading{ position:absolute; inset:0; z-index:1; display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:18px; background:var(--page);
  font-size:.8rem; letter-spacing:.14em; text-transform:uppercase; color:var(--navy-55);
  transition:opacity .45s ease, visibility .45s ease }
.search-loading span{ width:34px; height:34px; border-radius:50%;
  border:1.5px solid var(--navy-12); border-top-color:var(--champagne); animation:spin .9s linear infinite }
@keyframes spin{ to{ transform:rotate(360deg) } }
.search-loading.done{ opacity:0; visibility:hidden }
.search-foot{ margin:18px 0 0; max-width:88ch }

/* ---------- Home promo figure is a link ---------- */
a.fig{ display:block }
.fig-cap-sub{ display:block; margin:0; color:var(--cream-70); font-size:.86rem; line-height:1.5 }

@media (max-width:860px){
  .hero-search{ padding:60px 0 64px }
  .search-section{ padding:28px 0 60px }
  /* Leave page margin above and below so a thumb can still scroll the page
     rather than getting trapped inside the frame. */
  .search-frame-wrap{ height:74vh; min-height:520px }
  .search-toolbar{ gap:12px }
  .search-toolbar .chips{ flex-wrap:nowrap; overflow-x:auto; margin:0 -22px; padding:2px 22px 6px;
    scrollbar-width:none; -webkit-overflow-scrolling:touch }
  .search-toolbar .chips::-webkit-scrollbar{ display:none }
  .search-bar{ padding:11px 14px }
  .hide-sm{ display:none }
}
@media (prefers-reduced-motion:reduce){
  .search-live i,.search-loading span{ animation:none }
}

/* ==========================================================================
   SAVINGS-LED HOMEPAGE
   The visitor's own dollar figure has to arrive before anything else, and the
   "it is already in the price" logic has to sit directly under the hero.
   ========================================================================== */

/* ---------- Hero additions ---------- */
.hero-disclosure{ margin:18px 0 0; font-size:.78rem; line-height:1.6; color:var(--cream-55); max-width:56ch }
/* Flex-wrap, not a fixed 4-column grid: four nowrap items in auto columns set a
   huge min-content width and starved the calculator column beside it. */
.nolose{ list-style:none; margin:40px 0 0; padding:26px 0 0; border-top:1px solid var(--line-dark);
  display:flex; flex-wrap:wrap; gap:14px 30px }
.hero-grid > *{ min-width:0 }
.nolose li{ display:flex; align-items:center; gap:10px; font-size:.86rem; color:var(--cream-70); white-space:nowrap }
.nolose li::before{ content:""; flex:none; width:15px; height:11px;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='15' height='11'%3E%3Cpath d='M1 5.6l4 4L14 1' stroke='%23B39B72' stroke-width='1.6' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat }
.nolose b{ color:var(--parchment); font-weight:600 }

/* ---------- Calculator next step ---------- */
.calc-cta{ width:100%; margin-top:20px }

/* ---------- Three beats ---------- */
.beats-section{ padding-top:96px }
.beats{ display:grid; grid-template-columns:repeat(3,1fr); gap:0; border-top:1px solid var(--line) }
.beat{ padding:40px 36px 36px; border-right:1px solid var(--line); display:flex; flex-direction:column }
.beat:first-child{ padding-left:0 }
.beat:last-child{ border-right:0; padding-right:0 }
.beat-no{ font-family:var(--display); font-size:1.1rem; font-weight:600; color:var(--champagne); margin-bottom:16px }
.beat h3{ font-size:1.55rem; margin-bottom:.5em }
.beat p{ flex:1 }
.beat-fig{ margin-top:22px; padding-top:20px; border-top:1px solid var(--line-soft);
  font-size:.82rem; color:var(--navy-55) }
.beat-fig b{ display:block; font-family:var(--display); font-weight:600; font-size:2.5rem;
  letter-spacing:-.03em; line-height:1; color:var(--navy); margin-bottom:6px }
.beat-loss .beat-fig b{ color:var(--navy-55); text-decoration:line-through;
  text-decoration-color:rgba(179,155,114,.7); text-decoration-thickness:2px }
.beat-win .beat-fig b{ color:var(--gold-deep) }

/* ---------- Same home, same price ---------- */
.versus{ display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:26px;
  max-width:960px; margin:0 auto }
.vs-card{ background:var(--paper); border:1px solid var(--line); border-radius:12px; padding:34px 34px 36px }
.vs-label{ display:block; font:500 .7rem/1 var(--sans); letter-spacing:.22em; text-transform:uppercase;
  color:var(--navy-55); margin-bottom:22px }
.vs-card dl{ margin:0 }
.vs-card dl > div{ display:flex; justify-content:space-between; align-items:baseline; gap:18px;
  padding:13px 0; border-bottom:1px solid var(--line-soft) }
.vs-card dl > div:last-child{ border-bottom:0 }
.vs-card dt{ font-size:.86rem; color:var(--navy-55) }
.vs-card dd{ margin:0; font-size:.95rem; font-weight:500; color:var(--navy); text-align:right }
.vs-money dd{ font-family:var(--display); font-size:2.5rem; font-weight:600; letter-spacing:-.03em; line-height:1 }
.vs-card:not(.vs-featured) .vs-money dd{ color:var(--navy-55) }
.vs-featured{ background:var(--navy); border-color:var(--navy); box-shadow:var(--shadow-lg);
  position:relative; transform:translateY(-6px) }
.vs-featured .vs-label{ color:var(--champagne) }
.vs-featured dl > div{ border-color:var(--line-dark) }
.vs-featured dt{ color:var(--cream-55) }
.vs-featured dd{ color:var(--parchment) }
.vs-featured .vs-money dd{ color:var(--champagne-l); font-size:3rem }
.vs-featured .btn{ width:100%; margin-top:26px }
.vs-or{ font-family:var(--display); font-style:italic; font-size:1.6rem; color:var(--champagne) }

/* ---------- Price tiers ---------- */
.tiers-head{ text-align:center; margin:84px auto 26px }
.tiers-head h3{ font-size:1.9rem; margin-bottom:.25em }
.tiers-head p{ margin:0 }
.tiers{ display:grid; grid-template-columns:repeat(5,1fr); gap:14px }
.tier{ display:block; text-align:center; background:var(--paper); border:1px solid var(--line);
  border-radius:12px; padding:24px 12px 22px; font-size:.78rem; color:var(--navy-55);
  transition:transform .3s cubic-bezier(.16,.84,.44,1), border-color .3s ease, box-shadow .3s ease }
.tier span{ display:block; font-size:.8rem; font-weight:500; color:var(--navy-70); margin-bottom:10px }
.tier b{ display:block; font-family:var(--display); font-weight:600; font-size:2.05rem;
  letter-spacing:-.03em; line-height:1; color:var(--gold-deep); margin-bottom:6px }
.tier:hover{ transform:translateY(-4px); border-color:var(--champagne); box-shadow:var(--shadow) }
.tiers-use{ margin:34px auto 6px; font-family:var(--display); font-size:1.35rem; font-weight:500;
  color:var(--navy); letter-spacing:-.01em }
.tiers-use sup{ font-family:var(--sans); font-size:.6em; color:var(--champagne) }

/* ---------- Responsive ---------- */
@media (max-width:1000px){
  .beats{ grid-template-columns:1fr }
  .beat,.beat:first-child,.beat:last-child{ padding:32px 0; border-right:0; border-bottom:1px solid var(--line) }
  .beat:last-child{ border-bottom:0 }
  .versus{ grid-template-columns:1fr; gap:14px; max-width:520px }
  .vs-or{ text-align:center }
  .vs-featured{ transform:none }
  .tiers{ grid-template-columns:repeat(3,1fr) }
}
@media (max-width:520px){
  .nolose{ display:grid; grid-template-columns:1fr 1fr; gap:12px 16px; margin-top:30px }
  .nolose li{ white-space:normal; font-size:.82rem; align-items:flex-start }
  .nolose li::before{ margin-top:4px }
  .tiers{ grid-template-columns:1fr 1fr }
  .tiers .tier:last-child{ grid-column:1/-1 }
  .vs-card{ padding:26px 22px 28px }
  .vs-money dd{ font-size:2.1rem }
  .vs-featured .vs-money dd{ font-size:2.5rem }
  .beat-fig b{ font-size:2.1rem }
  .tiers-head{ margin-top:64px }
}

/* Phones: the co-branded footer lockup gets its own row so the link columns
   beneath it are not squeezed into one-word lines. */
@media (max-width:640px){
  .foot-grid{ grid-template-columns:1fr 1fr; gap:38px 24px }
  .foot-grid > .foot-brand{ grid-column:1/-1 }
  .foot-grid > div{ min-width:0 }
}

/* Header lockup on phones: tighter spacing and a smaller broker logo so
   TNHR + eXp + the reward button + menu all fit on one line. */
@media (max-width:640px){
  .brand{ gap:10px }
  .brand-rule{ height:30px }
  .brand-broker{ height:24px }
}
@media (max-width:400px){
  .brand{ gap:8px }
  .brand-broker{ height:21px }
}

/* ==========================================================================
   LEGAL PAGES (Privacy Policy, Terms of Service) and regulatory footer links
   ========================================================================== */
.legal-hero{ background:var(--navy); color:var(--parchment); padding:84px 0 70px }
.legal-hero h1{ color:var(--parchment); font-size:clamp(2.6rem,5vw,3.8rem) }
.legal-hero .eyebrow{ color:var(--champagne) }
.legal-hero .lede{ color:var(--cream-70) }
.legal-updated{ margin:18px 0 0; font-size:.8rem; letter-spacing:.06em; color:var(--cream-55) }

.legal-body{ background:var(--page); padding:64px 0 100px }
.legal{ max-width:760px }
.legal h2{ font-size:1.7rem; margin:56px 0 .55em; scroll-margin-top:110px }
.legal h3{ font-size:1.15rem; margin:30px 0 .5em; letter-spacing:-.01em }
.legal p,.legal li{ font-size:1rem; line-height:1.75; color:var(--navy-70) }
.legal ul{ margin:0 0 1.2em; padding-left:1.2em }
.legal li{ margin-bottom:.55em }
.legal li::marker{ color:var(--champagne) }
.legal a{ color:var(--gold-deep); border-bottom:1px solid rgba(179,155,114,.45) }
.legal a:hover{ color:var(--navy); border-color:var(--navy) }
.legal strong{ color:var(--navy) }

.legal-toc{ background:var(--paper); border:1px solid var(--line-soft); border-radius:var(--r);
  padding:26px 30px 22px; margin-bottom:12px }
.legal-toc > span{ display:block; font:500 .68rem/1 var(--sans); letter-spacing:.22em;
  text-transform:uppercase; color:var(--gold-deep); margin-bottom:16px }
.legal-toc ol{ margin:0; padding-left:1.3em; columns:2; column-gap:40px }
.legal-toc li{ font-size:.92rem; margin-bottom:.45em; break-inside:avoid }
.legal-toc li::marker{ color:var(--navy-55) }
.legal-toc a{ border-bottom:0; color:var(--navy-70) }
.legal-toc a:hover{ color:var(--gold-deep) }

/* TREC requires the IABS and Consumer Protection Notice links in at least
   10-point type (13.33px). The surrounding legal copy is 12px, so these links
   are set at 14px to stay compliant. */
.foot-reg{ display:flex; flex-wrap:wrap; gap:12px 30px; padding-bottom:18px;
  margin-bottom:4px; border-bottom:1px solid var(--line-dark) }
.foot-reg a{ font-size:14px; line-height:1.5; color:var(--cream-70) }
.foot-reg a:hover{ color:var(--champagne) }

@media (max-width:640px){
  .legal-hero{ padding:60px 0 52px }
  .legal-body{ padding:44px 0 80px }
  .legal-toc ol{ columns:1 }
  .legal h2{ font-size:1.45rem; margin-top:44px }
  .foot-reg{ flex-direction:column; gap:12px }
}

/* ==========================================================================
   THREE PROGRAMS (homepage). New construction is the flagship: navy card,
   lifted, badged. The other two are quieter paper cards.
   ========================================================================== */
.hero-programs{ margin:10px 0 0; font-size:.86rem; color:var(--cream-70) }
.hero-programs a{ color:var(--champagne); border-bottom:1px solid rgba(179,155,114,.5) }
.hero-programs a:hover{ color:var(--parchment); border-color:var(--parchment) }

.programs{ display:grid; grid-template-columns:1.12fr 1fr 1fr; gap:22px; align-items:stretch }
.program{ position:relative; display:flex; flex-direction:column; background:var(--paper);
  border:1px solid var(--line); border-radius:14px; padding:34px 30px 30px }
.program .ticks{ margin:22px 0 28px; flex:1 }
.program .ticks li{ font-size:.92rem }
.program .btn{ width:100% }
.program-kicker{ font:500 .7rem/1 var(--sans); letter-spacing:.2em; text-transform:uppercase;
  color:var(--gold-deep) }
.program-figure{ display:flex; align-items:baseline; gap:10px; margin:18px 0 10px }
.program-figure b{ font-family:var(--display); font-weight:600; font-size:3.6rem; line-height:.9;
  letter-spacing:-.03em; color:var(--navy) }
.program-figure span{ font-size:.9rem; color:var(--navy-55) }
.program-example{ margin:0; font-size:.95rem; color:var(--navy-70) }
.program-example strong{ color:var(--navy) }

.program-flagship{ background:var(--navy); border-color:var(--navy); box-shadow:var(--shadow-lg);
  transform:translateY(-10px); padding-top:40px }
.program-flagship .program-kicker{ color:var(--champagne) }
.program-flagship .program-figure b{ color:var(--champagne-l); font-size:4.3rem }
.program-flagship .program-figure span,.program-flagship .program-example{ color:var(--cream-70) }
.program-flagship .program-example strong{ color:var(--parchment) }
.program-flagship .ticks li{ color:var(--cream-70) }
.program-badge{ position:absolute; top:-12px; left:30px; background:var(--champagne); color:#fff;
  font:500 .64rem/1 var(--sans); letter-spacing:.18em; text-transform:uppercase;
  padding:7px 12px; border-radius:var(--pill) }
.programs-fine{ margin:40px auto 0; max-width:80ch }

@media (max-width:1000px){
  .programs{ grid-template-columns:1fr; max-width:560px; margin:0 auto; gap:30px }
  .program-flagship{ transform:none }
}
@media (max-width:520px){
  .program{ padding:30px 22px 24px }
  .program-flagship{ padding-top:36px }
  .program-figure b{ font-size:3.1rem }
  .program-flagship .program-figure b{ font-size:3.6rem }
}

/* ==========================================================================
   SALES PAGES (new-construction, sell, pre-owned)
   ClickFunnels-style: slim header with one action, hero with the opt-in
   form above the fold, repeated calls to action, final form.
   ========================================================================== */

/* ---------- Slim header ---------- */
.lp-head .nav{ gap:20px }
.lp-phone{ font-size:.86rem; color:var(--navy-70); white-space:nowrap }
.lp-phone b{ color:var(--navy); font-weight:600 }
.lp-phone:hover b{ color:var(--gold-deep) }
@media (max-width:760px){ .lp-phone{ display:none } }

/* ---------- Hero with form ---------- */
.lp-hero{ padding:84px 0 92px }
.lp-grid{ display:grid; grid-template-columns:1.05fr .95fr; gap:64px; align-items:center }
.lp-hero h1{ max-width:16ch }
.lp-hero .nolose{ margin-top:32px }
@media (max-width:1000px){ .lp-grid{ grid-template-columns:1fr; gap:44px } .lp-hero{ padding:64px 0 72px } }

/* ---------- Lead card ---------- */
.lead-card{ background:var(--paper); border-radius:14px; box-shadow:var(--shadow-lg); overflow:hidden;
  scroll-margin-top:100px }
.lead-head{ padding:28px 32px 20px; border-bottom:1px solid var(--line-soft) }
.lead-head h2{ font-size:1.6rem; margin:0 0 6px }
.lead-head p{ margin:0; font-size:.9rem }
.lead-body{ padding:24px 32px 28px; display:grid; gap:18px }
.lead-body .btn{ width:100%; margin-top:4px }
.lead-trust{ margin:0; text-align:center; font-size:.78rem }
.lead-card .consent a{ color:var(--gold-deep); border-bottom:1px solid rgba(179,155,114,.45) }
/* The card is a light surface sitting on dark sections: force its own colours. */
.lead-card h2,.hero .lead-card h2,.on-navy .lead-card h2{ color:var(--navy) }
.lead-card p,.hero .lead-card p,.on-navy .lead-card p{ color:var(--navy-55) }
.hero .lead-card label,.on-navy .lead-card label{ color:var(--navy) }
.hero .lead-card .consent,.on-navy .lead-card .consent{ color:var(--navy-55) }
@media (max-width:520px){ .lead-head{ padding:24px 22px 18px } .lead-body{ padding:20px 22px 24px } }

/* ---------- "Almost done" panel shown after a form is filled ---------- */
.lead-done{ padding:30px 32px 32px; text-align:center }
.lead-done h2{ font-size:1.7rem; margin:0 0 8px; color:var(--navy) }
.lead-done p{ color:var(--navy-70); margin:0 0 20px; font-size:.95rem }
.lead-done .btn{ width:100%; margin-top:10px }
.lead-done .fine{ margin:16px 0 0 }
.lead-done-mark{ width:46px; height:46px; margin:0 auto 16px; border-radius:50%; background:var(--gold-wash, #F6EEDF);
  display:flex; align-items:center; justify-content:center }
.lead-done-mark::before{ content:""; width:20px; height:14px;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='14'%3E%3Cpath d='M1.5 7.5l5 5L18.5 1.5' stroke='%23B39B72' stroke-width='2.2' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat }

/* ---------- The one rule ---------- */
.rule-strip{ background:var(--parchment); padding:26px 0; border-bottom:1px solid var(--line-soft) }
.rule-strip p{ margin:0 auto; max-width:92ch; text-align:center; font-size:.98rem; color:var(--navy-70) }
.rule-strip strong{ color:var(--gold-deep) }

/* ---------- Compact price tiles and calculator lines ---------- */
.tiers-compact{ grid-template-columns:repeat(5,1fr); gap:10px; margin:30px 0 8px }
.tiers-compact .tier{ padding:16px 8px 14px }
.tiers-compact .tier b{ font-size:1.5rem; margin:0 }
.tiers-compact .tier span{ margin-bottom:6px }
.calc-lines{ display:grid; gap:0; border-top:1px solid var(--line-soft) }
.calc-lines > div{ display:flex; justify-content:space-between; align-items:baseline; padding:14px 0;
  border-bottom:1px solid var(--line-soft); font-size:.92rem; color:var(--navy-70) }
.calc-lines b{ font-family:var(--display); font-size:1.4rem; font-weight:600; color:var(--navy) }
.calc-lines-dark > div{ border-color:var(--line-dark); color:var(--cream-70) }
.calc-lines-dark b{ color:var(--parchment) }
.calc-lines-dark .total b{ color:var(--champagne-l); font-size:1.9rem }
@media (max-width:520px){ .tiers-compact{ grid-template-columns:repeat(3,1fr) } }

/* ---------- Nothing to lose ---------- */
.guarantee-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:0; margin:44px 0 10px;
  border-top:1px solid var(--line-dark); border-bottom:1px solid var(--line-dark) }
.guarantee-grid div{ padding:28px 18px; border-left:1px solid var(--line-dark) }
.guarantee-grid div:first-child{ border-left:0 }
.guarantee-grid b{ display:block; font-family:var(--display); font-size:2.2rem; font-weight:600;
  color:var(--champagne-l); line-height:1; margin-bottom:8px }
.guarantee-grid span{ font-size:.86rem; color:var(--cream-70) }
@media (max-width:760px){
  .guarantee-grid{ grid-template-columns:1fr 1fr }
  .guarantee-grid div:nth-child(3){ border-left:0 }
  .guarantee-grid div:nth-child(-n+2){ border-bottom:1px solid var(--line-dark) }
}

/* ---------- Final section ---------- */
.lp-final{ padding:96px 0 }
.lp-call{ margin-top:22px; font-size:.95rem }
.lp-call a{ color:var(--champagne-l); border-bottom:1px solid rgba(179,155,114,.5); white-space:nowrap }

/* ---------- Misc ---------- */
.program-link{ display:flex; flex-direction:column; color:inherit }
.program-link p{ flex:1 }
.program-link .link-gold{ align-self:flex-start; margin-top:6px }
.foot-contact a{ color:var(--cream-70) }

/* Outline buttons inside the light lead card must not inherit the dark-surface
   (white on white) treatment from the hero or navy sections around them. */
.lead-card .btn-line,.hero .lead-card .btn-line,.on-navy .lead-card .btn-line{
  color:var(--navy); border-color:var(--navy-12) }
.lead-card .btn-line:hover,.hero .lead-card .btn-line:hover,.on-navy .lead-card .btn-line:hover{
  color:var(--gold-deep); border-color:var(--champagne) }
.lead-card .fine a{ color:var(--gold-deep) }

/* Phones: get the opt-in form above, or close to, the fold. The four
   reassurance points return in the "Nothing to lose" section further down. */
.nolose b{ white-space:nowrap }
@media (max-width:640px){
  .lp-hero{ padding:40px 0 56px }
  .lp-hero .nolose{ display:none }
  .lp-hero h1{ font-size:2.45rem }
  .lp-hero .lede{ font-size:1.04rem; line-height:1.6 }
  .lp-hero .hero-disclosure{ margin-top:12px }
  .lp-grid{ gap:28px }
}

/* Form error from the lead service (e.g. a bad email) */
.lead-error { margin: 0 0 12px; padding: 10px 12px; border-radius: 10px; background: #fdecec; color: #9b1c1c; font-size: 14px; line-height: 1.4; }

/* ---------- Ad films (TNHR ads placed inside page sections) ----------
   Markup comes from ad() in build.py. Silent, autoplaying, seamless loop like
   the hero film. Wide 16:9 cut on desktop, vertical 9:16 on phones; site.js
   loads each one only as it nears the screen and pauses it off screen. */
.ad-film{ margin:44px 0 0 }
.ad-center{ max-width:940px; margin:68px auto 0 }
.ad-frame{ position:relative; aspect-ratio:16/9; border-radius:8px; overflow:hidden;
  background:#EFE9DD; box-shadow:var(--shadow-lg) }
.ad-video{ display:block; width:100%; height:100%; object-fit:cover }
.ad-frame .film-toggle{ right:14px; bottom:14px; width:38px; height:38px }

/* The One Rule strip grows into a full section when it carries a film. */
.rule-strip.rule-film{ padding:96px 0; border-bottom:1px solid var(--line-soft) }
.rule-grid{ display:grid; grid-template-columns:.92fr 1.08fr; gap:64px; align-items:center }
.rule-film .rule-grid > div > h2{ margin-bottom:.6em }
.rule-film p{ margin:0; max-width:none; text-align:left; font-size:1.02rem }
.rule-film .ad-film{ margin:0 }

@media (max-width:900px){
  .rule-grid{ grid-template-columns:1fr; gap:40px }
}
@media (max-width:640px){
  .rule-strip.rule-film{ padding:64px 0 }
  .ad-center{ margin-top:48px }
  .ad-frame{ aspect-ratio:9/16; width:min(100%, calc(78svh * 9 / 16)); margin:0 auto }
}

/* ---------- Estimate + register card (every lead form) ----------
   Markup from form_card() in build.py. The estimate leads: a deep navy panel
   with the big live number and one price box, then a quiet white form. */
.est-card{ width:100%; max-width:520px; justify-self:end; background:var(--paper); border-radius:14px;
  overflow:hidden; box-shadow:0 2px 6px rgba(22,33,58,.06), 0 34px 80px rgba(22,33,58,.22);
  border:1px solid rgba(179,155,114,.22) }
.est-top{ position:relative; overflow:hidden; padding:30px 34px 26px; color:var(--parchment);
  background:radial-gradient(120% 90% at 100% 0%, #2A3B60 0%, var(--navy) 46%, var(--navy-deep) 100%) }
.est-top::after{ content:""; position:absolute; inset:auto -30% -70% auto; width:80%; height:120%;
  background:radial-gradient(closest-side, rgba(179,155,114,.16), transparent); pointer-events:none }
.est-k{ display:block; font:500 .68rem/1 var(--sans); letter-spacing:.24em; text-transform:uppercase;
  color:var(--champagne) }
.est-amount{ display:block; margin:12px 0 6px; font-family:var(--display); font-weight:600;
  font-size:clamp(3.4rem, 7vw, 4.6rem); line-height:.95; letter-spacing:-.02em; color:var(--champagne-l);
  font-variant-numeric:lining-nums tabular-nums }
.est-card .est-sub{ margin:0; font-size:.9rem; color:var(--cream-70) }
.est-card .est-sub b{ color:var(--parchment); font-weight:600 }
.est-price{ position:relative; z-index:1; margin-top:22px }
.est-card .est-price label{ display:block; margin-bottom:8px; font:500 .7rem/1 var(--sans);
  letter-spacing:.14em; text-transform:uppercase; color:var(--cream-55) }
.est-price-box{ display:flex; align-items:center; gap:6px; padding:0 18px; border-radius:10px;
  background:rgba(255,255,255,.07); border:1px solid rgba(242,236,224,.22); transition:border-color .2s, background .2s }
.est-price-box:focus-within{ border-color:var(--champagne); background:rgba(255,255,255,.1) }
.est-price-box span{ font-family:var(--display); font-size:1.7rem; color:var(--champagne) }
.est-price-box input{ flex:1; min-width:0; padding:13px 0 12px; border:0; outline:0; background:transparent;
  font-family:var(--display); font-size:1.7rem; font-weight:600; color:#fff; letter-spacing:.01em }
.est-card .est-note{ position:relative; z-index:1; margin:14px 0 0; font-size:.72rem; line-height:1.55;
  color:var(--cream-55) }

.est-body{ padding:26px 34px 28px; display:grid; gap:14px }
.est-card .est-body h3{ margin:0; font-size:1.5rem; color:var(--navy) }
.est-card .est-intro{ margin:-8px 0 4px; font-size:.88rem; color:var(--navy-55) }
.est-row{ display:grid; grid-template-columns:1fr 1fr; gap:12px }
.est-card .field label{ margin-bottom:6px; color:var(--navy-70) }
.est-card .field input{ width:100%; padding:12px 14px; border:1px solid var(--line); border-radius:8px;
  background:var(--page); font:400 .95rem/1.3 var(--sans); color:var(--navy); transition:border-color .2s, background .2s }
.est-card .field input:focus{ outline:0; border-color:var(--champagne); background:#fff;
  box-shadow:0 0 0 3px rgba(179,155,114,.18) }
/* Buyer qualifying questions: same box as the text fields. */
.est-card .field select{ width:100%; padding:12px 34px 12px 14px; border:1px solid var(--line); border-radius:8px;
  background-color:var(--page); background-position:right 14px center; font:400 .95rem/1.3 var(--sans); color:var(--navy) }
.est-card .field select:invalid{ color:var(--navy-55) }
.est-card .field select:focus{ outline:0; border-color:var(--champagne); background-color:#fff;
  box-shadow:0 0 0 3px rgba(179,155,114,.18) }
.est-btn{ width:100%; margin-top:6px; padding-top:17px; padding-bottom:17px; font-size:.98rem }
.est-sms{ display:grid; grid-template-columns:18px 1fr; gap:10px; align-items:start; cursor:pointer;
  font-size:.74rem; line-height:1.5; color:var(--navy-55) }
.est-sms input{ margin:2px 0 0; width:15px; height:15px; accent-color:var(--champagne) }
.est-card .est-fine{ margin:0; font-size:.72rem; line-height:1.55; color:var(--navy-55) }
.est-card .est-fine a{ color:var(--gold-deep); border-bottom:1px solid rgba(179,155,114,.45) }
.est-card .lead-error{ margin:0; padding:10px 12px; border-radius:8px; background:#FBEFEC;
  color:#8A3B2E; font-size:.84rem }
.split .est-card,.lp-grid .est-card,.hero-grid .est-card{ justify-self:end }

@media (max-width:900px){
  .est-card,.split .est-card,.lp-grid .est-card,.hero-grid .est-card{ justify-self:center; max-width:560px }
}
@media (max-width:480px){
  .est-top{ padding:26px 22px 22px }
  .est-body{ padding:22px 22px 24px }
  .est-row-contact,.est-row-qual{ grid-template-columns:1fr }
}

/* ==========================================================================
   AD LANDING PAGE (/register) and THANK-YOU PAGE (/thank-you)
   One offer, one form. The header has no menu and the wordmark is not a
   link; the only exits are the form and Ken's number.
   ========================================================================== */
.lp-ad{ padding:64px 0 76px }
.lp-ad h1{ max-width:18ch }
.est-compact .est-row-contact,.est-compact .est-row-qual{ grid-template-columns:1fr }

/* Four short proofs under the hero, read in one glance. */
.lp-trust{ background:var(--paper); border-bottom:1px solid var(--line-soft) }
.lp-trust-row{ list-style:none; margin:0; padding:22px 0; display:grid; grid-template-columns:repeat(4,1fr); gap:18px }
.lp-trust-row li{ display:flex; flex-direction:column; gap:4px; padding-left:16px; border-left:1px solid rgba(179,155,114,.5) }
.lp-trust-row b{ font-family:var(--display); font-size:1.35rem; font-weight:600; color:var(--navy); line-height:1 }
.lp-trust-row span{ font-size:.78rem; line-height:1.4; color:var(--navy-55) }

.foot-min{ padding:44px 0 30px }
.foot-min .foot-legal{ padding-top:0 }

.ty-hero{ padding:88px 0 76px }
.ty-hero h1{ font-size:clamp(2.4rem,5vw,3.6rem); margin-top:.1em }
.ty-mark{ width:64px; height:64px; margin:0 auto 22px; border-radius:50%; background:rgba(179,155,114,.16);
  border:1px solid rgba(179,155,114,.5); display:flex; align-items:center; justify-content:center }
.ty-mark::before{ content:""; width:26px; height:18px;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='26' height='18'%3E%3Cpath d='M2 9.5l7 7L24 2' stroke='%23C9B492' stroke-width='2.4' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat }
.ty-actions{ display:flex; gap:14px; justify-content:center; flex-wrap:wrap; margin-top:30px }
.ty-phone{ margin:22px 0 0; font-size:.9rem; color:var(--cream-70) }
.ty-phone a{ color:var(--champagne-l); border-bottom:1px solid rgba(179,155,114,.5) }

@media (max-width:760px){ .lp-trust-row{ grid-template-columns:1fr 1fr; gap:14px 12px } }
@media (max-width:640px){
  .lp-ad{ padding:36px 0 52px }
  .ty-hero{ padding:60px 0 56px }
  .ty-actions .btn{ width:100% }
}

/* Compact card on phones: the estimate header stays the hook, but tighter,
   so the first contact field arrives sooner. */
@media (max-width:640px){
  .est-compact .est-top{ padding:22px 20px 18px }
  .est-compact .est-amount{ font-size:3rem; margin:8px 0 4px }
  .est-compact .est-price{ margin-top:14px }
  .est-compact .est-price-box input,.est-compact .est-price-box span{ font-size:1.45rem }
  .est-compact .est-price-box input{ padding:10px 0 9px }
  .est-compact .est-body{ padding:20px 20px 22px; gap:14px }
}
/* Desktop: the whole card, button included, inside a 900px-tall window. */
@media (min-width:1001px){
  .lp-ad{ padding:40px 0 64px }
  .est-compact .est-top{ padding:24px 30px 20px }
  .est-compact .est-amount{ font-size:clamp(3rem,5.2vw,3.8rem); margin:8px 0 4px }
  .est-compact .est-price{ margin-top:14px }
  .est-compact .est-body{ padding:20px 30px 22px; gap:14px }
  .est-compact .est-intro{ margin:-6px 0 0 }
}