/* Shared type scale for the product page. Regular reading text, medium UI and headings. */
:root{--type-heading:48px;--type-card:24px;--type-body:18px;--type-small:14px}
body{font-family:var(--font);font-size:var(--type-body);font-weight:400;line-height:1.45}
h1,h2,h3,h4,summary,.button{font-family:var(--font);font-weight:500}
.button{font-size:17px;letter-spacing:-.015em;line-height:1.2;min-height:50px;gap:16px}
.open-arrow{width:18px;height:18px;flex:0 0 18px}
.reference-section h2,.adjustments-heading h2,.pause-heading h2,.airflow h2,.faq h2{font-size:var(--type-heading);line-height:1.1;letter-spacing:-.035em}
.feature-mosaic h3,.adjustment-copy h3,.model-grid h3,.durability-grid h3,.sequence-details h3{font-size:var(--type-card);font-weight:500;line-height:1.2;letter-spacing:-.02em}
.section-lead,.adjustments-heading>p,.pause-heading>p,.adjustment-copy p,.model-grid p,.model-grid li,.durability-grid p,.sequence-details p,.airflow-detail p,.material-split p,.airflow p:not(.eyebrow){font-size:var(--type-body);line-height:1.45}
.feature-mosaic p{font-size:16px;line-height:1.4}.media-footnote,.model-note,.showroom-note,.technical-label{font-size:var(--type-small);line-height:1.4}.section-label,.eyebrow{font-weight:500}
.purchase.section{display:block;padding-top:64px;padding-bottom:40px}
.purchase-copy{max-width:800px;margin:0 auto;padding:0}
.purchase-copy h2{font-size:52px;line-height:1.08;font-weight:500}
.purchase .product-summary{font-size:20px;line-height:1.4}
.configuration>div>span{font-size:15px}.configuration strong{font-size:20px;font-weight:500}
.price{font-size:48px;font-weight:500}.price span{font-size:30px}
.purchase-button{font-size:18px;font-weight:500;min-height:54px;padding:16px 22px;gap:16px}
.showroom-link{font-size:17px;font-weight:500;align-items:center;gap:16px;padding:20px 0}
.purchase-benefits{font-size:15px;line-height:1.4;gap:16px 24px;justify-content:flex-start;color:#66666b}
.product-specs{margin-top:24px}.product-specs>summary{font-size:24px;font-weight:500;padding:22px 0;line-height:1.25}
.product-specs .specs-table dl>div{font-size:16px;padding:14px 0;line-height:1.4}.product-specs .specs-table dd{font-weight:500}.product-specs .text-link{font-size:15px}
.faq.section{padding-top:48px;padding-bottom:64px;grid-template-columns:.8fr 1.2fr;gap:64px}.faq h2{margin:0;max-width:360px}
.faq summary{font-size:22px;font-weight:500;line-height:1.3;padding:24px 0;align-items:center}.faq summary span{flex:0 0 24px;text-align:center;font-size:26px;font-weight:400}.faq details p{font-size:18px;line-height:1.45;padding:0 30px 24px 0;margin:0;color:#66666b}.faq details:first-child summary{padding-top:0}
.showroom-bottom .button{min-height:52px;padding:15px 22px;font-size:17px;font-weight:500;gap:20px}.showroom-bottom .button .open-arrow{width:18px;height:18px;flex-basis:18px}.showroom-bottom p{font-size:20px;line-height:1.4}.showroom-note{font-size:14px}
.contact-dialog>p:not(.eyebrow){font-size:17px;line-height:1.45}.contact-hours{font-size:14px}.contact-dialog .text-link{font-size:14px}
@media(max-width:1050px) and (min-width:701px){:root{--type-heading:40px}.faq.section{gap:36px}.faq summary{font-size:20px}}
@media(max-width:700px){
 :root{--type-heading:34px;--type-card:22px;--type-body:17px;--type-small:13px}
 .header .brand{transform:translateY(-9px)}.header .menu-toggle{transform:translateY(-8px)}
 .mobile-hero-controls>div{display:none}.mobile-hero-controls{padding-top:16px}
 .button{font-size:16px;font-weight:500;min-height:48px}
 .feature-mosaic h3{font-size:22px}.feature-mosaic p{font-size:16px}.adjustment-copy p,.sequence-details p{font-size:17px}
 .support-copy .feature-accordion summary{font-weight:500;font-size:21px}.support-copy .feature-accordion details p{font-size:17px}
 .purchase.section{padding:40px 24px 24px}.purchase-copy h2{font-size:36px}.purchase .product-summary{font-size:18px}.configuration>div>span{font-size:14px}.configuration strong{font-size:18px}.price{font-size:40px}.price span{font-size:28px}.purchase-button{font-size:17px;min-height:52px;padding:15px 18px}.showroom-link{font-size:16px;line-height:1.4;padding:18px 0}.purchase-benefits{font-size:14px;gap:12px 20px;margin-top:20px}
 .product-specs{margin-top:22px}.product-specs>summary{font-size:22px;padding:20px 0}.product-specs .specs-table dl>div{font-size:15px;line-height:1.4;padding:12px 0}.product-specs .text-link{font-size:14px}
 .faq.section{display:block;padding:32px 24px 48px}.faq h2{font-size:34px;line-height:1.1;margin-bottom:28px}.faq summary{font-size:20px;line-height:1.35;padding:22px 0;gap:16px}.faq summary span{font-size:24px}.faq details p{font-size:17px;padding-right:0;padding-bottom:22px;line-height:1.45}
 .showroom-bottom .button{font-size:16px;min-height:52px;padding:15px 18px;gap:12px;letter-spacing:-.02em}.showroom-bottom p{font-size:18px}.showroom-note{font-size:13px}
 .angle-description p{font-size:16px}.mobile-hero-rail figcaption{font-size:14px}.model-grid ul{font-size:17px}
}
@media(max-width:700px){.header .brand{transform:translateY(-13px)}}
/* Edge-to-edge mobile film opening on a matching dark canvas. */
@media(max-width:700px){
 .mobile-film-hero.hero{padding:0;background:#171719;color:#f5f5f7}
 .mobile-film-heading{margin:0;padding:30px 24px 28px;background:#171719}
 .mobile-film-heading p{color:#c8c8cc}
 .mobile-film-hero h1{color:#f5f5f7}
 .mobile-film-card{height:clamp(420px,62svh,650px);width:100%;border-radius:0;background:#171719;overflow:hidden}
 .mobile-film-card:after{content:'';position:absolute;inset:0 0 auto;height:90px;background:linear-gradient(180deg,#171719,transparent);pointer-events:none;z-index:1}
 .mobile-film-card .presentation-video{object-position:58% center}
 .mobile-film-card .button{left:24px;bottom:24px}
 .mobile-film-card .media-toggle{right:24px;bottom:26px}
}
/* The mobile opening occupies precisely the remaining visible screen. */
@media(max-width:700px){
 .mobile-film-hero.hero{display:flex;flex-direction:column;height:calc(100svh - var(--mobile-header-height));height:calc(100dvh - var(--mobile-header-height));min-height:0;max-height:none;padding:0}
 .mobile-film-heading{flex:0 0 auto;padding:clamp(18px,3.4dvh,30px) 24px 24px}
 .mobile-film-card{flex:1 1 0;min-height:0;height:auto;width:100%}
 .mobile-film-card .button{bottom:max(20px,var(--page-safe-bottom))}
 .mobile-film-card .media-toggle{bottom:calc(max(20px,var(--page-safe-bottom)) + 2px)}
}
@media(max-width:700px) and (max-height:600px){.mobile-film-heading{padding:12px 24px 14px}.mobile-film-heading p{font-size:15px;margin-bottom:8px}.mobile-film-hero h1{font-size:28px}}
/* Let the film continue behind the mobile title, as in the desktop opening. */
@media(max-width:700px){
 .mobile-film-heading{position:absolute;inset:0 0 auto;z-index:2;padding:12px 24px 32px;background:transparent;pointer-events:none}
 .mobile-film-heading p{margin-bottom:10px}
 .mobile-film-card{flex:1 1 auto;height:100%;aspect-ratio:auto}
 .mobile-film-card:after{inset:0;height:100%;background:linear-gradient(180deg,#171719 0%,#171719e6 8%,#17171999 23%,#17171933 40%,transparent 60%)}
 .mobile-film-card .presentation-video{object-position:58% center}
}
/* Standalone mechanism film, with no letterboxed portrait container. */
.support.section{display:block;padding:56px 6.3% 32px}
.support .support-video{width:100%;max-width:1120px;margin:0 auto;aspect-ratio:16/9;height:auto;min-height:0;border-radius:28px}
.support .support-video .presentation-video{display:block;width:100%;height:100%;object-fit:cover;background:#171719}
.support-caption{max-width:1120px;margin:16px auto 0;font-size:18px;font-weight:500;letter-spacing:-.015em;color:#66666b}
.support .media-toggle{width:40px;height:40px;right:16px;bottom:16px;border:0;background:#ffffffd9;color:#1d1d1f}
@media(max-width:700px){
 .support.section{padding:32px 24px 24px}
 .support .support-video{border-radius:22px}
 .support-caption{margin-top:12px;font-size:16px;line-height:1.35}
 .adjustments-grid .media-frame{aspect-ratio:1/1;border-radius:24px}
 .adjustments-grid .presentation-video{object-fit:cover;object-position:center}
 .adjustments-grid .media-toggle{width:40px;height:40px;right:16px;bottom:16px;border:0;background:#ffffffd9;color:#1d1d1f}
}
/* Mobile browser chrome and safe areas must share the opening film's canvas. */
html{overscroll-behavior-y:none}
body{overscroll-behavior-y:none}
a>.open-arrow{display:inline-block;vertical-align:middle;flex-shrink:0}
.chair-sequence,.chair-sequence .sequence-header,.sequence-stage,.sequence-details{background:#f5f5f7}
.sequence-canvas,.sequence-poster{mix-blend-mode:multiply}
.sequence-poster img{object-fit:cover}
@media(max-width:700px){
 :root{--mobile-header-height:calc(36px + var(--page-safe-top))}
 .header{align-items:center;overflow:visible}
 .header .brand{transform:none;font-size:24px;line-height:28px}
 .header .menu-toggle{transform:none;min-height:36px}
 /* Extend the actual film through the bottom safe area, including Safari's
    translucent controls. max() also handles browsers reporting dvh > lvh. */
 .mobile-film-hero.hero{--opening-viewport:100vh;--opening-viewport:max(100lvh,100dvh,var(--opening-screen-height,0px));height:calc(var(--opening-viewport) - var(--mobile-header-height) + var(--page-safe-bottom));min-height:calc(100vh - var(--mobile-header-height))}
 /* svh stays stable when Safari retracts its toolbar; controls move with the film. */
 .mobile-film-card .button{bottom:calc(20px + var(--page-safe-bottom) + var(--page-safe-bottom) + var(--opening-viewport) - 100svh)}
 .mobile-film-card .media-toggle{bottom:calc(22px + var(--page-safe-bottom) + var(--page-safe-bottom) + var(--opening-viewport) - 100svh)}
 .sequence-stage{top:var(--mobile-header-height);height:calc(100lvh - var(--mobile-header-height));min-height:0}
 .mobile-film-card .open-arrow{color:#111}
}
/* Safari 26 edge-color sampling workaround: sample a transparent edge instead
   of extending an opaque sticky-section background beneath browser controls.
   Source: https://gist.github.com/kentbrew/74bd4319034aa4c025039f48488a7a89
   Keep this unpainted: no background, border, filter, opacity or transform. */
@media(max-width:700px){
 body::after{content:"";position:fixed;left:0;right:0;bottom:0;height:5px;z-index:1000;pointer-events:none}
}

/* Inset product panels share a restrained mobile gutter and corner radius. */
.airflow{margin:24px 32px;border-radius:32px;isolation:isolate}
@media(max-width:700px){
 .feature-overview.reference-section,.materials.reference-section,.durability.reference-section,.models.reference-section,.adjustments.section,.support.section{padding-left:18px;padding-right:18px}
 .feature-mosaic,.materials-wide,.material-split img,.durability-grid article,.model-grid article,.support .support-video,.adjustments-grid .media-frame{border-radius:24px}
 .durability-grid{gap:18px}
 .durability-grid h3,.durability-grid p{margin-left:24px;margin-right:24px}
 .model-grid{margin-right:-18px;padding-right:18px;scroll-padding-left:0}
 .model-grid article{flex-basis:calc(100vw - 36px)}
 .airflow{margin:24px 18px;border-radius:28px;min-height:0;display:flex;flex-direction:column;background:#202123}
 .airflow-copy{order:0;width:100%;padding:32px 24px 24px}
 .airflow h2{margin:24px 0;font-size:34px;line-height:1.08}
 .airflow p:not(.eyebrow){max-width:none}
 .airflow-line,.airflow .technical-label{display:none}
 .airflow>img{position:relative;inset:auto;order:1;width:100%;height:380px;object-fit:cover;object-position:62% center;display:block}
}

/* A small dark lead-in keeps the taller iPhone opening from enlarging the film. */
@media(max-width:700px){
 .mobile-film-hero.hero{padding-top:24px}
 .mobile-film-card{height:auto;flex:1 1 0}
}

@media(max-width:700px){
 .chair-sequence .sequence-stage{margin-top:-180px}
 .chair-sequence .sequence-header{padding-bottom:16px}
 .mobile-hero-rail img{mix-blend-mode:multiply}
}

@media(max-width:700px){.durability.reference-section{padding-top:32px}}

.chair-sequence .sequence-header .eyebrow{line-height:1.2}
.chair-sequence .sequence-header h2{margin-top:10px;line-height:1.05}
@media(max-width:700px){
 .chair-sequence .sequence-header{padding-top:32px}
 .chair-sequence .sequence-header h2{margin-top:8px}
}