/* =========================================================
   ABPE WORKS — COMPANY PROFILE V3
   GLOBAL RESPONSIVE

   Used across all pages
   ========================================================= */


/* =========================================================
   01. LARGE LAPTOP
   <= 1280px
   ========================================================= */

@media (max-width: 1280px) {

  :root {
    --page-inline: clamp(24px, 3vw, 48px);
    --navbar-height: 86px;
  }


  /* NAVBAR */

  .nav-brand img {
    height: 68px;
  }

  .nav-menu {
    gap: 28px;
  }

  .nav-link {
    font-size: 0.8rem;
  }

  .nav-cta {
    padding-inline: 16px;
  }


  /* MEGA MENU */

  .mega-menu {
    width: min(
      calc(100vw - (var(--page-inline) * 2)),
      1040px
    );
  }

  .mega-menu-grid {
    gap: 36px;
  }

  .mega-menu-intro {
    min-height: 300px;
  }


  /* FOOTER */

  .footer-top {
    grid-template-columns:
      minmax(0, 1.5fr)
      minmax(150px, 0.5fr)
      minmax(150px, 0.5fr);

    gap: 60px;
  }

}


/* =========================================================
   02. TABLET / SMALL LAPTOP
   <= 1024px

   Navigation switches to mobile mode here.
   ========================================================= */

@media (max-width: 1024px) {

  :root {
    --navbar-height: 80px;
  }


  /* =======================================================
     NAVBAR
     ======================================================= */

  .site-header {
    position:
      sticky;

    top:
      0;

    z-index:
      var(--z-menu);
  }

  .navbar {
    min-height:
      var(--navbar-height);

    background:
      rgba(247, 249, 252, 0.98);
  }

  .nav-brand img {
    height:
      60px;
  }

  .nav-toggle {
    display:
      inline-flex;
  }

  .nav-actions .nav-cta {
    display:
      none;
  }


  /* =======================================================
     MOBILE NAV PANEL
     ======================================================= */

  .nav-menu {
    position:
      fixed;

    z-index:
      calc(var(--z-menu) - 1);

    top:
      var(--navbar-height);

    left:
      0;

    right:
      0;

    bottom:
      0;

    display:
      flex;

    flex-direction:
      column;

    align-items:
      stretch;

    justify-content:
      flex-start;

    gap:
      0;

    width:
      100%;

    height:
      calc(100dvh - var(--navbar-height));

    padding:
      28px
      var(--page-inline)
      calc(40px + env(safe-area-inset-bottom));

    background:
      rgba(247, 249, 252, 0.985);

    backdrop-filter:
      blur(24px);

    -webkit-backdrop-filter:
      blur(24px);

    overflow-x:
      hidden;

    overflow-y:
      auto;

    overscroll-behavior:
      contain;

    -webkit-overflow-scrolling:
      touch;

    opacity:
      0;

    visibility:
      hidden;

    pointer-events:
      none;

    transform:
      translate3d(0, -12px, 0);

    transition:
      opacity 320ms var(--ease-out),
      visibility 320ms var(--ease-out),
      transform 360ms var(--ease-out);
  }

  .nav-menu.is-open {
    opacity:
      1;

    visibility:
      visible;

    pointer-events:
      auto;

    transform:
      translate3d(0, 0, 0);
  }


  /* =======================================================
     MOBILE NAV ITEMS
     ======================================================= */

  .nav-item {
    width: 100%;

    border-bottom:
      1px solid var(--line);
  }

  .nav-link {
    display:
      flex;

    align-items:
      center;

    justify-content:
      space-between;

    width:
      100%;

    min-height:
      68px;

    padding:
      0;

    color:
      var(--text-heading);

    font-size:
      clamp(1.6rem, 4vw, 2.5rem);

    font-weight:
      400;

    line-height:
      1;

    letter-spacing:
      -0.04em;
  }

  .nav-link::after {
    display: none;
  }

  .nav-link:hover,
  .nav-link.is-active {
    color:
      var(--abpe-blue);
  }

  .nav-chevron {
    width: 18px;

    height: 18px;
  }


  /* =======================================================
     MOBILE MEGA MENU
     ======================================================= */

  .mega-menu {
    position:
      static;

    top:
      auto;

    left:
      auto;

    width:
      100%;

    max-height:
      0;

    padding:
      0;

    background:
      transparent;

    border:
      0;

    box-shadow:
      none;

    opacity:
      1;

    visibility:
      visible;

    pointer-events:
      none;

    transform:
      none;

    overflow:
      hidden;

    transition:
      max-height 600ms var(--ease-out),
      padding-bottom 420ms var(--ease-out);
  }

  .nav-item.is-open .mega-menu {
    max-height:
      1200px;

    padding-bottom:
      26px;

    pointer-events:
      auto;

    transform:
      none;
  }

  .mega-menu-grid {
    display: block;
  }

  .mega-menu-intro {
    display: none;
  }

  .mega-services {
    display: grid;

    grid-template-columns:
      repeat(2, minmax(0, 1fr));

    gap: 0 30px;
  }

  .mega-service {
    min-height: 62px;

    padding: 0;

    border-bottom:
      1px solid var(--line-soft);
  }

  .mega-service:hover {
    background:
      transparent;
  }

  .mega-service-name {
    font-size:
      0.85rem;
  }

  .mega-service-number {
    display: none;
  }


  /* =======================================================
     FOOTER
     ======================================================= */

  .footer-top {
    grid-template-columns:
      minmax(0, 1fr)
      repeat(2, minmax(150px, 0.35fr));

    gap:
      50px 40px;
  }

  .footer-statement {
    font-size:
      clamp(2.8rem, 7vw, 5rem);
  }

}


