/* EHO Roofing / CHROME concept */
@font-face{font-family:"Unbounded";src:url(../fonts/unbounded.woff2) format("woff2");font-weight:200 900;font-display:swap}
@font-face{font-family:"Martian Mono";src:url(../fonts/martian-mono.woff2) format("woff2");font-weight:100 800;font-stretch:75% 112.5%;font-display:swap}
@font-face{font-family:"Manrope";src:url(../fonts/manrope.woff2) format("woff2");font-weight:200 800;font-display:swap}

:root{
  --pearl:#f3f4f6;
  --pearl-2:#e9ebee;
  --silver:#b9c0c8;
  --silver-2:#8a93a0;
  --gunmetal:#2a2f36;
  --ink:#111418;
  --ink-2:#3d444d;
  --mute:#5d6570;
  --leaf:#36d12a;
  --leaf-ink:#1f7a17;
  --brand:#3a8a2e;
  --line:rgba(17,20,24,.12);
  --glass:rgba(246,247,249,.62);
  --glass-edge:rgba(255,255,255,.85);
  --shadow:0 1px 0 rgba(255,255,255,.9) inset,0 20px 60px -30px rgba(20,26,34,.35);
  --sheen:0deg;
  --chrome-text:linear-gradient(180deg,#0f1216 0%,#3a4049 38%,#9aa3ad 49%,#1a1e24 51%,#4a525c 72%,#20252c 100%);
  --iri:linear-gradient(100deg,#48d6ff,#7c6bff 22%,#ff6fcf 40%,#ffd36b 58%,#5fe36a 76%,#48d6ff);
  --chrome-btn:linear-gradient(180deg,#ffffff 0%,#dfe3e8 42%,#9aa2ad 50%,#c9ced5 58%,#f4f6f8 100%);
  --disp:"Unbounded",system-ui,sans-serif;
  --mono:"Martian Mono",ui-monospace,Menlo,monospace;
  --body:"Manrope",system-ui,sans-serif;
  --gut:clamp(16px,4vw,56px);
  --maxw:1320px;
  color-scheme:light;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:auto}
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
body{margin:0;background:var(--pearl);color:var(--ink);font:400 17px/1.6 var(--body);-webkit-font-smoothing:antialiased;overflow-x:clip}
img,video,svg{display:block;max-width:100%}
a{color:inherit}
::selection{background:var(--leaf);color:#061a04}
:focus-visible{outline:2px solid var(--leaf-ink);outline-offset:3px;border-radius:6px}

/* ---------- stage ---------- */
#gl{position:fixed;inset:0;width:100vw;height:100vh;height:100lvh;z-index:0;display:block;background:var(--pearl)}
html.no-gl #gl{display:none}
html.no-gl body{background:var(--pearl) url(../img/poster-desktop.webp) center/cover fixed no-repeat}
@media (max-width:819px){html.no-gl body{background-image:url(../img/poster-mobile.webp)}}
.grain{position:fixed;inset:0;z-index:1;pointer-events:none;opacity:.05;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
main,.foot,.ticker{position:relative;z-index:2}

.wrap{width:100%;max-width:var(--maxw);margin:0 auto;padding:0 var(--gut)}
.sec{position:relative;min-height:100vh;padding:clamp(96px,14vh,160px) 0}

/* ---------- type ---------- */
.display,.h2,h3,.big,.phone-xl,.foot-word{font-family:var(--disp);letter-spacing:-.02em;margin:0}
.display{font-weight:800;font-size:clamp(40px,6.3vw,104px);line-height:.9;letter-spacing:-.045em;font-stretch:125%}
.display .ln{display:table;white-space:nowrap;background:var(--chrome-text);-webkit-background-clip:text;background-clip:text;color:transparent;padding-bottom:.04em}
.h2{font-weight:700;font-size:clamp(32px,4.6vw,68px);line-height:.98;letter-spacing:-.035em;margin-bottom:.5em;
  background:var(--chrome-text);-webkit-background-clip:text;background-clip:text;color:transparent}
h3{font-weight:600;font-size:clamp(18px,1.5vw,22px);line-height:1.15;letter-spacing:-.01em;margin:0 0 .4em;color:var(--ink)}
.iri{background:var(--iri);background-size:220% 100%;background-position:calc(var(--sheen) / 3.6deg * 1%) 0;
  -webkit-background-clip:text;background-clip:text;color:transparent;font-style:normal;animation:iri 9s linear infinite}
@keyframes iri{to{background-position:220% 0}}
.mono,.kick,.chips,.meta,.num{font-family:var(--mono);font-stretch:88%}
.kick{display:flex;flex-wrap:wrap;gap:6px 14px;margin:0 0 22px;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-2)}
.kick span{position:relative}
.kick span+span::before{content:"";position:absolute;left:-9px;top:50%;width:4px;height:4px;margin-top:-2px;border-radius:50%;background:var(--leaf)}
.kick .coord{color:var(--mute)}
.lede{font-size:clamp(17px,1.35vw,20px);line-height:1.55;max-width:34ch;color:var(--ink-2);margin:26px 0 30px}
.body{font-size:clamp(16px,1.15vw,18px);max-width:46ch;color:var(--ink-2);margin:0 0 1.2em}

/* ---------- header ---------- */
.top{position:fixed;top:0;left:0;right:0;z-index:30;display:flex;align-items:center;gap:20px;
  padding:14px var(--gut);pointer-events:none}
.top>*{pointer-events:auto}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;padding:6px 14px 6px 8px;border-radius:999px;
  background:var(--glass);backdrop-filter:blur(14px) saturate(1.4);-webkit-backdrop-filter:blur(14px) saturate(1.4);box-shadow:var(--shadow);border:1px solid var(--glass-edge)}
.mark{width:52px;height:auto}
.brand-t{font:500 12px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase}
.brand-t b{font-family:var(--disp);font-weight:800;letter-spacing:.02em;font-size:14px}
.rail{margin:0 auto;display:flex;gap:2px;padding:5px;border-radius:999px;background:var(--glass);border:1px solid var(--glass-edge);
  backdrop-filter:blur(14px) saturate(1.4);-webkit-backdrop-filter:blur(14px) saturate(1.4);box-shadow:var(--shadow)}
.rail a{font:500 11px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;text-decoration:none;color:var(--ink-2);padding:10px 14px;border-radius:999px;transition:background .3s,color .3s}
.rail a:hover{color:var(--ink)}
.rail a.on{background:var(--ink);color:#fff;box-shadow:0 0 0 1px rgba(255,255,255,.2) inset}
.call-pill{display:flex;align-items:center;gap:10px;text-decoration:none;color:#fff;background:var(--ink);padding:13px 20px;border-radius:999px;
  font:600 13px/1 var(--mono);letter-spacing:.04em;box-shadow:0 10px 30px -12px rgba(17,20,24,.6),0 1px 0 rgba(255,255,255,.25) inset;position:relative;overflow:hidden}
.call-pill::after{content:"";position:absolute;inset:0;background:var(--iri);opacity:0;mix-blend-mode:screen;transition:opacity .4s}
.call-pill:hover::after{opacity:.35}
.cp-l{color:var(--silver)}
.dot{width:8px;height:8px;border-radius:50%;background:var(--leaf);box-shadow:0 0 0 0 rgba(54,209,42,.6);animation:ping 2.2s infinite}
@keyframes ping{0%{box-shadow:0 0 0 0 rgba(54,209,42,.55)}70%{box-shadow:0 0 0 10px rgba(54,209,42,0)}100%{box-shadow:0 0 0 0 rgba(54,209,42,0)}}

/* ---------- buttons ---------- */
.ctas{display:flex;flex-wrap:wrap;gap:12px}
.btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:10px;text-decoration:none;cursor:pointer;
  border:0;border-radius:999px;padding:18px 28px;font:600 14px/1 var(--mono);letter-spacing:.04em;overflow:hidden;isolation:isolate}
.btn.chrome{background:var(--chrome-btn);color:var(--ink);box-shadow:0 1px 0 #fff inset,0 -1px 0 rgba(0,0,0,.25) inset,0 0 0 1px rgba(17,20,24,.22),0 18px 36px -18px rgba(17,20,24,.55)}
.btn.chrome::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--iri);background-size:200% 100%;opacity:0;mix-blend-mode:color;transition:opacity .45s;animation:iri 6s linear infinite}
.btn.chrome:hover::before{opacity:.55}
.btn.chrome span{position:relative}
.btn.ghost{background:rgba(255,255,255,.4);color:var(--ink);box-shadow:0 0 0 1px rgba(17,20,24,.25) inset;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.btn.ghost:hover{background:#fff}
.btn i{font-style:normal}
.btn.full{width:100%}

.chips{list-style:none;padding:0;margin:28px 0 0;display:flex;flex-wrap:wrap;gap:8px;font-size:10.5px;letter-spacing:.1em;text-transform:uppercase}
.chips li{padding:8px 12px;border-radius:999px;border:1px solid var(--line);background:rgba(255,255,255,.45)}

/* ---------- figures (captions floating over the shader) ---------- */
.fig{margin:0;position:relative;min-height:340px;display:flex;align-items:flex-end;justify-content:flex-end}
.fig figcaption{font:400 10.5px/1.6 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--mute);text-align:right;
  padding-top:12px;border-top:1px solid var(--line);min-width:220px}
.fig figcaption b{color:var(--ink);font-weight:600}

/* ---------- hero ---------- */
.hero{display:flex;align-items:center;padding-top:clamp(120px,16vh,170px)}
.hero-grid{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,.7fr);gap:40px;align-items:end}
.fig-hero{min-height:60vh}
.scroll-cue{position:absolute;left:50%;bottom:28px;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:10px;
  font:500 10px/1 var(--mono);letter-spacing:.3em;text-transform:uppercase;color:var(--mute)}
.scroll-cue i{width:1px;height:46px;background:linear-gradient(var(--ink),transparent);animation:drip 2.4s cubic-bezier(.6,0,.2,1) infinite;transform-origin:top}
@keyframes drip{0%{transform:scaleY(0)}50%{transform:scaleY(1)}100%{transform:scaleY(1);opacity:0}}

/* ---------- ticker ---------- */
.ticker{overflow:hidden;border-block:1px solid var(--line);background:rgba(17,20,24,.92);color:#e9ecef;padding:16px 0}
.ticker-in{display:flex;gap:36px;width:max-content;animation:tick 38s linear infinite;font:500 clamp(16px,2vw,26px)/1 var(--disp);letter-spacing:-.01em;text-transform:uppercase;font-stretch:125%}
.ticker b{color:var(--leaf);font-weight:400}
@keyframes tick{to{transform:translateX(-50%)}}

/* ---------- services ---------- */
.svc-grid{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1fr);gap:clamp(24px,5vw,80px)}
.svc-sticky{position:sticky;top:120px;padding-bottom:40vh}
.spec-readout{display:inline-flex;align-items:center;gap:10px;margin-top:10px;padding:10px 14px;border-radius:10px;background:var(--ink);color:#e9ecef;
  font-size:11px;letter-spacing:.1em;text-transform:uppercase}
.spec-readout::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--leaf);box-shadow:0 0 12px var(--leaf)}
.specs{list-style:none;margin:0;padding:0;display:grid;gap:18px}
.spec{position:relative;display:grid;grid-template-columns:150px minmax(0,1fr);gap:22px;align-items:center;padding:14px 22px 14px 14px;border-radius:22px;
  background:rgba(250,251,252,.72);border:1px solid rgba(255,255,255,.9);box-shadow:var(--shadow);outline:none;
  backdrop-filter:blur(18px) saturate(1.3);-webkit-backdrop-filter:blur(18px) saturate(1.3);transition:transform .5s cubic-bezier(.2,.8,.2,1),background .4s,box-shadow .4s}
