/* ==========================================================================
   Primeforce Manpower & Recruitment Agency Inc. — site styles
   Design system: Navy (authority) + Gold (trust) · Montserrat / Source Sans 3
   ========================================================================== */

:root {
  /* Brand */
  --navy-950: #071426;
  --navy-900: #0b1f3a;
  --navy-800: #10294d;
  --navy-700: #163664;
  --navy-600: #1f4a85;
  --gold-600: #a67f2a;
  --gold-500: #c8a24a;
  --gold-400: #dcbb6b;
  --gold-300: #ecd79f;
  --gold-100: #faf4e3;

  /* Neutrals */
  --ink: #0f172a;
  --ink-2: #1e293b;
  --muted: #526074;
  --muted-2: #7b8799;
  --border: #e3e8ef;
  --border-2: #cfd7e2;
  --bg: #f6f7f9;
  --surface: #ffffff;

  /* Semantic */
  --success: #15803d;
  --danger: #c0262c;

  /* Type */
  --font-head: "Fraunces", "Georgia", "Times New Roman", serif;
  --font-ui: "Instrument Sans", "Segoe UI", system-ui, sans-serif;
  --font-body: "Instrument Sans", "Segoe UI", system-ui, sans-serif;

  /* Scale */
  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 16px;
  --r-xl: 24px;
  --shadow-sm: 0 1px 2px rgba(11, 31, 58, .06), 0 1px 3px rgba(11, 31, 58, .08);
  --shadow-md: 0 6px 16px -4px rgba(11, 31, 58, .12), 0 2px 6px rgba(11, 31, 58, .06);
  --shadow-lg: 0 20px 40px -12px rgba(11, 31, 58, .22);
  --container: 1180px;
  --gutter: clamp(16px, 4vw, 40px);
  --ease: cubic-bezier(.2, .7, .2, 1);
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.6;
  color: var(--ink);
  background: var(--surface);
  -webkit-font-smoothing: antialiased;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; }
h1, h2, h3, h4 { font-family: var(--font-head); font-weight: 600; line-height: 1.12; margin: 0; color: var(--navy-900); letter-spacing: -.01em; font-variation-settings: "SOFT" 30; }
p { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }
:focus-visible { outline: 3px solid var(--gold-500); outline-offset: 3px; border-radius: 4px; }
::selection { background: var(--gold-300); color: var(--navy-900); }

.skip-link {
  position: absolute; left: 16px; top: -60px; z-index: 1000;
  background: var(--navy-900); color: #fff; padding: 10px 16px; border-radius: var(--r-sm);
  font-weight: 600; transition: top .2s;
}
.skip-link:focus { top: 16px; }

.container { width: min(100% - 2 * var(--gutter), var(--container)); margin-inline: auto; }
.section { padding-block: clamp(64px, 9vw, 112px); }
.section--tight { padding-block: clamp(48px, 6vw, 80px); }
.section--alt { background: var(--bg); }
.section--navy { background: var(--navy-900); color: #d9e1ee; }
.section--navy h2, .section--navy h3 { color: #fff; }

/* ---------- Typography ---------- */
.eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--font-ui); font-size: 12px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
  color: var(--gold-600); margin-bottom: 16px;
}
.eyebrow::before { content: ""; width: 28px; height: 2px; background: var(--gold-500); }
.section--navy .eyebrow { color: var(--gold-400); }
.section--navy .eyebrow::before { background: var(--gold-400); }
.eyebrow--center { justify-content: center; }
.eyebrow--center::after { content: ""; width: 28px; height: 2px; background: var(--gold-500); }

