/* Final rhythm layer (ronde 3, 11 oktober 2026). Loaded last on every route.
   One rule for the whole site: on a desktop screen every ordinary block fits one screen below the header,
   its title stays in view, and scrolling settles gently on the start of a block (proximity snap).
   Pinned scroll chapters keep their own height; phones, short screens and reduced motion scroll freely. */
:root{--block-h:calc(var(--viewport-height,100svh) - var(--header-height))}

@media (min-width:1101px) and (min-height:640px) and (hover:hover){
 /* Scroll snap removed 20-10 (Daan: the page should not settle into position by itself). */ html.motion-enabled{scroll-snap-type:none}
 main>section,main>figure,main>.light-world>section,.network-footer{scroll-snap-align:start;scroll-margin-top:var(--header-height)}
 .reveal{scroll-margin-top:0}

 /* Home, The Final range: heading, product and controls in one screen. */
 .collection{box-sizing:border-box;height:var(--block-h);min-height:560px;display:grid;grid-template-rows:auto minmax(0,1fr) auto;padding-top:clamp(20px,3vh,40px);padding-bottom:clamp(16px,2.5vh,32px)}
 .collection .collection-heading{margin-bottom:clamp(8px,2vh,24px)}
 .collection .model-showcase{height:auto;min-height:0;max-height:100%}
 .collection .model-visual{height:100%;padding-bottom:28px}
 .collection .model-visual img{height:calc(100% - 40px)}
 .collection .model-controls{margin-top:0}
 .collection .no-js-models{display:none}
 /* One grid for heading and product: label | title and model text | link and product. */
 .collection .collection-heading{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr) minmax(0,1fr);align-items:start;gap:0 40px}
 .collection .collection-heading>.eyebrow{margin:0;padding-top:1.1em}
 .collection .collection-title{margin:0;max-width:620px}
 .collection .collection-count{justify-self:end;margin:0;padding-top:1.1em}
 .collection .model-showcase{max-width:none;margin:0;grid-template-columns:minmax(0,1fr) minmax(0,1.25fr) minmax(0,1.75fr);gap:0 40px}
 .collection .model-info{grid-column:2;padding-left:0;max-width:420px}
 .collection .model-visual{grid-column:3}
 .collection .model-controls{grid-template-columns:minmax(0,1fr) minmax(0,2fr) minmax(0,1fr);gap:0 40px}
}

/* Technology page: four blocks, each one screen on a desktop (ronde 3). */
.difference-section{background:var(--fnl-delft);color:var(--fnl-white);--line:var(--fnl-white-16);--ink-muted:var(--fnl-white-72)}
.difference-section .driver-compare{color:var(--fnl-white)}
@media (min-width:1101px) and (min-height:640px) and (hover:hover){
 [data-page=technology] main>.editorial-section{box-sizing:border-box;min-height:var(--block-h);padding-top:clamp(40px,6vh,72px);padding-bottom:clamp(32px,5vh,56px)}
 [data-page=technology] #principle{height:var(--block-h);display:grid;grid-template-rows:auto minmax(0,1fr)}
 [data-page=technology] #principle .technology-study{min-height:0;margin-top:clamp(16px,3vh,32px);align-items:stretch}
 [data-page=technology] #principle .exploded-panel{height:100%;min-height:320px}
 [data-page=technology] #principle .layer-copy{align-self:center}
 [data-page=technology] #principle .layer-copy h3{font-size:clamp(32px,3vw,46px);margin:24px 0 16px}
 [data-page=technology] #principle .layer-copy p:not(.eyebrow):not(.field-note){min-height:0}
 [data-page=technology] .difference-section .driver-compare{margin:clamp(16px,3vh,40px) 0 0}
 [data-page=technology] .difference-section svg{max-height:calc(var(--block-h) - 500px)}
 [data-page=technology] .difference-section .driver-compare__notes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 16px}
 [data-page=technology] .difference-section .driver-compare__notes li{border-top:1px solid var(--fnl-white-16);border-bottom:0}
 [data-page=technology] .difference-section .editorial-heading h2{font-size:clamp(34px,3.4vw,52px)}
 [data-page=technology] .system-section .system-types{margin-top:clamp(20px,3vh,40px)}
 [data-page=technology] .system-section .system-type figure{height:clamp(200px,31vh,360px);margin-bottom:16px}
 [data-page=technology] .system-section .system-actions{margin-top:clamp(20px,3vh,36px)}
 [data-page=technology] .stator-questions .editorial-heading h2{margin:14px 0}
 [data-page=technology] .stator-questions .ask-maarten{margin-top:clamp(20px,3vh,36px);padding-top:18px}
 [data-page=technology] .stator-questions .ask-maarten p:not(.eyebrow){margin:8px 0 12px}
 [data-page=technology] .stator-questions .editorial-faq summary{padding-top:16px;padding-bottom:16px}
 [data-page=technology] .stator-questions .editorial-heading h2{font-size:clamp(34px,3.4vw,52px)}
}

