/* MYCELX shared styles: tokens, fonts, buttons, header, menu overlay, Solutions mega menu, footer, live chat.
   Layout breakpoints (min-width): 550 wide mobile, 768 tablet, 834, 1024 tablet landscape, 1200 desktop, 1920 xl. */
@font-face{font-family:"Fira Sans";font-weight:700;font-style:normal;font-display:swap;src:url("../fonts/FiraSans-700.woff2") format("woff2")}
@font-face{font-family:"Noto Sans";font-weight:400;font-style:normal;font-display:swap;src:url("../fonts/NotoSans-400.woff2") format("woff2")}
@font-face{font-family:"Noto Sans";font-weight:300;font-style:normal;font-display:swap;src:url("../fonts/NotoSans-300.woff2") format("woff2")}
@font-face{font-family:"Noto Sans";font-weight:700;font-style:normal;font-display:swap;src:url("../fonts/NotoSans-700.woff2") format("woff2")}
@font-face{font-family:"Inter";font-weight:400;font-style:normal;font-display:swap;src:url("../fonts/Inter-400.woff2") format("woff2")}

/* ---------- Tokens and scoped base ---------- */
/* --mx-m = desktop scale (PSD px -> CSS px is 0.72 x --mx-m). The <head> script sets it before first paint (no size jump); this is only the fallback if scripts are blocked. */
html{--mx-m:1.24}
.mx{
  --mx-frame-w:100vw;   /* layout follows the viewport width */
  --mx-pill-shadow:0 4px 16px rgba(9,23,34,.14);   /* subtle shadow behind the fixed header pill (our addition; the PSD has none) */
  --mx-hdr-top:20px; --mx-hdr-h:56px; --mx-hdr-logo:26px; --mx-menu-logo:30px; --mx-pill-side:12px;
  --mx-navy:#091722;          /* approx, sampled */
  --mx-ink:#091722;
  --mx-blue-hover:#1954b9;    /* primary button hover (specified) */
  --mx-blue:#226cf2;          /* button fill; PSD ~#226cf2, nudged darker for white-text contrast */
  --mx-blue-text:#226cf2;     /* blue text on light bg (AA) */
  --mx-blue-on-dark:#226cf2;  /* blue text on navy/black */
  --mx-sand:#feeec9;         /* CTA section background (specified) */
  --mx-blue-on-sand:#226cf2;
  --mx-footer:#000205;
  --mx-grey:#555555;
  --mx-radius-img:14.4px;   /* PSD 20px x 0.72 (1440 design) */
  --mx-gutter:32px;
  --mx-font-body:"Noto Sans",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  --mx-font-head:"Fira Sans",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
}
.mx,.mx *,.mx *::before,.mx *::after{box-sizing:border-box}
.mx *{margin:0;padding:0}
html{scroll-behavior:smooth}
.mx{font-family:var(--mx-font-body);color:var(--mx-ink);background:#fff;line-height:1.5}
.mx img{display:block;max-width:100%;height:auto}
:where(.mx) a{color:inherit}
.mx :focus-visible{outline:3px solid #ffb703;outline-offset:2px}
.mx{position:relative;overflow:clip}
:where(.mx) :is(h1,h2,h3){text-wrap:balance}
.mx-eyebrow{font-family:var(--mx-font-head);font-size:12px;font-weight:700;letter-spacing:.4em;text-transform:uppercase;color:var(--mx-blue-text)}
.mx-btn{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:0 40px;border-radius:999px;background:var(--mx-blue);color:#fff;font:400 16px/1 var(--mx-font-body);text-decoration:none;border:2px solid var(--mx-blue);cursor:pointer}
.mx-btn--ghost{background:transparent;color:var(--mx-blue-text);border-color:var(--mx-blue-text)}
.mx-btn{transition:background-color .25s ease,border-color .25s ease,color .25s ease}
.mx-btn svg{flex:none;width:1em;height:1em;margin-right:.6em}   /* icons inside buttons (download etc.) scale with the label */
@media (hover:hover){.mx-btn:not(.mx-btn--ghost):hover{background:var(--mx-blue-hover);border-color:var(--mx-blue-hover)}}
.mx-btn:not(.mx-btn--ghost):active{background:var(--mx-blue-hover);border-color:var(--mx-blue-hover)}
@media (hover:hover){.mx-menu-cta .mx-btn--ghost:hover{background:#fff;border-color:#fff;color:var(--mx-navy)}}
.mx-hdr-investors:active{background:var(--mx-blue-text);border-color:var(--mx-blue-text);color:#fff}
@media (hover:hover){.mx-hdr-investors:hover{background:var(--mx-blue-text);border-color:var(--mx-blue-text);color:#fff}}
.mx-menu-cta .mx-btn--ghost:active{background:#fff;border-color:#fff;color:var(--mx-navy)}
.mx-btn--block{display:flex;width:100%}
/* ---------- Header (floating white pill, same as desktop) ---------- */
.mx-site-top{position:relative}
.mx-hdr-wrap{position:sticky;top:0;z-index:50;padding-top:calc(var(--mx-hdr-top) + env(safe-area-inset-top,0px))}
.mx-hdr{margin:0 var(--mx-pill-side);height:var(--mx-hdr-h);background:#fff;border-radius:999px;display:flex;align-items:center;justify-content:space-between;padding:0 6px 0 16px;box-shadow:var(--mx-pill-shadow)}
.mx-hdr .mx-logo img{height:var(--mx-hdr-logo);width:auto}
.mx-hdr-investors{display:none}
.mx-hdr-actions{display:flex;align-items:center;gap:4px}
.mx-hdr .mx-btn{min-height:40px;font-size:14px}
@media (max-width:340px){.mx-hdr .mx-btn{padding:0 20px}}
.mx-burger{width:44px;height:44px;border:0;background:transparent;border-radius:50%;display:grid;place-content:center;gap:5px;cursor:pointer}
.mx-burger span{display:block;width:20px;height:2px;background:var(--mx-blue-text);border-radius:2px}
/* ---------- Menu overlay ---------- */
.mx-menu{position:fixed;inset:0;z-index:100;display:flex;justify-content:center;visibility:hidden;opacity:0;transition:opacity .2s ease,visibility .2s}
.mx-menu.mx-open{visibility:visible;opacity:1}
.mx-menu-panel{width:100%;max-width:var(--mx-frame-w);height:100%;background:var(--mx-navy);color:#fff;display:flex;flex-direction:column;overflow-y:auto;transform:translateY(-12px);transition:transform .25s ease}
.mx-menu.mx-open .mx-menu-panel{transform:none}
.mx-menu-top{display:flex;align-items:center;justify-content:space-between;height:var(--mx-hdr-h);margin:calc(var(--mx-hdr-top) + env(safe-area-inset-top,0px)) var(--mx-pill-side) 8px;padding:0 6px 0 16px;background:#fff;border-radius:999px;box-shadow:var(--mx-pill-shadow);flex:none}
.mx-menu-top img{height:var(--mx-menu-logo);width:auto}
.mx-close{position:relative;width:44px;height:44px;border:0;background:var(--mx-navy);border-radius:50%;cursor:pointer}
.mx-close::before,.mx-close::after{content:"";position:absolute;left:12px;top:21px;width:20px;height:2px;background:#fff;border-radius:2px}
.mx-close::before{transform:rotate(45deg)}
.mx-close::after{transform:rotate(-45deg)}
.mx-menu nav{padding:8px var(--mx-gutter);flex:1}
.mx-menu details,.mx-menu .mx-toplink{border-bottom:1px solid rgba(255,255,255,.14)}
.mx-menu summary,.mx-menu .mx-toplink{list-style:none;display:flex;justify-content:space-between;align-items:center;min-height:56px;font:700 22px/1.2 var(--mx-font-head);cursor:pointer;color:#fff;text-decoration:none}
.mx-menu summary::-webkit-details-marker{display:none}
.mx-menu summary::after{content:"+";font-size:24px;font-weight:400;color:var(--mx-blue-on-dark)}
.mx-menu details[open] summary::after{content:"–"}
.mx-menu details ul{list-style:none;padding:0 0 14px}
.mx-menu details a{display:block;padding:10px 0;font-size:17px;color:rgba(255,255,255,.85);text-decoration:none}
.mx-menu details li.mx-grp>a{font-weight:700;color:#fff}
.mx-menu details ul ul{padding:0 0 6px 16px}
.mx-menu details ul ul a{font-size:16px;padding:8px 0;color:rgba(255,255,255,.75)}
.mx-menu-cta{display:grid;grid-template-columns:1fr 1fr;gap:10px;padding:16px var(--mx-gutter) 28px}
.mx-menu-cta .mx-btn{padding:0 12px;min-width:0}
/* split, full-width pair: flex to fill, no fixed side padding */
.mx-menu-cta .mx-btn--ghost{color:#fff;border-color:rgba(255,255,255,.6)}
/* ---------- Footer ---------- */
.mx-foot{position:relative;margin-top:-1px;background:var(--mx-footer);color:#fff;padding:48px var(--mx-gutter) 28px}   /* QA: overlap 1px so no hairline shows between the last section and the footer */
.mx-foot .mx-brand{display:flex;justify-content:center;margin-bottom:40px}
.mx-foot .mx-brand img{height:53px;width:auto}
.mx-foot .mx-quick{display:grid;gap:12px;margin:0 0 28px}
.mx-foot .mx-quick .mx-phone{display:flex;align-items:center;justify-content:center;min-height:48px;font-weight:400;font-size:18px;color:var(--mx-blue-on-dark);text-decoration:none}
.mx-foot hr{border:0;border-top:1px solid rgba(255,255,255,.25);margin:0}
.mx-acc summary,.mx-acc-link{list-style:none;display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:60px;padding:0;font:700 21px/1.2 var(--mx-font-body);color:#fff;text-decoration:none;cursor:pointer;border-bottom:1px solid rgba(255,255,255,.25)}
.mx-acc summary::-webkit-details-marker{display:none}
.mx-acc summary::after{content:"";flex:none;width:20px;height:20px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M4 7l6 6 6-6' fill='none' stroke='%232d7aff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/20px no-repeat;transition:transform .2s ease}
.mx-acc[open] summary::after{transform:rotate(180deg)}
.mx-acc-body{padding:14px 0 18px}
.mx-acc-body ul{list-style:none}
.mx-acc-body li a{display:block;padding:11px 0;font-size:15px;font-weight:300;color:#fff;text-decoration:none}
.mx-foot address{font-style:normal;font-size:15px;font-weight:300;line-height:1.55;color:#fff}
.mx-foot address p+p{margin-top:14px}
.mx-foot address a{text-decoration:none}
.mx-social{display:grid;grid-template-columns:1fr 1px 1fr;align-items:center;margin-top:20px}
.mx-social a{display:flex;align-items:center;gap:16px;height:48px;padding:0;font-size:15px;line-height:1;color:#226cf2;text-decoration:none}
.mx-social a{justify-self:center}
.mx-social .mx-sep{width:1px;height:32px;background:rgba(255,255,255,.25)}
@media (max-width:340px){.mx-social a{gap:10px}}
.mx-copy{margin-top:20px;padding-top:20px;border-top:1px solid rgba(255,255,255,.25);text-align:center;font-size:12px;font-weight:300;color:rgba(255,255,255,.5)}
/* ---------- Live chat: icon-only on mobile ---------- */
.mx-chat{position:fixed;bottom:16px;right:max(16px,calc(50% - var(--mx-frame-w)/2 + 16px));z-index:60;width:56px;height:56px;border-radius:50%;background:var(--mx-blue);border:0;display:grid;place-items:center;cursor:pointer}
.mx-chat svg{height:30px;width:auto;display:block}
.mx-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
/* ======================================================================
   TABLET  (frame >= 768px)  - proposal, see tablet-desktop-rules.md
   Selectors key off the frame width (data-bp on .mx), not the viewport.
   ====================================================================== */
.mx-chat-label{display:none}
.mx-chat{grid-auto-flow:column}
@media (min-width:768px){
  .mx.mx{--mx-gutter:40px;--mx-hdr-top:21px;--mx-hdr-h:64px;--mx-hdr-logo:32px;--mx-menu-logo:36px;--mx-pill-side:var(--mx-gutter)}
}
@media (min-width:1024px){
  .mx.mx{--mx-gutter:48px}
}
/* header: Investors + Contact + hamburger (mirrors desktop); nav stays in the overlay */
@media (min-width:768px){
  .mx.mx .mx-hdr{padding:0 10px 0 28px}
  .mx.mx .mx-hdr-actions{gap:12px}
  .mx.mx .mx-hdr .mx-btn{min-height:44px;font-size:15px}
  .mx.mx .mx-hdr-investors{display:inline-flex}
}
/* menu overlay: nav only (buttons live in the header now), larger type */
@media (min-width:768px){
  .mx.mx .mx-menu-cta{display:none}
  .mx.mx .mx-menu nav{padding:16px var(--mx-gutter)}
  .mx.mx .mx-menu summary,.mx.mx .mx-menu .mx-toplink{font-size:32px;min-height:78px}
  .mx.mx .mx-menu details a{font-size:20px;padding:12px 0}
}
/* live chat: pill with label */
@media (min-width:768px){
  .mx.mx .mx-chat{width:auto;padding:0 26px 0 22px;gap:12px;border-radius:999px;bottom:24px;right:max(24px,calc(50% - var(--mx-frame-w)/2 + 24px))}
  .mx.mx .mx-chat svg{height:28px}
  .mx.mx .mx-chat-label{display:block;font:400 14px/1 "Inter",var(--mx-font-body);color:#fff}
}
/* shared section type */
@media (min-width:768px){
  .mx.mx .mx-eyebrow{font-size:calc(12px + 5.2*(var(--mx-frame-w) - 390px)/810)}
}
/* footer: accordions become open columns (JS sets [open] and locks them) */
@media (min-width:768px){
  .mx.mx .mx-foot{padding:72px var(--mx-gutter) 32px}
  .mx.mx .mx-foot-top{display:flex;align-items:center;justify-content:space-between;gap:32px;margin-bottom:40px}
  .mx.mx .mx-foot .mx-brand{margin:0;justify-content:flex-start}
  .mx.mx .mx-foot .mx-brand img{height:60px}
  .mx.mx .mx-foot .mx-quick{display:flex;flex-direction:row-reverse;align-items:center;gap:28px;margin:0}
  .mx.mx .mx-foot .mx-quick .mx-btn--block{width:auto;display:inline-flex}
  .mx.mx .mx-foot-cols{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:48px 32px;padding-top:44px}
}
/* >= 834px: 4 columns; Contact is the tall first column, the other groups fill two rows beside it */
@media (min-width:834px){
  .mx.mx .mx-foot-cols{grid-template-columns:1.3fr repeat(3,minmax(0,1fr));gap:48px 28px}
  .mx.mx .mx-foot-cols > .mx-acc:first-child{grid-row:1 / span 2}
}
@media (min-width:768px){
  .mx.mx .mx-acc summary,.mx.mx .mx-acc-link{min-height:0;padding:0 0 14px;border:0;font-size:16px;cursor:default}
  .mx.mx .mx-acc summary{pointer-events:none}
  .mx.mx .mx-acc summary::after{display:none}
  .mx.mx .mx-acc-body{padding:0}
  .mx.mx .mx-acc-body li a{padding:7px 0;font-size:15px}
  .mx.mx .mx-acc-link{display:block;cursor:pointer}
  .mx.mx .mx-foot-more .mx-acc-link+.mx-acc-link{padding-top:4px}
  .mx.mx .mx-social{display:flex;flex-direction:row;align-items:center;justify-content:flex-start;gap:12px;margin:16px 0 0 -4px}
}
/* -4px: icon edge aligns with the column text */
@media (min-width:768px){
  .mx.mx .mx-social .mx-sep{display:none}
}
/* icons only (matches desktop); the text labels stay in the DOM, visually hidden, as the links' accessible names */
@media (min-width:768px){
  .mx.mx .mx-social a{padding:0 4px}
  .mx.mx .mx-social a span{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .mx.mx .mx-copy{margin-top:64px}
}
.mx-hdr-nav{display:none}
.mx-mega{display:none}
/* ======================================================================
   DESKTOP  (frame >= calc(1200px*var(--mx-m))) - the PSD as the calc(1440px*var(--mx-m)) design (CSS px = PSD px x 0.72)
   Layout is fixed at design size: container calc(1014.5px*var(--mx-m)) centered, type does not scale.
   ====================================================================== */
@media (min-width:1200px){
  .mx.mx{--mx-gutter:48px;--mx-hdr-top:calc(21px*var(--mx-m));--mx-hdr-h:calc(54px*var(--mx-m));--mx-hdr-logo:calc(29.5px*var(--mx-m));--mx-menu-logo:calc(34px*var(--mx-m));
    --mx-side:calc((100% - min(calc(1014.5px*var(--mx-m)),100% - 2*var(--mx-gutter)))/2);--mx-pill-side:var(--mx-side);--mx-radius-img:calc(14.4px*var(--mx-m))}
}
/* header: logo, inline nav, Investors + Contact, hamburger */
@media (min-width:1200px){
  .mx.mx .mx-hdr{padding:0 calc(26px*var(--mx-m)) 0 calc(30px*var(--mx-m))}
  .mx.mx .mx-hdr-nav{display:flex;margin-left:auto;margin-right:calc(56px*var(--mx-m));gap:calc(33.6px*var(--mx-m))}
  .mx.mx .mx-hdr-nav a,.mx.mx .mx-hdr-nav button{font-family:var(--mx-font-body);font-weight:400;font-size:calc(11.52px*var(--mx-m));line-height:1;color:#000;text-decoration:none;padding:calc(12px*var(--mx-m)) 0;background:none;border:0;cursor:pointer;transition:color .25s ease}
  @media (hover:hover){.mx.mx .mx-hdr-nav a:hover,.mx.mx .mx-hdr-nav button:hover{color:var(--mx-blue-text)}}
  .mx.mx .mx-hdr-actions{gap:calc(14.4px*var(--mx-m))}
  .mx.mx .mx-hdr .mx-btn{min-height:calc(29px*var(--mx-m));font-size:calc(11.52px*var(--mx-m))}
  .mx.mx .mx-burger{width:calc(32px*var(--mx-m));height:calc(32px*var(--mx-m));gap:calc(3px*var(--mx-m))}
  .mx.mx .mx-burger span{width:calc(12.2px*var(--mx-m));height:calc(1.5px*var(--mx-m));background:#226cf2}
  .mx.mx .mx-menu nav{max-width:calc(1014.5px*var(--mx-m));width:100%;margin:0 auto;padding:calc(16px*var(--mx-m)) 0}
}
/* live chat */
@media (min-width:1200px){
  .mx.mx .mx-chat{height:calc(46px*var(--mx-m));padding:0 calc(20px*var(--mx-m)) 0 calc(16px*var(--mx-m));gap:calc(9px*var(--mx-m));bottom:calc(34px*var(--mx-m));right:max(calc(35px*var(--mx-m)),calc(50% - var(--mx-frame-w)/2 + calc(35px*var(--mx-m))))}
  .mx.mx .mx-chat svg{height:calc(20px*var(--mx-m))}
  .mx.mx .mx-chat-label{font-size:calc(12px*var(--mx-m))}
  .mx.mx .mx-eyebrow{font-size:calc(14.4px*var(--mx-m))}
}
/* footer: 482px; logo row, divider, six columns (Contact double width), divider, copyright */
@media (min-width:1200px){
  .mx.mx .mx-foot{padding:calc(94px*var(--mx-m)) var(--mx-side) calc(21px*var(--mx-m))}
  .mx.mx .mx-foot-top{margin-bottom:calc(21px*var(--mx-m))}
  .mx.mx .mx-foot .mx-brand img{height:calc(42.5px*var(--mx-m))}
  .mx.mx .mx-foot .mx-quick{gap:calc(20px*var(--mx-m))}
  .mx.mx .mx-foot .mx-quick .mx-phone{font-size:calc(14.4px*var(--mx-m));min-height:calc(29px*var(--mx-m))}
  .mx.mx .mx-foot .mx-quick .mx-btn--block{min-height:calc(29px*var(--mx-m));font-size:calc(11.52px*var(--mx-m))}
  .mx.mx .mx-foot-cols{grid-template-columns:minmax(0,2fr) repeat(4,minmax(0,1fr)) minmax(0,.86fr);gap:0;padding-top:calc(41px*var(--mx-m));min-height:calc(266px*var(--mx-m))}
  .mx.mx .mx-foot-cols > .mx-acc:first-child{grid-row:auto}
  .mx.mx .mx-acc summary,.mx.mx .mx-acc-link{font-size:calc(14.4px*var(--mx-m));line-height:1.2;padding:0}
  .mx.mx .mx-acc-body{padding-top:calc(4px*var(--mx-m))}
  .mx.mx .mx-acc-body li a{font-size:calc(11.52px*var(--mx-m));line-height:1.15;padding:calc(6.5px*var(--mx-m)) 0}
  .mx.mx .mx-foot address{font-size:calc(11.52px*var(--mx-m));line-height:1.15}
  .mx.mx .mx-foot address p+p{margin-top:calc(13px*var(--mx-m))}
  .mx.mx .mx-foot-more .mx-acc-link+.mx-acc-link{margin-top:calc(34px*var(--mx-m));padding-top:0}
  .mx.mx .mx-social{margin-top:calc(30px*var(--mx-m));gap:calc(18px*var(--mx-m))}
  .mx.mx .mx-social a:first-child svg{width:calc(25.9px*var(--mx-m));height:calc(25.9px*var(--mx-m))}
  .mx.mx .mx-social a:last-child svg{width:calc(29.2px*var(--mx-m));height:calc(20.8px*var(--mx-m))}
  .mx.mx .mx-copy{margin-top:0;padding-top:calc(14px*var(--mx-m));font-size:calc(11.52px*var(--mx-m))}
}
/* ======================================================================
   MEGA MENU - Solutions (desktop). Values are PSD px x 0.72 x m (see the desktop scale); u = one CSS px at s = 0.72, scaled by m.
   ====================================================================== */
@media (min-width:1200px){
  .mx.mx .mx-mega{--mx-u:calc(1px*var(--mx-m));display:flex;position:fixed;inset:0;z-index:120;justify-content:center;align-items:flex-start;visibility:hidden;opacity:0;transition:opacity .25s ease,visibility .25s}
  .mx.mx .mx-mega.mx-open{visibility:visible;opacity:1}
}
.mx-mega-backdrop{position:absolute;inset:0;background:rgba(0,3,6,.55)}
@media (min-width:1200px){
  .mx.mx .mx-mega-panel{position:relative;width:100%;max-width:var(--mx-frame-w);max-height:100%;overflow:auto;color:#fff;
    background:radial-gradient(ellipse calc(540*var(--mx-u)) calc(331*var(--mx-u)) at 50% 100%,#043f6c 0%,rgba(4,63,108,0) 100%),#091722;
    padding:calc(19.4*var(--mx-u)) calc((var(--mx-frame-w) - min(calc(1014.5px*var(--mx-m)),var(--mx-frame-w) - 2*var(--mx-gutter)))/2) calc(72*var(--mx-u));transform:translateY(-16px);transition:transform .3s ease}
  .mx.mx .mx-mega.mx-open .mx-mega-panel{transform:none}
}
.mx-mega-top{display:flex;align-items:center;justify-content:space-between;height:calc(26.6*var(--mx-u));margin-bottom:calc(14.4*var(--mx-u))}
.mx-mega-logo img{display:block;height:calc(26.6*var(--mx-u));width:auto;}
.mx-mega-close{display:flex;align-items:center;gap:calc(8*var(--mx-u));background:none;border:0;color:#fff;font:400 calc(10.37*var(--mx-u))/1 var(--mx-font-body);cursor:pointer;padding:8px 0 8px 8px}
.mx-mega-close svg{width:calc(13*var(--mx-u));height:calc(13*var(--mx-u))}
.mx-mega-cards{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0 calc(21.6*var(--mx-u));min-height:calc(342.7*var(--mx-u))}
.mx-mega-photo{display:block;overflow:hidden}
.mx-mega-photo img{display:block;width:100%;aspect-ratio:330/197;object-fit:cover;transition:transform .6s cubic-bezier(.2,.6,.2,1)}
/* subtle zoom on hover (and when the card's title link has keyboard focus) */
@media (hover:hover){.mx-mega-photo:hover img{transform:scale(1.05)}}
.mx-mega-card:has(h3 a:focus-visible) .mx-mega-photo img{transform:scale(1.05)}
@media (prefers-reduced-motion:reduce){.mx-mega-photo img{transition:none}.mx-mega-photo:hover img,.mx-mega-card:has(h3 a:focus-visible) .mx-mega-photo img{transform:none}}
.mx-mega-card h3{margin:calc(21*var(--mx-u)) 0 0;font:700 calc(14.4*var(--mx-u))/1.2 var(--mx-font-body)}
.mx-mega h3 a,.mx-mega h4 a{color:#fff;text-decoration:none}
.mx-mega ul{list-style:none;margin:calc(8*var(--mx-u)) 0 0;padding:0}
.mx-mega ul a,.mx-mg-col address a{display:block;padding:calc(7*var(--mx-u)) 0;font-size:calc(10.37*var(--mx-u));line-height:1.15;color:#fff;text-decoration:none;transition:color .25s ease}
@media (hover:hover){.mx-mega ul a:hover,.mx-mega h3 a:hover,.mx-mega h4 a:hover,.mx-mg-phone:hover{color:var(--mx-blue-on-dark)}}
.mx-mega-rule{border:0;border-top:1px solid rgba(255,255,255,.25);margin:0}
.mx-mega-map{display:grid;grid-template-columns:minmax(0,154fr) minmax(0,174fr) minmax(0,194fr) minmax(0,199fr) minmax(0,258fr) minmax(0,431fr);padding-top:calc(34*var(--mx-u))}
.mx-mg-col h4{margin:0;font:700 calc(14.4*var(--mx-u))/1.2 var(--mx-font-body)}
.mx-mg-col h4.mx-mg-h2{margin-top:calc(21.6*var(--mx-u))}
.mx-mg-col address{font-style:normal;margin-top:calc(8*var(--mx-u))}
.mx-mg-col address p{margin:0 0 calc(13*var(--mx-u));font-size:calc(10.37*var(--mx-u));line-height:calc(13*var(--mx-u))}
.mx-mg-col address a{display:inline;padding:0;line-height:inherit}
.mx-mg-cta h3{margin:0;font:700 calc(25.2*var(--mx-u))/1.1 var(--mx-font-head)}
.mx-mg-cta p{margin:calc(7*var(--mx-u)) calc(-16*var(--mx-u)) 0 0;max-width:calc(312*var(--mx-u));font-size:calc(10.37*var(--mx-u));line-height:calc(18*var(--mx-u));letter-spacing:-.01em}
.mx-mg-actions{display:flex;align-items:center;gap:calc(30*var(--mx-u));margin-top:calc(19.4*var(--mx-u))}
.mx-mg-actions .mx-btn{min-height:calc(28.8*var(--mx-u));font-size:calc(11.52*var(--mx-u))}
.mx-mg-actions .mx-btn,.mx-mg-phone{white-space:nowrap;flex:none}
.mx-mg-phone{font:700 calc(14.4*var(--mx-u))/1 var(--mx-font-body);color:var(--mx-blue-on-dark);text-decoration:none;transition:color .25s ease}
.mx-mg-social{display:flex;align-items:center;gap:calc(46*var(--mx-u));margin-top:calc(21.6*var(--mx-u))}
.mx-mg-social a{display:block}
.mx-mg-social a:first-child svg{width:calc(18.7*var(--mx-u));height:calc(18.7*var(--mx-u))}
.mx-mg-social a:last-child svg{width:calc(24.5*var(--mx-u));height:calc(17.3*var(--mx-u))}
.mx-mg-social svg{display:block}
.mx-mg-social svg path{fill:#103b70}
@media (prefers-reduced-motion:reduce){.mx-menu,.mx-menu-panel,.mx-acc summary::after,.mx-btn{transition:none}html{scroll-behavior:auto}}


/* ---------- Photo cards (shared) ---------- */
.mx-ph{overflow:hidden;border-radius:var(--mx-radius-img)}
.mx-ph .mx-pl{position:relative}
/* Photo cards (home cards and pillars, Produced Water cards) are exported with a 6% margin on every side (parallax headroom). The image box is 112% of the frame and centred,
   so at rest the frame shows exactly what the PSB shows; the frame's aspect ratio lives on .mx-pl. */
.mx-ph .mx-pl img{position:absolute;left:-6%;top:-6%;width:112%;height:112%;max-width:none;object-fit:cover}
.mx-anim .mx-ph img{opacity:0}

/* ---------- Get Started (shared component; pages set the --mx-cta-* variables) ---------- */
/* MYCELX homepage sections: hero, Core Markets, Our Approach, Get Started, and their scroll-animation start states. */
/* ---------- CTA ---------- */
.mx-cta{--mx-cta-wash:254,238,201;--mx-cta-bg:var(--mx-sand);--mx-cta-heading:var(--mx-ink);--mx-cta-ink:#000;--mx-cta-eyebrow:var(--mx-blue-on-sand);--mx-cta-phone:var(--mx-blue-on-sand);
  --mx-cta-h:667px;--mx-cta-x:477px;--mx-cta-top:158px;--mx-wx:.167;   /* section height / copy x / copy top at the 0.72 reference; worker's left edge as a fraction of the photo */
  position:relative;overflow:hidden;background:var(--mx-cta-bg)}
.mx-cta .mx-eyebrow{color:var(--mx-cta-eyebrow)}
.mx-cta .mx-photo{position:absolute;inset:0;overflow:hidden;container-type:size}
/* photo is a full-height background layer behind the content */
/* photo is a full-height background layer behind the content */
.mx-cta .mx-pl{position:absolute;inset:0}
.mx-cta .mx-stage{--mx-asp:2000/926;--mx-px:.215;--mx-py:0;--mx-sh:max(100cqh,calc(100cqw*1/(var(--mx-asp))));--mx-sw:calc(var(--mx-sh)*var(--mx-asp));position:absolute;width:var(--mx-sw);height:var(--mx-sh);left:calc((100cqw - var(--mx-sw))*var(--mx-px));top:calc((100cqh - var(--mx-sh))*var(--mx-py))}
.mx-cta .mx-stage>*{position:absolute;inset:0;display:block;width:100%;height:100%}
/* scales proportionally to fill the section height */
/* tablet+ only (side fade) */
.mx-cta .mx-body{--mx-pad:calc(var(--mx-frame-w)*.74);position:relative;z-index:1;padding:var(--mx-pad) var(--mx-gutter) 56px;margin:0;
  /* content background: clear over the top of the photo (worker fully visible), then fades in just above the text and holds at 70% (30% lighter than solid) so the lower half of the photo stays faintly visible behind the text */
  background:linear-gradient(180deg,rgba(var(--mx-cta-wash),0) 0,rgba(var(--mx-cta-wash),0) calc(var(--mx-pad) - 110px),rgba(var(--mx-cta-wash),.7) calc(var(--mx-pad) + 10px))}
.mx-cta h2{font:700 44px/1.02 var(--mx-font-head);margin:10px 0 14px;letter-spacing:0;color:var(--mx-cta-heading)}
.mx-cta p{font-size:16px;line-height:1.55;max-width:26em}
.mx-cta .mx-body>p:not(.mx-eyebrow){color:var(--mx-cta-ink)}
.mx-cta .mx-actions{display:grid;gap:12px;margin-top:24px}
.mx-cta .mx-phone{display:flex;align-items:center;justify-content:center;min-height:48px;font-weight:700;font-size:18px;color:var(--mx-cta-phone);text-decoration:none}
/* get started: photo is a full-width background (worker on the left); the content column on the right gets a horizontal
   fade: transparent at its left edge, 70% #feeec9 behind the text, so the photo stays faintly visible behind the content */
@media (min-width:768px){
  .mx.mx .mx-cta{display:flex;justify-content:flex-end;align-items:stretch;min-height:clamp(540px,calc(var(--mx-frame-w)*.68),700px)}
  .mx.mx .mx-cta .mx-stage{--mx-px:.42}
  .mx.mx .mx-cta .mx-body{width:60%;flex:none;display:flex;flex-direction:column;justify-content:center;margin:0;padding:72px var(--mx-gutter) 72px 100px;
      background:linear-gradient(90deg,rgba(var(--mx-cta-wash),0) 0,rgba(var(--mx-cta-wash),.7) 100px)}
  .mx.mx .mx-cta h2{font-size:calc(44px + 20.5*(var(--mx-frame-w) - 390px)/810)}
  .mx.mx .mx-cta p{font-size:calc(16px + 1.2*(var(--mx-frame-w) - 768px)/432);max-width:24em}
  .mx.mx .mx-cta .mx-actions{display:flex;flex-wrap:wrap;align-items:center;gap:8px 28px;margin-top:32px}
  .mx.mx .mx-cta .mx-btn--block{width:auto;display:inline-flex}
  .mx.mx .mx-cta .mx-phone{justify-content:flex-start}
}
.mx-cta .mx-hexes{display:none}
/* get started: 667px at 1440; copy at x 762 (the PSD position); hexagon outlines rebuilt as SVG */
@media (min-width:1200px){
  .mx.mx .mx-cta{height:calc(var(--mx-cta-h)*var(--mx-m));min-height:0;justify-content:flex-start}
}
/* photo: worker kept toward the left (about 3% in from the edge, like the 1024px view). The offset is limited so the photo always covers the section; it relaxes to the PSD position (worker at 16% to 50%) as the frame nears 1920px. 1458 = 667 x the photo's 2.186 aspect ratio */
@media (min-width:1200px){
  .mx.mx .mx-cta .mx-stage{--mx-py:.5;left:max(calc(.03*var(--mx-frame-w) - var(--mx-wx)*var(--mx-sw)),calc(var(--mx-frame-w) - var(--mx-sw)))}
  /* worker kept toward the left; relaxes to the PSD position as the frame nears 1920px */
  .mx.mx .mx-cta .mx-hexes{display:block;position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:2}
  .mx.mx .mx-cta .mx-body{flex:1;width:auto;margin-left:calc(var(--mx-side) + var(--mx-cta-x)*var(--mx-m));padding:calc(var(--mx-cta-top)*var(--mx-m)) var(--mx-side) 0 calc(72px*var(--mx-m));justify-content:flex-start;
      background:none}   /* desktop: no wash, the photo is shown exactly as in the PSB (phone/tablet keep the readability wash) */
  .mx.mx .mx-cta h2{font-size:calc(54px*var(--mx-m));line-height:1.04;letter-spacing:0;margin:calc(6px*var(--mx-m)) 0 calc(12px*var(--mx-m))}
  .mx.mx .mx-cta p{font-size:calc(14.4px*var(--mx-m));line-height:1.5;max-width:calc(307px*var(--mx-m))}
  .mx.mx .mx-cta .mx-actions{margin-top:calc(27px*var(--mx-m));gap:calc(8px*var(--mx-m)) calc(15px*var(--mx-m))}
  .mx.mx .mx-cta .mx-btn--block{min-height:calc(29px*var(--mx-m));font-size:calc(11.52px*var(--mx-m))}
  .mx.mx .mx-cta .mx-phone{font-size:calc(14.4px*var(--mx-m));min-height:calc(29px*var(--mx-m))}
}
/* >= 1920px: no color behind the Get Started copy; the text sits directly on the photo */


/* ---------- Scroll animation start states (only when JS + motion are allowed; see mx-motion.js) ---------- */
.mx-ln-mask{padding-bottom:.14em;margin-bottom:-.14em}
.mx-anim .mx h1,.mx-anim .mx-cta h2{visibility:hidden}
.mx-anim :is(.mx-eyebrow,.mx-cta .mx-body>p:not(.mx-eyebrow),.mx-cta .mx-actions,.mx-foot .mx-brand,.mx-foot .mx-quick,.mx-foot .mx-acc,.mx-foot .mx-acc-link,.mx-foot .mx-social){opacity:0}
.mx-anim .mx-cta .mx-stage{opacity:0}
/* Hero backgrounds start at the zoomed-in state of their entrance animation (1.16x -> 1x), already on the first paint, so the image never shows un-zoomed before the script starts. */
.mx-anim [class*="hero-bg"]{transform:scale(1.16)}
.mx-anim .mx-lhero-team{opacity:0}

/* ---------- WordPress: the logged-in admin bar is 32px (46px on small screens) tall and pushes fixed content down ---------- */
body.admin-bar .mx-hdr-wrap{top:32px}
@media (max-width:782px){body.admin-bar .mx-hdr-wrap{top:46px}}

/* Spec (tablet-desktop-rules.md, Get Started): from 1200 to 1919px the copy keeps the same 70% fade as tablet and mobile, in each page's own
   wash colour; from 1920px the copy sits directly on the photo as in the PSB. The doubled class outranks the per-page "no wash" rules. */
@media (min-width:1200px){   /* owner: keep the fade on large screens too (the spec drops it from 1920px) */
  /* a long eased ramp that starts 240px left of the copy column and reaches full strength where the text begins (no visible edge).
     It sits on the photo layer, so the order is photo -> fade -> hexagon outlines -> text: the outlines stay white and never cover the text. */
  .mx.mx .mx-cta.mx-cta .mx-body{background:none;z-index:3}
  .mx.mx .mx-cta .mx-photo::after{content:"";position:absolute;top:0;bottom:0;right:0;left:calc(var(--mx-side) + var(--mx-cta-x)*var(--mx-m) - 240px);pointer-events:none;
    background:linear-gradient(90deg,rgba(var(--mx-cta-wash),0) 0,rgba(var(--mx-cta-wash),.04) 50px,rgba(var(--mx-cta-wash),.12) 100px,rgba(var(--mx-cta-wash),.25) 150px,
      rgba(var(--mx-cta-wash),.4) 200px,rgba(var(--mx-cta-wash),.54) 250px,rgba(var(--mx-cta-wash),.64) 295px,rgba(var(--mx-cta-wash),.7) 340px)}
}

/* Readability fade behind hero copy that sits on a photo. Opt-in per hero section with --mx-scrim: dark (white copy) or light (dark copy).
   mx-core.js measures the copy at the current width and sets the oval's centre and size, so it always sits exactly behind the text. Per page: --mx-scrim-a (strength), --mx-scrim-k (size factor). */
.mx-has-scrim{isolation:isolate}
.mx-has-scrim[data-mx-scrim="dark"]{--mx-scrim-rgb:9,23,34}
.mx-has-scrim[data-mx-scrim="light"]{--mx-scrim-rgb:255,255,255;--mx-scrim-a:.74}
.mx-has-scrim::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(ellipse calc(var(--mx-srx) * var(--mx-scrim-k,1)) calc(var(--mx-sry) * var(--mx-scrim-k,1)) at var(--mx-scx) var(--mx-scy),rgba(var(--mx-scrim-rgb),var(--mx-scrim-a,.62)) 0,rgba(var(--mx-scrim-rgb),var(--mx-scrim-a,.62)) 40%,rgba(var(--mx-scrim-rgb),0) 100%)}

/* Hero foreground cut-out over the headline (see the page CSS for the image); sits above the copy, never catches clicks */
.mx-hero-front{z-index:5!important;background-color:transparent!important;pointer-events:none}
@media (max-width:1199px){.mx-hero-front{display:none!important}}   /* the overlap is a desktop (PSD) detail; tablet and phone keep the title above the photo (spec: no overlap) */

/* Client 10-13 (all pages): images never block text; text sits in front. In heroes with a foreground cut-out (photo object over
   the headline in the PSD, or hanging below the hero) every copy element is raised above the cut-out. */
:is(section:has(> .mx-hero-front),section:has(> .mx-dh-front)) > :not(.mx-hero-front):not(.mx-dh-front):not([class$="-bg"]):not([class$="-clip"]){position:relative;z-index:6}

/* ---------- Download pop-up (client 10-13, PSB 'Mycelx_download pop up'): every download asks for name, email, phone first ---------- */
.mx-dl{width:min(600px,calc(100% - 32px));max-width:none;max-height:calc(100% - 32px);margin:auto;padding:0;border:0;border-radius:20px;background:#fff;color:var(--mx-ink);box-shadow:0 30px 80px rgba(9,23,34,.35);overflow:auto}
.mx-dl::backdrop{background:rgba(9,23,34,.62)}
.mx-dl-form{position:relative;padding:44px 48px 40px}
.mx-dl h2{font:700 30px/1.15 var(--mx-font-head);letter-spacing:0;margin:0 40px 6px 0;color:var(--mx-ink)}
.mx-dl-doc{margin:0 0 22px;font-size:15px;line-height:1.5;color:var(--mx-grey)}
.mx-dl-doc:empty{margin-bottom:16px}
.mx-dl-close{position:absolute;top:22px;right:22px;width:36px;height:36px;padding:9px;border:0;background:none;color:var(--mx-blue);cursor:pointer;border-radius:50%}
.mx-dl-close svg{display:block;width:100%;height:100%}
.mx-dl-close:hover{background:#eef3ff}
.mx-dl-f{display:block;margin-top:16px}
.mx-dl-f span{display:block;font:400 17px/1.3 var(--mx-font-body);color:#444;margin-bottom:8px}
.mx-dl b{color:#e0312b;font-weight:400}
.mx-dl-f input{display:block;width:100%;height:46px;padding:0 14px;border:1px solid #c9c9c9;border-radius:8px;font:400 15px var(--mx-font-body);color:var(--mx-ink);background:#fff}
.mx-dl-f input::placeholder{color:#8a8a8a}
.mx-dl-f input:focus{outline:none;border-color:var(--mx-blue);box-shadow:0 0 0 3px rgba(34,108,242,.18)}
.mx-dl-f input[aria-invalid="true"]{border-color:#e0312b}
.mx-dl-f em{display:block;font-style:normal;font-size:13px;color:#c22a24;margin-top:4px}
.mx-dl-f em:empty{display:none}
.mx-dl-hp{position:absolute!important;left:-9999px;width:1px;height:1px;overflow:hidden}
.mx-dl-note{margin-top:10px;font-size:12px;color:#555}
.mx-dl-msg{margin-top:10px;font-size:14px;color:#c22a24}
.mx-dl-msg:empty{display:none}
.mx-dl-go{margin-top:24px}
.mx-dl-go svg{width:16px;height:16px}
.mx-dl-go[disabled]{opacity:.6;cursor:wait}
.mx-dl.mx-done .mx-dl-f,.mx-dl.mx-done .mx-dl-note{display:none}
@media (max-width:549px){.mx-dl-form{padding:36px 22px 28px}.mx-dl h2{font-size:24px}.mx-dl-close{top:14px;right:14px}}