/* ============================================================
   Maude Electrical — pitch demo
   Dark, lighting-led. OKLCH tokens. Rolling (scroll-scrubbed) motion.
   ============================================================ */

:root{
  /* base */
  --ink:      oklch(0.15 0.012 255);
  --ink-1:    oklch(0.185 0.013 255);
  --ink-2:    oklch(0.105 0.011 255);
  --paper:    oklch(0.965 0.008 90);
  --muted:    oklch(0.70 0.014 255);
  --muted-2:  oklch(0.56 0.013 255);
  --line:     oklch(1 0 0 / 0.10);
  --line-2:   oklch(1 0 0 / 0.16);

  /* warm light-glow accent (the "switched-on" colour) */
  --glow:     oklch(0.84 0.125 78);
  --glow-hot: oklch(0.91 0.10 88);
  --glow-dim: oklch(0.84 0.125 78 / 0.16);

  /* solar band only — cool electric blue */
  --sky:      oklch(0.74 0.13 230);
  --sky-deep: oklch(0.30 0.07 245);

  --maxw: 1240px;
  --gutter: clamp(1.25rem, 5vw, 4rem);
  --r: 16px;

  --ff-display: "Inter Tight", "Helvetica Neue", Inter, system-ui, sans-serif;
  --ff-body: Inter, "Helvetica Neue", system-ui, sans-serif;
}

*{box-sizing:border-box; margin:0; padding:0}
html{scroll-behavior:smooth; -webkit-text-size-adjust:100%}
/* max scroll lock — phase 1: kill native scroll + touch momentum so a fast
   flick can't overshoot the reveal (scroll-lock.js adds/removes this class). */
html.scroll-locked, html.scroll-locked body{
  overflow:hidden; touch-action:none; overscroll-behavior:none;
}
body{
  background:var(--ink); color:var(--paper);
  font-family:var(--ff-body); font-size:17px; line-height:1.6;
  font-weight:400; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img{display:block; max-width:100%}
a{color:inherit; text-decoration:none}
::selection{background:var(--glow); color:var(--ink)}

.wrap{max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gutter)}
.eyebrow{
  font-size:.78rem; letter-spacing:.34em; text-transform:uppercase;
  color:var(--glow); font-weight:600;
}
.display{
  font-family:var(--ff-display); font-weight:300; line-height:1.0;
  letter-spacing:-.022em; text-wrap:balance;
}
.display b{font-weight:600; color:var(--glow-hot)}
h2.display{font-size:clamp(2rem, 5vw, 3.6rem)}
.lede{color:var(--muted); font-weight:300; font-size:clamp(1.05rem,1.7vw,1.32rem); line-height:1.5; max-width:46ch}
.section{padding-block:clamp(4.5rem, 11vh, 9rem)}
.section-head{max-width:62ch; margin-bottom:clamp(2.2rem,4vw,3.4rem)}
.section-head .eyebrow{display:block; margin-bottom:1rem}

/* reveal + parallax are JS-driven (continuous, in AND out of view).
   html.js pre-hides so there's no flash; no-JS shows everything; .reduced settles. */
.reveal{will-change:opacity, transform}
html.js .reveal{opacity:0; transform:translateY(46px)}

/* ---------------- nav ---------------- */
.nav{
  position:fixed; inset:0 0 auto 0; z-index:50;
  display:flex; align-items:center; justify-content:space-between;
  padding:1.05rem var(--gutter); gap:1rem;
  transition:background .4s, backdrop-filter .4s, border-color .4s, padding .4s;
  border-bottom:1px solid transparent;
}
.nav.solid{
  background:oklch(0.12 0.011 255 / 0.78); backdrop-filter:blur(14px) saturate(1.2);
  border-bottom-color:var(--line); padding-block:.7rem;
}
.brand{display:flex; align-items:center; gap:.6rem; font-family:var(--ff-display); font-weight:600; letter-spacing:-.01em; font-size:1.06rem}
.brand .dot{width:9px; height:9px; border-radius:50%; background:var(--glow); box-shadow:0 0 0 0 var(--glow); animation:pulse 3s ease-in-out infinite}
@keyframes pulse{0%,100%{box-shadow:0 0 0 0 var(--glow-dim)}50%{box-shadow:0 0 0 7px transparent}}
.nav-links{display:flex; gap:2rem; align-items:center}
.nav-links a{font-size:.92rem; color:var(--muted); transition:color .2s}
.nav-links a:hover{color:var(--paper)}
.nav-cta{display:flex; align-items:center; gap:.9rem}

