/* GLP Home Options: shared styles.
   Palette is sampled from the logo (slate navy roof + forest green roof) on light surfaces.
   No dark mode on purpose: the brand is bright, clear and calm. */

@font-face{font-family:"Plus Jakarta Sans";font-style:normal;font-weight:200 800;font-display:swap;src:url("../fonts/plus-jakarta-sans-latin-wght-normal.woff2") format("woff2")}
@font-face{font-family:"Fraunces";font-style:italic;font-weight:100 900;font-display:swap;src:url("../fonts/fraunces-latin-wght-italic.woff2") format("woff2")}

:root{
  /* Logo navy */
  --navy-900:#1a323d; --navy-800:#233948; --navy-700:#2d4855; --navy-600:#3b5b69; --navy-500:#527785;
  --navy-300:#a3b8c0; --navy-200:#c7d5da; --navy-100:#e3ebee;
  /* Logo green */
  --green-800:#2e5649; --green-700:#366554; --green-600:#3c7a66; --green-500:#4e9279; --green-400:#6faa93;
  --green-300:#9fc8b8; --green-200:#c9e0d6; --green-100:#e4f0eb; --green-50:#f2f8f5;
  --cream:#f6f0e3;--cream-100:#f8f3e7;
  --ink:var(--navy-800);
  --text:#3d5560;
  --muted:#4a626d;
  --line:#dce6e6; --line-2:#cbd8d8;
  --grad:linear-gradient(135deg,#2d4855 0%,#37625c 52%,#3c7a66 100%);
  --sh-1:0 1px 2px rgba(26,50,61,.05),0 6px 18px rgba(26,50,61,.06);
  --sh-2:0 2px 4px rgba(26,50,61,.05),0 14px 34px rgba(26,50,61,.10);
  --sh-3:0 4px 10px rgba(26,50,61,.06),0 28px 60px rgba(26,50,61,.16);
  --r-s:12px; --r-m:20px; --r-l:28px;
  --f:"Plus Jakarta Sans",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --f-serif:"Fraunces",Georgia,"Times New Roman",serif;
  --maxw:max(1240px,77.5rem);
  --pull:clamp(64px,8vw,112px);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:92px;color-scheme:light}
main{overflow-x:clip}
body{margin:0;background:#fff;color:var(--text);font:450 1rem/1.65 var(--f);font:450 clamp(1rem,.96rem + .2vw,1.0625rem)/1.65 var(--f);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:clip;overflow-wrap:break-word}
img,svg,canvas{max-width:100%}
img{height:auto}
h1,h2,h3,h4{margin:0;color:var(--ink);font-family:var(--f);text-wrap:balance;overflow-wrap:anywhere}
/* line breaks that avoid a lonely last word (Checkpoint 27): paragraphs use "pretty", short items (list items, questions, table cells) use "balance". Chrome, Edge and Safari apply it; other browsers ignore it. */
p,dd,dt,figcaption,blockquote{text-wrap:pretty}
li,summary,th,td{text-wrap:balance}
h1{font-size:2.35rem;font-size:clamp(2.35rem,4.7vw,4.2rem);line-height:1.02;letter-spacing:-.04em;font-weight:800}
h2{font-size:2.05rem;font-size:clamp(2.05rem,4.5vw,3.5rem);line-height:1.04;letter-spacing:-.035em;font-weight:800}
h3,.h3{font-size:1.3rem;line-height:1.2;letter-spacing:-.02em;font-weight:700}
p{margin:0}
a{color:inherit}
b,strong{font-weight:700}
.ital{font-family:var(--f-serif);font-style:italic;font-weight:500;letter-spacing:-.015em;color:var(--green-600);font-size:1.04em}
h1 .ital,h2 .ital{display:block}
.h1 .dot{margin-left:-.07em}
.lede{font-size:1.06rem;font-size:clamp(1.06rem,1.4vw,1.2rem);line-height:1.65;color:var(--text);max-width:62ch}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
.nb{white-space:nowrap}
.nb.ph{display:inline-block;max-width:100%;white-space:normal}   /* the phone number: one piece that moves to the next line whole; only if even a full line is too narrow for it (a small phone with the text blown up) does it wrap, at its one space, rather than run off the screen */
span.nb.ph{text-decoration:inherit}   /* an inline block does not pick up its parent link's underline by itself */
/* A wrapper is a plain run of text, whatever rule styles the spans around it: `.opt-card .beats div span{display:block;font-size:.97rem}` and `.faq-card span{font-size:.9rem}` also reached a wrapper nested in such a span
   ("short-term" dropped onto its own line and shrank twice; the number in the FAQ card shrank). tools/nobreak-test.py (STYLE) fails if a wrapper is ever not inline, not the size of the text around it, or has its own margin or padding. */
span.nb{display:inline!important;margin:0!important;padding:0!important;font-size:inherit!important;letter-spacing:inherit!important}
span.nb.ph{display:inline-block!important}
.reach .nb,.ftr-col .nb{white-space:normal}   /* the contact tiles and the footer link keep their own block and wrap as they always did */
.i{width:1.25em;height:1.25em;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex:none}
main:focus{outline:none}

:focus-visible{outline:3px solid var(--navy-700);outline-offset:3px;border-radius:6px}
.contact :focus-visible,.pano :focus-visible,.cta-band :focus-visible{outline-color:#fff}
.contact .form-card :focus-visible{outline-color:var(--navy-700)}

.skip{position:absolute;left:12px;top:0;transform:translateY(-150%);z-index:200;background:var(--navy-800);color:#fff;padding:12px 18px;border-radius:12px;font-weight:700;text-decoration:none}
.skip:focus{top:calc(12px + env(safe-area-inset-top,0px));transform:none;outline-color:#fff}

.wrap{width:100%;max-width:var(--maxw);margin-left:auto;margin-right:auto;margin-inline:auto;padding-left:max(20px,env(safe-area-inset-left,0px));padding-left:max(clamp(20px,4vw,48px),env(safe-area-inset-left,0px));padding-right:max(20px,env(safe-area-inset-right,0px));padding-right:max(clamp(20px,4vw,48px),env(safe-area-inset-right,0px))}
.sec{position:relative;padding-top:76px;padding-bottom:76px;padding-block:clamp(76px,10vw,136px)}
.sec-cream{background:var(--cream-100)}
.head{display:grid;gap:18px;max-width:780px;margin-bottom:40px;margin-bottom:clamp(40px,6vw,72px)}
.head.center{max-width:980px;margin-left:auto;margin-right:auto;margin-inline:auto;text-align:center;justify-items:center}
.eyebrow{display:inline-flex;align-items:center;gap:12px;font:800 .78rem/1 var(--f);letter-spacing:.16em;text-transform:uppercase;color:var(--green-700)}
.eyebrow::before{content:"";width:30px;height:3px;border-radius:3px;background:var(--grad)}
.eyebrow.on-dark{color:#e8f6ef}
.contact .eyebrow.on-dark{color:#fff}
.eyebrow.on-dark::before{background:linear-gradient(90deg,#fff,#9fc8b8)}

/* ---------- Buttons ---------- */
.btn{position:relative;overflow:hidden;display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:52px;padding:0 28px;border-radius:999px;border:1.5px solid transparent;font:700 1rem/1 var(--f);text-decoration:none;cursor:pointer;transition:transform .2s ease,box-shadow .25s ease,background .25s ease,border-color .25s ease,color .25s ease;-webkit-tap-highlight-color:transparent}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:translateY(0) scale(.985)}
.btn-primary{background:linear-gradient(135deg,#3a7a66,#316656);color:#fff;box-shadow:0 4px 14px rgba(49,102,86,.22),inset 0 1px 0 rgba(255,255,255,.14)}
.btn-primary:hover{background:linear-gradient(135deg,#34705d,#2a5a4c);box-shadow:0 8px 20px rgba(49,102,86,.28),inset 0 1px 0 rgba(255,255,255,.14)}
.btn-ghost{background:#fff;color:var(--navy-700);border-color:var(--navy-200)}
.btn-ghost:hover{border-color:var(--navy-700);background:var(--cream-100);box-shadow:var(--sh-1)}
.btn-lg{min-height:60px;padding:0 34px;font-size:1.06rem}
.btn-sm{min-height:46px;padding:0 22px;font-size:.95rem}
.btn .i{width:1.15em;height:1.15em;transition:transform .25s ease}
.btn .bl{text-align:center;line-height:1.25}   /* a label with the phone number in it (Checkpoint 36): one flex item, so "Call" and the number sit one space apart and, when the words wrap, the number stays whole (see .nb) */
.btn:hover .i:last-child{transform:translateX(3px)}
.cta-row{display:flex;flex-wrap:wrap;gap:14px}

/* ---------- Header ---------- */
.hdr{position:sticky;top:0;z-index:60;background:rgba(255,255,255,.74);-webkit-backdrop-filter:saturate(1.8) blur(16px);backdrop-filter:saturate(1.8) blur(16px);transition:background .3s ease,box-shadow .3s ease}
.hdr.scrolled{background:rgba(255,255,255,.95);box-shadow:0 1px 0 var(--line),0 10px 30px rgba(26,50,61,.06)}
/* every page: at the top the header takes the hero's cream, so there is no seam; it turns to white glass once you scroll */
body:has(.hero,.phero,.doc-hero) .hdr:not(.scrolled){background:#fdfbf6}
/* constant header height: the old shrink-on-scroll pulled the whole page up by 14px the moment you started to scroll */
.hdr-row{display:flex;align-items:center;gap:18px;min-height:80px}
.brand{display:inline-flex;flex:none;align-items:center;gap:12px;text-decoration:none;min-height:44px;color:var(--navy-700)}
.brand img{height:50px;width:auto;display:block}
.wordmark{display:inline-flex;align-items:center;gap:9px;line-height:1}
/* Larger text (Checkpoint 28): when a reader makes text bigger, the logo words and the Menu word keep their normal size (they are brand art and a button label), so the Menu button can never slide off the screen. The three header breakpoints are written in em: 77.5em is 1240px at the normal text size and grows with the browser's text size setting, so the menu bar folds into the Menu button before it runs out of room. */
.wordmark b{font:800 min(1.95rem,31.2px)/1 var(--f);letter-spacing:-.035em;color:var(--navy-700)}
.wm-sub{display:grid;gap:4px;font:700 min(.66rem,10.56px)/1 var(--f);letter-spacing:.17em}
.wm-sub i{font-style:normal}
.wm-sub i:first-child{color:var(--navy-700)}
.wm-sub i:last-child{color:var(--green-600);letter-spacing:.27em}
.nav{display:flex;align-items:center;gap:2px;margin-left:auto}
.nav a{position:relative;padding:11px 12px;border-radius:999px;font:650 .93rem/1 var(--f);color:var(--navy-700);text-decoration:none;white-space:nowrap;transition:background .2s,color .2s}
.nav a:hover{background:var(--green-50);color:var(--green-700)}
.nav a.active{background:var(--green-100);color:var(--green-800)}
.hdr-cta{flex:none;white-space:nowrap}
.menu-btn{display:none;align-items:center;gap:8px;margin-left:auto;min-height:46px;padding:0 18px;border-radius:999px;border:1.5px solid var(--navy-200);background:#fff;color:var(--navy-800);font:700 min(.95rem,15.2px)/1 var(--f);cursor:pointer}
.menu-btn[aria-expanded="true"]{background:var(--navy-800);border-color:var(--navy-800);color:#fff}
.mnav{position:absolute;left:0;right:0;top:100%;background:#fff;border-top:1px solid var(--line);box-shadow:0 24px 40px rgba(26,50,61,.14);padding:6px max(18px,env(safe-area-inset-left,0px)) 22px;max-height:calc(100vh - 70px);max-height:calc(100svh - 70px);overflow:auto}
.mnav nav a{display:flex;align-items:center;justify-content:space-between;min-height:56px;border-bottom:1px solid var(--line);font:700 1.06rem/1 var(--f);color:var(--navy-800);text-decoration:none}
.mnav nav a::after{content:"";width:8px;height:8px;border-top:2px solid var(--green-600);border-right:2px solid var(--green-600);transform:rotate(45deg);margin-right:6px}
.mnav nav a.active{color:var(--green-700)}
.mnav-cta{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,8em),1fr));gap:12px;padding-top:18px}
@media (max-width:77.5em){.nav{display:none}.hdr-cta{margin-left:auto}.menu-btn{display:inline-flex;margin-left:0}}
/* Letters made bigger by the phone (Checkpoint 29): iPhone "aA" and the Android font size grow the letters themselves, not the screen or the caps above, so when the logo and the Menu button no longer fit, the logo gives way (its words wrap, then tuck behind the button) and the Menu button always stays on the screen */
@media (max-width:77.5em){.brand{flex:0 1 auto;min-width:0}.brand img{flex:none}.wordmark{min-width:0;flex-wrap:wrap;gap:2px 9px}.menu-btn{flex:none}.hdr-row{column-gap:6px;column-gap:clamp(6px,calc(100vw - 345px),18px)}}
@media (max-width:40em){.hdr-cta{display:none}.menu-btn{margin-left:auto}}
@media (min-width:77.5625em){.mnav{display:none!important}}
/* Wide screens with bigger letters (an iPad held sideways with its text size raised): if the logo, the menu bar and the buttons no longer fit on one line, the menu bar drops to a second line instead of pushing the buttons off the screen (Checkpoint 29) */
@media (min-width:77.5625em){.hdr-row{flex-wrap:wrap;row-gap:4px}.nav{flex-wrap:wrap;justify-content:flex-end}}
/* While the bottom bar is showing, the open menu stops above it, so the last items (Call and Text) can always be scrolled into view; on short phones (an iPhone SE is 667px tall) or with bigger text the bar used to cover them (Checkpoint 28). The bar's allowance is max(4.75rem, 4.4em): em follows the letters themselves when a phone enlarges them (the bar grows with them), the rem keeps the normal size exactly as it was; the Call and Text buttons stack once two of them no longer fit side by side (8em each, Checkpoint 29) */
@media (max-width:47.5em){body:has(.mobile-bar.on) .mnav{max-height:calc(100vh - 82px - max(4.75rem,4.4em) - env(safe-area-inset-bottom,0px));max-height:calc(100svh - 82px - max(4.75rem,4.4em) - env(safe-area-inset-bottom,0px))}}
@media (max-width:26.25em){.wordmark b{font-size:min(1.6rem,25.6px)}.wm-sub{font-size:min(.58rem,9.28px)}.brand img{height:38px}.hdr-row{min-height:70px}}
/* phones held sideways (about 500px tall or less): a slimmer header with the same logo sizes the narrow phones use, so the page gets back about 22px of a short screen (Checkpoint 26) */
@media (max-height:500px) and (orientation:landscape){.hdr-row{min-height:58px}.brand img{height:38px}.wordmark b{font-size:min(1.6rem,25.6px)}.wm-sub{font-size:min(.58rem,9.28px)}html{scroll-padding-top:70px}}
/* narrowest phones (320 to 350px): the Menu button shows only its icon; the word stays as its accessible name */
@media (max-width:21.875em){.menu-btn{width:46px;padding:0;justify-content:center}.menu-btn span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}}

/* ---------- Scroll reveal ---------- */
@keyframes reveal{from{opacity:0;transform:translateY(28px)}to{opacity:1;transform:none}}
.js .rv:not(.in){opacity:0}
.js .rv.in{animation:reveal .85s cubic-bezier(.2,.7,.2,1) backwards;animation-delay:calc(var(--d,0) * 90ms)}

/* ---------- Hero ---------- */
.hero{position:relative;isolation:isolate;overflow:hidden;padding:34px 0 calc(var(--pull) + 80px);padding:clamp(34px,5vw,76px) 0 calc(var(--pull) + clamp(80px,9vw,130px))}
/* D2 (approved; extended by Jeremy): cream is the site's one tint. Every hero, every alternate section and the footer use it; the cool mist and mint tints are retired */
.hero-bg{position:absolute;top:0;right:0;bottom:0;left:0;inset:0;z-index:-1;background:linear-gradient(180deg,#fdfbf6 0%,var(--cream) 55%,#efe8d8 100%)}
.topo{position:absolute;top:0;right:0;bottom:0;left:0;inset:0;width:100%;height:100%;pointer-events:none}
.ridge{position:absolute;left:0;right:0;bottom:-1px;width:100%;height:150px;height:clamp(150px,18vw,270px);display:block}
.ridge path{will-change:transform}
.ridge .r1{fill:rgba(60,122,102,.15);transform:translate3d(0,calc(var(--p,0) * -26px),0)}
.ridge .r2{fill:rgba(45,72,85,.10);transform:translate3d(0,calc(var(--p,0) * -14px),0)}
.ridge .r3{fill:var(--cream-100)}
.hero-grid{position:relative;display:grid;grid-template-columns:minmax(0,1.14fr) minmax(0,.86fr);gap:28px;gap:clamp(28px,5vw,72px);align-items:center}
.hero-copy{display:grid;gap:26px;align-content:center;justify-items:start}
.live{position:relative;display:inline-block;width:9px;height:9px;border-radius:50%;background:var(--green-500);flex:none}
.h1 .w{display:inline-block;animation:rise .95s cubic-bezier(.2,.75,.2,1) both;animation-delay:calc(var(--i) * 80ms + .1s)}
.h1 .ital{font-size:1.02em;line-height:1.1}
@keyframes rise{from{opacity:0;transform:translateY(.5em)}to{opacity:1;transform:none}}
.hero-lede{font-size:1.08rem;font-size:clamp(1.08rem,1.55vw,1.26rem);max-width:52ch}
.micro{display:flex;align-items:center;gap:10px;font-size:.93rem;color:var(--muted)}
.micro .i{color:var(--green-600)}

.hero-visual{position:relative;width:min(100%,540px);margin-left:auto;margin-right:auto;margin-inline:auto;padding:6px 0 26px}
.gable{position:relative;margin:0;aspect-ratio:560/620;filter:drop-shadow(0 32px 40px rgba(26,50,61,.22))}
.gable .g1{position:absolute;top:0;right:0;bottom:0;left:0;inset:0;background:var(--grad);clip-path:url(#gable)}
.gable .g2{position:absolute;top:7px;right:7px;bottom:7px;left:7px;inset:7px;background:#fff;clip-path:url(#gable)}
.gable .g3{position:absolute;top:14px;right:14px;bottom:14px;left:14px;inset:14px;overflow:hidden;clip-path:url(#gable);background:var(--navy-100)}
/* keep the line above; the shade below grounds the photo and the name plate */
.gable .g3 img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 20%;transform-origin:50% 40%}
.gable .g3::after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;inset:0;background:linear-gradient(180deg,rgba(26,50,61,0) 58%,rgba(26,50,61,.20) 100%);pointer-events:none}
.gable-cap{position:absolute;right:11%;bottom:5.5%;display:grid;gap:2px;padding:10px 16px;border-radius:14px;background:#fff;box-shadow:var(--sh-2);text-align:left}
.gable-cap b{font:800 .98rem/1.1 var(--f);color:var(--navy-800)}
.gable-cap span{font:700 .68rem/1.2 var(--f);letter-spacing:.1em;text-transform:uppercase;color:var(--green-700)}

/* ---------- Home hero: photo caption ----------
   The floating tags were removed (Jeremy, Oct 21): they sat on top of the photo and repeated what the numbers strip says. The photo carries one quiet name plate. */
.hero .gable-cap{right:20px;bottom:28px;padding:9px 14px;border-radius:12px}
.hero .gable-cap b{font-size:.95rem}
.hero .gable-cap span{font-size:.64rem}

/* staging: a still pool of light behind the photo lifts it off the cream */
.hero .hero-visual::before{content:"";position:absolute;z-index:-1;top:-8%;right:-16%;bottom:-4%;left:-16%;inset:-8% -16% -4%;border-radius:50%;background:radial-gradient(closest-side,rgba(255,255,255,.9),rgba(255,255,255,.5) 48%,rgba(255,255,255,0) 74%);pointer-events:none}


/* a calm entrance: copy rises in order and the photo settles (switched off by reduced motion) */
@keyframes enter{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
@keyframes enter-photo{from{opacity:0;transform:translateY(26px) scale(.975)}to{opacity:1;transform:none}}
.hero .hero-copy>.hero-eyebrow{animation:enter .7s cubic-bezier(.2,.7,.2,1) both}
.hero .hero-copy>.lede{animation:enter .75s cubic-bezier(.2,.7,.2,1) .42s both}
.hero .hero-copy>.cta-row{animation:enter .7s cubic-bezier(.2,.7,.2,1) .5s both}
.hero .hero-copy>.micro{animation:enter .7s cubic-bezier(.2,.7,.2,1) .58s both}
.hero .gable{animation:enter-photo .9s cubic-bezier(.2,.7,.2,1) .08s both}

@media (max-width:61.25em){
  .hero-grid{grid-template-columns:minmax(0,1fr)}
  .hero-visual{width:min(100%,470px)}
}
@media (max-width:32.5em){
  .hero-visual{width:min(100%,400px);padding-bottom:14px}
  .gable-cap{right:9%;bottom:4%;padding:8px 12px}
  .cta-row .btn-lg{width:100%}
}
@media (min-width:61.3125em){.hero{padding-bottom:calc(var(--pull) + 36px);padding-bottom:calc(var(--pull) + clamp(36px,4.2vw,64px))}}  /* room under the people for the hills (--pull) */
@media (max-width:32.5em){
  .hero-copy{gap:20px}
  .hero{padding-top:24px}
  .hero-lede{font-size:1rem;line-height:1.58}
  .hero .cta-row .btn-lg{min-height:56px}
  .hero .hero-visual{padding-bottom:34px}
  .hero .gable-cap{left:50%;right:auto;bottom:-24px;transform:translateX(-50%);width:max-content;max-width:100%}
}

/* laptops and small desktops (981 to 1100px): the photo column is narrower, so the caption shrinks with it */
@media (min-width:61.3125em) and (max-width:68.75em){
  .hero .gable-cap{right:14px;padding:7px 11px}
  .hero .gable-cap b{font-size:.86rem}
  .hero .gable-cap span{font-size:.58rem;letter-spacing:.08em}
}

/* phones: Joey and Ethan's faces in the very first screen (the photo itself sits below the fold) */
.hero-people{display:none}
.hero-people .avs{display:flex;flex:none}
.hero-people img{width:42px;height:42px;border-radius:50%;object-fit:cover;border:2.5px solid #fff;box-shadow:var(--sh-1);background:var(--navy-100)}
.hero-people img+img{margin-left:-14px}
.hero-people b{display:block;font:800 .95rem/1.15 var(--f);color:var(--navy-800)}
.hero-people small{display:block;margin-top:2px;font:700 .76rem/1.25 var(--f);letter-spacing:.02em;color:var(--green-700)}
@media (max-width:47.9375em){
  .hero .hero-copy>.hero-eyebrow{display:none}
  .hero .hero-copy>.hero-people{display:inline-flex;align-items:center;gap:12px;max-width:100%;padding:0;animation:enter .7s cubic-bezier(.2,.7,.2,1) both}
}
/* tidy line breaks: balanced headline, no one-word last lines in the intro */
.hero .h1{text-wrap:balance}
.hero-lede{text-wrap:pretty}

/* ---------- Situations ---------- */
.after-hero{position:relative;display:flow-root;background:var(--cream-100)}
.situ{text-align:center;padding-top:28px;padding-top:clamp(28px,3.4vw,44px);padding-bottom:48px;padding-bottom:clamp(48px,6vw,80px)}
.situ-label{margin-bottom:20px;font:800 .78rem/1 var(--f);letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.situ-row{display:flex;flex-wrap:wrap;gap:6px 28px;justify-content:center;list-style:none;margin:0;padding:0}
/* Checkpoint 36: plain text with a small green icon, no pill, border or shadow. They are a list of situations, not buttons (review N15: the pills looked tappable and were not). */
.chip{display:inline-flex;align-items:center;gap:9px;padding:8px 0;font:650 .98rem/1.25 var(--f);color:var(--navy-700)}
.chip .i{color:var(--green-600)}

/* ---------- Path cards ---------- */
.tile{display:grid;place-items:center;width:56px;height:56px;border-radius:18px;background:var(--grad);color:#fff;box-shadow:0 10px 22px rgba(45,72,85,.24);flex:none}
.tile .i{width:26px;height:26px}
.paths{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;gap:clamp(16px,2vw,28px)}
.path{position:relative;display:grid;grid-template-rows:auto auto auto 1fr auto;gap:16px;padding:26px;padding:clamp(26px,3vw,36px);background:#fff;border:1px solid var(--line);border-radius:var(--r-l);box-shadow:var(--sh-1);transition:transform .4s cubic-bezier(.2,.7,.2,1),box-shadow .4s,border-color .4s,background .4s}
.path:hover{transform:translateY(-6px);box-shadow:var(--sh-2);border-color:var(--green-200)}
.path-top{display:flex;align-items:center;justify-content:space-between;gap:12px}
.time{padding:9px 14px;border-radius:999px;background:var(--green-50);border:1px solid var(--green-100);color:var(--green-800);font:750 .82rem/1 var(--f);white-space:nowrap}
.bestfor{color:var(--text)}
.bestfor b{color:var(--ink)}
.checks{display:grid;gap:12px;align-content:start;list-style:none;margin:0;padding:0}
.checks li{display:grid;grid-template-columns:24px minmax(0,1fr);gap:12px;align-items:start;font-size:.98rem;line-height:1.5}
.checks .i{width:24px;height:24px;padding:5px;border-radius:50%;background:var(--green-100);color:var(--green-700);stroke-width:3}
.more{display:inline-flex;align-items:center;gap:8px;min-height:44px;margin-top:4px;font-weight:750;color:var(--green-700);text-decoration:none}
.more .i{width:1.1em;height:1.1em;transition:transform .25s}
.more:hover{text-decoration:underline;text-underline-offset:4px}
.more:hover .i{transform:translateX(5px)}
.also{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:16px;gap:clamp(16px,2.4vw,28px);align-items:center;margin-top:24px;margin-top:clamp(24px,3vw,36px);padding:22px;padding:clamp(22px,3vw,32px);border-radius:var(--r-l);background:linear-gradient(135deg,var(--green-50),#fff);border:1.5px dashed var(--green-300)}
.also h3{margin-bottom:6px}
.also p{color:var(--text);max-width:64ch}
@supports (grid-template-rows:subgrid){
  @media (min-width:61.3125em){
    .paths{grid-template-rows:auto auto auto 1fr auto;row-gap:0}
    .path{grid-row:span 5;grid-template-rows:subgrid;row-gap:16px}
  }
}
@media (max-width:61.25em){
  .paths{grid-template-columns:minmax(0,1fr);max-width:640px;margin-left:auto;margin-right:auto;margin-inline:auto}
  .path:hover{transform:none}
}
@media (max-width:45em){.also{grid-template-columns:minmax(0,1fr);justify-items:start}}

/* ---------- Story ---------- */
.story{display:grid;grid-template-columns:minmax(0,.88fr) minmax(0,1.12fr);gap:40px;gap:clamp(40px,6vw,92px);align-items:start}
.story-photo{position:sticky;top:116px;margin:0;width:100%;max-width:520px;justify-self:center}
.story-photo img{position:relative;display:block;width:100%;aspect-ratio:800/897;object-fit:cover;border-radius:var(--r-l);box-shadow:var(--sh-3)}
.plate{position:absolute;top:20px;right:-20px;bottom:-20px;left:20px;inset:20px -20px -20px 20px;border-radius:var(--r-l);background:var(--grad);transform:rotate(2.5deg);opacity:.92}
@media (max-width:56.25em){.plate{top:16px;right:-8px;bottom:-16px;left:8px;inset:16px -8px -16px 8px;transform:rotate(1.8deg)}.stamp{left:-6px}}
.stamp{position:absolute;left:-14px;top:26px;display:inline-flex;align-items:center;gap:9px;padding:11px 17px;border-radius:14px;background:#fff;color:var(--navy-800);font:800 .76rem/1 var(--f);letter-spacing:.09em;text-transform:uppercase;box-shadow:var(--sh-2)}
.stamp .i{color:var(--green-600)}
.story-copy{display:grid;gap:22px;gap:clamp(22px,3vw,32px)}
.story-copy .head{margin-bottom:0}
.num{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:var(--grad);color:#fff;font:800 1rem/1 var(--f);flex:none;box-shadow:0 8px 18px rgba(45,72,85,.25)}
.beats{display:grid;gap:20px;list-style:none;margin:0;padding:0}
.beats li{display:grid;grid-template-columns:44px minmax(0,1fr);gap:16px;align-items:start}
.beats b{display:block;font-size:1.07rem;color:var(--ink)}
.pull{position:relative;margin:0;padding:26px 30px 26px 36px;border-radius:var(--r-m);background:#fff;border:1px solid var(--line);box-shadow:var(--sh-1)}
.pull::before{content:"";position:absolute;left:0;top:18px;bottom:18px;width:5px;border-radius:0 5px 5px 0;background:var(--grad)}
.pull p{font:italic 500 1.22rem/1.38 var(--f-serif);font:italic 500 clamp(1.22rem,2.1vw,1.55rem)/1.38 var(--f-serif);letter-spacing:-.01em;color:var(--navy-800)}
.pull cite{display:block;margin-top:14px;font:800 .76rem/1 var(--f);letter-spacing:.12em;text-transform:uppercase;font-style:normal;color:var(--green-700)}
@media (max-width:56.25em){.story{grid-template-columns:minmax(0,1fr)}.story-photo{position:relative;top:0;max-width:440px}}

/* ---------- How it works ---------- */
.how{display:grid;grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);gap:40px;gap:clamp(40px,6vw,100px);align-items:center}
.how-photo{margin:0;width:100%;max-width:480px;justify-self:center}
.gable-sm{aspect-ratio:560/600}
.gable-sm .g3 img[src$="kitchen-table.jpg"]{object-position:56% 20%}   /* Checkpoint 36: the person at the right edge of the kitchen-table photo was cut in half by the frame; the window moves a little to the right so both faces are in the frame (the two men are about 570px apart in an 800px photo and the frame shows 560px of it, so the right-hand ear and the left-hand hair still touch the edges) */
.how-copy .head{margin-bottom:30px;margin-bottom:clamp(30px,4vw,44px)}
.steps{display:grid;gap:34px;list-style:none;margin:0;padding:0}
.step{position:relative;display:grid;grid-template-columns:56px minmax(0,1fr);gap:22px}
.step .num{width:56px;height:56px;font-size:1.2rem}
.step h3{margin:4px 0 8px}
.step:not(:last-child)::before{content:"";position:absolute;left:27px;top:64px;bottom:-30px;width:2px;border-radius:2px;background:linear-gradient(var(--green-300),var(--navy-200));transform-origin:top}
.step.in::before{animation:draw .9s .35s ease backwards}
@keyframes draw{from{transform:scaleY(0)}to{transform:scaleY(1)}}
@media (max-width:56.25em){.how{grid-template-columns:minmax(0,1fr)}.how-photo{max-width:400px}}
/* ---------- How it works on Home, slim strip (Checkpoint 39). Additive: the About page still uses .how, .how-photo and .gable-sm, and Options still uses .steps. ---------- */
.sec-slim{padding-top:52px;padding-bottom:52px;padding-block:clamp(52px,6vw,88px)}
.flow .head{gap:14px;margin-bottom:24px;margin-bottom:clamp(24px,3vw,36px)}
.flow h2{font-size:1.75rem;font-size:clamp(1.75rem,3.2vw,2.5rem)}
.flow-steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;gap:clamp(18px,4vw,56px);list-style:none;margin:0;padding:0}
.flow-steps li{display:grid;grid-template-columns:44px minmax(0,1fr);gap:16px;align-items:start}
.flow-steps h3{margin:2px 0 6px}
@media (max-width:56.25em){.flow-steps{grid-template-columns:minmax(0,1fr)}}

/* ---------- Compare table ---------- */
.table-card{background:#fff;border:1px solid var(--line);border-radius:var(--r-l);box-shadow:var(--sh-2);overflow:hidden}
.table-scroll{overflow-x:auto}
.cmp{width:100%;min-width:640px;border-collapse:separate;border-spacing:0;font-size:1rem}
.cmp th,.cmp td{padding:20px 28px;text-align:left;vertical-align:top;border-bottom:1px solid var(--line)}
.cmp thead th{font:800 .95rem/1.2 var(--f);color:var(--navy-800);background:var(--cream-100);padding-top:24px;padding-bottom:24px;padding-block:24px}
.cmp thead th.us{background:var(--grad);color:#fff}
.us-badge{display:inline-block;margin-right:10px;padding:5px 9px;border-radius:7px;background:rgba(255,255,255,.2);font:800 .7rem/1 var(--f);letter-spacing:.12em}
.cmp tbody th{width:24%;font-weight:750;color:var(--navy-800)}
.cmp td.us{background:var(--green-50);font-weight:650;color:var(--navy-800)}
.cmp tbody tr:last-child th,.cmp tbody tr:last-child td{border-bottom:0}
.fine{margin-top:16px;font-size:.88rem;color:var(--muted)}
/* Checkpoint 36 (review N25): the two plainest sentences on the site ("The trade: ..." and "A real offer depends on the home...") are read at body size, not as fine print */
.fine.honest{font-size:1rem;font-size:clamp(1rem,.96rem + .2vw,1.0625rem);color:var(--text)}
.table-scroll:focus-visible{outline-offset:-3px}
@media (max-width:43.75em){
  .cmp{min-width:0}
  .cmp thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .cmp,.cmp tbody,.cmp tr,.cmp th,.cmp td{display:block;width:auto}
  .cmp tbody tr{border-bottom:1px solid var(--line);padding:4px 0 10px}
  .cmp tbody tr:last-child{border-bottom:0}
  .cmp th,.cmp td{border-bottom:0}
  .cmp tbody th{width:auto;padding:16px 20px 6px;font:800 .78rem/1.2 var(--f);letter-spacing:.12em;text-transform:uppercase;color:var(--green-700)}
  .cmp td{display:grid;grid-template-columns:96px minmax(0,1fr);gap:12px;padding:8px 20px}
  .cmp td::before{content:attr(data-label);font:700 .76rem/1.6 var(--f);color:var(--muted)}
  .cmp td.us{background:var(--green-50);margin:2px 12px;padding:10px 8px;border-radius:12px}
  .cmp td.us::before{color:var(--green-700)}
}

/* ---------- Net sheet ---------- */
.netsheet-head{margin-top:64px;margin-top:clamp(64px,8vw,112px)}
.net{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:18px;gap:clamp(18px,2.4vw,28px);align-items:start}
.panel{min-width:0;padding:22px;padding:clamp(22px,3vw,36px);background:#fff;border:1px solid var(--line);border-radius:var(--r-l);box-shadow:var(--sh-1)}
.panel h3{margin-bottom:6px}
.panel .sub{margin-bottom:22px;font-size:.95rem;color:var(--muted)}
.example-tag{display:inline-block;margin-left:8px;padding:6px 10px;border-radius:7px;background:var(--green-100);color:var(--green-800);font:800 .68rem/1 var(--f);letter-spacing:.1em;text-transform:uppercase;vertical-align:middle}
.fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.fieldset-label{grid-column:1/-1;margin-top:8px;padding-top:18px;border-top:1px solid var(--line);font:800 .74rem/1 var(--f);letter-spacing:.14em;text-transform:uppercase;color:var(--green-700)}
.fieldset-label:first-child{margin-top:0;padding-top:0;border-top:0}
.field{display:grid;gap:7px;align-content:start}
.field.full{grid-column:1/-1}
.field label{font-weight:700;font-size:.9rem;color:var(--ink)}
.hint{font-size:.8rem;color:var(--muted)}
.input{position:relative;display:flex;align-items:center}
.input span{position:absolute;font:600 .98rem/1 var(--f);color:var(--muted);pointer-events:none}
.input .pre{left:15px}
.input .post{right:15px}
.input input{width:100%;min-height:52px;padding:14px 14px 14px 32px;border:1.5px solid var(--line-2);border-radius:14px;background:#fbfdfc;color:var(--ink);font:650 1.02rem/1 var(--f);font-variant-numeric:tabular-nums;transition:border-color .2s,box-shadow .2s,background .2s}
.input.pct input{padding-left:15px;padding-right:38px}
.input input:hover{border-color:var(--navy-300)}
.input input:focus{outline:none;border-color:var(--green-600);background:#fff;box-shadow:0 0 0 4px rgba(60,122,102,.16)}
.costs-more{margin-top:18px;padding-top:4px;border-top:1px solid var(--line)}
.costs-more summary{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:48px;cursor:pointer;list-style:none;font:700 .95rem/1.3 var(--f);color:var(--green-800)}
.costs-more summary::-webkit-details-marker{display:none}
.costs-more summary::after{content:"";flex:none;width:9px;height:9px;margin-right:4px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg);transition:transform .2s}
.costs-more[open] summary::after{transform:rotate(-135deg)}
.costs-more summary:focus-visible{outline:3px solid var(--navy-700);outline-offset:3px;border-radius:8px}
.costs-more .fields{margin:8px 0 4px}
.panel>.fine{margin-top:16px}
.results{display:grid;gap:18px}
.cols{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.sheet{min-width:0;padding:20px;border:1px solid var(--line);border-radius:var(--r-m);background:#fbfdfc}
.sheet-us{background:var(--green-50);border-color:var(--green-200)}
.sheet h4{display:flex;align-items:baseline;justify-content:space-between;gap:8px;margin:0 0 14px;font:800 1rem/1.2 var(--f);color:var(--ink)}
.sheet h4 small{font:700 .74rem/1 var(--f);color:var(--muted)}
.sheet dl{display:grid;grid-template-columns:minmax(0,1fr);gap:9px;margin:0;font-size:.92rem}
.sheet dl div{display:flex;flex-wrap:wrap;justify-content:space-between;gap:2px 12px}
.sheet dt{flex:1 1 min-content;color:var(--muted)}
.sheet dd{margin:0 0 0 auto;font-variant-numeric:tabular-nums;white-space:nowrap;font-weight:650;color:var(--ink)}
.sheet .total{margin-top:4px;padding-top:12px;border-top:2px solid var(--navy-700)}
.sheet .total dt{font-weight:800;color:var(--ink)}
.sheet .total dd{font-size:1.28rem;font-weight:800;letter-spacing:-.02em}
.bars{display:grid;gap:11px}
.bar{display:grid;grid-template-columns:70px minmax(0,1fr) auto;gap:12px;align-items:center;font-size:.86rem;font-weight:650;color:var(--muted)}
.bar .track{height:14px;border-radius:8px;background:var(--navy-100);overflow:hidden}
.bar .fill{height:100%;border-radius:8px;background:var(--navy-500);transition:width .5s cubic-bezier(.2,.7,.2,1)}
.bar.direct .fill{background:linear-gradient(90deg,#3c7a66,#4e9279)}
.bar .v{font-variant-numeric:tabular-nums;color:var(--ink);font-weight:750}
@media (max-width:26.25em){.bar{grid-template-columns:62px minmax(0,1fr)}.bar .v{grid-column:2}}
.verdict{position:relative;overflow:hidden;display:grid;gap:8px;padding:22px 24px;border-radius:var(--r-m);background:var(--grad);color:#fff}
.verdict .big{font:800 1.4rem/1.15 var(--f);font:800 clamp(1.4rem,2.6vw,1.95rem)/1.15 var(--f);letter-spacing:-.025em;color:#fff}
.verdict .big span{color:#c4ecda}
.verdict p{color:rgba(255,255,255,.92);font-size:.94rem}
.verdict .breakeven{margin-top:4px;padding-top:14px;border-top:1px solid rgba(255,255,255,.28);color:#fff}
.verdict .breakeven strong{font-weight:800;color:#fff}   /* white, not the mint of the headline: mint on the green end of the gradient is under 4.5:1 at this size */
.res-actions{display:flex;flex-wrap:wrap;gap:12px}
.res-actions .btn{flex:1 1 auto}
/* Worth a second look (Checkpoint 42): a calm note above the answer when the numbers look like a typo. It never changes the numbers. */
.check-note{margin:0;padding:14px 18px 14px 22px;border:1px solid #e4d8b8;border-radius:var(--r-s);background:var(--cream-100);box-shadow:inset 4px 0 0 #b7791f;color:var(--ink);font-size:.94rem;line-height:1.5;text-wrap:pretty}
.check-note b{font-weight:800}
/* When the sheet stacks under the form (a phone or a tablet), the answer comes first and the detail follows. Wide screens and the printed page keep the original order. */
@media screen and (max-width:63.5em){.results .check-note{order:-3}.results .verdict{order:-2}.results .res-actions{order:-1}}
.print-btn{display:none}
.js .print-btn{display:inline-flex}
.print-only{display:none}
@media (max-width:63.5em){.net{grid-template-columns:minmax(0,1fr)}}
/* tablets held sideways and small laptops (about 1017 to 1100px at the normal text size): the two sheets sit side by side in a narrow panel, so the results panel and the sheets give up a little padding and every number stays inside its card (Checkpoint 28) */
@media (min-width:63.5625em) and (max-width:68.75em){.panel.results{padding-left:22px;padding-right:22px}.sheet{padding-left:16px;padding-right:16px}}
@media (max-width:32.5em){.fields{grid-template-columns:minmax(0,1fr)}}
@media (max-width:32.75em){.cols{grid-template-columns:minmax(0,1fr)}}

/* ---------- Hometown band ---------- */
.pano{position:relative;isolation:isolate;overflow:hidden;display:grid;grid-template-columns:minmax(0,1fr);align-items:end;min-height:420px;min-height:clamp(420px,46vw,560px);padding-top:48px;padding-bottom:48px;padding-block:clamp(48px,6vw,84px);color:#fff;background:var(--navy-700)}
.pano>img{position:absolute;left:0;top:-6%;width:100%;height:112%;object-fit:cover;object-position:62% 45%;z-index:-2}
.pano::before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(33,57,69,.95) 0%,rgba(40,66,79,.84) 42%,rgba(45,72,85,.08) 78%),linear-gradient(0deg,rgba(35,57,72,.55),rgba(35,57,72,0) 50%)}
.pano .eyebrow.on-dark{color:#e8f6ef}
.pano h2{color:#fff;max-width:15ch;font-size:2.1rem;font-size:clamp(2.1rem,4.8vw,3.8rem);margin:16px 0}
.pano .ital{color:#c4ecda}
.pano .lede{color:rgba(255,255,255,.94);max-width:42ch}
@media (max-width:43.75em){
  .pano{min-height:520px}
  .pano::before{background:linear-gradient(0deg,rgba(33,55,69,.95) 0%,rgba(40,66,79,.84) 55%,rgba(45,72,85,.2) 100%)}
  .pano>img{object-position:74% 50%}
}

/* ---------- About ---------- */
.about{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:40px;gap:clamp(40px,6vw,96px);align-items:start}
.about-copy .head{margin-bottom:24px;margin-bottom:clamp(24px,3vw,36px)}
.about-copy>.cta-row{margin-top:26px;margin-top:clamp(22px,3vw,30px)}
.motto{font-size:2.6rem;font-size:clamp(2.6rem,6vw,4.6rem);letter-spacing:-.04em}
.prose{display:grid;gap:18px;max-width:60ch}
.founders{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;gap:clamp(14px,2vw,22px);align-items:start}
.founder{position:relative;margin:0;overflow:hidden;border-radius:var(--r-l);background:var(--navy-100);box-shadow:var(--sh-2)}
.founder+.founder{margin-top:44px}
.founder img{display:block;width:100%;aspect-ratio:3/4;object-fit:cover;transition:transform .9s cubic-bezier(.2,.7,.2,1)}
.founder:hover img{transform:scale(1.04)}
.founder figcaption{position:absolute;left:12px;right:12px;bottom:12px;display:grid;gap:3px;padding:14px 18px;border-radius:16px;background:rgba(255,255,255,.93);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.founder figcaption b{font:800 1.2rem/1.1 var(--f);letter-spacing:-.02em;color:var(--navy-800)}
.founder figcaption span{font:800 .68rem/1.2 var(--f);letter-spacing:.12em;text-transform:uppercase;color:var(--green-700)}
.about-side{position:sticky;top:112px;display:grid;gap:22px;gap:clamp(22px,3vw,34px)}
@media (max-width:56.25em){.about{grid-template-columns:minmax(0,1fr)}.about-side{position:static;max-width:560px;margin-left:auto;margin-right:auto;margin-inline:auto;width:100%}}

/* ---------- Now building ---------- */
.build{display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);gap:40px;gap:clamp(40px,6vw,88px);align-items:center}
.build-copy{display:grid;gap:22px;gap:clamp(22px,3vw,30px)}
.build-copy .head{margin-bottom:0}
.spec{display:grid;gap:18px;padding:22px;padding:clamp(22px,3vw,30px);background:#fff;border:1px solid var(--line);border-radius:var(--r-l);box-shadow:var(--sh-1)}
.spec-tag{display:inline-flex;align-items:center;gap:11px;font:800 .78rem/1 var(--f);letter-spacing:.14em;text-transform:uppercase;color:var(--green-700)}
.spec-grid{display:flex;flex-wrap:wrap;gap:14px 18px;gap:14px clamp(18px,3vw,34px);margin:0}
.spec-grid div{display:grid;gap:5px}
.spec-grid dd{order:-1;margin:0;font:800 1.6rem/1 var(--f);font:800 clamp(1.6rem,3vw,2.2rem)/1 var(--f);letter-spacing:-.035em;color:var(--navy-700);white-space:nowrap}
.spec-grid dt{font:800 .7rem/1 var(--f);letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.spec p{font-size:.97rem}
@media (max-width:32.5em){.spec-grid{display:flex;flex-wrap:wrap;gap:14px 18px}.spec-grid div{flex:1 1 calc(50% - 9px)}.spec-grid dd{font-size:min(1.6rem,25.6px,calc((100vw - 104px)/10))}}
/* Home "now building" card (Checkpoint 29). In the narrower column beside the photos (901 to 1199px) the four numbers used to run under the photos; now they form a tidy 2 x 2 block that wraps with bigger text. From 1200px up they sit in one row as before. */
@media (min-width:56.3125em) and (max-width:74.9375em){.build-copy .spec-grid div{flex:1 1 calc(50% - 17px)}}
@media (min-width:75em){.build-copy .spec-grid{display:grid;grid-template-columns:repeat(4,auto);justify-content:start}}
.mosaic{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;gap:clamp(12px,1.6vw,18px)}
.mosaic figure{position:relative;margin:0;overflow:hidden;border-radius:var(--r-m);background:var(--navy-100);box-shadow:var(--sh-2)}
.mosaic figure:first-child{grid-column:1/-1}
.mosaic img{display:block;width:100%;height:100%;aspect-ratio:4/3;object-fit:cover;transition:transform 1s cubic-bezier(.2,.7,.2,1)}
.mosaic figure:first-child img{aspect-ratio:16/10;object-position:50% 70%}
.mosaic figure:hover img{transform:scale(1.045)}
.mosaic figcaption{position:absolute;left:12px;bottom:12px;padding:8px 13px;border-radius:10px;background:rgba(255,255,255,.93);font:750 .78rem/1 var(--f);color:var(--navy-800)}
@media (max-width:56.25em){.build{grid-template-columns:minmax(0,1fr)}}

/* ---------- FAQ ---------- */
.faq-grid{display:grid;grid-template-columns:minmax(0,.78fr) minmax(0,1.3fr);gap:36px;gap:clamp(36px,6vw,96px);align-items:start}
.faq-side{position:sticky;top:112px;display:grid;gap:18px}
.faq-card{display:grid;gap:10px;margin-top:8px}
.faq-card a{display:flex;align-items:center;gap:14px;min-height:60px;padding:12px 18px;border-radius:18px;background:#fff;border:1px solid var(--line);text-decoration:none;color:var(--text);transition:border-color .2s,box-shadow .2s,transform .2s}
.faq-card a:hover{border-color:var(--green-400);box-shadow:var(--sh-1);transform:translateY(-2px)}
.faq-card .i{width:40px;height:40px;padding:10px;border-radius:13px;background:var(--grad);color:#fff}
.faq-card span{display:grid;line-height:1.35;font-size:.9rem}
.faq-card b{font-size:1.02rem;color:var(--ink);overflow-wrap:anywhere}
.faq{display:grid;grid-template-columns:minmax(0,1fr);gap:12px}
.faq details{background:#fff;border:1px solid var(--line);border-radius:var(--r-m);transition:border-color .25s,box-shadow .25s}
.faq details:hover{border-color:var(--green-300)}
.faq details[open]{border-color:var(--green-300);box-shadow:var(--sh-2)}
.faq summary{display:flex;align-items:center;justify-content:space-between;gap:18px;min-height:68px;padding:18px 24px;cursor:pointer;list-style:none;font:750 1.08rem/1.35 var(--f);color:var(--ink)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";flex:none;width:36px;height:36px;border-radius:50%;background:var(--green-50) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23366554' stroke-width='2.6' stroke-linecap='round'%3E%3Cpath d='M12 6v12M6 12h12'/%3E%3C/svg%3E") center/18px no-repeat;border:1px solid var(--green-100);transition:transform .3s ease,background-color .3s}
.faq details[open] summary::after{transform:rotate(135deg);background-color:var(--green-100)}
.faq details p{padding:0 76px 24px 24px;max-width:70ch}
.faq details p a{color:var(--green-700);font-weight:700;text-underline-offset:3px}
@media (max-width:56.25em){.faq-grid{grid-template-columns:minmax(0,1fr)}.faq-side{position:static}.faq details p{padding-right:24px}}

/* ---------- Contact ---------- */
.contact{position:relative;isolation:isolate;overflow:hidden;padding-top:76px;padding-bottom:76px;padding-block:clamp(76px,10vw,132px);color:#fff;background:linear-gradient(135deg,#25404d 0%,#2b5155 50%,#336b59 100%)}
.contact-bg{position:absolute;top:0;right:0;bottom:0;left:0;inset:0;z-index:-1}
.contact h2{color:#fff}
.contact .ital{color:#c4ecda}
.contact .lede{color:rgba(255,255,255,.96);margin-top:18px}
/* The page order is: heading, Call and Text, the form, Email / Book / Facebook, what happens next (Checkpoint 46). One column on a phone, so the form follows
   the two tiles at once. From 60em up the form takes the right-hand column and runs down beside the four other parts. */
.contact-grid{position:relative;display:grid;grid-template-columns:minmax(0,1fr);align-items:start}
.contact-top .eyebrow{margin-bottom:18px}
@media (min-width:60.0625em){
  .contact-grid{grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);grid-template-rows:auto auto auto 1fr;column-gap:36px;column-gap:clamp(36px,6vw,88px)}
  .contact-top{grid-column:1;grid-row:1}
  .form-card{grid-column:2;grid-row:1/span 4;margin-top:0}
  .reach-main{grid-column:1;grid-row:2}
  .reach-more{grid-column:1;grid-row:3}
  .next{grid-column:1;grid-row:4}
}
.reach{display:grid;gap:12px;margin-top:26px;margin-top:clamp(26px,3vw,36px)}
@media (min-width:60.0625em){.reach-more{margin-top:12px}}   /* beside the form the two groups of tiles read as one list */
.reach-item{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:16px;align-items:center;min-height:70px;padding:13px 16px;border-radius:20px;background:rgba(255,255,255,.11);border:1px solid rgba(255,255,255,.24);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);color:#fff;text-decoration:none;transition:background .25s,transform .25s,border-color .25s}
.reach-item:hover{background:rgba(255,255,255,.2);border-color:rgba(255,255,255,.4);transform:translateY(-2px)}
.reach-item .ico{display:grid;place-items:center;width:46px;height:46px;border-radius:15px;background:rgba(255,255,255,.18)}
.reach-item .ico .i{width:22px;height:22px}
.txt small{display:block;font:800 .7rem/1.3 var(--f);letter-spacing:.13em;text-transform:uppercase;color:rgba(255,255,255,.82)}
.txt b{display:block;font:750 1.2rem/1.25 var(--f);letter-spacing:-.01em}
.txt b.sm{font-size:1.04rem;overflow-wrap:anywhere}
@media (max-width:27.5em){
  .reach-item{gap:12px;padding:12px 14px}
  .reach-item .ico{width:42px;height:42px}
  /* on phones the whole tile is the tap target, so the pill shrinks to a small arrow and the email gets the room */
  .reach-item .go{display:grid;place-items:center;width:38px;height:38px;padding:0;font-size:0;line-height:0}
  .reach-item .go::before{content:"\2192";content:"\2192" / "";font:800 1.1rem/1 var(--f)}
  .txt b.sm{font-size:.95rem;letter-spacing:-.015em}
}
@media (max-width:23.75em){.txt b.sm{font-size:.84rem;letter-spacing:-.02em}}
.go{padding:10px 18px;border-radius:999px;background:#fff;color:var(--navy-800);font:800 .85rem/1 var(--f)}
.next{margin-top:28px;margin-top:clamp(28px,4vw,44px)}
.next h3,.next .h3{color:#fff;margin-bottom:16px;font-size:1.15rem}
.next ol{display:grid;gap:12px;list-style:none;margin:0;padding:0}
.next li{display:flex;align-items:center;gap:14px;font-weight:650;color:rgba(255,255,255,.95)}
.next .num{width:34px;height:34px;font-size:.88rem;background:#fff;color:var(--navy-800);box-shadow:none}
.form-card{padding:24px;padding:clamp(24px,3vw,38px);border-radius:var(--r-l);background:#fff;color:var(--text);box-shadow:0 22px 56px rgba(10,28,36,.3)}
@media (max-width:60em){.form-card{margin-top:28px;margin-top:clamp(28px,5vw,40px)}}   /* one column: the card sits under the heading */
.form-who{display:flex;align-items:center;gap:12px;margin:0 0 16px}
.form-who .avs{display:flex;flex:none}
.form-who img{width:46px;height:46px;border-radius:50%;object-fit:cover;border:2.5px solid #fff;box-shadow:var(--sh-1);background:var(--navy-100)}
.form-who img+img{margin-left:-14px}
.form-who b{display:block;font:800 .95rem/1.15 var(--f);color:var(--navy-800)}
.form-who small{display:block;margin-top:2px;font:700 .8rem/1.25 var(--f);letter-spacing:.02em;color:var(--green-700)}
.form-who .loc{white-space:nowrap}
.form-who.ask-people{margin:0}
.form-who.ask-people b{font-size:1rem}
.micro-stack{display:grid;gap:8px}
@media (max-width:22.4375em){.form-who .sep{display:none}.form-who .loc{display:block}}   /* the narrowest phones: the place drops to its own line, so no dot is left hanging at the end of a line */
.form-card h3,.form-card .h3{margin-bottom:8px;font-size:1.5rem;color:var(--ink)}
.form-card .sub{margin-bottom:22px;font-size:.96rem;color:var(--muted)}
/* ---------- The contact form (Checkpoint 46) ----------
   Ours, in the site's own look (DESIGN_SYSTEM 8c). js/form.js does the checking, the phone formatting, the ready-made text or email and the sending.
   Without JavaScript the form cannot work, so it is hidden and .lf-nojs (a call, text or email card) shows instead; the Call and Text buttons on the
   page work either way. Colors come from the tokens at the top; the one new color is the error red (--err), dark enough for text on white (about 7:1). */
.lf-wrap{display:none}
.js .lf-wrap{display:block}
.js .lf-nojs,html:not(.js) .form-alt{display:none}
.lf-nojs{padding:30px 22px 22px;border:1.5px solid var(--line);border-radius:var(--r-m);background:var(--green-50);text-align:center}
.lf-nojs-h{font:800 1.2rem/1.3 var(--f);letter-spacing:-.01em;color:var(--ink)}
.lf-nojs-p{margin:8px auto 20px;max-width:32ch;color:var(--text)}
.lf-nojs-btns{display:grid;gap:12px;max-width:340px;margin:0 auto}
.lf-nojs-btns .btn{width:100%}
.lf-nojs-alt{margin-top:14px;font-size:.95rem}
.lf-nojs-alt a{display:inline-block;padding:10px 4px;color:var(--green-700);font-weight:700}

.lf{--err:#a4271f;--err-line:#c2473a;--err-bg:#fff6f4;--edge:#7b8d94;display:grid;gap:22px}   /* --edge: the line round a box or tick you press, 3.4:1 on white, so it can be seen in sunlight and by tired eyes */
.lf [hidden],.lf-wrap [hidden]{display:none!important}
.lf-head .sub{margin:0}
.lf fieldset{min-width:0;margin:0;padding:0;border:0}
.lf legend{display:block;width:100%;padding:0;font:700 .95rem/1.3 var(--f);color:var(--ink)}
.lf-opt{font-weight:600;color:var(--muted)}
.lf .field{gap:8px}
.lf .field label{font-size:.95rem}
.lf .hint{margin:0;font-size:.84rem;line-height:1.45;color:var(--muted)}
.lf .input input,.lf textarea{width:100%;min-height:54px;padding:14px 16px;border:1.5px solid var(--edge);border-radius:14px;background:#fbfdfc;color:var(--ink);font:550 1.05rem/1.3 var(--f);font-variant-numeric:normal;-webkit-appearance:none;appearance:none;transition:border-color .2s,box-shadow .2s,background .2s}
.lf textarea{display:block;min-height:112px;resize:vertical}
.lf .input input:hover,.lf textarea:hover{border-color:var(--navy-700)}
.lf .field.err .input input,.lf .field.err textarea{border-color:var(--err-line);background:var(--err-bg)}
.lf .input input:focus,.lf textarea:focus{border-color:var(--green-600);background:#fff;box-shadow:0 0 0 4px rgba(60,122,102,.16)}
.lf .field.err .input input:focus,.lf .field.err textarea:focus{border-color:var(--err-line);box-shadow:0 0 0 4px rgba(194,71,58,.16)}
.lf .input input:focus-visible,.lf textarea:focus-visible{outline:3px solid var(--navy-700);outline-offset:2px}   /* the site's own focus ring: the soft glow alone is about 1.2:1 and cannot be seen */
.lf-err{display:flex;gap:8px;align-items:flex-start;margin:0;font:650 .92rem/1.4 var(--f);color:var(--err)}
.lf-err .i{width:1.15em;height:1.15em;margin-top:.1em}
/* .lf-hp, the robot trap: hidden with the site's .vh class (1px, clipped, in place), not parked 9,999px off to the side, so no layout check or browser sees a box beyond the edge */

/* what went wrong, in one place, when the visitor presses Send (focus moves to it; each line is a link to the field) */
.lf-sum{padding:16px 18px;border:1.5px solid #e6bbb5;border-left:6px solid var(--err-line);border-radius:14px;background:var(--err-bg);color:#5c1a15;scroll-margin-top:12px}
.lf-sum:focus{outline:3px solid var(--navy-700);outline-offset:3px}
.lf-sum-h{margin:0 0 6px;font:800 1rem/1.3 var(--f);color:#5c1a15}
.lf-sum ul{margin:0;padding-left:20px}
.lf-sum li{margin:3px 0;font-weight:600}
.lf-sum a{display:block;box-sizing:border-box;min-height:44px;padding:11px 0;color:inherit;text-underline-offset:3px}   /* each line is a link to its box: tall enough for a finger (a block, so a long line's bullet stays beside its first line) */

/* one tap: what can we help with (and, inside the extras, the best way to reach you). Real radio buttons, drawn as pills */
.lf-pills legend{margin-bottom:10px}
.lf-pillrow{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-template-columns:repeat(auto-fit,minmax(max(calc(50% - 6px),calc(7.5ch + 52px)),1fr));gap:8px}   /* two across; one across when the text is made large, so no word is ever clipped */
.lf-chan .lf-pillrow{grid-template-columns:repeat(3,minmax(0,1fr));grid-template-columns:repeat(auto-fit,minmax(max(calc(33.3% - 6px),calc(5ch + 50px)),1fr))}
.pill{position:relative;display:block;margin:0}
.pill input{position:absolute;top:0;left:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}
.pill span{display:flex;align-items:center;gap:10px;height:100%;min-height:52px;padding:8px 12px;border:1.5px solid var(--line-2);border-radius:16px;background:#fbfdfc;color:var(--navy-700);font:700 .96rem/1.2 var(--f);transition:border-color .2s,background .2s,box-shadow .2s,color .2s;-webkit-tap-highlight-color:transparent}
.pill span::before{content:"";flex:none;width:20px;height:20px;border:1.5px solid var(--edge);border-radius:50%;background:#fff center/12px no-repeat;transition:border-color .2s,background-color .2s}
.pill:hover span{border-color:var(--navy-300);background:#fff}
.pill input:checked+span{border-color:var(--green-600);background:var(--green-100);color:var(--green-800);box-shadow:0 0 0 3px rgba(60,122,102,.12)}
.pill input:checked+span::before{border-color:var(--green-600);background-color:var(--green-600);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E")}
.pill input:focus-visible+span{outline:3px solid var(--navy-700);outline-offset:3px}
@media (max-width:30em){
  .pill span{gap:8px;padding:8px 10px;font-size:.93rem}
  .pill span::before{width:18px;height:18px;background-size:11px}
}

/* the optional extras: closed until asked for, so the form starts short */
.lf-more{border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.lf-more summary{display:flex;align-items:center;gap:12px;min-height:58px;cursor:pointer;list-style:none;font:700 .98rem/1.3 var(--f);color:var(--green-800)}
.lf-more summary::-webkit-details-marker{display:none}
.lf-more summary::before{content:"";flex:none;width:28px;height:28px;border:1px solid var(--green-200);border-radius:50%;background:linear-gradient(currentColor,currentColor) center/12px 2px no-repeat,linear-gradient(currentColor,currentColor) center/2px 12px no-repeat,var(--green-50);color:var(--green-800)}
.lf-more[open] summary::before{background:linear-gradient(currentColor,currentColor) center/12px 2px no-repeat,var(--green-50)}
.lf-more summary .lf-opt{margin-left:auto;font-size:.85rem}
.lf-more summary:focus-visible{outline:3px solid var(--navy-700);outline-offset:2px;border-radius:8px}
.lf-more-body{display:grid;gap:22px;padding:6px 0 24px}

/* the text-message boxes: Joey's exact wording, unticked, separate from each other and from everything else */
.lf-consent legend{margin-bottom:10px}
.lf-checks{padding:4px 16px;border:1.5px solid var(--line);border-radius:14px;background:#fbfdfc}
.check{display:grid;grid-template-columns:26px minmax(0,1fr);gap:14px;align-items:start;margin:0;padding:14px 0;font-size:.86rem;line-height:1.55;color:var(--muted);cursor:pointer}
.check+.check{border-top:1px solid var(--line)}
.check input{-webkit-appearance:none;appearance:none;width:26px;height:26px;margin:0;border:1.5px solid var(--edge);border-radius:8px;background:#fff center/17px no-repeat;cursor:pointer;transition:border-color .2s,background-color .2s}
.check input:checked{border-color:var(--green-600);background-color:var(--green-600);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E")}
.check input:focus-visible{outline:3px solid var(--navy-700);outline-offset:3px}

.lf-go{display:grid;gap:12px;justify-items:center}
.lf-send{width:100%}
.lf-send[aria-busy="true"]{cursor:progress;pointer-events:none}
.lf-send .spin{flex:none;width:1.15em;height:1.15em;border:2.5px solid rgba(255,255,255,.4);border-top-color:#fff;border-radius:50%;animation:lf-spin .8s linear infinite}
@keyframes lf-spin{to{transform:rotate(360deg)}}
.lf-note{margin:0;text-align:center;font-size:.9rem;color:var(--muted)}
.lf-legal{margin:0;text-align:center;font-size:.84rem;color:var(--muted)}
.lf-legal a{display:inline-flex;align-items:center;min-height:44px;padding:0 6px;color:var(--green-700);font-weight:650;text-underline-offset:3px}

/* what replaces the form once it has been filled in: the ready-made message (until the form is connected) or the thank-you */
.lf-panel{display:grid;gap:18px;justify-items:start;padding-top:4px}
.lf-panel:focus{outline:none}
.lf-panel .h3{margin:0}
.lf-badge{display:grid;place-items:center;width:56px;height:56px;border-radius:50%;background:var(--green-100);color:var(--green-700)}
.lf-badge .i{width:26px;height:26px}
.lf-badge.ok{background:var(--green-600);color:#fff}
.lf-tick path{stroke-dasharray:24;animation:lf-draw .5s .15s ease backwards}
@keyframes lf-draw{from{stroke-dashoffset:24}}
.lf-lede{margin:0;max-width:46ch;color:var(--text)}
.lf-lede a{color:var(--green-700);font-weight:700}
.lf-msgbox{width:100%}
.lf-msg-l{margin:0 0 6px;font:800 .76rem/1.2 var(--f);letter-spacing:.12em;text-transform:uppercase;color:var(--green-700)}
.lf-msg{margin:0;padding:14px 16px;border:1px solid var(--line);border-radius:14px;background:var(--cream-100);color:var(--ink);font:500 .95rem/1.55 var(--f);white-space:pre-wrap;overflow-wrap:anywhere;-webkit-user-select:text;user-select:text}
.lf-actions{display:grid;gap:12px;width:100%}
.lf-actions .btn{width:100%}
.lf-mini{display:flex;flex-wrap:wrap;gap:4px 20px;margin:0;padding:0;list-style:none}
.lf-mini button,.lf-mini a{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 2px;border:0;background:none;font:700 .95rem/1.2 var(--f);color:var(--green-700);text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.lf-mini .i{width:1.1em;height:1.1em;flex:none}
.lf-mini a span{text-decoration:inherit}   /* the phone number inside the Call link is an inline block, which would not take the link's underline by itself */
.lf-live{margin:0;min-height:1.4em;font:650 .92rem/1.4 var(--f);color:var(--green-700)}

@media (forced-colors:active){
  .check input{-webkit-appearance:auto;appearance:auto;forced-color-adjust:auto}
  .pill input:checked+span{border-width:3px}
}
.form-alt{margin-top:18px;padding-top:18px;border-top:1px solid var(--line);font-size:.9rem;color:var(--muted)}
.form-alt a{color:var(--green-700);font-weight:700}

/* ---------- Footer ---------- */
.ftr{background:var(--cream-100);border-top:1px solid var(--line);padding-top:52px;padding-top:clamp(52px,6vw,84px)}
.ftr-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:28px;gap:clamp(28px,4vw,56px)}
.ftr-brand{display:grid;gap:18px;align-content:start;justify-items:start;max-width:360px}
.ftr-brand p{font-size:.96rem;color:var(--muted)}
.fb{display:inline-flex;align-items:center;gap:10px;min-height:44px;font-weight:700;color:var(--green-700);text-decoration:none}
.fb:hover{text-decoration:underline;text-underline-offset:4px}
.ftr-col{display:grid;grid-template-columns:minmax(min-content,max-content);gap:2px;align-content:start;font-size:.96rem}
.ftr-col h2{margin-bottom:10px;font:800 .76rem/1 var(--f);letter-spacing:.15em;text-transform:uppercase;color:var(--navy-700)}
.ftr-col a{display:inline-flex;align-items:center;width:fit-content;min-width:44px;min-height:36px;color:var(--text);text-decoration:none;transition:color .2s}
.ftr-col a:hover{color:var(--green-700);text-decoration:underline;text-underline-offset:4px}
.ftr-col span{padding:6px 0;color:var(--muted)}
@media (pointer:coarse){.ftr-col a{min-height:44px}}
.ftr-base{display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px 32px;margin-top:36px;margin-top:clamp(36px,5vw,56px);padding-top:26px;padding-bottom:calc(26px + env(safe-area-inset-bottom,0px));padding-block:26px calc(26px + env(safe-area-inset-bottom,0px));border-top:1px solid var(--line);font-size:.86rem;color:var(--muted)}
/* The footer folds from four columns to two below 62em (992px at the normal text size; wider when text is bigger) and to one below 30em (480px), so the email address never runs into the next column. A link that is still too wide wraps instead of sticking out (Checkpoint 28). */
@media (max-width:62em){.ftr-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.ftr-brand{grid-column:1/-1;max-width:none}.ftr-col a{max-width:100%;overflow-wrap:anywhere}}
@media (max-width:30em){.ftr-grid{grid-template-columns:minmax(0,1fr)}}

/* ---------- Mobile action bar ---------- */
.mobile-bar{display:none}
@media (max-width:47.5em){
  .mobile-bar{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(0,1.55fr);gap:8px;position:fixed;left:0;right:0;bottom:0;z-index:70;padding:10px max(12px,env(safe-area-inset-right,0px)) calc(10px + env(safe-area-inset-bottom,0px)) max(12px,env(safe-area-inset-left,0px));background:rgba(255,255,255,.95);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border-top:1px solid var(--line);box-shadow:0 -10px 30px rgba(26,50,61,.10)}
  .mobile-bar a{display:flex;flex-wrap:wrap;align-items:center;align-content:center;justify-content:center;gap:2px 8px;min-height:50px;border-radius:999px;font:750 min(.98rem,18.8px)/1.1 var(--f);text-align:center;text-decoration:none}
  .mb-call{background:var(--navy-700);color:#fff}
  .mb-text{border:1.5px solid var(--navy-700);color:var(--navy-700);background:#fff}
  .mb-go{background:linear-gradient(135deg,#3a7a66,#316656);color:#fff;box-shadow:0 6px 16px rgba(49,102,86,.3)}
  body{padding-bottom:calc(4.75rem + env(safe-area-inset-bottom,0px))}
  /* With JS the bar slides in once the hero buttons have scrolled away, and steps aside while the form is on screen. Without JS it simply stays put. */
  /* Until the page's script has run, keep the bar tucked away so it never shows for a moment and then slides off (Checkpoint 30). If the script fails, the "js" class is taken off the page and the bar simply stays visible. */
  .js .mobile-bar:not(.auto){transform:translateY(115%);visibility:hidden}
  .mobile-bar.auto{transform:translateY(115%);visibility:hidden;transition:transform .38s cubic-bezier(.2,.7,.2,1),visibility 0s linear .38s}
  .mobile-bar.auto.on{transform:none;visibility:visible;transition:transform .38s cubic-bezier(.2,.7,.2,1),visibility 0s}
}
/* narrowest phones (350px and under): a little more room for "Get my options" in the bottom bar (Checkpoint 21) */
@media (max-width:21.875em){
  .mobile-bar{gap:6px;grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(0,1.7fr);padding-left:max(10px,env(safe-area-inset-left,0px));padding-right:max(10px,env(safe-area-inset-right,0px))}
  .mobile-bar a{gap:6px;font-size:min(.94rem,18px)}
}

/* ---------- Legal pages ---------- */
.doc-hero{position:relative;isolation:isolate;overflow:hidden;padding:48px 0 40px;padding:clamp(48px,7vw,96px) 0 clamp(40px,5vw,64px);background:linear-gradient(180deg,#fdfbf6,var(--cream))}
.doc-hero h1{margin-top:18px;font-size:2.1rem;font-size:clamp(2.1rem,4.4vw,3.2rem)}
.doc-hero .lede{margin-top:16px}
.doc{padding-top:32px;padding-bottom:72px;padding-block:clamp(32px,5vw,64px) clamp(72px,9vw,120px)}
.doc-card{max-width:860px;margin-left:auto;margin-right:auto;margin-inline:auto;padding:26px;padding:clamp(26px,5vw,56px);background:#fff;border:1px solid var(--line);border-radius:var(--r-l);box-shadow:var(--sh-2)}
.doc-card h2{margin:28px 0 12px;margin:clamp(28px,4vw,40px) 0 12px;font-size:1.25rem;font-size:clamp(1.25rem,2.2vw,1.55rem);letter-spacing:-.02em}
.doc-card h2:first-child{margin-top:0}
.doc-card p+p{margin-top:12px}
.doc-card ul{margin:12px 0 0;padding-left:1.2em;display:grid;gap:8px}
.doc-card a{color:var(--green-700);font-weight:700;text-underline-offset:3px}
.doc-note{margin-top:28px;padding:18px 20px;border-radius:var(--r-m);background:var(--green-50);border:1px solid var(--green-100);font-size:.92rem;color:var(--text)}

/* ================================================================
   Multi-page additions: Facebook logo, inner-page hero, option
   pages, About, New homes, Contact, closing call-to-action band.
   ================================================================ */

/* ---------- Facebook logo (draws its own colors, so it reads as the real logo on any background) ---------- */
.fb-logo{width:1.6em;height:1.6em;flex:none;display:block}
.hdr-fb{display:none;flex:none;place-items:center;width:46px;height:46px;border-radius:50%;transition:background .2s}
.hdr-fb .fb-logo{width:28px;height:28px}
.hdr-fb:hover{background:var(--cream-100)}
@media (min-width:77.5625em){.hdr-fb{display:grid}}
.fb-btn{display:inline-flex;align-items:center;gap:12px;min-height:56px;padding:9px 22px 9px 11px;border-radius:999px;background:#fff;border:1.5px solid var(--line);box-shadow:var(--sh-1);color:var(--navy-800);text-decoration:none;transition:border-color .2s,box-shadow .2s,transform .2s}
.fb-btn .fb-logo{width:36px;height:36px}
.fb-btn b{display:block;font:750 .98rem/1.2 var(--f)}
.fb-btn small{display:block;font:600 .8rem/1.3 var(--f);color:var(--muted)}
.fb-btn:hover{border-color:#0866ff;box-shadow:var(--sh-2);transform:translateY(-2px)}
.mnav-fb{display:flex;align-items:center;gap:14px;min-height:64px;margin-top:14px;padding:10px 16px 10px 12px;border-radius:18px;background:var(--cream-100);border:1px solid var(--line);color:var(--navy-800);text-decoration:none}
.mnav-fb .fb-logo{width:38px;height:38px}
.mnav-fb b{display:block;font:750 1rem/1.2 var(--f)}
.mnav-fb small{display:block;font:600 .82rem/1.3 var(--f);color:var(--muted)}
.reach-item .ico .fb-logo{width:28px;height:28px}

/* ---------- Inner-page hero ---------- */
.crumbs{font-size:.88rem;color:var(--muted)}
.crumbs ol{display:flex;flex-wrap:wrap;align-items:center;gap:0 10px;list-style:none;margin:0;padding:0}
.crumbs li+li::before{content:"/";margin-right:10px;color:var(--navy-300)}
.crumbs a{display:inline-flex;align-items:center;min-height:32px;color:var(--navy-600);font-weight:650;text-decoration:none}
@media (pointer:coarse){.crumbs a{min-width:44px;min-height:44px}}
.crumbs a:hover{color:var(--green-700);text-decoration:underline;text-underline-offset:3px}
.crumbs [aria-current]{color:var(--navy-800);font-weight:700}
.phero{position:relative;isolation:isolate;overflow:hidden;padding:18px 0 92px;padding:clamp(18px,3vw,40px) 0 clamp(92px,11vw,156px)}
.phero .ridge{height:90px;height:clamp(90px,11vw,160px)}
.phero .ridge .r3{fill:#fff}
.phero-grid{position:relative;display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);gap:28px;gap:clamp(28px,5vw,72px);align-items:center}
.phero-copy{display:grid;gap:22px;justify-items:start;align-content:center}
.phero h1{font-size:2.2rem;font-size:clamp(2.2rem,4.5vw,3.8rem)}
.phero h1 .ital{line-height:1.12}
.phero-visual{position:relative;width:100%;max-width:520px;justify-self:center;padding-bottom:20px}
@media (max-width:61.25em){.phero-grid{grid-template-columns:minmax(0,1fr)}.phero-visual{max-width:480px;justify-self:start}.phero-about .phero-visual{justify-self:center}}
.go-i{width:1.2em;height:1.2em;color:var(--green-700);transition:transform .25s}
.jump{display:grid;gap:10px;padding:14px;border-radius:var(--r-l);background:rgba(255,255,255,.9);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid #fff;box-shadow:var(--sh-3)}
.jump-label{padding:6px 8px 2px;font:800 .74rem/1 var(--f);letter-spacing:.15em;text-transform:uppercase;color:var(--muted)}
.jump a,.explore a{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:14px;align-items:center;min-height:68px;padding:10px 16px 10px 10px;border-radius:18px;border:1px solid var(--line);background:#fff;text-decoration:none;color:var(--navy-800);transition:border-color .2s,transform .25s,box-shadow .25s}
.jump a:hover{border-color:var(--green-400);transform:translateX(3px);box-shadow:var(--sh-1)}
.jump a:hover .go-i,.explore a:hover .go-i{transform:translateX(4px)}
.jump .tile,.explore .tile{width:46px;height:46px;border-radius:15px}
.jump .tile .i,.explore .tile .i{width:22px;height:22px}
.jump b,.explore b{display:block;font:800 1.02rem/1.2 var(--f);letter-spacing:-.01em}
.jump small,.explore small{display:block;margin-top:3px;font-size:.88rem;line-height:1.35;color:var(--muted)}

/* ---------- Option sections ---------- */
.opt-sec{padding-top:56px;padding-bottom:56px;padding-block:clamp(56px,7vw,96px)}
.opt{display:grid;grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);gap:32px;gap:clamp(32px,5vw,80px);align-items:start}
.opt-side{position:sticky;top:112px;display:grid;gap:20px;align-content:start;justify-items:start}
.opt-top{display:flex;align-items:center;gap:14px}
.opt-side h2{font-size:1.95rem;font-size:clamp(1.95rem,3.3vw,2.8rem)}
.opt-body{display:grid;gap:16px;gap:clamp(16px,2vw,22px)}
.opt-card{padding:22px;padding:clamp(22px,3vw,34px);background:#fff;border:1px solid var(--line);border-radius:var(--r-l);box-shadow:var(--sh-1)}
.opt-card>h3{margin-bottom:20px;font-size:1.15rem}
.opt-card .beats{gap:20px}
.opt-card .beats div span{display:block;margin-top:2px;font-size:.97rem}
.opt-card .fine{margin-top:18px}
.opt-card>h3:not(:first-child){margin-top:28px}
.opt-card .steps-line{margin:-6px 0 0;font-size:.98rem}
.facts{display:grid;margin:0}
.facts div{display:flex;justify-content:space-between;gap:24px;padding:13px 0;border-bottom:1px solid var(--line)}
.facts div:first-child{padding-top:0}
.facts div:last-child{padding-bottom:0;border-bottom:0}
.facts dt{color:var(--muted)}
.facts dd{margin:0;text-align:right;font-weight:750;color:var(--navy-800)}
.facts-stack div{display:grid;gap:4px;justify-content:stretch}
.facts-stack dt{font-weight:800;color:var(--navy-800)}
.facts-stack dd{text-align:left;font-weight:500;color:var(--text)}
.opt-fit{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;gap:clamp(16px,2vw,22px)}
.fit{padding:22px;padding:clamp(22px,2.6vw,30px);border-radius:var(--r-l);border:1px solid var(--line);background:#fff;box-shadow:var(--sh-1)}
.fit-yes{background:linear-gradient(180deg,var(--green-50),#fff 70%);border-color:var(--green-200)}
.fit h3{margin-bottom:16px;font-size:1.08rem}
.checks.nos .i{background:var(--navy-100);color:var(--navy-600)}
@media (max-width:61.25em){.opt{grid-template-columns:minmax(0,1fr)}.opt-side{position:static}}
@media (max-width:38.75em){.opt-fit{grid-template-columns:minmax(0,1fr)}.facts div{flex-direction:column;gap:2px}.facts dd{text-align:left}}
.numband{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.95fr);gap:32px;gap:clamp(32px,5vw,80px);align-items:center}
.numband .head{margin-bottom:28px}
.mini-sheet{display:grid;gap:18px;padding:22px;padding:clamp(22px,3vw,34px);background:#fff;border:1px solid var(--line);border-radius:var(--r-l);box-shadow:var(--sh-2)}
.mini-sheet h3{display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px}
.mini-sheet .example-tag{margin-left:0}
.mini-sheet .fine{margin-top:0}
@media (max-width:56.25em){.numband{grid-template-columns:minmax(0,1fr)}}
.sec-link{display:flex;flex-wrap:wrap;gap:14px;justify-content:center;margin-top:28px;margin-top:clamp(28px,4vw,44px)}

/* ---------- About ---------- */
.phero-about .founders{max-width:460px;margin-left:auto;margin-right:auto;margin-inline:auto}
.why{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:32px;gap:clamp(32px,5vw,80px);align-items:center}
.why .head{margin-bottom:24px}
.duo{display:grid;grid-template-columns:minmax(0,.9fr) auto minmax(0,1.1fr);gap:12px;gap:clamp(12px,2vw,22px);align-items:center}
.duo-col{display:grid;gap:12px;align-content:start}
.duo-label{font:800 .74rem/1.2 var(--f);letter-spacing:.15em;text-transform:uppercase;color:var(--muted)}
.duo-card{padding:15px 18px;border-radius:18px;border:1.5px dashed var(--navy-300);background:var(--cream-100);color:var(--navy-600);font-weight:750;line-height:1.3}
.duo-card small{display:block;margin-top:3px;font-weight:500;font-size:.88rem;color:var(--muted)}
.duo-card.us{border:1px solid var(--green-200);background:linear-gradient(135deg,var(--green-50),#fff);color:var(--navy-800);box-shadow:var(--sh-1)}
.duo-arrow{display:grid;place-items:center;width:46px;height:46px;border-radius:50%;background:var(--grad);color:#fff;box-shadow:0 8px 18px rgba(45,72,85,.25)}
@media (max-width:61.25em){.why{grid-template-columns:minmax(0,1fr)}}
@media (max-width:38.75em){.duo{grid-template-columns:minmax(0,1fr)}.duo-arrow{justify-self:center;transform:rotate(90deg)}}
.beliefs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;gap:clamp(14px,2vw,24px);list-style:none;margin:0;padding:0}
.beliefs.three{grid-template-columns:repeat(3,minmax(0,1fr))}
.beliefs.two{grid-template-columns:repeat(2,minmax(0,1fr));max-width:860px;margin-left:auto;margin-right:auto}
.belief{display:grid;gap:14px;align-content:start;justify-items:start;padding:22px;padding:clamp(22px,2.4vw,30px);background:#fff;border:1px solid var(--line);border-radius:var(--r-l);box-shadow:var(--sh-1);transition:transform .35s cubic-bezier(.2,.7,.2,1),box-shadow .35s,border-color .35s}
.belief:hover{transform:translateY(-5px);box-shadow:var(--sh-2);border-color:var(--green-200)}
.belief h3{font-size:1.14rem}
.belief p{font-size:.97rem;line-height:1.55}
.belief .addr{font-weight:650;color:var(--navy-800)}
.belief .more,.proof .more{margin-top:0;min-height:44px;overflow-wrap:anywhere}
@media (max-width:23.75em){.belief .more,.proof .more{font-size:.9rem}}
@media (max-width:67.5em){.beliefs{grid-template-columns:repeat(2,minmax(0,1fr))}.beliefs.three{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:56.25em){.beliefs.three{grid-template-columns:minmax(0,1fr)}}
@media (max-width:43.75em){.beliefs.two{grid-template-columns:minmax(0,1fr)}}
@media (max-width:35em){.beliefs{grid-template-columns:minmax(0,1fr)}}
.case{display:grid;margin:0;padding:0;list-style:none}
.case li{position:relative;display:grid;grid-template-columns:44px minmax(0,1fr);gap:18px;padding-bottom:26px}
.case li:last-child{padding-bottom:0}
.case li:not(:last-child)::before{content:"";position:absolute;left:21px;top:52px;bottom:6px;width:2px;border-radius:2px;background:linear-gradient(var(--green-300),var(--navy-200))}
.case-label{display:block;margin:4px 0 6px;font:800 .72rem/1 var(--f);letter-spacing:.14em;text-transform:uppercase;color:var(--green-700)}
.case p{font-size:1.02rem}
.proofs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;gap:clamp(14px,2vw,24px);list-style:none;margin:0;padding:0}
.proof{display:grid;gap:14px;align-content:start;justify-items:start;padding:22px;padding:clamp(22px,2.6vw,32px);background:#fff;border:1px solid var(--line);border-radius:var(--r-l);box-shadow:var(--sh-1)}
.proof h3{font-size:1.16rem}
@media (max-width:56.25em){.proofs{grid-template-columns:minmax(0,1fr)}}
/* "What homeowners say" (built only from real facts in tools/reviews_data.py): the same white cards as the proofs above, with a quote and a byline.
   One quote sits centered at a readable width, two share the row, three fill it; on a phone they stack (the rule above). */
.proof .q{margin:0;font-size:1.06rem;line-height:1.6;color:var(--ink)}
.proof .by{margin:0;font-size:.92rem;color:var(--muted)}
@media (min-width:56.3em){.proofs.n1{grid-template-columns:minmax(0,640px);justify-content:center}.proofs.n2{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:56.3em){.fine.honest.mid{max-width:46rem;margin-left:auto;margin-right:auto;text-align:center}}   /* the note under centered cards sits centered; on a phone it stays left-aligned, which reads better in a narrow column */
.legal-line{margin-top:20px;margin-top:clamp(20px,3vw,32px);text-align:center;font-size:.92rem;color:var(--muted)}

/* ---------- New homes ---------- */
.phero-build .gable .g3 img{object-position:50% 64%}
@media (max-width:32.5em){.phero-build .gable-cap{display:none}}
.spec-xl{max-width:980px;margin-left:auto;margin-right:auto;margin-inline:auto;padding:26px;padding:clamp(26px,4vw,48px);gap:20px;gap:clamp(20px,3vw,30px);box-shadow:var(--sh-2)}
.spec-xl .spec-grid{justify-content:space-between;gap:18px 14px;gap:18px clamp(14px,3vw,34px)}
.spec-xl .spec-grid dd{font-size:1.8rem;font-size:clamp(1.8rem,3.9vw,3rem)}
.spec-xl p{font-size:1.04rem;max-width:62ch}
@media (max-width:38.75em){.spec-xl .spec-grid{display:flex;flex-wrap:wrap;justify-content:flex-start;gap:18px 28px}.spec-xl .spec-grid div{flex:none;min-width:0}.spec-xl .spec-grid div:last-child{flex-basis:100%}.spec-xl .spec-grid dd{font-size:min(1.8rem,28.8px)}}
.gallery{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:12px;gap:clamp(12px,1.6vw,18px)}
.gallery figure{position:relative;margin:0;overflow:hidden;border-radius:var(--r-m);background:var(--navy-100);box-shadow:var(--sh-2)}
.gallery img{display:block;width:100%;height:100%;aspect-ratio:4/3;object-fit:cover;transition:transform 1s cubic-bezier(.2,.7,.2,1)}
.gallery figure:hover img{transform:scale(1.045)}
.gallery figcaption{position:absolute;left:12px;bottom:12px;padding:8px 13px;border-radius:10px;background:rgba(255,255,255,.93);font:750 .78rem/1 var(--f);color:var(--navy-800)}
.gallery .g-a{grid-column:span 7}.gallery .g-b{grid-column:span 5}.gallery .g-c{grid-column:span 5}.gallery .g-d{grid-column:span 7}
@media (max-width:47.5em){.gallery{grid-template-columns:repeat(2,minmax(0,1fr))}.gallery .g-a,.gallery .g-d{grid-column:1/-1}.gallery .g-b,.gallery .g-c{grid-column:span 1}}
.follow{margin-top:18px;margin-top:clamp(18px,2.4vw,28px);text-align:center;font-size:.95rem}
.follow a{color:var(--green-700);font-weight:700;text-underline-offset:3px}

/* ---------- Our work: photo wall and viewer ---------- */
.phero-plain .phero-grid{grid-template-columns:minmax(0,1fr)}
.phero-plain .phero-copy{max-width:760px}
/* the "page not found" page (Checkpoint 36): a short list of places to go */
.nf-links{display:flex;flex-wrap:wrap;gap:0 26px;margin-top:4px}
.nf-links a{display:inline-flex;align-items:center;min-height:44px;font-weight:700;color:var(--green-700);text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1.5px}
.nf-links a:hover{color:var(--green-800)}
.work-grid{columns:1;column-gap:12px;column-gap:clamp(12px,1.6vw,18px);list-style:none;margin:0;padding:0}
@media (min-width:35em){.work-grid{columns:2}}
@media (min-width:61.25em){.work-grid{columns:3}}
.work-item{break-inside:avoid;margin:0 0 12px;margin:0 0 clamp(12px,1.6vw,18px)}
.work-grid.work-rows{columns:auto;display:grid;grid-template-columns:minmax(0,1fr);gap:12px;gap:clamp(12px,1.6vw,18px)}
.work-rows .work-item{margin:0}
@media (min-width:35em){.work-grid.work-rows{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:61.25em){.work-grid.work-rows{grid-template-columns:repeat(3,minmax(0,1fr))}}
.work-item figure{position:relative;margin:0;overflow:hidden;border-radius:var(--r-m);background:var(--navy-100);box-shadow:var(--sh-2)}
.work-item a{display:block;border-radius:var(--r-m);cursor:zoom-in}
.work-item img{display:block;width:100%;height:auto;transition:transform 1s cubic-bezier(.2,.7,.2,1)}
.work-item a:hover img{transform:scale(1.04)}
.work-item figcaption{position:absolute;left:12px;bottom:12px;max-width:calc(100% - 24px);padding:8px 13px;border-radius:10px;background:rgba(255,255,255,.93);font:750 .78rem/1.25 var(--f);color:var(--navy-800);pointer-events:none}
.work-closed{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:28px;gap:clamp(28px,5vw,80px);align-items:center}
.work-closed .work-grid{columns:1;width:100%;max-width:440px;justify-self:center}
.work-closed .head{margin-bottom:24px}
@media (max-width:47.5em){.work-closed{grid-template-columns:minmax(0,1fr)}}
html.lb-open{overflow:hidden}
.lb{position:fixed;top:0;right:0;bottom:0;left:0;inset:0;margin:0;padding:0;width:100%;height:100%;max-width:none;max-height:none;border:0;background:transparent;color:#fff}
.lb::backdrop{background:rgba(12,28,36,.95)}
.lb[open]{display:grid;grid-template-columns:auto minmax(0,1fr) auto;grid-template-rows:auto minmax(0,1fr);grid-template-areas:"bar bar bar" "prev fig next";align-items:center;gap:0 6px;gap:0 clamp(6px,2vw,24px);padding:10px;padding:clamp(10px,2vw,24px)}
.lb-bar{grid-area:bar;display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:56px}
.lb-count{margin:0;font:700 .95rem/1 var(--f);letter-spacing:.04em;color:rgba(255,255,255,.92)}
.lb-fig{grid-area:fig;margin:0;display:grid;justify-items:center;align-content:center;gap:14px;min-width:0;min-height:0}
.lb-img{display:block;max-width:100%;max-height:calc(100vh - 190px);max-height:calc(100dvh - 190px);width:auto;height:auto;border-radius:var(--r-s);box-shadow:0 20px 60px rgba(0,0,0,.45)}
.lb-cap{text-align:center;font:650 1rem/1.4 var(--f);color:#fff}
.lb-close,.lb-nav{display:grid;place-items:center;width:52px;height:52px;padding:0;border-radius:50%;border:1.5px solid rgba(255,255,255,.6);background:rgba(255,255,255,.1);color:#fff;cursor:pointer;transition:background .2s,border-color .2s}
.lb-close:hover,.lb-nav:hover{background:rgba(255,255,255,.22);border-color:#fff}
.lb-close:focus-visible,.lb-nav:focus-visible{outline:3px solid #fff;outline-offset:3px}
.lb-close .i,.lb-nav .i{width:24px;height:24px}
.lb-prev{grid-area:prev}.lb-prev .i{transform:rotate(180deg)}
.lb-next{grid-area:next}
@media (max-width:40em){
  .lb[open]{grid-template-columns:1fr 1fr;grid-template-rows:auto minmax(0,1fr) auto;grid-template-areas:"bar bar" "fig fig" "prev next"}
  .lb-prev{justify-self:start}.lb-next{justify-self:end}
  .lb-img{max-height:calc(100vh - 250px);max-height:calc(100dvh - 250px)}
}
/* phones held sideways: the photo gets more of the short screen (Checkpoint 26) */
@media (max-height:500px) and (orientation:landscape){
  .lb[open]{grid-template-columns:auto minmax(0,1fr) auto;grid-template-rows:auto minmax(0,1fr);grid-template-areas:"bar bar bar" "prev fig next";padding:8px max(14px,env(safe-area-inset-left,0px))}
  .lb-prev,.lb-next{justify-self:auto}
  .lb-bar{min-height:52px}
  .lb-fig{gap:6px}
  .lb-cap{font-size:.9rem;line-height:1.25}
  .lb-img{max-height:calc(100vh - 118px);max-height:calc(100dvh - 118px)}
}

/* ---------- Contact page ---------- */
.contact-page{padding-top:26px;padding-top:clamp(26px,4vw,52px)}
.contact-copy .crumbs{margin-bottom:6px}
.contact .crumbs{color:rgba(255,255,255,.9)}
.contact .crumbs a,.contact .crumbs [aria-current]{color:#fff}
.contact .crumbs li+li::before{color:rgba(255,255,255,.65)}
.contact h1{color:#fff;font-size:2.2rem;font-size:clamp(2.2rem,4.5vw,3.7rem)}
.explore{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;gap:clamp(12px,1.6vw,20px);list-style:none;margin:0;padding:0}
.explore a{min-height:88px;padding:16px 20px 16px 16px;border-radius:var(--r-m);box-shadow:var(--sh-1)}
.explore a:hover{border-color:var(--green-400);transform:translateY(-3px);box-shadow:var(--sh-2)}
@media (max-width:56.25em){.explore{grid-template-columns:minmax(0,1fr)}}

/* ---------- Closing call-to-action band ---------- */
.cta-band{position:relative;isolation:isolate;overflow:hidden;padding-top:64px;padding-bottom:64px;padding-block:clamp(64px,8vw,104px);color:#fff;background:linear-gradient(135deg,#25404d 0%,#2b5155 50%,#336b59 100%)}
.cta-bg{position:absolute;top:0;right:0;bottom:0;left:0;inset:0;z-index:-1}
.cta-grid{position:relative;display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:28px;gap:clamp(28px,5vw,72px);align-items:center}
.cta-band .eyebrow.on-dark{color:#fff}
.cta-band h2{margin:16px 0;color:#fff;font-size:1.9rem;font-size:clamp(1.9rem,3.8vw,3rem)}
.cta-band .ital{color:#c4ecda}
.cta-band .lede{color:rgba(255,255,255,.96)}
.cta-actions{display:grid;gap:12px}
.btn-light{background:#fff;color:var(--navy-800);box-shadow:0 12px 28px rgba(10,28,36,.28)}
.btn-light:hover{background:var(--green-50)}
.btn-outline-light{background:rgba(255,255,255,.1);color:#fff;border-color:rgba(255,255,255,.6)}
.btn-outline-light:hover{background:rgba(255,255,255,.2);border-color:#fff}
.cta-note{text-align:center;font-size:.9rem;color:rgba(255,255,255,.92)}
@media (max-width:53.75em){.cta-grid{grid-template-columns:minmax(0,1fr)}}

/* ---------- Smooth page-to-page fade where the browser supports it ---------- */
@media (prefers-reduced-motion:no-preference){@view-transition{navigation:auto}}
::view-transition-old(root),::view-transition-new(root){animation-duration:.28s}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
  .js .rv:not(.in){opacity:1}
  .ridge path{transform:none!important}
}

@media print{.js .rv:not(.in){opacity:1!important}.hdr,.mobile-bar{display:none!important}}

/* Print my numbers (Checkpoint 36). The button on the net sheet adds html.print-sheet just before it opens the print box, so only the net sheet goes to paper:
   the numbers typed in, the two sheets, the answer, one line to reach us. Nothing here depends on background colors (printers drop them by default), so the green answer box prints as dark text in a ruled box. */
@media print{
  html.print-sheet .skip,html.print-sheet .hdr,html.print-sheet .mnav,html.print-sheet .mobile-bar,html.print-sheet .ftr,
  html.print-sheet main>:not(#numbers),
  html.print-sheet #numbers .wrap>:not(.print-brand):not(.netsheet-head):not(.net),
  html.print-sheet .netsheet-head .lede,html.print-sheet .netsheet-head .eyebrow,
  html.print-sheet #calc,html.print-sheet .res-actions{display:none!important}
  html.print-sheet,html.print-sheet body{background:#fff!important;color:#111}
  html.print-sheet body{padding:0!important}   /* the strip kept clear for the phone call bar would push the last line onto a second page */
  html.print-sheet #numbers{padding:0!important;background:#fff!important}
  html.print-sheet #numbers .wrap{max-width:none;padding:0}
  html.print-sheet .print-only{display:block!important}
  html.print-sheet .print-brand{margin:0 0 6pt;font-size:11pt;color:#444}
  html.print-sheet .print-brand b{color:#111}
  html.print-sheet .netsheet-head{margin:0 0 10pt;text-align:left}
  html.print-sheet .netsheet-head h2{margin:0;font-size:20pt;line-height:1.15;color:#111}
  html.print-sheet .net{display:block}
  html.print-sheet .print-inputs{margin:0 0 10pt;padding:8pt 12pt;border:.75pt solid #777;break-inside:avoid}
  html.print-sheet .print-inputs p{margin:0 0 4pt;font-size:10.5pt;color:#444}
  html.print-sheet .print-inputs dl{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:2pt 22pt;margin:0}
  html.print-sheet .print-inputs dl div{display:flex;justify-content:space-between;gap:10pt;font-size:10.5pt}
  html.print-sheet .print-inputs dt{color:#333}
  html.print-sheet .print-inputs dd{margin:0;font-weight:700;white-space:nowrap}
  html.print-sheet .panel.results{padding:0;border:0;background:#fff;box-shadow:none;gap:10pt}
  html.print-sheet .cols{gap:12pt}
  html.print-sheet .sheet,html.print-sheet .sheet-us{padding:8pt 12pt;border:.75pt solid #555;border-radius:0;background:#fff;break-inside:avoid}
  html.print-sheet .sheet h4,html.print-sheet .sheet dt,html.print-sheet .sheet dd,html.print-sheet .sheet h4 small{color:#111}
  html.print-sheet .sheet h4{margin-bottom:8pt}
  html.print-sheet .sheet dl{gap:5pt;font-size:10.5pt}
  html.print-sheet .sheet .total{border-top:1.5pt solid #111}
  html.print-sheet .sheet .total dd{font-size:14pt}
  html.print-sheet .verdict{gap:5pt;padding:10pt 12pt;border:1.5pt solid #111;border-radius:0;background:#fff!important;color:#111;break-inside:avoid}
  html.print-sheet .verdict .big,html.print-sheet .verdict .big span,html.print-sheet .verdict p,html.print-sheet .verdict .breakeven,html.print-sheet .verdict .breakeven strong{color:#111!important}
  html.print-sheet .verdict .big{font-size:17pt}
  html.print-sheet .verdict p{font-size:10.5pt}
  html.print-sheet .verdict .breakeven{border-top:.75pt solid #777}
  html.print-sheet .panel.results>.fine{margin:0;font-size:9.5pt;color:#444}
  html.print-sheet .print-contact{margin:12pt 0 0;padding-top:8pt;border-top:.75pt solid #777;font-size:10.5pt;line-height:1.5;color:#111}
}

/* Phone legibility floor (Checkpoint 19): small capital labels and short notes no smaller than about 12px (.76 to .78rem); photo captions, compare-table labels and form hints no smaller than 13px (.82rem).
   Phones only; desktop sizes are unchanged. The HOME OPTIONS line inside the logo is a lockup and keeps its size. */
@media (max-width:43.75em){
  .gable-cap span,.hero .gable-cap span{font-size:.76rem;letter-spacing:.07em}
  .us-badge,.example-tag,.founder figcaption span,.spec-grid dt,.txt small,.case-label,.fieldset-label,.sheet h4 small,.jump-label,.duo-label,.stamp,.pull cite,.ftr-col h2{font-size:.78rem}
  .hero-people small,.cmp td::before,.mosaic figcaption,.gallery figcaption,.work-item figcaption,.hint{font-size:.82rem}
  .eyebrow{line-height:1.3}   /* a label that wraps to two lines (New homes at 320px) no longer sits cramped */
}

/* ---------- Older browsers (Checkpoint 32) ----------
   Phones and tablets from before about 2020 do not understand clamp(), aspect-ratio or inset. Every rule that uses clamp(), inset, margin-inline or padding-block now has a plain line in front of it (newer browsers read the next line and ignore it), and the photo frames get their height the long way. Newer browsers skip this block. */
@supports not (width:clamp(1px,2px,3px)){:root{--pull:64px}}
@supports not (aspect-ratio:1/1){
  .gable::before{content:"";display:block;padding-top:110.714%}
  .gable-sm::before{content:"";display:block;padding-top:107.143%}
}