/* Precise line icons, stable touch layouts and shared optical alignment. */
:root{--viewport-height:100svh}
.ui-icon{display:inline-block;width:20px;height:20px;min-width:20px;flex:0 0 20px;vertical-align:middle;overflow:visible;pointer-events:none}
.arrow,.circle-arrow{display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;min-width:24px;flex:0 0 24px;border:0;border-radius:0;font-size:0;line-height:1;transition:transform .25s var(--ease)}
.circle-arrow::before,.circle-arrow::after{content:none}
.header-listen .arrow,.menu-layout nav i{display:none}
.header-listen{gap:0}
.menu-layout nav .ui-icon{display:none}
.menu-bottom a{display:inline-flex;align-items:center;gap:10px;min-height:44px}
.text-link,.subtle-link,.inline-link,.product-back,.listen-cta{align-items:center}
.text-link,.subtle-link{gap:16px}
.text-link>span:has(>.ui-icon),.subtle-link>span:has(>.ui-icon),.inline-link>span:has(>.ui-icon),.product-back>span:has(>.ui-icon){display:inline-flex;align-items:center;justify-content:center;flex:0 0 20px}
.listen-cta{display:inline-flex;gap:24px;min-height:52px;justify-content:space-between;border-bottom:1px solid var(--line-strong);padding:10px 0;font-size:21px}
.listen-cta .circle-arrow,.product-listen .circle-arrow{width:24px;height:24px;flex:0 0 24px}
.editorial-cta .listen-cta>span:has(svg){font-size:0;display:inline-flex}
.range-listen .listen-cta{max-width:350px}
.product-listen .listen-cta{max-width:380px}
.product-range-link{align-items:center}
.product-range-link>.ui-icon{margin-left:auto}
.lineup-label>span{display:inline-flex;align-items:center;align-self:center}
.compare-table thead th a span .ui-icon{width:14px;height:14px;min-width:14px;vertical-align:-3px}
.system-path li:not(:last-child)::after{content:'';width:16px;height:16px;background:currentColor;mask:url('assets/arrow-right.svg') center/contain no-repeat;-webkit-mask:url('assets/arrow-right.svg') center/contain no-repeat}
.product-back,.back-top{white-space:nowrap}
.network-footer .back-top{border:1px solid var(--fnl-white-16);width:44px;height:44px}
.solid-button{gap:20px}
.solid-button .ui-icon{margin-left:4px}
[data-reveal],.in-view{scroll-margin-top:calc(var(--header-height) + 24px)}
html.motion-reduced{scroll-behavior:auto}
.preview-note{border-left:0;padding:14px 16px}
/* A constant reading layout on phones and tablets. Only the stage keeps a scroll reveal. */
.compact-journey .site-header{background:var(--fnl-delft);color:var(--fnl-white);transition:none}
.compact-journey .site-header .brand-white{opacity:1}.compact-journey .site-header .brand-blue{opacity:0}
.compact-journey .manifesto,.compact-journey .technology,.compact-journey .listening{height:auto;min-height:0}
.compact-journey .manifesto-stage,.compact-journey .technology-stage,.compact-journey .listening-stage{position:relative;height:auto;min-height:0}
.compact-journey .manifesto-stage{padding-top:80px;padding-bottom:70px;gap:35px}
.compact-journey .manifesto h2{margin:18px 0 10px}
.compact-journey .manifesto-bottom{margin:0}
.compact-journey .technology-stage{padding-top:75px;padding-bottom:65px}
.compact-journey .principle-notes{min-height:0}
.compact-journey .principle-notes p{position:static;opacity:1!important;transform:none!important}
.compact-journey .principle-notes p:last-child{margin-bottom:0}
.compact-journey .listening-stage{min-height:650px;padding-top:65px;padding-bottom:30px}
.compact-journey .closing-image{top:0}
.compact-journey .listen-copy{padding-left:0;padding-right:0}
.compact-journey .manifesto-atmosphere img,.compact-journey .origin-portrait img,.compact-journey .closing-image img{transform:none!important}
.compact-journey .product-hero-art,.compact-journey .product-page [data-parallax]>img{transform:none!important}
.compact-journey .editorial-page [data-reveal],.compact-journey .product-page [data-reveal],.compact-journey .collection-page [data-reveal]{transition-duration:.5s}
.compact-journey .awaiting{transform:translateY(12px)}
/* Prevent content from changing row height as models are switched. */
@media(max-width:1100px){
 .desktop-nav{display:none}
 .header-actions{margin-left:auto}
 .site-header{gap:24px}
 .menu-layout{grid-template-columns:.65fr 1.35fr;gap:40px}
 .range-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:48px 28px}
 .range-family-heading p{max-width:48%}
 .product-editorial,.editorial-heading,.range-section-intro{column-gap:32px}
 .range-model>p{min-height:0}
 .network-footer{grid-template-columns:1fr;gap:40px}
 .network-footer nav{grid-template-columns:repeat(3,1fr)}
}
@media(max-width:760px){
 :root{--header-height:80px}
 .brand,.brand img,.menu-top>a img{width:60px;height:48px}
 .header-actions{gap:16px}
 .header-listen{font-size:12px;min-height:44px}
 .menu-button{min-width:44px;min-height:44px;justify-content:center}
 .menu-icon,.menu-icon i{width:20px}
 .menu-button:hover i{transform:none}
 .menu-layout{grid-template-columns:1fr;min-height:calc(var(--viewport-height) - 205px);gap:0}
 .menu-layout nav{padding:20px 0}
 .menu-layout nav>a{padding:15px 0;gap:16px;font-size:clamp(27px,7.2vw,38px)}
 .menu-layout nav a>span{margin:0;min-width:16px;font-size:9px;padding-top:8px}
 .menu-layout nav .menu-secondary{padding-top:24px;gap:0 24px}
 .menu-layout nav .menu-secondary a{font-size:15px}
 .menu-bottom{padding-bottom:25px;align-items:center}
 .menu-bottom>div{gap:14px}
 .menu-bottom .ui-icon{display:none}
 .stage{height:var(--viewport-height);min-height:0}
 .hero-copy{left:24px;right:24px;bottom:105px}
 .hero-copy h1{font-size:clamp(32px,8.7vw,52px);letter-spacing:.1em}
 .hero-copy h1 br{display:none}
 .hero-subtitle{font-size:14px;margin-top:20px}
 .hero-model{top:35%;right:24px;max-width:110px}
 .hero-model>span:last-child{font-size:12px}
 .hero-model .ui-icon{display:none}
 .hero-bottom{left:24px;right:24px;bottom:18px;gap:16px}
 .hero-origin{display:none}
 .hero-room-copy{bottom:16%;right:24px;max-width:none}
 .hero-room-copy h2{font-size:clamp(40px,10.5vw,52px)}
 .hero-room-copy .text-link{font-size:14px;min-width:0;width:auto;max-width:100%;gap:24px}
 .chapter-top .eyebrow,.listen-top .eyebrow{font-size:10px}
 .manifesto h2{font-size:clamp(31px,8.7vw,48px);line-height:1.25}
 .manifesto-bottom p,.manifesto-bottom>a{font-size:14px}
 .collection-heading{display:block;margin-bottom:20px}
 .collection-heading>.eyebrow{max-width:none;font-size:10px;margin-bottom:16px}
 .collection-heading h2{font-size:34px}
 .model-info{grid-template-columns:80px minmax(0,1fr);gap:12px 20px;padding-top:24px}
 .model-info>.eyebrow{font-size:10px;grid-column:1/-1;margin:0 0 4px}
 .model-info h3{grid-column:1;grid-row:2;font-size:60px;line-height:1.05}
 .model-info .model-line{grid-column:2;grid-row:2;min-height:2.4em;font-size:25px;line-height:1.2;margin:0;align-self:center}
 .model-info>p:not(.eyebrow):not(.model-line){grid-column:1/-1;grid-row:3;font-size:15px;line-height:1.6;min-height:8em;margin:4px 0 0;max-width:none}
 .model-foot{grid-column:1/-1;margin:0}
 .model-foot .text-link{font-size:14px;min-height:48px}
 .view-controls{gap:24px}
 .view-controls button{font-size:12px;min-height:44px;padding:8px 0}
 .model-controls{height:64px;margin-top:8px}
 .model-tabs button{min-height:48px}
 .principle-layout{gap:24px}
 .tech-intro{font-size:16px;line-height:1.6}
 .principle-notes{margin-top:12px}
 .principle-notes p{font-size:15px;line-height:1.7;margin-bottom:25px}
 .principle-notes p>span{font-size:10px;margin-bottom:10px}
 .principle-copy>.text-link{font-size:14px;min-height:48px;min-width:0;width:100%}
 .panel-study figcaption{align-items:start;font-size:12px}
 .panel-study figcaption small{font-size:9px;max-width:120px;text-align:right;line-height:1.5}
 .origin-copy h2{font-size:clamp(34px,9.5vw,44px)}
 .origin-copy p{font-size:16px;line-height:1.75}
 .origin-copy .text-link{font-size:14px}
 .cinema h2{font-size:32px}.cinema p:not(.eyebrow){font-size:16px}
 .cinema>.text-link{font-size:14px}
 .listen-copy h2{font-size:clamp(39px,10.5vw,58px)}
 .listen-bottom p{font-size:17px}
 .listen-cta,.range-listen .listen-cta,.product-listen .listen-cta,.editorial-cta .listen-cta{width:100%;font-size:18px;gap:20px;max-width:380px;min-height:52px}
 .listen-cta .circle-arrow,.product-listen .circle-arrow{width:20px;height:20px;flex-basis:20px}
 .text-link .arrow{width:20px;height:20px;min-width:20px;flex-basis:20px}
 .text-link:hover .arrow,.subtle-link:hover span{transform:none}
 .range-grid{display:grid;grid-template-columns:1fr;gap:44px}
 .range-model+.range-model{margin-top:0}
 .range-family-heading p{max-width:none;font-size:15px}
 .range-intro-note p,.range-model>p{font-size:16px}
 .range-model>.text-link{font-size:14px}
 .range-nav a:not(:last-child),.product-nav-links a{font-size:12px}
 .range-nav a:last-child::before{font-size:12px}
 .range-principle .text-link{min-width:0;width:100%;font-size:14px}
 .range-cinema .subtle-link{font-size:14px;line-height:1.5}
 .compare-table thead th a span .ui-icon{display:none}
 .product-back{font-size:13px;gap:12px}
 .product-back span{font-size:0}
 .product-hero-bottom .subtle-link{font-size:13px}
 .product-title-group{align-items:start;gap:24px}
 .product-title-group .product-hero-statement{line-height:1.2}
 .product-dimension-summary{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;max-width:none}
 .product-dimension-summary dd{font-size:27px;white-space:nowrap}
 .product-design-copy>p:not(.product-small),.product-material-copy>p:not(.eyebrow),.spec-heading>p:not(.eyebrow){font-size:16px}
 .product-view-controls button{font-size:13px}
 .system-path p{font-size:14px}
 .system-questions .text-link,.spec-heading>.text-link,.product-material .text-link{font-size:14px}
 .system-path li:not(:last-child)::after{display:none}
 .product-range-link{align-items:center;flex-wrap:wrap}
 .product-range-link .ui-icon{width:20px;height:20px}
 .editorial-heading h2{font-size:clamp(34px,8.8vw,48px)}
 .editorial-hero .subtle-link{font-size:14px}
 .editorial-comparison .text-link{margin-top:20px;min-width:0;width:100%}
 .editorial-faq summary{font-size:20px;line-height:1.45;align-items:baseline}
 .field input,.field select,.field textarea{font-size:16px;min-height:56px}
 .inline-link{display:inline;line-height:1.65}
 .inline-link .ui-icon{width:15px;height:15px;min-width:15px;margin-left:5px;vertical-align:-3px}
 .request-review h2,[data-form-step] h3{scroll-margin-top:calc(var(--header-height) + 24px)}
 .network-footer{padding:44px 24px 24px;gap:36px}
 .network-footer nav{grid-template-columns:1fr 1fr;gap:2px 28px;font-size:14px}
 .network-footer nav>div{display:contents}
 .network-footer nav a{min-height:44px;line-height:1.4}
 .footer-signature p{font-size:16px!important}
 .network-footer .footer-signature{gap:28px}
 .footer-colophon{padding-top:20px}
 .footer-colophon>span{font-size:11px}
 .footer-colophon>a:nth-child(2){font-size:12px}
 .editorial-section .text-link,.dealer-actions .subtle-link{font-size:14px}
 .document-row{grid-template-columns:65px minmax(0,1fr);align-items:start}
 .document-row>span:last-child{display:flex;align-items:center;gap:12px}
}
@media(max-width:370px){.model-info>p:not(.eyebrow):not(.model-line){min-height:9.6em}.header-actions{gap:8px}.product-dimension-summary dd{font-size:23px}.range-nav{gap:14px}.range-nav a:not(:last-child),.product-nav-links a{font-size:11px}.menu-layout nav>a{font-size:27px}}
@media(hover:hover) and (pointer:fine){a:hover>.ui-icon,a:hover>.arrow,a:hover .circle-arrow{transform:translateX(3px)}.back-top:hover>.ui-icon{transform:translateY(-2px)}}
@media(prefers-reduced-motion:reduce){.ui-icon,.arrow,.circle-arrow{transition:none!important}}

