/* hf-visual.css: VISUAL SYSTEM for Home Fortress Roofing & Construction on the deterministic Bluebird skeleton.
   Loads AFTER assets/bb-skeleton.css and overrides paint only. The skeleton keeps the layout, the section order,
   the row alternation (.bb-row / .bb-row-rev) and the 1024 / 860 / 600 collapses. Nothing here changes markup.
   System ported from the measured a client build (see a client repo section 1
   for the numbers read out of ~/hero-rebuild/src/index.html): radius 14px containers / 100px pills / 10px small
   chrome; a two-rung neutral shadow ladder plus one lift rung; brand gradients; accent-tinted shadow ONLY under
   accent objects; three weights 800 / 700 / 600; band colour changes instead of rules; 3 restrained keyframes.
   Colours are this client's own tokens (docs/hf-palette.json): --navy from the logo ink, --orange = the CTA blue
   sampled from the client's own offer graphic, --accent-on-dark for blue text and icons on navy.
   Every rule the skeleton sets per breakpoint or per variant is RESTATED at the end of this sheet. */

:root {
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 20px; --sp-6: 24px; --sp-7: 28px; --sp-8: 32px; --sp-9: 40px; --sp-10: 48px; --sp-11: 56px; --sp-12: 64px; --sp-13: 78px;
  /* channel triplets of the brand tokens (brand-tokens.css: --orange #0a68d4, --navy #031b37, --accent-on-dark #8ec2ff)
     so tints read rgba(var(--accent-rgb), a) instead of repeating the literal */
  --accent-rgb: 10,104,212;
  --navy-rgb: 3,27,55;
  --accent-on-dark-rgb: 142,194,255;
  --r-card: var(--radius);
  --r-md: 12px;
  --r-sm: 10px;
  --r-xs: 8px;
  --r-pill: 100px;
  --edge-tab-w: 44px;
  --sh-1: 0 8px 24px rgba(30,34,40,.05);
  --sh-2: 0 8px 24px rgba(30,34,40,.06);
  --sh-lift: 0 16px 38px rgba(30,34,40,.13);
  --sh-float: 0 20px 46px rgba(20,22,26,.18);
  --sh-accent: 0 8px 20px rgba(var(--accent-rgb),.30);
  --sh-accent-2: 0 6px 16px rgba(var(--accent-rgb),.36);
  --grad-brand: linear-gradient(90deg, var(--orange-2) 0%, var(--orange) 60%, #2f86ea 100%);
  --grad-dark: linear-gradient(120deg, var(--navy) 0%, var(--navy-2) 100%);
  --grad-pale: linear-gradient(180deg, var(--tint) 0%, #eaeef5 100%);
  --hdr-h: 82px;
  --logo-h: 68px;
}

/* programmatic scrolls stay instant so full-page captures and the reveal sweep reach the bottom */
html { scroll-behavior: auto; }

/* ---------- type: weight contrast carries the hierarchy ---------- */
body { font-weight: 400; -webkit-font-smoothing: antialiased; }
h1 { font-size: clamp(2.15rem, 4.4vw, 3.3rem); font-weight: 800; letter-spacing: -0.02em; line-height: 1.08; text-wrap: balance; }
h2 { font-size: clamp(1.7rem, 3vw, 2.4rem); font-weight: 800; letter-spacing: -0.02em; line-height: 1.14; text-wrap: balance; }
h3 { font-weight: 700; letter-spacing: -0.005em; text-wrap: balance; }
b, strong { font-weight: 600; }
.muted { font-weight: 500; }
.section-lead, .dir-intro { font-size: 1.08rem; color: var(--muted); font-weight: 500; max-width: 62ch; }
.bb-dark .section-lead, .bb-dark .dir-intro { color: rgba(255,255,255,.8); }
.bb-center-head > .wrap > .section-lead, .bb-center-head > .wrap > .dir-intro { margin-top: -18px; margin-bottom: var(--sp-9); }
.kicker { font-weight: 700; letter-spacing: .16em; font-size: .76rem; background: rgba(var(--accent-rgb),.10); color: var(--accent-text); padding: var(--sp-2) var(--sp-4); border-radius: var(--r-pill); margin-bottom: var(--sp-4); }
.bb-dark .kicker, .bb-card-dark .kicker { background: rgba(var(--accent-on-dark-rgb),.14); color: var(--accent-on-dark); }
.entity .kicker { background: none; padding: 0; margin-bottom: var(--sp-2); }
/* the dark card is a flex column, which stretched the kicker pill across the whole card */
.bb-card .kicker { align-self: flex-start; }
a { color: var(--accent-text); }

/* ---------- buttons ---------- */
.btn { font-weight: 700; border-radius: var(--r-pill); transition: transform .18s ease, box-shadow .18s ease, background-color .18s ease, color .18s ease; }
.btn-cta { background: var(--orange); color: var(--white); box-shadow: var(--sh-accent); }
.btn-cta:hover { background: var(--orange-2); box-shadow: var(--sh-accent-2); transform: translateY(-1px); }
.btn-ghost { border-color: var(--navy); color: var(--navy); }
.btn-ghost:hover { background: rgba(var(--navy-rgb),.06); }
.hero .btn-ghost, .bb-dark .btn-ghost, .bb-card-dark .btn-ghost, .dir-card .btn-ghost { border-color: rgba(255,255,255,.6); color: var(--white); background: rgba(255,255,255,.05); }
.hero .btn-ghost:hover, .bb-dark .btn-ghost:hover, .dir-card .btn-ghost:hover { background: rgba(255,255,255,.14); border-color: rgba(255,255,255,.85); }
.btn-light { background: var(--white); color: var(--navy); box-shadow: var(--sh-2); }
.btn-light:hover { background: var(--tint); transform: translateY(-1px); box-shadow: var(--sh-lift); }
.btn:focus-visible, a:focus-visible, button:focus-visible, summary:focus-visible, input:focus-visible, textarea:focus-visible { outline: 3px solid rgba(var(--accent-rgb),.5); outline-offset: 2px; }

/* ---------- header: white, because the client's logo is dark ink on white ---------- */
.site-header { background: var(--white); border-bottom: 1px solid var(--line); box-shadow: 0 6px 24px rgba(var(--navy-rgb),.07); }
.header-in { height: var(--hdr-h); gap: var(--sp-5); }
.logo-img { height: var(--logo-h); }
.nav a { color: var(--navy); font-weight: 600; border-radius: var(--r-sm); padding: var(--sp-3) var(--sp-4); }
.nav a:hover, .has-sub > a[aria-expanded="true"] { background: rgba(var(--accent-rgb),.08); color: var(--accent-text); }
.sub, .sub li, .sub-group, .sub-group > ul { list-style: none; }
.sub { top: calc(100% + 6px); border-radius: var(--r-sm); box-shadow: var(--sh-float); padding: var(--sp-3); min-width: 270px; }
.sub::before { content: ""; position: absolute; left: 0; right: 0; top: -8px; height: 8px; }
.sub a { padding: var(--sp-3) var(--sp-4); border-radius: var(--r-xs); }
.sub-all a { border-top: 1px solid var(--line); margin-top: var(--sp-2); border-radius: 0 0 var(--r-xs) var(--r-xs); color: var(--accent-text); }
.header-phone { font-weight: 800; font-size: 1rem; }
.header-phone .ic { color: var(--orange); }
.header-phone:hover { color: var(--accent-text); }
.header-cta { padding: var(--sp-4) var(--sp-6); }

/* ---------- trust bar ---------- */
.trust-bar { background: var(--grad-dark); }
.trust-in { color: rgba(255,255,255,.86); font-weight: 500; padding: var(--sp-2) var(--sp-6); font-size: .93rem; }
.trust-in b { color: var(--white); font-weight: 700; }
.trust-in:hover .trust-txt { color: var(--white); }

/* ---------- hero: navy wash over the emitter's photo + one soft blue glow ---------- */
.hero { isolation: isolate; overflow: clip; padding: var(--sp-11) 0; }
.hero:has(.hero-grid) { padding: var(--sp-8) 0; }
.hero::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: linear-gradient(100deg, rgba(var(--navy-rgb),.52) 0%, rgba(var(--navy-rgb),.26) 55%, rgba(var(--navy-rgb),.04) 100%), linear-gradient(180deg, rgba(var(--navy-rgb),0) 60%, rgba(var(--navy-rgb),.45) 100%); }
.hero::after { content: ""; position: absolute; z-index: -1; pointer-events: none; width: 1100px; height: 640px; right: -260px; top: -280px; border-radius: 50%; background: radial-gradient(closest-side, rgba(var(--accent-rgb),.42), rgba(var(--accent-rgb),.14) 45%, transparent 72%); animation: hf-glow 14s ease-in-out infinite; }
.hero .kicker { background: rgba(var(--accent-rgb),.28); border: 1px solid rgba(var(--accent-on-dark-rgb),.45); color: var(--white); }
.hero h1 { color: var(--white); text-shadow: 0 2px 18px rgba(0,0,0,.3); margin-bottom: var(--sp-3); }
.h1-accent { color: var(--accent-on-dark); font-style: normal; }
.hero-sub { color: rgba(255,255,255,.9); font-size: 1.05rem; max-width: 54ch; }
.hero-sub a { color: var(--white); font-weight: 600; }
.hero-ctas { margin: var(--sp-4) 0; }
.hero-chips { flex-direction: row; flex-wrap: wrap; gap: var(--sp-3); }
/* row 288 (Dylan ruling 2026-10-02, reverses the look of 8b52739, text kept): each trust claim is a bounded pill:
   1px border in the accent-on-dark token, pill radius token, a subtle translucent fill, check icon + text */
.hero-chips li { align-items: center; background: rgba(255,255,255,.10); border: 1px solid rgba(var(--accent-on-dark-rgb),.45); border-radius: var(--r-pill); color: var(--white); font-weight: 600; font-size: .86rem; line-height: 1.3; padding: var(--sp-2) var(--sp-4); text-shadow: 0 1px 6px rgba(0,0,0,.35); }
.hero-chips .ic, .hero .btn .ic { color: currentColor; }
.hero-chips .ic { color: var(--accent-on-dark); width: 18px; height: 18px; flex: none; }
.hero-glance { margin-top: var(--sp-3); max-width: 60ch; }
.hero-glance > summary { cursor: pointer; font-weight: 700; font-size: .88rem; color: var(--accent-on-dark); list-style: none; display: inline-flex; align-items: center; gap: var(--sp-2); padding: 0; border: 0; background: none; text-decoration: underline; text-underline-offset: 3px; }
.hero-glance > summary::-webkit-details-marker { display: none; }
.hero-glance > summary::after { content: "+"; font-weight: 800; }
.hero-glance[open] > summary::after { content: "\2212"; }
.tldr { background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.16); border-left: 4px solid var(--accent-on-dark); border-radius: 0 var(--r-md) var(--r-md) 0; padding: var(--sp-4) var(--sp-5); font-size: .95rem; line-height: 1.5; }
.tldr p { font-weight: 500; margin-bottom: .5em; }
.tldr li { color: rgba(255,255,255,.9); font-size: .92rem; margin-bottom: var(--sp-1); }
.triples p { color: rgba(255,255,255,.84); font-size: .88rem; padding-left: var(--sp-3); border-left: 2px solid rgba(var(--accent-on-dark-rgb),.5); margin-bottom: var(--sp-2); }
.bb-hero-center .kicker { display: inline-block; }

