/* Form Pilates, in the style of the Momo reference */
@font-face{font-family:"Cormorant";font-weight:300;src:url(../assets/fonts/cormorant-latin-300-normal.woff2) format("woff2");font-display:swap}
@font-face{font-family:"Arimo";font-weight:400;src:url(../assets/fonts/arimo-latin-400-normal.woff2) format("woff2");font-display:swap}
@font-face{font-family:"Arimo";font-weight:600;src:url(../assets/fonts/arimo-latin-600-normal.woff2) format("woff2");font-display:swap}
:root{
  --ink:#010101;--line:#8c8a86;--cream:#f9f7f2;--foot:#6d665f;--taupe:#d6cabc;
  --serif:"Cormorant","Times New Roman",serif;--sans:"Arimo",Arial,sans-serif;
  --rem:clamp(16px,1.45vw,23px);--nav:clamp(84px,9.7vw,140px);--gutter:clamp(20px,3vw,48px);
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-padding-top:90px;-webkit-text-size-adjust:100%}
body{margin:0;background:#fff;color:var(--ink);font:400 var(--rem)/1.35 var(--sans);overflow-x:hidden}
body.locked{overflow:hidden}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
h1,h2,h3{margin:0;font-family:var(--serif);font-weight:300}
h2{font-size:calc(var(--rem)*2.3);line-height:1.1;text-transform:uppercase}
p,ul{margin:0}
ul{padding:0;list-style:none}
address{font-style:normal}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.skip{position:fixed;left:12px;top:-60px;z-index:100;background:#fff;padding:8px 14px}
.skip:focus{top:12px}
:focus-visible{outline:2px solid currentColor;outline-offset:3px}
.small{font-size:.8em;line-height:1.45}
.flower{display:block;width:calc(var(--rem)*2.2);height:calc(var(--rem)*2.2)}

/* Buttons: the label slides up and is replaced by a copy of itself */
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:.75em 2em;border-radius:999px;background:#fff;color:var(--ink);font:600 .9em/1.2 var(--sans);text-align:center;white-space:nowrap;transition:transform .35s}
.btn.black{background:var(--ink);color:#fff}
.btn:hover{transform:translateY(-2px)}
.btn-in{display:block;position:relative;overflow:hidden}
.btn-in::after{content:attr(data-t);position:absolute;left:0;right:0;top:100%}
.btn:hover .btn-in{color:transparent}
.btn:hover .btn-in::after{color:var(--ink);top:0;transition:top .3s}
.btn.black:hover .btn-in::after{color:#fff}

.book{display:flex;flex-direction:column;align-items:center;gap:.6em}
.book-note{font-size:max(13px,.72em);line-height:1.3;text-align:center;max-width:30em}
.muted{color:#5f5b56;font-size:.85em}
.classes-cta{padding:calc(var(--rem)*1.6) var(--gutter);border-top:1px solid var(--line);margin:0 var(--gutter);text-align:center}
.classes-cta>p{margin-bottom:1em}
.private{margin:0 var(--gutter);padding:calc(var(--rem)*2) var(--gutter);border-top:1px solid var(--line);text-align:center}
.private h3{font-size:calc(var(--rem)*1.85);line-height:1.1}
.private p{max-width:44em;margin:.7em auto 0}
.private .btn{margin-top:calc(var(--rem)*1.1)}
.list li{padding:.4em 0;border-bottom:1px solid #d9d6d1;font-size:.9em}
.go{text-decoration:underline;text-underline-offset:3px}
.plans-link{margin-top:.8em;font-size:.9em}
.plans-small{margin-top:.8em}

/* Bowl glow. Without motion: a still gradient. With motion: the canvas takes over. */
.glow{position:absolute;z-index:1;left:-12%;right:-12%;top:var(--nav);height:calc((100% - var(--nav))*1.02);pointer-events:none}
.glow i{display:block;width:100%;height:100%;border-radius:0 0 50% 50%/0 0 100% 100%;background:radial-gradient(ellipse 50% 100% at 50% 0,rgba(109,102,95,.34) 0,rgba(109,102,95,.26) 70%,rgba(214,202,188,.34) 88%,rgba(214,202,188,0) 100%)}
.bowl{display:none}
.motion .glow{display:none}
.motion .bowl{display:block;position:fixed;inset:0;width:100%;height:100%;z-index:1;pointer-events:none}
.motion .slides{position:relative;z-index:0}
.motion .hero::after{z-index:0}
.motion .moment{background:transparent}
.motion .moment-in{z-index:3}
.motion .marquee,.motion .intro,.motion #clases,.motion .freq,.motion .plans,.motion .gallery,.motion .find,.motion .contact,.motion .footer{position:relative;z-index:2}
.motion #clases,.motion .freq,.motion .gallery,.motion .contact{background:#fff}
.motion .plans{width:100%;max-width:none;margin-top:0;padding:calc(var(--rem)*4) max(var(--gutter),calc((100% - 1320px)/2)) 0;background:#fff}
.motion .find{margin-top:0}
.motion .gallery{padding-bottom:calc(var(--rem)*4)}

/* Title letters: light blur to sharp */
.w{display:inline-block;white-space:nowrap}
.motion .split .ch{display:inline-block;opacity:0;filter:blur(8px);transition:opacity .5s ease,filter .5s ease;transition-delay:calc(var(--i)*var(--step,22ms))}
.motion .split.in .ch{opacity:1;filter:none}
.motion .split.hero-t{--step:38ms}
.moment-text .ch{display:inline-block}

/* Short scroll moment */
.moment{position:relative;background:var(--taupe);padding:calc(var(--rem)*5) var(--gutter);display:grid;place-items:center}
.moment-text{position:relative;max-width:20em;font:300 calc(var(--rem)*2.4)/1.15 var(--serif);text-align:center;color:var(--ink)}
.motion .moment{display:block;height:150vh;padding:0}
.motion .moment-in{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;display:grid;place-items:center;padding:0 var(--gutter)}

/* Booking button: small dot becomes a circle with an arrow */
.dot{position:relative;display:grid;place-items:center;flex:none;width:26px;height:26px;margin:-4px -15px -4px 8px;color:#fff}
.dot i{position:absolute;inset:0;border-radius:50%;background:var(--ink);transform:scale(.38)}
.dot svg{position:relative;opacity:0;transform:translateX(-4px)}
.btn.black .dot{color:var(--ink)}
.btn.black .dot i{background:var(--taupe)}
.btn:hover .dot i,.btn:focus-visible .dot i{transform:none}
.btn:hover .dot svg,.btn:focus-visible .dot svg{opacity:1;transform:none}
.motion .dot i{transition:transform .45s cubic-bezier(.22,.7,.2,1)}
.motion .dot svg{transition:opacity .3s .05s,transform .45s cubic-bezier(.22,.7,.2,1)}
.nav-book{position:absolute;right:var(--gutter);top:0;height:100%;display:flex;align-items:center}
.nav-book .btn{min-height:44px;font-size:max(12px,.72em);padding:.6em 1.7em}
.nav-note{position:absolute;right:0;top:calc(50% + 30px);width:15em;padding:.6em .8em;background:var(--ink);color:#fff;border-radius:10px;font-size:12px;line-height:1.3;text-align:center;opacity:0;visibility:hidden;z-index:5}
.nav-book:hover .nav-note,.nav-book:focus-within .nav-note{opacity:1;visibility:visible}
.motion .nav{animation:nav-in .9s cubic-bezier(.22,.7,.2,1) .15s both}
@keyframes nav-in{from{opacity:0;transform:translateY(-14px)}to{opacity:1;transform:none}}

/* Photo zoom, 1.06 to 1, inside a clipped frame so nothing is distorted */
.zoom{display:block;overflow:hidden}
.motion .zoom img,.motion .intro-img img,.motion .ring img{transform:scale(1.06);transition:transform 1.5s cubic-bezier(.22,.7,.2,1)}
.motion .zoom.seen img,.motion .intro-img.seen img,.motion .ring.seen img{transform:none}
.motion .slide:first-child img{animation:hero-zoom 1.8s cubic-bezier(.22,.7,.2,1) both}
@keyframes hero-zoom{from{transform:scale(1.06)}to{transform:none}}

/* Navigation */
.nav{position:fixed;inset:0 0 auto;z-index:20;height:var(--nav);transition:height .35s ease;background:#fff;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:clamp(20px,3vw,48px);padding:0 var(--gutter)}
.nav-side{display:flex;gap:clamp(16px,2.4vw,36px);text-transform:uppercase;font-weight:600;font-size:.72em}
.nav-side:first-of-type{justify-content:flex-end}
.nav-side a{position:relative;padding:6px 0}
.nav-side a::after{content:"";position:absolute;left:0;right:0;bottom:2px;height:1px;background:currentColor;transform:scaleX(0);transform-origin:left;transition:transform .3s}
.nav-side a:hover::after{transform:scaleX(1)}
.logo img{width:clamp(130px,13vw,200px);transition:width .35s ease}
.nav.scrolled{height:72px;border-bottom:1px solid rgba(0,0,0,.08)}
.nav.scrolled .logo img{width:130px}
.burger{display:none;width:44px;height:44px;background:none;border:0;padding:12px 6px;cursor:pointer;flex-direction:column;justify-content:space-around}
.burger span{display:block;height:1px;background:var(--ink)}
.menu{position:fixed;inset:0;z-index:40;background:#fff;padding:90px 28px 40px;opacity:0;visibility:hidden;transition:opacity .35s,visibility .35s}
.menu.open{opacity:1;visibility:visible}
.menu-close{position:absolute;right:18px;top:20px;width:44px;height:44px;background:none;border:0;display:grid;place-items:center;cursor:pointer;color:var(--ink)}
.menu nav a{display:block;padding:12px 0;border-bottom:1px solid var(--line);font:300 2.2em/1.15 var(--serif);text-transform:uppercase}

/* Hero */
.hero{position:relative;padding-top:var(--nav);overflow:hidden;background:#fff}
.slides{display:flex;height:max(calc(100vh - var(--nav)),460px);height:max(calc(100svh - var(--nav)),460px)}
.motion .slides{transition:transform .9s cubic-bezier(.65,0,.2,1)}
.slide{flex:0 0 100%;display:flex;min-width:0;background:#2b2622}
.slide img{flex:1 1 0;min-width:0;width:100%;height:100%;object-fit:cover}
.hero::after{content:"";position:absolute;inset:var(--nav) 0 0;background:rgba(20,14,10,.3);pointer-events:none}
.hero-copy{position:absolute;z-index:2;inset:var(--nav) 0 0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:calc(var(--rem)*1.4);padding:0 56px;color:#fff;text-align:center}
.hero h1{font-size:calc(var(--rem)*3.1);line-height:1.08;text-transform:uppercase}
.arrow{position:absolute;z-index:3;top:calc(var(--nav) + (100vh - var(--nav))/2);width:48px;height:60px;margin-top:-30px;background:none;border:0;color:#fff;cursor:pointer;display:grid;place-items:center}
.arrow.prev{left:10px}.arrow.next{right:10px}
.dots{position:absolute;z-index:3;left:0;right:0;bottom:12px;display:flex;justify-content:center}
.dots button{width:30px;height:30px;background:none;border:0;padding:0;cursor:pointer;display:grid;place-items:center}
.dots button::before{content:"";width:10px;height:10px;border-radius:50%;background:#fff;opacity:.55;transition:opacity .3s}
.dots button[aria-current]::before{opacity:1}

/* Moving text strip */
.marquee{background:var(--cream);overflow:hidden;white-space:nowrap;margin-top:calc(var(--rem)*1);padding:.55em 0}
.marquee-track{display:inline-flex}
.motion .marquee-track{animation:slide 60s linear infinite}
.marquee span{font-weight:600;font-size:.85em;padding-right:.5em}
@keyframes slide{to{transform:translateX(-50%)}}

/* Studio: split text and photo */
.intro{display:grid;grid-template-columns:1fr 1fr;min-height:min(86vh,calc(var(--rem)*36))}
.intro-text{display:flex;flex-direction:column;justify-content:center;align-items:flex-start;gap:calc(var(--rem)*1);padding:calc(var(--rem)*3) clamp(24px,6vw,96px);background:var(--foot);color:#fff}
.motion .intro-text.reveal{transform:none}
.intro-img{overflow:hidden;min-height:100%}
.motion .intro-img.reveal{transform:none}
.intro-img img{width:100%;height:100%;object-fit:cover;object-position:60% 35%}

/* Columns */
.cols{display:grid;margin:0 var(--gutter)}
.cols-2{grid-template-columns:1fr 1fr}
.cols-3{grid-template-columns:repeat(3,1fr);border-top:1px solid var(--line)}
.col{padding:calc(var(--rem)*2) calc(var(--rem)*2);text-align:center}
.col+.col{border-left:1px solid var(--line)}
.col img{width:100%;aspect-ratio:2/1;object-fit:cover;border-radius:calc(var(--rem)*1.6)}
.col h3{font-size:calc(var(--rem)*1.85);line-height:1.1;margin-top:.4em}
.col p{margin-top:.5em}
#clases{margin-top:calc(var(--rem)*.5)}
#clases .cols-3{border-top:0}

/* Frequency */
.freq{padding-top:calc(var(--rem)*3.6);text-align:center}
.freq h2{margin-bottom:calc(var(--rem)*1.6);padding:0 var(--gutter)}
.freq .col{text-align:left}
.freq .col h3{margin:0 0 .7em}
.freq b{font-weight:300;font-size:1.6em;line-height:1}
.freq li{padding:.5em 0;border-top:1px solid #d9d6d1}

/* Memberships */
.plans{display:grid;grid-template-columns:1fr 1fr;gap:calc(var(--rem)*2) clamp(30px,5vw,80px);align-items:center;width:min(100% - 2*var(--gutter),1320px);margin:calc(var(--rem)*4) auto 0}
.ring{overflow:hidden;border-radius:50%;position:relative;width:min(100%,calc(var(--rem)*22));aspect-ratio:1;margin:auto;display:grid;place-items:center}
.ring img{width:86%;height:86%;object-fit:cover;border-radius:50%}
.ring-text{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.motion .ring-text{animation:turn 40s linear infinite}
.ring-text text{font:600 19px var(--sans);fill:var(--ink)}
@keyframes turn{to{transform:rotate(360deg)}}
.plans h2,.find h2,.contact h2,.gallery h2{text-align:center}
.table-head{font:600 .95em/1.3 var(--sans);text-transform:uppercase;padding:calc(var(--rem)*1.2) 0 .3em;border-bottom:1px solid var(--ink)}
table{width:100%;border-collapse:collapse;font-size:.9em}
th,td{padding:.5em 0;text-align:left;font-weight:400;vertical-align:top}
th{font-weight:600;text-transform:uppercase}
td:last-child{text-align:right;white-space:nowrap}
.plans-body .small{margin-top:.7em}
.plans-cta{grid-column:1/-1;text-align:center}

/* Gallery */
.gallery{padding:calc(var(--rem)*4) var(--gutter) 0}
.masonry{columns:3;column-gap:calc(var(--rem)*1);margin-top:calc(var(--rem)*1.6)}
.masonry figure{margin:0 0 calc(var(--rem)*1);break-inside:avoid}
.masonry img{width:100%;border-radius:calc(var(--rem)*1.2)}

/* Location + contact */
.find{margin-top:calc(var(--rem)*4);padding:calc(var(--rem)*3.4) var(--gutter);background:var(--cream);text-align:center}
.find address{margin-top:.6em}
.map{position:relative;width:min(100%,calc(var(--rem)*36));aspect-ratio:9/5;margin:calc(var(--rem)*1.6) auto 0;border-radius:50%;overflow:hidden;background:#e7e5df}
.map iframe{position:absolute;left:-50%;top:-50%;width:200%;height:200%;border:0}
.find-cta{margin-top:calc(var(--rem)*1.6)}
.contact{padding:calc(var(--rem)*3.4) var(--gutter);text-align:center}
.contact p{margin-top:.6em}
.contact-btns{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin-top:calc(var(--rem)*1.4)}

/* Footer */
.footer{background:var(--foot);color:#fff;padding:calc(var(--rem)*2) var(--gutter) calc(var(--rem)*1)}
.footer-grid{display:grid;grid-template-columns:1.5fr 1fr 1.2fr 1fr;gap:calc(var(--rem)*1.6);align-items:start}
.footer h2{font-size:calc(var(--rem)*1.5);text-transform:none;margin-bottom:.5em}
.footer-grid a:not(.badge){display:block;padding:.25em 0;font-size:.85em}
.footer-grid a:not(.badge):hover{text-decoration:underline}
.fb{width:max-content;margin-top:.4em}
.badge{position:relative;display:grid!important;place-items:center;width:calc(var(--rem)*9.5);aspect-ratio:1;color:#3d3833}
.badge svg{position:absolute;inset:0;width:100%;height:100%}
.badge span{position:relative;font:300 1.15em/1.05 var(--serif);text-align:center}
.foot-note{text-align:left;margin-top:.2em}
.copy{margin-top:calc(var(--rem)*1.2);text-align:center;font-size:.7em}

/* Reveal on scroll */
.motion .reveal{opacity:0;transform:translateY(22px);transition:opacity .9s ease,transform .9s cubic-bezier(.2,.7,.2,1)}
.motion .reveal.seen{opacity:1;transform:none}

@media (max-width:1100px){
  .nav-side{display:none}
  .nav{display:flex;justify-content:space-between;height:76px}
  :root{--nav:76px}
  .burger{display:flex}
  .nav-book{position:static;height:auto;margin-left:auto;margin-right:6px}
  .nav-note{display:none}
}
@media (max-width:760px){
  .slide.two .desk-only{display:none}
  .slides{height:min(calc(100svh - var(--nav)),130vw)}
  .arrow{top:calc(var(--nav) + 26vw)}
  .hero h1{font-size:calc(var(--rem)*2.1)}
  .hero-copy{justify-content:flex-end;padding:0 20px 52px;gap:calc(var(--rem)*.9)}
  h2{font-size:calc(var(--rem)*2)}
  .intro{grid-template-columns:1fr;min-height:0}
  .intro-text{padding:44px var(--gutter)}
  .intro-img{aspect-ratio:4/5}
  .cols{margin:0}
  .classes-cta,.private{margin:0}
  .cols-2,.cols-3{grid-template-columns:1fr}
  .col{padding:26px var(--gutter)}
  .col+.col{border-left:0;border-top:1px solid var(--line)}
  .col img{aspect-ratio:3/2}
  .glow{left:-30%;right:-30%;height:calc((100% - var(--nav))*1.06)}
  .motion .moment{height:125vh}
  .nav.scrolled{height:64px}
  .moment-text{font-size:calc(var(--rem)*1.9)}
  .plans{grid-template-columns:1fr}
  .ring{width:min(100%,320px)}
  .masonry{columns:2}
  .map{aspect-ratio:1/1;width:min(100%,340px)}
  .footer-grid{grid-template-columns:1fr 1fr}
  .badge{grid-column:1/-1;width:150px;justify-self:center}
}
@media (max-width:420px){
  .masonry{columns:1}
  .btn{white-space:normal}
}
@media (prefers-reduced-motion:reduce){
  html:not(.motion) *{transition:none!important}
}