/* ===========================================================================
   ZENTRA TALENT SOLUTIONS — COMPONENT LAYER
   Loads after tokens.css and base.css. Every value below is a token
   reference — see tokens.css for the source values.
   =========================================================================== */

.eyebrow {
  display: inline-block;
  font-family: var(--font-body);
  font-size: var(--text-caption);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--color-accent-600);
  margin-bottom: var(--space-3);
}
.eyebrow.on-dark { color: var(--color-accent-300); }

/* ===========================================================================
   PART 4 — BUTTONS
   Primary / Secondary / Outline / Text, each with hover, focus-visible,
   disabled and loading states.
   =========================================================================== */
.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  font-family: var(--font-body);
  font-weight: var(--weight-semibold);
  font-size: 15px;
  line-height: 1;
  padding: 14px 26px;
  border-radius: var(--radius-sm);
  border: 1.5px solid transparent;
  cursor: pointer;
  transition: transform var(--duration-base) var(--ease-standard),
              box-shadow var(--duration-base) var(--ease-standard),
              background var(--duration-base) var(--ease-standard),
              color var(--duration-base) var(--ease-standard),
              border-color var(--duration-base) var(--ease-standard);
  white-space: nowrap;
}
.btn .icon { width: 16px; height: 16px; transition: transform var(--duration-base) var(--ease-standard); }
.btn:hover .icon { transform: translateX(3px); }
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn:focus-visible {
  outline: 2px solid var(--border-focus);
  outline-offset: 3px;
}

/* Primary — solid accent fill. Uses --color-accent-600, the AA-safe
   (6.2:1) dark-teal variant, specifically because white button text on
   the brighter decorative teal (--color-accent-500) fails AA at 15px. */
.btn-primary {
  background: var(--color-accent-600);
  color: #fff;
  box-shadow: 0 8px 20px rgba(11, 110, 95, 0.28);
}
.btn-primary:hover:not(:disabled) { background: var(--color-accent-400); }

/* Secondary — solid, using the secondary slate-blue token */
.btn-secondary {
  background: var(--color-secondary-700);
  color: #fff;
  box-shadow: 0 8px 20px rgba(51, 69, 110, 0.24);
}
.btn-secondary:hover:not(:disabled) { background: var(--color-secondary-500); }

