/* Choice routes layer (v2, navigation assessment Jan and Jack, 10-11-2026). Loaded last, after refine.css.
 * Top bar with the two lines, the menu in three groups, the footer groups, the line pages (Ready to Play, Ready to
 * Configure, Final 1570 and 1770), Why Final, the homepage in six steps and the version choice on model pages.
 * Same tokens and type as the rest of the site; no new colours. */

/* 1. Top bar ------------------------------------------------------------------------------------------------- */
.site-header .desktop-nav{position:static!important;transform:none!important;margin:0 0 0 auto!important;padding:0!important;display:flex;align-items:center;gap:clamp(18px,1.8vw,30px)}
.site-header .desktop-nav>a{font-size:13px;white-space:nowrap}
.site-header .desktop-nav .nav-line{display:grid;gap:3px;justify-items:center;padding:8px 18px 9px!important;border:1px solid var(--fnl-white-16);line-height:1.2;transition:border-color .35s var(--ease)}
.site-header .desktop-nav .nav-line::after{display:none}
.site-header .desktop-nav .nav-line small{font-size:8.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--fnl-white-72);font-weight:400}
.site-header .desktop-nav .nav-line span{font-size:14px}
.site-header .desktop-nav .nav-line:hover,.site-header .desktop-nav .nav-line[aria-current]{border-color:var(--fnl-white-72)}
.site-header .desktop-nav .nav-listen{display:inline-flex;align-items:center;min-height:42px;padding:0 20px!important;margin-left:clamp(4px,1vw,14px);background:var(--fnl-white);color:var(--fnl-delft);transition:background-color .35s var(--ease),color .35s var(--ease)}
.site-header .desktop-nav .nav-listen::after{display:none}
.site-header .desktop-nav .nav-listen:hover{background:color-mix(in srgb,var(--fnl-white) 86%,var(--fnl-delft))}
.site-header .header-actions{margin-left:clamp(20px,2.2vw,40px)}
.site-header.on-light .desktop-nav .nav-line{border-color:var(--fnl-delft-16)}
.site-header.on-light .desktop-nav .nav-line small{color:var(--fnl-delft-72)}
.site-header.on-light .desktop-nav .nav-line:hover,.site-header.on-light .desktop-nav .nav-line[aria-current]{border-color:var(--fnl-delft-72)}
.site-header.on-light .desktop-nav .nav-listen{background:var(--fnl-delft);color:var(--fnl-white)}
/* The two lines need room: below this width the bar shows the marque, Arrange a listen and Menu (as on phones). */
@media (max-width:1240px){.site-header .desktop-nav{display:none!important}.site-header .header-listen{display:flex!important}.site-header .header-actions{margin-left:auto}}
@media (min-width:1241px){.site-header .header-listen{display:none!important}}
@media (min-width:1241px) and (max-width:1439px){.site-header .lang-switch{display:none}}
@media (min-width:1440px){.site-header .lang-switch{display:flex}}

/* 2. Menu in three groups -------------------------------------------------------------------------------------- */
.site-menu .menu-groups{max-width:1450px;margin:0 auto;display:grid;grid-template-columns:1.25fr 1fr .8fr;gap:clamp(28px,4vw,72px);align-items:start;padding:clamp(28px,6vh,72px) 0 clamp(40px,7vh,80px);min-height:calc(var(--viewport-height,100svh) - 205px)}
.site-menu .menu-groups:focus{outline:0}
.site-menu .menu-group{display:grid;align-content:start}
.site-menu .menu-group>.eyebrow{color:var(--fnl-white-72);padding-bottom:18px;border-bottom:1px solid var(--fnl-white-16);margin:0}
.site-menu .menu-group>a{display:grid;gap:6px;padding:16px 0;border-bottom:1px solid var(--fnl-white-16);font-weight:300;line-height:1.2;transition:opacity .35s ease,padding .45s var(--ease)}
.site-menu .menu-group>a small{font-size:13px;color:var(--fnl-white-72);letter-spacing:.01em;line-height:1.5}
.site-menu .menu-group-choose>a{font-size:clamp(28px,2.7vw,42px)}
.site-menu .menu-group-about>a{font-size:clamp(22px,1.8vw,28px)}
.site-menu .menu-group-service>a{font-size:16px;border:0;padding:9px 0}
.site-menu .menu-group-service>.eyebrow{margin-bottom:10px}
.site-menu .menu-group>a[aria-current=page]>span{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.22em}
@media (hover:hover) and (pointer:fine){.site-menu .menu-group:has(>a:hover)>a:not(:hover){opacity:.5}.site-menu .menu-group-choose>a:not(.menu-listen):hover,.site-menu .menu-group-about>a:hover{padding-left:10px}}
.site-menu .menu-group>a.menu-listen{display:inline-flex;justify-self:start;align-items:center;gap:22px;margin-top:28px;padding:0 24px;min-height:54px;border:0;background:var(--fnl-white);color:var(--fnl-delft);font-size:15px;font-weight:400}
.site-menu .menu-group>a.menu-listen .ui-icon{width:18px;height:18px}
html.motion-enabled .site-menu .menu-group{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) .menu-group{opacity:0;transform:translateY(18px)}
html.motion-enabled .site-menu.is-open .menu-group-about{transition-delay:.08s}
html.motion-enabled .site-menu.is-open .menu-group-service{transition-delay:.16s}
@media (max-width:1100px){.site-menu .menu-groups{grid-template-columns:1fr 1fr}.site-menu .menu-group-choose{grid-column:1/-1}}
@media (max-width:760px){.site-menu .menu-groups{grid-template-columns:1fr;gap:34px;padding:18px 0 36px;min-height:0}.site-menu .menu-group-choose>a{font-size:clamp(25px,7.4vw,32px);padding:13px 0}.site-menu .menu-group-about>a{font-size:21px;padding:12px 0}.site-menu .menu-group>a small{font-size:12px}.site-menu .menu-group>a.menu-listen{margin-top:22px}}

