/* Elite Electrical — shared site stylesheet.
   Colours, type, spacing, buttons, forms, header/nav and footer live here,
   so a global change is a one-file change. Page-specific rules are in
   css/<page>.css. Design tokens are the CSS variables in :root below. */
:root{
  --blue:#2558AA;--blue-bright:#0B63E0;
  --blue-deep:#16325E;
  --ink-blue:#0A1835;      /* cinematic deep */
  --blue-grad:#1E4480;
  --orange:#0B63E0;--chrome:#C8D2E4;
  --orange-bright:#3C86F2;
  --orange-deep:#0A4BAE;
  --yellow:#0B63E0;
  --yellow-deep:#0A4BAE;
  --gold:#EFA80B;--gold-bright:#FFC24A;
  --red:#C42A2A;
  --red-deep:#9E1F1F;
  --gray:#C2C7D3;
  --soft:#F0F4FA;
  --soft-2:#F8F9FC;
  --hair:#E4E9F2;
  --ink:#15213A;
  --muted:#566080;
  --white:#FFFFFF;
  --maxw:1200px;
  --pad:clamp(22px,5vw,92px);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--white);color:var(--ink);font-family:"Inter",system-ui,-apple-system,"Segoe UI",Arial,sans-serif;font-size:17px;line-height:1.62;-webkit-font-smoothing:antialiased;overflow-x:hidden}
