/* ==========================================================================
   Home page takes over the full viewport — override the default
   .site-main padding/max-width so each section can bleed edge-to-edge and
   apply its own Figma-specified padding.
   ========================================================================== */
body.home .site-main,
body.page-template-front-page .site-main {
  max-width: none;
  padding: 0;
}

/* ==========================================================================
   Home Page — MBA ACT
   Figma reference: Nw2x8ncb0hP9sVqTIG6jpe node 10546:14261 (HOME // DESKTOP // 2.0)
   Seven sections matching Figma structure:
     1. Hero (split 687/753)        — #E6E7E9 bg
     2. Quick Cards (3 cards)       — white bg, tangerine-light accent
     3. Content Card Block 1        — navy bg, logo watermark
     4. Content and Cards 1         — intro row + 2-up slider
     5. Training                    — navy, intro + Course Finder strip + courses split
     6. News & Events               — gradient+photo bg, 2 subsections
     7. Partners                    — 4 logos, drag-scroll mobile
   Consumes tokens from tokens.css.
   ========================================================================== */

/* --- Shared tagline / section heading ------------------------------------ */
/* Tagline underline — Figma "Vector 4/5" shape: horizontal line + 8.5px
   diagonal hook pointing down at the right end. Implemented with two pseudo
   elements: ::after = horizontal line stretched to text width (minus hook);
   ::before = fixed 9×7 hook SVG at right end. `width: fit-content` makes the
   pseudos' right edge track the actual tagline text width. */
.home-section-tagline {
  position: relative;
  margin: 0;
  display: block;
  width: fit-content;
  font-family: var(--font-family);
  font-weight: var(--font-weight-bold);
  font-size: 1rem; /* 16px per Figma Heading/Tagline */
  line-height: 1.3;
  letter-spacing: 0.05em;
  color: var(--color-tangerine); /* Figma #FF6600 — design over AA */
  text-transform: uppercase;
  padding-bottom: 14px; /* room for underline + hook */
}

.home-section-tagline::after {
  content: "";
  position: absolute;
  left: 0;
  right: 8px; /* leave 8px gap for hook */
  bottom: 7px;
  height: 1px;
  background-color: currentColor;
}

.home-section-tagline::before {
  content: "";
  position: absolute;
  right: 0;
  bottom: 1px;
  width: 9px;
  height: 7px;
  background-image: url('../images/tagline-hook.svg');
  background-repeat: no-repeat;
  color: currentColor; /* SVG uses stroke="currentColor" so it inherits */
}

.home-section-tagline--tangerine {
  color: var(--color-tangerine);
}

.home-section-heading {
  margin: var(--space-6) 0 0;
  font-size: clamp(2rem, 4vw, 3rem);
  line-height: 1.1;
  color: var(--color-navy);
  font-weight: var(--font-weight-bold);
}

.home-section-heading--on-dark {
  color: var(--color-white);
}

/* First-word accent — tangerine per Figma #FF6600 (design over AA). */
.home-section-heading__accent {
  color: var(--color-tangerine);
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ==========================================================================
   1. Hero — #E6E7E9 bg, 576px fixed height, split 687/753
   ========================================================================== */
.home-hero {
  background-color: var(--color-navy-lightest); /* #E6E7E9 per Figma fill_3QBS5J */
  overflow: hidden;
}

.home-hero__splide {
  max-width: 1440px;
  margin: 0 auto;
}

.home-hero__slide {
  display: flex;
  align-items: stretch;
  min-height: 576px;
  background-color: var(--color-navy-lightest);
}

.home-hero__content {
  width: 687px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--space-9); /* 36px per Figma */
  padding: var(--space-20); /* 80px */
}

.home-hero__content-inner {
  display: flex;
  flex-direction: column;
  gap: var(--space-4); /* 16px per Figma Text Content */
}

.home-hero__tagline {
  margin: 0;
  font-family: var(--font-family);
  font-weight: var(--font-weight-bold);
  font-size: 1rem;
  line-height: 1.3;
  color: var(--color-tangerine); /* Figma #FF6600 */
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.home-hero__headline {
  margin: 0;
  font-size: clamp(2.5rem, 5vw, 3.5rem);
  line-height: 1.1;
  color: var(--color-navy);
  font-weight: var(--font-weight-bold);
}

.home-hero__body {
  margin: 0;
  font-size: var(--text-md, 1.125rem);
  line-height: 1.5;
  color: var(--color-neutral-dark);
}

.home-hero__cta {
  align-self: flex-start;
}

.home-hero__image {
  flex: 1;
  padding-right: var(--space-20);
  display: flex;
  align-items: center;
}

/* Figma Vector 2 (node 10546:14282): 82×82 triangular "corner cut" SVG
   fills the top-right corner of the image with page bg color, creating a
   chipped-corner visual motif. Wrapped in a figure so the ::after can be
   positioned relative to the image itself, not the padded flex container. */
.home-hero__image-frame {
  position: relative;
  max-width: 659px;
  width: 100%;
}

.home-hero__image img {
  width: 100%;
  height: 475px;
  object-fit: cover;
  border-radius: var(--radius-sm);
  display: block;
}

.home-hero__image-frame::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 82px;
  height: 82px;
  background-image: url('../images/home-hero-corner.svg');
  background-repeat: no-repeat;
  background-size: contain;
  pointer-events: none;
  z-index: 2;
}

/* Splide arrow + pagination styling on light bg */
.home-hero__splide .splide__arrow {
  background-color: var(--color-white);
  color: var(--color-navy);
  opacity: 1;
}
.home-hero__splide .splide__arrow svg { fill: currentColor; }
.home-hero__splide .splide__pagination__page {
  background-color: var(--color-neutral-light);
}
.home-hero__splide .splide__pagination__page.is-active {
  background-color: var(--color-navy);
}

@media (max-width: 1024px) {
  /* Hero mobile rules — values pulled from Figma node 10546:15581
     ("Header V2" on the HOME // MOBILE artboard 10546:15579). */
  .home-hero {
    padding: 50px 20px; /* layout_SI12IM */
  }
  .home-hero__slide {
    /* column-reverse: image first, text below, per Figma mobile spec.
       Gap between Image Wrapper and Content blocks = 24 px (layout_SI12IM gap). */
    flex-direction: column-reverse;
    min-height: auto;
    gap: 24px;
  }
  .home-hero__content {
    width: 100%;
    padding: 0; /* hero now owns the outer padding */
    gap: 16px;  /* layout_LNRAKZ — between text content and Mobile Controls */
  }
  .home-hero__content-inner {
    gap: 16px; /* layout_LNRAKZ — heading↔body within Text Content */
  }
  .home-hero__image {
    padding: 0;
  }
  .home-hero__image-frame {
    max-width: none;
    width: 100%;
    height: 270px; /* layout_WH3JI1 fixed Figma height */
  }
  .home-hero__image img {
    height: 100%;
    aspect-ratio: auto;
  }
  .home-hero__headline {
    /* Heading/H1 — 65 Bold 38px, 110% line-height, -1% letter-spacing */
    font-size: 38px;
    line-height: 1.1;
    letter-spacing: -0.01em;
  }
  .home-hero__body {
    /* Text/Large/Normal — 55 Roman 18px, 130% line-height */
    font-size: 18px;
    line-height: 1.3;
  }
  /* Hide Splide chevron arrows on mobile per Figma — they overlay the image
     awkwardly at narrow viewports. Pagination dots (also enabled in the
     hero Splide config) remain visible below the image, which matches the
     Figma "Mobile - Controls" row. */
  .home-hero__splide .splide__arrows {
    display: none;
  }
}

