.case {
  --black: #090908;
  --red: #820d16;
  --red-bright: #bd1d2c;
  --gold: #d5ad70;
  --champagne: #f0d9b2;
  --ivory: #f4efe5;
  --ink: #171310;
  --muted: #91877a;
  --line: rgba(213, 173, 112, 0.28);
  --case-pad: clamp(1.2rem, 4vw, 4.5rem);
  --content: 91rem;
  --section-y: clamp(7rem, 9vw, 10rem);
  color: var(--ivory);
  background: var(--black);
  overflow: clip;
}

.case h1,
.case h2,
.case h3,
.case p { text-wrap: pretty; }

.case h1,
.case h2,
.case h3 { font-family: var(--display); font-weight: 300; }

.overview,
.insight,
.idea,
.strategy,
.experience,
.social,
.contentStrategy {
  padding-left: max(var(--case-pad), calc((100vw - var(--content)) / 2));
  padding-right: max(var(--case-pad), calc((100vw - var(--content)) / 2));
}

.sectionMarker {
  display: flex;
  align-items: center;
  gap: 1rem;
  color: #6f665d;
  font-family: var(--label);
  font-size: .68rem;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.sectionMarker::after { content: ""; width: 4.5rem; height: 1px; background: currentColor; opacity: .45; }
.sectionMarker span { color: var(--red-bright); }
.markerLight { color: rgba(244, 239, 229, .58); }
.markerLight span { color: var(--gold); }

/* Hero */
.hero {
  position: relative;
  min-height: min(88svh, 56rem);
  padding: clamp(7.5rem, 11vh, 9rem) var(--case-pad) clamp(2.5rem, 5vh, 4rem);
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(19rem, .55fr);
  grid-template-rows: auto 1fr auto;
  align-items: end;
  isolation: isolate;
  overflow: hidden;
  background: #0e0d0b;
}

.heroImage { z-index: -3; object-fit: cover; object-position: 57% center; animation: heroArrival 1.8s cubic-bezier(.16, 1, .3, 1) both, heroDrift 18s 1.8s ease-in-out infinite alternate; }
.heroShade { position: absolute; inset: 0; z-index: -2; background: linear-gradient(90deg, rgba(4,3,2,.78) 0%, rgba(4,3,2,.34) 42%, rgba(4,3,2,.06) 70%), linear-gradient(0deg, rgba(4,3,2,.78) 0%, transparent 42%), radial-gradient(circle at 80% 18%, transparent 0 15%, rgba(0,0,0,.2) 70%); }
.hero::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: .16; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.45'/%3E%3C/svg%3E"); mix-blend-mode: soft-light; }

@keyframes heroArrival { from { opacity: 0; transform: scale(1.06); } to { opacity: 1; transform: scale(1.015); } }
@keyframes heroDrift { from { transform: scale(1.015) translate3d(0, 0, 0); } to { transform: scale(1.045) translate3d(-.35%, -.2%, 0); } }

.heroTopline { grid-column: 1 / -1; align-self: start; display: flex; justify-content: space-between; gap: 2rem; padding-top: .8rem; border-top: 1px solid rgba(255,255,255,.35); color: rgba(255,255,255,.72); font-family: var(--label); font-size: .63rem; letter-spacing: .13em; text-transform: uppercase; animation: riseIn 1s .35s both; }
.heroCopy { grid-column: 1 / -1; align-self: end; padding-right: 26%; animation: riseIn 1.15s .42s both; }
.heroCopy > p { margin: 0 0 1.35rem; color: var(--champagne); font-family: var(--label); font-size: clamp(.7rem, .9vw, .82rem); letter-spacing: .12em; text-transform: uppercase; }
.hero h1 { max-width: 17ch; margin: 0; color: var(--ivory); font-size: clamp(3.35rem, 4.7vw, 5.4rem); line-height: .96; letter-spacing: -.055em; }
.hero h1 span { display: block; white-space: nowrap; }
.heroIntro { grid-column: 2; align-self: end; margin: 0 0 .5rem auto; max-width: 30rem; animation: riseIn 1.1s .62s both; }
.heroIntro h2 { margin: 0 0 1rem; color: var(--champagne); font-family: var(--body); font-size: clamp(1.25rem, 1.8vw, 1.8rem); font-weight: 400; letter-spacing: -.035em; }
.heroIntro p { margin: 0; color: rgba(255,255,255,.78); font-size: clamp(.88rem, 1vw, 1rem); line-height: 1.75; }
.scrollCue { position: absolute; right: var(--case-pad); bottom: clamp(1.5rem, 3vw, 2.5rem); display: none; color: rgba(255,255,255,.55); font-family: var(--label); font-size: .65rem; letter-spacing: .12em; text-transform: uppercase; }
.scrollCue i { margin-left: .8rem; color: var(--gold); font-style: normal; }
@keyframes riseIn { from { opacity: 0; transform: translateY(2rem); } to { opacity: 1; transform: none; } }

/* Overview */
.overview { padding-top: var(--section-y); padding-bottom: var(--section-y); color: var(--ink); background: var(--ivory); }
.overviewLead { width: min(53rem, 68%); margin: clamp(4.5rem, 7vw, 7rem) 0 0 auto; font-family: var(--display); font-size: clamp(2rem, 3.25vw, 3.65rem); line-height: 1.08; letter-spacing: -.045em; }
.factList { margin-top: clamp(5rem, 9vw, 9rem); border-top: 1px solid rgba(23,19,16,.25); }
.factList > div { display: grid; grid-template-columns: .42fr 1fr; gap: 2rem; padding: 1.4rem 0; border-bottom: 1px solid rgba(23,19,16,.18); align-items: center; }
.factList span, .roleLine > span { color: #71685f; font-family: var(--label); font-size: .65rem; letter-spacing: .12em; text-transform: uppercase; }
.factList strong { font-family: var(--body); font-size: clamp(1.05rem, 1.25vw, 1.25rem); font-weight: 400; line-height: 1.45; letter-spacing: -.015em; }
.roleLine { display: grid; grid-template-columns: .42fr 1fr; gap: 2rem; margin-top: 2.5rem; align-items: start; }
.roleLine p { margin: 0; font-size: clamp(1rem, 1.3vw, 1.2rem); }
.roleLine i { margin: 0 .7rem; color: var(--red-bright); font-style: normal; }

/* Insight */
.insight { padding-top: var(--section-y); padding-bottom: var(--section-y); color: var(--ink); background: #e9e1d5; }
.insightHeading { display: grid; grid-template-columns: 1.45fr .55fr; gap: clamp(3rem, 7vw, 8rem); align-items: end; }
.insightHeading h2 { max-width: 19ch; margin: clamp(3rem, 5vw, 5rem) 0 0; font-size: clamp(2.9rem, 4.1vw, 4.55rem); line-height: 1.02; letter-spacing: -.05em; }
.insightHeading h2 em { color: var(--red); font-style: normal; }
.insightHeading > p { max-width: 31rem; margin: 0 0 1rem; color: #5f574f; font-size: clamp(.92rem, 1.05vw, 1.02rem); line-height: 1.85; }
.insightCollage { position: relative; width: min(76rem, 92%); min-height: clamp(35rem, 49vw, 44rem); margin: clamp(6rem, 8vw, 8rem) auto 0; }
.insightCollage figure { position: absolute; margin: 0; overflow: hidden; background: #1a1815; }
.insightCollage img { object-fit: cover; transition: transform 1.2s cubic-bezier(.16,1,.3,1), filter .6s ease; }
.insightCollage figure:hover img { transform: scale(1.025); filter: saturate(1.08); }
.insightMain { left: 0; top: 0; width: 62%; aspect-ratio: 1.38; }
.insightDetail { right: 2%; bottom: 0; width: 29%; aspect-ratio: .9; }
.keywordCloud { position: absolute; right: 0; top: 5%; width: 34%; display: flex; flex-wrap: wrap; gap: .65rem; align-content: flex-start; }
.keywordCloud span { padding: .65rem .9rem; border: 1px solid rgba(130,13,22,.32); border-radius: 99rem; color: var(--red); font-family: var(--body); font-size: clamp(.8rem, 1vw, 1rem); }
.keywordCloud span:first-child { padding: .9rem 1.3rem; color: var(--ivory); background: var(--red); font-size: clamp(1.15rem, 1.8vw, 1.8rem); }
.insightQuote { width: min(57rem, 78%); margin: clamp(6rem, 9vw, 9rem) auto 0; color: var(--red); font-family: var(--display); font-size: clamp(2.2rem, 3.6vw, 4rem); line-height: 1.15; letter-spacing: -.045em; text-align: center; }

/* Challenge */
.challenge { position: relative; min-height: 100svh; display: grid; grid-template-columns: 1fr 1fr; isolation: isolate; background: #0d0d0c; }
.challengeImage { position: absolute; inset: 0; z-index: -2; }
.challengeImage img { object-fit: cover; object-position: center; }
.challenge::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(4,4,4,.18), rgba(4,4,4,.88) 60%, rgba(4,4,4,.96)); }
.challengeCopy { grid-column: 2; align-self: center; padding: var(--section-y) var(--case-pad) var(--section-y) clamp(3rem, 8vw, 9rem); }
.challengeCopy h2 { margin: clamp(3rem, 5vw, 5rem) 0 2rem; font-size: clamp(3.15rem, 4.45vw, 5rem); line-height: .96; letter-spacing: -.055em; }
.challengeCopy > p { max-width: 31rem; margin: 0; color: rgba(244,239,229,.68); font-size: clamp(.92rem, 1.05vw, 1.02rem); line-height: 1.85; }
.brandWords { margin-top: clamp(4rem, 7vw, 7rem); border-top: 1px solid var(--line); }
.brandWords span { display: block; padding: 1rem 0; border-bottom: 1px solid var(--line); color: var(--champagne); font-family: var(--label); font-size: .72rem; letter-spacing: .13em; text-transform: uppercase; }

/* Big idea */
.idea { padding-top: var(--section-y); padding-bottom: var(--section-y); color: var(--ink); background: var(--ivory); }
.ideaPrelude { margin: clamp(4rem, 7vw, 7rem) 0 1rem; color: var(--red); font-family: var(--label); font-size: .7rem; letter-spacing: .14em; text-transform: uppercase; }
.idea > div:first-child h2 { max-width: 18ch; margin: 0; font-size: clamp(3.5rem, 5vw, 5.5rem); line-height: .98; letter-spacing: -.055em; }
.idea > div:first-child h2 em { color: var(--red); font-style: normal; }
.ideaGrid { width: min(80rem, 94%); margin: clamp(6rem, 8vw, 8rem) auto 0; display: grid; grid-template-columns: 1.05fr .75fr; gap: clamp(4rem, 8vw, 8rem); align-items: center; }
.ideaGrid figure { position: relative; aspect-ratio: 4 / 3; margin: 0; overflow: hidden; }
.ideaGrid img { object-fit: cover; transition: transform 1.2s cubic-bezier(.16,1,.3,1); }
.ideaGrid figure:hover img { transform: scale(1.025); }
.ideaCopy > p { margin: 0 0 1.25rem; color: #514941; font-size: clamp(.94rem, 1.08vw, 1.04rem); line-height: 1.8; }
.wishNotes { margin-top: 3.5rem; border-top: 1px solid rgba(23,19,16,.24); }
.wishNotes span { display: block; padding: 1rem 0; border-bottom: 1px solid rgba(23,19,16,.24); font-size: .9rem; }
.wishNotes span::before { content: "✦"; margin-right: .75rem; color: var(--red-bright); }

/* Strategy */
.strategy { padding-top: var(--section-y); padding-bottom: var(--section-y); background: radial-gradient(circle at 70% 20%, rgba(130,13,22,.26), transparent 28%), var(--black); }
.strategyHeading, .experienceHeading, .socialHeading, .contentHeading { margin-top: clamp(3.5rem, 6vw, 6rem); display: grid; grid-template-columns: 1.25fr .55fr; gap: clamp(3rem, 7vw, 8rem); align-items: end; }
.strategyHeading h2, .socialHeading h2 { max-width: 18ch; margin: 0; font-size: clamp(2.9rem, 4.1vw, 4.55rem); line-height: 1.02; letter-spacing: -.05em; }
.strategyHeading p, .socialHeading p { max-width: 31rem; margin: 0 0 .5rem; color: rgba(244,239,229,.62); font-size: clamp(.92rem, 1.05vw, 1.02rem); line-height: 1.85; }
.timeline { position: relative; margin-top: clamp(5rem, 10vw, 10rem); display: grid; grid-template-columns: repeat(3, 1fr); }
.timeline::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, var(--red-bright), var(--gold)); transform-origin: left; }
.timelineReveal { min-width: 0; }
.phase { position: relative; min-height: 27rem; padding: 2.5rem clamp(1.1rem, 2.5vw, 2.5rem) 1rem; border-right: 1px solid var(--line); display: flex; flex-direction: column; }
.timelineReveal:first-child .phase { border-left: 1px solid var(--line); }
.phase::before { content: ""; position: absolute; top: -.38rem; left: 2.4rem; width: .7rem; height: .7rem; border-radius: 50%; background: var(--gold); box-shadow: 0 0 1.6rem rgba(213,173,112,.8); }
.phase > div { display: flex; align-items: baseline; gap: 1rem; }
.phase > div strong { color: var(--gold); font-family: var(--display); font-size: clamp(3rem, 4vw, 4.5rem); font-weight: 300; }
.phase > div span { color: var(--red-bright); font-family: var(--label); font-size: .7rem; letter-spacing: .11em; text-transform: uppercase; }
.phase h3 { margin: auto 0 1.5rem; color: var(--champagne); font-size: clamp(2.2rem, 3vw, 3.3rem); letter-spacing: -.05em; }
.phase p { max-width: 24rem; margin: 0; color: rgba(244,239,229,.67); font-size: .95rem; line-height: 1.65; }
.phase ul { margin: 2.2rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem; list-style: none; }
.phase li { color: var(--gold); font-family: var(--label); font-size: .6rem; letter-spacing: .07em; text-transform: uppercase; }
.phase li:not(:last-child)::after { content: " /"; margin-left: .5rem; opacity: .45; }

/* Experience */
.experience { padding-top: var(--section-y); padding-bottom: var(--section-y); color: var(--ink); background: #eee7dc; }
.experienceHeading h2, .contentHeading h2 { max-width: 18ch; margin: 0; font-size: clamp(2.9rem, 4.1vw, 4.55rem); line-height: 1.02; letter-spacing: -.05em; }
.experienceHeading p, .contentHeading p { max-width: 31rem; margin: 0 0 .5rem; color: #655d54; font-size: clamp(.92rem, 1.05vw, 1.02rem); line-height: 1.85; }
.dreamList { width: min(78rem, 94%); margin: clamp(7rem, 10vw, 10rem) auto 0; }
.dream { display: grid; grid-template-columns: .92fr 1.08fr; gap: clamp(3rem, 7vw, 7rem); align-items: center; margin-bottom: clamp(8rem, 11vw, 11rem); }
.dream:nth-child(even) { grid-template-columns: 1.08fr .92fr; }
.dream:nth-child(even) .dreamMedia { grid-column: 2; }
.dream:nth-child(even) .dreamCopy { grid-column: 1; grid-row: 1; padding: 2rem 0; }
.dreamMedia { position: relative; aspect-ratio: 4 / 3; overflow: hidden; }
.dreamMedia img { object-fit: cover; transition: transform 1.2s cubic-bezier(.16,1,.3,1), filter .6s ease; }
.dream:hover .dreamMedia img { transform: scale(1.025); filter: saturate(1.06); }
.dreamCopy { padding: 2rem 0; }
.dreamCopy > div { display: flex; gap: 1.2rem; align-items: baseline; }
.dreamCopy > div span { color: var(--red); font-family: var(--display); font-size: 2rem; }
.dreamCopy small { color: #71685f; font-family: var(--label); font-size: .62rem; letter-spacing: .12em; text-transform: uppercase; }
.dreamCopy h3 { margin: clamp(2.5rem, 4vw, 4rem) 0 1.5rem; font-size: clamp(2.25rem, 3.25vw, 3.65rem); line-height: 1.02; letter-spacing: -.05em; }
.dreamCopy h3 span { display: block; }
.dreamCopy p { max-width: 31rem; margin: 0 0 2rem; color: #5a5149; font-size: .96rem; line-height: 1.85; }
.dreamCopy > small { color: var(--red); }

/* Social */
.social { padding-top: var(--section-y); padding-bottom: var(--section-y); background: radial-gradient(circle at 18% 56%, rgba(130,13,22,.3), transparent 25%), #080808; }
.socialCanvas { width: min(76rem, 94%); margin: clamp(4.5rem, 7vw, 7rem) auto 0; display: grid; grid-template-columns: .62fr 1.38fr; gap: clamp(3rem, 7vw, 7rem); align-items: center; }
.phone { position: relative; width: min(19.5rem, 88vw); margin: 0 auto; padding: .6rem; border: 1px solid rgba(240,217,178,.6); border-radius: 3rem; color: #f7efe5; background: #030303; box-shadow: 0 2rem 6rem rgba(130,13,22,.28), inset 0 0 0 .25rem #171717; overflow: hidden; }
.phone::after { content: ""; position: absolute; inset: .65rem; border: 1px solid rgba(255,255,255,.08); border-radius: 2.7rem; pointer-events: none; }
.phoneBar { height: 2.5rem; padding: .75rem 1.1rem 0; display: flex; justify-content: space-between; font-size: .65rem; }
.phoneBar i { width: 3rem; height: .25rem; border-radius: 1rem; background: rgba(255,255,255,.8); }
.phoneHero { position: relative; height: 12rem; margin: 0 .15rem; border-radius: 1.7rem 1.7rem .4rem .4rem; overflow: hidden; }
.phoneHero img { object-fit: cover; }
.phoneHero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(0,0,0,.78), transparent 55%); }
.phoneHero > div { position: absolute; z-index: 1; left: 1rem; bottom: 1rem; display: flex; flex-direction: column; }
.phoneHero small { color: var(--gold); font-family: var(--label); font-size: .48rem; text-transform: uppercase; }
.phoneHero strong { margin-top: .25rem; font-family: var(--display); font-size: 1.7rem; font-weight: 300; }
.topicTitle { padding: 1rem .8rem .5rem; display: flex; gap: .45rem; align-items: center; }
.topicTitle span { color: var(--gold); }
.topicTitle strong { font-size: .9rem; }
.topicTitle small { padding: .2rem .35rem; border-radius: 99rem; background: var(--red); font-size: .45rem; }
.topicBrand { padding: .4rem .8rem .85rem; border-bottom: 1px solid rgba(255,255,255,.12); display: flex; justify-content: space-between; font-size: .62rem; }
.topicBrand i { padding: .25rem .55rem; border: 1px solid rgba(255,255,255,.35); border-radius: 99rem; color: inherit; font: inherit; font-style: normal; }
.topicFeature { margin: .8rem; padding: .75rem; border: 1px solid var(--line); color: var(--champagne); font-size: .65rem; }
.topicFeature span { float: right; }
.noteGrid { margin: .8rem; display: grid; grid-template-columns: 1fr 1fr; gap: .35rem; }
.noteGrid div { position: relative; aspect-ratio: .92; overflow: hidden; }
.noteGrid img { object-fit: cover; }
.phoneCta { margin: .8rem; padding: .85rem .7rem; border: 1px solid var(--gold); border-radius: 99rem; text-align: center; color: var(--champagne); background: radial-gradient(circle at 90%, rgba(213,173,112,.25), transparent 28%), linear-gradient(90deg, #6d0810, #a81722); box-shadow: 0 0 1.5rem rgba(189,29,44,.4); font-size: .66rem; }
.phoneCta span { margin-left: .35rem; }
.socialDetails { min-width: 0; }
.featureList { border-top: 1px solid var(--line); }
.featureList > div { display: grid; grid-template-columns: 3rem .55fr 1fr; gap: 1.2rem; padding: 1.35rem 0; border-bottom: 1px solid var(--line); align-items: baseline; }
.featureList span { color: var(--gold); font-family: var(--display); font-size: 1.3rem; }
.featureList h3 { margin: 0; color: var(--champagne); font-size: clamp(1.4rem, 2vw, 2rem); }
.featureList p { margin: 0; color: rgba(244,239,229,.6); font-size: .88rem; }
.uiDetail { width: 100%; margin-top: 2rem; padding: 1.25rem; border: 1px solid var(--line); background: rgba(18,13,11,.8); backdrop-filter: blur(12px); }
.uiDetail > p { margin: 0 0 1.3rem; color: var(--gold); font-family: var(--label); font-size: .6rem; letter-spacing: .1em; text-transform: uppercase; }
.uiDetail > div { padding: .85rem 1rem; border: 1px solid var(--gold); border-radius: 99rem; color: var(--champagne); background: linear-gradient(90deg, #6d0810, #ae1723); box-shadow: 0 0 1.4rem rgba(189,29,44,.28); text-align: center; font-size: .75rem; }
.uiDetail i { float: right; color: var(--gold); font-style: normal; }
.uiDetail small { display: block; margin-top: .8rem; color: rgba(255,255,255,.35); font-family: var(--label); font-size: .55rem; text-align: center; text-transform: uppercase; }

/* Content matrix */
.contentStrategy { padding-top: var(--section-y); padding-bottom: var(--section-y); color: var(--ink); background: var(--ivory); }
.creatorMatrix { margin-top: clamp(4.5rem, 7vw, 7rem); display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(2rem, 4vw, 4rem); align-items: start; }
.matrixCore { grid-column: 1 / -1; width: 100%; padding: 1.5rem 0 2.5rem; border-top: 1px solid rgba(23,19,16,.25); border-bottom: 1px solid rgba(23,19,16,.25); display: flex; align-items: baseline; justify-content: space-between; text-align: left; }
.matrixCore span { color: var(--red); font-family: var(--label); font-size: .62rem; letter-spacing: .1em; text-transform: uppercase; }
.matrixCore strong { font-family: var(--display); font-size: clamp(1.7rem, 2.3vw, 2.4rem); font-weight: 300; }
.creatorMatrix article { min-height: 0; padding: 1.5rem 0; }
.creatorMatrix article > span { color: var(--red); font-family: var(--label); font-size: .63rem; letter-spacing: .1em; text-transform: uppercase; }
.creatorMatrix h3 { margin: 2rem 0 1rem; font-size: clamp(1.8rem, 2.5vw, 2.7rem); letter-spacing: -.045em; }
.creatorMatrix p { max-width: 22rem; margin: 0; color: #655d54; line-height: 1.65; }

/* Impact */
.impact { position: relative; min-height: min(90svh, 58rem); padding: var(--section-y) max(var(--case-pad), calc((100vw - var(--content)) / 2)); display: flex; align-items: center; isolation: isolate; }
.impactImage, .impactShade { position: absolute; inset: 0; z-index: -2; }
.impactImage img { object-fit: cover; object-position: center; }
.impactShade { z-index: -1; background: linear-gradient(90deg, rgba(4,4,4,.94) 0%, rgba(4,4,4,.74) 48%, rgba(4,4,4,.12) 78%), linear-gradient(0deg, rgba(4,4,4,.5), transparent); }
.impactReveal { width: min(67rem, 80%); }
.impactFormula { margin: clamp(4rem, 8vw, 8rem) 0 2.5rem; display: flex; flex-wrap: wrap; gap: .7rem 1.2rem; align-items: center; color: var(--champagne); font-family: var(--label); font-size: clamp(.72rem, 1vw, .9rem); letter-spacing: .1em; text-transform: uppercase; }
.impactFormula i { color: var(--red-bright); font-family: var(--display); font-size: 2rem; font-style: normal; }
.impact h2 { max-width: 16ch; margin: 0; font-size: clamp(2.9rem, 4.1vw, 4.55rem); line-height: 1.02; letter-spacing: -.05em; }
.impact ul { width: min(38rem, 80%); margin: clamp(4rem, 7vw, 7rem) 0 0; padding: 0; border-top: 1px solid var(--line); list-style: none; }
.impact li { padding: 1rem 0; border-bottom: 1px solid var(--line); color: rgba(244,239,229,.7); }
.impact li::before { content: "✦"; margin-right: 1rem; color: var(--gold); }

@media (max-width: 900px) {
  .hero { grid-template-columns: 1fr; grid-template-rows: auto 1fr auto; min-height: min(88svh, 50rem); }
  .heroTopline { grid-column: 1; }
  .heroCopy { grid-column: 1; padding-right: 0; }
  .hero h1 { max-width: 14ch; }
  .hero h1 span { white-space: normal; }
  .heroIntro { grid-column: 1; width: min(31rem, 82%); margin: 3rem 0 0; }
  .overviewLead { width: 86%; }
  .insightHeading, .strategyHeading, .experienceHeading, .socialHeading, .contentHeading { grid-template-columns: 1fr; }
  .insightHeading > p, .strategyHeading p, .experienceHeading p, .socialHeading p, .contentHeading p { max-width: 34rem; margin-left: auto; }
  .challenge { grid-template-columns: .42fr 1fr; }
  .challengeCopy { grid-column: 2; padding-left: 2rem; }
  .ideaGrid { grid-template-columns: 1fr; }
  .ideaCopy { width: 72%; margin-left: auto; }
  .timeline { grid-template-columns: 1fr; }
  .timeline::before { left: 0; top: 0; bottom: 0; width: 1px; height: auto; }
  .phase { min-height: 22rem; border: 0; border-bottom: 1px solid var(--line); padding-left: 2rem; }
  .timelineReveal:first-child .phase { border-left: 0; }
  .phase::before { top: 2.8rem; left: -.34rem; }
  .socialCanvas { grid-template-columns: .72fr 1.28fr; gap: 2.5rem; }
  .uiDetail { margin-top: 1.5rem; }
  .creatorMatrix { min-height: 0; }
}

@media (max-width: 680px) {
  .hero { min-height: 47rem; padding-top: 7rem; padding-bottom: 2.5rem; }
  .heroImage { object-position: 65% center; }
  .heroShade { background: linear-gradient(0deg, rgba(4,3,2,.9), rgba(4,3,2,.1) 72%), linear-gradient(90deg, rgba(4,3,2,.55), transparent); }
  .heroTopline span:last-child { display: none; }
  .hero h1 { max-width: none; font-size: clamp(1.95rem, 8.8vw, 2.25rem); line-height: 1.08; }
  .hero h1 span { white-space: nowrap; }
  .heroIntro { width: 100%; }
  .overviewLead { width: 100%; }
  .factList > div, .roleLine { grid-template-columns: 1fr; gap: .65rem; }
  .roleLine i { display: block; height: 0; overflow: hidden; }
  .roleLine p { display: grid; gap: .5rem; }
  .insightHeading h2 { max-width: 16ch; font-size: clamp(2.3rem, 9.6vw, 3rem); line-height: 1.07; }
  .insightCollage { width: 100%; min-height: 34rem; }
  .insightMain { width: 88%; aspect-ratio: 4 / 3; }
  .insightDetail { width: 43%; }
  .keywordCloud { top: auto; right: auto; left: .75rem; bottom: .75rem; z-index: 2; width: 48%; }
  .keywordCloud span { color: var(--champagne); border-color: rgba(240,217,178,.5); background: rgba(4,4,4,.72); backdrop-filter: blur(8px); }
  .keywordCloud span:nth-child(n+5) { display: none; }
  .keywordCloud span:first-child { background: var(--red); }
  .insightQuote { width: 100%; }
  .challenge { min-height: 100svh; grid-template-columns: 1fr; align-items: end; }
  .challenge::after { background: linear-gradient(0deg, rgba(4,4,4,.98), rgba(4,4,4,.2) 74%); }
  .challengeImage img { object-position: 43% top; }
  .challengeCopy { grid-column: 1; padding: 11rem var(--case-pad) 4rem; }
  .challengeCopy h2 { font-size: clamp(2.45rem, 10.2vw, 3.15rem); line-height: 1.03; }
  .brandWords { margin-top: 3rem; }
  .idea > div:first-child h2 { max-width: 15ch; font-size: clamp(2.6rem, 10.5vw, 3.35rem); line-height: 1.04; }
  .idea > div:first-child h2 em { margin-left: 0; }
  .ideaGrid { width: 100%; }
  .ideaGrid figure { aspect-ratio: 4 / 3; }
  .ideaCopy { width: 100%; }
  .strategyHeading h2, .socialHeading h2, .experienceHeading h2, .contentHeading h2 { max-width: 16ch; font-size: clamp(2.3rem, 9.6vw, 3rem); line-height: 1.07; }
  .dreamList { width: 100%; }
  .dream, .dream:nth-child(even) { display: flex; flex-direction: column; margin-bottom: 6rem; }
  .dreamMedia { width: 92%; aspect-ratio: 4 / 3; align-self: flex-start; }
  .dream:nth-child(even) .dreamMedia { align-self: flex-end; }
  .dream:nth-child(even) .dreamMedia { order: 0; }
  .dreamCopy, .dream:nth-child(even) .dreamCopy { order: 1; padding: 2rem 0 0; }
  .dreamCopy h3 { font-size: clamp(2.25rem, 9vw, 3rem); line-height: 1.06; }
  .socialCanvas { display: flex; flex-direction: column; min-height: 0; }
  .phone { order: 0; }
  .socialDetails { order: 1; width: 100%; }
  .featureList { width: 100%; }
  .featureList > div { grid-template-columns: 2rem 1fr; }
  .featureList p { grid-column: 2; }
  .uiDetail { width: 100%; margin-top: 1.5rem; }
  .creatorMatrix { min-height: 0; display: block; padding-top: 0; }
  .matrixCore { width: 100%; padding: 1.25rem 0 1.75rem; display: block; }
  .matrixCore strong { display: block; margin-top: .7rem; font-size: 1.55rem; line-height: 1.25; }
  .creatorMatrix article { min-height: 0; padding: 2rem 0; border-bottom: 1px solid rgba(23,19,16,.18); }
  .creatorMatrix article:nth-of-type(2) { transform: none; }
  .impact { min-height: 54rem; align-items: end; }
  .impactShade { background: linear-gradient(0deg, rgba(4,4,4,.98), rgba(4,4,4,.1) 82%); }
  .impactImage img { object-position: 35% top; }
  .impactReveal { width: 100%; }
  .impact h2 { max-width: 15ch; font-size: clamp(2.3rem, 9.6vw, 3rem); line-height: 1.07; }
  .impact ul { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .heroImage { animation: none; }
  .heroTopline, .heroCopy, .heroIntro { animation: none; }
  .insightCollage img, .ideaGrid img, .dreamMedia img { transition: none; }
  .insightCollage figure:hover img, .ideaGrid figure:hover img, .dream:hover .dreamMedia img { transform: none; }
}