/* NBCUniversal campaign gallery. */
/* Deep blue-green sampled from the Together artwork. */
.nbcu-page{--bg:#191f22;background:var(--bg)}

.nbcu-hero h1{max-width:1100px;font-size:clamp(64px,9vw,140px);line-height:.98;letter-spacing:-.065em}
.nbcu-cover{margin-top:0;margin-bottom:72px}.nbcu-cover img{width:100%;height:auto;border-radius:6px}
.nbcu-wall-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:48px 32px;margin-top:40px}
.nbcu-wall-grid figure{margin:0}.nbcu-wall-grid img{width:100%;height:auto;max-height:none;border-radius:6px}
.nbcu-wall-grid figcaption,.nbcu-banner figcaption{text-align:left;margin-top:16px}
.nbcu-banner{margin:36px 0 0}.nbcu-banner img{width:100%;height:auto;max-height:none;border-radius:6px}
@media(max-width:700px){.nbcu-wall-grid{grid-template-columns:1fr;gap:32px}.nbcu-cover{margin-bottom:40px}.nbcu-hero h1{font-size:clamp(60px,15vw,92px)}}

.nbcu-reveal-video{display:block;width:100%;height:auto;aspect-ratio:16/9;margin-top:32px;background:#000;object-fit:contain;border-radius:6px}

.nbcu-impact-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;margin-top:36px}
.nbcu-impact-grid>div{padding:32px;background:#273338;border:0;border-radius:var(--card-radius)}
.nbcu-impact-grid h3{font-size:clamp(26px,3vw,36px);font-weight:650;line-height:1.15;letter-spacing:-.035em;color:#fff;overflow-wrap:anywhere}
.nbcu-impact-grid p{font-size:16px;line-height:1.6;color:var(--muted)}
@media(max-width:850px){.nbcu-impact-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:550px){.nbcu-impact-grid{grid-template-columns:1fr;gap:16px}.nbcu-impact-grid>div{padding:24px}}

/* Present campaign artwork directly on the page. */
.nbcu-page figure{background:transparent;padding:0}

/* Campaign portraits reveal, then settle into the introduction on scroll. */
.nbcu-page>.site-header{position:absolute;inset:0 0 auto;z-index:5;border-bottom:0}
.nbcu-motion-cover{height:100svh;min-height:560px;position:relative}
.nbcu-cover-caption{position:absolute;bottom:86px;width:100%;padding:0 24px;text-align:center}
.nbcu-cover-caption h1{font-size:clamp(28px,3vw,44px);font-weight:600;margin-top:12px}
.nbcu-cover-next{position:absolute;bottom:24px;left:50%;transform:translateX(-50%);padding:10px}
.nbcu-hero-grid{display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:6%;padding-bottom:40px}
.nbcu-hero h2{font-weight:700;font-size:clamp(52px,6vw,88px);line-height:1;letter-spacing:-.06em;margin:22px 0 26px}
.nbcu-photo-slot,.nbcu-motion-photo{width:100%;aspect-ratio:1.4}
.nbcu-motion-photo{position:relative;isolation:isolate;transform-origin:top left}
.nbcu-motion-photo img{position:absolute;width:40%;height:auto;border-radius:6px;box-shadow:0 20px 50px #0006;transform:rotate(var(--card-angle));transform-origin:center}
.nbcu-motion-photo img:nth-child(1){left:0;top:15%;width:52%;--card-angle:-10deg;--card-delay:0s;z-index:1}
.nbcu-motion-photo img:nth-child(2){left:48%;top:15%;width:52%;--card-angle:10deg;--card-delay:.2s;z-index:2}
.nbcu-motion-photo img:nth-child(3){left:30%;top:0;--card-angle:-2deg;--card-delay:.4s;z-index:3}
.nbcu-motion-photo.is-floating{position:fixed;left:0;top:0;z-index:4;pointer-events:none;will-change:transform}
.nbcu-motion-photo.is-loading img{opacity:0}
.nbcu-motion-photo.is-ready img{animation:nbcuPhotoReveal .35s ease-out var(--card-delay) both}
@keyframes nbcuPhotoReveal{from{opacity:0;transform:translateY(30px) rotate(var(--card-angle)) scale(.96)}to{opacity:1;transform:translateY(0) rotate(var(--card-angle)) scale(1)}}
@media(max-width:700px){.nbcu-hero-grid{grid-template-columns:1fr;gap:40px}.nbcu-photo-slot{max-width:480px;margin:auto}.nbcu-hero h2{font-weight:700;font-size:60px}}
@media(prefers-reduced-motion:reduce){.nbcu-motion-cover{display:none}.nbcu-page>.site-header{position:relative}.nbcu-motion-photo.is-ready img{animation:none}.nbcu-motion-photo.is-loading img{opacity:1}}

/* Keep wall artwork flush within each grid cell. */
.nbcu-page .nbcu-wall-story .nbcu-wall-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(8px,2vw,24px);margin-top:24px}
.nbcu-page .nbcu-wall-story .nbcu-wall-grid figure{margin:0;padding:0}
.nbcu-page .nbcu-wall-story .nbcu-wall-grid img{max-height:none;width:100%;height:auto}
#more-campaign-artwork .nbcu-wall-grid{grid-template-columns:1fr;max-width:640px;margin-inline:auto}

/* Square edges and natural proportions for case-study artwork. */
.nbcu-page .case-body .nbcu-wall-grid img,.nbcu-page .case-body .nbcu-banner img{border-radius:0}
.nbcu-page .case-body .nbcu-banner img{width:100%;height:auto;max-height:none}

.nbcu-page .nbcu-wall-story .nbcu-additional-wall-row{grid-template-columns:repeat(3,minmax(0,1fr))}

/* Goals share the impact card layout and surface treatment. */
.nbcu-goals{margin:32px 0}
.nbcu-goals>h3{font-size:22px;margin-bottom:16px}
.nbcu-goals .nbcu-impact-grid{margin-top:16px}
.nbcu-goals .nbcu-impact-grid>div{background:#1e282c;border:1px solid #40545c}
.nbcu-goals .nbcu-impact-grid p{margin:0;color:#fff}

/* Event photography following the Together website. */
.nbcu-event-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;align-items:start}
.nbcu-page .nbcu-event-grid figure{margin:0;padding:0}
.nbcu-page .nbcu-event-grid img{width:100%;height:auto;max-height:none;border-radius:6px}
.nbcu-event-wide{grid-column:1 / -1}
@media(max-width:700px){.nbcu-event-grid{grid-template-columns:1fr;gap:16px}}

/* Keep the final three event photos together on desktop. */
.nbcu-event-grid{grid-template-columns:repeat(6,minmax(0,1fr))}
.nbcu-event-grid>figure{grid-column:span 3}
.nbcu-event-grid>figure.nbcu-event-third{grid-column:span 2}
@media(max-width:700px){.nbcu-event-grid{grid-template-columns:1fr}.nbcu-event-grid>figure,.nbcu-event-grid>figure.nbcu-event-third{grid-column:1}}

/* Proportional columns give the three photos equal heights without cropping. */
.nbcu-event-equal-row{grid-column:1 / -1;display:grid;grid-template-columns:1.000000000fr 1.509493671fr 1.347663551fr;gap:24px;align-items:start}
@media(max-width:700px){.nbcu-event-equal-row{gap:12px}}

.nbcu-event-pair{grid-template-columns:1.644736842fr 1.776198934fr}

.nbcu-impact>.nbcu-event-grid{margin-top:36px}

/* Numbers-first treatment for Together website metrics. */
#together-website .nbcu-impact-grid h3{font-size:44px;font-weight:650;line-height:1.1;letter-spacing:-2px;margin:0 0 6px}
#together-website .nbcu-impact-grid p{font-size:16px;line-height:1.5;margin:0;color:#c0c8cc}
@media(max-width:700px){#together-website .nbcu-impact-grid h3{font-size:36px;margin-bottom:6px}}

/* Short goal headings paired with supporting descriptions. */
.nbcu-page .nbcu-goals .nbcu-impact-grid h4{font-size:20px;font-weight:650;line-height:1.3;letter-spacing:-.025em;color:#fff;margin:0 0 8px}

/* Match CNN card lift on the goal tiles. */
@media(hover:hover) and (pointer:fine){
 .nbcu-goals .nbcu-impact-grid>div{transition:transform 180ms ease,box-shadow 180ms ease}
 .nbcu-goals .nbcu-impact-grid>div:hover{transform:translateY(-3px);box-shadow:0 8px 20px #00000018}
}
@media(prefers-reduced-motion:reduce){.nbcu-goals .nbcu-impact-grid>div:hover{transform:none}}

/* Shadow-free hover lift for Together and campaign impact metrics. */
@media(hover:hover) and (pointer:fine){
 :is(#together-website,#impact)>.nbcu-impact-grid>div{transition:transform 180ms ease;box-shadow:none}
 :is(#together-website,#impact)>.nbcu-impact-grid>div:hover{transform:translateY(-3px);box-shadow:none}
}
@media(prefers-reduced-motion:reduce){:is(#together-website,#impact)>.nbcu-impact-grid>div{transition:none}:is(#together-website,#impact)>.nbcu-impact-grid>div:hover{transform:none}}