/* ==========================================================================
   2. Quick Cards — 3 cards + tangerine-light accent underline
   Figma: Section_Quick Cards Block, padding 48/80, row space-between
   ========================================================================== */
.home-quick-cards {
  padding: var(--space-12) var(--space-20); /* 48/80 per Figma */
  background-color: var(--color-white);
  /* Figma Section_Quick Cards y-extent 480.7px (between Hero y:776.3 and Content Card y:1257). */
  min-height: 480px;
  display: flex;
  align-items: center;
}

.home-quick-cards__row {
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 35px; /* Figma layout_Z5NUQT row gap (space-between resolves delta) */
  max-width: 1280px;
  margin: 0 auto;
}

.home-quick-cards__row > .home-quick-card {
  flex: 1;
}

/* Tangerine-light decorative rect behind row (Figma Rectangle 3) */
.home-quick-cards__accent {
  position: absolute;
  left: 40px;
  top: 114.7px;
  width: 320px;
  height: 22px;
  background-color: var(--color-accent-light-orange); /* #FFAD77 */
  z-index: 0;
  pointer-events: none;
}

/* Figma: 405×hug card. White bg, #E6E7E9 1px border, 4px radius, shadow medium.
   Inner: padding 36, gap 24. Bottom: 10px tangerine-light strip (Rectangle "Colour strip"). */
.home-quick-card {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  justify-content: center; /* Figma layout_OBQM4Q */
  background-color: var(--color-white);
  border: 1px solid var(--color-navy-lightest); /* #E6E7E9 */
  border-radius: var(--radius-sm);
  box-shadow: 0 3px 16px -4px rgba(0, 0, 0, 0.09);
  overflow: hidden;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.home-quick-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

.home-quick-card__body-wrap {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--space-6); /* 24 per Figma */
  padding: var(--space-9); /* 36 per Figma */
  flex: 1;
}

/* Icon: small 24px, tangerine accent per Figma icon style */
.home-quick-card__icon {
  font-size: 32px;
  line-height: 1;
  color: var(--color-tangerine);
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
}

.home-quick-card__title {
  margin: 0;
  /* Figma Heading/H4: Frutiger 55 Roman 32px, navy #0B1628 */
  font-size: 2rem;
  font-weight: var(--font-weight-regular);
  line-height: 1.3;
  color: var(--color-navy);
  letter-spacing: -0.01em;
}

.home-quick-card__body {
  margin: 0;
  /* Figma Text/Regular/Normal: 16px, navy */
  font-size: var(--text-base);
  line-height: 1.5;
  color: var(--color-navy);
  flex: 1;
}

.home-quick-card__cta {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--color-navy);
  font-family: var(--font-family);
  font-weight: var(--font-weight-bold);
  font-size: var(--text-base);
  text-decoration: none;
  transition: color 0.2s ease;
}

.home-quick-card__cta:hover {
  color: var(--color-tangerine-darker);
}

.home-quick-card__cta .material-symbols-outlined {
  font-size: 1.5rem;
}

/* 10px colored strip at the very bottom of the card — color varies per card
   per Figma (Card with Colour "Colour strip"). Inline `--strip-color` from PHP. */
.home-quick-card__strip {
  display: block;
  height: 10px;
  background-color: var(--strip-color, var(--color-accent-light-orange));
}

@media (max-width: 1024px) {
  /* Quick Cards mobile rules — placed AFTER the desktop block on purpose so
     source order beats the un-media'd `.home-quick-card__body-wrap { display:
     flex; ... }` defined above (same specificity → later wins).
     All numeric values pulled from Figma node 10546:15604 (Section_Quick
     Cards Block on the HOME // MOBILE artboard 10546:15579). */
  .home-quick-cards {
    padding: 50px 20px; /* Figma layout_B7RSXI */
    min-height: 0;
  }
  .home-quick-cards__row {
    flex-direction: column;
    gap: 24px; /* Figma layout_E9WF37 */
  }
  .home-quick-cards__row > .home-quick-card {
    flex: 0 0 auto;
    width: 100%;
  }
  .home-quick-cards__accent {
    display: none;
  }
  .home-quick-card__body {
    display: none;
  }
  /* Card content uses a 2-row grid: row 1 = icon + title (Figma Icon-and-
     heading frame, row gap 18); row 2 = cta (Figma Actions frame). The
     vertical gap between the two rows is 16 (Figma BYFLPA layout). */
  .home-quick-card__body-wrap {
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-areas:
      "icon title"
      "cta  cta";
    row-gap: 16px;
    column-gap: 18px;
    padding: 16px; /* Figma BYFLPA padding */
  }
  .home-quick-card__icon {
    grid-area: icon;
    font-size: 40px; /* Figma layout_TB64JA: 40x40 icon container */
    width: 40px;
    height: 40px;
    align-self: center;
  }
  .home-quick-card__title {
    grid-area: title;
    /* Figma Heading/H4: Frutiger 55 Roman 24px, 130% line-height, -1% letter-
       spacing — desktop uses 32px (H3-ish); mobile rolls back to H4. */
    font-size: 24px;
    line-height: 1.3;
    align-self: center;
  }
  .home-quick-card__cta {
    grid-area: cta;
  }
}

/* ==========================================================================
   3. Content Card Block 1 — navy bg, big logo watermark on right
   Figma: padding 64/80/112, card padding 64, gap 143
   ========================================================================== */
.home-content-card {
  padding: var(--space-16) var(--space-20) var(--space-28);
  background-color: var(--color-white);
  /* Figma Section_Content Card Block 1: y:1257→1978.3 = 721.3px */
  min-height: 721px;
}

.home-content-card__card {
  position: relative;
  display: flex;
  align-items: center;
  gap: 143px;
  padding: var(--space-16);
  background-color: var(--color-navy); /* #0B1628 */
  border-radius: var(--radius-sm);
  color: var(--color-white);
  overflow: hidden;
  max-width: 1280px;
  margin: 0 auto;
}

.home-content-card__content {
  width: 659px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 46px; /* Figma exact */
  position: relative;
  z-index: 1;
}

/* Tangerine eyebrow with underline + downward hook at the right end —
   same SVG hook + 1px line pattern as .home-section-tagline (lines 32-67),
   matches Figma "Vector 4" / "Vector 5" shape under WHO WE ARE-style
   eyebrows. */
