/* Header, class calendar and preview comparison controls. */
:root{--safe-top:env(safe-area-inset-top,0px)}
html{scroll-padding-top:calc(var(--header-height) + var(--safe-top) + 18px);background:#111719}
body{background:#fff}
.header{inset:0 0 auto;height:calc(var(--header-height) + var(--safe-top));padding-top:var(--safe-top);background:#111719;isolation:isolate}
.header::before{content:'';position:absolute;left:0;right:0;bottom:100%;height:200px;background:#111719;pointer-events:none}
.header.scrolled,.header.menu-open{background:#111719}
.logo img{filter:invert(1);mix-blend-mode:normal;object-fit:contain}
.footer-logo img{width:38px;height:38px;margin-right:11px}
.font-toggle{display:inline-flex;align-items:center;justify-content:center;gap:7px;min-height:42px;padding:7px 11px;border:1px solid #ffffff55;border-radius:99px;background:#ffffff15;color:#fff;flex-shrink:0;transition:background .25s,color .25s}
.font-toggle>span:first-child{font:500 1.15rem/1 Georgia,serif}
.font-toggle-label{font-size:.63rem;white-space:nowrap}
.font-toggle[aria-pressed=true]{background:#fff;color:#151515}
/* V9 iPhone screenshots: Times-style serif, upright uppercase main titles.
   The smaller class invitation remains sentence case, as in the reference. */
body[data-title-style=classic]{--title-font:'Times New Roman',Times,serif}
body[data-title-style=classic] :is(h1,h2,h3){font-weight:500;letter-spacing:-.035em}
body[data-title-style=classic] :is(.hero h1,.section h2,.statement h2,.person h3,.exp-card h3,.footer h2){text-transform:uppercase;font-style:normal}
body[data-title-style=classic] :is(h1,h2,h3) em{font-style:normal}
body[data-title-style=classic] .hero h1{font-size:clamp(4.2rem,10vw,9rem)}
body[data-title-style=classic] .section h2{font-size:clamp(3.3rem,6.5vw,6.6rem);line-height:1.08}
body[data-title-style=classic] .statement h2{font-size:clamp(4rem,10vw,9rem)}
body[data-title-style=classic] .footer h2{font-size:clamp(3rem,9vw,9rem);line-height:.97}
body[data-title-style=classic] .class-invite h3{font-size:clamp(2.1rem,4vw,3.5rem);letter-spacing:normal}
.city-switch{position:relative;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0;padding:5px;border:1px solid var(--palette-tab-border,#c6d4d5);border-radius:99px;background:var(--soft);isolation:isolate;min-width:280px}
.city-switch::before{content:'';position:absolute;inset:5px auto 5px 5px;width:calc((100% - 10px)/2);border-radius:99px;background:var(--accent);box-shadow:0 3px 9px #0001;transition:transform .3s cubic-bezier(.2,.8,.2,1);z-index:-1}
.city-switch[data-active-city=siena]::before{transform:translateX(100%)}
.city-switch .tab{border:0;background:transparent;box-shadow:none;padding:13px 20px;color:#344144;white-space:nowrap}
.city-switch .tab[aria-selected=true]{background:transparent;border-color:transparent;color:#fff}
.city-switch .tab:hover{background:transparent}
#class-schedule{grid-template-columns:repeat(2,minmax(0,1fr));align-items:start;gap:18px}
#class-schedule .sched-entry{min-width:0}
#class-schedule .sched-toggle{display:block;position:relative;min-height:168px;padding:24px;text-align:left}
#class-schedule .sched-toggle>span:first-child{display:block;min-width:0}
#class-schedule .sched-toggle strong{padding-right:35px;font-size:1.35rem;line-height:1.25;margin-bottom:12px}
#class-schedule .sched-toggle .plus{position:absolute;top:21px;right:20px}
#class-schedule .class-time{display:block;color:var(--accent);font-size:1.1rem;font-weight:600;margin-bottom:5px}
#class-schedule .class-name{display:block;font-size:.9rem;line-height:1.45;color:#596568}
#class-schedule .content-inner{font-size:.9rem}
.studio-preview{display:block;margin:0;padding:0;background:none;border:0;box-shadow:none;transform:none;overflow:visible;min-width:0}
.studio-devices{position:relative;aspect-ratio:1.25}
.studio-desktop{position:absolute;left:0;top:3%;width:92%;display:block;border:12px solid #303436;border-radius:20px;overflow:hidden;background:#303436;box-shadow:0 18px 36px #0003;transform:rotate(-2deg)}
.studio-preview .studio-course{position:absolute;left:3%;right:auto;bottom:5%;width:57%!important;margin:0;border:7px solid #303436;border-radius:12px;box-shadow:0 14px 35px #0004;transform:rotate(3deg);z-index:1}
.studio-phone{position:absolute;right:0;bottom:0;width:30%;padding:5px;border:3px solid #505457;border-radius:25px;background:#303436;box-shadow:0 16px 30px #0005;overflow:hidden;z-index:2;transform:rotate(3deg)}
.studio-phone img{display:block;width:100%;height:auto;border-radius:16px}
.studio-preview figcaption{padding:20px 0 0;margin:0;font-size:.8rem;line-height:1.6;max-width:100%;color:#f1f7f7}
@media(max-width:1200px){.font-toggle-label{display:none}.font-toggle{width:40px;padding:7px}.header{gap:10px}.city-switch{margin-top:25px}}
@media(max-width:1000px){
 .header{backdrop-filter:none;-webkit-backdrop-filter:none}
 .header .theme-switch{transform:none;margin-left:auto}
 .mobile-full-nav{padding-top:calc(var(--header-height) + var(--safe-top) + 26px)}
 .font-toggle{width:38px;min-height:42px}
 .header .theme-switch button{width:36px}
}
@media(max-width:700px){
 .header{padding-inline:14px;gap:7px}
 .header .logo{font-size:.9rem}
 .header .logo img{width:25px;height:25px;margin-right:6px}
 .header .theme-switch{padding:3px}
 .header .theme-switch button{width:31px;height:38px}
 .font-toggle{width:36px;min-height:42px}
 .menu{width:42px;height:44px}
 .city-switch{width:100%;min-width:0;margin:25px 0 0;gap:0}
 .city-switch .tab{min-height:45px;padding:12px 8px}
 #class-schedule{gap:12px}
 #class-schedule .sched-toggle{min-height:165px;padding:20px 15px 18px}
 #class-schedule .sched-toggle strong{font-size:1.05rem;line-height:1.3;padding-right:27px;margin-bottom:14px}
 #class-schedule .sched-toggle .plus{top:16px;right:10px;width:28px;height:28px;padding:5px}
 #class-schedule .class-time{font-size:.98rem;line-height:1.5}
 #class-schedule .class-name{font-size:.8rem;line-height:1.5}
 #class-schedule .content-inner{padding-inline:14px;font-size:.83rem;overflow-wrap:break-word}
 #class-schedule .event-link{align-items:flex-start;font-size:.8rem}
 #class-schedule .event-link svg{margin-top:4px}
 .footer .footer-logo img{width:22px;height:22px;margin-right:8px}
 .studio-preview{margin:20px 0 0}
 .studio-devices{aspect-ratio:1.14}
 .studio-desktop{border-width:8px;border-radius:14px;top:5%}
 .studio-phone{width:33%;padding:3px;border-width:2px;border-radius:18px;right:1%}
 .studio-phone img{border-radius:12px}
 .studio-preview .studio-course{border-width:4px;bottom:7%;width:57%!important}
 .studio-preview figcaption{padding:18px 0 0;font-size:.75rem}
}
@media(max-width:800px){
 body[data-title-style=classic] .hero h1{font-size:clamp(3.4rem,14vw,5.4rem)}
 body[data-title-style=classic] .section h2{font-size:clamp(2.8rem,10vw,5rem)}
 body[data-title-style=classic] .statement h2{font-size:clamp(2.6rem,10vw,7rem)}
 body[data-title-style=classic] .class-invite h3{font-size:2.45rem}
}
@media(max-width:360px){
 .header{padding-inline:9px;gap:5px}
 .header .logo{font-size:.79rem}
 .header .logo img{width:22px;height:22px;margin-right:4px}
 .header .theme-switch button{width:29px}
 .font-toggle{width:33px}
 .menu{width:39px}
 #class-schedule{gap:9px}
 #class-schedule .sched-toggle{padding:17px 11px 16px;min-height:170px}
 #class-schedule .sched-toggle strong{font-size:.94rem;padding-right:22px}
 #class-schedule .sched-toggle .plus{top:14px;right:6px;width:25px;height:25px}
 #class-schedule .class-time{font-size:.9rem}
 #class-schedule .class-name{font-size:.76rem}
}
@media(prefers-reduced-motion:reduce){.city-switch::before,.font-toggle{transition:none}}