/**
 * MedCare Case Worker Recruitment — careers landing page + application form.
 *
 * Extracted verbatim from the reference design
 * (medcare-careers-case-worker-v2 (2).html, inline <style> block), with two
 * deliberate changes so the stylesheet cannot leak into the theme:
 *
 *   1. Every selector is scoped under .mcwr-careers. The custom properties
 *      stay on :root, as does html{scroll-behavior}.
 *   2. The .site-header / .nav / .site-footer / .brand rules are dropped —
 *      WordPress supplies the header and footer, and those class names could
 *      collide with the theme's own markup.
 *
 * Rule order, declarations, class names and media queries are otherwise
 * untouched, so design tweaks stay portable.
 */

/* =========================================================================
   BRAND TOKENS — MedCare CHI Case Worker careers page (v2, staffx-inspired)
   Adjust these to MedCare's exact values; everything else follows.
   ========================================================================= */
:root{--forest:#12503B;      /* deep green — headings, footer            */
  --green:#2F8F6B;       /* PRIMARY brand green — buttons, accents    */
  --green-600:#26795A;   /* button hover                              */
  --green-soft:#E7F1EC;  /* pale green — chips, icon backgrounds      */
  --mist:#F4F8F6;        /* light section background                  */
  --ink:#16241D;         /* body / dark text                          */
  --navy:#1B2A3A;        /* form section headings (matches your form) */
  --muted:#5F6E66;       /* secondary text                            */
  --honey:#DD9B2E;       /* warm accent — used sparingly              */
  --req:#D64545;         /* required asterisk                         */
  --line:#E2E9E5;        /* hairlines / input borders                 */
  --field-bg:#F4F5F8;    /* input / textarea ground                   */
  --field-bg-focus:#FFFFFF; /* the field lifts to white on focus      */

  --fs-border-width:2px;
  --fs-radius:24px;
  --fs-group-border:#CFE0DA; /* the quieter frame of a nested group   */
  --white:#FFFFFF;
  --heading:#000000;     /* big titles — black, staffx style          */

  --font-display:'Plus Jakarta Sans', system-ui, sans-serif;
  --font-body:'Inter', system-ui, -apple-system, sans-serif;

  --maxw:1180px;
  --r:16px;              /* card radius   */
  --r-lg:24px;           /* large radius  */
  --shadow:0 22px 50px -26px rgba(18,80,59,.4);
  --shadow-sm:0 12px 30px -18px rgba(18,80,59,.35);}
