/* ==========================================================================
   Nexora Talent Solutions — Component Library
   Every component here is designed to be reused across all 9 pages.
   Depends on tokens.css + base.css.
   ========================================================================== */

/* ==========================================================================
   1. Buttons
   ========================================================================== */

.btn-nx {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: var(--fs-body);
  letter-spacing: var(--ls-wide);
  padding: 16px 32px;
  border-radius: var(--radius-pill);
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform var(--transition-fast), box-shadow var(--transition-fast),
    background-color var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
  white-space: nowrap;
}

.btn-nx:hover {
  transform: scale(1.02);
}

.btn-nx:active {
  transform: scale(0.98);
}

.btn-primary {
  background-color: var(--color-gold);
  color: var(--color-primary);
}

.btn-primary:hover {
  background-color: var(--color-gold);
  filter: brightness(0.9);
  box-shadow: var(--shadow-hover);
  color: var(--color-primary);
  transform: translateY(-2px) scale(1.02);
}

.btn-secondary {
  background-color: transparent;
  border-color: var(--color-gold);
  color: var(--color-primary);
}

.btn-secondary:hover {
  background-color: var(--color-gold);
  color: var(--color-primary);
  box-shadow: var(--shadow-gold-glow);
}

.btn-ghost {
  background-color: transparent;
  color: var(--color-primary);
  padding: 8px 0;
  border-radius: 0;
  position: relative;
}

.btn-ghost::after {
  content: '\f061';
  font-family: 'Font Awesome 6 Free';
  font-weight: 900;
  font-size: 0.8em;
  transition: transform var(--transition-fast);
}

.btn-ghost:hover::after {
  transform: translateX(4px);
}

.btn-ghost span {
  position: relative;
}

.btn-ghost span::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -4px;
  width: 100%;
  height: 1px;
  background-color: var(--color-gold);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform var(--transition-base);
}

.btn-ghost:hover span::after {
  transform: scaleX(1);
  transform-origin: left;
}

.btn-ghost--gold {
  color: var(--color-gold);
}

.btn-nx--on-dark.btn-secondary {
  color: var(--color-white);
}

.btn-nx--on-dark.btn-secondary:hover {
  color: var(--color-primary);
}

/* Header CTA sits inside .site-header, which flips from transparent-over-hero
   to a solid white bar on scroll — the on-dark (white text) variant only
   applies while transparent; once solid it must fall back to the readable
   navy-text/gold-border look, same logic as the logo swap. */
.site-header.is-scrolled .btn-nx--on-dark.btn-secondary {
  color: var(--color-primary);
}

.site-header.is-scrolled .btn-nx--on-dark.btn-secondary:hover {
  color: var(--color-primary);
}

/* Client feedback (round 2): the outlined "Hire Talent" button still read
   as a secondary nav item next to solid-gold "Candidate Registration",
   even after the round-1 size bump. `.btn-nx--on-dark.btn-secondary` is
   only ever used by these two Hire Talent instances (desktop header +
   mobile menu — verified via grep, unlike the bare `.btn-secondary` used
   by the unrelated modal wizard "Back" buttons), so it's safe to make
   this combo noticeably heavier without touching anything else: border
   doubled to 2px and weight bumped to 700 (matching the bold treatment
   given to Candidate Registration below), plus a dark elevation shadow
   so it visibly lifts off the header the same way the gold button's glow
   does, instead of sitting flat as just an outline. Kept as an outline
   rather than converting to a filled style, per the original explicit
   client instruction to preserve the two-button style distinction. */
.btn-nx--on-dark.btn-secondary {
  border-width: 2px;
  font-weight: 700;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.25);
}

.site-header.is-scrolled .btn-nx--on-dark.btn-secondary {
  box-shadow: 0 4px 14px rgba(11, 27, 52, 0.12);
}

/* Hover-lift consistent with the site's existing button hover pattern
   (see .btn-primary:hover above — translateY(-2px) scale(1.02), inherited
   from the shared .btn-nx:hover for the scale half already) — applied
   explicitly here since .btn-secondary:hover itself only defined the
   color-fill/box-shadow-ring change, not the lift. On hover this button
   already fills solid gold via the existing .btn-secondary:hover rule, so
   the glow is bumped to match Candidate Registration's hover glow for
   visual parity at the one moment both read identically. */
.btn-nx--on-dark.btn-secondary:hover {
  transform: translateY(-2px) scale(1.02);
  box-shadow: 0 14px 34px rgba(200, 166, 75, 0.55);
}

.btn-nx--sm {
  padding: 12px 24px;
  font-size: var(--fs-small);
}

/* ==========================================================================
   2. Site Header
   ========================================================================== */

.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  /* --space-3 (16px) — trimmed from --space-4 (24px) alongside a
     moderate logo-size bump (48px -> 68px) so the header lands at
     ~100px total instead of ~116px, staying within the requested
     100-110px range rather than cramming a bigger logo into the old
     padding. */
  padding-block: var(--space-3);
  background-color: transparent;
  transition: background-color var(--transition-base), box-shadow var(--transition-base), padding-block var(--transition-base);
}

.site-header.is-scrolled {
  background-color: rgba(255, 255, 255, 0.96);
  backdrop-filter: blur(8px);
  box-shadow: var(--shadow-resting);
  /* --space-2 (8px), see .site-header above — same relative
     shorter-on-scroll relationship as before, shifted down together. */
  padding-block: var(--space-2);
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
}

.site-header__logo {
  display: inline-flex;
  /* Keeps the logo from being flex-shrunk if the row ever gets tight
     (e.g. the documented ~1200px xl-breakpoint zone below) — cheap
     insurance, kept even after reverting the oversized-logo experiment
     that originally motivated it. */
  flex-shrink: 0;
}

.site-header__logo-img {
  /* Uses the client's horizontal logo lockup (logo-header.png /
     logo-header-white.png, ~3.68:1 aspect ratio — see the <img> comment
     in index.html and CLAUDE.md). Increased again from 68px to 86px
     (~26.5%, within the requested 25-30%) — see CLAUDE.md for the
     tagline-legibility check and the 1440px fit verification this size
     required. One shared size for both header states, same as prior
     passes. */
  height: 86px;
  width: auto;
}

.site-header__logo-img--light-bg {
  display: none;
}

.site-header.is-scrolled .site-header__logo-img--dark-bg {
  display: none;
}

.site-header.is-scrolled .site-header__logo-img--light-bg {
  display: block;
}

.nav-main {
  display: none;
  align-items: center;
  /* --space-3 (16px) — doubled from --space-2 (8px) per an explicit
     request for more breathing room between nav items (the tight 8px
     gap was reading as one run-on line of text). Combined with the logo
     growing again in the same pass, see CLAUDE.md for the 1440px fit
     check this combination required. */
  gap: var(--space-3);
}

@media (min-width: 992px) {
  .nav-main {
    display: flex;
  }
}

/* Widened further to --space-4 (24px) at >=1600px only — measured via
   headless-browser testing (not guessed) that 16px gap already word-wraps
   "About Us"/"Job Seekers"/"Contact Us" onto two lines everywhere from
   992px up to ~1556px (a pre-existing condition, not caused by this
   change — matches the "1440px: FAILS" note already on file in CLAUDE.md
   for this exact combination of logo size + nav gap), and that going any
   wider than 24px pushes the clean-fit threshold past 1600px (32px only
   clears at ~1650px+). 1600px is also where container-nx's own fluid
   width hits its 1600px cap, so nothing between 992-1599px is touched —
   this rule only ever applies where there was already slack to spare. */
@media (min-width: 1600px) {
  .nav-main {
    gap: var(--space-4);
  }
}

.nav-link {
  position: relative;
  font-family: var(--font-heading);
  /* Reverted to --fs-small (14px) — see .nav-main above. */
  font-size: var(--fs-small);
  font-weight: 600;
  letter-spacing: var(--ls-wide);
  color: var(--color-white);
  text-transform: uppercase;
  padding-block: var(--space-1);
  transition: color var(--transition-fast);
  /* Added during the tiered-breakpoint rebalancing pass below. Neither
     .nav-main nor .nav-link previously had flex-shrink/white-space
     protection, so when the row got tight the browser's fallback was to
     silently shrink+word-wrap a link's text ("About Us" -> two lines)
     rather than to cleanly overflow — which is exactly what made prior
     "does it fit" measurements unreliable (a wrapped link is narrower
     than its unwrapped self, so a post-wrap measurement can look like it
     "fits" while actually being broken). nowrap makes any future
     insufficient-width case fail honestly (visible overflow) instead of
     silently, and — combined with every width below being verified via
     Playwright to never overflow in the first place — this line has no
     visible effect on its own; it only removes the failure mode. */
  white-space: nowrap;
}

.is-scrolled .nav-link {
  color: var(--color-primary);
}

.nav-link::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -2px;
  width: 100%;
  height: 2px;
  background-color: var(--color-gold);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform var(--transition-base);
}

.nav-link:hover::after,
.nav-link.is-active::after {
  transform: scaleX(1);
  transform-origin: left;
}

.nav-link:hover {
  color: var(--color-gold);
}

.is-scrolled .nav-link:hover {
  color: var(--color-gold);
}

.header-actions {
  display: flex;
  align-items: center;
  gap: var(--space-4);
}

/* Two header CTAs (Employer/Candidate Registration) — only shown from the
   xl breakpoint (1200px) up: at lg (992px) the full 7-item nav plus two
   pill buttons has no room and wraps/overflows, so below xl the header
   shows nav links only (both registration pages stay reachable via the
   Employers/Job Seekers sections). Even at xl, 1200px itself is a tight
   fit with the standard .btn-nx--sm sizing (verified: still clips at
   exactly 1200px), so this group uses its own tighter gap/padding —
   comfortable from ~1230px+ and still fits, just snugly, at 1200px.
   (Reverted here from an even tighter compression a later pass added
   to cope with a briefly oversized header logo — the logo is back to
   its normal compact size, so this is back to its original tuning.) */
.header-actions__ctas {
  align-items: center;
  gap: var(--space-2);
}

/* Bumped again (round 2, client feedback: "still don't read as strongly
   highlighted") from 14px/28px, 0.9375rem (15px) to 17px/34px, 1rem
   (16px), plus bold (700) weight — see the two .btn-nx--on-dark.btn-
   secondary rules above/below for the Hire Talent-specific border/shadow
   treatment and the .btn-primary gold-glow rules below for Candidate
   Registration's. Both buttons keep the same size/weight here (client
   note: "both buttons should be highlighted and big", not one dominant).
   Re-verified via Playwright at 992/1200/1280/1300/1366/1440/1536/1600/
   1920px — no overflow/wrap at any of them (see the tiered rules below
   for the same per-tier check). */
.header-actions__ctas .btn-nx {
  padding: 17px 34px;
  font-size: 1rem;
  font-weight: 700;
}

/* Gold glow so Candidate Registration visibly lifts off the dark header
   background at rest, not just on hover — scoped to header/mobile-menu
   context (`.btn-primary` alone is used sitewide for hero/form/wizard
   buttons that are out of scope for this pass). Hover intensifies the
   same glow instead of the generic navy `--shadow-hover` .btn-primary:hover
   normally uses, since a navy shadow is barely visible against the navy
   header itself. */
.header-actions__ctas .btn-primary,
.nav-mobile__ctas .btn-primary {
  box-shadow: 0 8px 24px rgba(200, 166, 75, 0.35);
}

.header-actions__ctas .btn-primary:hover,
.nav-mobile__ctas .btn-primary:hover {
  box-shadow: 0 14px 34px rgba(200, 166, 75, 0.55);
}

