/* 8th Wave Media — heritage survey design system.
   Shared vocabulary with USLakeFront: USGS topographic sheets, WPA park
   posters, brass benchmark discs. American by lineage, not by flag. */
:root{
  --deep:#14293D; --deep_2:#1D3A52; --water:#2C6E7F; --shallow:#6FA8A5;
  --sand:#E3D5B8; --sand2:#F4EEE1; --pine:#3A5A40; --gold:#C08A2E;
  --sunset:#C2532F; --sunset2:#9C3F22; --ink:#1A211F; --ink2:#3D4A48;
  --muted:#6E7B78; --line:#D9DFDB; --rule:#C8BFA8; --bg:#FAF8F3; --card:#fff;
  --ok:#3A6B4F; --okbg:#E7F0E9; --warn:#9A6B1E; --warnbg:#FAF0DC;
  --bad:#A3402B; --badbg:#F8E9E5; --info:#2C6E7F; --infobg:#E4EFF1;
  --display:'Fraunces',Georgia,serif; --body:'Inter',-apple-system,'Segoe UI',sans-serif;
  --mono:'JetBrains Mono',ui-monospace,monospace;
  --r:14px; --r2:9px; --sh:0 1px 3px rgba(20,41,61,.07);
  --sh2:0 10px 34px rgba(20,41,61,.13);
}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--body);
  font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased}