.spec::before{content:"";position:absolute;inset:-1px;border-radius:inherit;padding:1px;background:var(--iri);background-size:200% 100%;
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;opacity:0;transition:opacity .4s;animation:iri 6s linear infinite}
.spec.on{background:rgba(255,255,255,.9);transform:translateX(-8px)}
.spec.on::before{opacity:1}
.spec-media{position:relative;aspect-ratio:1;border-radius:14px;overflow:hidden;background:#eceef1}
.spec-media img{width:100%;height:100%;object-fit:cover;mix-blend-mode:multiply;transform:scale(1.04);transition:transform .8s cubic-bezier(.2,.8,.2,1)}
.spec.on .spec-media img{transform:scale(1.12)}
.spec-media video{width:100%;height:100%;object-fit:cover}
.spec .num{font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--mute);margin:0 0 8px}
.spec p{margin:0 0 .6em;font-size:15.5px;line-height:1.55;color:var(--ink-2)}
.spec .meta{font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--leaf-ink);margin:0}
.spec.feature{grid-template-columns:1fr;padding:14px}
.spec.feature .spec-media{aspect-ratio:16/8}
.spec.feature .spec-txt{padding:4px 10px 8px}
.spec.feature h3{font-size:clamp(24px,2.4vw,34px);font-weight:700;font-stretch:125%}
.tag{position:absolute;left:12px;bottom:12px;margin:0;padding:6px 10px;border-radius:8px;background:rgba(17,20,24,.72);color:#fff;font-size:9.5px;letter-spacing:.12em;text-transform:uppercase}

/* ---------- panels (frosted pearl) ---------- */
.panel{position:relative}

/* ---------- why ---------- */
.why-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:40px;align-items:end;min-height:62vh}
.fig-why{min-height:48vh}
.facts{list-style:none;padding:0;margin:clamp(40px,8vh,90px) 0 0;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));border-top:1px solid var(--ink)}
.facts li{padding:22px 18px 26px 0;border-right:1px solid var(--line);display:flex;flex-direction:column;gap:8px}
.facts li+li{padding-left:18px}
.facts li:last-child{border-right:0}
.big{font-weight:700;font-size:clamp(19px,1.8vw,28px);line-height:1;letter-spacing:-.03em;background:var(--chrome-text);-webkit-background-clip:text;background-clip:text;color:transparent;font-stretch:115%}
.facts span{font:500 10.5px/1.4 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--mute)}
.pillars{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin-top:40px}
.pillars article{padding:26px;border-radius:22px;background:rgba(250,251,252,.7);border:1px solid rgba(255,255,255,.9);box-shadow:var(--shadow);
  backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px)}
