.case-body { background: var(--paper); }
.case-header { color: var(--navy); }
.case-close { display: flex; align-items: center; gap: 12px; font-size: 13px; }
.case-close span { font-family: var(--display); font-size: 25px; font-weight: 300; line-height: 1; }
.case-hero { min-height: 100vh; padding-top: clamp(155px, 19vh, 230px); padding-bottom: 80px; background: var(--cream); }
.case-kicker { display: grid; grid-template-columns: .3fr 1fr auto; gap: 40px; width: min(100%, var(--max)); margin: 0 auto 58px; padding-bottom: 14px; border-bottom: 1px solid var(--line); color: var(--muted); font-size: .75rem; letter-spacing: .08em; text-transform: uppercase; }
.case-brand-mark { min-height: 62px; margin: -35px 0 32px; padding: 0 18px; color: rgba(255,255,255,.62); }
.case-brand-mark img { width: 48px; height: 48px; filter: invert(1); transition: transform .35s cubic-bezier(.2,.7,.2,1); }
.case-brand-mark span { padding-bottom: 2px; border-bottom: 1px solid rgba(255,255,255,.35); opacity: 0; transform: translateX(-8px); transition: opacity .25s ease, transform .25s ease; }
.case-brand-mark:hover img, .case-brand-mark:focus-visible img { transform: rotate(-7deg) scale(1.06); }
.case-brand-mark:hover span, .case-brand-mark:focus-visible span { opacity: 1; transform: none; }
.case-hero h1 { width: min(100%, var(--max)); margin: 0 auto; color: var(--navy); font-family: var(--display); font-size: clamp(62px, 10vw, 150px); font-weight: 500; letter-spacing: -.068em; line-height: .88; }
.case-hero h1 em { color: var(--coral); font-style: normal; }
.case-summary { display: grid; grid-template-columns: 1.35fr 1fr; gap: 100px; align-items: end; width: min(100%, 1000px); margin: 85px 0 0 auto; }
.case-summary > p { margin: 0; font-size: clamp(21px, 2vw, 30px); letter-spacing: -.025em; }
.case-summary dl { margin: 0; }
.case-summary dl div { display: grid; grid-template-columns: 80px 1fr; gap: 20px; padding: 11px 0; border-top: 1px solid var(--line); font-size: 12px; }
.case-summary dt { color: var(--muted); }.case-summary dd { margin: 0; }
.case-cover { position: relative; height: min(80vw, 980px); margin: 0; overflow: hidden; background: var(--navy); }
.case-cover img { width: 100%; height: 100%; object-fit: cover; object-position: center 38%; }
.case-cover figcaption { position: absolute; left: var(--pad); right: var(--pad); bottom: 28px; display: flex; justify-content: space-between; color: white; font-size: .75rem; letter-spacing: .08em; text-transform: uppercase; }
.case-section { display: grid; grid-template-columns: .5fr 2fr; gap: 55px; width: min(100%, var(--max)); margin: auto; padding-top: clamp(100px, 13vw, 180px); padding-bottom: clamp(100px, 13vw, 180px); }
.case-label { margin: 10px 0 0; color: var(--coral); font-size: .75rem; font-weight: 600; letter-spacing: .09em; text-transform: uppercase; }
.case-section h2 { max-width: 990px; margin: 0 0 48px; color: var(--navy); font-family: var(--display); font-size: clamp(43px, 6vw, 88px); font-weight: 500; letter-spacing: -.055em; line-height: 1; }
.case-section > div > p { max-width: 720px; font-size: 18px; line-height: 1.72; }
.case-metrics { display: grid; grid-template-columns: repeat(4, 1fr); width: 100%; padding-top: 0; padding-bottom: 0; background: var(--navy); color: white; }
.case-metrics article { position: relative; min-height: 305px; padding: 45px 32px; overflow: hidden; border-right: 1px solid rgba(255,255,255,.2); transition: background .35s ease, color .35s ease, transform .35s cubic-bezier(.2,.7,.2,1); }
.case-metrics article:last-child { border: 0; }
.case-metrics strong { position: relative; z-index: 1; display: block; color: var(--coral); font-family: var(--display); font-size: clamp(45px, 6vw, 84px); font-weight: 500; letter-spacing: -.06em; transition: color .35s ease, transform .35s cubic-bezier(.2,.7,.2,1); }
.case-metrics span { position: relative; z-index: 1; display: block; max-width: 220px; margin-top: 45px; color: rgba(255,255,255,.66); font-size: 13px; transition: color .35s ease, transform .35s ease; }
.case-metrics small { position: absolute; left: 32px; right: 32px; bottom: 34px; z-index: 1; color: var(--navy); font-size: .75rem; line-height: 1.45; opacity: 0; transform: translateY(14px); transition: opacity .3s ease, transform .3s ease; }
.case-metrics article::after { content: ""; position: absolute; inset: auto 0 0; height: 0; background: var(--coral); transition: height .4s cubic-bezier(.2,.7,.2,1); }
.case-metrics article:hover::after, .case-metrics article:focus-visible::after { height: 100%; }
.case-metrics article:hover strong, .case-metrics article:focus-visible strong { color: white; transform: translateY(-6px); }
.case-metrics article:hover span, .case-metrics article:focus-visible span { color: var(--navy); transform: translateY(-12px); }
.case-metrics article:hover small, .case-metrics article:focus-visible small { opacity: 1; transform: none; }
.case-pillars { display: grid; grid-template-columns: 1fr 1fr; gap: 60px 35px; }
.case-pillars article { padding-top: 18px; border-top: 1px solid var(--line); }
.case-pillars article > span { color: var(--coral); font-size: .75rem; }
.case-pillars h3 { margin: 30px 0 14px; color: var(--navy); font-family: var(--display); font-size: 34px; font-weight: 500; letter-spacing: -.04em; }
.case-pillars p { max-width: 450px; margin: 0; color: var(--muted); }
.case-gallery { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; padding-top: 0; padding-bottom: clamp(100px, 13vw, 180px); }
.case-gallery figure { margin: 0; }
.case-gallery figure:first-child { grid-row: span 2; }
.case-gallery img { width: 100%; height: 100%; min-height: 520px; object-fit: cover; }
.case-gallery figure:first-child img { min-height: 1064px; }
.case-gallery figcaption { padding: 12px 0; color: var(--muted); font-size: 12px; }
.activation-showcase { display: grid; grid-template-columns: .72fr 1.28fr; gap: clamp(45px, 7vw, 110px); min-height: 900px; padding-top: clamp(100px, 12vw, 170px); padding-bottom: clamp(100px, 12vw, 170px); background: var(--navy-deep); color: white; }
.activation-showcase-copy { align-self: center; }
.activation-showcase-copy h2 { max-width: 600px; margin: 26px 0; font-family: var(--display); font-size: clamp(46px, 5.4vw, 82px); font-weight: 500; letter-spacing: -.055em; line-height: .98; }
.activation-showcase-copy > p:not(.case-label) { max-width: 540px; color: rgba(255,255,255,.62); }
.activation-tabs { margin-top: 58px; border-top: 1px solid rgba(255,255,255,.2); }
.activation-tabs button { display: grid; grid-template-columns: 35px 1fr; width: 100%; padding: 19px 0; border: 0; border-bottom: 1px solid rgba(255,255,255,.2); background: none; color: white; text-align: left; cursor: pointer; }
.activation-tabs button > span { grid-row: span 2; color: var(--coral); font-size: .75rem; }
.activation-tabs strong { font-family: var(--display); font-size: 20px; font-weight: 500; transition: color .25s ease, transform .25s ease; }
.activation-tabs small { margin-top: 3px; color: rgba(255,255,255,.45); font-size: .75rem; }
.activation-tabs button:hover strong, .activation-tabs button:focus-visible strong, .activation-tabs button[aria-selected="true"] strong { color: var(--coral); transform: translateX(7px); }
.activation-gallery-stage { position: relative; align-self: center; min-height: 720px; }
.gallery-panel { position: absolute; inset: 0; display: grid; grid-template-columns: 1fr; grid-template-rows: 1fr auto; animation: panel-in .55s cubic-bezier(.2,.7,.2,1) both; }
.gallery-panel[hidden] { display: none; }
.gallery-panel img { object-fit: cover; }
.gallery-main { width: 88%; height: 100%; min-height: 650px; filter: saturate(.84) contrast(1.03); }
.gallery-detail { position: absolute; right: 0; bottom: 54px; width: 37%; height: 47%; border: 8px solid var(--navy-deep); box-shadow: -18px 22px 45px rgba(0,0,0,.24); }
.gallery-panel p { display: flex; justify-content: space-between; margin: 15px 0 0; color: rgba(255,255,255,.62); font-size: .75rem; letter-spacing: .08em; text-transform: uppercase; }
@keyframes panel-in { from { opacity: 0; transform: translateY(12px) scale(.992); } to { opacity: 1; transform: none; } }
.case-next-step { background: var(--cream); width: 100%; }
.case-next-step > div { max-width: 1000px; }
.case-note { margin-top: 48px; padding: 22px; border-left: 3px solid var(--coral); background: rgba(255,255,255,.55); color: var(--muted); font-size: 14px !important; }
.case-nav { display: grid; grid-template-columns: 1fr 1fr; padding-top: 0; padding-bottom: 0; background: var(--navy); color: white; }
.case-nav a { display: flex; flex-direction: column; gap: 35px; min-height: 300px; padding: 50px 0; border-right: 1px solid rgba(255,255,255,.2); }
.case-nav a:last-child { padding-left: 50px; border-right: 0; }
.case-nav span { color: rgba(255,255,255,.55); font-size: 12px; }
.case-nav strong { margin-top: auto; font-family: var(--display); font-size: clamp(32px, 4vw, 60px); font-weight: 500; letter-spacing: -.045em; }

