/* OREMA-TRIX — Accueil plein écran, inspiré de la composition HEC Rabat */
@media (min-width: 761px) {
  .site-header {
    position: absolute !important;
    inset: 0 0 auto 0 !important;
    z-index: 1000 !important;
    width: 100%;
    background: linear-gradient(180deg, rgba(7,20,36,.88) 0%, rgba(7,20,36,.48) 72%, rgba(7,20,36,0) 100%) !important;
    border-bottom: 1px solid rgba(255,255,255,.12) !important;
    box-shadow: none !important;
    backdrop-filter: blur(5px);
  }
  .site-header .nav-wrap {
    width: min(1320px, calc(100% - 64px)) !important;
    min-height: 92px !important;
    gap: 28px !important;
  }
  .site-header .brand { color: #fff !important; }
  .site-header .brand small { color: rgba(255,255,255,.76) !important; }
  .site-header .navigation > a.menu-link,
  .site-header .navigation > a.menu-link:hover,
  .site-header .navigation > a.menu-link[aria-current="page"] {
    color: #fff !important;
  }
  .site-header .navigation > a.menu-link:hover,
  .site-header .navigation > a.menu-link[aria-current="page"] {
    text-decoration: underline;
    text-decoration-color: #f07818;
    text-decoration-thickness: 2px;
    text-underline-offset: 10px;
  }
  .site-header .navigation > a.menu-quote {
    min-height: 48px !important;
    padding: 13px 22px !important;
    border-radius: 999px !important;
    background: #f07818 !important;
    color: #fff !important;
    box-shadow: 0 8px 24px rgba(240,120,24,.2) !important;
  }
  .site-header .navigation > a.menu-quote:hover { background: #ff8a24 !important; }

  .hero, .hero-slides { min-height: 100svh !important; }
  .hero-slides {
    height: 100svh !important;
    max-height: 900px;
  }
  .hero-slide {
    min-height: 100svh !important;
    padding: 150px 0 105px !important;
    background-position: center center !important;
    background-size: cover !important;
  }
  .hero-slide::before {
    background:
      linear-gradient(90deg, rgba(7,20,36,.88) 0%, rgba(7,20,36,.72) 43%, rgba(7,20,36,.24) 100%),
      linear-gradient(0deg, rgba(7,20,36,.42) 0%, transparent 55%) !important;
  }
  .hero-inner {
    width: min(1320px, calc(100% - 64px)) !important;
  }
  .hero-copy { max-width: min(790px, 68vw) !important; }
  .hero-eyebrow {
    color: #ff9a3e !important;
    font-size: 12px !important;
    letter-spacing: 2.2px !important;
  }
  .hero-eyebrow::before { background: #f07818 !important; }
  .hero h1 {
    max-width: 850px;
    margin-bottom: 22px !important;
    font-size: clamp(48px, 5.7vw, 78px) !important;
    line-height: 1.04 !important;
    letter-spacing: -2.2px !important;
  }
  .hero h1 em { color: #ff8a24 !important; }
  .hero-description {
    max-width: 680px !important;
    font-size: clamp(16px, 1.25vw, 19px) !important;
    line-height: 1.75 !important;
  }
  .hero-buttons { gap: 14px !important; margin-top: 32px !important; }
  .hero-buttons .button {
    min-height: 54px !important;
    padding: 15px 25px !important;
    font-size: 14px !important;
  }
  .hero-buttons .button-primary {
    background: #f07818 !important;
    color: #fff !important;
  }
  .hero-buttons .button-primary:hover { background: #ff8a24 !important; }
  .hero-buttons .button-outline {
    border-color: rgba(255,255,255,.68) !important;
    color: #fff !important;
  }
  .hero-arrow { width: 46px !important; height: 46px !important; }
  .hero-dots { bottom: 34px !important; }
}

/* Sur mobile, le menu latéral existant reste inchangé et le carrousel s'adapte */
@media (max-width: 760px) {
  .hero-slides {
    height: calc(100svh - 78px) !important;
    min-height: 570px !important;
    max-height: 780px !important;
  }
  .hero-slide {
    min-height: 570px !important;
    padding: 105px 0 88px !important;
    background-position: 58% center !important;
  }
  .hero-slide::before {
    background: linear-gradient(180deg, rgba(7,20,36,.25) 0%, rgba(7,20,36,.62) 35%, rgba(7,20,36,.94) 100%) !important;
  }
  .hero-inner { width: calc(100% - 40px) !important; }
  .hero-copy { max-width: 100% !important; }
  .hero h1 { font-size: clamp(34px, 8vw, 48px) !important; line-height: 1.08 !important; }
  .hero-description { max-width: 100% !important; font-size: 14px !important; }
  .hero-buttons .button { min-height: 46px !important; padding: 12px 16px !important; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-slide, .hero-buttons .button, .site-header { transition: none !important; }
}



/* OREMA-TRIX — fonds animés : dégradés + particules + vagues
   Effets limités aux trois zones Actualités, Domaines et Services. */
:root {
  --ot-motion-navy: rgba(16, 36, 58, .055);
  --ot-motion-orange: rgba(240, 120, 24, .075);
  --ot-motion-blue: rgba(29, 79, 128, .065);
}
:is(
  section:has(.news-card), section:has(.domain-card), section:has(.activity-card),
  #actualites, #conseils-actualites, #news,
  #domaines, #domaines-activite, #activity-domains,
  #services, #nos-services,
  .news-section, .actualites-section, .section-actualites,
  .domains-section, .domaines-section, .section-domaines,
  .services-section, .section-services
) {
  position: relative !important;
  isolation: isolate !important;
  overflow: hidden !important;
  background-color: #f4f7fb !important;
  background-image:
    radial-gradient(ellipse at 12% 18%, var(--ot-motion-orange), transparent 38%),
    radial-gradient(ellipse at 86% 76%, var(--ot-motion-blue), transparent 42%),
    linear-gradient(120deg, #f8fafc 0%, #eef3f9 48%, #fffaf5 100%) !important;
  background-size: 160% 160%, 150% 150%, 220% 220% !important;
  animation: ot-section-gradient 22s ease-in-out infinite alternate !important;
}
:is(
  section:has(.news-card), section:has(.domain-card), section:has(.activity-card),
  #actualites, #conseils-actualites, #news,
  #domaines, #domaines-activite, #activity-domains,
  #services, #nos-services,
  .news-section, .actualites-section, .section-actualites,
  .domains-section, .domaines-section, .section-domaines,
  .services-section, .section-services
)::before {
  content: "" !important;
  position: absolute !important;
  inset: -22% -10% !important;
  z-index: -1 !important;
  pointer-events: none !important;
  opacity: .62 !important;
  background:
    radial-gradient(ellipse at 18% 55%, rgba(240,120,24,.10) 0 13%, transparent 13.5%),
    radial-gradient(ellipse at 75% 35%, rgba(29,79,128,.09) 0 18%, transparent 18.5%),
    repeating-linear-gradient(166deg, transparent 0 76px, rgba(255,255,255,.62) 78px 81px, transparent 84px 150px);
  filter: blur(1px);
  transform: translate3d(-2%, 0, 0) rotate(-2deg) scale(1.04);
  animation: ot-section-waves 18s ease-in-out infinite alternate;
}
:is(
  section:has(.news-card), section:has(.domain-card), section:has(.activity-card),
  #actualites, #conseils-actualites, #news,
  #domaines, #domaines-activite, #activity-domains,
  #services, #nos-services,
  .news-section, .actualites-section, .section-actualites,
  .domains-section, .domaines-section, .section-domaines,
  .services-section, .section-services
)::after {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: -1 !important;
  pointer-events: none !important;
  opacity: .52 !important;
  background-image:
    radial-gradient(circle, rgba(240,120,24,.34) 1.2px, transparent 1.8px),
    radial-gradient(circle, rgba(29,79,128,.24) 1px, transparent 1.7px),
    radial-gradient(circle, rgba(16,36,58,.16) 1px, transparent 1.8px);
  background-size: 94px 94px, 137px 137px, 181px 181px;
  background-position: 0 0, 42px 61px, 91px 27px;
  animation: ot-section-particles 34s linear infinite;
}
:is(
  section:has(.news-card), section:has(.domain-card), section:has(.activity-card),
  #actualites, #conseils-actualites, #news,
  #domaines, #domaines-activite, #activity-domains,
  #services, #nos-services,
  .news-section, .actualites-section, .section-actualites,
  .domains-section, .domaines-section, .section-domaines,
  .services-section, .section-services
) > * {
  position: relative;
  z-index: 1;
}
@keyframes ot-section-gradient {
  0% { background-position: 0% 40%, 100% 60%, 0% 50%; }
  100% { background-position: 100% 60%, 0% 40%, 100% 50%; }
}
@keyframes ot-section-waves {
  0% { transform: translate3d(-2%, -1%, 0) rotate(-2deg) scale(1.04); }
  100% { transform: translate3d(2%, 2%, 0) rotate(2deg) scale(1.10); }
}
@keyframes ot-section-particles {
  0% { background-position: 0 0, 42px 61px, 91px 27px; }
  100% { background-position: 94px 188px, -95px 198px, 272px -154px; }
}
@media (prefers-reduced-motion: reduce) {
  :is(
    section:has(.news-card), section:has(.domain-card), section:has(.activity-card),
  #actualites, #conseils-actualites, #news,
    #domaines, #domaines-activite, #activity-domains,
    #services, #nos-services,
    .news-section, .actualites-section, .section-actualites,
    .domains-section, .domaines-section, .section-domaines,
    .services-section, .section-services
  ),
  :is(
    section:has(.news-card), section:has(.domain-card), section:has(.activity-card),
  #actualites, #conseils-actualites, #news,
    #domaines, #domaines-activite, #activity-domains,
    #services, #nos-services,
    .news-section, .actualites-section, .section-actualites,
    .domains-section, .domaines-section, .section-domaines,
    .services-section, .section-services
  )::before,
  :is(
    section:has(.news-card), section:has(.domain-card), section:has(.activity-card),
  #actualites, #conseils-actualites, #news,
    #domaines, #domaines-activite, #activity-domains,
    #services, #nos-services,
    .news-section, .actualites-section, .section-actualites,
    .domains-section, .domaines-section, .section-domaines,
    .services-section, .section-services
  )::after { animation: none !important; }
}


/* OREMA-TRIX — optimisation mobile : préserver les effets sans saccades */
@media (max-width: 760px) {
  :is(
    section:has(.news-card), section:has(.domain-card), section:has(.activity-card),
    #actualites, #conseils-actualites, #news,
    #domaines, #domaines-activite, #activity-domains,
    #services, #nos-services,
    .news-section, .actualites-section, .section-actualites,
    .domains-section, .domaines-section, .section-domaines,
    .services-section, .section-services
  ) {
    /* Le dégradé reste visible, mais ne repeint plus en continu l'écran mobile. */
    animation: none !important;
    background-size: 100% 100%, 100% 100%, 100% 100% !important;
  }

  :is(
    section:has(.news-card), section:has(.domain-card), section:has(.activity-card),
    #actualites, #conseils-actualites, #news,
    #domaines, #domaines-activite, #activity-domains,
    #services, #nos-services,
    .news-section, .actualites-section, .section-actualites,
    .domains-section, .domaines-section, .section-domaines,
    .services-section, .section-services
  )::before {
    filter: none !important;
    will-change: transform;
    animation: ot-section-waves-mobile 32s ease-in-out infinite alternate !important;
  }

  :is(
    section:has(.news-card), section:has(.domain-card), section:has(.activity-card),
    #actualites, #conseils-actualites, #news,
    #domaines, #domaines-activite, #activity-domains,
    #services, #nos-services,
    .news-section, .actualites-section, .section-actualites,
    .domains-section, .domaines-section, .section-domaines,
    .services-section, .section-services
  )::after {
    /* Les particules restent visibles, mais leur déplacement est désactivé sur mobile. */
    animation: none !important;
  }
}

@keyframes ot-section-waves-mobile {
  from { transform: translate3d(-1%, -0.5%, 0) scale(1.02); }
  to   { transform: translate3d(1%, 0.5%, 0) scale(1.05); }
}

@media (max-width: 760px) and (prefers-reduced-motion: reduce) {
  :is(
    section:has(.news-card), section:has(.domain-card), section:has(.activity-card),
    #actualites, #conseils-actualites, #news,
    #domaines, #domaines-activite, #activity-domains,
    #services, #nos-services,
    .news-section, .actualites-section, .section-actualites,
    .domains-section, .domaines-section, .section-domaines,
    .services-section, .section-services
  )::before { animation: none !important; }
}


/* OREMA-TRIX — cadrage photographique adapté aux écrans mobiles */
@media (max-width: 760px) {
  .hero-slides {
    overflow: hidden !important;
    min-height: max(650px, calc(100svh - 70px)) !important;
    height: max(650px, calc(100svh - 70px)) !important;
  }
  .hero-slide {
    background-size: cover !important;
    background-repeat: no-repeat !important;
    /* Cadrage par défaut : sujet légèrement décentré pour laisser respirer le texte. */
    background-position: 64% center !important;
  }
  /* Slide 1 : portrait, garder le visage et le buste dans le cadre. */
  .hero-slide:nth-child(1) { background-position: 50% 28% !important; }
  /* Slide 2 : réunion, déplacer le cadrage vers les personnes au centre/droite. */
  .hero-slide:nth-child(2) { background-position: 68% center !important; }
  /* Slide 3 : visuel vertical, garder le réseau lumineux au centre. */
  .hero-slide:nth-child(3) { background-position: 50% center !important; }
  /* Slide 4 : conserver les participants visibles sans couper le visage à gauche. */
  .hero-slide:nth-child(4) { background-position: 38% center !important; }

  .hero-slide::before {
    background:
      linear-gradient(90deg, rgba(7,20,36,.78) 0%, rgba(7,20,36,.48) 58%, rgba(7,20,36,.24) 100%),
      linear-gradient(0deg, rgba(7,20,36,.68) 0%, rgba(7,20,36,.12) 72%) !important;
  }
  .hero-copy { max-width: 100% !important; }
}

/* Bandeau de présentation : cadrage distinct pour la photo de fond sur téléphone. */
@media (max-width: 760px) {
  .home-about-banner-image {
    background-position: 34% 30% !important;
    background-size: cover !important;
    transform: none !important;
  }
  .home-about-banner-overlay {
    background:
      linear-gradient(180deg, rgba(7,20,36,.08) 0%, rgba(7,20,36,.30) 30%, rgba(7,20,36,.90) 76%, rgba(7,20,36,.97) 100%) !important;
  }
}
@media (max-width: 440px) {
  .hero-slides { min-height: max(630px, calc(100svh - 70px)) !important; }
  .hero-slide { background-position: 66% center !important; }
  .hero-slide:nth-child(1) { background-position: 50% 25% !important; }
  .hero-slide:nth-child(2) { background-position: 72% center !important; }
  .hero-slide:nth-child(4) { background-position: 34% center !important; }
  .home-about-banner-image { background-position: 30% 28% !important; }
}



/* OREMA-TRIX — interface mobile compacte et harmonisée sur toutes les pages */
@media (max-width: 760px) {
  html { scroll-padding-top: 68px !important; }

  /* En-tête et identité */
  .site-header .nav-wrap {
    min-height: 64px !important;
    height: auto !important;
    width: calc(100% - 28px) !important;
    gap: 10px !important;
    padding-block: 7px !important;
  }
  .site-header .brand {
    gap: 8px !important;
    font-size: 1rem !important;
    line-height: 1.1 !important;
  }
  .site-header .brand img {
    width: 36px !important;
    height: 36px !important;
  }
  .site-header .brand small {
    font-size: .54rem !important;
    letter-spacing: .045em !important;
    margin-top: 2px !important;
  }

  /* Bouton Menu */
  .site-header .menu-toggle {
    min-height: 40px !important;
    padding: 8px 11px !important;
    gap: 6px !important;
    border-radius: 12px !important;
    font-size: .88rem !important;
    line-height: 1 !important;
  }
  .site-header .menu-toggle svg,
  .site-header .menu-toggle i {
    width: 18px !important;
    height: 18px !important;
    font-size: 18px !important;
  }

  /* Panneau de navigation mobile */
  .site-header .navigation {
    inset: 64px 0 0 !important;
    gap: 3px !important;
    padding: 14px 16px 24px !important;
  }
  .site-header .navigation a:not(.nav-cta):not(.menu-quote) {
    min-height: 42px !important;
    padding: 9px 10px !important;
    font-size: .88rem !important;
    line-height: 1.25 !important;
    border-radius: 9px !important;
  }
  .site-header .navigation .nav-cta,
  .site-header .navigation .menu-quote {
    min-height: 42px !important;
    padding: 10px 14px !important;
    margin-top: 8px !important;
    font-size: .88rem !important;
    border-radius: 12px !important;
  }

  /* Titres, textes et sections */
  .container,
  .orema-photo-hero > .container,
  .orema-photo-hero .container {
    width: calc(100% - 32px) !important;
  }
  .section {
    padding-block: 38px !important;
  }
  .section h2,
  .section-heading h2 {
    font-size: clamp(1.45rem, 6vw, 2rem) !important;
    line-height: 1.15 !important;
  }
  .about-hero, .news-hero, .domains-hero, .page-hero {
    padding: 54px 0 42px !important;
  }
  .about-hero h1, .news-hero h1, .domains-hero h1, .page-hero h1 {
    font-size: clamp(1.85rem, 7.2vw, 2.65rem) !important;
    line-height: 1.08 !important;
  }
  .orema-photo-hero {
    padding: 96px 0 64px !important;
  }
  .orema-photo-hero h1 {
    font-size: clamp(2rem, 8vw, 3rem) !important;
    line-height: 1.08 !important;
  }
  .orema-photo-hero p,
  .orema-photo-hero .lead,
  .orema-photo-hero .hero-description {
    font-size: .94rem !important;
    line-height: 1.65 !important;
  }

  /* Boutons et cartes */
  .button, .ot-button, .hero-actions a, .quote-hero-actions a {
    min-height: 42px !important;
    padding: 10px 15px !important;
    font-size: .86rem !important;
  }
  .domain-card, .activity-card, .info-card, .news-card,
  .portfolio-card, .approach-item {
    border-radius: 14px !important;
    padding: 16px !important;
  }
  .domain-card h3, .activity-card h3, .info-card h3,
  .news-card h3, .portfolio-card h3, .approach-item h3 {
    font-size: 1rem !important;
    line-height: 1.3 !important;
  }
  .domain-card p, .activity-card p, .info-card p,
  .news-card p, .portfolio-card p, .approach-item p {
    font-size: .86rem !important;
    line-height: 1.55 !important;
  }

  /* Formulaires */
  input, select, textarea {
    min-height: 42px !important;
    padding: 9px 11px !important;
    font-size: .9rem !important;
    border-radius: 10px !important;
  }
  textarea { min-height: 100px !important; }

  /* Espacements des grilles et contenus */
  .domains-grid, .news-grid, .portfolio-grid, .activities-grid,
  .services-grid, .cards-grid {
    gap: 12px !important;
  }
}

@media (max-width: 420px) {
  .site-header .nav-wrap { width: calc(100% - 22px) !important; }
  .site-header .brand img { width: 33px !important; height: 33px !important; }
  .site-header .brand small { font-size: .49rem !important; }
  .site-header .menu-toggle { min-height: 38px !important; padding: 7px 9px !important; }
  .site-header .navigation { padding-inline: 12px !important; }
  .hero h1 { font-size: clamp(1.85rem, 8vw, 2.35rem) !important; }
  .hero-description { font-size: .88rem !important; line-height: 1.55 !important; }
}



/* OREMA-TRIX — correctif final : menu compact, contrasté et bleu sur mobile */
@media (min-width: 761px) {
  .site-header .nav-wrap {
    min-height: 78px !important;
    gap: 18px !important;
  }
  .site-header .navigation {
    gap: clamp(9px, 1vw, 16px) !important;
  }
  .site-header .navigation a:not(.nav-cta):not(.menu-quote) {
    color: rgba(255,255,255,.96) !important;
    font-size: .82rem !important;
    font-weight: 650 !important;
    padding: 8px 9px !important;
    border-radius: 10px !important;
  }
  .site-header .navigation a:not(.nav-cta):not(.menu-quote):hover,
  .site-header .navigation a[aria-current="page"]:not(.nav-cta) {
    color: #fff !important;
    background: rgba(240,120,24,.22) !important;
    outline: 1px solid rgba(240,120,24,.42) !important;
    text-decoration: none !important;
  }
  .site-header .navigation .nav-cta,
  .site-header .navigation .menu-quote {
    min-height: 40px !important;
    padding: 10px 16px !important;
    font-size: .78rem !important;
  }
}

/* Mobile : bannière et panneau de navigation bleu marine sur toutes les pages */
@media (max-width: 980px) {
  .site-header,
  body .site-header {
    background: linear-gradient(110deg, #081827 0%, #102b43 58%, #263b4c 100%) !important;
    border-bottom: 1px solid rgba(255,255,255,.14) !important;
    box-shadow: 0 5px 18px rgba(5,18,32,.20) !important;
    backdrop-filter: none !important;
  }
  .site-header .nav-wrap {
    min-height: 62px !important;
    width: calc(100% - 24px) !important;
    padding: 6px 0 !important;
    gap: 8px !important;
  }
  .site-header .brand,
  .site-header .brand span {
    color: #fff !important;
    font-size: .94rem !important;
  }
  .site-header .brand img {
    width: 34px !important;
    height: 34px !important;
  }
  .site-header .brand small {
    color: rgba(255,255,255,.74) !important;
    font-size: .48rem !important;
    letter-spacing: .04em !important;
    margin-top: 2px !important;
  }
  .site-header .menu-toggle {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 36px !important;
    padding: 6px 9px !important;
    gap: 5px !important;
    border-radius: 10px !important;
    border: 1px solid rgba(255,255,255,.30) !important;
    background: rgba(255,255,255,.10) !important;
    color: #fff !important;
    font-size: .78rem !important;
    line-height: 1 !important;
  }
  .site-header .navigation,
  .site-header .navigation.is-open {
    inset: 62px 0 0 !important;
    background: linear-gradient(160deg, #081827 0%, #102b43 100%) !important;
    border-top: 1px solid rgba(255,255,255,.13) !important;
    padding: 12px 14px 22px !important;
    gap: 5px !important;
    box-shadow: 0 14px 28px rgba(5,18,32,.24) !important;
  }
  .site-header .navigation a:not(.nav-cta):not(.menu-quote) {
    display: flex !important;
    align-items: center !important;
    min-height: 36px !important;
    padding: 7px 10px !important;
    margin: 0 !important;
    border: 1px solid rgba(255,255,255,.09) !important;
    border-radius: 9px !important;
    background: rgba(29,79,128,.38) !important;
    color: #fff !important;
    font-size: .78rem !important;
    line-height: 1.2 !important;
    font-weight: 650 !important;
  }
  .site-header .navigation a:not(.nav-cta):not(.menu-quote):hover,
  .site-header .navigation a[aria-current="page"]:not(.nav-cta) {
    background: rgba(240,120,24,.22) !important;
    border-color: rgba(240,120,24,.42) !important;
    color: #fff !important;
  }
  .site-header .navigation .nav-cta,
  .site-header .navigation .menu-quote {
    min-height: 37px !important;
    padding: 8px 12px !important;
    margin-top: 6px !important;
    border-radius: 10px !important;
    background: #f07818 !important;
    color: #fff !important;
    font-size: .78rem !important;
  }
}

@media (max-width: 420px) {
  .site-header .nav-wrap { min-height: 58px !important; }
  .site-header .brand img { width: 31px !important; height: 31px !important; }
  .site-header .brand { font-size: .88rem !important; }
  .site-header .brand small { font-size: .44rem !important; }
  .site-header .menu-toggle { min-height: 34px !important; padding: 5px 8px !important; font-size: .74rem !important; }
  .site-header .navigation,
  .site-header .navigation.is-open { inset: 58px 0 0 !important; padding: 10px 12px 18px !important; }
  .site-header .navigation a:not(.nav-cta):not(.menu-quote) { min-height: 34px !important; font-size: .74rem !important; padding: 6px 9px !important; }
}



/* OREMA-TRIX — menu mobile : accès à tous les onglets et défilement fiable */
@media (max-width: 760px) {
  .site-header .navigation,
  .site-header .navigation.is-open {
    position: fixed !important;
    inset: 0 0 0 auto !important;
    width: min(90vw, 390px) !important;
    height: 100vh !important;
    height: 100dvh !important;
    max-height: 100vh !important;
    max-height: 100dvh !important;
    box-sizing: border-box !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    overscroll-behavior-y: contain !important;
    -webkit-overflow-scrolling: touch !important;
    padding: max(12px, env(safe-area-inset-top)) 14px max(18px, env(safe-area-inset-bottom)) !important;
    gap: 0 !important;
    justify-content: flex-start !important;
    align-items: stretch !important;
    background: linear-gradient(160deg,#081827 0%,#102b43 100%) !important;
    scroll-padding-top: 12px !important;
  }

  .site-header .navigation .menu-panel-head {
    display: flex !important;
    flex: 0 0 auto !important;
    align-items: center !important;
    min-height: 54px !important;
    gap: 8px !important;
    margin: 0 0 10px !important;
    padding: 0 0 10px !important;
    border-bottom: 1px solid rgba(255,255,255,.18) !important;
  }
  .site-header .navigation .menu-panel-brand {
    color: #fff !important;
    font-size: 16px !important;
    gap: 8px !important;
  }
  .site-header .navigation .menu-panel-brand img {
    width: 36px !important;
    height: 36px !important;
  }
  .site-header .navigation .menu-panel-brand small {
    color: rgba(255,255,255,.72) !important;
    font-size: 7px !important;
    letter-spacing: .5px !important;
    margin-top: 3px !important;
  }
  .site-header .navigation .menu-close {
    flex: 0 0 36px !important;
    width: 36px !important;
    height: 36px !important;
    background: rgba(255,255,255,.12) !important;
    border-color: rgba(255,255,255,.24) !important;
    color: #fff !important;
  }
  .site-header .navigation .menu-close svg {
    width: 18px !important;
    height: 18px !important;
  }

  .site-header .navigation .menu-links {
    display: flex !important;
    flex: 0 0 auto !important;
    flex-direction: column !important;
    gap: 5px !important;
    min-height: 0 !important;
  }
  .site-header .navigation .menu-link,
  .site-header .navigation .menu-links .menu-link {
    display: flex !important;
    align-items: center !important;
    flex: 0 0 auto !important;
    width: 100% !important;
    min-height: 42px !important;
    box-sizing: border-box !important;
    gap: 10px !important;
    padding: 5px 9px !important;
    margin: 0 !important;
    border: 1px solid rgba(255,255,255,.10) !important;
    border-radius: 10px !important;
    background: rgba(29,79,128,.38) !important;
    color: #fff !important;
    font-size: 13px !important;
    line-height: 1.2 !important;
    font-weight: 650 !important;
    text-decoration: none !important;
  }
  .site-header .navigation .menu-link[aria-current="page"] {
    background: rgba(240,120,24,.24) !important;
    border-color: rgba(240,120,24,.48) !important;
    color: #fff !important;
    box-shadow: none !important;
  }
  .site-header .navigation .menu-link-icon {
    flex: 0 0 32px !important;
    width: 32px !important;
    height: 32px !important;
    background: rgba(255,255,255,.94) !important;
    color: #102b43 !important;
  }
  .site-header .navigation .menu-link-icon svg {
    width: 17px !important;
    height: 17px !important;
  }
  .site-header .navigation .menu-link-arrow {
    margin-left: auto !important;
    font-size: 20px !important;
  }

  .site-header .navigation .menu-quote,
  .site-header .navigation a.menu-quote {
    display: flex !important;
    flex: 0 0 auto !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    min-height: 40px !important;
    box-sizing: border-box !important;
    margin: 9px 0 10px !important;
    padding: 8px 12px !important;
    border-radius: 10px !important;
    background: #f07818 !important;
    color: #fff !important;
    font-size: 13px !important;
  }

  .site-header .navigation .menu-contact {
    display: flex !important;
    flex: 0 0 auto !important;
    flex-direction: column !important;
    gap: 5px !important;
    margin-top: 2px !important;
    padding: 0 !important;
  }
  .site-header .navigation .menu-contact > a {
    display: flex !important;
    align-items: center !important;
    min-height: 42px !important;
    box-sizing: border-box !important;
    gap: 9px !important;
    padding: 5px 8px !important;
    border-radius: 10px !important;
    background: rgba(255,255,255,.12) !important;
    color: #fff !important;
    font-size: 12px !important;
    line-height: 1.25 !important;
  }
  .site-header .navigation .menu-contact strong {
    color: #fff !important;
    font-size: 12px !important;
  }
  .site-header .navigation .menu-contact small {
    color: rgba(255,255,255,.70) !important;
    font-size: 10px !important;
  }
  .site-header .navigation .contact-badge {
    flex: 0 0 32px !important;
    width: 32px !important;
    height: 32px !important;
  }
  .site-header .navigation .contact-badge svg {
    width: 17px !important;
    height: 17px !important;
  }
  .site-header .navigation .menu-socials {
    display: flex !important;
    flex: 0 0 auto !important;
    flex-direction: column !important;
    gap: 7px !important;
    margin: 12px 0 0 !important;
    padding-top: 10px !important;
    border-top: 1px solid rgba(255,255,255,.18) !important;
  }
  .site-header .navigation .menu-socials strong {
    color: rgba(255,255,255,.78) !important;
    font-size: 12px !important;
  }
  .site-header .navigation .menu-socials > div {
    gap: 8px !important;
  }
  .site-header .navigation .menu-socials a {
    width: 36px !important;
    height: 36px !important;
    font-size: 17px !important;
  }
}
@media (max-width: 390px) {
  .site-header .navigation,
  .site-header .navigation.is-open {
    width: 100% !important;
    padding-left: 12px !important;
    padding-right: 12px !important;
  }
  .site-header .navigation .menu-link {
    min-height: 39px !important;
    font-size: 12px !important;
  }
}