/* Keep the logo and navigation available; only the contact link steps away. */
.header > .brand, .header > .contact {
  translate: 0 0;
  transition: translate .32s cubic-bezier(.22, .7, .24, 1), opacity .24s;
}
.header[data-scroll-compact="true"] {
  background: transparent !important;
  border-color: transparent !important;
  backdrop-filter: none !important;
}
.header[data-scroll-compact="true"] > .contact,
.header[data-scroll-compact="true"] > .brand {
  translate: 0 -140px;
  opacity: 0 !important;
  pointer-events: none;
}
/* Own both colors: the mineral/application shaders also animate header ink. */
body .header[data-scroll-compact="true"] .navigation {background: #101d2c !important;}
.header[data-scroll-compact="true"] .navigation > :is(a, button) {color: #e8e5dc !important;}
.header[data-scroll-compact="true"] .navigation > :is(a, button):is(:hover, :focus-visible) {color: #101d2c !important;}
html[data-input="keyboard"] .header:focus-within > .brand,
html[data-input="keyboard"] .header:focus-within > .contact {transition: none;}
@media (prefers-reduced-motion: reduce) {
  .header > .brand, .header > .contact {transition: none;}
}

.header[data-logo-tone="dark"] .brand>img:first-child,
.header[data-logo-tone="light"] .brand>.brand-dark{opacity:0!important}
.header[data-logo-tone="dark"] .brand>.brand-dark,
.header[data-logo-tone="light"] .brand>img:first-child{opacity:1!important}

/* Phones and tablets: the whole header steps away while reading, returns on scroll-up. */
@media(max-width:1100px){
 .header{transition:translate .36s cubic-bezier(.22,.7,.24,1),opacity .28s}
 .header[data-scroll-compact="true"]{translate:0 -120%;opacity:0;pointer-events:none}
 .header[data-scroll-compact="true"] > .navigation,.header[data-scroll-compact="true"] > .brand,.header[data-scroll-compact="true"] > .contact{translate:0 0;opacity:1}
}

/* Smooth hand-off when the header returns at the top: pill colour, link ink and logo crossfade instead of snapping. */
body .header .navigation{transition:background-color .5s cubic-bezier(.22,1,.36,1),backdrop-filter .5s ease!important}
body .header .navigation>:is(a,button){transition:color .25s ease!important}
body .header .brand>img{transition:opacity .25s ease!important}
body .header .contact{transition:opacity .25s ease,color .25s ease}
@media(prefers-reduced-motion:reduce){body .header .navigation,body .header .navigation>:is(a,button),body .header .brand>img{transition:none!important}}
/* Over a dark/photo hero the header uses light ink the whole time the hero is under it, not only at scrollY 0. */
body.inner-page:has(main .eh, main .ah-dark) .header[data-tone="dark"]:not([data-scroll-compact="true"]){--header-ink:#e8e5dc;color:#e8e5dc;background:transparent!important;backdrop-filter:none!important}
body.inner-page:has(main .eh, main .ah-dark) .header[data-tone="dark"]:not([data-scroll-compact="true"]) .contact{color:#e8e5dc}
body .header{transition:translate .36s cubic-bezier(.22,.7,.24,1),opacity .28s,color .25s ease,background-color .25s ease}