/* ---------- the client's process video in the hero ---------- */
.hf-video { max-width: 420px; margin: 0 0 var(--sp-4); }
.hf-video-facade, .hf-video iframe { position: relative; display: block; width: 100%; aspect-ratio: 16 / 9; height: auto; border-radius: var(--r-card); overflow: hidden; border: 1px solid rgba(255,255,255,.28); box-shadow: var(--sh-float); background: var(--navy); }
.hf-poster { position: absolute; inset: 0; background-size: cover; background-position: center; transition: transform .4s ease; }
.hf-video-facade:hover .hf-poster { transform: scale(1.03); }
.hf-play { position: absolute; left: 50%; top: 46%; width: 76px; height: 76px; margin: -38px 0 0 -38px; border-radius: 50%; background: var(--orange); box-shadow: 0 10px 30px rgba(var(--navy-rgb),.45); display: flex; align-items: center; justify-content: center; transition: transform .18s ease, background-color .18s ease; }
.hf-play svg { width: 34px; height: 34px; fill: var(--white); margin-left: var(--sp-1); }
.hf-video-facade:hover .hf-play { transform: scale(1.06); background: var(--orange-2); }
.hf-video-cap { position: absolute; left: 0; right: 0; bottom: 0; padding: 26px var(--sp-4) var(--sp-3); background: linear-gradient(180deg, transparent 0%, rgba(var(--navy-rgb),.88) 100%); color: var(--white); font-size: .9rem; font-weight: 500; text-align: left; }
.hf-video-cap b { font-weight: 800; }
.hf-dur { float: right; font-weight: 700; background: rgba(0,0,0,.45); border-radius: var(--r-xs); padding: 1px 7px; font-size: .8rem; }

