@font-face {
  font-family: "Inter";
  src: url("../fonts/InterVariable.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Playfair Display";
  src: url("../fonts/playfair-display.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Special Elite";
  src: url("../fonts/special-elite.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: block;
}

:root {
  color-scheme: light;
  --color-ink: #16212a;
  --color-ink-soft: #42505a;
  --color-muted: #65727b;
  --color-paper: #ffffff;
  --color-soft: #edf2f3;
  --color-slate: #d5dddf;
  --color-dark: #18262f;
  --color-dark-2: #20323d;
  --color-accent: #55636d;
  --color-accent-strong: #42505a;
  --color-line: rgba(22, 33, 42, .12);
  --color-line-strong: rgba(22, 33, 42, .2);
  --shadow-soft: 0 24px 70px rgba(22, 33, 42, .1);
  --shadow-dark: 0 36px 90px rgba(0, 0, 0, .26);
  --radius: 4px;
  --site-max: 1440px;
  --content-max: 1284px;
  --pad-x: clamp(22px, 5.4vw, 78px);
  --section-y: clamp(74px, 8.4vw, 118px);
  --section-y-compact: clamp(44px, 5.2vw, 72px);
  --font-body: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-display: "Playfair Display", Georgia, serif;
}

* { box-sizing: border-box; }
html {
  scroll-behavior: smooth;
  background: #eef2f5;
  color: var(--color-ink);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.5;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}
body { margin: 0; }
img, svg, video { display: block; max-width: 100%; }
button, input, textarea, select { font: inherit; }
a { color: inherit; }
:focus-visible { outline: 3px solid #8fa0aa; outline-offset: 4px; }
::selection { background: var(--color-accent); color: white; }

.skip-link {
  position: fixed;
  left: 16px;
  top: 12px;
  z-index: 100;
  transform: translateY(-160%);
  padding: 10px 14px;
  border-radius: 999px;
  background: var(--color-dark);
  color: white;
  font-weight: 750;
  text-decoration: none;
  box-shadow: var(--shadow-soft);
}
.skip-link:focus { transform: translateY(0); }

.site-header,
main,
.site-footer {
  width: min(var(--site-max), 100%);
  margin-inline: auto;
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 30;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: clamp(20px, 3vw, 40px);
  padding: clamp(16px, 2.1vw, 28px) var(--pad-x);
  background: rgba(255, 255, 255, .88);
  border-bottom: 1px solid var(--color-line);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}
.brand,
.footer-brand {
  display: inline-flex;
  align-items: center;
  width: clamp(84px, 7.4vw, 126px);
  text-decoration: none;
}
.brand img,
.footer-brand img {
  width: 100%;
  height: auto;
  object-fit: contain;
}
.primary-nav {
  justify-self: end;
  display: flex;
  align-items: center;
  gap: clamp(16px, 2.35vw, 34px);
  color: var(--color-ink);
  font-size: clamp(12px, .88vw, 14px);
  font-weight: 650;
}
.primary-nav a {
  position: relative;
  padding-block: 8px;
  text-decoration: none;
  opacity: .84;
}
.primary-nav a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 1px;
  height: 1px;
  transform: scaleX(0);
  transform-origin: left;
  background: currentColor;
  transition: transform .2s ease;
}
.primary-nav a:hover,
.primary-nav a:focus-visible { opacity: 1; }
.primary-nav a:hover::after,
.primary-nav a:focus-visible::after { transform: scaleX(1); }
.header-cta { white-space: nowrap; }
.nav-toggle { display: none; }

main {
  overflow: clip;
  background: var(--color-paper);
  box-shadow: var(--shadow-soft);
}
.section {
  position: relative;
  isolation: isolate;
  padding: var(--section-y) var(--pad-x);
}
.section--compact { padding-block: var(--section-y-compact); }
.section--soft { background: var(--color-soft); }
.section--slate { background: var(--color-slate); }
.section--dark {
  background: linear-gradient(135deg, var(--color-dark), var(--color-dark-2));
  color: white;
}
.section h1,
.section h2,
.section h3 {
  margin: 0;
  line-height: .98;
  letter-spacing: -.052em;
  text-wrap: balance;
}
.section h1,
.section h2 {
  font-family: var(--font-display);
  font-weight: 400;
}
.section h1 {
  font-size: clamp(4.1rem, 9.2vw, 8.45rem);
  line-height: .85;
  letter-spacing: -.074em;
}
.section h2 { font-size: clamp(2.35rem, 4.7vw, 4.75rem); }
.section h3 {
  font-family: var(--font-body);
  font-size: clamp(1rem, 1.15vw, 1.2rem);
  font-weight: 700;
  line-height: 1.18;
  letter-spacing: -.025em;
}
p { margin: 0; }
.eyebrow,
.section-kicker {
  margin: 0;
  color: var(--color-accent);
  font-size: .74rem;
  font-weight: 850;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.section--dark .eyebrow,
.section--dark .section-kicker { color: rgba(255, 255, 255, .72); }
.lead {
  max-width: 36rem;
  color: #17385d;
  font-size: clamp(1.08rem, 1.55vw, 1.38rem);
  line-height: 1.35;
}
.button-row { display: flex; flex-wrap: wrap; align-items: center; gap: 18px 26px; }
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 48px;
  padding: 12px 20px;
  border: 1px solid transparent;
  border-radius: var(--radius);
  font-size: .9rem;
  font-weight: 750;
  line-height: 1;
  text-decoration: none;
  transition: transform .2s ease, background-color .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.btn:hover { transform: translateY(-1px); }
.btn--primary {
  background: var(--color-accent);
  color: white;
  box-shadow: 0 12px 26px rgba(66, 80, 90, .2);
}
.btn--primary:hover { background: var(--color-accent-strong); }
.btn--ghost {
  border-color: rgba(255, 255, 255, .38);
  color: white;
  background: rgba(255, 255, 255, .02);
}
.btn--ghost:hover { border-color: rgba(255, 255, 255, .68); background: rgba(255, 255, 255, .08); }
.text-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--color-accent-strong);
  font-weight: 750;
  text-decoration: none;
}
.text-link:hover { text-decoration: underline; text-underline-offset: 5px; }

.hero {
  min-height: clamp(650px, 75vh, 900px);
  display: grid;
  grid-template-columns: minmax(360px, .46fr) minmax(0, 1fr);
  align-items: center;
  background: #fff;
  overflow: hidden;
}
.hero::before {
  content: "";
  position: absolute;
  inset: 0 0 0 42%;
  z-index: -2;
  background-image: image-set(url("../img/hero-on-air.webp") type("image/webp"), url("../img/hero-on-air.jpg") type("image/jpeg"));
  background-repeat: no-repeat;
  background-position: left center;
  background-size: cover;
}
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(90deg, #fff 0%, #fff 30%, rgba(255,255,255,.96) 38%, rgba(255,255,255,.70) 49%, rgba(255,255,255,.24) 61%, rgba(255,255,255,0) 75%),
    linear-gradient(180deg, rgba(255,255,255,.72) 0%, rgba(255,255,255,0) 18%, rgba(255,255,255,0) 78%, rgba(255,255,255,.54) 100%);
}
.hero__content {
  max-width: 650px;
  display: grid;
  gap: clamp(18px, 2.1vw, 30px);
}

.hero-question-kicker {
  max-width: 29rem;
  margin-top: clamp(18px, 3.2vw, 42px);
  margin-bottom: clamp(-18px, -1.2vw, -8px);
  color: var(--color-ink-soft);
  font-family: var(--font-body);
  font-size: clamp(1.1rem, 1.52vw, 1.46rem);
  font-weight: 550;
  line-height: 1.2;
}
.hero .button-row { margin-top: 2px; }

.belief {
  display: grid;
  grid-template-columns: minmax(150px, .36fr) minmax(0, 1fr);
  gap: clamp(28px, 5vw, 68px);
  align-items: center;
}
.belief__copy {
  max-width: 780px;
  display: grid;
  gap: clamp(28px, 3.2vw, 44px);
}
.belief__copy p {
  font-size: clamp(1.35rem, 2.25vw, 2.15rem);
  line-height: 1.16;
  letter-spacing: -.028em;
  text-wrap: balance;
}
.belief__copy p:nth-child(2) {
  color: var(--color-ink-soft);
  font-size: clamp(1.12rem, 1.75vw, 1.65rem);
}
.belief__copy p:nth-child(3) {
  color: var(--color-accent-strong);
  font-size: clamp(1.45rem, 2.55vw, 2.45rem);
}

.clients { background: #fff; }
.logo-grid,
.award-grid {
  list-style: none;
  display: grid;
  margin: clamp(28px, 4vw, 46px) 0 0;
  padding: 0;
}
.logo-grid {
  grid-template-columns: repeat(4, minmax(130px, 1fr));
  gap: 12px;
}
.logo-grid li,
.award-grid li {
  min-height: 70px;
  display: grid;
  place-items: center;
  background: rgba(255, 255, 255, .7);
  border: 1px solid rgba(22, 33, 42, .08);
}
.logo-grid img,
.award-grid img {
  width: min(74%, 142px);
  height: 46px;
  object-fit: contain;
  filter: saturate(.8) contrast(1.04);
}

.showreel {
  display: grid;
  grid-template-columns: minmax(260px, .62fr) minmax(0, .88fr);
  gap: clamp(28px, 4.4vw, 64px);
  align-items: center;
  min-height: clamp(440px, 42vw, 540px);
  padding-block: clamp(54px, 6.2vw, 86px);
}
.showreel::before,
.ki::before,
.final-cta::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(circle at 16% 22%, rgba(255, 255, 255, .07), transparent 25%),
    linear-gradient(135deg, rgba(255,255,255,.03), transparent 42%);
  pointer-events: none;
}
.showreel {
  --showreel-title-size: clamp(1.95rem, 3.5vw, 3.35rem);
  --showreel-title-leading: 1.04;
  --showreel-title-weight: 400;
  --showreel-copy-gap: 30px;
  --showreel-copy-align: start;
  --showreel-copy-offset: 0;
  --showreel-body-size: 1rem;
  --showreel-body-color: rgba(255,255,255,.78);
  --showreel-frame-radius: 4px;
  --showreel-frame-border: 1px solid rgba(255,255,255,.14);
  --showreel-frame-bg: #0f1920;
  --showreel-frame-shadow: -18px 18px 0 rgba(184,147,46,.14), var(--shadow-dark);
  --showreel-frame-padding: 0;
  --showreel-frame-transform: rotate(1deg);
  --showreel-frame-aspect: 12 / 5;
}

.showreel__copy {
  display: grid;
  gap: var(--showreel-copy-gap);
  align-content: center;
  justify-items: var(--showreel-copy-align);
  transform: translateY(var(--showreel-copy-offset));
}

.showreel__copy h2 {
  max-width: var(--showreel-title-max, 11ch);
  font-size: var(--showreel-title-size);
  font-weight: 400;
  line-height: var(--showreel-title-leading);
}

.showreel__copy p:not(.eyebrow) {
  max-width: var(--showreel-body-max, 25rem);
  color: var(--showreel-body-color);
  font-size: var(--showreel-body-size);
}

.showreel-video-frame {
  position: relative;
  aspect-ratio: var(--showreel-frame-aspect);
  min-height: 0;
  padding: var(--showreel-frame-padding);
  border: var(--showreel-frame-border);
  border-radius: var(--showreel-frame-radius);
  background: var(--showreel-frame-bg);
  box-shadow: var(--showreel-frame-shadow);
  transform: var(--showreel-frame-transform);
  overflow: hidden;
  isolation: isolate;
}

.showreel-video-frame::before,
.showreel-video-frame::after {
  content: "";
  position: absolute;
  inset: var(--showreel-frame-pseudo-inset, 0);
  z-index: -1;
  border-radius: inherit;
  pointer-events: none;
}

.showreel-video {
  width: 100%;
  height: 100%;
  aspect-ratio: inherit;
  object-fit: cover;
  border-radius: calc(var(--showreel-frame-radius) - var(--showreel-frame-padding));
  background: #0f1920;
}

@media (max-width: 520px) {
  .showreel {
    --showreel-title-size: clamp(2.35rem, 4.7vw, 4.75rem);
    --showreel-title-leading: 1.04;
    --showreel-copy-gap: 18px;
    --showreel-body-size: 1rem;
  }

  .showreel-video-frame {
    width: 90%;
    margin-inline: auto;
  }

  .showreel-video {
    min-height: 0;
  }
}

.awards {
  display: grid;
  grid-template-columns: minmax(240px, .72fr) minmax(0, 1fr);
  align-items: center;
  gap: clamp(26px, 5vw, 68px);
}
.awards__copy { display: grid; gap: 16px; }
.awards__copy p:last-child {
  max-width: 29rem;
  color: var(--color-ink-soft);
  font-size: clamp(1.02rem, 1.35vw, 1.25rem);
  font-weight: 650;
  line-height: 1.42;
}
.award-grid {
  grid-template-columns: repeat(6, minmax(86px, 1fr));
  gap: 10px;
  margin: 0;
}
.award-grid li { min-height: 66px; }
.award-grid img { height: 42px; width: min(78%, 112px); }

.audio {
  display: grid;
  grid-template-columns: minmax(0, .92fr) minmax(280px, .72fr);
  gap: clamp(34px, 6vw, 82px);
  align-items: center;
  min-height: 700px;
  overflow: hidden;
}
.audio::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -3;
  background-image: image-set(url("../img/audio-monitoring-atc.webp") type("image/webp"), url("../img/audio-monitoring-atc.jpg") type("image/jpeg"));
  background-position: center;
  background-size: cover;
  opacity: .92;
  filter: saturate(.86) contrast(1.08);
}
.audio::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  background: linear-gradient(135deg, rgba(24,38,47,.94), rgba(32,50,61,.84));
}
.glass-card {
  padding: clamp(24px, 3.2vw, 42px);
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(20, 30, 38, .42);
  box-shadow: 0 28px 90px rgba(0,0,0,.16);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.glass-card--light {
  border-color: rgba(255,255,255,.35);
  background: rgba(255,255,255,.74);
  box-shadow: 0 22px 70px rgba(22,33,42,.12);
}
.audio__copy { display: grid; gap: 22px; }
.audio__copy h2 { max-width: 730px; }
.audio__copy h2 span { color: rgba(255,255,255,.72); }
.audio__copy p { max-width: 37rem; color: rgba(255,255,255,.78); }
.audio__copy .bridge {
  color: white;
  font-size: clamp(1.05rem, 1.45vw, 1.28rem);
  font-weight: 750;
}
.audio-demo {
  display: grid;
  grid-template-columns: .8fr 1fr;
  min-height: 330px;
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(15,25,32,.36);
}
.audio-demo__visual {
  display: grid;
  align-content: center;
  gap: 20px;
  padding: 26px;
  border-right: 1px solid rgba(255,255,255,.14);
}
.audio-demo__visual p {
  max-width: 8rem;
  color: rgba(255,255,255,.88);
  font-weight: 850;
  line-height: 1.08;
}
.audio-demo__meter {
  display: block;
  width: 13px;
  height: 120px;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(255,255,255,.96), #7eb7ff 48%, var(--color-accent));
  box-shadow: 0 0 34px rgba(126,183,255,.38);
}
.tone-switch {
  display: grid;
  align-content: center;
  gap: 10px;
  padding: 26px;
}
.tone-switch > p {
  margin-bottom: 6px;
  color: rgba(255,255,255,.68);
  font-size: .72rem;
  font-weight: 850;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.tone {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  width: 100%;
  padding: 10px 13px;
  border: 1px solid rgba(255,255,255,.28);
  border-radius: 999px;
  background: rgba(255,255,255,.03);
  color: white;
  cursor: pointer;
  text-align: left;
  transition: background-color .2s ease, border-color .2s ease, transform .2s ease;
}
.tone:hover { transform: translateY(-1px); border-color: rgba(255,255,255,.5); }
.tone.is-active { background: var(--color-accent); border-color: var(--color-accent); }
.audio-demo[data-audio-state="tension"] .audio-demo__meter { background: linear-gradient(180deg, #fff, #d7a65c 50%, #a85a3d); }
.audio-demo[data-audio-state="calm"] .audio-demo__meter { background: linear-gradient(180deg, #fff, #adc7c6 50%, #71818d); }

.section--studio {
  display: grid;
  grid-template-columns: minmax(280px, .62fr) minmax(0, .92fr) minmax(220px, .42fr);
  gap: clamp(28px, 4vw, 56px);
  align-items: center;
  min-height: 690px;
  background: #fff;
  overflow: hidden;
}
.section--studio::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -3;
  background-image: image-set(url("../img/studio-regie-bw.webp") type("image/webp"), url("../img/studio-regie-bw.jpg") type("image/jpeg"));
  background-position: center;
  background-size: cover;
  opacity: .18;
  filter: grayscale(.1);
}
.section--studio::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  background: linear-gradient(90deg, rgba(255,255,255,.92), rgba(255,255,255,.74) 44%, rgba(255,255,255,.95));
}
.studio__copy {
  display: grid;
  gap: 20px;
}
.studio__copy h2 { font-size: clamp(2.1rem, 3.7vw, 3.8rem); }
.studio__copy h2 span { color: var(--color-accent-strong); }
.studio__copy p { color: var(--color-ink-soft); }
.studio__photo {
  margin: 0;
  min-height: 360px;
  background: var(--color-dark);
  box-shadow: 0 26px 80px rgba(22,33,42,.18);
  overflow: hidden;
}
.studio__photo picture,
.studio__photo img { width: 100%; height: 100%; }
.studio__photo img { object-fit: cover; object-position: center; }
.studio__note {
  align-self: end;
  padding-bottom: clamp(18px, 4vw, 62px);
  color: var(--color-ink-soft);
  font-weight: 650;
  line-height: 1.55;
}

.strategy {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: 1px;
  row-gap: clamp(18px, 2.2vw, 30px);
  padding-inline: var(--pad-x);
}
.strategy-section-kicker {
  grid-column: 1 / -1;
  justify-self: start;
}
.strategy-card {
  min-height: 420px;
  display: grid;
  align-content: start;
  gap: 24px;
  padding: clamp(28px, 3.2vw, 44px);
  background: rgba(255,255,255,.76);
  border: 1px solid rgba(22,33,42,.08);
}
.strategy-card h2 { font-size: clamp(1.75rem, 2.35vw, 2.75rem); }
.strategy-card p { color: var(--color-ink-soft); line-height: 1.58; }
.person-card {
  gap: clamp(22px, 2.45vw, 32px);
}
.person-card__copy {
  display: grid;
  gap: 18px;
}
.person-card .person-card__badge {
  width: fit-content;
  margin: 0 0 -2px;
  border-radius: 999px;
  padding: 7px 11px;
  border: 1px solid rgba(196,170,98,.45);
  background: rgba(216,193,131,.16);
  color: var(--color-ink);
  font-size: .76rem;
  font-weight: 830;
  letter-spacing: .09em;
  line-height: 1.1;
  text-transform: uppercase;
}
.person-card .person-card__lead {
  margin: 0;
  color: var(--color-ink-soft);
  line-height: 1.58;
}
.person-card__feature {
  display: grid;
  gap: 18px;
  min-width: 0;
}
.person-card__photo {
  height: clamp(245px, 22vw, 315px);
  border-radius: 30px;
  overflow: hidden;
  background: #d8dad4;
  border: 1px solid rgba(22,33,42,.08);
  box-shadow: 0 30px 90px rgba(22,33,42,.14);
}
.person-card__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 24%;
}
.person-card__panel {
  display: grid;
  gap: 6px;
  padding: 18px 20px 20px;
  border-radius: 26px;
  border: 1px solid rgba(196,170,98,.35);
  background: linear-gradient(135deg, rgba(255,255,255,.86), rgba(216,193,131,.12));
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.52);
}
.person-card .person-card__name {
  margin: 0;
  color: var(--color-ink);
  font-size: 1.06rem;
  font-weight: 850;
  line-height: 1.04;
}
.person-card .person-card__role {
  width: fit-content;
  margin: -2px 0 0;
  color: var(--color-muted);
  font-size: .84rem;
  font-weight: 660;
  letter-spacing: .015em;
  line-height: 1.25;
  text-transform: none;
}
.person-card .person-card__statement {
  margin: 7px 0 0;
  color: var(--color-ink-soft);
  font-size: .98rem;
  font-weight: 520;
  line-height: 1.52;
}

.icon-mark {
  width: 46px;
  height: 46px;
  border: 2px solid var(--color-accent-strong);
  border-radius: 50%;
}

.ki {
  display: grid;
  grid-template-columns: 90px minmax(260px, .7fr) minmax(280px, 1fr);
  gap: clamp(26px, 5vw, 70px);
  align-items: center;
}
.ki__mark,
.chat-mark {
  display: block;
  width: 58px;
  height: 58px;
  border: 1px solid rgba(255,255,255,.22);
  border-radius: 50%;
}
.ki h2 { font-size: clamp(2rem, 3.6vw, 3.7rem); }
.ki p {
  max-width: 42rem;
  color: rgba(255,255,255,.72);
  line-height: 1.65;
}

.service-ribbons {
  --service-ribbon-duration: 900ms;
  display: grid;
  gap: 12px;
  margin-top: clamp(30px, 4.5vw, 54px);
}
.service-ribbon {
  display: grid;
  grid-template-columns: minmax(178px, .42fr) minmax(0, 1fr);
  align-items: stretch;
  overflow: hidden;
  background: #fff;
  border: 1px solid rgba(22,33,42,.1);
  border-radius: 999px;
  box-shadow: 0 8px 28px rgba(22,33,42,.055);
}
.service-ribbon h3 {
  display: grid;
  align-content: center;
  align-self: center;
  min-height: 52px;
  height: auto;
  margin: 8px;
  padding: 10px 20px;
  border-radius: 999px;
  background: var(--color-ink);
  color: #fff;
  font-size: clamp(1rem, 1.28vw, 1.18rem);
  line-height: 1.18;
}
.service-ribbon p {
  display: grid;
  align-content: center;
  min-height: 68px;
  margin: 0;
  padding: 18px clamp(18px, 2vw, 24px);
  color: var(--color-muted);
  font-size: .95rem;
  line-height: 1.5;
}
.js .service-ribbons[data-service-ribbons] .service-ribbon {
  opacity: .18;
  filter: grayscale(1) blur(5px);
  transform: scale(.985);
}
.js .service-ribbons[data-service-ribbons].is-in-view .service-ribbon {
  animation: service-ribbon-soft-focus var(--service-ribbon-duration) ease both;
}
@keyframes service-ribbon-soft-focus {
  0% { opacity: .18; filter: grayscale(1) blur(5px); transform: scale(.985); }
  100% { opacity: 1; filter: grayscale(0) blur(0); transform: scale(1); }
}

.final-cta {
  min-height: 510px;
  display: grid;
  justify-items: center;
  align-content: center;
  gap: 24px;
  text-align: center;
}
.final-cta h2 { max-width: 840px; }
.final-cta p { max-width: 33rem; color: rgba(255,255,255,.72); }

.site-footer {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 28px;
  align-items: center;
  padding: 28px var(--pad-x) 34px;
  background: #fff;
  border-top: 1px solid var(--color-line);
  color: var(--color-muted);
  font-size: .9rem;
}
.site-footer nav {
  justify-self: center;
  display: flex;
  flex-wrap: wrap;
  gap: 14px 26px;
}
.site-footer a { text-decoration: none; }
.site-footer a:hover { color: var(--color-ink); text-decoration: underline; text-underline-offset: 5px; }
.site-footer p { justify-self: end; }
.footer-brand { width: 78px; opacity: .78; }

.legal-page {
  min-height: 100vh;
  background: #eef2f5;
}
.legal-main {
  width: min(920px, calc(100% - 36px));
  margin: 48px auto;
  padding: clamp(28px, 5vw, 56px);
  background: #fff;
  box-shadow: var(--shadow-soft);
}
.legal-main h1,
.legal-main h2 {
  margin: 0;
  font-family: var(--font-display);
  letter-spacing: -.045em;
  line-height: 1;
}
.legal-main h1 { font-size: clamp(2.4rem, 5vw, 4rem); font-weight: 400; }
.legal-main h2 { margin-top: 34px; font-size: 1.55rem; font-weight: 400; }
.legal-main p,
.legal-main li { color: var(--color-ink-soft); line-height: 1.65; }
.legal-main p { margin-top: 18px; }
.legal-main ul { margin: 14px 0 0; padding-left: 1.3rem; }
.legal-main .btn { margin-top: 30px; }
.legal-note {
  padding: 16px 18px;
  border: 1px solid rgba(142, 110, 76, .25);
  background: #fff8ed;
  color: #5a4227 !important;
}

@media (max-width: 1120px) {
  .site-header { grid-template-columns: auto auto 1fr; }
  .header-cta { justify-self: end; }
  .primary-nav { grid-column: 1 / -1; justify-self: start; }
  .showreel,
  .audio,
  .section--studio { grid-template-columns: 1fr; }
  .section--studio { min-height: auto; }
  .studio__photo { min-height: 310px; }
  .strategy { grid-template-columns: 1fr; }
  .strategy-card { min-height: auto; }
  .ki { grid-template-columns: 64px 1fr; }
  .ki p { grid-column: 2; }
}

@media (max-width: 820px) {
  .site-header {
    grid-template-columns: auto 1fr auto;
    gap: 14px;
  }
  .brand { width: 86px; }
  .nav-toggle {
    justify-self: end;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-height: 42px;
    padding: 8px 12px;
    border: 1px solid var(--color-line-strong);
    border-radius: 999px;
    background: rgba(255,255,255,.7);
    color: var(--color-ink);
    cursor: pointer;
    font-weight: 750;
  }
  .nav-toggle__bars,
  .nav-toggle__bars::before,
  .nav-toggle__bars::after {
    display: block;
    width: 18px;
    height: 2px;
    background: currentColor;
    transition: transform .2s ease, opacity .2s ease;
  }
  .nav-toggle__bars { position: relative; }
  .nav-toggle__bars::before,
  .nav-toggle__bars::after {
    content: "";
    position: absolute;
    left: 0;
  }
  .nav-toggle__bars::before { top: -6px; }
  .nav-toggle__bars::after { top: 6px; }
  .nav-toggle[aria-expanded="true"] .nav-toggle__bars { transform: rotate(45deg); }
  .nav-toggle[aria-expanded="true"] .nav-toggle__bars::before { opacity: 0; }
  .nav-toggle[aria-expanded="true"] .nav-toggle__bars::after { transform: translateY(-6px) rotate(-90deg); }
  .primary-nav {
    grid-column: 1 / -1;
    width: 100%;
    display: grid;
    gap: 4px;
    padding: 14px 0 4px;
    border-top: 1px solid var(--color-line);
  }
  .js .primary-nav:not([data-open="true"]) { display: none; }
  .primary-nav a { padding: 11px 0; }
  .primary-nav a::after { display: none; }
  .header-cta { display: none; }

  .hero {
    grid-template-columns: 1fr;
    min-height: auto;
    padding-top: clamp(46px, 10vw, 74px);
    padding-bottom: clamp(300px, 62vw, 450px);
  }
  .hero::before {
    inset: auto 0 0 0;
    height: clamp(270px, 58vw, 430px);
    background-image: image-set(url("../img/hero-on-air-mobile.webp") type("image/webp"), url("../img/hero-on-air-mobile.jpg") type("image/jpeg"));
    background-position: center bottom;
    background-size: contain;
  }
  .hero::after {
    background:
      linear-gradient(180deg, #fff 0%, #fff 54%, rgba(255,255,255,.92) 64%, rgba(255,255,255,.34) 82%, rgba(255,255,255,0) 100%),
      linear-gradient(90deg, rgba(255,255,255,.84), rgba(255,255,255,0));
  }
  .belief { grid-template-columns: 1fr; }
  .logo-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .awards { grid-template-columns: 1fr; }
  .award-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .audio-demo { grid-template-columns: 1fr; }
  .audio-demo__visual { border-right: 0; border-bottom: 1px solid rgba(255,255,255,.14); }
  .section--studio::before { opacity: .1; }
  .ki { grid-template-columns: 1fr; }
  .ki p { grid-column: auto; }
  .service-ribbon { grid-template-columns: 1fr; border-radius: 22px; }
  .service-ribbon h3 { min-height: 0; margin: 8px 8px 0; padding-bottom: 12px; border-radius: 18px; }
  .service-ribbon p { min-height: 0; padding-top: 16px; }
  .site-footer { grid-template-columns: 1fr; justify-items: start; }
  .site-footer nav { justify-self: start; }
  .site-footer p { justify-self: start; }
}

@media (max-width: 520px) {
  :root { --pad-x: 20px; }
  .section h1 { font-size: clamp(3.6rem, 18vw, 5.5rem); }
  .hero { padding-bottom: clamp(270px, 74vw, 360px); }
  .hero .button-row { align-items: stretch; }
  .hero .btn { width: 100%; }
  .logo-grid li,
  .award-grid li { min-height: 58px; }
  .audio-demo__visual,
  .tone-switch,
  .glass-card,
  .strategy-card { padding: 22px; }
  .person-card { gap: 18px; }
  .person-card__copy { gap: 14px; }
  .person-card .person-card__badge { font-size: .70rem; padding: 7px 10px; }
  .person-card__feature { gap: 14px; }
  .person-card__photo {
    height: 210px;
    width: 100%;
    border-radius: 24px;
    box-shadow: 0 20px 55px rgba(22,33,42,.10);
  }
  .person-card__photo img { object-position: center 19%; }
  .person-card__panel { border-radius: 24px; padding: 17px 18px 18px; }
  .person-card .person-card__name { font-size: 1.02rem; }
  .person-card .person-card__role { font-size: .82rem; margin-top: -3px; }
  .person-card .person-card__statement { font-weight: 500; }

  .service-ribbon h3,
  .service-ribbon p { padding-left: 20px; padding-right: 20px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    scroll-behavior: auto !important;
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }

  .js .service-ribbons[data-service-ribbons] .service-ribbon {
    opacity: 1 !important;
    filter: none !important;
    transform: none !important;
    animation: none !important;
  }
}

@media print {
  html, body { background: #fff; }
  .site-header, .site-footer, .skip-link, .nav-toggle { display: none !important; }
  main { box-shadow: none; }
  .section { break-inside: avoid; padding: 32px 0; }
  .section--dark { color: #111; background: #fff !important; }
  .hero::before, .hero::after, .audio::before, .audio::after, .section--studio::before, .section--studio::after { display: none; }
  a[href^="http"]::after, a[href^="mailto"]::after { content: " (" attr(href) ")"; font-size: .85em; }
}

/* --------------------------------------------------------------------------
   Original-reference visual fidelity patch
   Scope: requested corrections only; production file structure remains intact.
   -------------------------------------------------------------------------- */

/* 1) Active font pair matched to the original: Inter body + Playfair Display display. */
:root {
  --font-body: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-display: "Playfair Display", Georgia, serif;
}

/* 2) Hero background position/fade and headline leading restored closer to original. */
.hero {
  grid-template-columns: minmax(380px, 0.46fr) 1fr !important;
  gap: clamp(34px, 5vw, 88px) !important;
  min-height: clamp(630px, 74vh, 880px) !important;
  padding-right: 0 !important;
  background: #fff !important;
}
.hero::before {
  inset: 0 0 0 36% !important;
  background-image: image-set(url("../img/hero-on-air.webp") type("image/webp"), url("../img/hero-on-air.jpg") type("image/jpeg")) !important;
  background-size: cover !important;
  background-position: 36% center !important;
  background-repeat: no-repeat !important;
}
.hero::after {
  background:
    linear-gradient(90deg,
      #fff 0%,
      #fff 29%,
      rgba(255,255,255,.995) 35%,
      rgba(255,255,255,.94) 43%,
      rgba(255,255,255,.78) 52%,
      rgba(255,255,255,.48) 62%,
      rgba(255,255,255,.18) 72%,
      rgba(255,255,255,0) 84%),
    linear-gradient(180deg,
      rgba(255,255,255,.84) 0%,
      rgba(255,255,255,.22) 14%,
      rgba(255,255,255,0) 30%,
      rgba(255,255,255,0) 78%,
      rgba(255,255,255,.48) 100%) !important;
}
.hero__content {
  position: relative !important;
  z-index: 2 !important;
  max-width: 650px !important;
}
.section h1,
.hero h1,
#hero-title {
  font-size: clamp(46px, 6.4vw, 102px) !important;
  line-height: 1.02 !important;
  letter-spacing: -0.055em !important;
}
.hero .lead strong { font-weight: 850 !important; }

/* 3) Belief label: same top/left anchoring as the clients section label. */
.belief {
  align-items: start !important;
  padding-top: var(--section-y-compact) !important;
}
.belief .section-kicker { align-self: start !important; }

/* 4) Client logos: original one-line desktop rail and 3/3/2 inset mobile layout; no frames. */
.clients .logo-grid {
  grid-template-columns: repeat(8, minmax(70px, 1fr)) !important;
  gap: clamp(8px, 1.1vw, 18px) !important;
  align-items: center !important;
  justify-items: center !important;
  min-height: 82px !important;
  margin-top: 22px !important;
}
.clients .logo-grid li {
  min-height: 58px !important;
  width: 100% !important;
  display: grid !important;
  place-items: center !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}
.clients .logo-grid img {
  width: min(100%, 87px) !important;
  height: auto !important;
  object-fit: contain !important;
  filter: none;
}

.clients [data-client-logos] li {
  --client-delay: calc(var(--client-index) * 40ms);
}

.clients [data-client-logos] li:nth-child(1) { --client-index: 0; }
.clients [data-client-logos] li:nth-child(2) { --client-index: 1; }
.clients [data-client-logos] li:nth-child(3) { --client-index: 2; }
.clients [data-client-logos] li:nth-child(4) { --client-index: 3; }
.clients [data-client-logos] li:nth-child(5) { --client-index: 4; }
.clients [data-client-logos] li:nth-child(6) { --client-index: 5; }
.clients [data-client-logos] li:nth-child(7) { --client-index: 6; }
.clients [data-client-logos] li:nth-child(8) { --client-index: 7; }
.clients [data-client-logos] img {
  transform-origin: center;
  opacity: .18;
  filter: grayscale(1) blur(5px);
  transform: scale(.98);
  will-change: transform, opacity, filter;
}

.clients [data-client-logos].is-in-view img {
  animation: client-soft-focus 1.10s ease both;
  animation-delay: var(--client-delay);
}

@keyframes client-soft-focus {
  0% { opacity: .18; filter: grayscale(1) blur(5px); transform: scale(.98); }
  100% { opacity: 1; filter: grayscale(0) blur(0); transform: scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  .clients [data-client-logos] img {
    animation: none !important;
  }
}

/* 7) Award logos: same-width SVG rail with client-logo animation. */
.award-grid {
  grid-template-columns: repeat(6, minmax(86px, 1fr)) !important;
  gap: 10px !important;
  margin: 0 !important;
}
.award-grid li {
  min-height: 64px !important;
  width: 100% !important;
  display: grid !important;
  place-items: center !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}
.award-logo-area { display: block !important; }
.award-grid[data-award-logos] li {
  --award-delay: calc(var(--award-index) * 40ms);
}
.award-grid[data-award-logos] li:nth-child(1) { --award-index: 0; }
.award-grid[data-award-logos] li:nth-child(2) { --award-index: 1; }
.award-grid[data-award-logos] li:nth-child(3) { --award-index: 2; }
.award-grid[data-award-logos] li:nth-child(4) { --award-index: 3; }
.award-grid[data-award-logos] li:nth-child(5) { --award-index: 4; }
.award-grid[data-award-logos] li:nth-child(6) { --award-index: 5; }
.award-grid[data-award-logos] img {
  width: min(100%, 98px) !important;
  height: auto !important;
  max-height: 64px !important;
  object-fit: contain !important;
  opacity: .18;
  filter: grayscale(1) blur(5px);
  transform: scale(.98);
  transform-origin: center;
  will-change: transform, opacity, filter;
}
.award-grid[data-award-logos].is-in-view img {
  animation: client-soft-focus 1.10s ease both;
  animation-delay: var(--award-delay);
}
.awards__copy[data-award-copy] {
  gap: 16px !important;
  text-align: left !important;
}
.awards__copy[data-award-copy] p:last-of-type {
  max-width: 29rem !important;
  color: var(--color-ink-soft) !important;
  font-family: var(--font-body) !important;
  font-size: clamp(1.1rem, 1.52vw, 1.46rem) !important;
  font-weight: 650 !important;
  line-height: 1.2 !important;
}
@media (max-width: 820px) {
  .award-grid[data-award-logos] img {
    width: min(100%, 81px) !important;
    max-height: 56px !important;
  }
  .awards__copy[data-award-copy] p:last-of-type {
    max-width: 34rem !important;
    font-size: clamp(.92rem, 3.45vw, 1.06rem) !important;
    line-height: 1.18 !important;
  }
}
@media (prefers-reduced-motion: reduce) {
  .award-grid[data-award-logos] img { animation: none !important; }
}
/* 8) Audio copy: restore the subtle glass plate behind the headline/text block. */
.audio__copy.glass-card,
.audio .glass-card {
  padding: 24px !important;
  border: 1px solid rgba(255,255,255,.16) !important;
  border-radius: 10px !important;
  background: color-mix(in srgb, #ffffff 16%, transparent) !important;
  box-shadow: 0 22px 70px rgba(0,0,0,.14) !important;
  backdrop-filter: blur(10px) saturate(1.08) !important;
  -webkit-backdrop-filter: blur(10px) saturate(1.08) !important;
}

/* 9) Studio: original-style background photo mode, not foreground-card/photo mode. */
.section--studio {
  grid-template-columns: minmax(300px, .72fr) minmax(260px, .58fr) !important;
  gap: clamp(34px, 5vw, 70px) !important;
  min-height: 690px !important;
  background: #fff !important;
  overflow: hidden !important;
}
.section--studio::before {
  background-image: image-set(url("../img/studio-regie-bw.webp") type("image/webp"), url("../img/studio-regie-bw.jpg") type("image/jpeg")) !important;
  background-position: center !important;
  background-size: cover !important;
  opacity: .96 !important;
  filter: none !important;
}
.section--studio::after {
  background: linear-gradient(90deg, rgba(255,255,255,.94), rgba(255,255,255,.70)) !important;
  opacity: .68 !important;
}
.studio__photo { display: none !important; }
.studio__copy.glass-card,
.studio__copy.glass-card--light {
  padding: 24px !important;
  border: 1px solid rgba(255,255,255,.38) !important;
  border-radius: 10px !important;
  background: rgba(255,255,255,.78) !important;
  box-shadow: 0 22px 70px rgba(22,33,42,.12) !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
}
.studio__copy h2 {
  font-size: clamp(28px, 4.25vw, 58px) !important;
  line-height: 1.02 !important;
}
.studio__copy h2 span {
  color: var(--color-accent-strong) !important;
  white-space: nowrap !important;
}
.studio__note {
  align-self: end !important;
  margin-bottom: clamp(12px, 3vw, 48px) !important;
  padding: 22px !important;
  border: 1px solid rgba(22,33,42,.11) !important;
  border-radius: 10px !important;
  background: rgba(255,255,255,.78) !important;
  color: var(--color-ink-soft) !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
}

/* 10) Strategy mark: original target icon instead of a plain circle. */
.icon-mark {
  width: 70px !important;
  height: 70px !important;
  margin-bottom: 0 !important;
  border: 2px solid var(--color-accent-strong) !important;
  border-radius: 50% !important;
  background:
    radial-gradient(circle,
      var(--color-accent-strong) 0 4px,
      transparent 5px 16px,
      color-mix(in srgb, var(--color-accent-strong) 20%, transparent) 17px 18px,
      transparent 19px) !important;
}

/* 11) KI mark: original rounded-square node icon. */
.ki__mark {
  width: 86px !important;
  height: 86px !important;
  border: 2px solid var(--color-accent) !important;
  border-radius: 22px !important;
  background:
    radial-gradient(circle at 32% 34%, var(--color-accent) 0 4px, transparent 5px),
    radial-gradient(circle at 70% 42%, var(--color-accent) 0 4px, transparent 5px),
    radial-gradient(circle at 50% 70%, var(--color-accent) 0 4px, transparent 5px) !important;
  opacity: .85 !important;
}

/* 12) Final CTA mark: original blue rounded-square chat/search mark. */
.chat-mark {
  width: 74px !important;
  height: 74px !important;
  display: block !important;
  position: relative !important;
  border: 0 !important;
  border-radius: 12px !important;
  background: var(--color-accent) !important;
}
.chat-mark::after {
  content: "" !important;
  position: absolute !important;
  inset: 20px !important;
  border: 3px solid #fff !important;
  border-radius: 50% !important;
}
.chat-mark::before {
  content: "" !important;
  position: absolute !important;
  left: 43px !important;
  top: 43px !important;
  width: 16px !important;
  height: 3px !important;
  background: #fff !important;
  transform: rotate(35deg) !important;
}

@media (min-width: 1500px) {
  .hero::before {
    inset-left: 38% !important;
    background-position: 34% center !important;
  }
}

@media (max-width: 1120px) {
  .section--studio {
    grid-template-columns: 1fr !important;
    min-height: auto !important;
  }
  .studio__note { align-self: start !important; margin-bottom: 0 !important; }
}

@media (max-width: 820px) {
  .hero {
    grid-template-columns: 1fr !important;
    min-height: auto !important;
    padding-top: 54px !important;
    padding-bottom: clamp(335px, 76vw, 500px) !important;
    gap: 0 !important;
    background: #fff !important;
  }
  .hero::before {
    inset: auto 0 0 0 !important;
    height: clamp(335px, 76vw, 500px) !important;
    background-image:
      linear-gradient(180deg,
        #fff 0%,
        rgba(255,255,255,.99) 8%,
        rgba(255,255,255,.86) 17%,
        rgba(255,255,255,.60) 28%,
        rgba(255,255,255,.34) 40%,
        rgba(255,255,255,.14) 52%,
        rgba(255,255,255,.03) 66%,
        rgba(255,255,255,0) 78%),
      image-set(url("../img/hero-on-air-mobile.webp") type("image/webp"), url("../img/hero-on-air-mobile.jpg") type("image/jpeg")) !important;
    background-size: 100% 100%, cover !important;
    background-position: center top, center bottom !important;
    background-repeat: no-repeat, no-repeat !important;
  }
  .hero::after {
    content: none !important;
    display: none !important;
  }
  .hero__content { max-width: 100% !important; }
  .section h1,
  .hero h1,
  #hero-title {
    font-size: clamp(52px, 14vw, 92px) !important;
    line-height: 1.02 !important;
  }
  .belief { grid-template-columns: 1fr !important; }
  .clients .logo-grid {
    grid-template-columns: repeat(6, 1fr) !important;
    gap: 12px !important;
  }
  .clients .logo-grid li {
    grid-column: span 2 !important;
    min-width: 0 !important;
    min-height: 50px !important;
  }
  .clients .logo-grid li:nth-last-child(2) { grid-column: 2 / span 2 !important; }
  .clients .logo-grid li:nth-last-child(1) { grid-column: 4 / span 2 !important; }
  .clients .logo-grid img {
    width: min(100%, 52px) !important;
    height: auto !important;
  }
  .award-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 12px !important;
  }
  .award-grid li { min-height: 58px !important; }
  .award-grid img { height: 58px !important; }
}

@media (max-width: 520px) {
  .hero {
    padding-bottom: clamp(340px, 82vw, 450px) !important;
  }
  .hero::before {
    height: clamp(340px, 82vw, 450px) !important;
    background-image:
      linear-gradient(180deg,
        #fff 0%,
        rgba(255,255,255,.99) 7%,
        rgba(255,255,255,.84) 16%,
        rgba(255,255,255,.58) 27%,
        rgba(255,255,255,.32) 39%,
        rgba(255,255,255,.13) 51%,
        rgba(255,255,255,.025) 65%,
        rgba(255,255,255,0) 78%),
      image-set(url("../img/hero-on-air-mobile.webp") type("image/webp"), url("../img/hero-on-air-mobile.jpg") type("image/jpeg")) !important;
    background-size: 100% 100%, cover !important;
    background-position: center top, center bottom !important;
  }
}

/* Hero lead word highlight. */
.hero-lead {
  --hero-mark: #c5a13c;
}

.hero-word {
  position: relative;
  display: inline-block;
  isolation: isolate;
  padding-inline: .22em;
  color: #10243d;
  font-weight: 850;
  white-space: nowrap;
}

.hero-word::before,
.hero-word::after {
  content: "";
  position: absolute;
  top: .12em;
  bottom: .1em;
  z-index: -1;
  width: 2px;
  background: var(--hero-mark);
  pointer-events: none;
  transform: scaleY(.3);
  transform-origin: center;
}

.hero-word::before { left: 0; }
.hero-word::after { right: 0; animation-delay: .12s; }

.hero-lead.is-in-view .hero-word::before,
.hero-lead.is-in-view .hero-word::after {
  animation: hero-mark-gates-once 1.35s ease-in-out forwards;
}

@keyframes hero-mark-gates-once {
  0% {
    transform: scaleY(.3);
    opacity: .45;
  }
  72% {
    transform: scaleY(1);
    opacity: 1;
  }
  100% {
    transform: scaleY(1);
    opacity: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero-word::before,
  .hero-word::after {
    animation: none;
    transform: scaleY(1);
    opacity: 1;
  }
}

/* Belief section final responsive treatment. */
.belief__copy[data-belief-sample] {
  --belief-gold: #b8932e;
  --belief-copy-max: 780px;
  --belief-copy-gap: clamp(24px, 3vw, 38px);
  --belief-line-1-size: clamp(1.44rem, 2.35vw, 2.32rem);
  --belief-line-2-size: clamp(1.44rem, 2.35vw, 2.2rem);
  --belief-line-3-size: clamp(1.44rem, 2.5vw, 2.38rem);
  --belief-line-1-leading: 1.12;
  --belief-line-2-leading: 1.08;
  --belief-line-3-leading: 1.1;
  --belief-line-2-font: var(--font-display);
  --belief-line-2-color: var(--color-ink-soft);
  --belief-line-3-color: var(--color-accent-strong);
  --belief-card-bg: rgba(255, 255, 255, .44);
  --belief-card-shadow: 0 .12em 0 rgba(184, 147, 46, .28);
  --belief-swipe-bg: rgba(184, 147, 46, .22);
  max-width: var(--belief-copy-max);
  gap: var(--belief-copy-gap);
}

.belief__copy[data-belief-sample] .belief-line--one {
  color: var(--color-ink);
  font-size: var(--belief-line-1-size);
  font-weight: 850;
  line-height: var(--belief-line-1-leading);
}

.belief__copy[data-belief-sample] .belief-line--two {
  max-width: 38rem;
  color: var(--belief-line-2-color);
  font-family: var(--belief-line-2-font);
  font-size: var(--belief-line-2-size);
  font-weight: 400;
  line-height: var(--belief-line-2-leading);
}

.belief__copy[data-belief-sample] .belief-line--three {
  max-width: 42rem;
  color: var(--belief-line-3-color);
  font-size: var(--belief-line-3-size);
  font-weight: 850;
  line-height: var(--belief-line-3-leading);
}

.belief-word {
  position: relative;
  display: inline-block;
  isolation: isolate;
  color: inherit;
  white-space: nowrap;
}

.belief-word::after {
  content: "";
  position: absolute;
  z-index: -1;
  pointer-events: none;
}

.belief-line--one .belief-word {
  padding: .03em .18em .07em;
  border-radius: 3px;
}

.belief-line--one .belief-word::after {
  inset: 0;
  border-radius: inherit;
  background: var(--belief-card-bg);
  box-shadow: var(--belief-card-shadow);
  opacity: 0;
  transform: translateY(.18em) scale(.94);
}

.belief-line--two .belief-word,
.belief-line--three .belief-word {
  padding-inline: .12em;
}

.belief-line--two .belief-word::after,
.belief-line--three .belief-word::after {
  left: -.05em;
  right: -.05em;
  bottom: .08em;
  height: .32em;
  background: var(--belief-swipe-bg);
  transform: scaleX(.08);
  transform-origin: left center;
  opacity: .15;
}

.belief__copy.is-in-view .belief-line--one .belief-word::after {
  animation: belief-card-in .95s cubic-bezier(.19, 1, .22, 1) forwards;
}

.belief__copy.is-in-view .belief-line--two .belief-word::after,
.belief__copy.is-in-view .belief-line--three .belief-word::after {
  animation: belief-swipe-in 1.15s cubic-bezier(.19, 1, .22, 1) forwards;
}

.belief__copy.is-in-view [data-belief-word="ankommen"]::after { animation-delay: .1s; }
.belief__copy.is-in-view [data-belief-word="angekommen"]::after { animation-delay: .18s; }
.belief__copy.is-in-view [data-belief-word="kopf"]::after { animation-delay: .28s; }
.belief__copy.is-in-view [data-belief-word="erinnerung"]::after { animation-delay: .38s; }

@keyframes belief-card-in {
  0% {
    opacity: 0;
    transform: translateY(.18em) scale(.94);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes belief-swipe-in {
  0%, 18% {
    transform: scaleX(.08);
    opacity: .15;
  }
  100% {
    transform: scaleX(1);
    opacity: 1;
  }
}

@media (max-width: 520px) {
  .belief__copy[data-belief-sample] {
    --belief-line-1-size: clamp(1.72rem, 2.75vw, 2.74rem);
    --belief-line-2-size: clamp(1.1rem, 1.55vw, 1.42rem);
    --belief-line-3-size: clamp(1.76rem, 3.2vw, 3.22rem);
    --belief-line-3-color: #17385d;
    --belief-swipe-bg: rgba(255, 255, 255, .34);
  }

  .belief-line--two [data-belief-word="kopf"] {
    padding: .03em .18em .07em;
    border-radius: 3px;
  }

  .belief-line--two [data-belief-word="kopf"]::after {
    inset: 0;
    height: auto;
    border-radius: inherit;
    background: var(--belief-card-bg);
    box-shadow: var(--belief-card-shadow);
    transform: translateY(.18em) scale(.94);
    transform-origin: center;
  }

  .belief__copy.is-in-view .belief-line--two [data-belief-word="kopf"]::after {
    animation: belief-card-in .95s cubic-bezier(.19, 1, .22, 1) .28s forwards;
  }
}

@media (prefers-reduced-motion: reduce) {
  .belief-line--one .belief-word::after,
  .belief-line--two .belief-word::after,
  .belief-line--three .belief-word::after {
    animation: none !important;
    opacity: 1;
    transform: none;
  }
}

/* Final selected treatments after variant review. */
@media (max-width: 820px) {
  .showreel {
    min-height: auto !important;
    padding-block: clamp(46px, 10vw, 72px) !important;
    gap: 28px !important;
  }
}

.audio-title {
  font-size: clamp(2rem, 3.3vw, 3.35rem) !important;
  line-height: 1.07 !important;
}
.audio-belief-word {
  position: relative;
  display: inline-block;
  isolation: isolate;
  color: #fff;
  font-style: normal;
  white-space: nowrap;
}
.audio-belief-word::after {
  content: "";
  position: absolute;
  left: -.06em;
  right: -.06em;
  bottom: .06em;
  z-index: -1;
  height: .33em;
  background: rgba(184,147,46,.36);
  opacity: .12;
  pointer-events: none;
  transform: scaleX(.08);
  transform-origin: left center;
}
.audio-title--gold-wipe.is-in-view .audio-belief-word::after {
  animation: audio-gold-wipe 1.1s ease forwards;
}
@keyframes audio-gold-wipe {
  0% { opacity: .12; transform: scaleX(.08); }
  65% { opacity: 1; transform: scaleX(1); }
  100% { opacity: .72; transform: scaleX(1); }
}
@media (max-width: 820px) {
  .audio-title {
    font-size: clamp(2.05rem, 8.3vw, 3rem) !important;
    line-height: 1.05 !important;
  }
}

.studio__copy h2 {
  font-size: clamp(25px, 3.4vw, 48px) !important;
  line-height: 1.04 !important;
}
@media (max-width: 820px) {
  .studio__copy h2 {
    font-size: clamp(1.55rem, 6vw, 2.15rem) !important;
    line-height: 1.06 !important;
  }
}



.strategy-flow {
  --flow-duration: 900ms;
  --flow-step-delay: 297ms;
  --flow-link-delay: 198ms;
  --flow-num-w: 54px;
  --flow-line: rgba(184, 147, 46, .38);
  position: relative;
  isolation: isolate;
  max-width: 100%;
  margin-top: 2px;
  color: var(--color-ink);
}
.strategy-flow *,
.strategy-flow *::before,
.strategy-flow *::after { min-width: 0; }
.flow-steps {
  display: grid;
  gap: 9px;
  list-style: none;
  margin: 0;
  padding: 0;
  position: relative;
}
.flow-step {
  position: relative;
  display: grid;
  grid-template-columns: var(--flow-num-w) minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  min-height: 58px;
  padding: 12px 14px;
  background: #fff;
  border: 1px solid var(--color-line-strong);
  border-radius: 999px;
  color: var(--color-ink);
  box-shadow: 0 8px 22px rgba(22, 33, 42, .055);
  overflow: visible;
  transform-origin: center;
}
.flow-step:not(:last-child)::after {
  content: "";
  position: absolute;
  z-index: 2;
  left: 50%;
  top: 100%;
  width: 2px;
  height: 9px;
  background: var(--flow-line);
  transform: translateX(-50%);
  pointer-events: none;
}
.flow-step:not(:last-child)::before {
  content: "";
  position: absolute;
  z-index: 3;
  left: 50%;
  bottom: -13px;
  width: 18px;
  height: 8px;
  transform: translateX(-50%);
  background: radial-gradient(circle at center, #b8932e 0 4px, transparent 4px);
  pointer-events: none;
}
.step-num {
  display: grid;
  place-items: center;
  min-width: var(--flow-num-w);
  height: 30px;
  border-radius: 999px;
  background: var(--color-accent);
  color: #fff;
  font-size: .75rem;
  font-weight: 850;
  letter-spacing: .04em;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.step-title {
  font-size: clamp(.95rem, 1.1vw, 1.02rem);
  line-height: 1.12;
  font-weight: 850;
  letter-spacing: -.018em;
}
.step-fx {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  border-radius: inherit;
  overflow: hidden;
}
.step-num,
.step-title {
  position: relative;
  z-index: 2;
}
.js .strategy-flow[data-animate-on-view]:not(.is-in-view) .flow-step {
  opacity: 0;
  transform: translateY(-6px) translateX(calc(var(--i) * 8px));
}
.js .strategy-flow[data-animate-on-view]:not(.is-in-view) .flow-step::after {
  opacity: 0;
  transform: translateX(-50%) scaleY(0);
}
.js .strategy-flow[data-animate-on-view]:not(.is-in-view) .flow-step::before {
  opacity: 0;
  transform: translateX(-50%) scale(0.82);
}
.strategy-flow--stair-build.is-in-view .flow-step {
  opacity: 0;
  transform: translateY(-6px) translateX(calc(var(--i) * 8px));
  animation-name: stairBuild;
  animation-duration: var(--flow-duration);
  animation-fill-mode: both;
  animation-timing-function: cubic-bezier(.2, .72, .14, 1);
  animation-delay: calc(var(--i) * var(--flow-step-delay));
}
.strategy-flow--stair-build.is-in-view .flow-step::after,
.strategy-flow--stair-build.is-in-view .flow-step::before {
  animation-duration: calc(var(--flow-duration) * .45);
  animation-fill-mode: both;
  animation-timing-function: cubic-bezier(.2, .72, .14, 1);
  animation-delay: calc(var(--i) * var(--flow-step-delay) + var(--flow-link-delay));
}
.strategy-flow--stair-build.is-in-view .flow-step::after {
  transform: translateX(-50%) scaleY(0);
  transform-origin: top;
  animation-name: linkDrawY;
}
.strategy-flow--stair-build.is-in-view .flow-step::before {
  opacity: 0;
  animation-name: nodePop;
}
@keyframes stairBuild {
  to { opacity: 1; transform: translateY(0) translateX(0); }
}
@keyframes linkDrawY {
  to { opacity: 1; transform: translateX(-50%) scaleY(1); }
}
@keyframes nodePop {
  65% { opacity: 1; transform: translateX(-50%) scale(1.18); }
  100% { opacity: 1; transform: translateX(-50%) scale(1); }
}


.contact-cta {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.contact-cta::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: 0;
}
.contact-cta--sheen.is-in-view::after {
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.28), transparent);
  animation: cta-sheen 1.1s ease both;
}
@keyframes cta-sheen { 0% { opacity: 0; transform: translateX(-120%); } 42% { opacity: 1; } 100% { opacity: 0; transform: translateX(120%); } }

@media (prefers-reduced-motion: reduce) {
  .audio-belief-word::after,
  .strategy-flow .flow-step,
  .strategy-flow .flow-step::before,
  .strategy-flow .flow-step::after,
  .contact-cta::after {
    animation: none !important;
  }
  .js .strategy-flow[data-animate-on-view] .flow-step,
  .js .strategy-flow[data-animate-on-view] .flow-step::before,
  .js .strategy-flow[data-animate-on-view] .flow-step::after {
    opacity: 1 !important;
    transform: none !important;
  }
  .js .strategy-flow[data-animate-on-view] .flow-step::before {
    transform: translateX(-50%) scale(1) !important;
  }
  .js .strategy-flow[data-animate-on-view] .flow-step::after {
    transform: translateX(-50%) scaleY(1) !important;
  }
}

@media (max-width: 520px) {
  .strategy-flow { --flow-num-w: 50px; }
  .flow-step {
    gap: 10px;
    min-height: 56px;
    padding: 11px 12px;
  }
  .step-num {
    height: 28px;
    font-size: .69rem;
  }
  .step-title { font-size: .94rem; }
}

@media (max-width: 820px) {
  .hero-question-kicker {
    max-width: 34rem;
    margin-top: clamp(16px, 7vw, 32px);
    margin-bottom: -8px;
    font-size: clamp(.92rem, 3.45vw, 1.06rem);
    line-height: 1.18;
  }
}

/* --------------------------------------------------------------------------
   Final production hero section
   Hard-coded from selected hero settings; no lab/runtime controls.            
   -------------------------------------------------------------------------- */
.hero--final {
  position: relative !important;
  isolation: isolate !important;
  min-height: clamp(650px, 75vh, 860px) !important;
  display: grid !important;
  align-items: center !important;
  grid-template-columns: 1fr !important;
  padding: clamp(66px, 6.2vw, 110px) var(--pad-x) !important;
  overflow: hidden !important;
  background: #18262f !important;
}
.hero--final::before,
.hero--final::after {
  content: none !important;
  display: none !important;
}
.hero-final__photo,
.hero-final__overlay {
  position: absolute !important;
  inset: 0 !important;
  pointer-events: none !important;
}
.hero-final__photo {
  z-index: -3 !important;
  overflow: hidden !important;
  background: #18262f !important;
}
.hero-final__photo img {
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  object-fit: cover !important;
  transform-origin: 50% 50% !important;
  transform: scale(1) !important;
  object-position: 50% 50% !important;
}
.hero-final__photo--mobile { display: none !important; }
.hero-final__overlay {
  z-index: -2 !important;
  opacity: .17 !important;
  background:
    linear-gradient(90deg,
      rgba(29,45,55,.95) 0%,
      rgba(29,45,55,.82) 31%,
      rgba(29,45,55,.52) 44%,
      rgba(29,45,55,.22) 53%,
      rgba(29,45,55,0) 60%),
    linear-gradient(180deg,
      rgba(29,45,55,.38) 0%,
      rgba(29,45,55,0) 26%,
      rgba(29,45,55,0) 76%,
      rgba(29,45,55,.22) 100%) !important;
}
.hero-final__panel {
  position: relative !important;
  z-index: 2 !important;
  width: min(84%, 760px) !important;
  max-width: calc(100vw - (var(--pad-x) * 2)) !important;
  display: grid !important;
  gap: clamp(18px, 1.5vw, 26px) !important;
  padding: clamp(34px, 3.1vw, 56px) clamp(42px, 3.7vw, 68px) clamp(34px, 3.1vw, 56px) clamp(34px, 3.1vw, 56px) !important;
  border-radius: 6px !important;
  background: rgba(29,45,55,.15) !important;
  color: #f3f6f7 !important;
  box-shadow: 0 24px 66px rgba(0,0,0,.18) !important;
  backdrop-filter: blur(5px) saturate(1.08) !important;
  -webkit-backdrop-filter: blur(5px) saturate(1.08) !important;
}
.hero--final .eyebrow {
  margin: 0 !important;
  color: #c5a13c !important;
  font-size: .75rem !important;
  font-weight: 850 !important;
  letter-spacing: .16em !important;
  text-transform: uppercase !important;
}
.hero--final .hero-question-kicker { display: none !important; }
.hero--final h1,
.hero--final #hero-title {
  width: max-content !important;
  max-width: 100% !important;
  margin: 0 !important;
  color: #f6f7f4 !important;
  font-family: var(--font-display) !important;
  font-size: clamp(54px, 4.4vw, 92px) !important;
  font-weight: 500 !important;
  line-height: .98 !important;
  letter-spacing: -0.052em !important;
  text-wrap: nowrap !important;
}
.hero--final #hero-title span {
  display: block !important;
  white-space: nowrap !important;
}
/* Hero title word highlight: same swipe pattern as belief-word / Erinnerung. */
.hero--final #hero-title .hero-effect {
  position: relative !important;
  display: inline-block !important;
  isolation: isolate !important;
  color: inherit !important;
  white-space: nowrap !important;
  padding-inline: .12em !important;
  margin-inline: 0 !important;
}
.hero--final #hero-title .hero-effect::after {
  content: "";
  position: absolute;
  left: -.05em;
  right: -.05em;
  bottom: .08em;
  z-index: -1;
  height: .32em;
  background: var(--belief-swipe-bg, rgba(184, 147, 46, .22));
  transform: scaleX(.08);
  transform-origin: left center;
  opacity: .15;
  pointer-events: none;
}
.hero--final #hero-title .hero-effect.is-in-view::after {
  animation: belief-swipe-in 1.15s cubic-bezier(.19, 1, .22, 1) .38s forwards;
}
.hero--final .hero-lead {
  max-width: 45rem !important;
  margin: 0 !important;
  color: rgba(246,247,244,.92) !important;
  font-size: clamp(.9rem, 1.15vw, 1.32rem) !important;
  font-weight: 140 !important;
  line-height: 1.36 !important;
  letter-spacing: -.012em !important;
}
.hero--final .button-row {
  margin-top: clamp(10px, 1.7vw, 22px) !important;
  gap: 0 !important;
}
.hero--final .button-row .text-link { display: none !important; }
.hero--final .btn--primary {
  min-width: 214px !important;
  min-height: 60px !important;
  padding-inline: 26px !important;
  background: rgba(85,99,109,1) !important;
  color: #fff !important;
  box-shadow: 0 12px 26px rgba(0,0,0,.14) !important;
  opacity: 1 !important;
}
.hero--final .btn--primary:hover {
  background: var(--color-accent-strong) !important;
}

@media (max-width: 820px) {
  .hero--final {
    min-height: clamp(700px, calc(100svh - 0px), 960px) !important;
    padding: clamp(18px, 4.8vw, 28px) 0 clamp(34px, 8vw, 54px) !important;
    align-items: start !important;
  }
  .hero-final__photo--desktop { display: none !important; }
  .hero-final__photo--mobile { display: block !important; }
  .hero-final__photo img {
    transform-origin: 50% 50% !important;
    transform: scale(1) !important;
    object-position: 50% 50% !important;
  }
  .hero-final__overlay {
    opacity: .2 !important;
    background:
      linear-gradient(180deg,
        rgba(29,45,55,.94) 0%,
        rgba(29,45,55,.82) 41%,
        rgba(29,45,55,.50) 54%,
        rgba(29,45,55,.20) 64%,
        rgba(29,45,55,0) 72%),
      linear-gradient(90deg,
        rgba(29,45,55,.16) 0%,
        rgba(29,45,55,0) 60%) !important;
  }
  .hero-final__panel {
    width: 93% !important;
    max-width: 93% !important;
    margin-inline: auto !important;
    gap: clamp(10px, 2.7vw, 15px) !important;
    padding: clamp(22px, 5.7vw, 32px) clamp(20px, 5vw, 30px) clamp(22px, 5.7vw, 32px) !important;
    border-radius: 5px !important;
    background: rgba(29,45,55,.25) !important;
    backdrop-filter: blur(7px) saturate(1.08) !important;
    -webkit-backdrop-filter: blur(7px) saturate(1.08) !important;
  }
  .hero--final .eyebrow {
    font-size: .74rem !important;
    font-weight: 850 !important;
    letter-spacing: .13em !important;
  }
  .hero--final h1,
  .hero--final #hero-title {
    width: 100% !important;
    max-width: 100% !important;
    font-size: clamp(30px, 8.3vw, 58px) !important;
    font-weight: 500 !important;
    line-height: 1.01 !important;
    letter-spacing: -0.044em !important;
  }
  .hero--final .hero-lead {
    max-width: 100% !important;
    font-size: clamp(.86rem, 3.45vw, 1.08rem) !important;
    font-weight: 300 !important;
    line-height: 1.30 !important;
  }
  .hero--final .button-row {
    margin-top: clamp(10px, 3.6vw, 18px) !important;
    align-items: stretch !important;
  }
  .hero--final .btn--primary {
    width: 100% !important;
    min-height: clamp(58px, 14vw, 70px) !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero--final .hero-effect::after {
    animation: none !important;
    opacity: 1 !important;
    transform: scaleX(1) !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero--final #hero-title .hero-effect::after {
    animation: none !important;
    opacity: 1 !important;
    transform: scaleX(1) !important;
  }
}