/* NORTHFIELD: the living field system for Western Educational Adventures 20X.
   Ground is deep coastal night. Steel blue is terrain data. Leaf green is the
   single signal, spent only on live data, waypoints and action. */
:root{
  --ground:#050A0D;
  --ground-2:#08131B;
  --panel:#0A1822;
  --panel-2:#0C1E2B;
  --steel:#3A6F8F;
  --deep:#21465D;
  --ice:#B9D9E4;
  --ink:#EAF3F0;
  --dim:#93A9B4;
  --faint:#5F7A86;
  --signal:#8CC63F;
  --line:rgba(140,190,214,.16);
  --line-soft:rgba(140,190,214,.09);
  --mono:ui-monospace,"SF Mono","Cascadia Mono",Menlo,Consolas,monospace;
  --sans:"Avenir Next","Segoe UI",system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif;
  --pad:clamp(20px,4.5vw,64px);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
html,body{margin:0;padding:0}
body{
  background:var(--ground);
  color:var(--ink);
  font-family:var(--sans);
  font-size:17px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%;height:auto;display:block}
a{color:var(--ice)}
a:hover{color:#fff}
:focus-visible{outline:2px solid var(--signal);outline-offset:3px}
::selection{background:var(--signal);color:#08130A}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:-999px;top:0;background:var(--signal);color:#08130A;padding:12px 18px;z-index:60;font-family:var(--mono);font-size:.8rem}
.skip:focus{left:8px;top:8px}
.wrap{max-width:1240px;margin:0 auto;padding-left:var(--pad);padding-right:var(--pad)}

/* concept marker */
.concept-strip{
  font-family:var(--mono);font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--dim);border-bottom:1px solid var(--line-soft);
  padding:calc(8px + env(safe-area-inset-top)) var(--pad) 8px;text-align:center;
}
.concept-strip b{color:var(--signal);font-weight:400}

/* header */
.site-header{position:relative;border-bottom:1px solid var(--line);background:rgba(5,10,13,.86)}
.header-in{display:flex;align-items:center;gap:20px;min-height:76px;max-width:1240px;margin:0 auto;padding-left:var(--pad);padding-right:var(--pad)}
.brand{display:flex;align-items:center;gap:14px;text-decoration:none;color:var(--ink);min-height:48px}
.brand img{width:42px;height:42px;border-radius:50%}
.brand-text{font-weight:300;font-size:1.02rem;letter-spacing:.04em;line-height:1.15;text-transform:uppercase}
.brand-text small{display:block;font-family:var(--mono);font-size:.6rem;letter-spacing:.22em;color:var(--faint);text-transform:uppercase;margin-top:3px}
.main-nav{margin-left:auto;display:flex;gap:4px}
.main-nav a{
  font-family:var(--mono);font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--dim);text-decoration:none;padding:14px 10px;min-height:48px;display:flex;align-items:center;position:relative;
}
.main-nav a:hover{color:#fff}
.main-nav a.current{color:var(--signal)}
.main-nav a.current::after{content:"";position:absolute;left:10px;right:10px;bottom:6px;height:1px;background:var(--signal)}
.menu-btn{
  display:none;margin-left:auto;background:none;border:1px solid var(--line);color:var(--ink);
  font-family:var(--mono);font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;
  min-height:48px;padding:0 20px;cursor:pointer;
}
.mobile-menu{border-top:1px solid var(--line-soft);padding:8px var(--pad) 16px;background:var(--ground-2)}
.mobile-menu a{display:flex;align-items:center;min-height:48px;color:var(--ink);text-decoration:none;font-family:var(--mono);font-size:.78rem;letter-spacing:.12em;text-transform:uppercase;border-bottom:1px solid var(--line-soft)}
.mobile-menu a.current{color:var(--signal)}
.mm-label{display:block;font-family:var(--mono);font-size:.62rem;letter-spacing:.2em;color:var(--faint);text-transform:uppercase;margin:16px 0 2px}

/* breadcrumbs as field coordinates */
.crumbs{max-width:1240px;margin:0 auto;padding:18px var(--pad) 0;font-family:var(--mono);font-size:.66rem;letter-spacing:.18em;text-transform:uppercase;color:var(--faint)}
.crumbs a{color:var(--dim);text-decoration:none}
.crumbs a:hover{color:var(--signal)}
.crumbs .sep{color:var(--steel);margin:0 8px}
.crumbs .here{color:var(--ice)}

/* typography */
h1{font-weight:200;font-size:clamp(2.5rem,7vw,4.6rem);line-height:1.04;letter-spacing:-.015em;margin:0 0 22px}
h2{font-weight:250;font-size:clamp(1.7rem,4vw,2.5rem);line-height:1.12;letter-spacing:-.01em;margin:64px 0 18px}
h2:first-child{margin-top:0}
h3{font-weight:400;font-size:1.22rem;line-height:1.3;margin:0 0 8px}
p{margin:0 0 16px;max-width:68ch}
.lede{font-size:clamp(1.08rem,2vw,1.3rem);font-weight:300;color:var(--ice);max-width:56ch;line-height:1.55}
.kicker{font-family:var(--mono);font-size:.68rem;letter-spacing:.24em;text-transform:uppercase;color:var(--signal);margin:0 0 18px}
.kicker::before{content:"";display:inline-block;width:26px;height:1px;background:var(--signal);vertical-align:middle;margin-right:12px}
.fineprint{font-size:.86rem;color:var(--dim);max-width:70ch}
strong{font-weight:600}

/* telemetry: facts as instrument readouts */
.tele{font-family:var(--mono);font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:var(--dim)}
.tele b{color:var(--ink);font-weight:400}
.tele .sig{color:var(--signal)}
.factbar{display:flex;flex-wrap:wrap;border-top:1px solid var(--line);border-bottom:1px solid var(--line);margin:26px 0}
.factbar .fact{padding:14px 22px 14px 0;margin-right:22px;border-right:1px solid var(--line-soft);padding-right:22px}
.factbar .fact:last-child{border-right:0}
.fact .fl{font-family:var(--mono);font-size:.6rem;letter-spacing:.2em;text-transform:uppercase;color:var(--faint);display:block;margin-bottom:4px}
.fact .fv{font-family:var(--mono);font-size:.92rem;color:var(--ink);font-variant-numeric:tabular-nums;white-space:nowrap}
.fact .fv.sig{color:var(--signal)}

/* hero: terrain resolving from data into landscape */
.hero{position:relative;min-height:94svh;display:flex;align-items:flex-end;overflow:hidden;border-bottom:1px solid var(--line)}
.hero-media{position:absolute;inset:0}
.hero-media img,.hero-media canvas{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero-media canvas{opacity:0;transition:opacity 1.2s ease}
.hero-media canvas.live{opacity:1}
.hero-scrim{position:absolute;inset:0;background:linear-gradient(180deg,rgba(5,10,13,.42) 0%,rgba(5,10,13,0) 34%,rgba(5,10,13,.30) 62%,rgba(5,10,13,.94) 100%)}
.hero-in{position:relative;z-index:3;width:100%;max-width:1240px;margin:0 auto;padding:120px var(--pad) 54px}
.hero h1{font-size:clamp(2.9rem,9vw,6.2rem);max-width:12ch;margin-bottom:18px}
.hero .lede{max-width:52ch}
.hero-cta{display:flex;flex-wrap:wrap;gap:14px;margin-top:30px}
.hero-tele{display:flex;flex-wrap:wrap;gap:0;border-top:1px solid var(--line);margin-top:44px;padding-top:16px}
.hero-tele span{font-family:var(--mono);font-size:.66rem;letter-spacing:.18em;text-transform:uppercase;color:var(--dim);padding:4px 18px 4px 0;margin-right:18px;border-right:1px solid var(--line-soft)}
.hero-tele span:last-child{border-right:0}
.hero-tele b{color:var(--signal);font-weight:400}
.wp-chip{
  position:absolute;z-index:2;font-family:var(--mono);font-size:.6rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--ice);background:rgba(5,10,13,.55);border:1px solid var(--line);padding:6px 9px;white-space:nowrap;
}
.wp-chip::before{content:"";position:absolute;left:-4px;top:50%;width:7px;height:7px;margin-top:-4px;border-radius:50%;background:var(--signal)}
.wp-chip .wpn{color:var(--signal)}

/* buttons */
.btn{
  display:inline-flex;align-items:center;justify-content:center;min-height:52px;padding:0 26px;
  font-family:var(--mono);font-size:.74rem;letter-spacing:.16em;text-transform:uppercase;text-decoration:none;
  border:1px solid var(--line);color:var(--ink);background:rgba(8,19,27,.5);cursor:pointer;
}
.btn:hover{border-color:var(--ice);color:#fff}
.btn-signal{border-color:var(--signal);color:var(--signal)}
.btn-signal:hover{background:rgba(140,198,63,.12);color:var(--signal);border-color:var(--signal)}

/* sections and route */
.section{padding:72px 0 8px}
.route{margin-top:36px;border-top:1px solid var(--line)}
.route-row{
  display:grid;grid-template-columns:110px 1fr auto;gap:8px 28px;align-items:center;
  padding:26px 0;border-bottom:1px solid var(--line-soft);text-decoration:none;color:var(--ink);
}
.route-row:hover .route-title{color:var(--signal)}
.route-idx{font-family:var(--mono);font-size:.68rem;letter-spacing:.18em;color:var(--signal)}
.route-title{font-size:clamp(1.35rem,3vw,1.9rem);font-weight:300;line-height:1.15}
.route-facts{font-family:var(--mono);font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;color:var(--dim);margin-top:6px}
.route-arrow{font-family:var(--mono);color:var(--faint);font-size:1rem}

/* panels and program data */
.panel{border:1px solid var(--line);background:var(--panel);padding:clamp(22px,3.5vw,38px);margin:0 0 26px}
.panel-head{display:flex;flex-wrap:wrap;gap:6px 20px;align-items:baseline;justify-content:space-between;border-bottom:1px solid var(--line-soft);padding-bottom:16px;margin-bottom:18px}
.panel-head h3{font-size:1.45rem;font-weight:300}
.panel-head .loc{font-family:var(--mono);font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;color:var(--dim)}
.facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:0;border-top:1px solid var(--line-soft);border-left:1px solid var(--line-soft);margin:18px 0}
.facts .f{border-right:1px solid var(--line-soft);border-bottom:1px solid var(--line-soft);padding:12px 14px}
.facts .fl{font-family:var(--mono);font-size:.58rem;letter-spacing:.2em;text-transform:uppercase;color:var(--faint);display:block;margin-bottom:5px}
.facts .fv{font-family:var(--mono);font-size:.94rem;color:var(--ink);font-variant-numeric:tabular-nums}
.facts .fv.sig{color:var(--signal)}
.notes{list-style:none;margin:0 0 16px;padding:0}
.notes li{font-size:.9rem;color:var(--dim);padding:7px 0 7px 20px;position:relative;border-bottom:1px solid var(--line-soft)}
.notes li::before{content:"";position:absolute;left:0;top:15px;width:7px;height:1px;background:var(--steel)}
.programs{display:grid;grid-template-columns:1fr 1fr;gap:26px}
.programs .panel{margin:0}

/* photo evidence frames */
.evidence{margin:0 0 18px;border:1px solid var(--line);background:var(--ground-2)}
.evidence img{width:100%;height:230px;object-fit:cover;filter:saturate(.45) contrast(1.06) brightness(.88) hue-rotate(-8deg)}
.evidence figcaption{font-family:var(--mono);font-size:.6rem;letter-spacing:.18em;text-transform:uppercase;color:var(--dim);padding:9px 12px;display:flex;justify-content:space-between;gap:12px}
.evidence figcaption .sig{color:var(--signal)}
.wide-evidence img{height:auto;max-height:480px}

/* tables */
.table-wrap{overflow-x:auto;margin:18px 0;border:1px solid var(--line)}
table{border-collapse:collapse;width:100%;min-width:540px;font-size:.94rem}
caption{text-align:left;font-family:var(--mono);font-size:.62rem;letter-spacing:.18em;text-transform:uppercase;color:var(--faint);padding:12px 14px 0}
th,td{padding:13px 14px;text-align:left;vertical-align:top;border-bottom:1px solid var(--line-soft)}
thead th{font-family:var(--mono);font-size:.62rem;letter-spacing:.16em;text-transform:uppercase;color:var(--faint);font-weight:400}
tbody th[scope="row"],tr th[scope="row"]{font-weight:500;color:var(--ink)}
td{color:var(--dim)}
td.num,th.num{font-family:var(--mono);font-variant-numeric:tabular-nums;color:var(--ink);white-space:nowrap}
tr:last-child th,tr:last-child td{border-bottom:0}

/* filter */
.filter{display:flex;flex-wrap:wrap;gap:10px;margin:26px 0 8px}
.fbtn{
  min-height:48px;padding:0 20px;background:none;border:1px solid var(--line);color:var(--dim);cursor:pointer;
  font-family:var(--mono);font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;
}
.fbtn[aria-pressed="true"]{border-color:var(--signal);color:var(--signal)}

/* steps on the route */
.steps{list-style:none;margin:30px 0;padding:0;border-top:1px solid var(--line)}
.steps li{display:grid;grid-template-columns:110px 1fr;gap:8px 28px;padding:24px 0;border-bottom:1px solid var(--line-soft)}
.steps .sidx{font-family:var(--mono);font-size:.68rem;letter-spacing:.18em;color:var(--signal);padding-top:6px}
.steps h3{font-weight:350}

/* cards grid */
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:26px;margin:26px 0}
.card{border:1px solid var(--line);background:var(--panel);padding:26px}
.card h3{font-weight:350}
.card p{color:var(--dim);font-size:.95rem}
.card p:last-child{margin-bottom:0}

/* benefits as field readings */
.readings{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:0;border:1px solid var(--line);margin:30px 0}
.reading{padding:24px;border-right:1px solid var(--line-soft)}
.reading:last-child{border-right:0}
.reading .ridx{font-family:var(--mono);font-size:.62rem;letter-spacing:.2em;color:var(--steel)}
.reading h3{font-weight:350;margin-top:10px}
.reading p{font-size:.92rem;color:var(--dim);margin:0}

blockquote.testimonial{border-left:1px solid var(--signal);margin:34px 0;padding:6px 0 6px 26px;max-width:72ch}
blockquote.testimonial p{font-size:1.12rem;font-weight:300;color:var(--ice);line-height:1.6}
blockquote.testimonial cite{font-family:var(--mono);font-style:normal;font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;color:var(--dim)}

/* forms */
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:40px;margin-top:10px}
.contact-form label{display:block;font-family:var(--mono);font-size:.64rem;letter-spacing:.16em;text-transform:uppercase;color:var(--dim);margin:18px 0 7px}
.contact-form input[type="text"],.contact-form input[type="email"],.contact-form input[type="tel"],.contact-form textarea{
  width:100%;min-height:52px;background:var(--ground-2);border:1px solid var(--line);color:var(--ink);
  font-size:16px;font-family:var(--sans);padding:12px 14px;border-radius:0;
}
.contact-form textarea{min-height:140px}
.contact-form input:focus,.contact-form textarea:focus{border-color:var(--signal);outline:none}
.contact-form .check{display:flex;align-items:center;gap:12px;min-height:48px;text-transform:none;letter-spacing:.02em;font-family:var(--sans);font-size:.92rem;color:var(--ink)}
.contact-form .check input{width:22px;height:22px;accent-color:var(--signal)}
.contact-form .btn{margin-top:20px;width:100%}