/* ---------- areas hub: every town and ZIP ---------- */
.zip-areas { margin-top: var(--sp-11); background: var(--tint); border: 1px solid var(--line); border-radius: var(--r-card); padding: var(--sp-8) var(--sp-9); }
.zip-areas > .hf-panel-title { text-align: center; }
.zip-lead { text-align: center; color: var(--muted); max-width: 62ch; margin: 0 auto var(--sp-6); }
.zip-list { list-style: none; columns: 4 200px; column-gap: var(--sp-8); }
.zip-list li { break-inside: avoid; padding: 6px 0; border-bottom: 1px solid var(--line); font-weight: 600; color: var(--navy); }
.zip-list a { color: var(--accent-text); }
.zip-list .zip { font-weight: 500; color: var(--muted); font-size: .9rem; }

/* ---------- form card ---------- */
.form-card { border-radius: var(--r-card); border-top: 5px solid var(--orange); box-shadow: var(--sh-float), 0 2px 6px rgba(20,22,26,.1); padding: var(--sp-6); }
.form-kicker { font-weight: 700; letter-spacing: .14em; }
.form-title { font-weight: 800; letter-spacing: -0.01em; }
.form-rating { font-weight: 500; color: var(--muted); }
.form-rating b { color: var(--navy); font-weight: 700; }
.form-card label { font-weight: 600; margin-bottom: var(--sp-2); }
.form-card input, .form-card textarea { border-radius: var(--r-sm); border-color: #cfd6e2; background: #fbfcfe; transition: border-color .18s ease, box-shadow .18s ease; }
.form-card input:focus, .form-card textarea:focus { border-color: var(--orange); box-shadow: 0 0 0 3px rgba(var(--accent-rgb),.16); outline: 0; }
.form-card .btn-block { min-height: 56px; }
.preview-note { color: var(--accent-text); }

/* ---------- breadcrumb ---------- */
.crumbs { font-weight: 500; }
.crumbs a { color: var(--muted); }

/* ---------- bands ---------- */
.bb-pale { background: var(--grad-pale); }
.bb-dark { background: var(--grad-dark); position: relative; isolation: isolate; overflow: hidden; }
.bb-dark::before { content: ""; position: absolute; z-index: -1; pointer-events: none; width: 900px; height: 520px; left: -260px; bottom: -300px; border-radius: 50%; background: radial-gradient(closest-side, rgba(var(--accent-rgb),.3), rgba(var(--accent-rgb),.08) 50%, transparent 72%); }
.bb-dark a:not(.btn):not(.area-card):not(.svc-card) { color: var(--accent-on-dark); }
.bb-dark .ic, .bb-card-dark .ic, .site-footer .ic { color: var(--accent-on-dark); }
/* adjacency: two same-treatment bands never touch (the emitter's order is fixed, so these are deterministic) */
.bb-dark + .bb-dark { background: var(--grad-pale); color: var(--ink); }
.bb-dark + .bb-dark::before { display: none; }
.bb-dark + .bb-dark h2, .bb-dark + .bb-dark h3 { color: var(--navy); }
.bb-dark + .bb-dark .kicker { background: rgba(var(--accent-rgb),.10); color: var(--accent-text); }
.bb-dark + .bb-dark .section-lead { color: var(--muted); }
.bb-dark + .bb-dark .step-card { box-shadow: var(--sh-2); border: 1px solid var(--line); }
.bb-white + .bb-white { background: var(--grad-pale); }
.bb-white + .bb-white .job-card, .bb-white + .bb-white .review-card { background: var(--white); }
.bb-white + .bb-white + .bb-pale { background: var(--white); }
.bb-white + .bb-white + .bb-pale .faq-item { background: var(--tint); }

/* ---------- rows, cards, photos ---------- */
.bb-media { border-radius: var(--r-card); box-shadow: var(--sh-2); }
.bb-card-dark { background: var(--grad-dark); box-shadow: var(--sh-lift); position: relative; isolation: isolate; overflow: hidden; }
.bb-card-dark::before { content: ""; position: absolute; z-index: -1; width: 520px; height: 360px; right: -200px; top: -200px; border-radius: 50%; background: radial-gradient(closest-side, rgba(var(--accent-rgb),.34), transparent 70%); pointer-events: none; }
.bb-card-dark a:not(.btn) { color: var(--accent-on-dark); }
.bb-icon-rows li { gap: var(--sp-4); }
.bb-icon-rows .ic { margin-top: 3px; }
.bb-icon-rows h3 { font-size: 1.04rem; }
/* the skeleton makes each bullet a flex row, which splits "<b>lead</b> text" into two narrow columns */
.check-list li { display: block; position: relative; padding-left: 34px; }
.check-list li > .ic { position: absolute; left: 0; top: 3px; }
.check-list li > b { margin-right: var(--sp-1); }
.bb-more-about summary { color: inherit; }
.bb-more-about[open] summary { margin-bottom: var(--sp-2); }
.bb-quote-card { background: var(--navy); border-left-color: var(--orange); box-shadow: var(--sh-lift); }
.entity-facts li { font-size: .93rem; }
.inline-cta a { font-weight: 700; }

.svc-card { background: var(--grad-dark); border-radius: var(--r-card); box-shadow: var(--sh-2); transition: transform .18s ease, box-shadow .18s ease; position: relative; overflow: hidden; padding-top: 6px; }
.svc-card::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 4px; background: var(--grad-brand); }
.svc-card:hover { transform: translateY(-4px); box-shadow: var(--sh-lift); }
.svc-card .ic { width: 46px; height: 46px; padding: 11px; border-radius: var(--r-md); background: rgba(var(--accent-on-dark-rgb),.14); color: var(--accent-on-dark); margin: var(--sp-6) var(--sp-6) var(--sp-4); }
.svc-card h3 { font-weight: 800; font-size: 1.18rem; margin: 0 var(--sp-6) var(--sp-2); }
.svc-card p { margin: 0 var(--sp-6) var(--sp-4); color: rgba(255,255,255,.82); }
.link-more { margin: 0 var(--sp-6); color: var(--accent-on-dark); font-size: .93rem; }
.bb-dark a.svc-card { color: var(--white); }
.bb-related .svc-card { background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.14); box-shadow: none; }

