/* chrome.css — shared site header + footer, used by every page.
   `.gn-top` is the overlay header (home hero); `.gn-top.solid` is the
   in-flow header used on interior pages like /contact. */

/* Centered content column — shared by header, footer, and interior pages.
   (marketing.css defines it too for the home page, which doesn't load this
   file; defined here so contact pages, which DO load this file, get it.) */
.gn-wrap{max-width:1180px;margin:0 auto;padding:0 80px;box-sizing:border-box}
.gn-wrap-wide{max-width:1320px;margin:0 auto;padding:0 80px;box-sizing:border-box}
@media (max-width:1024px){ .gn-wrap,.gn-wrap-wide{padding:0 40px} }
@media (max-width:720px){ .gn-wrap,.gn-wrap-wide{padding:0 24px} }

/* ── Header ─────────────────────────────────────────────────── */
.gn-top{position:absolute;top:0;left:0;right:0;padding:28px 0;z-index:5}
.gn-top.solid{position:static;background:var(--bone);padding:22px 0}
.gn-top-inner{display:flex;justify-content:space-between;align-items:center}
.gn-logo{font-family:var(--serif);font-size:20px;letter-spacing:-0.015em;display:inline-flex;align-items:center;gap:8px;
  text-decoration:none;color:var(--ink)}
.gn-logo b{font-weight:400}
.gn-logo i{font-family:var(--mono);font-size:10px;color:var(--fog);letter-spacing:.12em;text-transform:uppercase;font-style:normal;margin-left:6px;padding-left:10px;border-left:1px solid var(--line)}
.gn-logomark{display:block;flex-shrink:0;align-self:center}
.gn-top a.email{font-family:var(--mono);font-size:12px;color:var(--ink);text-decoration:none;letter-spacing:.02em}
.gn-top a:focus-visible{outline:2px solid var(--navy);outline-offset:3px;border-radius:4px}

/* ── Footer ─────────────────────────────────────────────────── */
.gn-footer{background:var(--ink);color:var(--bone);padding:120px 0 56px;margin-top:0;position:relative;overflow:hidden}
.gn-footer-inner{display:grid;grid-template-columns:1.4fr 1fr;gap:64px;align-items:flex-start}
.gn-footer h2{font-family:var(--serif);font-weight:400;font-size:56px;line-height:1.04;
  letter-spacing:-0.022em;margin:0 0 40px;max-width:640px;color:var(--bone)}
.gn-footer-lede{font-family:var(--sans);font-size:15px;line-height:1.65;max-width:520px;color:rgba(244,239,230,0.8);margin:0}
.gn-footer .v2-em{color:#9DB8A4} /* sage italics, lifted for AA contrast on ink (as in AskFirst) */
.gn-footer-meta{display:grid;grid-template-columns:repeat(2,1fr);gap:32px;
  padding-top:32px;border-top:1px solid var(--lineInk);margin-top:48px}
.gn-footer-col{display:flex;flex-direction:column;gap:8px}
.gn-footer-col .h{font-family:var(--mono);font-size:11px;color:var(--ochre);letter-spacing:.1em;text-transform:uppercase}
.gn-footer-col a{font-family:var(--sans);font-size:14px;color:rgba(244,239,230,0.85);text-decoration:none}
.gn-footer-col a:hover{color:var(--bone)}
.gn-footer-col a:focus-visible{outline:2px solid var(--ochre);outline-offset:3px;border-radius:4px}
.gn-footer-legal{padding-top:24px;border-top:1px solid var(--lineInk);margin-top:48px;
  display:flex;justify-content:space-between;align-items:center;
  font-family:var(--mono);font-size:11px;letter-spacing:.06em;color:rgba(244,239,230,0.55)}
.gn-footer-legal .cert{color:var(--ochre)}
.gn-footer-legal a{color:inherit;text-decoration:none}
.gn-footer-legal a:hover{text-decoration:underline;text-underline-offset:2px;color:var(--bone)}
.gn-footer-legal a:focus-visible{outline:2px solid var(--ochre);outline-offset:3px;border-radius:4px}

/* ── Responsive ─────────────────────────────────────────────── */
@media (max-width:900px){
  .gn-footer{padding:80px 0 40px}
  .gn-footer-inner{grid-template-columns:1fr;gap:40px}
  .gn-footer h2{font-size:40px}
}
@media (max-width:600px){
  .gn-top{padding:18px 0}
  .gn-top.solid{padding:16px 0}
  .gn-logo{font-size:17px}
  .gn-footer{padding:64px 0 36px}
  .gn-footer h2{font-size:30px;line-height:1.08;margin-bottom:28px}
  .gn-footer-meta{grid-template-columns:1fr;gap:28px;margin-top:36px;padding-top:28px}
  .gn-footer-legal{flex-direction:column;align-items:flex-start;gap:10px;margin-top:36px}
}

/* Notch / safe-area — keep the header clear of the iOS notch / dynamic
   island. Real devices use env() (needs viewport-fit=cover); the device
   preview simulates it via --sai (set from the #safe hash). Last so it
   wins over the responsive padding rules above. */
.gn-top{padding-top:max(28px, env(safe-area-inset-top, 0px), var(--sai, 0px))}
.gn-top.solid{padding-top:max(22px, env(safe-area-inset-top, 0px), var(--sai, 0px))}