/* ============================================================
   base.css — shared foundations for every page
   (design tokens, reset, layout helpers, footer, reveal)
   Load order on each page: base.css → menu.css → [subpage.css] → page.css
   ============================================================ */

  :root{
    --steel:#2c6152;--steel-deep:#1f483c;--steel-dark:#0f231b;--steel-tint:#5d8d7e;--steel-pale:#dde8e2;
    --ink:#101713;--ink-soft:#384a43;--concrete:#eef1ed;--concrete-2:#e4e9e4;--concrete-3:#d8e0da;
    --line:#cfd8d1;--line-soft:#e1e7e2;--white:#ffffff;--amber:#3fa98a;--maxw:1320px;
    --mono:'IBM Plex Mono',ui-monospace,monospace;--sans:'Montserrat',system-ui,-apple-system,sans-serif;
  }
  *{margin:0;padding:0;box-sizing:border-box}
  html{scroll-behavior:smooth}
  body{font-family:var(--sans);color:var(--ink);background:var(--concrete);-webkit-font-smoothing:antialiased;line-height:1.5;overflow-x:hidden}
  ::selection{background:var(--steel);color:#fff}
  a{color:inherit;text-decoration:none}
  .wrap{max-width:var(--maxw);margin:0 auto;padding:0 40px}
  .wrap-narrow{max-width:920px;margin:0 auto;padding:0 40px}
  .mono{font-family:var(--mono)}
  .lbl{font-family:var(--mono);font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--steel);font-weight:500}

  /* ---- cell grid: 1px separators drawn as item borders, so an empty
     trailing cell (odd item count) stays transparent instead of filled.
     Add alongside a grid-template-columns rule on the container. ---- */
  .cell-grid{display:grid;border-top:1px solid var(--line);border-left:1px solid var(--line)}
  .cell-grid > *{border-right:1px solid var(--line);border-bottom:1px solid var(--line)}

  /* ============ FOOTER ============ */
  footer{background:var(--steel-dark);color:#9fb7ab;padding:72px 0 36px}
  .foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:48px}
  .foot-brand .brand-logo{height:46px;width:auto;display:block;margin-bottom:20px;filter:brightness(0) invert(1)}
  .foot-name{display:block;color:#fff;font-weight:800;font-size:14px;letter-spacing:.14em;line-height:1.28;text-transform:uppercase}
  .foot-brand p{margin-top:20px;font-size:14px;line-height:1.65;max-width:34ch;color:#94ada2}
  .foot-col h5{font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:#7da698;margin-bottom:20px}
  .foot-col a,.foot-col p{display:block;font-size:14px;color:#aec4ba;margin-bottom:12px;transition:color .2s}
  .foot-col a:hover{color:#fff}
  .foot-bottom{margin-top:56px;padding-top:26px;border-top:1px solid rgba(255,255,255,.12);display:flex;justify-content:space-between;align-items:center;gap:20px;font-family:var(--mono);font-size:11px;letter-spacing:.06em;color:#7da698;flex-wrap:wrap}
  @media(max-width:860px){.foot-grid{grid-template-columns:1fr 1fr;gap:36px}}
  @media(max-width:520px){.foot-grid{grid-template-columns:1fr}}

  /* ============ REVEAL-ON-SCROLL ============ */
  .reveal{opacity:0;transform:translateY(28px);transition:opacity .7s cubic-bezier(.2,.7,.2,1),transform .7s cubic-bezier(.2,.7,.2,1)}
  .reveal.in{opacity:1;transform:none}

  @media(max-width:600px){.wrap,.wrap-narrow{padding:0 22px}}