.bb-white-cards .offer-card, .bb-white-cards .team-card { border-radius: var(--r-card); box-shadow: var(--sh-lift); padding: var(--sp-7); display: flex; flex-direction: column; align-items: flex-start; }
.offer-card h3 { font-weight: 800; font-size: 1.22rem; margin-bottom: var(--sp-2); }
.offer-card p { flex: 1 1 auto; }
.badge-pill { background: rgba(var(--accent-rgb),.12); color: var(--accent-text); font-weight: 700; }
/* one team member: a single centred card, not a lone card in a three-column grid */
.card-grid:has(> .team-card:only-child) { grid-template-columns: minmax(0, 420px); justify-content: center; }
.bb-steps:has(> .step-card:nth-child(3):last-child) { grid-template-columns: repeat(3, 1fr); max-width: 940px; margin-left: auto; margin-right: auto; }
[data-section="next-steps"] .muted { text-align: center; margin-top: var(--sp-6); }
.team-card img { width: 100%; height: 230px; object-fit: cover; object-position: center 30%; border-radius: var(--r-sm); margin-bottom: var(--sp-4); }

/* ---------- steps ---------- */
.step-card { border-radius: var(--r-card); padding: var(--sp-7) 22px 26px; box-shadow: var(--sh-lift); }
.step-pill { background: var(--orange); font-weight: 800; }
/* row 153: the pill markup reads "01".."04" (tooling/build.mjs rewrites the rail's "Step : 0N"; Dylan ruling 2026-10-02) */
.step-icon { display: flex; border-radius: var(--r-card); background: rgba(var(--accent-rgb),.10); }
.step-icon .ic { color: var(--orange); }
.step-card h3 { min-height: 0; margin-bottom: var(--sp-2); font-size: 1.08rem; }

/* ---------- reviews ---------- */
.review-card { border-radius: var(--r-card); box-shadow: var(--sh-1); border: 1px solid var(--line); padding: var(--sp-6); display: flex; flex-direction: column; margin: 0; }
.review-card blockquote { font-style: normal; flex: 1 1 auto; font-size: .97rem; }
.review-card figcaption { font-weight: 700; }
.review-card figcaption .muted { font-weight: 500; }

/* ---------- FAQ ---------- */
.faq-item { border-radius: var(--r-card); padding: var(--sp-4) var(--sp-5); box-shadow: var(--sh-1); transition: box-shadow .18s ease; }
.faq-item[open] { box-shadow: var(--sh-2); border-color: rgba(var(--accent-rgb),.35); }
.faq-item summary { font-family: var(--font-head); font-weight: 700; list-style: none; position: relative; padding-right: 34px; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: "+"; position: absolute; right: 2px; top: -3px; font-size: 1.4rem; font-weight: 600; color: var(--orange); }
.faq-item[open] summary::after { content: "\2212"; }

/* ---------- service areas ---------- */
.area-cards { gap: var(--sp-3); }
.area-card { background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.2); border-radius: var(--r-sm); padding: var(--sp-3) var(--sp-4); font-size: .88rem; line-height: 1.3; transition: background-color .18s ease, transform .18s ease; }
.area-card:hover { background: var(--orange); transform: translateY(-1px); }
.area-card .ic { color: var(--accent-on-dark); }
.areas-hub-cta a { color: var(--accent-on-dark); }
.map-embed { border-radius: var(--r-card); box-shadow: var(--sh-2); }
.bb-areas-map .map-embed iframe { height: 420px; }
[data-section="contact-form"] .bb-media-map .map-embed iframe { height: 100%; }
.bb-chip { background: var(--tint); color: var(--navy); border: 1px solid var(--line); border-radius: var(--r-sm); transition: border-color .18s ease, transform .18s ease; }
.bb-chip:hover { border-color: var(--orange); transform: translateY(-1px); }
.bb-chip .ic { color: var(--orange); }
.bb-town-panel { background: var(--white); border-radius: var(--r-card); box-shadow: var(--sh-2); padding: 36px var(--sp-9); max-width: 920px; margin: 0 auto; text-align: left; }