.btn-outline-dark {
  background: transparent;
  border-color: rgba(255, 255, 255, 0.35);
  color: #fff;
}
.btn-outline-dark:hover:not(:disabled) { border-color: #fff; background: rgba(255, 255, 255, 0.08); }

.btn-outline-navy {
  background: transparent;
  border-color: var(--border-default);
  color: var(--text-heading);
}
.btn-outline-navy:hover:not(:disabled) { border-color: var(--color-primary-900); background: var(--bg-muted); }

/* Text button — no border/background, for lowest-emphasis actions */
.btn-text {
  background: transparent;
  border-color: transparent;
  color: var(--color-accent-600);
  padding: 8px 4px;
}
.btn-text:hover:not(:disabled) { color: var(--color-accent-400); }
.btn-text:hover:not(:disabled) .icon { transform: translateX(3px); }

.btn-small { padding: 11px 20px; font-size: 14px; }
.btn-block { width: 100%; justify-content: center; }

/* Solid navy button — used where a service page needs a stronger,
   non-teal CTA to visually separate it from the primary/accent button
   used elsewhere on the same view */
.btn-navy { background: var(--color-primary-900); color: #fff; }
.btn-navy:hover:not(:disabled) { background: var(--color-primary-700); }

/* Disabled state — applies to any button variant */
.btn:disabled,
.btn[aria-disabled="true"] {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}
.btn:disabled:hover,
.btn[aria-disabled="true"]:hover { transform: none; }

/* Loading state — toggle via JS: add `is-loading` and set aria-busy="true".
   The spinner icon (assets/icons/sprite.svg#icon-spinner) is inserted by
   the calling component; this just handles the animation + label hiding. */
.btn.is-loading { color: transparent; pointer-events: none; }
.btn.is-loading .btn-spinner {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.btn.is-loading .btn-spinner .icon {
  width: 18px;
  height: 18px;
  color: #fff;
  animation: btn-spin 0.8s linear infinite;
}
.btn-outline-navy.is-loading .btn-spinner .icon,
.btn-text.is-loading .btn-spinner .icon { color: var(--color-accent-600); }

@keyframes btn-spin {
  to { transform: rotate(360deg); }
}
@media (prefers-reduced-motion: reduce) {
  .btn.is-loading .btn-spinner .icon { animation: none; }
}

/* ===========================================================================
   PART 6.5 — BREADCRUMB & TRUST STRIP
   Promoted from services.css/industries.css and homepage.css respectively
   (Sprint 5) so About/Why Zentra pages can use them without loading an
   unrelated section stylesheet. Purely additive — no existing selector
   below is edited, so Sprint 1–4 pages are unaffected.
   =========================================================================== */
.breadcrumb {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-2);
  font-size: 13px;
  color: var(--text-on-dark-muted);
  margin-bottom: var(--space-5);
}
.breadcrumb a { color: var(--text-on-dark-muted); transition: color var(--duration-base) var(--ease-standard); }
.breadcrumb a:hover { color: #fff; }
.breadcrumb .icon { width: 13px; height: 13px; opacity: 0.6; }
.breadcrumb span[aria-current] { color: #fff; font-weight: var(--weight-medium); }
.breadcrumb.on-light { color: var(--text-muted); }
.breadcrumb.on-light a { color: var(--text-muted); }
.breadcrumb.on-light a:hover { color: var(--color-accent-600); }
.breadcrumb.on-light span[aria-current] { color: var(--text-heading); }

.trust-strip {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: var(--space-5);
  padding: var(--space-7) 0;
}
.trust-item { text-align: center; }
.trust-item .trust-icon {
  width: 52px;
  height: 52px;
  margin: 0 auto var(--space-4);
  border-radius: var(--radius-full);
  background: var(--color-accent-100);
  color: var(--color-accent-600);
  display: flex;
  align-items: center;
  justify-content: center;
}
.trust-item .trust-icon .icon { width: 22px; height: 22px; }
.trust-item p {
  font-size: 14px;
  font-weight: var(--weight-semibold);
  color: var(--text-heading);
  line-height: var(--leading-snug);
}
@media (max-width: 960px) {
  .trust-strip { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 720px) {
  .trust-strip { grid-template-columns: repeat(2, 1fr); }
}

.problem-list { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3) var(--space-5); }
.problem-list li {
  display: flex;
  gap: var(--space-3);
  align-items: flex-start;
  background: var(--color-error-100);
  border-radius: var(--radius-sm);
  padding: var(--space-4);
  font-size: var(--text-body);
  color: var(--text-heading);
  font-weight: var(--weight-medium);
}
.problem-list .icon { width: 17px; height: 17px; flex-shrink: 0; margin-top: 2px; color: var(--color-error-700); }
@media (max-width: 720px) {
  .problem-list { grid-template-columns: 1fr; }
}

/* FAQ accordion — promoted from homepage.css/services.css/industries.css
   (Sprint 6) so Contact can use it without loading a section stylesheet. */
.faq-list { max-width: 760px; margin: 0 auto; }
.faq-item { border-bottom: 1px solid var(--border-default); }
.faq-item:first-child { border-top: 1px solid var(--border-default); }
.faq-question {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  background: transparent;
  border: none;
  text-align: left;
  padding: var(--space-5) var(--space-2);
  cursor: pointer;
  font-family: var(--font-head);
  font-size: 16.5px;
  font-weight: var(--weight-semibold);
  color: var(--text-heading);
}
.faq-question .icon {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  color: var(--color-accent-600);
  transition: transform var(--duration-base) var(--ease-standard);
}
.faq-item[data-open="true"] .faq-question .icon { transform: rotate(180deg); }
.faq-answer {
  overflow: hidden;
  max-height: 0;
  transition: max-height var(--duration-slow) var(--ease-standard);
}
.faq-item[data-open="true"] .faq-answer { max-height: 320px; }
.faq-answer p { padding: 0 var(--space-2) var(--space-5); font-size: var(--text-body); color: var(--text-body); max-width: 66ch; }
@media (prefers-reduced-motion: reduce) {
  .faq-answer, .faq-question .icon { transition: none; }
}

/* ===========================================================================
   PART 7 — NAVIGATION
   =========================================================================== */
.site-nav {
  position: sticky;
  top: 0;
  z-index: var(--z-nav);
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border-default);
  transition: box-shadow var(--duration-base) var(--ease-standard);
}
.site-nav.is-scrolled { box-shadow: var(--shadow-sm); }

.nav-inner {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: var(--space-4) var(--container-pad);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
}
.logo {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-head);
  font-weight: var(--weight-bold);
  font-size: 15px;
  letter-spacing: var(--tracking-wider);
  color: var(--color-primary-900);
}
.logo-mark {
  width: 30px;
  height: 30px;
  border-radius: 7px;
  background: var(--color-primary-900);
  display: flex;
  align-items: center;
  justify-content: center;
}
.logo-mark .icon { width: 16px; height: 16px; }

.logo-mark-img { width: auto; height: 40px; background: none; border-radius: 0; }
.logo-mark-img img { height: 40px; width: auto; max-width: 100%; display: block; object-fit: contain; }
.footer-brand .logo-mark-img {
  height: auto;
  background: #fff;
  padding: 8px 14px;
  border-radius: var(--radius-sm);
  display: inline-flex;
  align-items: center;
}
.footer-brand .logo-mark-img img { height: 34px; }

.nav-links {
  display: flex;
  align-items: center;
  gap: var(--space-7);
}
.nav-links a {
  position: relative;
  font-size: 15px;
  font-weight: var(--weight-medium);
  color: var(--text-heading);
  padding: var(--space-2) 0;
  border-bottom: 2px solid transparent;
  transition: color var(--duration-base) var(--ease-standard), border-color var(--duration-base) var(--ease-standard);
}
.nav-links a:hover { color: var(--color-accent-600); }
.nav-links a[aria-current="page"] {
  color: var(--color-accent-600);
  border-bottom-color: var(--color-accent-600);
  font-weight: var(--weight-semibold);
}
.nav-right { display: flex; align-items: center; gap: var(--space-6); }
.nav-cta-mobile { display: none; }

/* Hamburger toggle — hidden on desktop, shown at the mobile breakpoint below */
.nav-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  background: transparent;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-sm);
  color: var(--color-primary-900);
  cursor: pointer;
  flex-shrink: 0;
}
.nav-toggle .icon { width: 20px; height: 20px; }
.nav-toggle .icon-close { display: none; }
.nav-toggle[aria-expanded="true"] .icon-menu { display: none; }
.nav-toggle[aria-expanded="true"] .icon-close { display: block; }

