@font-face {
  font-family: "Inter Tight";
  src: url("/assets/inter-tight-500-700.woff2") format("woff2");
  font-style: normal;
  font-weight: 500 700;
  font-display: swap;
}

@font-face {
  font-family: "Inter Tight";
  src: url("/assets/inter-tight-900.woff2") format("woff2");
  font-style: normal;
  font-weight: 900;
  font-display: swap;
}

@font-face {
  font-family: "Inter";
  src: url("/assets/font-d.woff2") format("woff2");
  font-style: normal;
  font-weight: 700;
  font-display: swap;
}

:root { --orange: #ff3c00; --black: #000; --white: #fff; }
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; overflow-x: clip; }

body {
  margin: 0;
  overflow-x: hidden;
  color: var(--black);
  background: var(--white);
  font-family: "Inter Tight", Arial, sans-serif;
  font-weight: 500;
  -webkit-font-smoothing: antialiased;
  text-rendering: geometricPrecision;
}

a { color: inherit; text-decoration: none; }
p, h1, h2, dl, dd { margin: 0; }

.home-link {
  position: fixed;
  z-index: 20;
  top: 48px;
  left: 48px;
  display: flex;
  width: 112px;
  height: 112px;
  align-items: flex-start;
  justify-content: flex-start;
  padding: 23px 0 0 31px;
  border-radius: 36px;
  background: var(--white);
  font-size: 16px;
  line-height: 16px;
}

.qr-shell {
  display: block;
  position: fixed;
  z-index: 20;
  top: 48px;
  right: 48px;
  width: 112px;
  height: 112px;
  padding: 16px;
  border-radius: 36px;
  background: var(--white);
}

.hero-qr { display: block; width: 80px; height: 80px; }

.case-study {
  position: relative;
  height: 8587.484375px;
  overflow: hidden;
  background: var(--white);
}

.project-overview h1 {
  position: absolute;
  top: 232px;
  left: 532.5px;
  width: 840px;
  height: 80px;
  overflow: hidden;
  font-family: "Inter", Arial, sans-serif;
  font-size: 80px;
  font-weight: 700;
  line-height: 80px;
  letter-spacing: -3.2px;
  white-space: nowrap;
}

.overview-meta {
  position: absolute;
  top: 360px;
  left: 532.5px;
  width: 840px;
  font-size: 16px;
  line-height: 16px;
}

.overview-meta > div {
  display: grid;
  grid-template-columns: 415px 415px;
  gap: 10px;
  height: 40px;
  align-items: start;
}

.overview-meta dd { text-align: right; }

.case-buttons {
  position: absolute;
  left: 800.5px;
  display: flex;
  width: 304px;
  height: 32px;
  gap: 24px;
}

.case-buttons--top { top: 504px; }
.case-buttons--bottom { top: 8459.484375px; }

.case-button {
  display: flex;
  width: 140px;
  height: 32px;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  line-height: 12.8px;
}

.case-button--preview { border: 1px solid var(--black); color: var(--black); background: var(--white); }
.case-button--remix { color: var(--white); background: var(--black); }

.detail-hero {
  position: absolute;
  top: 584px;
  left: 160px;
  display: block;
  width: 1585px;
  height: 904.890625px;
  object-fit: contain;
}

.detail-hero--laptop { padding: 120px; }

.case-intro {
  position: absolute;
  top: 1584.890625px;
  left: 160px;
  width: 1585px;
  height: 480px;
}

.case-intro p {
  position: absolute;
  top: 96px;
  left: 475.5px;
  width: 1109.5px;
  font-size: 48px;
  line-height: 48px;
  transform: scale(.1);
  transform-origin: center;
  transition: transform .72s cubic-bezier(.22, .8, .2, 1);
}

.case-square,
.editorial-square {
  position: absolute;
  width: 24px;
  height: 24px;
  background: var(--orange);
  transform-origin: center;
  transition: transform .72s cubic-bezier(.22, .8, .2, 1);
}

.case-square {
  top: 96px;
  left: 0;
  transform: translateY(480px) scale(.1) rotate(8deg);
}

.editorial {
  position: absolute;
  left: 0;
  width: 100%;
}

.editorial--approach { top: 2064.890625px; height: 2099.53125px; }
.editorial--challenges { top: 4164.421875px; height: 2075.53125px; }
.editorial--users { top: 6239.953125px; height: 2123.53125px; }

.editorial-label {
  position: absolute;
  width: 1697px;
  height: 16px;
  font-size: 16px;
  line-height: 16px;
}

.editorial-label--left { top: 184px; left: 160px; }
.editorial-label--right { top: 600px; left: 48px; }

.editorial-copy {
  position: absolute;
  width: 792.5px;
  font-size: 24px;
  line-height: 24px;
  transform-origin: center;
  transition: transform .72s cubic-bezier(.22, .8, .2, 1);
}