.btn{
  display:inline-flex; align-items:center; gap:.5rem;
  font-size:.95rem; font-weight:500; letter-spacing:.01em;
  padding:.8rem 1.4rem; border-radius:999px; border:1px solid var(--line-2);
  color:var(--paper); background:transparent; cursor:pointer;
  transition:border-color .2s, background .2s, color .2s, transform .2s;
}
.btn:hover{border-color:var(--glow); transform:translateY(-1px)}
.btn.solid{background:var(--glow); color:var(--ink); border-color:var(--glow); font-weight:600}
.btn.solid:hover{background:var(--glow-hot); border-color:var(--glow-hot)}
.btn.sky{background:var(--sky); color:var(--ink-2); border-color:var(--sky); font-weight:600}
.btn svg{width:16px; height:16px}

/* ---------------- hero (lights on) ---------------- */
.hero{position:relative}
/* one-screen hero — the reveal is gesture-driven (scroll-lock.js), NOT a scroll scrub,
   so there's no 150vh scrub zone. After the reveal the hero is pinned lit and simply
   scrolls away as a normal section; the content sits directly below. */
.hero .scrollzone{height:100vh; position:relative}
.hero .stage{position:sticky; top:0; height:100vh; overflow:hidden; display:grid; place-items:center}
.hero .photo{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  will-change:filter, transform; transform:scale(1.08);
}
.hero .bloom{
  position:absolute; inset:0; pointer-events:none; mix-blend-mode:screen; opacity:0;
  background:radial-gradient(58% 42% at 50% 33%, color-mix(in oklab, var(--glow) 80%, transparent) 0%, transparent 62%);
  will-change:opacity;
}
/* scrim so white copy reads over the bright ceiling (the B fix) */
.hero .scrim{
  position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(120% 80% at 50% 64%, oklch(0.06 0.01 255 / .72) 0%, transparent 58%),
    linear-gradient(to top, oklch(0.06 0.01 255 / .55), transparent 38%);
}
.hero .vignette{position:absolute; inset:0; pointer-events:none; box-shadow:inset 0 0 240px 40px oklch(0.05 0.01 255 / .7)}
.hero-copy{position:relative; z-index:3; text-align:center; padding-inline:var(--gutter); opacity:0; transform:translateY(20px); will-change:opacity, transform}
.hero-copy .eyebrow{display:block; margin-bottom:1.5rem}
.hero h1{font-family:var(--ff-display); font-weight:300; letter-spacing:-.025em; line-height:.98; font-size:clamp(2.6rem, 7.4vw, 6.4rem); text-wrap:balance}
.hero h1 b{font-weight:600; color:var(--glow-hot)}
.hero-copy .sub{margin-top:1.6rem; color:var(--paper); opacity:.84; font-weight:300; font-size:clamp(1.05rem,1.8vw,1.3rem)}
.hero-copy .cta-row{margin-top:2.5rem; display:flex; gap:.9rem; justify-content:center; flex-wrap:wrap}
.scrollhint{
  position:fixed; bottom:30px; left:50%; transform:translateX(-50%); z-index:40;
  display:flex; flex-direction:column; align-items:center; gap:.55rem; text-align:center;
  opacity:0; transition:opacity .5s; pointer-events:none;
}
.scrollhint .txt{
  font-size:clamp(.82rem,1.5vw,.98rem); letter-spacing:.24em; text-transform:uppercase;
  color:var(--glow); font-weight:600;
  text-shadow:0 0 26px color-mix(in oklab, var(--glow) 65%, transparent);
}
.scrollhint .txt b{color:var(--glow-hot)}
.scrollhint .chev{width:24px; height:24px; color:var(--glow); animation:nudge 1.5s ease-in-out infinite; filter:drop-shadow(0 0 10px color-mix(in oklab, var(--glow) 60%, transparent))}
@keyframes nudge{0%,100%{transform:translateY(0); opacity:.65}50%{transform:translateY(7px); opacity:1}}