/* REBALANCED (later pass, post Phase 2, supersedes the single flat
   992-1599.98px rule this comment block used to describe) — the prior
   fix above successfully stopped the header from wrapping/overflowing,
   but did it with ONE flat set of hyper-compressed values (5px nav gap,
   4px button gap, 0.6875rem/11px everywhere, 74px logo) applied
   uniformly across the ENTIRE 992-1599.98px span. That was real
   overkill for most of that span: measured via Playwright with
   `white-space: nowrap` forced on `.nav-link` (see that rule's own
   comment — this exposes true overflow instead of letting the browser
   silently word-wrap and self-correct the numbers, which is what made
   the "margin" figures upstream unreliable) that the OLD flat values
   already had 67-187px of unused slack from ~1300px up to 1536px, and
   the client's own complaint ("jammed close together... 468-1440
   range") was really about the tiny INTERNAL gaps (nav-link-to-nav-
   link, button-to-button, button padding) staying frozen at their
   worst-case-at-1200px size everywhere in the band, not about the
   outer logo/nav/CTA group spacing (which `justify-content:
   space-between` already auto-grows with any leftover width,
   regardless of the internal values).
   Replaced with FOUR width-based tiers instead of one, each using the
   internal spacing that width can actually afford — verified via a
   Playwright sweep (992 up to 1920px, dense sampling around every tier
   boundary) that none of them overflow, using the `scrollWidth >
   clientWidth` check on `.site-header__inner` (reliable now that
   `.nav-link` can't silently word-wrap out from under the measurement):
   - 992-1199.98px: `.header-actions__ctas` isn't even visible yet here
     (`d-xl-flex` only shows it at >=1200px — see that rule's own
     comment) — only the logo+nav need to fit, so the logo stays at its
     full 86px (no shrink at all needed) and only the nav gap/font are
     trimmed a little. Verified >=40px of spare margin at 992px, growing
     fast from there.
   - 1200-1299.98px: the genuine worst case — CTAs newly visible here at
     the same width where available space is smallest. Needs real
     compression, but less than the old flat value: nav gap 5px->6px,
     button gap 4px->6px, button padding 6/11px->7/12px, logo only
     74px->70px (barely smaller, not the 56-64px a first-pass tuning
     attempt needed before this logo-priority tradeoff was chosen).
     Verified 18.4px of true spare margin at exactly 1200px (the tightest
     point in the whole header) — thin but real, not razor's-edge.
   - 1300-1549.98px: real slack exists here even at the old flat values
     (14px+ and growing), so this tier gets noticeably more room: nav
     gap 10px, button gap 8px, button padding 8/14px, font bumped to
     0.8125rem/13px (up from 11px), logo 66px. Verified 20px+ spare
     margin at 1300px (the tier's own worst case), growing well past
     100px by the top of this tier.
   - >=1550px: no override at all — full base defaults (24px
     `.site-header__inner` gap, 16px nav gap, 14px nav-link font, 8px
     button gap, 10px/18px button padding, 0.8125rem button font, 86px
     logo) already fit cleanly from here. Verified empirically (not
     assumed) rather than reusing an earlier, incorrect estimate: an
     initial version of this pass mistakenly simulated
     `.site-header__inner`'s own gap as ~0 instead of its real base value
     of `var(--space-4)` (24px), which understated the true required
     width and put the tier boundary at 1500px — that overflowed for
     real (confirmed via the same Playwright measurement) once tested
     against the actual file, since the real 24px inner gap adds 48px of
     required width (2 gaps) the estimate hadn't accounted for. Re-swept
     with the correct base values and found the true breakeven is
     ~1520-1530px; 1550px was chosen as a round number with a real,
     verified >=26px margin rather than shaving it to the exact edge.
     The existing >=1600px rule below (widening `.nav-main` gap further
     to `--space-4`) is unaffected and still layers on top of this.
   Screenshotted at 1200/1280/1366/1440/1536/1600/1920px to confirm the
   nav text and button labels read as comfortably spaced, not just
   numerically non-overlapping, at every tier. The mobile hamburger
   breakpoint (992px) is untouched, same as the prior pass.
   Placed here (after the base `.nav-link`/`.header-actions__ctas`/
   `.header-actions__ctas .btn-nx`/`.site-header__logo-img` rules) for
   the same cascade-ordering reason the original fix documented. */
@media (min-width: 992px) and (max-width: 1199.98px) {
  .site-header__inner {
    gap: 12px;
  }

  .nav-main {
    gap: 8px;
  }

  .nav-link {
    font-size: 0.75rem;
    letter-spacing: 0.01em;
  }

  .site-header__logo-img {
    height: 86px;
  }
}

@media (min-width: 1200px) and (max-width: 1299.98px) {
  .site-header__inner {
    gap: 8px;
  }

  .nav-main {
    gap: 6px;
  }

  .nav-link {
    font-size: 0.75rem;
    letter-spacing: 0.01em;
  }

  .header-actions__ctas {
    gap: 6px;
  }

  .header-actions__ctas .btn-nx {
    padding: 13px 20px;
    font-size: 0.8125rem;
  }

  .site-header__logo-img {
    height: 70px;
  }
}

@media (min-width: 1300px) and (max-width: 1549.98px) {
  .site-header__inner {
    gap: 12px;
  }

  .nav-main {
    gap: 10px;
  }

  .nav-link {
    font-size: 0.8125rem;
    letter-spacing: 0.015em;
  }

  .header-actions__ctas {
    gap: 8px;
  }

  .header-actions__ctas .btn-nx {
    padding: 15px 28px;
    font-size: 0.9375rem;
  }

  .site-header__logo-img {
    height: 66px;
  }
}

.nav-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: var(--radius-sm);
  border: 1px solid rgba(255, 255, 255, 0.3);
  background: transparent;
  color: var(--color-white);
  font-size: 1.25rem;
  transition: color var(--transition-fast), border-color var(--transition-fast);
}

.is-scrolled .nav-toggle {
  color: var(--color-primary);
  border-color: var(--color-border);
}

@media (min-width: 992px) {
  .nav-toggle {
    display: none;
  }
}

.nav-mobile {
  position: fixed;
  top: 0;
  right: 0;
  height: 100vh;
  width: min(320px, 85vw);
  background-color: var(--color-primary);
  padding: var(--space-6) var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  overflow-y: auto;
  transform: translateX(100%);
  transition: transform var(--transition-slow);
  z-index: 1100;
}

.nav-mobile.is-open {
  transform: translateX(0);
}

.nav-mobile .nav-link {
  color: var(--color-white);
  font-size: var(--fs-body-lg);
}

.nav-mobile__close {
  align-self: flex-end;
  background: none;
  border: none;
  color: var(--color-white);
  font-size: 1.5rem;
  cursor: pointer;
}

/* Mobile counterparts of .header-actions__ctas — see CLAUDE.md "Mobile
   menu — missing registration buttons fix". `margin-top: auto` pushes
   the group to the bottom of the nav's flex column on tall screens
   (nav-links alone rarely fill 100vh); on short screens `.nav-mobile`'s
   own `overflow-y: auto` (added alongside this fix) lets the panel
   scroll instead of clipping the buttons. Full-width buttons, sized
   from the default (non `--sm`) `.btn-nx` padding — already a
   comfortable >44px tap target without a mobile-specific override. */
.nav-mobile__ctas {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin-top: auto;
  padding-top: var(--space-4);
  border-top: 1px solid rgba(255, 255, 255, 0.15);
}

.nav-mobile__ctas .btn-nx {
  width: 100%;
  font-weight: 700;
}

.nav-backdrop {
  position: fixed;
  inset: 0;
  background-color: rgba(11, 27, 52, 0.5);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--transition-base);
  z-index: 1050;
}

.nav-backdrop.is-open {
  opacity: 1;
  pointer-events: auto;
}

/* ==========================================================================
   3. Section Eyebrow + Heading Block
   ========================================================================== */

.section-heading {
  max-width: 720px;
  margin-bottom: var(--space-6);
}

.section-heading--center {
  margin-inline: auto;
  text-align: center;
}

.section-heading__rule {
  display: block;
  width: 64px;
  height: 3px;
  background-color: var(--color-gold);
  border-radius: var(--radius-pill);
  margin-bottom: var(--space-5);
}

.section-heading__rule--center {
  margin-inline: auto;
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-heading);
  font-size: var(--fs-eyebrow);
  font-weight: 700;
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--color-gold);
  margin-bottom: var(--space-3);
}

.eyebrow::before {
  content: '';
  display: inline-block;
  width: 28px;
  height: 2px;
  background-color: var(--color-gold);
}

.eyebrow--flanked::after {
  content: '';
  display: inline-block;
  width: 28px;
  height: 2px;
  background-color: var(--color-gold);
}

.section-heading__title {
  margin-bottom: var(--space-3);
}

.section-heading__title--flanked {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
}

.section-heading__title--flanked::before,
.section-heading__title--flanked::after {
  content: '';
  display: inline-block;
  width: 40px;
  height: 2px;
  background-color: var(--color-gold);
}

.section-heading__subtitle {
  font-size: var(--fs-body-lg);
  color: var(--color-text-muted);
  margin-bottom: 0;
}

.section-bg-primary .section-heading__subtitle {
  color: rgba(255, 255, 255, 0.75);
}

/* ==========================================================================
   4. Service / Feature Card
   ========================================================================== */

.card-service {
  position: relative;
  height: 100%;
  background-color: var(--color-white);
  border-radius: var(--radius-card);
  padding: var(--space-5);
  box-shadow: var(--shadow-resting);
  transition: transform var(--transition-base), box-shadow var(--transition-base);
  overflow: hidden;
}

.card-service::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 3px;
  background-color: var(--color-gold);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--transition-base);
}

.card-service:hover {
  transform: translateY(var(--lift-distance));
  box-shadow: var(--shadow-hover);
}

.card-service:hover::before {
  transform: scaleX(1);
}

.card-service__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 60px;
  height: 60px;
  border-radius: var(--radius-sm);
  background-color: var(--color-bg-alt);
  color: var(--color-primary);
  font-size: 1.5rem;
  margin-bottom: var(--space-4);
  transition: background-color var(--transition-base), color var(--transition-base);
}

.card-service:hover .card-service__icon {
  background-color: var(--color-primary);
  color: var(--color-gold);
}

.card-service__title {
  font-size: var(--fs-h4);
  margin-bottom: var(--space-2);
}

.card-service__desc {
  color: var(--color-text-muted);
  margin-bottom: 0;
}

/* Illustrated variant (added post Phase 2, index.html Employers grid only)
   — same .card-service shell (white bg/radius/shadow/hover-lift), laid out
   as a roughly 50/50 horizontal split: icon column left, text column
   right. The icon floats directly on the card's white background (no
   container box/fill/border). .card-service__icon-col is a plain
   (unstyled) flex column purely for the 50% width split — it stretches to
   the row's height and the image inside uses max-width/max-height: 100%
   with width/height: auto so the icon scales up to fill the larger space
   while its native aspect ratio is always preserved (never distorted).
   See CLAUDE.md "Employers section — visual reference override". */
.card-service--illustrated {
  display: flex;
  align-items: stretch;
  gap: var(--space-3);
  padding: var(--space-4);
}

