/*
  The site chrome: the one top menu and the one footer of every page (src/rebrand/v2/site-chrome.ts; CLAUDE.md "Site
  chrome"). Its design is the six service pages' header and footer. Every class is prefixed pi- so no page stylesheet
  reaches inside it and nothing here reaches outside it, except .cta-call: the site's one "book a call" button style,
  used by the header's button and by every book-a-call link on every page.
*/
@font-face{font-family:'Anton';font-style:normal;font-weight:400;font-display:swap;src:url(/v2/assets/fonts/anton-400.woff2) format('woff2')}
@font-face{font-family:'Inter Tight';font-style:normal;font-weight:400;font-display:swap;src:url(/v2/assets/fonts/inter-tight-400.woff2) format('woff2')}
@font-face{font-family:'Inter Tight';font-style:normal;font-weight:700;font-display:swap;src:url(/v2/assets/fonts/inter-tight-700.woff2) format('woff2')}

.pi-hdr,.pi-ftr,.pi-skip,.cta-call{
  --pi-ink:#080a09;--pi-ink-2:#050605;--pi-panel:#111412;--pi-panel-2:#1a1e1b;--pi-line:#343a35;
  --pi-muted:#b3b5af;--pi-muted-2:#8a938a;--pi-paper:#f4f4f2;--pi-lime:#e3fe52;--pi-lime-hover:#d2ee3c;
  --pi-display:'Anton','Arial Narrow',Impact,sans-serif;--pi-sans:'Inter Tight','Helvetica Neue',Arial,sans-serif;
  --pi-max:1440px;--pi-px:clamp(20px,5.5vw,80px);
}
.pi-hdr *,.pi-hdr *::before,.pi-hdr *::after,.pi-ftr *,.pi-ftr *::before,.pi-ftr *::after{box-sizing:border-box}

/* skip link */
.pi-skip{position:absolute;left:16px;top:-80px;z-index:200;padding:10px 16px;border-radius:4px;background:var(--pi-lime);color:var(--pi-ink);font-family:var(--pi-sans);font-size:16px;font-weight:700;text-decoration:none}
.pi-skip:focus{top:16px}