/* Hero actions (ronde 3): one primary button, one text link, on one line and one height. */
.hero-actions{align-items:center;gap:16px 32px}
.hero-button{display:inline-flex;align-items:center;gap:14px;min-height:48px;padding:0 22px;border:1px solid var(--fnl-white-72);color:var(--fnl-white);font-size:14px;letter-spacing:.02em;transition:background-color .3s var(--ease),border-color .3s var(--ease),color .3s var(--ease)}
.hero-button:hover{background:var(--fnl-white);color:var(--fnl-delft);border-color:var(--fnl-white)}
.hero-button:focus-visible{outline:2px solid var(--fnl-white);outline-offset:4px}
.hero-actions .text-link{min-height:48px;display:inline-flex;align-items:center}

/* The listening experience (ronde 3): label, heading, text and link on one margin, grouped in the middle of the screen. */
@media (min-width:1101px){
 .manifesto-stage{justify-content:flex-start}
 .manifesto h2{margin:auto 0 0 0}
 .manifesto-bottom{margin:clamp(24px,4vh,44px) 0 auto 0;display:grid;justify-items:start;gap:28px}
 .manifesto .chapter-top{justify-content:flex-start}
}
@media (min-width:1101px){.manifesto h2{line-height:1.06}.manifesto h2 .statement-line{padding:2px 0}}

/* Menu (ronde 3): a calm, staggered reveal instead of everything appearing at once. Closing is quick. */
html.motion-enabled .site-menu{transition:opacity .5s cubic-bezier(.2,0,0,1)!important}
html.motion-enabled .site-menu:not(.is-open){opacity:0}
html.motion-enabled .site-menu .menu-art img{transition:transform 1.6s cubic-bezier(.2,0,0,1),opacity 1s ease}
html.motion-enabled .site-menu:not(.is-open) .menu-art img{transform:scale(1.18);opacity:0}
html.motion-enabled .site-menu.is-open .menu-art img{transform:scale(1.08);opacity:1}
html.motion-enabled .site-menu :is(.menu-layout nav>a,.menu-secondary a,.menu-art p,.menu-bottom,.menu-top){transition:opacity .7s cubic-bezier(.2,0,0,1),transform 1s cubic-bezier(.2,0,0,1)}
html.motion-enabled .site-menu:not(.is-open) :is(.menu-layout nav>a,.menu-secondary a,.menu-art p,.menu-bottom){opacity:0;transform:translateY(22px)}
html.motion-enabled .site-menu.is-open .menu-layout nav>a:nth-child(1){transition-delay:.08s}
html.motion-enabled .site-menu.is-open .menu-layout nav>a:nth-child(2){transition-delay:.14s}
html.motion-enabled .site-menu.is-open .menu-layout nav>a:nth-child(3){transition-delay:.2s}
html.motion-enabled .site-menu.is-open .menu-layout nav>a:nth-child(4){transition-delay:.26s}
html.motion-enabled .site-menu.is-open .menu-layout nav>a:nth-child(5){transition-delay:.32s}
html.motion-enabled .site-menu.is-open .menu-secondary a{transition-delay:.4s}
html.motion-enabled .site-menu.is-open .menu-art p{transition-delay:.5s}
html.motion-enabled .site-menu.is-open .menu-bottom{transition-delay:.46s}
html.motion-enabled .site-menu:not(.is-open),html.motion-enabled .site-menu:not(.is-open) *{transition-duration:.2s!important;transition-delay:0s!important}