/* 3. Footer groups ------------------------------------------------------------------------------------------------ */
.network-footer .footer-group{font-size:9px;letter-spacing:var(--tracking-header,.2em);text-transform:uppercase;color:var(--fnl-white-72);margin:0 0 8px;line-height:1.5}

/* 4. Homepage --------------------------------------------------------------------------------------------------- */
html:not([data-hero=film]) .reveal .hero-copy .hero-tagline{font-size:clamp(18px,1.6vw,24px);font-weight:300;letter-spacing:.01em;margin-top:14px;color:var(--fnl-white)}
.hero-copy .hero-tagline{font-size:18px;font-weight:300;margin-top:14px}
.reveal .hero-bottom{align-items:center}
@media (min-width:761px){html:not([data-hero=film]) .reveal .hero-copy{bottom:clamp(92px,11vh,124px)!important}}
.stage-pairs{position:absolute;left:50%;transform:translateX(-50%);bottom:0;min-height:44px;display:flex;align-items:center}
.stage-pair{display:none;margin:0;font-size:11px;letter-spacing:.06em;color:var(--fnl-white-72);white-space:nowrap}
.stage-pair.is-shown{display:block}
.stage-pair[hidden]{display:none!important}
.stage-pair a{color:var(--fnl-white);border-bottom:1px solid var(--fnl-white-16);padding-bottom:2px;transition:border-color .3s ease}
.stage-pair a:hover{border-color:var(--fnl-white)}
@media (max-width:760px){.stage-pairs{position:static;transform:none}.reveal .hero-bottom{flex-wrap:wrap}.reveal .scroll-cue{display:none}}

.home-quotes{background:var(--fnl-delft);color:var(--fnl-white);padding:clamp(56px,7vw,110px) var(--page-gutter) clamp(64px,8vw,120px);--line:var(--fnl-white-16);--ink-muted:var(--fnl-white-72)}
.home-quotes-list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--grid-gap,32px);border-top:1px solid var(--line);margin-bottom:clamp(30px,4vw,52px)}
.home-quotes .text-link,.home-why .text-link{min-width:220px}
@media (max-width:900px){.home-quotes-list{grid-template-columns:1fr;gap:8px}}

.home-ways{padding:clamp(80px,9vw,140px) var(--page-gutter);background:var(--fnl-white);color:var(--fnl-delft);--line:var(--fnl-delft-16);--line-strong:var(--fnl-delft-72);--ink-muted:var(--fnl-delft-72)}
.home-ways-head,.home-why-head,.line-section-head{display:grid;grid-template-columns:.55fr 1.35fr 1fr;gap:40px;align-items:start;margin-bottom:clamp(40px,5vw,70px)}
.home-ways-head>.eyebrow,.home-why-head>.eyebrow,.line-section-head>.eyebrow{padding-top:10px;color:var(--ink-muted);margin:0}
.home-ways-head h2,.home-why-head h2,.line-section-head h2{font-size:clamp(36px,4.1vw,64px);letter-spacing:-.025em;line-height:1.1;margin:0}
.home-ways-head>p:last-child,.home-why-head>p:last-child,.line-section-head>p:last-child:not(.eyebrow){font-size:16px;font-weight:300;max-width:400px;padding-top:10px;margin:0}
.line-section-head:has(>.eyebrow:only-child){margin-bottom:28px}

.line-doors{display:grid;grid-template-columns:1fr 1fr;gap:var(--grid-gap,32px)}
.line-door{display:grid;grid-template-rows:auto 1fr;background:var(--soft-ground);color:var(--fnl-delft);transition:background-color .4s var(--ease)}
.line-door figure{margin:0;overflow:hidden;aspect-ratio:16/10}
.line-door img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s cubic-bezier(.2,0,0,1)}
.line-door:hover img{transform:scale(1.025)}
.line-door-copy{display:grid;align-content:start;gap:14px;padding:clamp(26px,3vw,44px)}
.line-door-copy .eyebrow{color:var(--fnl-delft-72);margin:0}
.line-door-copy h3{font-size:clamp(34px,3.4vw,52px);line-height:1.05;letter-spacing:-.02em;margin:0}
.line-door-copy p:not(.eyebrow){font-size:16px;font-weight:300;line-height:1.6;max-width:30em;margin:0}
.line-door-copy .line-door-models{font-size:13px;color:var(--fnl-delft-72)}
.line-door-link{display:inline-flex;align-items:center;justify-content:space-between;gap:30px;justify-self:start;min-height:46px;margin-top:6px;border-bottom:1px solid var(--fnl-delft-72);font-size:14px}
.line-door:hover .line-door-link .arrow{transform:translate(3px,-3px)}
.line-door-quiet{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 32px;margin-top:clamp(28px,3vw,44px);padding-top:22px;border-top:1px solid var(--line)}
.line-door-quiet p{font-size:18px;font-weight:300;margin:0}
@media (max-width:860px){.line-doors{grid-template-columns:1fr}}