.card-service--illustrated .card-service__icon-col {
  flex: 0 0 50%;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.card-service--illustrated .card-service__icon-img {
  display: block;
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
}

.card-service--illustrated .card-service__body {
  flex: 1 1 50%;
  min-width: 0;
}

.card-service--illustrated .card-service__title {
  font-size: 1.125rem;
  line-height: 1.3;
}

.card-service--illustrated .card-service__rule {
  display: block;
  width: 32px;
  height: 3px;
  background-color: var(--color-gold);
  border-radius: var(--radius-pill);
  margin-bottom: var(--space-2);
}

.card-service--illustrated .card-service__desc {
  font-size: 0.9375rem;
  margin-bottom: var(--space-2);
}

@media (max-width: 420px) {
  .card-service--illustrated {
    flex-direction: column;
    align-items: flex-start;
  }

  .card-service--illustrated .card-service__icon-col {
    flex-basis: auto;
    width: 100%;
    max-height: 160px;
    margin-bottom: var(--space-3);
  }
}

/* ==========================================================================
   5. Stat Counter Block
   ========================================================================== */

.stat-block {
  text-align: center;
  padding: var(--space-4);
}

.stat-number {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 2px;
  font-family: var(--font-heading);
  font-size: clamp(2.5rem, 3vw + 1rem, 3.5rem);
  font-weight: 800;
  color: var(--color-white);
  line-height: 1;
}

.stat-number .stat-suffix {
  font-size: 0.5em;
  color: var(--color-gold);
}

/* Modifier for a non-numeric stat-value ("PAN India" — no digit+suffix
   pair to shrink via .stat-suffix's 0.5em trick) — at the full clamped
   number size it's too wide for a 5-across grid column and wraps to two
   lines, throwing its row out of alignment with the other four one-line
   stats. Sized down so it reliably fits one line at every grid tier. */
.stat-value--text {
  font-size: 0.55em;
  white-space: nowrap;
}

.stat-label {
  margin-top: var(--space-2);
  font-family: var(--font-heading);
  font-size: var(--fs-small);
  font-weight: 600;
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.7);
}

/* "Our Impact" (About Us area) reuses .stat-block/.stat-number/.stat-label
   above, but sits on the plain white About Us background instead of the
   dark .section-bg-primary this component was originally designed for
   (see the archived multi-page site's removed STATISTICS section) — the
   white-on-navy/rgba-white text needs a navy-on-white swap here or it's
   unreadable. Scoped to this section only so the original dark-bg
   defaults stay intact for any future reuse elsewhere. */
.impact-stats-section .stat-number {
  color: var(--color-primary);
}

.impact-stats-section .stat-label {
  color: var(--color-text-muted);
}

/* Grid mirrors .core-values-grid directly below it in the same About Us
   area (same 1/2/3-column progression, same desktop divider-line
   treatment) for visual consistency, extended to a 5th column at the
   >=992px tier to fit all five stats in one row instead of six. */
.impact-stats-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-5);
}

@media (min-width: 576px) {
  .impact-stats-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 768px) {
  .impact-stats-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (min-width: 992px) {
  .impact-stats-grid {
    grid-template-columns: repeat(5, 1fr);
    gap: 0;
  }

  .impact-stats-grid .stat-block {
    border-left: 1px solid var(--color-border);
  }

  .impact-stats-grid .stat-block:first-child {
    border-left: none;
  }
}

/* ==========================================================================
   6. Timeline Step (horizontal, numbered)
   ========================================================================== */

.timeline {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-6) var(--space-4);
  position: relative;
}

.timeline-step {
  flex: 1 1 200px;
  position: relative;
  text-align: center;
  padding-top: var(--space-6);
}

.timeline-step__marker {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background-color: var(--color-primary);
  color: var(--color-gold);
  font-family: var(--font-heading);
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
}

.timeline-step__line {
  position: absolute;
  top: 24px;
  left: 50%;
  width: 100%;
  height: 2px;
  background-color: var(--color-border);
  z-index: 1;
}

.timeline-step:last-child .timeline-step__line {
  display: none;
}

.timeline-step__title {
  font-size: var(--fs-body-lg);
  font-weight: 700;
  color: var(--color-primary);
  margin-bottom: 0;
}

@media (max-width: 767px) {
  .timeline {
    flex-direction: column;
  }
  .timeline-step__line {
    top: 48px;
    left: 24px;
    width: 2px;
    height: calc(100% + var(--space-6) - 48px);
  }
}

/* ==========================================================================
   7. Industry Tile
   ========================================================================== */

.industry-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  text-align: center;
  padding: var(--space-5) var(--space-3);
  background-color: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  height: 100%;
  transition: background-color var(--transition-base), transform var(--transition-base), box-shadow var(--transition-base), border-color var(--transition-base);
}

.industry-tile:hover {
  background-color: var(--color-primary);
  border-color: var(--color-primary);
  transform: translateY(var(--lift-distance));
  box-shadow: var(--shadow-hover);
}

.industry-tile__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background-color: var(--color-bg-alt);
  color: var(--color-primary);
  font-size: 1.375rem;
  transition: background-color var(--transition-base), color var(--transition-base);
}

.industry-tile:hover .industry-tile__icon {
  background-color: rgba(200, 166, 75, 0.15);
  color: var(--color-gold);
}

.industry-tile__label {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: var(--fs-body);
  color: var(--color-primary);
  transition: color var(--transition-base);
}

.industry-tile:hover .industry-tile__label {
  color: var(--color-white);
}

/* ==========================================================================
   8. Testimonial / Logo Strip (Swiper)
   ========================================================================== */

.logo-strip {
  padding-block: var(--space-5);
}

.logo-strip .swiper-slide {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 72px;
}

.logo-strip__item {
  max-height: 40px;
  width: auto;
  opacity: 0.55;
  filter: grayscale(100%);
  transition: opacity var(--transition-base), filter var(--transition-base);
}

.logo-strip__item:hover {
  opacity: 1;
  filter: grayscale(0%);
}

.trusted-strip {
  background-color: var(--color-bg-alt);
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
}

.trusted-strip__label {
  font-family: var(--font-heading);
  font-size: var(--fs-small);
  font-weight: 700;
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--color-text-muted);
  text-align: center;
  margin-bottom: var(--space-4);
}

/* ==========================================================================
   9. Why Choose Us — card grid
   ========================================================================== */

/* ~36px centered accent underline, smaller than the default 64px
   .section-heading__rule — used where an eyebrow already sits above the
   heading and the rule is a secondary accent rather than the primary one. */
.section-heading__rule--sm {
  width: 36px;
  height: 2px;
  margin-bottom: 0;
}

.why-choose-grid {
  display: grid;
  grid-template-columns: repeat(1, 1fr);
  gap: var(--space-4);
}

@media (min-width: 576px) {
  .why-choose-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 992px) {
  .why-choose-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

.why-choose-card {
  height: 100%;
  background-color: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: 12px;
  padding: var(--space-5);
}

.why-choose-card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: var(--radius-sm);
  background-color: rgba(var(--color-gold-rgb), 0.12);
  color: var(--color-gold);
  font-size: 1.375rem;
  margin-bottom: var(--space-4);
}

.why-choose-card__title {
  font-size: var(--fs-h4);
  color: var(--color-primary);
  margin-bottom: var(--space-2);
}

.why-choose-card__desc {
  color: var(--color-text-muted);
  margin-bottom: 0;
}

/* ==========================================================================
   10. CTA Banner
   ========================================================================== */

.cta-banner {
  position: relative;
  background-color: var(--color-primary);
  border-radius: var(--radius-card);
  padding: var(--space-7) var(--space-6);
  text-align: center;
  overflow: hidden;
}

.cta-banner__eyebrow-heading {
  color: var(--color-white);
  margin-bottom: var(--space-3);
}

.cta-banner p {
  color: rgba(255, 255, 255, 0.75);
  font-size: var(--fs-body-lg);
  max-width: 560px;
  margin-inline: auto;
  margin-bottom: var(--space-5);
}

.cta-banner__glow {
  position: absolute;
  border-radius: 50%;
  filter: blur(40px);
  pointer-events: none;
  z-index: 0;
}

.cta-banner__glow--gold {
  width: 200px;
  height: 200px;
  top: 12%;
  right: 10%;
  background: radial-gradient(circle, rgba(200, 166, 75, 0.28) 0%, rgba(200, 166, 75, 0) 65%);
}

.cta-banner__glow--navy {
  width: 180px;
  height: 180px;
  bottom: 12%;
  left: 10%;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.10) 0%, rgba(255, 255, 255, 0) 65%);
}

/* ==========================================================================
   11. Footer
   ========================================================================== */

.site-footer {
  background-color: var(--color-primary);
  color: rgba(255, 255, 255, 0.7);
  padding-block: var(--space-8) var(--space-5);
}

.footer-logo img {
  height: 44px;
  width: auto;
  margin-bottom: var(--space-3);
}

.footer-about {
  max-width: 320px;
  color: rgba(255, 255, 255, 0.6);
}

.footer-heading {
  font-family: var(--font-heading);
  font-size: calc(var(--fs-small) + 1px);
  font-weight: 700;
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--color-white);
  margin-bottom: var(--space-4);
}

.footer-links li {
  margin-bottom: var(--space-2);
}

.footer-links a {
  color: rgba(255, 255, 255, 0.65);
  transition: color var(--transition-fast), padding-left var(--transition-fast);
}

.footer-links a:hover {
  color: var(--color-gold);
  padding-left: 4px;
}

.footer-contact li {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
  color: rgba(255, 255, 255, 0.65);
}

.footer-contact i {
  color: var(--color-gold);
  margin-top: 4px;
}

.footer-social {
  display: flex;
  gap: var(--space-2);
  margin-top: var(--space-4);
}

.footer-social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: var(--color-white);
  transition: background-color var(--transition-fast), border-color var(--transition-fast);
}

.footer-social a:hover {
  background-color: var(--color-gold);
  border-color: var(--color-gold);
  color: var(--color-primary);
}

.footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  margin-top: var(--space-7);
  padding-top: var(--space-4);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--space-3);
  font-size: var(--fs-small);
  color: rgba(255, 255, 255, 0.5);
}

/* ==========================================================================
   11b. Footer redesign (later pass, post Phase 2, index.html only)
   `.site-footer--redesigned` — a modifier class added only to
   index.html's `<footer>` (see CLAUDE.md "Footer fix + redesign"),
   deliberately NOT edited into the base `.site-footer`/`.footer-*`
   rules above. `_archive/index.html` uses the exact same base classes
   for its own footer (same 4-column structure, same
   `assets/images/logo.png` src bug) — editing those rules in place
   would have redesigned the paused page's footer too, out of scope
   here and against the standing "don't touch _archive" instruction.
   Every rule below is scoped under the modifier so only index.html's
   footer picks it up; the archived footer keeps rendering exactly as
   it did before this pass (including its own pre-existing dark-logo
   bug, unfixed since that page is frozen for reference only).
   ========================================================================== */

/* Thin gold-centered gradient line across the very top edge, separating
   the footer from whichever section sits above it (Contact) — on top of
   the natural white-to-navy color break, per the redesign brief asking
   for an explicit divider rather than relying on background-color
   contrast alone. */
.site-footer--redesigned {
  position: relative;
}

.site-footer--redesigned::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(to right, transparent, rgba(var(--color-gold-rgb), 0.5), transparent);
}

/* Full vertical lockup (icon + NEXORA + TALENT SOLUTIONS + tagline),
   white variant — see CLAUDE.md "Footer fix + redesign" for why the
   base `.footer-logo img` above points at `logo.png` (the dark/navy
   variant, invisible against this same navy background) while
   index.html's markup was repointed to `logo-white.png`. 80px is a
   deliberate, measured choice (checked via Playwright screenshot, not
   guessed): big enough that "NEXORA" reads clearly as a real brand
   mark, not a thumbnail, while the fine-print tagline stays
   present-but-subtle — same trade-off already accepted for the header
   logo, scaled up here since the footer has vertical room the nav bar
   never had. */