/* =========================================================
   03. TABLET PORTRAIT / MOBILE
   <= 768px
   ========================================================= */

@media (max-width: 768px) {

  :root {
    --page-inline: 20px;

    --navbar-height: 76px;

    --section-space:
      clamp(80px, 16vw, 120px);

    --section-space-small:
      clamp(60px, 12vw, 90px);
  }


  /* =======================================================
     GLOBAL
     ======================================================= */

  body {
    font-size:
      0.95rem;
  }

  .lead {
    font-size:
      1rem;
  }

  .eyebrow {
    font-size:
      0.66rem;
  }

  .eyebrow::before {
    width:
      18px;
  }


  /* =======================================================
     NAVBAR
     ======================================================= */

  .navbar {
    padding-inline:
      20px;
  }

  .nav-brand img {
    height:
      56px;
  }

  .nav-toggle {
    width:
      42px;

    height:
      42px;
  }

  .nav-menu {
    padding:
      22px
      20px
      calc(35px + env(safe-area-inset-bottom));
  }

  .nav-link {
    min-height:
      64px;

    padding:
      0;

    font-size:
      clamp(1.5rem, 7vw, 2.3rem);
  }


  /* =======================================================
     MEGA MENU
     ======================================================= */

  .mega-services {
    grid-template-columns:
      1fr;
  }

  .mega-service {
    min-height:
      58px;
  }

  .mega-service-name {
    font-size:
      0.82rem;
  }

  .mega-service-arrow {
    font-size:
      0.85rem;
  }


  /* =======================================================
     BUTTONS
     ======================================================= */

  .btn {
    min-height:
      50px;

    padding-inline:
      20px;
  }

  .btn-arrow {
    width:
      50px;

    height:
      50px;

    flex-basis:
      50px;
  }


  /* =======================================================
     FOOTER
     ======================================================= */

  .footer-inner {
    padding:
      75px 20px 24px;
  }

  .footer-top {
    grid-template-columns:
      repeat(2, minmax(0, 1fr));

    gap:
      55px 30px;
  }

  .footer-brand {
    grid-column:
      1 / -1;
  }

  .footer-logo {
    max-width:
      125px;
  }

  .footer-statement {
    max-width:
      600px;

    font-size:
      clamp(2.8rem, 12vw, 5.2rem);

    line-height:
      0.88;
  }

  .footer-bottom {
    align-items:
      flex-start;

    flex-direction:
      column;

    gap:
      18px;

    margin-top:
      70px;
  }

}


/* =========================================================
   04. SMALL MOBILE
   <= 560px
   ========================================================= */

