/* ============================================================
   BALANCE CAPITAL / EUREKA VALLEY RANCH
   Palette: Ink #17140F · Gold #C9A24B · Cream #F5F0E4 · Pine #3A4438
   Type: Fraunces (display) · Public Sans (body) · IBM Plex Mono (survey)
   Signature: surveyor's-plat rules, bearing labels, section-corner marks
   ============================================================ */

:root{
  --ink:#17140F;
  --ink-soft:#26221B;
  --gold:#C9A24B;
  --gold-deep:#A98530;
  --cream:#F5F0E4;
  --paper:#FBF8F0;
  --pine:#3A4438;
  --muted:#6E675B;
  --line:rgba(23,20,15,.16);
  --line-gold:rgba(201,162,75,.45);
  --max:1180px;
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:'Public Sans',system-ui,sans-serif;
  background:var(--paper);
  color:var(--ink);
  line-height:1.65;
  font-size:17px;
  -webkit-font-smoothing:antialiased;
}
img{display:block;max-width:100%}
.film-link{margin-top:28px;letter-spacing:0}
.film-section{scroll-margin-top:72px}
.film-section .sec-head{margin-bottom:28px}
.film-section .eyebrow{letter-spacing:0}
.film-section h2{letter-spacing:0;font-size:2.5rem}
.evr-film{display:block;width:100%;height:auto;aspect-ratio:16/9;background:#142B24;object-fit:contain}
.evr-film:focus-visible{outline:3px solid var(--gold);outline-offset:5px}
.film-section figcaption{margin-top:18px;max-width:920px;font-size:.875rem;line-height:1.6;color:rgba(245,240,228,.82)}
@media(max-width:600px){.film-section h2{font-size:1.9rem}}
a{color:inherit}

.wrap{max-width:var(--max);margin:0 auto;padding:0 28px}

/* ---- survey vernacular ---- */
.mono{font-family:'IBM Plex Mono',monospace}
.eyebrow{
  font-family:'IBM Plex Mono',monospace;
  font-size:12px;letter-spacing:.22em;text-transform:uppercase;
  color:var(--gold-deep);
  display:flex;align-items:center;gap:14px;
}
.eyebrow::before{content:"";width:34px;height:1px;background:var(--gold)}
.on-dark .eyebrow{color:var(--gold)}
.bearing{
  font-family:'IBM Plex Mono',monospace;
  font-size:11px;letter-spacing:.14em;color:var(--muted);
}
.corner{color:var(--gold);font-family:'IBM Plex Mono',monospace}

/* ---- type ---- */
h1,h2,h3{font-family:'Fraunces',serif;font-weight:500;line-height:1.08;letter-spacing:-.01em}
.display{font-size:clamp(2.6rem,6vw,4.6rem)}
h2{font-size:clamp(1.9rem,3.6vw,2.7rem);margin-bottom:.5em}
h3{font-size:1.35rem;margin-bottom:.35em}
.lede{font-size:1.16rem;color:var(--ink-soft);max-width:44rem}
p{max-width:44rem}
.muted{color:var(--muted)}

/* ---- nav ---- */
header.site{
  position:sticky;top:0;z-index:50;
  background:rgba(23,20,15,.94);backdrop-filter:blur(8px);
  color:var(--cream);
  border-bottom:1px solid rgba(201,162,75,.25);
}
.navbar{display:flex;align-items:center;justify-content:space-between;height:72px}
.brand{display:flex;align-items:baseline;gap:12px;text-decoration:none}
.brand .bc{
  font-family:'Fraunces',serif;font-size:1.15rem;letter-spacing:.06em;
}
.brand .bc span{color:var(--gold)}
.brand .div{width:1px;height:16px;background:var(--line-gold);align-self:center}
.brand .proj{font-family:'IBM Plex Mono',monospace;font-size:10.5px;letter-spacing:.2em;color:rgba(245,240,228,.65)}
nav.main{display:flex;gap:30px}
nav.main a{
  text-decoration:none;font-size:13.5px;letter-spacing:.06em;
  color:rgba(245,240,228,.8);padding:6px 0;position:relative;
}
nav.main a:hover,nav.main a.active{color:var(--gold)}
nav.main a.active::after{
  content:"";position:absolute;left:0;right:0;bottom:-2px;height:1px;background:var(--gold);
}
.menu-btn{display:none;background:none;border:1px solid var(--line-gold);color:var(--cream);
  font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:.15em;padding:8px 14px;cursor:pointer}

/* ---- hero ---- */
.hero{
  position:relative;color:var(--cream);
  min-height:82vh;display:flex;align-items:flex-end;
  background:var(--ink);
}
.hero.short{min-height:58vh}
.hero .bg{position:absolute;inset:0;overflow:hidden}
.hero .bg img{width:100%;height:100%;object-fit:cover;opacity:.82}
.hero .bg::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(23,20,15,.35) 0%,rgba(23,20,15,.05) 40%,rgba(23,20,15,.88) 100%);
}
.hero .inner{position:relative;padding:120px 0 64px;width:100%}
.hero h1{max-width:15ch}
.hero .lede{color:rgba(245,240,228,.88);margin-top:22px}
.hero .plat-line{
  margin-top:44px;padding-top:20px;border-top:1px solid rgba(201,162,75,.4);
  display:flex;flex-wrap:wrap;gap:10px 40px;
  font-family:'IBM Plex Mono',monospace;font-size:11.5px;letter-spacing:.14em;
  color:rgba(245,240,228,.72);
}
.hero .plat-line b{color:var(--gold);font-weight:500}