/* next step */
.next-step{border-top:1px solid var(--line);margin-top:80px;background:var(--ground-2)}
.next-step .wrap{padding-top:56px;padding-bottom:calc(60px + env(safe-area-inset-bottom))}
.next-step h2{margin:0 0 10px;font-size:clamp(1.9rem,4.5vw,3rem)}
.next-step p{color:var(--dim)}
.next-step .ns-tele{font-family:var(--mono);font-size:.66rem;letter-spacing:.18em;text-transform:uppercase;color:var(--signal);margin-bottom:16px}

/* footer */
.site-footer{border-top:1px solid var(--line);background:#04080A}
.foot-grid{display:grid;grid-template-columns:1.3fr 1fr 1fr;gap:36px;padding-top:54px;padding-bottom:36px}
.foot-brand{font-weight:300;font-size:1.15rem;text-transform:uppercase;letter-spacing:.05em}
.site-footer p{color:var(--dim);font-size:.93rem}
.foot-h{font-family:var(--mono);font-size:.62rem;letter-spacing:.2em;text-transform:uppercase;color:var(--faint);margin-bottom:14px}
.site-footer nav a{display:flex;align-items:center;min-height:44px;color:var(--dim);text-decoration:none;font-size:.93rem}
.site-footer nav a:hover{color:var(--signal)}
.foot-base{border-top:1px solid var(--line-soft);padding-top:20px;padding-bottom:calc(26px + env(safe-area-inset-bottom));display:flex;flex-wrap:wrap;gap:8px 30px;justify-content:space-between}
.foot-base p{font-family:var(--mono);font-size:.64rem;letter-spacing:.14em;text-transform:uppercase;color:var(--faint);margin:0}
.foot-base .credit{color:var(--dim)}

/* band image strip */
.band{position:relative;border-top:1px solid var(--line);border-bottom:1px solid var(--line);margin-top:70px}
.band img{width:100%;height:340px;object-fit:cover;filter:saturate(.45) contrast(1.06) brightness(.8) hue-rotate(-8deg)}
.band .band-cap{position:absolute;left:0;right:0;bottom:0;padding:14px var(--pad);font-family:var(--mono);font-size:.62rem;letter-spacing:.18em;text-transform:uppercase;color:var(--ice);background:rgba(5,10,13,.55);display:flex;justify-content:space-between;gap:14px}
.band .band-cap .sig{color:var(--signal)}

@media (max-width:900px){
  .main-nav{display:none}
  .menu-btn{display:block}
  .programs{grid-template-columns:1fr}
  .contact-grid{grid-template-columns:1fr}
  .foot-grid{grid-template-columns:1fr}
  .reading{border-right:0;border-bottom:1px solid var(--line-soft)}
  .reading:last-child{border-bottom:0}
}
@media (max-width:700px){
  .route-row{grid-template-columns:1fr auto}
  .route-idx{grid-column:1/-1}
  .steps li{grid-template-columns:1fr}
  .wp-chip{display:none}
  .hero{min-height:88svh}
  .factbar .fact{padding-right:14px;margin-right:14px}
  table{min-width:520px}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .hero-media canvas{transition:none}
}