/* DESIGNWORX — warm, uncluttered, one-decision-per-screen (§6 Airbnb-inspired). */
:root{
  --paper:#FCFAF7; --card:#FFFFFF; --ink:#1C1A17; --soft:#6B655D; --faint:#9C958A;
  --line:#E8E2D9; --accent:#B4522E; --accent-soft:#F5EAE4; --ok:#2F6B4F;
  --sans:"Geist","Helvetica Neue",Helvetica,Arial,sans-serif;
  --ease:cubic-bezier(.22,1,.36,1); --r:14px; --pad:clamp(20px,5vw,64px);
}
*{box-sizing:border-box;margin:0;padding:0}
body{background:var(--paper);color:var(--ink);font-family:var(--sans);font-weight:300;line-height:1.6;
  -webkit-font-smoothing:antialiased}
button{font:inherit;cursor:pointer}
h1,h2{font-weight:100;letter-spacing:-.025em;line-height:1.06}
h3{font-weight:400}
.eyebrow{font-size:11.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--faint)}

.top{display:flex;align-items:center;justify-content:space-between;padding:18px var(--pad);
  border-bottom:1px solid var(--line);background:rgba(252,250,247,.94);position:sticky;top:0;z-index:20}
.top__mark{font-size:16px;font-weight:300;letter-spacing:.3em;text-decoration:none;color:inherit}
.top__tag{font-size:12px;color:var(--faint);letter-spacing:.1em}

/* landing */
.land{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(24px,4vw,64px);align-items:center;
  padding:clamp(40px,7vw,110px) var(--pad);max-width:1280px;margin:0 auto}
