:root{
  --ink:#070F0B;
  --ink-2:#0B1710;
  --text:#E9EDE4;
  --muted:rgba(233,237,228,.56);
  --line:rgba(233,237,228,.12);
  --accent:#A9C4A0;
  --accent-deep:#4F6B48;
  --maxw:1240px;
  --ease:cubic-bezier(.2,.8,.2,1);
  --rail-x:.45rem;
  --rail-pad:2.4rem;
}
/* big screens: use the room */
@media(min-width:1500px){ :root{--maxw:1420px} html{font-size:17px} }
@media(min-width:1900px){ :root{--maxw:1600px} html{font-size:18.5px} }
*{box-sizing:border-box;margin:0;padding:0}
body{background:var(--ink);color:var(--text);
  font-family:'Inter',system-ui,sans-serif;font-weight:300;
  -webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit}
button{font:inherit;color:inherit;background:none;border:0;text-align:left;cursor:pointer}
:focus-visible{outline:2px solid var(--accent);outline-offset:4px}
/* no lonely last words: balance headings, tidy paragraph endings */
h1,h2,h3,.focusLead,#contact .big,.stitle{text-wrap:balance}
p,li,.sum,.sbody{text-wrap:pretty}
/* physical feedback on press */
.cta:active,.fbtn:active,.step:active,.jobHead:active{transform:scale(.98)}
.skipLink{position:fixed;left:1rem;top:1rem;z-index:300;background:var(--accent);color:var(--ink);
  padding:.6rem 1rem;border-radius:999px;text-decoration:none;font-size:.85rem;transform:translateY(-200%);
  transition:transform .3s var(--ease)}
.skipLink:focus{transform:none}
.serif{font-family:'Instrument Serif',Georgia,serif;font-style:italic;font-weight:400}
.mono{font-family:'JetBrains Mono',monospace;font-size:.67rem;letter-spacing:.17em;text-transform:uppercase}

/* Content is hidden only while JS is about to animate it in.
   Without JS (or if the scripts fail) everything stays visible. */
html.js [data-reveal],
html.js [data-reveal-item],
html.js [data-masked-reveal],
html.js [data-image-reveal]{visibility:hidden}
html:not(.js) #loader{display:none}
.word-mask{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.08em}
.word{display:inline-block;will-change:transform}

/* -------------------------------------------- cursor: lagging dot + wind trail */
#curDot,#trailCv{display:none}
@media (pointer:fine){
  #curDot{display:block;position:fixed;left:0;top:0;z-index:210;width:8px;height:8px;border-radius:50%;
    background:var(--accent);box-shadow:0 0 12px rgba(169,196,160,.8);pointer-events:none;
    transition:width .3s var(--ease),height .3s var(--ease),background-color .3s,opacity .3s;opacity:0}
  #curDot.on{opacity:1}
  body.onLink #curDot{width:26px;height:26px;background:rgba(169,196,160,.18);
    box-shadow:0 0 0 1px rgba(169,196,160,.7)}
  #trailCv{display:block;position:fixed;inset:0;z-index:205;pointer-events:none}
}

/* ------------------------------------------------------------------- nav */
#nav{position:fixed;top:0;left:0;right:0;z-index:60;display:flex;justify-content:space-between;
  align-items:center;gap:2rem;padding:1.3rem 5vw;color:var(--text);
  text-shadow:0 1px 14px rgba(7,15,11,.55);border-bottom:1px solid transparent;
  transition:background-color .5s var(--ease),border-color .5s,backdrop-filter .5s}
#nav.scrolled{background:rgba(7,15,11,.72);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  border-bottom-color:var(--line);text-shadow:none}
#nav a{text-decoration:none}
#nav .n{font-weight:400;letter-spacing:.02em;font-size:.92rem}
#nav .hello{color:var(--accent)}
.navLinks{display:flex;gap:2rem}
.navLinks a{color:var(--muted);position:relative;padding:.3rem 0;transition:color .35s}
.navLinks a::after{content:"";position:absolute;left:0;right:0;bottom:-2px;height:1px;background:var(--accent);
  transform:scaleX(0);transform-origin:left;transition:transform .5s var(--ease)}
.navLinks a:hover,.navLinks a.active{color:var(--text)}
.navLinks a.active::after{transform:scaleX(1)}
@media(max-width:860px){ .navLinks{display:none} }

