/* ==========================================================================
   ROUND 3.13: MOBILE NAVIGATION + ABOVE-FOLD RELEVANCE
   ========================================================================== */

/* Keep the accessibility link hidden on touch interactions. */
.skip-link:focus{transform:translateY(-160%)}
.skip-link:focus-visible{transform:none}

.refined-hero-audience{
  margin:0 0 20px;
  padding:16px 0 15px;
  border-top:1px solid rgba(255,255,255,.11);
  border-bottom:1px solid rgba(255,255,255,.11);
}
.refined-hero-audience span{
  display:block;
  margin-bottom:8px;
  color:#f36b3c;
  font:8px var(--mono);
  letter-spacing:.09em;
  text-transform:uppercase;
}
.refined-hero-audience p{
  max-width:620px;
  margin:0;
  color:rgba(255,255,255,.72);
  font-size:13px;
  font-weight:650;
  line-height:1.45;
}
.refined-audience-line{display:none}

@media(max-width:1040px){
  .site-header,
  .refined-hero-home .site-header{
    background:#11110f;
    -webkit-backdrop-filter:none;
    backdrop-filter:none;
    isolation:isolate;
  }
  .nav-shell{position:relative}
  .menu-toggle{
    position:relative;
    z-index:1003;
  }
  .menu-toggle span:not(.sr-only){
    transform-origin:center;
    transition:transform .28s cubic-bezier(.16,1,.3,1),opacity .2s;
  }
  .menu-toggle[aria-expanded="true"] span:not(.sr-only):first-child{
    transform:translateY(4px) rotate(45deg);
  }
  .menu-toggle[aria-expanded="true"] span:not(.sr-only):nth-child(2){
    transform:translateY(-4px) rotate(-45deg);
  }
  .site-nav{
    position:fixed;
    z-index:1002;
    top:74px;
    right:0;
    bottom:auto;
    left:0;
    width:100%;
    height:calc(100dvh - 74px);
    min-height:calc(100vh - 74px);
    display:flex;
    flex-direction:column;
    align-items:stretch;
    gap:0;
    padding:clamp(24px,4vw,42px) max(24px,calc((100vw - var(--max))/2));
    overflow-y:auto;
    overscroll-behavior:contain;
    -webkit-overflow-scrolling:touch;
    background:#11110f;
    box-shadow:0 24px 70px rgba(0,0,0,.46);
    opacity:0;
    transform:translate3d(100%,0,0);
    visibility:hidden;
    pointer-events:none;
    transition:transform .38s cubic-bezier(.16,1,.3,1),opacity .22s ease,visibility 0s .38s;
  }
  .site-nav.open{
    opacity:1;
    transform:translate3d(0,0,0);
    visibility:visible;
    pointer-events:auto;
    transition-delay:0s;
  }
  .site-nav a{
    display:block;
    padding:20px 0;
    border-bottom:1px solid rgba(255,255,255,.12);
    color:rgba(255,255,255,.78);
    font-size:clamp(28px,5vw,44px);
    font-weight:620;
    line-height:1.04;
    letter-spacing:-.035em;
  }
  .site-nav a[aria-current="page"]{color:#fff}
  .site-nav .nav-cta{
    margin-top:24px;
    padding:21px 20px;
    border:0;
    background:#f36b3c;
    color:#11110f!important;
    font-size:clamp(20px,3vw,28px);
    font-weight:720;
    letter-spacing:-.025em;
    text-align:center;
  }
}

@media(max-width:760px){
  .site-nav{
    top:68px;
    height:calc(100dvh - 68px);
    min-height:calc(100vh - 68px);
    padding:18px 15px 36px;
  }
  .site-nav a{
    padding:19px 10px;
    font-size:31px;
  }
  .site-nav .nav-cta{
    margin-top:20px;
    padding:20px 16px;
    font-size:21px;
  }
  .refined-hero-shell{
    padding-top:31px;
  }
  .refined-hero-copy{
    min-width:0;
    width:100%;
  }
  .refined-hero-display{
    width:100%;
    max-width:100%;
    font-size:clamp(42px,11.45vw,51px);
    line-height:.885;
    letter-spacing:-.064em;
  }
  .refined-hero-line{
    width:100%;
    max-width:100%;
    white-space:nowrap;
  }
  .refined-hero-line--outgrown strong{
    letter-spacing:-.058em!important;
  }
  .refined-hero-line--three{font-size:.79em}
  .refined-hero-line--signal{font-size:.64em}
  .refined-hero-lower{width:100%;margin-top:24px}
  .refined-hero-audience{margin-bottom:18px;padding:14px 0}
  .refined-hero-audience p{font-size:12px;line-height:1.5}
  .refined-hero-deck{font-size:15px;line-height:1.5}
}

@media(max-width:390px){
  .refined-hero-display{font-size:11.15vw}
  .refined-hero-line--signal{font-size:.645em}
  .site-nav a{font-size:29px}
}