@media(max-width:900px){
  .hgrid,.two,.sgrid,.legal-wrap{grid-template-columns:1fr}
  .hero.home{padding-top:110px;min-height:auto}
  .sec.intro{padding:60px 0 40px}
  .hphone{margin-top:30px}
  .sec{padding:70px 0}
  .menu-btn{display:block}

  /* --- Mobile Header & Menu Open State (100% Opaque, Zero Translucency) --- */
  html.noscroll,body.noscroll{overflow:hidden;height:100%;scroll-behavior:auto!important}
  
  .hdr.menu-open,
  body.noscroll .hdr{
    backdrop-filter:none!important;
    -webkit-backdrop-filter:none!important;
    background:#071739!important;
    border-color:transparent!important;
    z-index:99!important;
  }
  .hdr.menu-open .brand,
  body.noscroll .hdr .brand{
    position:relative;
    z-index:100;
    color:#FFFFFF!important;
  }
  .hdr.menu-open .menu-btn,
  body.noscroll .hdr .menu-btn{
    position:relative;
    z-index:100;
    color:#FFFFFF!important;
  }

  /* --- Mobile Navigation Drawer (Explicitly Controlled High Contrast) --- */
  nav{
    position:fixed;
    inset:0;
    width:100%;
    height:100vh;
    height:100dvh;
    background:#071739!important; /* Deep Navy, 100% opaque */
    color:#FFFFFF!important;
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    justify-content:flex-start;
    gap:4px;
    padding:100px 36px 40px;
    box-sizing:border-box;
    overflow-y:auto;
    -webkit-overflow-scrolling:touch;
    overscroll-behavior:contain;
    opacity:0;
    visibility:hidden;
    pointer-events:none;
    z-index:95;
  }
  nav.open{
    opacity:1!important;
    visibility:visible!important;
    pointer-events:auto!important;
  }
  nav a{
    font-size:2rem;
    font-weight:800;
    padding:8px 0;
    opacity:0;
    transform:translateY(16px);
    transition:opacity .3s var(--ease),transform .35s var(--ease),color .2s var(--ease);
    color:#FFFFFF!important;
    background:none!important;
    text-decoration:none!important;
    display:inline-flex;
    align-items:center;
    gap:10px;
    width:fit-content;
  }
  nav a:visited{
    color:#FFFFFF!important;
  }
  nav a:hover,
  nav a:focus{
    color:#01E9BD!important;
    background:none!important;
  }
  nav a:active{
    color:#01E9BD!important;
    background:none!important;
  }
  nav a[aria-current="page"]{
    color:#01E9BD!important;
  }
  nav a[aria-current="page"]::before{
    content:"";
    display:inline-block;
    width:8px;
    height:8px;
    border-radius:50%;
    background-color:#01E9BD;
    box-shadow:0 0 10px #01E9BD;
  }
  nav a:not(.btn)::after{
    display:none!important;
  }
  nav.open a{
    opacity:1!important;
    transform:none!important;
  }
  nav.open a:nth-child(2){transition-delay:.05s}
  nav.open a:nth-child(3){transition-delay:.10s}
  nav.open a:nth-child(4){transition-delay:.15s}
  nav.open a:nth-child(5){transition-delay:.20s}
  nav.open a:nth-child(6){transition-delay:.25s}
  nav.open a:nth-child(7){transition-delay:.30s}

  nav .btn{
    font-size:1.05rem;
    margin-top:16px;
    background-color:#01E9BD!important;
    color:var(--dark)!important;
    box-shadow:0 8px 24px rgba(1,233,189,.35);
  }
  nav .btn:hover{
    background-color:var(--brand-accent)!important;
    color:var(--dark)!important;
    transform:translateY(-2px);
    box-shadow:0 10px 28px rgba(1,233,189,.55);
  }
  nav .btn:active{
    background-color:#00CDA6!important;
    color:var(--dark)!important;
    transform:translateY(0);
  }

  /* --- Responsive Phone Frame (Tablet Scale) --- */
  .phone{
    --phone-pad:6px;
    --phone-border:1.5px;
    --phone-radius:36px;
    --screen-radius:28.5px;
    --phone-shadow:0 16px 40px rgba(0,0,0,.4);
  }

  .sgrid{gap:0}
  .sstick{order:-1;top:70px;height:62vh;gap:20px}
  .big.phone,.phone.big{width:200px}
  .sstep{min-height:70vh}
  .dots{display:none}
  .t-lg,.t-m,.t-s{grid-column:span 12;flex-direction:column;min-height:0}
  .t-lg .vis,.vis{margin:20px 0 -34px;height:240px;justify-content:center}
  .phone.crop{width:170px}
  .tl{grid-template-columns:1fr;gap:10px}
  .tl-line{left:7px;right:auto;top:0;bottom:0;width:2px;height:auto}
  .tl-fill{transform:scaleY(var(--p,0));transform-origin:top;width:100%}
  .tl-i{padding:0 0 30px 40px}
  .tl-i::before{top:6px}
  .mag{grid-template-columns:1fr 1fr;gap:30px 14px}
  .s1,.s2,.s3{grid-column:span 1;margin-top:0}
  .s2 .phone,.s1 .phone,.s3 .phone{width:100%;max-width:180px}
  .grid4{grid-template-columns:1fr 1fr}
  .toc{position:static;display:none}
  .fl,#cdot{display:none!important}
  .stores .btn,.hcta .btn{flex:1;justify-content:center}
  .lb figure{max-width:62vw}
}

