/* MCM shared overrides: fonts + accents. Loads AFTER page CSS. */

/* Fonts: Industry headings, Schibsted Grotesk body */
body{font-family:'Schibsted Grotesk','Helvetica Neue',Arial,sans-serif !important}
h1,h2,h3,.eyebrow,.btn,.num,.wordmark,.nav-links,.stat .n,.stat .l,.chip,.spec,.badge{
  font-family:'industry','Archivo',sans-serif !important;font-stretch:normal}
h1,h2{font-weight:800 !important}
.btn,.eyebrow,.nav-links,.chip,.badge{font-weight:700 !important}

/* Cyan selection */
::selection{background:rgba(34,195,230,.35);color:#F2F5F7}

/* Visible keyboard focus on every interactive element (WCAG 2.4.7).
   :focus-visible only, so mouse clicks stay clean. */
a:focus-visible,button:focus-visible,.btn:focus-visible,
input:focus-visible,select:focus-visible,textarea:focus-visible{
  outline:2px solid #22C3E6;outline-offset:3px;border-radius:4px}

/* Film grain, 2% */
body::after{content:"";position:fixed;inset:0;pointer-events:none;z-index:9999;opacity:.02;
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E")}

/* Mouse halo, desktop only, whisper level */
#mcm-halo{position:fixed;left:0;top:0;width:700px;height:700px;margin:-350px 0 0 -350px;
pointer-events:none;z-index:1;border-radius:50%;
background:radial-gradient(circle,rgba(34,195,230,.05),transparent 60%);
opacity:0;transition:opacity .5s}
body:hover #mcm-halo{opacity:1}
@media (max-width:1000px),(prefers-reduced-motion:reduce){#mcm-halo{display:none}}

/* Lit hairlines on cards */
.card,.prod,.pac-card{position:relative}
.card::before,.prod::before,.pac-card::before{content:"";position:absolute;top:0;left:8%;right:8%;height:1px;
background:linear-gradient(90deg,transparent,rgba(242,245,247,.16),transparent);z-index:2;pointer-events:none}

/* Micro parallax target hygiene */
.hero-bg{will-change:transform}
@media (prefers-reduced-motion:reduce){.hero-bg{transform:none !important}}

/* Shared mobile menu, injected by mcm-accents.js on pages lacking their own */
#mcm-burger{display:none;background:none;border:1px solid #2C3742;border-radius:4px;width:44px !important;height:44px !important;min-width:44px;min-height:44px;box-sizing:border-box;cursor:pointer;padding:0;align-items:center;justify-content:center}
#mcm-burger span{display:block;width:20px;height:2px;background:#F2F5F7;position:relative;transition:background .2s}
#mcm-burger span::before,#mcm-burger span::after{content:"";position:absolute;left:0;width:20px;height:2px;background:#F2F5F7;transition:transform .25s}
#mcm-burger span::before{top:-6px}#mcm-burger span::after{top:6px}
#mcm-burger[aria-expanded="true"] span{background:transparent}
#mcm-burger[aria-expanded="true"] span::before{transform:translateY(6px) rotate(45deg)}
#mcm-burger[aria-expanded="true"] span::after{transform:translateY(-6px) rotate(-45deg)}
#mcm-mobile-menu{display:none;position:fixed;top:72px;left:0;right:0;background:rgba(11,14,17,.98);backdrop-filter:blur(12px);border-bottom:1px solid #2C3742;z-index:49;padding:16px 24px 24px}
#mcm-mobile-menu a{display:block;padding:14px 8px;min-height:44px;font-family:'industry','Archivo',sans-serif;font-weight:700;font-size:15px;letter-spacing:.14em;text-transform:uppercase;color:#F2F5F7;border-bottom:1px solid #2C3742;text-decoration:none}
#mcm-mobile-menu a:last-child{border-bottom:none}
#mcm-mobile-menu.open{display:block}
@media (max-width:1000px){#mcm-burger{display:flex}}

/* nav phone number, consistent on every page so the header CTA never shifts position */
.nav-phone{font-family:'Archivo',sans-serif;font-stretch:85%;font-weight:700;font-size:13px;letter-spacing:.1em;color:var(--offwhite);transition:color .2s;margin-right:4px;text-decoration:none}
.nav-phone:hover{color:var(--cyan)}
@media(max-width:1000px){.nav-phone{display:none}}

/* Logo / home-link hover micro-interaction (council consensus).
   Brightness + faint cyan backlight on the link (filter never fights the JS morph transform).
   1px lift applied to the inner <img> so it does not conflict with the parent morph transform.
   Fast precision ease-in, softer ease-out. Reduced-motion keeps the light, drops the lift. */
.nav-logo,.hero-logo{cursor:pointer}
.nav-logo img,.hero-logo img{
  transition:filter .3s cubic-bezier(.2,.7,.2,1), transform .3s cubic-bezier(.2,.7,.2,1);
  transform-origin:left center;
  will-change:filter,transform}
.nav-logo:hover img,.hero-logo:hover img{
  transition-duration:.18s;
  filter:brightness(1.25) drop-shadow(0 0 6px rgba(34,195,230,.95)) drop-shadow(0 0 16px rgba(34,195,230,.7)) drop-shadow(0 0 30px rgba(34,195,230,.4));
  transform:scale(1.06) translateY(-1px)}
/* homepage hero img carries an inline drop-shadow (inline beats stylesheet),
   so restate its hover with the shadow preserved + strong brand glow, high specificity */
a.hero-logo:hover img[style]{
  filter:brightness(1.25) drop-shadow(0 10px 30px rgba(0,0,0,.5)) drop-shadow(0 0 6px rgba(34,195,230,.95)) drop-shadow(0 0 16px rgba(34,195,230,.7)) drop-shadow(0 0 30px rgba(34,195,230,.4)) !important;
  transform:scale(1.05) translateY(-1px)}
@media (prefers-reduced-motion:reduce){
  .nav-logo:hover img,.hero-logo:hover img,a.hero-logo:hover img[style]{transform:none}}

/* Mobile: hero CTA buttons sit centred on the screen */
@media(max-width:640px){
  .hero-cta{justify-content:center}
}

/* ---- nav shop icon ---- */
.nav-shop{display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;flex:none;border:1px solid var(--hairline,#2C3742);border-radius:3px;color:var(--offwhite,#F2F5F7);transition:color .2s,border-color .2s,transform .25s}
.nav-shop:hover{color:var(--cyan,#22C3E6);border-color:var(--cyan,#22C3E6);transform:translateY(-2px)}
.nav-shop svg{display:block}
@media(max-width:640px){.nav-shop{width:34px;height:34px}}

/* ---- header logo: mark stays, wordmark fades off. every header matches ---- */
nav .nav-in img[src*="mcm-horiz"]{-webkit-mask-image:linear-gradient(90deg,#000 18%,rgba(0,0,0,0) 52%);mask-image:linear-gradient(90deg,#000 18%,rgba(0,0,0,0) 52%)}
#heroLogo img{-webkit-mask-image:linear-gradient(90deg,#000 calc(18% + (1 - var(--mf,0))*82%),rgba(0,0,0,0) calc(52% + (1 - var(--mf,0))*48%));mask-image:linear-gradient(90deg,#000 calc(18% + (1 - var(--mf,0))*82%),rgba(0,0,0,0) calc(52% + (1 - var(--mf,0))*48%))}
@media(max-width:640px){
  /* mobile: show the WHOLE logo, just smaller, so it sits beside the burger.
     no width clip, no wordmark fade — the full mark stays visible. */
  nav .nav-in>a:first-child,nav .nav-in>span.nav-logo{width:auto !important;max-width:none !important;overflow:visible;flex:0 1 auto;min-width:0}
  nav .nav-in img[src*="mcm-horiz"],#heroLogo img{-webkit-mask-image:none !important;mask-image:none !important;height:24px !important;width:auto !important}
}
@media(max-width:400px){
  nav .nav-in img[src*="mcm-horiz"],#heroLogo img{height:21px !important}
}