@media (max-width: 900px) {
  .case-summary { grid-template-columns: 1fr; gap: 45px; margin-top: 60px; }
  .case-metrics { grid-template-columns: 1fr 1fr; }
  .case-metrics article:nth-child(2) { border-right: 0; }
  .case-metrics article:nth-child(-n+2) { border-bottom: 1px solid rgba(255,255,255,.2); }
  .activation-showcase { grid-template-columns: 1fr; min-height: 0; }
  .activation-gallery-stage { min-height: 760px; }
}
@media (max-width: 760px) {
  .case-header .brand span { display: none; }
  .case-hero { min-height: auto; }
  .case-kicker { grid-template-columns: 34px 1fr; }.case-kicker span:last-child { grid-column: 2; }
  .case-hero h1 { font-size: clamp(56px, 17vw, 82px); }
  .case-summary { width: 100%; }
  .case-cover { height: 120vw; }
  .case-section { grid-template-columns: 1fr; gap: 30px; }
  .case-metrics { grid-template-columns: 1fr; }
  .case-metrics article { min-height: 220px; border-right: 0; border-bottom: 1px solid rgba(255,255,255,.2); }
  .case-metrics small { position: relative; left: auto; right: auto; bottom: auto; display: block; margin-top: 12px; color: rgba(255,255,255,.52); opacity: 1; transform: none; }
  .case-metrics article:hover span, .case-metrics article:focus-visible span { transform: none; }
  .case-pillars { grid-template-columns: 1fr; }
  .case-gallery { grid-template-columns: 1fr; }
  .case-gallery figure:first-child { grid-row: auto; }
  .case-gallery img, .case-gallery figure:first-child img { min-height: 0; aspect-ratio: 3/4; }
  .activation-gallery-stage { min-height: 610px; }
  .gallery-main { width: 100%; min-height: 540px; }
  .gallery-detail { right: -8px; bottom: 55px; width: 43%; height: 40%; border-width: 5px; }
  .gallery-panel p { gap: 18px; }
  .case-nav { grid-template-columns: 1fr; }
  .case-nav a { min-height: 220px; border-right: 0; border-bottom: 1px solid rgba(255,255,255,.2); }
  .case-nav a:last-child { padding-left: 0; }
}

