/* Final refinement layer (feedback Jack, Ice House, 18 oktober 2026). Loaded last on every route.
   Refining what is there, no new treatments: one heading style, three CTA levels, more air, slower motion. */
:root{--ease-slow:cubic-bezier(.22,.61,.36,1);--motion-slow:.9s}

/* 7. Logo: the FINAL marque with 'Sinds 1989' (Ice House artwork, positive and negative). */
.site-header .brand,.site-header .brand img{width:67px;height:64px}
.site-menu .menu-top>a img{width:67px;height:64px}
.footer-signature img{width:80px;height:76px}
@media (max-width:760px){.site-header .brand,.site-header .brand img,.site-menu .menu-top>a img{width:54px;height:52px}}

/* 1. Headlines: sentence case in Effra Light is the one heading style; capitals only for labels and navigation. */
.hero-copy h1{text-transform:none!important;letter-spacing:-.03em!important;font-weight:300;line-height:1!important;font-size:min(clamp(64px,7.2vw,128px),13.5vh)!important}
@media (max-width:760px){.hero-copy h1{font-size:clamp(46px,13vw,64px)!important;letter-spacing:-.025em!important}}

/* 5. Calls to action: three levels.
   Primary = outlined button (key actions, Arrange a listen, form submits). Secondary = underlined text with arrow.
   Tertiary = plain text link. The large closing 'Arrange a listen' stays an editorial line. */
.solid-button,body[data-page=home-theater] .ht-submit{display:inline-flex;align-items:center;justify-content:center;gap:14px;min-height:52px;padding:0 24px;border:1px solid currentColor;border-radius:0;background:transparent;color:var(--fnl-delft);font:inherit;font-size:14px;letter-spacing:.01em;text-transform:none;cursor:pointer;transition:background-color .45s var(--ease-slow),color .45s var(--ease-slow),border-color .45s var(--ease-slow)}
.solid-button:hover{background:var(--fnl-delft);color:var(--fnl-white);border-color:var(--fnl-delft)}
[data-register=dark] .solid-button,.maarten-section .solid-button,.request-shell.ht-form .solid-button,body[data-page=home-theater] .ht-submit{color:var(--fnl-white)}
[data-register=dark] .solid-button:hover,.request-shell.ht-form .solid-button:hover,body[data-page=home-theater] .ht-submit:hover{background:var(--fnl-white);color:var(--fnl-delft);border-color:var(--fnl-white)}
.solid-button:focus-visible,body[data-page=home-theater] .ht-submit:focus-visible{outline:2px solid currentColor;outline-offset:4px}
.solid-button:active,.hero-button:active{transform:translateY(1px)}
.hero-button{transition:background-color .45s var(--ease-slow),color .45s var(--ease-slow),border-color .45s var(--ease-slow)}
.text-link,.subtle-link{transition:border-color .45s var(--ease-slow),color .45s var(--ease-slow)}

