/* =========================================================
   v6.42 — DEVICE-SPECIFIC RESPONSIVE POLISH
   Targets the three practical viewing classes requested:
   15.6" laptop, 11" iPad Air, iPhone Pro.
   This layer intentionally leaves supplied photography untouched.
   ========================================================= */

/* ---------- Shared responsive safeguards ---------- */
html{scroll-padding-top:92px}
img,video{max-width:100%}
button,a,input,select,textarea{-webkit-tap-highlight-color:transparent}
@media (hover:none){
  .pathway-photo:hover img,
  .photo-mosaic figure:hover img,
  .performance-mosaic figure:hover img,
  .review-item:hover,
  .principle-note-photo:hover img{
    transform:none!important;
  }
}

/* ---------- 15.6" laptop class ----------
   Covers common effective CSS widths from 1366 through 1536/1600.
   1366 stays on the compact header; 1440–1600 keeps the full menu
   but shortens it enough to preserve clear space around the logo. */
@media (min-width:1200px) and (max-width:1600px){
  header .wrap.nav{
    width:min(calc(100% - 36px),1540px);
  }

  .hero-v3 .hero-copy{
    max-width:900px!important;
  }
  .hero-v3 h1{
    max-width:900px!important;
    font-size:clamp(5rem,7.05vw,7rem)!important;
    line-height:.87!important;
    letter-spacing:-.045em!important;
  }
  .hero-v3 h1 .hero-prof-line{
    font-size:.80em!important;
  }
  .hero-v3 .hero-copy>p{
    max-width:620px!important;
  }

  .page-hero h1{
    font-size:clamp(4.7rem,6.8vw,7.2rem)!important;
  }

  .inner-section,
  .dark-section{
    padding-top:96px;
    padding-bottom:96px;
  }

  .faculty-intro{
    padding-top:102px!important;
    padding-bottom:74px!important;
  }
  .faculty-section{
    padding-top:80px!important;
    padding-bottom:80px!important;
  }
}


/* Full navigation within the laptop class: shorten the menu before it can
   approach the centred logo. */
@media (min-width:1401px) and (max-width:1600px){
  header .links{
    gap:10px!important;
    font-size:.565rem!important;
    letter-spacing:.005em!important;
  }
  header .brand-logo{
    width:205px!important;
    min-width:205px!important;
  }
  header .header-actions{
    gap:11px!important;
  }
  header .theme-toggle{
    padding-inline:9px;
  }
  header .book{
    padding-left:12px!important;
    padding-right:12px!important;
  }
}

/* Short-height laptop displays, including common 1366×768 and
   1536×864 working areas. Keep first screens composed rather than oversized. */
@media (min-width:1100px) and (max-height:900px){
  .hero-v3{
    min-height:calc(100svh - 82px)!important;
    padding-top:56px!important;
    padding-bottom:50px!important;
  }
  .hero-v3 h1{
    margin-top:14px!important;
    margin-bottom:21px!important;
  }
  .hero-actions{
    margin-top:24px!important;
  }
  .hero-actions .btn{
    min-height:45px;
  }

  .page-hero{
    min-height:66svh!important;
    padding-top:58px!important;
    padding-bottom:52px!important;
  }

  .stage-break,
  .stage-panel{
    min-height:590px!important;
  }

  .about-v3 .about-portrait,
  .about-v3 .about-portrait img{
    min-height:590px!important;
    height:590px!important;
  }

  .studio-images{
    min-height:570px!important;
  }
  .studio-main{
    height:490px!important;
  }
}

/* ---------- 11" iPad Air ----------
   Portrait: 820×1180 class. Landscape: 1180×820 class. */