.home-content-card__tagline {
  position: relative;
  margin: 0;
  display: block;
  width: fit-content;
  color: var(--color-tangerine);
  font-family: var(--font-family);
  font-weight: var(--font-weight-bold);
  font-size: 1rem;
  line-height: 1.3;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding-bottom: 14px; /* room for underline + hook */
}

.home-content-card__tagline::after {
  content: "";
  position: absolute;
  left: 0;
  right: 8px; /* leave 8px gap for the hook */
  bottom: 7px;
  height: 1px;
  background-color: currentColor;
}

.home-content-card__tagline::before {
  content: "";
  position: absolute;
  right: 0;
  bottom: 1px;
  width: 9px;
  height: 7px;
  background-image: url('../images/tagline-hook.svg');
  background-repeat: no-repeat;
  color: currentColor; /* SVG uses stroke=currentColor */
}

.home-content-card__heading {
  margin: 0;
  /* Figma Heading/H2: Frutiger 55 Roman 48px, 120% line-height, -1% letter-spacing */
  font-size: clamp(2rem, 4.5vw, 3rem);
  font-weight: var(--font-weight-regular);
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--color-white);
}

/* First word in tangerine per Figma (ts1 fill #FF6600) */
.home-content-card__heading-accent {
  color: var(--color-tangerine);
}

.home-content-card__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  color: var(--color-white);
}

/* Figma Text/Large/Bold: 20px 700 weight, 130% line-height */
.home-content-card__lead {
  margin: 0;
  font-size: 1.25rem;
  font-weight: var(--font-weight-bold);
  line-height: 1.3;
  color: var(--color-white);
}

.home-content-card__body p {
  margin: 0;
  font-size: var(--text-base);
  line-height: 1.5;
  color: var(--color-white-60);
}

.home-content-card__body p.home-content-card__lead {
  color: var(--color-white);
  font-size: 1.25rem;
  font-weight: var(--font-weight-bold);
  line-height: 1.3;
}

.home-content-card__cta {
  align-self: flex-start;
}

/* Logo watermark — 597×597 at x:711 y:60.7 per Figma (stacked M-pattern).
   Full white opacity per Figma (instance has no opacity override). */
.home-content-card__watermark {
  position: absolute;
  top: 60.7px;
  left: 711px;
  width: 597px;
  height: 597px;
  pointer-events: none;
  z-index: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.home-content-card__watermark img {
  width: 100%;
  height: auto;
  max-height: 100%;
  object-fit: contain;
}

/* Button on dark — white outline variant */
.btn--secondary.btn--on-dark {
  background-color: transparent;
  border-color: var(--color-white);
  color: var(--color-white);
}
.btn--secondary.btn--on-dark:hover {
  background-color: var(--color-white);
  color: var(--color-navy);
}

@media (max-width: 1024px) {
  /* Content Card Block 2 mobile — values from Figma node 10546:15611
     ("Section_Content Card Block 2" on the HOME // MOBILE artboard).
     Whole section becomes navy on mobile (desktop has white outer + navy
     inner card; mobile is flat navy). */
  .home-content-card {
    padding: 50px 20px;            /* layout_B1GT9P */
    background-color: var(--color-navy);
    min-height: 0;                 /* desktop locks 721 px */
  }
  .home-content-card__card {
    flex-direction: column;
    align-items: stretch;
    gap: 46px;                     /* layout_DVXTVA — content↔button */
    padding: 0;                    /* card chrome lifted to outer section */
    background: transparent;
    border-radius: 0;
  }
  .home-content-card__content {
    width: 100%;
    gap: 32px;                     /* layout_6LR3F4 — tagline↔heading↔body */
  }
  .home-content-card__heading {
    /* Heading/H2 mobile = 34 / 55 Roman / 120% / -1% (desktop H2 is 48). */
    font-size: 34px;
    line-height: 1.2;
  }
  .home-content-card__body {
    gap: 18px;                     /* layout_LLDTKU — lead↔body */
  }
  .home-content-card__lead,
  .home-content-card__body p.home-content-card__lead {
    /* Text/Large/Bold mobile = 18 / 65 Bold / 130% (desktop is 20). */
    font-size: 18px;
    line-height: 1.3;
  }
  .home-content-card__body p {
    color: var(--color-white);     /* mobile is solid white, not 60% alpha */
  }
  .home-content-card__watermark {
    /* Figma: absolute, x:70 y:267 (relative to section). Card has padding 0
       on mobile, so card-relative = section-relative minus section padding
       (50/20) → top:217, left:50. Width 362, opacity 0.10. */
    position: absolute;
    top: 217px;
    left: 50px;
    width: 362px;
    height: auto;
    opacity: 0.10;
    z-index: 0;
    pointer-events: none;
  }
}

/* ==========================================================================
   4. Content and Cards — "MEMBERSHIP BENEFITS" with 4 XSmall cards
   Figma: padding 112/80, Intro (1280 row space-between), gap 46;
          Cards row gap 36; each card has 5px colored underline strip.
   ========================================================================== */
.home-content-and-cards {
  padding: var(--space-28) var(--space-20);
  background-color: var(--color-white);
  /* Figma Section_Content and Cards Block 1: y:1978.3→2711 = 732.7px */
  min-height: 732px;
  display: flex;
  align-items: center;
}

.home-content-and-cards__inner {
  max-width: 1280px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: var(--space-12);
}

.home-content-and-cards__intro {
  display: flex;
  justify-content: space-between;
  /* Figma: button aligned to TOP of the intro row (next to tagline), not
     bottom. `flex-start` keeps it at the top; tagline/heading/copy flow down
     on the left without affecting button vertical position. */
  align-items: flex-start;
  gap: var(--space-12);
}

.home-content-and-cards__intro-left {
  flex: 1;
  max-width: 760px;
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}

.home-content-and-cards__intro-right {
  flex-shrink: 0;
}

.home-content-and-cards__copy {
  font-size: var(--text-base);
  line-height: 1.6;
  color: var(--color-neutral-dark);
  max-width: 520px;
}

.home-content-and-cards__copy p { margin: 0; }

/* Benefit cards row (Figma "Cards" row, 4 XSmall cards gap 36) */
.home-benefit-cards {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-9); /* 36 per Figma */
}

.home-benefit-card {
  display: flex;
  flex-direction: column;
  background-color: var(--color-white);
  border: 1px solid var(--color-navy-lightest); /* #E6E7E9 */
  border-radius: var(--radius-sm);
  box-shadow: 0 3px 16px -4px rgba(0, 0, 0, 0.09);
  overflow: hidden;
  transition: transform 0.2s ease;
}

.home-benefit-card:hover {
  transform: translateY(-2px);
}

.home-benefit-card__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding: var(--space-8);
  flex: 1;
}

