/* Styles used only by the Services / Products hubs, the service and
   product detail template, and the floating pill bar. Split out of
   style.css so the other 8 pages - which use none of it - no longer
   download and parse ~27KB of render-blocking CSS they never apply.
   Loaded via custom_css_files on the pages that need it. */
/* ================= Services / Products hub + detail pages ================
   Matches the "Services - Home", "Products & Unique Works" and
   "Services - Template" Figma frames. Everything is scoped to .hub-* and
   .svc-* so it cannot affect any existing page. Sizes are in vw like the
   rest of the site. The page container is the site's own .container
   (86.875vw from 576px up), which already equals the 1670px content group
   on the 1920px Figma artboard, so no container override is needed. */
.hub-band *,.hub-band-dark *,.svc-page *,.hub-footerbar,.hub-footerbar *{-webkit-box-sizing:border-box;box-sizing:border-box}

/* ---- bands -------------------------------------------------------------
   The gradient is a ::before layer rather than the section background so
   the Services frame can cut it off part way down the card grid (cards
   emerge onto white) while the Products frame runs it behind all of them. */
.hub-band{position:relative;background:#fff;padding:4.6vw 0 4vw}
.hub-band::before{content:"";position:absolute;left:0;right:0;top:0;bottom:0;background:linear-gradient(168deg,#1b6db6 0%,#0f5596 24%,#0d4780 46%,#4b4a3e 80%,#8d7440 100%)}

.hub-band-dark{position:relative;background:linear-gradient(172deg,#0d4a85 0%,#063764 48%,#04223f 100%);padding:4.6vw 0 4vw}
.hub-band>.container,.hub-band-dark>.container{position:relative;z-index:1}

.hub-title{font-family:"Space Grotesk",sans-serif;font-weight:700;text-transform:uppercase;color:#fff;font-size:3.5vw;line-height:4.1vw;margin:0 0 1vw}
.hub-title-yellow{color:#faaf40}
.hub-intro{font-family:"Plus Jakarta Sans",sans-serif;color:#e4edf6;font-size:1.05vw;line-height:1.8vw;margin:0}
.hub-lead{max-width:58%;margin-bottom:3.4vw}

/* ---- two column card grid ---------------------------------------------
   Column and gutter widths are the Figma proportions: each column is 43.05%
   of the content group and the gutter between them 13.9%. */
.hub-grid{display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;-webkit-column-gap:13.9%;-moz-column-gap:13.9%;column-gap:13.9%}
.hub-col{-ms-flex:0 1 43.05%;flex:0 1 43.05%;min-width:0;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;row-gap:5.5vw}
/* On the Products / Unique Works frame the heading and intro sit at the top
   of the left column, which is what staggers the two columns. */
.hub-colhead{padding-bottom:1.6vw}

.hub-card{background:#f6f7f9;border-radius:.55vw;overflow:hidden;-webkit-box-shadow:0 .5vw 1.5vw rgba(0,0,0,.2);box-shadow:0 .5vw 1.5vw rgba(0,0,0,.2);display:block;color:inherit;text-decoration:none}
/* The product and unique-works PNGs are cut-outs on a transparent
   background, so the blue/bronze backdrop behind them comes from CSS and
   the image is contained rather than cropped. */
.hub-card-media{display:block;width:100%;aspect-ratio:720/430;overflow:hidden;background:linear-gradient(135deg,#17599c 0%,#124d85 38%,#6a5c3e 78%,#a0803f 100%)}
.hub-card-media img{width:100%;height:100%;display:block;-o-object-fit:contain;object-fit:contain;padding:0}
/* Service cards use full-bleed workshop photographs instead. */
.hub-card-media--photo{background:#0d3f6d}
.hub-card-media--photo img{-o-object-fit:cover;object-fit:cover;padding:0}
.hub-card-body{display:block;padding:1.5vw 1.6vw 1.7vw}
.hub-card-head{display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;gap:.9vw;margin-bottom:1vw}
.hub-card-icon{-ms-flex:0 0 auto;flex:0 0 auto;width:3.2vw;height:3.2vw;display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center}
.hub-card-icon img{width:100%;height:100%;-o-object-fit:contain;object-fit:contain}
.hub-card-title{font-family:"Space Grotesk",sans-serif;font-weight:700;text-transform:uppercase;color:#004281;font-size:1.5vw;line-height:1.9vw;margin:0}
.hub-card-list{list-style:none;padding:0;margin:0}
.hub-card-list li{position:relative;padding-left:1.1vw;font-family:"Plus Jakarta Sans",sans-serif;font-size:.95vw;line-height:1.7vw;color:#4a5765;margin-bottom:.25vw;list-style:none}
.hub-card-list li::before{content:"";position:absolute;left:0;top:.72vw;width:.32vw;height:.32vw;border-radius:50%;background:#4a5765}
.hub-card-text{font-family:"Plus Jakarta Sans",sans-serif;font-size:.95vw;line-height:1.7vw;color:#4a5765;margin:0}
a.hub-card{-webkit-transition:.25s;transition:.25s}
a.hub-card:hover{-webkit-transform:translateY(-.3vw);transform:translateY(-.3vw);-webkit-box-shadow:0 1vw 2.4vw rgba(0,0,0,.28);box-shadow:0 1vw 2.4vw rgba(0,0,0,.28)}

/* ---- unique works tiles ---- */
.hub-tile-wrap{display:block;color:inherit;text-decoration:none}
/* Unique-works tile. In the frame the product sits ON TOP of the gradient
   panel and hangs past its lower edge - by +38px for Plastic Fusing, +85
   Agitator, +146 Coil Lifting and +281 Screw Conveyor against a 718x458
   panel - so the panel must not clip it. Each picture's box comes from
   products.php as an inline left/top/width/height in % of the panel. */
.hub-tile{position:relative;display:block;background:linear-gradient(135deg,#004281 0%,#47616e 38%,#8f805c 76%,#faaf40 100%);border-radius:1.04vw;aspect-ratio:718/458;padding:0;overflow:visible}
.hub-tile img{position:absolute;display:block;-o-object-fit:contain;object-fit:contain;-webkit-filter:drop-shadow(0 .21vw 1.67vw rgba(0,0,0,.6));filter:drop-shadow(0 .21vw 1.67vw rgba(0,0,0,.6))}
.hub-tile-caption{display:block;font-family:"Plus Jakarta Sans",sans-serif;font-weight:600;text-transform:uppercase;color:#faaf40;font-size:1vw;line-height:1.5vw;text-align:center;margin:.6vw 0 0;letter-spacing:.02vw}
a.hub-tile-wrap .hub-tile{-webkit-transition:.25s;transition:.25s}
a.hub-tile-wrap:hover .hub-tile{-webkit-transform:translateY(-.3vw);transform:translateY(-.3vw)}

/* ---- pill tabs + back to top -------------------------------------------
   The frames centre the pill group on the page and pin Back To Top to the
   right edge of the content group, so the button is taken out of flow. */
/* The bar floats above the page like the site's existing .tabs component:
   fixed to the bottom of the viewport with the page scrolling behind it,
   not sitting in the flow. Same offset, z-index and shadow as .tabs.
   pointer-events are off on the strip so it never blocks the page, and
   back on for the controls themselves. */
.hub-footerbar{position:fixed;left:0;right:0;bottom:1.8vw;z-index:104;display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;padding:0;pointer-events:none}
.hub-pills{display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;-ms-flex-align:center;align-items:center;background:#faaf40;border-radius:10vw;padding:.28vw;pointer-events:auto;-webkit-box-shadow:0 6px 16px rgba(0,0,0,.44);box-shadow:0 6px 16px rgba(0,0,0,.44)}
.hub-pills a{font-family:"Plus Jakarta Sans",sans-serif;font-weight:700;text-transform:uppercase;font-size:.8vw;line-height:1.2vw;letter-spacing:.04vw;color:#1c1c1c;text-decoration:none;padding:.6vw 1.5vw;border-radius:10vw;-webkit-transition:.2s;transition:.2s;white-space:nowrap}
.hub-pills a.is-active{background:#004281;color:#fff}
.hub-pills a:not(.is-active):hover{color:#004281}
.hub-top{position:absolute;right:6.5625vw;top:50%;-webkit-transform:translateY(-50%);transform:translateY(-50%);display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;-ms-flex-align:center;align-items:center;gap:.6vw;background:#faaf40;color:#1c1c1c;font-family:"Plus Jakarta Sans",sans-serif;font-weight:600;font-size:.85vw;line-height:1.3vw;padding:.72vw 1.5vw;border-radius:10vw;border:0;text-decoration:none;cursor:pointer;pointer-events:auto;-webkit-box-shadow:0 6px 16px rgba(0,0,0,.44);box-shadow:0 6px 16px rgba(0,0,0,.44);-webkit-transition:.2s;transition:.2s}
/* Only one back-to-top on these pages: the floating pill above stands in
   for the site's round .topToBtn, which would otherwise sit beside it. */
body:has(.hub-footerbar) .topToBtn{display:none!important}
.hub-top:hover{background:#004281;color:#fff}
.hub-top svg{width:1vw;height:1vw}

@media (max-width:767.98px){
.hub-band,.hub-band-dark{padding:10vw 0 10vw}
.hub-title{font-size:9vw;line-height:10.5vw;margin-bottom:3vw}
.hub-intro{font-size:3.6vw;line-height:6.2vw}
.hub-lead{max-width:none;margin-bottom:8vw}
.hub-grid{display:block}
.hub-col{display:block}
.hub-colhead{padding-bottom:8vw}
.hub-card{border-radius:2vw;margin-bottom:7vw;-webkit-box-shadow:0 2vw 5vw rgba(0,0,0,.22);box-shadow:0 2vw 5vw rgba(0,0,0,.22)}
.hub-card-media img{padding:0}
.hub-card-body{padding:5vw}
.hub-card-head{gap:3vw;margin-bottom:3vw}
.hub-card-icon{width:10vw;height:10vw}
.hub-card-title{font-size:5vw;line-height:6.2vw}
.hub-card-list li{font-size:3.4vw;line-height:5.8vw;padding-left:4vw;margin-bottom:1.2vw}
.hub-card-list li::before{top:2.5vw;width:1.2vw;height:1.2vw}
.hub-card-text{font-size:3.4vw;line-height:5.8vw}
.hub-tile{border-radius:2vw}
.hub-tile-wrap{margin-bottom:7vw}
.hub-tile-caption{font-size:3.4vw;line-height:5vw;margin:3vw 0 0}
.hub-footerbar{bottom:3vh;padding:0}
.hub-pills{padding:1vw;-ms-flex-wrap:wrap;flex-wrap:wrap;-ms-flex-pack:center;justify-content:center}
.hub-pills a{font-size:2.9vw;line-height:4.4vw;padding:2vw 4vw}
/* No room for the pill beside the tabs on a phone, so the site's own round
   button comes back instead, raised clear of the floating bar. */
.hub-top{display:none}
body:has(.hub-footerbar) .topToBtn.active{display:-webkit-box;display:-ms-flexbox;display:flex!important;bottom:12dvh}
}

/* ================= Service / product detail template =====================
   Matches the "Services - Template" Figma frame: blue hero with the photo
   overhanging its lower edge, a two column body (content + orange explainer
   and contact box), the "Why Choose Brightsun?" panel, the commitment block
   and the FAQ accordion. */
.svc-hero{position:relative;background:#faaf40;padding:3.4vw 0 0}
.svc-hero-inner{display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-align:start;align-items:flex-start;-webkit-column-gap:4%;-moz-column-gap:4%;column-gap:4%}
.svc-hero-copy{-ms-flex:0 1 58%;flex:0 1 58%;min-width:0;padding-bottom:3.4vw}
/* The frame lets the photo hang below the blue band onto the white body. */
.svc-hero-media{-ms-flex:0 1 38%;flex:0 1 38%;min-width:0;margin:2.4vw 0 -10vw;-ms-flex-item-align:end;align-self:flex-end}
.svc-hero-media img{width:100%;height:auto;display:block;border-radius:.5vw;aspect-ratio:4/3;-o-object-fit:cover;object-fit:cover}
.svc-eyebrow{display:block;font-family:"Plus Jakarta Sans",sans-serif;font-size:.92vw;line-height:1.4vw;color:#2b3f52;text-decoration:none;margin:0 0 .7vw}
a.svc-eyebrow:hover{color:#004281}
.svc-hero h1{font-family:"Space Grotesk",sans-serif;font-weight:700;color:#10263c;font-size:2.25vw;line-height:2.9vw;margin:0 0 1.3vw}
.svc-hero p{font-family:"Plus Jakarta Sans",sans-serif;color:#1f3247;font-size:1vw;line-height:1.75vw;margin:0 0 1vw}
.svc-hero p:last-child{margin-bottom:0}

.svc-btn{display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;-ms-flex-align:center;align-items:center;background:#004281;color:#fff;font-family:"Plus Jakarta Sans",sans-serif;font-weight:700;font-size:1vw;line-height:1.4vw;padding:.85vw 1.8vw;border-radius:.35vw;text-decoration:none;-webkit-transition:.2s;transition:.2s}
.svc-btn:hover{background:#00325f;color:#fff}

.svc-body{background:#fff;padding:2vw 0 2vw}
.svc-grid{display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-align:start;align-items:flex-start;-webkit-column-gap:4%;-moz-column-gap:4%;column-gap:4%}
.svc-main{-ms-flex:0 1 58%;flex:0 1 58%;min-width:0}
.svc-aside{-ms-flex:0 1 38%;flex:0 1 38%;min-width:0;margin-top:9.4vw}
.svc-main p{font-family:"Plus Jakarta Sans",sans-serif;font-size:.95vw;line-height:1.7vw;color:#3d4a57;margin:0 0 1vw}
.svc-h2{font-family:"Plus Jakarta Sans",sans-serif;font-weight:700;color:#10263c;font-size:1.05vw;line-height:1.6vw;margin:3.3vw 0 .9vw}
.svc-main>.svc-h2:first-child{margin-top:0}
.svc-h3{font-family:"Plus Jakarta Sans",sans-serif;font-weight:700;color:#10263c;font-size:1vw;line-height:1.5vw;margin:2.4vw 0 .6vw}
.svc-list{margin:0 0 1.1vw;padding:0;list-style:none}
.svc-list li{position:relative;padding-left:1.2vw;font-family:"Plus Jakarta Sans",sans-serif;font-size:.95vw;line-height:1.7vw;color:#3d4a57;margin-bottom:.2vw;list-style:none}
.svc-list li::before{content:"";position:absolute;left:.25vw;top:.72vw;width:.28vw;height:.28vw;border-radius:50%;background:#3d4a57}
.svc-list li b,.svc-main p b{color:#10263c;font-weight:700}

/* Specification table: light grey header row, hairline rules. */
.svc-table-wrap{overflow-x:auto;margin:0 0 1.2vw}
.svc-table{width:100%;border-collapse:collapse;font-family:"Plus Jakarta Sans",sans-serif;font-size:.85vw;line-height:1.4vw}
.svc-table th,.svc-table td{border:1px solid #dfe3e8;padding:.7vw .8vw;text-align:left;vertical-align:top;color:#3d4a57}
.svc-table thead th{background:#e9ebee;color:#10263c;font-weight:700}
.svc-table tbody th{font-weight:700;color:#10263c}

.svc-note{background:#004281;border-radius:.5vw;padding:1.5vw 1.6vw}
.svc-note-title{font-family:"Plus Jakarta Sans",sans-serif;font-weight:700;color:#fff;font-size:1.1vw;line-height:1.6vw;margin:0 0 .7vw}
.svc-note p{font-family:"Plus Jakarta Sans",sans-serif;font-size:.88vw;line-height:1.5vw;color:#fff;margin:0}
.svc-contact{border:1px solid #bcd3e8;border-radius:.4vw;padding:1.1vw 1.3vw;margin-top:1.4vw}
.svc-contact p{font-family:"Plus Jakarta Sans",sans-serif;font-size:.85vw;line-height:1.45vw;color:#10263c;margin:0 0 .7vw}
.svc-contact ul{list-style:none;padding:0;margin:0;display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;gap:.4vw 1.2vw}
.svc-contact li{display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;gap:.4vw;list-style:none}
.svc-contact li img{width:.85vw;height:.85vw;-o-object-fit:contain;object-fit:contain}
.svc-contact a{font-family:"Plus Jakarta Sans",sans-serif;font-weight:600;font-size:.85vw;line-height:1.4vw;color:#004281;text-decoration:none;word-break:break-word}
.svc-contact a:hover{color:#00325f}

.svc-why{background:#fff;padding:2vw 0 2vw}
.svc-why-panel{background:#f3f4f6;border-radius:.8vw;padding:2.4vw 2vw}
.svc-why-title{font-family:"Plus Jakarta Sans",sans-serif;font-weight:700;color:#10263c;font-size:1.25vw;line-height:1.7vw;text-align:center;margin:0 0 2vw}
.svc-why-grid{display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;gap:1vw;list-style:none;padding:0;margin:0}
.svc-why-grid li{-ms-flex:0 0 10vw;flex:0 0 10vw;text-align:center;list-style:none}
.svc-why-icon{display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;width:4.5vw;height:4.5vw;color:#f0a02c;margin-bottom:.9vw}
.svc-why-icon svg{width:100%;height:100%}
.svc-why-label{display:block;font-family:"Plus Jakarta Sans",sans-serif;font-weight:600;font-size:.82vw;line-height:1.25vw;color:#10263c}

.svc-commit{background:#fff;padding:1.6vw 0 2vw;text-align:center}
.svc-commit-title{font-family:"Plus Jakarta Sans",sans-serif;font-weight:700;color:#10263c;font-size:1.25vw;line-height:1.7vw;margin:0 0 1.2vw}
.svc-commit p{font-family:"Plus Jakarta Sans",sans-serif;font-size:.9vw;line-height:1.6vw;color:#3d4a57;margin:0 auto .9vw;max-width:62vw}

.svc-faq-section{background:#fff;padding:1.6vw 0 1vw}
.svc-faq-title{font-family:"Plus Jakarta Sans",sans-serif;font-weight:700;color:#10263c;font-size:1.25vw;line-height:1.7vw;text-align:center;margin:0 0 1.8vw}
/* Closing "Request a ... Quote" block from the SEO brief. */
.svc-cta{background:#fff;padding:1vw 0 2vw;text-align:center}
.svc-cta-title{font-family:"Plus Jakarta Sans",sans-serif;font-weight:700;color:#10263c;font-size:1.25vw;line-height:1.7vw;margin:0 0 .8vw}
.svc-cta p{font-family:"Plus Jakarta Sans",sans-serif;font-size:.9vw;line-height:1.6vw;color:#3d4a57;margin:0 auto 1.2vw;max-width:52vw}
/* The sub-line now sits inside the FAQ H2 (the brief wants one heading)
   but still reads as a second, lighter line. */
.svc-faq-sub{display:block;font-family:"Plus Jakarta Sans",sans-serif;font-weight:400;font-size:.88vw;line-height:1.4vw;color:#6b7785;text-align:center;margin:.3vw 0 0}
.svc-faq{max-width:52vw;margin:0 auto}
.svc-faq .accordion-item{border:0;border-bottom:1px solid #e6eaee;background:0 0}
.svc-faq .accordion-header button{position:relative;width:100%;padding:.9vw 1vw .9vw 2.2vw;background:0 0;border:0;-webkit-box-shadow:none;box-shadow:none;text-align:left;font-family:"Plus Jakarta Sans",sans-serif;font-weight:700;font-size:.92vw;line-height:1.5vw;color:#10263c}
.svc-faq .accordion-header button::after{content:"";display:none;background-image:none}
.svc-faq .accordion-header button::before{content:"";position:absolute;left:.4vw;top:50%;width:1vw;height:.14vw;background:#f0a02c;-webkit-transform:translateY(-50%);transform:translateY(-50%)}
.svc-faq .accordion-header button.collapsed::after{content:"";display:block;position:absolute;left:.83vw;top:50%;width:.14vw;height:1vw;background:#f0a02c;-webkit-transform:translateY(-50%);transform:translateY(-50%);background-image:none}
.svc-faq .accordion-body{padding:0 1vw 1vw 2.2vw}
.svc-faq .accordion-body span{font-family:"Plus Jakarta Sans",sans-serif;font-size:.88vw;line-height:1.6vw;color:#5a6b7d}

/* The rest of the site scales by vw with a single mobile breakpoint, so the
   two column layout is kept all the way down to 768px rather than stacking
   on tablets. */
@media (max-width:767.98px){
.svc-hero-inner,.svc-grid{display:block}
.svc-aside{margin-top:8vw}
.svc-hero{padding:8vw 0 0}
.svc-eyebrow{font-size:3.1vw;line-height:4.6vw;margin-bottom:2vw}
.svc-hero h1{font-size:6.6vw;line-height:8.2vw;margin-bottom:3.5vw}
.svc-hero p{font-size:3.6vw;line-height:6.2vw;margin-bottom:3vw}
.svc-btn{font-size:3.6vw;line-height:5vw;padding:3vw 6vw;border-radius:1.4vw}
.svc-hero-media{margin:6vw 0 -12vw}
.svc-hero-media img{border-radius:2vw}
.svc-body{padding:16vw 0 6vw}
.svc-main p,.svc-commit p{font-size:3.6vw;line-height:6.2vw;margin-bottom:4vw}
.svc-h2{font-size:4.4vw;line-height:6vw;margin:12vw 0 3.5vw}
.svc-why-title,.svc-commit-title,.svc-faq-title{font-size:5vw;line-height:6.6vw;margin:0 0 4vw}
.svc-h3{font-size:4vw;line-height:5.6vw;margin:9vw 0 2.5vw}
.svc-list li{font-size:3.6vw;line-height:6.2vw;padding-left:5.5vw;margin-bottom:2vw}
.svc-list li::before{top:2.5vw;width:1.5vw;height:1.5vw;left:1vw}
.svc-table{font-size:3.1vw;line-height:5vw}
.svc-table th,.svc-table td{padding:2.4vw 2.6vw}
.svc-note{border-radius:2vw;padding:6vw}
.svc-note-title{font-size:4.6vw;line-height:6.2vw;margin-bottom:3vw}
.svc-note p{font-size:3.5vw;line-height:6vw}
.svc-contact{border-radius:1.6vw;padding:5vw;margin-top:5vw}
.svc-contact p{font-size:3.4vw;line-height:5.6vw;margin-bottom:3.4vw}
.svc-contact ul{display:block}
.svc-contact li{gap:2.4vw;margin-bottom:2.4vw}
.svc-contact li img{width:3.6vw;height:3.6vw}
.svc-contact a{font-size:3.5vw;line-height:5.4vw}
.svc-why-panel{border-radius:3vw;padding:8vw 5vw}
.svc-why-grid{gap:6vw 3vw}
.svc-why-grid li{-ms-flex:0 0 40%;flex:0 0 40%}
.svc-why-icon{width:16.5vw;height:16.5vw;margin-bottom:2.8vw}
.svc-why-label{font-size:3.4vw;line-height:5vw}
.svc-commit p{max-width:none}
.svc-faq{max-width:none}
.svc-faq-sub{font-size:3.5vw;line-height:5.4vw;margin-top:2vw}
.svc-cta{padding:0 0 8vw}
.svc-cta-title{font-size:5vw;line-height:6.6vw;margin-bottom:3vw}
.svc-cta p{font-size:3.6vw;line-height:6.2vw;max-width:none;margin-bottom:5vw}
.svc-faq .accordion-header button{font-size:3.8vw;line-height:6vw;padding:4vw 2vw 4vw 8vw}
.svc-faq .accordion-header button::before{left:1.5vw;width:3.6vw;height:.5vw}
.svc-faq .accordion-header button.collapsed::after{left:3.05vw;width:.5vw;height:3.6vw}
.svc-faq .accordion-body{padding:0 2vw 4vw 8vw}
.svc-faq .accordion-body span{font-size:3.5vw;line-height:6vw}
}

/* Products hub drops its first pill bar onto white between the two bands. */
/* Product hero images are cut-outs on transparency, so they get the same
   blue/bronze backdrop the cards use instead of being cropped to fill. */
.svc-hero-media--contain{background:linear-gradient(135deg,#17599c 0%,#124d85 38%,#6a5c3e 78%,#a0803f 100%);border-radius:.5vw;padding:1.4vw}
.svc-hero-media--contain img{-o-object-fit:contain;object-fit:contain;border-radius:0}
@media (max-width:767.98px){

.svc-hero-media--contain{border-radius:2vw;padding:5vw}
}

/* Consult band on the new design pages. The site's base rule sizes the photo
   by height only, so its intrinsic width overhangs the column (1313px in a
   1094px box at 1920) and gets clipped. Pinning the width to the column lets
   object-fit:cover do the cropping instead. */
.h-fc-6.consult-weld .inner-wrapper .thump img{width:100%}

/* ---- drop-UPs on the floating pill bar --------------------------------
   The bar is pinned to the bottom of the viewport, so the panels open
   upwards. Each pill is wrapped in a span; the pill keeps its own styling
   and the panel is positioned against that wrapper. */
.hub-pill{position:relative;display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;-ms-flex-align:center;align-items:center}
.hub-pill.nav-drop:hover,.hub-pill.nav-drop.is-open{z-index:3}
.hub-pill-toggle{background:0 0;border:0;margin:0 .6vw 0 -1.25vw;padding:0;line-height:0;color:#1c1c1c;cursor:pointer;-webkit-transition:.25s;transition:.25s}
.hub-pill-toggle svg{width:.8vw;height:.8vw;display:block}
.hub-pill .is-active~.hub-pill-toggle{color:#fff}
.hub-pill.nav-drop:hover .hub-pill-toggle,.hub-pill.nav-drop.is-open .hub-pill-toggle{-webkit-transform:rotate(180deg);transform:rotate(180deg)}

.hub-pill-sub{position:absolute;bottom:100%;left:50%;z-index:4;min-width:17vw;margin:0 0 .7vw;padding:.6vw 0;list-style:none;background:#04203d;border:1px solid rgba(250,175,64,.35);border-radius:.45vw;-webkit-box-shadow:0 .5vw 1.6vw rgba(0,0,0,.45);box-shadow:0 .5vw 1.6vw rgba(0,0,0,.45);opacity:0;visibility:hidden;-webkit-transform:translateX(-50%) translateY(.4vw);transform:translateX(-50%) translateY(.4vw);-webkit-transition:.22s;transition:.22s}
.hub-pill.nav-drop:hover .hub-pill-sub,.hub-pill.nav-drop.is-open .hub-pill-sub{opacity:1;visibility:visible;-webkit-transform:translateX(-50%);transform:translateX(-50%)}
.hub-pill-sub li{list-style:none;margin:0;padding:0}
/* .hub-pills a is the pill itself; the panel links need their own look */
.hub-pills .hub-pill-sub a{display:block;padding:.5vw 1.1vw;border-radius:0;background:0 0;font-family:"Plus Jakarta Sans",sans-serif;font-weight:500;font-size:.85vw;line-height:1.45vw;letter-spacing:0;text-transform:none;color:#e4edf6;white-space:nowrap}
.hub-pills .hub-pill-sub a:hover{color:#faaf40;background:rgba(250,175,64,.1)}

@media (max-width:767.98px){
.hub-pill-toggle{margin:0 1.6vw 0 -3.2vw}
.hub-pill-toggle svg{width:2.6vw;height:2.6vw}
.hub-pill-sub{min-width:62vw;margin-bottom:2.4vw;padding:2vw 0;border-radius:2vw}
.hub-pills .hub-pill-sub a{padding:1.8vw 4vw;font-size:3.2vw;line-height:5vw;white-space:normal}
}

/* The inverted palette above (yellow hero, blue buttons, blue aside note,
   cream quote panel) is now the scheme for every detail page, service and
   product alike, so the .svc-page--product overrides that used to live here
   are gone. The class is still emitted on product pages as a styling hook
   in case the two ever need to diverge again.                           */

/* ---- Request a Quote panel ---------------------------------------------
   The closing call to action used to sit on bare white between the
   commitment paragraphs and the FAQ, so it read as more body copy rather
   than as the thing to act on. A tinted card with a soft border separates
   it without competing with the grey "Why Choose Brightsun?" panel above:
   that one is neutral #f3f4f6, this one picks up the brand blue.        */
.svc-cta-panel{background:#fdf6e9;border:1px solid #f2d9a6;border-radius:.8vw;padding:2.6vw 2vw}
/* Both panels share one width so the grey block and the quote block below
   it line up. 66vw leaves the five icons (54vw of content) a comfortable
   margin inside the grey panel rather than hugging them tightly.      */
.svc-why-panel,.svc-cta-panel{width:66vw;max-width:100%;margin-left:auto;margin-right:auto}
.svc-cta-panel .svc-cta-title{margin-top:0}
.svc-cta-panel > :last-child{margin-bottom:0}


@media (max-width:767.98px){
	.svc-cta-panel{border-radius:3vw;padding:7vw 5vw}
	.svc-why-panel,.svc-cta-panel{width:auto;max-width:none}
}

/* ---- Special Projects page ---------------------------------------------
   The hero, prose, quote panel and FAQ reuse the detail-page components.
   What is specific here is the unit grid: each tile now carries a heading
   and a paragraph under the picture, and one unit (Trommel) has no
   photograph yet, so its block is copy only.                           */
/* 58% matches .svc-main's column on the detail pages. It also keeps the
   copy clear of the hero photo, which is bottom-anchored and overhangs
   10vw into this section from the right at 62% of the container. */
.sp-prose{max-width:58%}
/* .svc-main supplies the body-copy sizing on the detail pages. This column
   is not .svc-main, so without these the paragraphs fell back to the global
   16px rule and ended up LARGER than the heading above them. */
.sp-prose p{font-family:"Plus Jakarta Sans",sans-serif;font-size:.95vw;line-height:1.7vw;color:#3d4a57;margin:0 0 1vw}
.sp-prose p:last-child{margin-bottom:0}
/* .svc-h2 is sized for the narrow detail-page column; these sections run
   much wider, so the section headings step up to the quote-panel size. */
.sp-prose .svc-h2{font-size:1.45vw;line-height:2vw;margin:0 0 1.1vw}
.sp-units-head{margin-bottom:2.4vw}
.sp-units-head .hub-intro{margin-bottom:0}

/* Caption was a plain span; it is an H3 now, so reset the heading defaults
   and keep the orange the design uses. */
h3.hub-tile-caption{font-family:"Plus Jakarta Sans",sans-serif;font-weight:700;font-size:1.05vw;line-height:1.6vw;margin:1vw 0 .5vw}
.hub-tile-text{font-family:"Plus Jakarta Sans",sans-serif;font-size:.9vw;line-height:1.65vw;color:#cfe0f0;margin:0 0 2.4vw}

/* A unit with no picture still needs the vertical rhythm of one, or the
   staggered columns stop lining up. */
.hub-tile-wrap:not(:has(.hub-tile)) h3.hub-tile-caption{margin-top:0}

/* Get a Quote + WhatsApp sit side by side under the closing panel. */
.sp-cta-actions{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-ms-flex-wrap:wrap;flex-wrap:wrap;gap:1vw}
.svc-btn--wa{background:#25d366;color:#0b2a16}
.svc-btn--wa:hover{background:#1da851;color:#fff}
.svc-btn--wa img{width:1.1vw;height:1.1vw;margin-right:.5vw;-o-object-fit:contain;object-fit:contain}

@media (max-width:767.98px){
	.sp-prose{max-width:none}
	.sp-prose p{font-size:3.6vw;line-height:6.2vw;margin-bottom:4vw}
	.sp-prose .svc-h2{font-size:5vw;line-height:6.6vw;margin-bottom:4vw}
	.sp-units-head{margin-bottom:8vw}
	h3.hub-tile-caption{font-size:4.2vw;line-height:5.8vw;margin:4vw 0 2vw}
	.hub-tile-text{font-size:3.6vw;line-height:6.2vw;margin-bottom:9vw}
	.sp-cta-actions{gap:3.5vw}
	.svc-btn--wa img{width:4.2vw;height:4.2vw;margin-right:2vw}
}

/* ---- Sticky aside on the detail pages -----------------------------------
   The right column (the note box and the contact card) stays put while the
   left column scrolls.

   style.css sets `body{overflow-x:hidden}`. A hidden value on one axis makes
   the browser compute the other to `auto`, which turns body into a scroll
   container - and a sticky element then resolves against THAT, not the
   viewport, so it never sticks. `clip` trims the same overflow without
   creating a scroll container. Scoped here, so only the pages that load
   pages.css are affected; a browser too old for `clip` just ignores it and
   keeps the old hidden behaviour.                                        */
body{overflow-x:clip}

.svc-aside{position:-webkit-sticky;position:sticky;top:2vw;-ms-flex-item-align:start;align-self:flex-start}

@media (max-width:767.98px){
	/* Columns stack on phones, so there is nothing to stay level with. */
	.svc-aside{position:static}
}