.h1 { font-size: clamp(40px, 6vw, 70px); font-weight: 600; letter-spacing: -.02em; line-height: 1.05; }
.h2 { font-size: clamp(30px, 3.8vw, 46px); font-weight: 600; }
.h3 { font-size: clamp(20px, 2vw, 24px); font-weight: 600; }
.lead { font-size: clamp(18px, 1.5vw, 20px); color: var(--muted); line-height: 1.6; max-width: 62ch; }
.section--navy .lead { color: #b8c4d6; }
.section-head { max-width: 720px; margin-bottom: clamp(36px, 5vw, 56px); }
.section-head--center { margin-inline: auto; text-align: center; }
.section-head .lead { margin-top: 16px; }
.section-head--center .lead { margin-inline: auto; }
.gold { color: var(--gold-500); }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 50px; padding: 0 26px; border-radius: var(--r-md);
  font-family: var(--font-ui); font-weight: 600; font-size: 15px; letter-spacing: .01em;
  border: 2px solid transparent; transition: transform .2s var(--ease), box-shadow .2s var(--ease), background .2s, color .2s, border-color .2s;
  white-space: nowrap;
}
.btn svg { width: 18px; height: 18px; flex: none; }
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }
.btn--gold { background: var(--gold-500); color: var(--navy-950); box-shadow: 0 8px 20px -8px rgba(200, 162, 74, .8); }
.btn--gold:hover { background: var(--gold-400); }
.btn--navy { background: var(--navy-900); color: #fff; }
.btn--navy:hover { background: var(--navy-700); }
.btn--outline { border-color: var(--border-2); color: var(--navy-900); background: transparent; }
.btn--outline:hover { border-color: var(--navy-900); background: var(--navy-900); color: #fff; }
.btn--outline-light { border-color: rgba(255, 255, 255, .35); color: #fff; background: transparent; }
.btn--outline-light:hover { border-color: #fff; background: rgba(255, 255, 255, .08); }
.btn--sm { min-height: 42px; padding: 0 18px; font-size: 14px; }
.btn--block { width: 100%; }
.btn-row { display: flex; flex-wrap: wrap; gap: 14px; }

.link-arrow { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-ui); font-weight: 700; font-size: 15px; color: var(--navy-900); }
.link-arrow svg { width: 18px; height: 18px; transition: transform .2s var(--ease); }
.link-arrow:hover svg { transform: translateX(4px); }
.link-arrow--gold { color: var(--gold-600); }

/* ---------- Header ---------- */
.topbar { background: var(--navy-950); color: #b8c4d6; font-size: 13.5px; }
.topbar .container { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 36px; white-space: nowrap; }
.topbar ul { display: flex; gap: 20px; flex-wrap: nowrap; min-width: 0; }
.topbar li { display: inline-flex; align-items: center; gap: 8px; }
.topbar svg { width: 15px; height: 15px; color: var(--gold-400); }
.topbar a:hover { color: #fff; }
.topbar__social { display: inline-flex; align-items: center; gap: 8px; }
.topbar__social:hover { color: #fff; }

.header {
  position: sticky; top: 0; z-index: 100;
  background: rgba(255, 255, 255, .92); backdrop-filter: saturate(180%) blur(12px); -webkit-backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--border);
  transition: box-shadow .25s;
}
.header.is-scrolled { box-shadow: var(--shadow-md); }
.header .container { display: flex; align-items: center; justify-content: space-between; gap: 24px; min-height: 78px; }

.brand { display: inline-flex; align-items: center; gap: 12px; }
.brand__mark { width: auto; height: 55px; flex: none; display: block; }
.brand__name { font-family: var(--font-ui); font-weight: 700; font-size: 20px; letter-spacing: .08em; color: var(--navy-900); line-height: 1; }
.brand__sub { font-family: var(--font-ui); font-size: 8.5px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--gold-600); margin-top: 5px; }
.brand--light .brand__name { color: #fff; }
.brand--light .brand__sub { color: var(--gold-400); }

.nav { display: flex; align-items: center; gap: 6px; }
.nav a { padding: 10px 14px; border-radius: var(--r-sm); font-family: var(--font-ui); font-weight: 600; font-size: 14.5px; color: var(--ink-2); position: relative; transition: color .2s, background .2s; }
.nav a:hover { color: var(--navy-900); background: var(--bg); }
.nav a[aria-current="page"] { color: var(--navy-900); }
.nav a[aria-current="page"]::after { content: ""; position: absolute; left: 14px; right: 14px; bottom: 4px; height: 2px; background: var(--gold-500); border-radius: 2px; }
.header__cta { display: flex; align-items: center; gap: 10px; }

.nav-toggle {
  display: none; width: 46px; height: 46px; border: 1px solid var(--border-2); border-radius: var(--r-sm); background: #fff; align-items: center; justify-content: center;
}
.nav-toggle svg { width: 22px; height: 22px; }
.nav-toggle .icon-close { display: none; }
.nav-toggle[aria-expanded="true"] .icon-open { display: none; }
.nav-toggle[aria-expanded="true"] .icon-close { display: block; }

@media (max-width: 1040px) {
  .topbar ul li:nth-child(3) { display: none; }
  .nav-toggle { display: inline-flex; }
  .header__cta .btn { display: none; }
  .nav {
    position: absolute; left: 0; right: 0; top: 100%;
    flex-direction: column; align-items: stretch; gap: 4px;
    background: #fff; border-bottom: 1px solid var(--border); box-shadow: var(--shadow-lg);
    padding: 12px var(--gutter) 20px; display: none;
  }
  .nav.is-open { display: flex; }
  .nav a { padding: 14px 12px; font-size: 16px; border-radius: var(--r-md); }
  .nav a[aria-current="page"]::after { display: none; }
  .nav a[aria-current="page"] { background: var(--gold-100); }
  .nav .nav__mobile-cta { display: flex; flex-direction: column; gap: 10px; margin-top: 10px; padding-top: 16px; border-top: 1px solid var(--border); }
}
@media (min-width: 1041px) { .nav .nav__mobile-cta { display: none; } }
@media (max-width: 600px) { .topbar ul li:nth-child(1) { display: none; } }

/* ---------- Hero ---------- */
.hero {
  position: relative; overflow: hidden; color: #fff;
  background: radial-gradient(1200px 600px at 85% -10%, rgba(200, 162, 74, .28), transparent 60%),
              radial-gradient(900px 500px at -10% 110%, rgba(31, 74, 133, .55), transparent 60%),
              linear-gradient(160deg, var(--navy-900) 0%, var(--navy-950) 100%);
}
.hero::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: linear-gradient(rgba(255, 255, 255, .045) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .045) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: radial-gradient(ellipse at 70% 40%, #000 20%, transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse at 70% 40%, #000 20%, transparent 75%);
}
.hero .container { position: relative; display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(32px, 6vw, 80px); align-items: center; padding-block: clamp(72px, 10vw, 128px); }
.hero__badge { display: inline-flex; align-items: center; gap: 10px; padding: 8px 14px 8px 10px; border-radius: 999px; background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .14); font-size: 14px; font-weight: 600; color: #e6ecf5; margin-bottom: 24px; }
.hero__badge .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--gold-400); box-shadow: 0 0 0 4px rgba(200, 162, 74, .25); }
.hero h1 { color: #fff; }
.hero h1 .gold { color: var(--gold-400); font-style: italic; font-weight: 500; }
.hero .lead { color: #b8c4d6; margin-top: 22px; }
.hero .btn-row { margin-top: 36px; }
.hero__meta { display: flex; flex-wrap: wrap; gap: 24px; margin-top: 40px; padding-top: 28px; border-top: 1px solid rgba(255, 255, 255, .12); }
.hero__meta li { display: flex; align-items: center; gap: 10px; font-size: 15px; color: #d9e1ee; }
.hero__meta svg { width: 20px; height: 20px; color: var(--gold-400); flex: none; }

.hero__visual { position: relative; }
.hero__card {
  background: #fff; color: var(--ink); border-radius: var(--r-xl); padding: 28px; box-shadow: var(--shadow-lg);
  position: relative; z-index: 2;
}
.hero__card h3 { font-size: 15px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); font-weight: 700; }
.hero__paths { display: grid; gap: 12px; margin-top: 18px; }
.path-card {
  display: grid; grid-template-columns: 52px 1fr auto; align-items: center; gap: 16px;
  padding: 16px; border: 1px solid var(--border); border-radius: var(--r-lg); background: #fff;
  transition: border-color .2s, box-shadow .2s, transform .2s var(--ease);
}
.path-card:hover { border-color: var(--gold-500); box-shadow: var(--shadow-md); transform: translateY(-2px); }
.path-card__icon { width: 52px; height: 52px; border-radius: 14px; display: grid; place-items: center; background: var(--gold-100); color: var(--gold-600); }
.path-card__icon svg { width: 26px; height: 26px; }
.path-card--navy .path-card__icon { background: #e8eef8; color: var(--navy-700); }
.path-card strong { display: block; font-family: var(--font-ui); font-size: 16px; color: var(--navy-900); }
.path-card span { font-size: 14.5px; color: var(--muted); }
.path-card > svg { width: 20px; height: 20px; color: var(--muted-2); transition: transform .2s var(--ease), color .2s; }
.path-card:hover > svg { transform: translateX(4px); color: var(--gold-600); }
.hero__stat {
  position: absolute; z-index: 3; background: var(--navy-800); color: #fff; border: 1px solid rgba(255, 255, 255, .12);
  border-radius: var(--r-lg); padding: 14px 18px; box-shadow: var(--shadow-lg); display: flex; gap: 14px; align-items: center;
}
.hero__stat--tl { top: -26px; left: -26px; }
.hero__stat--br { bottom: -26px; right: -26px; }
.hero__stat strong { font-family: var(--font-head); font-weight: 600; font-size: 26px; color: var(--gold-400); line-height: 1; }
.hero__stat span { font-size: 13px; color: #b8c4d6; display: block; margin-top: 4px; max-width: 150px; line-height: 1.3; }
.hero__ring { position: absolute; inset: -40px -30px; border-radius: 40px; border: 1px solid rgba(200, 162, 74, .25); transform: rotate(-3deg); z-index: 1; }

@media (max-width: 960px) {
  .hero .container { grid-template-columns: 1fr; }
  .hero__visual { margin-top: 12px; }
  .hero__stat--tl { top: -18px; left: 8px; }
  .hero__stat--br { bottom: -18px; right: 8px; }
  .hero__ring { display: none; }
}
@media (max-width: 520px) {
  .hero__card { padding: 20px; }
  .path-card { grid-template-columns: 44px 1fr auto; gap: 12px; padding: 14px; }
  .path-card__icon { width: 44px; height: 44px; }
  .hero__stat { position: static; margin-top: 12px; }
  .hero__stat--tl { display: none; }
}

/* ---------- Trust strip ---------- */
.trust { background: #fff; border-bottom: 1px solid var(--border); }
.trust .container { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; }
.trust__item { display: flex; align-items: center; gap: 14px; padding: 22px 20px; border-left: 1px solid var(--border); }
.trust__item:first-child { border-left: 0; padding-left: 0; }
.trust__item svg { width: 34px; height: 34px; color: var(--gold-600); flex: none; }
.trust__item strong { display: block; font-family: var(--font-ui); font-size: 15px; color: var(--navy-900); }
.trust__item span { font-size: 14px; color: var(--muted); }
@media (max-width: 960px) {
  .trust .container { grid-template-columns: repeat(2, 1fr); }
  .trust__item:nth-child(3) { border-left: 0; padding-left: 0; }
  .trust__item:nth-child(n+3) { border-top: 1px solid var(--border); }
}
@media (max-width: 520px) {
  .trust .container { grid-template-columns: 1fr; }
  .trust__item { border-left: 0; padding-left: 0; padding-block: 16px; }
  .trust__item:nth-child(n+2) { border-top: 1px solid var(--border); }
}

/* ---------- Cards / grids ---------- */
.grid { display: grid; gap: 24px; }
.grid--2 { grid-template-columns: repeat(2, 1fr); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 960px) { .grid--3, .grid--4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .grid--2, .grid--3, .grid--4 { grid-template-columns: 1fr; } }

.card {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 30px;
  transition: transform .25s var(--ease), box-shadow .25s var(--ease), border-color .25s;
  position: relative; overflow: hidden;
}
.card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: var(--border-2); }
.card__icon { width: 56px; height: 56px; border-radius: 14px; display: grid; place-items: center; background: var(--navy-900); color: var(--gold-400); margin-bottom: 22px; }
.card__icon svg { width: 28px; height: 28px; }
.card h3 { font-size: 22px; margin-bottom: 10px; }
.card p { color: var(--muted); font-size: 16px; }
.card .link-arrow { margin-top: 18px; }
.card--accent::before { content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 4px; background: linear-gradient(90deg, var(--gold-500), var(--gold-300)); }
.card ul.checks { margin-top: 16px; display: grid; gap: 8px; }
.checks li { display: flex; gap: 10px; align-items: flex-start; font-size: 15.5px; color: var(--ink-2); }
.checks svg { width: 18px; height: 18px; color: var(--gold-600); flex: none; margin-top: 3px; }

/* Pillars (dark) */
.pillar { padding: 28px; border-radius: var(--r-lg); background: rgba(255, 255, 255, .04); border: 1px solid rgba(255, 255, 255, .1); transition: background .25s, border-color .25s, transform .25s var(--ease); }
.pillar:hover { background: rgba(255, 255, 255, .07); border-color: rgba(200, 162, 74, .5); transform: translateY(-3px); }
.pillar__icon { width: 60px; height: 60px; border-radius: 50%; display: grid; place-items: center; border: 1.5px solid var(--gold-500); color: var(--gold-400); margin-bottom: 20px; }
.pillar__icon svg { width: 28px; height: 28px; }
.pillar h3 { font-family: var(--font-ui); font-size: 15px; letter-spacing: .12em; text-transform: uppercase; margin-bottom: 10px; }
.pillar p { color: #b8c4d6; font-size: 15.5px; }

/* Industries */
.industry { display: flex; align-items: center; gap: 14px; padding: 18px 20px; border: 1px solid var(--border); border-radius: var(--r-md); background: #fff; font-family: var(--font-ui); font-weight: 600; font-size: 15px; color: var(--navy-900); transition: border-color .2s, transform .2s var(--ease), box-shadow .2s; }
.industry:hover { border-color: var(--gold-500); transform: translateY(-2px); box-shadow: var(--shadow-sm); }
.industry svg { width: 24px; height: 24px; color: var(--gold-600); flex: none; }
.industries { grid-template-columns: repeat(4, 1fr); gap: 14px; }
@media (max-width: 960px) { .industries { grid-template-columns: repeat(2, 1fr); } }

/* Process */
.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; position: relative; counter-reset: step; }
.step { position: relative; padding: 28px 24px 24px; background: #fff; border: 1px solid var(--border); border-radius: var(--r-lg); }
.step__num { font-family: var(--font-head); font-weight: 600; font-style: italic; font-size: 44px; line-height: 1; color: var(--gold-300); position: absolute; right: 20px; top: 16px; }
.step__icon { width: 48px; height: 48px; border-radius: 12px; display: grid; place-items: center; background: var(--gold-100); color: var(--gold-600); margin-bottom: 20px; }
.step__icon svg { width: 24px; height: 24px; }
.step h3 { font-size: 20px; margin-bottom: 8px; }
.step p { color: var(--muted); font-size: 15.5px; }
@media (max-width: 960px) { .steps { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .steps { grid-template-columns: 1fr; } }

/* Stats */
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.stat { text-align: center; padding: 28px 16px; border-radius: var(--r-lg); background: rgba(255, 255, 255, .04); border: 1px solid rgba(255, 255, 255, .1); }
.stat strong { display: block; font-family: var(--font-head); font-size: clamp(36px, 4vw, 52px); font-weight: 600; color: var(--gold-400); line-height: 1; }
.stat span { display: block; margin-top: 10px; font-size: 15px; color: #b8c4d6; }
@media (max-width: 700px) { .stats { grid-template-columns: repeat(2, 1fr); gap: 14px; } }

/* Split sections */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 6vw, 80px); align-items: center; }
@media (max-width: 900px) { .split { grid-template-columns: 1fr; } }
.split .lead { margin-top: 16px; }
.split .checks { margin-top: 24px; display: grid; gap: 12px; }
.split .btn-row { margin-top: 32px; }

/* Visual composition (abstract, no photos required) */
.visual { position: relative; aspect-ratio: 1 / .92; max-width: 520px; margin-inline: auto; width: 100%; }
.visual__panel { position: absolute; border-radius: var(--r-xl); }
.visual__panel--navy { inset: 8% 14% 14% 0; background: linear-gradient(150deg, var(--navy-800), var(--navy-950)); box-shadow: var(--shadow-lg); overflow: hidden; }
.visual__panel--navy::after { content: ""; position: absolute; inset: 0; background-image: linear-gradient(rgba(255, 255, 255, .05) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .05) 1px, transparent 1px); background-size: 40px 40px; }
.visual__panel--gold { inset: 0 0 auto auto; width: 44%; aspect-ratio: 1; background: linear-gradient(135deg, var(--gold-400), var(--gold-600)); border-radius: var(--r-lg); box-shadow: var(--shadow-md); }
.visual__mark { position: absolute; left: 10%; top: 22%; width: 34%; color: var(--gold-400); opacity: .95; }
.visual__quote { position: absolute; left: 6%; right: 20%; bottom: 20%; color: #fff; font-family: var(--font-head); font-weight: 500; font-style: italic; font-size: clamp(16px, 1.6vw, 20px); line-height: 1.35; }
.visual__quote small { display: block; margin-top: 8px; font-family: var(--font-body); font-weight: 400; font-size: 14px; color: #b8c4d6; }
.visual__chip { position: absolute; right: 0; bottom: 4%; background: #fff; border-radius: var(--r-lg); padding: 16px 18px; box-shadow: var(--shadow-lg); display: flex; gap: 12px; align-items: center; z-index: 2; }
.visual__chip svg { width: 26px; height: 26px; color: var(--success); }
.visual__chip strong { display: block; font-family: var(--font-ui); font-size: 15px; color: var(--navy-900); }
.visual__chip span { font-size: 13.5px; color: var(--muted); }

/* Values */
.values { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.value { display: flex; align-items: center; gap: 12px; padding: 16px 18px; border-radius: var(--r-md); background: var(--gold-100); border: 1px solid #efe3bf; font-family: var(--font-ui); font-weight: 700; font-size: 14px; letter-spacing: .08em; text-transform: uppercase; color: var(--navy-900); }
.value svg { width: 22px; height: 22px; color: var(--gold-600); flex: none; }
@media (max-width: 800px) { .values { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 420px) { .values { grid-template-columns: 1fr; } }

/* Jobs */
.job-filters { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 28px; }
.chip { padding: 10px 16px; border-radius: 999px; border: 1px solid var(--border-2); background: #fff; font-family: var(--font-ui); font-weight: 600; font-size: 14px; color: var(--ink-2); transition: all .2s; }
.chip:hover { border-color: var(--navy-900); }
.chip[aria-pressed="true"] { background: var(--navy-900); border-color: var(--navy-900); color: #fff; }
.job { display: grid; grid-template-columns: 1fr auto; gap: 18px; align-items: center; padding: 24px 26px; border: 1px solid var(--border); border-radius: var(--r-lg); background: #fff; transition: border-color .2s, box-shadow .2s, transform .2s var(--ease); }
.job:hover { border-color: var(--gold-500); box-shadow: var(--shadow-md); transform: translateY(-2px); }
.job__tags { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; }
.tag { font-family: var(--font-ui); font-size: 11.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; padding: 5px 10px; border-radius: 6px; background: var(--bg); color: var(--muted); border: 1px solid var(--border); }
.tag--gold { background: var(--gold-100); color: var(--gold-600); border-color: #efe3bf; }
.tag--urgent { background: #fdecec; color: var(--danger); border-color: #f6c9cb; }
.job h3 { font-size: 23px; }
.job__meta { display: flex; flex-wrap: wrap; gap: 18px; margin-top: 10px; color: var(--muted); font-size: 15px; }
.job__meta li { display: inline-flex; align-items: center; gap: 7px; }
.job__meta svg { width: 17px; height: 17px; color: var(--gold-600); }
.job__body { margin-top: 14px; color: var(--muted); font-size: 15.5px; }
.job__body ul { margin-top: 8px; padding-left: 18px; list-style: disc; display: grid; gap: 4px; }
.jobs-list { display: grid; gap: 16px; }
.jobs-more { display: grid; justify-items: center; gap: 12px; margin-top: 28px; padding-top: 24px; border-top: 1px solid var(--border); }
.jobs-more__count { font-size: 14px; color: var(--muted); font-family: var(--font-ui); }
.jobs-top { text-align: center; margin-top: 18px; font-family: var(--font-ui); font-size: 14px; }
.jobs-top a { color: var(--navy-700); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.jobs-top a:hover { color: var(--gold-600); }
.jobs-empty { padding: 40px; text-align: center; color: var(--muted); border: 1px dashed var(--border-2); border-radius: var(--r-lg); }
@media (max-width: 640px) { .job { grid-template-columns: 1fr; } .job .btn { width: 100%; } }

/* CTA band */
.cta-band { position: relative; overflow: hidden; background: linear-gradient(135deg, var(--gold-500), var(--gold-600)); color: var(--navy-950); }
.cta-band::before { content: ""; position: absolute; inset: 0; background-image: radial-gradient(rgba(255, 255, 255, .25) 1px, transparent 1px); background-size: 18px 18px; opacity: .6; mask-image: linear-gradient(90deg, transparent, #000); -webkit-mask-image: linear-gradient(90deg, transparent, #000); }
.cta-band .container { position: relative; display: grid; grid-template-columns: 1fr auto; gap: 32px; align-items: center; padding-block: clamp(48px, 6vw, 72px); }
.cta-band h2 { color: var(--navy-950); font-size: clamp(28px, 3.2vw, 40px); }
.cta-band p { margin-top: 10px; font-size: 18px; color: rgba(7, 20, 38, .8); max-width: 60ch; }
@media (max-width: 800px) { .cta-band .container { grid-template-columns: 1fr; } }

/* ---------- Page hero (inner pages) ---------- */
.page-hero { position: relative; overflow: hidden; background: linear-gradient(160deg, var(--navy-900), var(--navy-950)); color: #fff; }
.page-hero::before { content: ""; position: absolute; right: -10%; top: -40%; width: 60%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, rgba(200, 162, 74, .25), transparent 65%); }
.page-hero .container { position: relative; padding-block: clamp(56px, 8vw, 96px); max-width: 860px; margin-inline: auto; }
.page-hero h1 { color: #fff; font-size: clamp(34px, 4.8vw, 56px); font-weight: 600; }
.page-hero .lead { color: #b8c4d6; margin-top: 18px; }
.crumbs { display: flex; flex-wrap: wrap; gap: 8px; font-size: 14px; color: #8fa0b8; margin-bottom: 18px; }
.crumbs a:hover { color: #fff; }
.crumbs span[aria-current] { color: var(--gold-400); }

/* Photo variant: text on the left, photo fades in from the right (shorter than the home hero) */
.page-hero--photo {
  background:
    linear-gradient(100deg, rgba(11, 31, 58, .98) 0%, rgba(11, 31, 58, .94) 38%, rgba(11, 31, 58, .62) 68%, rgba(7, 20, 38, .38) 100%),
    var(--hero-photo) var(--hero-pos, center) / var(--hero-size, cover) no-repeat;
}
.page-hero--photo::before { opacity: .45; }
.page-hero--photo .container { max-width: var(--container); min-height: clamp(300px, 34vw, 400px); display: flex; flex-direction: column; justify-content: center; }
.page-hero--photo .container > * { max-width: 640px; }
.page-hero--about { --hero-photo: var(--img-about, url("../img/hero-about.jpg")); --hero-pos: 0 28%; --hero-size: 115% auto; }
.page-hero--employers { --hero-photo: var(--img-employers, url("../img/hero-employers.jpg")); --hero-pos: 78% center; }
@media (max-width: 720px) {
  .page-hero--photo { background: linear-gradient(180deg, rgba(11, 31, 58, .9) 0%, rgba(7, 20, 38, .95) 100%), var(--hero-photo) center / cover no-repeat; }
  .page-hero--photo .container { min-height: 0; }
}

/* Plain heroes (no photo): gold accent so they do not look unfinished */
.page-hero .container { z-index: 1; }
.page-hero:not(.page-hero--photo) {
  background:
    linear-gradient(90deg, var(--gold-400), var(--gold-600) 45%, transparent 90%) left bottom / 100% 4px no-repeat,
    linear-gradient(160deg, var(--navy-900), var(--navy-950));
}
.page-hero:not(.page-hero--photo)::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: linear-gradient(rgba(255, 255, 255, .05) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .05) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: radial-gradient(ellipse at 85% 50%, #000 10%, transparent 65%);
  -webkit-mask-image: radial-gradient(ellipse at 85% 50%, #000 10%, transparent 65%);
}
.page-hero:not(.page-hero--photo) h1::before { content: ""; display: block; width: 56px; height: 4px; border-radius: 2px; background: var(--gold-400); margin-bottom: 20px; }
/* Photo heroes: dissolve the picture into navy at the bottom edge */
.page-hero--photo::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 45%; pointer-events: none; background: linear-gradient(90deg, var(--gold-400), var(--gold-600) 45%, transparent 90%) left bottom / 100% 4px no-repeat, linear-gradient(180deg, rgba(7, 20, 38, 0) 0%, rgba(7, 20, 38, .55) 55%, rgba(7, 20, 38, .92) 100%); }

/* ---------- Forms ---------- */
.form-card { background: #fff; border: 1px solid var(--border); border-radius: var(--r-xl); padding: clamp(24px, 4vw, 40px); box-shadow: var(--shadow-md); }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.form-grid .full { grid-column: 1 / -1; }
@media (max-width: 640px) { .form-grid { grid-template-columns: 1fr; } }
.field label { display: block; font-family: var(--font-ui); font-weight: 600; font-size: 14px; color: var(--navy-900); margin-bottom: 7px; }
.field label .req { color: var(--danger); margin-left: 3px; }
.field input, .field select, .field textarea {
  width: 100%; min-height: 50px; padding: 12px 14px; border: 1.5px solid var(--border-2); border-radius: var(--r-md);
  font: inherit; font-size: 16px; color: var(--ink); background: #fff; transition: border-color .2s, box-shadow .2s;
}
.field textarea { min-height: 130px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--navy-700); box-shadow: 0 0 0 4px rgba(22, 54, 100, .12); }
.field .hint { font-size: 13.5px; color: var(--muted-2); margin-top: 6px; }
.field.is-invalid input, .field.is-invalid select, .field.is-invalid textarea { border-color: var(--danger); }
.field .error { display: none; font-size: 13.5px; color: var(--danger); margin-top: 6px; }
.field.is-invalid .error { display: block; }
.field--file input { padding: 10px; }
.form-actions { margin-top: 24px; display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }
.form-note { font-size: 13.5px; color: var(--muted-2); }
.form-status { display: none; margin-top: 18px; padding: 14px 16px; border-radius: var(--r-md); font-weight: 600; }
.form-status.is-success { display: block; background: #e8f6ec; color: var(--success); border: 1px solid #bfe5c9; }
.form-status.is-error { display: block; background: #fdecec; color: var(--danger); border: 1px solid #f6c9cb; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* Contact */
.contact-grid { display: grid; grid-template-columns: .9fr 1.1fr; gap: clamp(28px, 5vw, 64px); align-items: start; }
@media (max-width: 900px) { .contact-grid { grid-template-columns: 1fr; } }
.contact-list { display: grid; gap: 14px; margin-top: 28px; }
.contact-item { display: flex; gap: 16px; padding: 20px; border: 1px solid var(--border); border-radius: var(--r-lg); background: #fff; }
.contact-item__icon { width: 48px; height: 48px; border-radius: 12px; display: grid; place-items: center; background: var(--navy-900); color: var(--gold-400); flex: none; }
.contact-item__icon svg { width: 24px; height: 24px; }
.contact-item strong { display: block; font-family: var(--font-ui); font-size: 15px; color: var(--navy-900); margin-bottom: 4px; }
.contact-item p, .contact-item a { color: var(--muted); font-size: 15.5px; }
.contact-item a:hover { color: var(--navy-900); text-decoration: underline; }
.map { margin-top: 20px; border-radius: var(--r-lg); overflow: hidden; border: 1px solid var(--border); aspect-ratio: 16 / 10; background: var(--bg); }
.map iframe { width: 100%; height: 100%; border: 0; }

/* FAQ */
.faq { display: grid; gap: 12px; max-width: 820px; margin-inline: auto; }
.faq details { border: 1px solid var(--border); border-radius: var(--r-lg); background: #fff; padding: 0 22px; transition: border-color .2s; }
.faq details[open] { border-color: var(--gold-500); }
.faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 18px 0; font-family: var(--font-ui); font-weight: 700; font-size: 16.5px; color: var(--navy-900); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary svg { width: 20px; height: 20px; flex: none; color: var(--gold-600); transition: transform .25s var(--ease); }
.faq details[open] summary svg { transform: rotate(45deg); }
.faq details p { padding: 0 0 20px; color: var(--muted); font-size: 16px; }

/* Timeline (about) */
.timeline { display: grid; gap: 0; position: relative; padding-left: 28px; }
.timeline li:not(:last-child)::after { content: ""; position: absolute; left: -21px; top: 22px; bottom: -6px; width: 2px; background: var(--border-2); }
.timeline li { position: relative; padding: 0 0 26px; }
.timeline li::before { content: ""; position: absolute; left: -28px; top: 6px; width: 16px; height: 16px; border-radius: 50%; background: var(--gold-500); border: 3px solid #fff; box-shadow: 0 0 0 2px var(--gold-500); }
.timeline strong { display: block; font-family: var(--font-head); color: var(--navy-900); font-size: 17px; margin-bottom: 4px; }
.timeline p { color: var(--muted); font-size: 15.5px; }

/* Compliance note */
.notice { display: flex; gap: 14px; padding: 18px 20px; border-radius: var(--r-lg); background: var(--gold-100); border: 1px solid #efe3bf; color: var(--ink-2); font-size: 15px; }
.notice svg { width: 22px; height: 22px; color: var(--gold-600); flex: none; margin-top: 2px; }

/* ---------- Footer ---------- */
.footer { background: var(--navy-950); color: #b8c4d6; font-size: 15px; }
.footer__main { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1.3fr; gap: 40px; padding-block: clamp(48px, 6vw, 72px) 40px; }
.footer h4 { color: #fff; font-size: 13px; letter-spacing: .14em; text-transform: uppercase; margin-bottom: 18px; }
.footer ul { display: grid; gap: 10px; }
.footer a:hover { color: #fff; }
.footer__about p { margin-top: 18px; max-width: 40ch; line-height: 1.65; }
.footer__contact li { display: flex; gap: 12px; align-items: flex-start; }
.footer__contact svg { width: 18px; height: 18px; color: var(--gold-400); flex: none; margin-top: 3px; }
.footer__bottom { border-top: 1px solid rgba(255, 255, 255, .1); padding-block: 22px; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; font-size: 14px; color: #8fa0b8; }
.footer__bottom a { color: #b8c4d6; }
.social { display: inline-flex; gap: 10px; margin-top: 22px; }
.social a { width: 40px; height: 40px; border-radius: 10px; display: grid; place-items: center; background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .1); color: #fff; transition: background .2s, border-color .2s; }
.social a:hover { background: var(--gold-500); border-color: var(--gold-500); color: var(--navy-950); }
.social svg { width: 18px; height: 18px; }
@media (max-width: 960px) { .footer__main { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .footer__main { grid-template-columns: 1fr; gap: 32px; } }

/* Floating messenger */
.fab { position: fixed; right: 20px; bottom: 20px; z-index: 90; display: inline-flex; align-items: center; gap: 10px; padding: 12px 18px 12px 14px; border-radius: 999px; background: var(--navy-900); color: #fff; font-family: var(--font-ui); font-weight: 700; font-size: 14px; box-shadow: var(--shadow-lg); border: 1px solid rgba(255, 255, 255, .12); transition: transform .2s var(--ease), background .2s; }
.fab:hover { transform: translateY(-2px); background: var(--navy-700); }
.fab svg { width: 20px; height: 20px; color: var(--gold-400); }
@media (max-width: 520px) { .fab span { display: none; } .fab { padding: 14px; } }

/* ---------- Reveal on scroll ---------- */
.reveal { opacity: 0; transform: translateY(18px); transition: opacity .6s var(--ease), transform .6s var(--ease); }
.reveal.is-visible { opacity: 1; transform: none; }
.reveal[data-delay="1"] { transition-delay: .08s; }
.reveal[data-delay="2"] { transition-delay: .16s; }
.reveal[data-delay="3"] { transition-delay: .24s; }
.reveal[data-delay="4"] { transition-delay: .32s; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* ---------- Fixes after first visual pass ---------- */
.brand > span:last-child { display: flex; flex-direction: column; }
.nav a { white-space: nowrap; }
.hero__card h3 { padding-right: 150px; }
.hero__stat--tl { top: -26px; left: auto; right: -26px; }
.hero__stat--br { bottom: -72px; right: auto; left: -30px; }
@media (max-width: 960px) {
  .hero__stat--tl { top: -18px; right: 8px; }
  .hero__stat--br { bottom: -60px; left: 8px; }
  .hero__card h3 { padding-right: 190px; }
}
@media (max-width: 520px) { .hero__card h3 { padding-right: 0; } }
.reveal { transition-duration: .5s; }
@media (max-width: 720px) {
  .topbar__social span { display: none; }
  .topbar li span, .topbar li a { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 78vw; display: block; }
  .topbar .container { min-height: 36px; }
}

[id] { scroll-margin-top: 96px; }
.industry { min-width: 0; }
@media (max-width: 600px) { .industries { grid-template-columns: 1fr; } }

/* Filtered-out job cards and empty-state notices must actually hide */
[hidden] { display: none !important; }

/* ---------- Process timeline: numbered nodes on a gold track ---------- */
.steps { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); gap: 36px; }
.steps::before { content: ""; position: absolute; left: 28px; right: 28px; top: 27px; height: 2px; background: linear-gradient(90deg, var(--gold-500), var(--gold-300)); }
.step { position: relative; background: transparent; border: 0; border-radius: 0; padding: 0; }
.step__num {
  position: static; display: flex; align-items: center; justify-content: center;
  width: 56px; height: 56px; border-radius: 50%;
  background: var(--navy-900); color: var(--gold-400);
  font-family: var(--font-head); font-style: italic; font-weight: 600; font-size: 22px; line-height: 1;
  box-shadow: 0 0 0 6px var(--bg), 0 0 0 7px var(--gold-300);
  transition: background .25s, color .25s, transform .25s var(--ease), box-shadow .25s;
}
.step:hover .step__num { background: var(--gold-500); color: var(--navy-950); transform: scale(1.06); box-shadow: 0 0 0 6px var(--bg), 0 0 0 7px var(--gold-500); }
.step:not(:last-child)::after { content: ""; position: absolute; top: 23px; right: -22px; width: 0; height: 0; border: 5px solid transparent; border-left: 8px solid var(--gold-500); }
.step__icon { width: 40px; height: 40px; border-radius: 10px; margin: 24px 0 14px; background: #fff; border: 1px solid var(--border); color: var(--gold-600); box-shadow: var(--shadow-sm); }
.step__icon svg { width: 20px; height: 20px; }
.step h3 { font-size: 22px; margin-bottom: 8px; }
.step p { color: var(--muted); font-size: 16px; padding-right: 8px; }
@media (max-width: 960px) {
  .steps { grid-template-columns: 1fr; gap: 30px; }
  .steps::before { left: 27px; right: auto; top: 28px; bottom: 28px; width: 2px; height: auto; background: linear-gradient(180deg, var(--gold-500), var(--gold-300)); }
  .step { display: grid; grid-template-columns: 56px 1fr; column-gap: 18px; align-items: start; }
  .step__num { grid-row: 1 / span 3; }
  .step__icon { grid-column: 2; margin: 4px 0 10px; }
  .step h3, .step p { grid-column: 2; }
  .step:not(:last-child)::after { display: none; }
}

/* Timeline: icons removed at the client's request; numbered nodes carry the visual */
.step__icon { display: none; }
.step h3 { margin-top: 22px; }
@media (max-width: 960px) { .step h3 { margin-top: 12px; } }

/* Hero badge as a live "Now hiring" link */
.hero__badge { transition: background .2s, border-color .2s; max-width: 100%; }
a.hero__badge:hover { background: rgba(255,255,255,.14); border-color: rgba(220,187,107,.6); }
.hero__badge svg { width: 16px; height: 16px; color: var(--gold-400); flex: none; }
.hero__badge-more { padding: 2px 8px; border-radius: 999px; background: var(--gold-500); color: var(--navy-950); font-size: 12px; font-weight: 700; }
.hero__badge-more { white-space: nowrap; }
.hero__badge { flex-wrap: wrap; line-height: 1.3; }

/* ---------- Visual composition: photos behind the panels, gold panel mostly visible ---------- */
.visual__panel--navy {
  inset: 8% 30% 14% 0;
  background: linear-gradient(160deg, rgba(11, 31, 58, .72) 0%, rgba(7, 20, 38, .9) 70%), var(--img-rider, url("../img/visual-rider.jpg")) center 28% / cover no-repeat;
}
.visual__panel--navy::after { opacity: .6; }
.visual__panel--gold {
  inset: 0 0 auto auto; width: 46%;
  background: linear-gradient(135deg, rgba(220, 187, 107, .62), rgba(166, 127, 42, .82)), var(--img-truck, url("../img/visual-truck.jpg")) center / cover no-repeat;
}
.visual__mark { width: 26%; left: 8%; top: 12%; filter: drop-shadow(0 4px 12px rgba(0, 0, 0, .35)); }
.visual__quote { right: 8%; bottom: 14%; text-shadow: 0 2px 10px rgba(0, 0, 0, .35); }
.visual__mark { display: none; }
.visual__panel--navy { background: linear-gradient(180deg, rgba(11, 31, 58, .28) 0%, rgba(11, 31, 58, .55) 45%, rgba(7, 20, 38, .94) 78%), var(--img-rider, url("../img/visual-rider.jpg")) center 22% / cover no-repeat; }
.visual__quote { bottom: 12%; }

/* ---------- Hero photo under the navy tint; chip in brand cream ---------- */
.hero {
  background:
    radial-gradient(1100px 560px at 85% -10%, rgba(200, 162, 74, .22), transparent 60%),
    linear-gradient(100deg, rgba(11, 31, 58, .97) 0%, rgba(11, 31, 58, .9) 42%, rgba(7, 20, 38, .74) 100%),
    var(--img-hero, url("../img/hero-bg.jpg?v=2")) center 58% / cover no-repeat;
}
.hero::before { opacity: .7; }
.visual__chip { background: var(--gold-100); border: 1px solid #efe3bf; }
.visual__chip svg { color: var(--gold-600); }
.visual__chip span { color: var(--muted); }

/* ---------- Visual panels: hover the back photo to bring it forward (gold tint = "in the back") ---------- */
.visual__panel { overflow: hidden; transition: transform .55s var(--ease), box-shadow .55s var(--ease), z-index 0s .28s; }
.visual__panel::before, .visual__panel::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; transition: opacity .55s var(--ease); }
/* navy treatment (front) */
.visual__panel::before { background: linear-gradient(180deg, rgba(11, 31, 58, .28) 0%, rgba(11, 31, 58, .55) 45%, rgba(7, 20, 38, .94) 78%); z-index: 0; }
/* gold treatment (back) */
.visual__panel::after { background: linear-gradient(135deg, rgba(220, 187, 107, .62), rgba(166, 127, 42, .82)); z-index: 0; mask-image: none; -webkit-mask-image: none; }
.visual__panel--navy { background: var(--img-rider, url("../img/visual-rider.jpg")) center 30% / cover no-repeat; z-index: 2; }
.visual__panel--navy::before { opacity: 1; }
.visual__panel--navy::after { opacity: 0; }
.visual__panel--gold { background: var(--img-truck, url("../img/visual-truck.jpg")) 40% 55% / cover no-repeat; z-index: 1; cursor: pointer; }
.visual__panel--gold::before { opacity: 0; }
.visual__panel--gold::after { opacity: 1; }
.visual__quote { z-index: 1; transition: opacity .45s var(--ease), transform .45s var(--ease); }
.visual__chip { z-index: 4; }
/* hover state: gold panel comes forward, navy panel drops back and takes the gold tint */
.visual__panel--gold:hover { z-index: 3; transform: scale(1.03); box-shadow: var(--shadow-lg); }
.visual__panel--gold:hover::before { opacity: 1; }
.visual__panel--gold:hover::after { opacity: 0; }
.visual__panel--gold:hover ~ .visual__panel--navy { z-index: 1; transform: scale(.985); }
.visual__panel--gold:hover ~ .visual__panel--navy::before { opacity: 0; }
.visual__panel--gold:hover ~ .visual__panel--navy::after { opacity: 1; }
.visual__panel--gold:hover ~ .visual__panel--navy .visual__quote { opacity: 0; transform: translateY(8px); }
@media (prefers-reduced-motion: reduce) { .visual__panel, .visual__panel::before, .visual__panel::after, .visual__quote { transition: none; } }

/* ---------- Chat launcher ---------- */
.chat { position: fixed; right: 20px; bottom: 20px; z-index: 90; display: flex; flex-direction: column; align-items: flex-end; gap: 12px; }
.chat .fab { position: static; }
.chat__icon-close { display: none; }
.chat.is-open .chat__icon-open { display: none; }
.chat.is-open .chat__icon-close { display: block; }
.chat__panel { width: min(360px, calc(100vw - 32px)); background: #fff; border-radius: 18px; box-shadow: 0 30px 60px -20px rgba(7, 20, 38, .45), 0 0 0 1px var(--border); overflow: hidden; transform-origin: bottom right; animation: chat-in .25s var(--ease); }
@keyframes chat-in { from { opacity: 0; transform: translateY(10px) scale(.96); } to { opacity: 1; transform: none; } }
.chat__head { display: flex; align-items: center; gap: 12px; padding: 16px 16px 14px; background: var(--navy-900); color: #fff; }
.chat__head img { border-radius: 10px; flex: none; }
.chat__head strong { display: block; font-family: var(--font-ui); font-size: 15px; }
.chat__head span { display: block; font-size: 13px; color: #b8c4d6; }
.chat__close { margin-left: auto; width: 34px; height: 34px; border-radius: 8px; border: 0; background: rgba(255, 255, 255, .1); color: #fff; display: grid; place-items: center; }
.chat__close svg { width: 16px; height: 16px; }
.chat__close:hover { background: rgba(255, 255, 255, .2); }
.chat__body { padding: 16px; display: grid; gap: 10px; background: var(--bg); }
.chat__bubble { background: #fff; border: 1px solid var(--border); border-radius: 14px 14px 14px 4px; padding: 12px 14px; font-size: 15px; color: var(--ink-2); margin-bottom: 4px; }
.chat__opt { display: flex; align-items: center; gap: 12px; padding: 12px 14px; background: #fff; border: 1px solid var(--border); border-radius: 12px; font-family: var(--font-ui); font-weight: 600; font-size: 14.5px; color: var(--navy-900); transition: border-color .2s, transform .2s var(--ease), box-shadow .2s; }
.chat__opt svg { width: 20px; height: 20px; color: var(--gold-600); flex: none; }
.chat__opt .chat__arrow { margin-left: auto; width: 16px; height: 16px; color: var(--muted-2); }
.chat__opt:hover { border-color: var(--gold-500); transform: translateX(2px); box-shadow: var(--shadow-sm); }
.chat__foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 16px; border-top: 1px solid var(--border); background: #fff; flex-wrap: wrap; }
.chat__foot .btn svg { width: 16px; height: 16px; }
.chat__alt { font-size: 13.5px; color: var(--muted); }
.chat__alt:hover { color: var(--navy-900); text-decoration: underline; }
@media (max-width: 520px) { .chat { right: 12px; bottom: 12px; } .chat .fab span { display: none; } }

/* ---------- Job alerts ---------- */
.alerts { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(24px, 4vw, 48px); align-items: center; padding: clamp(24px, 4vw, 40px); border-radius: var(--r-xl); background: var(--navy-900); color: #d9e1ee; overflow: hidden; position: relative; }
.alerts::before { content: ""; position: absolute; right: -10%; top: -60%; width: 50%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, rgba(200, 162, 74, .3), transparent 65%); pointer-events: none; }
.alerts h2 { color: #fff; font-size: clamp(26px, 3vw, 34px); }
.alerts .lead { color: #b8c4d6; font-size: 17px; margin-top: 10px; }
.alerts form { position: relative; display: grid; gap: 14px; }
.alerts .field label { color: #fff; }
.alerts .field input { border-color: transparent; }
.alerts .checks-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 14px; }
.alerts .check { display: flex; align-items: center; gap: 10px; font-size: 15px; color: #d9e1ee; font-family: var(--font-ui); font-weight: 500; cursor: pointer; }
.alerts .check input { width: 18px; height: 18px; accent-color: var(--gold-500); margin: 0; }
.alerts .form-note { color: #8fa0b8; }
.alerts .form-status.is-success { background: rgba(21, 128, 61, .18); color: #bfe5c9; border-color: rgba(191, 229, 201, .35); }
@media (max-width: 860px) { .alerts { grid-template-columns: 1fr; } }

/* ---------- How to apply (bilingual) ---------- */
.lang-toggle { display: inline-flex; padding: 4px; border-radius: 999px; background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .18); margin-top: 22px; }
.lang-toggle button { border: 0; background: transparent; color: #d9e1ee; font-family: var(--font-ui); font-weight: 600; font-size: 14px; padding: 8px 16px; border-radius: 999px; cursor: pointer; transition: background .2s, color .2s; }
.lang-toggle button[aria-pressed="true"] { background: var(--gold-500); color: var(--navy-950); }
[data-lang-root]:not([data-current="tl"]) [lang="tl"] { display: none !important; }
[data-lang-root][data-current="tl"] [lang="en"] { display: none !important; }
.docs { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
.doc { display: flex; gap: 14px; padding: 18px; background: #fff; border: 1px solid var(--border); border-radius: var(--r-lg); }
.doc__icon { width: 44px; height: 44px; border-radius: 12px; flex: none; display: grid; place-items: center; background: var(--gold-100); color: var(--gold-600); }
.doc__icon svg { width: 22px; height: 22px; }
.doc strong { display: block; font-family: var(--font-ui); font-size: 15.5px; color: var(--navy-900); margin-bottom: 4px; }
.doc p { color: var(--muted); font-size: 15px; }
@media (max-width: 700px) { .docs { grid-template-columns: 1fr; } }

/* Admin-only preview notice on the jobs page */
.preview-note { margin: 0 0 22px; padding: 14px 18px; border-radius: var(--r-lg); background: var(--gold-100); border: 1px solid #efe3bf; color: var(--ink-2); font-size: 15px; }
.preview-note a { font-weight: 600; color: var(--navy-700); margin-left: 6px; }
.job.is-preview { outline: 2px dashed var(--gold-500); outline-offset: 4px; }

/* ---------- Mobile pass (2026-09-17): no sideways scroll, bigger tap targets, readable tagline ---------- */
.split > *, .form-grid > *, .contact-grid > * { min-width: 0; }
.field input, .field select, .field textarea { max-width: 100%; min-width: 0; }
.form-card { max-width: 100%; overflow-wrap: anywhere; }
.page-hero h1 { font-size: clamp(30px, 8vw, 56px); }
@media (max-width: 720px) {
  .brand__sub { font-size: 9.5px; letter-spacing: .12em; }
  .crumbs a { display: inline-flex; align-items: center; min-height: 36px; padding: 0 2px; }
  .link-arrow { min-height: 40px; }
  .footer a { display: inline-block; padding: 5px 0; }
  .footer li { line-height: 1.3; }
}
/* Top contact bar: desktop only (hidden on tablets and phones; the details stay in the footer and contact page) */
@media (max-width: 1024px) { .topbar { display: none; } }
.contact-list, .contact-item, .contact-item > * { min-width: 0; }
.contact-item > div { overflow-wrap: anywhere; }
@media (max-width: 480px) { .brand__sub { font-size: 9px; letter-spacing: .07em; white-space: nowrap; } }

/* ---------- Philippines mini-map with Luzon highlighted (Industries section heading) ---------- */
.section-head--map { display: flex; align-items: flex-end; justify-content: space-between; gap: 32px; }
.section-head--map > div { min-width: 0; }
.ph-map { flex: none; margin: 0; display: grid; justify-items: center; gap: 6px; }
.ph-map svg { height: 200px; width: auto; overflow: visible; }
.ph-map__other { fill: #e3e8ef; }
.ph-map__luzon { fill: var(--gold-400); stroke: var(--gold-600); stroke-width: 2; stroke-linejoin: round; }
.ph-map__ring { fill: var(--navy-900); fill-opacity: .12; stroke: var(--navy-900); stroke-width: 1.5; }
.ph-map__dot { fill: var(--navy-900); }
.ph-map figcaption { font: 700 11px var(--font-ui); letter-spacing: .16em; text-transform: uppercase; color: var(--gold-600); }
@media (max-width: 720px) { .section-head--map { flex-direction: column; align-items: flex-start; gap: 18px; } .ph-map svg { height: 150px; } }
/* Mini-map: larger and turned 45 degrees */
.ph-map { width: 340px; height: 372px; grid-template-rows: 1fr auto; align-items: center; }
.ph-map svg { height: 320px; transform: rotate(45deg); transform-origin: 50% 50%; }
@media (max-width: 720px) { .ph-map { width: 200px; height: 224px; } .ph-map svg { height: 180px; } }
/* Mini-map as a large rotated element on the right, lower part behind the cards */
.section--map { position: relative; overflow: hidden; }
.section--map .container { position: relative; }
.section--map .section-head--map { display: block; }
.section--map .industries { position: relative; z-index: 2; }
.section--map .ph-map { position: absolute; right: clamp(0px, 3vw, 48px); top: -40px; z-index: 1; width: 640px; height: 640px; display: grid; place-items: center; pointer-events: none; }
.section--map .ph-map svg { height: 600px; transform: rotate(-45deg); }
.section--map .ph-map figcaption { position: absolute; left: 50%; bottom: 56px; transform: translateX(-50%); }
.section--map .ph-map__other { fill: #e9edf3; }
@media (max-width: 1100px) { .section--map .ph-map { width: 520px; height: 520px; right: -60px; } .section--map .ph-map svg { height: 480px; } }
@media (max-width: 900px) { .section--map .ph-map { display: none; } }
/* Anchor the map to the section, not the heading block; heading text stays above it */
.section--map .section-head--map { position: static; max-width: 560px; }
.section--map .section-head--map > div { position: relative; z-index: 3; }
.section--map .ph-map { right: -24px; }
@media (max-width: 1100px) { .section--map .ph-map { right: -80px; } }
/* Fill the open area right of the heading; islands run down behind the cards */
.section--map .ph-map { width: 768px; height: 768px; right: -140px; top: -60px; }
.section--map .ph-map svg { height: 720px; }
.section--map .ph-map figcaption { display: none; }
@media (max-width: 1100px) { .section--map .ph-map { width: 600px; height: 600px; right: -200px; top: -40px; } .section--map .ph-map svg { height: 560px; } }
/* Upright map at the same scale, filling the area right of the heading */
.section--map .ph-map { width: 420px; height: 820px; right: -20px; top: -50px; transform: none; }
.section--map .ph-map svg { height: 820px; transform: none; }
@media (max-width: 1100px) { .section--map .ph-map { width: 330px; height: 640px; right: -60px; top: -30px; } .section--map .ph-map svg { height: 640px; } }
/* Nudge: a little up and to the left */
.section--map .ph-map { right: 40px; top: -90px; }
@media (max-width: 1100px) { .section--map .ph-map { right: -30px; top: -60px; } }
/* Second nudge: a little more up and left */
.section--map .ph-map { right: 100px; top: -130px; }
@media (max-width: 1100px) { .section--map .ph-map { right: 0; top: -90px; } }
/* Background texture for the map section: faint dotted grid fading in from the left + soft gold glow behind Luzon */
.section--map::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; background: radial-gradient(680px 680px at 78% 30%, rgba(200, 162, 74, .30), rgba(200, 162, 74, 0) 64%), radial-gradient(circle, rgba(11, 31, 58, .19) 1.2px, transparent 1.8px) 0 0 / 26px 26px; -webkit-mask-image: radial-gradient(ellipse 66% 84% at 80% 42%, #000 42%, rgba(0, 0, 0, 0) 80%); mask-image: radial-gradient(ellipse 66% 84% at 80% 42%, #000 42%, rgba(0, 0, 0, 0) 80%); }
@media (max-width: 900px) { .section--map::before { display: none; } }
/* Soft white fade at the top and bottom edges so the map and texture never look cropped */
.section--map::after { content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none; background: linear-gradient(180deg, #fff 0, rgba(255, 255, 255, 0) 110px), linear-gradient(0deg, #fff 0, rgba(255, 255, 255, 0) 130px); }
.section--map .industries { z-index: 3; }
.section--map .section-head--map > div { z-index: 4; }
@media (max-width: 900px) { .section--map::after { display: none; } }
/* Luzon map toned down slightly: softer fill, lighter and thinner outline, quieter pin */
.section--map .ph-map__luzon { fill-opacity: .78; stroke-opacity: .6; stroke-width: 1.5; }
.section--map .ph-map__ring { fill-opacity: .08; stroke-opacity: .7; stroke-width: 1.2; }
.section--map .ph-map__dot { fill-opacity: .85; }
/* Position dropdown: the "other" text box sits under the select */
.field__other { margin-top: 10px; }

/* ---------- Job cards: collapsible requirements (closed by default on phones) ---------- */
.job__body summary { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; list-style: none; font-family: var(--font-ui); font-weight: 700; color: var(--navy-900); }
.job__body summary::-webkit-details-marker { display: none; }
.job__body summary::after { content: ""; width: 8px; height: 8px; border-right: 2px solid var(--gold-600); border-bottom: 2px solid var(--gold-600); transform: rotate(45deg); transition: transform .2s var(--ease); margin-top: -3px; }
.job__body[open] summary::after { transform: rotate(-135deg); margin-top: 3px; }
.job__count { font-weight: 500; color: var(--muted); }
@media (max-width: 640px) {
  .job__body summary { min-height: 40px; }
  .job { padding: 20px; }
}

/* ---------- Narrow phones (320 to 360px): header and hero button fit without sideways scroll ---------- */
.page-hero .btn { max-width: 100%; white-space: normal; text-align: center; }
@media (max-width: 400px) {
  .page-hero .btn { min-height: 0; padding: 13px 18px; line-height: 1.35; }
}
@media (max-width: 360px) {
  .header .container { gap: 12px; }
  .brand__sub { white-space: normal; letter-spacing: .04em; font-size: 8.5px; }
  .brand__name { font-size: 18px; }
}
@media (max-width: 720px) {
  .footer a { padding: 8px 0; }
}

/* How to Apply steps: a long email address breaks onto a new line instead of pushing the page sideways on small phones */
.step h3, .step p { overflow-wrap: anywhere; }
.step { min-width: 0; }

/* "Apply now" on phones scrolls to the form itself; keep it clear of the sticky header */
#apply form { scroll-margin-top: 104px; }

/* Email addresses are long unbroken words; let them wrap on small phones (the "We never ask for money" notice, contact cards) */
a[href^="mailto:"] { overflow-wrap: anywhere; }
.notice > span { min-width: 0; }

/* Trust strip: headings line up across columns and two-line descriptions stay compact */
.trust__item { align-items: flex-start; }
.trust__item svg { margin-top: 2px; }
.trust__item span { display: block; margin-top: 3px; line-height: 1.5; }

/* Trust strip as separate rounded boxes with space between them (user request 2026-09-22) */
.trust { background: var(--bg); border-bottom: 0; }
.trust .container { gap: 16px; padding-block: 24px 28px; }
.trust .container > .trust__item { padding: 20px 22px; background: #fff; border: 1px solid var(--border); border-radius: var(--r-lg); box-shadow: var(--shadow-sm); }
@media (max-width: 960px) { .trust .container { gap: 14px; } }
@media (max-width: 520px) { .trust .container { gap: 12px; padding-block: 20px 24px; } .trust .container > .trust__item { padding: 16px 18px; } }

/* Trust strip: the band matches the section below it; boxes use the cream "Drivers & Riders" tag colours (2026-09-22) */
.trust { background: var(--surface); }
.trust:has(+ .section--alt) { background: var(--bg); }
.trust .container > .trust__item { background: #fdfaf1; border-color: #f3e9cc; box-shadow: none; }

/* Dropdowns: white like the text boxes on every browser (Safari paints its own grey button otherwise), with our own arrow */
.field select {
  -webkit-appearance: none; appearance: none;
  background-color: #fff;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23163664' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 16px center; background-size: 12px 8px;
  padding-right: 44px;
  cursor: pointer;
}
.field select::-ms-expand { display: none; }
.field select:disabled { background-color: var(--bg); cursor: default; }

/* Hero path cards: all three icon tiles match (cream tile, gold icon). The ".path-card span" text colour used to turn two icons grey. */
.path-card .path-card__icon, .path-card--navy .path-card__icon { background: var(--gold-100); color: var(--gold-600); }
/* Slightly tighter side padding so every description fits in two lines on laptops and monitors */
@media (min-width: 961px) { .trust .container > .trust__item { padding: 20px 16px 20px 18px; gap: 12px; } }

/* Section spacing trimmed about a fifth (2026-09-22): less empty space between sections, especially on laptops */
.section { padding-block: clamp(48px, 7vw, 88px); }
.section--tight { padding-block: clamp(40px, 5vw, 64px); }

/* Photo panels: thin tilted gold outline behind the photos, echoing the frame around the hero card (option B, 2026-09-22) */
.visual::after { content: ""; position: absolute; inset: 16% 6% 3% 7%; z-index: 0; pointer-events: none; border: 1.5px solid rgba(200, 162, 74, .55); border-radius: 30px; transform: rotate(-3deg); }

/* Phones: footer links and the job filters get a thumb-sized target (was 36-39px tall) */
@media (max-width: 720px) {
  .footer a { padding: 12px 0; }
  .chip { padding: 13px 18px; }
}

/* Chat launcher: the "I'm looking for a job" option opens a second short list */
.chat__body > .chat__opt { width: 100%; text-align: left; cursor: pointer; font: inherit; }
.chat__back { justify-self: start; display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px 6px 4px; margin: -4px 0 -2px; background: none; border: 0; cursor: pointer; font-family: var(--font-ui); font-weight: 600; font-size: 13.5px; color: var(--muted-2); }
.chat__back svg { width: 15px; height: 15px; transform: rotate(180deg); color: var(--gold-600); }
.chat__back:hover { color: var(--navy-900); }

/* How to Apply runs to five steps, so the timeline carries five columns instead of four.
   Below 961px the steps stack into the vertical timeline and the count does not matter. */
@media (min-width: 961px) { .steps--5 { grid-template-columns: repeat(5, 1fr); } }