/* ==========================================================================
   Integrity Homes / The Monument at Potomac Overlook
   One shared system for index.html and the-monument.html
   Palette measured off the rendered live site by painted area.
   ========================================================================== */

/* ---- self hosted brand font, zero external requests ---- */
@font-face{
  font-family:'Crimson Pro';
  font-style:normal;
  font-weight:200 900;
  font-display:swap;
  src:url('public/fonts/crimsonpro-latin.woff2') format('woff2');
}
@font-face{
  font-family:'Crimson Pro';
  font-style:italic;
  font-weight:200 900;
  font-display:swap;
  src:url('public/fonts/crimsonpro-latin-italic.woff2') format('woff2');
}

:root{
  /* applied palette */
  --navy:#002145;          /* primary surface, 6,632k px2 measured */
  --navy-deep:#001629;     /* derived from navy, footer only */
  --navy-line:rgba(0,33,69,.16);
  --green:#75C93D;         /* applied accent + CTA, 182k px2 measured */
  --green-hot:#68B534;     /* derived hover */
  --ink:#0A0A0A;           /* applied body text */
  --white:#FFFFFF;         /* body background, 18,530k px2 measured */
  --mist:#F5F5FA;          /* applied light band, 1,142k px2 */
  --stone:#E5E3DF;         /* applied stone band, 387k px2 */

  --sbs-bar-h:44px;
  --header-h:88px;

  --page-max:1240px;
  --page-wide:1560px;
  --page-pad:24px;
  --page-pad-mobile:16px;
  --section-y:clamp(72px,7vw,104px);
  --section-y-mobile:clamp(48px,8vw,64px);
  --radius:0px;

  --serif:'Crimson Pro',Georgia,'Times New Roman',serif;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--white);
  color:var(--ink);
  font-family:var(--serif);
  font-size:19px;
  line-height:1.62;
  font-weight:400;
  overflow-x:hidden;
}
img,svg,video{max-width:100%}
img{height:auto}
a{color:inherit}

h1,h2,h3,h4,.headline,.card-title,.cta{text-wrap:balance}
p,.subhead,.lede{text-wrap:pretty}
h1,h2,h3,h4{margin:0;font-weight:600;color:var(--navy);line-height:1.06;letter-spacing:-.012em}
h1{font-size:clamp(44px,6.4vw,92px)}
h2{font-size:clamp(34px,4.5vw,62px)}
h3{font-size:clamp(22px,2.1vw,30px);line-height:1.18}
p{margin:0 0 1em}
ul{margin:0;padding:0;list-style:none}

.section{width:100%;padding-block:var(--section-y);position:relative}
.inner,.container,.section-inner,.hero-inner,.tool-inner,.homes-inner,
.map-inner,.reviews-inner,.faq-inner,.footer-inner,.qmi-inner,.craft-inner,
.why-inner,.andrea-inner,.finalcta-inner,.compare-inner,.visit-inner{
  width:min(100% - (var(--page-pad) * 2),var(--page-max));
  margin-inline:auto;
}
.wide{width:min(100% - (var(--page-pad) * 2),var(--page-wide));margin-inline:auto}
.on-navy{background:var(--navy);color:var(--white)}
.on-navy h2,.on-navy h3,.on-navy h4{color:var(--white)}
.on-mist{background:var(--mist)}
.on-stone{background:var(--stone)}

