
:host{all:initial;}
*{box-sizing:border-box;font-family:'Inter',-apple-system,'Segoe UI',sans-serif;margin:0;padding:0;}
body > #pill{position:fixed;top:20px;right:24px;z-index:2147483000;display:flex;align-items:center;
  gap:14px;background:#0F0F10;border:1px solid rgba(247,245,242,.10);border-radius:999px;
  padding:10px 18px;cursor:pointer;transition:background .35s,border-color .35s;}
body > #pill:hover{border-color:rgba(232,168,73,.55);}
body > #pill:focus-visible{outline:2px solid #17B8A6;outline-offset:3px;}
body > #pill .wm{height:13px;width:auto;display:block;}
body > #pill .bars{display:flex;flex-direction:column;gap:5px;width:22px;}
body > #pill .bars span{display:block;height:1.5px;background:#F7F5F2;border-radius:2px;
  transition:transform .35s,opacity .35s;}
body > #pill.open .bars span:first-child{transform:translateY(3.25px) rotate(45deg);}
body > #pill.open .bars span:last-child{transform:translateY(-3.25px) rotate(-45deg);}

body > #panel{position:fixed;inset:0 0 auto 0;z-index:2147482999;background:#202022;
  border-bottom:1px solid rgba(232,168,73,.14);
  transform:translateY(-101%);transition:transform .5s cubic-bezier(.16,1,.3,1);
  max-height:100vh;overflow-y:auto;}
body > #panel.open{transform:translateY(0);}
body > #panel .inner{display:grid;grid-template-columns:190px 1fr auto;gap:56px;align-items:start;
  max-width:1420px;margin:0 auto;padding:86px 48px 64px;}
body > #panel .brand{display:block;}
body > #panel .wm-lg{width:132px;height:auto;display:block;opacity:.92;}
body > #panel .cols{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:48px;}
body > #panel .col h4{font-size:11px;font-weight:600;letter-spacing:2.5px;text-transform:uppercase;
  color:#F7F5F2;margin-bottom:20px;}
body > #panel .nl{display:block;font-size:14px;line-height:1.5;color:#9A9AA0;text-decoration:none;
  margin-bottom:12px;transition:color .3s;}
body > #panel .nl:hover,body > #panel .nl:focus-visible{color:#E8A849;}
body > #panel .nl:focus-visible{outline:2px solid #17B8A6;outline-offset:3px;}
body > #panel .rail{display:flex;flex-direction:column;gap:12px;text-align:right;padding-top:31px;}
body > #panel .rail .nl{font-size:14px;color:#F7F5F2;margin:0;}
body > #panel .rail .nl:hover{color:#E8A849;}

@media(max-width:1040px){
  body > #panel .inner{grid-template-columns:1fr;gap:36px;padding:96px 28px 48px;}
  body > #panel .cols{grid-template-columns:1fr;gap:32px;}
  body > #panel .rail{flex-direction:row;gap:24px;text-align:left;padding-top:0;
    border-top:1px solid rgba(154,154,160,.16);padding-top:24px;}
  body > #panel .wm-lg{width:112px;}
}
@media(max-width:520px){ body > #pill{top:14px;right:14px;padding:9px 14px;gap:11px;} }
@media(prefers-reduced-motion:reduce){
  body > #panel{transition:none;} .bars span{transition:none;}
}


/* ──────────────────────────────────────────────────────────────────────
   The four-stage line in the CTA band links to /process/. nav.css is the
   one stylesheet all 28 pages load, so the rule lives here rather than
   being repeated across fourteen page bundles. Underlined rather than
   coloured, because the band's ground differs page to page and an
   underline carries the affordance on all of them.
   ────────────────────────────────────────────────────────────────────── */
.cta-band a.cta-process {
  color: inherit;
  text-decoration: underline;
  text-decoration-color: rgba(232,168,73,.75);
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}
.cta-band a.cta-process:hover { color: #E8A849; text-decoration-color: #E8A849; }
.cta-band a.cta-process:focus-visible { outline: 2px solid #E8A849; outline-offset: 3px; }


/* Footer column labels. They were <h4> straight after an <h2>, which broke the
   heading order on all 29 pages, and they are labels rather than sections of
   the document. Now <p class="footer-h">, carrying the exact declaration the
   twenty page bundles all shared for .footer-col h4. */
.footer-col .footer-h {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--gold, #E8A849);
  margin: 0 0 14px;
}
