/* Official Pretendard v1.3.9 dynamic subsets, unmodified; SIL OFL 1.1.
 * Copyright (c) 2021 Kil Hyung-jin. License in ../fonts/OFL.txt.
 * Browser downloads only the subsets required by the page's characters. */
@font-face { font-family: "Pretendard Std Variable"; src: url("../fonts/PretendardStdVariable.subset.0.woff2") format("woff2"); font-style: normal; font-weight: 45 920; font-display: swap; unicode-range: U+0460-052F,U+1C80-1C88,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F; }
@font-face { font-family: "Pretendard Std Variable"; src: url("../fonts/PretendardStdVariable.subset.1.woff2") format("woff2"); font-style: normal; font-weight: 45 920; font-display: swap; unicode-range: U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116; }
@font-face { font-family: "Pretendard Std Variable"; src: url("../fonts/PretendardStdVariable.subset.2.woff2") format("woff2"); font-style: normal; font-weight: 45 920; font-display: swap; unicode-range: U+1F00-1FFF; }
@font-face { font-family: "Pretendard Std Variable"; src: url("../fonts/PretendardStdVariable.subset.3.woff2") format("woff2"); font-style: normal; font-weight: 45 920; font-display: swap; unicode-range: U+0370-03FF; }
@font-face { font-family: "Pretendard Std Variable"; src: url("../fonts/PretendardStdVariable.subset.4.woff2") format("woff2"); font-style: normal; font-weight: 45 920; font-display: swap; unicode-range: U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+1EA0-1EF9,U+20AB; }
@font-face { font-family: "Pretendard Std Variable"; src: url("../fonts/PretendardStdVariable.subset.5.woff2") format("woff2"); font-style: normal; font-weight: 45 920; font-display: swap; unicode-range: U+0100-024F,U+0259,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: "Pretendard Std Variable"; src: url("../fonts/PretendardStdVariable.subset.6.woff2") format("woff2"); font-style: normal; font-weight: 45 920; font-display: swap; unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
:root { --sp-font: "Pretendard Std Variable", Pretendard, system-ui, sans-serif; --sp-night: #121615; --sp-ink: #19221e; --sp-muted: #526057; --sp-paper: #f6f7f3; --sp-line: #d6dcd6; --sp-sage: #d9e7cc; --sp-uvb: #d55d46; --sp-uva: #a18bc7; --sp-visible: #e4d699; --sp-shell: 80rem; --sp-gutter: clamp(1.25rem, 4vw, 4.5rem); --sp-header: 4.75rem; --sp-subnav-height: 3.5rem; --sp-admin-offset: 0px; --sp-section-space: clamp(4.25rem, 6.5vw, 6.5rem); --sp-layout-gap: clamp(2rem, 4vw, 4rem); }
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: var(--sp-scroll-offset,calc(var(--sp-header-measured,var(--sp-header)) + 4.5rem)); background: var(--sp-night); }
body { margin: 0; color: var(--sp-ink); background: var(--sp-paper); font-family: var(--sp-font); font-size: 1.0625rem; font-weight: 400; line-height: 1.65; -webkit-font-smoothing: antialiased; }
h1, h2, h3, h4, p, ul, ol, figure, dl { margin: 0; }
ul, ol { padding: 0; }
h1, h2, h3, h4 { font-family: var(--sp-font); font-weight: 500; line-height: 1.08; letter-spacing: -.04em; text-wrap: balance; }
h1 { font-size: clamp(2.75rem,6.2vw,5.5rem); } h2 { font-size: clamp(2rem,4vw,3.5rem); } h3 { font-size: clamp(1.4rem,2.1vw,2rem); }
p { text-wrap: pretty; } a { color: inherit; text-decoration: none; } button, input, select, textarea { font: inherit; } button, summary, select { cursor: pointer; }
img, picture { display: block; max-width: 100%; } img { height: auto; } svg { display: block; } [hidden] { display: none !important; }
:focus-visible { outline: 3px solid var(--sp-focus, #42613b); outline-offset: 5px; } ::selection { background: var(--sp-sage); color: var(--sp-ink); }
.sp-site-header, .sp-hero, .sp-spectrum, .sp-inner-hero:not(.sp-inner-hero--app), .sp-image-story, .sp-site-footer { --sp-focus: #c9e1b6; }
.sp-button--light { --sp-focus: #42613b; }
.wp-site-blocks, .sp-main, .wp-site-blocks > *, .wp-block-template-part { margin: 0 !important; padding: 0; } .sp-main > * { margin-block: 0; }
.sp-shell { width: min(100% - 2 * var(--sp-gutter),var(--sp-shell)); max-width: none !important; margin-inline: auto !important; }
.sp-section { padding-block: var(--sp-section-space); } .sp-eyebrow { font-size: .75rem; font-weight: 600; letter-spacing: .12em; line-height: 1.5; text-transform: uppercase; }
.sp-muted { color: var(--sp-muted); } .sp-lede { font-size: clamp(1.125rem,1.7vw,1.35rem); line-height: 1.55; }
.sp-section-heading { display: grid; grid-template-columns: 1fr .58fr; align-items: end; gap: var(--sp-layout-gap); margin-bottom: 2.75rem; } .sp-section-heading h2 { margin-top: 1rem; max-width: 21ch; } .sp-section-heading > p { max-width: 42ch; color: var(--sp-muted); }
.sp-section-number { font-size: .8rem; letter-spacing: .08em; }
.sp-arrow { display: inline-block; margin-left: .75rem; transition: transform 180ms ease; } a:hover .sp-arrow { transform: translateX(4px); }
.sp-link { display: inline-flex; align-items: center; gap: 1.5rem; min-height: 44px; border-bottom: 1px solid currentColor; padding-block: .75rem; font-size: 1rem; font-weight: 500; }
.sp-context-link { text-decoration: underline; text-underline-offset: .18em; }
.sp-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .8rem 1.5rem; margin-top: 2rem; }
.sp-button, .wp-block-button__link { display: inline-flex; align-items: center; justify-content: center; min-height: 3.25rem; padding: .9rem 1.4rem; border: 1px solid transparent; border-radius: 2px; font-family: var(--sp-font); font-size: .9375rem; font-weight: 550; line-height: 1.35; transition: background 160ms ease,color 160ms ease; }
.sp-button--light { color: var(--sp-ink); background: var(--sp-sage); } .sp-button--light:hover { background: #eff8e7; }
.sp-button--dark { color: #fff; background: var(--sp-night); } .sp-button--dark:hover { background: #35453a; }
.sp-button--outline { border-color: #7e8b82; background: transparent; } .sp-button--outline:hover { background: #fff; color: var(--sp-ink); }
.sp-skip-link { position: fixed; left: 1rem; top: 1rem; z-index: 500; transform: translateY(-200%); padding: 1rem; background: #fff; color: #111; } .sp-skip-link:focus { transform: none; }
.sp-top-anchor { height: 0; margin: 0; padding: 0; scroll-margin-top: 0; }

.wp-site-blocks > header, body > header { position: sticky; top: 0; z-index: 100; }
.sp-site-header { position: relative; height: var(--sp-header); background: var(--sp-night); color: #fff; border-bottom: 1px solid #303a33; view-transition-name: sp-header; }
body.admin-bar { --sp-admin-offset: 32px; }
body.admin-bar .wp-site-blocks > header, body.admin-bar > header { top: 32px; } .sp-site-header__inner { height: 100%; display: flex; align-items: center; justify-content: space-between; gap: 2rem; }
.sp-brand { display: flex; flex-direction: column; align-items: flex-start; flex-shrink: 0; gap: .15rem; } .sp-wordmark { font-size: 1.4rem; font-weight: 650; letter-spacing: -.045em; line-height: 1; } .sp-brand small { font-size: .5rem; font-weight: 450; letter-spacing: .34em; }
.sp-wordmark { white-space: nowrap; }
.sp-site-footer .sp-wordmark { font-size: clamp(1.55rem,2.7vw,2.25rem); }
.sp-site-nav { display: flex; align-items: center; align-self: stretch; gap: clamp(1rem,1.8vw,1.8rem); font-size: .9375rem; } .sp-site-nav > a, .sp-nav-products > summary { min-height: 44px; display: flex; align-items: center; }
.sp-site-nav > a:hover, .sp-nav-products > summary:hover { color: var(--sp-sage); }
.sp-nav-products { position: relative; align-self: stretch; } .sp-nav-products > summary { height: 100%; list-style: none; gap: .5rem; } .sp-nav-products > summary::-webkit-details-marker { display: none; } .sp-nav-products > summary::after { content: '+'; color: #97a49c; font-size: 1rem; } .sp-nav-products[open] > summary::after { content: '−'; }
.sp-nav-products__panel { position: absolute; top: 100%; left: -1.5rem; width: 21rem; max-width: calc(100vw - 2 * var(--sp-gutter)); padding: .5rem; background: #202722; border: 1px solid #3d4940; border-top-color: #303a33; box-shadow: 0 1rem 2.5rem #0003; transform-origin: center top; }
.sp-nav-products[open] .sp-nav-products__panel { animation: sp-product-menu-in 160ms cubic-bezier(.2,.65,.3,1) both; }
.sp-nav-products__panel a { display: block; padding: 1.125rem 1rem; transition: background 140ms ease; } .sp-nav-products__panel a + a { border-top: 1px solid #354039; } .sp-nav-products__panel a:hover { background: #354039; } .sp-nav-products__panel strong { display: block; font-weight: 550; } .sp-nav-products__panel small { display: block; margin-top: .2rem; color: #b9c4bc; font-size: .875rem; line-height: 1.5; }
@keyframes sp-product-menu-in { from { opacity: .6; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } }
.sp-site-nav .sp-nav-contact { min-height: 2.65rem; padding: .4rem 1rem; border: 1px solid #59665c; } .sp-preview-menu-toggle { display: none; background: transparent; color: #fff; border: 1px solid #59665c; min-height: 44px; padding: .5rem 1rem; }
.sp-site-nav [aria-current="page"] { color: var(--sp-sage); }
.sp-nav-products--current > summary { color: var(--sp-sage); }

.sp-hero { position: relative; height: min(49rem,calc(100svh - var(--sp-header-measured,var(--sp-header)))); min-height: 38rem; overflow: hidden; color: #fff; background: #1f3020; }
.sp-hero__media, .sp-hero__scrim { position: absolute; inset: 0; } .sp-hero__media img { width: 100%; height: 100%; object-fit: cover; object-position: center 53%; }
.sp-hero__scrim { background: linear-gradient(90deg,#08130bee 0%,#10200bc7 26%,#101b0640 54%,#101b0600 75%),linear-gradient(0deg,#08130bc9 0%,transparent 35%); }
.sp-hero__content { position: relative; height: 100%; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; padding-block: 3rem 6rem; }
.sp-hero__title { max-width: 8.5ch; margin-top: 1.25rem; font-weight: 450; font-size: clamp(3.5rem,7.2vw,6.5rem); line-height: 1; letter-spacing: -.05em; } .sp-hero__title em { font-style: normal; color: var(--sp-sage); }
.sp-hero__lede { max-width: 30ch; margin-top: 1.5rem; font-size: clamp(1.05rem,1.5vw,1.25rem); color: #edf3e8; }
.sp-hero__footer { position: absolute; bottom: 1.75rem; left: 0; right: 0; display: flex; justify-content: space-between; align-items: center; gap: 2rem; font-size: .8125rem; }
.sp-spectrum-key { display: flex; flex-wrap: wrap; gap: 1.5rem; } .sp-spectrum-key span { display: flex; align-items: center; gap: .6rem; }
.sp-dot { display: inline-block; width: .45rem; height: .45rem; border-radius: 50%; background: var(--sp-visible); } .sp-dot--uvb { background: var(--sp-uvb); } .sp-dot--uva { background: var(--sp-uva); }
.sp-hero__scroll { display: flex; align-items: center; gap: 1rem; letter-spacing: .08em; text-transform: uppercase; }

.sp-product-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 1.25rem; }
.sp-product-card { position: relative; display: flex; flex-direction: column; background: #afb9bd; min-width: 0; overflow: hidden; } .sp-product-card--focus { background: #b2b1b3; }
.sp-product-card__copy { padding: 2.25rem 2.25rem 0; z-index: 1; } .sp-product-card h3 { margin: .7rem 0; font-size: clamp(2.5rem,3.5vw,3.5rem); } .sp-product-card__copy > p:not(.sp-eyebrow) { max-width: 35ch; font-size: 1rem; }
.sp-product-card__media { flex: 1; overflow: hidden; } .sp-product-card__media img { width: 100%; height: 26rem; object-fit: cover; transition: transform 600ms ease; } .sp-product-card:hover .sp-product-card__media img { transform: scale(1.035); }
.sp-product-card__bottom { display: flex; justify-content: space-between; align-items: center; padding: 1.3rem 2.25rem; border-top: 1px solid #19221e30; font-size: .875rem; } .sp-product-card__bottom span:last-child { font-size: 1.3rem; }
.sp-inline-facts { display: flex; flex-wrap: wrap; gap: .75rem 1.5rem; color: #404c43; font-size: .8125rem; letter-spacing: .05em; text-transform: uppercase; } .sp-compare-link { text-align: center; margin-top: 2rem; }

.sp-spectrum { background: var(--sp-night); color: #fff; } .sp-spectrum__intro { display: grid; grid-template-columns: 1fr .7fr; gap: var(--sp-layout-gap); align-items: end; } .sp-spectrum__intro h2 { margin-top: 1rem; } .sp-spectrum__intro p:last-child { max-width: 42ch; color: #bdc9c0; }
.sp-channel-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 2rem; margin-top: 3rem; } .sp-channel { border-top: 1px solid #59645c; padding-top: 1.5rem; }
.sp-channel__label { display: flex; align-items: center; gap: .7rem; font-size: .875rem; } .sp-channel__value { display: flex; align-items: baseline; gap: .5rem; margin-top: 1.5rem; font-size: clamp(3rem,4.5vw,4.5rem); font-weight: 400; letter-spacing: -.05em; line-height: 1; } .sp-channel__value small { font-size: 1rem; letter-spacing: 0; color: #bdc9c0; }
.sp-channel h3 { margin-top: 1.25rem; font-size: 1.4rem; letter-spacing: -.02em; } .sp-channel p { max-width: 35ch; margin-top: .7rem; color: #bdc9c0; font-size: 1rem; }
.sp-spectrum__bottom { margin-top: 2.5rem; display: flex; align-items: center; justify-content: space-between; gap: 2rem; } .sp-spectrum__bottom > p { color: #bdc9c0; font-size: .9375rem; max-width: 46ch; }

.sp-app-section { background: #e6eade; overflow: hidden; } .sp-app-section__grid { display: grid; grid-template-columns: 1fr .8fr; gap: var(--sp-layout-gap); align-items: center; }
.sp-app-section__copy h2 { margin-top: 1rem; } .sp-app-section__copy > p:not(.sp-eyebrow) { max-width: 37ch; margin-top: 1.5rem; color: #4d594e; }
.sp-app-features { list-style: none; margin: 2rem 0; } .sp-app-features li { display: flex; justify-content: space-between; gap: 1rem; padding-block: 1rem; border-bottom: 1px solid #bcc8b7; font-size: 1rem; } .sp-app-features li span { color: #52604b; font-size: .875rem; }
.sp-app-visual { position: relative; display: flex; flex-direction: column; justify-content: center; align-items: center; min-width: 0; padding: 1.5rem; } .sp-app-orbit { display: none; }
.sp-device-frame { position: relative; width: min(18rem,68vw); padding: .45rem; border: 1px solid #343b36; border-radius: 1.75rem; background: #171918; box-shadow: 0 1.25rem 2.5rem #27312024; overflow: hidden; } .sp-device-frame img { width: 100%; border-radius: 1.3rem; }
.sp-app-note { position: absolute; left: 0; bottom: 3rem; max-width: 17rem; padding: .85rem 1.2rem; background: var(--sp-paper); border: 1px solid #c5cec0; font-size: .8125rem; box-shadow: 0 .5rem 2rem #27312010; } .sp-app-note strong { display: block; font-size: 1rem; font-weight: 550; }

.sp-about-strip { display: grid; grid-template-columns: 1fr 1fr; background: #d9dfd5; } .sp-about-strip__media img { width: 100%; height: 100%; min-height: 32rem; max-height: 42rem; object-fit: cover; object-position: center 59%; }
.sp-about-strip__content { padding: clamp(3rem,6vw,6rem); align-self: center; } .sp-about-strip__content h2 { font-size: clamp(2.4rem,4vw,4rem); margin-top: 1rem; } .sp-about-strip__content > p:not(.sp-eyebrow) { margin-top: 1.5rem; color: #4d594e; max-width: 35ch; } .sp-about-strip__content .sp-link { margin-top: 1rem; }
.sp-contact-cta { background: var(--sp-sage); } .sp-contact-cta__grid { display: flex; justify-content: space-between; align-items: end; gap: 4rem; } .sp-contact-cta h2 { margin-top: 1rem; max-width: 15ch; } .sp-contact-cta__action { max-width: 31ch; } .sp-contact-cta__action p { margin-bottom: 1.5rem; color: #4e5b45; }
.sp-site-footer { background: var(--sp-night); color: #fff; padding: 4rem 0 1.5rem; } .sp-site-footer__top { display: grid; grid-template-columns: 1.6fr 1fr 1fr; gap: 3rem; } .sp-site-footer__top .sp-wordmark { font-size: 2.25rem; } .sp-site-footer__legal { max-width: 31ch; margin-top: 1.5rem; color: #aab8ac; font-size: .85rem; }
.sp-footer-links { display: flex; flex-direction: column; align-items: flex-start; gap: .6rem; font-size: .85rem; } .sp-footer-links .sp-eyebrow { color: #94a298; margin-bottom: .6rem; } .sp-footer-links a { min-height: 28px; } .sp-footer-links a:hover { color: var(--sp-sage); }
.sp-site-footer__bottom { display: flex; justify-content: space-between; gap: 2rem; margin-top: 4rem; border-top: 1px solid #354139; padding-top: 1.5rem; color: #aab8ac; font-size: .7rem; }

.sp-breadcrumb { display: flex; flex-wrap: wrap; gap: .65rem; font-size: .8125rem; color: #526057; padding-block: 1.25rem; } .sp-breadcrumb span { color: #657267; }
.sp-product-hero { display: flex; min-height: calc(100svh - var(--sp-header-measured,var(--sp-header)) - var(--sp-subnav-height) - var(--sp-admin-offset)); background: #afb9bd; overflow: hidden; } .sp-product-hero--focus { background: #b2b1b3; } .sp-product-hero > .sp-shell { display: flex; flex-direction: column; } .sp-product-hero__grid { flex: 1; display: grid; grid-template-columns: .9fr 1.2fr; align-items: center; min-height: 0; gap: 1.5rem; padding-block: clamp(2.5rem,5svh,4rem); }
.sp-product-hero__copy { min-width: 0; padding-block: 0; } .sp-product-hero__copy h1 { margin: 0 0 1.5rem; } .sp-product-hero__copy .sp-lede { max-width: 28ch; } .sp-product-hero__copy .sp-inline-facts { margin-top: 1.5rem; }
.sp-product-hero__media { height: auto; min-width: 0; } .sp-product-hero__media img { width: 100%; height: auto; object-fit: contain; }
.sp-subnav { position: sticky; top: var(--sp-header-measured,var(--sp-header)); z-index: 50; border-bottom: 1px solid var(--sp-line); background: var(--sp-paper); } body.admin-bar .sp-subnav { top: calc(var(--sp-header-measured,var(--sp-header)) + 32px); }
.sp-subnav .sp-shell { display: flex; min-height: 3.5rem; gap: 2rem; align-items: center; overflow-x: auto; scrollbar-width: thin; } .sp-subnav strong { margin-right: auto; font-size: 1rem; font-weight: 550; white-space: nowrap; } .sp-subnav a { font-size: .875rem; min-height: 44px; padding-block: 1rem; white-space: nowrap; } .sp-subnav a:hover { color: #405d34; }
/* Keep focus rings inside scrollports rather than clipping them at the edges. */
.sp-subnav a:focus-visible, .sp-table-scroll:focus-visible, .sp-image-viewer__media:focus-visible { outline-offset: -3px; }
.sp-specifications { background: #e7ebe5; } .sp-model-selector { display: flex; flex-wrap: wrap; margin-top: 3rem; border-bottom: 1px solid #a3b39e; }
.sp-model-selector button { flex: 1 1 25%; min-width: max-content; padding: 1.3rem .5rem; background: transparent; border: 0; border-bottom: 2px solid transparent; color: #52624b; font-size: clamp(1.05rem,2vw,1.6rem); } .sp-model-selector button[aria-selected="true"] { border-color: #263721; color: #1d2b18; } .sp-model-selector button:hover { background: #d8e2d1; }
.sp-model-panel { display: grid; grid-template-columns: .7fr 1.3fr; gap: 4rem; align-items: start; padding-top: 2.5rem; } .sp-model-panel h3 { font-size: 2.5rem; } .sp-model-panel p { color: var(--sp-muted); margin: .75rem 0 1.5rem; font-size: .9rem; }
.sp-specs { display: grid; grid-template-columns: repeat(2,1fr); gap: 1.75rem 2rem; } .sp-specs dt { color: #54614f; font-size: .75rem; margin-bottom: .35rem; } .sp-specs dd { margin: 0; font-size: clamp(1.3rem,2vw,2rem); letter-spacing: -.03em; line-height: 1.3; } .sp-specs dd small { display: block; font-size: .75rem; color: #54614f; letter-spacing: 0; margin-top: .2rem; }
.sp-compare { margin-top: 3rem; border-top: 1px solid #a3b39e; } .sp-compare summary { list-style: none; padding-block: 1rem; display: flex; justify-content: space-between; font-size: .85rem; } .sp-compare summary::-webkit-details-marker { display: none; } .sp-compare summary::after { content: '+'; } .sp-compare[open] summary::after { content: '−'; }
.sp-table-scroll { overflow-x: auto; padding-bottom: .7rem; } .sp-table { border-collapse: collapse; width: 100%; min-width: 42rem; font-size: .8rem; text-align: left; } .sp-table caption { text-align: left; margin-bottom: 1rem; color: #54614f; } .sp-table th, .sp-table td { border-bottom: 1px solid #c5cfc0; padding: 1rem .75rem; } .sp-table th { font-weight: 600; } .sp-table tbody th { font-weight: 400; } .sp-table-note { font-size: .75rem; margin-top: 1rem; color: #54614f; max-width: 75ch; }
.sp-feature-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 2rem; margin-top: 3rem; } .sp-feature { border-top: 1px solid var(--sp-line); padding-top: 1.5rem; } .sp-feature h3 { font-size: 1.5rem; margin-top: 1.5rem; } .sp-feature p { margin-top: 1rem; color: var(--sp-muted); font-size: .9rem; } .sp-feature-grid--two { grid-template-columns: repeat(2,minmax(0,1fr)); }
.sp-image-story { display: grid; grid-template-columns: 1fr 1fr; background: #1a191e; color: #fff; } .sp-image-story__media { display: flex; align-items: center; justify-content: center; overflow: hidden; background: #1a191e; } .sp-image-story__media img { width: auto; max-width: 100%; height: auto; max-height: 47rem; object-fit: contain; -webkit-mask-image: linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent),linear-gradient(180deg,transparent,#000 6%,#000 94%,transparent); -webkit-mask-composite: source-in; mask-image: linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent),linear-gradient(180deg,transparent,#000 6%,#000 94%,transparent); mask-composite: intersect; } .sp-image-story__copy { align-self: center; padding: clamp(3rem,6vw,6rem); } .sp-image-story__copy h2 { font-size: clamp(2.6rem,4vw,4rem); margin-top: 1rem; } .sp-image-story__copy > p:not(.sp-eyebrow) { color: #c4c4ce; margin-top: 1.5rem; max-width: 35ch; }
.sp-beam-facts { display: flex; gap: 3rem; margin-top: 2rem; } .sp-beam-facts strong { font-size: 3rem; font-weight: 400; letter-spacing: -.04em; line-height: 1; } .sp-beam-facts span { display: block; color: #c4c4ce; font-size: .75rem; margin-top: .5rem; }
.sp-install-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 1.25rem; } .sp-install-grid--three { grid-template-columns: repeat(3,minmax(0,1fr)); } .sp-install-card { background: #e6e8e3; } .sp-install-card img { width: 100%; aspect-ratio: 1.3; object-fit: cover; } .sp-install-card__copy { padding: 1.75rem; } .sp-install-card h3 { margin-top: .6rem; font-size: 1.6rem; } .sp-install-card p:last-child { color: var(--sp-muted); font-size: .85rem; margin-top: 1rem; }
.sp-two-formats { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 3rem; } .sp-format { border-top: 2px solid var(--sp-uvb); padding-top: 1.5rem; } .sp-format--uva { border-color: var(--sp-uva); } .sp-format h3 { font-size: 2rem; } .sp-format .sp-specs { margin-top: 2rem; } .sp-format > p { max-width: 45ch; color: var(--sp-muted); margin-top: 1.5rem; }

.sp-inner-hero { background: var(--sp-night); color: #fff; padding: var(--sp-section-space) 0; } .sp-inner-hero h1 { margin-top: 1.25rem; max-width: 16ch; } .sp-inner-hero .sp-lede { margin-top: 1.5rem; max-width: 45ch; color: #c1cbc3; }
.sp-inner-hero--app { background: #e6eade; color: var(--sp-ink); } .sp-inner-hero--app .sp-lede { color: #4d594e; } .sp-inner-hero--app .sp-app-section__grid { gap: var(--sp-layout-gap); } .sp-inner-hero--app .sp-device-frame { width: min(18rem,68vw); }
.sp-app-gallery { display: grid; grid-template-columns: .6fr 1.4fr; gap: 3rem; align-items: start; } .sp-app-gallery__tabs { display: flex; flex-direction: column; gap: 0; }
.sp-app-gallery__tabs button { display: block; width: 100%; min-height: 44px; text-align: left; padding: 1.4rem 0; border: 0; border-bottom: 1px solid var(--sp-line); background: transparent; color: #58625a; } .sp-app-gallery__tabs button span { display: block; font-size: .9375rem; letter-spacing: 0; } .sp-app-gallery__tabs button strong { display: block; font-size: 1.45rem; font-weight: 500; letter-spacing: -.025em; } .sp-app-gallery__tabs button[aria-selected="true"] { color: var(--sp-ink); border-bottom: 2px solid #516749; } .sp-app-gallery__tabs button:hover { color: #314b26; }
.sp-app-gallery__panel { padding: 2rem; background: #e6eade; display: flex; align-items: flex-start; gap: 2rem; } .sp-app-gallery__panel .sp-device-frame { width: 13.5rem; flex-shrink: 0; } .sp-app-gallery__panel > div:last-child { min-width: 0; } .sp-app-gallery__panel p { color: #4d594e; font-size: 1rem; max-width: 45ch; } .sp-app-gallery__panel p + p { margin-top: 1rem; } .sp-app-gallery__panel h3 { font-size: 1.5rem; margin-bottom: 1rem; }
/* Offer tab controls only after their controller is ready. Without scripting
 * (or before initialization), retain every model and app feature in the flow. */
[data-sp-tabs]:not([data-sp-tabs-ready="true"]) [data-sp-tablist] { display: none; }
.sp-app-gallery:not([data-sp-tabs-ready="true"]) { display: block; }
.sp-app-gallery:not([data-sp-tabs-ready="true"]) [data-sp-panel] + [data-sp-panel] { margin-block-start: clamp(1.5rem,3vw,2rem); }
.sp-editorial-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-layout-gap); } .sp-editorial-grid h2 { margin-top: 1rem; } .sp-prose p + p { margin-top: 1.5rem; } .sp-prose { color: var(--sp-muted); max-width: 58ch; }
.sp-contact-topics { margin-top: 3rem; } .sp-contact-topics article { padding: 1.5rem 0; border-top: 1px solid var(--sp-line); display: grid; grid-template-columns: .5fr 1fr; gap: 1.5rem; } .sp-contact-topics h3 { font-size: 1.25rem; } .sp-contact-topics p { color: var(--sp-muted); font-size: .9rem; }
.sp-contact-fallback > p > .sp-link[href="mailto:ricardo.romao@twinstareu.com"] { display: inline-block; max-width: 100%; overflow-wrap: anywhere; }
.sp-not-found { min-height: 70svh; display: flex; flex-direction: column; justify-content: center; gap: 2rem; }
.sp-product-card { background: #e3e8e1; } .sp-product-card--focus { background: #dedfdf; }
.sp-product-hero { background: #e3e8e1; } .sp-product-hero--focus { background: #dedfdf; }
.sp-product-cutout { display: flex; align-items: center; justify-content: center; } .sp-product-cutout img { object-fit: contain; height: 24rem; padding: 1.5rem 2rem; filter: drop-shadow(0 .8rem .6rem #25312a20); }
.sp-product-cutout--focus img { padding: 2rem 3rem; } .sp-product-hero__media.sp-product-cutout img { height: clamp(22rem,55svh,38rem); padding: 1rem 0 1rem 1rem; }
.sp-focus-finishes { margin-top: 4rem; display: grid; grid-template-columns: .7fr 1fr; gap: 3rem; align-items: center; background: #e1e2e0; padding: 2rem; } .sp-focus-finishes h3 { margin-top: .8rem; } .sp-focus-finishes p:not(.sp-eyebrow) { color: var(--sp-muted); margin-top: 1rem; } .sp-focus-finishes img { max-height: 28rem; width: 100%; object-fit: contain; }
.sp-spectrum-detail { display: grid; grid-template-columns: 1fr .9fr; gap: var(--sp-layout-gap); align-items: center; border-top: 1px solid var(--sp-line); padding-block: 3.25rem; } .sp-spectrum-detail__copy h3 { font-size: clamp(1.75rem,2.8vw,2.5rem); margin: 1rem 0 1.5rem; } .sp-spectrum-detail__copy > p:not(.sp-eyebrow) { color: var(--sp-muted); max-width: 53ch; margin-top: 1rem; } .sp-spectrum-detail .sp-eyebrow { display: flex; align-items: center; gap: .6rem; }
.sp-spectrum-figure img { width: 100%; } .sp-spectrum-figure figcaption { font-size: .75rem; color: var(--sp-muted); margin-top: 1rem; line-height: 1.6; } .sp-spectrum-figure--visible { background: #adafb3; padding: 1.5rem; } .sp-spectrum-figure--visible figcaption { color: #252d29; }
.sp-catalogue-metric { margin-block: 2rem; border-left: 2px solid var(--sp-uvb); padding-left: 1.3rem; } .sp-catalogue-metric dt { font-size: .75rem; color: var(--sp-muted); } .sp-catalogue-metric dd { margin: .4rem 0 0; font-size: 2.5rem; line-height: 1.2; letter-spacing: -.04em; } .sp-catalogue-metric dd small { display: block; font-size: 1rem; letter-spacing: 0; margin-top: .4rem; }
.sp-catalogue-guidance { margin-top: 2rem; background: #e8ebe3; padding: 1.2rem 1.4rem; font-size: .85rem; } .sp-catalogue-guidance strong { font-weight: 550; } .sp-catalogue-guidance p { margin-top: .6rem; color: var(--sp-muted); } .sp-source-note { border-top: 1px solid var(--sp-line); padding-top: 1.5rem; font-size: .75rem; color: var(--sp-muted); } .sp-source-note a { text-decoration: underline; text-underline-offset: 3px; }
.sp-catalogues { background: #e7ebe5; } .sp-catalogue-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; } .sp-catalogue-card { display: flex; flex-direction: column; gap: 2rem; background: #f6f7f3; border: 1px solid #ccd4ca; padding: 2.5rem; transition: background 180ms ease; } .sp-catalogue-card:hover { background: #d9e7cc; } .sp-catalogue-card > strong { font-size: clamp(1.8rem,3vw,3rem); font-weight: 450; line-height: 1.1; letter-spacing: -.03em; } .sp-catalogue-card > span:last-child { display: flex; justify-content: space-between; gap: 1rem; font-size: .85rem; }
.sp-screen-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 1.5rem; margin-top: 3rem; } .sp-screen-grid figure { min-width: 0; } .sp-screen-grid picture { background: #151817; padding: .4rem; border-radius: 1rem; overflow: hidden; max-width: 15rem; margin-inline: auto; } .sp-screen-grid img { width: 100%; border-radius: .65rem; } .sp-screen-grid figcaption { max-width: 15rem; margin: 1rem auto 0; font-size: .8rem; color: var(--sp-muted); } .sp-screen-grid figcaption strong { display: block; color: var(--sp-ink); font-size: 1rem; font-weight: 500; margin-bottom: .35rem; }
.sp-screen-grid--three { grid-template-columns: repeat(3,minmax(0,1fr)); } .sp-screen-grid--two { grid-template-columns: repeat(2,minmax(0,1fr)); } .sp-screen-grid--three picture { max-width: 13rem; } .sp-screen-grid--two picture { max-width: 13rem; }
.sp-app-setup { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-layout-gap); align-items: center; } .sp-app-setup h2 { margin: 1rem 0 1.5rem; } .sp-app-setup p + p { margin-top: 1rem; } .sp-app-setup__copy > p:not(.sp-eyebrow) { color: var(--sp-muted); } .sp-app-setup .sp-screen-grid { margin-top: 0; }
.sp-warning { padding: 1.25rem 1.5rem; border-left: 2px solid #a16f36; background: #f0ebdf; margin-top: 2rem; font-size: .85rem; color: #5a503e; } .sp-warning strong { display: block; color: #352e22; margin-bottom: .5rem; font-weight: 550; }
.sp-output-details { margin-top: 2rem; border-top: 1px solid var(--sp-line); padding-top: 1rem; font-size: .85rem; } .sp-output-details summary { font-weight: 500; } .sp-output-details p { color: var(--sp-muted); margin-top: 1rem; }
.sp-specs dd .sp-spec-imperial { display: block; font-size: .8rem; line-height: 1.5; letter-spacing: 0; margin-top: .4rem; color: var(--sp-muted); } .sp-format p + p, .sp-focus-finishes p + p { margin-top: 1rem; }
.screen-reader-text { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

/* Secondary information stays readable; hierarchy comes from rhythm and weight. */
.sp-feature p, .sp-install-card p:last-child, .sp-model-panel p, .sp-contact-topics p { font-size: 1rem; }
.sp-specs dt, .sp-specs dd small, .sp-specs dd .sp-spec-imperial, .sp-table, .sp-table-note,
.sp-spectrum-figure figcaption, .sp-catalogue-metric dt, .sp-source-note,
.sp-screen-grid figcaption, .sp-catalogue-card > span:last-child,
.sp-site-footer__legal, .sp-footer-links, .sp-beam-facts span,
.sp-catalogue-guidance, .sp-warning, .sp-output-details { font-size: .9375rem; }
.sp-site-footer__bottom { font-size: .8125rem; }
.sp-footer-links a { display: flex; align-items: center; min-height: 44px; }
.sp-specs { gap: 1.75rem 2rem; }
.sp-specs dd { font-size: clamp(1.25rem,1.8vw,1.7rem); }
.sp-feature h3, .sp-install-card h3 { font-size: 1.55rem; line-height: 1.2; }
.sp-about-strip__content, .sp-image-story__copy { padding: clamp(2rem,4.8vw,4.5rem); }
.sp-about-strip__content h2, .sp-image-story__copy h2 { font-size: clamp(2rem,3.4vw,3.25rem); }
.sp-contact-cta__grid { gap: var(--sp-layout-gap); }
.sp-contact-cta__action { max-width: 36ch; }
.sp-catalogue-card { padding: 2rem; gap: 1.5rem; }
.sp-screen-grid figure { width: 100%; max-width: 13.5rem; justify-self: center; }
.sp-screen-grid--three figure, .sp-screen-grid--two figure { max-width: 13rem; }
.sp-screen-grid picture { max-width: 13.5rem; border-radius: 1.15rem; }
.sp-screen-grid figcaption { max-width: 24ch; line-height: 1.6; }
.sp-screen-grid--three picture, .sp-screen-grid--two picture { max-width: 13rem; }
.sp-output-details { padding-top: 0; }
.sp-output-details summary { min-height: 48px; padding-block: 1rem; }
.sp-output-details[open] { padding-bottom: 1.5rem; }
.sp-output-details .sp-screen-grid { margin-top: 1.75rem; }
.sp-output-details .sp-output-details { margin-top: 1.5rem; }
.sp-install-status, .sp-catalogue-metadata { display: block; color: var(--sp-muted); font-size: .9375rem; line-height: 1.6; }
.sp-install-status { margin-bottom: .65rem; }
.sp-visible-spectrum { min-height: clamp(5.5rem,10vw,9rem); background: linear-gradient(90deg,#68469e 0%,#4353b1 14%,#3786bd 27%,#43a6ac 40%,#77ad69 52%,#b5bb62 64%,#dbc36f 75%,#dca365 86%,#c9716a 100%); border: 1px solid #858a85; }
.sp-visible-spectrum__caption { margin-top: 1rem; color: var(--sp-muted); font-size: .9375rem; line-height: 1.6; }
.sp-visible-spectrum-source { margin-top: 1.5rem; padding-top: .5rem; border-top: 1px solid var(--sp-line); font-size: .9375rem; }
.sp-visible-spectrum-source summary { min-height: 44px; padding-block: .75rem; }
.sp-visible-spectrum-source .sp-spectrum-figure { max-width: 30rem; margin: 1.25rem auto 0; }
.sp-visible-spectrum-source img { height: auto; object-fit: contain; }
.sp-habitat-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 1.25rem; margin-top: 2.5rem; }
.sp-habitat-card { min-width: 0; padding: 1.5rem; background: #f6f7f3; border: 1px solid #c8d2c4; }
.sp-habitat-card h3 { font-size: 1.4rem; line-height: 1.2; }
.sp-habitat-card p { margin-top: .65rem; color: var(--sp-muted); font-size: 1rem; }
.sp-habitat-card picture { width: calc(100% + 3rem); max-width: none; margin: -1.5rem -1.5rem 1.5rem; }
.sp-habitat-card img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.sp-app-setup__copy { max-width: 66ch; }
.sp-app-setup__copy h2 { margin: 0 0 1.5rem; }
.sp-app-setup__copy > p + p { margin-top: 1rem; }
.sp-app-setup__copy .sp-warning { max-width: 66ch; }
.sp-screen-grid.sp-screen-grid--one { grid-template-columns: minmax(0,14rem); justify-content: center; }
.sp-screen-grid--one figure, .sp-screen-grid--one picture { width: 100%; max-width: 14rem; }
.sp-screen-grid.sp-screen-grid--one { grid-template-columns: minmax(0,1fr); justify-items: center; }

/* Actual manufacturer interfaces are presented as images, never rebuilt UI. */
.sp-app-downloads { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.75rem; }
.sp-app-requirements { max-width: 52ch; font-size: .9375rem; color: var(--sp-muted); margin-top: 1rem; }
.sp-app-interface-note { max-width: 70ch; color: var(--sp-muted); font-size: .9375rem; margin-top: 1.5rem; }
.sp-app-visual > .sp-app-interface-note { max-width: 34ch; margin-top: 1.25rem; font-size: .875rem; text-align: center; }
.sp-app-official-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 2rem; margin-top: 2.75rem; }
.sp-app-official-grid figure { min-width: 0; max-width: 18rem; justify-self: center; width: 100%; }
.sp-app-official-grid picture { padding: .45rem; background: #171918; border: 1px solid #343b36; border-radius: 1.65rem; overflow: hidden; box-shadow: 0 .9rem 1.8rem #27312014; }
.sp-app-official-grid img { width: 100%; border-radius: 1.15rem; }
.sp-app-official-grid figcaption { margin-top: 1.25rem; color: var(--sp-muted); font-size: .9375rem; line-height: 1.6; }
.sp-app-official-grid figcaption strong { display: block; margin-bottom: .4rem; color: var(--sp-ink); font-size: 1.125rem; font-weight: 550; }
.sp-story-hero { display: grid; grid-template-columns: 1.05fr .95fr; align-items: center; gap: var(--sp-layout-gap); }
.sp-story-hero__media { overflow: hidden; width: 100%; }
.sp-story-hero__media img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; object-position: center; }

/* The image viewer uses the largest supplied source, not a stretched thumbnail. */
.sp-zoomable { position: relative; }
.sp-image-zoom { position: absolute; z-index: 2; top: .65rem; right: .65rem; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; padding: .6rem; color: #fff; background: #121615e8; border: 1px solid #6f7b72; border-radius: 50%; --sp-focus: #c9e1b6; transition: background 160ms ease; }
.sp-image-zoom:hover { background: #35453a; }
.sp-image-zoom svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.7; }
.sp-image-viewer { position: fixed; inset: 0; width: min(94vw,90rem); max-width: none; max-height: 94svh; overflow: auto; padding: clamp(1rem,3vw,2rem); color: #f6f7f3; background: #121615; border: 1px solid #536258; border-radius: 3px; --sp-focus: #c9e1b6; }
.sp-image-viewer[open] { display: flex; flex-direction: column; }
.sp-image-viewer::backdrop { background: #050806e8; }
.sp-image-viewer__header { flex-shrink: 0; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem 1.5rem; margin-bottom: 1rem; }
.sp-image-viewer__title { min-width: 0; max-width: 65ch; overflow-wrap: anywhere; font-size: 1rem; font-weight: 500; letter-spacing: 0; line-height: 1.5; }
.sp-image-viewer__actions { flex-shrink: 0; display: flex; flex-wrap: wrap; align-items: center; gap: .65rem; max-width: 100%; }
.sp-image-viewer__close, .sp-image-viewer__size { flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; min-width: 44px; max-width: 100%; min-height: 44px; padding: .5rem .9rem; border: 1px solid #819286; border-radius: 2px; color: #fff; background: transparent; font-size: .9375rem; line-height: 1.35; }
.sp-image-viewer__close:hover, .sp-image-viewer__size:hover { background: #35453a; }
.sp-image-viewer__size[aria-pressed="true"] { background: #35453a; border-color: #c9e1b6; }
.sp-image-viewer__size:disabled { cursor: default; opacity: .6; }
.sp-image-viewer__status { flex-shrink: 0; margin-bottom: 1rem; color: #c1cbc3; font-size: .9375rem; line-height: 1.5; }
.sp-image-viewer__media { flex: 1 1 auto; min-width: 0; min-height: 4rem; display: flex; justify-content: center; max-height: max(4rem,calc(88svh - 8rem)); overflow: auto; overscroll-behavior: contain; background: #1c231e; padding: .75rem; scrollbar-color: #809077 #1c231e; }
.sp-image-viewer__media img { display: block; width: auto; height: auto; max-width: 100%; max-height: max(4rem,calc(88svh - 8rem)); object-fit: contain; }
.sp-image-viewer__media--actual { display: block; height: min(70svh,54rem); }
.sp-image-viewer__media--actual img { width: auto; height: auto; max-width: none; max-height: none; }
.sp-image-viewer-open { overflow: hidden; }

/* FAQ uses native disclosures: answers remain accessible without scripts. */
.sp-inner-hero.sp-faq-hero { background: #e7ebe5; color: var(--sp-ink); --sp-focus: #42613b; }
.sp-faq-hero h1 { margin-top: 0; }
.sp-faq-hero .sp-lede { color: var(--sp-muted); max-width: 46ch; }
.sp-faq-hero .sp-link { margin-top: 2rem; }
.sp-faq__layout { display: grid; grid-template-columns: minmax(12rem,.32fr) minmax(0,1fr); gap: var(--sp-layout-gap); align-items: start; }
.sp-faq__topics { position: sticky; top: calc(var(--sp-header-measured,var(--sp-header)) + var(--sp-admin-offset) + 2rem); display: flex; flex-direction: column; align-items: flex-start; gap: .4rem; }
.sp-faq__topics a { display: flex; align-items: center; min-height: 44px; padding-block: .5rem; color: var(--sp-muted); font-size: 1rem; }
.sp-faq__topics a:hover { color: var(--sp-ink); text-decoration: underline; text-underline-offset: .35em; }
.sp-faq__groups { min-width: 0; }
.sp-faq__group + .sp-faq__group { margin-top: clamp(3rem,6vw,5rem); }
.sp-faq__group h2 { font-size: clamp(1.65rem,2.5vw,2.25rem); line-height: 1.2; margin-bottom: 1.75rem; }
.sp-faq__item { border-top: 1px solid var(--sp-line); }
.sp-faq__item:last-child { border-bottom: 1px solid var(--sp-line); }
.sp-faq__item > summary { display: flex; justify-content: space-between; align-items: baseline; gap: 1.25rem; padding: 1.4rem .15rem; min-height: 64px; list-style: none; font-size: clamp(1.0625rem,1.35vw,1.2rem); font-weight: 500; line-height: 1.5; }
.sp-faq__item > summary::-webkit-details-marker { display: none; }
.sp-faq__item > summary::after { content: '+'; flex-shrink: 0; font-size: 1.25rem; font-weight: 400; }
.sp-faq__item[open] > summary::after { content: '−'; }
.sp-faq__item > summary:focus-visible { outline-offset: -3px; }
.sp-faq__answer { max-width: 68ch; padding: 0 2.25rem 1.5rem .15rem; color: var(--sp-muted); font-size: 1rem; line-height: 1.7; }
.sp-faq__answer p + p { margin-top: 1rem; }
@media (max-width: 52rem) {
  .sp-faq__layout { grid-template-columns: minmax(0,1fr); gap: 2.75rem; }
  .sp-faq__topics { position: static; flex-direction: row; flex-wrap: wrap; gap: .5rem 1.5rem; padding-bottom: 1rem; border-bottom: 1px solid var(--sp-line); }
  .sp-faq__answer { padding-right: 1rem; }
}
@media (max-height: 32rem) { .sp-faq__topics { position: static; } }

@media (max-width: 62rem) {
  .sp-site-header { height: auto; min-height: var(--sp-header); }
  .sp-site-header__inner { height: auto; min-height: calc(var(--sp-header) - 1px); flex-wrap: wrap; row-gap: .5rem; padding-block: .5rem; }
  .sp-preview-menu-toggle { margin-left: auto; }
  .sp-preview-menu-toggle { display: inline-flex; align-items: center; gap: .65rem; font-size: .9375rem; }
  .sp-site-nav { position: fixed; inset: calc(var(--sp-header-measured,var(--sp-header)) + var(--sp-admin-offset)) 0 auto; display: none; max-height: calc(100svh - var(--sp-header-measured,var(--sp-header)) - var(--sp-admin-offset)); overflow-y: auto; overscroll-behavior: contain; flex-direction: column; align-items: stretch; gap: 0; padding: 1rem var(--sp-gutter) 2rem; background: var(--sp-night); border-bottom: 1px solid #59665c; }
  .sp-menu-open .sp-site-nav { display: flex; }
  .sp-site-nav > a, .sp-nav-products > summary { padding-block: 1rem; border-bottom: 1px solid #354139; font-size: 1.0625rem; }
  .sp-site-nav a:focus-visible, .sp-site-nav summary:focus-visible { outline-offset: -4px; }
  .sp-nav-products__panel { position: static; width: 100%; max-width: none; border: 0; background: transparent; padding-inline: 0; box-shadow: none; }
  .sp-site-nav .sp-nav-contact { margin-top: 1.5rem; justify-content: center; }
  .sp-menu-open { overflow: hidden; }
}

@media (max-width: 68rem) {
  .sp-app-section__grid, .sp-app-gallery, .sp-editorial-grid { gap: 3rem; } .sp-app-gallery__panel { flex-direction: column; } .sp-spectrum__intro { gap: 3rem; }
  .sp-product-card__copy { padding: 2rem 2rem 0; } .sp-product-card__bottom { padding: 1.5rem 2rem; } .sp-product-card__media img { height: 22rem; }
}
@media (max-width: 52rem) {
  .sp-spectrum-detail, .sp-focus-finishes, .sp-app-setup { grid-template-columns: 1fr; gap: 2rem; } .sp-spectrum-detail { padding-block: 3rem; } .sp-screen-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 2rem 1rem; } .sp-screen-grid--three { grid-template-columns: repeat(3,minmax(0,1fr)); }
  .sp-product-hero__media.sp-product-cutout img { height: 23rem; padding: .5rem 0 1.5rem; } .sp-product-card__media.sp-product-cutout img { height: 23rem; object-fit: contain; padding: 1.5rem; } .sp-product-card__media.sp-product-cutout--focus img { padding: 2rem; }
  :root { --sp-header: 4.5rem; }
  .sp-hero { height: 44rem; min-height: 39rem; max-height: none; } .sp-hero__title { font-size: clamp(3.25rem,11vw,5.2rem); } .sp-hero__media img { object-position: 60% center; } .sp-hero__scrim { background: linear-gradient(90deg,#0c190bd9,#0c190b50),linear-gradient(0deg,#08130bc9,transparent 50%); } .sp-hero__content { padding-block: 2.5rem 7rem; justify-content: center; } .sp-hero__footer { bottom: 1.5rem; } .sp-hero__scroll { display: none; }
  .sp-section-heading, .sp-spectrum__intro, .sp-app-section__grid, .sp-app-gallery, .sp-editorial-grid { grid-template-columns: 1fr; gap: 1.5rem; } .sp-section-heading > p { max-width: 50ch; } .sp-product-grid { grid-template-columns: 1fr; }
  .sp-product-card__media img { height: auto; max-height: 28rem; object-fit: cover; } .sp-product-card__copy { padding: 2rem 1.5rem 0; } .sp-product-card__bottom { padding: 1.5rem; }
  .sp-channel-grid { gap: 1.5rem; } .sp-spectrum__bottom { align-items: flex-start; flex-direction: column; } .sp-app-visual { margin-top: 2rem; } .sp-app-note { left: 10%; }
  .sp-about-strip, .sp-image-story { grid-template-columns: 1fr; } .sp-about-strip__media img { min-height: 0; height: 28rem; } .sp-contact-cta__grid { align-items: flex-start; flex-direction: column; gap: 2rem; }
  .sp-site-footer__top { grid-template-columns: 1fr 1fr; } .sp-site-footer__top > div:first-child { grid-column: 1 / -1; }
  .sp-product-hero__grid { grid-template-columns: 1fr; gap: 1.5rem; padding-block: 2rem 1.5rem; } .sp-product-hero__copy { padding-block: 0; } .sp-product-hero__media img { max-height: 26rem; }
  .sp-subnav .sp-shell { width: 100%; padding-inline: var(--sp-gutter); gap: 1.5rem; } .sp-subnav strong { display: none; } .sp-model-panel { grid-template-columns: 1fr; gap: 2rem; }
  .sp-feature-grid { grid-template-columns: 1fr; } .sp-feature h3 { margin-top: 1rem; } .sp-image-story__media img { max-height: 32rem; } .sp-install-grid--three { grid-template-columns: 1fr; }
  .sp-app-gallery__panel { flex-direction: row; padding: 1.5rem; gap: 1.5rem; } .sp-app-gallery__panel .sp-device-frame { width: 12.5rem; }
  .sp-app-official-grid { gap: 1.5rem; }
  .sp-story-hero { grid-template-columns: 1fr; gap: 2.5rem; }
  .sp-story-hero__media { max-width: 40rem; }
  .sp-habitat-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
}
@media (max-width: 38rem) {
  .sp-site-header__inner { column-gap: .75rem; }
  .sp-hero__media img { object-position: 42% center; }
  .sp-catalogue-grid { grid-template-columns: 1fr; } .sp-catalogue-card { padding: 1.75rem; } .sp-screen-grid--three { grid-template-columns: 1fr; } .sp-focus-finishes { padding: 1.5rem; }
  h1 { font-size: clamp(2.75rem,10vw,3.5rem); } .sp-hero__content { padding-top: 3.5rem; justify-content: flex-start; } .sp-hero__title { margin-top: 1rem; } .sp-hero__lede { max-width: 25ch; } .sp-hero .sp-actions { gap: .75rem; } .sp-hero .sp-button { padding: .85rem 1rem; font-size: .9375rem; } .sp-spectrum-key { gap: 1rem; }
  .sp-channel-grid { grid-template-columns: 1fr; gap: 2.5rem; } .sp-channel__value { margin-top: 1.25rem; } .sp-channel p { max-width: 42ch; }
  .sp-app-note { left: 0; bottom: 3rem; } .sp-install-grid, .sp-two-formats { grid-template-columns: 1fr; }
  .sp-app-gallery__panel { flex-direction: column; align-items: stretch; } .sp-app-gallery__panel .sp-device-frame { margin-inline: auto; width: min(13.5rem,100%); }
  .sp-site-footer__bottom { flex-direction: column; gap: 1rem; } .sp-contact-topics article { grid-template-columns: 1fr; gap: .6rem; }
  .sp-app-official-grid { grid-template-columns: 1fr; gap: 2.75rem; }
  .sp-app-official-grid figure { max-width: 18rem; }
  .sp-product-hero__grid { gap: 1rem; }
  .sp-product-hero__media.sp-product-cutout img { height: clamp(12rem,30svh,19rem); }
  .sp-product-hero--focus .sp-product-hero__media.sp-product-cutout img { height: clamp(15rem,32svh,23rem); }
  .sp-model-selector button { padding-inline: .4rem; font-size: 1rem; }
  .sp-specs { gap: 1.5rem 1rem; }
  .sp-specs dt, .sp-specs dd small, .sp-specs dd .sp-spec-imperial { font-size: .875rem; }
  .sp-about-strip__media img { height: 23rem; }
  .sp-app-visual { padding: 1rem; }
  .sp-app-note { position: relative; left: auto; bottom: auto; margin-top: 1.25rem; max-width: 100%; }
  .sp-app-section .sp-app-visual { flex-direction: column; }
  .sp-image-viewer { width: calc(100vw - 1rem); max-height: 96svh; }
  .sp-image-viewer__header { flex-direction: column; align-items: stretch; gap: .75rem; }
  .sp-image-viewer__title { font-size: .9375rem; }
  .sp-image-viewer__actions { justify-content: flex-end; }
  .sp-image-viewer__media, .sp-image-viewer__media img { max-height: max(4rem,calc(88svh - 12rem)); }
  .sp-image-viewer__media--actual img { max-height: none; }
  .sp-habitat-card { padding: 1.25rem; }
  .sp-habitat-card h3 { font-size: 1.25rem; }
  .sp-habitat-card picture { width: calc(100% + 2.5rem); margin: -1.25rem -1.25rem 1.25rem; }
}
@media (max-width: 782px) { body.admin-bar { --sp-admin-offset: 46px; } body.admin-bar .wp-site-blocks > header, body.admin-bar > header { top: 46px; } body.admin-bar .sp-site-nav { top: calc(var(--sp-header-measured,var(--sp-header)) + 46px); } body.admin-bar .sp-subnav { top: calc(var(--sp-header-measured,var(--sp-header)) + 46px); } }
@media (max-width: 600px) { body.admin-bar { --sp-admin-offset: 0px; } body.admin-bar .wp-site-blocks > header, body.admin-bar > header { top: 0; } body.admin-bar .sp-site-nav { top: var(--sp-header-measured,var(--sp-header)); } body.admin-bar .sp-subnav { top: var(--sp-header-measured,var(--sp-header)); } }

@media (min-width: 62.01rem) and (max-width: 68rem) { .sp-site-nav { gap: 1rem; } }

/* Very short viewports need reading space, not two persistent toolbar rows.
 * An expanded mobile menu remains in document flow: native focus/scroll and
 * Escape work while main/footer stay inert through the existing controller. */
@media (max-width: 62rem) and (max-height: 20rem) {
  .wp-site-blocks > header, body > header, .sp-subnav { position: static; }
  .sp-subnav, body.admin-bar .sp-subnav { top: auto; }
  .sp-site-nav, body.admin-bar .sp-site-nav { position: static; inset: auto; flex-basis: 100%; width: 100%; max-height: none; overflow: visible; padding: 1rem 0 1.5rem; }
  .sp-menu-open:not(.sp-image-viewer-open) { overflow: auto; }
}

/* With scripting disabled, retain real links and native product disclosures. */
@media (scripting: none) and (max-width: 62rem) {
  .wp-site-blocks > header, body > header { position: static; }
  .sp-site-header { height: auto; min-height: var(--sp-header); }
  .sp-site-header__inner { flex-wrap: wrap; padding-block: 1rem; }
  .sp-preview-menu-toggle { display: none; }
  .sp-site-nav { position: static; display: flex; width: 100%; max-height: none; padding-inline: 0; border: 0; }
  .sp-subnav, body.admin-bar .sp-subnav { top: var(--sp-admin-offset); }
}

@media (forced-colors: active) {
  :focus-visible { outline-color: Highlight; }
  .sp-image-viewer, .sp-image-viewer__media, .sp-image-zoom { background: Canvas; color: CanvasText; }
  .sp-image-viewer__close, .sp-image-viewer__size, .sp-image-zoom { border-color: ButtonText; }
  .sp-image-viewer__size[aria-pressed="true"] { border-color: Highlight; }
  .sp-model-selector button[aria-selected="true"], .sp-app-gallery__tabs button[aria-selected="true"] { border-bottom-color: Highlight; }
}

/* Native multi-page transitions keep real links and document navigation intact. */
@view-transition { navigation: auto; }
::view-transition-group(root) { animation-duration: 220ms; }
::view-transition-old(root) { animation: none; mix-blend-mode: normal; }
::view-transition-new(root) { animation: sp-page-reveal 220ms cubic-bezier(.2,.65,.3,1) both; mix-blend-mode: normal; }
::view-transition-group(sp-header), ::view-transition-old(sp-header), ::view-transition-new(sp-header) { animation: none; mix-blend-mode: normal; }
@keyframes sp-page-reveal { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }
html.sp-navigation-pending, html.sp-navigation-pending a { cursor: progress; }
@media (prefers-reduced-motion: reduce) { @view-transition { navigation: none; } html { scroll-behavior: auto; } *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; } ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; } }
@media (forced-colors: active) { .sp-hero__media, .sp-hero__scrim { display: none; } .sp-hero { background: Canvas; color: CanvasText; } .sp-hero__title em, .sp-hero__lede { color: CanvasText; } .sp-dot { border: 1px solid CanvasText; } }