/* ============================================================
   HAPS Business, Main Stylesheet
   Design: light-primary, navy accent, cyan highlights
   Last updated: June 2026
   ============================================================ */

/* ── Google Fonts ── */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Plus+Jakarta+Sans:wght@500;600;700;800&display=swap');

/* ============================================================
   1. DESIGN TOKENS (CSS Custom Properties)
   ============================================================ */
:root {
  /* Brand colours */
  --c-navy:        #0B1F3A;
  --c-navy-deep:   #071428;
  --c-navy-mid:    #132C4F;
  --c-navy-light:  #1E3A5F;
  --c-cyan:        #0EA5E9;
  --c-cyan-light:  #38BDF8;
  --c-cyan-pale:   #E0F2FE;
  --c-cyan-border: rgba(14,165,233,0.25);

  /* Neutrals */
  --c-white:       #FFFFFF;
  --c-off-white:   #F8FAFC;
  --c-silver:      #F1F5F9;
  --c-silver-mid:  #E2E8F0;
  --c-silver-dark: #CBD5E1;

  /* Text */
  --c-text-dark:   #0F172A;
  --c-text-mid:    #334155;
  --c-text-light:  #64748B;
  --c-text-xlight: #94A3B8;

  /* Feedback */
  --c-success:     #059669;
  --c-error:       #DC2626;
  --c-warning:     #D97706;

  /* Shadows */
  --shadow-xs:  0 1px 3px rgba(15,23,42,0.06), 0 1px 2px rgba(15,23,42,0.04);
  --shadow-sm:  0 2px 8px rgba(15,23,42,0.08), 0 1px 4px rgba(15,23,42,0.05);
  --shadow-md:  0 4px 16px rgba(15,23,42,0.10), 0 2px 8px rgba(15,23,42,0.06);
  --shadow-lg:  0 10px 32px rgba(15,23,42,0.12), 0 4px 16px rgba(15,23,42,0.07);
  --shadow-xl:  0 20px 48px rgba(15,23,42,0.15), 0 8px 24px rgba(15,23,42,0.08);
  --shadow-cyan: 0 4px 16px rgba(14,165,233,0.30);

  /* Spacing */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;
  --space-32: 128px;

  /* Typography */
  --font-body:    'Inter', system-ui, -apple-system, sans-serif;
  --font-heading: 'Plus Jakarta Sans', 'Inter', system-ui, sans-serif;
  --text-xs:   0.75rem;    /* 12px */
  --text-sm:   0.875rem;   /* 14px */
  --text-base: 1rem;       /* 16px */
  --text-lg:   1.125rem;   /* 18px */
  --text-xl:   1.25rem;    /* 20px */
  --text-2xl:  1.5rem;     /* 24px */
  --text-3xl:  1.875rem;   /* 30px */
  --text-4xl:  2.25rem;    /* 36px */
  --text-5xl:  3rem;       /* 48px */

  /* Radius */
  --radius-sm: 6px;
  --radius:    10px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-full: 9999px;

  /* Transitions */
  --ease: cubic-bezier(0.25, 0.1, 0.25, 1);
  --transition: 0.20s var(--ease);
  --transition-slow: 0.35s var(--ease);

  /* Layout */
  --container: 1180px;
  --container-sm: 760px;
  --container-md: 960px;
}

/* ============================================================
   2. RESET & BASE
   ============================================================ */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 16px;
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  tab-size: 4;
}

body {
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: 1.65;
  color: var(--c-text-mid);
  background: var(--c-white);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img, picture, video, canvas, svg {
  display: block;
  max-width: 100%;
}

input, button, textarea, select {
  font: inherit;
}

p, h1, h2, h3, h4, h5, h6 {
  overflow-wrap: break-word;
}

ul, ol { list-style: none; }

a {
  color: var(--c-cyan);
  text-decoration: none;
  transition: color var(--transition);
}
a:hover { color: var(--c-cyan-light); }

/* ============================================================
   3. TYPOGRAPHY
   ============================================================ */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  font-weight: 700;
  line-height: 1.2;
  color: var(--c-text-dark);
}

h1 { font-size: clamp(var(--text-3xl), 5vw, var(--text-5xl)); font-weight: 800; }
h2 { font-size: clamp(var(--text-2xl), 3.5vw, var(--text-4xl)); }
h3 { font-size: clamp(var(--text-lg), 2.5vw, var(--text-2xl)); }
h4 { font-size: var(--text-xl); }
h5 { font-size: var(--text-lg); }

p { line-height: 1.7; }
p + p { margin-top: var(--space-4); }

.text-sm    { font-size: var(--text-sm); }
.text-xs    { font-size: var(--text-xs); }
.text-lg    { font-size: var(--text-lg); }
.text-xl    { font-size: var(--text-xl); }
.text-mid   { color: var(--c-text-mid); }
.text-light { color: var(--c-text-light); }
.text-white { color: var(--c-white); }
.text-cyan  { color: var(--c-cyan); }
.text-navy  { color: var(--c-navy); }
.text-center { text-align: center; }
.font-medium { font-weight: 500; }
.font-semi   { font-weight: 600; }
.font-bold   { font-weight: 700; }
.leading-tight { line-height: 1.25; }

/* ============================================================
   4. LAYOUT
   ============================================================ */
.container {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--space-6);
}
.container-sm {
  width: 100%;
  max-width: var(--container-sm);
  margin: 0 auto;
  padding: 0 var(--space-6);
}
.container-md {
  width: 100%;
  max-width: var(--container-md);
  margin: 0 auto;
  padding: 0 var(--space-6);
}

/* Sections */
.section       { padding: var(--space-24) 0; }
.section-lg    { padding: var(--space-32) 0; }
.section-sm    { padding: var(--space-16) 0; }
.section-xs    { padding: var(--space-12) 0; }

/* Section headers */
.section-header        { margin-bottom: var(--space-12); }
.section-header.center { text-align: center; }
.section-header.center .section-subtitle { margin: 0 auto; }

.section-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--c-cyan);
  margin-bottom: var(--space-3);
}
.section-eyebrow .dot {
  width: 6px;
  height: 6px;
  background: var(--c-cyan);
  border-radius: 50%;
}

.section-title { margin-bottom: var(--space-4); }

.section-subtitle {
  font-size: var(--text-lg);
  color: var(--c-text-light);
  max-width: 600px;
  line-height: 1.65;
}

/* Grids */
.grid-2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-8);
}
.grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-6);
}
.grid-4 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-5);
}
.grid-auto {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--space-6);
}

/* Split 55/45 */
.split {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: var(--space-20);
  align-items: center;
}
.split.flipped {
  grid-template-columns: 0.9fr 1.1fr;
}

/* Flex helpers */
.flex           { display: flex; }
.flex-center    { display: flex; align-items: center; justify-content: center; }
.flex-between   { display: flex; align-items: center; justify-content: space-between; }
.flex-col       { display: flex; flex-direction: column; }
.flex-wrap      { flex-wrap: wrap; }
.items-start    { align-items: flex-start; }
.items-center   { align-items: center; }
.gap-2  { gap: var(--space-2); }
.gap-3  { gap: var(--space-3); }
.gap-4  { gap: var(--space-4); }
.gap-6  { gap: var(--space-6); }
.gap-8  { gap: var(--space-8); }

/* Spacing helpers */
.mb-2  { margin-bottom: var(--space-2); }
.mb-3  { margin-bottom: var(--space-3); }
.mb-4  { margin-bottom: var(--space-4); }
.mb-6  { margin-bottom: var(--space-6); }
.mb-8  { margin-bottom: var(--space-8); }
.mb-12 { margin-bottom: var(--space-12); }
.mt-4  { margin-top: var(--space-4); }
.mt-6  { margin-top: var(--space-6); }
.mt-8  { margin-top: var(--space-8); }

/* Background helpers */
.bg-white      { background: var(--c-white); }
.bg-off-white  { background: var(--c-off-white); }
.bg-silver     { background: var(--c-silver); }
.bg-navy       { background: var(--c-navy); }
.bg-navy-deep  { background: var(--c-navy-deep); }
.bg-cyan-pale  { background: var(--c-cyan-pale); }

/* Divider */
.divider {
  height: 1px;
  background: var(--c-silver-mid);
  border: none;
  margin: 0;
}

/* ============================================================
   5. NAVIGATION
   ============================================================ */
.nav {
  position: sticky;
  top: 0;
  z-index: 900;
  background: var(--c-white);
  border-bottom: 1px solid var(--c-silver-mid);
  box-shadow: 0 1px 0 rgba(15,23,42,0.02), 0 2px 12px rgba(15,23,42,0.04);
}

.nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 88px;
  gap: var(--space-6);
}

/* Logo, official navy HAPS Business mark; the image carries the wordmark,
   so the adjacent text lockup is hidden to avoid duplicating "HAPS Business". */
.nav-logo {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  text-decoration: none;
  flex-shrink: 0;
}
.nav-logo img {
  height: 70px;
  width: auto;
  object-fit: contain;
  display: block;
}
.nav-logo-text { display: none; }
.nav-logo-name {
  font-family: var(--font-heading);
  font-size: var(--text-base);
  font-weight: 800;
  color: var(--c-white);
  letter-spacing: -0.01em;
}
.nav-logo-tagline {
  font-size: 0.68rem;
  color: var(--c-cyan-light);
  font-weight: 500;
  letter-spacing: 0.02em;
}

/* Links */
.nav-links {
  display: flex;
  align-items: center;
  gap: 2px;
  flex: 1;
  justify-content: center;
}
.nav-links a {
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--c-text-mid);
  padding: 6px 12px;
  border-radius: var(--radius-sm);
  transition: color var(--transition), background var(--transition);
  white-space: nowrap;
}
.nav-links a:hover,
.nav-links a[aria-current="page"] {
  color: var(--c-navy);
  background: var(--c-silver);
}
.nav-links a[aria-current="page"] {
  color: var(--c-cyan);
  background: var(--c-cyan-pale);
}

/* Nav CTA */
.nav-actions {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-shrink: 0;
}

/* Hamburger */
.nav-hamburger {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  padding: var(--space-2);
  border-radius: var(--radius-sm);
  transition: background var(--transition);
}
.nav-hamburger:hover { background: var(--c-silver); }
.nav-hamburger span {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--c-navy);
  border-radius: 2px;
  transition: transform var(--transition), opacity var(--transition);
}
.nav-hamburger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-hamburger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-hamburger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Mobile menu */
.nav-mobile {
  display: none;
  background: var(--c-white);
  border-top: 1px solid var(--c-silver-mid);
  padding: var(--space-4) var(--space-6) var(--space-6);
}
.nav-mobile.is-open { display: block; }
.nav-mobile a {
  display: block;
  font-size: var(--text-base);
  font-weight: 500;
  color: var(--c-text-mid);
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--c-silver-mid);
  transition: color var(--transition);
}
.nav-mobile a:hover, .nav-mobile a[aria-current="page"] { color: var(--c-cyan); }
.nav-mobile .btn { margin-top: var(--space-5); width: 100%; justify-content: center; }

/* Focus styles */
.nav-hamburger:focus-visible,
.nav-links a:focus-visible,
.nav-mobile a:focus-visible {
  outline: 2px solid var(--c-cyan);
  outline-offset: 2px;
}

/* ============================================================
   6. BUTTONS
   ============================================================ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  font-family: var(--font-heading);
  font-size: var(--text-sm);
  font-weight: 600;
  line-height: 1;
  padding: 11px 22px;
  border-radius: var(--radius);
  border: 2px solid transparent;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  transition: background var(--transition), border-color var(--transition),
              color var(--transition), box-shadow var(--transition),
              transform var(--transition);
  -webkit-user-select: none;
  user-select: none;
}
.btn:focus-visible {
  outline: 3px solid var(--c-cyan);
  outline-offset: 2px;
}
.btn:active { transform: translateY(1px); }

/* Primary */
.btn-primary {
  background: var(--c-cyan);
  color: var(--c-navy-deep);
  border-color: var(--c-cyan);
  font-weight: 700;
}
.btn-primary:hover {
  background: var(--c-cyan-light);
  border-color: var(--c-cyan-light);
  color: var(--c-navy-deep);
  box-shadow: var(--shadow-cyan);
}

/* Secondary / outline on dark */
.btn-outline-light {
  background: transparent;
  color: var(--c-white);
  border-color: rgba(255,255,255,0.40);
}
.btn-outline-light:hover {
  background: rgba(255,255,255,0.10);
  border-color: rgba(255,255,255,0.70);
  color: var(--c-white);
}

/* Outline on white */
.btn-outline {
  background: transparent;
  color: var(--c-navy);
  border-color: var(--c-silver-mid);
}
.btn-outline:hover {
  border-color: var(--c-cyan);
  color: var(--c-cyan);
  background: var(--c-cyan-pale);
}

/* Navy solid */
.btn-navy {
  background: var(--c-navy);
  color: var(--c-white);
  border-color: var(--c-navy);
}
.btn-navy:hover {
  background: var(--c-navy-light);
  border-color: var(--c-navy-light);
  color: var(--c-white);
  box-shadow: var(--shadow-md);
}

/* Sizes */
.btn-sm { padding: 8px 16px; font-size: var(--text-xs); border-radius: var(--radius-sm); }
.btn-lg { padding: 15px 30px; font-size: var(--text-base); }
.btn-xl { padding: 18px 36px; font-size: var(--text-lg); }

/* Icon arrow inside button */
.btn .btn-arrow {
  transition: transform var(--transition);
  display: inline-flex;
}
.btn:hover .btn-arrow { transform: translateX(3px); }

/* ============================================================
   7. CARDS
   ============================================================ */
.card {
  background: var(--c-white);
  border: 1px solid var(--c-silver-mid);
  border-radius: var(--radius-lg);
  padding: var(--space-8);
  transition: box-shadow var(--transition), border-color var(--transition), transform var(--transition);
}
.card:hover {
  box-shadow: var(--shadow-md);
  border-color: var(--c-cyan-border);
}
.card.hoverable:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-lg);
}

/* Card icon */
.card-icon {
  width: 48px;
  height: 48px;
  border-radius: var(--radius);
  background: var(--c-cyan-pale);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--space-5);
  color: var(--c-cyan);
  flex-shrink: 0;
}
.card-icon.large {
  width: 60px;
  height: 60px;
  border-radius: var(--radius-lg);
}
.card-icon svg { width: 22px; height: 22px; }
.card-icon.large svg { width: 28px; height: 28px; }

.card h3 { margin-bottom: var(--space-3); font-size: var(--text-xl); }
.card h4 { margin-bottom: var(--space-2); font-size: var(--text-base); }
.card p  { font-size: var(--text-sm); color: var(--c-text-light); line-height: 1.6; }

/* Dark card */
.card-dark {
  background: var(--c-navy-mid);
  border-color: rgba(255,255,255,0.08);
  color: var(--c-white);
}
.card-dark h3, .card-dark h4 { color: var(--c-white); }
.card-dark p { color: rgba(255,255,255,0.70); }
.card-dark .card-icon { background: rgba(14,165,233,0.15); }

