/* =========================================================
   ASA — Design tokens
   ========================================================= */
:root {
  --bg-light: #E9F1FC;
  --bg-white: #FFFFFF;
  --blue: #0d6efd;
  --teal-deep: #06211E;
  --yellow: #ffc107;
  --dark-purple: #3b1478;
  --teal-dark: #290b3b;
  --mint: #22C57A;
  --mint-light: #B9F5D8;
  --sea-blue: #29abe2;
  --coral: #FF5A2B;
  --coral-light: #f18669;
  --ink: #0F1B1A;
  --gray-600: #4B5A63;
  --light-gray: #ededed;
  --gray-400: #8B9AA3;
  --radius-lg: 28px;
  --radius-md: 18px;
  --radius-pill: 999px;
  --shadow-card: rgba(0, 0, 0, 0.1) 0px 20px 25px -5px, rgba(0, 0, 0, 0.04) 0px 10px 10px -5px;
  --font-display: 'Plus Jakarta Sans', system-ui, sans-serif;
  --font-body: 'Inter', system-ui, sans-serif;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-body);
  color: var(--ink);
  background: var(--bg-white);
  -webkit-font-smoothing: antialiased;
}

h1,
h2,
h3,
h4 {
  font-family: var(--font-display);
  color: var(--ink);
  margin: 0;
}

p {
  color: var(--gray-600);
  line-height: 1.65;
  margin: 0;
}

a {
  text-decoration: none;
  color: inherit;
}

.container {
  max-width: 1220px;
}

:focus-visible {
  outline: 3px solid var(--coral);
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
  }
}

/* =========================================================
   Shared components
   ========================================================= */




.btn-pill {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 7px 28px;
  border-radius: var(--radius-pill);
  font-weight: 700;
  font-size: 0.98rem;
  font-family: var(--font-display);
  transition: transform .18s ease, box-shadow .18s ease;
  white-space: nowrap;
}

.btn-pill:hover {
  transform: translateY(-2px);
}

.btn-pill-mint {
  background: var(--coral);
  color: var(--bg-light);
  box-shadow: 0 14px 28px -10px rgba(34, 197, 122, 0.55);
}

.btn-pill-mint .pill-arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--dark-purple);
  color: #fff;
  font-size: 0.8rem;
}

.btn-pill-mint:hover {
  box-shadow: 0 18px 34px -10px rgba(34, 197, 122, 0.65);
}

.btn-pill-dark {
  background: var(--dark-purple);
  color: #fff;
  box-shadow: 0 14px 28px -12px rgba(6, 33, 30, 0.5);
}

.btn-pill-dark:hover {
  box-shadow: 0 18px 34px -12px rgba(6, 33, 30, 0.6);
  background: #0f4a43;
}

.asa-login {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 600;
  color: var(--ink);
}

.asa-login .arrow {
  transition: transform .18s ease;
}

.asa-login:hover .arrow {
  transform: translateX(3px);
}

.eyebrow-tag {
  display: inline-block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--sea-blue);
  margin-bottom: 14px;
}

.eyebrow-tag.light {
  color: var(--sea-blue);
}

.text-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 700;
  color: var(--teal-dark);
  border-bottom: 2px solid var(--coral-light);
  padding-bottom: 3px;
}

.text-link .arrow {
  transition: transform .18s ease;
}

.text-link:hover .arrow {
  transform: translateX(4px);
}

.text-link.small {
  font-size: 0.92rem;
}

.section-head {
  max-width: 640px;
  margin: 0 auto 48px;
  text-align: center;
}

.section-head h2 {
  font-size: clamp(1.9rem, 3.2vw, 2.5rem);
  font-weight: 800;
  color: var(--dark-purple);
  margin-bottom: 14px;
  line-height: 1.15;
}

.section-head p {
  font-size: 1.05rem;
}

/* =========================================================
   forms
   ========================================================= */
/* ===== Force clean layout for Employment History ===== */
.cj-card {
  background: #fff;
  border: 1px solid #d8d9db;
  border-radius: 12px;
  padding: 1.75rem;
}

.cj-card-head h3 {
  font-size: 1.25rem;
  font-weight: 600;
  margin-bottom: 0.25rem;
}

.cj-card-note {
  color: #6b7280;
  font-size: 0.9rem;
  margin-bottom: 1.5rem;
}

/* Each employment block */
.employment-row {
  background: #f9fafb;
  border: 1px solid #717171 !important;
  border-radius: 10px !important;
  padding: 1.5rem !important;
  margin-bottom: 1rem;
  position: relative;
}

/* Force Bootstrap-like grid even if other CSS fights it */
.employment-row .row {
  display: flex !important;
  flex-wrap: wrap !important;
  margin-left: -0.75rem !important;
  margin-right: -0.75rem !important;
}

.employment-row .col-md-6 {
  flex: 0 0 50% !important;
  max-width: 50% !important;
  padding-left: 0.75rem !important;
  padding-right: 0.75rem !important;
  box-sizing: border-box;
}

/* Mobile: stack everything */
@media (max-width: 767.98px) {
  .employment-row .col-md-6 {
    flex: 0 0 100% !important;
    max-width: 100% !important;
  }
}

.employment-row .form-label {
  display: block;
  font-weight: 500;
  margin-bottom: 0.35rem;
  font-size: 0.9rem;
}

.employment-row .form-control,
.employment-row .form-select {
  width: 100%;
}

/* Close button */
.cj-row-remove {
  z-index: 5;
}




/* =========================================================
   Navbar
   ========================================================= */

#asa-logo {
  max-width: 100px;
  margin-left: 1rem;
}

.asa-nav {
  position: sticky !important;
  top: 0;
  z-index: 100;
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(11, 59, 54, 0.06);
}

.asa-nav .navbar {
  padding: 16px 0;
}

.asa-logo {
  display: flex;
  flex-direction: column;
  line-height: 1;
}

.asa-logo-mark {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 58px;
  height: 40px;
}

.scribble-oval {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.scribble-oval.small {}

.scribble-oval.tiny {
  width: 34px;
  height: 22px;
  flex: 0 0 auto;
}

.asa-logo-text {
  position: relative;
  z-index: 1;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.05rem;
  color: var(--ink);
}

.asa-logo-text.light {
  color: #fff;
}

.asa-logo-sub {
  font-size: 0.68rem;
  color: var(--gray-400);
  margin-left: 2px;
  margin-top: 2px;
}

.asa-nav-links {
  gap: 34px;
}

.asa-nav-links .nav-link {
  font-weight: 500;
  color: var(--dark-purple);
  position: relative;
  font-family: poppins, system-ui, sans-serif;
  padding: 6px 0 !important;
}

.asa-nav-links .nav-link::after {
  content: '';
  position: absolute;
  left: 0;
  top: 145%;
  bottom: 0;
  width: 0;
  height: 3px;
  background: var(--coral);
  transition: width .2s ease;
}

.asa-nav-links .nav-link:hover::after {
  width: 100%;
}

.asa-nav-actions {
  display: flex;
  align-items: center;
  gap: 22px;
  margin-left: 20px;
}

.navbar-toggler {
  border: none;
  padding: 6px;
}

.navbar-toggler:focus {
  box-shadow: none;
}

.toggler-bar {
  display: block;
  width: 24px;
  height: 2.5px;
  background: var(--ink);
  margin: 5px 0;
  border-radius: 2px;
}

@media (max-width: 991.98px) {
  .asa-nav-links {
    gap: 6px;
    margin-top: 16px;
  }

  .asa-nav-links .nav-link {
    padding: 10px 0 !important;
  }

  .asa-nav-actions {
    margin-left: 0;
    margin-top: 14px;
    justify-content: space-between;
  }


  #asa-logo {
    margin-left: 4rem;
  }
}

/* =========================================================
   Mega menu
   Layout borrowed from the Amergis reference (full-width panel:
   intro column + link grid + promo card); the circular icon badges
   on each link are borrowed from the Avant reference. .asa-nav is
   already position:sticky above, which is what lets .mega-menu use
   position:absolute + width:100% to span the full header instead of
   just its own <li>.
   ========================================================= */
.nav-item.has-mega {
  display: flex;
  align-items: center;
  gap: 4px;
}

.mega-toggle {
  display: inline-flex;
  /* always visible — the chevron marks the item as a dropdown */
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
  border: none;
  background: transparent;
  color: var(--ink);
  padding: 0;
  cursor: pointer;
  pointer-events: none;
  /* desktop: purely a visual indicator — hover already opens the menu */
}

.mega-chevron {
  transition: transform .2s ease;
}

.nav-item.has-mega.is-open .mega-chevron {
  transform: rotate(180deg);
}

.mega-menu {
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  background: #fff;
  border-top: 1px solid rgba(11, 59, 54, 0.06);
  border-radius: 0 0 2rem 2rem;
  box-shadow: 0 32px 56px -28px rgba(11, 59, 54, 0.22);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity .18s ease, transform .18s ease, visibility .18s;
  z-index: 90;
}

@media (min-width: 992px) {

  .nav-item.has-mega:hover .mega-menu,
  .nav-item.has-mega:focus-within .mega-menu,
  .nav-item.has-mega.is-open .mega-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }
}

.mega-menu-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 40px 24px;
  display: grid;
  grid-template-columns: 1fr 1.7fr 1fr;
  gap: 40px;
}

.mega-col-intro {
  padding-left: 15px;
  border-right: 1px solid rgba(22, 45, 20, 0.08);
}

.mega-title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.3rem;
  color: var(--ink);
  margin-bottom: 14px;
}

.mega-desc {
  width: 90%;
  color: var(--gray-600);
  font-size: 0.92rem;
  line-height: 1.6;
  margin-bottom: 18px;
}

.mega-cta {
  font-weight: 700;
  font-size: 0.92rem;
}

.mega-links-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 22px 28px;
}

.mega-links-grid a {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--ink);
  font-weight: 600;
  font-size: 0.92rem;
  text-decoration: none;
}

