/* ============================================================
   base.css — shared foundations and chrome for the DPG Collaborative site.
   Tokens, reset, navigation, buttons, section scaffolding and footer
   are shared by every page; page-specific styles live in home.css / journey.css.
   ============================================================ */

@import url('../fonts/fonts.css');

:root{
  --navy:#0b1f33; --navy-2:#102a44; --slate:#1d3a57; --ink:#0e1c2b;
  --paper:#f6f8fa; --paper-2:#eef2f6; --line:#d6dee6; --muted:#5b6b7a;
  --teal:#0fa3a3; --teal-deep:#0c7d7d; --white:#ffffff; --signal:#2f80ed;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:'Inter',system-ui,sans-serif;color:var(--ink);background:var(--white);line-height:1.55;-webkit-font-smoothing:antialiased;}
.mono{font-family:'IBM Plex Mono',monospace}
.wrap{max-width:1160px;margin:0 auto;padding:0 32px}
a{color:inherit;text-decoration:none}
h1,h2,h3{line-height:1.12;letter-spacing:-0.02em;font-weight:600}

/* ---- Accessibility ---- */
:focus-visible{outline:2px solid var(--teal);outline-offset:3px;border-radius:4px}
.btn-pri:focus-visible{outline-color:#03252a}
.skip-link{position:fixed;left:12px;top:-60px;z-index:100;background:var(--teal);color:#03252a;padding:10px 16px;border-radius:7px;font-size:14px;font-weight:600;transition:top .15s}
.skip-link:focus{top:12px}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{transition-duration:.01ms !important;animation-duration:.01ms !important}
}

/* ---- Nav ---- */
nav{position:sticky;top:0;z-index:50;background:rgba(11,31,51,.92);backdrop-filter:blur(8px);border-bottom:1px solid rgba(255,255,255,.08);}
nav .wrap{display:flex;align-items:center;justify-content:space-between;height:64px}
.brand{display:flex;align-items:center;gap:11px;color:#fff}
.mark{width:26px;height:26px;flex:none}
.brand b{font-weight:600;font-size:15px;letter-spacing:-0.01em}
.brand span{display:block;font-size:10.5px;color:#8fa6bd;letter-spacing:.04em;text-transform:uppercase;margin-top:1px}
.nlinks{display:flex;gap:30px;align-items:center}
[data-site-variant="proposal"] .nlinks{gap:20px}
.nlinks a{color:#c2d2e2;font-size:13.5px;font-weight:500}
.nlinks a:hover{color:#fff}
.nlinks a.active{color:#fff}
.nbtn{border:1px solid rgba(255,255,255,.25);padding:8px 16px;border-radius:6px;color:#fff !important;font-size:13px;}
.nbtn:hover{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.45)}

/* Hamburger: hidden on desktop, shown when the link row collapses. */
.nav-burger{display:none;background:none;border:1px solid rgba(255,255,255,.18);border-radius:7px;padding:7px;color:#fff;cursor:pointer;line-height:0}
.nav-burger svg{width:20px;height:20px;display:block}
.nav-burger:hover{background:rgba(255,255,255,.08)}

@media(max-width:1040px){
  .nav-burger{display:inline-flex;align-items:center;justify-content:center}
  /* Links drop into a panel under the bar; the bar keeps brand + burger. */
  .nlinks{
    position:absolute;top:64px;left:0;right:0;
    flex-direction:column;align-items:stretch;gap:0;
    background:var(--navy);
    border-bottom:1px solid rgba(255,255,255,.10);
    box-shadow:0 12px 24px -16px rgba(0,0,0,.6);
    padding:6px 0;
    max-height:0;overflow:hidden;visibility:hidden;
    transition:max-height .24s ease,visibility 0s linear .24s;
  }
  nav.open .nlinks{max-height:calc(100vh - 64px);overflow-y:auto;visibility:visible;transition:max-height .26s ease}
  .nlinks a{padding:13px 32px;font-size:15px}
  .nlinks a:hover{background:rgba(255,255,255,.06)}
  .nbtn{border:none;border-radius:0;color:#5fd6d6 !important;padding:13px 32px}
  .nbtn:hover{background:rgba(255,255,255,.06);border:none}
}

/* ---- Buttons ---- */
.btn{display:inline-flex;align-items:center;gap:9px;padding:13px 22px;border-radius:7px;font-size:14.5px;font-weight:500;transition:.15s;}
.btn-pri{background:var(--teal);color:#03252a}
.btn-pri:hover{background:#16b8b8}
.btn-ghost{border:1px solid rgba(255,255,255,.28);color:#fff}
.btn-ghost:hover{background:rgba(255,255,255,.07)}
.btn svg{width:15px;height:15px}

/* ---- Section scaffolding ---- */
section{padding:88px 0}
.tag{font-family:'IBM Plex Mono',monospace;font-size:12px;color:var(--teal-deep);letter-spacing:.08em;text-transform:uppercase;margin-bottom:16px;display:block;}
h2{font-size:clamp(26px,3.2vw,38px);max-width:24ch;margin-bottom:18px}
.section-lede{font-size:17px;color:var(--muted);max-width:66ch}
.alt{background:var(--paper)}

/* ---- Proposal status ---- */
.concept-note{background:#e3f4f4;border-bottom:1px solid #b9dddd;color:#174b4b}
.concept-note .wrap{display:flex;align-items:flex-start;gap:12px;padding-top:11px;padding-bottom:11px;font-size:12.5px}
.concept-note b{color:var(--teal-deep);white-space:nowrap}
.concept-note p{max-width:80ch}
@media(max-width:560px){
  .wrap{padding-left:20px;padding-right:20px}
  .concept-note .wrap{display:block}
  .concept-note b{display:block;margin-bottom:2px}
}

/* ---- Footer ---- */
footer{background:#081726;color:#8ba0b5;padding:54px 0 40px;font-size:13.5px}
footer .wrap{display:flex;justify-content:space-between;gap:30px;flex-wrap:wrap}
footer .brand b{color:#fff}
footer a{color:#8ba0b5}
footer a:hover{color:#fff}
.fcols{display:flex;gap:60px;flex-wrap:wrap}
.fcol b{display:block;color:#cddae6;font-size:12px;text-transform:uppercase;letter-spacing:.06em;margin-bottom:14px;font-weight:600}
.fcol a{display:block;margin-bottom:9px}
.fnote{border-top:1px solid rgba(255,255,255,.08);margin-top:42px;padding-top:22px;font-size:12px;color:#62788d}