.editorial-copy--left { top: 320px; left: 160px; transform: translateX(-192px); }
.editorial-copy--right { top: 736px; left: 952.5px; transform: translateX(192px); }

.editorial-square--first {
  top: 320px;
  right: 160px;
  transform: translateY(960px) scale(.1) rotate(8deg);
}

.editorial-square--second {
  top: 736px;
  left: 160px;
  transform: translateY(960px) scale(.1) rotate(8deg);
}

.case-intro p.is-visible,
.editorial-copy.is-visible { transform: none; }

.case-square.is-visible,
.editorial-square.is-visible { transform: rotate(8deg); }

.editorial > img,
.editorial-artwork {
  position: absolute;
  left: 160px;
  display: block;
  width: 1585px;
  height: 1075.53125px;
}

.editorial > img {
  object-fit: contain;
}

.editorial-artwork {
  overflow: hidden;
  background: #001e33;
}

.editorial-artwork__page {
  position: absolute;
  left: 6.857143%;
  z-index: 2;
  display: block;
  width: 57.142857%;
  height: auto;
  box-shadow: 0 20px 40px rgba(0, 0, 0, .1);
}

.editorial-artwork__page--front { top: 10.105263%; }
.editorial-artwork__page--back { left: 42.857143%; z-index: 1; }
.editorial-artwork--portfolio .editorial-artwork__page--back { top: -128.947368%; }
.editorial-artwork--residential .editorial-artwork__page--back { top: -89.894737%; }

.editorial--approach > img { top: 928px; }
.editorial--challenges > .editorial-artwork { top: 904px; }
.editorial--users > .editorial-artwork { top: 1048px; }

.editorial-copy--double p { margin: 0; }
.editorial-copy--double p:first-child { height: 96px; }

.related-work { height: 3859.515625px; }

.work-panel {
  height: 953px;
  padding: 24px;
}

.project,
.more-projects {
  display: flex;
  width: 100%;
  height: 100%;
  border-radius: 60px;
  overflow: hidden;
}

.project {
  align-items: center;
  gap: 64px;
  padding: 0 48px 0 136px;
  color: var(--white);
  transform: translateY(0);
  transition: transform 900ms cubic-bezier(.16, 1, .3, 1);
}

.project.is-visible { transform: translateY(112.515625px); }

.project--dark { background: var(--black); }
.project--orange { background: var(--orange); }

.project-copy {
  position: relative;
  flex: 0 0 853px;
  height: 432px;
}

.project-copy > div:first-child {
  transform: translateX(-192px) scale(.9);
  transition: transform 900ms cubic-bezier(.16, 1, .3, 1);
}

.project.is-visible .project-copy > div:first-child { transform: none; }

.eyebrow { display: block; height: 16px; font-size: 16px; line-height: 16px; }

.project h2 {
  margin-top: 24px;
  font-size: 60px;
  font-weight: 700;
  line-height: 60px;
}

.project-diamond {
  position: absolute;
  top: 216px;
  left: 96px;
  width: 24px;
  height: 24px;
  background: var(--white);
  transform: translate(-96px, -12px) scale(.1) rotate(118deg);
  transition: transform 900ms cubic-bezier(.16, 1, .3, 1);
}

.project.is-visible .project-diamond { transform: translateY(-12px) rotate(-1deg); }

.view-project {
  position: absolute;
  top: 186px;
  right: 0;
  display: flex;
  height: 60px;
  align-items: center;
  font-size: 16px;
  line-height: 16px;
  transform: translateX(96px) scale(.1);
  transition: transform 900ms cubic-bezier(.16, 1, .3, 1);
}

.project.is-visible .view-project { transform: none; }

.project-meta {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  display: grid;
  gap: 24px;
  font-size: 16px;
  line-height: 16px;
  transform: translateX(-96px) scale(.9);
  transition: transform 900ms cubic-bezier(.16, 1, .3, 1);
}

.project.is-visible .project-meta { transform: none; }
.project-meta > div { display: grid; grid-template-columns: 1fr 1fr; margin-left: 96px; }
.project-meta dd { text-align: right; }

.project-image {
  position: relative;
  top: .203125px;
  flex: 1 1 0;
  width: 756px;
  max-width: 756px;
  height: 431.59375px;
  max-height: 432px;
  object-fit: contain;
  transform: translate(196px, 24px) scale(.9);
  transition: transform 900ms cubic-bezier(.16, 1, .3, 1);
}

.project.is-visible .project-image { transform: none; }

.work-panel--more { padding-bottom: 0; }

.more-projects {
  position: relative;
  align-items: center;
  justify-content: center;
  padding: 0 136px;
  color: var(--white);
  background: var(--orange);
}