/* Review: show the context behind metrics without a hover requirement. */
.case-close, .case-summary dl div { font-size: .875rem; }
.case-metrics article { min-height: 320px; padding: 35px 28px; }
.case-metrics article > span { font-size: .875rem; margin-top: 24px; }
.case-metrics article > small { position: relative; display: block; left: auto; right: auto; bottom: auto; margin-top: 16px; opacity: 1; transform: none; color: #c6d1dc; font-size: .875rem; }
.case-metrics article:hover > span, .case-metrics article:focus-visible > span { transform: none; }
.case-metrics article:hover > small, .case-metrics article:focus-visible > small { color: var(--navy-deep); }
.evidence-photo-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; padding-bottom: 90px; }
.evidence-photo-pair figure { margin: 0; min-width: 0; }.evidence-photo-pair img { width: 100%; height: auto; }
.evidence-photo-pair figcaption { margin-top: 16px; font-size: .875rem; color: var(--muted); }
@media(max-width:900px) { .evidence-photo-pair { grid-template-columns: 1fr; } }

.case-section .case-label { color: #a6432d; }
.case-metrics strong { font-size: clamp(36px,4.5vw,72px); }
.case-metrics article { overflow-wrap: break-word; }

.activation-gallery-stage { min-height: 0; }
.gallery-panel { position: relative; inset: auto; }
.gallery-main { height: 680px; }
@media(max-width:760px) { .gallery-main { height: auto; min-height: 0; aspect-ratio: 3/4; } }