/* ===================================================================
   EB3 Hub — theme.css
   BDV-inspired design system (navy + blue + coral, DM Sans, motion)
   Used by the redesigned pages. Legacy pages keep styles.css until
   they are migrated.
   =================================================================== */

:root {
  /* Brand palette (BDV-inspired) */
  --navy:        #002B3D;
  --navy-deep:   #001822;
  --blue:        #0071B4;
  --blue-bright: #0E7FCC;
  --blue-soft:   #E7F1F8;
  --coral:       #D13E21;
  --coral-soft:  #EF6B51;
  --ink:         #222325;
  --grey:        #616161;
  --grey-light:  #8A8F94;
  --mist:        #F0F1F5;
  --line:        #E4E7EC;
  --white:       #ffffff;

  --radius:      14px;
  --radius-lg:   22px;
  --radius-pill: 999px;
  --shadow-sm:   0 2px 8px rgba(0,24,34,.06);
  --shadow:      0 12px 34px rgba(0,24,34,.10);
  --shadow-lg:   0 26px 60px rgba(0,24,34,.18);

  --wrap:        1180px;
  --font:        "DM Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  --ease:        cubic-bezier(.22,.61,.36,1);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font);
  color: var(--ink);
  background: var(--white);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img { max-width: 100%; display: block; }

h1, h2, h3, h4 {
  font-family: var(--font);
  color: var(--navy);
  line-height: 1.12;
  letter-spacing: -0.02em;
  margin: 0 0 .5em;
  font-weight: 700;
}
h1 { font-size: clamp(2.2rem, 5vw, 3.35rem); }
h2 { font-size: clamp(1.7rem, 3.6vw, 2.5rem); }
h3 { font-size: clamp(1.15rem, 2vw, 1.4rem); }
p  { margin: 0 0 1rem; }

a { color: var(--blue); text-decoration: none; transition: color .2s var(--ease); }
a:hover { color: var(--blue-bright); }

.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 24px; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .55em;
  font-weight: 600; font-size: 1rem; line-height: 1;
  padding: 15px 28px; border-radius: var(--radius-pill);
  border: 2px solid transparent; cursor: pointer;
  transition: transform .2s var(--ease), box-shadow .2s var(--ease), background .2s var(--ease), color .2s var(--ease);
  white-space: nowrap;
}
.btn:hover { transform: translateY(-2px); }
.btn-primary { background: var(--coral); color: #fff; box-shadow: 0 10px 24px rgba(209,62,33,.28); }
.btn-primary:hover { background: var(--coral-soft); color: #fff; box-shadow: 0 14px 30px rgba(209,62,33,.36); }
.btn-secondary { background: var(--blue); color: #fff; }
.btn-secondary:hover { background: var(--blue-bright); color: #fff; }
.btn-ghost { background: transparent; color: var(--navy); border-color: var(--line); }
.btn-ghost:hover { border-color: var(--blue); color: var(--blue); }
.btn-white { background: #fff; color: var(--navy); }
.btn-white:hover { color: var(--blue); }
.btn-wa { background: #25D366; color: #062e15; }
.btn-wa:hover { background: #22c35e; color: #062e15; }
.btn-lg { padding: 18px 36px; font-size: 1.06rem; }
.btn-block { width: 100%; }

/* ---------- Utility bar ---------- */
.utility-bar {
  background: var(--navy-deep); color: #cfe0ea;
  font-size: .85rem;
}
.utility-bar .wrap { display: flex; align-items: center; justify-content: space-between; gap: 16px; height: 40px; }
.utility-bar .wrap.utility-center { justify-content: center; gap: 22px; }
.utility-bar a { color: #cfe0ea; }
.utility-bar a:hover { color: #fff; }
.util-link { display: inline-flex; align-items: center; gap: 7px; font-weight: 500; }
.util-ic { width: 15px; height: 15px; flex: none; }
.utility-bar .sep { opacity: .35; }
.utility-left { display: flex; gap: 20px; align-items: center; }
.utility-right { display: flex; gap: 16px; align-items: center; }
.utility-right .sep { opacity: .35; }

/* ---------- Header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255,255,255,.92);
  backdrop-filter: saturate(140%) blur(10px);
  border-bottom: 1px solid transparent;
  transition: box-shadow .3s var(--ease), border-color .3s var(--ease);
}
.site-header.scrolled { box-shadow: var(--shadow-sm); border-color: var(--line); }
.nav { display: flex; align-items: center; gap: 28px; height: 76px; }
.brand { font-size: 1.5rem; font-weight: 700; color: var(--navy); letter-spacing: -.03em; display: inline-flex; align-items: center; }
.brand strong { color: var(--coral); }
.brand-logo { height: 46px; width: auto; display: block; }
.nav-links {
  list-style: none; display: flex; gap: 26px; margin: 0; padding: 0;
  margin-left: auto;
}
.nav-links a {
  color: var(--ink); font-weight: 500; font-size: .98rem; position: relative; padding: 6px 0;
}
.nav-links a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 2px;
  background: var(--coral); transform: scaleX(0); transform-origin: left; transition: transform .25s var(--ease);
}
.nav-links a:hover, .nav-links a.is-active { color: var(--navy); }
.nav-links a:hover::after, .nav-links a.is-active::after { transform: scaleX(1); }
.nav-links a.nav-signin {
  border: 1.5px solid var(--navy); border-radius: 999px; padding: 6px 16px; color: var(--navy); font-weight: 600;
  white-space: nowrap;
}
.nav-links a.nav-signin::after { display: none; }
.nav-links a.nav-signin:hover { background: var(--navy); color: #fff; }
.nav-cta { flex: 0 0 auto; }
.nav-toggle {
  display: none; margin-left: auto; background: var(--navy); color: #fff; border: 0;
  padding: 10px 16px; border-radius: 10px; font: inherit; font-weight: 600; cursor: pointer;
}

/* ---------- Hero ---------- */
.hero {
  position: relative; overflow: hidden;
  background: radial-gradient(120% 120% at 80% 0%, #06405a 0%, var(--navy) 45%, var(--navy-deep) 100%);
  color: #eaf2f7;
}
.hero::before {
  content: ""; position: absolute; inset: 0;
  background-image:
    radial-gradient(circle at 15% 30%, rgba(14,127,204,.22), transparent 40%),
    radial-gradient(circle at 90% 70%, rgba(209,62,33,.16), transparent 45%);
  pointer-events: none;
}
.hero-grid {
  position: relative; z-index: 1;
  display: grid; grid-template-columns: 1.15fr .85fr; gap: 54px; align-items: center;
  padding: 84px 24px 92px;
}
.hero .eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  color: #bfe0f2; font-weight: 600; font-size: .82rem; text-transform: uppercase; letter-spacing: .14em;
  background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.14);
  padding: 7px 14px; border-radius: var(--radius-pill); margin-bottom: 22px;
}
.hero h1 { color: #fff; margin-bottom: 20px; }
.hero h1 em { color: var(--coral-soft); font-style: normal; }
.hero-lede { color: #c6d8e2; font-size: 1.12rem; max-width: 46ch; margin-bottom: 30px; }
.hero-ctas { display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 26px; }
.hero-employer-line { font-size: .95rem; color: #a9c2ce; }
.hero-employer-line a { color: #fff; font-weight: 600; border-bottom: 1px solid var(--coral-soft); }

/* Hero rotating slides (headline supporting line) */
.hero-slides { position: relative; min-height: 1.6em; margin-bottom: 22px; }
.hero-slide {
  position: absolute; inset: 0; opacity: 0; transform: translateY(8px);
  transition: opacity .6s var(--ease), transform .6s var(--ease);
  color: #d7e6ef; font-size: 1.05rem; font-weight: 500;
}
.hero-slide.active { opacity: 1; transform: translateY(0); position: relative; }

/* Hero side card / promo video slot */
.hero-card {
  background: rgba(255,255,255,.97); color: var(--ink);
  border-radius: var(--radius-lg); padding: 30px; box-shadow: var(--shadow-lg);
}
.hero-card h2 { font-size: 1.4rem; margin-bottom: 12px; }
.hero-card ul { list-style: none; margin: 0 0 22px; padding: 0; }
.hero-card li { position: relative; padding: 8px 0 8px 30px; border-bottom: 1px solid var(--line); color: #3d4247; }
.hero-card li:last-child { border-bottom: 0; }
.hero-card li::before {
  content: "✓"; position: absolute; left: 0; top: 8px;
  color: #fff; background: var(--blue); width: 20px; height: 20px; border-radius: 50%;
  font-size: .72rem; display: grid; place-items: center; font-weight: 700;
}

/* ---------- Sections ---------- */
.section { padding: 84px 0; }
.section-sm { padding: 56px 0; }
.section-white { background: #fff; }
.section-mist { background: var(--mist); }
.section-ink { background: var(--navy); color: #dbe7ee; }
.section-ink h1, .section-ink h2, .section-ink h3 { color: #fff; }

.section-head { max-width: 720px; margin: 0 auto 52px; text-align: center; }
.section-head.left { margin-left: 0; text-align: left; }
.eyebrow {
  display: inline-block; color: var(--blue); font-weight: 700;
  font-size: .8rem; text-transform: uppercase; letter-spacing: .16em; margin-bottom: 14px;
}
.section-ink .eyebrow { color: var(--coral-soft); }
.section-head p { color: var(--grey); font-size: 1.08rem; }
.section-ink .section-head p { color: #a9c2ce; }
.mt-lg { margin-top: 28px; }
.text-center { text-align: center; }

/* ---------- Stat counters ---------- */
.stats {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px;
}
.stat { text-align: center; padding: 20px; }
.stat-num {
  font-size: clamp(2.2rem, 4vw, 3.1rem); font-weight: 700; color: var(--coral-soft);
  line-height: 1; letter-spacing: -.03em;
}
.section-white .stat-num, .section-mist .stat-num { color: var(--blue); }
.stat-label { margin-top: 10px; font-size: .95rem; color: inherit; opacity: .9; }
.stat-note { text-align: center; font-size: .82rem; opacity: .6; margin-top: 26px; }

/* ---------- Feature cards ---------- */
.feature-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; }
.feature {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: 32px; transition: transform .25s var(--ease), box-shadow .25s var(--ease), border-color .25s var(--ease);
}
.feature:hover { transform: translateY(-4px); box-shadow: var(--shadow); border-color: transparent; }
.feature-icon {
  width: 54px; height: 54px; border-radius: 14px; display: grid; place-items: center;
  background: var(--blue-soft); color: var(--blue); margin-bottom: 18px;
}
.feature-icon svg { width: 26px; height: 26px; }
.feature h3 { margin-bottom: 8px; }
.feature p { color: var(--grey); margin: 0; }

/* ---------- Steps ---------- */
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; counter-reset: step; }
.step {
  position: relative; background: #fff; border: 1px solid var(--line);
  border-radius: var(--radius-lg); padding: 34px 28px; overflow: hidden;
}
.step-num {
  display: inline-grid; place-items: center; width: 48px; height: 48px; border-radius: 12px;
  background: var(--navy); color: #fff; font-weight: 700; font-size: 1.1rem; margin-bottom: 16px;
}
.step h3 { margin-bottom: 8px; }
.step p { color: var(--grey); margin: 0; }
.step::after {
  content: ""; position: absolute; right: -30px; top: -30px; width: 110px; height: 110px;
  background: var(--mist); border-radius: 50%; z-index: 0;
}
.step > * { position: relative; z-index: 1; }

/* ---------- Promo video ---------- */
.video-wrap {
  position: relative; max-width: 900px; margin: 0 auto;
  aspect-ratio: 16 / 9; border-radius: var(--radius-lg); overflow: hidden;
  background: linear-gradient(135deg, #06405a, var(--navy-deep));
  box-shadow: var(--shadow-lg); display: grid; place-items: center;
}
.video-wrap iframe, .video-wrap video { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.video-placeholder { text-align: center; color: #cfe0ea; padding: 24px; }
.video-play {
  width: 84px; height: 84px; border-radius: 50%; background: var(--coral); color: #fff;
  display: grid; place-items: center; margin: 0 auto 18px; box-shadow: 0 10px 30px rgba(209,62,33,.4);
  animation: pulse 2.4s infinite;
}
.video-play svg { width: 34px; height: 34px; margin-left: 4px; }
@keyframes pulse {
  0% { box-shadow: 0 0 0 0 rgba(239,107,81,.5); }
  70% { box-shadow: 0 0 0 22px rgba(239,107,81,0); }
  100% { box-shadow: 0 0 0 0 rgba(239,107,81,0); }
}

/* ---------- Job cards (uniform "blade" style) ---------- */
.jobs-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; align-items: stretch; }
.jobs-grid.four { grid-template-columns: repeat(4, 1fr); }
.job-card {
  position: relative; height: 100%;
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg);
  overflow: hidden; display: flex; flex-direction: column; cursor: pointer;
  transition: transform .25s var(--ease), box-shadow .25s var(--ease);
}
.job-card:hover, .job-card:focus-visible { transform: translateY(-4px); box-shadow: var(--shadow); outline: none; }
/* Photo / placeholder — identical dimensions on every card = equal blades */
.job-photo { aspect-ratio: 16 / 10; width: 100%; background: var(--blue-soft); overflow: hidden; }
.job-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.job-photo.placeholder { display: flex; align-items: center; justify-content: center; padding: 16px;
  background: linear-gradient(135deg, var(--navy), var(--blue)); }
.job-photo.placeholder span { color: #fff; font-weight: 700; font-size: 1.15rem; text-align: center; opacity: .95; }
.job-card-body { padding: 22px; display: flex; flex-direction: column; flex: 1; }
.job-loc { display: flex; align-items: baseline; gap: 8px; margin-bottom: 4px; }
.job-city { font-size: 1.25rem; font-weight: 700; color: var(--navy); }
.job-state { font-size: .9rem; color: var(--grey); }
.job-company { font-weight: 600; color: var(--navy); font-size: .95rem; margin: 2px 0 8px; }
.job-title {
  align-self: flex-start; font-weight: 600; color: var(--blue);
  background: var(--blue-soft); padding: 4px 12px; border-radius: var(--radius-pill);
  font-size: .88rem; margin: 8px 0 14px;
}
.job-wage { font-size: 1.6rem; font-weight: 700; color: var(--coral); margin-bottom: 12px; }
.job-wage span { font-size: .95rem; color: var(--grey); font-weight: 500; }
.job-view { margin-top: auto; color: var(--blue); font-weight: 700; font-size: .92rem; }
.job-meta { font-size: .9rem; color: var(--navy); margin-bottom: 14px; }
.job-meta-label { display: block; font-size: .72rem; text-transform: uppercase; letter-spacing: .06em; color: var(--grey); font-weight: 700; margin-bottom: 2px; }
.job-block { margin-bottom: 16px; }
.job-block-label { display: block; font-size: .72rem; text-transform: uppercase; letter-spacing: .06em; color: var(--blue); font-weight: 700; margin-bottom: 4px; }
.job-duties { color: var(--grey); font-size: .94rem; margin: 0; line-height: 1.55; }
.job-actions { display: flex; flex-direction: column; gap: 10px; margin-top: 8px; }
.job-video { font-size: .88rem; color: var(--blue); display: inline-flex; align-items: center; gap: 6px; }
/* Status badge, overlaid on the photo */
.job-badge {
  position: absolute; top: 14px; left: 14px; z-index: 2;
  background: #fbe9e5; color: var(--coral);
  font-size: .72rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  padding: 4px 10px; border-radius: 6px;
}
.job-badge.active { background: #e7f7ee; color: #1b7a43; }
.job-badge.coming { background: var(--blue-soft); color: var(--blue); }
.job-card.sold .job-wage { color: var(--grey-light); }

/* ---------- Job details modal ---------- */
.job-modal { position: fixed; inset: 0; z-index: 1000; display: none; }
.job-modal.open { display: block; }
.job-modal-scrim { position: absolute; inset: 0; background: rgba(4,16,24,.55); backdrop-filter: blur(2px); }
.job-modal-card {
  position: relative; max-width: 560px; width: calc(100% - 32px); max-height: 90vh; overflow: auto;
  margin: 5vh auto; background: #fff; border-radius: var(--radius-lg);
  box-shadow: 0 24px 60px rgba(0,0,0,.35); animation: jobModalIn .22s var(--ease);
}
@keyframes jobModalIn { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
.job-modal-x {
  position: absolute; top: 12px; right: 12px; z-index: 3; width: 34px; height: 34px; border: 0;
  border-radius: 8px; background: rgba(255,255,255,.9); color: var(--navy); font-size: 1rem; cursor: pointer;
  box-shadow: 0 2px 8px rgba(0,0,0,.15);
}
.job-modal .job-photo.big { aspect-ratio: 16 / 8; border-radius: var(--radius-lg) var(--radius-lg) 0 0; }
.job-modal-content { padding: 24px; }
.job-modal-content .job-badge { position: static; display: inline-block; margin-bottom: 12px; }
.job-modal-content .job-title { margin-top: 6px; }

/* ---------- Testimonials carousel ---------- */
.carousel { position: relative; max-width: 820px; margin: 0 auto; }
.carousel-track { position: relative; min-height: 220px; }
.slide {
  position: absolute; inset: 0; opacity: 0; transform: translateX(24px);
  transition: opacity .5s var(--ease), transform .5s var(--ease); pointer-events: none;
}
.slide.active { opacity: 1; transform: translateX(0); position: relative; pointer-events: auto; }
.quote-card { background: #fff; border-radius: var(--radius-lg); padding: 40px; box-shadow: var(--shadow); text-align: center; }
.quote-mark { font-size: 3rem; color: var(--coral-soft); line-height: .5; font-weight: 700; }
.quote-text { font-size: 1.2rem; color: var(--ink); margin: 18px 0 22px; }
.quote-name { font-weight: 700; color: var(--navy); }
.quote-detail { display: block; color: var(--grey); font-size: .9rem; }
.carousel-dots { display: flex; gap: 10px; justify-content: center; margin-top: 26px; }
.dot { width: 11px; height: 11px; border-radius: 50%; background: var(--line); border: 0; cursor: pointer; transition: background .2s, transform .2s; }
.dot.active { background: var(--coral); transform: scale(1.2); }

/* ---------- CTA band ---------- */
.cta-band {
  background: linear-gradient(120deg, var(--coral) 0%, var(--coral-soft) 100%);
  border-radius: var(--radius-lg); padding: 54px; text-align: center; color: #fff;
  box-shadow: var(--shadow);
}
.cta-band h2 { color: #fff; }
.cta-band p { color: rgba(255,255,255,.92); max-width: 56ch; margin: 0 auto 26px; font-size: 1.1rem; }

/* ---------- Partner band ---------- */
.partner-band { background: var(--navy-deep); color: #cfe0ea; padding: 40px 0; }
.partner-inner { display: flex; align-items: center; justify-content: center; gap: 20px; flex-wrap: wrap; text-align: center; }
.partner-badge {
  display: inline-flex; align-items: center; gap: 10px;
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.14);
  padding: 10px 18px; border-radius: var(--radius-pill); font-weight: 600; color: #fff;
}
.partner-inner strong { color: #fff; }
.partner-logo { background: #fff; border-radius: 12px; padding: 10px 18px; display: inline-flex; align-items: center; }
.partner-logo img { height: 40px; width: auto; display: block; }

/* ---------- Footer ---------- */
.site-footer { background: var(--navy-deep); color: #a9c2ce; padding: 66px 0 30px; }
.footer-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 36px; }
.footer-brand { font-size: 1.5rem; font-weight: 700; color: #fff; margin-bottom: 12px; }
.footer-brand span { color: var(--coral-soft); }
.footer-logo { background: #fff; border-radius: 12px; padding: 12px 16px; display: inline-block; margin-bottom: 16px; }
.footer-logo img { height: 40px; width: auto; display: block; }
.footer-tag { color: #8fabb9; max-width: 34ch; }
.site-footer h2 { color: #fff; font-size: .95rem; text-transform: uppercase; letter-spacing: .1em; margin-bottom: 16px; }
.site-footer ul { list-style: none; margin: 0; padding: 0; }
.site-footer li { margin-bottom: 10px; }
.site-footer a { color: #a9c2ce; }
.site-footer a:hover { color: #fff; }
.footer-social { display: flex; gap: 12px; margin-top: 18px; }
.footer-social a {
  width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center;
  background: rgba(255,255,255,.07); color: #cfe0ea;
}
.footer-social a:hover { background: var(--blue); color: #fff; }
.footer-social svg { width: 18px; height: 18px; }
.footer-bottom {
  margin-top: 46px; padding-top: 24px; border-top: 1px solid rgba(255,255,255,.1);
  display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  font-size: .85rem; color: #7d97a5;
}
/* The legal row sits on its own line above the copyright, inside the same
   flex container: flex-basis 100% forces the line break and order:-1 puts it
   first, so the markup can stay appended at the top of .footer-bottom. */
.footer-legal {
  flex-basis: 100%; order: -1;
  display: flex; flex-wrap: wrap; gap: 8px 20px; margin-bottom: 6px;
}
.footer-legal a { color: #a9c2ce; }
.footer-legal a:hover { color: #fff; text-decoration: underline; }

/* ---------- Forms ---------- */
.form-card {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: 38px; box-shadow: var(--shadow-sm); max-width: 860px; margin: 0 auto;
}
.form-section { border: 0; padding: 0; margin: 0 0 34px; }
.form-section legend {
  display: block; width: 100%; font-weight: 700; color: var(--navy); font-size: 1.15rem;
  padding-bottom: 10px; margin-bottom: 20px; border-bottom: 2px solid var(--mist);
}
.form-section .legend-step {
  display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 8px;
  background: var(--blue); color: #fff; font-size: .85rem; margin-right: 10px; vertical-align: middle;
}
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 4px; }
.field.full { grid-column: 1 / -1; }
.field label { font-weight: 600; font-size: .92rem; color: var(--ink); }
.field .req { color: var(--coral); }
.field .hint { font-weight: 400; color: var(--grey-light); font-size: .82rem; }
.field input, .field select, .field textarea {
  font: inherit; font-size: .98rem; color: var(--ink);
  padding: 12px 14px; border: 1.5px solid var(--line); border-radius: 10px; background: #fff;
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease); width: 100%;
}
.field textarea { min-height: 120px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: 0; border-color: var(--blue); box-shadow: 0 0 0 3px rgba(0,113,180,.14);
}
.field.has-error input, .field.has-error select, .field.has-error textarea { border-color: var(--coral); }
.field.has-error::after { content: "This field is required."; color: var(--coral); font-size: .8rem; }
.radio-row, .check-row { display: flex; flex-wrap: wrap; gap: 10px; }
.opt {
  display: inline-flex; align-items: center; gap: 8px; padding: 10px 14px;
  border: 1.5px solid var(--line); border-radius: 10px; cursor: pointer; font-size: .92rem;
  transition: border-color .2s, background .2s;
}
.opt:hover { border-color: var(--blue); }
.opt input { accent-color: var(--blue); width: auto; }
.opt.checked, .opt:has(input:checked) { border-color: var(--blue); background: var(--blue-soft); }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-consent { display: flex; gap: 10px; align-items: flex-start; font-size: .9rem; color: var(--grey); }
.form-consent input { margin-top: 4px; accent-color: var(--blue); }
.form-consent.has-error { color: var(--coral); }
.form-consent.has-error input { outline: 2px solid var(--coral); outline-offset: 2px; }
.form-consent.has-error::after { content: "Please tick this box to continue."; color: var(--coral); font-size: .8rem; display: block; width: 100%; margin-top: 4px; }
.form-actions { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-top: 8px; }
.form-note { font-size: .84rem; color: var(--grey-light); }
.form-success {
  display: none; align-items: flex-start; gap: 12px;
  background: #e9f7ef; border: 1px solid #b7e4c7; color: #1b5e34;
  border-radius: 12px; padding: 18px 20px; margin-top: 20px;
}
.form-success.is-visible { display: flex; }
.form-success svg { flex: 0 0 auto; width: 22px; height: 22px; color: #2a9d5c; }

/* ---------- FAQ accordion ---------- */
.faq-list { max-width: 820px; margin: 0 auto; }
.faq-item { border-bottom: 1px solid var(--line); }
.faq-q {
  width: 100%; text-align: left; background: none; border: 0; cursor: pointer;
  font: inherit; font-weight: 600; font-size: 1.08rem; color: var(--navy);
  padding: 22px 40px 22px 0; position: relative;
}
.faq-q::after {
  content: "+"; position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
  font-size: 1.6rem; color: var(--blue); transition: transform .25s var(--ease); font-weight: 400;
}
.faq-item.open .faq-q::after { content: "−"; }
.faq-a { max-height: 0; overflow: hidden; transition: max-height .3s var(--ease); }
.faq-a-inner { padding: 0 0 22px; color: var(--grey); }

/* ---------- Page hero (inner pages) ---------- */
.page-hero {
  background: radial-gradient(120% 140% at 85% 0%, #06405a 0%, var(--navy) 50%, var(--navy-deep) 100%);
  color: #eaf2f7; padding: 70px 0 64px; text-align: center;
}
.page-hero h1 { color: #fff; margin-bottom: 14px; }
.page-hero p { color: #c6d8e2; max-width: 60ch; margin: 0 auto; font-size: 1.1rem; }
.page-hero .eyebrow { color: var(--coral-soft); }
.breadcrumb { color: #8fb2c4; font-size: .85rem; margin-bottom: 16px; }
.breadcrumb a { color: #bfe0f2; }

/* ---------- Content prose ---------- */
.prose { max-width: 780px; margin: 0 auto; }
.prose h2 { margin-top: 40px; }
.prose h3 { margin-top: 28px; }
.prose ul { padding-left: 20px; color: var(--ink); }
.prose li { margin-bottom: 8px; }
/* Legal pages: the "last updated" line, and slightly tighter headings so a
   long policy stays scannable rather than sprawling. */
.legal-meta {
  color: var(--grey); font-size: .85rem; letter-spacing: .04em;
  text-transform: uppercase; font-weight: 600;
  padding-bottom: 18px; border-bottom: 1px solid var(--line); margin-bottom: 28px;
}
.prose h2 { font-size: 1.4rem; }
.prose h3 { font-size: 1.08rem; }
.prose code {
  background: var(--blue-soft); color: var(--blue); border-radius: 5px;
  padding: 2px 6px; font-size: .9em;
}
.card-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.card-grid.two { grid-template-columns: repeat(2, 1fr); }
.info-card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 28px; }
.info-card h3 { margin-bottom: 8px; }
/* A card heading that is a top-level section in the page outline still
   reads as a card heading; keep the h3 scale so promoting the tag does
   not turn a small label into a 2.5rem banner. */
.info-card h2 { font-size: clamp(1.15rem, 2vw, 1.4rem); margin-bottom: 8px; }
.info-card p { color: var(--grey); margin: 0; }
.pill-list { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.pill-list li { background: var(--blue-soft); color: var(--blue); border-radius: var(--radius-pill); padding: 8px 16px; font-weight: 600; font-size: .9rem; }

/* ---------- Scroll reveal ---------- */
.reveal { opacity: 0; transform: translateY(26px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.reveal.in-view { opacity: 1; transform: none; }
.reveal.d1 { transition-delay: .08s; }
.reveal.d2 { transition-delay: .16s; }
.reveal.d3 { transition-delay: .24s; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1 !important; transform: none !important; }
  .hero-slide { transition: none; }
  html { scroll-behavior: auto; }
}

/* ---------- Responsive ---------- */
/* The nav carries eight links plus a Sign In pill and the CTA button before it
   collapses at 820px. Tighten the spacing over the last stretch so it stays on
   one line instead of wrapping under the logo. */
@media (max-width: 1100px) {
  .nav-links { gap: 16px; }
  .nav-links a { font-size: .92rem; }
}
@media (max-width: 960px) {
  .hero-grid { grid-template-columns: 1fr; gap: 40px; padding: 60px 24px 70px; }
  .feature-grid { grid-template-columns: 1fr; }
  .stats { grid-template-columns: repeat(2, 1fr); }
  .steps, .jobs-grid { grid-template-columns: 1fr; }
  .jobs-grid.four { grid-template-columns: repeat(2, 1fr); }
  .footer-grid { grid-template-columns: 1fr 1fr; }
}
/* The nav collapses to the hamburger at 1000px, not 820px. Below roughly
   1000px the link row plus the Sign In pill plus the CTA button is wider than
   the viewport, so it used to push the page sideways — the header overflowed by
   ~33px at 860px and ~72px at 821px even before the About link existed. The
   links do not wrap (they are a nowrap flex row), so the symptom was a
   horizontally scrolling page rather than a visibly broken menu. */
@media (max-width: 1000px) {
  .nav-links, .nav-cta { display: none; }
  .nav-toggle { display: inline-block; }
  .nav-links.is-open {
    display: flex; flex-direction: column; gap: 0;
    position: absolute; top: 76px; left: 0; right: 0;
    background: #fff; border-bottom: 1px solid var(--line); box-shadow: var(--shadow);
    padding: 8px 24px 16px; margin: 0;
    z-index: 60;
  }
  .nav-links.is-open li { border-bottom: 1px solid var(--line); }
  .nav-links.is-open a { display: block; padding: 14px 0; }
  .nav-cta.is-open { display: inline-flex; position: absolute; top: 76px; right: 24px; z-index: 60; }
}
@media (max-width: 820px) {
  .utility-left { display: none; }
  .utility-bar .wrap { justify-content: center; }
  /* Let the centered phone/WhatsApp row wrap instead of overflowing */
  .utility-bar .wrap.utility-center { flex-wrap: wrap; height: auto; gap: 6px 16px; padding-top: 7px; padding-bottom: 7px; }
  .utility-bar { height: auto; }
}
@media (max-width: 560px) {
  /* .btn is nowrap so labels never break mid-phrase on desktop, but a long
     label ("Read the detailed EB-3 process breakdown →") is then wider than a
     phone and scrolls the whole page sideways. Let buttons wrap at this size. */
  .btn { white-space: normal; text-align: center; }
  /* .card-grid is a hard 3-column grid with no collapse, so on a phone the
     three contact-channel cards were wider than the screen and scrolled the
     page sideways. Stack them instead. */
  .card-grid, .card-grid.two { grid-template-columns: 1fr; }
  .section { padding: 60px 0; }
  .stats { grid-template-columns: 1fr 1fr; gap: 10px; }
  .jobs-grid.four { grid-template-columns: 1fr; }
  .cta-band, .quote-card { padding: 32px 22px; }
  .footer-grid { grid-template-columns: 1fr; }
  .footer-bottom { flex-direction: column; }
}