/* Site chrome, the same on every page: header with the Platform and Services panels, the phone menu sheet, the footer.
   Markup: tools/partials/header.html and footer.html, written into every page by tools/apply_chrome.py.
   This file sits on top of three different page bases (home.css, the older inline page styles, the kit in page.css),
   so every property the chrome relies on is set here explicitly: colour, hover colour, font, margins, lists, decoration. */

@font-face{font-family:'Geist';font-style:normal;font-weight:300 900;font-display:swap;src:url(/fonts/Geist-latinext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Geist';font-style:normal;font-weight:300 900;font-display:swap;src:url(/fonts/Geist-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}

.hdr,.ft{
  --c-canvas:#F3F2EE;--c-tile:#E8E7E1;--c-line:#D8D7D0;--c-ink:#14201B;--c-ink2:#4A5550;
  --c-green:#1C4A39;--c-green2:#27604B;--c-mint:#E6EEE9;--c-foot:#0C261E;--c-on-dark:#EEF2EF;--c-on-dark2:#A9B9B1;
  --c-font:'Geist','Inter',Helvetica,Arial,sans-serif;
  --c-gut:max(24px, env(safe-area-inset-left, 0px), env(safe-area-inset-right, 0px));--c-max:1440px;
  --c-ease:cubic-bezier(0.23,1,0.32,1);--c-bar:68px;
  font-family:var(--c-font);font-size:16px;line-height:1.5;letter-spacing:-0.006em;-webkit-font-smoothing:antialiased;text-align:left;
}
.hdr *,.hdr *::before,.hdr *::after,.ft *,.ft *::before,.ft *::after{box-sizing:border-box;}
.hdr ul,.ft ul{margin:0;padding:0;list-style:none;}
.hdr p,.ft p,.ft h2{margin:0;}
.hdr a,.ft a{text-decoration:none;}
.hdr button{font:inherit;letter-spacing:inherit;margin:0;}
.hdr a,.hdr button,.ft a{-webkit-tap-highlight-color:transparent;touch-action:manipulation;}

/* ---------- Header bar ---------- */
/* Inner pages: sticky and solid. The homepage (and kit pages with a dark hero) add .over: fixed, clear over the hero,
   solid once it has scrolled away (site.js). The solid fill is a separate layer, so the bar never becomes the
   containing block of the fixed phone sheet (backdrop-filter on the header itself would trap it). */
.hdr{position:sticky;top:0;left:0;right:0;z-index:30;padding-top:env(safe-area-inset-top, 0px);color:var(--c-ink);--t-ink:#14201B;}
.hdr::before{content:"";position:absolute;inset:0;z-index:-1;background:rgba(243,242,238,.94);-webkit-backdrop-filter:blur(14px) saturate(1.2);backdrop-filter:blur(14px) saturate(1.2);box-shadow:0 1px 0 var(--c-line);transition:opacity .2s ease;}
.hdr.over{position:fixed;color:#fff;--t-ink:#FFFFFF;transition:color .2s ease;}
.hdr.over::before{opacity:0;}
.hdr.over.solid,.hdr.menu-open{color:var(--c-ink);--t-ink:#14201B;}
.hdr.over.solid::before,.hdr.menu-open::before{opacity:1;}
.hdr.menu-open{z-index:70;}
.hdr.menu-open::before{background:var(--c-canvas);}

.hdr .hdr-row{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:16px;height:var(--c-bar);max-width:var(--c-max);margin:0 auto;padding:0 var(--c-gut);}
.hdr .hdr-logo{display:flex;align-items:center;min-height:44px;margin-right:24px;color:inherit;}
.hdr .hdr-logo svg{display:block;width:112px;height:auto;}
.hdr .hdr-nav{min-width:0;}
.hdr .hdr-list{display:flex;align-items:center;gap:2px;white-space:nowrap;}
.hdr .hdr-l,.hdr .hdr-t{display:inline-flex;align-items:center;gap:6px;height:36px;padding:0 10px;border:0;border-radius:8px;background:transparent;color:inherit;font-size:15px;font-weight:400;line-height:1;cursor:pointer;transition:background-color .16s ease;}
.hdr .hdr-chev{width:12px;height:12px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;opacity:.7;transition:transform .18s var(--c-ease);}
.hdr .hdr-dd.open .hdr-chev{transform:rotate(180deg);}
@media (hover:hover) and (pointer:fine){
  .hdr .hdr-l:hover,.hdr .hdr-t:hover{background:rgba(20,32,27,.06);color:inherit;}
  .hdr.over:not(.solid):not(.menu-open) .hdr-l:hover,.hdr.over:not(.solid):not(.menu-open) .hdr-t:hover{background:rgba(255,255,255,.12);}
}
.hdr .hdr-dd.open .hdr-t{background:rgba(20,32,27,.06);}
.hdr.over:not(.solid) .hdr-dd.open .hdr-t{background:rgba(255,255,255,.14);}
/* the page you are on, and the group it belongs to */
.hdr .hdr-l[aria-current],.hdr .hdr-t.is-current{text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:6px;}

.hdr .hdr-end{justify-self:end;display:flex;align-items:center;gap:10px;}
.hdr .hdr-login{display:inline-flex;align-items:center;height:36px;padding:0 10px;color:inherit;font-size:15px;text-decoration:underline;text-decoration-color:transparent;text-decoration-thickness:1px;text-underline-offset:5px;transition:color .16s ease,text-decoration-color .16s ease;}
@media (hover:hover) and (pointer:fine){
  .hdr .hdr-login:hover{color:var(--c-green);text-decoration-color:currentColor;}
  .hdr.over:not(.solid):not(.menu-open) .hdr-login:hover{color:#CFE3D6;}
}
.hdr .hdr-cta{display:inline-flex;align-items:center;height:40px;padding:0 16px;border-radius:8px;background:var(--c-green);color:#fff;font-size:15px;font-weight:500;white-space:nowrap;transition:background-color .16s ease,transform 140ms var(--c-ease);}
.hdr.over:not(.solid):not(.menu-open) .hdr-cta{background:#fff;color:var(--c-ink);}
@media (hover:hover) and (pointer:fine){
  .hdr .hdr-cta:hover{background:var(--c-green2);color:#fff;}
  .hdr.over:not(.solid):not(.menu-open) .hdr-cta:hover{background:#E8EFEA;color:var(--c-ink);}
}
.hdr .hdr-cta:active,.hdr .hdr-menu:active,.hdr .hdr-t:active{transform:scale(.97);}
.hdr .hdr-t{transition:background-color .16s ease,transform 140ms var(--c-ease);}

/* menu button: three lines, an X while the sheet is open */
.hdr .hdr-menu{display:none;align-items:center;justify-content:center;width:44px;height:44px;margin-right:-4px;padding:0;border:1px solid var(--c-line);border-radius:999px;background:transparent;color:inherit;cursor:pointer;transition:border-color .2s ease,transform 140ms var(--c-ease);}
.hdr.over:not(.solid):not(.menu-open) .hdr-menu{border-color:rgba(255,255,255,.4);}
.hdr .hdr-menu span{position:relative;display:block;width:16px;height:1.5px;background:currentColor;transition:background-color .15s ease;}
.hdr .hdr-menu span::before,.hdr .hdr-menu span::after{content:"";position:absolute;left:0;width:16px;height:1.5px;background:currentColor;transition:transform .22s var(--c-ease),top .22s var(--c-ease);}
.hdr .hdr-menu span::before{top:-5px;}.hdr .hdr-menu span::after{top:5px;}
.hdr .hdr-menu[aria-expanded="true"] span{background:transparent;}
.hdr .hdr-menu[aria-expanded="true"] span::before{top:0;transform:rotate(45deg);}
.hdr .hdr-menu[aria-expanded="true"] span::after{top:0;transform:rotate(-45deg);}

/* ---------- Dropdown panels ---------- */
.hdr .hdr-dd{position:relative;}
.hdr .hdr-p{position:absolute;top:calc(100% + 14px);left:-8px;z-index:2;width:344px;padding:8px;border-radius:16px;background:#fff;color:var(--c-ink);
  box-shadow:0 0 0 1px rgba(20,32,27,.07),0 2px 4px rgba(12,38,30,.05),0 22px 48px rgba(12,38,30,.16);
  visibility:hidden;opacity:0;transform:translateY(-4px) scale(.97);transform-origin:40px 0;
  transition:opacity .12s ease-out,transform .12s var(--c-ease),visibility 0s linear .12s;}
.hdr .hdr-p2{width:664px;}
.hdr .hdr-p2 .hdr-pl{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:2px;}
/* a panel replaced by the other one closes without fading (site.js adds .instant for two frames) */
.hdr .hdr-dd.instant .hdr-p{transition:none !important;}
/* a bridge over the gap between trigger and panel, so a mouse can travel down without the panel closing */
.hdr .hdr-p::before{content:"";position:absolute;left:0;right:0;top:-16px;height:16px;}
.hdr .hdr-dd.open .hdr-p,.hdr:not(.is-js) .hdr-dd:hover .hdr-p,.hdr:not(.is-js) .hdr-dd:focus-within .hdr-p{visibility:visible;opacity:1;transform:none;transition:opacity .18s var(--c-ease),transform .18s var(--c-ease),visibility 0s;}
.hdr .hdr-i{display:flex;align-items:flex-start;gap:12px;padding:10px;border-radius:8px;color:var(--c-ink);white-space:normal;transition:background-color .14s ease;}
.hdr .hdr-ic{flex:0 0 auto;display:grid;place-items:center;width:36px;height:36px;border-radius:8px;background:var(--c-mint);color:var(--c-green);}
.hdr .hdr-ic-s{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;}
.hdr .hdr-tx{display:flex;flex-direction:column;gap:2px;min-width:0;padding-top:1px;}
.hdr .hdr-tt{font-size:15px;line-height:20px;font-weight:500;letter-spacing:-0.01em;color:var(--c-ink);}
.hdr .hdr-ds{font-size:13px;line-height:18px;color:var(--c-ink2);text-wrap:pretty;}
@media (hover:hover) and (pointer:fine){.hdr .hdr-i:hover{background:var(--c-canvas);color:var(--c-ink);}}
.hdr .hdr-i:focus-visible{outline:2px solid var(--c-green2);outline-offset:-2px;}
.hdr .hdr-i[aria-current]{background:var(--c-canvas);}
.hdr .hdr-i[aria-current] .hdr-tt{color:var(--c-green);}
.hdr .hdr-i[aria-current] .hdr-ic{background:var(--c-green);color:#fff;}

/* focus rings on the clear bar read on the dark hero */
.hdr :focus-visible{outline:2px solid var(--c-green2);outline-offset:3px;border-radius:8px;}
.hdr.over:not(.solid):not(.menu-open) .hdr-row :focus-visible{outline-color:#CFE3D6;}

/* ---------- Phone menu sheet (below 960px) ---------- */
.hdr .msheet{position:fixed;left:0;right:0;bottom:0;top:calc(var(--c-bar) + env(safe-area-inset-top, 0px));z-index:1;display:flex;flex-direction:column;background:var(--c-canvas);color:var(--c-ink);
  visibility:hidden;opacity:0;transform:translateY(-8px);transition:opacity .16s ease-out,transform .16s var(--c-ease),visibility 0s linear .16s;}
.hdr .msheet.open{visibility:visible;opacity:1;transform:none;transition:opacity .22s var(--c-ease),transform .26s var(--c-ease),visibility 0s;}
.hdr .msheet-in{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;padding:8px var(--c-gut) 24px;}
.hdr .msheet-g{padding-top:20px;}
.hdr .msheet-g + .msheet-g{margin-top:8px;}
/* groups are separated by space alone, like iOS lists; the unlabelled last group sits as far from Services as Services sits from Platform */
.hdr .msheet-g:last-child{padding-top:8px;}
.hdr .msheet-h{font-size:13px;line-height:20px;font-weight:500;color:var(--c-green2);margin:0 0 4px;}
.hdr .msheet a{display:flex;align-items:center;min-height:48px;padding:0;border-bottom:1px solid var(--c-line);color:var(--c-ink);font-size:17px;line-height:1.3;letter-spacing:-0.01em;-webkit-user-select:none;user-select:none;}
.hdr .msheet li:last-child a{border-bottom:0;}
.hdr .msheet a:not(.msheet-btn):active{color:var(--c-green);}
.hdr .msheet a[aria-current]:not(.msheet-btn){color:var(--c-green);font-weight:500;}
.hdr .msheet-cta{flex:0 0 auto;padding:12px var(--c-gut) calc(12px + env(safe-area-inset-bottom, 0px));background:var(--c-canvas);box-shadow:0 -1px 0 var(--c-line);}
.hdr .msheet .msheet-btn{display:flex;align-items:center;justify-content:center;min-height:52px;border:0;border-radius:10px;background:var(--c-green);color:#fff;font-size:16px;font-weight:500;transition:transform 140ms var(--c-ease),background-color .16s ease;}
.hdr .msheet .msheet-btn:active{transform:scale(.97);color:#fff;background:var(--c-green2);}
/* while the sheet is open its own Book a demo is the one call to action, so the bar drops its copy */
.hdr.menu-open .hdr-cta{visibility:hidden;opacity:0;}
/* the open sheet staggers in by group */
@media (prefers-reduced-motion:no-preference){
  .hdr .msheet.open .msheet-g{animation:c-in .3s var(--c-ease) both;}
  .hdr .msheet.open .msheet-g:nth-child(2){animation-delay:40ms;}
  .hdr .msheet.open .msheet-g:nth-child(3){animation-delay:80ms;}
}
@keyframes c-in{from{opacity:0;transform:translateY(6px);}to{opacity:1;transform:none;}}

/* ---------- Breakpoints ---------- */
@media (max-width:959px){
  .hdr .hdr-nav,.hdr .hdr-login{display:none;}
  .hdr .hdr-menu{display:inline-flex;}
}
@media (min-width:960px){.hdr .msheet{display:none;}}
@media (max-width:759px){
  .hdr,.ft{--c-gut:max(16px, env(safe-area-inset-left, 0px), env(safe-area-inset-right, 0px));}
}
@media (max-width:420px){
  .hdr .hdr-row{gap:8px;}
  .hdr .hdr-logo{margin-right:0;}
  .hdr .hdr-logo svg{width:100px;}
  .hdr .hdr-cta{height:44px;padding:0 14px;font-size:14px;}
}
@media (max-width:359px){.hdr .hdr-logo svg{width:88px;}.hdr .hdr-cta{padding:0 10px;font-size:13px;}}

/* ---------- Footer ---------- */
.ft{background:var(--c-foot);color:var(--c-on-dark);--t-ink:#FFFFFF;margin:0;}
.ft .ft-in{max-width:var(--c-max);margin:0 auto;padding:72px var(--c-gut) 56px;display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,4fr);gap:32px;}
.ft .ft-logo{display:inline-flex;color:inherit;}
.ft .ft-logo svg{display:block;width:107px;height:auto;}
.ft .ft-meta{max-width:22em;margin-top:18px;font-size:14px;line-height:1.6;color:var(--c-on-dark2);text-wrap:pretty;}
.ft .ft-badges{display:flex;flex-wrap:wrap;gap:8px;margin-top:20px;}
.ft .ft-badges li{font-size:13px;line-height:1;padding:8px 12px;border:1px solid rgba(255,255,255,.14);border-radius:999px;color:var(--c-on-dark);white-space:nowrap;}
.ft .ft-cols{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:32px;}
.ft .ft-col .ft-h{margin:0 0 16px !important;font-family:var(--c-font) !important;font-size:14px !important;line-height:20px !important;font-weight:500 !important;letter-spacing:0 !important;color:var(--c-on-dark2) !important;text-wrap:wrap;}
.ft .ft-col ul{display:flex;flex-direction:column;gap:10px;align-items:flex-start;}
.ft .ft-col a,.ft .ft-base a{color:var(--c-on-dark);font-size:15px;line-height:1.4;text-decoration:underline;text-decoration-color:transparent;text-decoration-thickness:1px;text-underline-offset:3px;transition:color .16s ease,text-decoration-color .16s ease;}
@media (hover:hover) and (pointer:fine){.ft .ft-col a:hover,.ft .ft-base a:hover{color:#fff;text-decoration-color:currentColor;}}
.ft .ft-col a[aria-current]{color:#fff;text-decoration-color:rgba(255,255,255,.5);}
.ft :focus-visible{outline:2px solid #CFE3D6;outline-offset:3px;border-radius:4px;}
.ft .ft-base{max-width:var(--c-max);margin:0 auto;padding:22px var(--c-gut) calc(30px + env(safe-area-inset-bottom, 0px));border-top:1px solid rgba(255,255,255,.12);display:flex;justify-content:space-between;align-items:center;gap:16px;font-size:13px;color:var(--c-on-dark2);}
.ft .ft-base a{font-size:13px;color:var(--c-on-dark2);}
@media (max-width:1199px){
  .ft .ft-in{grid-template-columns:1fr;gap:48px;}
}
@media (max-width:759px){
  .ft .ft-in{padding:48px var(--c-gut) 36px;gap:36px;}
  .ft .ft-cols{grid-template-columns:repeat(2,minmax(0,1fr));gap:32px 16px;}
}
@media (pointer:coarse){
  /* touch screens: every tap target at least 44px; desktop sizes stay as they are */
  .hdr .hdr-cta{height:44px;}
  .hdr .hdr-l,.hdr .hdr-t,.hdr .hdr-login{min-height:44px;}
  .ft .ft-logo{min-height:44px;align-items:center;}
  .ft .ft-col ul{gap:0;}
  .ft .ft-col a{display:inline-flex;align-items:center;min-height:44px;min-width:44px;padding:6px 0;}   /* padding separates links that wrap to two lines */
  .ft .ft-col .ft-h{margin-bottom:4px !important;}
  .ft .ft-base a{display:inline-flex;align-items:center;min-height:44px;}
}

/* ---------- Reduced motion: no movement, states change at once ---------- */
@media (prefers-reduced-motion:reduce){
  .hdr .hdr-p,.hdr .msheet{transform:none !important;transition:none !important;}
  .hdr .hdr-chev,.hdr .hdr-menu span::before,.hdr .hdr-menu span::after{transition:none !important;}
}

/* ---------- Print ---------- */
@media print{.hdr,.ft{display:none !important;}}

/* ---------- Pages built before the kit ---------- */
/* their sections use a 20px phone gutter; the bar and footer match it so the logo lines up with the page */
@media (max-width:767px){html[data-theme="v2"] :is(.hdr,.ft){--c-gut:max(20px, env(safe-area-inset-left, 0px), env(safe-area-inset-right, 0px));}}
/* they end on a dark band of their own, so the footer keeps a hairline above it */
html[data-theme="v2"] .ft{box-shadow:inset 0 1px 0 rgba(255,255,255,.08);}
@media (min-width:760px) and (max-width:899px){
  .ft .ft-cols{grid-template-columns:repeat(3,minmax(0,1fr));gap:32px 24px;}
}