/* sth-blog1 unique blog blocks (index + post). */
/* sth-consist1b: drop blog .eb chrome override; use canonical .eb (flex, gap 8) */
.blog-page .eb-mark{width:14px;height:14px;flex:none}
.blog-page .eb-trail{display:inline-block;width:48px;height:2px;background:linear-gradient(90deg,var(--yellow,#FED14D),transparent);border-radius:2px;margin-left:2px}
.blog-page .sec.paper{background:#f6f7fb}
.blog-page .feat img,.blog-page .pc img{width:100%;height:100%;object-fit:cover;display:block}
.blog-page .feat-ph{overflow:hidden}
.blog-page .pc-ph{overflow:hidden;aspect-ratio:16/10;background:#1a2744}
.blog-page .pc{display:flex;flex-direction:column;border:1px solid var(--line,#e6e8ef);border-radius:16px;overflow:hidden;background:#fff;text-decoration:none;color:inherit;box-shadow:0 8px 24px rgba(0,5,62,.06)}
.blog-page .pc-body{padding:16px 16px 18px;display:flex;flex-direction:column;gap:8px;flex:1}
.blog-page .pc-k{font-size:11px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--navy2,#002D5C)}
.blog-page .pc h3{font-size:18px;color:var(--navy,#00053E);margin:0;line-height:1.25}
.blog-page .pc p{margin:0;color:var(--muted,#5b6475);font-size:14px;line-height:1.45;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.blog-page .pc-meta{font-size:12px;font-weight:600;color:var(--navy2,#002D5C);margin-top:auto}
@media(max-width:639px){.blog-page .pc p{display:none}}
.blog-page .fqs{display:grid;gap:10px;margin-top:18px}
.blog-page details.fq{background:#fff;border:1px solid rgba(255,255,255,.12);border-radius:12px;padding:0}
.blog-page .sec.D details.fq{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.12)}
.blog-page .sec.L details.fq{background:#fff;border-color:var(--line,#e6e8ef)}
.blog-page details.fq summary{cursor:pointer;list-style:none;padding:14px 16px;font-weight:700;color:inherit}
.blog-page details.fq summary::-webkit-details-marker{display:none}
.blog-page details.fq[open] summary{border-bottom:1px solid rgba(0,0,0,.06)}
.blog-page details.fq p{margin:0;padding:12px 16px 16px;line-height:1.55}
.blog-page .sec.D details.fq summary,.blog-page .sec.D details.fq p{color:#fff}
.blog-page .sec.D details.fq p{color:rgba(255,255,255,.82)}
.blog-chips{display:flex;flex-wrap:wrap;gap:8px;margin:22px 0 0;padding:0;list-style:none}
.blog-chips button{
  appearance:none;border:1.5px solid var(--line);background:#fff;color:var(--navy);
  font:700 13px/1 Inter,system-ui,sans-serif;letter-spacing:.04em;
  padding:10px 14px;border-radius:999px;cursor:pointer;min-height:40px;
  white-space:nowrap;
}
.blog-chips button[aria-pressed="true"],.blog-chips button.is-on{
  background:var(--navy);color:#fff;border-color:var(--navy);
}
.blog-chips .cnt{opacity:.65;font-weight:600;margin-left:4px}
.blog-chips button[aria-pressed="true"] .cnt,.blog-chips button.is-on .cnt{opacity:.85}

.feat{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:0;margin-top:28px;border-radius:var(--r);overflow:hidden;border:1px solid var(--line);background:#fff;box-shadow:0 12px 32px rgba(0,5,62,.08);text-decoration:none;color:inherit}
.feat-ph{position:relative;min-height:280px;background:linear-gradient(135deg,#1a2744,#3a5070 50%,#c4b49a);aspect-ratio:4/3}
.feat-ph::after{content:attr(data-label);position:absolute;left:12px;top:12px;z-index:2;background:var(--yellow);color:var(--navy);font-size:10px;font-weight:800;letter-spacing:.1em;padding:5px 8px;border-radius:6px}
.feat-body{padding:28px 26px;display:flex;flex-direction:column;justify-content:center;gap:10px}
.feat-k{display:inline-flex;align-items:center;gap:8px;font-size:11px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--navy2)}
.feat-k .pill{background:var(--yellow);color:var(--navy);padding:4px 8px;border-radius:6px;letter-spacing:.08em}
.feat h3{font-size:clamp(22px,2.4vw,28px);color:var(--navy);max-width:22ch}
.feat p{margin:0;color:var(--muted);font-size:15px;line-height:1.5;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.feat-meta{display:flex;flex-wrap:wrap;gap:10px 16px;font-size:13px;font-weight:600;color:var(--navy2);margin-top:6px}

.pc-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin-top:28px}
.pc{display:flex;flex-direction:column;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;background:#fff;text-decoration:none;color:inherit;box-shadow:0 8px 24px rgba(0,5,62,.05);transition:transform .15s ease,box-shadow .15s ease;min-height:100%}
.pc:hover{transform:translateY(-2px);box-shadow:0 14px 32px rgba(0,5,62,.1)}
.pc-ph{position:relative;aspect-ratio:16/10;background:linear-gradient(135deg,#243352,#5a6e8c)}
.pc-ph.hvac{background:linear-gradient(135deg,#1a2744 0%,#3d5a80 55%,#b8c4d4)}
.pc-ph.plumbing{background:linear-gradient(135deg,#1e2a3a 0%,#4a6a7a 55%,#c5d4d8)}
.pc-ph.electrical{background:linear-gradient(135deg,#221a10 0%,#6a5a30 55%,#e0d4a8)}
.pc-ph::after{content:attr(data-label);position:absolute;left:10px;top:10px;background:var(--yellow);color:var(--navy);font-size:10px;font-weight:800;letter-spacing:.1em;padding:4px 7px;border-radius:5px}
.pc-body{padding:16px 16px 18px;display:flex;flex-direction:column;gap:8px;flex:1}
.pc-cat{font-size:11px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--navy2)}
.pc h3{font-size:17px;color:var(--navy);max-width:none;line-height:1.3}
.pc p{margin:0;font-size:14px;line-height:1.45;color:var(--muted);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.pc-meta{margin-top:auto;padding-top:8px;font-size:12px;font-weight:700;color:var(--navy2)}
.pc.is-hidden{display:none}

/* post layout */
.post-hero.ab-hero{min-height:420px;padding:100px 0 56px}
.post-hero .hc{padding-right:min(280px,26%)}
.post-hero h1{font-size:clamp(28px,3.6vw,44px);max-width:18ch}
.art-wrap{display:grid;grid-template-columns:minmax(0,1fr);gap:28px;max-width:760px;margin:0 auto}
.toc{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:18px 20px;margin:0 0 8px}
.toc-k{display:flex;align-items:center;gap:8px;font-size:12px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--navy2);margin:0 0 10px}
.toc ol{list-style:none;margin:0;padding:0;counter-reset:t}
.toc li{counter-increment:t;border-top:1px solid var(--line)}
.toc li:first-child{border-top:0}
.toc a{display:flex;gap:12px;padding:10px 0;color:var(--ink);text-decoration:none;font-size:15px;font-weight:600;line-height:1.35}
.toc a::before{content:counter(t,decimal-leading-zero);font-size:12px;font-weight:800;color:var(--navy2);letter-spacing:.06em;min-width:22px;padding-top:2px}
.toc{position:static} /* never sticky */

.prose{font-size:17px;line-height:1.65;color:var(--ink)}
.prose > * + *{margin-top:1.1em}
.prose h2{font-size:clamp(22px,2.4vw,28px);max-width:none;color:var(--navy);margin-top:1.6em}
.prose h3{font-size:18px;color:var(--navy);margin-top:1.3em}
.prose p{margin:0;text-wrap:pretty}
.prose ul{margin:0;padding-left:1.2em}
.prose li{margin:.35em 0}
.prose .sample-banner{
  display:inline-flex;align-items:center;gap:8px;background:rgba(254,209,77,.2);
  border:1px solid rgba(254,209,77,.55);color:var(--navy);font-size:12px;font-weight:800;
  letter-spacing:.1em;text-transform:uppercase;padding:6px 10px;border-radius:8px;margin:0 0 16px;
}
.byline{font-size:14px;color:var(--muted);margin:0 0 18px;display:flex;flex-wrap:wrap;gap:8px 14px;font-weight:600}

.inline-cta{margin:28px 0;padding:22px 22px;border-radius:var(--r);background:linear-gradient(160deg,var(--navy),var(--navy2));color:#fff;display:grid;gap:14px}
.inline-cta .k{font-size:12px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--yellow);margin:0}
.inline-cta h3{color:#fff;font-size:clamp(20px,2.2vw,24px);max-width:22ch;margin:0}
.inline-cta p{margin:0;color:rgba(255,255,255,.78);font-size:15px;line-height:1.5;max-width:46ch}
.inline-cta .ctas{margin:0}
.sec.L .inline-cta .btn.book,.inline-cta .btn.book{border-color:rgba(255,255,255,.75)!important;color:#fff!important}
.inline-cta .btn.call{box-shadow:0 8px 24px rgba(254,209,77,.35)}

.rel-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin-top:22px}

/* yellow 24/7 strip (confirmed) before footer */
.strip-247{background:var(--yellow);color:var(--navy);padding:28px 0}
.strip-247 .wrap{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:24px}
.strip-247 .sh{width:88px;height:auto;filter:drop-shadow(0 8px 16px rgba(0,5,62,.18))}
.strip-247 .sk{margin:0 0 4px;font-size:13px;font-weight:700;letter-spacing:.14em;text-transform:uppercase}
.strip-247 .st{margin:0;font-family:Saira,sans-serif;font-weight:800;font-size:clamp(22px,2.6vw,28px);line-height:1.15;text-wrap:balance;max-width:22ch}
.strip-247 .ctas{margin:0}
.strip-247 .btn.call{background:var(--navy);color:#fff;box-shadow:none}
.strip-247 .btn.book{border-color:var(--navy);color:var(--navy)}

@media(max-width:900px){
  .feat{grid-template-columns:1fr}
  .feat-ph{min-height:200px;aspect-ratio:16/9}
  .pc-grid,.rel-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .strip-247 .wrap{grid-template-columns:72px minmax(0,1fr);gap:16px}
  .strip-247 .sh{width:72px}
  .strip-247 .ctas{grid-column:1/-1}
}
@media(max-width:640px){
  .pc-grid,.rel-grid{grid-template-columns:1fr}
  .pc p{display:none} /* excerpts hidden on phone except featured - match Aria */
  .post-hero .hc{padding-right:0}
  .post-hero .mascot,.post-hero .runlane{display:none}
  .post-hero.ab-hero{min-height:0;padding:88px 0 48px}
  .facts .fg{grid-template-columns:1fr 1fr}
  .facts .fg > div:nth-child(2){border-right:0}
  .facts .fg > div:nth-child(1),.facts .fg > div:nth-child(2){border-bottom:1px solid var(--line)}
}
@media(max-width:700px){
  .hero.ab-hero{min-height:0;padding:0 0 56px}
  .hero .hc{padding-right:0}
  .hero .mascot{width:120px;right:12px;bottom:12%}
  .hero .runlane{display:none}
  .mock-ctas .btn.book{display:none}
}

/* Find Help (Aria #find-help)  -  dark section, trade tiles + CTA dock */
.fh-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:24px;padding:0;list-style:none}
.fh-tile{margin:0}
.fh-tile a{display:flex;flex-direction:column;border-radius:var(--r);overflow:hidden;border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.06);text-decoration:none;color:#fff;transition:transform .15s ease,box-shadow .15s ease;min-height:100%}
.fh-tile a:hover{transform:translateY(-2px);box-shadow:0 14px 32px rgba(0,0,0,.25)}
.fh-ph{aspect-ratio:16/10;position:relative;overflow:hidden;background:linear-gradient(135deg,#1a2744,#3d5a80)}
.fh-tile:nth-child(2) .fh-ph{background:linear-gradient(135deg,#1e2a3a,#4a6a7a)}
.fh-tile:nth-child(3) .fh-ph{background:linear-gradient(135deg,#221a10,#6a5a30)}
.fh-ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;display:block}
.fh-ph[data-label]::after{content:attr(data-label);position:absolute;left:10px;top:10px;background:var(--yellow);color:var(--navy);font-size:10px;font-weight:800;letter-spacing:.1em;padding:4px 7px;border-radius:5px;z-index:1}
.fh-nm{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:14px 16px;font-family:Saira,sans-serif;font-weight:700;font-size:17px}
.fh-ar{color:var(--yellow)}
.fh-dock{margin-top:22px;display:grid;grid-template-columns:minmax(0,1.3fr) auto;gap:24px;align-items:center;padding:24px 26px;border-radius:var(--r);background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);border-left:6px solid var(--yellow)}
.fh-dock h3{margin:0 0 6px;color:#fff;font-size:clamp(20px,2.2vw,24px);max-width:24ch}
.fh-dock p{margin:0;color:rgba(255,255,255,.75);font-size:15px;line-height:1.45;max-width:48ch}
.fh-dock .ctas{margin:0}
.fh-dock .btn.book{border-color:rgba(255,255,255,.75);color:#fff}
.fh-body{display:flex;flex-direction:column;gap:0}

/* Start-here note under guides (Aria) */
.start-note{margin-top:28px;padding:18px 20px;border-radius:var(--r);background:#fff;border:1px solid var(--line);border-left:5px solid var(--yellow);box-shadow:0 8px 24px rgba(0,5,62,.05);font-size:14px;line-height:1.45;color:var(--muted)}
.start-note strong{color:var(--navy)}
.start-note a[href^="tel:"]{color:var(--navy);font-weight:700;text-decoration:underline;text-underline-offset:2px}
.start-note a[href^="tel:"]:hover{color:var(--navy2)}

/* Quick answer callout (Aria ar-callout) */
.qa-call{margin:0 0 22px;padding:18px 20px;border-radius:var(--r);background:var(--paper);border:1px solid var(--line);border-left:5px solid var(--yellow)}
.qa-call .k{display:flex;align-items:center;gap:8px;margin:0 0 8px;font-size:12px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--navy2)}
.qa-call p{margin:0;font-size:16px;line-height:1.5;color:var(--ink)}

/* Mid dock after when-to-call (Aria .bx-dock) */
.bx-dock{margin:28px 0;padding:24px 26px;border-radius:var(--r);background:linear-gradient(160deg,var(--navy),var(--navy2));color:#fff;display:grid;grid-template-columns:minmax(0,1.3fr) auto;gap:20px;align-items:center;border-left:6px solid var(--yellow)}
.bx-dock .k{margin:0 0 6px;font-size:12px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--yellow);display:flex;align-items:center;gap:8px}
.bx-dock h3{margin:0 0 8px;color:#fff;font-size:clamp(20px,2.2vw,26px);max-width:22ch}
.bx-dock ul{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:6px}
.bx-dock li{font-size:14px;color:rgba(255,255,255,.8);padding-left:14px;position:relative}
.bx-dock li::before{content:"";position:absolute;left:0;top:.55em;width:6px;height:6px;border-radius:50%;background:var(--yellow)}
.bx-dock .ctas{margin:0;flex-direction:column;align-items:stretch}
.bx-dock .btn{width:100%;justify-content:center}
.bx-dock .btn.book,.sec.L .bx-dock .btn.book{border-color:rgba(255,255,255,.75)!important;color:#fff!important}

/* Mobile TOC as details (Aria .bx-tocm) */
.toc-m{display:none;margin:0 0 18px;border:1px solid var(--line);border-radius:var(--r);background:#fff;overflow:hidden}
.toc-m > summary{list-style:none;cursor:pointer;padding:14px 16px;font-weight:700;font-size:14px;display:flex;justify-content:space-between;align-items:center;color:var(--navy)}
.toc-m > summary::-webkit-details-marker{display:none}
.toc-m > summary::after{content:"+";font-size:20px;color:var(--navy2)}
.toc-m[open] > summary::after{content:"-"}
.toc-m ol{list-style:none;margin:0;padding:0 16px 14px;counter-reset:t}
.toc-m li{counter-increment:t;border-top:1px solid var(--line)}
.toc-m a{display:flex;gap:12px;padding:10px 0;color:var(--ink);text-decoration:none;font-size:14px;font-weight:600}
.toc-m a::before{content:counter(t,decimal-leading-zero);font-size:11px;font-weight:800;color:var(--navy2);min-width:22px}

/* Final CTA band (Aria #cta) kept as STH Book dark */
.sec.bk h2{max-width:none}

@media(max-width:900px){
  .fh-grid{grid-template-columns:1fr}
  .fh-dock{grid-template-columns:1fr}
  .bx-dock{grid-template-columns:1fr}
}
@media(max-width:700px){
  .toc{display:none}
  .toc-m{display:block}
  .feat p{-webkit-line-clamp:3}
}


/* hero-std1: height from shared r2 --sth-hero-h + facts-feet.js plant; blog only reserves CTA/trust gutter at 390 so Book/trust clear the gen-host (no shrink/crop/mirror). */
@media (max-width:599px){
  html body.blog-page .hero .ctas.onDark:not(#_),
  html body.blog-page .hero ul.trust.h1-chips:not(#_){
    max-width:calc(100% - 184px)!important;
  }
}

/* ===== sth-glance-fix1c-r272b-blog ===== */
@media (max-width:700px){
  html body.blog-page main section.hero.ab-hero:not(#_):not(#_):not(#_){
    padding-top:0!important;
  }
}

/* m390 blog fix (nov4): blog pages carry t-hub/t-hub1, so the nav1.css hub rule put the gd mascot host at bottom:100% (under header) at <=699px. Same fix as g-hero4.css m390: feet on hero photo bottom. */
@media (max-width:699px){
  html body.blog-page:not(.t-city) main section.hero.ab-hero .ab-hrob.svc-hrob.hsc-about.gen-host:has(>.gen-hh[data-hh="gd"]):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_){
    top:auto!important;bottom:anchor(--sth-hero-photo bottom)!important;width:var(--sth-msz)!important;
  }
}

/* Claude F12 ONLY: blog CTA container uses the shared phone content width.
   v2 (2026-11-07): hero .hc has padding-right:0 below 700px, so 100% ran to the viewport edge;
   subtract the 22px phone .wrap gutter so buttons end where the glance card ends.
   Keep trust/mascot gutter, button height/colours/labels and >=700 layout. */
@media(max-width:699px){
  html body.blog-page main section.hero #hero-ctas:not(#_){
    max-width:calc(100% - 22px)!important;
  }
}

/* F07 article FAQ: restore normal shared two-column grid; retain photo+contact. */
@media(min-width:900px) and (max-width:1023px){html body.blog-page:has(main>section#article) main #faq .fqw:not(#_):not(#_){grid-template-columns:minmax(0px, 1fr) minmax(0px, 1.25fr)!important}}
@media(min-width:1024px){html body.blog-page:has(main>section#article) main #faq .fqw:not(#_):not(#_){grid-template-columns:1fr 1.5fr!important}}

/* F07 fix (Bang t2980): article FAQ shows ONE shared <i> plus/minus (hide legacy gen5 summary::after "+"), and natural closed row height (grid .fqs no row stretch). */
html body.blog-page:has(main>section#article) main #faq .fqs .fq summary:not(#_):not(#_)::after{content:none!important;display:none!important}
html body.blog-page:has(main>section#article) main #faq .fqs:not(#_):not(#_){align-content:start!important}