@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Italiana&display=swap');
:root{--dark:#141318;--panel:#1d1928;--cream:#f5f2fc;--violet:#bd99ff;--blue:#668bff;--pink:#ff68d0;--muted:#bcb5cb;--line:#cbb5ff26}*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:24px}body{margin:0;background:var(--dark);color:var(--cream);font:15px/1.65 'DM Sans',sans-serif}a{color:inherit;text-decoration:none}a:focus-visible,button:focus-visible,summary:focus-visible,.reel-track:focus-visible{outline:2px solid var(--pink);outline-offset:6px}.skip{position:absolute;top:-70px;z-index:10;background:var(--cream);color:var(--dark);padding:12px}.skip:focus{top:0}header{display:flex;align-items:center;justify-content:space-between;padding:28px 6%;border-bottom:1px solid var(--line)}.brand{font:italic 42px Georgia,serif;display:flex;align-items:center;gap:12px;line-height:1}.brand span{font:9px/1.3 'DM Sans',sans-serif;text-transform:uppercase;max-width:40px;letter-spacing:2px}.brand i{font:25px Georgia;color:var(--pink);margin-left:6px}nav{display:flex;align-items:center;gap:32px;font-size:11px;letter-spacing:.7px}nav a:hover,.text-link:hover{color:var(--pink)}.nav-cta{border:1px solid #bd99ff70;padding:12px 22px}.hero{min-height:740px;display:flex;flex-direction:column;justify-content:space-between;padding:78px 6% 25px;position:relative;background:radial-gradient(ellipse at 15% 20%,#6825b333,transparent 55%),radial-gradient(ellipse at 90% 80%,#3148a12b,transparent 55%),var(--dark)}.hero-copy{text-align:center;max-width:1100px;margin:auto;width:100%}.eyebrow{font-size:9px;letter-spacing:3px;font-weight:500;margin:0 0 30px;color:var(--violet)}h1,h2{font-family:'Italiana',Georgia,serif;font-weight:400;margin:0;line-height:1;letter-spacing:-3px}h1{font-size:clamp(94px,12.8vw,190px)}em{font-family:Georgia,serif;font-weight:400}h1 em{color:var(--pink);font-size:1.05em}h2{font-size:clamp(45px,5.5vw,80px)}h2 em{color:var(--violet);font-size:.95em}.intro{font-size:14px;color:var(--muted);margin:28px 0 8px}.button{display:inline-flex;align-items:center;justify-content:space-between;gap:38px;background:var(--cream);color:var(--dark);padding:16px 25px;font-size:11px;margin-top:23px;transition:background .2s}.button:hover{background:var(--pink)}.hero-note{display:flex;justify-content:space-between;gap:20px;border-top:1px solid var(--line);font-size:8px;letter-spacing:1.7px;padding-top:22px;margin-top:65px;color:var(--muted)}.ribbon{display:flex;justify-content:center;gap:50px;padding:24px 6%;background:var(--violet);color:var(--dark);font-size:9px;letter-spacing:3px}.ribbon span{color:#ff68d0}.section{padding:110px 6%}.section-heading{display:flex;align-items:flex-end;justify-content:space-between;gap:35px}.section-heading>p{max-width:260px;color:var(--muted);font-size:13px}.carousel-toolbar{display:flex;align-items:center;justify-content:space-between;margin:40px 0 22px;font-size:10px;letter-spacing:2px}.carousel-toolbar button{width:42px;height:42px;border:1px solid #ffffff50;background:transparent;color:var(--cream);font-size:22px;cursor:pointer;margin-left:8px}.carousel-toolbar button:not(:disabled):hover{color:var(--dark);background:var(--pink)}.carousel-toolbar button:disabled{opacity:.3;cursor:default}.reel-track{display:flex;gap:22px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:thin;padding-bottom:14px}.reel-card{flex:0 0 31.5%;scroll-snap-align:start}.reel-visual{aspect-ratio:3/4;background:#252035;position:relative;padding:28px;display:flex;flex-direction:column;justify-content:space-between;overflow:hidden;border:1px solid #ffffff14}.reel-card:nth-child(2n) .reel-visual{background:#30203a}.reel-card:nth-child(3n) .reel-visual{background:#20283e}.reel-number{font:italic 66px Georgia;color:var(--violet)}.reel-label{font-size:8px;letter-spacing:2px;color:var(--muted)}.reel-visual strong{font:38px/1.1 'Italiana',Georgia;max-width:180px}.reel-card h3{font-size:13px;margin:14px 0 3px;font-weight:500}.reel-card p{font-size:9px;letter-spacing:1.3px;margin:0;color:var(--muted)}video{width:100%;height:100%;object-fit:cover}.small{font-size:11px}.muted{color:var(--muted)}.pilates{background:var(--panel);color:var(--cream);padding:100px 6%;display:grid;grid-template-columns:.85fr 1.15fr;gap:70px}.pilates .eyebrow{color:#bd99ff}.pilates h2 em{color:#ff68d0}.pilates-copy>p:not(.eyebrow){max-width:350px}.lead{font-size:20px;line-height:1.5}.pilates-copy>p:not(.lead):not(.eyebrow){font-size:13px;color:#bcb5cb}.text-link{font-size:11px;border-bottom:1px solid;padding-bottom:7px;display:inline-block;margin-top:16px}.pilates .text-link:hover{color:#ff68d0}.credential{margin-top:40px;border-top:1px solid #cbb5ff40;padding-top:20px}.credential span{display:block;font-size:8px;letter-spacing:2px;margin-bottom:10px}.credential strong{font-size:18px;font-weight:400}.credential p{font-size:11px;margin:4px 0}.studio-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px;align-items:center}.studio-grid figure{margin:0}.studio-grid figure:nth-child(2){margin-top:85px}.studio-grid img{display:block;width:100%;height:400px;object-fit:cover;filter:saturate(.7)}.studio-grid figcaption{font-size:8px;letter-spacing:1.8px;margin-top:12px}.about{background:var(--panel)}.about-grid{display:grid;grid-template-columns:1fr 1fr;gap:85px}.about-grid>div>p:not(.lead){font-size:13px;max-width:400px;color:var(--muted)}details{border-top:1px solid var(--line);padding:20px 0}details:last-child{border-bottom:1px solid var(--line)}summary{display:flex;justify-content:space-between;cursor:pointer;font-size:12px;list-style:none}details p{font-size:13px;color:var(--muted)}.connect{padding:110px 6%;position:relative}.connect h2{font-size:clamp(75px,10vw,145px)}.connect h2 em{color:var(--pink)}.connect h2>span{position:absolute;right:9%;top:130px;font:120px Arial;color:var(--violet)}.connect>p:not(.eyebrow){max-width:440px;font-size:14px;color:var(--muted);margin-top:30px}.contact-text{text-decoration:underline;text-underline-offset:4px;color:var(--cream)}.contact-text:hover{color:var(--pink)}.contact-instagram{max-width:100%;gap:24px}footer{display:flex;justify-content:space-between;align-items:center;gap:20px;padding:35px 6%;border-top:1px solid var(--line)}footer>p,footer>a:last-child{font-size:8px;letter-spacing:1.5px;color:var(--muted)}
@media(min-width:1600px){.hero{min-height:850px}}
@media(max-width:800px){header{padding:24px 6%}nav{gap:18px;font-size:10px}.nav-cta{display:none}.hero{min-height:680px;padding-top:65px}h1{font-size:clamp(85px,17vw,130px)}.hero-note{font-size:7px;gap:20px}.hero-note>span:last-child{display:none}.intro{max-width:290px;margin:28px auto 8px}.ribbon{gap:16px;font-size:7px;letter-spacing:1px}.section{padding:70px 6%}.section-heading{display:block}.section-heading>p{max-width:330px;margin-top:24px}.reel-card{flex-basis:78%}.pilates{grid-template-columns:1fr;gap:35px;padding:70px 6%}.studio-grid img{height:300px}.studio-grid figure:nth-child(2){margin-top:45px}.about-grid{grid-template-columns:1fr;gap:28px}.connect{padding:75px 6%}.connect h2>span{font-size:65px;right:7%;top:130px}footer{flex-wrap:wrap}footer>p{width:100%;order:3}h2{letter-spacing:-2px}}
@media(max-width:380px){.brand{font-size:36px;gap:8px}nav{gap:12px}.ribbon{gap:9px;font-size:6px}.studio-grid{gap:12px}.studio-grid img{height:245px}.contact-instagram{padding:15px;gap:14px;font-size:10px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.button{transition:none}}

/* Lighting palette inspired by the supplied studio photograph. */
header{background:var(--dark)}
.hero{isolation:isolate;overflow:hidden}
.hero:before,.hero:after{content:'';position:absolute;z-index:-1;pointer-events:none;width:1px;height:125%;top:-12%;transform:rotate(31deg)}
.hero:before{left:11%;background:var(--blue);box-shadow:0 0 9px 2px #668bff65,0 0 55px 15px #668bff18;opacity:.65}
.hero:after{right:10%;background:var(--pink);box-shadow:0 0 9px 2px #ff68d065,0 0 55px 15px #ff68d018;opacity:.55}
.hero-copy,.hero-note{position:relative;z-index:1}
h1 em{color:var(--pink)}
.button{background:var(--pink);color:var(--dark);border:1px solid transparent}
.button:hover{background:#ff9be0}
.ribbon{background:#21162e;color:var(--cream);border-top:1px solid #bd99ff55;border-bottom:1px solid #668bff55}
.dance{background:radial-gradient(ellipse at 100% 45%,#354ca015,transparent 65%),var(--dark)}
.reel-visual{border-top:1px solid #668bff80;background:linear-gradient(145deg,#292035,#1d1b26)}
.reel-card:nth-child(2n) .reel-visual{background:linear-gradient(145deg,#342039,#201b27);border-top-color:var(--pink)}
.reel-card:nth-child(3n) .reel-visual{background:linear-gradient(145deg,#222d45,#1b1d29);border-top-color:var(--blue)}
.pilates{background:radial-gradient(ellipse at 0% 100%,#56208626,transparent 65%),var(--panel);border-block:1px solid var(--line)}
.studio-grid img{filter:saturate(.65);border:1px solid #bd99ff40}
.about{background:var(--dark)}
.connect{background:radial-gradient(ellipse at 90% 90%,#92266b2b,transparent 65%),radial-gradient(ellipse at 0% 0%,#2e3b7726,transparent 60%),var(--panel);border-top:1px solid #bd99ff40}
.connect h2>span{color:var(--blue)}
footer{background:var(--dark)}
.reel-track{scrollbar-color:var(--violet) var(--panel)}
::selection{background:var(--pink);color:var(--dark)}
@media(max-width:800px){.hero:before{left:3%;opacity:.35}.hero:after{right:2%;opacity:.35}}

/* A quiet, full-screen opening with one clear invitation to explore. */
header{min-height:99px}
header .brand i{display:none}
header nav>a:not(.nav-cta){display:none}
.hero{min-height:calc(100svh - 99px);padding:65px 6% 30px;justify-content:center;gap:48px}
.hero-copy{margin:auto;width:100%}
.hero .eyebrow{color:var(--cream);letter-spacing:4px;margin-bottom:26px}
.hero h1{font-size:clamp(82px,10vw,150px)}
.hero .intro{font-size:11px;text-transform:uppercase;letter-spacing:4px;margin-top:30px;color:var(--muted)}
.hero:before,.hero:after{display:none}
.scroll-cue{display:flex;flex-direction:column;align-items:center;gap:14px;align-self:center;color:var(--muted);padding:12px 22px;flex-shrink:0}
.scroll-cue>span{font-size:8px;letter-spacing:3px}
.scroll-cue svg{animation:scroll-drift 2.4s ease-in-out infinite;color:var(--pink)}
.scroll-cue:hover{color:var(--cream)}
@keyframes scroll-drift{0%,100%{transform:translateY(0);opacity:.6}50%{transform:translateY(9px);opacity:1}}
@media(max-width:800px){header .nav-cta{display:block;padding:10px 16px}.hero{min-height:calc(100svh - 99px);padding-top:45px;gap:30px}.hero h1{font-size:clamp(80px,16vw,125px)}}
@media(prefers-reduced-motion:reduce){.scroll-cue svg{animation:none}}

.contact-actions{display:flex;flex-wrap:wrap;align-items:center;gap:14px}.contact-email{background:transparent;color:var(--cream);border:1px solid var(--violet)}.contact-email:hover{background:var(--pink);color:var(--dark);border-color:var(--pink)}

/* Perspective phone carousel: only the selected phone plays. */
.dance{overflow:hidden}
.reel-track{display:block;position:relative;height:650px;overflow:visible;perspective:1200px;scroll-snap-type:none;padding:25px 0 0;touch-action:pan-y;scrollbar-width:none}
.phone-card{position:absolute;top:24px;left:50%;width:270px;margin-left:-135px;text-align:center;transition:transform .65s cubic-bezier(.22,.68,.25,1),opacity .5s;transform-style:preserve-3d}
.phone-card[data-position="center"]{transform:translateX(0) translateZ(0);z-index:3;opacity:1}
.phone-card[data-position="left"]{transform:translateX(-310px) translateZ(-160px) rotateY(25deg);z-index:2;opacity:.55}
.phone-card[data-position="right"]{transform:translateX(310px) translateZ(-160px) rotateY(-25deg);z-index:2;opacity:.55}
.phone-card[data-position="hidden"]{transform:translateZ(-380px) scale(.65);opacity:0;pointer-events:none;z-index:0}
.phone-frame{height:540px;border-radius:43px;padding:9px;background:linear-gradient(130deg,#86818d,#29272f 20%,#56515d 60%,#24212b);box-shadow:0 30px 60px #0008,0 0 0 1px #b4adbf55;position:relative}
.phone-frame:before{content:'';position:absolute;z-index:4;top:18px;left:50%;transform:translateX(-50%);width:78px;height:23px;border-radius:20px;background:#09090c;pointer-events:none}
.phone-frame:after{content:'';position:absolute;bottom:17px;left:50%;transform:translateX(-50%);width:85px;height:4px;border-radius:4px;background:#fff7;pointer-events:none}
.phone-screen{height:100%;width:100%;border-radius:35px;background:#16131f;overflow:hidden}
.phone-screen video,.phone-screen img{display:block;width:100%;height:100%;object-fit:cover}
.phone-placeholder{display:flex;flex-direction:column;align-items:center;justify-content:space-between;padding:65px 20px 48px;height:100%;background:radial-gradient(ellipse at 0 20%,#57227977,transparent 65%),linear-gradient(155deg,#241831,#171a2c)}
.phone-card:nth-child(2n) .phone-placeholder{background:radial-gradient(ellipse at 100% 70%,#a02b7250,transparent 70%),#21182b}
.phone-placeholder span{font-size:8px;letter-spacing:2px;color:var(--muted)}
.phone-placeholder strong{font:italic 90px Georgia;color:var(--violet)}
.phone-select{position:absolute;inset:0;z-index:5;width:100%;border:0;border-radius:43px;background:transparent;cursor:pointer}
.phone-select:disabled{pointer-events:none}
.phone-card h3{font-size:19px;font-weight:400;margin:23px 0 5px;color:var(--cream)}
.phone-card>p{font-size:8px;letter-spacing:1.5px;color:var(--muted);margin:0}
.media-controls{display:flex;align-items:center;justify-content:center;gap:12px;flex-wrap:wrap;margin:12px 0 24px}
.media-controls button{border:1px solid var(--line);padding:10px 16px;background:transparent;color:var(--cream);font:11px 'DM Sans',sans-serif;cursor:pointer}
.media-controls button:not(:disabled):hover{border-color:var(--pink)}
.media-controls button:disabled{opacity:.4;cursor:default}
.media-status{font-size:10px;color:var(--muted)}
@media(max-width:800px){.reel-track{height:600px}.phone-card{width:240px;margin-left:-120px}.phone-frame{height:480px}.phone-card[data-position="left"]{transform:translateX(-210px) translateZ(-200px) rotateY(30deg)}.phone-card[data-position="right"]{transform:translateX(210px) translateZ(-200px) rotateY(-30deg)}.media-status{width:100%;text-align:center}}
@media(prefers-reduced-motion:reduce){.phone-card{transition:none}}

/* Four-column portfolio, with the same lighting palette as the rest of the page. */
.portfolio{background:var(--dark);border-top:1px solid var(--line)}
.portfolio-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:30px 20px;margin-top:48px}
.portfolio-tile{min-width:0}
.portfolio-visual{aspect-ratio:3/4;position:relative;overflow:hidden;background:linear-gradient(145deg,#292035,#191923);border:1px solid var(--line)}
.portfolio-tile:nth-child(3n+2) .portfolio-visual{background:linear-gradient(145deg,#302037,#1b1925)}
.portfolio-tile:nth-child(3n) .portfolio-visual{background:linear-gradient(145deg,#222a43,#191923)}
.portfolio-visual img,.portfolio-visual video{display:block;width:100%;height:100%;object-fit:cover}
.portfolio-visual img{transition:transform .5s ease}
.portfolio-tile:hover img{transform:scale(1.035)}
.portfolio-number{position:absolute;top:12px;left:12px;padding:4px 8px;background:#141318c9;color:var(--cream);font-size:9px;letter-spacing:1px;pointer-events:none}
.portfolio-tile h3{font-size:12px;font-weight:400;margin:12px 0 0;color:var(--cream)}
.portfolio-pending h3{color:var(--muted)}
.portfolio-pending-label{position:absolute;inset:0;display:grid;place-items:center;font-size:8px;letter-spacing:2px;color:var(--muted)}
.portfolio-play{position:absolute;bottom:12px;left:12px;border:1px solid #ffffff50;background:#141318d9;color:var(--cream);padding:10px 14px;font:10px 'DM Sans',sans-serif;cursor:pointer}
.portfolio-play:hover{border-color:var(--pink)}
@media(max-width:900px){.portfolio-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:25px 16px}}
@media(max-width:380px){.portfolio-grid{gap:22px 10px}.portfolio-play{left:8px;padding:9px;font-size:9px}}
@media(prefers-reduced-motion:reduce){.portfolio-visual img{transition:none}.portfolio-tile:hover img{transform:none}}

.phone-sound{position:absolute;z-index:6;bottom:34px;left:50%;transform:translateX(-50%);min-height:44px;max-width:calc(100% - 34px);width:max-content;padding:10px 16px;border:1px solid #ffffff66;border-radius:30px;background:#141318db;color:#fff;font:500 11px/1.3 'DM Sans',sans-serif;cursor:pointer;box-shadow:0 3px 15px #0004}.phone-sound[hidden]{display:none}.phone-sound:hover{border-color:var(--pink);background:#291c32}.phone-sound[aria-pressed="true"]{border-color:var(--pink)}

header .nav-cta{display:inline-flex;align-items:center;gap:9px}.nav-arrow{display:inline-block;vertical-align:middle;flex-shrink:0}

.portfolio-buttons{position:absolute;z-index:2;bottom:12px;left:12px;right:12px;display:flex;gap:6px;flex-wrap:wrap}.portfolio-buttons .portfolio-play,.portfolio-sound{position:static;border:1px solid #ffffff50;background:#141318e6;color:var(--cream);padding:10px 9px;min-height:44px;font:10px 'DM Sans',sans-serif;cursor:pointer}.portfolio-sound:hover{border-color:var(--pink)}.portfolio-silence{position:absolute;inset:0;width:100%;height:100%;border:0;background:transparent;cursor:pointer;z-index:1}.portfolio-buttons button[hidden],.portfolio-silence[hidden]{display:none}

.contact-actions .button{background:transparent;color:var(--cream);border:1px solid var(--violet);transition:background .2s,color .2s,border-color .2s}
@media(hover:hover){.contact-actions .button:hover{background:var(--pink);color:var(--dark);border-color:var(--pink)}}
.contact-actions .button:focus-visible{background:var(--pink);color:var(--dark);border-color:var(--pink)}
@media(prefers-reduced-motion:reduce){.contact-actions .button{transition:none}}

.carousel-navigation{display:flex;align-items:center;gap:18px}.carousel-navigation>div{display:flex;flex-shrink:0}.carousel-hint{font-size:10px;letter-spacing:0;color:var(--muted)}@media(max-width:500px){.carousel-navigation{gap:10px}.carousel-hint{max-width:120px;font-size:9px;line-height:1.5}}

.biography{display:grid;grid-template-columns:1fr 1fr;gap:8%;align-items:center;padding:110px 6%;background:radial-gradient(ellipse at 0% 80%,#56208626,transparent 65%),var(--panel);border-block:1px solid var(--line);overflow:hidden}
.bio-copy{max-width:480px}.bio-copy>p:not(.eyebrow):not(.lead){font-size:13px;line-height:1.85;color:var(--muted)}.bio-copy h2 em{color:var(--pink)}.bio-copy .lead{font-size:18px;margin:28px 0 22px}
.bio-gallery{min-width:0}.bio-cards{height:465px;position:relative;perspective:1000px;touch-action:pan-y}
.bio-card{position:absolute;left:50%;top:20px;width:270px;height:405px;margin:0 0 0 -135px;background:var(--dark);border:1px solid #bd99ff66;box-shadow:0 20px 45px #0006;transition:transform .6s ease,opacity .6s ease;backface-visibility:hidden}
.bio-card img{width:100%;height:100%;object-fit:cover;display:block}.bio-card[data-position="center"]{transform:translateZ(40px);z-index:3;opacity:1}.bio-card[data-position="left"]{transform:translateX(-100px) translateZ(-110px) rotateY(22deg) rotateZ(-5deg);z-index:1;opacity:.55}.bio-card[data-position="right"]{transform:translateX(100px) translateZ(-110px) rotateY(-22deg) rotateZ(5deg);z-index:1;opacity:.55}
.bio-navigation{display:flex;align-items:center;justify-content:center;gap:28px}.bio-navigation>span{font-size:10px;letter-spacing:2px;color:var(--muted)}.bio-navigation button{width:44px;height:44px;border:1px solid var(--line);background:transparent;color:var(--cream);font-size:22px;cursor:pointer}.bio-navigation button:hover{background:var(--pink);color:var(--dark)}
@media(max-width:900px){.biography{grid-template-columns:1fr;gap:45px;padding:75px 6%}.bio-gallery{width:100%;max-width:480px;justify-self:center}.bio-copy{max-width:600px}.bio-cards{height:425px}.bio-card{width:240px;height:360px;margin-left:-120px}.bio-card[data-position="left"]{transform:translateX(-70px) translateZ(-110px) rotateY(22deg) rotateZ(-5deg)}.bio-card[data-position="right"]{transform:translateX(70px) translateZ(-110px) rotateY(-22deg) rotateZ(5deg)}}
@media(prefers-reduced-motion:reduce){.bio-card{transition:none}}

/* Let the hangar portrait fade naturally into the contact section. */
.connect{isolation:isolate;overflow:hidden;min-height:620px}
.connect-art{position:absolute;z-index:-1;pointer-events:none;right:-4%;top:0;width:74%;height:100%;object-fit:cover;object-position:40% center;opacity:.5;filter:saturate(.65);-webkit-mask-image:linear-gradient(to right,transparent 0%,#000 40%,#000 80%,transparent 100%);mask-image:linear-gradient(to right,transparent 0%,#000 40%,#000 80%,transparent 100%)}
.connect:after{content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;background:linear-gradient(to right,#1d1928 0%,#1d1928e6 30%,#1d192830 72%),linear-gradient(to bottom,#1d1928 0%,transparent 24%,transparent 75%,#1d1928 100%)}
.connect h2>span{display:none}
.connect .contact-actions{position:relative}
@media(max-width:800px){.connect{padding-bottom:230px}.connect-art{top:auto;bottom:-25px;right:-10%;width:120%;height:390px;object-position:center;opacity:.42;-webkit-mask-image:linear-gradient(to bottom,transparent 0%,#000 40%,#000 78%,transparent 100%);mask-image:linear-gradient(to bottom,transparent 0%,#000 40%,#000 78%,transparent 100%)}.connect:after{background:linear-gradient(to bottom,#1d1928 0%,#1d1928ee 45%,#1d192840 78%,#1d1928 100%)}.connect .contact-actions{gap:12px}}

@media(min-width:901px){.bio-copy{grid-column:1;grid-row:1}.bio-gallery{grid-column:2;grid-row:1}}

/* Four independent, horizontal collections. */
.portfolio-grid{display:flex;flex-direction:column;gap:65px}
.portfolio-category{min-width:0}.portfolio-category-heading{margin-bottom:24px}.portfolio-category-heading>span{font-size:8px;letter-spacing:2px;color:var(--violet)}.portfolio-category-heading h3{font:400 clamp(25px,3vw,40px)/1.2 'Italiana',Georgia,serif;margin:10px 0 0}
.portfolio-row{display:grid;grid-template-columns:44px minmax(0,1fr) 44px;align-items:center;gap:16px}
.portfolio-track{display:flex;gap:20px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:thin;scrollbar-color:var(--violet) var(--panel);padding:4px 4px 18px;overscroll-behavior-x:contain}
.portfolio-track .portfolio-tile{flex:0 0 calc((100% - 60px)/4);scroll-snap-align:start}
.portfolio-arrow{height:44px;width:44px;display:grid;place-items:center;border:1px solid var(--violet);background:transparent;color:var(--cream);font-size:22px;cursor:pointer}.portfolio-arrow:not(:disabled):hover{background:var(--pink);color:var(--dark)}.portfolio-arrow:disabled{opacity:.25;cursor:default}
@media(max-width:1100px){.portfolio-track .portfolio-tile{flex-basis:calc((100% - 40px)/3)}}
@media(max-width:800px){.portfolio-grid{gap:45px}.portfolio-row{grid-template-columns:32px minmax(0,1fr) 32px;gap:8px}.portfolio-arrow{width:32px;height:44px}.portfolio-track .portfolio-tile{flex-basis:85%}.portfolio-category-heading h3{font-size:30px}}

.portfolio-track .portfolio-tile{flex-basis:calc((100% - (var(--visible-cards,4) - 1)*20px)/var(--visible-cards,4))}
@media(max-width:1100px) and (min-width:801px){.portfolio-track .portfolio-tile{flex-basis:calc((100% - (min(var(--visible-cards,4),3) - 1)*20px)/min(var(--visible-cards,4),3))}}
@media(max-width:800px){.portfolio-track .portfolio-tile{flex-basis:85%}}

.portfolio-category-heading h3{margin-top:0}

/* The selected dance portrait anchors the opening in the site's dark palette. */
.hero{background:var(--dark)}
.hero-photo{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;object-position:center 40%;z-index:-2;filter:saturate(.35);opacity:.68;-webkit-mask-image:linear-gradient(to bottom,transparent 0%,#000 12%,#000 70%,transparent 100%);mask-image:linear-gradient(to bottom,transparent 0%,#000 12%,#000 70%,transparent 100%)}
.hero:after{display:block;content:'';position:absolute;inset:0;width:100%;height:100%;transform:none;z-index:-1;pointer-events:none;opacity:1;box-shadow:none;background:linear-gradient(to bottom,#14131855 0%,#14131850 45%,#141318c9 82%,var(--dark) 100%),radial-gradient(ellipse at 10% 25%,#5a267c38,transparent 65%),radial-gradient(ellipse at 90% 65%,#263e8233,transparent 65%)}
.hero h1{text-shadow:0 3px 35px #0009}.hero .intro{color:var(--cream);text-shadow:0 2px 15px #000}
@media(max-width:800px){.hero-photo{object-fit:cover;object-position:52% 42%;opacity:.62}.hero:after{background:linear-gradient(to bottom,#14131870,#14131855 50%,var(--dark) 100%),linear-gradient(120deg,#56208626,#263e8226)}}

.hero-photo{object-fit:contain;object-position:center;filter:none;opacity:.9;-webkit-mask-image:linear-gradient(to bottom,transparent 0%,#000 10%,#000 78%,transparent 100%);mask-image:linear-gradient(to bottom,transparent 0%,#000 10%,#000 78%,transparent 100%)}
.hero:after{background:linear-gradient(to bottom,#14131825 0%,#14131815 55%,#14131866 82%,var(--dark) 100%)}
@media(min-width:1300px){.hero-photo{object-fit:cover}}
@media(max-width:800px){.hero-photo{object-fit:contain;object-position:center 55%;opacity:.85}.hero:after{background:linear-gradient(to bottom,#14131833 0%,#14131822 55%,var(--dark) 100%)}}

.portfolio-track{scrollbar-width:none;-ms-overflow-style:none}
.portfolio-track::-webkit-scrollbar{display:none;width:0;height:0}

/* Give the extended foot breathing room beside the centered title. */
.hero h1{font-size:clamp(76px,8.5vw,128px)}
@media(max-width:800px){.hero h1{font-size:clamp(68px,13.5vw,106px)}}

/* Mobile composition: keep both dancers visible without placing letters over them. */
@media(max-width:800px){
  .hero{min-height:calc(100svh - 99px);padding:38px 6% 24px;gap:18px;justify-content:center}
  .hero-copy{order:1;margin:0 auto;flex:none}
  .hero .eyebrow{font-size:8px;letter-spacing:3px;margin-bottom:22px}
  .hero h1{font-size:clamp(58px,14vw,88px);line-height:1.02}
  .hero .intro{font-size:9px;letter-spacing:3px;margin:22px auto 0}
  .hero-photo{order:2;position:relative;inset:auto;z-index:0;display:block;flex:none;width:113.64%;height:auto;max-width:none;margin:-6px -6.82% -10px;object-fit:contain;opacity:.9;filter:none;-webkit-mask-image:linear-gradient(to bottom,transparent 0%,#000 16%,#000 78%,transparent 100%);mask-image:linear-gradient(to bottom,transparent 0%,#000 16%,#000 78%,transparent 100%)}
  .hero:after{background:radial-gradient(ellipse at 50% 45%,#30204122,transparent 70%)}
  .scroll-cue{order:3;gap:8px;padding:4px 16px;margin-top:0}
  .scroll-cue svg{height:36px}
}

@media(min-width:801px){.hero-photo{transform:translateX(28px)}}

@media(min-width:801px){
  .hero-photo{
    -webkit-mask-image:linear-gradient(to right,transparent 0%,#000 6%,#000 94%,transparent 100%),linear-gradient(to bottom,transparent 0%,#000 10%,#000 78%,transparent 100%);
    -webkit-mask-composite:source-in;
    mask-image:linear-gradient(to right,transparent 0%,#000 6%,#000 94%,transparent 100%),linear-gradient(to bottom,transparent 0%,#000 10%,#000 78%,transparent 100%);
    mask-composite:intersect;
  }
}

/* Extend only the backdrop into the gap; keep the approved dancer positions. */
@media(min-width:801px){
  .hero:before{display:block;content:'';position:absolute;inset:0 auto 0 0;width:180px;height:100%;transform:none;z-index:-3;pointer-events:none;opacity:.9;box-shadow:none;background:url('assets/hero/dance-extended.jpg') left center / auto 100% no-repeat;-webkit-mask-image:linear-gradient(to right,#000 0%,#000 22%,transparent 100%),linear-gradient(to bottom,transparent 0%,#000 10%,#000 78%,transparent 100%);-webkit-mask-composite:source-in;mask-image:linear-gradient(to right,#000 0%,#000 22%,transparent 100%),linear-gradient(to bottom,transparent 0%,#000 10%,#000 78%,transparent 100%);mask-composite:intersect}
}

/* Tighter section rhythm while keeping the opening composition intact. */
.section{padding-top:65px;padding-bottom:65px}
.dance{padding-top:30px;padding-bottom:45px}
.portfolio{padding-top:45px;padding-bottom:65px}
.portfolio-grid{margin-top:32px;gap:42px}
.portfolio-category-heading{margin-bottom:18px}
.biography{padding-top:70px;padding-bottom:70px}
.connect{padding-top:70px;padding-bottom:70px;min-height:540px}
@media(max-width:800px){
  .section{padding-top:45px;padding-bottom:45px}
  .dance{padding-top:24px;padding-bottom:25px}
  .portfolio-grid{margin-top:28px;gap:32px}
  .biography{padding-top:48px;padding-bottom:48px;gap:30px}
  .connect{padding-top:48px;padding-bottom:200px;min-height:0}
}

/* On phones, one dancer shares the hero with left-aligned text. */
.hero-picture{display:contents}
@media(max-width:800px){
  .hero{min-height:calc(100svh - 99px);isolation:isolate;justify-content:space-between;padding:55px 6% 24px;gap:28px}
  .hero-picture{display:block;position:absolute;inset:0;z-index:-2;pointer-events:none;overflow:hidden}
  .hero .hero-photo{position:absolute;inset:0 auto 0 0;width:115%;height:100%;margin:0;max-width:none;object-fit:contain;object-position:center 20%;transform:translateX(3%);opacity:.8;filter:saturate(.45);-webkit-mask-image:linear-gradient(to right,transparent 0%,#000 28%,#000 100%);mask-image:linear-gradient(to right,transparent 0%,#000 28%,#000 100%)}
  .hero:after{z-index:-1;background:linear-gradient(to right,#141318aa 0%,#14131850 48%,transparent 78%),linear-gradient(to bottom,#14131855 0%,transparent 30%,#14131855 75%,var(--dark) 100%)}
  .hero-copy{order:1;text-align:left;margin:auto 0;position:relative;z-index:1}
  .hero .eyebrow{font-size:8px;letter-spacing:2px;margin-bottom:24px}
  .hero h1{font-size:clamp(58px,15vw,92px);letter-spacing:-2px;line-height:1.03}
  .hero .intro{font-size:8px;letter-spacing:2.5px;margin:24px 0 0}
  .scroll-cue{order:2;align-self:center;position:relative;z-index:1}
}

@media(max-width:800px){
  .hero{padding-bottom:4px}
  .hero .scroll-cue{padding-bottom:0;gap:6px}
  .dance{padding-top:12px}
}

@media(max-width:800px){.carousel-hint{display:none}}

@media(max-width:800px){
  .portfolio-track{padding-left:0;padding-right:0;scroll-padding-inline:0}
  .portfolio-track .portfolio-tile{flex-basis:76%;scroll-snap-align:center}
}

/* Single left dancer with copy on the right, on desktop and mobile. */
.hero{background:var(--dark)}
.hero-picture{display:block;position:absolute;inset:0;z-index:-2;pointer-events:none;overflow:hidden}
.hero .hero-photo{position:absolute;inset:0 auto 0 -5%;width:68%;height:100%;margin:0;max-width:none;object-fit:cover;object-position:center 60%;transform:none;filter:saturate(.35);opacity:.9;z-index:0;-webkit-mask-image:linear-gradient(to right,transparent 0%,#000 10%,#000 60%,transparent 100%);mask-image:linear-gradient(to right,transparent 0%,#000 10%,#000 60%,transparent 100%);-webkit-mask-composite:source-over;mask-composite:add}
.hero:before{display:none}
.hero:after{background:linear-gradient(to bottom,#14131855 0%,transparent 20%,transparent 66%,#141318aa 85%,var(--dark) 100%),linear-gradient(to right,#29203a22,transparent 65%)}
.hero-copy{width:56%;max-width:700px;margin:auto 0 auto auto;text-align:center}
.hero h1{font-size:clamp(72px,8vw,122px)}
.hero .intro{margin-left:auto;margin-right:auto}
@media(max-width:800px){
  .hero{padding:35px 6% 4px;gap:24px;min-height:calc(100svh - 99px)}
  .hero .hero-photo{inset:0 auto 0 -24%;width:112%;height:100%;object-fit:cover;object-position:center 55%;opacity:.85;-webkit-mask-image:linear-gradient(to right,transparent 0%,#000 12%,#000 48%,transparent 92%);mask-image:linear-gradient(to right,transparent 0%,#000 12%,#000 48%,transparent 92%)}
  .hero:after{background:linear-gradient(to bottom,#14131855 0%,transparent 20%,#14131822 65%,var(--dark) 100%)}
  .hero-copy{width:65%;margin:auto 0 auto auto;text-align:right}
  .hero h1{font-size:clamp(45px,11.8vw,78px);line-height:1.05;letter-spacing:-1.5px}
  .hero .eyebrow{font-size:7px;letter-spacing:1.4px;margin-bottom:20px}
  .hero .intro{font-size:7px;letter-spacing:1.7px;margin:22px 0 0 auto}
  .hero .scroll-cue{align-self:center;margin:0;position:relative;z-index:1}
}

.portfolio-category-heading h3{display:inline-block;font-family:'DM Sans',sans-serif;font-weight:600;font-size:clamp(22px,2.5vw,32px);letter-spacing:-.6px;position:relative;padding-bottom:13px}
.portfolio-category-heading h3:after{content:'';position:absolute;left:0;bottom:0;width:58px;height:2px;background:var(--pink);opacity:.8}
@media(max-width:800px){.portfolio-category-heading h3{font-size:24px;line-height:1.3}}

/* Fit the whole pose inside the hero rather than cropping it to fill. */
.hero .hero-photo{object-fit:contain;object-position:center;inset:0 auto 0 -7%;width:67%;height:100%}
@media(max-width:800px){.hero .hero-photo{inset:0 auto 0 -10%;width:90%;height:100%;object-fit:contain;object-position:center}}

/* One portrait integrated beside the biography at every screen size. */
.biography{display:block;position:relative}
.biography:after{content:'';display:block;clear:both}
.bio-copy{max-width:none}
.bio-portrait{float:right;width:38%;max-width:430px;margin:0 0 24px 6%;border:1px solid var(--line);box-shadow:0 16px 40px #0004}
.bio-portrait img{display:block;width:100%;height:auto;aspect-ratio:3/4;object-fit:cover}
.biography h2{font-size:clamp(42px,5vw,72px)}
@media(max-width:800px){.bio-portrait{width:40%;margin:5px 0 18px 18px}.biography h2{font-size:clamp(29px,7.2vw,48px);letter-spacing:-1px}.bio-copy .lead{font-size:14px;margin:20px 0 16px}.bio-copy>p:not(.lead){font-size:12px;line-height:1.8}}

/* Contact copy sits over the right of the portrait, actions at calf height. */
.connect{min-height:650px;padding-bottom:135px}
.connect .contact-message{position:relative;margin:30px 0 0 auto;max-width:380px;width:40%;z-index:1;color:var(--cream);text-shadow:0 2px 12px #141318}
.connect .contact-actions{position:absolute;left:6%;right:6%;bottom:58px;display:flex;flex-wrap:nowrap;gap:14px;z-index:1}
.connect-art{opacity:.6}
@media(max-width:800px){
  .connect{min-height:650px;padding:40px 6% 125px}
  .connect h2{position:relative;z-index:1;font-size:clamp(64px,17vw,92px)}
  .connect .contact-message{width:54%;max-width:280px;margin:35px 0 0 auto;font-size:12px;line-height:1.7}
  .connect-art{inset:0;width:100%;height:100%;object-fit:cover;object-position:32% center;opacity:.6;-webkit-mask-image:linear-gradient(to bottom,transparent 0%,#000 25%,#000 82%,transparent 100%);mask-image:linear-gradient(to bottom,transparent 0%,#000 25%,#000 82%,transparent 100%)}
  .connect:after{background:linear-gradient(to bottom,#1d1928 0%,#1d19284d 35%,#1d192833 75%,#1d1928 100%)}
  .connect .contact-actions{bottom:48px;display:grid;grid-template-columns:1fr 1fr;gap:10px}
  .contact-actions .button{margin:0;min-width:0;min-height:48px;gap:10px;padding:14px;font-size:11px;justify-content:space-between;background:#17131c99}
  .instagram-handle{display:none}
}

/* Mobile contact: full landscape photo, copy at its right, actions below. */
@media(max-width:800px){
  .connect{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px 12px;min-height:0;padding:40px 6% 36px}
  .connect h2{grid-column:1 / -1;grid-row:1;margin:0;font-size:clamp(64px,17vw,92px)}
  .connect-art{position:relative;inset:auto;grid-column:1 / -1;grid-row:2;width:113.64%;max-width:none;height:auto;aspect-ratio:2304/1537;object-fit:contain;margin:0 -6.82%;opacity:.7;z-index:-1;-webkit-mask-image:linear-gradient(to bottom,transparent 0%,#000 12%,#000 88%,transparent 100%);mask-image:linear-gradient(to bottom,transparent 0%,#000 12%,#000 88%,transparent 100%)}
  .connect .contact-message{grid-column:2;grid-row:2;align-self:center;width:auto;max-width:none;margin:0;padding:0 0 0 5px;font-size:clamp(10px,2.65vw,13px);line-height:1.6;text-shadow:0 1px 8px #141318,0 0 18px #141318}
  .connect .contact-actions{position:relative;inset:auto;grid-column:1 / -1;grid-row:3;display:grid;grid-template-columns:1fr 1fr;margin:0;gap:10px}
  .connect:after{background:linear-gradient(to bottom,#1d192833,transparent 70%,#1d1928)}
}

/* A continuous mobile hero, with the desktop's cool studio lighting. */
@media(max-width:800px){
  header{border-bottom-color:transparent}
  .hero{min-height:clamp(470px,74svh,630px);padding-top:12px;padding-bottom:0;gap:10px;background:radial-gradient(ellipse at 15% 35%,#31203c66,transparent 68%),radial-gradient(ellipse at 60% 60%,#202b4633,transparent 70%),var(--dark)}
  .hero-picture{background:linear-gradient(135deg,#241b3033,#17203922)}
  .hero-picture:before{content:'';position:absolute;inset:-30px;background:url('assets/hero/dance-left.jpg') center / cover no-repeat;filter:blur(30px) saturate(.25);opacity:.16}
  .hero .hero-photo{inset:-35px auto auto -10%;width:90%;height:calc(100% + 35px);object-fit:contain;object-position:center top;filter:saturate(.25) brightness(.92);opacity:.9;mix-blend-mode:luminosity}
  .hero:after{background:linear-gradient(to bottom,#14131822 0%,transparent 18%,transparent 65%,#14131899 90%,var(--dark) 100%),linear-gradient(110deg,#56208620,transparent 50%,#263e8218)}
  .hero-copy{margin:auto 0 auto auto}
  .hero .scroll-cue{gap:4px;padding:0 16px;line-height:1.2}
  .hero .scroll-cue svg{height:30px}
  .dance{padding-top:12px}
}

.connect h2{position:relative;z-index:1;text-align:right;max-width:64%;margin-left:auto;font-size:clamp(64px,7.2vw,108px);line-height:1.02}
@media(max-width:800px){
  .connect h2{grid-column:2;grid-row:1 / 3;align-self:start;max-width:none;width:100%;margin:0;text-align:right;font-size:clamp(40px,10.5vw,66px);line-height:1.08;transform:translateY(0)}
  .connect-art{grid-row:1 / 3;margin-top:20px}
  .connect .contact-message{align-self:end;margin-top:120px;font-size:clamp(10px,2.65vw,13px)}
  .connect .contact-actions{grid-row:3}
}

/* Compact mobile opening: title upper-right, image fading into the scroll cue. */
@media(max-width:800px){
  .hero{min-height:0;height:clamp(440px,118vw,620px);padding:30px 6% 0;justify-content:flex-start;gap:0}
  .hero-copy{align-self:flex-end;width:65%;margin:0 0 auto;text-align:right}
  .hero .hero-photo{inset:0 auto auto -10%;width:90%;height:100%;object-fit:contain;object-position:center top;-webkit-mask-image:linear-gradient(to right,transparent 0%,#000 12%,#000 48%,transparent 92%),linear-gradient(to bottom,#000 0%,#000 67%,transparent 92%);-webkit-mask-composite:source-in;mask-image:linear-gradient(to right,transparent 0%,#000 12%,#000 48%,transparent 92%),linear-gradient(to bottom,#000 0%,#000 67%,transparent 92%);mask-composite:intersect}
  .hero-picture:before{opacity:.08}
  .hero:after{background:linear-gradient(to bottom,#14131822 0%,transparent 45%,#14131866 70%,var(--dark) 94%),linear-gradient(110deg,#56208620,transparent 60%)}
  .hero .scroll-cue{position:absolute;bottom:0;left:50%;transform:translateX(-50%);padding:0 12px;gap:4px}
  .hero .scroll-cue svg{height:28px}
  .dance{padding-top:16px}
}

.phone-play{position:absolute;z-index:7;right:20px;bottom:94px;display:grid;place-items:center;width:38px;height:38px;padding:0;border:1px solid #ffffff66;border-radius:50%;background:#141318c9;color:var(--cream);cursor:pointer}.phone-play[hidden]{display:none}.phone-play:hover{border-color:var(--pink)}
.media-controls{display:none}
.reel-track{height:620px}
@media(max-width:800px){.reel-track{height:575px}.dance{padding-bottom:12px}}

/* Keep the portrait visible farther across before fading at the right edge. */
.hero .hero-photo{-webkit-mask-image:linear-gradient(to right,transparent 0%,#000 8%,#000 82%,transparent 100%);mask-image:linear-gradient(to right,transparent 0%,#000 8%,#000 82%,transparent 100%)}
@media(max-width:800px){
  .hero .hero-photo{-webkit-mask-image:linear-gradient(to right,transparent 0%,#000 8%,#000 84%,transparent 100%),linear-gradient(to bottom,#000 0%,#000 67%,transparent 92%);-webkit-mask-composite:source-in;mask-image:linear-gradient(to right,transparent 0%,#000 8%,#000 84%,transparent 100%),linear-gradient(to bottom,#000 0%,#000 67%,transparent 92%);mask-composite:intersect}
}
@media(max-width:800px){.hero .hero-photo{width:110%}}

/* Reserve space for the full animated arrow travel inside the clipped hero. */
.hero .scroll-cue{padding-bottom:14px}
@media(max-width:800px){.hero .scroll-cue{bottom:0;padding-bottom:14px}.dance{padding-top:12px}}

.connect h2 .connect-heading-top{display:block;position:static;font:inherit;font-size:1.12em;color:var(--cream);margin-bottom:8px}
@media(max-width:800px){
  .connect{grid-template-rows:auto auto auto;row-gap:12px}
  .connect h2{grid-column:1 / -1;grid-row:1 / 3;align-self:start;width:100%;max-width:none;position:relative;z-index:1;text-align:right;font-size:clamp(40px,10.5vw,66px)}
  .connect h2 .connect-heading-top{font-size:clamp(56px,14vw,88px);line-height:1.04;margin-bottom:12px;white-space:nowrap}
  .connect h2 em{display:block;width:50%;margin-left:auto;font-size:1em}
  .connect-art{grid-row:2;margin-top:0}
  .connect .contact-message{grid-row:2;align-self:end;margin-top:85px}
  .connect .contact-actions{grid-row:3}
  .connect:before{content:'';grid-column:1 / -1;grid-row:1;height:clamp(58px,14.5vw,92px);pointer-events:none}
}

@media(max-width:800px){
  .connect .contact-message{grid-column:1 / -1;grid-row:3;align-self:auto;width:100%;max-width:none;margin:0;padding:0;font-size:13px;line-height:1.7;text-shadow:none}
  .connect .contact-actions{grid-row:4}
}

footer{display:grid;grid-template-columns:1fr auto 1fr}
footer>.brand{justify-self:start}
footer>p{margin:0;text-align:center}
footer>a:last-child{justify-self:end}
@media(max-width:800px){footer{grid-template-columns:1fr 1fr}footer>p{grid-column:1 / -1;grid-row:2;width:100%;text-align:center}footer>a:last-child{grid-column:2;grid-row:1}}

/* The photo itself extends edge to edge; no horizontal mask or separate fill. */
.hero-picture{background:none}
.hero-picture:before,.hero:before{display:none}
.hero .hero-photo{inset:0;width:100%;height:100%;margin:0;object-fit:cover;object-position:left center;transform:none;filter:none;opacity:1;mix-blend-mode:normal;-webkit-mask-image:none;mask-image:none;-webkit-mask-composite:source-over;mask-composite:add}
.hero:after{background:linear-gradient(to bottom,#14131822 0%,transparent 20%,transparent 70%,var(--dark) 100%)}
@media(max-width:800px){.hero .hero-photo{inset:0;width:100%;height:100%;object-fit:cover;object-position:center;transform:none;filter:none;opacity:1;mix-blend-mode:normal;-webkit-mask-image:none;mask-image:none}.hero:after{background:linear-gradient(to bottom,#14131811 0%,transparent 25%,transparent 78%,var(--dark) 100%)}}

/* Restore the previously approved desktop hero. */
@media(min-width:801px){
  .hero .hero-photo{inset:0 auto 0 -7%;width:67%;height:100%;margin:0;object-fit:contain;object-position:center;transform:none;filter:saturate(.35);opacity:.9;mix-blend-mode:normal;z-index:0;-webkit-mask-image:linear-gradient(to right,transparent 0%,#000 8%,#000 82%,transparent 100%);mask-image:linear-gradient(to right,transparent 0%,#000 8%,#000 82%,transparent 100%);-webkit-mask-composite:source-over;mask-composite:add}
  .hero:after{background:linear-gradient(to bottom,#14131855 0%,transparent 20%,transparent 66%,#141318aa 85%,var(--dark) 100%),linear-gradient(to right,#29203a22,transparent 65%)}
}

@media(max-width:800px){
  .hero .hero-photo{filter:none;opacity:1;mix-blend-mode:normal;object-position:center;-webkit-mask-image:none;mask-image:none}
  .hero:after{background:linear-gradient(to bottom,transparent 0%,transparent 86%,var(--dark) 100%)}
  .hero-copy{width:65%;align-self:flex-end;margin:0 0 auto auto;text-align:right}
}

/* Keep both playback controls together near the bottom of the phone screen. */
.phone-sound{left:calc(50% + 22px)}
.phone-play{left:calc(50% - 99px);right:auto;bottom:37px}

/* Contact composition follows the supplied sizing sketch. */
.connect{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:auto auto auto auto;gap:18px 14px;min-height:0;padding:55px 6% 45px}
.connect:before{content:'';display:block;grid-column:1 / -1;grid-row:1;height:clamp(65px,9vw,135px);pointer-events:none}
.connect h2{grid-column:1 / -1;grid-row:1 / 3;align-self:start;max-width:none;width:100%;margin:0;text-align:right;font-size:clamp(64px,9vw,140px);line-height:1}
.connect h2 .connect-heading-top{display:block;text-align:center;position:static;font:inherit;font-size:1em;line-height:1;margin:0 0 12px;white-space:nowrap}
.connect h2 em{display:block;width:58%;margin-left:auto;font-size:1em;text-align:right}
.connect-art{position:relative;inset:auto;grid-column:1 / -1;grid-row:2;width:100%;height:auto;max-width:none;aspect-ratio:2304/1537;object-fit:contain;margin:0;opacity:.88;z-index:-1;-webkit-mask-image:linear-gradient(to bottom,#000 0%,#000 90%,transparent 100%);mask-image:linear-gradient(to bottom,#000 0%,#000 90%,transparent 100%)}
.connect .contact-message{position:relative;grid-column:1 / -1;grid-row:3;width:100%;max-width:none;margin:0;padding:0;font-size:14px;line-height:1.7;text-shadow:none}
.connect .contact-actions{position:relative;inset:auto;grid-column:1 / -1;grid-row:4;display:flex;flex-wrap:nowrap;gap:14px;margin:0}
.connect .contact-actions .button{margin-top:0}
.connect:after{background:linear-gradient(to bottom,#1d192800 0%,#1d192815 80%,#1d1928 100%)}
@media(max-width:800px){
  .connect{padding:32px 6% 32px;gap:14px 10px}
  .connect:before{height:clamp(46px,12vw,88px)}
  .connect h2{font-size:clamp(48px,12.5vw,94px)}
  .connect h2 .connect-heading-top{font-size:1.1em;margin-bottom:10px;text-align:center}
  .connect h2 em{width:58%;font-size:1.1em}
  .connect-art{width:100%;height:auto;margin:0;object-fit:contain;opacity:.88}
  .connect .contact-message{margin:0;font-size:13px;align-self:auto}
  .connect .contact-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px}
}

/* Restore the approved two-dancer desktop composition only. */
@media(min-width:801px){
  .hero-copy{width:100%;max-width:1100px;margin:auto;text-align:center}
  .hero h1{font-size:clamp(76px,8.5vw,128px)}
  .hero .hero-photo{inset:0;width:100%;height:100%;object-fit:contain;object-position:center;transform:translateX(28px);filter:none;opacity:.9;mix-blend-mode:normal;-webkit-mask-image:linear-gradient(to right,transparent 0%,#000 6%,#000 94%,transparent 100%),linear-gradient(to bottom,transparent 0%,#000 10%,#000 78%,transparent 100%);-webkit-mask-composite:source-in;mask-image:linear-gradient(to right,transparent 0%,#000 6%,#000 94%,transparent 100%),linear-gradient(to bottom,transparent 0%,#000 10%,#000 78%,transparent 100%);mask-composite:intersect}
  .hero:before{display:block;content:'';position:absolute;inset:0 auto 0 0;width:180px;height:100%;transform:none;z-index:-3;pointer-events:none;opacity:.9;box-shadow:none;background:url('assets/hero/dance-extended.jpg') left center / auto 100% no-repeat;-webkit-mask-image:linear-gradient(to right,#000 0%,#000 22%,transparent 100%),linear-gradient(to bottom,transparent 0%,#000 10%,#000 78%,transparent 100%);-webkit-mask-composite:source-in;mask-image:linear-gradient(to right,#000 0%,#000 22%,transparent 100%),linear-gradient(to bottom,transparent 0%,#000 10%,#000 78%,transparent 100%);mask-composite:intersect}
  .hero:after{background:linear-gradient(to bottom,#14131825 0%,#14131815 55%,#14131866 82%,var(--dark) 100%)}
}
@media(min-width:1300px){.hero .hero-photo{object-fit:cover}}

/* Refine the mobile contact overlap and close the image-to-copy gap. */
@media(max-width:800px){
  .connect h2{font-size:clamp(56px,14vw,104px);transform:translateY(14px)}
  .connect h2 .connect-heading-top{font-size:1.1em;margin-bottom:6px}
  .connect h2 em{font-size:1.1em}
  .connect:before{height:clamp(46px,12vw,88px)}
  .connect .contact-message{margin-top:-18px;position:relative;z-index:1}
}

/* Restore the desktop contact layout from before the mobile refinements. */
@media(min-width:801px){
  .connect{display:block;min-height:540px;padding:70px 6%;isolation:isolate;overflow:hidden}
  .connect:before{display:none}
  .connect h2{display:block;position:relative;z-index:1;width:auto;max-width:none;margin:0;text-align:left;font-size:clamp(75px,10vw,145px);line-height:1;transform:none}
  .connect h2 .connect-heading-top{display:block;position:static;font:inherit;color:var(--cream);line-height:1;text-align:left;margin:0;white-space:normal}
  .connect h2 em{display:block;width:auto;margin:0;text-align:left;font-size:.95em}
  .connect-art{position:absolute;inset:0 -4% auto auto;width:74%;height:100%;max-width:none;margin:0;aspect-ratio:auto;object-fit:cover;object-position:40% center;opacity:.5;filter:saturate(.65);z-index:-1;-webkit-mask-image:linear-gradient(to right,transparent 0%,#000 40%,#000 80%,transparent 100%);mask-image:linear-gradient(to right,transparent 0%,#000 40%,#000 80%,transparent 100%)}
  .connect:after{background:linear-gradient(to right,#1d1928 0%,#1d1928e6 30%,#1d192830 72%),linear-gradient(to bottom,#1d1928 0%,transparent 24%,transparent 75%,#1d1928 100%)}
  .connect .contact-message{position:relative;width:auto;max-width:440px;margin:30px 0 0;padding:0;color:var(--muted);font-size:14px;line-height:1.65;text-shadow:none}
  .connect .contact-actions{position:relative;inset:auto;display:flex;flex-wrap:wrap;gap:14px;margin:0;align-items:center}
  .connect .contact-actions .button{margin-top:23px}
}

@media(max-width:800px){
  .connect{grid-template-rows:auto auto auto auto;row-gap:10px}
  .connect:before{display:none}
  .connect h2{grid-column:1 / -1;grid-row:1;display:flex;align-items:baseline;justify-content:center;gap:.24em;width:100%;font-size:clamp(27px,7.2vw,54px);line-height:1.15;letter-spacing:-1px;text-align:center;transform:none;white-space:nowrap}
  .connect h2 .connect-heading-top,.connect h2 em{display:inline;position:static;width:auto;margin:0;font-size:1em;line-height:inherit;text-align:inherit;white-space:nowrap}
  .connect-art{grid-row:2;margin:0}
  .connect .contact-message{grid-row:3;margin:-8px 0 0;padding:0;font-size:13px;line-height:1.7}
  .connect .contact-actions{grid-row:4}
}

.bio-gallery{display:none}
@media(min-width:801px){
  .biography{display:grid;grid-template-columns:1fr 1fr;gap:8%;align-items:center}
  .biography:after{display:none}
  .bio-portrait{display:none}
  .bio-gallery{display:block;grid-column:2;grid-row:1;width:100%;min-width:0}
  .bio-copy{grid-column:1;grid-row:1;max-width:480px}
  .biography h2{font-size:clamp(45px,5.5vw,80px)}
}

/* Refine the mobile contact section without changing the restored desktop. */
@media(max-width:800px){
  .connect{row-gap:6px}
  .connect h2{font-size:clamp(30px,8.2vw,61px);letter-spacing:-1.2px;gap:.18em}
  .connect-art{-webkit-mask-image:linear-gradient(to bottom,transparent 0%,#000 12%,#000 86%,transparent 100%);mask-image:linear-gradient(to bottom,transparent 0%,#000 12%,#000 86%,transparent 100%)}
  .connect .contact-message{margin-top:-14px}
}

footer{display:grid;grid-template-columns:1fr 1fr;row-gap:22px}
footer>p{grid-column:1 / -1;grid-row:1;order:0;width:100%;text-align:center;margin:0}
footer>.brand{grid-column:1;grid-row:2;justify-self:start}
footer>a:last-child{grid-column:2;grid-row:2;justify-self:end}

@media(max-width:800px){.connect .contact-message{margin-top:-38px}.connect{row-gap:4px}}

@media(min-width:801px){
  footer{display:flex;justify-content:space-between;align-items:center;gap:20px}
  footer>p{width:auto;order:0;margin:0;text-align:center}
  footer>.brand,footer>a:last-child{grid-column:auto;grid-row:auto}
}

@media(max-width:800px){
  .connect .contact-actions{margin-top:20px}
}