@media (min-width:768px) and (max-width:1199px){
  .wrap{
    width:min(calc(100% - 52px),var(--max))!important;
  }

  header{
    padding-top:18px!important;
    padding-bottom:18px!important;
  }
  header .wrap.nav{
    width:calc(100% - 40px)!important;
  }
  header .brand-logo{
    width:184px!important;
    min-width:184px!important;
  }
  header .menu{
    min-width:44px;
    min-height:44px;
  }
  header .book{
    min-height:44px;
    display:inline-flex;
    align-items:center;
  }
  header .links{
    width:min(470px,calc(100vw - 40px))!important;
    max-height:calc(100svh - 108px)!important;
  }

  .section-intro,
  .section-intro-v36{
    grid-template-columns:120px minmax(0,1fr)!important;
    gap:26px!important;
  }

  .page-hero h1{
    max-width:860px;
    line-height:.9!important;
  }

  .inner-section,
  .dark-section{
    padding-top:86px!important;
    padding-bottom:86px!important;
  }

  .profile-bio{
    padding-top:88px!important;
  }
  .profile-bio h1{
    line-height:.9!important;
  }
}

/* iPad Air portrait */
@media (min-width:768px) and (max-width:900px) and (orientation:portrait){
  header .theme-label{display:none}
  header .theme-toggle{
    width:38px;
    padding:0;
    justify-content:center;
  }

  .hero-v3{
    min-height:72svh!important;
    padding-top:74px!important;
    padding-bottom:62px!important;
    background-position:60% center!important;
  }
  .hero-v3 .hero-copy{
    max-width:700px!important;
  }
  .hero-v3 h1{
    font-size:clamp(4.45rem,9vw,5rem)!important;
    line-height:.9!important;
    max-width:720px!important;
  }
  .hero-v3 h1 .hero-prof-line{
    font-size:.84em!important;
  }

  .page-hero{
    min-height:62svh!important;
    padding-top:68px!important;
    padding-bottom:56px!important;
  }
  .page-hero h1{
    font-size:clamp(4.2rem,9vw,5rem)!important;
  }

  /* Three equal homepage cards remain equal on desktop/landscape,
     but become a readable single-column sequence in portrait. */
  .pathways.pathways-three{
    grid-template-columns:1fr!important;
    grid-template-rows:auto!important;
  }
  .pathways-three .pathway,
  .pathways-three .pathway-text{
    height:auto!important;
    min-height:360px!important;
  }

  .performance-mosaic{
    grid-template-columns:1fr 1fr!important;
    grid-template-rows:250px 250px!important;
  }
  .performance-mosaic figure,
  .performance-mosaic .programmes,
  .performance-mosaic .student{
    grid-column:auto!important;
    grid-row:auto!important;
    height:auto!important;
  }

  .contact-choice-grid{
    grid-template-columns:1fr!important;
  }

  .reviews-hero{
    min-height:720px!important;
  }
  .reviews-title-panel{
    width:calc(100% - 52px)!important;
    left:26px!important;
    bottom:26px!important;
  }

  .faculty-profile{
    grid-template-columns:38px minmax(150px,190px) minmax(0,1fr)!important;
    gap:22px!important;
  }
  .faculty-portrait{
    max-width:190px!important;
  }
  .faculty-body h2{
    font-size:clamp(2.35rem,5vw,3.25rem)!important;
  }

  .consultation-half{
    padding:38px!important;
  }
}

/* iPad Air landscape */
@media (min-width:901px) and (max-width:1199px) and (orientation:landscape){
  .hero-v3{
    min-height:calc(100svh - 84px)!important;
    padding-top:58px!important;
    padding-bottom:52px!important;
  }
  .hero-v3 .hero-copy{
    max-width:820px!important;
  }
  .hero-v3 h1{
    font-size:clamp(4.85rem,7.4vw,5.8rem)!important;
    line-height:.89!important;
    max-width:840px!important;
  }
  .hero-v3 h1 .hero-prof-line{
    font-size:.82em!important;
  }

  .page-hero{
    min-height:67svh!important;
    padding-top:58px!important;
    padding-bottom:52px!important;
  }

  .pathways.pathways-three{
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
    grid-template-rows:390px!important;
  }
  .pathways-three .pathway,
  .pathways-three .pathway-text{
    height:390px!important;
    min-height:390px!important;
  }

  .performance-mosaic{
    margin-top:42px!important;
  }

  .consultation-half{
    min-height:480px!important;
    padding:42px!important;
  }

  .faculty-profile{
    grid-template-columns:46px minmax(175px,220px) minmax(0,1fr)!important;
    gap:28px!important;
  }
}