/* ============================================================
   8. BADGES & TAGS
   ============================================================ */
.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 4px 12px;
  border-radius: var(--radius-full);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.03em;
}
.badge-cyan {
  background: var(--c-cyan-pale);
  color: var(--c-cyan);
  border: 1px solid var(--c-cyan-border);
}
.badge-navy {
  background: rgba(11,31,58,0.08);
  color: var(--c-navy);
  border: 1px solid rgba(11,31,58,0.12);
}

/* Role tag (pill) */
.tag {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 7px 14px;
  border: 1.5px solid var(--c-silver-mid);
  border-radius: var(--radius);
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--c-text-mid);
  background: var(--c-white);
  transition: all var(--transition);
}
.tag:hover {
  border-color: var(--c-cyan);
  background: var(--c-cyan-pale);
  color: var(--c-navy);
}
.tag-dot {
  width: 7px;
  height: 7px;
  background: var(--c-cyan);
  border-radius: 50%;
  flex-shrink: 0;
}

/* ============================================================
   9. CHECKLIST
   ============================================================ */
.check-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}
.check-item {
  display: flex;
  gap: var(--space-3);
  align-items: flex-start;
}
.check-icon {
  width: 22px;
  height: 22px;
  background: var(--c-cyan);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-top: 2px;
}
.check-icon svg { width: 11px; height: 11px; color: var(--c-navy-deep); }
.check-item p  { font-size: var(--text-sm); color: var(--c-text-mid); margin: 0; }
.check-item p strong { color: var(--c-text-dark); }

/* On dark bg */
.check-list.light .check-item p { color: rgba(255,255,255,0.75); }
.check-list.light .check-item p strong { color: var(--c-white); }

/* ============================================================
   10. STEP / PROCESS
   ============================================================ */
.step-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
  position: relative;
}
.step-list::before {
  content: '';
  position: absolute;
  left: 23px;
  top: 46px;
  bottom: 0;
  width: 2px;
  background: linear-gradient(to bottom, var(--c-cyan), rgba(14,165,233,0.1));
}
.step {
  display: flex;
  gap: var(--space-5);
  align-items: flex-start;
  position: relative;
}
.step-num {
  width: 48px;
  height: 48px;
  background: var(--c-white);
  border: 2.5px solid var(--c-cyan);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-heading);
  font-size: var(--text-base);
  font-weight: 800;
  color: var(--c-cyan);
  flex-shrink: 0;
  position: relative;
  z-index: 1;
  box-shadow: 0 0 0 5px var(--c-white);
}
.step-body { padding-top: 10px; }
.step-body h3 { font-size: var(--text-xl); margin-bottom: var(--space-2); }
.step-body p  { font-size: var(--text-sm); color: var(--c-text-light); margin: 0; }

/* Horizontal process steps */
.process-row {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: var(--space-4);
  position: relative;
}
.process-row::before {
  content: '';
  position: absolute;
  top: 32px;
  left: calc(100% / 12);
  right: calc(100% / 12);
  height: 2px;
  background: linear-gradient(90deg, var(--c-cyan), var(--c-cyan-light));
  z-index: 0;
}
.process-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  position: relative;
  z-index: 1;
}
.process-step-num {
  width: 64px;
  height: 64px;
  background: var(--c-white);
  border: 3px solid var(--c-cyan);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-heading);
  font-size: var(--text-xl);
  font-weight: 800;
  color: var(--c-navy);
  margin-bottom: var(--space-4);
  box-shadow: 0 0 0 6px var(--c-silver);
}
.process-step h4 { font-size: var(--text-sm); font-weight: 700; margin-bottom: var(--space-2); color: var(--c-text-dark); }
.process-step p  { font-size: var(--text-xs); color: var(--c-text-light); }

/* ============================================================
   11. FORMS
   ============================================================ */
.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-5);
}
.form-grid .full { grid-column: 1 / -1; }

.form-group {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.form-label {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--c-text-dark);
}
.form-label .optional {
  font-weight: 400;
  color: var(--c-text-xlight);
  margin-left: 4px;
}
.form-label .required {
  color: var(--c-error);
  margin-left: 2px;
}

.form-control {
  padding: 11px 14px;
  border: 1.5px solid var(--c-silver-mid);
  border-radius: var(--radius);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  color: var(--c-text-dark);
  background: var(--c-white);
  transition: border-color var(--transition), box-shadow var(--transition);
  outline: none;
  width: 100%;
  appearance: none;
}
.form-control:focus {
  border-color: var(--c-cyan);
  box-shadow: 0 0 0 3px rgba(14,165,233,0.15);
}
.form-control::placeholder { color: var(--c-text-xlight); }
.form-control.error { border-color: var(--c-error); }
.form-control.error:focus { box-shadow: 0 0 0 3px rgba(220,38,38,0.12); }

textarea.form-control { resize: vertical; min-height: 110px; line-height: 1.6; }

select.form-control {
  cursor: pointer;
  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 1l5 5 5-5' stroke='%2364748B' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding-right: 36px;
}

.form-error {
  font-size: var(--text-xs);
  color: var(--c-error);
  display: none;
}
.form-error.visible { display: block; }

.form-hint {
  font-size: var(--text-xs);
  color: var(--c-text-xlight);
}

/* Checkbox / radio */
.form-checkbox {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  cursor: pointer;
}
.form-checkbox input[type="checkbox"] {
  width: 18px;
  height: 18px;
  border: 1.5px solid var(--c-silver-mid);
  border-radius: 4px;
  cursor: pointer;
  accent-color: var(--c-cyan);
  flex-shrink: 0;
  margin-top: 2px;
}
.form-checkbox-label {
  font-size: var(--text-sm);
  color: var(--c-text-mid);
  line-height: 1.5;
}
.form-checkbox-label a { color: var(--c-cyan); text-decoration: underline; }

/* Form footer note */
.form-note {
  font-size: var(--text-xs);
  color: var(--c-text-xlight);
  line-height: 1.5;
  text-align: center;
}
.form-note a { color: var(--c-cyan); }

/* Form section heading */
.form-section-heading {
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--c-text-xlight);
  padding-bottom: var(--space-4);
  border-bottom: 1px solid var(--c-silver-mid);
  margin-bottom: var(--space-5);
}

/* Form status message */
.form-status {
  display: none;
  padding: var(--space-5);
  border-radius: var(--radius);
  font-size: var(--text-sm);
  font-weight: 500;
  text-align: center;
}
.form-status.success {
  display: block;
  background: #ECFDF5;
  color: var(--c-success);
  border: 1px solid #A7F3D0;
}
.form-status.error {
  display: block;
  background: #FEF2F2;
  color: var(--c-error);
  border: 1px solid #FECACA;
}

/* ============================================================
   12. FAQ / ACCORDION
   ============================================================ */
.faq-list { display: flex; flex-direction: column; gap: var(--space-3); }

.faq-item {
  border: 1.5px solid var(--c-silver-mid);
  border-radius: var(--radius);
  overflow: hidden;
  transition: border-color var(--transition);
}
.faq-item.is-open { border-color: var(--c-cyan); }

.faq-trigger {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-5) var(--space-6);
  cursor: pointer;
  background: none;
  border: none;
  width: 100%;
  text-align: left;
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: 600;
  color: var(--c-text-dark);
  transition: background var(--transition);
}
.faq-trigger:hover { background: var(--c-silver); }
.faq-item.is-open .faq-trigger { background: var(--c-cyan-pale); }
.faq-trigger:focus-visible { outline: 2px solid var(--c-cyan); outline-offset: -2px; }

.faq-icon {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 1.5px solid var(--c-silver-mid);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: transform var(--transition), background var(--transition), border-color var(--transition);
  color: var(--c-text-light);
}
.faq-item.is-open .faq-icon {
  transform: rotate(180deg);
  background: var(--c-cyan);
  border-color: var(--c-cyan);
  color: var(--c-white);
}
.faq-icon svg { width: 14px; height: 14px; }

.faq-body {
  display: none;
  padding: var(--space-1) var(--space-6) var(--space-5);
  font-size: var(--text-sm);
  color: var(--c-text-light);
  line-height: 1.7;
}
.faq-item.is-open .faq-body { display: block; }

/* ============================================================
   13. HERO, HOMEPAGE
   ============================================================ */
.hero {
  background: var(--c-navy);
  position: relative;
  overflow: hidden;
  padding: var(--space-32) 0 var(--space-24);
}
.hero::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 55% 65% at 90% 30%, rgba(14,165,233,0.12) 0%, transparent 60%),
    radial-gradient(ellipse 40% 50% at 5% 80%, rgba(14,165,233,0.07) 0%, transparent 55%);
  pointer-events: none;
}

/* Subtle grid overlay */
.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.03) 1px, transparent 1px);
  background-size: 60px 60px;
  pointer-events: none;
}

.hero-content { position: relative; z-index: 1; max-width: 640px; }
.hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--c-cyan-light);
  margin-bottom: var(--space-5);
  background: rgba(14,165,233,0.12);
  border: 1px solid rgba(14,165,233,0.25);
  padding: 5px 14px;
  border-radius: var(--radius-full);
}

.hero-title {
  color: var(--c-white);
  margin-bottom: var(--space-6);
  letter-spacing: -0.02em;
}
.hero-title .accent { color: var(--c-cyan-light); }

.hero-body {
  font-size: var(--text-lg);
  color: rgba(255,255,255,0.70);
  margin-bottom: var(--space-8);
  max-width: 520px;
  line-height: 1.65;
}

.hero-actions {
  display: flex;
  gap: var(--space-4);
  flex-wrap: wrap;
  margin-bottom: var(--space-12);
}

.hero-candidate-link {
  font-size: var(--text-sm);
  color: rgba(255,255,255,0.50);
  display: flex;
  align-items: center;
  gap: var(--space-2);
}
.hero-candidate-link a {
  color: var(--c-cyan-light);
  font-weight: 500;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.hero-candidate-link a:hover { color: var(--c-white); }

/* Hero visual side */
.hero-visual {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

.hero-card {
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: var(--radius-xl);
  padding: var(--space-8);
  backdrop-filter: blur(12px);
  width: 100%;
  max-width: 400px;
}
.hero-card-heading {
  font-family: var(--font-heading);
  font-size: var(--text-sm);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--c-cyan-light);
  margin-bottom: var(--space-5);
}
.hero-card-tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-bottom: var(--space-6);
}
.hero-card-tag {
  background: rgba(14,165,233,0.12);
  border: 1px solid rgba(14,165,233,0.25);
  color: rgba(255,255,255,0.85);
  font-size: var(--text-xs);
  font-weight: 500;
  padding: 5px 11px;
  border-radius: var(--radius-full);
}
.hero-card-divider { height: 1px; background: rgba(255,255,255,0.08); margin: 0 0 var(--space-5); }

.hero-card-row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) 0;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.hero-card-row:last-child { border-bottom: none; }
.hero-card-row-icon {
  width: 34px;
  height: 34px;
  background: rgba(14,165,233,0.15);
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--c-cyan-light);
  flex-shrink: 0;
}
.hero-card-row-icon svg { width: 16px; height: 16px; }
.hero-card-row-text {
  font-size: var(--text-xs);
  color: rgba(255,255,255,0.70);
  line-height: 1.4;
}
.hero-card-row-text strong { color: var(--c-white); font-weight: 600; display: block; }

/* ============================================================
   14. VALUE STRIP
   ============================================================ */
.value-strip {
  background: var(--c-off-white);
  border-top: 1px solid var(--c-silver-mid);
  border-bottom: 1px solid var(--c-silver-mid);
  padding: var(--space-5) 0;
}
.value-strip-inner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-10);
  flex-wrap: wrap;
}
.value-item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--c-text-mid);
}
.value-item-icon {
  width: 36px;
  height: 36px;
  background: var(--c-cyan-pale);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--c-cyan);
  flex-shrink: 0;
}
.value-item-icon svg { width: 17px; height: 17px; }

/* ============================================================
   15. PAGE HERO (INNER PAGES)
   ============================================================ */
.page-hero {
  background: var(--c-navy);
  padding: var(--space-16) 0 var(--space-12);
  position: relative;
  overflow: hidden;
}
.page-hero::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 60% 80% at 80% 50%, rgba(14,165,233,0.08) 0%, transparent 60%);
  pointer-events: none;
}
.page-hero-inner { position: relative; z-index: 1; }
.page-hero h1 { color: var(--c-white); margin-bottom: var(--space-4); }
.page-hero p {
  font-size: var(--text-lg);
  color: rgba(255,255,255,0.65);
  max-width: 560px;
  line-height: 1.6;
}
.breadcrumb {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-5);
  font-size: var(--text-xs);
}
.breadcrumb a { color: rgba(255,255,255,0.45); }
.breadcrumb a:hover { color: var(--c-cyan-light); }
.breadcrumb-sep { color: rgba(255,255,255,0.25); }
.breadcrumb-current { color: var(--c-cyan-light); font-weight: 500; }

/* ============================================================
   16. HIGHLIGHT BOX (dark featured block)
   ============================================================ */
.highlight-box {
  background: var(--c-navy);
  border-radius: var(--radius-xl);
  padding: var(--space-12) var(--space-16);
  position: relative;
  overflow: hidden;
}
.highlight-box::after {
  content: '';
  position: absolute;
  top: -80px;
  right: -80px;
  width: 320px;
  height: 320px;
  background: radial-gradient(circle, rgba(14,165,233,0.18) 0%, transparent 60%);
  pointer-events: none;
}
.highlight-box h2 { color: var(--c-white); }
.highlight-box p  { color: rgba(255,255,255,0.65); }
.highlight-box .section-eyebrow { color: var(--c-cyan-light); }

/* ============================================================
   17. CTA SECTION
   ============================================================ */
.cta-section {
  background: var(--c-navy);
  padding: var(--space-24) 0;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.cta-section::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 60% 80% at 50% 110%, rgba(14,165,233,0.14) 0%, transparent 55%);
  pointer-events: none;
}
.cta-section h2       { color: var(--c-white); margin-bottom: var(--space-4); }
.cta-section .lead    { color: rgba(255,255,255,0.60); font-size: var(--text-lg); margin-bottom: var(--space-8); }
.cta-section-actions  { display: flex; gap: var(--space-4); justify-content: center; flex-wrap: wrap; }

/* ============================================================
   18. PATHWAY SPLIT (Employer vs Candidate)
   ============================================================ */