/* Wrapper around icon+tag — default display:contents keeps current desktop
   behaviour (icon and tag stack as direct flex children of __body). On mobile
   the wrapper switches to flex row so icon+tag sit on the same line per
   Figma "Frame 270" (10546:15641 etc.). */
.home-benefit-card__head {
  display: contents;
}

.home-benefit-card__icon {
  font-size: 40px;
  line-height: 1;
  color: var(--color-tangerine);
}

.home-benefit-card__tag {
  margin: 0;
  font-family: var(--font-family);
  font-size: var(--text-xs, 0.75rem);
  font-weight: var(--font-weight-bold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-tangerine); /* Figma #FF6600 */
}

.home-benefit-card__title {
  margin: 0;
  font-size: var(--text-md);
  font-weight: var(--font-weight-bold);
  line-height: 1.3;
  color: var(--color-navy);
}

.home-benefit-card__text {
  margin: 0;
  flex: 1;
  font-size: var(--text-base);
  line-height: 1.5;
  color: var(--color-navy);
}

.home-benefit-card__link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  margin-top: var(--space-2);
  color: var(--color-navy);
  font-weight: var(--font-weight-bold);
  font-size: var(--text-sm);
  text-decoration: none;
  transition: color 0.2s ease;
}

.home-benefit-card__link:hover {
  color: var(--color-tangerine-darker);
}

.home-benefit-card__link .material-symbols-outlined {
  font-size: 1rem;
}

/* Per-card 5px colored strip at bottom — inline var from PHP sets the color */
.home-benefit-card__strip {
  display: block;
  height: 5px;
  background-color: var(--strip-color, var(--color-accent-silver));
}

@media (max-width: 1024px) {
  .home-content-and-cards__intro {
    flex-direction: column;
    align-items: flex-start;
  }
  .home-benefit-cards {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  /* Membership benefit cards on mobile become a horizontal drag-scroll
     carousel (Figma node 10546:15639 "Cards - Mobile Slider"): cards
     extend past the viewport, user drags left/right to see the rest.
     Native CSS implementation — overflow-x: auto + scroll-snap, no Splide
     instance needed. */
  .home-content-and-cards {
    padding: 50px 20px;          /* Figma layout_YDPJ38 — section padding */
    min-height: 0;
  }
  .home-content-and-cards__inner {
    gap: 46px;                   /* Figma layout_523NEO — intro↔cards row */
    min-width: 0;                /* allow inner flex children to honour overflow:auto */
  }
  .home-benefit-cards {
    display: flex;
    flex-direction: row;
    grid-template-columns: none; /* clear desktop grid */
    gap: 16px;                   /* Figma Row layout_2XXGR2 */
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;       /* Firefox: hide scrollbar */
    /* min-width: 0 stops the flex item from stretching to its min-content
       width (which equals the sum of all card widths + gaps, ≈1220 px) and
       lets overflow-x: auto kick in instead. */
    min-width: 0;
    width: 100%;
    /* Cards stay within the section's content area — no negative-margin
       bleed. First card aligns at section padding-left (20 px from viewport
       edge per Figma); overflow-x scrolls inside this container. */
    box-sizing: border-box;
  }
  .home-benefit-cards::-webkit-scrollbar {
    display: none;               /* Chromium / WebKit: hide scrollbar */
  }
  .home-benefit-card {
    flex: 0 0 293px;             /* Figma exact card content width */
    scroll-snap-align: start;
  }
  /* Card content — Figma node 10546:15641 layout_I1U4AW: column, gap 18,
     padding 16. Variable inner spacing implemented via gap:0 + per-element
     margin-top so we get Figma's 12 / 16 / 18 spacing pattern. */
  .home-benefit-card__body {
    padding: 16px;
    gap: 0;
  }
  .home-benefit-card__head {
    display: flex;
    align-items: center;
    gap: 4px;                    /* Figma Frame 270 layout_I4VITI gap */
  }
  .home-benefit-card__icon {
    font-size: 30px;             /* Figma layout_RGL894 30x30 icon */
  }
  .home-benefit-card__tag {
    font-size: 12px;             /* Figma Tagline Small */
    line-height: 1.2;
    letter-spacing: 0.04em;      /* Figma 4% (was 8%) */
  }
  .home-benefit-card__title {
    margin-top: 12px;            /* Figma Content Top gap (head→content) */
    font-size: 18px;             /* Figma Heading/H6 */
    line-height: 1.3;
    letter-spacing: -0.01em;
  }
  .home-benefit-card__text {
    margin-top: 16px;            /* Figma Content gap (heading→body) */
    font-size: 14px;             /* Figma Text/Small/Normal */
    line-height: 1.4;
  }
  .home-benefit-card__link {
    margin-top: 18px;            /* Figma BYFLPA gap (Content Top → Actions) */
    font-size: 14px;             /* Figma Text/Small/Bold */
    line-height: 1.4;
  }
  .home-benefit-card__strip {
    height: 6px;                 /* Figma layout_05WCIE / NUUV8W height */
  }
}

@media (max-width: 1024px) {
  .home-content-and-cards {
    padding: var(--space-12) var(--space-4);
  }
  .home-content-and-cards__intro {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* ==========================================================================
   5. Training — navy bg, intro + Course Finder strip + courses split
   Figma: 1440×1104, padding 112/80, gap 48; intro (1280 row gap 96);
          Course Finder Wrapper (fill, tangerine bg, padding 17/23);
          Courses Wrapper (row gap 64: left 439 / right fill)
   ========================================================================== */
.home-training {
  padding: var(--space-28) var(--space-20);
  background-color: var(--color-navy); /* #0B1628 */
  color: var(--color-white);
  /* Figma: Section_Training fixed height 1104px (node 10546:14332). */
  min-height: 1104px;
  display: flex;
  align-items: stretch;
}

.home-training__inner {
  max-width: 1280px;
  width: 100%;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: var(--space-12);
}

/* 5a. Intro — Figma layout_ZROHTY: column, gap 22; width constrained to 760px
   so copy doesn't stretch to full 1280 (matches News/Events intro width). */
.home-training__intro {
  display: flex;
  flex-direction: column;
  gap: 22px; /* Figma gap */
  max-width: 760px;
}

.home-training__intro-copy {
  margin: 0;
  color: var(--color-white); /* Figma fill_IU4MNZ */
  font-size: 20px; /* Figma Text/Large/Bold */
  font-weight: var(--font-weight-bold);
  line-height: 1.3;
}

/* 5b. Course Finder tangerine strip */
.home-course-finder {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-8);
  padding: 17px 23px;
  background-color: var(--color-tangerine); /* #FF6600 */
  border-radius: var(--radius-sm);
  color: var(--color-white);
}

.home-course-finder__title {
  margin: 0;
  font-size: var(--h5-size, 1.5rem);
  font-weight: var(--font-weight-regular);
  line-height: 1.3;
  color: var(--color-white); /* Figma: white on tangerine */
}

.home-course-finder__form {
  display: flex;
  flex: 1;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
}

.home-course-finder__field {
  display: flex;
  align-items: center;
}

.home-course-finder__field--grow {
  flex: 1;
  min-width: 200px;
}

.home-course-finder__field select,
.home-course-finder__field input[type="search"] {
  padding: var(--space-3);
  border: 1px solid var(--color-white);
  background-color: var(--color-white);
  color: var(--color-navy);
  border-radius: var(--radius-xs);
  font-size: var(--text-base);
  min-width: 160px;
  font-family: var(--font-family);
}

.home-course-finder__field--grow input[type="search"] {
  width: 100%;
  min-width: 0;
}

.home-course-finder__submit {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  background-color: var(--color-navy);
  color: var(--color-white);
  border: 0;
  border-radius: var(--radius-xs);
  font-weight: var(--font-weight-bold);
  cursor: pointer;
}

.home-course-finder__submit[disabled] {
  opacity: 0.6;
  cursor: not-allowed;
}

.home-course-finder__submit .material-symbols-outlined { font-size: 1rem; }

/* 5c. Courses split — Figma: Left Top Categories (439) + Right Popular Courses (fill) */
.home-training__courses {
  display: grid;
  grid-template-columns: 439px 1fr;
  gap: var(--space-16); /* 64 */
  align-items: start;
}

.home-training__categories-heading {
  margin: 0 0 var(--space-6);
  font-size: 1.5rem; /* H5 */
  font-weight: var(--font-weight-regular);
  line-height: 1.3;
  color: var(--color-white);
  letter-spacing: -0.01em;
}

.home-training__category-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}

.home-training__category-item {
  border-bottom: 1px solid var(--color-tangerine); /* Figma #FF6600 underline per row */
}

.home-training__category-item a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: 16px 0;
  color: var(--color-white); /* Figma fill_OPMVJW #FFFFFF */
  font-weight: var(--font-weight-bold); /* Text/Large/Bold */
  font-size: 1.25rem; /* 20px per Figma */
  line-height: 1.3;
  text-decoration: none;
  transition: color 0.2s ease;
}