.nav-backdrop { display: none; }

/* ===========================================================================
   PART 8 — FOOTER
   =========================================================================== */
.site-footer {
  background: var(--bg-dark);
  color: var(--text-on-dark-muted);
  padding-top: var(--space-8);
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1.2fr;
  gap: var(--space-6);
  padding-bottom: var(--space-7);
  border-bottom: 1px solid var(--border-dark);
}
.footer-brand .logo { color: #fff; margin-bottom: var(--space-4); }
.footer-brand .logo-mark { background: #fff; }
.footer-brand .logo-mark svg path { fill: var(--color-primary-900); }
.footer-brand p { font-size: var(--text-body); color: #9aa4bd; margin-bottom: var(--space-4); max-width: 42ch; }

.social-row { display: flex; gap: var(--space-2); }
.social-row a {
  width: 34px;
  height: 34px;
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, 0.08);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background var(--duration-base) var(--ease-standard);
}
.social-row a:hover { background: var(--color-accent-500); }
.social-row .icon { width: 16px; height: 16px; }

.footer-col h4 {
  color: #fff;
  font-size: var(--text-caption);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  margin-bottom: var(--space-4);
}
.footer-col ul li { margin-bottom: var(--space-3); font-size: var(--text-body); }
.footer-col ul li a { transition: color var(--duration-base) var(--ease-standard); }
.footer-col ul li a:hover { color: var(--color-accent-300); }

.footer-contact li {
  display: flex;
  gap: var(--space-2);
  align-items: flex-start;
  margin-bottom: var(--space-4);
  font-size: var(--text-body);
}
.footer-contact .icon { width: 16px; height: 16px; flex-shrink: 0; margin-top: 3px; color: var(--color-accent-300); }

.footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-5) 0;
  font-size: var(--text-small);
  color: #7c86a1;
  flex-wrap: wrap;
  gap: var(--space-2);
}
.footer-bottom a { transition: color var(--duration-base) var(--ease-standard); }
.footer-bottom a:hover { color: var(--color-accent-300); }
.footer-legal { display: flex; gap: var(--space-5); }

/* ===========================================================================
   Hero variants
   =========================================================================== */