.pathway-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-6);
}
.pathway-card {
  border-radius: var(--radius-xl);
  padding: var(--space-10);
  position: relative;
  overflow: hidden;
}
.pathway-card.employer {
  background: var(--c-navy);
  color: var(--c-white);
}
.pathway-card.candidate {
  background: var(--c-silver);
  border: 1.5px solid var(--c-silver-mid);
  color: var(--c-text-dark);
}
.pathway-card::after {
  content: '';
  position: absolute;
  bottom: -60px;
  right: -60px;
  width: 200px;
  height: 200px;
  border-radius: 50%;
  opacity: 0.15;
  pointer-events: none;
}
.pathway-card.employer::after { background: var(--c-cyan); }
.pathway-card.candidate::after { background: var(--c-navy); }
.pathway-icon {
  width: 56px;
  height: 56px;
  border-radius: var(--radius-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--space-5);
}
.pathway-card.employer .pathway-icon { background: rgba(14,165,233,0.20); color: var(--c-cyan-light); }
.pathway-card.candidate .pathway-icon { background: var(--c-cyan-pale); color: var(--c-cyan); }
.pathway-icon svg { width: 26px; height: 26px; }
.pathway-card h3 { font-size: var(--text-2xl); margin-bottom: var(--space-3); }
.pathway-card.employer h3 { color: var(--c-white); }
.pathway-card p { font-size: var(--text-sm); line-height: 1.6; margin-bottom: var(--space-6); }
.pathway-card.employer p  { color: rgba(255,255,255,0.65); }
.pathway-card.candidate p { color: var(--c-text-light); }

/* ============================================================
   19. SERVICE CARDS
   ============================================================ */
.service-card {
  background: var(--c-white);
  border: 1.5px solid var(--c-silver-mid);
  border-radius: var(--radius-lg);
  padding: var(--space-6) var(--space-8);
  display: flex;
  gap: var(--space-5);
  align-items: flex-start;
  transition: all var(--transition);
  text-decoration: none;
  color: inherit;
}
.service-card:hover {
  border-color: var(--c-cyan);
  background: var(--c-cyan-pale);
  box-shadow: var(--shadow-sm);
}
.service-card-icon {
  width: 44px;
  height: 44px;
  background: var(--c-cyan-pale);
  border-radius: var(--radius);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--c-cyan);
  transition: background var(--transition);
}
.service-card:hover .service-card-icon { background: var(--c-white); }
.service-card-icon svg { width: 20px; height: 20px; }
.service-card-body h3 { font-size: var(--text-lg); margin-bottom: var(--space-2); }
.service-card-body p  { font-size: var(--text-sm); color: var(--c-text-light); margin: 0 0 var(--space-3); }
.service-card-link {
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--c-cyan);
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.service-card-link svg { width: 12px; height: 12px; }

/* ============================================================
   20. FOOTER
   ============================================================ */
.footer {
  background: var(--c-navy-deep);
  padding: var(--space-20) 0 0;
}
.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: var(--space-12);
  margin-bottom: var(--space-12);
}
.footer-brand {}
.footer-logo {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
  text-decoration: none;
}
.footer-logo img {
  height: 54px;
  width: auto;
  border-radius: var(--radius);
  object-fit: contain;
  background: var(--c-white);
  padding: 5px;
}
.footer-logo-name {
  font-family: var(--font-heading);
  font-size: var(--text-base);
  font-weight: 800;
  color: var(--c-white);
}
.footer-tagline {
  font-size: var(--text-sm);
  color: rgba(255,255,255,0.40);
  line-height: 1.6;
  margin-bottom: var(--space-5);
}
.footer-contact-row {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-sm);
  color: rgba(255,255,255,0.55);
  margin-bottom: var(--space-3);
}
.footer-contact-row svg { width: 15px; height: 15px; flex-shrink: 0; color: var(--c-cyan); }
.footer-contact-row a { color: rgba(255,255,255,0.65); }
.footer-contact-row a:hover { color: var(--c-cyan-light); }

.footer-social {
  display: flex;
  gap: var(--space-3);
  margin-top: var(--space-5);
}
.footer-social-link {
  width: 36px;
  height: 36px;
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: var(--radius);
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255,255,255,0.45);
  transition: all var(--transition);
}
.footer-social-link:hover {
  border-color: var(--c-cyan);
  color: var(--c-cyan);
  background: rgba(14,165,233,0.10);
}
.footer-social-link svg { width: 16px; height: 16px; }
.footer-social-link.placeholder {
  opacity: 0.4;
  cursor: default;
}

.footer h4 {
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.35);
  margin-bottom: var(--space-5);
}
.footer-links {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.footer-links a {
  font-size: var(--text-sm);
  color: rgba(255,255,255,0.55);
  transition: color var(--transition);
}
.footer-links a:hover { color: var(--c-white); }

.footer-bottom {
  border-top: 1px solid rgba(255,255,255,0.07);
  padding: var(--space-5) 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-4);
}
.footer-bottom p { font-size: var(--text-xs); color: rgba(255,255,255,0.28); margin: 0; }
.footer-bottom a { font-size: var(--text-xs); color: rgba(255,255,255,0.40); }
.footer-bottom a:hover { color: var(--c-cyan-light); }

/* ============================================================
   21. SKIP LINK (accessibility)
   ============================================================ */
.skip-link {
  position: absolute;
  top: -100px;
  left: var(--space-6);
  background: var(--c-cyan);
  color: var(--c-navy-deep);
  font-weight: 700;
  padding: var(--space-3) var(--space-5);
  border-radius: var(--radius);
  z-index: 9999;
  font-size: var(--text-sm);
}
.skip-link:focus { top: var(--space-4); }

/* ============================================================
   22. THANK YOU / 404 PAGES
   ============================================================ */
.full-page-center {
  min-height: 70vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: var(--space-20) var(--space-6);
}
.success-icon {
  width: 88px;
  height: 88px;
  background: var(--c-cyan);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto var(--space-6);
  box-shadow: 0 0 0 16px rgba(14,165,233,0.10);
  color: var(--c-navy-deep);
}
.success-icon svg { width: 40px; height: 40px; }
.error-icon {
  font-size: 5rem;
  line-height: 1;
  margin-bottom: var(--space-6);
}

/* ============================================================
   23. PRIVACY POLICY PROSE
   ============================================================ */
.prose { max-width: var(--container-sm); margin: 0 auto; }
.prose h2 {
  font-size: var(--text-xl);
  margin: var(--space-10) 0 var(--space-4);
  padding-top: var(--space-8);
  border-top: 1px solid var(--c-silver-mid);
}
.prose h2:first-child { border-top: none; margin-top: 0; padding-top: 0; }
.prose p { color: var(--c-text-mid); margin-bottom: var(--space-4); }
.prose ul {
  list-style: disc;
  padding-left: var(--space-6);
  margin-bottom: var(--space-4);
  color: var(--c-text-mid);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.prose ul li { font-size: var(--text-sm); }
.prose .notice {
  background: var(--c-cyan-pale);
  border: 1px solid var(--c-cyan-border);
  border-radius: var(--radius);
  padding: var(--space-5) var(--space-6);
  margin-bottom: var(--space-6);
  font-size: var(--text-sm);
  color: var(--c-navy);
}

/* ============================================================
   24. WHATSAPP BUTTON (floating)
   ============================================================ */
.whatsapp-float {
  position: fixed;
  bottom: var(--space-6);
  right: var(--space-6);
  z-index: 800;
  width: 54px;
  height: 54px;
  background: #25D366;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 16px rgba(37,211,102,0.40);
  transition: transform var(--transition), box-shadow var(--transition);
  text-decoration: none;
  color: var(--c-white);
}
.whatsapp-float:hover {
  transform: scale(1.08);
  box-shadow: 0 6px 24px rgba(37,211,102,0.50);
  color: var(--c-white);
}
.whatsapp-float svg { width: 28px; height: 28px; }

/* ============================================================
   25. UTILITIES
   ============================================================ */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}
.rounded    { border-radius: var(--radius); }
.rounded-lg { border-radius: var(--radius-lg); }
.overflow-hidden { overflow: hidden; }
.relative { position: relative; }
.sticky-top { position: sticky; top: 0; z-index: 100; }
.w-full { width: 100%; }
.max-w-sm { max-width: 560px; }
.hidden { display: none !important; }

/* ============================================================
   26. RESPONSIVE BREAKPOINTS
   ============================================================ */

/* ── Tablet ─ max 1024px ── */
@media (max-width: 1024px) {
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .process-row { grid-template-columns: repeat(3, 1fr); }
  .process-row::before { display: none; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .split { gap: var(--space-12); }
}

/* ── Nav collapses to hamburger before the links crowd the CTA ── */
@media (max-width: 1120px) {
  .nav-links, .nav-actions { display: none; }
  .nav-hamburger { display: flex; }
}

/* ── Mobile ─ max 768px ── */
@media (max-width: 768px) {
  :root {
    --space-24: 64px;
    --space-20: 52px;
    --space-16: 48px;
  }

  /* Nav */
  .nav-inner { height: 70px; }
  .nav-logo img { height: 52px; }

  /* Hero */
  .hero { padding: var(--space-16) 0 var(--space-12); }
  .hero .split { grid-template-columns: 1fr; gap: var(--space-8); }
  .hero-visual { display: none; }

  /* Grids */
  .grid-2, .grid-3, .grid-4, .split, .split.flipped, .pathway-grid { grid-template-columns: 1fr; }
  .process-row { grid-template-columns: repeat(2, 1fr); }

  /* Form */
  .form-grid { grid-template-columns: 1fr; }
  .form-grid .full { grid-column: auto; }

  /* Footer */
  .footer-grid { grid-template-columns: 1fr 1fr; }

  /* Buttons */
  .hero-actions { flex-direction: column; align-items: flex-start; }
  .cta-section-actions { flex-direction: column; align-items: center; }
  .hero-actions .btn, .cta-section-actions .btn { width: 100%; max-width: 340px; justify-content: center; }

  /* Highlight box */
  .highlight-box { padding: var(--space-8); }
}

/* ── Small mobile ─ max 480px ── */
@media (max-width: 480px) {
  .container { padding: 0 var(--space-4); }
  .footer-grid { grid-template-columns: 1fr; }
  .footer-bottom { flex-direction: column; text-align: center; }
  .process-row { grid-template-columns: 1fr; }
  .value-strip-inner { gap: var(--space-6); }
  .service-card { flex-direction: column; gap: var(--space-4); }
  .hero-actions .btn { max-width: 100%; }
}

/* ── Focus / print ── */
@media print {
  .nav, .footer, .whatsapp-float, .cta-section { display: none; }
  body { color: #000; background: #fff; }
}

/* ── Reduced motion ── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  html { scroll-behavior: auto; }
}

/* ============================================================
   27. BRIGHT DESIGN SYSTEM (v2), lighter, more human, varied
   ============================================================ */

/* ---- 27.1 Light hero ---- */
.hero-light {
  position: relative;
  overflow: hidden;
  padding: var(--space-24) 0 var(--space-20);
  background:
    radial-gradient(ellipse 70% 90% at 85% 10%, rgba(14,165,233,0.10) 0%, transparent 55%),
    radial-gradient(ellipse 60% 70% at 0% 100%, rgba(14,165,233,0.06) 0%, transparent 50%),
    linear-gradient(180deg, var(--c-white) 0%, var(--c-off-white) 100%);
}
.hero-light .split { align-items: center; gap: var(--space-16); }
.hero-light .hero-content { max-width: 600px; }

.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--c-cyan);
  margin-bottom: var(--space-5);
  background: var(--c-cyan-pale);
  border: 1px solid var(--c-cyan-border);
  padding: 6px 14px;
  border-radius: var(--radius-full);
}
.hero-badge .dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--c-cyan);
  box-shadow: 0 0 0 4px rgba(14,165,233,0.18);
}
.hero-light h1 {
  color: var(--c-text-dark);
  letter-spacing: -0.02em;
  margin-bottom: var(--space-5);
}
.hero-light h1 .accent {
  color: var(--c-cyan);
  background: linear-gradient(120deg, var(--c-cyan) 0%, var(--c-navy-light) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.hero-light .hero-body {
  color: var(--c-text-mid);
  font-size: var(--text-lg);
  margin-bottom: var(--space-7);
  max-width: 520px;
}
.hero-light .hero-actions { margin-bottom: var(--space-6); }

/* Inline trust chips under hero CTAs */
.hero-trust {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-5);
  margin-top: var(--space-2);
}
.hero-trust-item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--c-text-mid);
}
.hero-trust-item svg { width: 18px; height: 18px; color: var(--c-cyan); flex-shrink: 0; }

/* ---- 27.2 Hero "shortlist" panel (homepage hero right) ---- */
.shortlist-card {
  width: 100%;
  max-width: 420px;
  margin-left: auto;
  background: var(--c-white);
  border: 1px solid var(--c-silver-mid);
  border-radius: var(--radius-xl);
  box-shadow: 0 24px 60px rgba(15,23,42,0.12), 0 8px 24px rgba(15,23,42,0.06);
  padding: var(--space-6);
}
.shortlist-head {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding-bottom: var(--space-5);
  border-bottom: 1px solid var(--c-silver-mid);
  margin-bottom: var(--space-5);
}
.shortlist-logo {
  width: 44px; height: 44px;
  border-radius: var(--radius);
  object-fit: contain;
  flex-shrink: 0;
}
.shortlist-head-text { display: flex; flex-direction: column; flex: 1; line-height: 1.25; }
.shortlist-title { font-family: var(--font-heading); font-weight: 800; font-size: var(--text-base); color: var(--c-text-dark); }
.shortlist-sub { font-size: var(--text-xs); color: var(--c-text-light); }
.shortlist-status {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: var(--text-xs); font-weight: 700;
  color: var(--c-success);
  background: #ECFDF5; border: 1px solid #A7F3D0;
  padding: 4px 10px; border-radius: var(--radius-full);
}
.shortlist-status .status-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--c-success); }

.shortlist-row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3);
  border-radius: var(--radius);
  transition: background var(--transition);
}
.shortlist-row + .shortlist-row { margin-top: var(--space-1); }
.shortlist-row:hover { background: var(--c-off-white); }
.sl-avatar {
  width: 42px; height: 42px; flex-shrink: 0;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-heading); font-weight: 800; font-size: var(--text-sm);
  color: var(--c-navy);
  background: linear-gradient(135deg, var(--c-cyan-pale), #EFF6FF);
  border: 1px solid var(--c-cyan-border);
}
.sl-info { flex: 1; display: flex; flex-direction: column; line-height: 1.3; min-width: 0; }
.sl-info strong { font-size: var(--text-sm); color: var(--c-text-dark); font-weight: 700; }
.sl-info span { font-size: var(--text-xs); color: var(--c-text-light); }
.sl-badge {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 0.7rem; font-weight: 700;
  color: var(--c-cyan);
  background: var(--c-cyan-pale);
  padding: 4px 9px; border-radius: var(--radius-full);
  flex-shrink: 0;
}
.sl-badge svg { width: 12px; height: 12px; }

.shortlist-foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: var(--space-5);
  padding-top: var(--space-4);
  border-top: 1px solid var(--c-silver-mid);
  font-size: var(--text-xs);
  color: var(--c-text-light);
}
.shortlist-foot strong { color: var(--c-navy); font-weight: 800; }

