@media (max-width: 1100px) {
  body.nav-active {
    overflow: hidden !important;
  }

  .site-header .mobile-wrapper {
    position: static !important;
  }

  .site-header .hamburger {
    position: relative !important;
    width: 46px !important;
    height: 46px !important;
    display: inline-grid !important;
    place-items: center !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 1px solid rgba(255, 255, 255, 0.22) !important;
    border-radius: 7px !important;
    background: rgba(255, 255, 255, 0.04) !important;
    color: var(--portfolio-home-heading) !important;
    cursor: pointer !important;
    transition: border-color 180ms ease, background 180ms ease, transform 180ms ease !important;
  }

  .site-header .hamburger:hover,
  .site-header .hamburger:focus-visible,
  .site-header .hamburger.active {
    border-color: var(--portfolio-home-accent) !important;
    background: rgba(253, 91, 56, 0.14) !important;
    transform: translateY(-1px) !important;
  }

  .site-header .hamburger__icon,
  .site-header .hamburger__icon::before,
  .site-header .hamburger__icon::after {
    width: 21px !important;
    height: 2px !important;
    display: block !important;
    border-radius: 2px !important;
    background: currentColor !important;
    content: "" !important;
    transition: transform 180ms ease !important;
  }

  .site-header .hamburger__icon { position: relative !important; }
  .site-header .hamburger__icon::before,
  .site-header .hamburger__icon::after { position: absolute !important; left: 0 !important; }
  .site-header .hamburger__icon::before { top: -7px !important; }
  .site-header .hamburger__icon::after { top: 7px !important; }
  .site-header .hamburger.active .hamburger__icon { background: transparent !important; }
  .site-header .hamburger.active .hamburger__icon::before { transform: translateY(7px) rotate(45deg) !important; }
  .site-header .hamburger.active .hamburger__icon::after { transform: translateY(-7px) rotate(-45deg) !important; }

  .site-header .fat-nav {
    position: fixed !important;
    inset: 0 !important;
    z-index: 9999 !important;
    display: block !important;
    overflow-y: auto !important;
    overscroll-behavior: contain !important;
    border-top: 3px solid var(--portfolio-home-accent) !important;
    background: #101010 !important;
    color: var(--portfolio-home-heading) !important;
    opacity: 0 !important;
    pointer-events: none !important;
    transform: translate3d(105%, 0, 0) !important;
    visibility: hidden !important;
    transition: transform 320ms cubic-bezier(0.22, 1, 0.36, 1), opacity 220ms ease, visibility 0s linear 320ms !important;
  }

  .site-header .fat-nav.active {
    opacity: 1 !important;
    pointer-events: auto !important;
    transform: translate3d(0, 0, 0) !important;
    visibility: visible !important;
    transition: transform 320ms cubic-bezier(0.22, 1, 0.36, 1), opacity 220ms ease, visibility 0s linear 0s !important;
  }

  .site-header .fat-nav__wrapper {
    width: min(600px, calc(100% - 40px)) !important;
    min-height: 100dvh !important;
    display: flex !important;
    align-items: center !important;
    margin: 0 auto !important;
    padding: max(94px, env(safe-area-inset-top)) 0 max(42px, env(safe-area-inset-bottom)) !important;
  }

  .site-header .fat-list,
  .site-header .mob-nav { width: 100% !important; }
  .site-header .mob-nav { gap: 0 !important; }
  .site-header .mob-nav > li { border-top: 1px solid rgba(255, 255, 255, 0.15) !important; }
  .site-header .mob-nav > li:last-child { border-bottom: 1px solid rgba(255, 255, 255, 0.15) !important; }

  .site-header .mob-nav > li > a,
  .site-header .portfolio-mobile-services-row > a {
    min-height: 58px !important;
    padding: 13px 0 !important;
    color: var(--portfolio-home-heading) !important;
    -webkit-text-fill-color: var(--portfolio-home-heading) !important;
    font-size: clamp(24px, 4.2vw, 32px) !important;
    font-weight: 700 !important;
    line-height: 1.08 !important;
    text-decoration: none !important;
    text-transform: uppercase !important;
  }

  .site-header .mob-nav > li > a:hover,
  .site-header .mob-nav > li > a:focus-visible,
  .site-header .portfolio-mobile-services-row > a:hover,
  .site-header .portfolio-mobile-services-row > a:focus-visible {
    color: var(--portfolio-home-accent) !important;
    -webkit-text-fill-color: var(--portfolio-home-accent) !important;
  }

  .site-header .portfolio-mobile-services-row {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 46px !important;
    align-items: center !important;
    gap: 14px !important;
  }

  .site-header .portfolio-mobile-submenu-toggle {
    width: 42px !important;
    height: 42px !important;
    display: inline-grid !important;
    place-items: center !important;
    padding: 0 !important;
    border: 1px solid rgba(255, 255, 255, 0.18) !important;
    border-radius: 6px !important;
    background: transparent !important;
    color: var(--portfolio-home-heading) !important;
    cursor: pointer !important;
  }

  .site-header .portfolio-mobile-submenu-toggle .portfolio-nav-caret { transform: translateY(-2px) rotate(45deg) !important; }
  .site-header .portfolio-services-menu.is-open .portfolio-mobile-submenu-toggle { border-color: var(--portfolio-home-accent) !important; color: var(--portfolio-home-accent) !important; }
  .site-header .portfolio-services-menu.is-open .portfolio-mobile-submenu-toggle .portfolio-nav-caret { transform: translateY(2px) rotate(225deg) !important; }

  .site-header .fat-nav .portfolio-services-submenu {
    display: none !important;
    width: 100% !important;
    margin: 0 0 16px !important;
    padding: 4px 0 12px !important;
    border: 0 !important;
    border-left: 1px solid rgba(253, 91, 56, 0.48) !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  .site-header .fat-nav .portfolio-services-menu.is-open .portfolio-services-submenu { display: grid !important; }

  .site-header .fat-nav .portfolio-services-submenu a {
    padding: 9px 0 9px 17px !important;
    color: rgba(231, 228, 220, 0.82) !important;
    -webkit-text-fill-color: rgba(231, 228, 220, 0.82) !important;
    font-size: 17px !important;
    font-weight: 600 !important;
    line-height: 1.25 !important;
  }
}

@media (max-width: 1100px) {
  /* Phone navigation is intentionally independent from the desktop header layout. */
  .site-header .elementor-element-80aab2f {
    width: 100% !important;
    min-height: 0 !important;
    background: transparent !important;
    border: 0 !important;
    backdrop-filter: none !important;
    pointer-events: none !important;
  }
  .site-header .elementor-element-80aab2f > .elementor-element-43e5001,
  .site-header .elementor-element-80aab2f > .elementor-element-43e5001 > .e-con-inner,
  .site-header .elementor-element-59a2313 {
    width: 100% !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  .site-header .elementor-element-59a2313 {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    justify-content: flex-end !important;
    gap: 0 !important;
  }
  .site-header .elementor-element-0faaca2 {
    display: none !important;
  }
  .site-header .elementor-element-182c7de {
    width: 48px !important;
    flex: 0 0 48px !important;
    margin-left: auto !important;
    margin-right: 0 !important;
    padding: 0 !important;
  }
  .site-header .mobile-wrapper { pointer-events: auto !important; }
  .site-header .hamburger {
    position: fixed !important;
    z-index: 10001 !important;
    top: max(16px, env(safe-area-inset-top)) !important;
    right: 16px !important;
    left: auto !important;
    bottom: auto !important;
    width: 48px !important;
    height: 48px !important;
    margin: 0 !important;
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.28) !important;
  }
  .site-header .hamburger.active {
    position: fixed !important;
    top: max(16px, env(safe-area-inset-top)) !important;
    right: 16px !important;
    left: auto !important;
    bottom: auto !important;
    z-index: 10001 !important;
  }
  .site-header .portfolio-mobile-menu-brand {
    position: fixed !important;
    z-index: 10000 !important;
    top: max(24px, env(safe-area-inset-top)) !important;
    left: 64px !important;
    right: 76px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;
    color: var(--portfolio-home-heading) !important;
    -webkit-text-fill-color: var(--portfolio-home-heading) !important;
    font-family: "Barlow Condensed", sans-serif !important;
    font-size: clamp(18px, 5vw, 22px) !important;
    font-weight: 800 !important;
    line-height: 1 !important;
    text-align: center !important;
    text-decoration: none !important;
    white-space: nowrap !important;
  }
  .site-header .portfolio-mobile-menu-brand img {
    width: 34px !important;
    height: 34px !important;
    flex: 0 0 34px !important;
    object-fit: contain !important;
  }
  .site-header .fat-nav__wrapper {
    width: calc(100% - 16px) !important;
    align-items: flex-start !important;
    padding-top: max(134px, calc(env(safe-area-inset-top) + 112px)) !important;
  }
  .site-header .fat-nav {
    width: auto !important;
    min-width: 0 !important;
    left: 0 !important;
    right: 0 !important;
  }
  .site-header .mob-nav > li > a,
  .site-header .portfolio-mobile-services-row > a {
    min-height: 54px !important;
    font-size: clamp(18px, 5.4vw, 22px) !important;
  }

  /* This continuous desktop marquee starts mid-word on a narrow viewport. */
  body.home .elementor-6 .elementor-element-6d86f70 {
    display: none !important;
  }

  body.nav-active .ss-chat-launcher,
  body.nav-active .ss-chat-panel {
    display: none !important;
  }
}

@media (max-width: 1100px) and (prefers-reduced-motion: reduce) {
  .site-header .fat-nav {
    transition: none !important;
  }
}

@media (max-width: 767px) {
  body.home .elementor-6 .elementor-element.elementor-element-bd6a93e {
    min-height: 720px !important;
    padding-top: 132px !important;
    padding-bottom: 48px !important;
    background-position: 66% center !important;
  }
}

@media (min-width: 768px) and (max-width: 1100px) {
  .site-header .hamburger,
  .site-header .hamburger.active {
    top: max(18px, env(safe-area-inset-top)) !important;
    right: 24px !important;
    width: 52px !important;
    height: 52px !important;
  }

  .site-header .portfolio-mobile-menu-brand {
    top: max(30px, env(safe-area-inset-top)) !important;
    left: 132px !important;
    right: 132px !important;
    font-size: 24px !important;
  }

  .site-header .portfolio-mobile-menu-brand img {
    width: 38px !important;
    height: 38px !important;
    flex-basis: 38px !important;
  }

  .site-header .fat-nav__wrapper {
    width: min(780px, calc(100% - 72px)) !important;
    max-width: 780px !important;
    padding-top: max(160px, calc(env(safe-area-inset-top) + 138px)) !important;
  }

  .site-header .fat-list,
  .site-header .mob-nav {
    max-width: 100% !important;
  }

  .site-header .mob-nav > li > a,
  .site-header .portfolio-mobile-services-row > a {
    min-height: 68px !important;
    font-size: 34px !important;
  }

  .site-header .portfolio-mobile-submenu-toggle {
    width: 48px !important;
    height: 48px !important;
  }
}

@media (max-width: 390px) {
  .site-header .portfolio-navbar-mark { width: 38px !important; height: 38px !important; flex-basis: 38px !important; }
  .site-header .portfolio-navbar-name { font-size: 19px !important; }
}