/* Common site chrome (header + footer) injected by release/build.mjs into every
   static page under /site/. A 1:1 replica of SiteHeader / SiteFooter from the
   React application (demo/deploy/chrome.jsx) with the same design-system tokens.

   Static pages define their own :root tokens (--cream, --navy, ...) with slightly
   different values, so everything here uses namespaced --usc-* tokens and never
   touches the page's own variables. The one shared contract is
   --us-site-header-h: sticky elements in the pages set top:var(--us-site-header-h,0)
   so they sit below the header. */
/* The chrome's own webfonts, so every page renders it the same. The static pages load
   Roboto only at weight 900 (their headings); without the 400 cut the browser draws the
   footer address and contact at 900 and the chrome looks bolder than on Home. The
   application loads the same families through its design system (tokens/fonts.css). */
@import url("https://fonts.googleapis.com/css2?family=Roboto:wght@400;900&family=Work+Sans:wght@400;600&display=swap");

:root{--us-site-header-h:76px}

.us-site-header,.us-site-footer{
  --usc-navy:#182430;
  --usc-cream:#fcfcfc;
  --usc-coral:#e84030;
  --usc-mint:#b8e0d0;
  --usc-soft:#9fb3ab;                 /* text-on-navy-soft */
  --usc-hairline:rgba(24,36,48,.12);
  --usc-font-display:"Roboto","Helvetica Neue",Arial,sans-serif;
  --usc-font-label:"Work Sans",Arial,sans-serif;
  --usc-gutter:clamp(20px,5vw,80px);
  --usc-max:1440px;
  --usc-ease:cubic-bezier(.22,.61,.36,1);
  --usc-dur:220ms;
  box-sizing:border-box;
  font-family:var(--usc-font-label);
  -webkit-font-smoothing:antialiased;
  text-align:left;
}
.us-site-header *,.us-site-footer *{box-sizing:border-box}
.us-site-header a,.us-site-footer a{text-decoration:none;border-bottom:0;background:none;outline-offset:2px}
.us-site-header a:focus-visible,.us-site-footer a:focus-visible,.us-site-menu:focus-visible{outline:2px solid var(--usc-coral);outline-offset:2px;border-radius:0}

/* ── Header ─────────────────────────────────────────────────────────────── */
.us-site-header{
  position:sticky;top:0;z-index:40;
  background:var(--usc-cream);color:var(--usc-navy);
  border-bottom:1px solid var(--usc-navy);
  margin:0;padding:0;width:100%;
}
.us-site-header__in{
  max-width:var(--usc-max);margin:0 auto;padding:0 var(--usc-gutter);
  height:var(--us-site-header-h,76px);
  display:flex;align-items:center;justify-content:space-between;gap:32px;
}
.us-site-brand{display:flex;align-items:center;gap:12px;color:var(--usc-navy);flex:none;min-height:44px}
.us-site-brand:hover{color:var(--usc-coral)}
.us-site-logo{
  width:30px;height:30px;display:block;flex:none;background:currentColor;
  /* relative to this stylesheet (/chrome/chrome.css), so it resolves the same from
     every page depth; a var() declared inline would resolve differently in Chrome */
  -webkit-mask-image:url(../assets/logo/compass-white.png?v=984c667e88f967e4);mask-image:url(../assets/logo/compass-white.png?v=984c667e88f967e4);
  -webkit-mask-size:contain;mask-size:contain;
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
  -webkit-mask-position:center;mask-position:center;
}
.us-site-wordmark{font-family:var(--usc-font-display);font-weight:900;font-size:20px;letter-spacing:-.02em;line-height:1;white-space:nowrap}

.us-site-nav{display:flex;align-items:center;gap:32px;margin:0;padding:0}
.us-site-nav a{
  font-family:var(--usc-font-label);font-size:12px;font-weight:600;letter-spacing:.08em;
  text-transform:uppercase;color:var(--usc-navy);line-height:1;
  padding:0 0 2px;border-bottom:1px solid transparent;white-space:nowrap;
  transition:color var(--usc-dur) var(--usc-ease),border-color var(--usc-dur) var(--usc-ease);
}
.us-site-nav a:hover{color:var(--usc-coral)}
.us-site-nav a[aria-current="page"]{border-bottom-color:var(--usc-coral)}
/* desktop nav: the whole <a> is a 44 px tap target (tablets show this nav at 1024);
   the coral underline sits on the inner span, under the text, as in the application */
.us-site-nav--desk a{display:inline-flex;align-items:center;min-height:44px;padding:0;border-bottom:0}
.us-site-nav--desk a>span{border-bottom:1px solid transparent;padding-bottom:2px;transition:border-color var(--usc-dur) var(--usc-ease)}
.us-site-nav--desk a[aria-current="page"]>span{border-bottom-color:var(--usc-coral)}

