/* ==========================================================================
   CARGONOMICS — Production CSS v2
   Design System: Deep Slate + Copper + Maritime Teal
   Typography: Source Serif 4 (headings) + Outfit (body)
   Layout: Mobile-first, BEM naming
   Changes from v1: Varied layouts, alternating pillars, featured programs,
   horizontal curriculum, journey with image, mosaic conference, Why Vietnam
   ========================================================================== */

/* ==========================================================================
   CUSTOM PROPERTIES
   ========================================================================== */

:root {
  --color-primary: #1E293B;
  --color-secondary: #B87333;
  --color-accent: #115E59;
  --color-ivory: #FAF9F6;
  --color-text: #334155;
  --color-stone: #F0EDE8;
  --color-signal: #DC2626;
  --color-white: #FFFFFF;

  --font-heading: 'Source Serif 4', serif;
  --font-body: 'Outfit', sans-serif;

  --max-width: 1200px;
  --container-padding: 20px;

  --transition-base: 0.3s ease;
  --transition-fast: 0.2s ease;

  /* RGB VARIANTS — defaults for Deep Slate + Copper. Overridden by brand token files. */
  --color-primary-rgb: 30, 41, 59;
  --color-secondary-rgb: 184, 115, 51;
  --color-accent-rgb: 17, 94, 89;
  --color-ivory-rgb: 250, 249, 246;
  --color-white-rgb: 255, 255, 255;

  /* SPACING — 8px base scale. Overridden by brand token files. */
  --space-2xs: 4px;
  --space-xs:  8px;
  --space-sm:  12px;
  --space-md:  16px;
  --space-lg:  20px;
  --space-xl:  24px;
  --space-2xl: 32px;
  --space-3xl: 48px;
  --section-padding-y: 72px;
  --section-padding-x: 0px;
  --container-max: 1200px;

  /* COMPONENT DEFAULTS — overridden by brand token files. */
  --btn-bg: var(--color-secondary);
  --btn-color: var(--color-white);
  --btn-hover-bg: #A3642B;
  --btn-radius: 0;
  --btn-padding-y: 14px;
  --btn-padding-x: 32px;
  --btn-font-size: 0.95rem;
  --btn-font-weight: 600;
  --card-bg: var(--color-white);
  --card-border-color: var(--color-primary);
  --card-border-opacity: 0.12;
  --card-radius: 0;
  --card-padding: 28px 24px;
  --nav-bg: var(--color-white);
  --nav-border-opacity: 0.1;
  --nav-link-color: var(--color-text);
  --nav-link-hover: var(--color-primary);
  --footer-bg: var(--color-primary);
  --footer-color: var(--color-white);
  --footer-link-opacity: 0.65;
  --footer-link-hover: var(--color-secondary);
  --input-bg: var(--color-white);
  --input-border: #D2D3D5;
  --input-radius: 0;
  --input-padding: 12px 16px;
  --input-focus-border: var(--color-primary);
  --color-accent-dark: #0D4D47;
}

/* ==========================================================================
   RESET & BASE
   ========================================================================== */

*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--font-body);
  color: var(--color-text);
  background: var(--color-ivory);
  line-height: 1.6;
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

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

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

ul, ol {
  list-style: none;
}

button {
  font-family: inherit;
  cursor: pointer;
}

/* ==========================================================================
   LAYOUT
   ========================================================================== */

.container {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 var(--container-padding);
}

/* ==========================================================================
   TYPOGRAPHY UTILITIES
   ========================================================================== */

.section-label {
  font-family: var(--font-body);
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: var(--color-secondary);
  margin-bottom: 8px;
}

/* ==========================================================================
   BUTTONS
   ========================================================================== */

.btn {
  display: inline-block;
  padding: 14px 32px;
  font-family: var(--font-body);
  font-size: 0.95rem;
  font-weight: 600;
  text-decoration: none;
  border: none;
  border-radius: 0;
  cursor: pointer;
}

.btn--copper {
  background: var(--color-secondary);
  color: var(--color-white);
  transition: background var(--transition-fast), transform var(--transition-fast);
}

.btn--copper:hover {
  background: var(--btn-hover-bg);
  transform: scale(1.02);
}

.btn--large {
  padding: 18px 40px;
  font-size: 1.05rem;
}

.btn--outline {
  display: inline-block;
  padding: 14px 32px;
  border: 2px solid var(--color-primary);
  color: var(--color-primary);
  font-family: var(--font-body);
  font-size: 0.95rem;
  font-weight: 600;
  text-decoration: none;
  background: transparent;
  border-radius: 0;
  transition: background var(--transition-fast), color var(--transition-fast), transform var(--transition-fast);
}

.btn--outline:hover {
  background: var(--color-primary);
  color: var(--color-white);
  transform: scale(1.02);
}

/* ==========================================================================
   NAVIGATION
   ========================================================================== */

.nav {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--color-white);
  border-bottom: 1px solid rgba(var(--color-primary-rgb), 0.1);
  padding: 14px 0;
}

.nav.nav--scrolled {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.nav .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.nav__brand {
  display: flex;
  flex-direction: column;
}

.nav__logo {
  font-family: var(--font-heading);
  font-size: 1.15rem;
  font-weight: 700;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--color-primary);
  text-decoration: none;
}

.nav__tagline {
  font-family: var(--font-body);
  font-size: 0.65rem;
  letter-spacing: 1px;
  color: var(--color-secondary);
  margin-top: 1px;
}

.nav__links {
  display: none;
  list-style: none;
  gap: 28px;
  align-items: center;
}

.nav__links a {
  text-decoration: none;
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: 0.9rem;
  font-weight: 500;
  position: relative;
  transition: color var(--transition-fast);
}

.nav__links a::after {
  content: '';
  position: absolute;
  bottom: -4px;
  left: 0;
  width: 0;
  height: 2px;
  background: var(--color-secondary);
  transition: width var(--transition-base);
}

.nav__links a:hover {
  color: var(--color-primary);
}

.nav__links a:hover::after {
  width: 100%;
}

.nav__cta {
  padding: 10px 24px;
  background: var(--color-secondary);
  color: var(--color-white) !important;
  font-size: 0.85rem;
  font-weight: 600;
  border-radius: 0;
  transition: background var(--transition-fast), transform var(--transition-fast);
}

.nav__cta::after {
  display: none;
}

.nav__cta:hover {
  background: var(--btn-hover-bg);
  transform: scale(1.02);
}

.nav__mobile-toggle {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--color-primary);
  padding: 8px 4px;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.nav__mobile-toggle span {
  display: block;
  width: 24px;
  height: 2px;
  background: var(--color-primary);
  transition: transform var(--transition-fast), opacity var(--transition-fast);
}

/* Mobile menu — slide down */
.nav__links.is-open {
  display: flex;
  flex-direction: column;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: var(--color-white);
  border-bottom: 1px solid rgba(var(--color-primary-rgb), 0.1);
  padding: 20px var(--container-padding) 24px;
  gap: 16px;
  align-items: flex-start;
  box-shadow: 0 8px 24px rgba(var(--color-primary-rgb), 0.08);
  z-index: 100;
}

.nav__links.is-open .nav__cta {
  margin-top: 4px;
}

/* ==========================================================================
   HERO — Asymmetric split with video placeholder
   ========================================================================== */

.hero {
  overflow: hidden;
  background: var(--color-white);
}

.hero__content {
  padding: 48px 20px 40px;
}

.hero__headline {
  font-family: var(--font-heading);
  font-size: 2rem;
  font-weight: 700;
  line-height: 1.15;
  color: var(--color-primary);
  margin-bottom: 16px;
}

.hero__sub {
  font-family: var(--font-body);
  font-size: 1.05rem;
  color: var(--color-text);
  line-height: 1.7;
  max-width: 540px;
  margin-bottom: 28px;
}

.hero__ctas {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

/* Hero image crop. Globe bleeds off the left edge for a designed feel
   rather than a centered sphere. Mobile default: 4:3 forces enough
   horizontal overflow for the object-position shift to be visible. */
.hero__video-wrapper {
  aspect-ratio: 4 / 3;
  overflow: hidden;
}

.hero__video-wrapper img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 65% 50%;
}

/* ==========================================================================
   PILLARS v2 — Alternating image+text rows
   ========================================================================== */

