:root{
  --navy:#0A1520; --ink:#12283D; --green:#6DA544; --green-d:#4E7D2E;
  --gold:#D4A843; --bone:#F4F6F2; --slate:#8FA0AC; --line:#1E3247;
  --serif:Georgia,'Times New Roman',serif;
  --sans:'Segoe UI',system-ui,-apple-system,Arial,sans-serif;
  --mono:Consolas,'SF Mono',ui-monospace,monospace;
}
*{box-sizing:border-box;margin:0}
html{scroll-behavior:smooth}
body{background:var(--navy);color:var(--bone);font-family:var(--sans);line-height:1.6}
.mono{font-family:var(--mono);letter-spacing:.08em}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}

/* topbar */
.topbar{display:flex;justify-content:space-between;gap:1rem;padding:.45rem 1.4rem;
  font-size:.62rem;color:var(--slate);border-bottom:1px solid var(--line);text-transform:uppercase}
.topbar-mid{color:var(--green)}

/* header */
.site-header{position:sticky;top:0;z-index:50;display:flex;align-items:center;gap:1rem;
  padding:0 1.4rem;height:76px;background:rgba(10,21,32,.92);backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line);transition:height .25s}
.site-header.condense{height:60px}
.brand{font-family:var(--serif);font-weight:700;font-size:1.25rem;letter-spacing:.04em}
.brand span{color:var(--green)}
.brand small{font-size:.5em;vertical-align:super;color:var(--slate)}
.site-nav{margin-left:auto;display:flex;align-items:center;gap:1.2rem}
.nav-link{font-family:var(--mono);font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--slate);padding:.3rem 0;border-bottom:2px solid transparent}
.nav-link:hover{color:var(--bone)}
.nav-link.active{color:var(--green);border-bottom-color:var(--green)}
.nav-cta{font-family:var(--mono);font-size:.66rem;letter-spacing:.12em;text-transform:uppercase;
  background:var(--green);color:var(--navy);font-weight:700;padding:.55rem .9rem;border-radius:3px}
.nav-cta:hover{background:#7fb658}
.nav-right{display:flex;align-items:center;gap:.8rem}
.lang{background:none;border:1px solid var(--line);color:var(--slate);font-size:.62rem;
  padding:.4rem .6rem;border-radius:3px;cursor:pointer}
.lang:hover{color:var(--bone);border-color:var(--slate)}
.burger{display:none;background:none;border:0;cursor:pointer;padding:.4rem}
.burger span{display:block;width:22px;height:2px;background:var(--bone);margin:5px 0;transition:.25s}

/* scroll gauge — drill-depth motif */
.gauge{position:fixed;top:0;left:0;right:0;height:3px;z-index:60;pointer-events:none}
.gauge i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--green-d),var(--green))}

/* hero */
.hero{position:relative;padding:7rem 1.4rem 4.5rem;
  background:linear-gradient(160deg,var(--navy) 30%,var(--ink) 100%),url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='900' height='600' viewBox='0 0 900 600'><g fill='none' stroke='%236DA544' stroke-opacity='0.10' stroke-width='1.2'><path d='M-50 480 Q150 380 320 430 T700 380 T1000 430'/><path d='M-50 420 Q170 330 340 380 T710 330 T1000 380'/><path d='M-50 360 Q190 280 360 330 T720 280 T1000 330'/><path d='M-50 300 Q210 230 380 280 T730 230 T1000 280'/><path d='M-50 240 Q230 180 400 230 T740 180 T1000 230'/><path d='M-50 180 Q250 130 420 180 T750 130 T1000 180'/><circle cx='640' cy='210' r='60'/><circle cx='640' cy='210' r='38'/><circle cx='640' cy='210' r='18'/><circle cx='230' cy='330' r='48'/><circle cx='230' cy='330' r='26'/></g></svg>");
  background-blend-mode:normal;border-bottom:1px solid var(--line);overflow:hidden}