.hero-dark {
  position: relative;
  background: linear-gradient(160deg, var(--color-primary-900) 0%, var(--color-primary-700) 60%, var(--color-primary-500) 100%);
  color: #fff;
  padding: 90px 0 70px;
  overflow: hidden;
}
.hero-dark::after {
  content: "";
  position: absolute;
  top: -120px;
  right: -120px;
  width: 480px;
  height: 480px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(95, 224, 201, 0.14) 0%, rgba(95, 224, 201, 0) 70%);
}
.hero-dark::before {
  content: "";
  position: absolute;
  bottom: -180px;
  left: 30%;
  width: 420px;
  height: 420px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(23, 168, 146, 0.10) 0%, rgba(23, 168, 146, 0) 70%);
}
.hero-dark .container { position: relative; z-index: 2; }
.hero-dark h1 { color: #fff; font-size: var(--text-h1); max-width: 620px; margin-bottom: var(--space-5); }
.hero-dark p.lead { color: var(--text-on-dark-muted); font-size: var(--text-body-lg); max-width: 560px; margin-bottom: var(--space-6); }
.hero-actions { display: flex; gap: var(--space-3); flex-wrap: wrap; }

.hero-photo {
  position: relative;
  color: #fff;
  padding: 130px 0 90px;
  background-size: cover;
  background-position: center;
}
.hero-photo::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(14, 28, 66, 0.92) 10%, rgba(14, 28, 66, 0.55) 60%, rgba(14, 28, 66, 0.35) 100%);
}
.hero-photo .container { position: relative; z-index: 2; }
.hero-photo h1 { color: #fff; font-size: var(--text-h1); max-width: 620px; margin-bottom: var(--space-5); }
.hero-photo p.lead { color: #d7dcea; font-size: var(--text-body-lg); max-width: 520px; margin-bottom: var(--space-6); }
.badge-pill {
  display: inline-block;
  background: rgba(23, 168, 146, 0.18);
  border: 1px solid rgba(95, 224, 201, 0.4);
  color: var(--color-accent-300);
  font-size: var(--text-caption);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  padding: 7px 16px;
  border-radius: var(--radius-full);
  margin-bottom: var(--space-5);
}

/* ===========================================================================
   Stats bar
   =========================================================================== */
.stats-bar { display: grid; grid-template-columns: repeat(4, 1fr); background: var(--surface-default); }
.stats-bar.dark { background: var(--bg-dark); }
.stats-bar.transparent { background: transparent; }
.stat { text-align: center; padding: var(--space-7) var(--space-4); border-right: 1px solid var(--border-default); }
.stats-bar.dark .stat { border-right: 1px solid var(--border-dark); }
.stat:last-child { border-right: none; }
.stat .num { font-family: var(--font-head); font-size: 34px; font-weight: var(--weight-bold); color: var(--color-primary-900); margin-bottom: var(--space-2); }
.stats-bar.dark .stat .num { color: var(--color-accent-300); }
.stat .label { font-size: var(--text-body); color: var(--text-body); }
.stats-bar.dark .stat .label { color: #aab3cb; }

/* ===========================================================================
   Sections / layout
   =========================================================================== */
.section { padding: var(--space-9) 0; }
.section-light { background: var(--bg-muted); }
.section-tight { padding: var(--space-8) 0; }

.section-head { max-width: 640px; margin-bottom: var(--space-7); }
.section-head.center { margin-left: auto; margin-right: auto; text-align: center; }
.section-head h2 { font-size: var(--text-h2); margin-bottom: var(--space-3); }
.section-head p { font-size: var(--text-body-lg); color: var(--text-body); }

.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-8); align-items: center; }
.two-col img { border-radius: var(--radius-md); box-shadow: var(--shadow-lg); width: 100%; height: 420px; object-fit: cover; }

.callout-box {
  margin-top: var(--space-5);
  background: var(--bg-muted);
  border-left: 3px solid var(--color-accent-500);
  border-radius: var(--radius-sm);
  padding: var(--space-5);
}
.callout-box h4 { font-size: var(--text-h4); margin-bottom: var(--space-2); }
.callout-box p { font-size: var(--text-body); }

/* ===========================================================================
   PART 5 — CARDS
   Shared base (.card) plus purpose-built variants. Feature/Testimonial/
   Blog/CTA cards are new components added for reuse on future pages —
   nothing here changes any existing page's content.
   =========================================================================== */
.card-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-5); }
.card-grid.cols-2 { grid-template-columns: repeat(2, 1fr); }
.card-grid.cols-4 { grid-template-columns: repeat(4, 1fr); }

.card {
  background: var(--surface-default);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  padding: var(--space-6);
  transition: transform var(--duration-base) var(--ease-standard), box-shadow var(--duration-base) var(--ease-standard);
}
.card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.card-icon { width: 22px; height: 22px; color: var(--color-accent-500); margin-bottom: var(--space-2); }
.card h3 { font-size: var(--text-h3); margin-bottom: var(--space-2); }
.card p { font-size: var(--text-body); }

/* Card-embedded text link ("Learn More" pattern) — replaces what was
   previously a one-off inline style repeated on every card */
