/* Utilities precede page links, with a compact shared rhythm. */
html body .site-header .main-nav>.site-search{margin:0 -4px 0 0;order:0}
html body .site-header .main-nav>.theme-toggle{margin:0 5px 0 0}
html body .site-header :is(.site-search-toggle,.theme-toggle){position:relative;width:34px;height:38px;padding:8px}
html body .site-header [data-control-label]::after{content:attr(data-control-label);position:absolute;left:50%;top:calc(100% + 7px);transform:translate(-50%,-3px);white-space:nowrap;font:300 10px/1.3 var(--font-support);letter-spacing:.035em;color:var(--theme-ink);opacity:0;pointer-events:none;transition:opacity .18s ease,transform .22s ease}
html body .site-header [data-control-label]:is(:hover,:focus-visible)::after{opacity:1;transform:translate(-50%,0);transition-delay:.22s}
html body.page-home.chapter-dark .site-header [data-control-label]::after{color:#f4f4f1}
html body .site-header .site-search-panel{left:0;right:auto;box-sizing:border-box}
@media(max-width:700px){html body .site-header :is(.site-search-toggle,.theme-toggle){width:28px;height:34px;padding:5px}html body .site-header .main-nav>.site-search{margin-right:0}html body .site-header .main-nav>.theme-toggle{margin-right:3px}html body .site-header [data-control-label]::after{font-size:9px}}
@media(prefers-reduced-motion:reduce){html body .site-header [data-control-label]::after{transition:none}}

/* Grow the heading first; then let its description lift it naturally. */
html body.page-about .service .overlay h3{font-size:clamp(18px,1.7vw,24px)!important;font-weight:400!important;margin:0;transition:font-size .45s cubic-bezier(.22,1,.36,1)!important}
html body.page-about .service.active .overlay h3{font-size:clamp(23px,2.25vw,32px)!important}
html body.page-about .service .overlay p,html body.page-about .service.active .overlay p{display:block;max-height:0;opacity:0;margin:0;overflow:hidden;transition:max-height .55s cubic-bezier(.22,1,.36,1),opacity .35s ease,margin-top .55s ease!important}
html body.page-about .service.active.is-reading .overlay p{max-height:260px;opacity:1;margin-top:14px}
@media(max-width:700px){html body.page-about .service .overlay{padding:20px}html body.page-about .service.active .overlay h3{font-size:26px!important}}
@media(prefers-reduced-motion:reduce){html body.page-about .service .overlay :is(h3,p){transition:none!important}}