/* =========================================================
   COMMON COLOUR + FONT CLASSES  (replaces the old :root variables)
   Use them on any element, e.g. <div class="bg-ink text-white">
   ========================================================= */

  :root{
    --ink:#0F2A4D;
    --ink-soft:#526078;
    --paper:#F4F6FA;
    --paper-raised:#FFFFFF;
    --brand:#1A56A3;
    --brand-deep:#0D3D7A;
    --brand-tint:#E9EFF9;
    --brass:#C6952F;
    --brass-deep:#9C7223;
    --rule:#DCE3EE;
    --rule-strong:#BFCBE0;
    --white:#FFFFFF;
    --font-display:'Times New Roman', Times, Georgia, serif;
    --font-body:'Helvetica Neue', Helvetica, Arial, sans-serif;
    --font-mono:'Helvetica Neue', Helvetica, Arial, sans-serif;
  }
  *{box-sizing:border-box; margin:0; padding:0;}
  html{scroll-behavior:smooth;}
  body{
    font-family:var(--font-body);
    background:var(--paper);
    color:var(--ink);
    line-height:1.6;
    -webkit-font-smoothing:antialiased;
  }
  a{color:inherit; text-decoration:none;}
  .wrap{max-width:1180px; margin:0 auto; padding:0 40px;}
  img{display:block; max-width:100%;}
  .utility-row{padding:8px 40px;} /* restore shared header.js utility-bar padding (loaded after layout.css) */

  .btn-header-cta{background:var(--ink); color:var(--white); font-size:13.5px; padding:10px 18px; border-radius:3px; font-weight:500;}
  .btn-header-cta:hover{background:var(--brass-deep);}

  /* Section Jump Bar */
  .anchor-bar{background:var(--paper-raised); border-bottom:1px solid var(--rule); position:sticky; top:84px; z-index:60; transition:top .35s ease, box-shadow .25s ease;}
  header.scrolled + .anchor-bar{top:64px; box-shadow:0 4px 12px rgba(15,42,77,0.05);}
  .anchor-list{display:flex; gap:26px; overflow-x:auto; padding:12px 0; scrollbar-width:none;}
  .anchor-list::-webkit-scrollbar{display:none;}
  .anchor-list a{
    font-size:13px; font-family:var(--font-mono); color:var(--ink-soft); white-space:nowrap;
    padding-bottom:2px; border-bottom:2px solid transparent; transition:all .18s ease;
  }
  .anchor-list a:hover, .anchor-list a.current{color:var(--brand-deep); border-color:var(--brass); font-weight:600;}

  /* Common Sections */
  section{padding:80px 0; position:relative;}
  .section-head{margin-bottom:44px; border-bottom:1px solid var(--rule); padding-bottom:22px;}
  .section-kicker{font-size:12px; font-family:var(--font-mono); color:var(--brass-deep); letter-spacing:.06em; text-transform:uppercase; margin-bottom:8px; display:flex; align-items:center; gap:8px; font-weight:600;}
  .section-kicker::before{content:''; width:6px; height:6px; border-radius:50%; background:var(--brass-deep); display:inline-block;}
  .section-title{font-family:var(--font-display); font-weight:500; font-size:35px; line-height:1.2; letter-spacing:-.01em; color:var(--ink);}
  .section-sub{font-size:15px; color:var(--ink-soft); max-width:640px; margin-top:10px; line-height:1.6;}


/* text colours */
.text-ink{color:#0F2A4D}
.text-ink-soft{color:#526078}
.text-brand{color:#1A56A3}
.text-brand-deep{color:#0D3D7A}
.text-brass{color:#C6952F}
.text-brass-deep{color:#9C7223}
.text-white{color:#FFFFFF}

/* background colours */
.bg-ink{background-color:#0F2A4D}
.bg-paper{background-color:#F4F6FA}
.bg-paper-raised,.bg-white{background-color:#FFFFFF}
.bg-brand{background-color:#1A56A3}
.bg-brand-deep{background-color:#0D3D7A}
.bg-brand-tint{background-color:#E9EFF9}
.bg-brass{background-color:#C6952F}
.bg-brass-deep{background-color:#9C7223}

/* borders */
.border-rule{border-color:#DCE3EE}
.border-rule-strong{border-color:#BFCBE0}

/* fonts */
.font-display{font-family:'Times New Roman', Times, Georgia, serif}
.font-body,.font-mono{font-family:'Helvetica Neue', Helvetica, Arial, sans-serif}

/* ---------- base (from your old global block) ---------- */
html{scroll-behavior:smooth}
body{font-family:'Helvetica Neue', Helvetica, Arial, sans-serif; background:#F4F6FA; color:#0F2A4D; line-height:1.6; -webkit-font-smoothing:antialiased}

/* Reset applied ONLY to header/utility bar/footer (zero specificity, so it never fights your own rules) */
:where(.utility, .utility *, #site-header, #site-header *, .footer-grid, .footer-grid *, .footer-bottom, .footer-bottom *){margin:0; padding:0; box-sizing:border-box}
:where(.utility a, #site-header a, .footer-grid a, .footer-bottom a){color:inherit; text-decoration:none}

/* container used by header/footer – adjust to match your design */
.wrap{width:100%; max-width:1240px; margin:0 auto; padding:0 40px}
@media (max-width:640px){.wrap{padding:0 20px}}