/* 390px design coordinates: 16px = 1rem. Loaded only below 768px. */
html{font-size:min(4.1025641026vw,21.333333px);scroll-padding-top:5rem}
body{font-size:1rem}
body.greeting-page,body:has(.hero-slide.is-active){padding-bottom:calc(6rem + env(safe-area-inset-bottom,0px))}
.hd{height:4rem}
.hd .wrap{gap:.5rem}
.hd .cta,.hd .menu-toggle{min-height:44px}
.hd .menu-toggle{min-width:44px}
.hd .cta{font-size:max(12px,.8125rem);padding-inline:.875rem}
.hd .gnb{height:calc(100dvh - 4rem);overscroll-behavior:contain;padding-bottom:2rem}
.hd .gnb-link{min-height:44px;font-size:max(15px,1.0625rem)}
.hd .submenu a{min-height:40px;display:flex;align-items:center;font-size:max(14px,.875rem);white-space:normal}
.hd .gnb-item.is-open>.submenu{max-height:none}
.hd .logo .brand-branch{font-size:max(9px,.625rem)}
.subpage-hero .breadcrumb{font-size:max(9px,.625rem)}
.subpage-hero-lead{font-size:max(13px,.875rem)}
input:not([type=checkbox],[type=radio],[type=hidden]),select,textarea{font-size:max(16px,1rem)}
body .community-forms input:not([type=checkbox],[type=radio],[type=hidden]),body .community-forms select,body .community-forms textarea{font-size:max(16px,1rem)!important}
.login-field input,.join-field input,.join-field select{font-size:max(16px,1rem)}
.join-main .join-field input:not([type=checkbox],[type=radio],[type=hidden]),.join-main .join-field select{font-size:max(16px,1rem)}
.login-field input::placeholder,.join-field input::placeholder{font-size:inherit}
.notice-content{overflow-wrap:anywhere}
.notice-content table{max-width:100%}
.mobile-table-scroll{max-width:100%;overflow-x:auto;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch}
.mobile-table-scroll table{min-width:31.25rem;width:100%}
.mobile-table-scroll:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
body.greeting-page .fab,body:has(.hero-slide.is-active) .fab{
 top:auto;bottom:calc(.5rem + env(safe-area-inset-bottom,0px));left:50%;right:auto;
 transform:translateX(-50%);display:flex;width:calc(100% - 1rem);max-width:32rem;border-radius:.875rem;
}
body.greeting-page .fab a,body:has(.hero-slide.is-active) .fab a{
 display:flex;flex:1;width:auto;min-width:0;min-height:60px;padding:.5rem .125rem;gap:.25rem;
 border-top:0;border-left:1px solid var(--line);font-size:max(10px,.625rem);
}
body.greeting-page .fab a:first-child,body:has(.hero-slide.is-active) .fab a:first-child{border-left:0}
body.greeting-page .fab .ic,body:has(.hero-slide.is-active) .fab .ic{width:1.875rem;height:1.875rem}
body.greeting-page .fab .ic .ico,body:has(.hero-slide.is-active) .fab .ic .ico{width:1rem;height:1rem}
/* Main page: arrange the content at the design width before proportional scaling. */
.sec{padding:4rem 0}
.head{flex-direction:column;align-items:flex-start;gap:1.25rem;margin-bottom:1.875rem}
.head h2{font-size:2.125rem;line-height:1.25}
.head p{font-size:max(14px,.9375rem);line-height:1.65}
.head .eb{font-size:max(11px,.75rem);margin-bottom:.625rem}
.head .link{font-size:max(13px,.875rem)}
.hero{height:42.5rem}
.hero .signature-slide>.wrap{align-items:flex-start;padding-top:2.5rem}
.hero .signature-slide .copy{width:100%;max-width:100%;padding-bottom:0}
.hero .signature-slide .chip{font-size:.6875rem;margin-bottom:1.375rem}
.hero .signature-slide h1{font-size:3.375rem}
.hero .signature-slide h1 small{font-size:1.875rem;margin-top:.375rem}
.hero .signature-slide .hero-model{width:17rem;height:23rem;right:-5rem;bottom:-6rem;opacity:.85}
.hero .signature-slide ol{margin:1.5rem 0;gap:1rem}
.hero .signature-slide ol li{align-items:flex-start;gap:.625rem}
.hero .signature-slide ol .n{width:1.75rem;height:1.75rem;font-size:.6875rem;margin-left:0}
.hero .signature-slide ol li>div{max-width:14rem}
.hero .signature-slide ol b{font-size:1.0625rem}
.hero .signature-slide ol span:not(.n){display:block;font-size:max(11px,.8125rem);line-height:1.65;margin:.25rem 0 0;word-break:keep-all}
.hero .signature-slide .btns{gap:.625rem}
.hero .signature-slide .btns .btn{height:3.375rem;min-height:44px;padding:0 1.125rem;font-size:.875rem}
.hero .nav{left:1.25rem;right:1.25rem;bottom:2.5rem;gap:.75rem;height:2.75rem}
.hero .nav .title{display:none}
.hero .nav .progress{flex:1;width:auto;max-width:6.875rem}
.hero .nav button{width:2.75rem;height:2.75rem;min-width:44px;min-height:44px}
.hero .experience-plane{left:0;top:5.5rem;width:24.375rem;height:10.5rem}
.hero .experience-abc-badge{left:1rem;top:.625rem;width:7rem;height:7rem}
.quick{height:auto;margin-top:-1.25rem}
.quick .box{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));padding:1rem .5rem;gap:1.25rem 0;border-radius:1.125rem}
.quick a{grid-column:span 2;min-width:0;flex-direction:column;gap:.625rem;padding:0 .375rem;text-align:center}
.quick a:nth-child(4){grid-column:2/span 2;border-left:0}
.quick b{font-size:.875rem;white-space:nowrap}
.quick small{font-size:max(10px,.6875rem);white-space:nowrap}
.quick .arr{display:none}
.quick .ic{width:2.75rem;height:2.75rem}
.quick .ic .ico{width:1.375rem;height:1.375rem}
.quick+.pass{padding-top:3.75rem!important}
.pass .head{margin-bottom:1.875rem}
.pass .tools{width:100%;justify-content:space-between}
.pass .grid{grid-template-columns:minmax(0,1fr);gap:1rem;grid-auto-rows:1fr}
.pass .card{min-height:16.5rem;padding:1.5rem}
.pass h3{font-size:1.25rem}
.pass p{font-size:max(14px,.9375rem)}
.pass .meta{font-size:max(11px,.75rem)}
.teach .grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:1.25rem .875rem}
.teach .card{min-width:0}
.teach .ph{height:12.75rem}
.teach .tx{padding:1rem .75rem 1.125rem}
.teach .nm{font-size:1.125rem;white-space:nowrap}
.teach .nm small{font-size:.6875rem;margin-left:.3125rem}
.teach .cr{font-size:.6875rem;white-space:normal;min-height:2.2em}
.teach .fd{font-size:.6875rem}
.prog .program-copy>p,.special .lead{font-size:max(14px,1rem)}
.prog .sub-card{padding:1.5rem}
.prog .sub-card .sub-icon{flex-basis:2.5rem;width:2.5rem;height:2.5rem}
.prog .sub-card .arr{flex:none;width:2.25rem;height:2.25rem}
.prog .sub-card h3{font-size:1.375rem}
.prog .sub-card p{font-size:.8125rem}
.yt .head h2,.ig .head h2{font-size:2.125rem;gap:.75rem}
.yt .yt-mark{width:2.375rem;height:1.75rem}
.ig .profile-ring{width:2.875rem;height:2.875rem}
.pass .tools button,.ig .scroll-controls button{min-width:44px;min-height:44px}
/* Beyond 520px, keep the type scale and use the additional width for layout. */
@media (min-width:521px){
 .pass .grid{grid-template-columns:repeat(2,minmax(0,1fr))}
 .pass .card{padding:1.125rem}
 .pass h3{font-size:1.0625rem}
 .teach .ph{height:14rem}
 .community-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
 .hero .signature-slide .hero-model{right:-1.5rem}
 .hero .signature-slide ol li>div{max-width:18rem}
 .hero .experience-plane{left:50%;transform:translateX(-50%) rotate(-3.5deg)}
 .hero .experience-abc-badge{left:calc(50% - 10.5rem)}
}