/* Our story (ronde 3): the timeline reads left to right in one screen; Maarten's block fits one screen. */
@media (min-width:1101px) and (min-height:640px) and (hover:hover){
 [data-page=our-story] main>.editorial-section{box-sizing:border-box;min-height:var(--block-h);padding-top:clamp(40px,6vh,72px);padding-bottom:clamp(32px,5vh,56px)}
 [data-page=our-story] .story-timeline{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:0 clamp(20px,2.4vw,40px);margin-top:clamp(32px,6vh,72px);border-top:1px solid var(--line,var(--fnl-delft-16))}
 [data-page=our-story] .story-timeline li{display:grid;grid-template-columns:1fr;grid-template-rows:auto auto;align-content:start;gap:18px;padding:28px 0 0;border:0;position:relative}
 [data-page=our-story] .story-timeline li>div{max-width:none}
 [data-page=our-story] .story-timeline li::before{content:'';position:absolute;top:-4px;left:0;width:7px;height:7px;border-radius:50%;background:currentColor}
 [data-page=our-story] .story-timeline li>span{font-size:clamp(34px,3vw,48px);font-weight:300;line-height:1}
 [data-page=our-story] .story-timeline li>div h3{font-size:19px;font-weight:400;margin:0 0 10px}
 [data-page=our-story] .story-timeline li>div p{font-size:15px;line-height:1.6;margin:0;color:var(--ink-muted,var(--fnl-delft-72))}
 [data-page=our-story] .maarten-section .maarten-slots{margin-top:clamp(24px,4vh,48px)}
 [data-page=our-story] .maarten-section .maarten-poster .poster{aspect-ratio:auto;height:clamp(240px,36vh,380px)}
 [data-page=our-story] .maarten-section .ask-maarten{margin-top:clamp(20px,3vh,36px);padding-top:18px}
 [data-page=our-story] .maarten-section .ask-maarten p:not(.eyebrow){margin:8px 0 12px}
}

/* Collection page (ronde 3): each family is one block below header and sub-navigation. */
@media (min-width:1101px) and (min-height:640px) and (hover:hover){
 .collection-page .range-family{box-sizing:border-box;min-height:calc(var(--block-h) - var(--range-nav-height,62px));display:grid;align-content:center;scroll-snap-align:start;scroll-margin-top:calc(var(--header-height) + var(--range-nav-height,62px));padding:clamp(24px,4vh,48px) 0}
 .collection-page .range-model-photo{display:block;height:clamp(170px,26vh,300px);aspect-ratio:auto;overflow:hidden}
 .collection-page .range-model-photo img{height:100%;width:100%;object-fit:cover}
 .collection-page .range-section-intro{padding-bottom:clamp(16px,3vh,32px)}
 .collection-page #compare{scroll-margin-top:calc(var(--header-height) + var(--range-nav-height,62px))}
}