.home-why{background:var(--fnl-delft);color:var(--fnl-white);padding:clamp(80px,9vw,140px) var(--page-gutter);--line:var(--fnl-white-16);--line-strong:var(--fnl-white-72);--ink-muted:var(--fnl-white-72)}
.home-why-list{list-style:none;margin:0 0 clamp(36px,4vw,56px);padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--grid-gap,32px)}
.home-why-list li{border-top:1px solid var(--line);padding-top:24px;display:grid;gap:14px;align-content:start}
.home-why-list span{font-size:11px;letter-spacing:.12em;color:var(--ink-muted)}
.home-why-list h3{font-size:clamp(24px,2.3vw,34px);line-height:1.2;letter-spacing:-.01em;margin:18px 0 0}
.home-why-list p{font-size:16px;font-weight:300;max-width:24em;margin:0;color:var(--ink-muted)}
@media (max-width:900px){.home-why-list{grid-template-columns:1fr;gap:30px}}

.origin-quote{margin:30px 0 0;padding:0;border:0}
.origin-quote blockquote{margin:0}
.origin-quote p{font-size:clamp(22px,2vw,30px)!important;line-height:1.3!important;font-weight:300;letter-spacing:-.01em}
.origin-quote figcaption{margin-top:12px;font-size:13px;color:var(--fnl-white-72)}
.origin-facts{list-style:none;margin:30px 0 0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:24px}
.origin-facts li{border-top:1px solid var(--fnl-white-16);padding-top:16px;display:grid;gap:6px}
.origin-facts strong{font-weight:400;font-size:15px}
.origin-facts span{font-size:14px;font-weight:300;line-height:1.6;color:var(--fnl-white-72)}
@media (max-width:760px){.origin-facts{grid-template-columns:1fr}}
@media (min-width:1101px){#our-story.origin{height:auto!important;min-height:var(--block-h,auto)}}

@media (max-width:760px){.home-ways-head,.home-why-head,.line-section-head{grid-template-columns:1fr;gap:16px}}
@media (min-width:761px) and (max-width:1100px){.home-ways-head,.home-why-head,.line-section-head{grid-template-columns:1fr 1.4fr;gap:24px 40px}.home-ways-head>p:last-child,.home-why-head>p:last-child,.line-section-head>p:last-child:not(.eyebrow){grid-column:2}}

/* 5. Line pages -------------------------------------------------------------------------------------------------- */
.line-hero{background:var(--fnl-white);color:var(--fnl-delft);padding-top:var(--header-height);--line:var(--fnl-delft-16);--ink-muted:var(--fnl-delft-72)}
.line-hero-image{margin:0;height:min(68vh,760px);min-height:320px;overflow:hidden}
.line-hero-image img{width:100%;height:100%;object-fit:cover;object-position:center 60%}
.line-hero-intro{display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,6vw,110px);align-items:end;padding:clamp(48px,6vw,96px) var(--page-gutter) clamp(56px,7vw,110px)}
.line-hero-intro .eyebrow{color:var(--fnl-delft-72);margin:0 0 22px}
.line-hero-intro h1{font-size:clamp(52px,6.1vw,96px);line-height:1;letter-spacing:-.032em;margin:0}
.line-hero-lead{display:grid;gap:28px;justify-items:start;max-width:560px}
.line-hero-lead p{font-size:clamp(18px,1.5vw,22px);font-weight:300;line-height:1.55}
.line-back{display:inline-flex;align-items:center;gap:12px;min-height:44px;margin-bottom:18px;font-size:13px;color:var(--fnl-delft)}
.line-back .ui-icon{width:18px;height:18px}
.line-hero .solid-button{color:var(--fnl-delft);border-color:var(--fnl-delft)}
.line-hero .solid-button:hover{background:var(--fnl-delft);color:var(--fnl-white)}
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.line-hero-actions{display:flex;flex-wrap:wrap;align-items:center;gap:16px 34px;margin-top:34px}
.solid-button.solid-light{background:var(--fnl-white);color:var(--fnl-delft)}
.solid-button.solid-light:hover{background:color-mix(in srgb,var(--fnl-white) 86%,var(--fnl-delft))}
.line-hero-actions .subtle-link{margin-top:0!important}
@media (max-width:760px){.line-hero-intro{grid-template-columns:1fr;gap:26px}.line-hero-image{height:auto;min-height:0;aspect-ratio:16/10}}