.pillars .mono{font-size:12px;color:var(--leaf-ink);margin:0 0 30px;letter-spacing:.1em}
.pillars p{margin:0;color:var(--ink-2);font-size:15.5px}

/* ---------- storm ---------- */
.storm-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:40px}
.storm-spacer{position:relative}
.fig-storm{position:sticky;top:60vh;min-height:0;justify-content:flex-start}
.fig-storm figcaption{text-align:left}
.claim-steps{list-style:none;padding:0;margin:28px 0;display:grid;gap:0;border-top:1px solid var(--line)}
.claim-steps li{display:grid;grid-template-columns:48px 1fr;gap:12px;padding:18px 0;border-bottom:1px solid var(--line)}
.claim-steps .mono{font-size:12px;color:var(--leaf-ink);padding-top:3px}
.claim-steps p{margin:0;color:var(--ink-2);font-size:15.5px}
.honest{font:600 clamp(18px,1.6vw,22px)/1.35 var(--disp);letter-spacing:-.015em;margin:0 0 28px;padding-left:18px;border-left:3px solid var(--leaf)}
.film{position:relative;border-radius:22px;overflow:hidden;aspect-ratio:16/9;background:#dfe2e6;box-shadow:var(--shadow);margin-bottom:18px}
.film video{width:100%;height:100%;object-fit:cover}
.storm-call{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;text-decoration:none;padding:22px 24px;border-radius:22px;background:var(--ink);color:#fff;position:relative;overflow:hidden}
.storm-call .mono{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--silver)}
.storm-call b{font:700 clamp(18px,2vw,26px)/1 var(--disp);font-stretch:115%}
.storm-call::after{content:"";position:absolute;inset:0;background:var(--iri);background-size:200% 100%;mix-blend-mode:screen;opacity:.0;transition:opacity .4s;animation:iri 5s linear infinite}
.storm-call:hover::after{opacity:.3}

/* ---------- process ---------- */
.process{min-height:180vh}
.proc-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:40px}
.proc-copy{position:relative}
.fig-proc{position:sticky;top:70vh;min-height:0;align-self:start}
.steps{list-style:none;padding:0;margin:40px 0 0;display:grid;gap:22vh}
.step{display:grid;grid-template-columns:auto 1fr;gap:22px;align-items:start;opacity:.32;filter:blur(1.5px);transition:opacity .7s,filter .7s,transform .7s cubic-bezier(.2,.8,.2,1);transform:translateX(-10px)}
.step.lit{opacity:1;filter:none;transform:none}
.step .n{font:800 clamp(44px,5vw,76px)/.85 var(--disp);letter-spacing:-.05em;background:var(--chrome-text);-webkit-background-clip:text;background-clip:text;color:transparent;font-stretch:125%}
.step.lit .n{background:var(--iri);background-size:220% 100%;-webkit-background-clip:text;background-clip:text;animation:iri 7s linear infinite}
.step h3{font-size:clamp(20px,1.9vw,28px);font-weight:700}
.step p{margin:0;color:var(--ink-2);max-width:36ch}
.step p a{color:var(--leaf-ink);font-weight:600}

