/* Final usability refinements shared by preview and launch outputs. */
html{scroll-padding-top:calc(var(--mood-height,100px) + 24px)}
input,textarea{border-color:var(--muted);scroll-margin-block:28px}
:focus-visible{outline:3px solid var(--cyan);outline-offset:5px}
.skip-link:focus{z-index:100}
.header nav{flex-wrap:wrap}.header{min-height:100px;height:auto;padding-block:16px}
.theme-options{flex-wrap:wrap}.theme-options button{min-height:44px}
.motion-toggle{min-height:44px}.mood-inner{flex-wrap:wrap}
.service-heading,.case-name,.case-heading,.website-toolbar{min-width:0}
.service-heading h3,.case-name h3{overflow-wrap:anywhere}
.reel-caption{min-height:106px}.reel-caption h3{min-height:1.2em}
.contact-email{overflow-wrap:anywhere;max-width:100%}
.device-controls{flex-wrap:wrap}.device-controls button{min-height:44px}
body{overflow-wrap:break-word}
h1,h2,h3,h4{overflow-wrap:anywhere}.portfolio-intro>*,.section-top>*,.services-layout>*,.contact-layout>*,.resource-grid>*,.case-heading>*,.faq-section>*{min-width:0}
.mood-bar.is-tall{position:relative;top:auto}
@media(max-width:760px){.mood-inner{gap:3px 8px}.mood-label{min-width:0}.theme-options{gap:2px}.theme-options button{padding:7px 6px}.header nav{justify-content:space-between;gap:12px}.reel-caption{min-height:100px}.service-heading{align-items:flex-start}.contact-layout h2{font-size:clamp(46px,17vw,76px)}}
@media(max-width:360px){.wrap{width:calc(100% - 32px)}.theme-options button{font-size:13px;gap:5px}.header{gap:12px}.header-contact{padding:10px}.brand img{width:135px}.hero h1{font-size:40px}.case-heading h3{font-size:27px}.case-detail{flex-wrap:wrap}.contact-email{font-size:20px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.reading-progress{transition:none}}