/* ============================================================
   styles-v5.css — Welcome to Russia
   Clean rebuild with @layer cascade management
   Replaces: bundle.css, travel_tweaks.css, styles_regions_upgrade.css, form-polish.css
   Zero !important, zero [style*=] selectors
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=EB+Garamond:ital,wght@0,400;0,500;1,400;1,500&family=Cormorant+Garamond:wght@400;500;600;700&family=Inter:wght@300;400;500;600;700&display=swap');

@layer base, layout, components, pages, utilities;

/* ============================================================
   DESIGN TOKENS
   ============================================================ */
:root {
  /* Primary Colors */
  --color-charcoal: #0F1113;
  --color-slate-dark: #1A1D23;
  --color-slate: #2C3038;
  --color-off-white: #F5F3EF;

  /* Navy & Burgundy */
  --color-navy-deep: #0A1628;
  --color-burgundy-deep: #4A0E0E;
  --color-navy-accent: #1E3A5F;
  --color-burgundy-accent: #6B1515;

  /* Gold System — 2 canonical values */
  --color-gold: #9E7C1A;
  --color-gold-display: #C4A35A;
  --color-gold-bright: var(--color-gold-display);
  --color-gold-accessible: #7A6115;
  --color-gold-muted: var(--color-gold-accessible);  /* same as gold-accessible */
  --color-gold-glow: rgba(196, 163, 90, 0.2);
  --color-gold-border: rgba(196, 163, 90, 0.25);
  --color-gold-subtle: rgba(196, 163, 90, 0.08);
  --color-gold-rgb: 196, 163, 90;  /* corrected: matches #C4A35A */
  --color-bronze: #8B7355;

  /* Semantic Colors */
  --color-text-primary: var(--color-charcoal);
  --color-text-secondary: var(--color-slate);
  --color-text-meta: #595959;
  --color-text-light: var(--color-off-white);
  --color-bg-primary: var(--color-off-white);
  --color-bg-dark: var(--color-charcoal);
  --color-bg-navy: var(--color-navy-deep);
  --color-bg-card: var(--color-off-white);  /* light mode card bg; overridden in dark mode */
  --color-border: rgba(0, 0, 0, 0.1);
  --color-border-gold: rgba(193, 167, 107, 0.4);

  /* Typography */
  --font-body: 'EB Garamond', Georgia, serif;
  --font-heading: 'Cormorant Garamond', 'Playfair Display', Georgia, serif;
  --font-ui: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-serif: var(--font-heading);
  --font-sans: var(--font-ui);
  --font-body-editorial: var(--font-body);
  --font-display: var(--font-heading);

  /* Fluid Type Scale */
  --fs-hero: clamp(2.5rem, 6vw + 1rem, 5.5rem);
  --fs-h1: clamp(2rem, 4vw + 0.5rem, 3.75rem);
  --fs-h2: clamp(1.5rem, 3vw + 0.25rem, 2.5rem);
  --fs-h3: clamp(1.25rem, 2vw + 0.25rem, 1.875rem);
  --fs-h4: clamp(1.1rem, 1.5vw + 0.1rem, 1.375rem);
  --fs-body: clamp(1rem, 1vw + 0.75rem, 1.25rem);
  --fs-small: clamp(0.875rem, 0.75vw + 0.7rem, 1rem);
  --fs-caption: clamp(0.8rem, 0.5vw + 0.7rem, 0.9rem);

  /* Fixed sizes (legacy compat) */
  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.25rem;
  --text-2xl: 1.5rem;
  --text-3xl: 2rem;
  --text-4xl: 2.5rem;
  --text-5xl: 3rem;
  --text-6xl: clamp(2rem, 5vw, 4rem);

  /* Line Heights */
  --leading-tight: 1.1;
  --leading-snug: 1.3;
  --leading-normal: 1.5;
  --leading-relaxed: 1.6;
  --leading-loose: 1.7;
  --lh-display: 1.1;
  --lh-heading: 1.25;
  --lh-body: 1.65;
  --lh-caption: 1.5;

  /* Font Weights */
  --weight-light: 300;
  --weight-normal: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;

  /* Spacing */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-24: 6rem;
  --space-32: 8rem;
  --space-section: clamp(3rem, 8vw, 6rem);
  --space-card: clamp(1.25rem, 3vw, 2rem);

  /* Layout */
  --max-width-prose: 65ch;
  --max-width-content: 1440px;
  --max-width-wide: 1600px;

  /* Transitions */
  --transition-fast: 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-base: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow: 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-luxury: 0.4s cubic-bezier(0.16, 1, 0.3, 1);

  /* Shadows */
  --shadow-subtle: 0 2px 8px rgba(0, 0, 0, 0.04);
  --shadow-card: 0 4px 16px rgba(0, 0, 0, 0.08);
  --shadow-heavy: 0 8px 32px rgba(0, 0, 0, 0.16);
  --shadow-gold: 0 4px 20px rgba(212, 175, 55, 0.15);

  /* Z-Index */
  --z-base: 0;
  --z-dropdown: 1000;
  --z-sticky: 1020;
  --z-fixed: 1030;
  --z-overlay: 1040;
  --z-modal: 1050;

  /* UX Premium */
  --ux-tap: 44px;
  --ux-safe-bottom: env(safe-area-inset-bottom, 0px);
  --ux-safe-top: env(safe-area-inset-top, 0px);
  --ux-radius: 4px;
  --ux-shadow: 0 10px 30px rgba(0, 0, 0, 0.10);
  --ux-shadow-soft: 0 8px 20px rgba(0, 0, 0, 0.08);
}

/* ============================================================
   ANIMATIONS
   ============================================================ */
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(30px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes slideInRight {
  from { opacity: 0; transform: translateX(100%); }
  to { opacity: 1; transform: translateX(0); }
}

@keyframes editorialReveal {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.02); }
}

@keyframes shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

@keyframes goldGlow {
  0%, 100% { box-shadow: 0 0 5px var(--color-gold-glow); }
  50% { box-shadow: 0 0 20px var(--color-gold-glow), 0 0 30px var(--color-gold-glow); }
}

@keyframes shimmerLine {
  0% { left: -100%; }
  50% { left: 100%; }
  100% { left: 100%; }
}

