/* Phones only (<=700px, the banner's existing mobile breakpoint): show just the
 * center of the panorama - globe, logo, slogan, the two buttons and the desk -
 * and hide the side panels. Desktop and tablet rules are untouched. Loaded last. */
@media(max-width:700px){
 .lp-original-hero .lp-layered{aspect-ratio:417/438}
 /* crop the existing background to its middle instead of scaling the whole panorama */
 .lp-original-hero .lp-layered .lp-layered-background{width:100%;height:100%;object-fit:cover;object-position:50% 50%}
 /* side panels: current markup, plus the earlier portrait/booking/feature markup */
 .lp-original-hero .lp-layered .lp-left-teachers,
 .lp-original-hero .lp-layered .lp-left-booking,
 .lp-original-hero .lp-header-panels,
 .lp-original-hero .lp-layered .lp-portrait-group,
 .lp-original-hero .lp-layered .lp-booking-image-tile,
 .lp-original-hero .lp-layered .lp-layered-feature{display:none}

 .lp-original-hero .lp-layered .lp-layered-center{left:3%;width:94%;top:30%}
 .lp-original-hero .lp-layered .lp-layered-center .lp-layered-logo{top:0}
 .lp-original-hero .lp-layered .lp-layered-buttons{width:100%;margin:.6vw 0 0;gap:2vw}
 .lp-original-hero .lp-layered .lp-layered-buttons>.lp-hub-primary,
 .lp-original-hero .lp-layered .lp-layered-buttons>.lp-hub-secondary{flex:0 0 calc((100% - 2vw)/2);height:14vw;min-height:14vw;padding:1vw 2.5vw;border-width:.5vw;gap:1.2vw;font-size:4.3vw;line-height:1.15;box-shadow:0 1vw 2.6vw #00225a40}
 .lp-original-hero .lp-layered .lp-layered-buttons>.lp-hub-secondary{padding:1vw 2vw;gap:.8vw;font-size:3.7vw}
 .lp-original-hero .lp-layered .lp-layered-buttons .lp-hub-coupon-copy{gap:.6vw}
 .lp-original-hero .lp-layered .lp-layered-buttons small{font-size:2.75vw;line-height:1.1}
 /* longer coupon copy: Japanese is kept on one line by the regional styles, Spanish wraps */
 html:lang(ja) .lp-original-hero .lp-layered .lp-layered-buttons>.lp-hub-secondary{font-size:3.1vw}
 html:lang(ja) .lp-original-hero .lp-layered .lp-layered-buttons small{font-size:2.2vw}
 html:lang(es) .lp-original-hero .lp-layered .lp-layered-buttons>.lp-hub-secondary{font-size:3.2vw}
 html:lang(es) .lp-original-hero .lp-layered .lp-layered-buttons small{font-size:2.4vw}
}

/* Phone banner: lift the original globe artwork and separate the logo layer. */
@media (max-width:600px), (orientation:landscape) and (max-width:1000px) and (max-height:600px) and (hover:none) and (pointer:coarse){
 .lp-original-hero .lp-layered .lp-layered-background{top:-25%;height:125%;object-fit:cover;object-position:50% 50%}
 .lp-original-hero .lp-layered .lp-layered-center{top:48%}
 .lp-original-hero{margin-bottom:0;padding-bottom:0}
 .lp-original-hero+.lp-promo-reference{margin-top:0}
}
@media (orientation:landscape) and (max-width:1000px) and (max-height:600px) and (hover:none) and (pointer:coarse){
 .lp-original-hero .lp-layered{aspect-ratio:auto;height:420px}
 .lp-original-hero .lp-layered .lp-left-teachers,.lp-original-hero .lp-layered .lp-left-booking,.lp-original-hero .lp-header-panels{display:none}
 .lp-original-hero .lp-layered .lp-layered-center{left:50%;width:480px;max-width:94%;transform:translateX(-50%);top:48%}
 .lp-original-hero .lp-layered .lp-layered-center .lp-layered-logo{top:0}
 .lp-original-hero .lp-layered .lp-layered-buttons{width:100%;margin:3px 0 0;gap:10px}
 .lp-original-hero .lp-layered .lp-layered-buttons>.lp-hub-primary,.lp-original-hero .lp-layered .lp-layered-buttons>.lp-hub-secondary{flex:1;height:56px;min-height:56px;font-size:19px;padding:6px 10px;border-width:2px;gap:4px}
 .lp-original-hero .lp-layered .lp-layered-buttons small{font-size:13px}
}

/* Match the approved panorama as one proportional composition on phones. */
@media (max-width:600px), (orientation:landscape) and (max-width:1000px) and (max-height:600px) and (hover:none) and (pointer:coarse){
 .lp-original-hero .lp-layered{height:auto;aspect-ratio:2172/724}
 .lp-original-hero .lp-layered .lp-layered-background{inset:0;width:100%;height:100%;object-fit:contain;object-position:center;transform:none}
 .lp-original-hero .lp-layered .lp-left-teachers,.lp-original-hero .lp-layered .lp-left-booking{display:block}
 .lp-original-hero .lp-layered .lp-layered-center{left:34%;width:32%;max-width:none;top:43%;transform:none}
 .lp-original-hero .lp-layered .lp-layered-center .lp-layered-logo{top:0;width:100%;height:auto}
 .lp-original-hero .lp-layered .lp-layered-buttons{width:100%;margin:1vw 0 0;gap:1vw}
 .lp-original-hero .lp-layered .lp-layered-buttons>.lp-hub-primary,.lp-original-hero .lp-layered .lp-layered-buttons>.lp-hub-secondary{flex:1;min-width:0;height:6vw;min-height:6vw;padding:.3vw;border-width:.15vw;font-size:1.7vw;line-height:1.1;gap:.2vw;box-shadow:0 .3vw .8vw #00225a40}
 .lp-original-hero .lp-layered .lp-layered-buttons small{font-size:1.1vw;line-height:1.1}
 .lp-original-hero .lp-layered .lp-layered-buttons .lp-hub-coupon-copy{gap:.15vw}
 .lp-original-hero .lp-header-panels{display:grid;position:absolute;inset:5% 3% auto auto;width:26%;margin:0;padding:0;grid-template-columns:repeat(2,minmax(0,1fr));gap:.6vw;background:transparent}
 .lp-original-hero .lp-header-panel{--panel-angle:-6deg;border-width:.14vw!important;border-radius:.8vw;box-shadow:0 .35vw .97vw #063b7840!important}
 .lp-original-hero .lp-header-panel__copy{padding:.3vw;gap:.2vw}
 .lp-original-hero .lp-header-panel__copy strong{font-size:.65vw;line-height:1.25}
 .lp-original-hero .lp-header-panel__description{font-size:.5vw;line-height:1.35}
 .lp-promo-reference{--oct-pad:10px;--oct-gap:8px;background:#180a03;scroll-margin-block-start:72px;margin-top:0}
 .lp-promo-reference .lp-promo-slides{position:absolute;inset:0;height:100%}
 .lp-promo-reference .lp-promo-slide{background:#180a03}
 .lp-promo-reference .lp-promo-art--reference{inset:0;width:100%;height:100%;object-fit:cover;object-position:center;transform:none;opacity:.8}
 .lp-promo-reference .lp-promo-copy{position:relative;inset:auto;width:100%;max-width:none;height:auto;min-height:150px;margin:0;padding:14px 3% 10px;display:grid;grid-template-columns:46% 51%;grid-template-rows:auto auto auto;gap:8px 3%;box-sizing:border-box;background:linear-gradient(0deg,#180a03e6,#180a0366)!important}
 .lp-promo-reference .lp-promo-greeting{grid-area:1/1/2/2;width:100%;font-size:clamp(19px,5.2vw,36px);color:#ffbf24;text-shadow:0 2px #a93d00;transform:rotate(-3deg);line-height:1.05}
 .lp-promo-reference .lp-promo-copy h2{grid-area:2/1/3/2;width:100%;height:auto;min-height:25px;font-size:clamp(11px,2.8vw,20px);transform:rotate(-3deg)}
 .lp-promo-reference .lp-promo-rewards{grid-area:1/2/3/3;width:100%;margin:0;padding:3px 2px;border:1px dotted #ffd17b;border-radius:8px;background:#150702b3;gap:5px;box-sizing:border-box;color:#fff}
 .lp-promo-reference .lp-promo-copy .lp-promo-up-to{font-size:10px!important;line-height:1.2!important;color:#fff}
 .lp-promo-reference .lp-promo-rewards ol{gap:3px}
 .lp-promo-reference .lp-promo-rewards strong{width:clamp(28px,7.8vw,44px);height:clamp(28px,7.8vw,44px);flex-basis:clamp(28px,7.8vw,44px);font-size:clamp(19px,5.1vw,28px)}
 .lp-promo-reference .lp-promo-rewards li span{font-size:clamp(7px,1.8vw,11px);line-height:1.15;color:#fff;margin-top:4px}
 .lp-promo-reference .lp-promo-copy>.lp-promo-spooky-pricing{grid-area:3/1/4/2;min-height:28px;margin:0;color:#ffce47;font-size:13px}
 .lp-promo-reference .lp-promo-open{grid-area:3/2/4/3;min-height:32px;margin:0}
 .lp-promo-reference .lp-promo-open>span{min-height:32px;font-size:13px}
}

/* Touch tablets: give the complete October composition room and slim the CTAs. */
@media (min-width:701px) and (max-width:1400px) and (min-height:601px) and (hover:none) and (pointer:coarse){
 .lp-promo-reference{--tablet-promo-height:clamp(120px,13vw,180px)}
 .lp-promo-reference .lp-promo-slides{height:var(--tablet-promo-height)}
 .lp-promo-reference .lp-promo-art--reference{height:calc(var(--tablet-promo-height) * 807 / 233);width:100%;object-fit:cover;object-position:50% 100%}
 .lp-original-hero .lp-layered-buttons>.lp-hub-primary,.lp-original-hero .lp-layered-buttons>.lp-hub-secondary{height:40px;min-height:40px;padding:3px 8px;font-size:clamp(10px,1.15vw,16px);line-height:1.1}
 .lp-original-hero .lp-layered-buttons .lp-hub-coupon-copy{gap:1px}
 .lp-original-hero .lp-layered-buttons small{font-size:clamp(8px,.8vw,11px);line-height:1.1}
 .lp-promo-reference .lp-promo-open>span{height:30px;min-height:30px;top:auto;bottom:12%;padding:0 6px;font-size:clamp(10px,1.2vw,16px)}
}

/* Portrait phones: zoom the proportional composition 2.4x around its center so only the
 * globe, logo, slogan, buttons and desk show; the side panels stay in place, outside the crop. Scaling
 * the whole layer keeps every element visually identical to the desktop center. */
@media (max-width:600px){
 .lp-original-hero{overflow:hidden;aspect-ratio:2172/1738}
 .lp-original-hero .lp-layered{transform:scale(2.4);transform-origin:50% 0}
 /* feature panels sit outside .lp-layered: give them the same zoom (origin = banner top center) so they keep their place and fall outside the crop */
 .lp-original-hero .lp-header-panels{top:calc(100vw / 3 * .05);transform:scale(2.4);transform-origin:-21vw calc(100vw / -3 * .05)}
}