/* Technology hero: Astra's stator macro, the dark side carries the copy. */
.wavefield-hero-image{left:auto!important;right:0;width:72%!important;object-position:30% 50%;-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 30%);mask-image:linear-gradient(90deg,transparent 0,#000 30%)}
@media (max-width:760px){.wavefield-hero-image{width:100%!important;opacity:.55}}

/* Product pages (ronde 3): every stop is one screen below header and product navigation. */
@media (min-width:1101px) and (min-height:640px) and (hover:hover){
 .product-page{--pnav:64px}
 .product-page main>section,.product-page main>aside{scroll-margin-top:calc(var(--header-height) + var(--pnav))}
 .product-page .product-overview .product-editorial{scroll-snap-align:start;scroll-margin-top:calc(var(--header-height) + var(--pnav))}
 .product-page .product-overview .product-room{scroll-snap-align:start;scroll-margin-top:calc(var(--header-height) + var(--pnav));height:calc(var(--block-h) - var(--pnav));width:100%;aspect-ratio:auto;max-height:none;overflow:hidden}
 .product-page .product-overview .product-room img{height:100%;width:100%;object-fit:cover}
 .product-page .product-system .system-questions{scroll-snap-align:start;scroll-margin-top:calc(var(--header-height) + var(--pnav));min-height:calc(var(--block-h) - var(--pnav));box-sizing:border-box;align-content:center}
 .product-page .product-specifications{padding-top:clamp(40px,6vh,72px);padding-bottom:clamp(32px,5vh,56px)}
 .product-page .spec-table dl>div{padding-top:12px;padding-bottom:12px}
}

/* Exploded view with Astra's photographic layers (stator, film, stator from the DXF pattern). */
.exploded-panel .layer{border:0!important;background:none!important;box-shadow:none!important;overflow:visible!important}
.exploded-panel .layer>img{position:absolute!important;inset:0!important;width:100%!important;height:100%!important;left:0!important;top:0!important;object-fit:contain!important}
.exploded-panel .film{background:none}
.exploded-panel .layer{width:31%!important;left:34.5%!important}
.exploded-panel .rear{transform:translate3d(calc(-74% * var(--spread)),0,calc(-40px * var(--spread))) rotateY(-20deg) rotateX(3deg)!important;filter:brightness(1.35)!important}
.exploded-panel .front{transform:translate3d(calc(74% * var(--spread)),0,calc(40px * var(--spread))) rotateY(-20deg) rotateX(3deg)!important;filter:brightness(1.75) contrast(1.05)!important}
.exploded-panel .film{transform:rotateY(-20deg) rotateX(3deg)!important;filter:brightness(1.3)}

/* Home (ronde 3): story and closing on the same margin as every other block. */
@media (min-width:1101px){
 .origin{padding-left:0!important;padding-right:0!important}
 .listen-copy{padding-left:0!important;padding-right:0!important}
}
@media (min-width:1101px) and (min-height:640px) and (hover:hover){
 .origin{box-sizing:border-box;height:var(--block-h);min-height:0!important;padding-top:clamp(32px,5vh,64px)!important;padding-bottom:clamp(32px,5vh,64px)!important;align-items:stretch}
 .origin .origin-portrait{aspect-ratio:auto;height:100%;max-height:none}
 .origin .origin-copy{align-self:center}
}
@media (min-width:1101px) and (min-height:640px) and (hover:hover){
 .maarten-film{box-sizing:border-box;height:var(--block-h);display:grid;grid-template-rows:minmax(0,1fr) auto;padding-top:clamp(24px,4vh,48px);padding-bottom:clamp(24px,4vh,48px)}
 .maarten-film .poster{height:100%;max-height:none;aspect-ratio:auto}
}

/* ====== One page grid (ronde 3, alignment audit) ==========================================================
   Twelve columns with one gap on every desktop page. Label 1-3, heading 4-8, introduction 9-12;
   three-up content spans four columns each, so a third card always starts under the introduction. */
:root{--grid-gap:clamp(24px,2.4vw,40px);--col-off:calc((100% + var(--grid-gap)) / 12)}
@media (min-width:1101px){
 .editorial-heading,.range-section-intro{display:grid!important;grid-template-columns:repeat(12,minmax(0,1fr))!important;column-gap:var(--grid-gap)!important;row-gap:0;align-items:start}
 .editorial-heading>.eyebrow,.range-section-intro>.eyebrow{grid-column:1/4;padding-top:.85em}
 .editorial-heading>h2,.range-section-intro>h2{grid-column:4/9}
 .editorial-heading>p:not(.eyebrow),.range-section-intro>p:not(.eyebrow){grid-column:9/13;max-width:none;padding-top:.85em}
 .numbered-grid,.system-types,.range-grid,.editorial-comparison,.journal-grid,.request-progress,.model-choice-groups{column-gap:var(--grid-gap)!important}
 .numbered-grid,.system-types,.range-grid,.request-progress,.model-choice-groups{grid-template-columns:repeat(3,minmax(0,1fr))!important}
 .range-family-heading{display:grid!important;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--grid-gap)}
 .range-family-heading h3{grid-column:1/9}
 .range-family-heading p{grid-column:9/13;max-width:none}
 /* Home collection on the same twelve columns. */
 .collection .collection-heading{grid-template-columns:repeat(12,minmax(0,1fr))!important;column-gap:var(--grid-gap)!important}
 .collection .collection-heading>.eyebrow{grid-column:1/4}
 .collection .collection-title{grid-column:4/10}
 .collection .collection-count{grid-column:10/13}
 .collection .model-showcase{grid-template-columns:repeat(12,minmax(0,1fr))!important;column-gap:var(--grid-gap)!important}
 .collection .model-info{grid-column:4/8}
 .collection .model-visual{grid-column:8/13}
 .collection .model-controls{grid-template-columns:repeat(12,minmax(0,1fr))!important;column-gap:var(--grid-gap)!important}
 .collection .model-controls>.eyebrow{grid-column:1/4}
 .collection .model-tabs{grid-column:4/11}
 .collection .model-arrows{grid-column:11/13;justify-self:end}
 /* Story timeline starts under the heading column. */
 [data-page=our-story] .story-timeline{margin-left:calc(var(--col-off) * 3)}
 /* The listening request sits on columns 4-12, like the heading above it. */
 .request-shell{max-width:none!important;margin-left:calc(var(--col-off) * 3)!important}
 .model-unsure-row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:var(--grid-gap)}
 .model-unsure-row .text-link{grid-column:3;justify-self:start}
}
@media (min-width:1101px){
 .editorial-section:not(.stator-questions)>.editorial-faq{margin-left:calc(var(--col-off) * 3)!important;max-width:none}
 .stator-questions .editorial-heading{display:block!important}
 .stator-questions .editorial-heading>p:not(.eyebrow){padding-top:0}
 .product-editorial>.eyebrow{padding-top:15px}
}
@media (min-width:1101px){
 .product-editorial{grid-template-columns:repeat(12,minmax(0,1fr))!important;column-gap:var(--grid-gap)!important}
 .product-editorial>.eyebrow{grid-column:1/4;padding-top:27px!important}
 .product-editorial>div{grid-column:4/13}
}
@media (min-width:1101px){
 .product-editorial>.eyebrow{padding-top:12px!important;margin-top:15px}
 .product-system .system-path{display:grid!important;grid-template-columns:repeat(12,minmax(0,1fr))!important;column-gap:var(--grid-gap)!important;padding-left:var(--page-gutter);padding-right:var(--page-gutter)}
 .product-system .system-path>li{grid-column:span 3}
}
@media (min-width:1101px){.product-hero-copy{left:var(--page-gutter)!important;margin-left:0!important;padding-left:0!important}}

