/* ============================================================
   Equation Recruitment — v3 design system
   Ported from design_handoff_equation_v3 (Home v3 artboard).

   Self contained on purpose: the v3 layout loads THIS FILE ONLY,
   never site.css as well. The two disagree about body font, heading
   scale and link colour, so loading both would leave the winner to
   source order. Pages still on the August design keep site.css and
   are completely unaffected by anything in here.

   Three values deliberately differ from the handoff, all for contrast.
   The handoff fails WCAG 2.1 AA for normal text at:
     pink  #E12A8C on white  4.28:1  (every primary button)
     muted #6B8090 on white  4.11:1  (labels, small print)
   Both are fixed below by using the darker brand pink for FILLS and
   the darker ink for small text. #C21F76 measures 5.60:1 and is a
   pink the logo itself contains, so this moves towards the brand.
   #E12A8C is kept for large display text, rules and badges, where
   the large-text threshold applies.
   ============================================================ */

:root{
  --navy:#153A52; --navy-deep:#0E2A3D; --ink-deep:#06131F;
  --blue:#1878A9; --blue-deep:#12608A; --blue-sky:#3E9FD6; --blue-light:#5FC3F5; --blue-tint:#E3F0F8;
  --pink:#E12A8C; --pink-deep:#C21F76; --pink-tint:#FCE7F2;
  --yellow:#F2E20D;
  --ink:#14283A; --ink-2:#3D5364; --muted:#6B8090;
  --line:#D9E2EA; --line-strong:#C2CFDA; --line-v3:#CBD6E0;
  --bg:#F1F5F8; --bg-2:#E6EDF3; --bg-hero:#EAF2F8; --surface:#fff;
  --error:#C8102E;
  --focus:0 0 0 3px rgba(24,120,169,.28);

  --font-head:"Jost",system-ui,-apple-system,"Segoe UI",sans-serif;
  --font-body:"Public Sans",system-ui,-apple-system,"Segoe UI",sans-serif;

  --r-badge:6px; --r-control:10px; --r-card:14px; --r-panel:20px; --r-pill:999px;
  --shadow-sm:0 1px 2px rgba(20,40,58,.06);
  --shadow-md:0 12px 30px rgba(6,19,31,.06);
  --shadow-lg:0 20px 50px rgba(20,40,58,.12);
  --shadow-cta:0 8px 20px rgba(194,31,118,.25);

  --glass:rgba(255,255,255,.55); --glass-blur:blur(24px); --glass-line:rgba(255,255,255,.7);
  --photo-filter:saturate(1.5) contrast(1.02) brightness(1.15);
  --wrap:1280px;
}

*{box-sizing:border-box}
/* iOS Safari inflates text on its own in portrait; 100% keeps the sizes we wrote.
   Does not stop the user pinch zooming. */
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{margin:0;background:var(--surface);color:var(--ink);
     font-family:var(--font-body);font-size:16px;line-height:1.55;-webkit-font-smoothing:antialiased}
img{max-width:100%}
a{color:var(--blue);text-decoration:none}
a:hover{color:var(--blue-deep);text-decoration:underline}
h1,h2,h3,h4{font-family:var(--font-head);margin:0;color:var(--ink-deep);text-wrap:pretty}
:focus-visible{outline:none;box-shadow:var(--focus);border-radius:4px}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;scroll-behavior:auto}}

.v3-wrap{max-width:var(--wrap);margin:0 auto;padding:0 32px;width:100%}
.v3-eyebrow{display:inline-flex;align-items:center;gap:10px;font-size:13px;font-weight:600;
  letter-spacing:.12em;text-transform:uppercase;color:var(--navy)}
.v3-eyebrow::before{content:"";width:32px;height:2px;background:var(--pink);border-radius:1px;flex:none}
.v3-eyebrow.pink{color:var(--pink-deep)}

