:root{
  --brand:#1F5D3A; --brand-dark:#16442A; --brand-darker:#0E2C1B;
  --accent:#E8630A; --accent-dark:#C4530A; --accent-light:#FF8A3D;
  --ink:#1A1A1A; --ink-soft:#4a5a4a;
  --bg:#ffffff; --bg-alt:#F5F1EA; --line:#e3e3da;
  --max:1160px; --radius:10px; --radius-sm:6px;
  --shadow-sm:0 2px 6px rgba(26,26,26,.08);
  --shadow-md:0 8px 24px rgba(26,26,26,.12);
  --shadow-lg:0 20px 50px rgba(26,26,26,.22);
  --font-head: "Arial Narrow", "Helvetica Neue", Arial, sans-serif;
  --font-body: Arial, Helvetica, sans-serif;
  /* Risk-tier / status colors — fixed portfolio-wide, NOT part of this
     hub's brand palette (see component-library.md). Never reskin these. */
  --risk-low:#2E7D32; --risk-moderate:#B8860B; --risk-emergency:#C0392B;
  --status-live:#2E7D32;
}
*{box-sizing:border-box}
/* Pre-existing bug caught while building the Cost Calculator (shares this
   markup pattern with the Symptom Wizard): .btn{display:inline-block} has
   the same CSS specificity as the browser's own [hidden]{display:none}
   default, so a <button hidden class="btn ..."> (e.g. the wizard/calculator
   "Back" button on step 1) was rendering visible despite the hidden
   attribute. This rule wins on specificity and makes [hidden] authoritative
   sitewide, matching what every other hidden element already did correctly. */
[hidden]{display:none!important}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
body{margin:0;font-family:var(--font-body);color:var(--ink);line-height:1.7;background:var(--bg)}
/* Roswell (slot 1): headings keep the legacy uppercase condensed-sans treatment so the intent survives the Oswald -> Arial Narrow swap (03-structure.md, Retrofit design tokens). */
h1,h2,h3{font-family:var(--font-head);font-weight:700;line-height:1.18;letter-spacing:.02em;text-transform:uppercase;margin:0 0 .5em}
h1{font-size:clamp(2.2rem,5vw,3.6rem);font-weight:700}
h2{font-size:clamp(1.5rem,3.2vw,2.3rem)}
h3{font-size:1.1rem;font-weight:700;font-family:var(--font-body);text-transform:none;letter-spacing:0}
p{margin:0 0 1em}
a{color:var(--brand)}
.wrap{max-width:var(--max);margin:0 auto;padding:0 20px}
img{max-width:100%;display:block}

