:root{--bg:#000;--ink:#f3f1ea;--muted:#8e9088;--line:rgba(255,255,255,.14);--dark:#0b0d0a;--accent:#d8ff45;--white:#fff;--font-sans:'Inter',Arial,Helvetica,sans-serif;--font-serif:'Fraunces','Iowan Old Style',Georgia,serif;--font-mono:'JetBrains Mono','SF Mono',Consolas,monospace}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--font-sans);overflow-x:hidden;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility;font-feature-settings:"ss01" 1,"cv11" 1}a{color:inherit;text-decoration:none}
h1,h2,h3{text-wrap:balance}.nav{position:fixed;z-index:50;top:0;left:0;width:100%;height:82px;padding:0 4vw;display:flex;align-items:center;justify-content:space-between;background:rgba(243,241,235,.78);backdrop-filter:blur(16px);border-bottom:1px solid rgba(0,0,0,.06)}.logo{font-size:23px;font-weight:800;letter-spacing:-1.5px}.logo span{font-size:9px;vertical-align:top}.nav nav{display:flex;gap:30px;font-size:13px}.nav nav a{position:relative}.nav nav a:after{content:"";position:absolute;left:0;bottom:-7px;width:0;height:1px;background:currentColor;transition:.35s}.nav nav a:hover:after,.nav nav .active:after{width:100%}.nav-cta{font-size:13px;font-weight:600}.nav-cta span,.button span{margin-left:18px}.menu{display:none;border:0;background:none;font-size:22px}.hero{min-height:100svh;position:relative;display:flex;align-items:center;padding:140px 8vw 80px;overflow:hidden;background:#e9e7df}.hero-grid{position:absolute;inset:0;background-image:linear-gradient(rgba(0,0,0,.055) 1px,transparent 1px),linear-gradient(90deg,rgba(0,0,0,.055) 1px,transparent 1px);background-size:90px 90px;mask-image:linear-gradient(to bottom,black,transparent)}.hero-copy{position:relative;z-index:2;max-width:760px}.eyebrow{font-family:var(--font-mono);font-size:10px;letter-spacing:2.5px;font-weight:500;color:var(--muted);margin:0 0 25px}.hero h1,.page-hero h1{font-size:clamp(55px,8vw,125px);line-height:.88;letter-spacing:-7px;margin:0;max-width:900px}.hero h1 em,.page-hero h1 em,h2 em,.big-quote em{font-family:var(--font-serif);font-weight:400;font-style:italic;letter-spacing:-2px}.lead{font-size:18px;line-height:1.6;color:#62635d;max-width:570px;margin:35px 0}.button{display:inline-flex;align-items:center;background:var(--ink);color:#fff;padding:17px 21px;font-size:12px;font-weight:700;border-radius:100px;transition:.35s}.button:hover{transform:translateY(-4px);background:#2a2d26}.solar-orbit{position:absolute;right:7vw;top:50%;width:min(40vw,520px);height:min(40vw,520px);transform:translateY(-50%);pointer-events:none}.sun{position:absolute;width:34%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle at 35% 30%,#fff 0 5%,#e9ff79 22%,#b2ce38 50%,#647120 100%);left:33%;top:33%;box-shadow:0 0 100px rgba(192,223,69,.5)}.orbit{position:absolute;border:1px solid rgba(20,20,15,.2);border-radius:50%;inset:12%;animation:spin 15s linear infinite}.orbit-b{inset:0;transform:rotate(55deg);animation-duration:22s}.orbit i{position:absolute;width:13px;height:13px;background:#171a14;border-radius:50%;right:5%;top:48%}.orbit-b i{left:5%;right:auto;background:#a8c738}@keyframes spin{to{transform:rotate(360deg)}}.scroll-hint{position:absolute;bottom:35px;left:8vw;font-family:var(--font-mono);font-size:9px;letter-spacing:2px}.scroll-hint span{font-size:18px;margin-left:12px}.section{padding:130px 8vw}.section-label{font-family:var(--font-mono);font-size:10px;letter-spacing:2.5px;color:var(--muted)}.statement{display:grid;grid-template-columns:25% 1fr}.statement-text{max-width:900px}.statement-text p{font-size:clamp(38px,5vw,72px);line-height:1.02;letter-spacing:-3px;margin:0}.statement-text strong{font-weight:500}.section-head{margin-bottom:65px}.section-head h2,.process-intro h2,.ev-copy h2,.cta h2{font-size:clamp(46px,6vw,90px);line-height:.95;letter-spacing:-4px;margin:0}.service-grid{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--line)}.service-card{min-height:380px;padding:28px 25px;border-right:1px solid var(--line);display:flex;flex-direction:column;position:relative;transition:.5s;overflow:hidden}.service-card:first-child{border-left:1px solid var(--line)}.service-card:hover{background:#e4e1d7;transform:translateY(-8px)}.service-card.dark{background:var(--dark);color:#fff}.service-card span,.process-item>span,.info-card>span{font-family:var(--font-mono);font-size:11px;color:var(--muted);letter-spacing:.5px}.service-card h3{font-size:28px;letter-spacing:-1.2px;margin-top:auto;margin-bottom:13px}.service-card p{font-size:13px;line-height:1.55;color:var(--muted);max-width:240px}.service-card b{position:absolute;right:24px;top:26px;font-size:25px;font-weight:400}.process{background:#e6e3da}.process-intro{margin:45px 0 75px;margin-left:25%}.process-list{border-top:1px solid var(--line)}.process-item{display:grid;grid-template-columns:10% 35% 1fr;align-items:center;padding:32px 0;border-bottom:1px solid var(--line);transition:.4s}.process-item:hover{padding-left:15px}.process-item h3{font-size:27px;letter-spacing:-1px;margin:0}.process-item p{font-size:13px;color:var(--muted);line-height:1.5;max-width:440px}.ev-feature{background:var(--dark);color:#fff;display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:10vw}.ev-visual{min-height:520px;display:grid;place-items:center}.charging-ring{width:min(34vw,400px);aspect-ratio:1;border-radius:50%;border:1px solid rgba(255,255,255,.25);display:grid;place-items:center;position:relative}.charging-ring:before,.charging-ring:after{content:"";position:absolute;border:1px solid rgba(216,255,69,.4);border-radius:50%;inset:12%;animation:pulse 3s infinite}.charging-ring:after{inset:25%;animation-delay:1s}.charging-ring div{width:120px;height:120px;border-radius:50%;display:grid;place-items:center;background:var(--accent);color:#101411;font-weight:800;font-size:24px}@keyframes pulse{50%{transform:scale(1.08);opacity:.2}}.ev-copy h2{margin-bottom:30px}.ev-copy p{color:#aeb0aa;line-height:1.7;max-width:510px}.text-link{display:inline-block;margin-top:25px;border-bottom:1px solid #777;padding-bottom:8px;font-size:13px}.cta{text-align:center;padding-top:170px;padding-bottom:170px}.cta .eyebrow{margin-bottom:25px}.cta h2{margin-bottom:45px}.page-hero{padding:200px 8vw 120px;background:#e9e7df;position:relative;overflow:hidden}
.page-hero .decor-orb{z-index:0}
.page-hero .eyebrow,.page-hero h1,.page-hero .lead{position:relative;z-index:1}.page-hero .lead{margin-left:25%;max-width:650px}.split{display:grid;grid-template-columns:25% 1fr}.split-copy{max-width:800px}.split-copy h2{font-size:clamp(48px,6vw,88px);line-height:.95;letter-spacing:-4px;margin:0 0 40px}.split-copy p{max-width:650px;color:var(--muted);line-height:1.7}.dark-panel{background:var(--dark);color:#fff}.big-quote{font-size:clamp(42px,6vw,85px);line-height:1;letter-spacing:-3px;max-width:1100px;margin-left:25%}.cards-3{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);padding-left:0;padding-right:0}.info-card{background:var(--bg);min-height:330px;padding:35px}.info-card h3{font-size:30px;margin-top:100px}.info-card p{font-size:14px;line-height:1.6;color:var(--muted);max-width:330px}.service-detail{display:grid;grid-template-columns:25% 1fr;border-top:1px solid var(--line)}.detail-num{font-family:var(--font-mono);font-size:13px;color:var(--muted)}.service-detail>div:nth-child(2){max-width:850px}.service-detail h2{font-size:clamp(45px,6vw,85px);line-height:.95;letter-spacing:-4px;margin:0 0 35px}.service-detail p{max-width:700px;color:var(--muted);line-height:1.7;font-size:15px}.ev-detail{background:var(--dark);color:#fff}.ev-detail p{color:#aeb0aa}
.ev-detail-body{display:grid;grid-template-columns:1fr 480px;gap:6vw;align-items:center}
.ev-illustration{width:100%;height:auto}
@media(max-width:1100px){.ev-detail-body{grid-template-columns:1fr}.ev-illustration{max-width:440px;margin-top:40px}}.contact-wrap{display:grid;grid-template-columns:1.4fr .7fr;gap:10vw}.contact-form{display:grid;grid-template-columns:1fr 1fr;gap:25px}.contact-form label{font-size:11px;font-weight:700;letter-spacing:.5px}.contact-form input,.contact-form select,.contact-form textarea{display:block;width:100%;margin-top:10px;border:0;border-bottom:1px solid #bbb8af;background:transparent;padding:14px 0;font:inherit;outline:none}.contact-form input:focus,.contact-form textarea:focus{border-color:#111}.contact-form .wide{grid-column:1/-1}.contact-form .button{border:0;width:max-content}.success{display:none;color:#4e6520;font-size:13px}.success.show{display:block}.contact-side{padding-top:10px}.contact-side h2{font-size:48px;line-height:.95;letter-spacing:-2px}.contact-side p{color:var(--muted);line-height:1.65;font-size:14px}.mini-line{height:1px;background:var(--line);margin:35px 0}footer{border-top:1px solid var(--line);padding:25px 4vw;display:flex;justify-content:space-between;font-family:var(--font-mono);font-size:10px;letter-spacing:1px;color:var(--muted)}.reveal{opacity:0;transform:translateY(35px);transition:opacity .8s ease,transform .8s cubic-bezier(.2,.7,.2,1)}.reveal.show{opacity:1;transform:none}@media(max-width:900px){.nav{height:70px}.nav nav,.nav-cta{display:none}.menu{display:block}.hero{padding:120px 6vw 80px}.hero h1,.page-hero h1{letter-spacing:-4px}.solar-orbit{opacity:.45;width:70vw;height:70vw;right:-20vw;top:58%}.section{padding:90px 6vw}.statement,.split,.service-detail{grid-template-columns:1fr}.statement-text,.process-intro,.big-quote{margin-left:0;margin-top:45px}.service-grid{grid-template-columns:1fr 1fr}.service-card{min-height:320px}.process-item{grid-template-columns:15% 1fr}.process-item p{grid-column:2}.ev-feature{grid-template-columns:1fr}.ev-visual{min-height:330px}.charging-ring{width:65vw}.page-hero{padding:150px 6vw 90px}.page-hero .lead{margin-left:0}.cards-3{grid-template-columns:1fr}.contact-wrap{grid-template-columns:1fr;gap:60px}}@media(max-width:560px){.hero h1,.page-hero h1{font-size:55px}.lead{font-size:15px}.service-grid{grid-template-columns:1fr}.service-card{min-height:270px}.process-item{grid-template-columns:40px 1fr}.process-item h3{font-size:21px}.process-item p{grid-column:2}.section-head h2,.process-intro h2,.ev-copy h2,.cta h2{letter-spacing:-2px}.contact-form{grid-template-columns:1fr}.contact-form .wide{grid-column:auto}.contact-form .button{width:100%;justify-content:center}.contact-side h2{font-size:40px}footer{flex-direction:column;gap:10px}.nav{padding:0 6vw}}
:root{--ease:cubic-bezier(.16,1,.3,1)}html{scroll-behavior:smooth}
.reveal{opacity:0;transform:translateY(42px) scale(.985);transition:opacity 1.1s var(--ease),transform 1.1s var(--ease);transition-delay:var(--d,0ms);will-change:transform,opacity}
.reveal.show{opacity:1;transform:none}
.progress-bar{position:fixed;top:0;left:0;height:2px;width:0%;background:linear-gradient(90deg,var(--accent),#a8c738);z-index:80;transition:width .08s linear}
.cursor-dot,.cursor-ring{position:fixed;top:0;left:0;pointer-events:none;z-index:90;border-radius:50%;transform:translate(-50%,-50%);will-change:transform}
.cursor-dot{width:6px;height:6px;background:var(--ink)}
.cursor-ring{width:34px;height:34px;border:1px solid rgba(17,18,15,.35);transition:width .3s var(--ease),height .3s var(--ease),border-color .3s var(--ease),opacity .3s}
.cursor-ring.big{width:64px;height:64px;border-color:var(--ink);background:rgba(216,255,69,.12)}
body.no-cursor .cursor-dot,body.no-cursor .cursor-ring{display:none}
@media(hover:none),(max-width:900px){.cursor-dot,.cursor-ring{display:none}}
.button,.nav-cta{transition:transform .5s var(--ease),background .4s var(--ease)}
.service-card,.process-item{transition:transform .6s var(--ease),background .5s var(--ease),padding .5s var(--ease)}
.hero-scene{position:absolute;inset:0;width:100%;height:100%;z-index:1;pointer-events:none}
.solar-orbit{display:none}
.ev-3d-wrap{position:relative;width:min(34vw,400px);aspect-ratio:1;margin:0 auto}
.ev-scene{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.ev-badge{position:absolute;inset:0;margin:auto;width:118px;height:118px;border-radius:50%;display:grid;place-items:center;background:var(--accent);color:#101411;font-weight:800;font-size:23px;box-shadow:0 0 70px rgba(216,255,69,.45);pointer-events:none}
.ev-hint{text-align:center;margin-top:18px;font-family:var(--font-mono);font-size:10px;letter-spacing:2px;color:#8b8d86;text-transform:uppercase}
.decor-orb{position:absolute;right:4vw;top:50%;transform:translateY(-50%);width:min(28vw,340px);aspect-ratio:1;opacity:.5;pointer-events:none;z-index:0}
.dark-panel{position:relative;overflow:hidden}
.big-quote{position:relative;z-index:1}
@media(max-width:900px){.ev-3d-wrap{width:65vw}.decor-orb{display:none}}
@media(prefers-reduced-motion:reduce){.reveal{transition:opacity .4s linear!important;transform:none!important}.cursor-dot,.cursor-ring{display:none}}

/* ---------- Scroll-linked storytelling ---------- */
.hero-copy,.hero-scene,.hero-grid{transition:opacity .15s linear,transform .15s linear}
.hero-copy.reveal.show{transition:opacity .15s linear,transform .15s linear}
.hero{will-change:auto}

.energy-flow{overflow-x:hidden}
.flow-diagram{padding-top:70px}
.flow-track{position:relative;height:2px;background:var(--line);margin:0 3%}
.flow-track-fill{position:absolute;top:0;left:0;height:100%;width:0%;background:linear-gradient(90deg,var(--accent),#a8c738);transition:width .12s linear}
.flow-row{display:flex;justify-content:space-between;margin:0 3%;position:relative;top:-13px}
.flow-node{display:flex;flex-direction:column;align-items:center;gap:16px;width:110px;opacity:.28;transform:translateY(18px);transition:opacity .6s var(--ease),transform .6s var(--ease)}
.flow-node.active{opacity:1;transform:translateY(0)}
.flow-icon{width:26px;height:26px;border-radius:50%;background:var(--bg);border:2px solid var(--line);display:grid;place-items:center;color:var(--ink);transition:background .4s var(--ease),border-color .4s var(--ease),box-shadow .4s var(--ease),transform .4s var(--ease)}
.flow-icon svg{width:15px;height:15px}
.flow-node.active .flow-icon{background:var(--accent);border-color:var(--accent);box-shadow:0 0 22px rgba(216,255,69,.55);transform:scale(1.08);color:#101411}
.flow-node p{font-family:var(--font-mono);font-size:11px;color:var(--muted);text-align:center;margin:0;letter-spacing:.3px}
@media(max-width:900px){.flow-row{flex-wrap:wrap;gap:30px 0;top:0}.flow-track{display:none}.flow-node{width:33%}}

.process-list{position:relative}
.process-track{position:absolute;left:3.2%;top:6px;bottom:6px;width:1px;background:var(--line)}
.process-track-fill{position:absolute;top:0;left:0;width:100%;height:0%;background:linear-gradient(180deg,var(--accent),#a8c738);transition:height .12s linear}
.process-item{opacity:.35;transform:translateX(0);transition:opacity .5s var(--ease),padding .5s var(--ease),background .4s var(--ease)}
.process-item.active{opacity:1}
.process-item.active span{color:var(--ink)}
.process-item.active:hover{padding-left:15px}
@media(max-width:900px){.process-track{display:none}}

/* ---------- Lusion-inspired VFX layer ---------- */
.grain-overlay{position:fixed;inset:0;z-index:70;pointer-events:none;opacity:.045;mix-blend-mode:overlay}

.cursor-fx{position:fixed;top:0;left:0;width:14px;height:14px;border-radius:50%;background:#fff;mix-blend-mode:difference;pointer-events:none;z-index:95;transform:translate(-50%,-50%);transition:width .35s var(--ease),height .35s var(--ease)}
.cursor-fx.big{width:76px;height:76px}
body.no-cursor .cursor-fx,.cursor-dot,.cursor-ring{display:none}

h1,h2{overflow:visible}
.line-mask{display:block;overflow:hidden;padding-bottom:.05em;margin-bottom:-.05em}
.line-inner{display:block;transform:translateY(112%);transition:transform 1s var(--ease)}
h1.in-view .line-inner,h2.in-view .line-inner{transform:translateY(0)}
@media(prefers-reduced-motion:reduce){.line-inner{transition:none;transform:none}}

.hero-cta-row{display:flex;align-items:center;gap:32px;flex-wrap:wrap;margin-top:4px}















.decor-corner{position:absolute;right:2vw;top:10%;width:min(22vw,260px);aspect-ratio:1;opacity:.4;pointer-events:none}
.statement{position:relative;overflow:hidden}
.cta{position:relative;overflow:hidden}
.cta .decor-orb{right:50%;top:20%;transform:translateX(50%);width:min(36vw,420px)}




/* ============================================================
   GALLERY — real installation photography, bento-style grid
   ============================================================ */
.gallery{background:var(--dark);color:#fff}
.gallery .section-head .eyebrow{color:var(--accent)}
.gallery-grid{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:220px;gap:14px;grid-auto-flow:dense}
.gallery-item{position:relative;overflow:hidden;border-radius:3px;margin:0;background:#1a1c17}
.gallery-item.tall{grid-row:span 2}
.gallery-item.wide{grid-column:span 2}
.gallery-media{position:absolute;left:0;top:-16%;width:100%;height:132%;will-change:transform}
.gallery-item img{width:100%;height:100%;object-fit:cover;display:block;filter:grayscale(.2) contrast(1.05) brightness(.92);transition:transform 1s var(--ease-smooth),filter .8s ease}
.gallery-item:hover img{transform:scale(1.06);filter:grayscale(0) contrast(1.05) brightness(1)}
.gallery-item figcaption{position:absolute;left:0;right:0;bottom:0;padding:18px 20px;background:linear-gradient(to top,rgba(8,9,7,.92),transparent);font-family:var(--font-mono);font-size:11px;letter-spacing:1px;display:flex;gap:12px;align-items:center;opacity:0;transform:translateY(10px);transition:.5s var(--ease-smooth);pointer-events:none}
.gallery-item:hover figcaption{opacity:1;transform:none}
.gallery-item figcaption span{color:var(--accent);font-weight:700}
@media(max-width:900px){.gallery-grid{grid-template-columns:repeat(2,1fr);grid-auto-rows:200px}.gallery-item.wide{grid-column:span 2}.gallery-item.tall{grid-row:span 2}}
@media(max-width:560px){.gallery-grid{grid-template-columns:1fr;grid-auto-rows:220px}.gallery-item.wide,.gallery-item.tall{grid-column:auto;grid-row:auto}}

/* ============================================================
   CUBE PAGE TRANSITION
   The outgoing page rotates away like one face of a cube while
   the incoming page rotates in from the opposite face. Because
   real navigation reloads the document, the effect is split into
   an "exit" animation (played just before navigating away) and
   an "enter" animation (played on load of the destination page).
   ============================================================ */
body{transform-origin:center center}
body.pt-anim{transition:transform .68s cubic-bezier(.22,1,.36,1),opacity .6s ease,filter .6s ease}

/* forward = moving deeper into the site: current content drifts up + back, next page rises in from below */
body.pt-exit-fwd{transform:perspective(1500px) translateY(-70px) translateZ(-180px) scale(.96);opacity:0;filter:blur(6px)}
body.pt-enter-fwd-start{transform:perspective(1500px) translateY(90px) translateZ(-180px) scale(.96);opacity:0;filter:blur(6px);transition:none!important}

/* backward = returning: current content drifts down + back, previous page descends in from above */
body.pt-exit-back{transform:perspective(1500px) translateY(70px) translateZ(-180px) scale(.96);opacity:0;filter:blur(6px)}
body.pt-enter-back-start{transform:perspective(1500px) translateY(-90px) translateZ(-180px) scale(.96);opacity:0;filter:blur(6px);transition:none!important}

body.pt-enter-settle{transform:perspective(1500px) translateY(0) translateZ(0) scale(1);opacity:1;filter:blur(0)}

@media(prefers-reduced-motion:reduce){
  body.pt-anim,body.pt-exit-fwd,body.pt-exit-back,body.pt-enter-fwd-start,body.pt-enter-back-start{transition:opacity .3s ease!important;transform:none!important;filter:none!important}
}

/* ============================================================
   FULL 3D BACKGROUND SCENE for interior pages (About / Services /
   Contact), giving them the same depth as the homepage hero.
   ============================================================ */
.page-hero{background:#e9e7df}
.page-hero-scene{position:absolute;inset:0;width:100%;height:100%;z-index:0;pointer-events:none;opacity:0;transition:opacity 1.1s ease}
.page-hero-scene.ready{opacity:1}
.page-hero .eyebrow,.page-hero h1,.page-hero .lead{position:relative;z-index:1;text-shadow:0 2px 26px #e9e7df,0 1px 3px #e9e7df,0 0 50px #e9e7df}
.page-hero:before{content:"";position:absolute;inset:0;z-index:0;background:linear-gradient(112deg,#e9e7df 0%,rgba(233,231,223,.92) 26%,rgba(233,231,223,.55) 46%,rgba(233,231,223,0) 62%),radial-gradient(ellipse at 78% 32%,rgba(233,231,223,0) 0%,rgba(233,231,223,.45) 60%,rgba(233,231,223,.9) 100%);pointer-events:none}
.dark-panel.page-hero:before,.ev-detail.page-hero:before{display:none}

/* ABOUT hero — split layout: copy on a clean field, the scene contained in a framed orb instead of full-bleed */
.page-hero--split{display:grid;grid-template-columns:1.05fr .95fr;align-items:center;gap:6vw;padding-top:190px}
.page-hero--split:before{display:none}
.page-hero--split .page-hero-copy{position:relative;z-index:1}
.page-hero--split .lead{margin-left:0;max-width:480px}
.page-hero-orb{position:relative;justify-self:center;width:100%;max-width:440px;aspect-ratio:1;border-radius:50%;overflow:hidden;border:1px solid rgba(17,18,15,.1);background:radial-gradient(circle at 34% 30%,rgba(216,255,69,.22),rgba(233,231,223,0) 68%)}
.page-hero-orb .page-hero-scene{position:absolute;inset:0}
@media(max-width:900px){
  .page-hero--split{grid-template-columns:1fr;gap:50px;padding-top:150px}
  .page-hero-orb{max-width:280px;order:-1}
}

/* smoother, springier hover / lift easing used across cards + buttons */
:root{--ease-smooth:cubic-bezier(.22,1,.36,1)}
.service-card,.process-item,.info-card,.button,.text-link,.ej-dot{transition-timing-function:var(--ease-smooth)}
.button:hover{transition:transform .5s var(--ease-smooth),background .35s}

/* respect reduced motion for the new interior scenes */
@media(prefers-reduced-motion:reduce){.page-hero-scene{display:none}}

/* taller, full-bleed hero used on About — gives the enlarged 3D core room to breathe */
.page-hero--tall{min-height:82vh;display:flex;flex-direction:column;justify-content:center}
@media(max-width:900px){.page-hero--tall{min-height:auto;padding-top:150px}}

/* ============================================================
   ABOUT — "Our World": an original scroll-driven 3D flythrough,
   unique to this page. No shared model, no shared photography —
   just four abstract sculptures (Clarity / Coordination / Context
   / Responsibility) built from primitives, visited by a camera
   that both dollies forward on scroll AND free-looks with the
   cursor — a different control scheme from every other 3D piece
   on the site (the hero's pure parallax, the homepage's orbit-
   only EV viewer, the homepage's fixed-look station tour).
   ============================================================ */

/* ---------- Services: 3D ring scroll scene ---------- */
.svc-world{display:none;position:relative;height:760vh;background:var(--dark)}
.sw-3d .svc-world{display:block}
.sw-3d .sw-fallback{display:none}
.sw-sticky{position:sticky;top:0;height:100vh;overflow:hidden}
.sw-canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.sw-vignette{position:absolute;inset:0;z-index:1;pointer-events:none;background:radial-gradient(ellipse at 60% 50%,rgba(16,20,17,0) 40%,rgba(10,11,8,.8) 100%),linear-gradient(90deg,rgba(10,11,8,.75) 0%,rgba(10,11,8,0) 45%)}
.sw-overlay{position:absolute;left:8vw;bottom:90px;z-index:2;color:#fff;max-width:520px;transition:opacity .25s,transform .25s}
.sw-overlay.swap{opacity:0;transform:translateY(12px)}
.sw-overlay .eyebrow{color:var(--accent);margin-bottom:12px}
.sw-num{font-family:var(--font-mono);font-size:13px;color:#9a9c93;display:block;margin-bottom:10px}
.sw-overlay h2{font-size:clamp(38px,5vw,74px);line-height:.95;letter-spacing:-3px;margin:0 0 22px}
.sw-overlay h2 em{color:var(--accent)}
.sw-text p{color:#aeb0aa;font-size:14px;line-height:1.65;margin:0 0 12px;max-width:440px}
.sw-overlay .button{background:var(--accent);color:#101411;margin-top:14px}
.sw-rail{position:absolute;right:6vw;top:50%;transform:translateY(-50%);z-index:2;display:flex;flex-direction:column;gap:20px;align-items:flex-end}
.sw-tick{display:flex;align-items:center;gap:10px;cursor:pointer}
.sw-tick i{width:6px;height:6px;border-radius:50%;background:rgba(255,255,255,.22);transition:.4s var(--ease-smooth)}
.sw-tick span{font-family:var(--font-mono);font-size:10px;letter-spacing:1.5px;color:rgba(255,255,255,.32);transition:.4s}
.sw-tick.active i{background:var(--accent);box-shadow:0 0 12px rgba(216,255,69,.75);width:9px;height:9px}
.sw-tick.active span{color:#fff}
.sw-hint{position:absolute;right:6vw;bottom:34px;z-index:2;margin:0;font-family:var(--font-mono);font-size:10px;letter-spacing:2px;text-transform:uppercase;color:#9a9c93}
@media(max-width:900px){.svc-world{height:600vh}.sw-rail,.sw-hint{display:none}.sw-overlay{left:6vw;right:6vw;bottom:50px;max-width:none}.sw-vignette{background:linear-gradient(0deg,rgba(10,11,8,.9) 0%,rgba(10,11,8,0) 60%)}}

.orb-hint{position:absolute;left:0;right:0;bottom:14%;text-align:center;z-index:2;pointer-events:none;font-family:var(--font-mono);font-size:9px;letter-spacing:2px;text-transform:uppercase;color:var(--muted)}
.page-hero-orb .page-hero-scene{pointer-events:none}

/* ============================================================
   BLACK THEME — pure black base, lime accent
   ============================================================ */
html{background:#000;color-scheme:dark}
body{background:#000;color:var(--ink)}
.nav{background:rgba(0,0,0,.62);border-bottom:1px solid rgba(255,255,255,.09)}
.button{background:var(--ink);color:#0a0a0a}
.button:hover{background:var(--accent)}
.lead{color:#a5a79f}
.hero{background:#000}
.hero-grid{display:none}
.hero-copy{z-index:2}
.hero-copy h1{text-shadow:0 0 40px rgba(0,0,0,.6)}
.hero-scene{z-index:1}
.hero:after{content:"";position:absolute;left:0;right:0;bottom:0;height:140px;background:linear-gradient(to top,#000,transparent);z-index:1;pointer-events:none}
.scroll-hint{z-index:3;color:var(--muted)}
.service-card:hover{background:#11140e}
.service-card.dark{background:var(--accent);color:#101411}
.service-card.dark span,.service-card.dark p{color:rgba(16,20,17,.7)}
.process{background:#070906}
.statement,.services-preview,.energy-flow,.cta{background:#000}
.cursor-ring{border-color:rgba(255,255,255,.35)}
.footer,footer{background:#000}
.contact-form input,.contact-form select,.contact-form textarea{border-bottom:1px solid rgba(255,255,255,.28);color:var(--ink)}
.contact-form input:focus,.contact-form textarea:focus,.contact-form select:focus{border-color:var(--accent)}
.contact-form ::placeholder{color:#6d6f68}
.contact-form option{background:#0b0d0a;color:#f3f1ea}
.success{color:var(--accent)}
.info-card{background:#000}
.flow-icon{background:#000}

/* page heroes on black (Services / Contact keep the 3D orb) */
.page-hero{background:#000}
.page-hero .eyebrow,.page-hero h1,.page-hero .lead{text-shadow:none}
.page-hero:before{display:none}
.page-hero-orb{border:1px solid rgba(255,255,255,.12);background:radial-gradient(circle at 34% 30%,rgba(216,255,69,.2),rgba(0,0,0,0) 68%)}
.page-hero-scene{filter:invert(0)}

/* About hero — sunrise horizon */
.page-hero--sunrise{min-height:92vh;justify-content:flex-start;padding-top:190px;padding-bottom:0}
.page-hero--sunrise .about-hero-bg{position:absolute;inset:0;width:100%;height:100%;z-index:0;pointer-events:none}
.page-hero--sunrise .eyebrow,.page-hero--sunrise h1,.page-hero--sunrise .lead{position:relative;z-index:1}
.page-hero--sunrise .lead{margin-left:0;max-width:560px}
.page-hero--sunrise:after{content:"";position:absolute;left:0;right:0;bottom:0;height:220px;background:linear-gradient(to top,#000,transparent);z-index:1;pointer-events:none}

/* ---------- Scroll scenes: shorter, framed, in line with other sections ---------- */
.ej-headwrap{padding-bottom:50px}
.ej-head{display:grid;grid-template-columns:25% 1fr;align-items:start}
.ej-head h2{grid-column:2;font-size:clamp(46px,6vw,90px);line-height:.95;letter-spacing:-4px;margin:0}
.ej-head .section-label{grid-column:1;padding-top:12px}
@media(max-width:900px){
  .ej-head{grid-template-columns:1fr;gap:20px}
  .ej-head h2,.ej-head .section-label{grid-column:1}
}

/* ---------- Services: a regular page, no pinned interaction ---------- */
.services-page{background:#000}
.services-page .service-detail{border-top:1px solid var(--line);padding-top:100px;padding-bottom:100px}
.services-page .service-detail h2{font-size:clamp(40px,5.2vw,76px)}
.services-page .ev-detail{background:var(--dark)}
.services-page .service-detail p{color:#9d9f97}
.services-page .ev-detail p{color:#aeb0aa}
.services-page .service-detail .eyebrow{color:var(--accent)}
.page-hero-orb .orb-sun{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.page-hero-orb{overflow:hidden}

/* ---------- language switch (EN / IT) ---------- */
.nav-right{display:flex;align-items:center;gap:26px}
.lang-switch{display:flex;align-items:center;gap:7px;font-family:var(--font-mono);font-size:11px;letter-spacing:1.5px;color:rgba(255,255,255,.35)}
.lang-switch button{background:none;border:0;padding:6px 2px;font:inherit;letter-spacing:inherit;color:rgba(255,255,255,.55);cursor:pointer;transition:color .3s}
.lang-switch button:hover{color:#fff}
.lang-switch button.active{color:var(--accent,#d8ff45);cursor:default}
.lang-switch button:focus-visible{outline:1px solid var(--accent,#d8ff45);outline-offset:3px}
@media(max-width:900px){.nav-right{gap:16px}.menu{color:inherit}}

/* ---------- anchors: land exactly under the fixed header ---------- */
html{scroll-padding-top:82px}
.service-detail{scroll-margin-top:82px}
@media(max-width:900px){html{scroll-padding-top:70px}.service-detail{scroll-margin-top:70px}}

/* ---------- Home: energy path (replaces the pinned 3D window; scrolls with the page) ---------- */
.energy-path{position:relative;padding:20px 8vw 120px;background:#000}
.ep-line{position:absolute;left:50%;top:20px;bottom:120px;width:2px;margin-left:-1px;background:var(--line)}
.ep-line-fill{position:relative;width:100%;height:0;background:linear-gradient(180deg,#a8c738,var(--accent));box-shadow:0 0 16px rgba(216,255,69,.55)}
.ep-line-fill:after{content:"";position:absolute;left:50%;bottom:-5px;width:10px;height:10px;margin-left:-5px;border-radius:50%;background:var(--accent);box-shadow:0 0 18px 4px rgba(216,255,69,.7)}
.ep-step{position:relative;display:grid;grid-template-columns:1fr 1fr;align-items:center;min-height:58vh;column-gap:0}
.ep-text{grid-column:1;padding-right:7vw;text-align:right;opacity:.28;transform:translateY(14px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.ep-art{grid-column:2;padding-left:7vw;display:flex;justify-content:flex-start;color:rgba(255,255,255,.28);transition:color .7s var(--ease)}
.ep-step:nth-child(odd) .ep-text{grid-row:1}
.ep-step:nth-child(even) .ep-text{grid-column:2;grid-row:1;padding:0 0 0 7vw;text-align:left}
.ep-step:nth-child(even) .ep-art{grid-column:1;grid-row:1;padding:0 7vw 0 0;justify-content:flex-end}
.ep-text .eyebrow{color:var(--accent);margin-bottom:14px}
.ep-text h3{font-size:clamp(30px,3.6vw,52px);line-height:1;letter-spacing:-2px;margin:0 0 18px;font-family:var(--font-serif);font-style:italic;font-weight:400}
.ep-text p:last-child{color:#aeb0aa;font-size:15px;line-height:1.65;max-width:420px;margin:0}
.ep-step:nth-child(odd) .ep-text p:last-child{margin-left:auto}
.ep-art svg{width:min(100%,320px);height:auto;overflow:visible}
.ep-art .fill{fill:currentColor;fill-opacity:.35}
.ep-art .bg{fill:#000}
.ep-art .t{fill:currentColor;stroke:none;font-family:var(--font-mono);font-size:12px;letter-spacing:1px}
.ep-node{position:absolute;left:50%;top:50%;width:34px;height:34px;margin:-17px 0 0 -17px;border-radius:50%;background:#000;border:2px solid var(--line);display:grid;place-items:center;z-index:2;transition:background .4s var(--ease),border-color .4s var(--ease),box-shadow .4s var(--ease),transform .4s var(--ease)}
.ep-node b{font-family:var(--font-mono);font-size:10px;font-weight:500;color:var(--muted);transition:color .4s}
.ep-step.active .ep-text{opacity:1;transform:none}
.ep-step.active .ep-art{color:var(--accent)}
.ep-step.active .ep-art .hot{filter:drop-shadow(0 0 6px rgba(216,255,69,.8))}
.ep-step.active .ep-node{background:var(--accent);border-color:var(--accent);box-shadow:0 0 26px rgba(216,255,69,.6);transform:scale(1.12)}
.ep-step.active .ep-node b{color:#101411}
@media(max-width:900px){
  .energy-path{padding:10px 6vw 80px}
  .ep-line{left:calc(6vw + 17px);margin-left:-1px}
  .ep-step,.ep-step:nth-child(even){grid-template-columns:1fr;min-height:0;padding:44px 0 44px 56px;row-gap:26px}
  .ep-text,.ep-step:nth-child(even) .ep-text{grid-column:1;grid-row:1;padding:0;text-align:left}
  .ep-art,.ep-step:nth-child(even) .ep-art{grid-column:1;grid-row:2;padding:0;justify-content:flex-start}
  .ep-step:nth-child(odd) .ep-text p:last-child{margin-left:0}
  .ep-art svg{width:min(78%,240px)}
  .ep-node{left:17px;top:56px;margin:0 0 0 0}
}
@media(prefers-reduced-motion:reduce){.ep-text{opacity:1;transform:none}.ep-art{color:var(--accent)}}

/* ---------- footer contact ---------- */
.footer-contact{display:flex;gap:26px;flex-wrap:wrap}
.footer-contact a{color:var(--ink);transition:color .3s}
.footer-contact a:hover{color:var(--accent)}
footer{flex-wrap:wrap;gap:12px 24px;align-items:center}
@media(max-width:560px){footer{align-items:flex-start}.footer-contact{flex-direction:column;gap:8px}}

/* ---------- language switch: always visible, top right ---------- */
.lang-switch{border:1px solid rgba(255,255,255,.22);border-radius:100px;padding:3px 10px;gap:4px;background:rgba(255,255,255,.04)}
.lang-switch button{padding:5px 4px;color:rgba(255,255,255,.7);font-weight:500}
.lang-switch button.active{font-weight:700}
.nav-right{flex-shrink:0}
@media(max-width:900px){.nav-right{margin-left:auto}.menu{padding:6px}}

.gallery-item svg{position:absolute;inset:0;width:100%;height:100%;display:block;transition:transform 1s var(--ease-smooth)}
.gallery-item:hover svg{transform:scale(1.04)}
.ev-badge{transition:opacity .35s var(--ease),transform .35s var(--ease)}
.ev-3d-wrap.is-dragging .ev-badge{opacity:0;transform:scale(.7)}

/* ---------- About: the "road" variant of the energy path ---------- */
.road .ep-line{width:16px;margin-left:-8px;border-radius:8px;background:#0a0b08;border:1px solid var(--line)}
.road .ep-line:before{content:"";position:absolute;left:50%;top:6px;bottom:6px;width:2px;margin-left:-1px;background:repeating-linear-gradient(180deg,rgba(255,255,255,.28) 0 14px,transparent 14px 30px)}
.road .ep-line-fill{border-radius:8px;background:linear-gradient(180deg,#8fb02a,var(--accent));box-shadow:0 0 22px rgba(216,255,69,.5)}
.road .ep-line-fill:before{content:"";position:absolute;left:50%;top:0;bottom:0;width:2px;margin-left:-1px;background:repeating-linear-gradient(180deg,#0a0b08 0 14px,transparent 14px 30px);opacity:.8}
.road .ep-line-fill:after{width:16px;height:16px;margin-left:-8px;bottom:-8px}
.road .ep-text .eyebrow{color:var(--accent)}
@media(max-width:900px){.road .ep-line{margin-left:-8px}}

/* ---------- Services: staggered, asymmetric layout ---------- */
.services-page{padding:20px 8vw 40px}
.services-page .svc-row,.services-page .svc-pair,.services-page .svc-ev{border-top:1px solid var(--line)}
.svc-row{display:grid;grid-template-columns:repeat(12,1fr);column-gap:2vw;align-items:center;padding:110px 0}
.svc-a .svc-text{grid-column:1/8}.svc-a .svc-art{grid-column:9/13}
.svc-b .svc-art{grid-column:2/6;grid-row:1}.svc-b .svc-text{grid-column:7/13;grid-row:1}
.svc-art{color:var(--accent)}
.svc-art svg{width:100%;max-width:400px;height:auto;display:block}
.svc-art .fill{fill:currentColor;fill-opacity:.28}
.svc-n{display:block;font-family:var(--font-mono);font-size:13px;color:var(--muted);margin-bottom:22px}
.svc-text .eyebrow,.svc-card .eyebrow{color:var(--accent)}
.svc-text h2,.svc-card h2{font-size:clamp(40px,5vw,72px);line-height:.95;letter-spacing:-3.5px;margin:0 0 30px}
.svc-text p:not(.eyebrow),.svc-card p:not(.eyebrow){color:#9d9f97;line-height:1.7;font-size:15px;max-width:560px}
.svc-pair{display:grid;grid-template-columns:1.1fr .9fr;column-gap:7vw;padding:100px 0 130px;align-items:start}
.svc-pair>.svc-card:nth-child(2){margin-top:150px}
.svc-pair.flip{grid-template-columns:.9fr 1.1fr}
.svc-pair.flip>.svc-card:nth-child(1){margin-top:150px}
.svc-pair.flip>.svc-card:nth-child(2){margin-top:0}
.svc-card{position:relative;padding-top:34px}
.svc-card:before{content:"";position:absolute;top:0;left:0;width:56px;height:2px;background:var(--accent);transition:width .6s var(--ease)}
.svc-card:hover:before{width:100%}
.svc-card h2{font-size:clamp(36px,4.2vw,60px)}
.svc-ev{margin:0 -8vw;padding:110px 8vw;background:var(--dark);display:grid;grid-template-columns:minmax(280px,480px) 1fr;column-gap:7vw;align-items:center}
.svc-ev p:not(.eyebrow){color:#aeb0aa}
.svc-ev .button{margin-top:18px}
.svc-ev-art svg{width:100%;height:auto}
.hero-note{color:#a5a79f;font-size:15px;line-height:1.6;margin:34px 0 0;max-width:420px}
.hero-note a,.side-contact a{color:var(--ink);border-bottom:1px solid rgba(255,255,255,.35);transition:color .3s,border-color .3s}
.hero-note a:hover,.side-contact a:hover{color:var(--accent);border-color:var(--accent)}
.side-contact{display:flex;flex-direction:column;align-items:flex-start;gap:10px}
.side-contact a{width:max-content;font-family:var(--font-mono);font-size:13px}
@media(max-width:900px){
  .services-page{padding:0 6vw 20px}
  .svc-row,.svc-ev,.svc-pair,.svc-pair.flip{display:block;padding:70px 0}
  .svc-row .svc-art,.svc-ev-art{max-width:260px;margin:0 0 40px}
  .svc-b .svc-art{margin-bottom:36px}
  .svc-ev{margin:0 -6vw;padding:70px 6vw}
  .svc-pair>.svc-card,.svc-pair.flip>.svc-card{margin-top:0!important}
  .svc-pair>.svc-card+.svc-card{margin-top:64px!important}
  .svc-text h2,.svc-card h2{letter-spacing:-2px}
}

/* ---------- arrows: drawn, never emoji ---------- */
.arr{width:1em;height:1em;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;vertical-align:-.14em;display:inline-block}
.button .arr,.nav-cta .arr{width:1.3em;height:1.3em}
.menu svg{width:26px;height:26px;display:block;stroke:currentColor;stroke-width:2;stroke-linecap:round;fill:none}
.menu .x{display:none}.menu.open .bars{display:none}.menu.open .x{display:block}
.menu{color:var(--ink);cursor:pointer}

/* ---------- mobile: smoother + lighter ---------- */
html{overflow-x:clip;-webkit-text-size-adjust:100%}
a,button{-webkit-tap-highlight-color:transparent}
.ev-scene-interactive{touch-action:pan-y!important}
@media(max-width:900px){
  .grain-overlay,.decor-canvas{display:none!important}
  .nav{backdrop-filter:none;-webkit-backdrop-filter:none;background:rgba(0,0,0,.9)}
  .reveal{will-change:auto;transition-duration:.75s;transform:translateY(24px)}
  .reveal.show{transform:none}
  body.pt-exit-fwd,body.pt-exit-back,body.pt-enter-fwd-start,body.pt-enter-back-start,body.pt-enter-settle{filter:none!important;transform:none!important}
  .nav nav{display:flex;position:fixed;top:70px;left:0;right:0;flex-direction:column;gap:0;padding:8px 6vw 26px;background:rgba(0,0,0,.97);border-bottom:1px solid var(--line);font-size:22px;opacity:0;transform:translateY(-10px);pointer-events:none;visibility:hidden;transition:opacity .3s var(--ease),transform .3s var(--ease),visibility 0s .3s}
  .nav nav a{padding:16px 0;border-bottom:1px solid var(--line)}
  .nav nav a:after{display:none}
  .nav nav.mobile-open{opacity:1;transform:none;pointer-events:auto;visibility:visible;transition:opacity .3s var(--ease),transform .3s var(--ease)}
  .hero{min-height:92svh}
  .gallery-media{top:0;height:100%}
  .section{padding:80px 6vw}
  .cta{padding-top:110px;padding-bottom:110px}
  footer{padding:28px 6vw}
}

/* ===== Home: interactive service cards — black by default, lime + subtle grow on hover ===== */
.service-grid .service-card,
.service-grid .service-card.dark{background:#000;color:#fff;z-index:1;transform-origin:center;
  transition:background .45s var(--ease),color .45s var(--ease),transform .45s var(--ease),box-shadow .45s var(--ease),opacity 1.1s var(--ease)}
.service-grid .service-card span,
.service-grid .service-card p,
.service-grid .service-card.dark span,
.service-grid .service-card.dark p{color:var(--muted);transition:color .45s var(--ease)}
.service-grid .service-card b{transition:transform .45s var(--ease)}
.service-grid .service-card.reveal.show:hover,
.service-grid .service-card.reveal.show.dark:hover,
.service-grid .service-card:hover{background:var(--accent);color:#101411;transform:scale(1.035);z-index:3;box-shadow:0 18px 50px rgba(216,255,69,.18)}
.service-grid .service-card:hover h3{color:#101411}
.service-grid .service-card:hover span,
.service-grid .service-card:hover p,
.service-grid .service-card.dark:hover span,
.service-grid .service-card.dark:hover p{color:rgba(16,20,17,.72)}
.service-grid .service-card:hover b{transform:translate(3px,-3px)}
@media(hover:none){.service-grid .service-card:hover{transform:none;box-shadow:none}}


/* ===== Logo in header + footer ===== */
.logo{display:flex;align-items:center;line-height:0}
.logo img{height:26px;width:auto;display:block}
.site-footer{display:grid;grid-template-columns:1.2fr 1fr auto;gap:32px 6vw;align-items:start;padding:48px 4vw 32px;letter-spacing:.5px}
.footer-brand{display:flex;flex-direction:column;gap:12px;align-items:flex-start}
.footer-logo{display:block;line-height:0}
.footer-logo img{height:34px;width:auto;display:block}
.footer-brand address{font-style:normal;line-height:1.6}
.footer-vat{margin:0;line-height:1.6}
.footer-links{display:flex;flex-direction:column;gap:10px}
.footer-links a{color:var(--ink);transition:color .3s}
.footer-links a:hover{color:var(--accent)}
.footer-meta{display:flex;flex-direction:column;gap:10px;align-items:flex-end;text-align:right}
@media(max-width:900px){
  .logo img{height:22px}
  .site-footer{grid-template-columns:1fr;gap:28px;padding:40px 6vw 28px}
  .footer-meta{align-items:flex-start;text-align:left}
  .footer-meta .footer-contact{flex-direction:column;gap:8px}
}

/* ===== Mobile: home hero image sits below the intro text ===== */
@media(max-width:900px){
  .hero{flex-direction:column;align-items:stretch;justify-content:flex-start;min-height:0;padding:120px 6vw 60px;gap:20px}
  .hero .hero-scene{position:relative;inset:auto;width:100%;height:min(88vw,420px);flex:none;order:2}
  .hero .hero-copy{order:1}
  .hero .scroll-hint{display:none}
  .hero:after{display:none}
}

/* ===== Mobile: services images follow their text ===== */
@media(max-width:900px){
  .page-hero--split{gap:40px}
  .page-hero-orb{order:2;max-width:280px;margin:0 auto}
  .svc-row,.svc-ev{display:flex;flex-direction:column}
  .svc-row .svc-text,.svc-ev .svc-text{order:1}
  .svc-row .svc-art,.svc-ev .svc-ev-art{order:2;margin:36px 0 0}
}

/* =====================================================================
   SERVICES — dynamic, alternating layout
   ===================================================================== */
.svc-marquee{overflow:hidden;border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:22px 0;background:#000}
.svc-track{display:flex;width:max-content;gap:34px;align-items:center;animation:svcMarq 38s linear infinite;font-size:clamp(28px,4vw,54px);font-weight:700;letter-spacing:-2px;color:transparent;-webkit-text-stroke:1px rgba(255,255,255,.4);white-space:nowrap}
.svc-track b{font-size:.5em;color:var(--accent);-webkit-text-stroke:0;font-weight:400}
.svc-marquee:hover .svc-track{animation-play-state:paused}
.svc-track span{transition:color .4s,-webkit-text-stroke-color .4s}
.svc-track span:hover{color:var(--accent);-webkit-text-stroke-color:var(--accent)}
@keyframes svcMarq{to{transform:translateX(-50%)}}

.services-page{position:relative}
.svc-row,.svc-ev,.svc-card{position:relative}
.svc-row>*,.svc-ev>*{position:relative;z-index:1}
.svc-ghost{position:absolute!important;z-index:0!important;font-size:clamp(180px,24vw,380px);font-weight:800;letter-spacing:-12px;line-height:.8;color:transparent;-webkit-text-stroke:1px rgba(255,255,255,.08);pointer-events:none;user-select:none;top:50%;will-change:transform}
.svc-a .svc-ghost,.svc-ev .svc-ghost{right:0}
.svc-b .svc-ghost{left:0}
.svc-ev .svc-ghost{right:auto;left:0}

/* EV band: art on the right so the zig-zag keeps alternating */
.svc-ev{grid-template-columns:1fr minmax(280px,480px)}
.svc-ev .svc-text{grid-column:1;grid-row:1}
.svc-ev .svc-ev-art{grid-column:2;grid-row:1}

/* Pairs: two equal, top-aligned, equal-height cards */
.svc-pair,.svc-pair.flip{grid-template-columns:1fr 1fr;column-gap:3vw;align-items:stretch;padding:100px 0 110px}
.svc-pair>.svc-card:nth-child(n),.svc-pair.flip>.svc-card:nth-child(n){margin-top:0}
.svc-pair .svc-card{display:flex;flex-direction:column;padding:44px 40px 48px;border:1px solid var(--line);background:rgba(255,255,255,.015);overflow:hidden;transition:border-color .5s var(--ease),transform .6s var(--ease-smooth),background .5s}
.svc-pair .svc-card:before{top:-1px;left:-1px}
.svc-pair .svc-card:after{content:"";position:absolute;inset:0;background:radial-gradient(420px circle at var(--mx,50%) var(--my,0%),rgba(216,255,69,.12),transparent 60%);opacity:0;transition:opacity .4s;pointer-events:none}
.svc-pair .svc-card:hover{border-color:rgba(216,255,69,.45);transform:translateY(-8px)}
.svc-pair .svc-card:hover:after{opacity:1}
.svc-pair .svc-card>*{position:relative;z-index:1}
.svc-art-mini{color:var(--accent);margin-bottom:34px;height:120px}
.svc-mini{height:100%;width:auto;max-width:100%;display:block}
.svc-mini .fill,.svc-art .fill{fill:currentColor;fill-opacity:.25}
.svc-pair .svc-card h2{margin-bottom:22px}

/* Illustrations: drawn on, then gently alive */
.svc-art svg,.svc-ev-art svg,.svc-mini{transition:transform .25s ease-out;will-change:transform}
.svc-art svg .d,.svc-ev-art svg .d,.svc-mini .d{stroke-dasharray:var(--len);stroke-dashoffset:var(--len);transition:stroke-dashoffset 1.8s var(--ease-smooth) var(--dl,0s)}
.svc-art.drawn svg .d,.svc-ev-art.drawn svg .d,.svc-art-mini.drawn .d{stroke-dashoffset:0}
.svc-art .fill,.svc-mini .fill{opacity:0;transition:opacity 1s ease 1.2s}
.svc-art.drawn .fill,.svc-art-mini.drawn .fill{opacity:1}
.svc-art.drawn svg,.svc-art-mini.drawn .svc-mini{animation:svcFloat 7s ease-in-out 2s infinite}
@keyframes svcFloat{50%{translate:0 -8px}}

/* Section rail */
.svc-rail{position:fixed;right:22px;top:50%;transform:translateY(-50%);z-index:40;display:flex;flex-direction:column;gap:14px}
.svc-rail a{display:block;padding:6px}
.svc-rail i{display:block;width:8px;height:8px;border-radius:50%;border:1px solid rgba(255,255,255,.5);transition:all .35s var(--ease)}
.svc-rail a:hover i{border-color:var(--accent)}
.svc-rail a.on i{background:var(--accent);border-color:var(--accent);transform:scale(1.5);box-shadow:0 0 14px rgba(216,255,69,.7)}
@media(max-width:1100px){.svc-rail{display:none}}

/* Hero sun: slow halo */
.page-hero-orb{box-shadow:0 0 0 rgba(216,255,69,0);animation:orbGlow 6s ease-in-out infinite}
@keyframes orbGlow{50%{box-shadow:0 0 90px rgba(216,255,69,.18)}}

@media(max-width:900px){
  .svc-pair,.svc-pair.flip{display:block;padding:60px 0}
  .svc-pair .svc-card{padding:32px 24px 36px}
  .svc-pair>.svc-card+.svc-card{margin-top:24px!important}
  .svc-art-mini{height:96px;margin-bottom:26px}
  .svc-ghost{font-size:150px;opacity:.7}
  .svc-ev .svc-text,.svc-ev .svc-ev-art{grid-column:auto;grid-row:auto}
  .svc-track{animation-duration:26s}
}
@media(prefers-reduced-motion:reduce){
  .svc-track,.page-hero-orb,.svc-art.drawn svg,.svc-art-mini.drawn .svc-mini{animation:none}
  .svc-art svg .d,.svc-ev-art svg .d,.svc-mini .d{stroke-dasharray:none;stroke-dashoffset:0;transition:none}
  .svc-art .fill,.svc-mini .fill{opacity:1;transition:none}
}

/* ---------- About: staggered, offset content sections ---------- */
.split--stagger{display:block;position:relative;padding-bottom:170px}
.split--stagger .section-label{margin-bottom:60px}
.split--stagger .split-copy{max-width:none;position:relative;display:grid;grid-template-columns:repeat(12,1fr);column-gap:2vw}
.split--stagger .split-copy h2{grid-column:1 / 9;grid-row:1;font-size:clamp(52px,7.4vw,120px);line-height:.92;margin:0}
.split--stagger .split-copy p{color:var(--muted);font-size:15px;line-height:1.7;margin:0}
.split--stagger .split-copy p:nth-of-type(1){grid-column:8 / 13;grid-row:2;margin-top:-1.2vw;max-width:440px}
.split--stagger .split-copy p:nth-of-type(2){grid-column:6 / 11;grid-row:3;margin-top:36px;max-width:440px}
.hand-line{position:absolute;color:var(--accent);width:clamp(110px,15vw,220px);height:auto;pointer-events:none;overflow:visible}
.hand-line path{stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 1.6s cubic-bezier(.65,0,.35,1) .5s}
.show .hand-line path,.hand-line.show path,.reveal.show + .hand-line path,.reveal.show > .hand-line path{stroke-dashoffset:0}
.hand-line--a{right:6vw;top:6vw;opacity:.9}
.hand-line--a path{stroke-dashoffset:1}
.split--stagger .split-copy.show .hand-line--a path,.split--stagger .split-copy.show > .hand-line path{stroke-dashoffset:0}

.quote-stagger{padding-top:150px;padding-bottom:170px}
.quote-stagger .decor-orb{right:auto;left:5vw;top:auto;bottom:70px;transform:none;width:min(24vw,300px)}
.quote-stagger .big-quote{margin-left:0;margin-right:0;max-width:none;padding-left:30%;font-size:clamp(40px,5.6vw,92px);line-height:1.02}
.quote-stagger .big-quote em{display:inline-block;vertical-align:baseline;margin-left:12%;max-width:calc(88% - .6em);margin-top:.1em;color:#f3f1ea}
.quote-stagger .hand-line--b{position:absolute;z-index:1;left:30%;bottom:90px;width:clamp(110px,14vw,210px);color:var(--accent)}
.quote-stagger .hand-line--b path{stroke-dashoffset:1}
.quote-stagger .big-quote.show ~ .hand-line--b path,.quote-stagger.in-view .hand-line--b path{stroke-dashoffset:0}
@media(max-width:900px){
  .split--stagger{padding-bottom:100px}
  .split--stagger .split-copy{display:block}
  .split--stagger .split-copy h2{margin-bottom:30px}
  .split--stagger .split-copy p:nth-of-type(1){margin-left:8vw}
  .split--stagger .split-copy p:nth-of-type(2){margin-left:16vw}
  .hand-line--a{display:none}
  .quote-stagger .big-quote{padding-left:8vw;margin-top:30px}
  .quote-stagger .big-quote em{margin-left:6vw;max-width:calc(94% - 6vw - .6em)}
  .quote-stagger .hand-line--b{display:none}
}


/* Solar for business: text-only layout after removing the hero illustration */
.services-page #solar.svc-a .svc-text{grid-column:1/13}
.services-page #solar.svc-a .svc-text p:not(.eyebrow){max-width:720px}


/* About page: align both approach paragraphs beneath the hand-drawn line */
@media (min-width: 901px) {
  .split--stagger .split-copy p:nth-of-type(1),
  .split--stagger .split-copy p:nth-of-type(2) {
    grid-column: 6 / 13;
    max-width: 650px;
    margin-left: 0;
    justify-self: start;
  }
  .split--stagger .split-copy p:nth-of-type(1) {
    grid-row: 2;
    margin-top: 24px;
  }
  .split--stagger .split-copy p:nth-of-type(2) {
    grid-row: 3;
    margin-top: 24px;
  }
  .split--stagger .hand-line--a {
    right: 6vw;
    top: 2vw;
  }
}
@media (max-width: 900px) {
  .split--stagger .split-copy p:nth-of-type(1),
  .split--stagger .split-copy p:nth-of-type(2) {
    margin-left: 0;
    max-width: 650px;
  }
}

/* ---- v15: About approach — paragraphs sit in the middle-right beside the heading, under the hand-drawn line, left edges aligned ---- */
@media (min-width: 901px) {
  .split--stagger .split-copy {
    grid-template-rows: 1fr auto auto auto 1fr;
    align-items: start;
  }
  .split--stagger .split-copy h2 {
    grid-column: 1 / 9;
    grid-row: 1 / 6;
  }
  .split--stagger .split-copy .hand-line--a {
    position: static;
    grid-column: 9 / 13;
    grid-row: 2;
    justify-self: start;
    width: clamp(110px, 14vw, 200px);
    margin: 0 0 22px;
  }
  .split--stagger .split-copy p:nth-of-type(1),
  .split--stagger .split-copy p:nth-of-type(2) {
    grid-column: 9 / 13;
    max-width: 440px;
    margin-left: 0;
    justify-self: start;
    align-self: start;
  }
  .split--stagger .split-copy p:nth-of-type(1) { grid-row: 3; margin-top: 0; }
  .split--stagger .split-copy p:nth-of-type(2) { grid-row: 4; margin-top: 24px; }
}

/* ---- v15: Services — "Solar energy for business" text block centred in the section ---- */
@media (min-width: 901px) {
  .services-page #solar.svc-a .svc-text { grid-column: 1 / 13; width: min(600px, 100%); margin-inline: auto; }
  .services-page #solar.svc-a .svc-text p:not(.eyebrow) { max-width: 600px; }
}