/* ==========================================================================
   Goulter Group: parent site design system
   A trimmed cut of the Goulter Compliance Advisory stylesheet, carrying the
   same tokens, fonts, and type scale so the two properties read as one family.
   Dropped from the source: the full nav/mega-menu, cards, forms, tool chrome.
   Kept: tokens, @font-face, reset/typography, eyebrow, buttons, footer.
   ========================================================================== */

/* ===== FONTS (self-hosted; Space Grotesk & Inter are variable fonts, so
   several declared weights point at the same physical file) ===== */
@font-face{font-family:'Space Grotesk';font-style:normal;font-weight:400;font-display:swap;src:url('../fonts/space-grotesk-variable.woff2') format('woff2')}
@font-face{font-family:'Space Grotesk';font-style:normal;font-weight:500;font-display:swap;src:url('../fonts/space-grotesk-variable.woff2') format('woff2')}
@font-face{font-family:'Space Grotesk';font-style:normal;font-weight:600;font-display:swap;src:url('../fonts/space-grotesk-variable.woff2') format('woff2')}
@font-face{font-family:'Space Grotesk';font-style:normal;font-weight:700;font-display:swap;src:url('../fonts/space-grotesk-variable.woff2') format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:400;font-display:swap;src:url('../fonts/inter-variable.woff2') format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:500;font-display:swap;src:url('../fonts/inter-variable.woff2') format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:600;font-display:swap;src:url('../fonts/inter-variable.woff2') format('woff2')}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:400;font-display:swap;src:url('../fonts/ibm-plex-mono-400.woff2') format('woff2')}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:500;font-display:swap;src:url('../fonts/ibm-plex-mono-500.woff2') format('woff2')}

