:root {
  /* Base & Surfaces */
  --bg-cream: #F8FAFC;
  --bg-card: #FFFFFF;
  --bg-card-alt: #F1F6FA;
  --bg-banner: #E9F1F8;
  --bg-dark: #0F172A;

  /* Typography */
  --font-display: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;

  --text-main: #0F172A;
  --text-muted: #475569;
  --text-subtle: #64748B;

  /* Borders */
  --border-color: #DDE6EF;
  --border-darker: #C7D7E7;

  /* Core Slide Palette */
  --brand-blue: #2E5CA7;
  --brand-blue-hover: #234988;
  --brand-blue-subtle: rgba(46, 92, 167, 0.08);

  --accent-teal: #3EA19C;          
  --accent-teal-hover: #338581;
  --accent-teal-subtle: rgba(62, 161, 156, 0.12);

  --accent-crimson: #BA5D60;       
  --accent-crimson-hover: #9E4B4E;
  --accent-crimson-subtle: rgba(186, 93, 96, 0.12);

  --accent-sand: #D2A36B;          
  --accent-sand-hover: #B88952;
  --accent-sand-subtle: rgba(210, 163, 107, 0.14);

  --neutral-slate: #9BA3AF;
  --neutral-dark: #1E293B;
  --pill-bg: #E8F0FE;
}

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

html, body {
  background-color: var(--bg-cream); 
  color: var(--text-main); 
  font-family: var(--font-body); 
  line-height: 1.6; 
  -webkit-font-smoothing: antialiased; 
  -moz-osx-font-smoothing: grayscale; 
}

.site-wrapper {
  overflow-x: hidden;
}

/* Top Tricolor Brand Accent Line */
.top-accent-strip {
  height: 4px;
  width: 100%;
  background: linear-gradient(90deg, 
    var(--brand-blue) 0%, 
    var(--accent-teal) 35%, 
    var(--accent-sand) 70%, 
    var(--accent-crimson) 100%
  );
  position: sticky;
  top: 0;
  z-index: 1002;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: -0.03em;
  color: var(--text-main);
}
.kicker {
  font-family: var(--font-display);
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--brand-blue);
  margin-bottom: 0.75rem;
  display: block;
}

.kicker-teal { color: var(--accent-teal); }
.kicker-gold { color: var(--accent-sand); }
.kicker-white { color: #FFFFFF; }

.section-subtitle {
  font-size: 1.125rem;
  color: var(--text-muted);
  max-width: 760px;
  margin: 0 auto;
  font-weight: 400;
}

.container {
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 2rem;
}

/* Buttons */
.btn {
  font-family: var(--font-display);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.85rem 1.6rem;
  font-size: 0.92rem;
  font-weight: 600;
  letter-spacing: -0.01em; /* This was missing on sub-pages! */
  border-radius: 6px;
  text-decoration: none;
  transition: all 0.2s ease;
  cursor: pointer;
  white-space: nowrap; 
  flex-shrink: 0;
}

.btn-primary {
  background-color: var(--brand-blue);
  color: #FFFFFF;
  border: 1px solid var(--brand-blue);
}

.btn-primary:hover {
  background-color: var(--brand-blue-hover);
  box-shadow: 0 6px 18px rgba(46, 92, 167, 0.35);
  transform: translateY(-1px);
}

.btn-secondary {
  background-color: #FFFFFF;
  color: var(--text-main);
  border: 1px solid var(--border-color);
}

.btn-secondary:hover {
  background-color: var(--pill-bg);
  border-color: var(--border-darker);
}

.btn-teal {
  background-color: var(--accent-teal);
  color: #FFFFFF;
  border: 1px solid var(--accent-teal);
}

.btn-teal:hover {
  background-color: var(--accent-teal-hover);
  box-shadow: 0 6px 18px rgba(62, 161, 156, 0.35);
  transform: translateY(-1px);
}

.btn-hero-translucent {
  background-color: rgba(255, 255, 255, 0.1);
  color: #FFFFFF;
  border: 1px solid rgba(255, 255, 255, 0.35);
  backdrop-filter: blur(8px);
}

.btn-hero-translucent:hover {
  background-color: rgba(255, 255, 255, 0.22);
  border-color: rgba(255, 255, 255, 0.6);
  transform: translateY(-1px);
}
 /* Header & Navigation */
 header {
  position: sticky;
  top: 4px; /* Changed from 0 to sit below the strip */
  background-color: rgba(248, 250, 252, 0.95);
  backdrop-filter: blur(10px);
  z-index: 1000;
  border-bottom: 1px solid var(--border-color);
}

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

/* PURE TYPOGRAPHY LOGO */
.brand-wrap { 
  display: flex; 
  flex-direction: column; 
  text-decoration: none; 
  gap: 2px; 
}

.brand-name { 
  font-family: var(--font-display); 
  font-size: 1.65rem; 
  font-weight: 800; 
  color: var(--brand-blue); 
  letter-spacing: -0.04em; 
  line-height: 1;
  text-transform: uppercase;
  transition: font-size 0.3s ease;
}

.brand-name span { color: var(--accent-teal); }

/* Flat Navigation Links */
.nav-links { display: flex; align-items: center; gap: 0.5rem; list-style: none; }

.nav-links a { 
  text-decoration: none; 
  color: var(--text-muted); 
  font-size: 0.92rem; 
  font-weight: 500; 
  padding: 0.45rem 1rem; /* Creates the pill shape */
  border-radius: 20px; 
  transition: all 0.2s ease; 
}

/* Hover and Active states */
.nav-links a:hover, .nav-links a.active { 
  color: var(--brand-blue); 
  background-color: var(--brand-blue-subtle); 
}

/* Hamburger Button (Hidden on Desktop) */
.mobile-menu-toggle {
  display: none;
  flex-direction: column;
  justify-content: space-between;
  width: 28px;
  height: 20px;
  background: transparent;
  border: none;
  cursor: pointer;
  z-index: 1001;
}

.mobile-menu-toggle span {
  display: block;
  width: 100%;
  height: 3px;
  background-color: var(--brand-blue);
  border-radius: 3px;
  transition: all 0.3s ease;
}
   /* Full-Bleed Hero Section */
   .hero-fullscreen {
    position: relative;
    min-height: 84vh;
    display: flex;
    align-items: center;
    background-image: 
      linear-gradient(90deg, 
        rgba(10, 18, 34, 0.95) 0%, 
        rgba(10, 18, 34, 0.88) 45%, 
        rgba(10, 18, 34, 0.42) 75%, 
        rgba(10, 18, 34, 0.65) 100%
      ),
      url('assets/images/heros/website_homepage_hero_banner.webp');
    background-size: cover;
    background-position: center 30%;
    background-repeat: no-repeat;
    padding: 7rem 0 7.5rem;
    color: #FFFFFF;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  }

  .hero-content { max-width: 860px; }

  .hero-fullscreen .eyebrow-container {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 1.5rem;
    flex-wrap: wrap;
  }

  .eyebrow-badge {
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 0.4rem 0.8rem;
    border-radius: 4px;
    backdrop-filter: blur(6px);
  }

  .badge-gold-glass {
    background-color: rgba(210, 163, 107, 0.4);
    color: #FBE5C3;
    border: 1px solid rgba(251, 229, 195, 0.45);
  }

  .hero-fullscreen h1 {
    font-size: 4rem;
    line-height: 1.08;
    margin-bottom: 1.5rem;
    font-weight: 800;
    color: #FFFFFF;
    letter-spacing: -0.035em;
  }

  .hero-fullscreen h1 span {
    background: linear-gradient(90deg, #FFFFFF 30%, #8CE2DE 75%, #F8D5A3 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }

  .hero-subtitle-lead {
    font-size: 1.35rem;
    color: #E2E8F0;
    line-height: 1.55;
    margin-bottom: 1.25rem;
    font-weight: 500;
    letter-spacing: -0.01em;
    border-left: 3px solid var(--accent-sand);
    padding-left: 1rem;
  }

  .hero-paragraph-body {
    font-size: 1.05rem;
    color: #CBD5E1;
    margin-bottom: 2.5rem;
    line-height: 1.65;
    max-width: 680px;
  }

  .hero-cta-group {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
  }

  /* Metric Strip */
  .metric-strip {
    background: #FFFFFF;
    border-bottom: 1px solid var(--border-color);
    padding: 2.25rem 0;
  }

  .metric-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.5rem;
  }

  .metric-item { padding-left: 1.25rem; border-left: 3px solid transparent; }
  .metric-blue { border-color: var(--brand-blue); }
  .metric-teal { border-color: var(--accent-teal); }
  .metric-crimson { border-color: var(--accent-crimson); }
  .metric-gold { border-color: var(--accent-sand); }
  .metric-val { font-family: var(--font-display); font-size: 2rem; font-weight: 800; line-height: 1; margin-bottom: 0.35rem; }
  .val-blue { color: var(--brand-blue); }
  .val-teal { color: var(--accent-teal); }
  .val-crimson { color: var(--accent-crimson); }
  .val-gold { color: var(--accent-sand); }
  .metric-label { font-size: 0.8rem; font-weight: 600; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.05em; }

  .metric-footnote {
    font-size: 0.75rem;
    color: var(--text-subtle);
    text-align: right;
    margin-top: 1rem;
    font-style: italic;
  }

  /* USPs (The Advantage) */
  .usps { padding: 6rem 0; }
  .usp-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem; }
  .usp-card { background: var(--bg-card); border: 1px solid var(--border-color); border-top: 4px solid var(--brand-blue); padding: 2.25rem 1.6rem; border-radius: 8px; display: flex; flex-direction: column; transition: transform 0.2s ease, box-shadow 0.2s ease; }
  .usp-card:hover { transform: translateY(-4px); box-shadow: 0 12px 24px rgba(15, 23, 42, 0.06); }
  .card-theme-blue { border-top-color: var(--brand-blue); }
  .card-theme-teal { border-top-color: var(--accent-teal); }
  .card-theme-crimson { border-top-color: var(--accent-crimson); }
  .card-theme-gold { border-top-color: var(--accent-sand); }
  .pillar-icon-box { width: 54px; height: 54px; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; margin-bottom: 1.5rem; flex-shrink: 0; }
  .icon-box-blue { background: var(--brand-blue-subtle); color: var(--brand-blue); border: 1px solid rgba(46, 92, 167, 0.2); }
  .icon-box-teal { background: var(--accent-teal-subtle); color: var(--accent-teal); border: 1px solid rgba(62, 161, 156, 0.25); }
  .icon-box-crimson { background: var(--accent-crimson-subtle); color: var(--accent-crimson); border: 1px solid rgba(186, 93, 96, 0.25); }
  .icon-box-gold { background: var(--accent-sand-subtle); color: var(--accent-sand); border: 1px solid rgba(210, 163, 107, 0.25); }
  .pillar-icon-box svg { width: 26px; height: 26px; }
  .usp-card h3 { font-size: 1.25rem; line-height: 1.3; margin-bottom: 0.75rem; font-weight: 700; }
  .usp-card p { font-size: 0.88rem; color: var(--text-muted); line-height: 1.55; }

  /* Four-Phase Methodology Roadmap */
  .training-system { padding: 6rem 0; background-color: var(--bg-card-alt); border-top: 1px solid var(--border-color); border-bottom: 1px solid var(--border-color); }
  .phase-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.25rem; margin-bottom: 3.5rem; }
  .phase-card { background: #FFFFFF; border: 1px solid var(--border-color); padding: 1.85rem 1.6rem; border-radius: 8px; display: flex; flex-direction: column; position: relative; overflow: hidden; }
  .phase-card::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 4px; }
  .phase-1::before { background-color: var(--accent-teal); }
  .phase-2::before { background-color: var(--accent-crimson); }
  .phase-3::before { background-color: var(--accent-sand); }
  .phase-4::before { background-color: var(--brand-blue); }
  .phase-badge { font-family: var(--font-display); font-size: 0.72rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; margin-bottom: 0.4rem; }
  .badge-engage { color: var(--accent-teal); }
  .badge-learn { color: var(--accent-crimson); }
  .badge-develop { color: var(--accent-sand); }
  .badge-empower { color: var(--brand-blue); }
  .phase-sub { font-size: 0.68rem; font-weight: 700; letter-spacing: 0.06em; color: var(--text-subtle); margin-bottom: 1rem; text-transform: uppercase; }
  .phase-card h3 { font-size: 1.25rem; line-height: 1.25; margin-bottom: 0.65rem; font-weight: 700; }
  .phase-highlight { font-size: 0.78rem; font-weight: 600; color: var(--text-main); padding-bottom: 0.75rem; margin-bottom: 0.75rem; border-bottom: 1px solid var(--border-color); }
  .phase-card p { font-size: 0.85rem; color: var(--text-muted); line-height: 1.5; }

  /* Bottom Banner */
  .system-banner { background: var(--bg-banner); border: 1px solid var(--border-darker); border-left: 6px solid var(--brand-blue); padding: 3.25rem; border-radius: 8px; display: grid; grid-template-columns: 1.25fr 0.75fr; align-items: center; gap: 2.5rem; box-shadow: 0 6px 24px rgba(46, 92, 167, 0.04); position: relative; }
  .system-banner h3 { font-size: 2rem; color: var(--brand-blue); margin-bottom: 0.65rem; line-height: 1.2; font-weight: 800; }
  .system-banner p { color: var(--text-muted); font-size: 0.95rem; line-height: 1.55; }
  .banner-actions { display: flex; gap: 1rem; justify-content: flex-end; flex-wrap: wrap; }

  /* Social Proof & Testimonials */
  .social-proof {
    padding: 6rem 0;
    background-color: var(--bg-card);
  }
  
  .logo-strip-title {
    text-align: center;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-subtle);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-bottom: 2rem;
  }

  .logo-strip {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 4rem;
    flex-wrap: wrap;
    margin-bottom: 5rem;
  }

  .client-logo {
    height: 80px;
    width: auto;
    max-width: 160px;
    object-fit: contain;
    opacity: 1.0;
    transition: all 0.3s ease;
  }

  .client-logo:hover {
    opacity: 1;
    filter: grayscale(0%);
  }

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

  .testimonial-card {
    padding: 2.5rem;
    background: var(--bg-cream);
    border: 1px solid var(--border-color);
    border-radius: 8px;
  }

  .testimonial-quote {
    font-size: 1.1rem;
    font-style: italic;
    color: var(--text-muted);
    margin-bottom: 2rem;
    line-height: 1.6;
  }

  .author-info {
    display: flex;
    align-items: center;
    gap: 1rem;
  }