.land h1{font-size:clamp(34px,6vw,72px);margin:16px 0 20px}
.lead{font-size:clamp(15px,1.6vw,18px);color:var(--soft);max-width:56ch;line-height:1.75}
.land .btn{margin-top:30px}
.land__pts{list-style:none;margin-top:34px;display:grid;gap:9px}
.land__pts li{font-size:14px;color:var(--soft);padding-left:22px;position:relative}
.land__pts li:before{content:"";position:absolute;left:0;top:11px;width:11px;height:1px;background:var(--accent)}
.land__art{aspect-ratio:4/5;border-radius:var(--r);overflow:hidden;position:relative;
  background:linear-gradient(150deg,#EFE6DC 0%,#E3D6C8 45%,#D8C6B4 100%)}
.land__blob{position:absolute;inset:14% 16%;border-radius:50% 50% 46% 54%/54% 46% 54% 46%;
  background:linear-gradient(160deg,rgba(255,255,255,.75),rgba(180,82,46,.20));
  animation:float 12s ease-in-out infinite alternate}
@keyframes float{from{transform:translateY(-8px) rotate(-3deg)}to{transform:translateY(10px) rotate(4deg)}}
@media(max-width:860px){.land{grid-template-columns:1fr}.land__art{display:none}}

/* buttons */
.btn{display:inline-block;font-size:13px;letter-spacing:.12em;text-transform:uppercase;
  padding:15px 28px;border-radius:999px;border:1px solid var(--ink);transition:.25s var(--ease)}
.btn--solid{background:var(--ink);color:var(--paper)}
.btn--solid:hover{background:var(--accent);border-color:var(--accent)}
.btn--solid:disabled{opacity:.28;cursor:not-allowed;background:var(--ink);border-color:var(--ink)}
.btn--ghost,.btn--line{background:transparent;color:var(--ink)}
.btn--ghost:hover,.btn--line:hover{background:var(--ink);color:var(--paper)}

/* flow */
.flow{max-width:1180px;margin:0 auto;padding:0 var(--pad) 40px}
.flow__bar{display:flex;align-items:center;gap:16px;padding:26px 0 8px}
.flow__prog{flex:1;height:3px;background:var(--line);border-radius:2px;overflow:hidden}
.flow__prog i{display:block;height:100%;background:var(--accent);width:0;transition:width .45s var(--ease)}
.flow__step{font-size:12px;color:var(--faint);letter-spacing:.08em;white-space:nowrap}
.flow__body{display:grid;grid-template-columns:1fr 320px;gap:clamp(22px,3.4vw,52px);
  padding:clamp(20px,3vw,44px) 0;align-items:start}
.flow__main h2{font-size:clamp(24px,3.4vw,42px);margin-bottom:10px;animation:rise .4s var(--ease)}
@keyframes rise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.help{font-size:14.5px;color:var(--soft);margin-bottom:24px;max-width:52ch}
.field{width:100%;max-width:460px;font:inherit;font-size:19px;font-weight:300;padding:16px 18px;
  border:1px solid var(--line);border-radius:var(--r);background:var(--card);color:var(--ink)}
.field:focus{outline:none;border-color:var(--ink)}

.cards{display:grid;gap:10px;max-width:620px}
.opt{display:block;text-align:left;background:var(--card);border:1px solid var(--line);
  border-radius:var(--r);padding:17px 20px;transition:.2s var(--ease)}
.opt:hover{border-color:#CFC6B8;transform:translateY(-1px)}
.opt.on{border-color:var(--ink);background:var(--accent-soft)}
.opt b{display:block;font-weight:400;font-size:16px}
.opt i{display:block;font-style:normal;font-size:13.5px;color:var(--soft);margin-top:3px}

/* photo-led property tiles (§6) */
.cards--tiles{grid-template-columns:repeat(3,1fr);max-width:none}
.tile{text-align:left;background:var(--card);border:1px solid var(--line);border-radius:var(--r);
  overflow:hidden;transition:.25s var(--ease);padding:0}
.tile:hover{transform:translateY(-3px);box-shadow:0 14px 30px rgba(28,26,23,.09)}
.tile.on{border-color:var(--ink);box-shadow:0 0 0 1px var(--ink)}
.tile__img{display:block;aspect-ratio:4/3;background:#EDE5DA}
.tile__img--living{background:linear-gradient(140deg,#EFE4D6,#D9C6AE)}
.tile__img--shell{background:linear-gradient(140deg,#E9E6E1,#C9C3B9)}
.tile__img--villa{background:linear-gradient(140deg,#E6E9E2,#BFC9B6)}
.tile__img--house{background:linear-gradient(140deg,#EDE6DF,#CDBBA8)}
.tile__img--heritage{background:linear-gradient(140deg,#F2E3D2,#D2A57E)}
.tile__img--farm{background:linear-gradient(140deg,#E8EDE3,#B9C7A8)}
.tile__img--hotel{background:linear-gradient(140deg,#E7E3EC,#B9B2C6)}
.tile__img--resort{background:linear-gradient(140deg,#E0EDEC,#A9C9C6)}
.tile__img--boutique{background:linear-gradient(140deg,#F1E7E4,#D3AFA6)}
.tile__img--office{background:linear-gradient(140deg,#E6E9EE,#B4BDC9)}
.tile__img--retail{background:linear-gradient(140deg,#EFE9E3,#C8B9A6)}
.tile__img--fnb{background:linear-gradient(140deg,#F0E6DC,#CBA88A)}
.tile__b{display:block;padding:15px 17px 18px}
.tile__b b{display:block;font-weight:400;font-size:15.5px}
.tile__b i{display:block;font-style:normal;font-size:13px;color:var(--soft);margin-top:3px;line-height:1.5}
@media(max-width:900px){.cards--tiles{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.cards--tiles{grid-template-columns:1fr}}

/* live suggested budget (§5.1) */
.flow__side{position:sticky;top:96px}
.gauge{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:22px}
.g__label{display:block;font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--faint)}
.g__val{display:block;font-size:26px;font-weight:200;margin-top:10px;line-height:1.2;
  transition:opacity .3s}
.g__val i{font-style:normal;font-size:14px;color:var(--soft)}
.g__val--wait{font-size:15px;color:var(--faint)}
.g__bar{display:block;height:3px;background:var(--line);border-radius:2px;margin-top:16px;overflow:hidden}
.g__bar i{display:block;height:100%;background:var(--accent);transition:width .5s var(--ease)}
.g__note{display:block;font-size:12px;color:var(--faint);margin-top:10px}
.side__note{font-size:12px;color:var(--faint);margin-top:12px;line-height:1.6}
@media(max-width:900px){.flow__body{grid-template-columns:1fr}.flow__side{position:static;order:-1}}

.flow__acts{display:flex;gap:12px;justify-content:space-between;padding-top:22px;border-top:1px solid var(--line)}

/* report (§9) */
.rep{max-width:900px;animation:rise .5s var(--ease)}
.rep__ey{font-size:11.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--accent)}
.rep h2{font-size:clamp(26px,3.6vw,44px);margin:12px 0 16px}
.rep__sum{font-size:16.5px;color:var(--soft);line-height:1.8;margin-bottom:30px}
.rep__grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:14px}
.rc{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:24px;margin-bottom:14px}
.rc h3{font-size:15px;letter-spacing:.02em;margin-bottom:14px}
.rc__big{font-size:26px;font-weight:200}
.rc__note{font-size:13px;color:var(--soft);margin-top:8px;line-height:1.6}
.tick{list-style:none;display:grid;gap:10px}
.tick li{font-size:14.5px;color:var(--soft);padding-left:22px;position:relative;line-height:1.6}
.tick li:before{content:"";position:absolute;left:0;top:11px;width:11px;height:1px;background:var(--accent)}
.tick b{color:var(--ink);font-weight:400}
.road{list-style:none;counter-reset:r;display:grid;gap:0}
.road li{counter-increment:r;display:flex;align-items:center;gap:12px;padding:12px 0;
  border-bottom:1px solid var(--line);font-size:14.5px;color:var(--faint)}
.road li:last-child{border-bottom:0}
.road li:before{content:counter(r);width:24px;height:24px;border-radius:50%;border:1px solid var(--line);
  display:grid;place-items:center;font-size:11px;flex:none}
.road li.done{color:var(--soft)}
.road li.done:before{background:var(--line);border-color:var(--line)}
.road li.now{color:var(--ink)}
.road li.now:before{background:var(--accent);border-color:var(--accent);color:#fff}
.road li i{font-style:normal;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);margin-left:auto}
.chips2{display:flex;flex-wrap:wrap;gap:8px}
.chips2 span{font-size:13px;border:1px solid var(--line);border-radius:999px;padding:8px 15px;color:var(--soft)}
.up{background:var(--ink);color:var(--paper);border-radius:var(--r);padding:30px;margin-top:22px}
.up__ey{font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:rgba(252,250,247,.55)}
.up h3{font-size:21px;font-weight:200;margin:10px 0 12px}
.up p{font-size:14.5px;color:rgba(252,250,247,.75);line-height:1.75;max-width:62ch;margin-bottom:20px}
.up .btn--solid{background:var(--paper);color:var(--ink);border-color:var(--paper)}
.up .btn--solid:hover{background:var(--accent);color:#fff;border-color:var(--accent)}
.rep__acts{display:flex;gap:10px;margin-top:22px;flex-wrap:wrap}
@media(max-width:760px){.rep__grid{grid-template-columns:1fr}}

.foot{border-top:1px solid var(--line);padding:26px var(--pad);font-size:12.5px;color:var(--faint)}
@media print{.top,.flow__bar,.flow__acts,.flow__side,.up,.rep__acts,.foot{display:none!important}
  body{background:#fff}.rc{break-inside:avoid}}

/* budget slider (§5.1 typical budget) */
.slid{max-width:520px}
.slid output{display:block;font-size:32px;font-weight:200;margin-bottom:16px}
.range{width:100%;appearance:none;height:3px;background:var(--line);border-radius:2px;outline:none}
.range::-webkit-slider-thumb{appearance:none;width:26px;height:26px;border-radius:50%;
  background:var(--ink);cursor:pointer;border:3px solid var(--paper);box-shadow:0 2px 8px rgba(0,0,0,.22)}
.range::-moz-range-thumb{width:26px;height:26px;border-radius:50%;background:var(--ink);
  cursor:pointer;border:3px solid var(--paper)}
.slid__ends{display:flex;justify-content:space-between;font-size:12px;color:var(--faint);margin-top:10px}
.skip{margin-top:16px}
.linkbtn{background:none;border:0;color:var(--soft);font-size:13.5px;text-decoration:underline;
  text-underline-offset:3px;padding:0}
.linkbtn:hover{color:var(--ink)}

/* gap analysis */
.gap{font-size:13.5px;line-height:1.65;margin-top:14px;padding:12px 14px;border-radius:10px}
.gap--under{background:#FBEDE7;color:#8A3A1C}
.gap--ok{background:#EAF2ED;color:var(--ok)}
.gap--over{background:#EFEDE8;color:var(--soft)}

/* phased cost table */
.phz{width:100%;border-collapse:collapse;font-size:14px}
.phz th{text-align:left;font-weight:400;font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--faint);padding-bottom:10px;border-bottom:1px solid var(--line)}
.phz td{padding:11px 0;border-bottom:1px solid var(--line);color:var(--soft)}
.phz td:first-child{color:var(--ink)}
.phz td:last-child{text-align:right;white-space:nowrap}
.phz tr:last-child td{border-bottom:0}

/* questions-to-ask artifact */
.askg{margin-bottom:22px}
.askg:last-child{margin-bottom:0}
.askg h4{font-size:13px;font-weight:400;letter-spacing:.02em;margin-bottom:10px;color:var(--accent)}

/* returning user */
.resume{margin-top:28px;padding:20px;background:var(--card);border:1px solid var(--line);
  border-radius:var(--r);display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.resume p{font-size:14.5px;color:var(--soft);margin-right:auto}

/* header actions */
.top__mark{background:none;border:0;cursor:pointer;font-family:inherit;font-size:16px;font-weight:300;
  letter-spacing:.3em;color:inherit;padding:0}
.top__r{display:flex;align-items:center;gap:14px}
.top__home,.top__auth{font:inherit;font-size:13px;background:none;border:0;color:var(--soft);cursor:pointer;padding:6px 0}
.top__home:hover,.top__auth:hover{color:var(--ink)}
.top__auth{border:1px solid var(--line);border-radius:999px;padding:8px 18px}
.top__auth:hover{border-color:var(--ink)}
.top__auth.on{background:var(--accent-soft);border-color:var(--accent);color:var(--accent);
  max-width:190px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@media(max-width:560px){.top__home{display:none}}


/* modal */
.modal{position:fixed;inset:0;z-index:100;background:rgba(28,26,23,.44);
  display:grid;place-items:center;padding:20px;animation:fade .2s var(--ease)}
@keyframes fade{from{opacity:0}to{opacity:1}}
.modal[hidden]{display:none}
.modal__box{position:relative;background:var(--card);border-radius:20px;padding:34px 30px 26px;
  width:100%;max-width:400px;box-shadow:0 24px 60px rgba(28,26,23,.24);animation:rise .28s var(--ease)}
.modal__x{position:absolute;top:14px;right:16px;background:none;border:0;font-size:26px;line-height:1;
  color:var(--faint);cursor:pointer}
.modal__x:hover{color:var(--ink)}
.modal__box h3{font-size:21px;font-weight:200;margin-bottom:8px}
.modal__sub{font-size:14px;color:var(--soft);margin-bottom:22px}
.modal__note{font-size:11.5px;color:var(--faint);margin-top:18px;text-align:center;line-height:1.5}
.w{width:100%;text-align:center;margin-top:14px}

/* sso buttons */
.sso{display:flex;align-items:center;gap:12px;width:100%;font:inherit;font-size:14.5px;cursor:pointer;
  background:var(--card);border:1px solid var(--line);border-radius:12px;padding:13px 16px;margin-bottom:10px;
  transition:.2s var(--ease);color:var(--ink)}
.sso:hover{border-color:var(--ink);transform:translateY(-1px)}
.sso__i{width:24px;height:24px;border-radius:50%;display:grid;place-items:center;font-size:13px;
  font-weight:500;color:#fff;flex:none}
.sso--g .sso__i{background:#4285F4}
.sso--f .sso__i{background:#1877F2}
.sso--m .sso__i{background:var(--ink)}
.or{display:flex;align-items:center;gap:12px;margin:16px 0;color:var(--faint);font-size:12px}
.or:before,.or:after{content:"";flex:1;height:1px;background:var(--line)}

/* otp */
.otp{display:flex;gap:8px;justify-content:space-between;margin-bottom:12px}
.otp input{width:100%;aspect-ratio:1;text-align:center;font:inherit;font-size:20px;font-weight:300;
  border:1px solid var(--line);border-radius:10px;background:var(--paper);color:var(--ink)}
.otp input:focus{outline:none;border-color:var(--ink)}
.otp.bad input{border-color:#C0512C}
.otp__demo{font-size:12.5px;color:var(--soft);background:var(--accent-soft);border-radius:8px;
  padding:9px 12px;margin-bottom:6px}
.field.bad{border-color:#C0512C}
.back{display:block;margin:14px auto 0}

/* adaptive-tier tag */
.aitag{display:inline-block;font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--accent);background:var(--accent-soft);border-radius:999px;padding:5px 12px;margin-bottom:14px}
/* matched professionals / brands */
.pros{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.pro{border:1px solid var(--line);border-radius:12px;padding:16px 18px;background:var(--paper)}
.pro__h{display:flex;align-items:center;gap:8px}
.pro__h b{font-weight:400;font-size:15.5px}
.vf{font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--ok);
  border:1px solid currentColor;border-radius:999px;padding:2px 7px}
.pro__m{display:block;font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--faint);margin:6px 0 8px}
.pro p{font-size:13px;color:var(--soft);line-height:1.6}
@media(max-width:700px){.pros{grid-template-columns:1fr}}
.paylist{list-style:none;margin:0 0 20px;display:grid;gap:8px}
.paylist li{font-size:13.5px;color:var(--soft);padding-left:20px;position:relative}
.paylist li:before{content:"";position:absolute;left:0;top:10px;width:10px;height:1px;background:var(--accent)}

/* marketplace */
.dgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.dcard{text-align:left;background:var(--card);border:1px solid var(--line);border-radius:var(--r);
  padding:18px;cursor:pointer;font:inherit;color:inherit;transition:.22s var(--ease)}
.dcard:hover{border-color:var(--ink);transform:translateY(-2px)}
.dcard__s{display:block;font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--accent)}
.dcard b{display:block;font-weight:400;font-size:15.5px;margin:7px 0 5px}
.dcard i{display:block;font-style:normal;font-size:12.5px;color:var(--soft);line-height:1.55}
.dcard__n{display:block;font-size:11px;color:var(--faint);margin-top:10px}
@media(max-width:1000px){.dgrid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.dgrid{grid-template-columns:1fr}}
.mfilters{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:16px}
.mfilters select,.mfilters input{font:inherit;font-size:14px;padding:12px 14px;border:1px solid var(--line);
  border-radius:10px;background:var(--card);color:var(--ink);min-width:190px}
.mfilters input{flex:1;min-width:220px}
.mcount{font-size:12.5px;color:var(--faint);margin-bottom:18px}
.mgrid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
.mp{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:22px}
.mp__h{display:flex;align-items:center;gap:9px}
.mp__h b{font-weight:400;font-size:17px}
.mp__m{display:block;font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--faint);margin:7px 0 10px}
.mp p{font-size:14px;color:var(--soft);line-height:1.65}
.mp__t{display:flex;flex-wrap:wrap;gap:6px;margin:12px 0 16px}
.mp__t span{font-size:11.5px;border:1px solid var(--line);border-radius:999px;padding:5px 11px;color:var(--soft)}
.mp__a{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.mp__src{font-size:11px;color:var(--faint)}
@media(max-width:820px){.mgrid{grid-template-columns:1fr}}
.empty{grid-column:1/-1;border:1px dashed var(--line);border-radius:var(--r);padding:40px 30px;text-align:center;background:var(--card)}
.empty b{display:block;font-weight:400;font-size:18px;margin-bottom:10px}
.empty p{font-size:14px;color:var(--soft);max-width:52ch;margin:0 auto 20px;line-height:1.7}

/* boq */
.steps{list-style:none;counter-reset:s;display:grid;gap:14px;max-width:760px}
.steps li{counter-increment:s;position:relative;padding-left:38px;font-size:14.5px;color:var(--soft);line-height:1.7}
.steps li:before{content:counter(s);position:absolute;left:0;top:2px;width:24px;height:24px;border-radius:50%;
  background:var(--ink);color:var(--paper);display:grid;place-items:center;font-size:11px}
.steps b{color:var(--ink);font-weight:400}
.warn{margin-top:26px;background:var(--accent-soft);border-radius:12px;padding:16px 18px;
  font-size:13.5px;color:#8A3A1C;line-height:1.7;max-width:760px}
.warn b{font-weight:500}
.brow{display:flex;align-items:center;gap:10px;margin-bottom:10px;flex-wrap:wrap}
.brow select,.brow input{font:inherit;font-size:14px;padding:11px 13px;border:1px solid var(--line);
  border-radius:10px;background:var(--card);color:var(--ink)}
.brow input{width:110px}
.brow__u{font-size:12.5px;color:var(--faint)}
.bqh{font-size:13px;font-weight:400;letter-spacing:.02em;color:var(--accent);margin:24px 0 8px}
.bqtotal{display:flex;justify-content:space-between;align-items:baseline;gap:16px;margin-top:24px;
  padding-top:18px;border-top:1px solid var(--ink)}
.bqtotal span{font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--faint)}
.bqtotal b{font-size:26px;font-weight:200}
@media print{.top,.mfilters,.steps,.warn,.brow button,.more,.foot{display:none!important}}
.land__alt{margin-top:20px;font-size:13.5px;color:var(--soft)}
.land__alt a{color:var(--ink);border-bottom:1px solid var(--line);padding-bottom:2px}
.land__alt a:hover{border-color:var(--ink)}

/* ==================================================================
 * Shared page furniture for /marketplace, /boq and /faqs.
 * These class names were used in the markup but never defined, so
 * every section on those pages rendered with zero padding.
 * ================================================================== */
.phead{padding:clamp(46px,7vw,104px) var(--pad) clamp(24px,3vw,40px);max-width:1280px;margin:0 auto}
.phead h1{font-size:clamp(34px,5.6vw,72px);margin:16px 0 20px}
.phead .lead{max-width:64ch}

.band{padding:clamp(38px,5.5vw,80px) var(--pad);max-width:1280px;margin:0 auto;
  border-top:1px solid var(--line)}
.band:first-of-type{border-top:0}
.band__head{margin-bottom:clamp(22px,3vw,40px)}
.band__head h2{font-size:clamp(24px,3.4vw,44px);margin-top:12px;font-weight:100;letter-spacing:-.02em}
.band__head .eyebrow{margin-bottom:0}

.prose{font-size:15.5px;color:var(--soft);max-width:70ch;line-height:1.8}
.prose a{color:var(--ink);border-bottom:1px solid var(--line);padding-bottom:1px}
.prose a:hover{border-color:var(--ink)}
.more{margin-top:26px}

/* FAQ accordion */
.faq{border-top:1px solid var(--line);max-width:880px}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{list-style:none;cursor:pointer;padding:20px 42px 20px 0;position:relative;
  font-size:16.5px;font-weight:300;color:var(--ink);line-height:1.5}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:8px;top:18px;font-size:22px;font-weight:200;
  color:var(--accent);transition:transform .25s var(--ease)}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq summary:hover{color:var(--accent)}
.faq .fa{padding:0 42px 22px 0;font-size:14.5px;line-height:1.8;color:var(--soft);max-width:72ch}

/* the FAQ page stacks many short bands — tighten the rhythm between them */
.faq-page .band{padding-top:clamp(26px,3.4vw,44px);padding-bottom:clamp(26px,3.4vw,44px)}

/* consistent breathing room where grids sit directly under a heading */
.band .dgrid,.band .mgrid,.band #boqout{margin-top:4px}
.band #rooms{margin-bottom:6px}

/* reference brands per product category */
.catg{margin-bottom:24px}
.catg:last-child{margin-bottom:0}
.catg h4{font-size:12.5px;font-weight:400;letter-spacing:.12em;text-transform:uppercase;
  color:var(--accent);margin-bottom:10px}
.refs{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.ref{display:block;border:1px solid var(--line);border-radius:12px;padding:14px 16px;
  background:var(--paper);transition:.2s var(--ease)}
a.ref:hover{border-color:var(--ink);transform:translateY(-2px)}
.ref b{display:block;font-weight:400;font-size:14.5px}
.ref i{display:block;font-style:normal;font-size:12.5px;color:var(--soft);line-height:1.55;margin:5px 0 9px}
.ref span{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--accent)}
.ref--nolink{opacity:.72}
.ref--nolink span{color:var(--faint)}
@media(max-width:700px){.refs{grid-template-columns:1fr}}

/* ---- Airbnb-style search hero (professionals + products) ---- */
.shero{padding:clamp(46px,7vw,96px) var(--pad) clamp(30px,4vw,52px);
  background:linear-gradient(170deg,#F6EFE7 0%,var(--paper) 68%);border-bottom:1px solid var(--line)}
.shero--alt{background:linear-gradient(170deg,#EDF0EC 0%,var(--paper) 68%)}
.shero__in{max-width:1280px;margin:0 auto}
.shero h1{font-size:clamp(32px,5.4vw,68px);margin:16px 0 18px}
.shero .lead{max-width:62ch;margin-bottom:34px}
.sbar{display:flex;align-items:stretch;gap:0;background:var(--card);border:1px solid var(--line);
  border-radius:999px;padding:6px;max-width:920px;margin-inline:auto;
  box-shadow:0 10px 30px rgba(28,26,23,.09)}
.sbar__f{flex:1;display:flex;flex-direction:column;justify-content:center;gap:2px;
  padding:10px 22px;border-radius:999px;cursor:pointer;transition:background .2s;min-width:0}
.sbar__f:hover{background:var(--paper)}
.sbar__f+.sbar__f{box-shadow:inset 1px 0 0 var(--line)}
.sbar__f span{font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--faint)}
.sbar__f select,.sbar__f input{font:inherit;font-size:14.5px;border:0;background:none;color:var(--ink);
  padding:0;outline:none;width:100%;cursor:pointer;text-overflow:ellipsis}
.sbar__f input{cursor:text}
.sbar__f--q{flex:1.3}
.sbar__go{flex:none;width:52px;height:52px;border-radius:50%;border:0;background:var(--accent);color:#fff;
  display:grid;place-items:center;cursor:pointer;align-self:center;margin-left:6px;transition:.2s var(--ease)}
.sbar__go:hover{background:var(--ink);transform:scale(1.05)}
@media(max-width:820px){
  .sbar{flex-direction:column;border-radius:20px;padding:8px;gap:2px}
  .sbar__f+.sbar__f{box-shadow:inset 0 1px 0 var(--line)}
  .sbar__f{border-radius:14px;padding:12px 16px}
  .sbar__go{width:100%;border-radius:14px;height:48px;margin:6px 0 0}
}
.onlylink{display:inline-flex;align-items:center;gap:9px;font-size:13.5px;color:var(--soft);margin-bottom:14px;cursor:pointer}
.mp--link{display:block;text-decoration:none;color:inherit;transition:.22s var(--ease)}
.mp--link:hover{border-color:var(--ink);transform:translateY(-2px)}
.mp__go{display:inline-block;margin-top:12px;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--accent)}
.lt{font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--faint);
  border:1px solid var(--line);border-radius:999px;padding:2px 7px}
.mp--listed{background:transparent}
.mp--listed .mp__a{justify-content:flex-end}
.tiernote{font-size:13px;color:var(--soft);line-height:1.7;max-width:76ch;margin-bottom:16px;
  background:var(--card);border:1px solid var(--line);border-radius:12px;padding:14px 16px}
.tiernote b{color:var(--ink);font-weight:400}

/* city index + guides */
.citywrap{display:flex;flex-wrap:wrap;gap:8px}
.citychip{display:inline-flex;align-items:center;gap:8px;font-size:13.5px;color:var(--soft);
  border:1px solid var(--line);border-radius:999px;padding:9px 16px;background:var(--card);transition:.2s var(--ease)}
.citychip:hover{border-color:var(--ink);color:var(--ink);transform:translateY(-1px)}
.citychip i{font-style:normal;font-size:11px;color:var(--faint)}

/* four entry cards on the landing page */
.quad{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:34px;max-width:980px}
.qc{display:block;position:relative;background:var(--card);border:1px solid var(--line);
  border-radius:18px;padding:26px 26px 24px;transition:.28s var(--ease)}
.qc:hover{border-color:var(--ink);transform:translateY(-3px);box-shadow:0 16px 34px rgba(28,26,23,.09)}
.qc--wide{grid-column:1/-1;background:linear-gradient(140deg,#F6EFE7,var(--card) 62%)}
.qc__n{font-size:11px;letter-spacing:.18em;color:var(--accent)}
.qc h3{font-size:19px;font-weight:300;line-height:1.25;margin:10px 0 10px;letter-spacing:-.01em}
.qc p{font-size:13.5px;color:var(--soft);line-height:1.65}
.qc p b{color:var(--ink);font-weight:400}
.qc__go{display:inline-block;margin-top:14px;font-size:11.5px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--accent)}
.qc__go a{color:var(--accent);border-bottom:1px solid currentColor}
@media(max-width:760px){.quad{grid-template-columns:1fr}}
/* coverage tracker */
.cov{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:8px}
.covc{border:1px solid var(--line);border-radius:12px;padding:16px 18px;background:var(--card)}
.covc b{display:block;font-size:13px;font-weight:400}
.covc span{display:block;font-size:11.5px;color:var(--faint);margin:4px 0 9px}
.covbar{height:4px;background:var(--line);border-radius:2px;overflow:hidden}
.covbar i{display:block;height:100%;background:var(--accent)}
@media(max-width:700px){.cov{grid-template-columns:1fr}}
/* the quad cards are anchors — reset inherited link styling */
.qc,.qc:visited{color:inherit;text-decoration:none}
.qc h3,.qc p,.qc__n{text-decoration:none;color:inherit}
.qc h3{color:var(--ink)}
.qc p{color:var(--soft)}
.qc__n{color:var(--accent)}
.qc__go a{text-decoration:none}


/* ==================================================================
 * DESIGN SYSTEM — glassmorphism, depth, monochrome + emerald
 * Dark immersive hero -> light structured content.
 * ================================================================== */
:root{
  --black:#000000; --light:#F4F4F5; --zinc:#18181B; --zinc5:#71717A; --zinc1:#F4F4F5;
  --emerald:#34D399; --brd:rgba(255,255,255,.10);
  --paper:var(--light); --ink:#09090B; --soft:#71717A; --faint:#A1A1AA;
  --card:#FFFFFF; --line:#E4E4E7; --accent:#34D399; --accent-soft:rgba(52,211,153,.10);
  --sans:"Inter","Geist",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
  --ease:cubic-bezier(.16,1,.3,1);
  --r-lg:2.5rem; --r-md:1.5rem; --r-sm:1rem;
}
body{background:var(--light);color:var(--ink);font-family:var(--sans);font-weight:300;letter-spacing:-.011em}
h1,h2,h3{font-weight:500;letter-spacing:-.05em;line-height:1.05}
h1,h2{font-weight:600}
.eyebrow,.kicker,.dcard__s,.mp__m,.rep__ey,.up__ey,.statstrip span,.covc span{
  font-weight:700;font-size:10px;letter-spacing:.2em;text-transform:uppercase}
.lead,.prose,.qc p,.mp p{color:var(--zinc5);font-weight:300}

/* grain — analog depth on dark surfaces, prevents gradient banding */
.grain::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:.15;border-radius:inherit;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E")}

/* glass */
.glass{background:rgba(255,255,255,.05);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  border:1px solid var(--brd)}

/* entry animation */
@keyframes fiu{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:none}}
.fiu{animation:fiu .8s var(--ease) both}
.fiu-1{animation-delay:.06s}.fiu-2{animation-delay:.14s}.fiu-3{animation-delay:.22s}.fiu-4{animation-delay:.3s}

/* ---- floating glass navbar ---- */
.top{position:fixed;top:18px;left:50%;transform:translateX(-50%);width:min(1560px,calc(100% - 36px));
  z-index:60;display:flex;align-items:center;justify-content:space-between;
  background:rgba(255,255,255,.06);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
  border:1px solid var(--brd);border-radius:999px;padding:6px 6px 6px 22px}
.top__mark{color:#fff;font-size:14px;font-weight:600;letter-spacing:.24em}
.top__r{display:flex;align-items:center;gap:2px}
.top__home,.top__auth{color:rgba(255,255,255,.8);font-size:13px;font-weight:400;border:0;background:none;
  padding:9px 15px;border-radius:999px;transition:background .3s var(--ease),color .3s}
.top__home:hover,.top__auth:hover{background:rgba(255,255,255,.10);color:#fff}
.top__auth{background:#fff;color:var(--zinc);font-weight:500;padding:9px 18px}
.top__auth:hover{background:rgba(255,255,255,.85);color:var(--zinc)}
body.lightnav .top{background:rgba(255,255,255,.7);border-color:var(--line)}
body.lightnav .top__mark,body.lightnav .top__home{color:var(--zinc)}
body.lightnav .top__home:hover{background:rgba(0,0,0,.06)}

/* ---- hero stage ---- */
.stage2{position:relative;height:92vh;min-height:620px;margin:0 18px;border-radius:var(--r-lg);
  overflow:hidden;background:var(--black);display:flex;align-items:flex-end}
.stage2__bg{position:absolute;inset:0;opacity:.6;
  background:radial-gradient(70% 60% at 20% 10%,#1b2a4a,transparent 60%),
             radial-gradient(60% 55% at 85% 25%,#123a30,transparent 62%),
             radial-gradient(80% 70% at 50% 100%,#0a0a0a,#000 70%)}
.stage2__ov{position:absolute;inset:0;background:linear-gradient(180deg,rgba(9,9,11,.4),rgba(9,9,11,.9))}
.stage2__word{position:absolute;left:50%;top:44%;transform:translate(-50%,-50%);font-size:22vw;
  font-weight:700;letter-spacing:-.06em;color:#fff;opacity:.03;filter:blur(3px);pointer-events:none;
  white-space:nowrap;line-height:1}
.stage2__in{position:relative;z-index:3;width:100%;display:grid;grid-template-columns:1.4fr .6fr;
  gap:40px;align-items:end;padding:clamp(28px,4vw,64px)}
.stage2 .eyebrow{color:var(--emerald)}
.stage2 h1{font-size:clamp(40px,6.4vw,88px);color:#fff;margin:16px 0 20px;max-width:15ch}
.stage2 p.sub{color:rgba(255,255,255,.65);font-size:clamp(15px,1.5vw,17px);max-width:56ch;line-height:1.6}
.gstats{display:flex;flex-direction:column;gap:12px}
.gstat{background:rgba(255,255,255,.05);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  border:1px solid var(--brd);border-radius:var(--r-sm);padding:1.25rem;position:relative}
.gstat b{display:block;font-size:30px;font-weight:600;letter-spacing:-.04em;color:#fff}
.gstat span{display:block;font-size:13px;color:rgba(255,255,255,.6);margin-top:4px;font-weight:300}
@media(max-width:900px){.stage2__in{grid-template-columns:1fr}.gstats{flex-direction:row;flex-wrap:wrap}
  .gstat{flex:1;min-width:130px}}

/* ---- interactive action button ---- */
.act{display:inline-flex;align-items:center;gap:14px;background:#fff;color:var(--zinc);
  border:0;border-radius:999px;padding:.5rem .5rem .5rem 1.5rem;font:inherit;font-size:15px;
  font-weight:500;cursor:pointer;transition:transform .3s var(--ease)}
.act:hover{transform:scale(1.05)}
.act i{display:grid;place-items:center;width:40px;height:40px;border-radius:999px;background:var(--zinc);
  color:#fff;font-style:normal;transition:background .3s var(--ease)}
.act:hover i{background:#3F3F46}
.act--dark{background:var(--zinc);color:#fff}.act--dark i{background:#fff;color:var(--zinc)}

/* ---- light content sections ---- */
.sect{max-width:1600px;margin:0 auto;padding:clamp(56px,7vw,120px) clamp(20px,3.4vw,52px)}
.sect h2{font-size:clamp(30px,4vw,54px)}
.duo{display:grid;grid-template-columns:1fr 1.15fr;gap:clamp(28px,4vw,72px);align-items:start}
.duo__l{position:sticky;top:110px}
.iconrow{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:34px}
.iconrow div{display:flex;align-items:center;gap:11px;font-size:14px;color:var(--zinc5)}
.iconrow b{display:grid;place-items:center;width:34px;height:34px;border-radius:10px;
  background:var(--zinc1);color:var(--zinc);font-size:12px;font-weight:700;flex:none}
.display{position:relative;border-radius:var(--r-md);overflow:hidden;background:var(--zinc);
  min-height:440px;padding:26px}
.display__panel{position:absolute;right:26px;bottom:26px;left:26px;
  background:rgba(255,255,255,.05);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  border:1px solid var(--brd);border-radius:var(--r-sm);padding:20px}
.pbar{height:6px;border-radius:99px;background:rgba(255,255,255,.12);overflow:hidden;margin:8px 0 14px}
.pbar i{display:block;height:100%;background:var(--emerald)}
.display__panel h4{color:#fff;font-size:13px;font-weight:600;margin-bottom:12px}
.display__panel small{display:flex;justify-content:space-between;color:rgba(255,255,255,.6);font-size:12px}
@media(max-width:900px){.duo{grid-template-columns:1fr}.duo__l{position:static}}

/* ---- dark step block ---- */
.dark{background:var(--zinc);border-radius:var(--r-lg);margin:0 18px;position:relative;overflow:hidden;
  padding:clamp(40px,5vw,80px)}
.dark::before{content:"";position:absolute;inset:0;opacity:.06;pointer-events:none;
  background-image:linear-gradient(var(--brd) 1px,transparent 1px),linear-gradient(90deg,var(--brd) 1px,transparent 1px);
  background-size:56px 56px}
.dark h2{color:#fff;position:relative}
.stepgrid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,3vw,56px);align-items:center;
  position:relative;margin-top:34px}
.stepbox{background:rgba(255,255,255,.05);backdrop-filter:blur(12px);border:1px solid var(--brd);
  border-radius:var(--r-md);padding:22px 24px;margin-bottom:14px}
.stepbox b{display:block;color:var(--emerald);font-size:10px;font-weight:700;letter-spacing:.2em}
.stepbox h3{color:#fff;font-size:19px;margin:8px 0 7px}
.stepbox p{color:rgba(255,255,255,.6);font-size:14px;line-height:1.65}
.mockup{transform:rotate(3deg);border-radius:var(--r-md);overflow:hidden;border:1px solid var(--brd);
  background:rgba(255,255,255,.04);backdrop-filter:blur(12px);padding:18px;position:relative}
.mockup__bar{display:flex;gap:6px;margin-bottom:14px}
.mockup__bar i{width:9px;height:9px;border-radius:99px;background:rgba(255,255,255,.2)}
.snippet{background:rgba(255,255,255,.05);border:1px solid var(--brd);border-radius:10px;padding:12px 14px;
  font-size:12.5px;color:rgba(255,255,255,.72);margin-bottom:9px;font-weight:300}
.snippet em{font-style:normal;color:var(--emerald)}
@keyframes bnc{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}
.tag{position:absolute;right:-10px;bottom:-14px;background:var(--emerald);color:#062;font-size:11px;
  font-weight:700;letter-spacing:.1em;text-transform:uppercase;padding:9px 15px;border-radius:999px;
  animation:bnc 2.4s ease-in-out infinite}
@media(max-width:900px){.stepgrid{grid-template-columns:1fr}.mockup{transform:none}}

/* ---- bento cards ---- */
.bento{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:36px}
.bcard{background:#fff;border:1px solid var(--zinc1);border-radius:2rem;overflow:hidden;
  transition:transform .3s var(--ease),box-shadow .3s}
.bcard:hover{transform:translateY(-4px);box-shadow:0 20px 48px rgba(0,0,0,.09)}
.bcard__top{height:164px;position:relative;background:var(--zinc)}
.bcard__top::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent,#000)}
.bcard__top b{position:absolute;left:22px;bottom:18px;z-index:2;color:#fff;font-size:20px;font-weight:600}
.bcard__b{padding:1.5rem}
.bcard__b p{font-size:14px;color:var(--zinc5);line-height:1.65;margin-bottom:18px}
.bcard__b .act{width:100%;justify-content:space-between}
@media(max-width:1000px){.bento{grid-template-columns:1fr}}

/* ==================================================================
 * No underlines anywhere; menu items bold.
 * Covers both real underlines and the border-bottom "underline" idiom.
 * ================================================================== */
a,a:hover,a:visited,a:focus,button,summary{text-decoration:none !important}
u{text-decoration:none}

/* menu / navigation weight */
.top__mark{font-weight:700;letter-spacing:.24em}
.top__home,.top__auth,.nav__links a,.strip a,.citychip,.megacat span{font-weight:600}
.top__home,.top__auth{letter-spacing:-.005em}

/* strip the faux-underline borders used as link affordances */
.land__alt a,.prose a,.qc__go a,.mp__go a,.ref span,.more a,.pdp-note a,.pdp__note a,
.foot a,.ft__cols a,.crumb a,.faq .fa a,.tiernote a{border-bottom:0 !important;padding-bottom:0}

/* keep those links legible without a rule under them */
.land__alt a,.prose a,.more a,.crumb a{color:var(--emerald);font-weight:600}
.land__alt a:hover,.prose a:hover,.more a:hover,.crumb a:hover{opacity:.75}
.qc__go a,.mp__go a{color:var(--emerald);font-weight:600}

/* buttons that used a bottom rule as their affordance get a real shape instead */
.ibtn,.btn{border-bottom-width:1px}
.linkbtn{text-decoration:none !important;font-weight:600;color:var(--emerald)}
.linkbtn:hover{opacity:.75}

/* structural borders that are NOT decoration stay: table rules, accordion
   dividers, section separators — those are layout, not link styling. */

/* ==================================================================
 * Light-page navigation + clearance for the fixed floating navbar.
 * ================================================================== */
body.lightnav .top{
  background:rgba(255,255,255,.72);
  backdrop-filter:blur(20px) saturate(150%);-webkit-backdrop-filter:blur(20px) saturate(150%);
  border:1px solid var(--line);
  box-shadow:0 8px 30px rgba(0,0,0,.06)}
body.lightnav .top__mark{color:var(--zinc)}
body.lightnav .top__home{color:#3F3F46}
body.lightnav .top__home:hover{background:rgba(0,0,0,.06);color:var(--zinc)}
body.lightnav .top__auth{background:var(--zinc);color:#fff}
body.lightnav .top__auth:hover{background:#3F3F46;color:#fff}

/* the navbar is fixed, so every page that does not open on the dark hero needs
   clearance — without this the first heading sits underneath it */
body.lightnav .phead,body.lightnav .shero{padding-top:clamp(112px,11vw,150px)}

/* consistent horizontal rhythm: one container width and one gutter everywhere */
.phead,.band,.sect,.shero__in,.stage2__in,.top{max-width:1600px;margin-left:auto;margin-right:auto}
.phead,.band,.shero{padding-left:clamp(20px,3.4vw,52px);padding-right:clamp(20px,3.4vw,52px)}
.dark,.stage2{margin-left:clamp(12px,1.4vw,18px);margin-right:clamp(12px,1.4vw,18px)}

/* ==================================================================
 * CRED-grade dark system — #ccff00 accent, Space Grotesk + JetBrains
 * Mono, 16px+ glass blur, grid + noise on every dark surface,
 * 2rem+ radii for the hardware feel.
 * ================================================================== */
:root{
  --acid:#CCFF00; --accent:#CCFF00; --emerald:#CCFF00;
  --bg:#050505; --surf:#0C0C0E; --paper:#050505; --card:rgba(255,255,255,.05);
  --ink:#FAFAFA; --soft:#8E8E93; --faint:#6A6A70; --zinc5:#8E8E93;
  --line:rgba(255,255,255,.10); --brd:rgba(255,255,255,.10); --zinc:#0C0C0E; --zinc1:rgba(255,255,255,.06);
  --light:#050505; --accent-soft:rgba(204,255,0,.10);
  --sans:"Space Grotesk",sans-serif; --mono:"JetBrains Mono",monospace;
  --r-lg:2.5rem; --r-md:2rem; --r-sm:2rem;
}
body{background:var(--bg);color:var(--ink);font-family:var(--sans);font-weight:400;letter-spacing:-.01em}
h1,h2,h3,.stage2 h1,.phead h1,.band__head h2{font-family:var(--sans);font-weight:600;letter-spacing:-.045em}
.eyebrow,.kicker,.dcard__s,.mp__m,.rep__ey,.up__ey,.statstrip span,.covc span,.gstat span,
.mp__src,.mp__go,.qc__n,.qc__go,.crumb,.flow__step,.bcard__b .act,.tag,.snippet,.phz th,
.specs b,.pdp-row dt,.ref span,.chip,.citychip i,.g__label,.g__note{
  font-family:var(--mono);font-weight:500;letter-spacing:.08em;text-transform:uppercase}
.snippet,.phz td,.gstat b,.statstrip b,.covc b{font-family:var(--mono)}
.lead,.prose,.qc p,.mp p,.sub{color:var(--soft);font-weight:400;letter-spacing:-.005em}

/* every dark page gets grid + noise so it never reads flat */
body::before{content:"";position:fixed;inset:0;z-index:-2;pointer-events:none;
  background-image:linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px);
  background-size:64px 64px;
  mask-image:radial-gradient(90% 70% at 50% 0%,#000 30%,transparent 78%);
  -webkit-mask-image:radial-gradient(90% 70% at 50% 0%,#000 30%,transparent 78%)}
body::after{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:.16;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='4'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E")}

/* glass — 16px minimum blur everywhere */
.top,.qc,.mp,.dcard,.covc,.pro,.ref,.rc,.gauge,.opt,.tile,.modal__box,.citychip,.tiernote,
.warn,.empty,.field,.chip,.sbar,.otp input,.gstat,.stepbox,.mockup,.display__panel,.bcard,
.statstrip div,.mfilters select,.mfilters input,.brow select,.brow input{
  background:rgba(255,255,255,.05);
  backdrop-filter:blur(18px) saturate(150%);-webkit-backdrop-filter:blur(18px) saturate(150%);
  border:1px solid var(--brd);color:var(--ink)}
.qc,.mp,.dcard,.rc,.pro,.covc,.gauge,.empty,.bcard,.stepbox,.modal__box{border-radius:var(--r-md)}
.ref,.chip,.citychip,.field,.otp input,.sbar,.mfilters select,.mfilters input{border-radius:999px}
.sbar{border-radius:2rem}
.qc:hover,.mp--link:hover,.dcard:hover,.tile:hover,.citychip:hover,a.ref:hover,.bcard:hover{
  border-color:rgba(204,255,0,.45);background:rgba(255,255,255,.07)}

/* acid accent */
.btn--solid,.act,.sbar__go,.chip.on{background:var(--acid);color:#0A0A00;border-color:var(--acid)}
.btn--solid:hover,.chip.on:hover{background:#DBFF3D;color:#0A0A00}
.act i{background:#0A0A00;color:var(--acid)} .act:hover i{background:#1a1a05}
.act--dark{background:rgba(255,255,255,.06);color:var(--ink);border:1px solid var(--brd)}
.act--dark i{background:var(--acid);color:#0A0A00}
.btn--line,.btn--ghost{color:var(--ink);border-color:var(--brd);background:transparent}
.btn--line:hover,.btn--ghost:hover{background:var(--acid);color:#0A0A00;border-color:var(--acid)}
.eyebrow,.kicker,.dcard__s,.qc__n,.qc__go,.mp__go,.rep__ey,.up__ey,.vf,.crumb a,
.prose a,.more a,.land__alt a,.linkbtn,.stepbox b,.display__panel .pbar i,.road li.now i{color:var(--acid)}
.vf{border-color:var(--acid)}
.pbar i,.covbar i,.flow__prog i,.road li.now:before,.steps li:before{background:var(--acid);color:#0A0A00}
.tag{background:var(--acid);color:#0A0A00}
.stage2,.dark,.display,.bcard__top{background:var(--surf)}
.stage2__bg{background:radial-gradient(70% 60% at 18% 8%,rgba(204,255,0,.10),transparent 62%),
  radial-gradient(60% 55% at 86% 22%,rgba(120,86,255,.14),transparent 62%),
  radial-gradient(90% 80% at 50% 100%,#0A0A0C,#050505 72%)}
.stage2__word{color:var(--acid);opacity:.05}
.top{background:rgba(10,10,12,.6)}
body.lightnav .top{background:rgba(10,10,12,.6);border-color:var(--brd)}
body.lightnav .top__mark,body.lightnav .top__home{color:rgba(255,255,255,.82)}
body.lightnav .top__home:hover{background:rgba(255,255,255,.1);color:#fff}
body.lightnav .top__auth{background:var(--acid);color:#0A0A00}
body.lightnav .top__auth:hover{background:#DBFF3D;color:#0A0A00}
.foot,.shero,.shero--alt{background:transparent;border-color:var(--brd)}
.foot p,.ft__tag,.mcount,.side__note,.rc__note{color:var(--faint)}
.faq details,.phz td,.phz th,.specs>div,.pdp-row{border-color:var(--brd)}
.faq summary{color:var(--ink)} .faq summary:hover{color:var(--acid)}
.faq summary::after{color:var(--acid)}
.bcard__b p,.iconrow div{color:var(--soft)}
.iconrow b{background:rgba(255,255,255,.06);color:var(--acid);font-family:var(--mono)}
::selection{background:var(--acid);color:#0A0A00}

/* ---- coverflow carousel ---- */
.cf{position:relative;width:100%;--cf-card:clamp(190px,26vw,340px)}
.cf__frame{overflow:hidden;padding:44px 0;outline:none;cursor:grab;touch-action:pan-y}
.cf__frame.grabbing{cursor:grabbing}
.cf__track{position:relative;height:var(--cf-card);transform-style:preserve-3d;user-select:none}
.cf__card{position:absolute;left:50%;top:0;width:var(--cf-card);aspect-ratio:1;overflow:hidden;
  border-radius:2rem;background:rgba(255,255,255,.05);border:1px solid var(--brd);
  box-shadow:0 30px 60px rgba(0,0,0,.55);will-change:transform;display:block}
.cf__card img{width:100%;height:100%;object-fit:cover;user-select:none;display:block}
.cf__nav{position:absolute;top:50%;transform:translateY(-50%);z-index:200;width:44px;height:44px;
  border-radius:999px;border:1px solid var(--brd);background:rgba(10,10,12,.6);
  backdrop-filter:blur(18px);color:var(--ink);font-size:20px;cursor:pointer;line-height:1}
.cf__nav:hover{background:var(--acid);color:#0A0A00;border-color:var(--acid)}
.cf__prev{left:12px}.cf__next{right:12px}
.cf__cap{text-align:center;margin-top:6px;min-height:46px}
.cf__t{font-size:16px;font-weight:600;letter-spacing:-.02em}
.cf__s{font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--faint);margin-top:5px}
.cf__dots{display:flex;justify-content:center;gap:8px;margin-top:18px}
.cf__dot{width:8px;height:8px;border-radius:999px;border:0;background:var(--ink);opacity:.28;cursor:pointer;padding:0}
.cf__dot.on{opacity:1;background:var(--acid)}

/* ---- editorial blog ---- */
.artgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.art{display:block;border-radius:2rem;overflow:hidden;background:rgba(255,255,255,.05);
  border:1px solid var(--brd);backdrop-filter:blur(18px);transition:.3s var(--ease)}
.art:hover{transform:translateY(-4px);border-color:rgba(204,255,0,.45)}
.art__i{aspect-ratio:16/10;overflow:hidden;background:#111}
.art__i img{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease)}
.art:hover .art__i img{transform:scale(1.05)}
.art__b{padding:22px 24px 26px}
.art__k{font-family:var(--mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--acid)}
.art__b h3{font-size:19px;margin:10px 0 9px;letter-spacing:-.03em;line-height:1.25}
.art__b p{font-size:14px;color:var(--soft);line-height:1.6}
/* display:block is load-bearing: .art__m is a <span>, and margin-top on an
   inline box is ignored, so the 14px meant to separate the meta line from the
   excerpt above it was never applied. */
.art__m{font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--faint);display:block;margin-top:14px}
.lead-art{display:grid;grid-template-columns:1.25fr 1fr;gap:26px;align-items:center;
  border-radius:2.5rem;overflow:hidden;border:1px solid var(--brd);background:rgba(255,255,255,.05);
  backdrop-filter:blur(18px)}
.lead-art .art__i{aspect-ratio:4/3;height:100%}
.lead-art .art__b{padding:clamp(24px,3vw,44px)}
.lead-art h2{font-size:clamp(24px,3vw,38px);letter-spacing:-.04em;margin:12px 0 14px}
@media(max-width:1000px){.artgrid{grid-template-columns:1fr 1fr}.lead-art{grid-template-columns:1fr}}
@media(max-width:640px){.artgrid{grid-template-columns:1fr}}

/* ---- article page ---- */
.post{max-width:820px;margin:0 auto;padding:clamp(112px,11vw,150px) clamp(20px,3.4vw,52px) clamp(30px,4vw,56px)}
.post h1{font-size:clamp(30px,4.6vw,58px);letter-spacing:-.045em;margin:14px 0 16px;line-height:1.06}
.post__lead{font-size:clamp(16px,1.8vw,20px);color:var(--soft);line-height:1.6;margin-bottom:32px}
.post__hero{margin:0 0 36px;border-radius:2rem;overflow:hidden;border:1px solid var(--brd)}
.post__hero img{width:100%;display:block;aspect-ratio:16/9;object-fit:cover}
.post__body p{font-size:17px;line-height:1.8;color:var(--soft);margin-bottom:22px}
.pull{margin:34px 0;padding:24px 28px;border:0;border-left:2px solid var(--acid);
  font-size:clamp(19px,2.2vw,25px);line-height:1.4;letter-spacing:-.03em;color:var(--ink);font-weight:500}
.post__cta{margin-top:34px}

/* ---- search-first empty state ---- */
.prompt{grid-column:1/-1;border:1px dashed var(--brd);border-radius:2rem;padding:56px 30px;
  text-align:center;background:rgba(255,255,255,.03);backdrop-filter:blur(18px)}
.prompt b{display:block;font-size:20px;font-weight:600;letter-spacing:-.03em;margin-bottom:10px}
.prompt p{font-size:14.5px;color:var(--soft);max-width:52ch;margin:0 auto 4px;line-height:1.7}
.prompt .k{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--acid);display:block;margin-bottom:14px}

/* ---- access gate ---- */
body.gated-locked{overflow:hidden}
body.gated-locked .top{filter:blur(2px);pointer-events:none}
body.gated-locked > section,body.gated-locked > footer,body.gated-locked > main{
  filter:blur(14px) saturate(.6);pointer-events:none;user-select:none}
.gatewrap{position:fixed;inset:0;z-index:300;display:grid;place-items:center;padding:20px;
  background:rgba(5,5,5,.82);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);overflow:auto}
.gatebox{width:100%;max-width:430px;background:rgba(255,255,255,.05);border:1px solid var(--brd);
  border-radius:2rem;backdrop-filter:blur(18px);padding:34px 30px 26px;
  box-shadow:0 30px 80px rgba(0,0,0,.6)}
.gatebox .k{font-family:var(--mono);font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--acid)}
.gatebox h2{font-size:24px;margin:10px 0 8px;letter-spacing:-.035em}
.gsub{font-size:14px;color:var(--soft);margin-bottom:22px;line-height:1.6}
.gnote{font-size:11px;color:var(--faint);text-align:center;margin-top:16px;line-height:1.5}
.gf{display:block;margin-bottom:14px}
.gf span{display:block;font-family:var(--mono);font-size:10px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--faint);margin-bottom:7px}
.gf .field{width:100%;border-radius:1rem;font-size:15px;padding:13px 15px}
.gatebox .field.bad{border-color:#FF6B4A}
.onform{max-width:640px}
.onform .gf{margin-bottom:16px}
.onform .field{width:100%;border-radius:1rem;font-size:15px;padding:13px 15px}
.onform textarea.field{border-radius:1.25rem;resize:vertical;font-family:inherit}
.gf em{font-family:var(--mono);font-size:9px;letter-spacing:.14em;color:var(--acid);font-style:normal;margin-left:8px}
.gf em.opt{color:var(--faint)}
.fhelp{display:block;font-style:normal;font-size:12px;color:var(--faint);margin-top:6px}
.field.bad{border-color:#FF6B4A}

/* ==================================================================
 * Typography — Geist only (Thin 100, Light 300, Regular 400, Medium 500),
 * with a serif reserved for editorial accents.
 * ================================================================== */
:root{
  --sans:"Geist",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
  --mono:"Geist",-apple-system,BlinkMacSystemFont,Helvetica,Arial,sans-serif;
  --serif:"Instrument Serif",Georgia,"Times New Roman",serif;
}
body{font-family:var(--sans);font-weight:300;letter-spacing:-.005em}

/* display — Thin at large sizes, Light below, never heavier than Medium */
h1,.stage2 h1,.phead h1,.post h1{font-family:var(--sans);font-weight:100;letter-spacing:-.035em}
h2,.band__head h2,.sect h2{font-family:var(--sans);font-weight:100;letter-spacing:-.03em}
h3,.qc h3,.art__b h3,.mp__h b,.dcard b,.gatebox h2,.stepbox h3{font-weight:400;letter-spacing:-.02em}
.gstat b,.statstrip b,.bqtotal b,.rc__big,.pdp-price,.covc b,.g__val{font-weight:100;letter-spacing:-.03em}
strong,b,.btn,.act,.top__auth{font-weight:500}

/* labels: Geist Medium, tracked out — replaces the mono role */
.eyebrow,.kicker,.dcard__s,.mp__m,.rep__ey,.up__ey,.statstrip span,.covc span,.gstat span,
.mp__src,.mp__go,.qc__n,.qc__go,.crumb,.flow__step,.tag,.phz th,.specs b,.pdp-row dt,
.ref span,.chip,.citychip i,.g__label,.g__note,.art__k,.art__m,.cf__s,.gatebox .k,.gf span,
.gf em,.prompt .k,.bcard__b .act,.top__home,.top__mark{
  font-family:var(--sans);font-weight:500;letter-spacing:.16em;text-transform:uppercase}
.top__home{letter-spacing:.02em;text-transform:none;font-weight:400}
.top__mark{letter-spacing:.26em;font-weight:500}
.snippet,.phz td,.otp input,.field{font-family:var(--sans);font-weight:300;letter-spacing:0}

/* serif, used sparingly: the oversized hero word, pull quotes, article leads */
.stage2__word{font-family:var(--serif);font-weight:400;letter-spacing:-.02em}
.pull{font-family:var(--serif);font-weight:400;font-style:italic;letter-spacing:-.01em;line-height:1.35}
.post__lead,.lead-art h2{font-family:var(--serif);font-weight:400;letter-spacing:-.01em}
.post__lead{font-style:italic}
.cf__t{font-family:var(--serif);font-weight:400;letter-spacing:-.01em;font-size:18px}

body,p,.lead,.prose,.sub,.post__body p,.art__b p,.mp p,.qc p{font-weight:300}

/* ============ cities mega-menu ============ */
.top__cities{position:relative}
.top__cities:after{content:"";display:inline-block;width:5px;height:5px;margin-left:7px;
  border-right:1px solid currentColor;border-bottom:1px solid currentColor;
  transform:translateY(-2px) rotate(45deg);transition:transform .3s var(--ease);opacity:.6}
.top__cities.is-open:after{transform:translateY(0) rotate(-135deg);opacity:1}
.top__cities.is-open{background:rgba(255,255,255,.10);color:#fff}
body.lightnav .top__cities.is-open{background:rgba(0,0,0,.06);color:var(--ink)}

.mega{position:fixed;top:76px;left:50%;transform:translateX(-50%) translateY(-8px);
  width:min(1560px,calc(100% - 36px));z-index:59;
  background:rgba(12,12,14,.86);backdrop-filter:blur(22px);-webkit-backdrop-filter:blur(22px);
  border:1px solid var(--brd);border-radius:2rem;padding:30px 34px 22px;
  box-shadow:0 30px 80px rgba(0,0,0,.55);
  opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity .26s var(--ease),transform .26s var(--ease),visibility .26s}
.mega.is-open{opacity:1;visibility:visible;pointer-events:auto;transform:translateX(-50%) translateY(0)}
.mega__in{display:grid;grid-template-columns:repeat(9,minmax(0,1fr));gap:4px 18px;
  grid-auto-flow:column;grid-template-rows:repeat(11,auto);
  max-height:min(58vh,540px);overflow-y:auto;padding-bottom:6px}
.mega__c{display:block;font-size:13px;font-weight:300;line-height:1.45;padding:6px 8px;
  border-radius:10px;color:rgba(255,255,255,.72);text-decoration:none;white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis;transition:background .2s,color .2s}
.mega__c:hover{background:rgba(255,255,255,.08);color:var(--acid)}
.mega__c.is-t1{color:#fff;font-weight:400}
.mega__foot{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;
  margin-top:18px;padding-top:16px;border-top:1px solid var(--brd)}
.mega__note{font-size:12.5px;color:var(--faint);margin:0}
.mega__all{font-size:13px;color:var(--acid);text-decoration:none;white-space:nowrap}
.mega__all i{font-style:normal;transition:transform .3s var(--ease);display:inline-block}
.mega__all:hover i{transform:translateX(4px)}

body.lightnav .mega{background:rgba(255,255,255,.94);border-color:var(--line);
  box-shadow:0 30px 80px rgba(0,0,0,.14)}
body.lightnav .mega__c{color:var(--soft)}
body.lightnav .mega__c:hover{background:rgba(0,0,0,.05);color:var(--ink)}
body.lightnav .mega__c.is-t1{color:var(--ink)}
body.lightnav .mega__all{color:var(--ink)}

@media(max-width:1200px){.mega__in{grid-template-columns:repeat(6,minmax(0,1fr));
  grid-template-rows:repeat(16,auto)}}
@media(max-width:860px){.mega{top:70px;padding:22px 20px 16px;border-radius:1.5rem}
  .mega__in{grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:repeat(32,auto);
    max-height:min(64vh,480px)}}
@media(max-width:560px){.mega{display:none}}

/* ==================================================================
 * THEME — warm light ground, ink text, terracotta accent.
 *
 * Replaces the acid-on-black CRED palette. The reasoning, in short:
 * #CCFF00 measures 1.18:1 on white, so it could never leave dark mode;
 * a near-black ground misrepresents the materials and finishes that are
 * this site's actual content; and --faint sat at 3.79:1 on exactly the
 * cost caveats that carry financial consequence.
 *
 * Near-black survives as PUNCTUATION — the hero, .dark blocks, report
 * panels. Those re-scope the tokens below rather than restating rules,
 * so every descendant inverts automatically.
 *
 * To revert: delete everything below this banner (build/styles.dark.bak.css
 * is the pre-change file).
 * ================================================================== */
:root{
  --paper:#FBFAF7; --bg:#FBFAF7; --light:#FBFAF7;
  --surf:#F4F1EB; --card:#FFFFFF; --zinc:#14140F; --zinc1:#F4F1EB;
  --ink:#14140F; --soft:#55534C; --faint:#767469; --zinc5:#55534C;
  --line:#E6E1D7; --brd:#E6E1D7;
  --accent:#A8452A; --acid:#A8452A; --emerald:#A8452A;
  --accent-soft:rgba(168,69,42,.09);
  --on-accent:#FFFFFF;              /* text that sits on a filled accent */
  --deep:#14140F;                   /* the dark punctuation ground */
  --glass:#FFFFFF; --glass-brd:var(--line); --glass-ink:var(--ink);
  --shadow-1:0 1px 2px rgba(20,20,15,.04),0 8px 24px rgba(20,20,15,.06);
  --shadow-2:0 20px 60px rgba(20,20,15,.12);
}
body{background:var(--paper);color:var(--ink)}

/* texture, dialled down for a light ground */
body::before{background-image:linear-gradient(rgba(20,20,15,.045) 1px,transparent 1px),
                              linear-gradient(90deg,rgba(20,20,15,.045) 1px,transparent 1px)}
body::after{opacity:.05}

/* ---- surfaces ---- */
.top,.qc,.mp,.dcard,.covc,.pro,.ref,.rc,.gauge,.opt,.tile,.modal__box,.citychip,.tiernote,
.warn,.empty,.field,.chip,.sbar,.otp input,.gstat,.stepbox,.mockup,.display__panel,.bcard,
.statstrip div,.mfilters select,.mfilters input,.brow select,.brow input{
  background:var(--glass);border-color:var(--glass-brd);color:var(--glass-ink);
  backdrop-filter:none;-webkit-backdrop-filter:none}
.qc,.mp,.dcard,.rc,.pro,.covc,.gauge,.bcard,.stepbox,.tile,.mockup{box-shadow:var(--shadow-1)}
.modal__box,.gatebox{box-shadow:var(--shadow-2)}
.qc:hover,.mp--link:hover,.dcard:hover,.tile:hover,.citychip:hover,a.ref:hover,.bcard:hover,.art:hover{
  border-color:var(--accent);background:var(--card);box-shadow:var(--shadow-2)}
.empty,.prompt{background:var(--surf);border-color:var(--line)}
.art,.lead-art,.cf__card{background:var(--card);border-color:var(--line);
  backdrop-filter:none;-webkit-backdrop-filter:none}
.art,.lead-art{box-shadow:var(--shadow-1)}
.cf__card{box-shadow:var(--shadow-2)}
.art__i{background:var(--surf)}

/* ---- nav ---- */
.top{background:rgba(251,250,247,.82);backdrop-filter:blur(18px) saturate(140%);
  -webkit-backdrop-filter:blur(18px) saturate(140%);border-color:var(--line);box-shadow:var(--shadow-1)}
.top__mark,body.lightnav .top__mark{color:var(--ink)}
.top__home,body.lightnav .top__home{color:var(--soft)}
.top__home:hover,body.lightnav .top__home:hover{background:rgba(20,20,15,.05);color:var(--ink)}
.top__auth,body.lightnav .top__auth{background:var(--accent);color:var(--on-accent)}
.top__auth:hover,body.lightnav .top__auth:hover{background:#93381F;color:var(--on-accent)}
body.lightnav .top{background:rgba(251,250,247,.82)}
.top__cities.is-open,body.lightnav .top__cities.is-open{background:rgba(20,20,15,.06);color:var(--ink)}

/* ---- mega-menu on light ---- */
.mega,body.lightnav .mega{background:rgba(255,255,255,.97);border-color:var(--line);
  box-shadow:var(--shadow-2)}
.mega__c,body.lightnav .mega__c{color:var(--soft)}
.mega__c:hover,body.lightnav .mega__c:hover{background:var(--surf);color:var(--accent)}
.mega__c.is-t1,body.lightnav .mega__c.is-t1{color:var(--ink);font-weight:400}
.mega__all,body.lightnav .mega__all{color:var(--accent)}

/* ---- accent ---- */
.btn--solid,.act,.sbar__go,.chip.on,.tag{background:var(--accent);color:var(--on-accent);
  border-color:var(--accent)}
.btn--solid:hover,.chip.on:hover,.sbar__go:hover{background:#93381F;color:var(--on-accent)}
.act i{background:var(--on-accent);color:var(--accent)}
.act:hover i{background:var(--on-accent);color:#93381F}
.act--dark{background:var(--ink);color:#FBFAF7;border-color:var(--ink)}
.act--dark i{background:var(--accent);color:var(--on-accent)}
.btn--line,.btn--ghost{color:var(--ink);border-color:var(--line);background:transparent}
.btn--line:hover,.btn--ghost:hover{background:var(--accent);color:var(--on-accent);border-color:var(--accent)}
.pbar i,.covbar i,.flow__prog i,.road li.now:before,.steps li:before{
  background:var(--accent);color:var(--on-accent)}
.iconrow b{background:var(--accent-soft);color:var(--accent)}
.faq summary:hover,.faq summary::after{color:var(--accent)}
.pull{border-left-color:var(--accent);color:var(--ink)}
.cf__dot{background:var(--ink)}
.cf__dot.on{background:var(--accent);opacity:1}
.cf__nav{background:var(--card);border-color:var(--line);color:var(--ink);
  backdrop-filter:none;-webkit-backdrop-filter:none;box-shadow:var(--shadow-1)}
.cf__nav:hover{background:var(--accent);color:var(--on-accent);border-color:var(--accent)}
::selection{background:var(--accent);color:var(--on-accent)}

/* ---- dark punctuation: re-scope the tokens, don't restate the rules ---- */
.stage2,.dark,.display,.bcard__top,.rep--dark{
  --ink:#FDFBF8; --soft:rgba(255,255,255,.74); --faint:rgba(255,255,255,.56);
  --line:rgba(255,255,255,.14); --brd:rgba(255,255,255,.14);
  --accent:#E08A63; --acid:#E08A63; --accent-soft:rgba(224,138,99,.14);
  --on-accent:#14140F; --card:rgba(255,255,255,.06);
  --glass:rgba(255,255,255,.06); --glass-brd:rgba(255,255,255,.16); --glass-ink:#FDFBF8;
  --surf:rgba(255,255,255,.06);
  --shadow-1:0 8px 30px rgba(0,0,0,.35); --shadow-2:0 24px 70px rgba(0,0,0,.5);
  background:var(--deep);color:var(--ink)}
.stage2 .glass,.dark .qc,.dark .gstat,.stage2 .gstat,.stage2 .statstrip div,.display .display__panel{
  backdrop-filter:blur(18px) saturate(150%);-webkit-backdrop-filter:blur(18px) saturate(150%)}
.stage2__bg{background:radial-gradient(70% 60% at 18% 8%,rgba(224,138,99,.16),transparent 62%),
  radial-gradient(60% 55% at 86% 22%,rgba(168,69,42,.14),transparent 62%),
  radial-gradient(90% 80% at 50% 100%,#1C1B15,#14140F 72%)}
.stage2__word{color:var(--accent);opacity:.07}
.stage2 .btn--solid,.dark .btn--solid,.stage2 .act,.dark .act{
  background:var(--accent);color:var(--on-accent);border-color:var(--accent)}
.stage2 .act i,.dark .act i{background:var(--on-accent);color:var(--accent)}

/* ---- borders and quiet text ---- */
.faq details,.phz td,.phz th,.specs>div,.pdp-row,.foot,.shero,.shero--alt{border-color:var(--line)}
.foot p,.ft__tag,.mcount,.side__note,.rc__note{color:var(--faint)}
.faq summary{color:var(--ink)}
.prompt{border-color:var(--line);backdrop-filter:none;-webkit-backdrop-filter:none}
.gatewrap{background:rgba(251,250,247,.86);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
.gatebox{background:var(--card);border-color:var(--line);backdrop-filter:none;-webkit-backdrop-filter:none}
.gatebox .k,.gf em,.prompt .k,.art__k{color:var(--accent)}
.gf em.opt{color:var(--faint)}
.field.bad,.gatebox .field.bad{border-color:#C0392B}
body.gated-locked .top{filter:none}

/* --- theme fixes found in render --- */
/* .more a / .prose a were coloured with the accent, so an .act pill rendered
   terracotta-on-terracotta and the label vanished */
.more .act,.prose .act,.land__alt .act,.post__cta .act,.crumb .act,
.more .btn--solid,.prose .btn--solid{color:var(--on-accent)}
.more .act i,.prose .act i{background:var(--on-accent);color:var(--accent)}
.more .act--dark,.prose .act--dark{color:#FBFAF7}
.more .act--dark i,.prose .act--dark i{background:var(--accent);color:var(--on-accent)}

/* anchor-wrapped cards were inheriting the UA link colour on a light ground */
a.art,a.lead-art,a.cf__card,a.qc,a.mp,a.dcard,a.bcard,a.tile,a.covc,a.citychip,a.pro{
  color:inherit;text-decoration:none}
a.art h3,a.art p,a.lead-art h2,a.lead-art p,a.lead-art .post__lead{color:inherit}
.lead-art h2,.art__b h3{color:var(--ink)}

/* graph-paper texture reads much stronger on paper than it did on black */
body::before{background-image:linear-gradient(rgba(20,20,15,.028) 1px,transparent 1px),
                              linear-gradient(90deg,rgba(20,20,15,.028) 1px,transparent 1px)}

/* the nav floats over the dark hero — .82 alpha turned it muddy grey */
.top,body.lightnav .top{background:rgba(251,250,247,.93)}

/* shimmer headings: an explicit base so the un-swept tail stays legible */
:root{--gs-ink:var(--ink)}
.stage2,.dark,.display{--gs-ink:#FDFBF8}

/* .chips was used in list-with-us.html but never defined, so the two toggle
   buttons rendered flush against each other */
.chips{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
/* .chip appeared only inside grouped selectors — it never got its own sizing,
   so the buttons fell back to the UA's 1px/6px padding */
.chip{font:inherit;font-size:12px;padding:9px 18px;cursor:pointer;line-height:1.2;
  transition:background .2s,color .2s,border-color .2s}
/* .stage2 .eyebrow is coloured with --emerald (specificity 0,2,0), so the dark
   scope has to re-point that alias too or the hero eyebrow keeps the light
   terracotta and drops to 3.12:1 */
.stage2,.dark,.display,.bcard__top,.rep--dark{--emerald:#E08A63}

/* ---- hero photograph ---- */
.stage2__ph{position:absolute;inset:0;border-radius:inherit;overflow:hidden;z-index:0}
.stage2__ph img{width:100%;height:100%;object-fit:cover;object-position:60% 60%;display:block}
/* scrim: dark from the lower left where the headline and CTA sit, easing off
   over the villa so the photograph still reads */
.stage2__ph:after{content:"";position:absolute;inset:0;
  background:linear-gradient(103deg,rgba(10,10,8,.90) 0%,rgba(10,10,8,.74) 34%,
    rgba(10,10,8,.34) 62%,rgba(10,10,8,.20) 100%),
    linear-gradient(180deg,rgba(10,10,8,.42) 0%,rgba(10,10,8,.10) 38%,rgba(10,10,8,.66) 100%)}
.stage2__bg,.stage2__ov{z-index:1}
.stage2__bg{opacity:.42;mix-blend-mode:screen}
.stage2__ov{background:linear-gradient(180deg,rgba(9,9,11,.10),rgba(9,9,11,.42))}
.stage2__word{z-index:2}
.stage2__in{position:relative;z-index:3}
@media(max-width:760px){.stage2__ph img{object-position:66% 62%}
  .stage2__ph:after{background:linear-gradient(180deg,rgba(10,10,8,.52) 0%,rgba(10,10,8,.34) 30%,rgba(10,10,8,.88) 100%)}}

/* bento card photographs — the ::after gradient is a generated last child, so
   it still paints over the image and keeps the label legible */
.bcard__top img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.bcard__top::after{background:linear-gradient(180deg,rgba(10,10,8,0) 30%,rgba(10,10,8,.55) 66%,rgba(10,10,8,.88) 100%)}
.bcard__top b{text-shadow:0 1px 12px rgba(10,10,8,.6)}
.bcard:hover .bcard__top img{transform:scale(1.04)}
.bcard__top img{transition:transform .6s var(--ease)}

/* ============ price calculator ============ */
.calcwrap{max-width:920px;margin:0 auto}
.calcacts{display:flex;gap:12px;justify-content:flex-end;margin-top:28px;
  padding-top:22px;border-top:1px solid var(--line)}
.calcacts .btn--line[hidden]{display:none}
#calcscreen h2{font-size:clamp(22px,2.6vw,32px);letter-spacing:-.035em;margin-bottom:8px}
#calcscreen .help{font-size:14.5px;color:var(--soft);margin-bottom:26px;max-width:56ch}

.cards--tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:12px}
.cards--tiles .tile{text-align:left;padding:20px 22px;border-radius:1.5rem;cursor:pointer;
  background:var(--card);border:1px solid var(--line);transition:.25s var(--ease)}
.cards--tiles .tile:hover{border-color:var(--accent)}
.cards--tiles .tile.on{border-color:var(--accent);background:var(--accent-soft)}
.tile__b b{display:block;font-size:16px;font-weight:500;margin-bottom:5px}
.tile__b i{font-style:normal;font-size:13px;color:var(--soft)}

.areawrap{max-width:520px}
.range{-webkit-appearance:none;appearance:none;width:100%;height:3px;border-radius:999px;
  background:var(--line);outline:none;margin:10px 0 24px}
.range::-webkit-slider-thumb{-webkit-appearance:none;width:26px;height:26px;border-radius:999px;
  background:var(--accent);cursor:pointer;border:3px solid var(--card);box-shadow:var(--shadow-1)}
.range::-moz-range-thumb{width:26px;height:26px;border-radius:999px;background:var(--accent);
  cursor:pointer;border:3px solid var(--card)}
.areaval{display:flex;align-items:center;gap:12px}
.areaval .field{width:150px;font-size:20px;padding:12px 16px;text-align:center}
.areaval span{font-size:14px;color:var(--soft)}

.roomgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:10px}
.roomrow{display:flex;align-items:center;justify-content:space-between;gap:12px;
  border:1px solid var(--line);border-radius:999px;padding:6px 10px 6px 6px;background:var(--card);
  transition:.2s var(--ease)}
.roomrow.on{border-color:var(--accent);background:var(--accent-soft)}
.roomtog{display:flex;align-items:center;gap:11px;flex:1;background:none;border:0;cursor:pointer;
  font:inherit;font-size:15px;color:var(--ink);padding:9px 4px;text-align:left}
.roomtog__c{display:grid;place-items:center;width:24px;height:24px;border-radius:999px;flex:none;
  border:1px solid var(--line);background:var(--paper);font-size:12px;color:var(--on-accent)}
.roomrow.on .roomtog__c{background:var(--accent);border-color:var(--accent)}
.stepper{display:flex;align-items:center;gap:4px;flex:none}
.stepper[hidden]{display:none}
.stepper button{width:30px;height:30px;border-radius:999px;border:1px solid var(--line);
  background:var(--card);cursor:pointer;font-size:16px;line-height:1;color:var(--ink)}
.stepper button:hover{border-color:var(--accent);color:var(--accent)}
.stepper b{min-width:22px;text-align:center;font-size:15px;font-weight:500}

.cards--spec{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:12px}
.spec{text-align:left;padding:22px 24px;border-radius:1.5rem;cursor:pointer;background:var(--card);
  border:1px solid var(--line);transition:.25s var(--ease)}
.spec:hover{border-color:var(--accent)}
.spec.on{border-color:var(--accent);background:var(--accent-soft)}
.spec b{display:block;font-size:17px;font-weight:500;margin-bottom:7px}
.spec i{font-style:normal;font-size:13.5px;color:var(--soft);line-height:1.6}

/* result */
.rc__big{font-size:clamp(34px,6vw,64px);font-weight:100;letter-spacing:-.045em;margin:10px 0 12px}
.rc__sub{font-size:14.5px;color:var(--soft)}
.rc__f{color:var(--accent)}
.rc__per{font-size:13px;color:var(--faint);margin-top:6px}
#calcresult .phz{margin-top:34px}
.incl{display:grid;grid-template-columns:1fr 1fr;gap:26px;margin-top:34px}
.incl ul{list-style:none;margin-top:12px;display:grid;gap:8px}
.incl li{font-size:14px;color:var(--soft);padding-left:20px;position:relative;line-height:1.6}
.incl li:before{content:"";position:absolute;left:0;top:11px;width:10px;height:1px;background:var(--accent)}
.rc__acts{display:flex;flex-wrap:wrap;gap:12px;margin-top:32px}
@media(max-width:700px){.incl{grid-template-columns:1fr}
  .calcacts{justify-content:stretch}.calcacts .btn{flex:1}}

/* estimator tab bar + shared calculator controls */
.calctabs{display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin-top:26px}
.calctabs__l{font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--faint);
  margin-right:6px}
.calctab{font-size:13px;padding:9px 18px;border-radius:999px;border:1px solid var(--line);
  background:var(--card);color:var(--soft);text-decoration:none;transition:.2s var(--ease)}
.calctab:hover{border-color:var(--accent);color:var(--accent)}
.calctab.on{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
.numgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:14px;max-width:640px}
.numf{display:block}
.numf span{display:block;font-size:10px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--faint);margin-bottom:7px}
.numf .field{width:100%;font-size:18px;padding:12px 16px}
.roomtog__p{margin-left:auto;font-style:normal;font-size:11.5px;color:var(--faint);
  white-space:nowrap;padding-left:12px}
.roomrow.on .roomtog__p{color:var(--accent)}
#calcresult .phz td:last-child{text-align:right;color:var(--soft)}

/* ============ site footer ============ */
.foot{border-top:1px solid var(--line);background:var(--surf);margin-top:clamp(60px,8vw,110px);
  padding:0 var(--pad)}
.ft__in{max-width:1280px;margin:0 auto}
.ft__grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:34px;
  padding:clamp(38px,5vw,60px) 0}
.ft__col h3{font-size:10px;font-weight:500;letter-spacing:.18em;text-transform:uppercase;
  color:var(--ink);margin-bottom:16px}
.ft__col ul{list-style:none;display:grid;gap:9px}
.ft__col a{font-size:13.5px;color:var(--soft);text-decoration:none;line-height:1.5;
  transition:color .2s var(--ease)}
.ft__col a:hover{color:var(--accent)}
.ft__rule{height:1px;background:var(--line)}
.ft__util{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:18px;padding:20px 0}
.ft__note{font-size:12.5px;color:var(--soft);margin:0;max-width:56ch;line-height:1.6}
.ft__soc{display:flex;gap:8px}
.ft__soc a{display:grid;place-items:center;width:38px;height:38px;border-radius:999px;
  border:1px solid var(--line);background:var(--card);color:var(--soft);transition:.2s var(--ease)}
.ft__soc a:hover{border-color:var(--accent);color:var(--accent)}
.ft__parent{font-size:12.5px;color:var(--ink);text-decoration:none;white-space:nowrap;
  border-bottom:1px solid var(--line);padding-bottom:2px}
.ft__parent:hover{border-color:var(--accent);color:var(--accent)}
.ft__base{padding:16px 0 26px;text-align:center}
.ft__base p{font-size:11.5px;color:var(--faint);margin:0;line-height:1.6}
@media(max-width:860px){.ft__grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:28px}}
@media(max-width:520px){.ft__grid{grid-template-columns:1fr}.ft__util{flex-direction:column;
  align-items:flex-start}}

/* the gate blurs page content — the footer is chrome, so it stays readable */
body.gated-locked > footer.foot{filter:none}

/* BUILD is the tool group, not a page — weighted so it reads as the primary action */
.top__build{font-weight:500!important;letter-spacing:.06em;color:var(--ink)!important;
  background:var(--accent-soft);border:1px solid var(--accent)}
.top__build:hover{background:var(--accent)!important;color:var(--on-accent)!important;
  border-color:var(--accent)}
body.lightnav .top__build{color:var(--ink)!important}
.stage2 .top__build,.dark .top__build{color:#FDFBF8!important}

/* dealer locator */
.locbar{grid-column:1/-1;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:14px;padding:16px 22px;border:1px dashed var(--line);border-radius:1.5rem;
  background:var(--surf);margin-bottom:6px}
.locbar span{font-size:13.5px;color:var(--soft);line-height:1.5}
.locbar.is-on{border-style:solid;border-color:var(--accent);background:var(--accent-soft)}
.locbar.is-on span{color:var(--ink)}
.linkbtn{background:none;border:0;font:inherit;font-size:13px;color:var(--accent);cursor:pointer;
  text-decoration:underline;text-underline-offset:3px;padding:0}
.mp__body{display:block;color:inherit;text-decoration:none}
.mp__deal{display:inline-flex;align-items:center;gap:7px;margin-top:14px;font-size:12.5px;
  color:var(--accent);text-decoration:none;border-top:1px solid var(--line);
  padding-top:13px;width:100%}
.mp__deal i{font-style:normal;transition:transform .3s var(--ease)}
.mp__deal:hover i{transform:translateX(4px)}
.mp__deal:hover{color:var(--ink)}

/* ============ admin ============ */
.aroles{display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin-top:24px}
.aroles .calctab{cursor:pointer;font:inherit;font-size:13px}
.aroles .calctab.on{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
.ashell{display:grid;grid-template-columns:220px 1fr;gap:32px;align-items:start}
.aside{display:grid;gap:4px;position:sticky;top:96px}
.atab{display:flex;align-items:center;justify-content:space-between;gap:8px;text-align:left;
  font:inherit;font-size:13.5px;padding:10px 14px;border-radius:12px;border:1px solid transparent;
  background:none;color:var(--soft);cursor:pointer;transition:.2s var(--ease)}
.atab:hover{background:var(--card);color:var(--ink)}
.atab.on{background:var(--accent-soft);border-color:var(--accent);color:var(--ink);font-weight:500}
.atab i{font-style:normal;font-size:11px;min-width:20px;text-align:center;padding:2px 6px;
  border-radius:999px;background:var(--accent);color:var(--on-accent)}
.amain h2{font-size:clamp(22px,2.4vw,30px);letter-spacing:-.035em;margin-bottom:22px}
.astats{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:12px}
.astat{background:var(--card);border:1px solid var(--line);border-radius:1.25rem;padding:20px 22px}
.astat b{display:block;font-size:30px;font-weight:100;letter-spacing:-.04em;line-height:1.1}
.astat span{display:block;font-size:12px;color:var(--soft);margin-top:6px}
.astat i{display:block;font-style:normal;font-size:11px;color:var(--faint);margin-top:4px}
.acard{background:var(--card);border:1px solid var(--line);border-radius:1.5rem;padding:22px 24px;
  margin-bottom:14px}
.acard__h{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:10px;
  margin-bottom:14px}
.acard__h b{font-size:16px;font-weight:500}
.acard p{font-size:14px;color:var(--soft);line-height:1.6}
.acard__a{display:flex;flex-wrap:wrap;gap:10px;margin-top:16px}
.adiff{display:grid;grid-template-columns:130px 1fr 1fr;gap:12px;padding:9px 0;
  border-top:1px solid var(--line);font-size:13px;align-items:start}
.adiff__f{font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--faint);padding-top:3px}
.adiff__o{color:var(--faint);text-decoration:line-through}
.adiff__n{color:var(--ink)}
.apill{display:inline-block;font-size:10px;letter-spacing:.12em;text-transform:uppercase;
  padding:3px 10px;border-radius:999px;border:1px solid var(--line);color:var(--soft)}
.apill--verified{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
.apill--pending,.apill--invited{background:var(--accent-soft);border-color:var(--accent);color:var(--accent)}
.aright{text-align:right}
.acontact{display:flex;flex-wrap:wrap;gap:16px;margin-top:12px;padding-top:12px;
  border-top:1px solid var(--line);font-size:13px;color:var(--ink)}
.amask{color:var(--faint);font-style:italic}
@media(max-width:860px){.ashell{grid-template-columns:1fr}.aside{position:static;
  grid-auto-flow:column;overflow-x:auto}.adiff{grid-template-columns:1fr}}
.gbtn{display:flex;justify-content:center;margin-bottom:10px;min-height:0}
.gbtn:empty{display:none}

/* post-estimate recommendations */
.recs{margin-top:44px;padding-top:34px;border-top:1px solid var(--line)}
.recs__k{margin:28px 0 14px}
.recgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px}
/* Top-3 practice picks under a BUILD result — see people() in recommend.js. */
.recs__note{font-size:12.5px;color:var(--faint);margin:8px 0 0;line-height:1.6}
.recs__note a{color:var(--soft)}
.rec__v{display:inline-block;margin-left:6px;padding:1px 7px;border-radius:999px;
  background:var(--accent-soft);color:var(--accent);font-size:10px;font-weight:500;
  letter-spacing:.08em;text-transform:uppercase;vertical-align:middle}
.rec{display:flex;flex-direction:column;gap:5px;padding:18px 20px;border-radius:1.25rem;
  background:var(--card);border:1px solid var(--line);text-decoration:none;color:inherit;
  transition:.25s var(--ease)}
.rec:hover{border-color:var(--accent);box-shadow:var(--shadow-1)}
.rec b{font-size:15px;font-weight:500;line-height:1.35}
.rec span{font-size:12px;color:var(--faint)}
.rec i{font-style:normal;font-size:12px;color:var(--accent);margin-top:6px}
.pingrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:12px}
.pin{display:flex;flex-direction:column;gap:6px;padding:20px 22px;border-radius:1.25rem;
  background:var(--card);border:1px solid var(--line);text-decoration:none;color:inherit;
  transition:.25s var(--ease)}
.pin:hover{border-color:#E60023;box-shadow:var(--shadow-1)}
.pin__p{display:grid;place-items:center;width:30px;height:30px;border-radius:999px;
  background:#E60023;color:#fff;font-size:15px;font-weight:600;margin-bottom:4px}
.pin b{font-size:15px;font-weight:500}
.pin span{font-size:12px;color:var(--faint);line-height:1.5}
.pin i{font-style:normal;font-size:12px;color:#E60023;margin-top:6px}

/* household notes + palette swatches */
.hhnotes{list-style:none;margin-top:18px;display:grid;gap:10px}
.hhnotes li{font-size:13.5px;color:var(--soft);line-height:1.6;padding-left:20px;position:relative}
.hhnotes li:before{content:"";position:absolute;left:0;top:11px;width:10px;height:1px;background:var(--accent)}
.hhnotes b{color:var(--ink);font-weight:500}
.spec.pal{padding-top:18px}
.sw{display:flex;gap:0;border-radius:8px;overflow:hidden;margin-bottom:12px;height:34px;width:100%}
.sw i{flex:1;display:block}

/* diagrams, custom rows, live total */
.dg{width:100%;height:auto;display:block;max-height:120px}
.tile__d,.spec__d{display:block;margin-bottom:14px;padding:10px;border-radius:12px;
  background:var(--surf);border:1px solid var(--line)}
.tile.on .tile__d,.spec.on .spec__d{background:var(--card);border-color:var(--accent)}
.cards--tiles .tile{display:flex;flex-direction:column}
.addrow{display:grid;grid-template-columns:1.6fr .7fr 1.3fr auto;gap:10px;margin-top:16px;
  align-items:center}
.addrow .field{width:100%;font-size:14px;padding:11px 14px}
@media(max-width:760px){.addrow{grid-template-columns:1fr}}
.calclive{font-size:13px;color:var(--soft);margin-top:12px;text-align:right}
.calclive b{color:var(--ink);font-weight:500;font-size:15px}
.calclive i{font-style:normal;color:var(--faint);font-size:11.5px}

/* segment cards with lifestyle photography */
.dcard--img{padding:0;overflow:hidden;text-align:left;display:flex;flex-direction:column}
.dcard__i{display:block;aspect-ratio:16/9;overflow:hidden;background:var(--surf)}
.dcard__i img{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .6s var(--ease)}
.dcard--img:hover .dcard__i img{transform:scale(1.04)}
.dcard__b{display:block;padding:18px 20px 20px}
.dcard--img .dcard__s{display:block;font-size:10px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--accent);margin-bottom:6px}
.dcard--img b{display:block;font-size:16px;font-weight:500;line-height:1.3;margin-bottom:5px}
.dcard--img .dcard__n{display:block;font-size:12px;color:var(--faint)}

/* page hero banner — fixed 2:1, never taller than a third of the viewport */
.phero{margin-top:clamp(24px,3vw,40px);border-radius:2rem;overflow:hidden;
  border:1px solid var(--line);box-shadow:var(--shadow-1);max-height:38vh}
.phero img{width:100%;height:100%;object-fit:cover;display:block;aspect-ratio:2/1}
@media(max-width:700px){.phero{border-radius:1.25rem;max-height:30vh}}

/* isometric render + plan, side by side on the layout cards */
.spec__art{display:grid;grid-template-columns:1.55fr 1fr;gap:10px;align-items:stretch;
  margin-bottom:14px}
.spec__iso{display:block;border-radius:12px;overflow:hidden;background:var(--card);
  border:1px solid var(--line)}
.spec__iso img{width:100%;height:100%;object-fit:cover;display:block;aspect-ratio:1}
.spec__plan{display:grid;place-items:center;border-radius:12px;padding:8px;
  background:var(--surf);border:1px solid var(--line)}
.spec.on .spec__iso,.spec.on .spec__plan{border-color:var(--accent)}
@media(max-width:520px){.spec__art{grid-template-columns:1fr}}

/* hero copy sitting on the banner, search bar below it */
.phero--text{position:relative;max-height:none;margin-top:0}
.phero--text picture{display:block}
.phero--text img{aspect-ratio:2/1;min-height:340px}
.phero--text:after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(100deg,rgba(10,10,8,.86) 0%,rgba(10,10,8,.70) 38%,
    rgba(10,10,8,.30) 68%,rgba(10,10,8,.16) 100%),
    linear-gradient(180deg,rgba(10,10,8,.20),rgba(10,10,8,.42))}
.phero__in{position:absolute;inset:0;z-index:2;display:flex;flex-direction:column;
  justify-content:center;padding:clamp(26px,5vw,62px);max-width:min(760px,80%)}
.phero__in .eyebrow{color:#F0A882}
.phero__in h1{color:#FDFBF8;margin:14px 0 16px}
.phero__in .lead{color:rgba(255,255,255,.86);max-width:52ch}
/* the search bar sat flush against the banner — the sibling selector this
   replaces never matched, because the bar is not an immediate sibling */
.phero--text{margin-bottom:clamp(20px,2.6vw,34px)}
.sbar{margin-top:0}
@media(max-width:700px){.phero--text img{aspect-ratio:4/3;min-height:300px}
  .phero__in{max-width:100%}}

/* ---- alignment audit fixes ----
   The footer was inset differently from every content section on every page:
   its container capped at 1280px against the content's 1600px, and its side
   padding taken from var(--pad) — clamp(20px,5vw,64px) — while .band and
   .phead were later redefined to clamp(20px,3.4vw,52px). Two separate causes,
   both fixed here so the footer shares the content edge exactly. */
.ft__in{max-width:1600px}
.foot{padding-left:clamp(20px,3.4vw,52px);padding-right:clamp(20px,3.4vw,52px)}

/* The estimator column was centred while its own page heading was left-aligned,
   which read as a misalignment rather than as a deliberate centred form. */
.calcwrap{margin-left:0;margin-right:0}

/* ── Wordmark ──────────────────────────────────────────────────────────────
   build/nav.py owns the markup; this owns the size.

   No colour filter. The rule that was here inverted the mark to white on any
   page without .lightnav, on the assumption that the glass navbar still ran
   white-on-dark. It does not: the theme above sets .top to
   rgba(251,250,247,.93) with near-black links, so every header is light and
   the inverted mark rendered white-on-cream — invisible. The asset is
   terracotta (#AD471B), which is the correct colour on all of them.

   If a genuinely dark header is ever reintroduced, scope the invert to that
   page class rather than to :not(.lightnav). */
.top__logo{display:block;height:15px;width:auto}   /* 25% down from 20px */
.top__mark{display:inline-flex;align-items:center;padding:0;line-height:0}

@media (max-width:560px){.top__logo{height:13px}}   /* 25% down from 17px */

/* ==========================================================================
   Article cards — title over the image.

   The markup puts the title in .art__b, below the picture. Rather than
   regenerate 170 pages to move it, the image block becomes the positioning
   context and the heading is lifted onto it. Everything else — excerpt, read
   time — stays where it was.

   CONTRAST: the titles sit on arbitrary photographs, so the scrim is not
   decorative. The gradient below runs to rgba(0,0,0,.78) at the base, which
   holds white text above 7:1 on every cover currently in use, including the
   pale marble and white-kitchen ones. If a lighter scrim is ever wanted,
   re-measure against the palest cover, not against a dark one.
   ========================================================================== */
/* display:block matters more than it looks. .art__i is a <span>, so it was
   inline, and aspect-ratio does not apply to inline boxes — the 16/10 declared
   up at .art__i has therefore never taken effect, and the element had no
   height of its own. That was survivable while nothing was positioned against
   it; an absolutely-positioned title needs a real containing block. */
.art__i{position:relative;display:block}

/* The scrim. Sits above the photo, below the text. */
.art__i::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(to top,
    rgba(0,0,0,.78) 0%, rgba(0,0,0,.55) 26%, rgba(0,0,0,.12) 55%, rgba(0,0,0,0) 78%);
}

.art__over{
  position:absolute;left:0;right:0;bottom:0;z-index:2;
  padding:18px 20px;display:flex;flex-direction:column;gap:7px;
}
.art__over .art__k{color:#fff;opacity:.82}
/* `a.art h3 {color:inherit}` earlier in this file scores (0,1,2), so a bare
   `.art__over h3` at (0,1,1) loses and the title renders in ink on a dark
   scrim. Matching the anchor too takes this to (0,2,2). */
a.art .art__over h3, a.lead-art .art__over h2, .art__over h3, .art__over h2{
  color:#fff;font-size:18px;line-height:1.28;letter-spacing:-.02em;margin:0;
  /* Two lines maximum: a long title should not swallow the whole image. */
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}

/* The heading has moved onto the image, so the body block no longer opens
   with one. Tighten the space it used to occupy. */
/* Same trap as .art__i above: .art__b is a <span>, so it was inline, and the
   24px of horizontal padding declared at .art__b never formed a content box.
   The excerpt and the meta line therefore ran flush to the card edge, where
   .art{overflow:hidden} shaved the first glyph off each — "Materials · 7 min"
   rendered as "aterials · 7 min". Padding on an inline box does not lay out;
   the element has to be a block for it to mean anything. */
.art__b{display:block;padding-top:16px}
.art__b > h3{display:none}

.lead-art .art__over{padding:24px 28px}
a.lead-art .art__over h2{font-size:clamp(20px,2.2vw,30px);-webkit-line-clamp:3}

@media (max-width:640px){
  .art__over{padding:15px 16px}
}


/* Someone browsing with images off, or on a failed image load, still needs the
   title. Restore the in-body heading when the cover is not there to sit on. */
.art--noimg .art__over{position:static;padding:0}
.art--noimg .art__i::after{display:none}


/* ==========================================================================
   Responsive fixes — deliberately last in the file.

   Both rules below target selectors that are redefined later in this
   stylesheet (.top__r at two different points, .art__over h3 in the theme
   block). A media query adds no specificity, so a media block placed earlier
   loses to any bare rule that comes after it. Putting these at the end is the
   fix; moving them up will silently break them again.
   ========================================================================== */

/* The nav had nowhere to go between 560px and 1080px: links are only hidden
   below 560px, so all eight sat in a header 682px wide needing 804px. Wrap
   them onto their own row rather than hiding them, and let that row scroll if
   it is still tight, so nothing becomes unreachable. */
@media (min-width:561px) and (max-width:1080px){
  .top{flex-wrap:wrap;row-gap:10px}
  .top__r{width:100%;justify-content:flex-start;overflow-x:auto;
    scrollbar-width:none;-ms-overflow-style:none;gap:16px}
  .top__r::-webkit-scrollbar{display:none}
}

/* Titles were being cut, and the thing that predicts it is the width of the
   CARD, not the width of the window. The grid goes 1 -> 2 -> 3 columns, and
   each new column makes every card narrower again: 596px single-column, 326px
   in the two-column band, 305px in the three-column one. So a viewport
   breakpoint fixes whichever band you tested and misses the next — a 1000px
   media query left the 1024px case cutting seven titles.

   Ask the card how wide it is instead. Cards at or below 360px get a third
   line and a slightly smaller face; the smaller face is what keeps three
   lines inside the scrim, which only covers the lower part of the image.
   This holds for any future column count without a new breakpoint. */
.art{container-type:inline-size}
@container (max-width:360px){
  a.art .art__over h3, .art__over h3{font-size:16.5px;-webkit-line-clamp:3}
}

/* "Show more" under the professionals grid. The directory lists everything by
   default now, so this paces ~520 cards rather than gating them behind a
   two-dropdown search the way the old search-first page did. */
.mmore{display:flex;justify-content:center;margin-top:26px}
.mmore:empty{margin-top:0}