.line-section{--line:var(--fnl-delft-16)}
.line-cards{display:grid;grid-template-columns:1fr 1fr;gap:var(--grid-gap,32px)}
.line-card{display:grid;grid-template-columns:minmax(120px,.42fr) 1fr;background:var(--soft-ground);min-height:420px}
.line-card-photo{display:grid;place-items:center;padding:28px 12px;background:color-mix(in srgb,var(--fnl-delft) 5%,var(--fnl-white))}
.line-card-photo img{height:min(330px,100%);width:auto;object-fit:contain}
.line-card-copy{display:grid;align-content:start;gap:14px;padding:clamp(26px,3vw,44px)}
.line-card-copy h3{font-size:clamp(34px,3.2vw,50px);line-height:1.05;letter-spacing:-.02em;margin:0}
.line-card-room{font-size:10px!important;letter-spacing:var(--tracking-header,.2em);text-transform:uppercase;color:var(--fnl-delft-72)}
.line-card-copy>p:not(.line-card-room){font-size:16px;font-weight:300;line-height:1.6;max-width:30em;margin:0}
.line-card .version-facts{margin:6px 0 0;display:grid;gap:8px}
.line-card .version-facts div,.system-page-facts div,.configure-model .version-facts div{display:grid;grid-template-columns:minmax(0,9em) minmax(0,1fr);gap:12px;padding-top:9px;border-top:1px solid var(--fnl-delft-16)}
.line-card .version-facts dt,.system-page-facts dt,.configure-model .version-facts dt{font-size:12px;color:var(--fnl-delft-72)}
.line-card .version-facts dd,.system-page-facts dd,.configure-model .version-facts dd{margin:0;font-size:14px;line-height:1.5}
.line-card-actions{display:flex;flex-wrap:wrap;align-items:center;gap:14px 28px;margin-top:14px}
.line-card-actions .text-link{gap:24px}
@media (max-width:1100px){.line-cards{grid-template-columns:1fr}}
@media (max-width:560px){.line-card{grid-template-columns:1fr}.line-card-photo img{height:260px}}

.line-warranty{display:grid;grid-template-columns:.55fr 1.35fr 1fr;gap:16px 40px;align-items:baseline;margin-top:clamp(48px,6vw,80px);padding-top:26px;border-top:1px solid var(--fnl-delft-16)}
.line-warranty .eyebrow{color:var(--fnl-delft-72);margin:0}
.line-warranty-text{font-size:clamp(22px,2.2vw,32px);font-weight:300;line-height:1.3;letter-spacing:-.01em;margin:0}
.line-warranty .text-link{justify-self:start}
@media (max-width:760px){.line-warranty{grid-template-columns:1fr}}

.line-columns{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--grid-gap,32px)}
.line-columns article{border-top:1px solid var(--fnl-delft-16);padding-top:24px;display:grid;gap:14px;align-content:start}
.line-columns h3{font-size:clamp(24px,2.1vw,32px);line-height:1.2;margin:0}
.line-columns p:not(.line-links){font-size:15px;font-weight:300;line-height:1.6;margin:0}
.line-links{display:flex;flex-wrap:wrap;gap:4px 26px;margin:4px 0 0}
.line-links .text-link{gap:18px;font-size:13px;min-height:44px}
@media (max-width:900px){.line-columns{grid-template-columns:1fr;gap:36px}}

