/* Solarae — shared styles for service pages (header, footer, service content) */
:root{
  --gold:#D29A4E; --gold-d:#B07A2E; --navy:#101C2E; --navy-2:#16263B;
  --cream:#F5F3EE; --ink:#1c2433; --muted:#5b5750; --line:#E2DDD3;
  --accent:var(--gold);
}
*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
html{scroll-behavior:smooth;scroll-padding-top:76px;}
body{background:var(--cream);color:var(--ink);font-family:Inter,-apple-system,BlinkMacSystemFont,sans-serif;overflow-x:hidden;}
a{color:inherit;}
.container{max-width:1040px;margin:0 auto;padding:0 clamp(18px,5vw,56px);}

/* ---- reserve space for JS-rendered regions ----
   The header/footer are injected and the main content arrives from a fetch, so
   without a reserved height the first paint puts the footer right under the
   header and the whole page jumps down once the content lands. The header
   values match its real height on both sides of the nav breakpoint. */
#site-header{min-height:65px;}
#svc-root{min-height:calc(100vh - 65px);}
@media(max-width:1080px){
  #site-header{min-height:71px;}
  #svc-root{min-height:calc(100vh - 71px);}
}

/* ---- burger + mobile menu (shared with home) ---- */
.burger{display:none;flex-direction:column;justify-content:center;gap:5px;width:44px;height:44px;border:none;background:none;cursor:pointer;padding:11px;flex:none;}
.burger span{display:block;height:2.5px;width:100%;background:var(--navy);border-radius:2px;transition:transform .3s,opacity .3s;}
.burger.is-open span:nth-child(1){transform:translateY(7.5px) rotate(45deg);}
.burger.is-open span:nth-child(2){opacity:0;}
.burger.is-open span:nth-child(3){transform:translateY(-7.5px) rotate(-45deg);}
.mobile-menu{display:none;flex-direction:column;padding:6px clamp(18px,5vw,56px) 20px;background:rgba(245,243,238,.98);border-top:1px solid rgba(28,36,51,.09);}
.mobile-menu a{padding:13px 2px;font:600 15px Inter;color:#3a4250;text-decoration:none;border-bottom:1px solid rgba(28,36,51,.07);}
.mobile-menu .mm-phone{color:var(--navy);font-weight:700;border-bottom:none;padding-top:16px;}
.mobile-menu .mm-cta{margin-top:12px;background:var(--accent);color:#1a1204;text-align:center;border-radius:10px;border-bottom:none;font-weight:700;padding:14px;box-shadow:0 4px 14px rgba(210,154,78,.35);}
@media(max-width:1080px){
  .nav-desktop{display:none!important;}
  .actions-desktop{display:none!important;}
  .burger{display:flex!important;}
  .mobile-menu.open{display:flex;}
}

/* ---- buttons ---- */
.btn-primary{display:inline-block;background:var(--accent);color:#1a1204;font:700 15px Inter;text-decoration:none;padding:15px 26px;border-radius:11px;box-shadow:0 8px 22px rgba(210,154,78,.4);border:none;cursor:pointer;}
.btn-dark{display:inline-block;background:var(--navy);color:var(--cream);font:700 14px Inter;text-decoration:none;padding:15px 26px;border-radius:11px;}

/* ---- service page ---- */
.eyebrow{font:700 12px ui-monospace,monospace;letter-spacing:2.5px;text-transform:uppercase;color:var(--gold-d);}
.crumb{display:inline-flex;align-items:center;gap:6px;font:600 13px Inter;color:#7a756c;text-decoration:none;margin-bottom:22px;}
.crumb:hover{color:var(--navy);}

.svc-hero{background:var(--cream);padding:clamp(34px,5vw,64px) 0 clamp(22px,3vw,34px);}
.svc-hero h1{font:800 clamp(30px,4.4vw,52px)/1.06 Archivo;letter-spacing:-.8px;color:var(--navy);margin:14px 0 18px;text-wrap:balance;}
.svc-hero .intro{font:400 clamp(16px,1.5vw,18px)/1.65 Inter;color:var(--muted);max-width:700px;margin:0;text-wrap:pretty;}

.svc-section{padding:clamp(34px,5vw,60px) 0;border-top:1px solid var(--line);}
.svc-section:first-of-type{border-top:none;}
.svc-section h2{font:800 clamp(22px,3vw,32px)/1.1 Archivo;letter-spacing:-.4px;color:var(--navy);margin:0 0 clamp(18px,3vw,28px);}

.groups{display:flex;flex-direction:column;gap:14px;}
.svc-group{background:#fff;border:1px solid var(--line);border-radius:16px;padding:24px 26px;}
.svc-group h3{font:700 19px Archivo;color:var(--navy);margin:0 0 8px;}
.svc-group>p{font:400 14.5px/1.65 Inter;color:var(--muted);margin:0;}
.svc-group ul{margin:16px 0 0;padding:0;list-style:none;display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:9px 24px;}
.svc-group li{font:400 13.5px/1.45 Inter;color:#3a4250;padding-left:20px;position:relative;}
.svc-group li::before{content:"";position:absolute;left:0;top:7px;width:7px;height:7px;border-radius:2px;background:var(--gold);}

.checklist{margin:0;padding:0;list-style:none;display:grid;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));gap:13px 26px;}
.checklist li{font:400 15px/1.55 Inter;color:#3a4250;padding-left:28px;position:relative;}
.checklist li::before{content:"\2713";position:absolute;left:0;top:0;color:var(--gold-d);font-weight:700;}

.steps{list-style:none;margin:0;padding:0;counter-reset:s;display:flex;flex-direction:column;gap:14px;}
.steps li{position:relative;padding-left:58px;font:400 15px/1.55 Inter;color:#3a4250;counter-increment:s;display:flex;align-items:center;min-height:44px;}
.steps li::before{content:counter(s,decimal-leading-zero);position:absolute;left:0;top:0;width:44px;height:44px;border-radius:11px;background:var(--navy);color:var(--gold);font:800 15px Archivo;display:flex;align-items:center;justify-content:center;}

.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:16px;}
.benefit{background:#fff;border:1px solid var(--line);border-radius:16px;padding:24px;}
.benefit h3{font:700 17px Archivo;color:var(--navy);margin:0 0 8px;}
.benefit p{font:400 14px/1.6 Inter;color:var(--muted);margin:0;}

.chips{display:flex;flex-wrap:wrap;gap:10px;}
.chip{font:600 13px Inter;color:var(--navy);background:#fff;border:1px solid var(--line);border-radius:100px;padding:8px 16px;}

.prose p{font:400 15.5px/1.7 Inter;color:var(--muted);max-width:740px;margin:0;}

/* ---- project gallery ---- */
.gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:14px;}
.shot{position:relative;display:block;width:100%;padding:0;margin:0;border:1px solid var(--line);border-radius:14px;overflow:hidden;background:var(--navy);cursor:zoom-in;font:inherit;text-align:left;-webkit-appearance:none;appearance:none;}
.shot img{display:block;width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;transition:transform .55s cubic-bezier(.2,.7,.3,1);}
.shot:hover img,.shot:focus-visible img{transform:scale(1.045);}
.shot-cap{position:absolute;left:0;right:0;bottom:0;padding:30px 14px 12px;font:500 12.5px/1.45 Inter;color:#fff;background:linear-gradient(rgba(11,21,36,0),rgba(11,21,36,.86));pointer-events:none;}
.shot:focus-visible{outline:3px solid var(--gold);outline-offset:3px;}
@media(prefers-reduced-motion:reduce){.shot img{transition:none;}.shot:hover img,.shot:focus-visible img{transform:none;}}

/* ---- lightbox ---- */
body.lb-open{overflow:hidden;}
.lightbox{position:fixed;inset:0;z-index:200;background:rgba(8,14,24,.93);display:flex;align-items:center;justify-content:center;padding:clamp(14px,4vw,48px);}
.lightbox[hidden]{display:none;}
.lb-figure{margin:0;max-width:1440px;width:100%;display:flex;flex-direction:column;align-items:center;gap:14px;}
.lb-figure img{max-width:100%;max-height:78vh;width:auto;height:auto;border-radius:12px;box-shadow:0 24px 60px rgba(0,0,0,.5);}
.lb-figure figcaption{font:500 13.5px/1.5 Inter;color:#C9CFDA;text-align:center;max-width:640px;text-wrap:pretty;}
.lb-btn{position:absolute;border:none;background:rgba(245,243,238,.1);color:#F5F3EE;cursor:pointer;border-radius:50%;width:46px;height:46px;font:400 26px/1 Inter;display:flex;align-items:center;justify-content:center;transition:background .2s;}
.lb-btn:hover{background:rgba(245,243,238,.22);}
.lb-btn:focus-visible{outline:3px solid var(--gold);outline-offset:3px;}
.lb-btn[hidden]{display:none;}
.lb-close{top:clamp(12px,3vw,26px);right:clamp(12px,3vw,26px);}
.lb-prev{left:clamp(8px,2vw,26px);top:50%;transform:translateY(-50%);}
.lb-next{right:clamp(8px,2vw,26px);top:50%;transform:translateY(-50%);}
@media(max-width:640px){
  .lb-prev{left:10px;}
  .lb-next{right:10px;}
  .lb-figure img{max-height:66vh;}
}

/* ---- CTA band ---- */
.cta-band{background:var(--navy);color:var(--cream);}
.cta-inner{max-width:1040px;margin:0 auto;padding:clamp(40px,5vw,64px) clamp(18px,5vw,56px);display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:22px;}
.cta-inner h2{font:800 clamp(24px,3vw,34px)/1.1 Archivo;color:#fff;margin:0;max-width:560px;text-wrap:balance;}
.cta-inner p{font:400 14.5px/1.6 Inter;color:#A9B0BD;margin:8px 0 0;max-width:520px;}