/* MIO GENICS — the lab frame. The orange field IS the header and the footer. */
:root{--mio-orange:#FF5A00}

/* ---- header: orange-edged glass ---- */
.site-header{background:rgba(12,12,12,.58);backdrop-filter:blur(20px) saturate(1.25);-webkit-backdrop-filter:blur(20px) saturate(1.25);
  border-bottom:1px solid rgba(255,90,0,.5)}
.site-header .header-logo{display:none}
.site-header .header-container>a:first-child{
  font-family:Futura,'Avenir Next','Century Gothic','Space Grotesk',sans-serif;
  font-weight:700;font-size:1.02rem;letter-spacing:.2em;color:var(--mio-orange);text-decoration:none}
.site-header .header-container>a:first-child::before{content:"MIO GENICS"}
.site-header .nav-link{color:#e6e4e0;font-weight:500}
.site-header .nav-link:hover{color:var(--mio-orange)}
.site-header .nav-divider{background:rgba(255,255,255,.18)}
.site-header .header-button{color:var(--mio-orange);border-color:var(--mio-orange);font-weight:700}
.site-header .header-button:hover{background:var(--mio-orange);color:#0a0a0a}
.header-cta.header-cta--brand{text-decoration:none;cursor:pointer;font-family:Futura,'Avenir Next','Century Gothic','Space Grotesk',sans-serif;
  font-weight:700;font-size:.72rem;letter-spacing:.22em;text-transform:uppercase;cursor:default;user-select:none;color:#e6e4e0}
.site-header .hamburger__line{background:var(--mio-orange)}
.site-header .nav-dropdown-menu{background:rgba(10,10,10,.82);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);border:1px solid rgba(255,90,0,.35)}
.site-header .nav-dropdown-link:hover{color:var(--mio-orange)}
.nav-mio{font-family:Futura,'Avenir Next','Century Gothic','Space Grotesk',sans-serif;
  font-weight:700;font-size:.72rem;letter-spacing:.3em;text-transform:uppercase;
  color:#0a0a0a;white-space:nowrap;cursor:default;user-select:none}

/* ---- mobile ---- */
.mobile-mio{margin-top:1.5rem;padding-top:1.25rem;border-top:1px solid rgba(255,90,0,.35);
  font-family:Futura,'Avenir Next','Century Gothic','Space Grotesk',sans-serif;
  font-weight:700;font-size:.66rem;letter-spacing:.26em;text-transform:uppercase;color:var(--mio-orange)}

/* ---- the closing band: the lab plate ---- */
.mio-strip--end{background:var(--mio-orange);color:#0a0a0a;text-align:left;position:relative;
  display:flex;align-items:center;justify-content:flex-start;gap:56px;
  padding:72px 7vw 76px;font-family:Futura,'Avenir Next','Century Gothic','Space Grotesk',sans-serif}
.mio-strip--end .mio-logo{height:220px;width:auto;flex:0 0 auto;margin:0}
.mio-strip--end .mio-txt{display:flex;flex-direction:column;align-items:flex-start}
.mio-strip--end .mio-name{font-weight:700;font-size:clamp(34px,4.2vw,58px);letter-spacing:.04em;line-height:1;text-transform:uppercase}
.mio-strip--end .mio-labs{margin-top:14px;font-weight:700;font-size:clamp(13px,1.4vw,18px);letter-spacing:.42em;text-transform:uppercase;opacity:.92}
.mio-strip--end .mio-meta{margin-top:26px;font-weight:400;font-size:11px;letter-spacing:.12em;text-transform:uppercase;opacity:.66}
.mio-strip--end .mio-meta a{color:#0a0a0a;text-decoration:none;border-bottom:1px solid rgba(10,10,10,.4)}
.mio-strip--end::after{content:"EST. IN LANGUAGE";position:absolute;right:7vw;bottom:26px;
  font-size:9px;letter-spacing:.34em;font-weight:700;opacity:.45;text-transform:uppercase}
/* the lab signal: a braille trace across the plate, drawn live */
.mio-dots{position:absolute;left:0;right:0;bottom:52px;pointer-events:none;user-select:none;
  font-family:ui-monospace,'SF Mono',Consolas,monospace;font-size:11px;line-height:1;
  color:#0a0a0a;opacity:.22;white-space:pre;text-align:center;overflow:hidden}
.mio-dots span{display:block}
.mio-strip--end .mio-back,.mio-strip--end a.mio-back:link,.mio-strip--end a.mio-back:visited{display:inline-block;margin-top:14px;color:#0a0a0a!important;font-size:9.5px;font-weight:700;
  letter-spacing:.28em;text-transform:uppercase;color:#0a0a0a;opacity:.66;text-decoration:none;
  border-bottom:1px solid rgba(10,10,10,.4)}
.mio-strip--end .mio-back:hover{opacity:1}
@media(max-width:760px){.mio-dots{display:none}}
@media(max-width:760px){.mio-strip--end{flex-direction:column;align-items:flex-start;gap:28px;padding:52px 24px 64px}
  .mio-strip--end .mio-logo{height:140px}.mio-strip--end::after{right:24px}}

/* dropdown cluster labels */
.nav-dropdown-label{display:block;padding:9px 16px 3px;font-family:ui-monospace,'SF Mono',Consolas,monospace;
  font-size:8px;letter-spacing:.26em;text-transform:uppercase;color:rgba(255,255,255,.38)}
.nav-dropdown-label:first-child{padding-top:12px}

/* ---- the footer strip on phones (2026-08-27): centred, the mark large ---- */
@media (max-width: 700px){
  .mio-strip--end{flex-direction:column;align-items:center;text-align:center;
    gap:26px;padding:56px 24px 64px}
  .mio-strip--end .mio-logo{height:150px}
  .mio-strip--end .mio-txt{align-items:center}
  .mio-strip--end .mio-name{font-size:clamp(38px,11vw,48px)}
  .mio-strip--end .mio-labs{font-size:12px;letter-spacing:.34em;white-space:nowrap}
  .mio-strip--end .mio-back{margin-top:18px}
  .mio-strip--end .mio-meta{margin-top:20px;line-height:2}
  .mio-strip--end::after{position:static;display:block;margin-top:30px;right:auto;bottom:auto}
}
.mio-strip--end .mio-copy{white-space:nowrap}
@media (min-width: 701px){
  .mio-strip--end .mio-copy::before{content:" · "}
}
@media (max-width: 700px){
  .mio-strip--end .mio-copy{display:block;margin-top:8px}
}