/* South County Window Cleaning - shared styles (3-page build, 2026-08-27) */
:root{
  --black:#0a0d12; --coal:#0f141c; --panel:#141a24; --line:#222c3a;
  --blue:#2f8df5; --blue-d:#1f6cc9; --ice:#ecf4fd; --mist:#b9c9da; --dim:#8296ab;
  --ease:cubic-bezier(.33,.02,.2,1);
}
*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth; -webkit-text-size-adjust:100%;}
html,body{overflow-x:clip;}
body{background:var(--black); color:var(--ice); font-family:'Inter','Segoe UI',system-ui,sans-serif; line-height:1.6; font-size:16.5px;}
h1,h2,h3{font-family:'Sora','Segoe UI',system-ui,sans-serif;}
img{max-width:100%; height:auto; display:block;}
::selection{background:var(--blue); color:#fff;}

/* Click to expand (2026-08-27, Andre's spec, standing pattern for every build).
   Content photos display inside a uniform tile so pages stay tidy; clicking one opens
   the FULL uncropped photo here. Behaviour is auto-wired in shared.js. */
.zoomable{cursor:zoom-in;}
/* The "tap to enlarge" affordance. These MUST live here, not in one page's inline style,
   or the badge renders as bare text under the photo on every other page (2026-08-29). */
.taphint{display:flex; align-items:center; gap:9px; margin-top:14px; font-size:13.5px; color:var(--dim);}
.taphint svg{flex:none; stroke:var(--blue);}
figure.shot-fig{position:relative; margin:0;}
.shot-badge{position:absolute; top:10px; right:10px; z-index:3; display:flex; align-items:center; gap:6px;
  background:rgba(6,9,14,.74); border:1px solid rgba(185,201,218,.35); border-radius:999px;
  padding:7px 11px; color:#dbe7f4; font:600 10.5px/1 'Inter',sans-serif; letter-spacing:1.2px;
  text-transform:uppercase; pointer-events:none; transition:background .25s var(--ease);}
.shot-badge svg{flex:none;}
figure:hover > .shot-badge{background:rgba(31,108,201,.85);}
#lbox{position:fixed; inset:0; z-index:200; background:rgba(4,7,11,.94); display:none;
  align-items:center; justify-content:center; padding:clamp(16px,4vw,48px); opacity:0; transition:opacity .22s var(--ease);}
#lbox.open{display:flex;}
#lbox.shown{opacity:1;}
#lbox img{max-width:100%; max-height:84vh; width:auto; height:auto; object-fit:contain;
  border-radius:12px; box-shadow:0 30px 90px rgba(0,0,0,.7); transform:scale(.97); transition:transform .22s var(--ease);}
#lbox.shown img{transform:none;}
#lbox .cap{position:absolute; left:0; right:0; bottom:max(18px,3vh); text-align:center; color:#c9d8e8;
  font-size:13.5px; padding:0 24px; pointer-events:none;}
#lbox .x{position:absolute; top:16px; right:18px; width:44px; height:44px; border-radius:50%;
  background:rgba(236,244,253,.12); border:1px solid rgba(236,244,253,.3); color:#fff; font-size:22px; line-height:1;
  cursor:pointer; display:flex; align-items:center; justify-content:center;}