.pillars-v2 {
  padding: 40px 0 72px;
  background: var(--color-white);
}

.pillars-v2__header {
  text-align: center;
  margin-bottom: 56px;
}

.pillars-v2__header h2 {
  font-family: var(--font-heading);
  font-size: 1.75rem;
  font-weight: 700;
  color: var(--color-primary);
}

.pillar-row {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin-bottom: 48px;
}

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

.pillar-row__image {
  overflow: hidden;
  aspect-ratio: 16/10;
}

.pillar-row__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--transition-base);
}

.pillar-row:hover .pillar-row__image img {
  transform: scale(1.03);
}

.pillar-row__content {
  padding: 28px 0;
}

.pillar-row__number {
  font-family: var(--font-heading);
  font-size: 1.5rem;
  font-weight: 400;
  color: var(--color-secondary);
  opacity: 0.3;
  line-height: 1;
  margin-bottom: 8px;
}

.pillar-row__name {
  font-family: var(--font-body);
  font-size: 1.2rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--color-primary);
  margin-bottom: 10px;
}

.pillar-row__content p {
  font-family: var(--font-body);
  font-size: 0.95rem;
  color: var(--color-text);
  line-height: 1.7;
}

/* ==========================================================================
   FULL-WIDTH IMAGE BREAK
   ========================================================================== */

.image-break {
  position: relative;
  height: 300px;
  background: url('https://images.unsplash.com/photo-1578575437130-527eed3abbec?w=1600&q=80') center/cover no-repeat;
}

.image-break__overlay {
  position: absolute;
  inset: 0;
  background: rgba(var(--color-primary-rgb), 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
}

.image-break__text {
  font-family: var(--font-heading);
  font-size: 2rem;
  font-weight: 700;
  color: var(--color-white);
  text-align: center;
  padding: 0 20px;
}

/* ==========================================================================
   PROGRAMS v2 — Featured full-width + 2 side-by-side
   ========================================================================== */

.programs-v2 {
  padding: 72px 0;
  background: var(--color-stone);
}

.programs-v2__header {
  margin-bottom: 40px;
}

.programs-v2__header h2 {
  font-family: var(--font-heading);
  font-size: 1.75rem;
  font-weight: 700;
  color: var(--color-primary);
  margin-bottom: 4px;
}

/* Featured WYDLS card */
.program-featured {
  background: var(--color-white);
  border: 2px solid var(--color-secondary);
  margin-bottom: 20px;
  overflow: hidden;
  transition: transform var(--transition-base), box-shadow var(--transition-base);
}

.program-featured:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 32px rgba(var(--color-primary-rgb), 0.1);
}

.program-featured__image {
  aspect-ratio: 16/9;
  overflow: hidden;
}

.program-featured__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.program-featured__content {
  padding: 28px 24px;
  display: flex;
  flex-direction: column;
}

/* Shared program card styles (used by .program-featured__content descendants) */
.program-card {
  background: var(--color-white);
  border: 1px solid rgba(var(--color-primary-rgb), 0.12);
  padding: 28px 24px;
  display: flex;
  flex-direction: column;
  transition: transform var(--transition-base), box-shadow var(--transition-base);
}

.program-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 32px rgba(var(--color-primary-rgb), 0.1);
}

.program-card.is-hovered {
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}

.program-card__badge {
  display: inline-block;
  font-family: var(--font-body);
  font-size: 0.65rem;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  font-weight: 700;
  padding: 4px 10px;
  background: var(--color-secondary);
  color: var(--color-white);
  margin-bottom: 14px;
  align-self: flex-start;
}

.program-card__free-tag {
  display: inline-block;
  font-family: var(--font-body);
  font-size: 0.85rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 2px;
  padding: 6px 14px;
  background: var(--color-primary);
  color: var(--color-white);
  margin-bottom: 10px;
  align-self: flex-start;
}

.program-card__name {
  font-family: var(--font-heading);
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--color-primary);
  margin-bottom: 6px;
  line-height: 1.3;
}

.program-card__meta {
  font-family: var(--font-body);
  font-size: 0.78rem;
  color: var(--color-text);
  opacity: 0.6;
  margin-bottom: 10px;
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.program-card__desc {
  font-family: var(--font-body);
  font-size: 0.88rem;
  color: var(--color-text);
  line-height: 1.6;
  flex-grow: 1;
}

.program-card__cta {
  display: inline-block;
  margin-top: 16px;
  padding: 10px 20px;
  border: 1px solid var(--color-secondary);
  color: var(--color-secondary);
  font-family: var(--font-body);
  font-size: 0.85rem;
  font-weight: 600;
  text-decoration: none;
  align-self: flex-start;
  transition: background var(--transition-fast), color var(--transition-fast);
}

.program-card__cta:hover {
  background: var(--color-secondary);
  color: var(--color-white);
}

/* ==========================================================================
   CURRICULUM v2 — Horizontal strip
   ========================================================================== */

.curriculum-v2 {
  margin-top: 48px;
}

.curriculum-v2__title {
  font-family: var(--font-heading);
  font-size: 1.2rem;
  font-weight: 600;
  color: var(--color-primary);
  margin-bottom: 20px;
}

/* Marquee container */
.curriculum-v2__marquee {
  overflow: hidden;
  position: relative;
  padding: 8px 0;
}

/* Fade edges */
.curriculum-v2__marquee::before,
.curriculum-v2__marquee::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  width: 60px;
  z-index: 2;
  pointer-events: none;
}

.curriculum-v2__marquee::before {
  left: 0;
  background: linear-gradient(to right, var(--color-stone) 10%, rgba(0, 0, 0, 0) 100%);
}

.curriculum-v2__marquee::after {
  right: 0;
  background: linear-gradient(to left, var(--color-stone) 10%, rgba(0, 0, 0, 0) 100%);
}

/* Track — holds 2 copies of cards for seamless loop */
.curriculum-v2__track {
  display: flex;
  gap: 20px;
  width: max-content;
  animation: marquee-scroll 30s linear infinite;
}

.curriculum-v2__marquee:hover .curriculum-v2__track {
  animation-play-state: paused;
}

/* Curriculum marquee CTA: link to the full module detail section on course.html */
.curriculum-v2__cta {
  margin-top: var(--space-lg, 24px);
  text-align: center;
}

@keyframes marquee-scroll {
  0% { transform: translateX(0); }
  100% { transform: translateX(calc(-50% - 10px)); }
}

/* Flip card */
.curriculum-v2__card {
  flex-shrink: 0;
  width: 180px;
  height: 180px;
  perspective: 600px;
  cursor: pointer;
}

.curriculum-v2__card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  transition: transform 0.5s ease;
  transform-style: preserve-3d;
}

.curriculum-v2__card:hover .curriculum-v2__card-inner {
  transform: rotateY(180deg);
}

.curriculum-v2__card-front,
.curriculum-v2__card-back {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 16px;
  text-align: center;
  border: 1px solid rgba(var(--color-primary-rgb), 0.1);
}

.curriculum-v2__card-front {
  background: var(--color-stone);
}

.curriculum-v2__card-front svg {
  color: var(--color-secondary);
  margin-bottom: 10px;
}

.curriculum-v2__card-number {
  font-family: var(--font-heading);
  font-size: 0.75rem;
  color: var(--color-secondary);
  opacity: 0.5;
  margin-bottom: 4px;
}

.curriculum-v2__card-back {
  background: var(--color-primary);
  transform: rotateY(180deg);
}

.curriculum-v2__card-back .curriculum-v2__card-name {
  color: var(--color-secondary);
  margin-bottom: 8px;
}

.curriculum-v2__card-back p {
  font-family: var(--font-body);
  font-size: 0.75rem;
  line-height: 1.5;
  color: var(--color-ivory);
  margin: 0;
}

.curriculum-v2__card-name {
  font-family: var(--font-body);
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--color-primary);
}

/* ==========================================================================
   JOURNEY v2 — Side-by-side with image
   ========================================================================== */

.journey-v2 {
  padding: 72px 0;
  background: var(--color-white);
}

.journey-v2__header {
  text-align: center;
  margin-bottom: 48px;
}

.journey-v2__header h2 {
  font-family: var(--font-heading);
  font-size: 1.75rem;
  font-weight: 700;
  color: var(--color-primary);
}

