/* Oido: original music artwork, real room and community, original scroll choreography. */
.site-header{row-gap:8px}.wordmark{width:104px;height:44px}.logo-crop{display:block;position:relative;overflow:hidden;width:104px;height:44px}.logo-crop img{position:absolute;width:150px;height:150px;max-width:none;left:-22px;top:-48px;filter:invert(1)}.menu-toggle{align-self:start}.how-link{font-size:9px}.sound-toggle{align-self:start}.eyebrow{font-size:11px;letter-spacing:.1em;margin-bottom:27px}.intro{position:relative}.intro h1{font-size:clamp(54px,7.2vw,115px)}.intro-bottom{position:absolute;bottom:22px;left:var(--pad);right:var(--pad);display:flex;justify-content:space-between;font-size:10px;letter-spacing:.025em}.welcome h2{font-size:clamp(65px,12vw,185px)}.welcome-copy{font-size:18px;letter-spacing:-.02em;margin-top:26px}.welcome .actions{margin-top:25px}.studio-hero{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;animation:room-drift 22s ease-in-out infinite alternate}.hero-shade{position:absolute;inset:0;background:#0002}.hero-art .music-molecule{scale:.77;opacity:.95}.hero-art .orbits i{border-color:#fbf9ef33}.photo-caption{position:absolute;left:18px;bottom:18px;color:var(--paper);font-size:10px;letter-spacing:.08em}.magic-pin h2{font-size:min(22vw,30vh);line-height:.8}.studio-tour{height:510vh}.studio-tour .walkthrough-pin{padding:82px var(--pad) 58px;align-items:stretch}.tour-frames{width:100%;height:100%;position:relative;overflow:hidden;background:#141511}.tour-photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transform:scale(1.08);transition:opacity .8s ease,transform 1.7s ease}.tour-photo-0{object-position:50% 44%}.tour-photo-2{object-position:65% 50%}.tour-photo-3{object-position:60% 50%}.studio-tour[data-stage="0"] .tour-photo-0,.studio-tour[data-stage="1"] .tour-photo-1,.studio-tour[data-stage="2"] .tour-photo-2,.studio-tour[data-stage="3"] .tour-photo-3,.studio-tour[data-stage="4"] .tour-photo-4{opacity:1;transform:scale(1)}.tour-shade{position:absolute;inset:0;background:linear-gradient(90deg,#0009,transparent 80%),linear-gradient(0deg,#000a,transparent 75%)}.tour-topline{position:absolute;top:25px;left:30px;right:30px;display:flex;justify-content:space-between;font-size:11px;letter-spacing:.06em}.tour-copy{position:absolute;left:4%;bottom:12%;width:85%;max-width:1050px}.tour-kicker{display:block;font-size:12px;letter-spacing:.1em;color:var(--accent);margin-bottom:20px}.tour-copy h2{font-size:clamp(44px,7.4vw,115px);letter-spacing:-.065em;line-height:.88}.tour-copy p{font-size:17px;line-height:1.5;max-width:380px;margin-top:25px}.tour-copy.changing{animation:tour-copy-in .6s both}.tour-location{position:absolute;bottom:22px;right:30px;font-size:10px;letter-spacing:.06em}.step-nav button{font-size:clamp(10px,1.3vw,20px)}.modules-banner>img{filter:brightness(.8);transform:scale(1.05);object-position:center}.modules-banner h2{font-size:clamp(40px,6vw,95px)}.news-card:first-child>img{object-position:50% 43%}.news-card:nth-child(2)>img{object-position:50% 40%}.news-card:nth-child(3)>img{object-position:45% 50%}.news-card:hover>img{filter:none}.news-card:hover h3{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:5px}.news-meta{gap:15px;font-size:10px}.quote-card{min-height:390px;justify-content:flex-start}.card-number{font-size:10px;letter-spacing:.02em;margin-bottom:40px}.quote-card h3{font-size:clamp(30px,3.4vw,52px);letter-spacing:-.05em;line-height:1.04}.quote-card>p{font-size:17px;line-height:1.5;margin-top:auto;padding-top:35px}.rental-grid{display:grid;grid-template-columns:1fr 1fr;gap:6vw}.rental-photo img{width:100%;aspect-ratio:1.08;object-fit:cover;object-position:35% 50%;display:block}.rental-photo>span{font-size:10px;display:block;margin-top:15px;letter-spacing:.04em}.faq-list{border-top:1px solid #a6a89c}.faq-list details{border-bottom:1px solid #a6a89c;padding:24px 0}.faq-list summary{list-style:none;cursor:pointer;font-size:23px;letter-spacing:-.03em;display:flex;justify-content:space-between;gap:20px}.faq-list summary::-webkit-details-marker{display:none}.faq-list summary:after{content:'+';font-size:25px}.faq-list details[open] summary:after{content:'−'}.faq-list details p{font-size:16px;line-height:1.6;margin:20px 35px 0 0;max-width:490px}.text-link{font-size:11px;display:inline-block;margin-top:20px;text-decoration:underline;text-underline-offset:4px}.contact-row p{font-size:15px;line-height:1.5}.contact-row .address-note{font-size:10px;margin-top:20px}.outro-pin h2{font-size:23vw;line-height:.8}.footer-studio h3{font-size:38px;line-height:1;letter-spacing:-.06em}.footer-studio>p{font-size:14px;margin-top:20px}.footer-links{font-size:20px;gap:8px}.footer-address p{font-size:16px;line-height:1.5}.footer-address>a{font-size:11px;text-decoration:underline;margin-top:12px}.booking-form{display:grid;grid-template-columns:1fr 1fr;gap:18px}.booking-form label{font-size:11px;margin:0 0 8px}.booking-form input,.booking-form select{border:1px solid #b6b7aa;border-radius:0;padding:13px;background:transparent;font:inherit;width:100%;min-width:0;color:var(--ink)}.booking-form .full{grid-column:1/-1}.booking-form .pill{margin:0;justify-self:start}.dialog-content .booking-note{font-size:13px;line-height:1.5;color:#656759}.booking-result{border-top:1px solid #c4c6b9;padding-top:20px;margin-top:25px}.booking-result h3{font-size:23px;margin-bottom:15px}.booking-result textarea{font-size:14px;line-height:1.5;min-height:190px}.booking-result p,.copy-status{font-size:13px;line-height:1.5;margin-top:10px}.photo-dialog{max-width:1000px}.photo-dialog .dialog-content img{max-height:65vh;object-fit:contain}.photo-dialog .dialog-content h2{font-size:25px}.gallery-dialog-caption{font-size:13px!important}@keyframes room-drift{to{transform:scale(1.07) translateX(-1%)}}@keyframes tour-copy-in{from{opacity:.2;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}@media(max-width:800px){.hero-description h3{font-size:24px}.hero-art .music-molecule{scale:.6}.studio-tour .walkthrough-pin{padding-top:88px}.tour-copy{left:6%;bottom:15%}.tour-copy h2{font-size:9vw}.tour-copy p{font-size:15px;max-width:300px}.tour-topline{left:20px;right:20px;font-size:10px}.tour-location{right:20px}.step-nav button{font-size:10px}.quote-card{min-height:350px}.quote-card h3{font-size:28px}.quote-card>p{font-size:14px}.card-number{font-size:9px;margin-bottom:30px}.rental-grid{gap:30px}.faq-list summary{font-size:19px}.faq-list details p{font-size:14px;margin-right:0}.rental-photo img{aspect-ratio:.78}.footer-links{font-size:15px}.footer-address p{font-size:13px}.footer-studio h3{font-size:30px}.footer-studio>p{font-size:12px}.contact-row p{font-size:12px}.contact-row .address-note{font-size:8px}.outro footer{grid-template-columns:1.2fr 1fr 1fr auto}}
@media(max-width:520px){.wordmark,.logo-crop{width:91px;height:40px}.logo-crop img{width:134px;height:134px;left:-20px;top:-43px}.intro h1{font-size:14vw}.eyebrow{font-size:9px;letter-spacing:.06em}.intro-bottom{font-size:8px;gap:25px}.intro-bottom>span:last-child{text-align:right;max-width:150px}.welcome-copy{font-size:15px;text-align:center}.welcome h2{font-size:13vw}.hero-art .music-molecule{scale:.5}.hero-description h3{font-size:21px}.hero-description p{font-size:9px}.photo-caption{font-size:8px}.studio-tour{height:400vh}.studio-tour .walkthrough-pin{padding:88px 12px 52px}.tour-copy{width:90%;bottom:12%}.tour-copy h2{font-size:12vw}.tour-copy p{font-size:14px;max-width:265px;margin-top:20px}.tour-kicker{font-size:9px}.tour-topline{font-size:8px;left:16px;right:16px}.tour-location{font-size:8px;right:16px;bottom:20px}.tour-photo-0{object-position:50% 40%}.tour-photo-2{object-position:70% 50%}.tour-photo-3{object-position:65% 50%}.tour-photo-4{object-position:45% 50%}.step-nav button{font-size:7px}.modules-banner h2{font-size:9vw}.quote-card h3{font-size:40px}.quote-card>p{font-size:17px}.quote-card{min-height:340px}.card-number{font-size:10px}.rental-grid{grid-template-columns:1fr}.rental-photo img{aspect-ratio:1.1}.rental .section-heading{align-items:flex-start;gap:15px}.rental .section-heading h2{font-size:24px}.rental .section-heading .pill{font-size:9px;padding:0 12px}.faq-list summary{font-size:21px}.faq-list details p{font-size:16px}.contact-row p{font-size:14px}.contact-row .address-note{font-size:10px}.outro footer{grid-template-columns:1fr 1fr}.footer-studio{grid-column:1/-1}.footer-links{font-size:16px}.footer-studio h3{font-size:40px}.footer-studio>p{font-size:14px}.booking-form{gap:15px}.booking-form input,.booking-form select{font-size:14px;padding:10px}.booking-form .pill{font-size:10px}.dialog-content>p{font-size:15px}.outro-pin h2{font-size:28vw}}
/* Preserve the full supplied wordmark, including its studio descriptor. */
.wordmark,.logo-crop{height:56px}
@media(max-width:520px){.wordmark,.logo-crop{height:49px}.tour-copy h2{font-size:10.7vw}}
.studio-tour .walkthrough-pin{padding-top:104px}
@media(max-width:520px){.studio-tour .step-nav{height:48px;gap:5px}.studio-tour .step-nav button{font-size:9px;line-height:1.2;flex:1;text-align:center}.studio-tour .walkthrough-pin{padding-bottom:60px}}


/* Overhead drum portrait with a quiet editorial text column. */
.intro{isolation:isolate;background:#f7f1e6}
.drum-hero-image{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:65% 50%;z-index:-2}
.intro:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,#faf8efe6 0%,#faf8ef00 24%),linear-gradient(90deg,#faf8eff2 0%,#faf8efcf 27%,#faf8ef00 55%);z-index:-1;pointer-events:none}
.intro-center{position:absolute;left:6%;top:50%;transform:translateY(-50%);margin:0;text-align:left;width:44%}
.intro h1{font-size:clamp(54px,6.2vw,100px)}
.intro .eyebrow{font-size:10px;letter-spacing:.1em}
.intro .scroll-blob{margin:30px 0 0}
@media(max-width:600px){
 .intro{min-height:780px}
 .drum-hero-image{inset:auto 0 0 auto;width:150%;height:48%;object-fit:contain;object-position:right bottom}
 .intro:after{background:linear-gradient(180deg,#faf8ef 0%,#faf8ef 40%,#faf8ef00 65%)}
 .intro-center{left:7%;top:18%;width:86%;transform:none}
 .intro h1{font-size:13vw}
 .intro .eyebrow{font-size:9px;margin-bottom:22px}
 .intro .scroll-blob{margin-top:20px;transform:scale(.65);transform-origin:top left}
 .intro-bottom{font-size:7px;bottom:14px}
}

/* Interactive sculptural kit — keep the page scroll available on touch screens. */
.intro{background:#faf8ef}.intro:after{display:none}.drum-hero-image{display:none}
.intro-center{width:39%;z-index:2;pointer-events:none}.intro-center button{pointer-events:auto}
.intro h1{font-size:clamp(50px,5.8vw,90px)}
.drum-experience{position:absolute;left:42%;right:2%;top:15%;bottom:10%;display:flex;flex-direction:column}
.drum-stage{position:relative;flex:1;min-height:0;cursor:grab}
.drum-stage canvas{display:block;width:100%;height:100%;touch-action:pan-y;outline-offset:-4px}
.kit-fallback{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}
.drum-stage.ready .kit-fallback{display:none}
.kit-controls{padding:0 6%}.kit-controls[hidden]{display:none}
.kit-toolbar{display:flex;align-items:center;gap:18px;font-size:10px;letter-spacing:.04em;color:#68665e;margin-bottom:16px}
.kit-status{margin-right:auto}.kit-toolbar button{font-size:10px;min-height:32px}.kit-toolbar [data-kit-turn]{font-size:24px;min-width:32px}
.kit-pads{display:flex;gap:8px}.kit-pads button{flex:1;border:1px solid #d5d0c4;border-radius:30px;padding:11px 6px;font-size:10px;letter-spacing:.07em;transition:background .15s}
.kit-pads button:hover,.kit-pads button:active{background:#ff7a32;border-color:#ff7a32;color:#20201d}
.kit-pads button:focus-visible,.kit-toolbar button:focus-visible{outline:2px solid #b75c25;outline-offset:3px}
@media(max-width:700px){
 .intro{min-height:780px;height:100svh}
 .intro-center{top:17%;left:7%;width:86%}
 .intro h1{font-size:12vw;line-height:.87}
 .intro .scroll-blob{position:absolute;left:65%;bottom:0;margin:0;transform:scale(.58);transform-origin:bottom center}
 .drum-experience{left:0;right:0;top:43%;bottom:7%}
 .kit-controls{padding:0 7%}.kit-toolbar{gap:12px;font-size:9px;margin-bottom:9px}.kit-pads button{font-size:9px;padding:12px 4px}
}

/* Keep the closing heading and booking action inside the sticky viewport. */
.outro-pin{box-sizing:border-box;padding:40px var(--pad);gap:32px}
.outro-pin h2{font-size:min(19vw,calc((100svh - 190px)/2.52));flex-shrink:0}
.outro-pin>.pill{flex-shrink:0;min-height:58px;max-width:100%;white-space:normal;text-align:center;position:relative}
@media(max-width:600px){.outro-pin{gap:24px}.outro-pin h2{font-size:min(20vw,calc((100svh - 190px)/2.52))}}