/* MDC v3.0.44 — CSS-only native mobile navigation and hero contrast */

.mobile-native-nav { display: none; }

@media (max-width: 768px) {
  html, body {
    max-width: 100%;
    overflow-x: hidden;
  }

  body {
    background: #f7faf8 !important;
    color: #2f4552 !important;
  }

  .site-header {
    position: sticky !important;
    top: 0 !important;
    z-index: 30000 !important;
    background: #fff !important;
    box-shadow: 0 4px 18px rgba(6,47,83,.10) !important;
  }

  .site-header .header-inner {
    position: relative !important;
    width: calc(100% - 24px) !important;
    min-height: 74px !important;
    margin-inline: auto !important;
    padding: 10px 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
  }

  .site-header .brand {
    display: flex !important;
    align-items: center !important;
    max-width: calc(100% - 72px) !important;
  }

  .site-header .brand-logo-full {
    width: auto !important;
    max-width: 205px !important;
    max-height: 48px !important;
    object-fit: contain !important;
  }

  /* Hide the legacy mobile navigation and its JavaScript-driven button. */
  #nav-toggle,
  #primary-nav {
    display: none !important;
  }

  .mobile-native-nav {
    display: block !important;
  }

  .mobile-nav-control {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
  }

  .mobile-nav-button {
    position: absolute !important;
    right: 0 !important;
    top: 11px !important;
    z-index: 30003 !important;
    width: 52px !important;
    height: 52px !important;
    display: grid !important;
    place-content: center !important;
    gap: 5px !important;
    border: 1px solid rgba(6,47,83,.12) !important;
    border-radius: 15px !important;
    background: #fff !important;
    box-shadow: 0 8px 22px rgba(6,47,83,.08) !important;
    cursor: pointer !important;
  }

  .mobile-nav-button span {
    display: block !important;
    width: 25px !important;
    height: 3px !important;
    border-radius: 999px !important;
    background: #07345a !important;
    transition: transform .2s ease, opacity .2s ease !important;
  }

  .mobile-nav-control:checked + .mobile-nav-button span:nth-child(1) {
    transform: translateY(8px) rotate(45deg) !important;
  }

  .mobile-nav-control:checked + .mobile-nav-button span:nth-child(2) {
    opacity: 0 !important;
  }

  .mobile-nav-control:checked + .mobile-nav-button span:nth-child(3) {
    transform: translateY(-8px) rotate(-45deg) !important;
  }

  .mobile-nav-overlay {
    position: fixed !important;
    inset: 74px 0 0 !important;
    z-index: 30000 !important;
    display: block !important;
    background: rgba(4,31,53,.46) !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    transition: opacity .2s ease, visibility .2s ease !important;
  }

  .mobile-nav-panel {
    position: fixed !important;
    top: 74px !important;
    right: 0 !important;
    bottom: 0 !important;
    z-index: 30001 !important;
    width: min(92vw,390px) !important;
    padding: 18px 16px 30px !important;
    overflow-y: auto !important;
    background: #fff !important;
    box-shadow: -18px 0 48px rgba(6,47,83,.20) !important;
    transform: translateX(110%) !important;
    visibility: hidden !important;
    transition: transform .24s ease, visibility .24s ease !important;
  }

  .mobile-nav-control:checked ~ .mobile-nav-overlay {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
  }

  .mobile-nav-control:checked ~ .mobile-nav-panel {
    transform: translateX(0) !important;
    visibility: visible !important;
  }

  .mobile-nav-home,
  .mobile-nav-cta,
  .mobile-nav-group > summary {
    width: 100% !important;
    min-height: 48px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    margin: 0 0 8px !important;
    padding: 12px 14px !important;
    border: 0 !important;
    border-radius: 12px !important;
    color: #07345a !important;
    background: #f3f8f4 !important;
    font-weight: 800 !important;
    text-decoration: none !important;
    cursor: pointer !important;
    list-style: none !important;
  }

  .mobile-nav-group > summary::-webkit-details-marker {
    display: none !important;
  }

  .mobile-nav-group > summary::after {
    content: "▾" !important;
    color: #07345a !important;
  }

  .mobile-nav-group[open] > summary::after {
    content: "▴" !important;
  }

  .mobile-nav-links {
    display: grid !important;
    gap: 4px !important;
    padding: 3px 0 10px 10px !important;
  }

  .mobile-nav-links a {
    display: block !important;
    min-height: 44px !important;
    padding: 11px 13px !important;
    border-left: 3px solid #bce7c9 !important;
    border-radius: 9px !important;
    color: #506371 !important;
    background: #fff !important;
    text-decoration: none !important;
    font-weight: 700 !important;
  }

  .mobile-nav-cta {
    justify-content: center !important;
    color: #fff !important;
    background: linear-gradient(135deg,#2f7f36,#17643f) !important;
  }

  /* Hide the accessibility skip link unless focused. */
  .skip-link,
  a[href="#main-content"] {
    position: fixed !important;
    left: 12px !important;
    top: 8px !important;
    z-index: 40000 !important;
    transform: translateY(-170%) !important;
    opacity: 0 !important;
  }

  .skip-link:focus,
  a[href="#main-content"]:focus {
    transform: translateY(0) !important;
    opacity: 1 !important;
  }

  /* Homepage hero: use the intended light desktop palette on mobile. */
  .page-home .executive-home-hero-ai {
    position: relative !important;
    min-height: auto !important;
    overflow: hidden !important;
    background: #f7fbf9 !important;
  }

  .page-home .executive-home-hero-ai::before {
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;
    z-index: 1 !important;
    pointer-events: none !important;
    background: linear-gradient(
      180deg,
      rgba(247,251,249,.98) 0%,
      rgba(247,251,249,.96) 62%,
      rgba(247,251,249,.82) 100%
    ) !important;
  }

  .page-home .executive-home-hero-ai > img:first-child {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    opacity: .22 !important;
  }

  .page-home .executive-home-hero-ai .container {
    position: relative !important;
    z-index: 3 !important;
  }

  .page-home .executive-hero-grid {
    display: flex !important;
    flex-direction: column !important;
    gap: 1.25rem !important;
    min-height: auto !important;
    padding-block: 3rem !important;
  }

  .page-home .executive-hero-content {
    order: 1 !important;
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
  }

  .page-home .executive-home-hero-ai .eyebrow {
    color: #2f7047 !important;
  }

  .page-home .executive-home-hero-ai h1,
  .page-home .executive-home-hero-ai .hero-title-line {
    color: #07345a !important;
    text-shadow: none !important;
  }

  .page-home .executive-home-hero-ai h1 {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 0 1rem !important;
    font-size: clamp(2rem,9vw,3rem) !important;
    line-height: 1.08 !important;
    letter-spacing: -.035em !important;
  }

  .page-home .executive-home-hero-ai .hero-title-line {
    display: block !important;
    white-space: normal !important;
  }

  .page-home .executive-home-hero-ai .hero-title-line:last-child {
    color: #69b82f !important;
  }

  .page-home .executive-home-hero-ai .hero-lead {
    max-width: 100% !important;
    color: #526874 !important;
    text-shadow: none !important;
  }

  .page-home .executive-hero-visual {
    order: 2 !important;
    width: 100% !important;
    min-height: 0 !important;
    aspect-ratio: 4 / 3 !important;
    border-radius: 16px !important;
    overflow: hidden !important;
  }

  .page-home .executive-hero-visual picture,
  .page-home .executive-hero-visual img {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
  }

  .page-home .executive-hero-visual img {
    object-fit: cover !important;
    object-position: center !important;
  }

  .page-home .executive-hero-actions {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: .75rem !important;
  }

  .page-home .executive-hero-actions .btn {
    width: 100% !important;
  }

  /* Ensure content remains visible, without affecting navigation. */
  main .reveal,
  main [data-aos],
  footer .reveal,
  footer [data-aos] {
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
  }

  .container,
  .section-inner,
  .footer-inner {
    width: calc(100% - 28px) !important;
    max-width: none !important;
    margin-inline: auto !important;
  }

  .why-mdc-infographic img,
  .mdc-cycle-infographic img,
  .knowledge-infographic-figure img,
  [class*="infographic"] img {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    object-fit: contain !important;
  }
}