/* =====================================================================
   SKIN 4 · BOLD & DARK
   Loaded after site.css. Same content and structure as Diverse Power,
   a different company feel: an all-dark site, electric Diverse-blue accent,
   big condensed uppercase headlines (Barlow Condensed), a slanted black
   panel over the crew reel, trust tiles overlapping the hero.
   References: Olympic Electrical (slanted panel over the crew, bold caps,
   strong buttons, "why us" icon tiles), Peninsula Air (tiles over the
   hero edge, bold headline).
   Swap a client in by changing the tokens below + their logo/photos.
   ===================================================================== */
:root{
  --ink:#08090b; --navy:#121419; --navy-2:#181b21; --shop:#181b21;
  --b1:#459CC7; --b2:#9EDBEB; --b3:#459CC7; --act:#459CC7; --act-d:#3176B1;
  --paper:#0c0d10; --mist:#121419; --line:#252931; --line-d:rgba(255,255,255,.1);
  --txt:#f2f4f6; --mut:#a4abb6; --mut-d:rgba(255,255,255,.66);
  --r-card:6px; --r-btn:4px;
  --display:"Barlow Condensed",ui-sans-serif,system-ui,sans-serif;
  --body:"Barlow",ui-sans-serif,system-ui,sans-serif;
}
body{background:var(--paper);color:var(--txt)}
h1,h2,h3{letter-spacing:-.005em}
h2{font-weight:800;text-transform:uppercase;font-size:clamp(2.2rem,1.4rem + 2.6vw,3.8rem);line-height:.98}
h3{font-weight:700}
.eyebrow{color:var(--b1)}
.grad{background:none;-webkit-background-clip:initial;background-clip:initial;color:var(--b1)}
.btn{border-radius:4px;letter-spacing:.08em;font-weight:700}
.btn-act{background:var(--act);color:#0c0d10}
.btn-act:hover{background:var(--act-d)}
.btn-ink{background:transparent;color:var(--txt);border-color:var(--line)}
.btn-ink:hover{border-color:var(--b1)}
.link:hover{color:var(--b1)}
.dd-menu{background:#181b21;color:var(--txt);border:1px solid var(--line)}
.dd-menu a:hover{background:#21252d}
.dd-menu a i{background:#21252d}

/* top bar + header */
.topbar{background:var(--ink);border-bottom:1px solid var(--line)}
.topbar svg{stroke:var(--b1)}
.hdr{background:rgba(8,9,11,.94)}

/* hero: crew reel right, slanted black panel left */
.hero-bold{background:var(--ink)}
.hb-media{position:absolute;inset:0 0 0 30%}
.hb-media .ph{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 40%}
.hb-panel{position:absolute;inset:0 auto 0 0;width:62%;background:linear-gradient(100deg,#08090b 0%,#0c0d10 78%,rgba(12,13,16,.92) 100%);clip-path:polygon(0 0,100% 0,82% 100%,0 100%)}
.hb-panel::after{content:"";position:absolute;top:0;bottom:0;right:17.5%;width:6px;background:var(--b1);transform:skewX(-10.5deg);transform-origin:top;opacity:.9}
.hero-bold .shell{position:relative;min-height:min(760px,calc(100vh - 126px));display:flex;flex-direction:column;justify-content:center;padding-top:80px;padding-bottom:120px}
.hb-copy{max-width:620px}
.hero-bold h1{margin-top:16px;text-transform:uppercase;line-height:.92}
.hero-bold .h-big{font-size:clamp(3rem,1.6rem + 4.4vw,5.6rem);font-weight:800}
.hero-bold .h-mid{color:#fff;font-family:var(--body);text-transform:none;font-size:clamp(1.15rem,1rem + .8vw,1.6rem)}
.hero-bold .h-mid::before{background:var(--b1)}
.hb-acts{display:flex;gap:12px;margin-top:26px}
.hb-acts .btn{font-size:1.05rem;letter-spacing:.02em;padding:16px 22px}
.hb-acts .btn svg{color:var(--b1)}
.hero-bold .qbar{background:#181b21;border:1px solid var(--line);box-shadow:0 30px 70px rgba(0,0,0,.5);max-width:620px;border-radius:6px}
.hero-bold .qcell{color:var(--txt)}
.hero-bold .qcell+.qcell{border-color:var(--line)}
.hero-bold .qcell span{color:var(--b1)}
.hero-bold .qcell select,.hero-bold .qcell input{color:var(--txt)}
.hero-bold .qcell select option{color:#111}
.hero-bold .badge{background:rgba(255,255,255,.04)}

/* trust: tiles pulled up over the bottom of the hero */
.trust{background:transparent;border-top:0;position:relative;z-index:3;margin-top:-64px}
.trust .shell{gap:12px}
.tr{background:#181b21;border:1px solid var(--line);border-radius:6px;padding:22px 18px;flex-direction:column;align-items:flex-start}
.tr+.tr{border-left:1px solid var(--line)}
.tr i{background:transparent;border:2px solid var(--b1);border-radius:6px}
.tr i svg{stroke:var(--b1)}
.tr b{font:800 1.15rem/1.1 var(--display);letter-spacing:.04em}

/* sections: dark, alternating */
.svc{background:var(--paper)}
.owner{background:var(--paper);padding-top:40px}
.owner .shell{padding-top:calc(var(--sec) - 40px)}
.steps{background:var(--mist)}
.solar{background:var(--paper)}
.reviews{background:var(--mist)}
.areas{background:var(--paper)}
.faq{background:var(--mist)}
.card{border-radius:6px}
.card i{background:var(--b1);border-radius:4px}
.card i svg{stroke:#0c0d10}
.card.unsure{background:linear-gradient(160deg,#1b1f26,#08090b);border:1px solid var(--line)}
.card .tag{color:var(--b1)}
.opt{background:#181b21;border-color:var(--line)}
.opt .flag{color:#0c0d10}
.opt li::before{background-color:var(--b1)}
.opt.feat{border-color:var(--b1);box-shadow:0 0 0 1px var(--b1),0 30px 60px rgba(0,0,0,.4)}
.l2band{background:#181b21;border:1px solid var(--line)}
.checks li i{background:var(--b1)}
.checks li i svg{stroke:#0c0d10}
.sig{color:#fff}
.tl-line{background:#2a2f38}
.step .dot{background:var(--mist);border-color:#3a404b}
.step.on .dot{background:#0c0d10}
.rating{background:#181b21;border-color:var(--line)}
.rating .num{color:var(--b1)}
.rev.main{background:#181b21;border:1px solid var(--line)}
.rev .av,.rcard .av{background:var(--b1);color:#0c0d10}
.rev .job span,.rcard .job span{background:rgba(69,156,199,.12);color:var(--b1)}
.rev .who a,.rcard .go{background:var(--b1);color:#0c0d10}
.rev.ask{background:transparent;border-color:#3a404b}
.rcard.t-navy,.rcard.t-white{background:#181b21;color:var(--txt);border:1px solid var(--line)}
.rcard.t-blue{background:var(--b1);color:#0c0d10}
.rdots button{background:#3a404b}
.map .big{fill:#0f1824}
.check{background:#181b21}
.check input{background:#0c0d10;color:var(--txt);border-color:var(--line)}
.subs li.hq::after{color:#0c0d10;background:var(--b1)}
.subs li.hit{background:linear-gradient(90deg,rgba(69,156,199,.18),transparent)}
.tabs button sup{color:var(--b1)}
.still{background:#181b21;border-left-color:var(--b1)}
details[open] summary i{color:#0c0d10}
summary i{border-color:var(--line)}

/* contact */
.contact::before{background:linear-gradient(90deg,rgba(8,9,11,.97) 0%,rgba(8,9,11,.86) 45%,rgba(8,9,11,.5) 100%)}
.next li b{background:var(--b1);color:#0c0d10}
.form{background:#121419;border-color:var(--line);border-radius:6px}
.form .fld input,.form .fld textarea{background:#0c0d10;border-color:var(--line)}
.form .fld input:focus,.form .fld textarea:focus{border-color:var(--b1);box-shadow:0 0 0 3px rgba(69,156,199,.15)}
.chip span{border-color:var(--line)}
.chip:hover span{border-color:var(--b1)}
.chip input:checked+span{background:var(--b1);border-color:var(--b1);color:#0c0d10!important}
.done i{background:var(--b1)}
.done i svg{stroke:#0c0d10}

/* inner pages: hard-coded white cards turned dark */
.incl .creds div,.feat,.svc3 a.s,.subgrid a{background:#181b21;border-color:var(--line)}
.incl .creds b,.feat .link,.svc3 .go{color:var(--b1)}
.feat i{background:#21252d}
.feat i svg{stroke:var(--b1)}
.band-in{background:#181b21;border:1px solid var(--line)}
.local{background:#121419}
.local small{color:var(--b1)}
.foot{background:var(--ink);border-top:1px solid var(--line)}
.foot .ct svg{stroke:var(--b1)}
.mbar .btn-act{color:#0c0d10}

/* Fix (also in Diverse Power): small-phone overflow in the areas section */
.areas-grid>*,.where-grid>*,.intro-grid>*{min-width:0}
.check .row{flex-wrap:wrap}
.check input{min-width:0;flex:1 1 160px}
.tabs{overflow-x:auto;scrollbar-width:none;flex-wrap:nowrap}
.tabs::-webkit-scrollbar{display:none}
.tabs button{flex:none;white-space:nowrap}

@media(max-width:1080px){
  .hb-media{inset:0}
  .hb-panel{width:100%;clip-path:none;background:linear-gradient(0deg,rgba(8,9,11,.96) 0%,rgba(8,9,11,.8) 55%,rgba(8,9,11,.35) 100%)}
  .hb-panel::after{display:none}
  .hero-bold .shell{min-height:0;padding-top:120px;padding-bottom:110px}
}
@media(max-width:860px){
  .hero-bold .shell{padding-top:180px;padding-bottom:96px}
  .hb-acts .btn{flex:1}
  .trust{margin-top:-48px}
}
@media(max-width:560px){
  .trust .shell{gap:8px}
  .tr{flex-direction:row;align-items:center;padding:14px 16px}
  .tr+.tr{border-top:1px solid var(--line)}
}

/* Inner pages use the same quick-quote bar: dark it everywhere so the text reads */
.qbar{background:#181b21;border:1px solid var(--line);border-radius:6px}
.qcell{color:var(--txt)}
.qcell+.qcell{border-color:var(--line)}
.qcell span{color:var(--b1)}
.qcell select,.qcell input{color:var(--txt)}
.qcell select option{color:#111}
.qcell input::placeholder{color:#7d8591}
.hero h1{text-transform:uppercase;line-height:.95}
.hero .h-mid{text-transform:none}

/* Fix (also in Diverse Power): on screens wider than 1280px the service rail was shifted
   ~300px left, leaving a gap on the right. Line the first card up with the heading and
   let the rail run off the right edge of its section instead. */
@media(min-width:1280px){
  .track{margin-left:0;width:100%;padding-left:calc((100% - var(--shell))/2 + var(--gut));scroll-padding-left:calc((100% - var(--shell))/2 + var(--gut))}
}

/* Mobile QA pass: the light map glared on the dark page, the outline buttons on dark
   cards were near invisible, and long uppercase button labels touched the edges. */
.map{background:#0f141b}
.map .sea{fill:#0d141c}
.map .nb{fill:#161a21;stroke:#262b34}
.map .rg{fill:#1d222b;stroke:#4a5260}
.map .rg:hover,.map .rg.on{fill:#13283d;stroke:var(--b1)}
.map .nbl{fill:#5d6672}
.map .sl{fill:#4f6475}
.map .big{fill:#fff;stroke:#0f141b}
.map .dot,.map .pin{stroke:#0f141b}
.map .dot:hover,.map .dot.hit{fill:#fff}
.map .hql{fill:var(--b1);stroke:#0f141b}
.map .herel{fill:#fff;stroke:#0f141b}
.map .note{background:rgba(12,13,16,.8);color:var(--mut)}
.btn-ink{border-color:rgba(255,255,255,.28)}
.btn-ink:hover{border-color:var(--b1);color:var(--b1)}
.opt .btn{white-space:normal;text-align:center;line-height:1.25}
@media(max-width:560px){.btn{letter-spacing:.04em}}

/* =====================================================================
   Round 2: own sections and motion (Joel: sections still felt too similar).
   Moving marquee, numbered service rows with a photo that follows the
   cursor, count-up stats, outlined step numbers, the review set huge.
   Motion here is loud on purpose: wipes, marquee, counters.
   Colours come from the client's logo (Diverse blues on near-black).
   ===================================================================== */
/* headings and blocks wipe in from the left instead of fading up */
.rv{opacity:1;transform:none;clip-path:inset(0 100% 0 0);transition:clip-path 1s var(--ease)}
.rv.in{clip-path:inset(0 -20px 0 0)}
@media(prefers-reduced-motion:reduce){.rv{clip-path:none}}

/* marquee */
.mq{background:var(--b1);color:#08090b;overflow:hidden;white-space:nowrap;border-block:1px solid #08090b;position:relative;z-index:2}
.mq-t{display:inline-flex;align-items:center;gap:28px;padding:16px 0;animation:mq 26s linear infinite;font:800 clamp(1.4rem,1rem + 1.4vw,2.2rem)/1 var(--display);text-transform:uppercase;letter-spacing:.02em}
.mq-t i{font-style:normal;opacity:.45}
@keyframes mq{to{transform:translateX(-50%)}}
@media(prefers-reduced-motion:reduce){.mq-t{animation:none}}

/* services: numbered rows */
.rows{position:relative;padding:var(--sec) 0;background:var(--paper);overflow:hidden}
.rows-head{display:grid;grid-template-columns:auto 1fr;gap:12px 48px;align-items:end}
.rows-head .eyebrow{grid-column:1/-1}
.rows-head h2{margin:0}
.rows-head .lede{max-width:420px;justify-self:end}
.rlist{list-style:none;margin-top:52px;border-top:1px solid var(--line)}
.rlist a{position:relative;display:grid;grid-template-columns:80px 1fr 1.1fr 40px;align-items:center;gap:24px;padding:26px 0;border-bottom:1px solid var(--line);transition:padding .4s var(--ease),color .3s}
.rlist .n{font:700 1rem/1 var(--display);color:var(--b1);letter-spacing:.06em}
.rlist .t{font:800 clamp(2.2rem,1.4rem + 2.6vw,4.2rem)/.95 var(--display);text-transform:uppercase;letter-spacing:-.005em}
.rlist .d{color:var(--mut);max-width:380px}
.rlist img{display:none}
.rlist .ar{width:28px;height:28px;color:var(--b1);transition:transform .4s var(--ease)}
.rlist a:hover{padding-left:16px}
.rlist a:hover .t{color:var(--b1)}
.rlist a:hover .ar{transform:rotate(-45deg)}
.rows-ask{margin-top:30px;color:var(--mut)}
.rows-ask a{color:var(--b1);font-weight:700;white-space:nowrap}
.rfloat{position:absolute;left:0;top:0;width:300px;aspect-ratio:4/3;margin:-110px 0 0 40px;pointer-events:none;overflow:hidden;border-radius:4px;opacity:0;scale:.85;transition:opacity .3s,scale .4s var(--ease);z-index:3;box-shadow:0 30px 60px rgba(0,0,0,.5)}
.rfloat.on{opacity:1;scale:1}
.rfloat img{width:100%;height:100%;object-fit:cover}

/* stats */
.stats{background:var(--mist);border-block:1px solid var(--line);padding:56px 0 34px}
.st-grid{display:grid;grid-template-columns:repeat(4,1fr)}
.st{padding:0 24px;border-left:1px solid var(--line)}
.st:first-child{border-left:0;padding-left:0}
.st b{display:block;font:800 clamp(3rem,2rem + 3vw,5.2rem)/.9 var(--display);color:var(--b1);letter-spacing:-.01em;font-variant-numeric:tabular-nums}
.st>span{display:block;margin-top:12px;color:var(--mut);font-size:.9rem}
.st-lic{display:flex;flex-wrap:wrap;gap:8px 28px;margin-top:40px;padding-top:20px;border-top:1px solid var(--line);font:600 .74rem/1.3 var(--body);letter-spacing:.14em;text-transform:uppercase;color:var(--mut)}

/* how it works: outlined numbers */
.bign{padding:var(--sec) 0;background:var(--paper)}
.bign-row{list-style:none;display:grid;grid-template-columns:repeat(4,1fr);gap:28px;margin-top:52px}
.bign-row .num{display:block;font:800 clamp(4.4rem,3rem + 4vw,7.5rem)/.85 var(--display);color:transparent;-webkit-text-stroke:1.5px var(--b1)}
.bign-row h3{margin-top:18px;font:800 1.5rem/1.05 var(--display);text-transform:uppercase}
.bign-row p{margin-top:10px;color:var(--mut);font-size:.94rem}
.bign-film{position:relative;margin-top:56px;aspect-ratio:21/8;overflow:hidden;border-radius:4px;background:#000}
.bign-film video{width:100%;height:100%;object-fit:cover;opacity:.8}
.bign-film .btn{position:absolute;left:28px;bottom:28px}

/* reviews: giant type */
.gq{padding:var(--sec) 0;background:var(--mist)}
.gq-top{display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap}
.gq blockquote{margin-top:28px;font:800 clamp(2rem,1.2rem + 3.2vw,4.4rem)/1 var(--display);text-transform:uppercase;letter-spacing:-.005em}
.gq blockquote em{font-style:normal;color:var(--b1)}
.gq-who{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-top:32px}
.gq-who .av{width:46px;height:46px;border-radius:50%;background:var(--b1);color:#08090b;display:grid;place-items:center;font-weight:800}
.gq-who b{display:block}
.gq-who small{color:var(--mut)}
.gq-who .link{margin-left:18px}
.gchip{display:inline-flex;align-items:center;gap:8px;padding:10px 16px;border:1px solid var(--line);border-radius:4px;color:var(--mut);font-size:.9rem;background:#181b21}
.gchip svg{width:18px;height:18px;background:#fff;border-radius:50%;padding:2px;box-sizing:content-box}
.gchip b{color:var(--txt)}
.gchip .stars{color:#fbbc04}

@media(max-width:1080px){
  .bign-row{grid-template-columns:repeat(2,1fr);gap:40px 28px}
  .st-grid{grid-template-columns:repeat(2,1fr);gap:32px 0}
  .st:nth-child(3){border-left:0;padding-left:0}
}
@media(max-width:860px){
  .rows-head{grid-template-columns:1fr}
  .rows-head .lede{justify-self:start}
  .rlist a{grid-template-columns:1fr 84px;gap:4px 16px;padding:18px 0}
  .rlist .n{grid-column:1/-1;font-size:.8rem}
  .rlist .t{grid-column:1}
  .rlist .d{grid-column:1;font-size:.88rem}
  .rlist img{display:block;grid-column:2;grid-row:2/4;width:84px;height:84px;object-fit:cover;border-radius:4px}
  .rlist .ar{display:none}
  .rlist a:hover{padding-left:0}
  .rfloat{display:none}
  .bign-film{aspect-ratio:16/10}
  .gq-who .link{margin-left:0}
}
@media(max-width:560px){
  .bign-row{grid-template-columns:1fr 1fr;gap:28px 16px}
  .bign-row h3{font-size:1.15rem}
  .bign-row p{font-size:.86rem}
  .st{padding:0 14px}
  .st b{font-size:2.8rem}
  .st>span{font-size:.8rem}
  .st-lic{font-size:.64rem;gap:6px 16px}
  .gq blockquote{font-size:1.9rem}
}

/* the trust tiles no longer overlap the hero (stats band replaced them), so drop the space kept for them */
.hero-bold .shell{padding-bottom:72px}
@media(max-width:860px){.hero-bold .shell{padding-bottom:44px}}