/* Mobile menu for the consumer site. Below 900px the centred menu, the language
   switch and the Industrial strip fold into one full-screen panel that opens
   from the burger. Markup is built by nav-mobile.js from the menu already on
   the page, so every page only needs the two tags that load these files. */
.mm-burger, .mm{display:none;}

@media (max-width:900px){
  /* the strip is gone; its link lives in the panel */
  .switchbar{display:none;}
  .topnav{height:60px;}
  .mainnav-in{height:60px !important; --mark-w:30px !important;}
  .topnav.is-compact .mainnav-in{height:60px !important;}
  .menu, .tools .lang, .tools .search{display:none !important;}
  .menu-lens{display:none;}

  .mm-burger{
    display:inline-grid; place-items:center; width:46px; height:46px; margin-left:auto;
    background:none; border:0; border-radius:50%; cursor:pointer; color:#fff; position:relative; z-index:2;
    -webkit-tap-highlight-color:transparent;
  }
  .mm-burger i{position:absolute; left:13px; right:13px; height:2px; border-radius:2px; background:#fff;
    transition:transform .45s var(--ease-spring), opacity .25s ease, background-color .25s ease, left .3s ease, right .3s ease;}
  .mm-burger i:nth-child(1){top:16px;}
  .mm-burger i:nth-child(2){top:22px; left:21px; background:var(--red-hot);}
  .mm-burger i:nth-child(3){top:28px;}
  html.mm-open .mm-burger i:nth-child(1){transform:translateY(6px) rotate(45deg);}
  html.mm-open .mm-burger i:nth-child(2){opacity:0; transform:scaleX(.2);}
  html.mm-open .mm-burger i:nth-child(3){transform:translateY(-6px) rotate(-45deg);}
  /* open: the burger becomes an unmistakable close button, a red disc with a white cross */
  .mm-burger::before{content:''; position:absolute; inset:3px; border-radius:50%; background:var(--red); transform:scale(0); opacity:0;
    transition:transform .45s var(--ease-spring), opacity .2s ease;}
  html.mm-open .mm-burger::before{transform:none; opacity:1;}
  .mm-burger i{z-index:1;}
  html.mm-open .mm-burger i{left:14px; right:14px; height:2.5px;}
  .mm-burger:focus-visible{outline:2px solid var(--red-hot); outline-offset:2px;}

  /* the wordmark sits beside the mark in the bar, as it did in the strip it replaced */
  .mainnav .mark{gap:12px;}
  .mainnav .mark img.mm-wm{display:block; width:112px; height:auto; opacity:.95;}


  html.mm-open, html.mm-open body{overflow:hidden;}

  .mm{
    display:flex; flex-direction:column; position:fixed; inset:0; z-index:59;
    padding:84px max(24px, env(safe-area-inset-right)) max(26px, env(safe-area-inset-bottom)) max(24px, env(safe-area-inset-left));
    background:#050505; color:#fff; overflow-y:auto; overscroll-behavior:contain;
    clip-path:circle(0 at calc(100% - 38px) 30px); visibility:hidden;
    transition:clip-path .7s cubic-bezier(.7,0,.2,1), visibility 0s linear .7s;
  }
  html.mm-open .mm{clip-path:circle(150% at calc(100% - 38px) 30px); visibility:visible; transition:clip-path .75s cubic-bezier(.7,0,.2,1), visibility 0s;}
  /* red light from the corner the panel opened from, and a faint grid under everything */
  .mm::before{content:''; position:absolute; inset:0; pointer-events:none;
    background:
      radial-gradient(120% 55% at 100% 0%, rgba(var(--red-rgb),.42), transparent 62%),
      radial-gradient(90% 40% at 0% 100%, rgba(var(--red-rgb),.22), transparent 70%),
      repeating-linear-gradient(0deg, rgba(255,255,255,.035) 0 1px, transparent 1px 44px),
      repeating-linear-gradient(90deg, rgba(255,255,255,.035) 0 1px, transparent 1px 44px);}
  .mm > *{position:relative;}

  .mm-nav{display:flex; flex-direction:column; margin-top:6px;}
  .mm-link{display:flex; align-items:baseline; gap:16px; padding:18px 2px 16px; color:#fff; text-decoration:none;
    border-bottom:1px solid rgba(var(--red-rgb),.55); position:relative; overflow:hidden;
    -webkit-tap-highlight-color:transparent;}
  .mm-link::before{content:''; position:absolute; inset:0; background:linear-gradient(90deg, rgba(var(--red-rgb),.55), rgba(var(--red-rgb),0));
    transform:translateX(-101%); transition:transform .35s var(--ease-out);}
  .mm-link:active::before{transform:none;}
  .mm-n{font:600 12px/1 var(--display); letter-spacing:.14em; color:var(--red-hot); min-width:22px; position:relative;}
  .mm-t{font:600 clamp(28px, 8.4vw, 40px)/1.1 var(--display); letter-spacing:.005em; position:relative;}
  .mm-a{margin-left:auto; font-size:22px; color:rgba(255,255,255,.4); position:relative; transition:transform .3s var(--ease-out), color .3s;}
  .mm-link:active .mm-a{transform:translateX(6px); color:#fff;}
  .mm-link[aria-current="page"] .mm-t{color:var(--red-hot);}
  .mm-link[aria-current="page"] .mm-a{color:var(--red-hot);}

  .mm-label{margin:34px 2px 10px; font:600 11px/1 "Inter",sans-serif; letter-spacing:.2em; text-transform:uppercase; color:rgba(255,255,255,.4);}
  .mm-ind{position:relative; display:flex; align-items:center; gap:14px; padding:18px 20px; border-radius:20px; overflow:hidden;
    color:#fff; text-decoration:none; border:1px solid rgba(255,255,255,.18);
    background:linear-gradient(135deg, rgba(255,255,255,.07), rgba(255,255,255,.02));
    -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
    -webkit-tap-highlight-color:transparent; transition:border-color .25s, transform .25s var(--ease-out);}
  .mm-ind:active{transform:scale(.985); border-color:var(--red-hot);}
  .mm-ind img{width:120px; height:auto; display:block;}
  .mm-ind span.mm-ind-t{font:400 19px/1 var(--display); color:rgba(255,255,255,.5);}
  .mm-ind .mm-ind-go{margin-left:auto; width:38px; height:38px; border-radius:50%; display:grid; place-items:center;
    background:var(--red); font-size:18px; line-height:1;}
  .mm-sheen{position:absolute; top:0; bottom:0; width:38%; left:-50%; pointer-events:none;
    background:linear-gradient(100deg, transparent, rgba(255,255,255,.2), transparent); transform:skewX(-18deg);}

  .mm-foot{margin-top:auto; padding-top:28px; display:flex; align-items:center; gap:6px;}
  .mm-foot button{background:none; border:0; cursor:pointer; color:rgba(255,255,255,.45); font:500 15px/1 "Inter",sans-serif;
    padding:12px 14px; border-radius:999px;}
  .mm-foot button[aria-pressed="true"]{color:#fff; background:rgba(255,255,255,.1);}
  .mm-foot .mm-sep{color:rgba(255,255,255,.25);}
  .mm-foot .mm-search{margin-left:auto; color:#fff; line-height:0; padding:12px;}
  .mm-foot .mm-search svg{width:20px; height:20px;}

  /* arrival: each row rises in turn, the Industrial card last */
  .mm-link, .mm-label, .mm-ind, .mm-foot{opacity:0; transform:translateY(26px);
    transition:opacity .5s var(--ease-out), transform .6s var(--ease-out);}
  html.mm-open .mm-link, html.mm-open .mm-label, html.mm-open .mm-ind, html.mm-open .mm-foot{opacity:1; transform:none;
    transition-delay:calc(var(--i, 0) * 70ms + 260ms);}
  html.mm-open .mm-sheen{animation:mmSheen 3.6s ease-in-out 1.2s infinite;}
  @keyframes mmSheen{0%{left:-50%;} 55%,100%{left:130%;}}
}

@media (min-width:901px){ .mainnav .mark img.mm-wm{display:none;} }
@media (max-width:900px) and (prefers-reduced-motion:reduce){
  .mm{clip-path:none; opacity:0; transition:opacity .2s ease, visibility 0s linear .2s;}
  html.mm-open .mm{opacity:1; transition:opacity .2s ease, visibility 0s;}
  .mm-link, .mm-label, .mm-ind, .mm-foot{transform:none; transition:opacity .2s ease;}
  html.mm-open .mm-sheen{animation:none;}
  .mm-burger i{transition:none;}
}

/* Pages whose breadcrumb sits straight under the menu (no banner): a hairline
   that fades out toward both edges, with a little red light spilling below it,
   so the menu and the path read as two bands rather than one. */
body:has(.nv-crumb) #main, body:has(.pd-crumb) #main{
  background:linear-gradient(to bottom, rgba(var(--red-rgb),.13), rgba(var(--red-rgb),0) 78px) no-repeat top / 100% 78px;}
body:has(.nv-crumb) #main::before, body:has(.pd-crumb) #main::before{
  content:''; display:block; height:1px;
  background:linear-gradient(90deg, transparent 0%, rgba(var(--red-hot-rgb),.0) 4%, rgba(var(--red-hot-rgb),.9) 50%, rgba(var(--red-hot-rgb),.0) 96%, transparent 100%);
  box-shadow:0 0 14px rgba(var(--red-rgb),.35);}