/* Shared mobile navigation behavior across the three approved mobile/tablet ranges. */
@media (max-width: 479px), (min-width: 480px) and (max-width: 767px), (min-width: 768px) and (max-width: 1023px) {
  .we-header .we-nav { display: none; }
  .we-header__actions > [data-teleport-mobile] { display: none; }
  .we-menu-toggle { position: relative; z-index: 1210; display: inline-grid; }

  .we-mobile-portal {
    position: fixed;
    z-index: 1500;
    inset-block-start: calc(var(--we-header-viewport-bottom, var(--we-header-stack-height)) + 8px);
    inset-block-end: max(8px, env(safe-area-inset-bottom));
    left: var(--we-header-inline-gap);
    right: auto;
    display: grid;
    grid-template-rows: minmax(0, 1fr) auto;
    max-width: calc(100vw - 16px);
    overflow: auto;
    overflow-x: clip;
    overscroll-behavior: contain;
    border: 1px solid var(--we-border);
    border-radius: calc(var(--we-header-radius) + 2px);
    background: color-mix(in srgb, var(--we-surface) 97%, transparent);
    color: var(--we-text);
    box-shadow: var(--shadow-lg);
    backdrop-filter: blur(20px) saturate(140%);
    -webkit-backdrop-filter: blur(20px) saturate(140%);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translate3d(-112%,0,0);
    transform-origin: left center;
    will-change: transform, opacity;
    transition: transform 360ms cubic-bezier(.2,.8,.2,1), opacity 220ms var(--ease-standard), visibility 360ms step-end;
  }

  html[dir="rtl"] .we-mobile-portal {
    left: auto;
    right: var(--we-header-inline-gap);
    transform: translate3d(112%,0,0);
    transform-origin: right center;
  }

  html[dir="rtl"] .we-mobile-portal.is-open { transform: translate3d(0,0,0); }

  .we-mobile-portal:not([hidden]) { display: grid; }

  .we-mobile-portal.is-open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translate3d(0,0,0);
    transition: transform 360ms cubic-bezier(.2,.8,.2,1), opacity 220ms var(--ease-standard), visibility 0s step-start;
  }
  .we-mobile-portal .we-nav { display: block; min-width: 0; margin: 0; }
  .we-mobile-portal .we-nav-list { display: grid; align-items: stretch; gap: 6px; }
  .we-mobile-portal .we-nav-item { width: 100%; min-width: 0; }
  .we-mobile-portal .we-nav-item.has-children { grid-template-columns: minmax(0, 1fr) 40px; align-items: center; }
  .we-mobile-portal .we-nav-link { width: 100%; min-width: 0; min-height: 44px; padding: 11px 12px; border-radius: 12px 0 0 12px; color: var(--we-muted); }
  html[dir="rtl"] .we-mobile-portal .we-nav-link { border-radius: 0 12px 12px 0; }
  .we-mobile-portal .we-nav-item:not(.has-children) > .we-nav-link { border-radius: 12px; }
  .we-mobile-portal .we-nav-item.has-children:hover > .we-nav-link,
  .we-mobile-portal .we-nav-item.has-children:hover > .we-submenu-toggle,
  .we-mobile-portal .we-nav-item.has-children.is-submenu-open > .we-nav-link,
  .we-mobile-portal .we-nav-item.has-children.is-submenu-open > .we-submenu-toggle,
  .we-mobile-portal .we-nav-link[aria-current="page"],
  .we-mobile-portal .we-nav-item.is-current-branch > .we-nav-link { background: var(--we-surface-2); color: var(--we-text); }
  .we-mobile-portal .we-submenu-toggle { width: 38px; height: 38px; margin-inline: 1px; border: 1px dotted color-mix(in srgb, var(--we-border) 86%, transparent); border-radius: 10px; background: transparent; color: var(--we-muted); box-shadow: none; }
  .we-mobile-portal .we-submenu-toggle:hover, .we-mobile-portal .we-submenu-toggle:focus-visible { border-color: color-mix(in srgb, var(--we-border) 86%, transparent); background: var(--we-surface-2); color: var(--we-text); box-shadow: none; }
  .we-mobile-portal .we-submenu { display: none; grid-column: 1 / -1; position: static; width: auto; min-width: 0; margin-block: 4px 8px; padding: 6px 0 6px 14px; border: 0; border-inline-start: 1px solid var(--we-border); border-radius: 0; background: transparent; box-shadow: none; opacity: 1; visibility: visible; pointer-events: auto; transform: none; backdrop-filter: none; }
  html[dir="rtl"] .we-mobile-portal .we-submenu { padding: 6px 14px 6px 0; }
  .we-mobile-portal .we-nav-item.is-submenu-open > .we-submenu { display: grid; gap: 4px; }
  .we-mobile-portal .we-nav-item--level-2 { grid-template-columns: minmax(0, 1fr) 38px; }
  .we-mobile-portal .we-nav-link--level-2 { font-size: .92rem; }
  .we-mobile-portal .we-submenu--level-3 { width: calc(100% - 18px); margin-block-start: 6px; margin-inline-start: 18px; padding-inline-start: 10px; border-inline-start-style: dashed; background: transparent; }
  .we-mobile-portal .we-nav-link--level-3 { min-height: 40px; padding-block: 8px; font-size: .84rem; }
  .we-mobile-portal .we-nav-item--level-2.is-submenu-open > .we-submenu-toggle svg { transform: rotate(180deg); }
  .we-mobile-portal .we-mega-menu__column { padding: 0; border: 0; background: transparent; }
  .we-mobile-portal .we-mega-menu__description { margin-inline: 12px; }
  .we-mobile-portal__tools { display: grid; gap: 12px; padding-top: 16px; border-top: 1px solid var(--we-border); }
  .we-mobile-portal [data-teleport-mobile] { display: block; }
  .we-mobile-portal .we-header__cta { width: 100%; }
  .we-language__toggle { width: 42px; min-width: 42px; padding: 0; justify-content: center; }
  .we-language__text, .we-language__chevron { display: none; }
  .we-language__flag { width: 24px; height: 16px; }
  .we-language__menu { min-width: 176px; grid-template-columns: repeat(3, 44px); justify-content: center; padding: 9px; }
  .we-language__menu a { width: 44px; min-height: 40px; justify-content: center; padding: 0; }
  .we-language__menu a[aria-current="true"] { background: var(--we-surface-2); box-shadow: none; }

  body::before { content: ""; position: fixed; z-index: 1300; inset: 0; background: rgba(2,7,13,.58); backdrop-filter: blur(2px); opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 240ms var(--ease-standard), visibility 240ms step-end; }
  body.we-nav-open { overflow: hidden; }
  body.we-nav-open::before { opacity: 1; visibility: visible; pointer-events: auto; transition: opacity 240ms var(--ease-standard), visibility 0s step-start; }
}