/* ---- sections ---- */
section{padding:96px 0}
section.tight{padding:72px 0}
.sec-head{margin-bottom:48px}
.sec-head .eyebrow{margin-bottom:18px}
.dark{background:var(--ink);color:var(--cream)}
.dark p,.dark .lede{color:rgba(245,240,228,.82)}
.dark h2,.dark h3{color:var(--cream)}
.cream-bg{background:var(--cream)}

/* ---- stat legend (surveyor's legend) ---- */
.legend{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
  border-top:1px solid var(--line-gold);border-left:1px solid var(--line-gold);
}
.legend .cell{
  border-right:1px solid var(--line-gold);border-bottom:1px solid var(--line-gold);
  padding:26px 24px;position:relative;
}
.legend .cell::before{
  content:"+";position:absolute;top:-9px;left:-5px;
  font-family:'IBM Plex Mono',monospace;font-size:13px;color:var(--gold);
}
.legend .num{
  font-family:'Fraunces',serif;font-size:2.3rem;line-height:1;letter-spacing:-.01em;
}
.legend .num small{font-size:1.1rem;color:var(--gold-deep)}
.legend .lab{
  font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--muted);margin-top:10px;
}
.dark .legend .lab{color:rgba(245,240,228,.6)}

/* ---- two-col ---- */
.cols{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center}
.cols.thirds{grid-template-columns:1.15fr .85fr}
.img-frame{position:relative}
.img-frame img{width:100%;height:100%;object-fit:cover}
.img-frame .cap{
  font-family:'IBM Plex Mono',monospace;font-size:10.5px;letter-spacing:.12em;
  color:var(--muted);margin-top:10px;
}
.dark .img-frame .cap{color:rgba(245,240,228,.55)}
.img-frame.gold-edge{border-bottom:3px solid var(--gold)}

/* ---- cards ---- */
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:28px}
.card{
  background:var(--paper);border:1px solid var(--line);
  padding:0 0 26px;
}
.card img{width:100%;height:210px;object-fit:cover}
.card .pad{padding:22px 24px 0}
.card h3{margin-top:6px}
.card .eyebrow{margin-bottom:8px;font-size:10.5px}
.card p{font-size:.95rem;color:var(--muted)}
.dark .card{background:var(--ink-soft);border-color:rgba(201,162,75,.25)}
.dark .card p{color:rgba(245,240,228,.7)}

/* ---- phase timeline ---- */
.phases{border-top:1px solid var(--line)}
.phase{
  display:grid;grid-template-columns:150px 1fr 2fr;gap:32px;
  padding:30px 0;border-bottom:1px solid var(--line);align-items:baseline;
}
.phase .ph{font-family:'Fraunces',serif;font-size:1.5rem}
.phase .yrs{font-family:'IBM Plex Mono',monospace;font-size:12px;letter-spacing:.14em;color:var(--gold-deep)}
.phase p{font-size:.97rem;color:var(--muted);max-width:none}

/* ---- principles list ---- */
.principles{display:grid;grid-template-columns:1fr 1fr;gap:44px 56px}
.principle{border-top:1px solid var(--line-gold);padding-top:20px}
.principle h3{font-size:1.2rem}
.principle p{font-size:.97rem;color:var(--muted)}
.dark .principle p{color:rgba(245,240,228,.72)}

/* ---- CTA band ---- */
.cta-band{
  background:var(--ink);color:var(--cream);text-align:left;
}
.cta-band .inner{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:32px}
.btn{
  display:inline-block;text-decoration:none;
  font-family:'IBM Plex Mono',monospace;font-size:12.5px;letter-spacing:.18em;text-transform:uppercase;
  padding:16px 34px;border:1px solid var(--gold);color:var(--gold);
  transition:background .2s,color .2s;
}
.btn:hover{background:var(--gold);color:var(--ink)}
.btn.solid{background:var(--gold);color:var(--ink)}
.btn.solid:hover{background:var(--gold-deep);border-color:var(--gold-deep)}