.journey-v2__layout {
  display: flex;
  flex-direction: column;
  gap: 40px;
}

.journey-v2__image {
  overflow: hidden;
}

.journey-v2__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  aspect-ratio: 16/10;
}

.journey-v2__steps {
  display: flex;
  flex-direction: column;
  gap: 0;
  position: relative;
}

/* Connecting line between steps */
.journey-v2__steps::before {
  content: '';
  position: absolute;
  top: 20px;
  bottom: 20px;
  left: 19px;
  width: 2px;
  background: var(--color-secondary);
  opacity: 0.3;
}

.journey-v2__step {
  display: flex;
  align-items: flex-start;
  gap: 20px;
  padding: 16px 0;
  position: relative;
  z-index: 1;
}

.journey-v2__step-circle {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--color-white);
  border: 2px solid var(--color-secondary);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-family: var(--font-heading);
  font-size: 1rem;
  font-weight: 600;
  color: var(--color-secondary);
  transition: background var(--transition-fast), color var(--transition-fast);
}

.journey-v2__step:hover .journey-v2__step-circle {
  background: var(--color-secondary);
  color: var(--color-white);
}

.journey-v2__step-name {
  font-family: var(--font-body);
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--color-primary);
  margin-bottom: 4px;
}

.journey-v2__step-desc {
  font-family: var(--font-body);
  font-size: 0.85rem;
  color: var(--color-text);
  line-height: 1.5;
}

.journey-v2__cta {
  text-align: center;
  margin-top: 48px;
}

/* ==========================================================================
   CREDIBILITY STRIP
   ========================================================================== */

.credibility {
  padding: 56px 0;
  background: var(--color-primary);
  color: var(--color-white);
}

/* New header block (2026-04-16): gives the stats orientation + context.
   Readers need a "why" before they can decode "50+ / 1,000+ / 300+".
   Section label (gold eyebrow) + headline (white, editorial). */
.credibility__header {
  text-align: center;
  max-width: 720px;
  margin: 0 auto var(--space-2xl);
}

.credibility__header .section-label {
  color: var(--color-secondary);
}

.credibility__heading {
  font-family: var(--font-heading);
  font-weight: var(--font-weight-heading);
  font-size: clamp(1.3rem, 2.6vw, 1.8rem);
  color: var(--color-white);
  margin-top: var(--space-sm);
  line-height: 1.3;
}

.credibility__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 28px;
  text-align: center;
}

.credibility__stat-number {
  font-family: var(--font-heading);
  font-size: 2.2rem;
  font-weight: 700;
  color: var(--color-secondary);
  line-height: 1;
  margin-bottom: 6px;
}

.credibility__stat-label {
  font-family: var(--font-body);
  font-size: 0.75rem;
  color: var(--color-white);
  opacity: 0.65;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  line-height: 1.4;
}

.credibility__context {
  text-align: center;
  margin-top: 28px;
  font-family: var(--font-body);
  font-size: 0.85rem;
  color: var(--color-white);
  opacity: 0.5;
}

/* ==========================================================================
   WHY VIETNAM
   ========================================================================== */

.vietnam {
  padding: 72px 0;
  background: var(--color-ivory);
}

.vietnam__layout {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.vietnam__image {
  overflow: hidden;
  aspect-ratio: 16/10;
}

.vietnam__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.vietnam__content {
  padding: 28px 0;
}

.vietnam__content h2 {
  font-family: var(--font-heading);
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--color-primary);
  line-height: 1.25;
  margin-bottom: 16px;
}

.vietnam__content p {
  font-family: var(--font-body);
  font-size: 0.95rem;
  color: var(--color-text);
  line-height: 1.7;
}

.vietnam__content .section-label {
  margin-bottom: 8px;
}

/* ==========================================================================
   TRAINERS v2 — Larger card layout
   ========================================================================== */

.trainers-v2 {
  padding: 72px 0;
  background: var(--color-stone);
}

.trainers-v2__header {
  margin-bottom: 40px;
}

.trainers-v2__header h2 {
  font-family: var(--font-heading);
  font-size: 1.75rem;
  font-weight: 700;
  color: var(--color-primary);
}

.trainers-v2__grid {
  display: grid;
  gap: 32px;
}

.trainer-card-v2 {
  background: var(--color-white);
  border: 1px solid rgba(var(--color-primary-rgb), 0.1);
  overflow: hidden;
  transition: transform var(--transition-base), box-shadow var(--transition-base);
}

.trainer-card-v2:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 32px rgba(var(--color-primary-rgb), 0.08);
}

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

.trainer-card-v2__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--transition-base);
}

.trainer-card-v2:hover .trainer-card-v2__photo img {
  transform: scale(1.03);
}

.trainer-card-v2__info {
  padding: 24px;
}

.trainer-card-v2__name {
  font-family: var(--font-heading);
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--color-primary);
  margin-bottom: 4px;
}

.trainer-card-v2__role {
  font-family: var(--font-body);
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--color-secondary);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 10px;
}

.trainer-card-v2__bio {
  font-family: var(--font-body);
  font-size: 0.88rem;
  color: var(--color-text);
  line-height: 1.6;
}

/* ==========================================================================
   TRAINERS v3 — Forward-thinking instructor showcase
   Three variants share `.trainer-card-v3` base; modifiers swap the visual read.
   Variant A (--editorial) is the live default on index.html + course.html.
   Variants B (--network) and C (--split) render in styleguide.html for review.
   Placeholder + coming-soon-badge rules live in css/fixes.css.
   ========================================================================== */

.trainers-v3 {
  padding: 72px 0;
  background: var(--color-stone);
}

.trainers-v3__header {
  margin-bottom: 40px;
  text-align: center;
}

.trainers-v3__header h2 {
  font-family: var(--font-heading);
  font-size: 1.75rem;
  color: var(--color-primary);
  margin-top: 8px;
}

.trainers-v3__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
}

@media (min-width: 768px) {
  .trainers-v3__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* --------------------------------------------------------------------------
   Shared card base
   -------------------------------------------------------------------------- */

.trainer-card-v3 {
  position: relative;
  background: var(--color-white);
  border: 1px solid rgba(var(--color-primary-rgb), 0.1);
  border-radius: var(--card-radius);
  overflow: hidden;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.trainer-card-v3:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 32px rgba(var(--color-primary-rgb), 0.12);
}

.trainer-card-v3__media {
  position: relative;
  overflow: hidden;
  background: var(--color-primary);
}

.trainer-card-v3__photo {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 15%;
  transition: transform 0.5s ease;
}

.trainer-card-v3:hover .trainer-card-v3__photo {
  transform: scale(1.03);
}

.trainer-card-v3__info {
  padding: 24px;
}

.trainer-card-v3__name {
  font-family: var(--font-heading);
  font-size: 1.15rem;
  color: var(--color-primary);
  margin: 0 0 4px;
}

.trainer-card-v3__role {
  font-family: var(--font-body);
  font-size: 0.75rem;
  color: var(--color-secondary);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 600;
  margin-bottom: 12px;
}

.trainer-card-v3__bio,
.trainer-card-v3__teaches,
.trainer-card-v3__tagline {
  font-family: var(--font-body);
  font-size: 0.88rem;
  color: var(--color-text);
  line-height: 1.6;
  margin: 0;
}

/* --------------------------------------------------------------------------
   Variant A — Editorial portrait + credential ribbon (LIVE DEFAULT)
   -------------------------------------------------------------------------- */

.trainer-card-v3--editorial .trainer-card-v3__media {
  aspect-ratio: 4 / 5;
}

.trainer-card-v3--editorial .trainer-card-v3__route {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1;
  stroke: rgba(var(--color-accent-rgb), 0.35);
  fill: none;
  stroke-width: 1.25;
}

.trainer-card-v3--editorial .trainer-card-v3__photo {
  position: relative;
  z-index: 0;
}

.trainer-card-v3__ribbon {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 16px 16px 14px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  background: linear-gradient(
    to top,
    rgba(var(--color-primary-rgb), 0.92) 0%,
    rgba(var(--color-primary-rgb), 0.72) 60%,
    rgba(var(--color-primary-rgb), 0) 100%
  );
  z-index: 2;
}

.trainer-card-v3__chip {
  font-family: var(--font-heading);
  font-size: 0.65rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-white);
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.28);
  padding: 4px 8px;
  line-height: 1;
  white-space: nowrap;
}

