/* Mercuri Global Solutions — site styles
   Translated from the approved Claude Design artboards in design-src/.
   Brand: navy #082038, yellow #ffcd05, Poppins. */

/* ---------- base ---------- */
body {
  margin: 0;
  background: #f4f7fb;
  color: #082038;
  font-family: 'Poppins', system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}
* { box-sizing: border-box; }
img { max-width: 100%; }
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}
a { color: #0f4b8f; text-decoration: none; }
a:hover { color: #082038; text-decoration: underline; }
summary::-webkit-details-marker { display: none; }
summary { list-style: none; cursor: pointer; }
details[open] summary span[data-chev] { transform: rotate(45deg) !important; }

:focus-visible {
  outline: 3px solid #0f4b8f;
  outline-offset: 2px;
  border-radius: 4px;
}
.site-footer :focus-visible,
.cta-band :focus-visible,
.stat-bar :focus-visible { outline-color: #ffcd05; }

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  background: #082038;
  color: #fff;
  padding: 12px 18px;
  border-radius: 0 0 10px 0;
  font-size: 15px;
  font-weight: 600;
}
.skip-link:focus { left: 0; color: #fff; text-decoration: none; }

/* ---------- layout ---------- */
.page { min-height: 100vh; padding-bottom: calc(88px + env(safe-area-inset-bottom)); }
/* Anchor targets clear the sticky header (73px with the vector lockup, 61px
   below 431px where the 40px nav toggle sets the height), and nothing scrolls
   to rest under the 59px fixed bottom bar. */
[id] { scroll-margin-top: 88px; scroll-margin-bottom: 80px; }
.page--flush { min-height: 100vh; }
.wrap { width: 100%; max-width: 1140px; margin: 0 auto; padding: 0 20px; }
.wrap--narrow { max-width: 840px; }

.section { padding: 40px 0; }
.section--white {
  background: #fff;
  border-top: 1px solid #dbe3ee;
  border-bottom: 1px solid #dbe3ee;
}
.section--service { padding: 20px 0; }
.section--service-last { padding: 20px 0 36px; }
.section--steps { padding: 34px 0 20px; }
.section--sectors { padding: 20px 0 44px; }

/* ---------- header ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 40;
  background: rgba(244, 247, 251, 0.94);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid #dbe3ee;
}
.header-inner {
  width: 100%;
  max-width: 1140px;
  margin: 0 auto;
  padding: 10px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.brand { display: flex; align-items: center; text-decoration: none; min-width: 0; }
.brand:hover { text-decoration: none; }
.brand-logo { height: 52px; width: auto; display: block; flex: none; }
.nav { display: flex; align-items: center; gap: 22px; font-size: 15px; font-weight: 600; flex: none; }
.nav a { color: #5a6b80; white-space: nowrap; }
.nav a:hover { color: #082038; text-decoration: none; }
.nav a.is-current { color: #082038; }
.nav a.is-current::after {
  content: "";
  display: block;
  height: 2px;
  margin-top: 3px;
  border-radius: 2px;
  background: #ffcd05;
}
.nav-cta {
  color: #082038 !important;
  background: #ffcd05;
  padding: 8px 16px;
  border-radius: 999px;
}
.nav-cta:hover { background: #f0c000; }
.nav-cta.is-current::after { display: none; }

/* hamburger — hidden on desktop, shown under the mobile breakpoint */
.nav-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 40px;
  padding: 0;
  border: 1px solid #d3ddea;
  border-radius: 10px;
  background: #fff;
  cursor: pointer;
  flex: none;
}
.nav-toggle-box { position: relative; width: 20px; height: 14px; }
.nav-toggle-bar {
  position: absolute;
  left: 0;
  width: 20px;
  height: 2px;
  border-radius: 2px;
  background: #082038;
  transition: transform 0.22s ease, opacity 0.18s ease, top 0.22s ease;
}
.nav-toggle-bar:nth-child(1) { top: 0; }
.nav-toggle-bar:nth-child(2) { top: 6px; }
.nav-toggle-bar:nth-child(3) { top: 12px; }
.site-header.is-open .nav-toggle-bar:nth-child(1) { top: 6px; transform: rotate(45deg); }
.site-header.is-open .nav-toggle-bar:nth-child(2) { opacity: 0; }
.site-header.is-open .nav-toggle-bar:nth-child(3) { top: 6px; transform: rotate(-45deg); }

/* ---------- hero ---------- */
/* The hero section itself is flush: the banner and the trust bar are
   full-width bands and the text/form live in .hero-body, so nothing fights
   section padding. */
.hero { background: linear-gradient(180deg, #ffffff 0%, #eaf1fa 100%); padding: 0; }

/* Banner. Navy behind the image so the band never flashes white while the
   JPEG decodes; aspect-ratio matches each asset exactly, so reserving the box
   from the width/height attributes costs no layout shift. object-position is
   per page because the subject sits at a different height in each crop. */
.hero-banner { background: #082038; }
.hero-banner img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 7;
  /* Fold test at 1280x720, measured against the *top of the sticky CTA bar*
     (y=656 on the pages that have one), not the raw viewport: 280px is the
     largest cap that keeps the whole H1 and the first form field clear of it,
     so 260 is 280 minus a margin for font fallback. At the 420px this started
     at, both the headline and the card fell off-screen, which would undo the
     point of shrinking the enquiry card in the first place. */
  max-height: 260px;
  object-fit: cover;
  object-position: 50% 32%;
}
.hero-banner--services img {
  aspect-ratio: 25 / 9;
  /* Same test; this page has no form, so the H1 is the only constraint and it
     tolerates a taller band (320 measured, 300 shipped). */
  max-height: 300px;
  object-position: 50% 32%;
}
.hero-banner--employers img {
  aspect-ratio: 16 / 6;
  /* Same fold test. This page carries no sticky CTA bar, so the fold is the
     full 720 — but its H1 runs to five lines at 1280, which brings the ceiling
     back to the same place: 280 measured, 260 shipped. */
  max-height: 260px;
  object-position: 50% 50%;
}
.hero-body { padding-top: 28px; padding-bottom: 10px; }
.hero-body--page { padding-top: 30px; padding-bottom: 28px; }
.hero-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
  gap: 32px;
  align-items: start;
}

.badge-mea {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #ffcd05;
  color: #082038;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 7px 13px;
  border-radius: 999px;
}

.rule { width: 64px; height: 5px; background: #ffcd05; border-radius: 3px; }

h1, h2, h3 { overflow-wrap: break-word; }
.h1-home {
  font-weight: 700;
  font-size: clamp(32px, 5.8vw, 50px);
  line-height: 1.1;
  letter-spacing: -0.02em;
  margin: 18px 0 0;
  text-wrap: pretty;
}
.h1-page {
  font-weight: 700;
  font-size: clamp(30px, 5.4vw, 46px);
  line-height: 1.1;
  letter-spacing: -0.02em;
  margin: 14px 0 0;
  text-wrap: pretty;
}
.h1-page--narrow { max-width: 20ch; }

.lede { font-size: 17px; line-height: 1.65; color: #4a5b70; margin: 14px 0 0; }
.lede--home { margin: 16px 0 0; max-width: 46ch; text-wrap: pretty; }
.lede--services { max-width: 56ch; }
.lede--employers { max-width: 52ch; }

/* ---------- buttons ---------- */
.btn {
  display: inline-block;
  font-size: 16.5px;
  font-weight: 600;
  padding: 15px 24px;
  border-radius: 10px;
  text-decoration: none;
}
.btn--navy { background: #082038; color: #fff; }
.btn--navy:hover { background: #0f3057; color: #fff; text-decoration: none; }
.btn--yellow { background: #ffcd05; color: #082038; }
.btn--yellow:hover { background: #f0c000; color: #082038; text-decoration: none; }
.btn--outline { border: 1.5px solid #4a5f7a; color: #fff; padding: 14px 22px; }
.btn--outline:hover { background: #0f3057; color: #fff; text-decoration: none; }
.btn--block { display: block; text-align: center; margin-top: 14px; font-size: 16px; padding: 14px; }

.btn-row { display: flex; flex-wrap: wrap; gap: 12px; }
.btn-row--hero { margin-top: 22px; }
.btn-row--hero .btn { font-size: 15px; padding: 12px 18px; }
.call-line { font-size: 14px; color: #4a5b70; margin: 13px 0 0; }
.call-line a { font-weight: 600; }

.chip-row { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; }
.chip {
  display: inline-block;
  background: #fff;
  border: 1px solid #dbe3ee;
  color: #2c3d52;
  font-size: 14.5px;
  font-weight: 500;
  padding: 10px 15px;
  border-radius: 999px;
}
.chip:hover { border-color: #ffcd05; color: #2c3d52; text-decoration: none; }

/* ---------- approved-by trust bar (top of every hero) ---------- */
.trust-bar { background: #fff; border-bottom: 1px solid #dbe3ee; }
.trust-bar-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 16px;
  padding-top: 11px;
  padding-bottom: 11px;
}
.trust-bar-label {
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #5a6b80;
  white-space: nowrap;
}
.trust-bar-logos { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; }
/* No mix-blend-mode: the band is white, so the marks composite as-is. The
   source PNGs carry an opaque #dbebf8 plate, so each mark gets a rounded
   hairline to read as a deliberate chip rather than a stray rectangle. */
.trust-bar-logos img {
  height: 36px;
  width: auto;
  display: block;
  border-radius: 6px;
  box-shadow: 0 0 0 1px #cfd9e6;
}
.trust-bar-note { font-size: 11.5px; line-height: 1.5; color: #5a6b80; }

/* ---------- forms ---------- */
/* Compact by design: the card has to sit beside the hero copy at >=861px in a
   400px column, and leave room above the fold on a phone. */
.form-card {
  background: #fff;
  border: 1px solid #dbe3ee;
  border-radius: 14px;
  padding: 16px 14px;
  box-shadow: 0 14px 34px rgba(8, 32, 56, 0.08);
}
.form-card--sticky { position: sticky; top: 92px; }
.form-title { font-size: 18px; font-weight: 700; margin: 0; letter-spacing: -0.01em; }
.form-sub { font-size: 13px; line-height: 1.5; color: #5a6b80; margin: 5px 0 13px; }
.thanks {
  background: #fff8dd;
  border: 1px solid #ffcd05;
  border-radius: 12px;
  padding: 14px;
  font-size: 14.5px;
  color: #082038;
  line-height: 1.55;
}
.thanks-title { margin: 0; font-size: 14.5px; line-height: 1.55; }
.thanks-note { margin: 9px 0 0; font-size: 12.5px; line-height: 1.55; color: #6b6118; }
.thanks-btn { margin-top: 13px; width: 100%; text-align: center; }
.form { display: grid; gap: 9px; }
/* The rule above outranks the UA [hidden] rule, so hiding the form after
   submit needs this: without it the thank-you panel renders above a live,
   still-filled form and the enquiry can be fired repeatedly. */
.form[hidden] { display: none; }
.field { display: grid; gap: 6px; font-size: 13.5px; font-weight: 600; color: #4a5b70; }
.field input,
.field select,
.field textarea {
  font-family: 'Poppins', system-ui, -apple-system, sans-serif;
  font-size: 14.5px;
  padding: 9px 11px;
  border: 1px solid #cfd9e6;
  border-radius: 8px;
  background: #fbfcfe;
  color: #082038;
  min-width: 0;
}
.field textarea { resize: vertical; }
.field-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(150px, 100%), 1fr));
  gap: 9px;
}
.form-submit {
  font-family: 'Poppins', system-ui, -apple-system, sans-serif;
  margin-top: 3px;
  background: #082038;
  color: #fff;
  border: 0;
  font-size: 15px;
  font-weight: 600;
  padding: 11px;
  border-radius: 8px;
  cursor: pointer;
}
.form-submit:hover { background: #0f3057; }
.form-note { font-size: 11.5px; color: #7a889b; margin: 2px 0 0; line-height: 1.5; }

/* ---------- stat bars ---------- */
.stat-bar {
  background: #082038;
  border-radius: 16px;
  padding: 22px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(170px, 100%), 1fr));
  gap: 20px;
}
.stat-bar--employers {
  border-radius: 14px;
  padding: 20px;
  margin-top: 26px;
  gap: 18px;
  grid-template-columns: repeat(auto-fit, minmax(min(150px, 100%), 1fr));
}
.stat-num {
  font-size: 26px;
  font-weight: 700;
  color: #ffcd05;
  letter-spacing: -0.01em;
  overflow-wrap: break-word;
}
.stat-num--sm { font-size: 24px; letter-spacing: normal; }
.stat-label { font-size: 14px; color: #b9c6d6; margin-top: 2px; }
.stat-label--flush { margin-top: 0; }

/* ---------- section headings ---------- */
.h2 { font-size: clamp(25px, 4vw, 34px); font-weight: 700; letter-spacing: -0.02em; margin: 14px 0 0; }
.h2--sm { font-size: clamp(24px, 3.6vw, 32px); }
.mb-18 { margin-bottom: 18px; }
.mb-20 { margin-bottom: 20px; }
.mb-22 { margin-bottom: 22px; }
.section-lede { font-size: 16.5px; color: #4a5b70; margin: 8px 0 24px; max-width: 60ch; }
.section-lede--tight { margin-bottom: 22px; }
.section-head {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: end;
  justify-content: space-between;
}
.section-head--reviews { gap: 14px; }
.section-note { font-size: 15px; color: #4a5b70; margin: 16px 0 0; }
.section-note strong { color: #082038; }
.section-sub-label {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #7a889b;
  margin: 26px 0 12px;
}

/* ---------- about ---------- */
.about-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
  gap: 30px;
  align-items: start;
}
.about-lede { margin-bottom: 18px; max-width: 60ch; }
/* Text first in the DOM so the heading leads on a phone; the portrait takes a
   fixed column beside it once there is room. */
.about-grid--photo { align-items: center; }
.about-photo { margin: 0; }
.about-photo img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  border-radius: 16px;
}
.about-tag {
  font-size: 17px;
  font-weight: 600;
  font-style: italic;
  line-height: 1.5;
  color: #082038;
  border-left: 4px solid #ffcd05;
  padding-left: 14px;
  margin: 0 0 20px;
}
.value-row { display: flex; flex-wrap: wrap; gap: 8px; }
.value-chip {
  background: #fff;
  border: 1px solid #dbe3ee;
  border-radius: 999px;
  padding: 8px 13px;
  font-size: 13px;
  font-weight: 500;
  color: #3b4a5e;
}
.trust-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 12px;
}
.trust-list--row {
  grid-template-columns: repeat(auto-fit, minmax(min(210px, 100%), 1fr));
  margin-top: 26px;
}
.trust-list li {
  background: #fbfcfe;
  border: 1px solid #dbe3ee;
  border-left: 4px solid #ffcd05;
  border-radius: 12px;
  padding: 14px 16px;
}
.trust-key {
  display: block;
  font-size: 15.5px;
  font-weight: 700;
  color: #082038;
}
.trust-val {
  display: block;
  font-size: 14px;
  line-height: 1.55;
  color: #5a6b80;
  margin-top: 3px;
}

/* ---------- cards & grids ---------- */
.grid { display: grid; gap: 14px; }
.grid--200 { grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr)); }
.grid--220 { grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)); }
.grid--230 { grid-template-columns: repeat(auto-fit, minmax(min(230px, 100%), 1fr)); }
.grid--240 { grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); }
.grid--260 { grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)); }
.grid--top { margin-top: 22px; }

.card { background: #fff; border: 1px solid #dbe3ee; border-radius: 14px; padding: 18px; }
.card--tint { background: #fbfcfe; }
.card-title { font-size: 17px; font-weight: 600; margin: 12px 0 6px; }
.card-title--flush { margin: 0 0 6px; }
.card-text { font-size: 14.5px; line-height: 1.6; color: #5a6b80; margin: 0; }
.card-text--gap { margin: 0 0 12px; }
.card-link { font-size: 14.5px; font-weight: 600; }
.card-link--lg { font-size: 15.5px; }
.step-num {
  width: 32px;
  height: 32px;
  border-radius: 9px;
  background: #ffcd05;
  color: #082038;
  font-weight: 700;
  font-size: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.step-label {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #0f4b8f;
}
.step-title { font-size: 17px; font-weight: 600; margin: 8px 0 6px; }

.country-head { display: flex; align-items: center; gap: 10px; }
.country-head h3 { font-size: 17px; font-weight: 600; margin: 0; }
.flag { width: 34px; height: 23px; border-radius: 4px; display: block; flex: none; }
.flag--sa { background: #0f6b3c; }
.flag--qa { background: #7a1f3d; }
.flag--ae { background: #1f7a44; }
.flag--kw { background: #0f4b8f; }
.flag--bh { background: #8a1c22; }
.flag--om { background: #c0392b; }
.country-text { font-size: 14.5px; line-height: 1.6; color: #5a6b80; margin: 10px 0 0; }

.pill-row { display: flex; flex-wrap: wrap; gap: 10px; }
.pill {
  background: #fff;
  border: 1px solid #dbe3ee;
  border-radius: 999px;
  padding: 9px 15px;
  font-size: 14.5px;
  color: #3b4a5e;
}
.pill--tint { background: #f4f7fb; }

/* ---------- testimonials ---------- */
.reviews-aside {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 14px;
  margin-bottom: 22px;
}
.reviews-rating { font-size: 14.5px; font-weight: 600; color: #082038; white-space: nowrap; }
.reviews-rating .star { color: #ffcd05; }
.review-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #fff;
  border: 1px solid #dbe3ee;
  border-radius: 10px;
  padding: 11px 16px;
  font-size: 14.5px;
  font-weight: 600;
  color: #082038;
}
.review-btn:hover { border-color: #ffcd05; color: #082038; text-decoration: none; }
.review-btn .star { color: #ffcd05; font-size: 16px; }

.quote-card {
  margin: 0;
  border: 1px solid #dbe3ee;
  border-radius: 14px;
  padding: 20px;
  background: #fbfcfe;
}
.quote-card blockquote { margin: 0; font-size: 16px; line-height: 1.65; color: #2c3d52; }
.quote-card figcaption { margin-top: 14px; font-size: 14.5px; color: #5a6b80; }
.quote-name { color: #082038; }

/* ---------- FAQ ---------- */
.faq { display: grid; gap: 10px; }
.faq details { background: #fff; border: 1px solid #dbe3ee; border-radius: 12px; padding: 16px 18px; }
.faq summary {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: center;
  font-size: 16px;
  font-weight: 600;
}
.faq p { font-size: 15.5px; line-height: 1.65; color: #5a6b80; margin: 12px 0 0; }
.chev {
  flex: none;
  width: 10px;
  height: 10px;
  border-right: 2px solid #082038;
  border-bottom: 2px solid #082038;
  transform: rotate(-45deg);
  transition: transform 0.2s;
}

/* ---------- services page ---------- */
.service-card {
  background: #fff;
  border: 1px solid #dbe3ee;
  border-radius: 16px;
  padding: 24px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
  gap: 26px;
}
.service-h2 { font-size: clamp(22px, 3.4vw, 30px); font-weight: 700; letter-spacing: -0.02em; margin: 0; }
.service-text { font-size: 16px; line-height: 1.65; color: #4a5b70; margin: 12px 0 0; }
.service-sub {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #0f4b8f;
  margin: 20px 0 8px;
}
.service-who { font-size: 15.5px; line-height: 1.65; color: #5a6b80; margin: 0; }
.timeline { border: 1px solid #e4ebf4; background: #fbfcfe; border-radius: 12px; padding: 16px; }
.timeline-label {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #7a889b;
}
.timeline-value { font-size: 24px; font-weight: 700; color: #082038; margin-top: 6px; overflow-wrap: break-word; }
.timeline-note { font-size: 14.5px; line-height: 1.6; color: #5a6b80; margin: 8px 0 0; }

/* ---------- employers page ---------- */
.benefit-stack { display: grid; gap: 14px; margin-top: 26px; }
.benefit-title { font-size: 18px; font-weight: 600; margin: 0 0 6px; }
.benefit-text { font-size: 15.5px; line-height: 1.65; color: #5a6b80; margin: 0; }
.panel { background: #fff; border: 1px solid #dbe3ee; border-radius: 16px; padding: 24px; }
.panel-title { font-size: 20px; font-weight: 600; margin: 0 0 10px; }
.panel-text { font-size: 15.5px; line-height: 1.65; color: #5a6b80; margin: 0 0 16px; max-width: 70ch; }

/* ---------- closing CTA band ---------- */
.cta-band { background: #082038; padding: 46px 0; }
.cta-band--services { padding: 44px 0; }
.cta-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
  gap: 24px;
  align-items: center;
}
.cta-title {
  font-size: clamp(25px, 4.2vw, 36px);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: #fff;
  margin: 0;
  text-wrap: pretty;
}
.cta-title--services { font-size: clamp(24px, 4vw, 34px); }
.cta-text { font-size: 16.5px; line-height: 1.65; color: #b9c6d6; margin: 12px 0 0; max-width: 48ch; }

/* ---------- contact ---------- */
.contact-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
  gap: 16px;
  margin-top: 22px;
}
.contact-card { background: #fbfcfe; border: 1px solid #dbe3ee; border-radius: 14px; padding: 20px; }
.contact-card--cta { background: #082038; }
.contact-card--cta .contact-label { color: #ffcd05; }
.contact-card--cta .contact-text { color: #b9c6d6; }
.contact-card--cta .btn--block { margin-top: 12px; }
.contact-label {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #7a889b;
}
.contact-label--gap { margin-top: 18px; }
.contact-text { font-size: 15px; line-height: 1.7; color: #3b4a5e; margin: 8px 0 0; }
.contact-lines { display: grid; gap: 4px; margin: 8px 0 0; }
.contact-lines a { font-size: 15.5px; font-weight: 600; color: #0f4b8f; }
.contact-hours { font-size: 13.5px; color: #7a889b; margin: 12px 0 0; }
.contact-social { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 16px; }
.contact-social a { font-size: 14px; font-weight: 600; color: #ffcd05; }
.contact-social a:hover { color: #ffcd05; }

/* ---------- footer ---------- */
.site-footer { background: #061729; padding: 42px 0 32px; }
.footer-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr));
  gap: 28px;
}
.footer-brand { display: flex; align-items: center; }
.footer-logo { height: 44px; width: auto; display: block; }
.footer-blurb { font-size: 14.5px; line-height: 1.65; color: #9aabbe; margin: 12px 0 0; max-width: 34ch; }
.footer-head {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #6d7f95;
}
.footer-text { font-size: 14.5px; line-height: 1.7; color: #cbd5e1; margin: 10px 0 0; }
.footer-links { font-size: 14.5px; line-height: 1.95; color: #cbd5e1; margin: 10px 0 0; }
.footer-links a { color: #ffcd05; }
.footer-links a:hover { color: #ffcd05; }
.footer-social { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 12px; }
.footer-social a { font-size: 13.5px; color: #9aabbe; }
.footer-social a:hover { color: #9aabbe; }
.footer-legal {
  width: 100%;
  max-width: 1140px;
  margin: 26px auto 0;
  padding: 16px 20px 0;
  border-top: 1px solid #1a2c40;
  font-size: 13px;
  color: #6d7f95;
  line-height: 1.7;
}

/* ---------- sticky bottom CTA ---------- */
.sticky-cta {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 60;
  background: #082038;
  box-shadow: 0 -8px 24px rgba(8, 32, 56, 0.22);
  display: grid;
  grid-template-columns: 1fr 1fr 1.25fr;
  gap: 8px;
  padding: 9px 10px;
  padding-bottom: calc(9px + env(safe-area-inset-bottom));
}
.sticky-cta a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 46px;
  border-radius: 11px;
  font-size: 15px;
  font-weight: 600;
  text-align: center;
}
.sticky-cta a:hover { text-decoration: none; }
.sticky-cta svg { width: 18px; height: 18px; flex: none; display: block; }
.sticky-ghost {
  color: #fff;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.18);
}
.sticky-ghost:hover { color: #fff; background: rgba(255, 255, 255, 0.16); }
.sticky-call svg { color: #ffcd05; }
.sticky-wa svg { color: #25d366; }
.sticky-apply {
  color: #082038;
  background: #ffcd05;
  font-weight: 700;
}
.sticky-apply:hover { color: #082038; background: #f0c000; }

/* ---------- mobile menu (hamburger) ---------- */
@media (max-width: 860px) {
  .nav-toggle { display: inline-flex; }
  .nav {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    display: none;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: #fff;
    border-bottom: 1px solid #dbe3ee;
    box-shadow: 0 16px 30px rgba(8, 32, 56, 0.14);
    padding: 6px 18px 16px;
    max-height: calc(100vh - 74px);
    overflow-y: auto;
  }
  .site-header.is-open .nav { display: flex; }
  .nav a {
    padding: 14px 4px;
    font-size: 16px;
    color: #082038;
    border-bottom: 1px solid #eef2f7;
  }
  .nav a.is-current { color: #082038; }
  .nav a.is-current::after { display: none; }
  .nav-cta {
    margin-top: 12px;
    text-align: center;
    border-radius: 10px;
    padding: 14px;
    border-bottom: 0;
  }
}

/* ---------- small screens ---------- */
@media (max-width: 430px) {
  .header-inner { padding: 10px 14px; gap: 10px; }
  .brand-logo { height: 40px; }
  .sticky-cta a { font-size: 14.5px; }
  /* The 40px nav toggle, not the logo, sets the header height here: 61px. */
  [id] { scroll-margin-top: 76px; }
  .nav { max-height: calc(100vh - 62px); }
}
@media (max-width: 380px) {
  .header-inner { padding: 10px 12px; gap: 8px; }
  .brand-logo { height: 36px; }
  .sticky-cta a { font-size: 14px; }
}

/* The trust bar stays a single row at every width. The licence note is the
   first thing to go, because it is repeated verbatim in the footer legal line;
   it needs 754px against the 760px available at 800, so 795px is the floor. */
@media (max-width: 794px) {
  .trust-bar-note { display: none; }
}
@media (min-width: 795px) {
  .trust-bar-note { margin-left: auto; }
}
@media (max-width: 640px) {
  .hero-banner img { aspect-ratio: 4 / 3; max-height: none; }
  .hero-banner--services img { aspect-ratio: 4 / 3; }
  .hero-banner--employers img { aspect-ratio: 3 / 2; }
  .trust-bar-inner { gap: 8px 10px; padding-top: 9px; padding-bottom: 9px; }
  .trust-bar-label { font-size: 10px; letter-spacing: 0.1em; }
  .trust-bar-logos { gap: 10px; flex-wrap: nowrap; }
  .trust-bar-logos img { height: 28px; }
}
@media (max-width: 380px) {
  .trust-bar-logos { gap: 8px; }
  .trust-bar-logos img { height: 24px; }
}

/* Where the fixed bottom bar is in play, keep clear space after the blocks
   that end in a primary button so none of them can rest under it. */
@media (max-width: 640px) {
  .form-card { margin-bottom: 24px; }
  .service-card { margin-bottom: 20px; }
  .btn--block { margin-bottom: 4px; }
}

/* Desktop home hero: the copy takes the slack, the enquiry card is capped at
   400px (it used to stretch to ~534px). */
@media (min-width: 861px) {
  .about-grid--photo { grid-template-columns: minmax(0, 1fr) minmax(0, 320px); }
  .hero-grid--home {
    grid-template-columns: minmax(0, 1fr) minmax(320px, 400px);
    gap: 40px;
  }
}

@media print {
  .sticky-cta,
  .hero-banner,
  .site-header { display: none; }
  .page { padding-bottom: 0; }
  body { background: #fff; }
}