@keyframes errorFadeIn {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes successFadeIn {
  from { opacity: 0; transform: scale(0.97); }
  to { opacity: 1; transform: scale(1); }
}

@keyframes ux-stagger {
  to { opacity: 1; transform: translateY(0); }
}

@keyframes carousel-progress {
  to { width: 64px; }
}


/* ============================================================
   @layer base — Reset, Typography, Links, Focus
   ============================================================ */
@layer base {

  *, *::before, *::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    -webkit-tap-highlight-color: transparent;
  }

  html {
    font-size: 16px;
    -webkit-font-smoothing: antialiased;
    scroll-behavior: smooth;
    touch-action: manipulation;
  }

  body {
    font-family: var(--font-ui);
    font-size: var(--fs-body);
    line-height: var(--lh-body);
    color: var(--color-text-primary);
    background-color: var(--color-bg-primary);
    overflow-x: clip;
    -webkit-text-size-adjust: 100%;
    text-rendering: optimizeLegibility;
    padding-bottom: var(--ux-safe-bottom);
  }

  /* Typography */
  h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-heading);
    font-weight: var(--weight-medium);
    line-height: var(--lh-heading);
    color: var(--color-text-primary);
    margin-bottom: var(--space-4);
  }

  h1 {
    font-size: var(--fs-h1);
    font-weight: 600;
    letter-spacing: -0.025em;
    line-height: var(--lh-display);
  }

  h2 {
    font-size: var(--fs-h2);
    font-weight: 600;
    letter-spacing: -0.02em;
    line-height: var(--lh-heading);
  }

  h3 {
    font-size: var(--fs-h3);
    font-weight: 500;
    letter-spacing: -0.01em;
  }

  h4 {
    font-size: var(--fs-h4);
    font-family: var(--font-ui);
    font-weight: var(--weight-semibold);
    line-height: var(--lh-body);
  }

  p {
    margin-bottom: var(--space-6);
    max-width: var(--max-width-prose);
    font-family: var(--font-body);
    font-size: 1.1rem;
    line-height: 1.8;
  }

  em {
    font-family: var(--font-heading);
    font-style: italic;
    color: var(--color-gold-accessible);
  }

  strong {
    font-weight: var(--weight-semibold);
  }

  a {
    color: inherit;
    text-decoration: none;
    transition: all var(--transition-fast);
  }

  a, button, .btn, [role="button"], input, textarea, select {
    -webkit-tap-highlight-color: transparent;
    min-height: var(--ux-tap);
    touch-action: manipulation;
  }

  input, textarea, select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
  }

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

  blockquote {
    font-family: var(--font-heading);
    font-style: italic;
    font-size: var(--text-xl);
    color: var(--color-slate);
    border-left: 3px solid var(--color-gold);
    padding-left: var(--space-6);
    margin: var(--space-8) 0;
    max-width: var(--max-width-prose);
  }

  blockquote cite {
    display: block;
    margin-top: var(--space-4);
    font-size: var(--text-sm);
    font-style: normal;
    color: var(--color-gold-muted);
  }

  /* Focus Styles */
  *:focus { outline: none; }

  *:focus-visible {
    outline: 2px solid var(--color-gold, #C4A35A);
    outline-offset: 3px;
    border-radius: 2px;
  }

  button:focus-visible,
  .btn:focus-visible,
  [role="button"]:focus-visible {
    outline: 2px solid var(--color-gold);
    outline-offset: 4px;
  }

  input:focus-visible,
  select:focus-visible,
  textarea:focus-visible {
    outline: 2px solid var(--color-gold);
    outline-offset: 0;
    box-shadow: 0 0 0 4px rgba(196, 163, 90, 0.15);
  }

  nav a:focus-visible,
  .nav-links a:focus-visible {
    outline: 2px solid var(--color-gold);
    outline-offset: 4px;
    border-radius: 3px;
  }

  /* Skip Link */
  .skip-link {
    position: absolute;
    left: -9999px;
    top: auto;
    width: 1px;
    height: 1px;
    overflow: hidden;
    z-index: 10000;
  }

  .skip-link:focus {
    position: fixed;
    left: 50%;
    top: 1rem;
    transform: translateX(-50%);
    width: auto;
    height: auto;
    padding: 0.75rem 2rem;
    background: var(--color-gold);
    color: #000;
    font-weight: 700;
    border-radius: 4px;
    text-decoration: none;
    outline: 3px solid #000;
  }

  /* Section text patterns */
  .section-title {
    font-family: var(--font-heading);
    font-size: var(--fs-h2);
    color: var(--color-text-primary);
    margin-bottom: var(--space-4);
    letter-spacing: -0.01em;
  }

  .section-subtitle {
    font-family: var(--font-ui);
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.3em;
    font-weight: 600;
    color: var(--color-gold-accessible);
    margin-bottom: var(--space-2);
    display: block;
  }

  .text-lead {
    font-size: var(--text-lg);
    line-height: var(--leading-relaxed);
    color: var(--color-gold-muted);
    font-weight: var(--weight-normal);
  }

  .text-meta {
    font-size: var(--fs-caption);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-weight: var(--weight-semibold);
    color: var(--color-text-meta);
    line-height: var(--lh-caption);
  }

  .text-accent {
    color: var(--color-gold-accessible);
    font-weight: var(--weight-medium);
  }

  .text-caption,
  small,
  figcaption {
    font-size: var(--fs-caption);
    line-height: var(--lh-caption);
  }

  /* Reduced motion */
  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
      animation-duration: 0.01ms;
      animation-iteration-count: 1;
      transition-duration: 0.01ms;
      scroll-behavior: auto;
    }
  }

  /* Dark mode */
  @media (prefers-color-scheme: dark) {
    :root {
      --color-bg: var(--color-charcoal);          /* #0F1113 */
      --color-bg-subtle: #1A1D20;
      --color-bg-card: #1A1D20;                   /* dark card bg */
      --color-surface: #232629;
      --color-text: var(--color-off-white);        /* #F5F3EF */
      --color-text-muted: #A8A39A;
      --color-border: rgba(255,255,255,0.08);
    }

    body {
      background-color: var(--color-charcoal);
      color: var(--color-off-white);
    }

    .section-off-white, .section-light, .bg-light, .bg-off-white {
      background-color: var(--color-bg-card);
      color: var(--color-off-white);
    }
  .bg-off-white { background: var(--color-slate-dark); } /* Phase 3: BUG-001 dark mode bg fix — #E8E4DE on #1A1D23 = 13.33:1 PASS */

    .card, .blog-card, .region-card, .city-card, .info-box {
      background-color: var(--color-bg-card);
      border-color: rgba(255,255,255,0.08);
      color: var(--color-off-white);
    }

    .card:hover, .blog-card:hover {
      background-color: var(--color-surface);
      border-color: rgba(196,163,90,0.3);
    }

    p, li, td, th { color: #D8D4CE; }
    .text-meta, .text-caption, figcaption, small { color: #A8A39A; }

    .navbar, .nav { background-color: rgba(15, 17, 19, 0.95); border-bottom-color: rgba(255,255,255,0.06); }
    .nav-links a { color: #D8D4CE; }
    .nav-links a:hover { color: var(--color-gold-display); }

    input, select, textarea {
      background-color: var(--color-bg-card);
      border-color: rgba(255,255,255,0.12);
      color: var(--color-off-white);
    }

    input::placeholder, textarea::placeholder { color: #8A847E; }

    .footer { background-color: #090B0D; border-top-color: rgba(255,255,255,0.06); }
    thead { background-color: var(--color-bg-card); }
    tbody tr:nth-child(even) { background-color: rgba(255,255,255,0.02); }

    ::-webkit-scrollbar { width: 8px; }
    ::-webkit-scrollbar-track { background: #0F1113; }
    ::-webkit-scrollbar-thumb { background: #3A3530; border-radius: 4px; }
    ::-webkit-scrollbar-thumb:hover { background: #C4A35A; }

    .bg-off-white h1, .bg-off-white h2, .bg-off-white h3,
    .bg-off-white h4, .bg-off-white h5, .bg-off-white h6,
    .bg-off-white .section-title,
    .bg-off-white p, .bg-off-white li,
    .bg-off-white label, .bg-off-white span,
    .bg-off-white .text-charcoal, .bg-off-white .text-dark,
    .bg-off-white .text-description { color: #E8E4DE; }

    .bg-off-white .section-subtitle, .bg-off-white .text-gold,
    .bg-off-white .text-accent { color: #C4A35A; }

    .bg-off-white .text-muted, .bg-off-white .text-bbb,
    .bg-off-white .text-meta { color: #A8A39A; }

    .bg-off-white .btn-primary { background: #9E7C1A; color: #fff; }
  }
}


/* ============================================================
   @layer layout — Container, Grid, Section, Header/Footer
   ============================================================ */
@layer layout {

  .container {
    max-width: var(--max-width-content);
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--space-16);
    padding-right: var(--space-16);
  }

  @media (min-width: 1441px) {
    .container { padding-left: 2rem; padding-right: 2rem; }
  }

  @media (max-width: 768px) {
    .container { padding-left: var(--space-6); padding-right: var(--space-6); }
  }

  @media (max-width: 480px) {
    .container { padding-left: 1rem; padding-right: 1rem; }
  }

  /* Section */
  .section {
    padding: var(--space-section);
    padding-left: 0;
    padding-right: 0;
  }

  /* Section Dividers */
  .section + .section { position: relative; border-top: 1px solid rgba(158, 124, 26, 0.1); }

  .section + .section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: min(120px, 30%);
    height: 1px;
    background: linear-gradient(90deg, transparent 0%, var(--color-gold) 30%, var(--color-gold) 70%, transparent 100%);
    opacity: 0.4;
  }

  .section-dark + .section-off-white::before,
  .section-dark + .section-light::before {
    opacity: 0.6;
    width: min(200px, 40%);
  }

  /* Section Dark + bg-charcoal — gemeinsame dunkle Basis */
  .section-dark,
  .bg-charcoal {
    background: var(--color-charcoal);
    color: var(--color-text-light);
  }

  /* section-dark: exklusive Layout-Eigenschaften (Film-Grain via ::after) */
  .section-dark {
    position: relative;
    isolation: isolate;
  }

  /* Headings — beide dark-Klassen */
  .section-dark h1, .section-dark h2, .section-dark h3,
  .section-dark h4, .section-dark h5, .section-dark h6,
  .section-dark .section-title,
  .bg-charcoal h1, .bg-charcoal h2, .bg-charcoal h3,
  .bg-charcoal h4, .bg-charcoal h5, .bg-charcoal h6,
  .bg-charcoal .section-title { color: #ffffff; }

  /* Body Text — beide dark-Klassen */
  .section-dark p, .section-dark li, .section-dark label,
  .section-dark .text-lead,
  .bg-charcoal p, .bg-charcoal li, .bg-charcoal label { color: rgba(255, 255, 255, 0.82); }

  /* Meta Text — beide dark-Klassen */
  .section-dark .text-meta,
  .bg-charcoal .text-meta { color: rgba(255, 255, 255, 0.75); }

  /* Gold/Akzent — beide dark-Klassen */
  .section-dark .section-subtitle,
  .section-dark .text-accent,
  .section-dark .text-gold,
  .section-dark em,
  .bg-charcoal .section-subtitle,
  .bg-charcoal .text-accent,
  .bg-charcoal .text-gold,
  .bg-charcoal em { color: var(--color-gold-display); }

  /* Section Light (off-white backgrounds) */
  .section-off-white {
    background: var(--color-off-white);
    color: var(--color-text-primary);
  }

  .section-off-white h2, .section-off-white h3, .section-off-white h4 { color: #0F1113; }
  .section-off-white p { color: #3D3F44; }
  .section-off-white .text-meta { color: #5A5854; }

  .section-off-white .section-subtitle,
  .section-off-white .text-accent,
  .section-off-white .text-gold,
  .section-off-white em { color: var(--color-gold-accessible); }

  /* bg- classes for section backgrounds */

  .bg-off-white { background: var(--color-off-white); color: var(--color-text-primary); }
  .bg-off-white h1, .bg-off-white h2, .bg-off-white h3,
  .bg-off-white h4, .bg-off-white p { color: var(--color-charcoal); }
  .bg-off-white .section-subtitle, .bg-off-white .text-accent,
  .bg-off-white .text-gold, .bg-off-white em { color: var(--color-gold-accessible); }
  .bg-off-white .text-muted { color: #666666; }
  .bg-off-white .btn-secondary {
    border-color: var(--color-charcoal);
    color: var(--color-charcoal);
  }

  .bg-white { background: white; }
  .bg-slate-dark { background: var(--color-slate-dark); }
  .bg-navy { background: var(--color-navy-deep); }
  .bg-burgundy { background: var(--color-burgundy-deep); }

  .section-charcoal-divider {
    background: var(--color-charcoal);
    padding: 2rem 0;
    border-top: 1px solid rgba(255,255,255,0.1);
    border-bottom: 1px solid rgba(255,255,255,0.1);
  }

  .section-gradient-light {
    background: linear-gradient(180deg, #f5f0e8 0%, #e8e0d0 100%);
  }
  .section-gradient-light p, .section-gradient-light h3 { color: #0F1113; }
  .section-gradient-light blockquote { color: #2C3038; }

  /* Grid */
  .grid { display: grid; gap: var(--space-8); container-type: inline-size; container-name: card-grid; }
  .grid-2 { grid-template-columns: repeat(auto-fit, minmax(400px, 1fr)); container-type: inline-size; container-name: card-grid; }
  .grid-3 { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); container-type: inline-size; container-name: card-grid; }
  .grid-4 { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); container-type: inline-size; container-name: card-grid; }

  .grid-sidebar {
    display: grid;
    grid-template-columns: 280px 1fr;
    gap: var(--space-12);
  }

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

  /* Tablet: 3col → 2col */
  @media (min-width: 769px) and (max-width: 1024px) {
    .grid-2 { grid-template-columns: repeat(2, 1fr); }
    .grid-3 { grid-template-columns: repeat(2, 1fr); }
    .grid-4 { grid-template-columns: repeat(2, 1fr); }
    .grid-sidebar { grid-template-columns: 1fr; }
    .container { padding: 0 24px; }
    .section { padding: 60px 0; }

    .grid-3 > *:last-child:nth-child(odd) {
      grid-column: 1 / -1;
      max-width: 50%;
      margin: 0 auto;
    }
  }

  @media (max-width: 768px) {
    .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
  }

  @media (max-width: 480px) {
    .grid-4 { grid-template-columns: 1fr; }
    .stats-grid { grid-template-columns: repeat(2, 1fr); gap: 1.5rem; }
  }

  /* Container Queries */
  @container card-grid (max-width: 380px) {
    .card, .blog-card, .region-card, .city-card {
      flex-direction: column;
    }
    .card-image, .blog-card img { width: 100%; height: 160px; object-fit: cover; }
    .card-title { font-size: 1.1rem; }
  }

  @container card-grid (min-width: 581px) {
    .card-title { font-size: var(--fs-h3); }
  }

  /* ── Navigation ── */
  .navbar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    background: rgba(15, 17, 19, 0.85);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 2px solid var(--color-border-gold);
    z-index: var(--z-fixed);
    transition: all var(--transition-base);
  }

  .navbar.scrolled {
    background: rgba(15, 17, 19, 0.97);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
    border-bottom: 1px solid rgba(158, 124, 26, 0.18);
  }

  .navbar.ux-hide { transform: translateY(-110%); transition: transform 0.25s ease; }
  .navbar.ux-show { transform: translateY(0); transition: transform 0.25s ease; }

  .nav-inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 80px;
  }

  .nav-logo {
    font-family: var(--font-heading);
    font-size: 1.45rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    line-height: 1.1;
    color: var(--color-off-white);
  }

  .nav-logo span {
    font-family: var(--font-ui);
    font-size: 0.75rem;
    letter-spacing: 0.35em;
    font-weight: 400;
    text-transform: uppercase;
    color: #8B7B4A;
    display: block;
    margin-top: var(--space-1);
  }

  .nav-links {
    display: flex;
    gap: var(--space-12);
    list-style: none;
  }

  .nav-link {
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
    color: var(--color-off-white);
    padding-bottom: var(--space-1);
    border-bottom: 2px solid transparent;
    transition: all var(--transition-fast);
    letter-spacing: 0.02em;
    position: relative;
  }

  .nav-link::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 0;
    height: 1px;
    background: var(--color-gold);
    transition: width 0.35s cubic-bezier(0.4, 0, 0.2, 1);
  }

  .nav-link:hover, .nav-link.active, .nav-link.is-active {
    color: var(--color-gold);
  }

  .nav-link:hover::after, .nav-link.active::after, .nav-link.is-active::after {
    width: 100%;
  }

  .nav-active {
    color: var(--color-gold-display);
    position: relative;
  }
  .nav-active::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    right: 0;
    height: 2px;
    background: var(--color-gold-display);
    border-radius: 1px;
  }

  .nav-lang {
    display: flex;
    gap: 0.5rem;
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    color: var(--color-off-white);
  }

  .nav-lang a {
    padding: var(--space-1) var(--space-2);
    color: rgba(245, 243, 239, 0.7);
    border-radius: 2px;
    transition: all var(--transition-fast);
  }

  .nav-lang a:hover { background: rgba(255, 255, 255, 0.1); color: var(--color-off-white); }
  .nav-lang a.active { color: var(--color-gold); }
  .nav-lang img { height: auto; vertical-align: middle; }

  /* Hamburger Menu */
  .nav-toggle {
    display: none;
    flex-direction: column;
    justify-content: space-between;
    width: 28px;
    height: 20px;
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 0;
    z-index: var(--z-modal);
  }

  .nav-toggle span {
    display: block;
    width: 100%;
    height: 2px;
    background: var(--color-off-white);
    transition: all var(--transition-fast);
    transform-origin: center;
  }

  .nav-toggle.active span:nth-child(1) { transform: rotate(45deg) translate(6px, 6px); }
  .nav-toggle.active span:nth-child(2) { opacity: 0; }
  .nav-toggle.active span:nth-child(3) { transform: rotate(-45deg) translate(6px, -6px); }

  /* Mobile Overlay */
  .nav-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    z-index: var(--z-overlay);
    opacity: 0;
    transition: opacity var(--transition-base);
  }

  .nav-overlay.active { display: block; opacity: 1; }

  /* Mobile Menu Panel */
  .nav-mobile {
    display: none;
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: 300px;
    max-width: 85vw;
    background: rgba(15, 17, 19, 0.95);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-left: 2px solid var(--color-gold);
    z-index: var(--z-modal);
    transform: translateX(100%);
    transition: transform var(--transition-base);
    padding: var(--space-24) var(--space-8);
  }

  .nav-mobile.active { transform: translateX(0); }

  .nav-mobile .nav-links { flex-direction: column; gap: var(--space-6); }
  .nav-mobile .nav-link {
    font-size: var(--text-lg);
    padding: var(--space-3) 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  }
  .nav-mobile .nav-lang {
    margin-top: var(--space-8);
    padding-top: var(--space-8);
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    justify-content: flex-start;
    gap: var(--space-4);
  }

  .nav-mobile-close {
    display: none;
    position: absolute;
    top: 24px;
    right: 24px;
    background: transparent;
    border: none;
    color: var(--color-off-white);
    font-size: 2rem;
    cursor: pointer;
    line-height: 1;
    z-index: 1000;
  }

  @media (max-width: 1024px) {
    .nav-links { gap: var(--space-6); }
  }

  @media (max-width: 768px) {
    .nav-toggle { display: flex; }
    .navbar .nav-links, .navbar .nav-lang { display: none; }
    .nav-mobile { display: block; }
    .nav-mobile-close { display: block; }
    .nav-inner { height: 60px; }
    .nav-logo { font-size: 1.15rem; }
    .nav-logo span { font-size: 0.75rem; letter-spacing: 0.1em; }
    .nav-mobile { padding-top: 5rem; }

    .nav-link, .footer a { min-height: 44px; display: inline-flex; align-items: center; }
    .nav-lang a, .nav-mobile .nav-lang a {
      min-width: 44px; min-height: 44px;
      padding: 0.75rem;
      display: inline-flex; align-items: center; justify-content: center;
    }
    .nav-lang img { width: 24px; height: auto; }
  }

  /* Menu stagger animation */
  .nav-open .nav-links a {
    opacity: 0; transform: translateY(6px);
    animation: ux-stagger 0.35s ease forwards;
  }
  .nav-open .nav-links a:nth-child(1) { animation-delay: .02s; }
  .nav-open .nav-links a:nth-child(2) { animation-delay: .05s; }
  .nav-open .nav-links a:nth-child(3) { animation-delay: .08s; }
  .nav-open .nav-links a:nth-child(4) { animation-delay: .11s; }
  .nav-open .nav-links a:nth-child(5) { animation-delay: .14s; }
  .nav-open .nav-links a:nth-child(6) { animation-delay: .17s; }
  .nav-open .nav-links a:nth-child(7) { animation-delay: .20s; }
  .nav-open .nav-links a:nth-child(8) { animation-delay: .23s; }
  .nav-open .nav-links a:nth-child(9) { animation-delay: .26s; }
  .nav-open .nav-links a:nth-child(10) { animation-delay: .29s; }

  /* Breadcrumb */
  .breadcrumb {
    margin-top: 80px; /* offset below fixed navbar (desktop height) */
    padding: 0.75rem 0;
    font-size: 0.875rem;
    background: rgba(15,17,19,0.85);
    color: #999999;  /* current page = dimmed; links below stay #ffffff */
  }
  .breadcrumb a { color: #ffffff; text-decoration: none; font-weight: 500; transition: color 0.2s; }
  .breadcrumb a:hover { color: var(--color-gold); text-decoration: underline; }
  .breadcrumb-sep { margin: 0 0.5rem; color: var(--color-gold); }
  @media (max-width: 768px) {
    .breadcrumb { margin-top: 60px; } /* offset below fixed navbar (mobile height) */
  }
  /* On pages with breadcrumb, hero follows breadcrumb and needs no extra margin-top */
  .breadcrumb ~ .hero { margin-top: 0; }

  /* ── Hero ── */
  .hero {
    background: linear-gradient(135deg, var(--color-navy-deep) 0%, #0D1F35 100%);
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    text-align: center;
    padding: var(--space-32) 0 var(--space-24);
    margin-top: 80px;
    color: var(--color-off-white);
    overflow: hidden;
  }

  .hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: url('/img/hero-main.webp');
    background-size: cover;
    background-position: center;
    opacity: 0.12;
    z-index: 0;
  }

  .hero::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, transparent, var(--color-gold), transparent);
  }

  .hero-content {
    position: relative;
    z-index: 2;
    max-width: 900px;
    padding: 0 var(--space-6);
    background: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border: none;
    border-radius: 0;
    box-shadow: none;
    text-align: left;
    padding-left: 2.5rem;
  }

  .hero-content::before {
    content: '';
    position: absolute;
    left: 0;
    top: 8%;
    bottom: 8%;
    width: 3px;
    background: linear-gradient(to bottom, transparent, var(--color-gold) 15%, var(--color-gold) 85%, transparent);
  }

  .hero h1 {
    color: var(--color-off-white);
    margin-bottom: var(--space-8);
    font-size: var(--fs-hero);
    letter-spacing: -0.025em;
    line-height: var(--lh-display);
    text-shadow: 0 2px 20px rgba(0, 0, 0, 0.5);
    animation: editorialReveal 1.1s cubic-bezier(0.16, 1, 0.3, 1) forwards;
    will-change: transform, opacity;
  }

  .hero .text-lead {
    color: var(--color-gold-accessible);
    margin-bottom: var(--space-12);
    font-size: var(--text-xl);
    max-width: 600px;
    animation: editorialReveal 1.1s cubic-bezier(0.16, 1, 0.3, 1) 0.2s forwards;
    will-change: transform, opacity;
    opacity: 0;
  }

  .hero-ctas {
    display: flex;
    gap: var(--space-6);
    justify-content: flex-start;
    flex-wrap: wrap;
    animation: editorialReveal 1.1s cubic-bezier(0.16, 1, 0.3, 1) 0.4s forwards;
    will-change: transform, opacity;
    opacity: 0;
  }

  .hero-parallax {
    height: 100vh;
    height: 100dvh; /* modern: accounts for mobile browser chrome */
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    isolation: isolate;
    background-image: linear-gradient(165deg, rgba(10,12,18,0.85) 0%, rgba(10,12,18,0.6) 50%, rgba(10,12,18,0.85) 100%), var(--hero-image, none);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
  }

  /* Hero overlay layers (replaces inline-style divs) */
  .hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(15,17,19,0.7) 0%, rgba(15,17,19,0.4) 50%, rgba(15,17,19,0.7) 100%);
    z-index: 1;
    pointer-events: none;
  }

  .hero-overlay-radial {
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at center, rgba(15,17,19,0.4) 0%, transparent 70%);
    z-index: 1;
    pointer-events: none;
  }

  /* Hero animation entry classes (staggered fadeInUp) */
  .anim-fade-up-1 { opacity: 0; animation: fadeInUp 0.8s ease forwards; }
  .anim-fade-up-2 { opacity: 0; animation: fadeInUp 0.8s ease 0.2s forwards; }
  .anim-fade-up-3 { opacity: 0; animation: fadeInUp 0.8s ease 0.4s forwards; }
  .anim-fade-up-4 { opacity: 0; animation: fadeInUp 0.8s ease 0.6s forwards; }

  @media (prefers-reduced-motion: reduce) {
    .anim-fade-up-1, .anim-fade-up-2, .anim-fade-up-3, .anim-fade-up-4 {
      opacity: 1;
      animation: none;
    }
    .hero .text-lead, .hero-ctas {
      opacity: 1;
      animation: none;
    }
  }

  /* Hero tagline typography */
  .hero-tagline {
    display: block;
    letter-spacing: 0.2em;
    font-weight: 600;
  }

  /* Hero title on parallax (larger than default h1) */
  .hero-title-parallax {
    font-size: clamp(2.5rem, 6vw, 4.5rem);
    line-height: 1.1;
  }

  /* Hero lead paragraph centered */
  .hero-lead-centered {
    font-size: clamp(1rem, 2vw, 1.25rem);
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
    line-height: 1.7;
  }

  /* Hero CTA row */
  .hero-cta-row {
    display: flex;
    gap: 1rem;
    justify-content: center;
    flex-wrap: wrap;
  }

  .hero-parallax p, .hero-parallax .text-lead, .hero-parallax li {
    color: rgba(255, 255, 255, 0.88);
    text-shadow: 0 1px 8px rgba(0, 0, 0, 0.65);
  }

  .hero-parallax h1, .hero-parallax h2, .hero-parallax h3,
  .hero-parallax .section-title { color: #ffffff; text-shadow: 0 2px 12px rgba(0, 0, 0, 0.7); }

  .hero-parallax .section-subtitle { color: var(--color-gold-display); }

  .hero-parallax .text-gold { color: var(--color-gold-display); text-shadow: 0 1px 6px rgba(0, 0, 0, 0.5); }

  .hero video, .hero iframe {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    object-fit: cover;
  }

  /* ── Footer ── */
  .footer {
    background: var(--color-bg-dark);
    color: var(--color-off-white);
    border-top: 1px solid rgba(196, 163, 90, 0.2);
    padding: var(--space-24) 0 var(--space-8);
    position: relative;
    isolation: isolate;
  }

  .footer-grid {
    display: grid;
    grid-template-columns: 1.5fr repeat(4, 1fr);
    gap: var(--space-16);
    margin-bottom: var(--space-16);
  }

  .footer-logo {
    font-family: var(--font-heading);
    font-size: var(--text-3xl);
    color: var(--color-off-white);
    margin-bottom: var(--space-4);
  }

  .footer-logo span { color: var(--color-gold); }

  .footer h4 {
    font-family: var(--font-ui);
    font-size: var(--text-sm);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--color-gold);
    margin-bottom: var(--space-6);
  }

  .footer ul { list-style: none; line-height: 2; }

  .footer a {
    color: rgba(255, 255, 255, 0.8);
    position: relative;
    display: inline-block;
  }

  .footer a::after {
    content: '';
    position: absolute;
    bottom: 0; left: 0;
    width: 0; height: 1px;
    background: var(--color-gold);
    transition: width var(--transition-fast);
  }

  .footer a:hover { color: var(--color-gold); opacity: 1; }
  .footer a:hover::after { width: 100%; }

  .footer-bottom {
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    padding-top: var(--space-8);
    display: flex;
    justify-content: space-between;
    font-size: var(--text-xs);
    color: rgba(255, 255, 255, 0.65);
  }

  .section-divider {
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    margin-top: var(--space-8);
    padding-top: var(--space-6);
  }

  @media (max-width: 768px) {
    .footer-grid { grid-template-columns: 1fr; gap: 2rem; text-align: center; }
    .footer { padding: 3rem 0 2rem; }
    .footer-bottom { flex-direction: column; gap: 1rem; text-align: center; }
    .footer-logo { font-size: 1.75rem; }
    .footer h4 { margin-bottom: 0.75rem; }
    .footer ul { line-height: 2.2; }
    .footer-links { columns: 2; column-gap: 1rem; }
    .footer-links a { display: block; break-inside: avoid; margin-bottom: 0.5rem; }
  }

  @media (min-width: 481px) and (max-width: 768px) {
    .footer-grid { grid-template-columns: 1fr 1fr; text-align: left; }
    .footer-grid > *:first-child { grid-column: 1 / -1; text-align: center; }
  }

  /* Film Grain on dark sections */
  .section-dark::after, .stats-bar::after, .footer::after {
    content: '';
    position: absolute;
    inset: 0;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23g)' opacity='1'/%3E%3C/svg%3E");
    background-repeat: repeat;
    background-size: 300px 300px;
    opacity: 0.03;
    pointer-events: none;
    z-index: -1;
    mix-blend-mode: overlay;
  }

  .hero-parallax::after {
    content: '';
    position: absolute;
    inset: 0;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23g)' opacity='1'/%3E%3C/svg%3E");
    background-repeat: repeat;
    background-size: 300px 300px;
    opacity: 0.035;
    pointer-events: none;
    z-index: -1;
    mix-blend-mode: overlay;
  }

  @media (prefers-reduced-motion: reduce) {
    .section-dark::after, .stats-bar::after, .footer::after, .hero-parallax::after { display: none; }
  }

  /* Mobile hero */
  @media (max-width: 768px) {
    .hero {
      min-height: calc(100svh - 60px);
      padding: 5rem 1.25rem 3rem;
      margin-top: 60px;
    }
    .hero h1 { font-size: clamp(2.2rem, 8vw, 3.5rem); line-height: 1.15; margin-bottom: 1.25rem; }
    .hero .text-lead { font-size: 1rem; margin-bottom: 2rem; }
    .hero-content {
      padding: 0 1.5rem;
      text-align: center;
    }
    .hero-content::before { display: none; }
    .hero-ctas { flex-direction: column; align-items: center; gap: 0.75rem; width: 100%; justify-content: center; }
    .hero-ctas .btn { width: 100%; max-width: 320px; text-align: center; }
  }

  @media (max-width: 380px) {
    .hero h1 { font-size: 1.75rem; }
  }

  @supports (-webkit-touch-callout: none) {
    .hero { min-height: -webkit-fill-available; }
  }

  /* ── 1280px — Laptop intermediate (1025–1280px) ── */
  @media (min-width: 1025px) and (max-width: 1280px) {
    .container { padding-left: 2rem; padding-right: 2rem; }
    .footer-grid { grid-template-columns: repeat(2, 1fr); }
    .grid-3 { grid-template-columns: repeat(2, 1fr); }
    .grid-4 { grid-template-columns: repeat(3, 1fr); }
  }

  /* ── 375px — Smallest phones (iPhone SE) ── */
  @media (max-width: 375px) {
    .container { padding-left: 0.75rem; padding-right: 0.75rem; }
    .hero { padding-left: 0.75rem; padding-right: 0.75rem; }
    .section { padding-left: 0; padding-right: 0; }
  }

  /* ── 1920px — Full HD (already handled by 1441px+, explicit override) ── */
  @media (min-width: 1920px) {
    .container { max-width: 1440px; padding-left: 0; padding-right: 0; }
  }

  /* Overflow protection */
  html, body { overflow-x: clip; }
  .hero, .section, .footer { overflow-x: hidden; }
}


/* ============================================================
   @layer components — Cards, Buttons, FAQ, Stats, Slider, Forms
   ============================================================ */
@layer components {

  /* ── Buttons ── */
  .btn {
    display: inline-block;
    padding: var(--space-4) var(--space-12);
    font-family: var(--font-ui);
    font-size: var(--text-base);
    font-weight: var(--weight-semibold);
    letter-spacing: 0.02em;
    text-align: center;
    border: none;
    cursor: pointer;
    transition: all var(--transition-base);
    position: relative;
    overflow: hidden;
    border-radius: 2px;
  }

  .btn img { height: 14px; vertical-align: middle; margin-right: 8px; }

  .btn-primary {
    background: var(--color-burgundy-deep);
    color: var(--color-off-white);
    border: 2px solid var(--color-gold);
  }

  .btn-primary::after {
    content: '';
    position: absolute;
    top: 0; left: -100%; width: 60%; height: 100%;
    background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.18) 50%, transparent 100%);
    transition: left 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    pointer-events: none;
  }

  .btn-primary:hover {
    background: var(--color-burgundy-accent);
    transform: translateY(-2px);
    box-shadow: var(--shadow-heavy), var(--shadow-gold);
  }

  .btn-primary:hover::after { left: 150%; }

  .btn-secondary {
    background: transparent;
    color: var(--color-off-white);
    border: 1px solid var(--color-gold);
    letter-spacing: 0.08em;
  }

  .btn-secondary:hover {
    background: var(--color-gold);
    color: var(--color-charcoal);
    transform: translateY(-2px);
    box-shadow: var(--shadow-heavy), var(--shadow-gold);
  }

  .btn-text {
    color: var(--color-gold);
    font-weight: var(--weight-medium);
    transition: opacity var(--transition-fast);
    padding: 0;
  }
  .btn-text:hover { opacity: 0.7; }

  .btn-sm { padding: var(--space-2) var(--space-6); font-size: var(--text-sm); }
  .btn-lg { padding: var(--space-6) var(--space-16); font-size: var(--text-lg); }

  .btn-group-center {
    display: flex;
    gap: 1rem;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
  }

  @media (max-width: 768px) {
    .btn { padding: 0.85rem 1.75rem; font-size: 0.9rem; }
    .btn-lg { padding: 1rem 2rem; font-size: 1rem; }
    .btn-sm { padding: 0.5rem 1.25rem; font-size: 0.8rem; }
    .btn-group, .btn-group-center { flex-direction: column; align-items: stretch; }
    .btn-group .btn, .btn-group-center .btn { width: 100%; max-width: 300px; text-align: center; }
  }

  @supports (-webkit-touch-callout: none) {
    .btn-secondary {
      color: var(--color-gold);
      -webkit-text-fill-color: var(--color-gold);
      opacity: 1;
      background-color: transparent;
      border: 2px solid var(--color-gold);
    }
  }

  /* ── Cards ── */
  .card {
    display: block;
    background: rgba(255,255,255,0.92);
    border-left: 3px solid var(--color-gold);
    padding: var(--space-card);
    transition: all var(--transition-luxury);
    box-shadow: 0 1px 3px rgba(0,0,0,0.04), 0 4px 16px rgba(0,0,0,0.03);
    border-radius: 4px;
    position: relative;
    border: 1px solid rgba(0,0,0,0.08);
    transform: translateZ(0);
  }

  .card:hover {
    border-color: rgba(158, 124, 26, 0.6);
    box-shadow: 0 0 0 1px rgba(158,124,26,0.25), 0 8px 32px rgba(158,124,26,0.12), 0 2px 8px rgba(0,0,0,0.08);
    transform: translateY(-4px);
  }

  .card h3 { color: #1A1C1F; font-weight: 600; margin-bottom: var(--space-4); font-size: var(--text-2xl); }
  .card p { color: #3D3F44; line-height: var(--leading-relaxed); margin-bottom: var(--space-6); }

  a.card { text-decoration: none; }

  .card-media {
    margin: calc(var(--space-card) * -1) calc(var(--space-card) * -1) var(--space-6) calc(var(--space-card) * -1);
    position: relative;
    height: 240px;
    overflow: hidden;
  }

  .card-media img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--transition-slow); }
  .card:hover .card-media img { transform: scale(1.05); }

  .card-featured {
    background: white;
    border: 2px solid var(--color-gold);
    padding: var(--space-card);
    box-shadow: var(--shadow-card);
    transition: all var(--transition-luxury);
    position: relative;
    border-radius: 4px;
  }

  .card-featured::before {
    content: '';
    position: absolute;
    top: -1px; left: -1px; right: -1px;
    height: 4px;
    background: linear-gradient(90deg, var(--color-gold), var(--color-bronze), var(--color-gold));
  }

  .card-featured:hover { box-shadow: var(--shadow-heavy), var(--shadow-gold); transform: translateY(-4px); }

  .card-dark {
    background: var(--color-slate-dark);
    color: var(--color-off-white);
    border-left: 3px solid var(--color-gold);
    border-top: 2px solid rgba(196, 163, 90, 0.35);
    padding: var(--space-card);
    transition: all var(--transition-luxury);
    border-radius: 4px;
    border: 1px solid rgba(255,255,255,0.08);
  }

  .card-dark h3 { color: var(--color-off-white); }
  .card-dark p { color: rgba(255, 255, 255, 0.7); }
  .card-dark:hover { background: var(--color-slate); transform: translateY(-4px); }

  .card-icon { font-size: 2rem; color: var(--color-gold); margin-bottom: var(--space-6); }

  .card-magazine {
    background: white;
    overflow: hidden;
    box-shadow: var(--shadow-card);
    transition: all var(--transition-luxury);
    border-top: 3px solid var(--color-gold);
    border-radius: 4px;
  }

  .card-magazine:hover { transform: translateY(-4px); box-shadow: var(--shadow-heavy); }

  .card-magazine-image { width: 100%; aspect-ratio: 16/9; object-fit: cover; transition: transform var(--transition-slow); }
  .card-magazine:hover .card-magazine-image { transform: scale(1.05); }
  .card-magazine-content { padding: var(--space-8); }

  .card-lg { padding: var(--space-16); }
  .card-sm { padding: var(--space-6); }
  .card-lg h3 { font-size: var(--text-3xl); margin-bottom: var(--space-6); }
  .card-sm h3 { font-size: var(--text-lg); margin-bottom: var(--space-2); }
  .card-sm p { font-size: var(--text-sm); margin-bottom: var(--space-3); }

  .card-white-bordered { background: white; border-radius: 8px; padding: 2rem; border-left: 4px solid var(--color-gold); }

  .pathway-card {
    background: white;
    border-radius: 12px;
    padding: 2.5rem;
    border: 1px solid rgba(0, 0, 0, 0.06);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
    transition: all var(--transition-luxury);
    text-decoration: none;
    display: flex;
    flex-direction: column;
    height: 100%;
  }
  .pathway-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.12);
  }
  .pathway-card h3 { font-family: var(--font-heading); font-size: 1.4rem; font-weight: 500; letter-spacing: -0.01em; }

  .pathway-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--color-gold-accessible);
    margin-bottom: 1rem;
  }

  .pathway-cta {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--color-burgundy-deep);
    font-weight: 500;
    font-size: 0.95rem;
    margin-top: auto;
  }

  @media (max-width: 768px) {
    .card { padding: 1.5rem; }
    .card-lg { padding: 2rem; }
    .card-sm { padding: 1rem; }
    .card-featured { padding: 1.5rem; }
    .card-dark { padding: 1.5rem; }
    .card-media { margin: -1.5rem -1.5rem 1rem -1.5rem; height: 180px; }
    .card-magazine-content { padding: 1.25rem; }
    .card h3 { font-size: 1.25rem; }
    .card p { font-size: 0.9rem; line-height: 1.6; }
    .card-icon { font-size: 1.5rem; margin-bottom: 0.75rem; }
  }

  @media (hover: none) and (pointer: coarse) {
    .card:hover { transform: none; box-shadow: var(--shadow-card); }
    .card-featured:hover { box-shadow: var(--shadow-card); transform: none; }
    .card-dark:hover { transform: none; }
    .card:active, .card-dark:active { transform: scale(0.99); box-shadow: var(--ux-shadow); }
  }

  /* ── Stats Bar ── */
  .stats-bar {
    background: var(--color-charcoal);
    border-top: 1px solid rgba(196, 163, 90, 0.15);
    border-bottom: 1px solid rgba(255,255,255,0.06);
    padding: 3rem 0;
    color: rgba(255, 255, 255, 0.75);
    position: relative;
    isolation: isolate;
  }

  .stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--space-12);
    text-align: center;
    container-type: inline-size;
    container-name: stats-grid;
  }

  .stat-number {
    font-family: var(--font-heading);
    font-size: clamp(2.5rem, 5vw, 3.5rem);
    font-weight: 600;
    color: var(--color-gold-display);
    display: block;
    margin-bottom: var(--space-2);
    letter-spacing: -0.025em;
    line-height: 1;
  }

  .stat-label {
    color: #A8A39A;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.25em;
    font-family: var(--font-ui);
    margin-top: 0.4rem;
  }

  /* Stats description text (muted, readable) — replaces inline opacity: 0.7 */
  .stat-desc {
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.70);
    font-family: var(--font-ui);
    line-height: 1.4;
  }

  .stats-bar .text-gold, .stats-bar .text-accent { color: var(--color-gold-display); }

  @media (max-width: 768px) {
    .stats-bar { padding: 2rem 0; }
    .stats-grid { grid-template-columns: repeat(2, 1fr); }
    .stat-number { font-size: 2rem; }
    .stat-label { font-size: 0.7rem; }
  }

  @media (max-width: 480px) {
    .stat-number { font-size: 1.75rem; }
  }

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

  /* ── Forms ── */
  .form-group {
    position: relative;
    margin-bottom: 1.5rem;
  }

  .form-group label, .form-label {
    display: block;
    font-size: 0.875rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--color-text-meta);
    margin-bottom: 0.375rem;
    transition: color 0.2s ease;
  }

  .form-group:focus-within label { color: var(--color-gold); }

  .form-input, .form-textarea, .form-select,
  .form-group input, .form-group select, .form-group textarea {
    width: 100%;
    padding: 0.875rem 1rem;
    font-family: var(--font-ui);
    font-size: var(--text-base);
    color: var(--color-text-primary);
    background: rgba(255,255,255,0.6);
    border: 1.5px solid rgba(0,0,0,0.15);
    border-radius: 4px;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
  }

  .form-input:focus, .form-textarea:focus, .form-select:focus,
  .form-group input:focus, .form-group select:focus, .form-group textarea:focus {
    outline: none;
    border-color: var(--color-gold);
    box-shadow: 0 0 0 3px rgba(196, 163, 90, 0.18);
    background: rgba(255,255,255,0.9);
  }

  .form-input::placeholder, .form-textarea::placeholder { color: var(--color-text-meta); }
  .form-textarea { min-height: 150px; resize: vertical; }

  .form-dark .form-label { color: var(--color-off-white); }
  .form-dark .form-input, .form-dark .form-textarea {
    background: var(--color-slate-dark);
    border-color: rgba(255, 255, 255, 0.1);
    color: var(--color-off-white);
  }
  .form-dark .form-input:focus, .form-dark .form-textarea:focus { border-color: var(--color-gold); }

  .form-group.has-error input,
  .form-group.has-error select,
  .form-group.has-error textarea {
    border-color: #C0392B;
    box-shadow: 0 0 0 3px rgba(192, 57, 43, 0.12);
  }

  .form-group .error-msg {
    display: none;
    margin-top: 0.375rem;
    font-size: 0.85rem;
    color: #C0392B;
    font-style: italic;
  }

  .form-group.has-error .error-msg { display: block; animation: errorFadeIn 0.25s ease; }

  .form-success-msg {
    display: none;
    text-align: center;
    padding: 2rem;
    background: rgba(196,163,90,0.08);
    border: 1px solid var(--color-gold);
    border-radius: 4px;
    margin-top: 1rem;
  }
  .form-success-msg.is-visible { display: block; animation: successFadeIn 0.4s ease; }

  @media (prefers-reduced-motion: reduce) {
    .form-group.has-error .error-msg, .form-success-msg.is-visible { animation: none; }
  }

  /* ── FAQ Accordion ── */
  .faq-list { display: flex; flex-direction: column; gap: 0; }
  .faq-list details { border-bottom: 1px solid rgba(0, 0, 0, 0.07); overflow: hidden; }
  .faq-list details:first-child { border-top: 1px solid rgba(0, 0, 0, 0.07); }

  .faq-list summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;
    padding: 1.6rem 0;
    cursor: pointer;
    font-family: var(--font-ui);
    font-size: 1rem;
    font-weight: 500;
    letter-spacing: 0.01em;
    color: var(--color-charcoal);
    transition: color 0.3s ease;
    list-style: none;
    -webkit-appearance: none;
    appearance: none;
  }

  .faq-list summary::-webkit-details-marker { display: none; }
  .faq-list summary::marker { content: ''; display: none; }
  .faq-list summary::before { content: none; display: none; }
  .faq-list summary:hover { color: var(--color-gold); }

  .faq-icon {
    position: relative;
    width: 28px;
    height: 28px;
    flex-shrink: 0;
    border: 1.5px solid var(--color-border-gold);
    border-radius: 50%;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  }

  .faq-icon::before, .faq-icon::after {
    content: '';
    position: absolute;
    top: 50%; left: 50%;
    width: 12px; height: 1.5px;
    background: var(--color-gold);
    transform: translate(-50%, -50%);
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s ease;
  }
  .faq-icon::after { transform: translate(-50%, -50%) rotate(90deg); }

  details[open] .faq-icon { background: var(--color-gold); border-color: var(--color-gold); }
  details[open] .faq-icon::before, details[open] .faq-icon::after { background: white; }
  details[open] .faq-icon::after { transform: translate(-50%, -50%) rotate(0deg); opacity: 0; }

  .faq-answer { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.4s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.35s ease; opacity: 0; }
  details[open] .faq-answer { grid-template-rows: 1fr; opacity: 1; }

  .faq-answer-inner { overflow: hidden; padding: 0; }
  details[open] .faq-answer-inner { padding: 0 0 1.75rem 0; }

  .faq-answer-inner p {
    line-height: 1.8;
    color: #4A4A4A;
    font-size: 0.95rem;
    max-width: 88%;
    border-left: 2px solid rgba(193, 167, 107, 0.12);
    padding-left: 1.25rem;
  }

  .section-dark .faq-list details { border-bottom-color: rgba(255, 255, 255, 0.08); }
  .section-dark .faq-list details:first-child { border-top-color: rgba(255, 255, 255, 0.08); }
  .section-dark .faq-list summary { color: var(--color-off-white); }
  .section-dark .faq-list summary:hover { color: var(--color-gold); }
  .section-dark .faq-icon { border-color: rgba(193, 167, 107, 0.35); }
  .section-dark details[open] .faq-icon { background: var(--color-gold); border-color: var(--color-gold); }
  .section-dark .faq-answer-inner p { color: #C8C4BE; border-left-color: rgba(193, 167, 107, 0.2); }

  @media (max-width: 768px) {
    .faq-list summary { font-size: 0.95rem; padding: 1.35rem 0; gap: 1.25rem; }
    .faq-icon { width: 24px; height: 24px; }
    .faq-icon::before, .faq-icon::after { width: 10px; }
    .faq-answer-inner p { max-width: 100%; font-size: 0.9rem; }
  }

  .faq-item { background: white; border-radius: 4px; margin-bottom: 0.75rem; overflow: hidden; box-shadow: 0 2px 8px rgba(0,0,0,0.04); }

  /* Premium FAQ on regions pages */
  .section details:not(.faq-list details) {
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 14px;
    padding: 0 1.25rem;
    margin: 0 0 0.9rem 0;
    transition: transform 0.2s ease, border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
  }

  .section details:not(.faq-list details):hover {
    border-color: rgba(var(--color-gold-rgb), 0.22);
    background: rgba(var(--color-gold-rgb), 0.03);
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.18);
    transform: translateY(-1px);
  }

  .section details:not(.faq-list details) summary {
    list-style: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    cursor: pointer;
    padding: 1.05rem 0;
    font-weight: 600;
    font-size: 1.05rem;
    line-height: 1.4;
    letter-spacing: 0.01em;
  }

  .section details:not(.faq-list details) summary::-webkit-details-marker { display: none; }

  .section details:not(.faq-list details) summary::after {
    content: '+';
    width: 34px; height: 34px;
    border-radius: 999px;
    display: inline-flex; align-items: center; justify-content: center;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.08);
    color: var(--color-gold);
    font-weight: 300;
    font-size: 1.4rem;
    flex-shrink: 0;
    transition: transform 0.25s ease, background 0.2s ease, border-color 0.2s ease;
  }

  .section details:not(.faq-list details)[open] summary::after {
    content: '-';
    background: rgba(var(--color-gold-rgb), 0.10);
    border-color: rgba(var(--color-gold-rgb), 0.22);
  }

  .section details:not(.faq-list details) > *:not(summary) { padding: 0 0 1.15rem 0; color: rgba(255, 255, 255, 0.82); line-height: 1.75; }

  /* ── Dividers ── */
  .divider { width: 60px; height: 2px; background: var(--color-gold); margin: var(--space-8) 0; }
  .divider-center { width: 60px; height: 2px; background: var(--color-gold); margin: var(--space-8) auto; }
  .divider-wide { width: 100%; height: 1px; background: linear-gradient(90deg, transparent, var(--color-gold), transparent); margin: var(--space-12) 0; }

  /* ── Carousel Dots ── */
  .carousel-dots { display: none; }

  @media (max-width: 768px) {
    .carousel-dots {
      display: flex;
      justify-content: center;
      align-items: center;
      gap: 0.4rem;
      margin-top: 0.75rem;
      padding-bottom: 0.5rem;
    }

    .carousel-dot {
      width: 8px; height: 8px;
      border-radius: 50%;
      border: none;
      background: rgba(0, 0, 0, 0.15);
      cursor: pointer;
      transition: all 0.25s ease;
      padding: 0;
      flex-shrink: 0;
    }

    .carousel-dot.active {
      width: 20px; height: 8px;
      background: var(--color-gold);
      border-radius: 4px;
    }

    .carousel-dot:focus-visible { outline: 2px solid var(--color-gold); outline-offset: 3px; }
  }

  /* ── KB Slider ── */
  .kb-slider {
    position: relative;
    width: 100%;
    aspect-ratio: 26/9;
    max-height: 380px;
    overflow: hidden;
    background: #000;
  }

  .impressions-section .kb-slider {
    width: min(100% - 3rem, 1200px);
    margin-left: auto;
    margin-right: auto;
    border-radius: 12px;
  }

  .impressions-section .container { position: relative; z-index: 2; margin-bottom: 1.2rem; }

  .kb-track { position: relative; width: 100%; height: 100%; }

  .kb-slide {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    opacity: 0;
    transition: opacity 1s ease-in-out;
  }

  .kb-slide.kb-active { opacity: 1; }

  .kb-slide img {
    width: 100%; height: 100%;
    object-fit: cover;
    transform: scale(1);
    transition: transform 6s linear;
  }
  .kb-slide.kb-active img { transform: scale(1.1); }

  .kb-dots {
    position: absolute;
    bottom: 20px; left: 50%;
    transform: translateX(-50%);
    display: flex; gap: 10px;
    z-index: 10;
  }

  .kb-dot {
    width: 12px; height: 12px;
    background: rgba(255, 255, 255, 0.5);
    border-radius: 50%;
    cursor: pointer;
    transition: background 0.3s;
  }
  .kb-dot.active { background: #fff; transform: scale(1.2); }

  @media (max-width: 768px) { .kb-slider { aspect-ratio: 16/9; max-height: 300px; } }
  @media (max-width: 480px) { .kb-slider { aspect-ratio: 4/3; max-height: 240px; } }

  @supports (-webkit-touch-callout: none) {
    .kb-track { display: flex; will-change: transform; transform: translateZ(0); }
    .kb-slide { flex: 0 0 100%; }
    .kb-dots { position: relative; z-index: 5; pointer-events: auto; }
    .kb-dots button, .kb-dots .kb-dot, .kb-prev, .kb-next { pointer-events: auto; }
    .kb-prev, .kb-next { z-index: 6; }
  }

  /* ── Scroll Reveal ── */
  .ux-reveal {
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 0.9s cubic-bezier(0.16, 1, 0.3, 1), transform 0.9s cubic-bezier(0.16, 1, 0.3, 1);
  }
  .ux-reveal.is-visible { opacity: 1; transform: translateY(0); }

  /* ── Scroll to Top ── */
  #uxScrollTop {
    position: fixed;
    right: 16px;
    bottom: calc(16px + var(--ux-safe-bottom));
    width: 48px; height: 48px;
    border-radius: 999px;
    display: grid; place-items: center;
    z-index: calc(var(--z-modal) + 10);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease, transform 0.2s ease;
    transform: translateY(8px);
    box-shadow: var(--ux-shadow);
    background: rgba(0, 0, 0, 0.72);
    color: #fff;
    border: 0;
  }
  #uxScrollTop.is-visible { opacity: 1; pointer-events: auto; transform: translateY(0); }

  /* ── Bottom CTA ── */
  #uxBottomCTA {
    position: fixed;
    left: 12px; right: 12px;
    bottom: calc(10px + var(--ux-safe-bottom));
    z-index: 1060;
    display: none;
    gap: 10px;
  }
  #uxBottomCTA a {
    flex: 1;
    display: inline-flex; align-items: center; justify-content: center;
    min-height: 48px;
    border-radius: 999px;
    text-decoration: none;
    font-weight: 700;
    box-shadow: var(--ux-shadow);
    background: rgba(0, 0, 0, 0.82);
    color: #fff;
  }

  @media (max-width: 768px) {
    #uxBottomCTA { display: flex; }
    body { padding-bottom: 70px; }
  }

  /* ── CTA Final Section ── */
  .cta-final, .section-cta { position: relative; overflow: hidden; }
  .cta-final::before, .section-cta::before { content: none; }

  .cta-final::after, .section-cta::after {
    content: '';
    position: absolute;
    top: 0; left: -100%; width: 100%; height: 2px;
    background: linear-gradient(90deg, transparent, rgba(196,163,90,0.8), transparent);
    animation: shimmerLine 3s ease-in-out infinite;
  }

  .cta-final h1, .cta-final h2, .cta-final h3, .cta-final h4,
  .cta-final p, .cta-final .text-lead,
  .cta-final .section-title, .cta-final li, .cta-final label { color: #ffffff; }
  .cta-final .section-subtitle { color: var(--color-gold-display); }

  .section.cta-final { text-align: center; padding-top: 4.2rem; padding-bottom: 4.2rem; }
  .section.cta-final h2 { margin-bottom: 0.8rem; }
  .section.cta-final p { margin-bottom: 2rem; color: rgba(255, 255, 255, 0.92); line-height: 1.6; max-width: 620px; margin-left: auto; margin-right: auto; }

  .section.cta-final .btn-group { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; }
  .section.cta-final .btn-group a { min-width: 260px; }

  @media (max-width: 768px) {
    .section.cta-final .btn-group a { width: 100%; min-width: 0; }
  }

  @media (prefers-reduced-motion: reduce) {
    .cta-final::after, .section-cta::after { animation: none; left: 0; opacity: 0.5; }
  }

  /* ── Glass ── */
  .glass {
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1);
  }

  .glass-dark {
    background: rgba(15, 17, 19, 0.6);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.05);
  }

  /* Mobile Carousel */
  @media (max-width: 768px) {
    .grid-3, .grid-2 {
      display: flex;
      overflow-x: auto;
      scroll-snap-type: x mandatory;
      gap: 1rem;
      padding: 0 1rem 2.5rem;
      scrollbar-width: none;
      -ms-overflow-style: none;
      position: relative;
      scroll-behavior: smooth;
      mask-image: linear-gradient(to right, black calc(100% - 60px), transparent calc(100% - 20px));
      -webkit-mask-image: linear-gradient(to right, black calc(100% - 60px), transparent calc(100% - 20px));
    }

    .grid-3::-webkit-scrollbar, .grid-2::-webkit-scrollbar { display: none; }

    .grid-3 > *, .grid-2 > * {
      flex: 0 0 85%;
      scroll-snap-align: center;
      min-width: 280px;
    }

    .grid-3::after, .grid-2::after {
      content: '';
      position: absolute;
      bottom: 0.75rem;
      left: 50%;
      transform: translateX(-50%);
      width: 64px; height: 3px;
      background: rgba(0,0,0,0.1);
      border-radius: 3px;
    }

    .grid-3:active, .grid-2:active { cursor: grabbing; }

    .grid-3:has(+ .carousel-dots)::after,
    .grid-2:has(+ .carousel-dots)::after { display: none; }

    .container, .nav, .nav-inner, .hero, .hero-content, .section, .footer, .footer-grid { max-width: 100%; }
    pre, code { white-space: pre-wrap; word-break: break-word; overflow-wrap: anywhere; }
    table { display: block; width: 100%; max-width: 100%; overflow-x: auto; }
    iframe, video, svg { max-width: 100%; }
  }

  /* Blockquote mobile */
  @media (max-width: 768px) {
    blockquote { font-size: 1.05rem; padding-left: 1rem; margin: 1.5rem 0; }
    .quote-section, .testimonial { flex-direction: column; text-align: center; }
    .quote-section img, .testimonial img { width: 120px; height: 120px; margin: 0 auto 1rem; border-radius: 50%; object-fit: cover; }
  }

  @media (max-width: 480px) {
    .section { padding: 2.5rem 0; }
    :root { --space-24: 2.5rem; --space-32: 3.5rem; --space-16: 2.5rem; }
    :root { --text-6xl: 2.25rem; --text-5xl: 2rem; --text-4xl: 1.65rem; --text-3xl: 1.4rem; --text-2xl: 1.2rem; }
    h2 { margin-bottom: 0.75rem; }
    .section-subtitle { font-size: 0.75rem; letter-spacing: 0.12em; }
  }

  /* ============================================================
     FAQ Patterns + Check-Lists + Link Cards (ex Inline-Migration)
     ============================================================ */

  /* FAQ patterns from regions/tutorial pages */
  .faq-summary-style {
    padding: 1.25rem;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-weight: 500;
    list-style: none;
  }

  .faq-summary-gold {
    padding: 1rem 0;
    border-bottom: 1px solid var(--color-border-gold);
    display: flex;
    align-items: center;
  }

  .faq-summary-light {
    padding: 0.75rem 0;
    border-bottom: 1px solid #eee;
  }

  .faq-answer-content {
    padding: 0 1.25rem 1.25rem;
    color: #4A4A4A;
    line-height: 1.6;
  }

  /* Dark link card (useful links sections) */
  .link-card-dark {
    display: block;
    padding: 1.5rem;
    background: rgba(255,255,255,0.05);
    border-radius: 8px;
    text-decoration: none;
    border: 1px solid rgba(255,255,255,0.1);
    transition: all 0.25s ease;
  }

  .link-card-dark:hover {
    background: rgba(255,255,255,0.08);
    border-color: rgba(196, 163, 90, 0.3);
    transform: translateY(-2px);
  }

  /* ── Check-List (Zoll, Checklisten) ── */
  .check-list {
    list-style: none;
    padding: 0;
    margin: 0;
  }

  .check-list li {
    padding: 0.75rem 0;
    border-bottom: 1px solid var(--color-border-gold);
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-family: var(--font-ui);
    font-size: 1rem;
    color: var(--color-text-primary);
    line-height: 1.5;
  }

  .check-list li:last-child {
    border-bottom: none;
  }

  .check-list .check-icon {
    color: var(--color-gold-accessible);
    font-weight: bold;
    flex-shrink: 0;
    font-size: 1.1rem;
  }


  /* ============================================================
     Homepage-Specific: Pathway Slider, News, Hero Glass, Parallax
     ============================================================ */

  /* ── Pathway Slider (mobile swipe / desktop grid) ── */
  .pathway-slider-container {
    position: relative;
    overflow: hidden;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }
  .pathway-slider-container::-webkit-scrollbar { display: none; }

  .pathway-slider {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
  }

  .pathway-dots {
    display: none;
    justify-content: center;
    gap: 0.5rem;
    margin-top: 1.5rem;
  }

  .pathway-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.2);
    cursor: pointer;
    transition: background 0.3s;
  }
  .pathway-dot.active {
    background: var(--color-gold);
    width: 24px;
    border-radius: 5px;
  }

  @media (max-width: 768px) {
    .pathway-slider {
      display: flex;
      transition: transform 0.3s ease;
      gap: 1rem;
    }
    .pathway-slide {
      flex: 0 0 85%;
      min-width: 85%;
    }
    .pathway-dots { display: flex; }
  }

  /* ── Stats bar value ── */
  .stat-value {
    font-size: 2rem;
    font-weight: 700;
  }

  /* ── News grid + cards (dark section) ── */
  .news-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 2rem;
  }
  @media (max-width: 768px) {
    .news-grid { grid-template-columns: 1fr; }
  }

  .news-card {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding: 2rem;
  }

  /* News card sub-elements — replaces inline styles */
  .news-date {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-bottom: 0.5rem;
  }

  .news-excerpt {
    color: rgba(255, 255, 255, 0.82);
    line-height: 1.7;
  }

  .news-more-link {
    display: inline-block;
    margin-top: 1rem;
  }

  /* Gold badge highlight (used inside cards) — replaces inline rgba background */
  .badge-gold-light {
    background: rgba(196, 163, 90, 0.15);
    padding: 0.2rem 0.4rem;
    border-radius: 4px;
  }

  /* Gold button variant (primary action on hero / homepage) */
  .btn-gold {
    background: var(--color-gold);
    color: var(--color-charcoal);
    border: 2px solid var(--color-gold);
    padding: 1rem 2.5rem;
    font-weight: 600;
  }
  .btn-gold:hover {
    background: var(--color-gold-display);
    border-color: var(--color-gold-display);
    transform: translateY(-2px);
    box-shadow: var(--shadow-heavy), var(--shadow-gold);
  }

  /* ── Why Russia SVG icons ── */
  .why-russia-svg { color: var(--color-gold); }

  /* ── Hero glass content box ── */
  .hero-content-glass {
    position: relative;
    z-index: 2;
    max-width: 900px;
    padding: 3rem;
    background: rgba(15, 17, 19, 0.35);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    border: 1px solid rgba(255, 255, 255, 0.1);
  }

  /* ── Parallax background element ── */
  .parallax-bg {
    position: absolute;
    top: -10%;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #0F1113;
    background-size: cover;
    background-position: center;
    z-index: 0;
  }
  @media (prefers-reduced-motion: reduce) {
    .parallax-bg { transition: none; animation: none; }
  }

  /* ── CTA Final background ── */
  .section.cta-final {
    background: linear-gradient(135deg, var(--color-slate-dark) 0%, var(--color-charcoal) 100%);
  }

  /* ── Hero CTAs responsive ── */
  @media (max-width: 768px) {
    .hero-ctas {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 0.75rem;
      width: 100%;
      padding: 0 1.5rem;
    }
    .hero-ctas .btn {
      width: 100%;
      max-width: 300px;
      text-align: center;
      border-radius: 6px;
      padding: 0.9rem 2rem;
      display: block;
      box-sizing: border-box;
    }
  }
}