.trainer-card-v3__chip--accent {
  background: rgba(var(--color-secondary-rgb), 0.85);
  border-color: rgba(var(--color-secondary-rgb), 0.95);
  color: var(--color-primary);
}

/* --------------------------------------------------------------------------
   Variant B — Network / node-line motif
   -------------------------------------------------------------------------- */

.trainer-card-v3--network .trainer-card-v3__media {
  aspect-ratio: 3 / 4;
  background: var(--color-primary);
}

.trainer-card-v3--network .trainer-card-v3__photo {
  position: relative;
  z-index: 0;
  mix-blend-mode: luminosity;
  opacity: 0.92;
}

.trainer-card-v3--network .trainer-card-v3__network {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1;
  stroke: rgba(var(--color-accent-rgb), 0.55);
  fill: none;
  stroke-width: 1;
}

.trainer-card-v3__node {
  fill: var(--color-accent-teal);
  r: 4;
  animation: v3-node-pulse 3.5s ease-in-out infinite;
}

.trainer-card-v3__node--2 { animation-delay: 0.5s; }
.trainer-card-v3__node--3 { animation-delay: 1s; }
.trainer-card-v3__node--4 { animation-delay: 1.5s; }
.trainer-card-v3__node--5 { animation-delay: 2s; }

@keyframes v3-node-pulse {
  0%, 100% { opacity: 0.4; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.3); }
}

@media (prefers-reduced-motion: reduce) {
  .trainer-card-v3__node { animation: none; opacity: 0.8; }
}

@media (max-width: 767px) {
  .trainer-card-v3--network .trainer-card-v3__network {
    opacity: 0.55;
  }
}

/* --------------------------------------------------------------------------
   Variant C — Split-panel with hover / focus reveal
   -------------------------------------------------------------------------- */

.trainer-card-v3--split {
  display: grid;
  grid-template-columns: 1fr;
}

@media (min-width: 768px) {
  .trainer-card-v3--split {
    grid-template-columns: 45% 55%;
  }
}

.trainer-card-v3--split .trainer-card-v3__media {
  aspect-ratio: 1 / 1;
}

@media (min-width: 768px) {
  .trainer-card-v3--split .trainer-card-v3__media {
    aspect-ratio: auto;
    height: 100%;
  }
}

.trainer-card-v3--split .trainer-card-v3__info {
  position: relative;
  overflow: hidden;
  min-height: 200px;
}

.trainer-card-v3__face {
  position: absolute;
  inset: 24px;
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.trainer-card-v3__face--reveal {
  opacity: 0;
  transform: translateY(8px);
  list-style: none;
  padding: 0;
  margin: 0;
}

.trainer-card-v3__face--reveal li {
  font-family: var(--font-body);
  font-size: 0.9rem;
  color: var(--color-text);
  line-height: 1.5;
  padding: 8px 0 8px 20px;
  position: relative;
  border-bottom: 1px solid rgba(var(--color-primary-rgb), 0.08);
}

.trainer-card-v3__face--reveal li:last-child {
  border-bottom: none;
}

.trainer-card-v3__face--reveal li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 14px;
  width: 10px;
  height: 2px;
  background: var(--color-secondary);
}

.trainer-card-v3--split:hover .trainer-card-v3__face--default,
.trainer-card-v3--split:focus-within .trainer-card-v3__face--default {
  opacity: 0;
  transform: translateY(-8px);
}

.trainer-card-v3--split:hover .trainer-card-v3__face--reveal,
.trainer-card-v3--split:focus-within .trainer-card-v3__face--reveal {
  opacity: 1;
  transform: translateY(0);
}

.trainer-card-v3--split:focus-within {
  outline: 2px solid var(--color-secondary);
  outline-offset: 2px;
}

/* ==========================================================================
   FOOTER
   ========================================================================== */

.footer {
  padding: 48px 0 28px;
  background: var(--color-primary);
  color: var(--color-white);
}

.footer__grid {
  display: grid;
  gap: 36px;
  margin-bottom: 36px;
}

.footer__col-title {
  font-family: var(--font-body);
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: var(--color-secondary);
  opacity: 0.7;
  margin-bottom: 12px;
}

.footer__col p,
.footer__col a {
  font-family: var(--font-body);
  font-size: 0.88rem;
  color: rgba(var(--color-ivory-rgb), 0.65);
  text-decoration: none;
  line-height: 1.9;
  display: block;
  transition: color var(--transition-fast);
}

.footer__col a:hover {
  color: var(--color-secondary);
}

.footer__association {
  font-size: 0.78rem;
  opacity: 0.45;
  margin-top: 8px;
}

.footer__note {
  font-size: 0.78rem;
  opacity: 0.4;
  margin-top: 4px;
  font-style: italic;
}

.footer__bottom {
  border-top: 1px solid rgba(var(--color-white-rgb), 0.1);
  padding-top: 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: var(--font-body);
  font-size: 0.78rem;
  color: var(--color-white);
  opacity: 0.45;
  flex-wrap: wrap;
  gap: 8px;
}

.footer__social {
  display: flex;
  gap: 16px;
}

.footer__social a {
  color: rgba(var(--color-white-rgb), 0.45);
  text-decoration: none;
  transition: color var(--transition-fast);
}

.footer__social a:hover {
  color: var(--color-secondary);
}

/* ==========================================================================
   FLOATING BUTTONS
   ========================================================================== */

.floating-buttons {
  position: fixed;
  bottom: 20px;
  right: 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  z-index: 99;
}

.floating-btn {
  width: 56px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  position: relative;
  transition: transform var(--transition-fast);
  background: none;
}

.floating-btn__icon {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
}

.floating-btn:hover {
  transform: scale(1.1);
}

.floating-btn__label {
  position: absolute;
  right: calc(100% + 10px);
  white-space: nowrap;
  background: var(--color-primary);
  color: var(--color-white);
  font-size: 0.75rem;
  font-weight: 600;
  padding: 6px 12px;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--transition-fast);
}

.floating-btn:hover .floating-btn__label {
  opacity: 1;
}


/* ==========================================================================
   DESKTOP MODAL — WYDLS Promotion
   ========================================================================== */

.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(var(--color-primary-rgb), 0.55);
  z-index: 200;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 20px;
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--transition-base), visibility var(--transition-base);
}

.modal-overlay.is-active {
  opacity: 1;
  visibility: visible;
}

.modal {
  background: var(--color-white);
  max-width: 440px;
  width: 100%;
  position: relative;
}

.modal__close {
  position: absolute;
  top: 8px;
  right: 12px;
  background: none;
  border: none;
  font-size: 1.75rem;
  cursor: pointer;
  color: var(--color-white);
  line-height: 1;
  z-index: 2;
  transition: opacity var(--transition-fast);
  padding: 4px 8px;
}

.modal__close:hover {
  opacity: 0.75;
}

.modal__free-banner {
  background: var(--color-secondary);
  color: var(--color-white);
  text-align: center;
  padding: 18px 40px;
}

.modal__free-banner-big {
  font-family: var(--font-heading);
  font-size: 2.25rem;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  line-height: 1.1;
}

.modal__free-banner-line {
  display: block;
}

.modal__free-banner-sub {
  font-family: var(--font-body);
  font-size: 0.78rem;
  opacity: 0.85;
  margin-top: 4px;
}

.modal__body {
  padding: 24px 28px 28px;
}

.modal__title {
  font-family: var(--font-heading);
  font-size: 1.2rem;
  font-weight: 600;
  color: var(--color-primary);
  line-height: 1.25;
  margin-bottom: 12px;
}

.modal__list {
  list-style: none;
  padding: 0;
  margin-bottom: 20px;
}

.modal__list li {
  font-family: var(--font-body);
  font-size: 0.88rem;
  color: var(--color-text);
  line-height: 1.7;
  padding-left: 18px;
  position: relative;
}

.modal__list li::before {
  content: '\2713';
  position: absolute;
  left: 0;
  font-weight: 700;
  color: var(--color-secondary);
}