.home-training__category-item a:hover {
  color: var(--color-tangerine); /* invert on hover */
}

/* "All Courses" = last link, Figma uses Text/Large/Black (font-weight 850) */
.home-training__category-item:last-child a {
  font-weight: 900;
}

.home-training__category-item .material-symbols-outlined {
  font-size: 20px;
}

/* Figma "Popular section" wrapper: #EBEBEB bg, padding 36, 4px radius, gap 24. */
.home-training__popular-wrap {
  display: flex;
  flex-direction: column;
  gap: var(--space-6); /* 24 per Figma */
  padding: var(--space-9); /* 36 per Figma */
  background-color: var(--color-accent-silver); /* #EBEBEB fill_MXVBT5 */
  border-radius: var(--radius-sm);
}

.home-training__popular-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
}

.home-training__popular-heading {
  margin: 0;
  font-size: 1.5rem;
  font-weight: var(--font-weight-regular);
  line-height: 1.3;
  color: var(--color-navy);
  letter-spacing: -0.01em;
}

.home-training__popular-nav {
  display: flex;
  gap: var(--space-2);
}

.home-training__popular-arrow {
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-color: var(--color-white);
  color: var(--color-navy);
  border: 1px solid var(--color-neutral-lighter);
  border-radius: var(--radius-sm);
  cursor: pointer;
}

.home-training__popular-arrow:hover {
  background-color: var(--color-tangerine);
  color: var(--color-white);
  border-color: var(--color-tangerine);
}

.home-training__popular-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-6);
}

/* Figma "Content" wrapper (layout_0EY25G): padding 24 gap 18 — image + heading
   + list + link are siblings all inset 24px from card edges. */
.home-popular-card {
  display: flex;
  flex-direction: column;
  gap: 18px; /* Figma gap */
  padding: 24px;
  background-color: var(--color-white);
  border: 1px solid var(--color-navy-lighter); /* #CED0D4 per Figma */
  border-radius: var(--radius-sm);
  color: var(--color-navy);
  box-shadow: 0 3px 16px -4px rgba(0, 0, 0, 0.09);
}

.home-popular-card__image {
  width: 100%;
  height: 130px; /* Figma layout_YGCO1T fixed height */
  background-color: var(--color-navy-lightest);
  border-radius: var(--radius-sm);
  overflow: hidden;
}

.home-popular-card__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.home-popular-card__image--placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--color-accent-silver), var(--color-neutral-lighter));
  color: var(--color-navy);
}

.home-popular-card__image--placeholder .material-symbols-outlined {
  font-size: 64px;
  opacity: 0.4;
}

/* Body is now a direct grouping of heading + bullets + link — card handles
   outer padding/gap. Body provides smaller internal gap between content-top
   (heading+list) and actions (link). */
.home-popular-card__body {
  display: flex;
  flex-direction: column;
  gap: 12px; /* Figma Content Top gap */
  flex: 1;
}

.home-popular-card__title {
  margin: 0;
  font-size: var(--text-md);
  font-weight: var(--font-weight-bold);
  line-height: 1.3;
  color: var(--color-navy);
}

/* Figma "List" frame: rows with bottom border tangerine-lighter, gap 4.
   Text is Text/Tiny/Bold 12px in tangerine #FF6600. Icon is check_small 24×24. */
.home-popular-card__bullets {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px; /* Figma layout_TEG47V gap */
  flex: 1;
}

.home-popular-card__bullets li {
  display: flex;
  align-items: center;
  gap: 4px; /* Figma layout_8KO14W gap */
  padding: 2px 0; /* Figma layout_8KO14W padding */
  border-bottom: 1px solid var(--color-tangerine-lighter); /* #FFE0CC */
  font-size: 12px; /* Figma Text/Tiny/Bold */
  font-weight: var(--font-weight-bold);
  line-height: 1.3;
  color: var(--color-tangerine); /* Figma fill #FF6600 */
}

.home-popular-card__bullets .material-symbols-outlined {
  color: var(--color-tangerine);
  font-size: 24px; /* Figma 24×24 */
  line-height: 1;
}

/* "View more" Link-variant button per Figma: plain text + icon, no bg/border */
.home-popular-card__link {
  display: inline-flex;
  align-items: center;
  gap: 8px; /* Figma layout_TSFKMJ gap */
  color: var(--color-navy); /* Figma fill_QWWGMZ #0B1628 */
  font-family: var(--font-family);
  font-size: 14px; /* Figma Text/Small/Bold */
  font-weight: var(--font-weight-bold);
  text-decoration: none;
  transition: color 0.2s ease;
  align-self: flex-start;
}

.home-popular-card__link:hover {
  color: var(--color-tangerine);
}

.home-popular-card__link .material-symbols-outlined {
  font-size: 24px;
  line-height: 1;
}

