/* Post-intro styling only: the approved DAW sequence is unchanged. */
.site-header{transition:background .4s,box-shadow .4s}
.site-header.scrolled{background:rgba(247,247,245,.98);box-shadow:0 8px 30px #11161d0b}
.site-header .logo{transition:letter-spacing .35s}
.site-header .logo:hover{letter-spacing:-.035em}
.nav a,.footer .back{position:relative;padding-block:8px}
.nav a:after,.footer .back:after{content:"";position:absolute;left:0;right:0;bottom:1px;height:2px;background:var(--blue);transform:scaleX(0);transform-origin:left;transition:transform .3s ease}
.nav a:hover:after,.nav a:focus-visible:after,.nav a[aria-current]:after,.footer .back:hover:after{transform:scaleX(1)}
.nav a[aria-current]{color:var(--blue)}
.hero h1 span{font-family:"Instrument Serif",Georgia,serif;font-style:italic;font-size:1.1em;line-height:1.08;color:#c3ceff;letter-spacing:-.035em;margin-top:8px}
.hero .eyebrow{letter-spacing:.2em}
.hero .audience{font-size:14px;letter-spacing:.12em}
.desk-caption{font:500 28px/1.2 "Caveat",cursive;color:#3149ac;transform:rotate(-3deg);margin:0 0 18px}
.notes-heading{display:flex;justify-content:space-between;align-items:center;gap:18px;margin-bottom:28px;min-height:48px}
.notes-heading .desk-caption{margin:0}
.notes-heading .note-controls{position:static;flex-shrink:0}
.notes{margin-top:0;outline-offset:12px}
.services-grid>*{min-width:0}
.note{background:linear-gradient(135deg,#fff5b9,var(--yellow));border-radius:2px;user-select:none}
.note-index{letter-spacing:.08em}
.note h3{color:#252a21}
.note-controls button{transition:background .25s,color .25s,transform .25s,box-shadow .25s}
.note-controls button:hover{transform:translateY(-3px);box-shadow:0 5px 12px #11161d18}
.note-controls button:active{transform:translateY(0) scale(.94)}
.note-controls button:focus-visible,.notes:focus-visible,.nav a:focus-visible,.footer a:focus-visible{outline:2px solid var(--blue);outline-offset:5px}
.note-count{font:500 14px/1.5 "DM Sans",sans-serif;color:#575c64;display:block;margin:32px 0 0;text-align:right;letter-spacing:.1em}
.signature{border-left:0;padding-left:0;position:relative;padding-bottom:22px}
.signature strong{font:500 clamp(38px,4vw,58px)/1.2 "Caveat",cursive;color:var(--blue);transform:rotate(-3deg);transform-origin:left}
.signature span{font-size:14px;letter-spacing:.12em;margin-top:12px}
.signature:after{content:"";position:absolute;bottom:0;left:0;width:180px;height:2px;background:var(--blue);transform:rotate(-2deg);transform-origin:left}
.about .display em{position:relative;text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:9px;text-decoration-color:#244bea50}
.facts{font-size:14px;letter-spacing:.08em}
.section .label{font-size:14px;letter-spacing:.18em;display:flex;align-items:center;gap:18px}
.section .label:after{content:"";width:64px;height:1px;background:currentColor;opacity:.45;transform-origin:left}
.contact{background:linear-gradient(120deg,#101b70ed,#243facdf),url('studio-console.png') center/cover}
.contact .display{font-family:"Instrument Serif",Georgia,serif;letter-spacing:-.035em}
.contact .contact-rule{transform-origin:left}
.contact .coming{font-size:16px}
.footer{overflow:hidden}
.motion-seen .label:after{animation:rule-draw .8s ease both}
.motion-seen .signature:after{animation:rule-draw 1s .35s ease both}
@keyframes rule-draw{from{scale:0 1}to{scale:1 1}}
@media(max-width:850px){.notes-heading{margin-top:36px}.notes{margin-top:0}.notes-heading .desk-caption{font-size:26px}.hero{min-height:calc(100svh - 82px)}}
@media(max-width:560px){.notes-heading{gap:12px}.note-controls{gap:8px}.notes{margin-right:12px}.note:after{inset:20px -18px -20px 18px}.note:before{inset:10px -10px -10px 10px}.hero h1 span{font-size:1.08em}.footer .back{position:static;margin-top:12px}.footer{flex-direction:column}.section .label{letter-spacing:.1em}.section .label:after{width:30px}}
@media(prefers-reduced-motion:reduce){.site-header,.site-header .logo,.nav a:after,.footer .back:after,.note-controls button{transition:none}.motion-seen .label:after,.motion-seen .signature:after{animation:none}}
@media(hover:none){.note-controls button:hover{transform:none;box-shadow:none}.note-controls button:active{transform:scale(.94)}}