/* Mobile hero viewport fit - 2026-09-21. */
/* Reserve space for the fixed mobile header and quick menu. */
body:has(.hero-slide){--hero-room:calc(100svh - 4rem - max(76px,5rem) - env(safe-area-inset-bottom,0px));--hero-tighten:max(0rem,calc(42.5rem - var(--hero-room)))}
.hero{height:clamp(32rem,var(--hero-room),42.5rem)}
.hero .nav{height:max(44px,2.75rem);bottom:max(.75rem,calc(2.5rem - var(--hero-tighten)*.3))}
body:has(.hero-slide) .quick{margin-top:calc(-1.25rem + min(1.25rem,var(--hero-tighten)))}
/* Tighten empty space before reducing any of the type or touch targets. */
.hero .signature-slide>.wrap{padding-top:max(1rem,calc(2.5rem - var(--hero-tighten)*.2))}
.hero .signature-slide .chip{margin-bottom:max(.75rem,calc(1.375rem - var(--hero-tighten)*.1))}
.hero .signature-slide ol{margin-block:max(.5rem,calc(1.5rem - var(--hero-tighten)*.15));gap:max(.5rem,calc(1rem - var(--hero-tighten)*.1))}
.hero .ai-copy .ai-btn{margin-top:max(.75rem,calc(1.75rem - var(--hero-tighten)*.15))}
.hero .experience-slide>.wrap{padding-top:max(12rem,calc(17rem - var(--hero-tighten)*.7))}
.hero .experience-plane{top:max(3.75rem,calc(5.5rem - var(--hero-tighten)*.25));height:max(8.25rem,calc(10.5rem - var(--hero-tighten)*.3))}
.hero .univ-slide .campaign-copy,.hero .why-slide .campaign-copy,.hero .assessment-copy{top:max(0rem,calc(3.125rem - var(--hero-tighten)*.55))}
.hero .univ-sky{--sky-lift:min(2rem,var(--hero-tighten),max(0rem,calc(var(--hero-room) - 34rem)));top:calc(-7.8125rem - var(--sky-lift));height:calc(100% + 7.8125rem + var(--sky-lift))}
.hero .why-slide>.wrap{padding-top:max(1.25rem,calc(1.875rem - var(--hero-tighten)*.1))}
.hero .results-slide>.wrap{padding-top:max(.5rem,calc(1.5625rem - var(--hero-tighten)*.15))}
.hero .results-slide h2{margin-top:max(.5rem,calc(.75rem - var(--hero-tighten)*.05))}
.hero .results-metrics,.hero .results-schools{margin-top:max(.625rem,calc(1.375rem - var(--hero-tighten)*.12))}
.hero .results-school{padding-block:max(.5rem,calc(.8125rem - var(--hero-tighten)*.05));gap:max(.25rem,calc(.5rem - var(--hero-tighten)*.05))}
.hero .results-seal{width:max(2.5rem,calc(2.9375rem - var(--hero-tighten)*.07));height:max(2.5rem,calc(2.9375rem - var(--hero-tighten)*.07))}
.hero .results-footnote{margin-top:max(.5rem,calc(.875rem - var(--hero-tighten)*.06))}
.hero .admissions-slide>.wrap{padding-top:max(.75rem,calc(1.8125rem - var(--hero-tighten)*.2))}
.hero .admissions-grid{margin-top:max(.625rem,calc(1.5rem - var(--hero-tighten)*.15));gap:max(.375rem,calc(.625rem - var(--hero-tighten)*.05))}
.hero .admissions-school{height:max(6.5rem,calc(8rem - var(--hero-tighten)*.24));padding-block:max(.375rem,calc(.6875rem - var(--hero-tighten)*.05))}
.hero .admissions-footnote{margin-top:max(.5rem,calc(.9375rem - var(--hero-tighten)*.07))}
.hero .assessment-slide>.wrap{padding-top:max(.75rem,calc(2.375rem - var(--hero-tighten)*.25))}
.hero .assessment-network{margin-top:max(.5rem,calc(1rem - var(--hero-tighten)*.1))}
.hero .assessment-link{margin-top:max(.75rem,calc(1.3125rem - var(--hero-tighten)*.1))}
.hero .support-campaign>.wrap{padding-top:max(.25rem,calc(1.625rem - var(--hero-tighten)*.18))}
.hero .support-layout{gap:max(.375rem,calc(1.5rem - var(--hero-tighten)*.18))}
.hero .support-gallery{row-gap:max(.5rem,calc(1.0625rem - var(--hero-tighten)*.1))}
.hero .support-campaign h2{padding-block:max(.5rem,calc(.875rem - var(--hero-tighten)*.07));margin-top:max(.5rem,calc(.75rem - var(--hero-tighten)*.05))}
.hero .support-benefits{margin-top:max(.25rem,calc(.625rem - var(--hero-tighten)*.06))}
.hero .fair-slide>.wrap{padding-top:max(.75rem,calc(1.6875rem - var(--hero-tighten)*.15))}
.hero .fair-main{padding-block:max(.75rem,calc(1.25rem - var(--hero-tighten)*.1))}
.hero .fair-heading{padding-top:max(.75rem,calc(1.3125rem - var(--hero-tighten)*.1));padding-bottom:max(.625rem,calc(1.0625rem - var(--hero-tighten)*.1))}
.hero .fair-facts{padding-block:max(.5rem,calc(.875rem - var(--hero-tighten)*.08))}