/* ---------- area ---------- */
.area-grid{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1fr);gap:clamp(24px,5vw,80px);align-items:center}
.area-map{max-width:440px;width:100%;justify-self:center}
.area-map svg{width:100%;height:auto;overflow:visible}
.area-map .tn{font:700 17px var(--disp);fill:var(--ink);letter-spacing:-.01em}
.area-map .ts{font:500 9.5px var(--mono);fill:var(--mute);letter-spacing:.14em;text-transform:uppercase}
.area-map .route{stroke-dasharray:900;stroke-dashoffset:900;transition:stroke-dashoffset 2.4s cubic-bezier(.6,0,.2,1) .2s}
.area-map.in .route{stroke-dashoffset:0}
.area-map .pulse circle{transform-origin:210px 286px;animation:sonar 3s ease-out infinite}
@keyframes sonar{0%{transform:scale(1);opacity:.9;stroke-width:2}100%{transform:scale(13);opacity:0;stroke-width:.2}}
.area-map .hq .tn{font-size:21px}
.towns{list-style:none;padding:0;margin:26px 0 0;display:flex;flex-wrap:wrap;gap:8px;font-size:11px;letter-spacing:.12em;text-transform:uppercase}
.towns li{padding:9px 13px;border-radius:999px;background:var(--ink);color:#fff}
.towns li:last-child{background:transparent;color:var(--ink);box-shadow:0 0 0 1px var(--ink) inset}

/* ---------- contact ---------- */
.contact{display:flex;align-items:center}
.contact-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.9fr);gap:clamp(24px,5vw,80px);align-items:center}
.phone-xl{display:table;white-space:nowrap;text-decoration:none;font:800 clamp(30px,4.6vw,76px)/.92 var(--disp);letter-spacing:-.05em;font-stretch:125%;margin:10px 0 34px;
  background:var(--chrome-text);-webkit-background-clip:text;background-clip:text;color:transparent;transition:filter .3s}
