/* ============================================================
   FT Recruitment — homepage rebuild
   Vanilla CSS. Brand magenta #DE0B80.
   ============================================================ */

:root{
  --pink:#DE0B80;
  --pink-deep:#DC0291;
  --pink-lite:#E8449C;
  --ink:#252525;
  --ink-soft:#2A2A2A;
  --grey:#636974;
  --line:#E6E8EE;
  --bg-soft:#F0F5F7;
  --bg-soft-2:#F3F7FB;
  --bg-soft-3:#ECEDF2;
  --white:#fff;
  --topbar-h:40px;
  --header-h:84px;
  --display:"Oswald","Montserrat",system-ui,sans-serif;
  --body:"Montserrat",system-ui,-apple-system,"Segoe UI",sans-serif;
  --radius:10px;
  --sec-y:80px;            /* one section vertical rhythm everywhere */
  --shadow:0 14px 40px rgba(20,20,40,.10);
  --shadow-sm:0 6px 18px rgba(20,20,40,.08);
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:var(--body);
  color:var(--ink);
  background:var(--white);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
ul{list-style:none;margin:0;padding:0}
h1,h2,h3,h4{margin:0;font-family:var(--display);font-weight:700;line-height:1.05}

.container{width:min(1200px,92%);margin-inline:auto}

/* ===== TOP CONTACT BAR ===== */
.topbar{
  background:var(--ink);
  color:#d9dbe4;
  font-size:13px;
  height:var(--topbar-h);
  display:flex;align-items:center;
}
.topbar__inner{display:flex;align-items:center;gap:26px;flex-wrap:wrap}
.topbar__item{display:inline-flex;align-items:center;gap:7px;color:#d9dbe4}
.topbar__item svg{color:var(--pink);flex:none}
.topbar__item strong{color:#fff;font-weight:600}
.topbar a.topbar__item:hover{color:#fff}
.topbar__addr{margin-right:auto}
@media(max-width:900px){
  .topbar{display:none}
  :root{--topbar-h:0px}
}

/* ===== HEADER / NAV ===== */
.header{
  position:sticky;
  top:0;
  z-index:60;
  height:var(--header-h);
  display:flex;align-items:center;
  background:transparent;
  transition:background .3s ease, box-shadow .3s ease, height .3s ease;
}
.header__inner{display:flex;align-items:center;justify-content:space-between;width:min(1200px,92%);margin-inline:auto}
/* On the hero (top of page) the header is transparent over the magenta
   background. The only logo asset is the full-colour pink speech-bubble,
   which would sit pink-on-magenta and barely read — so by default knock
   it out to a clean white silhouette, and restore full colour in the
   scrolled white-bar state below. */
.header__logo img{width:auto;transition:filter .3s ease}
.header__logo .logo-hero{height:40px}  /* native wordmark: pink bubble + white text, reads on the magenta hero (matches live) */
.header__logo .logo-solid{height:46px;display:none}                   /* full-colour bubble for the white scrolled bar */
.nav__list{display:flex;align-items:center;gap:4px}
.nav__link{
  display:inline-flex;align-items:center;gap:6px;
  padding:10px 14px;
  font-weight:600;font-size:15px;
  color:#fff;
  border-radius:8px;
  transition:color .2s ease,background .2s ease;
  white-space:nowrap;
}
.nav__caret{opacity:.9;transform:translateY(1px)}
.nav__link:hover{color:#fff;background:rgba(255,255,255,.15)}

.nav__item{position:relative}
.nav__drop{
  position:absolute;top:100%;left:0;
  min-width:250px;
  background:#fff;
  border-radius:10px;
  box-shadow:var(--shadow);
  padding:8px;
  opacity:0;visibility:hidden;transform:translateY(8px);
  transition:opacity .2s ease,transform .2s ease,visibility .2s;
  z-index:5;
}
.has-drop:hover .nav__drop{opacity:1;visibility:visible;transform:translateY(4px)}
.nav__drop li a{
  display:block;padding:9px 12px;border-radius:7px;
  color:var(--ink);font-size:14px;font-weight:500;
}
.nav__drop li a:hover{background:var(--bg-soft);color:var(--pink)}

/* Scrolled state — solid white bar, dark logo + dark nav */
.header.is-scrolled{
  background:#fff;
  box-shadow:0 4px 20px rgba(20,20,40,.08);
  height:72px;
}
.header.is-scrolled .header__logo .logo-hero{display:none}
.header.is-scrolled .header__logo .logo-solid{display:inline-block;filter:none}
.header.is-scrolled .nav__link{color:var(--ink)}
.header.is-scrolled .nav__link:hover{color:var(--pink);background:var(--bg-soft)}
.header.is-scrolled .hamburger span{background:var(--ink)}

/* Hamburger */
.hamburger{
  display:none;
  width:44px;height:44px;
  border:0;background:transparent;cursor:pointer;
  padding:10px;
  flex-direction:column;justify-content:space-between;
  z-index:70;
}
.hamburger span{
  display:block;height:3px;width:100%;border-radius:3px;
  background:#fff;
  transition:transform .3s ease,opacity .2s ease,background .3s ease;
}
.hamburger.is-open span{background:var(--ink)}
.hamburger.is-open span:nth-child(1){transform:translateY(9px) rotate(45deg)}
.hamburger.is-open span:nth-child(2){opacity:0}
.hamburger.is-open span:nth-child(3){transform:translateY(-9px) rotate(-45deg)}

.nav-scrim{
  position:fixed;inset:0;z-index:55;
  background:rgba(20,20,30,.45);
  border:0;
}

/* ===== HERO =====
   The diagonal white cut is drawn in CSS (clip-path) rather than left to
   the background PNG's baked-in cut, so the divider is viewport-stable
   and predictable at every size. A ::before layer carries the magenta
   base + the repeated job-word typography (the PNG, top-anchored so the
   word rows read consistently); the clip-path then carves the bottom-left
   corner away to reveal the page white beneath — divider high on the
   left, sweeping down to full height on the right, matching the live
   hero. The PNG's own baked diagonal sits below the clip line and is
   never shown. */
.hero{
  position:sticky;
  top:0;
  z-index:1;
  margin-top:calc(-1 * var(--header-h));
  padding-top:calc(var(--header-h) + 120px);
  padding-bottom:190px;
  background:transparent;
  color:#fff;
  text-align:center;
}
/* the content sheet that scrolls up and over the pinned hero — solid bg so the hero never shows through */
.scroll-over{
  position:relative;z-index:2;
  background:#fff;
  margin-top:-64px;
  border-top-left-radius:52px;border-top-right-radius:52px;
}
.hero::before{
  content:"";
  position:absolute;inset:0;
  z-index:-1;
  background:var(--pink);
}
/* live kinetic word-art background — replaces the baked PNG; slow drift, subtle lighter tint */
.hero__words{
  position:absolute;inset:0;z-index:0;overflow:hidden;
  pointer-events:none;user-select:none;
  display:flex;flex-direction:column;justify-content:center;gap:.08em;
}
.hero__wrow{
  display:flex;flex:none;white-space:nowrap;
  font-family:var(--display);font-weight:700;text-transform:uppercase;
  font-size:clamp(66px,11vw,158px);line-height:.9;letter-spacing:.005em;
  color:rgba(255,255,255,.05);
  will-change:transform;backface-visibility:hidden;transform:translateZ(0);
  animation:heroDrift 100s linear infinite;
}
.hero__wrow span{padding-right:.5em}
.hero__wrow:nth-child(2n){animation-direction:reverse;animation-duration:124s}
.hero__wrow:nth-child(3n){animation-duration:150s}
@keyframes heroDrift{from{transform:translate3d(0,0,0)}to{transform:translate3d(-50%,0,0)}}
@media(prefers-reduced-motion:reduce){.hero__wrow{animation:none}}
.hero__inner{position:relative;z-index:2}
/* hero divider is now a rounded-top white sheet (see .fresh) */
.hero__eyebrow{
  font-weight:600;font-size:clamp(16px,2vw,25px);
  margin:0 auto 14px;max-width:820px;
}
.hero__title{
  font-family:var(--display);
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.5px;
  font-size:clamp(44px,9vw,117px);
  line-height:.98;
  margin:0 auto 42px;
}
/* the ft speech-bubble sitting on the bottom-left divider point,
   where the CSS clip-path diagonal meets the base */
.hero__badge{
  position:absolute;
  left:50%;top:-46px;transform:translateX(-50%);
  width:92px;height:auto;border-radius:20px;
  filter:drop-shadow(0 14px 28px rgba(120,0,60,.32));
  z-index:5;
}
@media(max-width:820px){
  .hero__badge{left:50%;width:68px;top:-36px}
}

/* Search bar */
.searchbar{
  display:flex;
  gap:10px;
  background:#fff;
  border-radius:14px;
  padding:12px;
  max-width:820px;
  margin:0 auto;
  box-shadow:0 22px 50px rgba(120,0,60,.28);
  text-align:left;
}
.searchbar__field{
  flex:1;
  display:flex;align-items:center;gap:10px;
  padding:0 14px;
  background:#fff;
  border-radius:10px;
  min-width:0;
  position:relative;
}
.searchbar__field + .searchbar__field{
  border-left:1px solid var(--line);
}
.searchbar__field svg{color:var(--pink);flex:none}
.searchbar__field input,
.searchbar__field select{
  border:0;outline:0;background:transparent;
  font-family:var(--body);font-size:15px;color:var(--ink);
  width:100%;padding:14px 0;
  min-width:0;
}
.searchbar__field select{appearance:none;-webkit-appearance:none;cursor:pointer;padding-right:20px}
.searchbar__field input::placeholder{color:#9aa0ad}
.searchbar__chev{position:absolute;right:12px;color:var(--grey);pointer-events:none}
.searchbar__btn{
  flex:none;
  border:0;cursor:pointer;
  background:var(--pink);color:#fff;
  font-family:var(--display);font-weight:600;text-transform:uppercase;letter-spacing:1px;
  font-size:16px;
  padding:0 40px;
  border-radius:10px;
  transition:background .2s ease,transform .1s ease;
}
.searchbar__btn:hover{background:var(--pink-deep)}
.searchbar__btn:active{transform:translateY(1px)}

/* ===== SECTION HEADS ===== */
.section-head{text-align:center;margin-bottom:44px}
.section-head__title{
  font-size:clamp(30px,4vw,49px);
  text-transform:uppercase;
  color:var(--ink);
}
.section-head__sub{color:var(--grey);margin:10px 0 0;font-weight:500}

/* ===== FRESH APPROACH ===== */
.fresh{padding:var(--sec-y) 0}
.fresh__inner{
  display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center;
}
.fresh__title{
  font-size:clamp(30px,3.5vw,49px);
  text-transform:uppercase;
  margin-bottom:24px;
  max-width:14ch;
}
.fresh__text p{color:var(--grey);margin:0 0 18px;font-size:16.5px}
.fresh__media img{margin-inline:auto;max-height:582px;width:auto}

/* ===== POPULAR CATEGORIES ===== */
.cats{padding:var(--sec-y) 0;background:var(--bg-soft)}
.cats__grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:26px;
}
.cat{
  background:#fff;border-radius:14px;
  padding:40px 28px;text-align:center;
  box-shadow:var(--shadow-sm);
  border:1px solid var(--line);
  transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease;
  display:flex;flex-direction:column;align-items:center;gap:8px;
}
.cat:hover{transform:translateY(-6px);box-shadow:var(--shadow);border-color:transparent}
.cat__icon{
  width:76px;height:76px;border-radius:50%;
  display:grid;place-items:center;
  background:rgba(222,11,128,.10);color:var(--pink);
  margin-bottom:8px;
  transition:background .22s ease,color .22s ease;
}
.cat:hover .cat__icon{background:var(--pink);color:#fff}
.cat__name{font-family:var(--display);font-size:22px;text-transform:uppercase;color:var(--ink)}
.cat__count{color:var(--grey);font-size:14px}

/* ===== VACANCIES / JOB ROWS ===== */
.vacancies{padding:var(--sec-y) 0}
.jobs{display:flex;flex-direction:column;gap:18px;max-width:960px;margin-inline:auto}
.job{
  position:relative;
  display:flex;align-items:center;gap:22px;
  background:#fff;border:1px solid var(--line);border-radius:14px;
  padding:22px 26px;
  box-shadow:var(--shadow-sm);
  transition:box-shadow .22s ease,transform .22s ease,border-color .22s ease;
}
.job:hover{box-shadow:var(--shadow);transform:translateY(-3px);border-color:transparent}
.job__featured{
  position:absolute;top:0;right:26px;transform:translateY(-50%);
  background:var(--pink);color:#fff;
  font-size:11px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;
  padding:4px 12px;border-radius:20px;
}
.job__logo{
  flex:none;width:66px;height:66px;border-radius:12px;
  background:var(--bg-soft);display:grid;place-items:center;padding:10px;
}
.job__logo img{width:100%;height:auto}
.job__body{flex:1;min-width:0}
.job__title{font-size:22px;text-transform:uppercase;margin-bottom:8px}
.job__title a:hover{color:var(--pink)}
.job__meta{display:flex;flex-wrap:wrap;gap:18px;color:var(--grey);font-size:14px;margin-bottom:12px}
.job__meta li{display:inline-flex;align-items:center;gap:6px}
.job__meta svg{color:var(--pink);opacity:.85}
.job__tags{display:flex;flex-wrap:wrap;gap:8px}
.job__tags li{
  font-size:12px;font-weight:600;
  padding:4px 12px;border-radius:20px;
  background:var(--bg-soft-3);color:#525869;
}
.job__tags .tag--urgent{background:rgba(222,11,128,.12);color:var(--pink)}
.job__action{flex:none}

/* Buttons */
.btn{
  display:inline-block;
  font-family:var(--display);font-weight:600;text-transform:uppercase;letter-spacing:.5px;
  padding:13px 28px;border-radius:10px;font-size:14px;
  transition:background .2s ease,transform .1s ease;
}
.btn--pink{background:var(--pink);color:#fff}
.btn--pink:hover{background:var(--pink-deep)}
.btn--pink:active{transform:translateY(1px)}
.btn--sm{padding:10px 20px;font-size:13px}

/* ===== MIAH ===== */
.miah{padding:var(--sec-y) 0;background:var(--bg-soft-2)}
.miah__grid{display:grid;grid-template-columns:repeat(2,1fr);gap:26px;max-width:960px;margin-inline:auto}
.jobcard{
  position:relative;
  background:#fff;border:1px solid var(--line);border-radius:14px;
  padding:30px;box-shadow:var(--shadow-sm);
  transition:box-shadow .22s ease,transform .22s ease,border-color .22s ease;
}
.jobcard:hover{box-shadow:var(--shadow);transform:translateY(-4px);border-color:transparent}
.jobcard__featured{
  position:absolute;top:22px;right:22px;
  background:var(--pink);color:#fff;
  font-size:11px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;
  padding:4px 12px;border-radius:20px;
}
.jobcard__cat{color:var(--pink);font-weight:600;font-size:13px;text-transform:uppercase;letter-spacing:.5px}
.jobcard__title{font-size:24px;text-transform:uppercase;margin:8px 0 6px}
.jobcard__title a:hover{color:var(--pink)}
.jobcard__salary{color:var(--ink-soft);font-weight:600;margin:0 0 14px}
.jobcard__foot{display:flex;align-items:center;justify-content:space-between;margin-top:18px;gap:14px}
.jobcard__date{color:var(--grey);font-size:14px}

/* ===== NEWS ===== */
.news{padding:var(--sec-y) 0}
.news__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
.news-card{
  background:#fff;border:1px solid var(--line);border-radius:14px;
  padding:26px;box-shadow:var(--shadow-sm);
  transition:box-shadow .22s ease,transform .22s ease,border-color .22s ease;
  display:flex;flex-direction:column;
}
.news-card:hover{box-shadow:var(--shadow);transform:translateY(-4px);border-color:transparent}
.news-card__meta{display:flex;gap:14px;color:var(--grey);font-size:12.5px;margin-bottom:12px}
.news-card__title{font-family:var(--display);font-size:19px;line-height:1.2;text-transform:uppercase;margin-bottom:12px}
.news-card__title a:hover{color:var(--pink)}
.news-card__teaser{color:var(--grey);font-size:14.5px;margin:0 0 18px;flex:1}
.news-card__more{color:var(--pink);font-weight:700;font-size:13px;text-transform:uppercase;letter-spacing:.5px}
.news-card__more:hover{text-decoration:underline}

/* ===== FOOTER ===== */
.footer{background:#121317;color:#c8cbd6}  /* darker off-black, not grey */
.footer__inner{
  display:grid;grid-template-columns:1.6fr 1fr 1fr 1.2fr;gap:40px;
  padding:92px 0 48px;
}
.footer__logo{height:52px;width:auto;margin-bottom:18px}
.footer__strap{
  font-family:var(--display);font-size:26px;text-transform:uppercase;color:#fff;
  margin:0 0 20px;line-height:1.1;max-width:12ch;
}
.footer__contact li{margin-bottom:10px;font-size:14.5px}
.footer__contact strong{color:#fff}
.footer__contact a:hover{color:var(--pink)}
.footer__heading{
  font-family:var(--display);font-size:16px;text-transform:uppercase;letter-spacing:.5px;
  color:#fff;margin-bottom:18px;
}
.footer__col ul li{margin-bottom:11px}
.footer__col ul a{font-size:14.5px}
.footer__col ul a:hover{color:var(--pink)}
.footer__social-strap{margin:-10px 0 16px;font-size:14.5px}
.footer__icons{display:flex;gap:12px}
.footer__icons a{
  width:40px;height:40px;border-radius:50%;
  display:grid;place-items:center;
  background:rgba(255,255,255,.08);color:#fff;
  transition:background .2s ease,transform .2s ease;
}
.footer__icons a:hover{background:var(--pink);transform:translateY(-3px)}
.footer__bottom{border-top:1px solid rgba(255,255,255,.10)}
.footer__bottom-inner{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:20px 0;font-size:13px;color:#9ea3b3;
}
.footer__powered strong{color:#fff}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media(max-width:1024px){
  .news__grid{grid-template-columns:repeat(2,1fr)}
  .footer__inner{grid-template-columns:1fr 1fr;gap:36px}
}

@media(max-width:900px){
  /* Mobile nav */
  .hamburger{display:flex}
  .nav{
    position:fixed;top:0;right:0;bottom:0;
    width:min(320px,84vw);
    background:#fff;
    box-shadow:-10px 0 40px rgba(0,0,0,.18);
    transform:translateX(100%);
    transition:transform .32s cubic-bezier(.4,0,.2,1);
    padding:90px 20px 30px;
    overflow-y:auto;
    z-index:65;
  }
  .nav.is-open{transform:translateX(0)}
  .nav__list{flex-direction:column;align-items:stretch;gap:2px}
  .nav__link{color:var(--ink);justify-content:space-between;font-size:16px;padding:14px 12px;border-radius:8px}
  .nav__link:hover{background:var(--bg-soft);color:var(--pink)}
  .header .nav__link{color:var(--ink)} /* always dark inside the slide panel */

  .nav__drop{
    position:static;opacity:1;visibility:visible;transform:none;
    box-shadow:none;padding:0 0 6px 12px;min-width:0;
    max-height:0;overflow:hidden;
    transition:max-height .3s ease;
  }
  .nav__item.is-open .nav__drop{max-height:300px}
  .nav__item.is-open .nav__caret{transform:rotate(180deg)}
  .nav__caret{transition:transform .25s ease}
}

@media(max-width:820px){
  .fresh__inner{grid-template-columns:1fr;gap:34px}
  .fresh__media{order:-1}
  .fresh__title{max-width:none}
  .cats__grid{grid-template-columns:1fr;max-width:420px;margin-inline:auto}
  .miah__grid{grid-template-columns:1fr}

  .searchbar{flex-direction:column}
  .searchbar__field + .searchbar__field{border-left:0;border-top:1px solid var(--line)}
  .searchbar__btn{padding:16px}

  .job{flex-direction:column;align-items:flex-start;text-align:left}
  .job__action{align-self:stretch}
  .job__action .btn{display:block;text-align:center}
  .job__featured{right:auto;left:26px}
}

@media(max-width:560px){
  :root{--header-h:70px}
  .hero{padding-top:calc(var(--header-h) + 70px);padding-bottom:150px}
  .news__grid{grid-template-columns:1fr}
  .footer__inner{grid-template-columns:1fr;gap:30px;padding:48px 0 36px}
  .footer__bottom-inner{flex-direction:column;text-align:center;gap:8px}
  .header__logo img{height:40px}
}

/* ============================================================
   SHARED SUB-PAGE COMPONENTS
   Reusable building blocks for interior pages (About, Sectors,
   Employers, Contact, etc.). Reuses the :root tokens + brand
   magenta (--pink #DE0B80) and matches the homepage craft:
   Oswald uppercase headings, rounded magenta→white transition,
   the .cat / .searchbar look, and the same responsive rhythm.

   Page skeleton for a sub-page:
     <header class="header">…same as home…</header>
     <main>
       <section class="page-hero">
         <div class="container">
           <h1 class="page-hero__title">About Us</h1>
           <p class="page-hero__sub">Your local recruitment partner.</p>
         </div>
       </section>
       …prose / split / featurecards / steps / cta / contact…
     </main>
   The transparent-over-magenta then solid-white-on-scroll header
   behaviour is inherited unchanged from the homepage rules above,
   so the same #header + .is-scrolled JS drives it here too.
   ============================================================ */

/* ----- PAGE HERO -----------------------------------------------
   Magenta banner the transparent header sits over. Shorter than
   the homepage hero, with the same faint job-word art wash and a
   rounded-bottom that eases into the white content below (mirrors
   the homepage's .scroll-over rounded transition). */
.page-hero{
  position:relative;
  margin-top:calc(-1 * var(--header-h));      /* pull up under the transparent header */
  padding-top:calc(var(--header-h) + 56px);
  padding-bottom:84px;
  background:var(--pink);
  color:#fff;
  text-align:center;
  overflow:hidden;
  border-bottom-left-radius:52px;
  border-bottom-right-radius:52px;
}
/* faint repeated job-word typography wash, same asset as the home hero,
   knocked right back so the title stays legible */
.page-hero::before{
  content:"";
  position:absolute;inset:0;
  z-index:0;
  background:none;
  pointer-events:none;
}
.page-hero .container{position:relative;z-index:1}
.page-hero .hero__wrow{font-size:clamp(46px,8vw,104px)}
.page-hero__title{
  font-family:var(--display);
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.5px;
  font-size:clamp(38px,6vw,74px);
  line-height:1;
  margin:0 auto;
  max-width:18ch;
}
.page-hero__sub{
  color:rgba(255,255,255,.92);
  font-size:clamp(16px,1.8vw,20px);
  font-weight:500;
  margin:16px auto 0;
  max-width:640px;
}

/* ----- PROSE (readable article body) ---------------------------
   Wrap long-form copy in <article class="prose">…</article>. */
.prose{
  width:min(760px,92%);
  margin-inline:auto;
  padding:var(--sec-y) 0;
  color:var(--ink);
  font-size:16.5px;
}
.prose h2{
  font-size:clamp(26px,3vw,38px);
  text-transform:uppercase;
  color:var(--ink);
  margin:44px 0 16px;
}
.prose h2:first-child{margin-top:0}
.prose h3{
  font-size:clamp(20px,2.2vw,25px);
  text-transform:uppercase;
  color:var(--pink);
  margin:32px 0 12px;
}
.prose p{color:var(--grey);margin:0 0 18px}
.prose a{color:var(--pink);font-weight:600}
.prose a:hover{text-decoration:underline}
.prose ul{margin:0 0 20px;padding:0}
.prose ul li{
  position:relative;
  padding-left:28px;
  margin-bottom:12px;
  color:var(--grey);
}
.prose ul li::before{
  content:"";
  position:absolute;left:0;top:9px;
  width:10px;height:10px;border-radius:3px;
  background:var(--pink);
}
.prose strong{color:var(--ink)}

/* ----- SPLIT (two-column text + image) -------------------------
   <section class="split"><div class="split__text">…</div>
   <div class="split__media"><img…></div></section>
   Add .split--flip to put the image on the left. */
.split{padding:var(--sec-y) 0}
.split .container,
.split__inner,
.split:not(:has(.split__inner)):not(:has(> .container)){
  display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center;
  width:min(1200px,92%);margin-inline:auto;
}
.split__text h2{
  font-size:clamp(28px,3.4vw,44px);
  text-transform:uppercase;
  color:var(--ink);
  margin-bottom:20px;
  max-width:16ch;
}
.split__text p{color:var(--grey);margin:0 0 16px;font-size:16.5px}
.split__media img{
  margin-inline:auto;width:100%;height:auto;
  border-radius:16px;
  box-shadow:var(--shadow);
}
.split--flip .split__media{order:-1}

/* ----- FEATURE / SERVICE CARDS ---------------------------------
   Icon feature grid. Reuses the .cat look (round magenta icon,
   lift on hover). <div class="featurecards"><div class="cat">…</div>…</div>
   Wrap in a .container for width. */
.featurecards{
  display:grid;grid-template-columns:repeat(3,1fr);gap:26px;
  padding:20px 0;
}
.featurecards .cat{cursor:default}
.featurecards .cat p{color:var(--grey);font-size:14.5px;margin:4px 0 0}

/* ----- STEPS (numbered how-it-works) ---------------------------
   <ol class="steps"><li class="step"><h3>Register</h3><p>…</p></li>…</ol>
   Numbers are auto-generated. */
.steps{
  counter-reset:step;
  list-style:none;
  display:grid;grid-template-columns:repeat(3,1fr);gap:26px;
  width:min(1200px,92%);margin:56px auto 0;padding:0;
}
.steps li{list-style:none}
.step{
  position:relative;
  background:#fff;border:1px solid var(--line);border-radius:14px;
  padding:44px 28px 30px;
  box-shadow:var(--shadow-sm);
  transition:box-shadow .22s ease,transform .22s ease,border-color .22s ease;
}
.step:hover{box-shadow:var(--shadow);transform:translateY(-4px);border-color:transparent}
.step::before{
  counter-increment:step;
  content:counter(step);
  position:absolute;top:-22px;left:28px;
  width:52px;height:52px;border-radius:50%;
  background:var(--pink);color:#fff;
  font-family:var(--display);font-weight:700;font-size:24px;
  display:grid;place-items:center;
  box-shadow:0 10px 24px rgba(222,11,128,.32);
}
.step h3{font-size:21px;text-transform:uppercase;color:var(--ink);margin-bottom:8px}
.step p{color:var(--grey);font-size:15px;margin:0}

/* ----- CTA BAND ------------------------------------------------
   <section class="cta"><div class="container"><h2>…</h2>
   <p>…</p><a class="btn cta__btn" href="…">…</a></div></section> */
.cta{
  background:var(--pink);
  color:#fff;
  text-align:center;
  padding:72px 0;
  border-radius:24px;
  width:min(1200px,92%);
  margin:var(--sec-y) auto;
}
.cta h2{
  font-size:clamp(28px,3.6vw,46px);
  text-transform:uppercase;
  color:#fff;
  margin-bottom:14px;
  max-width:20ch;margin-inline:auto;
}
.cta p{
  color:rgba(255,255,255,.92);
  font-size:17px;
  margin:0 auto 28px;
  max-width:560px;
}
.cta__btn{
  background:#fff;color:var(--pink);
  padding:15px 40px;font-size:15px;
}
.cta__btn:hover{background:#fff;color:var(--pink-deep);transform:translateY(-2px)}

/* ----- CONTACT PAGE --------------------------------------------
   <div class="contact-grid"><div class="contact-info">…</div>
   <form class="contact-form">
     <div class="field"><label>Name</label><input …></div>
     <div class="field"><label>Message</label><textarea …></textarea></div>
     <button class="btn btn--pink">Send</button>
   </form></div>
   Inputs match the .searchbar field styling (white, rounded, pink focus). */
.contact-grid{
  display:grid;grid-template-columns:1fr 1.2fr;gap:48px;align-items:start;
  width:min(1100px,92%);margin:70px auto;
}
.contact-info h2{
  font-size:clamp(26px,3vw,38px);text-transform:uppercase;
  color:var(--ink);margin-bottom:18px;
}
.contact-info p{color:var(--grey);margin:0 0 20px}
.contact-info ul li{
  display:flex;align-items:flex-start;gap:12px;
  margin-bottom:16px;color:var(--grey);font-size:15.5px;
}
.contact-info ul li strong{display:block;color:var(--ink);font-weight:600}
.contact-info a:hover{color:var(--pink)}

.contact-form{
  background:#fff;
  border:1px solid var(--line);
  border-radius:16px;
  box-shadow:var(--shadow-sm);
  padding:34px;
  display:grid;gap:18px;
}
.field{display:flex;flex-direction:column;gap:8px}
.field label{
  font-family:var(--display);font-weight:600;
  text-transform:uppercase;letter-spacing:.5px;
  font-size:13px;color:var(--ink);
}
.field input,
.field textarea,
.field select{
  font-family:var(--body);font-size:15px;color:var(--ink);
  background:#fff;
  border:1px solid var(--line);
  border-radius:10px;
  padding:14px 16px;
  width:100%;
  transition:border-color .2s ease,box-shadow .2s ease;
}
.field textarea{min-height:150px;resize:vertical}
.field input::placeholder,
.field textarea::placeholder{color:#9aa0ad}
.field input:focus,
.field textarea:focus,
.field select:focus{
  outline:0;
  border-color:var(--pink);
  box-shadow:0 0 0 3px rgba(222,11,128,.14);
}
.contact-form .btn{justify-self:start;margin-top:4px}

/* ----- SUB-PAGE RESPONSIVE (matches home breakpoints) --------- */
@media(max-width:1024px){
  .featurecards{grid-template-columns:repeat(2,1fr)}
  .steps{grid-template-columns:repeat(3,1fr)}
}
@media(max-width:820px){
  .split .container,
  .split__inner,
  .split:not(:has(.split__inner)):not(:has(> .container)){grid-template-columns:1fr;gap:34px}
  .split__media,
  .split--flip .split__media{order:-1}
  .split__text h2{max-width:none}
  .featurecards{grid-template-columns:1fr;max-width:420px;margin-inline:auto}
  .steps{grid-template-columns:1fr;max-width:460px;gap:38px}
  .contact-grid{grid-template-columns:1fr;gap:34px}
}
@media(max-width:560px){
  .page-hero{
    padding-bottom:60px;
    border-bottom-left-radius:34px;border-bottom-right-radius:34px;
  }
  .cta{padding:52px 0;margin:var(--sec-y) auto;border-radius:18px}
  .contact-form{padding:24px}
}

/* ============================================================
   JOB DETAIL / BLOG POST / PAGINATION / AUTH
   More interior-page building blocks. Same tokens, magenta
   (--pink #DE0B80), Oswald uppercase heads, .prose body,
   .field form styling and the same responsive rhythm.
   ============================================================ */

/* ----- JOB DETAIL ----------------------------------------------
   Individual job page. Two columns: a main column carrying the
   job description/requirements (use .prose inside) and a sticky
   "job summary" card on the right with meta + Apply.
     <section class="jobdetail"><div class="jobdetail__inner">
       <div class="jobdetail__main"><article class="prose">…</article></div>
       <aside class="jobdetail__side">
         <div class="jobdetail__card jobsummary">
           <h3 class="jobsummary__title">Job Summary</h3>
           <ul class="jobsummary__meta">
             <li><span>Sector</span><strong>Warehouse</strong></li>… </ul>
           <a class="btn btn--pink jobsummary__apply" href="#apply">Apply Now</a>
         </div>
         <form class="jobdetail__card applyform" id="apply">
           <h3 class="applyform__title">Apply for this role</h3>
           <div class="field">…</div>
           <button class="btn btn--pink">Submit application</button>
         </form>
       </aside>
     </div></section> */
.jobdetail{padding:var(--sec-y) 0}
.jobdetail__inner{
  display:grid;grid-template-columns:1fr 360px;gap:48px;align-items:start;
  width:min(1200px,92%);margin-inline:auto;
}
.jobdetail__main .prose{width:100%;padding:0;margin:0}
.jobdetail__side{
  position:sticky;top:calc(var(--header-h) + 20px);
  display:grid;gap:22px;
}
.jobdetail__card{
  background:#fff;border:1px solid var(--line);border-radius:16px;
  box-shadow:var(--shadow-sm);padding:30px;
}
.jobsummary__title,
.applyform__title{
  font-family:var(--display);font-size:21px;text-transform:uppercase;
  color:var(--ink);margin-bottom:20px;
}
.jobsummary__meta li{
  display:flex;align-items:baseline;justify-content:space-between;gap:16px;
  padding:12px 0;border-bottom:1px solid var(--line);
  font-size:14.5px;color:var(--grey);
}
.jobsummary__meta li:last-child{border-bottom:0}
.jobsummary__meta li span{font-weight:500}
.jobsummary__meta li strong{
  color:var(--ink);font-weight:600;text-align:right;
}
.jobsummary__meta .salary strong{color:var(--pink)}
.jobsummary__apply{
  display:block;width:100%;text-align:center;margin-top:22px;
}
.applyform{display:grid;gap:16px}
.applyform .field{gap:8px}
.applyform .btn{justify-self:stretch;text-align:center;margin-top:4px}

/* ----- BLOG POST -----------------------------------------------
   Article page. Meta row above a large .prose body, then a
   share / back-to-blog row at the foot.
     <article class="blogpost"><div class="blogpost__meta">
       <span>June 12, 2025</span><span>By FT Recruitment</span>
       <span>4 min read</span></div>
       <div class="prose">…large body…</div>
       <div class="blogpost__foot">
         <a class="blogpost__back" href="/blog/">&larr; Back to blog</a>
         <ul class="blogpost__share">
           <li><a href="#" aria-label="Share on Facebook">…svg…</a></li>… </ul>
       </div>
     </article> */
.blogpost{
  width:min(760px,92%);margin-inline:auto;padding:var(--sec-y) 0;
}
.blogpost__meta{
  display:flex;flex-wrap:wrap;gap:10px 22px;align-items:center;
  color:var(--grey);font-size:14px;font-weight:500;
  padding-bottom:24px;margin-bottom:12px;
  border-bottom:1px solid var(--line);
}
.blogpost__meta span{display:inline-flex;align-items:center;gap:8px}
.blogpost__meta span + span::before{
  content:"";width:4px;height:4px;border-radius:50%;
  background:var(--pink);margin-right:14px;
}
.blogpost .prose{width:100%;padding:0;margin:0}
.blogpost__foot{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:18px;margin-top:40px;padding-top:28px;
  border-top:1px solid var(--line);
}
.blogpost__back{
  font-family:var(--display);font-weight:600;text-transform:uppercase;
  letter-spacing:.5px;font-size:14px;color:var(--pink);
}
.blogpost__back:hover{text-decoration:underline}
.blogpost__share{display:flex;align-items:center;gap:10px}
.blogpost__share a{
  width:40px;height:40px;border-radius:50%;
  display:grid;place-items:center;
  background:var(--bg-soft);color:var(--pink);
  transition:background .2s ease,color .2s ease,transform .2s ease;
}
.blogpost__share a:hover{background:var(--pink);color:#fff;transform:translateY(-3px)}

/* ----- PAGINATION ----------------------------------------------
   Numbered pager for the blog list.
     <nav class="pagination" aria-label="Blog pages">
       <a class="pagination__link is-disabled" href="#" aria-disabled="true">Prev</a>
       <a class="pagination__link is-current" href="#" aria-current="page">1</a>
       <a class="pagination__link" href="/blog/page/2/">2</a>…
       <a class="pagination__link" href="/blog/page/2/">Next</a>
     </nav> */
.pagination{
  display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:8px;
  padding:20px 0 80px;
}
.pagination__link{
  min-width:44px;height:44px;padding:0 14px;
  display:inline-flex;align-items:center;justify-content:center;
  border:1px solid var(--line);border-radius:10px;
  background:#fff;color:var(--ink);
  font-family:var(--display);font-weight:600;font-size:15px;
  transition:background .2s ease,color .2s ease,border-color .2s ease;
}
.pagination__link:hover{border-color:var(--pink);color:var(--pink)}
.pagination__link.is-current{
  background:var(--pink);border-color:var(--pink);color:#fff;
}
.pagination__link.is-disabled{
  opacity:.45;pointer-events:none;
}

/* ----- AUTH CARD -----------------------------------------------
   Centered card for register / sign-in. Sits on the soft bg.
     <section class="authwrap"><div class="authcard">
       <h1 class="authcard__title">Sign In</h1>
       <p class="authcard__sub">Access your candidate dashboard.</p>
       <form class="authcard__form">
         <div class="field">…</div>
         <button class="btn btn--pink">Sign In</button>
       </form>
       <p class="authcard__alt">New here? <a href="/register/">Create an account</a></p>
     </div></section> */
.authwrap{
  background:var(--bg-soft);
  padding:70px 0 90px;
  display:grid;place-items:center;
}
.authcard{
  width:min(440px,92%);
  background:#fff;border:1px solid var(--line);border-radius:16px;
  box-shadow:var(--shadow);padding:40px 36px;
  text-align:center;
}
.authcard__title{
  font-size:clamp(28px,3vw,36px);text-transform:uppercase;
  color:var(--ink);margin-bottom:8px;
}
.authcard__sub{color:var(--grey);margin:0 0 28px;font-size:15px}
.authcard__form{display:grid;gap:18px;text-align:left}
.authcard__form .field label{font-size:12.5px}
.authcard__form .btn{justify-self:stretch;text-align:center;margin-top:4px}
.authcard__alt{
  color:var(--grey);font-size:14.5px;margin:24px 0 0;
}
.authcard__alt a{color:var(--pink);font-weight:600}
.authcard__alt a:hover{text-decoration:underline}

/* ----- RESPONSIVE (matches home + sub-page breakpoints) ------- */
@media(max-width:820px){
  .jobdetail__inner{grid-template-columns:1fr;gap:34px}
  .jobdetail__side{position:static;top:auto}
}
@media(max-width:560px){
  .jobdetail{padding:50px 0 70px}
  .jobdetail__card{padding:24px}
  .blogpost{padding:44px 0 70px}
  .blogpost__foot{flex-direction:column;align-items:flex-start;gap:22px}
  .authcard{padding:32px 24px}
  .authwrap{padding:50px 0 70px}
}


/* ============ News B (hover-reveal) — homepage + blog ============ */
.news-b {
  --news-b-pink: #DE0B80;
  --news-b-pink-deep: #DC0291;
  --news-b-ink: #252525;
  --news-b-grey: #7A7A7A;
  --news-b-hairline: #E6E8EE;
  --news-b-soft: #F0F5F7;
  --news-b-radius: 14px;
  --news-b-shadow: 0 14px 40px rgba(20, 20, 40, .10);
  --news-b-shadow-sm: 0 6px 18px rgba(20, 20, 40, .08);
  --news-b-ease: cubic-bezier(.22, .61, .36, 1);
  box-sizing: border-box;
  background: var(--news-b-soft);
  padding: var(--sec-y) 24px;
  font-family: "Montserrat", system-ui, sans-serif;
  color: var(--news-b-ink);
}
.news-b *,
.news-b *::before,
.news-b *::after { box-sizing: border-box; }

.news-b-inner {
  max-width: 1200px;
  margin: 0 auto;
}

.news-b-head {
  margin-bottom: 34px;
}
.news-b-eyebrow {
  display: inline-block;
  font-family: "Oswald", sans-serif;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1.4px;
  font-size: 12px;
  color: var(--news-b-pink);
  margin-bottom: 8px;
}
.news-b-heading {
  margin: 0;
  font-family: "Oswald", sans-serif;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .3px;
  font-size: clamp(32px, 4vw, 48px);
  line-height: 1.05;
  color: var(--news-b-ink);
}

.news-b-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 26px;
}

.news-b-card { display: flex; }

.news-b-article {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 4 / 5;
  border-radius: var(--news-b-radius);
  overflow: hidden;
  background: var(--news-b-ink);
  box-shadow: var(--news-b-shadow-sm);
  transition: box-shadow .5s var(--news-b-ease), transform .5s var(--news-b-ease);
  isolation: isolate;
}
.news-b-article:hover,
.news-b-article:focus-within {
  box-shadow: var(--news-b-shadow);
  transform: translateY(-4px);
}

.news-b-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
  transform: scale(1.001);
  transition: transform 1.1s var(--news-b-ease);
}
.news-b-article:hover .news-b-img,
.news-b-article:focus-within .news-b-img {
  transform: scale(1.06);
}

.news-b-scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(to top, rgba(15, 15, 25, .82) 0%, rgba(15, 15, 25, .42) 34%, rgba(15, 15, 25, 0) 62%);
  transition: opacity .5s var(--news-b-ease);
}

/* Resting state — date + title over the gradient */
.news-b-rest {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  padding: 22px 22px 24px;
  transition: opacity .4s var(--news-b-ease), transform .55s var(--news-b-ease);
}
.news-b-article:hover .news-b-rest,
.news-b-article:focus-within .news-b-rest {
  opacity: 0;
  transform: translateY(10px);
}

.news-b-date {
  display: block;
  font-family: "Oswald", sans-serif;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  font-size: 11px;
  color: #fff;
  opacity: .85;
  margin-bottom: 9px;
}
.news-b-title {
  margin: 0;
  font-family: "Oswald", sans-serif;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .3px;
  font-size: 18px;
  line-height: 1.22;
  color: #fff;
}

/* Reveal panel — magenta, slides up on hover */
.news-b-reveal {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 3;
  padding: 26px 24px 26px;
  background: linear-gradient(160deg, var(--news-b-pink) 0%, var(--news-b-pink-deep) 100%);
  transform: translateY(100%);
  transition: transform .55s var(--news-b-ease);
  will-change: transform;
}
.news-b-article:hover .news-b-reveal,
.news-b-article:focus-within .news-b-reveal {
  transform: translateY(0);
}

.news-b-date--reveal {
  opacity: .9;
  margin-bottom: 10px;
}
.news-b-title--reveal {
  font-size: 18px;
  margin-bottom: 12px;
}

.news-b-excerpt {
  margin: 0 0 18px;
  font-family: "Montserrat", sans-serif;
  font-size: 13.5px;
  line-height: 1.55;
  color: rgba(255, 255, 255, .92);
}

/* Staggered lift-in of the inner content once the panel is up */
.news-b-reveal .news-b-date--reveal,
.news-b-reveal .news-b-title--reveal,
.news-b-reveal .news-b-excerpt,
.news-b-reveal .news-b-link {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity .45s var(--news-b-ease), transform .45s var(--news-b-ease);
}
.news-b-article:hover .news-b-reveal .news-b-date--reveal,
.news-b-article:focus-within .news-b-reveal .news-b-date--reveal { transition-delay: .14s; }
.news-b-article:hover .news-b-reveal .news-b-title--reveal,
.news-b-article:focus-within .news-b-reveal .news-b-title--reveal { transition-delay: .2s; }
.news-b-article:hover .news-b-reveal .news-b-excerpt,
.news-b-article:focus-within .news-b-reveal .news-b-excerpt { transition-delay: .26s; }
.news-b-article:hover .news-b-reveal .news-b-link,
.news-b-article:focus-within .news-b-reveal .news-b-link { transition-delay: .32s; }
.news-b-article:hover .news-b-reveal > *,
.news-b-article:focus-within .news-b-reveal > * {
  opacity: 1;
  transform: translateY(0);
}
.news-b-article:hover .news-b-reveal .news-b-date--reveal { opacity: .9; }

.news-b-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: "Oswald", sans-serif;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-size: 13px;
  color: #fff;
  text-decoration: none;
  padding-bottom: 3px;
  border-bottom: 2px solid rgba(255, 255, 255, .45);
  transition: border-color .35s var(--news-b-ease);
}
.news-b-link:hover {
  border-bottom-color: #fff;
}
.news-b-arrow {
  width: 17px;
  height: 17px;
  transition: transform .35s var(--news-b-ease);
}
.news-b-link:hover .news-b-arrow {
  transform: translateX(4px);
}

.news-b-link:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 3px;
  border-radius: 2px;
}

@media (max-width: 900px) {
  .news-b-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .news-b { padding: 52px 18px; }
  .news-b-grid { grid-template-columns: 1fr; gap: 20px; }
  .news-b-article { aspect-ratio: 3 / 4; }
}

@media (prefers-reduced-motion: reduce) {
  .news-b-article,
  .news-b-img,
  .news-b-rest,
  .news-b-reveal,
  .news-b-reveal > *,
  .news-b-arrow {
    transition-duration: .01ms !important;
    transition-delay: 0ms !important;
  }
}

/* ============ Miah B (ranked, no images) — homepage ============ */
.miah-b{--pink:#DE0B80;--pink-deep:#DC0291;--ink:#252525;--grey:#636974;--hair:#E6E8EE;--soft:#F0F5F7;font-family:"Montserrat",system-ui,sans-serif;color:var(--ink);max-width:1040px;margin:0 auto;padding:var(--sec-y) 24px;box-sizing:border-box}
.miah-b *,.miah-b *::before,.miah-b *::after{box-sizing:border-box}

.miah-b-head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;flex-wrap:wrap;margin-bottom:22px}
.miah-b-kicker{font-family:"Oswald",sans-serif;font-weight:600;text-transform:uppercase;letter-spacing:.16em;font-size:12px;color:var(--pink);margin:0 0 6px}
.miah-b-title{font-family:"Oswald",sans-serif;font-weight:700;text-transform:uppercase;letter-spacing:.3px;font-size:clamp(30px,4vw,46px);line-height:1;margin:0;color:var(--ink)}
.miah-b-sub{font-size:13.5px;color:var(--grey);margin:8px 0 0;max-width:38ch}

.miah-b-curator{display:flex;align-items:center;gap:12px}
.miah-b-avatar{width:52px;height:52px;border-radius:50%;object-fit:cover;flex:none;box-shadow:0 0 0 2px #fff,0 0 0 4px var(--pink)}
.miah-b-curator-meta{display:flex;flex-direction:column;line-height:1.25}
.miah-b-curator-name{font-family:"Oswald",sans-serif;font-weight:600;text-transform:uppercase;letter-spacing:.3px;font-size:14px;color:var(--ink)}
.miah-b-curator-role{font-size:12px;color:var(--grey)}

.miah-b-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:14px}

.miah-b-card{background:#fff;border:1px solid var(--hair);border-radius:14px;box-shadow:0 6px 18px rgba(20,20,40,.08);overflow:hidden;transition:box-shadow .28s ease,transform .28s ease,border-color .28s ease}
.miah-b-card:hover{box-shadow:0 14px 40px rgba(20,20,40,.10);transform:translateY(-3px);border-color:transparent}

.miah-b-link{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:22px;padding:16px 22px 16px 16px;text-decoration:none;color:inherit}

.miah-b-rank{font-family:"Oswald",sans-serif;font-weight:700;font-size:58px;line-height:.86;letter-spacing:-1px;color:var(--pink);width:74px;text-align:center;font-variant-numeric:tabular-nums;transition:color .28s ease,transform .28s ease}
.miah-b-card:hover .miah-b-rank{color:var(--pink-deep);transform:scale(1.06)}

.miah-b-thumb{width:96px;height:72px;border-radius:10px;overflow:hidden;flex:none;background:var(--soft);position:relative}
.miah-b-thumb img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s cubic-bezier(.2,.7,.2,1)}
.miah-b-card:hover .miah-b-thumb img{transform:scale(1.08)}

.miah-b-body{min-width:0;display:flex;flex-direction:column;gap:8px}
.miah-b-role{font-family:"Oswald",sans-serif;font-weight:600;text-transform:uppercase;letter-spacing:.3px;font-size:19px;line-height:1.1;color:var(--ink);transition:color .2s ease}
.miah-b-card:hover .miah-b-role{color:var(--pink-deep)}

.miah-b-facts{display:flex;align-items:center;flex-wrap:wrap;gap:8px 10px;font-size:12.5px;color:var(--grey)}
.miah-b-fact{display:inline-flex;align-items:center;gap:5px;white-space:nowrap}
.miah-b-ico{color:var(--pink);flex:none}
.miah-b-sector{color:var(--ink);font-weight:600}
.miah-b-salary{color:var(--ink);font-weight:700}
.miah-b-dot{width:3px;height:3px;border-radius:50%;background:var(--hair);flex:none}

.miah-b-tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:2px}
.miah-b-tag{font-size:10.5px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--grey);background:var(--soft);border:1px solid var(--hair);padding:3px 9px;border-radius:999px;line-height:1.4}
.miah-b-tag-urgent{color:#fff;background:var(--pink);border-color:var(--pink)}

.miah-b-cta{font-family:"Oswald",sans-serif;font-weight:600;text-transform:uppercase;letter-spacing:.06em;font-size:13px;color:var(--pink-deep);display:inline-flex;align-items:center;gap:6px;padding:9px 16px;border:1.5px solid var(--pink);border-radius:999px;flex:none;transition:background .24s ease,color .24s ease,box-shadow .24s ease}
.miah-b-card:hover .miah-b-cta{background:var(--pink);color:#fff;box-shadow:0 6px 18px rgba(222,11,128,.28)}
.miah-b-arrow{transition:transform .28s ease}
.miah-b-card:hover .miah-b-arrow{transform:translateX(4px)}

.miah-b-link:focus-visible{outline:none}
.miah-b-link:focus-visible .miah-b-role{text-decoration:underline;text-decoration-color:var(--pink);text-underline-offset:3px}
.miah-b-card:focus-within{border-color:var(--pink);box-shadow:0 0 0 3px rgba(222,11,128,.18)}

@media(max-width:640px){
  .miah-b-title{font-size:28px}
  .miah-b-link{grid-template-columns:auto 1fr;grid-template-areas:"rank body" "cta cta";gap:14px 16px;padding:16px}
  .miah-b-rank{grid-area:rank;font-size:46px;width:56px}
  .miah-b-thumb{display:none}
  .miah-b-body{grid-area:body}
  .miah-b-cta{grid-area:cta;justify-content:center;width:100%}
}

/* ===== A11y: visible keyboard focus (WCAG AA) ===== */
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,[tabindex]:focus-visible,.miah-b-link:focus-visible,.news-b-link:focus-visible{
  outline:3px solid var(--pink);outline-offset:2px;border-radius:4px;
}
/* ===== Header "Register" CTA ===== */
.nav__cta{margin-left:6px}
.nav__cta > a{display:inline-flex;align-items:center;padding:9px 18px;border-radius:999px;background:#fff;color:var(--pink);font-weight:700;font-size:14px;border:1.5px solid #fff;transition:background .2s ease,color .2s ease,border-color .2s ease}
.nav__cta > a:hover{background:var(--pink-lite);color:#fff;border-color:var(--pink-lite)}
.header.is-scrolled .nav__cta > a{background:var(--pink);color:#fff;border-color:var(--pink)}
.header.is-scrolled .nav__cta > a:hover{background:var(--pink-deep);border-color:var(--pink-deep)}
@media(max-width:900px){.nav__cta{margin:8px 0 0}.nav__cta > a{justify-content:center;width:100%;background:var(--pink);color:#fff;border-color:var(--pink)}}


/* FT-REVEAL-FOOTER */
/* ============================================================
   PAGE-HERO EYEBROW — breadcrumb-style light-pink kicker that
   names the header section, on every interior page.
   ============================================================ */
.page-hero__eyebrow{
  display:inline-block;
  font-family:var(--display);
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:.16em;
  font-size:clamp(12px,1.25vw,15px);
  color:#FBD0E7;                 /* light pink, reads on the magenta hero */
  margin:0 0 12px;
}

/* ============================================================
   REVEAL FOOTER — the content sheet lifts on scroll to reveal
   the pinned footer beneath a curved bottom edge (mirrors the
   homepage's rounded-top scroll-over).
   ============================================================ */
.footer{
  position:sticky; bottom:0; z-index:0;
  margin-top:calc(-1 * clamp(30px,4vw,52px));   /* tuck up behind the sheet's curved bottom */
}
main#top{
  position:relative; z-index:1;
  background:var(--white);
  border-bottom-left-radius:clamp(30px,4vw,52px);
  border-bottom-right-radius:clamp(30px,4vw,52px);
}
/* homepage: the white scroll-over sheet is the sheet that reaches the
   bottom, so round it too */
.scroll-over{
  border-bottom-left-radius:clamp(30px,4vw,52px);
  border-bottom-right-radius:clamp(30px,4vw,52px);
}
/* if the bottom-most section paints a full-bleed colour (e.g. the soft-grey
   auth grid), round it too so the reveal curve reads (never the top hero) */
main#top > section:last-of-type:not(.page-hero),
.scroll-over > section:last-of-type:not(.page-hero){
  border-bottom-left-radius:clamp(30px,4vw,52px);
  border-bottom-right-radius:clamp(30px,4vw,52px);
}
/* homepage only: the pinned .hero would peek magenta through the scroll-over's
   rounded bottom corners at the very end of scroll. Back the lower sheet with
   the footer colour (above the hero z1, below the white sheet z2) so the reveal
   curve always reads as the dark footer. */
main#top:has(.scroll-over)::after{
  content:"";
  position:absolute; left:0; right:0; top:100vh; bottom:0;
  background:#121317;
  z-index:1;
  pointer-events:none;
}

/* responsive section rhythm */
@media(max-width:820px){:root{--sec-y:60px}}
@media(max-width:560px){:root{--sec-y:46px}}

/* 4-item sector grid: 2x2 balanced (avoids a lone orphan card) */
.featurecards--quad{grid-template-columns:repeat(2,1fr);max-width:820px;margin-inline:auto}
@media(max-width:560px){.featurecards--quad{grid-template-columns:1fr;max-width:420px}}