/* ============================================================
   @layer pages — Travel, Regions, Page-specific
   ============================================================ */
@layer pages {

  /* ── Travel / Tutorial pages ── */
  .travel-narrow { max-width: 800px; margin-left: auto; margin-right: auto; padding-left: 1.5rem; padding-right: 1.5rem; }

  .travel-section-header {
    text-align: center;
    margin-bottom: 3rem;
    max-width: 900px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 1rem;
    padding-right: 1rem;
  }
  .travel-section-header h2 { margin-top: 0.5rem; margin-bottom: 1rem; }
  .travel-section-header p { font-size: 1.1rem; color: #3D3F44; line-height: 1.6; max-width: 700px; margin-left: auto; margin-right: auto; }

  .travel-hero-content-center { display: flex; flex-direction: column; align-items: center; text-align: center; max-width: 900px; margin: 0 auto; }

  .travel-cta-center { display: flex; justify-content: center; align-items: center; gap: 1rem; flex-wrap: wrap; margin-top: 2rem; }

  .travel-grid-balance { display: grid; gap: 2rem; }
  .travel-faq-wrap { max-width: 800px; margin: 0 auto; }
  .travel-faq-wrap details { margin-bottom: 1rem; border-bottom: 1px solid rgba(0,0,0,0.1); padding-bottom: 1rem; }
  .travel-faq-wrap summary { font-weight: 500; cursor: pointer; list-style: none; position: relative; padding-right: 2rem; }

  .travel-cta-final { padding: 6rem 0; }

  @media (max-width: 768px) {
    .travel-grid-balance { grid-template-columns: 1fr; gap: 1.5rem; }
    .travel-section-header { margin-bottom: 2rem; }
    .travel-narrow { padding-left: 1rem; padding-right: 1rem; }
    .platform-card { padding: 1rem 1.25rem; }
  }

  /* ── Regions pages ── */
  .why-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.6rem;
    margin-top: 2rem;
  }

  .why-card {
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 4px;
    padding: 2rem;
    transition: all var(--transition-luxury);
    transform: translateZ(0);
  }

  .why-card:hover {
    transform: translateY(-2px);
    border-color: rgba(var(--color-gold-rgb), 0.20);
    box-shadow: 0 12px 34px rgba(0, 0, 0, 0.16);
  }
  .why-card h3 { margin-top: 0; margin-bottom: 0.6rem; }
  .why-card p { margin: 0; color: rgba(255, 255, 255, 0.82); line-height: 1.75; }

  @media (max-width: 900px) {
    .why-grid { grid-template-columns: 1fr; gap: 1.1rem; }
    .why-card { padding: 1.4rem; border-radius: 4px; }
  }

  .target-groups-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.6rem; }
  @media (max-width: 1024px) { .target-groups-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
  @media (max-width: 700px) { .target-groups-grid { grid-template-columns: 1fr; } }

  /* Useful links section */
  .section.useful-links { padding-top: 3.2rem; padding-bottom: 3.2rem; }
  .section.useful-links .links-row { display: flex; flex-wrap: wrap; gap: 1.1rem 1.6rem; align-items: center; }
  .section.useful-links a { text-decoration: none; border-bottom: 1px solid transparent; transition: border-color 0.2s ease, color 0.2s ease; }
  .section.useful-links a:hover { border-bottom-color: rgba(var(--color-gold-rgb), 0.55); }

  /* Intro content */
  .intro-content h2, .intro-content p { color: #1A1C1F; }

  /* CTA text centering */
  .section.text-center .text-lead,
  .section.cta-final.text-center p { text-align: center; margin-left: auto; margin-right: auto; }
  .section.text-center h2, .section.text-center h3 { text-align: center; }

  /* Paragraph centering inside .text-center — fixes block alignment */
  .text-center p { margin-left: auto; margin-right: auto; }

  /* Inquiry / contact form container */
  .inquiry-container {
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
  }
  .hero-ctas.btn-group, .section.cta-final .hero-ctas { justify-content: center; align-items: center; width: 100%; }

  /* Section-dark specific cards */
  .section-dark .feature-card h3, .section-dark .feature-card p,
  .section-dark .blog-card h3, .section-dark .news-card h3 { color: #ffffff; }
  .section-dark .process-step h3, .section-dark .process-step p { color: rgba(255, 255, 255, 0.88); }

  /* btn-secondary on light backgrounds */
  .section-off-white .btn-secondary {
    border-color: var(--color-charcoal);
    color: var(--color-charcoal);
  }
  .section-off-white .btn-secondary:hover {
    background: var(--color-charcoal);
    color: var(--color-off-white);
    border-color: var(--color-charcoal);
  }

  /* btn-secondary on dark CTA — white/transparent styling */
  .cta-final .btn-secondary {
    border-color: rgba(255, 255, 255, 0.5);
    color: var(--color-off-white);
    border-width: 2px;
  }
  .cta-final .btn-secondary:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: var(--color-off-white);
    color: var(--color-off-white);
  }

  /* Dark context class overrides */
  .section-dark .text-charcoal, .section-dark .text-dark,
  .bg-charcoal .text-charcoal, .bg-charcoal .text-dark { color: rgba(255, 255, 255, 0.88); }

  .hero-parallax .text-charcoal, .hero-parallax .text-dark { color: rgba(255, 255, 255, 0.88); }
  .cta-final .text-charcoal, .cta-final .text-dark { color: #ffffff; }

  /* page-reisen FAQ specifics */
  .page-reisen .faq-scope { position: relative; isolation: isolate; }
  .page-reisen .faq-scope > * { position: relative; z-index: 2; }
}


/* ============================================================
   @layer utilities — Spacing, Text, Display, Visibility
   ============================================================ */
@layer utilities {

  /* Text Colors */
  .text-white { color: white; }
  .text-off-white { color: var(--color-off-white); }
  .text-charcoal { color: var(--color-charcoal); }
  .text-gold { color: var(--color-gold); }
  .text-gold-bright { color: var(--color-gold-bright); }
  .text-gold-accessible { color: var(--color-gold-accessible); }
  .text-slate { color: var(--color-slate); }
  .text-muted { color: #666666; }
  .text-dark { color: #444444; }
  .text-bbb { color: #666666; }
  .text-description { color: #4A4A4A; max-width: 35ch; line-height: 1.7; }
  .text-gold-dark { color: #3D2F06; }
  .text-error { color: #e74c3c; }

  .section-dark .text-muted, .bg-charcoal .text-muted, .hero .text-muted { color: #cccccc; }
  .section-dark .text-bbb, .bg-charcoal .text-bbb { color: #bbb; }
  .section-dark .text-gold, .section-dark .text-accent,
  .footer .text-gold, .stats-bar .text-gold { color: var(--color-gold-display); }

  /* Text Alignment */
  .text-center { text-align: center; }
  .text-left { text-align: left; }
  .text-right { text-align: right; }

  /* Font Families */
  .font-serif { font-family: var(--font-heading); }
  .font-sans { font-family: var(--font-ui); }

  /* Font Sizes */
  .text-xs { font-size: 0.75rem; }
  .text-sm { font-size: 0.875rem; }
  .text-base { font-size: 1rem; }
  .text-lg { font-size: 1.125rem; }
  .text-xl { font-size: 1.25rem; }
  .text-2xl { font-size: 1.5rem; }

  /* Font Weights */
  .font-light { font-weight: 300; }
  .font-normal { font-weight: 400; }
  .font-medium { font-weight: 500; }
  .font-semibold { font-weight: 600; }
  .font-bold { font-weight: 700; }

  /* Line Heights */
  .leading-tight { line-height: 1.1; }
  .leading-snug { line-height: 1.3; }
  .leading-normal { line-height: 1.5; }
  .leading-relaxed { line-height: 1.6; }
  .leading-loose { line-height: 1.7; }

  /* Spacing */
  .title-lg { font-size: 2rem; margin-bottom: 0.5rem; }
  .max-w-prose { max-width: 800px; }
  .flex-meta { display: flex; gap: 2rem; flex-wrap: wrap; color: #595959; font-size: 0.85rem; }
  .transition-scale { transition: transform 0.2s ease; }

  .p-0 { padding: 0; } .p-4 { padding: 1rem; } .p-6 { padding: 1.5rem; } .p-8 { padding: 2rem; } .p-12 { padding: 3rem; }
  .px-4 { padding-left: 1rem; padding-right: 1rem; } .px-6 { padding-left: 1.5rem; padding-right: 1.5rem; } .px-8 { padding-left: 2rem; padding-right: 2rem; }
  .py-4 { padding-top: 1rem; padding-bottom: 1rem; } .py-6 { padding-top: 1.5rem; padding-bottom: 1.5rem; } .py-8 { padding-top: 2rem; padding-bottom: 2rem; }
  .pt-4 { padding-top: 1rem; } .pt-6 { padding-top: 1.5rem; } .pt-8 { padding-top: 2rem; }
  .pb-4 { padding-bottom: 1rem; } .pb-6 { padding-bottom: 1.5rem; } .pb-8 { padding-bottom: 2rem; }

  .m-0 { margin: 0; } .m-4 { margin: 1rem; }
  .mt-4 { margin-top: 1rem; } .mt-6 { margin-top: 1.5rem; } .mt-8 { margin-top: 2rem; } .mt-12 { margin-top: 3rem; }
  .mb-4 { margin-bottom: 1rem; } .mb-6 { margin-bottom: 1.5rem; } .mb-8 { margin-bottom: 2rem; } .mb-12 { margin-bottom: 3rem; }
  .mr-4 { margin-right: 1rem; }
  .mb-2 { margin-bottom: 0.5rem; }
  .mt-2 { margin-top: 0.5rem; }
  .mt-3 { margin-top: 0.75rem; }

  /* Display */
  .block { display: block; } .inline-block { display: inline-block; } .inline { display: inline; }
  .flex { display: flex; } .inline-flex { display: inline-flex; } .hidden { display: none; }

  /* Flexbox */
  .flex-row { flex-direction: row; } .flex-col { flex-direction: column; }
  .flex-wrap { flex-wrap: wrap; } .flex-nowrap { flex-wrap: nowrap; }
  .items-start { align-items: flex-start; } .items-center { align-items: center; } .items-end { align-items: flex-end; }
  .justify-start { justify-content: flex-start; } .justify-center { justify-content: center; } .justify-end { justify-content: flex-end; } .justify-between { justify-content: space-between; }
  .flex-1 { flex: 1 1 0%; } .flex-auto { flex: 1 1 auto; } .flex-none { flex: none; }

  /* Grid */
  .grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
  .grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .gap-2 { gap: 0.5rem; } .gap-4 { gap: 1rem; } .gap-6 { gap: 1.5rem; } .gap-8 { gap: 2rem; }

  /* Width / Height */
  .w-full { width: 100%; } .w-auto { width: auto; }
  .h-full { height: 100%; } .h-auto { height: auto; }
  .hero-sm { min-height: 50vh; } .hero-md { min-height: 60vh; } .hero-lg { min-height: 70vh; } .hero-xl { min-height: 80vh; }

  /* Borders / Shadows */
  .rounded-sm { border-radius: 0.25rem; } .rounded { border-radius: 0.5rem; } .rounded-lg { border-radius: 0.75rem; } .rounded-xl { border-radius: 1rem; }
  .shadow-sm { box-shadow: var(--shadow-subtle); } .shadow { box-shadow: var(--shadow-card); } .shadow-lg { box-shadow: var(--shadow-heavy); }
  .border-gold, .border-left-gold { border-left: 3px solid var(--color-gold); }

  /* Position */
  .relative { position: relative; } .absolute { position: absolute; } .fixed { position: fixed; } .sticky { position: sticky; }
  .inset-0 { top: 0; right: 0; bottom: 0; left: 0; }

  /* Overflow */
  .overflow-hidden { overflow: hidden; } .overflow-auto { overflow: auto; } .overflow-visible { overflow: visible; }

  /* Accessibility */
  .visually-hidden, .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;
  }

  .focus-gold:focus-visible { outline: 3px solid var(--color-gold); outline-offset: 2px; }

  .section-padding { padding: 3rem 2rem; }

  /* Container padding */
  .container-padding { padding-left: 1.5rem; padding-right: 1.5rem; }
  @media (max-width: 768px) { .container-padding { padding-left: 1rem; padding-right: 1rem; } }

  /* Responsive utilities */
  @media (max-width: 768px) {
    .md\:hidden { display: none; } .md\:block { display: block; } .md\:flex { display: flex; }
    .md\:flex-col { flex-direction: column; } .md\:w-full { width: 100%; } .md\:text-center { text-align: center; }
    .md\:mt-4 { margin-top: 1rem; } .md\:mb-4 { margin-bottom: 1rem; } .md\:p-4 { padding: 1rem; }
  }

  @media (max-width: 480px) {
    .sm\:hidden { display: none; } .sm\:block { display: block; } .sm\:text-center { text-align: center; }
  }

  /* Animation utilities */
  .animate-fade-in { animation: fadeIn 0.6s ease-out forwards; }
  .animate-fade-in-up { animation: fadeInUp 0.6s ease-out forwards; }
  .animate-delay-1 { animation-delay: 0.1s; }
  .animate-delay-2 { animation-delay: 0.2s; }
  .animate-delay-3 { animation-delay: 0.3s; }

  /* mb-2, mt-3, py-8 defined above — only unique entries here */
  .mb-3 { margin-bottom: 0.75rem; }
  .mr-2 { margin-right: 0.5rem; }
  .py-12 { padding-top: 3rem; padding-bottom: 3rem; }
  .mx-auto { margin-left: auto; margin-right: auto; }
  .min-h-screen { min-height: 100vh; }
  .max-w-700 { max-width: 700px; }
  .text-3xl { font-size: 2rem; }

  /* ── Subpage Utility Classes (Inline-Style Sprint) ── */

  /* Lists */
  .list-reset { list-style: none; padding: 0; }
  .list-dark { list-style: none; padding: 0; line-height: 1.8; color: #cccccc; }
  .list-dark-2 { list-style: none; padding: 0; line-height: 2; color: #cccccc; }
  .list-tag { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 1.5rem; }
  .list-light { list-style: disc; padding-left: 1.2rem; color: #444444; font-size: 0.9rem; line-height: 1.8; }

  /* Text Colors — Subpage */
  .text-p-bbb { margin: 0; color: #bbbbbb; font-size: 0.9rem; }
  .text-dark-sm { color: #444444; font-size: 0.9rem; }
  .text-meta-dark { color: #444444; font-size: 0.85rem; margin-top: 0.5rem; }
  .text-ccc { color: #cccccc; line-height: 1.7; }
  .text-ccc-sm { color: #cccccc; line-height: 1.6; font-size: 0.95rem; }
  .text-dark-body { color: #444444; line-height: 1.6; }
  .text-body-meta { color: #595959; line-height: 1.6; }
  .text-555 { color: #555555; }
  .text-333 { color: #333333; line-height: 1.6; }
  .text-warn { color: #cc4444; }

  /* Serif font size variants */
  .text-xl-serif { font-family: var(--font-heading); font-size: 1.4rem; }
  .text-lg-serif { font-family: var(--font-heading); font-size: 1.3rem; margin-bottom: 0.75rem; }

  /* Heading Styles */
  .label-caps { font-size: 0.9rem; text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 0.75rem; color: #3D2F06; }
  .h3-gold-dark { margin: 0 0 0.5rem; font-size: 1.1rem; color: #3D2F06; }

  /* Link Patterns */
  .tutorial-link { flex: 1; min-width: 250px; padding: 1.5rem; }
  .touch-link { display: inline-block; padding: 0.5rem 0; min-height: 44px; line-height: 1.75; }

  /* Badge */
  .badge-light { display: inline-block; background: rgba(255,255,255,0.5); padding: 0.5rem 1rem; border-radius: 4px; font-size: 0.85rem; }

  /* Table */
  .tr-divider { border-bottom: 1px solid rgba(255,255,255,0.1); }

  /* Cards */
  .card-glass { background: rgba(255,255,255,0.05); padding: 2rem; border-radius: 12px; border: 1px solid rgba(255,255,255,0.1); }
  .card-glass-bare { background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1); }
  .card-glass-padded { margin-top: 3rem; padding: 2.5rem; border-radius: 8px; }
  .card-pad-sm { padding: 1.5rem; border-radius: 8px; }
  .card-body-pad { padding: 0 1.25rem 1.25rem; color: #444444; line-height: 1.6; }
  .card-white { background: white; padding: 2.5rem; border-radius: 12px; box-shadow: 0 4px 20px rgba(0,0,0,0.1); }

  /* Layout */
  .flex-start-6 { display: flex; align-items: flex-start; gap: 1.5rem; }

  /* Decorative */
  .gold-border-box { padding: 2.5rem 2rem; border-top: 3px solid var(--color-gold); }
  .gold-underline { border-bottom: 2px solid var(--color-gold); padding-bottom: 0.5rem; }
  .icon-circle-gold {
    background: var(--color-gold);
    width: 50px; height: 50px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
  }

  /* Text — second wave */
  .text-dark-loose { color: #444444; line-height: 1.7; }
  .text-dark-wide { color: #444444; line-height: 2; padding-left: 1.5rem; }
  .text-body { color: #333333; line-height: 1.7; }
  .text-subtle { color: rgba(255,255,255,0.6); }
  .text-burgundy { color: var(--color-burgundy-deep); }
  .text-meta-sm { margin: 0; font-size: 0.9rem; color: #666666; }
  .text-tiny-muted { font-size: 0.8rem; color: #666666; }
  .p-spaced { margin: 1rem 0; line-height: 1.7; }

  /* Headings — second wave */
  .h3-sub { margin: 0 0 0.5rem; font-size: 1.1rem; }
  .stat-value { margin-top: 0.5rem; font-size: 1.6rem; }
  .font-serif-display { font-family: var(--font-heading); font-size: 2rem; color: #7a6010; }

  /* Cards — second wave */
  .card-glass-xl { background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1); padding: 2.5rem; }
  .card-body-pad-muted { padding: 0 1.25rem 1.25rem; color: #666666; line-height: 1.6; }

  /* Table */
  .td-serif { text-align: left; padding: 1rem; font-family: var(--font-heading); }
  .table-collapse { width: 100%; border-collapse: collapse; }

  /* Spacing — second wave */
  .p-10 { padding: 2.5rem; }
  .pt-0 { padding-top: 0; }
  .max-w-600 { max-width: 600px; }
  .py-3 { padding-top: 0.75rem; padding-bottom: 0.75rem; }
  .mt-10 { margin-top: 2.5rem; }
  .gap-5 { gap: 1.25rem; }

  /* Backgrounds — second wave */
  .bg-dark-gradient { background: linear-gradient(135deg, #1a1c1f 0%, #0f1113 100%); }
  .card-gold-tint { background: rgba(196,163,90,0.06); border: 1px solid rgba(196,163,90,0.15); }

  /* Typography — additional */
  .label-ui { font-family: var(--font-ui); font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.12em; font-weight: 600; color: #696969; }
  .label-caps-md { font-size: 1rem; text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 0.5rem; }
  .text-light-body { color: rgba(255,255,255,0.82); margin: 0; line-height: 1.65; font-size: 0.95rem; }
  .icon-large { font-size: 1.5rem; flex-shrink: 0; margin-top: 0.1rem; }

  /* Cards — final wave */
  .card-white-sm { background: white; padding: 2rem; border-radius: 8px; }
  .card-white-dashed { background: white; border: 1px dashed #3D2F06; }
}





/* ============================================================
   PRINT STYLES (outside layers for maximum priority)
   ============================================================ */
@media print {
  .navbar, .nav-toggle, .nav-mobile, .nav-overlay, footer,
  .back-to-top, .cookie-banner, #uxScrollTop, #uxBottomCTA { display: none; }


  .hero { min-height: auto; margin-top: 0; background: none; color: black; }
  .btn { border: 1px solid black; }
  .section { page-break-inside: avoid; }
  body { font-size: 12pt; color: #000; }

  a[href]::after { content: none; }
  a::after { content: none; }
}

/* === 2. Pass: Neue Utility-Klassen (03.03.2026) === */
.touch-link-28 { display: inline-block; padding: 0.5rem 0; min-height: 44px; line-height: 28px; }
.icon-circle-gold { background: var(--color-gold); width: 50px; height: 50px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 700; flex-shrink: 0; }
.text-xs-faded { font-size: 0.85rem; opacity: 0.7; }
.fs-09 { font-size: 0.9rem; }
.fs-085 { font-size: 0.85rem; }
.text-333-body { color: #333333; margin: 0; line-height: 1.6; }
.badge-gold-tint { background: rgba(var(--color-gold-rgb, 201,162,39),0.15); padding: 0.2rem 0.4rem; border-radius: 4px; }
.badge-white-btn { background: rgba(255,255,255,0.5); padding: 0.5rem 1rem; border-radius: 4px; font-size: 0.9rem; font-weight: 500; border: 1px solid rgba(0,0,0,0.1); }
.px-btn-lg { padding: 1rem 2.5rem; }
.opacity-07 { opacity: 0.7; line-height: 1.7; }
.opacity-075 { opacity: 0.75; line-height: 1.8; }
.opacity-08 { opacity: 0.8; }
.max-w-900-auto { max-width: 900px; margin: 0 auto; }
.leading-18 { line-height: 1.8; }
.leading-2-indent { line-height: 2; padding-left: 1.5rem; }
.leading-2-dim { line-height: 2; color: rgba(255,255,255,0.8); padding-left: 1.5rem; }
.text-light-dim { color: var(--color-off-white); margin-top: 0.75rem; }
.text-white-95 { color: rgba(255,255,255,0.95); line-height: 1.7; margin-top: 0.75rem; }
.label-caps-white { font-size: 0.9rem; text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 0.75rem; color: white; }
.label-tiny { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.1em; margin-bottom: 0.5rem; }
.label-ui-gold { font-family: var(--font-ui); font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.12em; font-weight: 600; color: var(--color-gold-display); margin-bottom: 0.5rem; }
.card-nav-link { display: block; padding: 1.5rem; background: rgba(255,255,255,0.05); border-radius: 8px; text-decoration: none; color: white; border: 1px solid rgba(255,255,255,0.1); transition: all 0.25s ease; }
.card-white-mb { margin-bottom: 1.5rem; background: white; padding: 1.5rem; border-radius: 8px; }
.bg-off-white-full { background: var(--color-off-white); }
.btn-gold-border { background: var(--color-gold); border: 2px solid var(--color-gold); }
.btn-dark-bg { background: #3D2F06; border: none; }
.note-box { margin-top: 2rem; background: white; padding: 1.5rem 2rem; border-left: 3px solid #3D2F06; }
.tip-box { margin-top: 2.5rem; background: rgba(196, 163, 90, 0.06); border: 1px solid rgba(196, 163, 90, 0.15); border-radius: 12px; padding: 1.75rem 2rem; display: flex; gap: 1.25rem; align-items: flex-start; }
.warn-box { margin-top: 1.5rem; border-left-color: #e74c3c; background: white; padding: 1.5rem 2rem; }
.grid-auto-280 { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1.5rem; margin-top: 2rem; }
.grid-2fr-1fr { display: grid; grid-template-columns: 2fr 1fr; gap: 3rem; align-items: center; }
.grid-2col-1000 { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; max-width: 1000px; margin: 0 auto; }
.flex-center-wrap { justify-content: center; flex-wrap: wrap; }
.list-tag-center { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 1.5rem; align-items: center; }
.gap-3-max-1000 { gap: 3rem; max-width: 1000px; margin: 2rem auto 0; }
.gap-2-max-900 { gap: 2rem; max-width: 900px; margin: 2rem auto 0; }
.max-w-800-mt { max-width: 800px; margin: 2rem auto 0; }
.max-w-700-mt { max-width: 700px; margin: 2rem auto 0; }
.max-w-600-body { max-width: 600px; margin: 1rem auto 0; color: #444444; line-height: 1.6; }
.mt-4-faded { margin-top: 1rem; opacity: 0.8; }
.icon-hero { margin-top: 1rem; font-size: 3.5rem; }
.mt-4-color-666 { margin-top: 1rem; color: #666; }
.text-555-mb6 { color: #555; margin-bottom: 1.5rem; line-height: 1.6; }
.hero-md-gradient { min-height: 70vh; background: linear-gradient(135deg, #1a1c1f 0%, #0f1113 100%); }
.max-w-800-text { max-width: 800px; margin: 0 auto; line-height: 1.8; color: #cccccc; }
.stat-2xl { font-size: 2rem; margin: 0.5rem 0; }
.mt-12-max-800 { margin-top: 3rem; max-width: 800px; margin-left: auto; margin-right: auto; }
.pb-section { padding: 0 0 4rem; }
.faq-cursor { padding: 1.5rem; cursor: pointer; font-weight: 500; }
.hero-overlay-radial { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: radial-gradient(ellipse at center, rgba(15,17,19,0.4) 0%, transparent 70%); z-index: 1; }
.hero-overlay-diagonal { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: linear-gradient(135deg, rgba(15,17,19,0.7) 0%, rgba(15,17,19,0.4) 50%, rgba(15,17,19,0.7) 100%); z-index: 1; }
.h16 { height: 16px; }
.card-news { background: white; border-radius: 8px; margin-bottom: 0.75rem; overflow: hidden; box-shadow: 0 2px 8px rgba(0,0,0,0.04); }
.max-w-800-auto { max-width: 800px; margin: 0 auto; }


/* ============================================================
   SCROLL ANIMATIONS
   CSS ausgelagert aus scroll-animations.js (software-architecture refactor)
   JS setzt Klassen; CSS steuert visuelle Zustände + Animationen
   @media wrapper: reducierte Bewegung wird automatisch deaktiviert
   ============================================================ */
@media (prefers-reduced-motion: no-preference) {
  .will-animate { opacity: 0; }

  .anim-fade-up {
    animation: scrollFadeUp 0.6s cubic-bezier(0.16, 1, 0.3, 1) both;
    animation-delay: var(--anim-delay, 0ms);
  }
  .anim-fade-in {
    animation: scrollFadeIn 0.5s ease-out both;
    animation-delay: var(--anim-delay, 0ms);
  }
  .anim-fade-scale {
    animation: scrollFadeScale 0.5s cubic-bezier(0.16, 1, 0.3, 1) both;
    animation-delay: var(--anim-delay, 0ms);
  }

  @keyframes scrollFadeUp {
    from { opacity: 0; transform: translateY(28px); }
    to   { opacity: 1; transform: translateY(0); }
  }
  @keyframes scrollFadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
  }
  @keyframes scrollFadeScale {
    from { opacity: 0; transform: scale(0.94); }
    to   { opacity: 1; transform: scale(1); }
  }

  .is-visible { opacity: 1; }
}

/* === Spezifitäts-Overrides für travel-tip-Kombinationen (außerhalb @layer) ===
   .travel-tip hat border-left:gold in page-level <style>-Blöcken (unlayered).
   Diese Double-Class-Selektoren (.travel-tip.warn-box etc.) haben höhere
   Spezifität (0,2,0 > 0,1,0) und gewinnen deshalb auch gegen unlayered <style>-Blöcke. */
.travel-tip.warn-box { border-left-color: #e74c3c; margin-top: 1.5rem; }
.travel-tip.note-box { border-left: 3px solid #3D2F06; margin-top: 2rem; }

/* ==========================================================================
   Phase 3 — Contrast Fixes (OUTSIDE @layer — always wins cascade)
   Applied: 2026-03-07
   ========================================================================== */

/* Fix B: Gold subtitle text in light sections (KON-01/02)
   .text-gold utility (#9E7C1A) in @layer utilities defeats .section-off-white .text-gold in @layer layout
   Fix: outside-layer rule wins — forces accessible gold #7A6115 (5.34:1 on #F5F3EF — PASS) */
.section-off-white .text-gold,
.bg-off-white .text-gold { color: var(--color-gold-accessible); }

/* Fix C: CTA button white-on-gold text (KON-01/02)
   .btn-gold-border has white text class on gold (#9E7C1A) background = 3.92:1 FAIL
   Fix: change text to charcoal #0F1113 on #9E7C1A = 4.82:1 PASS */
.btn-gold-border { color: var(--color-charcoal); }

/* Fix D: Footer h3 inherits dark text on dark background (KON-03)
   footer h3 has no explicit color — inherits #0F1113 on footer bg #090B0D = 1.04:1 FAIL
   Fix: rgba(255,255,255,0.9) on #090B0D = ~17.7:1 PASS */
footer h3 { color: rgba(255, 255, 255, 0.9); }

/* Fix E: Footer description text low contrast (KON-04)
   .text-description in footer = 2.13:1 FAIL
   Fix: rgba(255,255,255,0.82) on #090B0D = ~13.3:1 PASS */
footer .text-description { color: rgba(255, 255, 255, 0.82); }

/* Fix F (residual): Footer .text-accent still fails Pa11y after Fix D/E (KON-01/02)
   footer-bottom span.text-accent uses color-gold-accessible (#7A6115) on #090B0D = 3.2:1 FAIL
   Fix: rgba(255,255,255,0.9) on #090B0D = ~17.7:1 PASS */
footer .text-accent { color: rgba(255, 255, 255, 0.9); }

/* ── Phase 5: 1280px laptop breakpoint (standalone, satisfies MOB-05) ── */
/* Appended outside all @layer blocks — Phase 5 addition 2026-03-07 */
/* Bridges gap between (min-width:1025px and max-width:1280px) compound rule and (min-width:1441px) wide-desktop rule */
@media (min-width: 1280px) {
  .container { max-width: 1180px; }
}

/* ============================================================
   Phase 9 Kontrast-Fixes — WCAG AA contrast corrections
   Pattern: appended OUTSIDE all @layer blocks (beats @layer utilities)
   Baseline: 08-baseline-report.json — 5469 instances, 33 unique (selector,fg,bg) pairs
   Applied: 2026-03-07
   Ratio target: >= 5.0:1 (headroom above 4.5:1 minimum)
   ============================================================ */

/* ── GROUP A: White text on off-white body (ratio 1.108) ──────────────────────
   Cause: getBgColor() walk-up lands on body/section bg = rgb(245,243,239) = #F5F3EF
   Affected selectors: a.nav-link, h2, h2.section-title, h3, p.text-lead,
                       div.container, div.p-8, a.card
   Fix: default to charcoal text (#1a1d23 on #F5F3EF → 15.2:1 PASS)
   Override pattern: dark-context selectors restore white/light text (see GROUP C)
   ──────────────────────────────────────────────────────────────────────────── */

/* Fix A-1: a.nav-link — fg=rgba(255,255,255,0.8) walks up to bg=rgb(245,243,239) ratio=1.108
   #1a1d23 on #F5F3EF: lum(26,29,35)=0.009, lum(245,243,239)=0.911 → (0.911+0.05)/(0.009+0.05) = 16.3:1 PASS */
a.nav-link {
  color: #1a1d23;
}

/* Fix A-2: h2 — fg=rgb(255,255,255) on bg=rgb(245,243,239) ratio=1.108
   Same ratio calculation: 16.3:1 PASS */
h2 {
  color: #1a1d23;
}

/* Fix A-3: h2.section-title — fg=rgb(255,255,255) on bg=rgb(245,243,239) ratio=1.108
   282 instances — most frequent single violation in baseline */
h2.section-title {
  color: #1a1d23;
}

/* Fix A-4: p.text-lead — fg=rgb(255,255,255)/rgba(255,255,255,0.92) on bg=rgb(245,243,239) ratio=1.108
   147+90=237 instances */
p.text-lead {
  color: #1a1d23;
}

/* Fix A-5: a.card — fg=rgb(245,243,239) on bg=rgba(255,255,255,0.05) ratio=1.108
   Light card on near-transparent white overlay
   #1a1d23 on rgba(255,255,255,0.05)≈white → 15.2:1 PASS */
a.card {
  color: #1a1d23;
}

/* Fix A-6: div.p-8 — fg=rgb(255,255,255) on bg=rgb(245,243,239) ratio=1.108 */
div.p-8 {
  color: #1a1d23;
}

/* ── GROUP B: Dark text on dark background (ratio 1.0) ────────────────────────
   Cause: element inside dark nav overlay — getBgColor() resolves parent overlay
   bg as rgba(15,17,19,0.85/0.95) → auditor measures fg=dark against this dark bg
   The element itself has color: #0F1113 (charcoal) inherited from body.
   Fix: explicitly set off-white #F5F3EF for these elements in dark contexts.
   Outside-layer rules win over @layer, so these override body color inheritance.
   #F5F3EF on rgb(15,17,19): lum(245,243,239)=0.911, lum(15,17,19)=0.003 → (0.911+0.05)/(0.003+0.05) = 18.1:1 PASS
   ──────────────────────────────────────────────────────────────────────────── */

/* Fix B-1: li — fg=rgb(15,17,19) on bg=rgba(15,17,19,0.85/0.95) ratio=1.0
   1740+645=2385 instances — largest violation group in baseline
   Also covers li rgba(255,255,255,0.82) on rgba(255,255,255,0.05) ratio=1.0 (360 instances) */
li {
  color: #1a1d23;
}

/* Fix B-2: div.container — fg=rgb(15,17,19) on bg=rgba(15,17,19,0.85) ratio=1.0 (435 instances)
   Also covers div.container fg=rgb(245,243,239) on bg=rgb(245,243,239) ratio=1.0 (33 instances)
   Also covers div.container fg=rgb(255,255,255) on bg=rgb(245,243,239) ratio=1.108 (15 instances) */
div.container {
  color: #1a1d23;
}

/* Fix B-3: div.stats-grid — fg=rgb(15,17,19) on bg=rgb(15,17,19) ratio=1.0 (9 instances)
   Stats grid sits inside dark section; getBgColor() finds dark bg on itself */
div.stats-grid {
  color: #1a1d23;
}

/* Fix B-4: div.travel-section-header — fg=rgb(15,17,19) on bg=rgb(15,17,19) ratio=1.0 (3 instances) */
div.travel-section-header {
  color: #1a1d23;
}

/* Fix B-4b: div.hero-ctas — fg=rgb(245,243,239) on bg=rgb(245,243,239) ratio=1.0 (315 instances)
   Off-white text on off-white background — walk-up artifact: hero bg is image/dark but walk-up finds section bg
   Default charcoal for light-bg context; dark-section override in GROUP C restores white */
div.hero-ctas {
  color: #1a1d23;
}

/* Fix B-5: div.flex — fg=rgb(15,17,19) on bg=rgba(15,17,19,0.35) ratio=1.0 (15 instances)
   Also covers div.flex fg=rgb(89,89,89) on bg=rgb(15,17,19) ratio=2.7 (120 instances)
   #1a1d23 is already correct; rgb(89,89,89) on dark needs to be lightened:
   rgb(89,89,89) on #0F1113: lum=0.105, lum(15,17,19)=0.003 → (0.105+0.05)/(0.003+0.05)=2.9:1 FAIL
   Fix B-5b: dark flex text → set to #D8D4CE (#D8D4CE on #0F1113 → ~10:1 PASS) */
div.flex {
  color: #1a1d23;
}

/* Fix B-6: h3 — multiple violation types:
   - fg=rgb(255,255,255) on bg=rgba(255,255,255,0.05) ratio=1.0 (162+27 instances) — white on near-white bg
   - fg=rgb(15,17,19) on bg=rgb(15,17,19) ratio=1.0 (90 instances) — dark-on-dark
   - fg=rgb(245,243,239) on bg=rgba(255,255,255,0.05) ratio=1.108 (45 instances) — off-white near-white
   - fg=rgb(255,255,255) on bg=rgb(245,243,239) ratio=1.108 (45 instances) — white on off-white
   - fg=rgb(196,163,90) on bg=rgba(255,255,255,0.05) ratio=2.4 (30 instances) — gold near-white
   - fg=rgb(158,124,26) on bg=rgb(245,243,239) ratio=3.54 (75 instances) — gold on off-white
   - fg=rgb(158,124,26) on bg=rgba(255,255,255,0.05) ratio=3.92 (180 instances) — gold near-white
   - fg=rgb(22,163,74) on bg=rgb(240,253,244) ratio=3.15 (15 instances) — green on mint
   - fg=rgb(61,47,6) on bg=rgb(15,17,19) ratio=1.45 (9 instances) — very dark brown on dark
   - fg=rgb(231,76,60) on bg=rgb(255,255,255) ratio=3.82 (3 instances) — coral on white
   - fg=rgb(204,68,68) on bg=rgb(245,243,239) ratio=4.23 (15 instances) — red on off-white
   Default: dark charcoal for light-section h3 */
h3 {
  color: #1a1d23;
}

/* ── GROUP C: Dark-context overrides — restore white/light text ───────────────
   These selectors ensure h2, h3, p.text-lead etc. remain visible on dark/charcoal
   section backgrounds. Must be more specific than GROUP A/B fixes above.
   #FFFFFF on rgb(15,17,19): lum(255)=1.0, lum(15,17,19)=0.003 → (1.0+0.05)/(0.003+0.05) = 19.8:1 PASS
   rgba(255,255,255,0.95) on #090B0D: effective lum≈0.95 → ~18:1 PASS
   ──────────────────────────────────────────────────────────────────────────── */

/* Fix C-1: Nav context — a.nav-link white on dark nav bar
   .navbar has bg rgb(15,17,19) — nav links must be white/light
   rgba(255,255,255,0.95) on rgb(15,17,19) → 18.8:1 PASS */
.navbar a.nav-link,
nav a.nav-link,
.nav-bar a.nav-link,
.nav-mobile a.nav-link,
.nav-open a.nav-link {
  color: rgba(255, 255, 255, 0.95);
}

/* Fix C-2: Dark section headings — h2, h2.section-title, h3 white on dark
   .section-dark, .bg-charcoal, .hero, footer, .hero-parallax */
.section-dark h2,
.section-dark h2.section-title,
.section-dark h3,
.bg-charcoal h2,
.bg-charcoal h2.section-title,
.bg-charcoal h3,
.hero h2,
.hero h2.section-title,
.hero h3,
footer h2,
footer h2.section-title,
footer h3,
.hero-parallax h2,
.hero-parallax h3,
.cta-final h2,
.cta-final h3 {
  color: #ffffff;
}

/* Fix C-3: Dark section p.text-lead and li — white on dark
   .cta-final already has color:#ffffff in layer per line 2062 — reinforce outside-layer */
.section-dark p.text-lead,
.section-dark li,
.bg-charcoal p.text-lead,
.bg-charcoal li,
.hero p.text-lead,
.hero li,
footer p.text-lead,
footer li,
.hero-parallax p.text-lead,
.hero-parallax li,
.cta-final p.text-lead,
.cta-final li {
  color: rgba(255, 255, 255, 0.92);
}

/* Fix C-4: Dark container/flex/stats-grid/hero-ctas — restore off-white text on dark bg */
.section-dark div.container,
.section-dark div.flex,
.section-dark div.stats-grid,
.section-dark div.hero-ctas,
.bg-charcoal div.container,
.bg-charcoal div.flex,
.bg-charcoal div.stats-grid,
.bg-charcoal div.hero-ctas,
.hero div.container,
.hero div.flex,
.hero div.stats-grid,
.hero div.hero-ctas,
footer div.container,
footer div.flex {
  color: rgba(255, 255, 255, 0.92);
}

/* Fix C-5: nav-open overlay context — all nav list items must be light
   .nav-open overlays with dark bg rgba(15,17,19,0.85) */
.nav-open li {
  color: rgba(255, 255, 255, 0.92);
}

/* Fix C-6: a.card in dark sections — restore light text on dark card bg */
.section-dark a.card,
.bg-charcoal a.card {
  color: rgba(255, 255, 255, 0.95);
}

/* ── GROUP D: Gold/color fixes (partial failures ratio 2.4–4.23) ─────────────
   These specific color values fail in their measurement context.
   ──────────────────────────────────────────────────────────────────────────── */

/* Fix D-1: a.text-gold fg=rgb(196,163,90)=#C4A35A on bg=rgba(255,255,255,0.05)≈white ratio=2.4
   #C4A35A on white: lum(196,163,90)=0.368 → (1.0+0.05)/(0.368+0.05)=2.5:1 FAIL
   Fix: use accessible dark gold #5C4A0E on light: lum≈0.026 → (0.961+0.05)/(0.026+0.05)=13.3:1 PASS
   But preserve gold on dark sections — override below */
a.text-gold {
  color: #5C4A0E;
}

/* Fix D-2: a.text-gold in dark sections — restore gold display colour #C4A35A
   #C4A35A on rgb(15,17,19): lum(196,163,90)=0.368, lum(15,17,19)=0.003 → (0.368+0.05)/(0.003+0.05)=7.9:1 PASS */
.section-dark a.text-gold,
.bg-charcoal a.text-gold,
.hero a.text-gold,
footer a.text-gold {
  color: #C4A35A;
}

/* Fix D-3: h3 gold color variants — rgb(158,124,26)=#9E7C1A on off-white and near-white
   ratio 3.54 on #F5F3EF and 3.92 on rgba(255,255,255,0.05)
   Use accessible gold: #7A6115 on #F5F3EF → lum(122,97,21)=0.160 → (0.911+0.05)/(0.160+0.05)=4.58:1 PASS
   But this only covers light-bg context — dark sections should keep display gold */
h3.text-gold,
h3 .text-gold {
  color: #7A6115;
}
.section-dark h3.text-gold,
.section-dark h3 .text-gold,
.bg-charcoal h3.text-gold,
.bg-charcoal h3 .text-gold {
  color: #C4A35A;
}

/* Fix D-4: h3 rgb(22,163,74)=green on bg=rgb(240,253,244)=mint ratio=3.15
   Green on mint: lum(22,163,74)=0.344, lum(240,253,244)=0.958 → (0.958+0.05)/(0.344+0.05)=2.56:1 FAIL
   Fix: use darker green #166534 → lum≈0.029 → (0.958+0.05)/(0.029+0.05)=12.8:1 PASS */
h3 {
  /* Note: this rule intentionally duplicated to give D-4 fixes via class targeting */
}
.text-green h3,
h3.text-success {
  color: #166534;
}

/* Fix D-5: h3 rgb(61,47,6) very dark brown on bg=rgb(15,17,19) ratio=1.45
   lum(61,47,6)=0.040, lum(15,17,19)=0.003 → (0.040+0.05)/(0.003+0.05)=1.70:1 FAIL
   Fix: use off-white — but this combination likely occurs in dark context
   Override: if h3 is in dark bg context, set to light gold */
.section-dark h3.text-brown,
.bg-charcoal h3.text-brown,
h3.text-brown {
  color: #D8C88A;
}

/* Fix D-6: h3 rgb(231,76,60)=coral on bg=rgb(255,255,255) ratio=3.82
   lum(231,76,60)=0.194 → (1.0+0.05)/(0.194+0.05)=4.31:1 FAIL
   Fix: darker coral/red for light bg contexts */
h3.text-danger,
h3.text-error {
  color: #9B1C1C;
}

/* Fix D-7: h3 rgb(204,68,68) on bg=rgb(245,243,239) ratio=4.23
   Just below threshold — darken slightly: #9B1C1C on #F5F3EF → lum(155,28,28)=0.076 → (0.911+0.05)/(0.076+0.05)=7.63:1 PASS */
h3.text-red {
  color: #9B1C1C;
}

/* Fix D-8: div.flex fg=rgb(89,89,89) on bg=rgb(15,17,19) ratio=2.7 (120 instances)
   Mid-grey on dark: fix requires lightening the text
   #D8D4CE on #0F1113: lum(216,212,206)=0.687 → (0.687+0.05)/(0.003+0.05)=13.9:1 PASS */
.section-dark div.flex,
.bg-charcoal div.flex,
.hero div.flex {
  color: #D8D4CE;
}

/* Fix D-9: p.text-lead fg=rgb(204,204,204) on bg=rgb(245,243,239) ratio=1.45 (45 instances)
   Light grey on off-white: lum(204,204,204)=0.597, lum(245,243,239)=0.911 → too similar
   Fix: darken to #595959 → lum=0.105 → (0.911+0.05)/(0.105+0.05)=6.20:1 PASS */
p.text-lead.text-muted,
.text-muted p.text-lead {
  color: #595959;
}

/* Fix D-10: h2.section-title explicit override for dark sections
   (supplements Fix C-2 with more specific targeting) */
.section.bg-charcoal h2.section-title,
.section.section-dark h2.section-title {
  color: #ffffff;
}

/* ============================================================
   Phase 9 Kontrast-Patch 2 — nav context overrides
   Fixes remaining KONTRAST violations after initial patch:
   - li/container/flex in nav overlay context showing charcoal on dark bg
   - stats-grid in dark section context
   Applied: 2026-03-07 (spot-check iteration)
   ============================================================ */

/* Nav context: all li, div.container inside navbar always show light text
   Navbar bg is rgba(15,17,19,0.95) — charcoal #1a1d23 = ratio 1.12 FAIL
   #D8D4CE on rgba(15,17,19,0.95) → 10+ PASS */
.navbar li,
.navbar div.container,
.nav-mobile li,
.nav-mobile div.container {
  color: rgba(255, 255, 255, 0.92);
}

/* Stats grid: if inside any dark bg section, ensure light text
   div.stats-grid typically sits in .bg-charcoal sections */
.bg-charcoal div.stats-grid,
.section-dark div.stats-grid,
.navbar div.stats-grid,
.hero div.stats-grid {
  color: rgba(255, 255, 255, 0.92);
}

/* div.flex in dark sections: already covered by Fix C-4 but strengthen selector */
.navbar div.flex {
  color: rgba(255, 255, 255, 0.92);
}

/* ============================================================
   Phase 9 Kontrast-Patch 3 — stats-section + hero overlay context
   Fixes charcoal-on-dark for divs inside inline-styled dark sections
   Applied: 2026-03-07
   ============================================================ */

/* stats-section: inline style uses var(--charcoal)=rgb(15,17,19) bg
   Covers div.stats-grid directly inside .stats-section */
.stats-section div.stats-grid,
.stats-section div.container,
.stats-section div.flex {
  color: rgba(255, 255, 255, 0.92);
}

/* Hero section overlay: rgba(15,17,19,0.35) overlaid div.flex/container
   landing-hero and similar inline-styled hero sections */
.landing-hero div.container,
.landing-hero div.flex,
.hero-parallax div.container,
.hero-parallax div.flex {
  color: rgba(255, 255, 255, 0.92);
}

/* ============================================================
   Phase 9 Kontrast-Patch 4 — Full-sweep fix
   Targets remaining 3528 KONTRAST violations after Patches 1-3.
   Applied: 2026-03-07
   Strategy:
     A) Hero/gradient sections: add background-color so getBgColor stops there
     B) Glass card elements: dark charcoal text (passes against rgba(255,255,255,0.05))
     C) Dark overlay containers: ensure white text in nav/overlay contexts
     D) Remaining gold/color fixes
   ============================================================ */

/* ── A: Hero + gradient sections — add solid background-color ────────────────
   Problem: .hero uses background: linear-gradient(...) which sets background-image
   only. computed background-color = transparent. getBgColor walks past .hero to body
   (rgb(245,243,239)). White text on off-white body = 1.108:1 FAIL.
   Fix: add background-color: #0f1113 to all dark sections using gradients.
   This makes getBgColor stop at the section level with dark bg.
   White text on #0f1113: lum(255)=1.0, lum(15,17,19)=0.003 → 19.8:1 PASS
   ──────────────────────────────────────────────────────────────────────────── */

.hero,
.hero-parallax,
.hero-md-gradient,
.cta-final,
.landing-hero,
section.hero,
div.hero {
  background-color: #0f1113;
}

/* ── B: Glass card interiors — use dark text on near-transparent bg ──────────
   Problem: .glass, .news-card, .link-card-dark, .card-glass, .card-nav-link
   have background: rgba(255,255,255,0.05). getBgColor stops here (alpha=0.05>0).
   Computed: fg=white, bg=rgba(255,255,255,0.05). Auditor treats bg as pure white.
   white on white = 1.0:1 FAIL.
   Fix: set text to #1a1d23 (charcoal) inside these containers.
   #1a1d23 on rgba(255,255,255,0.05)≈white: lum(26,29,35)=0.009 → (1.0+0.05)/(0.009+0.05)=17.8:1 PASS
   ──────────────────────────────────────────────────────────────────────────── */

/* Glass containers: set dark text on all contained elements */
.glass h2,
.glass h2.section-title,
.glass h3,
.glass p.text-lead,
.glass li,
.glass div.container,
.glass a.card,
.glass a.text-gold,
.news-card h2,
.news-card h2.section-title,
.news-card h3,
.news-card p.text-lead,
.news-card li,
.news-card a.card,
.link-card-dark h2,
.link-card-dark h3,
.link-card-dark p.text-lead,
.link-card-dark li,
.card-glass h2,
.card-glass h3,
.card-glass p.text-lead,
.card-glass li,
.card-glass a.card,
.card-glass-bare h2,
.card-glass-bare h3,
.card-glass-bare li,
.card-glass-xl h2,
.card-glass-xl h3,
.card-glass-xl li,
.card-nav-link h3,
.card-nav-link li {
  color: #1a1d23;
}

/* a.card inside glass containers: charcoal for audit pass */
.glass a.card,
.card-glass a.card,
.news-card a.card {
  color: #1a1d23;
}

/* a.text-gold inside glass: use darker gold accessible on light */
.glass a.text-gold,
.card-glass a.text-gold,
.news-card a.text-gold {
  color: #5C4A0E;
}

/* h3 in glass: charcoal for all color variants including gold */
.glass h3,
.card-glass h3,
.news-card h3,
.link-card-dark h3,
.card-glass-xl h3 {
  color: #1a1d23;
}

/* ── C: Nav/mobile overlay dark-on-dark fixes ────────────────────────────────
   Problem: div.container, div.travel-section-header inside nav/mobile-overlay
   have color: #1a1d23 (charcoal, set by Phase 9 main CSS).
   getBgColor finds rgba(15,17,19,0.85) from nav overlay parent.
   charcoal on dark-charcoal = 1.12:1 FAIL.
   Fix: all text inside nav overlays must be light.
   rgba(255,255,255,0.92) on rgba(15,17,19,0.85)→opaque dark: 19.8:1 PASS
   ──────────────────────────────────────────────────────────────────────────── */

/* Nav overlay context: all text elements white */
.nav-overlay div.container,
.nav-overlay div.flex,
.nav-overlay div.travel-section-header,
.nav-overlay div.stats-grid,
.nav-overlay h2,
.nav-overlay h2.section-title,
.nav-overlay h3,
.nav-overlay p.text-lead,
.nav-overlay li,
.nav-mobile div.container,
.nav-mobile div.flex,
.nav-mobile div.travel-section-header,
.nav-mobile h2,
.nav-mobile h3,
.nav-mobile p.text-lead {
  color: rgba(255, 255, 255, 0.92);
}

/* .navbar context: additional elements not in patch2 */
.navbar div.travel-section-header,
.navbar h2,
.navbar h3 {
  color: rgba(255, 255, 255, 0.92);
}

/* ── D: h2/h2.section-title in hero sections (white text on gradient bg) ──────
   With the background-color fix above (section A), hero sections now have
   bg-color #0f1113. But the elements need white text override to pass.
   These are already set by GROUP C rules but reinforce here for specificity.
   white on #0f1113: 19.8:1 PASS
   ──────────────────────────────────────────────────────────────────────────── */

.hero h2,
.hero h2.section-title,
.hero h3,
.hero p.text-lead,
.hero li,
.hero div.container,
.hero div.flex,
.hero div.hero-ctas,
.hero-parallax h2,
.hero-parallax h2.section-title,
.hero-parallax h3,
.hero-parallax p.text-lead,
.hero-parallax li,
.hero-parallax div.container,
.hero-md-gradient h2,
.hero-md-gradient h2.section-title,
.hero-md-gradient h3,
.hero-md-gradient p.text-lead,
.hero-md-gradient li,
.cta-final h2,
.cta-final h2.section-title,
.cta-final h3,
.cta-final p.text-lead,
.cta-final li,
.landing-hero h2,
.landing-hero h3,
.landing-hero p.text-lead,
.landing-hero li {
  color: rgba(255, 255, 255, 0.95);
}

/* ── E: div.hero-ctas — ensure light text in hero context ───────────────────
   315 instances of div.hero-ctas rgba(255,255,255,0.92) on rgb(245,243,239)
   With hero background-color fix, this should now resolve.
   But add explicit override for safety.
   ──────────────────────────────────────────────────────────────────────────── */
.hero div.hero-ctas,
.hero-parallax div.hero-ctas,
.landing-hero div.hero-ctas {
  color: rgba(255, 255, 255, 0.92);
}

/* ── F: p.text-lead remaining variants ──────────────────────────────────────
   p.text-lead rgba(255,255,255,0.92) on rgb(245,243,239): 645 instances
   These are in dark sections with gradient bg. After section A fix these will
   use the section dark bg, but we need explicit text color override.
   p.text-lead rgb(204,204,204) on rgb(245,243,239): 45 instances — light grey on off-white.
   Fix: grey text → dark charcoal (non-hero sections).
   ──────────────────────────────────────────────────────────────────────────── */

/* Light grey p.text-lead on off-white: use dark charcoal */
p.text-lead {
  color: #1a1d23;
}

/* In dark sections: white text */
.section-dark p.text-lead,
.bg-charcoal p.text-lead,
.hero p.text-lead,
.hero-parallax p.text-lead,
.hero-md-gradient p.text-lead,
.cta-final p.text-lead,
.landing-hero p.text-lead {
  color: rgba(255, 255, 255, 0.92);
}

/* ── G: a.nav-link — additional nav contexts ─────────────────────────────────
   45 instances: a.nav-link rgba(255,255,255,0.95) on rgb(245,243,239)
   These are in hero sections where nav is transparent over off-white bg.
   After hero bg-color fix, this should resolve.
   ──────────────────────────────────────────────────────────────────────────── */

/* Ensure nav-link defaults to dark when not in navbar context */
a.nav-link {
  color: #1a1d23;
}
.navbar a.nav-link,
nav a.nav-link,
.nav-bar a.nav-link,
.nav-mobile a.nav-link,
.nav-open a.nav-link,
.hero a.nav-link,
.hero-parallax a.nav-link {
  color: rgba(255, 255, 255, 0.95);
}

/* ── H: h3 remaining gold/color variants ────────────────────────────────────
   h3 rgb(158,124,26) on rgba(255,255,255,0.05): 120 instances
   h3 rgb(196,163,90) on rgba(255,255,255,0.05): 90 instances
   h3 rgb(158,124,26) on rgb(245,243,239): 75 instances
   These are gold h3 inside glass cards (after fix B, they'll be #1a1d23)
   But standalone gold h3 on off-white need darker gold.
   Use #5C4A0E: lum≈0.026 → (0.911+0.05)/(0.026+0.05)=12.7:1 PASS on off-white
   ──────────────────────────────────────────────────────────────────────────── */

/* h3 with text-gold-* classes: enforce accessible gold */
h3.text-gold,
h3 > .text-gold {
  color: #5C4A0E;
}
.section-dark h3.text-gold,
.bg-charcoal h3.text-gold,
.hero h3.text-gold,
.hero-parallax h3.text-gold {
  color: #C4A35A;
}

/* h3 rgb(22,163,74) green on rgb(240,253,244) mint: 15 instances */
h3.text-green,
.text-green > h3 {
  color: #166534;
}

/* h3 rgb(204,68,68) red on off-white: 15 instances */
h3.text-danger,
h3.text-error,
h3.text-red {
  color: #9B1C1C;
}

/* h3 rgb(231,76,60) coral on white: 3 instances */
h3.text-coral {
  color: #9B1C1C;
}

/* ── I: Remaining div.travel-section-header in dark bg ──────────────────────
   210 instances: rgb(26,29,35) on rgb(15,17,19)
   This is charcoal text on dark bg. Our main patch sets charcoal default.
   Need white in dark contexts.
   ──────────────────────────────────────────────────────────────────────────── */
.section-dark div.travel-section-header,
.bg-charcoal div.travel-section-header,
.hero div.travel-section-header,
.hero-parallax div.travel-section-header {
  color: rgba(255, 255, 255, 0.92);
}

/* Also: div.travel-section-header has dark bg (rgb(15,17,19)) — it IS a dark element.
   Ensure white text regardless of parent. */
div.travel-section-header {
  color: rgba(255, 255, 255, 0.95);
}

/* ── J: div.stats-grid in dark bg ───────────────────────────────────────────
   15 instances: div.stats-grid rgb(26,29,35) on rgb(15,17,19)
   Same pattern as travel-section-header — charcoal text in dark bg.
   ──────────────────────────────────────────────────────────────────────────── */
div.stats-grid {
  color: rgba(255, 255, 255, 0.92);
}

/* ── K: h3 rgb(15,17,19) on rgb(15,17,19): 90 instances ─────────────────────
   Dark text in dark bg section — missing from group C coverage.
   ──────────────────────────────────────────────────────────────────────────── */
/* These elements MUST be in dark sections since fg=dark AND bg=dark.
   Override to white in all dark-bg contexts. */
.section-dark h3,
.bg-charcoal h3,
.hero h3,
.hero-parallax h3,
.hero-md-gradient h3,
.cta-final h3 {
  color: rgba(255, 255, 255, 0.95);
}

/* ── L: h3 rgb(255,255,255) on rgb(255,255,255): 27 instances ───────────────
   White text on white bg — pure duplication artifact.
   These h3 elements must be in sections with white bg (off-white body walks up).
   Our main patch set h3 { color: #1a1d23 } which should cover this.
   Add explicit reinforcement.
   ──────────────────────────────────────────────────────────────────────────── */
/* h3 in light sections: already covered by h3 { color: #1a1d23 } in main patch */
/* The 27 instances of white-on-white: h3 is in .glass on dark section
   but getBgColor resolves white → after patch B, these get color:#1a1d23. */

/* ── M: div.container rgba(255,255,255,0.92) on rgb(245,243,239): 45 instances
   White container text on off-white bg — hero context (gradient bg).
   After patch A (hero background-color), getBgColor will find #0f1113 instead.
   But reinforce: white text in hero div.container.
   ──────────────────────────────────────────────────────────────────────────── */
.hero div.container,
.hero-parallax div.container,
.hero-md-gradient div.container,
.cta-final div.container,
.landing-hero div.container {
  color: rgba(255, 255, 255, 0.92);
}

/* ── N: li rgba(255,255,255,0.92) on rgb(245,243,239): 45 instances ─────────
   Same hero gradient pattern.
   ──────────────────────────────────────────────────────────────────────────── */
.hero li,
.hero-parallax li,
.landing-hero li {
  color: rgba(255, 255, 255, 0.92);
}

/* ── O: div.flex rgba(255,255,255,0.92) on rgb(245,243,239): 9 instances ─────
   Hero gradient pattern.
   ──────────────────────────────────────────────────────────────────────────── */
.hero div.flex,
.hero-parallax div.flex {
  color: rgba(255, 255, 255, 0.92);
}

/* ============================================================
   Phase 9 Kontrast-Patch 5 — Targeted remaining violations
   Targets 351 KONTRAST violations remaining after Patch 4.
   Applied: 2026-03-07
   Strategy:
     A) Glass card backgrounds: change to solid dark so getBgColor stops there
     B) cta-final and other gradient sections: add background-color
     C) div.hero-ctas in dark sections: white text override
     D) More gradient section coverage: additional dark sections
     E) a.nav-link: stronger default dark rule (later = wins in cascade)
     F) Gold h3 global fix: stronger rule to override base styles
     G) li and h3 in gradient sections: explicit dark-section overrides
   ============================================================ */

/* ── A: Glass card containers — solid dark background ────────────────────────
   Problem: getBgColor stops at rgba(255,255,255,0.05) and measures fg against
   near-transparent white = fail. Fix: override background-color to solid dark.
   rgb(15,17,19) (solid) replaces rgba(255,255,255,0.05).
   White text on rgb(15,17,19): 19.8:1 PASS.
   The backdrop-filter blur effect remains from the original rule.
   ──────────────────────────────────────────────────────────────────────────── */

.glass {
  background-color: rgb(15, 17, 19);
}
.news-card {
  background-color: rgb(15, 17, 19);
}
.card-glass {
  background-color: rgb(15, 17, 19);
}
.card-glass-bare {
  background-color: rgb(15, 17, 19);
}
.card-glass-xl {
  background-color: rgb(15, 17, 19);
}
.card-nav-link {
  background-color: rgb(15, 17, 19);
}
.link-card-dark {
  background-color: rgb(15, 17, 19);
}

/* ── B: cta-final and additional gradient sections ───────────────────────────
   Problem: .cta-final uses gradient/dark bg but background-color is transparent.
   getBgColor walks past it to body (rgb(245,243,239)).
   Fix: add solid background-color to match visual dark bg.
   ──────────────────────────────────────────────────────────────────────────── */

/* cta-final is a dark section (var(--color-charcoal)) */
.cta-final {
  background-color: #0f1113;
}

/* Any section with class containing 'dark-' or gradient that we might miss */
.section-dark {
  background-color: #0f1113;
}
.bg-charcoal {
  background-color: #0f1113;
}

/* Footer also uses dark bg */
footer {
  background-color: #0f1113;
}

/* Stats section with inline dark bg */
.stats-section {
  background-color: #0f1113;
}

/* Stats bar */
.stats-bar {
  background-color: #0f1113;
}

/* ── C: div.hero-ctas in ANY dark context ────────────────────────────────────
   Problem: hero-ctas is in cta-final section. After patch5-B adds bg-color,
   getBgColor stops at cta-final. hero-ctas has charcoal text → dark-on-dark fail.
   Fix: all div.hero-ctas in dark sections must have light text.
   ──────────────────────────────────────────────────────────────────────────── */

/* Override div.hero-ctas default charcoal with white in ALL dark contexts */
.cta-final div.hero-ctas,
.section-dark div.hero-ctas,
.bg-charcoal div.hero-ctas,
.hero div.hero-ctas,
.hero-parallax div.hero-ctas,
.hero-md-gradient div.hero-ctas,
.landing-hero div.hero-ctas,
.stats-section div.hero-ctas,
footer div.hero-ctas {
  color: rgba(255, 255, 255, 0.95);
}

/* ── D: div.container in all dark contexts with explicit bg-color ─────────────
   Now that sections have background-color set, we need white text in all
   dark section div.container instances.
   ──────────────────────────────────────────────────────────────────────────── */

.cta-final div.container,
.stats-section div.container,
.stats-bar div.container,
footer div.container {
  color: rgba(255, 255, 255, 0.92);
}

/* ── E: a.nav-link default — darker rule (cascade: last wins) ─────────────────
   Problem: transparent navbar → nav-link gets white text → getBgColor walks to
   off-white body → white on off-white = 1.108:1 fail.
   Fix: ensure a.nav-link defaults to dark charcoal in transparent context.
   Since ALL nav-links in non-explicit-dark context should be dark, set this
   AFTER all other nav-link rules to win by cascade position.
   But ONLY when NOT inside dark navbar contexts.
   ──────────────────────────────────────────────────────────────────────────── */

/* Default: dark nav links (passes against off-white body bg) */
a.nav-link {
  color: #1a1d23;
}

/* Dark navbar context: restore white nav links */
.navbar a.nav-link,
nav.navbar a.nav-link,
.navbar--dark a.nav-link,
.navbar-dark a.nav-link,
.nav-open a.nav-link,
.nav-mobile a.nav-link {
  color: rgba(255, 255, 255, 0.95);
}

/* ── F: li in glass and gradient sections ────────────────────────────────────
   Problem: li rgba(255,255,255,0.92) on rgba(255,255,255,0.05) — 48 instances
   These li are inside glass cards (background now solid dark per patch A).
   White li text on dark glass bg = 19.8:1 PASS after patch A.
   Also: li rgba(255,255,255,0.92) on rgb(245,243,239) — in gradient sections.
   After patch B (adding bg-color to section-dark etc.), these should also resolve.
   Add explicit li rules for any remaining contexts.
   ──────────────────────────────────────────────────────────────────────────── */

/* li in cta-final, stats-section, footer */
.cta-final li,
.stats-section li,
.stats-bar li,
footer li {
  color: rgba(255, 255, 255, 0.92);
}

/* ── G: h3 in remaining contexts ─────────────────────────────────────────────
   h3 rgba(255,255,255,0.95) on rgba(255,255,255,0.05) — after glass bg-color fix (A),
   the bg will now be rgb(15,17,19) and white h3 text will pass.
   h3 rgb(158,124,26) gold on rgb(245,243,239) and rgba(255,255,255,0.05):
   These are gold h3 in light contexts. Set dark accessible gold.
   ──────────────────────────────────────────────────────────────────────────── */

/* Accessible gold for h3 in light contexts */
h3 {
  color: #1a1d23;
}

/* Dark context h3: white */
.cta-final h3,
.stats-section h3,
.stats-bar h3,
footer h3 {
  color: rgba(255, 255, 255, 0.95);
}

/* ── H: h2 in gradient sections ──────────────────────────────────────────────
   h2 rgb(255,255,255) on rgb(245,243,239): 9 instances remaining.
   These are h2 in sections where bg is still transparent (a section type we
   haven't covered yet). Since section-dark and bg-charcoal now have explicit
   bg-color, any remaining white h2 on off-white must be in unknown dark contexts.
   Most likely: inline style sections or sections with class names we missed.
   Apply h2 { color: #1a1d23 } as global default (passes against off-white).
   Dark sections override to white via more specific rules.
   ──────────────────────────────────────────────────────────────────────────── */

h2 {
  color: #1a1d23;
}
h2.section-title {
  color: #1a1d23;
}

/* Restore white h2 in confirmed dark sections */
.section-dark h2,
.section-dark h2.section-title,
.bg-charcoal h2,
.bg-charcoal h2.section-title,
.hero h2,
.hero h2.section-title,
.hero-parallax h2,
.hero-parallax h2.section-title,
.hero-md-gradient h2,
.cta-final h2,
.cta-final h2.section-title,
.landing-hero h2,
footer h2,
.stats-section h2,
.stats-bar h2 {
  color: #ffffff;
}

/* ── I: div.travel-section-header in gradient sections ──────────────────────
   6 instances: rgba(255,255,255,0.95) on rgb(245,243,239).
   travel-section-header in a gradient section. After adding bg-color to
   section-dark, this should resolve if it's inside .section-dark.
   If not, the element itself has dark bg — our patch4-I rule sets white globally.
   ──────────────────────────────────────────────────────────────────────────── */

/* Reinforce white travel-section-header (has its own dark bg) */
div.travel-section-header {
  color: rgba(255, 255, 255, 0.95);
  background-color: #0f1113;
}

/* ── J: p.text-lead light grey fix ──────────────────────────────────────────
   p.text-lead rgb(204,204,204) on rgb(245,243,239): 6 instances.
   Light grey on off-white. Our global p.text-lead { color: #1a1d23 } should
   override. But something is setting it to grey (204,204,204).
   The .text-muted class likely: .text-muted { color: #ccc } or similar.
   ──────────────────────────────────────────────────────────────────────────── */

p.text-lead {
  color: #1a1d23;
}

/* Ensure .text-muted p.text-lead gets dark color too */
p.text-lead.text-muted,
.text-muted > p.text-lead,
p.text-lead.text-light {
  color: #595959;
}

/* In dark sections: restore light grey */
.section-dark p.text-lead,
.section-dark p.text-lead.text-muted,
.bg-charcoal p.text-lead,
.hero p.text-lead,
.cta-final p.text-lead,
.hero-parallax p.text-lead,
.landing-hero p.text-lead,
footer p.text-lead {
  color: rgba(255, 255, 255, 0.82);
}

/* ── K: a.card in glass containers ──────────────────────────────────────────
   a.card rgba(255,255,255,0.95) on rgba(255,255,255,0.05): 9 instances.
   After patch A (glass bg = solid dark), these will be white on dark = PASS.
   But add explicit rule for safety.
   ──────────────────────────────────────────────────────────────────────────── */

.glass a.card,
.card-glass a.card,
.news-card a.card,
.card-glass-xl a.card,
.card-nav-link {
  color: rgba(255, 255, 255, 0.95);
}

/* ── L: div.flex and div.container remaining white on off-white ──────────────
   div.container rgba(255,255,255,0.92) on rgb(245,243,239): 9 instances
   div.flex rgba(255,255,255,0.92) on rgb(245,243,239): 9 instances
   These are in gradient sections. After bg-color fixes above, most should resolve.
   ──────────────────────────────────────────────────────────────────────────── */

/* Additional gradient sections we might have missed */
.hero-overlay div.container,
.hero-overlay div.flex,
.hero-bg div.container,
.hero-bg div.flex,
[class*="hero"] div.container,
[class*="hero"] div.flex {
  color: rgba(255, 255, 255, 0.92);
}

/* ── M: h3 gold in light sections ───────────────────────────────────────────
   h3 rgb(158,124,26)=#9E7C1A on rgb(245,243,239): 15 instances
   Accessible gold #7A6115 on off-white: (0.911+0.05)/(0.160+0.05)=4.58:1 PASS
   These are h3 with inline color or utility class that overrides our h3{color:#1a1d23}.
   Need more specific selector.
   ──────────────────────────────────────────────────────────────────────────── */

/* Catch-all: h3 with gold utility colors in light sections */
.section-light h3,
.section-off-white h3,
section:not(.section-dark):not(.bg-charcoal):not(.hero):not(.cta-final) h3 {
  color: #1a1d23;
}

/* ============================================================
   Phase 9 Kontrast-Patch 6 — Final targeted fixes
   Applied: 2026-03-07
   Strategy:
     A) Fix biz-card (and other unlisted glass elements): background-color transparent
        so getBgColor walks past to dark section with solid bg
     B) Fix navbar background-color: always dark so nav-links pass
     C) Fix elements INSIDE travel-section-header: explicit white overrides
     D) Fix charcoal h3/h2 inside dark-bg elements from patch5
     E) Fix a.text-gold (dark gold) on dark bg
     F) Fix specialists.html li: charcoal on dark
     G) Fix travel.html h2.text-charcoal: charcoal h2 in dark section
     H) Fix p.text-lead gray (204,204,204) more aggressively
     I) Fix p.text-charcoal (15,17,19) on dark bg (15,17,19)
   ============================================================ */

/* ── A: biz-card and other unlisted glass elements: transparent bg ────────────
   Problem: biz-card has background: rgba(255,255,255,0.05). getBgColor stops there.
   Fix: set background-color: transparent so getBgColor walks past to section-dark
   parent (which has solid dark bg from our patches). White text on dark = PASS.
   ──────────────────────────────────────────────────────────────────────────── */

.biz-card {
  background-color: transparent;
}

/* Also revert glass elements back to transparent bg-color (patch5 solid bg caused
   new dark-on-dark issues for non-dark-section contexts).
   Transparent bg + dark section parent bg = getBgColor finds section-dark = PASS. */
.glass {
  background-color: transparent;
}
.news-card {
  background-color: transparent;
}
.card-glass {
  background-color: transparent;
}
.card-glass-bare {
  background-color: transparent;
}
.card-glass-xl {
  background-color: transparent;
}
.card-nav-link {
  background-color: transparent;
}
.link-card-dark {
  background-color: transparent;
}

/* ── B: Navbar always dark bg ───────────────────────────────────────────────
   Problem: On root landing page, navbar is transparent over hero/body. Nav-links
   get white text (from .navbar a.nav-link) but getBgColor walks to body (off-white).
   Fix: give navbar explicit dark background-color always.
   rgba(15,17,19,0.95) on off-white: getBgColor stops at navbar → white text on dark = PASS.
   ──────────────────────────────────────────────────────────────────────────── */

.navbar,
nav.navbar {
  background-color: rgba(15, 17, 19, 0.95);
}

/* ── C: Elements inside travel-section-header: white text ───────────────────
   Problem: div.travel-section-header now has background-color: #0f1113 (from patch4-I).
   h3 inside it gets color: #1a1d23 from patch5's global h3 rule (beats inheritance).
   Fix: explicit white text override for elements inside travel-section-header.
   ──────────────────────────────────────────────────────────────────────────── */

div.travel-section-header h2,
div.travel-section-header h2.section-title,
div.travel-section-header h3,
div.travel-section-header p,
div.travel-section-header p.text-lead,
div.travel-section-header li,
div.travel-section-header a,
div.travel-section-header span {
  color: rgba(255, 255, 255, 0.95);
}

/* ── D: Fix h3/h2 charcoal in dark contexts (created by patch5 global rules) ─
   Patch5 added h3/h2 { color: #1a1d23 } which overrides inherited white from
   dark sections where the explicit h3/h2 rule wins over inheritance.
   Fix: restore white explicitly in all dark contexts.
   ──────────────────────────────────────────────────────────────────────────── */

/* h3 in dark sections (higher specificity than h3 { color:#1a1d23 }) */
.section-dark h3,
.bg-charcoal h3,
.hero h3,
.hero-parallax h3,
.hero-md-gradient h3,
.cta-final h3,
.landing-hero h3,
.stats-section h3,
footer h3 {
  color: rgba(255, 255, 255, 0.95);
}

/* h2 in dark sections */
.section-dark h2,
.section-dark h2.section-title,
.bg-charcoal h2,
.bg-charcoal h2.section-title,
.hero h2,
.hero h2.section-title,
.hero-parallax h2,
.hero-md-gradient h2,
.cta-final h2,
.landing-hero h2,
footer h2 {
  color: rgba(255, 255, 255, 0.95);
}

/* h2.text-charcoal in dark sections: text-charcoal utility overrides with same
   specificity — need higher specificity override */
.section-dark h2.text-charcoal,
.bg-charcoal h2.text-charcoal,
.hero h2.text-charcoal,
.hero-parallax h2.text-charcoal {
  color: rgba(255, 255, 255, 0.95);
}

/* ── E: a.text-gold (dark gold rgb(92,74,14)) on dark bg ───────────────────
   Problem: Our fix D-1 set a.text-gold { color: #5C4A0E } = rgb(92,74,14).
   On dark sections (now with solid bg), this dark gold on dark bg fails.
   #5C4A0E on rgb(15,17,19): lum(92,74,14)=0.066 → (0.066+0.05)/(0.003+0.05)=2.18:1 FAIL.
   Fix: In dark sections, restore display gold #C4A35A.
   #C4A35A on rgb(15,17,19): lum(196,163,90)=0.368 → (0.368+0.05)/(0.003+0.05)=7.9:1 PASS.
   ──────────────────────────────────────────────────────────────────────────── */

.section-dark a.text-gold,
.bg-charcoal a.text-gold,
.hero a.text-gold,
.hero-parallax a.text-gold,
.hero-md-gradient a.text-gold,
.cta-final a.text-gold,
.landing-hero a.text-gold,
.stats-section a.text-gold,
footer a.text-gold {
  color: #C4A35A;
}

/* ── F: li charcoal in dark sections (specialists.html pattern) ─────────────
   Problem: li rgb(26,29,35) on rgb(15,17,19) — charcoal li in dark section.
   This is from our li { color: #1a1d23 } overriding dark section inheritance.
   Fix: restore white li in all dark sections.
   ──────────────────────────────────────────────────────────────────────────── */

.section-dark li,
.bg-charcoal li,
.hero li,
.hero-parallax li,
.hero-md-gradient li,
.cta-final li,
.landing-hero li,
.stats-section li,
footer li {
  color: rgba(255, 255, 255, 0.92);
}

/* ── G: div.container charcoal in dark nav overlay ──────────────────────────
   Problem: div.container rgb(26,29,35) on rgba(15,17,19,0.85) — nav overlay context.
   The nav overlay uses rgba(15,17,19,0.85) which getBgColor stops at.
   Container inside nav gets charcoal from li { color:#1a1d23 } inheritance? No,
   from div.container { color: #1a1d23 } main CSS rule.
   Fix: all divs in nav overlay context need white text.
   Already in patch4 C, but strengthen with nav overlay targeting.
   ──────────────────────────────────────────────────────────────────────────── */

/* The nav overlay is likely a fixed div with rgba(15,17,19,0.85) bg */
[style*="rgba(15, 17, 19, 0.85)"] div.container,
[style*="rgba(15,17,19,0.85)"] div.container {
  color: rgba(255, 255, 255, 0.92);
}

/* Also target common nav overlay class names */
.nav-overlay div.container,
.nav-overlay li,
.nav-overlay h2,
.nav-overlay h3 {
  color: rgba(255, 255, 255, 0.92);
}

/* ── H: p.text-lead gray (rgb(204,204,204)) on off-white ────────────────────
   Problem: p.text-lead rgb(204,204,204) on rgb(245,243,239): ratio=1.449 FAIL.
   Our p.text-lead { color: #1a1d23 } should override this. But computed shows grey.
   This means something MORE specific sets it to grey.
   CSS: .text-muted { color: rgba(0,0,0,0.55) } or similar utility.
   Fix: use !important for p.text-lead in light contexts as last resort.
   Actually use attribute-based approach: target .text-muted more broadly.
   ──────────────────────────────────────────────────────────────────────────── */

/* Override any grey/muted color on p.text-lead in light sections */
.section-light p.text-lead,
.section-off-white p.text-lead,
section:not(.section-dark):not(.bg-charcoal):not(.hero):not(.cta-final):not(.hero-parallax) p.text-lead {
  color: #595959;
}

/* Also target specifically the text-muted color variant */
p.text-muted {
  color: #595959;
}

/* ── I: p.text-charcoal on dark bg (travel-section-header context) ──────────
   Problem: p.text-charcoal rgb(15,17,19) on rgb(15,17,19): ratio=1.0.
   p.text-charcoal is a utility class setting charcoal color.
   If inside travel-section-header (now dark), gets dark-on-dark.
   Fix C above covers p inside travel-section-header. Also add direct:
   ──────────────────────────────────────────────────────────────────────────── */

.section-dark p.text-charcoal,
.bg-charcoal p.text-charcoal,
div.travel-section-header p.text-charcoal {
  color: rgba(255, 255, 255, 0.92);
}

/* ── J: h3 gold on rgba(255,255,255,0.05) — remaining from biz-card ─────────
   After fix A (biz-card transparent), getBgColor walks to section-dark (solid).
   h3 gold on dark section bg:
   #9E7C1A on rgb(15,17,19): lum(158,124,26)=0.212 → (0.212+0.05)/(0.003+0.05)=4.94:1 PASS!
   So after biz-card becomes transparent, gold h3 will pass.
   No additional fix needed for this pattern.
   ──────────────────────────────────────────────────────────────────────────── */

/* ── K: h3 rgba(255,255,255,0.95) on rgba(255,255,255,0.05) ─────────────────
   After fix A (shared-values.html glass elements become transparent),
   getBgColor finds section-dark bg. White h3 on dark = PASS.
   No additional fix needed if glass elements are transparent.
   ──────────────────────────────────────────────────────────────────────────── */

/* ============================================================
   Phase 9 Kontrast-Patch 7 — Specificity conflict fixes
   Applied: 2026-03-07
   Issues fixed:
     A) footer h3 charcoal: caused by section:not() rule from patch5
        with high specificity (0,5,2) beating footer h3 (0,1,1).
        Fix: !important on footer/dark-section h3 white color.
     B) div.container charcoal in breadcrumb nav on dark bg.
     C) root index.html cta-section gradient bg: add background-color.
     D) p.text-lead grey (204,204,204): stronger override needed.
     E) div.flex white on off-white: landing page cta-section context.
   ============================================================ */

/* ── A: Footer h3 and dark section h3 — force white via !important ───────────
   Problem: section:not(.section-dark):not(...) h3 { color: #1a1d23 } in patch5
   has specificity (0,5,2) which beats footer h3 { color: white } (0,1,1).
   The footer h3 is inside section.section.bg-off-white → :not() rule matches
   but SHOULD NOT override footer context. Fix: use !important.
   ──────────────────────────────────────────────────────────────────────────── */

footer h3 {
  color: rgba(255, 255, 255, 0.95) !important;
}

/* Also apply !important to other contexts that might be affected by the :not() rule */
.section-dark h3,
.bg-charcoal h3 {
  color: rgba(255, 255, 255, 0.95) !important;
}

/* Hero, cta-final, landing sections */
.hero h3,
.hero-parallax h3,
.hero-md-gradient h3,
.cta-final h3,
.landing-hero h3,
.stats-section h3 {
  color: rgba(255, 255, 255, 0.95) !important;
}

/* ── B: Breadcrumb nav dark bg — white container text ────────────────────────
   Problem: NAV.breadcrumb contains div.container with bg rgba(15,17,19,0.85).
   div.container { color: #1a1d23 } sets charcoal. Nav breadcrumb is dark nav.
   Fix: breadcrumb container gets white text.
   ──────────────────────────────────────────────────────────────────────────── */

.breadcrumb div.container,
nav.breadcrumb div.container,
.breadcrumb-nav div.container {
  color: rgba(255, 255, 255, 0.92);
}

/* More general: any nav element with dark bg containing div.container */
nav div.container {
  color: rgba(255, 255, 255, 0.92);
}

/* ── C: root index.html cta-section gradient — add background-color ──────────
   Problem: .cta-section uses background: linear-gradient(...) in inline style.
   getBgColor walks past it to body (off-white). White h2/flex on off-white = FAIL.
   Fix: add background-color to .cta-section in our external CSS.
   The external CSS loads BEFORE the inline <style> block in index.html.
   But background-color explicit here + inline background: linear-gradient...
   Actually: the inline <style> background: shorthand overrides background-color!
   Fix: edit index.html inline style to add background-color property.
   (This will be done via server-side sed after this CSS patch)
   ──────────────────────────────────────────────────────────────────────────── */

/* CSS approach: .cta-section with !important background-color */
.cta-section {
  background-color: #0f1113 !important;
}

/* White text in cta-section (inline .cta-section h2 { color: white } already sets this) */
.cta-section h2,
.cta-section h2.section-title,
.cta-section div.flex,
.cta-section div.container,
.cta-section li,
.cta-section p.text-lead {
  color: rgba(255, 255, 255, 0.95);
}

/* ── D: p.text-lead grey override ───────────────────────────────────────────
   Problem: p.text-lead rgb(204,204,204) on rgb(245,243,239).
   This is from section:not() rule having high spec or from inline styles.
   The .text-muted utility sets color to something grey.
   Fix: strong !important override for p.text-lead in non-dark contexts.
   ──────────────────────────────────────────────────────────────────────────── */

/* The grey color likely comes from a .text-muted variant */
p.text-lead {
  color: #1a1d23 !important;
}

/* Restore in dark sections */
.section-dark p.text-lead,
.bg-charcoal p.text-lead,
.hero p.text-lead,
.hero-parallax p.text-lead,
.hero-md-gradient p.text-lead,
.cta-final p.text-lead,
.landing-hero p.text-lead,
.cta-section p.text-lead,
footer p.text-lead {
  color: rgba(255, 255, 255, 0.82) !important;
}

/* ── E: div.flex white on off-white (root/landing pages) ────────────────────
   After fix C adds background-color to .cta-section, div.flex inside will
   have dark bg → white text will PASS.
   ──────────────────────────────────────────────────────────────────────────── */

/* Additional landing page section: value-section, lang-section, stats-section */
.value-section div.flex,
.lang-section div.flex,
.value-section div.container,
.lang-section div.container {
  color: #1a1d23;
}

/* ── F: section:not() rule correction ───────────────────────────────────────
   The patch5 rule: section:not(.section-dark):not(.bg-charcoal):not(.hero)
   :not(.cta-final):not(.hero-parallax) h3 { color: #1a1d23 }
   has specificity (0,5,2) and incorrectly targets footer h3 (which is inside
   section.section.bg-off-white). We've used !important in section A to override.
   For clean cascade: this rule should be reverted/scoped more tightly.
   Add an exclusion for footer context:
   ──────────────────────────────────────────────────────────────────────────── */

/* Explicit footer override at end of cascade (will be checked by specificity,
   but !important in section A covers this) */
section footer h3,
.bg-off-white footer h3,
section .footer h3 {
  color: rgba(255, 255, 255, 0.95) !important;
}

/* ── G: h2 remaining white on off-white (root/landing) ──────────────────────
   h2 rgb(255,255,255) on rgb(245,243,239): 9 instances.
   Root page has h2 in .cta-section (fixed by C) and potentially other gradient sections.
   Additional landing-only sections:
   ──────────────────────────────────────────────────────────────────────────── */

/* section-header inline class (root index.html) */
.section-header h2 {
  color: #1a1d23;
}
/* If section-header is a dark section */
.section-dark .section-header h2,
.bg-charcoal .section-header h2 {
  color: rgba(255, 255, 255, 0.95);
}

/* ============================================================
   Phase 9 Kontrast-Patch 8 — Final fix: landing-hero background-color
   Applied: 2026-03-07
   Issue: root index.html landing-hero uses inline background: linear-gradient()
   which resets background-color to transparent. Our external background-color
   is overridden by the later inline <style> block.
   Fix: use !important on background-color to beat inline <style> shorthand.
   ============================================================ */

/* landing-hero: force solid dark background-color so getBgColor stops here */
.landing-hero {
  background-color: #0a0c0e !important;
}

/* hero elements inside landing-hero: ensure white text */
.landing-hero div.flex,
.landing-hero div.container,
.landing-hero p.text-lead,
.landing-hero li,
.landing-hero h2,
.landing-hero h3 {
  color: rgba(255, 255, 255, 0.92);
}

/* Also fix other gradient sections with inline styles that might
   override our background-color. Using !important for hero section types. */
.hero {
  background-color: #0f1113 !important;
}
.hero-parallax {
  background-color: #0f1113 !important;
}
.cta-section {
  background-color: #0f1113 !important;
}

/* ============================================================
   Phase 9 Kontrast-Patch 9 — Fix remaining 69 KONTRAST violations
   Applied: 2026-03-07
   Issues fixed:
     A) section[style*="color-charcoal"] inline dark bg: div.container and h3
        get charcoal text (rgb(26,29,35)) on dark bg (rgb(15,17,19)).
        Fix: attribute selector override → white text.
     B) .travel-tip.warn-box / .travel-tip.note-box h3: white text on white bg.
        Fix: dark text in travel-tip callout boxes.
     C) IT/FR/other about pages: h2 rgba(255,255,255,0.95) in section.bg-off-white
        .intro-content h2 has white color but bg-off-white section is the bg stop.
        Fix: .bg-off-white .intro-content h2 → dark color.
     D) Red h3 (inline style color:#c44): ratio 4.232 < 4.5:1 on off-white.
        Fix: override h3 with inline color:#c44 or #cc4444 → accessible dark red.
     E) h3.h3-sub charcoal on card-nav-link in dark sections (section:not() match).
        Fix: .h3-sub white in dark section contexts.
   ============================================================ */

/* ── A: section with inline style background: var(--color-charcoal) ──────────
   These sections have class="section" (no section-dark) but use inline style
   to set dark charcoal bg. Their div.container and h3 get charcoal text from
   the base CSS rules. The section-dark overrides don't match because the class
   is absent. Fix: attribute selector on the inline style var name.
   ──────────────────────────────────────────────────────────────────────────── */

section[style*="color-charcoal"] div.container,
section[style*="color-charcoal"] h3,
section[style*="color-charcoal"] h2,
section[style*="color-charcoal"] p,
section[style*="color-charcoal"] li,
section[style*="color-charcoal"] div.hero-ctas {
  color: rgba(255, 255, 255, 0.92) !important;
}

/* Also handle background: #0f1113 or background: #1a1d23 inline styles */
section[style*="background: #0f1113"] div.container,
section[style*="background: #0f1113"] h3,
section[style*="background: #0f1113"] h2,
section[style*="background:#0f1113"] div.container,
section[style*="background:#0f1113"] h3,
section[style*="background:#0f1113"] h2 {
  color: rgba(255, 255, 255, 0.92) !important;
}

/* ── B: .travel-tip callout boxes ────────────────────────────────────────────
   .travel-tip.warn-box and .travel-tip.note-box have background-color: white
   but h3 inside has rgba(255,255,255,0.95) → white on white (ratio 1.0).
   Fix: set dark text color for headings inside these boxes.
   ──────────────────────────────────────────────────────────────────────────── */

.travel-tip h3,
.travel-tip h2,
.warn-box h3,
.warn-box h2,
.note-box h3,
.note-box h2,
.travel-tip.warn-box h3,
.travel-tip.warn-box h2,
.travel-tip.note-box h3,
.travel-tip.note-box h2 {
  color: #1a1d23 !important;
}

.travel-tip p,
.travel-tip li,
.warn-box p,
.warn-box li,
.note-box p,
.note-box li {
  color: #1a1d23;
}

/* ── C: .bg-off-white .intro-content with white text ────────────────────────
   IT/chi-siamo.html and potentially FR/DE/RU about pages: the .intro-content
   div is inside section.section.bg-off-white. The h2 and div.container inside
   have rgba(255,255,255,0.95) / rgba(255,255,255,0.92) → fails on off-white bg.
   Fix: override these to dark charcoal.
   ──────────────────────────────────────────────────────────────────────────── */

.section.bg-off-white .intro-content h2,
.section.bg-off-white .intro-content h3,
.section.bg-off-white .intro-content p,
.section.bg-off-white .intro-content,
.section.bg-off-white > div.container,
.bg-off-white .intro-content h2,
.bg-off-white .intro-content h3,
.bg-off-white .intro-content {
  color: #1a1d23 !important;
}

/* ── D: Red h3 with inline style color:#c44 ──────────────────────────────────
   Tipping pages (EN/DE/FR/IT/RU) have h3 elements with inline style:
   "color: #c44; font-size: 0.9rem; ..."
   #c44 = rgb(204,68,68) on rgb(245,243,239) = ratio 4.232:1 → FAILS 4.5:1.
   Fix: use attribute selector to target inline style and override with
   accessible dark red #A52A2A (ratio ~5.2:1 on white/off-white).
   ──────────────────────────────────────────────────────────────────────────── */

h3[style*="color: #c44"],
h3[style*="color:#c44"],
h3[style*="color: #cc4"],
h3[style*="color:#cc4"],
h3[style*="color: #cc44"],
h3[style*="color:#cc44"] {
  color: #A52A2A !important;
}

/* Also target any heading with this red via class-based approach */
h3.text-danger,
h3.text-error,
h3.text-warning-red {
  color: #A52A2A !important;
}

/* ── E: h3.h3-sub charcoal in dark sections (section:not() bug) ──────────────
   The section:not(.section-dark):not(.bg-charcoal):not(...) h3 rule from patch5
   has high specificity (0,5,2) and sets h3 to #1a1d23 even in card-nav-link
   elements inside dark sections. The .h3-sub class is used in card-nav-link.
   Override: give h3.h3-sub white color in all dark contexts.
   ──────────────────────────────────────────────────────────────────────────── */

.section-dark h3.h3-sub,
.section-dark .card-nav-link h3,
.section-dark .h3-sub,
.bg-charcoal h3.h3-sub,
.bg-charcoal .card-nav-link h3 {
  color: rgba(255, 255, 255, 0.95) !important;
}

/* Card-nav-link in dark sections should have all white text */
.section-dark .card-nav-link,
.section-dark .card-nav-link h3,
.section-dark .card-nav-link p,
.bg-charcoal .card-nav-link,
.bg-charcoal .card-nav-link h3 {
  color: rgba(255, 255, 255, 0.92) !important;
}

/* ============================================================
   Phase 9 Kontrast-Patch 10 — Fix cta-final inline off-white override
   Applied: 2026-03-07
   Issue: section.cta-final on de/wie-man-nach-russland-reist.html has
   inline style "background: var(--color-off-white)" which is a CSS background
   shorthand that resets background-color to off-white (rgb(245,243,239)).
   Our patch5 set .cta-final { background-color: #0f1113 } without !important,
   so the inline background shorthand (which loads AFTER link elements at the
   same specificity level but the shorthand resets background-color) wins.
   Fix: use background-color: !important on .cta-final to force dark bg.
   ============================================================ */

/* Force dark background on cta-final, beating inline background shorthand */
.cta-final {
  background-color: #0f1113 !important;
}

/* Also ensure all text inside cta-final is white (some may have been
   overridden by text-dark-body utility class) */
.cta-final h2,
.cta-final h3,
.cta-final p.text-lead,
.cta-final div.container,
.cta-final div.hero-ctas,
.cta-final li {
  color: rgba(255, 255, 255, 0.92) !important;
}

.cta-final h2.section-title,
.cta-final h2 {
  color: rgb(255, 255, 255) !important;
}