/* Mobile type fit: preserve copy and the proportional rem scale. */
@media (width < 768px) {
  .prog .program-copy>h3 {font-size:1.75rem;letter-spacing:-.045em}
  .quick-consult .mobile-fit-title {font-size:1.6875rem;letter-spacing:-.045em}
  .teachers-page .quick-consult .mobile-fit-title {font-size:1.625rem}
  body.greeting-page .guide-cover .guide-school--long {font-size:1rem;letter-spacing:-.04em}
  body.greeting-page .guide-cover .guide-school--extra-long {font-size:1rem;letter-spacing:-.06em}
  .prog .course-item.short small,
  .prog .course-item.private small {letter-spacing:-.045em}
  .prog .sub-card.hotel p,.special .lead {letter-spacing:-.035em}
}
@media (width <= 520px) {
  .prog .course-item.regular small {letter-spacing:-.045em}
}


/* Mobile hero composition, readable supporting copy and touch targets. */
@media (width < 768px) {
  .hero {touch-action:pan-y pinch-zoom}
  .hero .hero-slide a {min-height:44px}
  .hero .secret-slide .campaign-bg {
    top:22%;bottom:0;height:78%;object-position:90% center;opacity:.85;
    mask-image:linear-gradient(180deg,transparent,#000 18%);
  }
  .hero .secret-slide .campaign-wash {background:linear-gradient(90deg,rgba(3,8,17,.9),rgba(3,8,17,.5) 48%,rgba(3,8,17,.12))}
  .hero .assessment-slide {background:linear-gradient(145deg,#b9e7fc,#dff4fd 65%,#fff)}
  .hero .assessment-sky {
    top:26%;bottom:0;height:74%;object-position:right bottom;
    mask-image:linear-gradient(180deg,transparent,#000 22%);
  }
  .hero .assessment-network {transform:translateX(-2.5rem)}
  .hero .univ-slide .univ-intro {gap:.4rem}
  .hero .univ-slide .univ-intro .univ-emblem {width:2.375rem;height:2.5rem;flex-shrink:0}
  .hero .univ-slide .univ-intro .univ-prof {font-size:max(12px,.8125rem)}
  .hero .why-slide .campaign-copy .lead {font-size:max(12px,.75rem);line-height:1.6}
  .hero .why-slide .why-proof {display:inline}
  .hero .why-slide .campaign-btn {margin-top:max(.75rem,calc(1.5rem - var(--hero-tighten)*.08))}
  .hero .support-photo figcaption {font-size:max(12px,.75rem);letter-spacing:-.025em}
  .hero .admissions-school h3 {font-size:max(12px,.8125rem)}
  .hero .admissions-footnote {font-size:max(11px,.6875rem)}
  .hero.is-light .nav button {border-color:rgba(23,61,103,.4);background:rgba(255,255,255,.86);color:#173d67}
  .hero.is-light .nav .progress {background:rgba(23,61,103,.24)}
}



/* Requested mobile hero position and type adjustments. */
@media (width < 768px) {
  .hero .signature-slide .hero-model {bottom:0}
  .hero .experience-slide>.wrap {padding-top:max(10.75rem,calc(17rem - var(--hero-tighten)*.7))}
  .hero .experience-actions {margin-top:max(.4375rem,calc(.8125rem - var(--hero-tighten)*.05))}
  .hero .experience-copy h2 {font-size:2.25rem}
  .hero .experience-lead {font-size:max(13px,.875rem);margin-top:max(.375rem,calc(.6875rem - var(--hero-tighten)*.04))}
  .hero .lecture-slide .campaign-copy h2 {font-size:2.625rem}
  .hero .lecture-slide .campaign-copy .lead {font-size:max(13px,1.0625rem)}
}

/* Mobile hero photo visibility, title scale and results alignment. */
@media (width < 768px) {
  .hero .ai-slide>.wrap {align-items:flex-start;padding-top:2rem}
  .hero .ai-copy .chip {margin-bottom:0}
  .hero .ai-copy h2 {margin-top:.75rem}
  .hero .ai-copy strong {margin-top:.875rem}
  .hero .ai-copy h3 {margin-top:.875rem}
  .hero .ai-copy p {margin-top:.75rem}
  .hero .ai-visual {top:auto;bottom:0;left:3rem;width:calc(100% - 3rem);height:52%;opacity:1;mask-image:linear-gradient(180deg,transparent,#000 15%),linear-gradient(90deg,transparent,#000 1.25rem);mask-composite:intersect}
  .hero .ai-copy .ai-btn {background:rgba(255,255,255,.9)}
  .hero .ai-visual img {object-position:left center}
  .hero .ai-wash {background:linear-gradient(180deg,#eff9f8 0%,#eff9f8 44%,rgba(239,249,248,.6) 56%,rgba(239,249,248,0) 72%,rgba(239,249,248,.15) 86%,rgba(239,249,248,.9) 100%)}
  .hero .why-slide>.wrap {padding-top:max(1rem,calc(1.875rem - var(--hero-tighten)*.1))}
  .hero .why-slide .campaign-copy h2 {font-size:1.875rem}
  .hero .results-metrics {align-items:stretch}
  .hero .results-total,.hero .results-rate {display:grid;grid-template-rows:1.25rem 6.875rem 1.375rem;row-gap:.3125rem;align-items:center}
  .hero .results-year,.hero .results-rate-label {margin:0;font-size:max(12px,.875rem);line-height:1.4}
  .hero .results-count {white-space:nowrap}
  .hero .results-count,.hero .results-percent {font-size:4.375rem}
  .hero .results-total-note,.hero .results-rate-scope {margin:0;font-size:max(11px,.8125rem);line-height:1.4}
}