.line-numbers-list{margin:0;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:var(--grid-gap,32px)}
.line-numbers-list div{border-top:1px solid var(--fnl-delft-16);padding-top:16px}
.line-numbers-list dt{font-size:clamp(34px,3.4vw,52px);font-weight:300;line-height:1}
.line-numbers-list dd{margin:12px 0 0;font-size:13px;line-height:1.5;color:var(--fnl-delft-72)}
@media (max-width:900px){.line-numbers-list{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:520px){.line-numbers-list{grid-template-columns:repeat(2,minmax(0,1fr))}}

.line-overview{border-top:1px solid var(--fnl-delft-16)}
.editorial-section.paper.line-overview{padding-top:clamp(56px,6vw,90px)}
.line-overview>.eyebrow{color:var(--fnl-delft-72);margin:0 0 22px}
.line-overview-blocks{display:grid;grid-template-columns:1fr 1fr;gap:var(--grid-gap,32px)}
.line-block{position:relative;display:grid;gap:8px;padding:28px 32px;border:1px solid var(--fnl-delft-16);transition:border-color .35s var(--ease)}
.line-block.is-current{background:var(--soft-ground);border-color:transparent}
.line-block:not(.is-current):hover{border-color:var(--fnl-delft-72)}
.line-block h3{font-size:clamp(24px,2.2vw,32px);font-weight:300;margin:0}
.line-block p{font-size:14px;color:var(--fnl-delft-72);margin:0}
.line-block>.arrow{position:absolute;right:28px;top:50%;transform:translateY(-50%)}
.line-overview-links{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 32px;margin-top:28px}
.line-overview-links .text-link{gap:24px}
.line-overview-help{display:flex;align-items:center;gap:14px;margin:0}
.line-overview-help>span{font-size:14px;color:var(--fnl-delft-72)}
#choose .line-overview-links{justify-content:flex-start}
@media (max-width:760px){.line-overview-blocks{grid-template-columns:1fr}.line-block{padding:22px 48px 22px 22px}.line-block>.arrow{right:18px}.line-overview-links{flex-direction:column;align-items:flex-start}}

/* Final 1570 and Final 1770 */
.system-page-grid{display:grid;grid-template-columns:minmax(0,.7fr) minmax(0,1fr);gap:clamp(30px,6vw,100px);align-items:center}
.system-page-photo{margin:0;display:grid;place-items:center;background:var(--soft-ground);padding:clamp(30px,4vw,60px) 20px}
.system-page-photo img{height:min(520px,60vh);width:auto}
.system-page-facts{margin:0;display:grid;gap:10px;max-width:560px}
.system-page-links{margin-top:clamp(28px,4vw,48px)}
@media (max-width:760px){.system-page-grid{grid-template-columns:1fr}.system-page-photo img{height:340px}}

/* Ready to Configure */
.configure-front-grid{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.4fr);gap:clamp(30px,6vw,100px);align-items:start}
.configure-ask{margin:0!important;padding-top:24px;border-top:1px solid var(--fnl-delft-16)}
.configure-ask h2{font-size:clamp(32px,3.4vw,52px);line-height:1.1;letter-spacing:-.02em;margin:18px 0 0}
.configure-ask p:not(.eyebrow){color:var(--fnl-delft-72)!important}
.configure-compare>.eyebrow{color:var(--fnl-delft-72);margin:0 0 14px}
.configure-compare .text-link{margin-top:24px;gap:24px}
.configure-table{width:100%;border-collapse:collapse;font-size:14px;min-width:560px}
.configure-table th,.configure-table td{text-align:left;vertical-align:top;padding:12px 16px 12px 0;border-top:1px solid var(--fnl-delft-16);font-weight:300}
.configure-table thead th{font-size:18px;font-weight:400;border-top:1px solid var(--fnl-delft-72)}
.configure-table thead th a{border-bottom:1px solid var(--fnl-delft-16)}
.configure-table tbody th{font-size:12px;color:var(--fnl-delft-72);width:22%}
.configure-table .compare-versions{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.configure-table .compare-versions span{display:block;font-size:11px;color:var(--fnl-delft-72)}
.configure-table-scroll{overflow-x:auto}
@media (max-width:900px){.configure-front-grid{grid-template-columns:1fr}}
.line-promise{--line:var(--fnl-white-16);--ink-muted:var(--fnl-white-72)}
.configure-models{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--grid-gap,32px)}
.configure-model{display:grid;grid-template-rows:auto 1fr;background:var(--soft-ground)}
.configure-model-photo{display:grid;place-items:center;padding:30px 12px;background:color-mix(in srgb,var(--fnl-delft) 5%,var(--fnl-white))}
.configure-model-photo img{height:300px;width:auto}
.configure-model-copy{display:grid;align-content:start;gap:12px;padding:26px 26px 30px}
.configure-model-copy h3{font-size:clamp(28px,2.6vw,40px);line-height:1.05;margin:0}
.configure-model-tag{font-size:16px!important;margin:0}
.configure-model-copy>p:not(.configure-model-tag):not(.version-actions){font-size:14px;font-weight:300;color:var(--fnl-delft-72);margin:0}
.configure-model .version-facts{margin:6px 0 0;display:grid;gap:8px}
.version-actions{display:flex;flex-wrap:wrap;gap:0 24px;margin:8px 0 0}
.version-actions .text-link{gap:18px;font-size:13px;min-height:44px}
@media (max-width:1100px){.configure-models{grid-template-columns:1fr 1fr}}
@media (max-width:700px){.configure-models{grid-template-columns:1fr}}
.configure-system article h3{font-size:clamp(24px,2.2vw,32px)}
.configure-coming{background:var(--soft-ground);padding:28px 28px 18px!important;border-top:0!important}
.configure-coming .eyebrow{color:var(--fnl-delft-72);margin-bottom:14px}

/* Why Final */
.why-hear{--line:var(--fnl-white-16);--ink-muted:var(--fnl-white-72)}
.why-quotes{grid-template-columns:repeat(2,minmax(0,1fr));margin:0}
.why-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(36px,4vw,60px) var(--grid-gap,32px)}
.why-list li{border-top:1px solid var(--fnl-delft-16);padding-top:22px;display:grid;gap:14px;align-content:start}
.why-list span{font-size:11px;letter-spacing:.12em;color:var(--fnl-delft-72)}
.why-list h3{font-size:clamp(24px,2.1vw,32px);line-height:1.2;letter-spacing:-.01em;margin:14px 0 0}
.why-list p{font-size:15px;font-weight:300;line-height:1.65;margin:0;color:var(--fnl-delft-72)}
.why-handbuilt{margin:clamp(40px,5vw,70px) 0 0;padding-top:22px;border-top:1px solid var(--fnl-delft-16);font-size:clamp(20px,1.8vw,26px);font-weight:300}
@media (max-width:1100px){.why-list{grid-template-columns:1fr 1fr}}
@media (max-width:700px){.why-list{grid-template-columns:1fr}.why-quotes{grid-template-columns:1fr}}