.site-footer--redesigned .footer-logo img {
  height: 80px;
  margin-bottom: var(--space-4);
}

/* Small gold underline beneath each column heading (QUICK LINKS /
   SERVICES / CONTACT), matching the same "short gold pill rule"
   language already used for the Services cards' icon-rule
   (`.card-service--featured__rule`) and the section eyebrows elsewhere
   on the site — reused proportions (28px, 3px, pill radius) rather
   than inventing a new one. `::after` is block-level so it drops to
   its own line under the heading text automatically, no extra markup
   needed in index.html. */
.site-footer--redesigned .footer-heading::after {
  content: '';
  display: block;
  width: 28px;
  height: 3px;
  border-radius: var(--radius-pill);
  background-color: var(--color-gold);
  margin-top: var(--space-2);
}

.site-footer--redesigned .footer-links li {
  margin-bottom: var(--space-3);
  line-height: var(--lh-body);
}

/* Consistent icon-to-text alignment across the 3 contact items —
   location-dot/envelope/clock are different glyph shapes/widths at the
   same font-size, so without a fixed icon column they left the text
   starting at slightly different x-offsets per row. `width: 16px` +
   `text-align: center` gives all 3 icons one shared column. */
.site-footer--redesigned .footer-contact li {
  gap: var(--space-3);
}

.site-footer--redesigned .footer-contact i {
  width: 16px;
  margin-top: 5px;
  text-align: center;
  flex-shrink: 0;
}

.site-footer--redesigned .footer-social {
  gap: var(--space-3);
}

.site-footer--redesigned .footer-social a {
  width: 40px;
  height: 40px;
  font-size: 0.9375rem;
  transition: background-color var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast), transform var(--transition-fast);
}

.site-footer--redesigned .footer-social a:hover {
  transform: translateY(-2px);
}

.site-footer--redesigned .footer-bottom {
  border-top-color: rgba(var(--color-gold-rgb), 0.18);
}

/* ==========================================================================
   12. Hero
   ========================================================================== */

.hero {
  position: relative;
  background-color: var(--color-primary);
  color: var(--color-white);
  /* 198px — nudged up from 180px to match the header's own height
     increase (100px -> 118px unscrolled) from the logo/nav-gap growth
     above, keeping the same ~80px clearance below the fixed header. */
  padding-top: calc(var(--space-9) + var(--space-6) + 22px);
  padding-bottom: var(--space-9);
  overflow: hidden;
}

.hero--inner {
  padding-top: calc(var(--space-8) + var(--space-5));
  padding-bottom: var(--space-8);
}

.hero__shape {
  position: absolute;
  border-radius: 50%;
  filter: blur(60px);
  pointer-events: none;
  z-index: 0;
}

.hero__shape--one {
  width: 520px;
  height: 520px;
  top: -180px;
  right: -120px;
  background: radial-gradient(circle, rgba(200, 166, 75, 0.28) 0%, rgba(200, 166, 75, 0) 70%);
}

.hero__shape--two {
  width: 420px;
  height: 420px;
  bottom: -200px;
  left: -140px;
  background: radial-gradient(circle, rgba(200, 166, 75, 0.14) 0%, rgba(200, 166, 75, 0) 70%);
}

.hero__content {
  position: relative;
  z-index: 1;
  max-width: 760px;
}

.hero h1 {
  color: var(--color-white);
}

.hero__body {
  font-size: var(--fs-body-lg);
  color: rgba(255, 255, 255, 0.75);
  max-width: 640px;
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  margin-top: var(--space-5);
}

.hero__visual {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  max-width: 460px;
  margin-inline: auto;
}

.hero__visual-glow {
  position: absolute;
  border-radius: 50%;
  filter: blur(70px);
  pointer-events: none;
}

.hero__visual-glow--gold {
  width: 320px;
  height: 320px;
  top: 6%;
  right: 4%;
  background: radial-gradient(circle, rgba(200, 166, 75, 0.30) 0%, rgba(200, 166, 75, 0) 70%);
}

.hero__visual-glow--navy {
  width: 300px;
  height: 300px;
  bottom: 4%;
  left: 6%;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.10) 0%, rgba(255, 255, 255, 0) 70%);
}

/* Full-hero ambient network background (see index.html Hero markup comment
   and CLAUDE.md "Hero network — full-bleed expansion"). Sits behind
   .hero__content (z-index 1) at the same z-index tier as .hero__shape. */
.hero-bg-network {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
}

.hero-bg-network svg {
  display: block;
  width: 100%;
  height: 100%;
}

.hero-network__ring {
  fill: none;
  stroke-width: 1;
}

/* ==========================================================================
   12a. Hero Photo (real photo override — index.html hero only; replaces
   .hero-bg-network above, per CLAUDE.md "Hero Section — visual reference
   override, PERMANENT". Bleeds from the right edge of the viewport, same
   pattern as .about-photo--bleed, sized wider (52vw vs. 47vw) to match the
   ~50-55%-of-hero-width proportion the reference shows.
   ========================================================================== */

.hero-photo {
  position: absolute;
  inset: 0 0 0 auto;
  width: 52vw;
  overflow: hidden;
  z-index: 0;
  pointer-events: none;
}

.hero-photo__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 95% center;
}

/* Layered gradient fade so the photo blends into the hero's own navy
   background at every edge (left edge is the primary ask, top/bottom are a
   light supporting touch) — drawn in CSS rather than relying solely on the
   source photo's own baked-in navy region, since that fixed-pixel region
   shifts against the visible box edge as object-fit:cover recrops it at
   each responsive width. */
.hero-photo__fade {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(to right, var(--color-primary) 0%, rgba(11, 27, 52, 0) 30%),
    linear-gradient(to bottom, rgba(11, 27, 52, 0) 84%, var(--color-primary) 100%),
    linear-gradient(to top, rgba(11, 27, 52, 0) 90%, var(--color-primary) 100%);
}

/* Decorative profile-icon badges + connecting lines — not present in the
   supplied source photo (checked directly), recreated here since the
   reference shows them. Sparse, subtle, reuses the site's existing
   navy/gold palette. */
.hero-photo__network {
  position: absolute;
  inset: 0;
  z-index: 2;
}

.hero-photo__lines {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  fill: none;
  stroke: var(--color-gold);
  stroke-width: 0.15;
  stroke-opacity: 0.35;
}

.hero-photo__badge {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background-color: rgba(11, 27, 52, 0.55);
  border: 1px solid rgba(200, 166, 75, 0.5);
  color: var(--color-gold);
  font-size: 0.8125rem;
  box-shadow: 0 4px 14px rgba(11, 27, 52, 0.25);
  backdrop-filter: blur(2px);
}

/* About Nexora visual — a quieter, light-background echo of the hero's
   network motif, sized down and reusing its SVG structure/animation classes. */
.about-visual {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  max-width: 300px;
  margin-inline: auto;
}

.about-visual__glow {
  position: absolute;
  top: 20%;
  right: 10%;
  width: 160px;
  height: 160px;
  border-radius: 50%;
  filter: blur(50px);
  background: radial-gradient(circle, rgba(200, 166, 75, 0.14) 0%, rgba(200, 166, 75, 0) 70%);
  pointer-events: none;
}

/* ==========================================================================
   12b. About Photo (real photo variant — index.html About Us only;
   accent ring/wave are part of the supplied image, not layered here).
   No card styling (no radius, no shadow) per client reference — the
   `--bleed` modifier runs the image edge-to-edge on the right at
   desktop widths, full section height; below the `.about-bleed-section`
   breakpoint it's a normal contained, cropped block above/below the text.
   ========================================================================== */

.about-photo {
  overflow: hidden;
}

.about-photo__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.about-bleed-section {
  padding-block: 0;
}

.about-bleed-content {
  padding-block: var(--section-padding-y-mobile);
}

.about-photo--bleed {
  aspect-ratio: 4 / 3;
  margin: 0 var(--space-4) var(--section-padding-y-mobile);
}

@media (min-width: 992px) {
  .about-bleed-content {
    padding-block: var(--section-padding-y);
  }

  .about-photo--bleed {
    position: absolute;
    inset: 0 0 0 auto;
    width: 47vw;
    aspect-ratio: auto;
    margin: 0;
  }

  .about-photo--bleed .about-photo__img {
    object-position: 100% center;
  }
}

/* ==========================================================================
   12c. Hero Search Card (placeholder UI, no backend yet — client-approved
   concept referencing Randstad.in's job search box, see CLAUDE.md). Floats
   over the hero/next-section boundary: .hero-search-wrap is a sibling of
   .hero (not a descendant), so the negative margin-top overlap isn't
   clipped by .hero's own overflow:hidden. A positive margin-bottom keeps
   clear vertical space before .about-bleed-section's full-height bleed
   photo starts, so the two never intersect. Disabled below 992px (matches
   the hero photo's own d-lg-block breakpoint) — the 3-field row is too
   cramped in a 768px tablet viewport for the generic 767px component
   breakpoint used elsewhere on the site, so fields stack there instead.
   Visual refinement pass (2026-07-24, styling only — same placement):
   gold field icons, softened inset hairline dividers, roomier padding,
   pill-shaped Search button. ".hero-search-card__field-text" wraps just
   the label+input so each field can sit in a row next to its icon. */

.hero-search-wrap {
  position: relative;
  z-index: 2;
}

.hero-search-card {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  max-width: 1100px;
  margin-inline: auto;
  background-color: var(--color-white);
  border-top: 2px solid var(--color-gold);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-hover);
  padding: var(--space-5) var(--space-6);
}

/* Each field is now its own bordered/filled box (was borderless, blending
   into the card's white background) — border + fill read as "clickable
   input", so the old inter-field divider lines are redundant and hidden
   below. Focus state reuses the same gold border + glow pattern as
   .form-field input:focus (see section 13) for consistency across the
   site's form components. */
.hero-search-card__field {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: 12px var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background-color: var(--color-bg-alt);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast), background-color var(--transition-fast);
}

.hero-search-card__field:focus-within {
  border-color: var(--color-gold);
  box-shadow: var(--shadow-gold-glow);
  background-color: var(--color-white);
}

.hero-search-card__field-icon {
  flex: 0 0 auto;
  font-size: 1.125rem;
  line-height: 1;
  color: var(--color-gold);
}

.hero-search-card__field-text {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
}

.hero-search-card__field-text label {
  font-family: var(--font-heading);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.hero-search-card__field-text input {
  width: 100%;
  border: none;
  padding: 0;
  background: transparent;
  font-family: var(--font-body);
  font-size: var(--fs-body);
  color: var(--color-text);
}

.hero-search-card__field-text input:focus {
  outline: none;
}

.hero-search-card__field-text input::placeholder {
  color: var(--color-text-muted);
  opacity: 0.6;
}

.hero-search-card__divider {
  /* Superseded by each field's own border box above; kept in markup
     (aria-hidden, purely decorative) rather than removed, just hidden. */
  display: none;
}

.hero-search-card__btn {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: 16px var(--space-6);
  border: none;
  border-radius: var(--radius-pill);
  background-color: var(--color-primary);
  color: var(--color-white);
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: var(--fs-body);
  white-space: nowrap;
  cursor: pointer;
  transition: transform var(--transition-fast), box-shadow var(--transition-fast), background-color var(--transition-fast);
}

.hero-search-card__btn:hover {
  background-color: var(--color-primary-light);
  box-shadow: var(--shadow-hover);
  transform: translateY(-2px);
}

@media (min-width: 992px) {
  .hero-search-wrap {
    margin-top: -64px;
    margin-bottom: var(--space-6);
  }
}

/* Tighter spacing in the 992-1199px band only — the roomier gap/padding
   values above (tuned for >=1200px) push "ROLE OR KEYWORD" onto two lines
   and clip the Industry field against the button at 992px. Same tiered-
   breakpoint pattern the header nav uses for this exact squeeze (see
   ".header-actions__ctas .btn-nx" 992-1199.98px rule). */
@media (min-width: 992px) and (max-width: 1199.98px) {
  .hero-search-card {
    gap: var(--space-3);
    padding: var(--space-4) var(--space-5);
  }

  .hero-search-card__field {
    gap: var(--space-2);
    padding: 10px var(--space-3);
  }

  .hero-search-card__field-icon {
    font-size: 1rem;
  }

  .hero-search-card__btn {
    padding: 14px var(--space-5);
  }
}

@media (max-width: 991px) {
  .hero-search-card {
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-4);
    padding: var(--space-5);
  }

  .hero-search-card__divider {
    display: none;
  }

  .hero-search-card__btn {
    width: 100%;
    padding-block: 16px;
    margin-top: var(--space-1);
  }
}