/* ---------------------------------------------------------------- loader */
#loader{position:fixed;inset:0;z-index:100;background:var(--ink);
  display:flex;align-items:flex-end;justify-content:space-between;padding:5vw;gap:2rem}
#loader .lbl{max-width:24ch;color:var(--muted);line-height:1.55;font-size:.84rem}
#count{font-family:'Instrument Serif',serif;font-size:clamp(4rem,13vw,10rem);line-height:.85;color:var(--accent)}
#bar{position:fixed;left:0;top:0;height:2px;width:100%;background:var(--accent);z-index:101;
  transform:scaleX(0);transform-origin:left}

/* ------------------------------------------------- hero: energy landscape */
#heroWrap{position:relative;height:220vh;background:var(--ink)}
#stage{position:sticky;top:0;height:100vh;overflow:hidden;background:#040906}
#heroScene{position:absolute;inset:0;width:100%;height:100%;display:block;z-index:0}
.hRidge.far{fill:#0B1912}.hRidge.mid{fill:#09140E}.hRidge.near{fill:#070F0B}
.hRidgeLine{fill:none;stroke-width:1}
.hRidgeLine.far{stroke:rgba(169,196,160,.18)}.hRidgeLine.mid{stroke:rgba(169,196,160,.28)}.hRidgeLine.near{stroke:rgba(169,196,160,.4)}
.hMast{stroke:#A9C4A0;stroke-linecap:round}
.hBlade{fill:#D4E4CB}
.hHub{fill:#E9EDE4}
.hSpin{transform-box:view-box;animation:vzSpin 5s linear infinite}
.hPlant{fill:#0F1B14;stroke:rgba(233,237,228,.32);stroke-width:1}
.hSmoke{fill:rgba(190,196,188,.55);filter:blur(5px);transform-box:fill-box;transform-origin:center;
  opacity:0;animation:hSmoke 6s ease-out infinite}
@keyframes hSmoke{0%{transform:translate(0,0) scale(.6);opacity:0}15%{opacity:.45}100%{transform:translate(48px,-120px) scale(3.4);opacity:0}}
.hTower{fill:none;stroke:rgba(169,196,160,.45);stroke-width:1}
.hCable{fill:none;stroke:rgba(169,196,160,.28);stroke-width:.8}
.hPulse{fill:#F2DC86;filter:drop-shadow(0 0 4px rgba(242,220,134,.9))}
.hPanel{fill:#12261B;stroke:rgba(169,196,160,.75);stroke-width:.8}
.hBld{fill:#0C1811;stroke:rgba(169,196,160,.22);stroke-width:.8}
.hWin{fill:#18291F;transition:fill .6s}
.hWin.lit{fill:#F2DC86}
.hSunDisc{fill:#F2DC86}
.hTank circle{fill:#0F1D16;stroke:#F2DC86;stroke-width:1.2}
.hTank text{fill:#F2DC86;font:600 9px 'JetBrains Mono',monospace;text-anchor:middle;dominant-baseline:central}
#windCv{position:absolute;inset:0;z-index:1;pointer-events:none}
.heroFrame{position:absolute;inset:5.2rem 2.5vw 1rem;z-index:3;pointer-events:none}
.heroFrame i{position:absolute;width:18px;height:18px;border-color:rgba(169,196,160,.45);border-style:solid;border-width:0}
.heroFrame i:nth-child(1){top:0;left:0;border-top-width:1px;border-left-width:1px}
.heroFrame i:nth-child(2){top:0;right:0;border-top-width:1px;border-right-width:1px}
.heroFrame i:nth-child(3){bottom:0;left:0;border-bottom-width:1px;border-left-width:1px}
.heroFrame i:nth-child(4){bottom:0;right:0;border-bottom-width:1px;border-right-width:1px}
/* year readout: where the scroll has taken the energy system */
#yearReadout{position:absolute;top:7rem;right:5vw;z-index:4;pointer-events:none;
  display:flex;flex-direction:column;align-items:flex-end;gap:.55rem;text-align:right}
#yearReadout .mono{color:var(--muted)}
#yearReadout b{font-family:'Instrument Serif',serif;font-weight:400;font-size:clamp(2.6rem,5vw,4.2rem);
  line-height:.9;color:var(--sun);font-variant-numeric:tabular-nums;text-shadow:0 0 30px rgba(242,220,134,.25)}
.yrTrack{display:block;width:11rem;height:1px;background:rgba(233,237,228,.18)}
.yrTrack i{display:block;height:100%;background:var(--sun);transform:scaleX(0);transform-origin:left}
#topScrim{position:absolute;inset:0;z-index:2;pointer-events:none;
  background:linear-gradient(180deg, rgba(7,15,11,.65) 0%, transparent 18%)}
#heroScrim{position:absolute;inset:0;z-index:2;pointer-events:none;
  background:
    linear-gradient(0deg, rgba(7,15,11,.9) 0%, rgba(7,15,11,.5) 26%, rgba(7,15,11,0) 58%),
    linear-gradient(90deg, rgba(7,15,11,.42) 0%, rgba(7,15,11,0) 55%)}
#heroUI{position:absolute;inset:0;z-index:4;pointer-events:none;
  display:flex;flex-direction:column;justify-content:flex-end;padding:0 5vw 10vh}
#heroUI .eyebrow{color:var(--accent);margin-bottom:1.4rem;text-shadow:0 1px 12px rgba(7,15,11,.6)}
#heroUI h1{font-size:clamp(2.5rem,6.6vw,6.2rem);line-height:1.02;font-weight:400;
  letter-spacing:-.035em;max-width:14ch;
  /* drop-shadow on the parent: a text-shadow would be clipped into boxes by the line masks */
  filter:drop-shadow(0 2px 18px rgba(7,15,11,.5))}
#heroUI h1 .ln{display:block;overflow:hidden;padding-bottom:.07em}
#heroUI h1 .ln span{display:block}
#heroUI .sub{margin-top:1.6rem;max-width:52ch;color:rgba(233,237,228,.88);font-size:1rem;
  line-height:1.7;text-shadow:0 1px 12px rgba(7,15,11,.6)}
#scrollCue{position:absolute;bottom:2.4rem;right:5vw;color:rgba(233,237,228,.6);z-index:3;
  pointer-events:none;text-shadow:0 1px 10px rgba(7,15,11,.6)}
.grain{position:absolute;inset:0;pointer-events:none;opacity:.09;z-index:4;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/></filter><rect width='100%' height='100%' filter='url(%23n)' opacity='.5'/></svg>")}
#heroFade{position:absolute;inset:0;z-index:5;pointer-events:none;background:var(--ink);opacity:0}
@media(max-width:860px){
  #heroWrap{height:180vh}
  #yearReadout{top:5.6rem;gap:.4rem}
  #yearReadout .mono:first-child{display:none}
  .yrTrack{width:7rem}
}
@media(prefers-reduced-motion:reduce){ #heroScene *{animation:none!important} }

/* -------------------------------------------------------- fireflies layer */
#fx{position:fixed;inset:0;z-index:6;pointer-events:none;opacity:0}

/* ----------------------------------------------------------------- shell */
main{position:relative;z-index:5;background:var(--ink)}
section{padding:7.5rem 5vw;max-width:var(--maxw);margin:0 auto;position:relative;z-index:7;
  scroll-margin-top:3rem}
.secHead{display:flex;align-items:baseline;gap:1.2rem;margin-bottom:3.2rem;
  border-bottom:1px solid var(--line);padding-bottom:1.1rem}
.secHead .num{color:var(--accent)}
.secHead h2{font-size:clamp(1.6rem,3.2vw,2.5rem);font-weight:400;letter-spacing:-.02em}
.lede{color:var(--muted);margin-bottom:2rem;font-size:.92rem}

/* ----------------------------------------------------------------- about */
.aboutGrid{display:grid;grid-template-columns:1.25fr 1fr;gap:4.5rem;align-items:start}
.aboutGrid p{line-height:1.85;color:var(--muted);margin-bottom:1.15rem;font-size:1.01rem}
.aboutGrid strong{color:var(--text);font-weight:400}
.aiNote{margin-top:2rem;padding:1.5rem 1.6rem;border:1px solid rgba(169,196,160,.3);
  transition:border-color .5s,background-color .5s}
.aiNote:hover{border-color:rgba(169,196,160,.6);background:rgba(169,196,160,.03)}
.aiNote p{margin:0;color:var(--text)}
.aiNote .k{color:var(--accent);display:block;margin-bottom:.8rem}
.portraitCol{display:flex;flex-direction:column}
.portrait{position:relative;overflow:hidden;border:1px solid var(--line)}
.portrait img{width:100%;height:auto;display:block;opacity:.92;transition:transform .9s var(--ease),opacity .6s}
.portrait:hover img{transform:scale(1.03);opacity:1}
.portrait figcaption{padding:.85rem 1rem;color:var(--muted);border-top:1px solid var(--line);
  position:relative;background:var(--ink)}
.statRow{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--line);
  border:1px solid var(--line);border-top:none}
.stat{background:var(--ink);padding:1.4rem 1.2rem}
.stat .v{font-family:'Instrument Serif',serif;font-size:2.1rem;color:var(--accent);line-height:1;
  font-variant-numeric:tabular-nums}
.stat .k{color:var(--muted);margin-top:.5rem;font-size:.76rem;line-height:1.5}

/* ------------------------------------------------------------ solar band */
#solarBand{max-width:none;padding:0 0 2rem;overflow:hidden}
#solarBand .inner{max-width:var(--maxw);margin:0 auto;padding:0 5vw}
#solarBand .cap{display:flex;justify-content:space-between;align-items:baseline;
  flex-wrap:wrap;gap:1rem;margin-bottom:2.4rem}
#solarBand .cap h3{font-weight:400;font-size:1.3rem;letter-spacing:-.01em}
#solarBand .cap .mono{color:var(--accent)}
#solarRow{display:flex;gap:clamp(.6rem,1.6vw,1.4rem);align-items:flex-end;
  border-bottom:1px solid rgba(233,237,228,.16)}
.spanel{flex:1 1 0;min-width:0;padding-bottom:2.2rem;position:relative;
  transition:transform .45s var(--ease)}
.spanel .glass{aspect-ratio:1.55/1;transform:skewX(-13deg);transform-origin:bottom;
  background:
    repeating-linear-gradient(90deg, rgba(169,196,160,.14) 0 1px, transparent 1px 33.4%),
    repeating-linear-gradient(0deg, rgba(169,196,160,.14) 0 1px, transparent 1px 50%),
    #122019;
  border:1px solid rgba(169,196,160,.35);transition:background-color .4s;background-color:#122019}
.spanel::after{content:"";position:absolute;left:50%;bottom:0;width:2px;height:2.2rem;
  background:rgba(233,237,228,.3)}
.spanel.lit{transform:translateY(-6px)}
.spanel.lit .glass{background-color:#1E3A2B}
@media(max-width:700px){ .spanel:nth-child(n+8){display:none} }

/* ------------------------------------------- work: timeline rail + accordion */
.jobs{position:relative;padding-left:var(--rail-pad)}
.rail{position:absolute;left:var(--rail-x);top:.5rem;bottom:.5rem;width:1px;background:var(--line)}
.railFill{position:absolute;inset:0;background:var(--accent);transform-origin:top;transform:scaleY(0)}
.job{position:relative;border:1px solid var(--line);margin-bottom:1rem;transition:border-color .4s;background:var(--ink)}
.job::before{content:"";position:absolute;top:2.35rem;left:calc(var(--rail-x) - var(--rail-pad) - 1px - 4.5px);
  width:9px;height:9px;border-radius:50%;background:var(--ink);border:1px solid rgba(169,196,160,.5);
  transition:background-color .4s,box-shadow .4s}
.job.reached::before{background:var(--accent);box-shadow:0 0 12px rgba(169,196,160,.6)}
.job.open{border-color:rgba(169,196,160,.4)}
.jobHead{width:100%;padding:1.9rem 2rem;display:grid;grid-template-columns:220px 1fr auto;
  gap:2.5rem;align-items:baseline}
.jobHead:hover .role{color:var(--accent)}
.jobHead .when{color:var(--muted)}
.jobHead .org{color:var(--accent);display:block;margin-top:.6rem;font-size:.82rem;
  letter-spacing:.01em;text-transform:none;font-family:'Inter',sans-serif;line-height:1.5}
.jobHead .role{font-size:1.4rem;font-weight:400;letter-spacing:-.01em;transition:color .3s;display:block}
.jobHead .hint{color:var(--muted);font-size:.72rem;margin-top:.55rem;display:block}
.jobHead .plus{font-family:'Instrument Serif',serif;font-size:1.9rem;color:var(--accent);
  transition:transform .5s var(--ease);line-height:1}
.job.open .plus{transform:rotate(45deg)}
.jobBody{height:0;overflow:hidden}
.job.open .jobBody{height:auto}
.jobBody .pad{padding:.4rem 2rem 2.4rem;border-top:1px solid var(--line);
  background:linear-gradient(180deg, rgba(169,196,160,.04), transparent 120px)}
.proj{margin-top:2rem;padding-left:1.4rem;border-left:2px solid rgba(169,196,160,.28);transition:border-color .4s}
.proj:hover{border-color:var(--accent)}
.proj:first-of-type{margin-top:1.6rem}
.proj .ptitle{color:var(--text);font-size:1rem;margin-bottom:.15rem}
.proj .papp{color:var(--accent);font-size:.9rem;margin-bottom:.85rem;line-height:1.5}
.proj .pdate{color:var(--muted);font-size:.76rem;margin-bottom:.7rem;letter-spacing:.05em}
.proj ul{list-style:none}
.proj li{color:var(--muted);line-height:1.75;font-size:.92rem;padding-left:1.1rem;position:relative;margin-bottom:.5rem}
.proj li::before{content:"";position:absolute;left:0;top:.78em;width:5px;height:5px;background:var(--accent);opacity:.6}

/* --------------------------------------------------- cards: quiet, static */
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line)}
.cards.two{grid-template-columns:repeat(2,1fr)}
.card{background:var(--ink);padding:1.9rem 1.5rem;transition:background-color .5s}
.card:hover{background:var(--ink-2)}
.card h3{font-weight:400;font-size:1.04rem;margin-bottom:.5rem;line-height:1.35}
.card p{color:var(--muted);font-size:.89rem;line-height:1.65}
.card .tag{color:var(--accent);margin-bottom:1rem;display:block}

/* ---------------------------------------------------------------- skills */
.skillGroups{display:grid;grid-template-columns:repeat(2,1fr);gap:2.6rem 4rem}
.skillGroup h3{color:var(--accent);font-weight:400;margin-bottom:1rem}
.chips{display:flex;flex-wrap:wrap;gap:.5rem}
.chip{border:1px solid var(--line);padding:.55rem 1rem;border-radius:999px;font-size:.85rem;color:var(--muted);
  transition:border-color .35s,color .35s,background-color .35s}
.chip:hover{border-color:rgba(169,196,160,.6);color:var(--text);background:rgba(169,196,160,.06)}

/* ----------------------------------------------------------- credentials */
.twoCol{display:grid;grid-template-columns:1fr 1fr;gap:4rem}
.listBlock h3{font-weight:400;color:var(--accent);margin-bottom:1.1rem;font-size:.98rem}
.listBlock h3.gap{margin-top:2.4rem}
.listBlock ul{list-style:none}
.listBlock li{color:var(--muted);line-height:1.7;font-size:.91rem;padding:.55rem 0;border-bottom:1px solid var(--line)}

/* --------------------------------------------------------------- contact */
#contact{padding-bottom:5rem}
.status{display:inline-flex;align-items:center;gap:.6rem;border:1px solid rgba(169,196,160,.35);
  border-radius:999px;padding:.5rem 1rem;color:var(--accent);margin-bottom:2rem}
.dot{width:7px;height:7px;border-radius:50%;background:var(--accent);position:relative}
.dot::after{content:"";position:absolute;inset:-5px;border-radius:50%;border:1px solid var(--accent);
  opacity:.55;animation:pulse 2.4s ease-out infinite}
@keyframes pulse{0%{transform:scale(.5);opacity:.7}100%{transform:scale(1.5);opacity:0}}
#contact .big{font-size:clamp(2rem,5.4vw,4.1rem);font-weight:400;line-height:1.08;letter-spacing:-.03em;max-width:17ch}
#contact .note{color:var(--muted);max-width:56ch;line-height:1.8;margin-top:1.6rem;font-size:1rem}
.reachGrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:1px;
  background:var(--line);border:1px solid var(--line);margin-top:3rem}
.reach{background:var(--ink);padding:1.6rem 1.4rem;text-decoration:none;display:block;transition:background-color .4s}
a.reach:hover{background:var(--ink-2)}
.reach .k{color:var(--muted);display:block;margin-bottom:.7rem}
.reach .v{color:var(--text);font-size:.99rem;word-break:break-word;line-height:1.45}
.reach .hint{color:var(--accent);font-size:.72rem;opacity:0;transition:opacity .3s;display:block;margin-top:.6rem}
.reach:hover .hint,.reach:focus-visible .hint{opacity:1}
.ctaRow{display:flex;flex-wrap:wrap;gap:.8rem;margin-top:2.4rem}
.cta{display:inline-flex;align-items:center;gap:.6rem;padding:.95rem 1.7rem;border-radius:999px;
  text-decoration:none;transition:background-color .35s,border-color .35s,color .35s;font-size:.93rem}
.cta.solid{background:var(--accent);color:var(--ink)}
.cta.solid:hover{background:#C3D8BB}
.cta.ghost{border:1px solid var(--line);color:var(--muted)}
.cta.ghost:hover{border-color:var(--accent);color:var(--text)}
#toast{position:fixed;left:50%;bottom:2.2rem;transform:translate(-50%,1.6rem);background:var(--accent);
  color:var(--ink);padding:.7rem 1.3rem;border-radius:999px;font-size:.85rem;opacity:0;
  pointer-events:none;z-index:120;transition:.35s}
#toast.on{opacity:1;transform:translate(-50%,0)}
footer{border-top:1px solid var(--line);padding:2.3rem 5vw;display:flex;justify-content:space-between;
  flex-wrap:wrap;gap:1rem;color:var(--muted);font-size:.79rem;max-width:var(--maxw);margin:0 auto;
  position:relative;z-index:7}
footer a{color:var(--accent);text-decoration:none}

/* ------------------------------------------------------------ responsive */
@media(max-width:960px){ .cards{grid-template-columns:repeat(2,1fr)} }
@media(max-width:860px){
  :root{--rail-x:.2rem;--rail-pad:1.3rem}
  .aboutGrid,.twoCol,.skillGroups{grid-template-columns:1fr;gap:2.6rem}
  .jobHead{grid-template-columns:1fr auto;gap:1rem;padding:1.5rem 1.2rem}
  .jobHead .when{grid-column:1 / -1;order:3}
  .job::before{top:1.95rem}
  .jobBody .pad{padding:.4rem 1.2rem 1.8rem}
  section{padding:5.5rem 5vw}
}
@media(max-width:600px){ .cards{grid-template-columns:1fr} }
@media(prefers-reduced-motion:reduce){
  html.js [data-reveal],html.js [data-reveal-item],html.js [data-masked-reveal],html.js [data-image-reveal]{visibility:visible}
  .dot::after{animation:none}
  .railFill{transform:scaleY(1)}
  .job::before{background:var(--accent)}
}

/* =====================================================================
   Energy showcase: focus cards, site-selection model, topographic texture
   Heat colours (#E0B565, #D9825B) are only used for heat or exclusions.
   ===================================================================== */
:root{--heat:#E0B565;--ember:#D9825B;--sun:#F2DC86}

/* ---------------------------------------------- collapsed role summaries */
.jobHead .sum{display:block;color:var(--muted);font-size:.92rem;line-height:1.6;margin-top:.75rem;
  max-width:62ch;font-weight:300}
.job.open .jobHead .sum{color:rgba(233,237,228,.75)}

/* ------------------------------------------------- topographic texture */
#focus,#contact{overflow:visible}
.topoHost{position:absolute;top:0;bottom:0;left:50%;width:100vw;transform:translateX(-50%);
  overflow:hidden;pointer-events:none;z-index:0;
  -webkit-mask-image:radial-gradient(ellipse 70% 60% at 50% 45%, black 20%, transparent 75%);
          mask-image:radial-gradient(ellipse 70% 60% at 50% 45%, black 20%, transparent 75%)}
.topo{position:absolute;inset:-6% 0;width:100%;height:112%}
.topoMinor{fill:none;stroke:rgba(169,196,160,.07);stroke-width:1}
.topoMajor{fill:none;stroke:rgba(169,196,160,.14);stroke-width:1.1}
#focus > :not(.topoHost),#contact > :not(.topoHost){position:relative;z-index:1}

/* --------------------------------------------------------- focus cards */
.focusLead{font-size:clamp(1.4rem,2.8vw,2.2rem);line-height:1.25;letter-spacing:-.02em;font-weight:400;
  max-width:24ch;margin-bottom:3rem}
.focusLead .serif{color:var(--accent)}
.focusGrid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line)}
.fcard{background:var(--ink);display:flex;flex-direction:column;transition:background-color .5s}
.fcard:hover{background:var(--ink-2)}
.fviz{border-bottom:1px solid var(--line);padding:1rem 1rem .4rem;
  background:radial-gradient(120% 90% at 50% 100%, rgba(169,196,160,.07), transparent 60%)}
.fviz svg{display:block;width:100%;height:auto;overflow:hidden}
.fbody{padding:1.6rem 1.5rem 1.8rem;display:flex;flex-direction:column;gap:.7rem;flex:1}
.fbody .tag{color:var(--accent)}
.fbody h3{font-weight:400;font-size:1.3rem;letter-spacing:-.01em}
.fbody p{color:var(--muted);font-size:.92rem;line-height:1.65;flex:1}
.fbtn{color:var(--text);align-self:flex-start;padding:.4rem 0;border-bottom:1px solid rgba(169,196,160,.4);
  transition:border-color .35s,color .35s}
.fbtn span{display:inline-block;transition:transform .45s var(--ease)}
.fbtn:hover{color:var(--accent);border-color:var(--accent)}
.fbtn:hover span{transform:translateX(5px)}

/* mini illustrations */
.vzTurbine line{stroke:var(--accent);stroke-width:1.6;stroke-linecap:round}
.vzTurbine circle{fill:var(--text)}
.vzSpin{transform-box:view-box;animation:vzSpin 5s linear infinite}
.vzSpin.s2{animation-duration:6.5s}
.vzSpin.s3{animation-duration:4.2s}
@keyframes vzSpin{to{transform:rotate(360deg)}}
.vzWave{fill:none;stroke:rgba(169,196,160,.45);stroke-width:1.2;animation:vzWave 6s linear infinite}
.vzWave.slow{stroke:rgba(169,196,160,.22);animation-duration:9s}
@keyframes vzWave{to{transform:translateX(-30px)}}
.vzFlow{fill:none;stroke:var(--accent);stroke-width:1.3;stroke-dasharray:3 6;animation:vzFlow 1.6s linear infinite}
.vzFlow.heat{stroke:var(--heat)}
@keyframes vzFlow{to{stroke-dashoffset:-18}}
.vzHub rect{fill:var(--ink-2);stroke:var(--sun)}
.vzHub text{fill:var(--sun);font:500 9px 'JetBrains Mono',monospace;text-anchor:middle}
.vzLabel{fill:var(--muted);font:400 7.5px 'JetBrains Mono',monospace;letter-spacing:.12em;text-transform:uppercase}
.vzBld{animation:vzGlow 4.5s ease-in-out infinite;animation-delay:var(--d,0s)}
@keyframes vzGlow{50%{filter:brightness(1.3)}}
.vzScan{animation:vzScan 5s cubic-bezier(.45,0,.55,1) infinite alternate}
.vzScan .beam{fill:url(#scanGrad)}
.vzScan .edge{fill:var(--accent);opacity:.8}
@keyframes vzScan{from{transform:translateX(0)}to{transform:translateX(262px)}}
.vzGround{stroke:rgba(233,237,228,.22);stroke-width:1}
.vzFactory{fill:#12201A;stroke:var(--accent);stroke-width:1.2}
.vzHouse{fill:#12201A;stroke:rgba(169,196,160,.6);stroke-width:1.1}
.vzSmoke{fill:rgba(233,237,228,.5);filter:blur(2.5px);transform-box:fill-box;transform-origin:center;
  opacity:0;animation:vzSmoke 3.3s ease-out infinite}
@keyframes vzSmoke{0%{transform:translate(0,0) scale(.5);opacity:0}20%{opacity:.35}100%{transform:translate(10px,-38px) scale(2.2);opacity:0}}

/* ------------------------------------------------- site-selection model */
#method{overflow:visible}
#method::before{content:"";position:absolute;top:0;bottom:0;left:50%;width:100vw;transform:translateX(-50%);
  pointer-events:none;z-index:0;
  background:
    radial-gradient(38% 40% at 72% 38%, rgba(169,196,160,.09), transparent 70%),
    radial-gradient(26% 30% at 86% 70%, rgba(242,220,134,.05), transparent 70%)}
#method > *{position:relative;z-index:1}
.methodGrid{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:4rem;align-items:start}
.methodText .lede{margin-bottom:2.5rem}
.steps{list-style:none}
.steps li{min-height:56vh}
.steps li:last-child{min-height:70vh}
.step{display:grid;grid-template-columns:auto 1fr;gap:.5rem 1.2rem;width:100%;padding:1.4rem 0;
  border-top:1px solid var(--line);opacity:.38;transition:opacity .5s var(--ease)}
.step:hover{opacity:.7}
.step.active{opacity:1}
.step .mono{color:var(--accent);grid-row:span 2;padding-top:.75rem}
.step .stitle{font-size:clamp(1.6rem,2.8vw,2.3rem);font-weight:400;letter-spacing:-.02em;line-height:1.1}
.step.active .stitle{color:var(--text)}
.step .sbody{color:var(--muted);line-height:1.7;font-size:.95rem;max-width:40ch}
.mapWrap{position:sticky;top:calc(50vh - 14rem);border:1px solid var(--line);background:rgba(7,15,11,.7)}
#siteMap{display:block;width:100%;height:auto}
.mapWrap figcaption{display:flex;justify-content:space-between;align-items:baseline;flex-wrap:wrap;
  gap:.5rem 1.2rem;padding:.85rem 1rem;border-top:1px solid var(--line)}
.readout{color:var(--muted)}
.readout b{color:var(--text);font-weight:500;font-variant-numeric:tabular-nums}
.mapNote{color:var(--muted);font-size:.72rem}
.landPoly{fill:#0F1D16;stroke:rgba(169,196,160,.45);stroke-width:1}
.hatchLine{stroke:var(--ember);stroke-width:1;opacity:.5}
.layerLane{fill:rgba(217,130,91,.08);stroke:var(--ember);stroke-width:1;stroke-dasharray:4 4}
.layerProtected{fill:url(#hatch);stroke:var(--ember);stroke-width:1;stroke-dasharray:4 4}
.layerCable{fill:none;stroke:var(--ember);stroke-width:1.4;stroke-dasharray:2 4}
.mapLabel{fill:var(--text);font:500 8.5px 'JetBrains Mono',monospace;letter-spacing:.1em;text-transform:uppercase;
  paint-order:stroke;stroke:#070F0B;stroke-width:3px;stroke-linejoin:round}
.mapLabel.dim{fill:var(--muted)}
.northArrow{fill:none;stroke:var(--muted);stroke-width:1.2}
.portMark{fill:var(--ink);stroke:var(--text);stroke-width:1.2}
.resultCable{fill:none;stroke:var(--sun);stroke-width:1.6;stroke-dasharray:4 5;animation:vzFlow 1.4s linear infinite}
.ring{fill:none;stroke:var(--sun);stroke-width:1.2;transform-box:fill-box;transform-origin:center;opacity:0}
.live .ring{animation:ring 2.4s ease-out infinite}
.live .ring.r2{animation-delay:1.2s}
@keyframes ring{from{transform:scale(1);opacity:.8}to{transform:scale(3.4);opacity:0}}
.hub circle{fill:#070F0B;stroke:var(--sun);stroke-width:1.5}
.hub text{fill:var(--sun);font:600 8px 'JetBrains Mono',monospace;text-anchor:middle;dominant-baseline:central}
.mTurbine line{stroke-linecap:round}
.mTurbine .halo{stroke:#070F0B;stroke-width:3.2}
.mTurbine .core{stroke:#F5F7F2;stroke-width:1.2}
.mTurbine .blades{transform-box:view-box;animation:vzSpin 3.6s linear infinite}

@media(max-width:960px){ .focusGrid{grid-template-columns:1fr} .fcard{display:grid;grid-template-columns:1fr 1fr} .fviz{border-bottom:0;border-right:1px solid var(--line)} }
@media(max-width:860px){
  .methodGrid{grid-template-columns:1fr;gap:1.5rem}
  .mapWrap{order:-1;top:62px;z-index:3;background:var(--ink)}
  .steps li{min-height:46vh}
  .steps li:last-child{min-height:55vh}
}
@media(max-width:640px){ .fcard{display:flex} .fviz{border-right:0;border-bottom:1px solid var(--line)} }
@media(prefers-reduced-motion:reduce){
  .fviz *,#siteMap *{animation:none!important}
  .step{opacity:1}
}