/* =====================================================================
   SHARED CHROME — the only globally-unified layer of the site.
   Loaded by every page. Contains: minimal reset, self-hosted fonts,
   the sticky header/navigation, and a slim shared footer.
   Each brand page ships its OWN stylesheet for everything else.
   ===================================================================== */

/* ---- Self-hosted fonts (shared baseline; pages may add their own) -- */
@font-face{font-family:'Archivo';font-style:normal;font-weight:400;font-display:swap;src:url('/assets/fonts/archivo-400.woff2') format('woff2');}
@font-face{font-family:'Archivo';font-style:normal;font-weight:500;font-display:swap;src:url('/assets/fonts/archivo-500.woff2') format('woff2');}
@font-face{font-family:'Archivo';font-style:normal;font-weight:600;font-display:swap;src:url('/assets/fonts/archivo-600.woff2') format('woff2');}
@font-face{font-family:'Archivo';font-style:normal;font-weight:700;font-display:swap;src:url('/assets/fonts/archivo-700.woff2') format('woff2');}

/* ---- Reset ---------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
*{margin:0}
html{-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
body{-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;font-family:'Archivo',system-ui,sans-serif}
/* height:auto guarantees images keep their natural aspect ratio when width
   is constrained. object-fit:cover images set height:100% in their own
   (higher-specificity) rules, so they are unaffected by this. */
img,svg,video{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
ul{list-style:none;padding:0}

/* ---- Shared header tokens ------------------------------------------ */
:root{
  --nav-h:66px;
  --nav-ink:#f3f3f5;
  --nav-muted:rgba(243,243,245,.66);
  --nav-accent:#ee6c2b;            /* the bm emblem orange — the connective thread */
  --nav-hair:rgba(255,255,255,.10);
}

.skip{position:fixed;left:-9999px;top:0;z-index:1000;background:var(--nav-accent);color:#120a04;padding:.7em 1.1em;font-weight:700;border-radius:0 0 10px 0}
.skip:focus{left:0}

.site-header{
  position:fixed;inset:0 0 auto 0;z-index:900;height:var(--nav-h);
  display:flex;align-items:center;
  background:rgba(11,11,14,.55);
  backdrop-filter:saturate(150%) blur(14px);-webkit-backdrop-filter:saturate(150%) blur(14px);
  border-bottom:1px solid transparent;transition:background .3s,border-color .3s;
}
.site-header.scrolled{background:rgba(11,11,14,.86);border-bottom-color:var(--nav-hair)}
.nav-wrap{width:100%;max-width:1280px;margin-inline:auto;padding-inline:clamp(18px,4vw,40px);
  display:flex;align-items:center;gap:1.5rem}
.brandmark{display:inline-flex;align-items:center;gap:.6rem;color:var(--nav-ink);font-weight:500;font-size:1.02rem;letter-spacing:-.01em;white-space:nowrap}
.brandmark img{width:34px;height:34px;filter:drop-shadow(0 0 10px rgba(238,108,43,.5))}
.brandmark b{font-weight:700}
.nav-links{display:flex;align-items:center;gap:clamp(.5rem,1.6vw,1.5rem);margin-left:auto}
.nav-links a{color:var(--nav-muted);font-size:.92rem;font-weight:500;padding:.35em .1em;position:relative;transition:color .2s}
.nav-links a:hover{color:var(--nav-ink)}
.nav-links a[aria-current="page"]{color:var(--nav-ink)}
.nav-links a[aria-current="page"]::after{content:"";position:absolute;left:0;right:0;bottom:-3px;height:2px;border-radius:2px;background:var(--nav-accent)}
.nav-contact{display:inline-flex;align-items:center;gap:.4em;background:var(--nav-accent);color:#160b04;
  font-weight:700;font-size:.9rem;padding:.6em 1.15em;border-radius:999px;transition:transform .18s,box-shadow .18s}
.nav-contact:hover{transform:translateY(-1px);box-shadow:0 8px 24px -8px rgba(238,108,43,.7)}
.nav-toggle{display:none;width:44px;height:44px;border:1px solid var(--nav-hair);border-radius:11px;position:relative;margin-left:auto}
.nav-toggle span,.nav-toggle span::before,.nav-toggle span::after{content:"";position:absolute;left:50%;top:50%;width:18px;height:2px;background:var(--nav-ink);border-radius:2px;transition:.25s;transform:translate(-50%,-50%)}
.nav-toggle span::before{top:-6px}.nav-toggle span::after{top:6px}
body.nav-open .nav-toggle span{background:transparent}
body.nav-open .nav-toggle span::before{top:0;rotate:45deg}
body.nav-open .nav-toggle span::after{top:0;rotate:-45deg}

@media (max-width:920px){
  .nav-toggle{display:block}
  .nav-links,.site-header .nav-contact{
    position:fixed;top:var(--nav-h);right:0;width:min(80vw,330px);
    flex-direction:column;align-items:flex-start;gap:1.2rem;
    background:#0c0c10;border-left:1px solid var(--nav-hair);
    padding:1.8rem clamp(18px,5vw,32px);transform:translateX(110%);transition:transform .3s ease;margin:0;
  }
  .nav-links{height:calc(100dvh - var(--nav-h));padding-top:2.2rem}
  .nav-links a{font-size:1.15rem}
  .site-header .nav-contact{top:auto;bottom:0;width:min(80vw,330px);border-radius:0;justify-content:center;transform:translateX(110%)}
  body.nav-open .nav-links,body.nav-open .site-header .nav-contact{transform:translateX(0)}
}

/* ---- Shared footer (neutral; brand pages keep their own body above) - */
.site-footer{background:#0a0a0d;color:#cfcfd6;border-top:1px solid var(--nav-hair);font-family:'Archivo',system-ui,sans-serif}
.foot-wrap{max-width:1280px;margin-inline:auto;padding:clamp(40px,6vw,64px) clamp(18px,4vw,40px)}
.foot-top{display:flex;flex-wrap:wrap;gap:2rem;justify-content:space-between;align-items:flex-start}
.foot-brand{max-width:30ch}
.foot-brand .brandmark{color:#fff;margin-bottom:.8rem}
.foot-brand p{color:rgba(255,255,255,.6);font-size:.92rem;line-height:1.6}
.foot-cols{display:flex;flex-wrap:wrap;gap:clamp(2rem,5vw,4rem)}
.foot-cols h4{font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;color:rgba(255,255,255,.4);margin-bottom:.9rem;font-weight:600}
.foot-cols a{display:block;color:rgba(255,255,255,.7);font-size:.92rem;padding:.28em 0;transition:color .2s}
.foot-cols a:hover{color:var(--nav-accent)}
.foot-social{display:flex;gap:.6rem;margin-top:1.2rem}
.foot-social a{width:38px;height:38px;border:1px solid var(--nav-hair);border-radius:10px;display:grid;place-items:center;transition:.2s}
.foot-social a:hover{border-color:var(--nav-accent);background:rgba(238,108,43,.12)}
.foot-social svg{width:18px;height:18px;fill:rgba(255,255,255,.7)}
.foot-social a:hover svg{fill:var(--nav-accent)}
.foot-base{border-top:1px solid var(--nav-hair);margin-top:2.4rem;padding-top:1.4rem;display:flex;flex-wrap:wrap;gap:.6rem;justify-content:space-between;color:rgba(255,255,255,.4);font-size:.82rem}
.foot-base a{color:rgba(255,255,255,.55)}.foot-base a:hover{color:var(--nav-accent)}

/* shared accessibility helper */
.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}
:focus-visible{outline:2px solid var(--nav-accent);outline-offset:3px}