/* MUIC mobile-only refinements.
   This file is linked with media="(max-width: 820px)", so none of these
   rules can change the desktop presentation. */

@media (max-width: 820px){
  :root{
    --pad:clamp(18px,5vw,26px);
    --section-y:clamp(64px,16vw,96px);
  }

  body{
    font-size:16px;
    overflow-wrap:break-word;
  }

  .section--tight{ padding-block:clamp(52px,13vw,74px); }
  .h-xl{ font-size:clamp(2.65rem,12.5vw,4.6rem); }
  .h-lg{ font-size:clamp(2.15rem,10vw,3.65rem); }
  .h-md{ font-size:clamp(1.75rem,7.5vw,2.5rem); }
  .lede{ font-size:clamp(1rem,4.4vw,1.15rem); line-height:1.55; }
  .proof__head{ margin-bottom:clamp(32px,9vw,48px); }
  .proof__head h2,
  .experience__head h2,
  .pathways__head h2,
  .cta h2,
  .subhero h1{ text-wrap:balance; }

  .nav{
    min-height:68px;
    gap:16px;
    padding-top:max(10px,env(safe-area-inset-top));
    padding-bottom:10px;
    background:rgba(11,11,12,.82);
    backdrop-filter:blur(10px) saturate(125%);
    -webkit-backdrop-filter:blur(10px) saturate(125%);
  }
  .nav__brand{ gap:9px; font-size:1.08rem; }
  .nav__brand img{ width:24px; }
  .nav__burger{ width:46px; height:46px; flex:0 0 46px; }
  .nav__sheet{
    justify-content:flex-start;
    overflow-y:auto;
    padding-top:calc(92px + env(safe-area-inset-top));
    padding-bottom:calc(28px + env(safe-area-inset-bottom));
  }
  .nav__sheet a{
    min-height:58px;
    display:flex;
    align-items:center;
    font-size:clamp(2rem,10vw,2.8rem);
  }

  .subhero{
    padding-top:calc(112px + env(safe-area-inset-top));
    padding-bottom:clamp(58px,14vw,78px);
  }
  .subhero__inner{ max-width:100%; }
  .subhero h1{ margin:14px 0 18px; line-height:.98; }
  .subhero .btn-row{ margin-top:26px; }

  .btn-row{
    width:100%;
    flex-direction:column;
    align-items:stretch;
    gap:11px;
  }
  .btn-row .btn,
  .tiles-cta .btn,
  .form .btn{
    width:100%;
    justify-content:center;
    text-align:center;
  }
  .btn{ min-height:50px; padding:13px 21px; }

  .hero{
    height:100svh;
    min-height:540px;
  }
  .hero__bar{
    padding-top:max(16px,calc(env(safe-area-inset-top) + 10px));
    padding-inline:var(--pad);
  }
  .hero__mark img{ width:32px; }
  .hero__partner{ min-height:44px; padding:9px 17px; }
  .hero__tagline{ max-width:88vw; font-size:clamp(1rem,4.8vw,1.2rem); line-height:1.35; }
  .hero__scroll{
    bottom:max(16px,calc(env(safe-area-inset-bottom) + 10px));
    width:max-content;
    max-width:88vw;
    font-size:10px;
    letter-spacing:.18em;
  }

  .who-seq{ margin-top:42px; }
  .moment{ min-height:78svh; padding-block:28px; }
  .moment__media{ width:100%; aspect-ratio:4 / 3; }
  .moment__text{ margin-top:22px; }
  .moment__title{ font-size:clamp(2rem,10vw,2.8rem); }
  .moment__copy{ font-size:1rem; line-height:1.55; }

  .experience__head{ margin-bottom:34px; }
  .tiles{
    margin-inline:calc(var(--pad) * -1);
    padding-inline:var(--pad);
    scroll-padding-inline:var(--pad);
    overscroll-behavior-inline:contain;
  }
  .tiles.has-open .tile.is-open{ flex-basis:min(82vw,420px); }
  .tile__panel{ padding:22px; }
  .tile__name{ font-size:clamp(1.85rem,9vw,2.7rem); }
  .tile__meta{ font-size:.9rem; line-height:1.5; }
  .tiles-cta{ flex-direction:column; gap:11px; }

  .stat{ min-width:0; padding:clamp(18px,5vw,26px); }
  .stat__num{ font-size:clamp(1.9rem,9vw,2.8rem); }
  .stat__label{ font-size:.86rem; }

  .path-card,
  .pkg{ padding:clamp(24px,7vw,32px); }
  .path-card .btn{ align-self:stretch; justify-content:center; }
  .pkg__flag{ max-width:48%; text-align:center; line-height:1.2; }
  .pkg__price{ font-size:clamp(2.2rem,11vw,2.8rem); }

  .feat{ padding:24px 22px; }
  .feat__i{ margin-bottom:15px; }

  .split__media{ aspect-ratio:4 / 3; }
  .split.reverse .split__media{ order:initial; }

  .partner-marquee{ padding-block:25px; }
  .partner-marquee__head{ margin-bottom:16px; }
  .partner-marquee__viewport{
    -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 5%,#000 95%,transparent 100%);
    mask-image:linear-gradient(90deg,transparent 0,#000 5%,#000 95%,transparent 100%);
  }
  .marquee-logo{ flex-basis:132px; width:132px; height:78px; padding:15px 18px; }

  .charity__big{ font-size:clamp(3rem,16vw,4.5rem); }
  .charity__causes{ gap:8px; }
  .cause{ padding:8px 14px; font-size:.86rem; }

  .ev-card--wide{ min-height:300px; }
  .ev-card__body{ padding:22px 20px; }
  #events .ev-card--stacked p{ font-size:1rem; line-height:1.55; }

  .student-ig-live{ margin-inline:0; }
  .student-ig-live__frame{ height:min(680px,78svh); min-height:560px; }
  .student-ig-live__footer{ padding:16px; }

  .step{ gap:14px; padding:22px 18px; }
  .step__n{ min-width:38px; font-size:1.2rem; }

  .committee-board{ gap:38px; }
  .committee-board__panel figcaption{ font-size:1.12rem; }

  .form-wrap{ gap:34px; }
  .form-aside .contact-line{ align-items:flex-start; }
  .form-aside .contact-line a{ overflow-wrap:anywhere; }
  .field input,
  .field select,
  .field textarea{ font-size:16px; }

  .ig-grid{ gap:6px; }
  .ig-follow{ align-items:stretch; flex-direction:column; }
  .ig-follow .btn{ width:100%; justify-content:center; }

  .footer{ padding-top:58px; padding-bottom:calc(24px + env(safe-area-inset-bottom)); }
  .footer__top{ gap:34px; }
  .footer__cols{ gap:28px 20px; }
  .footer__col a{ min-height:40px; display:flex; align-items:center; padding-block:7px; }
  .footer__bottom{ align-items:flex-start; flex-direction:column; }

  .legal{ padding-top:calc(104px + env(safe-area-inset-top)); }
  .legal .updated{ margin-bottom:30px; }
  .legal h2{ margin-top:32px; }
}

@media (max-width: 430px){
  :root{ --pad:18px; }
  .h-xl{ font-size:clamp(2.45rem,12vw,3.25rem); }
  .h-lg{ font-size:clamp(2rem,10.5vw,2.8rem); }
  .eyebrow{ font-size:11px; letter-spacing:.18em; }
  .hero__full-name{ max-width:96vw; }
  .stats{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .footer__cols{ grid-template-columns:1fr 1fr; }
  .footer__col:last-child{ grid-column:1 / -1; }
  .student-ig-live__frame{ min-height:520px; }
}

@media (max-width: 820px) and (hover: none){
  .btn:hover,
  .path-card:hover,
  .pkg:hover,
  .ev-card:hover,
  .committee-board__panel:hover img{ transform:none; }
  .ev-card:hover img,
  .tile:hover img,
  .tile:hover video{ transform:none; }
}

@media (max-width: 820px) and (max-height: 560px) and (orientation: landscape){
  .hero{ min-height:100svh; }
  .hero__bar{ padding-top:10px; padding-bottom:10px; }
  .hero__scroll{ display:none; }
  .nav__sheet{ padding-top:72px; }
  .nav__sheet a{ min-height:44px; padding-block:4px; font-size:1.8rem; }
  .subhero{ padding-top:96px; }
}