.card-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-4);
  color: var(--color-accent-600);
  font-weight: var(--weight-semibold);
  font-size: 14px;
  transition: color var(--duration-base) var(--ease-standard);
}
.card-link .icon { width: 14px; height: 14px; }
.card-link:hover { color: var(--color-accent-400); }
.card-link:hover .icon { transform: translateX(3px); }
.card-link.on-dark { color: var(--color-accent-300); }
.card-link.on-dark:hover { color: #fff; }

/* Dark/teal card variants used on the homepage services grid — replace
   the previous inline background/border/text-colour overrides */
.card.card-navy { background: var(--color-primary-500); border-color: var(--color-primary-500); }
.card.card-navy h3 { color: #fff; }
.card.card-navy p { color: #c3cbe0; }
.card.card-navy .s-num { color: #9fb0d8; }

/* Dark variant of the base card — used where a card sits on a dark section */
.card.card-dark { background: var(--surface-dark); border-color: var(--surface-dark); }
.card.card-dark h3 { color: #fff; }
.card.card-dark p { color: var(--text-on-dark-muted); }

.industry-card {
  background: var(--surface-default);
  border: 1px solid var(--border-default);
  border-left: 3px solid var(--color-accent-500);
  border-radius: var(--radius-sm);
  padding: var(--space-5);
  margin-bottom: var(--space-4);
  transition: box-shadow var(--duration-base) var(--ease-standard);
}
.industry-card:hover { box-shadow: var(--shadow-sm); }
.industry-card:last-child { margin-bottom: 0; }
.industry-card h3 { font-size: 16px; margin-bottom: var(--space-1); }
.industry-card p { font-size: var(--text-body); }
.industry-card.industry-card-navy {
  background: var(--color-primary-500);
  border-color: var(--color-primary-500);
  border-left-color: var(--color-accent-500);
  color: #fff;
}
.industry-card.industry-card-navy h3 { color: #fff; }
.industry-card.industry-card-navy p { color: #c3cbe0; }

/* Feature Card — icon + headline + supporting copy, for differentiator
   / "why choose us" style content blocks. Replaces the previous ad-hoc
   inline-styled flex markup with a single reusable class. */
.feature-card {
  display: flex;
  gap: var(--space-5);
  align-items: flex-start;
}
.feature-card .feature-num {
  font-family: var(--font-head);
  font-size: 28px;
  font-weight: var(--weight-extrabold);
  color: var(--color-accent-500);
  line-height: 1;
  flex-shrink: 0;
}
.feature-card .feature-icon {
  width: 44px;
  height: 44px;
  border-radius: var(--radius-sm);
  background: var(--color-accent-100);
  color: var(--color-accent-600);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.feature-card .feature-icon .icon { width: 20px; height: 20px; }
.feature-card h3 { font-size: 19px; margin-bottom: var(--space-2); }
.feature-card p { font-size: var(--text-body); }

/* Testimonial Card — structure only. No testimonial content is added
   anywhere in this sprint; this defines the reusable shape for when
   verified client testimonials become available. */
.testimonial-card {
  background: var(--surface-default);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  padding: var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}
.testimonial-card .testimonial-quote {
  font-family: var(--font-head);
  font-size: var(--text-h4);
  font-weight: var(--weight-medium);
  color: var(--text-heading);
  line-height: var(--leading-snug);
}
.testimonial-card .testimonial-author {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-top: auto;
}
.testimonial-card .testimonial-avatar {
  width: 44px;
  height: 44px;
  border-radius: var(--radius-full);
  background: var(--bg-muted);
  border: 1px solid var(--border-default);
  flex-shrink: 0;
  object-fit: cover;
}
.testimonial-card .testimonial-name { font-size: 14.5px; font-weight: var(--weight-semibold); color: var(--text-heading); }
.testimonial-card .testimonial-role { font-size: var(--text-small); color: var(--text-muted); }

/* Blog Card — for the future Insights hub */
.blog-card {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--surface-default);
  transition: transform var(--duration-base) var(--ease-standard), box-shadow var(--duration-base) var(--ease-standard);
}
.blog-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.blog-card .blog-card-image {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  background: var(--bg-muted);
}
.blog-card .blog-card-body { padding: var(--space-5); }
.blog-card .blog-card-category {
  font-size: var(--text-caption);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-accent-600);
  margin-bottom: var(--space-2);
}
.blog-card h3 { font-size: 17px; margin-bottom: var(--space-2); }
.blog-card p { font-size: var(--text-body); color: var(--text-body); }
.blog-card .blog-card-meta { font-size: var(--text-small); color: var(--text-muted); margin-top: var(--space-3); }

/* CTA Card — compact, inline call-to-action block (distinct from the
   full-width .cta-banner section) for use inside content columns */
.cta-card {
  background: var(--bg-muted);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  padding: var(--space-6);
  text-align: left;
}
.cta-card h3 { font-size: var(--text-h4); margin-bottom: var(--space-2); }
.cta-card p { font-size: var(--text-body); margin-bottom: var(--space-4); }

/* ===========================================================================
   CTA banner (full-width)
   =========================================================================== */
.cta-banner {
  background: linear-gradient(160deg, var(--color-primary-900) 0%, var(--color-primary-700) 100%);
  color: #fff;
  padding: var(--space-8) 0;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.cta-banner::after {
  content: "";
  position: absolute;
  right: -60px;
  top: -60px;
  width: 320px;
  height: 320px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(23, 168, 146, 0.35) 0%, rgba(23, 168, 146, 0) 70%);
}
.cta-banner h2 { color: #fff; font-size: var(--text-h2); margin-bottom: var(--space-3); }
.cta-banner p { color: var(--text-on-dark-muted); font-size: var(--text-body-lg); max-width: 520px; margin: 0 auto var(--space-6); }
.cta-banner .hero-actions { justify-content: center; }

.cta-banner.split { text-align: left; padding: var(--space-7) 0; }
.cta-banner.split .container { display: flex; align-items: center; justify-content: space-between; gap: var(--space-5); flex-wrap: wrap; }
.cta-banner.split h3 { color: #fff; font-size: 22px; margin-bottom: var(--space-1); }
.cta-banner.split p { margin: 0; color: #aab3cb; }
.cta-banner.split .hero-actions { justify-content: flex-end; }

/* ===========================================================================
   Process steps
   =========================================================================== */
.step-card { background: var(--surface-default); border: 1px solid var(--border-default); border-radius: var(--radius-md); padding: var(--space-6); }
.step-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: var(--radius-sm);
  background: var(--color-accent-100);
  color: var(--color-accent-400);
  font-weight: var(--weight-bold);
  font-size: 14px;
  margin-bottom: var(--space-4);
}
.step-card h3 { font-size: 17px; margin-bottom: var(--space-2); }
.step-card p { font-size: var(--text-body); }

.check-list li {
  display: flex;
  gap: var(--space-3);
  align-items: flex-start;
  background: var(--bg-muted);
  border-radius: var(--radius-sm);
  padding: var(--space-4);
  margin-bottom: var(--space-3);
  font-size: var(--text-body);
  color: var(--text-heading);
  font-weight: var(--weight-medium);
}
.check-list .icon { width: 18px; height: 18px; flex-shrink: 0; color: var(--color-accent-500); margin-top: 2px; }

/* ===========================================================================
   Split panels (employer/seeker)
   =========================================================================== */
.split-panels { display: grid; grid-template-columns: 1fr 1fr; }
.panel { padding: 70px 56px; color: #fff; }
.panel.navy { background: var(--bg-dark); }
.panel.teal { background: var(--color-accent-500); }
.panel h2 { color: #fff; font-size: var(--text-h2); margin-bottom: var(--space-4); }
.panel > p { color: rgba(255, 255, 255, 0.78); margin-bottom: var(--space-6); }
.panel ul { margin-bottom: var(--space-7); }
.panel ul li { display: flex; gap: var(--space-3); align-items: flex-start; margin-bottom: var(--space-4); font-size: var(--text-body); color: rgba(255, 255, 255, 0.92); }
.panel ul li .icon { width: 18px; height: 18px; flex-shrink: 0; margin-top: 2px; color: var(--color-accent-300); }
.panel.teal ul li .icon { color: #fff; }
.panel.navy .btn-outline-dark:hover { background: rgba(255, 255, 255, 0.12); }
.panel.teal .eyebrow { color: #e7fff8; }

/* ===========================================================================
   PART 6 — FORMS
   Inputs, dropdowns, textareas, plus validation/error/success states.
   =========================================================================== */
.form-card {
  background: var(--surface-default);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  padding: var(--space-7);
  box-shadow: var(--shadow-md);
}
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-5); margin-bottom: var(--space-5); }

.field { margin-bottom: var(--space-5); }
.field label {
  display: block;
  font-size: var(--text-small);
  font-weight: var(--weight-semibold);
  color: var(--text-heading);
  margin-bottom: var(--space-2);
}
.field label .req { color: var(--color-accent-600); }

.field input,
.field select,
.field textarea {
  width: 100%;
  border: 1.5px solid var(--border-default);
  border-radius: var(--radius-sm);
  padding: 13px 15px;
  font-family: var(--font-body);
  font-size: var(--text-body);
  color: var(--text-heading);
  background: var(--surface-default);
  transition: border-color var(--duration-base) var(--ease-standard), box-shadow var(--duration-base) var(--ease-standard);
}
.field select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235b6577' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 16px;
  padding-right: 40px;
}
.field textarea { resize: vertical; min-height: 120px; }

.field input:hover,
.field select:hover,
.field textarea:hover { border-color: var(--border-strong); }

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

/* Validation states — toggled via JS by adding `is-invalid` / `is-valid`
   to the .field wrapper once a field has been interacted with. */
.field.is-invalid input,
.field.is-invalid select,
.field.is-invalid textarea {
  border-color: var(--color-error-700);
}
.field.is-invalid input:focus,
.field.is-invalid select:focus,
.field.is-invalid textarea:focus {
  box-shadow: 0 0 0 3px rgba(180, 35, 35, 0.18);
}
.field.is-valid input,
.field.is-valid select,
.field.is-valid textarea {
  border-color: var(--color-success-700);
}

.field-message {
  display: none;
  align-items: center;
  gap: var(--space-1);
  font-size: var(--text-small);
  margin-top: var(--space-2);
}
.field-message .icon { width: 14px; height: 14px; flex-shrink: 0; }
.field.is-invalid .field-message.field-error { display: flex; color: var(--color-error-700); }
.field.is-valid .field-message.field-success { display: flex; color: var(--color-success-700); }

/* Disabled fields */
.field input:disabled,
.field select:disabled,
.field textarea:disabled {
  background: var(--bg-muted);
  color: var(--text-muted);
  cursor: not-allowed;
}

.form-note { text-align: center; font-size: var(--text-small); color: var(--text-muted); margin-top: var(--space-4); }

/* Form-level status region — for the submit success/failure message.
   Kept visually hidden until populated; announced via aria-live. */
.form-status {
  display: none;
  align-items: flex-start;
  gap: var(--space-3);
  border-radius: var(--radius-sm);
  padding: var(--space-4);
  font-size: var(--text-body);
  margin-bottom: var(--space-5);
}
.form-status .icon { width: 20px; height: 20px; flex-shrink: 0; margin-top: 1px; }
.form-status.is-success { display: flex; background: var(--color-success-100); color: var(--color-success-700); }
.form-status.is-error { display: flex; background: var(--color-error-100); color: var(--color-error-700); }

/* ===========================================================================
   Contact page specifics
   =========================================================================== */
.contact-grid { display: grid; grid-template-columns: 0.85fr 1.4fr; gap: var(--space-6); align-items: start; }
.contact-info-card {
  background: var(--surface-default);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  padding: var(--space-5);
  display: flex;
  gap: var(--space-4);
  align-items: flex-start;
  margin-bottom: var(--space-5);
}
.contact-info-card .ic {
  width: 42px;
  height: 42px;
  border-radius: 9px;
  background: var(--color-accent-100);
  color: var(--color-accent-400);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.contact-info-card .ic .icon { width: 19px; height: 19px; }
.contact-info-card .label { font-size: var(--text-caption); font-weight: var(--weight-bold); letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--text-muted); margin-bottom: var(--space-1); }
.contact-info-card .value { font-size: 15.5px; font-weight: var(--weight-semibold); color: var(--text-heading); }
.contact-info-card .value.value-regular { font-weight: var(--weight-medium); }
.contact-info-card a.value { display: block; transition: color var(--duration-base) var(--ease-standard); }
.contact-info-card a.value:hover { color: var(--color-accent-600); }

.map-frame { border-radius: var(--radius-md); overflow: hidden; border: 1px solid var(--border-default); height: 260px; }
.map-frame iframe { width: 100%; height: 100%; border: 0; }

/* ===========================================================================
   Numbered offer rows (services page)
   =========================================================================== */
.service-block {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  overflow: hidden;
  margin-bottom: var(--space-5);
}
.service-block .s-copy, .service-block .s-process { padding: 44px 46px; }
.service-block .s-copy { background: var(--surface-default); }
.service-block .s-process { background: var(--bg-muted); }
.service-block.dark .s-copy { background: var(--bg-dark); color: #fff; }
.service-block.dark .s-copy h3, .service-block.dark .s-copy .s-num { color: #fff; }
.service-block.dark .s-copy p { color: var(--text-on-dark-muted); }
.service-block.dark .s-process { background: var(--bg-muted); }

.s-num { font-size: var(--text-small); font-weight: var(--weight-bold); color: var(--text-muted); margin-bottom: var(--space-3); letter-spacing: 0.05em; }
.service-block.dark .s-num { color: var(--color-accent-300); }
.s-copy h3 { font-size: 24px; margin-bottom: var(--space-2); }
.s-tagline { color: var(--color-accent-600); font-weight: var(--weight-semibold); font-size: 15px; margin-bottom: var(--space-4); }
.service-block.dark .s-tagline { color: var(--color-accent-300); }
.s-copy p.desc { font-size: var(--text-body); margin-bottom: var(--space-5); }
.s-sectors { font-size: var(--text-small); color: var(--text-muted); margin-bottom: var(--space-6); }
.s-sectors b { color: var(--text-heading); font-weight: var(--weight-bold); }
.service-block.dark .s-sectors, .service-block.dark .s-sectors b { color: var(--text-on-dark-muted); }

.s-process h4 { font-size: 12.5px; letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--text-muted); margin-bottom: var(--space-5); font-weight: var(--weight-bold); }
.process-list li { display: flex; gap: var(--space-4); align-items: flex-start; margin-bottom: var(--space-4); font-size: 14px; color: var(--text-heading); }
.process-list li:last-child { margin-bottom: 0; }
.process-num {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--color-accent-500);
  color: #fff;
  font-size: 12px;
  font-weight: var(--weight-bold);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

/* ===========================================================================
   PART 10 — ANIMATION
   Subtle, usability-oriented only. Everything here is disabled under
   prefers-reduced-motion via the global rule in base.css, plus explicit
   overrides below for the transform-based ones.
   =========================================================================== */

/* Scroll-reveal: elements marked [data-reveal] fade/slide in once when
   they enter the viewport (see assets/js/main.js). Content is fully
   visible by default — this only enhances, never gates, visibility. */
[data-reveal] {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity var(--duration-slow) var(--ease-standard),
              transform var(--duration-slow) var(--ease-standard);
}
[data-reveal].is-visible { opacity: 1; transform: translateY(0); }

@media (prefers-reduced-motion: reduce) {
  [data-reveal] { opacity: 1; transform: none; transition: none; }
}

/* Mobile nav panel open/close transition (see media query below for
   the panel's layout; this covers the motion only) */
.nav-links { transition: transform var(--duration-slow) var(--ease-standard), opacity var(--duration-base) var(--ease-standard); }

/* ===========================================================================
   Misc utilities
   =========================================================================== */
.text-center { text-align: center; }
.mt-40 { margin-top: var(--space-6); }

/* ===========================================================================
   RESPONSIVE
   =========================================================================== */
@media (max-width: 960px) {
  .two-col, .service-block, .split-panels, .contact-grid { grid-template-columns: 1fr; }
  .card-grid, .card-grid.cols-2, .card-grid.cols-4 { grid-template-columns: repeat(2, 1fr); }
  .stats-bar { grid-template-columns: repeat(2, 1fr); }
  .stat { border-bottom: 1px solid var(--border-default); }
  .footer-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 720px) {
  .container { padding: 0 20px; }
  .hero-dark h1, .hero-photo h1 { font-size: var(--text-h1); }
  .card-grid, .card-grid.cols-2, .card-grid.cols-4 { grid-template-columns: 1fr; }
  .form-row { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; }
  .footer-bottom { flex-direction: column; align-items: flex-start; }
  .cta-banner.split .container { flex-direction: column; align-items: flex-start; }
  .cta-banner.split .hero-actions { justify-content: flex-start; }
  .section { padding: var(--space-8) 0; }

  /* ---- Mobile navigation: replaces the old `display:none` approach.
     The panel becomes a fixed, full-height off-canvas drawer that
     slides in from the right and is fully keyboard/AT accessible. ---- */
  .nav-toggle { display: inline-flex; }

  /* Critical fix: `backdrop-filter` on .site-nav (desktop glass effect)
     establishes a new CSS containing block for any `position: fixed`
     descendant — including the off-canvas .nav-links panel and
     .nav-backdrop below. Left in place, the "fixed" panel and backdrop
     get trapped inside the ~72px header box instead of the viewport,
     making the mobile menu render as an unusable sliver. Disabling the
     blur only at this breakpoint (where the fixed panel is actually
     active) restores the viewport as the containing block. */
  .site-nav { backdrop-filter: none; }

  .nav-links {
    position: fixed;
    top: 0;
    right: 0;
    height: 100vh;
    width: min(320px, 85vw);
    background: var(--surface-default);
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    padding: 88px var(--space-6) var(--space-6);
    box-shadow: var(--shadow-lg);
    transform: translateX(100%);
    z-index: var(--z-overlay);
  }
  .nav-links[data-open="true"] { transform: translateX(0); }
  .nav-links a {
    width: 100%;
    padding: var(--space-4) 0;
    border-bottom: 1px solid var(--border-default);
    font-size: 17px;
  }
  .nav-links .nav-cta-mobile { display: block; margin-top: var(--space-5); width: 100%; }
  .nav-links .nav-cta-mobile .btn { width: 100%; }

  /* Primary CTA in the header duplicates into the mobile panel, so hide
     the standalone nav-right CTA at this breakpoint to avoid repetition */
  .nav-right { display: none; }

  .nav-backdrop {
    display: block;
    position: fixed;
    inset: 0;
    background: rgba(14, 28, 66, 0.45);
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--duration-base) var(--ease-standard);
    z-index: var(--z-overlay);
  }
  .nav-backdrop[data-open="true"] { opacity: 1; pointer-events: auto; }
}

@media (prefers-reduced-motion: reduce) {
  .nav-links, .nav-backdrop { transition: none; }
}