.hero::after{content:"";position:absolute;inset:0;background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='900' height='600' viewBox='0 0 900 600'><g fill='none' stroke='%236DA544' stroke-opacity='0.10' stroke-width='1.2'><path d='M-50 480 Q150 380 320 430 T700 380 T1000 430'/><path d='M-50 420 Q170 330 340 380 T710 330 T1000 380'/><path d='M-50 360 Q190 280 360 330 T720 280 T1000 330'/><path d='M-50 300 Q210 230 380 280 T730 230 T1000 280'/><path d='M-50 240 Q230 180 400 230 T740 180 T1000 230'/><path d='M-50 180 Q250 130 420 180 T750 130 T1000 180'/><circle cx='640' cy='210' r='60'/><circle cx='640' cy='210' r='38'/><circle cx='640' cy='210' r='18'/><circle cx='230' cy='330' r='48'/><circle cx='230' cy='330' r='26'/></g></svg>") right bottom/900px no-repeat;opacity:.9;pointer-events:none}
.hero-inner{position:relative;z-index:1;max-width:880px;margin:0 auto}
.eyebrow{font-size:.64rem;color:var(--green);text-transform:uppercase;margin-bottom:1rem}
.eyebrow::before{content:"——— ";color:var(--green-d)}
h1{font-family:var(--serif);font-size:clamp(2rem,5vw,3.4rem);line-height:1.12;font-weight:700;margin-bottom:1.1rem}
h1 em{font-style:normal;color:var(--green)}
.sub{max-width:620px;color:#C7D2DB;font-size:1.02rem}
.cta-row{display:flex;flex-wrap:wrap;gap:.8rem;margin-top:1.8rem}
.btn{font-family:var(--mono);font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;
  padding:.85rem 1.3rem;border-radius:3px;border:1px solid transparent;font-weight:700}
.btn-solid{background:var(--green);color:var(--navy)}
.btn-solid:hover{background:#7fb658}
.btn-line{border-color:var(--green);color:var(--green)}
.btn-line:hover{background:rgba(109,165,68,.12)}
.btn-ghost{border-color:var(--line);color:var(--slate)}
.btn-ghost:hover{color:var(--bone);border-color:var(--slate)}
.btn-gold{background:var(--gold);color:var(--navy)}
.btn-gold:hover{filter:brightness(1.08)}

/* stats band */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);
  border-top:1px solid var(--green);border-bottom:1px solid var(--line)}
.stats div{background:var(--navy);padding:1.3rem 1rem;text-align:center}
.stats b{display:block;font-family:var(--serif);font-size:1.7rem;color:var(--green)}
.stats span{font-size:.6rem;color:var(--slate)}

/* sections + depth rail */
.sec{position:relative;padding:4.5rem 1.4rem;border-bottom:1px solid var(--line)}
.sec-dark{background:var(--ink)}
.sec-inner{max-width:1020px;margin:0 auto}
.rail{position:absolute;left:0;top:0;bottom:0;width:44px;border-right:1px solid var(--line);
  display:flex;align-items:flex-start;justify-content:center;padding-top:1rem}
.rail span{writing-mode:vertical-rl;font-size:.58rem;color:var(--green-d);letter-spacing:.2em}
.rail::before{content:"";position:absolute;top:0;bottom:0;left:50%;width:1px;
  background:repeating-linear-gradient(var(--line) 0 10px,transparent 10px 24px)}
h2{font-family:var(--serif);font-size:clamp(1.4rem,3vw,2.1rem);margin-bottom:1.4rem}
.lead{max-width:720px;color:#C7D2DB;margin-bottom:1.6rem}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:1.1rem}
.grid2{display:grid;grid-template-columns:repeat(2,1fr);gap:1.1rem}
.card{background:rgba(255,255,255,.03);border:1px solid var(--line);border-left:3px solid var(--green-d);
  padding:1.4rem;border-radius:4px;transition:transform .25s,border-color .25s}
.card:hover{transform:translateY(-3px);border-left-color:var(--green)}
.card h3{font-family:var(--serif);font-size:1.05rem;margin-bottom:.5rem}
.card p{color:#B8C4CE;font-size:.9rem}
.card-big{padding:1.8rem}
.card.empty{border-style:dashed;border-left-style:solid}
.card.dl:hover{background:rgba(109,165,68,.07)}
.tag{font-size:.6rem;color:var(--green);margin-bottom:.6rem;text-transform:uppercase}
.more{color:var(--green);font-size:.72rem}
.more:hover{text-decoration:underline}

/* timeline — catalyst pipeline (gold) */
.timeline{display:flex;list-style:none;padding:0;gap:0;counter-reset:t}
.timeline li{flex:1;position:relative;padding:1.6rem .6rem 0;text-align:center}
.timeline li::before{content:"";position:absolute;top:.45rem;left:0;right:0;height:2px;background:var(--line)}
.timeline li::after{content:"";position:absolute;top:0;left:50%;transform:translateX(-50%);
  width:12px;height:12px;border-radius:50%;background:var(--gold);border:3px solid var(--navy);box-shadow:0 0 0 1px var(--gold)}
.timeline .mono{display:block;font-size:.58rem;color:var(--gold);margin-bottom:.2rem}
.timeline b{font-size:.8rem;font-weight:600}

/* table */
.tablewrap{overflow-x:auto;border:1px solid var(--line);border-radius:4px}
table{width:100%;border-collapse:collapse;font-size:.86rem;min-width:560px}
th{font-family:var(--mono);font-size:.6rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--green);text-align:left;padding:.8rem 1rem;border-bottom:1px solid var(--green-d);background:rgba(109,165,68,.06)}
td{padding:.8rem 1rem;border-bottom:1px solid var(--line);color:#C7D2DB}
tr:hover td{background:rgba(255,255,255,.03)}

/* map slots (until photos are dropped in) */
.mapslot{border:1px dashed var(--line);border-radius:4px;min-height:220px;display:flex;
  align-items:center;justify-content:center;background:
  linear-gradient(160deg,rgba(18,40,61,.6),rgba(10,21,32,.6)),url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='900' height='600' viewBox='0 0 900 600'><g fill='none' stroke='%236DA544' stroke-opacity='0.10' stroke-width='1.2'><path d='M-50 480 Q150 380 320 430 T700 380 T1000 430'/><path d='M-50 420 Q170 330 340 380 T710 330 T1000 380'/><path d='M-50 360 Q190 280 360 330 T720 280 T1000 330'/><path d='M-50 300 Q210 230 380 280 T730 230 T1000 280'/><path d='M-50 240 Q230 180 400 230 T740 180 T1000 230'/><path d='M-50 180 Q250 130 420 180 T750 130 T1000 180'/><circle cx='640' cy='210' r='60'/><circle cx='640' cy='210' r='38'/><circle cx='640' cy='210' r='18'/><circle cx='230' cy='330' r='48'/><circle cx='230' cy='330' r='26'/></g></svg>") center/700px}
.mapslot span{font-size:.62rem;color:var(--slate)}

/* CTA band */
.cta-band{text-align:center;padding:2.5rem 1rem;border:1px solid var(--green-d);border-radius:6px;
  background:linear-gradient(160deg,rgba(109,165,68,.08),transparent)}
.cta-band h2{margin-bottom:1.4rem}

/* form */
.form{max-width:560px;display:grid;gap:1rem}
.form label{display:grid;gap:.4rem;font-size:.6rem;color:var(--slate);letter-spacing:.14em}
.form input,.form textarea{background:rgba(255,255,255,.04);border:1px solid var(--line);
  border-radius:3px;color:var(--bone);padding:.75rem;font-family:var(--sans);font-size:.95rem}
.form input:focus,.form textarea:focus{outline:2px solid var(--green);outline-offset:1px}

/* continue + footer */
.continue{border-top:1px solid var(--line);padding:1.4rem;text-align:right}
.continue a{font-size:.66rem;color:var(--slate)}
.continue b{color:var(--green)}
.continue a:hover b{text-decoration:underline}
.site-footer{background:#081018;border-top:1px solid var(--line);padding:3rem 1.4rem 2rem}
.foot-grid{max-width:1020px;margin:0 auto;display:grid;grid-template-columns:2fr 1fr 1fr 1.4fr;gap:2rem}
.foot-brand{font-size:1.1rem;margin-bottom:.6rem}
.site-footer h4{font-size:.62rem;color:var(--green);letter-spacing:.16em;text-transform:uppercase;margin-bottom:.8rem}
.site-footer a{display:block;color:var(--slate);font-size:.84rem;padding:.18rem 0}
.site-footer a:hover{color:var(--bone)}
.small{font-size:.68rem;color:var(--slate)}
.legal{max-width:1020px;margin:2.2rem auto 0;font-size:.68rem;color:#5E6E7B;border-top:1px solid var(--line);padding-top:1.2rem}
.copy{max-width:1020px;margin:.8rem auto 0}
.totop{position:fixed;right:1.1rem;bottom:1.1rem;width:42px;height:42px;border-radius:50%;
  border:1px solid var(--line);background:rgba(10,21,32,.9);color:var(--green);cursor:pointer;
  opacity:0;pointer-events:none;transition:.3s;z-index:40}
.totop.show{opacity:1;pointer-events:auto}

/* reveal */
.reveal{opacity:0;transform:translateY(18px);transition:opacity .6s,transform .6s}
.reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion: reduce){
  .reveal{opacity:1;transform:none;transition:none}
  html{scroll-behavior:auto}
}
:focus-visible{outline:2px solid var(--green);outline-offset:2px}

/* figures & photos */
.fig{margin:1.6rem 0;border:1px solid var(--line);border-radius:4px;overflow:hidden;background:#0D1B29}
.fig img{width:100%;height:auto;display:block}
.fig figcaption{padding:.7rem 1rem;font-size:.6rem;color:var(--slate);border-top:1px solid var(--line);text-transform:uppercase;letter-spacing:.1em}
.figgrid{display:grid;grid-template-columns:1fr 1fr;gap:1.1rem}
.figgrid .fig{margin:0}
.photo-band{position:relative;min-height:340px;background:linear-gradient(rgba(10,21,32,.45),rgba(10,21,32,.7)),var(--band-img) center/cover;border-bottom:1px solid var(--line);display:flex;align-items:flex-end}
.photo-band p{padding:1rem 1.4rem;font-size:.62rem;color:#D8E2DA}
.portrait{display:grid;grid-template-columns:280px 1fr;gap:1.6rem;align-items:center}
.portrait img{width:100%;border-radius:4px;border:1px solid var(--line);filter:grayscale(1)}
body[data-page="index.html"] .hero{background:linear-gradient(100deg,rgba(10,21,32,.94) 25%,rgba(10,21,32,.55) 70%,rgba(10,21,32,.35)),url("../img/hero-creek.jpg") center/cover}
body[data-page="index.html"] .hero::after{display:none}
body[data-page="esg.html"] .hero{background:linear-gradient(100deg,rgba(10,21,32,.94) 30%,rgba(10,21,32,.5)),url("../img/band-river.jpg") center 35%/cover}
body[data-page="esg.html"] .hero::after{display:none}
@media (max-width:768px){.figgrid{grid-template-columns:1fr}.portrait{grid-template-columns:1fr}}

/* mobile ≤768 */
@media (max-width:768px){
  .topbar{font-size:.52rem;gap:.5rem}
  .topbar-mid{display:none}
  .burger{display:block}
  .site-nav{position:fixed;inset:76px 0 auto 0;background:var(--navy);flex-direction:column;
    align-items:flex-start;padding:1.2rem 1.4rem 1.6rem;gap:0;border-bottom:1px solid var(--line);
    transform:translateY(-130%);transition:transform .3s;z-index:45}
  .site-nav.open{transform:none}
  .site-nav .nav-link{padding:.8rem 0;width:100%;border-bottom:1px solid var(--line);font-size:.8rem;
    opacity:0;transform:translateX(-10px);transition:opacity .3s,transform .3s}
  .site-nav.open .nav-link{opacity:1;transform:none}
  .site-nav .nav-cta{margin-top:1rem;text-align:center;width:100%}
  .grid3,.grid2{grid-template-columns:1fr}
  .stats{grid-template-columns:repeat(2,1fr)}
  .timeline{flex-direction:column;gap:1rem}
  .timeline li{text-align:left;padding:0 0 0 2rem}
  .timeline li::before{top:0;bottom:-1rem;left:.32rem;right:auto;width:2px;height:auto}
  .timeline li::after{top:.1rem;left:.38rem}
  .foot-grid{grid-template-columns:1fr 1fr}
  .rail{display:none}
  .hero{padding:4.5rem 1.4rem 3rem}
}