: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-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);
  }
  *{margin:0;padding:0;box-sizing:border-box;}
  body{font-family:'DM Sans',sans-serif;background:var(--ground);color:var(--ink);min-height:100dvh;display:flex;flex-direction:column;}
  .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");}

  nav{display:flex;align-items:center;justify-content:space-between;padding:1.1rem 5%;background:rgba(245,240,232,.92);backdrop-filter:blur(8px);border-bottom:1px solid rgba(26,46,61,.07);position:sticky;top:0;z-index:100;}
  .nav-logo{font-family:'Fraunces',serif;font-size:1.2rem;font-weight:600;color:var(--ink);text-decoration:none;}
  .nav-logo span{color:var(--petrol);}

  main{flex:1;display:flex;align-items:center;justify-content:center;padding:60px 5%;background:radial-gradient(ellipse 62% 52% at 50% 42%,var(--petrol-pale),transparent 70%);}
  .card{position:relative;background:var(--white);border-radius:20px;padding:56px 48px;max-width:580px;width:100%;text-align:left;box-shadow:var(--sh-lg);}

  .mail-circle{width:72px;height:72px;background:var(--petrol-pale);border-radius:50%;display:flex;align-items:center;justify-content:center;margin:0 auto 1.5rem;}
  .mail-circle svg{width:34px;height:34px;stroke:var(--petrol);stroke-width:2;fill:none;stroke-linecap:round;stroke-linejoin:round;}

  .eyebrow{font-size:1.125rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--petrol);margin-bottom:.7rem;text-align:center;}
  h1{font-family:'Fraunces',serif;font-size:clamp(2rem,3vw,2.6rem);font-weight:300;color:var(--ink);line-height:1.1;letter-spacing:-.03em;margin-bottom:1rem;text-align:center;}
  h1 em{font-style:italic;font-weight:400;color:var(--petrol);}
  .lead{font-size:1.125rem;color:var(--mid);line-height:1.72;margin-bottom:2rem;text-align:center;}

  h2{font-family:'Fraunces',serif;font-size:1.3rem;font-weight:500;color:var(--ink);margin:2rem 0 .6rem;}
  .card>h2:first-of-type{margin-top:0;}
  p, li{font-size:1.05rem;color:var(--mid);line-height:1.7;}
  ul{margin-left:1.3rem;margin-bottom:.5rem;}
  li{margin-bottom:.4rem;}

  .email-box{background:var(--ground);border-radius:12px;border-left:3px solid var(--petrol);padding:26px 28px;margin:1rem 0 1.5rem;box-shadow:inset 0 1px 3px rgba(22,40,58,.09),inset 0 0 0 1px rgba(22,40,58,.04);}
  .email-label{font-size:18px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--quiet);margin-bottom:.75rem;}
  .email-address{font-family:'Fraunces',serif;font-size:clamp(1.15rem,3vw,1.5rem);font-weight:400;color:var(--ink);word-break:break-word;line-height:1.3;}
  .email-address a{color:inherit;text-decoration:none;display:inline-flex;align-items:center;min-height:44px;}
  .email-address a:hover{text-decoration:underline;}

  .btn{display:inline-flex;align-items:center;gap:.45rem;padding:.85rem 1.8rem;border-radius:50px;font-size:1.125rem;font-weight:600;text-decoration:none;transition:background .18s ease,transform .16s ease;font-family:'DM Sans',sans-serif;cursor:pointer;border:none;}
  .btn-primary{background:var(--petrol);color:white;}
  .btn-primary:hover{background:var(--petrol);}
  .btn-outline{background:transparent;color:var(--petrol);border:1.5px solid var(--petrol);}
  .btn-outline:hover{background:var(--petrol-pale);}
  .btn:active{transform:scale(.97);}
  .btn-group{display:flex;flex-wrap:wrap;gap:.75rem;justify-content:center;margin-top:.5rem;}
  .btn svg{width:17px;height:17px;stroke:currentColor;stroke-width:2;fill:none;stroke-linecap:round;stroke-linejoin:round;}

  .hours{margin-top:1.75rem;font-size:1.125rem;color:var(--mid);line-height:1.6;}
  .hours strong{color:var(--ink);font-weight:600;}

  footer{text-align:center;padding:1.5rem 5%;font-size:1.125rem;color:var(--quiet);border-top:1px solid rgba(26,46,61,.07);}
  /* --petrol: this footer sits on --ground, where --petrol is 4.07:1 at 15px (under
     AA). Scoped to the footer — --petrol is still correct on this page's other grounds. */
  footer a{color:var(--petrol);text-decoration:underline;}

  @media(max-width:540px){
    .card{padding:36px 24px;}
    .btn-group{flex-direction:column;align-items:center;}
  }
  @media(prefers-reduced-motion:reduce){
    .btn:active{transform:none;}
  }

  /* --- bolder editorial layer --- */
  body{-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;background:var(--ground);}
  h1,h2,h3,.h1,.h2{font-optical-sizing:auto;}
  a:focus-visible,button:focus-visible{outline:3px solid var(--petrol);outline-offset:2px;border-radius:6px;box-shadow:0 0 0 2px var(--white);}
  .eyebrow{letter-spacing:.16em;}
  nav{backdrop-filter:blur(18px) saturate(1.4);-webkit-backdrop-filter:blur(18px) saturate(1.4);box-shadow:inset 0 1px 0 rgba(255,255,255,.6);}
  .nav-logo{letter-spacing:-.01em;}
  .btn{transition:background .22s ease,box-shadow .22s ease,color .22s ease,border-color .22s ease,transform .22s var(--ease-out);}
  .btn-primary,.btn-teal{box-shadow:var(--sh-teal);}
  .btn-primary:hover,.btn-teal:hover{transform:translateY(-2px);box-shadow:0 18px 40px rgba(47,130,102,.36);}
  .btn-primary:active,.btn-teal:active{transform:translateY(-2px) scale(.97);transition:transform .13s var(--ease-out);}
  @media(prefers-reduced-motion:reduce){
    .btn:hover,.btn:active{transform:none;}
  }

/* 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 (added 2026-08-14) ═══════════════════════════════════════
   Same shape as the homepage — wordmark chip left, pill nav right — in the light
   variant these pages need. Deliberately STATIC, not fixed: the homepage pill is
   fixed because it floats over a photograph, but these are reading pages on a
   light ground, and a fixed two-row header at 375px would eat the column it sits
   above. No JS, so there is no hamburger to break on 17 pages at once.
   Colours are var() with literal fallbacks because not every page declares the
   full token set; the fallbacks ARE the canonical values. */
.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;}
/* Below 560px the four items cannot sit on one row, and a wrapped pill with a
   999px radius reads as a broken shape rather than a nav. So the pill becomes a
   rounded GROUP: full width, softer radius, links sharing the row and the action
   on its own full-width row underneath. No hamburger, no JS, nothing to break. */
@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;}
}