.more-projects strong {
  position: relative;
  z-index: 1;
  font-size: 80px;
  font-weight: 700;
  line-height: 80px;
  transition: opacity 180ms ease, transform 180ms ease;
}

.more-projects__line {
  position: absolute;
  top: 50%;
  right: 136px;
  left: 136px;
  height: 144px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 90px;
  transform: translateY(-50%);
  transition: background 180ms ease, border-color 180ms ease;
}

.more-projects__arrows {
  position: absolute;
  inset: 0 -108px;
  opacity: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60' viewBox='0 0 256 256'%3E%3Cpath fill='%23ff3c00' d='M178.83 130.83l-80 80a4 4 0 0 1-5.66-5.66L170.34 128 93.17 50.83a4 4 0 0 1 5.66-5.66l80 80a4 4 0 0 1 0 5.66Z'/%3E%3C/svg%3E");
  background-position: 0 center;
  background-repeat: repeat-x;
  background-size: 108px 60px;
}

.more-projects__view {
  position: absolute !important;
  z-index: 2;
  padding: 0 36px;
  color: var(--orange);
  background: var(--white);
  opacity: 0;
  transform: translateY(12px);
}

.more-projects:hover .more-projects__line,
.more-projects:focus-visible .more-projects__line { border-color: var(--white); background: var(--white); }
.more-projects:hover .more-projects__arrows,
.more-projects:focus-visible .more-projects__arrows { opacity: 1; animation: arrow-marquee 3s linear infinite; }
.more-projects:hover .more-projects__default,
.more-projects:focus-visible .more-projects__default { opacity: 0; transform: translateY(-12px); }
.more-projects:hover .more-projects__view,
.more-projects:focus-visible .more-projects__view { opacity: 1; transform: translateY(0); }

@keyframes arrow-marquee { to { background-position: -108px center; } }

.footer {
  position: relative;
  height: 953px;
  padding: 24px 24px 0;
  overflow: hidden;
  background: var(--white);
}

.footer-inner {
  position: relative;
  height: 100%;
  overflow: hidden;
  border-radius: 60px 60px 0 0;
  color: var(--white);
  background: var(--black);
}

.footer-grid {
  position: absolute;
  top: 160px;
  right: 136px;
  left: 136px;
  display: grid;
  grid-template-columns: 780.5px 378.25px 378.25px;
  gap: 24px;
  height: 192px;
}