.modal__cta {
  display: block;
  width: 100%;
  padding: 16px;
  background: var(--color-secondary);
  color: var(--color-white);
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 700;
  text-align: center;
  text-decoration: none;
  border: none;
  border-radius: 0;
  cursor: pointer;
  transition: background var(--transition-fast);
}

.modal__cta:hover {
  background: var(--btn-hover-bg);
}

.modal__dismiss {
  display: block;
  text-align: center;
  margin-top: 10px;
  font-family: var(--font-body);
  font-size: 0.78rem;
  color: var(--color-accent);
  cursor: pointer;
  background: none;
  border: none;
  transition: color var(--transition-fast);
}

.modal__dismiss:hover {
  color: var(--color-accent-dark);
}

/* ==========================================================================
   MOBILE STICKY BAR
   ========================================================================== */

.sticky-promo {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 200;
  background: var(--color-primary);
  color: var(--color-white);
  padding: 12px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  transform: translateY(100%);
  transition: transform var(--transition-base);
}

.sticky-promo.is-visible {
  transform: translateY(0);
}

.sticky-promo__text {
  font-family: var(--font-body);
  font-size: 0.82rem;
  line-height: 1.3;
  flex: 1;
  color: var(--color-ivory);
}

.sticky-promo__text strong {
  display: block;
  font-size: 0.9rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.sticky-promo__cta {
  flex-shrink: 0;
  padding: 10px 18px;
  background: var(--color-secondary);
  color: var(--color-white);
  font-family: var(--font-body);
  font-size: 0.8rem;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
  transition: background var(--transition-fast);
}

.sticky-promo__cta:hover {
  background: var(--btn-hover-bg);
}

.sticky-promo__close {
  background: none;
  border: none;
  color: rgba(var(--color-white-rgb), 0.5);
  font-size: 1.2rem;
  cursor: pointer;
  flex-shrink: 0;
  padding: 0 4px;
  transition: color var(--transition-fast);
}

.sticky-promo__close:hover {
  color: var(--color-white);
}

/* ==========================================================================
   SCROLL ANIMATIONS
   ========================================================================== */

.fade-up {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

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

/* ==========================================================================
   TABLET — min-width: 768px
   ========================================================================== */

@media (min-width: 768px) {
  :root {
    --container-padding: 32px;
  }

  /* Nav */
  .nav__links {
    display: flex;
  }

  .nav__mobile-toggle {
    display: none;
  }

  /* Hero — asymmetric split */
  .hero {
    display: grid;
    grid-template-columns: 55% 45%;
    min-height: 60vh;
    align-items: center;
  }

  .hero__content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 64px 48px 40px 0;
    padding-left: max(32px, calc((100vw - var(--max-width)) / 2 + 32px));
    order: 1;
  }

  .hero__headline {
    font-size: clamp(1.75rem, 2.5vw, 2.5rem);
  }

  /* Desktop hero crop: stretch the image grid cell to full row height,
     then object-position shifts focus right so the globe bleeds off the
     left edge. Aspect ratio drops away; the hero row is governed by the
     content block, not the image. */
  .hero__video,
  .hero__video-wrapper {
    align-self: stretch;
    height: 100%;
  }

  .hero__video-wrapper {
    aspect-ratio: auto;
  }

  .hero__video-wrapper img {
    object-position: 72% 50%;
  }

  /* Pillars v2 — alternating rows side-by-side */
  .pillar-row {
    display: grid;
    grid-template-columns: 45% 55%;
    gap: 40px;
    align-items: center;
    margin-bottom: 40px;
  }

  .pillar-row--reverse {
    grid-template-columns: 55% 45%;
  }

  .pillar-row--reverse .pillar-row__image {
    order: 2;
  }

  .pillar-row--reverse .pillar-row__content {
    order: 1;
  }

  .pillar-row__content {
    padding: 24px 0;
  }

  .pillar-row__image {
    aspect-ratio: unset;
    overflow: hidden;
  }

  .pillar-row__image img {
    width: 100%;
    max-height: 280px;
    object-fit: cover;
    min-height: 180px;
  }

  /* Image break */
  .image-break {
    height: 400px;
  }

  .image-break__text {
    font-size: 2.8rem;
  }

  /* Programs v2 — featured side-by-side */
  .program-featured {
    display: grid;
    grid-template-columns: 2fr 3fr;
  }

  .program-featured__image {
    aspect-ratio: unset;
    min-height: 300px;
  }

  .program-featured__content {
    padding: 32px 36px;
  }

  /* Curriculum v2 — larger cards on desktop */
  .curriculum-v2__card {
    width: 200px;
    height: 200px;
  }

  /* Journey v2 — side-by-side */
  .journey-v2__layout {
    flex-direction: row;
    gap: 48px;
    align-items: center;
  }

  .journey-v2__image {
    flex: 0 0 40%;
    order: 2;
    max-height: 360px;
    overflow: hidden;
    border-radius: 0;
  }

  .journey-v2__image img {
    aspect-ratio: 4/3;
    object-fit: cover;
  }

  .journey-v2__steps {
    flex: 1;
    order: 1;
  }

  /* Credibility */
  .credibility__grid {
    grid-template-columns: repeat(4, 1fr);
  }

  /* Vietnam — side-by-side */
  .vietnam__layout {
    flex-direction: row;
    gap: 48px;
    align-items: center;
  }

  .vietnam__image {
    flex: 0 0 45%;
    aspect-ratio: 4/3;
  }

  .vietnam__content {
    flex: 1;
    padding: 0;
  }

  /* Trainers v2 — 2-col grid */
  .trainers-v2__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 32px;
    max-width: 820px;
  }

  .trainer-card-v2__photo {
    aspect-ratio: 3/2;
  }

  /* Footer */
  .footer__grid {
    grid-template-columns: 1.5fr 1fr 1fr 1.5fr;
  }

  /* Modal + Sticky */
  .modal-overlay {
    display: flex;
  }

  .sticky-promo {
    display: none;
  }
}

/* ==========================================================================
   DESKTOP — min-width: 1024px
   ========================================================================== */

@media (min-width: 1024px) {
  /* Generous section padding */
  .pillars-v2 {
    padding: 32px 0 72px;
  }

  .programs-v2 {
    padding: 96px 0;
  }

  .journey-v2 {
    padding: 96px 0;
  }

  .trainers-v2 {
    padding: 96px 0;
  }

  .vietnam {
    padding: 96px 0;
  }

  /* Pillar rows — wider gap */
  .pillar-row {
    gap: 48px;
    margin-bottom: 40px;
  }

  .pillar-row__number {
    font-size: 2.2rem;
  }

  /* Credibility stats — bigger numbers */
  .credibility__stat-number {
    font-size: 2.8rem;
  }

  /* Nav spacing */
  .nav__links {
    gap: 32px;
  }

  /* Journey layout gap */
  .journey-v2__layout {
    gap: 64px;
  }

  /* Vietnam layout gap */
  .vietnam__layout {
    gap: 64px;
  }

  .vietnam__content h2 {
    font-size: 2rem;
  }
}

/* ==========================================================================
   LARGE DESKTOP — min-width: 1280px
   ========================================================================== */

@media (min-width: 1280px) {
  .hero__headline {
    font-size: 3.5rem;
  }

  .hero__sub {
    font-size: 1.1rem;
  }

  .image-break__text {
    font-size: 3.2rem;
  }
}

/* ==========================================================================
   PRINT
   ========================================================================== */

