@font-face { font-family: "Manrope"; src: url("./assets/fonts/manrope.woff2") format("woff2"); font-style: normal; font-weight: 400 700; font-display: swap; }
@font-face { font-family: "Newsreader"; src: url("./assets/fonts/newsreader.woff2") format("woff2"); font-style: normal; font-weight: 400 500; font-display: swap; }
@font-face { font-family: "DM Mono"; src: url("./assets/fonts/dm-mono.woff2") format("woff2"); font-style: normal; font-weight: 400 500; font-display: swap; }

:root {
  --ink: #120f13;
  --ink-soft: #1c171e;
  --paper: #f1eee7;
  --white: #fffaf3;
  --muted: #65605f;
  --line: #cec8c0;
  --magenta: #ff477e;
  --orange: #ff9a57;
  --violet: #a475ff;
  --yellow: #ffdc72;
  --sans: "Manrope", Arial, sans-serif;
  --serif: "Newsreader", Georgia, serif;
  --mono: "DM Mono", monospace;
  --gutter: clamp(20px, 5vw, 76px);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 80px; }
body { margin: 0; color: var(--ink); background: var(--paper); font: 400 16px/1.55 var(--sans); -webkit-font-smoothing: antialiased; }
body.menu-open { overflow: hidden; }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
button { color: inherit; font: inherit; }

.skip-link { position: fixed; top: 8px; left: 8px; z-index: 200; padding: 10px 14px; color: var(--ink); background: var(--orange); transform: translateY(-150%); transition: transform 180ms ease; }
.skip-link:focus { transform: translateY(0); }

