/* ============================================================
   Equation Recruitment — public site design system
   Corporate confidence (Hays polish) with local warmth (K2 feel)
   Palette: deep navy ground, Equation blue primary,
   logo pink/gold reserved for micro accents only.
   ============================================================ */
:root{
  --navy:#0B2038; --navy-2:#122C4C; --navy-3:#1A3A61;
  --blue:#1B75BB; --blue-deep:#0E5C99; --sky:#3FA0E8; --sky-soft:#E8F3FC;
  --pink:#EC008C; --pink-soft:#FDE7F3; --gold:#FFD400; --gold-soft:#FFF8DB;
  --ink:#17253C; --ink-soft:#47586F; --ink-faint:#7A8AA0;
  --ground:#FFFFFF; --wash:#F4F7FA; --wash-2:#EBF1F7; --line:#DEE6EF; --line-soft:#EAF0F6;
  --radius:14px; --radius-sm:9px;
  --shadow-1:0 1px 2px rgba(11,32,56,.06),0 6px 18px rgba(11,32,56,.07);
  --shadow-2:0 2px 4px rgba(11,32,56,.08),0 18px 44px rgba(11,32,56,.13);
  --wrap:1180px;
  --font:"Archivo",-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
}
*{box-sizing:border-box}
/* text-size-adjust: iOS Safari inflates font sizes on its own in portrait when it decides a block is
   too narrow, so elements come out WIDER than the CSS says and overlap or run off to the right — on the
   phone only, which is why it never reproduces in a desktop browser emulating one. 100% keeps the sizes
   we actually wrote. This does NOT stop the user pinch-zooming; it only stops Safari resizing text
   behind our back. */
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{margin:0;font-family:var(--font);font-size:17px;line-height:1.6;color:var(--ink);background:var(--ground);-webkit-font-smoothing:antialiased}
img{max-width:100%}
a{color:var(--blue);text-decoration:none}
a:hover{text-decoration:underline}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 24px}
:focus-visible{outline:3px solid var(--sky);outline-offset:2px;border-radius:4px}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* ---------- type scale ---------- */
h1,h2,h3,h4{font-family:var(--font);line-height:1.12;letter-spacing:-.022em;margin:0 0 .45em;color:var(--ink);text-wrap:balance}
h1{font-size:clamp(2.3rem,5.2vw,3.7rem);font-weight:800}
h2{font-size:clamp(1.65rem,3.4vw,2.35rem);font-weight:750}
h3{font-size:clamp(1.15rem,2vw,1.4rem);font-weight:700}
.lede{font-size:clamp(1.05rem,1.8vw,1.25rem);color:var(--ink-soft);max-width:62ch}
.eyebrow{font-size:.78rem;font-weight:700;letter-spacing:.17em;text-transform:uppercase;color:var(--blue);display:flex;align-items:center;gap:12px;margin-bottom:14px}
.eyebrow::before{content:"";width:30px;height:2px;background:var(--blue);border-radius:2px}
.center .eyebrow{justify-content:center}
.center .eyebrow::before{display:none}

