/* ========================================
responsive
======================================== */

/* large */
@media (max-width: 1200px){

  .header-nav-list{
    gap:22px;
  }

  .hero-wrap{
    grid-template-columns:1fr 1fr;
    grid-template-rows:auto auto auto;
    min-height:auto;
  }

  .hero-main-image{
    grid-column:1 / 2;
    grid-row:1 / 3;
    min-height:560px;
  }

  .hero-copy{
    grid-column:2 / 3;
    grid-row:1 / 2;
  }

  .hero-sub-image-1{
    grid-column:2 / 3;
    grid-row:2 / 3;
    min-height:220px;
  }

  .hero-sub-image-2{
    grid-column:1 / 3;
    grid-row:3 / 4;
    min-height:240px;
    border-radius:34px;
  }

  .support-grid{
    grid-template-columns:repeat(2,1fr);
  }

  .counselor-wrap{
    grid-template-columns:340px 1fr;
    gap:40px;
  }

}


/* tablet */
@media (max-width: 980px){

  .section{
    padding:80px 0;
  }

  .site-header{
    top:12px;
    padding:0 14px;
  }

  .header-inner{
    min-height:82px;
    padding:12px 18px;
  }

  .site-logo img{
    height:48px;
  }

  .header-nav,
  .header-cta{
    display:none;
  }

  .hamburger{
    display:block;
    margin-left:auto;
  }

  .hero{
    padding-top:130px;
  }

  .hero-wrap{
    padding:30px;
    gap:20px;
    grid-template-columns:1fr;
    grid-template-rows:auto;
  }

  .hero-main-image,
  .hero-copy,
  .hero-sub-image-1,
  .hero-sub-image-2{
    grid-column:auto;
    grid-row:auto;
  }

  .hero-main-image{
    min-height:420px;
    border-radius:34px;
  }

  .hero-sub-image-1,
  .hero-sub-image-2{
    min-height:220px;
    border-radius:28px;
  }

  .hero-copy{
    padding:10px;
    text-align:center;
  }

  .hero-title{
    font-size:clamp(20px,4vw,40px);
  }

  .hero-text{
    font-size:16px;
    line-height:1.9;
  }

  .support-grid{
    grid-template-columns:1fr;
  }

  .counselor-wrap{
    grid-template-columns:1fr;
    padding:34px;
    gap:28px;
  }

  .counselor-image{
    min-height:380px;
    border-radius:34px;
  }

  .left{
    text-align:center;
  }

}


/* mobile */
@media (max-width: 640px){

  body{
    font-size:15px;
  }

  .container{
    width:min(94%, 1200px);
  }

  .section-title{
    font-size:28px;
  }

  .section-lead{
    margin-bottom:34px;
  }

  .btn{
    width:100%;
    min-height:56px;
    padding:0 24px;
    font-size:15px;
  }

  .hero{
    padding-top:118px;
    padding-bottom:60px;
  }

  .hero-wrap{
    padding:20px;
    border-radius:28px;
  }

  .hero-main-image{
    min-height:280px;
  }

  .hero-sub-image-1,
  .hero-sub-image-2{
    min-height:160px;
  }

  .hero-subtitle{
    font-size:12px;
    padding:8px 14px;
  }

  .hero-title{
    font-size:30px;
    line-height:1.5;
  }

  .hero-text{
    margin-top:18px;
    font-size:14px;
  }

  .hero-btn{
    margin-top:22px;
  }

  .support-card{
    padding:30px 22px;
  }

  .support-card h3{
    font-size:20px;
  }

  .counselor-wrap{
    padding:24px;
  }

  .counselor-image{
    min-height:280px;
  }

  .cta-box{
    padding:50px 20px;
  }

  .cta-box h2{
    line-height:1.6;
  }

  .footer-inner{
    padding:40px 20px;
  }

  .footer-nav-list{
    gap:16px;
    flex-direction:column;
  }

  .mobile-nav-inner{
    padding:28px;
  }

}