/* ====== Grid pass 2 (alignment audit): every remaining block on the twelve columns. ====== */
@media (min-width:1101px){
 :root{--g12:repeat(12,minmax(0,1fr))}
 .hero-copy{left:var(--page-gutter)!important}
 .origin{grid-template-columns:var(--g12)!important;column-gap:var(--grid-gap)!important}
 .origin .origin-portrait{grid-column:1/7}
 .origin .origin-copy{grid-column:7/13}
 .cinema{grid-template-columns:var(--g12)!important;column-gap:var(--grid-gap)!important}
 .cinema>.eyebrow{grid-column:1/4}
 .cinema>div{grid-column:4/10}
 .cinema>.text-link{grid-column:10/13;justify-self:end}
 .technology-study{grid-template-columns:var(--g12)!important;column-gap:var(--grid-gap)!important}
 .technology-study>.exploded-panel{grid-column:1/8}
 .technology-study>.layer-copy{grid-column:8/13}
 .driver-compare__grid{column-gap:var(--grid-gap)!important}
 .story-prose{grid-template-columns:var(--g12)!important;column-gap:var(--grid-gap)!important}
 .story-prose>p:first-child{grid-column:4/9}
 .story-prose>p:nth-child(2){grid-column:9/13}
 .archive-feature{grid-template-columns:var(--g12)!important;column-gap:var(--grid-gap)!important}
 .archive-feature>img{grid-column:1/7}
 .archive-feature>figcaption{grid-column:7/13}
 .range-intro{grid-template-columns:var(--g12)!important;column-gap:var(--grid-gap)!important}
 .range-intro>div:first-child{grid-column:1/9}
 .range-intro-note{grid-column:9/13;justify-self:start!important;max-width:none}
 .range-listen-copy,.product-listen-content{padding-left:0!important}
 .system-actions{display:grid!important;grid-template-columns:var(--g12);column-gap:var(--grid-gap)}
 .system-actions>a:first-child{grid-column:1/4}
 .system-actions>a:nth-child(2){grid-column:4/7}
 .support-grid,.press-list{column-gap:var(--grid-gap)!important}
}
@media (min-width:1101px){
 .press-list>a{grid-template-columns:var(--g12)!important;column-gap:var(--grid-gap)!important}
 .press-list>a>.eyebrow{grid-column:1/4}
 .press-list>a>h3,.press-list>a>p:not(.eyebrow),.press-list>a>span:last-child{grid-column:4/13!important}
 .difference-section .driver-compare__notes{column-gap:var(--grid-gap)!important}
}

