@import url('https://fonts.googleapis.com/css2?family=Alfa+Slab+One&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Titan+One&display=swap');
/* Separate poster exploration. Titan One is an explicitly temporary font. */
:root{--blue:#492377;--cream:#faf6f5;--pink:#edafe7;--hot:#df4340}body{background:var(--cream)}header{border:0;padding:32px 5%;align-items:flex-start}header .brand{font-size:26px}header nav{font-size:13px;gap:25px}.hero{padding:10px 5% 65px;position:relative;overflow:hidden}.hero h1{margin:30px 0 25px;padding:0;line-height:.95;font-family:'Titan One',sans-serif;text-shadow:none;letter-spacing:-.055em;transform:rotate(-1deg)}.hero h1 .big-name{display:block;font-size:17.4vw;letter-spacing:-.065em;margin:0;color:var(--blue);text-shadow:-2px 2px var(--cream),-4px 4px var(--blue),-6px 6px var(--cream),-8px 8px var(--blue),-10px 10px var(--cream),-12px 12px var(--blue)}.hero h1 .equals-name{display:block;margin:28px 0 0;text-align:right;font-family:'DM Sans';font-weight:700;font-size:17px;letter-spacing:0}.poster-stack{position:relative;width:60%;padding:50px 0 30px 8%;z-index:2;pointer-events:none}.poster-stack span{display:table;font-family:'Titan One',sans-serif;font-size:clamp(55px,8vw,120px);letter-spacing:-.055em;line-height:1;padding:8px 28px 16px;border-radius:35px;background:#d6e797;color:#303fbc;transform:rotate(-7deg)}.poster-stack span:nth-child(2){margin:-5px 0 0 65px;background:#f1b4eb;color:var(--blue);transform:rotate(4deg)}.poster-stack span:nth-child(3){margin:-2px 0 0 -10px;background:#db4440;color:#ffe86c;transform:rotate(-3deg);white-space:nowrap}.hero-bottom{display:block;padding:0;min-height:140px}.hero .intro{max-width:500px;width:48%;padding:0;margin:25px 0 0 7%}.intro>p:not(.label){font-size:17px;line-height:1.5}.hero .portrait{position:absolute;width:48%;right:0;top:330px;transform:rotate(7deg);z-index:1}.portrait img{mix-blend-mode:multiply}.social{margin:0;border-radius:0;background:#c1e1f4;grid-template-columns:1.25fr 1fr;gap:12%;padding:80px 9%}.social h2,.voice h2,.piano h2,.radio h2{font-family:'Titan One',sans-serif;text-transform:uppercase;letter-spacing:-.055em;line-height:.95;border:0;box-shadow:none;border-radius:36px;padding:15px 25px 23px;transform:rotate(-4deg)}.social h2{background:#edafe7;color:var(--blue);font-size:7.5vw}.phone{box-shadow:none;border-color:var(--blue);transform:rotate(8deg)}.insta-grid>*{border-radius:25px}.voice{background:#d6e797;padding:85px 7%}.voice h2{background:var(--blue);color:#d6e797;font-size:5.3vw}.wave-player{border-radius:60px;background:var(--blue)}.piano{margin:0;border-radius:0;background:#f2b7e8;padding:90px 7%}.piano h2{background:#dc4541;color:#ffe96c;font-size:8vw;transform:rotate(3deg)}.reel{margin-top:30px;border:0;border-radius:30px}.radio{background:var(--cream);padding:100px 7%}.radio h2{font-size:8vw;background:#bfe0f3;color:var(--blue)}.radio-image img{border-radius:18px}.kens{padding:90px 7%}.contact{background:#d6e797;padding:80px 7%}.contact h2{font-family:'Titan One';text-transform:uppercase;font-size:12vw;letter-spacing:-.06em}.contact h2 span{display:none}.pill{border:0;border-radius:100px;padding:20px 35px}.contact-form input,.contact-form select,.contact-form textarea{border-radius:18px;border:0}.contact-form label{font-weight:700}footer .brand{font-family:'Titan One'}
@media(min-width:1600px){.hero .portrait{top:380px}.hero .intro{max-width:650px}}
@media(max-width:700px){header{padding:22px 6%}header nav{gap:10px 17px;font-size:10px}.hero{padding:0 5% 40px}.hero h1{margin-top:30px}.hero h1 .big-name{font-size:17vw;text-shadow:-1px 1px var(--cream),-2px 2px var(--blue),-3px 3px var(--cream),-4px 4px var(--blue)}.hero h1 .equals-name{font-size:12px;margin-top:18px}.poster-stack{width:100%;padding:30px 0 15px 6%}.poster-stack span{font-size:15vw;padding:8px 18px 12px;border-radius:24px}.poster-stack span:nth-child(2){margin-left:35px}.hero .portrait{position:relative;top:auto;right:auto;width:88%;margin:-12px 0 0 10%;transform:rotate(4deg)}.hero-bottom{display:flex;flex-direction:column-reverse}.hero .intro{width:auto;max-width:none;margin:15px 5% 0}.intro>p:not(.label){font-size:16px}.social{grid-template-columns:1fr;padding:45px 7%;gap:30px}.social h2{font-size:16vw}.voice,.piano,.radio,.kens,.contact{padding:50px 7%}.voice h2{font-size:10vw}.piano h2{font-size:13vw}.radio h2{font-size:16vw}.social h2,.voice h2,.piano h2,.radio h2{border-radius:26px;padding:14px 20px 20px}.contact h2{font-size:17vw}.reel{border-radius:15px}}
.hero h1 .big-name{font-size:16vw;letter-spacing:-.025em;text-shadow:-2px 3px var(--cream),-4px 5px var(--blue)}.poster-stack span{letter-spacing:-.025em}.hero .portrait{max-width:650px}@media(max-width:700px){.hero h1 .big-name{font-size:16vw;letter-spacing:-.025em}.hero .portrait{max-width:none}}
/* Refined invoice palette and alternating editorial layout. */
:root{--blue:#304fa6;--cream:#fbf6ec;--pink:#f19bc9;--hot:#df398f}.hero{display:grid;grid-template-columns:1fr 1fr;gap:25px;align-items:center;padding-top:45px;background:radial-gradient(ellipse at 0% 90%,#f3c7e2,transparent 55%),var(--cream)}.hero-copy h1{font:900 clamp(55px,6.7vw,104px)/1.02 'Roboto Slab',Georgia,serif;letter-spacing:-.065em;text-transform:none;margin:0 0 30px;transform:none}.hero .intro{width:100%;max-width:560px;margin:0;padding:0}.hero-art{position:relative;min-width:0;padding:0 0 145px}.hero .portrait{position:relative;right:auto;top:auto;width:100%;max-width:none;margin:0;transform:none;z-index:0}.poster-stack{position:absolute;left:5%;bottom:0;width:95%;padding:0;z-index:1}.poster-stack span{font-size:clamp(30px,4vw,60px);padding:1px 20px 5px;border-radius:24px;line-height:1.05;background:var(--pink);color:var(--blue)}.poster-stack span:nth-child(2){background:var(--blue);color:var(--cream);margin:-4px 0 0 90px}.poster-stack span:nth-child(3){background:#bacbf4;color:var(--blue);margin:-3px 0 0 130px}.social{background:#edd8eb;align-items:stretch}.social>div{display:flex;flex-direction:column}.social>div>.text-link{margin-top:auto;padding-top:24px}.social .phone-wrap{align-items:center}.social .insta-grid{margin-bottom:12px}.social .phone{transform:rotate(5deg)}.social h2,.voice h2,.piano h2,.radio h2{padding:6px 23px 10px;line-height:1.02}.voice{background:var(--cream)}.voice .two-col{grid-template-columns:1fr 1.2fr}.voice .two-col h2{order:2;background:var(--pink);color:var(--blue);font-size:clamp(35px,4.8vw,70px)}.voice .two-col>div{order:1}.piano{background:#f2c1de}.piano h2{background:var(--blue);color:var(--cream)}.reel-caption p{max-width:660px}.reel-caption .text-link{white-space:nowrap}.radio h2{background:#c4d4f4}.radio-image{background:none;filter:none}.kens{background:#c5d4f3;color:var(--blue)}.kens h2{font:clamp(45px,8vw,112px)/1 'Titan One',sans-serif;letter-spacing:-.04em;display:inline-block;background:var(--cream);padding:6px 25px 12px;border-radius:32px;transform:rotate(-2deg)}.kens-logo{font-family:'Titan One';font-size:100px;color:var(--blue)}.kens .pill{background:var(--blue);color:var(--cream);border:0}.contact{background:radial-gradient(at bottom right,#9faee8,transparent 65%),#f1c7df}.sr-only{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip-path:inset(50%)!important;white-space:nowrap!important;border:0!important}
@media(max-width:700px){.hero{grid-template-columns:1fr;padding-top:25px;gap:20px}.hero-copy h1{font-size:16vw}.hero .intro{margin:0;width:100%}.hero-art{padding-bottom:140px}.hero .portrait{width:100%;margin:0}.poster-stack{width:95%;left:0}.poster-stack span{font-size:10vw}.poster-stack span:nth-child(2){margin-left:50px}.poster-stack span:nth-child(3){margin-left:75px}.voice .two-col{grid-template-columns:1fr}.voice .two-col h2{order:0;font-size:10vw}.voice .two-col>div{order:1}.social>div>.text-link{margin-top:0}.kens h2{font-size:12vw}.kens-logo{font-size:65px}}
.piano-intro{display:flex;align-items:center;justify-content:space-between;gap:35px;margin-bottom:25px}.piano-intro p{max-width:650px}.piano-intro .text-link{white-space:nowrap;margin-top:0}@media(max-width:700px){.piano-intro{display:block}.piano-intro .text-link{margin:20px 0}}
/* Let labels hug their type rather than stretch to the column width. */
.social h2,.voice h2,.piano h2,.radio h2{width:fit-content;max-width:100%;justify-self:start;align-self:flex-start}.voice .two-col{grid-template-columns:1fr 1.3fr;gap:6%}.voice .two-col h2{justify-self:end;font-size:clamp(30px,4.1vw,65px)}
.hero-art{padding-bottom:190px;padding-left:8%}.hero .portrait{width:85%;margin-left:auto}.hero .portrait img{width:100%;height:auto;max-height:540px;object-fit:contain;mix-blend-mode:normal}.poster-stack{left:0;bottom:0;width:100%}.poster-stack span{font-size:clamp(48px,6.2vw,92px);padding:3px 22px 9px;border-radius:30px}.poster-stack span:nth-child(2){margin-left:65px}.poster-stack span:nth-child(3){margin-left:85px}
@media(max-width:700px){.voice .two-col{grid-template-columns:1fr}.voice .two-col h2{justify-self:start;font-size:9.2vw}.hero-art{padding-left:0;padding-bottom:180px}.hero .portrait{width:86%;margin-left:auto}.hero .portrait img{max-height:none}.poster-stack span{font-size:13vw;padding:3px 18px 8px;border-radius:25px}.poster-stack span:nth-child(2){margin-left:35px}.poster-stack span:nth-child(3){margin-left:50px}}
.social{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:45px}.social-column{min-width:0}.live-feed{width:100%;margin:15px 0 25px}.live-feed blockquote{margin:0!important;width:100%!important;max-width:100%!important;min-width:0!important}.live-feed iframe{max-width:100%!important}.social-column:nth-child(2){padding-top:130px}.social-column>.text-link{align-self:flex-start}@media(max-width:700px){.social{grid-template-columns:minmax(0,1fr);gap:40px}.social-column:nth-child(2){padding-top:0}}
/* Cutout artwork and independent typographic labels. */
.hero-art{padding:45px 0 65px;isolation:isolate}.hero .portrait{width:100%;margin:0}.hero .portrait img{max-height:none;display:block;width:100%;height:auto;object-fit:contain}.poster-stack{position:absolute;inset:0;pointer-events:none;width:100%;height:100%}.poster-stack span{position:absolute;margin:0!important;font-size:clamp(38px,5vw,76px);padding:2px 20px 8px}.poster-stack span:nth-child(1){left:0;top:4%;transform:rotate(-12deg)}.poster-stack span:nth-child(2){right:-1%;top:64%;transform:rotate(8deg)}.poster-stack span:nth-child(3){left:0;bottom:1%;transform:rotate(-5deg)}@media(max-width:700px){.hero-art{padding:45px 0 65px}.poster-stack span{font-size:11vw;padding:2px 16px 7px}.poster-stack span:nth-child(1){top:3%;left:0}.poster-stack span:nth-child(2){right:0;top:65%}.poster-stack span:nth-child(3){bottom:3%;left:0}}
.hero-art{padding:0 0 105px}.hero .portrait{width:82%;margin:0 auto;height:550px;overflow:hidden}.hero .portrait img{width:100%;height:100%;object-fit:cover;object-position:center top}.poster-stack{top:auto;bottom:0;height:240px}.poster-stack span{font-size:clamp(45px,6.5vw,95px);padding:2px 25px 8px;white-space:nowrap}.poster-stack span:nth-child(1){top:0;left:0;bottom:auto;transform:rotate(-8deg)}.poster-stack span:nth-child(2){top:65px;right:0;left:auto;transform:rotate(6deg)}.poster-stack span:nth-child(3){top:auto;bottom:0;left:3%;transform:rotate(-3deg)}.social-column:nth-child(2){padding-top:40px;align-items:center}.social .phone{margin:0 auto 25px}.feed-note{font-size:11px;opacity:.7}.feed-details{width:100%;margin:10px 0 25px}.feed-details summary{cursor:pointer;text-decoration:underline;text-underline-offset:5px;font-size:13px}.social .insta-grid{margin-top:30px}.social .insta-grid div{font-size:35px}.social .insta-grid div:first-child{background:var(--blue);color:var(--cream)}@media(max-width:700px){.hero .portrait{height:450px;width:90%}.hero-art{padding-bottom:90px}.poster-stack{height:200px}.poster-stack span{font-size:13vw;padding:3px 18px 8px}.poster-stack span:nth-child(2){top:60px}.poster-stack span:nth-child(3){left:0}.social-column:nth-child(2){padding-top:0}}
/* A single interlocking label composition covers the portrait's lower edge. */
.hero-art{padding-bottom:65px}.poster-stack{left:0;right:0;bottom:5px;top:auto;width:100%;height:205px}.poster-stack span{box-sizing:border-box;text-align:center;line-height:1.02;padding:6px 12px 12px;font-size:clamp(35px,4.6vw,70px);border-radius:28px}.poster-stack span:nth-child(1){left:0;right:auto;top:0;bottom:auto;width:49%;transform:rotate(-7deg);z-index:3}.poster-stack span:nth-child(2){right:0;left:auto;top:12px;bottom:auto;width:54%;transform:rotate(6deg);z-index:2}.poster-stack span:nth-child(3){left:0;right:0;bottom:0;top:auto;width:100%;font-size:clamp(48px,6.4vw,98px);padding:12px 10px 18px;transform:rotate(-2deg);z-index:1}.hero .portrait{height:550px}@media(max-width:700px){.hero-art{padding-bottom:45px}.hero .portrait{height:440px}.poster-stack{height:170px;bottom:0}.poster-stack span{font-size:10.5vw;border-radius:24px;padding:6px 8px 10px}.poster-stack span:nth-child(1){top:0}.poster-stack span:nth-child(2){top:8px}.poster-stack span:nth-child(3){font-size:14.2vw;padding:12px 8px 16px}}
.poster-stack{height:150px;bottom:20px}.poster-stack span:nth-child(2){top:5px}.poster-stack span:nth-child(3){bottom:0;padding-top:18px}.hero-art{padding-bottom:55px}@media(max-width:700px){.poster-stack{height:135px;bottom:10px}.poster-stack span:nth-child(2){top:5px}.hero-art{padding-bottom:45px}}
/* Connected label composition: all geometry scales with the photograph. */
.hero-art{container-type:inline-size;padding:0 0 42px}
.hero .portrait{height:auto;aspect-ratio: .76;width:86%;margin:0 auto;border-radius:0}
.hero .portrait img{object-fit:cover;object-position:top}
.poster-stack{inset:auto 0 0;height:34cqw;width:100%;isolation:isolate}
.poster-stack span{position:absolute;border-radius:5cqw;padding:1cqw 2cqw 2cqw;line-height:1;letter-spacing:-.035em;margin:0!important}
.poster-stack span:nth-child(1){left:2%;right:auto;top:0;bottom:auto;width:49%;font-size:11.5cqw;transform:rotate(-8deg);z-index:3}
.poster-stack span:nth-child(2){left:auto;right:0;top:2cqw;bottom:auto;width:55%;font-size:11.5cqw;transform:rotate(6deg);z-index:2}
.poster-stack span:nth-child(3){left:0;right:auto;top:12cqw;bottom:auto;width:100%;padding:2cqw 1cqw 3cqw;font-size:16cqw;transform:rotate(-3deg);z-index:4}
.label-rays{position:absolute;left:-7%;bottom:-4%;width:114%;height:auto;overflow:visible;z-index:5;pointer-events:none;fill:none;stroke:var(--blue);stroke-width:5;stroke-linecap:round}
.real-phone{position:relative;width:min(100%,320px);height:auto;aspect-ratio:9/18;overflow:hidden;background:#10101b;transform:rotate(3deg)!important;display:flex;flex-direction:column;padding:38px 0 0!important}
.real-phone .island{z-index:3}.real-phone .phone-handle{position:absolute;top:17px;left:0;width:100%;text-align:center;color:white;font-size:11px}.tiktok-screen{flex:1;min-height:0;width:100%;position:relative}.tiktok-screen iframe{width:100%;height:100%;border:0;display:block}.real-phone .phone-controls{position:static;display:flex;align-items:center;justify-content:space-around;gap:4px;background:var(--blue);padding:10px 7px;color:white}.real-phone button{border:0;background:transparent;color:var(--cream);font:700 13px 'DM Sans',sans-serif;cursor:pointer;min-height:34px;min-width:32px}.real-phone button:focus-visible{outline:2px solid var(--pink);border-radius:5px}.real-phone .phone-controls button:first-child{min-width:85px}.insta-grid a{display:block;overflow:hidden;border-radius:25px;aspect-ratio:1}.insta-grid a img{width:100%;height:100%;object-fit:cover}.social-column #video-original{margin-bottom:20px}.social-column .feed-note{min-height:16px}
@media(max-width:700px){.hero-art{padding-bottom:32px}.hero .portrait{height:auto;width:86%}.poster-stack{height:34cqw;bottom:0}.label-rays{bottom:-4%}}
.poster-stack span:nth-child(3){top:13cqw;z-index:1}
.real-phone{padding-top:50px!important}.real-phone .island{top:7px;width:64px;height:10px}.real-phone .phone-handle{top:26px}
@media(max-width:700px){.label-rays{width:106%;left:-3%}}

/* Blue phone shell; no decorative speaker obscuring the account name. */
.real-phone{background:var(--blue);padding-top:38px!important}.real-phone .island{display:none}.real-phone .phone-handle{top:12px;color:var(--cream);line-height:18px}
/* Keep the full player visible: the blue shell must not overlay the video. */
.real-phone .tiktok-screen::after{content:none}
.real-phone .phone-handle{display:none}

/* Refine the label overlap and leave air around the lower accent rays. */
.poster-stack span:nth-child(1){top:1.6cqw}
.poster-stack span:nth-child(2){transform:rotate(2deg)}

/* Invoice wordmark: embedded PDF font AlfaSlabOne-Regular. */
header .brand,footer .brand,.hero-copy h1{font-family:"Alfa Slab One",serif;font-weight:400;letter-spacing:-.045em}
.poster-stack span:nth-child(2){top:.5cqw}

/* Keep all header controls on the same baseline at desktop/tablet widths. */
header{align-items:center}
@media(min-width:701px){header{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:20px;align-items:center}header nav{order:initial;width:auto;justify-content:center;gap:12px 18px}header .languages{margin-left:0}}
.poster-stack span:nth-child(2){top:2cqw}

/* Two mounted players reveal each other like a scrolling poster. */
.tiktok-screen{overflow:hidden;isolation:isolate}
.tiktok-screen iframe{position:absolute;inset:0;transition:transform 650ms cubic-bezier(.65,0,.35,1);will-change:transform}
.tiktok-screen .queued-video,.tiktok-screen .exit-below{transform:translateY(100%)}
.tiktok-screen .enter-above,.tiktok-screen .exit-above{transform:translateY(-100%)}
.tiktok-screen .active-video{transform:translateY(0)}
@media(prefers-reduced-motion:reduce){.tiktok-screen iframe{transition:none}}

/* Mirrored service introductions with equal display type sizes. */
.voice .two-col{grid-template-columns:minmax(0,1fr) minmax(0,1.8fr);gap:5%;align-items:center}
.voice .two-col h2,.piano h2{font-size:clamp(40px,7.2vw,104px);width:max-content;max-width:100%;letter-spacing:-.055em}
.piano-heading-row{display:grid;grid-template-columns:minmax(0,1.8fr) minmax(0,1fr);gap:5%;align-items:center}
.piano-intro p{margin-top:0}.piano-intro{min-width:0}
.kens-preview{display:block;overflow:hidden;border-radius:24px;transform:rotate(-2deg)}
.kens-preview img{display:block;width:100%;height:auto}
@media(max-width:700px){.voice .two-col,.piano-heading-row{grid-template-columns:1fr;gap:24px}.voice .two-col h2,.piano h2{font-size:11vw}.voice .two-col h2{order:0}.voice .two-col>div{order:1}.kens-preview{margin:12px 0}}
.piano-heading-row .piano-intro{display:block;width:auto}.piano-heading-row .piano-intro p{width:auto;max-width:none}.piano-heading-row .piano-intro .text-link{margin-top:22px}

/* KENS wordmark treatment, using Nepstah's palette. */
.kens{background:radial-gradient(ellipse at 95% 15%,#f1c7df 0,transparent 58%),#c5d4f3}
.kens h2{font-family:'Archivo Black','DM Sans',sans-serif;font-size:clamp(48px,8vw,112px);font-weight:400;letter-spacing:-.075em;line-height:1;background:var(--blue);color:var(--cream);border-radius:28px;padding:14px 26px 18px;transform:rotate(-2deg)}
.kens-dot{color:var(--pink)}
.kens .two-col{grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);gap:7%;align-items:center}
.kens .two-col>div{grid-column:1;grid-row:1}.kens .kens-preview{grid-column:2;grid-row:1;transform:rotate(2deg)}
@media(max-width:700px){.kens h2{font-size:11.5vw;padding:12px 18px 16px;border-radius:22px}.kens .two-col{grid-template-columns:1fr;gap:25px}.kens .two-col>div,.kens .kens-preview{grid-column:auto;grid-row:auto}.kens .two-col>div{order:0}.kens .kens-preview{order:1}}
/* Reverse the three service-heading tilts. */
.voice .two-col h2{transform:rotate(4deg)}
.piano h2{transform:rotate(-3deg)}
.radio h2{transform:rotate(4deg)}
/* Restore the original concept's stronger colour blocks. */
:root{--blue:#304fa6;--cream:#fbf6ec;--pink:#f19bc9;--hot:#df398f;--green:#dce4b8}
.hero{background:var(--cream)}
.social{background:var(--green)}
.social h2{background:var(--blue);color:var(--cream)}
.voice{background:var(--cream)}
.voice .two-col h2{background:var(--pink);color:var(--blue)}
.piano{background:var(--pink)}
.piano h2{background:var(--cream);color:var(--blue)}
.radio{background:var(--cream)}
.radio h2{background:var(--green);color:var(--blue)}
.poster-stack span:nth-child(3){background:var(--green);color:var(--blue)}
.kens{background:radial-gradient(ellipse at 85% 20%,#61345d 0,transparent 48%),radial-gradient(ellipse at 85% 90%,#53442d 0,transparent 45%),radial-gradient(ellipse at 10% 90%,#123b32 0,transparent 50%),#111318;color:#f4f2e9}
.kens h2{background:var(--cream);color:var(--blue)}
.kens h2 .kens-dot{color:var(--hot)}
.kens .text-link{color:#dbff75}
.contact{background:var(--pink)}

/* Clear blue accent in place of pale green. */
:root{--green:#a9cffa}
/* Pink accent for Qmusic, matching the site palette. */
.radio h2{background:var(--pink);color:var(--blue)}
/* Invoice-inspired colour wash: pink left, cream right, violet and blue below. */
.hero{background:radial-gradient(ellipse at 68% 115%,rgba(89,119,241,.66) 0,transparent 55%),radial-gradient(ellipse at 0% 100%,rgba(177,103,226,.65) 0,transparent 60%),linear-gradient(105deg,#e99bc9 0%,#f1c7d6 38%,#faebd7 75%,#f4f0d8 100%)}
/* Unequal label sizes give the hero a more natural visual rhythm. */
.poster-stack span:nth-child(1){width:54%;font-size:12.5cqw}
.poster-stack span:nth-child(2){width:49%;font-size:10cqw;top:4cqw}
/* A quieter social backdrop lets the cobalt accents stand out. */
.social{background:#f5e3e8}
/* Small position-only adjustment; preserve the label sizes. */
.poster-stack span:nth-child(1){top:calc(1.6cqw - 3px)}
.poster-stack span:nth-child(2){top:calc(4cqw - 8px)}
/* Shift only the portrait; keep the labels in place. */
.hero .portrait{transform:translateX(-18px) rotate(5deg)}
.poster-stack span:nth-child(3){background:var(--cream);color:var(--blue)}

.music-label-text{display:block;font:inherit;transform:translateY(3px)}

.right-label-rays{translate:2px 10px}

/* Voiceover leads after the hero; socials follow on warm white. */
.voice{background:#f5e3e8}
.social{background:var(--cream)}

/* Six portrait Instagram cards, with our own framing. */
.social #instagram-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;max-width:none;width:100%;align-items:stretch}
.social #instagram-grid>a{display:block;aspect-ratio:4/5;border:4px solid var(--blue);border-radius:18px;padding:0;overflow:hidden;background:var(--pink)}
.social #instagram-grid>a:nth-child(even){border-color:var(--pink)}
.social #instagram-grid img{display:block;width:100%;height:100%;object-fit:cover;border-radius:0;aspect-ratio:auto}
@media(max-width:700px){.social #instagram-grid{gap:9px}.social #instagram-grid>a{border-width:3px;border-radius:12px}}

/* Alternate service introductions: Voiceover left, Pianobar right. */
.voice .two-col{grid-template-columns:minmax(0,1.8fr) minmax(0,1fr)}
.voice .two-col h2{order:0;transform:rotate(-4deg)}
.voice .two-col>div{order:1}
.piano-heading-row{grid-template-columns:minmax(0,1fr) minmax(0,1.8fr)}
.piano-heading-row .piano-intro{order:0}
.piano-heading-row .piano-title{order:1;justify-content:flex-end}
@media(max-width:700px){.voice .two-col,.piano-heading-row{grid-template-columns:1fr}.piano-heading-row .piano-title{order:0;justify-content:flex-start}.piano-heading-row .piano-intro{order:1}}
/* Give the voice introduction more room beside its heading. */
.voice .two-col{grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:7%}
.voice .two-col h2{font-size:clamp(34px,5.4vw,78px)}
.piano h2{transform:rotate(3deg)}
@media(max-width:700px){.voice .two-col{grid-template-columns:1fr;gap:24px}.voice .two-col h2{font-size:9.5vw}}
/* More generous reading widths and clearer calls to action. */
.section p:not(.feed-note):not(.form-note):not(.sr-only){font-size:20px;line-height:1.6}
.section .text-link{font-size:22px;line-height:1.35}
.voice .two-col{grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:5%}
.voice .two-col h2{font-size:clamp(38px,6.3vw,91px);justify-self:start;text-align:left}
.two-col p,.piano-intro p{max-width:none}
.piano-heading-row{grid-template-columns:minmax(0,1fr) minmax(0,1.25fr);gap:5%}
.radio{grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:5%}
.kens .two-col{grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:5%}
@media(max-width:900px) and (min-width:701px){.voice .two-col,.piano-heading-row{grid-template-columns:1fr;gap:25px}.voice .two-col h2{font-size:7.5vw}.piano-heading-row .piano-title{order:0}.piano-heading-row .piano-intro{order:1;max-width:640px}}
@media(max-width:700px){.voice .two-col,.piano-heading-row,.radio,.kens .two-col{grid-template-columns:1fr;gap:25px}.voice .two-col h2{font-size:10.4vw}.section p:not(.feed-note):not(.form-note):not(.sr-only){font-size:19px}.section .text-link{font-size:21px}.kens .two-col>div,.kens .kens-preview{grid-column:auto;grid-row:auto}}

/* Keep the name and equals sign together at every width. */
.hero-copy h1 .name-line{display:inline-block;white-space:nowrap;margin-left:0}
.hero-copy h1 br{display:block}
.hero-copy h1{font-size:clamp(48px,6.3vw,96px)}
/* Calm, balanced two-column sections with copy grouped under its heading. */
.piano{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:7%;align-items:center}
.piano-copy{min-width:0}
.piano .piano-copy h2{font-size:clamp(38px,5.2vw,76px);margin-bottom:32px;max-width:100%}
.piano .piano-intro{display:block;width:auto;max-width:none}
.piano .piano-intro p{max-width:none}
.piano .reel{width:100%;margin:0;aspect-ratio:16/9;min-width:0}
@media(max-width:700px){.hero-copy h1{font-size:14vw}.piano{grid-template-columns:1fr;gap:32px}.piano .piano-copy h2{font-size:10.5vw}}

.voice .two-col{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:7%;align-items:center}
.voice .two-col h2{font-size:clamp(38px,5.8vw,84px)}
.radio h2{font-size:clamp(42px,6vw,86px)}
.kens h2{font-size:clamp(42px,6vw,86px)}
@media(max-width:700px){.voice .two-col{grid-template-columns:1fr;gap:24px}.voice .two-col h2{font-size:10.4vw}.radio h2,.kens h2{font-size:12vw}}
.voice .two-col h2{white-space:nowrap;font-size:clamp(32px,5.1vw,74px)}
@media(max-width:700px){.voice .two-col h2{font-size:10.4vw}}
/* Wordmark-style headings; coloured bubbles now belong to actions. */
.voice .two-col h2,.piano .piano-copy h2,.radio h2,.kens h2,.contact h2{
 font-family:'Alfa Slab One',serif;font-weight:400;letter-spacing:-.045em;line-height:1.08;
 background:none;border:0;border-radius:0;box-shadow:none;padding:0;transform:none;
 text-transform:none;color:var(--blue)
}
.voice .two-col h2{font-size:clamp(30px,4.2vw,60px)}
.piano .piano-copy h2{font-size:clamp(36px,4.6vw,66px)}
.radio h2,.kens h2{font-size:clamp(40px,5.5vw,80px)}
.kens h2{color:var(--cream)}
.contact h2{font-size:clamp(56px,8vw,115px)}
.voice .text-link,.piano .text-link,.radio .text-link,.kens .text-link{
 display:inline-block;width:fit-content;padding:12px 22px 15px;border-radius:23px;
 font-family:'Titan One',sans-serif;font-size:22px;line-height:1.15;letter-spacing:-.025em;
 text-decoration:none;background:var(--blue);color:var(--cream);transform:rotate(-2deg)
}
.voice .text-link{background:var(--pink);color:var(--blue)}
.piano .text-link{transform:rotate(2deg)}
.radio .text-link{background:var(--pink);color:var(--blue)}
.kens .text-link{background:var(--cream);color:var(--blue);transform:rotate(2deg)}
.piano .reel{border-radius:8px}
.social #instagram-grid>a{border-radius:7px}
@media(max-width:700px){.voice .two-col h2{font-size:8.6vw}.piano .piano-copy h2{font-size:10vw}.radio h2,.kens h2{font-size:11vw}.voice .text-link,.piano .text-link,.radio .text-link,.kens .text-link{font-size:21px}.social #instagram-grid>a{border-radius:6px}}
/* Lowercase headings echo the nepstah wordmark. */
.voice .two-col h2,.piano .piano-copy h2,.social h2,.radio h2,.kens h2,.contact h2{text-transform:lowercase}
.piano .text-link,.kens .text-link{transform:rotate(-2deg)}
.radio .text-link{transform:rotate(2deg)}

.kens h2 .kens-dot{color:#dbff75}
.piano{grid-template-columns:minmax(0,1.1fr) minmax(0,1fr)}
.piano .reel{grid-column:1;grid-row:1}
.piano .piano-copy{grid-column:2;grid-row:1}
.voice-booking{margin-top:24px;text-align:right}
.voice-booking .text-link{margin-top:0}
@media(max-width:700px){.piano{grid-template-columns:1fr}.piano .piano-copy{grid-column:1;grid-row:1}.piano .reel{grid-column:1;grid-row:2}.voice-booking{text-align:left}}

.radio h2{text-transform:none}

/* Voiceover copy and booking on the left, audio alongside on the right. */
.voice-layout{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:7%;align-items:center}
.voice-copy,.voice-audio{min-width:0}
.voice .voice-copy h2{font-family:'Alfa Slab One',serif;font-weight:400;font-size:clamp(30px,4.2vw,60px);letter-spacing:-.045em;line-height:1.08;text-transform:lowercase;background:none;color:var(--blue);padding:0;border:0;box-shadow:none;transform:none;margin:0 0 28px}
.voice-copy p{max-width:none}
.voice-audio .wave-player{margin:0;padding:24px;gap:16px;flex-wrap:wrap}
.voice-audio .wave-track{min-width:60%}
.voice-audio #wave-time{margin-left:74px}
@media(max-width:700px){.voice-layout{grid-template-columns:1fr;gap:35px}.voice .voice-copy h2{font-size:8.6vw}.voice-audio #wave-time{margin-left:58px}}
.piano .text-link{transform:rotate(2deg)}

/* Full-width waveform under a balanced heading and introduction row. */
.voice-layout{grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:7%;row-gap:35px}
.voice-description{min-width:0}
.voice-description p{margin-top:0;max-width:none}
.voice .voice-copy h2{margin:0}
.voice-audio{grid-column:1/-1}
.voice-audio .wave-player{padding:25px 30px;gap:22px;flex-wrap:nowrap}
.voice-audio .wave-track{min-width:0}
.voice-audio #wave-time{margin-left:0}
@media(max-width:700px){.voice-layout{grid-template-columns:1fr;gap:25px}.voice-audio .wave-player{padding:20px;gap:12px;flex-wrap:wrap}.voice-audio .wave-track{min-width:65%}.voice-audio #wave-time{margin-left:54px}}
/* Keep the introduction left, with open space alongside and a full-width player. */
.voice-layout{row-gap:24px}
.voice-copy{grid-column:1;grid-row:1}
.voice-description{grid-column:1;grid-row:2}
.voice-audio{grid-column:1/-1;grid-row:3}

/* Consistent spacing outside the approved hero and social sections. */
.voice.section,.piano.section,.kens.section,.radio.section,.contact.section{padding:80px 7%;margin:0}
.voice-layout,.piano,.radio,.kens .two-col{column-gap:6%}
.voice-layout{row-gap:24px}
.voice .voice-copy h2,.piano .piano-copy h2,.radio h2,.kens h2,.contact h2{margin:0 0 24px}
.voice .voice-copy h2{margin-bottom:0}
.voice-description p,.piano-intro p,.radio>div>p,.kens .two-col p{margin:0;line-height:1.6}
.voice .text-link,.piano .text-link,.radio .text-link,.kens .text-link{position:relative;margin:28px 0 0;padding:13px 23px 16px}
.voice-audio{margin-top:16px}
.kens h2{margin-bottom:36px}
/* Three detached strokes echo the hero without adding arrow icons. */
.voice .text-link::after,.piano .text-link::after,.radio .text-link::after,.kens .text-link::after{content:"";position:absolute;width:30px;height:36px;right:-39px;top:50%;margin-top:-18px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 36'%3E%3Cg fill='none' stroke='%23304fa6' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='M4 9 11 2M9 18h17M4 27l7 7'/%3E%3C/g%3E%3C/svg%3E") center/contain no-repeat;pointer-events:none}
.kens .text-link::after{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 36'%3E%3Cg fill='none' stroke='%23fbf6ec' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='M4 9 11 2M9 18h17M4 27l7 7'/%3E%3C/g%3E%3C/svg%3E")}
.contact-form{margin-top:0}.contact-form label{margin:0 0 24px}.contact-form .form-grid{gap:24px}.contact .form-submit{margin-top:8px}.contact .form-note{margin:0}
@media(max-width:700px){.voice.section,.piano.section,.kens.section,.radio.section,.contact.section{padding:52px 7%}.voice-layout{row-gap:20px}.piano,.radio,.kens .two-col{row-gap:32px}.voice .voice-copy h2,.piano .piano-copy h2,.radio h2,.kens h2,.contact h2{margin-bottom:20px}.voice .voice-copy h2{margin-bottom:0}.voice .text-link,.piano .text-link,.radio .text-link,.kens .text-link{margin-top:24px;max-width:calc(100% - 40px)}.kens h2{margin-bottom:28px}.contact-form .form-grid{gap:0}}

/* Matching detached strokes on both sides of section actions. */
.voice .text-link::before,.piano .text-link::before,.radio .text-link::before,.kens .text-link::before{content:"";position:absolute;width:30px;height:36px;left:-39px;top:50%;margin-top:-18px;transform:scaleX(-1);background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 36'%3E%3Cg fill='none' stroke='%23304fa6' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='M4 9 11 2M9 18h17M4 27l7 7'/%3E%3C/g%3E%3C/svg%3E") center/contain no-repeat;pointer-events:none}
.kens .text-link::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 36'%3E%3Cg fill='none' stroke='%23fbf6ec' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='M4 9 11 2M9 18h17M4 27l7 7'/%3E%3C/g%3E%3C/svg%3E")}
.social-column:nth-child(2)>.text-link{align-self:flex-end;text-align:right}
.social-column>.text-link::after{content:"";display:inline-block;width:9px;height:9px;margin-left:10px;border-radius:50%;background:var(--pink);vertical-align:middle}
.social-column:nth-child(2)>.text-link::after{background:var(--blue)}
@media(max-width:700px){.voice .text-link,.piano .text-link,.radio .text-link,.kens .text-link{margin-left:18px;max-width:calc(100% - 58px)}.voice .text-link::before,.piano .text-link::before,.radio .text-link::before,.kens .text-link::before{width:22px;left:-28px}}
/* Right-column actions: keep the decorative strokes clear of adjacent media. */
.piano .piano-intro .text-link,.radio .text-link{display:table;margin-left:auto;margin-right:40px;max-width:calc(100% - 80px)}
@media(max-width:700px){.piano .piano-intro .text-link,.radio .text-link{margin-left:auto;margin-right:32px;max-width:calc(100% - 64px)}}
/* Keep profile links visually tied to their feeds. */
.social-column:nth-child(2)>.text-link{align-self:center;text-align:center}
.social-column:first-child>.text-link{color:var(--hot)}
.social-column:first-child>.text-link::after{background:currentColor}
.social #instagram-grid>a,.social #instagram-grid>a:nth-child(even){border-color:var(--blue)}
/* Halfway between the original left position and the right-aligned inset. */
.piano .piano-intro .text-link,.radio .text-link{margin-left:0;margin-right:0;left:calc(50% - 20px);transform:translateX(-50%) rotate(2deg)}
@media(max-width:700px){.piano .piano-intro .text-link,.radio .text-link{left:calc(50% - 16px)}}

/* Compact demo card alongside the voice introduction. */
.voice-layout{grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:7%;row-gap:24px;align-items:start}
.voice-copy{grid-column:1;grid-row:1}
.voice-description{grid-column:1;grid-row:2}
.voice-audio{grid-column:2;grid-row:1 / 3;align-self:center;margin-top:0;min-width:0;padding:8px}
.voice-audio .demo-card{display:grid;grid-template-columns:72px minmax(0,1fr);gap:28px 22px;padding:32px;border-radius:24px;transform:rotate(2deg);background:var(--blue);min-height:240px}
.demo-card-label{grid-column:1/-1;font:400 clamp(25px,3vw,38px)/1.1 'Alfa Slab One',serif;letter-spacing:-.04em;color:var(--cream)}
.voice-audio .demo-card #wave-play{width:72px;height:72px;grid-column:1;align-self:center;font-size:26px}
.voice-audio .demo-card .wave-track{grid-column:2;width:100%;min-width:0;align-self:center}
.voice-audio .demo-card .wave{height:90px;gap:1px;overflow:hidden}
.voice-audio .demo-card .wave i{min-width:1px;flex:1;background:var(--pink)}
.voice-audio .demo-card .wave i.played{background:var(--cream)}
.voice-audio .demo-card #wave-time{grid-column:2;margin:0;font-size:13px;color:var(--cream)}
@media(max-width:700px){.voice-layout{grid-template-columns:1fr}.voice-audio{grid-column:1;grid-row:3;padding:6px;margin-top:12px}.voice-audio .demo-card{padding:26px;gap:22px 16px;grid-template-columns:60px minmax(0,1fr);min-height:220px}.voice-audio .demo-card #wave-play{width:60px;height:60px}.voice-audio .demo-card .wave-track{min-width:0;width:100%}}

/* A single visual focus: playback, waveform and a quiet time readout. */
.voice-audio .demo-card{min-height:190px;grid-template-rows:auto auto;row-gap:8px;padding:32px}
.voice-audio .demo-card #wave-play{grid-row:1 / 3}
.voice-audio .demo-card .wave-track{grid-row:1}
.voice-audio .demo-card #wave-time{grid-row:2;justify-self:end;font-size:11px;opacity:.8;line-height:1.2}
@media(max-width:700px){.voice-audio .demo-card{min-height:170px;padding:26px}}

/* Edge-to-edge waveform with an overlay control and vertical progress rail. */
.voice-audio .demo-card{position:relative;display:block;padding:32px 38px 32px 24px;min-height:190px;--audio-progress:0}
.voice-audio .demo-card .wave-track{width:100%;min-width:0;height:126px}
.voice-audio .demo-card .wave{height:126px;align-items:center}
.voice-audio .demo-card #wave-play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);margin:0;z-index:3;transition:opacity .25s,box-shadow .25s;box-shadow:0 0 0 9px var(--blue)}
.voice-audio .demo-card.is-playing #wave-play{opacity:.12;box-shadow:none}
.voice-audio .demo-card.is-playing:hover #wave-play,.voice-audio .demo-card.is-playing:focus-within #wave-play{opacity:1;box-shadow:0 0 0 9px var(--blue)}
.voice-audio .demo-card::before,.voice-audio .demo-card::after{content:"";position:absolute;right:17px;top:32px;bottom:32px;width:4px;border-radius:4px;pointer-events:none}
.voice-audio .demo-card::before{background:rgba(251,246,236,.22)}
.voice-audio .demo-card::after{background:var(--cream);transform-origin:bottom;transform:scaleY(var(--audio-progress))}
@media(max-width:700px){.voice-audio .demo-card{padding:26px 34px 26px 20px;min-height:178px}.voice-audio .demo-card::before,.voice-audio .demo-card::after{top:26px;bottom:26px;right:14px}}
/* The waveform alone shows progress; playback control stays visible. */
.voice-audio .demo-card,.voice-audio .demo-card.is-playing{padding:32px 24px}
.voice-audio .demo-card.is-playing #wave-play{opacity:1;box-shadow:0 0 0 9px var(--blue)}
.voice-audio .demo-card::before,.voice-audio .demo-card::after{content:none}
@media(max-width:700px){.voice-audio .demo-card{padding:26px 20px}}

/* During playback the whole waveform remains a seek target. */
.voice-audio .demo-card.is-playing #wave-play,
.voice-audio .demo-card.is-playing:hover #wave-play,
.voice-audio .demo-card.is-playing:focus-within #wave-play{opacity:0;pointer-events:none;box-shadow:none}
.voice-audio .demo-card #wave-play{transition:opacity .6s ease}
#wave-pause{position:absolute;right:18px;bottom:10px;display:flex;gap:7px;align-items:center;border:0;background:none;color:var(--cream);font:600 13px 'DM Sans',sans-serif;padding:6px 10px;border-radius:10px;cursor:pointer}
#wave-pause[hidden]{display:none}
#wave-pause:focus-visible{outline:2px solid var(--cream);outline-offset:2px}

/* Give the Pianobar reel the same tactile framing as the audio card. */
.piano .reel{border:7px solid var(--blue);border-radius:12px;transform:rotate(-2deg);box-sizing:content-box;width:calc(100% - 14px);overflow:hidden}
@media(max-width:700px){.piano .reel{border-width:5px;width:calc(100% - 10px)}}

/* Offset the reel below the heading top, echoing the audio card. */
.piano .reel{align-self:start;margin-top:60px}
@media(max-width:700px){.piano .reel{margin-top:0}}
/* Center the Socials bubble over the Instagram grid. */
.social-column:first-child>h2{align-self:center;margin-left:auto;margin-right:auto}

/* Preserve the new studio portrait’s full composition. */
.radio .radio-image img{width:100%;height:auto;aspect-ratio:3/2;object-fit:contain}

/* Match the Qmusic portrait to the framed, tilted media cards. */
.radio .radio-image img{box-sizing:border-box;border:7px solid var(--blue);border-radius:12px;transform:rotate(-2deg)}
@media(max-width:700px){.radio .radio-image img{border-width:5px}}

/* Let the photograph determine its height, avoiding contain letterboxing. */
.radio .radio-image img{aspect-ratio:auto;display:block}

/* A slightly larger, left-aligned Socials heading. */
.social-column:first-child>h2{align-self:flex-start;margin-left:0;margin-right:0;font-size:clamp(48px,8.2vw,118px)}
@media(max-width:700px){.social-column:first-child>h2{font-size:17.5vw}}

/* Keep the Pianobar title on one line within its column. */
.piano .piano-copy h2{font-size:clamp(24px,3.4vw,49px);white-space:nowrap}
@media(max-width:700px){.piano .piano-copy h2{font-size:7vw}}

[hidden]{display:none!important}.contact-trap{position:absolute!important;left:-10000px!important;width:1px!important;height:1px!important;overflow:hidden}.piano .reel video{display:block;width:100%;height:100%;object-fit:contain}

/* Responsive alignment: fixed action inset, shared copy edge, fluid phone. */
.hero{padding-left:7%}
.hero .intro>p:not(.label){font-size:20px;line-height:1.6}
.social .real-phone{width:65%;max-width:none;height:auto;flex-shrink:0}
.piano .piano-intro .text-link,.radio .text-link{left:auto;margin-left:40px;margin-right:0;transform:rotate(2deg)}
@media(max-width:700px){
 .hero .intro>p:not(.label){font-size:19px}
 .social .real-phone{width:85%;max-width:none}
 .piano .piano-intro .text-link,.radio .text-link{left:auto;margin-left:28px;margin-right:0}
}
/* Pianobar: a branded cover first, then a minimal control strip below the video. */
.piano .reel{aspect-ratio:auto;background:var(--blue)}
.reel-cover,.reel-stage{position:relative;display:block;width:100%;aspect-ratio:16/9;min-height:200px}
.reel-cover img{display:block;width:100%;height:100%;position:absolute;inset:0;object-fit:cover}
.reel-play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);display:grid;place-items:center;width:72px;height:72px;padding:0;border:2px solid var(--cream);border-radius:50%;background:var(--cream);color:var(--blue);font:400 26px 'DM Sans',sans-serif;box-shadow:0 0 0 9px var(--blue);transition:scale .2s}
.reel-cover:hover .reel-play{scale:1.06}.reel-cover[aria-busy=true] .reel-play{opacity:.65}
.reel-stage iframe{position:absolute;inset:0;display:block;width:100%;height:100%}
.reel-controls{display:flex;align-items:center;gap:12px;padding:8px 14px;color:var(--cream);min-height:48px}
.reel-controls button{border:0;background:none;color:var(--cream);min-width:32px;min-height:32px;font-size:20px;padding:0}
.reel-controls input{accent-color:var(--pink);cursor:pointer;min-width:0;height:24px;margin:0}
.reel-seek{flex:1}.reel-volume{width:65px}.reel-fallback{display:block;padding:12px;color:var(--cream);text-decoration:underline}
@media(prefers-reduced-motion:reduce){.reel-play{transition:none}}

/* A narrower shared content frame, including the complete contact form. */
:root{--page-gutter:max(9%,calc((100% - 1320px)/2))}
header,.hero,.voice.section,.piano.section,.social.section,.kens.section,.radio.section,.contact.section,footer{padding-left:var(--page-gutter);padding-right:var(--page-gutter)}
.contact-form{width:100%;max-width:none;min-width:0}
.contact-form .form-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.contact-form input,.contact-form select,.contact-form textarea{display:block;width:100%;min-width:0}
@media(max-width:700px){:root{--page-gutter:7%}.contact-form .form-grid{grid-template-columns:1fr}}

@media(max-width:700px){.reel-play{width:60px;height:60px}}

/* Pause returns to the cover without moving or resizing the video card. */
.reel-stage>.reel-cover{position:absolute;inset:0;z-index:2;opacity:1;visibility:visible;transform:scale(1);transition:opacity .5s ease,transform .5s ease,visibility 0s}
.reel-playing .reel-stage>.reel-cover{opacity:0;visibility:hidden;pointer-events:none;transform:scale(1.035);transition:opacity .5s ease,transform .5s ease,visibility 0s .5s}
@media(prefers-reduced-motion:reduce){.reel-stage>.reel-cover,.reel-playing .reel-stage>.reel-cover{transition:none;transform:none}}

/* Collapse the control strip along with the paused-cover transition. */
.reel-controls{max-height:0;min-height:0;padding:0 14px;opacity:0;overflow:hidden;pointer-events:none;transition:max-height .5s ease,padding .5s ease,opacity .3s ease}
.reel-playing .reel-controls{max-height:64px;padding:8px 14px;opacity:1;pointer-events:auto}
@media(prefers-reduced-motion:reduce){.reel-controls{transition:none}}

footer>span{margin-left:auto;text-align:right} .hero .intro{max-width:480px}

/* Text navigation stays visible at every width. */
header nav{display:flex;flex-wrap:nowrap;min-width:0}header nav a{white-space:nowrap;flex-shrink:0}
@media(max-width:1050px){
 header{display:grid;grid-template-columns:1fr auto;gap:18px;align-items:center}
 header .brand{grid-column:1;grid-row:1}
 header .languages{grid-column:2;grid-row:1;margin-left:0}
 header nav{grid-column:1/-1;grid-row:2;display:flex;order:initial;width:100%;justify-content:space-between;align-items:center;gap:clamp(4px,1.5vw,18px);font-size:clamp(8px,2.35vw,13px);padding:4px 0;overflow:visible}
}
@media(max-width:700px){.radio.section>div:not(.radio-image){grid-row:1}.radio.section>.radio-image{grid-row:2}}

@media(min-width:701px){
 .voice[data-layout="flipped"] .voice-copy,.voice[data-layout="flipped"] .voice-description{grid-column:2}
 .voice[data-layout="flipped"] .voice-audio{grid-column:1;grid-row:1/3}
 .piano[data-layout="flipped"] .piano-copy{grid-column:1;grid-row:1}
 .piano[data-layout="flipped"] .reel{grid-column:2;grid-row:1}
 .radio[data-layout="flipped"]>.radio-image{grid-column:2;grid-row:1}
 .radio[data-layout="flipped"]>div:not(.radio-image){grid-column:1;grid-row:1}
 .kens[data-layout="flipped"]>h2{text-align:right;margin-left:auto}
 .kens[data-layout="flipped"] .two-col>.kens-preview{grid-column:1;grid-row:1}
 .kens[data-layout="flipped"] .two-col>div{grid-column:2;grid-row:1}
 .social[data-layout="flipped"]>.social-column:first-child{grid-column:2;grid-row:1}
 .social[data-layout="flipped"]>.social-column:last-child{grid-column:1;grid-row:1}
}