/* ============ SHARED HEADER BAND TIER (headerband.css) ============
   The name badge (top-left, Nav .brandbadge) and the "Get in Touch" CTA
   (top-right, Nav .navcta) form an INVISIBLE horizontal band across the top of
   every page. --header-clearance is that band's bottom line, measured from the
   viewport top:

       frame's top line  +  the TALLER of the two elements  +  24px gap

   The 24px is the exact breathing gap the Intro hero was shifted by: its
   margin-top of 70px = the 46px CTA + 24px (Landing Scene, .hero.st1). Reused
   verbatim so every page clears the chrome the same way the Intro does.

   Element heights, mirrored from their owners (keep the two in step):
     .navcta ....... Nav base: 20px label + 2x13px padding = 46px (>=800 only) at EVERY
                     width from 800 up (filled-button type and padding are pinned;
                     scale.css no longer ramps them).
     .brandbadge ... 30px <800 (28px <=360); 38px flat through 800-1279 (scale.css);
                     54px from 1280.
   Tallest member per band, and the resulting clearance:
     >=1280 ....... badge 54px          -> frame-top + 78px
     800-1279 ..... CTA 46px            -> frame-top + 70px (the Intro reference
                    offset exactly; both members stay in the max() so a future
                    change to either one cannot silently shrink the band)
     <800 ......... the mobile top bar's badge row, 30/28px. Below 800 this is a
                    FLOOR only: the mobile top-bar offsets each page already
                    carries are larger, and mobile is left exactly as it is.

   No page content may sit inside the band or share its y-axis; page content
   starts on or below the --header-clearance line. Pages express that by
   offsetting a whole composition DOWN as one unit (never by relayout).
   Consumers: Landing Scene work scenes (placeBlocks reads the token in JS),
   Case Study (.doc top padding), Expertise (hero group offset), About
   (.shelves top padding). Exempt by design: the Intro hero (the reference,
   already on the line with the badge inline in its headline) and Kind words.

   Registered with @property so getComputedStyle resolves the token to px for
   the JS read in Landing Scene. --hb-frame-top mirrors the frame's top line
   that the pages declare (clamp(16px,2vh,20px)).
   Linked from every page's helmet after scale.css. */
@property --header-clearance{syntax:'<length>';inherits:true;initial-value:0px}
:root{--hb-frame-top:clamp(16px,2vh,20px);--hb-gap:24px;--hb-el:30px;--header-clearance:calc(var(--hb-frame-top) + var(--hb-el) + var(--hb-gap))}
@media (max-width:360px){:root{--hb-el:28px}}
/* 800-1279: CTA 46px flat vs badge 38px flat (scale.css). The band follows the taller. */
@media (min-width:800px) and (max-width:1279px){:root{--hb-el:max(46px,38px)}}
@media (min-width:1280px){:root{--hb-el:54px}}