/* ═══════════════════════════════════════════════════════════════
   EMPLOYERS HUB PAGE — styles scoped to employers.html only.
   Built 2026-10-12 (ALLUKNEW-9). Reuses the site's existing design tokens
   and shared components (.wrap, .eyebrow, .btn, .glow-region, .reveal,
   .stats/.stat, .cert-grid/.cert-item, .industry-grid/.industry-card,
   .why__pillars/.pillar, .cta-band) verbatim — those are the same
   components already live on the homepage, reused here for visual
   consistency rather than duplicated or reworded. Only the components
   below (breadcrumb, compact hero, 7-card service grid, FAQ list) are
   new, built specifically for this page. */




/* --emp-muted: same page-local contrast fix used on press-media.css (css/press-media.css) --
   --ink-secondary measures 4.38:1 on white, just under the 4.5:1 floor for normal text;
   this darkened value measures 5.1-5.5:1 on every background this page uses it against.
   Used only for NEW text introduced on this page (service-card / faq); the reused shared
   components above (.industry-card, .cert-item, .pillar, .stat) keep their own existing
   colours verbatim, matching the homepage's already-shipped versions of the same components --
   not a new introduction on this page, out of scope to fix here. */
:root{ --emp-muted:#6A6584; }




/* ---------- breadcrumb (sits inside the hero, above the eyebrow) ---------- */
.emp-crumb{
  display:flex; align-items:center; gap:.5rem; flex-wrap:wrap;
  font-size:.8125rem; font-weight:600; color:rgba(255,255,255,.68);
  margin-bottom:1.25rem; letter-spacing:.01em;
}
.emp-crumb a{ color:rgba(255,255,255,.86); transition:color .2s; }
.emp-crumb a:hover{ color:#fff; text-decoration:underline; }
.emp-crumb svg{ width:12px; height:12px; flex-shrink:0; opacity:.6; }
.emp-crumb span[aria-current]{ color:#fff; }




/* ---------- compact hero (page banner, not the homepage hero) ---------- */
.emp-hero.hero{ min-height:unset; padding-block:clamp(3.25rem,7vw,4.5rem); }
/* 2026-10-14 (readability fix): new photo -- a wide night office shot, mirrored so its
   naturally dark, uncluttered zone sits on the LEFT under .hero__content (see
   img/a-team-working-late-in-a-modern-office-a.jpg for how it was built). object-position
   keeps that dark band + the lit office cluster both in frame at hero height. */
.emp-hero .hero__img{ object-position:34% 42%; }
/* Extra page-local scrim on top of the shared .hero__scrim (css/sections.css): that shared
   gradient was tuned for a different, busier photo and left light/bright pixels (a window,
   pale curtain) sitting directly under the H1 on this page -- the exact "unable to read
   content" bug reported. This adds a flat dark layer behind just the text column, so
   contrast holds regardless of which part of the photo ends up there. */
.emp-hero .hero__content{ position:relative; }
.emp-hero .hero__content::before{
  content:''; position:absolute; z-index:-1; pointer-events:none;
  inset:-1.5rem -1.25rem -1.5rem -100vw;
  background:linear-gradient(100deg, rgba(var(--surface-dark-rgb),.85) 0%, rgba(var(--surface-dark-rgb),.85) 78%, rgba(var(--surface-dark-rgb),0) 100%);
}

/* .emp-hero__stats/.emp-hero__stat removed 2026-10-15 (ARAUK-2): the stats strip was dropped
   from the hero on request -- the same 4 figures are still shown in #why-employers .stats
   lower on the page, untouched. */




/* ---------- section head (left-aligned, distinct from the homepage's centred .sec-head) ---------- */
.emp-section-head{ max-width:680px; margin-bottom:clamp(2rem,4vw,2.75rem); }
.emp-section-head .eyebrow{ justify-content:flex-start; }
.emp-section-head h2{
  font-size:clamp(1.5rem,2.4vw,2.5rem); line-height:1.15; font-weight:800;
  letter-spacing:-.015em; color:var(--ink);
}
.emp-section-head p{ margin-top:1rem; font-size:1.0625rem; color:var(--emp-muted); line-height:1.65; }

/* decorative accent bar under the eyebrow (own motif, not Reed's dot-row -- a short brand
   gradient stroke with one offset accent dot, reused on both the services and industries
   section heads so the two redesigned sections read as one family). Pure decoration:
   aria-hidden, no text, so it carries no content-provenance weight. */
.emp-accent-bar{
  display:flex; align-items:center; gap:.4rem; margin:.65rem 0 1.1rem;
}
.emp-accent-bar::before{
  content:''; width:46px; height:4px; border-radius:var(--radius-pill);
  background:linear-gradient(90deg, var(--primary), var(--secondary));
}
.emp-accent-bar::after{
  content:''; width:7px; height:7px; border-radius:50%; background:var(--secondary);
}




/* ═══════════════ SEVEN WAYS TO HIRE — service cards ═══════════════ */

.service-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:1.1rem; }

/* 2026-10-14 redesign (reference: reed.com/employers' photo-circle cards -- restructured here
   as our own icon-tile treatment rather than copied photography: a gradient icon badge in the
   visual zone, a large faint corner numeral for the directory feel, and an always-on top
   accent bar instead of Reed's repeated plain-text eyebrow label). Copy itself (h3/p/link) is
   untouched -- only the surrounding chrome changed, so this stays layout/code only. */
.service-card{
  position:relative; overflow:hidden; padding:1.6rem 1.4rem 1.7rem;
  border:1px solid var(--border); border-radius:var(--radius-lg); background:#fff;
  transition:box-shadow .25s var(--ease), translate .25s var(--ease), border-color .25s var(--ease);
}
.service-card::before{
  content:''; position:absolute; top:0; left:0; right:0; height:4px;
  background:linear-gradient(90deg, var(--primary), var(--secondary));
}
.service-card:hover{ box-shadow:0 20px 40px rgba(58,37,156,.16); translate:0 -5px; border-color:rgba(58,37,156,.28); }
.service-card:hover .service-card__icon{ transform:scale(1.08) rotate(-4deg); }

/* large faint directory numeral, top-right corner -- decorative only (aria-hidden), echoes
   the "seven ways" count without duplicating the service name as copy */
.service-card__index{
  position:absolute; top:.65rem; right:1rem; font-family:var(--display); font-weight:800;
  font-size:2.5rem; line-height:1; color:var(--bg-secondary); -webkit-text-stroke:1px var(--border);
  pointer-events:none; user-select:none;
}

.service-card__icon{
  position:relative; display:inline-flex; align-items:center; justify-content:center;
  width:48px; height:48px; border-radius:14px; margin-bottom:1.1rem;
  background:linear-gradient(145deg, var(--primary) 0%, var(--secondary) 100%);
  box-shadow:0 10px 20px -4px rgba(58,37,156,.4);
  transition:transform .25s var(--ease);
}
.service-card__icon svg{ width:22px; height:22px; color:#fff; }

.service-card h3{ position:relative; font-size:1rem; font-weight:700; color:var(--ink); font-family:var(--display); line-height:1.3; }
/* --emp-muted (not --ink-secondary, 4.38:1 on white -- under the 4.5:1 floor at this size) */
.service-card p{ font-size:.8125rem; color:var(--emp-muted); line-height:1.6; margin-top:.5rem; }

.service-card__link{
  display:inline-flex; align-items:center; gap:.4rem; margin-top:1rem;
  font-size:.8125rem; font-weight:700; color:var(--secondary-hover); transition:color .2s;
}
.service-card__link svg{ width:11px; height:11px; transition:translate .2s; }
.service-card__link:hover{ color:var(--secondary-press); }
.service-card__link:hover svg{ translate:3px 0; }




/* ═══════════════ HIRING ACROSS EVERY SECTOR — section-level redesign only ═══════════════
   2026-10-14: the 8 .industry-card children are reused VERBATIM from the homepage's
   #industries (same class, same markup, same copy -- untouched here). Everything below is
   scoped to the #industries-for-employers id so none of it reaches the homepage's own
   #industries section: a tinted section wash + two soft blurred brand-colour blobs behind the
   grid, bigger icon tiles, and an alternating gradient direction per card (still only the two
   measured brand hues -- --primary/--secondary -- never a new colour) so the grid doesn't read
   as one flat repeated tile. */
.emp-industries{ position:relative; overflow:hidden; background:linear-gradient(180deg, var(--bg-primary) 0%, #fff 60%); }
.emp-industries__blob{
  position:absolute; z-index:0; border-radius:50%; pointer-events:none;
  filter:blur(50px); opacity:.9;
}
.emp-industries__blob--a{
  top:-40px; left:-60px; width:380px; height:380px;
  background:radial-gradient(circle, rgba(58,37,156,.4), transparent 72%);
}
.emp-industries__blob--b{
  bottom:-60px; right:-70px; width:440px; height:440px;
  background:radial-gradient(circle, rgba(30,143,201,.4), transparent 72%);
}
.emp-industries .wrap{ position:relative; z-index:1; }

#industries-for-employers .industry-card__icon{
  width:52px; height:52px; border-radius:15px; transition:transform .25s var(--ease);
}
#industries-for-employers .industry-card__icon svg{ width:22px; height:22px; }
#industries-for-employers .industry-card:hover .industry-card__icon{ transform:scale(1.1) rotate(4deg); }
/* alternate the gradient's direction/stop-order per card so neighbouring tiles don't look
   identical -- same two measured hues throughout, never a third colour */
#industries-for-employers .industry-card:nth-child(4n+2) .industry-card__icon{
  background:linear-gradient(145deg, var(--secondary) 0%, var(--primary) 100%);
}
#industries-for-employers .industry-card:nth-child(4n+3) .industry-card__icon{
  background:linear-gradient(235deg, var(--primary) 0%, var(--secondary) 100%);
}
#industries-for-employers .industry-card:nth-child(4n+4) .industry-card__icon{
  background:linear-gradient(235deg, var(--secondary) 0%, var(--primary) 100%);
}




/* ═══════════════ FAQ ═══════════════ */

.faq-list{ display:flex; flex-direction:column; gap:1rem; max-width:860px; }
.faq-item{
  padding:1.5rem 1.75rem; border:1px solid var(--border); border-radius:var(--radius-lg);
  background:#fff;
}
.faq-item h3{ font-size:1.0625rem; font-weight:700; color:var(--ink); font-family:var(--display); line-height:1.4; }
.faq-item p{ margin-top:.65rem; font-size:.9375rem; color:var(--emp-muted); line-height:1.65; }




/* ═══════════════ FEATURE SPLIT (ARAUK-6, permanent-recruitment.html) ═══════════════
   Image + content, alternating sides, a checklist and two CTAs -- built from a reference
   screenshot of roberthalf.com's Executive Search cross-sell card. Reuses .promo-checklist/
   .promo-checklist__icon and .btn verbatim (already live on index.html's Hiring OS section) for
   the bullets and buttons; only the light 2-column split wrapper + rounded photo treatment are
   new -- no light-background equivalent of this split existed anywhere else on the site.
   --radius-lg below is itself a roberthalf.com-measured token (see css/tokens.css), so the photo
   corners match that reference by construction, not by eyeballing a new value. */
.feature-split{
  display:grid; grid-template-columns:1fr 1fr; gap:clamp(2.5rem,5vw,4.5rem); align-items:center;
}
.feature-split--reverse .feature-split__media{ order:2; }
.feature-split--reverse .feature-split__content{ order:1; }
.feature-split__media img{
  width:100%; height:clamp(280px,32vw,380px); object-fit:cover;
  border-radius:var(--radius-lg); box-shadow:0 30px 60px -20px rgba(26,17,70,.25);
}
.feature-split__content .emp-section-head{ margin-bottom:1.25rem; max-width:none; }
.feature-split__content > p{ font-size:1.0625rem; color:var(--emp-muted); line-height:1.65; }
/* this page's .promo-checklist sits on a dark banner elsewhere (index.html#hiring-os) --
   on this light section the icon tile needs a tinted bg instead of solid white-on-dark, and the
   label text needs a dark/ink colour instead of near-white; everything else (layout, size,
   checkmark svg) is unchanged. */
.feature-split .promo-checklist__icon{ background:var(--bg-secondary); }
.feature-split .promo-checklist__icon svg{ color:var(--primary); }
.feature-split .promo-checklist li span:last-child{ color:var(--ink-secondary); }
/* Industries list reuses the same checklist item/icon styling but lays out in 2 columns
   instead of 1 -- a sector list reads better in 2 short columns than 8 stacked rows. */
.feature-split .promo-checklist--grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:.75rem 1.5rem; margin-top:1.5rem; }