/* ---------- top bar ---------- */
.topbar{background:var(--navy);color:#B9C6D6;font-size:12.5px}
.topbar .wrap{display:flex;justify-content:space-between;align-items:center;min-height:32px;gap:18px;max-width:1200px;padding:0 40px}
.topbar a{color:#B9C6D6;font-weight:400}
.topbar .tb-right{display:flex;gap:18px;flex-wrap:wrap;align-items:center}
.topbar .tb-right .tel{color:#fff;font-weight:600}
.topbar .tb-right .signin{color:var(--sky);font-weight:600}
@media (max-width:700px){.topbar .wrap>div:first-child{display:none}}

/* ---------- header / nav ---------- */
.site-header{position:sticky;top:0;z-index:60;background:rgba(255,255,255,.96);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.site-header .wrap{display:flex;align-items:center;gap:26px;min-height:68px;max-width:1200px;padding:0 40px}
@media (max-width:700px){.site-header .wrap,.topbar .wrap{padding:0 20px}}
.brand{display:flex;align-items:center;gap:12px;font-weight:800;font-size:1.3rem;letter-spacing:-.02em;color:var(--ink);text-decoration:none}
.brand:hover{text-decoration:none}
.brand .mark{width:40px;height:40px;flex:none}
.brand .b-sub{display:block;font-size:.62rem;font-weight:700;letter-spacing:.34em;color:var(--blue);text-transform:uppercase;margin-top:1px}
nav.main{margin-left:auto;display:flex;align-items:center;gap:4px}
nav.main>ul{display:flex;list-style:none;margin:0;padding:0;gap:6px}
nav.main a{display:block;padding:8px 8px;color:var(--ink);font-weight:600;font-size:14.5px;border-radius:8px;border-bottom:2px solid transparent}
nav.main a:hover{color:var(--blue-deep);text-decoration:none}
nav.main>ul>li>a.active{color:var(--pink);border-bottom-color:var(--pink);border-radius:0;padding-bottom:3px;margin-bottom:3px}
nav.main li{position:relative}
nav.main li>ul{display:none;position:absolute;top:100%;left:0;background:#fff;border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow-2);min-width:290px;padding:8px;z-index:70}
nav.main li:hover>ul,nav.main li:focus-within>ul{display:block}
nav.main li>ul a{padding:10px 14px;border-radius:8px;font-weight:500}
/* Buttons: pink primary, 9px radius (design tokens 22 Aug 2026). Everything else is a variant. */
.cta-btn{display:inline-block;background:var(--pink);color:#fff!important;font-weight:700;font-size:14px;line-height:1.3;padding:10px 18px;border-radius:var(--radius-sm);border:0;cursor:pointer;font-family:inherit;text-align:center;transition:filter .15s ease,transform .15s ease}
.cta-btn:hover{filter:brightness(1.06);transform:translateY(-1px);text-decoration:none}
.cta-btn.lg{font-size:15px;font-weight:800;padding:12px 24px}
.cta-btn.blue{background:var(--blue)}
.cta-btn.navy{background:var(--navy)}
.cta-btn.ghost{background:transparent;color:var(--ink)!important;border:1px solid var(--line)}
.cta-btn.ghost:hover{background:var(--wash)}
.cta-btn.on-dark{background:var(--pink);color:#fff!important}
.cta-btn.ghost.on-dark{background:transparent;color:#fff!important;border:1.5px solid rgba(255,255,255,.35)}
.cta-btn.ghost.on-dark:hover{background:rgba(255,255,255,.1)}
.cta-btn.block{display:block;width:100%}

/* mobile nav */
.nav-toggle{display:none;margin-left:auto;background:none;border:0;font-size:1.6rem;color:var(--ink);cursor:pointer;padding:8px}
@media (max-width:960px){
  /* The burger menu opened as a ~116px sliver showing one link (Jason, 24 Aug 2026).
     Cause: .site-header has backdrop-filter, and backdrop-filter — like transform and filter — makes an
     element the CONTAINING BLOCK for position:fixed descendants. So the nav's inset:0 below resolved
     against the 69px-tall HEADER instead of the viewport, while its ~830px of links scrolled inside it.
     The header is rgba(255,255,255,.96), i.e. 96% opaque, so dropping the blur on mobile costs nothing
     visible and hands the nav back to the viewport. Do NOT re-add backdrop-filter here without moving
     the nav out of the header first. */
  .site-header{backdrop-filter:none;-webkit-backdrop-filter:none}
  nav.main{position:fixed;inset:0;top:0;background:#fff;display:none;padding:90px 26px 26px;overflow:auto}
  nav.main.open{display:block}
  nav.main>ul{flex-direction:column;gap:2px}
  nav.main a{font-size:1.15rem;padding:13px 10px}
  nav.main li>ul{display:block;position:static;border:0;box-shadow:none;padding-left:14px}
  .nav-toggle{display:block;z-index:80;position:relative}
  .site-header .cta-btn{display:none}
}

/* ---------- hero ---------- */
.hero{position:relative;color:#fff;overflow:hidden;
  background:
    radial-gradient(680px 680px at 108% -12%, rgba(63,160,232,.55), transparent 62%),
    radial-gradient(540px 540px at -6% 112%, rgba(229,48,143,.32), transparent 60%),
    radial-gradient(420px 420px at 88% 96%, rgba(255,194,14,.20), transparent 58%),
    linear-gradient(135deg,var(--navy) 0%,var(--navy-2) 55%,var(--navy-3) 100%)}
.hero::before{content:"";position:absolute;inset:0;background:radial-gradient(900px 380px at 50% 0%, rgba(255,255,255,.05), transparent 70%)}
.hero::after{content:"3C=e";position:absolute;right:-40px;bottom:-90px;font-size:22rem;font-weight:800;letter-spacing:-.05em;color:rgba(255,255,255,.035);pointer-events:none;line-height:1}
.hero .wrap{position:relative;padding:104px 24px 96px;max-width:var(--wrap)}
.hero h1{color:#fff;max-width:15ch}
.hero .lede{color:#C6D6E8;margin:18px 0 34px}
.hero .eyebrow{color:var(--sky)}
.hero .eyebrow::before{background:var(--sky)}
.hero .hero-ctas{display:flex;gap:14px;flex-wrap:wrap}
.hero .formula{margin-top:44px;font-size:.95rem;color:#9FB6CE}
.hero .formula b{color:#fff}
.hero .formula .fx{color:var(--gold);font-weight:800}

/* ---------- stat band ---------- */
.stats{background:#fff;border-bottom:1px solid var(--line-soft)}
.stats .wrap{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:22px;padding:40px 24px}
.stat{text-align:center}
.stat .n{font-size:clamp(1.9rem,3.4vw,2.7rem);font-weight:800;letter-spacing:-.03em;color:var(--blue);font-variant-numeric:tabular-nums}
.stat .l{font-size:.92rem;color:var(--ink-soft);font-weight:600}

/* ---------- sections ---------- */
section.band{padding:92px 0}
section.band.wash{background:var(--wash)}
section.band.dark{background:var(--navy);color:#fff}
section.band.dark h2{color:#fff}
section.band.dark .lede{color:#C6D6E8}
.section-head{max-width:720px;margin-bottom:44px}
.section-head.center{margin-left:auto;margin-right:auto;text-align:center}
.section-head h2::after{content:"";display:block;width:74px;height:5px;border-radius:3px;margin-top:16px;background:linear-gradient(90deg,var(--pink),var(--gold),var(--blue))}
.section-head.center h2::after{margin-left:auto;margin-right:auto}
.checklist li:nth-child(4n+1)::before{border-color:var(--blue);background:var(--sky-soft)}
.checklist li:nth-child(4n+2)::before{border-color:var(--pink);background:var(--pink-soft)}
.checklist li:nth-child(4n+2)::after{border-color:var(--pink)}
.checklist li:nth-child(4n+3)::before{border-color:#D9B300;background:var(--gold-soft)}
.checklist li:nth-child(4n+3)::after{border-color:#C7A400}
.checklist li:nth-child(4n+4)::before{border-color:var(--sky);background:var(--sky-soft)}
.checklist li:nth-child(4n+4)::after{border-color:var(--sky)}
.quote-grid .quote:nth-child(2)::before{color:var(--pink)}
.quote-grid .quote:nth-child(3)::before{color:var(--sky)}
.job-card .pill{background:var(--sky-soft);color:var(--blue-deep)}
.job-card .pill.temp{background:var(--gold-soft);color:#7A6300}
.eyebrow.alt-pink{color:var(--pink)}.eyebrow.alt-pink::before{background:var(--pink)}
.eyebrow.alt-gold{color:#C7A400}.eyebrow.alt-gold::before{background:var(--gold)}

/* ---------- sector cards ---------- */
.card-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:22px}
.sector-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:30px 28px;box-shadow:var(--shadow-1);display:flex;flex-direction:column;gap:10px;transition:transform .18s ease,box-shadow .18s ease;position:relative;overflow:hidden}
.sector-card::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--blue);transition:width .18s ease}
.card-grid .sector-card:nth-child(2)::before{background:var(--gold)}
.card-grid .sector-card:nth-child(3)::before{background:var(--pink)}
.card-grid .sector-card:nth-child(4)::before{background:var(--sky)}
.card-grid .sector-card:nth-child(5)::before{background:linear-gradient(180deg,var(--pink),var(--gold),var(--blue))}
.sector-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-2);text-decoration:none}
.sector-card:hover::before{width:7px}
.sector-card h3{margin:0;color:var(--ink)}
.sector-card p{margin:0;color:var(--ink-soft);font-size:.98rem}
.sector-card .go{margin-top:auto;padding-top:14px;font-weight:700;color:var(--blue);font-size:.95rem}
.sector-card:hover .go{color:var(--blue-deep)}

/* ---------- split feature ---------- */
.split{display:grid;grid-template-columns:1.05fr .95fr;gap:64px;align-items:center}
@media (max-width:900px){.split{grid-template-columns:1fr;gap:36px}}
.split .visual{background:linear-gradient(150deg,var(--navy-2),var(--blue-deep));border-radius:var(--radius);min-height:380px;box-shadow:var(--shadow-2);position:relative;overflow:hidden;display:flex;align-items:center;justify-content:center}
.split .visual.light{background:
  radial-gradient(420px 300px at 82% 12%, rgba(63,160,232,.16), transparent 60%),
  radial-gradient(360px 280px at 12% 88%, rgba(229,48,143,.10), transparent 60%),
  radial-gradient(300px 240px at 85% 85%, rgba(255,194,14,.12), transparent 58%),
  #fff;
  border:1px solid var(--line)}
.stats .stat:nth-child(2) .n{color:var(--pink)}
.stats .stat:nth-child(3) .n{color:var(--gold)}
.stats .stat:nth-child(4) .n{color:var(--sky)}
.split .visual .big-fx{font-size:7rem;font-weight:800;color:rgba(255,255,255,.92);letter-spacing:-.04em}
.split .visual .big-fx small{display:block;font-size:1rem;font-weight:600;letter-spacing:.24em;text-transform:uppercase;color:var(--sky);text-align:center;margin-top:10px}
.checklist{list-style:none;margin:22px 0 0;padding:0;display:flex;flex-direction:column;gap:14px}
.checklist li{position:relative;padding-left:38px;color:var(--ink-soft)}
.checklist li b{color:var(--ink)}
.checklist li::before{content:"";position:absolute;left:0;top:2px;width:24px;height:24px;border-radius:50%;background:var(--sky-soft);border:2px solid var(--blue)}
.checklist li::after{content:"";position:absolute;left:7px;top:9px;width:10px;height:6px;border-left:2.5px solid var(--blue);border-bottom:2.5px solid var(--blue);transform:rotate(-45deg)}

/* ---------- jobs strip ---------- */
.job-row{display:flex;flex-direction:column;gap:14px}
.job-card{display:flex;align-items:center;gap:22px;background:#fff;border:1px solid var(--line);border-radius:var(--radius-sm);padding:20px 24px;box-shadow:var(--shadow-1);transition:transform .15s ease,box-shadow .15s ease}
.job-card:hover{transform:translateY(-2px);box-shadow:var(--shadow-2);text-decoration:none}
.job-card .jc-main{flex:1;min-width:0}
.job-card h3{margin:0;font-size:1.08rem}
.job-card .jc-meta{display:flex;gap:18px;flex-wrap:wrap;color:var(--ink-soft);font-size:.9rem;margin-top:4px}
.job-card .pill{flex:none;font-size:.78rem;font-weight:700;padding:5px 13px;border-radius:999px;background:var(--sky-soft);color:var(--blue-deep)}
.job-card .pill.temp{background:#FFF4D6;color:#8A6A0C}
.job-card .go{flex:none;font-weight:700;color:var(--blue)}

/* ---------- testimonials ---------- */
.quote-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:22px}
.quote{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:30px;box-shadow:var(--shadow-1)}
.band.dark .quote{background:var(--navy-2);border-color:var(--navy-3)}
.quote p{margin:0 0 14px;font-size:1.02rem;line-height:1.65;color:var(--ink-soft)}
.band.dark .quote p{color:#C6D6E8}
.quote .who{font-weight:700;font-size:.88rem;color:var(--blue)}
.band.dark .quote .who{color:var(--sky)}
.quote::before{content:"\201C";display:block;font-size:3rem;line-height:.6;color:var(--gold);font-weight:800;margin-bottom:14px}

/* ---------- CTA band ---------- */
.cta-band{background:linear-gradient(120deg,var(--blue-deep),var(--blue));color:#fff;border-radius:var(--radius);padding:56px 54px;display:flex;align-items:center;justify-content:space-between;gap:34px;flex-wrap:wrap;box-shadow:var(--shadow-2)}
.cta-band h2{color:#fff;margin:0 0 6px}
.cta-band p{margin:0;color:#DCEBF8}
.cta-band .actions{display:flex;gap:14px;flex-wrap:wrap}

/* ---------- page hero (inner pages) ---------- */
.page-hero{background:linear-gradient(135deg,var(--navy),var(--navy-3));color:#fff;position:relative;overflow:hidden}
.page-hero::after{content:"3C=e";position:absolute;right:-20px;bottom:-70px;font-size:13rem;font-weight:800;color:rgba(255,255,255,.04);line-height:1;pointer-events:none}
.page-hero .wrap{padding:76px 24px 62px;position:relative}
.page-hero h1{color:#fff}
.page-hero .lede{color:#C6D6E8}
.page-hero .eyebrow{color:var(--sky)}.page-hero .eyebrow::before{background:var(--sky)}

/* ---------- prose / article ---------- */
.prose{max-width:760px}
.prose p{color:var(--ink-soft)}
.prose h2,.prose h3{margin-top:1.6em}
.prose ul{color:var(--ink-soft);padding-left:24px}
.prose li{margin-bottom:8px}
.two-col{display:grid;grid-template-columns:1fr 340px;gap:56px;align-items:start}
@media (max-width:900px){.two-col{grid-template-columns:1fr}}
.aside-card{background:var(--wash);border:1px solid var(--line);border-radius:var(--radius);padding:28px;position:sticky;top:104px}
.aside-card h3{font-size:1.05rem}
.aside-card ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.aside-card li a{font-weight:600}

/* ---------- footer ---------- */
footer.site-footer{background:var(--navy);color:#9FB6CE;margin-top:0}
footer .f-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1.1fr;gap:44px;padding:70px 24px 46px}
@media (max-width:900px){footer .f-grid{grid-template-columns:1fr 1fr}}
@media (max-width:560px){footer .f-grid{grid-template-columns:1fr}}
footer h4{color:#fff;font-size:.86rem;letter-spacing:.14em;text-transform:uppercase;margin:0 0 18px}
footer ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
footer a{color:#C6D6E8}
footer a:hover{color:#fff}
footer .f-brand{font-weight:800;font-size:1.25rem;color:#fff;letter-spacing:-.02em}
footer .f-brand .fx{color:var(--gold)}
footer .f-desc{font-size:.92rem;margin-top:12px;max-width:34ch}
.glaa-badge{margin-top:20px;background:var(--blue);color:#fff;border-radius:8px;padding:12px 16px;font-size:.8rem;line-height:1.45;max-width:290px}
.glaa-badge b{display:block;font-size:.88rem}
footer .f-bottom{border-top:1px solid var(--navy-3);padding:22px 24px;font-size:.8rem;display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap}
footer .f-bottom a{color:#9FB6CE}

/* ---------- utility ---------- */
.mt-0{margin-top:0}.mb-0{margin-bottom:0}
.badge-line{display:flex;gap:10px;flex-wrap:wrap;margin-top:18px}
.badge-line span{font-size:.78rem;font-weight:700;background:rgba(255,255,255,.12);color:#DCE8F5;border:1px solid rgba(255,255,255,.2);padding:6px 14px;border-radius:999px}

/* ---------- photo heroes (live site photography) ---------- */
.page-hero.ph-photo{background-size:cover;background-position:center}
.page-hero.ph-employers{background-image:linear-gradient(100deg,rgba(11,32,56,.93) 30%,rgba(14,92,153,.72)),url('/img/photos/office-meeting.jpg')}
.page-hero.ph-candidates{background-image:linear-gradient(100deg,rgba(11,32,56,.93) 30%,rgba(14,92,153,.72)),url('/img/photos/candidates-alt.jpg')}
.page-hero.ph-about{background-image:linear-gradient(100deg,rgba(11,32,56,.93) 30%,rgba(14,92,153,.72)),url('/img/photos/about.jpg')}
.page-hero.ph-sec-commercial{background-image:linear-gradient(100deg,rgba(11,32,56,.93) 30%,rgba(14,92,153,.72)),url('/img/photos/stock/sector-commercial.jpg')}
.page-hero.ph-sec-industrial{background-image:linear-gradient(100deg,rgba(11,32,56,.93) 30%,rgba(14,92,153,.72)),url('/img/photos/stock/sector-industrial.jpg')}
.page-hero.ph-sec-engineering{background-image:linear-gradient(100deg,rgba(11,32,56,.93) 30%,rgba(14,92,153,.72)),url('/img/photos/stock/sector-engineering.jpg')}
.page-hero.ph-sec-accountancy{background-image:linear-gradient(100deg,rgba(11,32,56,.93) 30%,rgba(14,92,153,.72)),url('/img/photos/stock/sector-accountancy.jpg')}
.page-hero.ph-sec-finance{background-image:linear-gradient(100deg,rgba(11,32,56,.93) 30%,rgba(14,92,153,.72)),url('/img/photos/stock/sector-finance.jpg')}
.page-hero.ph-contact{background-image:linear-gradient(100deg,rgba(11,32,56,.93) 30%,rgba(14,92,153,.72)),url('/img/photos/stock/contact-office.jpg')}
.hero.with-photo{
  background:
    linear-gradient(135deg,rgba(11,32,56,.88),rgba(18,44,76,.82),rgba(26,58,97,.78)),
    radial-gradient(680px 680px at 108% -12%, rgba(63,160,232,.55), transparent 62%),
    radial-gradient(540px 540px at -6% 112%, rgba(229,48,143,.32), transparent 60%),
    radial-gradient(420px 420px at 88% 96%, rgba(255,194,14,.20), transparent 58%),
    linear-gradient(135deg,rgba(11,32,56,.72) 0%,rgba(18,44,76,.66) 55%,rgba(26,58,97,.60) 100%),
    url('/img/photos/stock/hero-team.jpg') center/cover}

/* ---------- maths/science brand motif ---------- */
section.band.wash{background-image:linear-gradient(var(--wash-2) 1px,transparent 1px),linear-gradient(90deg,var(--wash-2) 1px,transparent 1px);background-size:34px 34px;background-color:var(--wash)}
.hero .formula,.page-hero .formula{font-variant-numeric:tabular-nums;letter-spacing:.04em}
.stat .n::after{content:"";display:block;width:34px;height:3px;border-radius:2px;margin:8px auto 0;background:linear-gradient(90deg,var(--pink),var(--gold),var(--blue))}

/* ---- My Equation portal ---- */
.portal-form{max-width:640px}
.form-row{display:flex;gap:18px;flex-wrap:wrap}
.form-row .form-field{flex:1;min-width:220px}
.form-field{margin-bottom:20px;display:flex;flex-direction:column;gap:7px}
.form-field label{font-weight:700;font-size:.92rem;color:var(--ink)}
.form-field input,.form-field select,.form-field textarea{padding:12px 16px;border:1px solid var(--line);border-radius:12px;font:inherit;background:#fff;color:var(--ink)}
.form-field input:focus,.form-field select:focus,.form-field textarea:focus{outline:2px solid var(--blue);outline-offset:1px;border-color:var(--blue)}
.form-field small{color:var(--ink-soft);font-size:.85rem}
.form-field span[class]{color:#B4232A;font-size:.85rem}
.form-field input[type=file]{padding:10px;background:transparent;border-style:dashed}
.alert{background:#FDF3F4;border:1px solid #EFC5C8;color:#8E1C22;border-radius:12px;padding:14px 18px;margin-bottom:20px}
.alert:empty{display:none}
.alert.success{background:#F0F8F1;border-color:#BFDFC5;color:#1E5E2A}
.alert a{color:inherit;text-decoration:underline}
.alert ul{margin:0;padding-left:20px}
.portal-nav{display:flex;gap:6px;flex-wrap:wrap;align-items:center;border:1px solid var(--line);background:#fff;border-radius:999px;padding:6px;box-shadow:var(--shadow-1)}
.portal-nav a{padding:9px 18px;border-radius:999px;font-weight:600;font-size:.93rem;color:var(--ink-soft)}
.portal-nav a:hover{text-decoration:none;color:var(--blue)}
.portal-nav a.active{background:var(--blue);color:#fff}
.portal-logout{margin-left:auto}
.portal-logout button{border:0;background:transparent;font:inherit;font-weight:600;font-size:.93rem;color:var(--ink-soft);cursor:pointer;padding:9px 18px;border-radius:999px}
.portal-logout button:hover{color:#B4232A;background:#FDF3F4}
.check-row{display:flex;gap:10px;flex-wrap:wrap}
.check-pill{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--line);border-radius:999px;padding:9px 16px;cursor:pointer;font-size:.92rem;background:#fff}
.check-pill:has(input:checked){border-color:var(--blue);background:#EAF3FB;color:var(--blue-deep);font-weight:600}
.check-pill input{accent-color:var(--blue)}
fieldset.form-field{border:0;padding:0;margin:0 0 20px;min-width:0}
.form-field legend{font-weight:700;font-size:.92rem;color:var(--ink);padding:0;margin-bottom:7px}
.form-field input.input-validation-error,.form-field select.input-validation-error,.form-field textarea.input-validation-error{border-color:#B4232A}

/* ============================================================
   22 Aug 2026 redesign — components (values from the Claude Design handoff)
   ============================================================ */
/* layout */
.rs-wrap{max-width:var(--wrap);margin:0 auto}
.rs-band{padding:44px 40px}
.rs-band.wash{background:var(--wash)}
.rs-band.tight{padding:26px 40px 40px}
@media (max-width:700px){.rs-band{padding:30px 20px}.rs-band.tight{padding:22px 20px 32px}}
.rs-grid-2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.rs-grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.rs-grid-5{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:14px}
@media (max-width:1000px){.rs-grid-5{grid-template-columns:repeat(3,1fr)}.rs-grid-4{grid-template-columns:repeat(2,1fr)}}
@media (max-width:640px){.rs-grid-5,.rs-grid-4,.rs-grid-2{grid-template-columns:1fr}}
.rs-stack{display:flex;flex-direction:column;gap:14px}

/* dark hero */
.rs-hero{background:linear-gradient(120deg,var(--navy) 55%,var(--navy-3));padding:52px 40px 46px;color:#fff}
.rs-hero.compact{background:linear-gradient(135deg,var(--navy),var(--navy-3));padding:34px 40px 30px}
.rs-hero.advert{background:linear-gradient(135deg,var(--navy),var(--navy-3));padding:28px 40px 26px}
.rs-hero.service{padding:44px 40px 40px}
@media (max-width:700px){.rs-hero,.rs-hero.compact,.rs-hero.advert,.rs-hero.service{padding:30px 20px}}
.rs-hero .kicker{color:var(--sky);font-size:12.5px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;margin-bottom:12px}
.rs-hero .kicker.gold{color:var(--gold)}
.rs-hero h1{color:#fff;font-size:48px;font-weight:800;line-height:1.08;margin:0 0 16px;letter-spacing:0;text-wrap:balance}
.rs-hero h1 .fx{color:var(--pink)}
.rs-hero.compact h1{font-size:34px;margin:0 0 18px}
.rs-hero.advert h1{font-size:36px;margin:0 0 10px}
.rs-hero.service h1{font-size:40px;line-height:1.1;margin:0 0 14px}
@media (max-width:700px){.rs-hero h1,.rs-hero.service h1{font-size:34px}.rs-hero.compact h1,.rs-hero.advert h1{font-size:28px}}
.rs-hero .lede{color:#B9C6D6;font-size:16.5px;line-height:1.6;margin:0 0 24px;max-width:480px}
.rs-hero.service .lede{font-size:15.5px;max-width:480px;margin:0}
.rs-hero .split{display:grid;grid-template-columns:1.25fr 1fr;gap:48px;align-items:center}
.rs-hero.service .split{grid-template-columns:1.3fr 1fr;gap:44px}
@media (max-width:900px){.rs-hero .split,.rs-hero.service .split{grid-template-columns:1fr;gap:28px}}
.rs-hero .proof{display:flex;gap:20px;margin-top:22px;font-size:12.5px;color:var(--ink-faint);flex-wrap:wrap}
.rs-hero .proof b{color:var(--gold)}
.rs-hero .crumbs{font-size:12.5px;color:var(--ink-faint);margin-bottom:10px}
.rs-hero .crumbs a{color:var(--sky)}
.rs-hero .meta{display:flex;gap:20px;font-size:15px;color:var(--sky-soft);flex-wrap:wrap}
.rs-hero .meta .pay{font-weight:700;color:var(--gold)}
.rs-hero .meta.sm{font-size:14px;gap:18px}
.rs-hero .badges{display:flex;gap:10px;align-items:center;margin-bottom:8px;flex-wrap:wrap}
.rs-hero .ctas{display:flex;gap:12px;flex-wrap:wrap}

/* search bar (home + jobs) */
.search-bar{display:flex;gap:8px;max-width:560px}
.search-bar.full{max-width:none;gap:10px}
@media (max-width:900px){.search-bar,.search-bar.full{flex-wrap:wrap}.search-bar>*{flex:1 1 180px!important}.search-bar .cta-btn{flex-basis:100%!important}}
.search-bar input,.search-bar select{background:#fff;border:0;border-radius:var(--radius-sm);padding:12px 15px;font:inherit;font-size:14.5px;color:var(--ink);min-width:0}
.search-bar.full input,.search-bar.full select{padding:11px 14px}
.search-bar input::placeholder{color:var(--ink-faint)}
.search-bar select{appearance:none;-webkit-appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%237A8AA0' stroke-width='1.5' fill='none'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center;padding-right:30px}
.search-bar .loc{display:flex;background:#fff;border-radius:var(--radius-sm);overflow:hidden}
.search-bar .loc input{flex:1;border-radius:0}
.search-bar .loc select{border-radius:0;color:var(--ink-faint);flex:none;width:138px;padding-left:4px;padding-right:26px;background-position:right 10px center}
.popular{display:flex;gap:8px;margin-top:12px;align-items:center;flex-wrap:wrap}
.popular span{color:#B9C6D6;font-size:12.5px}
.popular a{border:1px solid rgba(255,255,255,.25);color:var(--sky-soft);font-size:12.5px;padding:4px 11px;border-radius:99px}
.popular a:hover{background:rgba(255,255,255,.08);text-decoration:none}

/* live panel (home hero, right) */
.live-panel{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);border-radius:var(--radius);padding:22px 24px}
.live-panel .head{display:flex;align-items:baseline;margin-bottom:14px}
.live-panel .head b{color:#fff;font-size:14px;font-weight:800}
.live-panel .head a{margin-left:auto;color:var(--sky);font-size:12px;font-weight:700}
.live-panel .rows{display:flex;flex-direction:column;gap:10px}
.live-panel .row{background:#fff;border-radius:var(--radius-sm);padding:12px 16px;display:flex;align-items:center;gap:10px;color:var(--ink)}
.live-panel .row:hover{text-decoration:none;background:var(--sky-soft)}
.live-panel .row .t{font-size:13.5px;font-weight:700;color:var(--ink)}
.live-panel .row .m{margin-left:auto;font-size:12px;color:var(--ink-soft);white-space:nowrap}

/* badges + chips */
.badge{display:inline-block;font-size:10.5px;font-weight:800;letter-spacing:.8px;padding:3px 9px;border-radius:99px;line-height:1.4;white-space:nowrap}
.badge.new{background:var(--pink);color:#fff}
.badge.updated{background:var(--sky-soft);color:var(--blue-deep)}
.badge.talent{background:var(--gold);color:var(--ink)}
.badge.multi{background:var(--sky-soft);color:var(--blue-deep)}
.badge.closing{background:var(--gold);color:var(--ink);font-size:11px;letter-spacing:0;padding:3px 10px}
.badge.mini{font-size:9.5px;padding:2px 7px;letter-spacing:0}
.chip{display:inline-block;font-size:12px;font-weight:700;padding:4px 10px;border-radius:99px;white-space:nowrap}
.chip.relist,.chip.closing{background:var(--gold-soft);color:#8a6d00}
.chip.quiet{background:var(--wash);color:var(--ink-soft);font-weight:600}
.chip.link{background:var(--sky-soft);color:var(--blue);padding:5px 12px}
.chip.link:hover{background:#d8eafb;text-decoration:none}

/* section heads */
.rs-head{text-align:center;margin-bottom:26px}
.rs-head .kicker{color:var(--pink);font-size:12px;font-weight:800;letter-spacing:1.5px;text-transform:uppercase;margin-bottom:6px}
.rs-head h2{font-size:28px;font-weight:800;color:var(--ink);margin:0;letter-spacing:0}
.rs-title{font-size:16px;font-weight:800;color:var(--ink);margin:0 0 14px}

/* tiles (sector cards, how-it-works, pillars) */
.tile{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:20px 18px;display:flex;flex-direction:column;color:var(--ink)}
.tile:hover{text-decoration:none}
a.tile:hover{box-shadow:var(--shadow-1)}
.tile .icon{font-size:22px;margin-bottom:10px}
.tile .num{font-size:20px;font-weight:800;color:var(--pink);margin-bottom:8px}
.tile h3{font-size:14px;font-weight:800;color:var(--ink);margin:0 0 6px;letter-spacing:0;line-height:1.3}
.tile p{font-size:12px;color:var(--ink-soft);line-height:1.5;margin:0 0 10px}
.tile .go{font-size:12px;color:var(--blue);font-weight:700;margin-top:auto}
.tile.pillar{padding:22px}
.tile.pillar h3{font-size:15px;margin-bottom:8px}
.tile.pillar p{font-size:12.5px;line-height:1.6;margin:0}
.tile.step p{font-size:12.5px;line-height:1.55;margin:0}

/* dual CTA cards */
.cta-card{border-radius:var(--radius);padding:26px 28px}
.cta-card.navy{background:var(--navy);color:#fff}
.cta-card.pink{background:var(--pink-soft)}
.cta-card h3{font-size:17px;font-weight:800;margin:0 0 6px;letter-spacing:0;color:inherit}
.cta-card.pink h3{color:var(--ink)}
.cta-card p{font-size:13px;line-height:1.55;margin:0 0 14px;color:var(--ink-soft)}
.cta-card.navy p{color:#B9C6D6}
.cta-card .cta-btn{font-size:13.5px}

/* cards (generic white card with border) */
.card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:22px}
.card.hot{border:2px solid var(--pink);box-shadow:0 10px 30px rgba(236,0,140,.12);padding:24px}
.card.navy{background:var(--navy);border-color:var(--navy);color:#fff}
.card.pink{background:var(--pink-soft);border-color:var(--pink-soft)}
.card.gold{background:var(--gold-soft);border-color:var(--gold-soft)}
.card h3{font-size:14px;font-weight:800;color:var(--ink);margin:0 0 12px;letter-spacing:0}
.card.navy h3{color:#fff;font-size:16px;margin-bottom:6px}
.card.hot h3{font-size:18px;margin-bottom:4px}
.card .sub{font-size:12.5px;color:var(--ink-soft);margin-bottom:16px;line-height:1.5}
.card.navy .sub{color:#B9C6D6;font-size:13px;margin-bottom:14px}
.card .fine{font-size:11.5px;color:var(--ink-faint);margin-top:12px;line-height:1.5}
.card .fine b{color:var(--blue)}

/* forms in cards */
.f-stack{display:flex;flex-direction:column;gap:10px}
.f-stack.tight{gap:9px}
.f-stack input,.f-stack select,.f-stack textarea{border:1px solid var(--line);border-radius:var(--radius-sm);padding:10px 13px;font:inherit;font-size:13.5px;color:var(--ink);background:#fff;width:100%}
.f-stack input::placeholder,.f-stack textarea::placeholder{color:var(--ink-faint)}
.f-stack textarea{min-height:64px;resize:vertical}
.f-stack .row{display:flex;gap:9px}
.f-stack .row>*{flex:1;min-width:0}
.f-stack input:focus,.f-stack select:focus,.f-stack textarea:focus{outline:2px solid var(--blue);outline-offset:0;border-color:var(--blue)}
.f-stack .cta-btn{width:100%}
.f-stack .err{color:#B4232A;font-size:12.5px;margin:-4px 0 0}
.f-stack .err:empty{display:none}
.f-stack .validation-summary-errors ul{margin:0;padding-left:18px;color:#B4232A;font-size:12.5px}
.f-stack .input-validation-error{border-color:#B4232A}
.dropzone{position:relative;border:1.5px dashed var(--blue);background:var(--sky-soft);border-radius:var(--radius-sm);padding:14px;text-align:center;font-size:13px;color:var(--blue-deep);font-weight:600;line-height:1.45;cursor:pointer}
.dropzone small{display:block;font-weight:400;color:var(--ink-soft);font-size:12px}
.dropzone input[type=file]{position:absolute;inset:0;opacity:0;width:100%;height:100%;cursor:pointer}
.dropzone.has-file{border-style:solid}
.dropzone.compact{padding:12px;font-size:12.5px}

/* job cards (/jobs list) */
.jcard{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:20px 22px;display:flex;gap:18px;align-items:flex-start}
.jcard.talent{background:var(--navy);border-color:var(--navy);color:#fff}
.jcard .main{flex:1;display:flex;flex-direction:column;gap:7px;min-width:0}
.jcard .title{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.jcard .title a,.jcard .title .t{font-size:18px;font-weight:700;color:var(--ink);line-height:1.3}
.jcard.talent .title .t{color:#fff}
.jcard .meta{display:flex;gap:14px;font-size:13.5px;color:var(--ink-soft);flex-wrap:wrap}
.jcard .meta .pay{color:var(--ink);font-weight:600}
.jcard .meta .sec{color:var(--blue)}
.jcard.talent .meta{color:#B9C6D6}
.jcard.talent .meta .pay{color:var(--gold)}
.jcard.talent .meta .sec{color:var(--sky)}
.jcard .sum{font-size:13.5px;color:var(--ink-soft);line-height:1.5}
.jcard.talent .sum{color:#B9C6D6}
.jcard .side{display:flex;flex-direction:column;gap:8px;align-items:flex-end;flex:none}
.jcard .side .cta-btn{font-size:13.5px;padding:9px 18px}
@media (max-width:640px){.jcard{flex-direction:column}.jcard .side{flex-direction:row;align-items:center;width:100%;justify-content:space-between}}
.results-head{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.results-head .n{font-size:15px;font-weight:700;color:var(--ink)}
.results-head .near{font-size:13px;color:var(--ink-soft)}
.results-head .sort{margin-left:auto;font-size:13px;color:var(--ink-soft);display:flex;align-items:center;gap:6px}
.results-head .sort select{border:0;background:transparent;font:inherit;font-size:13px;font-weight:700;color:var(--ink);cursor:pointer}
.jobs-layout{display:grid;grid-template-columns:1fr 320px;gap:28px;align-items:start}
@media (max-width:900px){.jobs-layout{grid-template-columns:1fr}}
.rail{display:flex;flex-direction:column;gap:16px}
.rail .links{display:flex;flex-direction:column;gap:9px;font-size:13.5px}
.rail .links a{color:var(--blue)}
.rail .links a span{color:var(--ink-faint)}
.rail .card .cta-btn{font-size:14px;padding:10px}

/* similar jobs */
.sim-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
@media (max-width:800px){.sim-grid{grid-template-columns:1fr}}
.sim{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:18px 20px;display:flex;flex-direction:column;gap:6px;color:var(--ink)}
.sim:hover{text-decoration:none;box-shadow:var(--shadow-1)}
.sim .t{font-size:15.5px;font-weight:700;color:var(--ink)}
.sim .m{font-size:13px;color:var(--ink-soft)}
.sim .go{font-size:13px;color:var(--blue);font-weight:600}

/* advert page */
.advert-layout{display:grid;grid-template-columns:1fr 380px;gap:28px;align-items:start}
@media (max-width:900px){.advert-layout{grid-template-columns:1fr}}
.advert-body{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:30px 32px;font-size:15px;color:var(--ink-soft);line-height:1.65}
.advert-body .lead{margin:0 0 18px;font-size:16.5px;color:var(--ink)}
.advert-body h3{font-size:16px;color:var(--ink);margin:0 0 10px;letter-spacing:0}
.advert-body p{margin:0 0 18px}
.advert-body ul{margin:0 0 22px;padding-left:20px;display:flex;flex-direction:column;gap:7px}
.consultant{display:flex;gap:14px;align-items:center;background:var(--wash);border-radius:var(--radius-sm);padding:14px 18px;font-size:13.5px}
.consultant .photo{width:44px;height:44px;border-radius:50%;background:repeating-linear-gradient(45deg,var(--line),var(--line) 4px,var(--wash-2) 4px,var(--wash-2) 8px);flex:none;display:flex;align-items:center;justify-content:center;font:10px monospace;color:var(--ink-faint)}
.consultant b{color:var(--ink)}
.glance{font-size:13.5px;color:var(--ink-soft);display:flex;flex-direction:column;gap:9px;padding:20px 22px}
.glance h3{margin-bottom:2px}
.glance .r{display:flex;justify-content:space-between;gap:12px}
.glance .r b{color:var(--ink);text-align:right}
.glance .r b.blue{color:var(--blue)}
.glance .bar{background:var(--wash);border-radius:99px;height:8px;margin-top:4px;overflow:hidden}
.glance .bar i{display:block;height:100%;background:linear-gradient(90deg,var(--blue),var(--pink));border-radius:99px}
.glance .fine{margin-top:0}

/* apply result (3-step) */
.steps{display:grid;grid-template-columns:1fr 1fr 1fr;background:var(--wash)}
@media (max-width:900px){.steps{grid-template-columns:1fr}}
.steps>div{padding:30px 26px;border-right:1px dashed var(--line)}
.steps>div:last-child{border-right:0}
@media (max-width:900px){.steps>div{border-right:0;border-bottom:1px dashed var(--line)}}
.steps .lbl{font-size:11px;font-weight:800;letter-spacing:1.2px;color:var(--pink);margin-bottom:12px}
.steps .note{font-size:12px;color:var(--ink-soft);line-height:1.55;margin-top:12px}
.steps .card{display:flex;flex-direction:column;gap:10px}
.steps .card h3{font-size:15px;margin:0}
.steps .card .sub{margin:0;font-size:12.5px}
.steps .done{border:1px solid var(--line);border-radius:var(--radius-sm);padding:9px 12px;font-size:13px;color:var(--ink)}
.steps .done.cv{background:var(--sky-soft);border:1.5px dashed var(--blue);text-align:center;font-size:12.5px;color:var(--blue-deep);font-weight:600;padding:10px}
.code-boxes{display:flex;gap:7px;justify-content:center}
.code-boxes input{width:36px;height:44px;border:1.5px solid var(--line);border-radius:var(--radius-sm);text-align:center;font-size:19px;font-weight:800;color:var(--ink);padding:0}
.code-boxes input:focus{border-color:var(--blue);outline:0}
.progress{background:var(--wash);border-radius:var(--radius-sm);padding:12px 14px}
.progress .t{font-size:13px;font-weight:700;color:var(--ink);margin-bottom:8px}
.progress .segs{display:flex;gap:3px}
.progress .segs span{flex:1;height:6px;border-radius:99px;background:var(--line)}
.progress .segs span.on{background:var(--pink)}
.progress .s{font-size:11.5px;color:var(--ink-soft);margin-top:6px}

/* CV check */
.cvcheck{display:none}
.cvcheck.show{display:block}
.cvcheck .head{display:flex;align-items:center;gap:10px;margin-bottom:4px;flex-wrap:wrap}
.cvcheck .head .tag{background:linear-gradient(90deg,var(--pink),var(--blue));color:#fff;font-size:10.5px;font-weight:800;padding:3px 10px;border-radius:99px}
.cvcheck .head b{font-size:16px;font-weight:800;color:var(--ink)}
.cvcheck .read{background:var(--sky-soft);border-radius:var(--radius-sm);padding:10px 14px;font-size:12.5px;color:var(--blue-deep);font-weight:600;margin-bottom:16px}
.cvcheck .score{display:flex;gap:20px;align-items:center;margin-bottom:16px}
.donut{width:86px;height:86px;border-radius:50%;display:flex;align-items:center;justify-content:center;flex:none;background:conic-gradient(var(--pink) 0 var(--pct,0%),var(--wash-2) var(--pct,0%) 100%)}
.donut div{width:64px;height:64px;border-radius:50%;background:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center}
.donut b{font-size:19px;font-weight:800;color:var(--ink)}
.donut small{font-size:9.5px;color:var(--ink-faint)}
.cvcheck .verdict{font-size:13.5px;color:var(--ink);line-height:1.6}
.cvcheck .cols{display:grid;grid-template-columns:1fr 1fr;gap:12px;font-size:12.5px;line-height:1.6;margin-bottom:14px}
@media (max-width:640px){.cvcheck .cols{grid-template-columns:1fr}}
.cvcheck .cols>div{border-radius:var(--radius-sm);padding:12px 16px;color:var(--ink-soft)}
.cvcheck .cols>div b{color:var(--ink);display:block}
.cvcheck .cols .good{background:var(--wash)}
.cvcheck .cols .warn{background:var(--gold-soft)}
.cvcheck .busy{font-size:12.5px;color:var(--blue-deep);font-weight:600;margin-top:8px}

/* checklists in service pages */
.ticks{display:flex;flex-direction:column;gap:8px;font-size:13px;color:var(--ink-soft);line-height:1.55}
.ticks b{color:var(--ink)}
.quote-strip{background:var(--pink-soft);border-radius:var(--radius);padding:20px 26px;margin-top:14px;display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.quote-strip p{font-size:14px;color:var(--ink);line-height:1.55;margin:0;flex:1;min-width:240px}
.quote-strip .cta-btn{font-size:13.5px;white-space:nowrap}
.reach{background:var(--navy);border-radius:var(--radius);padding:22px 28px;margin-bottom:30px;color:#B9C6D6;font-size:13.5px;line-height:1.65}
.reach .kicker{color:var(--gold);font-size:12px;font-weight:800;letter-spacing:1.5px;text-transform:uppercase;margin-bottom:6px}
.emp-layout{display:grid;grid-template-columns:1fr 420px;gap:24px;align-items:start}
@media (max-width:900px){.emp-layout{grid-template-columns:1fr}}
.card.blurb{padding:22px 26px}
.card.blurb h3{font-size:15px;margin-bottom:10px}
.card.blurb p{font-size:13px;color:var(--ink-soft);line-height:1.65;margin:0}
.card.navy.blurb h3{font-size:15px;margin-bottom:8px}
.card.navy.blurb p{font-size:12.5px;color:#B9C6D6}

/* sector x town landing + news (900 column) */
.narrow{max-width:900px;margin:0 auto}
.crumbs{font-size:12px;color:var(--ink-faint);margin-bottom:12px}
.crumbs b{color:var(--ink)}
.landing h1{font-size:28px;font-weight:800;color:var(--ink);margin:0 0 8px;letter-spacing:0}
.landing .intro{font-size:14px;color:var(--ink-soft);line-height:1.6;margin:0 0 18px;max-width:640px}
.landing .rows{display:flex;flex-direction:column;gap:10px;margin-bottom:18px}
.landing .row{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:14px 20px;display:flex;align-items:center;gap:12px;color:var(--ink);flex-wrap:wrap}
.landing .row:hover{text-decoration:none;box-shadow:var(--shadow-1)}
.landing .row .t{font-size:14.5px;font-weight:700;color:var(--ink)}
.landing .row .m{font-size:12.5px;color:var(--ink-soft)}
.landing .row .go{margin-left:auto;font-size:12.5px;color:var(--blue);font-weight:700}
.faq{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:20px 24px;margin-bottom:14px}
.faq h2{font-size:14px;font-weight:800;color:var(--ink);margin:0 0 12px;letter-spacing:0}
.faq .qa{font-size:13px;color:var(--ink-soft);line-height:1.6;display:flex;flex-direction:column;gap:10px}
.faq .qa b{color:var(--ink)}
.chips{display:flex;gap:10px;flex-wrap:wrap}
.news-feature{background:var(--navy);border-radius:var(--radius);padding:24px 28px;margin-bottom:14px;display:block;color:#fff}
.news-feature:hover{text-decoration:none}
.news-feature .tags{display:flex;gap:8px;margin-bottom:8px;align-items:center}
.news-feature .date{color:var(--ink-faint);font-size:12px}
.news-feature h2{color:#fff;font-size:19px;font-weight:800;margin:0 0 6px;letter-spacing:0}
.news-feature p{color:#B9C6D6;font-size:13px;line-height:1.6;margin:0 0 12px}
.news-feature .foot{display:flex;gap:14px;font-size:12.5px;font-weight:700;flex-wrap:wrap}
.news-feature .foot .read{color:var(--sky)}
.news-feature .foot .linked{color:var(--ink-faint);font-weight:400}
.news-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:20px 22px;display:block;color:var(--ink)}
.news-card:hover{text-decoration:none;box-shadow:var(--shadow-1)}
.news-card .tags{display:flex;gap:8px;margin-bottom:8px;align-items:center}
.news-card .date{color:var(--ink-faint);font-size:12px}
.news-card h3{font-size:15px;font-weight:800;color:var(--ink);margin:0 0 6px;letter-spacing:0}
.news-card p{font-size:12.5px;color:var(--ink-soft);line-height:1.55;margin:0 0 10px}
.news-card .go{font-size:12.5px;color:var(--blue);font-weight:700}
.badge.cat-pay{background:var(--gold);color:var(--ink);letter-spacing:0}
.badge.cat-emp{background:var(--sky-soft);color:var(--blue-deep);letter-spacing:0}
.badge.cat-cand{background:var(--pink-soft);color:var(--pink);letter-spacing:0}
.fine-note{font-size:11.5px;color:var(--ink-faint);margin-top:14px}
.flash{background:var(--sky-soft);border-radius:var(--radius-sm);padding:12px 16px;font-size:13.5px;color:var(--blue-deep);font-weight:600;margin-bottom:14px}
.flash.ok{background:#F0F8F1;color:#1E5E2A}

/* ── Touch devices: never let a form control be under 16px (Jason, 23 Aug 2026) ──────────────────────
   Safari on iPhone zooms the whole page in whenever a focused input or select is smaller than 16px, and
   it does not zoom back out afterwards — which is what "doesn't load well with size on my iPhone" is.
   Three separate rules put us under the line: .search-bar controls at 14.5px, .f-stack at 13.5px and the
   results sort select at 13px.
   Keyed on (pointer:coarse) rather than a width breakpoint on purpose: the zoom is a property of the
   INPUT DEVICE, not the screen — an iPad in landscape is wider than many laptops and still zooms. Mouse
   users are not matched, so the desktop design is untouched. */
@media (pointer: coarse) {
  .search-bar input, .search-bar select,
  .f-stack input, .f-stack select, .f-stack textarea,
  .results-head .sort select,
  .form-field input, .form-field select, .form-field textarea,
  input, select, textarea { font-size: 16px; }

  /* The sort control was 16px TALL — a mouse target, not a thumb one. */
  .results-head .sort select { padding: 8px 4px; min-height: 40px; }
  .search-bar .loc select { width: auto; min-width: 120px; }
}

/* ── Hero must survive bigger text than we chose (Jason, 24 Aug 2026) ───────────────────────────────
   He reported "the bit where you type job title and town and the live right now job is slightly over
   the right edge" on his iPhone. Reproduced by inflating the page text: the search bar then pushed
   190px past the right edge and the live-jobs panel far further — the two elements he named, exactly.

   text-size-adjust:100% (added the same day) stops SAFARI inflating text on its own, which was the
   trigger. It does NOT stop a person enlarging text themselves via Settings → Accessibility → Larger
   Text, and these two elements had no defence at all against that: flex children default to
   min-width:auto, so they refuse to shrink below their content and push the row wider than the screen
   instead of wrapping. Preventing the trigger is not the same as being robust to the cause. */

/* Flex children may shrink below their content instead of forcing the row wide. */
.search-bar > *, .search-bar .loc { min-width: 0; }

/* A long job title wraps or ellipsises rather than shoving the meta off the edge; the meta drops to
   its own line when there is genuinely no room, instead of staying glued right and overflowing. */
.live-panel .row { flex-wrap: wrap; }
.live-panel .row .t { min-width: 0; overflow-wrap: anywhere; }
.live-panel .row .m { min-width: 0; white-space: normal; }

/* THE ROOT CAUSE: .rs-wrap.split is a CSS GRID, and grid items — exactly like flex items — default to
   min-width:auto, so they refuse to shrink below their content. With bigger text the grid item holding
   the search bar blew out to 698px inside a 350px grid and pushed past the screen. min-width:0 lets it
   shrink so the content wraps instead. Measured, not guessed: this is the element that was overflowing.
   No overflow-x:clip on the hero — clipping would HIDE the overspill rather than fix it, which is the
   same symptom Jason reported, just silent. */
.split > *, .rs-wrap.split > * { min-width: 0; }
/* Same defect, same fix, every other grid on the site — the footer was still bleeding ~1000px at 130%
   text. A grid or flex child must be allowed to shrink, or it pushes the page sideways instead of
   wrapping. Scoped to the known layout containers rather than a blanket `* { min-width:0 }`, which
   would also strip the deliberate min-widths on form fields and nav dropdowns. */
footer .f-grid > *, .two-col > *, .card-grid > *, .quote-grid > *,
.jobs-layout > *, .sim-grid > *, .advert-layout > * { min-width: 0; }
/* NOT .form-row > .form-field — that carries a deliberate min-width:220px so two fields never squeeze
   into an unusable pair on a narrow row. Overriding it here would have quietly undone a design choice. */