.mega-links-grid a:hover {
  color: var(--coral);
}

.mega-links-grid a:hover .mega-link-icon {
  background: var(--coral);
  color: #fff;
}

.mega-link-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  flex: 0 0 auto;
  border-radius: var(--radius-pill, 999px);
  background: var(--mint-light);
  color: var(--teal-dark);
  transition: background .2s ease, color .2s ease;
}

.mega-col-promo {
  padding-left: 4px;
}

.mega-promo-card {
  display: block;
  text-decoration: none;
  color: inherit;
}

.mega-promo-photo {
  display: block;
  border-radius: var(--radius-lg);
  overflow: hidden;
  aspect-ratio: 4 / 3;
  margin-bottom: 14px;
  background: var(--bg-light);
}

.mega-promo-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.mega-promo-tag {
  display: inline-block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.7rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--coral);
  margin-bottom: 6px;
}

.mega-promo-title {
  display: block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--ink);
  margin-bottom: 10px;
  line-height: 1.35;
}

.mega-promo-text {
  display: block;
  font-size: 0.92rem;
  color: var(--ink);
  margin-bottom: 8px;
  line-height: 1.5;
}

.mega-promo-link {
  font-weight: 700;
  font-size: 0.88rem;
}

/* --- Mobile / tablet: the mega-menu drops into normal flow as a
   stacked accordion panel instead of a full-width floating overlay,
   and the chevron button becomes the only way to open it since hover
   doesn't exist on touch. --- */
@media (max-width: 991.98px) {
  .nav-item.has-mega {
    flex-wrap: wrap;
    justify-content: space-between;
  }

  .mega-toggle {
    display: inline-flex;
    width: 28px;
    height: 28px;
    pointer-events: auto;
    /* mobile: this is the real tap target that opens the accordion */
  }

  .mega-menu {
    position: static;
    width: auto;
    box-shadow: none;
    border-top: none;
    opacity: 1;
    visibility: visible;
    transform: none;
    transition: none;
    display: none;
    flex-basis: 100%;
    background: var(--bg-light);
    border-radius: var(--radius-md);
    margin: 10px 0 6px;
  }

  .nav-item.has-mega.is-open .mega-menu {
    display: block;
  }

  .mega-menu-inner {
    grid-template-columns: 1fr;
    gap: 24px;
    padding: 24px 20px;
  }

  .mega-col-intro {
    padding-right: 0;
    border-right: none;
    border-bottom: 1px solid rgba(11, 59, 54, 0.08);
    padding-bottom: 20px;
  }

  .mega-links-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .mega-col-promo {
    padding-left: 0;
  }

  .mega-promo-photo {
    max-width: 240px;
  }
}

/* --- Backdrop blur behind an open mega menu ---
   .asa-nav is z-index:100 and .nav-backdrop is a sibling sitting just
   under it at z-index:95, so the whole nav (including its open panel,
   which is a descendant of .asa-nav) paints above the backdrop and
   stays sharp, while everything else behind it blurs. Visibility is
   toggled by JS (body.mega-backdrop-visible) rather than CSS :hover,
   since it has to track hover, keyboard focus and the mobile tap-open
   state as one combined signal. Desktop only — on mobile the mega menu
   already pushes the page down in normal flow, so dimming it would
   fight the accordion rather than frame a floating panel. */
.nav-backdrop {
  position: fixed;
  inset: 0;
  z-index: 95;
  background: rgba(3, 12, 11, 0.55);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .25s ease, visibility .25s;
}

@media (min-width: 992px) {
  body.mega-backdrop-visible .nav-backdrop {
    opacity: 1;
    visibility: visible;
    backdrop-filter: blur(0px);
    -webkit-backdrop-filter: blur(0px);
    pointer-events: auto;
  }
}

/* =========================================================
   Hero
   ========================================================= */
.hero {
  background: var(--bg-light);
  padding: 64px 0 40px 0;
  overflow: hidden;
}

.hero-title {
  font-family: var(--font-display);
  font-size: clamp(2.6rem, 5.4vw, 4.2rem);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.01em;
  color: #3B1478;
  margin-bottom: 28px;
}

.hero-search-link {
  display: inline-block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.05rem;
  color: #3B1478;
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-thickness: 2px;
}

.hero-search-link:hover {
  color: var(--coral);
}

/* --- Hero slider ---
   The composition (letter, photo frame, insets) stays exactly as given
   below and exists only once in the markup — it is never cloned. Only
   the title text and the 3 photos are swapped by JS when the slide
   changes, so .hero-slider is just a positioning/hover-scope wrapper,
   not a sliding track. */
.hero-slider {
  position: relative;
}

/* Re-triggered by JS (class removed + reflow forced + re-added) on the
   title, the main photo and the 2 insets every time the slide content
   changes, so those pieces slide in from the right while .hero-letter —
   which never gets this class — stays completely static underneath
   them. */
@keyframes heroContentSlideIn {
  from {
    opacity: 0;
    transform: translateX(48px);
  }

  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.is-animating-in {
  animation: heroContentSlideIn .6s cubic-bezier(.25, .7, .4, 1) both;
}

/* --- Dots --- */
.hero-dots {
  z-index: 2;
  position: relative;
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-top: 28px;
}

.hero-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: none;
  padding: 0;
  background: rgba(59, 20, 120, 0.25);
  cursor: pointer;
  transition: background .2s ease, width .2s ease;
}

.hero-dot:hover {
  background: rgba(59, 20, 120, 0.45);
}

.hero-dot.is-active {
  position: relative;
  width: 26px;
  border-radius: 999px;
  background: #3B1478;
}

/* --- Hero art / photo ---
   .hero-letter is the big background "A" behind the photo — a plain
   text glyph in the display font rather than a hand-traced SVG, so it
   stays crisp at any size and is a one-line color/size change if the
   brand initial or accent color ever needs to move. The letter and the
   photo are both positioned absolutely inside a fixed-height container
   so the photo overlaps the lower-left of the letter, the same way the
   reference image overlaps the shape with the photo. */
.hero-art-photo {
  position: relative;
  height: clamp(360px, 38vw, 520px);
  margin-top: 12px;
  /* Nothing in this composition (letter, photo, insets) is interactive
     — .hero-letter already opted out below. With the dots row now
     sitting under the hero, .hero-photo-frame's own box (which by
     design hangs past .hero-art-photo's bottom edge, same bleed as the
     letter) can otherwise sit over the rightmost dots and swallow their
     clicks. Opting the whole composition out here is the robust fix,
     rather than chasing which specific child's box happens to overlap. */
  pointer-events: none;
}

.hero-letter {
  position: absolute;
  top: -55%;
  left: 136%;
  letter-spacing: -120px;
  transform: translateX(-50%);
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(297px, 83vw, 974px);
  line-height: 1;
  color: var(--coral);
  z-index: 0;
  user-select: none;
  pointer-events: none;
}

.hero-photo-frame {
  position: absolute;
  z-index: 1;
  left: 26%;
  transform: translateX(-47%);
  bottom: -43px;
  width: 51%;
  max-width: 308px;
}

.hero-photo-main {
  margin-bottom: -3rem;
  width: 206%;
  display: block;
  object-fit: cover;
}

.hero-photo-inset1 {
  position: absolute;
  top: 9%;
  left: 7%;
  width: 47%;
  min-width: 76px;
  max-width: 130px;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  overflow: hidden;
  border: 6px solid #fff;
  box-shadow: var(--shadow-card);
  z-index: 2;
  background: #fff;
}

.hero-photo-inset2 {
  position: absolute;
  top: 31%;
  left: -12%;
  width: 59%;
  min-width: 76px;
  max-width: 167px;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  overflow: hidden;
  border: 6px solid #fff;
  box-shadow: var(--shadow-card);
  z-index: 2;
  background: #fff;
}

.hero-photo-inset-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}


@media (max-width: 991.98px) {

  .hero-photo-main {
    margin-left: -2.6rem;
  }

  .hero-letter {
    position: absolute;
    top: -40%;
    left: 40%;
    letter-spacing: -70px;
    transform: translateX(-50%);
    font-weight: 800;
    font-size: 20rem;
  }

  .hero-art-photo {
    height: clamp(300px, 78vw, 420px);
    margin-top: 32px;
  }

  .hero-photo-frame {
    width: 58%;
  }

  .hero-photo-inset {
    border-width: 4px;
  }

  .hero-title {

    font-size: clamp(2.6rem, 5.4vw, 4.2rem);
    margin-left: 2rem;
    position: relative;
    z-index: 1;
  }

  .hero-photo-inset1,
  .hero-photo-inset2 {
    display: none;
  }

}

@media (max-width: 575.98px) {
  .hero-art-photo {
    height: clamp(260px, 84vw, 340px);
  }

  .hero-photo-frame {
    width: 64%;
    max-width: 240px;
  }
}


/* =========================================================
   Personal Recruiter
   ========================================================= */
.recruiter-section {
  padding: 84px 0 0px 0;
  background: #fff;
  overflow: hidden;
}

/* --- Photo + badge art ---
   The shield outline and the "A+" mark are both drawn with the same
   accent blue and sit behind the photo, the same layering approach as
   the hero's big letter: absolutely positioned within a shared
   container so the photo overlaps their lower-left. */
.recruiter-photo-wrap {
  position: relative;
  height: clamp(360px, 34vw, 460px);
  max-width: 480px;
  margin: 0 auto;
}

.recruiter-badge {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
}

.recruiter-mark {
  position: absolute;
  top: 10%;
  left: 4%;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(90px, 11vw, 250px);
  line-height: 1;
  color: #29ABE2;
  z-index: 0;
  user-select: none;
  pointer-events: none;
}

.recruiter-plus {
  position: absolute;
  color: #29ABE2;
  top: 8%;
  left: 71%;
  font-weight: 900;
  width: clamp(26px, 3.2vw, 40px);
  height: clamp(26px, 3.2vw, 40px);
  z-index: 0;
}