/* ===== DESIGN TOKENS (dim slate; diverges from the advisory site on color only) ===== */
:root{
  color-scheme:dark;

  --paper:#1b2635;      /* page */
  --paper-2:#232f40;    /* cards, raised surfaces */
  --paper-3:#151f2c;    /* recessed bands (.structure, .vent.soon) */
  --line:#33445a;
  --deep:#111a26;       /* footer + .pill-degree background */

  --ink:#e7edf5;
  --ink-2:#c2cfdd;
  --mute:#93a5b8;
  --mute-2:#7b8fa4;

  --blue:#5b9ad6;
  --blue-deep:#8fbde8;  /* name kept: eyebrows/tags/links, so it must be the LIGHT blue */
  --blue-soft:#22374f;
  --blue-glow:rgba(91,154,214,0.20);
  --blue-grad:linear-gradient(135deg,#4f8fd0,#2f6ea8);        /* button fills, #fff text */
  --blue-grad-text:linear-gradient(135deg,#9fc9ef,#5b9ad6);   /* clipped accent text */

  --amber:#d19a3f;

  /* logo colors unchanged: the shield ships identically across both properties */
  --logo-fill:#3d7ab5;
  --logo-acc:#a8711a;

  --shadow-sm:0 1px 2px rgba(0,0,0,0.30),0 4px 14px rgba(0,0,0,0.28);
  --shadow-md:0 8px 22px rgba(0,0,0,0.38),0 20px 52px rgba(0,0,0,0.40);

  --radius-sm:10px;
  --radius-md:16px;
  --radius-lg:22px;
  --radius-pill:999px;

  --maxw:1080px;
  --pad:clamp(20px,5vw,64px);
}

/* ===== RESET & BASE ===== */
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:'Inter',system-ui,sans-serif;
  background-color:var(--paper);
  color:var(--ink);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
h1,h2,h3,h4{font-family:'Space Grotesk',sans-serif;line-height:1.06;letter-spacing:-0.025em;font-weight:600;color:var(--ink)}
a{color:inherit;text-decoration:none}
.wrap{max-width:var(--maxw);margin:0 auto;padding-left:var(--pad);padding-right:var(--pad)}

/* ===== EYEBROW ===== */
.eyebrow{
  font-family:'IBM Plex Mono',monospace;
  font-size:12px;letter-spacing:0.2em;text-transform:uppercase;
  color:var(--blue-deep);display:inline-flex;align-items:center;gap:12px;
}
.eyebrow::before{content:"";width:26px;height:1px;background:var(--blue);opacity:0.85}

/* ===== SIMPLE STATIC HEADER (two pages, no JS nav needed) ===== */
header.nav{
  position:sticky;top:0;z-index:50;
  backdrop-filter:blur(12px) saturate(160%);
  background:rgba(27,38,53,0.82);
  border-bottom:1px solid var(--line);
}
.nav-inner{display:flex;align-items:center;justify-content:space-between;height:72px;gap:20px}
.brand{display:inline-flex;align-items:center;gap:12px}
.brand .glyph{width:32px;height:32px;flex:none}
.brand span{
  font-family:'Space Grotesk',sans-serif;font-weight:600;font-size:17px;
  line-height:1.15;letter-spacing:-0.01em;display:flex;flex-direction:column;
}
.brand span small{
  font-family:'IBM Plex Mono',monospace;font-weight:400;font-size:10px;
  letter-spacing:0.14em;text-transform:uppercase;color:var(--mute-2);
}
.nav-links{display:flex;align-items:center;gap:26px;font-size:14.5px;font-weight:500;color:var(--ink-2)}
.nav-links a:hover{color:var(--blue-deep)}
.nav-links a[aria-current="page"]{color:var(--blue-deep);font-weight:600}

/* ===== BUTTONS ===== */
.btn{
  display:inline-flex;align-items:center;gap:9px;
  padding:13px 24px;border-radius:var(--radius-pill);
  font-size:14.5px;font-weight:600;font-family:'Inter',sans-serif;
  border:1px solid transparent;cursor:pointer;
  transition:transform .18s ease, box-shadow .22s ease, background .22s ease;
}
.btn .arr{transition:transform .18s ease}
.btn:hover .arr{transform:translateX(3px)}
.btn-primary{background:var(--blue-grad);color:#fff;box-shadow:var(--shadow-sm)}
.btn-primary:hover{transform:translateY(-1px);box-shadow:var(--shadow-md)}
.btn-ghost{background:transparent;color:var(--ink);border-color:var(--line)}
.btn-ghost:hover{border-color:var(--blue);color:var(--blue-deep)}

/* ===== FOOTER ===== */
footer.site{
  background:var(--deep);color:#c3d3e2;margin-top:0;
  padding:56px 0 40px;font-size:14px;
}
footer.site .brand span{color:#f2f6fa}
footer.site .brand span small{color:#8fb4d8}
footer.site .foot-top{display:flex;justify-content:space-between;gap:32px;flex-wrap:wrap;align-items:flex-start}
footer.site .foot-nav{display:flex;gap:22px;flex-wrap:wrap}
footer.site a:hover{color:#fff}
footer.site .foot-legal{
  margin-top:34px;padding-top:22px;border-top:1px solid rgba(220,230,240,0.16);
  display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;
  font-size:12.5px;color:#8fb4d8;
}

/* ===== RESPONSIVE ===== */
@media (max-width:720px){
  .nav-links{gap:18px;font-size:13.5px}
  .brand span{font-size:15.5px}
  .brand span small{font-size:9px;letter-spacing:0.1em}
}
@media (max-width:560px){
  /* a long eyebrow ("Compliance · Privacy · Regulatory Risk") wraps to two lines
     on a phone and drags the rule out of line with the text. Tighten it so it
     holds one line down to ~360px. */
  .eyebrow{
    font-size:10.5px;letter-spacing:0.12em;
    display:flex;flex-wrap:wrap;gap:9px;max-width:100%;
  }
}
@media (max-width:480px){
  .nav-links a.hide-xs{display:none}
}