.footer-grid > div { display: flex; flex-direction: column; align-items: flex-start; }
.footer-grid span { margin-bottom: 48px; color: #e6e6e6; font-size: 16px; line-height: 16px; }
.footer-contact a { font-size: 48px; font-weight: 700; line-height: 38.4px; }
.footer-contact a + a { margin-top: 49.6px; }
.footer-links a { font-size: 16px; line-height: 12.8px; }
.footer-links a + a { margin-top: 25.2px; }

.footer-meta {
  position: absolute;
  right: 24px;
  bottom: 500px;
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 16px;
  line-height: 16px;
}

.footer-meta a { color: var(--orange); }
.footer-meta__made { margin-left: 18px; }

.footer-wordmark {
  position: absolute;
  right: 24px;
  bottom: 0;
  left: 24px;
  height: 284.594px;
  color: var(--orange);
  font-size: 350px;
  font-weight: 900;
  line-height: 280px;
  white-space: nowrap;
}

.footer-wordmark span { font-size: inherit; }

.footer-wordmark.brand-wordmark {
  bottom: 24px;
  display: flex;
  height: min(22.9vw, 440px);
  flex-direction: column;
  justify-content: flex-end;
  font-size: min(15.4vw, 296px);
  line-height: .72;
  letter-spacing: -3px;
  transform: none;
}

.brand-wordmark .brand-wordmark__line { display: block; width: 100%; font-size: inherit; line-height: inherit; letter-spacing: inherit; }
.brand-wordmark .brand-wordmark__line--end { text-align: right; }

@media (max-width: 1200px) {
  .case-study { height: auto; padding: 180px 7vw 100px; overflow: visible; }
  .project-overview h1, .overview-meta, .case-buttons, .detail-hero, .case-intro, .editorial { position: relative; inset: auto; }
  .project-overview h1 { width: 100%; height: auto; font-size: clamp(48px, 7vw, 80px); line-height: 1; white-space: normal; }
  .overview-meta { width: 100%; margin-top: 64px; }
  .overview-meta > div { grid-template-columns: 1fr 1fr; }
  .case-buttons { margin: 48px auto; }
  .detail-hero { width: 100%; height: auto; }
  .case-intro { width: 100%; height: auto; margin: 120px 0; }
  .case-intro p { position: relative; inset: auto; width: 75%; margin-left: 25%; font-size: clamp(30px, 4vw, 48px); line-height: 1; }
  .editorial { height: auto; margin-top: 120px; }
  .editorial-label, .editorial-copy, .editorial > img, .editorial-artwork { position: relative; inset: auto; width: 100%; height: auto; }
  .editorial--approach > img,
  .editorial--challenges > .editorial-artwork,
  .editorial--users > .editorial-artwork { top: auto; left: auto; }
  .editorial-copy { width: 70%; margin-top: 64px; transform: none; }
  .editorial-label--right, .editorial-copy--right { margin-top: 120px; margin-left: 30%; }
  .editorial-label--right { width: 70%; }
  .editorial > img, .editorial-artwork { margin-top: 100px; }
  .editorial-artwork { aspect-ratio: 1400 / 950; }
  .case-buttons--bottom { margin-top: 120px; }
  .related-work { height: auto; }
  .work-panel { height: auto; min-height: 760px; padding: 12px; }
  .project { min-height: 736px; padding: 64px; flex-direction: column; justify-content: center; }
  .project,
  .project-copy > div:first-child,
  .view-project,
  .project-meta,
  .project-image { transform: none !important; }
  .project-diamond { transform: translateY(-12px) rotate(-1deg) !important; }
  .project-copy { flex-basis: auto; width: 100%; max-width: 760px; }
  .project-image { width: 100%; }
  .footer-grid { right: 7vw; left: 7vw; grid-template-columns: 1fr .5fr .5fr; }
  .footer-wordmark { font-size: 17.5vw; line-height: .8; }
  .footer-wordmark.brand-wordmark { right: 2vw; bottom: 3vw; left: 2vw; height: 31vw; font-size: 16.2vw; line-height: .72; letter-spacing: -.17vw; }
  .footer-meta { bottom: 37vw; }
}

@media (max-width: 720px) {
  .home-link { top: 18px; left: 18px; display: block; width: 54px; height: 20px; padding: 0; overflow: visible; }
  .qr-shell { display: none; }
  .project { min-height: 700px; padding: 40px 24px; border-radius: 30px; }
  .project h2 { font-size: 48px; }
  .project-meta { left: 0; }
  .more-projects { min-height: 500px; padding: 0 24px; border-radius: 30px; }
  .more-projects strong { font-size: 9vw; line-height: 1; }
  .more-projects__line { right: 24px; left: 24px; }
  .footer { height: 850px; padding: 12px 12px 0; }
  .footer-inner { border-radius: 30px 30px 0 0; }
  .footer-grid { top: 80px; right: 36px; left: 36px; grid-template-columns: 1fr 1fr; }
  .footer-grid > div { min-width: 0; }
  .footer-contact { grid-column: 1 / -1; margin-bottom: 50px; }
  .footer-contact a { font-size: 30px; line-height: 1; }
  .footer-contact a:first-of-type { font-size: clamp(16px, 5vw, 24px); white-space: nowrap; }
  .footer-meta { right: 36px; bottom: calc(31vw + 42px); left: 36px; justify-content: flex-end; gap: 4px; font-size: 10px; }
  .footer-meta__made { margin-left: 8px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .more-projects__arrows { animation: none !important; }
}

/* Proof-led case study extension */
.editorial-project-image {
  padding: 96px;
  object-fit: contain !important;
  background: #f3f3f0;
}

.editorial-artwork--project {
  background: #050505;
}

.editorial-artwork--project[data-tone="orange"] { background: var(--orange); }
.editorial-artwork--project .editorial-artwork__page--back { display: none; }

.editorial-artwork--project .editorial-artwork__page--front {
  inset: 7% !important;
  width: 86%;
  height: 86%;
  object-fit: contain;
  box-shadow: none;
}

.impact-proof,
.campaign-showcase {
  padding: 24px;
  background: var(--white);
}

.impact-proof__shell {
  min-height: 1740px;
  padding: 112px 112px 72px;
  overflow: hidden;
  border-radius: 60px;
  color: var(--white);
  background: var(--black);
}

.impact-proof__header {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(340px, .75fr);
  gap: 120px;
  align-items: end;
  opacity: 0;
  transform: translateY(80px);
  transition: opacity .9s ease, transform .9s cubic-bezier(.16, 1, .3, 1);
}

.impact-proof__header.is-visible,
.impact-metric.is-visible,
.impact-dashboard.is-visible,
.campaign-copy.is-visible,
.ad-stage.is-visible {
  opacity: 1;
  transform: none;
}

.impact-kicker,
.campaign-kicker {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  font-size: 16px;
  line-height: 16px;
}

.impact-kicker i {
  display: block;
  width: 14px;
  height: 14px;
  background: var(--orange);
  transform: rotate(14deg);
}

.impact-proof__header h2,
.campaign-copy h2 {
  margin: 48px 0 0;
  font-size: clamp(72px, 6.4vw, 124px);
  font-weight: 700;
  line-height: .86;
  letter-spacing: -.055em;
}

.impact-proof__header > p {
  max-width: 520px;
  padding-bottom: 6px;
  color: #b8b8b8;
  font-size: 28px;
  line-height: 1.04;
}

.impact-metrics {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  margin-top: 150px;
  border-top: 1px solid #353535;
  border-bottom: 1px solid #353535;
}

.impact-metric {
  position: relative;
  min-height: 340px;
  padding: 36px 34px 32px;
  border-right: 1px solid #353535;
  opacity: 0;
  transform: translateY(70px);
  transition: opacity .8s ease calc(var(--metric-index) * 90ms), transform .8s cubic-bezier(.16, 1, .3, 1) calc(var(--metric-index) * 90ms);
}

.impact-metric:last-child { border-right: 0; }

.impact-metric__index {
  color: #777;
  font-size: 14px;
}

.impact-metric > strong {
  display: block;
  margin-top: 54px;
  color: var(--orange);
  font-size: clamp(64px, 5.3vw, 102px);
  font-weight: 700;
  line-height: .9;
  letter-spacing: -.06em;
}

.impact-metric h3 {
  margin: 24px 0 0;
  font-size: 20px;
  font-weight: 500;
}

.impact-metric p {
  position: absolute;
  right: 34px;
  bottom: 32px;
  left: 34px;
  display: flex;
  justify-content: space-between;
  color: #777;
  font-size: 14px;
}

.impact-metric p b { color: var(--white); font-weight: 500; }

.impact-dashboard {
  display: grid;
  grid-template-columns: 1.28fr .72fr;
  gap: 24px;
  margin-top: 24px;
  opacity: 0;
  transform: translateY(90px);
  transition: opacity .9s ease, transform .9s cubic-bezier(.16, 1, .3, 1);
}

.impact-chart,
.impact-funnel {
  min-height: 565px;
  padding: 46px 48px;
  border-radius: 36px;
  background: #151515;
}

.impact-module__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  padding-bottom: 32px;
  border-bottom: 1px solid #383838;
}

.impact-module__head span {
  color: #858585;
  font-size: 12px;
  letter-spacing: .08em;
}

.impact-module__head strong { font-size: 22px; font-weight: 500; }
.impact-bars { display: grid; gap: 32px; margin-top: 36px; }

.impact-bar > div {
  display: flex;
  justify-content: space-between;
  margin-bottom: 14px;
  font-size: 14px;
}

.impact-bar > div b { color: var(--orange); font-weight: 500; }

.impact-bar__track {
  position: relative;
  height: 12px;
  margin: 8px 52px 0 0;
  border-radius: 12px;
  background: #2d2d2d;
}

.impact-bar__track i {
  display: block;
  width: 0;
  height: 100%;
  border-radius: inherit;
  background: #686868;
  transition: width 1.2s cubic-bezier(.16, 1, .3, 1) .25s;
}

.impact-bar__track--after i { background: var(--orange); }
.impact-dashboard.is-visible .impact-bar__track--before i { width: var(--before); }
.impact-dashboard.is-visible .impact-bar__track--after i { width: var(--after); }

.impact-bar__track em {
  position: absolute;
  top: -2px;
  left: calc(100% + 12px);
  color: #888;
  font-size: 12px;
  font-style: normal;
}

.impact-bar__track--after em { color: var(--white); }

.funnel-steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  margin-top: 44px;
}

