:root{
  --black:#000A39; --ink:#000A39; --ink-2:#474D6B; --ink-3:#777C95;
  --paper:#FFFFFF; --paper-2:#F5F6F9; --paper-3:#E6E8EF;
  --line:#C8CAD4; --line-soft:#E6E8EF;
  --red:#F02D36; --red-deep:#C41F27; --red-bright:#FF4B54; --red-tint:#FDEBEC;
  --shadow:0 1px 2px rgba(0,10,57,.08), 0 10px 30px -14px rgba(0,10,57,.32);
  --f-display:"Archivo", "Helvetica Neue", Arial, sans-serif;
  --f-body:"Public Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --f-mono:"IBM Plex Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --wrap:1140px;
  --grid-line:rgba(0,10,57,.055);
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --black:#00041C; --ink:#EAECF3; --ink-2:#AEB4C8; --ink-3:#8288A3;
    --paper:#0A0E28; --paper-2:#111634; --paper-3:#1A2047;
    --line:#2A3160; --line-soft:#1A2047;
    --red:#FF4B54; --red-deep:#F02D36; --red-bright:#FF6F77; --red-tint:#2E1220;
    --shadow:0 1px 2px rgba(0,0,0,.5), 0 10px 30px -14px rgba(0,0,0,.8);
    --grid-line:rgba(234,236,243,.055);
  }
}
:root[data-theme="dark"]{
  --black:#00041C; --ink:#EAECF3; --ink-2:#AEB4C8; --ink-3:#8288A3;
  --paper:#0A0E28; --paper-2:#111634; --paper-3:#1A2047;
  --line:#2A3160; --line-soft:#1A2047;
  --red:#FF4B54; --red-deep:#F02D36; --red-bright:#FF6F77; --red-tint:#2E1220;
  --shadow:0 1px 2px rgba(0,0,0,.5), 0 10px 30px -14px rgba(0,0,0,.8);
  --grid-line:rgba(234,236,243,.055);
}

*{box-sizing:border-box}
body{margin:0; background:var(--paper); color:var(--ink); font-family:var(--f-body); font-size:16.5px; line-height:1.6; -webkit-font-smoothing:antialiased}
h1,h2,h3,h4{font-family:var(--f-display); font-weight:700; line-height:1.06; letter-spacing:-.02em; text-wrap:balance; margin:0}
p{margin:0}
a{color:inherit}
img,svg{max-width:100%}
.shell{max-width:var(--wrap); margin:0 auto; padding-inline:20px}

/* ---- map-grid texture ---- */
.gridbg{
  background-image:linear-gradient(var(--grid-line) 1px, transparent 1px), linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
  background-size:34px 34px;
}