.recruiter-photo {
  position: absolute;
  z-index: 1;
  /* right: 0; */
  bottom: 0;
  width: 100%;
  height: 88%;
  object-fit: cover;
}

@media (max-width: 991.98px) {
  .recruiter-photo-wrap {
    max-width: 380px;
    height: clamp(320px, 62vw, 400px);
  }
}

/* --- Copy column --- */
.recruiter-eyebrow {
  display: block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.8rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #1B9FDE;
  margin-bottom: 14px;
}

.recruiter-title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.9rem, 3.4vw, 2.6rem);
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--dark-purple);
  margin-bottom: 28px;
  max-width: 560px;
}

.recruiter-list {
  list-style: none;
  margin: 0 0 32px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 22px;
}

.recruiter-list li {
  display: flex;
  align-items: flex-start;
  gap: 14px;
}

.recruiter-check {
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--coral);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 2px;
}

.recruiter-list li>span:last-child {
  font-size: 1rem;
  line-height: 1.55;
  color: var(--gray-600);
}

.recruiter-list strong {
  color: var(--ink);
  font-weight: 700;
}

.recruiter-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 15px 30px;
  border-radius: var(--radius-pill, 999px);
  background: var(--coral);
  color: #fff;
  font-weight: 700;
  font-size: 1rem;
  text-decoration: none;
  transition: background .15s ease;
}

.recruiter-cta:hover {
  background: #0B6BA3;
  color: #fff;
}

@media (max-width: 575.98px) {
  .recruiter-section {
    padding: 56px 0;
  }

  .recruiter-title {
    font-size: 1.7rem;
  }

}





/* =========================================================
   Full-Spectrum Solutions
   ========================================================= */
.solutions-section {
  padding: 84px 0;
  background: var(--bg-light);
}

.solutions-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 40px;
}

.solutions-head-text {
  max-width: 640px;
}

.solutions-title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.9rem, 3.2vw, 2.6rem);
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--dark-purple);
  margin-bottom: 14px;
}

.solutions-subtitle {
  font-size: 1.05rem;
  line-height: 1.6;
  color: var(--gray-600);
  margin-bottom: 0;
}

.solution-divider {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 18px 0;
}

.solution-icon {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 60px;
  height: 60px;
  border-radius: var(--radius-pill, 999px);
  background: rgba(255, 90, 43, 0.12);
  color: var(--coral, #FF5A2B);
}

/* --- Prev / next nav --- */
.solutions-nav {
  display: flex;
  gap: 12px;
  flex: 0 0 auto;
}

.solutions-nav-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: none;
  background: #CFE6F5;
  color: #2D5C8A;
  cursor: pointer;
  transition: background .15s ease, color .15s ease;
}

.solutions-nav-btn:hover:not(:disabled) {
  background: #2D5C8A;
  color: #fff;
}

.solutions-nav-btn:disabled {
  opacity: 0.4;
  cursor: default;
}

/* --- Card track --- */
.solutions-track {
  display: flex;
  gap: 22px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  padding-bottom: 4px;
  margin: 0 -4px;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.solutions-track::-webkit-scrollbar {
  display: none;
}

.solutions-card {
  position: relative;
  flex: 0 0 calc(25% - 16.5px);
  scroll-snap-align: start;
  aspect-ratio: 3 / 4;
  border-radius: var(--radius-lg, 20px);
  overflow: hidden;
  display: block;
  background: #d9d9d9;
  text-decoration: none;
}

.solutions-card-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.solutions-card-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(208, 89, 4, 0) 45%, #ff5a2bd6 100%);
  pointer-events: none;
  /* added: lets the overlay fade out smoothly once the water reveal rises over it on hover */
  opacity: 1;
  transition: opacity .45s ease;
}

.solutions-card-label {
  position: absolute;
  left: 20px;
  right: 20px;
  bottom: 20px;
  color: #fff;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.15rem;
  line-height: 1.3;
  z-index: 1;
  /* added: lets the label fade out smoothly once the water reveal rises over it on hover */
  transition: opacity .3s ease, transform .3s ease;
}

/* =========================================================
   Hover reveal — "water rising" article panel
   New: on hover/focus, a tinted panel rises from the bottom of
   the card like water filling a glass, with an animated wavy
   crest, then a short article about that card's topic fades in
   on top of it. All existing card info above is unchanged.
   ========================================================= */
.solutions-card-water {
  position: absolute;
  inset: 0;
  z-index: 2;
  overflow: hidden;
  background: linear-gradient(200deg, rgba(247, 247, 247, 0.28) 0%, var(--teal-dark, #07d3bf) 58%, var(--teal-deep, #740291) 100%);
  transform: translateY(101%);
  transition: transform .65s cubic-bezier(.65, 0, .35, 1);
  pointer-events: none;
}

@keyframes solutions-wave-drift {
  from {
    background-position: 0 0, 0 0;
  }

  to {
    background-position: -40px 0, -40px 0;
  }
}

.solutions-card-article {
  position: absolute;
  left: 20px;
  right: 20px;
  bottom: 20px;
  z-index: 3;
  color: #fff;
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .4s ease .12s, transform .4s ease .12s;
  pointer-events: none;
}

.solutions-card-article-title {
  display: block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.1rem;
  line-height: 1.3;
  margin-bottom: 8px;
}

.solutions-card-article-text {
  display: block;
  font-size: .85rem;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.88);
}

.solutions-card:hover .solutions-card-water,
.solutions-card:focus-within .solutions-card-water {
  transform: translateY(0);
}

.solutions-card:hover .solutions-card-article,
.solutions-card:focus-within .solutions-card-article {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.solutions-card:hover .solutions-card-overlay,
.solutions-card:focus-within .solutions-card-overlay {
  opacity: 0;
}

.solutions-card:hover .solutions-card-label,
.solutions-card:focus-within .solutions-card-label {
  opacity: 0;
  transform: translateY(8px);
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {

  .solutions-card-water,
  .solutions-card-article,
  .solutions-card-overlay,
  .solutions-card-label {
    transition-duration: .01ms !important;
  }

  .solutions-card-wave {
    animation: none;
  }
}

@media (max-width: 991.98px) {
  .solutions-card {
    flex-basis: calc(49% - -12px);
  }
}

@media (max-width: 575.98px) {
  .solutions-section {
    padding: 56px 0;
  }

  .solutions-head {
    flex-direction: column;
    align-items: flex-start;
  }

  .solutions-nav {
    align-self: flex-end;
  }

  .solutions-card {
    flex-basis: calc(74% - 11px);
  }

  .solutions-card-label {
    font-size: 1.02rem;
  }

  .solutions-card-article-title {
    font-size: 1rem;
  }

  .solutions-card-article-text {
    font-size: .8rem;
  }
}




/* =========================================================
   About / stats
   ========================================================= */
.about {
  background: var(--dark-purple);
  padding: 90px 0;
  color: #fff;
}

.about-title {
  color: #fff;
  font-size: clamp(1.9rem, 3vw, 2.4rem);
  font-weight: 800;
  line-height: 1.15;
  margin: 10px 0 20px;
}

.about-copy {
  color: rgba(255, 255, 255, 0.72);
  margin-bottom: 26px;
  font-size: 1.02rem;
}

.about .text-link {
  color: var(--sea-blue);
  border-bottom-color: var(--sea-blue);
}

.about .find-workers-img {
  border-radius: 1rem;
  width: 630px;
}

@media (max-width: 767.98px) {
  .about .find-workers-img {
    width: 330px;
  }
}


.stat-card {
  background: var(--bg-light);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--radius-md);
  padding: 26px 20px;
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* The hover lift lives on the wrapping column, not on .stat-card itself.
   A scroll-reveal script on the live page writes an inline
   `transform: translateY(0px)` straight onto .stat-card once it animates
   in, and an inline style always wins over a stylesheet's :hover rule for
   that same property — so a `.stat-card:hover { transform: ... }` rule
   can never move it. Animating the column instead sidesteps that fight
   completely, since nothing else touches this class. */
.stat-card-col {
  transition: transform .25s ease;
}

.stat-card-col:hover {
  transform: translateY(-10px);
}

.stat-card-col:hover .stat-card {
  box-shadow: var(--shadow-card);
}

.stat-num {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.4rem;
  color: var(--dark-purple);
  line-height: 1;
}

.stat-num .unit {
  font-size: 0.8rem;
  margin-left: 2px;
  color: var(--sea-blue);
}

.stat-label {
  color: rgba(0, 0, 0, 0.72);
  font-size: 0.9rem;
}



/* =========================================================
   Solutions
   ========================================================= */
.solutions {
  padding: 90px 0 100px;
  background: var(--bg-light);
}

.solution-card {
  background: #fff;
  border-radius: var(--radius-lg);
  padding: 32px 28px;
  height: 100%;
  border: 1px solid rgba(11, 59, 54, 0.06);
  transition: transform .2s ease, box-shadow .2s ease;
}

.solution-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-card);
}

.solution-card.featured {
  background: var(--dark-purple);
  border-color: transparent;
}

.solution-card.featured .solution-tag {
  color: var(--sea-blue);
}

.solution-card.featured h3,
.solution-card.featured p {
  color: #fff;
}

.solution-card.featured p {
  color: rgba(255, 255, 255, 0.72);
}

.solution-card.featured .text-link {
  color: var(--mint);
  border-bottom-color: rgba(34, 197, 122, 0.35);
}

.solution-tag {
  display: block;
  width: fit-content;
  margin: 0 auto 14px;
  text-align: center;
  font-weight: 700;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--sea-blue);
}

.solution-card h3 {
  text-align: center;
  font-size: 1.3rem;
  font-weight: 800;
  margin-bottom: 10px;
}

.solution-card p {
  margin-bottom: 18px;
  font-size: 0.96rem;
}

/* =========================================================
   Our Services
   ========================================================= */
.services {
  padding: 90px 0 100px;
  background: var(--bg-light);
}

