/* ==========================================================================
   AAERA Consultants — Enquiry Page
   Rebuilt to match the live aaeraconsultants.in design system exactly:
   colors, spacing, radii, and button/card styles are lifted from your
   real css/style.css root variables.

   Fonts: your site uses League Gothic (headings) + Poppins (body) from
   Google Fonts. To keep this page 100% third-party-free (per your request),
   headings use a condensed system-font stack that mimics League Gothic's
   tall/uppercase look, and body text uses your OS's default UI font
   (very close to Poppins in weight and spacing). Say the word if you'd
   rather load the exact Google Fonts your site already uses instead.
   ========================================================================== */

:root {
  /* ---- Colors, lifted directly from your site's root variables ---- */
  --primary-blue: #284eaf;
  --light-blue: #4a7fe8;
  --dark-blue: #1e3a8a;
  --btn-blue: #2563eb;
  --white: #fff;
  --card-bg: rgba(255, 255, 255, 0.95);
  --gold: #ffd700;
  --pathway-bg: #f8f9fa;
  --success-tint-bg: #e8f1fc;
  --footer-bg: #1e3a72;
  --footer-text: #ffffff;
  --footer-link-hover: #ffd700;
  --social-facebook: #1877f2;
  --social-youtube: #FF0000;

  --ink: #1e293b;
  --muted: #64748b;
  --border: #e0e7f1;
  --danger: #c0392b;
  --success: #1f9d55;

  /* ---- Radii & spacing, lifted directly from your site ---- */
  --border-radius: 14px;
  --card-radius: 20px;
  --btn-radius: 50px;

  /* ---- Fonts: system stacks approximating your site's type ---- */
  --font-primary: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-heading: "Arial Narrow", "Helvetica Neue Condensed", "Roboto Condensed", Arial, sans-serif;

  --shadow-card: 0 4px 20px rgba(0, 0, 0, 0.08);
  --shadow-card-hover: 0 8px 30px rgba(0, 0, 0, 0.12);
  --shadow-modal: 0 25px 80px rgba(0, 0, 0, 0.25);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
}

html { scroll-behavior: smooth; }

body {
  background: var(--white);
  color: var(--primary-blue);
  font-family: var(--font-primary);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  font-family: var(--font-heading);
  font-weight: 700;
}

a { color: inherit; }

.container {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 24px;
}

:focus-visible {
  outline: 3px solid var(--light-blue);
  outline-offset: 2px;
}

/* Lightweight scroll-reveal: elements start slightly lower + transparent,
   then ease in once scrolled into view (see js/landing.js). Respects
   prefers-reduced-motion via the rule at the bottom of this file. */
.reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}

.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* ---------------- Header / Nav (mirrors your live navbar) ---------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(255, 255, 255, 0.98);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 2px 20px rgba(0, 0, 0, 0.08);
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 24px;
  gap: 16px;
}