@media print {
  .nav,
  .floating-buttons,
  .modal-overlay,
  .sticky-promo {
    display: none !important;
  }

  body {
    color: #000;
    background: #fff;
  }

  .credibility {
    background: #333;
    color: #fff;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
}

/* ==========================================================================
   PRD 07: Skip Link & Nav Active State
   ========================================================================== */

.skip-link {
  position: absolute;
  top: -100%;
  left: 16px;
  z-index: 10000;
  padding: 8px 16px;
  background: var(--color-primary, #11294B);
  color: var(--color-white, #fff);
  font-family: var(--font-body, 'Open Sans', sans-serif);
  font-size: 14px;
  text-decoration: none;
  border-radius: 0 0 4px 4px;
  transition: top 0.2s ease;
}

.skip-link:focus {
  top: 0;
  outline: 2px solid var(--color-secondary, #D4B468);
  outline-offset: 2px;
}

.nav__link--active {
  color: var(--color-secondary, #D4B468);
  font-weight: 700;
  position: relative;
}

.nav__link--active::after {
  content: '';
  position: absolute;
  bottom: -4px;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--color-secondary, #D4B468);
}

/* Footer social link styles */
.footer__social-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  color: var(--footer-link-color, rgba(255,255,255,0.7));
  transition: color var(--transition-fast, 0.2s ease);
}

.footer__social-link:hover {
  color: var(--color-secondary, #D4B468);
}

.footer__social {
  display: flex;
  gap: 8px;
  align-items: center;
}

/* Inquiry button (outline small) */
.btn--outline-sm {
  display: inline-block;
  padding: 6px 16px;
  border: 1px solid var(--color-secondary, #D4B468);
  color: var(--color-secondary, #D4B468);
  background: transparent;
  font-family: var(--font-body, 'Open Sans', sans-serif);
  font-size: 14px;
  text-decoration: none;
  transition: background var(--transition-fast, 0.2s ease), color var(--transition-fast, 0.2s ease);
  cursor: pointer;
}

.btn--outline-sm:hover {
  background: var(--color-secondary, #D4B468);
  color: var(--color-primary, #11294B);
}

/* ==========================================================================
   ABOUT PAGE STYLES (extracted from about.html inline styles)
   ========================================================================== */

/* ==========================================================================
   ABOUT PAGE — Company Profile
   ========================================================================== */

.company-profile {
  padding: var(--section-padding-y) 0;
  background: var(--color-ivory);
}

.company-profile__content {
  max-width: none;
}

/* 2-column layout: text left, image right. Mobile stacks (default single column). */
.company-profile__layout-v2 {
  display: grid;
  gap: var(--space-2xl);
  grid-template-columns: 1fr;
  align-items: start;
}

@media (min-width: 1024px) {
  .company-profile__layout-v2 {
    grid-template-columns: 1.2fr 1fr;
  }
}

/* About hero image: constrain aspect (v6 fix: was stretching thin landscape on wide viewports with port-1.jpg).
   Uses 4:5 portrait-ish aspect on desktop so it sits beside the text like a companion image, not a banner.
   On mobile/tablet (single-column stack) the image breathes at 16:9 because vertical real estate is cheap there. */
.company-profile__image-v2 {
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: 8px;
}

@media (min-width: 1024px) {
  .company-profile__image-v2 {
    aspect-ratio: 4 / 5;
    position: sticky;
    top: 100px;
  }
}

.company-profile__image-v2 picture,
.company-profile__image-v2 img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.company-profile__heading {
  font-family: var(--font-heading);
  font-weight: var(--font-weight-heading);
  font-size: 2.2rem;
  color: var(--color-primary);
  margin-bottom: var(--space-xl);
  line-height: 1.2;
}

.company-profile__body p {
  font-family: var(--font-body);
  font-size: 1.05rem;
  color: var(--color-text);
  line-height: 1.75;
  margin-bottom: var(--space-lg);
}

.company-profile__body p:last-child {
  margin-bottom: 0;
}

.company-profile__address {
  margin-top: var(--space-2xl);
  padding-top: var(--space-xl);
  border-top: 1px solid rgba(var(--color-primary-rgb), 0.1);
  font-family: var(--font-body);
  font-size: 0.95rem;
  color: var(--color-text-muted);
  line-height: 1.6;
}

.company-profile__address strong {
  color: var(--color-primary);
  font-weight: 600;
}

/* ==========================================================================
   ABOUT PAGE — Three Pillars (card layout variant)
   ========================================================================== */

.about-pillars {
  padding: var(--section-padding-y) 0;
  background: var(--color-white);
}

.about-pillars__header {
  text-align: center;
  margin-bottom: var(--space-3xl);
}

.about-pillars__header h2 {
  font-family: var(--font-heading);
  font-weight: var(--font-weight-heading);
  font-size: 1.8rem;
  color: var(--color-primary);
  margin-top: var(--space-sm);
}

.about-pillars__grid {
  display: grid;
  gap: var(--space-2xl);
}

.about-pillar-card {
  background: var(--color-stone);
  border-top: 3px solid var(--color-secondary);
  transition: transform var(--transition-base), box-shadow var(--transition-base);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.about-pillar-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 32px rgba(var(--color-primary-rgb), 0.08);
}

/* Image header on About pillar card (v6: addresses text-heavy complaint; reuses PRD 21 optimised imagery) */
.about-pillar-card__image {
  width: 100%;
  aspect-ratio: 3 / 2;
  overflow: hidden;
  background: var(--color-primary);
}

.about-pillar-card__image picture,
.about-pillar-card__image img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.about-pillar-card__image img {
  transition: transform var(--transition-base);
}

.about-pillar-card:hover .about-pillar-card__image img {
  transform: scale(1.03);
}

/* Consistent padding on text content (replaces the single .about-pillar-card padding) */
.about-pillar-card__number,
.about-pillar-card__title,
.about-pillar-card__body {
  padding-left: var(--card-padding);
  padding-right: var(--card-padding);
}

.about-pillar-card__number {
  font-family: var(--font-heading);
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--color-secondary);
  letter-spacing: 2px;
  text-transform: uppercase;
  padding-top: var(--card-padding);
  margin-bottom: var(--space-sm);
}

.about-pillar-card__title {
  font-family: var(--font-heading);
  font-weight: var(--font-weight-heading);
  font-size: 1.3rem;
  color: var(--color-primary);
  margin-bottom: var(--space-md);
}

.about-pillar-card__body {
  font-family: var(--font-body);
  font-size: 0.95rem;
  color: var(--color-text);
  line-height: 1.7;
  padding-bottom: var(--card-padding);
}

/* ==========================================================================
   ABOUT PAGE — Leadership
   ========================================================================== */

.leadership {
  padding: var(--section-padding-y) 0;
  background: var(--color-ivory);
}

.leadership__header {
  text-align: center;
  margin-bottom: var(--space-3xl);
}

.leadership__header h2 {
  font-family: var(--font-heading);
  font-weight: var(--font-weight-heading);
  font-size: 1.8rem;
  color: var(--color-primary);
  margin-top: var(--space-sm);
}

.leadership__grid {
  display: grid;
  gap: var(--space-2xl);
}

.leader-card {
  background: var(--color-white);
  border: 1px solid rgba(var(--color-primary-rgb), 0.1);
  overflow: hidden;
  transition: transform var(--transition-base), box-shadow var(--transition-base);
}

.leader-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 32px rgba(var(--color-primary-rgb), 0.08);
}

.leader-card__photo {
  width: 100%;
  aspect-ratio: 4/3;
  overflow: hidden;
}

.leader-card__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--transition-base);
}

.leader-card:hover .leader-card__photo img {
  transform: scale(1.03);
}

.leader-card__photo--placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-primary);
}

.leader-card__initials {
  font-family: var(--font-heading);
  font-size: 3rem;
  font-weight: 700;
  color: var(--color-secondary);
  letter-spacing: 2px;
}

.leader-card__info {
  padding: var(--space-xl);
}

.leader-card__name {
  font-family: var(--font-heading);
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--color-primary);
  margin-bottom: var(--space-2xs);
}

.leader-card__role {
  font-family: var(--font-body);
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--color-secondary);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: var(--space-sm);
}

.leader-card__bio {
  font-family: var(--font-body);
  font-size: 0.88rem;
  color: var(--color-text);
  line-height: 1.7;
}

/* ==========================================================================
   ABOUT PAGE — CTA
   ========================================================================== */

.about-cta {
  padding: var(--section-padding-y) 0;
  background: var(--color-primary);
  text-align: center;
}

.about-cta__heading {
  font-family: var(--font-heading);
  font-weight: var(--font-weight-heading);
  font-size: 1.8rem;
  color: var(--color-white);
  margin-bottom: var(--space-md);
}

.about-cta__body {
  font-family: var(--font-body);
  font-size: 1.05rem;
  color: rgba(var(--color-white-rgb), 0.8);
  margin-bottom: var(--space-2xl);
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
  line-height: 1.6;
}

/* ==========================================================================
   ABOUT PAGE — Responsive
   ========================================================================== */

@media (min-width: 768px) {
  .about-pillars__grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .leadership__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-2xl);
  }

  .leader-card__photo {
    aspect-ratio: 3/2;
  }
}