/* --- Mobile Single-Column Footer (<= 767px) --- */
@media(max-width:767px){
  .ftr{
    padding:50px 0 32px;
    padding-inline:20px;
    width:100%;
    max-width:100%;
    box-sizing:border-box;
  }
  .ftr .wrap{
    padding:0;
    max-width:100%;
    width:100%;
    box-sizing:border-box;
  }
  .grid4{
    grid-template-columns:1fr!important;
    gap:36px;
    width:100%;
    max-width:100%;
    box-sizing:border-box;
  }
  .grid4 > div{
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    width:100%;
    max-width:100%;
    box-sizing:border-box;
  }
  .ftr h2{
    font-size:1.05rem;
    color:#fff;
    margin:0 0 14px;
    letter-spacing:.02em;
    font-weight:800;
  }
  .ftr strong{
    font-size:1.15rem;
    line-height:1.4;
    display:inline-block;
    color:#fff;
  }
  .ftr p{
    margin:6px 0;
    line-height:1.6;
    overflow-wrap:break-word;
    word-break:normal;
  }
  .ftr a{
    display:inline-flex;
    align-items:center;
    padding:6px 0;
    font-size:.95rem;
    min-height:36px;
    width:fit-content;
    overflow-wrap:break-word;
    word-break:normal;
  }
  .ftr a[href^="mailto:"]{
    word-break:break-all;
  }
  .ftr .brand{
    font-size:1.25rem;
    margin-bottom:10px;
  }
  .fstore{
    display:flex;
    flex-wrap:wrap;
    gap:16px 24px;
    margin-top:32px;
    width:100%;
    max-width:100%;
    box-sizing:border-box;
  }
  .fstore a{
    min-height:44px;
    display:inline-flex;
    align-items:center;
    padding:4px 0;
  }
  .copy{
    margin-top:24px;
    font-size:.85rem;
    line-height:1.55;
    color:#94A3B8;
    width:100%;
    max-width:100%;
    box-sizing:border-box;
    overflow-wrap:break-word;
    word-break:normal;
  }
}

@media(max-width:640px){
  /* --- Responsive Phone Frame (Small Tablet / Phablet Scale) --- */
  .phone{
    --phone-pad:5px;
    --phone-border:1px;
    --phone-radius:30px;
    --screen-radius:24px;
    --phone-shadow:0 14px 32px rgba(0,0,0,.38);
  }
  .duo{flex-direction:column;align-items:center;gap:32px;width:100%;max-width:100%}
  .duo>div:nth-child(2){margin-top:0}
  .duo>[data-px]{width:100%;max-width:100%;display:flex;justify-content:center}
  .duo .phone{width:100%;max-width:250px}
  h1{font-size:clamp(2.1rem,7.5vw,3.2rem)}
  .intro h2{margin-bottom:18px}
  .words{font-size:1.02rem;gap:6px 14px}
  .words span:not(:last-child)::after{margin-left:14px}
}

@media(max-width:480px){
  /* --- Responsive Phone Frame (Standard Mobile Scale) --- */
  .phone{
    --phone-pad:4px;
    --phone-border:1px;
    --phone-radius:26px;
    --screen-radius:21px;
    --phone-shadow:0 10px 24px rgba(0,0,0,.35);
  }
  nav a{
    font-size:1.85rem;
    padding:6px 0;
  }
}

@media(max-width:380px){
  .phone,.phone.main{width:210px}
  .duo .phone{max-width:220px}
  h1{font-size:2.4rem}
  h2.big{font-size:2rem}
  .words{font-size:.9rem;gap:4px 10px}
  .words span:not(:last-child)::after{margin-left:10px}
  nav a,.nav a{font-size:1.65rem}
}

@media(max-width:360px){
  /* --- Responsive Phone Frame (Compact Mobile Scale) --- */
  .phone{
    --phone-pad:3px;
    --phone-border:1px;
    --phone-radius:22px;
    --screen-radius:18px;
    --phone-shadow:0 8px 18px rgba(0,0,0,.3);
  }
  .phone,.phone.main{width:190px}
  nav a,.nav a{font-size:1.5rem}
}