/* Forms: enough contrast, clear states (rest, hover, focus, invalid, disabled). */
.field input,.field select,.field textarea{border-color:rgb(19 30 41/.55);transition:border-color .35s var(--ease-slow),box-shadow .35s var(--ease-slow)}
.field input:hover,.field select:hover,.field textarea:hover{border-color:var(--fnl-delft)}
.field input:focus-visible,.field select:focus-visible,.field textarea:focus-visible{outline:2px solid var(--fnl-delft);outline-offset:2px;border-color:var(--fnl-delft)}
.field input:user-invalid,.field select:user-invalid,.field textarea:user-invalid{border-color:#a1342b;box-shadow:inset 0 -2px 0 #a1342b}
body[data-page=home-theater] .ht-form .field input:user-invalid,body[data-page=home-theater] .ht-form .field textarea:user-invalid{border-bottom-color:#e08a7f}
.field select:disabled,.field input:disabled{opacity:.5}

/* 9. Motion: fewer pinned chapters, slower and gentler. Only the hero (lighting reveal) and the technology
   chapter (the opening panel) stay pinned; the listening experience and the closing scroll normally. */
.motion-enabled .manifesto,.motion-enabled .listening{height:auto!important;min-height:0!important}
.motion-enabled .manifesto-stage{position:relative!important;height:auto!important;min-height:max(calc(var(--viewport-height,100svh) * 1),740px)}
.motion-enabled .listening-stage{position:relative!important;height:auto!important;min-height:max(calc(var(--viewport-height,100svh) * 1),760px)}
[data-reveal]{transition:opacity 1.3s var(--ease-slow),transform 1.5s var(--ease-slow)!important}
[data-reveal].awaiting{transform:translate3d(0,18px,0)}
.statement-line>span,.line-reveal>span,.manifesto-bottom,.listen-bottom{will-change:transform,opacity}

/* 6. The range: one card system for all six. The product itself on a consistent light ground, at its relative
   height; the family ('Configurable' / 'Full-range') as a quiet descriptor under the name. */
.collection-page .range-family-all{min-height:0!important;display:block!important;padding-top:clamp(24px,4vh,48px)!important}
.collection-page .range-grid-six{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;column-gap:var(--grid-gap,32px)!important;row-gap:clamp(56px,8vh,96px)!important}
.collection-page .range-model-product{position:relative;display:flex!important;align-items:flex-end;justify-content:center;height:clamp(300px,40vh,460px)!important;margin-bottom:24px;background:var(--fnl-delft-08);overflow:hidden}
.collection-page .range-model-product img{width:auto!important;height:calc(var(--model-scale,100%) * .9)!important;max-width:80%;object-fit:contain!important;margin-bottom:5%;transition:transform 1.2s var(--ease-slow)}
.collection-page .range-model:hover .range-model-product img{transform:translateY(-6px)}
.collection-page .range-model-family{margin:6px 0 14px;font-size:var(--text-label);letter-spacing:var(--tracking-label);text-transform:uppercase;color:var(--fnl-delft-72)}
.collection-page .range-family-notes{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:var(--grid-gap,32px);margin:clamp(56px,8vh,88px) 0 0;padding-top:24px;border-top:1px solid var(--fnl-delft-16)}
.collection-page .range-family-notes dt{font-size:var(--text-label);letter-spacing:var(--tracking-label);text-transform:uppercase;color:var(--fnl-delft);margin:0 0 8px}
.collection-page .range-family-notes dd{margin:0;max-width:34em;font-size:16px;font-weight:300;line-height:1.6;color:var(--fnl-delft-72)}
@media (max-width:1100px){.collection-page .range-grid-six{grid-template-columns:repeat(2,minmax(0,1fr))!important}}
@media (max-width:760px){.collection-page .range-grid-six,.collection-page .range-family-notes{grid-template-columns:1fr!important}.collection-page .range-family-notes{row-gap:20px}}

/* 8. More air around illustrations and copy in the functional sections (Jack: "allowing the elements to breathe"). */
@media (min-width:1101px){
 main>.editorial-section{padding-top:clamp(96px,13vh,160px)!important;padding-bottom:clamp(96px,13vh,160px)!important}
 .editorial-section .editorial-heading{margin-bottom:clamp(48px,7vh,88px)}
 .system-types,.numbered-grid,.journal-grid,.editorial-comparison{row-gap:clamp(48px,7vh,80px)!important}
 .system-types .system-type figure,.driver-compare,.dealer-map,.request-shell,.advisor{margin-top:clamp(24px,4vh,48px)}
 .request-form .form-grid{row-gap:clamp(24px,3.4vh,36px)!important}
 .spec-table tr>*{padding-top:16px!important;padding-bottom:16px!important}
}

/* Lessons from the review of 14-10: a logical reading order and reading text that reads. */
[data-register=dark]{--ink-muted:rgb(255 255 255/.78)}
.editorial-heading>p:not(.eyebrow){font-size:clamp(16px,1.12vw,19px);line-height:1.6}
@media (min-width:1101px){
 [data-page=our-story] .story-prose{display:block!important}
 [data-page=our-story] .story-prose>p{grid-column:auto!important;max-width:34em;margin:0 0 1em!important;margin-left:calc(var(--col-off,8.33%) * 3)!important}
}
[data-page=our-story] .story-prose>p{font-size:clamp(17px,1.2vw,20px)!important;font-weight:300;line-height:1.65}

/* ---------- Opfrisronde 18 oktober (Daan: andere pagina's opfrissen) ---------- */
/* Type heroes (support, contact, privacy, events, advisor): the corner hairlines read as an empty frame. In their place
   a quiet, still perforation that fades out to the left, the same language as the listening chapter on the home page. */
.type-hero::before{top:0!important;bottom:0!important;right:0!important;width:52%!important;border:0!important;background-image:radial-gradient(rgb(255 255 255/.24) 1.1px,transparent 1.6px);background-size:13px 11.26px;-webkit-mask-image:radial-gradient(ellipse 85% 80% at 100% 42%,#000 8%,transparent 72%);mask-image:radial-gradient(ellipse 85% 80% at 100% 42%,#000 8%,transparent 72%)}
@media(max-width:760px){.type-hero::before{width:100%!important;opacity:.55}}
/* Journal articles: numbered steps with a hairline, the side note stays in view while reading. */
.article-layout .reading-column{counter-reset:step}
.article-layout .reading-column>h2{counter-increment:step;font-size:clamp(28px,2.6vw,40px);line-height:1.15;letter-spacing:-.02em;margin:0 0 16px;padding-top:26px;border-top:1px solid var(--line)}
.article-layout .reading-column>h2::before{content:counter(step,decimal-leading-zero);display:block;margin-bottom:18px;font-size:11px;letter-spacing:.13em;font-weight:400;color:var(--ink-muted)}
.article-layout .reading-column>h2~h2{margin-top:clamp(56px,8vh,88px)}
.article-layout .reading-column>p{max-width:36em}
.article-layout>aside{position:sticky;top:calc(var(--header-height) + 40px);align-self:start}
/* Community: the two invitations as calmer cards; the label above already names them. */
.editorial-comparison h3{font-size:clamp(30px,3vw,46px)!important;margin:20px 0 18px!important}
/* Menu (18 oktober, Daan: mooi maar saai). One picture per main item, crossfading with a slow zoom; the hovered item
   moves in with an arrow while the others step back. */
.site-menu .menu-art{height:min(66vh,700px)}
.site-menu .menu-art-item{position:absolute;inset:0 0 56px;margin:0;opacity:0;transition:opacity .8s ease}
.site-menu .menu-art-item.is-active{opacity:1}
.site-menu .menu-art-item img{width:100%;height:100%;object-fit:cover;filter:none!important;transform:scale(1.06);transition:transform 2.6s cubic-bezier(.2,0,0,1)!important;opacity:1!important}
.site-menu .menu-art-item.is-active img{transform:scale(1)}
.site-menu .menu-art-item figcaption{position:absolute;left:0;right:0;top:calc(100% + 18px);font-size:14px;font-weight:300;line-height:1.5;color:var(--ink-muted);opacity:0;transform:translateY(6px);transition:opacity .5s ease,transform .6s cubic-bezier(.2,0,0,1)}
.site-menu .menu-art-item.is-active figcaption{opacity:1;transform:none;transition-delay:.12s}
.site-menu .menu-art>p{left:auto;right:0;bottom:0;font-size:11px;letter-spacing:.18em;color:var(--ink-muted)}
.menu-layout nav>a{transition:opacity .45s ease,padding .55s cubic-bezier(.2,0,0,1)!important}
.menu-layout nav>a::after{content:'→';margin-left:auto;font-size:.6em;opacity:0;transform:translateX(-14px);transition:opacity .4s ease,transform .55s cubic-bezier(.2,0,0,1)}
@media(hover:hover){
 .menu-layout nav:has(>a:hover)>a:not(:hover){opacity:.42}
 .menu-layout nav>a:hover{padding-left:14px}
 .menu-layout nav>a:hover::after{opacity:1;transform:none}
}
.menu-layout nav>a:focus-visible::after{opacity:1;transform:none}
.menu-layout nav>a[aria-current=page]>span{color:var(--fnl-white)}
.site-menu .menu-layout nav:focus{outline:0}

/* ---------- Schaal en families (overleg 19-10, besluiten Daan 20-10) ---------- */
/* Lineup: seven positions, the 160 cm microphone between the Final 1700 and the Final 3200 separates the two ranges. */
.collection-page .range-lineup{grid-template-columns:repeat(3,1fr) .7fr repeat(3,1fr)!important}
.collection-page .lineup-mic .lineup-image img{opacity:.55}
.collection-page .lineup-mic .lineup-label{font-size:11px!important;letter-spacing:.13em;text-transform:uppercase;color:var(--fnl-delft-72);border-top-color:transparent;justify-content:center;padding-top:18px}
/* Catalogue: two families, each with a short introduction above its three cards. */
.collection-page .range-family{min-height:0!important;display:block!important;padding-top:clamp(48px,7vh,88px)!important}
.collection-page .range-family-intro{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--grid-gap,32px);align-items:end;margin-bottom:clamp(28px,4vh,44px);padding-bottom:20px;border-bottom:1px solid var(--line)}
.collection-page .range-family-intro .eyebrow{grid-column:1/-1;margin:0 0 14px;color:var(--fnl-delft-72)}
.collection-page .range-family-intro h3{grid-column:1/7;margin:0;font-size:clamp(28px,2.6vw,42px);line-height:1.1;letter-spacing:-.02em;font-weight:300}
.collection-page .range-family-intro p:not(.eyebrow){grid-column:7/13;margin:0;max-width:36em;font-size:16px;line-height:1.6;font-weight:300;color:var(--fnl-delft-72)}
.collection-page .range-grid-three{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;column-gap:var(--grid-gap,32px)!important;row-gap:clamp(48px,7vh,80px)!important}
/* In every card the same 160 cm microphone stands beside the loudspeaker, at the same scale. */
.collection-page .range-model-product{gap:0}
.collection-page .range-model-product img.range-mic{height:calc(var(--mic-scale,78%) * .9)!important;opacity:.42;margin-left:-8%;max-width:none}
@media (max-width:1100px){.collection-page .range-grid-three{grid-template-columns:repeat(2,minmax(0,1fr))!important}}
@media (max-width:760px){.collection-page .range-grid-three{grid-template-columns:1fr!important}.collection-page .range-family-intro h3,.collection-page .range-family-intro p:not(.eyebrow){grid-column:1/-1}.collection-page .range-family-intro p:not(.eyebrow){margin-top:12px}.collection-page .range-lineup{grid-template-columns:repeat(3,1fr) .7fr repeat(3,1fr)!important;min-width:740px}}
/* Model pages: every model at its real height within the same frame (the tallest fills it), the microphone beside it. */
.product-gallery{--stage-h:clamp(350px,calc(calc(var(--viewport-height, 100svh) * 1) - 395px),580px)}
.product-scale{height:var(--stage-h);display:flex;align-items:flex-end;justify-content:center;gap:0}
.product-scale .product-viewer{--viewer-height:calc(var(--stage-h) * var(--s,1));height:var(--viewer-height)!important;flex:0 0 auto;width:calc(var(--stage-h) * .5)}
.product-mic{height:calc(var(--stage-h) * .7837);width:auto;opacity:.5;margin-left:calc(var(--stage-h) * -.12);pointer-events:none}
@media(max-width:760px){.product-gallery{--stage-h:410px}}
/* Scale switch in the collection (Daan 20-10): hairline track, a small knob that glides; the microphone in every
   card fades in beside the loudspeaker. */
.collection-page .range-scale-row{display:flex;justify-content:flex-end;margin:-8px 0 14px}
.collection-page .scale-toggle{white-space:nowrap;display:inline-flex;align-items:center;gap:14px;margin:0;padding:6px 0;background:none;border:0;cursor:pointer;color:var(--fnl-delft);font:inherit;text-align:left}
.scale-toggle-track{position:relative;flex:none;width:38px;height:20px;border:1px solid var(--fnl-delft-72);border-radius:999px;transition:background-color .45s var(--ease-slow,ease),border-color .45s}
.scale-toggle-track>span{position:absolute;top:3px;left:3px;width:12px;height:12px;border-radius:50%;background:var(--fnl-delft);transition:transform .55s var(--ease-slow,ease),background-color .45s}
.scale-toggle[aria-pressed=true] .scale-toggle-track{background:var(--fnl-delft);border-color:var(--fnl-delft)}
.scale-toggle[aria-pressed=true] .scale-toggle-track>span{transform:translateX(18px);background:var(--fnl-white)}
.scale-toggle-text{display:flex;flex-direction:column;gap:3px;font-size:14px;font-weight:400;line-height:1.2}
.scale-toggle-text small{font-size:12px;font-weight:300;color:var(--fnl-delft-72)}
.scale-toggle:hover .scale-toggle-track{border-color:var(--fnl-delft)}
.scale-toggle:focus-visible{outline:1px solid var(--fnl-delft);outline-offset:6px}
.collection-page .range-model-product img.range-mic{transition:opacity .7s var(--ease-slow,ease),transform .9s var(--ease-slow,ease),margin .9s var(--ease-slow,ease),width .9s var(--ease-slow,ease)}
.collection-page:not(.show-scale) .range-model-product img.range-mic{opacity:0!important;transform:translateX(18px);width:0!important;margin-left:0!important}
@media (max-width:760px){.collection-page .range-scale-row{justify-content:flex-start}}
.collection-page .range-catalogue .range-section-intro>p[data-reveal]{font-size:16px;line-height:1.8;max-width:330px;padding-top:6px;color:var(--fnl-charcoal)}
/* Model pages: the header lies transparent over the studio picture, which now runs to the top edge (Daan 21-10). */
.product-page.product-header-over .site-header{background:transparent;transition:background-color .4s ease}
.product-page.product-header-over .site-header.on-content{background:var(--fnl-delft)}
/* The navigation is visible on the first screen (actielijst 29-10): transparent over the studio picture, Delft once
   the picture has passed. */
.product-page.product-header-over .site-header{transition:opacity .6s ease,transform .7s cubic-bezier(.2,0,0,1),background-color .4s ease}
.product-page.product-header-over .product-hero-art{top:0}

/* Hybrid cards (review Maarten 23-10): the variant name sits small beside the model number, like a suffix. */
.range-model-title h4 .range-model-variant{font-size:.34em;margin-left:.45em;letter-spacing:.01em;vertical-align:baseline}
/* Fixes from the mobile pass that hold at every width (22-10): the journal pictures ignored their ratio (the height
   attribute won); the Our story founder caption sat white on the white chair, now on the soft Delft shade. */
.journal-grid img{height:auto}
.st-cover-portrait::after{content:'';position:absolute;inset:auto 0 0;height:38%;background:linear-gradient(transparent,rgb(19 30 41/.62));pointer-events:none}
.st-cover-portrait figcaption{z-index:1}
/* ---------- Mobile pass 21-10 (phones and iPad portrait; desktop above 1100px unchanged) ---------- */
@media (max-width:1100px){
 /* Collection: the card ground took its width from aspect-ratio x height and ran past the column, which made phones
    zoom the whole page out. The card now keeps to its column. */
 .collection-page .range-model-product{width:100%}
 /* Menu: the art column is too narrow for its caption, which ran into 'As performed'. */
 .site-menu .menu-art-item figcaption{display:none}
 /* Footer links: a full 44px tap height on tablets too. */
 .network-footer nav a{min-height:44px}
}
@media (max-width:760px){
 /* Model pages: the studio picture fills more of the opening screen, so the model no longer floats above an empty band. */
 .product-page.product-header-over .product-hero-art{height:clamp(320px,calc(var(--viewport-height, 100svh) * .56),520px)}
 /* Home theatre: a squarer opening picture, so the title has room below the header. */
 body[data-page=home-theater] .ht-hero-image{aspect-ratio:1/1;object-position:56% center}
 body[data-page=home-theater] .ht-hero-copy{bottom:28px}
 /* Smallest labels up to the label size used elsewhere. */
 .driver-compare__label{font-size:11px}
}
/* Touch: 44px hit areas without changing what is drawn. */
@media (pointer:coarse){
 .ps-signals button{position:relative}
 .ps-signals button::after{content:'';position:absolute;inset:-6px -8px}
 body[data-page=home-theater] .ht-dot::before{content:'';position:absolute;inset:-10px;border-radius:50%}
 .fdm2-zoom-btn{width:44px;height:44px}
}

/* Review Maarten 23-10: the technical texts on The principle were too small and too light to read. Every width. */
.driver-compare__label{font-size:12px;color:currentColor;opacity:.9}
.driver-compare .dc-tag{font-size:calc(12px * var(--dc-u,1))!important;opacity:.92}
.driver-compare__num,.driver-compare__legend,.driver-compare__toggle{font-size:12px;color:currentColor}
.driver-compare__notes li{font-size:16px}
.driver-compare__caption{font-size:14px;color:currentColor;opacity:.86}
.field-note{font-size:14px!important;line-height:1.6}
[data-register=dark] .field-note{color:rgb(255 255 255/.9)}

/* ---------- Actielijst 29-10: labels, navigation, homepage and content ---------- */
/* Language choice: quiet, beside Arrange a listen; in the menu foot on smaller screens. */
.lang-switch{display:flex;gap:2px;align-items:center;font-size:11px;letter-spacing:.08em}
.lang-switch a{display:inline-grid;place-items:center;min-width:28px;min-height:44px;color:currentColor;opacity:.56;transition:opacity .3s ease}
.lang-switch a:hover,.lang-switch a[aria-current]{opacity:1}
.lang-switch a[aria-current]{text-decoration:underline;text-underline-offset:5px}
.site-header .desktop-nav{gap:28px}
@media (max-width:1180px){.site-header .lang-switch{display:none}}
.menu-bottom .lang-switch{font-size:12px}
/* Menu: every destination at one level, in two even columns on wider screens. */
.site-menu .menu-all{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:repeat(6,auto);grid-auto-flow:column;column-gap:clamp(24px,3vw,48px);align-content:center;padding:20px 0}
.site-menu .menu-all>a{font-size:clamp(22px,2.1vw,32px);line-height:1.25;padding:14px 0;gap:14px}
.site-menu .menu-all>a>span{padding-top:6px}
html.motion-enabled .site-menu.is-open .menu-all>a:nth-child(n+6){transition-delay:.36s}
@media (max-width:1100px){.site-menu .menu-all{grid-template-columns:1fr;grid-template-rows:none;grid-auto-flow:row}.site-menu .menu-all>a{font-size:clamp(22px,6vw,30px);padding:10px 0}}
/* Instagram: bottom right in the footer, rendered hidden until the account exists (finl_build_site.py). */
.footer-social{display:inline-flex;align-items:center;min-height:44px;color:var(--fnl-white-72);transition:color .3s ease}
.footer-social:hover{color:var(--fnl-white)}
.footer-social[hidden]{display:none}
/* Film placeholders stay out of view until the films exist (point 30). */
:is(aside,div,p,figure):has(>.placeholder-tag){display:none!important}
/* Scene 2, Jack's text: a little smaller heading for three paragraphs, the two actions directly below. */
#experience h2{font-size:clamp(40px,4.6vw,80px)}
#experience .manifesto-stage{gap:clamp(28px,4.5vh,56px)}
#experience .manifesto-text{max-width:40em;display:grid;gap:12px}
#experience .manifesto-text p{font-size:16px;line-height:1.7}
#experience .manifesto-actions{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:20px 36px}
#experience .manifesto-actions .text-link{color:var(--fnl-white);min-height:48px;display:inline-flex;align-items:center}
@media (max-width:760px){#experience .manifesto-text p{font-size:15px}}
/* How it works on the home: Wavefield in every Final, and a way straight into the moving panel. */
#technology .ps-every{margin:18px 0 0;max-width:30em;font-size:16px;line-height:1.6;font-weight:300;color:rgb(255 255 255/.86)}
#technology .ps-jump{display:inline-flex;align-items:center;gap:10px;min-height:44px;margin-top:14px;padding:0;background:none;border:0;border-bottom:1px solid var(--fnl-white-72);color:var(--fnl-white);font:inherit;font-size:14px;cursor:pointer}
#technology .ps-jump .ui-icon{width:16px;height:16px}
#technology .ps-jump:focus-visible{outline:1px solid var(--fnl-white);outline-offset:4px}
#technology .ps-steps{margin-top:24px}
/* The signal choice and its notes, larger and easier to read (call 26-10). */
#technology .panel-study figcaption>span{font-size:14px;color:rgb(255 255 255/.86)}
#technology .ps-signals button{font-size:15px;color:rgb(255 255 255/.72);padding:8px 0}
#technology .panel-study figcaption small{font-size:13px!important;color:rgb(255 255 255/.72)}
/* From listening to living with it: four quiet steps at the foot of the closing chapter. */
.home-journey{padding:0 0 clamp(28px,5vh,48px);border-top:1px solid var(--fnl-white-16)}
.home-journey>.eyebrow{margin:20px 0 18px;color:var(--fnl-white-72)}
.home-journey ol{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--grid-gap,32px)}
.home-journey li{display:grid;gap:6px;align-content:start}
.home-journey li>span{font-size:11px;letter-spacing:.13em;color:var(--fnl-white-72)}
.home-journey h3{margin:0;font-size:18px;line-height:1.3;font-weight:300}
.home-journey p{margin:0;font-size:14px;line-height:1.6;font-weight:300;color:rgb(255 255 255/.78)}
@media (max-width:760px){.home-journey ol{grid-template-columns:1fr 1fr;gap:22px 18px}}
/* Reviews & press: three short pull quotes with an attribution line. */
.press-quote-list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--grid-gap,32px);border-top:1px solid var(--line)}
.press-quote{margin:0;padding-top:36px;display:grid;gap:22px;align-content:start}
.press-quote blockquote{margin:0}
.press-quote blockquote p{font-size:clamp(21px,1.9vw,28px);line-height:1.35;font-weight:300;letter-spacing:-.01em}
.press-quote figcaption{font-size:13px;line-height:1.6;color:var(--ink-muted)}
@media (max-width:900px){.press-quote-list{grid-template-columns:1fr;gap:8px}.press-quote{padding-top:28px}}

/* ---------- Actielijst 29-10, Agent B: product structure, Your system, Find your Final, Arrange a listen ---------- */
/* Collection, made to be easy: Active leads as the complete system, then Hybrid, then the panel with a subwoofer. */
.collection-page .range-version{margin-top:clamp(40px,6vh,72px)}
.collection-page .range-version:first-of-type{margin-top:0}
.collection-page .range-version-head{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--grid-gap,32px);align-items:baseline;margin:0 0 clamp(22px,3.5vh,34px)}
.collection-page .range-version-head .eyebrow{grid-column:1/4;margin:0;color:var(--fnl-delft-72)}
.collection-page .range-version-head h4{grid-column:4/8;margin:0;font-size:clamp(22px,1.9vw,30px);font-weight:300;line-height:1.2;letter-spacing:-.01em}
.collection-page .range-version-head p:not(.eyebrow){grid-column:8/13;margin:0;max-width:34em;font-size:15px;line-height:1.6;font-weight:300;color:var(--fnl-delft-72)}
.collection-page .range-active-models{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--grid-gap,32px)}
.collection-page .range-active-models a{display:flex;flex-direction:column;gap:12px;min-height:200px;padding:28px 28px 24px;background:var(--fnl-delft-08);color:var(--fnl-delft);text-decoration:none;transition:background-color .4s ease}
.collection-page .range-active-models a:hover{background:var(--fnl-delft-16)}
.collection-page .range-active-models a:focus-visible{outline:1px solid var(--fnl-delft);outline-offset:4px}
.collection-page .range-active-name{font-size:66px;font-weight:300;letter-spacing:-.05em;line-height:1}
.collection-page .range-active-name sup{font-size:.5em;vertical-align:top;padding-top:.2em;display:inline-block}
.collection-page .range-active-name .range-model-variant{font-size:.34em;margin-left:.45em;letter-spacing:.01em}
.collection-page .range-active-note{font-size:11px;color:var(--fnl-charcoal)}
.collection-page .range-active-link{margin-top:auto;display:flex;justify-content:space-between;align-items:center;font-size:12px;padding-bottom:10px;border-bottom:1px solid var(--fnl-delft-72)}
.collection-page .range-version .range-scale-row{margin-top:-8px}
.collection-page .range-rooms{display:flex;align-items:center;justify-content:space-between;gap:24px;margin:clamp(56px,8vh,88px) 0 0;padding-top:24px;border-top:1px solid var(--fnl-delft-16);font-size:16px;font-weight:300;color:var(--fnl-delft-72)}
.collection-page .range-rooms .text-link{min-width:200px;color:var(--fnl-delft)}
/* Compare table: amplification and low frequencies per version. */
.compare-table .compare-versions{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.compare-table .compare-versions span{display:block;font-size:11px;letter-spacing:.04em;color:var(--fnl-charcoal)}
.compare-table td small{display:block;font-size:11px;color:var(--fnl-charcoal)}
@media (max-width:760px){.collection-page .range-version-head{display:block}.collection-page .range-version-head h4{margin-top:12px}.collection-page .range-version-head p:not(.eyebrow){margin-top:10px}.collection-page .range-active-models{grid-template-columns:1fr;gap:12px}.collection-page .range-active-models a{min-height:0}.collection-page .range-active-name{font-size:52px}.collection-page .range-rooms{display:block}.collection-page .range-rooms .text-link{margin-top:14px}}
/* Product pages, Your system: the versions side by side, then the journey from listening to living with it. */
.product-system .system-versions>li{grid-column:span 4}
.product-system .system-versions-2>li{grid-column:span 6}
.product-system .system-versions li::after{content:none!important}
.product-system .system-versions .system-step{letter-spacing:.12em;text-transform:uppercase}
.product-system .system-versions p{max-width:30em}
.product-system .version-facts{margin:20px 0 0;display:grid;gap:10px}
.product-system .version-facts div{display:grid;grid-template-columns:minmax(0,9em) minmax(0,1fr);gap:12px;padding-top:10px;border-top:1px solid var(--line)}
.product-system .version-facts dt{font-size:12px;color:var(--ink-muted)}
.product-system .version-facts dd{margin:0;font-size:14px;line-height:1.5}
.product-system .living-journey{margin-top:clamp(56px,9vh,96px)}
.product-system .living-journey-intro{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--grid-gap,32px);align-items:baseline;padding:0 var(--page-gutter);margin-bottom:clamp(22px,3.5vh,34px)}
.product-system .living-journey-intro .eyebrow{grid-column:1/4;margin:0;font-size:9px}
.product-system .living-journey-intro h3{grid-column:4/13;margin:0;font-size:clamp(24px,2.4vw,38px);font-weight:300;line-height:1.2;letter-spacing:-.015em}
.product-room figcaption .product-rooms-link{display:inline-flex;align-items:center;gap:10px;min-height:26px;font-size:13px;color:var(--fnl-white);border-bottom:1px solid var(--fnl-white-72);text-decoration:none}
.product-review{margin:clamp(32px,5vh,48px) 0 0;padding-top:24px;border-top:1px solid var(--line);max-width:36em}
.product-review blockquote{margin:0}
.product-review blockquote p{font-size:clamp(21px,1.9vw,28px);line-height:1.35;font-weight:300;letter-spacing:-.01em}
.product-review figcaption{margin-top:16px;font-size:13px;line-height:1.6;color:var(--ink)}
.product-review figcaption span{display:block;color:var(--ink-muted)}
@media (max-width:760px){.product-system .system-versions>li,.product-system .system-versions-2>li{grid-column:1/-1}.product-system .system-versions li+li{padding-left:0}.product-system .living-journey-intro{display:block;padding:0 24px}.product-system .living-journey-intro h3{margin-top:14px}}
/* Arrange a listen: the fallback beside the country choice, the model choice in two lines, the journey in four steps. */
.partner-grid .partner-fallback{grid-column:1/-1;margin:-8px 0 0;padding:18px 22px;background:var(--fnl-delft-08);border-left:2px solid transparent;display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:14px;row-gap:4px;align-items:baseline;transition:background-color .3s ease,border-color .3s ease}
.partner-grid .partner-fallback p{margin:0}
.partner-grid .partner-fallback-title{font-size:16px;font-weight:400;color:var(--fnl-delft)}
.partner-grid .partner-fallback-text{font-size:16px;font-weight:300;color:var(--fnl-delft)}
.partner-grid .partner-fallback-more{grid-column:1/-1;font-size:13px;line-height:1.6;color:var(--fnl-delft-72)}
.partner-grid .partner-fallback.is-active{background:var(--fnl-delft-16);border-left-color:var(--fnl-delft)}
.partner-grid .partner-fallback.is-active .partner-fallback-more{display:none}
.model-choice-groups .model-choice-line{grid-column:1/-1;margin:8px 0 -6px;font-size:13px;color:var(--fnl-delft-72)}
.model-choice-groups .model-choice-line+.model-choice-group,.model-choice-groups .model-choice-line~.model-choice-group{min-width:0}
.numbered-grid.living-journey-grid{grid-template-columns:repeat(4,minmax(0,1fr))!important}
@media (max-width:760px){.partner-grid .partner-fallback{margin:0;grid-template-columns:1fr}.numbered-grid.living-journey-grid{grid-template-columns:1fr!important}}
/* How it works, section 03: Active leads the line that is made to be easy. */
.system-section .system-active{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--grid-gap,32px);align-items:baseline;margin-top:clamp(28px,4vh,48px);padding:clamp(24px,3.5vh,36px) 0;border-top:1px solid var(--fnl-delft-16);border-bottom:1px solid var(--fnl-delft-16)}
.system-section .system-active .eyebrow{grid-column:1/4;margin:0;color:var(--fnl-delft-72)}
.system-section .system-active h3{grid-column:4/8;margin:0;font-size:clamp(26px,2.4vw,38px);font-weight:300;line-height:1.15;letter-spacing:-.015em}
.system-section .system-active p:not(.eyebrow){grid-column:8/13;margin:0;font-size:16px;line-height:1.6;font-weight:300;color:var(--fnl-delft-72);max-width:30em}
.system-section .system-active .system-models{margin-top:12px;font-size:13px;color:var(--fnl-delft)}
.system-section .system-type .system-line{margin:0 0 8px;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--fnl-delft-72)}
@media (max-width:760px){.system-section .system-active{display:block}.system-section .system-active h3,.system-section .system-active p:not(.eyebrow){margin-top:12px}}
/* Find your Final: amplifier detail in an optional disclosure, out of the main path. */
.advisor .advisor-advanced{margin-top:28px;padding-top:18px;border-top:1px solid var(--fnl-delft-16)}
.advisor .advisor-advanced summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:16px;min-height:44px;font-size:15px}
.advisor .advisor-advanced summary span{margin-right:auto;font-size:12px;color:var(--fnl-delft-72)}
.advisor .advisor-advanced summary::-webkit-details-marker{display:none}
.advisor .advisor-advanced summary::after{content:'+';font-size:20px;font-weight:300}
.advisor .advisor-advanced[open] summary::after{content:'−'}
.advisor .advisor-amp-details .form-grid{margin-top:16px}
.advisor .advisor-amp-detail{margin-top:16px;padding-top:10px}
.advisor .advisor-amp-detail summary{font-size:13px}
.advisor .advisor-version{font-size:.42em;letter-spacing:0;margin-left:.2em}
.advisor-progress li[hidden]{display:none!important}
.advisor .advisor-progress{grid-template-columns:none!important;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr)}
.product-room figcaption:has(.product-rooms-link){justify-content:flex-start}.product-room figcaption:has(.product-rooms-link)>.eyebrow{margin-left:auto}
/* Agent B: the Rooms line under the collection starts on the same column as the family introductions. */
.collection-page .range-rooms{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--grid-gap,32px)}
.collection-page .range-rooms>span{grid-column:1/7}
.collection-page .range-rooms .text-link{grid-column:7/10;justify-self:start}
@media (max-width:760px){.collection-page .range-rooms{display:block}}
/* Agent B: the partner fallback keeps the form's left edge; a line above and below instead of an inset panel. */
.partner-grid .partner-fallback{padding:18px 0 20px;background:none;border-left:0;border-top:1px solid var(--fnl-delft-16);border-bottom:1px solid var(--fnl-delft-16)}
.partner-grid .partner-fallback-title,.partner-grid .partner-fallback-text{font-size:18px}
.partner-grid .partner-fallback.is-active{background:none;border-top:2px solid var(--fnl-delft)}
.product-system .version-facts div{display:block}.product-system .version-facts dd{margin-top:2px}