/* Outer card is now just the flip "stage": it holds the lift/shadow
   hover treatment and the 3D perspective for the page-turn below.
   Its own background/border/padding moved onto .services-card-face,
   since the front and back are now two separate faces. */
.services-card {
  height: 100%;
  border-radius: var(--radius-lg);
  perspective: 1600px;
  transition: transform .2s ease, box-shadow .2s ease;
}

.services-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-card);
}

/* Rotates as one unit like a book page turning from right to left: the
   right edge leads, lifting toward the viewer and sweeping around to
   settle on the left, revealing the back face underneath. (Pivoting on
   the card's own right edge instead of its center would work in theory,
   but a true edge-anchored 180deg Y rotation mirrors the whole box out
   past that edge — it would shift on top of the next card rather than
   flipping in place, so the pivot stays centered.) */
.services-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  transition: transform .7s cubic-bezier(.4, .2, .2, 1);
}

.services-card:hover .services-card-inner,
.services-card:focus-within .services-card-inner {
  transform: rotateY(180deg);
}

.services-card-face {
  background: #fff;
  border-radius: var(--radius-lg);
  padding: 40px 37px;
  border: 1px solid rgba(11, 59, 54, 0.06);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  overflow: hidden;
}

/* Photo header on the front face: a real <img>, bled edge-to-edge using
   the face's own padding as the bleed amount, with a translucent pill
   badge overlaid on top of it in place of the old icon. */
.services-card-photo {
  position: relative;
  margin: -32px -28px 20px;
  border-radius: 20px;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: #d9d9d9;
}

.services-card-photo img {
  width: 100%;
  height: 100%;
  border-radius: 20px;
  object-fit: cover;
  display: block;
}

.services-card-badge {
  position: absolute;
  top: 14px;
  left: 14px;
  display: inline-flex;
  align-items: center;
  padding: 8px 16px;
  border-radius: var(--radius-pill, 999px);
  background: rgba(15, 23, 42, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.35);
  color: #fff;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.82rem;
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}

.services-card-front {
  position: relative;
  height: 100%;
}

.services-card-back {
  position: absolute;
  inset: 0;
  transform: rotateY(180deg);
  pointer-events: none;
}

.services-card:hover .services-card-front,
.services-card:focus-within .services-card-front {
  pointer-events: none;
}

.services-card:hover .services-card-back,
.services-card:focus-within .services-card-back {
  pointer-events: auto;
}

.services-card.featured .services-card-face {
  background: var(--dark-purple);
  border-color: transparent;
}

.services-card.featured .services-tag {
  color: var(--sea-blue);
}

.services-card.featured h3,
.services-card.featured p {
  color: #fff;
}

.services-card.featured p {
  color: rgba(255, 255, 255, 0.72);
}

.services-card.featured .text-link {
  color: var(--mint);
  border-bottom-color: rgba(34, 197, 122, 0.35);
}

.services-tag {
  position: relative;
  z-index: 1;
  display: block;
  width: fit-content;
  margin: 0 auto 14px;
  text-align: center;
  font-weight: 700;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--sea-blue);
}

.services-card h3 {
  position: relative;
  z-index: 1;
  text-align: left;
  font-size: 1.3rem;
  font-weight: 800;
  margin-bottom: 10px;
}

.services-card p {
  position: relative;
  z-index: 1;
  margin-bottom: 18px;
  font-size: 0.96rem;
}

.services-card-face .text-link {
  position: relative;
  z-index: 1;
}

@media (prefers-reduced-motion: reduce) {
  .services-card-inner {
    transition-duration: .01ms;
  }
}




/* =========================================================
   Testimonial
   ========================================================= */
.testimonial {
  padding: 20px 0 100px;
}

.testimonial-card {
  max-width: 760px;
  margin: 0 auto;
  text-align: center;
  background: var(--bg-light);
  border-radius: var(--radius-lg);
  padding: 50px 40px;
}

.quote-mark {
  width: 46px;
  height: 36px;
  margin-bottom: 18px;
}

.testimonial-card p {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1rem;
  color: var(--ink);
  line-height: 1.45;
  margin-bottom: 24px;
}

.author-name {
  display: block;
  font-weight: 800;
  font-family: var(--font-display);
}

.author-role {
  display: block;
  font-size: 0.85rem;
  color: var(--gray-400);
}

/* =========================================================
   CTA
   ========================================================= */
.cta {
  padding: 0 0 100px;
}

.cta-box {
  background: var(--mint);
  border-radius: var(--radius-lg);
  padding: 48px 50px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 30px;
  flex-wrap: wrap;
}

.cta-box h2 {
  font-size: 1.9rem;
  font-weight: 800;
  color: var(--teal-deep);
  margin-bottom: 8px;
}

.cta-box p {
  color: rgba(6, 33, 30, 0.72);
  font-size: 1.02rem;
}

.cta-actions {
  display: flex;
  align-items: center;
  gap: 22px;
  flex-wrap: wrap;
}

.cta-box .asa-login {
  color: var(--teal-deep);
}





/* =========================================================
   Testimonials
   ========================================================= */
.testimonials-section {
  padding: 84px 0;
  background: #fff;
}

.testimonials-section .section-head {
  margin-bottom: 40px;
}

/* --- Track --- */
.testimonial-track {
  display: flex;
  gap: 22px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  padding-bottom: 30px;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.testimonial-track::-webkit-scrollbar {
  display: none;
}

/* --- Card shell ---
   Both faces are absolutely positioned and fill the card, so the card's
   own size is fixed via aspect-ratio; swapping opacity between the two
   faces on hover gives a smooth crossfade instead of a layout jump. */
.testimonial-card {
  position: relative;
  flex: 0 0 clamp(228px, 22vw, 270px);
  aspect-ratio: 3 / 4;
  border-radius: var(--radius-lg, 20px);
  overflow: hidden;
  scroll-snap-align: start;
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.07);
  box-shadow: var(--shadow-card, 0 10px 30px rgba(0, 0, 0, 0.06));
}

.testimonial-face {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  padding: 26px 22px;
  transition: opacity 0.45s ease;
}

/* --- Default face: avatar, quote, name/role --- */
.testimonial-face--default {
  opacity: 1;
  z-index: 2;
  background: var(--dark-purple);
}

.testimonial-avatar {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  overflow: hidden;
  flex: 0 0 auto;
  margin-bottom: 18px;
  border: 2px solid #fff;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.06);
}

.testimonial-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.testimonial-quote {
  flex: 1 1 auto;
  font-size: 0.92rem;
  line-height: 1.55;
  color: #faf7f7 !important;
  margin: 0 0 18px;
}

.testimonial-person {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.testimonial-name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.9rem;
  color: #fefcfc;
}

.testimonial-role {
  font-size: 0.8rem;
  color: var(--coral-light) !important;
}

/* --- Video face: thumbnail + play button, shown on hover --- */
.testimonial-face--video {
  opacity: 0;
  z-index: 1;
  padding: 0;
  pointer-events: none;
}

.testimonial-video-thumb {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.06);
  transition: transform 0.6s ease;
}

.testimonial-video-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(11, 15, 20, 0.15) 0%, rgba(11, 15, 20, 0.15) 55%, rgba(11, 15, 20, 0.8) 100%);
}

.testimonial-face--video .testimonial-avatar {
  position: absolute;
  top: 22px;
  left: 22px;
  z-index: 2;
  margin-bottom: 0;
  border-color: rgba(255, 255, 255, 0.7);
}

.testimonial-play-btn {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0.85);
  width: 60px;
  height: 60px;
  border-radius: 50%;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 0, 0, 0.75);
  backdrop-filter: blur(1px);
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.45s ease 0.05s, transform 0.45s ease 0.05s, background 0.15s ease;
}

.testimonial-play-btn:hover {
  background: rgba(255, 0, 0, 0.92);
}

.testimonial-person--video {
  position: absolute;
  left: 22px;
  right: 22px;
  bottom: 20px;
  z-index: 2;
  color: #fff;
}

.testimonial-person--video .testimonial-name {
  color: #fff;
}

.testimonial-person--video .testimonial-role {
  color: rgba(255, 255, 255, 0.78);
}

/* --- Hover / focus: crossfade to the video face --- */
.testimonial-card:hover .testimonial-face--default,
.testimonial-card:focus-within .testimonial-face--default {
  opacity: 0;
  pointer-events: none;
}

.testimonial-card:hover .testimonial-face--video,
.testimonial-card:focus-within .testimonial-face--video {
  opacity: 1;
  pointer-events: auto;
}

.testimonial-card:hover .testimonial-video-thumb,
.testimonial-card:focus-within .testimonial-video-thumb {
  transform: scale(1);
}

.testimonial-card:hover .testimonial-play-btn,
.testimonial-card:focus-within .testimonial-play-btn {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}

/* --- Prev / next nav, centered under the track --- */
.testimonial-nav {
  display: flex;
  justify-content: center;
  gap: 14px;
  margin-top: 36px;
}

