/*
 * Mobile-only bottom navigation.
 * On mobile, the primary navigation is always available as a bottom dock.
 * Desktop and tablet header behavior remains unchanged.
 */
@media (max-width: 760px) {
  :root {
    --mobile-dock-height: 4.45rem;
    --mobile-dock-edge: max(.625rem, env(safe-area-inset-left));
    --mobile-dock-bottom: max(.625rem, env(safe-area-inset-bottom));
  }

  body {
    padding-bottom: calc(var(--mobile-dock-height) + var(--mobile-dock-bottom) + .75rem);
  }

  .site-header,
  .site-bar,
  .shared-header {
    position: fixed !important;
    z-index: 3000 !important;
    top: auto !important;
    right: auto !important;
    bottom: var(--mobile-dock-bottom) !important;
    left: 50% !important;
    width: min(calc(100vw - 1.25rem - env(safe-area-inset-left) - env(safe-area-inset-right)), 32rem) !important;
    min-height: var(--mobile-dock-height) !important;
    height: var(--mobile-dock-height) !important;
    display: grid !important;
    grid-template-columns: 3.3rem minmax(0, 1fr) !important;
    align-items: stretch !important;
    gap: .2rem !important;
    padding: .35rem !important;
    overflow: visible !important;
    border: 1px solid rgba(255,255,255,.82) !important;
    border-radius: 1.45rem !important;
    background:
      radial-gradient(circle at 12% -40%, rgba(255,255,255,.98), transparent 42%),
      radial-gradient(circle at 84% 145%, rgba(92,145,244,.22), transparent 48%),
      linear-gradient(118deg, rgba(255,255,255,.84), rgba(232,240,253,.7) 50%, rgba(255,255,255,.8)) !important;
    color: #05142e !important;
    box-shadow:
      0 1.15rem 3.25rem rgba(5,20,46,.2),
      inset 0 1px 0 rgba(255,255,255,.98),
      inset 0 -1px 0 rgba(85,120,177,.12) !important;
    -webkit-backdrop-filter: blur(26px) saturate(175%) !important;
    backdrop-filter: blur(26px) saturate(175%) !important;
    transform: translateX(-50%) !important;
    animation: mobile-dock-enter .48s cubic-bezier(.16,1,.3,1) both !important;
    isolation: isolate;
  }

  .site-header::before,
  .site-bar::before,
  .shared-header::before {
    content: "";
    position: absolute;
    z-index: -1;
    inset: 1px;
    border-radius: inherit;
    background: linear-gradient(110deg, rgba(255,255,255,.5), transparent 32%, rgba(105,157,255,.1) 72%, rgba(255,255,255,.38));
    pointer-events: none;
  }

  .site-header > .brand,
  .site-bar > .brandmark,
  .shared-header > .brand {
    position: relative !important;
    z-index: 1 !important;
    width: auto !important;
    min-width: 2.75rem !important;
    min-height: 2.75rem !important;
    display: grid !important;
    grid-template-rows: 1.35rem auto !important;
    place-items: center !important;
    align-content: center !important;
    gap: .05rem !important;
    padding: .18rem .12rem !important;
    border-radius: 1rem !important;
    color: #05142e !important;
    font-family: var(--body, "Manrope", sans-serif) !important;
    text-decoration: none !important;
    -webkit-tap-highlight-color: transparent;
    transition: color .25s ease, background-color .25s ease, transform .25s ease !important;
  }

  .site-header > .brand span,
  .site-bar > .brandmark span,
  .shared-header > .brand span,
  .site-header > .brand i,
  .site-bar > .brandmark i,
  .shared-header > .brand i {
    display: none !important;
  }

  .site-header > .brand::before,
  .site-bar > .brandmark::before,
  .shared-header > .brand::before {
    content: "";
    display: block;
    width: 1.08rem;
    height: 1.08rem;
    background: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round' d='M3 10.5 12 3l9 7.5v9a1.5 1.5 0 0 1-1.5 1.5h-15A1.5 1.5 0 0 1 3 19.5zM9 21v-7h6v7'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round' d='M3 10.5 12 3l9 7.5v9a1.5 1.5 0 0 1-1.5 1.5h-15A1.5 1.5 0 0 1 3 19.5zM9 21v-7h6v7'/%3E%3C/svg%3E") center / contain no-repeat;
  }

  .site-header > .brand::after,
  .site-bar > .brandmark::after,
  .shared-header > .brand::after {
    content: "Home";
    display: block;
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .025em;
    line-height: 1;
    text-transform: none;
  }

  .home-preview .site-header > .brand {
    background: rgba(243,106,33,.12) !important;
    color: #d85210 !important;
    box-shadow: inset 0 0 0 1px rgba(243,106,33,.18);
  }

  .site-header > .primary-nav,
  .site-bar > .site-nav,
  .shared-header > .shared-nav {
    position: static !important;
    z-index: 1 !important;
    inset: auto !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
    height: 100% !important;
    display: grid !important;
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    align-items: stretch !important;
    justify-self: stretch !important;
    gap: .08rem !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    color: #05142e !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
  }

  .site-header > .primary-nav a,
  .site-bar > .site-nav a,
  .shared-header > .shared-nav a {
    position: relative !important;
    min-width: 0 !important;
    min-height: 2.75rem !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: .18rem !important;
    padding: .18rem .04rem !important;
    border-radius: .95rem !important;
    color: #35435b !important;
    font-family: var(--body, "Manrope", sans-serif) !important;
    font-size: clamp(.7rem, 2.55vw, .75rem) !important;
    font-weight: 600 !important;
    letter-spacing: 0 !important;
    line-height: 1 !important;
    text-align: center !important;
    text-decoration: none !important;
    text-transform: none !important;
    white-space: nowrap;
    -webkit-tap-highlight-color: transparent;
    transition: color .25s ease, background-color .25s ease, transform .25s ease !important;
  }

  .site-header > .primary-nav a::before,
  .site-bar > .site-nav a::before,
  .shared-header > .shared-nav a::before {
    content: "";
    display: block;
    width: 1.12rem;
    height: 1.12rem;
    flex: 0 0 1.12rem;
    background: currentColor;
    -webkit-mask-position: center;
    -webkit-mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-position: center;
    mask-size: contain;
    mask-repeat: no-repeat;
  }

  .site-header > .primary-nav a:nth-child(1)::before,
  .site-bar > .site-nav a:nth-child(1)::before,
  .shared-header > .shared-nav a:nth-child(1)::before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='black' stroke-width='1.7'%3E%3Crect x='3' y='3' width='7' height='7' rx='1.4'/%3E%3Crect x='14' y='3' width='7' height='7' rx='1.4'/%3E%3Crect x='3' y='14' width='7' height='7' rx='1.4'/%3E%3Crect x='14' y='14' width='7' height='7' rx='1.4'/%3E%3C/g%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='black' stroke-width='1.7'%3E%3Crect x='3' y='3' width='7' height='7' rx='1.4'/%3E%3Crect x='14' y='3' width='7' height='7' rx='1.4'/%3E%3Crect x='3' y='14' width='7' height='7' rx='1.4'/%3E%3Crect x='14' y='14' width='7' height='7' rx='1.4'/%3E%3C/g%3E%3C/svg%3E");
  }
  .site-header > .primary-nav a:nth-child(2)::before,
  .site-bar > .site-nav a:nth-child(2)::before,
  .shared-header > .shared-nav a:nth-child(2)::before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round'%3E%3Ccircle cx='9' cy='8' r='3'/%3E%3Ccircle cx='17' cy='9' r='2.3'/%3E%3Cpath d='M3.5 20c.5-4.2 2.2-6.3 5.5-6.3s5 2.1 5.5 6.3M14 14.6c.8-.7 1.7-1 2.9-1 2.5 0 3.8 1.8 4.1 5.4'/%3E%3C/g%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round'%3E%3Ccircle cx='9' cy='8' r='3'/%3E%3Ccircle cx='17' cy='9' r='2.3'/%3E%3Cpath d='M3.5 20c.5-4.2 2.2-6.3 5.5-6.3s5 2.1 5.5 6.3M14 14.6c.8-.7 1.7-1 2.9-1 2.5 0 3.8 1.8 4.1 5.4'/%3E%3C/g%3E%3C/svg%3E");
  }
  .site-header > .primary-nav a:nth-child(3)::before,
  .site-bar > .site-nav a:nth-child(3)::before,
  .shared-header > .shared-nav a:nth-child(3)::before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 10.5V17M12 7h.01'/%3E%3C/g%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 10.5V17M12 7h.01'/%3E%3C/g%3E%3C/svg%3E");
  }
  .site-header > .primary-nav a:nth-child(4)::before,
  .site-bar > .site-nav a:nth-child(4)::before,
  .shared-header > .shared-nav a:nth-child(4)::before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 3h9l3 3v15H6zM15 3v4h4M9 11h6M9 15h6'/%3E%3C/g%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 3h9l3 3v15H6zM15 3v4h4M9 11h6M9 15h6'/%3E%3C/g%3E%3C/svg%3E");
  }
  .site-header > .primary-nav a:nth-child(5)::before,
  .site-bar > .site-nav a:nth-child(5)::before,
  .shared-header > .shared-nav a:nth-child(5)::before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='black' stroke-width='1.7' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='2'/%3E%3Cpath d='m4 7 8 6 8-6'/%3E%3C/g%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='black' stroke-width='1.7' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='2'/%3E%3Cpath d='m4 7 8 6 8-6'/%3E%3C/g%3E%3C/svg%3E");
  }

  .site-header > .primary-nav a::after,
  .site-bar > .site-nav a::after,
  .shared-header > .shared-nav a::after {
    display: none !important;
  }

  .site-header > .primary-nav a[aria-current="page"],
  .site-bar > .site-nav a[aria-current="page"],
  .shared-header > .shared-nav a[aria-current="page"] {
    background: rgba(243,106,33,.12) !important;
    color: #d85210 !important;
    box-shadow: inset 0 0 0 1px rgba(243,106,33,.18);
  }

  .site-header > .brand:hover,
  .site-bar > .brandmark:hover,
  .shared-header > .brand:hover,
  .site-header > .primary-nav a:hover,
  .site-bar > .site-nav a:hover,
  .shared-header > .shared-nav a:hover {
    background: rgba(32,89,200,.09) !important;
    color: #2059c8 !important;
  }

  .site-header > .brand:active,
  .site-bar > .brandmark:active,
  .shared-header > .brand:active,
  .site-header > .primary-nav a:active,
  .site-bar > .site-nav a:active,
  .shared-header > .shared-nav a:active {
    transform: scale(.95) !important;
  }

  .site-header > .brand:focus-visible,
  .site-bar > .brandmark:focus-visible,
  .shared-header > .brand:focus-visible,
  .site-header > .primary-nav a:focus-visible,
  .site-bar > .site-nav a:focus-visible,
  .shared-header > .shared-nav a:focus-visible {
    outline: 2px solid #f36a21 !important;
    outline-offset: 0 !important;
  }

  .site-header > .header-action,
  .site-bar > .site-cta,
  .shared-header > .shared-header-action,
  .site-header > .menu-button,
  .site-bar > .nav-toggle,
  .shared-header > .menu-button {
    display: none !important;
  }

  .whatsapp-cta,
  .home-whatsapp {
    right: max(.75rem, env(safe-area-inset-right)) !important;
    bottom: calc(var(--mobile-dock-height) + var(--mobile-dock-bottom) + .75rem) !important;
  }
}