.funnel-step {
  position: relative;
  min-width: 0;
  padding-top: 18px;
  border-top: 2px solid var(--orange);
}

.funnel-step:not(:last-child)::after {
  content: "\2192";
  position: absolute;
  top: -14px;
  right: -14px;
  z-index: 1;
  display: grid;
  width: 28px;
  height: 28px;
  place-items: center;
  border-radius: 50%;
  color: var(--black);
  background: var(--orange);
  font-size: 14px;
}

.funnel-step > span { color: #777; font-size: 11px; }
.funnel-step strong { display: block; margin-top: 28px; font-size: 38px; line-height: 1; }
.funnel-step small { display: block; margin-top: 10px; color: #929292; font-size: 12px; }

.impact-levers {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 76px;
}

.impact-levers > span {
  width: 100%;
  margin-bottom: 8px;
  color: #777;
  font-size: 11px;
  letter-spacing: .08em;
}

.impact-levers b {
  padding: 10px 14px;
  border: 1px solid #3a3a3a;
  border-radius: 30px;
  font-size: 12px;
  font-weight: 500;
}

.impact-disclaimer {
  max-width: 780px;
  margin-top: 52px;
  color: #6f6f6f;
  font-size: 12px;
  line-height: 1.35;
}

.impact-trend {
  display: grid;
  min-height: 520px;
  grid-column: 1 / -1;
  grid-template-columns: minmax(0, 1fr) 260px;
  gap: 48px;
  padding: 46px 48px;
  border-radius: 36px;
  background: #151515;
}

.impact-trend > .impact-module__head { grid-column: 1 / -1; }

.impact-trend__plot {
  min-width: 0;
  padding-top: 18px;
}

.impact-trend__plot svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}

.impact-trend__grid {
  stroke: #444;
  stroke-width: 1;
  opacity: .52;
}

.impact-trend__area {
  fill: url(#impact-trend-fill);
  opacity: 0;
  transition: opacity 1s ease .35s;
}

.impact-trend__line {
  fill: none;
  stroke: var(--orange);
  stroke-width: 5;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 1800;
  stroke-dashoffset: 1800;
  transition: stroke-dashoffset 1.45s cubic-bezier(.16, 1, .3, 1) .25s;
}

.impact-trend__point circle {
  fill: #151515;
  stroke: var(--orange);
  stroke-width: 4;
}

.impact-trend__point text {
  fill: var(--white);
  font-family: "Inter Tight", Arial, sans-serif;
  font-size: 20px;
  font-weight: 500;
}

.impact-dashboard.is-visible .impact-trend__area { opacity: 1; }
.impact-dashboard.is-visible .impact-trend__line { stroke-dashoffset: 0; }

.impact-trend__periods {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  margin: 3px 4.4% 0;
  color: #707070;
  font-size: 10px;
  letter-spacing: .05em;
}

.impact-trend__periods span { text-align: center; }
.impact-trend__periods span:first-child { text-align: left; }
.impact-trend__periods span:last-child { text-align: right; }

.impact-trend__summary {
  align-self: stretch;
  padding: 34px 0 0 34px;
  border-left: 1px solid #383838;
}

.impact-trend__summary span {
  color: #777;
  font-size: 11px;
  letter-spacing: .08em;
}

.impact-trend__summary strong {
  display: block;
  margin-top: 36px;
  color: var(--orange);
  font-size: 34px;
  font-weight: 500;
  line-height: .95;
  letter-spacing: -.04em;
}

.impact-trend__summary p {
  margin-top: 130px;
  color: #8b8b8b;
  font-size: 13px;
  line-height: 1.25;
}

.campaign-showcase__shell {
  display: grid;
  min-height: 1120px;
  grid-template-columns: .78fr 1.22fr;
  gap: 80px;
  padding: 112px;
  overflow: hidden;
  border-radius: 60px;
  color: var(--black);
  background: var(--orange);
}

.campaign-copy {
  align-self: center;
  opacity: 0;
  transform: translateX(-80px);
  transition: opacity .9s ease, transform .9s cubic-bezier(.16, 1, .3, 1);
}

.campaign-copy h2 { margin-top: 48px; font-size: clamp(72px, 5.4vw, 104px); }

.campaign-copy > p {
  max-width: 520px;
  margin-top: 48px;
  font-size: 25px;
  line-height: 1.06;
}

.campaign-signal {
  display: flex;
  max-width: 520px;
  align-items: flex-end;
  justify-content: space-between;
  margin-top: 72px;
  padding-top: 20px;
  border-top: 1px solid rgba(0, 0, 0, .35);
}

.campaign-signal span { font-size: 12px; }
.campaign-signal strong { font-size: 24px; }

.ad-stage {
  display: grid;
  grid-template-columns: minmax(420px, 620px) minmax(180px, 1fr);
  gap: 24px;
  align-items: center;
  opacity: 0;
  transform: translateX(100px) rotate(2deg);
  transition: opacity 1s ease .12s, transform 1s cubic-bezier(.16, 1, .3, 1) .12s;
}

.ad-card {
  overflow: hidden;
  border: 1px solid rgba(0, 0, 0, .18);
  border-radius: 28px;
  background: var(--white);
  box-shadow: 0 36px 80px rgba(0, 0, 0, .18);
}

.ad-card__account {
  display: flex;
  height: 88px;
  align-items: center;
  gap: 12px;
  padding: 16px 20px;
}

.ad-card__avatar {
  display: grid;
  width: 48px;
  height: 48px;
  flex: 0 0 auto;
  place-items: center;
  border-radius: 50%;
  color: var(--white);
  background: var(--black);
  font-size: 13px;
  font-weight: 700;
}

.ad-card__account > span:nth-child(2) { min-width: 0; }
.ad-card__account strong,
.ad-card__account small { display: block; }
.ad-card__account strong { overflow: hidden; font-size: 15px; text-overflow: ellipsis; white-space: nowrap; }
.ad-card__account small { margin-top: 4px; color: #777; font-size: 11px; }
.ad-card__account b { margin-left: auto; letter-spacing: 2px; }

.ad-card__visual {
  position: relative;
  height: 590px;
  overflow: hidden;
  color: var(--white);
  background: var(--black);
}

.ad-card__visual img {
  position: absolute;
  z-index: 1;
  right: -9%;
  bottom: 2%;
  display: block;
  width: 92%;
  height: 66%;
  object-fit: contain;
  filter: drop-shadow(0 28px 24px rgba(0, 0, 0, .4));
}

.ad-card__label,
.ad-card__visual > strong { position: absolute; z-index: 3; left: 38px; }
.ad-card__label { top: 42px; color: var(--orange); font-size: 12px; letter-spacing: .08em; }

.ad-card__visual > strong {
  top: 80px;
  max-width: 78%;
  font-size: 54px;
  line-height: .9;
  letter-spacing: -.045em;
}

.ad-card__shape {
  position: absolute;
  right: -90px;
  top: -100px;
  width: 260px;
  height: 260px;
  border: 42px solid var(--orange);
  transform: rotate(24deg);
}

.ad-card__action {
  display: flex;
  min-height: 98px;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 18px 20px;
}

.ad-card__action span { min-width: 0; }
.ad-card__action small,
.ad-card__action strong { display: block; }
.ad-card__action small { color: #777; font-size: 10px; }
.ad-card__action strong { margin-top: 7px; overflow: hidden; font-size: 14px; text-overflow: ellipsis; white-space: nowrap; }

.ad-card__action > b {
  flex: 0 0 auto;
  padding: 13px 16px;
  border-radius: 6px;
  color: var(--white);
  background: var(--black);
  font-size: 11px;
}

.campaign-notes {
  display: flex;
  min-height: 776px;
  flex-direction: column;
  align-self: center;
  padding: 36px 28px;
  border-radius: 28px;
  color: var(--white);
  background: var(--black);
}

.campaign-notes > span { margin-bottom: auto; color: #777; font-size: 11px; letter-spacing: .08em; }
.campaign-notes > div { padding: 24px 0; border-top: 1px solid #333; }
.campaign-notes small,
.campaign-notes strong { display: block; }
.campaign-notes small { color: #777; font-size: 10px; }
.campaign-notes strong { margin-top: 12px; font-size: 16px; line-height: 1.05; }

/* Compact, data-led related work. The original panels reserved almost a full
   viewport after their content, which created the large blank bands. */
.related-work {
  height: auto;
  padding-top: 130px;
}

.related-work__header {
  display: grid;
  grid-template-columns: minmax(170px, .4fr) minmax(480px, 1fr) minmax(260px, .48fr);
  gap: clamp(36px, 5vw, 100px);
  align-items: end;
  padding: 0 clamp(48px, 7vw, 136px) 110px;
  opacity: 0;
  transform: translateY(64px);
  transition: opacity .9s ease, transform .9s cubic-bezier(.16, 1, .3, 1);
}

.related-work__header.is-visible { opacity: 1; transform: none; }

.related-work__header > span {
  align-self: start;
  padding-top: 12px;
  color: #777;
  font-size: 12px;
  letter-spacing: .09em;
}

.related-work__header h2 {
  font-size: clamp(68px, 5vw, 96px);
  font-weight: 700;
  line-height: .88;
  letter-spacing: -.055em;
}

.related-work__header p {
  max-width: 390px;
  padding-bottom: 4px;
  color: #555;
  font-size: 18px;
  line-height: 1.08;
}

#related-projects { display: contents; }

.related-work .work-panel { height: 760px; }

.related-work .project {
  opacity: 0;
  transform: translateY(52px);
  transition: opacity .85s ease, transform .95s cubic-bezier(.16, 1, .3, 1);
}

.related-work .project.is-visible { opacity: 1; transform: none; }

.project-impact {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 6px 12px;
  align-items: end;
  max-width: 620px;
  margin-top: 34px;
  padding: 20px 0 18px;
  border-top: 1px solid currentColor;
  border-bottom: 1px solid currentColor;
}

.project-impact small {
  grid-column: 1 / -1;
  color: currentColor;
  font-size: 10px;
  letter-spacing: .1em;
  opacity: .64;
}

.project-impact strong {
  color: inherit;
  font-size: 46px;
  font-weight: 700;
  line-height: .86;
  letter-spacing: -.05em;
}

.project-impact > span {
  align-self: end;
  padding-bottom: 4px;
  font-size: 14px;
  line-height: 1;
}

.project-impact b {
  align-self: center;
  font-size: 13px;
  font-weight: 500;
}

.work-panel--more { height: 760px !important; }

@media (max-width: 1200px) {
  .impact-proof,
  .campaign-showcase { padding: 12px; }
  .impact-proof__shell,
  .campaign-showcase__shell { min-height: 0; padding: 80px 6vw; border-radius: 44px; }
  .impact-proof__header { grid-template-columns: 1fr; gap: 64px; }
  .impact-proof__header > p { max-width: 680px; }
  .impact-metrics { grid-template-columns: repeat(2, 1fr); margin-top: 100px; }
  .impact-metric:nth-child(2) { border-right: 0; }
  .impact-metric:nth-child(-n + 2) { border-bottom: 1px solid #353535; }
  .impact-dashboard { grid-template-columns: 1fr; }
  .impact-trend { grid-template-columns: minmax(0, 1fr) 230px; }
  .campaign-showcase__shell { grid-template-columns: 1fr; gap: 90px; }
  .campaign-copy { max-width: 760px; }
  .ad-stage { justify-content: center; }
  .related-work { padding-top: 100px; }
  .related-work__header {
    grid-template-columns: 1fr;
    gap: 38px;
    padding: 0 7vw 80px;
  }
  .related-work__header > span { padding-top: 0; }
  .related-work__header p { max-width: 620px; }
  .related-work .work-panel { height: auto; }
  .related-work .project { min-height: 880px; }
}

@media (max-width: 720px) {
  .editorial-project-image { padding: 24px; }
  .impact-proof__shell,
  .campaign-showcase__shell { padding: 64px 24px 32px; border-radius: 30px; }
  .impact-proof__header h2,
  .campaign-copy h2 { font-size: 16vw; line-height: .88; }
  .impact-proof__header > p,
  .campaign-copy > p { font-size: 21px; }
  .impact-metrics { grid-template-columns: 1fr; margin-top: 72px; }
  .impact-metric { min-height: 260px; border-right: 0; border-bottom: 1px solid #353535; }
  .impact-metric:last-child { border-bottom: 0; }
  .impact-metric > strong { font-size: 72px; }
  .impact-chart,
  .impact-funnel { min-height: 0; padding: 32px 20px; border-radius: 24px; }
  .impact-trend {
    min-height: 0;
    grid-template-columns: 1fr;
    gap: 28px;
    padding: 32px 20px;
    border-radius: 24px;
  }
  .impact-trend > .impact-module__head { grid-column: auto; }
  .impact-trend__plot { padding-top: 6px; }
  .impact-trend__point text { font-size: 26px; }
  .impact-trend__summary {
    padding: 28px 0 0;
    border-top: 1px solid #383838;
    border-left: 0;
  }
  .impact-trend__summary strong { margin-top: 22px; }
  .impact-trend__summary p { max-width: 430px; margin-top: 38px; }
  .impact-module__head { align-items: flex-start; gap: 20px; }
  .impact-module__head strong { text-align: right; }
  .funnel-steps { grid-template-columns: 1fr; }
  .funnel-step:not(:last-child)::after { top: auto; right: 4px; bottom: -24px; transform: rotate(90deg); }
  .funnel-step strong { margin-top: 14px; }
  .impact-levers { margin-top: 48px; }
  .impact-disclaimer { margin-top: 36px; }
  .campaign-showcase__shell {
    grid-template-columns: minmax(0, 1fr);
    gap: 64px;
  }
  .campaign-copy,
  .ad-stage,
  .ad-card,
  .campaign-notes { width: 100%; min-width: 0; }
  .campaign-signal { align-items: flex-start; gap: 20px; }
  .campaign-signal strong { text-align: right; }
  .ad-stage { display: block; }
  .ad-card__account,
  .ad-card__action { min-width: 0; }
  .ad-card__action span { overflow: hidden; }
  .ad-card__visual { height: 430px; }
  .ad-card__visual > strong { left: 24px; max-width: 78%; font-size: 40px; }
  .ad-card__label { left: 24px; }
  .campaign-notes { min-height: 480px; margin-top: 18px; }
  .more-projects__arrows { inset: 0; }
  .related-work { padding-top: 74px; }
  .related-work__header { gap: 28px; padding: 0 24px 62px; }
  .related-work__header h2 { font-size: 14.5vw; }
  .related-work__header p { font-size: 17px; }
  .related-work .work-panel { min-height: 0; }
  .related-work .project { min-height: 720px; }
  .project-impact { grid-template-columns: auto minmax(0, 1fr); margin-top: 26px; }
  .project-impact b { grid-column: 1 / -1; }
  .project-impact strong { font-size: 38px; }
  .work-panel--more { height: 520px !important; min-height: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .impact-proof__header,
  .impact-metric,
  .impact-dashboard,
  .campaign-copy,
  .ad-stage,
  .related-work__header,
  .related-work .project { opacity: 1 !important; transform: none !important; transition: none !important; }
  .impact-bar__track i { transition: none !important; }
  .impact-trend__area { opacity: 1 !important; transition: none !important; }
  .impact-trend__line { stroke-dashoffset: 0 !important; transition: none !important; }
}