.testimonial-nav-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: none;
  background: var(--bg-light, #F7F6F3);
  color: var(--ink, #1C1C1C);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}

.testimonial-nav-btn:hover:not(:disabled) {
  background: var(--coral, #FF5A2B);
  color: #fff;
}

.testimonial-nav-btn:disabled {
  opacity: 0.4;
  cursor: default;
}

@media (max-width: 575.98px) {
  .testimonials-section {
    padding: 56px 0;
  }

  .testimonial-card {
    flex-basis: 76%;
  }
}

/* =========================================================
   YouTube video modal — expands from a click on .testimonial-play-btn
   ========================================================= */
.yt-modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(11, 15, 20, 0.78);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0s linear 0.3s;
}

.yt-modal-backdrop.is-open {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.3s ease, visibility 0s linear 0s;
}

.yt-modal {
  position: relative;
  width: 100%;
  max-width: 900px;
  transform: scale(0.92);
  opacity: 0;
  transition: transform 0.35s ease, opacity 0.35s ease;
}

.yt-modal-backdrop.is-open .yt-modal {
  transform: scale(1);
  opacity: 1;
}

.yt-modal-frame {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius-lg, 20px);
  overflow: hidden;
  background: #000;
  box-shadow: 0 30px 60px rgba(0, 0, 0, 0.4);
}

.yt-modal-frame iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.yt-modal-close {
  position: absolute;
  top: -46px;
  right: 0;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  cursor: pointer;
  transition: background 0.15s ease;
}

.yt-modal-close:hover {
  background: rgba(255, 255, 255, 0.22);
}

@media (max-width: 575.98px) {
  .yt-modal-close {
    top: -40px;
  }
}






/* =========================================================
   Mobile App Promo
   ========================================================= */
.app-promo-section {
  padding: 84px 0;
  background: #fff;
}

.app-promo-card {
  overflow: hidden;
  border-radius: 300px 300px 0px 0px;
  background: var(--dark-purple, #440253);
  padding: clamp(40px, 6vw, 72px) clamp(28px, 6vw, 64px);
  margin-bottom: -9rem;
}

.app-promo-arc {
  position: static;
  top: -55%;
  left: -15%;
  width: 75%;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, var(--mint-light, #B9F5D8) 0%, var(--mint, #3ED598) 45%, transparent 72%);
  opacity: 0.3;
  pointer-events: none;
}

/* --- Copy column --- */
.app-promo-eyebrow {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 24px;
}

.app-promo-logo {
  width: 32px;
  height: 32px;
  margin-left: 9rem;
  margin-bottom: -1rem;
  border-radius: 9px;
  background: var(--sea-blue, #ffc107);
  color: var(--teal-deep, #0B2E2B);
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 0.95rem;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
}

.app-promo-eyebrow span:last-child {
  color: #fff;
  margin-top: -1rem;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.95rem;
  margin-bottom: -2rem;
}

.app-promo-title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.9rem, 3.4vw, 2rem);
  line-height: 1.15;
  color: #fff;
  margin-bottom: 20px;
  max-width: 520px;
  margin-left: 9rem;
}

.app-promo-text {
  font-size: 1rem;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.78);
  max-width: 480px;
  margin-bottom: 28px;
}

.app-promo-list {
  list-style: none;
  margin: 0 0 28px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.app-promo-list li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.app-promo-check {
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--mint, #3ED598);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 2px;
}

.app-promo-list li>span:last-child {
  font-size: 0.95rem;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.85);
}

.app-promo-list strong {
  color: #fff;
  font-weight: 700;
}

.app-promo-signup {
  font-size: 0.88rem;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.65);
  max-width: 440px;
  margin-bottom: 20px;
  margin-left: 9rem;
}

/* --- App store badges --- */
.app-promo-badges {
  display: flex;
  flex-wrap: wrap;
  margin-left: 9rem;
  gap: 14px;
}

.app-badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 18px;
  border-radius: 12px;
  background: #7b00ab;
  border: 1px solid rgba(255, 255, 255, 0.14);
  text-decoration: none;
  transition: background 0.15s ease, transform 0.15s ease;
}

.app-badge:hover {
  background: #1a1a1a;
  transform: translateY(-1px);
}

.app-badge span {
  display: flex;
  flex-direction: column;
  line-height: 1.15;
}

.app-badge em {
  font-style: normal;
  font-size: 0.62rem;
  color: rgba(255, 255, 255, 0.75);
}

.app-badge strong {
  font-family: var(--font-display);
  font-size: 0.98rem;
  font-weight: 700;
  color: #fff;
}

/* --- Phone mockup --- */
.app-promo-phone-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px 0;
}

.app-promo-phone {
  z-index: 1 !important;
  position: relative;
  width: 80%;
  height: 40%;
  transform: rotate(0deg);
}