.site-header { position: absolute; inset: 0 0 auto; z-index: 50; display: flex; align-items: center; justify-content: space-between; min-height: 82px; padding: 0 var(--gutter); color: var(--white); border-bottom: 1px solid rgba(255,255,255,.12); }
.brand { display: flex; align-items: center; gap: 13px; width: max-content; }
.brand img { width: 129px; }
.brand > span { width: 1px; height: 19px; background: rgba(255,255,255,.28); }
.brand b { font: 9px var(--mono); letter-spacing: .13em; }
.site-header nav { display: flex; align-items: center; gap: 30px; color: rgba(255,255,255,.64); font-size: 11px; font-weight: 600; }
.site-header nav a:hover { color: #fff; }
.nav-cta { display: inline-flex; gap: 25px; align-items: center; padding: 12px 17px; color: var(--ink); background: var(--orange); border-radius: 999px; }
.menu-toggle { display: none; }

.hero { position: relative; overflow: hidden; min-height: 880px; padding: 120px var(--gutter) 0; color: var(--white); background: var(--ink); }
.hero::before { content: ""; position: absolute; width: 650px; height: 650px; right: -100px; top: 20px; border-radius: 50%; background: radial-gradient(circle at 35% 28%, rgba(255,220,114,.32), rgba(255,71,126,.2) 33%, rgba(164,117,255,.1) 57%, transparent 69%); filter: blur(8px); }
.hero::after { content: ""; position: absolute; inset: 0; opacity: .12; pointer-events: none; background-image: linear-gradient(rgba(255,255,255,.13) 1px, transparent 1px), linear-gradient(90deg,rgba(255,255,255,.13) 1px, transparent 1px); background-size: 68px 68px; mask-image: linear-gradient(90deg, transparent, #000 55%); }
.hero-meta { position: relative; z-index: 3; display: flex; justify-content: space-between; color: rgba(255,255,255,.36); font: 8px var(--mono); letter-spacing: .1em; }
.hero-grid { position: relative; z-index: 3; display: grid; grid-template-columns: .88fr 1.12fr; align-items: center; gap: clamp(45px,7vw,110px); min-height: 690px; }
.eyebrow { display: flex; align-items: center; gap: 11px; margin: 0 0 25px; color: rgba(255,255,255,.53); font: 9px var(--mono); letter-spacing: .12em; text-transform: uppercase; }
.eyebrow > span { width: 23px; height: 1px; background: var(--magenta); }
.eyebrow.dark { color: #625957; }
.hero h1,
.statement h2,
.section-heading h2,
.approach h2,
.campaign h2,
.standards h2,
.contact h2 { margin: 0; font-size: clamp(65px,7.8vw,116px); line-height: .86; letter-spacing: -.07em; }
.hero h1 em,
.statement h2 em,
.section-heading h2 em,
.approach h2 em,
.campaign h2 em,
.standards h2 em,
.contact h2 em { font-family: var(--serif); font-weight: 400; letter-spacing: -.035em; }
.hero h1 em { color: var(--orange); }
.hero-copy > p:not(.eyebrow) { max-width: 570px; margin: 30px 0 0; color: rgba(255,255,255,.66); font-size: 14px; line-height: 1.85; }
.hero-actions { display: flex; align-items: center; gap: 27px; margin-top: 35px; }
.button { display: inline-flex; align-items: center; justify-content: space-between; gap: 28px; min-height: 52px; padding: 0 20px; font-size: 11px; font-weight: 700; }
.warm { color: var(--ink); background: var(--orange); }
.text-link { display: inline-flex; align-items: center; gap: 17px; padding-bottom: 6px; border-bottom: 1px solid rgba(255,255,255,.28); color: rgba(255,255,255,.7); font-size: 11px; font-weight: 700; }
.text-link span { color: var(--orange); }

.studio { overflow: hidden; border: 1px solid rgba(255,255,255,.18); background: #19141b; box-shadow: 0 50px 100px #0008; }
.studio-top,
.studio-bottom { display: flex; align-items: center; justify-content: space-between; min-height: 42px; padding: 0 14px; color: rgba(255,255,255,.4); border-bottom: 1px solid rgba(255,255,255,.12); font: 7px var(--mono); letter-spacing: .1em; }
.studio-top i { display: inline-block; width: 5px; height: 5px; margin-right: 7px; border-radius: 50%; background: var(--orange); box-shadow: 0 0 9px var(--orange); }
.studio-tabs { display: grid; grid-template-columns: repeat(3,1fr); border-bottom: 1px solid rgba(255,255,255,.12); }
.studio-tabs button { min-height: 45px; border: 0; border-right: 1px solid rgba(255,255,255,.1); color: rgba(255,255,255,.47); background: transparent; font-size: 9px; cursor: pointer; }
.studio-tabs button:last-child { border-right: 0; }
.studio-tabs button[aria-selected="true"] { color: var(--ink); background: var(--orange); }
.studio-tabs button:focus-visible { outline: 2px solid var(--yellow); outline-offset: -3px; }
.studio-stage { position: relative; min-height: 470px; background: #241a25; }
.media-visual { position: absolute; inset: 0 0 78px; display: none; overflow: hidden; }
[data-active-mode="photo"] [data-visual="photo"],
[data-active-mode="video"] [data-visual="video"],
[data-active-mode="audio"] [data-visual="audio"] { display: block; }
.photo-visual { background: linear-gradient(160deg,#f3c97b 0%,#dd735c 34%,#603c82 72%,#251f48); }
.photo-sun { position: absolute; width: 175px; height: 175px; top: 55px; right: 17%; border-radius: 50%; background: #ffedaa; box-shadow: 0 0 60px rgba(255,237,170,.55); }
.photo-land { position: absolute; right: -12%; left: -10%; bottom: -10%; height: 61%; border-radius: 50% 50% 0 0; transform: rotate(-7deg); }
.land-back { background: #9a4f76; clip-path: polygon(0 68%,23% 18%,41% 57%,60% 12%,100% 61%,100% 100%,0 100%); }
.land-front { bottom: -26%; height: 74%; background: #251d35; clip-path: polygon(0 54%,24% 17%,47% 51%,74% 5%,100% 57%,100% 100%,0 100%); }
.photo-visual > span { position: absolute; left: 16px; bottom: 15px; color: rgba(255,255,255,.64); font: 7px var(--mono); letter-spacing: .09em; }
.video-visual { background: radial-gradient(circle at 50% 45%,#6d265a,#221526 56%,#100d12); }
.video-orb { position: absolute; width: 230px; height: 230px; top: 49%; left: 50%; border: 1px solid rgba(255,154,87,.7); border-radius: 50%; transform: translate(-50%,-50%); box-shadow: 0 0 0 50px rgba(255,71,126,.07),0 0 0 105px rgba(164,117,255,.04); }
.video-frame { position: absolute; inset: 14% 23% 26%; border: 1px solid rgba(255,255,255,.33); }
.frame-a { transform: rotate(-8deg); }
.frame-b { transform: rotate(9deg); }
.play { position: absolute; top: 44%; left: 50%; display: grid; place-items: center; width: 62px; height: 62px; padding-left: 4px; color: var(--ink); background: var(--orange); border-radius: 50%; transform: translate(-50%,-50%); }
.timeline { position: absolute; right: 7%; bottom: 7%; left: 7%; display: flex; align-items: center; gap: 5px; height: 42px; padding: 0 10px; border: 1px solid rgba(255,255,255,.22); background: rgba(10,8,11,.68); }
.timeline i { flex: 1; height: 18px; background: rgba(255,255,255,.15); }
.timeline i:nth-child(2) { background: var(--magenta); }
.timeline i:nth-child(3) { flex: 1.4; background: var(--violet); }
.timeline b { position: absolute; left: 57%; width: 1px; height: 48px; background: var(--yellow); }
.audio-visual { background: linear-gradient(140deg,#25122b,#101a1e); }
.album-mark { position: absolute; top: 15%; left: 9%; display: grid; place-items: center; width: 155px; height: 155px; color: var(--white); border: 1px solid rgba(255,255,255,.32); background: radial-gradient(circle at 28% 24%,#ff9a57,#ff477e 43%,#7544b8 75%); font-size: 25px; font-weight: 800; line-height: .82; letter-spacing: -.06em; }
.album-mark em { font-family: var(--serif); font-weight: 400; }
.waveform { position: absolute; top: 28%; right: 8%; left: 42%; display: flex; align-items: center; gap: 7px; height: 110px; }
.waveform i { flex: 1; height: 18%; background: var(--orange); border-radius: 4px; }
.waveform i:nth-child(2n) { height: 72%; background: var(--magenta); }
.waveform i:nth-child(3n) { height: 100%; background: var(--violet); }
.timecode { position: absolute; right: 8%; bottom: 18%; color: rgba(255,255,255,.55); font: 8px var(--mono); }
.studio-caption { position: absolute; right: 0; bottom: 0; left: 0; display: flex; align-items: center; justify-content: space-between; gap: 20px; min-height: 78px; padding: 0 18px; color: var(--white); background: #171218; }
.studio-caption span { color: var(--orange); font: 7px var(--mono); }
.studio-caption strong { max-width: 330px; font-size: 13px; text-align: right; }
.studio-bottom { min-height: 38px; border-top: 1px solid rgba(255,255,255,.12); border-bottom: 0; }
.studio-bottom i { flex: 1; height: 1px; margin: 0 10px; background: rgba(255,255,255,.1); }
.hero-strip { position: absolute; right: 0; bottom: 0; left: 0; z-index: 4; display: flex; align-items: center; justify-content: center; gap: 24px; min-height: 58px; border-top: 1px solid rgba(255,255,255,.12); color: rgba(255,255,255,.46); background: rgba(0,0,0,.13); font: 8px var(--mono); letter-spacing: .1em; }
.hero-strip i { color: var(--orange); font-style: normal; }

.statement { padding: 125px var(--gutter); }
.statement h2 { max-width: 1120px; font-size: clamp(55px,6.5vw,93px); }
.statement h2 em { color: #a84665; }
.statement-note { display: grid; grid-template-columns: 80px 1fr; gap: 25px; max-width: 650px; margin: 52px 4% 0 auto; }
.statement-note span { padding-top: 4px; color: #a84665; font: 8px var(--mono); }
.statement-note p { margin: 0; color: var(--muted); font-size: 14px; line-height: 1.85; }

.media-types { padding: 120px var(--gutter); color: var(--white); background: var(--ink); }
.section-heading { display: grid; grid-template-columns: minmax(0,1fr) 300px; align-items: end; gap: 60px; margin-bottom: 72px; }
.section-heading .eyebrow { grid-column: 1/-1; margin-bottom: -40px; }
.section-heading h2 { font-size: clamp(52px,6vw,86px); }
.section-heading h2 em { color: var(--orange); }
.section-heading > p { margin: 0 0 6px; color: rgba(255,255,255,.54); font-size: 13px; line-height: 1.8; }
.format-list { border-top: 1px solid rgba(255,255,255,.16); }
.format { display: grid; grid-template-columns: 55px minmax(360px,1fr) minmax(300px,.86fr); gap: clamp(25px,5vw,75px); align-items: center; min-height: 400px; padding: 48px 0; border-bottom: 1px solid rgba(255,255,255,.16); }
.format-number { align-self: start; padding-top: 7px; color: var(--orange); font: 9px var(--mono); }
.format-label { margin: 0 0 16px; color: var(--orange); font: 8px var(--mono); letter-spacing: .11em; }
.format h3 { margin: 0; font-size: clamp(37px,4vw,57px); line-height: 1; letter-spacing: -.055em; }
.format > div > p:not(.format-label) { max-width: 580px; margin: 23px 0; color: rgba(255,255,255,.55); font-size: 13px; line-height: 1.8; }
.format ul { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
.format li { padding: 6px 9px; border: 1px solid rgba(255,255,255,.18); border-radius: 30px; color: rgba(255,255,255,.54); font: 7px var(--mono); letter-spacing: .05em; text-transform: uppercase; }
.format-art { position: relative; width: 100%; max-width: 420px; aspect-ratio: 1.4; overflow: hidden; justify-self: end; }
.photo-art { background: linear-gradient(155deg,#f4c579,#d9695d 38%,#4c3069); }
.photo-art i { position: absolute; width: 100px; height: 100px; top: 16%; right: 15%; border-radius: 50%; background: #ffe7a2; }
.photo-art span { position: absolute; inset: 38% -8% -20%; background: #3b254d; clip-path: polygon(0 60%,30% 13%,52% 52%,76% 5%,100% 57%,100% 100%,0 100%); }
.photo-art b { position: absolute; inset: 10%; border: 1px solid rgba(255,255,255,.45); }
.video-art { background: radial-gradient(circle,#753054,#21151f 60%); }
.video-art span { position: absolute; top: 50%; left: 50%; display: grid; place-items: center; width: 60px; height: 60px; padding-left: 4px; color: var(--ink); background: var(--orange); border-radius: 50%; transform: translate(-50%,-50%); }
.video-art i { position: absolute; border: 1px solid rgba(255,255,255,.32); }
.video-art i:nth-of-type(1) { inset: 12% 24%; transform: rotate(-8deg); }
.video-art i:nth-of-type(2) { inset: 18% 17%; transform: rotate(9deg); }
.video-art i:nth-of-type(3) { right: 7%; bottom: 8%; left: 7%; height: 20px; border-color: rgba(255,154,87,.65); }
.audio-art { display: flex; align-items: center; gap: 9px; padding: 0 10%; background: linear-gradient(145deg,#25122b,#112127); }
.audio-art i { flex: 1; height: 20%; border-radius: 4px; background: var(--orange); }
.audio-art i:nth-child(2n) { height: 65%; background: var(--magenta); }
.audio-art i:nth-child(3n) { height: 90%; background: var(--violet); }

.approach { display: grid; grid-template-columns: .8fr 1.2fr; gap: clamp(70px,10vw,160px); padding: 120px var(--gutter); }
.approach-intro { position: sticky; top: 100px; align-self: start; }
.approach h2 { font-size: clamp(49px,5.3vw,78px); }
.approach h2 em { color: #a84665; }
.approach-intro > p:not(.eyebrow) { max-width: 490px; margin: 28px 0 0; color: var(--muted); font-size: 13px; line-height: 1.85; }
.steps { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--line); }
.steps li { min-height: 250px; padding: 27px 0 35px; border-bottom: 1px solid var(--line); }
.steps span { color: #a84665; font: 8px var(--mono); letter-spacing: .1em; }
.steps h3 { margin: 72px 0 12px; font-size: 30px; letter-spacing: -.045em; }
.steps p { max-width: 590px; margin: 0; color: var(--muted); font-size: 13px; line-height: 1.8; }

.campaign { display: grid; grid-template-columns: .9fr 1.1fr; gap: clamp(60px,8vw,120px); align-items: center; padding: 120px var(--gutter); background: #f4d6cf; }
.campaign-art { position: relative; min-height: 530px; }
.campaign-card { position: absolute; overflow: hidden; width: 48%; aspect-ratio: 4/5; border: 1px solid rgba(18,15,19,.25); box-shadow: 0 25px 60px rgba(87,39,52,.16); }
.campaign-card::before { content:""; position:absolute; inset:0; }
.campaign-card span { position: absolute; right: 12px; bottom: 10px; z-index: 2; color: rgba(255,255,255,.7); font: 8px var(--mono); }
.card-one { top: 7%; left: 2%; transform: rotate(-8deg); background: linear-gradient(145deg,#efbb78,#c75d68 48%,#4d315d); }
.card-one::before { clip-path: polygon(0 62%,32% 16%,58% 58%,78% 25%,100% 67%,100% 100%,0 100%); background: #35233f; }
.card-two { top: 15%; right: 2%; transform: rotate(8deg); background: radial-gradient(circle at 56% 42%,#ffb06e 0 14%,#b24470 15% 34%,#321b3b 35%); }
.card-three { width: 42%; right: 29%; bottom: 3%; background: linear-gradient(150deg,#1a2429,#7d3973); transform: rotate(-1deg); }
.card-three::before { background: repeating-linear-gradient(90deg,transparent 0 12px,rgba(255,154,87,.62) 13px 18px,transparent 19px 26px); clip-path: inset(24% 12%); }
.campaign-orbit { position: absolute; inset: 8%; border: 1px solid rgba(18,15,19,.13); border-radius: 50%; }
.campaign h2 { font-size: clamp(52px,5.7vw,83px); }
.campaign h2 em { color: #933755; }
.campaign-copy > p:not(.eyebrow) { max-width: 650px; margin: 30px 0; color: #655657; font-size: 13px; line-height: 1.85; }
.deliverables { display: flex; flex-wrap: wrap; gap: 7px; }
.deliverables span { padding: 7px 11px; border: 1px solid rgba(18,15,19,.25); border-radius: 30px; font: 8px var(--mono); text-transform: uppercase; }

.standards { padding: 120px var(--gutter); color: var(--white); background: var(--ink); }
.standards-heading { display: grid; grid-template-columns: .32fr 1fr; gap: 40px; align-items: start; }
.standards-heading .eyebrow { padding-top: 13px; }
.standards h2 { font-size: clamp(53px,6.3vw,90px); }
.standards h2 em { color: var(--orange); }
.standards-grid { display: grid; grid-template-columns: repeat(4,1fr); margin-top: 83px; border-top: 1px solid rgba(255,255,255,.15); }
.standards-grid article { min-height: 290px; padding: 25px 26px 20px 0; border-right: 1px solid rgba(255,255,255,.15); }
.standards-grid article + article { padding-left: 26px; }
.standards-grid article:last-child { border-right: 0; }
.standards-grid span { color: var(--orange); font: 8px var(--mono); }
.standards-grid h3 { margin: 88px 0 13px; font-size: 23px; letter-spacing: -.04em; }
.standards-grid p { margin: 0; color: rgba(255,255,255,.54); font-size: 12px; line-height: 1.8; }

.contact { padding: 120px var(--gutter); background: var(--orange); }
.contact .eyebrow { color: #5b2b16; }
.contact .eyebrow > span { background: var(--ink); }
.contact h2 { max-width: 1100px; font-size: clamp(60px,7.6vw,112px); }
.contact h2 em { color: #6a2d2e; }
.contact-row { display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: 32px; margin-top: 63px; padding-top: 24px; border-top: 1px solid rgba(18,15,19,.32); }
.contact-row p { max-width: 480px; margin: 0; font-size: 13px; }
.dark-button { color: #fff; background: var(--ink); }
.contact-row > a:last-child { font-size: 11px; border-bottom: 1px solid rgba(18,15,19,.45); }

footer { display: grid; grid-template-columns: 1fr 1fr auto; align-items: center; gap: 35px; padding: 48px var(--gutter) 24px; color: rgba(255,255,255,.58); background: var(--ink); font-size: 10px; }
footer p { margin: 0; text-align: center; font-family: var(--serif); font-size: 16px; }
footer > a:not(.brand) { text-align: right; }
footer small { grid-column: 1/-1; padding-top: 18px; border-top: 1px solid rgba(255,255,255,.12); font: 8px var(--mono); }

[data-reveal] { opacity: 1; transform: none; }
.motion-ready [data-reveal] { opacity: 0; transform: translateY(22px); transition: opacity 650ms ease, transform 650ms cubic-bezier(.2,.75,.25,1); }
.motion-ready [data-reveal].visible { opacity: 1; transform: none; }

@media (max-width: 1050px) {
  .hero { min-height: 1130px; }
  .hero-grid { display: block; padding: 70px 0 95px; }
  .hero-copy { max-width: 800px; }
  .studio { width: min(100%,760px); margin: 65px 0 0 auto; }
  .format { grid-template-columns: 40px minmax(300px,1fr) minmax(250px,.8fr); }
  .standards-grid { grid-template-columns: repeat(2,1fr); border-left: 1px solid rgba(255,255,255,.15); }
  .standards-grid article,
  .standards-grid article + article { padding: 25px; border-bottom: 1px solid rgba(255,255,255,.15); }
}

@media (max-width: 760px) {
  .site-header { min-height: 70px; }
  .brand img { width: 112px; }
  .menu-toggle { display: grid; place-content: center; gap: 6px; width: 43px; height: 43px; padding: 0; border: 1px solid rgba(255,255,255,.25); border-radius: 50%; background: transparent; }
  .menu-toggle span { display: block; width: 17px; height: 1px; background: #fff; transition: transform 180ms ease; }
  .menu-toggle[aria-expanded="true"] span:first-child { transform: translateY(3.5px) rotate(45deg); }
  .menu-toggle[aria-expanded="true"] span:last-child { transform: translateY(-3.5px) rotate(-45deg); }
  .site-header nav { position: fixed; inset: 0; z-index: -1; display: flex; flex-direction: column; align-items: stretch; justify-content: center; gap: 0; padding: 90px var(--gutter) 35px; color: rgba(255,255,255,.65); background: var(--ink); opacity: 0; visibility: hidden; transition: opacity 180ms ease, visibility 180ms ease; }
  .site-header nav.open { opacity: 1; visibility: visible; }
  .site-header nav > a:not(.nav-cta) { padding: 15px 0; border-bottom: 1px solid rgba(255,255,255,.12); font-size: 23px; }
  .nav-cta { justify-content: space-between; margin-top: 28px; }
  .hero { min-height: 0; padding-top: 96px; }
  .hero-meta span:last-child { display: none; }
  .hero-grid { padding-top: 52px; }
  .hero h1 { font-size: clamp(61px,18vw,86px); }
  .hero-copy > p:not(.eyebrow) { font-size: 13px; }
  .hero-actions { align-items: stretch; flex-direction: column; }
  .text-link { align-self: flex-start; }
  .studio { margin-top: 52px; }
  .studio-stage { min-height: 385px; }
  .media-visual { bottom: 91px; }
  .photo-sun { width: 120px; height: 120px; }
  .album-mark { width: 105px; height: 105px; font-size: 20px; }
  .waveform { left: 38%; gap: 4px; }
  .studio-caption { align-items: start; flex-direction: column; justify-content: center; gap: 6px; min-height: 91px; }
  .studio-caption strong { text-align: left; }
  .studio-bottom { font-size: 5px; }
  .hero-strip { overflow: hidden; justify-content: flex-start; gap: 13px; padding: 0 var(--gutter); white-space: nowrap; }
  .statement,
  .media-types,
  .approach,
  .campaign,
  .standards,
  .contact { padding-top: 76px; padding-bottom: 76px; }
  .statement h2 { font-size: clamp(48px,13.5vw,68px); }
  .statement-note { grid-template-columns: 1fr; margin-top: 38px; }
  .section-heading { display: block; margin-bottom: 45px; }
  .section-heading .eyebrow { margin-bottom: 22px; }
  .section-heading h2 { font-size: clamp(49px,13.5vw,67px); }
  .section-heading > p { margin-top: 26px; }
  .format { display: block; min-height: 0; padding: 42px 0; }
  .format-number { display: block; margin-bottom: 20px; }
  .format h3 { font-size: clamp(38px,11vw,53px); }
  .format-art { margin-top: 30px; }
  .approach { display: block; }
  .approach-intro { position: static; }
  .approach h2 { font-size: clamp(46px,12.5vw,64px); }
  .steps { margin-top: 48px; }
  .steps li { min-height: 0; }
  .steps h3 { margin-top: 45px; }
  .campaign { grid-template-columns: 1fr; gap: 54px; }
  .campaign-art { min-height: 390px; }
  .campaign h2 { font-size: clamp(47px,13vw,65px); }
  .standards-heading { display: block; }
  .standards h2 { font-size: clamp(50px,13.5vw,68px); }
  .standards-grid { grid-template-columns: 1fr; margin-top: 48px; }
  .standards-grid article,
  .standards-grid article + article { min-height: 0; padding: 23px; }
  .standards-grid h3 { margin-top: 42px; }
  .contact h2 { font-size: clamp(54px,15vw,78px); }
  .contact-row { grid-template-columns: 1fr; align-items: stretch; gap: 22px; margin-top: 45px; }
  .contact-row > a:last-child { justify-self: start; }
  footer { grid-template-columns: 1fr; justify-items: start; }
  footer p { text-align: left; }
  footer > a:not(.brand) { text-align: left; }
}

@media (max-width: 380px) {
  .studio-tabs button { font-size: 8px; }
  .campaign-art { min-height: 330px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition-duration: .01ms !important; }
  .motion-ready [data-reveal] { opacity: 1; transform: none; }
}