/* My Jacksonville Roofer - Concept A "Storm-Ready" stylesheet.
   FRESH REBUILD transcribed from the mockup's own code:
   hidden_files/qa/fidelity-round4/mockup-fresh/index.html, third style block,
   from the "SITE MOCKUP (shared)" comment to the end of the style tag.
   Review shell, frames, site-structure view and the .hidden rule are review-tool
   code and are not transcribed. Concept B and C variant rules that share the
   transcribed blocks are kept verbatim; the live site uses Concept A only.
   Adaptations A1-A6 (frame mechanics to real responsive site, plus live-only
   class contracts) are marked where they apply. */

/* ============ Global base (mockup third style block) + Adaptation A5 ============ */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body{margin:0;background:#0a1728}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

/* ============ Adaptation A2: header switching (live DOM carries both headers) ============ */
.head-mobile{display:none}
@media (max-width:780px){ .head-desktop{display:none} .head-mobile{display:block} }

/* ============ SITE MOCKUP (shared) ============ */
.site{ font-family:"Barlow",system-ui,sans-serif; background:var(--bg); color:var(--ink); font-size:16px; line-height:1.55; }
.site a{ color:inherit; }
.site h1,.site h2,.site h3{ line-height:1.15; margin:0; }
.site p{ margin:0; }
.site img{ display:block; max-width:100%; }
/* Concept A - Storm-Ready */
.c-a{ --bg:#0a1728; --surface:#122740; --surface2:#0d1f36; --ink:#f0f5fb; --muted:#a7bdd4; --line:#274362;
  --brand:#12325e; --brand2:#ff7a1a; --accent:#ff7a1a; --accent-ink:#1a1005; --header-bg:#071222; --topbar-bg:#ff7a1a; --topbar-ink:#221100; --sticky-bg:#050e1a;
  --chip:#17334f; --faq-bg:#102741; --footer-bg:#060f1d; --hero-ink:#ffffff; --card-ink:#f0f5fb; }
/* Concept B - Local Expert */
.c-b{ --bg:#ffffff; --surface:#eef4fa; --surface2:#f7fafc; --ink:#152c42; --muted:#50677c; --line:#d3e0ec;
  --brand:#0b5fa5; --brand2:#0b5fa5; --accent:#f96d00; --accent-ink:#ffffff; --header-bg:#ffffff; --topbar-bg:#0b3f6e; --topbar-ink:#ffffff; --sticky-bg:#0b3f6e;
  --chip:#e3eef8; --faq-bg:#f2f7fc; --footer-bg:#0d2c47; --hero-ink:#ffffff; --card-ink:#152c42; }
/* Concept C - Cost Guide First */
.c-c{ --bg:#faf6ef; --surface:#ffffff; --surface2:#f3ecdd; --ink:#2e2a23; --muted:#6f6455; --line:#e3d9c4;
  --brand:#1e7a4f; --brand2:#1e7a4f; --accent:#f96d00; --accent-ink:#ffffff; --header-bg:#fffdf8; --topbar-bg:#2e2a23; --topbar-ink:#f5eeda; --sticky-bg:#2e2a23;
  --chip:#eee5d0; --faq-bg:#ffffff; --footer-bg:#2e2a23; --hero-ink:#ffffff; --card-ink:#2e2a23; }
.c-a .site-h{ font-family:"Barlow Condensed","Barlow",sans-serif; text-transform:uppercase; letter-spacing:.015em; font-weight:700; }
.c-b .site-h{ font-family:"Barlow",sans-serif; font-weight:800; letter-spacing:-.015em; }
.c-c .site-h{ font-family:"Fraunces",Georgia,serif; font-weight:700; letter-spacing:-.01em; }
/* Header */
.topbar{ background:var(--topbar-bg); color:var(--topbar-ink); font-size:13.5px; font-weight:600; }
.topbar-in{ max-width:1180px; margin:0 auto; padding:7px 20px; display:flex; gap:10px 26px; align-items:center; flex-wrap:wrap; }
.topbar .tb-phone{ font-size:17px; font-weight:800; text-decoration:none; letter-spacing:.01em; }
.topbar .tb-mid{ opacity:.92; }
.topbar .tb-hours{ margin-left:auto; font-weight:700; }
.mainhead{ position:sticky; top:0; z-index:40; background:var(--header-bg); border-bottom:1px solid var(--line); }
.c-a .mainhead{ box-shadow:0 6px 22px rgba(0,0,0,.35); }
.c-b .mainhead,.c-c .mainhead{ box-shadow:0 4px 18px rgba(20,40,60,.08); }
.mainhead-in{ max-width:1180px; margin:0 auto; padding:10px 20px; display:flex; align-items:center; gap:22px; }
.logo{ display:flex; align-items:center; gap:10px; text-decoration:none; flex:0 0 auto; }
.logo-mark{ width:42px; height:42px; flex:0 0 42px; }
.logo-name{ font-weight:800; font-size:19px; line-height:1.02; letter-spacing:-.01em; }
.logo-name small{ display:block; font-size:10.5px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); margin-top:2px; }
.navlinks{ display:flex; align-items:center; gap:4px; margin-left:auto; }
.navlinks > a, .navitem > button{ font:600 15.5px "Barlow",sans-serif; color:var(--ink); background:none; border:0; padding:9px 12px; cursor:pointer; text-decoration:none; border-radius:7px; display:inline-flex; align-items:center; gap:6px; white-space:nowrap; }
.navlinks > a:hover, .navitem > button:hover{ background:var(--surface); }
.navitem{ position:relative; }
.navitem > button .chev{ transition:transform .18s; }
.navitem.open > button .chev{ transform:rotate(180deg); }
.dropdown{ position:absolute; top:calc(100% + 8px); left:50%; transform:translate(-50%,6px); background:var(--surface2); border:1px solid var(--line); border-radius:14px; box-shadow:0 24px 50px rgba(5,15,30,.28); padding:20px 22px; opacity:0; visibility:hidden; transition:.18s; z-index:50; }
.c-b .dropdown,.c-c .dropdown{ background:#ffffff; }
.navitem.open .dropdown{ opacity:1; visibility:visible; transform:translate(-50%,0); }
.dropdown.services{ width:min(660px,94cqw); }
.dropdown.areas{ width:340px; left:auto; right:0; transform:translate(0,6px); }
.navitem.open .dropdown.areas{ transform:translate(0,0); }
.dd-grid{ display:grid; grid-template-columns:1fr 1fr 1fr; gap:16px 24px; }
.dd-grid.two{ grid-template-columns:1fr 1fr; }
.dd-group h4{ margin:0 0 7px; font-size:11.5px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:var(--brand2); }
.c-b .dd-group h4,.c-c .dd-group h4{ color:var(--brand); }
.dd-group a{ display:block; padding:3.5px 0; font-size:14.5px; font-weight:500; text-decoration:none; color:var(--ink); }
.dd-group a:hover{ color:var(--accent); text-decoration:underline; }
.dd-foot{ margin-top:16px; padding-top:13px; border-top:1px solid var(--line); font-size:13.5px; color:var(--muted); display:flex; justify-content:space-between; gap:14px; flex-wrap:wrap; }
.dd-foot a{ color:var(--accent); font-weight:700; text-decoration:none; }
.callbtn{ margin-left:14px; background:var(--accent); color:var(--accent-ink); font:800 16px "Barlow",sans-serif; text-decoration:none; padding:11px 18px; border-radius:9px; display:inline-flex; align-items:center; gap:8px; white-space:nowrap; box-shadow:0 6px 16px rgba(249,109,0,.35); }
.callbtn:hover{ filter:brightness(1.07); }
.hambtn{ display:none; margin-left:auto; background:var(--surface); border:1px solid var(--line); color:var(--ink); width:44px; height:44px; border-radius:9px; cursor:pointer; align-items:center; justify-content:center; }
.mobilemenu{ display:none; }
/* Mobile header variant (inside phone frame) */
.m-topbar{ background:var(--topbar-bg); color:var(--topbar-ink); padding:7px 14px; display:flex; align-items:center; justify-content:space-between; gap:4px 10px; font-size:12.5px; font-weight:700; flex-wrap:wrap; }
.m-topbar .m-hours{ flex:1 1 100%; font-size:11.5px; font-weight:600; opacity:.92; }
.m-topbar a{ color:inherit; text-decoration:none; font-size:15px; font-weight:800; }
.m-head{ position:relative; z-index:40; background:var(--header-bg); border-bottom:1px solid var(--line); padding:9px 14px; display:flex; align-items:center; gap:10px; }
.m-head .logo-name{ font-size:16.5px; }
.m-head .logo-mark{ width:36px; height:36px; flex-basis:36px; }
.m-head .hambtn{ display:inline-flex; }
.m-menu{ position:absolute; top:100%; left:0; right:0; background:var(--header-bg); border-bottom:2px solid var(--line); box-shadow:0 26px 40px rgba(5,15,30,.3); display:none; z-index:39; }
.m-menu.open{ display:block; max-height:560px; overflow-y:auto; }
.m-menu nav{ padding:8px 14px 16px; display:flex; flex-direction:column; }
.m-menu a.mlink{ padding:12px 4px; font-weight:700; font-size:16.5px; text-decoration:none; border-bottom:1px solid var(--line); }
.acc{ border-bottom:1px solid var(--line); }
.acc > button{ width:100%; display:flex; justify-content:space-between; align-items:center; background:none; border:0; color:var(--ink); font:700 16.5px "Barlow",sans-serif; padding:12px 4px; cursor:pointer; }
.acc > button .chev{ transition:transform .18s; }
.acc.open > button .chev{ transform:rotate(180deg); }
.acc-panel{ display:none; padding:2px 0 12px 12px; }
.acc.open .acc-panel{ display:block; }
.acc-panel h5{ margin:10px 0 4px; font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--brand2); }
.c-b .acc-panel h5,.c-c .acc-panel h5{ color:var(--brand); }
.acc-panel a{ display:block; padding:5px 0; font-size:15px; font-weight:500; text-decoration:none; }
.m-callrow{ padding:14px 4px 4px; }
.m-callrow .callbtn{ margin:0; width:100%; justify-content:center; font-size:17px; padding:13px; }
.sticky-call{ flex:0 0 auto; display:flex; gap:10px; padding:10px 12px calc(10px + env(safe-area-inset-bottom)); background:var(--sticky-bg); color:#ffffff; border-top:2px solid var(--accent); box-shadow:0 -10px 26px rgba(5,15,30,.35); z-index:45; }
.sticky-call a.main{ flex:1; background:var(--accent); color:var(--accent-ink); font:800 17px "Barlow",sans-serif; text-align:center; text-decoration:none; padding:13px 10px; border-radius:10px; display:flex; align-items:center; justify-content:center; gap:8px; }
.sticky-call a.cost{ flex:0 0 auto; background:rgba(255,255,255,.08); color:#ffffff; border:1px solid rgba(255,255,255,.45); font:700 14.5px "Barlow",sans-serif; text-decoration:none; padding:13px 14px; border-radius:10px; display:flex; align-items:center; }
/* Layout */
.wrap{ max-width:1180px; margin:0 auto; padding:0 20px; }
.narrow{ max-width:860px; }
/* Hero */
.hero{ position:relative; color:var(--hero-ink); }
.hero-img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.hero-shade{ position:absolute; inset:0; }
.c-a .hero-shade{ background:linear-gradient(94deg, rgba(5,15,30,.93) 30%, rgba(5,15,30,.55) 68%, rgba(5,15,30,.25)); }
.c-b .hero-shade{ background:linear-gradient(94deg, rgba(6,38,66,.92) 26%, rgba(6,38,66,.55) 66%, rgba(6,38,66,.15)); }
.c-c .hero-shade{ background:linear-gradient(94deg, rgba(38,32,22,.9) 28%, rgba(38,32,22,.5) 68%, rgba(38,32,22,.15)); }
.hero-in{ position:relative; padding:56px 0 50px; max-width:640px; }
.hero .kicker{ display:inline-flex; align-items:center; gap:8px; background:rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.35); backdrop-filter:blur(3px); border-radius:999px; padding:6px 13px; font-size:13px; font-weight:700; letter-spacing:.02em; margin-bottom:18px; }
.hero h1{ font-size:47px; margin-bottom:15px; }
.c-a .hero h1{ font-size:54px; }
.hero .sub{ font-size:18.5px; line-height:1.5; color:rgba(255,255,255,.92); max-width:540px; margin-bottom:24px; }
.hero-ctas{ display:flex; gap:12px; flex-wrap:wrap; align-items:center; }
.btn-call{ background:var(--accent); color:var(--accent-ink); font:800 18px "Barlow",sans-serif; text-decoration:none; padding:15px 24px; border-radius:10px; display:inline-flex; gap:9px; align-items:center; box-shadow:0 10px 24px rgba(0,0,0,.3); }
.btn-ghost{ background:rgba(255,255,255,.1); border:1.5px solid rgba(255,255,255,.65); color:#fff; font:700 16px "Barlow",sans-serif; text-decoration:none; padding:13.5px 20px; border-radius:10px; display:inline-flex; gap:8px; align-items:center; }
.hero-points{ display:flex; gap:8px 22px; flex-wrap:wrap; margin-top:24px; font-size:14.5px; font-weight:600; }
.hero-points span{ display:inline-flex; gap:7px; align-items:center; }
.hero-points svg{ flex:0 0 auto; }
.hero.compact .hero-in{ padding:42px 0 38px; }
.hero.compact h1{ font-size:39px; }
.c-a .hero.compact h1{ font-size:45px; }
/* Trust strip */
.truststrip{ border-bottom:1px solid var(--line); background:var(--surface2); }
.truststrip-in{ display:grid; grid-template-columns:repeat(4,1fr); gap:0; }
.truststrip .t{ padding:17px 18px; border-left:1px solid var(--line); }
.truststrip .t:first-child{ border-left:0; }
.truststrip .t b{ display:block; font-size:16.5px; margin-bottom:2px; }
.truststrip .t span{ font-size:13.5px; color:var(--muted); line-height:1.4; display:block; }
/* Sections */
.section{ padding:46px 0; }
.section.alt{ background:var(--surface2); border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.sec-head{ max-width:720px; margin-bottom:24px; }
.sec-head .eyebrow{ font-size:12.5px; font-weight:800; letter-spacing:.11em; text-transform:uppercase; color:var(--brand2); margin-bottom:9px; }
.c-b .sec-head .eyebrow,.c-c .sec-head .eyebrow{ color:var(--brand); }
.sec-head h2{ font-size:31px; margin-bottom:9px; }
.sec-head p{ color:var(--muted); font-size:16.5px; }
.answer-first{ font-size:16.5px; }
.answer-first b.lede{ font-weight:700; }
/* Service cards */
.cards{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.scard{ background:var(--surface); border:1px solid var(--line); border-radius:14px; padding:20px; text-decoration:none; display:flex; flex-direction:column; gap:7px; }
.c-a .scard{ background:var(--surface); }
.scard:hover{ border-color:var(--accent); }
.scard .ic{ width:44px; height:44px; border-radius:10px; background:var(--brand); display:flex; align-items:center; justify-content:center; }
.c-a .scard .ic{ background:#1b4066; }
.scard h3{ font-size:18.5px; font-weight:700; }
.scard p{ font-size:14.5px; color:var(--muted); line-height:1.45; flex:1; }
.scard .go{ font-size:14px; font-weight:700; color:var(--accent); }
/* How it works */
.steps{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; counter-reset:step; }
.step{ background:var(--surface); border:1px solid var(--line); border-radius:14px; padding:22px; position:relative; }
.step .num{ width:38px; height:38px; border-radius:50%; background:var(--accent); color:var(--accent-ink); font:800 18px "Barlow",sans-serif; display:flex; align-items:center; justify-content:center; margin-bottom:12px; }
.step h3{ font-size:18px; margin-bottom:6px; }
.step p{ font-size:14.5px; color:var(--muted); }
.step p a{ color:var(--accent); font-weight:700; text-decoration:none; }
/* Call panel */
.callpanel{ border-radius:16px; padding:28px 30px; display:flex; gap:20px; align-items:center; justify-content:space-between; flex-wrap:wrap; background:var(--brand); color:#fff; }
.c-a .callpanel{ background:linear-gradient(100deg,#12325e,#0c2242); border:1px solid #2b4d7d; }
.c-c .callpanel{ background:linear-gradient(100deg,#1e7a4f,#155c3b); }
.callpanel h2{ font-size:26px; margin-bottom:5px; color:#fff; }
.callpanel p{ color:rgba(255,255,255,.88); font-size:15.5px; max-width:520px; }
.callpanel .btn-call{ flex:0 0 auto; }
/* Article / internal pages */
.crumbs{ font-size:13.5px; color:var(--muted); padding:16px 0 0; display:flex; flex-wrap:wrap; gap:6px; align-items:center; }
.crumbs a{ text-decoration:none; font-weight:600; }
.crumbs a:hover{ color:var(--accent); text-decoration:underline; }
.crumbs .sep{ opacity:.6; }
.crumbs .cur{ color:var(--ink); font-weight:700; }
.article-head{ padding:14px 0 6px; }
.article-head h1{ font-size:38px; max-width:820px; }
.c-a .article-head h1{ font-size:44px; }
.byline{ display:flex; flex-wrap:wrap; gap:8px 20px; align-items:center; margin-top:14px; padding:11px 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line); font-size:13.5px; color:var(--muted); }
.byline .who{ display:flex; align-items:center; gap:9px; font-weight:700; color:var(--ink); }
.byline .avatar{ width:30px; height:30px; border-radius:50%; background:var(--brand); color:#fff; display:flex; align-items:center; justify-content:center; font-size:12px; font-weight:800; }
.toc{ background:var(--surface); border:1px solid var(--line); border-radius:12px; padding:18px 22px; margin:22px 0 6px; }
.toc h2{ font-size:15px; letter-spacing:.08em; text-transform:uppercase; margin-bottom:10px; }
.toc ol{ margin:0; padding-left:20px; display:grid; grid-template-columns:1fr 1fr; gap:5px 30px; }
.toc a{ font-size:15px; font-weight:500; text-decoration:none; }
.toc a:hover{ color:var(--accent); text-decoration:underline; }
.qsec{ padding:26px 0 4px; }
.qsec h2{ font-size:27px; margin-bottom:10px; max-width:760px; }
.qsec p{ font-size:16.5px; max-width:780px; margin-bottom:12px; }
.qsec p .lede{ font-weight:700; }
.qsec ul.tick{ margin:6px 0 10px; padding:0; list-style:none; max-width:780px; }
.qsec ul.tick li{ padding:5px 0 5px 26px; position:relative; font-size:16px; }
.qsec ul.tick li::before{ content:""; position:absolute; left:0; top:9px; width:15px; height:15px; border-radius:50%; background:var(--brand) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.5l3 3 6-6.5' fill='none' stroke='white' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/9px no-repeat; }
.inline-call{ margin:22px 0; }
/* Chips and grids */
.chips{ display:flex; flex-wrap:wrap; gap:9px; }
.chips a{ background:var(--chip); border:1px solid var(--line); border-radius:999px; padding:8px 15px; font-size:14.5px; font-weight:600; text-decoration:none; }
.chips a:hover{ border-color:var(--accent); color:var(--accent); }
.chips a.cur{ background:var(--brand); color:#fff; border-color:var(--brand); }
.citygrid{ display:grid; grid-template-columns:repeat(5,1fr); gap:11px; }
.citygrid a{ background:var(--surface); border:1px solid var(--line); border-radius:11px; padding:14px 15px; text-decoration:none; }
.citygrid a b{ display:block; font-size:15.5px; }
.citygrid a span{ font-size:12.5px; color:var(--muted); }
.citygrid a:hover{ border-color:var(--accent); }
/* Cost components */
.costcards{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.costcard{ background:var(--surface); border:1px solid var(--line); border-radius:14px; padding:22px; }
.costcard .sz{ font-size:13px; font-weight:800; letter-spacing:.09em; text-transform:uppercase; color:var(--brand2); }
.c-b .costcard .sz,.c-c .costcard .sz{ color:var(--brand); }
.costcard .range{ font-size:29px; font-weight:800; letter-spacing:-.01em; margin:7px 0 4px; }
.costcard p{ font-size:14px; color:var(--muted); }
.costnote{ font-size:13.5px; color:var(--muted); margin-top:14px; max-width:820px; }
table.compare{ width:100%; border-collapse:collapse; background:var(--surface); border:1px solid var(--line); border-radius:12px; overflow:hidden; font-size:15px; }
table.compare th, table.compare td{ text-align:left; padding:13px 16px; border-bottom:1px solid var(--line); vertical-align:top; }
table.compare th{ background:var(--surface2); font-size:13px; letter-spacing:.07em; text-transform:uppercase; }
table.compare tr:last-child td{ border-bottom:0; }
table.compare td b{ font-weight:700; }
/* Link blocks */
.linkblocks{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.linkblock{ background:var(--surface); border:1px solid var(--line); border-radius:14px; padding:20px 22px; }
.linkblock h3{ font-size:16.5px; margin-bottom:9px; }
.linkblock a{ display:block; padding:4px 0; font-size:15px; font-weight:500; text-decoration:none; }
.linkblock a:hover{ color:var(--accent); text-decoration:underline; }
.linkblock a small{ display:block; color:var(--muted); font-size:13px; font-weight:400; }
/* FAQ */
.faq{ border:1px solid var(--line); border-radius:14px; overflow:hidden; background:var(--faq-bg); }
.faq-item{ border-bottom:1px solid var(--line); }
.faq-item:last-child{ border-bottom:0; }
.faq-item > button{ width:100%; display:flex; justify-content:space-between; align-items:center; gap:14px; background:none; border:0; color:var(--ink); font:700 16.5px "Barlow",sans-serif; text-align:left; padding:17px 20px; cursor:pointer; }
.faq-item > button .chev{ flex:0 0 auto; transition:transform .18s; }
.faq-item.open > button .chev{ transform:rotate(180deg); }
.faq-panel{ display:none; padding:0 20px 18px; font-size:15.5px; color:var(--muted); max-width:760px; }
.faq-item.open .faq-panel{ display:block; }
.faq-panel a{ color:var(--accent); font-weight:700; text-decoration:none; }
/* Footer */
.sitefoot{ background:var(--footer-bg); color:#dbe6f2; margin-top:54px; }
.c-c .sitefoot{ color:#e9e2d2; }
.foot-in{ max-width:1180px; margin:0 auto; padding:44px 20px 30px; }
.foot-grid{ display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:30px; }
.foot-grid h4{ margin:0 0 12px; font-size:13px; letter-spacing:.1em; text-transform:uppercase; color:#fff; }
.c-c .foot-grid h4{ color:#f5eeda; }
.foot-grid a{ display:block; padding:3.5px 0; font-size:14.5px; text-decoration:none; opacity:.88; }
.foot-grid a:hover{ opacity:1; text-decoration:underline; }
.foot-brand p{ font-size:14px; opacity:.8; margin-top:12px; max-width:300px; }
.foot-brand .logo-name{ color:#fff; }
.foot-brand .logo-name small{ color:inherit; opacity:.65; }
.foot-phone{ display:inline-block; margin-top:14px; font-size:20px; font-weight:800; color:#fff; text-decoration:none; }
.disclaimer{ border-top:1px solid rgba(255,255,255,.18); margin-top:34px; padding-top:20px; font-size:12.5px; line-height:1.6; opacity:.75; }
.disclaimer p{ margin-bottom:8px; }
.foot-base{ display:flex; justify-content:space-between; gap:14px; flex-wrap:wrap; margin-top:14px; font-size:13px; opacity:.75; }
/* Inside-frame responsive (phone frame uses .is-mobile on .site) */
/* Adaptation A1: every rule in this block carried .is-mobile in the mockup; all of them are consolidated, transformed, in the @media (max-width: 780px) block near the end of this file. */
/* In-frame responsiveness: the mockup header and grids adapt to the frame width,
   exactly as the live responsive site will. Wide frame: full menu. Narrow frame:
   condensed menu. Phone-width frame: hamburger menu, like mobile. */
.mainhead .m-menu{ top:100%; }
@media (max-width: 1060px){
  .mainhead-in{ gap:10px; padding:10px 14px; }
  .navlinks{ gap:2px; min-width:0; }
  .navlinks > a, .navitem > button{ padding:7px 7px; font-size:14px; }
  .callbtn{ margin-left:4px; padding:9px 12px; font-size:14.5px; flex:0 0 auto; }
  .logo{ gap:8px; }
  .logo-name{ font-size:16px; }
  .logo-mark{ width:38px; height:38px; flex-basis:38px; }
  .topbar-in{ padding:7px 14px; }
}
@media (max-width: 880px){
  .topbar .tb-mid{ display:none; }
  .navlinks > a:nth-child(5), .navlinks > a:nth-child(6){ display:none; }
  .cards{ grid-template-columns:1fr 1fr; }
  .citygrid{ grid-template-columns:repeat(3,1fr); }
  .truststrip-in{ grid-template-columns:1fr 1fr; }
  .truststrip .t{ border-top:1px solid var(--line); }
  .truststrip .t:nth-child(-n+2){ border-top:0; }
  .steps{ grid-template-columns:1fr; }
  .costcards{ grid-template-columns:1fr 1fr; }
  .foot-grid{ grid-template-columns:1fr 1fr; }
  .hero h1{ font-size:38px; }
  .c-a .hero h1{ font-size:43px; }
  .hero.compact h1{ font-size:33px; }
  .c-a .hero.compact h1{ font-size:38px; }
}
@media (max-width: 780px){
  .navlinks{ display:none; }
  .mainhead .hambtn{ display:inline-flex; }
  .topbar .tb-hours{ display:none; }
}
@media (max-width: 560px){
  .mainhead .logo-name{ display:none; }
  .mainhead .logo-mark{ width:38px; height:38px; flex-basis:38px; }
  .mainhead .callbtn{ font-size:14px; padding:10px 12px; margin-left:auto; }
  .mainhead .hambtn{ margin-left:10px; }
  .topbar .tb-phone{ font-size:15px; }
}
@media (max-width: 680px){
  .cards{ grid-template-columns:1fr; }
  .citygrid{ grid-template-columns:1fr 1fr; }
  .costcards{ grid-template-columns:1fr; }
  .toc ol{ grid-template-columns:1fr; }
  .linkblocks{ grid-template-columns:1fr; }
  .hero h1{ font-size:32px; }
  .c-a .hero h1{ font-size:36px; }
  .article-head h1{ font-size:29px; }
  .hero-ctas .btn-call, .hero-ctas .btn-ghost{ width:100%; justify-content:center; }
}
/* ============ CONCEPT A FIX ROUND: footer, padding, mobile header ============ */
/* Mobile A header: no utility top bar; compact call button beside the hamburger */
.m-head.a-head{ gap:8px; padding:10px 12px; }
.m-head.a-head .logo{ gap:8px; min-width:0; }
.m-head.a-head .logo-mark{ width:32px; height:32px; flex-basis:32px; }
.m-head.a-head .logo-name{ font-size:15px; white-space:nowrap; }
.m-head.a-head .logo-name small{ font-size:9px; letter-spacing:.1em; margin-top:1px; }
.m-head.a-head .hambtn{ margin-left:0; width:40px; height:40px; flex:0 0 40px; }
.m-callbtn{ margin-left:auto; flex:0 0 auto; background:var(--accent); color:var(--accent-ink); font:800 14.5px "Barlow",sans-serif; text-decoration:none; padding:10px 12px; border-radius:9px; display:inline-flex; align-items:center; gap:6px; white-space:nowrap; box-shadow:0 6px 16px rgba(249,109,0,.35); }
.m-callbtn:hover{ filter:brightness(1.07); }
/* Coverage + hours strip under the hero on mobile internal pages (Concept A) */
.coverage-strip{ display:none; }
.coverage-strip span{ display:inline-flex; align-items:center; gap:7px; }
.coverage-strip svg{ color:var(--accent); flex:0 0 auto; }
/* Padding normalization, Concept A */
.c-a .scard, .c-a .step, .c-a .costcard{ padding:22px; }
.c-a .linkblock{ padding:22px; }
.c-a .toc{ padding:20px 22px; }
.c-a .faq-item > button{ padding:18px 22px; }
.c-a .faq-panel{ padding:0 22px 20px; }
.c-a .costnote{ font-size:14.5px; line-height:1.65; margin-top:18px; }
.c-a .costnote a{ display:block; width:fit-content; margin-top:9px; font-size:15px; }
.c-a .costnote a::after{ content:" \2192"; }
/* Footer rebuild, Concept A */
.c-a .foot-in{ padding:46px 20px 34px; }
.c-a .foot-grid{ grid-template-columns:1.3fr .8fr 1.1fr 1.05fr; gap:34px; }
@media (max-width: 880px){ .c-a .foot-grid{ grid-template-columns:1fr 1fr; } }
.c-a .foot-grid a{ padding:6px 0; opacity:.86; }
.c-a .foot-grid a:hover{ color:var(--accent); opacity:1; text-decoration:underline; }
.c-a .sitefoot a:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; border-radius:3px; }
.c-a .foot-phone:hover{ color:var(--accent); text-decoration:underline; }
.c-a .foot-base{ opacity:1; color:inherit; }
.c-a .foot-base .fb-links{ display:inline-flex; gap:20px; }
.c-a .foot-base a{ color:inherit; text-decoration:none; opacity:.8; }
.c-a .foot-base a:hover{ color:var(--accent); opacity:1; text-decoration:underline; }
/* ============ CONCEPT A FIX ROUND 2: spacing rhythm, trust grid, neighbourhood box ============ */
/* 1) One tight, consistent section rhythm on Concept A.
   Adjacent sections sit 60px apart on desktop, 40px on mobile.
   Inline margin/padding hacks from the shared page builders are neutralised for A only. */
.c-a .section{ padding:30px 0; }
.c-a .section[style*="margin-top"]{ margin-top:0 !important; }
.c-a .section[style*="padding-top"]{ padding-top:30px !important; }
.c-a .wrap[style*="margin-top:34px"]{ margin-top:26px !important; }
.c-a .qsec{ padding:28px 0 12px; }
.c-a .linkblocks{ margin-bottom:26px; }
.c-a .wrap.narrow:has(.faq){ margin-top:26px; }
.c-a .sitefoot{ margin-top:40px; }
/* 2) Trust grid rebuilt as ONE clean box (Concept A): a single complete outer
   border, and one vertical + one horizontal divider forming a perfect cross,
   drawn by a 1px grid gap over the line colour so the cross can never break. */
.c-a .truststrip{ border-bottom:0; padding:16px 0; }
.c-a .truststrip-in{ gap:1px; background:var(--line); border:1px solid var(--line); border-radius:12px; overflow:hidden; }
.c-a .truststrip .t{ background:var(--surface); border:0; padding:18px 20px; }
/* 3) Neighbourhood box (Concept A): heading, intro line and chips live inside
   one bordered panel that reads as a single designed component. */
.c-a .hoodbox{ background:var(--surface); border:1px solid var(--line); border-radius:16px; padding:24px 26px; margin-top:22px; }
.c-a .hoodbox:first-child{ margin-top:0; }
.c-a .hoodbox > h3{ font-size:19px; font-weight:700; margin-bottom:6px; }
.c-a .hoodbox > p{ color:var(--muted); font-size:15px; line-height:1.5; margin-bottom:14px; max-width:660px; }
.c-a .hoodbox .sec-head{ margin-bottom:18px; }
/* ============ CONCEPT A FIX ROUND 3: compact mobile neighbourhood chips ============ */
/* Adaptation A1: both rules in this block carried .is-mobile in the mockup; they are consolidated, transformed, in the @media (max-width: 780px) block near the end of this file. */
/* Mobile A only: the neighbourhood chips inside the boxed panel become a compact
   2-column grid of equal-width cells instead of one oversized pill per row.
   16 neighbourhoods sit in 8 tidy rows; long labels wrap inside their own cell
   (min-width:0 + break-word) so nothing overflows or forces a full-width row.
   Desktop A and Concepts B and C keep the shared flex-wrap chip row. */

/* ============ Adaptation A3: sticky call bar (live site: fixed, mobile only) ============ */
.sticky-call{position:fixed;left:0;right:0;bottom:0;z-index:65}
@media (min-width:781px){ .sticky-call{display:none} }

/* ============ Adaptation A4: footer clearance for the fixed bar (mobile only) ============ */
@media (max-width:780px){ .sitefoot::after{content:"";display:block;height:64px;background:var(--footer-bg)} }

/* ============ Adaptation A1 (continued): mockup .is-mobile rules, consolidated ============ */
/* Every mockup rule whose selector carried .is-mobile, in source order, with
   .is-mobile removed and the root normalised to .c-a, inside one viewport query.
   Placed after all base rules so these values win at mobile widths. */
@media (max-width: 780px){
  /* mockup: Inside-frame responsive (phone frame uses .is-mobile on .site) */
  .c-a .wrap{ padding:0 16px; }
  .c-a .hero-in{ padding:36px 0 34px; }
  .c-a .hero h1{ font-size:32px; }
  .c-a .hero h1{ font-size:36px; }
  .c-a .hero .sub{ font-size:16.5px; }
  .c-a .hero-ctas .btn-call{ width:100%; justify-content:center; }
  .c-a .hero-ctas .btn-ghost{ width:100%; justify-content:center; }
  .c-a .truststrip-in{ grid-template-columns:1fr 1fr; }
  .c-a .truststrip .t{ border-left:0; border-top:1px solid var(--line); padding:13px 14px; }
  .c-a .truststrip .t:nth-child(-n+2){ border-top:0; }
  .c-a .cards{ grid-template-columns:1fr; }
  .c-a .steps{ grid-template-columns:1fr; }
  .c-a .costcards{ grid-template-columns:1fr; }
  .c-a .citygrid{ grid-template-columns:1fr 1fr; }
  .c-a .toc ol{ grid-template-columns:1fr; }
  .c-a .linkblocks{ grid-template-columns:1fr; }
  .c-a .article-head h1{ font-size:29px; }
  .c-a .article-head h1{ font-size:32px; }
  .c-a .qsec h2{ font-size:23px; }
  .c-a .sec-head h2{ font-size:25px; }
  .c-a .section{ padding:34px 0; }
  .c-a .callpanel{ padding:22px; }
  .c-a .callpanel .btn-call{ width:100%; justify-content:center; }
  .c-a .foot-grid{ grid-template-columns:1fr 1fr; gap:24px; }
  .c-a table.compare{ font-size:14px; }
  .c-a table.compare th, .c-a table.compare td{ padding:10px 12px; }
  .c-a .dropdown{ display:none; }
  /* mockup: Coverage + hours strip under the hero on mobile internal pages (Concept A) */
  .c-a .coverage-strip{ display:flex; flex-wrap:wrap; gap:6px 18px; padding:11px 20px; background:var(--surface2); border-bottom:1px solid var(--line); font-size:13.5px; font-weight:600; }
  /* mockup: Padding normalization, Concept A */
  .c-a .wrap{ padding:0 20px; }
  .c-a .truststrip .t{ padding:14px 16px; }
  /* mockup: Footer rebuild, Concept A */
  .c-a .foot-in{ padding:38px 20px 48px; }
  .c-a .foot-grid{ gap:28px 20px; }
  .c-a .foot-grid a{ min-height:44px; display:flex; align-items:center; padding:6px 0; }
  .c-a .foot-base{ flex-direction:column; gap:10px; }
  /* mockup: 1) One tight, consistent section rhythm on Concept A. */
  .c-a .section{ padding:20px 0; }
  .c-a .section[style*="padding-top"]{ padding-top:20px !important; }
  .c-a .wrap.narrow:has(.faq){ margin-top:18px; }
  /* mockup: 2) Trust grid rebuilt as ONE clean box (Concept A): a single complete outer */
  .c-a .truststrip .t{ border:0; }
  /* mockup: 3) Neighbourhood box (Concept A): heading, intro line and chips live inside */
  .c-a .hoodbox{ padding:20px; border-radius:14px; margin-top:18px; }
  .c-a .hoodbox:first-child{ margin-top:0; }
  /* mockup: Mobile A only: the neighbourhood chips inside the boxed panel become a compact */
  .c-a .hoodbox .chips{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
  .c-a .hoodbox .chips a{ display:flex; align-items:center; justify-content:center; text-align:center; min-width:0; min-height:44px; padding:7px 10px; font-size:13.5px; line-height:1.3; overflow-wrap:break-word; }
}

/* ============ Adaptation A6: class contracts for live-only components ============
   No mockup counterpart; styled only from the mockup tokens and values above. */

/* Prose (mirrors mockup .qsec typography) */
.prose p{font-size:16.5px;max-width:780px;margin:0 0 12px}
.prose .lede{font-weight:700}
.prose .steps{margin:0 0 14px}
.prose .steps-outro{max-width:none;margin:16px 0 4px;background:var(--surface);border:1px solid var(--line);border-left:4px solid var(--accent);border-radius:12px;padding:16px 20px;font-size:16px;line-height:1.55}

/* Section image */
.sec-img{border-radius:12px;margin-top:16px}

/* FAQ column */
.faq-narrow{max-width:860px;margin:0 auto;padding:0 20px}

/* Link-block wrapper */
.lb-wrap{margin-top:26px}

/* Mobile call row note (mockup sets this inline; live site uses a class rule) */
.m-callrow p{margin:10px 2px 0;font-size:13px;color:var(--muted)}

/* Footer brand open line */
.foot-brand .foot-open{margin-top:8px}

/* Signs (homepage live content) */
.signs{display:grid;grid-template-columns:1.55fr 1fr;gap:16px;align-items:stretch}
.sign-list{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line);border:1px solid var(--line);border-radius:14px;overflow:hidden}
.sign{background:var(--surface);padding:18px 20px;display:flex;gap:12px;align-items:flex-start}
.sign-list .sign:last-child:nth-child(odd){grid-column:1/-1}
.sign b{font:800 15px "Barlow",sans-serif;color:var(--accent)}
.sign span{font-size:15px;line-height:1.5}
.response{background:linear-gradient(100deg,#12325e,#0c2242);border:1px solid #2b4d7d;border-radius:14px;padding:22px;display:flex;flex-direction:column;justify-content:center;gap:8px}
.response strong{font:800 34px/1 "Barlow",sans-serif;color:#fff}
.response p{font-size:15px;line-height:1.5;color:#c9d9ea}
.response a{font:800 16px "Barlow",sans-serif;color:var(--accent);text-decoration:none}
.signs-after{margin-top:16px}

/* Signals (neighbourhood live content) */
.signals{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:18px}
.signals.n2{grid-template-columns:repeat(2,1fr)}
.signals.n1{grid-template-columns:1fr}
.signal{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:22px}
.sig-num{display:block;font-size:12.5px;font-weight:800;letter-spacing:.11em;text-transform:uppercase;color:var(--brand2);margin-bottom:8px}
.signal h3{font-size:18.5px;font-weight:700;margin-bottom:6px}
.signal p{font-size:14.5px;line-height:1.5;color:var(--muted)}

/* Soft call panel (live content) */
.softcall{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:22px;display:flex;align-items:center;gap:20px;justify-content:space-between;flex-wrap:wrap;margin:22px 0}
.softcall strong{font:700 18px "Barlow",sans-serif}
.softcall p{font-size:14.5px;color:var(--muted);margin-top:4px}
.softcall a{font:800 15px "Barlow",sans-serif;color:var(--accent);text-decoration:none;white-space:nowrap}

@media (max-width: 780px){
  .lb-wrap{margin-top:20px}
  .signs{grid-template-columns:1fr}
  .signals{grid-template-columns:1fr}
}
@media (max-width: 680px){
  .sign-list{grid-template-columns:1fr}
}

/* Playbook audit fixes 2026-10-22 (semantics + declared tokens, zero visual change):
   1) Footer column headings are h3 for heading order; .foot-h carries the exact
      declarations the mockup's .foot-grid h4 rule gives the h4 (13px, 700 via UA,
      uppercase, #fff) plus line-height 1.55, the h4's inherited computed value,
      so the rendered footer is byte-identical.
   2) Call buttons use the mockup's DECLARED ink token. The mockup stylesheet
      declares .btn-call/.callbtn color as var(--accent-ink) #1a1005, but its own
      .site a{color:inherit} rule outranks those declarations and renders the
      text near-white. This rule restores the declared token (Ravi's decision,
      2026-10-22, reversing the earlier keep-white call). */
.foot-grid .foot-h{ margin:0 0 12px; font-size:13px; letter-spacing:.1em; text-transform:uppercase; color:#fff; line-height:1.55; }
.site a.btn-call,.site a.callbtn,.site a.m-callbtn{ color:var(--accent-ink); }

/* Link colour rule (Ravi, 2026-10-22): every TEXT hyperlink in page content
   renders in the orange accent colour, on all pages, so content links read
   consistently (his example: the orange body links). Covers article body and
   prose links, the answer-first intro, breadcrumbs, the TOC, link blocks,
   the guide cost note, cluster/hoodbox chips and footer text links. Header
   nav, dropdowns, the mobile menu, the orange call buttons (dark ink on
   orange, Ravi's decided fix above), the sticky mobile call bar and the
   card components (service cards, city grid) keep their mockup styling.
   The current-page chip (.chips a.cur, white on brand) is a state marker
   and keeps its higher-specificity rule. */
.crumbs a, .toc a, .answer-first a, .qsec a, .prose a, .sec-head a,
.linkblock a, .costnote a, .chips a, .foot-grid a, .c-a .foot-base a{
  color:var(--accent);
}