.btn{display:inline-block;padding:.8em 1.5em;border-radius:var(--radius-sm);text-decoration:none;font-weight:700;font-family:var(--font-head);letter-spacing:.01em;font-size:.95rem;border:2px solid transparent;margin:.25em .5em .25em 0;box-shadow:var(--shadow-sm);transition:transform .15s ease,box-shadow .15s ease,background-color .15s ease}
.btn:hover{transform:translateY(-2px);box-shadow:var(--shadow-md)}
.btn:active{transform:translateY(0)}
.btn--lg{padding:1.05em 2em;font-size:1.08rem}
.btn--orange{background:linear-gradient(180deg,var(--accent-light),var(--accent));color:#fff}
.btn--orange:hover{background:linear-gradient(180deg,var(--accent),var(--accent-dark));color:#fff}
.btn--green{background:linear-gradient(180deg,var(--brand),var(--brand-dark));color:#fff}
.btn--green:hover{background:linear-gradient(180deg,var(--brand-dark),var(--brand-darker))}
.btn--outline{background:transparent;color:var(--brand);border-color:var(--brand);box-shadow:none}
.btn--outline:hover{background:var(--brand);color:#fff}
.btn--ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.6);box-shadow:none}
.btn--ghost:hover{background:rgba(255,255,255,.12);border-color:#fff}

.trust-bar{background:var(--brand-darker);color:#fff;padding:8px 20px;text-align:center;font-size:.78rem;font-weight:600;letter-spacing:.02em}
.trust-bar .wrap{display:flex;justify-content:center;flex-wrap:nowrap;white-space:nowrap;overflow:hidden}
/* Josh, 2026-09-27: the trust strip above the header is ONE line, always, and lists benefits / value props only - never the business or place name. Mobile shows the first two badges. */
.trust-bar span{padding:0 14px;position:relative}
.trust-bar span+span::before{content:"";position:absolute;left:0;top:.15em;bottom:.15em;width:1px;background:rgba(255,255,255,.25)}
.site-header{background:#fff;border-bottom:1px solid var(--line);position:sticky;top:0;z-index:20;box-shadow:0 2px 10px rgba(26,26,26,.06)}
.nav{display:flex;align-items:center;justify-content:flex-start;padding:12px 20px;gap:16px}
.nav__logo{font-family:var(--font-head);font-weight:700;font-size:1.25rem;line-height:1.15;color:var(--brand-dark);text-decoration:none;display:flex;align-items:center;gap:10px;white-space:nowrap;flex-shrink:0}
/* Josh, 2026-09-27: the header is one row, always. The wordmark never wraps to a second line; below 1120px the links collapse into the hamburger before anything can crowd it. */
.nav__logo-icon{width:42px;height:42px;display:block;flex-shrink:0;border-radius:50%}
.nav__links{list-style:none;display:flex;gap:18px;margin:0 0 0 auto;padding:0;align-items:center}
.nav__links>li{position:relative}
.nav__links a{color:var(--ink);text-decoration:none;font-weight:600;font-size:.95rem;padding:6px 0;border-bottom:2px solid transparent;white-space:nowrap}
.nav__links a:hover{color:var(--brand)}
.nav__links a.is-active{color:var(--brand);border-bottom-color:var(--accent)}
.nav__links a.btn{color:#fff;border-bottom:none}
.nav__toggle{display:none;background:none;border:none;font-size:1.5rem;cursor:pointer;color:var(--brand-dark)}
.nav__cta{display:flex;align-items:center;gap:10px}
.nav__cta .btn{white-space:nowrap;margin:0}
.hero__cta{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-top:1.2em}

.has-dropdown{display:flex;align-items:center}
.dropdown-caret{font-size:.7em;margin-left:.2em}
.dropdown{list-style:none;margin:0;padding:8px;position:absolute;top:100%;left:0;background:#fff;border:1px solid var(--line);border-radius:var(--radius-sm);box-shadow:var(--shadow-md);min-width:190px;display:none;z-index:30}
.has-dropdown:hover .dropdown,.has-dropdown:focus-within .dropdown{display:block}
.dropdown li a{display:block;padding:9px 12px;border-bottom:none;border-radius:var(--radius-sm);white-space:nowrap}
.dropdown li a:hover{background:var(--bg-alt)}

.hero{position:relative;background:linear-gradient(150deg,var(--brand-darker) 0%,var(--brand-dark) 55%,#1a4d2e 100%);color:#fff;padding:64px 0;overflow:hidden}
.hero::before{content:"";position:absolute;inset:0;background-image:radial-gradient(circle at 88% 15%,rgba(232,99,10,.18),transparent 45%),radial-gradient(circle at 8% 90%,rgba(255,255,255,.05),transparent 40%);pointer-events:none}
.hero .wrap{position:relative;z-index:1}
.hero h1{color:#fff}
.hero p{color:rgba(255,255,255,.88)}
.hero--split .hero__split{display:grid;grid-template-columns:1.1fr .9fr;gap:40px;align-items:center}
/* Full-bleed photo hero — replaces the flat-gradient background and its
   decorative radial dots with a real photo, dimmed by a directional scrim
   (darkest under the text on the left, fading toward the photo's own
   detail on the right) so the overlaid text/CTA stay readable at AA
   contrast without literally blurring the photo — matches the reference
   design Josh shared, which dims/fades rather than blurs. The scrim's base
   color is --brand-darker, so every hub's photo hero is tinted with that
   hub's own palette instead of one portfolio-wide black, keeping the
   same per-hub visual-diversity property the flat hero had. */
.hero--photo{background-size:cover;background-position:center;padding:120px 0 90px;min-height:560px;display:flex;align-items:center}
.hero--photo::before{background-image:none;background:linear-gradient(100deg,var(--brand-darker) 0%,color-mix(in srgb,var(--brand-darker) 90%,transparent) 30%,color-mix(in srgb,var(--brand-darker) 62%,transparent) 55%,color-mix(in srgb,var(--brand-darker) 28%,transparent) 78%,color-mix(in srgb,var(--brand-darker) 8%,transparent) 100%)}
.hero__photo-inner{position:relative;z-index:1;width:100%}
.hero__photo-inner>*{max-width:640px}
/* Josh, 2026-09-27: hero copy left-aligned at the container edge (reference: losangelesconcreteleveling.com), not a centered column. The 640px measure applies to each block, not the wrapper. */
.hero__eyebrow{text-transform:uppercase;letter-spacing:.08em;color:var(--accent-light);font-weight:700;font-size:.85rem;font-family:var(--font-head)}
.hero__checklist{list-style:none;padding:0;margin:1em 0}
.hero__checklist li{display:flex;align-items:flex-start;gap:.55em;margin-bottom:.5em;font-weight:600;line-height:1.5}
.hero__checklist li>span{flex:1 1 auto;min-width:0}
.hero__checklist li::before{content:"\2713";flex:0 0 auto;margin-top:calc(.75em - .55em);color:var(--brand-darker);background:var(--accent-light);width:1.1em;height:1.1em;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:1em;line-height:1;font-weight:700}
/* Josh, 2026-09-27: checklist icons sit on the same line as the text (flex row, icon centred on the first line), never floating above it. */
.hero__inner p{max-width:65ch}
.hero__area-link{margin:.9em 0 0}
.hero__area-link a{color:rgba(255,255,255,.85);font-size:.92rem;font-weight:600;text-decoration:underline;text-underline-offset:3px}
.hero__area-link a:hover{color:#fff}

.image-placeholder{width:100%;min-height:280px;border-radius:var(--radius);box-shadow:var(--shadow-lg);background:linear-gradient(150deg,var(--brand),var(--brand-dark));display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;color:#fff;text-align:center;padding:24px;border:2px dashed rgba(255,255,255,.35)}
.image-placeholder__icon svg{width:40px;height:40px;color:var(--accent-light)}
.image-placeholder__label{font-family:var(--font-head);letter-spacing:.01em;font-size:.95rem;max-width:26ch}
.image-placeholder--tall{min-height:520px;border:5px solid rgba(255,255,255,.12)}
.photo-grid{display:grid;gap:16px;margin:0 0 1.5em}
.photo-grid--2{grid-template-columns:1fr 1fr}
.photo-grid--3{grid-template-columns:1fr 1fr 1fr}
.photo-grid__item{margin:0}
.photo-grid__img{width:100%;height:260px;object-fit:cover;display:block;border-radius:var(--radius);box-shadow:var(--shadow-md)}
.photo-grid--2 .photo-grid__img{height:320px}
.image-band{padding:18px 0}
.image-band .image-placeholder{box-shadow:var(--shadow-md);min-height:220px}
.hero__photo{align-self:stretch}
.photo-img{width:100%;display:block;height:280px;object-fit:cover;border-radius:var(--radius);box-shadow:var(--shadow-lg)}
.photo-img.image-placeholder--tall{height:520px;border:5px solid rgba(255,255,255,.12)}
.image-band .photo-img{box-shadow:var(--shadow-md);height:320px}
.about-photo-section .photo-img{height:420px}

.section{padding:56px 0}
.section--alt{background:var(--bg-alt)}
.section__lead{max-width:65ch}
.section>.wrap>h2,.cta-band>.wrap>h2{position:relative;padding-bottom:16px}
.section>.wrap>h2::after,.cta-band>.wrap>h2::after{content:"";position:absolute;left:0;bottom:0;width:56px;height:4px;background:var(--accent);border-radius:2px}
/* Body-copy mini-header, per Josh's Sept 2026 redesign request (modeled on
   losangelesconcreteleveling.com's "eyebrow" kicker above each section
   heading). Uses --accent-dark rather than hero__eyebrow's --accent-light,
   since this sits on light section backgrounds, not the dark hero photo. */
.section__eyebrow{text-transform:uppercase;letter-spacing:.08em;color:var(--accent-dark);font-weight:700;font-size:.85rem;font-family:var(--font-head);margin:0 0 .5em}
/* De-inlined CTA convention (same redesign): a button that follows body
   copy gets its own spaced line instead of sitting inside the paragraph's
   closing tag, which is what was reading as "buttons jammed against the
   text." flex so a two-button pair (e.g. Calculator + Cost Guide) wraps
   cleanly with even gaps instead of relying on .btn's own margin alone. */
.section__cta{margin:1.4em 0 0;display:flex;flex-wrap:wrap;gap:10px;align-items:center}
/* Reusable checkmark/numbered trust-signal list for body sections (the
   hero already has its own .hero__checklist on dark backgrounds; this is
   the light-background equivalent, generalized so any section can use it,
   not just the hero). */
.checklist{list-style:none;padding:0;margin:1.1em 0}
.checklist li{display:flex;align-items:flex-start;gap:.6em;margin-bottom:.7em;font-weight:400;color:var(--ink);line-height:1.6}
.checklist li>span{flex:1 1 auto;min-width:0}
.checklist li strong{color:var(--brand-dark)}
/* Josh, 2026-09-27: each item is ONE span after the badge, so a bold lead-in and its sentence flow as prose (a bare strong + text node became two flex columns). Body weight regular, lead-in bold. */
.checklist li::before{content:"\2713";flex:0 0 auto;margin-top:calc(.8em - .6em);color:#fff;background:var(--brand);width:1.2em;height:1.2em;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:1em;line-height:1;font-weight:700}
.checklist--numbered{counter-reset:cl}
.checklist--numbered li::before{counter-increment:cl;content:counter(cl);background:var(--accent)}
/* Generalized version of the About page's split-image layout (previously
   used only there) — now the standard way to pair body copy with a
   contained, properly-proportioned photo instead of a full-bleed
   image-band, per the same redesign. */
.split__info{align-self:center;min-width:0}
.split>*{min-width:0}
.split__form{align-self:center}

.grid{display:grid;gap:22px}
.grid--1{grid-template-columns:1fr}
.grid--2{grid-template-columns:repeat(2,1fr)}
.grid--3{grid-template-columns:repeat(3,1fr)}
.card{border-top:4px solid var(--accent);background:#fff;padding:26px 22px;border-radius:var(--radius);box-shadow:var(--shadow-sm);transition:transform .18s ease,box-shadow .18s ease}
/* Josh, 2026-09-27: every service card carries its own photo of THAT service (reference: losangelesconcreteleveling.com). */
.card--media{padding:0;overflow:hidden;border-top:none}
.card--media .card__photo{width:100%;height:220px;object-fit:cover;display:block}
.card--media .card__body{padding:22px 22px 26px;border-top:4px solid var(--accent)}
.card--media h3{margin-top:0}
.card:hover{transform:translateY(-4px);box-shadow:var(--shadow-md)}
.card h3{color:var(--brand-dark)}
.card--crosslink{border-top-color:var(--brand);max-width:70ch}
.card__icon{width:48px;height:48px;border-radius:50%;background:linear-gradient(150deg,var(--brand),var(--brand-dark));display:flex;align-items:center;justify-content:center;margin-bottom:14px;flex-shrink:0}
.card__icon svg{width:24px;height:24px;color:var(--accent-light)}

.team-grid{gap:28px}
.team-card{background:#fff;border-radius:var(--radius);padding:30px 26px;box-shadow:var(--shadow-sm);text-align:center;transition:transform .18s ease,box-shadow .18s ease}
.team-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-md)}
.team-card__avatar{width:84px;height:84px;border-radius:50%;background:linear-gradient(150deg,var(--brand),var(--brand-darker));color:var(--accent-light);display:flex;align-items:center;justify-content:center;margin:0 auto 16px;font-family:var(--font-head);font-weight:700;font-size:1.6rem;border:3px solid var(--accent)}
.team-card__name{color:var(--brand-dark);margin-bottom:2px}
.team-card__role{color:var(--accent-dark);font-weight:600;font-size:.92rem;text-transform:uppercase;letter-spacing:.03em;margin-bottom:12px}
.team-card__bio{text-align:left;color:var(--ink-soft)}

.linklist{list-style:none;display:grid;grid-template-columns:repeat(3,1fr);gap:12px;padding:0;margin:1em 0}
.linklist li a{display:block;border:1px solid var(--line);border-radius:var(--radius-sm);padding:13px 16px;text-decoration:none;color:var(--ink);background:#fff;font-weight:600;transition:border-color .15s ease,box-shadow .15s ease,transform .15s ease}
.linklist li a:hover{border-color:var(--brand);box-shadow:var(--shadow-sm);transform:translateY(-2px)}
.linklist--areas .area-link{display:flex;justify-content:space-between;gap:8px}
.area-link__city{color:var(--ink-soft);font-weight:400}

.faq .faq-item{border-left:4px solid var(--accent);padding:16px 20px;margin-bottom:16px;background:#fff;border-radius:0 var(--radius) var(--radius) 0;box-shadow:var(--shadow-sm)}
.faq .faq-item h3{color:var(--brand-dark)}

.cta-band{position:relative;background:linear-gradient(150deg,var(--brand-darker),var(--brand-dark) 65%);color:#fff;padding:56px 0;overflow:hidden}
.cta-band::before{content:"";position:absolute;inset:0;background-image:radial-gradient(circle at 90% 20%,rgba(232,99,10,.2),transparent 45%);pointer-events:none}
.cta-band .wrap{position:relative;z-index:1}
.cta-band h2{color:#fff}
.cta-band>.wrap>h2::after{background:var(--accent-light)}
.cta-band__btns{margin-top:1.2em}
.cta-band .btn--green{background:linear-gradient(180deg,var(--accent-light),var(--accent));color:#fff}
.cta-band .btn--green:hover{background:linear-gradient(180deg,var(--accent),var(--accent-dark));color:#fff}

.cost-table{width:100%;border-collapse:separate;border-spacing:0;margin:1em 0;background:#fff;border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow-sm)}
.cost-table th,.cost-table td{border-bottom:1px solid var(--line);padding:12px 16px;text-align:left}
.cost-table th{background:var(--brand-dark);color:#fff;font-family:var(--font-head);font-size:.9rem;letter-spacing:.02em}
.cost-table tr:last-child td{border-bottom:none}
.cost-table td{vertical-align:top}
/* Permits guide (2026-09-28): the 4-column city table scrolls sideways inside its own box on phones instead of widening the page. */
.table-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:1em 0}
.table-scroll .cost-table{margin:0;min-width:720px}
.permit-table td,.permit-table th{font-size:.92rem;line-height:1.5}
.permit-table__sub{display:block;font-weight:400;font-size:.85em;color:var(--ink-soft)}
.permit-source{font-size:.88rem;color:var(--ink-soft)}

.split{display:grid;grid-template-columns:60fr 40fr;gap:32px}
.split--reverse{grid-template-columns:40fr 60fr}
.form-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:28px;box-shadow:var(--shadow-md);border-top:4px solid var(--accent)}
.form-card--green{background:#eef6f1;border-color:#cfe4d6;border-top-color:var(--brand)}
.field{margin-bottom:14px;display:flex;flex-direction:column;gap:6px}
.field label{font-weight:600;font-size:.9rem;color:var(--brand-dark)}
.field input,.field textarea{padding:11px 12px;border:1.5px solid var(--line);border-radius:var(--radius-sm);font-family:inherit;font-size:1rem;transition:border-color .15s ease,box-shadow .15s ease}
.field input:focus,.field textarea:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 3px rgba(31,93,58,.12)}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.radio-row{display:flex;flex-wrap:wrap;gap:14px}
.radio-option{flex-direction:row!important;align-items:center;gap:6px!important;font-weight:500!important;color:var(--ink)!important;font-size:.95rem}
.radio-option input{width:auto;padding:0}

.footer-nap{list-style:none;padding:0;margin:0}
.footer-nap li{margin-bottom:.4em}
.footer-nap a{color:#fff;font-weight:600}
.contact-nap{list-style:none;padding:0;margin:0}
.contact-nap li{margin-bottom:.4em}
.contact-nap a{color:var(--brand);font-weight:600;overflow-wrap:anywhere}

.site-footer{background:linear-gradient(150deg,#0c1710,var(--brand-darker) 70%);color:#c9d1cb;padding:56px 0 0;border-top:4px solid var(--accent)}
.site-footer a{color:#c9d1cb;text-decoration:none}
.site-footer a:hover{color:#fff;text-decoration:underline}
.site-footer h3{color:#fff;font-size:.85rem;text-transform:uppercase;letter-spacing:.06em;font-family:var(--font-head);margin-bottom:1em}
.footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:24px}
.footer-grid ul{list-style:none;padding:0;margin:0}
.footer-grid ul li{margin-bottom:.5em}
.footer-brand__icon-wrap{width:52px;height:52px;margin-bottom:12px;border-radius:50%;background:#F5F1EA;display:flex;align-items:center;justify-content:center}
.footer-brand__icon{width:40px;height:40px;display:block;border-radius:50%}
.footer-brand__name{font-family:var(--font-head);font-size:1.2rem;color:#fff}
/* Footer stock-photo disclaimer — new this build, kept deliberately
   minimal/generic per Josh's call (2026-09-22); see [[component-library]]. */
.footer-disclaimer{font-size:.78rem;color:#8a9990;max-width:70ch;margin:0 0 10px}
.footer-bottom{border-top:1px solid rgba(255,255,255,.1);margin-top:32px;padding:18px 0;color:#8a9990;font-size:.85rem}
.footer-bottom .wrap{max-width:var(--max)}

.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

.area-check{background:var(--bg-alt);padding:48px 20px;border-top:1px solid var(--line);border-bottom:4px solid var(--accent);scroll-margin-top:88px}
.area-check__inner{max-width:720px;margin:0 auto;text-align:center}
.area-check__inner h2{margin-bottom:6px}
.area-check__inner>p{color:var(--ink-soft);margin:0 0 20px}
.area-check__form{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
.area-check__form input{flex:1 1 260px;min-width:0;padding:12px 16px;border:1.5px solid var(--line);border-radius:var(--radius-sm);font-family:var(--font-body);font-size:1rem;transition:border-color .15s ease,box-shadow .15s ease}
.area-check__form input:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 3px rgba(31,93,58,.12)}
.area-check__form button{flex:0 0 auto}
.area-check__result{margin-top:20px;padding:18px 22px;border-radius:var(--radius);text-align:left;background:#fff;border:1px solid var(--line);box-shadow:var(--shadow-sm)}
.area-check__result--yes{border-left:4px solid var(--brand)}
.area-check__result--no{border-left:4px solid var(--accent)}
.area-check__result h3{margin:0 0 6px;font-family:var(--font-head);font-size:1rem;letter-spacing:.01em;color:var(--brand-dark)}
.area-check__result p{margin:0 0 14px;color:var(--ink-soft)}
.area-check__result .btn{margin:0 8px 8px 0}

/* Symptom Wizard (Tree Diagnosis tool) — new this build, PILOT hub.
   See [[component-library]] for the markup spec and scoring algorithm. */
.wizard{max-width:760px;margin:0 auto}
.wizard__progress{margin-bottom:28px}
.wizard__progress-label{font-family:var(--font-head);font-weight:700;color:var(--brand-dark);margin-bottom:8px;font-size:.9rem;text-transform:uppercase;letter-spacing:.04em}
.progress-bar{height:8px;background:var(--line);border-radius:999px;overflow:hidden}
.progress-bar__fill{height:100%;background:linear-gradient(90deg,var(--accent),var(--accent-light));border-radius:999px;transition:width .3s ease}
.wizard__step h2{margin-bottom:.2em}
.wizard__sub{color:var(--ink-soft);margin-bottom:1.2em}
.wizard__options{margin-bottom:1.5em}
.wizard__option{display:flex;flex-direction:column;align-items:flex-start;gap:6px;text-align:left;background:#fff;border:1.5px solid var(--line);border-radius:var(--radius);padding:18px 20px;cursor:pointer;font-family:inherit;transition:border-color .15s ease,box-shadow .15s ease,transform .15s ease}
.wizard__option:hover{border-color:var(--brand);box-shadow:var(--shadow-sm);transform:translateY(-2px)}
.wizard__option[aria-pressed="true"]{border-color:var(--accent);border-width:2px;background:var(--bg-alt);box-shadow:var(--shadow-sm)}
.wizard__option-icon{width:32px;height:32px;color:var(--brand)}
.wizard__option-icon svg{width:100%;height:100%}
.wizard__option-label{font-weight:700;font-family:var(--font-head);color:var(--brand-dark)}
.wizard__option-sub{font-size:.85rem;color:var(--ink-soft)}
.wizard__nav{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-top:1.5em}
.wizard__nav .btn--green:disabled,.wizard__nav .btn--green[disabled]{opacity:.5;cursor:not-allowed;transform:none;box-shadow:none}
.wizard__result{text-align:center;max-width:600px;margin:0 auto}
.wizard__result-icon{display:inline-flex;width:56px;height:56px;color:var(--status-live);margin-bottom:10px}
.wizard__result-icon svg{width:100%;height:100%}
.risk-badge{display:inline-block;padding:.4em 1.1em;border-radius:999px;font-family:var(--font-head);font-weight:700;font-size:.85rem;letter-spacing:.03em;text-transform:uppercase;color:#fff;margin:.4em 0 1em}
.risk-badge--low{background:var(--risk-low)}
.risk-badge--moderate{background:var(--risk-moderate)}
.risk-badge--emergency{background:var(--risk-emergency)}
.wizard__result-cta{margin:1.2em 0}
.wizard__noscript{background:var(--bg-alt);border:1px solid var(--line);border-radius:var(--radius);padding:20px;text-align:center}
.calc-result__price{font-family:var(--font-head);font-weight:700;font-size:clamp(1.8rem,4vw,2.4rem);color:var(--brand-dark);margin:.2em 0}
.calc-result__disclaimer{font-size:.85rem;color:var(--ink-soft)}

@media (max-width:1120px){
  .nav__links{position:absolute;top:100%;left:0;right:0;background:#fff;flex-direction:column;align-items:flex-start;padding:16px 20px;display:none;border-bottom:1px solid var(--line)}
  .nav__links.is-open{display:flex}
  .nav__toggle{display:block}
  .nav__cta{margin-left:auto}
  .nav__cta .btn{text-align:center;line-height:1.15}
  .hero--split .hero__split{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:1fr 1fr}
  .has-dropdown{flex-direction:column;align-items:flex-start}
  .dropdown{position:static;display:block;box-shadow:none;border:none;padding:0 0 0 12px;min-width:0}
  .has-dropdown:not(.is-open) .dropdown{display:none}
}
@media (max-width:860px){
  .trust-bar span:nth-child(n+4){display:none}  /* three badges on tablets so the strip stays one line */
}
@media (max-width:600px){
  .grid--2,.grid--3{grid-template-columns:1fr}
  .photo-grid--2,.photo-grid--3{grid-template-columns:1fr}
  .photo-grid__img,.photo-grid--2 .photo-grid__img{height:220px}
  .linklist{grid-template-columns:1fr}
  .split,.split--reverse{grid-template-columns:1fr}
  .form-row{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:1fr}
  .trust-bar span:nth-child(n+3){display:none}
  .trust-bar{font-size:.72rem;padding:7px 10px}
  .trust-bar span{padding:0 10px}
  .area-check__form{flex-direction:column}
  .area-check__form input,.area-check__form button{width:100%;flex:0 0 auto}
  /* Josh, 2026-09-27 (v2, matching the live Roswell header): mobile header = logo mark + name, hamburger, "Call Now". One row, name never wraps (font scales with viewport), no Estimate button. */
  .nav{flex-wrap:nowrap;gap:8px}
  .nav__logo{order:1;font-size:clamp(.82rem,3.4vw,1.05rem);gap:8px;min-width:0}
  .nav__logo-icon{width:36px;height:36px}
  .nav__toggle{order:2;margin-left:auto;padding:4px 6px;line-height:1}
  .nav__cta{order:3;gap:0}
  .nav__cta .btn--green{display:none}
  .nav__cta .btn{padding:.65em .95em;font-size:.82rem;text-transform:uppercase;letter-spacing:.02em}
  .hero--photo{min-height:0;padding:70px 0 50px}
  .hero--photo::before{background:linear-gradient(180deg,color-mix(in srgb,var(--brand-darker) 55%,transparent) 0%,color-mix(in srgb,var(--brand-darker) 80%,transparent) 45%,var(--brand-darker) 100%)}
}
@media (max-width:340px){
  /* very small phones (iPhone SE 1st gen class): tighten the header so the one-row rule still holds */
  .nav{padding:10px 10px;gap:6px}
  .nav__logo{font-size:.76rem;gap:6px}
  .nav__logo-icon{width:32px;height:32px}
  .nav__cta .btn{padding:.6em .7em;font-size:.76rem}
  .nav__toggle{padding:4px 2px;font-size:1.3rem}
  .trust-bar{font-size:.66rem}
  .trust-bar span{padding:0 7px}
}