@media (max-width: 1024px) {
  .home-training {
    padding: var(--space-12) var(--space-4);
  }
  .home-training__intro,
  .home-training__courses {
    grid-template-columns: 1fr;
    gap: var(--space-6);
  }
  /* Popular Courses: single-column stack at 769–1024 (small tablet) — at <=768
     it switches to a horizontal drag-scroll carousel per Figma mobile spec. */
  .home-training__popular-cards {
    grid-template-columns: 1fr;
  }
  .home-course-finder {
    flex-direction: column;
    align-items: stretch;
  }
  .home-course-finder__form {
    flex-direction: column;
    align-items: stretch;
  }
  .home-course-finder__field select {
    width: 100%;
  }
}

@media (max-width: 768px) {
  /* Section_Training mobile — values from Figma node 10546:15645
     ("Section_Training" on the HOME // MOBILE artboard 10546:15579). */
  .home-training {
    padding: 50px 20px;            /* Figma layout_ZWX2ED */
    min-height: 0;                 /* desktop locks 1104 */
  }
  .home-training__inner {
    gap: 36px;                     /* Figma layout_I0223C */
  }
  /* Intro */
  .home-training__intro {
    gap: 22px;                     /* Figma layout_WJWOCW */
    max-width: none;
  }
  .home-training__intro-copy {
    font-size: 18px;               /* Figma Text/Large/Bold mobile (desktop is 20) */
    line-height: 1.3;
  }
  /* Course Finder — Figma layout_WFOZVS: padding 24, gap 10 */
  .home-course-finder {
    padding: 24px;
    gap: 16px;                     /* Figma Course Finder Inner gap */
  }
  .home-course-finder__title {
    font-size: 20px;               /* Figma Heading/H5: 20/400/130%/-1% */
    line-height: 1.3;
    letter-spacing: -0.01em;
  }
  .home-course-finder__form {
    gap: 16px;                     /* Figma layout_SH38PT */
  }
  .home-course-finder__field select,
  .home-course-finder__field input[type="search"] {
    padding: 8px 12px;             /* Figma layout_JJN9WZ field padding */
    font-size: 16px;               /* Figma Text/Regular/Normal */
    line-height: 1.5;
  }
  /* Search button: secondary alt — bg none, white border 2px, white text */
  .home-course-finder__submit {
    background-color: transparent;
    color: var(--color-white);
    border: 2px solid var(--color-white);
    padding: 8px 20px;
    height: 40px;                  /* Figma layout_9KTZWJ height */
    font-size: 16px;
    font-weight: 700;
    line-height: 1.5;
  }
  /* Courses wrapper */
  .home-training__courses {
    gap: 36px;                     /* Figma layout_73BG8K */
  }
  /* Top Categories rows: 18 px (Figma Text/Large/Bold) instead of 20 desktop */
  .home-training__category-item a {
    font-size: 18px;
    line-height: 1.3;
  }
  /* Popular Courses → horizontal drag-scroll carousel.
     Figma: Popular Courses container width 408 (overflows section 362),
     Cards row width 325 (overflows again), 2 cards × 270 + 16 gap = 556. */
  .home-training__inner,
  .home-training__courses,
  .home-training__popular-wrap {
    min-width: 0;                  /* prevent flex chain from inflating to cards' min-content */
  }
  .home-training__popular-wrap {
    padding: 16px;                 /* Figma layout_HDH5LA */
    gap: 16px;                     /* Figma layout_HDH5LA */
    /* No popular-nav arrows on mobile per Figma — header is just the heading. */
  }
  .home-training__popular-nav {
    display: none;                 /* mobile spec drops the prev/next arrows */
  }
  .home-training__popular-heading {
    font-size: 24px;               /* Figma Heading/H4 */
  }
  .home-training__popular-cards {
    display: flex;
    flex-direction: row;
    grid-template-columns: none;   /* clear desktop grid */
    gap: 16px;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    min-width: 0;
    width: 100%;
    box-sizing: border-box;
  }
  .home-training__popular-cards::-webkit-scrollbar {
    display: none;
  }
  .home-popular-card {
    flex: 0 0 270px;               /* Figma layout_CP03HU width */
    padding: 16px;                 /* Figma layout_GGXLAY padding (was 24 desktop) */
    scroll-snap-align: start;
  }
}

/* ==========================================================================
   6. News & Events — gradient navy + photo bg, 2 subsections
   Figma: gradient 180deg navy→navy50%→navy + bg image + rgba(11,22,40,0.8) overlay
   ========================================================================== */
.home-news-events {
  position: relative;
  background-color: var(--color-navy);
  background-image:
    linear-gradient(180deg, rgba(11, 22, 40, 1) 0%, rgba(11, 22, 40, 0.5) 50%, rgba(11, 22, 40, 1) 100%),
    url('../images/home-news-events-bg.png');
  background-size: cover;
  background-position: center;
  background-blend-mode: multiply, normal;
  color: var(--color-white);
}

.home-news-events__sub {
  max-width: 1280px;
  margin: 0 auto;
  padding: var(--space-28) var(--space-20);
  display: flex;
  flex-direction: column;
  gap: var(--space-12);
  /* Figma: each sub section is ~1262px tall. Ensure vertical rhythm matches. */
  min-height: 1262px;
}

.home-news-events__intro {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-16);
  align-items: flex-end;
}

.home-news-events__intro-right {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}

.home-news-events__intro-right p {
  margin: 0;
  color: var(--color-white-60);
  font-size: var(--text-md);
  line-height: 1.6;
}

.home-news-events__ctas {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}

.home-news-events__cta {
  display: inline-flex;
  align-items: center;
  padding: var(--space-2) var(--space-4);
  border: 1px solid var(--color-white-30);
  border-radius: 999px;
  color: var(--color-white);
  text-decoration: none;
  font-size: var(--text-sm);
  font-weight: var(--font-weight-bold);
  transition: background-color 0.2s ease, color 0.2s ease;
}

.home-news-events__cta:hover {
  background-color: var(--color-white);
  color: var(--color-navy);
}

.home-news-events__intro-left {
  max-width: 760px;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.home-news-events__intro-copy {
  margin: 0;
  color: var(--color-white); /* Figma fill_JOWY05 #FFFFFF — pure white, no opacity */
  font-size: 20px; /* Figma Text/Large/Bold */
  font-weight: var(--font-weight-bold); /* 65 Bold */
  line-height: 1.3;
}

/* Panel — Figma "Courses Wrapper": white bg, 4px radius, row gap 64 padding 36 */
.home-news-events__panel {
  display: grid;
  grid-template-columns: 1fr 220px;
  gap: var(--space-16); /* 64 per Figma */
  padding: var(--space-9); /* 36 per Figma */
  background-color: var(--color-white);
  border-radius: var(--radius-sm);
  color: var(--color-navy);
  align-items: start;
}

.home-news-events__main {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
  align-items: flex-start;
}

.home-news-events__main-heading {
  margin: 0;
  font-size: 1.5rem;
  font-weight: var(--font-weight-regular);
  line-height: 1.3;
  color: var(--color-navy);
  letter-spacing: -0.01em;
}

.home-news-events__cards {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-6);
}