.app-promo-screen {
  width: 100%;
  height: 100%;
  background: #eef3f1;
  border-radius: 28px;
  overflow: hidden;
  padding: 18px 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.app-job-card {
  background: #fff;
  border-radius: 14px;
  padding: 12px 14px;
  box-shadow: 0 6px 16px rgba(11, 46, 43, 0.08);
}

.app-promo-section {
  padding: 0 3rem 4rem;
}

.app-job-card-tag {
  display: inline-block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.6rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--teal-dark, #0F4A44);
  margin-bottom: 6px;
}

.app-job-card-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.78rem;
  color: var(--ink, #1C1C1C);
  margin: 0 0 4px;
}

.app-job-card-pay {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 0.9rem;
  color: var(--coral, #FF5A2B);
  margin: 0 0 4px;
}

.app-job-card-meta {
  font-size: 0.68rem;
  color: var(--gray-600, #6B7280);
  margin: 0;
}

@media (max-width: 991.98px) {
  .app-promo-phone {
    width: 200px;
    transform: rotate(4deg);

  }
}

@media (max-width: 575.98px) {
  .app-promo-card {
    border-radius: 32px;
  }

  .app-promo-phone {
    display: none;

  }

  .app-promo-logo {
    margin-left: 0rem;
  }

  .app-promo-title {
    font-size: 1.7rem;
    margin-left: 0;
  }

  .app-promo-signup {
    margin-left: 0;
  }

  .app-promo-badges {
    flex-direction: none;
    align-items: flex-start;
    margin-left: 0;
  }

  .app-promo-section {
    padding: 0;
    margin-bottom: 3rem;
  }
}










/* =========================================================
   Footer
   ========================================================= */
.asa-footer {
  background: var(--dark-purple);
  color: rgba(255, 255, 255, 0.7);
  padding: 70px 0 30px;
}

.footer-top {
  display: grid;
  grid-template-columns: 1.7fr 1fr 1fr 1fr 1.3fr;
  gap: 40px;
  padding-bottom: 44px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.footer-brand p {
  color: rgba(255, 255, 255, 0.55);
  margin-top: 14px;
  font-size: 0.92rem;
  max-width: 240px;
}

/* --- Contact block (phone / emergency / address) --- */
.footer-contact {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 22px;
}

.footer-contact-item {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  color: rgba(255, 255, 255, 0.7);
  font-size: 0.85rem;
  text-decoration: none;
  max-width: 240px;
}

.footer-contact-item svg {
  flex: 0 0 auto;
  margin-top: 2px;
  color: var(--mint);
}

a.footer-contact-item:hover {
  color: var(--mint);
}

.footer-contact-phone {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.05rem;
  color: #fff;
}

.footer-contact-phone:hover {
  color: var(--mint);
}

/* --- Social icon row --- */
.footer-social {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 22px;
}

.footer-social-link {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  transition: background 0.15s ease, color 0.15s ease;
}

.footer-social-link:hover {
  background: var(--mint);
  color: var(--teal-deep);
}

/* --- Link columns --- */
.footer-col h4 {
  color: #fff;
  font-size: 0.85rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin-bottom: 16px;
}

.footer-col a {
  display: block;
  color: rgba(255, 255, 255, 0.65);
  font-size: 0.92rem;
  margin-bottom: 12px;
  transition: color .15s ease;
}

.footer-col a:hover {
  color: var(--mint);
}

/* --- Certification + app download column --- */
.footer-badges {
  display: flex;
  flex-direction: column;
  gap: 22px;
}

.footer-cert {
  display: flex;
  align-items: center;
  gap: 12px;
}

.footer-cert-seal {
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: #D4A72C;
  display: flex;
  align-items: center;
  justify-content: center;
}

.footer-cert span:last-child {
  font-size: 0.82rem;
  line-height: 1.3;
  color: rgba(255, 255, 255, 0.75);
  max-width: 150px;
}

.footer-badges h4 {
  color: #fff;
  font-size: 0.85rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin-bottom: -6px;
}

.footer-app-badges {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.footer-app-badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 14px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  background: rgba(255, 255, 255, 0.05);
  text-decoration: none;
  width: fit-content;
  transition: background 0.15s ease;
}

.footer-app-badge:hover {
  background: rgba(255, 255, 255, 0.12);
}

.footer-app-badge span {
  display: flex;
  flex-direction: column;
  line-height: 1.15;
}

.footer-app-badge em {
  font-style: normal;
  font-size: 0.6rem;
  color: rgba(255, 255, 255, 0.65);
}

.footer-app-badge strong {
  font-family: var(--font-display);
  font-size: 0.86rem;
  font-weight: 700;
  color: #fff;
}

/* --- Bottom bar --- */
.footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px 24px;
  padding-top: 26px;
  font-size: 0.82rem;
  color: rgba(255, 255, 255, 0.45);
}

.footer-legal-links a {
  color: inherit;
  text-decoration: none;
}

.footer-legal-links a:hover {
  color: var(--mint);
}

@media (max-width: 991.98px) {
  .footer-top {
    grid-template-columns: 1fr 1fr 1fr;
  }

  .footer-brand {
    grid-column: 1 / -1;
  }
}

@media (max-width: 767.98px) {
  .footer-top {
    grid-template-columns: 1fr 1fr;
  }

  .cta-box {
    padding: 38px 28px;
  }
}

@media (max-width: 575.98px) {
  .footer-top {
    grid-template-columns: 1fr;
  }

  .footer-bottom {
    flex-direction: column;
    align-items: flex-start;
  }
}










/* =========================================================
   About us Hero section
   ========================================================= */

.spotlight-section {
  padding: 56px 0 72px;
}

/* The non-clipping wrapper: both the card and the breakout photo/line
   are positioned relative to this, so the photo can overlap the
   card's rounded edges instead of being cut off by them. */
.spotlight-frame {
  position: relative;
}

.spotlight-card {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 380px;
  border-radius: var(--radius-lg, 20px);
  overflow: hidden;
  background: var(--teal-deep, #06211D);
  /* shows briefly while the bg image loads */
  box-shadow: 0 30px 60px -30px rgba(6, 33, 29, 0.35);
}

/* Layer 1 — the same portrait, blurred, as a soft full-bleed backdrop.
   inset is negative and the image is scaled up so the blur's own soft
   edge is pushed outside the card before overflow:hidden clips it —
   otherwise a faint sharp-edged halo would show near the corners. */
.spotlight-bg {
  position: absolute;
  inset: -24px;
  background-size: cover;
  background-position: center 20%;
  filter: blur(1px) saturate(1.1);
  transform: scale(1.1);
}

/* Layer 2 — a teal wash over the blurred photo: transparent on the
   left, where the sharp cutout will sit, solid teal by the right
   two-thirds, where the text lives. */
.spotlight-wash {
  position: absolute;
  inset: 0;
  background: linear-gradient(208deg, rgba(6, 33, 29, 0) 0%, rgba(6, 33, 29, 0.45) 28%, #290b3bd4 48%, #06211ec7 100%);
}

/* Layer 3 — text, above both image layers. Left padding reserves the
   space the breakout photo sits in, so the two never overlap. */
.spotlight-info {
  position: relative;
  z-index: 1;
  flex: 1;
  padding: 48px 56px 48px 40%;
}

.spotlight-name {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 800;
  text-transform: uppercase;
  color: #fff;
  font-size: clamp(1.6rem, 3.2vw, 2.6rem);
  line-height: 1.08;
  letter-spacing: 0.01em;
}

.spotlight-meta {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  margin-top: 22px;
}

.spotlight-meta-line {
  flex: 0 0 auto;
  width: 10px;
  align-self: stretch;
  background: var(--mint, #8FD6B4);
  border-radius: 10px;
}

.spotlight-role,
.spotlight-location {
  display: block;
  font-family: var(--font-body, inherit);
  font-weight: 700;
  font-size: 0.95rem;
  color: rgba(255, 255, 255, 0.92);
  line-height: 1.4;
}

/* Layer 4 — the sharp cutout, sitting in .spotlight-frame rather than
   inside .spotlight-card, so these negative top/bottom offsets break
   past the card's rounded edges instead of being clipped by them. */
.spotlight-photo {
  position: absolute;
  z-index: 2;
  left: 0%;
  top: 15px;
  bottom: -28px;
  height: calc(100% + 56px);
  width: auto;
  max-width: 50%;
  object-fit: contain;
  object-position: bottom center;
  filter: drop-shadow(0 20px 30px rgba(6, 33, 29, 0.35));
  border-radius: 0 1.8rem;
}

/* A short accent line dropping just past the card's bottom edge —
   also outside .spotlight-card for the same reason as the photo. */
.spotlight-frame::after {
  content: '';
  position: absolute;
  left: 40%;
  bottom: -40px;
  width: 2px;
  height: 56px;
  background: var(--mint, #8FD6B4);
}

@media (max-width: 767.98px) {
  .spotlight-card {
    flex-direction: column;
    align-items: stretch;
    min-height: 0;
    padding-top: 248px;
    /* reserves room for the photo stacked above, with a clear gap before the name */
  }

  .spotlight-bg {
    inset: -16px;
  }

  .spotlight-photo {
    left: 50%;
    top: -24px;
    bottom: auto;
    height: 250px;
    max-width: 65%;
    transform: translateX(-50%);
  }

  .spotlight-info {
    padding: 0 24px 40px;
    text-align: center;
  }

  .spotlight-meta {
    justify-content: center;
  }

  .spotlight-frame::after {
    display: none;
  }
}





/* =========================================================
   Our Partners
   ========================================================= */


.partners-section {
  --partners-bg: var(--bg-light);
  --partners-ink: #16181d;
  --partners-accent: var(--dark-purple);
  --partners-font: 'Plus Jakarta Sans', 'Inter', system-ui, sans-serif;

  padding: 80px 0;
  background: var(--partners-bg);
  font-family: var(--partners-font);
  text-align: center;
  overflow: hidden;
}

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

.partners-heading {
  font-weight: 800;
  font-size: clamp(1.9rem, 3.2vw, 2.5rem);
  color: var(--partners-accent);
  margin: 0 0 48px;
}

/* ---- Row / track ---- */

.partners-row {
  position: relative;
  width: 100%;
  overflow: hidden;
  margin-bottom: 36px;
  /* fade the logos out at the row's edges instead of a hard clip */
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%);
}

.partners-row:last-child {
  margin-bottom: 0;
}

.partners-track {
  display: flex;
  align-items: center;
  width: max-content;
  gap: 56px;
  will-change: transform;
}

.partners-track-ltr-source {
  animation: partners-scroll 34s linear infinite;
}

.partners-track-rtl-source {
  animation: partners-scroll 34s linear infinite reverse;
}

/* Hovering a row pauses only that row's track */
.partners-row:hover .partners-track {
  animation-play-state: paused;
}

@keyframes partners-scroll {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(-50%);
  }
}

/* ---- Logo tile (real logo images, shown in full color) ---- */

.partners-logo {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 64px;
  padding: 0 12px;
}

.partners-logo img {
  height: 100%;
  width: auto;
  max-width: 180px;
  object-fit: contain;
  display: block;
}

@media (prefers-reduced-motion: reduce) {

  .partners-track-ltr-source,
  .partners-track-rtl-source {
    animation: none;
  }
}

@media (max-width: 575.98px) {
  .partners-section {
    padding: 56px 0;
  }

  .partners-heading {
    margin-bottom: 32px;
  }

  .partners-track {
    gap: 36px;
  }

  .partners-logo {
    height: 44px;
  }

  .partners-logo img {
    max-width: 130px;
  }
}
















/* =========================================================
   Our Purpose
   ========================================================= */

.purpose-section {
  background: var(--bg-light);
  padding: 80px 0;
}

.purpose-col {
  max-width: 760px;
}

.purpose-section .align-items-center {
  margin-bottom: 4rem !important;
}

.purpose-section img {
  padding: 2rem;
  border-radius: 7rem !important;
}

.purpose-title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.9rem, 3.4vw, 2.5rem);
  line-height: 1.2;
  color: var(--dark-purple);
  margin: 0 0 24px;
}

.purpose-lead {
  font-weight: 700;
  font-size: clamp(1.05rem, 1.6vw, 1rem);
  line-height: 1.5;
  color: var(--dark-purple);
  margin: 0 0 22px;
}

.purpose-copy {
  font-size: 1.02rem;
  line-height: 1.7;
  color: var(--gray-600);
  margin: 0 0 20px;
}

.purpose-copy:last-child {
  margin-bottom: 0;
}

@media (max-width: 767.98px) {
  .purpose-section {
    padding: 56px 0;
  }

  .purpose-section img {
    padding: 0;
    border-radius: 0 !important;
  }
}



/* =========================================================
   Mission & Vision
   ========================================================= */

.mv-section {
  padding: 90px 0 0px;
  background: #fff;
}

.mv-header {
  max-width: 640px;
  margin: 0 auto 44px;
  text-align: center;
}

.mv-eyebrow {
  display: block;
  font-weight: 700;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--coral);
  margin-bottom: 10px;
}

.mv-heading {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.9rem, 3.4vw, 2.5rem);
  line-height: 1.2;
  color: var(--dark-purple);
  margin: 0;
}

.mv-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
  align-items: stretch;
}

/* ---- Photo card ---- */

.mv-photo-card {
  position: relative;
  min-height: 360px;
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.mv-photo-card img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.mv-photo-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 24px;
  background: linear-gradient(200deg,
      rgba(6, 33, 29, 0.15) 0%,
      rgba(6, 33, 29, 0.55) 55%,
      var(--teal-deep) 100%);
}

.mv-photo-caption {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.3rem;
  line-height: 1.25;
  color: #fff;
}

.mv-photo-foot {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
}

.mv-photo-stat {
  display: flex;
  flex-direction: column;
}

.mv-photo-stat-label {
  font-size: 0.78rem;
  color: rgba(255, 255, 255, 0.78);
}

.mv-photo-stat-num {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.7rem;
  color: #fff;
  line-height: 1.1;
}

.mv-photo-stat-num .unit {
  font-size: 1.1rem;
}

.mv-photo-badge {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: var(--radius-pill, 999px);
  border: 1.5px solid rgba(255, 255, 255, 0.45);
  background: rgba(255, 255, 255, 0.08);
}

/* ---- Mission / Vision cards ---- */

.mv-card {
  background: var(--dark-purple);
  border-radius: var(--radius-lg);
  padding: 32px 28px;
  display: flex;
  flex-direction: column;
  transition: transform .2s ease, box-shadow .2s ease;
}

.mv-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-card);
}

.mv-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: var(--radius-pill, 999px);
  background: var(--mint-light);
  color: var(--teal-dark);
  margin-bottom: 20px;
}

.mv-card h3 {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.2rem;
  color: #fff;
  margin: 0 0 12px;
}

.mv-card p {
  font-size: 0.96rem;
  line-height: 1.65;
  color: #fff;
  margin: 0;
}

@media (max-width: 991.98px) {
  .mv-grid {
    grid-template-columns: 1fr;
  }

  .mv-photo-card {
    min-height: 280px;
  }
}

@media (max-width: 575.98px) {
  .mv-section {
    padding: 56px 0 64px;
  }

  .mv-photo-caption {
    font-size: 1.1rem;
  }

  .mv-photo-stat-num {
    font-size: 1.4rem;
  }
}







/* =========================================================
   Leadership Team / Career Profiles
   ========================================================= */

.cp-section {
  padding: 90px 0 100px;
  background: #fff;
}

/* ---- Banner ---- */

.cp-banner {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-lg);
  background: var(--teal-deep);
  min-height: 420px;
  display: flex;
  align-items: flex-end;
}

/* Video fills the banner using the standard "cover" scaling formula so
   it always fills the box regardless of the iframe's native aspect
   ratio, with no letterboxing. pointer-events:none keeps the iframe
   from intercepting clicks/scroll since it's purely decorative. */