.phone-xl:hover{background:var(--iri);background-size:220% 100%;-webkit-background-clip:text;background-clip:text;animation:iri 4s linear infinite}
.lines{list-style:none;padding:0;margin:0;border-top:1px solid var(--line)}
.lines li{display:grid;grid-template-columns:96px 1fr;gap:12px;padding:14px 0;border-bottom:1px solid var(--line);font-size:15.5px;overflow-wrap:anywhere}
.lines .mono{font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--mute);padding-top:4px}
.lines a{text-decoration:none;font-weight:600;background:linear-gradient(var(--leaf),var(--leaf)) 0 100%/0 2px no-repeat;transition:background-size .4s}
.lines a:hover{background-size:100% 2px}
.est{display:grid;grid-template-columns:1fr 1fr;gap:14px;padding:clamp(20px,2.4vw,32px);border-radius:28px;
  background:rgba(250,251,252,.78);border:1px solid rgba(255,255,255,.95);box-shadow:var(--shadow),0 40px 80px -40px rgba(20,26,34,.4);
  backdrop-filter:blur(22px) saturate(1.3);-webkit-backdrop-filter:blur(22px) saturate(1.3)}
.form-h{grid-column:1/-1;margin:0 0 4px;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--leaf-ink)}
.est label{display:flex;flex-direction:column;gap:6px}
.est label.full,.est .full,.form-note{grid-column:1/-1}
.est label span{font:500 10px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--mute)}
.est input,.est select,.est textarea{font:500 16px/1.3 var(--body);color:var(--ink);padding:13px 14px;border-radius:12px;border:1px solid rgba(17,20,24,.16);
  background:rgba(255,255,255,.85);box-shadow:0 1px 2px rgba(17,20,24,.06) inset;transition:border-color .3s,box-shadow .3s;width:100%;min-width:0;-webkit-appearance:none;appearance:none}