/* ---------- iPhone Pro ----------
   Covers current non-Max Pro CSS widths around 393–402px while remaining
   safe for nearby 375–430px devices. */
@media (max-width:430px){
  html{scroll-padding-top:76px}

  .wrap{
    width:calc(100% - 40px)!important;
  }

  header{
    padding-top:13px!important;
    padding-bottom:13px!important;
  }
  header .wrap.nav{
    width:calc(100% - 28px)!important;
    min-height:50px!important;
  }
  header .brand-logo{
    width:142px!important;
    min-width:142px!important;
  }
  header .brand-logo img{
    max-height:50px!important;
  }
  header .menu{
    min-width:44px!important;
    min-height:44px!important;
    padding:8px 0 8px 8px!important;
  }
  header .menu i{
    width:24px!important;
    margin:6px 0 6px auto!important;
  }
  header .links{
    top:calc(100% + 8px)!important;
    width:100%!important;
    max-height:calc(100svh - 82px)!important;
    padding:12px 16px 16px!important;
  }
  header .links>a,
  header .nav-dropdown>.nav-dropdown-trigger{
    min-height:44px;
    display:flex!important;
    align-items:center;
  }
  header .nav-dropdown-menu a{
    min-height:40px;
  }

  .hero-v3{
    min-height:calc(100svh - 76px)!important;
    padding-top:52px!important;
    padding-bottom:44px!important;
    background-position:61% center!important;
  }
  .hero-v3 .hero-copy{
    max-width:100%!important;
  }
  .hero-v3 h1{
    font-size:clamp(3.18rem,13.6vw,3.55rem)!important;
    line-height:.92!important;
    letter-spacing:-.035em!important;
    margin:14px 0 20px!important;
    max-width:100%!important;
  }
  .hero-v3 h1 .hero-prof-line{
    font-size:.86em!important;
    line-height:1!important;
  }
  .hero-v3 .hero-copy>p{
    font-size:.94rem!important;
    line-height:1.52!important;
  }
  .hero-actions{
    margin-top:24px!important;
  }
  .hero-actions-three{
    gap:8px!important;
  }
  .hero-actions-three .btn{
    min-height:50px!important;
    padding-inline:15px!important;
    font-size:.64rem!important;
  }

  .page-hero{
    min-height:66svh!important;
    padding-top:54px!important;
    padding-bottom:46px!important;
  }
  .page-hero h1{
    font-size:clamp(3.2rem,13.8vw,3.75rem)!important;
    line-height:.92!important;
    letter-spacing:-.035em!important;
    margin-top:14px!important;
    margin-bottom:20px!important;
  }
  .page-hero p{
    font-size:.94rem!important;
    line-height:1.55!important;
  }

  .inner-section,
  .dark-section{
    padding-top:66px!important;
    padding-bottom:66px!important;
  }
  .text-section{
    padding-top:58px!important;
    padding-bottom:58px!important;
  }

  .section-intro,
  .section-intro-v36{
    grid-template-columns:1fr!important;
    gap:14px!important;
  }
  .section-intro h2,
  .section-intro-copy-v36 h2,
  .editorial-copy h2,
  .cta-panel h2{
    font-size:clamp(2.85rem,12vw,3.45rem)!important;
    line-height:1!important;
  }
  .section-intro p,
  .section-intro-copy-v36 p{
    margin-top:16px!important;
  }

  .editorial-grid{
    gap:30px!important;
    margin-top:34px!important;
  }
  .editorial-image,
  .editorial-image img{
    min-height:320px!important;
  }
  .editorial-image.tall,
  .editorial-image.tall img{
    min-height:370px!important;
  }

  .method-v3,
  .lessons-v3,
  .performance-v3,
  .studio-v3,
  .about-v3,
  .cta-v3{
    padding-top:68px!important;
    padding-bottom:68px!important;
  }
  .principle-note-v36{
    padding-top:38px!important;
    padding-bottom:38px!important;
  }
  .principle-note-copy h2{
    font-size:clamp(2.55rem,11.6vw,3.25rem)!important;
  }
  .principle-note-photo{
    height:auto!important;
    aspect-ratio:4/3!important;
  }

  .pathways.pathways-three{
    grid-template-columns:1fr!important;
    grid-template-rows:auto!important;
    gap:12px!important;
  }
  .pathways-three .pathway,
  .pathways-three .pathway-text{
    min-height:330px!important;
    height:auto!important;
  }
  .pathway-copy,
  .pathways-three .pathway-copy{
    left:22px!important;
    right:22px!important;
    bottom:22px!important;
    padding-bottom:0!important;
  }
  .pathway-text{
    padding:28px!important;
  }

  .performance-mosaic{
    grid-template-columns:1fr 1fr!important;
    grid-template-rows:160px 160px!important;
    gap:7px!important;
  }
  .performance-combined .performance-bridge{
    margin-top:38px!important;
    padding:38px 20px 42px!important;
  }
  .performance-bridge h3{
    font-size:clamp(2.55rem,11.4vw,3.25rem)!important;
  }

  .stage-break,
  .stage-panel{
    min-height:520px!important;
    padding-top:54px!important;
    padding-bottom:54px!important;
  }
  .stage-break h2,
  .stage-panel h2{
    font-size:clamp(3rem,12.5vw,3.7rem)!important;
    line-height:.96!important;
  }
  .stage-break .stage-emphasis{
    font-size:1.35rem!important;
  }

  .studio-images{
    gap:8px!important;
  }
  .studio-images .studio-main{
    height:255px!important;
  }
  .studio-images .studio-detail,
  .studio-images .studio-exterior{
    height:135px!important;
  }

  .about-v3 .about-portrait,
  .about-v3 .about-portrait img{
    min-height:385px!important;
    height:385px!important;
  }

  .cta-v3 h2{
    font-size:clamp(3.75rem,15.2vw,4.4rem)!important;
    line-height:.92!important;
  }
  .home-faq-item button{
    min-height:50px;
  }

  .reviews-hero{
    min-height:720px!important;
  }
  .reviews-title-panel{
    left:14px!important;
    right:14px!important;
    bottom:14px!important;
    min-height:0!important;
  }
  .reviews-title-inner{
    padding:28px 24px 30px!important;
  }
  .reviews-title-inner h1{
    font-size:clamp(3.15rem,14vw,3.7rem)!important;
  }
  .reviews-list-section{
    padding-bottom:78px!important;
  }

  .faculty-intro{
    padding-top:62px!important;
    padding-bottom:48px!important;
  }
  .faculty-intro h1{
    font-size:clamp(3.25rem,14vw,3.9rem)!important;
    line-height:.92!important;
  }
  .faculty-section{
    padding-top:56px!important;
    padding-bottom:56px!important;
  }
  .faculty-profile,
  .faculty-profile-with-portrait{
    grid-template-columns:28px minmax(0,1fr)!important;
    gap:12px 14px!important;
    padding:32px 0!important;
  }
  .faculty-portrait{
    max-width:188px!important;
    margin-bottom:8px!important;
  }
  .faculty-body h2{
    font-size:clamp(2.35rem,10.8vw,2.85rem)!important;
    line-height:.98!important;
  }
  .faculty-end{
    padding-top:64px!important;
    padding-bottom:70px!important;
  }
  .faculty-end h2{
    font-size:clamp(3rem,12.8vw,3.65rem)!important;
  }

  .profile-bio{
    padding-top:62px!important;
  }
  .profile-bio h1{
    font-size:clamp(3.35rem,14vw,4rem)!important;
    line-height:.92!important;
    margin-bottom:34px!important;
  }
  .profile-bio blockquote{
    font-size:clamp(1.55rem,7vw,1.9rem)!important;
    margin-bottom:42px!important;
  }
  .profile-bio .bio-copy p{
    font-size:.98rem!important;
    line-height:1.72!important;
  }

  .contact-choice-grid article{
    padding:26px 20px!important;
  }
  .contact-choice-grid h2{
    font-size:clamp(2.65rem,12vw,3.3rem)!important;
  }
  .contact-details{
    padding-top:42px!important;
  }

  .consultation-section{
    padding-top:58px!important;
  }
  .consultation-half{
    padding:26px 20px!important;
  }
  .consultation-copy .subtle-heading{
    font-size:clamp(2.75rem,12vw,3.45rem)!important;
    line-height:.98!important;
    margin-bottom:22px!important;
  }

  .form-card{
    padding:22px 18px!important;
  }
  input,select,textarea{
    font-size:16px!important; /* prevents Safari form zoom */
  }
  .btn{
    min-height:50px;
  }

  .practice-stage-nav{
    scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;
  }
  .practice-stage-nav>*{
    scroll-snap-align:start;
  }

  footer{
    padding-top:42px!important;
  }
  .foot-top{
    gap:22px!important;
  }
  .footer-logo{
    width:170px!important;
    min-width:170px!important;
  }
  .foot-nav{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    width:100%;
    gap:2px 16px!important;
  }
  .foot-nav a{
    width:auto!important;
    min-height:38px;
    display:flex!important;
    align-items:center;
  }
  .footer-contact{
    font-size:.66rem!important;
  }
}