/* ---------------- trust strip ---------------- */
.trust{border-block:1px solid var(--line); background:var(--ink-2)}
.trust .wrap{display:flex; flex-wrap:wrap; align-items:center; gap:clamp(1.4rem,4vw,3.4rem); padding-block:1.6rem}
.trust .stat{display:flex; align-items:center; gap:.7rem}
.trust .big{font-family:var(--ff-display); font-size:1.7rem; font-weight:600; line-height:1}
.trust .stars{color:var(--glow); letter-spacing:.1em; font-size:1rem}
.trust .k{color:var(--muted); font-size:.92rem}
.trust .sep{flex:1; min-width:20px; height:1px; background:var(--line)}

/* ---------------- services (asymmetric bento) ---------------- */
.svc-grid{display:grid; grid-template-columns:repeat(6,1fr); gap:1rem}
.card{
  position:relative; border:1px solid var(--line); border-radius:var(--r); background:var(--ink-1);
  padding:1.6rem; overflow:hidden; transition:border-color .3s, transform .3s, background .3s;
  display:flex; flex-direction:column; min-height:200px;
}
.card:hover{border-color:var(--line-2); transform:translateY(-3px)}
.card .ico{width:30px; height:30px; color:var(--glow); margin-bottom:auto}
.card h3{font-family:var(--ff-display); font-weight:500; font-size:1.3rem; margin-top:1.2rem; letter-spacing:-.01em}
.card p{color:var(--muted); font-size:.96rem; margin-top:.45rem}
.card.feature{grid-column:span 4; min-height:340px; justify-content:flex-end; padding:0}
.card.feature .ph{position:absolute; inset:0}
.card.feature .ph img{width:100%; height:100%; object-fit:cover; filter:brightness(.62) saturate(.95)}
.card.feature .ph::after{content:""; position:absolute; inset:0; background:linear-gradient(to top, oklch(0.08 0.01 255 / .94) 8%, transparent 70%)}
.card.feature .inner{position:relative; z-index:2; padding:1.9rem}
.card.feature h3{font-size:1.7rem}
.card.feature p{max-width:42ch; font-size:1.02rem}
.card.tall{grid-column:span 2; min-height:340px}
.card.span2{grid-column:span 2}
.card.span3{grid-column:span 3}
.card.span4{grid-column:span 4}
.card .glowline{position:absolute; left:0; right:0; bottom:0; height:2px; background:linear-gradient(90deg, transparent, var(--glow), transparent); opacity:0; transition:opacity .35s}
.card:hover .glowline{opacity:.85}

/* ---------------- work gallery (editorial, varied) ---------------- */
.gal{
  display:grid; grid-template-columns:repeat(6,1fr); grid-template-rows:repeat(4,13vw); gap:1rem;
  grid-template-areas:
    "a a b b b b"
    "a a b b b b"
    "c c d d e e"
    "c c d d e e";
}
.shot{position:relative; overflow:hidden; border-radius:var(--r); background:var(--ink-2)}
.shot img{position:absolute; inset:-9% 0; width:100%; height:118%; object-fit:cover; will-change:transform}
.shot:hover img{filter:brightness(1.08)}
.shot figcaption{
  position:absolute; left:0; right:0; bottom:0; z-index:2; padding:1.4rem 1.3rem .95rem;
  font-size:.86rem; color:var(--paper);
  background:linear-gradient(to top, oklch(0.06 0.01 255 / .92), transparent);
  opacity:0; transform:translateY(8px); transition:opacity .35s, transform .35s;
}
.shot figcaption b{font-weight:600; color:var(--glow)}
.shot:hover figcaption{opacity:1; transform:none}
.shot.a{grid-area:a} .shot.b{grid-area:b} .shot.c{grid-area:c} .shot.d{grid-area:d} .shot.e{grid-area:e}

/* ---------------- solar band (cool contrast) ---------------- */
.solar{position:relative; background:
  linear-gradient(180deg, var(--ink) 0%, var(--sky-deep) 45%, var(--sky-deep) 100%);
  overflow:hidden}
