/* =========================================================================
   QUANTUM FIELD — SITE CHROME (canonical, shared)
   The one source of truth for the cross-page shell: the dark footer, the
   mobile drawer navigation, and the skip-link. Loaded by every page AFTER
   its page styles, so the chrome cannot drift between the landing system
   and the interior design system.

   Self-sufficient by design: every token is written with a literal
   fallback, so this file renders identically whether the page defines
   system.css tokens, the landing page's inline tokens, or none at all.
   ========================================================================= */

/* ————————————————————————————————————————————————————————————————
   0 · ACCESSIBILITY — skip-link (keyboard / screen-reader entry point)
   ———————————————————————————————————————————————————————————————— */
.skip-link{position:absolute;left:-9999px;top:14px;z-index:200;
  background:var(--graphite,#171A21);color:#fff;padding:11px 20px;border-radius:8px;
  font-family:'Inter',system-ui,-apple-system,sans-serif;font-size:13.5px;font-weight:500;letter-spacing:.01em;
  text-decoration:none;box-shadow:0 8px 24px -8px rgba(23,26,33,.5);}
.skip-link:focus{left:16px;outline:2px solid var(--violet,#7565FF);outline-offset:3px;}
[id="main-content"]:focus{outline:none;}

/* ————————————————————————————————————————————————————————————————
   1 · MOBILE DRAWER NAVIGATION
   The single mobile nav for the whole property. qfield.js injects the
   toggle + scrim + drawer into `nav.nav` and `nav.topbar` alike; these
   styles activate them identically on every page.
   ———————————————————————————————————————————————————————————————— */
.m-toggle{display:none;background:none;border:0;cursor:pointer;padding:10px;margin:-10px;
  width:44px;height:44px;align-items:center;justify-content:center;flex:none;
  -webkit-tap-highlight-color:transparent;}
.m-toggle span{display:block;width:22px;height:1.6px;background:var(--graphite,#171A21);position:relative;
  transition:transform .3s cubic-bezier(.19,1,.22,1),opacity .2s ease,background .2s ease;}
.m-toggle span::before,.m-toggle span::after{content:"";position:absolute;left:0;width:22px;height:1.6px;
  background:var(--graphite,#171A21);transition:transform .3s cubic-bezier(.19,1,.22,1);}
.m-toggle span::before{top:-7px;} .m-toggle span::after{top:7px;}
.m-toggle.open span{background:transparent;}
.m-toggle.open span::before{transform:translateY(7px) rotate(45deg);}
.m-toggle.open span::after{transform:translateY(-7px) rotate(-45deg);}
.m-toggle:focus-visible{outline:2px solid var(--violet,#7565FF);outline-offset:3px;border-radius:8px;}

.m-drawer{position:fixed;inset:0 0 0 auto;width:min(84vw,340px);z-index:70;
  background:rgba(252,252,253,.97);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
  border-left:1px solid var(--hairline,rgba(23,26,33,.12));
  transform:translateX(100%);transition:transform .42s cubic-bezier(.19,1,.22,1);
  display:flex;flex-direction:column;padding:88px 30px 34px;overflow-y:auto;
  box-shadow:-30px 0 80px -40px rgba(23,26,33,.4);-webkit-overflow-scrolling:touch;}
.m-drawer.open{transform:none;}
.m-drawer a{font-family:'Fraunces',Georgia,serif;font-weight:400;font-size:23px;letter-spacing:-.01em;
  color:var(--graphite,#171A21);text-decoration:none;padding:15px 0;
  border-bottom:1px solid var(--hairline-soft,rgba(23,26,33,.07));
  display:flex;align-items:center;justify-content:space-between;
  transition:color .2s ease,padding-left .3s cubic-bezier(.19,1,.22,1);}
.m-drawer a::after{content:"→";font-family:'Inter',sans-serif;font-size:15px;color:var(--platinum,#B8BCC8);
  transition:transform .3s cubic-bezier(.19,1,.22,1),color .2s ease;}
.m-drawer a:hover,.m-drawer a:active{color:var(--indigo,#3848C8);padding-left:6px;}
.m-drawer a:hover::after{transform:translateX(3px);color:var(--indigo,#3848C8);}
.m-drawer a.active{color:var(--indigo,#3848C8);}
.m-drawer .m-cta{margin-top:22px;font-family:'Inter',sans-serif;font-size:15px;font-weight:500;
  color:#fff;background:var(--graphite,#171A21);border:0;border-radius:12px;padding:16px;
  justify-content:center;text-align:center;}
.m-drawer .m-cta::after{display:none;}
.m-scrim{position:fixed;inset:0;z-index:69;background:rgba(23,26,33,.32);opacity:0;pointer-events:none;
  transition:opacity .4s ease;backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px);}
.m-scrim.open{opacity:1;pointer-events:auto;}
body.m-locked{overflow:hidden;}

/* one breakpoint, both navbars — desktop links out, drawer in */
@media (max-width:980px){
  nav.nav .nav-links,nav.topbar .nav-links{display:none!important;}
  nav.nav .nav-cta,nav.topbar .nav-cta{display:none!important;}
  nav.nav .m-toggle,nav.topbar .m-toggle{display:flex;}
}
@media (min-width:981px){ .m-drawer,.m-scrim,.m-toggle{display:none!important;} }

/* ————————————————————————————————————————————————————————————————
   2 · CANONICAL FOOTER — the dark stage close, identical on every page
   ———————————————————————————————————————————————————————————————— */
footer.site-foot{position:relative;z-index:2;overflow:hidden;
  margin-top:clamp(64px,10vh,120px);padding:clamp(56px,9vh,92px) 0 44px;
  background:var(--graphite,#171A21);color:#fff;border-top:0;}
footer.site-foot::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(90% 60% at 88% 0%,rgba(117,101,255,.10),transparent 55%),
             radial-gradient(70% 50% at 0% 100%,rgba(56,72,200,.08),transparent 55%);}
footer.site-foot .wrap{position:relative;z-index:1;max-width:var(--maxw,1200px);margin:0 auto;
  padding:0 var(--gutter,clamp(24px,5vw,72px));}

.foot-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr 1fr;gap:clamp(24px,3vw,40px);
  padding-bottom:clamp(44px,6vh,64px);border-bottom:1px solid rgba(243,244,248,.10);}

.foot-lockup{display:flex;align-items:center;gap:12px;text-decoration:none;}
.foot-lt{font-family:'Inter',system-ui,sans-serif;font-weight:500;font-size:15px;letter-spacing:.02em;color:#fff;}
.foot-lt span{color:rgba(243,244,248,.46);font-weight:400;}
.foot-statement{margin-top:20px;font-family:'Fraunces',Georgia,serif;font-style:italic;font-weight:400;
  font-size:clamp(17px,2vw,22px);color:#F0F1F5;line-height:1.3;max-width:22ch;}
.foot-statement em{font-style:italic;background:linear-gradient(96deg,#8797FF,#7565FF);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;}

.foot-col h4{font-family:'Inter',sans-serif;font-size:10.5px;font-weight:600;letter-spacing:.2em;
  text-transform:uppercase;color:rgba(243,244,248,.46);margin:0 0 18px;}
.foot-col a{display:block;font-family:'Inter',sans-serif;font-size:13.5px;
  color:rgba(243,244,248,.70);text-decoration:none;padding:5px 0;
  transition:color .2s ease,padding-left .28s cubic-bezier(.19,1,.22,1);}
.foot-col a:hover{color:#fff;padding-left:4px;}
.foot-col a:focus-visible{outline:2px solid var(--violet,#7565FF);outline-offset:3px;border-radius:4px;}

.foot-base{display:flex;justify-content:space-between;align-items:center;gap:24px;
  padding-top:32px;flex-wrap:wrap;}
.foot-base .fb-meta{font-family:'Inter',sans-serif;font-size:11.5px;letter-spacing:.02em;
  color:rgba(243,244,248,.46);}
.foot-base .fb-meta b{color:rgba(243,244,248,.72);font-weight:500;}
.foot-base .fb-creed{font-family:'Inter',sans-serif;font-size:10.5px;font-weight:500;
  letter-spacing:.2em;text-transform:uppercase;color:rgba(243,244,248,.30);}

@media (max-width:1020px){
  .foot-grid{grid-template-columns:1fr 1fr;gap:36px;}
  .foot-brand{grid-column:1 / -1;}
}
@media (max-width:460px){.foot-grid{grid-template-columns:1fr;}}

/* touch-target floor on chrome links */
@media (pointer:coarse){ .foot-col a{min-height:40px;display:flex;align-items:center;} }

/* safe-area insets for notched phones */
@supports(padding:max(0px)){
  .m-drawer{padding-right:max(30px,env(safe-area-inset-right));}
  footer.site-foot{padding-bottom:max(44px,env(safe-area-inset-bottom));}
}

/* reduced motion: chrome stays functional, motion stripped */
@media (prefers-reduced-motion:reduce){
  .m-drawer,.m-scrim,.m-toggle span,.m-toggle span::before,.m-toggle span::after,
  .foot-col a{transition:none!important;}
}

@media print{ .m-toggle,.m-drawer,.m-scrim,footer.site-foot,.skip-link{display:none!important;} }