/* ---------- real jobs ---------- */
.job-card { border-radius: var(--r-card); border: 1px solid var(--line); box-shadow: var(--sh-1); padding: var(--sp-5); }
.job-card img { height: 210px; border-radius: var(--r-sm); }
.job-town { color: var(--accent-text); }
.job-town .ic { color: var(--orange); width: 18px; height: 18px; }
.job-card h3 { font-size: 1.05rem; line-height: 1.35; }

/* ---------- directions ---------- */
.dir-card { background: var(--grad-dark); border-radius: var(--r-card); box-shadow: var(--sh-lift); }
.dir-card .map-embed { box-shadow: none; border-radius: var(--r-sm); }
.dir-facts a, .bb-dir-from { color: var(--accent-on-dark); }
.dir-facts li { color: rgba(255,255,255,.88); }

/* ---------- hub place cards ---------- */
.place-card { background: var(--grad-dark); border-radius: var(--r-card); box-shadow: var(--sh-2); display: flex; flex-direction: column; transition: transform .18s ease, box-shadow .18s ease; }
.place-card:not(:has(img))::before { content: ""; display: block; height: 220px; background: #f4f7fb url('/assets/img/hf-logo.png') center / 180px auto no-repeat; }
.place-card:hover { transform: translateY(-4px); box-shadow: var(--sh-lift); }
.place-body { flex: 1 1 auto; display: flex; flex-direction: column; justify-content: center; align-items: center; padding: var(--sp-7) var(--sp-5); }
.place-body .btn { font-size: .86rem; padding: 10px 18px; white-space: normal; text-align: center; }

/* ---------- gallery ---------- */
.work-item img { border-radius: var(--r-card); box-shadow: var(--sh-2); }
.photo-cap { font-weight: 500; margin-top: var(--sp-2); }

/* ---------- contact ---------- */
.contact-cards .info-card { border-radius: var(--r-card); border: 1px solid var(--line); box-shadow: var(--sh-1); background: var(--white); padding: var(--sp-7); }
.contact-cards .info-card .ic { width: 46px; height: 46px; padding: 11px; border-radius: var(--r-md); background: rgba(var(--accent-rgb),.10); color: var(--orange); }
.contact-cards .info-card a { font-weight: 700; color: var(--navy); text-decoration: none; }
.trust-strip li { font-weight: 600; color: var(--navy); }
.trust-strip .ic { color: var(--orange); }

/* ---------- blog ---------- */
.post-card { border-radius: var(--r-card); box-shadow: var(--sh-1); transition: transform .18s ease, box-shadow .18s ease; }
.post-card:hover { transform: translateY(-3px); box-shadow: var(--sh-lift); }
.post-card .link-more { margin: 0; color: var(--accent-text); }
.bb-post-body h2 { font-size: 1.55rem; }
.bb-post-body h3 { font-size: 1.12rem; margin: 26px 0 var(--sp-2); }
.bb-post-body ul { margin: 0 0 22px 22px; }
.bb-post-body li { margin-bottom: var(--sp-2); }
.bb-post-body .post-note { background: var(--tint); border-left: 4px solid var(--orange); border-radius: 0 var(--r-sm) var(--r-sm) 0; padding: var(--sp-4) var(--sp-5); font-weight: 500; }

/* ---------- CTA band: brand blue, so it never merges with a navy band above or the navy footer below ---------- */
.cta-band { background: linear-gradient(120deg, var(--orange-2) 0%, var(--orange) 100%); padding: var(--sp-13) 0; position: relative; isolation: isolate; overflow: hidden; }
.cta-band::before { content: ""; position: absolute; z-index: -1; width: 900px; height: 520px; right: -240px; top: -300px; border-radius: 50%; background: radial-gradient(closest-side, rgba(255,255,255,.22), transparent 70%); animation: hf-drift 18s ease-in-out infinite; pointer-events: none; }
.cta-band .kicker { background: rgba(255,255,255,.18); color: var(--white); }
.cta-band p { color: rgba(255,255,255,.95); }
.cta-band .btn-cta { background: var(--white); color: var(--navy); box-shadow: 0 10px 24px rgba(var(--navy-rgb),.28); }
.cta-band .btn-cta:hover { background: var(--tint); }
.cta-band .btn-cta .ic { color: var(--orange); }
.cta-band .btn-light { background: transparent; color: var(--white); border-color: rgba(255,255,255,.7); box-shadow: none; }
.cta-band .btn-light:hover { background: rgba(255,255,255,.14); }
.bb-cta-micro { color: rgba(255,255,255,.92); font-weight: 500; }

/* ---------- footer ---------- */
.site-footer { background: var(--navy); padding-top: var(--sp-12); }
.f-brand .logo { background: var(--white); border-radius: var(--r-sm); padding: 10px 14px; margin-bottom: var(--sp-4); }
.f-brand .logo-img { height: 84px; margin: 0; }
.f-head { font-weight: 700; letter-spacing: .08em; font-size: .82rem; color: var(--white); }
.f-col a { color: rgba(255,255,255,.86); text-decoration: none; }
.f-col a:hover { color: var(--white); text-decoration: underline; }
.f-col .btn-cta, .f-col .btn-cta:hover { color: var(--white); text-decoration: none; }
.f-all a { color: var(--accent-on-dark); font-weight: 600; }
.license { color: rgba(255,255,255,.8); font-weight: 500; }
.site-footer .map-embed { margin-top: var(--sp-4); box-shadow: none; }
.footer-bottom { color: rgba(255,255,255,.72); }
.mobile-call { background: var(--orange); box-shadow: var(--sh-accent-2); font-weight: 700; animation: hf-pulse 3.2s ease-in-out infinite; }
.mobile-call .ic { color: var(--white); }

/* ---------- motion: restrained, and it can never hide content ---------- */
@keyframes hf-glow { 0%, 100% { transform: translate3d(0,0,0) scale(1); opacity: .9; } 50% { transform: translate3d(-40px,30px,0) scale(1.08); opacity: 1; } }
@keyframes hf-drift { 0%, 100% { transform: translate3d(0,0,0); } 50% { transform: translate3d(-60px,40px,0); } }
@keyframes hf-pulse { 0%, 100% { box-shadow: 0 6px 16px rgba(var(--accent-rgb),.36); } 50% { box-shadow: 0 6px 26px rgba(var(--accent-rgb),.6); } }
html.js .reveal { opacity: 0; transform: translateY(14px); transition: opacity .5s ease, transform .5s ease; transition-delay: calc(var(--i, 0) * 60ms); }
html.js .reveal.in { opacity: 1; transform: none; }
html.js .reveal.reveal-force { opacity: 1; transform: none; transition: none; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  html.js .reveal { opacity: 1; transform: none; }
}
@media print { html.js .reveal { opacity: 1 !important; transform: none !important; } .site-header { position: static; } .mobile-call { display: none !important; } }

/* ---------- RESTATED variant rules (this sheet loads last, so the skeleton's variants must be repeated here) ---------- */
.bb-hero-plain { background: var(--grad-pale); padding: 52px 0 26px; }
.bb-hero-plain::before, .bb-hero-plain::after { display: none; }
.bb-hero-plain .kicker { background: rgba(var(--accent-rgb),.10); border: 0; color: var(--accent-text); }
.bb-hero-plain h1 { color: var(--navy); text-shadow: none; }
.bb-hero-plain .hero-sub { color: var(--muted); }
.bb-hero-plain .hero-sub a { color: var(--accent-text); }

/* ---------- ONE prose left edge per page (row 305) ----------
   Band-level headings, kickers and leads sit on the wrap's content edge; centred ones are full-width boxes with
   centred text, so the box edge IS the column edge. Panels that hold prose (FAQ items, the town panel, the ZIP box)
   hang their padding outside the column, so the text inside them starts on that same edge. */
.bb-center-head > .wrap > .kicker,
.bb-faq .wrap-narrow > .kicker,
.bb-cta-in > .kicker { display: flex; align-items: center; justify-content: center; gap: var(--sp-3); margin-left: 0; margin-right: 0; padding: 0; background: none; border: 0; border-radius: 0; }
.bb-center-head > .wrap > .kicker::before, .bb-center-head > .wrap > .kicker::after,
.bb-faq .wrap-narrow > .kicker::before, .bb-faq .wrap-narrow > .kicker::after,
.bb-cta-in > .kicker::before, .bb-cta-in > .kicker::after { content: ""; flex: none; width: 28px; height: 2px; border-radius: 2px; background: currentColor; opacity: .5; }
.bb-center-head > .wrap > h2 { max-width: none; margin-left: 0; margin-right: 0; }
.bb-faq .wrap-narrow { max-width: none; }
/* a centred lead keeps a 62ch measure through its own padding, so its box still starts on the column edge */
.bb-center-head > .wrap > .section-lead, .zip-areas .zip-lead { max-width: none; margin-left: 0; margin-right: 0; padding-inline: max(0px, calc((100% - 62ch) / 2)); }
/* the directions intro runs past 200 characters, so it reads left-aligned on the column edge (row 306) */
.bb-center-head > .wrap > .dir-intro { max-width: none; margin-left: 0; margin-right: 0; text-align: left; }
.faq-item { margin-left: -21px; margin-right: -21px; padding-left: var(--sp-5); padding-right: var(--sp-5); }
.faq-item p { max-width: 80ch; }
.bb-town-panel { max-width: none; margin-left: -22px; margin-right: -22px; padding-left: 22px; padding-right: 22px; }
.bb-town-panel > p, .bb-town-panel .bb-more-body { max-width: 86ch; }
.zip-areas { margin-left: -22px; margin-right: -22px; padding-left: 21px; padding-right: 21px; }
/* an article page reads in the 820px post column, so its closing band shares that column */
body:has(.bb-post-body) .bb-cta-in > :not(.cta-actions) { max-width: 820px; margin-left: auto; margin-right: auto; }

/* ---------- no centred long prose (row 306): step text reads left ---------- */
.step-card { text-align: left; }
.step-icon { margin-left: 0; margin-right: 0; }

/* ---------- no wall of paragraphs (row 276): the call line and the extra notes read as their own blocks ---------- */
.bb-town-panel > .inline-cta { background: rgba(var(--accent-rgb),.07); border-left: 4px solid var(--orange); border-radius: 0 var(--r-sm) var(--r-sm) 0; padding: var(--sp-4) var(--sp-5); font-weight: 600; color: var(--navy); }
.bb-more-body p { border-left: 3px solid rgba(var(--accent-rgb),.4); background: rgba(var(--accent-rgb),.05); border-radius: 0 var(--r-sm) var(--r-sm) 0; padding: var(--sp-3) var(--sp-4); margin-bottom: var(--sp-3); }
.bb-card-dark .bb-more-body p, .bb-dark .bb-more-body p { border-left-color: rgba(var(--accent-on-dark-rgb),.55); background: rgba(255,255,255,.06); }

/* ---------- header phone: the number stays the link's accessible name when it is hidden (row 24) ---------- */
.header-phone { position: relative; }

/* ---------- desktop quote tab (row 316): hf-motion.js adds it; none without JS, none on /contact/ ---------- */
.hf-edge-tab { display: none; }

/* ---------- estimate dialog (row 314): the page's own form card, moved in by hf-motion.js ---------- */
.hf-dialog { position: fixed; inset: 0; margin: auto; height: fit-content; width: min(520px, calc(100% - 32px)); max-height: calc(100dvh - 32px); padding: 0; border: 0; background: transparent; overflow: visible; color: var(--ink); }
.hf-dialog::backdrop { background: rgba(var(--navy-rgb),.62); }
.hf-dialog .form-card { position: relative; max-height: calc(100dvh - 32px); overflow: auto; margin: 0; }
.hf-dialog-close { position: absolute; top: var(--sp-3); right: var(--sp-3); z-index: 2; width: 40px; height: 40px; border: 0; border-radius: 50%; background: var(--tint); color: var(--navy); font-size: 1.5rem; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.hf-dialog-close:hover { background: var(--line); }
.hf-dialog .form-title { padding-right: var(--sp-10); }
body:has(.hf-dialog[open]) { overflow: hidden; }

/* ---------- BREAKPOINTS: last in the sheet, always ---------- */
@media (min-width: 861px) {
  /* a short photo beside tall copy leaves dead space: the photo column follows the reader instead */
  .bb-row > .bb-media:not(.bb-media-map):not(.bb-media-stack) { align-self: start; position: sticky; top: calc(var(--hdr-h) + 24px); min-height: 440px; }
  .bb-row > .bb-card-dark { align-self: start; }
  .job-grid:has(> .job-card:nth-child(2):last-child) { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 900px; margin-inline: auto; }
}
@media (min-width: 1025px) and (min-height: 760px) {
  /* Keep the estimate form alongside the process video and supporting proof as the hero scrolls. */
  .hero-grid > .form-card { position: sticky; top: calc(var(--hdr-h) + 20px); }
}
@media (min-width: 861px) {
  /* Reserve the first screen for the complete hero, below the header and review strip. */
  .hero { display: grid; align-items: center; min-height: calc(100svh - var(--hdr-h) - 43px); }
  .hero > .wrap { width: 100%; }
  .hero-grid { gap: var(--sp-9); }
  .hero-copy:has(.hf-video) { display: grid; grid-template-columns: minmax(0, 1.65fr) minmax(0, 1fr); column-gap: var(--sp-4); align-items: start; }
  .hero-copy:has(.hf-video) > .kicker,
  .hero-copy:has(.hf-video) > h1,
  .hero-copy:has(.hf-video) > .hero-sub,
  .hero-copy:has(.hf-video) > .hero-ctas { grid-column: 1 / -1; }
  .hero-copy:has(.hf-video) > .kicker { justify-self: start; }
  .hero-copy:has(.hf-video) > .hf-video { grid-column: 1; grid-row: 5 / span 2; max-width: none; margin: 0; }
  /* row 288: on the two video heroes the trust pills run as ONE wrapping row under the video (pills kept), and
     "At a glance" sits beside the video */
  .hero-copy:has(.hf-video) > .hero-chips { grid-column: 1 / -1; grid-row: 7; flex-direction: row; flex-wrap: wrap; gap: var(--sp-2); margin-top: var(--sp-2); }
  /* the pill row adds a line under the video, so the video hero's own vertical rhythm is a little tighter: the whole
     hero (pills included) still fits the first screen at 1440 x 900 */
  .hero:has(.hf-video) { padding-top: var(--sp-6); padding-bottom: var(--sp-6); }
  .hero-copy:has(.hf-video) > .hero-ctas { margin: var(--sp-3) 0; }
  .hero-copy:has(.hf-video) > .hero-chips li { width: auto; }
  .hero-copy:has(.hf-video) > .hero-glance { grid-column: 2; grid-row: 5; margin-top: 0; }
  .hero-grid .form-card form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--sp-3); }
  .hero-grid .form-card form > label:last-of-type,
  .hero-grid .form-card form > .btn-block,
  .hero-grid .form-card form > .form-note { grid-column: 1 / -1; }
  .hero-grid .form-card textarea { min-height: 72px; }
}
@media (min-width: 861px) and (max-height: 820px) {
  .hero:has(.hf-video) { padding: var(--sp-4) 0; }
  /* short laptop screens (1366 x 768, 1280 x 800): a slightly narrower video keeps the pill row (row 288) on screen */
  .hero-copy:has(.hf-video) { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); }
  .hero-copy:has(.hf-video) > .hero-ctas { margin: var(--sp-2) 0; }
  .hero-copy:has(.hf-video) > .hero-chips li { font-size: .8rem; line-height: 1.25; padding: 5px 11px; gap: 7px; }
  .hero-copy:has(.hf-video) > .hero-chips .ic { width: 16px; height: 16px; }
  .hero-copy:has(.hf-video) > .hero-glance > summary { font-size: .84rem; line-height: 1.3; gap: 6px; }
}
@media (min-width: 1440px) and (min-height: 800px) {
  .hero:has(.hero-grid) > .wrap { max-width: 1280px; }
  .hero h1 { font-size: clamp(3.3rem, 3.5vw, 4rem); }
  .hero .kicker { font-size: .86rem; }
  .hero-sub { font-size: clamp(1.05rem, 1.12vw, 1.26rem); line-height: 1.6; }
  .hero-ctas .btn { font-size: clamp(1.05rem, 1.05vw, 1.18rem); padding: 18px 34px; }
  .hero-chips li, .hero-glance > summary { font-size: .96rem; }
  .hero-grid > .form-card { padding: var(--sp-8); }
  .hero-grid .form-kicker { font-size: .86rem; }
  .hero-grid .form-title { font-size: clamp(1.35rem, 1.5vw, 1.7rem); }
  .hero-grid .form-rating { font-size: 1rem; }
  .hero-grid .form-card label { font-size: .95rem; }
  .hero-grid .form-card input, .hero-grid .form-card textarea { font-size: 1.05rem; padding: 13px 14px; }
  .hero-grid .form-card textarea { min-height: 96px; }
  .hero-grid .form-card .btn-block { min-height: 64px; font-size: 1.08rem; }
}
@media (min-width: 861px) and (max-width: 1024px) {
  .hero-copy:not(:has(.hf-video)) > .hero-chips { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-2); }
  .hero-copy:not(:has(.hf-video)) > .hero-chips li { width: 100%; }
}
@media (min-width: 861px) and (max-width: 1024px) and (max-height: 820px) {
  .hero:has(.hero-grid) { padding: var(--sp-6) 0; }
}
@media (min-width: 1025px) and (max-height: 740px) {
  :root { --hdr-h: 72px; --logo-h: 60px; }
  .trust-in { padding: 6px var(--sp-6); }
  .hero { min-height: calc(100svh - var(--hdr-h) - 39px); }
  .hero:has(.hero-grid) { padding: var(--sp-4) 0; }
  .hero-ctas { margin: var(--sp-3) 0; }
}
@media (max-width: 1024px) {
  :root { --hdr-h: 80px; --logo-h: 64px; }
  .nav { inset: var(--hdr-h) 0 0 0; }
  .nav a { border-radius: 0; }
  .sub { border: 0; box-shadow: none; padding: 0 0 var(--sp-2) 14px; min-width: 0; top: auto; }
  .sub::before { display: none; }
  .nav-toggle { margin-left: 0; }
  .header-phone .ic { width: 26px; height: 26px; }
  /* the skeleton hides the number with display:none, which left the call link with no accessible name */
  .header-phone span { display: inline; position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }
}
@media (max-width: 860px) {
  .hero { padding: var(--sp-11) 0 var(--sp-12); }
  .hero:has(.hero-grid) { padding: var(--sp-10) 0 var(--sp-11); }
  .hero::after { width: 700px; height: 460px; right: -300px; top: -240px; }
  .bb-town-panel { padding: var(--sp-6) 22px; }
  .bb-steps:has(> .step-card:nth-child(3):last-child) { grid-template-columns: 1fr 1fr; }
  .bb-areas-map .map-embed iframe { height: 320px; }
  .cta-band { padding: var(--sp-12) 0; }
  .f-brand .logo-img { height: 72px; }
}
@media (max-width: 600px) {
  :root { --hdr-h: 72px; --logo-h: 58px; }
  .hero { padding: var(--sp-10) 0 var(--sp-11); }
  .hero:has(.hero-grid) { padding: var(--sp-8) 0 var(--sp-10); }
  .section { padding: var(--sp-10) 0; }
  .form-card { padding: var(--sp-6) var(--sp-5); }
  .hf-video { max-width: 100%; }
  .bb-steps:has(> .step-card:nth-child(3):last-child) { grid-template-columns: 1fr; }
  .hero-ctas .btn { flex: 1 1 100%; justify-content: center; }
  .cta-actions .btn { flex: 1 1 100%; justify-content: center; }
  .trust-in { font-size: .84rem; gap: 6px 10px; padding: var(--sp-2) var(--sp-4); }
  .step-card { padding: var(--sp-6) var(--sp-5); }
  .job-card img { height: 190px; }
  /* panels that hang outside the column run edge to edge on a phone */
  .faq-item, .bb-town-panel, .zip-areas { margin-left: -22px; margin-right: -22px; padding-left: 22px; padding-right: 22px; border-left-width: 0; border-right-width: 0; border-radius: 0; }
  /* the trust checklist sits right under the headline and subhead, ahead of the calls and the video (row 266) */
  .hero-copy { display: flex; flex-direction: column; }
  .hero-copy > .kicker { order: 1; align-self: flex-start; }
  .hero-copy > h1 { order: 2; }
  .hero-copy > .hero-sub { order: 3; }
  /* one track at phone width (row 431): every grid on a phone is a single column */
  .hero-copy > .hero-chips { order: 4; margin: var(--sp-2) 0 0; display: grid; grid-template-columns: 1fr; gap: var(--sp-1); }
  .hero-copy > .hero-chips li { width: auto; justify-self: start; font-size: .8rem; line-height: 1.25; gap: 6px; padding: 4px 10px; }
  .hero-copy > .hero-chips .ic { width: 16px; height: 16px; }
  /* the call button starts inside the first 600px of a phone screen (row 266): tighter hero rhythm, same content */
  .hero:has(.hero-grid) { padding-top: var(--sp-2); }
  .hero-copy > .kicker { margin-bottom: var(--sp-2); }
  /* row 266 (2026-10-02 fixer): the long town and trade intros pushed the call button to 615-637 px; a slightly
     smaller headline and intro and tighter pills bring it inside the first 600 px, same content and order */
  .hero h1 { font-size: 1.85rem; margin-bottom: var(--sp-2); }
  .hero-sub { font-size: .9rem; line-height: 1.45; margin-bottom: 0; }
  .hero-copy > .hero-ctas { order: 5; margin: var(--sp-3) 0; }
  .hero-copy > .hf-video { order: 6; }
  .hero-copy > .hero-glance { order: 7; }
}
@media (min-width: 1260px) {
  /* the quote tab only shows where the margin beside the 1180px wrap is wider than the tab, so it never covers content */
  .hf-edge-tab { display: flex; position: fixed; right: 0; top: 50%; z-index: 35; transform: translateY(-50%); width: var(--edge-tab-w); padding: var(--sp-5) 0; align-items: center; justify-content: center; gap: var(--sp-2); writing-mode: vertical-rl; background: var(--orange); color: var(--white); font-family: var(--font-head); font-weight: 700; font-size: .9rem; letter-spacing: .02em; text-decoration: none; border: 2px solid var(--white); border-right: 0; border-radius: var(--r-sm) 0 0 var(--r-sm); box-shadow: var(--sh-accent); transition: background-color .18s ease, width .18s ease; }
  .hf-edge-tab:hover { background: var(--orange-2); color: var(--white); }
  .hf-edge-tab .ic { width: 18px; height: 18px; transform: rotate(90deg); }
  body:has(.hf-dialog[open]) .hf-edge-tab { display: none; }
}
@media print { .hf-edge-tab { display: none !important; } }