/* ==========================================================================
   13. Form Field (floating label)
   ========================================================================== */

.form-field {
  position: relative;
  margin-bottom: var(--space-4);
}

.form-field input,
.form-field select,
.form-field textarea {
  width: 100%;
  padding: 20px 16px 8px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-input);
  background-color: var(--color-white);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  color: var(--color-text);
  box-shadow: var(--shadow-resting);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.form-field textarea {
  min-height: 140px;
  resize: vertical;
}

/* Compact sizing inside the registration modals only — the base
   .form-field above stays full-size since the Contact form uses the
   same component and wasn't part of this pass. Scoped to .modal__scroll
   so shrinking field height/spacing here can't leak into Contact. */
.modal__scroll .form-field {
  margin-bottom: var(--space-3);
}

.modal__scroll .form-field input,
.modal__scroll .form-field select,
.modal__scroll .form-field textarea {
  /* Equal top/bottom padding (was 14px/6px) so the value text — and the
     resting label sitting in as a fake placeholder — sits vertically
     centered in the box instead of pushed toward one edge. Sum is still
     20px, same as the previous 14+6 split, so total input height (and
     the "don't grow it back" constraint from the compact pass) is
     unchanged — only the split moved. */
  padding: 10px 16px;
}

.modal__scroll .form-field textarea {
  min-height: 72px;
}

.modal__scroll .form-field label {
  /* Matches the new padding-top (10px) minus ~1px optical adjustment,
     same relationship the base .form-field uses (padding-top 20 / label
     top 18) — keeps the resting label centered alongside the value text. */
  top: 9px;
}

.modal__scroll .form-field input:focus + label,
.modal__scroll .form-field input:not(:placeholder-shown) + label,
.modal__scroll .form-field select:focus + label,
.modal__scroll .form-field select:not([value=""]):valid + label,
.modal__scroll .form-field textarea:focus + label,
.modal__scroll .form-field textarea:not(:placeholder-shown) + label {
  top: -7px;
}

/* Custom dropdown arrow — replaces the default browser select arrow so
   selects read as part of the same styled system as text inputs. */
.form-field select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  padding-right: 44px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%236B7280' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
  background-size: 12px 8px;
  cursor: pointer;
}

.form-field select:focus {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%23C8A64B' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus {
  outline: none;
  border-color: var(--color-gold);
  box-shadow: var(--shadow-gold-glow);
}

.form-field label {
  position: absolute;
  left: 16px;
  top: 18px;
  font-size: var(--fs-body);
  color: var(--color-text-muted);
  pointer-events: none;
  transition: top var(--transition-fast), font-size var(--transition-fast), color var(--transition-fast);
  background-color: var(--color-white);
  padding-inline: 4px;
}

.form-field input:focus + label,
.form-field input:not(:placeholder-shown) + label,
.form-field select:focus + label,
.form-field select:not([value=""]):valid + label,
.form-field textarea:focus + label,
.form-field textarea:not(:placeholder-shown) + label {
  top: -9px;
  font-size: var(--fs-small);
  color: var(--color-gold);
}

.form-field.has-error input,
.form-field.has-error select,
.form-field.has-error textarea {
  border-color: #D64545;
}

.form-field__error {
  display: none;
  color: #D64545;
  font-size: var(--fs-small);
  margin-top: var(--space-1);
}

.form-field.has-error .form-field__error {
  display: block;
}

.form-check {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
}

.form-check input {
  margin-top: 4px;
  width: 18px;
  height: 18px;
  accent-color: var(--color-gold);
}

.form-check label {
  color: var(--color-text-muted);
  font-size: var(--fs-small);
}

.form-section-title {
  font-size: var(--fs-h4);
  color: var(--color-primary);
  margin-bottom: var(--space-3);
  padding-bottom: var(--space-2);
  border-bottom: 1px solid var(--color-border);
}

/* ==========================================================================
   14. Service Block (alternating large block — icon + heading + description)
   ========================================================================== */

.service-block {
  display: flex;
  align-items: center;
  gap: var(--space-6);
  padding-block: var(--space-6);
}

.service-block + .service-block {
  border-top: 1px solid var(--color-border);
}

.service-block--reverse {
  flex-direction: row-reverse;
}

.service-block__visual {
  position: relative;
  flex: 0 0 180px;
  width: 180px;
  height: 180px;
  border-radius: var(--radius-card);
  background-color: var(--color-bg-alt);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.service-block__visual i {
  font-size: 3rem;
  color: var(--color-primary);
}

.service-block__number {
  position: absolute;
  top: 10px;
  right: 16px;
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 2rem;
  color: rgba(11, 27, 52, 0.08);
}

.service-block__content {
  flex: 1;
}

.service-block__title {
  margin-bottom: var(--space-2);
}

.service-block__desc {
  color: var(--color-text-muted);
  font-size: var(--fs-body-lg);
  margin-bottom: 0;
}

@media (max-width: 767px) {
  .service-block,
  .service-block--reverse {
    flex-direction: column;
    text-align: center;
    gap: var(--space-4);
  }
}

/* index.html's Services grid only (scoped to #services, which
   services.html — paused, full-width stacked layout — does not have):
   fits .service-block into a grid cell using the same stacked treatment
   the mobile media query above already provides, at every width, and
   drops the stacked-list divider line since cards are no longer
   vertically adjacent siblings. Cards 2-6 keep their existing colors/
   icon treatment — this is a layout fit only, not a redesign. */
#services .service-block {
  flex-direction: column;
  text-align: center;
  gap: var(--space-4);
  height: 100%;
}

#services .service-block + .service-block {
  border-top: none;
}

/* ==========================================================================
   14b. Featured Service Card (photo-based, added post Phase 2) — used
   by all 6 cards in index.html's Services grid, 3 columns × 2 rows
   (col-lg-4, ≥992px; col-md-6 2-up at 768–991px; single column below
   that). Originally piloted on card 1, rolled out to cards 2–6, tried
   as a 2-column grid, reverted to 3-column, then (this pass) restyled
   entirely to match a new client reference ("UI Images/new
   services.png") — see CLAUDE.md "Services section — visual reference
   override, plain-rectangle restyle" for the full history.

   Side-by-side split (50% body / 50% photo at ≥768px) — pixel-measured
   directly off the new reference (not assumed): the 3 row-1 card
   boxes' text/photo boundaries measured 50.7/49.3, 50/50, and
   47.4/52.6, averaging ~49.4/50.6 — a clean 50/50 rather than the old
   design's 45/55 (that value was measured off a *different* reference
   image, for the previous diagonal-cut card treatment, and doesn't
   carry over). Card height is driven entirely by the body's content
   (icon/rule/title/desc/CTA); the photo has no height of its own and
   stretches (flex default align-items: stretch) to match, so it can
   never push the card taller than its row-mates. `overflow: hidden` +
   `min-height: 0` on the flex children keeps the photo's corners
   clipped to the card's own rounded corners regardless of height.
   ========================================================================== */

.card-service--featured {
  position: relative;
  display: flex;
  align-items: stretch;
  height: 100%;
  background-color: var(--color-white);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-resting);
  overflow: hidden;
  transition: box-shadow var(--transition-base), transform var(--transition-base);
}

.card-service--featured:hover {
  box-shadow: var(--shadow-hover);
  transform: translateY(var(--lift-distance));
}

.card-service--featured__body {
  flex: 0 0 50%;
  min-height: 0;
  min-width: 0;
  padding: var(--space-4);
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: center;
  background-color: transparent;
}

/* Light off-white circular badge (not solid navy) with a dark-primary
   icon, per the new reference — replaces the old solid-navy/gold-icon
   badge. Reuses the exact same background/color pairing as
   .industry-tile__icon (var(--color-bg-alt) fill, var(--color-primary)
   glyph) rather than inventing a new "subtle gray" value. */
.card-service--featured__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background-color: var(--color-bg-alt);
  color: var(--color-primary);
  font-size: 1.375rem;
  flex-shrink: 0;
  margin-bottom: var(--space-2);
}

/* Short horizontal gold divider directly beneath the icon badge
   (reference shows a small ~24px bar, not the old vertical 40px-tall
   rule that used to sit beside the icon) — same element, repurposed
   from a side-by-side icon-row layout to a stacked one. */
.card-service--featured__rule {
  display: block;
  width: 24px;
  height: 3px;
  border-radius: var(--radius-pill);
  background-color: var(--color-gold);
  margin-bottom: var(--space-3);
}

.card-service--featured__title {
  font-size: var(--fs-h4);
  overflow-wrap: break-word;
  min-width: 0;
  margin-bottom: var(--space-3);
}

.card-service--featured__desc {
  color: var(--color-text-muted);
  font-size: var(--fs-body-lg);
  overflow-wrap: break-word;
  min-width: 0;
  margin-bottom: var(--space-4);
}

/* Small square dark-navy CTA button with an arrow glyph only (no text) —
   replaces the previous .btn-ghost/.btn-ghost--gold "Learn More" text
   link, per the new reference. */
.card-service--featured__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-sm);
  background-color: var(--color-primary);
  color: var(--color-white);
  font-size: 0.875rem;
  flex-shrink: 0;
  transition: background-color var(--transition-base), transform var(--transition-base);
}

.card-service--featured__cta:hover {
  background-color: var(--color-gold);
  transform: translateX(3px);
}

/* Photo now stretches to the card's full height (flex default
   align-items: stretch on .card-service--featured, no align-self
   override) instead of being sized from a fixed aspect-ratio — the new
   reference shows a plain full-bleed rectangular photo with no
   letterboxing, so object-fit switches from `contain` to `cover` to
   fill the box completely, cropping as needed. Supersedes the previous
   per-card inline `aspect-ratio` approach (removed from index.html);
   see CLAUDE.md for why that approach doesn't apply to this reference. */
.card-service--featured__photo {
  position: relative;
  flex: 0 0 50%;
  min-height: 0;
}

.card-service--featured__photo-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

/* Below the 3-per-row grid's own tightest zone (col-lg-4 kicking in at
   992px, before the fluid container has grown much room), the base
   50/50 split (see comment above the 14b block) still leaves titles
   like "Recruitment Process Outsourcing" tight — same class of squeeze
   documented for the previous 45/55-era design, re-applied here at the
   new baseline rather than assumed still correct verbatim. Widens the
   split to 55/45 and compacts type across the same previously-verified
   band (768–1666.98px, covering the col-md-6 2-up zone, the tightest
   part of col-lg-4 3-up, and up to where container-nx hits its 1600px
   fluid-width cap) — applied identically to all 6 cards, not a
   per-card override. Full 50/50 + full type size is untouched at
   ≥1666.98px and in the <768px stacked mobile layout. */