.solar .wrap{position:relative; z-index:2; display:grid; grid-template-columns:1.1fr 1fr; gap:clamp(2rem,5vw,4.5rem); align-items:center}
.solar .copy .eyebrow{color:var(--sky); display:block; margin-bottom:1rem}
.solar h2 b{color:oklch(0.92 0.06 230)}
.solar ul{list-style:none; margin-top:1.8rem; display:grid; gap:.9rem}
.solar li{display:flex; gap:.8rem; align-items:flex-start; color:var(--paper); opacity:.92}
.solar li svg{width:20px; height:20px; color:var(--sky); flex:none; margin-top:2px}
.solar .photos{display:grid; grid-template-columns:1fr 1fr; gap:1rem}
.solar .photos img{border-radius:var(--r); width:100%; aspect-ratio:4/3; object-fit:cover; object-position:center; border:1px solid oklch(1 0 0 / .14)}
.solar .actions{margin-top:2rem; display:flex; gap:.8rem; flex-wrap:wrap}

/* ---------------- reviews ---------------- */
.reviews .head-row{display:flex; justify-content:space-between; align-items:flex-end; flex-wrap:wrap; gap:1rem; margin-bottom:2.6rem}
.score{display:flex; align-items:baseline; gap:.7rem}
.score .n{font-family:var(--ff-display); font-size:3.4rem; font-weight:600; line-height:1}
.score .stars{color:var(--glow); font-size:1.2rem; letter-spacing:.08em}
.score .k{color:var(--muted); font-size:.95rem}
.tags{display:flex; flex-wrap:wrap; gap:.55rem; margin-bottom:2.4rem}
.tag{font-size:.82rem; color:var(--muted); border:1px solid var(--line); border-radius:999px; padding:.4rem .85rem}
.tag b{color:var(--glow); font-weight:600}
.quotes{display:grid; grid-template-columns:1fr 1fr; gap:1.2rem}
.quote{border:1px solid var(--line); border-radius:var(--r); padding:1.8rem; background:var(--ink-1)}
.quote .stars{color:var(--glow); letter-spacing:.1em; font-size:.95rem}
.quote blockquote{font-family:var(--ff-display); font-weight:300; font-size:1.22rem; line-height:1.4; margin:.9rem 0 1.2rem; letter-spacing:-.01em}
.quote .who{display:flex; align-items:center; gap:.7rem; color:var(--muted); font-size:.9rem}
.quote .av{width:34px; height:34px; border-radius:50%; background:var(--glow-dim); color:var(--glow); display:grid; place-items:center; font-weight:600; font-size:.9rem}
.quote .reply{margin-top:1.1rem; padding-left:1rem; border-left:2px solid var(--line-2); color:var(--muted-2); font-size:.9rem}

/* ---------------- contact ---------------- */
.contact{background:var(--ink-2); border-top:1px solid var(--line)}
.contact .wrap{display:grid; grid-template-columns:1.2fr 1fr; gap:clamp(2rem,5vw,4rem)}
.contact h2{margin-bottom:1.2rem}
.contact .lines{display:grid; gap:1.1rem; margin-top:.5rem}
.contact .row{display:flex; gap:.9rem; align-items:center}
.contact .row svg{width:20px; height:20px; color:var(--glow); flex:none}
.contact .row a, .contact .row span{font-size:1.05rem}
.contact .row .sub{color:var(--muted); font-size:.86rem; display:block}
.contact .panel{border:1px solid var(--line); border-radius:var(--r); padding:1.9rem; background:var(--ink-1); align-self:start}
.contact .panel h3{font-family:var(--ff-display); font-weight:500; font-size:1.35rem; margin-bottom:.5rem}
.contact .panel p{color:var(--muted); font-size:.96rem; margin-bottom:1.4rem}
.contact .big-actions{display:flex; flex-direction:column; gap:.7rem}
.contact .big-actions .btn{justify-content:center; padding-block:1rem; font-size:1rem}
.disclaimer{margin-top:1.4rem; color:var(--muted-2); font-size:.8rem; line-height:1.5}