.home-news-card,
.home-event-card {
  display: flex;
  flex-direction: column;
  background-color: var(--color-white);
  border-radius: var(--radius-sm);
  overflow: hidden;
  border: 1px solid var(--color-navy-lightest);
}

.home-news-card__image,
.home-event-card__image {
  position: relative;
  aspect-ratio: 16 / 10;
  background-color: var(--color-navy-lightest);
  overflow: hidden;
}

.home-news-card__image img,
.home-event-card__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.home-news-card__image-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--color-navy-lightest), var(--color-neutral-lighter));
  color: var(--color-navy);
}

.home-news-card__image-placeholder .material-symbols-outlined {
  font-size: 64px;
  opacity: 0.4;
}

/* Figma Tag (componentId 10546:13279 Colour=Light):
   #E6E7E9 bg, navy #0B1628 text, 2px radius, padding 4/10, 12px Bold,
   absolute position top:10 left:10 of the card image. */
.home-news-card__tag {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 1;
  padding: 4px 10px;
  background-color: var(--color-navy-lightest); /* #E6E7E9 */
  color: var(--color-navy);
  border-radius: 2px;
  font-size: 12px;
  font-weight: var(--font-weight-bold);
  line-height: 1.3;
  letter-spacing: 0;
  text-transform: none;
}

.home-news-card__body,
.home-event-card__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-5);
  flex: 1;
}

/* Events Card body uses tighter vertical rhythm per Figma layout_GQSHCA:
   padding 24, gap 24 between sections. */
.home-event-card__body {
  gap: 24px;
  padding: 24px;
  align-items: flex-start;
}

.home-news-card__date {
  font-size: var(--text-sm);
  color: var(--color-navy-light);
}

.home-news-card__title,
.home-event-card__title {
  margin: 0;
  font-size: 1.125rem;
  font-weight: var(--font-weight-bold);
  line-height: 1.3;
}

.home-news-card__title a,
.home-event-card__title a {
  color: var(--color-navy);
  text-decoration: none;
}

.home-news-card__title a:hover,
.home-event-card__title a:hover {
  color: var(--color-tangerine-dark);
}

.home-news-card__excerpt,
.home-event-card__excerpt {
  margin: 0;
  flex: 1;
  font-size: var(--text-sm);
  line-height: 1.5;
  color: var(--color-neutral-dark);
}

.home-news-card__link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  color: var(--color-navy);
  font-weight: var(--font-weight-bold);
  font-size: var(--text-sm);
  text-decoration: none;
  transition: color 0.2s ease;
}

.home-news-card__link:hover {
  color: var(--color-tangerine-dark);
}

.home-news-card__link .material-symbols-outlined { font-size: 1rem; }

/* Figma Events Card Top — Tag inside content (not overlay on image)
   followed by Info row of bordered chips. layout_Y7OANL: col gap 8. */
.home-event-card__top {
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: flex-start;
}

/* Event tag — gray bg like news but inside content area, not overlay.
   Figma layout_VFH2GN: padding 4/10, height 24, #E6E7E9 bg, 2px radius. */
.home-event-card__tag {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  height: 24px;
  background-color: var(--color-navy-lightest); /* #E6E7E9 */
  color: var(--color-navy);
  border-radius: 2px;
  font-size: 12px;
  font-weight: var(--font-weight-bold);
  line-height: 1.3;
}

/* Chips (Date / Time / Location) — bordered, 3px radius, #545B68 stroke+text.
   Figma layout_VJ90O3: padding 4/8, gap 4, 1px border fill_AJQTWQ. */
.home-event-card__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.home-event-card__chip {
  display: inline-flex;
  align-items: center;
  padding: 4px 8px;
  border: 1px solid var(--color-navy-light); /* #545B68 */
  border-radius: 3px;
  color: var(--color-navy-light);
  font-size: 12px;
  font-weight: var(--font-weight-bold);
  line-height: 1.3;
}

.home-event-card__content {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.home-news-events__cta-button { align-self: flex-start; }

/* Right Explore sidebar */
.home-news-events__explore {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

.home-news-events__explore-heading {
  margin: 0;
  font-size: 1.5rem;
  font-weight: var(--font-weight-regular);
  line-height: 1.3;
  color: var(--color-navy);
  letter-spacing: -0.01em;
}

.home-news-events__explore-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}

.home-news-events__explore-list li {
  /* Figma fill_073J26 #FF6600 — tangerine 1px bottom border on EVERY row
     including the last (per Figma 10546:14444 "All News" row stroke). */
  border-bottom: 1px solid var(--color-tangerine);
}

.home-news-events__explore-list a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-3) 0;
  color: var(--color-navy);
  font-weight: var(--font-weight-bold);
  text-decoration: none;
  transition: color 0.2s ease;
}

.home-news-events__explore-list a:hover { color: var(--color-tangerine-dark); }

.home-news-events__explore-list .material-symbols-outlined {
  font-size: 24px; /* Figma arrow_outward 24×24 */
  color: var(--color-navy); /* arrows match text color per Figma */
}

/* Unused legacy — kept so old class names don't 500 */
.home-news-events__featured {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-4);
}

.home-news-events__featured > .newsroom__tag,
.home-news-events__featured > .home-news-events__date,
.home-news-events__list-item .newsroom__tag,
.home-news-events__list-item .home-news-events__list-date {
  align-self: flex-start;
}

.home-news-events__featured > .home-news-events__featured-image,
.home-news-events__featured > .home-news-events__featured-title,
.home-news-events__featured > .home-news-events__featured-excerpt {
  align-self: stretch;
}

.home-news-events__featured-image {
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: var(--radius-sm);
  background-color: var(--color-navy-lightest);
}

.home-news-events__featured-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.home-news-events__featured-image--placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--color-navy-lightest), var(--color-neutral-lighter));
  color: var(--color-navy);
}

.home-news-events__featured-image--placeholder .material-symbols-outlined {
  font-size: 80px;
  opacity: 0.4;
}

.home-news-events__date {
  display: inline-block;
  color: var(--color-tangerine); /* Figma #FF6600 */
  font-size: var(--text-sm);
  font-weight: var(--font-weight-bold);
}

.home-news-events__featured-title {
  margin: 0;
  font-size: 1.5rem;
  line-height: 1.3;
  font-weight: var(--font-weight-bold);
}

.home-news-events__featured-title a {
  color: var(--color-navy);
  text-decoration: none;
}

.home-news-events__featured-title a:hover {
  color: var(--color-tangerine-dark);
}

.home-news-events__featured-excerpt {
  margin: 0;
  color: var(--color-neutral-dark);
  font-size: var(--text-base);
  line-height: 1.5;
}

/* Right column — Compact list (Figma: width 273) */
.home-news-events__list {
  list-style: none;
  margin: 0;
  padding: var(--space-4) 0;
  display: flex;
  flex-direction: column;
}

.home-news-events__list-item {
  border-bottom: 1px solid var(--color-navy-lightest);
}