/* ---------- buttons ---------- */
.v3-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:44px;padding:0 22px;
  border:0;border-radius:var(--r-control);font-family:var(--font-body);font-size:15px;font-weight:600;
  cursor:pointer;transition:background .15s,border-color .15s,box-shadow .15s,color .15s;white-space:nowrap}
.v3-btn:hover{text-decoration:none}
.v3-btn.lg{height:48px;padding:0 26px}
.v3-btn.pink{background:var(--pink-deep);color:#fff;box-shadow:var(--shadow-cta)}
.v3-btn.pink:hover{background:#A81A66;color:#fff}
.v3-btn.navy{background:var(--navy-deep);color:#fff}
.v3-btn.navy:hover{background:var(--ink-deep);color:#fff}
.v3-btn.outline{background:transparent;color:var(--navy-deep);border:1px solid rgba(21,58,82,.3)}
.v3-btn.outline:hover{border-color:var(--navy-deep);background:rgba(21,58,82,.04);color:var(--navy-deep)}
.v3-btn.outline-light{background:transparent;color:#fff;border:1px solid rgba(255,255,255,.5)}
.v3-btn.outline-light:hover{background:rgba(255,255,255,.1);color:#fff}
.v3-btn.ring{background:transparent;color:var(--ink-deep);border:2px solid var(--ink-deep);border-radius:var(--r-pill);height:48px}
.v3-btn.ring:hover{background:var(--ink-deep);color:#fff}

/* ---------- header ---------- */
.v3-header{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.92);
  backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
  border-bottom:1px solid rgba(21,58,82,.1)}
.v3-header .v3-wrap{min-height:80px;display:flex;align-items:center;gap:20px;flex-wrap:wrap;padding-top:10px;padding-bottom:10px}
.v3-brand{display:inline-flex;align-items:center;flex:none}
.v3-brand img{height:46px;width:auto;display:block}
.v3-nav{display:flex;align-items:center;gap:2px;flex-wrap:wrap;margin-left:auto}
.v3-nav a{padding:10px 12px;font-size:15px;font-weight:500;color:var(--navy);
  border-bottom:2px solid transparent;transition:color .15s,border-color .15s}
.v3-nav a:hover{color:var(--pink-deep);text-decoration:none}
.v3-nav a.active{font-weight:600;border-bottom-color:var(--pink)}
.v3-actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.v3-actions .v3-btn{height:42px}

/* ---------- hero ---------- */
.v3-hero{position:relative;overflow:hidden;background:var(--bg-hero);color:var(--ink-deep);
  min-height:820px;display:flex;align-items:flex-end}
.v3-hero-photo{position:absolute;inset:0;background-size:cover;background-position:center;
  filter:saturate(1.65) contrast(1.02) brightness(1.15)}
.v3-hero-wash-y{position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(255,255,255,.35) 0%,rgba(255,255,255,0) 35%,rgba(255,255,255,.2) 100%)}
.v3-hero-wash-x{position:absolute;inset:0;
  background:linear-gradient(90deg,rgba(255,255,255,.94) 0%,rgba(255,255,255,.82) 40%,rgba(255,255,255,.35) 62%,rgba(255,255,255,.05) 100%)}
.v3-hero-glow{position:absolute;width:900px;height:900px;left:-300px;bottom:-500px;border-radius:50%;
  background:radial-gradient(circle,rgba(95,195,245,.45) 0%,rgba(95,195,245,0) 60%);pointer-events:none}
.v3-hero-grid{position:relative;max-width:var(--wrap);width:100%;margin:0 auto;padding:180px 32px 88px;
  display:grid;grid-template-columns:minmax(0,1.2fr) minmax(320px,.8fr);gap:56px;align-items:end}
.v3-hero-copy{display:flex;flex-direction:column;gap:30px;min-width:0}
.v3-hero h1{font-size:64px;line-height:1.02;font-weight:600;letter-spacing:-.025em;color:var(--navy-deep)}
.v3-lede{margin:0;font-size:18px;line-height:1.55;color:var(--navy);font-weight:500;max-width:540px;text-wrap:pretty}

/* search */
.v3-search{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1.3fr) auto;gap:6px;
  background:var(--glass);backdrop-filter:var(--glass-blur);-webkit-backdrop-filter:var(--glass-blur);
  padding:6px;border-radius:var(--r-card);max-width:760px;border:1px solid var(--glass-line);
  box-shadow:var(--shadow-md)}
/* 16px minimum on every control: iOS zooms in on anything smaller and never zooms back out. */
.v3-search input,.v3-search select{height:50px;padding:0 18px;border:0;border-radius:var(--r-control);
  font-family:var(--font-body);font-size:16px;color:var(--ink);background:transparent;outline:none;min-width:0}
.v3-search .divider{border-left:1px solid rgba(6,19,31,.12);border-radius:0}
.v3-search input:focus,.v3-search select:focus{background:rgba(255,255,255,.7)}
.v3-stats{display:flex;gap:32px;flex-wrap:wrap;font-size:15px;color:var(--ink-2)}
.v3-stats strong{color:var(--ink-deep);font-weight:700;font-family:var(--font-head);font-size:22px;margin-right:6px}

/* just in panel */
.v3-justin{display:flex;flex-direction:column;padding:8px 26px 18px;border-radius:var(--r-panel);
  background:var(--glass);backdrop-filter:var(--glass-blur);-webkit-backdrop-filter:var(--glass-blur);
  border:1px solid var(--glass-line);box-shadow:var(--shadow-lg)}
.v3-justin .label{font-size:12px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;
  color:var(--ink-2);padding:14px 4px 10px}
.v3-justin a.row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:3px 14px;align-items:center;
  padding:16px 4px;border-top:1px solid rgba(6,19,31,.1);color:var(--ink-deep)}
.v3-justin a.row:hover{color:var(--pink-deep);text-decoration:none}
.v3-justin .t{font-family:var(--font-head);font-size:18px;font-weight:600;letter-spacing:-.01em}
.v3-justin .m{font-size:14px;color:var(--ink-2);grid-column:1/-1}
.v3-justin .all{display:inline-flex;align-items:center;gap:8px;padding:16px 4px 0;
  border-top:1px solid rgba(6,19,31,.1);font-size:14px;font-weight:600;color:var(--ink-deep)}
.v3-justin .all:hover{color:var(--pink-deep);text-decoration:none}
.v3-justin .empty{padding:16px 4px;border-top:1px solid rgba(6,19,31,.1);font-size:14px;color:var(--ink-2)}

/* badges */
.v3-badge{display:inline-flex;align-items:center;height:22px;padding:0 9px;border-radius:var(--r-badge);
  font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;white-space:nowrap;color:#fff}
.v3-badge.pink{background:var(--pink-deep)}
.v3-badge.blue{background:var(--blue)}
.v3-badge.grey{background:var(--ink-2)}

/* ---------- keyword ticker ---------- */
.v3-ticker{background:var(--bg);border-top:1px solid rgba(21,58,82,.08);
  border-bottom:1px solid rgba(21,58,82,.08);overflow:hidden;position:relative}
.v3-ticker .head{max-width:var(--wrap);margin:0 auto;padding:14px 32px 0;display:flex;
  justify-content:space-between;align-items:baseline;gap:12px;flex-wrap:wrap}
.v3-ticker .head span{font-size:12px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-2)}
.v3-ticker .head a{font-size:13px;font-weight:600}
.v3-ticker .rail{display:flex;gap:8px;padding:12px 0 16px;width:max-content;
  animation:v3-ticker 90s linear infinite}
.v3-ticker:hover .rail{animation-play-state:paused}
.v3-ticker .chip{display:inline-flex;align-items:center;height:34px;padding:0 14px;border-radius:8px;
  border:1px solid rgba(21,58,82,.18);color:var(--navy);font-size:13px;font-weight:500;
  white-space:nowrap;background:#fff;transition:border-color .15s,color .15s}
.v3-ticker .chip:hover{border-color:var(--pink-deep);color:var(--pink-deep);text-decoration:none}
@keyframes v3-ticker{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.v3-ticker .rail{animation:none;width:auto;flex-wrap:wrap}}

/* ---------- section scaffolding ---------- */
.v3-section{background:var(--surface)}
.v3-section .inner{max-width:var(--wrap);margin:0 auto;padding:88px 32px 0;display:flex;flex-direction:column;gap:36px}
.v3-section.last .inner{padding-bottom:88px}
.v3-sec-head{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;flex-wrap:wrap}
.v3-sec-head .left{display:flex;flex-direction:column;gap:10px}
.v3-h2{font-size:52px;line-height:1;font-weight:700;letter-spacing:-.035em;color:var(--ink-deep)}

/* ---------- sector tiles ---------- */
.v3-sectors{display:grid;grid-template-columns:repeat(auto-fit,minmax(340px,1fr));gap:16px}
.v3-tile{position:relative;overflow:hidden;display:flex;flex-direction:column;justify-content:flex-end;
  min-height:400px;padding:28px;border-radius:var(--r-panel);color:#fff;box-shadow:0 24px 60px rgba(6,19,31,.18)}
.v3-tile:hover{text-decoration:none;color:#fff}
.v3-tile .photo{position:absolute;inset:0;background-size:cover;background-position:center;
  filter:saturate(1.3) contrast(1.1);transition:transform .4s}
.v3-tile:hover .photo{transform:scale(1.04)}
.v3-tile .veil{position:absolute;inset:0}
.v3-tile.blue .veil{background:linear-gradient(180deg,rgba(24,120,169,0) 30%,rgba(24,120,169,.55) 70%,#0E4E78 100%)}
.v3-tile.pink .veil{background:linear-gradient(180deg,rgba(225,42,140,0) 30%,rgba(225,42,140,.55) 70%,#8E135A 100%)}
.v3-tile.navy .veil{background:linear-gradient(180deg,rgba(21,58,82,0) 30%,rgba(21,58,82,.6) 70%,#06131F 100%)}
.v3-tile .body{position:relative;display:flex;flex-direction:column;gap:8px}
.v3-tile .count{font-family:var(--font-head);font-size:44px;font-weight:700;letter-spacing:-.03em;
  line-height:1;color:var(--yellow)}
.v3-tile .name{font-family:var(--font-head);font-size:26px;font-weight:600;letter-spacing:-.02em;line-height:1.1}
.v3-tile .blurb{font-size:15px;color:rgba(255,255,255,.85)}
.v3-tile .go{display:inline-flex;align-items:center;gap:8px;margin-top:6px;
  font-size:15px;font-weight:600;color:var(--yellow)}

/* ---------- dark "three parts" band ---------- */
.v3-dark{position:relative;overflow:hidden;margin-top:88px;color:#fff;
  background:linear-gradient(160deg,#06131F 0%,#153A52 45%,#0E4E78 100%)}
.v3-dark .inner{max-width:var(--wrap);margin:0 auto;padding:88px 32px;display:flex;flex-direction:column;gap:40px;position:relative}
.v3-dark h2{color:#fff;font-size:56px;line-height:1.05;font-weight:700;letter-spacing:-.035em}
.v3-dark .v3-eyebrow{color:#5FC3F5}
.v3-steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:16px}
.v3-step{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);
  border-radius:var(--r-control);padding:26px;display:flex;flex-direction:column;gap:14px}
.v3-step .rule{width:40px;height:2px;border-radius:1px}
.v3-step .num{font-family:var(--font-head);font-size:14px;font-weight:600;letter-spacing:.2em;color:rgba(255,255,255,.7)}
.v3-step h3{color:#fff;font-size:22px;font-weight:600;letter-spacing:-.02em}
.v3-step p{margin:0;font-size:15px;line-height:1.55;color:rgba(255,255,255,.8)}
.v3-equals{display:flex;align-items:center;gap:14px;flex-wrap:wrap;font-size:15px;color:rgba(255,255,255,.8)}
.v3-equals b{font-family:var(--font-head);font-size:24px;font-weight:600;color:var(--yellow)}

/* ---------- employer band ---------- */
.v3-employer{position:relative;overflow:hidden;border-radius:24px;color:#fff;min-height:420px;display:flex;align-items:center}
.v3-employer .photo{position:absolute;inset:0;background-size:cover;background-position:center;filter:saturate(1.3) contrast(1.05)}
/* The handoff fades this wash to .25 at the right edge, but the three facts sit over exactly
   that end of the photo, so their sub-labels landed on whatever the image happened to be doing.
   Holding it at .55 keeps the photograph clearly visible and makes the text legible whatever
   picture is behind it. */
.v3-employer .veil{position:absolute;inset:0;
  background:linear-gradient(90deg,#8E135A 0%,rgba(142,19,90,.88) 45%,rgba(142,19,90,.55) 100%)}
.v3-employer .inner2{position:relative;display:grid;grid-template-columns:minmax(0,1.3fr) minmax(240px,.7fr);
  gap:40px;padding:56px;width:100%;align-items:center}
.v3-employer h2{color:#fff;font-size:56px;line-height:1.02;font-weight:700;letter-spacing:-.035em;max-width:560px}
.v3-employer .ctas{display:flex;gap:12px;flex-wrap:wrap;margin-top:26px}
.v3-facts{display:flex;flex-direction:column;gap:22px}
.v3-fact{border-left:3px solid var(--yellow);padding-left:16px}
.v3-fact b{display:block;font-family:var(--font-head);font-size:26px;font-weight:600;letter-spacing:-.02em}
.v3-fact span{font-size:14px;color:rgba(255,255,255,.85)}

/* ---------- candidate / temp tiles ---------- */
.v3-two{display:grid;grid-template-columns:repeat(auto-fit,minmax(340px,1fr));gap:16px}
.v3-wide{position:relative;overflow:hidden;display:flex;flex-direction:column;justify-content:flex-end;
  min-height:420px;padding:36px;border-radius:var(--r-panel);color:#fff;box-shadow:0 24px 60px rgba(6,19,31,.18)}
.v3-wide:hover{text-decoration:none;color:#fff}
.v3-wide .photo{position:absolute;inset:0;background-size:cover;background-position:center;filter:saturate(1.3) contrast(1.05)}
.v3-wide.blue .veil{position:absolute;inset:0;background:linear-gradient(180deg,rgba(14,78,120,0) 25%,rgba(14,78,120,.7) 65%,#0E4E78 100%)}
.v3-wide.navy .veil{position:absolute;inset:0;background:linear-gradient(180deg,rgba(6,19,31,0) 25%,rgba(6,19,31,.7) 65%,#06131F 100%)}
.v3-wide .body{position:relative;display:flex;flex-direction:column;gap:10px}
.v3-wide h3{color:#fff;font-size:40px;line-height:1.05;font-weight:600;letter-spacing:-.03em}
.v3-wide p{margin:0;font-size:15px;color:rgba(255,255,255,.85);max-width:420px}
.v3-wide .go{display:inline-flex;align-items:center;gap:8px;font-size:15px;font-weight:600;color:#fff;margin-top:4px}

/* ---------- news ---------- */
.v3-news{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:20px}
.v3-card{display:flex;flex-direction:column;gap:14px;color:var(--ink-deep)}
.v3-card:hover{text-decoration:none;color:var(--pink-deep)}
.v3-card .shot{position:relative;aspect-ratio:16/10;border-radius:18px;overflow:hidden;
  background-size:cover;background-position:center;box-shadow:var(--shadow-md)}
.v3-card .pill{position:absolute;left:14px;top:14px;display:inline-flex;align-items:center;height:24px;
  padding:0 11px;border-radius:var(--r-pill);background:rgba(255,255,255,.92);color:var(--navy);
  font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase}
.v3-card .date{font-size:13px;color:var(--ink-2)}
.v3-card h3{font-size:23px;line-height:1.2;font-weight:600;letter-spacing:-.02em}

/* ---------- footer ---------- */
.v3-footer{background:var(--bg);border-top:1px solid #D5DEE6;margin-top:88px}
.v3-footer .inner{max-width:var(--wrap);margin:0 auto;padding:56px 32px;
  display:grid;grid-template-columns:minmax(240px,1.3fr) repeat(auto-fit,minmax(160px,1fr));gap:40px}
.v3-footer img{height:44px;width:auto;display:block;margin-bottom:16px}
.v3-footer p{margin:0;font-size:14px;line-height:1.6;color:var(--ink-2);max-width:320px}
.v3-footer .col h4{font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--pink-deep);margin-bottom:14px}
.v3-footer .col a{display:block;padding:5px 0;font-size:15px;color:var(--navy)}
.v3-footer .col a:hover{color:var(--pink-deep)}
.v3-footer .base{border-top:1px solid #D5DEE6}
.v3-footer .base .row{max-width:var(--wrap);margin:0 auto;padding:20px 32px;display:flex;
  justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:13px;color:var(--ink-2)}
.v3-footer .base a{color:var(--ink-2)}
.v3-footer .legal{display:flex;gap:6px 14px;flex-wrap:wrap;justify-content:flex-end}
.v3-footer .legal a{white-space:nowrap}
.v3-footer .legal a:hover{color:var(--pink-deep)}
@media (max-width:760px){.v3-footer .legal{justify-content:flex-start}}

/* ---------- responsive ---------- */
@media (max-width:1080px){
  .v3-hero-grid{grid-template-columns:1fr;gap:40px;padding:140px 32px 72px}
  .v3-hero{min-height:0}
  .v3-hero h1{font-size:48px}
  .v3-employer .inner2{grid-template-columns:1fr;padding:40px}
  .v3-employer h2{font-size:42px}
  .v3-h2,.v3-dark h2{font-size:40px}
}
@media (max-width:760px){
  .v3-wrap,.v3-hero-grid,.v3-section .inner,.v3-dark .inner,.v3-footer .inner,.v3-ticker .head{padding-left:20px;padding-right:20px}
  .v3-hero-grid{padding-top:120px;padding-bottom:56px}
  .v3-hero h1{font-size:38px}
  .v3-lede{font-size:16px}
  .v3-search{grid-template-columns:1fr}
  .v3-search .divider{border-left:0;border-top:1px solid rgba(6,19,31,.12)}
  .v3-search .v3-btn{width:100%}
  .v3-h2,.v3-dark h2,.v3-employer h2{font-size:32px}
  .v3-wide h3{font-size:30px}
  .v3-section .inner{padding-top:56px}
  .v3-dark{margin-top:56px}
  .v3-footer .inner{grid-template-columns:1fr;gap:28px}

  /* The nav WRAPS on a phone, it does not disappear. Hiding it without shipping a menu
     would strand mobile visitors with no route to Jobs, Candidates, Employers, News or
     About, which is most of the site and most of the traffic. The handoff says the same:
     "Nav must wrap without overflowing (flex-wrap:wrap, header grows)". */
  /* Wrapping makes the header tall (three rows on a narrow screen). Tall AND sticky would
     hold a quarter of the phone hostage on every scroll, so on mobile it scrolls away
     instead. Sticky is a convenience on a desktop; here it would be a tax. */
  .v3-header{position:static}
  .v3-header .v3-wrap{justify-content:space-between;padding-top:8px;padding-bottom:8px}
  .v3-nav{order:3;width:100%;margin-left:0;gap:0 4px;
    border-top:1px solid rgba(21,58,82,.1);padding-top:6px;margin-top:4px}
  .v3-nav a{padding:8px 10px;font-size:14px}
  .v3-actions{gap:8px}
  .v3-actions .v3-btn{height:38px;padding:0 14px;font-size:14px}
  .v3-brand img{height:38px}
}