.cp-banner-video {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.cp-banner-video iframe {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 177.78vh;
  height: 100vh;
  min-width: 100%;
  min-height: 56.25vw;
  transform: translate(-50%, -50%);
  border: 0;
  /* Belt-and-suspenders: the wrapper above already sets
     pointer-events:none, but setting it here too guarantees no hover
     or click ever reaches the iframe — that's what was letting
     YouTube's control bar flash into view. */
  pointer-events: none;
}

.cp-banner-scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(190deg,
      rgba(6, 33, 29, 0.35) 0%,
      rgba(6, 33, 29, 0.72) 55%,
      var(--teal-deep) 100%);
}

.cp-banner-content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 20px;
  padding: 48px;
  width: 100%;
}

.cp-heading {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(2.4rem, 5vw, 4rem);
  line-height: 0.98;
  text-transform: uppercase;
  margin: 0;
  flex: 0 0 auto;
}

.cp-heading-solid,
.cp-heading-outline {
  display: block;
}

.cp-heading-solid {
  color: #fff;
}

.cp-heading-outline {
  color: transparent;
  -webkit-text-stroke: 2px #29abe2;
}

/* Fallback for browsers without text-stroke support: show the outline
   word as solid cyan rather than invisible. */
@supports not (-webkit-text-stroke: 1px #000) {
  .cp-heading-outline {
    color: #29abe2;
  }
}

.cp-banner-copy {
  width: 100%;
  max-width: 440px;
  color: rgba(255, 255, 255, 0.88);
  font-size: 0.98rem;
  line-height: 1.7;
  margin: 0;
}

/* ---- Profile grid ---- */

.cp-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  margin-top: 36px;
}

.cp-card {
  position: relative;
  background: var(--light-gray);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.cp-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-card);
}

.cp-card-photo {
  width: 100%;
  aspect-ratio: 4 / 3;
  overflow: hidden;
}

.cp-card-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.cp-card-body {
  position: relative;
  padding: 20px 52px 20px 20px;
}

.cp-card-name {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.02rem;
  line-height: 1.3;
  color: var(--teal-dark);
  margin: 0 0 6px;
}

.cp-card-role {
  font-size: 0.86rem;
  color: var(--gray-600);
  margin: 0 0 4px;
}

.cp-card-location {
  font-size: 0.8rem;
  color: var(--gray-400);
  margin: 0;
}

.cp-card-link {
  position: absolute;
  right: 18px;
  bottom: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: var(--radius-pill, 999px);
  border: 1.5px solid var(--teal-dark);
  color: var(--teal-dark);
  transition: background 0.2s ease, color 0.2s ease;
}

.cp-card-link:hover {
  background: var(--teal-dark);
  color: #fff;
}

/* ---- Responsive ---- */

@media (max-width: 991.98px) {
  .cp-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .cp-banner {
    min-height: 380px;
  }

  .cp-banner-content {
    padding: 36px;
  }
}

@media (max-width: 575.98px) {
  .cp-section {
    padding: 56px 0 64px;
  }

  .cp-grid {
    grid-template-columns: 1fr;
  }

  .cp-banner {
    min-height: 340px;
  }

  .cp-banner-content {
    flex-direction: column;
    align-items: flex-start;
    padding: 28px;
    gap: 16px;
  }

  .cp-banner-copy {
    max-width: 100%;
  }
}







/* =========================================================
   Blog
   ========================================================= */

.blog-section {
  padding: 90px 0 100px;
  background: #fff;
}

/* ---- Top News hero ---- */

.blog-hero {
  position: relative;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 32px;
  border-radius: var(--radius-lg);
  padding: 48px;
  margin-bottom: 72px;
  background: linear-gradient(135deg, #2c1a6e 0%, var(--dark-purple, #3b1478) 55%, #150a38 100%);
  overflow: hidden;
}

.blog-hero-text {
  flex: 1 1 380px;
  max-width: 560px;
}

.blog-hero-badge {
  display: inline-block;
  background: var(--coral);
  color: #fff;
  font-weight: 700;
  font-size: 0.74rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 6px 14px;
  border-radius: var(--radius-pill, 999px);
  margin-bottom: 18px;
}

.blog-hero-heading {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.7rem, 3.2vw, 2.3rem);
  line-height: 1.25;
  color: #fff;
  margin: 0 0 16px;
}

.blog-hero-copy {
  font-size: 0.98rem;
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.82);
  margin: 0 0 26px;
}

.blog-hero-cta {
  display: inline-flex;
  align-items: center;
  background: #fff;
  color: var(--dark-purple, #3b1478);
  font-weight: 700;
  font-size: 0.92rem;
  padding: 13px 26px;
  border-radius: var(--radius-pill, 999px);
  text-decoration: none;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.blog-hero-cta:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.25);
}

.blog-hero-media {
  flex: 1 1 360px;
  max-width: 460px;
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: 0 20px 44px rgba(0, 0, 0, 0.35);
}

.blog-hero-media img {
  width: 100%;
  height: 100%;
  min-height: 260px;
  object-fit: cover;
  display: block;
}

/* ---- Post groups ---- */

.blog-group {
  margin-bottom: 64px;
}

.blog-group:last-child {
  margin-bottom: 0;
}

.blog-group-header {
  text-align: center;
  margin-bottom: 36px;
}

.blog-eyebrow {
  display: block;
  font-weight: 700;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--mint, #8fd6b4);
  margin-bottom: 8px;
}

.blog-heading {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.7rem, 3vw, 2.2rem);
  color: var(--ink);
  margin: 0;
}

.blog-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.blog-card {
  display: block;
  background: var(--bg-light);
  border-radius: var(--radius-lg);
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.blog-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-card);
}

.blog-card-photo {
  width: 100%;
  aspect-ratio: 16 / 10;
  overflow: hidden;
}

.blog-card-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.blog-card-body {
  padding: 20px 22px 24px;
}

.blog-card-title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.02rem;
  line-height: 1.35;
  color: var(--ink);
  margin: 0 0 8px;
}

.blog-card-date {
  display: block;
  font-weight: 700;
  font-size: 0.8rem;
  color: var(--teal-dark, #0b3b36);
  margin-bottom: 10px;
}

.blog-card-excerpt {
  font-size: 0.88rem;
  line-height: 1.6;
  color: var(--gray-600);
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ---- Pager ---- */

.blog-pager {
  display: flex;
  justify-content: center;
  gap: 14px;
  margin-top: 32px;
}

.blog-pager-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: var(--radius-pill, 999px);
  border: 1.5px solid var(--teal-dark, #0b3b36);
  background: #fff;
  color: var(--teal-dark, #0b3b36);
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease;
}

.blog-pager-btn:hover:not(:disabled) {
  background: var(--teal-dark, #0b3b36);
  color: #fff;
}

.blog-pager-btn:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

/* ---- Responsive ---- */

@media (max-width: 991.98px) {
  .blog-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .blog-hero {
    padding: 36px;
  }
}

@media (max-width: 575.98px) {
  .blog-section {
    padding: 56px 0 64px;
  }

  .blog-grid {
    grid-template-columns: 1fr;
  }

  .blog-hero {
    flex-direction: column;
    padding: 28px;
  }

  .blog-hero-media {
    max-width: 100%;
  }
}









/* =========================================================
   Blog Post (single template)
   ========================================================= */

.post-section {
  padding: 64px 0 100px;
  background: var(--bg-light);
}

.post-container {
  max-width: 760px;
}

.post-badge {
  display: inline-block;
  background: #ffb703;
  color: var(--ink);
  font-weight: 700;
  font-size: 0.74rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 6px 12px;
  border-radius: 6px;
  margin-bottom: 16px;
}

.post-title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.6rem, 3.4vw, 2.1rem);
  line-height: 1.3;
  color: var(--dark-purple, #3b1478);
  margin: 0 0 14px;
}

.post-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 28px;
}

.post-date {
  font-size: 0.86rem;
  color: var(--gray-400);
}

.post-share {
  display: flex;
  gap: 10px;
}

.post-share-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: var(--radius-pill, 999px);
  background: var(--dark-purple, #3b1478);
  color: #fff;
  transition: background 0.2s ease;
}

.post-share-btn:hover {
  background: var(--teal-dark, #0b3b36);
}

/* ---- Featured media with highlighted overlay heading ---- */

.post-media {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  margin-bottom: 32px;
}

.post-media img {
  width: 100%;
  height: auto;
  min-height: 280px;
  object-fit: cover;
  display: block;
}

.post-media-badge {
  position: absolute;
  top: 18px;
  left: 18px;
  z-index: 1;
  background: var(--dark-purple, #3b1478);
  color: #fff;
  font-weight: 700;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 7px 14px;
  border-radius: 6px;
}

.post-media-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  padding: 36px;
  background: linear-gradient(90deg, rgba(6, 33, 29, 0.78) 0%, rgba(6, 33, 29, 0.35) 55%, rgba(6, 33, 29, 0) 100%);
}

.post-media-heading {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.3rem, 2.6vw, 1.8rem);
  line-height: 1.35;
  text-transform: uppercase;
  color: #fff;
  margin: 0;
}

.post-hl {
  background: none;
  color: inherit;
  padding: 0 4px;
  border-radius: 4px;
}

.post-hl-teal {
  background: var(--mint, #8fd6b4);
  color: var(--teal-deep, #06211d);
}

.post-hl-yellow {
  background: #ffd93d;
  color: var(--ink);
}

/* ---- Body ---- */

.post-body p {
  font-size: 1rem;
  line-height: 1.75;
  color: var(--gray-600);
  margin: 0 0 20px;
}

.post-back {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #ffb703;
  color: var(--ink);
  font-weight: 700;
  font-size: 0.9rem;
  padding: 12px 24px;
  border-radius: var(--radius-pill, 999px);
  text-decoration: none;
  margin-top: 12px;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.post-back:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15);
}

@media (max-width: 575.98px) {
  .post-section {
    padding: 44px 0 64px;
  }

  .post-media-overlay {
    padding: 22px;
    background: linear-gradient(180deg, rgba(6, 33, 29, 0.25) 0%, rgba(6, 33, 29, 0.85) 100%);
    align-items: flex-end;
  }
}











/* =========================================================
   FAQs
   ========================================================= */

.faq-section {
  padding: 90px 0 100px;
  background: var(--bg-light);
}

.faq-layout {
  display: grid;
  grid-template-columns: minmax(280px, 380px) 1fr;
  gap: 48px;
  align-items: start;
}

/* ---- Left: intro + card ---- */

.faq-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 700;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--coral);
  margin-bottom: 14px;
}

.faq-eyebrow-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--coral);
}