/* Keep the mobile dock tactile while making the glass layer visually lighter. */
@media (max-width: 760px) {
  :root { --mobile-dock-height: 4.15rem; }
  .site-header,
  .site-bar,
  .shared-header {
    border-color: rgba(255,255,255,.68) !important;
    background:
      radial-gradient(circle at 12% -45%, rgba(255,255,255,.78), transparent 42%),
      radial-gradient(circle at 84% 150%, rgba(92,145,244,.16), transparent 48%),
      linear-gradient(118deg, rgba(255,255,255,.58), rgba(232,240,253,.4) 50%, rgba(255,255,255,.52)) !important;
    box-shadow: 0 .9rem 2.5rem rgba(5,20,46,.15), inset 0 1px 0 rgba(255,255,255,.82), inset 0 -1px 0 rgba(85,120,177,.08) !important;
    -webkit-backdrop-filter: blur(30px) saturate(170%) !important;
    backdrop-filter: blur(30px) saturate(170%) !important;
  }
}

@keyframes mobile-dock-enter {
  from { opacity: 0; transform: translate3d(-50%, 1.25rem, 0); }
  to { opacity: 1; transform: translate3d(-50%, 0, 0); }
}

@media (max-width: 760px) and (prefers-reduced-transparency: reduce) {
  .site-header,
  .site-bar,
  .shared-header {
    border-color: rgba(5,20,46,.14) !important;
    background: #f7f9fc !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }
  .site-header::before,
  .site-bar::before,
  .shared-header::before { display: none; }
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  @media (max-width: 760px) {
    .site-header,
    .site-bar,
    .shared-header {
      border-color: rgba(5,20,46,.14) !important;
      background: #f7f9fc !important;
    }
  }
}

@media (max-width: 760px) and (prefers-reduced-motion: reduce) {
  .site-header,
  .site-bar,
  .shared-header {
    animation: none !important;
  }
  .site-header > .brand,
  .site-bar > .brandmark,
  .shared-header > .brand,
  .site-header > .primary-nav a,
  .site-bar > .site-nav a,
  .shared-header > .shared-nav a,
  .whatsapp-cta,
  .home-whatsapp {
    transition: none !important;
  }
}

/* Very small phones keep the five primary destinations usable through a tactile tab strip. */
@media (max-width: 390px) {
  :root {
    --mobile-dock-edge: max(.25rem, env(safe-area-inset-left));
    --mobile-dock-bottom: max(.35rem, env(safe-area-inset-bottom));
  }
  .site-header,
  .site-bar,
  .shared-header {
    width: calc(100vw - .5rem - env(safe-area-inset-left) - env(safe-area-inset-right)) !important;
    grid-template-columns: 3rem minmax(0, 1fr) !important;
    padding: .3rem !important;
    border-radius: 1.25rem !important;
  }
  .site-header > .primary-nav,
  .site-bar > .site-nav,
  .shared-header > .shared-nav {
    display: flex !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    overscroll-behavior-inline: contain;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .site-header > .primary-nav::-webkit-scrollbar,
  .site-bar > .site-nav::-webkit-scrollbar,
  .shared-header > .shared-nav::-webkit-scrollbar { display: none; }
  .site-header > .primary-nav a,
  .site-bar > .site-nav a,
  .shared-header > .shared-nav a {
    flex: 0 0 3.4rem !important;
    scroll-snap-align: center;
    font-size: .66rem !important;
  }
}