/* CLB Cleaning Orlando - shared stylesheet. BRAND TOKENS at top: swap to brand book values. */
/* ============================================================
BRAND TOKENS - swap these to match the CLB brand book.
============================================================ */
:root{
/* CLB Clean Life Balance - sampled from Horizontal Logo.pdf */
--brand: #2E9BB5; /* teal from "CLEAN" + broom */
--brand-dark: #1E7D95;
--brand-light: #E4F3F7;
--accent: #6BC24A; /* green from "LiFE" + house */
--accent-dark: #4A9B34;
--accent-ink: #FFFFFF;
--ink: #2A3033;
--muted: #5C6B70;
--bg: #FFFFFF;
--card: #FFFFFF;
--line: #E3EAE7;
--ok: #16a34a;
--radius: 14px;
--shadow: 0 8px 30px rgba(30,125,149,.10);
--font: "Inter", -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:var(--font);color:var(--ink);background:var(--bg);line-height:1.6;font-size:17px}
img{max-width:100%;display:block}
a{color:var(--brand)}
.wrap{max-width:1080px;margin:0 auto;padding:0 20px}
section{padding:72px 0}
h1,h2,h3{line-height:1.2;letter-spacing:-.02em}
h2{font-size:clamp(26px,4vw,36px);margin-bottom:14px}
.kicker{display:inline-block;font-size:13px;font-weight:800;text-transform:uppercase;letter-spacing:.12em;color:var(--brand);background:var(--brand-light);padding:6px 12px;border-radius:99px;margin-bottom:14px}
.sub{color:var(--muted);max-width:640px}
.center{text-align:center}
.center .sub{margin:0 auto}
.mt30{margin-top:30px}
header{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.92);backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
.nav{display:flex;align-items:center;justify-content:space-between;height:68px}
.logo{display:inline-flex;align-items:center;gap:12px;text-decoration:none;color:var(--ink)}
.logo img{height:44px;width:auto;display:block}
.logo .logo-city{font-size:11px;font-weight:700;color:var(--muted);letter-spacing:.14em;text-transform:uppercase;border-left:1px solid var(--line);padding-left:12px;line-height:1.2}
@media(max-width:520px){.logo .logo-city{display:none}}
.nav-links{display:flex;gap:24px;align-items:center}
.nav-links a{text-decoration:none;color:var(--ink);font-weight:600;font-size:15px}
.nav-links a:hover{color:var(--brand)}
@media(max-width:860px){.nav-links a:not(.btn){display:none}}
.btn{display:inline-block;padding:14px 28px;border-radius:12px;font-weight:800;font-size:16px;text-decoration:none;cursor:pointer;border:0;transition:.15s}
.btn-primary{background:var(--accent);color:var(--accent-ink);box-shadow:0 6px 18px rgba(107,194,74,.35)}
.btn-primary:hover{background:var(--accent-dark);transform:translateY(-2px)}
.btn-ghost{background:transparent;color:#fff;border:2px solid rgba(255,255,255,.6)}
.btn-ghost:hover{background:rgba(255,255,255,.12)}
.btn-brand{background:var(--brand);color:#fff}
.btn-brand:hover{background:var(--brand-dark)}
.hero{background:linear-gradient(135deg,var(--brand) 0%,var(--brand-dark) 100%);color:#fff;padding:96px 0 88px;position:relative;overflow:hidden}
.hero::after{content:"";position:absolute;right:-120px;top:-120px;width:420px;height:420px;border-radius:50%;background:rgba(255,255,255,.06)}
.hero::before{content:"";position:absolute;left:-80px;bottom:-160px;width:360px;height:360px;border-radius:50%;background:rgba(255,255,255,.05)}
.hero .wrap{position:relative;z-index:2}
/* Split hero. 11 of 15 Orlando competitors put a photograph above the fold;
a flat gradient reads as a template. */
.hero-split{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:52px;align-items:center}
.hero-copy{min-width:0}
.hero-shot{position:relative;border-radius:20px;overflow:hidden;box-shadow:0 30px 70px rgba(4,26,33,.42);
border:1px solid rgba(255,255,255,.18)}
.hero-shot img{display:block;width:100%;height:100%;object-fit:cover;aspect-ratio:4/3}
.hero-shot figcaption{position:absolute;left:14px;bottom:14px;padding:8px 14px;border-radius:99px;
background:rgba(5,20,26,.72);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
color:#fff;font-size:12.5px;font-weight:600;letter-spacing:.01em}
.hero h1{max-width:none}
.hero p{max-width:none}
@media(max-width:960px){.hero-split{grid-template-columns:1fr;gap:34px}
.hero-shot{order:-1}.hero-shot img{aspect-ratio:16/9}}
.hero h1{font-size:clamp(32px,5.5vw,52px);max-width:760px;margin-bottom:18px}
.hero p{font-size:19px;max-width:620px;color:rgba(255,255,255,.9);margin-bottom:30px}
.hero .cta-row{display:flex;gap:14px;flex-wrap:wrap}
/* --line is a light grey meant for white sections; on the teal hero it
disappeared. Give the secondary buttons a real edge and a faint fill. */
.hero .btn-ghost{border:1.5px solid rgba(255,255,255,.55);background:rgba(255,255,255,.10);
color:#fff;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.hero .btn-ghost:hover{border-color:#fff;background:rgba(255,255,255,.18)}
.hero .badges{display:flex;gap:10px;flex-wrap:wrap;margin-top:34px}
.hero .badge{background:#fff;border:1px solid rgba(255,255,255,.9);padding:9px 16px;border-radius:99px;font-size:13.5px;font-weight:700;color:var(--ink);box-shadow:0 6px 18px rgba(4,26,33,.18)}
.hero .badge svg{color:var(--accent-dark)}
.promo-pill{display:inline-flex;align-items:center;gap:8px;background:var(--accent);color:var(--accent-ink);font-weight:800;border-radius:99px;padding:8px 18px;margin-bottom:22px;font-size:14.5px}
.cities{background:var(--brand-light);padding:18px 0;border-bottom:1px solid var(--line)}
.cities .wrap{display:flex;align-items:center;justify-content:center;gap:8px 22px;flex-wrap:wrap;font-weight:700;font-size:14.5px;color:var(--brand-dark)}
.cities span.dot{opacity:.4}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:36px}
@media(max-width:820px){.grid3{grid-template-columns:1fr}}
.grid5{display:grid;grid-template-columns:repeat(5,1fr);gap:18px;margin-top:36px}
@media(max-width:1000px){.grid5{grid-template-columns:repeat(3,1fr)}}
@media(max-width:640px){.grid5{grid-template-columns:1fr 1fr}}
.grid6{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:36px}
@media(max-width:820px){.grid6{grid-template-columns:1fr 1fr}}
@media(max-width:540px){.grid6{grid-template-columns:1fr}}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:28px;box-shadow:var(--shadow);transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease}
.card:hover{transform:translateY(-3px);border-color:var(--brand);box-shadow:0 14px 40px rgba(30,125,149,.14)}
.card .ico{width:52px;height:52px;border-radius:12px;background:transparent;color:var(--brand);display:grid;place-items:center;margin-bottom:18px}
.card .ico svg{width:32px;height:32px;display:block}
.card h3{font-size:19px;margin-bottom:8px}
.card p{color:var(--muted);font-size:15.5px}
.svc .card{text-align:left;padding:26px 22px}
.svc .card .ico{margin:0 0 14px}
.svc .card h3{font-size:17px}
.svc .card p{font-size:14.5px;line-height:1.6}
/* Calculator */
.calc{background:var(--brand-light)}
.calc-card{background:#fff;border:1px solid var(--line);border-radius:18px;box-shadow:var(--shadow);padding:32px;max-width:600px;margin:36px auto 0}
.calc-card .price{font-size:46px;font-weight:800;letter-spacing:-.02em;color:var(--brand-dark);margin:6px 0 2px;text-align:center}
.calc-card .price small{font-size:15px;font-weight:600;color:var(--muted)}
.field{margin:14px 0}
.field label{display:block;font-size:13.5px;font-weight:700;margin-bottom:6px}
.field input[type=number],.field select{width:100%;padding:12px 13px;border:1px solid var(--line);border-radius:10px;background:#fff;color:var(--ink);font-size:15.5px;font-family:var(--font)}
.field input:focus,.field select:focus{outline:2px solid var(--brand);border-color:var(--brand)}
.row{display:flex;gap:12px}.row>.field{flex:1}
.stepper{display:flex;align-items:center;gap:10px}
.stepper button{width:38px;height:38px;border-radius:10px;border:1px solid var(--line);background:#fff;color:var(--ink);font-size:20px;cursor:pointer}
.stepper .val{min-width:34px;text-align:center;font-weight:700}
.breakdown{margin:18px 0 4px;border-top:1px dashed var(--line);padding-top:14px;font-size:14px;color:var(--muted)}
.breakdown div{display:flex;justify-content:space-between;margin:3px 0}
.breakdown .tot{color:var(--ink);font-weight:700;font-size:16px;border-top:1px solid var(--line);margin-top:8px;padding-top:8px}
.calc-note{font-size:12.5px;color:var(--muted);margin-top:12px;text-align:center}
/* Promo cards */
.promos .card{border-top:5px solid var(--accent);text-align:center}
.promos .big{font-size:clamp(28px,4vw,38px);font-weight:800;color:var(--brand-dark)}
/* Reviews */
.reviews{background:var(--brand);color:#fff}
.reviews .kicker{background:rgba(255,255,255,.15);color:#fff}
.reviews .card{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.18);box-shadow:none}
.reviews .card p{color:rgba(255,255,255,.9)}
.reviews .stars{color:var(--accent);font-size:18px;letter-spacing:2px;margin-bottom:10px}
.reviews .who{margin-top:14px;font-weight:700;color:#fff;font-size:14.5px}
/* Areas */
.areas .area-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:14px;margin-top:32px}
@media(max-width:900px){.areas .area-grid{grid-template-columns:1fr 1fr}}
.areas .area-grid-2{grid-template-columns:1fr 1fr;gap:20px;max-width:720px;margin-left:auto;margin-right:auto}
@media(max-width:640px){.areas .area-grid-2{grid-template-columns:1fr}}
.area{background:#fff;border:1px solid var(--line);border-radius:12px;padding:18px;text-align:center;font-weight:700}
.area-grid-2 .area{padding:26px 22px;font-size:20px;border:2px solid var(--brand);box-shadow:var(--shadow)}
.area small{display:block;font-weight:500;color:var(--muted);font-size:12.5px;margin-top:4px}
.area-grid-2 .area small{font-size:13.5px;margin-top:8px;line-height:1.55}
/* Voucher */
.voucher{background:var(--brand-dark);color:#fff}
.voucher .inner{display:grid;grid-template-columns:1.2fr 1fr;gap:40px;align-items:center}
@media(max-width:820px){.voucher .inner{grid-template-columns:1fr}}
.voucher h2{color:#fff}
.voucher p{color:rgba(255,255,255,.85)}
.voucher-form{display:flex;flex-direction:column;gap:12px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.2);padding:26px;border-radius:16px}
.voucher-form input{padding:13px 14px;border-radius:10px;border:1px solid rgba(255,255,255,.3);background:rgba(255,255,255,.95);font-size:15.5px;font-family:var(--font)}
.voucher .tag{display:inline-block;background:var(--accent);color:var(--accent-ink);font-weight:800;border-radius:99px;padding:6px 16px;margin-bottom:16px;font-size:14px}
/* Quote form */
.quote{background:linear-gradient(180deg,#fff 0%,var(--brand-light) 100%)}
.form-card{background:#fff;border:1px solid var(--line);border-radius:18px;box-shadow:var(--shadow);padding:36px;max-width:680px;margin:36px auto 0}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media(max-width:640px){.form-grid{grid-template-columns:1fr}}
.f-field{display:flex;flex-direction:column;gap:6px}
.f-field.full{grid-column:1/-1}
.f-field label{font-size:13.5px;font-weight:700}
.f-sep{grid-column:1/-1;font-size:12px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;color:var(--brand-dark);margin:14px 0 0;padding-top:14px;border-top:1px solid var(--line)}
.f-sep:first-child{margin-top:0;padding-top:0;border-top:0}
.f-help{font-size:12.5px;line-height:1.45;color:var(--muted)}
.f-field input,.f-field select,.f-field textarea{padding:12px 14px;border:1px solid var(--line);border-radius:10px;font-size:15.5px;font-family:var(--font);background:#fff;color:var(--ink)}
.f-field input:focus,.f-field select:focus,.f-field textarea:focus{outline:2px solid var(--brand);border-color:var(--brand)}
.form-msg{display:none;margin-top:16px;padding:14px;border-radius:10px;font-weight:600;text-align:center}
.form-msg.ok{display:block;background:var(--brand-light);color:var(--brand-dark)}
.form-msg.err{display:block;background:#FDECEA;color:#B3261E}
.form-note{font-size:13px;color:var(--muted);margin-top:14px;text-align:center}
details{border:1px solid var(--line);border-radius:12px;padding:18px 22px;margin-top:12px;background:#fff}
details summary{font-weight:700;cursor:pointer;font-size:16.5px}
details p{margin-top:10px;color:var(--muted);font-size:15.5px}
.global .grid3 .card{text-align:center}
/* Service cards with no matching photograph: brand gradient plus an oversized
line mark. Deliberate, and honest - better than a stock photo of the wrong trade. */
.bt-noimg{background-image:repeating-linear-gradient(135deg,rgba(255,255,255,.045) 0 2px,rgba(255,255,255,0) 2px 11px),linear-gradient(150deg,var(--brand) 0%,var(--brand-dark) 52%,#12414F 100%)}
.bt-noimg::after{background:linear-gradient(to top,rgba(6,22,28,.42) 0%,rgba(6,22,28,.12) 55%,rgba(6,22,28,0) 100%)}
.bt-mark{position:absolute;left:0;right:0;top:0;bottom:64px;z-index:0;display:grid;place-items:center;color:rgba(255,255,255,.30);pointer-events:none}
.bt-mark svg{width:78px;height:78px}
@media(max-width:540px){.bt-mark svg{width:62px;height:62px}}
/* Trust badges: inline SVG, not emoji. Emoji render differently per OS and the
flag ones degrade to bare letters on Windows. */
.hero .badge{display:inline-flex;align-items:center;gap:8px}
.hero .badge svg{width:16px;height:16px;flex:0 0 16px}
.mini-ico{width:15px;height:15px;vertical-align:-2px;opacity:.8;display:inline-block}
.promo-pill svg{width:17px;height:17px;flex:0 0 17px}
#clb-popup .clb-popup-badge{display:inline-flex;align-items:center;gap:7px}
#clb-popup .clb-popup-badge svg{width:15px;height:15px;flex:0 0 15px}
.global .flag{display:inline-flex;align-items:center;justify-content:center;width:46px;height:46px;border-radius:13px;background:var(--brand-light);color:var(--brand-dark);font-size:15px;font-weight:800;letter-spacing:.06em;margin-bottom:12px}
footer{background:var(--brand-dark);color:rgba(255,255,255,.8);padding:48px 0 32px;font-size:14.5px}
footer .cols{display:flex;justify-content:space-between;gap:30px;flex-wrap:wrap;margin-bottom:30px}
footer h4{color:#fff;font-size:15px;margin-bottom:10px}
footer a{color:rgba(255,255,255,.8);text-decoration:none}
footer a:hover{color:#fff}
footer .fine{border-top:1px solid rgba(255,255,255,.15);padding-top:20px;text-align:center;font-size:13px;color:rgba(255,255,255,.55)}
/* ---- careers page ---- */
/* Pay strip */
.pay{background:var(--brand);color:#fff}
.pay .grid3 .card{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.18);box-shadow:none}
.pay .card h3{color:#fff}
.pay .card p{color:rgba(255,255,255,.85)}
.pay .big{font-size:clamp(30px,4vw,42px);font-weight:800}
.pay .kicker{background:rgba(255,255,255,.15);color:#fff}
/* Qualifications */
.quals{background:var(--brand-light)}
.qual-list{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:32px}
.qual{display:flex;gap:14px;align-items:flex-start;background:#fff;border:1px solid var(--line);border-radius:12px;padding:16px 18px}
.qual .check{flex:0 0 26px;height:26px;border-radius:50%;background:var(--brand);color:#fff;display:grid;place-items:center;font-size:14px;font-weight:800;margin-top:2px}
.qual p{font-size:15.5px}
/* Steps */
.steps{counter-reset:step}
.step-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-top:36px}
.step{position:relative;background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:26px 22px 22px}
.step::before{counter-increment:step;content:counter(step);position:absolute;top:-16px;left:20px;width:34px;height:34px;border-radius:50%;background:var(--accent);color:var(--accent-ink);font-weight:800;display:grid;place-items:center;font-size:15px}
.step h3{font-size:17px;margin:6px 0 6px}
.step p{font-size:14.5px;color:var(--muted)}
/* Form */
.apply{background:linear-gradient(180deg,#fff 0%,var(--brand-light) 100%)}
/* ---- inner-page hero (service & area pages) ---- */
.page-hero{background:linear-gradient(135deg,var(--brand) 0%,var(--brand-dark) 100%);color:#fff;padding:80px 0 64px;position:relative;overflow:hidden}
.page-hero::after{content:"";position:absolute;right:-120px;top:-120px;width:380px;height:380px;border-radius:50%;background:rgba(255,255,255,.06)}
.page-hero .wrap{position:relative;z-index:1}
.page-hero h1{font-size:clamp(30px,4.6vw,46px);max-width:760px;margin-bottom:16px}
.page-hero p{font-size:18px;max-width:640px;color:rgba(255,255,255,.9);margin-bottom:26px}
.page-hero .cta-row{display:flex;gap:14px;flex-wrap:wrap}
/* Photo-backed page hero, same scrim as the home hero: heavy on the left where
the type sits, opening up on the right so the photograph is actually visible.
The old version held .84-.90 alpha edge to edge, which was safe but muddy.
Contrast still measures well past AA - the text never leaves the dark end. */
.page-hero.has-photo{
background-image:
linear-gradient(100deg,rgba(23,105,128,.94) 0%,rgba(12,60,76,.80) 50%,rgba(4,26,33,.46) 100%),
var(--img);
background-size:cover,cover;background-position:center,center;background-repeat:no-repeat,no-repeat}
.page-hero.has-photo::after{display:none}
.crumbs{font-size:13.5px;margin-bottom:18px;color:rgba(255,255,255,.75)}
.crumbs a{color:rgba(255,255,255,.9);text-decoration:none}
.checklist{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:26px}
@media(max-width:720px){.checklist{grid-template-columns:1fr}}
.check-item{display:flex;gap:12px;align-items:flex-start;background:#fff;border:1px solid var(--line);border-radius:12px;padding:14px 16px;font-size:15.5px}
.check-item .check{flex:0 0 24px;height:24px;border-radius:50%;background:var(--brand);color:#fff;display:grid;place-items:center;font-size:13px;font-weight:800;margin-top:2px}
.prose{max-width:760px}
.prose h2{margin-top:38px}
.prose p{margin:12px 0;color:var(--muted)}
.prose ul{margin:12px 0 12px 22px;color:var(--muted)}
.cta-band{background:var(--brand);color:#fff;text-align:center;border-radius:18px;padding:44px 28px;margin-top:56px}
.cta-band h2{color:#fff}
.cta-band p{color:rgba(255,255,255,.85);max-width:560px;margin:8px auto 22px}
.legal h1{font-size:clamp(26px,4vw,38px);margin-bottom:8px}
.legal h2{font-size:20px;margin-top:30px}
.legal p,.legal li{color:var(--muted);font-size:15.5px}
.legal ul{margin:10px 0 10px 22px}
/* 4-up feature grid on service pages */
.grid4{grid-template-columns:repeat(4,1fr)}
@media(max-width:900px){.grid4{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.grid4{grid-template-columns:1fr}}
/* ---- Idle discount popup ---- */
#clb-popup{position:fixed;inset:0;background:rgba(15,30,35,.55);backdrop-filter:blur(4px);display:flex;align-items:center;justify-content:center;padding:20px;z-index:1000;opacity:0;transition:opacity .22s ease}
#clb-popup.show{opacity:1}
#clb-popup .clb-popup-box{background:#fff;border-radius:18px;max-width:440px;width:100%;padding:34px 30px 26px;position:relative;box-shadow:0 30px 80px rgba(0,0,0,.35);transform:scale(.96);transition:transform .22s ease}
#clb-popup.show .clb-popup-box{transform:scale(1)}
#clb-popup .clb-popup-x{position:absolute;top:12px;right:14px;background:none;border:0;font-size:26px;line-height:1;color:var(--muted);cursor:pointer;padding:4px 10px;border-radius:8px}
#clb-popup .clb-popup-x:hover{background:var(--brand-light);color:var(--brand-dark)}
#clb-popup .clb-popup-badge{display:inline-block;background:var(--accent);color:#fff;font-weight:800;font-size:13px;letter-spacing:.04em;padding:6px 14px;border-radius:99px;margin-bottom:12px}
#clb-popup h3{font-size:22px;line-height:1.25;margin-bottom:10px;color:var(--ink)}
#clb-popup p{color:var(--muted);font-size:14.5px;margin-bottom:16px}
#clb-popup .clb-popup-form{display:flex;flex-direction:column;gap:10px}
#clb-popup .clb-popup-form input{padding:12px 14px;border:1px solid var(--line);border-radius:10px;font-size:15px;font-family:var(--font)}
#clb-popup .clb-popup-form input:focus{outline:2px solid var(--brand);border-color:var(--brand)}
#clb-popup .clb-popup-fine{font-size:11.5px;color:var(--muted);margin-top:12px;text-align:center}
/* ---- Pet-friendly photo grid ---- */
.photos{background:var(--brand-light)}
.photo-grid{display:grid;grid-template-columns:2fr 1fr;grid-template-rows:auto auto;gap:16px;margin-top:36px}
.photo-grid .photo-lg{grid-row:1 / span 2}
@media(max-width:760px){.photo-grid{grid-template-columns:1fr}.photo-grid .photo-lg{grid-row:auto}}
.photo{margin:0;border-radius:var(--radius);overflow:hidden;background:#fff;border:1px solid var(--line);box-shadow:var(--shadow);position:relative}
.photo img{width:100%;height:100%;object-fit:cover;display:block;aspect-ratio:3/2;background:linear-gradient(135deg,var(--brand-light),#dbeef3)}
.photo figcaption{position:absolute;left:0;right:0;bottom:0;padding:26px 18px 14px;font-size:13.5px;font-weight:600;color:#fff;background:linear-gradient(to top,rgba(15,40,48,.82),transparent)}
/* ---- Bento service mosaic (photo-ready) ---- */
.svc{background:#0F2830}
.svc .kicker{background:rgba(255,255,255,.12);color:#7FD4E8}
.svc h2{color:#fff}
.svc .sub{color:rgba(255,255,255,.62)}
.bento{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:210px;gap:14px;margin-top:40px}
.bt-a{grid-column:span 2;grid-row:span 2}
.bt-b{grid-column:span 2}
.bt-c,.bt-d{grid-column:span 1}
.bt-e{grid-column:span 1}
.bt-f{grid-column:span 2}
@media(max-width:900px){.bento{grid-template-columns:repeat(2,1fr);grid-auto-rows:225px}
.bt-a{grid-column:span 2;grid-row:span 1}.bt-b,.bt-f{grid-column:span 2}
.bt-c,.bt-d,.bt-e{grid-column:span 1}}
@media(max-width:540px){.bento{grid-template-columns:1fr}.bt{grid-column:span 1 !important}}
.bt{position:relative;overflow:hidden;border-radius:16px;text-decoration:none;display:flex;align-items:flex-end;background-image:var(--img),linear-gradient(150deg,var(--brand) 0%,var(--brand-dark) 55%,#12414F 100%);background-size:cover;background-position:center;isolation:isolate;transition:transform .3s cubic-bezier(.2,.8,.2,1), box-shadow .3s}
.bt::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(to top,rgba(6,22,28,.55) 0%,rgba(6,22,28,.18) 42%,rgba(6,22,28,0) 70%);transition:background .3s}
.bt:hover{transform:translateY(-4px);box-shadow:0 22px 50px rgba(0,0,0,.35)}
.bt:hover::after{background:linear-gradient(to top,rgba(6,22,28,.62) 0%,rgba(30,125,149,.30) 45%,rgba(30,125,149,0) 72%)}
.bt-body{position:relative;z-index:1;width:100%;padding:16px 18px 15px;background:linear-gradient(to top,rgba(5,20,26,.94),rgba(5,20,26,.86));-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-top:1px solid rgba(255,255,255,.10)}
.bt-kick{display:inline-block;background:var(--accent);color:#fff;font-size:11px;font-weight:800;letter-spacing:.1em;
text-transform:uppercase;padding:5px 11px;border-radius:99px;margin-bottom:10px}
.bt h3{color:#fff;font-size:19.5px;margin-bottom:6px;letter-spacing:-.01em}
.bt-a h3{font-size:25px}
.bt p{color:rgba(255,255,255,.86);font-size:14px;line-height:1.55;max-width:36ch}
.bt::before{content:"→";position:absolute;top:18px;right:20px;z-index:1;width:34px;height:34px;border-radius:50%;
background:rgba(255,255,255,.16);backdrop-filter:blur(6px);color:#fff;display:grid;place-items:center;
font-size:15px;opacity:0;transform:translateY(-4px);transition:opacity .25s,transform .25s}
.bt:hover::before{opacity:1;transform:translateY(0)}
@media(prefers-reduced-motion:reduce){.bt,.bt::before{transition:none}.bt:hover{transform:none}}
/* ---- Value pillars with proof quotes ---- */
.pillars{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:40px;align-items:start}
@media(max-width:900px){.pillars{grid-template-columns:1fr;gap:16px}}
.pil{background:#fff;border:1px solid var(--line);border-radius:18px;padding:32px 28px;box-shadow:var(--shadow)}
.pil-ico{width:60px;height:60px;border-radius:14px;background:var(--brand-light);color:var(--brand-dark);
display:grid;place-items:center;margin-bottom:20px}
.pil-ico svg{width:30px;height:30px}
.pil h3{font-size:22px;margin-bottom:12px;color:var(--ink)}
.pil p{color:var(--muted);font-size:15px;line-height:1.7}
.pil-q{margin:20px 0 0;padding:18px 0 0;border-top:1px solid var(--line);
font-style:italic;font-size:14.5px;line-height:1.65;color:var(--ink)}
.pil-q cite{display:block;margin-top:10px;font-style:normal;font-weight:700;font-size:13px;color:var(--brand-dark)}
/* highlighted middle card */
.pil-hero{background:linear-gradient(160deg,var(--brand) 0%,var(--brand-dark) 100%);border-color:transparent;
box-shadow:0 20px 50px rgba(30,125,149,.28);transform:translateY(-10px)}
@media(max-width:900px){.pil-hero{transform:none}}
.pil-hero .pil-ico{background:#fff;color:var(--brand-dark)}
.pil-hero h3{color:#fff}
.pil-hero p{color:rgba(255,255,255,.9)}
.pil-hero .pil-q{border-top-color:rgba(255,255,255,.25);color:#fff}
.pil-hero .pil-q cite{color:var(--accent)}
/* Hero variant B: the photograph as a full-bleed background instead of a side
panel. Text stays white on a dark scrim so contrast holds on any photo -
the failure mode of this layout is dark type over a busy image. */
/* The hero photograph is an ![]()
, not a CSS background. As a background the
browser could not discover it until the stylesheet had downloaded and parsed,
which is what held LCP at 4.1s. It is absolutely positioned, so it is out of
the layout flow and cannot shift anything - CLS stays at zero. */
.hero.bg-photo{background:none}
.hero-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;z-index:0}
.hero.bg-photo::before{display:block;content:"";position:absolute;inset:0;z-index:1;
/* the base .hero::before is a decorative circle - its width, height and radius
have to be reset or the scrim inherits them and renders as a teal disc */
width:auto;height:auto;border-radius:0;
background:linear-gradient(100deg,rgba(23,105,128,.94) 0%,rgba(12,60,76,.78) 48%,rgba(4,26,33,.42) 100%)}
.hero.bg-photo::after{display:none}
.hero.bg-photo .hero-split{grid-template-columns:minmax(0,720px)}
.hero.bg-photo .hero-shot{display:none}
/* Quote modal. The form is NOT duplicated - the one node in the page moves into
the dialog and back out on close, so there is still exactly one #quoteForm,
one submit handler and one path into the CRM.