@media (min-width: 768px) and (max-width: 1666.98px) {
  .card-service--featured__body {
    flex-basis: 55%;
    padding: var(--space-3);
  }

  .card-service--featured__photo {
    flex-basis: 45%;
  }

  .card-service--featured__icon {
    width: 44px;
    height: 44px;
    font-size: 1.125rem;
  }

  .card-service--featured__title {
    font-size: 1.0625rem;
  }

  .card-service--featured__desc {
    font-size: 0.9375rem;
  }
}

/* Mobile (<768px) — per client reference ("Nexora talent solutions
   mobile UI" mockup), cards stay side-by-side/horizontal here too,
   same basic row structure as desktop just narrower — NOT stacked into
   a column. An earlier version of this breakpoint set
   `flex-direction: column` (text on top, full-width photo below,
   arrow button centered in between), which produced very tall cards
   with the arrow floating awkwardly mid-card; that rule is removed
   here, not just overridden, since `.card-service--featured`'s base
   `display: flex` with no direction override already defaults to `row`
   (the same row layout used at every wider breakpoint) once the
   column override is gone. Split widened further than the
   768–1666.98px tier's 55/45 (to 63/37 — text needs relatively more
   room here since the column itself is narrower in absolute px, even
   though the split ratio is only slightly more text-favoring), and
   type/spacing compacted further still, so the same 6 titles/
   descriptions that fit at the tablet tier also fit cleanly at
   390–767px. Values below were arrived at empirically via Playwright
   screenshots at 390px and 468px against the reference mockup, not
   guessed outright — see CLAUDE.md "Services section — mobile layout
   fix" for the before/after and per-card verification. */
@media (max-width: 767px) {
  .card-service--featured__body {
    flex-basis: 63%;
    padding: var(--space-3);
    justify-content: flex-start;
  }

  .card-service--featured__photo {
    flex-basis: 37%;
  }

  .card-service--featured__icon {
    width: 40px;
    height: 40px;
    font-size: 1rem;
    margin-bottom: var(--space-1);
  }

  .card-service--featured__rule {
    margin-bottom: var(--space-2);
  }

  .card-service--featured__title {
    font-size: 0.9375rem;
    line-height: 1.3;
    margin-bottom: var(--space-2);
  }

  .card-service--featured__desc {
    font-size: 0.8125rem;
    line-height: 1.5;
    margin-bottom: var(--space-2);
  }

  .card-service--featured__cta {
    width: 32px;
    height: 32px;
    font-size: 0.75rem;
  }
}

/* ==========================================================================
   15. Statement Card (dark, quote-style — e.g. Vision)
   ========================================================================== */

.statement-card {
  position: relative;
  background-color: var(--color-primary);
  border-radius: var(--radius-card);
  padding: var(--space-7) var(--space-6);
  color: var(--color-white);
  overflow: hidden;
  height: 100%;
}

.statement-card__icon {
  font-size: 2rem;
  color: var(--color-gold);
  opacity: 0.6;
  margin-bottom: var(--space-4);
}

.statement-card__label {
  display: block;
  font-family: var(--font-heading);
  font-size: var(--fs-eyebrow);
  font-weight: 700;
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--color-gold);
  margin-bottom: var(--space-3);
}

.statement-card__text {
  position: relative;
  z-index: 1;
  font-family: var(--font-heading);
  font-size: var(--fs-h3);
  font-weight: 700;
  line-height: 1.35;
  color: var(--color-white);
  margin-bottom: 0;
}

/* ==========================================================================
   16. Highlight Card (light, icon + bordered — e.g. Mission)
   ========================================================================== */

.highlight-card {
  display: flex;
  align-items: flex-start;
  gap: var(--space-4);
  height: 100%;
  background-color: var(--color-white);
  border-left: 4px solid var(--color-gold);
  border-radius: var(--radius-sm);
  padding: var(--space-6) var(--space-5);
  box-shadow: var(--shadow-resting);
}

.highlight-card__icon {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background-color: var(--color-bg-alt);
  color: var(--color-gold);
  font-size: 1.375rem;
}

.highlight-card__label {
  display: block;
  font-family: var(--font-heading);
  font-size: var(--fs-eyebrow);
  font-weight: 700;
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin-bottom: var(--space-2);
}

.highlight-card__text {
  font-size: var(--fs-body-lg);
  font-weight: 500;
  color: var(--color-text);
  margin-bottom: 0;
}

/* ==========================================================================
   16b. Vision/Mission Card (matching, circular icon badge — replaces the
   statement-card/highlight-card pairing on index.html's About Us only;
   statement-card and highlight-card above stay as-is for about.html)
   ========================================================================== */

.vm-card {
  height: 100%;
  background-color: var(--color-white);
  border-radius: var(--radius-card);
  padding: var(--space-5);
  box-shadow: var(--shadow-resting);
  transition: transform var(--transition-base), box-shadow var(--transition-base);
}

.vm-card:hover {
  transform: translateY(var(--lift-distance));
  box-shadow: var(--shadow-hover);
}

.vm-card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background-color: var(--color-primary);
  color: var(--color-gold);
  font-size: 1.25rem;
  margin-bottom: var(--space-4);
}

.vm-card__label {
  display: block;
  font-family: var(--font-heading);
  font-size: var(--fs-eyebrow);
  font-weight: 700;
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--color-gold);
  margin-bottom: var(--space-2);
}

.vm-card__text {
  font-size: var(--fs-body);
  color: var(--color-text);
  margin-bottom: 0;
}

/* ==========================================================================
   16c. Core Values Grid (index.html About Us only) — compact white card
   housing a centered heading and 6 icon-badge items; single row with
   dividers at desktop, wraps to 3 then 2 columns (dividers dropped) below.
   ========================================================================== */

.core-values-section {
  padding-block: var(--space-5);
}

@media (min-width: 1024px) {
  .core-values-section {
    padding-block: var(--space-7);
  }
}

.core-values-card {
  /* Matches the wrapping .section-bg-alt section's own background — the
     card is no longer a distinct white surface, so no box-shadow either
     (a shadow would still draw a visible edge around the card even with
     matching fill colors, undercutting the "one flat gray block" goal). */
  background-color: var(--color-bg-alt);
  border-radius: var(--radius-card);
  padding-block: 12px;
  padding-inline: var(--space-4);
}

.core-values-card .section-heading {
  margin-bottom: var(--space-4);
}

@media (min-width: 1024px) {
  .core-values-card {
    padding-block: var(--space-4);
    padding-inline: var(--space-6);
  }
}

.core-values-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-6) var(--space-3);
}

@media (min-width: 576px) {
  .core-values-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (min-width: 992px) {
  .core-values-grid {
    grid-template-columns: repeat(6, 1fr);
    gap: 0;
  }

  .core-values-grid__item {
    border-left: 1px solid var(--color-border);
  }

  .core-values-grid__item:first-child {
    border-left: none;
  }
}

.core-values-grid__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--space-3);
  padding-inline: var(--space-3);
  /* Grid items default to min-width:auto (their content's min-content),
     which can force a 1fr track wider than its actual share to fit the
     new description text, overflowing the grid's own container at
     narrow widths — see CLAUDE.md "Core Values" note. min-width:0 lets
     the description wrap fully within its assigned track instead. */
  min-width: 0;
}

.core-values-grid__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background-color: rgba(var(--color-gold-rgb), 0.12);
  border: 1.5px solid var(--color-gold);
  color: var(--color-gold);
  font-size: 1.5rem;
}

.core-values-grid__label {
  font-family: var(--font-heading);
  font-weight: 600;
  color: var(--color-primary);
  font-size: var(--fs-body);
}

/* Description copy added below each value name (client-confirmed copy —
   see CLAUDE.md). .core-values-grid__item is a centered flex column with
   its own gap, so this just needs its own type treatment; margin:0 avoids
   double-spacing on top of that flex gap (p's default browser margin). */
.core-values-grid__desc {
  font-size: var(--fs-small);
  color: var(--color-text-muted);
  line-height: var(--lh-body);
  margin: 0;
}

/* ==========================================================================
   17. Form Wizard (progress indicator + stepped sections)
   ========================================================================== */

/* Progress stepper (added post Phase 2, replaces an edge-to-edge
   connector-line approach that caused repeated 1px alignment bugs —
   percentage-based pseudo-element positioning across sibling stacking
   contexts, tuned and re-tuned for vertical centering and endpoint
   math, still needed pixel-perfect math to avoid a visible seam at
   each circle's edge). Now uses a GAPPED SEGMENT design instead (per
   client reference, kissanagrimall.com's enrollment modal): the
   connector is a real flex sibling between each pair of circles, with
   margin on both ends so the line never touches a circle at all —
   there's no edge to hit, so there's no edge-alignment math to get
   wrong. See CLAUDE.md for the full rationale. */
.form-progress {
  display: flex;
  align-items: flex-start;
  margin-bottom: var(--space-5);
}

/* Fixed-width (32px, matching the marker) rather than flex:1. A
   flex:1 step, with a much narrower 32px marker centered inside it via
   align-items:center, leaves a lot of empty slack space on either side
   of the marker whenever the label text is wide relative to the step's
   share of the row — that slack was adding itself on top of the
   connector's own intentional margin, producing an inconsistent,
   much-larger-than-intended gap (measured 37-60px instead of the
   intended 10px). Locking the step to the marker's own width removes
   that slack entirely: the label (white-space:nowrap below) is free to
   overflow this narrow column while staying centered via align-items,
   so the connector's margin is now the ONLY source of the gap. */
.form-progress__step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-1);
  flex: 0 0 32px;
  /* Flex items default to min-width:auto, not 0 — without this, the
     label's white-space:nowrap content (its full text width, since
     nowrap makes min-content == max-content) silently overrides the
     32px flex-basis above and the column stretches back out to fit the
     label anyway. This is what turned out to still be happening even
     after setting flex-basis: measured step widths were 131-194px, not
     32px, until this was added. */
  min-width: 0;
}

/* Real sibling element between two .form-progress__step markers — not
   an absolutely-positioned pseudo-element, so its position follows
   ordinary flex box-model rules (margin, flex-grow) instead of
   percentage math relative to a sibling's box. margin-inline creates
   the deliberate gap from each neighboring circle (10px, within the
   requested 8-12px range) — the line's rendered width is however much
   flex-grow gives it, minus 20px for the two margins, so it never
   reaches either circle regardless of container width. margin-top:15px
   centers it vertically on the 32px marker (marker center = 16px from
   the row's top; the connector is 2px tall, so 15px + 2px/2 = 16px too
   — same "line's own center, not its top edge" fix applied here
   directly via a real margin instead of an absolutely-positioned top
   value). */
.form-progress__connector {
  flex: 1;
  height: 2px;
  margin-top: 15px;
  margin-inline: 10px;
  background-color: var(--color-border);
  transition: background-color var(--transition-base);
}

/* Gold once the step immediately before this connector (its preceding
   DOM sibling) is complete — equivalent to the previous logic ("gold
   once the step this connector leads into is active or complete"),
   just expressed as a plain sibling selector against a real element
   instead of a state check on the connector's own owning step. */
.form-progress__step.is-complete + .form-progress__connector {
  background-color: var(--color-gold);
}

.form-progress__step-marker {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background-color: var(--color-white);
  border: 2px solid var(--color-border);
  color: var(--color-text-muted);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: var(--fs-small);
  transition: background-color var(--transition-base), border-color var(--transition-base),
    color var(--transition-base), transform var(--transition-base), box-shadow var(--transition-base);
}

