/* Muay Family: real photographs, quiet movement, a little cinema. */
/* All four programmes are equals: one row, the same card. #personal only overrides the older fourth-card rules. */
.training .class-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:40px 20px}
.training .class-card,.training #personal{grid-column:auto;display:block;padding:0;border:0}
.training .class-image,.training #personal .class-image{aspect-ratio:4/4.8}
.training #personal .image-label{display:block}
.training #personal .class-copy{padding-top:24px}
.training #personal .class-copy .class-focus{font-size:10px}
.training .class-copy h3,.training #personal .class-copy h3{font-size:clamp(36px,3.1vw,46px)}
.training .class-copy>p:not(.class-focus),.training #personal .class-copy>p:not(.class-focus){min-height:5.4em;font-size:13px}
@media(max-width:1180px){.training .class-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.training .class-copy h3,.training #personal .class-copy h3{font-size:44px}.training .class-copy>p:not(.class-focus),.training #personal .class-copy>p:not(.class-focus){min-height:0}}
.class-image .class-slide{position:absolute;inset:0;opacity:0;transition:opacity 1s ease,transform 6s ease;transform:scale(1.035)}
.class-image .class-slide.is-current{opacity:1;transform:scale(1)}
.slideshow-controls{display:flex;align-items:center;gap:12px;border-bottom:1px solid #10100f25;min-height:48px}
.slideshow-controls[hidden]{display:none}
.slideshow-controls button{min-width:40px;min-height:44px;color:var(--ink)}
.slide-count{font-size:10px;letter-spacing:.12em;min-width:48px;text-align:center}
.slideshow-controls .slide-pause{margin-left:auto;font-size:10px;padding-inline:8px}
.slideshow-controls button:hover{color:#934e34}
.practice-film{display:block;max-width:1080px;margin:75px auto 25px;padding:64px 32px 24px;border-top:1px solid #ffffff30;text-align:center;background:radial-gradient(ellipse at 50% 62%,#ad603321,transparent 65%)}
.practice-film .practice-title .eyebrow{font-size:9px;letter-spacing:.2em}
.practice-film h3{font-size:clamp(60px,7.7vw,116px);line-height:.9}
.practice-film .practice-title p:not(.eyebrow){margin:24px auto 38px;max-width:490px;font-size:14px}
.cinema-frame{position:relative;padding:12px;border:1px solid #f68d6466;box-shadow:0 25px 70px #0006}
.cinema-frame:before,.cinema-frame:after{content:'';position:absolute;width:48px;height:48px;pointer-events:none;border-color:var(--lime);border-style:solid;z-index:1}
.cinema-frame:before{left:-2px;top:-2px;border-width:3px 0 0 3px}
.cinema-frame:after{right:-2px;bottom:-2px;border-width:0 3px 3px 0}
.practice-preview img{filter:brightness(.8)}
.practice-preview .play-icon{width:clamp(58px,7vw,90px);height:clamp(58px,7vw,90px);border:1px solid #fff9;backdrop-filter:blur(5px);font-size:20px}
.cinema-watch{position:absolute;left:24px;bottom:22px;text-align:left;font-size:9px;letter-spacing:.16em;color:var(--cream)}
.cinema-watch b{display:block;margin-top:6px;font-size:12px}
.cinema-caption{display:flex;justify-content:space-between;gap:20px;padding-top:18px;font-size:8px;letter-spacing:.15em;color:var(--muted)}
.family-wall{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;align-items:start}
.family-photo{position:relative;overflow:hidden;margin:0;background:#171613;border:1px solid #ffffff20}
.family-photo img{width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;filter:saturate(.88);transition:filter .4s}
.family-photo:hover img{filter:saturate(1)}
.family-photo-1,.family-photo-2{grid-column:span 2}
.family-photo-2 img{object-position:center 75%}
.family-photo figcaption{position:absolute;bottom:0;inset-inline:0;padding:42px 22px 20px;background:linear-gradient(transparent,#000b);font-size:9px;letter-spacing:.12em}
.family-footer{display:flex;justify-content:space-between;align-items:center;gap:24px;padding-top:28px}
.family-footer p{font:800 clamp(25px,3vw,40px)/1 var(--display);text-transform:uppercase}
.family-footer .text-link{font-size:11px}
.family-album{padding-top:0}
.family-album .family-wall{display:block;columns:2;column-gap:14px}
.family-album .family-photo{break-inside:avoid;margin-bottom:14px}
.family-album .family-photo img{aspect-ratio:auto}
.family-album-note{margin-top:26px;color:var(--muted)}
.family-album+.events{padding-top:0}
.motion-paused .class-slide{transition:none}
@media(max-width:850px){.practice-film{margin-inline:var(--gutter);padding-inline:0}.family-wall{gap:10px}}
@media(max-width:600px){.training .class-grid{grid-template-columns:1fr;gap:34px}.training .class-image,.training #personal .class-image{aspect-ratio:4/3}.practice-film{padding-top:40px;margin-top:30px}.practice-film .practice-title p:not(.eyebrow){font-size:12px}.cinema-frame{padding:6px}.cinema-watch{left:12px;bottom:12px;font-size:7px}.cinema-watch b{font-size:8px}.cinema-caption{font-size:7px;letter-spacing:.07em;text-align:left}.cinema-caption span:last-child{text-align:right}.family-wall{grid-template-columns:repeat(2,minmax(0,1fr))}.family-photo-1{grid-column:1/-1}.family-photo-2{grid-column:auto}.family-photo-6{grid-column:1/-1}.family-footer{align-items:start;flex-direction:column;gap:12px}.family-album .family-wall{columns:1}.family-photo figcaption{font-size:8px}}
@media(prefers-reduced-motion:reduce){.class-image .class-slide{transition:none;transform:none}}
/* The class film: full width and loud, separate from the intro. */
.class-reel{position:relative;isolation:isolate;overflow:hidden;height:min(calc(100vh - 94px),56.25vw);min-height:540px;background:#10100f;color:var(--cream)}
.class-reel video{position:absolute;inset:0;z-index:-2;width:100%;height:100%;object-fit:cover}
.class-reel:after{content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;background:linear-gradient(0deg,#10100ff5,#10100fb8 34%,#10100f4d 56%,transparent 72%)}
/* The bottom margin keeps the title clear of the floating scroll controls. */
.class-reel-copy{position:absolute;inset:auto var(--gutter) clamp(92px,7vw,112px)}
.class-reel .eyebrow{color:var(--lime);margin-bottom:16px}
.class-reel h2{margin:0;font:800 clamp(60px,8.2vw,150px)/.88 var(--display);text-transform:uppercase;letter-spacing:-.02em}
.class-reel h2 em{font-style:normal;color:transparent;-webkit-text-stroke:2px var(--lime)}
.contact-links a[hidden]{display:none}
@media(max-width:700px){.class-reel{height:min(118vw,640px);min-height:0}.class-reel:after{background:linear-gradient(0deg,#10100ff7,#10100fc7 46%,transparent 80%)}.class-reel-copy{bottom:28px}.class-reel h2{font-size:clamp(58px,17vw,92px)}.class-reel h2 em{-webkit-text-stroke-width:1.5px}}