/* the book-a-call button, everywhere: a lime pill (the subscribe button's shape) */
a.cta-call.cta-call{background:var(--pi-lime);color:var(--pi-ink);border:0;border-radius:999px;text-decoration:none}
a.cta-call.cta-call:hover{background:var(--pi-lime-hover);color:var(--pi-ink)}
a.cta-call.cta-call:focus-visible{outline:2px solid var(--pi-paper);outline-offset:3px}
/* on a lime surface it turns ink, so it never disappears */
.on-lime a.cta-call.cta-call{background:var(--pi-ink);color:var(--pi-lime)}
.on-lime a.cta-call.cta-call:hover{background:#242a25;color:var(--pi-lime)}
.on-lime a.cta-call.cta-call:focus-visible{outline-color:var(--pi-ink)}
/* on a paper surface its focus ring turns ink, so the ring stays visible */
.on-paper a.cta-call.cta-call:focus-visible{outline-color:var(--pi-ink)}

/* header */
.pi-hdr{position:absolute;top:0;left:0;right:0;z-index:20;margin:0;color:var(--pi-paper);border-bottom:1px solid rgba(244,244,242,.14);font-family:var(--pi-sans);font-size:15px;font-weight:400;line-height:1.6;-webkit-font-smoothing:antialiased;text-align:left}
.pi-hdr--solid{position:relative;background:var(--pi-ink)}
.pi-hdr--sticky{position:sticky;background:var(--pi-ink)}
.pi-hdr-in{max-width:var(--pi-max);margin:0 auto;padding:0 var(--pi-px);min-height:84px;display:flex;align-items:center;justify-content:space-between;gap:24px}
.pi-brand{display:flex;flex-direction:column;gap:4px;color:inherit;text-decoration:none}
.pi-brand b{font-family:var(--pi-display);font-weight:400;font-size:26px;line-height:1;letter-spacing:.01em}
.pi-brand span{font-size:10px;font-weight:700;line-height:1;letter-spacing:.18em;color:var(--pi-muted)}
.pi-brand:hover{color:inherit}
.pi-nav{display:flex;align-items:center;gap:8px 26px;font-size:15px}
.pi-nav a{color:inherit;text-decoration:none}
.pi-nav>a,.pi-dd-btn{white-space:nowrap}
.pi-nav a:hover,.pi-dd-btn:hover{color:var(--pi-lime)}
.pi-nav [aria-current="page"],.pi-nav .is-current{color:var(--pi-lime)}
.pi-new{margin-left:6px;padding:3px 5px;border-radius:2px;background:var(--pi-lime);color:var(--pi-ink);font-size:10px;font-weight:700;letter-spacing:.12em;vertical-align:2px}
.pi-dd{position:relative}
.pi-dd-btn{display:flex;align-items:center;gap:6px;margin:0;padding:0;border:0;background:none;color:inherit;font:inherit;font-size:15px;cursor:pointer}
.pi-dd-btn svg{transition:transform .2s}
.pi-dd.open .pi-dd-btn svg{transform:rotate(180deg)}
.pi-dd-menu{position:absolute;top:calc(100% + 16px);left:-18px;min-width:350px;padding:8px;border:1px solid var(--pi-line);border-radius:6px;background:var(--pi-panel);box-shadow:0 24px 48px rgba(0,0,0,.5);display:none}
.pi-dd.open .pi-dd-menu{display:block}
.pi-dd-menu a{display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-start;gap:3px;padding:11px 12px;border-radius:4px}
.pi-dd-menu a:hover{background:var(--pi-panel-2)}
.pi-dd-menu small{font-size:13px;line-height:1.35;color:var(--pi-muted)}
.pi-nav a.pi-cta{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:0 20px;font-size:15px;font-weight:700;line-height:1.2;white-space:nowrap}
.pi-nav a.pi-cta:hover{color:var(--pi-ink)}
.pi-menu-btn{display:none;align-items:center;gap:8px;min-height:44px;margin:0;padding:0 14px;border:1px solid var(--pi-muted-2);border-radius:4px;background:none;color:inherit;font:inherit;font-size:15px;font-weight:700;cursor:pointer}
.pi-hdr :focus-visible,.pi-ftr :focus-visible{outline:2px solid var(--pi-lime);outline-offset:3px}

/* footer */
.pi-ftr{margin:0;background:var(--pi-ink-2);color:var(--pi-paper);border-top:1px solid var(--pi-line);font-family:var(--pi-sans);font-size:18px;font-weight:400;line-height:1.6;-webkit-font-smoothing:antialiased;text-align:left}
.pi-ftr-in{max-width:var(--pi-max);margin:0 auto;padding:56px var(--pi-px) 48px;display:grid;grid-template-columns:minmax(0,1.3fr) repeat(2,minmax(0,1fr));gap:32px 48px}
.pi-ftr p{margin:14px 0 0;max-width:360px;font-size:15px;line-height:1.5;color:var(--pi-muted)}
.pi-ftr h3{margin:0;font-family:var(--pi-sans);font-size:13px;font-weight:700;line-height:1.6;letter-spacing:.08em;text-transform:uppercase;color:var(--pi-muted-2)}
.pi-ftr ul{margin:12px 0 0;padding:0;list-style:none;display:grid;gap:8px;font-size:15px}
.pi-ftr li{margin:0;padding:0}
.pi-ftr li::before,.pi-ftr li::marker{content:none}
.pi-ftr a{color:inherit;text-decoration:none}
.pi-ftr a:hover{color:var(--pi-lime)}

/* The full menu needs about 1,180 px with the header's call to action (measured 2026-10-21): tighter from 1,240 px,
   the phone menu from 1,200 px, so no item ever wraps. */
@media (max-width:1240px){
  .pi-nav{gap:8px 18px}
}
@media (max-width:1200px){
  .pi-menu-btn{display:inline-flex}
  .pi-nav{display:none}
  .pi-hdr.open{background:var(--pi-panel)}
  .pi-hdr.open .pi-nav{display:flex;position:absolute;top:100%;left:0;right:0;flex-direction:column;align-items:stretch;gap:0;padding:6px var(--pi-px) 22px;background:var(--pi-panel);border-bottom:1px solid var(--pi-line)}
  .pi-hdr.open .pi-nav>a,.pi-hdr.open .pi-nav>.pi-dd{padding:14px 0;border-bottom:1px solid var(--pi-line);font-size:17px}
  .pi-hdr.open .pi-dd-menu{position:static;display:block;margin-top:8px;box-shadow:none;border:0;padding:0;background:none}
  .pi-hdr.open .pi-nav>a.pi-cta{margin-top:16px;justify-content:center;border-bottom:0}
}
@media (max-width:980px){
  .pi-ftr-in{grid-template-columns:minmax(0,1fr)}
}
@media (prefers-reduced-motion:reduce){
  .pi-dd-btn svg{transition:none}
}