/* 6. Model pages: the way back to the line, and the chosen version ------------------------------------------- */
.product-system .system-versions>li{scroll-margin-top:calc(var(--header-height) + 80px)}
.product-system .system-versions>li.is-chosen{outline:1px solid var(--fnl-white-72);outline-offset:14px}
.product-system .version-actions .text-link{border-color:var(--fnl-white-16)}
.site-menu .menu-top:focus{outline:0}

/* 7. The collection: the two lines as two clearly separated blocks, with a way to each straight from the top. */
.range-line-buttons{display:flex;flex-wrap:wrap;gap:6px 28px;margin-top:6px}
.range-line-buttons .text-link{min-width:0;gap:22px;font-size:14px}
.range-family-intro>.text-link{margin-top:22px;gap:24px}
.range-family+.range-family{margin-top:clamp(56px,7vw,110px);padding-top:clamp(40px,5vw,72px);border-top:1px solid var(--fnl-delft-72)}
@media (max-width:760px){body[data-page=why-final] .editorial-hero-image{object-position:64% center}body[data-page=ready-to-configure] .editorial-hero-image{object-position:78% center}}
@media (max-width:760px){.product-page .product-hero-copy>.eyebrow{display:block!important;margin-bottom:14px}}

/* v2 review 10-11: Ready to Configure on phones (one column, the comparison scrolls sideways inside its own frame),
   the line links on the collection on one line, and the complete systems as photo cards like the other models. */
.configure-front-grid>*{min-width:0}
.configure-table-scroll{width:100%;max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}
@media (max-width:900px){.configure-front-grid{grid-template-columns:minmax(0,1fr)!important}}
.collection-page .range-family-intro>.text-link{grid-column:7/13;justify-self:start;white-space:nowrap;margin-top:18px}
@media (max-width:760px){.collection-page .range-family-intro>.text-link{grid-column:1/-1}}

/* Daan 10-11, na de eerste preview: in de hero van de homepage staat Arrange a listen weer naast Explore; het bijschrift
   bij het paar en Reduce motion vervallen daar. De topbalk blijft zoals gebouwd (groep rechts uitgelijnd, besluit Daan). */
.hero-bottom .stage-pairs,.hero-bottom .motion-toggle{display:none!important}

/* Round 3 (Jan, second review 11-11, and the call of 11-11) ------------------------------------------------------ */
/* Reduced motion follows the system setting only; the button is gone everywhere. */
.motion-toggle{display:none!important}
/* Hero: the heading right under the microphone and close to the sub-tagline; The Listening Experience is a button now. */
html:not([data-hero=film]) .reveal .hero-copy .hero-tagline{margin-top:4px}
html:not([data-hero=film]) .reveal .hero-copy h1{line-height:.98!important}
@media (min-width:761px){html:not([data-hero=film]) .reveal .hero-copy{bottom:clamp(64px,8.5vh,104px)!important}}
.reveal .hero-bottom .scroll-cue{display:none}
.home-quotes-list{grid-template-columns:repeat(2,minmax(0,1fr))}
@media (max-width:900px){.home-quotes-list{grid-template-columns:1fr}}

/* Top bar: the line above the two buttons readable (11.5 px, full white); the two buttons stay down to 1024 px. */
.site-header .desktop-nav .nav-line small{font-size:11.5px!important;letter-spacing:.12em;color:var(--fnl-white)}
.site-header.on-light .desktop-nav .nav-line small{color:var(--fnl-delft)}
.site-header .desktop-nav .nav-line{padding:8px 16px 9px!important}
@media (min-width:1024px) and (max-width:1240px){
 .site-header .desktop-nav{display:flex!important}
 .site-header .header-listen{display:none!important}
 .site-header .desktop-nav>a:not(.nav-line):not(.nav-listen){display:none!important}
 .site-header .header-actions{margin-left:clamp(14px,2vw,28px)}
}
@media (max-width:1023px){.site-header .desktop-nav{display:none!important}.site-header .header-listen{display:flex!important}}

