/* =========================================================
   AXL Studios — layout.css
========================================================= */

.pp-navbar{
  position:fixed;
  top:0;
  left:0;
  width:100%;
  max-width:none;
  min-height:var(--nav-h);
  padding:clamp(6px,1.2vw,12px) var(--container-pad) clamp(3px,0.6vw,6px);
  display:flex;
  align-items:center;
  justify-content:space-between;
  background:rgba(21,20,21,0.12);
  -webkit-backdrop-filter:blur(8px) saturate(120%);
  backdrop-filter:blur(8px) saturate(120%);
  z-index:100;
}
.pp-navbar::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  height:1px;
  background:linear-gradient(
    90deg,
    rgba(250,250,251,.22) 0%,
    rgba(250,250,251,.08) 20%,
    rgba(250,250,251,.08) 80%,
    rgba(250,250,251,.22) 100%
  );
  pointer-events:none;
}

.pp-logo{
  position:relative;
  width:200px;
  height:82px;
  -webkit-mask:url("../Logo_Esteso_Bianco.svg") center/contain no-repeat;
  mask:url("../Logo_Esteso_Bianco.svg") center/contain no-repeat;
  background:#FAFAFB;
  transition:background .22s ease,transform .18s ease,filter .22s ease;
  will-change:background,transform,filter;
  display:block;
  cursor:pointer;
  outline:none;
}
.pp-logo:focus-visible{
  outline:2px solid var(--axl-pink-500);
  outline-offset:4px;
}
.pp-nav-left:hover .pp-logo,
.pp-logo:hover,
a.pp-logo:focus-visible{
  background:linear-gradient(90deg,var(--axl-pink-300),var(--axl-pink-600));
  filter:drop-shadow(0 0 10px rgba(238,35,123,.35));
}

.pp-nav{
  display:flex;
  align-items:center;
  gap:clamp(10px,1.6vw,24px);
}
.pp-nav-item{
  position:relative;
  color:#FAFAFB;
  font-family:"Urbanist";
  font-weight:800;
  font-size:clamp(12px,1.1vw,18px);
  text-transform:uppercase;
  line-height:1.2;
  letter-spacing:1px;
  text-decoration:none;
  transition:color .18s ease,text-shadow .18s ease;
}
.pp-nav-item::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:-6px;
  height:2px;
  background:linear-gradient(90deg,var(--axl-pink-300),var(--axl-pink-600));
  transform:scaleX(0);
  transform-origin:left center;
  transition:transform .22s ease;
  opacity:.9;
}
.pp-nav-item:hover{
  color:var(--axl-pink-300);
  text-shadow:0 0 12px rgba(238,35,123,.35);
}
.pp-nav-item:hover::after{ transform:scaleX(1); }
.pp-nav-item:focus-visible{
  outline:2px solid var(--axl-pink-500);
  outline-offset:4px;
  border-radius:6px;
  color:var(--axl-pink-500);
}
.pp-nav-item.is-active,
.pp-nav-item[aria-current="page"]{
  color:var(--axl-pink-500);
}
.pp-nav-item.is-active::after,
.pp-nav-item[aria-current="page"]::after{
  transform:scaleX(1);
}

.pp-contact{
  display:inline-flex;
  align-items:center;
  gap:4px;
}
.pp-contact svg path{ fill:currentColor !important; }
.pp-contact:hover{ color:var(--axl-pink-300); }

.pp-menu-toggle{
  position:absolute;
  opacity:0;
  pointer-events:none;
}
.pp-burger{
  display:none;
  width:22px;
  height:16px;
  position:relative;
  cursor:pointer;
  margin-left:12px;
}
.pp-burger span{
  position:absolute;
  left:0;
  width:100%;
  height:2px;
  background:#FAFAFB;
  border-radius:2px;
  transition:transform .22s ease,opacity .18s ease;
  transform-origin:center;
}
.pp-burger span:nth-child(1){ top:0; }
.pp-burger span:nth-child(2){ top:calc(50% - 1px); }
.pp-burger span:nth-child(3){ bottom:0; }

@media (max-width:1024px){
  .pp-burger{
    display:block;
    z-index:1001;
    position:relative;
    -webkit-tap-highlight-color:transparent;
  }

  .pp-nav{
    position:fixed;
    inset:auto 0 0 0;
    top:var(--nav-h);
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    gap:16px;
    padding:16px var(--container-pad) 24px;
    background:rgba(21,20,21,0.92);
    -webkit-backdrop-filter:blur(10px) saturate(120%);
    backdrop-filter:blur(10px) saturate(120%);
    border-top:1px solid rgba(250,250,251,.08);
    z-index:101;
    max-height:0;
    opacity:0;
    visibility:hidden;
    pointer-events:none;
    transform:translateY(-6px);
    transition:max-height .25s ease,opacity .22s ease,transform .22s ease,visibility 0s linear .22s;
  }
  .pp-nav-item{
    display:block;
    font-size:clamp(18px,4.6vw,22px);
    font-weight:800;
    letter-spacing:.5px;
    padding:10px 0;
  }
  .pp-menu-toggle:checked ~ nav.pp-nav{
    position:fixed;
    inset:0;
    top:0;
    left:0;
    right:0;
    bottom:0;
    width:100vw;
    height:100dvh;
    padding:calc(var(--nav-h) + 12px) var(--container-pad) 24px;
    z-index:999;
    background:#000 !important;
    max-height:none;
    opacity:1;
    visibility:visible;
    pointer-events:auto;
    transform:none;
    transition:opacity .22s ease,transform .22s ease,visibility 0s;
    overflow-y:auto;
  }
  .pp-menu-toggle:checked ~ nav.pp-nav::before{
    content:"";
    position:fixed;
    inset:0;
    background:#000;
    z-index:0;
  }
  .pp-menu-toggle:checked ~ nav.pp-nav .pp-nav-item{
    position:relative;
    z-index:1000;
    color:var(--axl-pink-300);
  }
  .pp-menu-toggle:checked + label.pp-burger span:nth-child(1){
    transform:translateY(7px) rotate(45deg);
  }
  .pp-menu-toggle:checked + label.pp-burger span:nth-child(2){
    opacity:0;
    transform:scaleX(.5);
  }
  .pp-menu-toggle:checked + label.pp-burger span:nth-child(3){
    transform:translateY(-7px) rotate(-45deg);
  }
}

@supports(selector(body:has(#ppMenu:checked))){
  body:has(#ppMenu:checked){ overflow:hidden; }
}

.pp-navbar{
  padding-left:calc(var(--container-pad) + env(safe-area-inset-left));
  padding-right:calc(var(--container-pad) + env(safe-area-inset-right));
}

@media (max-width:560px){
  .pp-navbar{ padding:10px var(--container-pad); }
  .pp-logo{ width:66px; }
  :root{ --glass-blur:8px; }
}

@media (min-width:1920px){
  .pp-hero-inner{
    padding-inline:0;
  }

  .pp-services-head,
  .pp-projects-head,
  .pp-team-head,
  .pp-toolkit-head,
  .pp-faq-head,
  .pp-contact-section .pp-contact-head{
    padding-inline:0;
  }

  .pp-projects-stack,
  .pp-team-grid,
  .pp-toolkit-block,
  .pp-faq-list,
  .pp-contact-section .pp-contact-toprow,
  .pp-contact-section .pp-contact-body{
    padding-inline:0;
  }

  .pp-services-strip{
    width:100%;
  }

  .pp-services,
  .pp-projects,
  .pp-team,
  .pp-toolkit,
  .pp-faq,
  .pp-contact-section{
    padding-block:120px 160px;
  }
}