html{scrollbar-gutter:stable}

.model-visual{touch-action:pan-y}
.compact-journey .lineup-model:hover .lineup-image img,.compact-journey .range-model:has(a:hover) .range-model-photo img{transform:none}
@media(max-width:760px){.product-title-group .product-hero-statement{margin-top:6px}}

/* Feedbackronde 4 oktober -------------------------------------------------------------------
   Shared. Material still to come (Maarten) is drawn in the Ice House stator motif (design-system/motif.css),
   with the same type as the rest of the site: visible, but never a broken or empty frame. */
.tm{font-size:.32em;vertical-align:super;letter-spacing:0;margin-left:.08em;font-weight:400}
.placeholder-tag{display:inline-flex;align-items:center;gap:12px;font-size:11px;line-height:1.4;letter-spacing:.16em;text-transform:uppercase;opacity:.72}
.placeholder-tag::before{content:'';width:24px;height:1px;background:currentColor}
.maarten-aside{display:grid;gap:12px;margin-top:36px;padding-top:22px;border-top:1px solid var(--fnl-white-16);max-width:430px}
.maarten-aside .eyebrow{margin:0}
.maarten-aside p:not(.eyebrow){margin:0;font-size:15px;font-weight:300;line-height:1.6;color:var(--fnl-white-72)}
/* Ice House: gentle transitions between screens. Browsers without support navigate as before. */
@view-transition{navigation:auto}
::view-transition-old(root){animation:fnl-page-out .32s cubic-bezier(.4,0,.2,1) both}
::view-transition-new(root){animation:fnl-page-in .55s cubic-bezier(.2,0,0,1) both}
@keyframes fnl-page-out{to{opacity:0}}
@keyframes fnl-page-in{from{opacity:0;transform:translateY(10px)}}
@media (prefers-reduced-motion:reduce){@view-transition{navigation:none}}
.motion-reduced::view-transition-old(root),.motion-reduced::view-transition-new(root){animation:none}