/* Collection fit pass (11 oktober, avond). Nothing may run through the model tabs, at any window height:
   the block grows when its content needs more room, the product view has its own fixed frame and the
   model type scales with the window height so a MacBook window still shows the range in one screen. */
@media (min-width:1101px) and (min-height:640px) and (hover:hover){
 .collection{height:auto;min-height:var(--block-h);grid-template-rows:auto 1fr auto}
 .collection .model-showcase{max-height:none;align-items:center;padding:clamp(4px,1.2vh,12px) 0}
 .collection .model-visual{height:clamp(320px,calc(var(--block-h) - 300px),680px);padding-bottom:0}
 .collection .model-info h3{font-size:clamp(64px,10.5vh,105px);margin-top:clamp(8px,1.6vh,18px);margin-bottom:clamp(10px,2vh,20px)}
 .collection .model-line{font-size:clamp(20px,2.9vh,25.6px);margin-bottom:clamp(10px,2vh,18px)}
 .collection .model-foot{margin-top:clamp(12px,2.4vh,24px)}
}

/* Home, Final Wavefield: Astra's photographic layers (stator, diaphragm, stator) replace the drawn panel.
   Same scroll chapter, same opening movement; the layers are cut-outs, so they fit their frame whole. */
.panel-stack .stator-photo{width:100%;height:100%;left:0;top:0;object-fit:contain}
.panel-stack .stator{border-radius:0;overflow:visible}
.panel-stack .diaphragm{inset:0;border:0;background:none;box-shadow:none}
.panel-stack .stator-back{filter:brightness(1.35)}
.panel-stack .stator-front{filter:brightness(1.75) contrast(1.05)}
.panel-stack .diaphragm{filter:brightness(1.3)}

/* Home, Final Wavefield: panels stop above their labels. */
.panel-stack{height:72%;top:45%}

/* Hero fit (11 oktober, avond). The copy hung from 35% of the screen, so on a MacBook window its buttons ran into
   the scroll cue ("The listening experience"). It now stands on a fixed baseline above the hero-bottom row and the
   heading scales with the window height. */
@media (min-width:761px){
 .hero-copy{top:auto!important;bottom:clamp(96px,13.5vh,150px)}
 .hero-copy h1{font-size:min(clamp(56px,6.6vw,106px),10.5vh)}
}

/* Home, technology notes: hand over one after the other, never two texts on top of each other. */
.principle-notes p[aria-hidden=true]{transition:opacity .12s ease,transform .12s ease}
.principle-notes p[aria-hidden=false]{transition:opacity .28s ease .14s,transform .32s var(--ease) .14s}

/* Block fit pass (11 oktober, avond): the same rule as the collection for every block that had a fixed height.
   A block is at least one screen and grows when its content needs more room; its image keeps its own frame. */
@media (min-width:1101px) and (min-height:640px) and (hover:hover){
 [data-page=technology] #principle{height:auto;min-height:var(--block-h)}
 [data-page=technology] #principle .exploded-panel{height:clamp(320px,calc(var(--block-h) - 280px),640px)}
 .origin{height:auto;min-height:var(--block-h)}
 .origin .origin-portrait{height:calc(var(--block-h) - 2 * clamp(32px,5vh,64px))}
 .maarten-film{height:auto;min-height:var(--block-h)}
 .maarten-film .poster{height:clamp(320px,calc(var(--block-h) - 180px),900px)}
}

/* Content pages with a photo hero: transparent header over the photograph, solid once the hero has passed (besluit Daan 12-10, 1d). */
.editorial-page.header-over-hero .site-header{background:linear-gradient(rgb(10 18 26/.62),rgb(10 18 26/0));transition:background-color .4s,background .4s}
.editorial-page.header-over-hero .site-header.on-content{background:var(--fnl-delft)}