/* ---- prototype bar ---- */
.protobar{background:var(--black); color:#E8EAEE; font-family:var(--f-mono); font-size:12.5px}
.protobar .shell{display:flex; flex-wrap:wrap; gap:8px 18px; align-items:center; padding-block:9px}
.protobar b{color:var(--red-bright); font-weight:600}
.protobar span{opacity:.7}

/* ---- header ---- */
header.site{border-bottom:2px solid var(--black); background:var(--paper); position:relative; z-index:20}
header.site .shell{display:flex; align-items:center; gap:18px; padding-block:14px; flex-wrap:wrap}
.brand{display:flex; align-items:center; gap:12px; text-decoration:none}
.brand .mark{width:34px; height:45px; flex:none}
.brand .wordmark{font-family:var(--f-display); font-weight:800; font-size:22px; letter-spacing:.055em; line-height:1; text-transform:uppercase; color:var(--ink); white-space:nowrap}
.brand small{display:block; font-family:var(--f-display); font-weight:600; font-size:9.5px; letter-spacing:.42em; text-transform:uppercase; color:var(--red); margin-top:6px}
nav.main{display:flex; gap:2px; flex-wrap:wrap; margin-left:auto}
nav.main a{font:inherit; font-size:14.5px; text-decoration:none; color:var(--ink-2); padding:8px 11px; display:inline-block}
nav.main a:hover{color:var(--red)}
nav.main a[aria-current="page"]{color:var(--ink); font-weight:600; box-shadow:inset 0 -3px 0 var(--red)}
.callnow{font-family:var(--f-mono); font-size:14px; font-weight:600; text-decoration:none; background:var(--black); color:#fff; padding:10px 15px; white-space:nowrap}
.callnow:hover{background:var(--red)}
:root[data-theme="dark"] .callnow, :root:not([data-theme="light"]) .callnow{background:var(--red); color:#fff}
@media (prefers-color-scheme: light){:root:not([data-theme="dark"]) .callnow{background:var(--black); color:#fff}}

/* ---- type ---- */
.eyebrow{font-family:var(--f-mono); font-size:11.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--red); font-weight:600; margin-bottom:14px; display:flex; align-items:center; gap:9px}
.eyebrow::before{content:""; width:22px; height:2px; background:var(--red); flex:none}
.lede{font-size:19px; color:var(--ink-2); max-width:60ch; line-height:1.55}
h1{font-size:clamp(34px,5.6vw,60px); font-weight:800}
h2{font-size:clamp(26px,3.6vw,40px); font-weight:800}
h3{font-size:20px}

/* ---- buttons ---- */
.btn{display:inline-flex; align-items:center; gap:9px; font:inherit; font-weight:600; font-size:16px; padding:15px 26px; text-decoration:none; cursor:pointer; border:2px solid transparent}
.btn-primary{background:var(--red); color:#fff; border-color:var(--red)}
.btn-primary:hover{background:var(--red-deep); border-color:var(--red-deep)}
.btn-ghost{border-color:var(--line); color:var(--ink); background:transparent}
.btn-ghost:hover{border-color:var(--black); background:var(--paper-2)}
:root[data-theme="dark"] .btn-ghost:hover, :root:not([data-theme="light"]) .btn-ghost:hover{border-color:var(--ink)}

section{padding-block:clamp(52px,6vw,86px)}
section.tint{background:var(--paper-2); border-block:1px solid var(--line)}
section.dark{background:var(--black); color:#ECEEF1}
section.dark .lede{color:#AEB4BD}
section.dark h2{color:#fff}
.sechead{max-width:66ch; margin-bottom:38px}
.sechead p{margin-top:14px}

/* ---- hero ---- */
.hero{padding-block:clamp(44px,5vw,72px)}
.hero-grid{display:grid; grid-template-columns:1.08fr .92fr; gap:clamp(28px,4.5vw,56px); align-items:center}
@media (max-width:920px){.hero-grid{grid-template-columns:1fr}}
.hero h1 em{font-style:normal; color:var(--red)}
.hero .lede{margin-top:22px}
.hero-cta{display:flex; gap:12px; flex-wrap:wrap; margin-top:30px}
.hero-sub{margin-top:18px; font-size:13.5px; color:var(--ink-3); font-family:var(--f-mono)}

/* map panel */
.mappanel{border:2px solid var(--black); background:var(--paper); padding:18px; position:relative}
:root[data-theme="dark"] .mappanel, :root:not([data-theme="light"]) .mappanel{border-color:var(--line)}
@media (prefers-color-scheme: light){:root:not([data-theme="dark"]) .mappanel{border-color:var(--black)}}
.mappanel .caption{font-family:var(--f-mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3); display:flex; justify-content:space-between; gap:12px; margin-top:12px; padding-top:12px; border-top:1px solid var(--line)}

/* ---- trust strip ---- */
.strip{background:var(--black); color:#fff}
.strip .shell{display:grid; grid-template-columns:repeat(4,1fr); gap:1px; padding:0}
@media (max-width:780px){.strip .shell{grid-template-columns:repeat(2,1fr)}}
.strip .cell{padding:22px 20px; display:flex; gap:13px; align-items:flex-start}
.strip .cell svg{width:24px; height:24px; flex:none; color:var(--red-bright)}
.strip .cell p{font-size:14px; line-height:1.42; color:#C8CDD4}
.strip .cell strong{display:block; color:#fff; font-family:var(--f-display); font-weight:700; font-size:15px; margin-bottom:3px}

/* ---- option cards ---- */
.options{display:grid; grid-template-columns:repeat(3,1fr); gap:20px}
@media (max-width:1000px){.options{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.options{grid-template-columns:1fr}}

/* payment structure band */
.payband{margin-top:22px; border:2px solid var(--black); background:var(--paper)}
:root[data-theme="dark"] .payband, :root:not([data-theme="light"]) .payband{border-color:var(--line)}
@media (prefers-color-scheme: light){:root:not([data-theme="dark"]) .payband{border-color:var(--black)}}
.payband .ph{background:var(--black); color:#fff; padding:13px 20px; font-family:var(--f-mono); font-size:11.5px; letter-spacing:.14em; text-transform:uppercase; font-weight:600; display:flex; align-items:center; gap:10px; flex-wrap:wrap}
.payband .ph .sm{color:var(--red-bright); letter-spacing:.06em}
.paygrid{display:grid; grid-template-columns:1fr 1fr; gap:1px; background:var(--line)}
@media (max-width:680px){.paygrid{grid-template-columns:1fr}}
.paycell{background:var(--paper); padding:20px 22px 22px; display:flex; flex-direction:column; gap:9px}
.paycell h4{font-family:var(--f-display); font-weight:700; font-size:17px}
.paycell p{font-size:14.5px; color:var(--ink-2); line-height:1.5}
.paycell .applies{font-family:var(--f-mono); font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--red); margin-top:auto; padding-top:10px; font-weight:600}
.opt{border:1px solid var(--line); background:var(--paper); display:flex; flex-direction:column; box-shadow:var(--shadow)}
.opt .art{background:var(--paper-2); border-bottom:1px solid var(--line); padding:22px 18px 14px; position:relative}
.opt .art svg.house{width:100%; height:auto; display:block; color:var(--ink-2)}
.opt .art:has(.artshot){padding:0; border-bottom:1px solid var(--line)}
.opt .art img.artshot{width:100%; aspect-ratio:16/10; object-fit:cover; display:block; max-width:100%}
.opt .art .badge{position:absolute; top:12px; left:12px; font-family:var(--f-mono); font-size:10px; font-weight:600; letter-spacing:.12em; text-transform:uppercase; background:var(--black); color:#fff; padding:4px 8px}
.opt-a .art .badge{background:var(--red)}
.opt .body{padding:20px 20px 22px; display:flex; flex-direction:column; gap:11px; flex:1}
.opt h3{font-size:19px}
.opt p{font-size:14.5px; color:var(--ink-2); line-height:1.5}
.opt .meta{margin-top:auto; padding-top:15px; border-top:1px dashed var(--line); display:flex; flex-direction:column; gap:7px}
.metarow{display:flex; justify-content:space-between; gap:12px; align-items:baseline}
.metarow dt{color:var(--ink-3); font-family:var(--f-mono); font-size:10.5px; letter-spacing:.08em; text-transform:uppercase}
.metarow dd{margin:0; font-family:var(--f-mono); font-weight:600; font-size:12.5px; text-align:right; font-variant-numeric:tabular-nums}

/* ---- photo frames ---- */
.photo{position:relative; background:var(--paper-3); border:1px solid var(--line); overflow:hidden; display:block}
.photo .scene{display:block; width:100%; height:auto}
.photo img.shot{display:block; width:100%; height:100%; object-fit:cover; aspect-ratio:4/3}
.photo.tall img.shot{aspect-ratio:3/4}
.photo.wide img.shot{aspect-ratio:16/10}
.shotgrid{display:grid; grid-template-columns:repeat(4,1fr); gap:14px}
.shotgrid.five{grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}
@media (max-width:1000px){.shotgrid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:520px){.shotgrid{grid-template-columns:1fr}}
.intgrid{display:grid; grid-template-columns:1.4fr 1fr; gap:14px}
@media (max-width:860px){.intgrid{grid-template-columns:1fr}}
.intgrid .stackcol{display:grid; gap:14px}
.photo .cap{
  position:absolute; left:0; right:0; bottom:0; padding:14px 14px 11px; color:#fff;
  background:linear-gradient(to top, rgba(0,10,57,.88) 0%, rgba(0,10,57,.55) 55%, rgba(0,10,57,0) 100%);
}
.photo .cap b{display:block; font-family:var(--f-display); font-weight:700; font-size:15.5px; line-height:1.2}
.photo .cap span{font-family:var(--f-mono); font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; opacity:.85}
.photo .tag{position:absolute; left:0; bottom:0; font-family:var(--f-mono); font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; background:var(--black); color:#fff; padding:5px 10px}
.photo .tag.red{background:var(--red)}
.photo .slotmark{position:absolute; top:10px; right:10px; font-family:var(--f-mono); font-size:9.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-3); border:1px dashed var(--line); padding:3px 7px; background:var(--paper)}

.gallery{display:grid; grid-template-columns:repeat(3,1fr); gap:18px}
@media (max-width:860px){.gallery{grid-template-columns:repeat(2,1fr)}}
@media (max-width:520px){.gallery{grid-template-columns:1fr}}
.beforeafter{display:grid; grid-template-columns:1fr 1fr; gap:2px; background:var(--line)}

/* ---- table ---- */
.tablewrap{overflow-x:auto; border:1px solid var(--line); background:var(--paper)}
table.compare{border-collapse:collapse; width:100%; min-width:780px; font-size:14.5px}
table.compare th, table.compare td{padding:15px 16px; text-align:left; border-bottom:1px solid var(--line-soft); vertical-align:top}
table.compare thead th{font-family:var(--f-mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase; font-weight:600; color:#fff; background:var(--black); border-bottom:0}
table.compare thead th:first-child{background:var(--black)}
table.compare thead th.hi{background:var(--red)}
table.compare tbody th{font-family:var(--f-body); font-weight:600; font-size:14.5px; width:186px; color:var(--ink); background:var(--paper-2)}
table.compare td{color:var(--ink-2)}
table.compare tr:last-child th, table.compare tr:last-child td{border-bottom:0}
.num{font-family:var(--f-mono); font-variant-numeric:tabular-nums; font-weight:600; color:var(--ink)}

/* ---- steps ---- */
.steps{display:grid; grid-template-columns:repeat(4,1fr); gap:20px}
@media (max-width:900px){.steps{grid-template-columns:repeat(2,1fr)}}
@media (max-width:540px){.steps{grid-template-columns:1fr}}
.step{background:var(--paper); border:1px solid var(--line); padding:22px 20px 24px; display:flex; flex-direction:column; gap:10px}
.step .ico{width:44px; height:44px; color:var(--red); margin-bottom:4px}
.step .no{font-family:var(--f-mono); font-size:11px; font-weight:600; color:var(--ink-3); letter-spacing:.14em}
.step h3{font-size:18px}
.step p{font-size:14.5px; color:var(--ink-2); line-height:1.5}
.step .when{font-family:var(--f-mono); font-size:11.5px; color:var(--red); margin-top:auto; padding-top:12px; font-weight:500}

/* ---- situations ---- */
.sits{display:flex; flex-wrap:wrap; gap:9px}
.sit{font-size:14px; padding:8px 14px; border:1px solid var(--line); background:var(--paper); color:var(--ink-2)}
.sit:hover{border-color:var(--red); color:var(--red)}

/* ---- form ---- */
.formcard{border:2px solid var(--black); background:var(--paper); box-shadow:var(--shadow)}
:root[data-theme="dark"] .formcard, :root:not([data-theme="light"]) .formcard{border-color:var(--line)}
@media (prefers-color-scheme: light){:root:not([data-theme="dark"]) .formcard{border-color:var(--black)}}
.formcard .fhead{padding:22px 26px; border-bottom:1px solid var(--line); background:var(--black); color:#fff}
.formcard .fhead p{color:#AEB4BD}
.formcard .fbody{padding:26px}
.fgrid{display:grid; grid-template-columns:1fr 1fr; gap:18px}
@media (max-width:620px){.fgrid{grid-template-columns:1fr}}
.field{display:flex; flex-direction:column; gap:6px}
.field.full{grid-column:1/-1}
.field label{font-size:13px; font-weight:600}
.field .hint{font-size:12.5px; color:var(--ink-3); font-family:var(--f-mono)}
.field input, .field select, .field textarea{font:inherit; font-size:15.5px; padding:11px 13px; border:1px solid var(--line); background:var(--paper); color:var(--ink); width:100%}
.field textarea{min-height:92px; resize:vertical}
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible,
.btn:focus-visible, nav.main a:focus-visible, .callnow:focus-visible, .photo:focus-visible{outline:2px solid var(--red); outline-offset:2px}
.formnote{margin-top:16px; font-size:13px; color:var(--ink-3); line-height:1.5}

/* ---- split ---- */
.split{display:grid; grid-template-columns:1.3fr .7fr; gap:clamp(28px,4vw,52px); align-items:start}
@media (max-width:880px){.split{grid-template-columns:1fr}}
.factbox{border:1px solid var(--line); background:var(--paper-2); padding:22px}
.factbox h3{font-size:12px; font-family:var(--f-mono); font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-3); margin-bottom:14px}
.factbox dl{margin:0; display:flex; flex-direction:column; gap:12px}
.factbox .metarow dd{max-width:56%}
.prose p{margin-bottom:16px; color:var(--ink-2)}
.prose h3{margin:28px 0 10px}
.citylinks{display:flex; flex-wrap:wrap; gap:7px}
.citylinks a{font-family:var(--f-mono); font-size:12px; text-decoration:none; padding:6px 10px; border:1px solid var(--line); color:var(--ink-2); display:inline-flex; align-items:center; gap:5px}
.citylinks a svg{width:9px; height:12px; color:var(--red)}
.citylinks a:hover{border-color:var(--red); color:var(--red)}

/* ---- callout ---- */
.callout{border-left:4px solid var(--red); background:var(--red-tint); padding:20px 24px}
.callout.neutral{border-left-color:var(--black); background:var(--paper-2)}
:root[data-theme="dark"] .callout.neutral, :root:not([data-theme="light"]) .callout.neutral{border-left-color:var(--ink-3)}
.callout p{font-size:15.5px; color:var(--ink-2)}
.callout strong{color:var(--ink)}

.slot{border:1px dashed var(--line); padding:20px 22px; font-family:var(--f-mono); font-size:12.5px; color:var(--ink-3); line-height:1.65}

/* ---- footer ---- */
footer.site{background:#000A39; color:#C0C5DA; padding-block:48px 34px; font-size:14px}
footer.site a{color:#C0C5DA}
.legal{border-top-color:#1C2550 !important}
footer.site .cols{display:grid; grid-template-columns:1.5fr 1fr 1fr; gap:32px}
@media (max-width:760px){footer.site .cols{grid-template-columns:1fr}}
footer.site h4{font-family:var(--f-mono); font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3); margin-bottom:12px; font-weight:600}
footer.site ul{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:8px}
footer.site a{color:#C8CDD4; text-decoration:none}
footer.site a:hover{color:var(--red-bright)}
footer.site .brand .wordmark{color:#fff}
footer.site .brand small{color:var(--red-bright)}
.legal{margin-top:32px; padding-top:20px; border-top:1px solid #2A2E34; font-size:12.5px; color:#7C828B; line-height:1.65}
.legal strong{color:#AEB4BD}

/* ---- centered hero ---- */
.hero-center{text-align:center; max-width:820px; margin:0 auto}
.hero-center h1{margin-bottom:18px}
.hero-center .lede{margin:0 auto; max-width:64ch; font-size:18.5px}
.hero-center .phoneline{margin-top:16px; font-size:17px; color:var(--ink-2)}
.hero-center .phoneline a{font-family:var(--f-display); font-weight:800; font-size:24px; color:var(--red); text-decoration:none; white-space:nowrap}
.herobullets{list-style:none; margin:24px 0 0; padding:0; display:flex; gap:10px 26px; justify-content:center; flex-wrap:wrap}
.herobullets li{display:flex; align-items:center; gap:8px; font-size:15.5px; color:var(--ink-2); font-weight:500}
.herobullets svg{width:17px; height:17px; color:var(--red); flex:none}

/* ---- trust badge row ---- */
.trustrow{display:grid; grid-template-columns:repeat(4,1fr); gap:16px; align-items:stretch}
@media (max-width:820px){.trustrow{grid-template-columns:repeat(2,1fr)}}
.badge-slot{border:1px dashed var(--line); background:var(--paper); padding:16px 14px; text-align:center; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:5px; min-height:96px}
.badge-slot.filled{border-style:solid}
.badge-slot .stars{color:var(--red); font-size:17px; letter-spacing:2px; line-height:1}
.badge-slot .lbl{font-family:var(--f-display); font-weight:700; font-size:14.5px}
.badge-slot .sub{font-family:var(--f-mono); font-size:10.5px; letter-spacing:.07em; text-transform:uppercase; color:var(--ink-3)}

/* ---- reason / condition / challenge ---- */
.reasongrid{display:grid; grid-template-columns:repeat(3,1fr); gap:22px}
@media (max-width:820px){.reasongrid{grid-template-columns:1fr}}
.reasoncol{border:1px solid var(--line); background:var(--paper)}
.reasoncol h3{background:var(--black); color:#fff; padding:14px 18px; font-size:16px; font-family:var(--f-display); font-weight:700}
.reasoncol ul{list-style:none; margin:0; padding:14px 18px 18px; display:flex; flex-direction:column; gap:1px}
.reasoncol li a{display:block; padding:8px 0; font-size:15px; color:var(--ink-2); text-decoration:none; border-bottom:1px solid var(--line-soft)}
.reasoncol li:last-child a{border-bottom:0}
.reasoncol li a:hover{color:var(--red)}
.reasoncol li a::before{content:"\203A"; color:var(--red); font-weight:700; margin-right:9px}

/* ---- cities hub ---- */
.tierhead{display:flex; align-items:baseline; gap:14px; flex-wrap:wrap; margin:38px 0 16px; padding-bottom:10px; border-bottom:2px solid var(--black)}
:root[data-theme="dark"] .tierhead, :root:not([data-theme="light"]) .tierhead{border-bottom-color:var(--line)}
@media (prefers-color-scheme: light){:root:not([data-theme="dark"]) .tierhead{border-bottom-color:var(--black)}}
.tierhead h3{font-size:21px}
.tierhead .note{font-family:var(--f-mono); font-size:11.5px; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-3); margin-left:auto}
.citygrid2{display:grid; grid-template-columns:repeat(4,1fr); gap:14px}
@media (max-width:980px){.citygrid2{grid-template-columns:repeat(3,1fr)}}
@media (max-width:720px){.citygrid2{grid-template-columns:repeat(2,1fr)}}
@media (max-width:430px){.citygrid2{grid-template-columns:1fr}}
.citycard{border:1px solid var(--line); background:var(--paper); padding:15px 16px; text-decoration:none; display:flex; flex-direction:column; gap:5px; position:relative}
.citycard:hover{border-color:var(--red)}
.citycard .nm{font-family:var(--f-display); font-weight:700; font-size:17px; color:var(--ink); display:flex; align-items:center; gap:7px}
.citycard .nm svg{width:11px; height:15px; color:var(--red); flex:none}
.citycard .pop{font-family:var(--f-mono); font-size:13px; font-variant-numeric:tabular-nums; color:var(--ink-2); font-weight:500}
.citycard .kind{font-family:var(--f-mono); font-size:10px; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-3)}
.citycard .rec{position:absolute; top:10px; right:10px; font-family:var(--f-mono); font-size:9px; letter-spacing:.08em; text-transform:uppercase; background:var(--red); color:#fff; padding:2px 6px; font-weight:600}
.citycard .partial{position:absolute; top:10px; right:10px; font-family:var(--f-mono); font-size:9px; letter-spacing:.08em; text-transform:uppercase; background:var(--black); color:#fff; padding:2px 6px; font-weight:600}
:root[data-theme="dark"] .citycard .partial, :root:not([data-theme="light"]) .citycard .partial{background:var(--ink-3); color:var(--black)}
@media (prefers-color-scheme: light){:root:not([data-theme="dark"]) .citycard .partial{background:var(--black); color:#fff}}
.citycard.edge{border-left:3px solid var(--ink-3)}

/* ---- city list ---- */
.citycols{columns:4; column-gap:26px}
@media (max-width:860px){.citycols{columns:2}}
@media (max-width:460px){.citycols{columns:1}}
.citycols a{display:block; padding:7px 0; font-size:15px; color:var(--ink-2); text-decoration:none; break-inside:avoid}
.citycols a:hover{color:var(--red)}
.citycols a::before{content:""; display:inline-block; width:8px; height:11px; margin-right:9px; background:var(--red);
  clip-path:polygon(50% 100%, 0 40%, 12% 12%, 50% 0, 88% 12%, 100% 40%);}

/* ---- hero lead form (Carrot 3-field pattern) ---- */
.leadbox{border:3px solid var(--red); background:var(--paper); box-shadow:var(--shadow)}
.leadbox .lh{background:var(--red); color:#fff; padding:16px 22px}
.leadbox .lh strong{display:block; font-family:var(--f-display); font-weight:800; font-size:21px; line-height:1.15}
.leadbox .lh span{font-size:13.5px; opacity:.92; display:block; margin-top:4px}
.leadbox .lb{padding:20px 22px 22px; display:flex; flex-direction:column; gap:13px}
.leadbox input{font:inherit; font-size:16.5px; padding:14px 14px; border:1.5px solid var(--line); background:var(--paper); color:var(--ink); width:100%}
.leadbox input:focus-visible{outline:2px solid var(--red); outline-offset:2px}
.leadbox .big{width:100%; justify-content:center; font-size:17.5px; padding:17px 20px; text-align:center}
.leadbox .micro{font-size:12.5px; color:var(--ink-3); line-height:1.45; text-align:center}
.stepnote{font-family:var(--f-mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3)}

/* ---- 3 step process ---- */
.three{display:grid; grid-template-columns:repeat(3,1fr); gap:20px; counter-reset:s}
@media (max-width:760px){.three{grid-template-columns:1fr}}
.tstep{background:var(--paper); border:1px solid var(--line); padding:26px 22px; text-align:center; display:flex; flex-direction:column; align-items:center; gap:11px; position:relative}
.tstep .circ{width:58px; height:58px; border-radius:50%; background:var(--red); color:#fff; display:flex; align-items:center; justify-content:center; font-family:var(--f-display); font-weight:800; font-size:24px}
.tstep h3{font-size:19px}
.tstep p{font-size:14.5px; color:var(--ink-2); line-height:1.5}

/* ---- review badge ---- */
.revbar{display:flex; align-items:center; gap:14px; flex-wrap:wrap; border:1px dashed var(--line); padding:14px 18px; background:var(--paper)}
.revbar .stars{color:var(--red); font-size:19px; letter-spacing:2px}
.revbar .txt{font-family:var(--f-mono); font-size:12.5px; color:var(--ink-3)}

/* ---- FAQ ---- */
.faq{border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{cursor:pointer; padding:18px 40px 18px 0; font-family:var(--f-display); font-weight:700; font-size:17.5px; list-style:none; position:relative}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+"; position:absolute; right:6px; top:15px; font-size:24px; color:var(--red); font-weight:400; line-height:1}
.faq details[open] summary::after{content:"\2212"}
.faq summary:focus-visible{outline:2px solid var(--red); outline-offset:2px}
.faq .ans{padding:0 40px 20px 0; color:var(--ink-2); font-size:15.5px; line-height:1.6}
.faq .ans p + p{margin-top:12px}

/* ---- sticky mobile call bar ---- */
.mobilecall{display:none}
@media (max-width:700px){
  .mobilecall{
    display:grid; grid-template-columns:1fr 1fr; gap:2px; position:fixed; left:0; right:0; bottom:0; z-index:60;
    background:var(--black); box-shadow:0 -4px 20px rgba(0,0,0,.25);
  }
  .mobilecall a{
    display:flex; align-items:center; justify-content:center; gap:8px; padding:15px 10px;
    font-family:var(--f-display); font-weight:700; font-size:16px; text-decoration:none; color:#fff;
  }
  .mobilecall a.call{background:var(--black)}
  .mobilecall a.form{background:var(--red)}
  .mobilecall svg{width:17px; height:17px}
  body{padding-bottom:58px}
}

.stack{display:flex; flex-direction:column; gap:20px}
.flow > * + *{margin-top:20px}
@media (prefers-reduced-motion:reduce){*{animation:none!important; transition:none!important}}

/* ---- theme additions ---- */
.bigphone{font-family:var(--f-display);font-weight:800;font-size:27px;color:var(--red);text-decoration:none}
.bigphone.light{color:#fff;font-size:32px}
.wbp-lead input{font:inherit;font-size:16.5px;padding:14px;border:1.5px solid var(--line);background:var(--paper);color:var(--ink);width:100%}
.wbp-lead input:focus-visible{outline:2px solid var(--red);outline-offset:2px}
.leadbox .micro{font-size:12.5px;color:var(--ink-3);line-height:1.45;text-align:center}
code{font-family:var(--f-mono);font-size:.92em;background:var(--paper-3);padding:1px 5px}

h1.as-h2{font-size:clamp(26px,3.6vw,40px);font-weight:800}
.inlinephone{color:var(--red); font-weight:600; white-space:nowrap}
.bigphone{font-family:var(--f-display); font-weight:800; font-size:27px; color:var(--red); text-decoration:none}
.bigphone.light{color:#fff}
.bigphone.xl{font-size:34px}