/* Custom family gallery: Mach's existing type, ink canvas and red selection. */
/* Cropped cutouts fit directly; retain the approved Figma drive orientation. */
:is(.custom-showcase__face,.custom-showcase__fallback-photo) img[src*="/cutouts-20261030/"]{mix-blend-mode:normal}
:is(.custom-showcase__face,.custom-showcase__fallback-photo) img[src$="/cutouts-20261030/drives.webp"]{transform:rotate(-179.568385deg)}
.custom-showcase{--showcase-gap:20px;--showcase-top:calc(var(--site-header-height) + var(--site-header-offset) + var(--showcase-gap));--showcase-step:clamp(380px,64vh,640px);--showcase-active:#f15b43;--showcase-photo-radius:40px;--showcase-inset:16px;width:calc(100% - var(--showcase-inset)*2);margin-inline:auto;padding:0;scroll-margin-top:0}
.custom-showcase__surface{border-radius:64px}
.custom-showcase__pin{width:min(100%,1200px);padding-inline:calc(var(--gutter) - var(--showcase-inset));display:grid;grid-template-columns:440fr 576fr;grid-template-rows:auto 1fr;column-gap:clamp(48px,8vw,160px);row-gap:32px;padding-block:32px}
.custom-showcase__intro{grid-column:1;grid-row:1}.custom-showcase__intro .eyebrow{margin-bottom:20px}.custom-showcase__intro h2{font-size:clamp(44px,3.6vw,56px);line-height:1.04}.custom-showcase__hint{margin-top:24px;font-size:15px}
.custom-showcase__families{grid-column:1;grid-row:2;align-self:start}.custom-showcase__family{min-height:68px;display:grid;grid-template-columns:24px 1fr 24px;align-items:center;gap:20px;padding:15px 0;border-top:1px solid var(--dark-line);color:var(--paper)}.custom-showcase__family:last-child{border-bottom:1px solid var(--dark-line)}
.custom-showcase__number{font:500 11px/1.5 var(--mono);color:var(--light-muted)}.custom-showcase__family-name{font:600 clamp(26px,2.4vw,32px)/1.08 var(--display)}.custom-showcase__family-arrow{color:var(--showcase-active);font-size:25px;opacity:0;transform:translateX(-6px);transition:opacity 150ms,transform 150ms}
.custom-showcase__family:hover .custom-showcase__family-name{text-decoration:underline;text-underline-offset:6px;text-decoration-thickness:1px}.custom-showcase__family[aria-selected="true"]{color:var(--showcase-active)}.custom-showcase__family[aria-selected="true"] .custom-showcase__number{color:inherit}.custom-showcase__family[aria-selected="true"] .custom-showcase__family-arrow{opacity:1;transform:none}.custom-showcase__family:focus-visible{outline-color:var(--showcase-active);outline-offset:4px}
.custom-showcase__display{grid-column:2;grid-row:1/3;min-width:0;align-self:start}.custom-showcase__stage{width:100%;height:clamp(280px,36svh,360px);perspective:1600px;touch-action:pan-y}.custom-showcase__turn{width:100%;height:100%;position:relative;transform-style:preserve-3d;transform-origin:center}.custom-showcase[data-turning="true"] .custom-showcase__turn{will-change:transform}
.custom-showcase__face{position:absolute;inset:0;display:grid;place-items:center;background:var(--paper);border-radius:var(--showcase-photo-radius);overflow:hidden;backface-visibility:hidden;-webkit-backface-visibility:hidden;transform:translateZ(.5px)}.custom-showcase__face--back{transform:rotateY(180deg) translateZ(.5px)}.custom-showcase__face img{position:absolute;inset:0;min-width:0;min-height:0;width:100%;height:100%;object-fit:contain;padding:24px;mix-blend-mode:multiply}
.custom-showcase__panels{min-height:212px}.custom-showcase__panel{padding-top:24px;scroll-margin-top:calc(var(--showcase-top) + 24px)}.custom-showcase__panel + .custom-showcase__panel{margin-top:48px}.custom-showcase__panel h3{font-size:34px;line-height:1.1;margin-bottom:10px}.custom-showcase__description{font-size:19px;line-height:1.45;max-width:600px}.custom-showcase__specs{margin-top:14px;font-size:13px;line-height:1.5}.custom-showcase__specs span{color:var(--paper)}.custom-showcase__inquiry{display:inline-flex;align-items:center;gap:12px;min-height:44px;margin-top:8px;font-size:16px;text-decoration:underline;text-underline-offset:5px}.custom-showcase__inquiry span{color:var(--showcase-active);text-decoration:none}
.custom-showcase__fallback-photo{background:var(--paper);margin-bottom:24px;border-radius:var(--showcase-photo-radius);overflow:hidden}.custom-showcase__fallback-photo img{width:100%;height:350px;object-fit:contain;padding:24px;mix-blend-mode:multiply}
.custom-showcase__controls{margin-top:16px;padding-top:16px;border-top:1px solid var(--dark-line);display:flex;align-items:center;justify-content:space-between;gap:20px}.custom-showcase__paging{display:flex;align-items:center;gap:14px}.custom-showcase__paging button{flex:none;display:grid;place-items:center;width:44px;height:44px;border:1px solid var(--dark-line);color:var(--showcase-active);font-size:25px;transition:border-color 150ms,background-color 150ms}.custom-showcase__paging button:hover{border-color:var(--showcase-active);background:#ffffff08}.custom-showcase__count{font:500 12px/1.5 var(--mono);color:var(--light-muted);min-width:58px;text-align:center}.custom-showcase__motion{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--light-muted);min-height:44px}.custom-showcase__motion input{width:16px;height:16px;accent-color:var(--showcase-active)}
.custom-showcase__announcement{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap}.custom-showcase.is-enhanced .custom-showcase__fallback-photo{display:none}.custom-showcase.is-enhanced .custom-showcase__panel{margin-top:0}.custom-showcase.is-scroll-driven{height:calc(var(--showcase-height) + var(--showcase-step)*var(--showcase-stops,4))}.is-scroll-driven .custom-showcase__surface{position:sticky;top:var(--showcase-top)}
/* Use the extra height on larger monitors while preserving the laptop layout. */
@media(min-width:1200px) and (min-height:1000px){
  .custom-showcase.is-enhanced .custom-showcase__pin{width:min(100%,clamp(1200px,80vw,1600px));min-height:calc(100svh - var(--showcase-top) - 32px)}
  .custom-showcase.is-enhanced .custom-showcase__families{align-self:stretch;display:grid;grid-auto-rows:minmax(68px,1fr)}
  .custom-showcase.is-enhanced .custom-showcase__display{align-self:stretch;display:grid;grid-template-rows:minmax(360px,1fr) auto auto}
  .custom-showcase.is-enhanced .custom-showcase__stage{height:auto;min-height:360px}
}
@media(min-width:900px) and (max-height:850px){.custom-showcase__pin{row-gap:20px;padding-block:20px}.custom-showcase__intro h2{font-size:48px}.custom-showcase__intro .eyebrow{margin-bottom:14px}.custom-showcase__hint{margin-top:14px}.custom-showcase__family{min-height:60px;padding-block:12px}.custom-showcase__family-name{font-size:30px}.custom-showcase__stage{height:280px}.custom-showcase__panel{padding-top:18px}.custom-showcase__panel h3{font-size:30px}.custom-showcase__description{font-size:17px}.custom-showcase__panels{min-height:206px}.custom-showcase__controls{margin-top:10px;padding-top:10px}}
@media(max-width:899px){.custom-showcase{--showcase-photo-radius:28px}.custom-showcase__pin{display:flex;flex-direction:column;gap:24px;padding-block:48px}.custom-showcase__intro h2{font-size:48px}.custom-showcase__hint{margin-top:16px;font-size:14px}.custom-showcase.is-enhanced .custom-showcase__families{display:flex;overflow-x:auto;gap:24px;width:100%;scrollbar-width:thin;scrollbar-color:var(--dark-line) transparent}.custom-showcase.is-enhanced .custom-showcase__family{min-width:max-content;display:flex;min-height:62px;padding:10px 2px 14px;gap:10px;border-top:0;border-bottom:2px solid var(--dark-line)}.custom-showcase.is-enhanced .custom-showcase__family[aria-selected="true"]{border-color:var(--showcase-active)}.custom-showcase__family-name{font-size:26px}.custom-showcase__family-arrow{display:none}.custom-showcase__display{width:100%}.custom-showcase__stage{height:clamp(230px,56vw,390px)}.custom-showcase__face img{padding:18px}.custom-showcase__panel h3{font-size:30px}.custom-showcase__description{font-size:18px}.custom-showcase__panels{min-height:260px}}
@media(max-width:767px){.custom-showcase{--showcase-inset:12px}.custom-showcase__surface{border-radius:32px}}
@media(max-width:399px){.custom-showcase__controls{gap:12px;flex-wrap:wrap}.custom-showcase__paging{gap:8px}.custom-showcase__motion{font-size:12px;gap:6px}}
@media(prefers-reduced-motion:reduce){.custom-showcase__family-arrow,.custom-showcase__paging button{transition:none}}