.form-progress__step-label {
  font-family: var(--font-heading);
  font-size: var(--fs-eyebrow);
  font-weight: 700;
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--color-text-muted);
  text-align: center;
  /* The step column is now a fixed 32px (matching the marker, see
     .form-progress__step) rather than flex:1, so most labels are wider
     than their own column. white-space:nowrap lets a label overflow its
     narrow column symmetrically while align-items:center keeps it
     centered on the marker above it — standard, robust flexbox
     behavior, not a fragile position/width calculation. */
  white-space: nowrap;
  transition: color var(--transition-base);
}

/* The centered label of an outermost step overflows both left AND
   right of its narrow 32px column — fine for middle steps (their
   overflow lands harmlessly in the wide connector space on either
   side), but for the FIRST/LAST step, the overflow toward the far edge
   pushes the label past .modal__dialog's own boundary, which clips it
   (overflow: hidden). Anchoring the first label to its marker's left
   edge and the last to its marker's right edge means they only
   overflow INWARD, into that same safe connector space, never toward
   the dialog edge. */
.form-progress__step:first-child .form-progress__step-label {
  align-self: flex-start;
  text-align: left;
}

.form-progress__step:last-child .form-progress__step-label {
  align-self: flex-end;
  text-align: right;
}

.form-progress__step.is-active .form-progress__step-marker {
  background-color: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--color-gold);
  transform: scale(1.12);
  box-shadow: 0 0 0 5px rgba(var(--color-gold-rgb), 0.18);
}

.form-progress__step.is-active .form-progress__step-label {
  color: var(--color-gold);
}

.form-progress__step.is-complete .form-progress__step-marker {
  background-color: var(--color-gold);
  border-color: var(--color-gold);
  color: var(--color-primary);
}

.form-progress__step.is-complete .form-progress__step-label {
  color: var(--color-primary);
}

@media (max-width: 575px) {
  .form-progress__step-label {
    display: none;
  }
}

.form-step {
  display: none;
}

.form-step.is-active {
  display: block;
}

.form-wizard__nav {
  display: flex;
  justify-content: space-between;
  gap: var(--space-3);
  margin-top: var(--space-3);
}

/* ==========================================================================
   18. File Upload
   ========================================================================== */

.file-upload {
  position: relative;
  margin-bottom: var(--space-3);
}

.file-upload input[type="file"] {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
}

.file-upload__box {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3);
  border: 1.5px dashed var(--color-border);
  border-radius: var(--radius-input);
  background-color: var(--color-white);
  box-shadow: var(--shadow-resting);
  transition: border-color var(--transition-fast);
}

.file-upload:hover .file-upload__box,
.file-upload:focus-within .file-upload__box {
  border-color: var(--color-gold);
}

.file-upload__icon {
  font-size: 1.5rem;
  color: var(--color-gold);
}

.file-upload__text {
  display: flex;
  flex-direction: column;
}

.file-upload__title {
  font-family: var(--font-heading);
  font-weight: 600;
  color: var(--color-primary);
  font-size: var(--fs-body);
}

.file-upload__hint {
  font-size: var(--fs-small);
  color: var(--color-text-muted);
}

/* ==========================================================================
   19. Map Placeholder
   ========================================================================== */

.map-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: 200px;
  padding: var(--space-5);
  text-align: center;
  border: 1.5px dashed var(--color-border);
  border-radius: var(--radius-card);
  background-color: var(--color-bg-alt);
  color: var(--color-text-muted);
}

.map-placeholder i {
  font-size: 2rem;
  color: var(--color-gold);
  margin-bottom: var(--space-2);
}

.map-placeholder span {
  font-family: var(--font-heading);
  font-weight: 600;
  color: var(--color-primary);
}

.map-placeholder small {
  font-size: var(--fs-small);
}

/* ==========================================================================
   20. Contact Form
   ========================================================================== */

.contact-form .btn-nx {
  margin-top: var(--space-2);
}

/* ==========================================================================
   21. Timeline Vertical (alternating, numbered, connecting spine)
   Use for sequential processes where an odd step count (or long labels)
   would make the horizontal .timeline (§6) wrap awkwardly.
   ========================================================================== */

.timeline-vertical {
  position: relative;
  max-width: 900px;
  margin-inline: auto;
}

.timeline-vertical::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 2px;
  background-color: var(--color-gold);
  transform: translateX(-50%);
  z-index: 0;
}

.timeline-vertical__step {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr 72px 1fr;
  align-items: center;
  column-gap: var(--space-4);
}

.timeline-vertical__step + .timeline-vertical__step {
  margin-top: var(--space-6);
}

.timeline-vertical__marker {
  grid-column: 2;
  justify-self: center;
  align-self: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background-color: var(--color-primary);
  color: var(--color-gold);
  font-family: var(--font-heading);
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform var(--transition-base), box-shadow var(--transition-base);
}

.timeline-vertical__step:hover .timeline-vertical__marker {
  transform: scale(1.08);
  box-shadow: 0 0 0 6px rgba(200, 166, 75, 0.25), var(--shadow-hover);
}

.timeline-vertical__content {
  grid-column: 1;
}

.timeline-vertical__step--left .timeline-vertical__content {
  grid-column: 1;
  text-align: right;
}

.timeline-vertical__step--right .timeline-vertical__content {
  grid-column: 3;
  text-align: left;
}

.timeline-vertical__title {
  font-size: var(--fs-h4);
  font-weight: 700;
  color: var(--color-primary);
  margin-bottom: 0;
}

@media (max-width: 767px) {
  .timeline-vertical::before {
    left: 27px;
  }

  .timeline-vertical__step {
    grid-template-columns: 56px 1fr;
    column-gap: var(--space-3);
  }

  .timeline-vertical__marker {
    grid-column: 1;
  }

  .timeline-vertical__step--left .timeline-vertical__content,
  .timeline-vertical__step--right .timeline-vertical__content,
  .timeline-vertical__content {
    grid-column: 2;
    text-align: left;
  }
}

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

/* ==========================================================================
   16d. Horizontal Hiring Process Timeline (index.html Employers section
   only, added post Phase 2) — numbered circles connected by a line with
   chevron connectors, title + gold rule (+ description, once approved)
   below each. `.timeline-vertical` above is untouched — the paused
   employers.html still uses it.

   Responsive strategy (deliberately tiered, not organic flex-wrap, to
   avoid ever stranding a lone last item from a 7-count row):
     <992px            — vertical stacked list: marker left, card right,
                          single connecting line down the left (same
                          pattern as .timeline-vertical's own mobile
                          fallback).
     992px–1535px      — 4-column grid; 7 items auto-wrap to a 4-item row
                          + a 3-item row. The connector after the 4th item
                          is suppressed (item 5 starts a new row, so a
                          straight line there would be meaningless) — the
                          3-item second row is a normal row, not an
                          orphan.
     >=1536px           — full 7-across single row, matching the reference.
   See CLAUDE.md "Employers section — visual reference override" (Hiring
   Process sub-section). */

/* Scoped override — this section keeps .section-bg-alt for markup/JS
   consistency with the rest of the page's alt-bg sections, but swaps in
   a distinct pale cream instead of the shared gray. Same specificity as
   .section-bg-alt (one class each); wins on source order since this
   rule loads later in the same stylesheet. Does not touch
   .section-bg-alt itself, so every other alt-bg section is unaffected. */
.hiring-process-section {
  background-color: #FDF9F0;
}

.timeline-h {
  position: relative;
  max-width: 700px;
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

.timeline-h::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 27px;
  width: 2px;
  background-color: var(--color-gold);
  z-index: 0;
}

.timeline-h__step {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
}

.timeline-h__marker {
  flex-shrink: 0;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background-color: var(--color-primary);
  color: var(--color-gold);
  font-family: var(--font-heading);
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 2;
}

.timeline-h__card {
  padding-top: var(--space-1);
}

.timeline-h__title {
  font-size: var(--fs-h4);
  font-weight: 700;
  color: var(--color-primary);
  margin-bottom: var(--space-2);
}

.timeline-h__rule {
  display: block;
  width: 32px;
  height: 3px;
  background-color: var(--color-gold);
  border-radius: var(--radius-pill);
}

.timeline-h__desc {
  color: var(--color-text-muted);
  font-size: var(--fs-body);
  margin-top: var(--space-2);
  margin-bottom: 0;
}

