/* Burger Family product choreography. Independent from the approved hero/footer. */
.family-campaign {--family-yellow:#ffd90f;--family-blue:#2366b2;--family-ink:#16344f;background:var(--family-yellow);color:var(--family-ink);overflow:hidden;isolation:isolate}
.family-banner {position:relative;overflow:hidden;background:var(--family-ink);color:var(--cream);padding:18px 0;border-block:2px solid var(--family-ink)}
.family-banner-track {display:flex;width:max-content;align-items:center;font:400 clamp(2rem,4.3vw,4.4rem)/1 Bangers,sans-serif;letter-spacing:.02em;white-space:nowrap;animation:family-marquee 26s linear infinite;animation-play-state:paused;will-change:transform}
.family-banner-group {display:flex;flex-shrink:0;min-width:100vw;justify-content:space-around;align-items:center;gap:36px;padding-right:36px}
.family-banner.is-running .family-banner-track {animation-play-state:running}
@keyframes family-marquee {from {transform:translateX(0)} to {transform:translateX(-50%)}}
.family-banner-track span {display:inline-flex;align-items:center;gap:36px}
.family-banner-track i {font-style:normal;color:var(--family-yellow)}
.family-scene {position:relative}
.family-heading {position:relative;text-align:center;padding:44px var(--gutter) 34px}
.family-heading p {font-size:.875rem;font-weight:900;letter-spacing:.12em;text-transform:uppercase;margin-bottom:14px}
.family-heading h2 {font:400 clamp(4.75rem,10.8vw,11rem)/.86 Bangers,sans-serif;text-transform:uppercase;letter-spacing:-.02em;color:var(--family-blue)}
.family-heading h2 span {display:block;color:var(--family-ink)}
.family-reel {position:relative;width:100%;margin:0;background:#0c1720;color:var(--cream)}
.reel-video {display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:contain;background:#0c1720;pointer-events:none}
.reel-volume {position:absolute;right:clamp(14px,2.5vw,36px);top:16px;z-index:2;display:grid;place-items:center;width:48px;height:48px;padding:0;border:1px solid rgba(255,255,255,.65);border-radius:50%;background:rgba(12,23,32,.85);color:#fff}
.reel-volume:hover {background:#16344f}
.reel-volume:focus-visible {outline:3px solid #ffd90f;outline-offset:4px}
.reel-volume[data-muted="true"] .volume-on,.reel-volume[data-muted="false"] .volume-off {display:none}
.reel-status {padding:14px var(--gutter);font-size:1rem;line-height:1.5}

/* Full-bleed product bands, not a grid of catalog cards. */
.family-stories {position:relative}
.family-story {position:relative;isolation:isolate;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:center;min-height:420px;padding:38px var(--gutter);overflow:hidden;border-top:2px solid var(--family-ink)}
.family-story--barney {background:var(--family-blue);color:var(--cream)}
.family-story--lisa {background:var(--cream);color:var(--family-ink)}
.family-story--krusty {background:var(--family-yellow);color:var(--family-ink)}
.family-story--rich {background:var(--family-ink);color:var(--cream)}
.family-story-copy {position:relative;z-index:2;padding-left:clamp(0px,2.8vw,44px)}
.family-story-copy h3 {font:400 clamp(5.5rem,11.5vw,11rem)/.85 Bangers,sans-serif;text-transform:uppercase;letter-spacing:-.02em;margin-bottom:25px}
.family-story-copy h3 span {color:var(--family-yellow)}
.family-story--lisa .family-story-copy h3 span,.family-story--krusty .family-story-copy h3 span {color:var(--family-blue)}
.family-story-lead {font-size:clamp(1.2rem,2.05vw,1.875rem);font-weight:900;line-height:1.25;letter-spacing:-.025em;max-width:24ch;margin-bottom:14px}
.family-story-description {font-size:1.0625rem;line-height:1.65;max-width:33ch}
.family-story-portrait {position:relative;z-index:1;max-width:510px;width:88%;height:100%;margin:auto;display:grid;place-items:center;padding-block:12px}
.family-story-portrait img {display:block;width:100%;height:auto;max-height:460px;aspect-ratio:1;object-fit:cover;object-position:center 65%;border-radius:3px;box-shadow:0 22px 34px rgba(0,0,0,.23);will-change:transform}
.family-story:nth-child(even) .family-story-copy {grid-column:2;grid-row:1}
.family-story:nth-child(even) .family-story-portrait {grid-column:1;grid-row:1}
.family-story-word {position:absolute;z-index:0;inset:auto -2% -6%;font:400 clamp(6rem,21vw,22rem)/.8 Bangers,sans-serif;text-transform:uppercase;white-space:nowrap;opacity:.08;pointer-events:none;letter-spacing:-.02em}
.family-fineprint {background:var(--family-ink);color:#bfd0df;margin:0;padding:18px var(--gutter) 24px;text-align:center;font-size:.8125rem;line-height:1.6}
.family-campaign img[data-media-error] {visibility:hidden}

@media(min-width:100em) {.family-story {padding-inline:max(var(--gutter),calc((100vw - 1440px)/2))}}
@media(max-width:63.99em) {
  .family-heading h2 {font-size:clamp(4rem,12vw,7.5rem)}
  .family-story {min-height:340px;padding-block:25px;gap:12px}
  .family-story-copy {padding-left:0}
  .family-story-copy h3 {font-size:clamp(4rem,11vw,7rem);margin-bottom:20px}
  .family-story-description {font-size:1rem}
}
@media(max-width:40em) {
  .family-banner {padding-block:14px}
  .family-banner-track {font-size:2.25rem}
  .family-heading p {font-size:.8125rem;letter-spacing:.09em}
  .family-heading h2 {font-size:clamp(3.8rem,15vw,6rem);line-height:.9}
  .family-story {display:flex;flex-direction:column;min-height:0;padding:34px var(--gutter) 12px;gap:0}
  .family-story-copy {width:100%}
  .family-story-copy h3 {font-size:clamp(4.5rem,21vw,7rem);margin-bottom:18px}
  .family-story-lead {font-size:1.375rem;max-width:26ch}
  .family-story-description {max-width:36ch}
  .family-story-portrait {width:min(92%,430px);max-width:none;margin:24px auto 18px;height:auto}
  .family-story-portrait img {max-height:none}
  .family-story-word {font-size:35vw;bottom:10%}
}
@media(prefers-reduced-motion:reduce) {
  .family-story-portrait img,.family-banner-track {transform:none!important;will-change:auto;animation:none!important}
}
@media(forced-colors:active) {
  .family-campaign,.family-banner,.family-story,.family-fineprint {background:Canvas;color:CanvasText}
  .family-heading h2,.family-heading h2 span,.family-story-copy h3 span {color:CanvasText}
  .family-story-word {display:none}
}