/* MYCELX Contact Us page (client 10-21, PSB Mycelx_Contact by Kathryn): hero, then the sidebar (departments accordion, locations,
   phone numbers: the page's own fields) beside the site's existing Contact Form 7 form (#543, settings unchanged, only styled here).
   Desktop values are PSD px x --mx-u (see mx-product.css); content column is the PSD's 1409 px container. */

.mx{--mx-u:calc(.72px*var(--mx-m))}   /* one PSD px (as in mx-product.css, which this page does not load) */

/* ---------- Hero ---------- */
.mx-cu-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:clamp(400px,56svh,520px);padding:calc(var(--mx-hdr-top) + var(--mx-hdr-h) + 64px) var(--mx-gutter) 0;color:var(--mx-ink)}
.mx-cu-hero-bg{position:absolute;inset:0;z-index:-1;transform-origin:50% 100%;background:#a8c4f5 url("../img/contact-us/contact-us-hero.webp") 78% 100%/cover no-repeat}
.mx-cu-hero h1{font:700 42px/1.06 var(--mx-font-head);margin-top:12px;letter-spacing:0;color:var(--mx-ink)}

/* ---------- Body: sidebar + form ---------- */
.mx-cu-body{display:flex;flex-direction:column-reverse;gap:48px;padding:48px var(--mx-gutter) 72px}
.mx-cu-side{padding:32px 28px;border-radius:var(--mx-radius-img);background:#ededed;color:#000}
.mx-cu-side h2{font:700 21px/1.2 var(--mx-font-head);letter-spacing:0;color:var(--mx-ink);margin-bottom:16px}
.mx-cu-side hr{border:0;border-top:2px solid #b9b9b9;margin:26px 0}
.mx-cu-side p,.mx-cu-side h3{font-size:16px;line-height:1.45}
.mx-cu-side h3{font-weight:700;font-family:var(--mx-font-body)}
.mx-cu-side a{color:inherit;text-decoration:none}
.mx-cu-side a:hover{color:var(--mx-blue-text)}
.mx-cu-dept + .mx-cu-dept{margin-top:14px}
.mx-cu-dept summary{list-style:none;display:flex;justify-content:space-between;align-items:center;gap:12px;cursor:pointer;font:700 16px/1.3 var(--mx-font-body);color:var(--mx-blue-text)}
.mx-cu-dept summary::-webkit-details-marker{display:none}
.mx-cu-dept summary::after{content:"";flex:none;width:9px;height:9px;margin:0 4px 4px 0;border:solid currentColor;border-width:0 2px 2px 0;transform:rotate(45deg);transition:transform .25s ease}
.mx-cu-dept[open] summary::after{transform:rotate(-135deg);margin:4px 4px 0 0}
.mx-cu-dept summary:focus-visible{outline:3px solid #ffb703;outline-offset:3px}
.mx-cu-dept-body{padding-top:8px}
.mx-cu-dept-body p + p{margin-top:10px}
.mx-cu-loc + .mx-cu-loc{margin-top:20px}
.mx-cu-dir{display:inline-flex;align-items:center;gap:8px;margin-top:4px;font-size:13px;font-weight:700;color:var(--mx-blue-text)!important;text-decoration:underline!important;text-underline-offset:2px}
.mx-cu-dir::after{content:"";width:6px;height:6px;border:solid currentColor;border-width:2px 2px 0 0;transform:rotate(45deg)}
.mx-cu-phones p + p{margin-top:16px}

.mx-cu-head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:8px 24px;margin-bottom:24px}
.mx-cu-head h2{font:700 28px/1.15 var(--mx-font-head);letter-spacing:0;color:var(--mx-ink)}
.mx-cu-req{font-size:12px;color:#555}
.mx-cu-req b,.mx-cu-form .wpcf7-not-valid-tip{color:#e0312b;font-weight:400}

/* the Contact Form 7 markup (one-col / two-col / three-col rows), styled to the PSB */
.mx-cu-form .wpcf7 br{display:none}
.mx-cu-form p{margin:0}
.mx-cu-form .one-col,.mx-cu-form .two-col,.mx-cu-form .three-col{display:grid;gap:16px;margin-bottom:16px}
.mx-cu-form .wpcf7-form-control-wrap{display:block}
.mx-cu-form input[type=text],.mx-cu-form input[type=email],.mx-cu-form input[type=tel],.mx-cu-form select,.mx-cu-form textarea{
  display:block;width:100%;height:52px;padding:0 18px;border:1px solid #c9c9c9;border-radius:8px;background:#fff;
  font:400 16px var(--mx-font-body);color:var(--mx-ink);appearance:none;-webkit-appearance:none}
.mx-cu-form select{padding-right:40px;color:#8a8a8a;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23226cf2' stroke-width='2'/%3E%3C/svg%3E") right 16px center/12px 8px no-repeat}
.mx-cu-form select:has(option:checked:not(:first-child)){color:var(--mx-ink)}
.mx-cu-form textarea{height:220px;padding:14px 18px;resize:vertical}
.mx-cu-form ::placeholder{color:#8a8a8a;opacity:1}
.mx-cu-form :is(input,select,textarea):focus{outline:none;border-color:var(--mx-blue);box-shadow:0 0 0 3px rgba(34,108,242,.18)}
.mx-cu-form .wpcf7-not-valid{border-color:#e0312b!important}
.mx-cu-form .wpcf7-not-valid-tip{display:block;font-size:13px;margin-top:4px}
.mx-cu-form input[type=submit]{display:inline-flex;align-items:center;justify-content:center;min-width:171px;min-height:44px;padding:0 28px;border:0;border-radius:999px;
  background:var(--mx-blue);color:#fff;font:400 16px var(--mx-font-body);cursor:pointer;transition:background .2s ease}
.mx-cu-form input[type=submit]:hover{background:#1954b9}
.mx-cu-form input[type=submit]:focus-visible{outline:3px solid #ffb703;outline-offset:3px}
.mx-cu-form .wpcf7-spinner{vertical-align:middle;margin-left:12px}
.mx-cu-form .wpcf7-response-output{margin:16px 0 0!important;padding:12px 16px!important;border-radius:8px;font-size:15px}
.mx-cu-form .grecaptcha-badge{z-index:5}

.mx-anim :is(.mx-cu-hero .mx-eyebrow,.mx-cu-side,.mx-cu-main){opacity:0}

/* ---- wide mobile (>= 550px): two-column and three-column form rows ---- */
@media (min-width:550px){
  .mx.mx .mx-cu-form .two-col{grid-template-columns:1fr 1fr}
  .mx.mx .mx-cu-form .three-col{grid-template-columns:1fr 1fr 1fr}
}

/* ---- tablet (>= 768px) ---- */
@media (min-width:768px){
  .mx.mx .mx-cu-hero{height:clamp(420px,46svh,560px);padding-top:calc(var(--mx-hdr-top) + var(--mx-hdr-h) + 84px)}
  .mx.mx .mx-cu-hero .mx-eyebrow{font-size:var(--mx-eb)}
  .mx.mx .mx-cu-hero h1{font-size:calc(42px + 22.5*(var(--mx-frame-w) - 390px)/810);margin-top:16px}
  .mx.mx .mx-cu-body{padding:72px var(--mx-gutter) 104px}
  .mx.mx .mx-cu-head h2{font-size:calc(28px + 4*(var(--mx-frame-w) - 768px)/432)}
}

/* ---- tablet landscape (>= 1024px): sidebar beside the form ---- */
@media (min-width:1024px){
  .mx.mx .mx-cu-body{flex-direction:row;align-items:flex-start;gap:48px}
  .mx.mx .mx-cu-side{flex:0 0 280px}
  .mx.mx .mx-cu-main{flex:1;min-width:0}
}

/* ---- desktop (>= 1200px): the PSD ---- */
@media (min-width:1200px){
  .mx.mx .mx-cu-hero{height:calc(var(--mx-u)*627);padding:calc(var(--mx-u)*261) var(--mx-side) 0 calc(var(--mx-side) + var(--mx-u)*241)}
  .mx.mx .mx-cu-hero .mx-eyebrow{font-size:calc(var(--mx-u)*20);line-height:1.2}
  .mx.mx .mx-cu-hero h1{font-size:calc(var(--mx-u)*75);line-height:1.054;margin-top:calc(var(--mx-u)*20)}
  .mx.mx .mx-cu-body{gap:calc(var(--mx-u)*146);padding:calc(var(--mx-u)*82) var(--mx-side) calc(var(--mx-u)*110)}
  .mx.mx .mx-cu-side{flex:0 0 calc(var(--mx-u)*333);padding:calc(var(--mx-u)*38) calc(var(--mx-u)*34) calc(var(--mx-u)*40) calc(var(--mx-u)*36);border-radius:calc(var(--mx-u)*20)}
  .mx.mx .mx-cu-side h2{font-size:calc(var(--mx-u)*25);margin-bottom:calc(var(--mx-u)*20)}
  .mx.mx .mx-cu-side p,.mx.mx .mx-cu-side h3,.mx.mx .mx-cu-dept summary{font-size:calc(var(--mx-u)*20);line-height:1.4}
  .mx.mx .mx-cu-side hr{margin:calc(var(--mx-u)*36) 0}
  .mx.mx .mx-cu-dir{font-size:calc(var(--mx-u)*16)}
  .mx.mx .mx-cu-main{flex:0 1 calc(var(--mx-u)*934)}
  .mx.mx .mx-cu-head{margin-bottom:calc(var(--mx-u)*38)}
  .mx.mx .mx-cu-head h2{font-size:calc(var(--mx-u)*40)}
  .mx.mx .mx-cu-req{font-size:calc(var(--mx-u)*12)}
  .mx.mx .mx-cu-form .one-col,.mx.mx .mx-cu-form .two-col,.mx.mx .mx-cu-form .three-col{gap:calc(var(--mx-u)*26);margin-bottom:calc(var(--mx-u)*32)}
  .mx.mx .mx-cu-form :is(input[type=text],input[type=email],input[type=tel],select){height:calc(var(--mx-u)*64);font-size:calc(var(--mx-u)*20);padding-left:calc(var(--mx-u)*21)}
  .mx.mx .mx-cu-form textarea{height:calc(var(--mx-u)*264);font-size:calc(var(--mx-u)*20);padding:calc(var(--mx-u)*18) calc(var(--mx-u)*21)}
  .mx.mx .mx-cu-form input[type=submit]{min-width:calc(var(--mx-u)*171);min-height:calc(var(--mx-u)*43);font-size:calc(var(--mx-u)*16)}
}

/* phones: the photo's man sits behind the title, so the photo moves right and the copy gets the soft light fade (like Landfill on phones) */
@media (max-width:767px){
  .mx-cu-hero{--mx-scrim:light}
  .mx-cu-hero-bg{background-position:66% 100%}
}