.faq-heading {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.9rem, 3.4vw, 2.5rem);
  line-height: 1.2;
  color: var(--ink);
  margin: 0 0 32px;
}

.faq-card {
  background: #fff;
  border-radius: var(--radius-lg);
  padding: 20px;
  box-shadow: var(--shadow-card);
}

.faq-card-photo {
  width: 100%;
  aspect-ratio: 4 / 3;
  border-radius: var(--radius-md);
  overflow: hidden;
  margin-bottom: 18px;
}

.faq-card-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.faq-card-copy {
  font-size: 0.92rem;
  line-height: 1.6;
  color: var(--gray-600);
  margin: 0 0 18px;
}

.faq-card-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  background: var(--dark-purple);
  color: #fff;
  font-weight: 700;
  font-size: 0.92rem;
  padding: 13px 20px;
  border-radius: var(--radius-pill, 999px);
  text-decoration: none;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.faq-card-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 24px rgba(255, 90, 43, 0.3);
}

/* ---- Right: accordion ---- */

.faq-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.faq-item {
  background: #fff;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
  overflow: hidden;
}

.faq-item-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  width: 100%;
  background: none;
  border: 0;
  text-align: left;
  padding: 20px 24px;
  cursor: pointer;
  font-family: inherit;
}

.faq-item-question {
  font-weight: 700;
  font-size: 1rem;
  color: var(--ink);
}

.faq-item-icon {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--bg-light);
  color: var(--ink);
}

.faq-icon-close {
  display: none;
}

.faq-item.is-open .faq-icon-plus {
  display: none;
}

.faq-item.is-open .faq-icon-close {
  display: block;
}

.faq-item.is-open .faq-item-icon {
  background: var(--coral);
  color: #fff;
}

.faq-item-answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.25s ease;
}

.faq-item-answer p {
  font-size: 0.92rem;
  line-height: 1.65;
  color: var(--gray-600);
  margin: 0;
  padding: 0 24px 22px;
}

.faq-item.is-open .faq-item-answer {
  max-height: 240px;
}

/* ---- Responsive ---- */

@media (max-width: 991.98px) {
  .faq-layout {
    grid-template-columns: 1fr;
  }

  .faq-card {
    max-width: 380px;
  }
}

@media (max-width: 575.98px) {
  .faq-section {
    padding: 56px 0 64px;
  }

  .faq-item-toggle {
    padding: 16px 18px;
  }

  .faq-item-answer p {
    padding: 0 18px 18px;
  }
}







/* =========================================================
   Contact Us
   ========================================================= */

.contact-section {
  position: relative;
  overflow: hidden;
  padding: 10px 0 120px;
  background: linear-gradient(175deg, rgb(255, 255, 255) 0%, #ffffff 45%, #fdeefc 100%);
}

.contact-blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(70px);
  pointer-events: none;
  z-index: 0;
}

.contact-blob-1 {
  width: 420px;
  height: 420px;
  top: -140px;
  left: -120px;
  background: rgba(254, 255, 255, 0.45);
}

.contact-blob-2 {
  width: 460px;
  height: 460px;
  bottom: -180px;
  right: -140px;
  background: rgba(255, 90, 43, 0.22);
}

.contact-section .container {
  position: relative;
  z-index: 1;
}

.contact-grid {
  display: grid;
  grid-template-columns: minmax(320px, 440px) 1fr;
  gap: 56px;
  align-items: start;
}

/* ---- Left: editorial info column ---- */

.contact-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 700;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--coral);
  margin-bottom: 18px;
}

.contact-eyebrow-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--coral);
}

.contact-heading {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(2rem, 3.6vw, 2.7rem);
  line-height: 1.18;
  color: var(--ink);
  margin: 0 0 20px;
}

.contact-heading-accent {
  -webkit-background-clip: text;
  background-clip: text;
  color: var(--dark-purple);
}

.contact-intro {
  font-size: 1rem;
  line-height: 1.7;
  color: var(--gray-600);
  max-width: 440px;
  margin: 0 0 40px;
}

.contact-methods {
  list-style: none;
  margin: 0 0 36px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.contact-method {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 14px 4px;
  border-bottom: 1px solid rgba(11, 27, 26, 0.08);
}

.contact-method:last-child {
  border-bottom: 0;
}

.contact-method-icon {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: #000000;
  color: var(--bg-light, #0b3b36);
}

.contact-method-text {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding-top: 4px;
}

.contact-method-label {
  font-weight: 700;
  font-size: 0.86rem;
  color: var(--ink);
}

.contact-method-value {
  font-size: 0.9rem;
  color: var(--gray-600);
}

/* ---- Map card ---- */

.contact-map-card {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  height: 220px;
  box-shadow: var(--shadow-card);
}

.contact-map {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
  filter: saturate(0.9);
}

.contact-map-badge {
  position: absolute;
  left: 16px;
  bottom: 16px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(6px);
  color: var(--ink);
  font-weight: 700;
  font-size: 0.8rem;
  padding: 8px 14px;
  border-radius: var(--radius-pill, 999px);
  box-shadow: 0 8px 20px rgba(11, 27, 26, 0.18);
}

.contact-map-badge-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--coral);
}

/* ---- Right: floating glass form panel ---- */

.contact-form-panel {
  position: relative;
  background: rgba(255, 255, 255, 0.88);
  backdrop-filter: blur(14px);
  border: 1px solid rgba(255, 255, 255, 0.6);
  border-radius: 28px;
  padding: 52px;
  box-shadow: 0 30px 60px rgba(11, 27, 26, 0.14);
}

.contact-form-eyebrow {
  display: inline-block;
  font-weight: 700;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--teal-dark, #0b3b36);
  margin-bottom: 10px;
}

.contact-form-heading {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.5rem, 2.4vw, 1.8rem);
  color: var(--ink);
  margin: 0 0 8px;
}

.contact-form-sub {
  font-size: 0.92rem;
  color: var(--gray-600);
  margin: 0 0 32px;
}

.contact-form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

/* Floating-label fields (no JS: :placeholder-shown drives the
   collapsed/expanded label state via placeholder=" ") */

.field-fl {
  position: relative;
  margin-bottom: 22px;
}

.field-fl input,
.field-fl textarea {
  width: 100%;
  font-family: inherit;
  font-size: 0.96rem;
  color: var(--ink);
  background: #fff;
  border: 1.5px solid #e3e7ea;
  border-radius: 12px;
  padding: 22px 16px 10px;
}

.field-fl textarea {
  padding-top: 24px;
  resize: vertical;
  min-height: 96px;
}

.field-fl label {
  position: absolute;
  left: 16px;
  top: 17px;
  font-size: 0.96rem;
  color: var(--gray-400);
  pointer-events: none;
  transition: top 0.15s ease, font-size 0.15s ease, color 0.15s ease;
}

.field-fl input:focus,
.field-fl textarea:focus {
  outline: none;
  border-color: var(--coral);
  box-shadow: 0 0 0 4px rgba(255, 90, 43, 0.12);
}

.field-fl input:focus+label,
.field-fl textarea:focus+label,
.field-fl input:not(:placeholder-shown)+label,
.field-fl textarea:not(:placeholder-shown)+label {
  top: 8px;
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--teal-dark, #0b3b36);
}

/* ---- Select (kept as a static labeled field) ---- */

.field-select {
  margin-bottom: 22px;
}

.field-select-label {
  display: block;
  font-weight: 700;
  font-size: 0.8rem;
  color: var(--ink);
  margin-bottom: 8px;
}

.field-select select {
  width: 100%;
  appearance: none;
  font-family: inherit;
  font-size: 0.96rem;
  color: var(--ink);
  background-color: #fff;
  background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='%235B6664' d='M5.5 7.5l4.5 4.5 4.5-4.5z'/%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: right 16px center;
  border: 1.5px solid #e3e7ea;
  border-radius: 12px;
  padding: 14px 40px 14px 16px;
}

.field-select select:focus {
  outline: none;
  border-color: var(--coral);
  box-shadow: 0 0 0 4px rgba(255, 90, 43, 0.12);
}

/* ---- Submit + reCAPTCHA note ---- */

.contact-submit {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  background: var(--dark-purple, #3b1478);
  color: #fff;
  font-weight: 700;
  font-size: 0.98rem;
  border: 0;
  padding: 16px 20px;
  border-radius: var(--radius-pill, 999px);
  cursor: pointer;
  margin-top: 4px;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.contact-submit:hover {
  transform: translateY(-2px);
  box-shadow: 0 16px 30px rgba(255, 90, 43, 0.32);
}

.contact-recaptcha-note {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-size: 0.78rem;
  color: var(--gray-400);
  margin: 16px 0 0;
}

/* ---- Responsive ---- */

@media (max-width: 991.98px) {
  .contact-grid {
    grid-template-columns: 1fr;
  }

  .contact-form-panel {
    padding: 40px;
  }
}

@media (max-width: 575.98px) {
  .contact-section {
    padding: 64px 0 72px;
  }

  .contact-info {
    padding: 1rem;
  }

  .contact-form-row {
    grid-template-columns: 1fr;
    gap: 0;
  }

  .contact-form-panel {
    padding: 28px;
    border-radius: 22px;
  }

  .contact-map-card {
    height: 190px;
  }
}