/* Blue Collars service page template (bcs-*). Pilot: /commercial-hvac/, 2026-10-22.

   Same tokens, type and photo treatment as the blog (bcp-*), so a service page and a post read
   as one site: navy #0B2545, deep #071629, red #C8102E, Barlow / Barlow Condensed / IBM Plex
   Mono, all self-hosted (no external font request on this site, deliberately).

   Every rule is scoped under .bcs, so nothing here can reach the Elementor header, booking form
   or footer that wrap the page. */

.bcs{font-family:'Barlow',system-ui,sans-serif;color:#22303f;font-size:18px;line-height:1.65}
.bcs *,.bcs *::before,.bcs *::after{box-sizing:border-box}
.bcs h1,.bcs h2,.bcs h3{font-family:'Barlow Condensed','Barlow',sans-serif;font-weight:700;
 letter-spacing:.005em;line-height:1.05;margin:0;color:inherit;text-wrap:balance}
.bcs p{margin:0}
.bcs a{color:inherit}
.bcs-in{max-width:1180px;margin:0 auto;padding:0 32px}
.bcs-sec{padding:104px 0}
.bcs-light{background:#fff}
.bcs-mist{background:#f4f6f8}
.bcs-navy{background:#0B2545;color:#fff}
.bcs-k{font-family:'IBM Plex Mono',ui-monospace,monospace;font-size:13px;font-weight:500;
 letter-spacing:.14em;text-transform:uppercase;color:#C8102E;display:block}
.bcs-navy .bcs-k{color:#ff8a9b}
.bcs-h2{font-size:clamp(34px,4.2vw,52px);color:#0B2545}
.bcs-navy .bcs-h2{color:#fff}
.bcs-p{color:#46566b;max-width:62ch;text-wrap:pretty}
.bcs-p+.bcs-p{margin-top:14px}
.bcs-navy .bcs-p{color:#c3d3e6}

/* Buttons. Specificity (0,2,1) so the theme's `a` colors never win, which is the exact cascade
   collision measured on the blog (white-on-red rendered red-on-red). */
.bcs a.bcs-btn{display:inline-flex;align-items:center;gap:10px;font-weight:700;font-size:15px;
 letter-spacing:.08em;text-transform:uppercase;text-decoration:none;padding:16px 26px;
 transition:transform .18s cubic-bezier(.2,.7,.2,1),background-color .18s ease}
.bcs a.bcs-btn:hover{transform:translateY(-2px);text-decoration:none}
.bcs a.bcs-btn-red{background:#C8102E;color:#fff}
.bcs a.bcs-btn-red:hover{background:#a80c26;color:#fff}
.bcs a.bcs-btn-white{background:#fff;color:#0B2545}
.bcs a.bcs-btn-white:hover{background:#f2f5f8;color:#0B2545}
.bcs a.bcs-btn-line{border:1px solid rgba(255,255,255,.55);color:#fff}
.bcs a.bcs-btn-line:hover{background:rgba(255,255,255,.12);color:#fff}
.bcs-btn small{display:block;font-size:11px;letter-spacing:.12em;opacity:.8;font-weight:600}
.bcs-btn b{display:block;font-family:'Barlow Condensed',sans-serif;font-size:24px;letter-spacing:.02em;line-height:1}
.bcs-btns{display:flex;flex-wrap:wrap;gap:14px;margin-top:34px}

/* ---- hero: the photo IS the background (Jamie 2026-10-16: every hero has a background image) */
.bcs-hero{position:relative;overflow:hidden;background:#071629;color:#fff;min-height:680px;
 display:flex;flex-direction:column}
.bcs-hero-bg{position:absolute;inset:0;margin:0}
.bcs-hero-bg img{width:100%;height:100%;object-fit:cover;display:block}
.bcs-hero-bg::after{content:"";position:absolute;inset:0;
 background:linear-gradient(270deg,rgba(7,22,41,.93) 0%,rgba(7,22,41,.88) 46%,rgba(7,22,41,.45) 72%,rgba(7,22,41,.12) 100%)}
.bcs-hero--left .bcs-hero-bg::after{
 background:linear-gradient(90deg,rgba(7,22,41,.93) 0%,rgba(7,22,41,.88) 46%,rgba(7,22,41,.45) 72%,rgba(7,22,41,.12) 100%)}
.bcs-hero-in{position:relative;flex:1;display:flex;align-items:center;width:100%;
 max-width:1180px;margin:0 auto;padding:150px 32px 70px}
.bcs-hero--right .bcs-hero-in{justify-content:flex-end}
.bcs-hero-copy{max-width:560px}
.bcs-hero .bcs-k{color:#ff8a9b}
.bcs-h1{font-size:clamp(46px,6vw,80px);margin-top:16px;color:#fff}
.bcs-lede{font-size:19px;line-height:1.6;color:#c3d3e6;margin-top:20px;text-wrap:pretty}
.bcs-facts{position:relative;border-top:1px solid rgba(255,255,255,.14);background:rgba(7,22,41,.72)}
.bcs-facts ul{list-style:none;margin:0 auto;max-width:1180px;padding:0 32px;display:flex;flex-wrap:wrap}
.bcs-facts li{flex:1 1 220px;display:flex;align-items:center;gap:12px;padding:20px 0;
 font-family:'IBM Plex Mono',ui-monospace,monospace;font-size:13px;letter-spacing:.1em;
 text-transform:uppercase;color:#dbe1e8}
.bcs-facts li::before{content:"";width:8px;height:8px;background:#C8102E;flex:none}

/* ---- split: copy beside a real company photo */
.bcs-split{display:grid;grid-template-columns:1fr 1.15fr;gap:72px;align-items:center}
.bcs-split .bcs-h2{margin-top:14px}
.bcs-split .bcs-p{margin-top:20px;font-size:20px}
.bcs a.bcs-more{display:inline-flex;gap:10px;margin-top:28px;font-weight:700;color:#C8102E;
 text-decoration:none;letter-spacing:.06em;text-transform:uppercase;font-size:14px}
.bcs a.bcs-more span{transition:transform .2s cubic-bezier(.2,.7,.2,1)}
.bcs a.bcs-more:hover span{transform:translateX(4px)}
.bcs-photo{margin:0;position:relative}
.bcs-photo img{width:100%;height:auto;display:block;aspect-ratio:3/2;object-fit:cover}
.bcs-photo::before{content:"";position:absolute;left:-18px;bottom:-18px;width:46%;height:46%;
 background:#C8102E;z-index:-1}
.bcs-photo{z-index:0}

/* ---- cards: the "choose us for" reasons */
.bcs-head{display:grid;grid-template-columns:minmax(0,760px);justify-content:center;
  justify-items:center;text-align:center;gap:16px;margin-bottom:56px}
.bcs-head .bcs-h2{margin-top:0;max-width:22ch}
.bcs-head p{margin:0;max-width:64ch}
.bcs-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.bcs-card{background:#fff;border-top:4px solid #C8102E;padding:34px 30px 36px;
 box-shadow:0 1px 0 #e3e7ec;transition:transform .2s cubic-bezier(.2,.7,.2,1),box-shadow .2s ease}
.bcs-card:hover{transform:translateY(-3px);box-shadow:0 14px 30px rgba(11,37,69,.13)}
.bcs-ico{width:52px;height:52px;display:grid;place-items:center;background:#0B2545;color:#fff;margin-bottom:24px}
.bcs-ico svg{width:26px;height:26px}
.bcs-card h3{font-size:26px;color:#0B2545}
.bcs-card p{margin-top:12px;color:#46566b;font-size:17px}

/* ---- steps: the process as a numbered track */
.bcs-steps-wrap{display:grid;grid-template-columns:.9fr 1.1fr;gap:80px}
.bcs-steps-wrap .bcs-h2{margin-top:14px}
.bcs-steps-wrap .bcs-p:first-of-type{margin-top:22px}
.bcs-steps-head{font-size:15px;margin-bottom:8px}
.bcs-steps{list-style:none;margin:0;padding:0;counter-reset:bcs}
.bcs-step{position:relative;padding:0 0 38px 86px;counter-increment:bcs}
.bcs-step:last-child{padding-bottom:0}
.bcs-step::before{content:counter(bcs,decimal-leading-zero);position:absolute;left:0;top:-4px;
 width:56px;height:56px;display:grid;place-items:center;border:1px solid rgba(255,255,255,.28);
 font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:24px;color:#fff;background:#0B2545}
.bcs-step::after{content:"";position:absolute;left:28px;top:56px;bottom:0;width:1px;background:rgba(255,255,255,.2)}
.bcs-step:last-child::after{display:none}
.bcs-step h4{font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:26px;line-height:1.1;margin:0;color:#fff}
.bcs-step p{margin-top:10px;color:#c3d3e6;font-size:17px}
.bcs-step:first-child::before{background:#C8102E;border-color:#C8102E}

/* ---- photo band: a full-bleed photo that breaks the page, with one line over it */
.bcs-band{position:relative;overflow:hidden;background:#071629;color:#fff;min-height:440px;display:flex;align-items:center}
.bcs-band .bcs-hero-bg::after{background:linear-gradient(90deg,rgba(7,22,41,.9) 0%,rgba(7,22,41,.78) 50%,rgba(7,22,41,.35) 100%)}
.bcs-band blockquote{position:relative;margin:0;max-width:760px;font-family:'Barlow Condensed',sans-serif;
 font-weight:700;font-size:clamp(32px,3.6vw,48px);line-height:1.1;padding-left:30px;border-left:6px solid #C8102E}

/* ---- tiles: what we install and repair */
.bcs-tiles{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid #e3e7ec;border-left:1px solid #e3e7ec}
.bcs-tile{position:relative;display:block;padding:36px 32px 40px;border-right:1px solid #e3e7ec;
 border-bottom:1px solid #e3e7ec;background:#fff;text-decoration:none;transition:background-color .2s ease}
.bcs a.bcs-tile{text-decoration:none;color:inherit}
.bcs a.bcs-tile:hover{background:#f4f6f8}
.bcs-tile .bcs-ico{background:transparent;color:#C8102E;border:1px solid #e3e7ec;margin-bottom:22px}
.bcs-tile h3{font-size:24px;color:#0B2545}
.bcs-tile p{margin-top:10px;color:#46566b;font-size:16.5px}
.bcs-go{position:absolute;right:26px;top:36px;color:#C8102E;font-weight:700;transition:transform .2s cubic-bezier(.2,.7,.2,1)}
.bcs a.bcs-tile:hover .bcs-go{transform:translateX(4px)}
.bcs-after{margin-top:40px;font-size:20px;color:#22303f;max-width:70ch}

/* ---- closing CTA */
.bcs-cta{background:#C8102E;color:#fff;padding:72px 0}
.bcs-cta-in{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:28px}
.bcs-cta h2{font-size:clamp(32px,3.4vw,46px);color:#fff;max-width:16ch}
.bcs-cta .bcs-btns{margin-top:0}
.bcs-rel{width:100%;display:flex;flex-wrap:wrap;gap:8px 26px;padding-top:26px;margin-top:6px;
 border-top:1px solid rgba(255,255,255,.3);font-size:15px}
.bcs a.bcs-rel-a{color:#fff;text-decoration:underline;text-underline-offset:3px;font-weight:600}

/* The site header overhangs the page by 50px on desktop (measured on the blog); the hero padding
   above clears it. At 1024px and under the header swaps to a compact bar. */
@media(max-width:1024px){
 .bcs-hero-in{padding-top:56px}
 .bcs-split,.bcs-head,.bcs-steps-wrap{grid-template-columns:1fr;gap:44px}
 .bcs-cards,.bcs-tiles{grid-template-columns:1fr 1fr}
}
@media(max-width:767px){
 .bcs-in,.bcs-hero-in,.bcs-facts ul{padding-left:20px;padding-right:20px}
 .bcs-sec{padding:72px 0}
 .bcs-hero{min-height:0}
 .bcs-hero-in{padding-top:48px;padding-bottom:48px}
 /* Phone: the photo gets the top of the hero to itself, then the scrim closes in under the copy. */
 .bcs-hero-bg::after,.bcs-hero--left .bcs-hero-bg::after{
  background:linear-gradient(180deg,rgba(7,22,41,.08) 0%,rgba(7,22,41,.2) 16%,rgba(7,22,41,.9) 26%,rgba(7,22,41,.94) 100%)}
 .bcs-band .bcs-hero-bg::after{background:rgba(7,22,41,.78)}
 .bcs-hero-copy{padding-top:250px}
 /* The theme ships `@media(max-width:767px){h1{font-size:24px!important} p{font-size:18px!important}}`
    inline; !important beats specificity, so counter it for this template only. */
 .bcs .bcs-h1{font-size:clamp(40px,11vw,52px) !important;line-height:1.02 !important}
 .bcs .bcs-lede{font-size:17px !important;line-height:1.55 !important}
 .bcs .bcs-h2{font-size:clamp(32px,9vw,40px) !important;line-height:1.04 !important}
 .bcs .bcs-cta h2{font-size:32px !important;line-height:1.05 !important}
 .bcs .bcs-card p,.bcs .bcs-tile p,.bcs .bcs-step p{font-size:17px !important;line-height:1.6 !important}
 .bcs .bcs-p{line-height:1.65 !important}
 .bcs-cards,.bcs-tiles{grid-template-columns:1fr}
 .bcs-facts li{flex-basis:100%;padding:14px 0}
 .bcs-step{padding-left:72px}
 .bcs-btns{flex-direction:column}
 .bcs a.bcs-btn{justify-content:center}
 .bcs-photo::before{left:-10px;bottom:-10px}
}
@media(prefers-reduced-motion:reduce){
 .bcs a.bcs-btn,.bcs-card,.bcs-tile,.bcs-go,.bcs a.bcs-more span{transition:none}
 .bcs a.bcs-btn:hover,.bcs-card:hover{transform:none}
}

/* ---- scroll-through (bcs-st): the install, scrubbed by scroll. Driven by bcs-scrollthrough.js.
   Without JS (no .is-live) it is a plain stack of illustrated steps, fully readable. */
.bcs-st{background:#071629;color:#fff;padding-top:104px}
.bcs-st .bcs-h2{color:#fff;margin-top:14px}
.bcs-st .bcs-k{color:#ff8a9b}
.bcs-st-head .bcs-p{color:#c3d3e6;margin-top:18px}
.bcs-st-head{padding-bottom:56px}
.bcs-st-ch{position:relative;max-width:1180px;margin:0 auto 48px;padding:0 32px}
.bcs-st-media{position:relative;overflow:hidden;aspect-ratio:16/9;background:#0B2545}
.bcs-st-media img,.bcs-st-media video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.bcs-st-cap{padding:22px 0 0;max-width:620px}
.bcs-st-n{font-family:'IBM Plex Mono',ui-monospace,monospace;font-size:13px;letter-spacing:.14em;color:#ff8a9b}
.bcs-st-cap h3{font-size:clamp(30px,3vw,42px);margin-top:8px;color:#fff}
.bcs-st-cap p{margin-top:10px;color:#c3d3e6;font-size:18px;line-height:1.55}
.bcs-st-ui{display:none}

.bcs-st.is-live .bcs-st-run{position:relative;height:calc(var(--bcs-n,6) * 90vh + 100vh)}
.bcs-st.is-live .bcs-st-stage{position:sticky;top:var(--bcs-hdr,0px);height:calc(100vh - var(--bcs-hdr,0px));overflow:hidden}
.bcs-st.is-live .bcs-st-ch:first-child{--o:1}
.bcs-st.is-live .bcs-st-ch{position:absolute;inset:0;max-width:none;margin:0;padding:0;opacity:var(--o,0);
 transition:opacity .12s linear;pointer-events:none}
.bcs-st.is-live .bcs-st-media{position:absolute;inset:0;aspect-ratio:auto}
.bcs-st.is-live .bcs-st-media::after{content:"";position:absolute;inset:0;
 background:linear-gradient(0deg,rgba(7,22,41,.97) 0%,rgba(7,22,41,.92) 38%,rgba(7,22,41,.70) 56%,rgba(7,22,41,0) 80%)}
.bcs-st.is-live .bcs-st-cap{position:absolute;left:0;right:0;bottom:0;max-width:1180px;margin:0 auto;
 padding:0 32px 92px;z-index:2}
.bcs-st.is-live .bcs-st-cap>*{max-width:600px;opacity:0;transform:translate3d(0,14px,0);
 transition:opacity .45s cubic-bezier(.2,.7,.2,1),transform .45s cubic-bezier(.2,.7,.2,1)}
.bcs-st.is-live .bcs-st-ch.on .bcs-st-cap>*{opacity:1;transform:none}
.bcs-st.is-live .bcs-st-ch.on .bcs-st-cap h3{transition-delay:.06s}
.bcs-st.is-live .bcs-st-ch.on .bcs-st-cap p{transition-delay:.12s}
.bcs-st.is-live .bcs-st-ui{display:flex;position:absolute;left:0;right:0;bottom:36px;max-width:1180px;margin:0 auto;
 padding:0 32px;align-items:center;gap:22px;z-index:3}
.bcs-st-dots{display:flex;gap:8px}
.bcs-st-dots i{width:28px;height:4px;background:rgba(255,255,255,.25);transition:background-color .3s ease}
.bcs-st-dots i.on{background:#C8102E}
.bcs-st-bar{flex:1;height:1px;background:rgba(255,255,255,.18);overflow:hidden}
.bcs-st-bar i{display:block;height:100%;background:#fff;transform:scaleX(0);transform-origin:0 50%}
@media(max-width:767px){
 .bcs-st{padding-top:72px}
 .bcs-st-ch{padding:0 20px}
 .bcs .bcs-st-cap p{font-size:16px !important;line-height:1.5 !important}
 .bcs .bcs-st-cap h3{font-size:30px !important;line-height:1.05 !important}
 .bcs-st.is-live .bcs-st-cap{padding:0 20px 78px}
 .bcs-st.is-live .bcs-st-ui{padding:0 20px;bottom:30px}
 .bcs-st.is-live .bcs-st-media::after{background:linear-gradient(0deg,rgba(7,22,41,.97) 0%,rgba(7,22,41,.93) 46%,rgba(7,22,41,.72) 64%,rgba(7,22,41,0) 86%)}
}
@media(prefers-reduced-motion:reduce){
 .bcs-st.is-live .bcs-st-cap>*{transition:none}
}

/* ---- copy-mode elements (2026-10-22): last updated, prose sections, lists, FAQ, stat band, sources */
.bcs-upd{font-family:'IBM Plex Mono',ui-monospace,monospace;font-size:12px;letter-spacing:.12em;
 text-transform:uppercase;color:#9db6d2;margin:14px 0 0}
.bcs-prose{display:grid;grid-template-columns:.85fr 1.15fr;gap:72px;align-items:start}
.bcs-prose .bcs-h2{position:sticky;top:170px}
.bcs-prose-body .bcs-p{max-width:68ch}
.bcs-prose-body .bcs-p+.bcs-p,.bcs-prose-body .bcs-list+.bcs-p,.bcs-prose-body .bcs-p+.bcs-list{margin-top:18px}
.bcs-answer{font-size:20px;color:#22303f !important;border-left:4px solid #C8102E;padding-left:20px}
.bcs-p strong,.bcs-list strong,.bcs-faq strong{color:#0B2545;font-weight:700}
.bcs-navy .bcs-p strong{color:#fff}
.bcs-list{margin:0;padding:0;list-style:none;display:grid;gap:12px;max-width:68ch}
.bcs-list li{position:relative;padding:16px 18px 16px 58px;background:#fff;border:1px solid #e3e7ec;color:#46566b;font-size:17px;line-height:1.55}
.bcs-mist .bcs-list li{background:#fff}
.bcs-light .bcs-list li{background:#f4f6f8;border-color:#eceff3}
.bcs-list-ol{counter-reset:bcl}
.bcs-list-ol li{counter-increment:bcl}
.bcs-list-ol li::before{content:counter(bcl,decimal-leading-zero);position:absolute;left:16px;top:15px;
 font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:22px;color:#C8102E}
.bcs-list-ul li::before{content:"";position:absolute;left:24px;top:24px;width:9px;height:9px;background:#C8102E}
.bcs-prose-body .bcs-btns{margin-top:30px}
.bcs a.bcs-btn-dark{border:1px solid #0B2545;color:#0B2545}
.bcs a.bcs-btn-dark:hover{background:#0B2545;color:#fff}
.bcs-cards-4{grid-template-columns:repeat(4,1fr)}
.bcs-after{margin-top:40px;max-width:70ch}
.bcs-after .bcs-p{font-size:18px}
.bcs-steps-wrap .bcs-btns{margin-top:30px}
.bcs-st-after{padding-top:56px;padding-bottom:104px;display:grid;grid-template-columns:repeat(3,1fr);gap:32px}
.bcs-st-after .bcs-p{color:#c3d3e6;font-size:17px}
.bcs-st-after .bcs-p strong{color:#fff}
.bcs-stat{position:relative;max-width:640px}
.bcs-stat b{display:block;font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:clamp(84px,11vw,150px);line-height:.9;color:#fff}
.bcs-stat span{display:block;font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:clamp(26px,3vw,38px);margin-top:10px;
 padding-left:22px;border-left:6px solid #C8102E}
.bcs-stat small{display:block;margin-top:16px;font-family:'IBM Plex Mono',ui-monospace,monospace;font-size:12px;letter-spacing:.1em;
 text-transform:uppercase;color:#9db6d2}
.bcs-faq{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:44px}
.bcs-faq-i{background:#fff;padding:28px 30px;border-top:4px solid #0B2545}
.bcs-faq-i h3{font-size:24px;color:#0B2545}
.bcs-faq-i p{margin-top:12px;color:#46566b;font-size:17px;line-height:1.6}
.bcs-cta-copy{flex:1 1 520px}
.bcs-cta-p{color:#ffd9de;margin-top:14px;max-width:60ch}
.bcs-sources{padding:56px 0 72px}
.bcs-sources ol{margin:16px 0 0;padding-left:20px;display:grid;gap:6px;font-size:13px;line-height:1.5;color:#61717f}
.bcs-sources a{color:#0B2545;text-decoration:underline;text-underline-offset:2px}
@media(max-width:1024px){
 .bcs-prose,.bcs-st-after{grid-template-columns:1fr;gap:28px}
 .bcs-prose .bcs-h2{position:static}
 .bcs-cards-4{grid-template-columns:1fr 1fr}
 .bcs-faq{grid-template-columns:1fr}
}
@media(max-width:767px){
 .bcs-cards-4{grid-template-columns:1fr}
 .bcs .bcs-answer{font-size:18px !important}
 .bcs .bcs-upd{font-size:12px !important;line-height:1.4 !important}
 .bcs .bcs-list li{font-size:16px !important;line-height:1.5 !important}
 .bcs .bcs-faq-i p,.bcs .bcs-st-after .bcs-p{font-size:16px !important;line-height:1.55 !important}
 .bcs .bcs-sources ol{font-size:13px !important}
 .bcs-st-after{padding-bottom:72px}
}
/* long H1 from the approved copy (70 chars): keep the hero to three lines at 1440 */
.bcs-h1{font-size:clamp(40px,4.4vw,60px)}
.bcs-hero-copy{max-width:600px}
.bcs-st-after{grid-template-columns:1fr 1fr;gap:48px}

/* ---- lead form -------------------------------------------------------------
   Paid traffic lands on this. Copy on the left, capture on the right at desktop;
   the form stacks ABOVE nothing and stays first-screen on phones. Tokens match
   .bcs-card (white, 4px red top rule) so it reads as part of the same system. */
.bcs-form-sec{background:#f4f6f9}
.bcs-form-in{display:grid;grid-template-columns:1fr minmax(380px,460px);
  gap:56px;align-items:start}
.bcs-form-copy .bcs-h2{margin-bottom:6px}
.bcs-form-copy p{color:#46566b;font-size:17px;margin-top:14px}

.bcs-form{background:#fff;border-top:4px solid #C8102E;padding:30px 28px 32px;
  box-shadow:0 14px 34px rgba(11,37,69,.14);display:grid;
  grid-template-columns:1fr 1fr;gap:16px 18px;align-content:start}
.bcs-field{display:flex;flex-direction:column;gap:7px;min-width:0}
.bcs-field-full{grid-column:1 / -1}
.bcs-field label{font-family:'Barlow Condensed',sans-serif;font-size:15px;
  letter-spacing:.09em;text-transform:uppercase;font-weight:600;color:#0B2545}
.bcs-field input,.bcs-field select,.bcs-field textarea{
  font:inherit;font-size:16px;color:#0B2545;background:#fff;
  border:1px solid #c3ccd8;border-radius:3px;padding:13px 14px;width:100%;
  min-height:50px;transition:border-color .15s,box-shadow .15s}
.bcs-field textarea{min-height:92px;resize:vertical}
.bcs-field select{appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%230B2545' stroke-width='2'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 14px center;padding-right:38px}
.bcs-field input:focus,.bcs-field select:focus,.bcs-field textarea:focus{
  outline:none;border-color:#C8102E;box-shadow:0 0 0 3px rgba(200,16,46,.16)}
.bcs-field input:user-invalid,.bcs-field select:user-invalid,
.bcs-field textarea:user-invalid{border-color:#C8102E}
.bcs-form .bcs-btn{width:100%;justify-content:center;text-align:center}

/* Honeypot: reachable by a bot, never by a person or a screen reader. Not
   display:none, because some bots skip fields that are display:none. */
.bcs-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* The bridge appends .rs-form-msg and sets its color inline on success or error. */
.bcs-form .rs-form-msg{grid-column:1 / -1;margin:2px 0 0;font-size:16px;
  font-weight:600;line-height:1.45}

@media(max-width:1024px){
  .bcs-form-in{grid-template-columns:1fr;gap:34px}
  .bcs-form{max-width:560px}
}
@media(max-width:767px){
  .bcs-form{padding:24px 20px 26px;gap:14px;box-shadow:0 10px 24px rgba(11,37,69,.12)}
  .bcs-form-sec{padding:64px 0}
  .bcs-field{grid-column:1 / -1}
  .bcs-field label{font-size:14px}
}

/* The form's submit is a real <button>, and the theme's own button rules beat
   .bcs-btn-red (which was written for anchors): measured transparent bg, #CC3366
   text and 42px tall against the hero anchor's solid #C8102E, white, 76px. The
   primary conversion control on a paid landing page cannot render as secondary,
   and 42px is under the 48px tap target. Stated explicitly here and kept specific
   enough to win. */
.bcs-form button.bcs-btn,
.bcs-form button.bcs-btn-red{
  background:#C8102E;color:#fff;border:0;min-height:56px;
  font-family:'Barlow Condensed',sans-serif;font-size:21px;letter-spacing:.04em;
  text-transform:uppercase;font-weight:700;cursor:pointer;border-radius:3px;
  display:flex;align-items:center;justify-content:center;width:100%;
  transition:background .15s,transform .15s}
.bcs-form button.bcs-btn:hover{background:#a50d26;transform:translateY(-1px)}
.bcs-form button.bcs-btn:active{transform:translateY(0)}
.bcs-form button.bcs-btn:focus-visible{outline:3px solid #0B2545;outline-offset:2px}

/* Short copy beside a tall form left a measured 259px void. Center the columns
   against each other instead of top-aligning them. */
.bcs-form-in{align-items:center}
@media(max-width:1024px){ .bcs-form-in{align-items:start} }

/* ---- lead form inside the hero ---------------------------------------------
   The form sits in the RIGHT column and the copy keeps its 560px block, because
   hero_contrast() measures exactly that block at x=130 on a left-aligned hero.
   Narrowing the copy would leave the gate measuring a region the text no longer
   occupies, which is a green check on the wrong property. */
.bcs-hero--left .bcs-hero-in{justify-content:space-between;gap:48px;align-items:center}
.bcs-hero-form{position:relative;z-index:2;width:520px;flex:0 0 520px}
.bcs-form--hero{background:#fff;border-top:4px solid #C8102E;padding:24px 24px 26px;
  box-shadow:0 18px 40px rgba(4,12,24,.38);gap:14px 16px}
.bcs-form--hero .bcs-form-h{grid-column:1 / -1;margin:0 0 2px;
  font-family:'Barlow Condensed',sans-serif;font-size:25px;line-height:1.1;
  color:#0B2545;text-transform:uppercase;letter-spacing:.02em}
.bcs-form--hero .bcs-field input,
.bcs-form--hero .bcs-field select,
.bcs-form--hero .bcs-field textarea{min-height:46px;padding:11px 13px}
.bcs-form--hero .bcs-field textarea{min-height:72px}

/* The hero must GROW rather than clip once a form is in it: a fixed min-height
   put the sticky header on the H1 at 375x667 on a previous build. */
.bcs-hero:has(.bcs-hero-form){min-height:auto;padding-bottom:56px}

@media(max-width:1100px){
  .bcs-hero--left .bcs-hero-in{flex-direction:column;align-items:flex-start;gap:32px}
  .bcs-hero-form{width:100%;max-width:560px;flex:1 1 auto}
}
@media(max-width:767px){
  .bcs-form--hero{padding:20px 18px 22px}
  .bcs-form--hero .bcs-field{grid-column:1 / -1}
  .bcs-form--hero .bcs-form-h{font-size:22px}
}

/* Scoped under .bcs 2026-11-03: the homepage's own booking box uses the same class names with inline
   styles, and these rules must not reach it. Lede and error margins are 0 to keep the reviewed look
   (unscoped, .bcs p{margin:0} had been overriding them).
   ---- ServiceTitan scheduler, open inline in the hero (hero.scheduler in the spec) ----
   Takes the hero form's slot and box; the iframe scrolls inside, so the hero height stays fixed.
   bcs-sched--down: the app never said it was ready, so the frame collapses to the fallback line. */
.bcs .bcs-sched{background:#fff;border-top:4px solid #C8102E;box-shadow:0 18px 40px rgba(4,12,24,.38);overflow:hidden}
.bcs .bcs-sched-frame{display:block;width:100%;height:700px;border:0;background:#fff}
.bcs .bcs-sched-fail{margin:0;padding:22px 24px;font-size:17px;line-height:1.5;color:#0B2545}
.bcs .bcs-sched-fail a{color:#C8102E;font-weight:700}
.bcs .bcs-sched--down .bcs-sched-frame{display:none}
.bcs .bcs-sched-zip,.bcs .bcs-sched-closed{padding:26px 26px 28px}
.bcs .bcs-sched .bcs-form-h{margin:0 0 6px;font-family:'Barlow Condensed',sans-serif;font-size:25px;line-height:1.1;
  color:#0B2545;text-transform:uppercase;letter-spacing:.02em}
.bcs .bcs-sched-lede{margin:0;font-size:17px;line-height:1.5;color:#33415c}
/* after hours: ZIP entry on top (its lede carries the hours), "Call Now for an Emergency" and the numbers below */
.bcs .bcs-sched--after .bcs-sched-zip{padding-bottom:20px}
.bcs .bcs-sched--after .bcs-sched-closed{border-top:1px solid #e3e7ec;padding-top:20px}
.bcs .bcs-sched-hrs{display:none}
.bcs .bcs-sched--after .bcs-sched-hrs{display:inline}
.bcs .bcs-sched--after [data-bcs-sched-anyway]{display:none}
.bcs .bcs-sched-row{display:flex;flex-wrap:wrap;gap:12px;align-items:flex-end}
.bcs .bcs-sched-lbl{flex:1 1 100%;font-size:13px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:#0B2545}
.bcs .bcs-sched-row input{flex:1 1 160px;min-height:50px;padding:11px 14px;font-size:20px;letter-spacing:.08em;
  border:1px solid #b9c3d3;border-radius:4px;color:#0B2545;background:#fff}
/* Real <button>s: the theme's button rules beat .bcs-btn-red (same defect as the form submit above,
   measured as a white button with #CC3366 text on 2026-11-03), so state them at this specificity. */
.bcs .bcs-sched button.bcs-btn{flex:0 0 auto;min-height:52px;padding:0 22px;background:#C8102E;color:#fff;border:0;
  border-radius:3px;font-family:'Barlow Condensed',sans-serif;font-size:20px;font-weight:700;letter-spacing:.04em;
  text-transform:uppercase;cursor:pointer;transition:background .15s}
.bcs .bcs-sched button.bcs-btn:hover{background:#a50d26;color:#fff}
.bcs .bcs-sched button.bcs-btn:focus-visible{outline:3px solid #0B2545;outline-offset:2px}
.bcs .bcs-sched button.bcs-sched-link{background:none;border:0;padding:0;min-height:0;font-family:inherit;font-size:15px;
  font-weight:600;letter-spacing:0;text-transform:none;color:#0B2545;text-decoration:underline;cursor:pointer}
.bcs .bcs-sched button.bcs-sched-link:hover{background:none;color:#C8102E}
.bcs .bcs-sched-err{margin:0;font-size:15px;color:#C8102E;font-weight:600}
.bcs .bcs-sched-tel{list-style:none;margin:0 0 18px;padding:0;display:grid;gap:10px}
.bcs .bcs-sched-tel li{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:12px 14px;
  background:#f4f6f9;border-left:4px solid #C8102E;font-size:16px;color:#0B2545}
.bcs .bcs-sched-tel a{font-family:'Barlow Condensed',sans-serif;font-size:24px;font-weight:700;color:#C8102E;text-decoration:none}
.bcs .bcs-sched-change{display:block;margin:10px 14px 8px auto}
@media(max-width:767px){ .bcs .bcs-sched-frame{height:660px} }
/* The hero's lead form, under the hero when the scheduler holds the hero slot */
.bcs .bcs-callback{background:#f4f6f9;padding:56px 0}
.bcs .bcs-callback .bcs-form--callback{max-width:760px;margin:0 auto}
.bcs .bcs-callback .bcs-callback-k{display:block;max-width:760px;margin:0 auto 14px;text-align:center}
@media(max-width:767px){ .bcs .bcs-callback{padding:40px 0} }

/* ---- figures: numbers large as a graphic element ------------------------------
   The Splash Pools verdict named prose slabs as the defect and this as the fix. */
.bcs-figs-head{max-width:720px}
.bcs-fig-row{list-style:none;margin:44px 0 0;padding:0;display:grid;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:0;
  border-top:1px solid rgba(11,37,69,.14)}
.bcs-fig{padding:30px 28px 32px;border-bottom:1px solid rgba(11,37,69,.14);
  border-right:1px solid rgba(11,37,69,.14)}
.bcs-fig:last-child{border-right:0}
.bcs-fig-v{display:block;font-family:'Barlow Condensed',sans-serif;font-weight:700;
  font-size:clamp(46px,5.2vw,74px);line-height:.92;color:#C8102E;letter-spacing:-.01em}
.bcs-fig-l{display:block;margin-top:12px;color:#46566b;font-size:16px;line-height:1.5}
.bcs-fig-note{margin-top:26px;color:#46566b;font-size:16px;max-width:760px}

/* ---- swap: drag to compare ---------------------------------------------------- */
.bcs-swap-in{display:grid;grid-template-columns:1fr 1.15fr;gap:56px;align-items:center}
.bcs-swap-copy p{color:#46566b;font-size:17px;margin-top:14px}
.bcs-swap{position:relative;margin:0;overflow:hidden;border-radius:3px;
  box-shadow:0 16px 36px rgba(11,37,69,.18);line-height:0;isolation:isolate}
.bcs-swap img{width:100%;height:auto;display:block}
.bcs-swap-clip{position:absolute;inset:0;width:50%;overflow:hidden}
.bcs-swap-clip img{position:absolute;top:0;left:0;height:100%;width:auto;max-width:none}
.bcs-swap-lab{position:absolute;bottom:14px;z-index:3;font-family:'Barlow Condensed',sans-serif;
  text-transform:uppercase;letter-spacing:.1em;font-size:14px;font-weight:600;color:#fff;
  background:rgba(7,22,41,.78);padding:7px 12px;border-radius:2px;line-height:1}
.bcs-swap-lab--a{left:14px}
.bcs-swap-lab--b{right:14px}
.bcs-swap-handle{position:absolute;top:0;bottom:0;left:50%;width:2px;background:#fff;
  z-index:3;transform:translateX(-1px);box-shadow:0 0 0 1px rgba(7,22,41,.3)}
.bcs-swap-handle::after{content:"";position:absolute;top:50%;left:50%;width:42px;height:42px;
  margin:-21px 0 0 -21px;border-radius:50%;background:#fff;box-shadow:0 2px 10px rgba(7,22,41,.35)}
.bcs-swap-range{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;
  cursor:ew-resize;z-index:4;appearance:none;background:transparent}
.bcs-swap-range::-webkit-slider-thumb{appearance:none;width:48px;height:100%;cursor:ew-resize}

/* ---- decide: self-check ------------------------------------------------------- */
.bcs-dec-in{display:grid;grid-template-columns:1fr 1.1fr;gap:56px;align-items:start}
.bcs-dec-copy p{color:#46566b;font-size:17px;margin-top:14px}
.bcs-dec{background:#fff;border-top:4px solid #C8102E;padding:30px 30px 32px;
  box-shadow:0 14px 34px rgba(11,37,69,.14)}
.bcs-dec-q + .bcs-dec-q{margin-top:24px;padding-top:24px;border-top:1px solid rgba(11,37,69,.12)}
.bcs-dec-qt{font-family:'Barlow Condensed',sans-serif;font-size:19px;font-weight:600;
  color:#0B2545;letter-spacing:.01em;margin:0 0 12px}
.bcs-dec-opts{display:flex;flex-wrap:wrap;gap:9px}
.bcs-dec-opt{font:inherit;font-size:15px;color:#0B2545;background:#f4f6f9;
  border:1px solid #c3ccd8;border-radius:2px;padding:10px 14px;cursor:pointer;
  min-height:44px;transition:background .15s,border-color .15s,color .15s}
.bcs-dec-opt:hover{border-color:#0B2545}
.bcs-dec-opt.is-on{background:#0B2545;border-color:#0B2545;color:#fff}
.bcs-dec-out{margin-top:26px;padding-top:22px;border-top:1px solid rgba(11,37,69,.12)}
.bcs-dec-empty{color:#6b7a8d;font-size:16px;margin:0}
.bcs-dec-v h3{font-size:24px;color:#0B2545;margin:0}
.bcs-dec-v p{margin-top:10px;color:#46566b;font-size:16px;line-height:1.55}

@media(max-width:1024px){
  .bcs-swap-in,.bcs-dec-in{grid-template-columns:1fr;gap:32px}
}
@media(max-width:767px){
  .bcs-fig{padding:24px 20px 26px;border-right:0}
  .bcs-dec{padding:24px 20px 26px}
  .bcs-swap-lab{font-size:12px;padding:6px 9px}
}

/* ---- service area map: Leaflet + OSM, text left per standing direction --------- */
.bcs-map-in{display:grid;grid-template-columns:1fr 1.25fr;gap:52px;align-items:start}
.bcs-map-copy p{color:#46566b;font-size:17px;margin-top:14px}
.bcs-map-list{list-style:none;margin:22px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.bcs-map-list li{display:block}
.bcs-map-t{font:inherit;font-family:'Barlow Condensed',sans-serif;text-transform:uppercase;
  letter-spacing:.07em;font-size:14px;font-weight:600;color:#0B2545;cursor:pointer;
  background:#fff;border:1px solid #c3ccd8;border-radius:2px;padding:7px 11px;line-height:1;
  transition:background .15s,border-color .15s,color .15s}
.bcs-map-t:hover,.bcs-map-t.is-on{background:#0B2545;border-color:#0B2545;color:#fff}
.bcs-map-t:focus-visible{outline:3px solid #C8102E;outline-offset:2px}
.bcs-map-shell{position:relative;min-height:460px;background:#eef1f5;
  border-top:4px solid #C8102E;box-shadow:0 14px 34px rgba(11,37,69,.14)}
.bcs-map-canvas{position:absolute;inset:0}
.bcs-map-fallback{position:absolute;left:0;right:0;bottom:0;margin:0;padding:14px 18px;
  background:rgba(7,22,41,.9);color:#edf2f8;font-size:15px;line-height:1.45}
/* the fallback is visible by default and hidden only once OSM has really served tiles */
.bcs-map-shell[data-live] .bcs-map-fallback{display:none}
/* Leaflet's own chrome, themed. Attribution must stay legible and must not be hidden. */
.bcs-map-canvas .leaflet-container{font:inherit;background:#eef1f5}
.bcs-map-canvas .leaflet-control-attribution{font-size:11px;background:rgba(255,255,255,.86)}
.bcs-pin{display:block;width:18px;height:18px;border-radius:50%;border:2px solid #fff;
  box-shadow:0 1px 5px rgba(7,22,41,.45)}
.bcs-pin--town{background:#0B2545}
.bcs-pin--area{background:#4a6b96;width:14px;height:14px;margin:2px 0 0 2px}
.bcs-map-canvas .leaflet-marker-icon{transition:transform .16s}
.bcs-map-canvas .leaflet-marker-icon.is-on{transform:scale(1.55);z-index:600!important}
.bcs-map-canvas .leaflet-marker-icon.is-on .bcs-pin{background:#C8102E}
.bcs-pin--shop{background:#C8102E;width:22px;height:22px;margin:-2px 0 0 -2px}
.bcs-map-canvas .leaflet-popup-content{font-size:15px;line-height:1.45;color:#0B2545}
.bcs-map-canvas .leaflet-popup-content strong{font-family:'Barlow Condensed',sans-serif;
  font-size:18px;letter-spacing:.01em}

@media(max-width:1024px){
  .bcs-map-in{grid-template-columns:1fr;gap:30px}
  .bcs-map-shell{min-height:380px}
}
@media(max-width:767px){
  .bcs-map-shell{min-height:320px}
  .bcs-map-t{font-size:13px;padding:6px 9px}
}

/* ============================================================ decide: ONE QUESTION AT A TIME
   Jamie 2026-10-29: "way too much blank spavce quiz can be one question at a time vs all spread
   out maye need an image here". Measured before: the copy column was 207px inside a 697px row,
   so 490px of the section was empty at 1440.
   .is-stepped is added by JS. Without it every question shows, which is the no-JS path. */
.bcs-dec-fig{margin:28px 0 0;border-radius:4px;overflow:hidden;
  box-shadow:0 18px 40px rgba(11,37,69,.18)}
.bcs-dec-fig img{display:block;width:100%;height:auto}
.bcs-dec-dots{display:flex;gap:8px;list-style:none;margin:0 0 22px;padding:0}
.bcs-dec-dots li{width:28px;height:28px;border-radius:50%;display:grid;place-items:center;
  font-family:'IBM Plex Mono',ui-monospace,monospace;font-size:13px;font-weight:600;
  color:#6b7a8d;background:#f4f6f9;border:1px solid rgba(11,37,69,.14);
  transition:background .2s,color .2s,border-color .2s}
.bcs-dec-dots li.is-on{background:#0B2545;border-color:#0B2545;color:#fff}
.bcs-dec-dots li.is-done{background:#C8102E;border-color:#C8102E;color:#fff}
/* stepped: show only the active question. The border/padding that separated stacked questions is
   wrong once they are paged, so it is removed in stepped mode only. */
.bcs-dec.is-stepped .bcs-dec-q{display:none}
.bcs-dec.is-stepped .bcs-dec-q.is-on{display:block}
.bcs-dec.is-stepped .bcs-dec-q + .bcs-dec-q{margin-top:0;padding-top:0;border-top:0}
.bcs-dec.is-stepped .bcs-dec-qt{font-size:22px;line-height:1.25}
.bcs-dec.is-stepped .bcs-dec-opts{flex-direction:column;align-items:stretch;gap:10px}
.bcs-dec.is-stepped .bcs-dec-opt{text-align:left;padding:14px 16px;font-size:16px;line-height:1.4}
.bcs-dec.is-done .bcs-dec-qs{display:none}
.bcs-dec.is-done .bcs-dec-out{margin-top:0;padding-top:0;border-top:0}
.bcs-dec-nav{display:flex;gap:10px;margin-top:22px}
.bcs-dec-back,.bcs-dec-again{font:inherit;font-size:14px;font-weight:600;cursor:pointer;
  padding:10px 16px;border-radius:999px;border:1px solid rgba(11,37,69,.22);
  background:#fff;color:#0B2545;transition:border-color .18s,background .18s}
.bcs-dec-back:hover,.bcs-dec-again:hover{border-color:#0B2545;background:#f4f6f9}
.bcs-dec-back[hidden],.bcs-dec-again[hidden]{display:none}
.bcs-dec-opt:focus-visible,.bcs-dec-back:focus-visible,.bcs-dec-again:focus-visible{
  outline:3px solid #C8102E;outline-offset:2px}

/* ============================================================ panels: services as photo tabs
   Ported from directcooling-web ServicePanels.astro (= roadrunner rr/Services.astro, Jamie's pick
   2026-10-07). Hover, focus or tap opens one; the rest fold to a vertical label. */
.bcs-pnls{display:flex;gap:8px;height:540px;list-style:none;margin:52px 0 0;padding:0}
.bcs-pnl{position:relative;flex:1 1 0;min-width:0;border-radius:4px;overflow:hidden;
  background:#0B2545;transition:flex-grow .55s cubic-bezier(.2,.7,.2,1)}
.bcs-pnl.is-on{flex-grow:5.2}
/* `.elementor img{height:auto}` in bc-common-1 is (0,1,1) and beat a bare `.bcs-pnl-img`
   (0,1,0), so the photo rendered at its own aspect ratio inside a 540px panel instead of
   filling it. The child combinator makes this (0,2,0), which wins without !important. */
.bcs-pnl > .bcs-pnl-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  filter:saturate(.85) contrast(1.05);transition:transform .8s cubic-bezier(.2,.7,.2,1)}
.bcs-pnl::before{content:'';position:absolute;inset:0;z-index:1;
  background:rgba(7,22,41,.72);transition:background .45s}
/* TWO layers, not one. A single left-to-right scrim measured 2.22:1 on the heading and 1.77:1
   on the body over the leaks photo, which has bright wall in the lower left. The vertical layer
   darkens the band the text actually occupies whatever the photo does there. Measured after:
   see the contrast numbers in the session notes. */
.bcs-pnl.is-on::before{background:
  linear-gradient(to top,rgba(7,22,41,.96) 0%,rgba(7,22,41,.72) 34%,rgba(7,22,41,.22) 62%,
    rgba(7,22,41,.10) 100%),
  linear-gradient(90deg,rgba(7,22,41,.92) 0%,rgba(7,22,41,.70) 55%,rgba(7,22,41,.18) 100%)}
.bcs-pnl.is-on > .bcs-pnl-img{transform:scale(1.03)}
/* the hit area is the whole panel so hover and tap agree with each other */
.bcs-pnl-hit{position:absolute;inset:0;z-index:3;width:100%;border:0;padding:0;margin:0;
  background:none;cursor:pointer;font:inherit;color:#fff}
.bcs-pnl-tab{position:absolute;left:50%;bottom:24px;display:flex;align-items:center;gap:12px;
  white-space:nowrap;writing-mode:vertical-rl;transform:translateX(-50%) rotate(180deg);
  font-family:'Barlow Condensed',sans-serif;font-size:20px;font-weight:600;letter-spacing:.03em;
  text-transform:uppercase;color:#fff;transition:opacity .25s}
.bcs-pnl-tab b{font-family:'IBM Plex Mono',ui-monospace,monospace;font-size:13px;font-weight:500;
  color:#C8102E}
.bcs-pnl.is-on .bcs-pnl-tab{opacity:0}
.bcs-pnl-body{position:absolute;left:0;bottom:0;z-index:2;width:min(440px,100%);
  display:grid;gap:12px;padding:36px;opacity:0;transform:translateY(12px);
  transition:opacity .3s,transform .4s;pointer-events:none}
.bcs-pnl.is-on .bcs-pnl-body{opacity:1;transform:none;transition-delay:.18s}
.bcs-pnl-n{font-family:'IBM Plex Mono',ui-monospace,monospace;font-size:13px;font-weight:500;
  letter-spacing:.08em;color:#C8102E}
.bcs-pnl-body h3{font-family:'Barlow Condensed',sans-serif;
  font-size:clamp(28px,3vw,40px);line-height:1.05;color:#fff;margin:0}
.bcs-pnl-body p{font-size:17px;line-height:1.55;color:#dfe6f0;margin:0}
.bcs-pnl-hit:focus-visible{outline:3px solid #C8102E;outline-offset:-3px}
/* no-JS and reduced motion: without the script nothing has .is-on, so show every panel's copy
   rather than a row of photos with no words. An empty set of readable panels is not a pass. */
.bcs-pnls:not([data-wired]) .bcs-pnl:first-child{flex-grow:5.2}
.bcs-pnls:not([data-wired]) .bcs-pnl:first-child .bcs-pnl-body{opacity:1;transform:none}
.bcs-pnls:not([data-wired]) .bcs-pnl:first-child .bcs-pnl-tab{opacity:0}

@media(max-width:1024px){
  .bcs-pnls{height:480px}
  .bcs-pnl-body{padding:28px}
}
@media(max-width:860px){
  .bcs-pnls{flex-direction:column;height:auto;gap:10px}
  .bcs-pnl{flex:none;height:72px;transition:height .5s cubic-bezier(.2,.7,.2,1)}
  .bcs-pnl.is-on{height:380px}
  .bcs-pnl-tab{left:22px;right:18px;bottom:auto;top:50%;writing-mode:horizontal-tb;
    transform:translateY(-50%);font-size:19px;white-space:normal}
  .bcs-pnl-body{width:100%;padding:24px}
  .bcs-pnls:not([data-wired]) .bcs-pnl:first-child{height:380px}
}
@media(max-width:767px){
  .bcs-dec-fig{margin-top:22px}
  .bcs-dec.is-stepped .bcs-dec-qt{font-size:20px}
}
@media(prefers-reduced-motion:reduce){
  .bcs-pnl,.bcs-pnl-img,.bcs-pnl-body,.bcs-pnl::before{transition:none}
}

/* ============================================================ signals: repipe vs repair
   Jamie 2026-10-29: "formating is offf and very boring". The old `steps` layout put the H2 and
   four paragraphs in a 466px column, so a 297px wall of text sat in the narrow column while the
   four signals, the actual content, were a plain list beside it. The signals are now the section. */
.bcs-sig-k{margin:0 0 22px}
.bcs-sigs{display:grid;grid-template-columns:repeat(2,1fr);gap:4px;list-style:none;margin:0;padding:0;
  border:1px solid rgba(11,37,69,.12);background:rgba(11,37,69,.12)}
.bcs-sig{position:relative;background:#fff;padding:34px 34px 36px;
  transition:background .25s,box-shadow .25s}
.bcs-sig:hover{background:#fbfcfd;box-shadow:0 10px 30px rgba(11,37,69,.08)}
.bcs-sig-n{display:block;font-family:'IBM Plex Mono',ui-monospace,monospace;font-size:13px;
  font-weight:500;letter-spacing:.08em;color:#C8102E;margin-bottom:14px}
.bcs-sig h3{font-family:'Barlow Condensed',sans-serif;font-size:clamp(23px,2.1vw,29px);
  line-height:1.12;color:#0B2545;margin:0 0 10px;max-width:20ch}
.bcs-sig p{font-size:16px;line-height:1.6;color:#46566b;margin:0}
/* the local note is a different object from the signals, so it reads as an aside not a 5th card */
.bcs-sig-foot{display:grid;grid-template-columns:1.55fr 1fr;gap:30px;align-items:stretch;
  margin-top:36px}
.bcs-sig-note{display:grid;grid-template-columns:auto 1fr;gap:22px;align-items:start;
  padding:30px 34px;background:#0B2545;border-left:4px solid #C8102E}
.bcs-sig-note .bcs-ico{display:grid;place-items:center;width:46px;height:46px;flex:none;
  border-radius:50%;background:rgba(255,255,255,.10);color:#fff}
.bcs-sig-note .bcs-ico svg{width:22px;height:22px}
.bcs-sig-note p{color:#dfe6f0;font-size:16.5px;line-height:1.65;margin:0}
.bcs-sig-note p + p{margin-top:12px}
.bcs-sig-after{display:flex;flex-direction:column;justify-content:center}
.bcs-sig-after p{color:#46566b;font-size:17px;line-height:1.65;margin:0}
.bcs-sig-after p + p{margin-top:12px}
@media(max-width:1024px){
  .bcs-sig-foot{grid-template-columns:1fr;gap:24px}
}
@media(max-width:860px){
  .bcs-sigs{grid-template-columns:1fr}
  .bcs-sig{padding:26px 24px 28px}
  .bcs-sig-note{grid-template-columns:1fr;gap:16px;padding:24px 24px}
}

/* ============================================================ chat: FAQ as a text thread
   Jamie 2026-10-29 "the faq section nees to be the iphone style chat", which is the standing rule
   (never an accordion). Ported from the Solcara "Ask" widget / TC Advisors partner chat.
   The <dl> below carries the real Q&A and is hidden ONLY once JS sets .is-live. */
.bcs-chat-sec .bcs-h2{max-width:22ch;margin-bottom:34px}
.bcs-chat{max-width:860px;border-radius:6px;overflow:hidden;background:#fff;
  border:1px solid rgba(11,37,69,.14);box-shadow:0 18px 44px rgba(11,37,69,.12)}
.bcs-chat-head{display:flex;align-items:center;gap:14px;padding:18px 22px;
  background:#0B2545;border-bottom:1px solid rgba(255,255,255,.08)}
.bcs-chat-av{position:relative;flex:0 0 auto;display:block;border-radius:50%;padding:2px;
  background:linear-gradient(130deg,#C8102E,#0B2545)}
.bcs-chat-av img{display:block;border-radius:50%;object-fit:cover;border:2px solid #fff}
.bcs-chat-av--lg{width:54px;height:54px}
.bcs-chat-av--lg img{width:46px;height:46px}
.bcs-chat-av--sm{width:36px;height:36px}
.bcs-chat-av--sm img{width:28px;height:28px}
.bcs-chat-av--lg::after{content:"";position:absolute;right:1px;bottom:1px;width:11px;height:11px;
  border-radius:50%;background:#3ddc84;border:2px solid #0B2545}
.bcs-chat-who{display:grid;gap:1px;min-width:0}
.bcs-chat-who strong{font-family:'Barlow Condensed',sans-serif;font-size:19px;letter-spacing:.02em;
  color:#fff;line-height:1.25}
.bcs-chat-who span{font-size:13px;color:#b9c6d6;line-height:1.4}
.bcs-chat-on{margin-left:auto;padding:6px 14px;border-radius:999px;
  background:rgba(61,220,132,.16);color:#3ddc84;
  font-family:'IBM Plex Mono',ui-monospace,monospace;font-size:11px;font-weight:500;
  letter-spacing:.12em;text-transform:uppercase}
.bcs-chat-thread{padding:22px;display:grid;gap:13px;background:#fff;
  max-height:460px;overflow-y:auto;scroll-behavior:smooth}
.bcs-chat-row{display:flex;gap:11px;align-items:flex-end}
.bcs-chat-row--me{justify-content:flex-end}
.bcs-chat-b{max-width:78%;margin:0;padding:13px 17px;border-radius:16px 16px 16px 4px;
  background:#f1f4f8;font-size:15.5px;line-height:1.6;color:#2c3c52}
.bcs-chat-row--me .bcs-chat-b{border-radius:16px 16px 4px 16px;background:#0B2545;color:#fff}
.bcs-chat-dots{letter-spacing:3px;font-weight:700;color:#8b9aad}
.bcs-chat-foot{padding:16px 22px 22px;background:#f7f9fb;border-top:1px solid rgba(11,37,69,.10)}
.bcs-chat-foot .bcs-k{margin:0 0 12px}
.bcs-chat-chips{display:flex;flex-wrap:wrap;gap:9px}
.bcs-chat-chip{font:inherit;font-size:14.5px;font-weight:600;color:#0B2545;background:#fff;
  padding:10px 17px;border:1px solid rgba(11,37,69,.20);border-radius:999px;cursor:pointer;
  transition:border-color .2s,transform .2s,opacity .2s;text-align:left}
.bcs-chat-chip:hover:not([disabled]){border-color:#C8102E;transform:translateY(-1px)}
.bcs-chat-chip:focus-visible{outline:3px solid #C8102E;outline-offset:2px}
.bcs-chat-chip[disabled]{opacity:.42;cursor:default;transform:none}
/* the real Q&A. Present for crawlers and for a no-JS visitor; hidden only once the chat boots. */
.bcs-chat-src{max-width:860px;margin:30px 0 0}
.bcs-chat-src dt{font-family:'Barlow Condensed',sans-serif;font-size:21px;color:#0B2545;
  margin-top:20px}
.bcs-chat-src dd{margin:7px 0 0;font-size:16.5px;line-height:1.65;color:#46566b}
.bcs-chat.is-live ~ .bcs-chat-src{display:none}
@media(max-width:600px){
  .bcs-chat-b{max-width:88%}
  .bcs-chat-head{padding:14px 16px}
  .bcs-chat-thread{padding:16px;max-height:420px}
  .bcs-chat-foot{padding:14px 16px 18px}
  .bcs-chat-chip{font-size:14px;padding:9px 14px}
}
@media(prefers-reduced-motion:reduce){
  .bcs-chat-chip{transition:none}
  .bcs-chat-thread{scroll-behavior:auto}
}

/* ---- map reworked 2026-10-29: full-bleed band on top, copy and the town list below.
   The shell is outside .bcs-in so it is full width WITHOUT 100vw, which would overflow by the
   width of the scrollbar and put a horizontal scroll on the page. */
.bcs-map-sec{padding-top:0}
.bcs-map-shell--full{min-height:0;height:clamp(440px,72vh,720px);width:100%;
  border-top:4px solid #C8102E;border-bottom:4px solid #C8102E;box-shadow:none}
.bcs-map-below{padding-top:52px}
.bcs-map-below .bcs-h2{max-width:24ch}
.bcs-map-copy{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.25fr);gap:52px;
  align-items:start}
.bcs-map-copy .bcs-h2{margin:0}
.bcs-map-list{margin-top:30px}
@media(max-width:1024px){
  .bcs-map-copy{grid-template-columns:1fr;gap:20px}
  .bcs-map-shell--full{height:clamp(380px,58vh,560px)}
}
@media(max-width:767px){
  .bcs-map-below{padding-top:36px}
  .bcs-map-shell--full{height:clamp(340px,52vh,460px)}
}

/* ============================================================ theme button-hover override
   ⛔ bc-common-2.css ships `[type="button"]:hover,[type="button"]:focus{background:#CC3366;color:#fff}`.
   Specificity (0,2,0). EVERY control in this design system is a <button type="button">, so the
   theme painted the service panels, the quiz options, Back/Start over, the chat chips and the map
   town chips magenta-pink on hover. Jamie caught it on the panels 2026-10-29.
   `.bcs` + class + pseudo = (0,3,0), which wins without !important.
   Each rule below restates the colour the control is SUPPOSED to have, so a green here is the
   real painted value and not merely "the pink is gone". */
.bcs .bcs-pnl-hit:hover,.bcs .bcs-pnl-hit:focus,.bcs .bcs-pnl-hit:active{
  background:transparent;color:#fff}
.bcs .bcs-dec-opt:hover,.bcs .bcs-dec-opt:focus,.bcs .bcs-dec-opt:active{
  background:#f4f6f9;color:#0B2545;border-color:#0B2545}
.bcs .bcs-dec-opt.is-on,.bcs .bcs-dec-opt.is-on:hover,.bcs .bcs-dec-opt.is-on:focus{
  background:#0B2545;border-color:#0B2545;color:#fff}
.bcs .bcs-dec-back:hover,.bcs .bcs-dec-back:focus,.bcs .bcs-dec-back:active,
.bcs .bcs-dec-again:hover,.bcs .bcs-dec-again:focus,.bcs .bcs-dec-again:active{
  background:#f4f6f9;color:#0B2545;border-color:#0B2545}
.bcs .bcs-chat-chip:hover,.bcs .bcs-chat-chip:focus,.bcs .bcs-chat-chip:active{
  background:#fff;color:#0B2545;border-color:#C8102E}
.bcs .bcs-map-t:hover,.bcs .bcs-map-t:focus,.bcs .bcs-map-t:active,.bcs .bcs-map-t.is-on{
  background:#0B2545;color:#fff;border-color:#0B2545}

/* ============================================================ balance pass (Jamie 2026-10-29)
   Measured at 1680 before the fix: the quiz card bottom sat 142px above the row bottom while the
   copy column ran the full height, so the right half read as unfinished. Centring the card in the
   row splits that void evenly instead of hanging it all under the card. */
/* The card is ~154px shorter than the copy column (h2 + lede + photo). Centring it left 77px of
   void ABOVE and BELOW and finished the card 77px short of the photo's bottom edge, so the two
   columns never landed on the same line. Bottom alignment puts the quiz down level with the
   photo, which is what reads as balanced. Measured, not eyeballed. */
.bcs-dec-in{align-items:end}
/* FAQ was 128px left of the container centre: an 860px max-width block with no auto margin. */
.bcs-chat{margin-left:auto;margin-right:auto}
.bcs-chat-src{margin-left:auto;margin-right:auto}
.bcs-chat-sec .bcs-h2{max-width:none;text-align:center}
.bcs-chat-sec .bcs-chat-src dt,.bcs-chat-sec .bcs-chat-src dd{text-align:left}

/* map order reversed: the band now sits UNDER the copy, so the section pads at the top and the
   map runs to the section's bottom edge. */
.bcs-map-sec{padding-top:104px;padding-bottom:0}
.bcs-map-above{padding-bottom:52px}
.bcs-map-above .bcs-h2{max-width:24ch}
@media(max-width:767px){ .bcs-map-above{padding-bottom:36px} }


/* ============================================================ rail: repipe-vs-repair signals
   Replaces the 2x2 grid Jamie called "ai slop". Measured defect there: h3 capped at 263px over a
   487px paragraph inside one 555px card, so the title read as a stacked separate block. Each rail
   card is a single column, so the title and the body share one measure. */
.bcs-rail-bar{display:flex;align-items:center;justify-content:space-between;gap:24px;
  margin:34px 0 20px}
.bcs-rail-bar .bcs-k{margin:0}
.bcs-rail-ui{display:flex;align-items:center;gap:10px}
.bcs-rail-dots{display:flex;gap:7px;margin-right:6px}
.bcs-rail-dot{width:28px;height:4px;border:0;padding:0;border-radius:2px;cursor:pointer;
  background:rgba(11,37,69,.20);transition:background .25s,width .25s}
.bcs-rail-dot.is-on{background:#C8102E;width:44px}
.bcs-rail-dot:focus-visible,.bcs-rail-arw:focus-visible{outline:3px solid #C8102E;outline-offset:3px}
.bcs-rail-arw{width:40px;height:40px;border-radius:50%;cursor:pointer;font:inherit;font-size:17px;
  border:1px solid rgba(11,37,69,.22);background:#fff;color:#0B2545;
  transition:border-color .2s,background .2s,opacity .2s}
.bcs-rail-arw:hover:not([disabled]){border-color:#0B2545;background:#f4f6f9}
.bcs-rail-arw[disabled]{opacity:.34;cursor:default}
.bcs-rail{display:grid;grid-auto-flow:column;grid-auto-columns:380px;gap:22px;
  list-style:none;margin:0;padding:4px 0 18px;overflow-x:auto;overscroll-behavior-x:contain;
  scroll-behavior:smooth;scrollbar-width:thin}
.bcs-rail-card{background:#fff;padding:32px 32px 36px;
  border:1px solid rgba(11,37,69,.12);border-top:3px solid #C8102E;
  display:grid;align-content:start;gap:10px;
  transition:box-shadow .25s,transform .25s}
.bcs-rail-card:hover{box-shadow:0 16px 38px rgba(11,37,69,.12);transform:translateY(-3px)}
.bcs-rail-n{font-family:'IBM Plex Mono',ui-monospace,monospace;font-size:13px;font-weight:500;
  letter-spacing:.08em;color:#C8102E}
.bcs-rail-card h3{font-family:'Barlow Condensed',sans-serif;font-size:clamp(24px,2.1vw,30px);
  line-height:1.1;color:#0B2545;margin:0}
.bcs-rail-card p{font-size:16.5px;line-height:1.62;color:#46566b;margin:0}
/* the rail is the scroll container, so keep the native scrollbar usable rather than hiding it */
.bcs-rail::-webkit-scrollbar{height:8px}
.bcs-rail::-webkit-scrollbar-thumb{background:rgba(11,37,69,.22);border-radius:4px}
.bcs-rail::-webkit-scrollbar-track{background:rgba(11,37,69,.06);border-radius:4px}
@media(max-width:767px){
  .bcs-rail{grid-auto-columns:82%}
  .bcs-rail-card{padding:24px 22px 28px}
  .bcs-rail-bar{flex-wrap:wrap;gap:14px}
}
@media(prefers-reduced-motion:reduce){
  .bcs-rail{scroll-behavior:auto}
  .bcs-rail-card,.bcs-rail-dot,.bcs-rail-arw{transition:none}
}

/* the two service-area paragraphs are one grid child now: as separate children the second fell
   into column 1 row 2 under the H2 and left the right column empty. */
.bcs-map-copy-body{display:grid;gap:14px}
.bcs-map-copy-body p{margin:0}

/* ============================================================ centred section heads
   Jamie 2026-10-29: "thigs off center text just scattered heading nee sto be cetered".
   The scattered look was the two-column head: H2 hard left, lede hard right, a 52-72px gulf
   between them and the columns finishing at different heights. Full-width section heads are a
   centred stack now. Enforced by bcs-layout-gate.mjs --h2-align center. */
.bcs-st-head{text-align:center;max-width:860px;margin-left:auto;margin-right:auto}
.bcs-st-head .bcs-h2{max-width:22ch;margin-left:auto;margin-right:auto}
.bcs-st-head .bcs-p{max-width:64ch;margin-left:auto;margin-right:auto}
.bcs-map-copy{display:block;text-align:center;max-width:860px;margin:0 auto}
.bcs-map-copy .bcs-h2{max-width:22ch;margin:0 auto 22px}
.bcs-map-copy-body{display:grid;gap:14px;max-width:62ch;margin:0 auto;text-align:left}
.bcs-map-list{justify-content:center}
.bcs-rail-sec .bcs-head,.bcs-wheel-sec .bcs-head,.bcs-pnl-sec .bcs-head{margin-bottom:44px}

/* ============================================================ theme-hover safety net
   ⛔ bc-common-2.css paints `button:hover, button:focus, [type="button"]:hover,
   [type="button"]:focus { background:#CC3366 }` at specificity (0,2,0). Listing each control by
   hand does NOT hold: the wheel and the rail were built after the first fix and every one of
   their controls came back pink. 7 of them were still live when the layout gate caught it.
   This is the structural version. `.bcs` + element + pseudo = (0,3,0), so ANY control inside the
   design system, including ones that do not exist yet, resolves to its own declared background
   instead of the theme's magenta. A control opts into a different hover by setting --bcs-hover-bg.
   Enforced by bcs-layout-gate.mjs, which forces :hover/:focus on every control and reads the
   PAINTED colour (with transitions frozen, or it reads the start of the fade and passes). */
.bcs button:hover,.bcs button:focus,.bcs button:active,
.bcs [type="button"]:hover,.bcs [type="button"]:focus,.bcs [type="button"]:active{
  background-color:var(--bcs-hover-bg,var(--bcs-base-bg,#fff))}

/* per-control declarations, so the net above resolves to the right colour */
.bcs-rail-dot{--bcs-base-bg:rgba(11,37,69,.20);--bcs-hover-bg:rgba(11,37,69,.42)}
.bcs-rail-dot.is-on{--bcs-base-bg:#C8102E;--bcs-hover-bg:#C8102E}
.bcs-rail-arw{--bcs-base-bg:#fff;--bcs-hover-bg:#f4f6f9}
.bcs-rail-arw[disabled]{--bcs-hover-bg:#fff}
.bcs .bcs-wheel-tab{--bcs-base-bg:transparent;--bcs-hover-bg:transparent}
.bcs-dec-opt{--bcs-base-bg:#f4f6f9;--bcs-hover-bg:#f4f6f9}
.bcs-dec-opt.is-on{--bcs-base-bg:#0B2545;--bcs-hover-bg:#0B2545}
.bcs-dec-back,.bcs-dec-again{--bcs-base-bg:#fff;--bcs-hover-bg:#f4f6f9}
.bcs-chat-chip{--bcs-base-bg:#fff;--bcs-hover-bg:#fff}
.bcs-map-t{--bcs-base-bg:#fff;--bcs-hover-bg:#0B2545}
.bcs-pnl-hit{--bcs-base-bg:transparent;--bcs-hover-bg:transparent}

/* ============================================================ wheel: the shutoff valve
   Jamie 2026-11-02: "the wheel looks terrible i hate it but it needs to spin on scroll ... we
   have such better aesthetic on our other sites". Rebuilt as an instrument, the way the sibling
   sites carry one metaphor (Great Heron flies the visitor through the pipe): a red cast handwheel
   inside a machined steel gauge bezel, on a dark navy blueprint stage. Scroll turns the handwheel
   continuously and the lit arc settles on each step; the steps are a list beside the dial.
   Lessons kept from the dial this replaces, so they are not relearned:
   - every size derives from ONE --dial value (an absolute radius beside a fluid dial clipped
     every satellite); the numerals now live inside the SVG viewBox, so nothing can escape it;
   - the stage parks BELOW the sticky header via --bcs-hdr, set by the JS;
   - hovering the section must never stop scroll from driving it. The old one paused on
     pointerenter of the whole run, which a mouse is always over while the run is pinned. */
.bcs-valve-sec{background:
  linear-gradient(rgba(159,179,204,.045) 1px,transparent 1px) 0 0/56px 56px,
  linear-gradient(90deg,rgba(159,179,204,.045) 1px,transparent 1px) 0 0/56px 56px,
  #071629}
.bcs-wheel-run{position:relative}
.bcs-wheel-stage{--gx:28%;
  background:radial-gradient(60vmin 60vmin at var(--gx) 50%,rgba(30,84,148,.42),rgba(30,84,148,0) 72%)}
.bcs-wheel-run.is-pinned{height:calc(var(--n,4) * 75vh + 100vh)}
.bcs-wheel-run.is-pinned .bcs-wheel-stage{position:sticky;top:var(--bcs-hdr,0px);
  height:calc(100vh - var(--bcs-hdr,0px));height:calc(100svh - var(--bcs-hdr,0px));
  display:grid;place-items:center;overflow:hidden}

.bcs-wheel{display:grid;grid-template-columns:var(--dial) minmax(0,460px);align-items:center;
  justify-content:center;gap:clamp(40px,5.4vw,104px);width:100%;padding-top:24px;padding-bottom:24px;
  --dial:min(460px,82vw)}
.bcs-wheel-run.is-pinned .bcs-wheel{
  --dial:min(560px,calc(100vh - var(--bcs-hdr,0px) - 88px),44vw);
  --dial:min(560px,calc(100svh - var(--bcs-hdr,0px) - 88px),44vw)}

/* the dial: five layers on one box, all sharing the SVG's 400x400 geometry */
.bcs-wheel-dial{position:relative;width:var(--dial);aspect-ratio:1;border-radius:50%;
  box-shadow:0 46px 90px -24px rgba(0,0,0,.7),0 0 0 1px rgba(255,255,255,.05)}
.bcs-wheel-dial>svg,.bcs-wheel-dial>span{position:absolute;inset:0;width:100%;height:100%;display:block}
/* scale(.9) leaves a clear ring between the rim knurls and the step numerals */
.bcs-wheel-hand{transform:rotate(0deg) scale(.9);will-change:transform}
.bcs-wheel-shadow{inset:21.7%!important;width:auto!important;height:auto!important;border-radius:50%;
  box-shadow:0 16px 28px rgba(0,0,0,.6),0 4px 8px rgba(0,0,0,.4)}
.bcs-wheel-glass{inset:3.75%!important;width:auto!important;height:auto!important;border-radius:50%;
  pointer-events:none;
  background:radial-gradient(120% 90% at 30% 12%,rgba(255,255,255,.16),rgba(255,255,255,0) 46%)}
.bcs-wheel-face .bv-tk{stroke:rgba(195,211,230,.34);stroke-width:1.4;stroke-linecap:round}
.bcs-wheel-face .bv-tk-m{stroke:rgba(255,255,255,.9);stroke-width:2.8}
.bcs-wheel-face .bv-track{fill:none;stroke:rgba(255,255,255,.09);stroke-width:7;stroke-linecap:round}
.bcs-wheel-face .bv-num{font-family:'IBM Plex Mono',ui-monospace,monospace;font-size:13px;font-weight:600;
  letter-spacing:.06em;fill:rgba(195,211,230,.62);text-anchor:middle}
.bcs-wheel-face .bv-eng{font-family:'IBM Plex Mono',ui-monospace,monospace;font-size:9.5px;font-weight:500;
  letter-spacing:.34em;fill:rgba(195,211,230,.42);text-anchor:middle}
.bcs-wheel-prog{fill:none;stroke-width:7;stroke-linecap:round;stroke-dasharray:0 200;
  filter:drop-shadow(0 0 5px rgba(255,70,96,.7))}
.bcs-wheel-pip{fill:#0b2545;stroke:rgba(195,211,230,.55);stroke-width:2;transition:fill .3s,stroke .3s}
.bcs-wheel-pip.is-lit{fill:#fff;stroke:#ff5a70}
.bcs-wheel-bead .bv-halo{fill:rgba(255,90,112,.24)}
.bcs-wheel-bead .bv-dot{fill:#fff}
.bcs-wheel-hand .bv-spk-hl{fill:none;stroke:rgba(255,255,255,.24);stroke-width:2;stroke-linecap:round}

/* the copy: one panel at a time, all stacked in ONE grid cell so swapping never moves the list */
.bcs-wheel-copy{display:grid;gap:clamp(24px,4vh,44px);align-content:center;min-width:0}
.bcs-wheel-panels{display:grid;gap:30px}
.bcs-wheel-panel{display:grid;gap:14px;align-content:start}
.bcs-wheel-run.is-live .bcs-wheel-panels{gap:0}
.bcs-wheel-run.is-live .bcs-wheel-panel{grid-area:1/1;visibility:hidden;opacity:0;transform:translateY(12px);
  transition:opacity .35s ease,transform .45s cubic-bezier(.2,.7,.2,1),visibility 0s linear .35s}
.bcs-wheel-run.is-live .bcs-wheel-panel.is-on{visibility:visible;opacity:1;transform:none;
  transition:opacity .35s ease .05s,transform .45s cubic-bezier(.2,.7,.2,1) .05s,visibility 0s}
.bcs-wheel-n{font-family:'IBM Plex Mono',ui-monospace,monospace;font-size:13px;font-weight:500;
  letter-spacing:.16em;text-transform:uppercase;color:#ff8a9b}
.bcs-valve-sec .bcs-wheel-panel h3{font-size:clamp(34px,3.5vw,54px);line-height:1.02;color:#fff;margin:0;max-width:15ch}
.bcs-valve-sec .bcs-wheel-panel p{font-size:clamp(17px,1.3vw,20px);line-height:1.6;color:#c3d3e6;margin:0;max-width:40ch}

/* the step list. These buttons ARE the tabs; hidden without JS because they would do nothing */
.bcs-wheel-tabs{display:none}
.bcs-wheel-run.is-live .bcs-wheel-tabs{display:grid;border-top:1px solid rgba(159,179,204,.18)}
.bcs .bcs-wheel-tab{position:relative;display:grid;grid-template-columns:46px minmax(0,1fr);align-items:center;
  width:100%;margin:0;padding:14px 0 14px 18px;min-height:0;height:auto;border:0;border-radius:0;
  border-bottom:1px solid rgba(159,179,204,.18);box-shadow:none;background-color:transparent;
  color:rgba(195,211,230,.5);font-family:'Barlow Condensed','Barlow',sans-serif;font-weight:600;
  font-size:clamp(18px,1.35vw,21px);line-height:1.2;letter-spacing:.015em;text-transform:none;
  text-align:left;white-space:normal;cursor:pointer;transition:color .25s ease}
.bcs .bcs-wheel-tab::before{content:"";position:absolute;left:0;top:12px;bottom:12px;width:3px;border-radius:2px;
  background:#C8102E;transform:scaleY(0);transition:transform .35s cubic-bezier(.2,.7,.2,1)}
.bcs .bcs-wheel-tab.is-done{color:rgba(195,211,230,.78)}
.bcs .bcs-wheel-tab.is-on{color:#fff}
.bcs .bcs-wheel-tab.is-on::before{transform:scaleY(1)}
.bcs .bcs-wheel-tab:hover{color:#fff}
.bcs .bcs-wheel-tab:focus-visible{outline:2px solid #ff8a9b;outline-offset:2px}
.bcs-wheel-tn{font-family:'IBM Plex Mono',ui-monospace,monospace;font-size:12px;font-weight:500;letter-spacing:.1em}
.bcs-wheel-tab.is-on .bcs-wheel-tn{color:#ff8a9b}
/* not pinned (reduced motion or a screen too short to pin): a tab click eases the dial over */
.bcs-wheel-run.is-live:not(.is-pinned) .bcs-wheel-hand{transition:transform 1s cubic-bezier(.2,.7,.2,1)}
.bcs-wheel-run.is-live:not(.is-pinned) .bcs-wheel-prog{transition:stroke-dasharray .8s cubic-bezier(.2,.7,.2,1)}

.bcs-valve-sec .bcs-wheel-after{margin:56px auto 0;max-width:78ch}
.bcs-valve-sec .bcs-wheel-after p{color:#c3d3e6;font-size:17px;line-height:1.65;margin:0}
.bcs-valve-sec .bcs-wheel-after p+p{margin-top:12px}

@media(max-width:900px){
  .bcs-wheel-stage{--gx:50%}
  .bcs-wheel{grid-template-columns:minmax(0,1fr);justify-items:center;text-align:center;
    gap:clamp(14px,2.4vh,28px);padding-top:12px;padding-bottom:12px}
  .bcs-wheel-run.is-pinned .bcs-wheel{
    --dial:clamp(130px,calc(100vh - var(--bcs-hdr,0px) - 300px),min(76vw,380px));
    --dial:clamp(130px,calc(100svh - var(--bcs-hdr,0px) - 300px),min(76vw,380px))}
  .bcs-wheel-copy{justify-items:center;width:100%;max-width:520px;gap:clamp(14px,2.2vh,24px)}
  .bcs-wheel-panel{justify-items:center}
  .bcs-valve-sec .bcs-wheel-panel h3{font-size:clamp(24px,3.6vh,34px);max-width:18ch}
  .bcs-valve-sec .bcs-wheel-panel p{font-size:clamp(14.5px,1.95vh,17px);max-width:36ch}
  /* the list becomes four numbered segments; the title stays in the button for screen readers */
  .bcs-wheel-run.is-live .bcs-wheel-tabs{grid-auto-flow:column;grid-auto-columns:1fr;gap:6px;border-top:0;
    width:min(100%,360px)}
  .bcs .bcs-wheel-tab{grid-template-columns:1fr;justify-items:center;padding:10px 0 4px;border-bottom:0;
    border-top:3px solid rgba(159,179,204,.22)}
  .bcs .bcs-wheel-tab::before{left:0;right:0;top:-3px;bottom:auto;width:auto;height:3px;transform:scaleX(0);
    transform-origin:left}
  .bcs .bcs-wheel-tab.is-done::before{transform:scaleX(1);opacity:.5}
  .bcs .bcs-wheel-tab.is-on::before{transform:scaleX(1);opacity:1}
  .bcs-wheel-tt{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
}
@media(prefers-reduced-motion:reduce){
  .bcs-wheel-run.is-live .bcs-wheel-panel,.bcs-wheel-run.is-live .bcs-wheel-panel.is-on,
  .bcs .bcs-wheel-tab,.bcs .bcs-wheel-tab::before,.bcs-wheel-pip,
  .bcs-wheel-run.is-live:not(.is-pinned) .bcs-wheel-hand,
  .bcs-wheel-run.is-live:not(.is-pinned) .bcs-wheel-prog{transition:none}
}

/* ============================================================ RHYTHM variants (section-upgrade)
   Jamie 2026-11-02: "sections just look so plain and boring snooze fest". Measured by
   ~/.claude/skills/section-upgrade/scripts/section-gate.mjs: one text-plus-photo layout 3 times,
   one numbered-list layout 3 times, one tile grid 3 times, photos parked at the foot of long text
   columns (343 to 607px voids), and 49 centered headings over left-aligned text.
   render.py assigns these classes by occurrence on pages in RHYTHM_PAGES only, and every rule is
   scoped under .bcs-rhythm, so no other page changes. */

/* split-photo: the photo travels with the text (sticky) and every other one flips side */
.bcs-rhythm .bcs-split{align-items:start}
.bcs-rhythm .bcs-split .bcs-photo{position:sticky;top:164px}
.bcs-rhythm .bcs-split .bcs-photo img{aspect-ratio:4/5;max-height:calc(100vh - 220px)}
.bcs-rhythm .bcs-split-flip{grid-template-columns:1.15fr 1fr}
.bcs-rhythm .bcs-split-flip .bcs-photo{order:-1}
.bcs-rhythm .bcs-split-flip .bcs-photo::before{left:auto;right:-18px}
/* the second paragraph of a long run, set as a break in the wall (same words, not new copy) */
.bcs-rhythm .bcs-split .bcs-p.bcs-callout{margin:30px 0;padding:4px 0 4px 24px;border-left:3px solid #C8102E;
  font-size:clamp(20px,1.6vw,23px);line-height:1.5;font-weight:500;color:#0B2545}
@media(max-width:1024px){
  .bcs-rhythm .bcs-split .bcs-photo{position:relative;top:auto}
  .bcs-rhythm .bcs-split .bcs-photo img{aspect-ratio:3/2;max-height:none}
  .bcs-rhythm .bcs-split-flip{grid-template-columns:1fr}
  .bcs-rhythm .bcs-split-flip .bcs-photo{order:0}
  .bcs-rhythm .bcs-split-flip .bcs-photo::before{left:-10px;right:auto}
}

/* signals: centered head (2nd use) and a dark centered band (1st use) */
.bcs-rhythm .bcs-sig-center .bcs-head,.bcs-rhythm .bcs-sig-dark .bcs-head{display:block;text-align:center;
  max-width:820px;margin-left:auto;margin-right:auto}
.bcs-rhythm .bcs-sig-center .bcs-head .bcs-h2,.bcs-rhythm .bcs-sig-dark .bcs-head .bcs-h2{margin:0 auto 18px;max-width:24ch}
.bcs-rhythm .bcs-sig-center .bcs-head p,.bcs-rhythm .bcs-sig-dark .bcs-head p{margin-left:auto;margin-right:auto}
.bcs-rhythm .bcs-sig-center .bcs-sig-k,.bcs-rhythm .bcs-sig-dark .bcs-sig-k{text-align:center;margin-top:44px}
.bcs-rhythm .bcs-sig-dark{background:
  radial-gradient(900px 420px at 50% 0%,rgba(30,84,148,.45),rgba(30,84,148,0) 70%),
  linear-gradient(rgba(159,179,204,.045) 1px,transparent 1px) 0 0/56px 56px,
  linear-gradient(90deg,rgba(159,179,204,.045) 1px,transparent 1px) 0 0/56px 56px,#071629}
.bcs-rhythm .bcs-sig-dark .bcs-sigs{grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:14px;background:none}
.bcs-rhythm .bcs-sig-dark .bcs-sig{background:rgba(255,255,255,.045);border:1px solid rgba(159,179,204,.16);
  border-top:3px solid #C8102E;padding:28px 24px 30px}
.bcs-rhythm .bcs-sig-dark .bcs-sig:hover{background:rgba(255,255,255,.08);box-shadow:none}
.bcs-rhythm .bcs-sig-dark .bcs-sig-n{font-family:'Barlow Condensed',sans-serif;font-size:44px;font-weight:700;
  line-height:1;letter-spacing:0;color:#ff5a70;margin-bottom:14px}
.bcs-rhythm .bcs-sig-dark .bcs-sig h3{color:#fff;font-size:clamp(21px,1.7vw,25px)}
.bcs-rhythm .bcs-sig-dark .bcs-sig p{color:#c3d3e6;font-size:16px}
.bcs-rhythm .bcs-sig-dark .bcs-sig-note{background:rgba(255,255,255,.05);border:1px solid rgba(159,179,204,.16)}
.bcs-rhythm .bcs-sig-dark .bcs-sig-after p{color:#c3d3e6}
.bcs-rhythm .bcs-sig-dark .bcs-sig p strong,.bcs-rhythm .bcs-sig-dark .bcs-p strong{color:#fff}

/* tiles: centered head (1st), dark band (2nd), sticky head beside a 2-column grid (3rd) */
.bcs-rhythm .bcs-tiles-center .bcs-tiles-head{text-align:center;max-width:820px;margin:0 auto 52px}
.bcs-rhythm .bcs-tiles-center .bcs-tiles-head .bcs-h2{margin:0 auto 18px;max-width:24ch}
.bcs-rhythm .bcs-tiles-center .bcs-tiles-head .bcs-p{margin-left:auto;margin-right:auto}
.bcs-rhythm .bcs-tiles-center .bcs-after{margin-left:auto;margin-right:auto;text-align:center}
.bcs-rhythm .bcs-tiles-dark{background:
  radial-gradient(900px 420px at 50% 0%,rgba(30,84,148,.45),rgba(30,84,148,0) 70%),#071629}
.bcs-rhythm .bcs-tiles-dark .bcs-tiles{border-color:rgba(159,179,204,.16);gap:0}
.bcs-rhythm .bcs-tiles-dark .bcs-tile{border-color:rgba(159,179,204,.16)}
.bcs-rhythm .bcs-tiles-dark a.bcs-tile:hover{background:rgba(255,255,255,.05)}
.bcs-rhythm .bcs-tiles-dark .bcs-tile h3{color:#fff}
.bcs-rhythm .bcs-tiles-dark .bcs-tile p{color:#c3d3e6}
.bcs-rhythm .bcs-tiles-dark .bcs-tile .bcs-ico{color:#ff8a9b;border-color:rgba(159,179,204,.22)}
.bcs-rhythm .bcs-tiles-dark .bcs-go{color:#ff8a9b}
.bcs-rhythm .bcs-tiles-dark .bcs-after{color:#c3d3e6}
.bcs-rhythm .bcs-tiles-split .bcs-tiles-wrap{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);
  gap:72px;align-items:start}
.bcs-rhythm .bcs-tiles-split .bcs-tiles-head{position:sticky;top:164px}
.bcs-rhythm .bcs-tiles-split .bcs-tiles-head .bcs-p{margin-top:18px}
.bcs-rhythm .bcs-tiles-split .bcs-tiles{grid-template-columns:repeat(2,1fr)}
@media(max-width:1024px){
  .bcs-rhythm .bcs-tiles-split .bcs-tiles-wrap{grid-template-columns:1fr;gap:36px}
  .bcs-rhythm .bcs-tiles-split .bcs-tiles-head{position:static}
}
@media(max-width:767px){ .bcs-rhythm .bcs-tiles-split .bcs-tiles{grid-template-columns:1fr} }

/* AXIS: centered headings get centered bodies (design-review measured 49 off-axis blocks) */
.bcs-rhythm .bcs-st.is-live .bcs-st-cap{text-align:center}
.bcs-rhythm .bcs-st.is-live .bcs-st-cap>*{margin-left:auto;margin-right:auto}
.bcs-rhythm .bcs-rail-bar{flex-direction:column;align-items:center;gap:14px;text-align:center}
.bcs-rhythm .bcs-valve-sec .bcs-wheel-after{text-align:center;max-width:70ch}
.bcs-rhythm .bcs-map-copy-body{text-align:center}
.bcs-rhythm .bcs-map-copy-body .bcs-p{margin-left:auto;margin-right:auto;max-width:72ch}
/* TYPE: nothing under 16px in body copy */
.bcs-rhythm .bcs-map-copy p,.bcs-rhythm .bcs-map-copy-body .bcs-p{font-size:17px}
.bcs-rhythm .bcs-chat-sec p{font-size:16px}
.bcs-rhythm .bcs-valve-sec .bcs-wheel-after .bcs-p{margin-left:auto;margin-right:auto}
.bcs-rhythm .bcs-map-fallback{font-size:16px}
/* signals, 2nd use: sticky head beside one column of numbered rows */
.bcs-rhythm .bcs-sig-split>.bcs-in{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);
  column-gap:72px;align-items:start}
.bcs-rhythm .bcs-sig-split .bcs-head{grid-column:1;grid-row:1 / span 4;display:block;position:sticky;top:164px;
  justify-content:start;text-align:left}
.bcs-rhythm .bcs-sig-split .bcs-head .bcs-h2{margin:0 0 18px}
.bcs-rhythm .bcs-sig-split>.bcs-in>:not(.bcs-head){grid-column:2}
.bcs-rhythm .bcs-sig-split .bcs-sig-k{margin-top:0}
.bcs-rhythm .bcs-sig-split .bcs-sigs{grid-template-columns:1fr}
.bcs-rhythm .bcs-sig-split .bcs-sig{display:grid;grid-template-columns:64px minmax(0,1fr);column-gap:8px;padding:28px 30px}
.bcs-rhythm .bcs-sig-split .bcs-sig-n{grid-row:1 / span 2;font-family:'Barlow Condensed',sans-serif;font-size:40px;
  font-weight:700;line-height:1;letter-spacing:0;color:#C8102E;margin:0}
.bcs-rhythm .bcs-sig-split .bcs-sig-foot{grid-template-columns:1fr}
@media(max-width:1024px){
  .bcs-rhythm .bcs-sig-split>.bcs-in{grid-template-columns:1fr}
  .bcs-rhythm .bcs-sig-split .bcs-head{grid-row:auto;position:static}
  .bcs-rhythm .bcs-sig-split>.bcs-in>:not(.bcs-head){grid-column:1}
}
/* tiles, dark band: the tiles themselves must go dark too (white tiles kept pale text at 1.00:1) */
.bcs-rhythm .bcs-tiles-dark .bcs-tile{background:rgba(255,255,255,.04)}
.bcs-rhythm .bcs-dec-empty{color:#5a6879}
.bcs-rhythm .bcs-sig-sec:not(.bcs-sig-split) .bcs-sig-k{text-align:center}
.bcs-rhythm .bcs-sig-dark .bcs-sigs{grid-template-columns:repeat(var(--cols,3),minmax(0,1fr))}
@media(max-width:1024px){ .bcs-rhythm .bcs-sig-dark .bcs-sigs{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media(max-width:600px){ .bcs-rhythm .bcs-sig-dark .bcs-sigs{grid-template-columns:1fr} }
/* sources: a numbered card grid instead of a 13px list (section-gate PLAIN, 2026-11-02) */
.bcs-rhythm .bcs-sources{background:#f4f6f8;padding:84px 0 92px}
.bcs-rhythm .bcs-sources h2.bcs-k{text-align:center;font-size:14px}
.bcs-rhythm .bcs-sources ol{list-style:none;padding:0;margin:30px 0 0;counter-reset:bcs-src;
  grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;font-size:15px;line-height:1.55;color:#46566b}
.bcs-rhythm .bcs-sources li{counter-increment:bcs-src;background:#fff;border:1px solid #e3e7ec;
  border-top:3px solid #C8102E;padding:22px 22px 20px}
.bcs-rhythm .bcs-sources li::before{content:counter(bcs-src,decimal-leading-zero);display:block;margin-bottom:8px;
  font-family:'IBM Plex Mono',ui-monospace,monospace;font-size:12px;font-weight:600;letter-spacing:.12em;color:#C8102E}
.bcs-rhythm .bcs-sources li a{display:inline-block;margin-top:10px;font-family:'IBM Plex Mono',ui-monospace,monospace;
  font-size:12.5px;letter-spacing:.04em;color:#0B2545}
@media(max-width:1024px){ .bcs-rhythm .bcs-sources ol{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media(max-width:600px){ .bcs-rhythm .bcs-sources ol{grid-template-columns:1fr} .bcs .bcs-rhythm .bcs-sources ol{font-size:15px !important} }
@media(max-width:767px){ .bcs .bcs-rhythm .bcs-sources ol{font-size:15px !important} }
/* sources: split (sticky label left, 2-column cards right) so it never echoes the centered chat above it */
@media(min-width:1025px){
  .bcs-rhythm .bcs-sources .bcs-in{display:grid;grid-template-columns:minmax(0,.55fr) minmax(0,1.45fr);column-gap:64px;align-items:start}
  .bcs-rhythm .bcs-sources h2.bcs-k{position:sticky;top:164px;text-align:left;margin:0;font-size:15px}
  .bcs-rhythm .bcs-sources ol{grid-template-columns:repeat(2,minmax(0,1fr));margin-top:0}
}
@media(min-width:1025px){
  .bcs-rhythm .bcs-sources h2.bcs-k{font-family:'Barlow Condensed','Barlow',sans-serif;font-size:clamp(34px,3.2vw,48px);
    font-weight:700;letter-spacing:.005em;text-transform:none;color:#0B2545;line-height:1.05;padding-top:22px;
    border-top:3px solid #C8102E;display:inline-block}
}
.bcs-rhythm .bcs-sources li a{display:table}