/* MYCELX News page: hero, Latest Updates list + Stay Informed sidebar, News Bar band, Get Started (pumpjack sunset).
   Desktop (>=1200) = PSD px x --mx-nw-u (one PSD px at the current desktop scale = 0.72 x --mx-m). */

.mx{--mx-nw-u:calc(.72px*var(--mx-m,1.19))}
.mx [hidden]{display:none !important}

/* ---------- Hero (oil-field photo, white copy on the left) ---------- */
.mx-nw-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));min-height:clamp(540px,80svh,660px);padding:calc(var(--mx-hdr-top) + var(--mx-hdr-h) + 56px) var(--mx-gutter) 56px;color:#fff;background:#0c1a2e}
.mx-nw-hero-bg{position:absolute;inset:0;z-index:-1;transform-origin:50% 100%;background:#0c1a2e url("../img/news/news-hero.webp") 66% 50%/cover no-repeat}
.mx-nw-hero-bg::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(9,23,34,.55),rgba(9,23,34,.15) 70%,rgba(9,23,34,0))}
.mx-nw-hero-copy{max-width:520px}
.mx-nw-hero .mx-eyebrow{line-height:1;color:var(--mx-blue-on-dark)}
.mx-nw-hero h1{font:700 42px/1.06 var(--mx-font-head);margin:12px 0 18px;letter-spacing:0;color:#fff}
.mx-nw-intro{font-size:16px;line-height:1.55;max-width:26em}

/* ---------- Latest Updates ---------- */
.mx-nw-updates{padding:56px var(--mx-gutter) 64px;background:#fff}
.mx-nw-updates .mx-eyebrow{line-height:1}
.mx-nw-list{list-style:none;margin-top:26px}
.mx-nw-item{padding:28px 0 30px;border-bottom:1px solid #b8b8b8}
.mx-nw-item:first-child{padding-top:0}
.mx-nw-date{display:flex;align-items:baseline;gap:10px;color:var(--mx-grey);margin-bottom:10px}
.mx-nw-day{font:700 32px/1 var(--mx-font-head)}
.mx-nw-month{font:400 14px/1.4 var(--mx-font-body);text-transform:uppercase}
.mx-nw-text h3{font:700 22px/1.2 var(--mx-font-head);letter-spacing:0;color:var(--mx-ink)}
.mx-nw-text>p{margin-top:10px;font-size:15px;line-height:1.6;color:var(--mx-grey)}
.mx-nw-link{display:inline-flex;align-items:center;gap:8px;margin-top:16px;padding:6px 0;font:700 15px/1.3 var(--mx-font-head);color:var(--mx-blue-text);text-decoration:none}
button.mx-nw-link{appearance:none;background:none;border:0;cursor:pointer;text-align:left}
.mx-nw-modal{width:min(720px,calc(100vw - 32px));max-height:calc(100svh - 48px);padding:0;border:0;border-radius:20px;background:#fff;color:var(--mx-ink);box-shadow:0 24px 80px rgba(9,23,34,.45)}
.mx.mx .mx-nw-modal{position:fixed;inset:0;margin:auto}   /* the .mx reset zeroes the dialog's default auto margins: centre it again */
.mx-nw-modal::backdrop{background:rgba(9,23,34,.6)}
.mx-nw-modal-in{position:relative;max-height:calc(100svh - 48px);overflow-y:auto;padding:36px 32px 32px}
.mx-nw-modal-x{position:absolute;top:10px;right:14px;width:40px;height:40px;border:0;background:none;font-size:32px;line-height:1;color:var(--mx-ink);cursor:pointer}
.mx-nw-modal-date{font:700 13px/1.2 var(--mx-font-head);letter-spacing:.12em;text-transform:uppercase;color:var(--mx-blue-text)}
.mx-nw-modal h3{margin:8px 40px 16px 0;font:700 24px/1.2 var(--mx-font-head)}
.mx-nw-modal-body{font-size:16px;line-height:1.6;color:var(--mx-grey)}
.mx-nw-modal-body p,.mx-nw-modal-body ol,.mx-nw-modal-body ul{margin:0 0 14px}
.mx-nw-modal-body ol,.mx-nw-modal-body ul{padding-left:1.4em}
.mx-nw-modal-body a{color:var(--mx-blue-text)}
#mx-nw-updates-title{scroll-margin-top:calc(var(--mx-hdr-top,20px) + var(--mx-hdr-h,80px) + 40px)}   /* keep the sticky header clear of the list heading after paging */
.mx-nw-link svg{flex:none;width:1em;height:1em}
@media (hover:hover){.mx-nw-link:hover{text-decoration:underline;text-underline-offset:3px}}

.mx-nw-pager{margin-top:32px}
.mx-nw-pager ul{list-style:none;display:flex;justify-content:center;align-items:center;gap:6px}
.mx-nw-page{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:50%;background:#ededed;color:#8c8c8c;font:400 16px/1 var(--mx-font-body);text-decoration:none;transition:background-color .25s ease,color .25s ease}
.mx-nw-page[aria-current="page"]{background:var(--mx-blue);color:#fff}
.mx-nw-gap{color:#8c8c8c;font-size:18px;line-height:1;padding:0 2px}
.mx-nw-arrow{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;color:var(--mx-blue-text);text-decoration:none}
.mx-nw-arrow svg{width:36px;height:36px}
.mx-nw-arrow[aria-disabled="true"]{color:#b8b8b8;pointer-events:none}
@media (hover:hover){.mx-nw-page:not([aria-current]):hover{background:#e0e0e0;color:var(--mx-ink)}}

/* ---------- Sidebar ---------- */
.mx-nw-side{margin:48px auto 0;max-width:420px;padding:36px 28px 32px;border-radius:var(--mx-radius-img);background:#ededed;text-align:center}
.mx-nw-side h2{font:700 24px/1.2 var(--mx-font-head);letter-spacing:0;color:var(--mx-ink)}
.mx-nw-side-copy{margin:12px auto 0;max-width:16em;font-size:15px;line-height:1.6;color:var(--mx-grey)}
.mx-nw-form{display:grid;gap:10px;margin-top:24px}
.mx-nw-form input{width:100%;min-height:48px;padding:0 20px;border:1px solid var(--mx-blue);border-radius:999px;background:#fff;color:#000;text-align:center;font:400 16px/1.25 var(--mx-font-body)}
.mx-nw-form input::placeholder{color:var(--mx-grey);opacity:1}
.mx-nw-form input:focus-visible{outline:3px solid #ffb703;outline-offset:2px}
.mx-nw-form .mx-btn{width:100%;padding:0 16px}

/* ---------- News Bar ---------- */
.mx-nw-bar{padding:72px var(--mx-gutter);text-align:center;color:#fff;background:var(--mx-navy) url("../img/news/news-bar-background.webp") center/cover no-repeat}
.mx-nw-bar .mx-eyebrow{line-height:1;color:var(--mx-blue-on-dark)}
.mx-nw-bar h2{font:700 36px/1.05 var(--mx-font-head);letter-spacing:0;margin:16px 0 28px;color:#fff}

/* ---------- Get Started (values from the PSB: white eyebrow/phone, navy heading, black copy) ---------- */
.mx-cta--news{--mx-cta-wash:226,236,246;--mx-cta-bg:#a9bcd6;--mx-cta-heading:#091722;--mx-cta-ink:#000;--mx-cta-eyebrow:var(--mx-blue-text);--mx-cta-phone:var(--mx-blue-text);
  --mx-cta-h:671.8px;--mx-cta-x:424.2px;--mx-cta-top:181px;--mx-wx:.02}
.mx-cta--news .mx-stage{--mx-asp:2000/934.4;--mx-px:.14}

/* ---------- Animation start states ---------- */
.mx-anim .mx-nw-intro,.mx-anim .mx-nw-item :is(.mx-nw-date,h3,.mx-nw-text>p,.mx-nw-link),.mx-anim .mx-nw-pager,.mx-anim .mx-nw-side,.mx-anim .mx-nw-bar .mx-btn{opacity:0}
.mx-anim .mx-nw-bar h2{visibility:hidden}

/* ---- wide mobile (>= 550px) ---- */
@media (min-width:550px){
  .mx.mx .mx-nw-side{padding:40px 40px 36px}
  .mx.mx .mx-nw-bar h2{font-size:44px}
}

/* ---- tablet (>= 768px): date column beside the copy ---- */
@media (min-width:768px){
  .mx.mx .mx-nw-hero{min-height:clamp(600px,68svh,720px);padding:calc(var(--mx-hdr-top) + var(--mx-hdr-h) + 84px) var(--mx-gutter) 64px}
  .mx.mx .mx-nw-hero h1{font-size:calc(42px + 22.5*(var(--mx-frame-w) - 390px)/810);margin-bottom:22px}
  .mx.mx .mx-nw-intro{font-size:calc(16px + 1.2*(var(--mx-frame-w) - 768px)/432)}
  .mx.mx .mx-nw-updates{padding:88px var(--mx-gutter) 96px}
  .mx.mx .mx-nw-list{margin-top:34px}
  .mx.mx .mx-nw-item{display:grid;grid-template-columns:84px minmax(0,1fr);column-gap:30px;padding:40px 0 42px}
  .mx.mx .mx-nw-item:first-child{padding-top:0}
  .mx.mx .mx-nw-date{display:block;grid-column:1;text-align:right;margin:0}
  .mx.mx .mx-nw-text{grid-column:2}
  .mx.mx .mx-nw-day{display:block;font-size:40px;line-height:1}
  .mx.mx .mx-nw-month{display:block;margin-top:4px;font-size:14px}
  .mx.mx .mx-nw-text h3{font-size:calc(22px + 3.4*(var(--mx-frame-w) - 768px)/432)}
  .mx.mx .mx-nw-text>p{font-size:calc(15px + 1*(var(--mx-frame-w) - 768px)/432);margin-top:12px}
  .mx.mx .mx-nw-pager{margin-top:44px}
  .mx.mx .mx-nw-side{max-width:520px;padding:48px 48px 44px}
  .mx.mx .mx-nw-side h2{font-size:28px}
  .mx.mx .mx-nw-bar{padding:104px var(--mx-gutter) 108px}
  .mx.mx .mx-nw-bar h2{font-size:calc(44px + 20*(var(--mx-frame-w) - 768px)/432);margin:20px 0 36px}
  .mx.mx .mx-cta--news .mx-stage{--mx-px:.18}
}

/* ---- tablet landscape (>= 1024px): sidebar on the right ---- */
@media (min-width:1024px){
  .mx.mx .mx-nw-grid{display:grid;grid-template-columns:minmax(0,1fr) 290px;column-gap:48px;align-items:start}
  .mx.mx .mx-nw-side{position:sticky;top:110px;margin:0;max-width:none;padding:44px 28px 40px}
  .mx.mx .mx-nw-side h2{font-size:24px}
}

/* ---- desktop (>= 1200px): the PSD ---- */
@media (min-width:1200px){
  .mx.mx .mx-nw-hero{min-height:0;height:calc(855*var(--mx-nw-u));padding:calc(158px*var(--mx-m)) var(--mx-side) 0}
  .mx.mx .mx-nw-hero-bg::after{display:none}   /* the PSD photo already has its dark gradient baked in */
  .mx.mx .mx-nw-hero-copy{padding-left:calc(84px*var(--mx-m));max-width:none}       /* copy starts at x 413 = 117 PSD px inside the 1409 column */
  .mx.mx .mx-nw-hero h1{font-size:calc(54px*var(--mx-m));line-height:1.054;margin:calc(9px*var(--mx-m)) 0 calc(16px*var(--mx-m))}
  .mx.mx .mx-nw-intro{font-size:calc(14.4px*var(--mx-m));line-height:1.4;max-width:calc(373px*var(--mx-m))}

  .mx.mx .mx-nw-updates{padding:calc(115*var(--mx-nw-u)) var(--mx-side) calc(167*var(--mx-nw-u))}
  .mx.mx .mx-nw-grid{grid-template-columns:calc(905*var(--mx-nw-u)) calc(333*var(--mx-nw-u));justify-content:space-between;column-gap:0;padding-left:calc(117*var(--mx-nw-u))}
  .mx.mx .mx-nw-updates .mx-eyebrow{font-size:calc(14.4px*var(--mx-m))}
  .mx.mx .mx-nw-list{margin-top:calc(50*var(--mx-nw-u))}
  .mx.mx .mx-nw-item{grid-template-columns:calc(92*var(--mx-nw-u)) minmax(0,1fr);column-gap:calc(30*var(--mx-nw-u));padding:calc(54*var(--mx-nw-u)) 0 calc(48*var(--mx-nw-u))}
  .mx.mx .mx-nw-item:first-child{padding-top:0}
  .mx.mx .mx-nw-date{padding-right:0}
  .mx.mx .mx-nw-day{font-size:calc(50*var(--mx-nw-u));line-height:.9}
  .mx.mx .mx-nw-month{margin-top:calc(4*var(--mx-nw-u));font-size:calc(16*var(--mx-nw-u));line-height:1.3}
  .mx.mx .mx-nw-text h3{font-size:calc(25*var(--mx-nw-u));line-height:1.06}
  .mx.mx .mx-nw-text>p{margin-top:calc(14*var(--mx-nw-u));font-size:calc(20*var(--mx-nw-u));line-height:1.4;max-width:calc(783*var(--mx-nw-u))}
  .mx.mx .mx-nw-link{margin-top:calc(20*var(--mx-nw-u));padding:0;font-size:calc(16*var(--mx-nw-u))}
  .mx.mx .mx-nw-pager{margin-top:calc(53*var(--mx-nw-u))}
  .mx.mx .mx-nw-pager ul{gap:calc(6*var(--mx-nw-u))}
  .mx.mx .mx-nw-page{width:calc(36*var(--mx-nw-u));height:calc(36*var(--mx-nw-u));font-size:calc(16*var(--mx-nw-u))}
  .mx.mx .mx-nw-arrow{width:calc(36*var(--mx-nw-u));height:calc(36*var(--mx-nw-u))}
  .mx.mx .mx-nw-arrow svg{width:calc(33*var(--mx-nw-u));height:calc(33*var(--mx-nw-u))}
  .mx.mx .mx-nw-gap{font-size:calc(20*var(--mx-nw-u))}

  .mx.mx .mx-nw-side{top:calc(100px*var(--mx-m));min-height:calc(382*var(--mx-nw-u));padding:calc(46*var(--mx-nw-u)) calc(37*var(--mx-nw-u)) calc(50*var(--mx-nw-u));border-radius:calc(20*var(--mx-nw-u))}
  .mx.mx .mx-nw-side h2{font-size:calc(25*var(--mx-nw-u));line-height:1.2}
  .mx.mx .mx-nw-side-copy{margin-top:calc(14*var(--mx-nw-u));max-width:calc(205*var(--mx-nw-u));font-size:calc(20*var(--mx-nw-u));line-height:1.4}
  .mx.mx .mx-nw-form{gap:calc(9*var(--mx-nw-u));margin-top:calc(34*var(--mx-nw-u))}
  .mx.mx .mx-nw-form input{min-height:calc(44*var(--mx-nw-u));padding:0 calc(16*var(--mx-nw-u));font-size:calc(16*var(--mx-nw-u))}
  .mx.mx .mx-nw-form .mx-btn{min-height:calc(43*var(--mx-nw-u));font-size:calc(16*var(--mx-nw-u))}

  .mx.mx .mx-nw-bar{height:calc(634*var(--mx-nw-u));padding:calc(176*var(--mx-nw-u)) var(--mx-side) 0}
  .mx.mx .mx-nw-bar .mx-eyebrow{font-size:calc(14.4px*var(--mx-m))}
  .mx.mx .mx-nw-bar h2{font-size:calc(54px*var(--mx-m));line-height:1;margin:calc(19*var(--mx-nw-u)) 0 calc(48*var(--mx-nw-u))}
  .mx.mx .mx-nw-bar .mx-btn{min-width:calc(258*var(--mx-nw-u));min-height:calc(43*var(--mx-nw-u));font-size:calc(16*var(--mx-nw-u));padding:0 calc(20*var(--mx-nw-u))}

  .mx.mx .mx-cta--news .mx-stage{--mx-px:.12}
  .mx.mx .mx-cta--news .mx-body{background:none}
  .mx.mx .mx-cta--news h2{white-space:nowrap}
}

/* newsletter card switched off: the list is centred instead of leaving an empty column */
@media (min-width:1024px){.mx.mx .mx-nw-grid--solo{grid-template-columns:minmax(0,820px);justify-content:center;padding-left:0}}
@media (min-width:1200px){.mx.mx .mx-nw-grid--solo{grid-template-columns:calc(905*var(--mx-nw-u));justify-content:center;padding-left:0}}
@media (max-width:767px){.mx-nw-hero{--mx-scrim:dark}}   /* readability on phones only (owner: on desktop it dulled the whole photo) */