/* HERO MOBILE — composition lock
   Restores the approved mobile composition from the validated Hero layout.
   This file intentionally does NOT alter the Hero's visual arrangement; motion is
   handled independently by hero-motion.css.
*/
.brand-logo[hidden]{display:none !important}
.brand{min-width:0;flex:0 1 auto;max-width:100%}
.brand-fallback{min-width:0;white-space:nowrap}

@media (max-width:760px){
  .site-header .header-inner{min-width:0;gap:14px}
  .brand{max-width:calc(100% - 56px);overflow:hidden}
  .brand-fallback{font-size:clamp(16px,4.7vw,19px);gap:.4rem;overflow:hidden;text-overflow:ellipsis}
  .brand-fallback b{flex:0 0 auto}
  .brand-fallback span{font-size:clamp(9px,2.8vw,11px);overflow:hidden;text-overflow:ellipsis}
  .menu-toggle{flex:0 0 auto}

  /* Approved Hero mobile geometry */
  .hero{overflow:hidden;min-height:calc(100svh - 68px)}
  .hero-inner{
    min-width:0;
    width:min(calc(100% - 48px),var(--max));
    padding-top:clamp(42px,7vw,56px);
    padding-bottom:clamp(58px,9vw,76px);
    gap:clamp(18px,4vw,28px);
  }
  .hero-copy{min-width:0;padding-inline:0;max-width:none}
  .hero .eyebrow{max-width:100%;overflow-wrap:normal}

  /* Keep the headline wide enough to preserve the approved 3-line hierarchy. */
  .hero h1{
    width:100%;
    max-width:none;
    font-size:clamp(46px,11.2vw,62px);
    line-height:.94;
    letter-spacing:-.055em;
    text-wrap:balance;
  }

  .hero-subtitle{
    max-width:34ch;
    margin-top:clamp(22px,5vw,28px);
    font-size:clamp(15px,3.8vw,17px);
    line-height:1.5;
  }

  .hero-actions{
    margin-top:clamp(22px,5vw,28px);
    gap:10px;
    flex-direction:column;
    align-items:stretch;
  }
  .hero-actions .button,
  .hero-actions .text-link{
    width:100%;
    min-width:0;
  }
  .hero-actions .button{min-height:78px;padding-inline:20px}
  .hero-actions .text-link{min-height:42px;display:inline-flex;align-items:center;justify-content:center}

  .hero-visual{
    width:100%;
    min-height:clamp(330px,72vw,420px);
    margin:0 auto;
    max-width:620px;
    min-width:0;
  }
  .frame{width:min(62vw,270px)}
  .back{left:6%;top:4%}
  .front{right:5%;bottom:3%;padding:18px;box-shadow:18px 18px 0 var(--coral)}
  .symbol{font-size:clamp(54px,17vw,84px)}
  .front strong{font-size:clamp(20px,6vw,30px)}
  .frame small,.stamp{font-size:8px}
  .one{width:72%;top:14%;left:13%}
  .two{width:52%;top:28%;left:25%}
  .stamp{right:4%;top:7%}

  /* The approved mobile Hero keeps the scroll indicator anchored to the Hero,
     rather than inserting it into the copy/visual flow. */
  .hero-bottom{
    position:absolute;
    left:50%;
    bottom:12px;
    transform:translateX(-50%);
    width:min(calc(100% - 40px),var(--max));
    margin:0;
    grid-template-columns:auto minmax(40px,1fr) auto;
    gap:10px;
    font-size:7px;
  }
  .hero-bottom i{min-width:0;width:100%}
}

@media (max-width:480px){
  .hero-inner{width:calc(100% - 40px)}
  .hero h1{font-size:clamp(45px,11.4vw,58px)}
  .hero-actions .button{min-height:76px}
  .hero-visual{min-height:330px}
}

@media (max-width:380px){
  .hero-inner{width:calc(100% - 32px)}
  .hero h1{font-size:43px}
  .hero-subtitle{font-size:14px}
  .hero-visual{min-height:310px}
  .frame{width:174px}
  .front{padding:13px;box-shadow:11px 11px 0 var(--coral)}
  .front strong{font-size:18px}
  .symbol{font-size:48px}
  .hero-bottom{font-size:6px;gap:7px}
}

@media (max-width:340px){
  .brand-fallback{font-size:15px}
  .brand-fallback span{font-size:8px}
  .hero h1{font-size:39px}
  .hero-actions .button{font-size:14px}
  .hero-visual{min-height:290px}
}