/* The parent container needs its exact dimensions */
.author-avatar {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: var(--border-darker);
  flex-shrink: 0; /* Prevents the circle from squishing on small screens */
}

/* The image scales perfectly inside the parent */
.author-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}

/* Modifier for wide/typographic logos to prevent cropping */
.author-avatar.avatar-contain {
  background-color: #FFFFFF; /* Overrides the dark default background */
}

.author-avatar.avatar-contain img {
  object-fit: contain;
  padding: 8px; /* Adds breathing room so the edges of the logo don't touch the circle bounds */
  border-radius: 0; /* Removes the image-level border-radius so the padding box isn't clipped */
}

  .author-details h4 {
    font-size: 1rem;
    margin: 0;
    color: var(--text-main);
  }

  .author-details span {
    font-size: 0.8rem;
    color: var(--text-subtle);
  }

  /* --- INDUSTRIES TEASER (Dark Theme) --- */
  .industries-teaser {
    padding: 6rem 0;
    background-color: var(--bg-dark);
    background-image: linear-gradient(135deg, rgba(15, 23, 42, 0.98) 0%, rgba(30, 41, 59, 0.95) 100%);
    color: #FFFFFF;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
  }
  
  .industries-teaser .section-header h2 { color: #FFFFFF; }
  .industries-teaser .section-subtitle { color: #CBD5E1; }
  .industries-teaser .kicker { color: var(--accent-sand); }

  .industries-grid { 
    display: grid; 
    grid-template-columns: repeat(4, 1fr); 
    gap: 1.5rem; 
    margin-bottom: 3.5rem; 
  }
  
  .industry-card { 
    background: rgba(255, 255, 255, 0.03); 
    border: 1px solid rgba(255, 255, 255, 0.1); 
    padding: 2.5rem 1.5rem; 
    border-radius: 8px; 
    display: flex; 
    flex-direction: column; 
    align-items: center;
    text-align: center;
    transition: all 0.3s ease; 
    backdrop-filter: blur(10px);
  }
  
  .industry-card:hover { 
    transform: translateY(-4px); 
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.2);
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.2); 
  }

  .industry-icon { 
    width: 56px; 
    height: 56px; 
    margin-bottom: 1.25rem; 
    display: inline-flex; 
    align-items: center; 
    justify-content: center; 
    border-radius: 8px; 
  }
  .icon-crimson-glass { background: rgba(186, 93, 96, 0.15); color: #E5878A; border: 1px solid rgba(186, 93, 96, 0.3); }
  .icon-teal-glass { background: rgba(62, 161, 156, 0.15); color: #5EEADF; border: 1px solid rgba(62, 161, 156, 0.3); }
  .icon-gold-glass { background: rgba(210, 163, 107, 0.15); color: #FBE5C3; border: 1px solid rgba(210, 163, 107, 0.3); }
  .icon-blue-glass { background: rgba(46, 92, 167, 0.2); color: #60A5FA; border: 1px solid rgba(46, 92, 167, 0.4); }
  
  .industry-icon svg { width: 28px; height: 28px; }
  .industry-card h3 { font-size: 1.2rem; line-height: 1.3; margin-bottom: 0.5rem; font-weight: 700; color: #FFFFFF; }
  .industry-card p { font-size: 0.88rem; color: #94A3B8; line-height: 1.5; margin-bottom: 0; }
  .industries-cta { text-align: center; }

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

  .leader-card {
    display: flex;
    gap: 2rem;
    align-items: flex-start;
    background: var(--bg-card);
    padding: 2.5rem;
    border-radius: 8px;
    border: 1px solid var(--border-color);
    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.02);
  }

  .leader-photo {
    width: 120px;
    height: 120px;
    border-radius: 8px;
    background: var(--border-darker);
    flex-shrink: 0;
    object-fit: cover;
  }

  .leader-info h3 {
    font-size: 1.5rem;
    color: var(--text-main);
    margin-bottom: 0.2rem;
  }

  .leader-info .title {
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--brand-blue);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 1rem;
    display: block;
  }

  .leader-info p {
    font-size: 0.9rem;
    color: var(--text-muted);
    line-height: 1.6;
    margin-bottom: 1.25rem;
  }

  .link-arrow {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--brand-blue);
    text-decoration: none;
  }
  .link-arrow:hover { text-decoration: underline; }

  /* Footer */
  .site-footer {
    background-color: var(--bg-dark);
    color: #F8FAFC;
    padding: 5rem 0 2rem;
  }

  .footer-grid {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr;
    gap: 3rem;
    margin-bottom: 4rem;
  }

  .footer-brand p {
    color: #9BA3AF;
    font-size: 0.9rem;
    max-width: 300px;
    margin-top: 1.5rem;
    line-height: 1.6;
  }

  .footer-heading {
    font-family: var(--font-display);
    font-size: 1.1rem;
    font-weight: 700;
    margin-bottom: 1.5rem;
    color: #FFFFFF;
  }

  .footer-links {
    list-style: none;
  }

  .footer-links li {
    margin-bottom: 0.85rem;
  }

  .footer-links a {
    color: #9BA3AF;
    text-decoration: none;
    font-size: 0.92rem;
    transition: color 0.2s;
  }

  .footer-links a:hover {
    color: var(--accent-teal);
  }

  .footer-bottom {
    border-top: 1px solid rgba(255,255,255,0.1);
    padding-top: 2rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.85rem;
    color: #64748B;
  }

  .footer-legal a {
    color: #64748B;
    text-decoration: none;
    margin-left: 1.5rem;
  }
  .footer-legal a:hover { color: #FFFFFF; }

 /* Subpage Hero Section */
 .hero-subpage {
  position: relative;
  padding: 6rem 0;
  background-color: var(--bg-dark);
  background-image: linear-gradient(90deg, rgba(15, 23, 42, 0.95) 0%, rgba(15, 23, 42, 0.7) 100%);
  color: #FFFFFF;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.hero-subpage h1 { font-size: 3.5rem; line-height: 1.1; margin-bottom: 1.25rem; font-weight: 800; color: #FFFFFF; max-width: 800px; }
.hero-subpage p { font-size: 1.2rem; color: #CBD5E1; line-height: 1.6; max-width: 680px; }

/* Breadcrumbs */
.breadcrumbs { font-size: 0.85rem; color: #94A3B8; margin-bottom: 1.5rem; }
.breadcrumbs a { color: #60A5FA; text-decoration: none; }
.breadcrumbs a:hover { text-decoration: underline; }

/* Solutions Layout */
.solutions-wrapper { padding: 6rem 0; }
.solutions-group { margin-bottom: 5rem; }
.solutions-group:last-child { margin-bottom: 0; }
.solutions-header { margin-bottom: 3rem; border-bottom: 1px solid var(--border-color); padding-bottom: 1.5rem; }
.solutions-header .section-subtitle {
  margin: 0;
}

.solutions-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2.5rem;
}

.solution-card {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  padding: 3rem 2.5rem;
  display: flex;
  flex-direction: column;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  position: relative;
  overflow: hidden;
}

.solution-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 32px rgba(15, 23, 42, 0.06);
}

.solution-card::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 5px; }
.card-ebt::before { background-color: var(--brand-blue); }
.card-cbta::before { background-color: var(--accent-teal); }
.card-ato-cbta::before { background-color: var(--accent-sand); }
.card-ato-mpl::before { background-color: var(--accent-crimson); }

.solution-icon { width: 48px; height: 48px; margin-bottom: 1.5rem; display: inline-flex; align-items: center; justify-content: center; border-radius: 8px; }
.icon-blue { background: var(--brand-blue-subtle); color: var(--brand-blue); }
.icon-teal { background: var(--accent-teal-subtle); color: var(--accent-teal); }
.icon-sand { background: var(--accent-sand-subtle); color: var(--accent-sand); }
.icon-crimson { background: var(--accent-crimson-subtle); color: var(--accent-crimson); }
.solution-icon svg { width: 24px; height: 24px; }

.solution-card h3 { font-size: 1.6rem; margin-bottom: 1rem; }
.solution-card p { font-size: 0.95rem; color: var(--text-muted); line-height: 1.6; margin-bottom: 2rem; flex-grow: 1; }

.link-arrow { font-size: 0.95rem; font-weight: 600; color: var(--brand-blue); text-decoration: none; display: inline-flex; align-items: center; gap: 0.5rem; }
.link-arrow:hover { text-decoration: underline; }

/* New Dark Roadmap Section */
.roadmap-section {
  padding: 6rem 0;
  background-color: var(--bg-dark);
  background-image: linear-gradient(135deg, rgba(15, 23, 42, 0.98) 0%, rgba(30, 41, 59, 0.95) 100%);
  color: #FFFFFF;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.roadmap-section .solutions-header {
  border-bottom: none;
  text-align: center;
  margin-bottom: 4rem;
  padding-bottom: 0;
}

.roadmap-section .solutions-header h2 { color: #FFFFFF; font-size: 2.5rem; }
.roadmap-section .solutions-header p { color: #CBD5E1; margin: 0 auto; }
.roadmap-section .kicker { color: var(--accent-sand); }

.phase-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.25rem; }

.roadmap-section .phase-card { 
  background: rgba(255, 255, 255, 0.03); 
  border: 1px solid rgba(255, 255, 255, 0.1); 
  padding: 2rem 1.6rem; 
  border-radius: 8px; 
  display: flex; 
  flex-direction: column; 
  position: relative; 
  overflow: hidden; 
  transition: all 0.3s ease; 
  backdrop-filter: blur(10px);
}

.roadmap-section .phase-card:hover { 
  transform: translateY(-4px); 
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.2);
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.2); 
}

.roadmap-section .phase-1::before { background-color: var(--accent-crimson); }
.roadmap-section .phase-2::before { background-color: var(--accent-sand); }
.roadmap-section .phase-3::before { background-color: var(--accent-teal); }
.roadmap-section .phase-4::before { background-color: var(--brand-blue); }

.roadmap-section .phase-badge { font-family: var(--font-display); font-size: 0.72rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; margin-bottom: 0.5rem; display: block; }
.roadmap-section .badge-engage { color: var(--accent-crimson); }
.roadmap-section .badge-learn { color: var(--accent-sand); }
.roadmap-section .badge-develop { color: var(--accent-teal); }
.roadmap-section .badge-empower { color: #60A5FA; /* Kept slightly brighter blue so it stays legible on the dark background */ }

.roadmap-section .phase-card h3 { font-size: 1.35rem; line-height: 1.25; margin-bottom: 0.75rem; font-weight: 700; color: #FFFFFF; }
.roadmap-section .phase-card p { font-size: 0.9rem; color: #94A3B8; line-height: 1.6; margin-bottom: 0; }

/* Bottom Banner */
.system-banner { background: var(--bg-banner); border: 1px solid var(--border-darker); border-left: 6px solid var(--brand-blue); padding: 3.25rem; border-radius: 8px; display: grid; grid-template-columns: 1.25fr 0.75fr; align-items: center; gap: 2.5rem; margin-top: 5rem; }
.system-banner h3 { font-size: 2rem; color: var(--brand-blue); margin-bottom: 0.65rem; line-height: 1.2; font-weight: 800; }
.system-banner p { color: var(--text-muted); font-size: 0.95rem; line-height: 1.55; }
.banner-actions { display: flex; gap: 1rem; justify-content: flex-end; flex-wrap: wrap; }

/* --- CASE STUDY SECTION --- */
.case-study-section {
  padding: 0 0 6rem 0; /* Flows naturally after the banner above it */
}

.case-study-card {
  display: grid;
  grid-template-columns: 1fr 1fr;
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 12px 30px rgba(15, 23, 42, 0.03);
}

.case-study-image {
  position: relative;
}

.case-study-image img {
  width: 100%;
  height: 100%;
  min-height: 450px;
  object-fit: cover;
  display: block;
}

.case-study-image::after {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: linear-gradient(90deg, rgba(15,23,42,0) 50%, rgba(15,23,42,0.1) 100%);
  pointer-events: none;
}

.case-study-content {
  padding: 4rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.case-study-content .kicker { margin-bottom: 1rem; }
.case-study-content h3 { font-size: 2.2rem; margin-bottom: 1.25rem; line-height: 1.1; }
.case-study-content p { font-size: 1.05rem; color: var(--text-muted); margin-bottom: 2.5rem; line-height: 1.6; }

.case-study-metrics {
  display: flex;
  gap: 3rem;
  border-top: 1px solid var(--border-color);
  padding-top: 2rem;
}

.cs-metric {
  display: flex;
  flex-direction: column;
}

.cs-metric h4 {
  font-size: 2.2rem;
  color: var(--brand-blue);
  margin-bottom: 0.25rem;
  line-height: 1;
}

.cs-metric span {
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-subtle);
}

 /* Courses Layout */
 .courses-wrapper { padding: 6rem 0; }
 .courses-header { margin-bottom: 3.5rem; text-align: center; }
 
 .courses-grid {
   display: grid;
   grid-template-columns: repeat(2, 1fr);
   gap: 2.5rem;
   margin-bottom: 5rem;
 }

 .course-card {
   background: var(--bg-card);
   border: 1px solid var(--border-color);
   border-radius: 8px;
   padding: 3rem 2.5rem;
   display: flex;
   flex-direction: column;
   transition: transform 0.2s ease, box-shadow 0.2s ease;
   position: relative;
   overflow: hidden;
 }
 
 .course-card:hover {
   transform: translateY(-4px);
   box-shadow: 0 16px 32px rgba(15, 23, 42, 0.06);
 }

 .course-card::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 5px; }
 .card-theme-blue::before { background-color: var(--brand-blue); }
 .card-theme-teal::before { background-color: var(--accent-teal); }
 .card-theme-crimson::before { background-color: var(--accent-crimson); }
 .card-theme-gold::before { background-color: var(--accent-sand); }

 /* BADGE SYSTEM UPDATE */
 .course-meta {
   display: flex;
   flex-wrap: wrap;
   gap: 0.5rem;
   align-items: center;
   margin-bottom: 1.5rem;
 }

 .course-badge {
   font-size: 0.7rem;
   font-weight: 700;
   letter-spacing: 0.08em;
   text-transform: uppercase;
   padding: 0.35rem 0.7rem;
   border-radius: 4px;
   border: 1px solid transparent;
 }

 .badge-default { background-color: var(--bg-card-alt); color: var(--text-muted); border-color: var(--border-color); }
 .badge-blue { background-color: var(--brand-blue-subtle); color: var(--brand-blue); border-color: rgba(46, 92, 167, 0.2); }
 .badge-teal { background-color: var(--accent-teal-subtle); color: var(--accent-teal); border-color: rgba(62, 161, 156, 0.25); }
 .badge-crimson { background-color: var(--accent-crimson-subtle); color: var(--accent-crimson); border-color: rgba(186, 93, 96, 0.25); }
 .badge-gold { background-color: var(--accent-sand-subtle); color: var(--accent-sand); border-color: rgba(210, 163, 107, 0.25); }

 .course-card h3 { font-size: 1.5rem; margin-bottom: 1rem; line-height: 1.3; }
 .course-card p { font-size: 0.95rem; color: var(--text-muted); line-height: 1.6; margin-bottom: 2rem; flex-grow: 1; }
 
 .link-arrow { font-size: 0.95rem; font-weight: 600; color: var(--brand-blue); text-decoration: none; display: inline-flex; align-items: center; gap: 0.5rem; }
 .link-arrow:hover { text-decoration: underline; }

/* Mobile responsiveness for the legend */
@media (max-width: 768px) {
  .unity-legend {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.75rem;
  }
}

 /* Modular Architecture Section */
 .modular-section {
   background-color: var(--bg-card);
   border: 1px solid var(--border-color);
   border-radius: 8px;
   padding: 3.5rem;
   margin-bottom: 5rem;
   display: grid;
   grid-template-columns: 1fr 1.2fr;
   gap: 4rem;
   align-items: center;
   box-shadow: 0 12px 30px rgba(15, 23, 42, 0.02);
 }

 .modular-content h3 {
   font-size: 2.2rem;
   margin-bottom: 1.25rem;
   line-height: 1.2;
 }

 .modular-content p {
   color: var(--text-muted);
   margin-bottom: 1rem;
   font-size: 1rem;
 }

 .credit-example-card {
   background: var(--bg-card-alt);
   border: 1px solid var(--border-color);
   border-radius: 8px;
   padding: 2rem;
 }

 .credit-header {
   display: flex;
   justify-content: space-between;
   align-items: center;
   margin-bottom: 2rem;
   padding-bottom: 1rem;
   border-bottom: 1px solid var(--border-darker);
 }

 .example-label {
   font-family: var(--font-display);
   font-weight: 700;
   color: var(--text-main);
   font-size: 0.9rem;
   text-transform: uppercase;
   letter-spacing: 0.05em;
 }

 .savings-tag {
   background: var(--accent-teal-subtle);
   color: var(--accent-teal);
   padding: 0.35rem 0.75rem;
   border-radius: 4px;
   font-size: 0.75rem;
   font-weight: 700;
   text-transform: uppercase;
   letter-spacing: 0.05em;
 }

 .credit-equation {
   display: flex;
   flex-direction: column;
   gap: 0.75rem;
 }

 .eq-step {
   display: flex;
   justify-content: space-between;
   align-items: center;
   background: #FFFFFF;
   padding: 1.25rem;
   border-radius: 6px;
   border: 1px solid var(--border-color);
 }

 .step-highlight {
   border-color: var(--brand-blue);
   box-shadow: 0 4px 12px var(--brand-blue-subtle);
 }

 .eq-title { font-weight: 600; font-size: 0.95rem; }
 
 .eq-operator {
   text-align: center;
   font-size: 1.5rem;
   font-weight: 700;
   color: var(--text-subtle);
   line-height: 1;
 }

 /* Visual Day Blocks CSS */
 .block-group { display: flex; flex-direction: column; align-items: flex-end; gap: 0.4rem; }
 .day-blocks { display: flex; gap: 6px; }
 .day-block { width: 24px; height: 24px; border-radius: 4px; }
 
 .block-blue { background-color: var(--brand-blue); }
 .block-teal { background-color: var(--accent-teal); }
 
 /* The styling for the "Saved" days */
 .block-saved { 
   background-color: transparent; 
   border: 1.5px dashed rgba(255, 255, 255, 0.4); 
   display: flex; 
   align-items: center; 
   justify-content: center; 
 }
 .block-saved::after { 
   content: '×'; 
   color: rgba(255, 255, 255, 0.6); 
   font-size: 18px; 
   font-weight: 700; 
   line-height: 1; 
   margin-top: -2px;
 }
 .block-saved-light { 
   background-color: transparent; 
   border: 1.5px dashed var(--border-darker); 
   display: flex; 
   align-items: center; 
   justify-content: center; 
 }
 .block-saved-light::after { 
   content: '×'; 
   color: var(--text-subtle); 
   font-size: 18px; 
   font-weight: 700; 
   line-height: 1; 
   margin-top: -2px;
 }

 .block-label { font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-muted); }
 
 /* Updating the Result Card to Dark Navy so the colored blocks pop */
 .step-result { background: var(--bg-dark); border-color: var(--bg-dark); color: #FFFFFF; margin-top: 0.5rem; }
 .step-result .eq-title { color: #FFFFFF; }
 .step-result .block-label { color: rgba(255, 255, 255, 0.9); }
 .step-result del { opacity: 0.5; margin-left: 0.35rem; font-weight: 500; }

 /* Licensing Banner */
 .licensing-banner { background: #FFFFFF; border: 1px solid var(--border-color); border-left: 6px solid var(--accent-sand); padding: 3.25rem; border-radius: 8px; display: grid; grid-template-columns: 1.25fr 0.75fr; align-items: center; gap: 2.5rem; margin-top: 2rem; box-shadow: 0 12px 30px rgba(15, 23, 42, 0.03); }
 .licensing-banner h3 { font-size: 2rem; color: var(--text-main); margin-bottom: 0.65rem; line-height: 1.2; font-weight: 800; }
 .licensing-banner p { color: var(--text-muted); font-size: 0.95rem; line-height: 1.55; }
 .banner-actions { display: flex; gap: 1rem; justify-content: flex-end; flex-wrap: wrap; }

   /* Services Layout */
   .services-wrapper { padding: 6rem 0; }
   .services-header { margin-bottom: 3.5rem; text-align: center; }
   
   .services-grid {
     display: grid;
     grid-template-columns: repeat(2, 1fr);
     gap: 2.5rem;
     margin-bottom: 5rem;
   }

   .service-card {
     background: var(--bg-card);
     border: 1px solid var(--border-color);
     border-radius: 8px;
     padding: 3rem 2.5rem;
     display: flex;
     flex-direction: column;
     transition: transform 0.2s ease, box-shadow 0.2s ease;
     position: relative;
     overflow: hidden;
   }
   
   .service-card:hover {
     transform: translateY(-4px);
     box-shadow: 0 16px 32px rgba(15, 23, 42, 0.06);
   }

   .service-card::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 5px; }
   .card-theme-blue::before { background-color: var(--brand-blue); }
   .card-theme-teal::before { background-color: var(--accent-teal); }
   .card-theme-crimson::before { background-color: var(--accent-crimson); }
   .card-theme-gold::before { background-color: var(--accent-sand); }

   /* Badge System */
   .badge-container {
     display: flex;
     flex-wrap: wrap;
     gap: 0.5rem;
     align-items: center;
     margin-bottom: 1.5rem;
   }

   .meta-badge {
     font-size: 0.7rem;
     font-weight: 700;
     letter-spacing: 0.08em;
     text-transform: uppercase;
     padding: 0.35rem 0.7rem;
     border-radius: 4px;
     border: 1px solid transparent;
   }

   .badge-default { background-color: var(--bg-card-alt); color: var(--text-muted); border-color: var(--border-color); }
   .badge-blue { background-color: var(--brand-blue-subtle); color: var(--brand-blue); border-color: rgba(46, 92, 167, 0.2); }
   .badge-teal { background-color: var(--accent-teal-subtle); color: var(--accent-teal); border-color: rgba(62, 161, 156, 0.25); }
   .badge-crimson { background-color: var(--accent-crimson-subtle); color: var(--accent-crimson); border-color: rgba(186, 93, 96, 0.25); }
   .badge-gold { background-color: var(--accent-sand-subtle); color: var(--accent-sand); border-color: rgba(210, 163, 107, 0.25); }
   .badge-dark { background-color: var(--bg-dark); color: #FFFFFF; border-color: var(--bg-dark); }

   /* Partner Logo Styling */
   .partner-logo-wrap {
     display: flex;
     align-items: center;
     height: 48px;
     margin-bottom: 1.25rem;
   }
   
   .partner-logo {
     max-height: 100%;
     max-width: 200px;
     object-fit: contain;
   }

   .service-card h3 { font-size: 1.6rem; margin-bottom: 1rem; line-height: 1.3; }
   .service-card p { font-size: 0.95rem; color: var(--text-muted); line-height: 1.6; margin-bottom: 2rem; flex-grow: 1; }
   
   .link-arrow { font-size: 0.95rem; font-weight: 600; color: var(--brand-blue); text-decoration: none; display: inline-flex; align-items: center; gap: 0.5rem; }
   .link-arrow:hover { text-decoration: underline; }

 /* Intro Block */
 .intro-block { padding: 5rem 0; text-align: center; background-color: var(--bg-card); border-bottom: 1px solid var(--border-color); }
 .intro-block h2 { font-size: 2.2rem; margin-bottom: 1rem; }
 .intro-block p { font-size: 1.1rem; color: var(--text-muted); max-width: 800px; margin: 0 auto; line-height: 1.7; }

 /* Industry Zig-Zag Rows */
 .industry-rows { padding: 4rem 0; }
 
 .feature-row {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 5rem;
   align-items: center;
   padding: 6rem 0;
   border-bottom: 1px solid var(--border-color);
 }
 
 .feature-row:last-child { border-bottom: none; }

 /* Alternate the image positioning (FIXED ZIG-ZAG) */
 .feature-row.reverse .feature-content { order: 2; }
 .feature-row.reverse .feature-image { order: 1; }

 /* The Equation Badge */
 .equation-badge {
   display: inline-flex;
   align-items: center;
   padding: 0.75rem 1.25rem;
   border-radius: 6px;
   font-family: var(--font-display);
   font-weight: 800;
   font-size: 1.35rem;
   letter-spacing: -0.02em;
   margin-bottom: 1.5rem;
   box-shadow: 0 4px 12px rgba(15, 23, 42, 0.05);
 }

 .equation-badge span { font-weight: 500; opacity: 0.7; margin: 0 0.5rem; }

 /* Industry Theme Colors */
 .theme-defence .equation-badge { background: var(--accent-crimson-subtle); color: var(--accent-crimson); border-left: 4px solid var(--accent-crimson); }
 .theme-medical .equation-badge { background: var(--accent-teal-subtle); color: var(--accent-teal); border-left: 4px solid var(--accent-teal); }
 .theme-power .equation-badge { background: var(--accent-sand-subtle); color: var(--accent-sand); border-left: 4px solid var(--accent-sand); }
 .theme-sport .equation-badge { background: var(--brand-blue-subtle); color: var(--brand-blue); border-left: 4px solid var(--brand-blue); }

 .feature-content h3 { font-size: 2.2rem; margin-bottom: 1rem; line-height: 1.15; }
 .feature-content p { font-size: 1.05rem; color: var(--text-muted); line-height: 1.65; margin-bottom: 1.5rem; }
 
 .feature-list { list-style: none; margin-bottom: 2rem; }
 .feature-list li { position: relative; padding-left: 1.75rem; margin-bottom: 0.75rem; font-weight: 500; color: var(--text-main); }
 .feature-list li::before {
   content: '→';
   position: absolute;
   left: 0;
   color: var(--brand-blue);
   font-weight: 800;
 }

 .feature-image {
   position: relative;
   border-radius: 12px;
   overflow: hidden;
   box-shadow: 0 20px 40px rgba(15, 23, 42, 0.08);
   background: var(--bg-card-alt);
   aspect-ratio: 4/3;
 }
 
 /* Placeholders for actual imagery */
 .feature-image img {
   width: 100%;
   height: 100%;
   object-fit: cover;
   display: block;
 }
    /* Blog Categories/Filters */
    .blog-filters {
      padding: 2rem 0;
      border-bottom: 1px solid var(--border-color);
      background: #FFFFFF;
    }

    .filter-list {
      display: flex;
      gap: 1rem;
      list-style: none;
      flex-wrap: wrap;
    }
    .filter-list li button {
      background: var(--bg-card-alt);
      border: 1px solid var(--border-color);
      color: var(--text-muted);
      padding: 0.5rem 1.25rem;
      border-radius: 20px;
      font-size: 0.85rem;
      font-weight: 600;
      cursor: pointer;
      transition: all 0.2s ease;
      font-family: var(--font-body);
    }
    .filter-list li button:hover, .filter-list li button.active {
      background: var(--brand-blue);
      color: #FFFFFF;
      border-color: var(--brand-blue);
    }

    /* Blog Content Wrapper */
    .blog-wrapper { padding: 5rem 0; }
    
    /* Featured Article */
    .featured-article {
      display: grid;
      grid-template-columns: 1.2fr 1fr;
      gap: 3rem;
      background: var(--bg-card);
      border: 1px solid var(--border-color);
      border-radius: 8px;
      overflow: hidden;
      margin-bottom: 4rem;
      box-shadow: 0 12px 30px rgba(15, 23, 42, 0.03);
      transition: transform 0.2s ease, box-shadow 0.2s ease;
    }
    .featured-article:hover {
      transform: translateY(-4px);
      box-shadow: 0 16px 40px rgba(15, 23, 42, 0.08);
    }
    .featured-image {
      background: linear-gradient(135deg, var(--brand-blue) 0%, var(--accent-teal) 100%);
      min-height: 350px;
      position: relative;
    }
    /* Abstract aesthetic overlay for image placeholder */
    .featured-image::after {
      content: '';
      position: absolute;
      top: 0; left: 0; right: 0; bottom: 0;
      background-image: radial-gradient(circle at 20% 80%, rgba(255,255,255,0.1) 0%, transparent 50%);
    }
    .featured-content {
      padding: 3rem 3rem 3rem 0;
      display: flex;
      flex-direction: column;
      justify-content: center;
    }
    
    .article-meta {
      display: flex;
      align-items: center;
      gap: 1rem;
      margin-bottom: 1rem;
      font-size: 0.85rem;
      color: var(--text-subtle);
      font-weight: 500;
    }
    .category-tag {
      font-size: 0.7rem;
      font-weight: 700;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      padding: 0.3rem 0.6rem;
      border-radius: 4px;
    }
    /* Specific Category Colors */
    .tag-thought { background: var(--brand-blue-subtle); color: var(--brand-blue); }
    .tag-news { background: var(--accent-teal-subtle); color: var(--accent-teal); }
    .tag-partner { background: var(--accent-sand-subtle); color: var(--accent-sand); }
    
    .featured-content h2 { font-size: 2.2rem; line-height: 1.2; margin-bottom: 1rem; }
    .featured-content p { color: var(--text-muted); font-size: 1.05rem; line-height: 1.6; margin-bottom: 2rem; }
    
    .link-arrow { font-size: 0.95rem; font-weight: 600; color: var(--brand-blue); text-decoration: none; display: inline-flex; align-items: center; gap: 0.5rem; }
    .link-arrow:hover { text-decoration: underline; }

    /* Blog Grid */
    .blog-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 2.5rem;
    }
    
    .blog-card {
      background: var(--bg-card);
      border: 1px solid var(--border-color);
      border-radius: 8px;
      display: flex;
      flex-direction: column;
      overflow: hidden;
      transition: transform 0.2s ease, box-shadow 0.2s ease;
    }
    .blog-card:hover {
      transform: translateY(-4px);
      box-shadow: 0 12px 24px rgba(15, 23, 42, 0.06);
    }
    .blog-card-image {
      height: 200px;
      background: var(--bg-card-alt);
      position: relative;
    }
    .blog-card:has(> img) .blog-card-image {
      height: 12px;
    }

    /* Force all blog card images to be exactly the same height */
    .blog-card > img {
      width: 100%;
      height: 220px !important; /* Overrides the inline height:100% */
      object-fit: cover;
      display: block;
    }

    /* Dynamic color strips based on the category tag inside the card */
    .blog-card:has(.tag-news) .blog-card-image { 
    background: linear-gradient(135deg, var(--accent-teal) 0%, #2A7370 100%); 
    }
    .blog-card:has(.tag-partner) .blog-card-image { 
    background: linear-gradient(135deg, var(--accent-sand) 0%, #A67D4E 100%); 
    }
    .blog-card:has(.tag-thought) .blog-card-image { 
    background: linear-gradient(135deg, var(--brand-blue) 0%, #1A3A6D 100%); 
    }

    .blog-card-content {
      padding: 2rem;
      display: flex;
      flex-direction: column;
      flex-grow: 1;
    }
    .blog-card h3 {
      font-size: 1.35rem;
      line-height: 1.3;
      margin-bottom: 1rem;
    }
    .blog-card p {
      font-size: 0.95rem;
      color: var(--text-muted);
      line-height: 1.5;
      margin-bottom: 1.5rem;
      flex-grow: 1;
    }
/* ==========================================================================
   BLOG POST: IMMEDIATE IMAGE LOAD ANIMATION
   ========================================================================== */

/* 1. Override the scroll-observer just for the main blog wrapper so it doesn't stay hidden */
.article-wrapper.reveal {
  opacity: 1 !important;
  transform: none !important;
  visibility: visible !important;
}

/* 2. Apply a dedicated fade-up animation to the featured image on page load */
.article-featured-image {
  opacity: 0;
  animation: blogImageFadeUp 0.8s ease-out forwards;
  animation-delay: 0.5s; /* Fires right after your hero text finishes animating */
}

@keyframes blogImageFadeUp {
  from {
    opacity: 0;
    transform: translateY(40px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
    /* Contact Layout */
    .contact-wrapper { padding: 6rem 0; }
    
    .contact-grid {
      display: grid;
      grid-template-columns: 1fr 1.3fr;
      gap: 4rem;
    }

    /* Left Column: Contact Details */
    .contact-info-panel {
      display: flex;
      flex-direction: column;
      gap: 1.5rem;
    }

    .contact-card {
      background: var(--bg-card);
      border: 1px solid var(--border-color);
      border-radius: 8px;
      padding: 2.25rem;
      display: flex;
      flex-direction: column;
      box-shadow: 0 4px 12px rgba(15, 23, 42, 0.02);
      transition: transform 0.2s ease, box-shadow 0.2s ease;
    }
    .contact-card:hover { transform: translateY(-4px); box-shadow: 0 12px 24px rgba(15, 23, 42, 0.06); }

    .contact-icon { width: 42px; height: 42px; margin-bottom: 1.25rem; display: inline-flex; align-items: center; justify-content: center; border-radius: 8px; background: var(--bg-card-alt); color: var(--brand-blue); border: 1px solid var(--border-darker); }
    .contact-icon svg { width: 20px; height: 20px; }
    
    .contact-card h3 { font-size: 1.25rem; margin-bottom: 0.5rem; }
    .contact-card p { font-size: 0.95rem; color: var(--text-muted); line-height: 1.5; margin-bottom: 1rem; }
    .contact-link { font-family: var(--font-display); font-size: 1.05rem; font-weight: 700; color: var(--brand-blue); text-decoration: none; transition: color 0.2s; }
    .contact-link:hover { color: var(--accent-teal); text-decoration: underline; }

    /* Right Column: Premium Form */
    .contact-form-container {
      background: #FFFFFF;
      border: 1px solid var(--border-color);
      border-radius: 8px;
      padding: 3.5rem;
      box-shadow: 0 12px 30px rgba(15, 23, 42, 0.04);
      border-top: 4px solid var(--brand-blue);
    }

    .contact-form-container h2 { font-size: 2rem; margin-bottom: 0.5rem; }
    .contact-form-container p.form-subtitle { color: var(--text-muted); margin-bottom: 2.5rem; font-size: 0.95rem; }

    .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; margin-bottom: 1.5rem; }
    .form-group { display: flex; flex-direction: column; gap: 0.5rem; margin-bottom: 1.5rem; }
    
    .form-label {
      font-size: 0.75rem;
      font-weight: 700;
      letter-spacing: 0.05em;
      text-transform: uppercase;
      color: var(--text-main);
    }

    .form-control {
      font-family: var(--font-body);
      font-size: 0.95rem;
      color: var(--text-main);
      padding: 0.85rem 1rem;
      border: 1px solid var(--border-color);
      border-radius: 6px;
      background-color: var(--bg-cream);
      transition: all 0.2s ease;
    }

    .form-control:focus {
      outline: none;
      border-color: var(--brand-blue);
      background-color: #FFFFFF;
      box-shadow: 0 0 0 3px var(--brand-blue-subtle);
    }

    .form-control::placeholder { color: var(--text-subtle); }

    textarea.form-control { resize: vertical; min-height: 120px; }
    select.form-control { appearance: none; cursor: pointer; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23475569' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 1rem center; background-size: 16px; padding-right: 2.5rem; }

    .form-submit-wrap { margin-top: 1rem; }
    .form-submit-wrap .btn { width: 100%; font-size: 1rem; padding: 1rem; }

    /* --- Leadership Section --- */
    .leadership-section {
      padding: 6rem 0;
      background-color: var(--bg-cream);
      border-top: 1px solid var(--border-color);
    }

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

    .leader-card {
      display: flex;
      gap: 2rem;
      align-items: flex-start;
      background: var(--bg-card);
      padding: 2.5rem;
      border-radius: 8px;
      border: 1px solid var(--border-color);
      box-shadow: 0 4px 12px rgba(15, 23, 42, 0.02);
      transition: transform 0.2s ease, box-shadow 0.2s ease;
    }

    .leader-card:hover {
      transform: translateY(-4px);
      box-shadow: 0 16px 32px rgba(15, 23, 42, 0.06);
    }

    .leader-photo {
      width: 120px;
      height: 120px;
      border-radius: 8px;
      background: var(--border-darker);
      flex-shrink: 0;
      object-fit: cover;
    }

    .leader-info h3 {
      font-size: 1.5rem;
      color: var(--text-main);
      margin-bottom: 0.2rem;
    }

    .leader-info .title {
      font-size: 0.8rem;
      font-weight: 700;
      color: var(--brand-blue);
      text-transform: uppercase;
      letter-spacing: 0.05em;
      margin-bottom: 1rem;
      display: block;
    }

    .leader-info p {
      font-size: 0.9rem;
      color: var(--text-muted);
      line-height: 1.6;
      margin-bottom: 1.25rem;
    }

   /* Overview Section */
   .course-overview { padding: 6rem 0; }
   .overview-grid { display: grid; grid-template-columns: 1fr 1.5fr; gap: 4rem; }
   .overview-text h2 { font-size: 2.2rem; margin-bottom: 1rem; line-height: 1.2; }
   .overview-text p { font-size: 1.05rem; color: var(--text-muted); line-height: 1.7; margin-bottom: 1.5rem; }

   /* Outcomes Grid (USPs) */
   .outcomes-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.5rem; margin-top: 2rem; }
   .outcome-card { background: var(--bg-card); border: 1px solid var(--border-color); padding: 1.75rem; border-radius: 8px; display: flex; flex-direction: column; }
   .outcome-icon { width: 36px; height: 36px; margin-bottom: 1rem; border-radius: 6px; display: flex; align-items: center; justify-content: center; background: var(--brand-blue-subtle); color: var(--brand-blue); }
   .outcome-icon svg { width: 18px; height: 18px; }
   .outcome-card h3 { font-size: 1.1rem; margin-bottom: 0.5rem; }
   .outcome-card p { font-size: 0.9rem; color: var(--text-muted); margin: 0; line-height: 1.5; }

   /* Syllabus / Timeline Section */
   .syllabus-section { padding: 6rem 0; background-color: var(--bg-card-alt); border-top: 1px solid var(--border-color); border-bottom: 1px solid var(--border-color); }
   .syllabus-header { text-align: center; margin-bottom: 4rem; }
   
   .syllabus-section .phase-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
   .phase-card { background: #FFFFFF; border: 1px solid var(--border-color); padding: 2rem 1.75rem; border-radius: 8px; position: relative; overflow: hidden; }
   .phase-card::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 4px; background-color: var(--brand-blue); }
   .phase-badge { font-family: var(--font-display); font-size: 0.75rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--brand-blue); margin-bottom: 0.5rem; display: block; }
   .phase-card h3 { font-size: 1.35rem; line-height: 1.25; margin-bottom: 1rem; font-weight: 700; }
   .feature-list { list-style: none; margin-bottom: 0; }
   .feature-list li { position: relative; padding-left: 1.5rem; margin-bottom: 0.65rem; font-size: 0.9rem; color: var(--text-muted); }
   .feature-list li::before { content: '→'; position: absolute; left: 0; color: var(--brand-blue); font-weight: 800; }

   /* Target Audience */
   .audience-section { padding: 6rem 0; }
   .audience-box { background: var(--bg-card); border: 1px solid var(--border-color); border-left: 4px solid var(--accent-teal); padding: 3rem; border-radius: 8px; }
   .audience-box h2 { font-size: 1.8rem; margin-bottom: 1rem; }
   .audience-box p { color: var(--text-muted); font-size: 1.05rem; }    

/* =========================================
   USP Showcase Section
   ========================================= */

   .usp-showcase-section {
    padding: 5rem 0; /* Matches the spacing rhythm of your other sections */
    background-color: transparent; 
  }
  
  .usp-showcase-section .usp-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    background-color: #ffffff; /* Gives it the same card-like feel as audience-box */
    border-radius: 1rem;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05); /* Soft shadow matching the tech aesthetic */
    overflow: hidden;
  }
  
  .usp-media {
    width: 100%;
    height: 100%;
    min-height: 400px; /* Ensures the image column doesn't collapse */
  }
  
  .usp-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }
  
  .usp-content {
    padding: 4rem;
  }
  
  .usp-logo {
    height: 45px; /* Constrains the company logo height */
    margin-bottom: 2rem;
    display: block;
  }
  
  .usp-content h2 {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-weight: 700;
    margin-bottom: 1.25rem;
    color: #111827; /* Dark slate for headings */
  }
  
  .usp-content p {
    color: #4b5563; /* Readable gray for body text */
    line-height: 1.7;
    margin-bottom: 1.5rem;
  }
  
  .usp-content .feature-list {
    margin-top: 1.5rem;
  }
  
  /* Responsive adjustments for tablet and mobile */
    @media (max-width: 992px) {
  .usp-showcase-section .usp-grid {
    grid-template-columns: 1fr;
  }
    
    .usp-media {
      min-height: 300px;
    }
    
    .usp-content {
      padding: 2.5rem;
    }
  }

  .usp-partner-label {
    display: block;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-subtle); /* Matches the gray used in your other labels */
    margin-bottom: 0.5rem; /* Keeps it tight to the logo below it */
  }
  
  .usp-logo {
    height: 28px; 
    margin-bottom: 1.5rem;
    display: block;
  }

/* =========================================
   Blog Article Reading View
   ========================================= */

   .article-hero-meta {
    display: flex;
    align-items: center;
    gap: 1rem;
    font-size: 1.05rem;
    color: #CBD5E1; /* Muted text for the dark hero background */
    margin-top: 1.5rem;
  }
  
  .article-wrapper {
    padding: 4rem 0 6rem 0;
    background-color: var(--bg-card); /* Crisp white background for reading */
  }
  
  /* Constrains the reading width for optimal eye tracking */
  .article-container {
    max-width: 860px; 
    margin: 0 auto;
  }
  
  .article-featured-image {
    width: 100%;
    border-radius: 12px;
    overflow: hidden;
    margin-bottom: 4rem;
    background-color: var(--bg-card-alt);
    aspect-ratio: 16/9;
    box-shadow: 0 12px 30px rgba(15, 23, 42, 0.05);
  }
  
  .article-featured-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }
  
  .article-body {
    font-size: 1.125rem; /* Slightly larger text for long-form reading */
    line-height: 1.8;
    color: var(--text-main);
    margin-bottom: 5rem;
  }
  
  .article-body .article-lead {
    font-size: 1.35rem;
    color: var(--text-muted);
    line-height: 1.6;
    margin-bottom: 3rem;
    font-weight: 500;
  }
  
  .article-body h2 {
    font-size: 2rem;
    margin: 3.5rem 0 1.5rem;
    color: var(--brand-blue);
  }
  
  .article-body h3 {
    font-size: 1.5rem;
    margin: 2.5rem 0 1rem;
  }
  
  .article-body p {
    margin-bottom: 1.75rem;
  }
  
  .article-body ul.feature-list {
    margin: 2rem 0;
    background: var(--bg-cream);
    padding: 2rem 2rem 2rem 1rem;
    border-radius: 8px;
    border: 1px solid var(--border-color);
  }
  
  .article-body blockquote {
    font-family: var(--font-display);
    font-size: 1.5rem;
    line-height: 1.5;
    font-weight: 600;
    color: var(--brand-blue);
    margin: 4rem 0;
    padding: 0 0 0 2rem;
    border-left: 4px solid var(--accent-sand);
    font-style: italic;
  }
  
  /* Margin adjustment for the author block */
  .article-author-card {
    margin-top: 4rem;
    border-top: 4px solid var(--brand-blue);
  }
  
  @media (max-width: 768px) {
    .article-body { font-size: 1.05rem; }
    .article-body h2 { font-size: 1.75rem; }
    .article-body blockquote { font-size: 1.25rem; padding-left: 1.5rem; }
    .article-hero-meta { flex-wrap: wrap; gap: 0.5rem; font-size: 0.95rem; }
  }

    /* --- SCROLL ANIMATIONS --- */
    /* Keyframes for Hero Load */
    @keyframes fadeInUp {
      from { opacity: 0; transform: translateY(30px); }
      to { opacity: 1; transform: translateY(0); }
    }
    
    /* Hero Load Classes */
    .hero-animate {
      animation: fadeInUp 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
      opacity: 0;
    }
    .hero-delay-1 { animation-delay: 0.1s; }
    .hero-delay-2 { animation-delay: 0.2s; }
    .hero-delay-3 { animation-delay: 0.3s; }
    .hero-delay-4 { animation-delay: 0.4s; }

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

    /* Staggered Delays for Grids */
    .delay-100 { transition-delay: 100ms; }
    .delay-200 { transition-delay: 200ms; }
    .delay-300 { transition-delay: 300ms; }
    .delay-400 { transition-delay: 400ms; }
    .delay-500 { transition-delay: 500ms; }

    /* Responsive */
    @media (max-width: 1024px) {
      /* Hide desktop CTA sooner so it doesn't crowd the header */
      .nav-cta {
        display: none;
      }
    }
    @media (max-width: 992px) {
      .hero-fullscreen h1 { font-size: 3rem; }
      .metric-grid, .usp-grid, .phase-grid { grid-template-columns: repeat(2, 1fr); }
      .syllabus-section .phase-grid { grid-template-columns: 1fr; }
      .system-banner, .licensing-banner { grid-template-columns: 1fr; padding: 2.25rem; }
      .modular-section { 
        grid-template-columns: 1fr; 
        gap: 2.5rem; 
      }
      .banner-actions { justify-content: flex-start; }
      .footer-grid { grid-template-columns: repeat(2, 1fr); }
      .industries-grid { grid-template-columns: repeat(2, 1fr); }
      .courses-grid, .solutions-grid, .services-grid, .feature-row { grid-template-columns: 1fr; gap: 2rem; }
      .feature-row.reverse .feature-content { order: 1; }
      .feature-row.reverse .feature-image { order: 2; }
      .featured-article { grid-template-columns: 1fr; }
      .featured-image { min-height: 250px; }
      .featured-content { padding: 2.5rem; }
      .blog-grid { grid-template-columns: repeat(2, 1fr); }
      .contact-grid { grid-template-columns: 1fr; gap: 3rem; }
      .contact-form-container { padding: 2.5rem; }
      .overview-grid { grid-template-columns: 1fr; gap: 2rem; }
      .case-study-card { grid-template-columns: 1fr; }
      .case-study-image img { min-height: 300px; }
      .case-study-content { padding: 2.5rem; }
      
      /* Mobile Menu Styles */
      .brand-wrap { order: 1; }
      .nav-cta { display: none; order: 2; margin-left: auto; padding: 0.5rem 1rem; font-size: 0.85rem; }
      .mobile-menu-toggle { display: flex; order: 3; margin-left: 1.5rem; } 
      
      .nav-links {
        position: absolute;
        top: 76px;
        left: 0;
        width: 100%;
        background-color: #FFFFFF;
        flex-direction: column;
        align-items: flex-start;
        padding: 2rem;
        gap: 1.5rem;
        box-shadow: 0 12px 24px rgba(15, 23, 42, 0.1);
        border-bottom: 1px solid var(--border-color);
        visibility: hidden;
        opacity: 0;
        transform: translateY(-10px);
        transition: all 0.3s ease;
      }

      .nav-links.active {
        visibility: visible;
        opacity: 1;
        transform: translateY(0);
      }
      .nav-links a { font-size: 1.1rem; display: block; width: 100%; }

      .mobile-menu-toggle.active span:nth-child(1) { transform: translateY(8.5px) rotate(45deg); }
      .mobile-menu-toggle.active span:nth-child(2) { opacity: 0; }
      .mobile-menu-toggle.active span:nth-child(3) { transform: translateY(-8.5px) rotate(-45deg); }
    }

    @media (max-width: 768px) {
      .testimonial-grid, .leadership-grid { grid-template-columns: 1fr; }
      .leader-card { flex-direction: column; align-items: center; text-align: center; }
      .leadership-grid { grid-template-columns: 1fr; }
      .leader-card { flex-direction: column; align-items: center; text-align: center; }
      .footer-bottom { flex-direction: column; gap: 1rem; text-align: center; }
      .footer-legal a { margin: 0 0.5rem; }
    }

    @media (max-width: 600px) {
      .brand-name { font-size: 1.35rem; }
      .nav-cta { padding: 0.45rem 0.85rem; font-size: 0.75rem; }
      .mobile-menu-toggle { margin-left: 1rem; }
      
      .hero-fullscreen { padding: 4.5rem 0 5rem; min-height: auto; }
      .hero-fullscreen h1 { font-size: 2.35rem; }
      .hero-subpage h1 { font-size: 2.2rem; }
      .hero-subtitle-lead { font-size: 1.15rem; }
      .metric-grid, .usp-grid, .phase-grid, .footer-grid, .syllabus-section .phase-grid { grid-template-columns: 1fr; }
      .industries-grid { grid-template-columns: 1fr; }
      .blog-grid { grid-template-columns: 1fr; }
      .outcomes-grid { grid-template-columns: 1fr; }
      .filter-list { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 0.5rem; -webkit-overflow-scrolling: touch; }
      .filter-list::-webkit-scrollbar { display: none; }
      .filter-list li { flex-shrink: 0; }
      .banner-actions { flex-direction: column; width: 100%; }
      .banner-actions .btn { width: 100%; }
      .metric-footnote { text-align: center; }
      .form-row { grid-template-columns: 1fr; gap: 0; }
    }

    /* =========================================
   Mobile Spacing & Rhythm Adjustments
   ========================================= */
@media (max-width: 768px) {
  /* Compress all primary section padding */
  .hero-subpage,
  .course-overview,
  .syllabus-section,
  .audience-section,
  .usp-showcase-section,
  .solutions-wrapper,
  .courses-wrapper,
  .services-wrapper,
  .roadmap-section,
  .case-study-section,
  .usps,
  .training-system,
  .social-proof,
  .industries-teaser,
  .leadership-section,
  .blog-wrapper,
  .contact-wrapper,
  .article-wrapper {
    padding-top: 3.5rem;
    padding-bottom: 3.5rem;
  }

  /* Target and override the hardcoded inline style on bottom CTAs */
  section[style*="padding-bottom: 6rem"] {
    padding-bottom: 3.5rem !important;
  }

  /* Compress modular architecture and banner margins/padding */
  .modular-section {
    margin-bottom: 3.5rem;
    padding: 2rem 1.5rem; /* Tighter internal padding for mobile */
  }

  .system-banner {
    margin-top: 3.5rem;
    padding: 2rem 1.5rem;
  }

  .courses-grid,
  .solutions-grid,
  .services-grid {
    margin-bottom: 3.5rem;
  }
}
/* =========================================
   Mobile Contact Page Overflow & Layout Fixes
   ========================================= */
   @media (max-width: 768px) {
    /* Prevent horizontal breakout on containers and grids */
    .container {
      width: 100% !important;
      max-width: 100% !important;
      padding-left: 1.25rem !important;
      padding-right: 1.25rem !important;
    }
  
    .site-wrapper {
      overflow-x: hidden !important;
      width: 100%;
    }
  
    .contact-grid {
      display: flex !important;
      flex-direction: column !important;
      width: 100% !important;
      gap: 2rem !important;
      margin: 0 !important;
    }
  
    .contact-info-panel,
    .contact-form-container {
      width: 100% !important;
      max-width: 100% !important;
      box-sizing: border-box !important;
    }
    
    .contact-form-container {
      padding: 1.5rem !important; /* Strips out the massive 3.5rem desktop padding */
    }
  
    .form-row {
      display: flex !important;
      flex-direction: column !important;
      width: 100% !important;
      gap: 1.25rem !important;
      margin-bottom: 0 !important;
    }
  
    .form-group {
      width: 100% !important;
    }
  
    .form-control {
      width: 100% !important;
      max-width: 100% !important;
    }
  }
  /* =========================================
   Mobile Overflow Fix: Modular Architecture 
   ========================================= */
@media (max-width: 768px) {
  /* Reduce outer padding on the card to reclaim horizontal space */
  .credit-example-card {
    padding: 1.5rem 1rem;
  }
  
  /* Stack the header text vertically */
  .credit-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.75rem;
  }
  
  /* Stack the equation steps vertically */
  .eq-step {
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
    padding: 1rem; 
  }
  
  /* Shift block alignment from right to left */
  .block-group {
    align-items: flex-start;
    width: 100%;
  }
  
  /* Allow the 9 individual day blocks to wrap to a new line on very small devices */
  .day-blocks {
    flex-wrap: wrap; 
  }
}
/* Display the Direct Inquiry form above the info cards on tablet/mobile */
@media (max-width: 992px) {
  .contact-form-container {
    order: -1;
  }
}