/* Careers: job pages ("mrp-ev" design, kept exactly as on the current job pages).
   Rules copied from 561 Media's page-career-template.php and the Operations posting, moved out of the
   template into this file. Nov 2, 2026: type and buttons moved onto the site standard (Manrope headings,
   Source Sans 3 body, .mrp-btn pill buttons); see the block at the end. Loaded only on job pages. */


.mrp-ev{
	--blue:#1B92D0; --blue-dark:#136A9B; --green:#8AC440; --red:#C62032;
	--slate:#8C9DAF; --ink:#1E2A32; --ink-soft:#51626D; --paper:#FFFFFF;
	--bg-soft:#F3F7FA; --border:#E1E9EE; --max:1120px;
}
.mrp-ev *{box-sizing:border-box;}
.mrp-ev{ margin:0; background:var(--paper); color:var(--ink); font-family:var(--mrp-font-body); font-size:17px; line-height:1.6; -webkit-font-smoothing:antialiased; }
.mrp-ev a{color:inherit;}
.mrp-ev img{max-width:100%; display:block;}
.mrp-ev .wrap{max-width:var(--max); margin:0 auto; padding:0 28px;}


.mrp-ev .hero{ position:relative; padding:64px 0 56px; overflow:hidden; }
.mrp-ev .hero-bg-diamonds{ position:absolute; top:-70px; right:-70px; width:420px; height:420px; z-index:0; opacity:.14; pointer-events:none; background:linear-gradient(135deg, var(--blue) 25%, transparent 25.5%) 0 0/70% 70% no-repeat, linear-gradient(135deg, var(--red) 25%, transparent 25.5%) 50% 50%/30% 30% no-repeat, linear-gradient(135deg, var(--green) 25%, transparent 25.5%) 20% 20%/50% 50% no-repeat; clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); }
@media (max-width:760px){.mrp-ev .hero-bg-diamonds{ opacity:.12; width:280px; height:280px; top:-40px; right:-50px; }}
.mrp-ev .hero-inner{ position:relative; z-index:1; display:grid; grid-template-columns:1.2fr 0.8fr; gap:52px; align-items:center; }
@media (max-width:860px){.mrp-ev .hero-inner{ grid-template-columns:1fr; }}
.mrp-ev .eyebrow{ display:inline-flex; align-items:center; gap:10px; font-weight:700; font-size:14px; letter-spacing:0.08em; text-transform:uppercase; color:var(--blue-dark); margin-bottom:18px; }
.mrp-ev h1{ font-family:var(--mrp-font-head); font-weight:700; font-size:clamp(2.1rem, 3.6vw, 3rem); line-height:1.15; letter-spacing:-0.01em; margin:0 0 18px; color:var(--ink); }
.mrp-ev h1 .accent{ color:var(--blue); }
.mrp-ev .hero-lede{ font-size:18px; color:var(--ink-soft); max-width:50ch; margin:0 0 26px; }
.mrp-ev .hero-lede p{ margin:0 0 .8em; }
.mrp-ev .hero-lede p:last-child{ margin-bottom:0; }
.mrp-ev .hero-cta{ display:flex; gap:14px; align-items:center; flex-wrap:wrap; }