.eyebrow{
  display:block;width:max-content;max-width:100%;
  font-size:15px;letter-spacing:.2em;text-transform:uppercase;
  font-weight:600;color:#3D6B18;margin:0 0 18px;   /* accent deep, 5.2:1 on stone, 7.6:1 on white */
}
.on-navy .eyebrow,.hero .eyebrow,.map-panel .eyebrow,.site-footer .eyebrow{color:var(--green)}
.lede{font-size:clamp(19px,1.5vw,22px);max-width:62ch;color:#3a4654}
.on-navy .lede{color:rgba(255,255,255,.82)}
.sect-head{margin-bottom:clamp(32px,3.4vw,48px)}
.sect-head.split{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(24px,4vw,64px);align-items:end}

/* ---------- hard guards (pasted before layout, Failures 1, 2, 12) ---------- */
.sbs-mark img,.sbs-lockup img,.sbs-footer-mark img,.built-by-sbs img,[class*="sbs"] img{
  filter:none !important;opacity:1 !important;mix-blend-mode:normal !important;
}
.sbs-mark img{height:36px;width:auto;display:block}
.sbs-footer-mark img{height:48px;width:auto;display:block}
.site-header .logo img,.prospect-logo img{height:62px;width:auto;display:block}
.site-footer .logo img,.footer-prospect-logo img{height:54px;width:auto;display:block}
@media (max-width:768px){
  .sbs-mark img{height:28px}
  .sbs-footer-mark img{height:40px}
  .site-header .logo img,.prospect-logo img{height:46px}
  .site-footer .logo img,.footer-prospect-logo img{height:46px}
}
.site-header{top:0 !important}
.site-header[style*="top"]{top:0 !important}

/* ---------- SBS bar: normal flow, scrolls away ---------- */
.sbs-bar{
  position:relative;min-height:var(--sbs-bar-h);z-index:950;
  background:#0d0d0d;display:flex;align-items:center;
}
.sbs-bar .wrap{
  width:min(100% - 32px,var(--page-wide));margin-inline:auto;
  display:flex;align-items:center;justify-content:space-between;gap:16px;
}
.sbs-links{display:flex;align-items:center;gap:10px}
.sbs-links a{
  font-size:13px;letter-spacing:.06em;text-transform:uppercase;text-decoration:none;
  color:#fff;padding:7px 14px;border:1px solid rgba(255,255,255,.34);line-height:1;
  white-space:nowrap;
}
.sbs-links a.solid{background:#fff;color:#0d0d0d;border-color:#fff;font-weight:600}
.sbs-links a:hover{background:rgba(255,255,255,.14)}
.sbs-links a.solid:hover{background:#dcdcdc;color:#0d0d0d}

/* ---------- prospect header: sticky in flow, locks at true zero ---------- */
.site-header{
  position:sticky;top:0;z-index:900;height:var(--header-h);
  background:transparent;margin-bottom:calc(-1 * var(--header-h));
  transition:background .25s ease;
}
.site-header .bar{
  height:var(--header-h);display:flex;align-items:center;justify-content:space-between;
  gap:20px;width:min(100% - (var(--page-pad) * 2),var(--page-wide));margin-inline:auto;
}
.site-header .logo{display:block;flex:0 0 auto}
.site-header .logo img{filter:drop-shadow(0 3px 14px rgba(0,0,0,.55))}
/* NEVER put backdrop-filter, filter or transform on .site-header. Any of the three makes
   it the containing block for the fixed .nav panel on iOS Safari and the panel collapses
   to header height with the logo painting over it. Solid fill only. */
.site-header.is-scrolled{background:#00224A}
.site-header,.site-header.is-scrolled{backdrop-filter:none !important;filter:none !important}
.site-header.is-scrolled .logo img{filter:none}
.nav{display:flex;align-items:center;gap:clamp(16px,2vw,30px)}
.nav a:not(.btn){
  color:#fff;text-decoration:none;font-size:17px;letter-spacing:.02em;
  text-shadow:0 2px 10px rgba(0,0,0,.6);padding:4px 0;border-bottom:2px solid transparent;
}
.nav a:not(.btn):hover{border-bottom-color:var(--green)}
.nav a[aria-current="page"]:not(.btn){border-bottom-color:var(--green)}
.nav .sold{opacity:.62;pointer-events:none;font-size:15px}
.nav .sold em{font-style:normal;font-size:12px;letter-spacing:.14em;text-transform:uppercase;display:block;opacity:.8}
.header-cta{display:flex;align-items:center;gap:14px}
.header-tel{
  color:#fff;text-decoration:none;font-size:17px;white-space:nowrap;
  text-shadow:0 2px 10px rgba(0,0,0,.6);
}
.header-tel:hover{color:var(--green)}
.menu-btn{display:none}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  font-family:var(--serif);font-size:18px;font-weight:600;letter-spacing:.01em;
  padding:16px 30px;border:0;cursor:pointer;text-decoration:none;line-height:1.1;
  border-radius:var(--radius);transition:background .18s ease,color .18s ease;
  min-height:54px;text-align:center;
}
/* green fill with a near black label: 9.67:1 on the label, 2.05 fill against white */
.btn-primary{background:var(--green);color:#0A0A0A}
.btn-primary:hover,.btn-primary:active{background:var(--green-hot);color:#0A0A0A}
.btn-navy{background:var(--navy);color:#fff}
.btn-navy:hover,.btn-navy:active{background:#00305f;color:#fff}
.btn-white{background:#fff;color:var(--navy);box-shadow:0 4px 22px rgba(0,0,0,.28)}
.btn-white:hover,.btn-white:active{background:var(--stone);color:var(--navy)}
.btn-sm{font-size:16px;padding:12px 20px;min-height:44px}
a.btn,button.btn{-webkit-tap-highlight-color:transparent}
:focus-visible{outline:3px solid var(--green);outline-offset:3px}

/* ---------- hero ---------- */
.hero{
  position:relative;height:calc(100svh - var(--sbs-bar-h));min-height:560px;
  overflow:hidden;background:var(--navy);
}
.hero video,.hero .hero-poster{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;
}
.hero .hero-poster{z-index:0}
.hero video{z-index:1}
.hero-scrim{
  position:absolute;inset:0;z-index:2;pointer-events:none;
  background:
    linear-gradient(100deg,rgba(0,20,41,.86) 0%,rgba(0,20,41,.66) 34%,rgba(0,20,41,.14) 62%,rgba(0,20,41,.06) 100%),
    linear-gradient(180deg,rgba(0,20,41,.5) 0%,rgba(0,20,41,0) 26%);
}
/* the supplied film ends on a dark night card. this fades the 45 to 0 wrap. */
.hero-wrapfade{
  position:absolute;inset:0;z-index:3;background:#000814;opacity:0;pointer-events:none;
  transition:opacity .45s linear;
}
.hero-wrapfade.on{opacity:1}
.hero-inner{
  position:relative;z-index:4;height:100%;
  display:flex;flex-direction:column;justify-content:center;
  padding-top:var(--header-h);padding-bottom:104px;
}
.hero-copy{max-width:min(100%,780px)}
.hero-copy .eyebrow{color:#fff;opacity:.9;text-shadow:0 2px 12px rgba(0,0,0,.8)}
.hero h1{color:#fff;text-shadow:0 4px 26px rgba(0,0,0,.66);margin-bottom:20px}
.hero .sub{
  color:#fff;font-size:clamp(19px,1.7vw,24px);max-width:54ch;margin:0 0 30px;
  text-shadow:0 2px 16px rgba(0,0,0,.72);
}
.hero-ctas{display:flex;flex-wrap:wrap;gap:14px;align-items:center}
.hero-controls{
  position:absolute;left:0;right:0;bottom:24px;z-index:5;
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  width:min(100% - (var(--page-pad) * 2),var(--page-max));margin-inline:auto;
}
.hero-ctl{
  display:inline-flex;align-items:center;gap:9px;background:#001526;
  color:#fff;border:1px solid rgba(255,255,255,.42);padding:11px 17px;cursor:pointer;
  box-shadow:0 4px 18px rgba(0,0,0,.34);
  font-family:var(--serif);font-size:15px;letter-spacing:.09em;text-transform:uppercase;
  line-height:1;min-height:44px;
}
.hero-ctl:hover{background:#002F55}
.hero-ctl svg{width:15px;height:15px;fill:currentColor;flex:0 0 auto}
.hero.text-hidden .hero-copy{opacity:0;pointer-events:none;transform:translateY(10px)}
.hero.text-hidden .hero-scrim{opacity:.22}
.hero-copy{transition:opacity .4s ease,transform .4s ease}
.hero-scrim{transition:opacity .4s ease}
.hero-badge{
  position:absolute;right:var(--page-pad);bottom:96px;z-index:4;width:112px;
  filter:drop-shadow(0 6px 22px rgba(0,0,0,.5));
}

/* ---------- proof strip ---------- */
.proof{background:var(--navy);color:#fff;padding-block:clamp(30px,3vw,44px)}
.proof-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(18px,2.4vw,40px)}
.proof-grid li{display:flex;flex-direction:column;gap:5px}
.proof-n{font-size:clamp(28px,3vw,42px);font-weight:600;line-height:1;color:#fff}
.proof-n .accent{color:var(--green)}
.proof-l{font-size:16px;color:rgba(255,255,255,.72);line-height:1.4}

/* ---------- reveal ---------- */
.reveal{opacity:0;transform:translateY(16px);transition:opacity .6s ease,transform .6s ease}
.reveal.is-in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .reveal{opacity:1;transform:none;transition:none}
  *{scroll-behavior:auto !important}
}

/* ---------- full bleed video bands ---------- */
.vband{position:relative;width:100%;overflow:hidden;background:var(--navy)}
.vband video{width:100%;height:100%;object-fit:cover;display:block}
.triptych{display:grid;grid-template-columns:repeat(3,1fr);gap:0;width:100%}
.triptych figure{position:relative;margin:0;aspect-ratio:9/11;overflow:hidden;background:var(--navy)}
.triptych video{position:absolute;inset:0;width:100%;height:100%}
.triptych figcaption{
  position:absolute;left:0;right:0;bottom:0;z-index:2;padding:26px 24px;color:#fff;
  background:linear-gradient(0deg,rgba(0,20,41,.9) 0%,rgba(0,20,41,0) 100%);
}
.triptych figcaption b{display:block;font-size:clamp(20px,1.8vw,27px);font-weight:600;line-height:1.14}
.triptych figcaption span{font-size:16px;color:rgba(255,255,255,.8)}
.tall-band{position:relative;height:clamp(420px,78svh,760px);overflow:hidden;background:var(--navy)}
.tall-band video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.tall-band .tb-copy{
  position:relative;z-index:2;height:100%;display:flex;align-items:flex-end;
  padding-bottom:clamp(36px,5vw,72px);
}
.tall-band::after{
  content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(0deg,rgba(0,20,41,.82) 0%,rgba(0,20,41,.1) 48%,rgba(0,20,41,0) 100%);
}
.tall-band h2,.tall-band p{color:#fff}
.tall-band h2{text-shadow:0 3px 20px rgba(0,0,0,.5)}
.tall-band p{color:rgba(255,255,255,.88);max-width:56ch;margin:14px 0 0}

/* ---------- Plan Your Move ---------- */
.tool-section{background:var(--stone);position:relative;overflow:hidden}
.tool-ghost{
  position:absolute;right:-2vw;top:.2em;font-size:clamp(220px,30vw,460px);line-height:.72;
  font-weight:700;color:rgba(0,33,69,.05);pointer-events:none;user-select:none;z-index:0;
}
.tool-inner{position:relative;z-index:1}
.tool{min-height:420px}
.tool-steps{display:flex;gap:0;margin:0 0 28px;border-bottom:1px solid rgba(0,33,69,.22)}
.tool-steps li{
  flex:1;padding:0 0 14px;font-size:15px;letter-spacing:.14em;text-transform:uppercase;
  color:rgba(0,33,69,.42);position:relative;
}
.tool-steps li.on{color:var(--navy);font-weight:600}
.tool-steps li.on::after{content:"";position:absolute;left:0;bottom:-1px;width:100%;height:3px;background:var(--green)}
.step{display:none}
.step.on{display:block}
.step h3{margin-bottom:6px}
.step .hint{color:#3f4a57;font-size:17px;margin:0 0 22px;max-width:62ch}
.chips{display:flex;flex-wrap:wrap;gap:10px}
.chip{
  font-family:var(--serif);font-size:17px;padding:13px 19px;cursor:pointer;line-height:1.15;
  background:#fff;color:var(--navy);border:0;min-height:48px;text-align:left;
  transition:background .16s ease,color .16s ease;
}
.chip small{display:block;font-size:14px;color:#64707d;margin-top:2px}
.chip:hover{background:var(--mist)}
.chip.sel{background:var(--navy);color:#fff}
.chip.sel small{color:rgba(255,255,255,.72)}
.step-nav{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin-top:28px}
.step-back{
  background:none;border:0;font-family:var(--serif);font-size:17px;color:var(--navy);
  cursor:pointer;text-decoration:underline;padding:12px 4px;min-height:44px;
}
.q-block{margin-bottom:26px}
.q-block h4{font-size:17px;letter-spacing:.12em;text-transform:uppercase;color:var(--navy);margin-bottom:12px;font-weight:600}
/* result */
.result-head{
  display:grid;grid-template-columns:minmax(0,1fr) auto;gap:20px;align-items:start;
  background:var(--navy);color:#fff;padding:clamp(24px,3vw,36px);
}
.result-head h3{color:#fff;margin-bottom:8px}
.result-head p{color:rgba(255,255,255,.82);margin:0;font-size:17px}
.result-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;background:var(--navy-line)}
.result-grid .rp{background:#fff;padding:22px}
.rp-name{font-size:24px;font-weight:600;color:var(--navy);line-height:1.1;margin-bottom:4px}
.rp-price{font-size:20px;color:var(--navy);font-weight:600}
.rp-meta{font-size:16px;color:#5a6673;margin:6px 0 16px;line-height:1.45}
.result-empty{background:#fff;padding:26px}
.tour-brief{
  background:#fff;padding:clamp(24px,3vw,34px);margin-top:1px;
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px 20px;
}
.tour-brief h4{grid-column:1/-1;font-size:20px;color:var(--navy);margin:0}
.tour-brief .full{grid-column:1/-1}
.field label{display:block;font-size:15px;letter-spacing:.1em;text-transform:uppercase;color:#5a6673;margin-bottom:6px}
.field input,.field textarea,.field select{
  width:100%;font-family:var(--serif);font-size:18px;padding:13px 14px;
  background:var(--mist);border:0;border-bottom:2px solid transparent;color:var(--ink);
  border-radius:0;min-height:50px;
}
.field textarea{min-height:92px;resize:vertical;line-height:1.5}
.field input:focus,.field textarea:focus,.field select:focus{outline:0;border-bottom-color:var(--green);background:#eef0f6}
.brief-line{
  grid-column:1/-1;background:var(--mist);padding:16px 20px;
  border-left:4px solid var(--green);
}
.brief-line p{margin:0;font-size:17px;color:var(--navy);max-width:580px}
.form-submit .btn{width:100%;max-width:340px}
.form-note{grid-column:1/-1;font-size:15px;color:#5f6975;margin:0;max-width:520px}

/* ---------- the homes ---------- */
.homes-filterbar{
  display:flex;flex-wrap:wrap;gap:12px;align-items:center;
  margin-bottom:clamp(22px,2.4vw,32px);font-size:17px;color:#4b5765;
}
.homes-grid{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));
  gap:1px;background:var(--navy-line);align-items:stretch;
}
.home-card{
  background:#fff;display:flex;flex-direction:column;position:relative;height:100%;
  transition:opacity .3s ease;
}
.home-card.dim{opacity:.26}
.home-card .ph{position:relative;aspect-ratio:3/2;overflow:hidden;background:var(--stone)}
.home-card .ph img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s ease}
.home-card:hover .ph img{transform:scale(1.04)}
.home-card .tag{
  position:absolute;left:0;top:0;z-index:2;background:var(--navy);color:#fff;
  font-size:13px;letter-spacing:.14em;text-transform:uppercase;padding:7px 12px;line-height:1;
}
.home-card .tag.match{background:var(--green);color:#0A0A0A;font-weight:600}
.home-card .body{padding:20px 20px 22px;display:flex;flex-direction:column;flex:1}
.home-card h3{margin-bottom:2px}
.home-price{font-size:21px;font-weight:600;color:var(--navy)}
.spec{display:flex;flex-wrap:wrap;gap:4px 16px;margin:12px 0 18px;font-size:16px;color:#5a6673}
.spec b{font-weight:600;color:var(--navy)}
.home-card .go{margin-top:auto}
.home-card .go .btn{width:100%}
.price-note{font-size:15px;color:#5f6975;margin:22px 0 0;max-width:520px}

/* ---------- craft ---------- */
.craft-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0;width:100%}
.craft-grid figure{margin:0;position:relative;aspect-ratio:16/10;overflow:hidden;background:var(--navy)}
.craft-grid video,.craft-grid img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.partners{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:clamp(20px,3vw,44px);align-items:center}
.partners img{width:100%;height:46px;object-fit:contain;object-position:center;display:block;opacity:.92}
.partner-note{font-size:15px;color:rgba(255,255,255,.62);margin:26px 0 0}

/* ---------- map (Section 18 grid: list left, map card right) ---------- */
.map-section{background:var(--navy);color:#fff;padding-block:clamp(56px,5.6vw,80px)}
.map-filters{display:flex;gap:8px;margin:0 0 22px;flex-wrap:wrap}
.map-filters button{
  font-family:var(--serif);font-size:16px;padding:11px 18px;cursor:pointer;border:0;
  background:#123A64;color:#fff;min-height:44px;line-height:1;
}
.map-filters button.on{background:var(--green);color:#0A0A0A;font-weight:600}
.map-grid{
  display:grid;grid-template-columns:minmax(300px,.42fr) minmax(0,.58fr);
  gap:clamp(26px,3vw,36px);align-items:stretch;
}
.map-list li{
  display:flex;justify-content:space-between;gap:16px;align-items:baseline;
  padding:9px 0;border-bottom:1px solid rgba(255,255,255,.14);cursor:pointer;
}
.map-list li:hover{color:var(--green)}
.map-list li.lit{color:var(--green);font-weight:600}
.map-list li b{font-weight:400;font-size:16px}
.map-list li span{font-size:15px;color:rgba(255,255,255,.66);white-space:nowrap}
.map-list li.lit span{color:var(--green)}
.map-wrap{
  position:relative;isolation:isolate;min-height:clamp(340px,46vh,520px);
  overflow:hidden;background:var(--navy-deep);
}
#map{position:absolute;inset:0;opacity:0;transition:opacity .5s ease;z-index:2}
#map.is-live{opacity:1}
.map-fallback{
  position:absolute;inset:0;z-index:1;display:flex;flex-direction:column;justify-content:center;
  gap:10px;padding:clamp(24px,3vw,40px);background:var(--navy-deep);color:#fff;
}
.map-fallback h4{color:#fff;font-size:24px}
.map-fallback p{color:rgba(255,255,255,.76);margin:0;font-size:17px;max-width:44ch}
.leaflet-pane{z-index:2 !important}
.leaflet-top,.leaflet-bottom{z-index:3 !important}
.leaflet-container{background:#eef0f2;font-family:var(--serif)}
/* lift OSM standard tiles to a clean light basemap, no API key needed */
.leaflet-tile{filter:grayscale(1) brightness(1.07) contrast(.9) saturate(.2)}
.pin{
  width:18px;height:18px;background:var(--navy);border:3px solid #fff;border-radius:50%;
  box-shadow:0 2px 8px rgba(0,0,0,.4);
}
.pin.home{width:26px;height:26px;background:var(--green);border-width:4px}
.pin.beacon{animation:pulse 1.5s ease-out infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(117,201,61,.75)}100%{box-shadow:0 0 0 22px rgba(117,201,61,0)}}
.leaflet-popup-content{font-size:16px;margin:12px 16px;line-height:1.45}
.leaflet-popup-content b{color:var(--navy)}
.leaflet-popup-content-wrapper,.leaflet-popup-tip{border-radius:0}

/* ---------- quick move ins ---------- */
.qmi-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;background:var(--navy-line)}
.qmi{background:#fff;display:grid;grid-template-columns:minmax(0,1fr)}
.qmi .ph{position:relative;aspect-ratio:16/9;overflow:hidden}
.qmi .ph img{width:100%;height:100%;object-fit:cover;display:block}
.qmi .body{padding:24px}
.qmi .tag{
  display:inline-block;background:var(--green);color:#0A0A0A;font-weight:600;font-size:13px;
  letter-spacing:.14em;text-transform:uppercase;padding:6px 11px;margin-bottom:12px;line-height:1;
}

/* ---------- reviews ---------- */
.rev-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;background:var(--navy-line)}
.rev{background:#fff;padding:clamp(22px,2.2vw,30px);display:flex;flex-direction:column}
.rev p{font-size:17px;line-height:1.58;color:#2c3641;margin:0 0 18px}
.rev cite{margin-top:auto;font-style:normal;font-weight:600;color:var(--navy);font-size:17px}
.rev::before{
  content:"\201C";font-size:64px;line-height:.72;color:var(--green);display:block;
  margin:0 0 6px -2px;flex:0 0 auto;font-weight:700;
}
.rev--lead{grid-column:span 2;background:var(--mist)}
.rev--lead p{font-size:clamp(20px,1.7vw,24px);line-height:1.44;color:var(--navy)}
.rev--lead::before{font-size:84px}
.rev--award{
  grid-column:span 2;background:var(--navy);color:#fff;flex-direction:row;align-items:center;
  gap:clamp(20px,2.4vw,32px);
}
.rev--award::before{content:none}
.rev--award img{width:clamp(86px,8vw,118px);height:auto;flex:0 0 auto}
.rev--award b{display:block;font-size:clamp(20px,1.7vw,25px);color:#fff;line-height:1.2;margin-bottom:6px}
.rev--award span{font-size:17px;color:rgba(255,255,255,.78)}

/* ---------- andrea ---------- */
.andrea-split{
  display:grid;grid-template-columns:minmax(0,.46fr) minmax(0,.54fr);
  gap:0;align-items:stretch;
}
.andrea-ph{position:relative;margin:0;overflow:hidden;background:var(--navy-deep);min-height:440px}
.andrea-ph img{
  width:100%;height:100%;display:block;object-fit:cover;object-position:50% 12%;
}
/* the animated portrait is a tight 16:9 frame, not the tall still, so it sits lower */
.andrea-ph video{
  width:100%;height:100%;display:block;object-fit:cover;object-position:50% 46%;
  -webkit-mask-image:
    linear-gradient(90deg,#000 0%,#000 76%,rgba(0,0,0,.4) 93%,rgba(0,0,0,0) 100%),
    linear-gradient(0deg,rgba(0,0,0,.35) 0%,#000 15%,#000 100%);
  -webkit-mask-composite:source-in;
  mask-image:
    linear-gradient(90deg,#000 0%,#000 76%,rgba(0,0,0,.4) 93%,rgba(0,0,0,0) 100%),
    linear-gradient(0deg,rgba(0,0,0,.35) 0%,#000 15%,#000 100%);
  mask-composite:intersect;
}
@media (max-width:860px){
  .andrea-ph video{
    -webkit-mask-image:linear-gradient(0deg,rgba(0,0,0,.4) 0%,#000 16%,#000 100%);
    mask-image:linear-gradient(0deg,rgba(0,0,0,.4) 0%,#000 16%,#000 100%);
  }
}
.andrea-ph figcaption{
  position:absolute;left:0;right:0;bottom:0;padding:22px clamp(20px,2.4vw,30px);color:#fff;
  background:linear-gradient(0deg,rgba(0,22,41,.92) 0%,rgba(0,22,41,0) 100%);
}
.andrea-ph figcaption b{display:block;font-size:23px;font-weight:600;line-height:1.15}
.andrea-ph figcaption span{font-size:16px;color:rgba(255,255,255,.78)}
.andrea-card{
  background:var(--navy);color:#fff;
  padding:clamp(28px,3.2vw,48px);display:flex;flex-direction:column;justify-content:center;
}
.andrea-card h2{color:#fff;margin-bottom:12px}
.andrea-card p{color:rgba(255,255,255,.84);max-width:52ch}
.contact-rows{margin-top:24px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 26px}
.contact-rows > div:last-child{grid-column:1/-1}
.contact-rows a,.contact-rows span{color:#fff;text-decoration:none;font-size:18px;display:block;line-height:1.45}
.contact-rows a:hover{color:var(--green)}
.contact-rows small{display:block;font-size:13px;letter-spacing:.16em;text-transform:uppercase;color:var(--green);margin-bottom:3px}
@media (max-width:860px){
  .contact-rows{grid-template-columns:1fr}
  .andrea-ph{min-height:320px;max-height:460px}
}

/* ---------- faq ---------- */
.faq-list{border-top:1px solid var(--navy-line)}
.faq-item{border-bottom:1px solid var(--navy-line)}
.faq-q{
  width:100%;background:none;border:0;text-align:left;cursor:pointer;font-family:var(--serif);
  font-size:clamp(20px,1.7vw,25px);font-weight:600;color:var(--navy);padding:24px 48px 24px 0;
  position:relative;line-height:1.25;min-height:56px;
}
.faq-q::after{
  content:"";position:absolute;right:8px;top:50%;width:14px;height:14px;
  border-right:2px solid var(--navy);border-bottom:2px solid var(--navy);
  transform:translateY(-70%) rotate(45deg);transition:transform .25s ease;
}
.faq-item.open .faq-q::after{transform:translateY(-30%) rotate(-135deg)}
.faq-a{display:none;padding:0 0 26px;max-width:620px}
.faq-item.open .faq-a{display:block}
.faq-a p{margin:0 0 .8em;color:#2c3641}
.faq-a p:last-child{margin-bottom:0}
.faq-a a{color:var(--navy);font-weight:600}

/* ---------- final cta ---------- */
.finalcta{
  position:relative;overflow:hidden;background:var(--navy-deep);
  min-height:clamp(560px,84svh,860px);display:flex;align-items:center;
  padding-block:clamp(72px,8vw,110px);
}
.finalcta video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.finalcta::after{
  content:"";position:absolute;inset:0;z-index:1;
  background:
    linear-gradient(180deg,rgba(0,16,33,.62) 0%,rgba(0,16,33,.30) 34%,rgba(0,16,33,.78) 100%),
    radial-gradient(120% 90% at 50% 45%,rgba(0,16,33,0) 30%,rgba(0,16,33,.55) 100%);
}
.finalcta-inner{
  position:relative;z-index:2;text-align:center;
  width:min(100% - (var(--page-pad) * 2),var(--page-max));margin-inline:auto;
}
.finalcta .eyebrow{color:var(--green);margin-inline:auto}
.finalcta h2{
  color:#fff;margin-bottom:18px;font-size:clamp(40px,5.6vw,80px);
  text-shadow:0 6px 34px rgba(0,0,0,.55);
}
.finalcta-lede{
  color:rgba(255,255,255,.9);font-size:clamp(19px,1.6vw,23px);max-width:58ch;
  margin:0 auto 34px;text-shadow:0 2px 16px rgba(0,0,0,.6);
}
.finalcta .hero-ctas{justify-content:center}
.finalcta-facts{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;
  margin:clamp(40px,4.5vw,62px) auto 0;background:rgba(255,255,255,.22);
  max-width:940px;text-align:left;
}
.finalcta-facts li{background:rgba(0,18,36,.82);padding:20px clamp(18px,2vw,26px)}
.finalcta-facts b{display:block;color:#fff;font-size:19px;font-weight:600;line-height:1.25}
.finalcta-facts span,.finalcta-facts a{display:block;color:rgba(255,255,255,.76);font-size:16px;text-decoration:none;margin-top:3px}
.finalcta-facts a:hover{color:var(--green)}
@media (max-width:768px){ .finalcta-facts{grid-template-columns:1fr;text-align:center} }

/* ---------- footer ---------- */
.site-footer{background:var(--navy-deep);color:#fff;padding-block:clamp(56px,6vw,80px) 0}
.footer-top{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr) minmax(0,1.1fr);gap:clamp(28px,4vw,56px)}
.site-footer h4{font-size:15px;letter-spacing:.18em;text-transform:uppercase;color:var(--green);margin-bottom:16px}
.site-footer a:not(.btn){color:rgba(255,255,255,.86);text-decoration:none}
/* the SBS lockup owns its own colours inside the footer, at higher specificity than the
   footer's prose link rule. Without this the solid button renders white on white. */
.site-footer .sbs-links a{color:#fff}
.site-footer .sbs-links a.solid{background:#fff;color:#0d0d0d}
.site-footer .sbs-links a:hover{background:rgba(255,255,255,.14);color:#fff}
.site-footer .sbs-links a.solid:hover{background:#dcdcdc;color:#0d0d0d}
.site-footer a:not(.btn):hover{color:var(--green)}
.fnav li{padding:6px 0;font-size:17px}
.fcontact li{padding:6px 0;font-size:17px;color:rgba(255,255,255,.86)}
.blog-card{display:block;text-decoration:none;background:rgba(255,255,255,.06)}
.blog-card img{width:100%;aspect-ratio:16/9;object-fit:cover;display:block}
.blog-card .bc{padding:20px 22px 26px;display:block}
.blog-card .bc time{display:block;font-size:14px;letter-spacing:.1em;text-transform:uppercase;color:var(--green);margin-bottom:8px}
.blog-card .bc b{display:block;font-size:20px;font-weight:600;color:#fff;margin:0;line-height:1.3}
.blog-card:hover .bc b{color:var(--green)}
.footer-mid{
  margin-top:clamp(36px,4vw,54px);padding-top:28px;border-top:1px solid rgba(255,255,255,.14);
  display:flex;flex-wrap:wrap;gap:22px;align-items:center;justify-content:space-between;
}
.footer-disclaimer{font-size:14px;color:rgba(255,255,255,.58);line-height:1.55;margin:22px 0 0;max-width:480px}
.sbs-lockup{
  margin-top:clamp(36px,4vw,50px);background:#0d0d0d;
  padding:26px max(var(--page-pad),calc((100% - var(--page-max)) / 2));
  display:flex;flex-wrap:wrap;gap:18px;align-items:center;justify-content:space-between;
}
.copyright{
  background:#0d0d0d;
  padding:0 max(var(--page-pad),calc((100% - var(--page-max)) / 2)) 22px;
  display:flex;flex-wrap:wrap;gap:10px;justify-content:space-between;align-items:center;
  font-size:15px;color:rgba(255,255,255,.55);
}
.build-marker{font-size:13px;letter-spacing:.16em;color:rgba(255,255,255,.3)}

/* ---------- floating cta ---------- */
.floating-cta{
  position:fixed;right:22px;bottom:calc(22px + env(safe-area-inset-bottom));z-index:800;min-height:56px;
  box-sizing:border-box;
  opacity:0;transform:translateY(12px);pointer-events:none;
  transition:opacity .3s ease,transform .3s ease;box-shadow:0 8px 30px rgba(0,0,0,.3);
}
.floating-cta.show{opacity:1;transform:none;pointer-events:auto}
.floating-cta.is-hidden{opacity:0 !important;transform:translateY(12px) !important;pointer-events:none !important}

/* ---------- compare tool, page two ---------- */
.compare-stage{min-height:200px;background:#fff;border-top:3px solid var(--green)}
.compare-empty{padding:28px;color:#4b5765;font-size:18px;margin:0;max-width:620px}
.ctable{width:100%;border-collapse:collapse}
.ctable th,.ctable td{text-align:left;padding:14px 16px;border-bottom:1px solid var(--navy-line);font-size:17px;vertical-align:top}
.ctable thead th{font-size:15px;letter-spacing:.12em;text-transform:uppercase;color:#5a6673;font-weight:600}
.ctable tbody th{font-size:15px;letter-spacing:.1em;text-transform:uppercase;color:#5a6673;font-weight:600;width:170px}
.ctable td b{font-size:20px;color:var(--navy)}
.pin-btn{
  position:absolute;right:0;top:0;z-index:2;background:var(--navy);color:#fff;border:0;
  font-family:var(--serif);font-size:15px;padding:9px 13px;cursor:pointer;min-height:40px;line-height:1;
  box-shadow:0 3px 14px rgba(0,0,0,.34);
}
.pin-btn.on{background:var(--green);color:#0A0A0A;font-weight:600}
.visit-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;background:rgba(255,255,255,.16)}
.visit-grid > div{background:var(--navy);padding:clamp(22px,2.6vw,32px)}
.visit-grid h4{color:var(--green)}
.visit-grid p,.visit-grid a{color:#fff;font-size:18px;margin:0 0 6px;text-decoration:none;display:block}
.visit-grid a:hover{color:var(--green)}

/* ---------- responsive ---------- */
@media (max-width:1080px){
  .footer-top{grid-template-columns:repeat(2,minmax(0,1fr))}
  .partners{grid-template-columns:repeat(3,minmax(0,1fr))}
  .result-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .rev-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .map-grid{grid-template-columns:minmax(0,1fr)}
  .map-wrap{min-height:clamp(320px,44vh,420px)}
  .sect-head.split{grid-template-columns:minmax(0,1fr);align-items:start}
  .visit-grid{grid-template-columns:1fr}
}
@media (max-width:860px){
  .andrea-split{grid-template-columns:1fr}
  .qmi-grid{grid-template-columns:1fr}
  .craft-grid{grid-template-columns:1fr}
  .proof-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .tour-brief{grid-template-columns:1fr}
  .result-head{grid-template-columns:1fr}
}
@media (max-width:768px){
  :root{--header-h:68px}
  body{font-size:17px}
  .section{padding-block:var(--section-y-mobile)}
  .inner,.container,.section-inner,.hero-inner,.tool-inner,.homes-inner,
  .map-inner,.reviews-inner,.faq-inner,.footer-inner,.qmi-inner,.craft-inner,
  .why-inner,.andrea-inner,.finalcta-inner,.compare-inner,.visit-inner,.wide{
    width:min(100% - (var(--page-pad-mobile) * 2),var(--page-max));
  }
  .nav{
    position:fixed;top:0;right:0;bottom:0;left:auto;
    width:min(84vw,340px);height:100vh;height:100dvh;background:var(--navy);
    flex-direction:column;align-items:flex-start;justify-content:flex-start;gap:4px;
    padding:calc(96px + env(safe-area-inset-top)) 26px calc(26px + env(safe-area-inset-bottom));
    transform:translateX(100%);transition:transform .3s ease;z-index:1200;
    overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;
  }
  .nav.open{box-shadow:-18px 0 40px rgba(0,0,0,.45)}
  .menu-btn{z-index:1210}
  .nav.open{transform:none}
  .nav a:not(.btn){font-size:21px;padding:12px 0;text-shadow:none;width:100%}
  .menu-btn{
    display:inline-flex;align-items:center;justify-content:center;width:46px;height:46px;
    background:#001526;color:#fff;border:1px solid rgba(255,255,255,.4);cursor:pointer;z-index:930;
    box-shadow:0 4px 18px rgba(0,0,0,.34);
    position:relative;
  }
  .menu-btn span{display:block;width:20px;height:2px;background:#fff;position:relative}
  .menu-btn span::before,.menu-btn span::after{
    content:"";position:absolute;left:0;width:20px;height:2px;background:#fff;
  }
  .menu-btn span::before{top:-6px}
  .menu-btn span::after{top:6px}
  .header-tel{display:none}
  .header-cta > .btn{display:none}      /* the CTA moves into the menu panel */
  .site-header .bar{gap:12px}
  .site-header .logo img,.prospect-logo img{height:42px}
  .nav .nav-cta{display:inline-flex;margin-top:14px}
  .hero-inner{padding-bottom:150px}
  .hero-ctas .btn{width:100%}
  .hero-controls{
    bottom:calc(16px + env(safe-area-inset-bottom));gap:8px;align-items:stretch;
  }
  .hero-ctl{flex:1 1 0;justify-content:center;font-size:13px;letter-spacing:.06em;padding:11px 8px}
  .hero-ctl svg{width:13px;height:13px}
  .hero-badge{width:74px;bottom:auto;top:calc(var(--header-h) + 14px);right:16px}
  .triptych{grid-template-columns:1fr}
  .triptych figure{aspect-ratio:16/11}
  .partners{grid-template-columns:repeat(2,minmax(0,1fr))}
  .result-grid,.rev-grid{grid-template-columns:1fr}
  .andrea-split{grid-template-columns:1fr}
  .homes-grid{grid-template-columns:1fr}
  .tool-steps li{font-size:12px;letter-spacing:.08em}
  .footer-top{grid-template-columns:1fr}
  .floating-cta{
    display:flex;box-sizing:border-box;
    left:14px;right:14px;width:auto;max-width:none;min-width:0;
    bottom:calc(14px + env(safe-area-inset-bottom));
    min-height:58px;font-size:17px;padding:16px 14px;
    justify-content:center;text-align:center;
  }
  .footer-mid .btn{width:100%}
  .ctable tbody th{width:110px;font-size:13px}
  .ctable th,.ctable td{padding:11px 10px;font-size:16px}
  .map-wrap{min-height:330px}
  .rev--lead,.rev--award{grid-column:span 1}
  .rev--award{flex-direction:column;align-items:flex-start}
}

/* utilities last */
.mt-0{margin-top:0}
.mb-0{margin-bottom:0}
.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0;
}
[id]{scroll-margin-top:calc(var(--header-h) + 24px)}

/* ---------- page two overview, replaces inline layout styles ---------- */
.award-row{display:grid;grid-template-columns:auto minmax(0,1fr);gap:clamp(22px,4vw,48px);align-items:center}
.award-row img{width:clamp(92px,9vw,140px);height:auto}
.award-row p{margin:0;color:#3a4654;max-width:58ch}
.award-row h3{margin-bottom:10px}
@media (max-width:560px){ .award-row{grid-template-columns:1fr} }
.nav-sold{opacity:.62;font-size:15px;color:#fff;text-shadow:0 2px 10px rgba(0,0,0,.6);white-space:nowrap}
.nav-sold em{font-style:normal;font-size:12px;letter-spacing:.14em;text-transform:uppercase;display:block;opacity:.85}
.map-note{font-size:15px;color:rgba(255,255,255,.66);margin:18px 0 0;max-width:46ch}
.map-note a{color:var(--green)}
.map-lede{margin-bottom:24px}
.partners-head{font-size:16px;letter-spacing:.2em;text-transform:uppercase;color:var(--green);margin-bottom:26px;font-weight:600}
.footer-note{margin:0;font-size:16px;color:rgba(255,255,255,.72)}
.plan-note{font-size:16px;color:#5a6673;margin:-8px 0 16px}
.form-inline-link{color:var(--navy);font-weight:600}
.craft-partners{padding-top:clamp(40px,4vw,56px)}
.tour-form-wrap{margin-top:clamp(28px,3vw,44px)}
.visit-cta-wrap{margin-top:clamp(28px,3vw,40px)}
.visit-grid p.muted{color:rgba(255,255,255,.76);font-size:17px}
.compare-stage-wrap{margin-top:2px}

.nav .nav-cta{display:none}
.nav .nav-tel{display:none}
@media (max-width:768px){
  .nav .nav-cta,.nav .nav-tel{display:inline-flex;width:100%;justify-content:center}
  .nav .nav-tel{margin-top:10px}
}

/* the plan note must not push the action off the shared baseline */
.home-card .plan-note{min-height:0}
.ctable td .btn{width:100%}
.qmi .body .btn{width:100%;max-width:420px}

/* a two line action label, broken at a phrase that reads, so every card action in a grid
   is exactly the same height no matter how long the plan name is */
.btn-2line{
  flex-direction:column;gap:2px;line-height:1.2;padding-top:11px;padding-bottom:11px;
  min-height:62px;white-space:nowrap;
}
.btn-2line .l1{display:block}
.btn-2line .l2{display:block;font-weight:400;opacity:.88;font-size:16px}
@media (max-width:768px){ .btn-2line{min-height:60px} }

/* ---------- mobile menu: scrim, scroll lock, and nothing floating over the panel ---------- */
.nav-scrim{
  position:fixed;inset:0;z-index:1150;background:rgba(0,12,24,.62);
  opacity:0;pointer-events:none;transition:opacity .28s ease;
}
body.menu-open .nav-scrim{opacity:1;pointer-events:auto}
body.menu-open{overflow:hidden}
body.menu-open .floating-cta{opacity:0 !important;pointer-events:none !important}
@media (min-width:769px){ .nav-scrim{display:none} }

/* ---------- SBS bar on small screens: tighter, one line, never two rows ---------- */
@media (max-width:768px){
  .sbs-bar .wrap{gap:10px}
  .sbs-mark img{height:24px}
  .sbs-links{gap:7px}
  .sbs-links a{font-size:11px;letter-spacing:.04em;padding:6px 9px}
}
@media (max-width:400px){
  .sbs-mark img{height:21px}
  .sbs-links a{font-size:10px;letter-spacing:.02em;padding:6px 7px}
}

@media (max-width:400px){
  .floating-cta{font-size:16px;padding:16px 12px}
}

/* the closed off-canvas panel must not be focusable and must not extend the scroll width */
@media (max-width:768px){
  .nav:not(.open){visibility:hidden}
  .nav.open{visibility:visible}
}

/* .eyebrow uses width:max-content so the prose-measure gate reads it as a label, not prose.
   Inside a 1fr grid track that max-content becomes the track's minimum and widens the page
   below ~372px. Let it be a normal block on phones. */
@media (max-width:768px){
  .eyebrow{width:auto;max-width:100%}
  .sect-head.split{grid-template-columns:minmax(0,1fr)}
}