/* ---------------- footer ---------------- */
footer{padding-block:2.4rem; border-top:1px solid var(--line)}
footer .wrap{display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:1rem; color:var(--muted); font-size:.86rem}
footer .brand{color:var(--paper)}
footer .credit{color:var(--muted-2)}
footer .credit b{color:var(--glow)}

/* ---------------- reduced-motion toggle ---------------- */
.rm-toggle{
  position:fixed; right:16px; bottom:16px; z-index:60;
  display:flex; align-items:center; gap:.5rem; font-size:.74rem; color:var(--muted);
  background:oklch(0.12 0.011 255 / .85); backdrop-filter:blur(8px);
  border:1px solid var(--line); border-radius:999px; padding:.5rem .8rem; cursor:pointer;
}
.rm-toggle:hover{border-color:var(--line-2); color:var(--paper)}
.rm-toggle .sw{width:30px; height:16px; border-radius:999px; background:var(--line-2); position:relative; transition:background .2s}
.rm-toggle .sw::after{content:""; position:absolute; top:2px; left:2px; width:12px; height:12px; border-radius:50%; background:var(--paper); transition:transform .2s}
body.reduced .rm-toggle .sw{background:var(--glow)}
body.reduced .rm-toggle .sw::after{transform:translateX(14px); background:var(--ink)}

/* reduced motion: settle everything, kill scrub/parallax */
body.reduced .reveal{opacity:1 !important; transform:none !important; transition:none !important}
body.reduced .hero .scrollzone{height:100vh !important}
body.reduced .hero-copy{opacity:1 !important; transform:none !important}
body.reduced .scrollhint{display:none !important}
body.reduced .shot img, body.reduced [data-px]{transform:none !important}

/* ---------------- responsive: mobile is its own layout ---------------- */
@media (max-width: 900px){
  body{font-size:16px}
  .nav-links{display:none}
  /* thinner nav: brand + phone on one row each */
  .nav{padding:.85rem 1.1rem}
  .brand{font-size:.95rem; white-space:nowrap; gap:.45rem}
  .brand .dot{width:7px; height:7px}
  .nav .btn.solid{padding:.5rem .85rem; font-size:.82rem; white-space:nowrap; gap:.35rem}
  .nav .btn svg{width:14px; height:14px}
  /* de-bloated, more readable hero copy */
  .hero h1{font-size:clamp(2.2rem, 9vw, 3rem)}
  .hero-copy .eyebrow{font-size:.68rem; letter-spacing:.18em; margin-bottom:1.1rem}
  .hero-copy .sub{font-size:1rem; max-width:30ch; margin-inline:auto}
  .hero .scrim{background:
    radial-gradient(135% 78% at 50% 56%, oklch(0.05 0.01 255 / .82) 0%, transparent 62%),
    linear-gradient(to top, oklch(0.05 0.01 255 / .72), transparent 46%);}
  .solar .wrap, .contact .wrap{grid-template-columns:1fr}
  .quotes{grid-template-columns:1fr}
  .svc-grid{grid-template-columns:repeat(2,1fr)}
  .card.feature{grid-column:span 2; min-height:300px}
  .card.tall, .card.span2, .card.span3, .card.span4{grid-column:span 2; min-height:170px}
  /* mobile gallery: simple in-flow single column, no parallax */
  .gal{grid-template-columns:1fr; grid-template-rows:none; grid-auto-rows:auto; grid-template-areas:none; gap:.8rem}
  .shot, .shot.a, .shot.b, .shot.c, .shot.d, .shot.e{grid-area:auto; aspect-ratio:auto}
  .shot img{position:static; inset:auto; width:100%; height:auto; transform:none !important}
  .shot figcaption{opacity:1; transform:none}
}
@media (max-width: 560px){
  /* hero zone unified to 150vh in the base rule */
  .trust .sep{display:none}
  .trust .wrap{gap:1.1rem 1.6rem}
  .svc-grid{grid-template-columns:1fr}
  .card.feature,.card.tall,.card.span2,.card.span3,.card.span4,.card{grid-column:span 1}
  /* gallery already single-column from the 900px rule */
  .score .n{font-size:2.6rem}
}