/* Helium portfolio: reference-led product navigation with original showroom images. */
#helium-portfolio{background:#181d21;color:#c5c9cb;content-visibility:visible;padding:64px 5vw;scroll-margin-top:84px}
#helium-portfolio .range-showcase{width:100%;max-width:1600px;grid-template-columns:minmax(0,.78fr) minmax(0,1.22fr);gap:clamp(32px,3.5vw,64px);align-items:center}
#helium-portfolio .range-copy h2{font:600 clamp(36px,3.8vw,64px)/1.08 var(--display);margin:24px 0}
#helium-portfolio .range-copy h2 em{color:#b8bfc3;font-style:normal}
#helium-portfolio .range-copy>p:not(.eyebrow){font-size:clamp(16px,1.15vw,19px);line-height:1.6;margin:0 0 26px;max-width:560px}
#helium-portfolio .eyebrow{font-size:11px;color:#efaaac}
#helium-portfolio .product-spectrum{margin:0 0 26px;border-top:0}
#helium-portfolio .product-spectrum li{min-height:0;border-bottom:1px solid #42494d}
#helium-portfolio .product-spectrum li>button{position:relative;grid-template-columns:100px minmax(0,1fr) 24px;grid-template-rows:auto auto auto;gap:4px 18px;padding:12px 14px 12px 0;min-height:102px;border-left:3px solid transparent}
#helium-portfolio .product-spectrum li>button>span{grid-column:2;font:400 11px/1.2 var(--utility);color:#bbc3c7;align-self:end}
#helium-portfolio .product-spectrum li>button>b{grid-column:2;font:500 clamp(19px,1.45vw,24px)/1.15 var(--font)}
#helium-portfolio .product-spectrum li>button>small{grid-column:2;font:400 14px/1.35 var(--font);color:#bbc3c7;text-align:left;align-self:start}
#helium-portfolio .product-spectrum li.is-active>button{background:linear-gradient(90deg,#602126,#382125);border-left-color:#db2528}
#helium-portfolio .product-spectrum li>button:hover{background-color:#2a3034}
#helium-portfolio .spectrum-thumb{grid-column:1;grid-row:1/4;display:block;width:100px;height:80px;background-image:url('/assets/images/home-portfolio-thumbnails-20260918.png?v=2');background-size:400% auto;clip-path:inset(0 6%);background-repeat:no-repeat}
#helium-portfolio .spectrum-thumb--0{background-position:0% 50%}
#helium-portfolio .spectrum-thumb--1{background-position:33.3333% 50%}
#helium-portfolio .spectrum-thumb--2{background-position:66.6667% 50%}
#helium-portfolio .spectrum-thumb--3{background-position:100% 50%}
#helium-portfolio .spectrum-arrow{grid-column:3;grid-row:1/4;font:300 27px var(--font);color:#bdc4c8;font-style:normal}
#helium-portfolio .text-link{font-size:12px;letter-spacing:.04em}
#helium-portfolio .range-showroom__controls p{margin-right:auto;font-size:18px;white-space:nowrap}
#helium-portfolio .range-showroom__controls p i{font-size:12px}
#helium-portfolio .range-showroom__controls>div{gap:5px}
#helium-portfolio .range-showroom__controls>div button{width:28px;height:44px}
#helium-portfolio .showroom-arrow{width:44px;height:44px;border:1px solid #667076;border-radius:50%;background:transparent;color:#fff;font:24px var(--font);cursor:pointer}
#helium-portfolio .range-showroom__controls .showroom-pause{height:44px;font-size:10px;min-width:50px;background:transparent}
#helium-portfolio .showroom-thumbnails button{width:72px;height:72px;padding:3px;background:#202326;border:1px solid #555e63;cursor:pointer}
#helium-portfolio .showroom-thumbnails button.is-active{border:2px solid #db2528}
#helium-portfolio .showroom-thumbnails img{width:100%;height:100%;object-fit:contain}
#helium-portfolio button:focus-visible{outline:2px solid #efaaac;outline-offset:3px}
.home-paged .home-layout #helium-portfolio{padding:32px 5vw 66px}
@media(min-width:761px) and (max-height:950px){
 #helium-portfolio .range-copy h2{font-size:42px;margin:18px 0}
 #helium-portfolio .range-copy>p:not(.eyebrow){font-size:16px;margin-bottom:18px}
 #helium-portfolio .product-spectrum{margin-bottom:20px}
 #helium-portfolio .product-spectrum li>button{min-height:82px;padding-block:8px;grid-template-columns:80px minmax(0,1fr) 20px;gap:3px 12px}
 #helium-portfolio .spectrum-thumb{width:80px;height:66px}
 #helium-portfolio .product-spectrum li>button>b{font-size:19px}
 #helium-portfolio .product-spectrum li>button>small{font-size:12px}
}
@media(max-width:1050px) and (min-width:761px){
 #helium-portfolio .range-showcase{grid-template-columns:1fr 1.1fr;gap:24px}
 #helium-portfolio .range-showroom__controls>div{display:none}
 #helium-portfolio .showroom-thumbnails button{width:56px;height:56px}
}
@media(max-width:760px){
 .home-paged .home-layout #helium-portfolio{display:block;padding:24px 20px 72px;overflow-y:auto;overscroll-behavior:contain;touch-action:pan-y}
 #helium-portfolio .range-showcase{grid-template-columns:1fr;gap:26px}
 #helium-portfolio .range-copy h2{font-size:36px;margin:16px 0}
 #helium-portfolio .range-copy>p:not(.eyebrow){font-size:16px;margin:0 0 20px}
 #helium-portfolio .product-spectrum{display:block;margin:0 0 22px}
 #helium-portfolio .product-spectrum li>button{min-height:84px;grid-template-columns:76px minmax(0,1fr) 18px;gap:3px 10px;padding-block:9px;padding-right:8px}
 #helium-portfolio .spectrum-thumb{width:76px;height:66px}
 #helium-portfolio .product-spectrum li>button>b{font-size:18px}
 #helium-portfolio .product-spectrum li>button>small{font-size:12px}
 #helium-portfolio .product-spectrum li>button>span{font-size:10px}
 #helium-portfolio .range-showroom__controls>div{display:none}
 #helium-portfolio .range-showroom__controls p{font-size:15px}
 #helium-portfolio .showroom-thumbnails button{width:calc((100% - 18px)/4);height:60px}
}
@media(prefers-reduced-motion:reduce){#helium-portfolio *,#helium-portfolio *::after{transition:none}}

/* Image-sized frame; navigation and captions live below the original image. */
#helium-portfolio .range-showcase{grid-template-columns:minmax(0,1fr) minmax(0,1fr);max-width:1400px}
#helium-portfolio .range-showroom{display:flex;flex-direction:column;width:min(100%,580px);justify-self:end;margin:0;background:#15191c;border-color:#454b4e}
#helium-portfolio .range-showroom__viewport{order:1;width:100%;height:auto;min-height:0;max-height:none;aspect-ratio:var(--showroom-ratio,1);overflow:hidden}
#helium-portfolio .range-showroom__track{height:100%;align-items:stretch}
#helium-portfolio .showroom-slide{display:block;height:100%;background:#15191c}
#helium-portfolio .showroom-slide img{display:block;width:100%;height:100%;object-fit:contain;transform:none}
#helium-portfolio .showroom-slide::after{display:none}
#helium-portfolio .range-showroom__controls{order:2;position:static;inset:auto;gap:10px;padding:10px 18px;background:#1c2226;border:0;border-top:1px solid #454b4e;border-bottom:1px solid #454b4e;backdrop-filter:none}
#helium-portfolio .showroom-details{order:3;padding:20px 22px 14px;min-height:116px}
#helium-portfolio [data-showroom-caption]:not([hidden]){display:grid;gap:9px}
#helium-portfolio [data-showroom-caption]>span{font:500 11px var(--utility);color:#efaaac}
#helium-portfolio [data-showroom-caption]>b{font:600 27px/1.1 var(--display);color:#f5f6f6}
#helium-portfolio [data-showroom-caption]>small{font:400 12px/1.5 var(--font);color:#bbc3c7}
#helium-portfolio .showroom-thumbnails{order:4;position:static;display:flex;justify-content:flex-end;gap:8px;padding:0 22px 12px}
#helium-portfolio .home-illustration-label{order:5;position:static;display:block;padding:0 22px 14px;font:11px var(--font);color:#b3bdc0}
.home-paged #helium-portfolio .range-showroom{width:min(100%,580px,calc((var(--page-height) - 350px)*.84))}
@media(max-width:760px){
 #helium-portfolio .range-showcase{grid-template-columns:1fr}
 .home-paged #helium-portfolio .range-showroom{width:100%}
 #helium-portfolio .range-showroom__controls{gap:6px;padding:8px 12px}
 #helium-portfolio .showroom-details{padding:18px 16px 14px;min-height:125px}
 #helium-portfolio [data-showroom-caption]>b{font-size:24px}
 #helium-portfolio .showroom-thumbnails{padding:0 16px 12px;gap:6px}
 #helium-portfolio .home-illustration-label{padding:0 16px 14px;font-size:10px}
}