/* ─── Site header · "Logo speaks" (Header Explorations v2, #05) ──────────────
   Sits at the top of the page and stays there: it doesn't follow on scroll. Centred logo (the gradient mark + the black
   word); when a chapter lands in the hero film its result rolls into the word's place. Features opens a window onto the
   hero's own aurora at night (site-header.js + HERO_AURORA.setWindow in aurora.js). Desktop layout from 800 px. */
.mh{--fg:#161513;--mu:rgba(22,21,19,.72);--e:cubic-bezier(.2,.8,.2,1);position:absolute;top:0;left:0;right:0;height:var(--header-h);z-index:100;font-family:'Schibsted Grotesk',system-ui,sans-serif;-webkit-font-smoothing:antialiased;color:var(--fg)}
.mh a{text-decoration:none}
.mh img{display:block}
.mh button{font-family:inherit;color:inherit}
.mh :focus-visible{outline:2px solid currentColor;outline-offset:3px;border-radius:8px}
.mh__in{position:relative;z-index:2;width:min(100% - 2*var(--gutter),var(--container-max));height:100%;margin-inline:auto;display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;gap:24px}
.mh__l,.mh__r{display:flex;align-items:center;gap:28px;min-width:0}
.mh__r{justify-self:end}
.mh a.mh__link,.mh__feat{display:inline-flex;align-items:center;gap:8px;height:40px;padding:0;border:0;background:none;cursor:pointer;font:500 15px/1 'Schibsted Grotesk',system-ui,sans-serif;letter-spacing:-.01em;color:var(--mu);white-space:nowrap;transition:color .15s ease}
.mh a.mh__link:hover,.mh__feat:hover,.mh__feat[aria-expanded="true"]{color:var(--fg)}
.mh__chev{width:6px;height:6px;margin-top:-4px;border-right:1.6px solid currentColor;border-bottom:1.6px solid currentColor;transform:rotate(45deg);transition:transform .2s var(--e),margin .2s var(--e)}
.mh__feat[aria-expanded="true"] .mh__chev{transform:rotate(-135deg);margin-top:3px}
.mh a.mh__btn{display:inline-flex;align-items:center;height:40px;padding:0 18px;border-radius:999px;background:#161513;color:#FAF8F2;font:600 14px/1 'Schibsted Grotesk',system-ui,sans-serif;letter-spacing:-.01em;white-space:nowrap;transition:background-color .2s ease,transform .1s ease}
.mh a.mh__btn:hover{background:#2c2a26;color:#FAF8F2}
.mh a.mh__btn:active{transform:scale(.98)}

/* logo: the word gives its place to the film's result for 2.8 s */
.mh__logo{display:flex;align-items:center}
.mh__mk{height:29px;width:auto}
.mh__slot{position:relative;display:block;width:136px;height:24px;margin-left:12px;overflow:hidden;transition:width .55s var(--e)}
.mh__wd,.mh__lv{position:absolute;left:0;top:0;height:24px;display:flex;align-items:center;transition:transform .5s var(--e),opacity .3s ease}
.mh__wd img{width:136px;height:15px;max-width:none}
.mh__lv{gap:8px;white-space:nowrap;transform:translateY(100%);opacity:0;font:600 16px/1 'Schibsted Grotesk',system-ui,sans-serif;letter-spacing:-.015em;color:#161513}
.mh.is-speaking .mh__wd{transform:translateY(-100%);opacity:0}
.mh.is-speaking .mh__lv{transform:none;opacity:1}
.mh__ic{width:22px;height:22px;flex:none;border-radius:50%;display:grid;place-items:center}
.mh__ic svg{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.mh__ic[data-k="saved"]{background:#E4F3D2;color:#3F6B17}
.mh__ic[data-k="done"]{box-shadow:inset 0 0 0 2px #7FAE45;color:#4F7A21}
.mh__ic[data-k="booked"]{background:#EF9F27;color:#fff}

.mh__menu{display:none;position:relative;flex:none;width:44px;height:44px;margin-left:-10px;padding:0;border:0;background:none;cursor:pointer}
.mh__menu span,.mh-fp__x span{position:absolute;left:12px;top:50%;width:20px;height:2px;margin-top:-1px;border-radius:1px;background:currentColor}
.mh__menu span:first-child{transform:translateY(-4px)}.mh__menu span:last-child{transform:translateY(4px)}

/* Features: a black window onto the hero's aurora, at night. It fades down on a soft edge (a gradient mask sliding
   down), and fades back up. Once open, the mask is dropped (is-settled) so nothing extra is composited while it stays.
   Closed by scrolling (is-quick), it's one quick fade of the whole window instead, so it stays on the compositor while the
   page's own scroll animation runs. */
.mh-fp{position:absolute;left:var(--x,0px);top:62px;z-index:3;width:320px;box-sizing:border-box;padding:12px 10px;border-radius:20px;overflow:hidden;background:#04050B;box-shadow:inset 0 0 0 1px rgba(255,255,255,.08);visibility:hidden;opacity:0;-webkit-mask-image:linear-gradient(#000 40%,transparent 60%);mask-image:linear-gradient(#000 40%,transparent 60%);-webkit-mask-size:100% 250%;mask-size:100% 250%;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:0 100%;mask-position:0 100%;transition:opacity .26s cubic-bezier(.4,0,.6,1),-webkit-mask-position .34s cubic-bezier(.4,0,.2,1),mask-position .34s cubic-bezier(.4,0,.2,1),visibility 0s linear .34s}
.mh-fp.is-open{visibility:visible;opacity:1;-webkit-mask-position:0 0;mask-position:0 0;transition:opacity .34s ease-out,-webkit-mask-position .5s cubic-bezier(.22,1,.36,1),mask-position .5s cubic-bezier(.22,1,.36,1),visibility 0s}
.mh-fp.is-open.is-settled{-webkit-mask-image:none;mask-image:none}
.mh-fp.is-quick{-webkit-mask-image:none;mask-image:none;transition:opacity .2s ease-out,visibility 0s linear .2s}
.mh-fp.is-quick .mh-fp__list li{opacity:1;transform:none;transition:none}
/* (06.10.2026) Closed, it is out of the page altogether: no box, no layer. site-header.js puts .is-there on as it opens
   and takes it off once the closing fade has ended. Hidden by visibility alone, the phone's sheet (fixed, the size of
   the screen, with the sky's WebGL canvas in it) stayed a layer after its first use: 390 x 663, 8.9 MB in Simulator
   Safari, drawn again on about 40% of the scrolled frames in the hero's stage. The gain is that layer. For Safari's
   bars on iOS 26 nothing changes: by WebKit's source a bar already lets go of a fixed box that is hidden by
   visibility, as it does of one with no box. ?fx=keepsheet: .is-there stays on, as before */
.mh-fp:not(.is-there){display:none}
.mh-fp__sky{position:absolute;inset:0;width:100%;height:100%;display:block;pointer-events:none}
.mh-fp__top,.mh-fp__more{display:none}
.mh-fp__list{position:relative;margin:0;padding:0;list-style:none}
.mh-fp__list li{opacity:0;transform:translateY(-4px);transition:opacity .16s cubic-bezier(.4,0,.6,1),transform .3s cubic-bezier(.4,0,.2,1)}
.mh-fp.is-open .mh-fp__list li{opacity:1;transform:none;transition:opacity .36s cubic-bezier(.22,1,.36,1) calc(var(--i) * 22ms),transform .44s cubic-bezier(.22,1,.36,1) calc(var(--i) * 22ms)}
.mh-fp a.mh-fp__a{display:block;padding:11px 14px;border-radius:12px;font:500 18px/1.2 'Schibsted Grotesk',system-ui,sans-serif;letter-spacing:-.01em;color:#fff;text-shadow:0 1px 14px rgba(4,5,11,.6);transition:background-color .15s ease}
.mh-fp a.mh-fp__a:hover,.mh-fp a.mh-fp__a:focus-visible{background:rgba(255,255,255,.1);color:#fff}
.mh-fp :focus-visible{outline:2px solid #fff;outline-offset:-2px}
.mh .mh-fp__x{color:#fff}

/* mobile: menu left, logo centred; Features is a full-screen window with its own bar */
@media (max-width:799px){
.mh__feat,.mh a.mh__link,.mh a.mh__btn{display:none}
.mh__menu{display:block}
.mh-fp{position:fixed;inset:0;width:auto;display:flex;flex-direction:column;padding:0 var(--gutter) max(28px,env(safe-area-inset-bottom));border-radius:0;box-shadow:none;overflow:auto}
/* the bar mirrors the header: the logo in white exactly where the header's is, close on the right */
.mh-fp__top{position:relative;flex:none;display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;height:var(--header-h);margin-bottom:20px}
.mh-fp__logo{grid-column:2;display:flex;align-items:center}
.mh-fp__logo>img{width:auto;height:33px;margin:-2px}
.mh-fp__logo>span{display:flex;align-items:center;width:136px;height:24px;margin-left:12px}
.mh-fp__logo>span img{width:140.32px;height:18.73px;max-width:none;margin:-2px}
.mh-fp__x{grid-column:3;justify-self:end;position:relative;width:44px;height:44px;margin-right:-10px;padding:0;border:0;border-radius:50%;background:none;cursor:pointer}
.mh-fp__x:hover{background:rgba(255,255,255,.1)}
.mh-fp__x span:first-child{transform:rotate(45deg)}.mh-fp__x span:last-child{transform:rotate(-45deg)}
.mh-fp a.mh-fp__a{padding:11px 0;font-size:22px;letter-spacing:-.02em}
.mh-fp a.mh-fp__a:hover{background:none}
.mh-fp__more{position:relative;display:grid;gap:24px;margin-top:auto;padding-top:32px}
.mh-fp__links{display:flex;gap:28px;padding-top:22px;border-top:1px solid rgba(255,255,255,.14)}
.mh-fp__links a{font:500 17px/1.2 'Schibsted Grotesk',system-ui,sans-serif;color:rgba(255,255,255,.8)}
.mh-fp__links a:hover{color:#fff}
.mh-fp__btns{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.mh-fp__more a.mh-fp__btn{display:flex;align-items:center;justify-content:center;height:50px;padding:0 12px;border-radius:12px;background:#fff;color:#0A1014;font:600 15.5px/1 'Schibsted Grotesk',system-ui,sans-serif;letter-spacing:-.01em;white-space:nowrap}
.mh-fp__more a.mh-fp__btn:hover{background:#eae5da;color:#0A1014}
.mh-fp__more a.mh-fp__btn--o{background:transparent;color:#fff;box-shadow:inset 0 0 0 1px rgba(255,255,255,.4)}
.mh-fp__more a.mh-fp__btn--o:hover{background:rgba(255,255,255,.1);color:#fff}
}
@media (prefers-reduced-motion:reduce){.mh *,.mh-fp,.mh-fp *{transition-duration:.01ms!important;transition-delay:0s!important}}
/* page to page (landing and pricing): the browser cross-fades the two pages instead of cutting between them (Chrome 126+,
   Safari 18.2+; elsewhere a normal page load). The header is the same picture on both, so it holds still through it */
@view-transition{navigation:auto}
::view-transition-old(root),::view-transition-new(root){animation-duration:.32s;animation-timing-function:cubic-bezier(.4,0,.2,1)}
@media (prefers-reduced-motion:reduce){@view-transition{navigation:none}}