/* Floating contacts dock to the right edge as a sea-glass rail. */
.lesson-shortcuts{position:fixed;top:50%;right:env(safe-area-inset-right,0px);translate:0 -50%;display:flex;flex-direction:column;align-items:center;gap:8px;padding:10px 7px 10px 10px;border-radius:24px 0 0 24px;background:var(--field-surface);backdrop-filter:var(--field-filter);-webkit-backdrop-filter:var(--field-filter);box-shadow:inset 0 1px 0 var(--field-highlight),inset 0 -10px 20px #d9c39433,0 8px 22px #17212422;pointer-events:auto}
/* Content-band gate: the rail slides in from the right edge, never over the hero or footer. */
.lesson-shortcuts.lesson-shortcuts--off{opacity:0;visibility:hidden;transform:translateX(26px);pointer-events:none;transition:opacity .45s ease-out,transform .45s ease-out,visibility 0s linear .45s}
.lesson-shortcuts.lesson-shortcuts--off.lesson-shortcuts--on{opacity:1;visibility:visible;transform:none;pointer-events:auto;transition:opacity .45s ease-out .06s,transform .45s ease-out .06s,visibility 0s .06s}
/* The closing contact copy is centred on phones; dock the rail below it there.
   GSAP writes translate:none inline on the rail, so the docked value must win. */
@media(max-width:760px){
 .lesson-shortcuts{transition:translate .35s ease-out,opacity .45s ease-out,visibility 0s}
 .lesson-shortcuts.lesson-shortcuts--contact{translate:0 calc(50vh - 96px - 100%)!important}
}
@media(prefers-reduced-motion:reduce){.lesson-shortcuts{transition:none}}
.lesson-shortcuts a{display:flex;justify-content:center;align-items:center;min-height:var(--control-size);padding:8px 16px;border-radius:var(--radius-pill);color:var(--field-ink);font-size:var(--text-reading);font-weight:700;line-height:1.4;text-decoration:none;white-space:nowrap}
:is(.lesson-shortcuts,.menu-contacts) .contact-shortcut{width:54px;height:54px;min-height:54px;padding:0;border-radius:50%;color:#fff}
:is(.lesson-shortcuts,.menu-contacts) .contact-shortcut--whatsapp{background:#11763b}
:is(.lesson-shortcuts,.menu-contacts) .contact-shortcut--zalo{background:#0068ff}
:is(.lesson-shortcuts,.menu-contacts) .contact-shortcut--call{background:var(--ink)}
:is(.lesson-shortcuts,.menu-contacts) .contact-shortcut svg{width:25px;height:25px;display:block}
.lesson-shortcuts a:focus-visible{outline-color:var(--orange);outline-offset:1px}
/* A clean whiteboard sheet that rides up over the pinned surf gallery. */
.lessons{--lesson-w:min(1280px,88vw);position:relative;z-index:2;isolation:isolate;overflow-x:clip;padding:100px 6% 0;border-radius:var(--film-radius) var(--film-radius) 0 0;background:#fbfaf8;color:var(--ink);box-shadow:0 -22px 44px -24px #203e4b66;scroll-margin-top:0}
.lesson-container{max-width:1280px;margin:0 auto}
.lesson-heading{max-width:none;margin-bottom:54px}
.lesson-heading h2{margin:0;font:700 clamp(52px,9.6vw,160px)/.95 var(--font-sans);letter-spacing:-.07em;text-wrap:balance}
.lesson-heading h2 span{display:block;font-size:.42em;line-height:1.1;letter-spacing:-.05em}
.lesson-heading p{max-width:48ch;margin:40px 0 0;font:400 1rem/1.7 var(--font-sans)}
.lesson-courses{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
/* Reuse the approved kraft stock; crop the folder tab above the sheet edge. */
.lesson-card{--lesson-card-inset:24px;font-family:var(--font-sans);position:relative;display:flex;flex-direction:column;min-width:0;padding:var(--lesson-card-inset);background:url('assets/instructors/kraft-folder.webp') center bottom/100% 108% no-repeat;box-shadow:none}
.lesson-card::before{content:'';position:absolute;top:-18px;left:50%;width:clamp(128px,44%,176px);aspect-ratio:var(--tape-aspect-ratio);background-image:var(--texture-tape);background-repeat:no-repeat;background-size:201.59% 385.65%;background-position:4.25% 52.36%;transform:translateX(-50%) rotate(-5deg);pointer-events:none}
.lesson-card--blue::before{transform:translateX(-50%) rotate(5deg)}
.lesson-card h3{margin:24px 0 8px;font:700 clamp(32px,3.2vw,48px)/1 var(--font-sans);letter-spacing:-.06em}
.lesson-purpose{margin:0 0 16px;font-size:1rem;font-weight:700;line-height:1.6;text-align:right}
.lesson-description{margin:0 0 24px;font-size:1rem;line-height:1.7}
.lesson-prices{container-type:inline-size;margin:auto 0 0;padding-top:4px}
.lesson-prices>div{display:flex;flex-wrap:nowrap;align-items:baseline;justify-content:space-between;gap:8px;padding:10px 0}
.lesson-prices dt{min-width:0;font-size:clamp(12px,4.2cqw,16px);line-height:1.6;white-space:nowrap}
.lesson-prices dd{flex-shrink:0;margin:0;font:700 clamp(16px,6.4cqw,30px)/1.4 var(--font-sans);font-variant-numeric:tabular-nums;letter-spacing:-.045em;white-space:nowrap}
.lesson-prices dd span{font-size:.8em;letter-spacing:0}
.lesson-action{position:relative;z-index:1;display:inline-flex;align-items:center;justify-content:space-between;gap:16px;min-height:var(--control-size);padding:14px 16px;background:var(--ink);color:var(--paper-stock-cream);font-size:var(--text-reading);font-weight:700;line-height:1.5;text-decoration:none}
.lesson-action:focus-visible{outline-color:var(--ink);outline-offset:5px}
.lesson-action:active,.lesson-shortcuts a:active{filter:brightness(.82);text-decoration:underline;text-underline-offset:4px}

/* Swiss lesson bands: one strict grid, hairline rules, type does the work. */
/* Swiss bands: flat full-bleed fields, one grotesk, scale as hierarchy. No rules, no cards. */
.lesson-included,.lesson-first{--bleed:calc((100vw - var(--lesson-w))/2);margin-inline:calc(var(--bleed) * -1);padding-inline:var(--bleed);font-family:'Google Sans','Space Mono',sans-serif}
.lesson-included{margin-top:96px;padding-block:112px 96px;background:var(--ink);color:var(--paper-stock-cream)}
.lesson-first{padding-block:120px 0;background:var(--sun);color:var(--ink)}
.lesson-included .lesson-kit-copy h3,.lesson-first>h3{margin:0;font:700 clamp(56px,9.6vw,160px)/.86 'Google Sans','Space Mono',sans-serif;letter-spacing:-.07em;text-wrap:balance}
.lesson-kit-body{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(32px,5vw,80px);align-items:center;margin-top:72px}
.lesson-kit-moodboard{display:block;order:2;width:112%;max-width:none;height:auto;justify-self:end;margin-right:-6%}
.lesson-kit-list{order:1;display:grid;gap:clamp(20px,2.4vw,34px);margin:0;padding:0;list-style:none;counter-reset:lesson-kit}
.lesson-kit-list li{display:grid;grid-template-columns:4rem minmax(0,1fr);align-items:baseline;counter-increment:lesson-kit;font:700 clamp(24px,2.9vw,44px)/1.02 'Google Sans','Space Mono',sans-serif;letter-spacing:-.045em}
.lesson-kit-list li::before{content:'(' counter(lesson-kit,decimal-leading-zero) ')';font:700 .75rem/1 var(--font-data);letter-spacing:0;color:var(--sun)}
.lesson-first>h3{margin-bottom:96px}
.lesson-sequence{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(24px,3.5vw,56px);margin:0;padding:0;list-style:none;counter-reset:lesson-stage}
.lesson-sequence li{padding:0;counter-increment:lesson-stage}
.lesson-sequence li::before{content:counter(lesson-stage,decimal-leading-zero);display:block;margin:0 0 28px -.04em;font:700 clamp(112px,17vw,260px)/.78 'Google Sans','Space Mono',sans-serif;letter-spacing:-.08em}
.lesson-sequence h4{margin:0;font:700 clamp(22px,2.3vw,34px)/1.05 'Google Sans','Space Mono',sans-serif;letter-spacing:-.04em}
.lesson-sequence p{margin:16px 0 0;max-width:30ch;font:400 var(--text-reading)/1.75 var(--font-body)}
.lesson-session-photo{position:relative;overflow:hidden;aspect-ratio:16/9;margin:120px 0 0 calc(var(--bleed) * -1);width:100vw;padding:0;background:none;box-shadow:none;transform:none}
.lesson-session-photo img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 64%}
.lesson-session-photo--depth img{position:absolute;top:-60px;height:calc(100% + 120px);max-width:none}
.contact-confirmation{margin:18px 0 12px;font-size:.75rem!important}
.contact-phone{display:inline-flex;align-items:center;flex-wrap:wrap;gap:8px 18px;min-height:var(--control-size);padding:8px 0;color:var(--ink);font-size:var(--text-reading);line-height:1.8;text-underline-offset:5px}
.contact-phone:focus-visible{outline-color:var(--ink)}
.contact-place{margin-top:32px!important}
@media(hover:hover) and (pointer:fine){.lesson-action:hover,.lesson-shortcuts a:hover{text-decoration:underline;text-underline-offset:4px}:is(.lesson-shortcuts,.menu-contacts) .contact-shortcut:hover{filter:brightness(1.08);text-decoration:none}}
@media(max-width:1099px){
 .lessons,.school-contact{scroll-margin-top:80px}
 .lesson-courses{grid-template-columns:repeat(2,minmax(0,1fr))}
 .lesson-kit-body{grid-template-columns:1fr}
 .lesson-kit-moodboard{width:100%;margin-right:0;max-width:620px;justify-self:start}
}
@media(max-width:900px){
 .lesson-courses{gap:18px}
 .lesson-action{gap:8px;padding:12px;font-size:var(--text-reading)}
}
@media(max-width:760px){
 .lesson-shortcuts{gap:6px;padding:8px 5px 8px 8px}
 :is(.lesson-shortcuts,.menu-contacts) .contact-shortcut{width:48px;height:48px;min-height:48px}
 :is(.lesson-shortcuts,.menu-contacts) .contact-shortcut svg{width:22px;height:22px}
 .lessons{--lesson-w:calc(100vw - 40px);padding:64px 20px 0}
 .lesson-heading{margin-bottom:42px}
 .lesson-heading h2{font-size:clamp(46px,14vw,72px)}
 .lesson-heading p{font-size:var(--text-reading)}
 .lesson-courses{grid-template-columns:1fr;gap:36px;max-width:550px}
 .lesson-card h3{font-size:40px}
 .lesson-prices>div{display:flex}
 .lesson-action{padding:14px 16px;font-size:var(--text-reading)}
 .lesson-included,.lesson-first{padding-block:72px}
 .lesson-included{margin-top:64px}
 .lesson-included .lesson-kit-copy h3,.lesson-first>h3{font-size:clamp(46px,15vw,76px)}
 .lesson-kit-body{margin-top:48px;gap:48px}
 .lesson-kit-list li{grid-template-columns:3rem minmax(0,1fr);font-size:clamp(22px,6.4vw,30px)}
 .lesson-first>h3{margin-bottom:48px}
 .lesson-sequence{grid-template-columns:1fr;gap:44px}
 .lesson-sequence li::before{font-size:clamp(88px,28vw,128px);margin-bottom:12px}
 .lesson-sequence p{max-width:52ch}
 .lesson-session-photo{margin-top:56px}
 .lesson-session-photo{aspect-ratio:4/5}
 .lesson-session-photo img{object-position:50% 72%}
}
@media(max-height:600px){:is(.lesson-shortcuts,.menu-contacts) .contact-shortcut{width:46px;height:46px;min-height:46px}}

/* Repeated teacher actions share one hierarchy; course context lives on the card. */
html{scroll-padding-top:110px}
.contact-actions{position:relative;z-index:1;display:flex;flex-wrap:wrap;gap:8px}
.contact-actions .lesson-action{white-space:nowrap;min-height:48px;flex:1;gap:12px}
.lesson-action--secondary{background:var(--paper-stock-cream);color:var(--ink);text-decoration:underline;text-underline-offset:4px}
/* Book and contact actions share one fixed row; only vertical transforms animate. */
.lesson-card .contact-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));align-items:center;gap:6px;margin-top:8px;padding:0}
.book-toggle{position:relative;z-index:1;grid-column:1/-1;grid-row:1;display:flex;align-items:center;justify-content:center;gap:10px;width:100%;height:44px;min-height:44px;border:0;border-radius:var(--radius-pill);background:var(--ink);color:var(--paper-stock-cream);font-family:'Google Sans','Space Mono',sans-serif;font-size:var(--text-reading);font-weight:600;letter-spacing:.01em;cursor:pointer}
.book-toggle:focus-visible{outline-color:var(--orange);outline-offset:3px}
.book-toggle:active{transform:translateY(1px)}
.contact-actions--open .book-toggle{opacity:0;visibility:hidden;transform:translateY(-6px);pointer-events:none}
.lesson-card .contact-actions .lesson-action{grid-row:1;min-width:0;padding:0 12px}
.lesson-card .contact-actions .lesson-action[data-contact="whatsapp"]{grid-column:1}
.lesson-card .contact-actions .lesson-action[data-contact="zalo"]{grid-column:2}
.lesson-card .contact-actions:not(.contact-actions--open) .lesson-action{opacity:0;visibility:hidden;transform:translateY(6px);pointer-events:none}
.lesson-card .contact-actions--open .lesson-action{opacity:1;visibility:visible;transform:none}
.lesson-card .lesson-action{justify-content:center;gap:8px;flex:1;height:44px;min-height:44px;border-radius:var(--radius-pill);text-decoration:none;font-family:'Google Sans','Space Mono',sans-serif;font-size:var(--text-reading);font-weight:600;letter-spacing:.01em;color:#fff}
.lesson-card .lesson-action[data-contact="whatsapp"]{background:#11763b}
.lesson-card .lesson-action[data-contact="zalo"]{background:#0068ff}
.lesson-card .lesson-action svg{width:19px;height:19px;flex:none}
.book-morph-plane{position:absolute;inset:0;width:100%;height:44px;z-index:0;overflow:visible;pointer-events:none}
.lesson-card .contact-actions--morphing .book-toggle,.lesson-card .contact-actions--morphing .lesson-action{background:transparent}
.lesson-card .contact-actions--morphing .lesson-action:hover{filter:none}

@media(hover:hover) and (pointer:fine){.lesson-card .lesson-action:hover{filter:brightness(1.05);text-decoration:none}}
.lesson-course-photo{display:block;width:100%;height:auto;aspect-ratio:16/10;object-fit:cover}
@media(max-width:360px){.lesson-card .contact-actions{gap:6px}.lesson-card .lesson-action{padding:0 10px;gap:6px}.lesson-shortcuts{gap:4px;padding:7px 4px 7px 7px}:is(.lesson-shortcuts,.menu-contacts) .contact-shortcut{width:44px;height:44px;min-height:44px}:is(.lesson-shortcuts,.menu-contacts) .contact-shortcut svg{width:20px;height:20px}}
@media(max-height:600px) and (min-aspect-ratio:4/3){.film-hero-copy{bottom:15%}}

/* Course cards already provide both contacts; keep the phone price area clear. */
@media(max-width:760px){.lesson-shortcuts.lesson-shortcuts--inline-contacts{display:none}}