/* The very narrow edge of the non-Max Pro family / older 375px devices. */
@media (max-width:380px){
  .hero-v3 h1{
    font-size:3.05rem!important;
  }
  .page-hero h1{
    font-size:3.05rem!important;
  }
  header .brand-logo{
    width:136px!important;
    min-width:136px!important;
  }
  .faculty-portrait{
    max-width:174px!important;
  }
}


/* v6.47 — final navigation readability + mobile logo centring */

/* Laptop/desktop: make navigation comfortably readable without crowding logo. */
@media (min-width:1401px){
  header .links{
    font-size:.64rem!important;
    gap:11px!important;
    letter-spacing:.01em!important;
  }
}

/* Compact laptop header: increase menu type while retaining the responsive layout. */
@media (min-width:901px) and (max-width:1400px){
  header .links{
    font-size:.72rem!important;
  }
  header .links>a,
  header .nav-dropdown>.nav-dropdown-trigger{
    line-height:1.35!important;
  }
}

/* Tablet/mobile: logo is mathematically centred in the viewport rather than
   merely centred in the remaining space between controls. */
@media (max-width:1199px){
  header .wrap.nav{
    position:relative!important;
  }
  header .brand-logo{
    position:absolute!important;
    left:50%!important;
    top:50%!important;
    transform:translate(-50%,-50%)!important;
    margin:0!important;
    z-index:1;
  }
  header .header-actions{
    margin-left:auto!important;
    position:relative;
    z-index:2;
  }
  header .menu{
    position:relative;
    z-index:2;
  }
}

/* Phone: keep the centred logo clear of both edge controls. */
@media (max-width:430px){
  header .brand-logo{
    width:142px!important;
    min-width:142px!important;
  }
  header .links{
    font-size:.76rem!important;
  }
}


/* v6.48 — larger header navigation */
@media (min-width:1401px){
  header .links{
    font-size:.73rem!important;
    gap:12px!important;
    letter-spacing:.008em!important;
  }
}

@media (min-width:901px) and (max-width:1400px){
  header .links{
    font-size:.82rem!important;
  }
}

@media (max-width:900px){
  header .links{
    font-size:.84rem!important;
  }
  header .links>a,
  header .nav-dropdown>.nav-dropdown-trigger{
    font-size:.84rem!important;
  }
  header .nav-dropdown-menu span{
    font-size:.80rem!important;
  }
}