@import url('brand-colors.css');

.hero-mobile-logo{display:none}

@media(max-width:720px){
  .hero{
    position:relative;
    padding:44px 20px 64px;
    gap:34px;
    background:
      radial-gradient(circle at 8% 12%,rgba(228,100,40,.16),transparent 34%),
      radial-gradient(circle at 92% 32%,rgba(2,137,127,.12),transparent 30%),
      var(--cream);
  }
  .hero-content{
    text-align:center;
    max-width:620px;
    margin:0 auto;
  }
  .hero-mobile-logo{
    display:block;
    width:132px;
    margin:0 auto 18px;
  }
  .hero .eyebrow{
    margin:0 auto 15px;
    color:var(--teal);
    font-size:.82rem;
    line-height:1.5;
  }
  .hero h1{
    margin:0 auto 22px;
    max-width:600px;
    color:var(--orange);
    font-size:clamp(3rem,14vw,4.4rem);
    line-height:.96;
  }
  .hero-copy{
    margin:0 auto;
    max-width:540px;
    color:#5d5356;
    font-size:1.12rem;
    line-height:1.68;
  }
  .hero-actions{
    margin-top:28px;
    gap:10px;
  }

  /* Mobile typography: larger, easier to read without changing layout. */
  body{font-size:17px;line-height:1.68}
  .section-label,.eyebrow{font-size:.82rem}
  .copy-stack,.neuter-copy p:not(.section-label),.about-card>p:not(.section-label),.story-content p:not(.section-label),.partner-copy p:not(.section-label){font-size:1.08rem;line-height:1.68}
  .focus-grid p,.help-grid p{font-size:1.02rem;line-height:1.62}
  .focus-grid h3{font-size:1.65rem}
  .help-grid h3{font-size:1.72rem}
  .cer-step strong{font-size:1.03rem}
  .cer-step span{font-size:1rem;line-height:1.6}
  .story-meta span:last-child{font-size:.9rem}
  .nav{font-size:1rem}
  .nav-cta,.button{font-size:1rem}
  .social-row a,.partner-link{font-size:1rem}
  .footer-links{font-size:1rem}
  .footer-brand span,.copyright{font-size:.9rem}

  /* Core photography: make the mobile version as visual as desktop. */
  .hero-visual{
    display:block!important;
    width:100%;
    min-height:0!important;
    height:390px;
    margin-top:4px;
    border-radius:30px;
    overflow:hidden;
  }
  .hero-photo{
    display:block!important;
    width:100%!important;
    height:100%!important;
    object-fit:cover!important;
    object-position:center!important;
  }

  .story-image{
    display:block!important;
    width:100%;
    min-height:0!important;
    height:390px;
    border-radius:24px;
    overflow:hidden;
  }
  .story-image img{
    display:block!important;
    width:100%!important;
    height:100%!important;
    min-height:0!important;
    object-fit:cover!important;
    object-position:center 40%!important;
  }

  .partner-logo-wrap.catodo-visual{
    display:block!important;
    width:100%;
    min-height:0!important;
    height:390px;
    border-radius:24px;
    overflow:hidden;
  }

  .about-card{
    display:block;
  }
  .about-photo{
    display:block!important;
    position:relative!important;
    inset:auto!important;
    width:100%!important;
    height:380px!important;
    margin:0 0 30px!important;
    border-radius:24px;
    object-fit:cover!important;
    object-position:center 44%!important;
    opacity:1!important;
    z-index:2;
  }
  .about-card .section-label,
  .about-card h2,
  .about-card>p,
  .about-card .social-row{
    position:relative;
    z-index:3;
  }
}