@media (min-width: 1024px) {
  .company-profile {
    padding: 96px 0;
  }

  .company-profile__heading {
    font-size: 2.6rem;
  }

  .about-pillars {
    padding: 96px 0;
  }

  .leadership {
    padding: 96px 0;
  }

  .about-cta {
    padding: 96px 0;
  }

  .about-cta__heading {
    font-size: 2.2rem;
  }
}

/* ==========================================================================
   COURSE PAGE STYLES (extracted from course.html inline styles)
   ========================================================================== */

/* ===== COURSE OVERVIEW ===== */
.course-overview {
  padding: var(--section-padding-y) 0;
  background: var(--color-ivory);
}

.course-overview__layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-3xl);
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--container-padding);
}

.course-overview__content {
  max-width: 720px;
}

.course-overview__label {
  font-family: var(--font-heading);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--color-secondary);
  margin-bottom: var(--space-md);
}

.course-overview__title {
  font-family: var(--font-heading);
  font-weight: var(--font-weight-heading);
  font-size: clamp(1.8rem, 4vw, 2.6rem);
  color: var(--color-primary);
  margin-bottom: var(--space-md);
  line-height: 1.2;
}

.course-overview__subtitle {
  font-family: var(--font-body);
  font-size: 1.15rem;
  color: var(--color-text);
  margin-bottom: var(--space-2xl);
  line-height: 1.6;
}

.course-overview__facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: var(--space-lg);
  margin-bottom: var(--space-2xl);
}

.course-overview__fact {
  padding: var(--space-lg);
  border-left: 3px solid var(--color-secondary);
}

.course-overview__fact-label {
  font-family: var(--font-body);
  font-size: 0.78rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-text-muted);
  margin-bottom: var(--space-2xs);
}

.course-overview__fact-value {
  font-family: var(--font-heading);
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--color-primary);
}

.course-overview__positioning {
  font-family: var(--font-body);
  font-size: 1rem;
  color: var(--color-text);
  line-height: 1.7;
  margin-bottom: var(--space-xl);
}

.course-overview__brochure {
  font-family: var(--font-body);
  font-size: 0.9rem;
  color: var(--color-text-muted);
  font-style: italic;
  margin-top: var(--space-lg);
}

/* ===== CURRICULUM GRID ===== */
.curriculum-grid {
  padding: var(--section-padding-y) 0;
  background: var(--color-white);
}

.curriculum-grid .container {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--container-padding);
}

.curriculum-grid__header {
  margin-bottom: var(--space-3xl);
}

.curriculum-grid__modules {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--space-2xl);
}

.curriculum-grid__card {
  background: var(--color-stone);
  border: 1px solid rgba(var(--color-primary-rgb), var(--card-border-opacity));
  padding: var(--space-2xl);
  transition: transform var(--transition-base), box-shadow var(--transition-base);
}

.curriculum-grid__card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 32px rgba(var(--color-primary-rgb), 0.1);
}

.curriculum-grid__card-number {
  font-family: var(--font-heading);
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--color-secondary);
  margin-bottom: var(--space-sm);
}

.curriculum-grid__card-title {
  font-family: var(--font-heading);
  font-size: 1rem;
  font-weight: 700;
  color: var(--color-primary);
  margin-bottom: var(--space-sm);
  line-height: 1.3;
}

.curriculum-grid__card-desc {
  font-family: var(--font-body);
  font-size: 0.9rem;
  color: var(--color-text);
  line-height: 1.6;
}

.curriculum-grid__card--highlight {
  border-color: var(--color-secondary);
  border-width: 2px;
}

/* ===== WHO SHOULD APPLY ===== */
.who-apply {
  padding: var(--section-padding-y) 0;
  background: var(--color-ivory);
}

.who-apply .container {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--container-padding);
}

.who-apply__layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-3xl);
}

.who-apply__criteria {
  list-style: none;
  padding: 0;
  margin: var(--space-2xl) 0 0 0;
}

.who-apply__criteria li {
  font-family: var(--font-body);
  font-size: 1rem;
  color: var(--color-text);
  line-height: 1.7;
  padding: var(--space-sm) 0;
  padding-left: var(--space-2xl);
  position: relative;
}

.who-apply__criteria li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 8px;
  height: 8px;
  background: var(--color-secondary);
}

.who-apply__selection-note {
  font-family: var(--font-body);
  font-size: 0.95rem;
  color: var(--color-text);
  line-height: 1.7;
  margin-top: var(--space-2xl);
  padding: var(--space-lg);
  border-left: 3px solid var(--color-secondary);
  background: rgba(var(--color-secondary-rgb, 212, 180, 104), 0.06);
}

/* ===== SCHEDULE ===== */
.course-schedule {
  padding: var(--section-padding-y) 0;
  background: var(--color-white);
}

.course-schedule .container {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--container-padding);
}

.course-schedule__timeline {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-lg);
  margin-top: var(--space-2xl);
}

.course-schedule__day {
  display: grid;
  grid-template-columns: 80px 1fr;
  gap: var(--space-lg);
  padding: var(--space-lg);
  border: 1px solid rgba(var(--color-primary-rgb), var(--card-border-opacity));
  background: var(--color-stone);
}

.course-schedule__day--highlight {
  border-color: var(--color-secondary);
  border-width: 2px;
  background: rgba(var(--color-secondary-rgb, 212, 180, 104), 0.04);
}

.course-schedule__day-label {
  font-family: var(--font-heading);
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--color-secondary);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.course-schedule__day-title {
  font-family: var(--font-heading);
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--color-primary);
  margin-bottom: var(--space-2xs);
}

.course-schedule__day-desc {
  font-family: var(--font-body);
  font-size: 0.88rem;
  color: var(--color-text);
  line-height: 1.6;
}

.course-schedule__note {
  font-family: var(--font-body);
  font-size: 0.85rem;
  color: var(--color-text-muted);
  font-style: italic;
  margin-top: var(--space-2xl);
}

/* ===== CTA SECTIONS ===== */
.course-cta {
  padding: var(--space-3xl) 0;
  text-align: center;
}

.course-cta--mid {
  background: var(--color-primary);
}

.course-cta--bottom {
  background: var(--color-primary);
  padding: var(--section-padding-y) 0;
}

.course-cta .container {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--container-padding);
}

.course-cta__heading {
  font-family: var(--font-heading);
  font-size: clamp(1.3rem, 3vw, 1.8rem);
  font-weight: var(--font-weight-heading);
  color: var(--color-white);
  margin-bottom: var(--space-sm);
}

.course-cta__sub {
  font-family: var(--font-body);
  font-size: 1rem;
  color: rgba(var(--color-white-rgb), 0.8);
  margin-bottom: var(--space-2xl);
}

/* ===== PLACEHOLDER SECTIONS ===== */
.course-placeholder {
  display: none; /* Activate when content is ready */
  padding: var(--section-padding-y) 0;
}

.course-placeholder .container {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--container-padding);
}

.course-placeholder__item {
  padding: var(--space-lg) 0;
  border-bottom: 1px solid rgba(var(--color-primary-rgb), 0.08);
}

.course-placeholder__question {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 1rem;
  color: var(--color-primary);
}

/* ===== COURSE PAGE — RESPONSIVE ===== */
@media (min-width: 768px) {
  .course-overview__layout {
    grid-template-columns: 1fr;
  }

  .course-overview__facts {
    grid-template-columns: repeat(4, 1fr);
  }

  .who-apply__layout {
    grid-template-columns: 1fr 1fr;
    align-items: start;
  }

  .course-schedule__timeline {
    grid-template-columns: 1fr 1fr;
  }
}

