/* Native product collections. All content remains available without JavaScript. */
.product-page { --product-navy:#0c202e; --product-blue:#add7f3; --product-line:#c6d5df; }
.product-page main { overflow:clip; }
.product-page [id], .home-product-spotlight { scroll-margin-top:120px; }
.product-kicker { font-size:12px; font-weight:700; letter-spacing:.13em; text-transform:uppercase; margin-bottom:24px; }
.product-hero { padding:142px 0 0; color:#fff; background:var(--product-navy); position:relative; }
.product-hero .product-breadcrumb { display:flex; flex-wrap:wrap; gap:12px; color:#bfd1dd; font-size:12px; margin-bottom:24px; }
.product-breadcrumb a { text-decoration:underline; text-underline-offset:4px; }
.product-hero-grid { display:grid; grid-template-columns:1.04fr 1fr; align-items:center; gap:42px; min-height:570px; }
.product-hero-copy { position:relative; z-index:1; padding:34px 0 58px; }
.product-hero h1 { font-size:clamp(48px,5.25vw,84px); font-weight:400; line-height:1.02; letter-spacing:-.055em; max-width:760px; margin:0 0 28px; }
.product-hero h1 em { color:var(--product-blue); font-weight:400; }
.product-hero-copy>p:not(.product-kicker) { max-width:510px; color:#d1dee7; font-size:18px; line-height:1.7; }
.product-actions { display:flex; flex-wrap:wrap; align-items:center; gap:24px; margin-top:30px; }
.product-actions .product-link { color:inherit; font-weight:700; font-size:14px; text-decoration:underline; text-underline-offset:6px; }
.product-stage { position:relative; isolation:isolate; min-width:0; aspect-ratio:1.1; background:radial-gradient(ellipse at 50% 48%,#27495e 0%,#112b3c 43%,transparent 72%); }
.product-stage::before { content:""; position:absolute; inset:6% 2% 10%; border:1px solid #7da4bb35; border-radius:50%; transform:rotate(-25deg); }
.product-stage::after { content:""; position:absolute; left:12%; right:12%; bottom:8%; height:1px; background:linear-gradient(90deg,transparent,#7098af88,transparent); }
.product-stage img { object-fit:contain; position:absolute; filter:drop-shadow(0 25px 15px #0006); }
.product-stage .stage-long { width:88%; height:100%; top:-6%; left:-14%; transform:rotate(-13deg); }
.product-stage .stage-short { width:56%; height:64%; top:37%; right:-3%; transform:rotate(12deg); }
.product-stage .stage-label { position:absolute; top:5%; right:1%; font-size:11px; letter-spacing:.12em; color:#a7c6d9; text-transform:uppercase; writing-mode:vertical-rl; }
.product-hero-foot { border-top:1px solid #b3d1e333; display:flex; flex-wrap:wrap; gap:20px 40px; padding:23px 0; font-size:12px; color:#c4d6e2; }
.product-hero-foot strong { color:#fff; font-weight:700; }
.product-section { padding:94px 0; }
.product-section-head { display:grid; grid-template-columns:1.1fr 1fr; align-items:end; gap:50px; margin-bottom:42px; }
.product-section-head h2 { margin-bottom:0; font-size:clamp(34px,4vw,58px); }
.product-section-head>p { max-width:510px; margin:0; color:#4c6678; font-size:17px; }
.product-section-head .product-kicker { color:#165ba5; }
.collection-feature { border-top:1px solid var(--product-line); border-bottom:1px solid var(--product-line); padding:36px 0 0; }
.collection-feature-top { display:flex; align-items:center; justify-content:space-between; gap:28px; }
.collection-feature h3 { font-size:clamp(28px,3vw,42px); font-weight:400; margin-bottom:12px; }
.collection-feature p { max-width:620px; color:#4c6678; }
.collection-feature .collection-index { font-size:12px; color:#526e80; letter-spacing:.12em; margin-bottom:12px; }
.product-lineup { display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); margin-top:28px; }
.product-mini { border-left:1px solid #d8e2e8; padding:20px 16px 28px; min-width:0; display:flex; flex-direction:column; gap:12px; transition:background .2s ease; }
.product-mini:first-child { border-left:0; }
.product-mini:hover { background:#edf3f7; }
.product-mini img { width:100%; height:200px; object-fit:contain; transition:transform .25s ease; }
.product-mini:hover img { transform:translateY(-5px); }
.product-mini strong { font-size:16px; color:#19374b; }
.product-mini span { color:#536d7e; font-size:12px; }
.product-custom { background:#eaf1f5; }
.product-custom-grid { display:grid; grid-template-columns:1fr 1fr; gap:80px; align-items:center; }
.product-custom h2 { font-size:clamp(34px,4vw,58px); }
.product-custom p { color:#465f70; max-width:580px; font-size:17px; }
.product-custom-list { list-style:none; padding:0; margin:0; border-top:1px solid #b9ccd8; }
.product-custom-list li { border-bottom:1px solid #b9ccd8; padding:22px 0; display:grid; grid-template-columns:38px 1fr; gap:12px; }
.product-custom-list span { font-size:12px; color:#165ba5; padding-top:4px; }
.product-custom-list strong { font-size:19px; font-weight:600; }
.product-custom-list p { font-size:14px; margin:7px 0 0; }
.product-selector { display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:10px; margin:0 0 26px; }
.product-selector a { border:1px solid #c5d3dd; border-radius:2px; padding:12px; background:#f1f5f7; display:flex; align-items:center; flex-direction:column; text-align:center; justify-content:space-between; gap:9px; font-size:14px; font-weight:700; line-height:1.4; min-height:128px; }
.product-selector img { width:82px; height:76px; object-fit:contain; }
.product-selector a:hover { border-color:#165ba5; }
.product-selector [aria-selected="true"] { border-color:#165ba5; background:#fff; box-shadow:inset 0 -3px #165ba5; color:#165ba5; }
.product-panel { display:grid; grid-template-columns:1.1fr 1fr; align-items:stretch; border:1px solid #cfdae2; margin-bottom:26px; background:#fff; }
.product-panel[hidden] { display:none; }
.product-photo { display:flex; align-items:center; justify-content:center; background:radial-gradient(ellipse at center,#fff,#e7eff4); min-height:480px; position:relative; overflow:hidden; }
.product-photo>img { width:88%; height:440px; object-fit:contain; padding:22px; transition:transform .35s ease; }
.product-photo:hover>img { transform:scale(1.045); }
.product-panel-copy { padding:56px 48px; align-self:center; }
.product-panel-copy .product-kicker { color:#165ba5; font-size:11px; }
.product-panel-copy h3 { font-size:clamp(31px,3.3vw,46px); font-weight:400; margin-bottom:20px; }
.product-panel-copy p { color:#4b6475; }
.product-feature-list { padding-left:20px; margin:24px 0; color:#304f64; font-size:14px; }
.product-feature-list li { padding:4px 0; }
.product-panel-note { font-size:12px; margin-top:20px; }
.product-help-line { color:#526c7d; font-size:14px; margin:20px 0 0; }
.product-help-line a { color:#165ba5; text-decoration:underline; text-underline-offset:4px; }
.product-production { background:#0c202e; color:#fff; padding:0; }
.product-production-grid { display:grid; grid-template-columns:1fr 1fr; min-height:600px; }
.product-production-image { min-height:500px; position:relative; }
.product-production-image img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:50% 20%; }
.product-production-copy { padding:80px clamp(28px,5vw,100px); align-self:center; }
.product-production h2 { color:#fff; font-size:clamp(36px,4.2vw,62px); }
.product-production p { color:#c5d7e2; max-width:550px; }
.product-production .product-kicker { color:#a7d4f3; }
.product-process { display:grid; grid-template-columns:1fr 1fr; gap:22px; margin-top:32px; border-top:1px solid #7d9baf55; padding-top:26px; }
.product-process strong { font-size:16px; }
.product-process p { font-size:13px; margin:8px 0 0; }
.home-product-spotlight { background:#0c202e; color:#fff; padding:78px 0 38px; overflow:hidden; --product-blue:#add7f3; }
.home-product-grid { display:grid; grid-template-columns:1fr 1fr; align-items:center; gap:60px; }
.home-product-spotlight .product-kicker { color:#a9d4ee; }
.home-product-spotlight h2 { font-size:clamp(36px,4.6vw,66px); max-width:650px; margin-bottom:25px; }
.home-product-spotlight h2 em { color:#add7f3; }
.home-product-spotlight p:not(.product-kicker) { color:#c6d7e2; max-width:500px; }
.home-product-spotlight .product-stage { max-height:520px; }
.home-product-meta { border-top:1px solid #b3d1e333; margin-top:30px; padding-top:24px; display:flex; flex-wrap:wrap; gap:12px 32px; font-size:12px; color:#c4d6e2; }
@media(min-width:1800px) { .product-hero-grid { min-height:620px; } }
@media(max-width:1000px) {
  .product-lineup { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .product-mini:nth-child(3n+1) { border-left:0; }
  .product-hero-grid { gap:16px; min-height:480px; }
  .product-hero h1 { font-size:clamp(44px,6vw,66px); }
  .product-hero-copy>p:not(.product-kicker) { font-size:16px; }
  .product-stage .stage-short { right:0; }
  .product-section { padding:70px 0; }
  .product-section-head,.product-custom-grid { gap:35px; }
  .product-panel-copy { padding:32px; }
  .product-mini { padding:16px 10px 24px; }
  .product-mini img { height:150px; }
  .product-production-copy { padding:50px 30px; }
  .home-product-grid { gap:28px; }
}
@media(max-width:760px) {
  .product-hero { padding-top:128px; }
  .product-hero-grid,.home-product-grid,.product-custom-grid,.product-section-head,.product-production-grid,.product-panel { grid-template-columns:1fr; }
  .product-hero-grid { gap:0; }
  .product-hero-copy { padding:24px 0 8px; }
  .product-hero h1 { font-size:clamp(43px,9vw,66px); }
  .product-hero-copy>p:not(.product-kicker) { max-width:600px; }
  .product-stage { width:min(100%,540px); justify-self:center; }
  .product-stage .stage-long { left:-4%; width:80%; }
  .product-stage .stage-short { right:3%; width:52%; }
  .product-stage .stage-label { right:7%; }
  .product-hero-foot { padding:20px 0; gap:10px 24px; }
  .product-lineup { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .product-mini { border-top:1px solid #d8e2e8; }
  .product-mini:nth-child(3n+1) { border-left:1px solid #d8e2e8; }
  .product-mini:nth-child(odd) { border-left:0; }
  .product-mini img { height:180px; }
  .product-selector { display:flex; overflow-x:auto; padding:4px 4px 12px; margin-inline:-4px; scroll-snap-type:x proximity; }
  .product-selector a { flex:0 0 128px; scroll-snap-align:start; }
  .product-photo { min-height:340px; }
  .product-photo>img { height:340px; }
  .product-panel-copy { padding:30px 26px 38px; }
  .product-production-image { min-height:460px; }
  .collection-feature-top { align-items:flex-start; flex-direction:column; gap:12px; }
  .home-product-spotlight { padding:62px 0 30px; }
  .home-product-grid { gap:18px; }
  .home-product-meta { margin-top:14px; }
}
@media(max-width:400px) { .product-actions { gap:20px; } .product-process { grid-template-columns:1fr; } .product-photo>img { height:300px; } .product-mini img { height:145px; } }
@media(prefers-reduced-motion:reduce) { .product-photo>img,.product-mini img { transition:none; } }

/* Interactive application drawing and product selector share one view. */
.application-layout { display:grid; grid-template-columns:minmax(0,1fr) 256px; gap:24px; align-items:start; margin-bottom:30px; }
.application-figure { margin:0; background:#fff; border:0; min-width:0; }
.application-svg { display:block; width:100%; height:clamp(330px,42vw,560px); background:#fff; }
.application-part .app-halo { fill:#a7d7f1; fill-opacity:.18; stroke:#7ea8c0; stroke-width:1.5; opacity:.5; }
.application-part .app-hardware { fill:#6faccf; stroke:#284c61; stroke-width:1.3; stroke-linejoin:round; }
.application-part .app-hole { fill:#e4f1f8; stroke:#284c61; stroke-width:1; }
.application-part .app-number circle { fill:#e2eef5; stroke:#7099b1; stroke-width:1; }
.application-part .app-number text { fill:#26485d; font:700 12px Arial,sans-serif; }
.application-figure.is-interactive .application-part:not(.is-selected) .app-halo { opacity:0; }
.application-figure.is-interactive .application-part:not(.is-selected) .app-hardware { fill:#b9ccd7; stroke:#738e9e; }
.application-figure.is-interactive .application-part:not(.is-selected) .app-number { opacity:.48; }
.application-part.is-selected .app-halo { fill:#38a6e5; fill-opacity:.2; stroke:#0877b9; stroke-width:2.6; opacity:1; }
.application-part.is-selected .app-hardware { fill:#168ed1; stroke:#064b78; stroke-width:2; }
.application-part.is-selected .app-number circle { fill:#145c93; stroke:#145c93; }
.application-part.is-selected .app-number text { fill:#fff; }
.application-part.is-pulsing .app-halo { animation:connection-pulse 1.4s ease-in-out 3; transform-box:fill-box; transform-origin:center; }
@keyframes connection-pulse { 0%,100% { opacity:1; transform:scale(1); } 50% { opacity:.28; transform:scale(1.22); } }




.application-controls-title { font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.12em; color:#45677e; margin:0 0 12px; }
.application-layout .product-selector { display:grid; grid-template-columns:1fr; gap:8px; margin:0; padding:0; overflow:visible; }
.application-layout .product-selector a { display:grid; grid-template-columns:62px 1fr; gap:12px; align-items:center; min-height:86px; padding:10px 14px; text-align:left; border-color:#cadbe5; position:relative; }
.application-layout .product-selector img { width:62px; height:62px; }
.application-layout .product-selector a>span { display:flex; align-items:center; gap:9px; }
.application-layout .product-selector .application-tab-number { font-size:11px; font-weight:400; color:#5e7a8e; }
.application-layout .product-selector [aria-selected="true"] { box-shadow:inset 3px 0 #165ba5; border-color:#165ba5; background:#e8f2f9; }
.application-control-note { font-size:12px; line-height:1.65; color:#567286; margin:16px 0 0; }
.application-legend { list-style:none; display:flex; gap:10px 22px; flex-wrap:wrap; padding:0; margin:0; font-size:12px; color:#506b7d; }
.application-legend strong { margin-right:6px; color:#165b93; }
.application-links { display:flex; flex-wrap:wrap; align-items:center; gap:16px; }
.application-links .application-link { font-size:14px; color:#165ba5; text-decoration:underline; text-underline-offset:5px; }
.application-mini-note { font-size:12px; color:#5c7789; padding:14px 0 24px; }
@media(min-width:1550px) { .application-layout { grid-template-columns:minmax(0,1fr) 300px; gap:32px; } .application-layout .product-selector a { min-height:86px; } }
@media(max-width:1100px) { .application-layout { grid-template-columns:minmax(0,1fr) 220px; gap:16px; } .application-layout .product-selector a { grid-template-columns:48px 1fr; gap:9px; padding:8px 10px; min-height:74px; font-size:13px; } .application-layout .product-selector img { width:48px; height:54px; }  }
@media(max-width:760px) {
 .application-svg { height:auto; }
 .application-layout { grid-template-columns:1fr; gap:20px; }
 .application-layout .product-selector { grid-template-columns:repeat(2,minmax(0,1fr)); }
 .application-layout .product-selector a { grid-template-columns:46px 1fr; min-height:78px; font-size:13px; }
 .application-layout .product-selector a>span { gap:5px; }
 .application-control-note { margin-top:12px; }
 
 
 
}
@media(max-width:380px) { .application-layout .product-selector a { grid-template-columns:36px 1fr; padding:8px; gap:6px; font-size:12px; } .application-layout .product-selector img { width:36px; height:48px; } }
@media(prefers-reduced-motion:reduce) { .application-part.is-pulsing .app-halo { animation:none; } }

/* Larger connection keys for the detailed corner-return application view. */
.application-svg .app-number text { font-size:17px; }

/* Thin hardware outlines retain the mounting faces in the detailed application drawing. */
.application-svg .app-hardware { stroke-width:1.25; }
.application-svg .is-selected .app-hardware { stroke-width:1.65; }

/* Edge faces distinguish the bends of the hardware on paired square-tube members. */
.application-svg .app-sheet-edge { stroke-width:.8; }

/* Selection announcements are available to assistive technology only. */
.application-caption { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); clip-path:inset(50%); white-space:nowrap; border:0; }

/* Keep the application, selected product and its details together. */
.hardware-section { padding:64px 0; }
.hardware-section .product-section-head { display:block; margin-bottom:26px; }
.hardware-section .product-section-head h2 { font-size:clamp(30px,3vw,42px); line-height:1.2; }
.hardware-section .product-section-head h2 br { display:none; }
.hardware-section .product-section-head h2 em::before { content:' '; white-space:pre; }
.hardware-section .product-section-head .product-kicker { margin-bottom:10px; }
.hardware-explorer { scroll-margin-top:120px; }
.hardware-choices { margin-bottom:24px; }
.hardware-explorer .product-selector { display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:10px; margin:0; padding:0; overflow:visible; }
.hardware-explorer .product-selector a { display:flex; flex-direction:row; justify-content:flex-start; gap:10px; align-items:center; min-height:88px; padding:8px 10px; background:#fff; border:0; border-bottom:2px solid #dae4eb; border-radius:0; text-align:left; font-size:14px; box-shadow:none; }
.hardware-explorer .product-selector img { width:64px; height:72px; flex:none; }
.hardware-explorer .product-selector a>span { display:flex; flex-direction:column; align-items:flex-start; gap:2px; }
.hardware-explorer .application-tab-number { color:#607c8e; font-size:11px; font-weight:400; }
.hardware-explorer .product-selector a:hover { color:#165ba5; border-bottom-color:#87a9c5; }
.hardware-explorer .product-selector [aria-selected="true"] { background:#fff; border-bottom-color:#165ba5; color:#165ba5; box-shadow:0 1px 0 #165ba5; }
.hardware-workspace { display:grid; grid-template-columns:minmax(0,1.45fr) minmax(340px,1fr); gap:clamp(24px,2.2vw,36px); align-items:center; }
.hardware-workspace .application-svg { height:auto; max-height:560px; aspect-ratio:1475 / 1000; }
.hardware-details { min-width:0; }
.hardware-explorer .product-panel { display:block; border:0; margin:0; background:#fff; }
.hardware-explorer .product-panel[hidden] { display:none; }
.hardware-explorer .product-panel-heading { display:grid; grid-template-columns:192px minmax(0,1fr); align-items:center; gap:20px; margin-bottom:12px; }
.hardware-explorer .product-photo { min-height:0; background:#fff; border:0; overflow:visible; }
.hardware-explorer .product-photo>img { display:block; width:100%; height:192px; padding:0; object-fit:contain; }
.hardware-explorer .product-photo:hover>img { transform:none; }
.hardware-explorer .product-heading-copy .product-kicker { color:#165ba5; font-size:11px; line-height:1.5; margin:0 0 9px; }
.hardware-explorer .product-heading-copy h3 { font-size:clamp(29px,2.5vw,38px); font-weight:400; line-height:1.15; margin:0; }
.hardware-explorer .product-panel-copy { padding:0; }
.hardware-explorer .product-panel-copy>p { font-size:16px; line-height:1.55; margin:0; }
.hardware-explorer .product-feature-list { font-size:14px; line-height:1.5; margin:14px 0 18px; padding-left:18px; }
.hardware-explorer .product-feature-list li { padding:3px 0; }
.hardware-explorer .product-panel-copy .btn { min-height:46px; padding:13px 22px; font-size:15px; }
.hardware-explorer .product-panel-copy .product-panel-note { font-size:13px; line-height:1.5; margin:12px 0 0; }
.hardware-section .product-help-line { margin-top:28px; }
@media(min-width:1101px) {
 .hardware-section > .wrap { width:min(1600px,calc(100% - 96px)); }
}
@media(min-width:1001px) and (max-height:800px) {
 .hardware-choices { margin-bottom:16px; }
 .hardware-explorer .product-selector a { min-height:68px; }
 .hardware-explorer .product-selector img { width:58px; height:56px; }
 .hardware-explorer .product-panel-heading { grid-template-columns:160px minmax(0,1fr); margin-bottom:8px; }
 .hardware-explorer .product-photo>img { height:160px; }
 .hardware-workspace .application-svg { max-height:460px; }
}
@media(max-width:1100px) {
 .hardware-explorer .product-selector a { gap:6px; padding:6px; font-size:12px; }
 .hardware-explorer .product-selector img { width:40px; height:52px; }
 .hardware-workspace { grid-template-columns:minmax(0,1.1fr) minmax(320px,1fr); gap:24px; }
 .hardware-explorer .product-panel-heading { grid-template-columns:130px minmax(0,1fr); gap:14px; }
 .hardware-explorer .product-photo>img { height:140px; }
}
@media(max-width:800px) {
 .hardware-explorer .product-selector { grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px 12px; }
 .hardware-explorer .product-selector a { min-height:62px; font-size:13px; }
 .hardware-workspace { grid-template-columns:1fr; gap:20px; }
 .hardware-workspace .application-svg { max-height:360px; }
 .hardware-explorer .product-panel { max-width:580px; margin-inline:auto; }
 .hardware-explorer .product-panel-heading { grid-template-columns:150px minmax(0,1fr); gap:20px; }
 .hardware-explorer .product-photo>img { height:150px; }
}
@media(max-width:480px) {
 .hardware-section { padding:46px 0; }
 .hardware-explorer .product-selector { grid-template-columns:repeat(2,minmax(0,1fr)); }
 .hardware-explorer .product-selector a { min-height:60px; }
 .hardware-explorer .product-panel-heading { grid-template-columns:130px minmax(0,1fr); gap:14px; }
 .hardware-explorer .product-photo>img { height:130px; }
 .hardware-explorer .product-heading-copy h3 { font-size:27px; }
 .hardware-workspace { gap:14px; }
}

/* A circular connection detail stays with the accepted application drawing. */
.hardware-workspace .application-figure { position:relative; }
.connection-closeup { position:absolute; left:0; bottom:0; width:30%; max-width:240px; margin:0; }
.connection-closeup[hidden] { display:none; }
.connection-closeup-window { overflow:hidden; aspect-ratio:1; border:1.5px solid #6389a3; border-radius:50%; background:#fff; box-shadow:0 6px 20px #16394e12; }
.connection-closeup-svg { display:block; width:100%; height:100%; object-fit:contain; background:#fff; }
.connection-closeup-label { display:flex; align-items:center; justify-content:center; gap:7px; margin-top:9px; font-size:11px; line-height:1.4; color:#36596e; text-align:center; min-height:31px; }
.connection-closeup-number { display:inline-grid; place-items:center; width:20px; height:20px; flex:none; background:#145c93; color:#fff; border-radius:50%; font-size:11px; font-weight:700; }
.connection-closeup.is-opening { animation:connection-detail-in .28s ease-out both; transform-origin:50% 70%; }
@keyframes connection-detail-in { from { opacity:0; transform:scale(.92) translateY(6px); } to { opacity:1; transform:scale(1) translateY(0); } }
@media(max-width:800px) {
 .connection-closeup { position:static; width:190px; max-width:65%; margin:0 auto 12px; }
 .connection-closeup-label { font-size:10px; gap:4px; margin-top:5px; }
 .connection-closeup-number { width:17px; height:17px; font-size:10px; }
}
@media(prefers-reduced-motion:reduce) { .connection-closeup.is-opening { animation:none; } }