.home-news-events__list-item:last-child {
  border-bottom: 0;
}

.home-news-events__list-item a {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-4) 0;
  color: var(--color-navy);
  text-decoration: none;
  transition: color 0.2s ease;
}

.home-news-events__list-item a:hover {
  color: var(--color-tangerine-dark);
}

.home-news-events__list-date {
  color: var(--color-tangerine); /* Figma #FF6600 */
  font-size: var(--text-xs, 0.75rem);
  font-weight: var(--font-weight-bold);
}

.home-news-events__list-title {
  font-size: var(--text-sm);
  line-height: 1.4;
  font-weight: var(--font-weight-bold);
}

.newsroom__tag--sm {
  font-size: var(--text-xs, 0.75rem);
  padding: 2px var(--space-2);
  align-self: flex-start;
}

.home-news-events__empty {
  color: var(--color-neutral-dark);
  text-align: center;
  padding: var(--space-8);
}

@media (max-width: 1024px) {
  .home-news-events__sub {
    padding: var(--space-10) var(--space-4);
  }
  .home-news-events__intro {
    grid-template-columns: 1fr;
    align-items: flex-start;
  }
  .home-news-events__panel {
    grid-template-columns: 1fr;
    padding: var(--space-4);
    gap: var(--space-8);
  }
}

@media (max-width: 768px) {
  /* News & Events mobile — values from Figma node 10546:15695
     ("Sections_News & Events" on the HOME // MOBILE artboard 10546:15579).
     Each sub-section (News / Events) shares the same structure. */
  .home-news-events__sub {
    padding: 50px 20px;            /* Figma layout_0XWG2R */
    gap: 36px;                     /* Figma layout_0XWG2R */
    min-height: 0;                 /* desktop locks 1262 px */
  }
  /* Intro — single text-content column on mobile */
  .home-news-events__intro-left {
    max-width: none;
    gap: 22px;                     /* Figma layout_BD12WK between tagline+heading+copy */
  }
  .home-news-events__intro-copy {
    font-size: 18px;               /* Figma Text/Large/Bold */
    line-height: 1.3;
  }
  /* Panel becomes transparent + flat layout (no white card box on mobile) */
  .home-news-events__panel {
    background-color: transparent;
    padding: 0;
    border-radius: 0;
    gap: 36px;                     /* Figma Cards Wrapper layout_Y78ARY */
    color: var(--color-white);
  }
  .home-news-events__main {
    gap: 24px;                     /* Figma Latest section layout_ELWAGN */
  }
  .home-news-events__main-heading {
    font-size: 24px;               /* Figma Heading/H4 */
    color: var(--color-white);
  }
  .home-news-events__cards {
    grid-template-columns: 1fr;
    gap: 16px;                     /* Figma Cards layout_H3QIRQ */
  }
  /* News Card — Figma component "News Card" (10546:13322) */
  .home-news-card__image {
    aspect-ratio: auto;
    height: 241px;                 /* Figma layout_FIPSP2 fixed height */
  }
  .home-news-card__body {
    gap: 24px;                     /* Figma layout_ACQC4E */
    padding: 24px;                 /* Figma layout_ACQC4E */
  }
  .home-news-card__title {
    font-size: 20px;               /* Figma Heading/H5: 20/400/130%/-1% */
    font-weight: 400;              /* 55 Roman, not bold */
    letter-spacing: -0.01em;
  }
  .home-news-card__excerpt {
    font-size: 16px;               /* Figma Text/Regular/Normal */
    line-height: 1.5;
    color: var(--color-navy-darkest); /* #03060C dark */
  }
  /* Event Card — Figma component "Events Card" (10303:38871) */
  .home-event-card__image {
    aspect-ratio: auto;
    height: 241px;                 /* Figma layout_FIPSP2 same as News */
  }
  .home-event-card__body {
    gap: 24px;                     /* Figma layout_ACQC4E */
    padding: 24px;
  }
  .home-event-card__title {
    /* Events use Heading/H5 (115:3255): 24/400/130%/-1% — bigger than News */
    font-size: 24px;
    font-weight: 400;
    letter-spacing: -0.01em;
  }
  .home-event-card__excerpt {
    font-size: 16px;
    line-height: 1.5;
    color: var(--color-navy-darkest);
  }
  /* Explore list mobile: white text + arrows on dark gradient bg (panel is now
     transparent, so navy arrows from desktop default would be invisible). */
  .home-news-events__explore-heading {
    color: var(--color-white);
  }
  .home-news-events__explore-list a {
    color: var(--color-white);
  }
  .home-news-events__explore-list .material-symbols-outlined {
    color: var(--color-white);
  }
}

/* First-word accent on dark bg (navy or gradient news bg) — tangerine passes contrast */
.home-section-heading__accent--on-dark {
  color: var(--color-tangerine);
}

/* ==========================================================================
   7. Partners — 4 logos on white, drag-scroll mobile
   Figma: padding 112/80, gap 48, center-aligned, 4 logos row gap 64
   ========================================================================== */
.home-partners {
  padding: var(--space-28) var(--space-20);
  background-color: var(--color-white);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--space-12);
  /* Figma: Partners section 452px tall (padding 112×2 + content 228). */
  min-height: 452px;
}

.home-partners__intro {
  max-width: 1280px;
  margin: 0 auto;
  text-align: center;
}

.home-partners__heading {
  margin: 0;
  /* Figma Heading/H2: Frutiger 55 Roman 48px, 120% line-height, -1% letter-spacing */
  font-family: var(--font-family);
  font-size: 48px;
  font-weight: var(--font-weight-regular); /* 400 = 55 Roman, not bold */
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--color-navy-darkest); /* Figma fill #03060C */
}

.home-partners__grid {
  list-style: none;
  margin: 0 auto;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-16);
  align-items: center;
  max-width: 1280px;
  width: 100%;
}

.home-partners__item a,
.home-partners__slide a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 140px;
  text-decoration: none;
}

.home-partners__item img,
.home-partners__slide img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  /* Figma: logos displayed at full colour, not grayscale-by-default. */
}

.home-partners__placeholder {
  width: 100%;
  padding: var(--space-5);
  border: 1px dashed var(--color-neutral-light);
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
  font-weight: var(--font-weight-bold);
  color: var(--color-neutral-dark);
  text-align: center;
}

.home-partners__slider { display: none; }

@media (max-width: 768px) {
  /* Partners mobile — values from Figma node 10546:15774. */
  .home-partners {
    padding: 60px 20px;            /* Figma layout_FLMQE5 */
    gap: 36px;                     /* Figma layout_FLMQE5 */
    min-height: 0;                 /* desktop locks 452 */
  }
  .home-partners__heading {
    font-size: 34px;               /* Figma Heading/H2 mobile */
    line-height: 1.2;
    letter-spacing: -0.01em;
  }
  .home-partners__grid { display: none; }
  .home-partners__slider { display: block; }
}