/* ============================= RESET ============================= */
.mcwr-careers, .mcwr-careers *{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
.mcwr-careers{font-family:var(--font-body);color:var(--ink);line-height:1.65;-webkit-font-smoothing:antialiased;
  /* Declared on the block, not on :root, so a theme using the same name for
     its own brand colour cannot reach in here -- and so the Elementor Style
     tab has one obvious place to override it. */
  --mcwr-primary:#136D5B}
.mcwr-careers img{max-width:100%;display:block}
.mcwr-careers a{color:inherit;text-decoration:none}
.mcwr-careers h1, .mcwr-careers h2, .mcwr-careers h3, .mcwr-careers h4{font-family:var(--font-display);line-height:1.12;letter-spacing:-.02em;font-weight:800}
.mcwr-careers h1, .mcwr-careers h2{color:var(--heading)}
.mcwr-careers h3, .mcwr-careers h4{color:var(--forest)}
.mcwr-careers p{max-width:64ch}
/* ============================ LAYOUT ============================ */
.mcwr-careers .wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px}
.mcwr-careers .section{padding:92px 0}
.mcwr-careers .section--mist{background:var(--mist)}
.mcwr-careers .section--forest{background:var(--forest)}
.mcwr-careers .head{max-width:720px;margin-bottom:52px}
.mcwr-careers .head.center{margin-inline:auto;text-align:center}
.mcwr-careers .eyebrow{display:inline-flex;align-items:center;gap:8px;font-family:var(--font-display);
  font-weight:700;font-size:.8rem;letter-spacing:.08em;text-transform:uppercase;color:var(--green);margin-bottom:16px}
.mcwr-careers .eyebrow::before{content:"";width:22px;height:2px;background:var(--green);border-radius:2px}
.mcwr-careers h2{font-size:clamp(1.9rem,3.6vw,2.8rem)}
.mcwr-careers .head p{color:var(--muted);font-size:1.1rem;margin-top:14px}
/* buttons */
.mcwr-careers .btn{display:inline-flex;align-items:center;justify-content:center;gap:.55em;font-family:var(--font-display);
  font-weight:700;font-size:1rem;line-height:1;padding:16px 28px;border-radius:999px;border:2px solid transparent;
  cursor:pointer;transition:background .18s, color .18s, transform .18s, border-color .18s}
.mcwr-careers .btn--primary{background:var(--green);color:#fff}
.mcwr-careers .btn--primary:hover{background:var(--green-600);transform:translateY(-2px)}
.mcwr-careers .btn--ghost{background:transparent;color:var(--forest);border-color:var(--line)}
.mcwr-careers .btn--ghost:hover{border-color:var(--green);color:var(--green)}
.mcwr-careers .btn--light{background:#fff;color:var(--forest)}
.mcwr-careers .btn--light:hover{transform:translateY(-2px)}
.mcwr-careers a:focus-visible, .mcwr-careers button:focus-visible, .mcwr-careers input:focus-visible, .mcwr-careers textarea:focus-visible, .mcwr-careers select:focus-visible{outline:3px solid var(--honey);outline-offset:2px}
/* image placeholders (swap for real photography in Elementor) */
.mcwr-careers .ph{background:linear-gradient(135deg,#dcebe2,#cfe4d8 55%,#bcd8c9);display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:10px;color:var(--green-600);text-align:center;padding:22px;border:1px solid #cfe1d7}
.mcwr-careers .ph svg{width:40px;height:40px;opacity:.6}
.mcwr-careers .ph small{font-weight:700;font-size:.78rem;max-width:26ch;opacity:.85}
/* ============================ HEADER ============================ */
/* ============================= HERO ============================= */
.mcwr-careers .hero{padding:64px 0 96px;position:relative;overflow:hidden}
/* The design's soft green glow, kept as an opt-in layer. The hero ships with
   no background at all; this is only applied when the Background control asks
   for it, so the original look stays one click away without being imposed. */
.mcwr-careers .hero--glow{
  background:
    radial-gradient(1150px 620px at 84% -10%, rgba(47,143,107,.16), transparent 60%),
    radial-gradient(760px 520px at -5% 108%, rgba(47,143,107,.09), transparent 55%),
    var(--white)}
/* rotating decorative stars — recreated in SVG (your asset, not staffx's) */
.mcwr-careers .hero__stars{position:absolute;top:30px;right:26px;width:116px;height:116px;z-index:2;pointer-events:none;color:var(--honey)}
.mcwr-careers .hero__stars svg{width:100%;height:100%;transform-origin:center;animation:spin 16s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}
.mcwr-careers .hero__grid{display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:center}
.mcwr-careers .hero h1{font-size:clamp(2.5rem,5vw,4rem);margin-bottom:22px}
.mcwr-careers .hero .sub{font-size:1.2rem;color:var(--muted);margin-bottom:32px;max-width:52ch}
.mcwr-careers .hero__cta{display:flex;flex-wrap:wrap;gap:14px}
.mcwr-careers .hero__media{position:relative}
.mcwr-careers .hero__media .ph{aspect-ratio:5/6;border-radius:var(--r-lg)}
.mcwr-careers .stat{position:absolute;background:#fff;border-radius:var(--r);box-shadow:var(--shadow-sm);padding:16px 18px;
  display:flex;align-items:center;gap:12px;border:1px solid var(--line);animation:floaty 5s ease-in-out infinite}
.mcwr-careers .stat .ic{width:42px;height:42px;flex:0 0 auto;border-radius:11px;background:var(--green-soft);color:var(--green-600);display:flex;align-items:center;justify-content:center}
.mcwr-careers .stat .ic svg{width:22px;height:22px}
.mcwr-careers .stat b{font-family:var(--font-display);display:block;color:var(--forest);font-size:1rem;line-height:1.1}
.mcwr-careers .stat span{font-size:.8rem;color:var(--muted)}
.mcwr-careers .stat--1{top:24px;left:-26px}
.mcwr-careers .stat--2{bottom:96px;right:-24px;animation-delay:1.3s}
.mcwr-careers .stat--3{bottom:-18px;left:34px;animation-delay:.7s}
/* ========================= WHY / ABOUT ========================= */
.mcwr-careers .about__grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:56px;align-items:center}
.mcwr-careers .about__media .ph{aspect-ratio:4/5;border-radius:var(--r-lg)}
.mcwr-careers .about .lead{font-size:1.12rem;color:var(--ink);margin-bottom:14px;font-weight:500}
.mcwr-careers .about .story{color:var(--muted);margin-bottom:26px}
.mcwr-careers .feat{display:flex;gap:16px;padding:18px 0;border-top:1px solid var(--line)}
.mcwr-careers .feat .ic{width:50px;height:50px;flex:0 0 auto;border-radius:13px;background:var(--green-soft);color:var(--green-600);display:flex;align-items:center;justify-content:center}
.mcwr-careers .feat .ic svg{width:26px;height:26px}
.mcwr-careers .feat h3{font-size:1.15rem;margin-bottom:3px}
.mcwr-careers .feat p{color:var(--muted);font-size:.98rem}
/* ===================== BARRIERS (services grid) ================ */
.mcwr-careers .cards{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.mcwr-careers .card{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:30px 26px;transition:transform .18s, box-shadow .18s}
.mcwr-careers .card:hover{transform:translateY(-4px);box-shadow:var(--shadow-sm)}
.mcwr-careers .card .ic{width:56px;height:56px;border-radius:14px;background:var(--green-soft);color:var(--green-600);display:flex;align-items:center;justify-content:center;margin-bottom:18px}
.mcwr-careers .card .ic svg{width:28px;height:28px}
.mcwr-careers .card h3{font-size:1.2rem;margin-bottom:8px}
.mcwr-careers .card p{color:var(--muted);font-size:.97rem}
/* ==================== TYPICAL MONTH (benefit list) ============= */
.mcwr-careers .month__grid{display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:center}
.mcwr-careers .month__media .ph{aspect-ratio:1/1;border-radius:var(--r-lg)}
.mcwr-careers .checks{list-style:none;display:grid;gap:16px;margin-top:8px}
.mcwr-careers .checks li{display:flex;gap:14px;align-items:flex-start;font-size:1.02rem}
.mcwr-careers .checks li .tick{flex:0 0 auto;width:26px;height:26px;border-radius:8px;background:var(--green);color:#fff;display:flex;align-items:center;justify-content:center;margin-top:2px}
.mcwr-careers .checks li .tick svg{width:15px;height:15px}
/* ====================== WHO WE'RE LOOKING FOR ================== */
.mcwr-careers .who__grid{display:grid;grid-template-columns:1.1fr .9fr;gap:52px;align-items:start}
/* These two were style="" attributes in the markup, which no Style control
   can reach -- the same trap as the highlighted card and the benefits
   eyebrow. They live here so the widget can govern them. */
.mcwr-careers .who__intro{color:var(--muted);margin:14px 0 4px}
.mcwr-careers .who__skills-title{margin-bottom:16px;font-weight:600;color:var(--forest)}
.mcwr-careers .chips{display:flex;flex-wrap:wrap;gap:10px;margin:8px 0 28px}
.mcwr-careers .chip{background:#fff;border:1px solid var(--line);border-radius:999px;padding:9px 16px;font-family:var(--font-display);font-weight:600;font-size:.92rem;color:var(--forest)}
.mcwr-careers .skills{list-style:none;display:grid;gap:13px}
.mcwr-careers .skills li{display:flex;gap:12px;align-items:flex-start}
.mcwr-careers .skills li svg{flex:0 0 auto;width:22px;height:22px;color:var(--green);margin-top:3px}
.mcwr-careers .reqs{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:32px;box-shadow:var(--shadow-sm)}
.mcwr-careers .reqs h3{font-size:1.35rem;margin-bottom:8px}
.mcwr-careers .reqs .hint{color:var(--muted);font-size:.95rem;margin-bottom:18px}
.mcwr-careers .reqs ul{list-style:none;display:grid;gap:13px}
.mcwr-careers .reqs li{display:flex;gap:11px;font-size:.98rem}
.mcwr-careers .reqs li::before{content:"";flex:0 0 auto;width:20px;height:20px;margin-top:3px;border-radius:6px;
  background:var(--green-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='13' height='13' viewBox='0 0 24 24' fill='none' stroke='%2326795A' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/13px no-repeat}
/* ============================ BENEFITS ========================= */
.mcwr-careers .benefits h2, .mcwr-careers .benefits .head p{color:#eafcf3}
.mcwr-careers .benefits .head p{color:#c4ded2}
.mcwr-careers .ben-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.mcwr-careers .ben{border:1px solid rgba(255,255,255,.16);border-radius:var(--r);padding:28px 24px;background:rgba(255,255,255,.05)}
.mcwr-careers .ben .ic{width:48px;height:48px;border-radius:12px;background:rgba(255,255,255,.12);color:#a9e9cf;display:flex;align-items:center;justify-content:center;margin-bottom:16px}
.mcwr-careers .ben .ic svg{width:24px;height:24px}
.mcwr-careers .ben h3{color:#fff;font-size:1.18rem;margin-bottom:6px}
.mcwr-careers .ben p{color:#bcd7cb;font-size:.95rem;max-width:38ch}
/* ========================= PROCESS (numbered) ================== */
.mcwr-careers .proc{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;counter-reset:p}
.mcwr-careers .proc .step{position:relative;background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:30px 24px 26px}
.mcwr-careers .proc .step .num{counter-increment:p;font-family:var(--font-display);font-weight:800;font-size:1rem;color:#fff;
  width:44px;height:44px;border-radius:50%;background:var(--forest);display:flex;align-items:center;justify-content:center;margin-bottom:18px}
.mcwr-careers .proc .step .num::before{content:"0" counter(p)}
.mcwr-careers .proc .step h3{font-size:1.14rem;margin-bottom:6px}
.mcwr-careers .proc .step p{color:var(--muted);font-size:.95rem}
/* ============================== FORM =========================== */
.mcwr-careers .apply__grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:52px;align-items:start}
.mcwr-careers .apply__intro .lead{color:var(--muted);font-size:1.1rem;margin-top:14px}
/* The reassurance list owns its own look. It used to be scoped under
   .apply__intro, which broke the moment the stacked layout moved it out of
   that column: the list markers came back and the inline SVGs, having no
   width or height of their own, fell back to the browser default of roughly
   300x150px. Only the margin is contextual. */
.mcwr-careers .assure{display:grid;gap:14px}
.mcwr-careers .assure li{display:flex;gap:12px;align-items:flex-start;list-style:none;font-weight:500}
.mcwr-careers .assure svg{flex:0 0 auto;width:22px;height:22px;color:var(--green);margin-top:3px}
/* Side by side, the reassurances close the intro column. Hanging straight
   off the lead paragraph they read as a continuation of it; a rule and some
   air make them a block of their own, which is what they are. */
.mcwr-careers .apply__intro .assure{margin-top:30px;padding-top:26px;border-top:1px solid var(--line)}
.mcwr-careers .form{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:38px;box-shadow:var(--shadow)}
/* Each step is a real <fieldset> with a real <legend>. That is not a styling
   choice: a screen reader announces the legend as the group name for every
   field inside it, which no div and heading can do. The legend also notches
   the top border natively, which is what the pill below relies on -- so it
   keeps width:auto and is never turned into a block. */
.mcwr-careers .mcwr-step{border:var(--fs-border-width) solid var(--mcwr-primary, #136D5B);
  border-radius:var(--fs-radius);padding:32px 40px 40px;margin:0 0 32px;background:#fff;
  min-width:0}
.mcwr-careers .mcwr-step-legend{width:auto;float:none;
  border:var(--fs-border-width) solid var(--mcwr-primary, #136D5B);border-radius:999px;
  padding:8px 24px;margin-left:16px;background:#fff;color:var(--mcwr-primary, #136D5B);
  font-family:var(--font-display);font-weight:600;font-size:15px;line-height:1;letter-spacing:0}
.mcwr-careers .mcwr-step-hint{color:var(--muted);font-size:.95rem;margin:14px 0 22px}
/* The fields of a step. A grid rather than margins on each field, so one gap
   value sets the rhythm and an empty step collapses cleanly. */
.mcwr-careers .mcwr-step-grid{display:grid;gap:24px;min-width:0}
.mcwr-careers .mcwr-step-grid>.field{margin-bottom:0}
/* A group inside a step -- the checkbox set, the radio set. Same idea, said
   quietly, so the nesting reads at a glance instead of competing. */
.mcwr-careers .mcwr-step-group{border:1.5px solid var(--fs-group-border);border-radius:14px;
  padding:18px 20px;margin:0;min-width:0}
.mcwr-careers .mcwr-step-group-legend{width:auto;float:none;padding:4px 14px;margin-left:10px;
  background:#fff;border:1.5px solid var(--fs-group-border);border-radius:999px;
  font-family:var(--font-display);font-weight:700;color:var(--navy);font-size:.86rem;line-height:1.2}
.mcwr-careers .field{margin-bottom:24px}
.mcwr-careers .field:last-child{margin-bottom:0}
.mcwr-careers .field label{display:block;font-family:var(--font-display);font-weight:700;color:var(--navy);font-size:.95rem;margin-bottom:8px}
.mcwr-careers .req{color:var(--req)}
.mcwr-careers .field input[type=text], .mcwr-careers .field input[type=email], .mcwr-careers .field input[type=tel], .mcwr-careers .field input[type=date], .mcwr-careers .field input[type=number], .mcwr-careers .field select, .mcwr-careers .field textarea{width:100%;font:inherit;padding:15px 16px;border:1.5px solid var(--line);border-radius:12px;background:var(--field-bg);color:var(--ink);transition:background .15s, border-color .15s}
.mcwr-careers .field input:focus, .mcwr-careers .field select:focus, .mcwr-careers .field textarea:focus{background:var(--field-bg-focus);border-color:var(--green)}
.mcwr-careers .field input::placeholder, .mcwr-careers .field textarea::placeholder{color:#9aa8a1}
.mcwr-careers .field select{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%235F6E66' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 15px center;padding-right:44px}
.mcwr-careers .field textarea{min-height:120px;resize:vertical}
.mcwr-careers .grid-2{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.mcwr-careers .checkline{display:flex;gap:12px;align-items:flex-start;margin-bottom:16px;font-size:1rem}
.mcwr-careers .checkline:last-child{margin-bottom:0}
.mcwr-careers .checkline input{width:22px;height:22px;flex:0 0 auto;margin-top:2px;accent-color:var(--green)}
.mcwr-careers .radios{display:flex;gap:26px;margin-top:4px}
.mcwr-careers .radios label{display:flex;align-items:center;gap:9px;font-family:var(--font-body);font-weight:500;color:var(--ink);margin:0}
.mcwr-careers .radios input{width:20px;height:20px;accent-color:var(--green)}
.mcwr-careers .form .submit{width:100%;background:var(--green);color:#fff;border:0;border-radius:14px;padding:18px;
  font-family:var(--font-display);font-weight:800;font-size:1.05rem;cursor:pointer;transition:background .18s,transform .18s;margin-top:4px}
.mcwr-careers .form .submit:hover{background:var(--green-600);transform:translateY(-1px)}
.mcwr-careers .form .fineprint{text-align:center;color:var(--muted);font-size:.82rem;margin-top:14px}
/* ---- multi-step wizard ---- */
.mcwr-careers .steps-bar{display:flex;gap:8px;margin-bottom:28px}
.mcwr-careers .steps-bar .sb{flex:1;display:flex;flex-direction:column;gap:8px}
.mcwr-careers .steps-bar .sb .bar{height:5px;border-radius:999px;background:var(--line)}
.mcwr-careers .steps-bar .sb .lbl{font-family:var(--font-display);font-weight:700;font-size:.76rem;color:var(--muted);letter-spacing:.01em}
.mcwr-careers .steps-bar .sb.done .bar, .mcwr-careers .steps-bar .sb.active .bar{background:var(--green)}
.mcwr-careers .steps-bar .sb.done .lbl, .mcwr-careers .steps-bar .sb.active .lbl{color:var(--forest)}
.mcwr-careers .step-count{font-family:var(--font-display);font-weight:700;font-size:.82rem;color:var(--green);margin-bottom:6px}
.mcwr-careers .step-panel{display:none;animation:panelIn .35s ease}
.mcwr-careers .step-panel.active{display:block}
@keyframes panelIn{from{opacity:0;transform:translateX(10px)}to{opacity:1;transform:none}}
.mcwr-careers .form-nav{display:flex;gap:12px;margin-top:26px}
.mcwr-careers .form-nav .btn-back{background:#fff;color:var(--forest);border:1.5px solid var(--line);border-radius:14px;
  padding:16px 24px;font-family:var(--font-display);font-weight:700;font-size:1rem;cursor:pointer;transition:border-color .18s,color .18s}
.mcwr-careers .form-nav .btn-back:hover{border-color:var(--green);color:var(--green)}
.mcwr-careers .form-nav .btn-next{flex:1;background:var(--green);color:#fff;border:0;border-radius:14px;padding:17px;
  font-family:var(--font-display);font-weight:800;font-size:1.05rem;cursor:pointer;transition:background .18s,transform .18s}
.mcwr-careers .form-nav .btn-next:hover{background:var(--green-600);transform:translateY(-1px)}
@media (max-width:560px){
  .mcwr-careers .steps-bar .sb .lbl{display:none}
}
/* ============================= FOOTER ========================== */
/* ============================ MOTION =========================== */
.mcwr-careers .reveal{opacity:0;transform:translateY(22px);transition:opacity .65s ease, transform .65s ease}
.mcwr-careers .reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .mcwr-careers, .mcwr-careers *{scroll-behavior:auto}
  .mcwr-careers .card:hover{transform:none}
  .mcwr-careers .hero__stars svg, .mcwr-careers .stat{animation:none}
  .mcwr-careers .reveal{opacity:1!important;transform:none!important}
}
/* =========================== RESPONSIVE ======================== */
@media (max-width:960px){
  .mcwr-careers .hero__grid, .mcwr-careers .about__grid, .mcwr-careers .month__grid, .mcwr-careers .who__grid, .mcwr-careers .apply__grid{grid-template-columns:1fr;gap:40px}
  .mcwr-careers .cards, .mcwr-careers .ben-grid{grid-template-columns:1fr 1fr}
  .mcwr-careers .proc{grid-template-columns:1fr 1fr}

  .mcwr-careers .hero__media{margin-top:20px}
  .mcwr-careers .stat--2{right:0}
  .mcwr-careers .stat--1{left:0}
}
@media (max-width:560px){
  .mcwr-careers .section{padding:64px 0}
  .mcwr-careers .cards, .mcwr-careers .ben-grid, .mcwr-careers .proc, .mcwr-careers .grid-2{grid-template-columns:1fr}

  .mcwr-careers .form{padding:26px}
  .mcwr-careers .stat{display:none}
/* keep hero clean on small screens */
  .mcwr-careers .hero__stars{width:66px;height:66px;top:12px;right:10px;opacity:.75}
}

/* =========================================================================
   ADDED IN PHASE 4 — states the static mockup had no need for: server-side
   error reporting, per-field errors and the submitting state.
   ========================================================================= */
.mcwr-careers .form-error{display:flex;gap:12px;align-items:flex-start;margin-bottom:22px;padding:14px 16px;
  border:1.5px solid #f0c2c2;border-left:4px solid var(--req);border-radius:12px;background:#fdf4f4;color:#8a2c2c;font-size:.96rem}
.mcwr-careers .form-error svg{flex:0 0 auto;width:20px;height:20px;margin-top:2px;color:var(--req)}
.mcwr-careers .form-error[hidden]{display:none}
.mcwr-careers .field-error{border-color:var(--req)!important;background:#fdf7f7}
.mcwr-careers .field-error:focus{outline-color:var(--req)}
.mcwr-careers .btn-next[disabled],.mcwr-careers .submit[disabled]{opacity:.6;cursor:not-allowed;transform:none}
.mcwr-careers .btn-next[disabled]:hover{background:var(--green);transform:none}
.mcwr-careers .form-note{margin-top:12px;color:var(--muted);font-size:.85rem;text-align:center}

/* =========================================================================
   ADDED IN PHASE 5 — resume upload (step 5).
   ========================================================================= */
.mcwr-careers .mcwr-cv-field input[type="file"]{width:100%;font:inherit;padding:14px 15px;border:1.5px dashed var(--line);
  border-radius:12px;background:#fff;color:var(--ink);cursor:pointer}
.mcwr-careers .mcwr-cv-field input[type="file"]:hover{border-color:var(--green)}
.mcwr-careers .mcwr-cv-field input[type="file"]:disabled{opacity:.6;cursor:not-allowed}

.mcwr-careers .mcwr-cv-progress{height:6px;margin-top:12px;border-radius:999px;background:var(--line);overflow:hidden}
.mcwr-careers .mcwr-cv-progress__bar{height:100%;width:0;border-radius:999px;background:var(--green);transition:width .2s ease}
.mcwr-careers .mcwr-cv-progress[hidden],.mcwr-careers .mcwr-cv-preview[hidden]{display:none}

.mcwr-careers .mcwr-cv-preview{display:flex;align-items:center;gap:10px;margin-top:12px;padding:12px 14px;
  border:1.5px solid #cfe4d8;border-radius:12px;background:var(--green-soft);font-size:.95rem}
.mcwr-careers .mcwr-cv-preview svg{flex:0 0 auto;width:20px;height:20px;color:var(--green-600)}
.mcwr-careers .mcwr-cv-preview__name{flex:1;font-weight:600;color:var(--forest);word-break:break-all}
.mcwr-careers .mcwr-cv-preview__remove{border:0;background:none;padding:0;color:var(--req);font:inherit;
  font-weight:700;font-size:.88rem;cursor:pointer;text-decoration:underline}

.mcwr-careers .error-text{margin-top:10px;color:var(--req);font-size:.92rem;min-height:1em}

/* ============== REAL PHOTOS (once an editor picks one) ==========
   The design ships placeholders; when a real image is chosen it has to sit in
   exactly the same box, or the floating stat cards land in the wrong place. */
.mcwr-careers .mcwr-photo{display:block;width:100%;height:auto;object-fit:cover;border-radius:var(--r-lg)}
.mcwr-careers .hero__media .mcwr-photo{aspect-ratio:5/6}
.mcwr-careers .about__media .mcwr-photo{aspect-ratio:4/5}
.mcwr-careers .month__media .mcwr-photo{aspect-ratio:1/1}
/* The form on its own, without the intro column beside it. */
.mcwr-careers .apply__grid--solo{grid-template-columns:1fr;max-width:720px;margin-inline:auto}
/* The two rules the reference design carried as inline style attributes.
   Inline styles beat everything, which made them the only part of the page an
   Elementor Style control could not reach. */
.mcwr-careers .card--highlight{background:var(--green-soft);border-color:#cfe4d8}
.mcwr-careers .card--highlight .ic{background:var(--white)}
.mcwr-careers .benefits .eyebrow{color:#8fe0be}

/* ================== BAND LAYOUT (Elementor control) ==============
   The hero's <section> is itself the .wrap, so its background stops at the
   content width; every other section is a full bleed band with a .wrap
   inside. These two modifiers swap either one over to the other behaviour
   without the markup changing. */
.mcwr-careers .hero.mcwr-band--full{max-width:none;padding-left:0;padding-right:0}
.mcwr-careers .hero.mcwr-band--full .hero__grid{max-width:var(--maxw);margin-inline:auto;padding:0 24px}
/* Keep the stars beside the content, not out at the viewport edge. */
.mcwr-careers .hero.mcwr-band--full .hero__stars{right:max(26px, calc((100% - var(--maxw)) / 2 + 26px))}
.mcwr-careers .section.mcwr-band--boxed{max-width:var(--maxw);margin-inline:auto}

/* ============== APPLY, STACKED (intro / form / reassurances) =============
   Three rows instead of two columns: the intro reads across the top, the
   form gets the page to itself, and the reassurances close the section as
   their own band. Each row is capped and centred independently so the form
   never stretches to a line length nobody can scan. */
.mcwr-careers .apply__rows{display:grid;gap:44px}
.mcwr-careers .apply__rows .apply__row{width:100%}
.mcwr-careers .apply__intro--center{max-width:680px;margin-inline:auto;text-align:center}
.mcwr-careers .apply__intro--center .lead{margin-left:auto;margin-right:auto}
/* Stacked, the form fills the block. Style -> Form panel -> Max width caps
   it back for anyone who wants a narrower measure; when it is capped this
   keeps it centred. */
.mcwr-careers .apply__row--form{max-width:none}
.mcwr-careers .apply__row--form .form{margin-inline:auto}
.mcwr-careers .apply__row--assure{max-width:900px;margin-inline:auto}
/* The reassurances read as a row of three, not a stacked list. */
.mcwr-careers .assure--row{display:flex;flex-wrap:wrap;justify-content:center;gap:16px 36px;margin-top:0}
.mcwr-careers .assure--row li{flex:0 1 auto}
@media (max-width:640px){
  .mcwr-careers .assure--row{flex-direction:column;align-items:flex-start;gap:14px}
}

/* The reCAPTCHA v2 checkbox. Google renders it in a fixed-width iframe, so
   it only needs room and a scroll escape on narrow screens. */
.mcwr-careers .mcwr-captcha-field .g-recaptcha{margin-top:4px;max-width:100%;overflow-x:auto}
.mcwr-careers .mcwr-captcha-field .error-text{margin-top:8px}

/* Sending indicator. The animation is the site's own loading.gif, scaled
   down from its native 630px -- the source is square, so a fixed box and
   object-fit keep it from smearing. */
.mcwr-careers .mcwr-submitting{display:flex;align-items:center;gap:12px;margin-top:16px;
  color:var(--muted);font-size:.95rem;font-weight:500}
.mcwr-careers img.mcwr-spinner{flex:0 0 auto;width:40px;height:40px;display:block;
  object-fit:contain}

/* Icons chosen from Elementor's library render as <i class="fas …"> (a font
   glyph) or as an inline <svg> for an uploaded file. The design's own icons
   are always <svg>, and Elementor's inline-font-icons setting turns Font
   Awesome into <svg> too -- those are already covered by the per-context
   `.ic svg` rules. Only the <i> case needs sizing of its own. */
.mcwr-careers .ic i{font-style:normal;line-height:1;display:block}
.mcwr-careers .card .ic i{font-size:28px}
.mcwr-careers .feat .ic i{font-size:26px}
.mcwr-careers .ben .ic i{font-size:24px}
.mcwr-careers .stat .ic i{font-size:22px}

/* An overlay layer for the step cards. A background image behind text needs
   a veil to stay readable, and that is also the honest way to "make the
   image transparent" — CSS has no opacity for a background-image alone, and
   putting opacity on the card would fade the words with it. */
.mcwr-careers .proc .step{isolation:isolate}
.mcwr-careers .proc .step::after{content:"";position:absolute;inset:0;z-index:-1;
  border-radius:inherit;background:transparent;opacity:0;pointer-events:none}

/* Privacy consent. The label wraps the box so the whole sentence is a click
   target, and the text keeps its own line length rather than wrapping under
   the checkbox. */
.mcwr-careers .mcwr-consent-field{margin-top:4px}
.mcwr-careers .mcwr-consent{display:flex;gap:12px;align-items:flex-start;cursor:pointer;
  font-size:.95rem;line-height:1.55;color:var(--ink);margin:0}
.mcwr-careers .mcwr-consent input[type=checkbox]{width:22px;height:22px;flex:0 0 auto;
  margin-top:1px;accent-color:var(--green)}
.mcwr-careers .mcwr-consent-text a{color:var(--green-600);text-decoration:underline}
.mcwr-careers .mcwr-consent-text a:hover{color:var(--forest)}
.mcwr-careers .mcwr-consent-field .error-text{margin-top:6px}