/* The panel under the two line buttons (hover example, Jan 11-11): both lines side by side, models at relative height. */
.site-header .desktop-nav{position:relative!important;left:auto!important;right:auto!important;top:auto!important}
.site-header .nav-panel{position:absolute;left:0;top:calc(100% + 20px);width:min(760px,calc(100vw - 2 * var(--page-gutter)));padding:26px 4px 22px;background:rgb(16 25 35/.9);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);border:1px solid var(--fnl-white-16);color:var(--fnl-white);z-index:40;opacity:0;transform:translateY(-6px);transition:opacity .28s ease,transform .38s var(--ease)}
.site-header .nav-panel.is-open{opacity:1;transform:none}
.site-header .nav-panel[hidden]{display:none}
.site-header .nav-panel::before{content:'';position:absolute;left:0;right:0;top:-22px;height:22px}
.nav-panel-inner{display:grid;grid-template-columns:1fr 1fr}
.nav-panel-line{display:grid;align-content:start;gap:4px;padding:0 26px}
.nav-panel-line+.nav-panel-line{border-left:1px solid var(--fnl-white-16)}
.nav-panel-over{margin:0;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--fnl-white-72)}
.nav-panel-name{margin:0;font-size:26px;font-weight:300;letter-spacing:-.01em;line-height:1.2}
.nav-panel-models{display:flex;align-items:flex-end;gap:12px;margin:16px 0 12px}
.site-header .desktop-nav .nav-panel a{padding:0;white-space:nowrap}
.site-header .desktop-nav .nav-panel a::after{display:none}
.site-header .desktop-nav .nav-panel-model{display:grid;justify-items:center;gap:8px;font-size:11px;color:var(--fnl-white-72);transition:color .25s ease}
.site-header .desktop-nav .nav-panel-model:hover,.site-header .desktop-nav .nav-panel-model:focus-visible{color:var(--fnl-white)}
.nav-panel-img{display:flex;align-items:flex-end;justify-content:center;width:46px;height:96px}
.nav-panel-img img{height:var(--h);width:auto;max-width:none;filter:brightness(1.35);transition:transform .35s var(--ease)}
.nav-panel-model:hover .nav-panel-img img{transform:translateY(-3px)}
.site-header .desktop-nav .nav-panel-more{display:inline-flex;align-items:center;gap:14px;justify-self:start;font-size:13px;padding:8px 0!important;border-bottom:1px solid var(--fnl-white-72)}
.site-header .desktop-nav .nav-panel-more .ui-icon{width:16px;height:16px}
@media (prefers-reduced-motion:reduce){.site-header .nav-panel{transition:none}}

/* Ready to Play opens with the heading and the range itself (Jan, 11-11); the room comes further down. */
.line-intro{background:var(--fnl-white);color:var(--fnl-delft);padding-top:var(--header-height)}
.line-intro .line-hero-intro{padding-top:clamp(56px,7vw,110px);padding-bottom:clamp(40px,5vw,80px)}
.line-intro .eyebrow{color:var(--fnl-delft-72);margin:0 0 22px}
.line-intro .solid-button{color:var(--fnl-delft);border-color:var(--fnl-delft)}
.line-intro .solid-button:hover{background:var(--fnl-delft);color:var(--fnl-white)}
.line-range{padding-top:clamp(20px,3vw,48px)!important}
.line-row+.line-row{margin-top:clamp(40px,5vw,72px)}
.line-row-label{margin:0 0 18px;padding-top:16px;border-top:1px solid var(--fnl-delft-72);font-size:clamp(20px,1.8vw,26px);font-weight:300}
.line-model .configure-model-photo{height:340px;align-items:end;padding-bottom:26px}
.line-model .configure-model-photo img{height:calc(290px * var(--s,1));width:auto}
.line-model-family{margin:0;font-size:10px!important;letter-spacing:var(--tracking-header,.2em);text-transform:uppercase;color:var(--fnl-delft-72)}
.line-room{margin:0}
.line-room img{width:100%;height:min(72vh,780px);object-fit:cover;display:block}
@media (max-width:700px){.line-model .configure-model-photo{height:280px}.line-model .configure-model-photo img{height:calc(230px * var(--s,1))}.line-room img{height:auto;aspect-ratio:16/10}}
@media (min-width:901px) and (max-width:1100px){.line-models{grid-template-columns:repeat(3,minmax(0,1fr))!important}}

/* Ready to Play: the products in the first screen (Jan, 11-11): a tighter intro band, the first row of cards right below. */
.line-intro .line-hero-intro{padding-top:clamp(26px,3.2vw,48px)!important;padding-bottom:clamp(18px,2vw,30px)!important;align-items:center}
.line-intro .line-hero-intro h1{font-size:clamp(44px,4.6vw,74px)}
.line-intro .line-hero-lead{gap:18px}
.line-intro .line-hero-lead p{font-size:clamp(16px,1.25vw,19px)}
.line-range{padding-top:0!important}
.line-row-label{margin-bottom:14px;padding-top:12px;font-size:clamp(18px,1.5vw,22px)}
.line-model .configure-model-photo{height:270px;padding-bottom:20px}
.line-model .configure-model-photo img{height:calc(230px * var(--s,1))}
@media (max-width:760px){.line-intro .line-hero-intro{gap:16px}.line-model .configure-model-photo{height:240px}.line-model .configure-model-photo img{height:calc(200px * var(--s,1))}}

/* Help me choose: one line for the question; answered steps in the progress line are buttons. */
.advisor-hero h1{max-width:none!important}
.advisor-hero h1 br{display:none}
.advisor-progress-button{all:unset;box-sizing:border-box;display:block;width:100%;cursor:pointer;color:inherit;font:inherit}
.advisor-progress-button:disabled{cursor:default}
.advisor-progress-button:not(:disabled):hover .advisor-progress-label{text-decoration:underline;text-underline-offset:4px}
.advisor-progress-button:focus-visible{outline:2px solid var(--fnl-delft);outline-offset:4px}
.advisor-hint-link{margin-top:6px}