.est select{background-image:linear-gradient(45deg,transparent 50%,var(--ink) 50%),linear-gradient(135deg,var(--ink) 50%,transparent 50%);
  background-position:calc(100% - 20px) 55%,calc(100% - 15px) 55%;background-size:5px 5px;background-repeat:no-repeat;padding-right:36px}
.est textarea{resize:vertical;min-height:88px}
.est input:focus,.est select:focus,.est textarea:focus{outline:none;border-color:var(--leaf-ink);box-shadow:0 0 0 3px rgba(54,209,42,.2)}
.form-note{margin:0;font-size:10.5px;letter-spacing:.06em;color:var(--mute)}

/* ---------- footer ---------- */
.foot{background:var(--ink);color:#c9ced5;padding:70px 0 0;overflow:hidden}
.foot-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.4fr);gap:40px}
.mark-lg{width:170px;height:auto;margin-bottom:18px}
.foot-brand p{max-width:38ch;font-size:14.5px;margin:0;color:#9aa2ad}
.foot-cols{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;font-size:11px;letter-spacing:.08em;line-height:2.1;text-transform:uppercase}
.foot-cols p{margin:0}
.foot-cols a{text-decoration:none;color:#fff}
.foot-cols a:hover{color:var(--leaf)}
.foot-word{font-weight:900;font-size:clamp(120px,34vw,520px);line-height:.72;letter-spacing:-.07em;text-align:center;margin:40px 0 -.08em;font-stretch:125%;
  background:linear-gradient(180deg,#5b636d 0%,#1a1e24 45%,#111418 70%);-webkit-background-clip:text;background-clip:text;color:transparent;user-select:none}

/* ---------- dock (mobile persistent CTA) ---------- */
.dock{display:none}

/* ---------- bead cursor ---------- */
.bead{position:fixed;left:0;top:0;z-index:60;width:22px;height:22px;margin:-11px 0 0 -11px;border-radius:50%;pointer-events:none;opacity:0;
  background:radial-gradient(circle at 34% 28%,#fff 0 14%,#d5dae0 30%,#4a515b 52%,#c3c9d0 72%,#f1f3f5 100%);
  box-shadow:0 4px 10px rgba(17,20,24,.35);transition:opacity .3s,width .3s,height .3s,margin .3s;will-change:transform}
.bead.live{opacity:1}
.bead.hot{width:44px;height:44px;margin:-22px 0 0 -22px;background:radial-gradient(circle at 34% 28%,#fff 0 12%,#bff5b3 30%,#1f7a17 55%,#9be58c 78%,#f1fff0 100%)}
@media (pointer:fine){html.js body{cursor:none}html.js a,html.js button,html.js select,html.js input,html.js textarea,html.js label,html.js .spec{cursor:none}}
@media (pointer:coarse){.bead{display:none}}

/* ---------- reveals ---------- */
html.js .rv{opacity:0;transform:translateY(26px);filter:blur(6px);transition:opacity 1s cubic-bezier(.2,.8,.2,1),transform 1.1s cubic-bezier(.2,.8,.2,1),filter 1s}
html.js .rv.in{opacity:1;transform:none;filter:none}

/* ---------- responsive ---------- */
@media (max-width:1100px){
  .rail a{padding:10px 10px;font-size:10px}
  .facts{grid-template-columns:repeat(3,minmax(0,1fr))}
  .facts li:nth-child(3){border-right:0}
  .facts li:nth-child(4){padding-left:0}
  .facts li:nth-child(n+4){border-top:1px solid var(--line)}
}
@media (max-width:819px){
  body{font-size:16px;padding-bottom:84px}
  .rail{display:none}
  .top{padding:10px 16px;gap:10px}
  .brand{padding:5px 12px 5px 6px}
  .mark{width:44px}
  .call-pill{margin-left:auto;padding:11px 14px;font-size:12px}
  .cp-l{display:none}
  .sec{min-height:0;padding:0 0 90px}
  /* the shader object owns the top of each section on phones: a clear window, then a frosted panel */
  .sec::before{content:"";display:block;height:62vh}
  .hero::before{height:46vh}
  .hero{display:block;padding-top:0}
  .hero-grid,.svc-grid,.why-grid,.storm-grid,.proc-grid,.area-grid,.contact-grid,.foot-grid{grid-template-columns:1fr;gap:26px}
  .fig{display:none}
  .storm-spacer{display:none}
  .panel,.proc-copy,.svc-stage,.contact-copy{background:rgba(247,248,250,.8);border:1px solid rgba(255,255,255,.95);border-radius:26px;padding:24px 20px;box-shadow:var(--shadow);
    backdrop-filter:blur(20px) saturate(1.3);-webkit-backdrop-filter:blur(20px) saturate(1.3)}
  .est.panel{padding:20px 16px}
  .hero-copy{padding-top:22px}
  .display{font-size:clamp(34px,10.2vw,56px)}
  .brand-t{display:none}
  .brand{padding:4px 10px}
  .mark{width:56px}
  .lede{margin:18px 0 22px}
  .ctas .btn{flex:1 1 100%}
  .scroll-cue{display:none}
  .svc-sticky{position:static;padding-bottom:0}
  .svc-stage{margin-bottom:0}
  .spec{grid-template-columns:92px minmax(0,1fr);gap:14px;padding:12px 14px 12px 12px}
  .spec.on{transform:none}
  .spec p{font-size:14.5px}
  .spec.feature .spec-media{aspect-ratio:16/10}
  .why-grid{min-height:0}
  .facts{grid-template-columns:repeat(2,minmax(0,1fr));margin-top:26px;background:rgba(247,248,250,.8);border-radius:22px;border-top:0;overflow:hidden;box-shadow:var(--shadow)}
  .facts li,.facts li+li{padding:18px 16px;border-right:1px solid var(--line);border-top:1px solid var(--line)}
  .facts li:nth-child(2n){border-right:0}
  .facts li:nth-child(-n+2){border-top:0}
  .pillars{grid-template-columns:1fr;margin-top:18px}
  .process{min-height:0}
  .steps{gap:26px;margin-top:26px}
  .step{opacity:1;filter:none;transform:none}
  .step .n{font-size:40px}
  .area-map{max-width:340px;order:2}
  .area-copy{order:1}
  .contact .phone-xl{font-size:clamp(26px,8vw,44px)}
  .lines li{grid-template-columns:1fr;gap:2px}
  .est{grid-template-columns:1fr}
  .foot-cols{grid-template-columns:1fr 1fr}
  .foot{padding-bottom:90px}
  .dock{display:flex;position:fixed;left:10px;right:10px;bottom:calc(10px + env(safe-area-inset-bottom));z-index:40;gap:8px;padding:6px;border-radius:999px;
    background:rgba(17,20,24,.9);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);box-shadow:0 20px 40px -16px rgba(0,0,0,.5)}
  .dock a{flex:1;display:flex;align-items:center;justify-content:center;gap:8px;text-decoration:none;border-radius:999px;padding:15px 10px;font:600 12.5px/1 var(--mono);letter-spacing:.02em;white-space:nowrap}
  .dock-call{background:var(--chrome-btn);color:var(--ink);flex:1.35!important}
  .dock-est{color:#fff}
}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
  html.js .rv{opacity:1;transform:none;filter:none}
  .ticker-in{animation:none}
  .step{opacity:1;filter:none;transform:none}
  .area-map .route{stroke-dashoffset:0}
}