.us-site-menu{
  display:none;width:44px;height:44px;flex:none;align-items:center;justify-content:center;
  margin:0;padding:0;border:1px solid var(--usc-navy);border-radius:0;background:transparent;color:var(--usc-navy);
  cursor:pointer;font:inherit;
  transition:background var(--usc-dur) var(--usc-ease),color var(--usc-dur) var(--usc-ease);
}
.us-site-menu:hover{background:var(--usc-navy);color:var(--usc-cream)}
.us-site-menu svg{width:18px;height:18px;display:block;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.us-site-menu .us-site-menu__x{display:none}
.us-site-menu[aria-expanded="true"] .us-site-menu__bars{display:none}
.us-site-menu[aria-expanded="true"] .us-site-menu__x{display:block}

.us-site-nav--mob{
  display:none;flex-direction:column;align-items:stretch;gap:0;
  border-top:1px solid var(--usc-navy);padding:16px var(--usc-gutter);
  background:var(--usc-cream);
}
.us-site-nav--mob a{
  font-size:14px;padding:14px 0;border-bottom:1px solid var(--usc-hairline);
  display:block;min-height:44px;line-height:1.15;
}
.us-site-nav--mob a[aria-current="page"]{color:var(--usc-coral)}
.us-site-nav--mob[hidden]{display:none!important}

@media (max-width:860px){
  .us-site-nav--desk{display:none!important}
  .us-site-menu{display:inline-flex}
  .us-site-nav--mob:not([hidden]){display:flex}
}

/* ── Footer ─────────────────────────────────────────────────────────────── */
.us-site-footer{
  position:relative;overflow:hidden;margin:0;padding:0;width:100%;
  background:var(--usc-navy);color:var(--usc-cream);
  border-top:1px solid rgba(252,252,252,.18);
  font-family:var(--usc-font-label);
}
.us-site-footer__line{
  position:absolute;right:-6%;top:8%;width:60%;height:auto;opacity:.9;
  pointer-events:none;user-select:none;max-width:none;display:block;margin:0;
}
.us-site-footer__in{
  max-width:var(--usc-max);margin:0 auto;position:relative;
  padding:96px var(--usc-gutter) 32px;
}
.us-site-footer__grid{
  position:relative;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr));gap:48px;
}
/* From 861 px the line moves down-left, under the brand and the address, so it never
   runs across the column of links (which stays on the right: 2 columns up to 999 px,
   4 from 1000 px). Same rules as .us-foot-line / .us-foot-grid in the application.
   Kept after the base rules above: same specificity, so order decides. */
@media (min-width:861px){
  .us-site-footer__line{right:auto;top:auto;left:-4%;bottom:150px;width:52%}
  .us-site-footer__grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (min-width:1000px){
  .us-site-footer__line{width:60%}
  .us-site-footer__grid{grid-template-columns:repeat(4,minmax(0,1fr))}
}
/* line-height 1.65 = the application's body line-height, which its footer brand inherits;
   with 1.1 the wordmark and the tagline sat 14 px higher than on Home */
.us-site-footer__brand{font-family:var(--usc-font-display);font-weight:900;font-size:26px;letter-spacing:-.02em;line-height:1.65;color:var(--usc-cream)}
.us-site-footer__tag{font-family:var(--usc-font-label);font-size:12px;font-weight:600;letter-spacing:.14em;line-height:1.5;text-transform:uppercase;color:var(--usc-coral);margin-top:12px}
.us-site-footer__addr{font-family:"Roboto",Arial,sans-serif;font-size:14px;font-weight:400;line-height:1.7;color:var(--usc-soft)}
/* phone + email: 44 px each (what a thumb actually taps); margin-top -10 aligns the first
   row with the first line of the address next to it. Same measures as the application. */
.us-site-footer__contact{font-family:"Roboto",Arial,sans-serif;font-size:14px;font-weight:400;line-height:1.7;margin-top:-10px}
.us-site-footer__contact a{color:var(--usc-cream);display:inline-flex;align-items:center;min-height:44px;padding:0}
.us-site-footer__contact a:hover{color:var(--usc-coral)}
.us-site-footer__nav{display:flex;flex-direction:column;gap:0;margin:-10px 0 0;padding:0}
.us-site-footer__nav a{
  font-family:var(--usc-font-label);font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;
  color:var(--usc-cream);line-height:1;padding:0;min-height:44px;display:inline-flex;align-items:center;align-self:flex-start;
  transition:color var(--usc-dur) var(--usc-ease);
}
.us-site-footer__nav a:hover{color:var(--usc-coral)}
.us-site-footer__more{
  margin-top:12px;padding-top:12px;border-top:1px solid rgba(252,252,252,.2);
  display:flex;flex-wrap:wrap;gap:0 14px;
}
.us-site-footer__more a{
  font-family:var(--usc-font-label);font-size:12px;font-weight:600;letter-spacing:.06em;color:var(--usc-soft);
  line-height:1;padding:0;min-height:44px;display:inline-flex;align-items:center;transition:color var(--usc-dur) var(--usc-ease);
}
.us-site-footer__more a:hover{color:var(--usc-cream)}
.us-site-footer__bottom{
  margin-top:64px;padding-top:24px;border-top:1px solid rgba(252,252,252,.2);
  display:flex;flex-wrap:wrap;gap:16px;justify-content:space-between;
  font-family:var(--usc-font-label);font-size:12px;line-height:1.5;color:var(--usc-soft);
}
.us-site-footer__bottom a{color:var(--usc-soft);padding:15px 0;margin:-15px 0;display:inline-block} /* 44 px tap target without moving the row */
.us-site-footer__bottom a:hover{color:var(--usc-cream)}

@media (prefers-reduced-motion:reduce){
  .us-site-header *,.us-site-footer *{transition:none!important}
}

/* Revision 1: the mobile navigation occupies the full screen below its header. */
@media(max-width:860px){
.us-site-header.us-menu-open{z-index:150}
.us-site-nav--mob:not([hidden]){position:fixed;inset:76px 0 0;background:#fcfcfc;overflow-y:auto;padding:24px var(--usc-gutter,24px);display:flex;flex-direction:column;justify-content:flex-start;max-height:none}
.us-site-nav--mob a{font-size:clamp(22px,5vw,32px);line-height:1.25;min-height:64px;padding:14px 0;display:flex;align-items:center}
}

@media(min-width:861px) and (max-width:1100px){.us-site-header__in{gap:16px}.us-site-nav--desk{gap:18px}}

@media(max-width:860px){.us-site-header__in{gap:12px}}