/* Arrange a listen: the model checkboxes line up across the groups. */
.model-choice-group .eyebrow{min-height:3.2em;display:flex;align-items:flex-end;margin-bottom:6px}
@media (max-width:760px){.model-choice-group .eyebrow{min-height:0}}
body[data-page=ready-to-play] main>section#range.line-range{padding-top:12px!important}

/* The collection: the line above each group in the lineup (Jan, round 3). */
.collection-page .range-lineup>.lineup-model{grid-row:2}
.collection-page .range-lineup>.lineup-line{grid-row:1;align-self:end;margin-bottom:14px;padding-bottom:10px;border-bottom:1px solid var(--fnl-delft-72);font-size:11px;letter-spacing:var(--tracking-header,.2em);text-transform:uppercase;color:var(--fnl-delft);text-decoration:none}
.collection-page .range-lineup>.lineup-line:hover{color:var(--fnl-delft-72)}
.collection-page .range-lineup>.lineup-line-play{grid-column:1/4}
.collection-page .range-lineup>.lineup-line-configure{grid-column:5/8}

/* Hover panel, owner 11-11: all eight thumbnails in one matte black (per-image tone evens out the finishes), a soft
   pool of light under them so the dark panels stay readable, and the page behind the panel dimmed and softly blurred. */
.nav-panel-img{background:radial-gradient(ellipse 60% 26% at 50% 100%,rgb(255 255 255/.16),transparent 72%)}
.site-header .nav-panel-img img{filter:grayscale(1) brightness(var(--tone,1)) contrast(1.25) drop-shadow(0 0 .6px rgb(255 255 255/.5))!important}
.nav-backdrop{position:fixed;inset:0;z-index:19;pointer-events:none;background:rgb(10 16 22/.45);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);opacity:0;visibility:hidden;transition:opacity .25s ease,visibility 0s linear .25s}
.nav-backdrop.is-open{opacity:1;visibility:visible;transition:opacity .25s ease}
@media (prefers-reduced-motion:reduce){.nav-backdrop,.nav-backdrop.is-open{transition:none}}

/* Our story, Today: a light room with the loudspeakers instead of the product lineup (Jan, round 3). */
.st-today-room{margin:28px 0 30px;max-width:640px}
.st-today-room img{width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;display:block}

/* Homepage: Why Final sounds different, with the way to Final WaveField Technology. */
.home-why>.text-link+.text-link{margin-left:32px}
@media (max-width:760px){.home-why>.text-link+.text-link{margin-left:0;margin-top:8px}.home-why>.text-link{display:flex;width:max-content}}

/* Warranty: a calm hero with the promise as the key figure, readable sections and a prominent registration. */
.warranty-hero{min-height:0!important}
.warranty-figures{display:flex;flex-wrap:wrap;gap:clamp(28px,5vw,80px);margin-top:clamp(30px,4vw,54px)}
.warranty-figure{display:grid;grid-template-columns:auto auto;align-items:baseline;column-gap:12px;padding-top:18px;border-top:1px solid var(--fnl-white-72);min-width:220px}
.warranty-number{font-size:clamp(84px,10vw,150px);font-weight:300;line-height:.9;letter-spacing:-.04em}
.warranty-unit{font-size:clamp(20px,2vw,28px);font-weight:300}
.warranty-figure p{grid-column:1/-1;margin:14px 0 0!important;font-size:15px!important;color:var(--fnl-white-72);max-width:none!important}
.warranty-hero-actions{display:flex;flex-wrap:wrap;align-items:center;gap:16px 34px;margin-top:clamp(30px,4vw,48px)}
.warranty-hero-actions .subtle-link{margin-top:0!important}
.warranty-lead .solid-button{margin-top:28px;color:var(--fnl-white)!important;background:var(--fnl-delft);border-color:var(--fnl-delft)}
.warranty-lead .solid-button:hover{background:var(--fnl-charcoal)}
.editorial-section.paper.warranty-section+.warranty-section{padding-top:clamp(40px,5vw,72px)}
.warranty-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--grid-gap,32px)}
.warranty-card{background:var(--soft-ground);padding:clamp(24px,2.6vw,38px);display:grid;align-content:start;gap:14px}
.warranty-card h3{font-size:clamp(22px,1.9vw,28px);font-weight:300;line-height:1.25;margin:0 0 4px}
.warranty-card h4{font-size:13px;letter-spacing:.12em;text-transform:uppercase;font-weight:400;margin:10px 0 0;color:var(--fnl-delft-72)}
.warranty-card p,.warranty-card li{font-size:15px;font-weight:300;line-height:1.65;margin:0}
.warranty-card ul{margin:0;padding-left:18px;display:grid;gap:6px}
.warranty-card .text-link{justify-self:start;margin-top:8px;gap:20px}
.warranty-conditions .reading-column{font-size:16px}
.warranty-conditions .editorial-heading h2{font-size:clamp(28px,2.8vw,42px)}
@media (max-width:1000px){.warranty-cards{grid-template-columns:1fr}}