/* ---- team ---- */
.person{display:grid;grid-template-columns:280px 1fr;gap:48px;align-items:start}
.person .headshot{
  aspect-ratio:1;background:var(--ink);color:var(--gold);
  display:flex;align-items:center;justify-content:center;
  font-family:'Fraunces',serif;font-size:4rem;
  border-bottom:3px solid var(--gold);
}
.role{font-family:'IBM Plex Mono',monospace;font-size:11.5px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--gold-deep);margin:6px 0 18px}

/* ---- contact ---- */
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:64px}
.contact-block{border-top:1px solid var(--line-gold);padding-top:22px}
.contact-block .lab{font-family:'IBM Plex Mono',monospace;font-size:11px;
  letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin-bottom:8px}
.contact-block a{color:var(--gold-deep);text-decoration:none}
.contact-block a:hover{text-decoration:underline}

/* ---- footer ---- */
footer.site{
  background:var(--ink);color:rgba(245,240,228,.65);
  padding:56px 0 40px;font-size:.9rem;
  border-top:1px solid rgba(201,162,75,.3);
}
footer .top{display:flex;flex-wrap:wrap;justify-content:space-between;gap:28px;margin-bottom:36px}
footer nav{display:flex;gap:24px;flex-wrap:wrap}
footer nav a{text-decoration:none;color:rgba(245,240,228,.65)}
footer nav a:hover{color:var(--gold)}
footer .fine{
  font-family:'IBM Plex Mono',monospace;font-size:10.5px;letter-spacing:.08em;
  color:rgba(245,240,228,.4);line-height:1.8;max-width:none;
  border-top:1px solid rgba(245,240,228,.12);padding-top:24px;
}

/* ---- reveal ---- */
.reveal{opacity:0;transform:translateY(18px);transition:opacity .7s ease,transform .7s ease}
.reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .reveal{opacity:1;transform:none;transition:none}
  html{scroll-behavior:auto}
}

/* ---- focus ---- */
a:focus-visible,button:focus-visible{outline:2px solid var(--gold);outline-offset:3px}

/* ---- responsive ---- */
@media (max-width:900px){
  .cols,.cols.thirds,.contact-grid,.principles{grid-template-columns:1fr;gap:40px}
  .grid3{grid-template-columns:1fr}
  .phase{grid-template-columns:1fr;gap:8px}
  .person{grid-template-columns:1fr}
  .person .headshot{max-width:280px}
  nav.main{
    display:none;position:absolute;top:72px;left:0;right:0;
    background:var(--ink);flex-direction:column;gap:0;
    border-bottom:1px solid var(--line-gold);
  }
  nav.main.open{display:flex}
  nav.main a{padding:16px 28px;border-top:1px solid rgba(245,240,228,.08)}
  .menu-btn{display:block}
  section{padding:64px 0}
  .hero .inner{padding:96px 0 48px}
}

/* Accessible review refinements */
.brand .bc{font-size:clamp(.9rem,2.4vw,1.15rem)}
nav.main a,.menu-btn{font-size:.875rem}
.bearing,.cap,footer.site .fine{font-size:.75rem}
a{overflow-wrap:anywhere}
a:focus-visible,button:focus-visible{outline:3px solid var(--gold);outline-offset:5px}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.reveal{opacity:1!important;transform:none!important;transition:none!important}}

/* Project visuals, separated from readable copy */
.clean-intro{min-height:0;background:var(--ink)}
.clean-intro .inner{padding:72px 28px 44px}
.clean-intro h1{max-width:20ch}
.vision-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:40px 28px}
.vision-card,.vision-wide{margin:0}
.vision-card img{width:100%;height:auto;aspect-ratio:16/9;object-fit:contain;background:#17140f}
.vision-card figcaption,.vision-wide figcaption{padding:22px 0 10px}
.vision-card h3,.vision-wide h3{font-size:1.5rem}
.concept-label{display:block;font-size:.75rem;color:var(--muted);margin-top:14px}
.vision-wide{margin-top:60px;border-top:1px solid var(--line);padding-top:40px}
.vision-wide img{width:100%;height:auto}
.medical-note{padding:32px;border:1px solid var(--line);margin:40px 0}
.medical-note h3{margin:18px 0}
@media(max-width:700px){.vision-grid{grid-template-columns:1fr}.clean-intro .inner{padding:48px 28px 36px}.vision-wide{margin-top:32px;padding-top:24px}}