/* Three product families share a clear left edge for headings and photography. */
.matrix-stage .matrix-title-row { align-items:start; gap:40px; margin-bottom:26px; }
.matrix-stage .matrix-title-row h3 { margin:0; max-width:14ch; }
.matrix-stage .matrix-title-row p { margin:0; justify-self:end; }
.product-portfolio--families { --family-pad:clamp(20px,1.65vw,40px); --family-image-height:clamp(92px,11dvh,160px); grid-template-columns:1.2fr 1fr 1fr; grid-template-areas:none; gap:0; background:#18201b; border:1px solid #ffffff24; }
.portfolio-family { min-width:0; padding:var(--family-pad); }
.portfolio-family + .portfolio-family { border-left:1px solid #ffffff24; }
.family-heading { margin:0 0 22px; text-align:left; }
.family-heading h4 { margin:0 0 10px; font-size:clamp(1.875rem,2.8vw,3.5rem); font-weight:400; line-height:1; letter-spacing:-.04em; }
.family-heading .tile-eyebrow { margin:0; font-size:clamp(.6875rem,.85vw,.8125rem); letter-spacing:.06em; }
.product-patents { display:flex; align-items:baseline; flex-wrap:wrap; gap:3px 10px; color:#aeb8af; font:400 clamp(.58rem,.62vw,.6875rem)/1.45 var(--mono); letter-spacing:.035em; }
.product-patents-label { flex:0 0 auto; color:var(--journey-accent); letter-spacing:.08em; text-transform:uppercase; white-space:nowrap; }
.product-patent-values { display:flex; min-width:0; flex-wrap:wrap; }
.product-patent-values > span { white-space:nowrap; }
.product-patent-values > span + span::before { content:'·'; padding:0 .55em; color:#d0a66f99; }
.family-heading .product-patents { margin:8px 0 0; }
.family-featured, .family-model-row, .family-other-models button { border:0; border-radius:0; background:none; color:var(--journey-ink); font:inherit; text-align:left; }
.family-featured { display:flex; flex-direction:column; align-items:flex-start; width:100%; padding:0; }
.family-model-name { font-size:clamp(1rem,1.2vw,1.5rem); font-weight:400; line-height:1.3; }
.family-featured > .family-model-name { display:flex; align-items:center; justify-content:space-between; gap:20px; width:100%; margin:8px 0 18px; font-size:clamp(1.375rem,1.6vw,2rem); }
.family-featured img { display:block; width:min(100%,560px); height:auto; max-height:420px; margin-top:12px; object-fit:contain; object-position:left top; }
.family-model-list { display:flex; flex-direction:column; }
.family-breath { --family-image-height:clamp(58px,8dvh,104px); }
.family-breath .family-model-row { padding:6px 0; }
.family-model-row { display:grid; grid-template-columns:clamp(82px,9vw,170px) minmax(0,1fr) 20px; align-items:center; gap:clamp(12px,1.5vw,28px); width:100%; min-height:44px; padding:10px 0; border-top:1px solid #ffffff1f; }
.family-model-row > img, .family-product-image { display:block; width:100%; height:var(--family-image-height); object-fit:contain; object-position:left center; }
.family-model-row small { display:block; margin-top:7px; color:var(--journey-muted); font-size:.75rem; line-height:1.5; }
.family-arrow { justify-self:end; font-size:1rem; color:var(--journey-accent); }
.family-model-row--text { grid-template-columns:minmax(0,1fr) 20px; padding:17px 0; }
.family-other-models { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); column-gap:18px; margin-top:20px; border-top:1px solid #ffffff1f; }
.family-other-models button { display:flex; align-items:center; justify-content:space-between; gap:8px; min-height:44px; padding:10px 0; font-size:.875rem; }
.family-other-models button span { color:var(--journey-accent); font-size:.75rem; }
.family-featured:hover .family-model-name, .family-model-row:hover .family-model-name, .family-other-models button:hover { color:var(--journey-accent); }
.family-featured:focus-visible, .family-model-row:focus-visible, .family-other-models button:focus-visible { outline:2px solid var(--journey-accent); outline-offset:4px; }
.matrix-stage .portfolio-note { margin-top:18px; }
@media (min-width:1051px) and (max-height:800px) {
  .fullpage-ready .matrix-stage { padding-top:14px; padding-bottom:14px; }
  .matrix-stage .matrix-title-row { margin-bottom:14px; }
  .matrix-stage .matrix-title-row h3 { max-width:none; font-size:1.75rem; }
  .matrix-stage .matrix-title-row p { font-size:.8125rem; line-height:1.5; }
  .product-portfolio--families { --family-pad:14px; --family-image-height:52px; }
  .family-breath { --family-image-height:52px; }
  .family-heading { margin-bottom:10px; }
  .family-heading h4 { font-size:1.875rem; margin-bottom:7px; }
  .family-heading .product-patents { margin-top:4px; font-size:.5625rem; }
  .family-featured > .family-model-name { margin-top:4px; font-size:1.25rem; }
  .family-featured img { height:170px; margin-top:0; }
  .family-model-row { padding:4px 0; }
  .family-model-row--text { padding:10px 0; }
  .family-model-row small { margin-top:3px; font-size:.6875rem; }
  .family-other-models { margin-top:10px; }
  .matrix-stage .portfolio-note { margin-top:12px; font-size:.6875rem; }
}
@media (min-width:701px) and (max-width:1050px) {
  .product-portfolio--families { grid-template-columns:1fr 1fr; }
  .family-breath { grid-column:1 / -1; border-top:1px solid #ffffff24; }
  .portfolio-family.family-breath { border-left:0; }
  .family-breath .family-model-list { display:grid; grid-template-columns:1fr 1fr; gap:28px; }
  .family-breath .family-other-models { grid-template-columns:repeat(3,minmax(0,1fr)); }
}
@media (max-width:700px) {
  .fullpage-ready .matrix-stage { padding:26px var(--journey-pad); }
  .matrix-stage .matrix-title-row { gap:16px; margin-bottom:26px; }
  .matrix-stage .matrix-title-row h3 { font-size:2rem; max-width:14ch; }
  .matrix-stage .matrix-title-row p { justify-self:start; font-size:1rem; line-height:1.6; }
  .product-portfolio--families { --family-pad:22px; --family-image-height:94px; grid-template-columns:1fr; }
  .portfolio-family + .portfolio-family { border-left:0; border-top:1px solid #ffffff24; }
  .family-heading { margin-bottom:24px; }
  .family-heading h4 { font-size:2.25rem; }
  .family-heading .tile-eyebrow { font-size:.75rem; }
  .family-heading .product-patents { font-size:.625rem; }
  .family-model-row { grid-template-columns:86px minmax(0,1fr) 18px; gap:14px; }
  .family-model-name { font-size:1rem; }
  .family-model-row--text { grid-template-columns:minmax(0,1fr) 18px; }
  .family-featured img { height:210px; }
  .family-other-models { column-gap:16px; }
}