/* TrueNorth Garage Doors — shared stylesheet
   Performance-first: system font stack (zero web-font requests),
   fixed media sizing to protect CLS, GPU-friendly transitions only. */

:root{
  --navy:#0b1f33;
  --navy-2:#12304d;
  --steel:#1f4e79;
  --ice:#eaf2fb;
  --red:#d8232a;
  --red-dark:#b01a20;
  --amber:#f5a623;
  --green:#1e9e5a;
  --ink:#16202b;
  --muted:#5b6b7b;
  --line:#dde6ef;
  --card:#ffffff;
  --bg:#f6f9fc;
  --radius:14px;
  --shadow:0 6px 24px rgba(11,31,51,.10);
  --shadow-lg:0 18px 50px rgba(11,31,51,.18);
  --maxw:1160px;
  --font:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,"Apple Color Emoji","Segoe UI Emoji",sans-serif;
}

*{box-sizing:border-box}
/* A11Y (P2-8): visible keyboard-focus ring on every interactive element, honoring the per-site accent. */
:focus-visible{outline:2px solid var(--accent,#ef7d10);outline-offset:2px;border-radius:3px}
html{scroll-behavior:smooth}
body{
  margin:0;font-family:var(--font);color:var(--ink);background:var(--bg);
  line-height:1.6;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
img{max-width:100%;height:auto;display:block}
a{color:var(--steel);text-decoration:none}
a:hover{text-decoration:underline}
h1,h2,h3{line-height:1.18;color:var(--navy);margin:0 0 .5em}
h1{font-size:clamp(2rem,5vw,3.1rem);letter-spacing:-.02em}
h2{font-size:clamp(1.5rem,3.4vw,2.2rem);letter-spacing:-.01em}
h3{font-size:1.18rem}
p{margin:0 0 1rem}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 20px}
.section{padding:64px 0}
.section.alt{background:#fff}
.lead{font-size:1.15rem;color:var(--muted);max-width:62ch}
.eyebrow{display:inline-block;font-weight:800;letter-spacing:.12em;text-transform:uppercase;
  font-size:.74rem;color:var(--red);margin-bottom:.6rem}
.center{text-align:center}
.center .lead{margin-left:auto;margin-right:auto}

/* ---------- Buttons ---------- */
.btn{display:inline-flex;align-items:center;gap:.5rem;font-weight:700;font-size:1.02rem;
  padding:14px 24px;border-radius:999px;border:2px solid transparent;cursor:pointer;
  transition:transform .12s ease,box-shadow .12s ease,background .12s ease;text-decoration:none}
.btn:hover{text-decoration:none;transform:translateY(-2px)}
.btn-call{background:var(--red);color:#fff;box-shadow:0 8px 22px rgba(216,35,42,.32)}
.btn-call:hover{background:var(--red-dark)}
.btn-ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.6)}
.btn-ghost:hover{background:rgba(255,255,255,.12)}
.btn-dark{background:var(--navy);color:#fff}
.btn-dark:hover{background:var(--navy-2)}
.btn-lg{padding:17px 32px;font-size:1.1rem}

/* ---------- Header ---------- */
header.site{position:sticky;top:0;z-index:50;background:rgba(11,31,51,.97);
  backdrop-filter:saturate(140%) blur(6px);color:#fff;border-bottom:1px solid rgba(255,255,255,.08)}
.nav{display:flex;align-items:center;justify-content:space-between;height:68px}
.brand{display:flex;align-items:center;gap:10px;color:#fff;font-weight:800;font-size:1.18rem}
.brand:hover{text-decoration:none}
.brand svg{flex:0 0 auto}
.brand b{color:var(--amber)}
.nav-links{display:flex;gap:26px;align-items:center}
.nav-links a{color:#dce7f2;font-weight:600;font-size:.97rem}
.nav-links a:hover{color:#fff;text-decoration:none}
.nav-cta{display:flex;align-items:center;gap:14px}
.nav-phone{color:#fff;font-weight:800;font-size:1.05rem;white-space:nowrap}
.nav-phone:hover{text-decoration:none;color:var(--amber)}
.menu-btn{display:none;background:none;border:0;color:#fff;font-size:1.6rem;cursor:pointer}
@media(max-width:880px){
  .nav-links{display:none;position:absolute;top:68px;left:0;right:0;flex-direction:column;
    background:var(--navy);padding:14px 20px 22px;gap:14px;border-bottom:1px solid rgba(255,255,255,.1)}
  .nav-links.open{display:flex}
  .nav-links a{font-size:1.1rem;padding:6px 0}
  .menu-btn{display:block}
  .nav-cta .btn-call{display:none}
}

/* ---------- Hero ---------- */
.hero{position:relative;color:#fff;
  background:
    radial-gradient(1200px 500px at 80% -10%,rgba(31,78,121,.55),transparent),
    linear-gradient(160deg,#0b1f33 0%,#12304d 60%,#163a5c 100%);
  overflow:hidden}
.hero::after{content:"";position:absolute;inset:0;opacity:.10;pointer-events:none;
  background-image:radial-gradient(circle at 20% 30%,#fff 1px,transparent 1px);
  background-size:42px 42px}
.hero .wrap{position:relative;display:grid;grid-template-columns:1.1fr .9fr;gap:40px;
  align-items:center;padding-top:62px;padding-bottom:72px}
.hero h1{color:#fff}
.hero p.lead{color:#cfe0f1}
.hero .city-tag{color:var(--amber);font-weight:800}
.hero-cta{display:flex;flex-wrap:wrap;gap:14px;margin-top:26px}
.hero-trust{display:flex;flex-wrap:wrap;gap:18px;margin-top:30px;color:#bcd0e6;font-size:.92rem}
.hero-trust span{display:flex;align-items:center;gap:7px;font-weight:600}
.hero-trust svg{flex:0 0 auto}
.hero-card{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.16);
  border-radius:var(--radius);padding:24px;backdrop-filter:blur(4px)}
.hero-card h3{color:#fff;margin-bottom:.4rem}
.hero-card ul{list-style:none;padding:0;margin:0}
.hero-card li{display:flex;gap:10px;align-items:flex-start;padding:9px 0;border-bottom:1px solid rgba(255,255,255,.10);color:#dbe7f3;font-size:.96rem}
.hero-card li:last-child{border-bottom:0}
.hero-card .price{margin-left:auto;color:var(--amber);font-weight:800;white-space:nowrap}
@media(max-width:860px){.hero .wrap{grid-template-columns:1fr;gap:30px}.hero-card{order:2}}

/* ---------- Trust strip ---------- */
.strip{background:var(--navy-2);color:#fff}
.strip .wrap{display:flex;flex-wrap:wrap;justify-content:space-between;gap:18px;padding:18px 20px}
.strip .item{display:flex;align-items:center;gap:10px;font-weight:600;font-size:.95rem;color:#dbe7f3}
.strip .item b{color:#fff}
.strip svg{flex:0 0 auto;color:var(--amber)}

/* ---------- Grid cards ---------- */
.grid{display:grid;gap:22px}
.grid.cols-3{grid-template-columns:repeat(3,1fr)}
.grid.cols-2{grid-template-columns:repeat(2,1fr)}
.grid.cols-4{grid-template-columns:repeat(4,1fr)}
@media(max-width:920px){.grid.cols-3,.grid.cols-4{grid-template-columns:repeat(2,1fr)}}
@media(max-width:620px){.grid.cols-2,.grid.cols-3,.grid.cols-4{grid-template-columns:1fr}}

.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  padding:26px;box-shadow:var(--shadow);transition:transform .14s ease,box-shadow .14s ease}
.card:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg)}
.card .ico{width:50px;height:50px;border-radius:12px;display:grid;place-items:center;
  background:var(--ice);color:var(--steel);margin-bottom:14px}
.card h3{margin-bottom:.35rem}
.card p{color:var(--muted);margin-bottom:.6rem;font-size:.97rem}
.card .from{font-weight:800;color:var(--navy)}
.card .from small{font-weight:600;color:var(--muted)}

/* ---------- Pricing table ---------- */
.pricewrap{overflow-x:auto;border-radius:var(--radius);box-shadow:var(--shadow);border:1px solid var(--line)}
table.price{width:100%;border-collapse:collapse;background:#fff;min-width:560px}
table.price th,table.price td{padding:14px 16px;text-align:left;border-bottom:1px solid var(--line)}
table.price thead th{background:var(--navy);color:#fff;font-size:.92rem;letter-spacing:.02em}
table.price tbody tr:nth-child(even){background:#f7fafd}
table.price td.svc{font-weight:700;color:var(--navy)}
table.price td.amt{font-weight:800;color:var(--steel);white-space:nowrap}
table.price td.war{color:var(--muted);font-size:.92rem}
.price-note{color:var(--muted);font-size:.88rem;margin-top:10px}

/* ---------- Climate / feature split ---------- */
.split{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:center}
@media(max-width:820px){.split{grid-template-columns:1fr;gap:26px}}
.feature-list{list-style:none;padding:0;margin:0}
.feature-list li{display:flex;gap:14px;padding:14px 0;border-bottom:1px solid var(--line)}
.feature-list li:last-child{border-bottom:0}
.feature-list .fi{flex:0 0 auto;width:40px;height:40px;border-radius:10px;background:var(--ice);
  color:var(--red);display:grid;place-items:center;font-weight:800}
.feature-list h4{margin:.1rem 0 .25rem;color:var(--navy);font-size:1.05rem}
.feature-list p{margin:0;color:var(--muted);font-size:.95rem}

.panel{background:linear-gradient(160deg,#0b1f33,#163a5c);color:#fff;border-radius:var(--radius);
  padding:30px;box-shadow:var(--shadow-lg)}
.panel h3{color:#fff}
.panel .stat{display:flex;align-items:baseline;gap:10px;margin:18px 0}
.panel .stat b{font-size:2.4rem;color:var(--amber);line-height:1}
.panel .stat span{color:#cfe0f1}

/* ---------- Reviews ---------- */
.review{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:24px;box-shadow:var(--shadow)}
.stars{color:var(--amber);letter-spacing:2px;font-size:1.05rem}
.review p{color:var(--ink);font-style:italic;margin:.6rem 0}
.review .who{font-weight:700;color:var(--navy);font-style:normal}
.review .where{color:var(--muted);font-size:.88rem}
.rating-badge{display:inline-flex;align-items:center;gap:12px;background:#fff;border:1px solid var(--line);
  border-radius:999px;padding:10px 20px;box-shadow:var(--shadow);font-weight:700;color:var(--navy)}
.rating-badge b{font-size:1.5rem;color:var(--red)}

/* ---------- FAQ ---------- */
.faq details{background:#fff;border:1px solid var(--line);border-radius:12px;margin-bottom:12px;
  box-shadow:0 2px 8px rgba(11,31,51,.05);overflow:hidden}
.faq summary{cursor:pointer;padding:18px 22px;font-weight:700;color:var(--navy);list-style:none;
  display:flex;justify-content:space-between;align-items:center;gap:14px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-size:1.5rem;color:var(--red);font-weight:400;transition:transform .2s}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details p{padding:0 22px 20px;color:var(--muted);margin:0}

/* ---------- Service process (How it works) ---------- */
ol.proc{list-style:none;counter-reset:pstep;padding:0;margin:6px 0 8px;display:grid;gap:14px}
ol.proc li{counter-increment:pstep;position:relative;padding:16px 18px 16px 62px;background:#fff;border:1px solid var(--line);
  border-radius:12px;box-shadow:0 2px 8px rgba(11,31,51,.05)}
ol.proc li::before{content:counter(pstep);position:absolute;left:16px;top:16px;width:32px;height:32px;border-radius:50%;
  background:var(--red);color:#fff;font-weight:800;display:grid;place-items:center;font-size:1rem}
ol.proc li b{display:block;color:var(--navy);margin-bottom:3px;font-size:1.04rem}
ol.proc li span{color:var(--muted);font-size:.97rem}
html[dir=rtl] ol.proc li{padding:16px 62px 16px 18px}
html[dir=rtl] ol.proc li::before{left:auto;right:16px}

/* ---------- Cost factors ---------- */
ul.factors{list-style:none;padding:0;margin:0;display:grid;gap:10px}
ul.factors li{position:relative;padding:12px 16px 12px 40px;background:var(--ice);border-radius:10px;color:#27343f;font-size:.98rem}
ul.factors li::before{content:"›";position:absolute;left:16px;top:10px;color:var(--red);font-weight:800;font-size:1.15rem;line-height:1.3}
ul.factors li strong{color:var(--navy)}
html[dir=rtl] ul.factors li{padding:12px 40px 12px 16px}
html[dir=rtl] ul.factors li::before{left:auto;right:16px;content:"‹"}

/* ---------- CTA band ---------- */
.cta-band{background:linear-gradient(135deg,var(--red),#e8512a);color:#fff;text-align:center}
.cta-band h2{color:#fff}
.cta-band p{color:#ffe6df;max-width:60ch;margin:0 auto 1.4rem}
.cta-band .btn-call{background:#fff;color:var(--red)}
.cta-band .btn-call:hover{background:#fff8f6}
.cta-band .btn-ghost{border-color:#fff;color:#fff}

/* ---------- Neighbourhoods ---------- */
.chips{display:flex;flex-wrap:wrap;gap:10px}
.chip{background:#fff;border:1px solid var(--line);border-radius:999px;padding:8px 16px;
  font-size:.92rem;font-weight:600;color:var(--navy);box-shadow:0 1px 4px rgba(11,31,51,.05)}

/* ---------- City selector cards (home) ---------- */
.city-card{position:relative;border-radius:var(--radius);overflow:hidden;color:#fff;min-height:280px;
  display:flex;flex-direction:column;justify-content:flex-end;padding:26px;box-shadow:var(--shadow);
  background-size:cover;background-position:center;transition:transform .16s ease,box-shadow .16s ease}
.city-card:hover{transform:translateY(-5px);box-shadow:var(--shadow-lg);text-decoration:none}
.city-card::before{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(11,31,51,.15),rgba(11,31,51,.85))}
.city-card>*{position:relative;z-index:1}
.city-card h3{color:#fff;font-size:1.6rem;margin-bottom:.2rem}
.city-card p{color:#cfe0f1;font-size:.95rem;margin:0}
.city-card .go{margin-top:14px;font-weight:800;color:var(--amber)}

/* ---------- Footer ---------- */
footer.site{background:var(--navy);color:#cfe0f1;padding:54px 0 24px;font-size:.94rem}
footer.site .cols{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:30px}
@media(max-width:820px){footer.site .cols{grid-template-columns:1fr 1fr}}
@media(max-width:520px){footer.site .cols{grid-template-columns:1fr}}
footer.site h4{color:#fff;font-size:1rem;margin:0 0 14px}
footer.site a{color:#cfe0f1;display:block;padding:4px 0}
footer.site a:hover{color:#fff}
footer.site .brand{color:#fff;margin-bottom:12px}
footer .nap{color:#9fb4c9;line-height:1.8}
footer .legal{border-top:1px solid rgba(255,255,255,.1);margin-top:34px;padding-top:18px;
  display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px;color:#8aa1b8;font-size:.85rem}

/* ---------- Sticky mobile call bar ---------- */
.callbar{position:fixed;bottom:0;left:0;right:0;z-index:60;display:none;
  background:var(--navy);border-top:1px solid rgba(255,255,255,.12);padding:8px;gap:8px}
.callbar a{flex:1;justify-content:center;font-size:1rem;padding:13px}
.callbar .btn-call{box-shadow:none}
.callbar .btn-sms{background:var(--green);color:#fff}
@media(max-width:880px){.callbar{display:flex}body{padding-bottom:64px}}

/* ---------- Breadcrumbs ---------- */
.crumbs{font-size:.86rem;color:var(--muted);padding:14px 0}
.crumbs a{color:var(--steel)}

/* ---------- Article ---------- */
.article{max-width:760px;margin:0 auto}
.article h2{margin-top:1.6em}
.article h3{margin-top:1.4em;color:var(--steel)}
.article p,.article li{font-size:1.06rem;color:#27343f}
.article ul{padding-left:1.2em}
.article .callout{background:var(--ice);border-left:4px solid var(--steel);border-radius:8px;
  padding:16px 20px;margin:22px 0}
.article .callout.warn{background:#fff4f2;border-left-color:var(--red)}
.meta{color:var(--muted);font-size:.9rem;margin-bottom:1.4rem}

/* ---------- Quote form ---------- */
.quote-section{background:var(--ice)}
.quote-wrap{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:center}
@media(max-width:820px){.quote-wrap{grid-template-columns:1fr;gap:26px}}
.quote-form{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:26px;box-shadow:var(--shadow-lg)}
.quote-form .row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media(max-width:520px){.quote-form .row{grid-template-columns:1fr}}
.quote-form label{display:block;font-weight:700;font-size:.84rem;color:var(--navy);margin:12px 0 4px}
.quote-form input,.quote-form select,.quote-form textarea{width:100%;padding:11px 13px;border:1px solid var(--line);
  border-radius:9px;font:inherit;background:#fbfdff;color:var(--ink)}
.quote-form input:focus,.quote-form select:focus,.quote-form textarea:focus{outline:2px solid var(--steel);border-color:var(--steel)}
.quote-form textarea{min-height:82px;resize:vertical}
.quote-form button{width:100%;margin-top:18px;justify-content:center}
.quote-form .fineprint{font-size:.77rem;color:var(--muted);margin-top:10px}

/* ---------- Utility ---------- */
.mt0{margin-top:0}.mb0{margin-bottom:0}
.tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}
.tag{background:var(--ice);color:var(--steel);border-radius:6px;padding:3px 10px;font-size:.8rem;font-weight:700}
.divider{height:1px;background:var(--line);margin:0}

/* ============ Emerald City Builders — construction theme override ============ */
:root{
  --navy:#15181c; --navy-2:#222831; --steel:#3a4655; --ice:#f1f4f8;
  --red:#ef7d10; --red-dark:#d96c06; --amber:#f5a623; --green:#1f9d57;
  --ink:#171a1e; --muted:#5c6677; --line:#e3e8ef; --bg:#f6f8fb;
}
.hero{background:radial-gradient(1100px 480px at 82% -10%,rgba(58,70,85,.55),transparent),linear-gradient(160deg,#15181c 0%,#222831 62%,#2c3542 100%)}
.btn-call{box-shadow:0 8px 22px rgba(239,125,16,.32)}
.eyebrow{color:var(--red)}
.card .ico{background:#fff3e6;color:var(--red)}
.lrow .fi,.feature-list .fi{color:var(--red)}

/* process steps */
.steps{counter-reset:s;display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
@media(max-width:820px){.steps{grid-template-columns:repeat(2,1fr)}}
@media(max-width:480px){.steps{grid-template-columns:1fr}}
.step{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:22px;position:relative;box-shadow:var(--shadow)}
.step::before{counter-increment:s;content:counter(s);position:absolute;top:-14px;left:18px;width:34px;height:34px;border-radius:50%;
  background:var(--red);color:#fff;font-weight:800;display:grid;place-items:center;font-size:1.05rem}
.step h4{margin:10px 0 6px;color:var(--navy)}.step p{color:var(--muted);font-size:.95rem;margin:0}

/* stat band */
.statband{background:var(--navy);color:#fff}
.statband .wrap{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;padding:34px 20px;text-align:center}
@media(max-width:700px){.statband .wrap{grid-template-columns:repeat(2,1fr)}}
.statband b{display:block;font-size:2.3rem;color:var(--amber);line-height:1}
.statband span{color:#c4cdd9;font-size:.9rem}

/* project tiles */
.projects{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
@media(max-width:900px){.projects{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.projects{grid-template-columns:1fr}}
.proj{border-radius:var(--radius);overflow:hidden;border:1px solid var(--line);background:var(--navy);color:#fff;min-height:200px;
  display:flex;flex-direction:column;justify-content:flex-end;padding:20px;position:relative}
.proj::before{content:"";position:absolute;inset:0;background:linear-gradient(160deg,#2c3542,#15181c);opacity:.92}
.proj>*{position:relative}.proj h4{margin:0 0 4px}.proj span{color:#c4cdd9;font-size:.85rem}
.proj .badge{position:absolute;top:14px;left:14px;background:var(--red);color:#fff;font-size:.7rem;font-weight:800;padding:4px 10px;border-radius:20px}

/* ============ call-first conversion + sample images ============ */
.callstrip{background:linear-gradient(90deg,#ef7d10,#f5a623);color:#15181c;text-align:center;font-weight:700;padding:9px 16px;font-size:.94rem}
.callstrip a{color:#15181c;text-decoration:underline;font-weight:800;white-space:nowrap}
.fab-call{position:fixed;right:22px;bottom:22px;z-index:60;display:inline-flex;align-items:center;gap:9px;background:var(--red);color:#fff;font-weight:800;font-size:1.02rem;padding:15px 22px;border-radius:999px;box-shadow:0 12px 34px rgba(239,125,16,.5);text-decoration:none;animation:fabpulse 2.4s infinite}
.fab-call:hover{text-decoration:none;filter:brightness(1.08)}
@keyframes fabpulse{0%{box-shadow:0 0 0 0 rgba(239,125,16,.55)}70%{box-shadow:0 0 0 18px rgba(239,125,16,0)}100%{box-shadow:0 0 0 0 rgba(239,125,16,0)}}
@media(max-width:880px){.fab-call{display:none}}
/* project tiles show the sample image with a bottom-gradient for text */
.proj{background-size:cover;background-position:center}
.proj::before{background:linear-gradient(180deg,rgba(21,24,28,.18) 38%,rgba(21,24,28,.9))!important;opacity:1!important}

/* ============ language switcher + RTL + mobile polish ============ */
#ec-lang{display:inline-flex;align-items:center;gap:5px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.22);border-radius:999px;padding:4px 8px 4px 10px}
#ec-lang .ec-globe{font-size:.95rem;line-height:1}
#ec-lang select{background:transparent;border:0;color:#fff;font:inherit;font-weight:700;font-size:.84rem;cursor:pointer;outline:none}
#ec-lang select option{color:#15181c}
@media(max-width:880px){ #ec-lang{order:-1} header.site .nav-phone{display:none} }
@media(max-width:380px){ #ec-lang select{max-width:80px} }

/* RTL (Arabic) */
html[dir=rtl] body{text-align:right}
html[dir=rtl] .hero-cta,html[dir=rtl] .hero-trust,html[dir=rtl] .strip .wrap,html[dir=rtl] .chips,html[dir=rtl] .crumbs{direction:rtl}
html[dir=rtl] .feature-list li{flex-direction:row-reverse}
html[dir=rtl] .fab-call{right:auto;left:22px}
html[dir=rtl] .skip{left:auto;right:8px}
html[dir=rtl] table.price th,html[dir=rtl] table.price td{text-align:right}
html[dir=rtl] .step::before{left:auto;right:18px}
html[dir=rtl] .center{text-align:center}

/* mobile-first polish */
html,body{max-width:100%;overflow-x:hidden}
@media(max-width:560px){
  h1{font-size:clamp(1.7rem,7vw,2.2rem)}
  .section{padding:46px 0}
  .callstrip{font-size:.84rem;padding:8px 12px}
  .btn-lg{padding:15px 22px;font-size:1.02rem}
  .hero-cta .btn{flex:1 1 100%;justify-content:center}
}

:root{--red:#c1440e;--red-dark:#c1440e;--amber:#c1440e;--accent:#c1440e}
.callstrip{background:linear-gradient(90deg,#c1440e,#c1440e);color:#fff;text-align:center;font-weight:700;padding:9px 16px;font-size:.94rem}.callstrip a{color:#fff;text-decoration:underline;font-weight:800}.fab-call{position:fixed;right:22px;bottom:22px;z-index:60;display:inline-flex;align-items:center;gap:9px;background:var(--red);color:#fff;font-weight:800;padding:15px 22px;border-radius:999px;box-shadow:0 12px 34px rgba(0,0,0,.35);text-decoration:none;animation:fabp 2.4s infinite}@keyframes fabp{0%{box-shadow:0 0 0 0 rgba(0,0,0,.4)}70%{box-shadow:0 0 0 18px rgba(0,0,0,0)}100%{box-shadow:0 0 0 0 rgba(0,0,0,0)}}@media(max-width:880px){.fab-call{display:none}}
.answer-capsule{max-width:66ch;margin:14px 0 4px;padding:14px 18px;border-left:4px solid var(--accent);background:rgba(127,127,127,.08);border-radius:0 10px 10px 0;font-size:1.02rem;line-height:1.6}
.trust-stack{display:flex;flex-wrap:wrap;gap:10px;margin:16px 0}.trust-stack .ts-item{display:inline-flex;align-items:center;gap:7px;background:rgba(127,127,127,.1);border:1px solid rgba(127,127,127,.22);border-radius:999px;padding:7px 14px;font-weight:700;font-size:.9rem;text-decoration:none;color:inherit}a.ts-item:hover{border-color:var(--accent)}
.byline{display:flex;align-items:center;gap:12px;margin:18px 0;padding:12px 0;border-top:1px solid rgba(127,127,127,.2);border-bottom:1px solid rgba(127,127,127,.2)}.byline-photo{border-radius:50%;object-fit:cover;flex:0 0 auto}.byline>div{display:flex;flex-direction:column}.byline-name{font-weight:800}.byline-meta{font-size:.86rem;opacity:.75}
.contact-areas{margin:22px 0}.contact-areas h3{margin:0 0 8px}.area-note{max-width:64ch;opacity:.9}
.emg-band{background:var(--accent);color:#fff}.emg-band .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;padding:16px 0}.emg-band a{color:#fff}.emg-band a[href^="/"]{text-decoration:underline;font-weight:800}.emg-band .btn{background:#15181c;color:#fff}
.card-emg{border:2px solid var(--accent)!important;background:rgba(127,127,127,.05)}
.emg-hours{margin:16px 0 4px;padding:12px 16px;border:1px solid rgba(127,127,127,.25);border-radius:10px;background:rgba(127,127,127,.06);font-size:.95rem;line-height:1.55;max-width:70ch}
.emg-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:16px;margin-top:20px}.emg-card{padding:18px 20px;border:1px solid rgba(127,127,127,.2);border-left:4px solid var(--accent);border-radius:0 10px 10px 0;background:rgba(127,127,127,.05)}.emg-card h3{margin:0 0 8px;display:flex;align-items:center;gap:10px;font-size:1.08rem}.emg-card p{margin:0;line-height:1.6}.emg-num{display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;flex:0 0 auto;border-radius:50%;background:var(--accent);color:#fff;font-size:.85rem;font-weight:800}
/* ================= Touch-target sizing (appended LAST) =================
   Concatenated AFTER base.css *and* after the per-site theme block gen.js generates, so a fix-up rule
   here always wins the cascade against the theme's top-level re-declarations.
   ====================================================================== */

/* ---------- Touch-target sizing (mobile / coarse pointers) ----------
   Measured on a live page at 375px: the header phone link — the primary conversion CTA on every page —
   was 141x20 CSS px, the hamburger 35x36, footer links 335x32 and service chips 42px tall. Lighthouse
   flags anything under ~48x48 with 8px spacing as "tap targets are not sized appropriately", and on a
   call-first site paid for by the click, a 20px-tall phone link is a lead-loss bug, not a polish item.
   Padding-only, so nothing reflows horizontally; min-height + inline-flex centring rather than fixed
   heights, so long labels still wrap.
   Gated on EITHER a coarse pointer OR the 880px breakpoint the rest of this file already uses. Width is
   the reliable half: `pointer: coarse` does NOT match in headless Chrome (verified — it reported a fine
   pointer on a 375px viewport), so a coarse-only gate would have been untestable here and could silently
   no-op on any browser that reports the pointer oddly. Desktop mouse users above 880px are unaffected. */
@media (pointer: coarse), (max-width: 880px) {
  /* .callstrip a is THE phone CTA — the top strip on every page. It measured 141x20 live.
     COST, measured and accepted: the strip grew 66px -> 86px on mobile, because its text already wrapped
     to two lines and the link now occupies 44 of them. A `.callstrip{padding:2px 12px}` trim was tried to
     claw that back and REMOVED again — it did not win the cascade even as the last rule in the file, and
     dead CSS is worse than none. H1 still measures above the fold at 375x812, so 20px is the right trade
     for a thumb-sized phone target on a call-first site. */
  .callstrip a, .nav-phone { display: inline-flex; align-items: center; min-height: 44px; padding: 0 6px; }
  .menu-btn { min-width: 44px; min-height: 44px; align-items: center; justify-content: center; }
  .brand { min-height: 44px; display: inline-flex; align-items: center; }
  footer.site a { min-height: 44px; display: flex; align-items: center; padding: 4px 0; }
  address.nap a { min-height: 44px; display: inline-flex; align-items: center; }
  .chip { min-height: 44px; display: inline-flex; align-items: center; }
  .callbar a { min-height: 48px; }
  .crumbs a { display: inline-block; padding: 13px 4px; }
}
/* the 880px block earlier sets .menu-btn{display:block}; inline-flex is what centres the glyph in the 44px box */
@media (max-width: 880px) { .menu-btn { display: inline-flex } }