/* ARAUK-60 QA fix 3: "Other Locations" was a bare .promo-checklist (a dark-banner checkmark
   list) dropped onto a light section with no checkmark markup -- it rendered as a plain
   unstyled vertical list of city names. Reuses the homepage's existing .place-chip-list pill
   component (index.html "Top Places We Serve") verbatim for layout/shape, with a thin
   --links modifier so the pills are real <a> links with a hover state (same hover pattern as
   about-us.css's .ara-chips: solid fill + lift on hover) instead of static <span> labels. */
.place-chip-list--links a{
  font-size:.78rem; font-weight:600; color:var(--ink-secondary); background:var(--bg-secondary);
  padding:.45rem .75rem; border-radius:var(--radius-pill); border:1px solid var(--border);
  text-decoration:none; transition:background .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease), transform .2s var(--ease);
}
.place-chip-list--links a:hover{ background:var(--primary); color:#fff; border-color:var(--primary); transform:translateY(-2px); }

/* ---------- responsive ---------- */
@media (max-width:1100px){
  .service-grid{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:900px){
  .feature-split, .feature-split--reverse{ grid-template-columns:1fr; }
  .feature-split--reverse .feature-split__media, .feature-split--reverse .feature-split__content{ order:initial; }
  .feature-split .promo-checklist--grid{ grid-template-columns:1fr; }
}
@media (max-width:640px){
  .service-grid{ grid-template-columns:1fr; }
  .faq-item{ padding:1.25rem 1.4rem; }
}

@media (prefers-reduced-motion: reduce){
  .service-card{ transition:none; }
}

/* ── SERVICE-ARTICLE BODY (ARAUK-70/71/72/73, Batch 7) — the 4 extra employer pages
   (London, UK-wide, Perth, second Leeds) use the live site's older ServicePage template,
   whose approved content is unstructured rich HTML (p/ul/ol/h3/strong), not the
   .promo-checklist / .feature-split bullets the rest of this file assumes. Rendering that
   HTML verbatim (content-provenance rule 4: never reword or restructure approved text) needs
   one shared prose block instead of forcing it into a card -- reused by all 4 pages, zero
   per-page CSS. base.css has no reset on ul/ol/li/h3/p, so these are the only rules needed. */
.service-article{ max-width:760px; }
.service-article + .service-article{ margin-top:2.75rem; }
.service-article .emp-section-head{ margin-bottom:1.1rem; }
.service-article-body p{ margin:0 0 1rem; font-size:1.0625rem; color:var(--emp-muted); line-height:1.7; }
.service-article-body h3{ margin:1.5rem 0 .75rem; font-size:1.0625rem; font-weight:700; color:var(--ink); font-family:var(--display); line-height:1.4; }
.service-article-body ul, .service-article-body ol{ margin:0 0 1rem; padding-left:1.25rem; color:var(--emp-muted); font-size:1.0625rem; line-height:1.7; }
.service-article-body li{ margin-bottom:.5rem; }
.service-article-body strong{ color:var(--ink); font-weight:700; }
.service-article-body > :last-child{ margin-bottom:0; }
/* same block, reused inside a .faq-item answer when it's a list rather than one <p> (the
   .faq-item h3/p rules above already handle the plain-<p> answers) */
.faq-item .service-article-body{ margin-top:.65rem; }
.faq-item .service-article-body p, .faq-item .service-article-body ul, .faq-item .service-article-body ol{ font-size:.9375rem; line-height:1.65; margin-bottom:.65rem; }
.faq-item .service-article-body > :last-child{ margin-bottom:0; }