/* Foreground integration only. Film frames/grid come directly from WC-0039 styles.css. */
main{position:relative;isolation:isolate;display:grid}
.introduction-content,.film-background{grid-area:1/1;min-width:0}
.introduction-content{position:relative;z-index:1;pointer-events:none}
.introduction-content>*{pointer-events:auto}
.film-background{position:fixed;inset:0;z-index:0;margin:0;padding:0;pointer-events:none;overflow:hidden}
.case-wall{align-content:start}
.hero-copy{background:#f5f3eb;padding:24px;border-radius:10px}
.process-section .section-heading{background:#f5f3eb;padding:24px;border-radius:10px}
.process-list li{background:#f5f3eb;padding:24px;border-radius:0 0 8px 8px}
.case-section,.status-section{position:relative}
@media(max-width:560px){.film-background{margin:0}.hero-copy,.process-section .section-heading{padding:18px}.process-list li{padding:16px}.hero h1{font-size:clamp(36px,10vw,48px)}}

.site-header,.site-footer{position:relative;z-index:2;background:#f5f3eb}

/* Soften the film photographs without dimming foreground content. */
.case-wall img{filter:brightness(.65)}

/* Opaque header spans edge to edge; contents retain their original gutters. */
.site-header{width:100%;margin-inline:0;padding-inline:max(48px,calc((100% - 1440px)/2))}
@media(max-width:900px){.site-header{width:100%;padding-inline:max(24px,calc((100% - 720px)/2))}}
@media(max-width:560px){.site-header{width:100%;padding-inline:18px}}

/* Product-family introduction. */
.family-primary{padding:28px;margin-top:36px;background:#f5f3eb;border-radius:10px}.family-primary h3,.family-grid h3{font-size:20px;line-height:1.5;margin:0 0 16px}.family-primary p,.family-grid p{font-size:16px;line-height:1.85;margin:0;color:#365548}.family-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;margin-top:24px}.family-grid article{min-width:0;padding:24px;background:#f5f3eb;border-radius:10px}.status-copy,.family-primary,.family-grid{overflow-wrap:break-word}@media(max-width:900px){.family-grid{grid-template-columns:1fr}.status-layout{grid-template-columns:1fr;gap:24px}}@media(max-width:560px){.family-primary,.family-grid article{padding:20px}.family-primary h3,.family-grid h3{font-size:18px}}
.status-copy p+p{margin-top:16px}

/* One category at a time; arrows stay outside the clipped sliding viewport. */
.family-carousel{margin-top:28px}
.family-slider{display:grid;grid-template-columns:48px minmax(0,680px) 48px;justify-content:center;align-items:center;gap:16px}
.family-window{overflow:hidden;min-width:0;border-radius:10px}
.family-carousel .family-grid{display:flex;gap:0;margin:0;transition:transform .35s ease}
.family-carousel .family-grid article{flex:0 0 100%;box-sizing:border-box;margin:0}
.family-arrow{width:48px;height:48px;border:1px solid #365548;border-radius:50%;background:#f5f3eb;color:#203e30;font-size:24px;cursor:pointer}
.family-arrow:focus-visible{outline:3px solid #365548;outline-offset:4px}
.family-arrow:disabled{opacity:.45;cursor:default}
.family-position{text-align:center;font-size:14px;margin:16px 0 0;color:#365548}
@media(max-width:560px){.family-slider{grid-template-columns:36px minmax(0,1fr) 36px;gap:8px}.family-arrow{width:36px;height:44px;font-size:20px}.family-carousel .family-grid article{padding:18px}}
@media(prefers-reduced-motion:reduce){.family-carousel .family-grid{transition:none}}

/* Frosted liquid-glass category surface, with a readable fallback. */
.family-carousel .family-window{
  position:relative;border-radius:24px;border:1px solid rgba(255,255,255,.72);
  background:linear-gradient(135deg,rgba(255,255,255,.72),rgba(235,248,236,.54) 48%,rgba(255,255,255,.38));
  box-shadow:0 18px 34px -20px rgba(17,52,37,.45),0 5px 12px -6px rgba(17,52,37,.22),inset 0 1px 0 rgba(255,255,255,.95),inset 0 -1px 0 rgba(255,255,255,.48);
}
.family-carousel .family-window::after{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;border-radius:inherit;
  background:linear-gradient(125deg,rgba(255,255,255,.42),transparent 34%,transparent 68%,rgba(255,255,255,.15));
  box-shadow:inset 1px 1px 1px rgba(255,255,255,.85),inset -1px -1px 1px rgba(255,255,255,.35);
}
.family-carousel .family-grid article{position:relative;background:transparent;border-radius:24px;padding:32px}
.family-carousel .family-grid h3,.family-carousel .family-grid p{position:relative;z-index:2;color:#203e30}
.family-carousel .family-arrow{border-color:rgba(255,255,255,.85);background:linear-gradient(135deg,rgba(255,255,255,.84),rgba(243,250,241,.55));box-shadow:0 6px 12px -7px rgba(17,52,37,.4),inset 0 1px 0 #fff}
@supports ((backdrop-filter:blur(16px)) or (-webkit-backdrop-filter:blur(16px))){
  .family-carousel .family-window{background:linear-gradient(135deg,rgba(255,255,255,.6),rgba(235,248,236,.4) 48%,rgba(255,255,255,.3));backdrop-filter:blur(16px) saturate(125%);-webkit-backdrop-filter:blur(16px) saturate(125%)}
}
@media(max-width:560px){.family-carousel .family-grid article{padding:20px}.family-carousel .family-window,.family-carousel .family-grid article{border-radius:20px}}
@media(forced-colors:active){.family-carousel .family-window,.family-carousel .family-arrow{background:Canvas;border:1px solid CanvasText;box-shadow:none}.family-carousel .family-window::after{display:none}.family-carousel .family-grid h3,.family-carousel .family-grid p{color:CanvasText}}