:root{
    --ink:#14263A;--ink-mid:#22384a;--ink-deep:#101f2d;
    --ground:#f2f5f7;--sunk:#e7edf1;--white:#ffffff;
    --petrol:#135A5F;--petrol-lt:#56A3A9;--petrol-pale:#E5F0F1;
    --amber:#c7880a;--amber-text:#624304;--amber-lt:#e0a93b;--amber-pale:#fbf1dd;
    --mid:#35485C;--quiet:#45566A;
    --hairline:#D6DEE5;--hairline-md:#DDE4EA;
    --sh-sm:0 1px 3px rgba(22,40,58,.06),0 3px 14px rgba(22,40,58,.05);
    --sh-md:0 6px 26px rgba(22,40,58,.10),0 2px 6px rgba(22,40,58,.06);
    --sh-lg:0 30px 70px rgba(22,40,58,.16),0 8px 24px rgba(22,40,58,.09);
    --sh-teal:0 14px 34px rgba(47,130,102,.30);
    --ease-out:cubic-bezier(0.22,1,0.30,1);
  }
  /* legacy token aliases → mapped onto the new warm palette */
  :root{--ink:var(--ink);--mut:var(--mid);--line:var(--hairline);--bg:var(--ground);}
  *{box-sizing:border-box;}
  body{margin:0;font-family:'DM Sans',sans-serif;color:var(--ink);background:var(--bg);line-height:1.6;}
  .grain{position:fixed;inset:0;z-index:9998;pointer-events:none;opacity:.035;mix-blend-mode:multiply;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");}
  .wrap{max-width:800px;margin:0 auto;padding:2.4rem 2.6rem 4rem;background:#fff;}
  a{color:var(--petrol);}
  .logo{font-family:'Fraunces',serif;font-size:1.4rem;font-weight:700;color:var(--ink);letter-spacing:-.01em;}
  .logo span{color:var(--petrol);}
  .back{font-size:1.125rem;min-height:24px;display:inline-flex;align-items:center;}
  h1{font-family:'Fraunces',serif;font-weight:300;font-size:clamp(2.3rem,4.4vw,2.6rem);color:var(--ink);margin:1.2rem 0 .2rem;line-height:1.05;letter-spacing:-.03em;}
  .sub{color:var(--mut);font-size:1.125rem;margin-bottom:1.4rem;}
  h2{font-family:'Fraunces',serif;font-weight:600;font-size:1.125rem;color:var(--ink);margin:1.8rem 0 .4rem;border-bottom:1px solid var(--line);padding-bottom:.3rem;letter-spacing:-.01em;}
  p,li{font-size:1.125rem;}
  ul{padding-left:1.2rem;}
  li{margin:.35rem 0;}
  .note{background:var(--bg);border:1px solid var(--line);border-left:3px solid var(--amber);border-radius:8px;padding:.9rem 1.1rem;margin:1rem 0;font-size:1.125rem;}
  footer{max-width:800px;margin:0 auto;padding:1.4rem 2.6rem;color:var(--mut);font-size:1.125rem;}

  /* --- bolder editorial layer --- */
  body{-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;}
  h1,h2,h3,.h1,.h2{font-optical-sizing:auto;}
  a:focus-visible,button:focus-visible{outline:3px solid var(--petrol);outline-offset:3px;border-radius:6px;}
  h1 em{font-style:italic;font-weight:400;color:var(--petrol);}

/* Bypass Blocks (WCAG 2.4.1 A): keyboard users skip the nav. */
.skip{position:absolute;left:-999px;top:0;z-index:9999;background:#14263A;color:#fff;
  padding:.85rem 1.25rem;border-radius:0 0 10px 0;text-decoration:none;font-weight:600;}
.skip:focus{left:0;}
/* Shared header — same shape as security.html; see the note there. */
.site-head{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:.75rem 1rem;max-width:1180px;margin:0 auto;
  padding:1.1rem clamp(18px,4vw,40px) .4rem;}
.site-head .mark{font-family:'Fraunces',serif;font-size:1.32rem;font-weight:600;
  letter-spacing:-.012em;text-decoration:none;color:var(--ink,#14263A);
  background:var(--sunk,#e7edf1);border:1px solid var(--hairline,#D6DEE5);
  padding:.5rem .85rem;border-radius:12px;line-height:1.4;white-space:nowrap;}
.site-head .mark span{color:var(--petrol,#135A5F);}
.site-nav{display:flex;flex-wrap:wrap;align-items:center;gap:.25rem;
  background:var(--white,#ffffff);border:1px solid var(--hairline,#D6DEE5);
  border-radius:999px;padding:.3rem;}
.site-nav a{display:inline-flex;align-items:center;min-height:44px;padding:0 .95rem;
  font-size:1rem;color:var(--mid,#35485C);text-decoration:none;border-radius:999px;
  transition:background .18s ease,color .18s ease;}
.site-nav a:hover{color:var(--ink,#14263A);background:var(--sunk,#e7edf1);}
.site-nav a[aria-current="page"]{color:var(--ink,#14263A);font-weight:600;}
.site-nav .cta{background:var(--petrol,#135A5F);color:#fff;font-weight:600;padding:0 1.15rem;transition:background .18s ease,color .18s ease;}
.site-nav .cta:hover{background:var(--ink,#14263A);color:#fff;}
@media(max-width:560px){
  .site-head{gap:.6rem;padding-inline:1.25rem;}
  .site-nav{width:100%;border-radius:16px;padding:.35rem;gap:.2rem;}
  .site-nav a{flex:1 1 auto;justify-content:center;padding:0 .55rem;font-size:.95rem;}
  .site-nav .cta{flex:1 1 100%;}
}

/* PHONE MENU (2026-09-24). Under 560px the four nav items used to wrap into a
   104-172px block above every page's first line. Now: wordmark and one Menu
   button; the links and the action open in a panel under them. Without JS
   (.js never set) the links stay visible, so nothing is ever unreachable. */
.nav-toggle{display:none;}
@media(max-width:560px){
  .js .site-nav{width:auto;background:none;border:0;padding:0;}
  .js .nav-toggle{display:inline-flex;align-items:center;gap:.45rem;min-height:44px;min-width:44px;padding:0 1rem;
    font:600 1rem 'DM Sans',sans-serif;color:var(--ink,#14263A);background:var(--white,#ffffff);
    border:1px solid var(--hairline,#D6DEE5);border-radius:999px;cursor:pointer;}
  .js .nav-toggle svg{width:20px;height:20px;}
  .js .nav-panel{display:none;}
  .js .site-head{position:relative;z-index:50;}
  .js .site-nav.open .nav-panel{display:flex;flex-direction:column;align-items:stretch;gap:.2rem;
    position:absolute;top:100%;left:1.25rem;right:1.25rem;box-shadow:0 14px 34px rgba(20,38,58,.16);
    padding:.35rem;background:var(--white,#ffffff);border:1px solid var(--hairline,#D6DEE5);border-radius:16px;}
  .js .site-nav.open .nav-panel a{justify-content:flex-start;padding:0 1rem;font-size:1.0625rem;}
  .nav-panel{display:contents;}
  footer a{display:inline-block;line-height:44px;min-width:44px;text-align:center;}
}