/* Mobile overrides (keep desktop unchanged)
   Loaded AFTER style.css */

/* --- Mobile navigation (<= 820px) --- */
.nav-toggle{
  display:none;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:10px 12px;
  border-radius:12px;
  border:1px solid var(--line);
  background:rgba(255,255,255,.75);
  color:var(--fg);
  font:inherit;
  cursor:pointer;
}
.nav-toggle:focus{outline:2px solid rgba(0,0,0,.28);outline-offset:3px}
.nav-toggle__bars{width:18px;height:12px;position:relative;display:inline-block}
.nav-toggle__bars span{
  position:absolute;left:0;right:0;height:2px;background:currentColor;border-radius:2px;
}
.nav-toggle__bars span:nth-child(1){top:0}
.nav-toggle__bars span:nth-child(2){top:5px}
.nav-toggle__bars span:nth-child(3){top:10px}

@media (max-width: 820px){
  .header__inner{position:relative}
  .nav{display:none}
  .nav-toggle{display:inline-flex}

  /* Click/stacking safety on mobile browsers (esp. iOS Safari)
     Keep desktop untouched by applying only within this breakpoint. */
  .site-header{z-index:1000}

  body.nav-open .nav{
    display:flex;
    position:fixed;
    /* below the sticky header */
    top:72px;
    left:16px;
    right:16px;
    margin-top:0;
    padding:10px;
    background:rgba(255,255,255,.96);
    border:1px solid var(--line);
    border-radius:14px;
    box-shadow:var(--shadow);
    flex-direction:column;
    gap:6px;
    z-index:60;
    pointer-events:auto;
    max-height:calc(100vh - 92px);
    overflow:auto;
    -webkit-overflow-scrolling:touch;
  }
  body.nav-open .nav__link{
    display:block;
    padding:10px 12px;
    border-radius:12px;
    pointer-events:auto;
    touch-action:manipulation;
  }
}

/* --- Typography & spacing (phone-first) --- */
@media (max-width: 720px){
  .container{padding:0 16px}
  main{padding:28px 0 44px}

  .h1, h1{font-size:clamp(28px, 7.2vw, 34px); line-height:1.08}
  .h2, h2{font-size:clamp(20px, 5.3vw, 24px)}
  .h3, h3{font-size:18px}
  .lead{font-size:16px; line-height:1.6}

  .hero{padding-top:22px; padding-bottom:44px}
  .hr{margin:18px 0}

  /* CTAs: stack + comfortable tap targets */
  .cta-row{flex-direction:column; align-items:stretch}
  .cta-row .btn{width:100%; padding:12px 14px}

  /* Lists: a bit tighter on small screens */
  ul, .list{padding-left:18px}
}

/* --- Ultra small phones --- */
@media (max-width: 360px){
  .brand__logo-full{height:72px}
}