/* ONE header for every page (home and inner pages).
   Every size is set here explicitly, so nothing else on a page can change it
   and the header never moves when you go from one page to another. */

html{scrollbar-gutter:stable}

.top{
  --hx:16px;
  position:sticky;top:0;left:0;right:0;z-index:70;
  padding-top:env(safe-area-inset-top,0px);
  background:rgba(255,255,255,.96);
  -webkit-backdrop-filter:saturate(1.6) blur(10px);backdrop-filter:saturate(1.6) blur(10px);
  box-shadow:0 1px 0 #E4EAE6;
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  font-size:15px;line-height:1.5;letter-spacing:normal;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;
  transition:box-shadow .25s cubic-bezier(.4,0,.2,1),background-color .2s linear;
  view-transition-name:site-header;
}
.top.lift{box-shadow:0 1px 0 #E4EAE6,0 8px 22px -14px rgba(8,40,28,.45)}
.top.menu-open{background:#fff;z-index:95}
.top-in{display:flex;align-items:center;gap:10px;height:62px;max-width:calc(1160px + 2 * var(--hx));margin:0 auto;padding:0 var(--hx);box-sizing:border-box}
.top .brand{display:block;flex:none;margin-right:auto;line-height:0}
.top .brand img{display:block;height:30px;width:auto}

/* main links: shown from 900px wide */
.top .tnav{display:none}

/* call number: the same green button on every page */
.top .tcall{display:inline-flex;align-items:center;justify-content:center;gap:8px;flex:none;box-sizing:border-box;height:42px;padding:0 14px;border-radius:12px;
  background:#0A6B4D;color:#fff;font-size:15px;font-weight:700;line-height:1;white-space:nowrap;text-decoration:none;
  transition:background-color .15s linear,transform .15s cubic-bezier(.4,0,.2,1)}
.top .tcall:active{transform:scale(.96)}
.top .tcall svg{width:17px;height:17px;flex:none}

/* menu button: three lines that turn into a cross */
.top .mbtn{width:42px;height:42px;flex:none;box-sizing:border-box;margin:0;padding:0;border:0;border-radius:12px;background:#E6F3EC;color:#085A41;
  display:grid;place-items:center;cursor:pointer;font:inherit;transition:transform .15s cubic-bezier(.4,0,.2,1)}
.top .mbtn:active{transform:scale(.94)}
.top .burger{position:relative;display:block;width:18px;height:12px}
.top .burger i{position:absolute;left:0;right:0;height:2px;border-radius:2px;background:currentColor;transition:transform .32s cubic-bezier(.32,.72,0,1),opacity .2s}
.top .burger i:nth-child(1){top:0}.top .burger i:nth-child(2){top:5px}.top .burger i:nth-child(3){top:10px}
.top [aria-expanded="true"] .burger i:nth-child(1){transform:translateY(5px) rotate(45deg)}
.top [aria-expanded="true"] .burger i:nth-child(2){opacity:0;transform:scaleX(.3)}
.top [aria-expanded="true"] .burger i:nth-child(3){transform:translateY(-5px) rotate(-45deg)}

/* drop-down menu */
.top .mm{position:absolute;left:0;right:0;top:100%;height:calc(100vh - 100%);height:calc(100dvh - 100%);visibility:hidden;pointer-events:none;transition:visibility 0s .3s}
.top .mm.open{visibility:visible;pointer-events:auto;transition:none}
.top .mm-scrim{position:absolute;inset:0;background:rgba(8,26,20,.42);opacity:0;transition:opacity .25s linear}
.top .mm.open .mm-scrim{opacity:1}
.top .mm-panel{position:relative;box-sizing:border-box;max-height:100%;overflow-y:auto;overscroll-behavior:contain;background:#fff;border-bottom:1px solid #E4EAE6;
  box-shadow:0 20px 30px -20px rgba(8,40,28,.4);padding:6px var(--hx) 18px;transform:translateY(-12px);opacity:0;
  transition:transform .3s cubic-bezier(.2,.7,.2,1),opacity .2s linear}
.top .mm.open .mm-panel{transform:none;opacity:1}
.top .mm-panel>a{display:flex;align-items:center;justify-content:space-between;min-height:52px;font-size:17px;font-weight:650;color:#0F1714;text-decoration:none;border-bottom:1px solid #E4EAE6}
.top .mm-panel>a::after{content:"";width:7px;height:7px;border-right:2px solid #A9B7B1;border-bottom:2px solid #A9B7B1;transform:rotate(-45deg);margin-right:4px}
.top .mm-panel>a[aria-current="page"]{color:#0A6B4D}
.top .mm-h{margin:16px 0 8px;font-size:12.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:#5F706A}
.top .mm-svc{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.top .mm-svc a{display:flex;align-items:center;min-height:46px;padding:8px 12px;border-radius:12px;background:#E6F3EC;color:#085A41;font-weight:650;font-size:14.5px;line-height:1.25;text-decoration:none}
.top .mm-svc a[aria-current="page"]{background:#0A6B4D;color:#fff}
.top .mm-call{margin:16px 0 0;color:#2B3A34;font-size:15.5px}
.top .mm-call a{font-weight:800;color:#085A41}
.top .mm.open .mm-panel>*{animation:mmIn .35s cubic-bezier(.2,.7,.2,1) both}
.top .mm.open .mm-panel>*:nth-child(2){animation-delay:.03s}.top .mm.open .mm-panel>*:nth-child(3){animation-delay:.06s}
.top .mm.open .mm-panel>*:nth-child(4){animation-delay:.09s}.top .mm.open .mm-panel>*:nth-child(5){animation-delay:.12s}
.top .mm.open .mm-panel>*:nth-child(n+6){animation-delay:.15s}
@keyframes mmIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
html.noscroll,html.noscroll body{overflow:hidden}

/* narrow phones (360-389px): slightly smaller logo so the number still fits */
@media (max-width:389px){.top .brand img{height:26px}}

/* very small phones: number becomes a round phone icon */
@media (max-width:359px){
  .top{--hx:12px}
  .top .tcall{width:42px;padding:0;border-radius:50%}
  .top .tcall .tc-t{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
}

/* laptops and desktops: links in the header, no menu button */
@media (min-width:900px){
  .top{--hx:24px}
  .top-in{height:72px;gap:24px}
  .top .brand img{height:36px}
  .top .tnav{display:flex;gap:4px}
  .top .tnav a{display:block;padding:8px 14px;border-radius:10px;font-size:15px;font-weight:600;line-height:1.5;color:#2B3A34;text-decoration:none;transition:background-color .15s linear,color .15s linear}
  .top .tnav a:hover,.top .tnav a[aria-current="page"]{background:#E6F3EC;color:#085A41}
  .top .tcall:hover{background:#085A41}
  .top .mbtn,.top .mm{display:none}
}
@media (min-width:900px) and (max-width:1060px){.top .tnav a{padding:8px 10px}}

/* smooth page-to-page change: the header stays still while the page fades */
@view-transition{navigation:auto}
::view-transition-old(root),::view-transition-new(root){animation-duration:.2s}
::view-transition-group(site-header){animation-duration:0s}

@media (prefers-reduced-motion:reduce){
  .top,.top *{transition:none!important;animation:none!important}
  ::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){animation:none!important}
}