@media (min-width: 1024px) {
  .curriculum-grid__modules {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* =====================================================================
   TRUSTED PARTNERS v3 (2026-04-16, light treatment)
   Light-background marquee with navy typography. Solves the adjacency
   problem (stats + partners were both navy). Accommodates real multi-
   colour partner logos via grayscale-by-default + colour-on-hover once
   <span class="trusted-partners__logo"> is swapped for <img>. Pure CSS
   motion with prefers-reduced-motion fallback. v2 dark navy treatment
   archived in docs/archived-components.md.
   ===================================================================== */

.trusted-partners {
  padding: var(--section-padding-y) 0;
  background: var(--color-ivory);
  color: var(--color-primary);
  overflow: hidden;
  position: relative;
}

/* Subtle gold top-bottom rules to frame the band */
.trusted-partners::before,
.trusted-partners::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(to right, transparent, rgba(var(--color-secondary-rgb, 212, 180, 104), 0.4), transparent);
}

.trusted-partners::before { top: 0; }
.trusted-partners::after { bottom: 0; }

.trusted-partners__header {
  text-align: center;
  margin-bottom: var(--space-2xl);
  max-width: 720px;
  margin-left: auto;
  margin-right: auto;
}

.trusted-partners__header .section-label {
  color: var(--color-secondary);
}

.trusted-partners__header h2 {
  font-family: var(--font-heading);
  font-weight: var(--font-weight-heading);
  font-size: 1.8rem;
  color: var(--color-primary);
  margin-top: var(--space-sm);
  margin-bottom: var(--space-md);
}

.trusted-partners__lede {
  font-family: var(--font-body);
  font-size: 1rem;
  color: var(--color-text);
  line-height: 1.6;
}

/* ---------- Marquee container ---------- */

.trusted-partners__marquee {
  overflow: hidden;
  position: relative;
  padding: var(--space-xl) 0;
  margin-bottom: var(--space-lg);
  /* Fade edges via mask-image so they dissolve into the section bg.
     WebKit prefix for older Safari. */
  -webkit-mask-image: linear-gradient(to right,
    transparent 0,
    black 10%,
    black 90%,
    transparent 100%);
  mask-image: linear-gradient(to right,
    transparent 0,
    black 10%,
    black 90%,
    transparent 100%);
}

/* ---------- Scrolling track ---------- */

.trusted-partners__track {
  display: flex;
  align-items: center;
  gap: var(--space-xl);
  width: max-content;
  animation: trusted-partners-scroll 60s linear infinite;
  will-change: transform;
}

@keyframes trusted-partners-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); } /* half because content is duplicated */
}

/* Pause on hover (desktop) */
.trusted-partners__marquee:hover .trusted-partners__track {
  animation-play-state: paused;
}

/* Respect reduced-motion preference */
@media (prefers-reduced-motion: reduce) {
  .trusted-partners__track {
    animation: none;
    animation-duration: 0ms;
  }
  /* Allow manual horizontal scroll as the fallback, but hide the scrollbar chrome
     so it still reads as a premium band, not a scrollable container. */
  .trusted-partners__marquee {
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;         /* Firefox */
    -ms-overflow-style: none;      /* IE / legacy Edge */
  }
  .trusted-partners__marquee::-webkit-scrollbar {
    display: none;                  /* WebKit / Chromium / Safari */
  }
}

/* ---------- Individual partner item ---------- */

.trusted-partners__item {
  display: flex;
  align-items: center;
  padding: var(--space-sm) var(--space-md);
  transition: transform 0.25s ease, filter 0.25s ease;
  flex: 0 0 auto;
}

.trusted-partners__item:hover {
  transform: translateY(-2px);
}

/* Separator */
.trusted-partners__sep {
  color: var(--color-secondary);
  opacity: 0.55;
  font-size: 0.8rem;
  flex: 0 0 auto;
  transform: translateY(-1px);
}

/* ---------- Fake wordmark: base ---------- */
/* Light-treatment: navy text at reduced opacity; on hover, full-colour
   navy. Pattern mirrors the grayscale-default + colour-on-hover used on
   real logos once they land (see .trusted-partners__logo-img below). */

.trusted-partners__logo {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1.4rem;
  color: var(--color-primary);
  opacity: 0.55;
  letter-spacing: 0;
  line-height: 1;
  white-space: nowrap;
  display: inline-block;
  position: relative;
  transition: color 0.25s ease, opacity 0.25s ease;
}

.trusted-partners__item:hover .trusted-partners__logo {
  opacity: 1;
  color: var(--color-primary);
}

/* ---------- Fake wordmark: typographic variants ----------
   Each variant makes the name feel like a distinct brand wordmark.
   When real logos arrive, swap <span> for <img> and these variants
   become irrelevant. */

.trusted-partners__logo[data-logo-style="bold-italic"] {
  font-weight: 900;
  font-style: italic;
  letter-spacing: -0.01em;
}

.trusted-partners__logo[data-logo-style="geometric-spaced"] {
  font-weight: 500;
  letter-spacing: 0.3em;
  font-size: 1.3rem;
}

.trusted-partners__logo[data-logo-style="light-lowercase"] {
  font-weight: 300;
  font-family: var(--font-body);
  font-size: 1.6rem;
  text-transform: lowercase;
  letter-spacing: -0.02em;
}

.trusted-partners__logo[data-logo-style="italic-caps"] {
  font-weight: 800;
  font-style: italic;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-size: 1.5rem;
}

.trusted-partners__logo[data-logo-style="serif-feel"] {
  /* No serif font loaded; simulate an elegant feel with light weight + tight letter spacing + italic */
  font-family: var(--font-body);
  font-weight: 400;
  font-style: italic;
  font-size: 1.5rem;
  letter-spacing: 0.01em;
}

.trusted-partners__logo[data-logo-style="rounded-bold"] {
  font-family: var(--font-body);
  font-weight: 800;
  font-size: 1.6rem;
  letter-spacing: 0.02em;
}

.trusted-partners__logo[data-logo-style="condensed-caps"] {
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 1.1rem;
  transform: scaleY(1.15);
}

.trusted-partners__logo[data-logo-style="muted-italic"] {
  font-family: var(--font-body);
  font-weight: 400;
  font-style: italic;
  font-size: 1rem;
  color: var(--color-secondary);
  opacity: 0.9;
  letter-spacing: 0.04em;
}

.trusted-partners__item:hover .trusted-partners__logo[data-logo-style="muted-italic"] {
  opacity: 1;
  color: var(--color-secondary);
}

/* ---------- Disclaimer below marquee (retained class in case it's
   reinstated later; currently unused on live pages) ---------- */

.trusted-partners__disclaimer {
  text-align: center;
  font-family: var(--font-body);
  font-size: 0.8rem;
  color: var(--color-text-muted);
  max-width: 640px;
  margin: 0 auto;
  line-height: 1.5;
  font-style: italic;
}

/* ---------- Logo-image mode (activates automatically when <span> is
   swapped for <img> inside .trusted-partners__item). Full-colour
   treatment. Partner brand colours render as-received. The marquee is
   the social-validation band - we want brand recognition, not a tonal
   wash. ---------- */

.trusted-partners__logo-img {
  height: 40px;
  width: auto;
  max-width: 140px;
  object-fit: contain;
  transition: filter 0.25s ease, opacity 0.25s ease;
}

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

@media (min-width: 768px) {
  .trusted-partners__header h2 {
    font-size: 2rem;
  }

  .trusted-partners__track {
    gap: var(--space-2xl);
  }

  .trusted-partners__logo {
    font-size: 1.6rem;
  }

  .trusted-partners__logo[data-logo-style="light-lowercase"],
  .trusted-partners__logo[data-logo-style="italic-caps"],
  .trusted-partners__logo[data-logo-style="serif-feel"],
  .trusted-partners__logo[data-logo-style="rounded-bold"] {
    font-size: 1.8rem;
  }

  .trusted-partners__logo[data-logo-style="condensed-caps"] {
    font-size: 1.25rem;
  }
}

@media (min-width: 1024px) {
  .trusted-partners {
    padding: 96px 0;
  }

  .trusted-partners__track {
    gap: calc(var(--space-2xl) * 1.5);
    animation-duration: 80s; /* Slower on wider screens so partner names stay readable as they pass */
  }

  .trusted-partners__logo {
    font-size: 1.8rem;
  }

  .trusted-partners__logo[data-logo-style="light-lowercase"],
  .trusted-partners__logo[data-logo-style="italic-caps"],
  .trusted-partners__logo[data-logo-style="serif-feel"],
  .trusted-partners__logo[data-logo-style="rounded-bold"] {
    font-size: 2rem;
  }

  .trusted-partners__logo[data-logo-style="condensed-caps"] {
    font-size: 1.4rem;
  }
}