h1,h2,h3,h4{font-family:"Archivo",system-ui,-apple-system,"Segoe UI",Arial,sans-serif;margin:0;line-height:1;letter-spacing:-.02em;color:var(--blue-deep)}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
.mono{font-family:"Space Mono",ui-monospace,"Cascadia Mono",Consolas,monospace;letter-spacing:.14em;text-transform:uppercase}
.tag-serif{font-family:"Fraunces",Georgia,"Times New Roman",serif;font-style:italic;font-weight:500}
.wrap{max-width:var(--maxw);margin:0 auto;padding-left:var(--pad);padding-right:var(--pad)}
.eyebrow{font-family:"Space Mono",ui-monospace,"Cascadia Mono",Consolas,monospace;font-size:12px;letter-spacing:.24em;text-transform:uppercase;color:var(--orange-deep);display:inline-flex;align-items:center;gap:11px;margin-bottom:22px}
.eyebrow .ln{width:44px;height:2px;background:var(--orange);border-radius:2px}
.sec-title{font-weight:800;font-size:clamp(32px,5.2vw,58px);letter-spacing:-.03em}
/* NAV (transparent over hero -> solid on scroll) */
header{position:fixed;top:0;left:0;width:100%;z-index:50;transition:background .3s,box-shadow .3s,border-color .3s;border-bottom:1px solid transparent}
header::before{content:"";position:absolute;left:0;right:0;top:0;height:200px;background:linear-gradient(180deg,rgba(13,24,48,.72) 0%,rgba(13,24,48,.34) 48%,rgba(13,24,48,0) 100%);z-index:0;pointer-events:none;transition:opacity .3s}
header.scrolled::before{opacity:0}
.nav{position:relative;z-index:1;display:flex;align-items:center;justify-content:space-between;height:84px;gap:clamp(14px,1.6vw,20px);max-width:none;margin:0;padding:0 var(--pad) 0 clamp(20px,2.4vw,44px)}
.brand{display:block;position:relative;height:52px;flex:0 0 auto}
.brand img{height:52px;width:auto;max-width:none;object-fit:contain;transition:opacity .3s}
.menu{display:flex;align-items:center;gap:clamp(15px,1.9vw,26px);white-space:nowrap;flex:0 0 auto}
.menu a{font-size:13px;font-weight:600;color:rgba(255,255,255,.9);position:relative;white-space:nowrap;transition:color .2s}
.nav-dd{position:relative;display:inline-flex;align-items:center}
.nav-dd>a{display:inline-flex;align-items:center;gap:5px}
.nav-dd .caret{transition:transform .2s;flex:0 0 auto}
.nav-dd:hover .caret{transform:rotate(180deg)}
.nav-dd .dd{position:absolute;top:100%;left:-10px;margin-top:12px;min-width:224px;background:#fff;border:1px solid var(--hair);border-radius:14px;box-shadow:0 26px 54px rgba(13,24,48,.18);padding:8px;display:flex;flex-direction:column;gap:2px;opacity:0;visibility:hidden;transform:translateY(8px);transition:opacity .18s,transform .18s,visibility .18s;z-index:60}
.nav-dd:hover .dd,.nav-dd:focus-within .dd{opacity:1;visibility:visible;transform:translateY(0)}
.nav-dd::after{content:"";position:absolute;top:100%;left:0;right:0;height:16px}
.menu .nav-dd .dd a{display:block;padding:10px 14px;border-radius:9px;font-size:13.5px;font-weight:600;color:var(--ink);white-space:nowrap}
.menu .nav-dd .dd a:hover{background:var(--soft);color:var(--red)}
.menu a:hover{color:#fff}
.menu a::after{content:"";position:absolute;left:0;bottom:-7px;height:2.5px;width:0;background:var(--orange);transition:width .28s}
.menu a:hover::after{width:100%}
.nav-cta{display:inline-flex;align-items:center;gap:7px;background:var(--red);color:#fff;font-weight:700;font-size:13px;padding:11px 17px;border-radius:100px;white-space:nowrap;transition:transform .15s,box-shadow .2s,background .2s}
.nav-cta:hover{background:var(--orange-bright);transform:translateY(-1px);box-shadow:0 10px 24px rgba(11,99,224,.4)}
.burger{display:none;background:none;border:1px solid rgba(255,255,255,.4);border-radius:8px;width:46px;height:42px;color:#fff;cursor:pointer;flex-direction:column;gap:4px;align-items:center;justify-content:center}
.burger span{width:20px;height:2px;background:currentColor;display:block}
html{overflow-x:clip}
/* scrolled state */
header.scrolled{background:rgba(255,255,255,.94);backdrop-filter:blur(12px);border-color:var(--hair);box-shadow:0 6px 24px rgba(16,28,58,.06)}
header.scrolled .menu a{color:var(--muted)}
header.scrolled .menu a:hover{color:var(--blue)}
header.scrolled .nav-cta{background:var(--red);color:#fff}
.menu a.nav-cta,.menu a.nav-cta:hover,header.scrolled .menu a.nav-cta,header.scrolled .menu a.nav-cta:hover{color:#fff}
.nav-phone{display:inline-flex;align-items:center;gap:6px;font-weight:700;font-size:13px;white-space:nowrap}
header.scrolled .nav-cta:hover{background:var(--red-deep)}
header.scrolled .burger{color:var(--blue);border-color:var(--hair)}
section{position:relative;padding-top:clamp(52px,6vw,90px);padding-bottom:clamp(52px,6vw,90px)}
/* ===== HERO ===== */
.hero .bg::after{content:"";position:absolute;inset:0;
  background:
   linear-gradient(100deg, rgba(16,28,58,.94) 0%, rgba(16,28,58,.7) 38%, rgba(16,28,58,.32) 72%, rgba(16,28,58,.15) 100%),
   linear-gradient(0deg, rgba(16,28,58,.9) 0%, rgba(16,28,58,.2) 40%, transparent 70%)}
.hero .wrap{position:relative;z-index:2;width:100%}
.hero .eyebrow{color:#fff;margin-bottom:26px}
.hero .eyebrow .ln{background:var(--yellow)}
.h-title .o{color:var(--orange)}
.h-title .pu{position:relative;display:inline-block}
.h-title .pu::after{content:"";position:absolute;left:.02em;right:.08em;bottom:.04em;height:.085em;background:var(--yellow);border-radius:4px}
.h-sub{max-width:50ch;color:rgba(255,255,255,.82);font-size:clamp(16px,1.9vw,20px);margin:26px 0 34px;line-height:1.55}
.h-sub em{color:#fff;font-style:normal;font-weight:600}
.cta-row{display:flex;flex-wrap:wrap;gap:14px;align-items:center}
.btn{display:inline-flex;align-items:center;gap:10px;font-weight:700;font-size:15px;padding:17px 30px;border-radius:100px;cursor:pointer;border:1.5px solid transparent;transition:transform .15s,box-shadow .2s,background .2s,border-color .2s,color .2s}
.btn-orange{background:var(--red);color:#fff}
.btn-orange:hover{background:var(--orange-bright);transform:translateY(-2px);box-shadow:0 14px 34px rgba(11,99,224,.45)}
.btn-outline{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.5);color:#fff;backdrop-filter:blur(4px)}
.btn-outline:hover{border-color:#fff;background:rgba(255,255,255,.14);transform:translateY(-2px)}
.btn-primary{background:var(--blue);color:#fff}
.btn-primary:hover{background:var(--blue-deep);transform:translateY(-2px);box-shadow:0 14px 30px rgba(47,85,162,.3)}
.btn-primary svg,.btn-orange svg{color:currentColor}
.btn-ghost{background:transparent;border-color:var(--gray);color:var(--blue)}
.btn-ghost:hover{border-color:var(--blue);transform:translateY(-2px)}
.h-vlabel{position:absolute;right:34px;top:50%;transform:rotate(90deg);transform-origin:right center;
  font-family:"Space Mono",ui-monospace,"Cascadia Mono",Consolas,monospace;font-size:11px;letter-spacing:.34em;text-transform:uppercase;color:rgba(255,255,255,.5);z-index:2}
.scrollcue{position:absolute;left:50%;bottom:34px;transform:translateX(-50%);z-index:2;font-family:"Space Mono",ui-monospace,"Cascadia Mono",Consolas,monospace;font-size:10px;letter-spacing:.24em;color:rgba(255,255,255,.6);text-transform:uppercase;display:flex;flex-direction:column;align-items:center;gap:8px}
.scrollcue .bar{width:1px;height:34px;background:linear-gradient(180deg,var(--yellow),transparent);animation:cue 2s ease-in-out infinite}
/* ===== FLOATING STATS ===== */
.stats-float{position:relative;background:#fff;border-radius:22px;box-shadow:0 40px 90px rgba(16,28,58,.18);border:1px solid var(--hair);
  display:grid;grid-template-columns:repeat(4,1fr);overflow:hidden}
.sf{padding:36px 34px;border-left:1px solid var(--hair);position:relative}
.sf:first-child{border-left:none}
.stats-float::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,var(--orange),var(--red));z-index:3}
.sf .k{font-family:"Archivo",system-ui,-apple-system,"Segoe UI",Arial,sans-serif;font-weight:900;font-size:clamp(40px,4.4vw,58px);line-height:1;letter-spacing:-.03em;
  background:linear-gradient(180deg,var(--blue),var(--blue-deep));-webkit-background-clip:text;background-clip:text;color:transparent}
.sf:nth-child(2) .k,.sf:nth-child(4) .k{background:linear-gradient(180deg,var(--orange),var(--orange-deep));-webkit-background-clip:text;background-clip:text;color:transparent}
.sf .l{margin-top:12px;font-family:"Space Mono",ui-monospace,"Cascadia Mono",Consolas,monospace;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);line-height:1.5}
/* ===== SERVICES ===== */
.svc-head{display:grid;grid-template-columns:1fr 1fr;gap:30px;align-items:end;margin-bottom:48px}
.svc-head p{color:var(--muted);margin:0;font-size:16.5px}
.trade{border-radius:24px;padding:40px;position:relative;overflow:hidden;transition:transform .3s,box-shadow .3s}
.trade:hover{transform:translateY(-6px)}
.trade.elec{background:linear-gradient(160deg,var(--blue) 0%,var(--ink-blue) 130%);color:#fff;box-shadow:0 30px 70px rgba(33,63,120,.28)}
.trade.clim{background:#fff;border:1px solid var(--hair);color:var(--ink);box-shadow:0 20px 50px rgba(16,28,58,.07)}
.trade.clim:hover{box-shadow:0 32px 66px rgba(16,28,58,.12)}
.trade .idx{position:absolute;top:22px;right:30px;font-family:"Archivo",system-ui,-apple-system,"Segoe UI",Arial,sans-serif;font-weight:900;font-size:76px;letter-spacing:-.04em;line-height:1}
.trade.elec .idx{color:rgba(255,255,255,.12)}
.trade.clim .idx{color:var(--soft)}
.trade .ico{width:56px;height:56px;border-radius:15px;display:grid;place-items:center;margin-bottom:22px}
.trade.elec .ico{background:var(--yellow);color:var(--ink-blue)}
.trade.clim .ico{background:var(--blue);color:#fff}
.trade h3{font-size:26px;font-weight:800;letter-spacing:-.02em}
.trade.elec h3{color:#fff}
.trade .kick{font-family:"Space Mono",ui-monospace,"Cascadia Mono",Consolas,monospace;font-size:10px;letter-spacing:.18em;text-transform:uppercase;margin-top:6px}
.trade.elec .kick{color:var(--chrome)}
.trade.clim .kick{color:var(--orange-deep)}
.trade .desc{font-size:14.5px;line-height:1.6;margin:18px 0 24px;max-width:44ch}
.trade.elec .desc{color:rgba(255,255,255,.8)}
.trade.clim .desc{color:var(--muted)}
.svc-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px 22px}
.svc-item{display:flex;align-items:center;gap:11px;padding:11px 0;font-weight:600;font-size:14.5px;border-top:1px solid;transition:transform .2s}
.trade.elec .svc-item{border-color:rgba(255,255,255,.12);color:#fff}
.trade.clim .svc-item{border-color:var(--hair);color:var(--ink)}
.svc-item:hover{transform:translateX(4px)}
.svc-item .tick{width:20px;height:20px;border-radius:6px;flex:0 0 auto;display:grid;place-items:center}
.trade.elec .svc-item .tick{background:rgba(255,255,255,.14);color:#fff}
.trade.clim .svc-item .tick{background:var(--soft);color:var(--blue)}
.svc-item .tick svg{width:12px;height:12px}
/* ===== OUR STORY / VIDEO ===== */
.story{background:linear-gradient(155deg,var(--blue) 0%,var(--ink-blue) 120%);color:#fff;overflow:hidden;position:relative}
.story::before{content:"";position:absolute;right:-120px;top:-120px;width:420px;height:420px;border-radius:50%;border:1px solid rgba(11,99,224,.2)}
.story-in{position:relative;z-index:1;display:grid;grid-template-columns:.82fr 1.18fr;gap:52px;align-items:center}
.story .eyebrow{color:var(--chrome)}
.story .eyebrow .ln{background:var(--orange)}
.story h2{color:#fff;font-weight:800;font-size:clamp(32px,4.4vw,48px);letter-spacing:-.03em}
.story p{color:rgba(255,255,255,.82);margin:20px 0 26px;max-width:42ch}
.story .mini{display:flex;gap:30px;flex-wrap:wrap}
.story .mini .m b{font-family:"Archivo",system-ui,-apple-system,"Segoe UI",Arial,sans-serif;font-weight:900;font-size:30px;color:#fff;display:block;line-height:1}
.story .mini .m span{font-family:"Space Mono",ui-monospace,"Cascadia Mono",Consolas,monospace;font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.68);margin-top:6px;display:block}
.video-card{position:relative;border-radius:20px;overflow:hidden;box-shadow:0 40px 90px rgba(0,0,0,.4);border:1px solid rgba(255,255,255,.14);background:#000;aspect-ratio:16/9}
.video-card video{width:100%;height:100%;display:block;object-fit:cover}
.video-card .veil{position:absolute;inset:0;background:linear-gradient(180deg,rgba(16,28,58,.15),rgba(16,28,58,.55));transition:opacity .4s}
.play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:84px;height:84px;border-radius:50%;border:none;cursor:pointer;background:var(--orange);display:grid;place-items:center;transition:transform .2s,background .2s;box-shadow:0 10px 34px rgba(11,99,224,.5)}
.play::before{content:"";position:absolute;inset:-10px;border-radius:50%;border:2px solid var(--orange);opacity:.6;animation:pulse 2.4s ease-out infinite}
.play:hover{transform:translate(-50%,-50%) scale(1.06);background:var(--orange-bright)}
.play svg{margin-left:5px}
.vmeta{position:absolute;left:18px;bottom:16px;font-family:"Space Mono",ui-monospace,"Cascadia Mono",Consolas,monospace;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:#fff;background:rgba(16,28,58,.6);padding:7px 12px;border-radius:8px;backdrop-filter:blur(4px)}
.video-card.playing .veil,.video-card.playing .play,.video-card.playing .vmeta{opacity:0;pointer-events:none}
/* ===== HISTORY — horizontal ===== */
.history{background:var(--soft);border-top:1px solid var(--hair);border-bottom:1px solid var(--hair)}
/* ===== TESTIMONIALS ===== */
.tgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.tc{background:#fff;border:1px solid var(--hair);border-radius:22px;padding:32px 28px;display:flex;flex-direction:column;transition:transform .25s,box-shadow .25s;position:relative;overflow:hidden}
.tc:hover{transform:translateY(-5px);box-shadow:0 26px 52px rgba(16,28,58,.1)}
.tc .qmark{position:absolute;top:8px;right:20px;font-family:"Fraunces",Georgia,"Times New Roman",serif;font-size:110px;line-height:1;color:var(--soft)}
.stars{display:flex;gap:3px;margin-bottom:14px;position:relative}
.stars svg{width:17px;height:17px;color:var(--gold)}
.tc .q{font-family:"Archivo",system-ui,-apple-system,"Segoe UI",Arial,sans-serif;font-weight:700;font-size:19px;line-height:1.28;color:var(--blue-deep);margin:0 0 14px;position:relative}
.tc p{color:var(--muted);font-size:15px;line-height:1.6;margin:0 0 22px;flex:1;position:relative}
.tc .who{display:flex;align-items:center;gap:12px;border-top:1px solid var(--hair);padding-top:18px}
.tc .av{width:42px;height:42px;border-radius:50%;display:grid;place-items:center;font-family:"Archivo",system-ui,-apple-system,"Segoe UI",Arial,sans-serif;font-weight:800;color:#fff;background:var(--blue);font-size:15px;border:2px solid var(--orange)}
.tc .who b{font-size:15px;color:var(--ink)}
.tc .who span{display:block;font-family:"Space Mono",ui-monospace,"Cascadia Mono",Consolas,monospace;font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-top:2px}
/* ===== CAREERS ===== */
.careers-sec{padding-top:0;padding-bottom:0}
.careers{background:linear-gradient(120deg,var(--blue),var(--ink-blue));color:#fff;border-radius:24px;margin:clamp(80px,10vw,140px) 0;padding:56px clamp(28px,5vw,64px);display:flex;align-items:center;justify-content:space-between;gap:32px;flex-wrap:wrap;position:relative;overflow:hidden}
.careers::before{content:"";position:absolute;right:-50px;top:-50px;width:280px;height:280px;border-radius:50%;border:1px solid rgba(11,99,224,.28)}
.careers::after{content:"";position:absolute;right:30px;top:30px;width:190px;height:190px;border-radius:50%;border:1px solid rgba(255,255,255,.1)}
.careers .cl{position:relative;z-index:1;max-width:52ch}
.careers .eyebrow{color:var(--orange)}
.careers .eyebrow .ln{background:var(--orange)}
.careers h3{color:#fff;font-weight:800;font-size:clamp(24px,3.4vw,36px);letter-spacing:-.02em}
.careers p{color:rgba(255,255,255,.82);margin:12px 0 0}
.careers .cbtns{position:relative;z-index:1;display:flex;gap:12px;flex-wrap:wrap}
.careers .btn-ghost{border-color:rgba(255,255,255,.45);color:#fff}
.careers .btn-ghost:hover{border-color:#fff;background:rgba(255,255,255,.08)}
/* ===== CONTACT ===== */
.contact{background:var(--soft-2);border-top:1px solid var(--hair)}
.cgrid{display:grid;grid-template-columns:.9fr 1.1fr;gap:52px;align-items:start}
.cl2 h2{font-weight:800;font-size:clamp(32px,4.6vw,50px);letter-spacing:-.03em}
.cl2 p{color:var(--muted);margin:18px 0 30px;max-width:40ch}
.detail{display:flex;align-items:center;gap:16px;padding:18px 0;border-top:1px solid var(--hair)}
.detail:first-of-type{border-top:none}
.detail .di{width:48px;height:48px;border-radius:13px;flex:0 0 auto;display:grid;place-items:center;background:var(--blue);color:#fff}
.detail .dt small{font-family:"Space Mono",ui-monospace,"Cascadia Mono",Consolas,monospace;font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);display:block;margin-bottom:3px}
.detail .dt b{font-size:18px;font-weight:700;color:var(--blue-deep)}
.detail .dt b a:hover{text-decoration:underline}
.form{background:#fff;border:1px solid var(--hair);border-radius:22px;padding:clamp(26px,3.5vw,40px);position:relative;overflow:hidden;box-shadow:0 24px 60px rgba(16,28,58,.08)}
.form::before{content:"";position:absolute;top:0;left:0;right:0;height:4px;background:linear-gradient(90deg,var(--blue),var(--orange))}
.form h3{font-weight:800;font-size:24px;display:flex;align-items:center;gap:11px}
.form .fm{font-family:"Space Mono",ui-monospace,"Cascadia Mono",Consolas,monospace;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin:6px 0 26px}
.two{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.field{margin-bottom:16px}
.field label{display:block;font-family:"Space Mono",ui-monospace,"Cascadia Mono",Consolas,monospace;font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-bottom:8px}
.field input{width:100%;background:var(--soft-2);border:1px solid var(--hair);border-radius:10px;padding:14px 15px;color:var(--ink);font-family:"Inter",system-ui,-apple-system,"Segoe UI",Arial,sans-serif;font-size:15px;transition:border-color .2s,box-shadow .2s,background .2s}
.field input:focus{outline:none;border-color:var(--orange);background:#fff;box-shadow:0 0 0 3px rgba(11,99,224,.2)}
.pick{margin:8px 0 22px}
.pick>label{display:block;font-family:"Space Mono",ui-monospace,"Cascadia Mono",Consolas,monospace;font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-bottom:12px}
.pills{display:flex;flex-wrap:wrap;gap:9px}
.pill{cursor:pointer}
.pill input{position:absolute;opacity:0;pointer-events:none}
.pill span{display:inline-block;padding:9px 14px;border-radius:100px;border:1px solid var(--hair);font-size:13px;color:var(--muted);transition:.18s;user-select:none}
.pill input:checked+span{border-color:var(--blue);color:#fff;background:var(--blue);font-weight:600}
.pill input:focus-visible+span{outline:2px solid var(--orange);outline-offset:2px}
.form .btn-orange{width:100%;justify-content:center;font-size:16px;padding:16px}
.fn{font-family:"Space Mono",ui-monospace,"Cascadia Mono",Consolas,monospace;font-size:10px;letter-spacing:.08em;color:var(--gray);text-align:center;margin-top:14px}
/* ===== FOOTER ===== */
footer{background:var(--ink-blue);color:#fff;padding:64px var(--pad) 34px}
.ft{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:36px;max-width:var(--maxw);margin:0 auto 40px}
.fb img{height:76px;margin-bottom:16px}
@media(max-width:820px){.fb img{height:64px}}
/* the tagline is part of the logo artwork now, so the separate serif line
   below it is hidden rather than deleted - flip it back to block to restore */
.fb p{color:rgba(255,255,255,.74);font-size:14px;max-width:34ch;margin:0}
.fb .tag-serif{color:var(--orange);font-size:15px;display:none;margin-top:14px}
.fc h4{font-family:"Space Mono",ui-monospace,"Cascadia Mono",Consolas,monospace;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--orange);margin-bottom:16px;font-weight:700}
.fc a{display:block;color:#fff;font-size:14.5px;margin-bottom:11px;opacity:.84;transition:opacity .2s,padding-left .2s}
.fc a:hover{opacity:1;padding-left:4px}
.fbar{max-width:var(--maxw);margin:0 auto;border-top:1px solid rgba(255,255,255,.16);padding-top:24px;display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap}
.fbar .mono{font-size:11px;color:rgba(255,255,255,.62)}
.fbar .mono.g{color:var(--orange)}
.reveal{opacity:0;transform:translateY(24px);transition:opacity .7s ease,transform .7s ease}
.reveal.in{opacity:1;transform:none}
/* ===== MULTI-PAGE ADDITIONS ===== */
.page-banner::after{content:"";position:absolute;inset:0;z-index:0;background:linear-gradient(100deg,rgba(16,28,58,.95) 0%,rgba(16,28,58,.66) 52%,rgba(16,28,58,.4) 100%),linear-gradient(0deg,rgba(16,28,58,.82),transparent 72%)}
.page-banner .wrap{position:relative;z-index:1}
.page-banner .eyebrow{color:var(--chrome)}
.page-banner .eyebrow .ln{background:var(--chrome)}
.page-banner h1{color:#fff;font-weight:900;font-size:clamp(40px,6.5vw,80px);letter-spacing:-.035em;line-height:.94}
.page-banner .lead{color:rgba(255,255,255,.82);max-width:54ch;margin:20px 0 0;font-size:clamp(16px,1.7vw,19px);line-height:1.55}
.menu a.nav-active{color:#fff}
.menu a.nav-active::after{width:100%}
header.scrolled .menu a.nav-active{color:var(--blue)}
/* home teaser cards */
.tcards{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:30px}
.tcard2::before{content:"";position:absolute;top:0;left:0;height:4px;width:0;transition:width .4s}
.tcard2.b::before{background:var(--orange)}
.tcard2:hover::before{width:100%}
.tcard2:hover{transform:translateY(-6px);box-shadow:0 28px 60px rgba(16,28,58,.1);border-color:var(--gray)}
.tcard2.a .ico{background:var(--blue);color:#fff}
.tcard2.b .ico{background:var(--orange);color:var(--ink-blue)}
.tcard2 h3{font-size:24px;font-weight:800;color:var(--blue-deep)}
.tcard2 .kick{font-family:"Space Mono",ui-monospace,"Cascadia Mono",Consolas,monospace;font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--orange-deep);margin-top:5px}
.tcard2:hover .go{gap:13px}
/* why grid */
.wcard{position:relative;padding:36px 30px;border-radius:22px;background:#fff;border:1px solid var(--hair);box-shadow:0 2px 6px rgba(13,24,48,.04);transition:transform .28s,box-shadow .28s,border-color .28s;overflow:hidden}
.wcard::before{content:"";position:absolute;top:0;left:0;height:3px;width:0;background:var(--orange);transition:width .4s}
.wcard:hover{transform:translateY(-6px);box-shadow:0 26px 54px rgba(13,24,48,.12);border-color:transparent}
.wcard:hover::before{width:100%}
.wcard h4{font-size:17px;font-weight:800;color:var(--blue-deep);letter-spacing:-.01em}
.wcard p{color:var(--muted);font-size:14px;margin:9px 0 0;line-height:1.5}
/* cta band */
.cta-band{background:linear-gradient(125deg,var(--blue-deep),var(--ink-blue));color:#fff;border-radius:24px;padding:50px clamp(28px,5vw,62px);display:flex;align-items:center;justify-content:space-between;gap:30px;flex-wrap:wrap;position:relative;overflow:hidden}
.cta-band::after{content:"";position:absolute;right:-40px;bottom:-60px;width:240px;height:240px;border-radius:50%;border:1px solid rgba(255,255,255,.2)}
.cta-band .ctl{position:relative;z-index:1;max-width:46ch}
.cta-band h3{color:#fff;font-size:clamp(24px,3.4vw,36px);font-weight:800;letter-spacing:-.02em}
.cta-band p{margin:10px 0 0;color:rgba(255,255,255,.86)}
.cta-band .cbt{position:relative;z-index:1;display:flex;gap:12px;flex-wrap:wrap}
.btn-dark{background:var(--ink-blue);color:#fff}
.cta-band .btn-dark{background:var(--red);color:#fff}
.cta-band .btn-dark:hover{background:var(--red-deep);box-shadow:0 14px 30px rgba(196,42,42,.30)}
.btn-dark:hover{background:var(--blue-deep);transform:translateY(-2px)}
.btn-lightline{background:transparent;border-color:rgba(255,255,255,.55);color:#fff}
.btn-lightline:hover{border-color:#fff;transform:translateY(-2px)}
/* process steps */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:26px;margin-top:36px}
.step{position:relative;padding-top:8px}
.step .num{display:inline-grid;place-items:center;width:56px;height:56px;border-radius:50%;font-family:"Archivo",system-ui,-apple-system,"Segoe UI",Arial,sans-serif;font-weight:900;font-size:22px;color:var(--blue-deep);background:#fff;border:1.5px solid rgba(11,99,224,.4);box-shadow:0 10px 24px rgba(13,24,48,.07);line-height:1;letter-spacing:0}
.step h4{font-size:18px;font-weight:800;color:var(--blue-deep);margin:12px 0 8px}
.step p{color:var(--muted);font-size:14.5px;margin:0;line-height:1.55}
/* values */
.values{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:26px}
.value{position:relative;padding:36px 30px;border-radius:20px;border:1px solid var(--hair);background:#fff;box-shadow:0 2px 6px rgba(13,24,48,.04);transition:transform .28s,box-shadow .28s,border-color .28s;overflow:hidden}
.value::before{content:"";position:absolute;top:0;left:0;height:3px;width:0;background:var(--orange);transition:width .4s}
.value:hover{transform:translateY(-6px);box-shadow:0 26px 54px rgba(13,24,48,.11);border-color:transparent}
.value:hover::before{width:100%}
.value .vi{width:50px;height:50px;border-radius:14px;background:rgba(11,99,224,.10);border:1px solid rgba(11,99,224,.22);display:grid;place-items:center;color:var(--orange-deep);margin-bottom:18px}
.value h4{font-size:18px;font-weight:800;color:var(--blue-deep)}
.value p{color:var(--muted);font-size:14.5px;margin:9px 0 0;line-height:1.55}
/* prose */
.prose{max-width:68ch}
.prose p{color:var(--muted);font-size:16.5px;margin:0 0 20px;line-height:1.7}
.prose p strong{color:var(--ink);font-weight:600}
/* roles */
.roles{display:flex;flex-direction:column;gap:14px;margin-top:30px}
.role{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:26px 30px;border:1px solid var(--hair);border-radius:18px;background:#fff;transition:transform .2s,box-shadow .2s;flex-wrap:wrap}
.role:hover{transform:translateX(5px);box-shadow:0 18px 44px rgba(16,28,58,.08);border-color:var(--gray)}
.role .rl h4{font-size:19px;font-weight:800;color:var(--blue-deep)}
.role .rl p{color:var(--muted);font-size:14px;margin:6px 0 0}
.role .rr{display:flex;align-items:center;gap:16px}
.role .rtag{font-family:"Space Mono",ui-monospace,"Cascadia Mono",Consolas,monospace;font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--orange-deep);border:1px solid var(--hair);border-radius:100px;padding:7px 13px;white-space:nowrap}
/* rating summary */
.rsum .rstars{display:flex;gap:3px}
.rsum .rstars svg{width:20px;height:20px;color:var(--gold)}
.section-head{max-width:60ch}
.section-head .eyebrow{margin-bottom:20px}
.esop{max-width:58ch;color:rgba(255,255,255,.92);font-size:clamp(14.5px,1.5vw,17px);line-height:1.55;margin:14px 0 0;font-weight:500}
.esop b{color:var(--chrome);font-weight:700}
.trade{padding:0;overflow:hidden}
.trade .tphoto{position:relative;height:clamp(180px,24vw,240px);background-size:cover;background-position:center}
.trade .tphoto::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(16,28,58,.05),rgba(16,28,58,.28))}
.trade.elec .tphoto{border-bottom:3px solid var(--orange)}
.trade.clim .tphoto{border-bottom:3px solid var(--blue)}
.trade .tphoto .idx{position:absolute;top:0;left:0;right:auto;background:var(--blue);color:#fff;font-family:"Space Mono",ui-monospace,"Cascadia Mono",Consolas,monospace;font-weight:700;font-size:14px;letter-spacing:.1em;padding:9px 13px;border-radius:0 0 12px 0;opacity:1;z-index:1}
.trade.clim .tphoto .idx,.trade.elec .tphoto .idx{color:#fff}
.trade .tbody{padding:clamp(28px,3.6vw,40px)}
.ht:hover::before{transform:scale(1.12)}
.htc{background:#fff;border:1px solid var(--hair);border-radius:16px;padding:24px 22px;box-shadow:0 10px 30px rgba(13,24,48,.06);transition:transform .28s,box-shadow .28s;height:100%}
.ht:hover .htc{transform:translateY(-5px);box-shadow:0 24px 50px rgba(13,24,48,.12)}
.esop-band{background:linear-gradient(150deg,var(--blue-deep),var(--ink-blue));color:#fff;border-radius:24px;padding:clamp(34px,4.5vw,56px);display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,4vw,54px);align-items:center;box-shadow:0 30px 70px rgba(13,24,48,.2)}
.esop-badge{display:inline-block;font-family:"Space Mono",ui-monospace,"Cascadia Mono",Consolas,monospace;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--chrome);border:1px solid rgba(255,255,255,.22);border-radius:100px;padding:7px 14px;margin-bottom:18px}
.esop-l h2{font-family:"Archivo",system-ui,-apple-system,"Segoe UI",Arial,sans-serif;font-weight:900;font-size:clamp(28px,3.6vw,44px);letter-spacing:-.02em;line-height:1.03;margin:0 0 16px;color:#fff}
.esop-l p{color:rgba(255,255,255,.82);font-size:16px;line-height:1.6;margin:0}
.esop-l strong{color:var(--chrome)}
.esop-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:15px}
.esop-list li{display:flex;flex-direction:column;gap:3px;padding-left:22px;position:relative}
.esop-list li::before{content:"";position:absolute;left:0;top:7px;width:9px;height:9px;border-radius:50%;background:var(--yellow)}
.esop-list b{font-family:"Archivo",system-ui,-apple-system,"Segoe UI",Arial,sans-serif;font-weight:800;font-size:15.5px;color:#fff}
.htc .hicon{width:46px;height:46px;border-radius:13px;background:linear-gradient(160deg,var(--blue),var(--ink-blue));color:#fff;display:grid;place-items:center;margin-bottom:16px;box-shadow:0 10px 22px rgba(13,24,48,.16)}
.esop-list span{color:rgba(255,255,255,.7);font-size:14px;line-height:1.5}
.svc-sub{display:grid;grid-template-columns:1.6fr .9fr;gap:clamp(30px,5vw,64px);align-items:start}
.htc .hicon svg{width:23px;height:23px}
.svc-sub-body p{font-size:clamp(16px,1.8vw,19px);line-height:1.65;color:var(--ink);margin:0 0 26px}
.ht:last-child .htc .hicon{background:linear-gradient(160deg,var(--orange),var(--orange-deep));color:#fff}
.svc-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:14px 24px}
.numbers-sec{padding-top:0}
.svc-list li{position:relative;padding-left:28px;color:var(--ink);font-weight:600;font-size:15px}
.numbers{background:linear-gradient(130deg,var(--blue) 0%,var(--ink-blue) 125%);border-radius:24px;padding:clamp(36px,5vw,58px) clamp(24px,4vw,56px);display:grid;grid-template-columns:repeat(4,1fr);gap:24px;position:relative;overflow:hidden;box-shadow:0 30px 70px rgba(13,24,48,.22)}
.svc-list li::before{content:"";position:absolute;left:0;top:2px;width:18px;height:18px;border-radius:5px;background:rgba(11,99,224,.14)}
.numbers::after{content:"";position:absolute;right:-60px;top:-70px;width:260px;height:260px;border-radius:50%;border:1px solid rgba(255,255,255,.1)}
.svc-list li::after{content:"";position:absolute;left:5px;top:7px;width:7px;height:4px;border-left:2px solid var(--orange-deep);border-bottom:2px solid var(--orange-deep);transform:rotate(-45deg)}
.numbers::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:linear-gradient(180deg,var(--yellow),var(--red))}
.svc-sub-cta{background:linear-gradient(160deg,var(--blue-deep),var(--ink-blue));color:#fff;border-radius:20px;padding:32px 28px;position:sticky;top:104px}
.nstat{position:relative;z-index:1;padding-left:26px;border-left:1px solid rgba(255,255,255,.14)}
.svc-sub-cta h3{font-family:"Archivo",system-ui,-apple-system,"Segoe UI",Arial,sans-serif;font-weight:800;font-size:22px;margin:0 0 8px;color:#fff}
.nstat:first-child{border-left:none;padding-left:0}
.svc-sub-cta p{color:rgba(255,255,255,.8);font-size:15px;line-height:1.5;margin:0 0 20px}
.nstat b{display:block;font-family:"Archivo",system-ui,-apple-system,"Segoe UI",Arial,sans-serif;font-weight:900;font-size:clamp(40px,4.8vw,60px);line-height:1;letter-spacing:-.03em;color:#fff}
.svc-sub-cta .btn{width:100%;justify-content:center}
.nstat b i{font-style:normal;font-size:.6em;vertical-align:top;margin-left:2px}
.svc-back{display:inline-block;margin-top:16px;color:rgba(255,255,255,.75);font-size:13.5px;font-weight:600}
.nstat span{display:block;margin-top:14px;font-family:"Space Mono",ui-monospace,"Cascadia Mono",Consolas,monospace;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.72)}
.svc-back:hover{color:var(--chrome)}


/* ================== Reusable Global FAQ Stylesheet ==================
   Supplied with the SEO pass. The questions are <h2> on purpose — that is what
   AI search engines look for when scraping Q&A — and .faq-question sets them to
   18px so the site's own h2 size is untouched. */
.faq-section {
  width: 100%;
  padding: 60px 0;
  background-color: #ffffff;
  box-sizing: border-box;
}
/* Jeff's container was a 900px box centred in the viewport, which left the FAQ
   text starting ~150px right of every other section on the page. The container
   now matches the site's own .wrap (1200px + the --pad side padding) so the left
   edge lines up, and his 900px reading measure is kept on the content inside. */
.faq-container {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 var(--pad);
  box-sizing: border-box;
}
.faq-main-title, .faq-accordion {
  max-width: 900px;
}
/* Main Heading: 22px */
.faq-main-title {
  font-size: 22px;
  font-weight: 700;
  color: #0c1b33;
  margin: 0 0 28px 0;
  text-align: left;
}
/* Accordion Shell */
.faq-accordion {
  display: flex;
  flex-direction: column;
  border-top: 1px solid #e2e8f0;
}
.faq-item {
  border-bottom: 1px solid #e2e8f0;
}
/* Interactive Summary Trigger */
.faq-summary {
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 0;
  cursor: pointer;
  user-select: none;
}
.faq-summary::-webkit-details-marker {
  display: none;
}
/* Question Heading: 18px & Bold */
.faq-question {
  font-size: 18px;
  font-weight: 700;
  line-height: 1.4;
  color: #1a202c;
  margin: 0;
  padding-right: 20px;
}
/* CSS-only Toggle Chevron */
.faq-icon {
  position: relative;
  width: 12px;
  height: 12px;
  min-width: 12px;
  border-right: 2px solid #0c1b33;
  border-bottom: 2px solid #0c1b33;
  transform: rotate(45deg);
  transition: transform 0.25s ease-in-out;
}
.faq-item[open] .faq-icon {
  transform: rotate(-135deg);
}
/* Answer Body */
.faq-answer {
  padding: 0 0 20px 0;
}
.faq-answer p {
  font-size: 16px;
  line-height: 1.6;
  color: #4a5568;
  margin: 0;
}
/* keyboard focus, and stop the chevron animating for reduced-motion users */
.faq-summary:focus-visible {
  outline: 2px solid var(--orange);
  outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) {
  .faq-icon { transition: none; }
}

/* ---- the hidden attribute must actually hide ----
   contact.html ships the thank-you panel as <div class="form-sent" hidden>, and
   js/contact.js reveals it by clearing that attribute after a successful send.
   But contact.css sets

       .form-sent { display: flex }

   and an author display declaration beats the browser's own [hidden] rule, so
   the panel was showing on page load — "Thank you for submitting" sat under the
   form before anyone had submitted anything. (.form-err already had a
   .form-err[hidden] guard; .form-sent was missed.)

   Fixing it globally rather than for this one class, so the next element built
   with hidden cannot hit the same trap. Nothing on the site uses hidden and
   expects to stay visible — only #formSent and #formErr use it at all. */
[hidden] { display: none !important; }

/* ---- mobile menu: white state, Services submenu ----
   The mobile menu has two looks. Over the hero the header is transparent and the
   panel is dark (.menu background: --ink-blue, links #fff). Once the page is
   scrolled the header gains .scrolled and the panel turns white, and the page
   stylesheets recolour the top-level links for it:

       header.scrolled .menu a { color: var(--muted) }

   The Services submenu was never given that second state. Its links are pinned
   at rgba(255,255,255,.82) and its left rule at rgba(255,255,255,.18), so on the
   white panel all seven service links were white-on-white — invisible, leaving a
   ~500px blank gap between "Services" and "New Construction". The left rule was
   invisible too.

   These selectors carry header.scrolled and .menu, so they out-specify the page
   rule (0,4,2 against 0,3,1) and win no matter which stylesheet loads first.
   The dark state is untouched. */
@media (max-width: 1180px) {
  header.scrolled .menu .nav-dd .dd { border-left-color: var(--hair); }
  header.scrolled .menu .nav-dd .dd a { color: var(--muted); }
  header.scrolled .menu .nav-dd .dd a:hover,
  header.scrolled .menu .nav-dd .dd a:focus-visible { color: var(--red); }
}

/* ---- hero sub-paragraph, resized for Jeff's longer homepage copy ----
   The replacement paragraph is 640 characters against the 166 it replaced, which
   took the hero sub from 3 lines to 10 and pushed the buttons off screen.

   Both declarations below are needed. The original rule caps the width at 50ch —
   a width measured in characters — so a smaller font shrinks the column by the
   same proportion and the line count never changes. Releasing the cap lets the
   paragraph use the full 640px of .hero-inner, and that is what actually removes
   the lines: 10 -> 8, with the type at 15px instead of 20px. Opacity is lifted
   from .82 to .88 to hold legibility at the smaller size. Verified with
   out/herofit.mjs. */
.h-sub {
  max-width: none;
  font-size: 15px;
  line-height: 1.5;
  margin: 20px 0 28px;
  color: rgba(255,255,255,.88);
}

/* ---- intro copy + long-form prose blocks added with the SEO pass ---- */
/* Padded on both sides: on the homepage this band sits between the stats card
   and the "Why Elite" section, where the background colour changes, so the last
   line needs clearance from that edge. */
.page-intro { padding: clamp(34px,4.5vw,54px) 0; }
/* On the service pages the FAQ follows immediately and brings its own 60px, so
   trim the doubled gap. */
.page-intro + .faq-section { padding-top: 20px; }
.page-intro p {
  max-width: 78ch; margin: 0;
  font-size: clamp(15.5px,1.6vw,17px); line-height: 1.75; color: var(--muted);
}
.seo-prose { padding: clamp(34px,4.5vw,54px) 0 0; }
.seo-prose .pw { max-width: 82ch; }
.seo-prose h2 {
  margin: 34px 0 0; font-family: "Archivo",sans-serif; font-weight: 800;
  font-size: clamp(21px,2.4vw,27px); line-height: 1.2; letter-spacing: -.02em;
  color: var(--blue-deep);
}
.seo-prose h2:first-child { margin-top: 0; }
.seo-prose h3 {
  margin: 26px 0 0; font-family: "Archivo",sans-serif; font-weight: 700;
  font-size: 16px; color: var(--ink);
}
.seo-prose p { margin: 13px 0 0; font-size: 16px; line-height: 1.72; color: var(--muted); }
.seo-prose ul { margin: 14px 0 0; padding: 0 0 0 22px; }
.seo-prose li { margin: 8px 0 0; font-size: 16px; line-height: 1.65; color: var(--muted); }
.seo-prose li::marker { color: var(--orange); }
.seo-prose li strong, .seo-prose p strong { color: var(--ink); font-weight: 600; }
/* The site's global rule is a{color:inherit;text-decoration:none}, so a link in
   body copy would be invisible. Give the new prose links an affordance, and pad
   them vertically — on an inline element that grows the tap target past 24px
   without changing the line height. */
.seo-prose a {
  color: var(--orange-deep); font-weight: 600;
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px;
  padding: 6px 0;
}
.seo-prose a:hover { color: var(--orange); }

/* ── floating click-to-call ──────────────────────────────────────────────
   z-index sits above the header (50) but below any modal. Bottom-right is
   clear of the Housecall Pro bubble, which anchors mid-right. */
.fab-call{position:fixed;right:20px;bottom:20px;z-index:60;
  display:inline-flex;align-items:center;gap:10px;
  background:var(--red);color:#fff;text-decoration:none;
  font-family:"Archivo",system-ui,-apple-system,"Segoe UI",Arial,sans-serif;
  font-weight:700;font-size:15px;letter-spacing:-.01em;
  padding:14px 22px;border-radius:100px;
  box-shadow:0 10px 28px rgba(16,28,58,.24);
  transition:transform .18s,box-shadow .18s,background .2s}
.fab-call:hover,.fab-call:focus-visible{background:var(--red-deep);color:#fff;
  transform:translateY(-2px);box-shadow:0 14px 34px rgba(16,28,58,.30)}
.fab-call svg{width:20px;height:20px;flex:0 0 auto}
/* icon-only circle on phones, where the number would crowd the screen */
@media(max-width:560px){
  .fab-call{right:14px;bottom:14px;width:58px;height:58px;padding:0;
    justify-content:center;border-radius:50%}
  .fab-call span{display:none}
  .fab-call svg{width:24px;height:24px}
}
@media(prefers-reduced-motion:reduce){
  .fab-call{transition:none}
  .fab-call:hover,.fab-call:focus-visible{transform:none}
}
@media print{.fab-call{display:none}}

/* ── header mark ─────────────────────────────────────────────────────────
   The full-colour logo is wider and taller than the old mono one, so the nav
   bar grows with it, and the mobile menu's top offset (pinned to the old
   84px bar) has to follow or it opens underneath the header. */
.nav{height:136px}
.brand,.brand img,.brand .l-navy{height:124px}
@media(max-width:1180px){
  .nav{height:132px}
  .brand,.brand img,.brand .l-navy{height:106px}
  .menu{inset:132px 0 auto 0;max-height:calc(100vh - 132px);max-height:calc(100dvh - 132px)}
}
@media(max-width:430px){
  .nav{height:126px;padding-left:16px}
  .brand,.brand img,.brand .l-navy{height:98px}
  .menu{inset:126px 0 auto 0;max-height:calc(100vh - 126px);max-height:calc(100dvh - 126px)}
}
@media(max-width:340px){
  .nav{height:108px}
  .brand,.brand img,.brand .l-navy{height:82px}
  .menu{inset:108px 0 auto 0;max-height:calc(100dvh - 108px)}
}

/* One mark everywhere. The full-colour logo carries a white keyline, so it
   reads on the dark hero banners as well as on white - no second file. */
.brand .l-navy{opacity:1}
/* ── the header mark, for pages whose HTML has not been updated ──────────
   Ten pages still carry the old two-image header: <img class="l-navy"
   src="logo-navy.png"> plus <img class="l-white">. Two rules fix both
   symptoms there without touching those files, and they are harmless on
   the pages that have already been updated.

   1. the stray white mark used to be hidden by an opacity swap that no
      longer exists, so it painted over the colour one - that is the
      doubled logo. Hide it outright.
   2. point the remaining image at the new mark. `content` on an <img>
      replaces the rendered image; the src stays as the fallback. */
.brand .l-white{display:none !important}
.brand .l-navy{content:url(../images/logo-color-nav.webp)}

/* ── accents on dark surfaces ────────────────────────────────────────────
   The accent blue is 5.5:1 on white but only ~3:1 on the navy footer and
   ESOP panels, which is under AA for small text. Those get the logo's
   chrome/silver instead - 11:1 on the same navy. */
.fc h4{color:var(--chrome)}
.fbar .mono.g{color:var(--chrome)}
.esop b{color:var(--chrome)}
.esop-badge{color:var(--chrome)}
.esop-l strong{color:var(--chrome)}
.esop-list li::before{background:var(--chrome)}
.fb .tag-serif{color:var(--chrome)}

/* ═══════════════════════════════════════════════════════════════════════════
   FLOATING BOOK ONLINE BUTTON  (Oct 19 feedback)
   No bar, no panel - the buttons float free over whatever is behind them, so
   the page is never cut off by a slab of navy. The gap between them stays
   clickable because the container itself ignores pointer events.
   The red pill carries a slow red aura that drifts and breathes. It is kept
   deliberately quiet - six seconds a lap, and it stops entirely for anyone
   who has asked their system for reduced motion.
   ══════════════════════════════════════════════════════════════════════════ */
body.has-actionbar .fab-call{display:none}

.actionbar{
  position:fixed;left:0;right:0;bottom:0;z-index:70;
  background:none;border:0;-webkit-backdrop-filter:none;backdrop-filter:none;
  padding:0 var(--pad) calc(18px + env(safe-area-inset-bottom,0px));
  pointer-events:none;
  transform:translateY(145%);
  transition:transform .34s cubic-bezier(.22,.8,.3,1);
  will-change:transform}
.actionbar.in{transform:translateY(0)}

.ab-in{max-width:var(--maxw);margin:0 auto;display:flex;align-items:center;gap:12px;
  isolation:isolate}

.actionbar a{pointer-events:auto;
  position:relative;display:inline-flex;align-items:center;justify-content:center;gap:10px;
  font-family:"Inter",system-ui,-apple-system,"Segoe UI",Arial,sans-serif;
  font-weight:700;font-size:16px;letter-spacing:-.01em;text-decoration:none;
  border-radius:100px;padding:16px 30px;border:1.5px solid transparent;white-space:nowrap;
  transition:background .2s,border-color .2s,color .2s,transform .15s}
.actionbar svg{width:19px;height:19px;flex:0 0 auto}

/* ── the red pill and its aura ──────────────────────────────────────────── */
.ab-main{flex:1 1 auto;background:var(--red);color:#fff;
  box-shadow:0 8px 22px rgba(16,28,58,.30)}
.ab-main::before{
  content:"";position:absolute;inset:-4px;border-radius:inherit;z-index:-1;
  background:linear-gradient(90deg,#E8453C,#C42A2A,#FF6E60,#C42A2A,#E8453C);
  background-size:300% 100%;
  filter:blur(10px);
  animation:abDrift 6s linear infinite, abBreathe 3.8s ease-in-out infinite}
@keyframes abDrift{from{background-position:0 0}to{background-position:300% 0}}
@keyframes abBreathe{0%,100%{opacity:.40}50%{opacity:.72}}
.ab-main:hover,.ab-main:focus-visible{background:var(--red-deep);color:#fff;transform:translateY(-1px)}

/* ── the second button: solid, so it reads on a white page too ──────────── */
.ab-side{flex:0 0 auto;background:var(--ink-blue);color:#fff;
  border-color:rgba(255,255,255,.20);box-shadow:0 8px 22px rgba(16,28,58,.28)}
.ab-side:hover,.ab-side:focus-visible{background:#16254A;border-color:rgba(255,255,255,.38);color:#fff}

.actionbar.is-trade .ab-main{flex:0 1 auto}
.actionbar.is-trade .ab-in{justify-content:center}
.actionbar a:focus-visible{outline:2px solid var(--red);outline-offset:3px}

@media (min-width:721px){
  .ab-in{justify-content:center}
  .ab-main{flex:0 1 auto;min-width:258px}
}
@media (max-width:720px){
  .actionbar{padding:0 14px calc(14px + env(safe-area-inset-bottom,0px))}
  .ab-in{gap:10px}
  .actionbar a{font-size:15.5px;padding:15px 22px}
  .ab-icon{padding:0;width:52px;height:52px;flex:0 0 52px}
  .ab-icon .ab-num{display:none}
  .actionbar.is-trade a{flex:1 1 0;padding:15px 12px;font-size:14.5px}
}
@media (max-width:380px){.actionbar.is-trade a span{font-size:13.5px}}

/* nothing is covered now, but leave the footer a little air */
body.has-actionbar footer{padding-bottom:104px}
@media (max-width:720px){body.has-actionbar footer{padding-bottom:92px}}

/* the open burger menu takes the screen, so the button steps aside */
body:has(.menu.open) .actionbar{transform:translateY(145%)}

@media (prefers-reduced-motion:reduce){
  .actionbar,.actionbar a{transition:none}
  .ab-main::before{animation:none;opacity:.5}
  .ab-main:hover{transform:none}
}
@media print{.actionbar{display:none}}