/* ---- 27.3 Section eyebrow centered helper already exists; add light intro ---- */
.intro-band {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: var(--space-12);
  align-items: center;
}
.intro-band .lead-text { font-size: var(--text-xl); color: var(--c-text-dark); font-weight: 500; line-height: 1.5; }
.intro-stat-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); }
.intro-stat {
  background: var(--c-white);
  border: 1px solid var(--c-silver-mid);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
}
.intro-stat .ico {
  width: 40px; height: 40px; border-radius: var(--radius);
  background: var(--c-cyan-pale); color: var(--c-cyan);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: var(--space-3);
}
.intro-stat .ico svg { width: 20px; height: 20px; }
.intro-stat h4 { font-size: var(--text-base); margin-bottom: 4px; }
.intro-stat p { font-size: var(--text-xs); color: var(--c-text-light); margin: 0; }

/* ---- 27.4 Role grid with icon tiles ---- */
.role-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-4);
}
.role-tile {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  background: var(--c-white);
  border: 1px solid var(--c-silver-mid);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
}
.role-tile:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
  border-color: var(--c-cyan-border);
}
.role-tile-icon {
  width: 46px; height: 46px; flex-shrink: 0;
  border-radius: var(--radius);
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, var(--c-cyan-pale), #EFF6FF);
  color: var(--c-cyan);
}
.role-tile-icon svg { width: 22px; height: 22px; }
.role-tile h4 { font-size: var(--text-base); margin: 0 0 2px; }
.role-tile p { font-size: var(--text-xs); color: var(--c-text-light); margin: 0; }

/* ---- 27.5 Mini process preview (3 steps) ---- */
.mini-steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-6);
  counter-reset: ministep;
}
.mini-step {
  position: relative;
  padding: var(--space-8) var(--space-6);
  background: var(--c-white);
  border: 1px solid var(--c-silver-mid);
  border-radius: var(--radius-lg);
}
.mini-step-num {
  width: 40px; height: 40px;
  border-radius: var(--radius);
  background: var(--c-navy);
  color: var(--c-white);
  font-family: var(--font-heading);
  font-weight: 800;
  display: flex; align-items: center; justify-content: center;
  margin-bottom: var(--space-4);
}
.mini-step h3 { font-size: var(--text-lg); margin-bottom: var(--space-2); }
.mini-step p { font-size: var(--text-sm); color: var(--c-text-light); margin: 0; }
.mini-step-arrow {
  position: absolute;
  right: -18px; top: 50%;
  transform: translateY(-50%);
  color: var(--c-silver-dark);
  z-index: 2;
}
.mini-step-arrow svg { width: 22px; height: 22px; }

/* ---- 27.6 The HAPS Edge (bright value cards) ---- */
.edge-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-5);
}
.edge-card {
  background: var(--c-white);
  border: 1px solid var(--c-silver-mid);
  border-radius: var(--radius-lg);
  padding: var(--space-7) var(--space-6);
  border-top: 3px solid var(--c-cyan);
  transition: transform var(--transition), box-shadow var(--transition);
}
.edge-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.edge-card .ico {
  width: 48px; height: 48px; border-radius: 50%;
  background: var(--c-cyan-pale); color: var(--c-cyan);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: var(--space-4);
}
.edge-card .ico svg { width: 24px; height: 24px; }
.edge-card h3 { font-size: var(--text-lg); margin-bottom: var(--space-2); }
.edge-card p { font-size: var(--text-sm); color: var(--c-text-light); margin: 0; }

/* ---- 27.7 Follow / social section ---- */
.follow-band {
  background: linear-gradient(120deg, var(--c-navy) 0%, var(--c-navy-mid) 100%);
  border-radius: var(--radius-xl);
  padding: var(--space-12);
  text-align: center;
  position: relative;
  overflow: hidden;
}
.follow-band::after {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(ellipse 50% 70% at 50% 0%, rgba(14,165,233,0.18) 0%, transparent 60%);
  pointer-events: none;
}
.follow-band > * { position: relative; z-index: 1; }
.follow-band h2 { color: var(--c-white); margin-bottom: var(--space-3); }
.follow-band p { color: rgba(255,255,255,0.65); max-width: 440px; margin: 0 auto var(--space-8); }
.social-row {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: var(--space-4);
}
.social-btn {
  width: 52px; height: 52px;
  border-radius: var(--radius-lg);
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.14);
  display: flex; align-items: center; justify-content: center;
  color: rgba(255,255,255,0.85);
  transition: transform var(--transition), background var(--transition), color var(--transition), border-color var(--transition);
}
.social-btn:hover {
  transform: translateY(-4px);
  background: var(--c-cyan);
  border-color: var(--c-cyan);
  color: var(--c-navy-deep);
}
.social-btn svg { width: 24px; height: 24px; }

/* Social cards (contact page) */
.social-card-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: var(--space-3);
}
.social-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-5) var(--space-3);
  border: 1px solid var(--c-silver-mid);
  border-radius: var(--radius-lg);
  background: var(--c-white);
  color: var(--c-text-mid);
  font-size: var(--text-xs);
  font-weight: 600;
  text-align: center;
  transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition), color var(--transition);
}
.social-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
  border-color: var(--c-cyan);
  color: var(--c-navy);
}
.social-card .ico {
  width: 44px; height: 44px; border-radius: 50%;
  background: var(--c-cyan-pale); color: var(--c-cyan);
  display: flex; align-items: center; justify-content: center;
}
.social-card .ico svg { width: 22px; height: 22px; }

/* Footer social: upgrade to brand hover */
.footer-social-link:hover { background: var(--c-cyan); border-color: var(--c-cyan); color: var(--c-navy-deep); }

/* Mobile menu social row */
.nav-mobile-social {
  display: flex;
  gap: var(--space-3);
  margin-top: var(--space-5);
  padding-top: var(--space-5);
  border-top: 1px solid var(--c-silver-mid);
}
.nav-mobile-social a {
  width: 40px; height: 40px; padding: 0;
  border: 1px solid var(--c-silver-mid);
  border-radius: var(--radius);
  display: flex; align-items: center; justify-content: center;
  color: var(--c-text-light);
}
.nav-mobile-social a:hover { color: var(--c-cyan); border-color: var(--c-cyan); background: var(--c-cyan-pale); }
.nav-mobile-social a svg { width: 18px; height: 18px; }

/* ---- 27.8 Section intro centered max width ---- */
.section-header.center .section-subtitle { max-width: 620px; }

/* ---- 27.9 Responsive for v2 ---- */
@media (max-width: 1024px) {
  .role-grid { grid-template-columns: repeat(2, 1fr); }
  .edge-grid { grid-template-columns: repeat(2, 1fr); }
  .intro-band { grid-template-columns: 1fr; gap: var(--space-8); }
}
@media (max-width: 768px) {
  .hero-light { padding: var(--space-16) 0 var(--space-12); }
  .hero-light .split { grid-template-columns: 1fr; }
  .shortlist-card { margin: 0 auto; max-width: 100%; }
  .mini-steps { grid-template-columns: 1fr; gap: var(--space-4); }
  .mini-step-arrow { display: none; }
  .social-card-grid { grid-template-columns: repeat(2, 1fr); }
  .follow-band { padding: var(--space-8) var(--space-5); }
  .hero-trust { gap: var(--space-3) var(--space-5); }
}
@media (max-width: 480px) {
  .role-grid { grid-template-columns: 1fr; }
  .edge-grid { grid-template-columns: 1fr; }
  .social-card-grid { grid-template-columns: 1fr 1fr; }
  .social-row { gap: var(--space-3); }
}

/* ============================================================
   28. ACTIVITY, scroll reveal, stats strip, role marquee
   ============================================================ */

/* ---- 28.1 Scroll reveal ---- */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.6s var(--ease), transform 0.6s var(--ease);
  will-change: opacity, transform;
}
.reveal.is-visible { opacity: 1; transform: none; }
.reveal.d1 { transition-delay: 0.08s; }
.reveal.d2 { transition-delay: 0.16s; }
.reveal.d3 { transition-delay: 0.24s; }
.reveal.d4 { transition-delay: 0.32s; }

/* ---- 28.2 Stats strip ---- */
.stats-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-6);
}
.stat-item { text-align: center; padding: var(--space-4) var(--space-2); }
.stat-num {
  font-family: var(--font-heading);
  font-size: clamp(2rem, 4vw, 2.75rem);
  font-weight: 800;
  line-height: 1;
  color: var(--c-navy);
  letter-spacing: -0.02em;
}
.stat-num .unit { color: var(--c-cyan); }
.stat-label {
  margin-top: var(--space-2);
  font-size: var(--text-sm);
  color: var(--c-text-light);
  font-weight: 500;
}
.stat-divider { width: 1px; background: var(--c-silver-mid); }

/* ---- 28.3 Role marquee ---- */
.marquee {
  overflow: hidden;
  position: relative;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.marquee-track {
  display: inline-flex;
  gap: var(--space-3);
  white-space: nowrap;
  will-change: transform;
  animation: marquee-scroll 32s linear infinite;
}
.marquee:hover .marquee-track { animation-play-state: paused; }
@keyframes marquee-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
.marquee-pill {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 10px 18px;
  background: var(--c-white);
  border: 1px solid var(--c-silver-mid);
  border-radius: var(--radius-full);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--c-navy);
  flex-shrink: 0;
}
.marquee-pill .d { width: 7px; height: 7px; border-radius: 50%; background: var(--c-cyan); flex-shrink: 0; }

@media (max-width: 768px) {
  .stats-strip { grid-template-columns: 1fr 1fr; gap: var(--space-4); }
  .stat-divider { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .marquee-track { animation: none; }
  .reveal { opacity: 1; transform: none; transition: none; }
}

/* ---- 28.4 Photo band (graceful fallback to navy if image missing) ---- */
.photo-band {
  position: relative;
  padding: var(--space-24) 0;
  background-color: var(--c-navy);
  background-image:
    linear-gradient(100deg, rgba(7,20,40,0.92) 0%, rgba(7,20,40,0.72) 55%, rgba(7,20,40,0.55) 100%),
    var(--photo-url, none);
  background-size: cover;
  background-position: center;
  overflow: hidden;
}
.photo-band-inner { position: relative; z-index: 1; }
.photo-band-text { max-width: 540px; }
.photo-band-text h2 { color: var(--c-white); margin-bottom: var(--space-4); }
.photo-band-text p { color: rgba(255,255,255,0.78); font-size: var(--text-lg); margin-bottom: var(--space-7); }
.photo-band-actions { display: flex; gap: var(--space-4); flex-wrap: wrap; }
@media (max-width: 768px) {
  .photo-band { padding: var(--space-16) 0; }
  .photo-band-actions .btn { width: 100%; max-width: 340px; justify-content: center; }
}

/* ---- 28.5 Audience cards (Built for Employers and Talent) ---- */
.audience-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-6);
}
.audience-card {
  position: relative;
  min-height: 460px;
  border-radius: var(--radius-xl);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  box-shadow: var(--shadow-lg);
  isolation: isolate;
  cursor: pointer;
  transition: box-shadow var(--transition), transform var(--transition);
}
.audience-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-xl); }
.audience-media {
  position: absolute;
  inset: 0;
  z-index: -2;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  transition: transform 0.5s var(--ease);
}
.audience-card::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}
.audience-card.employers { background: var(--c-navy); }
.audience-card.employers::after {
  background: linear-gradient(to top, rgba(7,20,40,0.94) 0%, rgba(7,20,40,0.60) 45%, rgba(7,20,40,0.25) 100%);
}
.audience-card.talent { background: #0B5C86; }
.audience-card.talent::after {
  background: linear-gradient(to top, rgba(11,60,92,0.92) 0%, rgba(12,127,184,0.50) 48%, rgba(14,165,233,0.15) 100%);
}
.audience-card:hover .audience-media { transform: scale(1.05); }
.audience-card:focus-within {
  outline: 3px solid var(--c-cyan);
  outline-offset: 3px;
}

.audience-tags {
  position: absolute;
  top: var(--space-5);
  right: var(--space-5);
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;
  justify-content: flex-end;
  max-width: 60%;
  z-index: 1;
}
.audience-tags span {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--c-white);
  background: rgba(14,165,233,0.22);
  border: 1px solid rgba(56,189,248,0.45);
  padding: 4px 10px;
  border-radius: var(--radius-full);
  backdrop-filter: blur(4px);
}

.audience-body {
  padding: var(--space-8);
  color: var(--c-white);
}
/* Reassurance line */
.audience-note {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--c-cyan-light) !important;
  margin-bottom: var(--space-6) !important;
}
.audience-note svg { width: 16px; height: 16px; flex-shrink: 0; }

/* Stretched link: the primary CTA covers the whole card for one-click conversion */
.audience-cta::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
}
.audience-cta { position: static; }
.audience-eyebrow {
  display: inline-block;
  font-family: var(--font-heading);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--c-cyan-light);
  margin-bottom: var(--space-3);
}
.audience-body h3 {
  color: var(--c-white);
  font-size: var(--text-3xl);
  margin-bottom: var(--space-3);
}
.audience-body p {
  color: rgba(255,255,255,0.85);
  font-size: var(--text-base);
  line-height: 1.6;
  margin-bottom: var(--space-6);
  max-width: 30rem;
}
.audience-actions {
  display: flex;
  align-items: center;
  gap: var(--space-5);
  flex-wrap: wrap;
}
.audience-link {
  position: relative;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 600;
  font-size: var(--text-sm);
  color: var(--c-white);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: rgba(255,255,255,0.4);
}
.audience-link:hover { color: var(--c-cyan-light); text-decoration-color: var(--c-cyan-light); }

@media (max-width: 768px) {
  .audience-grid { grid-template-columns: 1fr; gap: var(--space-5); }
  .audience-card { min-height: 400px; }
  .audience-body { padding: var(--space-6); }
  .audience-actions { flex-direction: column; align-items: stretch; }
  .audience-actions .btn { width: 100%; justify-content: center; }
  .audience-link { justify-content: center; }
}

@media (prefers-reduced-motion: reduce) {
  .audience-card:hover .audience-media { transform: none; }
}

/* ============================================================
   29. ROLE CATEGORIES, PROCESS JOURNEY, COUNTRY SELECTOR
   ============================================================ */