#lbox .x:hover{background:rgba(236,244,253,.2);}
#lbox img:focus-visible, .zoomable:focus-visible{outline:2px solid var(--blue); outline-offset:3px;}
@media(prefers-reduced-motion:reduce){ #lbox, #lbox img{transition:none;} }
.wrap{max-width:1100px; margin:0 auto; padding:0 22px;}
.eyebrow{font:600 12.5px/1 'Inter',sans-serif; letter-spacing:2.6px; text-transform:uppercase; color:var(--blue);}
section[id], div[id]{scroll-margin-top:124px;}

/* Page tabs: always-visible strip under the header so you always know which page
   you're on (2026-08-27 QoL). The active tab glows. */
.pagetabs{position:sticky; top:64px; z-index:40; background:rgba(10,13,18,.9); backdrop-filter:blur(8px); border-bottom:1px solid var(--line);}
.pagetabs .wrap{display:flex; gap:8px; padding:9px 22px; overflow-x:auto; scrollbar-width:none;}
.pagetabs .wrap::-webkit-scrollbar{display:none;}
.pagetabs a{font:600 12.5px/1 'Inter',sans-serif; color:var(--dim); padding:9px 14px; border-radius:999px; text-decoration:none; border:1px solid transparent; white-space:nowrap; transition:color .2s;}
.pagetabs a:hover{color:var(--ice);}
.pagetabs a.on{color:#fff; background:var(--panel); border-color:var(--blue); box-shadow:0 0 0 1px rgba(47,141,245,.28), 0 0 16px rgba(47,141,245,.22);}

.top{position:sticky; top:0; z-index:50; background:rgba(10,13,18,.92); border-bottom:1px solid var(--line); backdrop-filter:blur(8px); transition:box-shadow .3s;}
.top.scrolled{box-shadow:0 6px 24px rgba(0,0,0,.5);}
.top .wrap{display:flex; align-items:center; justify-content:space-between; height:64px; gap:12px;}
.logomark{height:46px; width:auto; display:inline-block; vertical-align:middle; margin-right:10px; background:#fff; border-radius:8px; padding:3px;}
@media(max-width:560px){ .logomark{height:36px; margin-right:7px;} }
.logo{display:flex; align-items:center; font-family:'Sora',sans-serif; font-weight:700; font-size:16px; color:var(--ice); text-decoration:none; letter-spacing:.4px; margin-right:auto;}
.logo em{font-style:normal; color:var(--blue);}
.cta{background:var(--blue); color:#fff; padding:10px 16px; border-radius:999px; text-decoration:none; font:600 14px/1 'Inter',sans-serif; white-space:nowrap;}

/* Hamburger: three lines, the middle one blue; weaves into an X when open. */
.nav-toggle{display:block; background:none; border:none; cursor:pointer; padding:10px 8px; order:-1;}
.nav-toggle .l{stroke:var(--ice); stroke-width:2.4; stroke-linecap:round; transition:transform .35s var(--ease), opacity .3s var(--ease); transform-origin:center;}
.nav-toggle .l2{stroke:var(--blue);}
.nav-toggle[aria-expanded="true"] .l1{transform:translateY(7px) rotate(45deg);}
.nav-toggle[aria-expanded="true"] .l2{opacity:0; transform:scaleX(.2);}
.nav-toggle[aria-expanded="true"] .l3{transform:translateY(-7px) rotate(-45deg);}
#menu-scrim{position:fixed; inset:0; background:rgba(4,6,10,.55); z-index:65; opacity:0; pointer-events:none; transition:opacity .4s var(--ease);}
#menu-scrim.open{opacity:1; pointer-events:auto;}
#menu-panel{position:fixed; top:0; left:0; bottom:0; width:min(300px,84vw); background:var(--coal); border-right:1px solid var(--line);
  z-index:70; padding:84px 26px 26px; transform:translateX(-103%); transition:transform .45s var(--ease);}
#menu-panel.open{transform:translateX(0);}
#menu-panel a{display:block; padding:13px 2px; font:600 17px/1.3 'Sora','Segoe UI',sans-serif; color:var(--ice); text-decoration:none;
  border-bottom:1px solid var(--line); opacity:0; transform:translateX(-10px); transition:opacity .3s var(--ease), transform .3s var(--ease), color .2s;}
#menu-panel.open a{opacity:1; transform:none; transition-delay:.08s;}
#menu-panel a:hover{color:var(--blue);}
#menu-panel a.here{color:var(--blue);}
#menu-panel a.here::after{content:"you're here"; display:inline-block; margin-left:10px; vertical-align:middle;
  font:700 9.5px/1 'Inter',sans-serif; letter-spacing:1.2px; text-transform:uppercase; color:#5aa8ff;
  border:1px solid #2b4a74; padding:4px 8px; border-radius:999px;}
#menu-panel .sub{font:700 11px/1 'Inter',sans-serif; letter-spacing:2.2px; text-transform:uppercase; color:var(--dim); margin:24px 0 4px; border:none;}
#menu-panel .sub:first-child{margin-top:0;}
#menu-panel a.small{font-size:15px; color:var(--mist);}

/* Flair: the heading underlines are a living scroll gauge (2026-08-27, Andre's spec).
   They draw themselves in automatically on page load, then track scroll progress:
   the further down the page you are, the fuller every underline. Driven by the
   --uprog custom property set in shared.js; transform-only. */
.uline{width:max-content; max-width:100%;}
/* Grid text columns must be allowed to shrink below a uline heading's max-content
   width, or the heading column swallows the row and the photo column collapses. */
.band .wrap>*, .solar .wrap>*, .svcsec .wrap>*, .story .wrap>*{min-width:0;}
.hours .uline{margin-inline:auto;}
.uline::after{content:""; display:block; width:100%; height:3px; margin-top:14px; border-radius:2px;
  background:linear-gradient(90deg, var(--blue), rgba(47,141,245,.35)); transform:scaleX(var(--up,0)); transform-origin:left;
  transition:transform .16s linear;}
@media(prefers-reduced-motion:reduce){ .uline::after{transform:scaleX(1); transition:none;} }

.btn{display:inline-block; text-decoration:none; font:600 15.5px/1 'Inter',sans-serif; padding:15px 26px; border-radius:999px; transition:transform .2s var(--ease);}
.btn.solid{background:var(--blue); color:#fff; box-shadow:0 3px 0 var(--blue-d);}
.btn.solid:hover{transform:translateY(-2px);}
.btn.ghost{border:1.5px solid rgba(236,244,253,.55); color:var(--ice); margin-left:10px;}

section{padding:80px 0;}
section.alt{background:var(--coal); border-top:1px solid var(--line); border-bottom:1px solid var(--line);}
.sec-head{max-width:660px; margin-bottom:40px;}
.sec-head h2{font-size:clamp(28px,3.8vw,40px); line-height:1.1; margin-top:12px; color:#fff;}
.sec-head p{margin-top:14px; color:var(--dim);}

.cta-final .box{background:linear-gradient(120deg, #101724, #0d1c33); border:1px solid #24405f; border-radius:20px; padding:clamp(30px,5vw,54px); text-align:center;}
.cta-final h2{font-size:clamp(27px,3.8vw,40px); line-height:1.1; max-width:24ch; margin:0 auto 14px; color:#fff;}
.cta-final p{color:var(--mist); max-width:54ch; margin:0 auto 26px;}
.cta-final .alt2{margin-top:16px; font-size:14.5px; color:var(--dim);}
.cta-final .alt2 a{color:var(--blue); text-decoration:none;}

footer{background:#070a0f; color:var(--dim); padding:44px 0 38px; font-size:14px; border-top:1px solid var(--line);}
footer .wrap{display:grid; gap:8px;}
footer .lg{font-family:'Sora',sans-serif; font-weight:700; font-size:18px; color:var(--ice);}
footer a{color:var(--blue); text-decoration:none; overflow-wrap:anywhere;}
footer nav{display:flex; gap:16px; flex-wrap:wrap; margin-top:4px;}
.demobar{background:#05070b; color:#5d7085; text-align:center; font-size:12.5px; padding:12px 18px;}
.demobar a{color:var(--blue); text-decoration:none; font-weight:600;}

.rv{opacity:0; transform:translateY(22px); transition:opacity .7s var(--ease), transform .7s var(--ease);}
.rv.in{opacity:1; transform:none;}
@media(prefers-reduced-motion:reduce){ .rv{opacity:1; transform:none; transition:none;} html{scroll-behavior:auto;} }

/* Mobile flush laws */
@media(max-width:560px){
  .top .wrap{padding:10px 14px; gap:10px;}
  .logo{font-size:13.5px; min-width:0;}
  .cta{white-space:nowrap; font-size:13px; padding:9px 12px;}
  .hero .btn{display:block; width:max-content; max-width:100%; margin:0 0 14px;}
  .btn.ghost{margin-left:0;}
}