:root { --bodyby-accent: #c9ff00; --bodyby-ink: #070707; --bodyby-paper: #f1f0ec; }
.bodyby-page { background: var(--bodyby-ink); }
.bodyby-page .primary-nav { gap: clamp(.8rem, 1.45vw, 1.75rem); }
.vision, .challenge, .strategy, .experience, .technology, .bodyby-outcome, .brand-world { scroll-margin-top: 70px; }
.bodyby-page .eyebrow::before { background: var(--bodyby-accent); }
.bodyby-page .eyebrow.dark::before { background: #111; }
.chapter { display: flex; align-items: center; gap: .8rem; color: #73736e; font-size: .62rem; font-weight: 700; letter-spacing: .15em; text-transform: uppercase; }
.chapter p { margin: 0; }
.chapter span { display: grid; width: 2.15rem; height: 2.15rem; place-items: center; border: 1px solid currentColor; border-radius: 50%; }
.chapter.light { color: rgba(255,255,255,.62); }

.bodyby-hero { --hero-progress: 0; position: relative; min-height: max(840px, 100svh); display: flex; align-items: center; overflow: hidden; isolation: isolate; background: #030303; }
.hero-grid { position: absolute; inset: 0; z-index: -1; opacity: .1; background-image: linear-gradient(rgba(255,255,255,.2) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.2) 1px, transparent 1px); background-size: 8.333vw 8.333vw; mask-image: linear-gradient(90deg, #000, transparent 62%); }
.hero-media { position: absolute; inset: 0; z-index: -4; overflow: hidden; }
.hero-media img { width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: 64% center; filter: saturate(.86) contrast(1.1) brightness(.78); transform: scale(calc(1.03 + (var(--hero-progress) * .035))) translate3d(calc(var(--hero-progress) * -1.3%), calc(var(--hero-progress) * -1%), 0); animation: bodyby-drift 15s ease-in-out infinite alternate; }
.hero-shade { position: absolute; inset: 0; z-index: -3; background: linear-gradient(90deg, rgba(0,0,0,.98) 0%, rgba(0,0,0,.9) 31%, rgba(0,0,0,.55) 54%, rgba(0,0,0,.06) 78%), linear-gradient(0deg, rgba(0,0,0,.82), transparent 48%); }
.hero-content { padding-block: 9rem 10rem; }
.bodyby-hero h1 { max-width: 940px; margin: 0; font-size: clamp(4rem, 7.65vw, 9rem); line-height: .79; letter-spacing: -.074em; text-transform: uppercase; }
.bodyby-hero h1 span { display: block; }
.bodyby-hero h1 .accent { color: var(--bodyby-accent); }
.founder-attribution { max-width: 780px; margin: 2rem 0 0; color: #fff; font-size: clamp(.82rem, 1vw, 1rem); font-weight: 650; line-height: 1.55; letter-spacing: .015em; }
.hero-copy { max-width: 620px; margin: .9rem 0 0; color: rgba(255,255,255,.72); font-size: clamp(.95rem, 1.15vw, 1.15rem); line-height: 1.55; }
.hero-meta { position: absolute; left: var(--pad); right: calc(var(--pad) + 120px); bottom: 1.7rem; display: flex; flex-wrap: wrap; gap: .65rem 2rem; color: rgba(255,255,255,.54); font-size: .57rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; }
.hero-meta span { display: inline-flex; align-items: center; gap: 2rem; }
.hero-meta span:not(:last-child)::after { content: "/"; color: rgba(255,255,255,.24); }
.hero-utility { position: absolute; right: var(--pad); top: 6.2rem; z-index: 3; }
@keyframes bodyby-drift { from { translate: -1% 0; } to { translate: 1% -1%; } }

.vision { color: #111; background: var(--bodyby-paper); }
.vision-grid { display: grid; grid-template-columns: .26fr .94fr .8fr; gap: clamp(2rem, 6vw, 7rem); align-items: start; }
.vision-heading h2, .experience-intro h2, .outcome-intro h2 { margin: 0; font-size: clamp(3.5rem, 6.1vw, 7.3rem); line-height: .84; letter-spacing: -.066em; text-transform: uppercase; }
.vision-copy { padding-top: 3.1rem; }
.vision-copy .lead { margin: 0 0 1.5rem; color: #171715; font-size: clamp(1.25rem, 1.7vw, 1.7rem); line-height: 1.42; letter-spacing: -.025em; }
.vision-copy > p:not(.lead) { color: #5e5e58; line-height: 1.65; }
.project-facts { margin: 3.2rem 0 0; border-top: 1px solid var(--dark-line); }
.project-facts > div { display: grid; grid-template-columns: 105px 1fr; gap: 1rem; padding: 1rem 0; border-bottom: 1px solid var(--dark-line); }
.project-facts dt { color: #777; font-size: .6rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.project-facts dd { margin: 0; font-size: .72rem; font-weight: 700; letter-spacing: .06em; line-height: 1.4; text-transform: uppercase; }

.challenge { position: relative; min-height: min(92vw, 1120px); display: flex; align-items: center; overflow: hidden; isolation: isolate; }
.challenge-media { position: absolute; inset: -7%; z-index: -3; }
.challenge-media img { width: 100%; height: 114%; max-width: none; object-fit: cover; object-position: center; transform: translate3d(0, calc(var(--media-shift, 0) * -6%), 0) scale(1.035); }
.challenge-shade { position: absolute; inset: 0; z-index: -2; background: linear-gradient(90deg, rgba(0,0,0,.96), rgba(0,0,0,.74) 48%, rgba(0,0,0,.18) 80%), linear-gradient(0deg, rgba(0,0,0,.62), transparent 50%); }
.challenge-content h2 { max-width: 1050px; margin: 1.4rem 0 2rem; font-size: clamp(3.8rem, 7.75vw, 9.3rem); line-height: .79; letter-spacing: -.073em; text-transform: uppercase; }
.challenge-content h2 span { color: rgba(255,255,255,.48); }
.challenge-content > p:last-child { max-width: 650px; margin: 0; color: rgba(255,255,255,.8); font-size: 1.05rem; line-height: 1.65; }

.strategy { background: radial-gradient(circle at 78% 15%, #202815 0%, #090a08 28%, #050505 62%); overflow: hidden; }
.strategy-top { display: grid; grid-template-columns: .22fr 1.05fr .73fr; gap: clamp(2rem, 6vw, 7rem); align-items: end; }
.strategy-index { margin: 0; color: var(--bodyby-accent); font-size: .62rem; font-weight: 700; letter-spacing: .15em; text-transform: uppercase; }
.strategy-heading h2 { margin: 0; font-size: clamp(3.6rem, 6.8vw, 8rem); line-height: .82; letter-spacing: -.069em; text-transform: uppercase; }
.strategy-heading h2 span { color: rgba(255,255,255,.42); }
.strategy-lead { margin: 0 0 .4rem; color: #aaa; line-height: 1.65; }
.strategy-canvas { position: relative; width: min(92vw, 1700px); margin: clamp(4rem, 8vw, 8rem) auto 0; overflow: hidden; border: 1px solid rgba(255,255,255,.1); }
.strategy-canvas img { width: 100%; height: auto; display: block; transition: transform 1.1s cubic-bezier(.2,.75,.2,1); }
.strategy-canvas:hover img { transform: scale(1.015); }
.strategy-canvas span { position: absolute; left: 1rem; bottom: 1rem; padding: .6rem .8rem; background: rgba(0,0,0,.78); color: white; font-size: .57rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.strategy-principles { display: grid; grid-template-columns: repeat(3,1fr); margin-top: clamp(4rem, 8vw, 8rem); border-top: 1px solid var(--line); }
.strategy-principles article { min-height: 330px; display: flex; flex-direction: column; padding: 1.5rem; border-right: 1px solid var(--line); }
.strategy-principles article:first-child { border-left: 1px solid var(--line); }
.strategy-principles article > span { color: var(--bodyby-accent); font-size: .66rem; }
.strategy-principles h3 { margin: auto 0 1rem; font-size: clamp(1.8rem, 2.7vw, 3.15rem); line-height: .95; letter-spacing: -.045em; text-transform: uppercase; }
.strategy-principles p { margin: 0; color: #9d9d98; line-height: 1.55; }

.experience { color: #111; background: #f4f3ef; overflow: hidden; }
.experience-intro, .outcome-intro { display: grid; grid-template-columns: .23fr 1.07fr .7fr; gap: clamp(2rem, 6vw, 7rem); align-items: end; }
.experience-intro > p:last-child, .outcome-intro > p:last-child { margin: 0 0 .4rem; color: #5d5d57; line-height: 1.65; }
.product-viewer { margin-top: clamp(4rem, 8vw, 8rem); }
.viewer-tabs { display: grid; grid-template-columns: repeat(4,1fr); border-top: 1px solid var(--dark-line); }
.viewer-tabs button { min-height: 86px; display: flex; align-items: center; gap: .9rem; padding: 1rem 1.2rem; border: 0; border-right: 1px solid var(--dark-line); border-bottom: 1px solid var(--dark-line); color: #777; background: transparent; font: inherit; font-size: .7rem; font-weight: 700; letter-spacing: .09em; text-align: left; text-transform: uppercase; cursor: pointer; transition: color .25s ease, background .25s ease; }
.viewer-tabs button:first-child { border-left: 1px solid var(--dark-line); }
.viewer-tabs button span { color: #999; font-size: .58rem; }
.viewer-tabs button[aria-selected="true"] { color: #080808; background: var(--bodyby-accent); }
.viewer-tabs button[aria-selected="true"] span { color: #080808; }
.viewer-tabs button:focus-visible { outline: 3px solid #111; outline-offset: -4px; }
.viewer-stage { position: relative; min-height: 620px; background: #050505; overflow: hidden; }
.viewer-stage figure { position: relative; margin: 0; min-height: 620px; animation: viewer-in .55s cubic-bezier(.2,.75,.2,1) both; }
.viewer-stage figure[hidden] { display: none; }
.viewer-stage img { width: 100%; height: 620px; max-width: none; object-fit: cover; object-position: center; }
.viewer-stage figcaption { position: absolute; left: 1.2rem; right: 1.2rem; bottom: 1.2rem; display: flex; align-items: end; justify-content: space-between; gap: 2rem; padding: 1.1rem 1.2rem; color: white; background: rgba(0,0,0,.78); backdrop-filter: blur(12px); }
.viewer-stage figcaption strong { font-size: .78rem; letter-spacing: .1em; text-transform: uppercase; }
.viewer-stage figcaption span { max-width: 520px; color: rgba(255,255,255,.7); font-size: .72rem; line-height: 1.45; text-align: right; }
@keyframes viewer-in { from { opacity: .15; transform: scale(1.012); } to { opacity: 1; transform: none; } }
.experience-detail { display: grid; grid-template-columns: 1.2fr .8fr; gap: clamp(3rem, 8vw, 9rem); align-items: center; margin-top: clamp(5rem, 10vw, 10rem); }
.detail-image { margin: 0; }
.detail-image img { width: 100%; height: auto; }
.detail-image figcaption { margin-top: .8rem; color: #777; font-size: .58rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.detail-copy h3 { margin: 0 0 1.5rem; font-size: clamp(2.7rem, 4.6vw, 5.5rem); line-height: .87; letter-spacing: -.06em; text-transform: uppercase; }
.detail-copy > p:not(.eyebrow) { color: #5d5d57; line-height: 1.65; }
.product-flow { margin-top: clamp(5rem, 9vw, 9rem); }
.product-flow-heading { display: grid; grid-template-columns: 1.05fr .95fr; gap: 2rem 6rem; align-items: end; margin-bottom: 2.5rem; }
.product-flow-heading .eyebrow { grid-column: 1 / -1; margin-bottom: 0; }
.product-flow-heading h3 { margin: 0; font-size: clamp(2.8rem, 5vw, 6rem); line-height: .86; letter-spacing: -.06em; text-transform: uppercase; }
.product-flow-heading > p:last-child { max-width: 520px; margin: 0 0 .35rem; color: #62625d; line-height: 1.6; }
.product-flow-rail { display: grid; grid-template-columns: repeat(5, minmax(0,1fr)); gap: clamp(.7rem, 1.5vw, 1.4rem); align-items: start; }
.product-flow-rail figure { margin: 0; }
.product-flow-rail img { width: 100%; height: auto; display: block; border-radius: 24px; box-shadow: 0 24px 54px rgba(0,0,0,.16); }
.product-flow-rail figure:nth-child(even) { margin-top: 4rem; }
.product-flow-rail figcaption { margin-top: .8rem; color: #686863; font-size: .57rem; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; }

.technology { position: relative; background: #050505; overflow: hidden; }
.technology-grid { display: grid; grid-template-columns: .9fr 1.1fr; gap: clamp(4rem, 10vw, 12rem); }
.technology-heading { position: sticky; top: 8rem; align-self: start; }
.technology-heading .eyebrow { margin-top: 4rem; }
.technology-heading h2 { margin: 0 0 2rem; font-size: clamp(4rem, 7.5vw, 9rem); line-height: .79; letter-spacing: -.073em; text-transform: uppercase; }
.technology-heading h2 span { color: var(--bodyby-accent); }
.technology-heading > p:last-child { max-width: 570px; color: #9f9f9a; line-height: 1.65; }
.technology-capabilities { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.technology-capabilities li { display: grid; grid-template-columns: 50px 1fr; gap: 1.5rem; padding: 2.4rem 0 3.2rem; border-bottom: 1px solid var(--line); }
.technology-capabilities li > span { color: var(--bodyby-accent); font-size: .65rem; }
.technology-capabilities h3 { margin: 0 0 .8rem; font-size: clamp(2rem, 3.4vw, 4rem); line-height: .93; letter-spacing: -.05em; text-transform: uppercase; }
.technology-capabilities p { max-width: 600px; margin: 0; color: #999; line-height: 1.6; }
.technology-marquee { margin-top: clamp(5rem, 10vw, 10rem); overflow: hidden; border-block: 1px solid var(--line); }
.technology-marquee div { width: max-content; display: flex; align-items: center; gap: 2rem; padding: 1.5rem 0; animation: marquee 18s linear infinite; }
.technology-marquee span { font-size: clamp(2rem, 4.2vw, 4.8rem); font-weight: 700; letter-spacing: -.04em; }
.technology-marquee i { color: var(--bodyby-accent); font-size: 2rem; font-style: normal; }
@keyframes marquee { to { transform: translateX(-25%); } }

.brand-world { position: relative; min-height: min(88vw, 1080px); display: flex; align-items: end; overflow: hidden; isolation: isolate; }
.brand-world-media { position: absolute; inset: -7%; z-index: -3; }
.brand-world-media img { width: 100%; height: 114%; max-width: none; object-fit: cover; object-position: center; transform: translate3d(0, calc(var(--media-shift, 0) * -6%), 0) scale(1.035); }
.brand-world-shade { position: absolute; inset: 0; z-index: -2; background: linear-gradient(0deg, rgba(0,0,0,.97), rgba(0,0,0,.18) 72%), linear-gradient(90deg, rgba(0,0,0,.55), transparent 70%); }
.brand-world-copy { padding-block: 5rem; }
.brand-world-copy .chapter { margin-bottom: 3.5rem; }
.brand-world-copy h2 { max-width: 1000px; margin: 0 0 1.5rem; font-size: clamp(4rem, 8vw, 9.5rem); line-height: .79; letter-spacing: -.074em; text-transform: uppercase; }
.brand-world-copy > p:last-child { max-width: 650px; color: rgba(255,255,255,.78); line-height: 1.65; }

.editorial-lifestyle { color: #fff; background: #080808; }
.editorial-lifestyle-intro { display: grid; grid-template-columns: 1.08fr .92fr; gap: 2rem 7rem; align-items: end; }
.editorial-lifestyle-intro .eyebrow { grid-column: 1 / -1; }
.editorial-lifestyle-intro h2 { margin: 0; font-size: clamp(3.7rem, 7vw, 8.5rem); line-height: .8; letter-spacing: -.072em; text-transform: uppercase; }
.editorial-lifestyle-intro > p:last-child { max-width: 650px; margin: 0 0 .4rem; color: #9b9b96; line-height: 1.65; }
.editorial-lifestyle-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1rem, 2vw, 2rem); margin-top: clamp(4rem, 8vw, 8rem); }
.editorial-lifestyle-grid figure { margin: 0; }
.editorial-lifestyle-grid img { width: 100%; height: auto; display: block; }
.editorial-lifestyle-grid figure:nth-child(2) { margin-top: 8rem; }
.editorial-lifestyle-grid figcaption { margin-top: .8rem; color: #8f8f89; font-size: .56rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }

.bodyby-outcome { color: #111; background: var(--bodyby-paper); }
.outcome-grid { display: grid; grid-template-columns: repeat(4,1fr); margin-top: clamp(4rem, 8vw, 8rem); border-top: 1px solid var(--dark-line); }
.outcome-grid article { min-height: 340px; display: flex; flex-direction: column; padding: 1.5rem; border-right: 1px solid var(--dark-line); }
.outcome-grid article:first-child { border-left: 1px solid var(--dark-line); }
.outcome-grid span { color: #888; font-size: .65rem; }
.outcome-grid h3 { margin: auto 0 1rem; font-size: clamp(1.65rem, 2.25vw, 2.65rem); line-height: .96; letter-spacing: -.04em; text-transform: uppercase; }
.outcome-grid p { margin: 0; color: #666; line-height: 1.52; }
.project-cta { display: flex; align-items: center; justify-content: space-between; gap: 2rem; margin-top: clamp(4rem, 8vw, 7rem); padding-top: 2rem; border-top: 1px solid var(--dark-line); }
.project-cta p { max-width: 580px; margin: 0; color: #555; font-size: 1.05rem; }

.system-film { position: relative; min-height: 900px; display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(3rem, 7vw, 8rem); align-items: center; padding: clamp(5rem, 10vw, 10rem) var(--pad); background: #090909; overflow: hidden; }
.system-film::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(circle at 82% 32%, rgba(201,255,0,.1), transparent 28%); }
.system-film-image { margin: 0; transform: rotate(-2deg); box-shadow: 0 30px 100px rgba(0,0,0,.55); }
.system-film-image img { width: 100%; height: auto; }
.system-film-copy h2 { margin: 0; font-size: clamp(3.4rem, 6.4vw, 7.5rem); line-height: .8; letter-spacing: -.071em; text-transform: uppercase; }

.next-project { position: relative; min-height: min(70vw, 850px); display: flex; align-items: end; overflow: hidden; isolation: isolate; }
.next-project-media { position: absolute; inset: 0; z-index: -3; }
.next-project-media img { width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: center; filter: saturate(.78); transition: transform 1.2s cubic-bezier(.2,.75,.2,1); }
.next-project:hover .next-project-media img { transform: scale(1.025); }
.next-project-shade { position: absolute; inset: 0; z-index: -2; background: linear-gradient(0deg, rgba(0,0,0,.97), rgba(0,0,0,.08) 76%), linear-gradient(90deg, rgba(0,0,0,.68), transparent 65%); }
.next-project-copy { padding-block: 5rem; }
.next-project h2 { margin: 0; font-size: clamp(4.2rem, 9vw, 10.8rem); line-height: .79; letter-spacing: -.075em; text-transform: uppercase; }
.next-project-copy > p:not(.eyebrow) { max-width: 630px; margin: 1.4rem 0 2rem; color: rgba(255,255,255,.76); line-height: 1.6; }
.motion-paused .hero-media img, .motion-paused .challenge-media img, .motion-paused .brand-world-media img, .motion-paused .technology-marquee div { animation: none !important; transform: none !important; }

@media (max-width: 1100px) {
  .vision-grid, .strategy-top, .experience-intro, .outcome-intro { grid-template-columns: .2fr 1fr; }
  .vision-copy, .strategy-lead, .experience-intro > p:last-child, .outcome-intro > p:last-child { grid-column: 2; }
  .technology-grid { gap: 4rem; }
  .product-flow-rail { grid-template-columns: repeat(3, minmax(0,1fr)); }
  .product-flow-rail figure:nth-child(even) { margin-top: 0; }
  .product-flow-rail figure:nth-child(3n + 2) { margin-top: 3rem; }
  .outcome-grid { grid-template-columns: 1fr 1fr; }
  .outcome-grid article:nth-child(odd) { border-left: 1px solid var(--dark-line); }
}

@media (max-width: 760px) {
  .bodyby-hero { min-height: 900px; align-items: flex-end; }
  .hero-media img { object-position: 58% center; filter: saturate(.8) brightness(.6); }
  .hero-shade { background: linear-gradient(180deg, rgba(0,0,0,.14), rgba(0,0,0,.55) 45%, rgba(0,0,0,.97) 79%, #050505); }
  .hero-content { padding-block: 8rem 11rem; }
  .bodyby-hero h1 { font-size: clamp(3.5rem, 16.5vw, 5.5rem); line-height: .81; }
  .hero-copy { font-size: .98rem; }
  .founder-attribution { margin-top: 1.4rem; font-size: .76rem; }
  .hero-meta { right: var(--pad); bottom: 1.2rem; display: grid; grid-template-columns: 1fr 1fr; gap: .55rem 1rem; padding-right: 3rem; }
  .hero-meta span::after { display: none; }
  .hero-meta span:last-child { display: none; }
  .hero-utility { top: auto; right: var(--pad); bottom: 1.1rem; }
  .vision-grid, .strategy-top, .experience-intro, .outcome-intro { grid-template-columns: 1fr; gap: 2.2rem; }
  .vision-copy, .strategy-lead, .experience-intro > p:last-child, .outcome-intro > p:last-child { grid-column: 1; }
  .vision-copy { padding-top: 0; }
  .vision-heading h2, .experience-intro h2, .outcome-intro h2 { font-size: clamp(3.3rem, 14.8vw, 5rem); }
  .challenge { min-height: 850px; align-items: end; }
  .challenge-media { inset: 0; }
  .challenge-media img { height: 100%; object-position: 55% center; }
  .challenge-shade { background: linear-gradient(180deg, rgba(0,0,0,.12), rgba(0,0,0,.94) 76%); }
  .challenge-content { padding-bottom: 5rem; }
  .challenge-content h2, .strategy-heading h2 { font-size: clamp(3.4rem, 15vw, 5.2rem); }
  .strategy-canvas { width: 100%; height: 560px; }
  .strategy-canvas img { width: 178%; max-width: none; height: 100%; object-fit: cover; object-position: left center; }
  .strategy-principles { grid-template-columns: 1fr; }
  .strategy-principles article { min-height: 260px; border-left: 1px solid var(--line); border-bottom: 1px solid var(--line); }
  .viewer-tabs { grid-template-columns: 1fr 1fr; }
  .viewer-tabs button:nth-child(3) { border-left: 1px solid var(--dark-line); }
  .viewer-stage, .viewer-stage figure { min-height: 560px; }
  .viewer-stage img { height: 560px; object-position: center; }
  .viewer-stage figcaption { display: grid; }
  .viewer-stage figcaption span { text-align: left; }
  .experience-detail, .technology-grid, .system-film { grid-template-columns: 1fr; }
  .product-flow-heading, .editorial-lifestyle-intro { grid-template-columns: 1fr; gap: 1.5rem; }
  .product-flow-heading .eyebrow, .editorial-lifestyle-intro .eyebrow { grid-column: 1; }
  .product-flow-rail { display: flex; gap: 1rem; overflow-x: auto; scroll-snap-type: x mandatory; padding: 0 var(--pad) 1.5rem; margin-inline: calc(var(--pad) * -1); scrollbar-width: thin; }
  .product-flow-rail figure, .product-flow-rail figure:nth-child(3n + 2) { flex: 0 0 min(72vw, 300px); margin-top: 0; scroll-snap-align: start; }
  .editorial-lifestyle-grid { grid-template-columns: 1fr; }
  .editorial-lifestyle-grid figure:nth-child(2) { margin-top: 1.5rem; }
  .technology-heading { position: static; }
  .technology-heading h2 { font-size: clamp(3.8rem, 17vw, 5.8rem); }
  .brand-world { min-height: 850px; }
  .brand-world-media { inset: 0; }
  .brand-world-media img { height: 100%; object-position: 42% center; }
  .brand-world-copy h2 { font-size: clamp(3.8rem, 17vw, 5.8rem); }
  .outcome-grid { grid-template-columns: 1fr; }
  .outcome-grid article { min-height: 265px; border-left: 1px solid var(--dark-line); border-bottom: 1px solid var(--dark-line); }
  .project-cta { display: grid; }
  .project-cta .button { width: 100%; }
  .system-film { min-height: 0; padding-block: 6rem; }
  .system-film-image { transform: rotate(-1deg); }
  .system-film-copy h2 { font-size: clamp(3.4rem, 15vw, 5.1rem); }
  .next-project { min-height: 720px; }
  .next-project-media img { object-position: 62% center; }
  .next-project h2 { font-size: clamp(4rem, 18vw, 6.2rem); }
}

@media (max-width: 480px) {
  .hero-meta { grid-template-columns: 1fr; }
  .hero-meta span:nth-child(3) { display: none; }
  .viewer-tabs button { min-height: 75px; padding: .8rem; font-size: .61rem; }
  .viewer-stage img { object-position: 56% center; }
  .next-project-copy .button { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .hero-media img, .challenge-media img, .brand-world-media img, .technology-marquee div, .next-project-media img { animation: none !important; transform: none !important; }
  .viewer-stage figure { animation: none; }
  .reveal { opacity: 1; transform: none; }
}