/* ---- 29.1 Role category groups (tech / non-tech) ---- */
.role-cats { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-6); }
.role-cat-group {
  background: var(--c-white);
  border: 1px solid var(--c-silver-mid);
  border-radius: var(--radius-xl);
  padding: var(--space-8);
}
.role-cat-group.tech { border-top: 3px solid var(--c-cyan); }
.role-cat-group.nontech { border-top: 3px solid var(--c-navy); }
.role-cat-head { display: flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-5); }
.role-cat-head .ico {
  width: 42px; height: 42px; border-radius: var(--radius);
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
  background: var(--c-cyan-pale); color: var(--c-cyan);
}
.role-cat-head .ico svg { width: 22px; height: 22px; }
.role-cat-head h3 { font-size: var(--text-xl); margin: 0; }
.role-cat-head p { font-size: var(--text-xs); color: var(--c-text-light); margin: 0; }
.role-cat-tags { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.role-cat-tags .tag { padding: 6px 12px; font-size: var(--text-xs); }

/* ---- 29.2 Process journey (How It Works) ---- */
.journey { max-width: 820px; margin: 0 auto; position: relative; }
.journey::before {
  content: ""; position: absolute; left: 31px; top: 28px; bottom: 28px; width: 2px;
  background: linear-gradient(to bottom, var(--c-cyan), rgba(14,165,233,0.15));
}
.journey-step {
  position: relative; display: grid; grid-template-columns: 64px 1fr;
  gap: var(--space-6); margin-bottom: var(--space-6);
}
.journey-node {
  width: 64px; height: 64px; border-radius: 50%;
  background: var(--c-white); border: 2.5px solid var(--c-cyan);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-heading); font-weight: 800; font-size: var(--text-xl);
  color: var(--c-navy); position: relative; z-index: 1;
  box-shadow: 0 0 0 6px var(--c-off-white);
}
.journey-card {
  background: var(--c-white); border: 1px solid var(--c-silver-mid);
  border-radius: var(--radius-lg); padding: var(--space-6) var(--space-7);
  transition: box-shadow var(--transition), border-color var(--transition);
}
.journey-card:hover { box-shadow: var(--shadow-md); border-color: var(--c-cyan-border); }
.journey-card .jstep-head { display: flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-2); }
.journey-card .jstep-ico { width: 34px; height: 34px; border-radius: var(--radius-sm); background: var(--c-cyan-pale); color: var(--c-cyan); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.journey-card .jstep-ico svg { width: 18px; height: 18px; }
.journey-card h3 { font-size: var(--text-lg); margin: 0; }
.journey-card p { font-size: var(--text-sm); color: var(--c-text-light); margin: 0; }
.journey-note {
  max-width: 820px; margin: var(--space-8) auto 0; text-align: center;
  font-size: var(--text-sm); color: var(--c-text-light);
  background: var(--c-cyan-pale); border: 1px solid var(--c-cyan-border);
  border-radius: var(--radius); padding: var(--space-4) var(--space-6);
}

/* ---- 29.3 Country selector (market chips + panel) ---- */
.market-grid { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: var(--space-10); align-items: start; }
.country-chips { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.country-chip {
  display: inline-flex; align-items: center; gap: var(--space-2);
  padding: 8px 14px 8px 8px;
  border: 1.5px solid var(--c-silver-mid); border-radius: var(--radius-full);
  background: var(--c-white); color: var(--c-navy);
  font-family: var(--font-body); font-size: var(--text-sm); font-weight: 600;
  cursor: pointer; transition: all var(--transition);
}
.country-chip:hover { border-color: var(--c-cyan); background: var(--c-cyan-pale); }
.country-chip:focus-visible { outline: 3px solid var(--c-cyan); outline-offset: 2px; }
.country-chip.is-selected { background: var(--c-navy); border-color: var(--c-navy); color: var(--c-white); }
.country-flag {
  width: 28px; height: 28px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: var(--c-navy); color: var(--c-white);
  font-family: var(--font-heading); font-size: 0.62rem; font-weight: 800; letter-spacing: 0.02em;
}
.country-chip.is-selected .country-flag { background: var(--c-cyan); color: var(--c-navy-deep); }
.market-panel {
  background: var(--c-white); border: 1px solid var(--c-silver-mid);
  border-radius: var(--radius-xl); padding: var(--space-8);
  box-shadow: var(--shadow-sm);
}
.market-panel .eyebrow { color: var(--c-cyan); font-weight: 700; font-size: var(--text-xs); letter-spacing: 0.08em; text-transform: uppercase; }
.market-panel h3 { font-size: var(--text-xl); margin: var(--space-3) 0 var(--space-3); }
.market-panel p { font-size: var(--text-sm); color: var(--c-text-mid); margin-bottom: var(--space-6); }

/* ---- 29.4 Global talent mini band (Home) ---- */
.globe-band {
  display: grid; grid-template-columns: 0.8fr 1.2fr; gap: var(--space-10); align-items: center;
}
.globe-visual { position: relative; }
.globe-visual svg { width: 100%; height: auto; max-width: 320px; }

/* ---- 29.5 Responsive ---- */
@media (max-width: 900px) {
  .market-grid { grid-template-columns: 1fr; gap: var(--space-8); }
  .globe-band { grid-template-columns: 1fr; gap: var(--space-8); }
  .globe-visual { order: -1; max-width: 260px; margin: 0 auto; }
}
@media (max-width: 768px) {
  .role-cats { grid-template-columns: 1fr; }
  .journey-step { grid-template-columns: 52px 1fr; gap: var(--space-4); }
  .journey::before { left: 25px; }
  .journey-node { width: 52px; height: 52px; font-size: var(--text-lg); }
  .journey-card .jstep-ico { display: none; }
}


/* ---- 27.1a Homepage hero redesign ---- */
.hero-split {
  align-items: center;
  gap: var(--space-16);
}
.hero-light .hero-content {
  max-width: 620px;
}
.hero-light .hero-body {
  max-width: 660px;
}
.hero-visual {
  flex: 1 1 520px;
}
.talent-network-card {
  position: relative;
  min-height: 560px;
  border-radius: 32px;
  padding: 32px;
  background:
    radial-gradient(circle at 20% 18%, rgba(14,165,233,0.16), transparent 28%),
    radial-gradient(circle at 82% 28%, rgba(59,130,246,0.18), transparent 28%),
    linear-gradient(180deg, rgba(255,255,255,0.92), rgba(240,248,255,0.98));
  border: 1px solid rgba(56, 189, 248, 0.20);
  box-shadow: 0 30px 70px rgba(15, 23, 42, 0.10);
  overflow: hidden;
}
.network-grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(14,165,233,0.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(14,165,233,0.07) 1px, transparent 1px);
  background-size: 34px 34px;
  mask-image: linear-gradient(180deg, rgba(0,0,0,.8), rgba(0,0,0,.35));
  pointer-events: none;
}
.network-center {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 230px;
  height: 230px;
  transform: translate(-50%, -50%);
  border-radius: 999px;
  background: linear-gradient(180deg, #0f172a 0%, #12315d 100%);
  color: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 26px;
  box-shadow:
    0 0 0 18px rgba(56, 189, 248, 0.08),
    0 0 0 42px rgba(56, 189, 248, 0.05);
  z-index: 3;
}
.network-kicker {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 8px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(125, 211, 252, 0.95);
}
.network-center strong {
  display: block;
  font-size: 30px;
  line-height: 1.1;
  margin-bottom: 10px;
}
.network-sub {
  display: block;
  font-size: 14px;
  line-height: 1.5;
  color: rgba(226, 232, 240, 0.94);
}
.network-pill {
  position: absolute;
  z-index: 4;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 12px 18px;
  border-radius: 999px;
  background: rgba(255,255,255,0.95);
  border: 1px solid rgba(56, 189, 248, 0.20);
  box-shadow: 0 12px 24px rgba(15, 23, 42, 0.08);
  font-weight: 700;
  font-size: 14px;
  color: #0f172a;
  white-space: nowrap;
}
.pill-tech { top: 52px; left: 26px; }
.pill-ops { top: 70px; right: 28px; }
.pill-support { top: 208px; right: 6px; }
.pill-sales { bottom: 194px; right: 18px; }
.pill-admin { bottom: 70px; left: 42px; }
.pill-marketing { top: 214px; left: 10px; }

.network-link {
  position: absolute;
  z-index: 2;
  height: 2px;
  background: linear-gradient(90deg, rgba(56,189,248,0), rgba(56,189,248,0.65), rgba(56,189,248,0));
  transform-origin: left center;
}
.line-a { top: 130px; left: 172px; width: 130px; transform: rotate(25deg); }
.line-b { top: 125px; right: 190px; width: 124px; transform: rotate(-24deg); }
.line-c { top: 250px; left: 142px; width: 126px; transform: rotate(-8deg); }
.line-d { top: 252px; right: 140px; width: 132px; transform: rotate(8deg); }
.line-e { bottom: 133px; left: 182px; width: 112px; transform: rotate(-28deg); }
.line-f { bottom: 142px; right: 170px; width: 118px; transform: rotate(31deg); }

.network-footer {
  position: absolute;
  left: 28px;
  right: 28px;
  bottom: 28px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  z-index: 4;
}
.hero-mini-card {
  background: rgba(255,255,255,0.88);
  border: 1px solid rgba(56, 189, 248, 0.18);
  border-radius: 22px;
  padding: 18px 18px 16px;
  box-shadow: 0 16px 28px rgba(15, 23, 42, 0.07);
}
.hero-mini-card strong {
  display: block;
  margin-bottom: 6px;
  color: #0f172a;
  font-size: 17px;
}
.hero-mini-card p {
  margin: 0;
  color: #475569;
  font-size: 14px;
  line-height: 1.6;
}
.mini-label {
  display: inline-block;
  margin-bottom: 8px;
  color: #0284c7;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
}

@media (max-width: 1100px) {
  .talent-network-card {
    min-height: 520px;
    padding: 26px;
  }
  .network-footer {
    left: 20px;
    right: 20px;
    bottom: 20px;
  }
  .network-center {
    width: 210px;
    height: 210px;
  }
  .network-center strong {
    font-size: 27px;
  }
}

@media (max-width: 900px) {
  .hero-split {
    gap: var(--space-10);
  }
  .hero-visual {
    width: 100%;
  }
  .talent-network-card {
    min-height: auto;
    padding: 24px;
  }
  .network-center {
    position: relative;
    top: auto;
    left: auto;
    transform: none;
    margin: 0 auto 18px;
    width: 100%;
    max-width: 320px;
    height: auto;
    min-height: 168px;
  }
  .network-pill,
  .network-link {
    position: static;
  }
  .network-pill {
    margin: 0;
    white-space: normal;
    text-align: center;
    min-height: 44px;
  }
  .talent-network-card {
    display: flex;
    flex-direction: column;
    gap: 14px;
  }
  .network-footer {
    position: static;
    grid-template-columns: 1fr;
    margin-top: 6px;
  }
  .talent-network-card .network-pill {
    display: inline-flex;
  }
  .talent-network-card {
    align-items: stretch;
  }
  .talent-network-card::after {
    content: "";
    display: block;
    clear: both;
  }
}

@media (max-width: 900px) {
  .talent-network-card {
    padding-bottom: 24px;
  }
  .talent-network-card .network-pill {
    width: calc(50% - 8px);
  }
  .hero-visual .talent-network-card {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
  }
  .hero-visual .network-grid {
    inset: 0;
  }
  .hero-visual .network-center,
  .hero-visual .network-footer {
    width: 100%;
  }
  .hero-visual .network-pill {
    order: 3;
  }
}

@media (max-width: 640px) {
  .hero-light {
    padding-top: var(--space-18);
  }
  .network-center strong {
    font-size: 24px;
  }
  .hero-visual .talent-network-card .network-pill {
    width: 100%;
  }
  .hero-actions {
    flex-direction: column;
  }
  .hero-actions .btn {
    width: 100%;
    justify-content: center;
  }
}


/* ---- 27.1b Hero visual sizing fix ----
   The visual is a flex child made mostly of absolutely positioned elements.
   Give the card an explicit width so it cannot collapse into a thin strip. */
.hero-light .hero-visual {
  min-width: 0;
  width: 100%;
  max-width: 540px;
  justify-self: stretch;
}
.hero-light .talent-network-card {
  width: 100%;
  max-width: 540px;
  margin-left: auto;
  flex: 0 0 auto;
}
@media (max-width: 900px) {
  .hero-light .hero-visual {
    max-width: none;
    width: 100%;
  }
  .hero-light .talent-network-card {
    max-width: none;
    width: 100%;
    margin-left: 0;
  }
}


/* ---- 27.1c Homepage talent visual overlap correction ----
   Keeps the central network graphic and bottom summary as separate visual zones. */
.hero-light .talent-network-card {
  min-height: 600px;
}

.hero-light .network-center {
  top: 40%;
}

.hero-light .pill-tech {
  top: 34px;
  left: 26px;
}
.hero-light .pill-ops {
  top: 52px;
  right: 28px;
}
.hero-light .pill-marketing {
  top: 190px;
  left: 10px;
}
.hero-light .pill-support {
  top: 188px;
  right: 8px;
}
.hero-light .pill-sales {
  right: 24px;
  bottom: 174px;
}
.hero-light .pill-admin {
  left: 26px;
  bottom: 174px;
}

.hero-light .line-a { top: 112px; left: 172px; }
.hero-light .line-b { top: 120px; right: 190px; }
.hero-light .line-c { top: 242px; left: 142px; }
.hero-light .line-d { top: 240px; right: 140px; }
.hero-light .line-e { bottom: 206px; left: 182px; }
.hero-light .line-f { bottom: 210px; right: 170px; }

.network-summary {
  position: absolute;
  z-index: 5;
  left: 28px;
  right: 28px;
  bottom: 28px;
  min-height: 82px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}
.network-summary-item {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  padding: 14px 16px;
  border: 1px solid rgba(56, 189, 248, 0.22);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 12px 26px rgba(15, 23, 42, 0.08);
}
.network-summary-item > span:last-child {
  display: flex;
  min-width: 0;
  flex-direction: column;
}
.network-summary-item strong {
  color: var(--c-text-dark);
  font-size: 14px;
  line-height: 1.25;
}
.network-summary-item small {
  display: block;
  margin-top: 3px;
  color: var(--c-text-light);
  font-size: 12px;
  line-height: 1.35;
}
.network-summary-icon {
  display: grid;
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  place-items: center;
  color: var(--c-cyan);
  border-radius: 10px;
  background: var(--c-cyan-pale);
}
.network-summary-icon svg {
  width: 19px;
  height: 19px;
}

@media (max-width: 1100px) and (min-width: 901px) {
  .hero-light .talent-network-card {
    min-height: 620px;
  }
  .hero-light .network-summary {
    left: 20px;
    right: 20px;
    bottom: 20px;
  }
  .hero-light .network-center {
    top: 39%;
  }
  .hero-light .pill-sales,
  .hero-light .pill-admin {
    bottom: 184px;
  }
}

@media (max-width: 900px) {
  .hero-light .talent-network-card {
    min-height: auto;
  }
  .hero-light .network-summary {
    position: static;
    width: 100%;
    grid-template-columns: 1fr;
    margin-top: 4px;
  }
  .hero-light .network-center {
    top: auto;
  }
}


/* ---- 27.1d Final talent-network layout polish ----
   Keeps every role label outside the central circle on desktop,
   with a simple two-column layout and no decorative lines crossing text. */
.hero-light .talent-network-card {
  min-height: 580px;
  padding: 28px;
}

.hero-light .network-center {
  top: 39%;
  width: 182px;
  height: 182px;
  padding: 22px;
  box-shadow:
    0 0 0 14px rgba(56, 189, 248, 0.08),
    0 0 0 32px rgba(56, 189, 248, 0.05);
}
.hero-light .network-center strong {
  font-size: 26px;
}
.hero-light .network-sub {
  font-size: 13px;
}
.hero-light .network-kicker {
  font-size: 10px;
  margin-bottom: 6px;
}

/* Remove the thin route-lines, which were decorative but could cross labels. */
.hero-light .network-link {
  display: none;
}

/* Fixed-width side labels form two clean vertical columns around the centre. */
.hero-light .network-pill {
  width: 130px;
  min-height: 44px;
  padding: 9px 10px;
  border-radius: 16px;
  font-size: 13px;
  line-height: 1.2;
  white-space: normal;
  text-align: center;
}
.hero-light .pill-tech {
  top: 30px;
  left: 20px;
}
.hero-light .pill-ops {
  top: 30px;
  right: 20px;
}
.hero-light .pill-marketing {
  top: 206px;
  left: 20px;
}
.hero-light .pill-support {
  top: 206px;
  right: 20px;
}
.hero-light .pill-admin {
  bottom: 148px;
  left: 20px;
}
.hero-light .pill-sales {
  bottom: 148px;
  right: 20px;
}

/* A compact bottom strip stays clear of all role labels. */
.hero-light .network-summary {
  left: 20px;
  right: 20px;
  bottom: 20px;
  min-height: 94px;
  gap: 12px;
}
.hero-light .network-summary-item {
  padding: 12px 14px;
  border-radius: 16px;
}
.hero-light .network-summary-item strong {
  font-size: 13px;
}
.hero-light .network-summary-item small {
  font-size: 11px;
}
.hero-light .network-summary-icon {
  width: 32px;
  height: 32px;
  flex-basis: 32px;
}

@media (max-width: 900px) {
  .hero-light .talent-network-card {
    min-height: auto;
  }
  .hero-light .network-center {
    position: relative;
    top: auto;
    left: auto;
    width: 100%;
    max-width: 320px;
    height: auto;
    min-height: 168px;
    margin: 0 auto 18px;
    transform: none;
  }
  .hero-light .network-pill,
  .hero-light .pill-tech,
  .hero-light .pill-ops,
  .hero-light .pill-marketing,
  .hero-light .pill-support,
  .hero-light .pill-admin,
  .hero-light .pill-sales {
    position: static;
    width: calc(50% - 8px);
    min-height: 44px;
  }
  .hero-light .network-summary {
    position: static;
    width: 100%;
    min-height: auto;
    margin-top: 4px;
    grid-template-columns: 1fr;
  }
}
@media (max-width: 640px) {
  .hero-light .network-pill,
  .hero-light .pill-tech,
  .hero-light .pill-ops,
  .hero-light .pill-marketing,
  .hero-light .pill-support,
  .hero-light .pill-admin,
  .hero-light .pill-sales {
    width: 100%;
  }
}





/* Header/footer use the exact dominant HAPS background shade from the shared images. */
.nav,
.footer,
.nav-mobile {
  background: #001030 !important;
}

.nav {
  border-bottom: 2px solid #19B7F5 !important;
  box-shadow: 0 10px 24px rgba(0,16,48,0.22) !important;
}

.nav::after {
  height: 0 !important;
  background: transparent !important;
}

/* Logo: no white box, no separate shade, no glow mismatch. */
.nav-logo img,
.footer-logo img,
.footer-brand img,
.footer .footer-logo img,
.footer .footer-brand img {
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  padding: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
}

/* Navigation text on dark HAPS navy. */
.nav-links a {
  color: rgba(232,238,247,0.88) !important;
}

.nav-links a:hover {
  color: #FFFFFF !important;
  background: rgba(25,183,245,0.12) !important;
}

.nav-links a[aria-current="page"] {
  color: #001030 !important;
  background: #E8F7FF !important;
  box-shadow: none !important;
}

.nav-hamburger span {
  background: #E8F7FF !important;
}

.nav-mobile {
  border-top: 1px solid rgba(25,183,245,0.28) !important;
}

.nav-mobile a {
  color: rgba(232,238,247,0.88) !important;
  border-bottom-color: rgba(232,238,247,0.12) !important;
}

/* Buttons use the HAPS cyan/blue highlight from the reference images. */
.btn-primary,
.nav-actions .btn-primary,
.nav .btn-primary {
  background: linear-gradient(135deg, #19B7F5 0%, #0678C9 100%) !important;
  border-color: #19B7F5 !important;
  color: #001030 !important;
  box-shadow: 0 10px 22px rgba(25,183,245,0.24) !important;
}

.btn-primary:hover,
.nav-actions .btn-primary:hover {
  filter: brightness(1.03);
  box-shadow: 0 14px 28px rgba(25,183,245,0.30) !important;
}

.btn-outline {
  border-color: #D8E6F2 !important;
  color: #001030 !important;
  background: rgba(255,255,255,0.88) !important;
}

.btn-outline:hover {
  border-color: #19B7F5 !important;
  background: #E8F7FF !important;
}

/* Homepage hero: bright recruitment feel, but aligned with HAPS navy/cyan/silver. */
.hero-light {
  background:
    radial-gradient(ellipse 56% 72% at 86% 12%, rgba(25,183,245,0.14), transparent 58%),
    radial-gradient(ellipse 42% 52% at 10% 10%, rgba(0,16,48,0.06), transparent 50%),
    linear-gradient(180deg, #FFFFFF 0%, #F7FBFF 100%) !important;
}

.hero-badge {
  color: #0678C9 !important;
  background: #E8F7FF !important;
  border-color: rgba(25,183,245,0.34) !important;
}

.hero-badge .dot,
.marquee-pill .d {
  background: #19B7F5 !important;
}

.hero-light h1 .accent,
.text-cyan {
  color: #19B7F5 !important;
  background: linear-gradient(120deg, #19B7F5 0%, #002058 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
}

.hero-trust-item svg,
.value-item-icon,
.feature-icon,
.card-icon,
.service-icon,
.role-icon,
.check-icon {
  color: #19B7F5 !important;
}

/* Hero right visual theme */
.talent-network-card {
  background:
    radial-gradient(circle at 20% 18%, rgba(25,183,245,0.18), transparent 30%),
    radial-gradient(circle at 82% 28%, rgba(0,32,88,0.12), transparent 28%),
    linear-gradient(180deg, #FFFFFF 0%, #EAF6FF 100%) !important;
  border-color: rgba(25,183,245,0.24) !important;
}

.network-center {
  background: #001030 !important;
  box-shadow: 0 0 0 18px rgba(25,183,245,0.08), 0 0 0 42px rgba(25,183,245,0.05) !important;
}

.network-kicker {
  color: #55D6FF !important;
}

.network-pill,
.hero-mini-card {
  border-color: rgba(25,183,245,0.24) !important;
  box-shadow: 0 14px 28px rgba(0,16,48,0.08) !important;
}

.mini-label {
  color: #0678C9 !important;
}

/* Inner page heroes and dark sections use same logo navy, not a different black/navy. */
.page-hero,
.highlight-box,
.cta-section,
.bg-navy,
.bg-navy-deep {
  background: #001030 !important;
}

.page-hero::after,
.cta-section::before {
  background: radial-gradient(ellipse 60% 80% at 80% 50%, rgba(25,183,245,0.12) 0%, transparent 60%) !important;
}

/* Cards and light sections use the light HAPS silver/blue surface. */
.bg-off-white,
.value-strip,
.section.bg-off-white,
.role-section,
.service-section {
  background: #F7FBFF !important;
}

.card,
.service-card,
.role-card,
.feature-card,
.form-card,
.faq-item,
.audience-card,
.intro-stat,
.stats-strip,
.process-card,
.market-panel,
.contact-card {
  border-color: #D8E6F2 !important;
  box-shadow: 0 10px 28px rgba(0,16,48,0.07) !important;
}

/* Footer text tuned to silver/cyan theme. */
.footer {
  color: rgba(232,238,247,0.78) !important;
}

.footer h2,
.footer h3,
.footer h4,
.footer .footer-logo-name,
.footer .footer-brand-name,
.footer .brand-title {
  color: #E8EEF7 !important;
}

.footer a {
  color: rgba(232,238,247,0.78) !important;
}

.footer a:hover {
  color: #55D6FF !important;
}

/* Form focus states and inputs */
input:focus,
select:focus,
textarea:focus {
  border-color: #19B7F5 !important;
  box-shadow: 0 0 0 3px rgba(25,183,245,0.14) !important;
}

/* Social/WhatsApp stays consistent with HAPS cyan-green contrast, without clashing. */
.whatsapp-float {
  box-shadow: 0 14px 28px rgba(0,16,48,0.18) !important;
}

/* Mobile: keep the brand shade consistent. */
@media (max-width: 980px) {
  .nav,
  .nav-mobile {
    background: #001030 !important;
  }
}













/* ============================================================
   FINAL DEPLOYMENT POLISH
   Netlify honeypot helper and form accessibility state.
   ============================================================ */

.hidden,
[hidden] {
  display: none !important;
}

.form-success,
.form-error {
  border-radius: 12px;
  padding: 14px 16px;
  margin-top: 16px;
  font-weight: 600;
}

.form-success {
  background: #E8F7FF;
  color: #063A5C;
  border: 1px solid rgba(25,183,245,0.35);
}

.form-error {
  background: #FFF1F2;
  color: #9F1239;
  border: 1px solid rgba(244,63,94,0.30);
}



/* ============================================================
   HAPS EDGE ALIGNMENT + TALENT VISUAL ANIMATION
   Fixes crowded card alignment and adds subtle movement to hero talent network.
   ============================================================ */

/* Fix "Why employers work with us" card alignment */
.edge-grid {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 22px !important;
  align-items: stretch !important;
  margin-top: 34px !important;
}

.edge-card {
  min-height: 205px !important;
  height: 100% !important;
  padding: 26px 24px 24px !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-start !important;
  overflow: visible !important;
}

.edge-card .ico {
  width: 42px !important;
  height: 42px !important;
  margin-bottom: 20px !important;
  flex: 0 0 auto !important;
}

.edge-card h3 {
  font-size: 1.02rem !important;
  line-height: 1.25 !important;
  margin: 0 0 10px !important;
  min-height: 26px !important;
}

.edge-card p {
  font-size: 0.93rem !important;
  line-height: 1.65 !important;
  margin: 0 !important;
  color: #64748B !important;
}

/* Better responsive layout for that section */
@media (max-width: 1120px) {
  .edge-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 640px) {
  .edge-grid {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }

  .edge-card {
    min-height: auto !important;
  }
}

/* Subtle movement for homepage talent network visual */
.talent-network-card {
  isolation: isolate;
}

.talent-network-card::before {
  content: "";
  position: absolute;
  inset: 76px;
  border-radius: 999px;
  border: 1px solid rgba(25, 183, 245, 0.20);
  box-shadow:
    0 0 0 30px rgba(25, 183, 245, 0.045),
    0 0 0 64px rgba(25, 183, 245, 0.030);
  z-index: 1;
  pointer-events: none;
}

@media (prefers-reduced-motion: no-preference) {
  .network-grid {
    animation: hapsGridDrift 18s linear infinite;
  }

  .talent-network-card::before {
    animation: hapsOrbitPulse 7s ease-in-out infinite;
  }

  .network-center {
    animation: hapsCenterFloat 5.8s ease-in-out infinite;
  }

  .network-pill {
    animation: hapsPillFloat 6s ease-in-out infinite;
    will-change: transform;
  }

  .pill-tech { animation-delay: 0s; }
  .pill-ops { animation-delay: .65s; }
  .pill-support { animation-delay: 1.2s; }
  .pill-sales { animation-delay: 1.85s; }
  .pill-admin { animation-delay: 2.35s; }
  .pill-marketing { animation-delay: 2.85s; }

  .hero-mini-card {
    animation: hapsMiniLift 7s ease-in-out infinite;
  }

  .hero-mini-card:nth-child(2) {
    animation-delay: 1.2s;
  }
}

@keyframes hapsGridDrift {
  0% { background-position: 0 0, 0 0; }
  100% { background-position: 34px 34px, 34px 34px; }
}

@keyframes hapsOrbitPulse {
  0%, 100% {
    opacity: .72;
    transform: scale(1);
  }
  50% {
    opacity: 1;
    transform: scale(1.025);
  }
}

@keyframes hapsCenterFloat {
  0%, 100% {
    transform: translate(-50%, -50%) translateY(0);
  }
  50% {
    transform: translate(-50%, -50%) translateY(-8px);
  }
}

@keyframes hapsPillFloat {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-7px);
  }
}

@keyframes hapsMiniLift {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-5px);
  }
}

/* Prevent animation transforms from breaking stacked mobile layout */
@media (max-width: 900px) {
  .network-center,
  .network-pill,
  .hero-mini-card {
    animation: none !important;
    transform: none !important;
  }

  .talent-network-card::before {
    display: none !important;
  }
}



/* ============================================================
   TRANSPARENT WEBSITE LOGO FINAL
   Uses the supplied transparent HAPS website logo.
   Removes background shade, checker look, duplicate text, and logo box effect.
   ============================================================ */

:root {
  --haps-navy-final: #031027;
  --haps-navy-final-2: #041833;
  --haps-cyan-final: #19B7F5;
}

.nav {
  background: linear-gradient(180deg, var(--haps-navy-final) 0%, var(--haps-navy-final-2) 100%) !important;
  border-bottom: 2px solid var(--haps-cyan-final) !important;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.24) !important;
}

.nav::after {
  content: none !important;
}

.nav-inner {
  height: 96px !important;
}

.nav-logo {
  display: flex !important;
  align-items: center !important;
  flex: 0 0 190px !important;
  width: 190px !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

.nav-logo img {
  height: 78px !important;
  width: auto !important;
  max-width: 185px !important;
  object-fit: contain !important;
  display: block !important;
  background: transparent !important;
  border: 0 !important;
  outline: 0 !important;
  border-radius: 0 !important;
  padding: 0 !important;
  box-shadow: none !important;
  filter: drop-shadow(0 5px 10px rgba(0,0,0,0.22));
}

.nav-logo-text,
.footer-logo-name {
  display: none !important;
}

.nav-links a {
  color: rgba(232, 238, 247, 0.88) !important;
  font-weight: 650 !important;
}

.nav-links a:hover {
  color: #FFFFFF !important;
  background: rgba(25, 183, 245, 0.12) !important;
}

.nav-links a[aria-current="page"] {
  color: var(--haps-navy-final) !important;
  background: #E8F7FF !important;
  box-shadow: none !important;
}

.nav-actions .btn-primary,
.nav .btn-primary,
.btn-primary {
  background: linear-gradient(135deg, #19B7F5 0%, #0678C9 100%) !important;
  border-color: #19B7F5 !important;
  color: #001030 !important;
  box-shadow: none !important;
  font-weight: 800 !important;
}

.nav-hamburger span {
  background: #E8F7FF !important;
}

.nav-mobile {
  background: var(--haps-navy-final) !important;
  border-top: 1px solid rgba(25, 183, 245, 0.35) !important;
}

.nav-mobile a {
  color: rgba(232, 238, 247, 0.88) !important;
  border-bottom-color: rgba(232, 238, 247, 0.12) !important;
}

.footer {
  background: linear-gradient(180deg, #030D20 0%, #03152D 100%) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.03) !important;
}

.footer-logo {
  gap: 0 !important;
}

.footer-logo img,
.footer-brand img,
.footer .footer-logo img,
.footer .footer-brand img {
  height: 92px !important;
  width: auto !important;
  max-width: 220px !important;
  object-fit: contain !important;
  display: block !important;
  background: transparent !important;
  border: 0 !important;
  outline: 0 !important;
  border-radius: 0 !important;
  padding: 0 !important;
  box-shadow: none !important;
  filter: drop-shadow(0 6px 12px rgba(0,0,0,0.24));
}

.footer-tagline {
  color: rgba(232, 238, 247, 0.72) !important;
  margin-top: 12px !important;
}

.footer a {
  color: rgba(232, 238, 247, 0.78) !important;
}

.footer a:hover {
  color: #55D6FF !important;
}

@media (max-width: 1100px) {
  .nav-logo {
    flex-basis: 165px !important;
    width: 165px !important;
  }

  .nav-logo img {
    height: 70px !important;
    max-width: 160px !important;
  }
}

@media (max-width: 980px) {
  .nav-inner {
    height: 88px !important;
  }

  .nav-logo {
    flex-basis: auto !important;
    width: auto !important;
  }

  .nav-logo img {
    height: 68px !important;
    max-width: 150px !important;
  }
}

@media (max-width: 640px) {
  .nav-inner {
    height: 82px !important;
  }

  .nav-logo img {
    height: 60px !important;
    max-width: 132px !important;
  }
}



/* ============================================================
   HEADER / FOOTER LOGO BALANCE FIX
   Lightens the nav/footer background slightly and adds a soft
   neutral glow behind the logo so the transparent chrome edges
   do not pick up heavy blue staining from the dark background.
   ============================================================ */

:root {
  --haps-header-top: #082149;
  --haps-header-bottom: #0A2958;
  --haps-footer-top: #071C3D;
  --haps-footer-bottom: #09234A;
  --haps-divider: #19B7F5;
}

.nav {
  background: linear-gradient(180deg, var(--haps-header-top) 0%, var(--haps-header-bottom) 100%) !important;
  border-bottom: 2px solid var(--haps-divider) !important;
  box-shadow: 0 10px 22px rgba(0, 0, 0, 0.22) !important;
}

.footer {
  background: linear-gradient(180deg, var(--haps-footer-top) 0%, var(--haps-footer-bottom) 100%) !important;
}

.nav-logo,
.footer-logo,
.footer-brand {
  position: relative !important;
  isolation: isolate !important;
}

.nav-logo::before,
.footer-logo::before,
.footer-brand::before {
  content: "" !important;
  position: absolute !important;
  inset: 8% 6% !important;
  z-index: -1 !important;
  pointer-events: none !important;
  border-radius: 18px !important;
  background:
    radial-gradient(circle at 50% 45%,
      rgba(255,255,255,0.17) 0%,
      rgba(212,234,255,0.10) 28%,
      rgba(120,180,220,0.06) 48%,
      rgba(10,25,45,0.00) 72%) !important;
  filter: blur(10px) !important;
}

.nav-logo img,
.footer-logo img,
.footer-brand img,
.footer .footer-logo img,
.footer .footer-brand img {
  filter: drop-shadow(0 6px 14px rgba(0,0,0,0.28)) !important;
}

.nav-inner {
  height: 98px !important;
}

.nav-logo img {
  height: 82px !important;
  max-width: 200px !important;
}

.footer-logo img,
.footer-brand img,
.footer .footer-logo img,
.footer .footer-brand img {
  height: 96px !important;
  max-width: 235px !important;
}

@media (max-width: 980px) {
  .nav-inner {
    height: 90px !important;
  }

  .nav-logo img {
    height: 72px !important;
    max-width: 168px !important;
  }
}

@media (max-width: 640px) {
  .nav-logo img {
    height: 64px !important;
    max-width: 146px !important;
  }
}



/* ============================================================
   HAPS GLOBE HERO VISUAL
   Adds animated global hiring visual to homepage hero.
   ============================================================ */

.globe-hero-visual {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  width: 100% !important;
}

.haps-globe-card {
  position: relative;
  width: 100%;
  max-width: 560px;
  min-height: 590px;
  border-radius: 34px;
  overflow: hidden;
  padding: 30px;
  background:
    radial-gradient(circle at 18% 16%, rgba(25,183,245,0.17), transparent 30%),
    radial-gradient(circle at 86% 22%, rgba(85,214,255,0.18), transparent 32%),
    linear-gradient(180deg, rgba(255,255,255,0.96), rgba(232,247,255,0.98));
  border: 1px solid rgba(25,183,245,0.24);
  box-shadow: 0 30px 70px rgba(0,16,48,0.11);
  isolation: isolate;
}

.globe-card-bg {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(25,183,245,0.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(25,183,245,0.07) 1px, transparent 1px);
  background-size: 36px 36px;
  mask-image: linear-gradient(180deg, rgba(0,0,0,.82), rgba(0,0,0,.28));
  pointer-events: none;
  z-index: -1;
}

.globe-topline {
  position: relative;
  z-index: 2;
  max-width: 340px;
}

.globe-kicker {
  display: inline-flex;
  margin-bottom: 8px;
  color: #0678C9;
  font-size: 11px;
  font-weight: 850;
  letter-spacing: .13em;
  text-transform: uppercase;
}

.globe-topline strong {
  display: block;
  color: #001030;
  font-size: 1.28rem;
  line-height: 1.25;
}

.globe-stage {
  position: relative;
  width: min(430px, 100%);
  aspect-ratio: 1 / 1;
  margin: 10px auto 0;
}

.haps-globe-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
}

.globe-orbit {
  position: absolute;
  inset: 58px;
  border-radius: 999px;
  border: 1px solid rgba(25,183,245,0.20);
  pointer-events: none;
  z-index: 1;
}

.orbit-one {
  transform: rotate(-24deg) scale(1.05, .72);
}

.orbit-two {
  transform: rotate(28deg) scale(1.08, .76);
  border-color: rgba(0,16,48,0.10);
}

.globe-pin {
  position: absolute;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 36px;
  padding: 9px 13px;
  border-radius: 999px;
  background: rgba(255,255,255,0.92);
  border: 1px solid rgba(25,183,245,0.22);
  box-shadow: 0 12px 24px rgba(0,16,48,0.10);
  color: #001030;
  font-size: 12px;
  font-weight: 800;
  white-space: nowrap;
}

.pin-pakistan { left: 38px; top: 46%; }
.pin-global { right: 8px; top: 24%; }
.pin-remote { left: 50px; top: 18%; }
.pin-onsite { right: 42px; bottom: 22%; }

.globe-role-strip {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin: 4px 0 20px;
  position: relative;
  z-index: 2;
}

.globe-role-strip span {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 8px 12px;
  border-radius: 999px;
  background: rgba(255,255,255,0.78);
  border: 1px solid rgba(25,183,245,0.18);
  color: #28445E;
  font-size: 12px;
  font-weight: 750;
}

.globe-summary {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.globe-summary > div {
  border-radius: 20px;
  padding: 16px 18px;
  background: rgba(255,255,255,0.86);
  border: 1px solid rgba(25,183,245,0.18);
  box-shadow: 0 16px 28px rgba(0,16,48,0.07);
}

.globe-summary strong {
  display: block;
  color: #001030;
  font-size: 1rem;
}

@media (prefers-reduced-motion: no-preference) {
  .globe-card-bg {
    animation: globeGridMove 20s linear infinite;
  }

  .orbit-one {
    animation: globeOrbitOne 9s ease-in-out infinite;
  }

  .orbit-two {
    animation: globeOrbitTwo 11s ease-in-out infinite;
  }

  .globe-pin {
    animation: globePinFloat 6s ease-in-out infinite;
  }

  .pin-global { animation-delay: .7s; }
  .pin-remote { animation-delay: 1.2s; }
  .pin-onsite { animation-delay: 1.8s; }
}

@keyframes globeGridMove {
  0% { background-position: 0 0, 0 0; }
  100% { background-position: 36px 36px, 36px 36px; }
}

@keyframes globeOrbitOne {
  0%, 100% { transform: rotate(-24deg) scale(1.05, .72); opacity: .72; }
  50% { transform: rotate(-18deg) scale(1.09, .76); opacity: 1; }
}

@keyframes globeOrbitTwo {
  0%, 100% { transform: rotate(28deg) scale(1.08, .76); opacity: .64; }
  50% { transform: rotate(22deg) scale(1.12, .80); opacity: .92; }
}

@keyframes globePinFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-7px); }
}

@media (max-width: 1024px) {
  .haps-globe-card {
    max-width: 520px;
    min-height: 560px;
  }
}

@media (max-width: 900px) {
  .globe-hero-visual {
    justify-content: center !important;
  }

  .haps-globe-card {
    min-height: auto;
    padding: 24px;
  }

  .globe-stage {
    width: min(360px, 100%);
  }
}

@media (max-width: 640px) {
  .globe-summary {
    grid-template-columns: 1fr;
  }

  .globe-pin {
    display: none;
  }

  .globe-topline {
    text-align: center;
    margin: 0 auto;
  }
}



/* ============================================================
   HAPS FINAL LOGO + HERO SPACING FIX
   Uses the new grey-fixed transparent logo and moves homepage
   hero text upward so the left side does not sit too low.
   ============================================================ */

/* New grey-fixed logo presentation */
.nav-logo img,
.footer-logo img,
.footer-brand img,
.footer .footer-logo img,
.footer .footer-brand img {
  background: transparent !important;
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
  object-fit: contain !important;
  filter: drop-shadow(0 5px 10px rgba(0,0,0,0.20)) !important;
}

.nav-logo::before,
.footer-logo::before,
.footer-brand::before {
  opacity: 0.35 !important;
}

.nav-logo img {
  height: 82px !important;
  width: auto !important;
  max-width: 205px !important;
}

.footer-logo img,
.footer-brand img,
.footer .footer-logo img,
.footer .footer-brand img {
  height: 98px !important;
  width: auto !important;
  max-width: 245px !important;
}

/* Move homepage hero content up without breaking the globe */
.hero-light {
  padding-top: 64px !important;
  padding-bottom: 86px !important;
}

.hero-light .hero-split {
  align-items: start !important;
}

.hero-light .hero-content {
  padding-top: 70px !important;
}

.hero-light .hero-badge {
  margin-bottom: 22px !important;
}

.hero-light h1 {
  margin-bottom: 22px !important;
}

.hero-light .hero-body {
  margin-bottom: 28px !important;
}

.haps-globe-card {
  min-height: 575px !important;
}

/* Keep tablet/mobile stacked layout natural */
@media (max-width: 980px) {
  .nav-logo img {
    height: 72px !important;
    max-width: 172px !important;
  }

  .hero-light {
    padding-top: 48px !important;
  }

  .hero-light .hero-content {
    padding-top: 0 !important;
  }

  .hero-light .hero-split {
    align-items: center !important;
  }
}

@media (max-width: 640px) {
  .nav-logo img {
    height: 64px !important;
    max-width: 148px !important;
  }

  .footer-logo img,
  .footer-brand img,
  .footer .footer-logo img,
  .footer .footer-brand img {
    height: 82px !important;
    max-width: 200px !important;
  }

  .hero-light {
    padding-top: 38px !important;
    padding-bottom: 58px !important;
  }
}



/* ============================================================
   HERO POSITION + EXACT SOCIAL BRAND COLORS
   Moves homepage hero content further upward and gives social
   icons their recognizable platform colors.
   ============================================================ */

/* Move the homepage hero text up */
.hero-light {
  padding-top: 22px !important;
  padding-bottom: 78px !important;
}

.hero-light .hero-split {
  align-items: start !important;
}

.hero-light .hero-content {
  padding-top: 18px !important;
}

.hero-light .hero-badge {
  margin-bottom: 20px !important;
}

.hero-light h1 {
  margin-bottom: 20px !important;
}

.hero-light .hero-body {
  margin-bottom: 26px !important;
}

/* Keep globe balanced after moving text up */
.globe-hero-visual {
  padding-top: 0 !important;
}

.haps-globe-card {
  margin-top: 0 !important;
}

/* Social brand colors */
.social-btn {
  color: #ffffff !important;
  border: 0 !important;
  box-shadow: 0 12px 24px rgba(0, 16, 48, 0.18) !important;
  transition: transform 180ms ease, box-shadow 180ms ease, filter 180ms ease !important;
}

.social-btn:hover {
  transform: translateY(-3px) !important;
  box-shadow: 0 16px 30px rgba(0, 16, 48, 0.26) !important;
  filter: brightness(1.06) !important;
}

.social-btn svg {
  color: #ffffff !important;
  fill: currentColor !important;
}

.social-linkedin,
a[href*="linkedin.com"].social-btn {
  background: #0A66C2 !important;
}

.social-facebook,
a[href*="facebook.com"].social-btn {
  background: #1877F2 !important;
}

.social-instagram,
a[href*="instagram.com"].social-btn {
  background:
    radial-gradient(circle at 30% 107%, #FDF497 0%, #FDF497 5%, #FD5949 45%, #D6249F 60%, #285AEB 90%) !important;
}

.social-tiktok,
a[href*="tiktok.com"].social-btn {
  background: #000000 !important;
  box-shadow:
    0 12px 24px rgba(0, 16, 48, 0.18),
    inset 3px 0 0 rgba(37, 244, 238, 0.88),
    inset -3px 0 0 rgba(254, 44, 85, 0.88) !important;
}

.social-youtube,
a[href*="youtube.com"].social-btn,
a[href*="youtu.be"].social-btn {
  background: #FF0000 !important;
}

/* Ensure footer/follow section social buttons use same colored treatment */
.footer .social-btn,
.follow-band .social-btn,
.contact-socials .social-btn,
.social-row .social-btn {
  background-color: transparent;
}

@media (max-width: 980px) {
  .hero-light {
    padding-top: 28px !important;
  }

  .hero-light .hero-content {
    padding-top: 0 !important;
  }

  .hero-light .hero-split {
    align-items: center !important;
  }
}

@media (max-width: 640px) {
  .hero-light {
    padding-top: 26px !important;
    padding-bottom: 56px !important;
  }
}



/* ============================================================
   HAPS PROFESSIONAL SPACING SYSTEM
   Standardizes vertical rhythm across all pages.
   Target rhythm:
   - Hero sections: compact but premium
   - Normal sections: 56px desktop / 42px tablet / 34px mobile
   - Small bands: 28-36px
   - Section header to content: 30-34px
   ============================================================ */

/* Global section rhythm */
.section {
  padding-top: 56px !important;
  padding-bottom: 56px !important;
}

.section-lg {
  padding-top: 72px !important;
  padding-bottom: 72px !important;
}

.section-sm {
  padding-top: 34px !important;
  padding-bottom: 34px !important;
}

.section-xs {
  padding-top: 26px !important;
  padding-bottom: 26px !important;
}

.section-header {
  margin-bottom: 34px !important;
}

.section-title {
  margin-bottom: 14px !important;
}

.section-subtitle {
  line-height: 1.55 !important;
}

/* Inner/page hero spacing */
.page-hero {
  padding-top: 56px !important;
  padding-bottom: 52px !important;
}

.page-hero + .section,
.page-hero + .section-sm,
.page-hero + .section-lg {
  padding-top: 50px !important;
}

/* Homepage hero: remove the dead space below/around the left content */
.hero-light {
  padding-top: 34px !important;
  padding-bottom: 34px !important;
}

.hero-light .hero-split,
.hero-light .split {
  align-items: center !important;
  gap: 56px !important;
}

.hero-light .hero-content {
  padding-top: 0 !important;
  align-self: center !important;
}

.hero-light .hero-badge {
  margin-bottom: 18px !important;
}

.hero-light h1 {
  margin-bottom: 18px !important;
}

.hero-light .hero-body {
  margin-bottom: 24px !important;
}

.hero-light .hero-actions {
  margin-bottom: 18px !important;
}

.hero-trust {
  margin-top: 0 !important;
}

/* Homepage globe: smaller, balanced, no tall empty section */
.globe-hero-visual {
  padding-top: 0 !important;
  align-self: center !important;
}

.haps-globe-card {
  min-height: 500px !important;
  max-width: 520px !important;
  padding: 26px !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

.globe-stage {
  width: min(360px, 100%) !important;
  margin-top: 4px !important;
}

.globe-role-strip {
  margin-top: 0 !important;
  margin-bottom: 14px !important;
}

.globe-summary > div {
  padding: 14px 16px !important;
}

/* Marquee/ticker and stats directly under hero */
.value-strip {
  padding-top: 14px !important;
  padding-bottom: 14px !important;
}

.hero-light + .value-strip,
.hero-light + .role-marquee,
.hero-light + .section-sm,
.value-strip + .section-sm {
  margin-top: 0 !important;
}

.value-strip + .section-sm,
.role-marquee + .section-sm {
  padding-top: 28px !important;
}

.stats-strip {
  gap: 22px !important;
}

.stat-item {
  padding-top: 10px !important;
  padding-bottom: 10px !important;
}

.stat-num {
  font-size: clamp(1.85rem, 3.2vw, 2.45rem) !important;
}

.stats-strip + p,
.stats-strip ~ p {
  margin-top: 14px !important;
}

/* After stats, start the next content section cleanly */
.section-sm + .section {
  padding-top: 52px !important;
}

/* Reduce oversized internal cards/bands where the visual gap came from */
.intro-band,
.follow-band,
.globe-band,
.market-grid,
.audience-grid,
.process-preview,
.edge-grid,
.role-cats,
.service-grid,
.faq-grid,
.contact-grid {
  margin-top: 0 !important;
}

.intro-band {
  padding-top: 38px !important;
  padding-bottom: 38px !important;
}

.edge-grid {
  margin-top: 28px !important;
}

.edge-card {
  min-height: 178px !important;
}

/* Prevent stacked adjacent white/grey sections from feeling disconnected */
.section + .section {
  margin-top: 0 !important;
}

.bg-silver,
.bg-off-white {
  background-position: center top !important;
}

/* CTA bands should feel like final sections, not huge empty blocks */
.cta-section {
  padding-top: 62px !important;
  padding-bottom: 62px !important;
}

/* Form/contact pages: standard professional breathing room */
.form-shell,
.contact-panel,
.requirement-form,
.candidate-form {
  margin-top: 0 !important;
}

/* Tablet */
@media (max-width: 980px) {
  .section {
    padding-top: 44px !important;
    padding-bottom: 44px !important;
  }

  .section-lg {
    padding-top: 56px !important;
    padding-bottom: 56px !important;
  }

  .section-sm {
    padding-top: 28px !important;
    padding-bottom: 28px !important;
  }

  .section-header {
    margin-bottom: 28px !important;
  }

  .hero-light {
    padding-top: 30px !important;
    padding-bottom: 38px !important;
  }

  .hero-light .hero-split,
  .hero-light .split {
    gap: 36px !important;
  }

  .haps-globe-card {
    min-height: auto !important;
    max-width: 520px !important;
  }

  .globe-stage {
    width: min(330px, 100%) !important;
  }

  .section-sm + .section {
    padding-top: 42px !important;
  }
}

/* Mobile */
@media (max-width: 640px) {
  .section {
    padding-top: 34px !important;
    padding-bottom: 34px !important;
  }

  .section-lg {
    padding-top: 42px !important;
    padding-bottom: 42px !important;
  }

  .section-sm {
    padding-top: 24px !important;
    padding-bottom: 24px !important;
  }

  .section-header {
    margin-bottom: 24px !important;
  }

  .page-hero {
    padding-top: 38px !important;
    padding-bottom: 34px !important;
  }

  .hero-light {
    padding-top: 24px !important;
    padding-bottom: 30px !important;
  }

  .hero-light .hero-split,
  .hero-light .split {
    gap: 28px !important;
  }

  .hero-light .hero-badge {
    margin-bottom: 14px !important;
  }

  .hero-light h1 {
    margin-bottom: 14px !important;
  }

  .hero-light .hero-body {
    margin-bottom: 20px !important;
  }

  .value-strip {
    padding-top: 12px !important;
    padding-bottom: 12px !important;
  }

  .stat-item {
    padding-top: 8px !important;
    padding-bottom: 8px !important;
  }

  .cta-section {
    padding-top: 44px !important;
    padding-bottom: 44px !important;
  }
}



/* ============================================================
   HR SERVICES + TRUST ACCOUNTABILITY UPDATE
   Adds structured HR support and accountability sections inspired
   by the uploaded HR services deck, without copying competitor claims.
   ============================================================ */

.trust-section {
  border-top: 1px solid rgba(15, 23, 42, 0.06);
}

.trust-grid,
.hr-services-grid,
.accountability-grid {
  display: grid;
  gap: 22px;
}

.trust-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.hr-services-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.accountability-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.trust-card,
.hr-service-card,
.accountability-grid article {
  background: #ffffff;
  border: 1px solid rgba(25, 183, 245, 0.18);
  border-radius: 22px;
  padding: 24px;
  box-shadow: 0 14px 30px rgba(0, 16, 48, 0.06);
  min-height: 100%;
}

.bg-off-white .trust-card,
.bg-off-white .hr-service-card,
.bg-off-white .accountability-grid article {
  background: rgba(255,255,255,0.90);
}

.trust-icon {
  width: 44px;
  height: 44px;
  border-radius: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #0284C7;
  background: #E8F7FF;
  margin-bottom: 18px;
}

.trust-icon svg {
  width: 22px;
  height: 22px;
}

.trust-card h3,
.hr-service-card h3,
.accountability-grid h3 {
  font-size: 1.05rem;
  line-height: 1.3;
  margin: 0 0 10px;
  color: #001030;
}

.trust-card p,
.hr-service-card p,
.accountability-grid p {
  margin: 0;
  color: #5E718A;
  font-size: 0.94rem;
  line-height: 1.62;
}

.accountability-grid article span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 999px;
  background: #001030;
  color: #55D6FF;
  font-weight: 800;
  font-size: 0.78rem;
  margin-bottom: 16px;
}

.accountability-band {
  display: grid;
  grid-template-columns: 0.88fr 1.12fr;
  gap: 34px;
  align-items: center;
  padding: 34px;
  border-radius: 28px;
  background:
    radial-gradient(circle at 10% 10%, rgba(25,183,245,0.12), transparent 32%),
    linear-gradient(180deg, #ffffff 0%, #F7FBFF 100%);
  border: 1px solid rgba(25, 183, 245, 0.18);
  box-shadow: 0 18px 45px rgba(0,16,48,0.07);
}

.accountability-band h2 {
  margin: 0 0 14px;
}

.accountability-band p {
  color: #5E718A;
  line-height: 1.65;
}

.accountability-list {
  display: grid;
  gap: 14px;
}

.accountability-list > div {
  display: grid;
  grid-template-columns: 46px 1fr;
  column-gap: 14px;
  align-items: start;
  padding: 16px;
  border-radius: 18px;
  background: rgba(255,255,255,0.88);
  border: 1px solid rgba(25, 183, 245, 0.15);
}

.accountability-list span {
  grid-row: span 2;
  width: 36px;
  height: 36px;
  border-radius: 12px;
  background: #E8F7FF;
  color: #0284C7;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 850;
  font-size: 0.82rem;
}

.accountability-list strong {
  color: #001030;
  margin-bottom: 3px;
}

.accountability-list p {
  margin: 0;
  font-size: 0.91rem;
  line-height: 1.55;
}

.trust-note {
  margin-top: 28px;
  padding: 18px 20px;
  border-left: 4px solid #19B7F5;
  border-radius: 16px;
  background: #E8F7FF;
  color: #28445E;
  line-height: 1.6;
}

.trust-note strong {
  color: #001030;
}

@media (max-width: 1100px) {
  .trust-grid,
  .accountability-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .hr-services-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .accountability-band {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  .trust-grid,
  .hr-services-grid,
  .accountability-grid {
    grid-template-columns: 1fr;
  }

  .accountability-band {
    padding: 22px;
    border-radius: 22px;
  }

  .accountability-list > div {
    grid-template-columns: 1fr;
  }

  .accountability-list span {
    grid-row: auto;
    margin-bottom: 10px;
  }
}



/* ============================================================
   FINAL HERO TOP SPACE FIX
   Keeps the previous clean version and removes the large empty
   area between the header and homepage hero content.
   ============================================================ */

.hero-light {
  padding-top: 12px !important;
  padding-bottom: 36px !important;
}

.hero-light .hero-split,
.hero-light .split {
  align-items: flex-start !important;
  gap: 56px !important;
}

.hero-light .hero-content {
  padding-top: 18px !important;
  align-self: flex-start !important;
}

.hero-light .hero-badge {
  margin-bottom: 16px !important;
}

.hero-light h1 {
  margin-bottom: 18px !important;
}

.hero-light .hero-body {
  margin-bottom: 24px !important;
}

.hero-light .hero-actions {
  margin-bottom: 16px !important;
}

.globe-hero-visual {
  padding-top: 0 !important;
  align-self: flex-start !important;
}

.haps-globe-card {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

/* Keep stacked tablet/mobile layout natural */
@media (max-width: 980px) {
  .hero-light {
    padding-top: 24px !important;
    padding-bottom: 38px !important;
  }

  .hero-light .hero-split,
  .hero-light .split {
    align-items: center !important;
    gap: 34px !important;
  }

  .hero-light .hero-content {
    padding-top: 0 !important;
    align-self: auto !important;
  }

  .globe-hero-visual {
    align-self: auto !important;
  }
}

@media (max-width: 640px) {
  .hero-light {
    padding-top: 20px !important;
    padding-bottom: 32px !important;
  }
}


/* ============================================================
   FINAL EMAIL CONTACT UPDATE
   Shows separate client and applicant email addresses in footers.
   ============================================================ */
.footer-email-wrap {
  display: inline-flex;
  flex-direction: column;
  gap: 2px;
}

.footer-email-label {
  font-size: 0.72rem;
  line-height: 1.1;
  color: rgba(232, 238, 247, 0.58);
  font-weight: 700;
  letter-spacing: 0.02em;
}

.email-purpose-row a {
  line-height: 1.25;
}

@media (max-width: 640px) {
  .footer-email-wrap {
    gap: 1px;
  }
}


/* CLEAN HAPS LOGO FINAL */
.nav-logo img,
.footer-logo img {
  object-fit: contain !important;
  background: transparent !important;
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
  filter: drop-shadow(0 4px 10px rgba(0,0,0,.30)) !important;
}

.nav-logo img {
  max-height: 78px !important;
}

.footer-logo img {
  max-height: 92px !important;
}


/* MOBILE COPY + OVERLAP FIX — HAPS FINAL */
@media (max-width: 768px) {
  .audience-grid {
    grid-template-columns: 1fr !important;
    gap: 22px !important;
  }

  .audience-card {
    min-height: auto !important;
    display: block !important;
    overflow: hidden !important;
    border-radius: 28px !important;
  }

  .audience-card .audience-media {
    background-position: center !important;
  }

  .audience-tags {
    position: relative !important;
    top: auto !important;
    right: auto !important;
    left: auto !important;
    max-width: none !important;
    width: auto !important;
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: flex-start !important;
    gap: 8px !important;
    padding: 28px 26px 0 26px !important;
    margin: 0 !important;
    z-index: 3 !important;
  }

  .audience-tags span {
    font-size: 0.78rem !important;
    line-height: 1 !important;
    padding: 8px 13px !important;
    border-radius: 999px !important;
    white-space: nowrap !important;
  }

  .audience-body {
    position: relative !important;
    z-index: 2 !important;
    padding: 18px 26px 30px 26px !important;
  }

  .audience-eyebrow {
    display: block !important;
    margin-top: 0 !important;
    margin-bottom: 14px !important;
    white-space: normal !important;
    line-height: 1.45 !important;
    font-size: 0.78rem !important;
    letter-spacing: 0.10em !important;
  }

  .audience-body h3 {
    font-size: clamp(2rem, 9vw, 3rem) !important;
    line-height: 1.08 !important;
    margin-bottom: 18px !important;
  }

  .audience-body p {
    font-size: 1.06rem !important;
    line-height: 1.62 !important;
    margin-bottom: 22px !important;
  }

  .audience-note {
    align-items: flex-start !important;
    gap: 12px !important;
    font-size: 1.02rem !important;
    line-height: 1.45 !important;
  }

  .audience-actions {
    gap: 16px !important;
  }

  .audience-actions .btn,
  .audience-actions .audience-link {
    width: 100% !important;
    justify-content: center !important;
    text-align: center !important;
  }

  .globe-shell h2,
  .globe-panel h2,
  .coverage-card h2 {
    line-height: 1.18 !important;
  }
}

/* Smaller phones */
@media (max-width: 420px) {
  .audience-tags {
    padding: 24px 22px 0 22px !important;
  }

  .audience-tags span {
    font-size: 0.72rem !important;
    padding: 7px 11px !important;
  }

  .audience-body {
    padding: 16px 22px 28px 22px !important;
  }

  .audience-body h3 {
    font-size: clamp(1.9rem, 8.8vw, 2.65rem) !important;
  }
}


/* ONSITE CAPITALIZATION FIX */
.info-card h3,
.info-card strong,
.info-card .card-value,
.globe-info h3,
.globe-info strong,
.globe-info .card-value,
.coverage-card h3,
.coverage-card strong,
.coverage-card .card-value,
.hero-visual h3,
.hero-visual strong,
.hero-visual .card-value {
  text-transform: none !important;
  font-variant-caps: normal !important;
}