/* Site header (.hnh, 2026-11-09), modelled on creatorlayer.com. Markup from design/build-header.py.
   Loads after site-header.css. Selectors start with header.site-header.hnh / body .drawer.hnd so they win over
   each page's inline header rules. The bar stays 64px (77px with its gap) because heroes pull up under it. */

/* ---------- the bar ---------- */
header.site-header.hnh .hdr{
  height:64px;padding:0 9px 0 22px;border:1px solid rgba(22,28,34,.1);border-radius:20px;
  background:rgba(255,255,255,.9);-webkit-backdrop-filter:saturate(1.5) blur(16px);backdrop-filter:saturate(1.5) blur(16px);
  box-shadow:0 1px 2px rgba(22,28,34,.04);
}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){header.site-header.hnh .hdr{background:#fff}}
header.site-header.hnh.scrolled .hdr{box-shadow:0 1px 2px rgba(22,28,34,.04),0 14px 30px -20px rgba(22,28,34,.3)}
header.site-header.hnh .logo{margin-left:0}
header.site-header.hnh .logo img{height:36px}

/* ---------- nav: plain text, colour change on hover, green underline on the current page ---------- */
header.site-header.hnh .main-nav ul{gap:34px;margin:0;padding:0}
header.site-header.hnh .nav-link{
  height:62px;padding:0;border-radius:0;background:none;gap:5px;
  font:500 16px/1 var(--body);color:var(--ink-900);transition:color .2s ease;
}
header.site-header.hnh .nav-link:hover,
header.site-header.hnh .has-menu:focus-within>.nav-link,
header.site-header.hnh .has-menu.open>.nav-link{background:none;color:var(--green-700)}
header.site-header.hnh .nav-link.is-current,
header.site-header.hnh .nav-link.is-current:hover{color:var(--green-700)}
header.site-header.hnh .nav-link.is-current::before{content:none}
header.site-header.hnh .nav-link.is-current::after{content:"";position:absolute;left:0;right:0;bottom:13px;height:2px;border-radius:2px;background:var(--green-600)}
header.site-header.hnh .has-menu>.nav-link.is-current::after{right:19px}
header.site-header.hnh .nav-link .car{width:14px;height:14px;color:currentColor;transition:transform .2s ease}
header.site-header.hnh .has-menu.open .car{transform:rotate(180deg);color:currentColor}
header.site-header.hnh .nav-link:focus-visible{outline:3px solid var(--green-600);outline-offset:2px;border-radius:6px}

/* ---------- Services dropdown: a compact white list, one column per audience ---------- */
header.site-header.hnh .has-menu::after{height:20px}
header.site-header.hnh .mega{
  top:calc(100% + 6px);width:max-content;display:block;padding:8px;
  border:1px solid rgba(22,28,34,.1);border-radius:16px;background:#fff;color:var(--ink-900);
  box-shadow:0 1px 2px rgba(22,28,34,.05),0 18px 40px -18px rgba(22,28,34,.28);
  transform:translate(-50%,-4px);
}
header.site-header.hnh .has-menu.open .mega{transform:translate(-50%,0)}
header.site-header.hnh .mg-cols{display:grid;grid-template-columns:repeat(3,max-content);gap:4px}
header.site-header.hnh .main-nav .mg-col ul{display:block;margin:0;padding:0;list-style:none}
header.site-header.hnh .mg-k{margin:0;padding:10px 12px 6px;font:600 12px/16px var(--body);letter-spacing:.06em;text-transform:uppercase;color:var(--slate-500)}
header.site-header.hnh .mg-a{display:block;padding:10px 12px;border-radius:10px;font:500 15px/20px var(--body);color:var(--ink-900);transition:background-color .15s ease,color .15s ease}
header.site-header.hnh .mg-a:hover{background:var(--slate-50);color:var(--green-700)}
header.site-header.hnh .mg-a[aria-current]{color:var(--green-700)}
header.site-header.hnh .mg-all{display:flex;align-items:center;gap:10px;margin-top:6px;padding:12px;border-top:1px solid rgba(22,28,34,.08);border-radius:0 0 10px 10px;color:var(--ink-900);transition:background-color .15s ease}
header.site-header.hnh .mg-all span{font:600 15px/20px var(--body)}
header.site-header.hnh .mg-all small{font-size:14px;color:var(--slate-500)}
header.site-header.hnh .mg-all svg{width:18px;height:18px;margin-left:auto;color:var(--green-700);transition:transform .2s ease}
header.site-header.hnh .mg-all:hover{background:var(--slate-50)}
header.site-header.hnh .mg-all:hover svg{transform:translateX(3px)}
header.site-header.hnh .mg-a:focus-visible,header.site-header.hnh .mg-all:focus-visible{outline:3px solid var(--green-600);outline-offset:-3px}

/* ---------- call to action + menu button ---------- */
header.site-header.hnh .hdr-actions{gap:10px}
header.site-header.hnh .hdr-cta,
body .drawer.hnd .hnd-cta{
  display:inline-flex;align-items:center;gap:14px;height:46px;padding:0 5px 0 18px;border-radius:12px;
  background:var(--green-500);color:var(--ink-900);font:600 15px/1 var(--body);white-space:nowrap;
  border:1.5px solid var(--green-500);transition:background-color .2s ease,border-color .2s ease;
}
header.site-header.hnh .hdr-cta:hover{background:var(--green-600);border-color:var(--green-600)}
header.site-header.hnh .hdr-cta-ic,
body .drawer.hnd .hdr-cta-ic{display:grid;place-items:center;width:34px;height:34px;border-radius:8px;background:rgba(22,28,34,.12);flex:none}
header.site-header.hnh .hdr-cta-ic svg,
body .drawer.hnd .hdr-cta-ic svg{width:16px;height:16px;transform:none;transition:transform .2s ease}
header.site-header.hnh .hdr-cta:hover .hdr-cta-ic svg{transform:translate(1px,-1px)}
header.site-header.hnh .hdr-cta:focus-visible{outline:3px solid var(--ink-900);outline-offset:3px}

header.site-header.hnh .menu-btn{display:grid;place-items:center;width:46px;height:46px;border-radius:12px;border:1px solid rgba(22,28,34,.14);background:#fff;color:var(--ink-900);cursor:pointer;transition:background-color .2s ease,border-color .2s ease}
header.site-header.hnh .menu-btn:hover{background:var(--slate-50);border-color:rgba(22,28,34,.24)}
header.site-header.hnh .menu-btn svg{width:20px;height:20px}
header.site-header.hnh .menu-btn .mb-bars{display:none;width:26px;height:26px}
header.site-header.hnh .menu-btn:focus-visible{outline:3px solid var(--green-600);outline-offset:2px}

/* ---------- side panel (grid button, wide screens) ---------- */
body .drawer.hnd{
  left:auto;right:0;width:min(520px,100%);background:#fff;color:var(--ink-900);
  display:flex;flex-direction:column;overflow:hidden;
  box-shadow:0 0 0 100vmax rgba(15,20,25,.45),-40px 0 80px -40px rgba(15,20,25,.5);
  animation:hndIn .32s cubic-bezier(.23,1,.32,1);
}
body .drawer.hnd[hidden]{display:none}
@keyframes hndIn{from{transform:translateX(40px);opacity:0}}
body .drawer.hnd .hnd-top{display:flex;align-items:center;justify-content:space-between;flex:none;height:76px;padding:0 24px;border-bottom:1px solid rgba(22,28,34,.08)}
body .drawer.hnd .hnd-top .logo img{height:34px;width:auto}
body .drawer.hnd .menu-close{display:grid;place-items:center;width:44px;height:44px;border:0;border-radius:12px;background:var(--ink-900);color:#fff;cursor:pointer;transition:background-color .2s ease}
body .drawer.hnd .menu-close:hover{background:var(--ink-700)}
body .drawer.hnd .menu-close svg{width:18px;height:18px}
body .drawer.hnd .hnd-body{flex:1;overflow-y:auto;overscroll-behavior:contain;padding:28px 24px 32px}

body .drawer.hnd .hnd-kicker{display:flex;align-items:center;gap:12px;margin:0;font:600 12.5px/1.3 var(--body);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-700)}
body .drawer.hnd .hnd-kicker::before{content:"";width:24px;height:1.5px;background:var(--green-600)}
body .drawer.hnd .hnd-h{margin:14px 0 0;font:600 30px/1.15 var(--display);letter-spacing:-.02em;color:var(--ink-900);text-wrap:balance}
body .drawer.hnd .hnd-h em{font-style:normal;color:var(--green-700)}
body .drawer.hnd .hnd-lead{margin:12px 0 0;font-size:16px;line-height:1.55;color:var(--slate-500)}

body .drawer.hnd .hnd-k{display:block;margin:32px 0 12px;font:600 12px/16px var(--body);letter-spacing:.08em;text-transform:uppercase;color:var(--slate-500)}
body .drawer.hnd .hnd-row{display:flex;align-items:baseline;justify-content:space-between}
body .drawer.hnd .hnd-row .hnd-k{margin-bottom:12px}
body .drawer.hnd .hnd-more{font:600 14px/1 var(--body);color:var(--green-700);text-decoration:underline;text-underline-offset:3px}

body .drawer.hnd ul{margin:0;padding:0;list-style:none}
body .drawer.hnd .hnd-svcs{display:grid;gap:10px}
body .drawer.hnd .hnd-svc{display:flex;align-items:center;gap:14px;padding:8px 16px 8px 8px;border:1px solid rgba(22,28,34,.12);border-radius:18px;background:#fff;color:var(--ink-900);transition:border-color .2s ease,box-shadow .2s ease}
body .drawer.hnd .hnd-thumb{flex:none;width:56px;height:56px;border-radius:12px;overflow:hidden;background:var(--green-50)}
body .drawer.hnd .hnd-thumb img{width:100%;height:100%;object-fit:cover}
body .drawer.hnd .hnd-svc-t{min-width:0}
body .drawer.hnd .hnd-svc-t b{display:block;font:600 16px/1.3 var(--body)}
body .drawer.hnd .hnd-svc-t small{display:block;margin-top:2px;font-size:14px;line-height:1.35;color:var(--slate-500)}
body .drawer.hnd .hnd-svc>svg{flex:none;width:18px;height:18px;margin-left:auto;color:var(--green-700);transition:transform .2s ease}
body .drawer.hnd .hnd-svc:hover{border-color:var(--green-600);box-shadow:0 10px 24px -18px rgba(22,28,34,.4)}
body .drawer.hnd .hnd-svc:hover>svg{transform:translate(2px,-2px)}

body .drawer.hnd .hnd-pills{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
body .drawer.hnd .hnd-pills a{display:grid;place-items:center;height:46px;padding:0 8px;border-radius:12px;background:var(--slate-50);font:600 15px/1.2 var(--body);color:var(--ink-900);text-align:center;transition:background-color .2s ease,color .2s ease}
body .drawer.hnd .hnd-pills a:hover{background:var(--green-50);color:var(--green-700)}
body .drawer.hnd .hnd-pills a[aria-current]{background:var(--green-50);color:var(--green-700)}

body .drawer.hnd .hnd-talk{display:grid;gap:4px}
body .drawer.hnd .hnd-big{display:inline-flex;align-items:center;gap:12px;min-height:44px;font:600 19px/1.3 var(--display);letter-spacing:-.01em;color:var(--ink-900);transition:color .2s ease}
body .drawer.hnd .hnd-big svg{flex:none;width:22px;height:22px;color:var(--green-700)}
body .drawer.hnd .hnd-big:hover{color:var(--green-700)}

body .drawer.hnd .hnd-foot{flex:none;display:flex;align-items:center;gap:20px;padding:16px 24px;border-top:1px solid rgba(22,28,34,.08);background:#fff}
body .drawer.hnd .hnd-cta:hover{background:var(--green-600);border-color:var(--green-600)}
body .drawer.hnd .hnd-call{font:600 15px/1 var(--body);color:var(--ink-900);text-decoration:underline;text-underline-offset:4px;text-decoration-color:var(--slate-300)}
body .drawer.hnd .hnd-call:hover{color:var(--green-700);text-decoration-color:currentColor}
body .drawer.hnd a:focus-visible,body .drawer.hnd button:focus-visible,body .drawer.hnd summary:focus-visible{outline:3px solid var(--green-600);outline-offset:2px;border-radius:8px}
body .drawer.hnd .sr-only,header.site-header.hnh .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* the mobile list is only for small screens */
body .drawer.hnd .hnd-mob{display:none}

/* ---------- tablet + phone: hamburger, full-screen white menu with a plain list ---------- */
@media (max-width:1024px){
  header.site-header.hnh .hdr{padding:0 6px 0 18px}
  header.site-header.hnh .menu-btn{border-color:transparent;background:none}
  header.site-header.hnh .menu-btn:hover{background:var(--slate-50)}
  header.site-header.hnh .menu-btn .mb-grid{display:none}
  header.site-header.hnh .menu-btn .mb-bars{display:block}

  body .drawer.hnd{left:0;width:100%;box-shadow:none;overflow-y:auto;overscroll-behavior:contain;animation:hndFade .22s ease-out}
  body .drawer.hnd .hnd-top{height:65px;padding:0 16px 0 20px}
  body .drawer.hnd .hnd-top .logo img{height:32px}
  body .drawer.hnd .menu-close{background:none;color:var(--ink-900)}
  body .drawer.hnd .menu-close:hover{background:var(--slate-50)}
  body .drawer.hnd .menu-close svg{width:22px;height:22px}
  body .drawer.hnd .hnd-body{flex:none;overflow:visible;padding:12px 20px 8px}
  body .drawer.hnd .hnd-panel{display:none}
  body .drawer.hnd .hnd-mob{display:block}
  body .drawer.hnd .hnd-l{display:flex;align-items:center;justify-content:space-between;width:100%;min-height:44px;font:600 18px/1.2 var(--body);color:var(--ink-900);cursor:pointer;list-style:none}
  body .drawer.hnd summary.hnd-l::-webkit-details-marker{display:none}
  body .drawer.hnd .hnd-l.is-current{color:var(--green-700)}
  body .drawer.hnd .hnd-l .car{width:18px;height:18px;transition:transform .2s ease}
  body .drawer.hnd details[open] .hnd-l .car{transform:rotate(180deg)}
  body .drawer.hnd .hnd-sub{padding:0 0 10px 12px}
  body .drawer.hnd .hnd-sub a{display:flex;align-items:center;min-height:44px;font:500 16px/1.3 var(--body);color:var(--ink-800)}
  body .drawer.hnd .hnd-sub a[aria-current]{color:var(--green-700)}
  body .drawer.hnd .hnd-g{padding:14px 0 4px;font:600 12px/16px var(--body);letter-spacing:.08em;text-transform:uppercase;color:var(--slate-500)}
  body .drawer.hnd .hnd-foot{flex-wrap:wrap;padding:16px 20px 32px;border-top:0}
  body .drawer.hnd .hnd-cta{background:var(--ink-900);border-color:var(--ink-900);color:#fff}
  body .drawer.hnd .hnd-cta:hover{background:var(--ink-700);border-color:var(--ink-700)}
  body .drawer.hnd .hnd-cta .hdr-cta-ic{background:rgba(255,255,255,.14)}
}
@keyframes hndFade{from{opacity:0;transform:translateY(-6px)}}
@media (max-width:640px){
  header.site-header.hnh .hdr-cta{display:none}
}
@media (max-width:720px){
  header.site-header.hnh .hdr{height:56px;padding:0 4px 0 14px;border-radius:18px}
  header.site-header.hnh .logo img{height:32px}
}
@media (max-width:1180px) and (min-width:1025px){
  header.site-header.hnh .main-nav ul{gap:24px}
}

@media (prefers-reduced-motion:reduce){
  body .drawer.hnd{animation:none}
  header.site-header.hnh .nav-link,header.site-header.hnh .mega,header.site-header.hnh .car,
  header.site-header.hnh .hdr-cta-ic svg,body .drawer.hnd .hnd-svc>svg,header.site-header.hnh .mg-all svg{transition:none}
}

/* phone menu: one dropdown per platform, each ending in a link to that platform's services */
@media (max-width:1024px){
  body .drawer.hnd .hnd-mob details{border-bottom:0}
  body .drawer.hnd .hnd-mob summary.hnd-l{padding:0;margin:0;height:auto}
  body .drawer.hnd .hnd-all{gap:8px;font-weight:600;color:var(--green-700)}
  body .drawer.hnd .hnd-all svg{width:16px;height:16px}
}

/* ---- "Follow us" icons in the menu (2026-11-11) ---- */
body .drawer.hnd .hnd-follow{list-style:none;margin:0 0 4px;padding:0;display:flex;flex-wrap:wrap;gap:8px}
body .drawer.hnd .hnd-follow a{display:grid;place-items:center;width:44px;height:44px;border-radius:12px;border:1px solid var(--slate-200);background:#fff;color:var(--ink-800);transition:border-color .2s var(--ease),color .2s var(--ease)}
body .drawer.hnd .hnd-follow svg{width:20px;height:20px;fill:currentColor}
body .drawer.hnd .hnd-follow a:hover{border-color:var(--green-700);color:var(--green-700)}
body .drawer.hnd .hnd-follow a:focus-visible{outline:2px solid var(--green-700);outline-offset:2px}
body .drawer.hnd .hnd-follow-mob{display:none}
@media (max-width:1024px){body .drawer.hnd .hnd-follow-mob{display:flex;margin:20px 0 8px;padding-top:20px;border-top:1px solid var(--slate-200)}}
@media (prefers-reduced-motion:reduce){body .drawer.hnd .hnd-follow a{transition:none}}