:root{--bg:#0a0908;--panel:#12100e;--ink:#f2eee7;--muted:#aaa199;--copper:#b77a4d;--line:rgba(255,255,255,.12);--shell:min(1240px,calc(100vw - 48px))}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--bg);color:var(--ink);font-family:"DM Sans",sans-serif}.grain{position:fixed;inset:0;pointer-events:none;opacity:.035;z-index:30;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E")}.shell{width:var(--shell);margin:auto}.nav{height:84px;display:flex;align-items:center;justify-content:space-between;position:absolute;z-index:10;left:50%;transform:translateX(-50%);border-bottom:1px solid var(--line)}.brand{display:flex;align-items:center;gap:12px;color:#fff;text-decoration:none}.brand span{width:36px;height:36px;border:1px solid var(--line);display:grid;place-items:center;font:600 12px "Space Grotesk"}.brand strong{font:600 12px "Space Grotesk";letter-spacing:.18em}.nav nav{display:flex;gap:28px}.nav nav a,.nav-cta,.footer a{color:#fff;text-decoration:none;font-size:13px}.nav nav a{color:#c9c1b9}.nav-cta{border:1px solid var(--line);padding:12px 16px}.hero{min-height:900px;height:100vh;position:relative;display:flex;align-items:flex-end;overflow:hidden}.hero-photo{position:absolute;inset:0;background:url('assets/tim-hero.jpg') center 20%/cover no-repeat;transform:scale(1.02)}.hero-shade{position:absolute;inset:0;background:linear-gradient(90deg,rgba(7,6,5,.86) 0%,rgba(7,6,5,.38) 53%,rgba(7,6,5,.22)),linear-gradient(0deg,#0a0908 0%,transparent 36%)}.hero-content{position:relative;z-index:2;display:grid;grid-template-columns:1.2fr .55fr;gap:100px;align-items:end;padding-bottom:120px}.eyebrow{font:600 11px "Space Grotesk";letter-spacing:.19em;color:#c98e62}.hero h1,.section h2,.about h2,.join h2{font:500 clamp(58px,7.5vw,112px)/.88 "Space Grotesk";letter-spacing:-.055em;margin:18px 0 26px}.hero h1 em,.section h2 em,.about h2 em,.join h2 em{font-family:"Newsreader";font-weight:400;color:#d5a77e}.hero-copy>p:last-of-type{max-width:610px;color:#d1c9c2;font-size:18px;line-height:1.65}.hero-actions{display:flex;gap:12px;margin-top:34px}.btn{padding:15px 20px;text-decoration:none;color:#fff;font-size:13px;border:1px solid var(--line)}.btn.primary{background:#ece4db;color:#14110f}.short-card{background:rgba(14,12,10,.72);border:1px solid var(--line);backdrop-filter:blur(16px);padding:14px;color:#fff;text-align:left;cursor:pointer}.short-label{font:600 10px "Space Grotesk";letter-spacing:.18em;color:#c98e62}.short-thumb{height:300px;position:relative;margin:12px 0 16px;overflow:hidden}.short-thumb img{width:100%;height:100%;object-fit:cover}.short-thumb i{position:absolute;inset:0;margin:auto;width:58px;height:58px;border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.9);color:#111;font-style:normal}.short-card strong,.short-card small{display:block}.short-card small{color:var(--muted);margin-top:6px}.hero-foot{position:absolute;bottom:32px;z-index:3;left:50%;transform:translateX(-50%);display:flex;gap:40px;font:600 10px "Space Grotesk";letter-spacing:.16em;color:#aaa}.section{padding:150px 0}.section-no{font:600 10px "Space Grotesk";letter-spacing:.2em;color:#726a64;margin-bottom:60px}.section-head{display:grid;grid-template-columns:1.2fr .7fr;gap:90px;align-items:end;margin-bottom:58px}.section h2,.about h2,.join h2{font-size:clamp(48px,6vw,86px);margin:10px 0}.section-head>p{color:var(--muted);line-height:1.7}.music{background:#0e0c0a}.music-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:28px}.spotify-wrap,.music-story{border:1px solid var(--line);background:#12100e}.spotify-wrap{padding:18px}.player-top{font:600 10px "Space Grotesk";letter-spacing:.16em;color:#aaa;margin-bottom:15px}.player-top span{display:inline-block;width:7px;height:7px;border-radius:50%;background:#d87d50;margin-right:8px}.music-story{padding:48px}.music-story h3{font:500 42px/1 "Space Grotesk";letter-spacing:-.04em}.music-story p{color:var(--muted);line-height:1.75}.tabs{display:flex;gap:8px;margin:32px 0 18px}.tabs button{background:none;border:1px solid var(--line);color:#aaa;padding:10px 13px;cursor:pointer}.tabs button.active{background:#e9dfd4;color:#111}.music-story a,.instrument-links a,.journal a{color:#e6c3a5}.instrument{padding:0;min-height:900px;display:grid;grid-template-columns:1fr 1fr;background:#0b0a09}.instrument-image{min-height:900px;overflow:hidden}.instrument-image img{width:100%;height:100%;object-fit:cover;object-position:center}.instrument-copy{width:auto;margin:0;padding:110px 8vw}.instrument-copy .lead,.about .lead{font-size:22px;color:#d1c7bd;line-height:1.55}.feature-list{margin:36px 0 18px;border-top:1px solid var(--line)}.feature-list button{width:100%;display:grid;grid-template-columns:45px 1fr 1fr;align-items:center;text-align:left;padding:18px 0;background:none;color:#fff;border:0;border-bottom:1px solid var(--line);cursor:pointer}.feature-list span{color:#98735a}.feature-list small{color:#8e8680}.feature-detail{min-height:72px;color:#bdb3aa;line-height:1.6}.instrument-links{display:flex;gap:24px;margin-top:28px}.lesson-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}.lesson-grid article,.journal article{padding:34px;border:1px solid var(--line);background:#100e0c}.lesson-grid span{color:#9a6f50;font:600 11px "Space Grotesk"}.lesson-grid h3,.journal h3{font:500 30px/1.05 "Space Grotesk"}.lesson-grid p{color:var(--muted);line-height:1.6}.lesson-grid button{border:0;background:none;color:#d4a783;padding:0;cursor:pointer}.lesson-detail{margin-top:16px;padding:30px;border-left:2px solid #b77a4d;background:#14110f}.lesson-detail h3{font:500 28px "Space Grotesk"}.lesson-detail p{color:var(--muted)}.about{display:grid;grid-template-columns:1fr 1fr;gap:100px;align-items:center}.about-media{position:relative}.about-media img{width:100%;display:block}.about-media span{position:absolute;bottom:20px;left:20px;background:#0c0a08;padding:10px 13px;font:600 10px "Space Grotesk";letter-spacing:.14em}.about-copy p{color:var(--muted);line-height:1.75}.about blockquote{border-left:1px solid #b77a4d;padding-left:24px;margin:30px 0;color:#dfd4c8;font:italic 24px/1.5 "Newsreader"}.journal{background:#0f0d0b}.journal-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}.journal small{color:#b77a4d;letter-spacing:.14em}.join{min-height:720px;display:grid;place-items:center;position:relative;overflow:hidden}.join-bg{position:absolute;inset:0;background:linear-gradient(90deg,rgba(7,6,5,.9),rgba(7,6,5,.3)),url('assets/tim-night.jpg') center/cover}.join-content{position:relative;z-index:2}.join-content>p{max-width:570px;color:#c8beb4}.join form{display:grid;grid-template-columns:1fr 1.3fr auto;gap:10px;max-width:850px;margin-top:35px}.join input,.join button{padding:17px;border:1px solid var(--line);background:rgba(8,7,6,.75);color:#fff}.join button{background:#eee4d9;color:#111;font-weight:600}.join small,.join form span{grid-column:1/-1;color:#938a82}.footer{min-height:130px;display:flex;align-items:center;justify-content:space-between}.footer p{color:#777}.footer div{display:flex;gap:22px}.video-modal{border:1px solid var(--line);padding:0;background:#050505;width:min(420px,90vw);height:min(760px,88vh)}.video-modal::backdrop{background:rgba(0,0,0,.85)}.video-modal iframe{width:100%;height:100%;border:0}.video-modal>button{position:absolute;right:-14px;top:-14px;z-index:2;width:38px;height:38px;border-radius:50%;border:0;font-size:24px}.reveal{opacity:0;transform:translateY(24px);transition:.8s ease}.reveal.visible{opacity:1;transform:none}@media(max-width:900px){:root{--shell:min(100% - 28px,760px)}.nav nav{display:none}.nav-cta{font-size:11px}.hero{min-height:980px;height:auto}.hero-content{grid-template-columns:1fr;padding-top:180px;padding-bottom:100px;gap:50px}.short-card{max-width:390px}.hero-foot{display:none}.section{padding:100px 0}.section-head,.music-grid,.about{grid-template-columns:1fr;gap:38px}.instrument{grid-template-columns:1fr}.instrument-image{min-height:600px}.instrument-copy{padding:80px 24px}.lesson-grid,.journal-grid{grid-template-columns:1fr}.join form{grid-template-columns:1fr}.footer{flex-direction:column;justify-content:center;gap:18px}.feature-list button{grid-template-columns:38px 1fr}.feature-list small{display:none}}@media(max-width:560px){.hero h1{font-size:56px}.hero-copy>p:last-of-type{font-size:16px}.hero-actions{flex-direction:column}.short-thumb{height:260px}.section h2,.about h2,.join h2{font-size:48px}.instrument-image{min-height:480px}.instrument-links{flex-direction:column}.music-story{padding:28px}.nav{height:70px}.brand strong{display:none}}
/* v4.1: broader music-coaching positioning and reliable video loading */
.hero-pillar{background:rgba(14,12,10,.72);border:1px solid var(--line);backdrop-filter:blur(16px);padding:28px}.hero-pillar>span{font:600 10px "Space Grotesk";letter-spacing:.18em;color:#c98e62}.hero-pillar ol{list-style:none;padding:0;margin:20px 0 0}.hero-pillar li{display:flex;gap:18px;padding:16px 0;border-top:1px solid var(--line);font-size:15px}.hero-pillar b{font:600 10px "Space Grotesk";color:#9b765c}.coaching{background:#0d0b09}.coaching-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}.coaching-grid article{border:1px solid var(--line);padding:38px;background:#12100e}.coaching-grid article>span{color:#9a6f50;font:600 11px "Space Grotesk"}.coaching-grid h3{font:500 34px/1.05 "Space Grotesk";letter-spacing:-.035em}.coaching-grid p{color:var(--muted);line-height:1.7}.coaching-grid small{display:block;color:#b77a4d;letter-spacing:.12em;margin-top:28px}.method-strip{margin-top:18px;border:1px solid var(--line);padding:24px 28px;display:grid;grid-template-columns:.45fr 1.4fr auto;gap:28px;align-items:center}.method-strip p{color:var(--muted);margin:0}.method-strip a,.embed-fallback{color:#e6c3a5;text-decoration:none}.embed-fallback{display:block;font-size:12px;padding-top:12px}.watch{background:#0a0908}.watch-grid{display:grid;grid-template-columns:.8fr 1.2fr;gap:90px;align-items:center}.watch-copy p{color:var(--muted);line-height:1.7}.watch-actions{display:flex;gap:10px;margin-top:30px}.watch-actions button{cursor:pointer}.video-frame{aspect-ratio:16/9;position:relative;overflow:hidden;border:1px solid var(--line);background:#050505}.video-frame>img{width:100%;height:100%;object-fit:cover;object-position:center 30%;filter:brightness(.65)}.video-frame>button{position:absolute;inset:0;background:linear-gradient(0deg,rgba(0,0,0,.5),transparent);border:0;color:white;cursor:pointer;display:grid;place-content:center;gap:12px}.video-frame>button i{margin:auto;width:70px;height:70px;border-radius:50%;display:grid;place-items:center;background:#f2eee7;color:#111;font-style:normal;font-size:22px}.video-frame>button span{font:600 10px "Space Grotesk";letter-spacing:.18em}.video-frame iframe{width:100%;height:100%;border:0;display:block}.instrument{min-height:760px}.instrument-image{min-height:760px}.instrument-copy{padding-top:90px;padding-bottom:90px}.footer p{max-width:480px;text-align:center}@media(max-width:900px){.coaching-grid,.watch-grid{grid-template-columns:1fr}.method-strip{grid-template-columns:1fr}.watch-grid{gap:38px}.hero-pillar{max-width:480px}.nav nav{display:none}}@media(max-width:560px){.coaching-grid{grid-template-columns:1fr}.watch-actions{flex-direction:column}.hero-pillar{padding:20px}.method-strip{padding:22px}.footer p{padding:0 20px}}

/* v4.2: resilient privacy-enhanced YouTube facade and local-file fallback */
.video-fallback{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:40px;background:radial-gradient(circle at 50% 30%,#26211d,#080706 68%)}
.video-fallback strong{font:500 clamp(24px,3vw,38px)/1.05 "Space Grotesk";letter-spacing:-.035em}
.video-fallback p{max-width:520px;color:var(--muted);line-height:1.65;margin:18px auto 26px}
.video-fallback .btn{display:inline-block}

/* v4.3: expanded Signal Notes resource experience */
.signal-notes{background:radial-gradient(circle at 78% 8%,rgba(183,122,77,.08),transparent 26%),#0b0a09;padding-top:130px}
.notes-intro{display:grid;grid-template-columns:.9fr 1.15fr .9fr;gap:54px;align-items:start}
.notes-title h2{margin:0;font-size:clamp(54px,6vw,88px)}
.notes-copy p{margin:12px 0 0;color:var(--muted);font-size:18px;line-height:1.72;max-width:560px}
.notes-form{position:relative;display:grid;gap:10px;padding-top:18px}
.notes-form label{display:grid;grid-template-columns:28px 1fr;align-items:center;border:1px solid var(--line);background:linear-gradient(180deg,rgba(255,255,255,.025),rgba(255,255,255,.01));padding:0 14px;color:#b77a4d}
.notes-form input{width:100%;padding:15px 0;border:0;outline:0;background:transparent;color:#fff;font:inherit}
.notes-form button{display:flex;justify-content:space-between;align-items:center;padding:16px 18px;border:0;background:linear-gradient(90deg,#d49a68,#be7c49);color:#111;text-transform:uppercase;font-weight:700;letter-spacing:.035em;cursor:pointer}
.notes-form small{color:#817973}.notes-form .form-status{color:#d5a77e;font-size:12px}.start-note{position:absolute;right:72%;top:-44px;color:#d5a77e;font:italic 24px "Newsreader";transform:rotate(-5deg)}
.notes-divider{display:grid;grid-template-columns:1fr auto 1fr;gap:28px;align-items:center;margin:72px 0 32px}.notes-divider span{height:1px;background:linear-gradient(90deg,transparent,#76533a)}.notes-divider span:last-child{background:linear-gradient(90deg,#76533a,transparent)}.notes-divider strong{font:600 13px "Space Grotesk";letter-spacing:.18em;color:#c98e62}
.resource-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}.resource-card{min-height:430px;border:1px solid var(--line);background:linear-gradient(145deg,rgba(255,255,255,.025),rgba(255,255,255,.008));padding:26px 20px 18px;display:flex;flex-direction:column}.resource-icon{width:58px;height:58px;border:1px solid rgba(183,122,77,.38);border-radius:50%;display:grid;place-items:center;color:#c98e62;font-size:27px}.resource-card h3{font:500 21px/1.2 "Space Grotesk";margin:18px 0 12px}.resource-card p{color:var(--muted);line-height:1.65;margin:0 0 22px}.resource-photo,.prompt-card{margin-top:auto;height:145px;border:1px solid var(--line);overflow:hidden}.resource-photo img{width:100%;height:100%;object-fit:cover;filter:saturate(.72) sepia(.12) brightness(.72)}.studio-photo img{object-position:center 40%}.prompt-card{background:linear-gradient(rgba(9,8,7,.2),rgba(9,8,7,.5)),radial-gradient(circle at 70% 30%,#4f3423,#17110d 58%,#090807);padding:28px 32px;display:flex;flex-direction:column;align-items:center;justify-content:center;transform:rotate(-1deg)}.prompt-card span{font:500 19px/1.3 "Space Grotesk";letter-spacing:.06em;color:#d9c3af}.prompt-card i{width:22px;height:16px;background:#111;border-radius:60% 40% 55% 45%;margin-top:8px;transform:rotate(-22deg)}
.starter-kit{margin-top:18px;min-height:156px;border:1px solid var(--line);background:linear-gradient(90deg,rgba(255,255,255,.02),rgba(255,255,255,.006));display:grid;grid-template-columns:64px 1fr 180px 360px;gap:22px;align-items:center;padding:20px 28px;overflow:hidden}.gift-mark{width:46px;height:46px;border:1px solid rgba(183,122,77,.38);border-radius:50%;display:grid;place-items:center;color:#c98e62;font-size:24px}.starter-copy h3{font:500 22px "Space Grotesk";margin:0 0 10px}.starter-copy h3 em{font-style:normal;color:#c98e62}.starter-copy p{color:var(--muted);margin:0}.hand-note{font:italic 22px/1.15 "Newsreader";color:#d5a77e;transform:rotate(-5deg);text-align:center}.hand-note span{display:inline-block;margin-left:8px}.book-stack{height:150px;position:relative;transform:translateY(17px)}.sheet,.book-cover{position:absolute;width:138px;height:178px;top:0;right:22px;background:#ded7ca;border:1px solid rgba(0,0,0,.25);box-shadow:-12px 8px 25px rgba(0,0,0,.35)}.back-two{right:0;transform:rotate(8deg);background:linear-gradient(90deg,#ddd5c6 54%,#35302b 54%)}.back-one{right:58px;transform:rotate(3deg);background:linear-gradient(90deg,#e4ddd1 58%,#222 58%)}.book-cover{right:112px;transform:rotate(-5deg);padding:17px;color:#171513}.book-cover small,.book-cover strong,.book-cover p,.book-cover span{display:block}.book-cover small{font-size:8px}.book-cover strong{font:700 15px/1.03 "Space Grotesk"}.book-cover p{font-size:8px;line-height:1.2;margin-top:10px}.book-cover span{font:italic 12px "Newsreader";margin-top:14px}
@media(max-width:1050px){.notes-intro{grid-template-columns:1fr 1fr}.notes-form{grid-column:1/-1;max-width:620px}.start-note{display:none}.resource-grid{grid-template-columns:repeat(2,1fr)}.starter-kit{grid-template-columns:56px 1fr 150px}.book-stack{grid-column:1/-1;height:132px}.book-cover{right:45%}.back-one{right:32%}.back-two{right:22%}}
@media(max-width:680px){.signal-notes{padding-top:90px}.notes-intro{grid-template-columns:1fr;gap:24px}.notes-form{grid-column:auto}.notes-divider{gap:12px;margin-top:52px}.notes-divider strong{font-size:10px;text-align:center}.resource-grid{grid-template-columns:1fr}.resource-card{min-height:390px}.starter-kit{grid-template-columns:48px 1fr;padding:22px}.hand-note{display:none}.book-stack{grid-column:1/-1}.book-cover{right:48%}.back-one{right:28%}.back-two{right:10%}}

/* v4.5 — premium coaching video and subtle synthwave depth */
.coaching{position:relative;overflow:hidden}
.coaching::before{content:"";position:absolute;width:620px;height:620px;right:-260px;top:120px;border-radius:50%;background:radial-gradient(circle,rgba(112,56,170,.16),rgba(190,76,127,.07) 42%,transparent 70%);pointer-events:none}
.coaching-video{position:relative;display:grid;grid-template-columns:.72fr 1.28fr;gap:38px;align-items:center;margin:0 0 22px;padding:26px;border:1px solid rgba(213,167,126,.24);background:linear-gradient(135deg,rgba(19,15,18,.96),rgba(10,9,8,.96));box-shadow:0 28px 90px rgba(0,0,0,.28)}
.coaching-video::after{content:"";position:absolute;inset:-1px;pointer-events:none;background:linear-gradient(110deg,rgba(217,126,78,.15),transparent 34%,transparent 65%,rgba(116,64,181,.13));mix-blend-mode:screen}
.coaching-video-copy{position:relative;z-index:1;padding:18px 10px 18px 18px}
.coaching-video-copy h3{font:500 clamp(32px,4vw,54px)/1.02 "Space Grotesk";letter-spacing:-.045em;margin:12px 0 18px}
.coaching-video-copy p:not(.eyebrow){color:var(--muted);line-height:1.75}
.premium-video{position:relative;width:100%;aspect-ratio:16/9;overflow:hidden;background:#050505;border:1px solid rgba(255,255,255,.13);box-shadow:0 18px 58px rgba(0,0,0,.42),0 0 42px rgba(111,63,177,.08)}
.premium-video>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 38%;filter:brightness(.55) saturate(.92)}
.premium-video>button{position:absolute;inset:0;width:100%;height:100%;border:0;background:linear-gradient(0deg,rgba(0,0,0,.64),transparent 62%);color:#fff;cursor:pointer;display:grid;place-content:center;gap:13px}
.premium-video>button i{width:76px;height:76px;margin:auto;border-radius:50%;display:grid;place-items:center;background:linear-gradient(135deg,#f0d5c0,#d89b70);color:#15100d;font-style:normal;font-size:23px;box-shadow:0 0 34px rgba(216,125,93,.24)}
.premium-video>button span{font:600 10px "Space Grotesk";letter-spacing:.18em}
.premium-video iframe,.video-frame iframe{position:absolute!important;inset:0!important;width:100%!important;height:100%!important;min-width:100%!important;min-height:100%!important;border:0!important;display:block!important;transform:none!important;margin:0!important;padding:0!important}
@media(max-width:900px){.coaching-video{grid-template-columns:1fr}.coaching-video-copy{padding:10px 4px}.premium-video{order:-1}}
@media(max-width:560px){.coaching-video{padding:14px;gap:20px}.premium-video>button i{width:62px;height:62px}}
.local-video-note {
  position: absolute;
  left: 1rem;
  right: 1rem;
  bottom: 1rem;
  z-index: 4;
  display: grid;
  gap: .25rem;
  padding: .9rem 1rem;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 14px;
  background: rgba(8,8,10,.88);
  backdrop-filter: blur(14px);
  font-size: .8rem;
  line-height: 1.35;
}
.local-video-note strong { color: #fff; }
.local-video-note span { color: rgba(255,255,255,.68); }

/* =========================================================
   THE SIGNAL v4.7 — DIRECTOR'S CUT
   Premium studio atmosphere with a restrained synthwave pulse
   ========================================================= */
:root{
  --signal-violet:#7f5cff;
  --signal-magenta:#d7599f;
  --signal-cyan:#55bdd0;
  --signal-amber:#d49a69;
}
html{scroll-behavior:smooth}
body{background:
  radial-gradient(900px 520px at 12% 4%,rgba(106,72,160,.075),transparent 68%),
  radial-gradient(820px 560px at 94% 32%,rgba(186,88,119,.055),transparent 72%),
  #0a0908;overflow-x:hidden}
.grain{opacity:.105;mix-blend-mode:soft-light}
.ambient{position:fixed;width:46vw;height:46vw;min-width:520px;min-height:520px;border-radius:50%;filter:blur(125px);opacity:.08;pointer-events:none;z-index:-1;animation:ambientDrift 18s ease-in-out infinite alternate}
.ambient-a{left:-28vw;top:18vh;background:radial-gradient(circle,var(--signal-violet),transparent 68%)}
.ambient-b{right:-30vw;top:55vh;background:radial-gradient(circle,var(--signal-magenta),transparent 68%);animation-delay:-7s}
@keyframes ambientDrift{to{transform:translate3d(5vw,3vh,0) scale(1.08)}}

/* Hero: use Tim's graffiti portrait, but keep the premium tonal control */
.hero-photo{background-image:url('assets/tim-graffiti.jpg')!important;background-position:center 34%!important;filter:saturate(.93) contrast(1.04) brightness(.78)}
.hero-shade{background:
  linear-gradient(90deg,rgba(8,7,7,.94) 0%,rgba(8,7,7,.72) 37%,rgba(8,7,7,.17) 70%,rgba(8,7,7,.44) 100%),
  linear-gradient(0deg,rgba(8,7,7,.92) 0%,transparent 34%),
  radial-gradient(circle at 74% 28%,rgba(113,69,160,.14),transparent 42%)}
.hero::after{content:"";position:absolute;inset:0;pointer-events:none;background:repeating-linear-gradient(0deg,transparent 0 5px,rgba(255,255,255,.012) 5px 6px);mix-blend-mode:overlay;opacity:.28}
.hero h1 em,.section-head h2 em,.watch-copy h2 em,.instrument-copy h2 em{background:linear-gradient(90deg,#e7c0a0 0%,#c9a9da 56%,#80b8c4 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
.hero-pillar{backdrop-filter:blur(16px);background:linear-gradient(145deg,rgba(17,14,16,.58),rgba(12,10,10,.34));border-color:rgba(255,255,255,.13);box-shadow:0 22px 80px rgba(0,0,0,.26)}

/* Signal identity */
.signal-divider{display:grid;grid-template-columns:auto 1fr;gap:22px;align-items:center;padding-top:34px;padding-bottom:12px;color:rgba(255,255,255,.34)}
.signal-divider span{font:600 9px/1 "Space Grotesk";letter-spacing:.24em;white-space:nowrap}
.signal-divider svg{width:100%;height:28px;overflow:visible}
.signal-divider path{fill:none;stroke:url(#none);stroke:rgba(201,151,184,.28);stroke-width:1;vector-effect:non-scaling-stroke;stroke-dasharray:11 7;animation:signalTravel 13s linear infinite}
.signal-divider.reverse path{stroke:rgba(110,183,198,.23);animation-direction:reverse}
@keyframes signalTravel{to{stroke-dashoffset:-180}}
.signal-rail{position:fixed;right:16px;top:50%;transform:translateY(-50%);display:grid;gap:7px;z-index:20;opacity:.28;pointer-events:none}
.signal-rail span{width:3px;height:3px;border-radius:50%;background:#fff}
.signal-rail i{display:block;width:1px;height:28px;background:linear-gradient(transparent,rgba(190,135,183,.8),transparent)}

/* Premium interaction instead of louder colour */
.coaching-grid article,.resource-card,.music-story,.spotify-wrap,.method-strip,.starter-kit,.premium-video,.video-frame{transition:transform .35s ease,border-color .35s ease,box-shadow .35s ease,background-color .35s ease}
.coaching-grid article:hover,.resource-card:hover,.music-story:hover,.starter-kit:hover{transform:translateY(-3px);border-color:rgba(157,110,190,.32);box-shadow:0 22px 70px rgba(0,0,0,.24),0 0 38px rgba(114,68,163,.055)}
.spotify-wrap:hover,.premium-video:hover,.video-frame:hover{border-color:rgba(213,161,193,.3);box-shadow:0 28px 90px rgba(0,0,0,.34),0 0 45px rgba(91,86,179,.07)}
.btn.primary,.nav-cta{position:relative;overflow:hidden;background:linear-gradient(110deg,#e5c3a7,#cba4ba 63%,#a7c5ca);color:#17110f;border-color:transparent;box-shadow:0 9px 34px rgba(176,105,136,.12)}
.btn.primary::after,.nav-cta::after{content:"";position:absolute;inset:-2px auto -2px -42%;width:30%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.42),transparent);transform:skewX(-18deg);transition:left .7s ease}
.btn.primary:hover::after,.nav-cta:hover::after{left:120%}
.btn.primary:hover,.nav-cta:hover{transform:translateY(-1px);box-shadow:0 14px 42px rgba(155,91,143,.2)}
.nav a:not(.nav-cta){position:relative}
.nav nav a::after{content:"";position:absolute;left:0;right:100%;bottom:-8px;height:1px;background:linear-gradient(90deg,var(--signal-magenta),var(--signal-cyan));transition:right .28s ease}
.nav nav a:hover::after{right:0}

/* Subtle studio grid in longer sections */
.coaching,.signal-notes{background-image:linear-gradient(rgba(255,255,255,.012) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.012) 1px,transparent 1px);background-size:52px 52px;background-position:center top}
.coaching::after,.signal-notes::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(90deg,#0a0908,transparent 16%,transparent 84%,#0a0908)}
.coaching>.shell,.signal-notes>.shell{position:relative;z-index:1}

/* Make the free resources section tangible, without redesigning it */
.starter-kit{background:
  radial-gradient(circle at 86% 30%,rgba(111,69,158,.11),transparent 32%),
  linear-gradient(90deg,rgba(255,255,255,.025),rgba(255,255,255,.007))}
.book-stack{filter:drop-shadow(0 18px 24px rgba(0,0,0,.35))}
.prompt-card{box-shadow:inset 0 0 40px rgba(177,104,86,.05)}

.version-tag{position:fixed;left:10px;bottom:8px;z-index:50;font:600 7px/1 "Space Grotesk";letter-spacing:.16em;color:rgba(255,255,255,.2);pointer-events:none}
@media (prefers-reduced-motion:reduce){*{scroll-behavior:auto!important}.ambient,.signal-divider path{animation:none!important}.reveal{transition:none!important}}
@media(max-width:900px){.hero-photo{background-position:62% 28%!important}.signal-rail{display:none}.signal-divider{padding-inline:20px}}
@media(max-width:600px){.hero-photo{background-position:66% center!important}.signal-divider{gap:12px}.signal-divider span{font-size:7px}.version-tag{display:none}}

/* =========================================================
   THE SIGNAL v5 — INTERACTIVE EDITION
   Mouse-led image interactions: tilt, bloom, light sweep,
   signal waveform and cinematic focus.
   ========================================================= */
:root{
  --mouse-x:50%;
  --mouse-y:50%;
}

/* Shared interactive visual treatment */
[data-signal-visual]{
  --tilt-x:0deg;
  --tilt-y:0deg;
  --glow-x:50%;
  --glow-y:50%;
  position:relative;
  isolation:isolate;
  transform-style:preserve-3d;
  will-change:transform;
  transition:transform .22s cubic-bezier(.2,.7,.2,1),box-shadow .35s ease,border-color .35s ease;
}
[data-signal-visual]::before{content:"";position:absolute;inset:0;z-index:3;pointer-events:none;border-radius:inherit;background:radial-gradient(circle 220px at var(--glow-x) var(--glow-y),rgba(229,175,213,.18),rgba(108,103,201,.06) 42%,transparent 72%);opacity:0;transition:opacity .3s ease;mix-blend-mode:screen}
[data-signal-visual]::after{content:"";position:absolute;z-index:4;pointer-events:none;inset:-35% auto -35% -58%;width:32%;transform:skewX(-18deg);background:linear-gradient(90deg,transparent,rgba(255,255,255,.18),rgba(122,202,218,.08),transparent);opacity:0;filter:blur(1px)}
[data-signal-visual].signal-hover{transform:perspective(1000px) rotateX(var(--tilt-x)) rotateY(var(--tilt-y)) translateY(-4px) scale(1.008);box-shadow:0 30px 85px rgba(0,0,0,.4),0 0 0 1px rgba(195,145,207,.19),0 0 45px rgba(105,82,186,.11)}
[data-signal-visual].signal-hover::before{opacity:1}
[data-signal-visual].signal-hover::after{opacity:1;animation:signalSweep .95s cubic-bezier(.2,.7,.2,1) forwards}
@keyframes signalSweep{from{left:-58%}to{left:138%}}

[data-signal-visual] img{transition:transform .65s cubic-bezier(.2,.75,.2,1),filter .45s ease;will-change:transform,filter}
[data-signal-visual].signal-hover img{transform:scale(1.028);filter:saturate(1.13) contrast(1.045) brightness(1.025)}

/* Signal readout appears only while hovering */
.signal-readout{position:absolute;left:16px;right:16px;bottom:14px;z-index:6;display:flex;align-items:flex-end;justify-content:space-between;gap:16px;pointer-events:none;opacity:0;transform:translateY(9px);transition:opacity .28s ease,transform .28s ease}
.signal-hover .signal-readout{opacity:1;transform:none}
.signal-caption{font:600 8px/1.25 "Space Grotesk",sans-serif;letter-spacing:.18em;color:rgba(255,255,255,.84);text-shadow:0 2px 12px rgba(0,0,0,.7)}
.signal-wave{display:flex;align-items:center;gap:3px;height:22px;padding:5px 7px;border:1px solid rgba(255,255,255,.17);border-radius:999px;background:rgba(8,7,9,.46);backdrop-filter:blur(8px)}
.signal-wave i{display:block;width:2px;height:4px;border-radius:2px;background:linear-gradient(#df9fca,#76c5d3);animation:wavePulse .8s ease-in-out infinite alternate;animation-play-state:paused}
.signal-hover .signal-wave i{animation-play-state:running}
.signal-wave i:nth-child(2){animation-delay:-.17s}.signal-wave i:nth-child(3){animation-delay:-.34s}.signal-wave i:nth-child(4){animation-delay:-.51s}.signal-wave i:nth-child(5){animation-delay:-.68s}.signal-wave i:nth-child(6){animation-delay:-.25s}.signal-wave i:nth-child(7){animation-delay:-.43s}.signal-wave i:nth-child(8){animation-delay:-.6s}
@keyframes wavePulse{to{height:17px}}

/* Hero follows the pointer without rotating the copy */
.hero{--hero-x:72%;--hero-y:32%}
.hero-photo{transform:scale(1.025);transition:transform 1.05s cubic-bezier(.2,.7,.2,1),filter .5s ease;background-position:calc(50% + var(--hero-shift-x,0px)) calc(34% + var(--hero-shift-y,0px))!important}
.hero.hero-alive .hero-photo{transform:scale(1.045);filter:saturate(1.04) contrast(1.055) brightness(.82)}
.hero-light{position:absolute;inset:0;z-index:1;pointer-events:none;background:radial-gradient(circle 330px at var(--hero-x) var(--hero-y),rgba(196,119,184,.13),rgba(82,152,178,.045) 42%,transparent 73%);opacity:0;transition:opacity .35s ease;mix-blend-mode:screen}
.hero.hero-alive .hero-light{opacity:1}

/* Photos inside resource cards should still respect card clipping */
.resource-photo,[data-signal-visual].resource-photo{overflow:hidden}
.instrument-image,[data-signal-visual].instrument-image{overflow:hidden}
.about-media,[data-signal-visual].about-media{overflow:hidden}
.premium-video,[data-signal-visual].premium-video,.video-frame,[data-signal-visual].video-frame{overflow:hidden}

/* Gentle focus framing */
[data-signal-visual] .signal-focus{position:absolute;inset:10px;z-index:5;border:1px solid transparent;border-radius:calc(inherit - 4px);pointer-events:none;transition:border-color .3s ease,opacity .3s ease;opacity:0}
[data-signal-visual].signal-hover .signal-focus{opacity:1;border-color:rgba(255,255,255,.11)}

@media(pointer:coarse),(max-width:800px){
  [data-signal-visual].signal-hover{transform:none}
  [data-signal-visual]::after{display:none}
  .signal-readout{display:none}
}
@media(prefers-reduced-motion:reduce){
  [data-signal-visual],[data-signal-visual] img,.hero-photo{transition:none!important;transform:none!important}
  [data-signal-visual]::after,.signal-wave{display:none!important}
}


/* About Tim Safari stability fix: keep this portrait out of the 3D/blend-mode stack. */
.about-media{isolation:auto;transform:none!important;box-shadow:none;transition:box-shadow .35s ease}
.about-media::before,.about-media::after{display:none!important}
.about-media img{transform:translateZ(0);filter:none!important;will-change:auto;transition:transform .65s cubic-bezier(.2,.75,.2,1),filter .35s ease}
.about-media:hover{box-shadow:0 24px 70px rgba(0,0,0,.28),0 0 32px rgba(105,82,186,.07)}
.about-media:hover img{transform:translateZ(0) scale(1.018);filter:saturate(1.04) contrast(1.015) brightness(1.01)!important}
@media(prefers-reduced-motion:reduce){.about-media:hover img{transform:none}}

/* v5.2 — keep the hero copy clear of Tim's face on wide screens */
@media (min-width: 901px){
  .hero{background:#090807}
  .hero-photo{
    inset:0 0 0 auto;
    width:72%;
    background-position:center 34%!important;
  }
  .hero-shade{
    background:
      linear-gradient(90deg,#090807 0%,rgba(9,8,7,.98) 22%,rgba(9,8,7,.82) 39%,rgba(9,8,7,.34) 58%,rgba(9,8,7,.12) 100%),
      linear-gradient(0deg,#0a0908 0%,transparent 36%);
  }
  .hero-content{grid-template-columns:minmax(0,1.05fr) minmax(300px,.55fr);gap:72px}
  .hero-copy{max-width:610px}
  .hero-copy h1{font-size:clamp(58px,6.6vw,98px)}
}

/* =========================================================
   THE SIGNAL v7 — clean hero + branded method framework
   ========================================================= */
.hero-content{grid-template-columns:minmax(0,720px);gap:0}
.hero-copy{max-width:680px}
.hero-pillar{display:none!important}

.signal-method{position:relative;padding:145px 0 125px;overflow:hidden;background:
  radial-gradient(circle at 16% 10%,rgba(142,84,159,.10),transparent 34%),
  radial-gradient(circle at 88% 86%,rgba(68,133,153,.08),transparent 31%),
  #0b0909;border-top:1px solid rgba(255,255,255,.055);border-bottom:1px solid rgba(255,255,255,.055)}
.signal-method::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.34;background-image:linear-gradient(rgba(255,255,255,.018) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.014) 1px,transparent 1px);background-size:72px 72px;mask-image:linear-gradient(to bottom,transparent,#000 20%,#000 80%,transparent)}
.method-intro{position:relative;z-index:1;display:grid;grid-template-columns:1.15fr .75fr;gap:90px;align-items:end;margin-bottom:70px}
.method-intro h2{font:500 clamp(50px,6vw,86px)/.92 "Space Grotesk";letter-spacing:-.055em;margin:12px 0 0}
.method-intro h2 em{font-family:"Newsreader";font-weight:400;background:linear-gradient(90deg,#e6b996,#c6a5d6 55%,#79b4c2);-webkit-background-clip:text;background-clip:text;color:transparent}
.method-intro>p{max-width:520px;margin:0;color:var(--muted);line-height:1.75;font-size:17px}
.method-route{position:relative;z-index:1;display:grid;grid-template-columns:auto 1fr auto 1fr auto 1fr auto;align-items:center;padding:0 11.5%;margin:0 0 -16px}
.method-route span{width:9px;height:9px;border-radius:50%;background:#c58aad;box-shadow:0 0 0 6px rgba(197,138,173,.08),0 0 24px rgba(197,138,173,.32)}
.method-route i{height:1px;background:linear-gradient(90deg,rgba(197,138,173,.55),rgba(100,155,171,.38));position:relative;overflow:hidden}
.method-route i::after{content:"";position:absolute;inset:0;width:25%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.85),transparent);animation:methodSignal 4.8s linear infinite}
.method-route i:nth-of-type(2)::after{animation-delay:1.4s}.method-route i:nth-of-type(3)::after{animation-delay:2.8s}
@keyframes methodSignal{from{transform:translateX(-120%)}to{transform:translateX(520%)}}
.method-cards{position:relative;z-index:1;display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.method-card{min-height:365px;position:relative;padding:34px 28px 30px;overflow:hidden;border:1px solid rgba(255,255,255,.105);background:linear-gradient(155deg,rgba(24,20,22,.86),rgba(13,11,11,.82));transition:transform .38s cubic-bezier(.2,.75,.2,1),border-color .38s ease,box-shadow .38s ease,background .38s ease}
.method-card::before{content:"";position:absolute;inset:0;background:radial-gradient(circle 230px at var(--mx,20%) var(--my,20%),rgba(193,126,176,.13),transparent 70%);opacity:0;transition:opacity .35s ease;pointer-events:none}
.method-card::after{content:"";position:absolute;left:28px;right:28px;bottom:0;height:2px;transform:scaleX(.16);transform-origin:left;background:linear-gradient(90deg,#c77daa,#739fae);transition:transform .4s ease}
.method-card:hover{transform:translateY(-7px);border-color:rgba(194,130,174,.34);box-shadow:0 30px 75px rgba(0,0,0,.32),0 0 42px rgba(115,69,139,.065);background:linear-gradient(155deg,rgba(29,23,28,.94),rgba(14,12,13,.88))}
.method-card:hover::before{opacity:1}.method-card:hover::after{transform:scaleX(1)}
.method-icon{width:58px;height:58px;display:grid;place-items:center;margin-bottom:42px;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.025);transform:rotate(-2deg);transition:transform .4s ease,border-color .4s ease,background .4s ease}
.method-card:nth-child(even) .method-icon{transform:rotate(2deg)}
.method-card:hover .method-icon{transform:rotate(0deg) translateY(-2px);border-color:rgba(191,130,176,.42);background:rgba(183,111,165,.075)}
.method-icon svg{width:30px;height:30px;fill:none;stroke:#d3a2bf;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.method-number{position:absolute;right:26px;top:28px;font:600 11px "Space Grotesk";letter-spacing:.18em;color:#736970}
.method-card h3{font:500 29px/1.05 "Space Grotesk";letter-spacing:-.035em;margin:0 0 18px;max-width:230px}
.method-card p{margin:0;color:#aaa0a1;line-height:1.65;font-size:15px}
.method-tag{position:absolute;left:28px;bottom:25px;font:600 9px "Space Grotesk";letter-spacing:.2em;color:#ad7d9c}
.method-outcome{position:relative;z-index:1;margin-top:18px;padding:24px 28px;border:1px solid rgba(255,255,255,.09);display:grid;grid-template-columns:.35fr 1.4fr auto;gap:28px;align-items:center;background:rgba(255,255,255,.018)}
.method-outcome span{font:600 10px "Space Grotesk";letter-spacing:.18em;color:#9d738e}.method-outcome strong{font:500 19px "Space Grotesk"}.method-outcome a{color:#e1b7ce;text-decoration:none;font-size:13px}

@media(max-width:1000px){.method-cards{grid-template-columns:repeat(2,1fr)}.method-route{display:none}.method-intro{grid-template-columns:1fr;gap:25px}.method-card{min-height:325px}.method-outcome{grid-template-columns:1fr;gap:12px}}
@media(max-width:620px){.signal-method{padding:100px 0 85px}.method-cards{grid-template-columns:1fr}.method-card{min-height:300px}.method-intro{margin-bottom:45px}.method-card h3{font-size:27px}.method-outcome{padding:22px}.hero-content{padding-bottom:105px}}
@media(prefers-reduced-motion:reduce){.method-route i::after{animation:none}.method-card{transition:none}}

/* =========================================================
   THE SIGNAL v7.1 — responsive production pass
   ========================================================= */
html,body{max-width:100%;overflow-x:hidden}
img,iframe,video{max-width:100%}
.version-tag{display:none!important}

@media (max-width: 900px){
  :root{--shell:calc(100% - 32px)}
  .nav{width:var(--shell);height:72px}
  .nav-cta{padding:10px 12px;white-space:nowrap}
  .brand span{width:34px;height:34px}

  /* Mobile hero becomes a clean image + content stack: no copy over Tim's face. */
  .hero{display:block;height:auto;min-height:0;overflow:visible;background:#090807}
  .hero-photo{position:relative;inset:auto!important;width:100%!important;height:58svh;min-height:430px;max-height:650px;background-position:center 24%!important;transform:none!important}
  .hero-shade{height:58svh;min-height:430px;max-height:650px;background:linear-gradient(180deg,rgba(7,6,5,.18) 0%,rgba(7,6,5,.02) 48%,#090807 100%)}
  .hero-content{display:block;padding:38px 0 76px!important;margin:0 auto;background:#090807}
  .hero-copy{max-width:680px}
  .hero h1{font-size:clamp(48px,10.5vw,76px);line-height:.92;margin:14px 0 22px}
  .hero-copy>p:last-of-type{max-width:620px;font-size:17px;line-height:1.58}
  .hero-actions{margin-top:28px;flex-wrap:wrap}

  .signal-divider{margin-top:0}
  .section{padding:88px 0}
  .section-no{margin-bottom:38px}
  .section-head{margin-bottom:38px}
  .section h2,.about h2,.join h2,.method-intro h2{font-size:clamp(44px,8.5vw,68px)}

  .music-grid,.watch-grid,.about,.coaching-video{gap:32px}
  .spotify-wrap{padding:12px}
  .spotify-wrap iframe{height:352px}
  .music-story{padding:34px}
  .tabs{overflow-x:auto;padding-bottom:4px;scrollbar-width:none}
  .tabs::-webkit-scrollbar{display:none}
  .tabs button{flex:0 0 auto}

  .instrument{display:block;min-height:0}
  .instrument-image{min-height:0;height:auto;aspect-ratio:4/3}
  .instrument-image img{object-position:center 30%}
  .instrument-copy{padding:70px 16px}

  .about{align-items:start}
  .about-media img{aspect-ratio:4/3;object-fit:cover;object-position:center 32%}
  .about-media span{font-size:8px;letter-spacing:.11em;left:12px;bottom:12px;padding:8px 10px}

  .join{min-height:650px}
  .join-content{padding:88px 0}
  .join form{max-width:620px}

  .footer{padding:34px 0;text-align:center}
  .footer div{flex-wrap:wrap;justify-content:center}

  .signal-method{padding:90px 0 78px}
  .method-intro{margin-bottom:42px}
  .method-cards{gap:14px}
  .method-card{min-height:310px}
}

@media (max-width: 680px){
  :root{--shell:calc(100% - 28px)}
  body{font-size:16px}
  .nav{height:66px}
  .brand strong{display:none}
  .nav-cta{font-size:10px;padding:9px 10px}

  .hero-photo,.hero-shade{height:52svh;min-height:360px;max-height:520px}
  .hero-photo{background-position:58% 22%!important}
  .hero-content{padding:32px 0 64px!important}
  .eyebrow{font-size:9px;line-height:1.5;letter-spacing:.15em}
  .hero h1{font-size:clamp(42px,12vw,58px);letter-spacing:-.045em}
  .hero-copy>p:last-of-type{font-size:16px}
  .hero-actions{display:grid;grid-template-columns:1fr;gap:10px}
  .btn{display:flex;align-items:center;justify-content:center;min-height:50px;text-align:center}

  .section{padding:72px 0}
  .section h2,.about h2,.join h2,.method-intro h2{font-size:clamp(40px,11vw,52px);line-height:.94}
  .section-head{gap:22px}
  .section-head>p,.method-intro>p{font-size:16px}

  .coaching-grid,.method-cards,.resource-grid,.lesson-grid,.journal-grid{grid-template-columns:1fr}
  .coaching-grid article{padding:28px 24px}
  .coaching-grid h3{font-size:29px}
  .method-card{min-height:280px;padding:28px 24px 26px}
  .method-card::after{left:24px;right:24px}
  .method-icon{margin-bottom:32px}
  .method-tag{left:24px;bottom:22px}

  .music-story{padding:26px 22px}
  .music-story h3{font-size:34px}
  .spotify-wrap iframe{height:420px}

  .watch-actions{display:grid;grid-template-columns:1fr}
  .video-frame,.premium-video{aspect-ratio:16/10}
  .video-frame>button i,.premium-video>button i{width:58px;height:58px}

  .instrument-image{aspect-ratio:1/1.08}
  .instrument-copy{padding:58px 14px}
  .instrument-copy .lead,.about .lead{font-size:19px}
  .feature-list button{padding:16px 0}
  .instrument-links{gap:16px}

  .about{gap:30px}
  .about blockquote{font-size:21px;padding-left:18px}

  .notes-form label,.notes-form button,.join input,.join button{min-height:52px}
  .resource-card{min-height:0;padding:24px 20px}
  .resource-photo,.prompt-card{height:170px}
  .starter-kit{display:block;padding:24px 20px 18px}
  .gift-mark{margin-bottom:18px}
  .book-stack{margin-top:18px;height:155px;transform:none}
  .book-cover{right:50%;transform:translateX(15%) rotate(-5deg)}
  .back-one{right:28%}.back-two{right:7%}

  .join{min-height:0}
  .join-bg{background-position:63% center}
  .join-content{padding:76px 0}
  .join form{display:grid;grid-template-columns:1fr}
  .join input,.join button{width:100%}

  .footer{gap:20px}
  .footer p{font-size:14px;line-height:1.55}
}

@media (max-width: 390px){
  :root{--shell:calc(100% - 22px)}
  .nav-cta{font-size:9px;letter-spacing:0}
  .hero-photo,.hero-shade{min-height:335px}
  .hero h1{font-size:40px}
  .section h2,.about h2,.join h2,.method-intro h2{font-size:38px}
  .music-story{padding:22px 18px}
  .method-card{padding-left:20px;padding-right:20px}
  .method-number{right:20px}
}

@media (orientation:landscape) and (max-height:600px) and (max-width:900px){
  .hero-photo,.hero-shade{height:82svh;min-height:360px;max-height:none}
  .hero-photo{background-position:center 25%!important}
}

/* =========================================================
   THE SIGNAL v7.2 — responsive polish + performance
   ========================================================= */
:root{--shell:min(1240px,calc(100vw - 56px))}
.hero-photo{
  background-image:image-set(
    url('assets/tim-graffiti-640.webp') 1x,
    url('assets/tim-graffiti-1600.webp') 2x
  );
}
.join-bg{
  background-image:linear-gradient(90deg,rgba(7,6,5,.9),rgba(7,6,5,.3)),image-set(
    url('assets/tim-night-1024.webp') 1x,
    url('assets/tim-night-1600.webp') 2x
  );
}

/* Reserve space and skip rendering below-the-fold sections until needed. */
.section,.signal-method,.instrument,.signal-notes,.join{content-visibility:auto;contain-intrinsic-size:900px}
img{height:auto}

.spotify-placeholder{position:relative;min-height:352px;overflow:hidden;background:#0d0b0a}
.spotify-placeholder>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:brightness(.42) saturate(.8)}
.spotify-placeholder::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(8,7,6,.08),rgba(8,7,6,.72));pointer-events:none}
.spotify-placeholder>button{position:absolute;z-index:2;inset:0;margin:auto;width:min(280px,80%);height:max-content;padding:18px 20px;border:1px solid rgba(255,255,255,.2);background:rgba(8,7,6,.76);color:#fff;display:grid;gap:5px;place-items:center;cursor:pointer;backdrop-filter:blur(8px)}
.spotify-placeholder>button span{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;background:#fff;color:#111;margin-bottom:5px}
.spotify-placeholder>button strong{font:600 11px "Space Grotesk",sans-serif;letter-spacing:.16em}
.spotify-placeholder>button small{color:#b8aea7;font-size:11px}
.spotify-wrap>iframe{display:block;width:100%;height:352px;border:0}

/* Better tablet behaviour: avoid desktop layout lingering too long. */
@media (max-width: 1120px){
  .nav nav{gap:18px}
  .nav nav a{font-size:12px}
  .hero-content{grid-template-columns:minmax(0,650px)}
  .hero-copy{max-width:620px}
  .method-cards{grid-template-columns:repeat(2,minmax(0,1fr))}
  .method-route{display:none}
  .coaching-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}

@media (max-width: 900px){
  :root{--shell:calc(100% - 36px)}
  .grain,.ambient,.signal-rail{display:none!important}
  .nav{position:absolute;top:0}
  .hero-photo{background-image:image-set(url('assets/tim-graffiti-640.webp') 1x,url('assets/tim-graffiti-1024.webp') 2x)}
  .hero-copy{max-width:none}
  .section,.signal-method,.instrument,.signal-notes,.join{contain-intrinsic-size:760px}
  .music-grid,.watch-grid,.about,.coaching-video,.section-head,.method-intro{grid-template-columns:1fr}
  .method-cards,.coaching-grid{grid-template-columns:1fr 1fr}
  .instrument-copy{padding-inline:max(24px,calc((100vw - min(760px,100vw - 36px))/2))}
}

@media (max-width: 680px){
  :root{--shell:calc(100% - 28px)}
  .nav-cta{font-size:9px;padding:9px 10px}
  .hero-photo,.hero-shade{height:50svh;min-height:340px;max-height:500px}
  .hero-photo{background-position:60% 20%!important}
  .hero-content{padding-top:28px!important}
  .hero h1{font-size:clamp(39px,11.5vw,54px)}
  .section,.signal-method{padding-block:68px}
  .section-no{margin-bottom:28px}
  .method-cards,.coaching-grid{grid-template-columns:1fr}
  .method-card{min-height:260px}
  .spotify-placeholder,.spotify-wrap>iframe{min-height:400px;height:400px}
  .instrument-copy{padding:54px 14px}
  .instrument-image{aspect-ratio:4/5}
  .about-media img{aspect-ratio:4/5}
  .signal-divider{display:none}
  .footer div{gap:14px}
}

@media (max-width: 430px){
  :root{--shell:calc(100% - 22px)}
  .brand span{width:32px;height:32px}
  .hero-photo,.hero-shade{min-height:320px}
  .hero h1{font-size:38px}
  .hero-copy>p:last-of-type{font-size:15px}
  .section h2,.about h2,.join h2,.method-intro h2{font-size:36px}
  .method-card,.coaching-grid article,.music-story{padding-left:20px;padding-right:20px}
  .tabs{margin-top:22px}
  .join-content{padding:66px 0}
}

/* Touch devices do not need hover-heavy visual effects. */
@media (hover:none),(pointer:coarse){
  .method-card:hover,.about-media:hover,[data-signal-visual].signal-hover{transform:none!important;box-shadow:none!important}
  .method-card::before,.method-card::after,[data-signal-visual]::before,[data-signal-visual]::after{display:none!important}
  .method-route i::after,.signal-wave i{animation:none!important}
  .backdrop-filter{backdrop-filter:none}
}
/* Ensure the optimized hero wins over legacy director-cut declarations. */
.hero-photo{background-image:image-set(url('assets/tim-graffiti-640.webp') 1x,url('assets/tim-graffiti-1600.webp') 2x)!important}
@media(max-width:900px){.hero-photo{background-image:image-set(url('assets/tim-graffiti-640.webp') 1x,url('assets/tim-graffiti-1024.webp') 2x)!important}}

/* =========================================================
   THE SIGNAL v8 — POLISH RELEASE
   Type safety, cross-device rhythm and restrained performance.
   ========================================================= */

/* Prevent italic display faces and animated reveals from clipping final glyphs. */
h1,h2,h3,.hero-copy,.section-head>div,.method-intro>div{
  overflow:visible;
}
.hero h1,.section h2,.about h2,.join h2,.method-intro h2{
  max-width:100%;
  padding-right:.12em;
  text-wrap:balance;
}
.hero h1 em,.section h2 em,.about h2 em,.join h2 em,.method-intro h2 em{
  display:inline-block;
  padding-right:.09em;
  padding-bottom:.04em;
  -webkit-box-decoration-break:clone;
  box-decoration-break:clone;
}
.section-head h2{
  letter-spacing:-.047em;
  line-height:.98;
}
.section-head h2 em{
  letter-spacing:-.035em;
}

/* More stable shell and fluid spacing from phones to ultrawide displays. */
:root{
  --shell:min(1240px,calc(100vw - clamp(24px,5vw,72px)));
  --section-space:clamp(72px,9vw,132px);
}
.section{padding-block:var(--section-space)}
.signal-method{padding-block:clamp(78px,9vw,125px)}

/* Preserve photographic focus and avoid oversized hero crops. */
.hero-photo{background-position:center 26%!important}
.hero-copy>p:last-of-type{max-width:650px}
.hero-actions{row-gap:12px}
.btn,.nav-cta{touch-action:manipulation}

/* Cleaner cards at intermediate widths. */
.method-card,.coaching-grid article,.resource-card{
  min-width:0;
}
.method-card h3,.coaching-grid h3,.resource-card h3{
  overflow-wrap:anywhere;
}
.method-card p,.coaching-grid p,.resource-card p{
  text-wrap:pretty;
}

/* Embeds retain a predictable shape while loading. */
.premium-video,.video-frame{aspect-ratio:16/9}
.premium-video iframe,.video-frame iframe{width:100%;height:100%;border:0;display:block}
.spotify-wrap,.spotify-placeholder{contain:layout paint}

/* Tablet refinement: two-column content without cramped type. */
@media (min-width:681px) and (max-width:1120px){
  .hero-photo,.hero-shade{height:clamp(470px,58svh,660px)}
  .hero-content{padding-top:42px!important;padding-bottom:80px!important}
  .hero h1{font-size:clamp(54px,8vw,76px)}
  .section-head h2,.method-intro h2,.about h2,.join h2{font-size:clamp(48px,7vw,68px)}
  .method-card{min-height:320px}
  .coaching-grid article{min-height:300px}
}

/* Phones: deliberate image crop, readable type, generous tap targets. */
@media (max-width:680px){
  body{-webkit-text-size-adjust:100%}
  .nav{padding-inline:0}
  .hero-photo,.hero-shade{
    height:clamp(330px,51svh,500px);
    min-height:0;
  }
  .hero-photo{background-position:61% 23%!important}
  .hero-content{padding:30px 0 62px!important}
  .hero h1{
    font-size:clamp(39px,11.2vw,54px);
    line-height:.96;
    letter-spacing:-.042em;
    padding-right:.16em;
  }
  .hero h1 em{padding-right:.12em}
  .section-head h2,.method-intro h2,.about h2,.join h2{
    font-size:clamp(37px,10.6vw,50px);
    line-height:.99;
    letter-spacing:-.04em;
    padding-right:.16em;
  }
  .section-head h2 em,.method-intro h2 em,.about h2 em,.join h2 em{padding-right:.12em}
  .section-head>p,.method-intro>p{line-height:1.65}
  .method-card{min-height:0;padding-bottom:68px}
  .coaching-grid article{min-height:0}
  .btn,.join button,.notes-form button{min-height:52px}
  .premium-video,.video-frame{aspect-ratio:16/10}
  .about-media img,.instrument-image{border-radius:0}
}

@media (max-width:390px){
  .hero h1{font-size:clamp(37px,10.8vw,42px)}
  .section-head h2,.method-intro h2,.about h2,.join h2{font-size:clamp(35px,10.2vw,40px)}
  .nav-cta{max-width:124px;line-height:1.15;text-align:center}
}

/* Hover only where a real pointer exists; this avoids compositing glitches on iOS/Safari. */
@media (hover:hover) and (pointer:fine){
  .method-card{will-change:transform}
}
@media (hover:none),(pointer:coarse){
  .method-card,.premium-video,.video-frame,.instrument-image,.resource-photo,.hero-photo{
    will-change:auto!important;
    filter:none!important;
  }
}

/* Keep the experience usable before remote fonts arrive. */
@font-face{font-family:"Signal Fallback";src:local("Arial");size-adjust:100%}
body{font-synthesis:none}

/* Print and reduced-data users receive the calmest version. */
@media (prefers-reduced-data:reduce){
  .grain,.ambient,.signal-rail,.hero-light{display:none!important}
  .reveal{opacity:1!important;transform:none!important}
}

/* =========================================================
   THE SIGNAL v9 — LIVING SIGNAL
   Less dead space, richer transitions, one continuous story.
   ========================================================= */
:root{
  --v9-plum:rgba(144,84,151,.18);
  --v9-blue:rgba(69,133,154,.16);
  --v9-amber:rgba(202,139,90,.12);
}

/* Tighten the old section rhythm without making it cramped. */
.section{padding-top:clamp(76px,8vw,118px);padding-bottom:clamp(76px,8vw,118px)}
.signal-method{padding-top:clamp(92px,9vw,128px);padding-bottom:clamp(86px,8vw,116px)}
.section-head{margin-bottom:clamp(34px,4.2vw,58px)}
.section-no{margin-bottom:clamp(30px,3.5vw,46px)}

/* Each large chapter now has a different, extremely subtle tonal field. */
.coaching{background:
  radial-gradient(75% 70% at 8% 16%,var(--v9-plum),transparent 66%),
  linear-gradient(180deg,#0d0b09 0%,#0b0909 100%)}
.music{background:
  radial-gradient(72% 72% at 94% 42%,var(--v9-blue),transparent 67%),
  linear-gradient(180deg,#0a0908,#0b090b)}
.watch{background:
  radial-gradient(68% 72% at 7% 58%,rgba(91,74,144,.13),transparent 68%),
  linear-gradient(180deg,#0b090b,#09090a)}
.instrument{background:
  radial-gradient(75% 68% at 90% 18%,var(--v9-amber),transparent 68%),
  linear-gradient(180deg,#09090a,#0c0a09)}
.signal-notes{background:
  radial-gradient(70% 72% at 14% 48%,rgba(55,120,140,.12),transparent 68%),
  linear-gradient(180deg,#0c0a09,#090909)}

/* Cinematic chapter bridges. */
.story-transition{
  --transition-accent:rgba(205,151,185,.62);
  position:relative;
  height:clamp(150px,18vw,250px);
  overflow:hidden;
  isolation:isolate;
  background:
    radial-gradient(55% 130% at 50% 50%,rgba(112,77,130,.12),transparent 70%),
    linear-gradient(180deg,#0b0909 0%,#09090a 100%);
}
.story-transition::before,.story-transition::after{
  content:"";position:absolute;inset:0;pointer-events:none
}
.story-transition::before{
  opacity:.24;
  background-image:linear-gradient(rgba(255,255,255,.022) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.016) 1px,transparent 1px);
  background-size:64px 64px;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 18%,#000 82%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 18%,#000 82%,transparent)
}
.story-transition::after{
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.055),transparent);
  height:1px;top:50%;bottom:auto;opacity:.38
}
.transition-word{
  position:absolute;left:50%;top:50%;z-index:-1;
  transform:translate(-50%,-51%);
  font:600 clamp(100px,20vw,300px)/.72 "Space Grotesk",sans-serif;
  letter-spacing:-.09em;color:transparent;
  -webkit-text-stroke:1px rgba(255,255,255,.038);
  white-space:nowrap;user-select:none
}
.transition-inner{
  height:100%;display:grid;grid-template-columns:auto 1fr auto;gap:28px;align-items:center;position:relative
}
.transition-kicker,.transition-index{
  font:600 9px/1 "Space Grotesk",sans-serif;letter-spacing:.2em;color:rgba(232,224,218,.48);white-space:nowrap
}
.transition-index{font-size:10px;color:rgba(217,165,193,.62)}
.transition-wave{width:100%;height:76px;overflow:visible;filter:drop-shadow(0 0 13px rgba(185,112,169,.12))}
.transition-wave path{fill:none;stroke:var(--transition-accent);stroke-width:1.15;vector-effect:non-scaling-stroke;stroke-dasharray:7 8;animation:v9SignalFlow 18s linear infinite}
.transition-wave.soft path{stroke:rgba(115,177,190,.48);stroke-dasharray:3 11;animation-duration:24s}
.transition-play{--transition-accent:rgba(110,175,190,.54)}
.transition-create{--transition-accent:rgba(205,146,98,.52)}
.transition-pulse{height:76px;display:flex;align-items:center;justify-content:center;gap:clamp(8px,1.4vw,20px);overflow:hidden}
.transition-pulse i{display:block;width:1px;height:18px;background:linear-gradient(180deg,transparent,var(--transition-accent),transparent);box-shadow:0 0 12px var(--transition-accent);animation:v9Pulse 3.4s ease-in-out infinite;transform-origin:center}
.transition-pulse i:nth-child(2n){animation-delay:-.8s}.transition-pulse i:nth-child(3n){animation-delay:-1.7s}.transition-pulse i:nth-child(5n){animation-delay:-2.4s}
@keyframes v9SignalFlow{to{stroke-dashoffset:-300}}
@keyframes v9Pulse{0%,100%{transform:scaleY(.4);opacity:.3}50%{transform:scaleY(3.1);opacity:.85}}

/* Editorial quote instead of another black gap. */
.quote-bridge{
  position:relative;min-height:clamp(240px,28vw,390px);display:grid;place-content:center;text-align:center;overflow:hidden
}
.quote-bridge::before{
  content:"SIGNAL";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  font:600 clamp(110px,23vw,330px)/.7 "Space Grotesk",sans-serif;letter-spacing:-.1em;
  color:rgba(255,255,255,.018);pointer-events:none
}
.quote-mark{font:italic 500 66px/1 "Newsreader",serif;color:rgba(205,158,186,.6);height:38px}
.quote-bridge blockquote{position:relative;margin:12px 0 24px;font:italic 400 clamp(34px,5vw,72px)/.98 "Newsreader",serif;letter-spacing:-.035em;color:#eee8e2}
.quote-bridge blockquote em{color:#d8b2ca;font-weight:400}
.quote-label{font:600 9px/1 "Space Grotesk",sans-serif;letter-spacing:.22em;color:rgba(236,227,219,.43)}

/* A subtle line visually carries the visitor through each section. */
.section>.shell,.signal-method>.shell{position:relative}
.section>.shell::before,.signal-method>.shell::before{
  content:"";position:absolute;left:-38px;top:0;bottom:0;width:1px;
  background:linear-gradient(180deg,transparent,rgba(208,154,188,.16) 18%,rgba(92,158,177,.12) 68%,transparent)
}

/* Gentle visual motion only where it has value. */
@media (prefers-reduced-motion:no-preference) and (pointer:fine){
  .transition-word{will-change:transform;transform:translate(-50%,calc(-51% + var(--v9-shift,0px)))}
}

@media(max-width:900px){
  .story-transition{height:170px}
  .transition-inner{grid-template-columns:1fr auto;gap:16px}
  .transition-kicker{grid-column:1 / -1;align-self:end}
  .transition-wave,.transition-pulse{align-self:start;height:58px}
  .transition-index{align-self:start;padding-top:22px}
  .section>.shell::before,.signal-method>.shell::before{display:none}
}
@media(max-width:600px){
  .section{padding-top:68px;padding-bottom:68px}
  .signal-method{padding-top:78px;padding-bottom:72px}
  .story-transition{height:136px}
  .transition-word{font-size:29vw;-webkit-text-stroke-color:rgba(255,255,255,.05)}
  .transition-inner{padding-top:20px;padding-bottom:20px}
  .transition-kicker{font-size:7px;letter-spacing:.15em;white-space:normal}
  .transition-index{font-size:8px}
  .transition-wave,.transition-pulse{height:48px}
  .quote-bridge{min-height:270px;padding-top:54px;padding-bottom:54px}
  .quote-bridge blockquote{font-size:clamp(35px,10vw,49px)}
}
@media(prefers-reduced-motion:reduce){
  .transition-wave path,.transition-pulse i{animation:none}
}

/* =========================================================
   THE SIGNAL v10 — FINAL CUT
   Conversion-ready hero + PineGap artist testimonial.
   ========================================================= */
.hero-signup{
  width:min(100%,390px);justify-self:end;align-self:end;
  padding:26px;border:1px solid rgba(255,255,255,.15);
  background:linear-gradient(145deg,rgba(20,17,15,.88),rgba(10,9,8,.72));
  -webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);
  box-shadow:0 28px 80px rgba(0,0,0,.34),inset 0 1px 0 rgba(255,255,255,.05)
}
.hero-signup-kicker{display:block;color:#d09a70;font:600 9px "Space Grotesk";letter-spacing:.18em;margin-bottom:14px}
.hero-signup h2{font:500 30px/1.02 "Space Grotesk";letter-spacing:-.04em;margin:0 0 12px}
.hero-signup>p{color:#bdb4ac;font-size:14px;line-height:1.55;margin:0 0 18px}
.hero-signup form{display:grid;gap:10px}
.hero-signup label{display:grid;gap:6px}
.hero-signup label span{color:#8f8780;font:600 9px "Space Grotesk";letter-spacing:.12em;text-transform:uppercase}
.hero-signup input,.hero-signup button{width:100%;min-height:48px;border:1px solid rgba(255,255,255,.13);border-radius:0;padding:13px 14px;font:500 13px "DM Sans"}
.hero-signup input{background:rgba(5,5,5,.48);color:#fff;outline:none}
.hero-signup input:focus{border-color:rgba(213,167,126,.7);box-shadow:0 0 0 3px rgba(213,167,126,.08)}
.hero-signup button{background:#ede4db;color:#15110f;font-weight:600;cursor:pointer}
.hero-signup small,.hero-signup .form-status{color:#817a74;font-size:10px;line-height:1.4}

.testimonial{position:relative;overflow:hidden;background:linear-gradient(180deg,#0b0908 0%,#100c0b 50%,#0a0908 100%)}
.testimonial-glow{position:absolute;width:720px;height:720px;right:-240px;top:-300px;border-radius:50%;background:radial-gradient(circle,rgba(142,71,118,.16),transparent 66%);filter:blur(20px);pointer-events:none}
.testimonial-shell{position:relative;z-index:1}
.testimonial-grid{display:grid;grid-template-columns:.8fr 1.2fr;gap:clamp(48px,8vw,120px);align-items:center}
.testimonial-meta h2{font-size:clamp(48px,6vw,86px);padding-right:.12em}
.testimonial-signal{display:flex;align-items:center;gap:5px;height:44px;margin-top:36px;opacity:.55}
.testimonial-signal i{display:block;width:2px;height:9px;background:#d5a77e;animation:testimonialPulse 1.8s ease-in-out infinite}
.testimonial-signal i:nth-child(2){height:18px;animation-delay:.1s}.testimonial-signal i:nth-child(3){height:30px;animation-delay:.2s}.testimonial-signal i:nth-child(4){height:16px;animation-delay:.3s}.testimonial-signal i:nth-child(5){height:38px;animation-delay:.4s}.testimonial-signal i:nth-child(6){height:22px;animation-delay:.5s}.testimonial-signal i:nth-child(7){height:12px;animation-delay:.6s}.testimonial-signal i:nth-child(8){height:27px;animation-delay:.7s}.testimonial-signal i:nth-child(9){height:9px;animation-delay:.8s}
@keyframes testimonialPulse{0%,100%{transform:scaleY(.72);opacity:.45}50%{transform:scaleY(1.15);opacity:1}}
.testimonial-card{position:relative;margin:0;padding:clamp(32px,5vw,66px);border:1px solid rgba(255,255,255,.14);background:linear-gradient(145deg,rgba(255,255,255,.045),rgba(255,255,255,.012));box-shadow:0 34px 100px rgba(0,0,0,.28)}
.testimonial-card:before{content:"";position:absolute;inset:0;border:1px solid transparent;background:linear-gradient(135deg,rgba(213,167,126,.35),transparent 35%,transparent 70%,rgba(116,77,145,.22)) border-box;-webkit-mask:linear-gradient(#fff 0 0) padding-box,linear-gradient(#fff 0 0);-webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none}
.testimonial-quote-mark{position:absolute;right:34px;top:18px;color:rgba(213,167,126,.16);font:italic 130px/1 "Newsreader"}
.testimonial-card blockquote{position:relative;margin:0;color:#e9e0d8;font:italic clamp(25px,3vw,40px)/1.38 "Newsreader";letter-spacing:-.02em}
.testimonial-card figcaption{display:flex;align-items:center;gap:14px;margin-top:34px;padding-top:22px;border-top:1px solid rgba(255,255,255,.11)}
.testimonial-avatar{width:46px;height:46px;display:grid;place-items:center;border:1px solid rgba(213,167,126,.45);color:#d5a77e;font:600 11px "Space Grotesk";letter-spacing:.1em}
.testimonial-card figcaption>span:last-child{display:grid;gap:3px}.testimonial-card figcaption strong{font:600 13px "Space Grotesk";letter-spacing:.1em;text-transform:uppercase}.testimonial-card figcaption small{color:#888079;font-size:12px}
.transition-trust{background:linear-gradient(180deg,#0a0908,#0d0a0c)}

.version-tag{position:fixed;right:10px;bottom:8px;z-index:40;color:rgba(255,255,255,.26);font:600 8px "Space Grotesk";letter-spacing:.12em;pointer-events:none}

@media(max-width:900px){
  .hero-content{grid-template-columns:1fr;gap:28px}
  .hero-signup{justify-self:start;width:min(100%,560px);display:grid;grid-template-columns:.85fr 1.15fr;gap:20px;align-items:end;padding:20px}
  .hero-signup h2{font-size:24px}.hero-signup>p{margin-bottom:0}.hero-signup form{grid-column:2;grid-row:1/4}.hero-signup-kicker{grid-column:1}.hero-signup h2{grid-column:1}.hero-signup>p{grid-column:1}
  .testimonial-grid{grid-template-columns:1fr;gap:36px}
}
@media(max-width:600px){
  .hero{min-height:100svh}
  .hero-content{padding-top:106px;padding-bottom:72px;gap:18px}
  .hero-copy>p:last-of-type{display:none}
  .hero-actions{margin-top:22px;display:grid;grid-template-columns:1fr 1fr}.hero-actions .btn{padding:13px 10px;text-align:center;font-size:11px}
  .hero-signup{display:block;width:100%;padding:16px;background:rgba(11,9,8,.82)}
  .hero-signup-kicker{margin-bottom:8px}.hero-signup h2{font-size:20px;margin-bottom:7px}.hero-signup>p{display:none}
  .hero-signup form{grid-template-columns:1fr 1fr;gap:7px}.hero-signup label{gap:4px}.hero-signup label span{display:none}
  .hero-signup input,.hero-signup button{min-height:44px;padding:11px;font-size:12px}.hero-signup button{grid-column:1/-1}.hero-signup small{display:none}
  .testimonial{padding-top:94px;padding-bottom:94px}.testimonial-card{padding:28px 24px}.testimonial-card blockquote{font-size:25px}.testimonial-quote-mark{font-size:88px;right:18px;top:10px}
}
@media(prefers-reduced-motion:reduce){.testimonial-signal i{animation:none}}

/* =========================================================
   THE SIGNAL v10.1 — REFINED CUT
   Clean hero and a quieter, editorial artist testimonial.
   ========================================================= */
.hero-content{
  grid-template-columns:minmax(0,760px);
  justify-content:start;
  gap:0;
}
.hero-copy{max-width:760px}

/* The mailing form remains in the dedicated Notes / Join sections. */
.hero-signup{display:none!important}

.artist-note{
  position:relative;
  padding:clamp(72px,8vw,112px) 0;
  background:
    radial-gradient(circle at 78% 30%,rgba(112,72,124,.09),transparent 36%),
    linear-gradient(180deg,#0a0908 0%,#0d0b0a 50%,#0a0908 100%);
}
.artist-note-inner{
  max-width:1040px;
  display:grid;
  grid-template-columns:180px minmax(0,1fr);
  gap:clamp(38px,7vw,92px);
  align-items:center;
  padding-top:34px;
  padding-bottom:34px;
  border-top:1px solid rgba(255,255,255,.12);
  border-bottom:1px solid rgba(255,255,255,.12);
}
.artist-note-label{display:grid;gap:7px;align-content:center}
.artist-note-label .eyebrow{margin:0 0 12px}
.artist-note-label strong{
  color:#eee6de;
  font:600 15px "Space Grotesk";
  letter-spacing:.12em;
  text-transform:uppercase;
}
.artist-note-label small{color:#7f7872;font-size:12px}
.artist-note-quote{margin:0;position:relative}
.artist-note-quote:before{
  content:"“";
  position:absolute;
  left:-.38em;
  top:-.34em;
  color:rgba(213,167,126,.18);
  font:italic 78px/1 "Newsreader";
}
.artist-note-quote blockquote{
  margin:0;
  max-width:820px;
  color:#ddd4cc;
  font:italic clamp(23px,2.45vw,34px)/1.48 "Newsreader";
  letter-spacing:-.012em;
}

/* The transition after the quote is intentionally quieter. */
.transition-trust{height:clamp(110px,12vw,160px)}
.transition-trust .transition-word{opacity:.68}

@media(max-width:900px){
  .hero-content{grid-template-columns:1fr}
  .artist-note-inner{grid-template-columns:140px 1fr;gap:34px}
}
@media(max-width:600px){
  .hero-content{padding-top:116px;padding-bottom:92px}
  .hero-copy>p:last-of-type{display:block;font-size:15px;line-height:1.6;max-width:34em}
  .hero-actions{display:flex;flex-direction:column;align-items:stretch;max-width:310px}
  .artist-note{padding:66px 0}
  .artist-note-inner{grid-template-columns:1fr;gap:24px;padding-top:28px;padding-bottom:30px}
  .artist-note-label{grid-template-columns:auto 1fr;column-gap:12px;align-items:baseline}
  .artist-note-label .eyebrow{grid-column:1/-1;margin-bottom:4px}
  .artist-note-label small{justify-self:start}
  .artist-note-quote:before{left:-.12em;top:-.42em;font-size:62px}
  .artist-note-quote blockquote{font-size:24px;line-height:1.5;padding-left:12px}
  .transition-trust{height:104px}
}

/* =========================================================
   THE SIGNAL v11 — THE SIGNAL EXPERIENCE
   Studio atmosphere, living McRocklin & Hutch player and one
   continuous creative signal. Progressive and mobile-safe.
   ========================================================= */
:root{--studio-amber:rgba(218,151,91,.16);--signal-live:#d7a57e;--signal-violet:#8f75b5}
body{position:relative}
.studio-atmosphere{position:fixed;inset:0;z-index:-3;overflow:hidden;pointer-events:none;opacity:.68}
.studio-atmosphere:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(7,7,7,.38),rgba(7,7,7,.86));}
.studio-console{position:absolute;right:-5vw;top:32vh;width:min(52vw,720px);height:260px;transform:perspective(700px) rotateX(62deg) rotateZ(-7deg);border:1px solid rgba(255,255,255,.035);background:repeating-linear-gradient(90deg,transparent 0 54px,rgba(255,255,255,.022) 55px 56px),linear-gradient(180deg,rgba(87,69,56,.06),transparent);filter:blur(.2px)}
.studio-console span{position:relative;display:inline-block;width:3px;height:76px;margin:82px 24px;background:linear-gradient(#563e31,#bd7951 55%,#5f4336);box-shadow:0 -22px 0 rgba(121,74,49,.28)}
.vu-bank{position:absolute;left:7vw;top:58vh;display:flex;gap:12px;transform:rotate(-2deg)}
.vu-bank i{width:82px;height:48px;border:1px solid rgba(255,255,255,.04);background:radial-gradient(circle at 50% 110%,rgba(221,157,89,.15),transparent 60%);position:relative}
.vu-bank i:after{content:"";position:absolute;width:1px;height:28px;left:50%;bottom:5px;background:rgba(226,165,103,.32);transform-origin:bottom;animation:vuNeedle 5.5s ease-in-out infinite}
.vu-bank i:nth-child(2):after{animation-delay:-2.1s}.vu-bank i:nth-child(3):after{animation-delay:-3.7s}
.patchbay{position:absolute;left:14vw;top:12vh;width:360px;height:92px;opacity:.25;background:radial-gradient(circle,rgba(220,171,124,.25) 0 1px,transparent 1.5px);background-size:18px 18px;transform:rotate(3deg)}
.studio-lamp{position:absolute;right:7vw;top:6vh;width:360px;height:360px;border-radius:50%;background:radial-gradient(circle,var(--studio-amber),transparent 68%);filter:blur(28px);animation:lampBreath 9s ease-in-out infinite}
@keyframes vuNeedle{0%,100%{transform:rotate(-24deg)}35%{transform:rotate(22deg)}55%{transform:rotate(-4deg)}72%{transform:rotate(14deg)}}
@keyframes lampBreath{50%{opacity:.62;transform:scale(1.08)}}

.creative-signal{position:fixed;right:max(10px,calc((100vw - 1380px)/2));top:0;width:72px;height:100vh;z-index:7;pointer-events:none;overflow:visible;opacity:.78}
.creative-signal path{fill:none;vector-effect:non-scaling-stroke}
.creative-signal-bed{stroke:rgba(255,255,255,.07);stroke-width:1.1}
.creative-signal-live{stroke:url(#none);stroke:var(--signal-live);stroke-width:1.6;stroke-linecap:round;filter:drop-shadow(0 0 5px rgba(215,165,126,.38));stroke-dasharray:1300;stroke-dashoffset:1300}
.creative-signal-node{fill:#e8c4a7;filter:drop-shadow(0 0 7px #d7a57e);transform-box:fill-box;transform-origin:center;opacity:0}
body.signal-awake .creative-signal-live{filter:drop-shadow(0 0 8px rgba(215,165,126,.68))}
body.signal-awake .creative-signal-node{opacity:1;animation:nodePulse 1.5s ease-in-out infinite}
@keyframes nodePulse{50%{transform:scale(1.8);opacity:.45}}

.now-playing{position:relative;min-height:440px;border:1px solid rgba(255,255,255,.11);background:linear-gradient(145deg,rgba(38,30,27,.72),rgba(9,9,10,.9));box-shadow:0 35px 100px rgba(0,0,0,.34);overflow:hidden}
.now-playing:before{content:"";position:absolute;inset:-20%;background:radial-gradient(circle at 32% 32%,rgba(204,119,89,.16),transparent 30%),radial-gradient(circle at 70% 70%,rgba(93,72,151,.16),transparent 32%);filter:blur(20px)}
.now-playing .player-top,.now-playing-body,.now-playing .embed-fallback{position:relative;z-index:1}
.now-playing-body{padding:clamp(32px,5vw,60px);display:grid;align-content:center;min-height:340px}
.now-playing-button{display:flex;align-items:center;gap:22px;width:100%;border:0;padding:0;text-align:left;color:inherit;background:none;cursor:pointer}
.play-disc{width:82px;height:82px;flex:0 0 auto;border-radius:50%;display:grid;place-items:center;border:1px solid rgba(230,191,159,.45);background:radial-gradient(circle at 35% 30%,rgba(255,255,255,.12),transparent 23%),linear-gradient(145deg,#2a211e,#090909);box-shadow:0 18px 50px rgba(0,0,0,.45),inset 0 0 0 14px rgba(255,255,255,.018);transition:.45s ease}
.play-disc i{font-style:normal;color:#e4bea0;font-size:20px;margin-left:4px}.play-copy{display:grid}.play-copy small{color:#b17a5a;font:600 9px "Space Grotesk";letter-spacing:.18em}.play-copy strong{font:500 clamp(32px,4.5vw,56px)/1 "Space Grotesk";letter-spacing:-.055em;margin:5px 0 4px}.play-copy em{color:#a9a09a;font:italic 19px "Newsreader"}
.now-playing-button:hover .play-disc{transform:rotate(12deg) scale(1.04);border-color:#d7a57e;box-shadow:0 0 0 8px rgba(215,165,126,.06),0 25px 70px rgba(0,0,0,.55)}
.now-wave{height:72px;display:flex;align-items:center;gap:5px;margin:34px 0 20px;opacity:.48;overflow:hidden}
.now-wave i{width:2px;height:12px;background:linear-gradient(#9675b1,#d7a57e);transform-origin:center;animation:waveIdle 3.2s ease-in-out infinite;animation-delay:calc(var(--n,1)*-.11s)}
.now-wave i:nth-child(3n){height:34px}.now-wave i:nth-child(4n){height:52px}.now-wave i:nth-child(5n){height:24px}
.now-playing.is-playing .now-wave i{animation-duration:.9s}.now-playing.is-playing .play-disc{animation:discTurn 5s linear infinite}.now-playing.is-playing:after{content:"SIGNAL ACTIVE";position:absolute;right:18px;top:18px;color:#d7a57e;font:600 8px "Space Grotesk";letter-spacing:.17em}
@keyframes waveIdle{0%,100%{transform:scaleY(.35)}50%{transform:scaleY(1)}}@keyframes discTurn{to{transform:rotate(360deg)}}
.now-playing-meta{display:flex;gap:14px;flex-wrap:wrap}.now-playing-meta span{color:#77716c;font:600 8px "Space Grotesk";letter-spacing:.13em;padding-right:14px;border-right:1px solid rgba(255,255,255,.12)}

.studio-note{position:relative;min-height:310px;display:grid;place-items:center;padding-top:62px;padding-bottom:62px}
.studio-note:before{content:"";position:absolute;width:70%;height:100%;background:radial-gradient(circle,rgba(200,128,72,.08),transparent 66%);filter:blur(28px)}
.studio-note-paper{position:relative;width:min(660px,92%);padding:44px 52px 38px;transform:rotate(-1.2deg);border:1px solid rgba(255,255,255,.09);background:linear-gradient(115deg,rgba(66,53,42,.25),rgba(22,19,17,.58));box-shadow:0 28px 90px rgba(0,0,0,.3)}
.studio-note-paper:before{content:"";position:absolute;inset:0;opacity:.12;background:repeating-linear-gradient(0deg,transparent 0 27px,rgba(231,214,196,.25) 28px)}
.studio-note-label,.studio-note-signature,.studio-note blockquote{position:relative}.studio-note-label{color:#8f8175;font:600 8px "Space Grotesk";letter-spacing:.17em}.studio-note blockquote{margin:28px 0 18px;color:#e3d8ce;font:italic clamp(31px,4.4vw,54px)/1.1 "Newsreader";letter-spacing:-.025em}.studio-note blockquote em{color:#d7a57e}.studio-note-signature{color:#91877f;font:italic 16px "Newsreader"}

.instrument-image{isolation:isolate}.string-light{position:absolute;z-index:3;top:-20%;bottom:-20%;left:-24%;width:11%;background:linear-gradient(90deg,transparent,rgba(255,239,220,.82),transparent);filter:blur(7px);opacity:0;transform:skewX(-15deg);pointer-events:none}.instrument-image:hover .string-light{animation:stringSweep 1.3s cubic-bezier(.2,.7,.2,1)}@keyframes stringSweep{0%{left:-24%;opacity:0}20%{opacity:.48}65%{opacity:.28}100%{left:112%;opacity:0}}

.section{transition:background-color .8s ease}.coaching,.music,.watch,.instrument,.about,.signal-notes{background-blend-mode:screen,normal}
@media(max-width:980px){.creative-signal{right:2px;width:40px;opacity:.45}.studio-console{width:80vw;right:-30vw}.vu-bank{display:none}.now-playing{min-height:360px}.now-playing-body{min-height:280px}}
@media(max-width:600px){.studio-atmosphere{opacity:.35}.patchbay,.studio-console{display:none}.creative-signal{display:none}.now-playing{min-height:auto}.now-playing-body{padding:28px 22px;min-height:300px}.now-playing-button{gap:15px}.play-disc{width:64px;height:64px}.play-copy strong{font-size:34px}.now-wave{height:56px;margin:24px 0 16px}.now-playing-meta{gap:8px}.studio-note{min-height:260px}.studio-note-paper{padding:34px 24px 30px;transform:none}.studio-note blockquote{font-size:34px}.instrument-image:hover .string-light{animation:none}}
@media(prefers-reduced-motion:reduce){.vu-bank i:after,.studio-lamp,.now-wave i,.now-playing.is-playing .play-disc,.creative-signal-node,.instrument-image:hover .string-light{animation:none!important}}

/* v11.1 — classic Spotify player restored inside the studio experience */
.signal-spotify{position:relative;overflow:hidden;background:linear-gradient(145deg,rgba(30,24,22,.9),rgba(9,9,10,.96));box-shadow:0 35px 100px rgba(0,0,0,.34),0 0 70px rgba(183,122,77,.05)}
.signal-spotify:before{content:"";position:absolute;inset:-35%;pointer-events:none;background:radial-gradient(circle at 25% 20%,rgba(204,119,89,.12),transparent 30%),radial-gradient(circle at 78% 82%,rgba(93,72,151,.10),transparent 32%);filter:blur(28px)}
.signal-spotify>*{position:relative;z-index:1}
.spotify-frame{border-radius:12px;overflow:hidden;background:#121212;min-height:352px}
.spotify-frame iframe{display:block;width:100%;height:352px;border:0}
.spotify-signal{height:22px;margin:12px 0 5px;overflow:hidden;opacity:.55}
.spotify-signal span{display:block;width:220%;height:100%;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 22'%3E%3Cpath d='M0 11 H170 L182 11 L190 4 L201 18 L212 7 L223 14 L235 11 H420 L432 11 L440 2 L449 20 L459 6 L470 16 L481 11 H690 L702 11 L710 7 L720 15 L731 11 H900 L912 11 L920 3 L930 19 L940 8 L950 14 L960 11 H1200' fill='none' stroke='rgba(215,165,126,.85)' stroke-width='1'/%3E%3C/svg%3E") center/1200px 22px repeat-x;animation:spotifySignal 22s linear infinite}
@keyframes spotifySignal{to{transform:translateX(-1200px)}}
@media(max-width:600px){.spotify-frame,.spotify-frame iframe{min-height:352px;height:352px}.signal-spotify{padding:12px}.spotify-signal{margin-top:9px}}
@media(prefers-reduced-motion:reduce){.spotify-signal span{animation:none}}

/* =========================================================
   THE SIGNAL v11.2 — AUTHENTIC 3D SPECTRUM DISPLAY
   Playback state follows Spotify's official iFrame API.
   ========================================================= */
.spotify-frame #spotify-embed,.spotify-frame #spotify-embed iframe{display:block;width:100%;height:352px;border:0}
.spectrum-stage{position:relative;height:172px;margin:14px 0 9px;overflow:hidden;border:1px solid rgba(255,255,255,.1);border-radius:12px;background:linear-gradient(180deg,#090a0e 0%,#111018 52%,#060609 100%);perspective:900px;isolation:isolate;box-shadow:inset 0 1px rgba(255,255,255,.04),inset 0 -28px 55px rgba(0,0,0,.58)}
.spectrum-stage:before{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse at 50% 112%,rgba(176,76,255,.24),transparent 52%),radial-gradient(circle at 14% 20%,rgba(0,204,255,.09),transparent 32%),radial-gradient(circle at 88% 22%,rgba(255,57,119,.08),transparent 30%);mix-blend-mode:screen}
.spectrum-backdrop{position:absolute;inset:0;background:repeating-linear-gradient(0deg,transparent 0 22px,rgba(255,255,255,.025) 23px),repeating-linear-gradient(90deg,transparent 0 42px,rgba(255,255,255,.018) 43px);mask-image:linear-gradient(to bottom,rgba(0,0,0,.75),transparent 92%)}
.spectrum-bars{position:absolute;left:5%;right:5%;bottom:42px;height:108px;display:grid;grid-template-columns:repeat(24,1fr);align-items:end;gap:clamp(3px,.55vw,7px);transform:rotateX(6deg);transform-origin:center bottom;filter:drop-shadow(0 12px 18px rgba(0,0,0,.6))}
.eq-bar{--level:.18;--delay:0s;position:relative;height:calc(14px + (var(--level) * 92px));min-height:12px;transform-style:preserve-3d;transform-origin:center bottom;transition:height .18s cubic-bezier(.22,.61,.36,1),filter .25s ease;animation:eqIdle 3.8s ease-in-out infinite;animation-delay:var(--delay)}
.eq-bar-face{position:absolute;inset:0;border-radius:2px 2px 1px 1px;background:linear-gradient(to top,#6b25ff 0 18%,#0aa7ff 18% 38%,#05e6c2 38% 58%,#b9f300 58% 75%,#ffc400 75% 89%,#ff3b66 89% 100%);box-shadow:inset 1px 0 rgba(255,255,255,.22),inset -2px 0 rgba(0,0,0,.23),0 0 12px rgba(22,201,255,.2);clip-path:polygon(0 100%,0 0,100% 0,100% 100%)}
.eq-bar-face:after{content:"";position:absolute;inset:0;background:repeating-linear-gradient(to top,transparent 0 5px,rgba(4,4,7,.72) 5px 7px);border-radius:inherit}
.eq-bar-side{position:absolute;top:4px;bottom:0;width:7px;right:-5px;background:linear-gradient(to top,#33128a,#07567a 42%,#496500 72%,#8d203f);transform:rotateY(72deg);transform-origin:left center;filter:brightness(.7)}
.eq-bar-top{position:absolute;left:2px;right:-2px;top:-4px;height:7px;background:#ff6b8e;transform:rotateX(62deg);transform-origin:center bottom;opacity:.78}
.spectrum-stage.is-playing .eq-bar{animation:eqLive var(--speed,.72s) ease-in-out infinite alternate;animation-delay:var(--delay);filter:saturate(1.18) brightness(1.08)}
.spectrum-floor{position:absolute;left:-8%;right:-8%;bottom:-34px;height:88px;transform:rotateX(66deg);transform-origin:center top;background:repeating-linear-gradient(90deg,rgba(155,80,255,.16) 0 1px,transparent 1px 45px),repeating-linear-gradient(0deg,rgba(0,206,255,.12) 0 1px,transparent 1px 20px);box-shadow:0 -12px 32px rgba(116,47,255,.08)}
.spectrum-status{position:absolute;left:14px;right:14px;bottom:10px;display:flex;align-items:center;gap:8px;font:600 8px "Space Grotesk",sans-serif;letter-spacing:.15em;color:#8f8993;z-index:3}
.spectrum-status small{margin-left:auto;font:500 8px "DM Sans",sans-serif;letter-spacing:.08em;color:#645f69;text-transform:uppercase}
.spectrum-led{width:6px;height:6px;border-radius:50%;background:#6c6671;box-shadow:0 0 0 3px rgba(255,255,255,.025)}
.spectrum-stage.is-playing .spectrum-led{background:#63ffb2;box-shadow:0 0 12px #28f59a,0 0 0 3px rgba(40,245,154,.09)}
.spectrum-stage.is-playing .spectrum-status strong{color:#d9fff0}
@keyframes eqIdle{0%,100%{transform:scaleY(.92)}50%{transform:scaleY(1.035)}}
@keyframes eqLive{0%{transform:scaleY(.62) translateZ(0)}42%{transform:scaleY(1.03) translateZ(5px)}100%{transform:scaleY(.78) translateZ(1px)}}
@media(max-width:600px){.spectrum-stage{height:145px}.spectrum-bars{left:4%;right:4%;bottom:38px;height:88px;gap:3px}.eq-bar{height:calc(11px + (var(--level) * 72px))}.spectrum-status small{display:none}}
@media(prefers-reduced-motion:reduce){.eq-bar,.spectrum-stage.is-playing .eq-bar{animation:none!important;transition:none}.spectrum-stage.is-playing .eq-bar{transform:scaleY(.82)}}

/* =========================================================
   THE SIGNAL v12 — MASTERED EDITION
   Cinematic lighting, studio desk, analog spectrum and finale.
   ========================================================= */
:root{--master-copper:#c58a62;--master-gold:#e2bb83;--master-blue:#6f85a8;--master-violet:#8f70c8}
body{background:#070706}
.mastered-hero{isolation:isolate;overflow:hidden}
.mastered-hero:after{content:"";position:absolute;inset:0;pointer-events:none;z-index:2;background:linear-gradient(105deg,rgba(3,4,7,.2),transparent 43%,rgba(151,103,68,.05)),radial-gradient(ellipse at 70% 18%,rgba(111,133,168,.13),transparent 40%);mix-blend-mode:screen}
.hero-cinema{position:absolute;inset:0;z-index:3;pointer-events:none;overflow:hidden;opacity:.7}
.hero-cinema:before{content:"";position:absolute;width:52%;height:130%;top:-25%;right:2%;transform:rotate(-12deg);background:linear-gradient(90deg,transparent,rgba(161,187,218,.075),transparent);filter:blur(12px)}
.hero-cinema span{position:absolute;width:2px;height:2px;border-radius:50%;background:rgba(235,224,209,.5);box-shadow:0 0 9px rgba(225,190,150,.28);animation:masterDust 12s linear infinite;opacity:0}
.hero-cinema span:nth-child(1){left:58%;top:17%;animation-delay:-2s}.hero-cinema span:nth-child(2){left:74%;top:33%;animation-delay:-7s}.hero-cinema span:nth-child(3){left:82%;top:58%;animation-delay:-4s}.hero-cinema span:nth-child(4){left:65%;top:69%;animation-delay:-9s}.hero-cinema span:nth-child(5){left:91%;top:23%;animation-delay:-5s}.hero-cinema span:nth-child(6){left:51%;top:47%;animation-delay:-11s}
@keyframes masterDust{0%{transform:translate3d(0,26px,0) scale(.7);opacity:0}18%{opacity:.6}75%{opacity:.18}100%{transform:translate3d(16px,-62px,0) scale(1.2);opacity:0}}
.signal-glyph{position:absolute;z-index:5;right:clamp(22px,4vw,70px);bottom:clamp(78px,9vw,130px);width:68px;height:68px;border:1px solid rgba(255,255,255,.13);border-radius:50%;display:grid;place-items:center;backdrop-filter:blur(10px);background:rgba(5,6,8,.23);box-shadow:0 18px 45px rgba(0,0,0,.3),inset 0 0 24px rgba(132,158,197,.05)}
.signal-glyph i,.signal-glyph b,.signal-glyph em{position:absolute;display:block;border-radius:999px;background:linear-gradient(90deg,var(--master-blue),#dfb987)}
.signal-glyph i{width:32px;height:1px}.signal-glyph b{width:1px;height:32px}.signal-glyph em{width:13px;height:13px;border:1px solid rgba(227,194,148,.8);background:transparent;transform:rotate(45deg);animation:glyphPulse 4.5s ease-in-out infinite}
@keyframes glyphPulse{50%{transform:rotate(135deg) scale(1.15);box-shadow:0 0 18px rgba(218,176,121,.3)}}

/* Studio desk */
.studio-desk{position:relative;padding:clamp(14px,2.4vw,27px) clamp(12px,2.8vw,30px) 18px;border:1px solid rgba(255,255,255,.10);border-radius:18px;background:linear-gradient(145deg,rgba(18,18,19,.98),rgba(7,7,8,.98));box-shadow:0 38px 95px rgba(0,0,0,.48),inset 0 1px rgba(255,255,255,.05);overflow:hidden;isolation:isolate}
.studio-desk:before{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(circle at 15% 2%,rgba(220,143,83,.12),transparent 30%),radial-gradient(circle at 85% 12%,rgba(95,115,164,.1),transparent 34%),linear-gradient(90deg,transparent,rgba(255,255,255,.018),transparent)}
.studio-desk:after{content:"";position:absolute;left:0;right:0;bottom:0;height:30%;z-index:-1;background:linear-gradient(180deg,transparent,rgba(102,57,31,.13)),repeating-linear-gradient(90deg,rgba(117,75,46,.13) 0 1px,transparent 1px 58px)}
.desk-monitor-light{position:absolute;left:16%;right:16%;top:3px;height:1px;background:linear-gradient(90deg,transparent,var(--master-blue),var(--master-gold),transparent);opacity:.55;box-shadow:0 0 35px rgba(123,150,193,.3)}
.desk-headphones{position:absolute;left:-2px;bottom:11px;width:44px;height:44px;opacity:.45;z-index:5}.desk-headphones i{position:absolute;inset:5px 8px 11px;border:4px solid #9b8b7d;border-bottom:0;border-radius:25px 25px 0 0}.desk-headphones span:before,.desk-headphones span:after{content:"";position:absolute;bottom:5px;width:9px;height:19px;border-radius:5px;background:#746b65}.desk-headphones span:before{left:5px}.desk-headphones span:after{right:5px}
.desk-notebook{position:absolute;right:10px;bottom:9px;width:78px;height:46px;padding:8px 8px;background:#c7b69e;color:#302b27;transform:rotate(-3deg);font:600 6px "Space Grotesk";letter-spacing:.1em;opacity:.35;z-index:5;box-shadow:0 9px 22px rgba(0,0,0,.4)}.desk-notebook i{display:block;height:1px;background:#5d5249;margin-top:6px;opacity:.45}
.desk-coffee{position:absolute;right:96px;bottom:8px;width:28px;height:25px;border:3px solid #77685b;border-radius:3px 3px 9px 9px;opacity:.32;z-index:5}.desk-coffee span{position:absolute;right:-10px;top:4px;width:10px;height:11px;border:3px solid #77685b;border-left:0;border-radius:0 8px 8px 0}
.studio-desk .spotify-frame{position:relative;z-index:2;box-shadow:0 18px 45px rgba(0,0,0,.3)}
.desk-edge{height:18px;margin:14px -30px -18px;position:relative;background:linear-gradient(180deg,#34261d,#17100c 70%,#080706);border-top:1px solid rgba(229,181,130,.18);box-shadow:inset 0 6px 16px rgba(255,255,255,.025)}.desk-edge span,.desk-edge i,.desk-edge b{position:absolute;top:6px;width:5px;height:5px;border-radius:50%;background:#0b0908;box-shadow:inset 0 1px rgba(255,255,255,.15)}.desk-edge span{left:6%}.desk-edge i{left:50%}.desk-edge b{right:6%}

/* Mastered analog spectrum */
.mastered-spectrum{height:210px;margin-top:18px;border-radius:8px;border:1px solid rgba(215,186,145,.18);background:linear-gradient(180deg,#07080a,#101014 48%,#050506);box-shadow:inset 0 0 0 5px #171616,inset 0 0 0 6px rgba(255,255,255,.04),inset 0 -38px 70px rgba(0,0,0,.72),0 20px 50px rgba(0,0,0,.35)}
.mastered-spectrum:after{content:"";position:absolute;inset:6px;border-radius:4px;pointer-events:none;background:linear-gradient(110deg,rgba(255,255,255,.055),transparent 22%,transparent 74%,rgba(255,255,255,.025));z-index:5}
.spectrum-brand{position:absolute;left:18px;top:14px;z-index:4;display:flex;align-items:baseline;gap:9px}.spectrum-brand span{color:var(--master-copper);font:600 7px "Space Grotesk";letter-spacing:.2em}.spectrum-brand strong{color:#d7d0c8;font:500 8px "Space Grotesk";letter-spacing:.14em}.spectrum-brand small{color:#5e5b5a;font:500 6px "DM Sans";letter-spacing:.1em}
.spectrum-scale{position:absolute;left:11px;top:45px;bottom:40px;z-index:4;display:flex;flex-direction:column;justify-content:space-between;color:#514e50;font:500 6px "DM Sans"}
.mastered-spectrum .spectrum-bars{left:7%;right:4%;bottom:44px;height:124px}
.mastered-spectrum .eq-bar-face{filter:saturate(.94)}
.mastered-spectrum .eq-bar:after{content:"";position:absolute;left:15%;right:15%;top:-5px;height:2px;background:#ffcf85;opacity:.34;box-shadow:0 0 7px rgba(255,179,91,.7)}
.mastered-spectrum.is-playing .eq-bar:after{opacity:.92}
.mastered-spectrum .spectrum-status{left:20px;right:20px;bottom:13px}
body.signal-awake .studio-desk{box-shadow:0 38px 105px rgba(0,0,0,.48),0 0 68px rgba(192,121,72,.06),inset 0 1px rgba(255,255,255,.05)}
body.signal-awake .music:before{opacity:.8}

/* Light journey */
.section.coaching{background:radial-gradient(circle at 8% 22%,rgba(73,90,122,.08),transparent 34%)}
.section.music{position:relative}.section.music:before{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(circle at 72% 44%,rgba(181,112,67,.08),transparent 38%);transition:opacity 1.4s ease}
.section.watch{background:radial-gradient(circle at 88% 22%,rgba(91,75,128,.055),transparent 30%)}
.mastered-join:before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 52% 60%,rgba(218,171,105,.12),transparent 35%);pointer-events:none}

/* Finale */
.master-outro{padding:clamp(72px,10vw,135px) 0 clamp(38px,5vw,70px);text-align:center;display:grid;gap:20px;justify-items:center}.master-outro span,.master-outro strong{font:600 8px "Space Grotesk";letter-spacing:.24em;color:#706a64}.master-outro strong{color:#b5a99f}.master-outro svg{width:min(900px,88vw);height:68px;overflow:visible}.master-outro path{fill:none;stroke:url(#x);stroke:#b98d6f;stroke-width:.8;opacity:.45;stroke-dasharray:1800;stroke-dashoffset:1800;transition:stroke-dashoffset 2.4s cubic-bezier(.2,.7,.2,1)}.master-outro.visible path{stroke-dashoffset:0}
.mastered-join .join-content{position:relative;z-index:2}

@media(max-width:900px){.signal-glyph{display:none}.hero-cinema{opacity:.45}.studio-desk{padding:12px 12px 16px}.desk-edge{margin:12px -12px -16px}.desk-headphones,.desk-notebook,.desk-coffee{display:none}.mastered-spectrum{height:175px}.mastered-spectrum .spectrum-bars{left:8%;height:98px}.spectrum-brand small{display:none}}
@media(max-width:600px){.hero-cinema{display:none}.mastered-spectrum{height:152px}.spectrum-brand{left:14px;top:12px}.spectrum-brand strong{display:none}.mastered-spectrum .spectrum-bars{bottom:38px;height:81px}.master-outro{padding:70px 0 28px}.master-outro svg{height:48px}}
@media(prefers-reduced-motion:reduce){.hero-cinema span,.signal-glyph em{animation:none}.master-outro path{transition:none;stroke-dashoffset:0}}

/* =========================================================
   BUILD 13 PRODUCTION RC1 — COMMUNITY-FIRST HERO + QA FIXES
   ========================================================= */
@media (min-width:901px){
  .hero{min-height:920px;height:100svh}
  .hero-content{grid-template-columns:minmax(350px,430px) minmax(0,650px)!important;gap:clamp(38px,5vw,78px)!important;align-items:end;padding-top:130px;padding-bottom:112px!important}
  .hero-signup{display:block!important;order:1;justify-self:start;align-self:end;width:100%;max-width:430px;padding:28px}
  .hero-copy{order:2;max-width:650px!important}
  .hero-copy h1{font-size:clamp(48px,5.2vw,78px)!important;line-height:.92}
  .hero-copy>p{max-width:620px}
  .hero-copy>p:nth-of-type(2){font-size:17px;line-height:1.55;color:#e3d9d0}
  .hero-copy>p:nth-of-type(3){font-size:15px;line-height:1.6;color:#bdb4ac}
  .hero-photo{width:66%!important;background-position:center 30%!important}
}
.hero-signup h2 em{font-family:"Newsreader";font-weight:400;color:#d5a77e}
.hero-signup form{margin-top:18px}
.hero-signup button{position:relative;overflow:hidden;transition:transform .25s ease,box-shadow .25s ease}
.hero-signup button:hover{transform:translateY(-2px);box-shadow:0 14px 38px rgba(197,138,173,.18)}
.hero-freebies{display:grid;gap:8px;margin-top:18px;padding-top:16px;border-top:1px solid rgba(255,255,255,.11)}
.hero-freebies strong{font:600 9px "Space Grotesk";letter-spacing:.17em;color:#d09a70}
.hero-freebies span{position:relative;padding-left:18px;color:#bdb4ac;font-size:12px;line-height:1.45}
.hero-freebies span:before{content:"✓";position:absolute;left:0;color:#d5a77e}

.coaching-photo-only{margin:0;width:100%;position:relative;overflow:hidden;border:1px solid rgba(255,255,255,.1);background:#0d0b0a}
.coaching-photo-only img{display:block;width:100%;height:clamp(360px,54vw,690px);object-fit:cover;object-position:center 30%;transition:transform 1s cubic-bezier(.2,.75,.2,1)}
.coaching-photo-only:hover img{transform:scale(1.018)}
.coaching-photo-only figcaption{position:absolute;left:24px;bottom:22px;max-width:430px;padding:11px 14px;background:rgba(8,7,6,.72);backdrop-filter:blur(12px);color:#d7cec5;font-size:12px;border:1px solid rgba(255,255,255,.1)}

.philosophy-panel{margin-top:22px;padding:clamp(30px,5vw,58px);border:1px solid rgba(255,255,255,.1);background:linear-gradient(145deg,rgba(25,20,23,.74),rgba(13,11,11,.82));max-width:none}
.philosophy-panel h3{font:500 clamp(30px,4vw,52px)/1.05 "Space Grotesk";letter-spacing:-.04em;margin:12px 0 22px;max-width:920px}
.philosophy-panel p{color:#aaa0a1;line-height:1.7;max-width:860px;margin:8px 0}
.philosophy-panel strong{display:block;margin-top:24px;color:#e1b7ce;font:500 17px "Space Grotesk"}

.trust-strip{padding:36px 0;border-top:1px solid rgba(255,255,255,.07);border-bottom:1px solid rgba(255,255,255,.07);background:#0d0b0a}
.trust-strip .shell{display:flex;align-items:center;justify-content:space-between;gap:34px}
.trust-strip span{font:600 10px "Space Grotesk";letter-spacing:.18em;color:#b984a4}
.trust-strip strong{font:500 clamp(17px,2vw,24px) "Space Grotesk";color:#ded5cd;text-align:right}

/* Straighten editorial cards and notebook as requested. */
.method-icon,.method-card:nth-child(even) .method-icon,.studio-note-paper,.desk-notebook,.resource-card{transform:none!important}

/* Dedicated hero signup is the only signup form on the homepage. */
.signal-notes{padding-bottom:115px}
.notes-intro{grid-template-columns:1fr .75fr!important}
.resource-grid{margin-top:54px}

@media(max-width:900px){
  .hero-signup{display:block!important;order:1;width:100%;max-width:680px;margin-bottom:26px}
  .hero-copy{order:2}
  .hero-content{display:flex!important;flex-direction:column!important;padding-top:30px!important}
  .trust-strip .shell{align-items:flex-start;flex-direction:column;gap:10px}
  .trust-strip strong{text-align:left}
}
@media(max-width:600px){
  .hero-photo{height:46svh;min-height:340px;max-height:470px}
  .hero-shade{height:46svh;min-height:340px;max-height:470px}
  .hero-content{padding:18px 0 66px!important;gap:22px!important}
  .hero-signup{display:block!important;padding:18px;margin:0}
  .hero-signup>p{display:block;font-size:12px;margin-bottom:12px}
  .hero-signup form{display:grid;grid-template-columns:1fr!important}
  .hero-signup button{grid-column:auto!important}
  .hero-signup small{display:block}
  .hero-freebies{margin-top:14px}
  .hero-copy h1{font-size:clamp(39px,11vw,50px)!important}
  .hero-copy>p:nth-of-type(2),.hero-copy>p:nth-of-type(3){display:block!important;font-size:14px!important}
  .hero-actions{max-width:none}
  .coaching-photo-only img{height:420px}
  .coaching-photo-only figcaption{left:12px;right:12px;bottom:12px}
}

/* =========================================================
   BUILD 13 PRODUCTION RC2 — BALANCED HERO + SPOTIFY RESTORE
   ========================================================= */
@media (min-width:901px){
  .hero{min-height:860px;height:min(940px,100svh)}
  .hero-photo{left:auto!important;right:0!important;width:58%!important;background-position:58% 28%!important}
  .hero-shade{background:linear-gradient(90deg,rgba(7,6,5,.97) 0%,rgba(7,6,5,.9) 36%,rgba(7,6,5,.52) 58%,rgba(7,6,5,.12) 100%),linear-gradient(0deg,#0a0908 0%,transparent 34%)}
  .hero-content{grid-template-columns:minmax(330px,410px) minmax(0,520px)!important;gap:clamp(30px,4vw,58px)!important;align-items:end;padding-top:122px!important;padding-bottom:105px!important}
  .hero-signup{max-width:410px;padding:24px;background:rgba(12,10,9,.82)}
  .hero-signup h2{font-size:27px}
  .hero-copy{max-width:520px!important}
  .hero-copy h1{font-size:clamp(44px,4.6vw,68px)!important;max-width:9.4em}
  .hero-copy .hero-lead{max-width:31em;font-size:16px!important;line-height:1.55!important;color:#dfd5cc!important}
  .hero-actions{margin-top:25px}
}
.hero-intro{padding:54px 0 64px;background:#0a0908;border-bottom:1px solid rgba(255,255,255,.07)}
.hero-intro-grid{display:grid;grid-template-columns:.42fr 1.15fr;gap:clamp(34px,7vw,110px);align-items:start}
.hero-intro-grid .eyebrow{margin:7px 0 0}
.hero-intro-grid>p:last-child{margin:0;max-width:920px;font:400 clamp(18px,2vw,27px)/1.55 "Newsreader";color:#d3c9c0}
.spotify-frame iframe{display:block!important;width:100%!important;height:352px!important;border:0!important}
@media(max-width:900px){
  .hero-intro{padding:42px 0 52px}
  .hero-intro-grid{grid-template-columns:1fr;gap:16px}
  .hero-intro-grid>p:last-child{font-size:20px}
}
@media(max-width:600px){
  .hero-copy .hero-lead{display:block!important;font-size:14px!important;line-height:1.55!important}
  .hero-intro{padding:34px 0 44px}
  .hero-intro-grid>p:last-child{font-size:18px;line-height:1.5}
}

/* RC2.2 — How I Can Help: Coach / Producer / Performer */
.coaching-identity{grid-template-columns:minmax(0,.92fr) minmax(420px,1.08fr);gap:0;padding:0;overflow:hidden;align-items:stretch;background:#0b0909}
.coaching-identity::after{z-index:3}
.coaching-identity .coaching-photo-only{border:0;border-right:1px solid rgba(255,255,255,.09);min-height:700px}
.coaching-identity .coaching-photo-only img{height:100%;min-height:700px;object-position:center 28%}
.coaching-roles{position:relative;isolation:isolate;padding:clamp(42px,5vw,72px);overflow:hidden;background:radial-gradient(circle at 85% 14%,rgba(147,83,175,.15),transparent 34%),radial-gradient(circle at 5% 88%,rgba(190,105,62,.13),transparent 36%),linear-gradient(145deg,#141012 0%,#0a0909 72%)}
.coaching-texture{position:absolute;inset:0;z-index:-1;opacity:.34;background-image:linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px),radial-gradient(ellipse at 70% 45%,transparent 0 32%,rgba(210,171,137,.06) 32.5% 33%,transparent 33.5%),repeating-linear-gradient(165deg,transparent 0 44px,rgba(202,155,119,.025) 45px,transparent 46px);background-size:34px 34px,34px 34px,420px 420px,auto;mask-image:linear-gradient(90deg,transparent,black 18%,black)}
.coaching-roles::before{content:"";position:absolute;right:-110px;bottom:-120px;width:430px;height:430px;border:1px solid rgba(214,174,141,.08);border-radius:50%;box-shadow:0 0 0 54px rgba(214,174,141,.025),0 0 0 108px rgba(137,92,161,.018);z-index:-1}
.coaching-roles h3{font:500 clamp(40px,4.6vw,64px)/.98 "Space Grotesk";letter-spacing:-.05em;margin:12px 0 18px;max-width:620px}
.coaching-roles h3 em{font-family:"Newsreader";font-weight:400;background:linear-gradient(90deg,#e7c0a0,#c9a9da 58%,#80b8c4);-webkit-background-clip:text;background-clip:text;color:transparent}
.coaching-roles-intro{color:var(--muted);line-height:1.7;max-width:620px;margin:0 0 32px}
.role-stack{display:grid;gap:12px}
.role-card{display:grid;grid-template-columns:54px 1fr;gap:18px;align-items:start;padding:22px;border:1px solid rgba(255,255,255,.1);background:linear-gradient(105deg,rgba(255,255,255,.045),rgba(255,255,255,.012));backdrop-filter:blur(8px);transition:transform .35s ease,border-color .35s ease,background .35s ease,box-shadow .35s ease}
.role-card:hover{transform:translateX(5px);border-color:rgba(213,167,126,.32);background:linear-gradient(105deg,rgba(183,122,77,.1),rgba(130,82,158,.055));box-shadow:0 18px 55px rgba(0,0,0,.26)}
.role-icon{width:50px;height:50px;display:grid;place-items:center;border:1px solid rgba(213,167,126,.24);background:rgba(8,7,7,.44)}
.role-icon svg{width:27px;height:27px;fill:none;stroke:#d4a783;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.role-card small{font:600 10px "Space Grotesk";letter-spacing:.18em;color:#c98e62}
.role-card h4{font:500 clamp(21px,2.1vw,29px)/1.08 "Space Grotesk";letter-spacing:-.035em;margin:6px 0 8px}
.role-card p{margin:0;color:#aaa199;line-height:1.55;font-size:14px}
@media(max-width:1000px){.coaching-identity{grid-template-columns:1fr}.coaching-identity .coaching-photo-only{min-height:520px;border-right:0;border-bottom:1px solid rgba(255,255,255,.09)}.coaching-identity .coaching-photo-only img{min-height:520px;height:520px}.coaching-roles{padding:46px 34px}}
@media(max-width:560px){.coaching-identity .coaching-photo-only,.coaching-identity .coaching-photo-only img{min-height:390px;height:390px}.coaching-roles{padding:34px 20px}.role-card{grid-template-columns:42px 1fr;padding:18px 16px;gap:13px}.role-icon{width:40px;height:40px}.role-icon svg{width:22px;height:22px}.role-card h4{font-size:22px}.role-card p{font-size:13px}}

/* RC3 photo curation: preserve the approved hero, strengthen coaching and artist storytelling */
.coaching-photo-studio img {
  object-position: 52% 45%;
}
.about-media-artist img {
  object-position: 50% 48%;
}
@media (min-width: 901px) {
  .coaching-photo-studio img { min-height: 100%; }
  .about-media-artist img { aspect-ratio: 4 / 3; }
}
@media (max-width: 900px) {
  .coaching-photo-studio img { object-position: 48% 42%; }
  .about-media-artist img { object-position: 50% 50%; }
}


/* =========================================================
   BUILD 13 PRODUCTION RC3.1 — NUNCHUCK PRESET EXPERIENCE
   An original, product-inspired card based on Nunchuck's
   Clean / Vintage / HotRod / Modern tonal architecture.
   ========================================================= */
.resource-card-nunchuck{position:relative;isolation:isolate;overflow:hidden}
.resource-card-nunchuck:before{content:"";position:absolute;inset:auto -28% -35% 18%;height:62%;z-index:-1;background:radial-gradient(circle,rgba(169,54,44,.13),transparent 68%);filter:blur(18px)}
.nunchuck-pack{position:relative;margin-top:auto;min-height:180px;padding:15px 15px 13px;display:flex;flex-direction:column;overflow:hidden;text-decoration:none;color:#eee8df;border:1px solid rgba(226,188,119,.25);border-radius:4px;background:radial-gradient(circle at 84% 10%,rgba(196,64,39,.17),transparent 28%),linear-gradient(145deg,#151517 0%,#09090a 57%,#17100c 100%);box-shadow:inset 0 1px rgba(255,255,255,.055),inset 0 -34px 65px rgba(0,0,0,.32),0 18px 38px rgba(0,0,0,.28);transition:transform .35s ease,border-color .35s ease,box-shadow .35s ease}
.nunchuck-pack:before{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(112deg,rgba(255,255,255,.065),transparent 16%,transparent 74%,rgba(255,160,91,.035)),repeating-linear-gradient(90deg,transparent 0 31px,rgba(255,255,255,.012) 32px 33px)}
.nunchuck-pack:after{content:"11";position:absolute;right:10px;top:34px;color:rgba(234,178,96,.11);font:700 72px/.8 "Space Grotesk";letter-spacing:-.08em}
.nunchuck-pack:hover{transform:translateY(-3px);border-color:rgba(237,181,93,.46);box-shadow:inset 0 1px rgba(255,255,255,.07),0 22px 55px rgba(0,0,0,.42),0 0 34px rgba(167,62,43,.1)}
.nunchuck-pack-top,.nunchuck-pack-foot{position:relative;z-index:2;display:flex;align-items:center;justify-content:space-between;gap:12px}
.nunchuck-pack-top span,.nunchuck-pack-top small,.nunchuck-pack-foot span,.nunchuck-pack-foot strong{font:600 6px "Space Grotesk";letter-spacing:.18em}
.nunchuck-pack-top span{color:#d4a564}.nunchuck-pack-top small{color:#74706c}.nunchuck-pack-title{position:relative;z-index:2;display:grid;margin:10px 0 8px}
.nunchuck-pack-title strong{font:600 7px "Space Grotesk";letter-spacing:.28em;color:#8d8983}
.nunchuck-pack-title b{margin-top:2px;font:600 25px/.95 "Space Grotesk";letter-spacing:-.055em;color:#f0e9df;text-shadow:0 0 22px rgba(217,115,68,.12)}
.nunchuck-pack-title em{margin-top:4px;font:500 8px "Space Grotesk";font-style:normal;letter-spacing:.16em;color:#c06d4a}
.nunchuck-channel-row{position:relative;z-index:2;display:grid;grid-template-columns:repeat(4,1fr);gap:3px;margin-bottom:7px}
.nunchuck-channel-row span{padding:4px 2px;text-align:center;border:1px solid rgba(255,255,255,.08);background:rgba(255,255,255,.018);color:#8f8982;font:600 5px "Space Grotesk";letter-spacing:.08em}
.nunchuck-channel-row span:nth-child(3){color:#e0ad71;border-color:rgba(224,173,113,.24);background:rgba(178,91,46,.08)}
.nunchuck-console{position:relative;z-index:2;height:34px;display:flex;align-items:center;gap:8px;padding:5px 7px;border:1px solid rgba(255,255,255,.065);background:linear-gradient(180deg,rgba(255,255,255,.027),rgba(0,0,0,.18))}
.nunchuck-console>i{width:18px;height:18px;flex:0 0 auto;border-radius:50%;border:1px solid #504941;background:radial-gradient(circle at 38% 34%,#9e8d78 0 2px,#302a26 3px 6px,#0c0c0d 7px);box-shadow:0 3px 7px rgba(0,0,0,.5)}
.nunchuck-console>i:after{content:"";display:block;width:1px;height:6px;margin:2px auto 0;background:#d2b07e;transform-origin:50% 7px}
.nunchuck-console>i:nth-child(2):after{transform:rotate(32deg)}.nunchuck-console>i:nth-child(3):after{transform:rotate(-42deg)}.nunchuck-console>i:nth-child(4):after{transform:rotate(55deg)}.nunchuck-console>i:nth-child(5):after{transform:rotate(-20deg)}.nunchuck-console>i:nth-child(6):after{transform:rotate(18deg)}
.nunchuck-meter{margin-left:auto;width:43px;height:20px;padding:3px;border:1px solid rgba(218,168,93,.22);background:#070707;box-shadow:inset 0 0 8px rgba(0,0,0,.8)}
.nunchuck-meter span{display:block;width:72%;height:100%;background:linear-gradient(90deg,#5f7448 0 62%,#ca9b3f 63% 82%,#b34c38 83%);opacity:.72;box-shadow:0 0 8px rgba(213,157,67,.18);animation:nunchuckLevel 2.8s ease-in-out infinite;transform-origin:left}
.nunchuck-pack-foot{margin-top:8px}.nunchuck-pack-foot span{color:#67635f}.nunchuck-pack-foot strong{color:#d7a36e;transition:letter-spacing .25s ease}.nunchuck-pack:hover .nunchuck-pack-foot strong{letter-spacing:.22em}
@keyframes nunchuckLevel{0%,100%{transform:scaleX(.55)}45%{transform:scaleX(1)}72%{transform:scaleX(.76)}}
@media(max-width:680px){.nunchuck-pack{min-height:194px;padding:17px}.nunchuck-pack-title b{font-size:28px}.nunchuck-console{height:38px;gap:9px}.nunchuck-console>i{width:20px;height:20px}.nunchuck-pack-top span,.nunchuck-pack-top small,.nunchuck-pack-foot span,.nunchuck-pack-foot strong{font-size:6.5px}}
@media(prefers-reduced-motion:reduce){.nunchuck-meter span{animation:none;transform:scaleX(.78)}}

/* =========================================================
   BUILD 14 — CINEMATIC EDITION
   Atmospheric polish without changing the approved content.
   ========================================================= */
:root{--cinema-ease:cubic-bezier(.22,1,.36,1);--cinema-gold:#d6a77d;--cinema-violet:#8d6aa6}
html{scroll-behavior:smooth;scroll-padding-top:86px}
body.cinematic-build{overflow-x:hidden}
body.cinematic-build:before{content:"";position:fixed;inset:0;pointer-events:none;z-index:9995;opacity:.18;mix-blend-mode:soft-light;background:repeating-linear-gradient(0deg,rgba(255,255,255,.018) 0 1px,transparent 1px 4px)}
.cinematic-loader{position:fixed;inset:0;z-index:10000;display:grid;place-content:center;justify-items:center;gap:18px;background:#070606;transition:opacity .9s var(--cinema-ease),visibility .9s}
.cinematic-loader span{font:600 clamp(54px,8vw,106px)/1 "Space Grotesk";letter-spacing:-.09em;color:#eee7df;text-shadow:0 0 60px rgba(214,167,125,.18)}
.cinematic-loader i{display:block;width:min(250px,46vw);height:1px;overflow:hidden;background:rgba(255,255,255,.12)}
.cinematic-loader i:after{content:"";display:block;width:45%;height:100%;background:linear-gradient(90deg,transparent,var(--cinema-gold),transparent);animation:cinemaLoad 1.3s ease-in-out infinite}
.cinematic-loader small{font:600 9px "Space Grotesk";letter-spacing:.35em;color:#7f7770}
body.cinema-ready .cinematic-loader{opacity:0;visibility:hidden}
@keyframes cinemaLoad{from{transform:translateX(-120%)}to{transform:translateX(330%)}}
.film-bars span{position:fixed;left:0;right:0;height:0;z-index:9990;background:#050404;pointer-events:none;transition:height 1.25s var(--cinema-ease)}
.film-bars span:first-child{top:0}.film-bars span:last-child{bottom:0}
body:not(.cinema-ready) .film-bars span{height:5.5vh}
.scroll-progress{position:fixed;top:0;left:0;right:0;height:2px;z-index:9998;background:rgba(255,255,255,.035);pointer-events:none}
.scroll-progress i{display:block;width:100%;height:100%;transform:scaleX(0);transform-origin:left;background:linear-gradient(90deg,#a76f4e,#d6a77d 45%,#8d6aa6);box-shadow:0 0 16px rgba(214,167,125,.45)}
.nav{transition:background .45s ease,border-color .45s ease,backdrop-filter .45s ease,transform .45s var(--cinema-ease)}
.nav.nav-scrolled{background:rgba(8,7,7,.72);border-bottom:1px solid rgba(255,255,255,.075);backdrop-filter:blur(18px) saturate(120%)}
.nav.nav-hidden{transform:translateY(-110%)}
.nav nav a{position:relative}
.nav nav a:after{content:"";position:absolute;left:0;right:100%;bottom:-8px;height:1px;background:var(--cinema-gold);transition:right .35s ease}
.nav nav a.is-active:after,.nav nav a:hover:after{right:0}
.hero-photo{will-change:transform;transform:translate3d(var(--hero-shift-x,0),var(--hero-shift-y,0),0) scale(1.025);transition:transform 1.1s var(--cinema-ease),filter .8s ease;animation:heroCinemaIn 1.7s .28s var(--cinema-ease) both}
.hero-content{animation:heroContentIn 1.45s .5s var(--cinema-ease) both}
.hero-foot{animation:heroContentIn 1.3s .8s var(--cinema-ease) both}
@keyframes heroCinemaIn{from{opacity:0;transform:scale(1.09) translate3d(0,18px,0);filter:brightness(.55) saturate(.75)}to{opacity:1;transform:scale(1.025);filter:none}}
@keyframes heroContentIn{from{opacity:0;transform:translateY(28px)}to{opacity:1;transform:none}}
.hero:after{content:"";position:absolute;inset:0;pointer-events:none;z-index:5;background:radial-gradient(circle at 52% 42%,transparent 0 24%,rgba(0,0,0,.08) 55%,rgba(0,0,0,.38) 100%);mix-blend-mode:multiply}
.section,.signal-method,.artist-note,.signal-notes,.trust-strip,.hero-intro{position:relative;isolation:isolate}
.section:before,.signal-method:before,.signal-notes:before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(circle at var(--spot-x,50%) var(--spot-y,45%),rgba(201,142,98,.055),transparent 34%);opacity:0;transition:opacity .8s ease}
.section.in-view:before,.signal-method.in-view:before,.signal-notes.in-view:before{opacity:1}
.reveal{transition-duration:1s!important;transition-timing-function:var(--cinema-ease)!important}
.reveal:not(.visible){filter:blur(5px);transform:translateY(34px) scale(.992)}
.reveal.visible{filter:none}
.story-transition{overflow:hidden;perspective:1000px}
.transition-word{transform:translate3d(0,var(--v9-shift,0),0) scale(.97);opacity:.12;transition:transform 1.2s var(--cinema-ease),opacity 1.2s ease;will-change:transform}
.story-transition.in-view .transition-word{transform:translate3d(0,var(--v9-shift,0),0) scale(1);opacity:.25}
.story-transition:after{content:"";position:absolute;top:0;bottom:0;left:-22%;width:16%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.055),transparent);transform:skewX(-16deg);opacity:0}
.story-transition.in-view:after{animation:lightSweep 2.2s .25s var(--cinema-ease) both}
@keyframes lightSweep{0%{left:-22%;opacity:0}18%{opacity:1}100%{left:120%;opacity:0}}
.coaching-photo-only img,.about-media img,.resource-photo img,.instrument-image img{transition:transform 1.4s var(--cinema-ease),filter .8s ease;will-change:transform}
.in-view .coaching-photo-only img,.in-view .about-media img,.in-view .resource-photo img,.in-view .instrument-image img{transform:scale(1.025)}
.coaching-photo-only:hover img,.about-media:hover img,.resource-photo:hover img{transform:scale(1.055)}
.method-card,.role-card,.resource-card{transform-style:preserve-3d}
.method-card:after,.role-card:after,.resource-card:after{content:"";position:absolute;inset:0;pointer-events:none;opacity:0;background:linear-gradient(115deg,transparent 25%,rgba(255,255,255,.05),transparent 70%);transform:translateX(-80%);transition:opacity .4s ease}
.method-card:hover:after,.role-card:hover:after,.resource-card:hover:after{opacity:1;animation:cardSheen 1.1s ease}
@keyframes cardSheen{to{transform:translateX(85%)}}
.btn,.nav-cta,.hero-signup button{position:relative;overflow:hidden;transform:translate3d(var(--mag-x,0),var(--mag-y,0),0);transition:transform .3s var(--cinema-ease),background .3s ease,border-color .3s ease}
.btn:before,.nav-cta:before,.hero-signup button:before{content:"";position:absolute;inset:-80% auto -80% -30%;width:18%;transform:rotate(16deg);background:rgba(255,255,255,.16);filter:blur(8px);transition:left .65s ease}
.btn:hover:before,.nav-cta:hover:before,.hero-signup button:hover:before{left:125%}
.footer{position:relative;padding-top:70px;padding-bottom:60px}
.footer:before{content:"";position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,rgba(214,167,125,.35),transparent)}
.version-tag{font-size:8px;letter-spacing:.22em;opacity:.52}
@media(max-width:760px){.film-bars{display:none}.cinematic-loader small{letter-spacing:.23em}.hero-photo{animation-duration:1.25s}.reveal:not(.visible){filter:none;transform:translateY(22px)}.scroll-progress{height:1px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.cinematic-loader{display:none}.film-bars{display:none}.hero-photo,.hero-content,.hero-foot{animation:none}.story-transition.in-view:after{animation:none}.transition-word,.btn,.nav-cta,.hero-signup button{transition:none!important}}

/* GOLD MASTER 1.3 — PREMIUM WELCOME PACK */
.signal-notes{position:relative;overflow:hidden}
.signal-notes:before{content:"";position:absolute;inset:7% -18% auto 42%;height:48%;pointer-events:none;background:radial-gradient(circle,rgba(66,125,255,.09),rgba(181,49,150,.045) 34%,transparent 68%);filter:blur(38px)}
.notes-intro{display:grid!important;grid-template-columns:minmax(0,1.25fr) minmax(260px,.75fr)!important;gap:clamp(36px,7vw,110px)!important;align-items:end!important}
.welcome-eyebrow{display:block;margin-bottom:18px;color:#b57acb;font:650 10px/1 "Space Grotesk";letter-spacing:.24em}
.welcome-pack-copy h2{margin:0;font:500 clamp(48px,7.4vw,112px)/.88 "Space Grotesk";letter-spacing:-.07em;color:#f2eee9}
.welcome-manifesto{margin:28px 0 0;max-width:720px;font:400 clamp(20px,2vw,32px)/1.25 "Space Grotesk";letter-spacing:-.025em;color:#d8c7b8}
.welcome-subcopy{max-width:680px;margin:20px 0 0;color:var(--muted);font-size:16px;line-height:1.8}
.welcome-pack-mark{display:flex;align-items:center;justify-content:flex-end;gap:13px;padding-bottom:12px;color:#77716d;font:600 8px/1 "Space Grotesk";letter-spacing:.22em}
.welcome-pack-mark i{display:block;width:42px;height:1px;background:linear-gradient(90deg,#7f4c9f,#bb704f)}
.notes-divider{margin-top:72px!important}
.resource-grid{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:clamp(16px,2vw,28px)!important;margin-top:42px!important;align-items:stretch}
.welcome-product{position:relative;min-width:0;padding:14px;border:1px solid rgba(255,255,255,.09);background:linear-gradient(150deg,rgba(255,255,255,.04),rgba(255,255,255,.009) 55%,rgba(73,37,92,.035));box-shadow:0 30px 80px rgba(0,0,0,.25);overflow:hidden;isolation:isolate;transform-style:preserve-3d;transition:transform .42s cubic-bezier(.2,.7,.2,1),border-color .35s ease,box-shadow .42s ease}
.welcome-product:before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(120deg,transparent 18%,rgba(255,255,255,.045),transparent 52%);transform:translateX(-110%);transition:transform .9s ease}
.welcome-product:hover{transform:translateY(-8px);border-color:rgba(187,122,211,.3);box-shadow:0 42px 100px rgba(0,0,0,.4),0 0 54px rgba(102,65,161,.09)}
.welcome-product:hover:before{transform:translateX(110%)}
.product-badges{position:absolute;z-index:4;top:24px;left:24px;right:24px;display:flex;justify-content:space-between;gap:8px;pointer-events:none}
.product-badges span{padding:7px 9px;border:1px solid rgba(255,255,255,.14);background:rgba(7,7,9,.68);backdrop-filter:blur(12px);color:#d7d0c8;font:650 6.5px/1 "Space Grotesk";letter-spacing:.16em}
.drum-pack-stage,.nunchuck-showcase,.backing-cover{height:clamp(330px,30vw,470px);border:1px solid rgba(255,255,255,.07);overflow:hidden}
.drum-pack-stage{position:relative;display:grid;place-items:center;background:radial-gradient(circle at 50% 44%,rgba(34,107,190,.28),transparent 36%),radial-gradient(circle at 53% 55%,rgba(227,35,145,.13),transparent 48%),linear-gradient(155deg,#070b16,#120719 60%,#050507)}
.drum-pack-stage:after{content:"";position:absolute;left:17%;right:17%;bottom:5%;height:15%;background:radial-gradient(ellipse,rgba(39,93,255,.32),transparent 68%);filter:blur(15px)}
.drum-pack-stage picture{position:relative;z-index:2;width:min(75%,300px);transform:perspective(900px) rotateY(-7deg) rotateX(2deg) translateY(5px);filter:drop-shadow(0 30px 25px rgba(0,0,0,.62));transition:transform .5s cubic-bezier(.2,.8,.2,1),filter .5s ease}
.drum-pack-stage img{display:block;width:100%;height:auto}
.welcome-product-drums:hover picture{transform:perspective(900px) rotateY(2deg) rotateX(-1deg) translateY(-7px) scale(1.025);filter:drop-shadow(0 40px 34px rgba(0,0,0,.72)) drop-shadow(0 0 22px rgba(51,101,255,.16))}
.nunchuck-showcase{position:relative;padding:52px 28px 24px;display:flex;flex-direction:column;background:radial-gradient(circle at 88% 12%,rgba(209,62,35,.22),transparent 25%),linear-gradient(145deg,#171719,#08080a 62%,#1b0e0a);box-shadow:inset 0 0 70px rgba(0,0,0,.5)}
.nunchuck-showcase:before{content:"11";position:absolute;right:17px;top:62px;color:rgba(229,143,74,.10);font:700 120px/.75 "Space Grotesk";letter-spacing:-.1em}
.nunchuck-brand{position:relative;display:grid;z-index:2}
.nunchuck-brand small{color:#d29a56;font:650 8px "Space Grotesk";letter-spacing:.2em}
.nunchuck-brand strong{margin-top:8px;color:#f2e9df;font:650 clamp(36px,4.3vw,66px)/.9 "Space Grotesk";letter-spacing:-.065em}
.nunchuck-brand em{margin-top:9px;color:#c76b46;font:600 9px "Space Grotesk";font-style:normal;letter-spacing:.18em}
.nunchuck-modes{position:relative;z-index:2;display:grid;grid-template-columns:repeat(4,1fr);gap:5px;margin-top:26px}
.nunchuck-modes span{padding:8px 3px;border:1px solid rgba(216,164,91,.17);text-align:center;color:#827b73;font:600 6px "Space Grotesk";letter-spacing:.1em}
.amp-panel{position:relative;z-index:2;margin-top:auto;height:70px;padding:14px;display:flex;align-items:center;gap:clamp(7px,1.2vw,13px);border:1px solid rgba(255,255,255,.08);background:linear-gradient(#262225,#111012);box-shadow:inset 0 1px rgba(255,255,255,.06),inset 0 -20px 30px rgba(0,0,0,.35)}
.amp-panel>b{width:29px;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle at 38% 32%,#c6b8a3 0 7%,#2f2d2c 10% 30%,#080809 34% 54%,#37322d 59% 62%,#0a0909 65%);box-shadow:0 4px 8px #000}
.amp-panel i{position:relative;margin-left:auto;width:56px;height:34px;border:1px solid rgba(210,142,70,.3);background:#080605;overflow:hidden}
.amp-panel i:after{content:"";position:absolute;left:50%;bottom:4px;width:1px;height:23px;background:#e4a66d;transform-origin:bottom;transform:rotate(-22deg);animation:gmMeter 2.8s ease-in-out infinite alternate}
.nunchuck-showcase>a{position:relative;z-index:2;margin-top:14px;display:flex;justify-content:space-between;color:#bf8d61;text-decoration:none;font:650 7px "Space Grotesk";letter-spacing:.17em;text-transform:uppercase}
.backing-cover{position:relative;padding:50px 27px 25px;display:flex;flex-direction:column;background:radial-gradient(circle at 82% 18%,rgba(190,46,143,.23),transparent 26%),radial-gradient(circle at 17% 79%,rgba(22,129,187,.25),transparent 34%),linear-gradient(145deg,#090b1c,#18091e 62%,#05060a)}
.cover-grid{position:absolute;inset:0;opacity:.16;background-image:linear-gradient(rgba(112,179,255,.16) 1px,transparent 1px),linear-gradient(90deg,rgba(112,179,255,.16) 1px,transparent 1px);background-size:28px 28px;transform:perspective(350px) rotateX(58deg) scale(1.8) translateY(25%);transform-origin:bottom}
.cover-kicker,.backing-cover strong,.cover-wave,.backing-cover small{position:relative;z-index:2}
.cover-kicker{color:#77ccf7;font:650 8px "Space Grotesk";letter-spacing:.28em}
.backing-cover strong{margin-top:20px;font:650 clamp(45px,5vw,74px)/.78 "Space Grotesk";letter-spacing:-.07em;color:#f1e8f3;text-shadow:0 0 36px rgba(233,67,196,.16)}
.cover-wave{height:72px;margin-top:auto;display:flex;align-items:center;gap:6px}
.cover-wave i{display:block;flex:1;height:var(--h,45%);min-width:3px;background:linear-gradient(#f056bb,#4fbce8);box-shadow:0 0 11px rgba(88,185,232,.3);animation:wavePulse 1.9s ease-in-out infinite alternate}
.cover-wave i:nth-child(2){--h:78%;animation-delay:-.4s}.cover-wave i:nth-child(3){--h:38%;animation-delay:-.8s}.cover-wave i:nth-child(4){--h:93%;animation-delay:-1.2s}.cover-wave i:nth-child(5){--h:55%;animation-delay:-.6s}.cover-wave i:nth-child(6){--h:72%;animation-delay:-1.4s}.cover-wave i:nth-child(7){--h:32%;animation-delay:-.2s}.cover-wave i:nth-child(8){--h:84%;animation-delay:-1s}.cover-wave i:nth-child(9){--h:48%;animation-delay:-1.6s}
.backing-cover small{margin-top:18px;color:#b8adbd;font:600 7px "Space Grotesk";letter-spacing:.2em}
.product-copy{position:relative;padding:30px 12px 20px}
.product-number{position:absolute;top:32px;right:4px;color:#5d5754;font:600 9px "Space Grotesk";letter-spacing:.18em}
.product-copy h3{margin:0;padding-right:34px;font:500 clamp(23px,2vw,31px)/1.03 "Space Grotesk";letter-spacing:-.04em;color:#f1ece7}
.product-copy p{margin:18px 0 20px;color:var(--muted);line-height:1.7}
.product-copy ul{display:grid;gap:8px;margin:0;padding:0;list-style:none;color:#cfc4ba;font:500 10px "Space Grotesk";letter-spacing:.06em;text-transform:uppercase}
.product-copy li:before{content:"+";margin-right:9px;color:#b875cb}
.welcome-cta{margin-top:clamp(65px,9vw,120px);padding:clamp(35px,5vw,65px);border:1px solid rgba(255,255,255,.085);background:radial-gradient(circle at 85% 40%,rgba(123,58,145,.12),transparent 34%),linear-gradient(115deg,rgba(255,255,255,.025),rgba(255,255,255,.005));text-align:center}
.welcome-cta>span{color:#aa75bd;font:650 9px "Space Grotesk";letter-spacing:.22em}
.welcome-cta h3{margin:15px 0 28px;font:500 clamp(30px,4.5vw,62px)/1 "Space Grotesk";letter-spacing:-.05em;color:#eee8e2}
@keyframes gmMeter{to{transform:rotate(27deg)}}
@keyframes wavePulse{to{transform:scaleY(.56);opacity:.62}}
@media(max-width:1050px){.resource-grid{grid-template-columns:1fr 1fr!important}.welcome-product-drums{grid-column:1/-1;display:grid;grid-template-columns:minmax(300px,.78fr) minmax(0,1fr)}.welcome-product-drums .drum-pack-stage{height:500px}.welcome-product-drums .product-copy{align-self:center;padding:44px}.drum-pack-stage picture{width:min(68%,300px)}}
@media(max-width:760px){.notes-intro{grid-template-columns:1fr!important}.welcome-pack-mark{justify-content:flex-start;flex-wrap:wrap}.resource-grid{grid-template-columns:1fr!important}.welcome-product-drums{grid-column:auto;display:block}.drum-pack-stage,.nunchuck-showcase,.backing-cover,.welcome-product-drums .drum-pack-stage{height:min(112vw,470px)}.product-copy{padding:27px 8px 18px}.product-badges{top:22px;left:22px;right:22px}.welcome-pack-copy h2{font-size:clamp(50px,17vw,82px)}.welcome-manifesto{font-size:22px}}
@media(max-width:420px){.welcome-product{padding:9px}.nunchuck-showcase,.backing-cover{padding-left:20px;padding-right:20px}.nunchuck-modes{grid-template-columns:1fr 1fr}.amp-panel>b:nth-of-type(n+5){display:none}.product-badges span{font-size:5.6px;padding:6px}.welcome-pack-mark i{width:22px}}
@media(prefers-reduced-motion:reduce){.cover-wave i,.amp-panel i:after{animation:none}.welcome-product,.drum-pack-stage picture{transition:none!important}}

/* GOLD MASTER 1.4 — VISUAL + PERFORMANCE PASS */
.spotify-premium{position:relative;min-height:352px;border:1px solid rgba(255,255,255,.1);border-radius:18px!important;background:#090b0d!important;box-shadow:0 30px 90px rgba(0,0,0,.45),inset 0 1px rgba(255,255,255,.04)}
.spotify-premium iframe{position:absolute;inset:0;opacity:0;visibility:hidden;transition:opacity .45s ease}
.spotify-premium.is-loaded iframe{opacity:1;visibility:visible}
.spotify-premium.is-loaded .spotify-poster{opacity:0;visibility:hidden;pointer-events:none}
.spotify-poster{position:absolute;inset:0;z-index:2;display:grid;grid-template-columns:minmax(170px,.72fr) 1fr auto;align-items:center;gap:28px;padding:34px;background:radial-gradient(circle at 12% 30%,rgba(105,56,179,.28),transparent 31%),radial-gradient(circle at 90% 80%,rgba(31,190,104,.13),transparent 34%),linear-gradient(135deg,#101116,#080a0c 60%,#07100c);transition:opacity .35s ease,visibility .35s ease}
.spotify-poster:after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(110deg,rgba(255,255,255,.045),transparent 22%,transparent 72%,rgba(30,215,96,.035))}
.spotify-poster-art{position:relative;aspect-ratio:1;display:grid;place-content:center;padding:24px;border:1px solid rgba(255,255,255,.11);background:radial-gradient(circle at 50% 42%,rgba(194,95,243,.26),transparent 33%),linear-gradient(145deg,#16121e,#08090d);box-shadow:0 24px 55px rgba(0,0,0,.5);overflow:hidden}
.spotify-poster-art:before{content:"";position:absolute;inset:0;background:repeating-linear-gradient(90deg,transparent 0 18px,rgba(255,255,255,.018) 19px 20px)}
.spotify-poster-art span,.spotify-poster-art strong{position:relative;z-index:1;font-family:"Space Grotesk";letter-spacing:.08em;text-align:center}.spotify-poster-art span{font-size:13px;color:#b980e0}.spotify-poster-art strong{font-size:clamp(28px,4vw,54px);line-height:.85;color:#f3eee9}.spotify-poster-art i{position:absolute;left:18%;right:18%;bottom:18%;height:1px;background:linear-gradient(90deg,transparent,#a95bdb,#27d17f,transparent);box-shadow:0 0 18px #7d55d8}
.spotify-poster-copy{position:relative;z-index:2}.spotify-poster-copy small{color:#1ed760;font:650 9px "Space Grotesk";letter-spacing:.2em}.spotify-poster-copy h3{margin:9px 0 10px;font:500 clamp(32px,4vw,58px)/.95 "Space Grotesk";letter-spacing:-.055em}.spotify-poster-copy p{max-width:420px;color:#aaa6a3;line-height:1.6}.spotify-load{margin-top:18px;min-height:48px;padding:0 22px;border:1px solid rgba(30,215,96,.6);border-radius:999px;background:rgba(30,215,96,.09);color:#f5f5f5;font:650 11px "Space Grotesk";letter-spacing:.08em;cursor:pointer;transition:.25s ease}.spotify-load:hover{transform:translateY(-2px);background:#1ed760;color:#071008;box-shadow:0 12px 35px rgba(30,215,96,.18)}.spotify-load span{margin-left:8px}.spotify-brand{align-self:start;position:relative;z-index:2;color:#e8e8e8;font:650 12px "Space Grotesk"}
.drum-pack-stage picture{width:min(86%,390px)!important;transform:perspective(900px) rotateY(-4deg) translateY(5px)!important}.drum-pack-stage img{border-radius:8px;box-shadow:0 28px 70px rgba(0,0,0,.55)}
.section:not(.hero),.signal-method,.signal-notes,.story-transition,.trust-strip{content-visibility:auto;contain-intrinsic-size:900px}
img{content-visibility:auto}
@media(max-width:720px){.spotify-poster{grid-template-columns:110px 1fr;padding:20px;gap:18px}.spotify-brand{display:none}.spotify-poster-copy p{font-size:13px}.spotify-load{padding:0 16px;font-size:9px}.spotify-poster-art strong{font-size:28px}}
@media(max-width:480px){.spotify-poster{grid-template-columns:1fr;align-content:center;text-align:center}.spotify-poster-art{width:145px;margin:auto}.spotify-poster-copy p{margin-inline:auto}.spotify-premium{min-height:430px}.spotify-frame #spotify-embed,.spotify-frame #spotify-embed iframe,.spotify-frame iframe{height:430px!important}}
@media(prefers-reduced-motion:reduce){.spotify-premium iframe,.spotify-poster{transition:none}.spotify-load:hover{transform:none}}

/* GOLD MASTER 1.5 — real Nunchuck integration */
.nunchuck-real-stage{position:relative!important;padding:26px 18px 18px!important;display:grid!important;grid-template-rows:1fr auto!important;align-items:center!important;background:radial-gradient(circle at 50% 30%,rgba(225,157,74,.16),transparent 36%),radial-gradient(circle at 20% 80%,rgba(100,56,180,.18),transparent 40%),linear-gradient(155deg,#121217,#050507 68%,#120b08)!important;overflow:hidden!important}
.nunchuck-real-stage:before{content:"";position:absolute;left:7%;right:7%;bottom:54px;height:35px;border-radius:50%;background:rgba(0,0,0,.78);filter:blur(15px)}
.nunchuck-halo{position:absolute;inset:12% 8% 18%;background:radial-gradient(ellipse,rgba(216,145,66,.17),transparent 62%);filter:blur(24px)}
.nunchuck-real-stage picture{position:relative;z-index:2;display:block;width:100%;transform:perspective(1000px) rotateX(1deg) translateY(3px);filter:drop-shadow(0 30px 30px rgba(0,0,0,.75));transition:transform .45s ease,filter .45s ease}
.welcome-product-nunchuck:hover .nunchuck-real-stage picture{transform:perspective(1000px) rotateX(0) translateY(-5px) scale(1.025);filter:drop-shadow(0 38px 34px rgba(0,0,0,.8)) drop-shadow(0 0 22px rgba(223,151,72,.13))}
.nunchuck-real-stage img{display:block;width:100%;height:auto}
.nunchuck-mode-strip{position:absolute;z-index:4;left:26px;bottom:49px;display:flex;gap:5px;padding:5px;background:rgba(4,4,6,.72);border:1px solid rgba(255,255,255,.08);backdrop-filter:blur(10px)}
.nunchuck-mode-strip span{display:grid;place-items:center;width:27px;height:21px;color:#817a72;font:700 7px "Space Grotesk";letter-spacing:.08em;border:1px solid rgba(255,255,255,.06)}
.nunchuck-mode-strip span.active{color:#ff4f39;border-color:rgba(255,79,57,.35);box-shadow:inset 0 0 13px rgba(255,50,30,.18)}
.nunchuck-real-stage>a{position:relative;z-index:5;display:flex;justify-content:space-between;align-items:center;width:100%;padding:12px 8px 2px;color:#c4bbb2;text-decoration:none;font:650 7px "Space Grotesk";letter-spacing:.15em}
.nunchuck-real-stage>a b{color:#d4a15f}.nunchuck-real-stage>a span{color:#a67add}

/* GOLD MASTER 1.5 — premium lazy Spotify facade */
.spotify-premium-v15{padding:0!important;border:1px solid rgba(157,94,231,.25)!important;border-radius:20px;background:linear-gradient(145deg,#0d0d14,#06070b)!important;overflow:hidden;box-shadow:0 34px 90px rgba(0,0,0,.42),0 0 44px rgba(100,52,174,.06)}
.spotify-v15-head{height:52px;display:flex;align-items:center;gap:12px;padding:0 22px;border-bottom:1px solid rgba(255,255,255,.075);font:650 8px "Space Grotesk";letter-spacing:.18em;color:#8d8790}
.spotify-v15-head span{color:#b76de7}.spotify-v15-head strong{color:#e8e4e1}.spotify-v15-head i{margin-left:auto;color:#1ed760;font-style:normal}
.spotify-v15-player{position:relative;min-height:300px;display:grid;grid-template-columns:190px 1fr auto;align-items:center;gap:28px;padding:28px;overflow:hidden;background:radial-gradient(circle at 16% 24%,rgba(114,55,181,.24),transparent 30%),radial-gradient(circle at 86% 84%,rgba(30,215,96,.08),transparent 31%)}
.spotify-v15-player:after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(110deg,rgba(255,255,255,.035),transparent 24%,transparent 76%,rgba(31,166,255,.03))}
.spotify-v15-art{aspect-ratio:1;position:relative;z-index:2;display:grid;place-content:center;text-align:center;border:1px solid rgba(255,255,255,.12);background:radial-gradient(circle at 50% 35%,rgba(162,72,220,.25),transparent 33%),linear-gradient(145deg,#181223,#07080d);box-shadow:0 25px 50px rgba(0,0,0,.45);overflow:hidden}
.spotify-v15-art:before{content:"";position:absolute;inset:0;background:repeating-linear-gradient(90deg,transparent 0 17px,rgba(255,255,255,.018) 18px 19px)}
.spotify-v15-art small,.spotify-v15-art strong,.spotify-v15-art span{position:relative;z-index:1}.spotify-v15-art small{font:650 7px "Space Grotesk";letter-spacing:.18em;color:#b487d7}.spotify-v15-art strong{margin-top:10px;font:600 34px/.82 "Space Grotesk";letter-spacing:-.065em;color:#f4efeb}.spotify-v15-art span{display:block;width:58%;height:1px;margin:18px auto 0;background:linear-gradient(90deg,transparent,#b54be3,#1ed760,transparent);box-shadow:0 0 18px rgba(145,80,230,.7)}
.spotify-v15-meta{position:relative;z-index:2}.spotify-v15-meta>small{color:#1ed760;font:650 8px "Space Grotesk";letter-spacing:.19em}.spotify-v15-meta h3{margin:8px 0 4px;font:500 clamp(34px,4vw,58px)/.92 "Space Grotesk";letter-spacing:-.06em}.spotify-v15-meta p{margin:0;color:#aaa4ac}.spotify-v15-wave{height:58px;display:flex;align-items:center;gap:3px;margin:22px 0 16px;overflow:hidden}.spotify-v15-wave i{width:3px;height:12px;border-radius:3px;background:linear-gradient(#ad4cde,#3979ed);opacity:.8;animation:spotifyPulse 1.8s ease-in-out infinite;animation-delay:calc(var(--n,1)*-.06s)}
.spotify-v15-wave i:nth-child(3n){height:30px}.spotify-v15-wave i:nth-child(4n){height:20px}.spotify-v15-wave i:nth-child(5n){height:42px}.spotify-v15-wave i:nth-child(7n){height:50px}
.spotify-v15-controls{display:flex;align-items:center;gap:12px}.spotify-v15-controls .spotify-load{width:54px;height:54px;min-height:0;margin:0;padding:0;display:grid;place-items:center;border-radius:50%;border:1px solid rgba(164,77,235,.75);background:linear-gradient(135deg,#a829e8,#315fff);box-shadow:0 0 28px rgba(128,55,226,.28);font-size:18px}.spotify-v15-controls>span{font:650 9px "Space Grotesk";letter-spacing:.12em;color:#cbc5cc}.spotify-v15-controls>a{margin-left:auto;color:#b9a2cc;text-decoration:none;font-size:11px}.spotify-v15-brand{position:relative;z-index:2;align-self:start;text-align:right;color:#fff;font:650 12px "Space Grotesk"}.spotify-v15-brand small{color:#69656c;font-size:6px;letter-spacing:.16em}
.spotify-v15-player iframe{position:absolute;inset:0;z-index:8;width:100%;height:100%;min-height:352px;border:0;opacity:0;visibility:hidden;background:#080808;transition:opacity .35s ease}.spotify-premium-v15.is-loaded .spotify-v15-player iframe{opacity:1;visibility:visible}.spotify-premium-v15.is-loaded .spotify-v15-player>*:not(iframe){opacity:0;visibility:hidden;pointer-events:none}
@keyframes spotifyPulse{0%,100%{transform:scaleY(.55);opacity:.45}50%{transform:scaleY(1);opacity:1}}
@media(max-width:760px){.nunchuck-real-stage{min-height:310px!important;height:auto!important}.nunchuck-mode-strip{bottom:46px}.spotify-v15-player{grid-template-columns:120px 1fr;padding:20px;gap:18px}.spotify-v15-brand{display:none}.spotify-v15-art strong{font-size:25px}.spotify-v15-wave{height:40px;margin:13px 0}.spotify-v15-controls>a{display:none}}
@media(max-width:500px){.spotify-v15-player{grid-template-columns:1fr;text-align:center;min-height:475px}.spotify-v15-art{width:150px;margin:auto}.spotify-v15-controls{justify-content:center}.spotify-v15-controls>span{display:none}.spotify-v15-head strong{display:none}.spotify-v15-player iframe{min-height:475px}.nunchuck-mode-strip{left:18px}}
@media(prefers-reduced-motion:reduce){.spotify-v15-wave i{animation:none}.nunchuck-real-stage picture{transition:none}}

/* GOLD MASTER 1.6 — FULL CATALOGUE SPOTIFY PLAYER */
.spotify-v16{position:relative;overflow:hidden;border:1px solid rgba(151,92,255,.28);border-radius:28px;background:radial-gradient(circle at 86% 4%,rgba(36,162,255,.14),transparent 34%),radial-gradient(circle at 8% 18%,rgba(188,42,255,.16),transparent 31%),linear-gradient(145deg,#090b13 0%,#080a10 58%,#07111a 100%);box-shadow:0 32px 100px rgba(0,0,0,.46),inset 0 1px 0 rgba(255,255,255,.045)}
.spotify-v16:before{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(110deg,transparent 0 42%,rgba(255,255,255,.025) 48%,transparent 54%)}
.spotify-v16-top{display:grid;grid-template-columns:minmax(210px,290px) 1fr;gap:clamp(24px,4vw,58px);padding:clamp(24px,4vw,56px);align-items:center;border-bottom:1px solid rgba(255,255,255,.08)}
.spotify-v16-cover{aspect-ratio:1;position:relative;display:flex;flex-direction:column;justify-content:space-between;padding:26px;border-radius:18px;overflow:hidden;background:radial-gradient(circle at 50% 44%,rgba(188,78,255,.45),transparent 19%),radial-gradient(circle at 50% 50%,transparent 0 25%,rgba(47,150,255,.34) 26% 27%,transparent 28%),linear-gradient(155deg,#11182b,#080b15 62%,#170c26);box-shadow:0 24px 70px rgba(0,0,0,.55),0 0 44px rgba(145,59,255,.2),inset 0 0 0 1px rgba(255,255,255,.12);transform:perspective(900px) rotateY(3deg) rotateX(1deg)}
.spotify-v16-cover:before{content:"";position:absolute;inset:0;background:repeating-linear-gradient(90deg,transparent 0 18px,rgba(124,74,255,.12) 19px,transparent 20px),linear-gradient(0deg,rgba(177,50,255,.17),transparent 40%);clip-path:polygon(0 58%,100% 44%,100% 100%,0 100%)}
.spotify-v16-cover:after{content:"";position:absolute;left:15%;right:15%;top:36%;height:28%;border:1px solid rgba(114,183,255,.42);border-radius:50%;box-shadow:0 0 32px rgba(104,75,255,.6),inset 0 0 32px rgba(186,66,255,.25)}
.spotify-v16-cover span,.spotify-v16-cover strong,.spotify-v16-cover i{position:relative;z-index:2}.spotify-v16-cover span{font-family:"Space Grotesk",sans-serif;font-size:.72rem;letter-spacing:.18em;color:#d8d8e8}.spotify-v16-cover strong{font-family:"Space Grotesk",sans-serif;font-size:clamp(2rem,4vw,3.35rem);line-height:.82;letter-spacing:-.07em;text-shadow:0 0 28px rgba(172,80,255,.5)}.spotify-v16-cover i{font-style:normal;font-size:.65rem;letter-spacing:.15em;color:#aeb4c6}
.spotify-v16-intro{min-width:0}.spotify-v16-title{display:flex;justify-content:space-between;gap:20px;align-items:flex-start;margin:8px 0 18px}.spotify-v16-title small{display:block;color:#9298aa;letter-spacing:.15em;font-size:.68rem}.spotify-v16-title h3{margin:.25rem 0 0;font-family:"Space Grotesk",sans-serif;font-size:clamp(2.5rem,6vw,5.3rem);line-height:.86;letter-spacing:-.065em}.spotify-v16-title p{margin:.65rem 0 0;color:#b8bdca;font-size:1.08rem}.spotify-mark{font-weight:700;color:#fff;background:#1ed760;border-radius:999px;padding:8px 14px;font-size:.76rem;box-shadow:0 0 24px rgba(30,215,96,.2)}
.spotify-v16-copy{max-width:660px;color:#b8bdca;line-height:1.65}.spotify-v16-actions{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-top:26px}.spotify-v16-actions button,.spotify-v16-actions a{min-height:48px;border-radius:999px;padding:0 21px;display:inline-flex;align-items:center;gap:10px;font:600 .84rem "DM Sans",sans-serif;text-decoration:none}.spotify-v16-play{border:0;color:#080b0d;background:#1ed760;cursor:pointer;box-shadow:0 10px 30px rgba(30,215,96,.2);transition:transform .2s ease,box-shadow .2s ease}.spotify-v16-play:hover{transform:translateY(-2px);box-shadow:0 14px 38px rgba(30,215,96,.3)}.spotify-v16-actions a{border:1px solid rgba(255,255,255,.16);color:#fff;background:rgba(255,255,255,.035)}
.spotify-v16-spectrum{height:56px;display:flex;align-items:center;gap:4px;margin-top:26px;opacity:.72;mask-image:linear-gradient(90deg,#000,transparent)}.spotify-v16-spectrum i{display:block;width:3px;height:calc(8px + (var(--bar,1) * 2px));max-height:48px;border-radius:9px;background:linear-gradient(#29b7ff,#a13cff);animation:v16pulse 1.8s ease-in-out infinite alternate;animation-delay:calc(var(--i,0) * -55ms)}
.spotify-v16-body{padding:0 clamp(20px,4vw,48px) clamp(28px,4vw,48px)}.spotify-v16-list-head{display:flex;justify-content:space-between;padding:22px 2px 14px;color:#b6bbca;font-size:.72rem;letter-spacing:.15em}.spotify-v16-list-head small{color:#697083}.spotify-v16-list{list-style:none;margin:0;padding:0;border-top:1px solid rgba(255,255,255,.08);display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:30px}.spotify-v16-list li{display:grid;grid-template-columns:32px 1fr auto 32px;gap:12px;align-items:center;min-height:62px;border-bottom:1px solid rgba(255,255,255,.07);transition:background .18s ease,padding .18s ease}.spotify-v16-list li:hover{background:rgba(255,255,255,.035);padding-inline:8px}.catalogue-index{font:500 .7rem "Space Grotesk",sans-serif;color:#5f6575}.catalogue-title{display:flex;min-width:0;flex-direction:column}.catalogue-title strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:.88rem}.catalogue-title small{color:#757c8d;font-size:.69rem;margin-top:2px}.spotify-v16-list time{color:#747b8c;font-size:.72rem}.spotify-v16-list a{display:grid;place-items:center;width:28px;height:28px;border:1px solid rgba(255,255,255,.1);border-radius:50%;color:#a9b0c0;text-decoration:none}.spotify-v16-list a:hover{color:#fff;border-color:#1ed760;background:rgba(30,215,96,.1)}
.spotify-v16-embed{position:relative;border-top:1px solid rgba(255,255,255,.1);padding:18px clamp(18px,4vw,42px) clamp(24px,4vw,42px);background:#06080d}.spotify-v16-embed[hidden]{display:none}.spotify-v16-embed-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px}.spotify-v16-embed-head strong{font-size:.78rem;letter-spacing:.12em;text-transform:uppercase;color:#aab0be}.spotify-v16-embed-head button{width:38px;height:38px;border-radius:50%;border:1px solid rgba(255,255,255,.14);color:#fff;background:rgba(255,255,255,.05);font-size:1.5rem;cursor:pointer}.spotify-v16-embed iframe{display:block;border-radius:16px;background:#121212}
@keyframes v16pulse{to{transform:scaleY(.3);opacity:.45}}
@media(max-width:900px){.spotify-v16-top{grid-template-columns:190px 1fr}.spotify-v16-list{grid-template-columns:1fr}.spotify-v16-title h3{font-size:3.4rem}}
@media(max-width:680px){.spotify-v16-top{grid-template-columns:1fr}.spotify-v16-cover{width:min(100%,300px);margin:auto;transform:none}.spotify-v16-title{flex-direction:column}.spotify-v16-title h3{font-size:3rem}.spotify-mark{order:-1}.spotify-v16-list li{grid-template-columns:28px 1fr auto 28px}.spotify-v16-copy{font-size:.94rem}}
@media(prefers-reduced-motion:reduce){.spotify-v16-spectrum i{animation:none}.spotify-v16-play{transition:none}}

/* GOLD MASTER 1.7 — COMPACT SPOTIFY EDITION */
.spotify-v16{border-radius:22px}
.spotify-v16-top{grid-template-columns:minmax(160px,210px) 1fr;gap:clamp(20px,3vw,38px);padding:clamp(20px,3vw,34px)}
.spotify-v16-cover{padding:20px;border-radius:15px}
.spotify-v16-cover strong{font-size:clamp(1.75rem,3.2vw,2.7rem)}
.spotify-v16-title{margin:4px 0 12px}
.spotify-v16-title h3{font-size:clamp(2.2rem,4.5vw,3.8rem)}
.spotify-v16-copy{margin:0;line-height:1.5;font-size:.94rem}
.spotify-v16-actions{margin-top:18px}
.spotify-v16-spectrum{height:34px;margin-top:16px}
.spotify-v16-body{padding:0 clamp(18px,3vw,34px) clamp(22px,3vw,30px)}
.spotify-v16-list-head{padding:16px 2px 10px}
.spotify-v16-list{grid-template-columns:repeat(3,minmax(0,1fr));column-gap:20px;max-height:230px;overflow:auto;padding-right:8px;scrollbar-width:thin;scrollbar-color:rgba(151,92,255,.55) rgba(255,255,255,.04)}
.spotify-v16-list::-webkit-scrollbar{width:8px}.spotify-v16-list::-webkit-scrollbar-track{background:rgba(255,255,255,.04);border-radius:8px}.spotify-v16-list::-webkit-scrollbar-thumb{background:linear-gradient(#8f43ff,#22a7ff);border-radius:8px}
.spotify-v16-list li{min-height:52px;grid-template-columns:26px 1fr auto 28px;gap:9px}
.catalogue-title strong{font-size:.82rem}.catalogue-title small{font-size:.64rem}.spotify-v16-list time{font-size:.67rem}
.spotify-v16-embed iframe{height:420px}
@media(max-width:1100px){.spotify-v16-list{grid-template-columns:repeat(2,minmax(0,1fr));max-height:250px}}
@media(max-width:900px){.spotify-v16-top{grid-template-columns:150px 1fr}.spotify-v16-title h3{font-size:2.8rem}}
@media(max-width:680px){.spotify-v16-top{grid-template-columns:1fr}.spotify-v16-cover{width:min(100%,220px)}.spotify-v16-title h3{font-size:2.5rem}.spotify-v16-list{grid-template-columns:1fr;max-height:270px}}


/* RELEASE CANDIDATE — OFFICIAL SPOTIFY ONLY */
.spotify-official{position:relative;overflow:hidden;border:1px solid rgba(255,255,255,.11);border-radius:22px;background:linear-gradient(145deg,rgba(20,18,26,.96),rgba(8,9,14,.98));box-shadow:0 26px 80px rgba(0,0,0,.34),0 0 55px rgba(117,66,190,.08)}
.spotify-official:before{content:"";position:absolute;inset:-25% auto auto -12%;width:55%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,rgba(123,69,207,.2),transparent 66%);pointer-events:none}
.spotify-official-head{position:relative;z-index:1;display:flex;align-items:end;justify-content:space-between;gap:24px;padding:28px 30px 22px}
.spotify-official-head h3{margin:6px 0 4px;font:500 clamp(2rem,4vw,3.15rem)/.95 "Space Grotesk",sans-serif;letter-spacing:-.05em}
.spotify-official-head>div>p:last-child{margin:0;color:#9d98a8;font-size:.9rem}
.spotify-official-link{flex:0 0 auto;display:inline-flex;align-items:center;min-height:42px;padding:0 16px;border:1px solid rgba(255,255,255,.13);border-radius:999px;color:#fff;text-decoration:none;font-size:.78rem;background:rgba(255,255,255,.035);transition:background .2s ease,border-color .2s ease,transform .2s ease}
.spotify-official-link:hover{background:rgba(30,215,96,.1);border-color:rgba(30,215,96,.55);transform:translateY(-1px)}
.spotify-official-frame{position:relative;margin:0 18px 18px;padding:8px;border:1px solid rgba(255,255,255,.08);border-radius:18px;background:rgba(0,0,0,.32);box-shadow:inset 0 1px rgba(255,255,255,.05),0 16px 45px rgba(0,0,0,.26)}
.spotify-official-frame iframe{position:relative;z-index:2;display:block;width:100%;height:520px;border:0;border-radius:12px;background:#121212;opacity:0;transition:opacity .35s ease}
.spotify-official.is-loaded .spotify-official-frame iframe{opacity:1}
.spotify-skeleton{position:absolute;z-index:1;inset:8px;display:grid;grid-template-columns:118px 1fr;grid-template-rows:repeat(4,1fr);gap:12px;padding:20px;border-radius:12px;background:#121212;overflow:hidden}
.spotify-skeleton:after{content:"";position:absolute;inset:0;transform:translateX(-100%);background:linear-gradient(90deg,transparent,rgba(255,255,255,.055),transparent);animation:spotifySkeleton 1.35s infinite}
.spotify-skeleton span{grid-row:1/-1;width:100%;aspect-ratio:1;align-self:start;border-radius:9px;background:#262626}
.spotify-skeleton i{display:block;height:14px;align-self:center;border-radius:20px;background:#242424}.spotify-skeleton i:nth-of-type(1){width:55%}.spotify-skeleton i:nth-of-type(2){width:82%}.spotify-skeleton i:nth-of-type(3){width:68%}.spotify-skeleton i:nth-of-type(4){width:74%}
.spotify-official.is-loaded .spotify-skeleton{display:none}
@keyframes spotifySkeleton{to{transform:translateX(100%)}}
@media(max-width:900px){.spotify-official-head{padding:24px 24px 18px}.spotify-official-frame{margin:0 14px 14px}.spotify-official-frame iframe{height:500px}}
@media(max-width:560px){.spotify-official-head{align-items:flex-start;flex-direction:column;padding:22px 20px 16px}.spotify-official-link{min-height:40px}.spotify-official-frame{margin:0 10px 10px;padding:5px;border-radius:15px}.spotify-official-frame iframe{height:470px;border-radius:10px}.spotify-skeleton{inset:5px;grid-template-columns:78px 1fr;padding:14px}.spotify-skeleton span{border-radius:7px}}
@media(prefers-reduced-motion:reduce){.spotify-official-link,.spotify-official-frame iframe{transition:none}.spotify-skeleton:after{animation:none}}

/* RELEASE CANDIDATE — CINEMATIC CREATIVE EPILOGUE */
.creative-epilogue{position:relative;min-height:clamp(620px,76vw,880px);margin-top:clamp(70px,10vw,140px);overflow:hidden;border:1px solid rgba(255,255,255,.1);background:#07070a;isolation:isolate;box-shadow:0 45px 110px rgba(0,0,0,.42)}
.creative-epilogue-media{position:absolute;inset:0;z-index:-4}.creative-epilogue-media img{width:100%;height:100%;object-fit:cover;object-position:center 37%;filter:saturate(.74) contrast(1.08) brightness(.62);transform:scale(1.025);transition:transform 1.6s cubic-bezier(.2,.7,.2,1),filter 1.1s ease}.creative-epilogue.visible .creative-epilogue-media img{transform:scale(1)}
.creative-epilogue-shade{position:absolute;inset:0;z-index:-3;background:linear-gradient(90deg,rgba(5,5,8,.96) 0%,rgba(7,7,11,.83) 38%,rgba(7,7,11,.38) 68%,rgba(5,5,8,.72) 100%),linear-gradient(0deg,rgba(5,5,8,.96),transparent 43%,rgba(4,4,7,.38));}
.creative-epilogue:before{content:"";position:absolute;z-index:-2;inset:auto -12% -34% 28%;height:76%;background:radial-gradient(ellipse,rgba(115,44,172,.28),rgba(27,110,177,.12) 32%,transparent 69%);filter:blur(45px);pointer-events:none}
.creative-epilogue:after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:.16;background-image:linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px);background-size:56px 56px;mask-image:linear-gradient(90deg,#000,transparent 78%)}
.creative-orbit{position:absolute;z-index:-1;border:1px solid rgba(180,116,232,.16);border-radius:50%;pointer-events:none}.creative-orbit-one{width:480px;height:480px;right:-180px;top:-165px}.creative-orbit-two{width:280px;height:280px;right:-38px;top:-64px;border-color:rgba(73,161,231,.13)}
.creative-epilogue-inner{min-height:inherit;display:grid;grid-template-columns:minmax(0,1fr) minmax(310px,.62fr);grid-template-rows:1fr auto;gap:50px;align-items:center;padding:clamp(42px,7vw,94px)}
.creative-epilogue-copy{max-width:780px}.creative-kicker{display:flex;align-items:center;gap:14px;color:#ba86d1;font:650 9px/1 "Space Grotesk";letter-spacing:.25em}.creative-kicker:before{content:"";width:38px;height:1px;background:linear-gradient(90deg,#b76ed1,#4d9ed6)}
.creative-epilogue-copy h3{margin:24px 0 26px;font:500 clamp(48px,7.1vw,106px)/.86 "Space Grotesk";letter-spacing:-.068em;color:#f3eee9;text-wrap:balance}.creative-epilogue-copy h3 em{font-style:normal;color:transparent;background:linear-gradient(100deg,#d2a6e5,#a6cbed 65%,#e5c3b0);background-clip:text;-webkit-background-clip:text}
.creative-epilogue-copy p{max-width:660px;margin:0;color:#c0b9c2;font-size:clamp(16px,1.5vw,20px);line-height:1.72}
.creative-actions{display:grid;gap:12px;align-self:center}.creative-action{position:relative;display:grid;grid-template-columns:1fr auto;gap:9px 24px;min-height:116px;padding:24px 25px;border:1px solid rgba(255,255,255,.12);background:rgba(10,10,14,.5);backdrop-filter:blur(14px);color:#f5f0ec;text-decoration:none;overflow:hidden;transition:transform .35s cubic-bezier(.2,.7,.2,1),border-color .3s ease,background .3s ease}.creative-action:before{content:"";position:absolute;inset:0;background:linear-gradient(120deg,transparent,rgba(255,255,255,.065),transparent 65%);transform:translateX(-110%);transition:transform .8s ease}.creative-action:hover{transform:translateX(-7px);border-color:rgba(184,119,216,.42);background:rgba(17,13,22,.72)}.creative-action:hover:before{transform:translateX(110%)}
.creative-action-primary{background:linear-gradient(135deg,rgba(99,44,127,.48),rgba(18,39,65,.55));border-color:rgba(188,128,218,.28)}.creative-action span{grid-column:1;color:#9b92a2;font:650 7px/1 "Space Grotesk";letter-spacing:.2em}.creative-action strong{align-self:end;font:500 clamp(20px,2vw,28px)/1 "Space Grotesk";letter-spacing:-.04em}.creative-action i{grid-column:2;grid-row:1/3;align-self:center;display:grid;place-items:center;width:42px;height:42px;border:1px solid rgba(255,255,255,.14);border-radius:50%;font-style:normal;color:#d8cae0;transition:transform .3s ease,background .3s ease}.creative-action:hover i{transform:rotate(45deg);background:rgba(255,255,255,.08)}
.creative-socials{grid-column:1/-1;display:flex;align-items:center;justify-content:space-between;gap:28px;padding-top:30px;border-top:1px solid rgba(255,255,255,.11)}.creative-socials>span{color:#7f7784;font:650 8px/1 "Space Grotesk";letter-spacing:.24em}.creative-socials>div{display:flex;gap:clamp(18px,3vw,38px);flex-wrap:wrap}.creative-socials a{position:relative;color:#bbb3bd;text-decoration:none;font-size:.78rem;letter-spacing:.04em;transition:color .2s ease}.creative-socials a:after{content:"";position:absolute;left:0;right:100%;bottom:-6px;height:1px;background:linear-gradient(90deg,#a960ca,#5aa9dc);transition:right .25s ease}.creative-socials a:hover{color:#fff}.creative-socials a:hover:after{right:0}
@media(max-width:900px){.creative-epilogue{min-height:auto}.creative-epilogue-inner{grid-template-columns:1fr;grid-template-rows:auto;padding:clamp(38px,7vw,70px);gap:42px}.creative-epilogue-shade{background:linear-gradient(90deg,rgba(5,5,8,.92),rgba(5,5,8,.55)),linear-gradient(0deg,rgba(5,5,8,.98),transparent 56%,rgba(5,5,8,.55))}.creative-actions{grid-template-columns:repeat(2,minmax(0,1fr))}.creative-socials{grid-column:1;align-items:flex-start;flex-direction:column}}
@media(max-width:620px){.creative-epilogue{margin-inline:-10px;border-left:0;border-right:0}.creative-epilogue-media img{object-position:62% center}.creative-epilogue-shade{background:linear-gradient(0deg,rgba(5,5,8,.99) 0%,rgba(5,5,8,.86) 66%,rgba(5,5,8,.5) 100%)}.creative-epilogue-inner{padding:48px 24px 36px}.creative-epilogue-copy{padding-top:130px}.creative-epilogue-copy h3{font-size:clamp(43px,14vw,66px)}.creative-actions{grid-template-columns:1fr}.creative-action{min-height:104px}.creative-socials>div{display:grid;grid-template-columns:repeat(2,1fr);width:100%;gap:20px 28px}}
@media(prefers-reduced-motion:reduce){.creative-epilogue-media img,.creative-action,.creative-action:before,.creative-action i,.creative-socials a:after{transition:none}}

/* GOLD MASTER 1.8 — STUDIO EXPERIENCE */
.creative-epilogue{min-height:clamp(600px,68vw,820px);border-radius:24px}
.creative-epilogue-media img{object-position:center center;filter:saturate(.9) contrast(1.08) brightness(.64)}
.creative-epilogue-shade{background:linear-gradient(90deg,rgba(4,4,8,.98) 0%,rgba(6,6,10,.91) 30%,rgba(6,6,10,.52) 56%,rgba(4,4,8,.16) 82%,rgba(4,4,8,.38) 100%),linear-gradient(0deg,rgba(4,4,8,.92),transparent 45%,rgba(4,4,8,.22))}
.creative-epilogue-inner{grid-template-columns:minmax(0,.84fr) minmax(320px,.56fr);padding:clamp(38px,6vw,82px)}
.creative-epilogue-copy{max-width:660px}
.creative-epilogue-copy h3{font-size:clamp(46px,6.2vw,90px);max-width:720px}
.creative-epilogue-copy p{max-width:570px;color:#d1cad2}
.creative-action{backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
@media(max-width:900px){
  .creative-epilogue{min-height:auto}
  .creative-epilogue-media img{object-position:66% center}
  .creative-epilogue-shade{background:linear-gradient(90deg,rgba(4,4,8,.96),rgba(4,4,8,.54)),linear-gradient(0deg,rgba(4,4,8,.98),transparent 52%,rgba(4,4,8,.46))}
}
@media(max-width:620px){
  .creative-epilogue-media img{object-position:70% center;filter:saturate(.84) contrast(1.08) brightness(.57)}
  .creative-epilogue-copy{padding-top:150px}
}

/* =========================================================
   TIM HUTCH 2.0A — MOTION & POLISH
   ========================================================= */
:root{
  --motion-ease:cubic-bezier(.22,.75,.18,1);
  --motion-spring:cubic-bezier(.18,.9,.24,1.08);
  --motion-fast:260ms;
  --motion-med:620ms;
  --motion-slow:1050ms;
  --motion-purple:rgba(166,92,218,.24);
  --motion-cyan:rgba(74,173,224,.18);
}
body:before{
  content:"";position:fixed;inset:-20%;z-index:-20;pointer-events:none;
  background:radial-gradient(circle at 14% 20%,rgba(120,54,172,.08),transparent 30%),radial-gradient(circle at 86% 66%,rgba(43,132,186,.065),transparent 32%);
  animation:th20Ambient 15s ease-in-out infinite alternate;
}
@keyframes th20Ambient{to{transform:translate3d(1.2%,-.8%,0) scale(1.035);filter:saturate(1.12)}}

/* More deliberate reveals */
.reveal{will-change:transform,opacity,filter;transition-property:opacity,transform,filter;transition-duration:var(--motion-slow)!important;transition-timing-function:var(--motion-ease)!important}
.reveal[data-motion-delay="1"]{transition-delay:80ms}.reveal[data-motion-delay="2"]{transition-delay:160ms}.reveal[data-motion-delay="3"]{transition-delay:240ms}.reveal[data-motion-delay="4"]{transition-delay:320ms}
.section-head.reveal:not(.visible),.about-copy.reveal:not(.visible),.instrument-copy.reveal:not(.visible){transform:translate3d(0,42px,0)}

/* Hero choreography */
.mastered-hero .hero-photo{will-change:transform;animation:th20HeroDrift 18s ease-in-out infinite alternate}
.mastered-hero .hero-copy>*{opacity:0;transform:translate3d(0,24px,0);animation:th20HeroText .95s var(--motion-ease) forwards}
.mastered-hero .hero-copy>*:nth-child(1){animation-delay:.24s}.mastered-hero .hero-copy>*:nth-child(2){animation-delay:.34s}.mastered-hero .hero-copy>*:nth-child(3){animation-delay:.47s}.mastered-hero .hero-copy>*:nth-child(4){animation-delay:.61s}.mastered-hero .hero-copy>*:nth-child(5){animation-delay:.74s}
.mastered-hero .hero-signup{animation:th20HeroCard 1.1s .62s var(--motion-ease) both}
@keyframes th20HeroText{to{opacity:1;transform:none}}
@keyframes th20HeroCard{from{opacity:0;transform:translate3d(26px,30px,0) scale(.985);filter:blur(6px)}to{opacity:1;transform:none;filter:none}}
@keyframes th20HeroDrift{0%{transform:scale(1.025) translate3d(0,0,0)}100%{transform:scale(1.055) translate3d(-.7%,.45%,0)}}
.hero-cinema{opacity:.68;animation:th20CinemaBreath 8s ease-in-out infinite}
@keyframes th20CinemaBreath{50%{opacity:.92;filter:saturate(1.14)}}

/* Unified premium interactions */
.btn,.nav-cta,.hero-signup button,.creative-action,.spotify-official-link,.tabs button,.feature-list button,.lesson-grid article,.journal article,.method-card,.role-card,.welcome-product,.philosophy-panel,.music-story,.spotify-official-frame{
  transition:transform var(--motion-med) var(--motion-ease),border-color var(--motion-fast) ease,box-shadow var(--motion-med) var(--motion-ease),background-color var(--motion-fast) ease,filter var(--motion-fast) ease!important;
}
.btn,.nav-cta,.hero-signup button,.spotify-official-link{position:relative;overflow:hidden;isolation:isolate}
.btn:after,.nav-cta:after,.hero-signup button:after,.spotify-official-link:after{content:"";position:absolute;inset:-2px;z-index:-1;background:linear-gradient(110deg,transparent 22%,rgba(255,255,255,.20) 43%,transparent 63%);transform:translateX(-115%);transition:transform .78s var(--motion-ease)}
.btn:hover:after,.nav-cta:hover:after,.hero-signup button:hover:after,.spotify-official-link:hover:after{transform:translateX(115%)}
.btn:hover,.nav-cta:hover,.hero-signup button:hover,.spotify-official-link:hover{transform:translateY(-3px);box-shadow:0 18px 42px rgba(0,0,0,.28),0 0 32px var(--motion-purple)}
.btn:active,.nav-cta:active,.hero-signup button:active,.spotify-official-link:active{transform:translateY(-1px) scale(.985)}

.method-card:hover,.role-card:hover,.lesson-grid article:hover,.journal article:hover,.welcome-product:hover,.philosophy-panel:hover,.music-story:hover{transform:translate3d(0,-7px,0);border-color:rgba(190,132,220,.32)!important;box-shadow:0 28px 75px rgba(0,0,0,.32),0 0 42px rgba(122,55,173,.12)}
.method-card:before,.role-card:before,.lesson-grid article:before,.journal article:before{transition:opacity var(--motion-med) ease,transform var(--motion-slow) var(--motion-ease)}

/* Refined link motion */
main a:not(.btn):not(.creative-action):not(.spotify-official-link),footer a{transition:color var(--motion-fast) ease,opacity var(--motion-fast) ease}
main a:not(.btn):not(.creative-action):not(.spotify-official-link):hover,footer a:hover{color:#e3c4f1}

/* Section depth and transitions */
.section,.about,.notes,.music,.watch-section,.instrument{position:relative}
.section:after,.about:after,.notes:after{content:"";position:absolute;left:8%;right:8%;bottom:0;height:1px;pointer-events:none;background:linear-gradient(90deg,transparent,rgba(255,255,255,.09),transparent);opacity:.7}
.section-head h2,.about-copy h2,.creative-epilogue-copy h3{text-wrap:balance}

/* Spotify polish without changing Spotify UI */
.spotify-official-frame{box-shadow:0 25px 70px rgba(0,0,0,.34),0 0 44px rgba(74,173,224,.07)}
.spotify-official-frame:hover{transform:translateY(-3px);box-shadow:0 34px 90px rgba(0,0,0,.42),0 0 55px rgba(141,82,200,.11)}

/* Studio epilogue: subtle spatial motion */
.creative-epilogue{transform:translateZ(0)}
.creative-epilogue-media img{will-change:transform;transform:scale(1.035) translate3d(var(--studio-x,0px),var(--studio-y,0px),0)!important}
.creative-epilogue.visible .creative-epilogue-media img{transform:scale(1.015) translate3d(var(--studio-x,0px),var(--studio-y,0px),0)!important}
.creative-orbit{animation-duration:18s!important;animation-timing-function:ease-in-out!important}
.creative-action:hover{transform:translate3d(0,-6px,0);box-shadow:0 24px 60px rgba(0,0,0,.33),0 0 36px rgba(151,79,205,.16)}

/* Focus polish */
:focus-visible{outline:2px solid rgba(194,132,226,.92);outline-offset:4px}

@media (pointer:fine){
  [data-motion-magnetic]{will-change:transform}
}
@media(max-width:900px){
  body:before{animation-duration:22s}
  .mastered-hero .hero-photo{animation:none}
  .method-card:hover,.role-card:hover,.lesson-grid article:hover,.journal article:hover,.welcome-product:hover,.philosophy-panel:hover,.music-story:hover{transform:none}
}
@media(prefers-reduced-motion:reduce){
  body:before,.mastered-hero .hero-photo,.mastered-hero .hero-copy>*,.mastered-hero .hero-signup,.hero-cinema,.creative-orbit{animation:none!important}
  .mastered-hero .hero-copy>*,.mastered-hero .hero-signup{opacity:1!important;transform:none!important;filter:none!important}
  .reveal{transition:none!important}
  .btn:after,.nav-cta:after,.hero-signup button:after,.spotify-official-link:after{display:none}
  .creative-epilogue-media img{transform:none!important}
}


/* =========================================================
   TIM HUTCH 2.0B — MOBILE FIRST EXPERIENCE
   ========================================================= */
.mobile-menu-toggle{display:none}
@media(max-width:900px){
  :root{--shell:min(100% - 32px,760px)}
  html{scroll-padding-top:76px}
  body{overflow-x:hidden}
  .nav{position:fixed;top:0;height:72px;width:100%;padding-inline:16px;border-bottom:1px solid rgba(255,255,255,.1);background:linear-gradient(180deg,rgba(7,6,9,.94),rgba(7,6,9,.82));backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);transform:translate3d(-50%,0,0);transition:background-color .25s ease,border-color .25s ease;will-change:auto;contain:layout paint;isolation:isolate}
  .nav.nav-hidden{transform:translate3d(-50%,0,0)!important}
  .nav-cta,.mobile-menu-toggle{transform:translateZ(0);backface-visibility:hidden;-webkit-backface-visibility:hidden}
  .nav .brand{position:relative;z-index:3}
  .nav-cta{position:relative;z-index:3;margin-left:auto;margin-right:8px;padding:11px 13px;min-height:44px;display:grid;place-items:center}
  .mobile-menu-toggle{display:grid;position:relative;z-index:4;width:46px;height:46px;border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.035);place-content:center;gap:7px;color:#fff}
  .mobile-menu-toggle span{display:block;width:19px;height:1px;background:currentColor;transition:transform .3s var(--motion-ease)}
  .mobile-menu-toggle[aria-expanded="true"] span:first-child{transform:translateY(4px) rotate(45deg)}
  .mobile-menu-toggle[aria-expanded="true"] span:last-child{transform:translateY(-4px) rotate(-45deg)}
  .nav nav{display:flex!important;position:fixed;inset:0;z-index:2;flex-direction:column;justify-content:center;align-items:flex-start;gap:0;padding:96px 28px 36px;background:rgba(6,5,9,.97);backdrop-filter:blur(28px);-webkit-backdrop-filter:blur(28px);opacity:0;visibility:hidden;transform:translateY(-12px);transition:opacity .3s ease,transform .35s var(--motion-ease),visibility .3s}
  .nav.menu-open nav{opacity:1;visibility:visible;transform:none}
  .nav nav a{width:100%;padding:17px 0;border-bottom:1px solid rgba(255,255,255,.1);font:500 clamp(30px,9vw,46px)/1 "Space Grotesk";letter-spacing:-.045em;color:#f2edf3}
  body.menu-open{overflow:hidden}

  /* Mobile hero is an intentional two-act composition */
  .hero{min-height:auto;height:auto;display:block;padding-top:72px;background:#08070a}
  .hero-photo{position:relative;inset:auto;width:100%;height:clamp(330px,72vw,540px);background-image:image-set(url('assets/tim-hero-640.webp') 1x,url('assets/tim-hero-1024.webp') 2x)!important;background-position:64% 20%!important;transform:none!important;animation:none!important}
  .hero-shade{top:72px;height:clamp(330px,72vw,540px);bottom:auto;background:linear-gradient(0deg,#08070a 0%,transparent 42%),linear-gradient(90deg,rgba(6,5,8,.22),transparent 55%)}
  .hero-cinema,.signal-glyph{height:clamp(330px,72vw,540px)}
  .hero-content{display:flex;flex-direction:column;padding:0 0 42px;gap:32px;align-items:stretch}
  .hero-copy{order:1;margin-top:-36px;position:relative;z-index:3;text-align:center;padding-inline:4px}
  .hero-copy .eyebrow{font-size:9px;line-height:1.5}
  .hero h1{font-size:clamp(44px,12.7vw,68px);line-height:.92;margin:14px 0 20px;letter-spacing:-.06em}
  .hero-copy>p:last-of-type{font-size:16px;line-height:1.58;margin-inline:auto;max-width:540px}
  .hero-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:25px}
  .hero-actions .btn{min-height:50px;display:grid;place-items:center;padding:13px 12px}
  .hero-signup{order:2;width:100%;max-width:none;padding:25px 22px;border-radius:18px;background:linear-gradient(145deg,rgba(28,19,34,.96),rgba(12,17,25,.96));box-shadow:0 24px 70px rgba(0,0,0,.35)}
  .hero-signup h2{font-size:clamp(29px,8.8vw,42px)}
  .hero-signup form{gap:10px}
  .hero-signup input,.hero-signup button{min-height:50px;font-size:16px}
  .hero-freebies{grid-template-columns:1fr;gap:8px}
  .hero-foot{display:none}

  .section,.signal-method,.signal-notes{padding-block:82px}
  .section-no{margin-bottom:32px}
  .section-head{gap:20px;margin-bottom:38px}
  .section h2,.about h2,.join h2{font-size:clamp(42px,11.5vw,62px);line-height:.94}

  /* Touch-first horizontal story rails */
  .method-cards,.coaching-grid,.resource-products{display:flex!important;overflow-x:auto;scroll-snap-type:x mandatory;gap:14px;margin-inline:calc((100vw - var(--shell))/ -2);padding:4px calc((100vw - var(--shell))/2) 22px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .method-cards::-webkit-scrollbar,.coaching-grid::-webkit-scrollbar,.resource-products::-webkit-scrollbar{display:none}
  .method-card,.coaching-grid article,.welcome-product{flex:0 0 min(84vw,390px);scroll-snap-align:start;scroll-snap-stop:always;min-height:320px}
  .coaching-grid article{padding:28px 24px}
  .coaching-grid:after,.method-cards:after,.resource-products:after{content:"";flex:0 0 2px}

  .coaching-video,.music-grid,.watch-grid,.about,.instrument{grid-template-columns:1fr!important}
  .coaching-photo-only,.premium-video,.video-frame{order:-1}
  .music{padding-block:76px}
  .spotify-official{padding:0!important;background:transparent!important;border:0!important}
  .spotify-official-head{padding-inline:2px}
  .spotify-official-frame{margin-inline:-2px;border-radius:14px;overflow:hidden}
  .spotify-official-frame iframe{width:100%;min-height:352px;height:352px}
  .music-story{padding:28px 22px}

  .instrument-image{min-height:0;height:72vw;max-height:560px}
  .instrument-copy{padding:58px 16px 72px}
  .feature-list button{min-height:58px}
  .instrument-links{display:grid;grid-template-columns:1fr;gap:10px}
  .instrument-links a{min-height:48px;display:flex;align-items:center}

  .about{gap:34px}
  .about-media{order:-1;margin-inline:-16px}
  .about-media img{max-height:72vh;object-fit:cover}

  /* Studio finale: image first, content second */
  .creative-epilogue{margin-inline:-16px;border-radius:0;min-height:auto;display:flex;flex-direction:column;background:#08070a}
  .creative-epilogue-media{position:relative;height:64vw;min-height:300px;max-height:500px;inset:auto;order:0}
  .creative-epilogue-media img{object-position:70% center!important;transform:none!important;filter:saturate(.9) contrast(1.05) brightness(.72)!important}
  .creative-epilogue-shade{height:64vw;min-height:300px;max-height:500px;background:linear-gradient(0deg,#08070a 0%,transparent 38%),linear-gradient(90deg,rgba(4,4,8,.42),transparent 65%)}
  .creative-epilogue-inner{order:1;min-height:auto;padding:18px 24px 40px;display:flex;flex-direction:column;gap:32px}
  .creative-epilogue-copy{padding-top:0!important}
  .creative-epilogue-copy h3{font-size:clamp(43px,13vw,66px)}
  .creative-actions{width:100%;grid-template-columns:1fr}
  .creative-action{min-height:92px}
  .creative-socials{width:100%}

  .footer{padding-block:38px;min-height:0;text-align:center}
  .footer div{flex-wrap:wrap;justify-content:center}

  /* Touch targets and remove hover dependence */
  a,button,input{touch-action:manipulation}
  .btn,.nav-cta,.hero-signup button,.spotify-official-link,.tabs button,.feature-list button{min-height:44px}
  @media(hover:none){
    .method-card:hover,.role-card:hover,.lesson-grid article:hover,.journal article:hover,.welcome-product:hover,.philosophy-panel:hover,.music-story:hover,.creative-action:hover,.spotify-official-frame:hover{transform:none!important;box-shadow:inherit}
    .btn:hover,.nav-cta:hover,.hero-signup button:hover,.spotify-official-link:hover{transform:none}
  }
}
@media(max-width:560px){
  :root{--shell:calc(100% - 28px)}
  .nav-cta{font-size:0;width:48px;padding:0}
  .nav-cta:before{content:"JOIN";font-size:10px;letter-spacing:.1em}
  .brand strong{display:block;font-size:10px}
  .hero-photo{height:390px;background-position:66% 18%!important}
  .hero-shade,.hero-cinema,.signal-glyph{height:390px}
  .hero-copy{margin-top:-30px}
  .hero-actions{grid-template-columns:1fr}
  .hero-signup{padding:23px 18px}
  .hero-signup form{grid-template-columns:1fr!important}
  .hero-signup form>*{grid-column:1!important}
  .method-card,.coaching-grid article,.welcome-product{flex-basis:86vw}
  .spotify-official-head{display:grid;gap:14px}
  .spotify-official-link{justify-self:start}
  .tabs{overflow-x:auto;scrollbar-width:none;padding-bottom:4px}
  .tabs::-webkit-scrollbar{display:none}
  .tabs button{flex:0 0 auto}
  .creative-epilogue-media,.creative-epilogue-shade{height:82vw;min-height:300px}
  .creative-socials>div{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:390px){
  .brand strong{display:none}
  .hero h1{font-size:43px}
  .hero-photo{height:350px}
  .hero-shade,.hero-cinema,.signal-glyph{height:350px}
  .method-card,.coaching-grid article,.welcome-product{flex-basis:88vw}
}


/* =========================================================
   TIM HUTCH 2.1.1 — MOBILE QA & CONVERSION FIX
   ========================================================= */
.nav-cta-short{display:none}
@media(max-width:900px){
  /* Remove the orphaned pseudo-element that could appear as an empty square. */
  .nav-cta:before,.nav-cta:after{display:none!important;content:none!important}
  .nav-cta-long{display:none}
  .nav-cta-short{display:inline;font:700 10px/1 "Space Grotesk";letter-spacing:.12em;text-transform:uppercase}
  .nav-cta{font-size:inherit!important;width:auto!important;min-width:58px;max-width:none!important;padding:0 14px!important;border-radius:999px;white-space:nowrap}

  /* Keep exactly the same hero photography as desktop, only with a deliberate crop. */
  .hero-photo{
    background-image:image-set(url('assets/tim-graffiti-640.webp') 1x,url('assets/tim-graffiti-1024.webp') 2x)!important;
    background-position:56% 28%!important;
    height:clamp(300px,68vw,450px)!important;
  }
  .hero-shade,.hero-cinema,.signal-glyph{height:clamp(300px,68vw,450px)!important}
  .hero-shade{background:linear-gradient(0deg,#08070a 0%,rgba(8,7,10,.28) 34%,transparent 62%),linear-gradient(90deg,rgba(6,5,8,.25),transparent 58%)}

  /* Conversion first: signup appears immediately after the image. */
  .hero-content{gap:20px!important;padding-bottom:34px!important}
  .hero-signup{
    order:1!important;
    position:relative;
    z-index:5;
    margin-top:-48px!important;
    margin-bottom:2px!important;
    padding:19px 18px!important;
    border-radius:16px!important;
  }
  .hero-signup-kicker{margin-bottom:7px!important}
  .hero-signup h2{font-size:clamp(24px,7.4vw,34px)!important;margin-bottom:7px!important}
  .hero-signup>p{display:none!important}
  .hero-signup form{margin-top:12px!important;display:grid!important;grid-template-columns:1fr 1fr!important;gap:8px!important}
  .hero-signup form label{min-width:0}
  .hero-signup input,.hero-signup button{min-height:46px!important;font-size:15px!important}
  .hero-signup button{grid-column:1/-1!important}
  .hero-signup small{display:none!important}
  .hero-freebies{display:none!important}
  .hero-copy{order:2!important;margin-top:0!important;padding-top:8px!important}
  .hero h1{margin-top:11px!important;margin-bottom:15px!important}
  .hero-actions{margin-top:20px!important}

  /* Artist Credential: full-bleed portrait with a controlled mobile crop. */
  .instrument{display:block!important;min-height:0!important;width:100%;overflow:hidden}
  .instrument-image{
    width:100%!important;
    height:auto!important;
    min-height:0!important;
    max-height:none!important;
    aspect-ratio:4/5;
    margin:0!important;
    background:#0b0a09;
  }
  .instrument-image img{
    width:100%!important;
    height:100%!important;
    display:block;
    object-fit:cover!important;
    object-position:50% 20%!important;
  }
  .instrument-copy{width:var(--shell)!important;margin:0 auto!important;padding:48px 0 68px!important}

  /* General mobile cleanup. */
  .section-head>p{margin-top:0}
  .section,.signal-method,.signal-notes{padding-block:72px}
  img{max-width:100%}
}
@media(max-width:560px){
  .hero-photo{height:330px!important;background-position:57% 26%!important}
  .hero-shade,.hero-cinema,.signal-glyph{height:330px!important}
  .hero-signup{margin-top:-38px!important;padding:17px 15px!important}
  .hero-signup form{grid-template-columns:1fr!important}
  .hero-signup form>*{grid-column:1!important}
  .hero-copy{padding-inline:2px!important}
  .hero h1{font-size:clamp(41px,12vw,55px)!important}
  .instrument-image{aspect-ratio:4/5}
  .instrument-image img{object-position:52% 18%!important}
}
@media(max-width:390px){
  .hero-photo{height:305px!important}
  .hero-shade,.hero-cinema,.signal-glyph{height:305px!important}
  .hero-signup h2{font-size:23px!important}
}

/* BUILD 2.1.2 — MOBILE NAVIGATION STABILITY */
@media(max-width:900px){
  .nav{padding-top:env(safe-area-inset-top);height:calc(72px + env(safe-area-inset-top));}
  .hero{padding-top:calc(72px + env(safe-area-inset-top));}
  .hero-shade{top:calc(72px + env(safe-area-inset-top));}
  .nav.menu-open{transform:translate3d(-50%,0,0)!important}
}

/* ============================================================
   BUILD 2.1.3 — MOBILE STUDIO EXPERIENCE
   Mobile-only cinematic finale: stronger crop, integrated copy,
   richer lighting and no detached image/card composition.
   ============================================================ */
@media (max-width: 700px) {
  .creative-epilogue {
    position: relative;
    display: block;
    min-height: min(890px, 128svh);
    margin-inline: -16px;
    border: 0;
    border-radius: 0;
    overflow: hidden;
    isolation: isolate;
    background: #07070a;
  }

  .creative-epilogue-media {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    min-height: 0;
    max-height: none;
    order: initial;
    overflow: hidden;
  }

  .creative-epilogue-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 73% center !important;
    transform: scale(1.08) !important;
    filter: saturate(1.08) contrast(1.16) brightness(.69) !important;
  }

  .creative-epilogue.visible .creative-epilogue-media img {
    transform: scale(1.035) !important;
    transition: transform 1.6s cubic-bezier(.2,.72,.2,1), filter .9s ease;
  }

  .creative-epilogue::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background:
      radial-gradient(circle at 84% 26%, rgba(74,191,224,.22), transparent 28%),
      radial-gradient(circle at 16% 38%, rgba(173,75,210,.22), transparent 34%),
      linear-gradient(180deg, rgba(5,5,9,.12) 0%, rgba(5,5,9,.16) 32%, rgba(5,5,9,.76) 67%, #07070a 94%);
    mix-blend-mode: screen, screen, normal;
  }

  .creative-epilogue::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    opacity: .16;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.92' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.34'/%3E%3C/svg%3E");
    background-size: 170px 170px;
    mix-blend-mode: soft-light;
  }

  .creative-epilogue-shade {
    position: absolute;
    inset: 0;
    z-index: 1;
    width: auto;
    height: auto;
    min-height: 0;
    max-height: none;
    background:
      linear-gradient(90deg, rgba(4,4,8,.38) 0%, transparent 74%),
      linear-gradient(0deg, #07070a 0%, rgba(7,7,10,.96) 9%, rgba(7,7,10,.72) 37%, rgba(7,7,10,.12) 70%, rgba(7,7,10,.25) 100%);
  }

  .creative-orbit { opacity: .34; z-index: 2; }

  .creative-epilogue-inner {
    position: relative;
    z-index: 3;
    min-height: min(890px, 128svh);
    padding: clamp(230px, 51svh, 455px) 22px 34px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    gap: 24px;
  }

  .creative-epilogue-copy {
    padding: 0 !important;
    max-width: 100%;
  }

  .creative-kicker {
    display: inline-flex;
    align-items: center;
    min-height: 28px;
    padding: 0 10px;
    border: 1px solid rgba(218,187,230,.26);
    border-radius: 999px;
    background: rgba(10,8,14,.38);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
  }

  .creative-epilogue-copy h3 {
    margin: 16px 0 16px;
    font-size: clamp(42px, 12.6vw, 62px);
    line-height: .9;
    letter-spacing: -.065em;
    text-shadow: 0 8px 36px rgba(0,0,0,.62);
  }

  .creative-epilogue-copy p {
    max-width: 34rem;
    color: rgba(240,234,241,.84);
    font-size: 15px;
    line-height: 1.58;
    text-shadow: 0 4px 22px rgba(0,0,0,.78);
  }

  .creative-actions {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .creative-action {
    min-height: 88px;
    padding: 16px 17px;
    background: rgba(11,9,14,.62);
    border-color: rgba(255,255,255,.15);
    backdrop-filter: blur(13px);
    -webkit-backdrop-filter: blur(13px);
    box-shadow: 0 16px 42px rgba(0,0,0,.24);
  }

  .creative-action-primary {
    background: linear-gradient(110deg, rgba(118,57,147,.72), rgba(36,91,126,.58));
    border-color: rgba(209,177,226,.35);
  }

  .creative-socials {
    margin-top: 2px;
    padding-top: 17px;
    border-top: 1px solid rgba(255,255,255,.10);
  }

  .creative-socials > div {
    grid-template-columns: repeat(4, auto);
    justify-content: space-between;
    gap: 12px;
  }

  .creative-socials a { font-size: 11px; }
}

@media (max-width: 390px) {
  .creative-epilogue { min-height: 820px; }
  .creative-epilogue-inner {
    min-height: 820px;
    padding-top: 355px;
  }
  .creative-epilogue-media img { object-position: 75% center !important; }
  .creative-socials > div { grid-template-columns: repeat(2, 1fr); gap: 14px 24px; }
}

@media (max-width: 700px) and (orientation: landscape) {
  .creative-epilogue,
  .creative-epilogue-inner { min-height: 720px; }
  .creative-epilogue-inner { padding-top: 250px; }
  .creative-epilogue-media img { object-position: 70% 46% !important; }
}

@media (max-width: 700px) and (prefers-reduced-motion: reduce) {
  .creative-epilogue-media img,
  .creative-epilogue.visible .creative-epilogue-media img { transform: scale(1.035) !important; transition: none !important; }
}

/* =========================================================
   BUILD 2.2 — CINEMATIC BACKGROUND SYSTEM
   Mobile depth system: ambient light, tonal gradients,
   typography watermarks and restrained technical texture.
   ========================================================= */
@media (max-width: 700px) {
  body {
    background:
      radial-gradient(circle at 15% 8%, rgba(119, 54, 151, .07), transparent 26rem),
      radial-gradient(circle at 90% 34%, rgba(20, 118, 154, .055), transparent 24rem),
      #070708;
  }

  .grain { opacity: .048; }

  .cinematic-zone {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    background-color: #09090b;
  }

  .cinematic-zone > * {
    position: relative;
    z-index: 2;
  }

  /* Large, nearly hidden editorial word: it fills negative space
     without becoming visible content or reducing readability. */
  .cinematic-zone::before {
    content: attr(data-cinema-word);
    position: absolute;
    z-index: 0;
    top: clamp(42px, 11vw, 74px);
    right: -0.08em;
    max-width: 100%;
    color: rgba(239, 226, 244, .034);
    font: 700 clamp(72px, 24vw, 126px)/.78 "Space Grotesk", sans-serif;
    letter-spacing: -.09em;
    white-space: nowrap;
    pointer-events: none;
    transform: translate3d(0,0,0);
  }

  /* Light sources + fine studio grid. Kept underneath content. */
  .cinematic-zone::after {
    content: "";
    position: absolute;
    z-index: 1;
    inset: 0;
    pointer-events: none;
    background:
      radial-gradient(circle at 5% 18%, rgba(136, 55, 177, .12), transparent 29%),
      radial-gradient(circle at 102% 77%, rgba(22, 128, 170, .10), transparent 31%),
      linear-gradient(rgba(255,255,255,.013) 1px, transparent 1px),
      linear-gradient(90deg, rgba(255,255,255,.011) 1px, transparent 1px),
      linear-gradient(180deg, rgba(255,255,255,.018), transparent 18%, transparent 78%, rgba(0,0,0,.18));
    background-size: auto, auto, 54px 54px, 54px 54px, auto;
    -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 9%, #000 91%, transparent 100%);
    mask-image: linear-gradient(to bottom, transparent 0, #000 9%, #000 91%, transparent 100%);
    opacity: .82;
  }

  /* Alternate the lighting direction so the page has rhythm. */
  .music::after,
  .instrument::after,
  .signal-notes::after {
    background:
      radial-gradient(circle at 98% 14%, rgba(137, 52, 179, .12), transparent 30%),
      radial-gradient(circle at -5% 78%, rgba(21, 125, 168, .105), transparent 32%),
      linear-gradient(rgba(255,255,255,.013) 1px, transparent 1px),
      linear-gradient(90deg, rgba(255,255,255,.011) 1px, transparent 1px),
      linear-gradient(180deg, rgba(255,255,255,.015), transparent 22%, transparent 80%, rgba(0,0,0,.20));
    background-size: auto, auto, 54px 54px, 54px 54px, auto;
  }

  /* Replace flat black gaps with low-contrast tonal transitions. */
  .hero-intro {
    background: linear-gradient(180deg, #090807 0%, #0d0a10 52%, #09090b 100%);
  }
  .signal-method {
    background: linear-gradient(155deg, #0a090b 0%, #100c13 48%, #08090b 100%);
  }
  .coaching {
    background: linear-gradient(180deg, #09090b 0%, #0e0a10 48%, #090a0c 100%);
  }
  .music {
    background: linear-gradient(180deg, #090a0c 0%, #0b0d12 50%, #09090b 100%);
  }
  .watch {
    background: linear-gradient(160deg, #09090b 0%, #100c12 44%, #080a0d 100%);
  }
  .instrument {
    background: linear-gradient(180deg, #08090b 0%, #0c0c10 55%, #09090b 100%);
  }
  .about {
    background: linear-gradient(155deg, #09090b 0%, #100c11 50%, #090a0c 100%);
  }
  .signal-notes {
    background: linear-gradient(180deg, #090a0c 0%, #0d0a10 48%, #08090b 100%);
  }

  /* Give section transitions a faint illuminated seam. */
  .cinematic-zone + .cinematic-zone,
  .cinematic-zone + section,
  section + .cinematic-zone {
    border-top-color: rgba(219, 184, 231, .07);
  }

  .section-no,
  .eyebrow {
    text-shadow: 0 0 24px rgba(175, 93, 210, .16);
  }

  /* Cards receive reflected ambience, avoiding isolated black boxes. */
  .coaching-grid article,
  .music-story,
  .spotify-official,
  .lesson-grid article,
  .resource-card,
  .method-card,
  .welcome-pack,
  .notes-form {
    background-image:
      radial-gradient(circle at 95% 0%, rgba(118, 63, 157, .08), transparent 38%),
      linear-gradient(145deg, rgba(255,255,255,.018), transparent 46%);
    box-shadow: 0 24px 60px rgba(0,0,0,.20), inset 0 1px rgba(255,255,255,.025);
  }

  /* Keep areas around photography intentional rather than pitch black. */
  .coaching-photo-only,
  .about-media,
  .instrument-image,
  .premium-video {
    box-shadow: 0 26px 70px rgba(0,0,0,.34), 0 0 52px rgba(85, 52, 132, .07);
  }

  .trust-strip {
    background:
      radial-gradient(circle at 8% 50%, rgba(123, 57, 154, .10), transparent 40%),
      linear-gradient(100deg, #0b0a0d, #0d0b10 55%, #090b0e);
  }

  .footer {
    position: relative;
    background:
      radial-gradient(circle at 50% 0%, rgba(126, 60, 157, .09), transparent 52%),
      linear-gradient(180deg, #09090b, #060607);
  }
}

@media (max-width: 390px) {
  .cinematic-zone::before {
    font-size: clamp(64px, 22vw, 88px);
    top: 46px;
    opacity: .82;
  }
  .cinematic-zone::after {
    background-size: auto, auto, 46px 46px, 46px 46px, auto;
  }
}

@media (max-width: 700px) and (prefers-reduced-motion: no-preference) {
  .cinematic-zone::after {
    animation: cinematic-ambient-drift 18s ease-in-out infinite alternate;
  }
  .music::after,
  .instrument::after,
  .signal-notes::after { animation-delay: -9s; }
}

@keyframes cinematic-ambient-drift {
  from { transform: translate3d(-1.2%, -.35%, 0) scale(1.015); }
  to   { transform: translate3d(1.2%, .35%, 0) scale(1.025); }
}

@media (prefers-reduced-motion: reduce) {
  .cinematic-zone::after { animation: none !important; transform: none !important; }
}

/* ============================================================
   BUILD 2.3 — TIM STUDIO FINALE
   New cinematic portrait replaces the empty-room finale.
   ============================================================ */
.creative-epilogue-media img{
  object-position:center 48%!important;
  filter:saturate(.94) contrast(1.08) brightness(.72)!important;
}
.creative-epilogue-shade{
  background:
    linear-gradient(90deg,rgba(4,4,8,.94) 0%,rgba(5,5,9,.69) 34%,rgba(5,5,9,.18) 68%,rgba(4,4,8,.26) 100%),
    linear-gradient(0deg,rgba(4,4,8,.94),transparent 48%,rgba(4,4,8,.18));
}
.creative-epilogue-copy h3{max-width:760px}

@media(max-width:700px){
  .creative-epilogue{min-height:min(860px,122svh)}
  .creative-epilogue-media img{
    object-position:43% center!important;
    transform:scale(1.12)!important;
    filter:saturate(.98) contrast(1.1) brightness(.68)!important;
  }
  .creative-epilogue.visible .creative-epilogue-media img{transform:scale(1.075)!important}
  .creative-epilogue::before{
    background:
      radial-gradient(circle at 15% 30%,rgba(204,42,91,.19),transparent 34%),
      radial-gradient(circle at 88% 28%,rgba(54,146,235,.20),transparent 34%),
      linear-gradient(180deg,rgba(5,5,9,.06) 0%,rgba(5,5,9,.12) 38%,rgba(5,5,9,.76) 70%,#07070a 96%);
  }
  .creative-epilogue-shade{
    background:
      linear-gradient(90deg,rgba(4,4,8,.16),transparent 76%),
      linear-gradient(0deg,#07070a 0%,rgba(7,7,10,.97) 12%,rgba(7,7,10,.70) 43%,rgba(7,7,10,.04) 73%,rgba(7,7,10,.18) 100%);
  }
  .creative-epilogue-inner{min-height:min(860px,122svh)}
  .creative-epilogue-copy{padding-top:330px}
  .creative-epilogue-copy h3{font-size:clamp(42px,13.4vw,64px)}
}

@media(max-width:390px){
  .creative-epilogue-media img{object-position:42% center!important;transform:scale(1.16)!important}
  .creative-epilogue.visible .creative-epilogue-media img{transform:scale(1.105)!important}
  .creative-epilogue-copy{padding-top:300px}
}

/* ============================================================
   BUILD 2.3.1 — MOBILE STUDIO COMPOSITION FIX
   Preserve the complete 16:9 studio scene on phones instead of
   forcing a portrait cover crop. Desktop presentation unchanged.
   ============================================================ */
@media (max-width: 700px) {
  .creative-epilogue {
    display: flex;
    flex-direction: column;
    min-height: 0;
    margin-inline: -10px;
    padding: 10px 10px 0;
    border-radius: 26px 26px 0 0;
    background:
      radial-gradient(circle at 78% 4%, rgba(45,115,166,.14), transparent 30%),
      radial-gradient(circle at 16% 26%, rgba(150,55,174,.13), transparent 34%),
      #07070a;
  }

  .creative-epilogue-media {
    position: relative;
    inset: auto;
    order: 0;
    width: 100%;
    height: auto;
    min-height: 0;
    max-height: none;
    aspect-ratio: 16 / 9;
    border: 1px solid rgba(255,255,255,.13);
    border-radius: 20px;
    overflow: hidden;
    background: #0a090c;
    box-shadow: 0 22px 60px rgba(0,0,0,.46), 0 0 44px rgba(76,72,168,.10);
  }

  .creative-epilogue-media img,
  .creative-epilogue.visible .creative-epilogue-media img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center center !important;
    transform: none !important;
    filter: saturate(1.02) contrast(1.06) brightness(.88) !important;
    transition: filter .5s ease;
  }

  .creative-epilogue-shade {
    top: 10px;
    left: 10px;
    right: 10px;
    bottom: auto;
    width: auto;
    height: auto;
    min-height: 0;
    aspect-ratio: 16 / 9;
    border-radius: 20px;
    background:
      linear-gradient(0deg, rgba(6,6,9,.30), transparent 38%),
      linear-gradient(90deg, rgba(5,5,8,.12), transparent 32%, rgba(5,5,8,.08));
    pointer-events: none;
  }

  .creative-epilogue::before {
    inset: 40% -20% -12% 14%;
    z-index: 0;
    background:
      radial-gradient(circle at 72% 20%, rgba(74,191,224,.14), transparent 31%),
      radial-gradient(circle at 20% 46%, rgba(173,75,210,.13), transparent 36%);
    mix-blend-mode: normal;
  }

  .creative-epilogue::after {
    z-index: 0;
    opacity: .10;
  }

  .creative-orbit { display: none; }

  .creative-epilogue-inner {
    position: relative;
    order: 1;
    min-height: 0;
    padding: 30px 14px 38px;
    gap: 24px;
    justify-content: flex-start;
  }

  .creative-epilogue-copy h3 {
    margin-top: 17px;
    font-size: clamp(42px, 12.2vw, 60px);
  }

  .creative-epilogue-copy p {
    max-width: 31rem;
  }
}

@media (max-width: 390px) {
  .creative-epilogue { margin-inline: -12px; padding-inline: 8px; }
  .creative-epilogue-shade { left: 8px; right: 8px; }
  .creative-epilogue-inner { padding-inline: 12px; }
}

/* ============================================================
   BUILD 2.3.2 — MOBILE MENU RECOVERY
   Removes paint containment that clipped the full-screen menu on iOS,
   and gives the overlay an explicit viewport-sized layer.
   ============================================================ */
@media (max-width: 900px) {
  .nav {
    contain: none !important;
    overflow: visible !important;
  }

  .nav nav#primary-navigation {
    position: fixed !important;
    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    height: 100dvh !important;
    min-height: 100vh;
    padding-top: calc(96px + env(safe-area-inset-top)) !important;
    padding-right: max(28px, env(safe-area-inset-right)) !important;
    padding-bottom: max(36px, env(safe-area-inset-bottom)) !important;
    padding-left: max(28px, env(safe-area-inset-left)) !important;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    pointer-events: none;
  }

  .nav.menu-open nav#primary-navigation {
    pointer-events: auto;
  }

  .nav.menu-open .brand,
  .nav.menu-open .nav-cta,
  .nav.menu-open .mobile-menu-toggle {
    position: relative;
    z-index: 5;
  }

  body.menu-open {
    overflow: hidden !important;
    touch-action: none;
  }
}

/* ============================================================
   BUILD 3.0 — LAUNCH CANDIDATE
   Final rhythm, consistency, accessibility and performance polish.
   ============================================================ */
:root{--lc-radius:22px;--lc-gap:clamp(20px,2.2vw,32px);--lc-rule:rgba(255,255,255,.10)}

/* Consistent visual language */
.btn,.nav-cta,.hero-signup button,.creative-actions a{min-height:48px;border-radius:999px}
.method-card,.role-card,.resource-card,.coaching-option,.lesson-card,.journal-card{border-radius:var(--lc-radius)}
.method-cards,.role-cards,.coaching-options,.lesson-grid,.journal-grid,.welcome-products{align-items:stretch}
.method-card,.role-card,.coaching-option,.lesson-card,.journal-card,.resource-card{height:100%}
img{image-rendering:auto}

/* More disciplined vertical rhythm on desktop */
@media(min-width:901px){
  .section,.signal-method,.signal-notes{padding-block:clamp(96px,9vw,138px)}
  .section-head{margin-bottom:clamp(42px,5vw,70px)}
  .trust-strip{padding-block:42px}
}

/* Mobile-specific launch polish */
@media(max-width:700px){
  .section,.signal-method,.signal-notes{padding-block:64px}
  .section-head{margin-bottom:30px;gap:16px}
  .section-no{margin-bottom:24px}
  .story-transition{min-height:34svh}
  .transition-word{font-size:clamp(62px,22vw,100px)}
  .method-cards,.role-cards,.coaching-options,.lesson-grid,.journal-grid,.welcome-products{gap:16px}
  .method-card,.role-card,.coaching-option,.lesson-card,.journal-card,.resource-card{min-height:0}
  .creative-epilogue-inner{padding-bottom:30px}
  .creative-epilogue-copy h3{margin-top:8px}
  .creative-actions{gap:12px}
  .creative-actions a{width:100%;justify-content:center}
  .trust-strip{padding-block:28px}
}

/* Better focus visibility for keyboard users */
:where(a,button,input,select,textarea):focus-visible{outline:2px solid #e5bd9d;outline-offset:4px}

/* Avoid accidental horizontal overflow */
html,body{max-width:100%;overflow-x:hidden}

/* Final mobile menu hardening */
@media(max-width:900px){
  .nav{height:66px}
  .nav nav#primary-navigation{background:linear-gradient(180deg,rgba(7,7,10,.985),rgba(10,8,13,.995));backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px)}
  .nav nav#primary-navigation a{min-height:52px;display:flex;align-items:center}
}

/* Respect data-saving and motion preferences */
@media(prefers-reduced-data:reduce){.grain,.ambient,.studio-atmosphere,.creative-signal{display:none!important}}


/* =========================================================
   TIM HUTCH 3.0.1 — NAVIGATION & ANCHOR QA
   ========================================================= */
html { scroll-behavior: smooth; }
#top, #join, #coaching, #music, #watch, #instrument, #about, #notes {
  scroll-margin-top: 112px;
}
#join { position: relative; }
@media (max-width: 900px) {
  #top, #join, #coaching, #music, #watch, #instrument, #about, #notes {
    scroll-margin-top: calc(88px + env(safe-area-inset-top));
  }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

/* TIM HUTCH RC 3.1 — premium testimonials */
.testimonials-v31{position:relative;overflow:hidden;background:radial-gradient(circle at 82% 18%,rgba(115,55,154,.13),transparent 34%),linear-gradient(180deg,#0a0908,#0d0a0e 50%,#0a0908)}
.testimonials-v31:before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.16;background-image:linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px);background-size:52px 52px;mask-image:linear-gradient(to bottom,transparent,#000 22%,#000 80%,transparent)}
.testimonials-v31-head{position:relative;display:grid;grid-template-columns:1.2fr .65fr;gap:90px;align-items:end;margin-bottom:56px}
.testimonials-v31-head h2{font:500 clamp(48px,6vw,86px)/.92 "Space Grotesk";letter-spacing:-.055em;margin:10px 0 0}
.testimonials-v31-head h2 em{font-family:"Newsreader";font-weight:400;color:#d8b2ca}
.testimonials-v31-head>p{color:var(--muted);line-height:1.75;margin:0 0 8px}
.testimonial-carousel{position:relative}
.testimonial-viewport{overflow:hidden;border:1px solid rgba(213,178,218,.2);border-radius:28px;background:rgba(10,8,12,.72);box-shadow:0 34px 100px rgba(0,0,0,.38)}
.testimonial-track{display:flex;transition:transform .65s cubic-bezier(.2,.75,.2,1);will-change:transform}
.testimonial-slide{flex:0 0 100%;min-width:0;display:grid;grid-template-columns:minmax(340px,.9fr) minmax(0,1.1fr);min-height:650px}
.testimonial-photo{display:block;overflow:hidden;position:relative;background:#09090b}
.testimonial-photo:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent 68%,rgba(9,8,12,.42)),linear-gradient(0deg,rgba(8,7,10,.2),transparent 35%);pointer-events:none}
.testimonial-photo img{display:block;width:100%;height:100%;object-fit:cover;object-position:center 38%}
.testimonial-photo-kevin img{object-position:center}
.testimonial-photo-pixie img{object-position:center 36%}
.testimonial-copy{position:relative;display:flex;flex-direction:column;justify-content:center;padding:clamp(44px,6vw,86px);background:radial-gradient(circle at 16% 18%,rgba(137,69,194,.09),transparent 42%)}
.testimonial-copy:before{content:"“";position:absolute;top:82px;left:46px;color:#9855e8;font:italic 86px/1 "Newsreader";opacity:.85}
.testimonial-stars{color:#9855e8;letter-spacing:.14em;font-size:25px;margin:0 0 34px}
.testimonial-copy blockquote{margin:0;padding-left:58px;color:#eee8e2;font:italic clamp(26px,3.1vw,43px)/1.42 "Newsreader";letter-spacing:-.018em;max-width:840px}
.testimonial-copy footer{display:grid;gap:6px;margin:42px 0 0 58px;padding-top:24px;border-top:1px solid rgba(152,85,232,.5);width:min(280px,70%)}
.testimonial-copy footer strong{font:600 20px "Space Grotesk";letter-spacing:.16em;text-transform:uppercase;color:#a967f2}
.testimonial-copy footer span{font:600 10px "Space Grotesk";letter-spacing:.2em;text-transform:uppercase;color:#b5abb9}
.testimonial-controls{display:grid;grid-template-columns:52px 1fr 52px;align-items:center;gap:20px;margin-top:22px}
.testimonial-arrow{width:52px;height:52px;border-radius:50%;border:1px solid rgba(169,103,242,.55);background:rgba(12,9,16,.72);color:#c792ff;font-size:22px;cursor:pointer;transition:.25s ease}
.testimonial-arrow:hover,.testimonial-arrow:focus-visible{background:#9855e8;color:#fff;transform:translateY(-2px)}
.testimonial-dots{display:flex;justify-content:center;gap:12px}
.testimonial-dots button{width:9px;height:9px;border:0;border-radius:50%;padding:0;background:#39323f;cursor:pointer;transition:.25s ease}
.testimonial-dots button.is-active{background:#9855e8;box-shadow:0 0 18px rgba(152,85,232,.65);transform:scale(1.25)}
@media(max-width:900px){
 .testimonials-v31-head{grid-template-columns:1fr;gap:24px;margin-bottom:36px}
 .testimonial-slide{grid-template-columns:1fr;min-height:0}
 .testimonial-photo{aspect-ratio:16/11}
 .testimonial-photo:after{background:linear-gradient(0deg,rgba(9,8,12,.48),transparent 38%)}
 .testimonial-photo img{object-position:center 30%}
 .testimonial-photo-kevin img{object-position:center 42%}.testimonial-photo-pixie img{object-position:center 35%}
 .testimonial-copy{padding:38px 28px 42px;min-height:390px}
 .testimonial-copy:before{top:44px;left:22px;font-size:70px}
 .testimonial-stars{font-size:20px;margin-bottom:24px}
 .testimonial-copy blockquote{padding-left:40px;font-size:clamp(25px,6vw,34px);line-height:1.4}
 .testimonial-copy footer{margin:30px 0 0 40px}
}
@media(max-width:560px){
 .testimonials-v31{padding-top:88px;padding-bottom:88px}
 .testimonial-viewport{border-radius:20px}
 .testimonial-photo{aspect-ratio:4/3}
 .testimonial-photo img{object-position:center 27%}
 .testimonial-photo-kevin img{object-position:center}.testimonial-photo-pixie img{object-position:center 34%}
 .testimonial-copy{padding:30px 20px 34px;min-height:390px}
 .testimonial-copy:before{left:16px;top:35px;font-size:58px}
 .testimonial-stars{font-size:17px;margin-left:34px}
 .testimonial-copy blockquote{padding-left:34px;font-size:24px}
 .testimonial-copy footer{margin-left:34px;width:calc(100% - 34px)}
 .testimonial-copy footer strong{font-size:16px}
 .testimonial-controls{grid-template-columns:46px 1fr 46px}.testimonial-arrow{width:46px;height:46px}
}
@media(prefers-reduced-motion:reduce){.testimonial-track{transition:none}}


/* TIM HUTCH RC 3.1.1 — mobile testimonial continuity */
@media(max-width:900px){
  .testimonial-photo{scroll-margin-top:100px}
}


/* TIM HUTCH RC 3.1.2 — mobile viewport testimonial experience
   Desktop remains unchanged. On phones, the complete testimonial,
   photograph, quote, attribution, arrows and dots fit in one viewport. */
@media (max-width: 560px) {
  .testimonials-v31 {
    padding-top: 76px;
    padding-bottom: 76px;
  }

  .testimonials-v31-head {
    margin-bottom: 26px;
  }

  .testimonial-carousel {
    position: relative;
    height: calc(100svh - 92px);
    min-height: 610px;
    max-height: 780px;
  }

  @supports (height: 100dvh) {
    .testimonial-carousel {
      height: calc(100dvh - 92px);
    }
  }

  .testimonial-viewport {
    height: 100%;
    border-radius: 20px;
  }

  .testimonial-track,
  .testimonial-slide {
    height: 100%;
  }

  .testimonial-slide {
    grid-template-rows: minmax(185px, 34%) minmax(0, 66%);
    overflow: hidden;
  }

  .testimonial-photo {
    aspect-ratio: auto;
    min-height: 0;
  }

  .testimonial-photo img {
    object-position: center 27%;
  }

  .testimonial-photo-kevin img {
    object-position: center 43%;
  }

  .testimonial-photo-pixie img {
    object-position: center 35%;
  }

  .testimonial-copy {
    min-height: 0;
    justify-content: flex-start;
    overflow: hidden;
    padding: 20px 18px 76px;
  }

  .testimonial-copy:before {
    left: 14px;
    top: 20px;
    font-size: 48px;
  }

  .testimonial-stars {
    margin: 0 0 12px 30px;
    font-size: 14px;
    line-height: 1;
  }

  .testimonial-copy blockquote {
    padding-left: 30px;
    font-size: clamp(16px, 4.25vw, 20px);
    line-height: 1.28;
    letter-spacing: -0.012em;
    max-width: none;
  }

  .testimonial-copy footer {
    gap: 3px;
    margin: 14px 0 0 30px;
    padding-top: 10px;
    width: calc(100% - 30px);
  }

  .testimonial-copy footer strong {
    font-size: 13px;
    letter-spacing: .13em;
  }

  .testimonial-copy footer span {
    font-size: 8px;
    letter-spacing: .16em;
  }

  .testimonial-controls {
    position: absolute;
    z-index: 5;
    left: 14px;
    right: 14px;
    bottom: 13px;
    grid-template-columns: 42px 1fr 42px;
    gap: 12px;
    margin: 0;
    pointer-events: none;
  }

  .testimonial-arrow,
  .testimonial-dots button {
    pointer-events: auto;
  }

  .testimonial-arrow {
    width: 42px;
    height: 42px;
    border-color: rgba(169,103,242,.7);
    background: rgba(9,7,12,.88);
    box-shadow: 0 8px 28px rgba(0,0,0,.34);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
  }

  .testimonial-dots {
    align-items: center;
  }

  .testimonial-dots button {
    width: 8px;
    height: 8px;
  }
}

/* Extra-tight phones and short landscape-like portrait viewports. */
@media (max-width: 390px), (max-width: 560px) and (max-height: 690px) {
  .testimonial-carousel {
    min-height: 550px;
  }

  .testimonial-slide {
    grid-template-rows: minmax(160px, 31%) minmax(0, 69%);
  }

  .testimonial-copy {
    padding-top: 16px;
  }

  .testimonial-copy blockquote {
    font-size: clamp(15px, 4vw, 17px);
    line-height: 1.24;
  }

  .testimonial-copy footer {
    margin-top: 10px;
    padding-top: 8px;
  }
}


/* TIM HUTCH RC 3.2 — Premium Mobile Testimonial Experience
   Desktop is deliberately untouched. */
@media (max-width: 560px) {
  .testimonial-carousel {
    height: calc(100svh - 88px);
    min-height: 620px;
    max-height: 810px;
  }

  @supports (height: 100dvh) {
    .testimonial-carousel {
      height: calc(100dvh - 88px);
    }
  }

  .testimonial-viewport {
    overflow: hidden;
    border: 1px solid rgba(176,108,255,.24);
    background:
      radial-gradient(circle at 82% 54%, rgba(132,68,211,.20), transparent 34%),
      linear-gradient(180deg, rgba(20,13,28,.96), rgba(7,6,10,.99));
    box-shadow:
      0 26px 70px rgba(0,0,0,.46),
      0 0 44px rgba(128,63,207,.10);
  }

  .testimonial-slide {
    position: relative;
    grid-template-rows: minmax(255px, 48%) minmax(0, 52%);
    background:
      radial-gradient(circle at 78% 70%, rgba(142,75,229,.19), transparent 38%),
      linear-gradient(180deg, #0a0710 0%, #09070d 100%);
  }

  .testimonial-photo {
    position: relative;
    z-index: 2;
    min-height: 0;
    overflow: hidden;
    border-bottom: 1px solid rgba(180,110,255,.20);
  }

  .testimonial-photo:after {
    content: "";
    position: absolute;
    inset: auto 0 0;
    height: 36%;
    pointer-events: none;
    background: linear-gradient(180deg, transparent, rgba(8,6,12,.78));
  }

  .testimonial-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: scale(1.015);
    object-position: center 28%;
  }

  .testimonial-photo-kevin img {
    object-position: center 48%;
  }

  .testimonial-photo-pixie img {
    object-position: center 38%;
  }

  .testimonial-copy {
    position: relative;
    z-index: 3;
    display: flex;
    justify-content: flex-start;
    min-height: 0;
    margin-top: -18px;
    padding: 30px 20px 72px;
    border-radius: 22px 22px 0 0;
    overflow: hidden;
    background:
      radial-gradient(circle at 84% 24%, rgba(163,88,255,.18), transparent 32%),
      linear-gradient(180deg, rgba(18,12,25,.98), rgba(8,7,11,.99));
    box-shadow: 0 -18px 45px rgba(0,0,0,.32);
  }

  .testimonial-copy:after {
    content: "“";
    position: absolute;
    right: 8px;
    bottom: -28px;
    z-index: -1;
    font-family: Georgia, serif;
    font-size: 170px;
    line-height: 1;
    color: rgba(176,106,255,.055);
    transform: rotate(7deg);
  }

  .testimonial-copy:before {
    left: 15px;
    top: 25px;
    font-size: 52px;
    color: rgba(194,128,255,.35);
  }

  .testimonial-stars {
    margin: 0 0 12px 34px;
    font-size: 14px;
    letter-spacing: .14em;
    text-shadow: 0 0 18px rgba(177,102,255,.35);
  }

  .testimonial-copy blockquote {
    position: relative;
    z-index: 2;
    padding-left: 34px;
    max-width: none;
    font-size: clamp(16px, 4.2vw, 19px);
    line-height: 1.27;
  }

  .testimonial-copy footer {
    position: relative;
    z-index: 2;
    width: calc(100% - 34px);
    margin: 14px 0 0 34px;
    padding-top: 10px;
    border-top-color: rgba(178,108,255,.20);
  }

  .testimonial-copy footer strong {
    text-shadow: 0 0 20px rgba(169,100,245,.20);
  }

  .testimonial-controls {
    left: 16px;
    right: 16px;
    bottom: 14px;
    grid-template-columns: 44px 1fr 44px;
  }

  .testimonial-arrow {
    width: 44px;
    height: 44px;
    border-color: rgba(172,101,248,.64);
    background:
      linear-gradient(180deg, rgba(28,18,39,.94), rgba(10,8,14,.96));
    box-shadow:
      0 10px 28px rgba(0,0,0,.40),
      0 0 20px rgba(148,77,225,.10);
  }

  .testimonial-dots button {
    width: 8px;
    height: 8px;
    background: rgba(255,255,255,.24);
  }

  .testimonial-dots button[aria-current="true"],
  .testimonial-dots button.is-active {
    background: #fff;
    box-shadow: 0 0 15px rgba(180,105,255,.72);
  }
}

/* Compact tuning for small/short iPhones while preserving a large image. */
@media (max-width: 390px), (max-width: 560px) and (max-height: 700px) {
  .testimonial-carousel {
    min-height: 560px;
  }

  .testimonial-slide {
    grid-template-rows: minmax(220px, 44%) minmax(0, 56%);
  }

  .testimonial-copy {
    margin-top: -14px;
    padding: 24px 16px 66px;
  }

  .testimonial-copy:before {
    left: 12px;
    top: 20px;
    font-size: 45px;
  }

  .testimonial-stars {
    margin-left: 30px;
    margin-bottom: 9px;
  }

  .testimonial-copy blockquote {
    padding-left: 30px;
    font-size: clamp(14.5px, 3.9vw, 16px);
    line-height: 1.22;
  }

  .testimonial-copy footer {
    width: calc(100% - 30px);
    margin-left: 30px;
    margin-top: 9px;
    padding-top: 8px;
  }

  .testimonial-copy footer strong {
    font-size: 12px;
  }

  .testimonial-copy footer span {
    font-size: 7.5px;
  }
}


/* TIM HUTCH RC 3.3 — Living About Portrait
   A lightweight cinemagraph illusion built from the existing photograph.
   No autoplay video, no extra network request, and a reduced-motion fallback. */

.about-cinemagraph {
  --about-x: 0px;
  --about-y: 0px;
  --about-rx: 0deg;
  --about-ry: 0deg;
  position: relative;
  overflow: visible !important;
  isolation: isolate;
  perspective: 1100px;
}

.about-cinemagraph-stage {
  position: relative;
  overflow: hidden;
  min-height: 100%;
  background: #09070d;
  transform:
    rotateX(var(--about-rx))
    rotateY(var(--about-ry))
    translate3d(var(--about-x), var(--about-y), 0);
  transform-origin: 50% 50%;
  transition: transform .9s cubic-bezier(.2,.75,.2,1), box-shadow .7s ease;
  box-shadow:
    0 32px 90px rgba(0,0,0,.48),
    0 0 0 1px rgba(190,118,255,.12),
    0 0 55px rgba(128,73,220,.11);
}

.about-cinemagraph.in-view .about-cinemagraph-stage {
  box-shadow:
    0 38px 110px rgba(0,0,0,.56),
    0 0 0 1px rgba(190,118,255,.18),
    0 0 78px rgba(128,73,220,.17);
}

.about-cinemagraph-photo {
  position: relative;
  z-index: 1;
  width: 100%;
  display: block;
  transform: scale(1.045) translate3d(calc(var(--about-x) * -.10), calc(var(--about-y) * -.10), 0) !important;
  transform-origin: 50% 44%;
  filter: saturate(1.07) contrast(1.06) brightness(.96);
  transition: transform 1.2s cubic-bezier(.2,.75,.2,1), filter .9s ease !important;
  will-change: transform, filter;
}

.about-cinemagraph.in-view .about-cinemagraph-photo {
  animation: about-breathe 8s ease-in-out infinite alternate;
  filter: saturate(1.12) contrast(1.08) brightness(1);
}

.about-light-rays,
.about-neon-scan,
.about-fog,
.about-particles,
.about-lens-flare,
.about-film-grain,
.about-vignette {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.about-light-rays {
  z-index: 2;
  inset: -18%;
  opacity: .28;
  mix-blend-mode: screen;
  background:
    conic-gradient(
      from 205deg at 50% 46%,
      transparent 0deg 14deg,
      rgba(161,91,255,.18) 20deg 26deg,
      transparent 32deg 46deg,
      rgba(83,188,255,.13) 51deg 58deg,
      transparent 64deg 360deg
    );
  filter: blur(7px);
  transform-origin: 50% 46%;
  animation: about-rays 14s ease-in-out infinite alternate;
}

.about-neon-scan {
  z-index: 3;
  left: -25%;
  width: 32%;
  opacity: 0;
  transform: skewX(-16deg);
  background: linear-gradient(
    90deg,
    transparent,
    rgba(201,139,255,.05),
    rgba(129,210,255,.24),
    rgba(255,255,255,.08),
    transparent
  );
  mix-blend-mode: screen;
  filter: blur(10px);
}

.about-cinemagraph.in-view .about-neon-scan {
  animation: about-scan 8.5s ease-in-out 1.1s infinite;
}

.about-fog {
  z-index: 4;
  top: 56%;
  height: 56%;
  opacity: .25;
  mix-blend-mode: screen;
  filter: blur(18px);
  background:
    radial-gradient(ellipse at 24% 70%, rgba(161,101,232,.36), transparent 42%),
    radial-gradient(ellipse at 72% 80%, rgba(80,164,214,.28), transparent 46%);
  will-change: transform, opacity;
}

.about-fog-one {
  animation: about-fog-one 13s ease-in-out infinite alternate;
}

.about-fog-two {
  opacity: .16;
  transform: scaleX(-1);
  animation: about-fog-two 17s ease-in-out infinite alternate;
}

.about-particles {
  z-index: 5;
  overflow: hidden;
}

.about-particles i {
  position: absolute;
  display: block;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: rgba(236,218,255,.62);
  box-shadow: 0 0 9px rgba(181,113,255,.68);
  opacity: 0;
  animation: about-particle 9s linear infinite;
}

.about-particles i:nth-child(1){left:9%;top:79%;animation-delay:-1s;animation-duration:8.4s}
.about-particles i:nth-child(2){left:18%;top:68%;animation-delay:-6s;animation-duration:10.2s}
.about-particles i:nth-child(3){left:29%;top:88%;animation-delay:-3s;animation-duration:8.9s}
.about-particles i:nth-child(4){left:39%;top:72%;animation-delay:-7.5s;animation-duration:11s}
.about-particles i:nth-child(5){left:48%;top:84%;animation-delay:-4.6s;animation-duration:9.7s}
.about-particles i:nth-child(6){left:57%;top:76%;animation-delay:-2.8s;animation-duration:12s}
.about-particles i:nth-child(7){left:67%;top:90%;animation-delay:-8.2s;animation-duration:10.4s}
.about-particles i:nth-child(8){left:75%;top:69%;animation-delay:-5.3s;animation-duration:8.7s}
.about-particles i:nth-child(9){left:85%;top:83%;animation-delay:-9s;animation-duration:11.8s}
.about-particles i:nth-child(10){left:92%;top:74%;animation-delay:-3.7s;animation-duration:9.3s}
.about-particles i:nth-child(11){left:34%;top:93%;animation-delay:-10s;animation-duration:13s}
.about-particles i:nth-child(12){left:63%;top:86%;animation-delay:-1.8s;animation-duration:10.8s}

.about-lens-flare {
  z-index: 6;
  left: 62%;
  top: 10%;
  width: 34%;
  height: 34%;
  opacity: .13;
  border-radius: 50%;
  mix-blend-mode: screen;
  filter: blur(4px);
  background:
    radial-gradient(circle, rgba(255,255,255,.32) 0 1%, rgba(131,198,255,.18) 7%, rgba(161,92,255,.10) 22%, transparent 58%);
  animation: about-flare 9s ease-in-out infinite alternate;
}

.about-film-grain {
  z-index: 7;
  inset: -35%;
  opacity: .055;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.92' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)' opacity='.72'/%3E%3C/svg%3E");
  animation: about-grain .28s steps(2,end) infinite;
}

.about-vignette {
  z-index: 8;
  box-shadow:
    inset 0 0 95px rgba(0,0,0,.45),
    inset 0 -75px 90px rgba(2,2,5,.36);
  background:
    radial-gradient(circle at 50% 46%, transparent 40%, rgba(4,3,7,.16) 72%, rgba(4,3,7,.46) 100%),
    linear-gradient(180deg, rgba(117,56,192,.03), transparent 45%, rgba(4,3,7,.18));
}

.about-cinemagraph > span {
  z-index: 10;
  bottom: 18px;
  left: 18px;
  border: 1px solid rgba(196,132,255,.22);
  background: rgba(8,6,12,.74);
  box-shadow: 0 10px 34px rgba(0,0,0,.34), 0 0 22px rgba(130,74,210,.12);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

@keyframes about-breathe {
  from { transform: scale(1.045) translate3d(calc(var(--about-x) * -.10), calc(var(--about-y) * -.10), 0); }
  to   { transform: scale(1.075) translate3d(calc(var(--about-x) * -.16), calc(var(--about-y) * -.16), 0); }
}

@keyframes about-rays {
  0%   { transform: rotate(-3deg) scale(1); opacity: .18; }
  50%  { opacity: .34; }
  100% { transform: rotate(5deg) scale(1.08); opacity: .25; }
}

@keyframes about-scan {
  0%, 62% { transform: translateX(0) skewX(-16deg); opacity: 0; }
  68%     { opacity: .22; }
  88%     { opacity: .10; }
  100%    { transform: translateX(430%) skewX(-16deg); opacity: 0; }
}

@keyframes about-fog-one {
  from { transform: translate3d(-7%, 3%, 0) scale(1.05); opacity: .17; }
  to   { transform: translate3d(9%, -3%, 0) scale(1.15); opacity: .31; }
}

@keyframes about-fog-two {
  from { transform: translate3d(9%, 4%, 0) scaleX(-1) scale(1.10); opacity: .10; }
  to   { transform: translate3d(-6%, -2%, 0) scaleX(-1) scale(1.22); opacity: .21; }
}

@keyframes about-particle {
  0%   { transform: translate3d(0, 10px, 0) scale(.65); opacity: 0; }
  13%  { opacity: .65; }
  72%  { opacity: .35; }
  100% { transform: translate3d(24px, -190px, 0) scale(1.35); opacity: 0; }
}

@keyframes about-flare {
  from { transform: translate3d(-10px, 8px, 0) scale(.88); opacity: .07; }
  to   { transform: translate3d(14px, -10px, 0) scale(1.18); opacity: .19; }
}

@keyframes about-grain {
  0%   { transform: translate3d(-3%, 2%, 0); }
  25%  { transform: translate3d(2%, -4%, 0); }
  50%  { transform: translate3d(4%, 3%, 0); }
  75%  { transform: translate3d(-4%, -2%, 0); }
  100% { transform: translate3d(1%, 4%, 0); }
}

@media (hover:hover) and (pointer:fine) {
  .about-cinemagraph:hover .about-cinemagraph-stage {
    transition-duration: .18s;
    box-shadow:
      0 42px 120px rgba(0,0,0,.58),
      0 0 0 1px rgba(198,129,255,.25),
      0 0 95px rgba(128,73,220,.22);
  }
}

@media (max-width: 900px) {
  .about-cinemagraph-stage {
    transform: none !important;
  }

  .about-cinemagraph-photo {
    transform: scale(1.055) !important;
  }

  .about-cinemagraph.in-view .about-cinemagraph-photo {
    animation-duration: 10s;
  }

  .about-light-rays {
    opacity: .22;
  }

  .about-fog {
    opacity: .20;
  }
}

@media (prefers-reduced-motion: reduce) {
  .about-cinemagraph-stage,
  .about-cinemagraph-photo,
  .about-light-rays,
  .about-neon-scan,
  .about-fog,
  .about-particles i,
  .about-lens-flare,
  .about-film-grain {
    animation: none !important;
    transition: none !important;
    transform: none !important;
  }

  .about-cinemagraph-photo {
    filter: saturate(1.08) contrast(1.06) brightness(.98) !important;
  }

  .about-neon-scan,
  .about-particles {
    display: none;
  }
}


/* RC 3.4 visual tuning (placeholder layer for production integration)
   Amplifies the cinemagraph introduced in RC 3.3:
   - stronger light rays
   - richer fog
   - denser particles
   - camera drift
   - guitar shimmer
   - ambient section glow
*/

/* ===== RC3.6.1 Hero Cinematics ===== */
.hero{position:relative;overflow:hidden}
.hero::before{
 content:"";
 position:absolute;inset:-20%;
 background:
 radial-gradient(circle at 20% 20%,rgba(151,91,255,.18),transparent 28%),
 radial-gradient(circle at 80% 35%,rgba(90,190,255,.10),transparent 24%);
 filter:blur(30px);
 animation:heroGlow 14s ease-in-out infinite alternate;
 pointer-events:none;
}
.hero::after{
 content:"";
 position:absolute;inset:0;
 background:linear-gradient(115deg,
 transparent 15%,
 rgba(255,255,255,.05) 50%,
 transparent 85%);
 mix-blend-mode:screen;
 animation:heroSweep 16s linear infinite;
 pointer-events:none;
}
.hero .cta,
.hero .button,
.hero a[class*="btn"]{
 transition:transform .25s ease, box-shadow .25s ease;
}
.hero .cta:hover,
.hero .button:hover,
.hero a[class*="btn"]:hover{
 transform:translateY(-2px);
 box-shadow:0 12px 30px rgba(151,91,255,.25);
}
@keyframes heroGlow{
 from{opacity:.45;transform:scale(1);}
 to{opacity:.9;transform:scale(1.08);}
}
@keyframes heroSweep{
 from{transform:translateX(-35%);}
 to{transform:translateX(35%);}
}
@media(prefers-reduced-motion:reduce){
 .hero::before,.hero::after{animation:none}
}


/* ========================================================================
   RC 3.6.2 — Motion System
   A restrained, site-wide choreography layer built on top of RC 3.6.1.
   ======================================================================== */

:root{
  --rc362-ease: cubic-bezier(.22,.74,.18,1);
  --rc362-soft-ease: cubic-bezier(.25,.72,.25,1);
  --rc362-zone-progress: 0;
}

/* Sections become motion scenes without altering their document flow. */
.cinematic-zone{
  position:relative;
  isolation:isolate;
  --rc362-progress:0;
}

/* Atmospheric depth responds to scroll position per section. */
.cinematic-zone::before{
  transform:
    translate3d(0,calc((.5 - var(--rc362-progress)) * 22px),0)
    scale(calc(1 + var(--rc362-progress) * .012));
  transition:opacity .35s ease;
}

/* A consistent reveal language: content rises, media settles from depth. */
.rc362-reveal-copy,
.rc362-reveal-media,
.rc362-reveal-card{
  opacity:0;
  will-change:transform,opacity,filter;
  transition:
    opacity .9s var(--rc362-ease),
    transform 1.05s var(--rc362-ease),
    filter .9s var(--rc362-soft-ease);
}

.rc362-reveal-copy{
  transform:translate3d(0,38px,0);
  filter:blur(4px);
}

.rc362-reveal-media{
  transform:translate3d(0,28px,0) scale(1.018);
  filter:saturate(.88) brightness(.92);
}

.rc362-reveal-card{
  transform:translate3d(0,24px,0) scale(.988);
}

.rc362-in-view .rc362-reveal-copy,
.rc362-in-view .rc362-reveal-media,
.rc362-in-view .rc362-reveal-card{
  opacity:1;
  transform:none;
  filter:none;
}

/* Deliberate stagger rhythm inside grids and paired layouts. */
.rc362-delay-1{transition-delay:90ms}
.rc362-delay-2{transition-delay:170ms}
.rc362-delay-3{transition-delay:250ms}
.rc362-delay-4{transition-delay:330ms}
.rc362-delay-5{transition-delay:410ms}

/* Controlled image parallax. The image itself moves, not the layout box. */
.rc362-parallax{
  overflow:hidden;
  --rc362-parallax-y:0px;
}

.rc362-parallax > img,
.rc362-parallax picture > img{
  transform:translate3d(0,var(--rc362-parallax-y),0) scale(1.035);
  transition:transform .12s linear;
  will-change:transform;
}

/* Headings gain a subtle cinematic settling motion. */
.rc362-in-view .section-head h2,
.rc362-in-view .about-copy h2,
.rc362-in-view .instrument-copy h2{
  animation:rc362HeadingSettle 1.05s var(--rc362-ease) both;
}

@keyframes rc362HeadingSettle{
  from{letter-spacing:-.035em;transform:translate3d(0,12px,0)}
  to{letter-spacing:-.055em;transform:none}
}

/* Section-to-section continuity using the existing cinematic word. */
.cinematic-zone[data-cinema-word]::after{
  opacity:calc(.018 + var(--rc362-progress) * .025);
  transform:
    translate3d(0,calc((.5 - var(--rc362-progress)) * 34px),0);
}

/* Mobile: preserve the choreography but remove blur and image scaling. */
@media(max-width:760px){
  .rc362-reveal-copy,
  .rc362-reveal-media,
  .rc362-reveal-card{
    transition-duration:.72s;
  }

  .rc362-reveal-copy{
    transform:translate3d(0,22px,0);
    filter:none;
  }

  .rc362-reveal-media,
  .rc362-reveal-card{
    transform:translate3d(0,18px,0);
    filter:none;
  }

  .rc362-parallax > img,
  .rc362-parallax picture > img{
    transform:none!important;
  }
}

/* Accessibility and efficiency. */
@media(prefers-reduced-motion:reduce){
  .rc362-reveal-copy,
  .rc362-reveal-media,
  .rc362-reveal-card{
    opacity:1!important;
    transform:none!important;
    filter:none!important;
    transition:none!important;
  }

  .rc362-parallax > img,
  .rc362-parallax picture > img,
  .cinematic-zone::before,
  .cinematic-zone[data-cinema-word]::after{
    transform:none!important;
    transition:none!important;
  }

  .rc362-in-view .section-head h2,
  .rc362-in-view .about-copy h2,
  .rc362-in-view .instrument-copy h2{
    animation:none!important;
  }
}

html[data-rc362-paused="true"] .rc362-parallax > img,
html[data-rc362-paused="true"] .rc362-parallax picture > img{
  transition:none!important;
}

/* ===== RC3.6.3 Premium Components ===== */
:root{
 --pc-radius:22px;
 --pc-border:rgba(255,255,255,.08);
 --pc-glow:0 20px 60px rgba(128,90,255,.16);
}
.testimonial-card,.card,.panel{
 border:1px solid var(--pc-border);
 border-radius:var(--pc-radius);
 backdrop-filter:blur(10px);
 transition:transform .28s ease, box-shadow .28s ease,border-color .28s ease;
}
.testimonial-card:hover,.card:hover,.panel:hover{
 transform:translateY(-4px);
 box-shadow:var(--pc-glow);
 border-color:rgba(180,140,255,.22);
}
.testimonial-photo img{
 transition:transform .5s ease;
}
.testimonial-card:hover .testimonial-photo img{
 transform:scale(1.04);
}
blockquote{
 position:relative;
}
blockquote:before{
 content:"“";
 position:absolute;
 left:-.35em; top:-.25em;
 font-size:4rem;
 opacity:.08;
}
button,.btn,a[class*="btn"]{
 border-radius:999px;
 transition:transform .22s ease, box-shadow .22s ease;
}
button:hover,.btn:hover,a[class*="btn"]:hover{
 transform:translateY(-2px);
 box-shadow:0 10px 28px rgba(128,90,255,.24);
}


/* ========================================================================
   RC 3.6.4 — Final Polish
   Final pass for spacing, typography, accessibility, responsiveness,
   section continuity and performance-minded rendering.
   ======================================================================== */

:root{
  --rc364-section-gap: clamp(4.75rem, 8vw, 8.5rem);
  --rc364-content-gap: clamp(1.25rem, 2.4vw, 2.5rem);
  --rc364-copy-max: 68ch;
  --rc364-hairline: rgba(255,255,255,.07);
  --rc364-focus: 0 0 0 3px rgba(166,124,255,.32);
}

/* Consistent vertical rhythm across all major scenes. */
.cinematic-zone{
  padding-top:var(--rc364-section-gap);
  padding-bottom:var(--rc364-section-gap);
}

.cinematic-zone + .cinematic-zone{
  border-top:1px solid var(--rc364-hairline);
}

/* Better spacing hierarchy inside sections. */
.section-head,
.about-copy,
.instrument-copy,
.music-story,
.studio-note,
.signal-method-copy,
.coaching-identity{
  max-width:var(--rc364-copy-max);
}

.section-head > * + *,
.about-copy > * + *,
.instrument-copy > * + *,
.music-story > * + *,
.studio-note > * + *,
.signal-method-copy > * + *,
.coaching-identity > * + *{
  margin-top:clamp(.75rem,1.4vw,1.25rem);
}

/* Typography refinement. */
.section-head h2,
.about-copy h2,
.instrument-copy h2{
  text-wrap:balance;
  line-height:.98;
}

.section-head p,
.about-copy p,
.instrument-copy p,
.music-story p,
.studio-note p,
.signal-method-copy p{
  text-wrap:pretty;
  line-height:1.72;
}

.eyebrow,
.kicker,
.section-label{
  letter-spacing:.11em;
}

/* Improve component spacing without changing composition. */
.method-cards,
.role-cards,
.coaching-options,
.lesson-grid,
.journal-grid,
.welcome-products,
.creative-actions,
.music-grid{
  gap:var(--rc364-content-gap);
}

.testimonial-card,
.card,
.panel{
  padding:clamp(1.25rem,2vw,2rem);
}

/* More refined section continuity. */
.cinematic-zone::after{
  transition:opacity .5s ease, transform .9s var(--rc362-ease);
}

.cinematic-zone:nth-of-type(even){
  background-image:
    linear-gradient(180deg,rgba(255,255,255,.012),transparent 24%),
    radial-gradient(circle at 80% 15%,rgba(129,85,255,.035),transparent 30%);
}

/* Inputs and controls gain consistent premium focus treatment. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible{
  outline:none;
  box-shadow:var(--rc364-focus);
}

button,
.btn,
a[class*="btn"]{
  min-height:44px;
}

input,
textarea,
select{
  border-radius:14px;
  border:1px solid rgba(255,255,255,.1);
  transition:border-color .2s ease, box-shadow .2s ease, background-color .2s ease;
}

input:focus,
textarea:focus,
select:focus{
  border-color:rgba(166,124,255,.45);
}

/* Prevent image reflow and improve rendering stability. */
img{
  height:auto;
}

img[width][height]{
  content-visibility:auto;
}

.cinematic-zone,
.testimonial-card,
.card,
.panel{
  contain:paint;
}

/* Premium hover only on devices that actually support hover. */
@media(hover:hover) and (pointer:fine){
  .testimonial-card:hover,
  .card:hover,
  .panel:hover{
    transform:translateY(-5px);
  }
}

/* Tablet refinement. */
@media(max-width:1024px){
  :root{
    --rc364-section-gap:clamp(4rem,7vw,6.25rem);
  }

  .section-head,
  .about-copy,
  .instrument-copy,
  .music-story,
  .studio-note,
  .signal-method-copy,
  .coaching-identity{
    max-width:62ch;
  }
}

/* Mobile final pass. */
@media(max-width:760px){
  :root{
    --rc364-section-gap:3.75rem;
    --rc364-content-gap:1rem;
  }

  .cinematic-zone{
    padding-top:var(--rc364-section-gap);
    padding-bottom:var(--rc364-section-gap);
  }

  .section-head h2,
  .about-copy h2,
  .instrument-copy h2{
    line-height:1.03;
  }

  .testimonial-card,
  .card,
  .panel{
    padding:1.2rem;
    border-radius:18px;
  }

  button,
  .btn,
  a[class*="btn"]{
    min-height:46px;
  }
}

/* Respect reduced transparency preferences where supported. */
@media(prefers-reduced-transparency:reduce){
  .testimonial-card,
  .card,
  .panel{
    backdrop-filter:none!important;
    background:rgba(18,18,24,.96)!important;
  }
}

@media(prefers-reduced-motion:reduce){
  html{
    scroll-behavior:auto!important;
  }

  *,
  *::before,
  *::after{
    scroll-behavior:auto!important;
  }
}


/* ========================================================================
   RC 3.6.4a — HOTFIX: How I Can Help
   Restores the approved full-width coaching composition and image crop.
   This deliberately overrides only RC 3.6.4 rules that leaked into the
   coaching component.
   ======================================================================== */

/* The RC 3.6.4 typography rule accidentally constrained this complete
   two-column component to a text-column width. */
.coaching .coaching-identity{
  max-width:none;
  width:100%;
}

/* Remove generic sibling margins that created spacing inside the grid. */
.coaching .coaching-identity > * + *{
  margin-top:0;
}

/* Preserve the original full-width grid and approved proportions. */
@media(min-width:1001px){
  .coaching .coaching-identity{
    grid-template-columns:minmax(0,.92fr) minmax(420px,1.08fr);
  }

  .coaching .coaching-identity .coaching-photo-only{
    width:100%;
    min-width:0;
    min-height:700px;
  }

  .coaching .coaching-identity .coaching-photo-only img{
    width:100%;
    height:100%;
    min-height:700px;
    object-fit:cover;
    object-position:52% 45%;
  }
}

/* Restore the existing responsive crop instead of inheriting global image
   and component sizing rules. */
@media(max-width:1000px){
  .coaching .coaching-identity{
    max-width:none;
    grid-template-columns:1fr;
  }

  .coaching .coaching-identity .coaching-photo-only,
  .coaching .coaching-identity .coaching-photo-only img{
    width:100%;
    min-height:520px;
    height:520px;
  }

  .coaching .coaching-identity .coaching-photo-only img{
    object-fit:cover;
    object-position:52% 45%;
  }
}

@media(max-width:560px){
  .coaching .coaching-identity .coaching-photo-only,
  .coaching .coaching-identity .coaching-photo-only img{
    min-height:390px;
    height:390px;
  }

  .coaching .coaching-identity .coaching-photo-only img{
    object-position:52% 45%;
  }
}


/* ========================================================================
   RC 3.6.5 — Tim Hutch Signature Identity & Cinematic Epilogue
   Scoped entirely to the new brand and final scene.
   ======================================================================== */

:root{
  --th-midnight:#090813;
  --th-violet:#8d68ff;
  --th-cyan:#76e9ff;
  --th-magenta:#ff66be;
  --th-ivory:#f3f0fb;
}

.signature-epilogue{
  position:relative;
  min-height:100svh;
  overflow:hidden;
  display:grid;
  place-items:center;
  isolation:isolate;
  background:
    radial-gradient(circle at 50% 68%,rgba(141,104,255,.13),transparent 30%),
    linear-gradient(180deg,#08070f 0%,#090813 54%,#04040a 100%);
  border-top:1px solid rgba(255,255,255,.06);
}

.signature-noise{
  position:absolute;
  inset:0;
  z-index:-1;
  pointer-events:none;
  opacity:.14;
  background-image:
    repeating-radial-gradient(circle at 20% 30%,rgba(255,255,255,.035) 0 1px,transparent 1px 4px);
  background-size:8px 8px;
  mix-blend-mode:soft-light;
  animation:thNoise 1.8s steps(2,end) infinite;
}

.signature-horizon{
  position:absolute;
  inset:auto -10% -32% -10%;
  height:62%;
  z-index:-1;
  opacity:.23;
  transform:perspective(520px) rotateX(62deg);
  transform-origin:center top;
  background-image:
    linear-gradient(rgba(118,233,255,.24) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,102,190,.2) 1px,transparent 1px);
  background-size:54px 38px;
  mask-image:linear-gradient(to bottom,#000,transparent 80%);
}

.signature-epilogue-inner{
  width:min(100%,1100px);
  padding-top:clamp(6rem,12vw,10rem);
  padding-bottom:clamp(6rem,12vw,10rem);
  text-align:center;
}

.signature-beat{
  margin:0;
  color:var(--th-ivory);
  font-size:clamp(2rem,6vw,5.7rem);
  line-height:.98;
  letter-spacing:-.055em;
  text-wrap:balance;
  opacity:0;
  transform:translateY(24px);
}

.signature-beat-two{
  margin-top:.42em;
  color:rgba(243,240,251,.62);
  font-size:clamp(1.3rem,3.4vw,3.15rem);
}

.signature-beat-two span{
  color:var(--th-ivory);
}

.signature-trace{
  width:min(630px,86vw);
  height:2px;
  margin:clamp(2.5rem,6vw,5.4rem) auto clamp(2rem,4vw,3.5rem);
  overflow:hidden;
  background:rgba(255,255,255,.06);
  opacity:0;
}

.signature-trace i{
  display:block;
  width:100%;
  height:100%;
  transform:translateX(-105%);
  background:linear-gradient(90deg,transparent,var(--th-cyan) 20%,var(--th-violet) 55%,var(--th-magenta) 85%,transparent);
  box-shadow:0 0 18px rgba(118,233,255,.7),0 0 30px rgba(255,102,190,.38);
}

.signature-brand{
  width:min(760px,90vw);
  margin:0 auto;
  display:grid;
  justify-items:center;
  opacity:0;
  transform:translateY(18px) scale(.985);
}

.signature-monogram{
  width:clamp(86px,12vw,128px);
  aspect-ratio:1;
  margin-bottom:clamp(1rem,2vw,1.4rem);
  filter:drop-shadow(0 0 18px rgba(118,233,255,.18));
}

.signature-wordmark{
  width:min(720px,88vw);
  height:auto;
}

.signature-closing{
  margin:clamp(2rem,4vw,3rem) 0 0;
  color:rgba(243,240,251,.72);
  font-size:clamp(.98rem,1.7vw,1.24rem);
  letter-spacing:.14em;
  text-transform:uppercase;
  opacity:0;
  transform:translateY(12px);
}

.signature-cta{
  display:inline-flex;
  align-items:center;
  gap:.9rem;
  margin-top:1.6rem;
  min-height:52px;
  padding:.8rem 1.35rem .8rem 1.55rem;
  border:1px solid rgba(118,233,255,.28);
  border-radius:999px;
  color:var(--th-ivory);
  background:linear-gradient(135deg,rgba(118,233,255,.07),rgba(255,102,190,.08));
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.025),0 14px 45px rgba(0,0,0,.24);
  opacity:0;
  transform:translateY(14px);
}

.signature-cta i{
  color:var(--th-cyan);
  font-style:normal;
}

.signature-cta:hover{
  border-color:rgba(255,102,190,.52);
  box-shadow:0 16px 42px rgba(141,104,255,.19);
}

.signature-epilogue.is-awake .signature-beat-one{
  animation:thReveal .95s cubic-bezier(.22,.74,.18,1) .1s forwards;
}
.signature-epilogue.is-awake .signature-beat-two{
  animation:thReveal .95s cubic-bezier(.22,.74,.18,1) .8s forwards;
}
.signature-epilogue.is-awake .signature-trace{
  animation:thFade .5s ease 1.55s forwards;
}
.signature-epilogue.is-awake .signature-trace i{
  animation:thTrace 1.35s cubic-bezier(.2,.8,.2,1) 1.62s forwards;
}
.signature-epilogue.is-awake .signature-brand{
  animation:thBrand 1.1s cubic-bezier(.22,.74,.18,1) 2.65s forwards;
}
.signature-epilogue.is-awake .signature-closing{
  animation:thReveal .8s ease 3.55s forwards;
}
.signature-epilogue.is-awake .signature-cta{
  animation:thReveal .8s ease 4.05s forwards;
}

.brand-signature{
  display:inline-flex!important;
  align-items:center;
}
.brand-signature img{
  width:min(240px,48vw);
  height:auto;
}

@keyframes thReveal{
  to{opacity:1;transform:none}
}
@keyframes thFade{
  to{opacity:1}
}
@keyframes thTrace{
  to{transform:translateX(105%)}
}
@keyframes thBrand{
  to{opacity:1;transform:none}
}
@keyframes thNoise{
  0%{transform:translate3d(0,0,0)}
  25%{transform:translate3d(-1%,1%,0)}
  50%{transform:translate3d(1%,-1%,0)}
  75%{transform:translate3d(.5%,1%,0)}
  100%{transform:translate3d(0,0,0)}
}

@media(max-width:700px){
  .signature-epilogue{
    min-height:88svh;
  }
  .signature-epilogue-inner{
    padding-inline:1.2rem;
  }
  .signature-wordmark{
    width:100%;
  }
  .signature-horizon{
    bottom:-20%;
    height:48%;
    background-size:38px 30px;
  }
}

@media(prefers-reduced-motion:reduce){
  .signature-noise{animation:none}
  .signature-beat,
  .signature-trace,
  .signature-brand,
  .signature-closing,
  .signature-cta{
    opacity:1!important;
    transform:none!important;
    animation:none!important;
  }
  .signature-trace i{
    transform:none!important;
    animation:none!important;
  }
}


/* ===== RC4.0 SIGNAL Sprint1 ===== */
:root{
 --signal-bg:#090813;
 --signal-surface:#11111b;
 --signal-cyan:#73e7ff;
 --signal-violet:#8d68ff;
 --signal-text:#f4f4f8;
}
body{
 background:var(--signal-bg);
 color:var(--signal-text);
}
header{
 backdrop-filter:blur(14px);
 background:rgba(9,8,19,.72);
 border-bottom:1px solid rgba(115,231,255,.08);
}
.nav a{
 letter-spacing:.08em;
 text-transform:uppercase;
}
.signal-accent{
 color:var(--signal-cyan);
}

/* =========================================================
   RC 4.1 PREMIUM POLISH
   Visual-only refinements. Existing layout and photography are locked.
   ========================================================= */

:root{
  --rc41-line:rgba(115,231,255,.14);
  --rc41-line-strong:rgba(115,231,255,.28);
  --rc41-glass:rgba(17,17,27,.72);
  --rc41-soft-shadow:0 18px 54px rgba(0,0,0,.22);
  --rc41-focus:0 0 0 3px rgba(115,231,255,.22);
}

/* Navigation: sharper but not repositioned */
.nav{
  box-shadow:0 1px 0 rgba(255,255,255,.025),0 14px 44px rgba(0,0,0,.12);
}
.nav a{
  transition:color .22s ease,opacity .22s ease,text-shadow .22s ease;
}
.nav a:hover,
.nav a:focus-visible{
  color:var(--signal-cyan);
  text-shadow:0 0 18px rgba(115,231,255,.22);
}
.brand-signature{
  transition:opacity .22s ease,filter .22s ease;
}
.brand-signature:hover{
  filter:drop-shadow(0 0 14px rgba(115,231,255,.16));
}

/* Buttons: preserve geometry, refine finish */
.btn,
.nav-cta,
.signature-cta a{
  transition:transform .2s ease,box-shadow .22s ease,border-color .22s ease,
             background-color .22s ease,color .22s ease,filter .22s ease;
}
.btn:hover,
.nav-cta:hover,
.signature-cta a:hover{
  transform:translateY(-1px);
  border-color:var(--rc41-line-strong);
  box-shadow:0 12px 32px rgba(0,0,0,.2),0 0 24px rgba(115,231,255,.08);
}
.btn:active,
.nav-cta:active,
.signature-cta a:active{
  transform:translateY(0);
}
.btn:focus-visible,
.nav-cta:focus-visible,
.signature-cta a:focus-visible,
.mobile-menu-toggle:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible{
  outline:none;
  box-shadow:var(--rc41-focus);
}

/* Cards: no dimensions changed, only surface quality */
.method-card,
.role-card,
.testimonial-card,
.resource-card,
.music-card,
.freebie-card{
  border-color:rgba(255,255,255,.08);
  transition:border-color .25s ease,background-color .25s ease,box-shadow .25s ease,filter .25s ease;
}
.method-card:hover,
.role-card:hover,
.testimonial-card:hover,
.resource-card:hover,
.music-card:hover,
.freebie-card:hover{
  border-color:var(--rc41-line);
  box-shadow:var(--rc41-soft-shadow);
}

/* Media: preserve crop/position; add a cleaner premium finish */
.hero-photo img,
.coaching-photo-only img,
.about img,
.testimonial-card img,
.music-card img{
  transition:filter .35s ease;
}
.hero-photo img,
.coaching-photo-only img{
  filter:contrast(1.015) saturate(.985);
}

/* Headings and small labels: subtle consistency only */
.eyebrow,
.method-tag,
.hero-signup-kicker{
  text-shadow:0 0 20px rgba(115,231,255,.08);
}
.section-head h2,
.method-intro h2,
.hero-copy h1{
  text-wrap:balance;
}

/* Form finish */
input,
textarea,
select{
  transition:border-color .22s ease,background-color .22s ease,box-shadow .22s ease;
}
input:hover,
textarea:hover,
select:hover{
  border-color:rgba(115,231,255,.24);
}

/* Fine separators and section continuity */
.signal-divider{
  opacity:.92;
  filter:drop-shadow(0 0 12px rgba(115,231,255,.08));
}
.section-no{
  opacity:.76;
}

/* Improve motion quality while respecting accessibility */
@media (prefers-reduced-motion:no-preference){
  .reveal{
    transition-timing-function:cubic-bezier(.22,1,.36,1);
  }
}

@media (prefers-reduced-motion:reduce){
  .btn,
  .nav-cta,
  .signature-cta a,
  .nav a,
  .brand-signature,
  .method-card,
  .role-card,
  .testimonial-card,
  .resource-card,
  .music-card,
  .freebie-card,
  .hero-photo img,
  .coaching-photo-only img,
  input,
  textarea,
  select{
    transition:none!important;
  }
}


/* =========================================================
   TIM HUTCH RC 4.2 — TRUSTED BY LEGENDS
   Rick Graham portrait endorsement.
   Static layout only: no new scroll listeners or transforms.
   ========================================================= */
.rick-endorsement{
  position:relative;
  display:grid;
  grid-template-columns:minmax(132px,190px) minmax(0,1fr);
  gap:clamp(22px,3vw,38px);
  align-items:stretch;
  margin:34px 0 0;
  padding:clamp(16px,2vw,22px);
  overflow:hidden;
  border:1px solid rgba(213,167,126,.30);
  border-radius:22px;
  background:
    radial-gradient(circle at 12% 30%,rgba(213,167,126,.14),transparent 38%),
    linear-gradient(145deg,rgba(20,17,15,.96),rgba(10,9,8,.88));
  box-shadow:0 28px 72px rgba(0,0,0,.30);
}
.rick-endorsement::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  border-radius:inherit;
  background:linear-gradient(120deg,rgba(255,255,255,.045),transparent 32%);
}
.rick-endorsement-photo{
  position:relative;
  z-index:1;
  display:block;
  min-height:220px;
  overflow:hidden;
  border-radius:15px;
  background:#090807;
}
.rick-endorsement-photo img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center 24%;
  filter:saturate(.9) contrast(1.04);
}
.rick-endorsement figcaption{
  position:relative;
  z-index:1;
  display:flex;
  flex-direction:column;
  justify-content:center;
  min-width:0;
  padding:10px clamp(4px,1vw,12px) 10px 0;
}
.rick-endorsement-label{
  margin-bottom:13px;
  color:#d5a77e;
  font:600 10px/1.2 "Space Grotesk",sans-serif;
  letter-spacing:.20em;
  text-transform:uppercase;
}
.about-copy .rick-endorsement blockquote{
  margin:0;
  padding:0;
  border:0;
  color:#eee5dc;
  font:italic clamp(21px,2.15vw,29px)/1.42 "Newsreader",serif;
  letter-spacing:-.015em;
}
.rick-endorsement-author{
  display:grid;
  gap:3px;
  width:min(100%,290px);
  margin-top:20px;
  padding-top:15px;
  border-top:1px solid rgba(213,167,126,.28);
}
.rick-endorsement-author strong{
  color:#f0e8df;
  font:600 13px/1.2 "Space Grotesk",sans-serif;
  letter-spacing:.13em;
  text-transform:uppercase;
}
.rick-endorsement-author span{
  color:#9f958c;
  font-size:11px;
  line-height:1.4;
}
@media(max-width:1100px){
  .rick-endorsement{grid-template-columns:150px minmax(0,1fr)}
}
@media(max-width:620px){
  .rick-endorsement{
    grid-template-columns:112px minmax(0,1fr);
    gap:18px;
    padding:14px;
    border-radius:18px;
  }
  .rick-endorsement-photo{min-height:185px;border-radius:12px}
  .about-copy .rick-endorsement blockquote{font-size:19px;line-height:1.38}
  .rick-endorsement-label{letter-spacing:.14em;font-size:9px}
  .rick-endorsement-author{margin-top:14px;padding-top:12px}
}
@media(max-width:430px){
  .rick-endorsement{grid-template-columns:1fr}
  .rick-endorsement-photo{aspect-ratio:4/3;min-height:0}
  .rick-endorsement-photo img{object-position:center 20%}
  .rick-endorsement figcaption{padding:4px 4px 8px}
}



/* =========================================================
   RC 4.3a — METHOD CARD REVEAL FIX
   Uses the actual .method-card selector.
   One-time entrance only; no continuous scroll animation.
   ========================================================= */
.signal-method .method-card.momentum-ready{
  opacity:0 !important;
  transform:translate3d(0,38px,0) scale(.985) !important;
  transition:
    opacity .72s ease-out,
    transform .78s cubic-bezier(.22,.61,.36,1),
    border-color .38s ease,
    box-shadow .38s ease,
    background .38s ease !important;
}
.signal-method .method-card.momentum-ready.momentum-visible{
  opacity:1 !important;
  transform:translate3d(0,0,0) scale(1) !important;
}
.signal-method .method-card.momentum-ready:nth-child(1){transition-delay:0ms !important}
.signal-method .method-card.momentum-ready:nth-child(2){transition-delay:90ms !important}
.signal-method .method-card.momentum-ready:nth-child(3){transition-delay:180ms !important}
.signal-method .method-card.momentum-ready:nth-child(4){transition-delay:270ms !important}

/* Restore the existing premium hover after the entrance animation. */
@media (hover:hover) and (pointer:fine){
  .signal-method .method-card.momentum-ready.momentum-visible:hover{
    transform:translate3d(0,-7px,0) scale(1) !important;
  }
}

/* Accessibility: show cards immediately when reduced motion is requested. */
@media (prefers-reduced-motion:reduce){
  .signal-method .method-card.momentum-ready{
    opacity:1 !important;
    transform:none !important;
    transition:none !important;
  }
}


/* =========================================================
   RC 5.0 — MOBILE PREMIUM
   Mobile-only editorial refinement.
   No new JavaScript, observers, parallax or continuous motion.
   ========================================================= */
@media (max-width: 900px){

  /* 1. Hero: remove the unintended black void beneath the CTA buttons. */
  .mastered-hero .hero-content{
    gap:18px !important;
    padding-bottom:10px !important;
  }
  .mastered-hero .hero-copy{
    padding-bottom:0 !important;
  }
  .mastered-hero .hero-actions{
    margin-top:18px !important;
    margin-bottom:0 !important;
  }
  .mastered-hero .hero-foot{
    display:none !important;
  }

  /* Pull the first editorial section naturally toward the hero. */
  .hero-intro{
    margin-top:0 !important;
    padding-top:38px !important;
    padding-bottom:48px !important;
  }

  /* 2. Premium mobile typography and rhythm. */
  .section,
  .signal-method,
  .signal-notes{
    padding-block:68px !important;
  }
  .section-head,
  .method-intro{
    margin-bottom:34px !important;
  }
  .section-head{
    gap:18px !important;
  }
  .section-head > p,
  .method-intro > p,
  .hero-intro-grid > p:last-child{
    max-width:35rem;
  }
  .eyebrow{
    font-size:9px !important;
    line-height:1.45 !important;
    letter-spacing:.17em !important;
  }

  /* 3. Touch-sized, polished calls to action. */
  .hero-actions .btn,
  .instrument-links a,
  .signature-cta{
    min-height:52px;
    border-radius:999px;
    font-weight:600;
    letter-spacing:.035em;
  }
  .hero-actions .btn{
    border-color:rgba(255,255,255,.22);
    background:rgba(255,255,255,.035);
    box-shadow:inset 0 1px rgba(255,255,255,.045);
  }
  .hero-actions .btn:first-child{
    background:#eee6de;
    color:#15110e;
    border-color:#eee6de;
  }

  /* 4. Cards: stronger visual hierarchy without heavier animation. */
  .method-card,
  .coaching-grid article,
  .music-story,
  .welcome-product{
    border-radius:18px;
  }
  .method-card,
  .coaching-grid article{
    padding:27px 23px !important;
  }
  .method-card h3,
  .coaching-grid h3{
    line-height:1.08;
  }
  .method-card p,
  .coaching-grid article p,
  .music-story p{
    line-height:1.62;
  }

  /* 5. Horizontal rails: clear edge spacing and deliberate continuation. */
  .method-cards,
  .coaching-grid,
  .resource-products{
    padding-bottom:16px !important;
    scroll-padding-inline:16px;
  }

  /* 6. Photography receives a more editorial mobile treatment. */
  .about-media,
  .coaching-photo-only,
  .premium-video,
  .instrument-image{
    overflow:hidden;
  }
  .about-media img,
  .coaching-photo-only img{
    display:block;
    width:100%;
  }

  /* 7. Endorsement is denser on mobile, without losing status. */
  .rick-endorsement{
    margin-top:26px;
  }

  /* 8. Footer and final CTA spacing. */
  .signature-epilogue{
    padding-top:74px;
    padding-bottom:74px;
  }
  .footer{
    padding-top:54px;
  }
}

@media (max-width: 560px){

  /* Hero CTA stack: compact and immediate. */
  .mastered-hero .hero-content{
    gap:15px !important;
    padding-bottom:4px !important;
  }
  .mastered-hero .hero-copy{
    padding-inline:3px !important;
  }
  .mastered-hero .hero-copy .hero-lead{
    max-width:31rem;
    margin-inline:auto;
  }
  .mastered-hero .hero-actions{
    gap:9px !important;
    margin-top:17px !important;
  }
  .mastered-hero .hero-actions .btn{
    width:100%;
    min-height:52px;
    padding:14px 18px;
  }
  .hero-intro{
    padding-top:30px !important;
    padding-bottom:40px !important;
  }

  /* More confident, readable headings. */
  .section h2,
  .about h2,
  .join h2{
    font-size:clamp(40px,11vw,54px) !important;
  }
  .section,
  .signal-method,
  .signal-notes{
    padding-block:60px !important;
  }

  /* Full-width forms and calmer vertical density. */
  .hero-signup{
    margin-bottom:0 !important;
  }
  .hero-signup input,
  .hero-signup button{
    border-radius:10px;
  }

  /* Cards feel like mobile stories, not shrunken desktop panels. */
  .method-card,
  .coaching-grid article,
  .welcome-product{
    flex-basis:88vw !important;
    min-height:300px;
  }
  .music-story{
    padding:25px 20px !important;
  }
  .instrument-copy{
    padding-top:44px !important;
    padding-bottom:58px !important;
  }

  /* Testimonial portrait stacks cleanly on the narrowest devices. */
  .rick-endorsement{
    box-shadow:0 20px 54px rgba(0,0,0,.27);
  }
}

@media (max-width: 390px){
  .mastered-hero .hero-content{
    padding-bottom:0 !important;
  }
  .hero-intro{
    padding-top:26px !important;
  }
  .method-card,
  .coaching-grid article,
  .welcome-product{
    flex-basis:90vw !important;
  }
}


/* =========================================================
   RC 5.1 — MOBILE VERTICAL RHYTHM
   Tightens two oversized mobile transitions only.
   Desktop remains unchanged.
   ========================================================= */
@media (max-width: 900px){

  /* Instrument model -> From Tim's Notebook */
  .instrument-copy{
    padding-bottom:42px !important;
  }
  .instrument-links{
    margin-bottom:0 !important;
  }
  .studio-note{
    min-height:auto !important;
    padding-top:28px !important;
    padding-bottom:42px !important;
  }
  .studio-note-paper{
    margin-top:0 !important;
  }

  /* Keep the Signal Alive -> The Signal Has Travelled */
  .creative-epilogue{
    margin-bottom:0 !important;
  }
  .creative-epilogue-inner{
    padding-bottom:34px !important;
  }
  .creative-socials{
    padding-bottom:0 !important;
    margin-bottom:0 !important;
  }
  .signature-epilogue{
    min-height:auto !important;
    place-items:start center !important;
  }
  .signature-epilogue-inner{
    padding-top:66px !important;
    padding-bottom:72px !important;
  }

  /* Signature -> footer */
  .footer{
    padding-top:42px !important;
  }
}

@media (max-width: 560px){

  /* The model CTA now flows directly into the notebook card. */
  .instrument-copy{
    padding-bottom:32px !important;
  }
  .studio-note{
    padding-top:18px !important;
    padding-bottom:34px !important;
  }
  .studio-note-paper{
    width:100% !important;
    padding:34px 24px 30px !important;
  }

  /* Treat the final two scenes as one continuous cinematic ending. */
  .creative-epilogue-inner{
    gap:32px !important;
    padding-bottom:26px !important;
  }
  .creative-socials{
    padding-top:24px !important;
  }
  .signature-epilogue-inner{
    padding-top:50px !important;
    padding-bottom:58px !important;
  }
  .signature-trace{
    margin-top:2rem !important;
    margin-bottom:1.8rem !important;
  }
  .footer{
    padding-top:34px !important;
  }
}

@media (max-width: 390px){
  .studio-note{
    padding-top:14px !important;
  }
  .signature-epilogue-inner{
    padding-top:44px !important;
    padding-bottom:52px !important;
  }
}


/* =========================================================
   RC 5.3 — HERO RECONSTRUCTION
   The mockup is treated as the final art-direction blueprint.
   ========================================================= */
.mastered-hero{
  min-height:760px !important;
  height:min(900px,100svh) !important;
  display:flex !important;
  align-items:flex-end !important;
  background:#030305 !important;
}
.mastered-hero .hero-photo{
  inset:0 !important;
  width:100% !important;
  height:100% !important;
  background-image:image-set(
    url('assets/tim-hero-reconstruction-1200.webp') 1x,
    url('assets/tim-hero-reconstruction-1920.webp') 2x
  ) !important;
  background-position:center center !important;
  background-size:cover !important;
  transform:none !important;
}
.mastered-hero .hero-shade{
  inset:0 !important;
  height:auto !important;
  background:
    linear-gradient(90deg,rgba(2,2,4,.93) 0%,rgba(2,2,4,.78) 28%,rgba(2,2,4,.28) 55%,rgba(2,2,4,.04) 78%),
    linear-gradient(0deg,rgba(3,3,6,.88) 0%,transparent 28%),
    radial-gradient(circle at 78% 24%,rgba(137,54,202,.12),transparent 31%) !important;
}
.mastered-hero:after{
  opacity:.55 !important;
  background:
    radial-gradient(circle at 72% 22%,rgba(163,78,234,.13),transparent 31%),
    radial-gradient(circle at 92% 50%,rgba(0,222,155,.09),transparent 26%) !important;
}
.mastered-hero .hero-content{
  display:block !important;
  width:var(--shell) !important;
  padding-top:150px !important;
  padding-bottom:105px !important;
}
.mastered-hero .hero-copy{
  width:min(590px,48vw) !important;
  max-width:none !important;
  margin:0 !important;
  text-align:left !important;
  position:relative;
  z-index:5;
}
.mastered-hero .hero-copy .eyebrow{
  color:#a84bf2 !important;
  font:700 13px/1 "Space Grotesk" !important;
  letter-spacing:.14em !important;
  margin:0 0 18px !important;
}
.mastered-hero .hero-copy h1{
  max-width:none !important;
  margin:0 !important;
  color:#fff !important;
  font:700 clamp(58px,5.2vw,84px)/.92 "Space Grotesk" !important;
  letter-spacing:-.055em !important;
  text-transform:uppercase;
  text-shadow:0 8px 34px rgba(0,0,0,.45);
}
.mastered-hero .hero-copy h1 em{
  font:inherit !important;
  color:#9e3be0 !important;
}
.hero-accent-line{
  display:block;
  width:50px;
  height:2px;
  margin:28px 0 25px;
  background:#9e3be0;
  box-shadow:0 0 20px rgba(158,59,224,.45);
}
.mastered-hero .hero-copy .hero-lead{
  max-width:500px !important;
  margin:0 !important;
  color:#e2dfe6 !important;
  font-size:18px !important;
  line-height:1.55 !important;
}
.mastered-hero .hero-actions{
  display:flex !important;
  gap:14px !important;
  margin:30px 0 0 !important;
}
.mastered-hero .hero-actions .btn{
  min-height:56px;
  padding:0 24px !important;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:18px;
  border-radius:3px !important;
  font:700 13px/1 "Space Grotesk";
  letter-spacing:.035em;
  text-transform:uppercase;
}
.mastered-hero .hero-actions .btn.primary{
  color:#fff !important;
  background:linear-gradient(135deg,#a03de1,#7425b7) !important;
  border-color:#a54ce3 !important;
  box-shadow:0 14px 34px rgba(126,39,184,.28);
}
.mastered-hero .hero-actions .btn.ghost{
  color:#fff !important;
  background:rgba(4,4,7,.56) !important;
  border-color:rgba(255,255,255,.42) !important;
}
.hero-trust{
  display:flex;
  align-items:center;
  gap:15px;
  margin-top:30px;
}
.hero-trust-marks{
  display:flex;
  align-items:center;
}
.hero-trust-marks span,.hero-trust-marks b{
  width:42px;height:42px;
  margin-left:-8px;
  display:grid;place-items:center;
  border-radius:50%;
  border:2px solid #08080b;
  background:linear-gradient(145deg,#32273b,#121217);
  color:#f4eaf8;
  font:700 9px/1 "Space Grotesk";
}
.hero-trust-marks span:first-child{margin-left:0}
.hero-trust-marks b{
  background:#7223ad;
  font-size:16px;
}
.hero-trust p{
  margin:0 !important;
  display:grid;
  gap:4px;
}
.hero-trust strong{
  color:#fff;
  font-size:13px;
}
.hero-trust small{
  color:#9f9aa4;
  font-size:12px;
}
.mastered-hero .hero-foot{
  display:none !important;
}

/* The form remains available, but no longer competes with the hero. */
.join-reconstructed{
  padding:88px 0;
  background:linear-gradient(155deg,#09080b,#110c15 52%,#08090b);
}
.join-reconstructed .hero-signup{
  width:min(100%,920px) !important;
  max-width:920px !important;
  margin:0 auto !important;
  display:grid !important;
  grid-template-columns:.8fr 1.2fr;
  gap:34px;
  padding:36px !important;
  border-radius:18px;
}
.join-reconstructed .hero-signup form{
  grid-column:2;
  grid-row:1 / span 5;
  align-self:center;
}
.join-reconstructed .hero-freebies{
  grid-column:1;
}

@media (max-width:900px){
  .mastered-hero{
    min-height:auto !important;
    height:auto !important;
    display:block !important;
    padding-top:calc(72px + env(safe-area-inset-top)) !important;
  }
  .mastered-hero .hero-photo{
    position:relative !important;
    height:clamp(390px,74vw,580px) !important;
    background-image:image-set(
      url('assets/tim-hero-reconstruction-mobile-640.webp') 1x,
      url('assets/tim-hero-reconstruction-mobile-900.webp') 2x
    ) !important;
    background-position:center 18% !important;
  }
  .mastered-hero .hero-shade{
    top:calc(72px + env(safe-area-inset-top)) !important;
    bottom:auto !important;
    height:clamp(390px,74vw,580px) !important;
    background:
      linear-gradient(0deg,#060609 0%,rgba(6,6,9,.42) 35%,transparent 65%),
      radial-gradient(circle at 70% 20%,rgba(149,59,215,.10),transparent 36%) !important;
  }
  .mastered-hero .hero-content{
    width:var(--shell) !important;
    padding:0 0 38px !important;
  }
  .mastered-hero .hero-copy{
    width:100% !important;
    margin-top:-28px !important;
    text-align:left !important;
  }
  .mastered-hero .hero-copy h1{
    font-size:clamp(45px,12.5vw,68px) !important;
  }
  .mastered-hero .hero-copy .hero-lead{
    font-size:16px !important;
  }
  .join-reconstructed .hero-signup{
    grid-template-columns:1fr !important;
  }
  .join-reconstructed .hero-signup form{
    grid-column:1 !important;
    grid-row:auto !important;
  }
}

@media (max-width:560px){
  .mastered-hero .hero-photo,
  .mastered-hero .hero-shade{
    height:360px !important;
  }
  .mastered-hero .hero-copy{
    margin-top:-18px !important;
  }
  .mastered-hero .hero-copy .eyebrow{
    font-size:10px !important;
  }
  .mastered-hero .hero-copy h1{
    font-size:clamp(42px,12vw,54px) !important;
  }
  .mastered-hero .hero-actions{
    display:grid !important;
    grid-template-columns:1fr !important;
  }
  .mastered-hero .hero-actions .btn{
    width:100%;
  }
  .hero-trust{
    align-items:flex-start;
  }
  .hero-trust-marks span,.hero-trust-marks b{
    width:36px;height:36px;
  }
  .join-reconstructed{
    padding:64px 0;
  }
  .join-reconstructed .hero-signup{
    padding:24px 18px !important;
  }
}


/* =========================================================
   RC 5.4 — INTEGRATED COMMUNITY HERO
   Restores Tim's conversion requirement while preserving
   the cinematic RC5.3 art direction.
   ========================================================= */

.hero-trust,
.hero-trust-marks{
  display:none !important;
}

@media (min-width:901px){
  .mastered-hero .hero-content{
    display:grid !important;
    grid-template-columns:minmax(0,560px) minmax(320px,390px) !important;
    column-gap:clamp(42px,5vw,88px) !important;
    row-gap:20px !important;
    align-items:end !important;
  }
  .mastered-hero .hero-copy{
    grid-column:1;
    grid-row:1;
    width:100% !important;
  }
  .mastered-hero .hero-signup-integrated{
    grid-column:2;
    grid-row:1;
    align-self:end;
    justify-self:end;
    width:100% !important;
    max-width:390px !important;
    margin:0 0 4px !important;
    padding:22px 22px 20px !important;
    border-radius:16px !important;
    border:1px solid rgba(255,255,255,.14) !important;
    background:linear-gradient(145deg,rgba(16,12,22,.84),rgba(7,10,15,.74)) !important;
    backdrop-filter:blur(18px);
    -webkit-backdrop-filter:blur(18px);
    box-shadow:0 28px 70px rgba(0,0,0,.38),inset 0 1px rgba(255,255,255,.045) !important;
  }
  .mastered-hero .hero-signup-integrated .hero-signup-kicker{
    margin-bottom:8px !important;
    color:#b44ceb !important;
    font-size:9px !important;
  }
  .mastered-hero .hero-signup-integrated h2{
    margin:0 0 8px !important;
    font-size:clamp(25px,2vw,31px) !important;
    line-height:1.02 !important;
  }
  .mastered-hero .hero-signup-integrated > p,
  .mastered-hero .hero-signup-integrated small,
  .mastered-hero .hero-signup-integrated .hero-freebies{
    display:none !important;
  }
  .mastered-hero .hero-signup-integrated form{
    display:grid !important;
    grid-template-columns:1fr !important;
    gap:8px !important;
    margin-top:12px !important;
  }
  .mastered-hero .hero-signup-integrated label span{
    display:none !important;
  }
  .mastered-hero .hero-signup-integrated input,
  .mastered-hero .hero-signup-integrated button{
    min-height:46px !important;
    border-radius:8px !important;
  }
  .mastered-hero .hero-signup-integrated button{
    background:linear-gradient(135deg,#a03de1,#7425b7) !important;
    color:#fff !important;
    border-color:#a54ce3 !important;
    box-shadow:0 12px 28px rgba(126,39,184,.24);
  }
  .hero-credentials{
    grid-column:1 / -1;
    grid-row:2;
    margin-top:4px;
    color:#aaa3af;
    font:600 10px/1.4 "Space Grotesk";
    letter-spacing:.16em;
    text-transform:uppercase;
  }
}

@media (max-width:900px){
  .mastered-hero .hero-content{
    display:flex !important;
    flex-direction:column !important;
    gap:18px !important;
  }
  .mastered-hero .hero-copy{order:1 !important}
  .mastered-hero .hero-signup-integrated{
    order:2 !important;
    width:100% !important;
    max-width:680px !important;
    margin:0 auto !important;
    padding:20px 18px !important;
    border-radius:16px !important;
    background:linear-gradient(145deg,rgba(20,14,27,.94),rgba(9,12,18,.92)) !important;
    box-shadow:0 24px 60px rgba(0,0,0,.32) !important;
  }
  .mastered-hero .hero-signup-integrated > p,
  .mastered-hero .hero-signup-integrated small,
  .mastered-hero .hero-signup-integrated .hero-freebies{
    display:none !important;
  }
  .mastered-hero .hero-signup-integrated h2{
    font-size:clamp(24px,6.7vw,34px) !important;
    margin-bottom:8px !important;
  }
  .mastered-hero .hero-signup-integrated form{
    display:grid !important;
    grid-template-columns:1fr 1fr !important;
    gap:8px !important;
    margin-top:12px !important;
  }
  .mastered-hero .hero-signup-integrated button{
    grid-column:1 / -1 !important;
    min-height:48px !important;
    border-radius:9px !important;
    background:linear-gradient(135deg,#a03de1,#7425b7) !important;
    color:#fff !important;
  }
  .hero-credentials{
    order:3;
    margin-top:0;
    color:#9f98a4;
    font:600 9px/1.55 "Space Grotesk";
    letter-spacing:.13em;
    text-align:center;
  }
}

@media (max-width:560px){
  .mastered-hero .hero-signup-integrated{
    padding:18px 15px !important;
  }
  .mastered-hero .hero-signup-integrated form{
    grid-template-columns:1fr !important;
  }
  .mastered-hero .hero-signup-integrated form > *{
    grid-column:1 !important;
  }
  .hero-credentials{padding-inline:8px}
}


/* =========================================================
   RC 6 — HERO MASTER EDITION
   Proven RC5.1 conversion layout + RC5.3 cinematic art direction.
   Form on the left, approved original copy beside it, Tim and the
   studio left visually unobstructed on the right.
   ========================================================= */

@media (min-width:901px){
  .mastered-hero{
    min-height:820px !important;
    height:min(940px,100svh) !important;
  }

  .mastered-hero .hero-photo{
    background-position:center center !important;
  }

  .mastered-hero .hero-shade{
    background:
      linear-gradient(90deg,rgba(2,2,4,.96) 0%,rgba(2,2,4,.86) 26%,rgba(2,2,4,.56) 47%,rgba(2,2,4,.16) 67%,rgba(2,2,4,.02) 84%),
      linear-gradient(0deg,rgba(3,3,6,.82) 0%,transparent 28%),
      radial-gradient(circle at 77% 24%,rgba(143,54,204,.12),transparent 31%) !important;
  }

  .mastered-hero .hero-content{
    width:var(--shell) !important;
    display:grid !important;
    grid-template-columns:minmax(320px,390px) minmax(430px,570px) minmax(120px,1fr) !important;
    column-gap:clamp(34px,4vw,72px) !important;
    align-items:end !important;
    padding-top:150px !important;
    padding-bottom:102px !important;
  }

  /* Form deliberately first and furthest left. */
  .mastered-hero .hero-signup-integrated{
    grid-column:1 !important;
    grid-row:1 !important;
    justify-self:start !important;
    align-self:end !important;
    width:100% !important;
    max-width:390px !important;
    margin:0 !important;
    padding:24px 24px 22px !important;
    border-radius:16px !important;
    background:linear-gradient(145deg,rgba(15,12,21,.86),rgba(7,9,14,.76)) !important;
    border:1px solid rgba(255,255,255,.14) !important;
    box-shadow:0 28px 72px rgba(0,0,0,.38),inset 0 1px rgba(255,255,255,.045) !important;
    backdrop-filter:blur(18px);
    -webkit-backdrop-filter:blur(18px);
  }

  .mastered-hero .hero-signup-integrated .hero-signup-kicker{
    color:#b44ceb !important;
    margin-bottom:10px !important;
  }

  .mastered-hero .hero-signup-integrated h2{
    margin:0 0 10px !important;
    font-size:clamp(26px,2vw,32px) !important;
  }

  .mastered-hero .hero-signup-integrated > p{
    display:block !important;
    margin:0 0 14px !important;
    color:#bbb4c0 !important;
    font-size:13px !important;
    line-height:1.5 !important;
  }

  .mastered-hero .hero-signup-integrated form{
    display:grid !important;
    grid-template-columns:1fr !important;
    gap:9px !important;
    margin-top:0 !important;
  }

  .mastered-hero .hero-signup-integrated label span{
    display:none !important;
  }

  .mastered-hero .hero-signup-integrated input,
  .mastered-hero .hero-signup-integrated button{
    min-height:47px !important;
    border-radius:8px !important;
  }

  .mastered-hero .hero-signup-integrated button{
    background:linear-gradient(135deg,#a03de1,#7425b7) !important;
    color:#fff !important;
    border-color:#a54ce3 !important;
  }

  .mastered-hero .hero-signup-integrated small,
  .mastered-hero .hero-signup-integrated .hero-freebies{
    display:none !important;
  }

  /* Approved original text sits beside the form, not over Tim. */
  .mastered-hero .hero-copy{
    grid-column:2 !important;
    grid-row:1 !important;
    width:100% !important;
    max-width:570px !important;
    margin:0 !important;
    align-self:end !important;
    text-align:left !important;
  }

  .mastered-hero .hero-copy .eyebrow{
    color:#c28be0 !important;
    font:700 11px/1.35 "Space Grotesk" !important;
    letter-spacing:.17em !important;
    margin:0 0 18px !important;
  }

  .mastered-hero .hero-copy h1{
    margin:0 0 24px !important;
    color:#fff !important;
    font:600 clamp(50px,4.5vw,76px)/.94 "Space Grotesk" !important;
    letter-spacing:-.052em !important;
    text-transform:none !important;
  }

  .mastered-hero .hero-copy h1 em{
    font-family:"Newsreader" !important;
    font-style:italic !important;
    font-weight:400 !important;
    color:#c38be2 !important;
  }

  .mastered-hero .hero-copy .hero-lead{
    max-width:545px !important;
    margin:0 !important;
    color:#ddd9e0 !important;
    font-size:17px !important;
    line-height:1.6 !important;
  }

  .mastered-hero .hero-actions{
    display:flex !important;
    gap:13px !important;
    margin:28px 0 0 !important;
  }

  .mastered-hero .hero-actions .btn{
    min-height:54px !important;
    padding:0 22px !important;
    border-radius:4px !important;
  }

  .mastered-hero .hero-actions .btn.primary{
    background:linear-gradient(135deg,#a03de1,#7425b7) !important;
    color:#fff !important;
    border-color:#a54ce3 !important;
  }

  .mastered-hero .hero-actions .btn.ghost{
    background:rgba(5,5,8,.5) !important;
    border-color:rgba(255,255,255,.38) !important;
  }

  .hero-credentials{
    display:none !important;
  }
}

@media (max-width:900px){
  .mastered-hero .hero-content{
    display:flex !important;
    flex-direction:column !important;
    gap:18px !important;
  }

  .mastered-hero .hero-copy{
    order:1 !important;
    width:100% !important;
  }

  .mastered-hero .hero-copy .eyebrow{
    color:#c28be0 !important;
  }

  .mastered-hero .hero-copy h1{
    text-transform:none !important;
    font-size:clamp(43px,11.5vw,66px) !important;
  }

  .mastered-hero .hero-copy h1 em{
    font-family:"Newsreader" !important;
    font-style:italic !important;
    color:#c38be2 !important;
  }

  .mastered-hero .hero-signup-integrated{
    order:2 !important;
    width:100% !important;
    max-width:680px !important;
    margin:0 auto !important;
  }

  .mastered-hero .hero-signup-integrated > p{
    display:block !important;
  }

  .hero-credentials{
    display:none !important;
  }
}

@media (max-width:560px){
  .mastered-hero .hero-copy h1{
    font-size:clamp(40px,11.8vw,54px) !important;
  }

  .mastered-hero .hero-actions{
    display:grid !important;
    grid-template-columns:1fr !important;
  }

  .mastered-hero .hero-actions .btn{
    width:100% !important;
  }
}


/* =========================================================
   RC 6.1 — MOBILE CONVERSION REFINEMENT
   Desktop remains locked. Mobile gets a compact, immediate
   signup card that preserves the hero photography.
   ========================================================= */

.hero-signup-mobile{
  display:none;
}

.join-anchor{
  position:absolute;
  top:0;
  left:0;
  width:1px;
  height:1px;
  pointer-events:none;
}

@media (max-width:900px){
  /* Keep the approved desktop implementation completely untouched. */
  .mastered-hero .hero-signup-desktop{
    display:none !important;
  }

  .mastered-hero .hero-content{
    gap:14px !important;
    padding-bottom:38px !important;
  }

  .mastered-hero .hero-copy{
    order:1 !important;
  }

  .mastered-hero .hero-signup-mobile{
    display:block;
    order:2;
    width:min(100%,680px);
    margin:0 auto;
    padding:16px 16px 15px;
    border:1px solid rgba(255,255,255,.13);
    border-radius:15px;
    background:
      linear-gradient(145deg,rgba(19,14,26,.88),rgba(8,10,15,.82));
    box-shadow:
      0 20px 54px rgba(0,0,0,.3),
      inset 0 1px rgba(255,255,255,.04);
    backdrop-filter:blur(16px);
    -webkit-backdrop-filter:blur(16px);
  }

  .mastered-hero .hero-signup-mobile .hero-signup-kicker{
    display:block;
    margin:0 0 6px;
    color:#c28be0;
    font:700 9px/1.35 "Space Grotesk";
    letter-spacing:.16em;
  }

  .mastered-hero .hero-signup-mobile h2{
    margin:0 0 7px;
    color:#fff;
    font:600 clamp(25px,7vw,32px)/1 "Space Grotesk";
    letter-spacing:-.035em;
  }

  .mastered-hero .hero-signup-mobile > p{
    max-width:560px;
    margin:0 0 12px;
    color:#c9c4cc;
    font-size:12.5px;
    line-height:1.48;
  }

  .mastered-hero .hero-signup-mobile form{
    display:grid;
    grid-template-columns:minmax(0,1fr) auto;
    gap:8px;
    margin:0;
  }

  .mastered-hero .hero-signup-mobile label{
    min-width:0;
  }

  .mastered-hero .hero-signup-mobile label span{
    position:absolute;
    width:1px;
    height:1px;
    padding:0;
    margin:-1px;
    overflow:hidden;
    clip:rect(0,0,0,0);
    white-space:nowrap;
    border:0;
  }

  .mastered-hero .hero-signup-mobile input,
  .mastered-hero .hero-signup-mobile button{
    width:100%;
    min-height:46px;
    border-radius:9px;
  }

  .mastered-hero .hero-signup-mobile input{
    padding:0 14px;
    color:#fff;
    border:1px solid rgba(255,255,255,.16);
    background:rgba(3,4,7,.64);
  }

  .mastered-hero .hero-signup-mobile button{
    width:auto;
    padding:0 16px;
    color:#fff;
    border:1px solid #a54ce3;
    background:linear-gradient(135deg,#a03de1,#7425b7);
    box-shadow:0 10px 24px rgba(126,39,184,.2);
    white-space:nowrap;
  }

  .mastered-hero .hero-signup-mobile .form-status{
    grid-column:1 / -1;
    min-height:0;
    color:#c9c4cc;
    font-size:11px;
  }

  /* Slightly tighten the copy so the card appears immediately
     without turning the photo into a background afterthought. */
  .mastered-hero .hero-copy .eyebrow{
    margin-bottom:11px !important;
  }

  .mastered-hero .hero-copy h1{
    margin-bottom:15px !important;
  }

  .mastered-hero .hero-copy .hero-lead{
    margin-bottom:0 !important;
    font-size:15px !important;
    line-height:1.48 !important;
  }

  .mastered-hero .hero-actions{
    margin-top:17px !important;
  }
}

@media (max-width:560px){
  .mastered-hero .hero-content{
    padding-top:105px !important;
  }

  .mastered-hero .hero-signup-mobile{
    padding:14px;
  }

  .mastered-hero .hero-signup-mobile > p{
    font-size:12px;
    line-height:1.42;
  }

  .mastered-hero .hero-signup-mobile form{
    grid-template-columns:1fr;
  }

  .mastered-hero .hero-signup-mobile button{
    width:100%;
  }

  .mastered-hero .hero-actions{
    grid-template-columns:1fr 1fr !important;
    gap:8px !important;
  }

  .mastered-hero .hero-actions .btn{
    min-height:47px !important;
    padding-inline:10px !important;
    font-size:11px !important;
  }
}

@media (max-width:390px){
  .mastered-hero .hero-actions{
    grid-template-columns:1fr !important;
  }
}


/* =========================================================
   RC7 — CLEAN DUAL HERO ARCHITECTURE
   ========================================================= */
.site-top-anchor{position:absolute;top:0;left:0;width:1px;height:1px}
.mobile-master-hero{display:none}

@media (min-width:901px){
  .desktop-master-hero{display:flex !important}
}

@media (max-width:900px){
  .desktop-master-hero{display:none !important}

  .mobile-master-hero{
    position:relative;
    display:block;
    min-height:100svh;
    overflow:hidden;
    isolation:isolate;
    background:#08080b;
  }

  .mobile-master-photo{
    position:absolute;
    inset:0;
    z-index:0;
    background-image:image-set(
      url('assets/tim-hero-reconstruction-mobile-640.webp') 1x,
      url('assets/tim-hero-reconstruction-mobile-900.webp') 2x
    );
    background-repeat:no-repeat;
    background-size:cover;
    background-position:center center;
  }

  .mobile-master-gradient{
    position:absolute;
    inset:0;
    z-index:1;
    pointer-events:none;
    background:
      linear-gradient(180deg,rgba(5,5,8,.05) 0%,rgba(5,5,8,.12) 34%,rgba(5,5,8,.48) 62%,rgba(5,5,8,.88) 100%),
      linear-gradient(90deg,rgba(5,5,8,.5) 0%,rgba(5,5,8,.12) 72%,rgba(5,5,8,.02) 100%);
  }

  .mobile-master-content{
    position:relative;
    z-index:2;
    display:flex;
    flex-direction:column;
    justify-content:flex-end;
    min-height:100svh;
    padding-top:112px;
    padding-bottom:34px;
  }

  .mobile-master-copy{
    width:100%;
    max-width:650px;
    color:#fff;
    background:none;
    box-shadow:none;
    text-shadow:0 2px 20px rgba(0,0,0,.58);
  }

  .mobile-master-copy .eyebrow{
    margin:0 0 12px;
    color:#c98be4;
    font:700 10px/1.35 "Space Grotesk";
    letter-spacing:.16em;
  }

  .mobile-master-copy h1{
    margin:0 0 14px;
    color:#fff;
    font:600 clamp(40px,11vw,61px)/.96 "Space Grotesk";
    letter-spacing:-.052em;
    text-transform:none;
  }

  .mobile-master-copy h1 em{
    color:#c992e5;
    font-family:"Newsreader";
    font-style:italic;
    font-weight:400;
  }

  .mobile-master-copy > p:last-child{
    max-width:590px;
    margin:0;
    color:#eeeaf0;
    font-size:15px;
    line-height:1.48;
  }

  .mobile-master-signup{
    width:100%;
    max-width:650px;
    margin-top:16px;
    padding:15px;
    border:1px solid rgba(255,255,255,.14);
    border-radius:15px;
    background:linear-gradient(145deg,rgba(20,15,27,.84),rgba(8,10,15,.78));
    box-shadow:0 18px 48px rgba(0,0,0,.28);
    backdrop-filter:blur(14px);
    -webkit-backdrop-filter:blur(14px);
  }

  .mobile-master-signup > span{
    display:block;
    margin-bottom:5px;
    color:#c28be0;
    font:700 9px/1.35 "Space Grotesk";
    letter-spacing:.16em;
  }

  .mobile-master-signup h2{
    margin:0 0 6px;
    color:#fff;
    font:600 27px/1 "Space Grotesk";
    letter-spacing:-.035em;
  }

  .mobile-master-signup > p{
    margin:0 0 11px;
    color:#cdc7d0;
    font-size:12px;
    line-height:1.42;
  }

  .mobile-master-signup form{
    display:grid;
    grid-template-columns:minmax(0,1fr) auto;
    gap:8px;
  }

  .mobile-master-signup label span{
    position:absolute;
    width:1px;
    height:1px;
    overflow:hidden;
    clip:rect(0 0 0 0);
    white-space:nowrap;
  }

  .mobile-master-signup input,
  .mobile-master-signup button{
    min-height:46px;
    border-radius:9px;
  }

  .mobile-master-signup input{
    width:100%;
    padding:0 13px;
    color:#fff;
    border:1px solid rgba(255,255,255,.16);
    background:rgba(3,4,7,.62);
  }

  .mobile-master-signup button{
    padding:0 15px;
    color:#fff;
    white-space:nowrap;
    border:1px solid #a54ce3;
    background:linear-gradient(135deg,#a03de1,#7425b7);
  }

  .mobile-master-signup .form-status{
    grid-column:1/-1;
    color:#c9c4cc;
    font-size:11px;
  }
}

@media (max-width:560px){
  .mobile-master-photo{background-position:center center}
  .mobile-master-content{padding-top:96px;padding-bottom:24px}
  .mobile-master-copy h1{font-size:clamp(38px,11.2vw,50px)}
  .mobile-master-copy > p:last-child{font-size:14px;line-height:1.44}
  .mobile-master-signup form{grid-template-columns:1fr}
  .mobile-master-signup button{width:100%}
}

@media (max-width:390px){
  .mobile-master-content{padding-top:90px}
  .mobile-master-copy h1{font-size:37px}
}


/* =========================================================
   RC7.2 — CORRECT RECONSTRUCTED MOBILE HERO
   Mobile now uses the dedicated responsive reconstruction
   assets from the same art-directed hero family as desktop.
   ========================================================= */
@media (max-width:900px){
  .mobile-master-photo{
    background-image:image-set(
      url('assets/tim-hero-reconstruction-mobile-640.webp') 1x,
      url('assets/tim-hero-reconstruction-mobile-900.webp') 2x
    ) !important;
    background-position:center center;
  }
}

@media (max-width:560px){
  .mobile-master-photo{
    background-position:center center;
  }
}

/* =========================================================
   RC7.2.1 — MOBILE SPACING POLISH
   Mobile-only rhythm refinements. Desktop is intentionally
   frozen and receives no layout or visual changes.
   ========================================================= */
@media (max-width:900px){
  /* Keep the opening composition full-screen, but remove surplus
     space around the copy and conversion card. */
  .mobile-master-content{
    padding-top:96px;
    padding-bottom:22px;
  }
  .mobile-master-signup{margin-top:13px}

  /* Reduce oversized black transitions between editorial scenes. */
  .section,
  .signal-method,
  .signal-notes{
    padding-block:58px !important;
  }
  .section-head,
  .method-intro{
    margin-bottom:29px !important;
  }
  .hero-intro{
    padding-top:32px !important;
    padding-bottom:42px !important;
  }
  .testimonials-v31{
    padding-top:70px !important;
    padding-bottom:70px !important;
  }
  .signature-epilogue{
    padding-top:64px !important;
    padding-bottom:64px !important;
  }
  .footer{padding-top:36px !important}
}

@media (max-width:560px){
  .mobile-master-content{
    padding-top:84px;
    padding-bottom:18px;
  }
  .mobile-master-copy .eyebrow{margin-bottom:9px}
  .mobile-master-copy h1{margin-bottom:11px}
  .mobile-master-signup{
    margin-top:11px;
    padding:14px;
  }

  .section,
  .signal-method,
  .signal-notes{
    padding-block:50px !important;
  }
  .section-head,
  .method-intro{
    margin-bottom:25px !important;
  }
  .hero-intro{
    padding-top:24px !important;
    padding-bottom:34px !important;
  }
  .testimonials-v31{
    padding-top:58px !important;
    padding-bottom:58px !important;
  }
  .instrument-copy{
    padding-top:36px !important;
    padding-bottom:27px !important;
  }
  .studio-note{
    padding-top:14px !important;
    padding-bottom:29px !important;
  }
  .creative-epilogue-inner{
    gap:27px !important;
    padding-bottom:22px !important;
  }
  .signature-epilogue-inner{
    padding-top:44px !important;
    padding-bottom:50px !important;
  }
  .signature-trace{
    margin-top:1.6rem !important;
    margin-bottom:1.45rem !important;
  }
  .footer{padding-top:29px !important}
}

@media (max-width:390px){
  .mobile-master-content{
    padding-top:80px;
    padding-bottom:16px;
  }
  .section,
  .signal-method,
  .signal-notes{
    padding-block:46px !important;
  }
  .signature-epilogue-inner{
    padding-top:40px !important;
    padding-bottom:46px !important;
  }
}


/* RC7.2.2 — CTA reliability and philosophy content refinement */
.philosophy-panel h3{margin:0 0 22px}
.philosophy-panel .philosophy-statement{font:500 clamp(24px,3.2vw,42px)/1.18 "Space Grotesk";letter-spacing:-.035em;color:#f1ece8;max-width:980px;margin:0 0 24px}
.hero-signup button:disabled,.mobile-master-signup button:disabled{cursor:default;opacity:.88}
.mobile-master-signup{scroll-margin-top:88px}
.hero-signup-desktop{scroll-margin-top:120px}
@media(max-width:900px){.philosophy-panel .philosophy-statement{font-size:clamp(23px,7vw,32px);line-height:1.18}.philosophy-panel{padding:28px 22px}}

/* RC7.3 — Philosophy Quote Wall */
.philosophy-quote-wall{
  margin-top:clamp(26px,4vw,54px);
  display:grid;
  grid-template-columns:minmax(0,.92fr) minmax(420px,1.08fr);
  min-height:clamp(620px,54vw,820px);
  overflow:hidden;
  border-top:1px solid rgba(255,255,255,.10);
  border-bottom:1px solid rgba(255,255,255,.10);
  background:#090909;
  isolation:isolate;
}
.philosophy-copy{
  grid-column:1;
  grid-row:1;
  position:relative;
  z-index:2;
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding:clamp(42px,6vw,88px) clamp(28px,5vw,76px);
  background:linear-gradient(90deg,#090909 0%,rgba(9,9,9,.98) 76%,rgba(9,9,9,.74) 100%);
}
.philosophy-visual{
  grid-column:2;
  grid-row:1;
  position:relative;
  min-width:0;
  overflow:hidden;
}
.philosophy-visual:after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:linear-gradient(90deg,rgba(9,9,9,.62) 0%,rgba(9,9,9,.08) 25%,rgba(9,9,9,0) 54%),linear-gradient(0deg,rgba(5,5,5,.2),transparent 35%);
}
.philosophy-visual picture,.philosophy-visual img{display:block;width:100%;height:100%}
.philosophy-visual img{
  object-fit:cover;
  object-position:50% center;
  filter:saturate(.72) contrast(1.06) brightness(.86);
  transform:scale(1.015);
}
.philosophy-kicker{
  margin:0 0 clamp(30px,4vw,54px);
  color:#d9a43b;
  font:600 12px/1.2 "Space Grotesk";
  letter-spacing:.26em;
  text-transform:uppercase;
}
.philosophy-kicker:after{content:"";display:block;width:72px;height:2px;margin-top:18px;background:#d9a43b}
.philosophy-copy blockquote{margin:0;padding:0;max-width:700px}
.philosophy-quote{display:block;font:500 clamp(36px,4.15vw,66px)/1.03 "Space Grotesk";letter-spacing:-.052em}
.philosophy-quote-light{color:#f4f0eb}
.philosophy-quote-accent{color:#d9a43b;margin-top:clamp(26px,3.2vw,44px)}
.philosophy-body{
  margin:clamp(28px,3.4vw,48px) 0 0;
  padding-top:clamp(24px,2.7vw,38px);
  max-width:610px;
  border-top:1px solid rgba(217,164,59,.34);
  color:#c5bdb6;
  font-size:clamp(16px,1.25vw,19px);
  line-height:1.65;
}
.philosophy-signature{margin:clamp(28px,3vw,42px) 0 0;color:#eee7df;font:500 15px/1.3 "Space Grotesk";letter-spacing:.02em}
.philosophy-signature small{display:block;margin-top:7px;color:#9f948b;font-size:10px;letter-spacing:.17em;text-transform:uppercase}

@media(max-width:900px){
  .philosophy-quote-wall{display:flex;flex-direction:column;min-height:0;margin-inline:calc((100vw - var(--shell))/ -2);border:0}
  .philosophy-visual{order:1;width:100%;height:clamp(360px,112vw,620px)}
  .philosophy-visual img{object-position:50% center;transform:none}
  .philosophy-visual:after{background:linear-gradient(0deg,#090909 0%,rgba(9,9,9,.15) 34%,transparent 66%)}
  .philosophy-copy{order:2;padding:34px max(22px,calc((100vw - var(--shell))/2)) 46px;background:#090909}
  .philosophy-kicker{margin-bottom:30px}
  .philosophy-copy blockquote{max-width:none}
  .philosophy-quote{font-size:clamp(34px,10.5vw,52px);line-height:1.04}
  .philosophy-quote-accent{margin-top:24px}
  .philosophy-body{font-size:16px;margin-top:30px;padding-top:26px}
}
@media(max-width:560px){
  .philosophy-visual{height:118vw;max-height:560px;min-height:400px}
  .philosophy-copy{padding-top:28px;padding-bottom:40px}
  .philosophy-kicker{font-size:11px}
  .philosophy-quote{font-size:clamp(31px,10vw,43px)}
}

/* =========================================================
   RC10 — EDITORIAL HERO ARCHITECTURE
   Navigation and photography are separate layers. The header
   never overlaps Tim; desktop uses one 16:9 hero canvas and
   mobile shows the complete original portrait before copy/form.
   ========================================================= */
@media (min-width:901px){
  body{padding-top:0}
  .nav{
    position:relative!important;
    top:auto!important;left:auto!important;transform:none!important;
    width:100%!important;max-width:none!important;height:96px!important;
    padding-inline:max(28px,calc((100vw - 1160px)/2))!important;
    background:#08070b!important;border-bottom:1px solid rgba(255,255,255,.09)!important;
    backdrop-filter:none!important;z-index:50!important;
  }
  .desktop-master-hero{
    height:calc(100svh - 96px)!important;min-height:760px!important;
    align-items:stretch!important;background:#08070b!important;
  }
  .desktop-master-hero .hero-photo{
    inset:0!important;position:absolute!important;width:100%!important;height:100%!important;
    background-image:url('assets/tim-rc10-desktop.webp')!important;
    background-size:cover!important;background-position:center center!important;
    transform:none!important;filter:none!important;
  }
  .desktop-master-hero .hero-shade{
    inset:0!important;height:100%!important;
    background:
      linear-gradient(90deg,rgba(5,4,8,.84) 0%,rgba(5,4,8,.48) 24%,rgba(5,4,8,.06) 45%,rgba(5,4,8,.04) 61%,rgba(5,4,8,.48) 82%,rgba(5,4,8,.72) 100%),
      linear-gradient(0deg,rgba(5,4,8,.84) 0%,transparent 25%,rgba(5,4,8,.08) 72%,rgba(5,4,8,.32) 100%)!important;
  }
  .desktop-master-hero .hero-cinema,.desktop-master-hero .signal-glyph,.desktop-master-hero:after{display:none!important}
  .desktop-master-hero .hero-content{
    width:min(1420px,calc(100vw - 72px))!important;height:100%!important;
    padding:clamp(70px,8vh,112px) 0 clamp(54px,7vh,88px)!important;
    display:grid!important;grid-template-columns:minmax(430px,.78fr) minmax(360px,.62fr)!important;
    justify-content:space-between!important;align-items:center!important;gap:clamp(250px,26vw,520px)!important;
  }
  .desktop-master-hero .hero-copy{max-width:560px!important;align-self:center!important}
  .desktop-master-hero .hero-copy h1{font-size:clamp(58px,5.4vw,92px)!important;line-height:.92!important;margin:15px 0 24px!important}
  .desktop-master-hero .hero-copy .hero-lead{max-width:500px!important;font-size:17px!important}
  .desktop-master-hero .hero-signup-desktop{
    width:min(390px,100%)!important;align-self:center!important;justify-self:end!important;
    margin:90px 0 0!important;padding:26px!important;
    background:linear-gradient(145deg,rgba(14,12,19,.94),rgba(9,8,13,.9))!important;
    border:1px solid rgba(255,255,255,.15)!important;box-shadow:0 30px 90px rgba(0,0,0,.48)!important;
  }
  .desktop-master-hero .hero-foot{display:none!important}
}

@media (max-width:900px){
  .nav{position:relative!important;top:auto!important;background:#08070b!important;z-index:30!important}
  .desktop-master-hero{display:none!important}
  .mobile-master-hero{display:block!important;background:#08070b!important;min-height:0!important}
  .mobile-master-photo{
    position:relative!important;inset:auto!important;width:100%!important;
    height:auto!important;aspect-ratio:4/3!important;min-height:0!important;max-height:none!important;
    background-image:url('assets/tim-rc10-mobile.webp')!important;
    background-size:contain!important;background-repeat:no-repeat!important;background-position:center center!important;
    filter:none!important;
  }
  .mobile-master-gradient{display:none!important}
  .mobile-master-content{position:relative!important;padding-top:34px!important;background:#08070b!important}
  .mobile-master-copy h1{font-size:clamp(42px,12vw,68px)!important}
  .mobile-master-signup{margin-top:24px!important}
}

/* =========================================================
   RC10.1 — EDITORIAL BALANCE
   Natural left-to-right reading flow: headline → Tim → form.
   Form content is unchanged; only positioning and presentation
   are refined to integrate it into the photography.
   ========================================================= */
@media (min-width:901px){
  .desktop-master-hero .hero-content{
    width:min(1460px,calc(100vw - 96px))!important;
    grid-template-columns:minmax(420px,540px) minmax(330px,382px)!important;
    justify-content:space-between!important;
    align-items:center!important;
    gap:clamp(300px,30vw,560px)!important;
    padding-top:clamp(54px,6vh,84px)!important;
    padding-bottom:clamp(46px,6vh,76px)!important;
  }

  .desktop-master-hero .hero-copy{
    grid-column:1!important;
    order:1!important;
    justify-self:start!important;
    align-self:center!important;
    max-width:540px!important;
    margin:0!important;
    padding:0!important;
    text-align:left!important;
  }
  .desktop-master-hero .hero-copy .eyebrow{
    margin-bottom:16px!important;
  }
  .desktop-master-hero .hero-copy h1{
    max-width:8.8em!important;
    margin:0 0 25px!important;
    font-size:clamp(54px,4.75vw,78px)!important;
    line-height:.94!important;
    letter-spacing:-.052em!important;
  }
  .desktop-master-hero .hero-copy .hero-lead{
    max-width:470px!important;
    margin:0!important;
    font-size:16px!important;
    line-height:1.62!important;
    color:rgba(245,239,234,.88)!important;
  }

  .desktop-master-hero .hero-signup-desktop{
    grid-column:2!important;
    order:2!important;
    justify-self:end!important;
    align-self:center!important;
    width:min(372px,100%)!important;
    margin:clamp(82px,10vh,128px) 0 0!important;
    padding:25px 25px 23px!important;
    border-radius:18px!important;
    background:linear-gradient(145deg,rgba(20,16,25,.78),rgba(10,9,14,.72))!important;
    border:1px solid rgba(255,255,255,.16)!important;
    box-shadow:0 22px 60px rgba(0,0,0,.32),inset 0 1px 0 rgba(255,255,255,.05)!important;
    backdrop-filter:blur(18px) saturate(112%)!important;
    -webkit-backdrop-filter:blur(18px) saturate(112%)!important;
  }
  .desktop-master-hero .hero-signup-desktop h2{
    font-size:clamp(25px,2vw,31px)!important;
    line-height:1.02!important;
    margin:9px 0 14px!important;
  }
  .desktop-master-hero .hero-signup-desktop>p{
    margin:0 0 16px!important;
    font-size:13px!important;
    line-height:1.5!important;
    color:rgba(239,232,227,.74)!important;
  }
  .desktop-master-hero .hero-signup-desktop form{
    gap:9px!important;
  }
  .desktop-master-hero .hero-signup-desktop input{
    min-height:45px!important;
    padding:12px 14px!important;
    background:rgba(5,4,8,.54)!important;
    border-color:rgba(255,255,255,.14)!important;
  }
  .desktop-master-hero .hero-signup-desktop button{
    min-height:46px!important;
  }
  .desktop-master-hero .hero-signup-desktop form small{
    margin-top:2px!important;
    opacity:.72!important;
  }
  .desktop-master-hero .hero-signup-desktop .hero-freebies{
    margin-top:16px!important;
    padding-top:14px!important;
  }
}

@media (min-width:901px) and (max-width:1250px){
  .desktop-master-hero .hero-content{
    width:calc(100vw - 56px)!important;
    grid-template-columns:minmax(360px,470px) minmax(310px,350px)!important;
    gap:clamp(210px,23vw,350px)!important;
  }
  .desktop-master-hero .hero-copy h1{
    font-size:clamp(48px,4.8vw,66px)!important;
  }
  .desktop-master-hero .hero-signup-desktop{
    margin-top:70px!important;
  }
}

/* =========================================================
   RC10.2 — MOBILE-FIRST SIGNUP PRIORITY
   Mobile only. Desktop/laptop RC10.1 is intentionally frozen.
   The existing mobile form now appears immediately after the
   hero photography and before the editorial copy, with a subtle
   overlap so it remains visible in the opening viewport.
   ========================================================= */
@media (max-width:900px){
  .mobile-master-content{
    display:flex!important;
    flex-direction:column!important;
    min-height:0!important;
    padding-top:0!important;
    padding-bottom:34px!important;
    overflow:visible!important;
  }

  .mobile-master-signup{
    order:1!important;
    position:relative!important;
    z-index:4!important;
    width:100%!important;
    max-width:650px!important;
    margin:-68px auto 24px!important;
    padding:18px!important;
    border-radius:17px!important;
    background:linear-gradient(145deg,rgba(24,17,30,.94),rgba(10,10,16,.93))!important;
    border:1px solid rgba(255,255,255,.16)!important;
    box-shadow:0 22px 58px rgba(0,0,0,.38),inset 0 1px 0 rgba(255,255,255,.05)!important;
    backdrop-filter:blur(16px) saturate(112%)!important;
    -webkit-backdrop-filter:blur(16px) saturate(112%)!important;
  }

  .mobile-master-copy{
    order:2!important;
    width:100%!important;
    margin:0!important;
    padding:0!important;
  }

  .mobile-master-signup > span{margin-bottom:5px!important}
  .mobile-master-signup h2{margin-bottom:6px!important}
  .mobile-master-signup > p{margin-bottom:12px!important}
  .mobile-master-signup form{margin-top:0!important}
}

@media (max-width:560px){
  .mobile-master-signup{
    margin-top:-52px!important;
    margin-bottom:21px!important;
    padding:16px!important;
  }
  .mobile-master-signup h2{font-size:clamp(25px,7.4vw,32px)!important}
  .mobile-master-signup > p{font-size:12px!important;line-height:1.42!important}
  .mobile-master-content{padding-bottom:28px!important}
}

@media (max-width:390px){
  .mobile-master-signup{
    margin-top:-44px!important;
    padding:15px!important;
  }
}

/* =========================================================
   RC10.3 — STICKY PRIMARY HEADER
   Keeps the brand, menu and Join CTA available while scrolling
   without changing the approved desktop or mobile hero layout.
   ========================================================= */
.nav{
  position:sticky!important;
  top:0!important;
  left:auto!important;
  transform:none!important;
  z-index:1000!important;
  width:100%!important;
  background:rgba(8,7,11,.94)!important;
  border-bottom:1px solid rgba(255,255,255,.09)!important;
  backdrop-filter:blur(16px) saturate(125%)!important;
  -webkit-backdrop-filter:blur(16px) saturate(125%)!important;
  box-shadow:0 8px 28px rgba(0,0,0,.22)!important;
}
.nav.nav-hidden{
  transform:none!important;
}
@media (max-width:900px){
  .nav{
    position:sticky!important;
    top:0!important;
    height:calc(72px + env(safe-area-inset-top))!important;
  }
}


/* =========================================================
   RC10.4 — MOBILE HEADER + FORM COMPLETENESS
   Mobile-only maintenance release. Desktop remains frozen.
   Uses fixed positioning on mobile for reliable Safari/iOS
   behaviour and restores the First name field above email.
   ========================================================= */
@media (max-width:900px){
  html,body{
    overflow-x:clip!important;
  }
  .nav{
    position:fixed!important;
    inset:0 0 auto 0!important;
    top:0!important;
    left:0!important;
    right:0!important;
    width:100%!important;
    max-width:none!important;
    margin:0!important;
    transform:none!important;
    z-index:9999!important;
    height:calc(72px + env(safe-area-inset-top))!important;
    padding-top:env(safe-area-inset-top)!important;
    padding-left:max(18px,env(safe-area-inset-left))!important;
    padding-right:max(18px,env(safe-area-inset-right))!important;
    background:rgba(8,7,11,.96)!important;
    border-bottom:1px solid rgba(255,255,255,.10)!important;
    box-shadow:0 8px 28px rgba(0,0,0,.28)!important;
    backdrop-filter:blur(18px) saturate(130%)!important;
    -webkit-backdrop-filter:blur(18px) saturate(130%)!important;
  }
  .nav.nav-hidden{
    transform:none!important;
  }
  main{
    padding-top:calc(72px + env(safe-area-inset-top))!important;
  }
  .mobile-master-signup form{
    display:grid!important;
    gap:10px!important;
  }
  .mobile-master-signup form label{
    display:grid!important;
    gap:6px!important;
  }
}

/* =========================================================
   RC10.5 — WHATSAPP CONCIERGE
   Branded direct-contact layer. No third-party widget or AI.
   ========================================================= */
.wa-concierge{position:fixed;right:24px;bottom:24px;z-index:12000;font-family:inherit}
.wa-concierge-trigger{display:flex;align-items:center;gap:11px;min-width:220px;padding:9px 13px 9px 9px;border:1px solid rgba(255,255,255,.16);border-radius:999px;background:rgba(13,11,17,.92);color:#fff;box-shadow:0 18px 55px rgba(0,0,0,.38);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);cursor:pointer;transition:transform .25s ease,border-color .25s ease,background .25s ease}
.wa-concierge-trigger:hover{transform:translateY(-2px);border-color:rgba(255,255,255,.32);background:rgba(21,18,27,.97)}
.wa-concierge-avatar{width:42px;height:42px;border-radius:50%;overflow:hidden;display:block;flex:0 0 auto;border:1px solid rgba(255,255,255,.22);background:#16131d}
.wa-concierge-avatar img{width:100%;height:100%;object-fit:cover;object-position:50% 22%;display:block}
.wa-concierge-trigger-copy{display:grid;text-align:left;line-height:1.05;gap:5px;flex:1}
.wa-concierge-trigger-copy strong{font-size:14px;letter-spacing:.01em}
.wa-concierge-trigger-copy small{font-size:10px;color:rgba(255,255,255,.62);font-weight:600;letter-spacing:.04em}
.wa-concierge-mark{font-size:18px;color:#a98bff}
.wa-concierge-panel{position:absolute;right:0;bottom:72px;width:min(380px,calc(100vw - 32px));border:1px solid rgba(255,255,255,.14);border-radius:24px;overflow:hidden;background:#100d15;color:#fff;box-shadow:0 30px 90px rgba(0,0,0,.58);opacity:0;visibility:hidden;transform:translateY(14px) scale(.98);transform-origin:100% 100%;transition:opacity .24s ease,transform .24s ease,visibility .24s ease}
.wa-concierge.is-open .wa-concierge-panel{opacity:1;visibility:visible;transform:none}
.wa-concierge-head{display:flex;justify-content:space-between;align-items:flex-start;padding:20px;background:linear-gradient(135deg,rgba(103,61,182,.38),rgba(20,15,27,.3)),url('assets/tim-studio-new-1024.webp') center 26%/cover;border-bottom:1px solid rgba(255,255,255,.10);position:relative}
.wa-concierge-head:before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(9,7,12,.88),rgba(9,7,12,.52))}
.wa-concierge-head>*{position:relative;z-index:1}
.wa-concierge-profile{display:flex;gap:12px;align-items:center}
.wa-concierge-avatar-large{width:52px;height:52px}
.wa-concierge-profile div{display:grid;gap:3px}
.wa-concierge-profile div>span{font-size:9px;letter-spacing:.18em;color:#d7caff;font-weight:800}
.wa-concierge-profile strong{font-size:20px;line-height:1.05}
.wa-concierge-profile small{font-size:10px;color:rgba(255,255,255,.72);display:flex;align-items:center;gap:6px}
.wa-concierge-profile small i{width:7px;height:7px;border-radius:50%;background:#43d17a;box-shadow:0 0 0 3px rgba(67,209,122,.15)}
.wa-concierge-close{width:32px;height:32px;border-radius:50%;border:1px solid rgba(255,255,255,.15);background:rgba(0,0,0,.25);color:#fff;font-size:22px;line-height:1;cursor:pointer}
.wa-concierge-body{padding:20px;display:grid;gap:15px}
.wa-concierge-body>p{margin:0;font-size:15px;font-weight:700}
.wa-concierge-topics{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.wa-concierge-topics button{border:1px solid rgba(255,255,255,.12);border-radius:12px;background:rgba(255,255,255,.045);color:rgba(255,255,255,.82);padding:12px 11px;text-align:left;font:inherit;font-size:12px;font-weight:700;cursor:pointer;transition:.2s ease}
.wa-concierge-topics button:hover,.wa-concierge-topics button.is-selected{border-color:rgba(178,146,255,.72);background:rgba(137,91,239,.15);color:#fff}
.wa-concierge-note{display:grid;gap:7px}
.wa-concierge-note>span{font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,.62);font-weight:700}
.wa-concierge-note em{font-style:normal;color:rgba(255,255,255,.38);text-transform:none;letter-spacing:0;margin-left:4px}
.wa-concierge-note textarea{resize:none;width:100%;border:1px solid rgba(255,255,255,.12);border-radius:12px;background:rgba(255,255,255,.045);color:#fff;padding:12px;font:inherit;font-size:13px;outline:none}
.wa-concierge-note textarea:focus{border-color:rgba(178,146,255,.72);box-shadow:0 0 0 3px rgba(137,91,239,.12)}
.wa-concierge-note textarea::placeholder{color:rgba(255,255,255,.35)}
.wa-concierge-send{display:flex;align-items:center;justify-content:space-between;text-decoration:none;border-radius:12px;background:#fff;color:#110e16;padding:14px 15px;font-size:12px;font-weight:900;letter-spacing:.02em;transition:transform .2s ease,background .2s ease}
.wa-concierge-send:hover{transform:translateY(-1px);background:#e7ddff}
.wa-concierge-privacy{font-size:9px;line-height:1.45;color:rgba(255,255,255,.42)}
@media(max-width:700px){
  .wa-concierge{right:14px;bottom:14px}
  .wa-concierge-trigger{min-width:0;padding:7px;border-radius:999px}
  .wa-concierge-trigger-copy,.wa-concierge-mark{display:none}
  .wa-concierge-avatar{width:48px;height:48px}
  .wa-concierge-panel{position:fixed;left:12px;right:12px;bottom:76px;width:auto;max-height:calc(100dvh - 100px);overflow:auto;border-radius:20px}
}
@media(prefers-reduced-motion:reduce){.wa-concierge-trigger,.wa-concierge-panel,.wa-concierge-send{transition:none}}

/* =========================================================
   RC10.6 — MOBILE QA & ALIGNMENT POLISH
   Mobile-only production-readiness pass. Desktop is frozen.
   Normalises horizontal rhythm and centres all glass/panel UI.
   ========================================================= */
@media (max-width:900px){
  :root{
    --mobile-gutter:14px;
    --mobile-content-width:calc(100vw - (var(--mobile-gutter) * 2));
  }

  html,body{max-width:100%;overflow-x:clip!important}
  body{position:relative}

  /* One consistent mobile content axis. */
  .shell,
  .mobile-master-content,
  .mobile-master-signup,
  .testimonial-carousel,
  .testimonial-card,
  .role-stack,
  .role-card,
  .creative-actions,
  .creative-action,
  .resource-grid,
  .resource-card,
  .method-grid,
  .method-card,
  .studio-note,
  .studio-note-paper,
  .now-playing,
  .quote-bridge,
  .philosophy-quote-wall{
    margin-left:auto!important;
    margin-right:auto!important;
    box-sizing:border-box!important;
  }

  /* Cards/panels must fill their parent instead of inheriting offsets. */
  .mobile-master-signup,
  .testimonial-card,
  .role-card,
  .creative-action,
  .resource-card,
  .method-card,
  .studio-note-paper,
  .now-playing{
    width:100%!important;
    max-width:100%!important;
    left:auto!important;
    right:auto!important;
  }

  /* Prevent decorative transforms from making a card look off-centre. */
  .mobile-master-signup,
  .testimonial-card,
  .role-card,
  .creative-action,
  .resource-card,
  .method-card,
  .studio-note-paper,
  .now-playing{
    translate:none!important;
  }

  /* Keep absolutely positioned transparent labels inside the mobile frame. */
  .coaching-photo-only figcaption,
  .about-media span{
    left:14px!important;
    right:14px!important;
    width:auto!important;
    max-width:none!important;
    text-align:left;
  }

  /* Stable grid behaviour: no child can force horizontal drift. */
  .coaching-grid,
  .lesson-grid,
  .journal-grid,
  .resource-grid,
  .method-grid,
  .creative-actions,
  .role-stack,
  .music-grid,
  .watch-grid{
    width:100%!important;
    min-width:0!important;
  }
  .coaching-grid>*,
  .lesson-grid>*,
  .journal-grid>*,
  .resource-grid>*,
  .method-grid>*,
  .creative-actions>*,
  .role-stack>*,
  .music-grid>*,
  .watch-grid>*{
    min-width:0!important;
  }

  img,video,iframe,svg{max-width:100%}
}

@media (max-width:560px){
  :root{--mobile-gutter:14px}

  /* Maintain equal visual padding on narrow phones. */
  .testimonial-card,
  .role-card,
  .creative-action,
  .resource-card,
  .method-card,
  .studio-note-paper,
  .now-playing-body{
    padding-left:22px!important;
    padding-right:22px!important;
  }
}

@media (max-width:390px){
  .testimonial-card,
  .role-card,
  .creative-action,
  .resource-card,
  .method-card,
  .studio-note-paper,
  .now-playing-body{
    padding-left:18px!important;
    padding-right:18px!important;
  }
}

/* =========================================================
   RC10.6.1 — MOBILE NAVIGATION VIEWPORT FIX
   iOS fix: the fixed drawer must not inherit the translated
   header as its containing block. Mobile only; desktop frozen.
   ========================================================= */
@media (max-width:900px){
  .nav.shell{
    position:fixed!important;
    top:0!important;
    right:0!important;
    left:0!important;
    width:100%!important;
    max-width:none!important;
    margin:0!important;
    transform:none!important;
    padding-left:max(16px,env(safe-area-inset-left))!important;
    padding-right:max(16px,env(safe-area-inset-right))!important;
    overflow:visible!important;
    contain:none!important;
    isolation:isolate;
    z-index:1000!important;
  }

  .nav nav#primary-navigation{
    position:fixed!important;
    inset:0!important;
    width:100vw!important;
    max-width:none!important;
    height:100dvh!important;
    min-height:100vh!important;
    margin:0!important;
    padding:
      calc(104px + env(safe-area-inset-top))
      max(24px,env(safe-area-inset-right))
      max(34px,env(safe-area-inset-bottom))
      max(24px,env(safe-area-inset-left))!important;
    display:flex!important;
    flex-direction:column!important;
    justify-content:flex-start!important;
    align-items:stretch!important;
    gap:0!important;
    background:rgba(7,6,10,.985)!important;
    -webkit-backdrop-filter:blur(28px) saturate(115%)!important;
    backdrop-filter:blur(28px) saturate(115%)!important;
    box-shadow:none!important;
    opacity:0!important;
    visibility:hidden!important;
    transform:translate3d(0,-10px,0)!important;
    pointer-events:none!important;
    overflow-y:auto!important;
    overscroll-behavior:contain;
    -webkit-overflow-scrolling:touch;
    z-index:1!important;
  }

  .nav.menu-open nav#primary-navigation{
    opacity:1!important;
    visibility:visible!important;
    transform:translate3d(0,0,0)!important;
    pointer-events:auto!important;
  }

  .nav nav#primary-navigation a{
    display:flex!important;
    align-items:center!important;
    width:100%!important;
    min-height:68px!important;
    padding:18px 2px!important;
    border-bottom:1px solid rgba(255,255,255,.12)!important;
    color:#f7f3f7!important;
    opacity:1!important;
    font:500 clamp(28px,8.5vw,42px)/1.05 "Space Grotesk",sans-serif!important;
    letter-spacing:-.04em!important;
    text-shadow:0 1px 18px rgba(0,0,0,.35);
  }

  .nav nav#primary-navigation a:first-child{
    border-top:1px solid rgba(255,255,255,.12)!important;
  }

  .nav nav#primary-navigation a::after{display:none!important}

  .nav.menu-open .brand,
  .nav.menu-open .nav-cta,
  .nav.menu-open .mobile-menu-toggle{
    position:relative!important;
    z-index:3!important;
  }

  .nav.menu-open .brand{opacity:0;pointer-events:none}

  .nav.menu-open .mobile-menu-toggle{
    background:rgba(12,11,15,.92)!important;
    border-color:rgba(255,255,255,.2)!important;
  }

  body.menu-open .wa-concierge{
    opacity:0!important;
    visibility:hidden!important;
    pointer-events:none!important;
  }

  body.menu-open main,
  body.menu-open footer{
    pointer-events:none;
  }
}

/* RC10.6.3 — Philosophy portrait interaction parity */
.philosophy-visual{
  isolation:isolate;
}
.philosophy-visual img{
  transition:transform 1.4s var(--cinema-ease),filter .8s ease;
  will-change:transform,filter;
}
.philosophy-visual::after{
  transition:opacity .8s ease,background .8s ease;
}
@media (hover:hover) and (pointer:fine){
  .philosophy-visual:hover img{
    transform:scale(1.055);
    filter:saturate(.86) contrast(1.09) brightness(.94);
  }
  .philosophy-visual:hover::after{
    background:linear-gradient(90deg,rgba(9,9,9,.50) 0%,rgba(9,9,9,.035) 28%,rgba(9,9,9,0) 58%),linear-gradient(0deg,rgba(5,5,5,.12),transparent 38%);
  }
}
@media(max-width:900px){
  .philosophy-visual img{
    transition:transform 1.2s var(--cinema-ease),filter .8s ease;
  }
  .philosophy-quote-wall.visible .philosophy-visual img{
    animation:rc1063PhilosophyReveal 1.45s var(--cinema-ease) both;
  }
  @keyframes rc1063PhilosophyReveal{
    from{opacity:.7;transform:scale(1.045);filter:saturate(.62) contrast(1.03) brightness(.72)}
    to{opacity:1;transform:scale(1);filter:saturate(.72) contrast(1.06) brightness(.86)}
  }
}
@media(prefers-reduced-motion:reduce){
  .philosophy-visual img{transition:none!important;animation:none!important;transform:none!important}
  .philosophy-visual::after{transition:none!important}
}


/* LIVE CANDIDATE 1.0 — signup integration */
.form-honeypot{position:absolute!important;left:-10000px!important;width:1px!important;height:1px!important;opacity:0!important;pointer-events:none!important}
.signup-consent a,.hero-signup small a{color:inherit;text-decoration:underline;text-underline-offset:2px}
.form-status{display:block;min-height:1.4em}

/* ============================================================
   LIVE CANDIDATE 1.1 — GUITARGYM ENTRY
   ============================================================ */
.guitargym-teaser{
  display:grid;
  grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
  gap:clamp(32px,6vw,86px);
  align-items:center;
  margin-top:clamp(72px,8vw,112px);
  padding-top:clamp(58px,6vw,82px);
  border-top:1px solid rgba(255,255,255,.10);
}
.guitargym-teaser-media{position:relative;min-height:500px;overflow:hidden;border-radius:28px;background:#0d0b13}
.guitargym-teaser-media::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 45%,rgba(8,7,11,.78));pointer-events:none}
.guitargym-teaser-media img{width:100%;height:100%;position:absolute;inset:0;object-fit:cover;object-position:center 34%;transform:scale(1.02)}
.guitargym-teaser-stamp{position:absolute;z-index:2;left:24px;bottom:22px;font-family:"Space Grotesk",sans-serif;font-weight:600;font-size:clamp(40px,5vw,72px);line-height:.78;letter-spacing:-.07em;color:#fff;text-shadow:0 8px 30px rgba(0,0,0,.42)}
.guitargym-teaser-copy{max-width:610px}
.guitargym-teaser-copy h2{margin:14px 0 22px;font-size:clamp(48px,5vw,78px);line-height:.94;letter-spacing:-.055em}
.guitargym-teaser-copy p:not(.eyebrow){font-size:clamp(17px,1.5vw,20px);line-height:1.72;color:rgba(255,255,255,.72);margin-bottom:30px}
@media(max-width:900px){
  .guitargym-teaser{grid-template-columns:1fr;margin-top:64px;padding-top:54px;gap:28px}
  .guitargym-teaser-media{min-height:min(116vw,620px)}
  .guitargym-teaser-copy h2{font-size:clamp(46px,12vw,68px)}
}


/* LC 2.2 — GuitarGym official brush logo */
.guitargym-teaser-logo{
  position:absolute;z-index:2;left:18px;bottom:12px;
  width:min(48%,300px);height:auto;object-fit:contain;
  filter:drop-shadow(0 10px 24px rgba(0,0,0,.48));
}
@media(max-width:900px){.guitargym-teaser-logo{width:min(58%,330px);left:16px;bottom:14px}}

/* LC 2.2 master — GuitarGym homepage conversion update */
.guitargym-teaser-note{display:block;margin-top:12px;color:rgba(255,255,255,.48);font-size:13px;line-height:1.5}

/* =========================================================
   LC 2.14 — SITE-WIDE MOBILE FINISHING PASS
   Phone/tablet only. Protects content from clipping and keeps
   the WhatsApp concierge usable on short/narrow viewports.
   ========================================================= */
@media (max-width:900px){
  html,body{width:100%;max-width:100%;overflow-x:clip}
  main,footer,section{min-width:0}
  img,video,iframe{height:auto;max-width:100%}
  .wa-concierge{right:max(12px,env(safe-area-inset-right));bottom:max(12px,env(safe-area-inset-bottom))}
  .wa-concierge-panel{left:max(10px,env(safe-area-inset-left));right:max(10px,env(safe-area-inset-right));bottom:calc(76px + env(safe-area-inset-bottom));max-height:calc(100dvh - 96px - env(safe-area-inset-top) - env(safe-area-inset-bottom));overscroll-behavior:contain}
  .wa-concierge-body{padding:18px}
  .wa-concierge-topics button{min-height:44px}
  .wa-concierge-send{min-height:46px}
}
@media (max-width:430px){
  .wa-concierge-panel{border-radius:18px}
  .wa-concierge-head{padding:17px}
  .wa-concierge-body{padding:16px;gap:13px}
  .wa-concierge-topics{gap:7px}
  .wa-concierge-topics button{padding:11px 9px;font-size:11px}
}
@media (max-width:350px){
  .wa-concierge-topics{grid-template-columns:1fr}
}

/* =========================================================
   LC 2.14.1 — MOBILE MOTION RESTORE
   Mobile-only: restore the living Signal language without
   changing desktop composition or content.
   ========================================================= */
@media (max-width:900px) and (prefers-reduced-motion:no-preference){
  /* Restore a restrained version of the desktop hero movement. */
  .mastered-hero .hero-photo{
    animation:lc2141MobileHeroDrift 18s ease-in-out infinite alternate!important;
    will-change:transform;
  }
  .hero-cinema{animation:th20CinemaBreath 9s ease-in-out infinite!important}
  .signal-glyph em{animation:glyphPulse 4.5s ease-in-out infinite!important}
  @keyframes lc2141MobileHeroDrift{
    from{transform:scale(1.015) translate3d(0,0,0)!important}
    to{transform:scale(1.035) translate3d(-.55%,.35%,0)!important}
  }
}

@media (max-width:600px){
  /* The continuous Signal was previously hidden on phones. Keep it visible,
     narrower and quieter instead of removing it. */
  .creative-signal{
    display:block!important;
    position:fixed!important;
    right:1px!important;
    top:0!important;
    width:26px!important;
    height:100dvh!important;
    opacity:.34!important;
    z-index:7!important;
    pointer-events:none!important;
  }
  .creative-signal-bed{stroke:rgba(255,255,255,.055)!important;stroke-width:.8!important}
  .creative-signal-live{stroke-width:1.15!important;filter:drop-shadow(0 0 4px rgba(215,165,126,.28))!important}
  .creative-signal-node{r:1.7px}
  body.signal-awake .creative-signal-node{opacity:.82}
}

@media (max-width:430px){
  .creative-signal{width:22px!important;opacity:.30!important}
}

/* =========================================================
   LC 2.14.2 — MOBILE SIGNAL EXPERIENCE
   Mobile only. Makes the desktop Signal language visible and
   alive on phones without changing desktop composition.
   ========================================================= */
.creative-signal-spark{display:none}
@media (max-width:600px){
  .creative-signal{
    display:block!important;
    right:3px!important;
    width:38px!important;
    opacity:.68!important;
    mix-blend-mode:screen;
    filter:drop-shadow(0 0 10px rgba(112,196,215,.10));
  }
  .creative-signal-bed{stroke:rgba(255,255,255,.075)!important;stroke-width:.85!important}
  .creative-signal-live{
    stroke:#78d8e8!important;
    stroke-width:1.35!important;
    filter:drop-shadow(0 0 5px rgba(113,214,232,.32))!important;
  }
  .creative-signal-spark{
    display:block;
    fill:none;
    vector-effect:non-scaling-stroke;
    stroke:#e7b2d4;
    stroke-width:1.1;
    stroke-linecap:round;
    stroke-dasharray:2 22;
    opacity:.85;
    filter:drop-shadow(0 0 5px rgba(224,117,190,.52));
  }
  .creative-signal-node{
    fill:#f2c8e0!important;
    filter:drop-shadow(0 0 8px rgba(234,138,202,.72))!important;
  }
}
@media (max-width:600px) and (prefers-reduced-motion:no-preference){
  .creative-signal-spark{animation:lc2142SignalFlow 6.8s linear infinite}
  .creative-signal-node{animation:lc2142SignalNode 2.4s ease-in-out infinite}
}
@keyframes lc2142SignalFlow{to{stroke-dashoffset:-240}}
@keyframes lc2142SignalNode{50%{r:3;opacity:.58}}
@media (max-width:430px){
  .creative-signal{width:32px!important;opacity:.64!important}
}


/* LC2.15 — resource artwork refresh */
.tim-resource-art{display:block;width:100%;height:100%;object-fit:cover;border-radius:inherit}.drum-pack-stage .tim-resource-art-drums{object-fit:contain;max-height:100%}.polychrome-preset-stage{position:relative;overflow:hidden}.polychrome-preset-stage .tim-resource-art-polychrome{object-fit:cover;min-height:100%}.polychrome-site-link{position:absolute!important;left:1rem;right:1rem;bottom:1rem;z-index:3;background:rgba(4,6,12,.78)!important;backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.14)!important}


/* RC12.9.2.6.9 — Coaching anchor hotfix
   Land coaching links on the first visible coaching content, not the cinematic section padding. */
#coaching-start{scroll-margin-top:112px;}
@media(max-width:900px){#coaching-start{scroll-margin-top:calc(88px + env(safe-area-inset-top));}}