/* MYCELX homepage sections: hero, Core Markets, Our Approach. (Get Started is the shared .mx-cta component in mx-core.css.) */
/* ---------- Hero ---------- */
.mx-hero{position:relative;overflow:hidden;isolation:isolate;margin-top:calc(-1 * (var(--mx-hdr-top) + var(--mx-hdr-h)) - env(safe-area-inset-top,0px));height:100vh;height:100svh;min-height:560px;color:#fff;padding:132px var(--mx-gutter) 40px;background:#0a4a85}
.mx-hero-bg{position:absolute;inset:0;z-index:-1;transform-origin:50% 100%;--mx-hero-img:url("../img/home/home-hero-mobile.webp");--mx-img-h:calc(var(--mx-frame-w)*1.115);background:
  linear-gradient(to top,rgba(10,74,133,0) calc(var(--mx-img-h) - 150px),#0a4a85 var(--mx-img-h)),
  var(--mx-hero-img) 18% 100%/165% auto no-repeat,#0a4a85}
.mx-hero .mx-kicker{font-family:var(--mx-font-head);font-size:12px;font-weight:700;letter-spacing:.4em;text-transform:uppercase}
.mx-hero h1{font:700 42px/1.06 var(--mx-font-head);margin-top:14px;max-width:11em;letter-spacing:0}
.mx-hero-video{display:block;position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:65% 50%;opacity:0}
.mx-hero-video.mx-is-playing{opacity:1;transition:opacity .45s ease}   /* the hero background already shows the video's own first frame, so this is a soft blend between identical pictures */
.mx-anim .mx-hero-bg{transform:none}   /* video hero on every screen size: no zoom */
@media (prefers-reduced-motion:reduce){.mx-hero-video{display:none}}
/* ---------- Core markets ---------- */
.mx-markets{padding:56px var(--mx-gutter) 60px;text-align:center}
.mx-markets h2{font:700 34px/1.1 var(--mx-font-head);margin:8px 0 14px;letter-spacing:0}
.mx-markets .mx-intro{font-size:15px;color:var(--mx-grey);max-width:34em;margin:0 auto}
.mx-ind-list{margin-top:32px;display:grid;gap:36px;text-align:center}
.mx-ind .mx-pl{aspect-ratio:1/1}
.mx-ind img{object-position:50% 30%}
.mx-ind h3{font:700 26px/1.15 var(--mx-font-head);margin:16px 0 8px;color:#000}
.mx-ind p{font-size:15px;line-height:1.55;color:var(--mx-grey);max-width:24em;margin:0 auto}
/* ---------- Approach (dark) ---------- */
.mx-approach{color:#fff;text-align:center;padding:56px var(--mx-gutter) 72px;background:
  radial-gradient(120% 45% at 50% 108%,#0563b8 0%,rgba(5,99,184,0) 70%),var(--mx-navy)}
.mx-approach .mx-eyebrow{color:var(--mx-blue-on-dark)}
.mx-approach h2{font:700 32px/1.1 var(--mx-font-head);margin:8px 0 14px;letter-spacing:0}
.mx-approach .mx-intro{font-size:15px;max-width:34em;margin:0 auto;color:rgba(255,255,255,.92)}
.mx-pillars{margin-top:32px;display:grid;gap:34px;text-align:left}
.mx-pillar .mx-pl{aspect-ratio:4/3}
.mx-pillar h3{font:700 26px/1.15 var(--mx-font-head);margin:16px 0 8px}
.mx-pillar p{font-size:15px;line-height:1.6;color:rgba(255,255,255,.92)}
/* same maths as object-fit:cover + object-position */
/* ---------- Scroll animation (GSAP). Initial hidden states only apply when JS + motion are allowed ---------- */
/* ---- wide mobile (frame >= 550px): Core Markets goes 2 x 2, Our Approach goes image-left ---- */
/* ---------- Scroll animation start states ---------- */
.mx-anim :is(.mx-markets h2,.mx-approach h2){visibility:hidden}
.mx-anim :is(.mx-hero .mx-kicker,.mx-markets .mx-intro,.mx-approach .mx-intro,.mx-ind h3,.mx-ind p,.mx-pillar h3,.mx-pillar p){opacity:0}
@media (min-width:550px){
  .mx.mx .mx-ind-list{grid-template-columns:repeat(2,minmax(0,1fr));gap:44px 24px}
  .mx.mx .mx-ind h3{font-size:22px}
}
/* Our Approach: image left, content right */
@media (min-width:550px){
  .mx.mx .mx-pillars{gap:40px}
  .mx.mx .mx-pillar{display:grid;grid-template-columns:minmax(0,40%) minmax(0,1fr);column-gap:28px;align-content:center}
  .mx.mx .mx-pillar .mx-ph{grid-row:1 / span 2}
  .mx.mx .mx-pillar .mx-pl{aspect-ratio:1/1}
  .mx.mx .mx-pillar h3{align-self:end;margin:0 0 12px;font-size:24px}
  .mx.mx .mx-pillar p{align-self:start;font-size:15px}
}
/* hero */
@media (min-width:768px){
  .mx.mx .mx-hero{--mx-hero-h:clamp(640px,100svh,860px);height:var(--mx-hero-h);min-height:0;padding:calc(var(--mx-hdr-top) + var(--mx-hdr-h) + 84px) var(--mx-gutter) 64px}
  .mx.mx .mx-hero-bg{
      --mx-bg-w:max(var(--mx-frame-w),calc(var(--mx-hero-h)*.9));
      --mx-bg-h:calc(var(--mx-bg-w)*.676);
      --mx-bg-shift:max(0px,calc(var(--mx-bg-h) - var(--mx-hero-h)*.58));
      --mx-img-top:calc(var(--mx-bg-h) - var(--mx-bg-shift));
      background:
        linear-gradient(to top,rgba(10,74,133,0) calc(var(--mx-img-top) - 150px),#0a4a85 var(--mx-img-top)),
        var(--mx-hero-img) 10% calc(100% + var(--mx-bg-shift))/var(--mx-bg-w) auto no-repeat,#0a4a85}
  .mx.mx .mx-hero .mx-kicker{font-size:calc(12px + 5.2*(var(--mx-frame-w) - 390px)/810)}
  .mx.mx .mx-hero h1{font-size:calc(42px + 22.5*(var(--mx-frame-w) - 390px)/810);max-width:11.5em;margin-top:18px}
  .mx.mx .mx-markets .mx-intro,.mx.mx .mx-approach .mx-intro{font-size:calc(16px + 1.2*(var(--mx-frame-w) - 768px)/432);max-width:38em}
}
/* core markets: 2 x 2, then 4 across */
@media (min-width:768px){
  .mx.mx .mx-markets{padding:104px var(--mx-gutter) 112px}
  .mx.mx .mx-markets h2{font-size:calc(34px + 30.5*(var(--mx-frame-w) - 390px)/810);margin:10px 0 18px}
  .mx.mx .mx-ind-list{margin-top:56px;grid-template-columns:1fr 1fr;gap:56px 32px}
  .mx.mx .mx-ind h3{font-size:calc(26px + 6*(var(--mx-frame-w) - 390px)/810)}
}
@media (min-width:1024px){
  .mx.mx .mx-ind h3{font-size:calc(28px + 6.4*(var(--mx-frame-w) - 1024px)/176)}
}
@media (min-width:768px){
  .mx.mx .mx-ind p{font-size:16px}
}
@media (min-width:1024px){
  .mx.mx .mx-ind-list{grid-template-columns:repeat(4,minmax(0,1fr));gap:0 24px}
  .mx.mx .mx-ind .mx-pl{aspect-ratio:4/5}
  .mx.mx .mx-ind p{font-size:calc(15px + 2.2*(var(--mx-frame-w) - 1024px)/176)}
}
/* our approach: horizontal cards, then 3 columns */
@media (min-width:768px){
  .mx.mx .mx-approach{padding:104px var(--mx-gutter) 120px}
  .mx.mx .mx-approach h2{font-size:calc(34px + 30.5*(var(--mx-frame-w) - 390px)/810);margin:10px auto 18px;max-width:16em}
  .mx.mx .mx-pillars{margin-top:56px;gap:48px}
  .mx.mx .mx-pillar{display:grid;grid-template-columns:minmax(0,42%) minmax(0,1fr);column-gap:40px;align-content:center}
  .mx.mx .mx-pillar .mx-ph{grid-row:1 / span 2}
  .mx.mx .mx-pillar .mx-pl{aspect-ratio:1/1}
  .mx.mx .mx-pillar h3{align-self:end;margin:0 0 14px;font-size:calc(26px + 8.4*(var(--mx-frame-w) - 390px)/810)}
  .mx.mx .mx-pillar p{align-self:start;font-size:calc(16px + 1.2*(var(--mx-frame-w) - 768px)/432)}
}
@media (min-width:1024px){
  .mx.mx .mx-pillars{grid-template-columns:repeat(3,minmax(0,1fr));gap:32px;align-items:start}
  .mx.mx .mx-pillar{display:block}
  .mx.mx .mx-pillar h3{margin:22px 0 10px}
}
/* hero: 43.75% of the width (630px at 1440); content indented 69px from the container edge */
@media (min-width:1200px){
  .mx.mx .mx-hero{--mx-hero-h:calc(630px*var(--mx-m));height:var(--mx-hero-h);padding:calc(218px*var(--mx-m)) var(--mx-side) 0 calc(var(--mx-side) + calc(69px*var(--mx-m)))}
  .mx.mx .mx-hero-bg{--mx-hero-wide:url("../img/home/home-hero-desktop.webp");background:var(--mx-hero-wide) center/cover no-repeat,#0a4a85}
  .mx.mx .mx-hero .mx-kicker{font-size:calc(14.4px*var(--mx-m))}
  .mx.mx .mx-hero h1{font-size:calc(54px*var(--mx-m));line-height:1.054;letter-spacing:0;max-width:8.3em;margin-top:calc(12px*var(--mx-m))}
}
/* core markets: 4 across, 234.7 x 299.5 images, 24.5px gaps */
@media (min-width:1200px){
  .mx.mx .mx-markets{padding:calc(91px*var(--mx-m)) var(--mx-side) calc(104px*var(--mx-m))}
  .mx.mx .mx-markets h2{font-size:calc(54px*var(--mx-m));line-height:1.2;letter-spacing:0;margin:calc(2px*var(--mx-m)) 0 calc(14px*var(--mx-m));max-width:none}
  .mx.mx .mx-markets .mx-intro{font-size:calc(14.4px*var(--mx-m));line-height:1.4;max-width:calc(745px*var(--mx-m))}
  .mx.mx .mx-ind-list{margin-top:calc(44px*var(--mx-m));grid-template-columns:repeat(4,minmax(0,1fr));gap:0 calc(24.5px*var(--mx-m))}
  .mx.mx .mx-ind .mx-pl{aspect-ratio:326/416}
  .mx.mx .mx-ind h3{font-size:calc(28.8px*var(--mx-m));line-height:1.2;margin:calc(25px*var(--mx-m)) 0 calc(14px*var(--mx-m))}
  .mx.mx .mx-ind p{font-size:calc(14.4px*var(--mx-m));line-height:1.5;max-width:none}
}
/* our approach: 3 columns, 323.3px squares, 22.3px gaps */
@media (min-width:1200px){
  .mx.mx .mx-approach{padding:calc(102px*var(--mx-m)) var(--mx-side) calc(110px*var(--mx-m))}
  .mx.mx .mx-approach h2{font-size:calc(54px*var(--mx-m));line-height:1.2;letter-spacing:0;margin:calc(2px*var(--mx-m)) auto calc(14px*var(--mx-m));max-width:none}
  .mx.mx .mx-approach .mx-intro{font-size:calc(14.4px*var(--mx-m));line-height:1.45;max-width:calc(700px*var(--mx-m))}
  .mx.mx .mx-pillars{margin-top:calc(59px*var(--mx-m));gap:calc(22.3px*var(--mx-m))}
  .mx.mx .mx-pillar .mx-pl{aspect-ratio:1/1}
  .mx.mx .mx-pillar h3{font-size:calc(28.8px*var(--mx-m));line-height:1.2;margin:calc(26px*var(--mx-m)) 0 calc(8px*var(--mx-m))}
  .mx.mx .mx-pillar p{font-size:calc(14.4px*var(--mx-m));line-height:1.5}
}

/* Video hero (motion allowed). The colour behind is a deep navy close to the video's own tones (no light-blue flash while the poster loads).
   - tablet/desktop: as designed: the hero keeps the design's height and the video fills it (a strip at the edges is trimmed).
   - phones: the hero is the text on navy, then the 16:9 video full width below it, uncropped, with a short fade into the navy
     (filling a tall phone screen would cut most of the video's width).
   Only reduced-motion visitors keep the photo hero above. */
@media (prefers-reduced-motion:no-preference){
  .mx.mx .mx-hero{background:#003258}
  .mx.mx .mx-hero-bg{background:#003258 url("../img/home/home-hero-video-poster.webp") 65% 50%/cover no-repeat}   /* = the video's first frame, framed exactly like the video */
}
@media (max-width:767px) and (prefers-reduced-motion:no-preference){
  .mx.mx .mx-hero{height:auto;min-height:0;padding-bottom:calc(56.25% + 28px)}
  .mx.mx .mx-hero-bg{background:#003258 url("../img/home/home-hero-video-poster.webp") 50% 100%/100% auto no-repeat}   /* same box as the video */
  .mx.mx .mx-hero-video{top:auto;bottom:0;height:auto;aspect-ratio:16/9;object-position:50% 50%}
  .mx.mx .mx-hero-bg::after{content:"";position:absolute;left:0;right:0;bottom:calc(56.25vw - 48px);height:48px;background:linear-gradient(#003258,rgba(0,50,88,0));pointer-events:none}
}

/* client 10-13: core-market cards link to their pages (the title link covers the whole card) */
.mx-ind{position:relative}
.mx-ind-link{color:inherit;text-decoration:none}
.mx-ind-link::after{content:"";position:absolute;inset:0;z-index:2}
.mx-ind-link:focus-visible{outline:none}
.mx-ind:has(.mx-ind-link:focus-visible){outline:3px solid #ffb703;outline-offset:3px}
@media (hover:hover){.mx-ind:hover .mx-ind-link{color:var(--mx-blue-text)}}