/* Desktop navigation behavior for the approved laptop and desktop ranges. */
@media (min-width: 1024px) and (max-width: 1439px), (min-width: 1440px) {
  .we-nav-item--level-1 > .we-nav-link { white-space: nowrap; }

  .we-nav-item--level-1 > .we-submenu,
  .we-dropdown-menu .we-nav-item--level-2 > .we-submenu {
    display: grid;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(-8px) scale(.99);
    transition: opacity 160ms var(--ease-standard), visibility 180ms step-end, transform 190ms var(--ease-standard);
  }

  .we-nav-item--level-1.is-submenu-open > .we-submenu,
  .we-dropdown-menu .we-nav-item--level-2.is-submenu-open > .we-submenu {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0) scale(1);
    transition: opacity 160ms var(--ease-standard), visibility 0s step-start, transform 190ms var(--ease-standard);
  }

  .we-dropdown-menu {
    position: fixed;
    z-index: 1210;
    inset-block-start: var(--we-desktop-submenu-top, calc(100% + var(--we-submenu-gap, 8px)));
    left: var(--we-dropdown-left, var(--we-header-inline-gap));
    right: auto;
    width: var(--we-dropdown-width);
    gap: 4px;
    padding: var(--we-dropdown-padding);
    border-radius: var(--we-dropdown-radius);
  }

  .we-dropdown-menu::before,
  .we-mega-menu::before { content: ""; position: absolute; inset-inline: 0; inset-block-start: calc(-1 * var(--we-submenu-gap, 14px) - 3px); height: calc(var(--we-submenu-gap, 14px) + 4px); }
  .we-dropdown-menu .we-nav-link { padding: var(--we-dropdown-link-block) var(--we-dropdown-link-inline); border-radius: 10px; }
  .we-dropdown-menu .we-nav-item--level-2 > .we-submenu-toggle svg { transform: rotate(-90deg); }
  html[dir="rtl"] .we-dropdown-menu .we-nav-item--level-2 > .we-submenu-toggle svg { transform: rotate(90deg); }

  .we-dropdown-menu .we-submenu--level-3 {
    position: absolute;
    inset-block-start: calc(-1 * var(--we-dropdown-padding));
    inset-inline-start: calc(100% + var(--we-flyout-gap, 18px) + var(--we-dropdown-padding));
    width: var(--we-flyout-width);
    gap: 4px;
    padding: var(--we-dropdown-padding);
    border-radius: var(--we-dropdown-radius);
    background: color-mix(in srgb, var(--we-surface) 96%, transparent);
  }

  .we-dropdown-menu .we-submenu--level-3.is-flipped { inset-inline-start: auto; inset-inline-end: calc(100% + var(--we-flyout-gap, 18px) + var(--we-dropdown-padding)); }
  .we-dropdown-menu .we-submenu--level-3::before { content: ""; position: absolute; inset-block: 0; inset-inline-start: calc(-1 * (var(--we-flyout-gap, 18px) + var(--we-dropdown-padding)) - 3px); width: calc(var(--we-flyout-gap, 18px) + var(--we-dropdown-padding) + 4px); }
  .we-dropdown-menu .we-submenu--level-3.is-flipped::before { inset-inline-start: auto; inset-inline-end: calc(-1 * (var(--we-flyout-gap, 18px) + var(--we-dropdown-padding)) - 3px); }

  .we-mega-menu {
    position: fixed;
    z-index: 1210;
    inset-block-start: var(--we-desktop-submenu-top, calc(100% + var(--we-submenu-gap, 8px)));
    left: 50%;
    width: min(calc(100vw - (var(--we-header-inline-gap) * 2)), var(--we-mega-width));
    max-height: calc(100dvh - var(--we-header-viewport-bottom, var(--we-header-stack-height)) - var(--we-submenu-gap, 14px) - 18px);
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--we-mega-gap);
    padding: var(--we-mega-padding);
    overflow-y: auto;
    overscroll-behavior: contain;
    border-radius: var(--we-mega-radius);
    transform: translate(-50%, -8px) scale(.995);
  }

  .we-nav-item--level-1.is-submenu-open > .we-mega-menu { transform: translate(-50%, 0) scale(1); }
  .we-nav-item--columns-2 > .we-mega-menu { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .we-nav-item--columns-4 > .we-mega-menu { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .we-mega-menu__column { display: block; padding: var(--we-mega-column-padding); border: 1px solid var(--we-border); border-radius: 15px; background: var(--we-surface-2); transition: background-color var(--we-transition), transform var(--we-transition); }
  .we-mega-menu__column:hover { border-color: var(--color-border-strong); transform: translateY(-1px); }
  .we-mega-menu__column > .we-nav-link--level-2 { color: var(--we-text); font-weight: 850; }
  .we-mega-menu__column > .we-submenu-toggle { display: none; }
  .we-mega-menu .we-submenu--level-3 { position: static; display: grid; gap: 2px; margin-top: 12px; padding: 0; border: 0; background: transparent; box-shadow: none; opacity: 1; visibility: visible; pointer-events: auto; transform: none; backdrop-filter: none; }
  .we-mega-menu .we-nav-link--level-3 { padding: 8px 9px; border-radius: 9px; color: var(--we-muted); font-size: .84rem; }
  .we-mega-menu .we-nav-link--level-3:hover { background: var(--we-surface-2); color: var(--we-text); }
}

/* Mobile portrait: 0–479px */
@media (max-width: 479px) {
  .we-header__bar { gap: 4px; }
  .we-header__actions { gap: 4px; }
  .we-icon-button { width: 40px; height: 40px; min-width: 40px; }
  .we-language { --we-language-toggle-height: 40px; }
  .we-language__toggle { height: 40px; }
  .we-brand .webema-logo { max-width: min(var(--webema-logo-max-width), calc(100vw - 224px)); }
  .we-mobile-portal { width: min(calc(100vw - (var(--we-header-inline-gap) * 2)), 350px); padding: 14px; }
  .we-hero { grid-template-columns: 1fr; text-align: center; }
  .we-hero__content .we-eyebrow, .we-hero__actions, .we-hero__stats { justify-content: center; }
  .we-hero__description { margin-inline: auto; }
  .we-hero__stats { grid-template-columns: repeat(2, 1fr); }
  .we-hero__visual { min-height: 0; }
  .we-hero__artwork { width: min(100%, 390px); }
  .we-content-media { grid-template-columns: 1fr; gap: 36px; }
  .we-content-media.is-start .we-content-media__visual { order: 0; }
  .we-project-card { grid-template-columns: 1fr; grid-template-rows: auto auto auto auto; }
  .we-project-card__media { grid-row: auto; min-height: 240px; }
  .we-project-card__tag, .we-project-card h3, .we-project-card p { grid-column: 1; margin-inline: 24px; }
  .we-stats { grid-template-columns: 1fr 1fr; gap: 24px 0; padding: 28px 18px; }
  .we-stats > span:nth-child(2) { border: 0; }
  .we-process__item { grid-template-columns: 58px 1fr; gap: 0 18px; }
  .we-cta { grid-template-columns: 1fr; }
  .we-cta__actions { grid-column: 1; grid-row: auto; margin: 16px 0 0; }
  .we-contact { grid-template-columns: 1fr; }
  .we-contact > .we-eyebrow, .we-contact > h2, .we-contact > p, .we-contact > .we-form { grid-column: 1; grid-row: auto; }
  .we-form__row { grid-template-columns: 1fr; }
  .we-footer { grid-template-columns: 1fr; grid-template-areas: "brand" "text" "links" "contact" "bottom"; }
  .we-footer__bottom { display: grid; gap: 8px; }
  .we-search-dialog { place-items: stretch; padding: 0; }
  .we-search { width: 100%; min-height: 100dvh; max-height: none; padding: 18px var(--container-gutter); border: 0; border-radius: 0; }
  .we-search-result { grid-template-columns: 48px minmax(0,1fr); }
  .we-search-result img, .we-search-result__mark { width: 48px; height: 48px; }
  .we-search-result__terms { grid-column: 2; grid-row: auto; justify-content: start; margin-top: 5px; }
}

/* Mobile landscape and large mobile: 480–767px */
@media (min-width: 480px) and (max-width: 767px) {
  .we-header__actions { gap: 8px; }
  .we-language__menu { min-width: 184px; }
  .we-mobile-portal { width: min(78vw, 420px); padding: 17px; }
  .we-hero { grid-template-columns: 1fr; text-align: center; }
  .we-hero__content .we-eyebrow, .we-hero__actions, .we-hero__stats { justify-content: center; }
  .we-hero__description { margin-inline: auto; }
  .we-hero__stats { grid-template-columns: repeat(4, 1fr); }
  .we-hero__visual { min-height: 0; }
  .we-hero__artwork { width: min(100%, 460px); }
  .we-content-media { grid-template-columns: 1fr; gap: 40px; }
  .we-project-card { grid-template-columns: 1fr; grid-template-rows: auto auto auto auto; }
  .we-project-card__media { grid-row: auto; min-height: 280px; }
  .we-project-card__tag, .we-project-card h3, .we-project-card p { grid-column: 1; }
  .we-stats { grid-template-columns: repeat(2, 1fr); gap: 24px 0; }
  .we-stats > span:nth-child(2) { border: 0; }
  .we-cta { grid-template-columns: 1fr; }
  .we-cta__actions { grid-column: 1; grid-row: auto; margin: 16px 0 0; }
  .we-contact { grid-template-columns: 1fr; }
  .we-contact > .we-eyebrow, .we-contact > h2, .we-contact > p, .we-contact > .we-form { grid-column: 1; grid-row: auto; }
  .we-footer { grid-template-columns: 1fr 1fr; grid-template-areas: "brand brand" "text text" "links contact" "bottom bottom"; }
  .we-search-dialog { padding: 24px var(--container-gutter); }
  .we-search { max-height: calc(100dvh - 48px); }
  .we-search-result { grid-template-columns: 52px minmax(0,1fr); }
  .we-search-result__terms { grid-column: 2; grid-row: auto; justify-content: start; }
}

/* Tablet: 768–1023px */
@media (min-width: 768px) and (max-width: 1023px) {
  .we-language__menu { min-width: 184px; }
  .we-mobile-portal { width: min(56vw, 480px); padding: 20px; }
  .we-hero { grid-template-columns: 1fr; text-align: center; }
  .we-hero__content .we-eyebrow, .we-hero__actions, .we-hero__stats { justify-content: center; }
  .we-hero__description { margin-inline: auto; }
  .we-hero__visual { min-height: 0; }
  .we-hero__artwork { width: min(100%, 520px); }
  .we-content-media { grid-template-columns: 1fr; gap: 44px; }
  .we-project-card { grid-template-columns: 1fr; grid-template-rows: auto auto auto auto; }
  .we-project-card__media { grid-row: auto; min-height: 300px; }
  .we-project-card__tag, .we-project-card h3, .we-project-card p { grid-column: 1; }
  .we-footer { grid-template-columns: 1.2fr 1fr; grid-template-areas: "brand links" "text links" "contact contact" "bottom bottom"; }
  .we-search-dialog { padding: 48px var(--container-gutter); }
  .we-search { max-height: calc(100dvh - 96px); }
}

/* Laptop: 1024–1439px */
@media (min-width: 1024px) and (max-width: 1439px) {
  :root { --we-dropdown-width: 296px; --we-flyout-width: 278px; --we-dropdown-padding: 10px; --we-dropdown-radius: 16px; --we-dropdown-link-block: 10px; --we-dropdown-link-inline: 11px; --we-submenu-gap: 8px; --we-flyout-gap: 18px; --we-mega-width: 1120px; --we-mega-gap: 18px; --we-mega-padding: 22px; --we-mega-radius: 20px; --we-mega-column-padding: 16px; }
  .we-nav-list { gap: clamp(10px, 1.15vw, 18px); }
  .we-nav-item--level-1 > .we-nav-link { min-height: 46px; font-size: .87rem; }
  .we-header__actions { gap: 8px; }
  .we-header__cta { padding-inline: 16px; }
  .we-hero { grid-template-columns: minmax(0, .95fr) minmax(420px, 1.05fr); gap: 48px; }
  .we-hero__artwork { width: min(100%, 570px); }
  .we-content-media { gap: 56px; }
}

/* Desktop: 1440px+ */
@media (min-width: 1440px) {
  :root { --we-dropdown-width: 318px; --we-flyout-width: 296px; --we-dropdown-padding: 11px; --we-dropdown-radius: 18px; --we-dropdown-link-block: 11px; --we-dropdown-link-inline: 12px; --we-submenu-gap: 8px; --we-flyout-gap: 20px; --we-mega-width: 1280px; --we-mega-gap: 22px; --we-mega-padding: 26px; --we-mega-radius: 22px; --we-mega-column-padding: 18px; }
  .we-nav-list { gap: clamp(18px, 1.5vw, 30px); }
  .we-nav-item--level-1 > .we-nav-link { min-height: 48px; }
  .we-hero { grid-template-columns: minmax(0, .92fr) minmax(520px, 1.08fr); gap: 72px; }
  .we-hero__artwork { width: min(100%, 650px); }
}