.mrp-ev .facts-card{ background:var(--paper); border:1px solid var(--border); border-radius:16px; box-shadow: 0 20px 45px -28px rgba(27,146,208,0.35); padding:8px; }
.mrp-ev .facts-card-head{ background:#fff; border-bottom:2px solid var(--border); border-radius:11px 11px 0 0; padding:16px 20px; color:var(--blue); font-family:var(--mrp-font-head); font-weight:700; font-size:17px; }
.mrp-ev .facts-list{ padding:6px 6px 6px; }
.mrp-ev .fact-row{ display:flex; justify-content:space-between; gap:14px; padding:14px 14px; border-bottom:1px solid var(--border); font-size:15.5px; }
.mrp-ev .fact-row:last-child{ border-bottom:none; }
.mrp-ev .fact-label{ color:var(--ink-soft); font-weight:500; }
.mrp-ev .fact-value{ font-weight:700; text-align:right; }

.mrp-ev section{ padding:56px 0; }
.mrp-ev section#apply{ scroll-margin-top:110px; }
.mrp-ev section.alt{ background:var(--bg-soft); }
.mrp-ev .section-head{ margin-bottom:28px; max-width:74ch; }
.mrp-ev h2{ font-family:var(--mrp-font-head); font-weight:700; font-size:clamp(1.7rem, 2.2vw, 2.1rem); margin:0 0 12px; color:var(--ink); letter-spacing:-0.01em; }
.mrp-ev .lede{ color:var(--ink-soft); max-width:70ch; }
.mrp-ev .lede p{ margin:0 0 .8em; }
.mrp-ev .lede p:last-child{ margin-bottom:0; }

.mrp-ev .services-strip{ display:flex; flex-wrap:wrap; align-items:center; gap:14px; margin-top:24px; padding-top:20px; border-top:1px solid var(--border); }
.mrp-ev .services-strip.no-rule{ border-top:none; padding-top:0; margin-top:0; }
.mrp-ev .service-item{ display:flex; align-items:center; gap:9px; font-size:15px; font-weight:600; color:var(--ink); }
.mrp-ev .service-item .dot{ width:7px; height:7px; border-radius:50%; flex:none; }
.mrp-ev .dot--blue{ background:var(--blue); } .mrp-ev .dot--green{ background:var(--green); } .mrp-ev .dot--red{ background:var(--red); } .mrp-ev .dot--slate{ background:var(--slate); }
.mrp-ev .service-sep{ color:var(--border); font-size:15px; }
@media (max-width:640px){.mrp-ev .service-sep{ display:none; } .mrp-ev .services-strip{ gap:16px 22px; }}

/* task cards (Operations posting) */
.mrp-ev .task-grid{ display:grid; grid-template-columns:repeat(3, 1fr); gap:18px; }
@media (max-width:860px){.mrp-ev .task-grid{ grid-template-columns:repeat(2,1fr); }}
@media (max-width:600px){.mrp-ev .task-grid{ grid-template-columns:1fr; }}
.mrp-ev .task-card{ background:#fff; border:1px solid var(--border); border-radius:14px; padding:24px; transition: box-shadow .2s ease, transform .2s ease; }
.mrp-ev .task-card:hover{ box-shadow:0 16px 30px -22px rgba(30,42,50,0.35); transform:translateY(-2px); }
.mrp-ev .task-icon{ width:40px; height:40px; border-radius:10px; display:flex; align-items:center; justify-content:center; margin-bottom:14px; font-size:18px; }
.mrp-ev .task-icon--blue{ background:#1B92D01A; color:var(--blue); }
.mrp-ev .task-icon--green{ background:#8AC4401A; color:#6b9b2c; }
.mrp-ev .task-icon--red{ background:#C620321A; color:var(--red); }
.mrp-ev .task-icon--slate{ background:#8C9DAF26; color:var(--slate); }
.mrp-ev .task-card h3{ font-size:17px; margin:0 0 8px; font-family:var(--mrp-font-head); font-weight:600; }
.mrp-ev .task-card p{ margin:0; color:var(--ink-soft); font-size:15px; }

.mrp-ev .col-heading{ font-family:var(--mrp-font-head); font-weight:700; font-size:clamp(1.4rem, 1.8vw, 1.7rem); letter-spacing:-0.01em; margin:0 0 14px; color:var(--ink); }
.mrp-ev .grid-2{ display:grid; grid-template-columns:1fr 1fr; gap:44px; align-items:start; }
@media (max-width:760px){.mrp-ev .grid-2{ grid-template-columns:1fr; gap:6px; } .mrp-ev .grid-2 .col-heading{ margin-top:28px; }}
.mrp-ev .checklist{ list-style:none; margin:0; padding:0; }
.mrp-ev .checklist li{ display:flex; gap:12px; align-items:flex-start; padding:12px 0; border-bottom:1px solid var(--border); font-size:15.5px; }
.mrp-ev .checklist li:last-child{ border-bottom:none; }
.mrp-ev .check-ic{ flex:none; width:22px; height:22px; margin-top:1px; border-radius:50%; background:var(--green); display:flex; align-items:center; justify-content:center; }
.mrp-ev .check-ic::after{ content:""; width:5px; height:9px; border-right:2px solid #fff; border-bottom:2px solid #fff; transform:rotate(40deg) translate(-1px,-1px); }

.mrp-ev .pipeline{ display:flex; gap:0; overflow-x:auto; padding:10px 0 6px; list-style:none; margin:0; }
.mrp-ev .pipe-step{ flex:1 1 0; min-width:140px; position:relative; padding:0 16px 0 0; text-align:left;}
.mrp-ev .pipe-step:last-child{ padding-right:0; }
.mrp-ev .pipe-marker{ width:16px; height:16px; position:relative; margin-bottom:12px; }
.mrp-ev .pipe-marker span{ position:absolute; inset:0; margin:auto; transform:rotate(45deg); border-radius:2px; }
.mrp-ev .pipe-marker .m1{ width:16px; height:16px; background:var(--blue); }
.mrp-ev .pipe-marker .m2{ width:7px; height:7px; background:#fff; }
.mrp-ev .pipe-line{ position:absolute; top:8px; left:16px; right:-16px; height:2px; background:var(--border); }
.mrp-ev .pipe-step:last-child .pipe-line{ display:none; }
.mrp-ev .pipe-num{ font-size:13px; font-weight:700; color:var(--slate); text-transform:uppercase; letter-spacing:.06em; }
.mrp-ev .pipe-title{ font-weight:700; font-size:15.5px; margin-top:4px; }

.mrp-ev .cta-final{ text-align:center; margin:0 auto 30px; }
.mrp-ev .cta-final .lede{ margin:0 auto 30px; }
.mrp-ev .form-shell{ background:#fff; border:1px solid var(--border); border-radius:18px; padding:36px; box-shadow:0 24px 50px -32px rgba(30,42,50,0.3); text-align:center; }
@media (max-width:600px){.mrp-ev .form-shell{ padding:24px; }}
.mrp-ev .form-shell p{ margin:0 0 20px; color:var(--ink-soft); }

/* Fade-in on scroll. Only applied once the script runs, so content is never hidden without JavaScript. */
.mrp-ev.has-reveal .reveal{ opacity:0; transform:translateY(18px); transition:opacity .6s ease, transform .6s ease; }
.mrp-ev.has-reveal .reveal.in{ opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce){.mrp-ev .reveal{ opacity:1 !important; transform:none !important; transition:none !important; }}

.mrp-ev .eyebrow{ margin-top:0; }
.mrp-ev .facts-card-head{ display:flex; flex-wrap:wrap; align-items:center; gap:8px 0; }
.mrp-ev .eyebrow.mrp-job-filled{ color:var(--filled); }
@media (prefers-reduced-motion: reduce){ .mrp-ev.has-reveal .reveal{opacity:1;transform:none;} }

/* ---------- Accessibility (WCAG 2.1 AA): Evette approved darker colours on Oct 23, 2026 ----------
   White on the light blue (#1B92D0) was 3.5:1; small grey step labels were 2.6:1. Now all 4.5:1 or better. */
.mrp-ev .facts-card-head{ color:var(--blue-dark); }
.mrp-ev .pipe-num{ color:#5E6E7D; }

/* ---------- Site standard type and buttons (Nov 2, 2026) ----------
   Same fonts, label style and buttons as the rest of the site (mrp.css tokens and .mrp-btn). */
.mrp-ev{ font-family:var(--mrp-font-body); font-size:inherit; line-height:1.65; }
.mrp-ev h1,.mrp-ev h2{ font-weight:800; letter-spacing:-0.02em; }
.mrp-ev h3,.mrp-ev .col-heading,.mrp-ev .facts-card-head{ font-weight:800; }
.mrp-ev .eyebrow{ font-family:var(--mrp-font-head); font-weight:800; font-size:13px; letter-spacing:.1em; }
.mrp-ev .eyebrow:not(.mrp-job-filled){ color:var(--mrp-link); }
/* .mrp-ev a (above) would otherwise override the .mrp-btn colours. */
.mrp-ev .mrp-btn--green, .mrp-ev .mrp-btn--green:hover{ color:var(--mrp-blue); }
.mrp-ev .mrp-btn.big{ min-height:54px; padding:0 30px; font-size:16px; }