@media (min-width: 992px) {
  .timeline-h {
    max-width: none;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-6) var(--space-4);
  }

  .timeline-h::before {
    display: none;
  }

  .timeline-h__step {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  .timeline-h__marker {
    margin-bottom: var(--space-3);
  }

  .timeline-h__card {
    padding-top: 0;
  }

  .timeline-h__rule {
    margin-inline: auto;
  }

  /* connector: gold line from this marker to the next sibling's marker,
     plus a small chevron badge at the midpoint of the line */
  .timeline-h__step:not(:last-child)::after {
    content: '';
    position: absolute;
    top: 28px;
    left: 50%;
    width: calc(100% + var(--space-4));
    height: 2px;
    background-color: var(--color-gold);
    z-index: 0;
  }

  .timeline-h__step:not(:last-child)::before {
    content: '\f054';
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    font-size: 0.6rem;
    color: var(--color-gold);
    position: absolute;
    top: 28px;
    left: calc(100% + (var(--space-4) / 2));
    transform: translate(-50%, -50%);
    z-index: 1;
    background-color: var(--color-bg-alt);
    width: 18px;
    height: 18px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  /* item 4 wraps to a new row at this tier — no connector bridging into it */
  .timeline-h__step:nth-child(4)::after,
  .timeline-h__step:nth-child(4)::before {
    display: none;
  }
}

@media (min-width: 1536px) {
  .timeline-h {
    grid-template-columns: repeat(7, 1fr);
    gap: var(--space-5) var(--space-3);
  }

  .timeline-h__step:not(:last-child)::after {
    width: calc(100% + var(--space-3));
  }

  .timeline-h__step:not(:last-child)::before {
    left: calc(100% + (var(--space-3) / 2));
  }

  /* all 7 are in one row now, so item 4's connector is valid again */
  .timeline-h__step:nth-child(4)::after {
    display: block;
  }

  .timeline-h__step:nth-child(4)::before {
    display: flex;
  }
}

/* ==========================================================================
   16e. Photo-top Category Card (index.html Job Seekers "We Hire For"
   grid only, added post Phase 2) — same .card-service shell (white bg/
   radius/shadow/hover-lift) as a base, but padding: 0 on the card itself
   so a full-bleed photo can sit flush against the top/left/right edges;
   clipped to the card's own rounded corners via the existing overflow:
   hidden already on .card-service (same technique .card-service--featured
   uses for its photo). Title + .card-service__rule + .card-service__desc
   are reused as-is from the illustrated Employers cards; the reference
   shows a bare arrow (no "Learn More" text) so the ghost-link's visible
   label is swapped for a .sr-only one while keeping the same
   .btn-ghost/.btn-ghost--gold arrow styling. See CLAUDE.md "Job Seekers
   section — visual reference override". */
.card-service--photo-top {
  padding: 0;
  display: flex;
  flex-direction: column;
}

.card-photo-top__media {
  width: 100%;
  aspect-ratio: 2.7 / 1;
}

.card-photo-top__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.card-photo-top__body {
  position: relative;
  flex: 1;
  padding: var(--space-4);
}

.card-photo-top__body .card-service__rule {
  display: block;
  width: 32px;
  height: 3px;
  background-color: var(--color-gold);
  border-radius: var(--radius-pill);
  margin-bottom: var(--space-2);
}

.card-photo-top__body .card-service__desc {
  padding-right: var(--space-6);
}

.card-photo-top__link {
  position: absolute;
  right: var(--space-4);
  bottom: var(--space-4);
}

/* ==========================================================================
   16f. Split Photo Card (.card-service--split, index.html Candidate
   Services grid only, added post Phase 2) — same .card-service shell
   (white bg/radius/shadow/hover-lift) as a base, but a horizontal split
   like .card-service--featured (text left, photo bleeding right, clipped
   to the card's own rounded corners via overflow: hidden), reused here
   instead of a new shell per CLAUDE.md's "reuse an existing pattern
   rather than build a fourth near-identical card variant" instruction.
   Split is a single fixed 40% text / 60% photo on every card (no
   per-card modifier) — --wide-photo has been removed.

   REVISED: the diagonal cut is now drawn in CSS (clip-path), not
   cropped from the reference photo. The first attempt reused the
   reference image's own baked-in diagonal wedge as-is (same technique
   as the Services/Job Seekers photos), but per-card pixel inspection
   showed the reference mockup itself bakes in a DIFFERENT accent-line
   color per card (gold on 2 cards, pale blue on the other 4 — this is
   the client's own mockup, not a rendering bug) and a slightly
   different wedge geometry per card, since each wedge's shape was
   dictated by where that card's own title/body text happened to wrap.
   That makes pixel-identical color/angle across all 6 impossible by
   cropping alone. All 6 photos were re-cropped as plain rectangles
   (no wedge, no baked-in line — verified clean at the crop edge), and
   the diagonal + gold line are now drawn identically via clip-path +
   a ::before sliver on every card, guaranteeing the same angle and the
   same `var(--color-gold)` everywhere. `min-height` is fixed on the
   card so the clip-path polygon (in %, relative to each photo box)
   resolves to the same on-screen angle regardless of how much a given
   card's description text wraps. */
.card-service--split {
  display: flex;
  align-items: stretch;
  padding: 0;
  min-height: 260px;
}

.card-service--split__body {
  flex: 0 0 45%;
  min-width: 0;
  padding: var(--space-5);
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.card-service--split__title {
  font-size: 1.125rem;
  line-height: 1.3;
  margin-bottom: var(--space-2);
  overflow-wrap: break-word;
  min-width: 0;
}

.card-service--split__rule {
  display: block;
  width: 40px;
  height: 3px;
  background-color: var(--color-gold);
  border-radius: var(--radius-pill);
  margin-bottom: var(--space-3);
}

.card-service--split__desc {
  color: var(--color-text-muted);
  font-size: 0.9375rem;
  margin-bottom: var(--space-3);
}

.card-service--split__photo {
  position: relative;
  flex: 0 0 55%;
  min-height: 0;
}

/* gold accent sliver: identical clip-path polygon to __photo-img, but
   its own box is offset 5px further left (inset left: -5px), so on a
   straight edge it would be fully hidden behind the image — only along
   the shared diagonal does the extra 5px peek out, reading as a clean
   gold line following the cut exactly. Painted first (before the img
   in DOM order) so the image layers on top of it. */
.card-service--split__photo::before {
  content: '';
  position: absolute;
  inset: 0 0 0 -5px;
  background-color: var(--color-gold);
  clip-path: polygon(12% 0%, 100% 0%, 100% 100%, 0% 100%);
}

.card-service--split__photo-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  clip-path: polygon(12% 0%, 100% 0%, 100% 100%, 0% 100%);
  display: block;
}

@media (max-width: 767px) {
  .card-service--split {
    flex-direction: column;
    min-height: 0;
  }

  .card-service--split__body {
    flex-basis: auto;
  }

  .card-service--split__photo {
    flex-basis: auto;
    height: 200px;
  }

  .card-service--split__photo::before,
  .card-service--split__photo-img {
    clip-path: none;
  }

  .card-service--split__photo::before {
    display: none;
  }
}

/* ==========================================================================
   17. Contact Card (premium two-tone, index.html Contact section only,
   added post Phase 2) — replaces the previous layout of three separate
   floating `.card-service` boxes + a plain `.map-placeholder` box beside
   an unconnected form, with one unified card split into a dark-navy info
   panel and a white form panel. Deliberately NOT built on `.card-service`
   or a modifier of `.map-placeholder`, since both classes are still used
   as-is by the paused contact.html (info cards + its own map placeholder)
   — reusing/modifying either here would have changed contact.html too.
   `.form-field` and `.btn-nx.btn-primary` (the form's actual input/button
   styling) ARE reused unchanged — they already matched the floating-
   label/rounded-input/soft-shadow spec, so nothing new was needed there,
   just placed inside the new white panel. Gold divider/icon-badge
   treatment on the navy panel reuses the same translucency values already
   established elsewhere on dark backgrounds (footer socials/divider,
   industry-tile hover) rather than inventing new opacity levels. */
.contact-card {
  display: flex;
  align-items: stretch;
  border-radius: var(--radius-card);
  overflow: hidden;
  box-shadow: var(--shadow-resting);
}

.contact-card__info {
  flex: 0 0 42%;
  min-width: 0;
  background-color: var(--color-primary);
  color: rgba(255, 255, 255, 0.75);
  padding: var(--space-7) var(--space-6);
  display: flex;
  flex-direction: column;
}

.contact-card__item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding-block: var(--space-4);
  min-width: 0;
}

.contact-card__item:first-child {
  padding-top: 0;
}

.contact-card__item-body {
  min-width: 0;
}

.contact-card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background-color: rgba(200, 166, 75, 0.15);
  color: var(--color-gold);
  font-size: 1.25rem;
  flex-shrink: 0;
}

.contact-card__item-title {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: var(--fs-body-lg);
  color: var(--color-white);
  margin-bottom: var(--space-1);
}

.contact-card__item-text {
  color: rgba(255, 255, 255, 0.75);
  margin-bottom: 0;
}

.contact-card__divider {
  display: block;
  height: 1px;
  background-color: rgba(200, 166, 75, 0.3);
}

.contact-card__map {
  margin-top: var(--space-5);
  padding: var(--space-4);
  text-align: center;
  border: 1px solid rgba(200, 166, 75, 0.25);
  border-radius: var(--radius-input);
  background-color: rgba(255, 255, 255, 0.05);
}

.contact-card__map i {
  font-size: 1.75rem;
  color: var(--color-gold);
  margin-bottom: var(--space-2);
  display: block;
}

.contact-card__map span {
  display: block;
  font-family: var(--font-heading);
  font-weight: 600;
  color: var(--color-white);
}

.contact-card__map small {
  display: block;
  font-size: var(--fs-small);
  color: rgba(255, 255, 255, 0.55);
  margin-top: var(--space-1);
}

.contact-card__form {
  flex: 1 1 58%;
  min-width: 0;
  background-color: var(--color-white);
  padding: var(--space-7) var(--space-6);
}

@media (max-width: 767px) {
  .contact-card {
    flex-direction: column;
  }

  .contact-card__info,
  .contact-card__form {
    flex-basis: auto;
    padding: var(--space-6) var(--space-4);
  }
}

/* ==========================================================================
   18. Registration Modal (added post Phase 2) — replaces the standalone
   employer-registration.html / candidate-registration.html pages (now
   archived, see CLAUDE.md "Registration Modals"). Popup wrapper only;
   everything inside .modal__dialog is the exact same .form-wizard /
   .form-progress / .form-step / .form-field / .file-upload markup the two
   pages used, unchanged — this is a repackaging into a popup, not a
   redesign of the form itself, so none of those components were touched.
   Overlay color/opacity reuses the same rgba(--color-primary) translucent
   navy already established by .nav-backdrop rather than inventing a new
   scrim color. z-index 1200 sits above .nav-mobile (1100)/.nav-backdrop
   (1050)/.site-header (1000), the highest stacking layer on the site,
   since a modal should sit above literally everything else. */
.modal {
  position: fixed;
  inset: 0;
  z-index: 1200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-4);
  visibility: hidden;
  opacity: 0;
  transition: opacity var(--transition-base), visibility var(--transition-base);
}

.modal.is-open {
  visibility: visible;
  opacity: 1;
}

.modal__overlay {
  position: absolute;
  inset: 0;
  background-color: rgba(var(--color-primary-rgb), 0.6);
  backdrop-filter: blur(4px);
}

/* .modal__dialog itself does NOT scroll — only .modal__scroll (its inner
   content wrapper) does. This keeps .modal__close and .modal__header
   (eyebrow + title) permanently visible/pinned regardless of scroll
   position. Needed because form-wizard.js (unmodified, shared with the
   archived pages) calls `step.scrollIntoView({block:'start'})` on every
   step change — on a tall step (e.g. Candidate step 1's 7 fields) that
   scroll happens within .modal__scroll, and without this split it was
   scrolling the header/close button out of view along with everything
   else, which reads as broken ("where did the close button go?"). Note
   .form-progress still lives inside .modal__scroll (and does scroll away
   on tall steps) — it has to stay a descendant of the actual .form-wizard
   element for form-wizard.js's own `wizard.querySelectorAll(...)` to find
   it; only the close button and title needed to move outside. */
.modal__dialog {
  position: relative;
  display: flex;
  flex-direction: column;
  width: min(760px, 100%);
  max-height: min(720px, 92vh);
  overflow: hidden;
  background-color: var(--color-white);
  border-radius: var(--radius-card);
  /* Layered shadow (soft ambient + deeper key light) — a single
     --shadow-hover reads as flat once the dialog sits on top of the
     already-dark, blurred .modal__overlay scrim, so the modal gets its
     own more generous elevation rather than reusing the resting card
     shadow used against plain white section backgrounds. */
  box-shadow: 0 16px 40px rgba(11, 27, 52, 0.16), 0 32px 80px rgba(11, 27, 52, 0.28);
  transform: scale(0.95) translateY(12px);
  transition: transform var(--transition-base);
}

.modal.is-open .modal__dialog {
  transform: scale(1) translateY(0);
}

.modal__scroll {
  overflow-y: auto;
  padding: var(--space-3) var(--space-5) var(--space-4);
}

.modal__close {
  position: absolute;
  top: var(--space-4);
  right: var(--space-4);
  z-index: 1;
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 1px solid var(--color-border);
  background-color: var(--color-white);
  color: var(--color-text-muted);
  font-size: 1rem;
  cursor: pointer;
  transition: color var(--transition-fast), border-color var(--transition-fast), transform var(--transition-fast);
}

.modal__close:hover {
  color: var(--color-primary);
  border-color: var(--color-gold);
  transform: rotate(90deg);
}

.modal__header {
  flex-shrink: 0;
  padding: var(--space-4) var(--space-5) var(--space-3) var(--space-5);
  border-bottom: 1px solid var(--color-border);
}

.modal__header .eyebrow {
  margin-bottom: var(--space-1);
}

.modal__title {
  /* Fixed, deliberately smaller than --fs-h3's clamp ceiling (up to 2rem)
     — still reads clearly as a heading (weight 800 via the shared h2
     rule, primary color) but trims vertical space the wizard steps below
     need more, per the compact-modal pass. */
  font-size: 1.375rem;
  color: var(--color-primary);
  margin-top: 0;
}

/* Inside a modal the wizard's own top spacing (designed for a full page)
   is excessive — tightened here rather than on .form-progress/.form-wizard__nav
   directly, since those are shared with the archived pages' own layout. */
.modal__scroll .form-progress {
  margin-bottom: var(--space-4);
  margin-top: var(--space-1);
}

@media (max-width: 575px) {
  .modal {
    padding: 0;
  }

  .modal__dialog {
    width: 100%;
    max-height: 100vh;
    height: 100%;
    border-radius: 0;
  }

  .modal__header {
    padding: var(--space-5) var(--space-6) var(--space-3) var(--space-4);
  }

  .modal__scroll {
    padding: 0 var(--space-4) var(--space-4);
  }
}