@media (max-width: 560px) {

  :root {
    --page-inline: 16px;

    --navbar-height: 72px;

    --radius-md: 14px;
    --radius-lg: 20px;
  }


  /* =======================================================
     NAVBAR
     ======================================================= */

  .navbar {
    padding-inline:
      16px;
  }

  .nav-brand img {
    height:
      52px;
  }

  .nav-toggle {
    width:
      40px;

    height:
      40px;
  }

  .nav-menu {
    padding:
      18px
      16px
      calc(30px + env(safe-area-inset-bottom));
  }

  .nav-link {
    min-height:
      60px;

    padding:
      0;

    font-size:
      clamp(1.45rem, 8vw, 2rem);
  }


  /* =======================================================
     MEGA MENU
     ======================================================= */

  .mega-service {
    min-height:
      54px;
  }

  .mega-service-name {
    font-size:
      0.78rem;
  }

  .soon-badge {
    margin-left:
      5px;

    padding:
      3px 6px;

    font-size:
      0.48rem;
  }


  /* =======================================================
     GLOBAL TYPE
     ======================================================= */

  .display-xl,
  .display,
  .display-sm,
  .heading-xl,
  .heading-lg,
  .heading-md {
    text-wrap:
      balance;
  }


  /* =======================================================
     BUTTONS
     ======================================================= */

  .btn {
    min-height:
      48px;

    padding:
      0 18px;

    font-size:
      0.8rem;
  }


  /* =======================================================
     FOOTER
     ======================================================= */

  .footer-inner {
    padding:
      65px 16px 22px;
  }

  .footer-top {
    grid-template-columns:
      1fr;

    gap:
      42px;
  }

  .footer-brand {
    grid-column:
      auto;
  }

  .footer-statement {
    font-size:
      clamp(2.6rem, 13vw, 4rem);
  }

  .footer-column-title {
    margin-bottom:
      18px;
  }

  .footer-links {
    gap:
      11px;
  }

  .footer-bottom {
    margin-top:
      55px;

    padding-top:
      18px;
  }

  .footer-socials {
    flex-wrap:
      wrap;

    gap:
      14px;
  }

}


/* =========================================================
   05. VERY SMALL MOBILE
   <= 380px
   ========================================================= */

@media (max-width: 380px) {

  .nav-brand img {
    height:
      48px;
  }

  .nav-link {
    font-size:
      1.4rem;
  }

  .mega-service-name {
    font-size:
      0.74rem;
  }

  .footer-statement {
    font-size:
      2.65rem;
  }

}


/* =========================================================
   06. LANDSCAPE MOBILE
   ========================================================= */

@media (
  max-width: 1024px
) and (
  max-height: 560px
) and (
  orientation: landscape
) {

  :root {
    --navbar-height:
      68px;
  }

  .nav-brand img {
    height:
      48px;
  }

  .nav-menu {
    padding-top:
      14px;
  }

  .nav-link {
    min-height:
      52px;

    font-size:
      1.35rem;
  }

  .mega-service {
    min-height:
      48px;
  }

}


/* =========================================================
   07. TOUCH DEVICES
   ========================================================= */

@media (hover: none) and (pointer: coarse) {

  .nav-cta:hover,
  .btn:hover,
  .btn-arrow:hover,
  .text-link:hover,
  .footer-link:hover {
    transform:
      none;
  }

  .hover-zoom:hover img {
    transform:
      none;
  }

}


/* =========================================================
   08. REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

  .nav-menu {
    transition:
      none;
  }

  .mega-menu {
    transition:
      none;
  }

  .nav-toggle-lines::before,
  .nav-toggle-lines::after {
    transition:
      none;
  }

}


/* =========================================================
   09. SAFE AREA
   iPhone / devices with notch
   ========================================================= */

@supports (
  padding:
  max(0px)
) {

  @media (max-width: 1024px) {

    .navbar {
      padding-left:
        max(
          var(--page-inline),
          env(safe-area-inset-left)
        );

      padding-right:
        max(
          var(--page-inline),
          env(safe-area-inset-right)
        );
    }

    .nav-menu {
      padding-left:
        max(
          var(--page-inline),
          env(safe-area-inset-left)
        );

      padding-right:
        max(
          var(--page-inline),
          env(safe-area-inset-right)
        );

      padding-bottom:
        max(
          35px,
          env(safe-area-inset-bottom)
        );
    }

  }

}