/* Shared spacing rhythm and sticky navigation. */
:root{--nav-height:96px;--section-space:76px}
html{scroll-padding-top:calc(var(--nav-height) + 22px)}
body>header{position:sticky;top:0;z-index:50;width:100%;max-width:none;min-height:var(--nav-height);background:rgba(255,250,241,.96);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border-bottom:1px solid #e5ddcb;box-shadow:0 5px 20px #342f2905;padding-left:max(6%,calc((100% - 1240px)/2));padding-right:max(6%,calc((100% - 1240px)/2))}
.hero{min-height:0;padding-top:44px;padding-bottom:82px;gap:42px}
.hero-art{height:clamp(420px,40vw,510px);transform:none}
.handdrawn-stage{display:grid;grid-template-rows:56% auto auto;align-content:start;row-gap:20px;inset:-5% -4% -12%}
.drawn-title{position:relative;top:auto;left:auto;right:auto;grid-row:2;font-size:clamp(70px,7vw,92px);letter-spacing:8px;line-height:1.05}
.drawn-title small{font-size:11px;line-height:1.5;margin-top:18px;letter-spacing:5px}
.drawn-controls{position:relative;top:auto;bottom:auto;left:auto;right:auto;grid-row:3;display:flex;flex-direction:column;align-items:center;gap:14px}
.drawn-intro{margin:0;line-height:1.8;font-size:12px;letter-spacing:1px}
.drawn-buttons{gap:14px;flex-wrap:wrap}
.drawn-buttons button{padding:10px 20px;line-height:1.5;min-height:40px}
.drawn-feedback{margin:0;min-height:21px;line-height:1.8}
.drawn-sprite{top:-18%}
.promise{padding-top:15px;padding-bottom:15px;transform:rotate(-1.2deg)}
.promise b{font-size:24px}.promise span{font-size:14px}
.section{padding-top:var(--section-space);padding-bottom:var(--section-space)}
#brands{padding-top:58px;padding-bottom:76px}
.section-heading{gap:28px}.section-heading p{margin:0}
.service-grid,.health-grid{margin-top:32px}
.service-grid .service-card:nth-child(2){margin-top:38px}
.service-grid .service-card:nth-child(3){margin-top:12px}
.contact-section{padding-top:64px;padding-bottom:64px}
@media(max-width:900px){:root{--nav-height:124px;--section-space:64px}body>header{min-height:var(--nav-height);padding-top:14px;padding-bottom:14px}.hero{gap:24px;padding-top:38px;padding-bottom:90px}.hero-art{height:420px}.handdrawn-stage{row-gap:16px}.drawn-title{font-size:70px}.drawn-controls{gap:12px}.drawn-buttons{gap:10px}.drawn-buttons button{padding:9px 14px}}
@media(max-width:600px){:root{--nav-height:118px;--section-space:56px}body>header{padding-top:12px;padding-bottom:12px;gap:12px}header .wordmark img{width:42px;height:42px}nav{padding-top:4px;padding-bottom:2px}.hero{padding-top:30px;padding-bottom:42px;gap:24px}.hero-art{height:auto;aspect-ratio:1.05}.has-handdrawn{margin-top:8px;margin-bottom:126px}.handdrawn-stage{inset:-5% -4% -28%;grid-template-rows:61% auto auto;row-gap:18px}.drawn-title{font-size:70px}.drawn-title small{font-size:9px;letter-spacing:4px;margin-top:14px}.drawn-controls{gap:12px}.drawn-intro{font-size:11px;line-height:1.8}.drawn-buttons button{font-size:11px;padding:9px 14px}.drawn-sprite{top:-5%}.promise{padding-top:13px;padding-bottom:13px}#brands{padding-top:44px;padding-bottom:56px}.service-grid,.health-grid{gap:28px}.service-grid .service-card:nth-child(n){margin-top:0}.contact-section{padding-top:52px;padding-bottom:52px}.health-heading{margin-bottom:28px}}
@media(prefers-reduced-transparency:reduce){body>header{background:#fffaf1;backdrop-filter:none}}
/* Shrink after leaving the top; mobile navigation keeps its original type/spacing. */
body>header{transition:min-height .25s ease,padding-top .25s ease,padding-bottom .25s ease,box-shadow .25s ease}
header .wordmark,header .wordmark img,header .wordmark small,header nav,header .languages,header .languages button{transition:font-size .25s ease,width .25s ease,height .25s ease,gap .25s ease,padding .25s ease,margin-top .25s ease}
body>header.is-compact{min-height:68px;padding-top:10px;padding-bottom:10px;box-shadow:0 5px 20px #342f290c}
header.is-compact .wordmark{font-size:23px;gap:8px}
header.is-compact .wordmark img{width:40px;height:40px}
header.is-compact .wordmark small{font-size:8px;margin-top:5px}
header.is-compact .languages{font-size:10px;gap:5px}
header.is-compact .languages button{padding:4px;min-height:30px;min-width:26px}
@media(min-width:901px){header.is-compact nav{font-size:12px;gap:26px}}
@media(max-width:900px){body>header.is-compact{min-height:106px;padding-top:9px;padding-bottom:9px}header.is-compact .wordmark{font-size:22px}header.is-compact .wordmark img{width:34px;height:34px}}
@media(max-width:600px){body>header.is-compact{min-height:102px;padding-top:8px;padding-bottom:8px}header.is-compact .wordmark{font-size:20px}header.is-compact .wordmark img{width:30px;height:30px}header.is-compact .wordmark small{font-size:7px;margin-top:4px}}