/* Definitive names (nomenclature 5.0, 30-10): the number logic on the collection, the configurations on a product page,
   the old-to-new table on Questions. */
.collection-page .range-numbers{margin:clamp(80px,12vh,140px) 0 0}
.collection-page .range-numbers-intro{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--grid-gap,32px);align-items:end;padding-bottom:20px;border-bottom:1px solid var(--line)}
.collection-page .range-numbers-intro .eyebrow{grid-column:1/-1;margin:0 0 14px;color:var(--fnl-delft-72)}
.collection-page .range-numbers-intro h3{grid-column:1/7;margin:0;font-size:clamp(28px,2.6vw,42px);line-height:1.1;letter-spacing:-.02em;font-weight:300}
.collection-page .range-numbers-intro p:not(.eyebrow){grid-column:7/13;margin:0;max-width:36em;font-size:16px;line-height:1.6;font-weight:300;color:var(--fnl-delft-72)}
.collection-page .range-numbers-list{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));column-gap:var(--grid-gap,32px);row-gap:36px;margin:clamp(32px,5vh,48px) 0 0}
.collection-page .range-numbers-list dt{font-size:clamp(44px,4.2vw,66px);font-weight:300;line-height:1;letter-spacing:-.05em;font-variant-numeric:tabular-nums}
.collection-page .range-numbers-list dd{margin:16px 0 0;max-width:13em;font-size:14px;line-height:1.55;font-weight:300;color:var(--fnl-delft-72)}
.collection-page .range-model-also{margin:0;font-size:13px;line-height:1.5;color:var(--fnl-delft-72)}
.product-system .system-versions .system-step{letter-spacing:0;text-transform:none;font-size:clamp(20px,1.6vw,24px);font-weight:300;color:inherit}
@media (min-width:761px){.product-system .system-versions-4>li{grid-column:span 3}}
@media (max-width:1100px){.collection-page .range-numbers-list{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:760px){.collection-page .range-numbers{margin-top:64px}.collection-page .range-numbers-intro{display:block}.collection-page .range-numbers-intro h3{font-size:29px}.collection-page .range-numbers-intro p:not(.eyebrow){margin-top:16px;font-size:14px}.collection-page .range-numbers-list{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:20px;row-gap:28px;margin-top:28px}.collection-page .range-numbers-list dt{font-size:44px}.collection-page .range-numbers-list dd{margin-top:10px;font-size:13px}}
.names-table-scroll{margin:18px 0 6px;max-width:30em;overflow-x:auto}
.names-table{width:100%;border-collapse:collapse;font-size:15px;line-height:1.45;font-weight:300}
.names-table th,.names-table td{padding:9px 16px 9px 0;border-top:1px solid var(--line);text-align:left;font-weight:300;white-space:nowrap}
.names-table thead th{border-top:0;padding-top:0;font-size:12px;color:var(--ink-muted,inherit)}
.names-table td:first-child{color:var(--ink-muted,inherit)}
/* "Final" plus four digits is wider than the old number: the headings, tabs and labels that carried it are scaled to fit. */
html .product-page[data-model] .product-hero h1{font-size:clamp(96px,12vw,200px);letter-spacing:-.05em}
.collection .model-info h3{white-space:nowrap}
.model-tabs button{font-size:clamp(15px,1.3vw,20px);white-space:nowrap}
.collection-page .lineup-label{font-size:clamp(17px,1.7vw,26px);white-space:nowrap}
.collection-page .range-model-title h4{font-size:clamp(32px,3.2vw,50px);white-space:nowrap}
.compare-table thead th a{font-size:clamp(22px,2.6vw,40px);white-space:nowrap}
@media (max-width:1000px){
 .collection .model-info{grid-template-columns:minmax(0,1fr)}
 .collection .model-info h3{grid-row:auto;grid-column:1/-1;font-size:52px;margin:0 0 6px}
 .collection .model-info .model-line,.collection .model-info>p:not(.eyebrow):not(.model-line){grid-column:1/-1}
 .collection .model-info>p:not(.eyebrow):not(.model-line){min-height:0}
}
@media (max-width:760px){
 html .product-page[data-model] .product-title-group{display:block}
 html .product-page[data-model] .product-hero h1{font-size:min(19vw,76px);line-height:1}
 html .product-page[data-model] .product-hero-statement{font-size:25px;margin-top:10px}
 .collection-page .lineup-label{font-size:15px}
 .model-controls{height:auto}
 .collection .model-tabs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));height:auto;min-width:0;width:100%}
 .model-tabs button{font-size:15px;min-height:44px}
}
html .product-system .system-versions .system-step{font-size:clamp(16px,1.25vw,19px);letter-spacing:0;text-transform:none;color:var(--fnl-white,#fff)}

/* Honeypot on the forms: invisible to people and screen readers, a trap for bots. */
.hp-field{position:absolute!important;left:-10000px;top:auto;width:1px;height:1px;overflow:hidden}
.request-review.is-sent .review-details,.request-review.is-sent .form-actions{display:none}
/* The page root carries data-register="dark", so the white button for dark sections also reached the light (paper)
   sections and turned the form buttons white on white (30-10). On paper the primary button is Delft again. */
.paper .solid-button{color:var(--fnl-delft);border-color:var(--fnl-delft)}
.paper .solid-button:hover{background:var(--fnl-delft);color:var(--fnl-white);border-color:var(--fnl-delft)}
/* The main navigation sits on the centre line of the page, under which the marque on the stage stands; the logo on the
   left and the actions on the right are not equally wide, so centring between them put it 90 to 100 px off (30-10). */
@media (min-width:1101px){.site-header .desktop-nav{position:absolute;left:50%;transform:translateX(-50%);margin:0;padding-left:0}}
/* With the centred navigation the language choice in the header needs a wider screen (German labels are long); below
   that it stays in the menu. */
@media (max-width:1400px){.site-header .lang-switch{display:none}}
/* Menu pictures without the descriptive line under them (Daan 30-10); the picture takes the space it had. */
.site-menu .menu-art-item figcaption{display:none}
.site-menu .menu-art-item{inset:0}