/* Shared interior pages, using the approved homepage palette and typography. */
.desktop-nav { gap: 23px; }
.site-header { gap: 24px; }
.header-actions { gap: 20px; }
.desktop-nav a[aria-current]::after { width: 100%; }
.mobile-menu { max-height: calc(100vh - var(--menu-top, 130px)); max-height: calc(100dvh - var(--menu-top, 130px)); overflow-y: auto; overscroll-behavior-y: contain; }
.mobile-menu a[aria-current] { color: var(--accent); font-weight: 600; }
@media (max-width: 1100px) { .desktop-nav { display: none; } .menu-toggle { display: block; } }
.breadcrumbs { display: flex; flex-wrap: wrap; gap: 12px; padding: 20px var(--gutter); font-size: 10px; color: var(--muted); border-bottom: 1px solid var(--line); }
.breadcrumbs a:hover { color: var(--accent); }
.page-intro { max-width: 1450px; padding-top: 68px; padding-bottom: 58px; }
.page-intro h1, .page-hero h1 { font-size: clamp(52px, 5.3vw, 82px); margin: 21px 0 27px; }
.page-intro h1 em, .page-hero h1 em { color: var(--accent); }
.intro-description { max-width: 650px; font-size: 16px; line-height: 1.8; }
.page-intro > .button { margin-top: 26px; }
.compact-top { padding-top: 8px; }
.cream-section { background: var(--cream); }
.page-hero { display: grid; grid-template-columns: 47% 53%; min-height: 540px; }
.page-hero-copy { padding: 66px 45px 66px var(--gutter); align-self: center; }
.page-hero h1 { font-size: clamp(46px, 4.7vw, 72px); }
.page-hero-copy > p:not(.eyebrow) { font-size: 14px; line-height: 1.9; max-width: 470px; }
.page-hero figure { position: relative; min-height: 540px; }
.page-hero figure img { position: absolute; height: 100%; object-fit: cover; }
.team-hero figure img { object-position: 51% center; }
.feature-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 38px; }
.feature-grid article { border-top: 1px solid var(--line); padding-top: 24px; }
.feature-grid h3 { font-family: var(--serif); font-size: 32px; line-height: 1.13; margin: 20px 0 16px; }
.feature-grid p:not(.eyebrow) { font-size: 13px; line-height: 1.9; }
.hero-support strong { display: block; color: var(--ink); font-weight: 550; margin-bottom: 5px; }
.hero .button-outline { color: var(--ink); background: transparent; border-color: var(--ink); }
.hero .button-outline:hover { background: var(--cream); }
.home-private-label h2 { font-size: clamp(44px, 4.8vw, 70px); }
.home-private-label.editorial-split .private-label-intro { font-family: var(--serif); font-size: 27px; line-height: 1.3; color: var(--muted); margin-top: 24px; }
.private-label-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 22px 28px; margin-top: 30px; }
@media (max-width: 600px) { .hero .hero-actions { gap: 12px; } .home-private-label h2 { font-size: 51px; } .private-label-actions { align-items: flex-start; flex-direction: column; } .private-label-actions .text-link { white-space: normal; } }
.experience-section { background: var(--paper); border-bottom: 1px solid var(--line); }
.experience-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px; }
.experience-grid article { border-top: 1px solid var(--line); padding-top: 25px; }
.experience-grid h3 { font-family: var(--sans); font-size: 10px; font-weight: 500; letter-spacing: .12em; color: var(--muted); }
.experience-value { font-family: var(--serif); font-size: clamp(38px, 4.3vw, 65px); line-height: 1.1; letter-spacing: -.035em; color: var(--ink); margin: 24px 0; }
.experience-value span { display: block; font-size: 23px; line-height: 1.3; letter-spacing: -.01em; color: var(--accent); margin-top: 9px; }
.experience-grid p:not(.experience-value) { font-size: 13px; line-height: 1.9; max-width: 365px; }
.development-detail { max-width: 780px; margin-top: 35px; font-size: 13px; line-height: 1.9; }
.information-benefits { padding-left: 20px; color: var(--muted); font-size: 14px; line-height: 1.8; }
.information-benefits li + li { margin-top: 14px; }
.information-note { font-size: 12px; line-height: 1.8; margin-top: 25px; }
.information-layout .form-grid { margin-bottom: 22px; }
@media (max-width: 600px) { .information-layout .form-panel { grid-row: 1; } }
@media (max-width: 850px) { .experience-grid { gap: 24px; } .experience-value span { font-size: 20px; } }
@media (max-width: 600px) { .experience-grid { grid-template-columns: 1fr; gap: 30px; } .experience-value { font-size: 59px; margin: 18px 0; } .experience-value span { font-size: 24px; } }
.editorial-split { display: grid; grid-template-columns: 1fr 1fr; gap: 10%; }
.editorial-split h2 { margin-top: 18px; }
.editorial-split > div:last-child { align-self: center; }
.editorial-split p:not(.eyebrow) { margin-bottom: 19px; font-size: 14px; line-height: 1.9; overflow-wrap: anywhere; }
.editorial-split p a, .prose a, .faq-list p a { text-decoration: underline; text-underline-offset: 4px; }
.two-up { grid-template-columns: 1fr 1fr; max-width: 1040px; }
.two-up .product-photo { aspect-ratio: 1.5; }
.table-wrap { overflow-x: auto; margin: 24px 0; }
table { width: 100%; border-collapse: collapse; text-align: left; font-size: 13px; line-height: 1.7; }
caption { text-align: left; font-size: 11px; color: var(--muted); padding-bottom: 13px; }
th, td { padding: 19px 20px; border-bottom: 1px solid #cdd1c8; vertical-align: top; }
th { font-weight: 500; }
thead th { background: var(--ink); color: #fff; font-size: 11px; }
tbody td { color: var(--muted); }
.founder-section { display: grid; grid-template-columns: 32% 1fr; gap: 11%; }
.founder-section > figure { align-self: start; }
.founder-section > figure img { height: auto; aspect-ratio: 4/5; object-fit: cover; }
.founder-section figcaption { font-family: var(--serif); font-size: 26px; margin-top: 17px; line-height: 1.4; }
.founder-section figcaption span { font-family: var(--sans); font-size: 10px; color: var(--muted); }
.prose { max-width: 780px; margin-inline: auto; }
.prose h2 { font-size: clamp(34px, 3.2vw, 48px); margin: 46px 0 23px; line-height: 1.12; }
.prose h2:first-child, .prose .eyebrow + h2 { margin-top: 0; }
.prose .eyebrow + h2 { margin-top: 18px; }
.prose h3 { font-family: var(--serif); font-size: 28px; margin: 32px 0 18px; }
.prose p, .prose li { font-size: 15px; line-height: 1.9; margin-bottom: 20px; }
.prose ul, .prose ol { padding-left: 22px; color: var(--muted); }
.resource-grid, .journal-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0 40px; }
.resource-grid article, .journal-card { padding: 33px 0 38px; border-top: 1px solid var(--line); display: flex; flex-direction: column; align-items: flex-start; }
.resource-grid h3, .journal-card h2 { font-size: 34px; line-height: 1.13; margin: 18px 0; }
.resource-grid p:not(.eyebrow), .journal-card > p:not(.eyebrow) { font-size: 13px; line-height: 1.9; margin-bottom: 24px; }
.resource-grid .text-link, .journal-card .text-link { margin-top: auto; }
.journal-article { padding: 65px var(--gutter) 80px; }
.article-intro { max-width: 850px; margin: 0 auto 50px; text-align: center; }
.article-intro h1 { font-size: clamp(48px, 5.2vw, 76px); margin: 20px 0 25px; }
.article-intro > p:not(.eyebrow) { max-width: 700px; margin: auto; font-size: 16px; }
.article-intro time { display: block; margin-top: 25px; color: var(--muted); font-size: 11px; }
.article-body .pullquote, .article-body blockquote { margin: 38px 0; border-block: 1px solid var(--line); padding: 30px 0; font-family: var(--serif); font-size: 31px; line-height: 1.3; color: var(--accent); }
.article-body figure { margin: 35px 0; }
.article-body figcaption { font-size: 11px; color: var(--muted); margin-top: 12px; }
.article-body img { height: auto; }
.article-body .image-split { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.article-body .next-article-pointer { border-top: 1px solid var(--line); padding-top: 25px; margin-top: 35px; }
.article-table-wrap, .playbook-data-table { overflow-x: auto; max-width: 100%; margin: 28px 0; }
.article-table { min-width: 650px; }
.article-table-caption { font-size: 12px !important; }
.article-signoff { max-width: 780px; margin: 40px auto 0; border-top: 1px solid var(--line); padding-top: 30px; }
.article-signoff p { font-size: 12px; margin-bottom: 15px; }
.form-layout { display: grid; grid-template-columns: .8fr 1.2fr; gap: 8%; }
.form-layout aside { padding-top: 28px; }
.form-layout aside h2 { font-size: 44px; margin: 20px 0 26px; }
.form-layout aside > p:not(.eyebrow) { font-size: 13px; line-height: 1.9; margin-top: 18px; max-width: 350px; }
.aside-contact { margin-top: 30px; padding-top: 25px; border-top: 1px solid var(--line); }
.aside-contact p { font-size: 12px; }
.aside-contact > a { display: table; margin-top: 12px; font-size: 13px; }
.contact-details { display: grid; gap: 12px; margin-bottom: 25px; }
.contact-details a { overflow-wrap: anywhere; font-size: 14px; }
.aside-note { margin-bottom: 25px; }
.form-panel { padding: 36px; border: 1px solid var(--line); background: #f5f3ee; }
.required-note { font-size: 11px; }
.form-grid, .franchise-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 21px; margin: 22px 0; }
label, legend { display: block; font-size: 12px; color: var(--ink); font-weight: 500; }
input:not([type=checkbox]), select, textarea { display: block; margin-top: 8px; width: 100%; border: 1px solid #b6beb5; background: var(--paper); padding: 12px; border-radius: 0; color: var(--ink); font-size: 14px; min-height: 46px; }
input[type=hidden] { display: none; }
textarea { resize: vertical; }
fieldset { border: 0; padding: 0; margin: 25px 0; min-width: 0; }
.franchise-fields { border-top: 1px solid var(--line); padding-top: 20px; }
.franchise-fields legend { padding: 0 12px 0 0; }
.collection-choices { display: flex; flex-direction: column; gap: 9px; margin-top: 12px; }
.collection-choices label { display: flex; gap: 10px; align-items: center; padding: 12px; border: 1px solid var(--line); cursor: pointer; font-size: 12px; }
input[type=checkbox] { accent-color: var(--ink); width: 17px; height: 17px; flex-shrink: 0; }
.optional { font-weight: 400; color: var(--muted); font-size: 10px; }
.field-spacing { margin-top: 23px; }
.form-consent { font-size: 11px; line-height: 1.8; margin-top: 22px; }
.form-consent a { text-decoration: underline; text-underline-offset: 3px; }
.form-submit { margin-top: 22px; width: 100%; white-space: normal; }
.form-submit:disabled { opacity: .65; cursor: wait; }
.form-status, .local-form-note { padding: 15px 18px; background: #e8ece3; border-left: 3px solid #71856b; font-size: 12px; margin: 20px 0 0; }
.local-form-note { background: #eeeadf; border-color: var(--accent); margin: 0 0 22px; }
.form-status[data-error] { background: #f8e9e3; border-color: #a45134; }
.application-section { border-top: 1px solid var(--line); padding-top: 22px; margin: 32px 0; }
.application-section > legend { font: 28px/1.2 var(--serif); padding-right: 12px; }
.application-section > legend > span { display: inline-block; margin-right: 9px; font: 10px var(--sans); color: var(--accent); vertical-align: middle; }
.application-section .form-grid { margin-top: 10px; }
.application-note { font-size: 11px; line-height: 1.8; }
.application-acknowledgment { display: flex; align-items: flex-start; gap: 12px; margin-top: 24px; font-weight: 400; line-height: 1.8; }
.application-acknowledgment input { flex: 0 0 18px; width: 18px; height: 18px; margin-top: 3px; }
.honeypot { display: none; }
.footer-grid { display: grid; grid-template-columns: 1.1fr 1fr 1fr 1fr; gap: 35px; padding: 12px 0 40px; }
.footer-grid > div > p { font-family: var(--serif); font-size: 26px; line-height: 1.2; margin-top: 24px; }
.footer-grid nav h2 { font-family: var(--sans); font-size: 10px; font-weight: 550; text-transform: uppercase; letter-spacing: .1em; margin-bottom: 18px; }
.footer-grid nav a { display: block; font-size: 11px; line-height: 1.6; padding: 6px 0; }
.footer-grid nav a:hover { color: var(--accent); text-decoration: underline; text-underline-offset: 4px; }
.noscript-note { padding: 20px var(--gutter); font-size: 12px; background: var(--cream); }
@media (max-width: 1350px) { .portal-link { display: none; } .desktop-nav { gap: 20px; } }
@media (max-width: 1000px) { .page-hero-copy { padding-right: 30px; } .page-hero h1 { font-size: 54px; } .feature-grid { gap: 25px; } .resource-grid, .journal-grid { grid-template-columns: 1fr 1fr; gap: 0 30px; } .form-layout { gap: 5%; grid-template-columns: .7fr 1.3fr; } .form-panel { padding: 27px; } .form-grid { grid-template-columns: 1fr; } .desktop-nav { gap: 14px; } .desktop-nav a { font-size: 11px; } }
@media (max-width: 850px) { .page-hero { grid-template-columns: 1fr 1fr; } .page-hero h1 { font-size: 46px; } .page-hero-copy { padding-block: 45px; } .page-hero figure { min-height: 480px; } .page-hero { min-height: 480px; } .feature-grid { gap: 22px; } .feature-grid h3 { font-size: 28px; } .footer-grid { grid-template-columns: 1fr 1fr; gap: 35px; } .founder-section { gap: 7%; } .form-layout aside h2 { font-size: 37px; } .franchise-fields { grid-template-columns: 1fr; } }
@media (max-width: 600px) {
 .breadcrumbs { padding: 15px 24px; font-size: 9px; gap: 8px; }
 .page-intro { padding: 43px 24px 37px; }
 .page-intro h1 { font-size: 52px; margin: 20px 0 23px; }
 .intro-description { font-size: 14px; }
 .compact-top { padding-top: 8px; }
 .page-hero { display: flex; flex-direction: column; min-height: 0; }
 .page-hero-copy { padding: 42px 24px 36px; }
 .page-hero h1 { font-size: 52px; }
 .page-hero-copy > p:not(.eyebrow) { font-size: 14px; }
 .page-hero figure { min-height: 0; aspect-ratio: 1.3; }
 .team-hero figure { aspect-ratio: 1.4; }
 .page-hero .hero-actions { gap: 18px; }
 .page-hero .button { font-size: 11px; padding-inline: 18px; }
 .feature-grid, .editorial-split, .founder-section, .two-up, .resource-grid, .journal-grid, .form-layout { grid-template-columns: 1fr; }
 .feature-grid { gap: 28px; }
 .feature-grid h3 { font-size: 33px; margin-top: 17px; }
 .editorial-split { gap: 28px; }
 .editorial-split h2 { font-size: 41px; }
 .editorial-split p:not(.eyebrow) { font-size: 13px; }
 th, td { padding: 13px 10px; font-size: 11px; }
 .founder-section { gap: 35px; }
 .founder-section > figure { max-width: 280px; }
 .prose p, .prose li { font-size: 14px; line-height: 1.9; }
 .resource-grid article, .journal-card { padding: 29px 0 32px; }
 .resource-grid h3, .journal-card h2 { font-size: 35px; }
 .journal-article { padding: 43px 24px 55px; }
 .article-intro { text-align: left; margin-bottom: 36px; }
 .article-intro h1 { font-size: 48px; }
 .article-intro > p:not(.eyebrow) { font-size: 14px; }
 .article-body .pullquote, .article-body blockquote { font-size: 27px; }
 .form-layout { gap: 34px; }
 .form-layout aside { padding-top: 0; }
 .form-layout aside h2 { font-size: 40px; }
 .form-panel { padding: 24px 20px; }
 input:not([type=checkbox]), select, textarea { font-size: 16px; }
 .footer-grid { gap: 30px 23px; padding-top: 0; }
 .footer-grid > div { grid-column: 1/-1; }
 .footer-grid > div > p { font-size: 24px; margin-top: 17px; }
 .footer-grid nav a { font-size: 10px; padding-block: 7px; }
}
@media (max-width: 360px) { .page-intro h1, .page-hero h1 { font-size: 45px; } .form-panel { padding-inline: 15px; } .page-hero .button { font-size: 10px; } }

/* Quantum motorization: real product photography with optional closeup motion. */
.motor-hero { display: grid; grid-template-columns: .9fr 1.1fr; gap: 6%; align-items: center; padding-block: 48px; }
.motor-hero h1 { font-size: clamp(50px, 5vw, 76px); margin: 22px 0 28px; }
.motor-hero h1 em { color: var(--accent); }
.motor-hero-copy > p:not(.eyebrow) { font-size: 14px; line-height: 1.9; max-width: 470px; }
.motor-hero-copy .motor-experience { margin-top: 20px; }
.motor-hero .hero-actions { gap: 18px 25px; }
.motor-viewer { min-width: 0; background: #fff; border: 1px solid var(--line); }
.motor-viewer-top { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; padding: 23px 25px; font-size: 9px; letter-spacing: .08em; color: var(--muted); }
.motor-model-controls { display: none; justify-content: center; gap: 8px; }
.motor-viewer button { font: 500 11px var(--sans); color: var(--ink); cursor: pointer; background: transparent; border: 1px solid var(--line); padding: 11px 16px; }
.motor-viewer button:hover { border-color: var(--ink); }
.motor-viewer button[aria-pressed=true] { background: var(--ink); color: white; border-color: var(--ink); }
.motor-stage { position: relative; aspect-ratio: 1.9; overflow: hidden; margin: 12px 0 0; }
.motor-stage figure { height: 100%; }
.motor-stage figure[hidden] { display: none; }
.motor-object { display: block; width: 100%; height: 100%; object-fit: contain; transition: transform 1400ms cubic-bezier(.22,.7,.25,1); }
.motor-stage figcaption { position: absolute; bottom: 8px; left: 22px; right: 22px; z-index: 1; text-align: center; font-size: 9px; line-height: 1.5; color: var(--muted); background: rgb(255 255 255 / .9); padding: 6px; }
.motor-viewer[data-view=head] .motor-object { transform: scale(2.15) translate(29%, -28%); }
.motor-viewer[data-view=body] .motor-object { transform: scale(1.7) translate(-9%, 10%); }
.motor-view-controls { display: none; gap: 8px; justify-content: center; padding: 18px 12px; border-top: 1px solid var(--line); }
.motor-tour-row { display: none; gap: 18px; justify-content: space-between; align-items: center; padding: 0 24px 22px; }
.motor-tour-row p { font-size: 10px; line-height: 1.6; max-width: 260px; }
.motor-viewer .motor-tour { border: 0; padding: 8px 0; white-space: nowrap; font-size: 10px; }
.motor-viewer .motor-tour[aria-pressed=true] { background: transparent; color: var(--accent); }
.motor-tour span { margin-left: 5px; }
.motor-viewer-ready .motor-model-controls, .motor-viewer-ready .motor-view-controls, .motor-viewer-ready .motor-tour-row { display: flex; }
.motor-highlights { display: grid; grid-template-columns: repeat(3,1fr); gap: 30px; padding-block: 30px; border-block: 1px solid var(--line); }
.motor-highlights p { color: var(--ink); font-family: var(--serif); font-size: 25px; }
.motor-highlights span { display: block; font: 9px var(--sans); letter-spacing: .1em; color: var(--muted); margin-bottom: 9px; }
.motor-size-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 35px; }
.motor-size-grid article { padding-top: 25px; border-top: 1px solid #cdd1c8; }
.motor-size-grid h3 { font-family: var(--serif); font-size: clamp(72px, 8vw, 105px); line-height: 1.2; font-weight: 400; margin: 10px 0; }
.motor-size-grid h3 span { font-size: 27px; margin-left: 7px; color: var(--accent); }
.motor-size-grid p:not(.eyebrow) { font-size: 11px; }
.motor-spec-note { font-size: 11px; line-height: 1.8; max-width: 760px; margin-top: 25px; }
.motor-details-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8%; margin-top: 52px; border-top: 1px solid #cdd1c8; padding-top: 36px; }
.motor-details-grid h3 { font: 35px/1.15 var(--serif); margin: 18px 0; }
.motor-details-grid p:not(.eyebrow) { font-size: 13px; line-height: 1.9; }
.motor-connectivity { background: var(--ink); color: var(--paper); }
.motor-connectivity p, .motor-connectivity .eyebrow { color: #d0d4ce; }
.motor-connectivity h2 em { color: #d1b68f; }
.connection-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 28px; }
.connection-grid article { border-top: 1px solid #616a6d; padding-top: 25px; }
.connection-grid .availability { font-size: 9px; letter-spacing: .1em; }
.connection-current .availability { color: #d1b68f; }
.connection-grid h3 { font: 36px/1.15 var(--serif); margin: 22px 0 18px; }
.connection-grid p:not(.availability) { font-size: 12px; line-height: 1.9; }
.motor-teaser { display: grid; grid-template-columns: 1fr 1fr; gap: 8%; align-items: center; }
.motor-teaser h2 { margin: 20px 0 25px; }
.motor-teaser p:not(.eyebrow) { font-size: 14px; margin-bottom: 25px; }
.motor-teaser img { width: 100%; height: auto; }
@media (max-width: 1100px) { .motor-hero { gap: 4%; } .motor-tour-row { flex-direction: column; align-items: flex-start; gap: 8px; } .motor-tour-row p { max-width: none; } .connection-grid { grid-template-columns: 1fr 1fr; gap: 35px; } }
@media (max-width: 850px) { .motor-hero { grid-template-columns: 1fr; gap: 35px; } .motor-hero-copy > p:not(.eyebrow) { max-width: 600px; } .motor-viewer { max-width: 700px; width: 100%; } .motor-tour-row { flex-direction: row; } .motor-highlights { gap: 18px; } .motor-highlights p { font-size: 22px; } }
@media (max-width: 600px) { .motor-hero { padding: 42px 24px; } .motor-hero h1 { font-size: 53px; } .motor-viewer-top { padding: 18px 16px; font-size: 8px; gap: 8px; } .motor-viewer button { font-size: 10px; padding: 10px 12px; } .motor-tour-row { flex-direction: column; align-items: flex-start; padding: 0 16px 18px; gap: 8px; } .motor-stage { aspect-ratio: 1.2; } .motor-stage figcaption { font-size: 8px; left: 8px; right: 8px; bottom: 2px; } .motor-view-controls { gap: 5px; padding-inline: 8px; } .motor-highlights { grid-template-columns: 1fr; padding-block: 26px; gap: 20px; } .motor-highlights p { font-size: 25px; } .motor-highlights span { margin-bottom: 5px; } .motor-size-grid { gap: 14px; } .motor-size-grid .eyebrow { font-size: 8px; letter-spacing: .06em; } .motor-size-grid h3 { font-size: 60px; } .motor-size-grid h3 span { display: block; font-size: 20px; margin: -9px 0 14px; } .motor-details-grid, .connection-grid, .motor-teaser { grid-template-columns: 1fr; gap: 30px; } .motor-details-grid h3 { font-size: 33px; } .motor-teaser img { max-width: 520px; } }
@media (prefers-reduced-motion: reduce) { .motor-object { transition: none; } }

.product-motor-link { margin-top: 24px; }
/* Quantum stories pair the product with the finished room. Content is visible without JS. */
.quantum-scenes-intro { padding-block: 72px 52px; }
.quantum-scenes-intro h2 { margin: 20px 0; }
.quantum-scenes-intro > p:last-child { max-width: 520px; font-size: 14px; }
.quantum-scene { display: grid; grid-template-columns: 1fr 1fr; min-height: 660px; overflow: hidden; background: #263039; }
.scene-panel { min-width: 0; transition: transform 1250ms cubic-bezier(.22,.68,.25,1), opacity 1250ms ease; }
.scene-product { display: flex; flex-direction: column; justify-content: center; padding: 38px clamp(28px, 5vw, 84px) 52px; color: #f7f5ef; background: radial-gradient(ellipse at 60% 30%, #4e5960 0, #303c44 44%, #263039 80%); }
.scene-model { display: flex; justify-content: space-between; gap: 18px; font: 10px/1.6 var(--sans); letter-spacing: .12em; color: #e0d6c2; }
.scene-model span:last-child { font-size: 9px; white-space: nowrap; }
.scene-motor { width: 100%; height: clamp(220px, 23vw, 320px); object-fit: contain; margin: 10px 0 20px; filter: drop-shadow(0 18px 16px rgb(0 0 0 / .2)); }
.scene-copy { max-width: 460px; }
.scene-copy h3 { font: 400 clamp(35px, 3.4vw, 54px)/1.05 var(--serif); margin: 0 0 20px; }
.scene-copy h3 em { color: #dbc8a7; font-weight: 400; }
.scene-copy p { color: #e0e4e2; font-size: 13px; line-height: 1.85; }
.scene-copy .text-link { margin-top: 24px; font-size: 11px; }
.scene-room { position: relative; min-height: 100%; margin: 0; overflow: hidden; background: #bdb8ae; }
.scene-room > img { width: 100%; height: 100%; object-fit: cover; object-position: 60% center; position: absolute; inset: 0; transform: scale(1); transition: transform 1700ms cubic-bezier(.22,.68,.25,1); }
.scene-room figcaption { position: absolute; inset: auto 0 0; z-index: 1; padding: 90px clamp(28px, 4vw, 64px) 38px; background: linear-gradient(transparent, rgb(17 25 30 / .78)); color: white; }
.scene-room figcaption > span { display: block; font: 9px var(--sans); letter-spacing: .14em; margin-bottom: 12px; }
.scene-room .text-link { font: 28px/1.2 var(--serif); color: white; }
.quantum-scene-reverse .scene-product { order: 2; background: radial-gradient(ellipse at 40% 30%, #62665f 0, #454c46 44%, #333d37 80%); }
.quantum-scene-reverse .scene-room { order: 1; }
.scene-pending .scene-product { transform: translateY(100px); opacity: .15; }
.scene-pending .scene-room { transform: translateY(-100px); opacity: .15; }
.scene-pending .scene-room > img { transform: scale(1.07); }
.quantum-scene-reverse.scene-pending .scene-product { transform: translateY(-100px); }
.quantum-scene-reverse.scene-pending .scene-room { transform: translateY(100px); }
.scene-selection-note { background: var(--ink); color: #d0d4ce; margin: 0; padding: 22px 6%; font-size: 10px; line-height: 1.7; text-align: center; }
@media (max-width: 850px) {
 .quantum-scene { min-height: 580px; }
 .scene-product { padding: 28px 28px 38px; }
 .scene-model { flex-wrap: wrap; gap: 6px; }
 .scene-motor { height: 220px; }
 .scene-copy h3 { font-size: 37px; }
 .scene-room .text-link { font-size: 25px; }
}
@media (max-width: 600px) {
 .quantum-scenes-intro { padding-block: 48px 36px; }
 .quantum-scene { grid-template-columns: 1fr; }
 .scene-product, .quantum-scene-reverse .scene-product { order: 1; padding: 30px 24px 38px; }
 .scene-room, .quantum-scene-reverse .scene-room { order: 2; min-height: 340px; }
 .scene-model { flex-wrap: nowrap; }
 .scene-motor { height: 210px; margin-bottom: 10px; }
 .scene-copy h3 { font-size: 41px; }
 .scene-room > img { object-position: center; }
 .scene-room figcaption { padding: 75px 24px 26px; }
 .scene-pending .scene-product, .quantum-scene-reverse.scene-pending .scene-product { transform: translateY(28px); }
 .scene-pending .scene-room, .quantum-scene-reverse.scene-pending .scene-room { transform: translateY(-28px); }
 .scene-selection-note { padding: 22px 24px; text-align: left; }
}
@media (prefers-reduced-motion: reduce) {
 .quantum-scene .scene-panel, .quantum-scene .scene-room > img { transition: none; transform: none; opacity: 1; }
}
@media (max-width: 600px) { .motor-viewer button { min-height: 44px; } .motor-viewer[data-view=head] .motor-object { transform: scale(2.6) translate(29%, -19%); } }
.hero-image figcaption .hero-collection-link { width: auto; height: auto; padding: 8px 0; border: 0; border-bottom: 1px solid #ffffff90; border-radius: 0; font-size: 11px; line-height: 1.5; }

/* Paired actions use a solid, clearly outlined secondary button. */
.button-secondary, .hero .button-secondary, .hero .button-outline,
.hero-actions > .text-link, .private-label-actions > .text-link, .closing-cta > div > .text-link {
 display: inline-flex; align-items: center; justify-content: center;
 min-height: 48px; padding: 14px 22px; border: 1px solid #8c9699;
 background: #fff; color: #263039; font-family: var(--sans);
 font-size: 11px; font-weight: 500; line-height: 1.5; text-align: center;
 text-decoration: none; transition: background .2s, border-color .2s;
}
.button-secondary:hover, .hero .button-secondary:hover, .hero .button-outline:hover,
.hero-actions > .text-link:hover, .private-label-actions > .text-link:hover, .closing-cta > div > .text-link:hover {
 background: #e8eeed; color: #263039; border-color: #263039;
}
.hero-actions, .private-label-actions { flex-wrap: wrap; gap: 12px; align-items: stretch; }
.hero-actions > a, .hero .hero-actions > a, .private-label-actions > a, .closing-cta > div > a { min-height: 54px; padding: 16px 22px; font-size: 12px; line-height: 1.5; }
.hero-actions > a, .private-label-actions > a { white-space: normal; }
.footer-coming { display: block; font-size: 9px; color: var(--muted); margin-top: 3px; }
.home-bond-link { font-size: 12px; margin-top: 20px; }
.home-bond-link a, .connection-grid p a { text-decoration: underline; text-underline-offset: 4px; }

/* Bond is a separate device, presented alongside the Quantum offering. */
.bond-hero, .haven-hero { display: grid; grid-template-columns: 1.1fr 1fr; align-items: center; gap: 7%; }
.bond-hero h1, .haven-hero h1 { font-size: clamp(48px, 5.4vw, 80px); margin: 24px 0; }
.bond-hero h1 em, .haven-hero h1 em { color: var(--accent); }
.bond-hero > div > p:not(.eyebrow), .haven-hero > div > p:not(.eyebrow) { max-width: 530px; font-size: 15px; line-height: 1.85; }
.bond-hero figure { background: #fff; padding: 20px 35px 25px; text-align: center; }
.bond-hero img { height: auto; width: 100%; max-width: 430px; margin: auto; }
.bond-hero figcaption { font-size: 9px; letter-spacing: .16em; color: var(--muted); margin-top: 10px; }
.bond-flow { background: var(--ink); color: #fff; padding-top: 36px; padding-bottom: 40px; }
.bond-flow > .eyebrow { color: #d0c2a9; }
.bond-flow ol { display: grid; grid-template-columns: repeat(3,1fr); gap: 50px; padding: 0; margin: 24px 0 0; list-style: none; }
.bond-flow li { border-top: 1px solid #6b7477; padding-top: 20px; }
.bond-flow li > span { color: #d0c2a9; font-size: 11px; }
.bond-flow h2 { font-family: var(--serif); font-size: 30px; margin: 12px 0; }
.bond-flow p:not(.eyebrow) { color: #d6dcd9; font-size: 13px; line-height: 1.8; }
.integration-groups { display: grid; grid-template-columns: repeat(3,1fr); gap: 40px; }
.integration-groups article { border-top: 1px solid #b8beb9; padding-top: 25px; }
.integration-groups h3 { font: 32px/1.2 var(--serif); margin: 17px 0 23px; }
.integration-groups ul { list-style: none; margin: 0 0 22px; padding: 0; }
.integration-groups li { padding: 10px 0; border-bottom: 1px solid #d7dbd5; font-size: 14px; color: var(--ink); }
.integration-groups p:not(.eyebrow), .integration-note { font-size: 12px; line-height: 1.8; }
.integration-note { max-width: 800px; margin-top: 34px; }
.bond-specs dl { display: grid; grid-template-columns: repeat(4,1fr); gap: 25px; }
.bond-specs dl > div { border-top: 1px solid var(--line); padding-top: 20px; }
.bond-specs dt { font-size: 11px; color: var(--muted); margin-bottom: 16px; }
.bond-specs dd { margin: 0; font: 29px/1.2 var(--serif); }
.bond-specs > p { font-size: 11px; margin-top: 28px; max-width: 750px; }
.bond-specs > p a { text-decoration: underline; text-underline-offset: 3px; }

/* Room photography: generous crops, visible captions, and stable image space. */
.room-gallery { background: #fff; padding-block: clamp(72px, 8vw, 128px); }
.room-gallery-grid { display: grid; grid-template-columns: 1.2fr 1fr 1fr; gap: 24px; }
.room-gallery-2 { grid-template-columns: 1fr 1fr; }
.room-figure { margin: 0; }
.room-figure img { display: block; width: 100%; height: auto; aspect-ratio: 1.2; object-fit: cover; }
.room-gallery-2 .room-figure img { aspect-ratio: 1.4; }
.room-figure figcaption { font-size: 10px; line-height: 1.6; letter-spacing: .06em; margin-top: 16px; color: var(--ink); }
.room-gallery-link { display: block; }
.room-gallery-link:hover figcaption { color: var(--accent); text-decoration: underline; text-underline-offset: 4px; }
.room-story { display: grid; grid-template-columns: 1.12fr 1fr; background: #fff; }
.room-story > figure { margin: 0; min-height: 470px; position: relative; }
.room-story > figure img { position: absolute; width: 100%; height: 100%; object-fit: cover; }
.room-story-copy { padding: 64px clamp(28px,5vw,80px); align-self: center; }
.room-story-copy h2 { font-size: clamp(38px,4vw,60px); margin: 20px 0 25px; }
.room-story-copy > p:not(.eyebrow) { font-size: 14px; line-height: 1.9; margin-bottom: 26px; }
.form-room-photo { margin-top: 36px; }
.form-room-photo img { aspect-ratio: 1.35; }
.page-hero + .compact-top { padding-top: 44px; }

/* Bond combines the room experience with the physical bridge and real platform logos. */
.bond-hero { grid-template-columns: 1fr 1.1fr; gap: 5%; }
.bond-hero-visual { position: relative; padding-bottom: 60px; min-width: 0; }
.bond-hero-visual > .bond-room { width: 100%; max-width: none; height: 520px; object-fit: cover; }
.bond-hero figure.bond-device { position: absolute; right: -16px; bottom: 0; width: 260px; max-width: 75%; padding: 18px 23px 24px; box-shadow: 0 15px 40px #25322c14; }
.bond-device img { width: 100%; max-width: 180px; height: 150px; object-fit: contain; margin: auto; }
.bond-device figcaption { margin-top: 4px; font-size: 10px; line-height: 1.6; }
.bond-device figcaption span { display: block; font-size: 7px; letter-spacing: .1em; margin-top: 6px; }
.bond-experiences { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 28px; }
.bond-experiences article > img { width: 100%; height: auto; aspect-ratio: 1.22; object-fit: cover; }
.bond-experiences article > div { padding-top: 25px; }
.bond-experiences h3 { font: 32px/1.15 var(--serif); margin: 17px 0; }
.bond-experiences p:not(.eyebrow) { font-size: 13px; line-height: 1.9; }
.integration-groups { display: block; }
.integration-groups article { display: grid; grid-template-columns: 250px minmax(0,1fr); column-gap: 44px; padding: 30px 0; }
.integration-groups article > .eyebrow { grid-column: 1; }
.integration-groups h3 { grid-column: 1; margin: 12px 0 18px; }
.integration-groups article > p:last-child { grid-column: 1; margin: 0; }
.integration-groups .integration-logos { grid-column: 2; grid-row: 1 / 4; display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); align-content: start; gap: 12px; margin: 0; }
.integration-groups .integration-logos li { display: flex; align-items: center; justify-content: center; padding: 18px 16px; min-height: 95px; background: #fff; border: 1px solid #e1e3dd; }
.integration-logos img { display: block; width: 100%; height: auto; max-height: 55px; object-fit: contain; }

/* Haven uses an abstract pleat study until collection photography is available. */
.haven-teaser { display: grid; grid-template-columns: 1fr 1fr; gap: 10%; align-items: center; background: #f8efea; border-top: 1px solid #ead8ce; }
.haven-teaser h2 { margin-top: 18px; font-size: clamp(40px,4.3vw,64px); }
.haven-teaser > div > p:not(.eyebrow) { font-size: 14px; line-height: 1.9; }
.haven-hero { background: #fff; }
.haven-launch { margin-top: 20px; font-weight: 500; color: var(--ink); }
.haven-art { min-height: 520px; position: relative; overflow: hidden; background: #c6bdaf; display: flex; flex-direction: column; align-items: center; justify-content: center; color: #fff; }
.haven-folds { position: absolute; inset: 0; background: repeating-linear-gradient(0deg,#9b8f80 0,#b6aa9a 2px,#e9e2d6 29px,#c9beae 31px,#f6f2e9 32px,#b1a596 58px,#9b8f80 60px); transform: scale(1.15) rotate(-12deg); }
.haven-art::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg,#1a211f0d,#1a211f5e); }
.haven-wordmark { position: relative; z-index: 1; font: 100px/1 var(--serif); text-shadow: 0 2px 12px #504b4450; }
.haven-wordmark > span { display: block; font: 10px/1.5 var(--sans); text-align: center; letter-spacing: .32em; margin-top: 20px; }
.haven-art-caption { position: absolute; bottom: 28px; z-index: 1; font-size: 8px; letter-spacing: .17em; }
@media (max-width: 850px) {
 .bond-hero, .haven-hero { grid-template-columns: 1fr; gap: 38px; }
 .bond-hero figure { max-width: 530px; width: 100%; justify-self: center; }
 .bond-specs dl { grid-template-columns: 1fr 1fr; gap: 28px; }
 .haven-art { min-height: 380px; }
 .integration-groups { gap: 22px; }
 .integration-groups h3 { font-size: 28px; }
 .bond-hero-visual { max-width: 650px; width: 100%; justify-self: center; }
 .bond-hero-visual > .bond-room { height: 440px; }
 .integration-groups article { grid-template-columns: 190px minmax(0,1fr); column-gap: 25px; }
 .integration-groups .integration-logos { grid-template-columns: repeat(2,minmax(0,1fr)); }
 .room-gallery-grid { gap: 16px; }
 .room-story > figure { min-height: 440px; }
}
@media (max-width: 600px) {
 .haven-teaser, .integration-groups, .bond-flow ol { grid-template-columns: 1fr; gap: 30px; }
 .bond-hero h1, .haven-hero h1 { font-size: 49px; }
 .bond-hero figure { padding: 20px; }
 .bond-hero img { max-width: 300px; }
 .haven-art { min-height: 360px; }
 .haven-wordmark { font-size: 85px; }
 .private-label-actions { align-items: stretch; }
 .private-label-actions > a { width: 100%; }
 .hero-image figcaption .hero-collection-link { max-width: 84px; text-align: center; margin-left: 12px; }
 .hero-image figcaption i { display: block; margin-left: 0; }
 .room-gallery-grid, .room-gallery-2, .room-story, .bond-experiences { grid-template-columns: 1fr; gap: 28px; }
 .room-figure img, .room-gallery-2 .room-figure img { aspect-ratio: 1.4; }
 .room-figure figcaption { margin-top: 12px; }
 .room-story { gap: 0; }
 .room-story > figure { min-height: 0; aspect-ratio: 1.3; }
 .room-story-copy { padding: 38px 24px 45px; }
 .form-room-photo { margin-top: 28px; }
 .form-room-photo img { aspect-ratio: 1.8; }
 .bond-hero-visual { padding-bottom: 62px; }
 .bond-hero-visual > .bond-room { height: 340px; max-width: none; }
 .bond-hero figure.bond-device { right: 10px; width: 210px; padding: 10px 15px 18px; }
 .bond-device img { height: 110px; max-width: 150px; }
 .bond-experiences { gap: 38px; }
 .bond-experiences article > img { aspect-ratio: 1.4; }
 .integration-groups article { display: block; padding: 25px 0; }
 .integration-groups .integration-logos { margin: 20px 0; gap: 10px; }
 .integration-groups .integration-logos li { min-height: 80px; padding: 15px; }
}

.experience-reputation { margin-top: 38px; padding-top: 28px; border-top: 1px solid var(--line); display: grid; grid-template-columns: 1fr 2fr; gap: 40px; align-items: center; }
.experience-reputation strong { display: block; font: 38px/1.15 var(--serif); color: var(--ink); }
.experience-reputation span { display: block; color: var(--accent); font-size: 14px; margin-top: 6px; }
.experience-reputation > p:last-child { font-size: 13px; line-height: 1.9; max-width: 620px; }
@media (max-width: 600px) { .experience-reputation { grid-template-columns: 1fr; gap: 15px; } }

.review-stars { display: flex; gap: 5px; margin-bottom: 14px; color: #a8813a; }
.review-stars svg { width: 24px; height: 24px; fill: currentColor; }
.review-total p { margin: 0; }

/* Photography leads, with copy and captions in their own white space. */
.home-private-label { background: #eff5f0; }
.home-private-label .eyebrow { color: #416650; }
.principles-strip { background: #fff; border-bottom-color: var(--line); }
.principles-strip span::before { color: #56745e; }
.story-section, .story-copy { background: #fff; }
.closing-cta { background: var(--ink); }
.closing-cta .eyebrow, .closing-cta h2 em { color: #e8c4aa; }
.closing-cta > p:last-child { color: #d8dfe4; }
.home-private-label, .collections, .getting-started { padding-block: clamp(72px, 7.5vw, 120px); }
.page-hero.collection-hero { display: block; min-height: 0; background: #fff; }
.collection-hero .page-hero-copy { display: grid; grid-template-columns: 1.15fr 1fr; column-gap: 9%; max-width: 1600px; margin-inline: auto; padding: 76px var(--gutter) 80px; }
.collection-hero .page-hero-copy > .eyebrow { grid-column: 1 / -1; margin-bottom: 24px; }
.collection-hero h1 { grid-column: 1; grid-row: 2 / 4; margin: 0; font-size: clamp(46px, 4.8vw, 74px); }
.collection-hero .page-hero-copy > p:not(.eyebrow) { grid-column: 2; max-width: 510px; font-size: 15px; }
.collection-hero .hero-actions { grid-column: 2; gap: 14px 22px; margin-top: 26px; }
.collection-hero > figure { width: 100%; min-height: 0; height: auto; aspect-ratio: 1.9; max-height: 820px; overflow: hidden; }
.collection-hero > figure img { position: static; width: 100%; height: 100%; object-fit: cover; object-position: center; }
.collection-features { background: #fff; padding-block: clamp(76px, 8vw, 128px); }
.collection-features .section-heading, .room-gallery .section-heading { margin-bottom: 52px; }
.collection-features .feature-grid { row-gap: 52px; }
.collections { background: #fff; }
.wide-gallery { padding-inline: 0; }
.wide-gallery > .section-heading { padding-inline: var(--gutter); }
.wide-gallery .room-gallery-grid { grid-template-columns: 1fr 1fr; gap: 42px 30px; }
.wide-gallery .room-gallery-link:first-child { grid-column: 1 / -1; }
.wide-gallery .room-gallery-link:first-child img { aspect-ratio: 2; max-height: 820px; }
.wide-gallery .room-gallery-link:first-child figcaption { padding-inline: var(--gutter); }
.wide-gallery .room-gallery-link:nth-child(2) { margin-left: var(--gutter); }
.wide-gallery .room-gallery-link:nth-child(3) { margin-right: var(--gutter); }
.wide-gallery .room-gallery-link:not(:first-child) img { aspect-ratio: 1.5; }
@media (max-width: 850px) {
 .collection-hero .page-hero-copy { column-gap: 6%; padding-block: 60px; }
 .collection-hero h1 { font-size: 47px; }
 .collection-hero .hero-actions { align-items: flex-start; }
}
@media (max-width: 600px) {
 .collection-hero .page-hero-copy { display: block; padding: 48px 24px 50px; }
 .collection-hero .page-hero-copy > .eyebrow { margin-bottom: 20px; }
 .collection-hero h1 { font-size: 49px; margin-bottom: 24px; }
 .collection-hero .page-hero-copy > p:not(.eyebrow) { font-size: 14px; }
 .collection-hero > figure { aspect-ratio: 1.25; }
 .collection-features, .room-gallery { padding-block: 66px; }
 .collection-features .section-heading, .room-gallery .section-heading { margin-bottom: 36px; }
 .wide-gallery .room-gallery-grid { grid-template-columns: 1fr; gap: 32px; }
 .wide-gallery .room-gallery-link:first-child { grid-column: auto; }
 .wide-gallery .room-gallery-link:first-child img { aspect-ratio: 1.25; }
 .wide-gallery .room-gallery-link:not(:first-child) { margin-inline: 24px; }
}

/* Lightweight, user-controlled illustrations of shade operation. */
.shade-demo { display: grid; grid-template-columns: 1fr 1fr; gap: 8%; align-items: center; background: #f1f5f2; }
.shade-demo h2 { margin: 18px 0 24px; }
.shade-demo-copy > p:not(.eyebrow) { max-width: 520px; font-size: 14px; line-height: 1.8; }
.shade-demo-controls { margin: 28px 0 18px; }
.shade-demo-options { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 14px; }
.demo-option { padding: 12px 17px; min-height: 48px; border: 1px solid #8d9693; background: white; font-size: 12px; }
.demo-option[aria-pressed="true"] { background: var(--ink); color: white; border-color: var(--ink); }
.shade-demo-copy .shade-demo-status { color: var(--ink); font-weight: 500; min-height: 52px; }
.shade-demo-copy .shade-demo-note { font-size: 11px; margin: 10px 0 18px; }
.shade-demo-art { position: relative; padding: 48px 14% 58px; background: #e5ded4; border: 1px solid #d4ccbf; overflow: hidden; }
.shade-demo-art figcaption { margin-top: 27px; font-size: 9px; line-height: 1.6; letter-spacing: .12em; text-align: center; color: var(--ink); }
.resource-group + .resource-group { padding-top: 0; }
.resource-group > h2 { margin-bottom: 28px; }
@media (max-width: 850px) { .shade-demo { gap: 5%; } .shade-demo-art { padding: 30px 10% 35px; } }
@media (max-width: 600px) { .shade-demo { grid-template-columns: 1fr; gap: 30px; } .shade-demo-art { padding-inline: 18%; } .shade-demo-copy .shade-demo-status { min-height: 0; } }

.resource-grid h3 { font-family: var(--serif); letter-spacing: -.025em; }

/* Photographic Serenity setting with two independently aligned fabric layers. */
.shade-demo-art.serenity-photo-art { padding: 0; border: 0; background: #e9e1d6; }
.serenity-photo { position: relative; --band: clamp(22px, 3.1vw, 42px); }
.serenity-photo > img { display: block; width: 100%; height: auto; }
.serenity-fabric-area { position: absolute; left: 17.5%; top: 9.2%; width: 65.8%; height: 73.2%; overflow: hidden; box-shadow: 3px 3px 9px #30251a28; }
.serenity-sheer { position: absolute; inset: 0; background: #f7f2e64d; backdrop-filter: blur(.8px) saturate(.82); }
.serenity-sheer::before { content: ''; position: absolute; inset: 0; background: url('/assets/demos/ivory-fabric.jpg') repeat; background-size: 150px; opacity: .38; }
.serenity-sheer::after { content: ''; position: absolute; inset: 0; background: repeating-linear-gradient(0deg,#fffaf02e 0 1px,transparent 1px 3px),repeating-linear-gradient(90deg,#fdf8ec35 0 1px,transparent 1px 3px); }
.serenity-band-layer { position: absolute; inset: calc(-2 * var(--band)) 0; background: linear-gradient(90deg,#5c493426,transparent 12%,#fff8e913 72%,#66523a1c),url('/assets/demos/ivory-fabric.jpg') repeat; background-size: auto,180px; mask-image: repeating-linear-gradient(to bottom,#000 0 var(--band),transparent var(--band) calc(2 * var(--band))); transition: transform 3.5s cubic-bezier(.4,0,.2,1); }
.serenity-band-back { opacity: .92; }
.serenity-band-front { opacity: .98; }
[data-state="privacy"] .serenity-band-front { transform: translateY(var(--band)); }
.serenity-bottom-rail { position: absolute; inset: auto 0 0; height: 7px; background: linear-gradient(#d6cebf,#f0e9dd 40%,#b9ac96); box-shadow: 0 -2px 4px #5748321c; }
.serenity-photo-art figcaption { margin: 0; padding: 18px 10px; background: #f8f6f1; }

/* Photographic dual roller: fabric reveals without stretching its woven texture. */
.shade-demo-art.dual-photo-art { padding: 0; border: 0; background: #e9e1d6; }
.dual-photo { position: relative; }
.dual-photo > img { display: block; width: 100%; height: auto; }
.dual-photo::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: #111821; opacity: 0; transition: opacity 3.5s cubic-bezier(.4,0,.2,1); clip-path: polygon(evenodd,0 0,100% 0,100% 100%,0 100%,0 0,17.5% 9.2%,17.5% 82.4%,83.3% 82.4%,83.3% 9.2%,17.5% 9.2%); }
.dual-fabric-area { position: absolute; left: 17.5%; top: 9.2%; width: 65.8%; height: 73.2%; overflow: hidden; }
.dual-roller { position: absolute; top: 0; height: 100%; overflow: hidden; transition: height 3.5s cubic-bezier(.4,0,.2,1); }
.dual-filter { left: .6%; width: 98.8%; background: #faf5e866; backdrop-filter: blur(1.3px) saturate(.7); box-shadow: 2px 3px 7px #30251a24; }
.dual-filter::before { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg,#6b583b18,transparent 12%,#fff9e810 72%,#6b583b18),url('/assets/demos/ivory-fabric.jpg') repeat; background-size: auto,180px; opacity: .64; }
.dual-blackout { left: 0; width: 100%; height: 0; background: linear-gradient(90deg,#5f493b35,transparent 12%,#fff7e516 72%,#6c51332b),linear-gradient(#ad917346,#ad917346),url('/assets/demos/ivory-fabric.jpg') repeat; background-size: auto,auto,180px; box-shadow: 3px 3px 9px #30251a38; filter: brightness(1); transition: height 3.5s cubic-bezier(.4,0,.2,1),filter 3.5s cubic-bezier(.4,0,.2,1); }
.dual-roller-rail { position: absolute; bottom: 0; left: 0; width: 100%; height: 7px; background: linear-gradient(#cabfac,#f1eadf 40%,#ae9e87); box-shadow: 0 -2px 4px #5748321c; }
.dual-blackout .dual-roller-rail { background: linear-gradient(#ad9b83,#ddd1be 40%,#92816b); }
[data-shade-demo="dual"][data-state="view"] .dual-filter { height: 0; }
[data-shade-demo="dual"][data-state="darkening"] .dual-blackout { height: 100%; filter: brightness(.45); }
[data-shade-demo="dual"][data-state="darkening"] .dual-photo::after { opacity: .68; }
.dual-photo-art figcaption { margin: 0; padding: 18px 10px; background: #f8f6f1; }