a{color:var(--water);text-decoration:none}
h1,h2,h3{font-family:var(--display);font-weight:600;letter-spacing:-.025em;margin:0;line-height:1.14}
h1{font-size:clamp(2.2rem,5vw,3.6rem)} h2{font-size:clamp(1.7rem,3.2vw,2.5rem)} h3{font-size:1.12rem}
p{margin:0}
.wrap{max-width:1220px;margin:0 auto;padding:0 26px}
.between{display:flex;justify-content:space-between;align-items:center;gap:20px}
.row{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.tightpad{padding:76px 0}
.mono{font-family:var(--mono)} .tiny{font-size:.74rem} .muted{color:var(--muted)}
.eyebrow{font:700 .7rem/1 var(--body);letter-spacing:.22em;text-transform:uppercase;color:var(--water)}
.star{color:var(--gold);letter-spacing:.3em}
.srule{height:0;border-top:2px solid var(--deep);border-bottom:1px solid var(--rule);
  padding-bottom:3px;margin:12px 0 16px;width:52px}
.srule.light{border-top-color:var(--gold);border-bottom-color:rgba(255,255,255,.28)}
.lede{font-size:1.08rem;color:var(--ink2);max-width:58ch;margin-top:14px}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:11px 20px;border-radius:var(--r2);border:1px solid #0D1B28;cursor:pointer;
  font:600 .92rem var(--body);color:#fff;
  background:linear-gradient(180deg,#1D3A52,var(--deep));
  box-shadow:0 1px 0 rgba(255,255,255,.1) inset,0 2px 5px rgba(20,41,61,.22);
  transition:background .15s,box-shadow .15s,transform .08s}
.btn:hover{background:linear-gradient(180deg,#26496A,#1D3A52)}
.btn:active{transform:translateY(1px)}
.btn.sm{padding:8px 15px;font-size:.85rem}
.btn.lg{padding:14px 26px;font-size:1rem}
.btn.sun{background:linear-gradient(180deg,#D96238,var(--sunset));border-color:var(--sunset2);
  text-shadow:0 1px 1px rgba(0,0,0,.22);box-shadow:0 1px 0 rgba(255,255,255,.22) inset,0 2px 6px rgba(156,63,34,.28)}
.btn.sun:hover{background:linear-gradient(180deg,#E06E42,#D96238)}
.btn.ghost{background:#fff;color:var(--deep);border-color:var(--line);box-shadow:none;text-shadow:none}
.btn.ghost:hover{background:var(--sand2);border-color:var(--shallow)}
.btn.light{background:#fff;color:var(--deep);border-color:#fff;text-shadow:none;box-shadow:0 2px 8px rgba(20,41,61,.18)}
.btn.light:hover{background:var(--sand2);border-color:var(--sand2)}

/* header */
.hdr{position:sticky;top:0;z-index:200;background:rgba(250,248,243,.93);
  backdrop-filter:blur(12px);border-bottom:1px solid var(--line);padding:13px 0}
.brandlink{display:inline-flex}
.brand{display:inline-flex;align-items:center;gap:11px}
.brand-txt{display:flex;flex-direction:column;line-height:1;gap:3px}
.brand-txt b{font-family:var(--display);font-weight:700;font-size:1.14rem;letter-spacing:-.025em;color:var(--deep);white-space:nowrap}
.brand-txt b span{color:var(--water)}
.brand-txt i{font-style:normal;font:600 .52rem var(--body);letter-spacing:.15em;text-transform:uppercase;color:var(--muted);white-space:nowrap}
.brand-txt.on-dark b{color:#fff} .brand-txt.on-dark b span{color:var(--gold)}
.brand-txt.on-dark i{color:rgba(255,255,255,.5)}
.nav{display:flex;align-items:center;gap:24px}
.nav a{color:var(--ink2);font-size:.93rem;font-weight:500}
.nav a:hover{color:var(--deep)}
@media(max-width:820px){.nav a:not(.btn){display:none}.brand-txt i{display:none}}

/* hero */
.hero{position:relative;overflow:hidden;padding:96px 0 100px;
  background:linear-gradient(120deg,#14293D 0%,#1B3A52 48%,#245A6B 100%)}
.hero-art{position:absolute;inset:0;width:100%;height:100%}
.hero-in{position:relative;z-index:2;max-width:820px}
.hero h1{color:#fff;margin-top:16px}
.hero .lede{color:rgba(255,255,255,.85);font-size:1.14rem;max-width:62ch}
.hero-stats{display:flex;gap:46px;margin-top:38px;flex-wrap:wrap}
.hero-stats .n{font-family:var(--display);font-size:2.2rem;font-weight:600;color:#fff;line-height:1}
.hero-stats .l{font:600 .64rem var(--body);letter-spacing:.14em;text-transform:uppercase;color:var(--gold);margin-top:6px}

/* section heads */
.sec-head{text-align:center;margin-bottom:40px}
.sec-head .srule{margin-left:auto;margin-right:auto}
.sec-head p{color:var(--muted);max-width:64ch;margin:12px auto 0}

/* topo texture */
.topo{position:relative}
.topo::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.5;
  background-image:repeating-radial-gradient(circle at 18% 30%,transparent 0 26px,rgba(20,41,61,.045) 26px 27px),
    repeating-radial-gradient(circle at 82% 72%,transparent 0 34px,rgba(20,41,61,.035) 34px 35px)}
.topo>*{position:relative;z-index:1}

/* portfolio */
.pgrid{display:grid;grid-template-columns:repeat(2,1fr);gap:20px}
@media(max-width:900px){.pgrid{grid-template-columns:1fr}}
.pcard{background:#fff;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;
  display:flex;flex-direction:column;transition:box-shadow .18s,transform .18s}
.pcard:hover{box-shadow:var(--sh2);transform:translateY(-2px)}
.pcard.internal{background:var(--sand2)}
.pcard-bar{height:4px}
.pcard-body{padding:24px 26px 22px;display:flex;flex-direction:column;flex:1;gap:14px}
.pcard h3{font-size:1.32rem;color:var(--deep)}
.one-line{font-size:.95rem;color:var(--ink2);margin-top:5px;font-weight:500}
.plain{font-size:.92rem;color:var(--muted);line-height:1.65}
.proof{display:grid;grid-template-columns:repeat(auto-fit,minmax(108px,1fr));gap:1px;
  background:var(--line);border:1px solid var(--line);border-radius:var(--r2);overflow:hidden}
.proof div{background:var(--sand2);padding:12px 13px}
.proof b{display:block;font-family:var(--display);font-size:1.3rem;font-weight:600;color:var(--deep);line-height:1}
.proof span{display:block;font-size:.7rem;color:var(--muted);margin-top:5px;line-height:1.4}
.detail{font-size:.85rem;color:var(--muted);line-height:1.6;padding-top:2px}
.pcard-foot{margin-top:auto;padding-top:14px;border-top:1px solid var(--line);
  display:flex;justify-content:space-between;align-items:center;gap:12px}
.pcard-foot .mono{color:var(--muted)}
.pill{display:inline-block;padding:3px 10px;border-radius:99px;font:600 .7rem var(--body);
  letter-spacing:.04em;text-transform:uppercase;white-space:nowrap}
.pill.ok{background:var(--okbg);color:var(--ok)} .pill.info{background:var(--infobg);color:var(--info)}

/* method */
.mgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:18px}
.mcard{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:24px 26px;position:relative}
.mnum{font-family:var(--display);font-size:.9rem;font-weight:700;color:var(--gold);letter-spacing:.06em}
.mcard h3{margin:8px 0 10px;color:var(--deep);font-size:1.16rem}
.what{font-size:.92rem;color:var(--ink2);line-height:1.65}
.why{font-size:.85rem;color:var(--muted);line-height:1.65;margin-top:11px;
  padding-top:11px;border-top:1px solid var(--line)}

/* stack */
.stack-table{max-width:820px;margin:0 auto;border:1px solid var(--rule);border-radius:var(--r);overflow:hidden}
.strow{display:grid;grid-template-columns:150px 1fr;gap:18px;padding:15px 22px;
  border-bottom:1px solid var(--line);background:#fff;align-items:baseline}
.strow:last-child{border-bottom:0}
.strow:nth-child(odd){background:var(--sand2)}
.strow span{font:600 .68rem var(--body);letter-spacing:.13em;text-transform:uppercase;color:var(--muted)}
.strow b{font-weight:500;color:var(--ink2);font-size:.93rem}
@media(max-width:620px){.strow{grid-template-columns:1fr;gap:5px}}

/* cta */
.cta{background:linear-gradient(120deg,#14293D,#245A6B);padding:64px 0}
.cta-in{display:flex;justify-content:space-between;align-items:center;gap:34px;flex-wrap:wrap}
.cta h2{color:#fff;margin-top:12px}
.cta p{color:rgba(255,255,255,.8);margin-top:10px;max-width:52ch}

/* footer */
.ftr{background:var(--deep);border-top:3px solid var(--gold);padding:52px 0 28px;color:rgba(255,255,255,.7)}
.ftr-top{display:grid;grid-template-columns:1.2fr 1fr;gap:44px;padding-bottom:30px;
  border-bottom:1px solid rgba(255,255,255,.12)}
.ftr-note{font-size:.82rem;color:rgba(255,255,255,.55);margin-top:14px;max-width:44ch;line-height:1.6}
.ftr-links{display:grid;grid-template-columns:1fr 1fr;gap:28px}
.ftr-links b{display:block;font:700 .66rem var(--body);letter-spacing:.15em;text-transform:uppercase;
  color:var(--gold);margin-bottom:11px}
.ftr-links a{display:block;color:rgba(255,255,255,.72);font-size:.9rem;padding:3px 0}
.ftr-links a:hover{color:#fff}
.ftr-bot{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;
  padding-top:20px;font-size:.8rem;color:rgba(255,255,255,.45)}
@media(max-width:820px){.ftr-top{grid-template-columns:1fr;gap:30px}}

/* status page */
.stat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px}
.stat-card{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:18px 20px}
.stat-card h3{font-size:.7rem;font-family:var(--body);font-weight:700;letter-spacing:.15em;
  text-transform:uppercase;color:var(--muted);margin-bottom:12px}
.srow2{display:flex;justify-content:space-between;gap:12px;padding:6px 0;
  border-bottom:1px solid var(--line);font-size:.88rem}
.srow2:last-child{border-bottom:0}
.dot{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:7px;vertical-align:1px}
.dot.up{background:var(--ok)} .dot.down{background:var(--bad)}
.field{margin-bottom:14px}
.field label{display:block;font:600 .68rem var(--body);letter-spacing:.12em;
  text-transform:uppercase;color:var(--muted);margin-bottom:6px}
.field input{width:100%;padding:11px 13px;border:1px solid var(--line);border-radius:var(--r2);
  font-family:var(--body);font-size:.95rem;background:#fff}
.field input:focus{outline:2px solid var(--shallow);outline-offset:-1px}
.note{padding:12px 15px;border-radius:var(--r2);font-size:.88rem;line-height:1.6}
.note.bad{background:var(--badbg);color:var(--bad)}