/* Poster for material in production (home film, Maarten at work): a real still, toned to Delft. */
.poster{position:relative;margin:0;width:100%;aspect-ratio:16/9;max-height:72vh;overflow:hidden;isolation:isolate}
.poster img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:grayscale(1) brightness(.55)}
.poster::after{content:'';position:absolute;inset:0;background:var(--fnl-delft);opacity:.4;mix-blend-mode:multiply}
.poster-title{position:absolute;left:clamp(24px,4vw,64px);bottom:clamp(24px,4vw,64px);z-index:1;display:grid;gap:18px;color:var(--fnl-white)}
.poster-dateline{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px 32px;margin:18px 0 0;font-size:13px;line-height:1.5;color:var(--fnl-white-72)}

/* Review 4 October: legibility floor from the Ice House tokens (--text-label 12px). Labels and functional text
   were set at 8 to 10px across the stylesheets; one rule here restores the token size everywhere.
   !important is deliberate: it overrides the many per-section sizes in older stylesheets in one place. */
.eyebrow,.motion-toggle,.request-progress li,.product-nav-links a,.range-nav a:not(:last-child),.compare-table th,.compare-table thead th a span,
.layer-label,.product-caption,.hero-bottom,.copyright,.principle-notes p>span,.view-controls button,.material-caption,
.spec-table dd small,.spec-table h3 span,.product-small,.comparison-note,.range-hero-foot p,.range-cinema>span,.system-step,
.product-dimension-summary dt,.dimension-height,.dimension-width,.tech-caption,.panel-study figcaption,.panel-study figcaption small,
.origin-portrait figcaption,.origin-portrait .year small,.editorial-photo figcaption,.menu-layout nav a>span,.model-foot>span,
.listening footer>p,.product-range-link>span:first-child,.field-note,.placeholder-tag{font-size:var(--text-label,12px)!important}
.network-footer nav a{font-size:13px}
@media (max-width:760px){
 .eyebrow,.motion-toggle,.layer-label,.product-caption,.hero-bottom,.principle-notes p>span,.view-controls button,.material-caption,
 .menu-layout nav a>span,.product-nav-links a,.range-nav a:not(:last-child),.panel-study figcaption small,.origin-portrait .year small,.placeholder-tag{font-size:11px!important}
}
/* Collection sub-navigation on phones: the last link keeps its short 'Listen' label; the bar scrolls sideways if needed. */
@media (max-width:760px){.range-nav{overflow-x:auto;scrollbar-width:none}.range-nav::-webkit-scrollbar{display:none}.range-nav a{flex:0 0 auto}.range-nav a:last-child::before{font-size:11px}}

/* Dutch and German (actielijst 29-10, point 38): long compounds hyphenate in narrow places instead of overflowing. */
@media (max-width:480px){html:is([lang=nl],[lang=de]) :is(h1,h2,h3,.model-line){hyphens:auto;hyphenate-limit-chars:12 5 5;overflow-wrap:break-word}}
@media (max-width:1100px){html:is([lang=nl],[lang=de]) :is(.living-journey-grid,.living-journey-steps) h3{hyphens:auto;hyphenate-limit-chars:10 4 4;overflow-wrap:break-word}}
/* Home: the listen button spans the fourth journey column, so its left edge stays on that column in every language. */
@media (min-width:1101px){.listening .listen-bottom>.listen-cta{flex:0 0 calc((100% - 3 * var(--grid-gap,32px)) / 4);justify-content:space-between}}