.brand {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

.brand-logo {
  height: 60px;
  width: auto;
  display: block;
}

.footer-logo {
  height: 55px;
  width: auto;
  display: block;
  margin-bottom: 10px;
}

.nav-cta {
  background: linear-gradient(90deg, #2842a2, #296cde, #007abf);
  color: #fff !important;
  padding: 12px 26px !important;
  border-radius: var(--btn-radius);
  text-decoration: none;
  font-weight: 700;
  font-size: 0.9rem;
  box-shadow: 0 4px 15px rgba(40, 66, 162, 0.3);
  transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.nav-cta:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(40, 66, 162, 0.4);
  background: linear-gradient(90deg, #296cde, #007abf, #2842a2);
  color: #fff !important;
}

/* Reusable section CTA button (same style, used after each section) */
.section-cta {
  text-align: center;
  margin-top: 40px;
}

.cta-btn {
  display: inline-block;
  background: linear-gradient(90deg, #2842a2, #296cde, #007abf);
  color: #fff;
  text-decoration: none;
  font-weight: 700;
  font-size: 1rem;
  padding: 15px 36px;
  border-radius: var(--btn-radius);
  box-shadow: 0 4px 15px rgba(40, 66, 162, 0.3);
  transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.cta-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(40, 66, 162, 0.4);
  background: linear-gradient(90deg, #296cde, #007abf, #2842a2);
}

.text-center { text-align: center; }

.section-header { margin-bottom: 40px; }

.section-header h2 {
  font-size: clamp(1.8rem, 3vw, 2.4rem);
  color: var(--primary-blue);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin: 0 0 14px;
  position: relative;
  display: inline-block;
}

.section-header h2::after {
  content: '';
  display: block;
  width: 64px;
  height: 4px;
  border-radius: 4px;
  margin: 12px auto 0;
  background: linear-gradient(90deg, #2842a2, #296cde, #007abf);
}

.section-header p {
  color: #667;
  font-size: 1rem;
  margin: 0;
}

/* ---------------- Hero (uppercase condensed heading like League Gothic) ---------------- */
.hero {
  background:
    radial-gradient(circle at 15% 20%, rgba(74, 127, 232, 0.18), transparent 45%),
    radial-gradient(circle at 85% 10%, rgba(255, 215, 0, 0.14), transparent 40%),
    radial-gradient(circle at 90% 80%, rgba(40, 78, 175, 0.12), transparent 45%),
    linear-gradient(180deg, #eef4ff 0%, #ffffff 75%);
  padding: 48px 0 0;
  position: relative;
  overflow: hidden;
}

.hero-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 32px;
  padding-bottom: 70px;
  position: relative;
  z-index: 2;
}

/* Decorative rotating globe motif, sitting behind all hero content. Pure
   inline SVG (lat/long grid lines) — no external images. */
.hero-globe {
  position: absolute;
  top: -60px;
  left: 50%;
  width: 620px;
  height: 620px;
  margin-left: -310px;
  opacity: 0.1;
  z-index: 0;
  pointer-events: none;
  animation: globeSpin 90s linear infinite;
}

.hero-globe svg { width: 100%; height: 100%; }

@keyframes globeSpin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* Flag orbit: a flowing strip of country-flag badges, always visible (not
   just on wide screens) — woven directly into the hero background so the
   "countries you can study in" idea is front and center on every device.
   Sizes step up symmetrically toward the UK badge in the middle for a
   deliberate, balanced arc rather than a random scatter. */
.flag-orbit {
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
  padding: 20px 24px 4px;
  max-width: 760px;
  margin: 0 auto;
}

.flag-badge {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--white);
  box-shadow: var(--shadow-card);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border: 3px solid var(--white);
  animation: flagFloat 5s ease-in-out infinite;
  flex-shrink: 0;
  transition: box-shadow 0.25s ease, border-color 0.25s ease;
  cursor: default;
}

.flag-badge svg {
  width: 100%;
  height: 100%;
  display: block;
  transition: transform 0.25s ease;
}

/* Hover: pause the float (so the pop is stable, not fighting the bob) and
   scale the flag artwork itself — the transform lives on the inner <svg>,
   not the badge, so it never conflicts with the badge's own animation. */
.flag-badge:hover {
  animation-play-state: paused;
  box-shadow: 0 14px 30px -6px rgba(40, 78, 175, 0.45);
  border-color: var(--gold);
  z-index: 5;
}

.flag-badge:hover svg {
  transform: scale(1.18);
}

.flag-badge.size-sm { width: 42px; height: 42px; }
.flag-badge.size-md { width: 52px; height: 52px; }
.flag-badge.size-lg { width: 64px; height: 64px; }
.flag-badge.size-xl { width: 78px; height: 78px; border-width: 4px; }

.flag-orbit .flag-badge:nth-child(1) { animation-delay: 0s; }
.flag-orbit .flag-badge:nth-child(2) { animation-delay: 0.45s; }
.flag-orbit .flag-badge:nth-child(3) { animation-delay: 0.9s; }
.flag-orbit .flag-badge:nth-child(4) { animation-delay: 1.35s; }
.flag-orbit .flag-badge:nth-child(5) { animation-delay: 1.8s; }
.flag-orbit .flag-badge:nth-child(6) { animation-delay: 2.25s; }
.flag-orbit .flag-badge:nth-child(7) { animation-delay: 2.7s; }

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

.hero-copy {
  padding-top: 20px;
  max-width: 720px;
  text-align: center;
}

.eyebrow {
  display: inline-block;
  background: rgba(255, 215, 0, 0.16);
  color: #7a6300;
  border: 1px solid rgba(255, 215, 0, 0.55);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 6px 14px;
  border-radius: 999px;
  margin-bottom: 18px;
}

.hero-copy h1 {
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 700;
  line-height: 1.15;
  margin: 0 0 10px;
  color: var(--primary-blue);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.hero-copy h1 span {
  display: block;
  color: var(--light-blue);
  font-size: 0.42em;
  font-weight: 600;
  text-transform: none;
  letter-spacing: 0;
  margin-top: 10px;
}

.hero-lede {
  color: #3a4a6b;
  font-size: 1.02rem;
  max-width: 46ch;
  margin: 18px auto 30px;
}

.hero-stats {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin: 0;
  padding: 0;
  max-width: 640px;
  margin: 0 auto;
}

.hero-stats li {
  background: var(--card-bg);
  border-radius: var(--border-radius);
  box-shadow: var(--shadow-card);
  padding: 18px 14px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 2px;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.hero-stats li:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-card-hover);
}

.hero-stats strong {
  font-family: var(--font-heading);
  font-size: 1.5rem;
  color: var(--primary-blue);
  font-weight: 700;
}

.hero-stats span {
  font-size: 0.76rem;
  color: #556;
  font-weight: 500;
}

/* ---------------- Form card (styled like your contact modal) ---------------- */
.form-card {
  background: var(--white);
  border-radius: var(--card-radius);
  box-shadow: var(--shadow-modal), 0 0 0 1px rgba(40, 78, 175, 0.08);
  overflow: hidden;
  width: 100%;
  max-width: 640px;
  position: relative;
  z-index: 2;
}

.form-card-header {
  background: linear-gradient(135deg, var(--primary-blue), var(--light-blue));
  padding: 26px 30px;
  color: var(--white);
}

.form-card-header h2 {
  margin: 0 0 4px;
  font-size: 1.7rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.form-card-sub {
  margin: 0;
  color: rgba(255, 255, 255, 0.9);
  font-size: 0.88rem;
}

.form-card-body {
  padding: 28px 28px 24px;
  background: #f8fafc;
}

.hp-field {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.field {
  margin-bottom: 18px;
}

.field-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

label, legend {
  display: block;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--primary-blue);
  margin-bottom: 6px;
  padding: 0;
}

.req { color: var(--danger); }
.optional { color: var(--muted); font-weight: 500; font-size: 0.8rem; }

input[type="text"],
input[type="tel"],
input[type="email"],
select,
textarea {
  width: 100%;
  padding: 12px 16px;
  border: 2px solid var(--border);
  border-radius: 10px;
  font-size: 0.95rem;
  font-family: inherit;
  color: var(--ink);
  background: var(--white);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

input::placeholder, textarea::placeholder { color: #999; }

input:focus, select:focus, textarea:focus {
  border-color: var(--primary-blue);
  box-shadow: 0 0 0 4px rgba(40, 78, 175, 0.1);
  outline: none;
}

input.invalid, select.invalid, textarea.invalid {
  border-color: var(--danger);
}

select {
  appearance: none;
  cursor: pointer;
  color: #444;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'><path d='M1 1l6 6 6-6' stroke='%23284eaf' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-repeat: no-repeat;
  background-position: right 16px center;
  padding-right: 38px;
}

textarea { resize: vertical; min-height: 90px; }

fieldset { border: none; padding: 0; margin: 0 0 18px; }

.radio-row, .checkbox-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.checkbox-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.radio-pill, .checkbox-pill {
  display: flex;
  align-items: center;
  gap: 8px;
  border: 2px solid var(--border);
  border-radius: 10px;
  padding: 9px 12px;
  font-size: 0.87rem;
  font-weight: 500;
  color: var(--ink);
  cursor: pointer;
  background: var(--white);
  transition: border-color 0.2s ease, background 0.2s ease;
}

.radio-pill:has(input:checked),
.checkbox-pill:has(input:checked) {
  border-color: var(--primary-blue);
  background: rgba(40, 78, 175, 0.06);
}

.radio-pill input, .checkbox-pill input {
  accent-color: var(--primary-blue);
  width: 16px;
  height: 16px;
}

.error-msg {
  display: block;
  color: var(--danger);
  font-size: 0.78rem;
  margin-top: 5px;
}

.form-footer-msg { font-size: 0.88rem; margin-bottom: 6px; }
.form-footer-msg.error { color: var(--danger); }

.submit-btn {
  width: 100%;
  background: linear-gradient(90deg, #2842a2, #296cde, #007abf);
  color: var(--white);
  border: none;
  border-radius: var(--btn-radius);
  padding: 16px 20px;
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  cursor: pointer;
  box-shadow: 0 4px 15px rgba(40, 66, 162, 0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}

.submit-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(40, 66, 162, 0.4);
  background: linear-gradient(90deg, #296cde, #007abf, #2842a2);
}

.submit-btn:disabled { opacity: 0.75; cursor: not-allowed; transform: none; }

.btn-spinner {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 2px solid rgba(255,255,255,0.4);
  border-top-color: #fff;
  display: none;
  animation: spin 0.7s linear infinite;
}

.submit-btn.loading .btn-spinner { display: inline-block; }

@keyframes spin { to { transform: rotate(360deg); } }

.privacy-note {
  font-size: 0.75rem;
  color: var(--muted);
  margin: 14px 0 0;
  text-align: center;
}

/* ---------------- Success state ---------------- */
.success-state { text-align: center; padding: 40px 28px; }

.success-icon {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: linear-gradient(135deg, #28a745, #20c997);
  color: #fff;
  font-size: 2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 18px;
  animation: successPop 0.5s ease-out;
}

@keyframes successPop {
  0% { transform: scale(0); opacity: 0; }
  50% { transform: scale(1.15); }
  100% { transform: scale(1); opacity: 1; }
}

.success-state h3 { margin: 0 0 8px; color: var(--primary-blue); font-size: 1.5rem; }
.success-state p { color: var(--muted); margin: 0; }

/* ---------------- Footer: logo + contact text only, nothing clickable ---------------- */
.site-footer {
  background: var(--footer-bg);
  color: var(--footer-text);
}

.footer-simple {
  text-align: center;
  padding: 48px 24px 32px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.footer-tagline {
  color: var(--footer-text);
  font-weight: 600;
  opacity: 0.9;
  margin: 4px 0 18px;
  font-size: 0.85rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.footer-contact-text {
  list-style: none;
  margin: 0 0 20px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.footer-contact-text li {
  font-size: 0.86rem;
  color: var(--footer-text);
  opacity: 0.85;
}

.footer-copyright-text {
  font-size: 0.78rem;
  color: #a9bcd8;
  margin: 10px 0 0;
  border-top: 1px solid rgba(255,255,255,0.12);
  padding-top: 18px;
  width: 100%;
  max-width: 360px;
}

/* ---------------- Carousels (self-built, no external slider lib) ---------------- */
.testimonials-section {
  background:
    radial-gradient(circle at 8% 15%, rgba(74, 127, 232, 0.12), transparent 45%),
    radial-gradient(circle at 94% 85%, rgba(255, 215, 0, 0.10), transparent 40%),
    var(--success-tint-bg);
  padding: 70px 0;
  position: relative;
  overflow: hidden;
}

.carousel {
  max-width: 720px;
  margin: 0 auto;
  position: relative;
  padding: 0 46px; /* room for the arrow buttons without overlapping the card */
}

.carousel-track {
  position: relative;
  min-height: 260px;
}

.carousel-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px) translateZ(0);
  transition: opacity 0.22s ease, transform 0.22s ease, visibility 0.22s;
  will-change: opacity, transform;
  backface-visibility: hidden;
}

.carousel-slide.is-active {
  opacity: 1;
  visibility: visible;
  transform: translateY(0) translateZ(0);
  position: relative;
}

/* Prev/next arrow buttons: sit inside the carousel's side padding so they
   never overlap the slide card, and never get clipped by the section's
   overflow:hidden. */
.carousel-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: none;
  background: var(--white);
  color: var(--primary-blue);
  font-size: 1.05rem;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: var(--shadow-card);
  transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease, color 0.2s ease;
}

.carousel-arrow:hover {
  background: var(--primary-blue);
  color: #fff;
  transform: translateY(-50%) scale(1.06);
  box-shadow: var(--shadow-card-hover);
}

.carousel-arrow:active {
  transform: translateY(-50%) scale(0.96);
}

.carousel-arrow-prev { left: 0; }
.carousel-arrow-next { right: 0; }

.carousel-dots {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 24px;
}

.carousel-dot {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  border: none;
  background: rgba(40, 78, 175, 0.25);
  cursor: pointer;
  padding: 0;
  transition: background 0.15s ease, transform 0.15s ease;
}

.carousel-dot.is-active {
  background: var(--primary-blue);
  transform: scale(1.15);
}

/* Testimonial slide content */
.testimonial-slide {
  background: var(--white);
  border-radius: var(--card-radius);
  box-shadow: var(--shadow-card);
  padding: 36px 40px 30px;
  text-align: center;
}

.testimonial-photo {
  width: 84px;
  height: 84px;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid var(--primary-blue);
  margin: 0 auto 14px;
  display: block;
}

/* Initials avatar for reviews without a self-hosted photo — keeps every
   testimonial looking finished without hotlinking a third-party image. */
.testimonial-avatar {
  width: 84px;
  height: 84px;
  border-radius: 50%;
  margin: 0 auto 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-heading);
  font-size: 1.4rem;
  font-weight: 700;
  color: #fff;
  background: linear-gradient(135deg, var(--primary-blue), var(--light-blue));
  border: 3px solid var(--primary-blue);
}

.quote-mark {
  font-size: 2.2rem;
  color: var(--light-blue);
  opacity: 0.35;
  line-height: 1;
  margin-bottom: 6px;
}

.testimonial-quote {
  font-size: 1.02rem;
  color: #333;
  line-height: 1.7;
  margin: 0 0 18px;
}

.author-name {
  display: block;
  font-weight: 700;
  color: var(--primary-blue);
  font-size: 1.02rem;
}

.author-meta {
  display: block;
  font-size: 0.82rem;
  color: var(--muted);
  margin-top: 2px;
}

/* ---------------- Leadership carousel ---------------- */
.leadership-section {
  padding: 70px 0;
  background:
    radial-gradient(circle at 92% 10%, rgba(40, 78, 175, 0.06), transparent 40%),
    var(--white);
  position: relative;
  overflow: hidden;
}

.leader-slide {
  background: var(--pathway-bg);
  border-radius: var(--card-radius);
  padding: 36px 32px;
  text-align: center;
  border-top: 4px solid var(--primary-blue);
}

.leader-photo {
  width: 110px;
  height: 110px;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid var(--primary-blue);
  margin: 0 auto 18px;
  display: block;
}

.leader-slide h3 {
  font-size: 1.3rem;
  color: var(--primary-blue);
  margin: 0 0 4px;
  text-transform: uppercase;
}

.leader-title {
  display: inline-block;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--light-blue);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 16px;
}

.leader-slide p {
  font-size: 0.92rem;
  color: #555;
  line-height: 1.7;
  margin: 0;
  text-align: left;
}

/* ---------------- Certifications ---------------- */
.certifications-section {
  padding: 70px 0;
  background:
    radial-gradient(circle at 6% 90%, rgba(255, 215, 0, 0.08), transparent 40%),
    var(--pathway-bg);
  position: relative;
  overflow: hidden;
}

.cert-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
}

.cert-card {
  background: var(--white);
  border-radius: var(--border-radius);
  padding: 10px;
  box-shadow: var(--shadow-card);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
  overflow: hidden;
}

.cert-card:hover {
  transform: translateY(-6px) scale(1.02);
  box-shadow: 0 14px 34px -10px rgba(40, 78, 175, 0.35);
}

.cert-card img {
  width: 100%;
  height: 150px;
  object-fit: cover;
  border-radius: 8px;
  display: block;
}

/* ---------------- Responsive ---------------- */
@media (max-width: 960px) {
  .cert-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 640px) {
  .field-row { grid-template-columns: 1fr; gap: 0; }
  .checkbox-grid { grid-template-columns: 1fr; }
  .hero-stats { grid-template-columns: 1fr 1fr; }
  .form-card-body { padding: 22px 18px 20px; }
  .form-card-header { padding: 22px 20px; }
  .hero { padding: 32px 0 0; }
  .hero-inner { padding-bottom: 50px; }
  .brand-logo { height: 44px; }
  .header-inner { padding: 8px 16px; }
  .nav-cta { padding: 9px 18px !important; font-size: 0.82rem; }
  .cert-grid { grid-template-columns: repeat(2, 1fr); }
  .testimonial-slide { padding: 30px 22px 26px; }
  .leader-slide { padding: 28px 22px; }
  .testimonials-section, .leadership-section, .certifications-section { padding: 50px 0; }
  .hero-globe { width: 380px; height: 380px; margin-left: -190px; top: -30px; }
  .flag-orbit { gap: 10px; padding: 14px 12px 4px; }
  .flag-badge { width: 40px; height: 40px; }
  .flag-badge.size-sm { width: 30px; height: 30px; }
  .flag-badge.size-md { width: 36px; height: 36px; }
  .flag-badge.size-lg { width: 46px; height: 46px; }
  .flag-badge.size-xl { width: 56px; height: 56px; border-width: 3px; }
  .carousel { padding: 0 38px; }
  .carousel-arrow { width: 34px; height: 34px; font-size: 0.9rem; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
  .flag-badge, .hero-globe { animation: none; }
}